/* Weser Theme – Site Header & Navigation (Redesign: durchgehend weißer Header) */
/* sticky statt fixed: Der Header nimmt Platz im Fluss ein, das erste Element der
   Seite beginnt also DARUNTER statt dahinter. Im Figma fängt das Hero-Bild exakt
   bei 112px (Desktop) bzw. 72px (Tablet/Mobil) an – genau die Header-Höhen.
   Mit `fixed` lag der Header davor und hat vom Hero oben 112px verdeckt.
   Beim Scrollen bleibt er trotzdem oben stehen (dafür schaltet header.js den
   kräftigeren Schatten über .is-scrolled). */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--color-white);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}

/* Header bleibt beim Scrollen weiß, nur etwas kräftigerer Schatten */
.site-header.is-scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Figma: Header 112px hoch auf Desktop, 72px auf Tablet/Mobil */
.site-header .navbar {
    padding: 0;
    min-height: 112px;
}

.site-header .navbar-brand {
    padding: 12px 0;
}

.site-header .site-logo {
    height: 35px;
    width: auto;
    display: block;
}

/* ── Desktop-Nav: dunkelblaue Links auf Weiß, Poppins 16px ──
   Aufbau je Menüpunkt (WP_Bootstrap5_Nav_Walker in functions.php):

     <a class="nav-link">
       <span class="nav-marker">        grünes Quadrat, nur Deckkraft schaltet
       <span class="nav-label">          Beschriftung …
         <span class="nav-label-ghost">  … mit unsichtbarer fetter Breitenreserve
       <svg class="nav-chevron">         nur bei Untermenü, dreht sich beim Öffnen

   Das Quadrat war früher ein ::before am aktiven Punkt. Seit es auch beim
   Hovern erscheint, MUSS es dauerhaft Platz belegen – sonst würde die Leiste
   unter der Maus zucken. Dasselbe gilt für den Wechsel auf fett, den die
   Geisterkopie abfängt. */
.site-header .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-dark) !important;
    font-family: var(--font-body);
    font-weight: var(--fw-normal);
    font-size: var(--fs-copy-s);
    padding: 8px 16px !important;
    white-space: nowrap; /* verhindert unschöne Umbrüche wie „Inspirationen / für draußen" */
    transition: color var(--transition);
}

/* Bootstraps eigenes CSS-Dreieck – wir zeichnen den Chevron selbst. */
.site-header .dropdown-toggle::after {
    display: none;
}

/* Bootstrap legt auf .nav-link:focus einen 4px starken Schein in seinem
   Standardblau (#0d6efd). Der hat mit der Marke nichts zu tun und fiel erst
   auf, seit das Hover-Skript das Untermenü öffnet. Stattdessen der Umriss,
   den das Theme überall sonst benutzt – vgl. .dl-group-toggle in
   blocks/download-center.css. */
.site-header .nav-link:focus {
    box-shadow: none;
}

.site-header .nav-link:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: -2px;
}

.site-header .nav-marker {
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    background-color: var(--color-accent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.site-header .nav-label {
    position: relative;
    font-weight: var(--fw-medium);
}

/* Hält die Breite des fetten Zustands frei, ohne sichtbar zu sein oder eine
   Zeile zu belegen. `visibility` statt `display:none`, weil ein ausgeblendetes
   Element keine Breite meldet – genau die brauchen wir hier aber. */
.site-header .nav-label-ghost {
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    font-weight: var(--fw-bold);
}

.site-header .nav-chevron {
    flex-shrink: 0;
    transition: transform var(--transition);
}

/* Offenes Untermenü: Bootstrap setzt .show auf den Umschalter. */
.site-header .nav-link.show .nav-chevron {
    transform: rotate(180deg);
}

/* Aktiv, Hover und Tastaturfokus sehen gleich aus: fett + grünes Quadrat.
   :focus-within greift auch, solange der Fokus IM Flyout steht – der
   Elternpunkt bleibt dann markiert. */
.site-header .navbar-nav > .nav-item.active > .nav-link .nav-marker,
.site-header .navbar-nav > .nav-item:hover > .nav-link .nav-marker,
.site-header .navbar-nav > .nav-item:focus-within > .nav-link .nav-marker {
    opacity: 1;
}

.site-header .navbar-nav > .nav-item.active > .nav-link .nav-label,
.site-header .navbar-nav > .nav-item:hover > .nav-link .nav-label,
.site-header .navbar-nav > .nav-item:focus-within > .nav-link .nav-label {
    font-weight: var(--fw-bold);
}

/* ── Flyout-Panel ────────────────────────────────────────────
   Sollwerte am Entwurfs-Screenshot abgenommen: weißes Panel, weicher Schatten,
   kein Rahmen, Einträge 16px Poppins in Weserwaben-Blau, Hover auf grauem
   Grund. */
.site-header .nav-flyout {
    margin-top: 0;
    padding: 8px 0;
    min-width: 240px;
    border: 0;
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    box-shadow: var(--shadow-card);
}

/* Unsichtbare Brücke über die Lücke zwischen Menüpunkt und Panel. Ohne sie
   verlässt die Maus auf dem Weg nach unten kurz beides und der Flyout klappt
   zu. Das Skript wartet zwar zusätzlich kurz ab, aber die Brücke ist die
   Lösung, die auch bei stockender Mausbewegung trägt. */
.site-header .nav-flyout::before {
    content: '';
    position: absolute;
    inset: -20px 0 100%;
}

.site-header .nav-flyout .dropdown-item {
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    font-weight: var(--fw-normal);
    line-height: 1.4;
    color: var(--color-dark);
    /* Bootstrap setzt nowrap – „Mauer- und Pfeilerabdeckungen" muss umbrechen
       dürfen, sonst wird das Panel unangenehm breit. */
    white-space: normal;
}

.site-header .nav-flyout .dropdown-item:hover,
.site-header .nav-flyout .dropdown-item:focus,
.site-header .nav-flyout .dropdown-item:active {
    background-color: var(--color-surface);
    color: var(--color-dark);
}

.site-header .nav-flyout .current-menu-item > .dropdown-item {
    font-weight: var(--fw-semibold);
}

/* ── CTA „Händlersuche": blauer Button, grüner Text, Radius 8px ── */
/* Schriftschnitt Bold – Kundenfeedback 01 vom 2026-09-09: „Händlersuche
   Button Schrift ist im Design Bold". Stand vorher auf --fw-normal. */
.btn-nav-cta,
.btn-nav-cta.btn-primary {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-copy-s);
    padding: 8px 16px;
    border-radius: var(--radius-md); /* 8px */
    white-space: nowrap;
}

/* Hover: Flaeche und Schrift TAUSCHEN statt nur abdunkeln.
   Kundenfeedback 01: „Aktuell werden die Buttons nur geringfuegig
   abgedunkelt, dadurch leidet die Lesbarkeit." Vom User am 2026-09-09
   entschieden: invertieren (nicht: fetterer Schnitt). */
.btn-nav-cta:hover,
.btn-nav-cta:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
}

/* ── Burger (Tablet/Mobile): blaue, abgerundete Linien, ohne Rahmen ── */
.site-header .navbar-toggler {
    border: none;
    padding: 4px 6px;
}

.site-header .navbar-toggler:focus {
    box-shadow: none;
}

.site-header .navbar-toggler-icon {
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23263864' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
}

/* ── Logo-Größe Tablet/Mobile (Figma: ~25px hoch) ── */
@media (max-width: 991.98px) {
    .site-header .site-logo {
        height: 25px;
    }
    .site-header .navbar {
        min-height: 72px;
    }
}

/* ── Offcanvas Mobile-Menü (dunkelblau) ── */
.site-offcanvas {
    background-color: var(--color-dark);
    color: var(--color-white);
    /* Kundenfeedback 01 vom 2026-09-09: „Wenn man nach ganz unten scrollt ist
       das Menue abgeschnitten."

       ⚠️ Im Headless-Browser NICHT nachstellbar: Dort scrollt der Kasten
       sauber bis zum Haendlersuche-Knopf durch (gemessen bei 844, 640 und
       500px Hoehe, `.offcanvas-body` hat overflow-y: auto). Der Fehler
       gehoert deshalb zur dynamischen Browserleiste auf echten Mobilgeraeten:
       Bootstrap deckelt den Kasten auf `100%` der ICB-Hoehe, und die
       entspricht auf iOS/Android der GROSSEN Ansicht – der untere Rand liegt
       dann unter der eingeblendeten Leiste.

       `dvh` misst die jeweils sichtbare Hoehe. Wo der Browser es nicht kennt,
       faellt die Zeile weg und Bootstraps Wert bleibt stehen.

       `overscroll-behavior: contain` dazu: Ohne das schiebt eine Wischgeste
       am Listenende die Seite DAHINTER weiter, was sich wie ein klemmendes
       Menue anfuehlt. */
    max-height: 100dvh;
    overscroll-behavior: contain;
}

.offcanvas-brand img.site-logo {
    height: 28px;
    width: auto;
}

/* Logo im dunklen Offcanvas weiß einfärben */
.site-logo--light {
    filter: brightness(0) invert(1);
}

.site-offcanvas .offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-offcanvas .offcanvas-nav li a {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: var(--fw-medium);
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: color var(--transition);
}

.site-offcanvas .offcanvas-nav li a:hover {
    color: var(--color-white);
}

.site-offcanvas .offcanvas-nav li.current-menu-item > a::before,
.site-offcanvas .offcanvas-nav li.current-menu-parent > a::before,
.site-offcanvas .offcanvas-nav li.current-menu-ancestor > a::before,
.site-offcanvas .offcanvas-nav li.current-page-ancestor > a::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin-right: 10px;
    background-color: var(--color-primary);
    border-radius: 2px;
}

.site-offcanvas .offcanvas-nav li.current-menu-item > a,
.site-offcanvas .offcanvas-nav li.current-menu-parent > a,
.site-offcanvas .offcanvas-nav li.current-menu-ancestor > a,
.site-offcanvas .offcanvas-nav li.current-page-ancestor > a {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    font-weight: var(--fw-semibold);
}

/* ── Untermenüs im Offcanvas (Akkordeon) ─────────────────────
   Der Aufklapp-Knopf wird von header.js erzeugt und sitzt NEBEN dem
   Elternlink: Der Link führt weiterhin auf seine Seite, der Knopf klappt die
   Unterpunkte auf. Ohne JavaScript gibt es keinen Knopf – dann stehen die
   Unterpunkte offen da und das Menü bleibt vollständig benutzbar. */
.site-offcanvas .offcanvas-nav .has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.site-offcanvas .offcanvas-nav .has-sub > a {
    flex: 1 1 auto;
}

.site-offcanvas .offcanvas-sub-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; /* Mindestgröße für Finger, ohne den Link zu verkürzen */
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.85);
}

.site-offcanvas .offcanvas-sub-toggle svg {
    transition: transform var(--transition);
}

.site-offcanvas .offcanvas-nav .has-sub.is-open .offcanvas-sub-toggle svg {
    transform: rotate(180deg);
}

.site-offcanvas .offcanvas-nav .sub-menu {
    flex: 0 0 100%;
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}

/* Ohne diese Zeile bliebe die Liste sichtbar: Die Regeln oben setzen ein
   eigenes `display`, das die Vorgabe des Browsers für [hidden] schlägt. */
.site-offcanvas .offcanvas-nav .sub-menu[hidden] {
    display: none;
}

.site-offcanvas .offcanvas-nav .sub-menu li a {
    font-size: 1rem;
    font-weight: var(--fw-normal);
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 0;
}