/* ============================================================
   navbar.css – Haupt-Navigation (site-nav)
   Desktop : Flexbox-Leiste mit Hover-Megamenü
   Mobile  : Burger-Toggle via Checkbox-Technik
   Variablen aus design.css werden genutzt.
   ============================================================ */

/* ── Site-Header über Hero-/Info-Sektionen halten ────────────
   layout.css setzt bereits position:relative.
   z-index stellt den Header und das Dropdown-Panel
   über alle nachfolgenden Seitenabschnitte.              ── */
.site-header {
    position: relative;
    z-index: 200;
}

/* ── Navigationsleiste ───────────────────────────────────────
   Flexbox statt Float:
   • kein overflow:hidden nötig (Float-Clearfix entfällt)
   • overflow:visible erlaubt das herausragende Dropdown-Panel
   • align-items:stretch hält alle Kinder gleich hoch        */
.site-nav {
    background-color: var(--ani-black);
    position: relative;
    z-index: 200;
    display: flex;
    align-items: stretch;
    overflow: visible;
}

/* ── Checkboxen – immer unsichtbar ─────────────────────────── */
#nav-toggle,
.drop-toggle {
    display: none;
    position: absolute;
}

/* ── Gemeinsame Typografie für Links und Buttons ─────────────
   Einheitliche Schrift, Größe und Zeilenabstand verhindert
   den vertikalen Versatz zwischen <a>- und <button>-Einträgen */
.site-nav > a,
.nav-dropdown .nav-dropbtn,
.nav-mobile-btn {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 0.7rem 1.1rem;
    color: var(--ani-white);
    background: none;
    border: none;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
}

/* Links: als Flex-Kind, Text vertikal zentriert */
.site-nav > a {
    display: flex;
    align-items: center;
}

/* ── Burger-Icon: auf Desktop unsichtbar ─────────────────── */
.nav-menu-icon {
    display: none;
    align-items: center;
    margin-left: auto;
    padding: 0.6rem 1rem;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ani-white);
    cursor: pointer;
    background: none;
    border: none;
}

/* ── Mobile-Label: auf Desktop unsichtbar ───────────────── */
.nav-mobile-btn {
    display: none;
}

/* ── Hover- und Aktiv-Zustände ──────────────────────────── */
.site-nav > a:hover,
.nav-dropdown:hover .nav-dropbtn,
.nav-menu-icon:hover,
.nav-mobile-btn:hover,
.site-nav > a.active,
.nav-dropdown.active .nav-dropbtn {
    background-color: var(--ani-blue);
    color: var(--ani-white);
    text-decoration: none;
}

/* ── Dropdown-Wrapper ───────────────────────────────────────
   Ist selbst ein Flex-Kind UND Flex-Container:
   align-items:stretch macht den Button so hoch wie die Nav   */
.nav-dropdown {
    position: relative;
    display: flex;
    align-items: stretch;
}

/* Button füllt die gesamte Höhe des Dropdown-Wrappers */
.nav-dropdown .nav-dropbtn {
    display: flex;
    align-items: center;
}

/* ── Dropdown-Panel ─────────────────────────────────────────
   z-index: 300 > .site-nav (200) – Panel schwebt über allem  */
.nav-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 70vw;
    max-width: 900px;   /* Deckel für sehr breite Bildschirme */
    min-width: 320px;   /* Minimum damit's nicht bricht       */
    background: var(--bg-section-light, #fff);
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
    z-index: 300;
    border-top: 3px solid var(--ani-blue);
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

/* ── Megamenü-Inhalt ────────────────────────────────────── */
.nav-mega-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
}

.nav-mega-col {
    flex: 1 1 160px;
    padding: 0.75rem;
    min-height: 160px;
}

.nav-mega-imgcol {
    flex: 0 0 34%;
    padding: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
}

.nav-mega-imgcol img {
    max-width: 100%;
    max-height: 180px;
    border-radius: var(--radius-md, 8px);
    display: block;
}

.nav-mega-col h3 {
    margin: 0 0 0.4rem 0;
    padding: 0.3rem 0.75rem 0.5rem;
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ani-blue);
    border-bottom: 1px solid var(--border-soft, rgba(0, 0, 0, 0.08));
}

.nav-mega-col a {
    display: block;
    padding: 0.45rem 0.75rem;
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--text-main, #111);
    text-decoration: none;
    border-radius: var(--radius-sm, 4px);
}

.nav-mega-col a:hover {
    background-color: var(--bg-section-neutral, #f0f2f5);
    color: var(--ani-blue);
    text-decoration: none;
}

.nav-caret {
    font-size: 0.65em;
    vertical-align: middle;
    margin-left: 0.25em;
    opacity: 0.75;
}

/* ============================================================
   Mobile  (max-width: 768px)
   ============================================================ */
@media screen and (max-width: 768px) {

    /* Umbruch erlauben */
    .site-nav {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* Burger-Icon einblenden */
    .nav-menu-icon {
        display: flex;
    }

    /* Alle Nav-Punkte standardmäßig ausblenden */
    .site-nav > a,
    .site-nav > .nav-dropdown {
        display: none;
        width: 100%;
    }

    /* Aufdecken wenn Burger-Checkbox aktiviert */
    #nav-toggle:checked ~ a,
    #nav-toggle:checked ~ .nav-dropdown {
        display: flex;
    }

    .site-nav > a {
        justify-content: flex-start;
    }

    /* Desktop-Button auf Mobile ausblenden */
    .nav-dropdown .nav-dropbtn {
        display: none;
    }

    /* Mobile-Label anzeigen */
    .nav-mobile-btn {
        display: flex;
        align-items: center;
        width: 100%;
    }

    /* Dropdown-Wrapper auf Mobile: vertikal stapeln */
    .nav-dropdown {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Dropdown-Panel: statisch und volle Breite */
    .nav-dropdown-content {
        position: static;
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-shadow: none;
        padding: 0;
        display: none;
        border-top: none;
        border-left: 3px solid var(--ani-blue);
        border-radius: 0;
        margin-left: 0.5rem;
        z-index: auto;
    }

    /* Dropdown öffnen wenn Checkbox checked */
    .drop-toggle:checked + .nav-mobile-btn + .nav-dropdown-content {
        display: block;
    }

    /* Spalten untereinander stapeln */
    .nav-mega-col,
    .nav-mega-imgcol {
        flex: 1 1 100%;
        min-height: auto;
        justify-content: flex-start;
    }

    .nav-mega-imgcol img {
        max-height: 100px;
        width: auto;
    }
}