/* Pro Tier — Header: Brand + Nav in einer Zeile (Desktop)
   Topbar/ServiceNav oben, Brand links + Nav rechts darunter.
   ContactBar wird in die Topbar-Zeile integriert. */

@media (min-width: 79.5rem),
       (min-width: 45rem) and (orientation: landscape) {
  #site-header {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "contact contact"
      "topbar  topbar"
      "brand   nav";
  }

  #contact-bar {
    grid-area: contact;
  }

  #topbar,
  #site-header > .service {
    grid-area: topbar;
  }

  /* max-width/margin-auto aus layout.css aufheben → Grid füllen.
     header-inset nur einseitig (brand → links, nav → rechts), sonst frisst
     der Inset auf breiten Viewports beiden Cells je 2× Platz und die Nav
     wird gequetscht. Innere Seiten (brand-rechts, nav-links) ohne Padding,
     damit Logo + Nav den verfügbaren Mittelraum frei nutzen. */
  #site-header #brand,
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
  }
  /* Brand bewusst weiter raus als Content-Linie — sitzt am linken Site-Rand
     (padding-page), nicht am Content-Inset. Macht das Logo prominenter.
     Nav bleibt 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;
  }

  /* Logo auf Desktop — kompakte aber prominente Größe. */
  #site-header #brand > #logo {
    height: 6rem;
  }

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

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

  /* Lang-Switch: einfache Inline-Links auf dunklem Topbar */
  #lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
  }
  /* > a (direct child) statt deszendierendem Selektor: greift nur auf die
     Inline-Topbar-Links (2-5 Sprachen), NICHT auf <a> im Dropdown-Panel
     (#lang-switch > ul > li > a). Sonst würde der Dropdown-Inhalt weiß auf
     hellem BG werden → bisher mit !important in lang-switch.css gefixt. */
  #lang-switch > a {
    color: var(--color-topbar-text);
    transition: opacity var(--transition);
  }
  #lang-switch > a:hover {
    opacity: 0.7;
  }
  #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }

  /* Dropdown-Modus (6+ Sprachen): lang-switch sitzt INSIDE der .service-nav
     im dunklen Topbar. Globaler Hover (var(--color-bg-alt) ≈ weiß) würde
     hier "weiß auf weiß" erzeugen — Override mit hellem Tint auf dunkel. */
  #site-header .service #lang-switch {
    /* matched padding-inline der brand/main-nav-Container (var(--padding-page))
       damit lang-switch den gleichen Abstand zur Section-Kante hält wie das
       Logo links und der Nav rechts. Vorher war var(--space-3) — sah auf
       Tablet-Landscape zu eng am Rand aus. */
    margin-inline-end: var(--padding-page);
  }
  #site-header .service #lang-switch > button:hover,
  #site-header .service #lang-switch > button[aria-expanded="true"] {
    background: transparent;
    border-color: transparent;
  }

  /* Service-Hover — durchgängig Opacity (Icons + Text auf dunklem Topbar).
     > a (direct child) damit Lang-Switch-Dropdown-Items (.service > #lang-switch
     > ul > li > a) NICHT die Topbar-Text-Farbe erben. */
  #site-header #topbar > .service > a,
  #site-header > .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;
  }

  /* Main-Nav Top-Level-Farben + Pill-Optik: siehe Block E weiter unten
     (jeder Punkt eine eigene Glas-Pill). Hier nur noch die Dropdowns. */

  /* Dropdown-Menü: klassischer Look (heller BG, normale Border + Shadow) */
  #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);
  }

  /* Desktop: jedes Dropdown-Item bekommt denselben Radius (= Panel-Radius),
     damit der grüne Hover auf allen Items einheitlich abgerundet ist — die
     erste/letzte Position nestet dadurch zugleich bündig in die runde Box.
     Im Burger-Overlay nicht nötig, deshalb nur hier im Desktop-Block. */
  #site-header #main-nav ul ul a {
    border-radius: var(--radius-xl);
  }
}

/* Mobile/Tablet-Portrait Brand+Burger-Block jetzt zentral in
   components/header.css — war hier byte-identisch zu default/basic. */

/* Mobile/Tablet-Portrait Sichtbarkeit + Hover-Override für lang-switch
   leben jetzt zentral in components/lang-switch.css (tier-unabhängig). */

/* Pro-Tier Tablet + Mobile: Lang-Switch übernimmt die Desktop-Styles
   (gap, font-size, Topbar-Text-Color, Hover-Opacity) — plus linksbündig
   statt rechts via margin-inline-end: auto. */
@media screen and (max-width: 79.499rem) {
  #site-header #lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
    margin-inline-end: auto;
    margin-inline-start: -.5rem;
  }
  /* Lang-Switch-Text auf Mobile/Tablet: dunkel statt weiß — sitzt auf
     dem weißen Glas-Header (Phase-2-Mobile-Override). */
  #site-header #lang-switch > a {
    color: var(--color-text);
    transition: opacity var(--transition);
  }
  #site-header #lang-switch > a:hover {
    opacity: 0.7;
  }
  #site-header #lang-switch > span[aria-current] {
    color: var(--color-text);
    opacity: 0.6;
  }

}

/* Mobile only (< 45rem): Contact-Bar ist versteckt, dafür übernimmt
   .service-social die Social-Icon-Anzeige in Brand-Braun. Auf Tablet
   sind die Icons schon im Contact-Bar enthalten — kein Doppel-Render.
   Lang-Switch übernimmt ebenfalls Brand-Braun (überschreibt Default-Dark
   aus dem Tablet+Mobile-Block weiter oben). */
@media (max-width: 44.999rem) {
  #site-header .service-social {
    display: inline-flex;
  }
  #site-header .service-social a,
  #site-header .service-social a:hover,
  #site-header .service-social svg {
    color: var(--color-primary);
    fill: currentColor;
  }

  /* Lang-Switch in Weiß */
  #site-header #lang-switch > a {
    color: var(--color-topbar-text);
  }
  #site-header #lang-switch > a:hover {
    opacity: 0.7;
  }
  #site-header #lang-switch > span[aria-current] {
    color: var(--color-topbar-text);
    opacity: 0.6;
  }
}

/* Pro Tier: Mobile + Tablet-Layout (< 79.5rem) — Logo sichtbar, Burger rechts,
   #main-nav volle Breite. Der Pro-Tier-Default blendete das Logo auf Tablet
   aus, weil #icon (kleines Brand-Mark) als Tablet-Ersatz fungierte. Da wir
   kein #icon nutzen (global hidden), muss das Logo auf Tablet sichtbar
   bleiben.

   Höhere Spezifizität (#site-header #brand > #logo = 0,3,1) damit der
   Kernel-Cascade nicht reinfunkt. */
@media (max-width: 79.499rem) {
  /* Brand-Container: volle Breite, Logo links, Burger rechts.
     width: 100% explizit, weil sonst flex-basis: auto + intrinsic Content
     den Container schrumpfen lässt → Logo+Burger kleben zusammen mittig. */
  #site-header #brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    background: transparent;
  }
  #site-header #brand > #logo {
    display: block;
    flex: 1;          /* = 1 1 0% → wächst, schrumpft, basis 0 (statt auto) */
    min-width: 0;
    height: 4rem;     /* matched Desktop für konsistente Brand-Präsenz */
    margin-inline-start: var(--space-4);
  }
  /* Logo-Inhalt linksbündig (default-Behavior, aber explicit damit kein
     text-align: center von woanders durchschlägt). */
  #site-header #brand > #logo > a {
    display: block;
    text-align: start;
  }
  #site-header #brand > #nav-toggle {
    margin-inline-start: auto;
    flex-shrink: 0;
  }
  /* #main-nav: volle Breite, kein Inset — damit das Overlay-Menü (open > ul)
     nicht als schmaler Streifen erscheint. */
  #site-header #main-nav {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
  }

  #site-header #main-nav.open ul ul {
    background: var(--color-bg);
  }

}

/* Sehr schmale Smartphones: Logo komplett raus, Brand reduziert sich auf den
   Burger — Wortmark-Logos sind hier in der Regel zu breit. */
@media (max-width: 22rem) {
  #logo {
    display: none;
  }
}

/* Pro Tier: Das eigenständige Brand-Icon (#icon, kleines Mark neben #logo)
   wird komplett ausgeblendet — der Wortmark-Schriftzug im Logo trägt allein. */
#icon {
  display: none;
}


/* ====================================================================
   HERO-MODERNIZATION (Pro-Tier)

   Pinned Header mit Glas-Default. Auf Hero-Pages (Desktop) startet er
   transparent und fadet beim Scrollen via Scroll-Driven Animation in
   den Glas-Zustand. Auf Mobile/Tablet und Subpages: durchgängig Glas.

   Browser-Support: :has() + animation-timeline: scroll() — alle
   modernen Browser ab 2024+ (Chrome 115, Safari 17.4, Firefox 134).
   ==================================================================== */


/* --- A. Header-Pinning + Default-State ---------------------------- */
/* Header ist auf der Homepage-Desktop fixed (Welcome-Hero-Overlay) und
   bekommt aus dem Kernel beim Scrollen die Klassen `.scrolled` und
   `.compact` aufgesetzt. Default = subtiles Glas mit sanfter Transparenz;
   `.scrolled` = solides Glas; `.compact` = reduzierte Logo-Größe.
   Auf Subseiten und auf Mobile/Tablet liegt der Header im normalen Fluss
   (position: static, s. Overrides direkt unten). */

#site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 30;
  background: var(--glass);          /* hsl(0 0% 100% / 0.5) — Default-Glas */
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: none;
  transition: background var(--transition-slow),
              backdrop-filter var(--transition-slow),
              -webkit-backdrop-filter var(--transition-slow),
              box-shadow var(--transition-slow);
}

/* Subseiten: Header zurück in den normalen Dokumentfluss (statt fixed-
   Overlay). Teaser/Content folgen dann natürlich darunter — keine
   Überlappung, keine padding-top-Kompensation nötig (s. Block B).
   Nur die Homepage (Welcome-Hero, ohne .teaser-compact) behält den
   fixed-Overlay über dem Hero — und das auch nur auf dem Desktop. */
body:not(:has(#teaser-slider)) #site-header,
body:has(#teaser-slider.teaser-compact) #site-header {
  position: static;
}

/* Mobile/Tablet: fixed-Overlay komplett aus — auch die Homepage bekommt
   den Header im normalen Fluss. Der fixed-Modus bleibt dem Desktop
   vorbehalten (Welcome-Hero-Overlay nur dort). */
@media (max-width: 79.499rem) {
  #site-header {
    position: static;
  }
}

/* Hero-Pages Desktop: Header startet vollständig transparent über dem
   Hero (kein Default-Glas), damit der Hero ungestört wirkt.
   Nur bei Welcome-Hero (Home), NICHT bei Compact-Teaser-Subseiten. */
@media (min-width: 79.5rem) {
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
  }
}

/* Hero-Pages Mobile/Tablet: Default-Glas bleibt durchgehend an —
   ein transparenter Overlay über dem Hero würde das Burger-Menü
   unleserlich machen. (Background bleibt = Default-Glas aus #site-header,
   Nav-Text-Color erbt Default-Dark — siehe Block D unten, weiß-Regel
   ist auf Desktop beschränkt.) */

/* Scrolled-State: kräftigerer Glas-Look mit stärkerem Blur + Shadow.
   --glass-heavy (0.8) statt fast-opak — Blur muss sichtbar wirken können.
   `saturate(140%)` macht die Farben dahinter knackiger → echter Glas-Look. */
#site-header.scrolled {
  background: var(--glass-heavy);    /* hsl(0 0% 100% / 0.8) */
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 0.125rem 0.5rem hsl(0 0% 0% / 0.08);
}

/* Compact-State: Logo-Höhe schrumpft, Brand-Padding tighter.
   Wird typischerweise zusammen mit .scrolled getriggert. */
#site-header.compact #brand > #logo {
  height: 2.75rem;
  transition: height var(--transition-slow);
}


#site-header #main-nav {
  background: transparent;
}

/* Logo-Höhe bekommt grundsätzlich eine Transition, damit der Wechsel
   zwischen Default und Compact smooth ist. */
#site-header #brand > #logo {
  transition: height var(--transition-slow);
}


/* --- B. (entfällt) Subpage Body-Padding --------------------------- */
/* Früher kompensierte ein body-padding-top die Höhe des fixed Headers
   auf Subseiten. Seit der Header dort wieder im normalen Fluss liegt
   (position: static, s. Block A), ist keine Kompensation mehr nötig —
   Header und Teaser/Content stapeln sich natürlich. Nur die Homepage
   nutzt noch den fixed-Overlay (Hero bewusst hinter dem Header).
   Die Vars --header-fixed-height(-mobile) bleiben in variables.css als
   Reserve, werden aktuell aber nicht mehr referenziert. */


/* --- C. Contact-Bar per Viewport ---------------------------------- */
/* Mobile (<45rem):           versteckt — Brand via .service-social
   Tablet (45–79.499rem):     sichtbar, Brand-Braun + weißer Text
   Desktop (≥79.5rem):        sichtbar, weiß + dunkler Text         */

@media (max-width: 44.999rem) {
  body #site-header #contact-bar {
    display: none;
  }
}

@media (min-width: 45rem) and (max-width: 79.499rem) {

  #site-header #topbar {
    background: transparent;
  }


  body #site-header #contact-bar {
    display: flex;
    background: var(--color-primary);
    color: var(--color-topbar-text);
  }
  body #site-header #contact-bar a {
    color: var(--color-topbar-text);
  }
  /* Social-Icons im Topbar versteckt — schon im Contact-Bar */
  #site-header #topbar .service-social {
    display: none;
  }
}

@media (min-width: 79.5rem) {
  body #site-header #contact-bar {
    background: var(--color-bg);
    color: var(--color-text);
  }
}


@media (min-width: 79.5rem) {
  /* Abstand zwischen den Pills */
  #site-header #main-nav > ul {
    gap: var(--space-2);
  }

  #site-header #main-nav > ul > li > a {

    backdrop-filter: blur(36px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text);          /* dunkel als Default — passt auf hellen
                                          Glas-Header (Subseiten + Scrolled).
                                          Weiß nur über dem Welcome-Hero, s.u. */
    transition: background var(--transition),
                border-color var(--transition),
                color var(--transition);
  }

  /* Hover: grüner Komplementär-Ton (HKS 56) */
  #site-header #main-nav > ul > li > a:hover,
  #site-header #main-nav > ul > li:hover > a {
    background: var(--color-complement);
    border-color: var(--color-complement);
    color: var(--color-topbar-text);
  }

  /* Aktive / aktuelle Seite: Brand-Braun — bleibt vom Hover unterscheidbar */
  #site-header #main-nav > ul > li.active > a,
  #site-header #main-nav > ul > li > a[aria-current="page"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-topbar-text);
  }

  /* Heller Pill-Text NUR auf der Homepage über dem Welcome-Hero und nur
     solange nicht gescrollt — dort ist der Header transparent über dem
     Foto. Gleiche Bedingung wie der transparente Header (s. Block A).
     Subseiten (Compact-Teaser / kein Teaser) und der Scrolled-Zustand
     behalten den dunklen Default-Text. */
  body:has(#teaser-slider:not(.teaser-compact)) #site-header:not(.scrolled) #main-nav > ul > li > a {
    color: var(--color-topbar-text);
  }
}


/* Dropdown-Panel (ul ul) in der Hauptnavigation: runde Ecken + etwas
   Abstand nach oben (Lücke zwischen Nav-Punkt und aufgeklapptem Menü).
   Border/BG/Shadow kommen aus dem Desktop-Block oben — hier nur Radius
   und Margin ergänzt. NUR Desktop — im Burger-Overlay bleibt der
   Kernel-Default (kein Radius/Margin/Hover-Brücke). */
@media (min-width: 79.5rem) {
  #site-header #main-nav ul ul {
    border-radius: var(--radius-xl);
    margin-top: var(--space-2);
  }
  /* Unsichtbare Hover-Brücke über den margin-Spalt: ohne sie verliert der
     Cursor auf dem Weg vom Nav-Punkt ins Dropdown den Hover (leerer Bereich
     dazwischen) und das Submenü klappt zu. Das transparente ::before liegt
     als Kind im ul → solange es überfahren wird, bleibt li:hover/ul:hover
     bestehen. Höhe = margin-top. */
  #site-header #main-nav ul ul::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: var(--space-2);
  }
}

/* Dropdown-Item Hover + Current-Page: NUR Desktop. Im Burger-Overlay bleibt
   der Kernel-Default (kein grüner Hover auf Touch/Mobile). */
@media (min-width: 79.5rem) {
  /* Dropdown-Item Hover: grüner Komplementär-Ton (HKS 56), weißer Text. */
  #site-header #main-nav ul ul a:hover {
    background: var(--color-complement);
    color: var(--color-topbar-text);
  }
  /* Aktuelle Seite im Dropdown: heller BG + Brand-Braun — bleibt vom grünen
     Hover unterscheidbar. */
  #site-header #main-nav ul ul a[aria-current="page"] {
    background: var(--color-bg-alt);
    color: var(--color-primary);
  }
}


#teaser-slider {
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  overflow: hidden;
}

@media (max-width: 30rem) {
  #teaser-slider {
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
  }
}




@media (min-width: 45rem) {
  body:has(#teaser-slider:not(.teaser-compact)) #teaser-slider::after {
    content: "★ EM 2026 · 19.–26. Juli";

    position: absolute;
    top: 11rem;
    right: 2rem;
    z-index: 5;

    padding: var(--space-4) var(--space-6);
    background: var(--color-accent);   /* HKS 56 Grün */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 0.0625rem solid hsl(0 0% 100% / 0.35);
    border-radius: var(--radius-pill);
    box-shadow:
      0 0.75rem 2rem hsl(0 0% 0% / 0.22),
      0 0 0 0.25rem hsl(167 100% 23% / 0.18);

    font-family: var(--font-accent);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: hsl(0 0% 100%);
    white-space: nowrap;

    animation:
      hero-badge-enter 0.7s ease-out 0.4s both,
      em-badge-pulse 2.8s ease-in-out 1.4s infinite;
  }
}

@keyframes hero-badge-enter {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dezenter, premium-tauglicher Aufmerksamkeits-Puls (grüner Glow-Ring) */
@keyframes em-badge-pulse {
  0%, 100% { box-shadow: 0 0.75rem 2rem hsl(0 0% 0% / 0.22), 0 0 0 0.25rem hsl(167 100% 23% / 0.15); }
  50%      { box-shadow: 0 0.75rem 2rem hsl(0 0% 0% / 0.22), 0 0 0 0.625rem hsl(167 100% 23% / 0.32); }
}

/* Bewegung reduzieren: nur Einblendung, kein Dauer-Puls */
@media (prefers-reduced-motion: reduce) {
  body:has(#teaser-slider:not(.teaser-compact)) #teaser-slider::after {
    animation: hero-badge-enter 0.7s ease-out 0.4s both;
  }
}