/* ==========================================================================
   Neue reduzierte Top-Navigation (06.10.2026), gilt auf allen Seiten
   Vorbild: Redesign-Testballon (C:\Dev\redesign.park-klinik-birkenwerder.de), Menüpunkte unverändert.

   - Obere Kontaktleiste (Adresse, Telefon, E-Mail/Instagram/YouTube) entfällt (header.php).
   - Desktop (ab 992px): weiße, einzeilige Leiste: Logo links, Menü mittig, DE/EN + Termin-Button rechts.
   - Dropdown-Pfeile entfallen, stattdessen Unterstreichung bei Hover/Fokus/aktiv.
   - Termin-Button als Pille. Mobil (< 992px) bleibt das bisherige Menü.
   Markup: include/navi.php. Fira Sans ist nur in 300/400/500 eingebunden, daher kein Fettdruck 600.
   ========================================================================== */

@media (min-width: 992px) {
    nav.navbar.navbar-light.navbar-expand-lg {
        background: #fff;
        border-bottom: 1px solid #e2e0dc;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

    /* Eine Zeile: Logo links, Rest rechts. Kein Umbruch (sonst rutscht das Logo). */
    nav.navbar.navbar-light > .container,
    nav.navbar.navbar-light > .container.justify-content-end {
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between !important;
        gap: clamp(1rem, 3vw, 3rem);
    }

    nav.navbar.navbar-light > .container > a:first-child {
        flex: 0 0 auto;
    }

    nav.navbar.navbar-light .navi-logo-mobile {
        display: block;
        width: 200px;
        height: 49px;
        max-width: none;
        flex-shrink: 0;
    }

    nav.navbar.navbar-light #navbarAdvanced {
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
    }

    /* Menüpunkte mittig zwischen Logo und DE/EN (statt links am Logo zu kleben) */
    nav.navbar.navbar-light #navbarAdvanced > ul.navbar-nav.me-auto {
        margin: 0 auto !important;
    }

    nav.navbar.navbar-light .nav-item {
        margin-right: 0;
    }

    /* Menüpunkte: dunkle Schrift auf Weiß, Unterstreichung statt Pfeil */
    nav.navbar.navbar-light .navbar-nav .nav-link,
    nav.navbar.navbar-light .navbar-nav button.nav-link {
        padding: 0.5rem 0.5rem;
        font-size: 1rem;
        font-weight: 400;
        color: #22313a;
        text-decoration-line: underline;
        text-decoration-thickness: 2px;
        text-decoration-color: transparent; /* Platz ist da, kein Sprung beim Hover */
        text-underline-offset: 0.45em;
    }

    nav.navbar.navbar-light .navbar-nav .dropdown-toggle::after {
        display: none;
    }

    nav.navbar.navbar-light .navbar-nav .nav-link:hover,
    nav.navbar.navbar-light .navbar-nav .nav-link:focus,
    nav.navbar.navbar-light .navbar-nav .nav-link.show,
    nav.navbar.navbar-light .navbar-nav .show > .nav-link,
    nav.navbar.navbar-light .navbar-nav .nav-link.active,
    nav.navbar.navbar-light .navbar-nav .active > .nav-link {
        color: #035d8c;
        text-decoration-color: #0076b5;
    }

    nav.navbar.navbar-light .navbar-nav .nav-link:focus-visible {
        outline: 2px solid #e6007e;
        outline-offset: 3px;
    }

    /* Sprachumschalter: reiner Text, aktive Sprache dunkelblau, keine Unterstreichung */
    nav.navbar.navbar-light .nav-item--lang .nav-link {
        padding: 0.5rem 0.25rem;
        font-size: 0.875rem;
        text-decoration: none !important;
    }

    nav.navbar.navbar-light .nav-item--lang .selected {
        color: #035d8c !important;
        font-weight: 500 !important;
    }

    nav.navbar.navbar-light .nav-item--lang .deselected,
    nav.navbar.navbar-light .nav-item--lang .lang-sep {
        color: #66757e !important;
        font-weight: 400;
    }

    /* Termin-Button als Pille; unter 1400px nur "Termin" (Platz), siehe navi.php */
    nav.navbar.navbar-light #navbarAdvanced .btn-primary {
        padding: 0.55rem 1.25rem;
        border-radius: 999px;
        font-size: 1rem;
        font-weight: 500;
        white-space: nowrap;
    }

    nav.navbar.navbar-light #navbarAdvanced li.nav-item.ms-3 {
        flex-shrink: 0;
    }
}

@media (min-width: 1400px) {
    nav.navbar.navbar-light .navbar-nav .nav-link,
    nav.navbar.navbar-light .navbar-nav button.nav-link {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        font-size: 1.125rem;
    }

    nav.navbar.navbar-light .nav-item--lang .nav-link {
        font-size: 0.9375rem;
    }
}

/* ==========================================================================
   Mobil (< 992px): Logo links, Hamburger rechts; beim Öffnen wird er zum Kreuz.
   Der Wrapper liegt im Fluss (statt absolut links), die Zeile bleibt per
   space-between "Logo | Hamburger", das aufgeklappte Menü umbricht darunter.
   Das Kreuz entsteht rein per CSS aus aria-expanded (setzt Bootstraps Collapse).
   ========================================================================== */

@media (max-width: 991.98px) {
    nav.navbar.navbar-light > .container,
    nav.navbar.navbar-light > .container.justify-content-end {
        justify-content: space-between !important;
        align-items: center;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        /* Logo und Hamburger 10px weiter vom Rand: Bootstrap-Gutter (Standard 12px) + 10px */
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 10px);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5 + 10px);
    }

    nav.navbar.navbar-light .navi-logo-mobile {
        width: 220px;
        max-width: calc(100vw - 6rem); /* lässt dem Hamburger auf sehr schmalen Geräten Platz */
        height: auto;
    }

    nav.navbar.navbar-light .navi-toggler-wrapper {
        position: static;
        flex: 0 0 auto;
        width: auto;
    }

    nav.navbar.navbar-light button.navbar-toggler {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid #e2e0dc;
        border-radius: 10px;
    }

    nav.navbar.navbar-light button.navbar-toggler:focus-visible {
        outline: 2px solid #e6007e;
        outline-offset: 3px;
    }

    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon {
        position: relative;
        display: block;
        width: 22px;
        height: 2px;
        background-image: none;
        background-color: #22313a;
        transition: background-color 0.15s ease;
    }

    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::before,
    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 22px;
        height: 2px;
        background-color: #22313a;
        transition:
            transform 0.2s ease,
            top 0.2s ease;
    }

    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::before {
        top: -7px;
    }

    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::after {
        top: 7px;
    }

    /* Aufgeklapptes Menü als Fläche ÜBER dem Inhalt (verdrängt ihn nicht): absolut unter der Leiste,
       volle Breite. .navbar hat position: relative (Bootstrap). Gilt auch während der Animation
       (.collapsing), damit nichts springt. Zu lange Menüs scrollen in sich. */
    nav.navbar.navbar-light #navbarAdvanced.collapse.show,
    nav.navbar.navbar-light #navbarAdvanced.collapsing {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050; /* über der Sprungnavi-Chipleiste (z-index 10) und Seiteninhalt */
        margin-top: 0;
        padding: 0.5rem 1rem 1rem;
        background: #fff;
        border-top: 1px solid #e2e0dc;
        border-bottom: 1px solid #e2e0dc;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    nav.navbar.navbar-light #navbarAdvanced.collapse.show {
        max-height: calc(100vh - 4.5rem); /* Leiste ca. 4,5rem hoch */
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* geöffnet: mittlere Linie weg, die beiden anderen kreuzen sich */
    nav.navbar.navbar-light button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-color: transparent;
    }

    nav.navbar.navbar-light button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
        top: 0;
        transform: rotate(45deg);
    }

    nav.navbar.navbar-light button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
        top: 0;
        transform: rotate(-45deg);
    }
}

/* ==========================================================================
   Mobiles Menü (< 992px): Untermenüs ohne Kästchen, aktiver Punkt grau statt unterstrichen
   - Untermenü-Punkte nur durch eine feine Linie getrennt (kein Rahmen um das Dropdown, keine
     Einzelrahmen). Die Trennlinie vor "Alle … behandlungen" entfällt (nav-divider-item), damit dort
     nicht zwei Linien übereinanderliegen.
   - Keine Unterstreichung bei aktiv und Hover, der aktive Punkt ist immer leicht grau hinterlegt.
   ========================================================================== */

@media (max-width: 991.98px) {
    nav.navbar.navbar-light #navbarAdvanced .dropdown-menu {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    nav.navbar.navbar-light #navbarAdvanced .dropdown-menu > li,
    nav.navbar.navbar-light #navbarAdvanced ul.dropdown-menu.show li {
        border-bottom: 1px solid #e2e0dc;
    }

    nav.navbar.navbar-light #navbarAdvanced .dropdown-menu > li:last-child,
    nav.navbar.navbar-light #navbarAdvanced ul.dropdown-menu.show li:last-child {
        border-bottom: 0;
    }

    nav.navbar.navbar-light #navbarAdvanced .dropdown-menu > li.nav-divider-item {
        display: none;
    }

    nav.navbar.navbar-light #navbarAdvanced a.dropdown-item {
        padding: 0.65rem 1rem;
    }

    /* keine Unterstreichung (aktiv, Hover, Fokus) */
    nav.navbar.navbar-light #navbarAdvanced .nav-link,
    nav.navbar.navbar-light #navbarAdvanced button.nav-link,
    nav.navbar.navbar-light #navbarAdvanced a.dropdown-item {
        text-decoration: none !important;
    }

    /* aktiver Punkt immer leicht grau hinterlegt (auch zwischen 768 und 991px) */
    nav.navbar.navbar-light #navbarAdvanced .nav-link.active,
    nav.navbar.navbar-light #navbarAdvanced button.nav-link.active,
    nav.navbar.navbar-light #navbarAdvanced a.dropdown-item.active {
        background-color: #efefef !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon,
    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::before,
    nav.navbar.navbar-light button.navbar-toggler .navbar-toggler-icon::after {
        transition: none;
    }
}