/* ==========================================================================
   Kopfzeile: schmale Markenleiste + klebende Hauptnavigation
   ========================================================================== */

/* --- Markenleiste ---------------------------------------------------------- */

.markenleiste {
    background: var(--anthrazit);
    color: rgba(242, 244, 246, .72);
    font-size: .8125rem;
}

.markenleiste__inhalt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .35rem 1.25rem;
    min-height: 2.35rem;
    padding-block: .35rem;
}

.markenleiste__text {
    letter-spacing: .02em;
}

.markenleiste__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(242, 244, 246, .82);
    text-decoration: none;
    font-weight: 600;
}

.markenleiste__link:hover,
.markenleiste__link:focus-visible {
    color: var(--orange);
}

.markenleiste__pfeil { flex: none; opacity: .8; }

@media (max-width: 575.98px) {
    .markenleiste__text { display: none; }
    .markenleiste__inhalt { justify-content: center; }
}

/* --- Hauptnavigation -------------------------------------------------------- */

.hauptnavigation {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--grau-hell);
    box-shadow: 0 1px 0 rgba(31, 38, 46, .04);
}

.hauptnavigation.ist-gescrollt {
    box-shadow: var(--schatten-klein);
}

.hauptnavigation__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-m);
    min-height: 4.5rem;
    padding-block: .5rem;
}

/* --- Marke ------------------------------------------------------------------ */

.marke {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    flex: none;
}

.marke__logo {
    width: auto;
    height: 3rem;
    flex: none;
    transition: transform var(--uebergang);
}

.marke:hover .marke__logo { transform: translateY(-2px) scale(1.03); }

.marke__text { display: flex; flex-direction: column; line-height: 1.1; }

.marke__name {
    font-family: var(--schrift-titel);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--anthrazit);
}

.marke__und { color: var(--rot); }

.marke__zusatz {
    margin-top: .18rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-leise);
}

@media (max-width: 400px) {
    .marke__logo { height: 2.5rem; }
    .marke__name { font-size: 1.2rem; }
    .marke__zusatz { font-size: .62rem; letter-spacing: .06em; }
}

/* --- Menue-Schalter (mobil) --------------------------------------------------- */

.menue-schalter {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.85rem;
    height: 2.85rem;
    padding: 0 .6rem;
    border: 1px solid var(--grau-hell);
    border-radius: var(--radius-s);
    background: var(--weiss);
    cursor: pointer;
}

.menue-schalter__balken {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--anthrazit);
    transition: transform var(--uebergang), opacity var(--uebergang);
}

.menue-schalter[aria-expanded="true"] { border-color: var(--rot); }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] .menue-schalter__balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Menue -------------------------------------------------------------------- */

.hauptmenue {
    align-items: center;
    gap: var(--abstand-m);
}

/* Ab dieser Breite ist das Menue immer sichtbar – Bootstraps .collapse wird
   dafuer gezielt ueberschrieben. */
@media (min-width: 1200px) {
    .hauptmenue.collapse:not(.show) { display: flex; }
    .hauptmenue.show               { display: flex; }
}

.hauptmenue__liste {
    display: flex;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hauptmenue__punkt { position: relative; }

.hauptmenue__link {
    display: block;
    padding: .6rem .85rem;
    border-radius: var(--radius-s);
    font-size: .96rem;
    font-weight: 600;
    color: var(--anthrazit-hell);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--uebergang), color var(--uebergang);
}

.hauptmenue__link:hover,
.hauptmenue__link:focus-visible {
    background: var(--rot-hell);
    color: var(--rot-dunkel);
}

.hauptmenue__link.ist-aktiv {
    color: var(--rot-dunkel);
    background: var(--rot-hell);
}

.hauptmenue__punkt--klappbar {
    display: flex;
    align-items: center;
}

.hauptmenue__punkt--klappbar .hauptmenue__link { padding-right: .35rem; }

.hauptmenue__klapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-s);
    background: transparent;
    color: var(--schiefer);
    cursor: pointer;
    transition: transform var(--uebergang), color var(--uebergang);
}

.hauptmenue__klapper:hover { color: var(--rot); }
.hauptmenue__klapper[aria-expanded="true"] { transform: rotate(180deg); color: var(--rot); }

.untermenue.dropdown-menu {
    --bs-dropdown-min-width: 15rem;
    --bs-dropdown-padding-y: .4rem;
    --bs-dropdown-border-color: var(--grau-hell);
    --bs-dropdown-border-radius: var(--radius-m);
    --bs-dropdown-link-hover-bg: var(--rot-hell);
    --bs-dropdown-link-hover-color: var(--rot-dunkel);
    --bs-dropdown-link-active-bg: var(--rot-hell);
    --bs-dropdown-link-active-color: var(--rot-dunkel);
    margin-top: .5rem;
    box-shadow: var(--schatten-mittel);
}

.untermenue .dropdown-item {
    padding: .55rem 1rem;
    font-size: .93rem;
    font-weight: 500;
    border-radius: var(--radius-s);
}

.untermenue .dropdown-item.ist-aktiv {
    color: var(--rot-dunkel);
    background: var(--rot-hell);
    font-weight: 700;
}

/* --- Aktionsknopf ------------------------------------------------------------- */

.hauptmenue__aktion {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .62rem 1.1rem;
    border-radius: 999px;
    background: var(--rot);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(225, 9, 22, .28);
    transition: background var(--uebergang), transform var(--uebergang), box-shadow var(--uebergang);
}

.hauptmenue__aktion:hover,
.hauptmenue__aktion:focus-visible {
    background: var(--rot-dunkel);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(225, 9, 22, .34);
}

/* --- Mobiles Menue ------------------------------------------------------------ */

@media (max-width: 1199.98px) {
    .menue-schalter { display: flex; }

    .hauptmenue {
        flex-direction: column;
        align-items: stretch;
        gap: var(--abstand-s);
        width: 100%;
        order: 3;
        padding: var(--abstand-s) 0 var(--abstand-m);
        border-top: 1px solid var(--grau-hell);
        margin-top: .35rem;
    }

    .hauptmenue.show,
    .hauptmenue.collapsing { display: flex; }

    .hauptnavigation__inhalt { flex-wrap: wrap; }

    .hauptmenue__liste {
        flex-direction: column;
        align-items: stretch;
        gap: .15rem;
    }

    .hauptmenue__punkt--klappbar { flex-wrap: wrap; }

    .hauptmenue__link {
        flex: 1;
        padding: .8rem .9rem;
        font-size: 1.02rem;
    }

    .hauptmenue__klapper {
        width: 2.75rem;
        height: 2.75rem;
        border: 1px solid var(--grau-hell);
    }

    .untermenue.dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100%;
        margin: .2rem 0 .5rem;
        border: 0;
        box-shadow: none;
        background: var(--papier);
        border-left: 3px solid var(--rot);
        border-radius: 0 var(--radius-s) var(--radius-s) 0;
    }

    .hauptmenue__aktion { justify-content: center; }
}