/* Basic Tier — Header Layout + Immersive Mode.
   Grid layout (Brand+Nav nebeneinander) gilt auf ALLEN Seiten.
   Immersive-Modus (transparent, glass) nur mit Teaser. */

/* Brand-Mark (#icon) global aus — der Wortmark (#logo) trägt allein; nur im
   schmalen Landscape-Swap unten wird #icon eingeblendet.
   (Logo/Icon-Schaltung übernommen aus docs/header_template.css.) */
#icon {
  display: none;
}

@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {

  /* ============================================================
     LAYOUT — alle Seiten (mit und ohne Teaser)
     ============================================================ */

  #site-header {
    --header-row1: 3.5rem;
    --header-total: 7rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "lang    contact  contact"
      "service service  service"
      "brand   nav      nav";
    background: var(--glass-medium);
    backdrop-filter: blur(1rem) saturate(180%);
    border-bottom: 0.0625rem solid hsl(0 0% 100% / 0.3);
    box-shadow: var(--shadow), inset 0 0.0625rem 0 hsl(0 0% 100% / 0.2);
  }

  /* Topbar wrapper auflösen → Kinder werden Grid-Items */
  #topbar {
    display: contents;
  }

  /* Schriftgrößen für alle Header-Module — Service auf Nav-Größe (text-xs)
     statt text-2xs, damit die Topbar-Links nicht winziger als die Hauptnav
     wirken. */
  #contact-bar,
  #contact-bar a    { font-size: var(--text-xs); }
  #site-header #topbar .service a,
  #site-header > .service a { font-size: var(--text-xs); }
  #site-header #main-nav > ul > li > a { font-size: var(--text-xs); }

  /* Lang-Switch: einfache Inline-Links, links oben.
     Layout (display/align/gap/font-size) kommt vom Kernel-Default. */
  #lang-switch {
    grid-area: lang;
    padding-inline: var(--padding-page);
  }

  #lang-switch a {
    color: var(--color-primary);
    border-bottom: 0.0625rem solid transparent;
    transition: border-color var(--transition);
  }
  #lang-switch a:hover {
    border-bottom-color: var(--color-primary);
  }
  #lang-switch span[aria-current] {
    color: var(--color-primary);
    opacity: 0.6;
  }

  /* Main-Nav Farben + Hover/Active (Underline) */
  #site-header #main-nav > ul > li > a {
    color: var(--color-text);
    border-bottom: 0.125rem solid transparent;
    transition: color var(--transition), border-color var(--transition);
  }
  #site-header #main-nav > ul > li > a:hover,
  #site-header #main-nav > ul > li:hover > a,
  #site-header #main-nav > ul > li.active > a,
  #site-header #main-nav > ul > li > a[aria-current="page"] {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  /* Dropdown-Menü: Glass-Look passend zum Header */
  #site-header #main-nav ul ul,
  #site-header #main-nav li.open > ul {
    backdrop-filter: blur(1rem) saturate(180%);
    border: 0.0625rem solid hsl(0 0% 100% / 0.3);
    box-shadow: var(--shadow-lg), inset 0 0.0625rem 0 hsl(0 0% 100% / 0.2);
  }

  /* Dropdown-Item Hover/Active: opaker Glass-Tint + Underline-Akzent */
  #site-header #main-nav ul ul a {
    border-inline-start: 0.125rem solid transparent;
    border-radius: 0;   /* Subnav: scharfe Kanten (kein Kernel-Radius) */
    transition: background var(--transition), border-color var(--transition), color var(--transition);
  }
  #site-header #main-nav ul ul a:hover,
  #site-header #main-nav ul ul a[aria-current="page"] {
    background: hsl(0 0% 100% / 0.4);
    border-inline-start-color: var(--color-primary);
    color: var(--color-primary);
  }

  /* ContactBar: rechts oben, dark bg with diagonal clip */
  #contact-bar {
    grid-area: contact;
    height: auto;
    padding-block: var(--space-1);
    border-bottom: none;
    background: var(--color-topbar);
    color: var(--color-topbar-text);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 3rem 100%);
    padding-inline-end: var(--gap-block);
    justify-content: flex-end;
  }

  #contact-bar a {
    color: var(--color-topbar-text);
  }

  /* Service-Icons: eigene Zeile — Spezifität muss #topbar .service überschreiben */
  #site-header #topbar .service,
  #site-header > .service {
    grid-area: service;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-4);
    background: transparent;
    color: var(--color-text);
    height: auto;
    padding-block: var(--space-1);
    padding-inline-end: var(--padding-page);
  }

  /* Service-Hover — Icons: Color-Wechsel, Text: Color + Underline */
  #site-header #topbar .service a,
  #site-header > .service a {
    color: var(--color-text);
    transition: color var(--transition), border-color var(--transition);
  }
  #site-header #topbar .service a:has(svg):hover,
  #site-header > .service a:has(svg):hover {
    color: var(--color-primary);
  }
  #site-header #topbar .service a:not(:has(svg)),
  #site-header > .service a:not(:has(svg)) {
    border-bottom: 0.0625rem solid transparent;
  }
  #site-header #topbar .service a:not(:has(svg)):hover,
  #site-header > .service a:not(:has(svg)):hover {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }

  /* Brand + Nav: Grid füllen (layout.css max-width aufheben). header-inset
     einseitig (brand → links, nav → rechts), sonst gequetscht auf breiten
     Viewports. Innere Seiten frei für Logo + Nav-Inhalt. */
  #site-header #brand,
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
  }
  /* Brand am linken Site-Rand (padding-page), nicht am Content-Inset.
     Nav rechts bündig zum Content via --header-inset. */
  #site-header #brand    { padding-inline-start: var(--padding-page); padding-inline-end: 0; }
  #site-header #main-nav { padding-inline-start: 0; padding-inline-end: var(--header-inset); }

  #site-header #brand {
    grid-area: brand;
    padding-block: var(--space-2);
  }

  #site-header #main-nav {
    grid-area: nav;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: none;
    background: transparent;
  }

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

  /* ============================================================
     COMPACT MODE — beim Scrollen erste Zeile (lang + contact) ausblenden
     ============================================================ */

  /* ============================================================
     STICKY MIT SCROLL-OUT — erste Zeile scrollt natürlich raus,
     Service + Brand/Nav kleben am oberen Rand.
     Negativer top-Wert = Höhe der ersten Zeile (lang + contact).
     ============================================================ */

  /* Immer sticky — erste Zeile scrollt via negativem top raus */
  #site-header {
    position: sticky;
    top: calc(-1 * var(--header-row1, 1.85rem));
    z-index: 1000;
  }

  /* Teaser: negativer Margin → rutscht hinter den Header (Immersive) */
  #teaser-slider {
    margin-block-start: calc(-1 * var(--header-total, 7rem));
    padding-block-start: var(--header-total, 7rem);
  }


}

/* ============================================================
   Logo / Icon — Schaltung übernommen aus docs/header_template.css.
   Logo bleibt auf Tablet sichtbar (vorher ausgeblendet); auf schmalen
   Landscape-Breiten Swap auf das kompakte #icon; sehr schmal Logo ganz aus.
   #site-header-Spezifizität, damit der Kernel-Cascade nicht reinfunkt.
   ============================================================ */

/* Mobile + Tablet (< 79.5rem): Brand volle Breite, Logo links, Burger rechts,
   Nav volle Breite. */
@media (max-width: 79.499rem) {
  #site-header #brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }
  #site-header #brand > #logo {
    display: block;
    flex: 1;          /* = 1 1 0% → wächst, schrumpft, basis 0 (statt auto) */
    min-width: 0;
    height: 4rem;
    margin-inline-start: var(--space-4);
  }
  #site-header #brand > #logo > a {
    display: block;
    text-align: start;
  }
  #site-header #brand > #nav-toggle {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }
}

/* Desktop (≥ 79.5rem) + Tablet-Landscape (≥ 45rem landscape): Logo-Höhe +
   linksbündig (überschreibt evtl. zentrierende Kernel-Regeln am #logo). */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #site-header #brand > #logo {
    height: 4rem;
    margin-inline-start: 0;
    margin-inline-end: auto;
    text-align: start;
  }
  #site-header #brand > #logo > a {
    justify-content: flex-start;
  }
  #site-header #brand > #logo img {
    margin-inline: 0;
  }
}

/* Desktop (≥ 79.5rem): Logo prominenter als auf Tablet-Landscape.
   Greift nur ab Desktop, damit der Tablet-Landscape-Header (3rem) kompakt bleibt.
   Höhe hier justieren, falls noch größer/kleiner gewünscht. */
@media (min-width: 79.5rem) {
  #site-header #brand > #logo {
    height: 7rem;
  }
}

/* Logo→Icon-Swap: schmale Landscape-Breiten (45–66.999rem) — der breite
   Wortmark ist neben der Nav zu groß → kompaktes #icon einblenden, Logo aus.
   Nur landscape, damit der Mobile-Portrait-View unberührt bleibt.
   Schwelle 67rem; hier anpassen falls der Swap früher/später greifen soll. */
@media (min-width: 45rem) and (max-width: 66.999rem) and (orientation: landscape) {
  #site-header #brand > #logo {
    display: none;
  }
  /* #icon ist global ausgeblendet — hier gezielt wieder einblenden
     (höhere Spezifizität überschreibt die globale Regel oben). */
  #site-header #icon {
    display: block;
    height: 3rem;            /* gleiche optische Höhe wie das Logo */
    width: auto;
    margin-inline: 0 auto;   /* linksbündig wie das Logo */
  }
  #site-header #icon img,
  #site-header #icon svg {
    height: 100%;
    width: auto;
  }
}

/* Mobile (< 45rem): nur das kompakte #icon zeigen, Wortmark-Logo aus.
   Icon links, Burger bleibt rechts (margin-auto am #nav-toggle aus dem Block oben). */
@media (max-width: 44.999rem) {
  #site-header #brand > #logo {
    display: none;
  }
  #site-header #icon {
    display: block;
    height: 3rem;
    width: auto;
    margin-inline-start: var(--space-4);
  }
  #site-header #icon img,
  #site-header #icon svg {
    height: 100%;
    width: auto;
  }
}

/* ============================================================
   Lang-Switch — Farbschema (selbsttragend, überschreibt die Gold-Regeln
   aus dem Layout-Block oben via #site-header-Spezifität).

   Basisfarbe je Breakpoint:
     • Desktop (≥79.5rem):        Schwarz (--color-text) — heller Glass-Header
     • Tablet + Mobile (<79.5rem): Weiß — Header über dunklem Teaser / dunkles Menü
   Zustände (breakpoint-übergreifend, nur die Basisfarbe wechselt):
     • aktiv (aktuelle Sprache):     Basisfarbe, voll + fett, ohne Unterstrich
     • nicht aktiv (andere Sprachen): Basisfarbe, gedimmt (0.6)
     • Hover:                        Gold (--color-primary) + Gold-Unterstrich, voll
   ============================================================ */

/* Zustände — aktuelle Sprache voll + fett (Blickfang), klickbare Sprachen
   zurückgenommen, Hover hebt in Gold ab und nimmt das Dimmen zurück. */
#site-header #lang-switch a {
  opacity: 0.6;
}
#site-header #lang-switch a:hover,
#site-header #lang-switch a:focus-visible {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  opacity: 1;
}
/* Aktive Sprache: volle Deckkraft + fett. opacity:1 überschreibt gezielt die
   0.6-Regel aus dem Layout-Block (die sonst auf Desktop noch dimmt). */
#site-header #lang-switch span[aria-current] {
  opacity: 1;
  font-weight: 700;
}

/* Basisfarbe — an das GRID-LAYOUT gekoppelt, nicht rein an 79.5rem.
   Das Grid (heller Glass-Header) greift bei ≥79.5rem ODER ≥45rem Landscape.
   Dort → dunkler Text (--color-text). Nur in den Nicht-Grid-Fällen (Portrait
   <79.5rem, Landscape <45rem) liegt der Header über dunklem Teaser/Menü → weiß.
   Sonst entsteht im Landscape-Band 45–79.5rem weiß-auf-hellem-Glas (unsichtbar). */
@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #site-header #lang-switch a,
  #site-header #lang-switch span[aria-current] {
    color: var(--color-text);
  }
}
@media (max-width: 79.499rem) and (orientation: portrait),
       (max-width: 44.999rem) {
  #site-header #lang-switch a,
  #site-header #lang-switch span[aria-current] {
    color: #fff;
  }
}

/* Mobile + Tablet (kein Grid-Layout): Lang-Switch nach links.
   Kernel-04-layout.css setzt #topbar auf `justify-content: flex-end`, wodurch
   Lang-Switch + Service ans rechte Ende rutschen. Als erstes Flex-Kind zieht
   `margin-inline-end: auto` den Lang-Switch ganz nach links; Service bleibt
   rechts. Der Rand-Abstand kommt aus der bestehenden #topbar-`padding-page`.
   Nur die Nicht-Grid-Fälle: Portrait <79.5rem sowie Landscape <45rem
   (ab 45rem Landscape greift unser Grid, dort ist Lang schon oben links). */
@media (max-width: 79.499rem) and (orientation: portrait),
       (max-width: 44.999rem) {
  #site-header #lang-switch {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
  /* Rand-Abstand links verringern — nur die linke Gutter (dort steht allein der
     Lang-Switch); rechts bleibt padding-page für den Service-Abstand. */
  #site-header #topbar {
    padding-inline-start: var(--space-3);
  }
}