/* ==========================================================================
   CLAUDE: Breadcrumbs Component
   CLAUDE: Zentrale Styles für alle Seiten mit Breadcrumb-Navigation
   CLAUDE: Anpassen: Farben via CSS Variables (--pvm-primary, --pvm-secondary)
   CLAUDE: Version: 2.1.0 (2025-01-08)
   ========================================================================== */

/* ==========================================================================
   CLAUDE: Container Styles
   CLAUDE: Leichter Hintergrund mit subtiler Untergrenze
   ========================================================================== */

.pvm-breadcrumbs {
    padding: 0.875rem 0;                           /* CLAUDE: 14px vertikaler Abstand */
    background: #f8f9fa;                           /* CLAUDE: Sehr heller Hintergrund */
    border-bottom: 1px solid #e9ecef;              /* CLAUDE: Subtile Trennlinie */
}

/* ==========================================================================
   CLAUDE: Liste Styles (Flexbox horizontal)
   ========================================================================== */

.pvm-breadcrumbs__list {
    display: flex;                                 /* CLAUDE: Horizontal anordnen */
    flex-wrap: wrap;                               /* CLAUDE: Umbruch auf Mobile erlauben */
    gap: 0.5rem;                                   /* CLAUDE: 8px zwischen Items */
    list-style: none;                              /* CLAUDE: Keine Aufzählungspunkte */
    margin: 0;
    padding: 0;
    font-size: 0.875rem;                           /* CLAUDE: 14px - dezent */
    line-height: 1.4;
}

/* ==========================================================================
   CLAUDE: Item Styles (einzelne Breadcrumb-Elemente)
   ========================================================================== */

.pvm-breadcrumbs__item {
    display: flex;
    align-items: center;
    color: #666;                                   /* CLAUDE: Mittleres Grau */
}

/* CLAUDE: Trennzeichen nach jedem Item (außer letztem) */
.pvm-breadcrumbs__item::after {
    content: '›';                                  /* CLAUDE: Chevron-Zeichen */
    margin-left: 0.5rem;
    color: #999;                                   /* CLAUDE: Helleres Grau für Separator */
    font-weight: 300;
}

/* CLAUDE: Kein Trennzeichen nach letztem Item */
.pvm-breadcrumbs__item:last-child::after {
    content: '';
}

/* ==========================================================================
   CLAUDE: Link Styles (anklickbare Items)
   ========================================================================== */

.pvm-breadcrumbs__item a {
    color: var(--pvm-primary, #8C0AB7);           /* CLAUDE: Primärfarbe */
    text-decoration: none;
    transition: color 0.2s ease;
}

.pvm-breadcrumbs__item a:hover {
    color: var(--pvm-secondary, #2d1b69);         /* CLAUDE: Dunklere Hover-Farbe */
    text-decoration: underline;
}

/* CLAUDE: Fokus-Styles für Accessibility */
.pvm-breadcrumbs__item a:focus {
    outline: 2px solid var(--pvm-primary, #8C0AB7);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ==========================================================================
   CLAUDE: Aktuelles Item (keine Verlinkung)
   ========================================================================== */

.pvm-breadcrumbs__item--current {
    color: #333;                                   /* CLAUDE: Dunkleres Grau */
    font-weight: 500;                              /* CLAUDE: Leicht fetter */
}

/* ==========================================================================
   CLAUDE: Responsive Anpassungen
   ========================================================================== */

/* CLAUDE: Tablet */
@media (max-width: 768px) {
    .pvm-breadcrumbs {
        padding: 0.75rem 0;                        /* CLAUDE: Etwas weniger Padding */
    }

    .pvm-breadcrumbs__list {
        font-size: 0.8125rem;                      /* CLAUDE: 13px auf Tablet */
    }
}

/* CLAUDE: Mobile */
@media (max-width: 480px) {
    .pvm-breadcrumbs__list {
        font-size: 0.75rem;                        /* CLAUDE: 12px auf Mobile */
        gap: 0.375rem;                             /* CLAUDE: 6px Gap */
    }

    .pvm-breadcrumbs__item::after {
        margin-left: 0.375rem;
    }
}

/* ==========================================================================
   CLAUDE: Reduced Motion (Accessibility)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .pvm-breadcrumbs__item a {
        transition: none;
    }
}

/* ==========================================================================
   CLAUDE: Print Styles
   ========================================================================== */

@media print {
    .pvm-breadcrumbs {
        background: none;
        border-bottom: 1px solid #ccc;
        padding: 0.5rem 0;
    }

    .pvm-breadcrumbs__item a {
        color: #000;
        text-decoration: underline;
    }
}