/*
 * Hauptmenü – Neugestaltung.
 * Aktiv mit <body class="nv-menu">; Markup bleibt nav.php, Logik bleibt js/header-behavior.js,
 * dazu js/menu-neu.js (Termin-Button, aktuelle Seite, weißes Logo, Dropdown-Richtung).
 * Die !important-Regeln überschreiben Inline-Styles, die header-behavior.js beim Öffnen
 * der Untermenüs setzt (dort wächst die Menüfläche – hier sind es schwebende Karten).
 *
 * Farben: hell ist Standard (alle normalen Seiten), dunkel mit <body class="theme-dark nv-menu">
 * (SmartSight Nova). Alles Farbliche läuft über die --menu-* Variablen.
 */

/* ------------------------------------------------------------------ hell (Standard) */
.nv-menu {
    --menu-h: 64px;
    --menu-pad-top: 16px;
    --menu-ease: var(--ease);

    --menu-glass: rgba(247, 247, 247, 0.78);     /* wie bisher #f7f7f7b3, etwas dichter */
    --menu-card: rgba(255, 255, 255, 0.96);
    --menu-full-bg: rgba(255, 255, 255, 0.97);   /* Vollbild-Menü auf dem Handy */
    --menu-text: var(--c-gray-900);
    --menu-soft: var(--c-gray-700);
    --menu-muted: var(--c-gray-600);
    --menu-line: rgba(0, 0, 0, 0.08);
    --menu-hover: rgba(0, 0, 0, 0.05);
    --menu-current: var(--c-gold-text);                     /* Logo-Gold, abgedunkelt für hellen Grund */
    --menu-shadow: rgba(0, 0, 0, 0.08);
    --menu-card-shadow: rgba(0, 0, 0, 0.14);
    --menu-cta: var(--c-gold);                         /* wie .button.gold der Website */
    --menu-cta-hover: var(--c-gold-hover);
    --menu-cta-text: #000;
}

/* ------------------------------------------------------------------ dunkel */
.theme-dark.nv-menu {
    --menu-glass: rgba(22, 22, 23, 0.72);
    --menu-card: rgba(29, 29, 31, 0.94);
    --menu-full-bg: rgba(0, 0, 0, 0.92);
    --menu-text: var(--c-gray-50);
    --menu-soft: var(--c-gray-300);
    --menu-muted: var(--c-gray-500);
    --menu-line: rgba(255, 255, 255, 0.12);
    --menu-hover: rgba(255, 255, 255, 0.08);
    --menu-current: var(--c-gold-light);
    --menu-shadow: rgba(0, 0, 0, 0.35);
    --menu-card-shadow: rgba(0, 0, 0, 0.5);
    --menu-cta: var(--c-gold-light);
    --menu-cta-hover: var(--c-gold-light-hover);
    --menu-cta-text: #000;
}

/* ------------------------------------------------------------------ gemeinsame Basis */
.nv-menu header.top { padding-top: var(--menu-pad-top); }
/* Platzhalter der Unterseiten an das schlankere Menü anpassen (vorher 48px + 80px) */
.nv-menu div.header-placeholder { height: calc(var(--menu-pad-top) + var(--menu-h) + 16px); }

.nv-menu nav.header__navbar .header__navbar-bg {
    background-color: var(--menu-glass);
    -webkit-backdrop-filter: saturate(180%) blur(30px);
    backdrop-filter: saturate(180%) blur(30px);
    box-shadow: inset 0 0 0 1px var(--menu-line), 0 12px 40px var(--menu-shadow);
    border-radius: var(--radius-md);
}
.nv-menu .header__navbar-content {
    letter-spacing: 0;
    font-weight: 400;
}
.nv-menu .header__navbar-logo { height: var(--menu-h); padding: 7px 0; }
/* Logo-Link hat sonst das Link-Padding (.2em oben/unten) aus main.css -> Zeile wird höher
   als die Leiste und alles darin (z. B. die drei Striche) sitzt ein paar Pixel zu tief */
.nv-menu #home-link-logo { padding: 0; }

/* Hauptpunkte in normaler Schreibweise statt GROSSBUCHSTABEN */
.nv-menu .header__navbar-subcontent > .header__navbar-menu-link {
    text-transform: lowercase;
    color: var(--menu-soft);
}
.nv-menu .header__navbar-subcontent > .header__navbar-menu-link::first-letter { text-transform: uppercase; }

/* alte Gold-Unterstreichung aus */
.nv-menu .header__navbar-menu-link:not(#home-link-logo)::after { display: none; }

/* aktuelle Seite */
.nv-menu .header__navbar-menu-link.is-current-section { color: var(--menu-text); }
.nv-menu .header__navbar-menu-link[aria-current="page"] { color: var(--menu-current) !important; }


/* Termin-Button (wird per Skript in die Liste eingefügt) */
.nv-menu .nv-nav-cta-item { list-style: none; }
.nv-menu .nv-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    background: var(--menu-cta);
    color: var(--menu-cta-text) !important;
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s, transform .25s var(--menu-ease);
}
.nv-menu .nv-nav-cta:hover { background: var(--menu-cta-hover); transform: scale(1.03); }

/* ================================================================== Desktop */
@media (min-width: 987px) {
    /* so breit wie der Seiteninhalt (.main-content-spacing, bis 1400px) */
    .nv-menu nav.header__navbar {
        height: var(--menu-h) !important;
        max-width: var(--main-content-max-width);
    }
    /* SmartSight (dunkel): Inhalt dort max. 1200px (.nv-wrap) */
    .theme-dark.nv-menu nav.header__navbar { max-width: 1200px; }
    .nv-menu nav.header__navbar .header__navbar-bg {
        height: var(--menu-h);
        overflow: visible;
        padding-bottom: 0 !important;   /* Inline-Styles aus header-behavior.js */
        margin-top: 0 !important;
        /* Glas-Effekt nicht am Balken selbst, sondern auf ::before: Ein Element mit
           backdrop-filter verhindert sonst, dass die Untermenü-Karten darin den
           Seiteninhalt weichzeichnen ("Backdrop Root"). */
        background: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
    }
    .nv-menu nav.header__navbar .header__navbar-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: var(--menu-glass);
        -webkit-backdrop-filter: saturate(180%) blur(30px);
        backdrop-filter: saturate(180%) blur(30px);
        box-shadow: inset 0 0 0 1px var(--menu-line), 0 12px 40px var(--menu-shadow);
        pointer-events: none;
    }
    .nv-menu .header__navbar-content {
        height: var(--menu-h);
        margin-top: 0 !important;
        padding: 0 10px 0 22px;
    }
    .nv-menu .header__navbar-menu-container {
        align-items: center;
        gap: 2px;
        margin: 0;
        padding: 0;
        font-size: var(--fs-sm);
    }
    .nv-menu .header__navbar-menu-item {
        position: relative;
        padding: 0;
    }
    /* Logo führt schon zur Startseite */
    .nv-menu .header__navbar-menu-item:has(#home-link) { display: none; }

    .nv-menu .header__navbar-subcontent { height: var(--menu-h); }
    .nv-menu .header__navbar-subcontent > .header__navbar-menu-link {
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        transition: color .2s, background-color .2s;
    }
    .nv-menu .header__navbar-menu-item:hover .header__navbar-subcontent > .header__navbar-menu-link,
    .nv-menu .header__navbar-subcontent > .header__navbar-menu-link.active-menu-link {
        color: var(--menu-text);
        background: var(--menu-hover);
    }
    /* kleiner Pfeil bei Punkten mit Untermenü */
    .nv-menu .header__submenu-link::after {
        display: inline-block !important;
        content: "\f078" !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin-left: 7px;
        background: none !important;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        line-height: 1;
        transform-origin: 50% 50%;
        font-size: .6em;
        vertical-align: 2px;
        transform: none !important;
        transition: transform .3s var(--menu-ease) !important;
        opacity: .7;
    }
    /* geöffnet: Pfeil nach oben – Zeichen tauschen statt drehen (Drehen verschiebt das Icon) */
    .nv-menu .header__navbar-menu-item:hover .header__submenu-link::after,
    .nv-menu .header__submenu-link.active-menu-link::after { content: "\f077" !important; }

    /* Untermenü als schwebende Karte */
    .nv-menu .expander {
        position: absolute;
        top: calc(100% - 8px);
        left: -6px;
        display: block;
        min-width: 280px;
        padding-top: 14px;                 /* unsichtbare Brücke für die Maus */
        margin-top: 0 !important;
        overflow: visible;
        visibility: hidden;
        transition: visibility .25s;
        pointer-events: none;
    }
    .nv-menu .header__navbar-menu-item:hover .expander,
    .nv-menu .header__navbar-menu-item:focus-within .expander,
    .nv-menu .expander.expanded {
        visibility: visible;
        transition: visibility 0s;
        pointer-events: auto;
    }
    /* Karte: gleiches Glas wie der Menübalken; Ein-/Ausblenden direkt an der Karte,
       damit der Weichzeichner von Anfang an greift */
    .nv-menu .expander-content {
        visibility: inherit;
        padding: 8px;
        border-radius: var(--radius-md);
        background: var(--menu-glass);
        -webkit-backdrop-filter: saturate(180%) blur(30px);
        backdrop-filter: saturate(180%) blur(30px);
        box-shadow: inset 0 0 0 1px var(--menu-line), 0 24px 60px var(--menu-card-shadow);
        opacity: 0;
        transform: translateY(-6px) scale(.98);
        transform-origin: top left;
        transition: opacity .25s var(--menu-ease), transform .3s var(--menu-ease);
    }
    .nv-menu .header__navbar-menu-item:hover .expander-content,
    .nv-menu .header__navbar-menu-item:focus-within .expander-content,
    .nv-menu .expander.expanded .expander-content {
        opacity: 1;
        transform: none;
    }
    .nv-menu .header__navbar-submenu,
    .nv-menu .header__navbar-submenu.hidden {
        display: block;
        visibility: inherit;
        position: static;
    }
    .nv-menu .header__navbar-submenu li { margin: 0; filter: none; }
    .nv-menu .header__navbar-submenu a {
        display: block;
        padding: 11px 14px;
        border-radius: var(--radius-sm);
        color: var(--menu-soft);
        font-size: var(--fs-base);
        white-space: nowrap;
        transition: color .2s, background-color .2s;
    }
    .nv-menu .header__navbar-submenu a:hover {
        color: var(--menu-text);
        background: var(--menu-hover);
    }

    .nv-menu .nv-nav-cta-item { margin-left: 10px; }

    /* Menü steht unten (Startseite, vor dem Hochwandern): Karten nach oben öffnen.
       Klasse "menu-up" setzt js/menu-neu.js. */
    .nv-menu header.menu-up .expander {
        top: auto;
        bottom: calc(100% - 8px);
        padding-top: 0;
        padding-bottom: 14px;
    }
    .nv-menu header.menu-up .expander-content {
        transform: translateY(6px) scale(.98);
        transform-origin: bottom left;
    }
    .nv-menu header.menu-up .header__navbar-menu-item:hover .expander-content,
    .nv-menu header.menu-up .header__navbar-menu-item:focus-within .expander-content,
    .nv-menu header.menu-up .expander.expanded .expander-content { transform: none; }
}

/* ================================================================== Startseite: wanderndes Menü (Desktop)
   Das Menü steht beim Laden 176px über dem unteren Rand, bleibt die ersten 176px Scrollweg
   stehen, läuft dann mit dem Inhalt nach oben und bleibt oben kleben.
   Reines CSS (position: sticky mit Ober- UND Unterkante) statt Skript: der Browser bewegt es
   selbst im Takt der Seite – mit Skript (auch GSAP) hinkt es in Safari hinterher.
   Rechnung: natürliche Lage = 100vh unter dem Seitenanfang; "bottom" hält es zunächst so, dass
   seine Oberkante bei 100vh - 176px liegt (bottom = 176px - Höhe 112px = 64px); Margin unten
   gleicht die 100vh + 112px wieder aus, damit der Inhalt darunter nicht verrutscht.
   Zwischen 769 und 986px übernimmt js/moving-header.js (GSAP). */
.nv-hdr-spacer { display: none; }
@media (min-width: 987px) {
    /* Platzhalter statt margin-top: ein klebendes Element darf nicht über den Anfang seines
       eigenen Außenabstands hinaus wandern – mit margin-top hätte "bottom" nicht gegriffen. */
    .nv-menu .nv-hdr-spacer { display: block; height: 100vh; }
    /* Abstand Menü -> Haupttext: Das Menü steht die ersten 144px Scrollweg still, danach laufen
       Menü und Text gemeinsam. Der Abstand dabei soll dem Abstand Textende -> nächster
       Abschnitt entsprechen (104px): 80px hier ergeben 104px beim gemeinsamen Mitlaufen. */
    .nv-menu .main__welcome-screen { padding-bottom: 80px; }
    .nv-menu header:not(.top) {
        /* oben derselbe Abstand wie auf allen Unterseiten (16px statt 48px) */
        padding-top: var(--menu-pad-top);
        --hdr-h: calc(var(--menu-pad-top) + var(--menu-h));   /* 16px + 64px = 80px */
        position: sticky;
        top: 0;
        bottom: 64px;                                 /* unten unverändert: Menü endet 64px über dem Rand */
        margin-bottom: calc(-100vh - var(--hdr-h));   /* Platzhalter + Menü wieder ausgleichen */
    }
}

/* ================================================================== Handy / Tablet */
@media (max-width: 986px) {
    .nv-menu {
        --menu-h: 60px;
        --menu-pad-top: 10px;
    }
    .nv-menu nav.header__navbar:not([aria-expanded="true"]) { height: var(--menu-h); }
}
/* Handy und Tablet (Menü mit 3 Strichen): Das Startseiten-Menü (header ohne .top) steht hier
   immer oben (siehe main.css) – mit demselben Abstand wie auf den Unterseiten. Sonst griff
   main.css (Seitenrand/2, 12–31px), und die Menüfläche wurde um diesen Abstand höher. */
@media (max-width: 986px) {
    .nv-menu header:not(.top) { padding-top: var(--menu-pad-top); }
}
@media (max-width: 986px) {
    /* Öffnen/Schließen: weichere Kurve, und auch Hintergrund + Schatten blenden über
       (vorher sprang die Fläche beim Schließen sofort von fast schwarz auf Glas) */
    .nv-menu nav.header__navbar { transition: height .5s var(--ease-std); }
    .nv-menu nav.header__navbar .header__navbar-bg {
        transition:
            border-radius .5s var(--ease-std),
            width .5s var(--ease-std),
            height .5s var(--ease-std),
            margin-top .5s var(--ease-std),
            padding-left .5s var(--ease-std),
            padding-right .5s var(--ease-std),
            padding-top .5s var(--ease-std),
            background-color .5s ease,
            box-shadow .5s ease;
    }
    .nv-menu nav.header__navbar .header__navbar-bg {
        margin-top: var(--menu-pad-top);   /* kleiner Abstand zum oberen Rand */
        border-radius: var(--radius-md);
    }
    .nv-menu .header__navbar-content { padding: 0 18px 0 14px; }
    .nv-menu .header__navbar-logo { height: var(--menu-h); padding: 9px 0; }
    .nv-menu #menuToggle span {
        width: 22px;
        height: 1.5px;
        margin-bottom: 6px;
        background: var(--menu-text);
    }
    .nv-menu #menuToggle span:nth-last-child(1) { margin-bottom: 0; }

    /* Vollbild-Menü */
    .nv-menu nav.header__navbar[aria-expanded="true"] .header__navbar-bg {
        background-color: var(--menu-full-bg);
        box-shadow: none;
        border-radius: 0;   /* Ecken laufen beim Öffnen aus (Transition aus main.css) */
        margin-top: 0;      /* Vollbild-Menü: bis an den Rand */
    }
    .nv-menu .header__navbar-menu-container {
        padding: 18px 4px 40px;
        font-size: var(--fs-base);
    }
    .nv-menu .header__navbar-menu-item {
        border-bottom: 1px solid var(--menu-line);
    }
    .nv-menu .header__navbar-menu-item.nv-nav-cta-item { border-bottom: 0; padding-top: 28px; }
    .nv-menu .header__navbar-subcontent { height: auto; }
    .nv-menu .header__navbar-subcontent > .header__navbar-menu-link {
        display: block;          /* block statt flex, sonst greift ::first-letter nicht */
        position: relative;
        width: 100%;
        padding: 16px 0;
        color: var(--menu-text);
        font-size: var(--fs-xl);
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    .nv-menu .header__submenu-link::after {
        display: inline-block !important;
        content: "\f078" !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        line-height: 1;
        transform-origin: 50% 50%;
        font-size: .45em;
        color: var(--menu-muted);
        position: absolute !important;
        left: auto !important;     /* main.css: left/bottom 0 der alten Unterstreichung */
        bottom: auto !important;
        right: 4px;
        top: 50%;
        transform: translateY(-50%) !important;
        transition: transform .3s var(--menu-ease) !important;
    }
    .nv-menu .header__submenu-link.active-menu-link::after { content: "\f077" !important; }
    /* Die Liste ist selbst das aufklappende Element (.expander-content): kein Innenabstand,
       sonst bleibt beim Zuklappen ein Rest stehen und springt am Ende weg. */
    .nv-menu .header__navbar-submenu {
        padding: 0;
        min-height: 0;
        overflow: hidden;
    }
    .nv-menu .header__navbar-submenu li { margin: 0; }
    .nv-menu .header__navbar-submenu li:last-child { padding-bottom: 14px; }
    .nv-menu .expander {
        transition: grid-template-rows .45s var(--ease);
    }
    .nv-menu .header__navbar-submenu a {
        display: block;
        padding: 9px 0;
        color: var(--menu-soft);
        font-size: var(--fs-md);
    }
    .nv-menu .nv-nav-cta {
        box-sizing: border-box;
        justify-content: center;
        width: 100%;
        padding: 15px 20px;
        font-size: var(--fs-md);
    }
}