/* Pro Tier — Header: Logo links, Navigation rechts (ECOTHERM)

   Topline   Nachtblau        Kontakt links, Service-Icons rechts
   Hauptband Corporate-Blau   Logo links, Navigation rechts, beide an der
                              Unterkante ausgerichtet

   ⚠ LOGO: braucht auf blauem Grund die HELLE/weisse Variante.
   ⚠ Aktivstrich in Weiss (6,38:1), Hover im Marken-Orange #FFA500
     (3,23:1). --color-brand-gold traegt auf dem Corporate-Blau nicht
     (1,73:1).
   ⚠ padding-block von #brand und #main-nav immer GEMEINSAM aendern, sonst
     verlieren Logo und Menuepunkte ihre gemeinsame Unterkante. */

:root {
  --header-bg:          var(--color-brand-blue);
  /* Schmale Infozeile oben im Nachtblau, das breite Brand/Nav-Band darunter
     im Corporate-Blau — der dunkle Ton rahmt, der helle traegt. */
  --header-topline-bg:  var(--color-night);
  --header-nav-bg:      var(--color-brand-blue);
  --header-on-bg:       hsl(0 0% 100%);
  /* ⚠ nicht unter 0.82: bei 0.75 fällt der Kontrast auf 4,31:1 (unter AA). */
  --header-on-bg-muted: hsl(0 0% 100% / 0.88);
  --header-rule:        hsl(0 0% 100% / 0.22);

  /* Hover-Akzent der Hauptnavigation (Unterkante, nicht die Schrift —
     die bleibt weiss).

     Derselbe Ton wie ueberall sonst auf der Seite: --color-complement.
     Auf dem Corporate-Blau #0061AA erreicht #FFA500 3,23:1 und erfuellt
     damit WCAG 1.4.11 (Non-Text, 3:1) fuer den Unterstrich.

     ⚠ Hier stand zeitweise ein eigener, aufgehellter Ton (#FFC14D) mit der
       Begruendung, das Marken-Orange sei auf Blau zu schwach. Diese Zahl war
       falsch — sie stammte aus dem vorherigen, dunkleren Orange (#F96B06,
       2,23:1). Das aktuelle #FFA500 traegt hier ohne Aufhellung. Wird die
       Basis je wieder abgedunkelt, ist der Wert erneut zu pruefen: unter
       3:1 braucht der Hover wieder einen eigenen, helleren Ton.

     ⚠ NICHT fuer Text auf Blau — dafuer waeren 4,5:1 noetig. Gilt nur,
       weil es ein Strich ist.

     Weiss bleibt mit 6,38:1 der staerkere Zustand — der aktive Punkt ist
     damit weiterhin dominanter als der gehoverte. */
  --header-accent:      var(--color-complement);   /* #FFA500 — 3,23:1 auf Blau */

  --header-shadow-height: 1.25rem;
  --header-shadow-color:  hsl(214 45% 8% / 0.28);
}

/* Auch auf Mobile/Tablet, deshalb ausserhalb der Desktop-Query. */
#site-header,
#site-header #topbar,
#site-header #brand {
  background: var(--header-bg);
  color: var(--header-on-bg);
}

/* Zwei IDs: Der Kernel setzt #contact-bar in 04-layout.css mit gleicher
   Gewichtung — sonst entschiede die Ladereihenfolge. */
#site-header #contact-bar,
#site-header #main-nav {
  background: var(--header-topline-bg);
  color: var(--header-on-bg);
}

#site-header #main-nav {
  background: var(--header-nav-bg);
}

/* ⚠ BURGER-MENUE: Schrift zurueck auf dunkel.
   Die Regel direkt darueber faerbt #main-nav global weiss — richtig, solange
   die Navigation im blauen Band steht. Im aufgeklappten Burger-Menue legt der
   Kernel aber ein HELLES Panel darueber:
     #main-nav.open > ul  ->  background: var(--glass-solid)  =  weiss, 95 %
   Die Menuepunkte standen damit weiss auf weiss (rund 1:1) und waren nur an
   ihren Trennlinien zu erahnen. Betrifft jede Breite unter 69rem, auf der der
   Kernel den Burger zeigt.
   Zwei IDs plus Klasse (2,1,0) schlagen die Kernel-Regel (1,1,0). */
#site-header #main-nav.open > ul,
#site-header #main-nav.open > ul a,
#site-header #main-nav.open > ul > li > a {
  color: var(--color-text);
}

/* Aktiver Punkt und Hover im Panel: Markenfarbe statt Weiss. */
#site-header #main-nav.open > ul a:hover,
#site-header #main-nav.open > ul a[aria-current="page"],
#site-header #main-nav.open > ul > li.active > a {
  color: var(--color-primary);
}

#site-header #contact-bar,
#site-header #contact-bar a,
#site-header > .service > a {
  color: var(--header-on-bg-muted);
}

#site-header #topbar a {
  color: var(--header-on-bg);
}

/* Burger: der Kernel zeichnet die drei Balken in #24292E — auf dem blauen
   Brand-Band praktisch unsichtbar. Es sind background-colors auf .status und
   deren Pseudo-Elementen, keine Border und kein Icon-Font. Gilt auch fuer
   den geoeffneten Zustand (X), der dieselben Flaechen dreht. */
#site-header #nav-toggle .status,
#site-header #nav-toggle .status::before,
#site-header #nav-toggle .status::after {
  background-color: var(--header-on-bg);
}

/* ─── Logo / Brand-Icon (Muster aus _vorlage) ─────────────────────────────
   Regel: die Wortmarke, Ausnahme: das kompakte Icon auf dem Smartphone —
   nie beides gleichzeitig. Der Kernel rendert #icon und #logo beide in
   #brand; ohne diese Zeile stehen sie auf dem Desktop nebeneinander.
   Die Groessen liegen als max-height am <img> (siehe Desktop-Block),
   weil #logo ein DIV um ein <picture> ist. */
#icon {
  display: none;
}

/* Service-Icons (Suche, Merkliste, Login) bekommen denselben Rand wie Logo
   und Navigation — sonst kleben sie am Viewport (Muster aus _vorlage).
   Ausserhalb der Media-Queries, damit es auf Tablet und Smartphone
   ebenso greift wie auf dem Desktop. */
#site-header > .service {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: var(--padding-page);
}

/* Schlagschatten, senkrecht nach unten.
   ⚠ Als ::after statt box-shadow: Der Kernel setzt #site-header{box-shadow}
   in 04-layout.css; ein Override liess sich live nicht durchsetzen — auch
   nicht mit hoeherer Spezifitaet oder !important. Das Pseudo-Element umgeht
   die Frage. #site-header ist sticky (= positionierter Kontext) mit
   overflow:visible; `position` hier NICHT setzen, das braeche das Sticky. */
#site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--header-shadow-height);
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--header-shadow-color),
    hsl(214 45% 8% / 0)
  );
}

/* ─── Hauptnavigation: Aussehen ab Tablet ────────────────────────────────
 Gilt fuer BEIDE Layouts — die eigene Zeile unter dem Logo (45-69rem) und
 die einzeilige Fassung daneben (ab 69rem). Vorher lagen diese Regeln nur
 im Desktop-Block; auf dem Tablet blieben die Menuepunkte deshalb in der
 dunklen Kernel-Farbe stehen.
 Der Einzug wandert vom Link auf den Container: der Kernel zieht Text
 zweimal ein (am <li> und am <a>), zusammen 32 px. Damit begann die
 Navigation weiter innen als das Logo. Beides auf 0, den Rand traegt
 #main-nav selbst — dann stehen Wortmarke und Menuepunkte buendig. */
@media (min-width: 79.5rem) {
  #site-header #main-nav > ul {
    gap: var(--space-4);
  }
  /* Klein, gesperrt, halbfett — Praesenz ueber das Gewicht statt ueber die
     Groesse. 600 statt 700: helle Schrift auf dunklem Grund wirkt durch
     Halation ohnehin fetter, echtes Bold laeuft bei gesperrten Versalien zu.
     ⚠ Trefferflaeche rund 38 px, unter der Empfehlung von 44 px. Hebel dafuer
     waere padding-block, nicht die Schriftgroesse. */
  #site-header #main-nav > ul > li > a {
    color: var(--header-on-bg);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    padding-block: var(--space-2);
    /* Ohne seitliches Padding endet der Aktivstrich am Wort statt 16 px
       daneben. Der Abstand zwischen den Punkten kommt vom gap der Liste. */
    padding-inline: 0;
    border-bottom: 0.125rem solid transparent;
    transition: border-color var(--transition), opacity var(--transition);
  }
  /* Nur der Strich wechselt die Farbe — die Schrift bleibt weiss.
     ⚠ Damit traegt der Hover die Zustandsinfo allein ueber die Farbe des
     Unterstrichs. Das ist vertretbar, weil der Strich im Ruhezustand gar
     nicht sichtbar ist: es kommt also eine Form hinzu, nicht nur ein
     Farbwechsel. */
  #site-header #main-nav > ul > li > a:hover,
  #site-header #main-nav > ul > li:hover > a {
    color: var(--header-on-bg);
    border-bottom-color: var(--header-accent);
  }
  /* Aktivstrich in Weiss, nicht in Gold: --color-brand-gold kommt auf dem
     Corporate-Blau auf 1,73:1 und waere als Markierung unsichtbar.
     Weiss steht bei 6,38:1 und damit ueber dem Hover-Orange (3,23:1) —
     der aktive Punkt bleibt so der staerkere der beiden Zustaende. */
  #site-header #main-nav > ul > li.active > a,
  #site-header #main-nav > ul > li > a[aria-current="page"] {
    color: var(--header-on-bg);
    border-bottom-color: var(--header-on-bg);
  }
}

/* ─── Menuetext buendig zum Logo (Burger-Overlay) ─────────────────────────
   Uebernommen aus _vorlage. Der Kernel ruckt im Burger-Modus DOPPELT ein
   (components/nav.css):
     #main-nav > ul > li     padding-inline-start: var(--space-4)
     #main-nav > ul > li > a padding-inline-start: var(--space-4)
   Der Kommentar an der zweiten Stelle haelt fest, der Wert sei auf das
   margin-inline-start des Logos abgestimmt — das Padding am <li> ist dabei
   uebersehen. In Summe steht der Menuetext eine Stufe zu weit rechts.

   Der Einzug am <li> entfaellt deshalb, der am <a> bleibt und entspricht
   exakt dem Logo-Abstand. Der Aufklapp-Pfeil sitzt am anderen Ende
   derselben Flex-Zeile und ist nicht betroffen.

   ⚠ Nur UNTERHALB des Desktop-Breakpoints. Darueber setzt der Kernel den
     Wert ohnehin auf 0 — dort stand die Regel bei uns bisher, also genau
     da, wo sie nichts tat, und fehlte da, wo sie gebraucht wurde. */
@media (max-width: 79.499rem) {
  #site-header #main-nav > ul > li {
    padding-inline-start: 0;
  }
}

/* Einzeiliges Layout (Logo links, Navigation rechts) — ab 79.5rem.

 Umschaltpunkt der gesamten Navigation: darueber horizontal, darunter
 Burger in JEDER Orientierung.

 ⚠ Bewusste Abweichung von Kernel und _vorlage. Beide geben die
   horizontale Nav schon ab 45rem QUER frei:
     @media (min-width: 79.5rem), (min-width: 45rem) and (orientation: landscape)
   Fuenf Menuepunkte brauchen einzeilig aber gemessene 1072 px (816 px Nav
   bei gap --space-4, Logo 160 px, 2 x 24 px Rand, 48 px Abstand) — im
   Tablet-Querformat bricht die Zeile um. Deshalb bleibt es dort beim
   Burger; wiederhergestellt wird er im Block am DATEIENDE.

 ⚠ Wer diese Bedingung anfasst, muss den Block am Dateiende mitziehen —
   sonst zeigt der Kernel den Burger, waehrend hier das Grid laeuft (leere
   Nav-Spalte, versetztes Overlay) oder umgekehrt.

 Naechster Hebel, falls die Zeile ab 79.5rem zu eng wird: letter-spacing
 der Menuepunkte von --tracking-wide (0.25em) auf --tracking (0.15em) —
 rund 83 px. Danach der gap.
 ⚠ Kommt ein Menuepunkt dazu, wird es hier zuerst eng. */
@media (min-width: 79.5rem) {
  /* Brand links, Navigation rechts in EINER Reihe (Muster aus _vorlage).
     Spalte 1 `auto` = so breit wie das Logo, Spalte 2 `1fr` = der Rest.
     Die frueheren vier gestapelten Zeilen kosteten ueber 230 px Hoehe, ohne
     dass der leere Raum neben dem zentrierten Logo etwas getragen haette. */
  #site-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topline topline"
      "topbar  topbar"
      "brand   nav";
  }

  /* Topline: Kontaktzeile + Service-Nav in EINER Reihe (Muster aus _vorlage).
     Beide liegen in DERSELBEN Flaeche und werden per justify-self
     auseinandergezogen — so bleiben die Breiten der Zeilen darunter
     unabhaengig.
     ⚠ Sie weichen einander nicht aus: werden die Inhalte deutlich laenger,
     ueberlappen sie statt umzubrechen.
     Die #topbar-Zeile bleibt, obwohl ungenutzt — leere Grid-Zeile = 0 hoch. */
  #site-header #contact-bar {
    grid-area: topline;

    /* Kernel setzt space-between → Icons landeten bei voller Breite unter
       der Service-Nav. flex-start haelt die Gruppe links zusammen. */
    justify-self: stretch;
    align-self: stretch;
    justify-content: flex-start;

    background: var(--header-topline-bg);
    color: var(--header-on-bg-muted);
    border-bottom: none;

    /* Service-Leiste, keine Botschaft. (Die Vorlage setzt hier `inherit` —
       das zoege die Zeile auf --text-base = 1.0625rem hoch.) */
    font-size: var(--text-xs);
    padding-block: var(--space-1);
    min-height: 0;
  }

  #site-header #contact-bar a {
    color: var(--header-on-bg-muted);
  }

  #site-header > .service {
    grid-area: topline;
    justify-self: end;
    align-self: center;
    background: transparent;
    color: var(--header-on-bg-muted);
    font-size: var(--text-xs);

    /* An den Seitenrand, spiegelbildlich zur Kontaktzeile.
       ⚠ NICHT --header-inset (wie in _vorlage): das richtet an der
       Content-Kante aus und schoebe die Leiste bei zentrierter Nav auf
       breiten Viewports bis zu 970 px nach innen. */
    padding-inline-end: var(--padding-page);
  }

  #topbar {
    grid-area: topbar;
  }

  /* max-width/margin-auto aus layout.css aufheben → Grid fuellen.
     Padding nur nach aussen: Brand am linken, Nav am rechten Seitenrand.
     Die Innenseiten bleiben frei, damit beide den Mittelraum nutzen. */
  #site-header #brand,
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
  }
  #site-header #brand    { padding-inline: var(--padding-page) 0; }
  #site-header #main-nav { padding-inline: 0 var(--padding-page); }

  /* Brand und Nav liegen in derselben Zeile und teilen sich das Nachtblau —
     zusammen ergeben die beiden Zellen ein durchgehendes Band.
     ⚠ Muss dunkel bleiben: der goldene Aktivstrich der Navigation kommt auf
     Nachtblau auf 3,98:1, auf dem Corporate-Blau nur auf 1,73:1. */
  #site-header #brand {
    grid-area: brand;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: var(--space-3);
    /* Oben 3rem, unten 1rem. Die Summe bleibt bei 4rem wie zuvor 2+2 — das
       Band behaelt seine Hoehe, der Inhalt rutscht um genau 1rem nach unten.
       Bei align-items: flex-end bestimmt allein das UNTERE Padding die
       Position; das obere haelt die Bandhoehe. */
    padding-block: var(--space-8) var(--space-4);
    background: var(--header-nav-bg);
  }

  /* ⚠ Der Kernel gibt #logo ein `flex: 1 1 0%` — dadurch zieht sich der
     Container ueber die ganze Zeile, das Bild klebt links und
     justify-content am #brand laeuft ins Leere. `0 1 auto` erlaubt
     Schrumpfen, aber kein Dehnen. */
  #site-header #brand #logo {
    flex: 0 1 auto;
    width: auto;
  }

  /* Feste `height` statt `max-height` — der Kernel gibt #logo eine eigene
     Hoehe, an der sich das <img> sonst nicht ausrichtet.
     ⚠ Das setzt voraus, dass logo.svg konkrete width/height-Attribute traegt
     (226x119). Mit `width="100%" height="100%"` hat die Datei kein
     Seitenverhaeltnis, `width: auto` findet keinen Wert und die Grafik
     liegt schmal in einer viel zu breiten Box. */
  #site-header #brand #logo {
    height: auto;
    overflow: visible;
  }
  #site-header #brand #logo img {
    height: 5.25rem;
    width: auto;
    max-height: none;
    max-width: 100%;
  }

  /* Kompakter Zustand beim Scrollen (Muster aus _vorlage).
     Der Header ist bereits sticky — der Kernel gibt #site-header
     position: sticky, top: 0, z-index: 1000, das gilt fuer die ganze Leiste.
     header.js setzt zusaetzlich .scrolled (ab 10 px) und .compact (ab 50 px);
     hier schrumpft damit nur das Band, damit die klebende Leiste weniger
     Bildflaeche kostet: 136 px → rund 104 px.
     ⚠ Im Test liess sich .compact durch programmatisches Scrollen nicht
     ausloesen. Bleibt die Klasse auch beim echten Scrollen aus, greift von
     diesem Block schlicht nichts — das Sticky-Verhalten haengt nicht daran. */
  #site-header #brand,
  #site-header #main-nav,
  #site-header #brand #logo img {
    transition: padding var(--transition), height var(--transition);
  }
  /* ⚠ Brand UND Nav muessen zusammen schrumpfen. Seit die Navigation
     dasselbe padding-block traegt wie das Logo (Unterkanten-Ausrichtung),
     bestimmt die groessere der beiden Zellen die Zeilenhoehe — bliebe die
     Nav bei --space-6, wuerde der Header beim Scrollen gar nicht flacher. */
  #site-header.compact #brand,
  #site-header.compact #main-nav {
    padding-block: var(--space-2);
  }
  #site-header.compact #brand #logo img {
    height: 3rem;
  }

  /* Gleiche Unterkante wie das Logo: beide Zellen richten ihren Inhalt
     unten aus und tragen dasselbe padding-block. Ohne das gleiche Padding
     saesse die Navigation 32 px tiefer als die Wortmarke. */
  #site-header #main-nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding-block: var(--space-8) var(--space-4);
    border-top: none;
  }

  /* Groesserer Abstand als in der Tablet-Zeile, aber mitwachsend statt fest:
     bei 1104 px (dem Breakpoint) sind es 22 px, ab 1600 px die vollen 32 px.
     Ein fester Wert von 32 px haette die Navigation am unteren Ende wieder
     umbrechen lassen — bei 1104 px bleiben so 56 px Luft zum Logo.
     Der Untergrenzwert 1rem entspricht dem gap aus dem gemeinsamen Block. */
  #site-header #main-nav > ul {
    justify-content: flex-end;
    gap: clamp(1rem, 2vw, 2rem);
  }

  /* Order-Variablen nicht nötig — Grid-Areas übernehmen */
  #contact-bar,
  #topbar,
  #site-header > .service,
  #site-header #brand,
  #site-header #main-nav {
    order: unset;
  }

  /* Zwei Kontexte, zwei Farben: Service-Nav in der Topline vs. im #topbar. */
  #site-header > .service > a {
    color: var(--header-on-bg-muted);
    transition: opacity var(--transition);
  }
  #site-header #topbar > .service > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #site-header #topbar > .service > a:hover,
  #site-header > .service > a:hover {
    opacity: 0.7;
  }


  #site-header #main-nav ul ul,
  #site-header #main-nav li.open > ul {
    background: var(--color-bg);
    border: 0.0625rem solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }

  #site-header #main-nav ul ul a:hover,
  #site-header #main-nav ul ul a[aria-current="page"] {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
}

/* Tablet laeuft ueber den Desktop-Block, nur flacher. Ohne
   orientation-Bedingung: im Hochformat war das Logo vorher ganz
   ausgeblendet, der Kopf blieb damit ohne Absender. */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  /* Eigene Zeile unter dem Logo. Der linke Einzug liegt NICHT hier, sondern
     am <a> der Menuepunkte (Kernel: padding-inline-start: var(--space-4)).
     Stand hier zusaetzlich --padding-page, addierten sich beide zu 40 px,
     waehrend das Logo bei 24 px stand — der Menuetext lief 16 px zu weit
     rechts. Links deshalb 0, rechts bleibt der Seitenrand fuer den
     Aufklapp-Pfeil. */
  #site-header #main-nav {
    padding-inline: 0 var(--padding-page);
  }

  /* ⚠ Immer BEIDE Zellen: seit Logo und Navigation an der Unterkante
     ausgerichtet sind, muss ihr padding-block uebereinstimmen. Stand die
     Nav hier noch auf --space-6, hing das Logo 24 px tiefer als die
     Menuepunkte. Gilt genauso fuer den .compact-Zustand. */
  #site-header #brand,
  #site-header #main-nav {
    padding-block: var(--space-2);
  }

  /* ⚠ Der Kernel gibt #logo eine FESTE Hoehe plus `overflow: hidden`:
       #logo                        { height: var(--header-height); overflow: hidden }
       @media (max-width: 79.499rem){ #logo { height: 2.5rem } }
     Ein hoeheres <img> wird darin unten abgeschnitten — nicht der Header ist
     zu niedrig, sondern der Logo-Container. `height: auto` laesst ihn dem
     Bild folgen, die Zeile waechst dann von selbst mit. */
  #site-header #brand #logo {
    height: auto;
    overflow: visible;
  }
  #site-header #brand #logo img {
    height: 3.25rem;
    width: auto;
    max-height: none;
  }
}

/* Tablet und kleiner Desktop: hier greift NICHT der Desktop-Block (der
   verlangt 69rem), sondern das Kernel-Layout mit Burger — und dort steht #brand ohne
   eigenes padding-inline. Den Einzug traegt stattdessen
   `#site-header #brand > :first-child { margin-inline-start: 1.1rem }`.
   ⚠ Erstes Kind ist #icon. Das ist zwar display:none, zaehlt fuer
   :first-child aber weiter — der Einzug landete also am unsichtbaren Icon
   und das Logo klebte am linken Viewport-Rand. */
@media (min-width: 45rem) and (max-width: 79.499rem) {
  /* ⚠ Der Wert MUSS die Marke OPTISCH auf die Kante der Menuepunkte setzen.
     Zwei Groessen spielen hinein:
       1. Der Menuetext sitzt bei var(--space-4) = 16 px — dem
          padding-inline-start, das der Kernel dem <a> gibt. Das am <li>
          nimmt die Vorlagen-Regel weiter oben heraus, und #main-nav traegt
          links kein Padding mehr.
       2. Die Grafik bringt eigenen Rand mit: In logo.svg (viewBox 226x119)
          beginnt die linke Saeule erst bei x = 24,5. Bei proportionaler
          Skalierung sind das 24,5/119 = 0,206 der Bildhoehe, hier also
          3,25rem x 0,206 = 10,7 px.
     Ohne Abzug stuende die Marke bei 16 + 10,7 = 26,7 px, also rund 11 px
     zu weit rechts. Der Container rueckt deshalb nach links, damit die
     sichtbare Kante bei 16 px landet.
     ⚠ Aendert sich die Bildhoehe unten, muss sie hier mit. */
  #site-header #brand > #logo {
    margin-inline-start: calc(var(--space-4) - 3.25rem * 0.206);
  }
}

/* Smartphone: Icon statt Wortmarke. Das gestapelte Lockup kostet hier zu
   viel Hoehe; unter 22rem war vorher gar keine Marke mehr zu sehen. */
@media (max-width: 44.999rem) {
  /* ⚠ Der Kernel macht #icon zu einem QUADRAT und laesst das Bild darin
     einpassen:
       #icon     { width: var(--header-height); height: var(--header-height) }
       #icon img { width: 100%; height: 100%; object-fit: contain }
       @media (max-width: 79.499rem) { #icon { width: 2.5rem; height: 2.5rem } }
     Ein querformatiges Icon schrumpft in dem 40er-Quadrat auf 40 x 21 px.
     Die Hoehe steuert deshalb der Container, die Breite folgt dem Bild. */
  /* Linke Saeule buendig zum Navigationstext.
     In der Grafik beginnt die linke Saeule bei x = 24,5 von 226
     viewBox-Einheiten. Bei 226:119 entspricht das 24,5/119 = 0,206 der
     Bildhoehe — der Faktor bleibt richtig, wenn die Hoehe sich aendert.
     ⚠ Hier stand `--space-4 * 2 = 32 px` mit der Begruendung, der Kernel
       ziehe den Nav-Text doppelt ein (am <li> UND am <a>). Das stimmte,
       gilt aber nicht mehr: Die Vorlagen-Regel weiter oben nimmt den Einzug
       am <li> heraus, der Text steht jetzt bei 16 px. Das Icon stand damit
       26,7 px zu weit rechts. */
  #site-header #brand > #icon {
    display: block;
    --brand-icon-height: 3.25rem;
    height: var(--brand-icon-height);
    width: auto;
    margin-inline-start: calc(
      var(--space-4) - var(--brand-icon-height) * 0.206
    );
  }
  #site-header #brand > #icon img,
  #site-header #brand > #icon svg {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
  }
  #site-header #brand > #logo {
    display: none;
  }
}

/* ═══ Burger auch im Tablet-QUERFORMAT ════════════════════════════════════
   Bewusste Abweichung von Kernel und _vorlage (Entscheidung 09.09.2026).

   Beide schalten die horizontale Nav schon ab 45rem quer frei:
     @media (min-width: 79.5rem), (min-width: 45rem) and (orientation: landscape)
   Bei fuenf Menuepunkten braucht die Zeile aber gemessene 1072 px — im
   Tablet-Querformat (720–1272 px) bricht sie um. Statt sie dort zu
   quetschen, bleibt es beim Burger.

   Unsere Regel ist damit einfacher als die des Kernels:
     ab 79.5rem   horizontale Nav
     darunter     Burger, in JEDER Orientierung

   Dieser Block nimmt genau die fuenf Deklarationsgruppen zurueck, die die
   Horizontal-Query des Kernels im Tablet-Querformat setzt. Die Werte sind
   1:1 aus dessen globalem Burger-Block uebernommen (ausgelesen aus dem
   Live-CSS am 09.09.2026), nicht nachgebaut — deshalb sieht das Menue hier
   genauso aus wie im Hochformat.

   ⚠ Wird der Desktop-Breakpoint je wieder auf die Kernel-Bedingung gezogen,
     muss dieser Block mit weg. Sonst stehen beide gegeneinander. */
@media (min-width: 45rem) and (max-width: 79.499rem) and (orientation: landscape) {

  /* 1 — Burger-Knopf zurueck (Kernel: display: none) */
  #site-header #nav-toggle { display: flex; }

  /* 2 — Aufklapp-Pfeil der Unterpunkte zurueck (Kernel: display: none) */
  #site-header #main-nav .sub-toggle { display: flex; }

  /* 3 — Liste eingeklappt, als Spalte; nur .open zeigt sie.
         ⚠ align-items MUSS mit zurueck. Die Horizontal-Query setzt `center`
           — auf einer Zeile ist das die vertikale Mitte, auf der Spalte hier
           aber die HORIZONTALE: die Menuepunkte standen zentriert, mit
           gestaffelten Unterstrichen. Der Kernel setzt in seinem Burger-Block
           gar kein align-items, `stretch` ist also der Ausgangswert. */
  #site-header #main-nav > ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
  }
  #site-header #main-nav.open > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  /* 4 — Zeilen mit Trennlinie statt nebeneinander.
         padding-inline-start bleibt bewusst 0 (Vorlagen-Regel weiter oben,
         damit Menuetext und Logo auf einer Kante stehen) — der Kernel haette
         hier im Burger-Block var(--space-4). */
  #site-header #main-nav > ul > li {
    position: static;
    flex-wrap: wrap;
    margin-inline: 0;
    border-bottom: 0.0625rem solid var(--color-border);
  }

  /* 4b — Einzug und Groesse der Menuepunkte.
          Die Horizontal-Query setzt `padding: var(--space-4) var(--space-3)`
          und ueberschreibt damit auch den LINKEN Einzug: 12 px statt 16 px.
          Das verschiebt die Kante gegen das Logo, das auf 16 px ausgerichtet
          ist. Zurueck auf die Burger-Werte des Kernels. */
  #site-header #main-nav > ul > li > a {
    padding-block: var(--space-3);
    padding-inline: var(--space-4) var(--space-2);
    font-size: var(--text-sm);
  }

  /* 5 — Untermenue faehrt per max-height auf, statt als Dropdown zu
         schweben. overflow:hidden traegt die Animation — deshalb KEIN
         display:none, sonst klappt nichts mehr auf. */
  #site-header #main-nav ul ul {
    display: block;
    position: static;
    width: 100%;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    gap: 0;
    padding: 0 0 0 var(--space-4);
    border-radius: 0;
    box-shadow: none;
    transition: max-height var(--transition-slow), padding var(--transition-slow);
  }
  #site-header #main-nav li.open > ul {
    max-height: 30rem;
    padding-block: var(--space-2);
  }

  /* Hover darf hier nicht aufklappen — das macht der Pfeil. */
  #site-header #main-nav > ul > li:hover > ul {
    max-height: 0;
    padding-block: 0;
  }
  #site-header #main-nav > ul > li.open:hover > ul {
    max-height: 30rem;
    padding-block: var(--space-2);
  }

  /* 6 — Unterpunkte: die Horizontal-Query gibt ihnen Dropdown-Optik
         (margin, Pillen-Padding, Radius, Hover-Einzug). Im Stapel gelten
         wieder die schlichten Burger-Werte. */
  #site-header #main-nav ul ul a {
    margin-inline: 0;
    padding: var(--space-2);
    border-radius: 0;
  }
  #site-header #main-nav ul ul a:hover {
    padding-inline-start: var(--space-2);
  }
}