/* ==========================================================================
   Mega-Dropdown für den Navigationspunkt „Modelle"
   Text-only, kompakt: drei Antriebs-Spalten mit Modell-Textlinks.
   Reines CSS-Hover (plus :focus-within für Tastatur). Auf allen Seiten
   über <link> eingebunden, damit die Navigation identisch bleibt.
   ========================================================================== */

/* Der Listenpunkt spannt das Panel über die gesamte Nav-Breite auf */
.nav-item.has-mega { position: static; }

.has-mega > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Hover-Brücke: vergrössert die Hover-Fläche bis zur Nav-Unterkante,
       ohne das Layout zu verschieben (negativer Margin gleicht das Padding aus).
       Verhindert das Flackern beim Weg von „Modelle" zum Panel. */
    padding: 15px 0;
    margin: -15px 0;
}
/* Schmale Brücke nur unterhalb von „Modelle" (nicht über der ganzen Nav),
   nur im geöffneten Zustand aktiv – blockiert so die anderen Nav-Punkte nicht. */
.has-mega > a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 34px;
    display: none;
}
.has-mega:hover > a::after,
.has-mega:focus-within > a::after {
    display: block;
}
.nav-caret {
    font-size: 17px;
    line-height: 1;
    transition: transform 0.2s ease;
}
.has-mega:hover .nav-caret,
.has-mega:focus-within .nav-caret {
    transform: rotate(180deg);
}

/* Panel */
.mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 70;
    /* Sicherheitsnetz: das geschlossene Panel darf keine Maus-Events abfangen,
       auch wenn ein Kind sein visibility ueberschreiben sollte. */
    pointer-events: none;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ==========================================================================
   Marken-Ebene: links Volvo/Voyah, rechts die Modelle der aktiven Marke.
   Beim Öffnen von „Modelle" ist Volvo voraktiviert (js/mega-nav.js), damit
   das Panel nie leer wirkt. Hover auf Voyah wechselt die Marke, Hover
   zurück auf Volvo schaltet wieder um; beim Verlassen setzt es zurück.
   ========================================================================== */
.mega-brands {
    max-width: 1165px;
    margin: 0 auto;
    padding: 24px 30px 36px;
}
.mega .mega-brand-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    font-size: 19px;
    font-weight: var(--fw-medium);
    color: var(--navy-alt);
    text-transform: none;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.mega-brand-arrow {
    font-size: 18px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

/* Desktop: zweispaltiges Grid. Die Marken-Wrapper werden per display:contents
   aufgelöst, damit Label (Spalte 1) und Flyout (Spalte 2) direkt Grid-Items
   sind – so wächst die Panel-Höhe automatisch mit dem längsten Modell-Inhalt
   (keine feste min-height mehr). Der Wrapper bleibt fürs Mobile-Accordion. */
@media (min-width: 861px) {
    .mega-brands {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        column-gap: 60px;
        row-gap: 0;
        align-content: start;
    }
    .mega-brand { display: contents; }

    .mega .mega-brand-label {
        grid-column: 1;
        align-self: start;
    }
    .mega .mega-brand.is-active > .mega-brand-label {
        background: var(--cream-card);
        opacity: 1;
    }
    .mega .mega-brand.is-active > .mega-brand-label .mega-brand-arrow {
        color: var(--navy-alt);
    }

    /* Alle Flyouts liegen übereinander in Spalte 2 und spannen über sämtliche
       Marken-Zeilen. Das versteckte Flyout belegt weiter Platz – dadurch
       springt die Panel-Höhe beim Marken-Wechsel nicht. */
    /* Kein visibility-Wechsel hier: ein visibility:visible am Kind wuerde das
       visibility:hidden des geschlossenen .mega-Panels aufheben und das Flyout
       trotz opacity:0 hoverbar machen (Panel oeffnet beim Hovern im Content). */
    .mega-brand-flyout {
        grid-column: 2;
        grid-row: 1 / span 50;
        padding-left: 40px;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
    }
    .mega-brand.is-active > .mega-brand-flyout {
        opacity: 1;
        pointer-events: auto;
    }
}

.mega-brand-flyout .mega-inner {
    max-width: none;
    margin: 0;
    padding: 0;
}
.mega-empty { color: var(--text-muted); font-size: 15px; padding: 10px 0; }

.mega-inner {
    max-width: 1165px;
    margin: 0 auto;
    padding: 36px 30px 40px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 56px;
}
/* Alle Spalten gleich breit und bündig; Trennlinie mittig im Spaltenabstand */
.mega-col { position: relative; }
.mega-col + .mega-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -28px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.mega-drive {
    font-size: 23px;
    font-weight: var(--fw-bold);
    color: var(--navy-alt);
    text-transform: none;
    line-height: 1.1;
    margin-bottom: 4px;
}
.mega-drive span {
    display: block;
    font-size: 14px;
    font-weight: var(--fw-light);
    color: var(--text-muted);
    margin-top: 2px;
}

.mega-cat {
    font-size: 13px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 20px 0 6px;
}

.mega ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mega li { margin: 0; }
.mega li a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 6px;
    margin: 0 -6px;
    color: var(--navy-alt);
    text-transform: none;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}
.mega li a:hover { background-color: var(--cream-card); opacity: 1; }
.mega li a img {
    width: 68px;
    height: 42px;
    object-fit: contain;
    flex-shrink: 0;
}
.mega-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.mega-name {
    font-size: 18px;
    font-weight: var(--fw-medium);
    color: var(--navy-alt);
}
.mega-price {
    font-size: 13px;
    font-weight: var(--fw-light);
    color: var(--text-muted);
    /* Preis soll nie umbrechen – die Spalte im Modelle-Menü ist knapp */
    white-space: nowrap;
}
/* Etwas schmalere Vorschau im Modelle-Menü, damit der Preis Platz hat */
.mega-brand-flyout li a img { width: 60px; }

/* Mobile Nav-Styles (Burger-Menü + Accordion) stehen gebündelt am Dateiende,
   damit sie die Desktop-Panel-Regeln zuverlässig überschreiben. */

/* ==========================================================================
   Einfaches Dropdown für „Über uns" (schmale Liste unter dem Nav-Punkt)
   ========================================================================== */
/* padding-bottom + negativer margin: verlängert die Box bis zur Nav-Unterkante,
   damit das Dropdown bündig am Navbalken beginnt (ohne das Layout zu verschieben) */
.nav-item.has-sub {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: -12px;
}
.has-sub > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 15px 0;
    margin: -15px 0;
}
/* Schmale Hover-Brücke nur unter „Über uns", nur im geöffneten Zustand */
.has-sub > a::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 34px;
    display: none;
}
.has-sub:hover > a::after,
.has-sub:focus-within > a::after { display: block; }

/* Aktiv-Unterstrich: Diese Links tragen 15px Padding unten (Hover-Brücke)
   und sind ein Flex-Container mit voller Zeilenhöhe (27px statt der 20px
   Textfläche bei normalen Links). Normale Links: Strich 4px unter der
   Textfläche. Hier: 15px Padding + ca. 3.6px Zeilenabstand − 4px ≈ 15px. */
@media (min-width: 861px) {
    .nav-links .has-sub > a[aria-current="page"]::before,
    .nav-links .has-mega > a[aria-current="page"]::before { bottom: 15px; }
}

.sub {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 300px;
    background: var(--white);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 70;
    padding: 10px 0;
}
/* Rechteste Dropdowns nach links öffnen, damit sie nicht über den Rand ragen */
.has-sub--right .sub {
    left: auto;
    right: 0;
}
.has-sub:hover .sub,
.has-sub:focus-within .sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sub a {
    display: block;
    padding: 11px 24px;
    font-size: 16px;
    font-weight: var(--fw-medium);
    color: var(--navy-alt);
    text-transform: none;
    transition: background-color 0.15s ease;
}
.sub a:hover { background: var(--cream-card); opacity: 1; }
/* Gruppen-Titel (Angebote/Services/Zubehör) – reine Labels, nicht klickbar */
.sub .sub-group {
    display: block;
    padding: 12px 24px 2px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--text-muted);
}
.sub a.sub-child { padding-left: 44px; }

/* ==========================================================================
   Mobil (Burger-Menü): Dropdowns als Accordions
   - „Modelle" / „Über uns" antippen klappt das jeweilige Untermenü auf/zu
   - innerhalb von „Modelle" ist jeder Antrieb (Hybrid, …) ein eigenes Accordion
   Steht am Dateiende, damit es die Desktop-Panel-Regeln sicher überschreibt.
   ========================================================================== */
@media (max-width: 860px) {
    /* Desktop-Hover-Brücken zurücksetzen */
    .has-mega > a,
    .has-sub > a { padding: 0; margin: 0; }
    .nav-item.has-sub { padding-bottom: 0; margin-bottom: 0; }
    .nav-item.has-mega,
    .nav-item.has-sub { display: block; width: 100%; }

    /* Text = Link zur Seite, Pfeil = eigener Tap-Bereich zum Auf-/Zuklappen */
    .has-mega > a,
    .has-sub > a {
        display: flex;
        width: 100%;
        align-items: stretch;
        justify-content: space-between;
        padding: 6px 0;
    }
    .nav-caret {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        width: 48px;
        font-size: 0;                /* Text-Glyph ausblenden – Pfeil wird per CSS gezeichnet */
    }
    .nav-caret::before {
        content: "";
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgba(var(--white-rgb), 0.85);
        transition: transform 0.2s ease;
    }
    .has-mega.is-open > a .nav-caret::before,
    .has-sub.is-open > a .nav-caret::before { transform: rotate(180deg); }
    /* Aktiv-Unterstreichung im mobilen Menü nicht über die volle Breite ziehen */
    .nav-links a[aria-current="page"]::before { display: none; }

    /* Panels: statisch + standardmässig eingeklappt */
    .mega,
    .sub {
        position: static;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;   /* Desktop-Sicherheitsnetz hier zuruecknehmen */
        transform: none;
        background: transparent;
        box-shadow: none;
        border-top: 0;
        min-width: 0;
        z-index: auto;
        padding: 2px 0 6px;
        display: none;
    }
    .has-mega.is-open > .mega,
    .has-sub.is-open > .sub { display: block; }

    /* „Über uns"-Unterpunkte */
    .sub a {
        padding: 9px 0 9px 18px;
        font-size: 15px;
        color: rgba(var(--white-rgb), 0.85);
    }
    .sub a:hover { background: transparent; color: var(--white); }
    .sub .sub-group {
        display: block;
        padding: 10px 0 2px 18px;
        font-size: 12px;
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        color: rgba(var(--white-rgb), 0.55);
    }
    .sub a.sub-child { padding-left: 34px; }

    /* Marken (Volvo/Voyah) als Accordion-Ebene */
    .mega-brands { position: static; max-width: none; margin: 0; padding: 0; min-height: 0; }
    .mega .mega-brand-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 10px 12px 10px 16px;
        font-size: 16px;
        color: var(--white);
    }
    /* Gleiches Pfeil-Icon wie .nav-caret und .mega-drive (statt des „›"-Zeichens),
       damit alle drei Accordion-Ebenen einheitlich aussehen. */
    .mega-brand-arrow {
        position: relative;
        display: inline-block;
        width: 10px;
        height: 12px;
        font-size: 0;
        transition: transform 0.2s ease;
    }
    .mega-brand-arrow::before {
        content: "";
        position: absolute;
        left: 0;
        top: 3px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgba(var(--white-rgb), 0.7);
    }
    .mega-brand.is-open > .mega-brand-label .mega-brand-arrow { transform: rotate(180deg); }
    .mega-brand-flyout {
        position: static;
        top: auto; left: auto; right: auto;
        min-height: 0;
        padding-left: 0;
        border-left: 0;
        opacity: 1;
        visibility: visible;
        display: none;
    }
    .mega-brand.is-open > .mega-brand-flyout { display: block; }
    .mega-empty { color: rgba(var(--white-rgb), 0.6); padding: 8px 0 8px 16px; }

    /* „Modelle"-Mega: eine Spalte, Antriebe als Accordion */
    .mega-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: none;
        margin: 0;
        padding: 0;
    }
    /* Antriebe innerhalb einer Marke etwas einrücken */
    .mega-brand-flyout .mega-drive { padding-left: 28px; }
    /* Kategorie-Titel (SUV/Kombi/…) auf derselben Einrückung wie die
       Modelle darunter halten (.mega-cat / .mega li a greifen weiter unten
       im File mit padding-left: 30px) – sonst hängt der Titel sichtbar
       versetzt über seiner eigenen Liste. */
    .mega-col { padding-left: 0; border-left: 0; }
    .mega-col + .mega-col::before { display: none; }
    .mega-col + .mega-col { margin-top: 2px; }

    /* Antriebs-Überschrift = Accordion-Toggle */
    .mega-drive {
        position: relative;
        cursor: pointer;
        color: var(--white);
        font-size: 16px;
        margin: 0;
        padding: 10px 30px 10px 18px;
    }
    .mega-drive span { color: rgba(var(--white-rgb), 0.6); }
    /* Gleiches Dreieck wie .nav-caret / .mega-brand-arrow, statt eines
       Sonderzeichens – sonst sehen die drei Accordion-Ebenen unterschiedlich aus. */
    .mega-drive::after {
        content: "";
        position: absolute;
        right: 12px;
        top: 16px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgba(var(--white-rgb), 0.7);
        transition: transform 0.2s ease;
    }
    .mega-col.is-open > .mega-drive::after { transform: rotate(180deg); }

    /* Modelle je Antrieb: eingeklappt, per .is-open sichtbar */
    .mega-col > .mega-cat,
    .mega-col > ul { display: none; }
    .mega-col.is-open > .mega-cat,
    .mega-col.is-open > ul { display: block; }

    .mega-cat { color: rgba(var(--white-rgb), 0.55); margin: 8px 0 2px; padding-left: 30px; }
    .mega li a { padding: 7px 0 7px 30px; margin: 0; border-radius: 0; gap: 10px; }
    .mega li a:hover { background: transparent; }
    .mega li a img { display: none; }
    .mega-name { font-size: 15px; color: rgba(var(--white-rgb), 0.9); }
    .mega-price { font-size: 13px; color: rgba(var(--white-rgb), 0.55); }

    /* Alle Menüpunkte linksbündig (auch Suche), nicht nur die Dropdown-Punkte */
    .nav-links {
        align-items: flex-start;
        max-height: calc(100vh - 60px);
        overflow-y: auto;
        overflow-x: hidden;      /* verhindert horizontalen Scroll im Menü */
    }
    .nav-links > li { width: 100%; min-width: 0; }
    .nav-links > li > a { text-align: left; }
    /* Sicherheitsnetz: nichts im Menü darf breiter als die Spalte werden */
    .mega, .mega-inner, .mega-col, .mega ul, .mega li, .sub { max-width: 100%; }
}

/* ==========================================================================
   Mega-Menü „Dienstleistungen"
   Gleiche Mechanik wie das Modelle-Menü: links die Auswahl, rechts das Panel.
   Zusätzlich steht über den Unterpunkten je ein Gruppentitel (Angebote,
   Services, Zubehör), die Unterpunkte selbst sind dafür eingerückt.
   ========================================================================== */

/* Gruppentitel – reine Beschriftung, nicht anwählbar */
.mega-group {
    margin: 0;
    padding: 0 16px 4px;
    font-size: 12px;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.mega--dl .mega-brand-label {
    cursor: default;
    user-select: none;
}

@media (min-width: 861px) {
    .mega--dl .mega-brands {
        grid-template-columns: 250px minmax(0, 1fr);
    }
    .mega-group {
        grid-column: 1;
        align-self: start;
        margin-top: 18px;
    }
    /* Der erste Gruppentitel sitzt bündig mit der Oberkante des Panels */
    .mega-group:first-child { margin-top: 0; }

    /* Unterpunkte gegenüber dem Gruppentitel einrücken */
    .mega--dl .mega-brand-label {
        padding: 9px 16px 9px 28px;
        font-size: 17px;
    }
}

/* Spaltenzahl im Panel richtet sich nach der Länge der Liste.
   Die Spalten werden nicht auf die volle Panel-Breite gedehnt, sondern auf
   eine feste Maximalbreite begrenzt und linksbündig gesetzt – sonst zieht
   sich die Hover-Fläche bei einspaltigen Listen über das ganze Panel. */
.mega--dl .mega-inner { justify-content: start; }
.mega-inner--1 { grid-template-columns: minmax(0, 330px); }
.mega-inner--2 { grid-template-columns: repeat(2, minmax(0, 330px)); }
.mega--dl .mega-inner--3 { grid-template-columns: repeat(3, minmax(0, 330px)); }

/* Kompaktere Zeilen als im Modelle-Menü – die längste Liste hat 12 Einträge */
.mega--dl li a {
    gap: 12px;
    padding: 6px;
}
.mega--dl li a img,
.mega-thumb-ph {
    width: 56px;
    height: 35px;
    flex-shrink: 0;
    object-fit: cover;
}
/* Platzhalter für Seiten, die noch kein Bild haben (Inhalte der Garage) */
.mega-thumb-ph {
    display: block;
    background: var(--cream-card);
}
.mega--dl .mega-name {
    font-size: 16px;
    line-height: 1.25;
}

@media (max-width: 860px) {
    /* Mobil: Gruppentitel als Zwischenzeile, Unterpunkte als Accordion.
       Die Listen hängen hier direkt am Unterpunkt, nicht an einem Antrieb –
       deshalb die Accordion-Regeln der Modell-Spalten zurücknehmen. */
    .mega-group {
        padding: 12px 0 2px 16px;
        color: rgba(var(--white-rgb), 0.55);
    }
    .mega--dl .mega-brand-label { padding-left: 28px; }
    .mega--dl .mega-col > ul { display: block; }
    .mega--dl .mega-inner { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
    .mega--dl li a img,
    .mega-thumb-ph { display: none; }
    .mega--dl li a { padding: 7px 0 7px 40px; }
}

/* Navipunkte ohne eigene Seite (Modelle, Dienstleistungen) verhalten sich
   optisch wie Links: sie öffnen nur das Menü. */
.nav-links a:not([href]) { cursor: pointer; }

/* ==========================================================================
   Schmaler Desktop (861–1100px): das Modelle-Panel hat nur ~500px für drei
   Spalten, die Preise ragten rechts aus dem Fenster. Daher ohne Vorschau-
   bilder und mit engerem Spaltenabstand; „Über uns" öffnet nach links,
   weil der Punkt weit rechts sitzt.
   ========================================================================== */
@media (min-width: 861px) and (max-width: 1100px) {
    .mega-brand-flyout .mega-inner { gap: 20px 28px; }
    .mega-col + .mega-col::before { left: -14px; }
    .mega-brand-flyout li a img { display: none; }
    .mega-brands { grid-template-columns: 200px minmax(0, 1fr); column-gap: 30px; }
    .mega--dl .mega-brands { grid-template-columns: 220px minmax(0, 1fr); }
    .mega-brand-flyout { padding-left: 24px; }
    .nav-item.has-sub .sub { left: auto; right: 0; }
}

/* ==========================================================================
   Hauptnavigation auf schmalen Desktops (861–1200px): weniger Abstand und
   kleinere Schrift, Marken-Logos aus, damit kein Punkt umbricht
   („Unsere / Fahrzeuge", „Über / uns").
   ========================================================================== */
@media (min-width: 861px) and (max-width: 1200px) {
    .nav-links { gap: 20px; }
    .nav-links > li > a,
    .nav-links .has-mega > a,
    .nav-links .has-sub > a { font-size: 15px; white-space: nowrap; }
    .nav-brands { display: none; }
}