/* ============================================================================
   DIGITALGROWMATIC — Gate 3.5: Globale Navigation (eigene Ebene, unabhängig von Hero/S02/S03)
   Zustände am <header data-nav>:
     data-theme = "light" → helles Logo/helle Schrift (für dunkle/Bild-Hintergründe)
                  "dark"  → Graphit-Logo/-Schrift (für helle Hintergründe)
     data-zone  = "hero"  → Kopf über S01 in freigegebener Hero-Geometrie (Logo-Größe unverändert)
                  "page"  → kompakter Kopf nach dem Hero, schmales Band in der Farbe der Sektion
   Jede Sektion meldet ihr Theme über data-nav-theme="light|dark" (auch künftige, z. B. S04 dunkel).
   Ohne JavaScript bleibt der Kopf wie bisher im Hero (absolut) und scrollt weg.
   ============================================================================ */

.site-head {
  --nav-ink: #fff;
  --nav-bg: transparent;
  --hc: clamp(44px, 5.4vh, 56px);                 /* Höhe kompakter Kopf (Desktop) */
  --top-hero: clamp(18px, 2.6vh, 32px);           /* Logo-Position im hellen Hero (05.10.) */
  --lw-hero: clamp(170px, 12.5vw, 250px);         /* Logo-Breite im hellen Hero (05.10., vorher bis 330 px über Film) */
  --lw-page: calc((var(--hc) - 16px) * 3.09);     /* Logo kompakt, gleiche Proportion */
  --t-nav: 260ms;
  color: var(--nav-ink);
}
.site-head[data-theme="dark"] { --nav-ink: var(--graphite); }

/* ---- Geometrie mit JS: fester Kopf ---- */
.js .site-head {
  position: fixed; z-index: 40; top: 0; left: 0; right: 0;
  padding: var(--top-hero) var(--pad) 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  pointer-events: none;
  transition: padding var(--t-nav) var(--ease);
}
.js .site-head > * { pointer-events: auto; }
.js .site-head[data-zone="page"] { padding-top: 8px; padding-bottom: 8px; }
.js .site-head[data-zone="page"] .brand__logo { width: var(--lw-page); }
.js .site-head .brand__logo { transition: width var(--t-nav) var(--ease), opacity 200ms var(--ease); }

/* Band: nur im kompakten Zustand, exakt in der Hintergrundfarbe der aktuellen Sektion (keine Platte) */
.site-head__band {
  position: absolute; left: 0; right: 0; top: 0; height: var(--hc); z-index: -1;   /* unter Logo/Links */
  background: var(--nav-bg); opacity: 0; pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.js .site-head[data-zone="page"] .site-head__band { opacity: 1; }
html:not(.js) .site-head__band { display: none; }
/* Übergang groß → kompakt (260 ms): Das Band folgt der Logo-Unterkante, damit das schrumpfende Logo nie
   über das Band hinausragt. Zweite Fläche in derselben Farbe; Endzustand identisch (Höhe --hc).
   .site-head__band bleibt unverändert die Messgröße für --nav-h. */
.js .site-head::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: -1; pointer-events: none;
  height: calc(var(--top-hero) + var(--lw-hero) / 3.09 + 8px);
  background: var(--nav-bg); opacity: 0;
  transition: opacity 200ms var(--ease), height var(--t-nav) var(--ease);
}
.js .site-head[data-zone="page"]::before { opacity: 1; height: var(--hc); }
/* Ohne JS: Kopf scrollt mit dem Hero (absolut), Navigation rechtsbündig wie mit JS */
html:not(.js) .site-head { right: var(--pad); justify-content: space-between; align-items: center; }

/* Logo-Varianten: hell (freigegeben, unverändert) / Graphit; gleiche Box, Überblendung */
.brand__logo--dark {
  position: absolute; left: 0; top: 0; height: auto; opacity: 0;
  filter: none;
}
.site-head[data-theme="dark"] .brand__logo:not(.brand__logo--dark) { opacity: 0; }
.site-head[data-theme="dark"] .brand__logo--dark { opacity: 1; }
/* Ohne JS liegt der Kopf über dem weißen Hero: Graphit-Logo zeigen (05.10.) */
html:not(.js) .brand__logo:not(.brand__logo--dark) { display: none; }
html:not(.js) .brand__logo--dark { position: relative; opacity: 1; }

/* ---- Desktop-Navigation ---- */
.site-nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 44px); }
.site-nav__list { display: flex; gap: clamp(22px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.site-nav__link, .lang__toggle, .menu-toggle {
  font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nav-ink); text-decoration: none; white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color 200ms var(--ease), text-shadow 200ms var(--ease);
}
/* Lesbarkeit über den sechs Hero-Filmen: dieselben flachen Schatten wie Logo/Rail, keine Platte */
.site-head[data-theme="light"] .site-nav__link,
.site-head[data-theme="light"] .lang__toggle,
.site-head[data-theme="light"] .menu-toggle,
.site-head[data-theme="light"] .lang__opt {
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, .38), 0 0 8px rgba(0, 0, 0, .28);
}
.site-nav__link.is-pending { cursor: default; }
a.site-nav__link:hover, .lang__toggle:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-head :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; box-shadow: none; }

/* Sprachwahl: Auslöser „DE“ + feiner Winkel; Liste ohne Platte darunter */
.lang { position: relative; }
.lang__toggle { gap: 8px; }
.lang__chev {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 200ms var(--ease);
}
.lang__toggle[aria-expanded="true"] .lang__chev { transform: rotate(-135deg); margin-top: 3px; }
.lang__list {
  position: absolute; right: 0; top: 100%;
  margin: 0; padding: 4px 0 8px; list-style: none; text-align: right;
}
.site-head[data-zone="page"] .lang__list { background: var(--nav-bg); padding-left: 18px; }
.lang__opt {
  display: block; min-height: 36px; line-height: 36px;
  font-size: 13px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nav-ink); text-decoration: none;
}
a.lang__opt:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lang__opt[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.lang__opt.is-pending { opacity: .72; cursor: default; }
html:not(.js) .lang__toggle { display: none; }
html:not(.js) .lang__list { display: flex; position: static; gap: 14px; padding: 0; }
html:not(.js) .lang__list[hidden] { display: flex; }

/* ---- Mobil: „MENÜ“ als Wort, Vollflächen-Menü ---- */
.menu-toggle { display: none; padding: 0 2px; }
html:not(.js) .menu-toggle { display: none !important; }

.site-menu {
  position: fixed; inset: 0; z-index: 35;
  background: #ffffff; color: var(--graphite);
  padding: calc(56px + clamp(28px, 7vh, 64px)) var(--pad) max(32px, env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.site-menu.is-open { opacity: 1; transform: none; }
.site-menu__nav { display: flex; flex-direction: column; min-height: 100%; }
.site-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(10px, 2.4vh, 22px); }
.site-menu__link {
  display: inline-block; padding: 6px 0;
  font-stretch: 118%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(34px, 10.5vw, 52px); line-height: 1; letter-spacing: -.01em;
  color: var(--graphite); text-decoration: none;
}
.site-menu__link.is-pending { color: #6b6964; }
.site-menu__lang {
  list-style: none; margin: auto 0 0; padding: clamp(36px, 8vh, 72px) 0 0; display: flex; gap: 28px;
}
.site-menu__langopt {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 650; letter-spacing: .14em; color: var(--graphite); text-decoration: none;
}
.site-menu__langopt[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.site-menu__langopt.is-pending { color: #6b6964; }
.site-menu :focus-visible { outline: 2px solid var(--graphite); outline-offset: 4px; box-shadow: none; }

@media (max-width: 820px) {
  .site-head { --hc: 56px; --top-hero: 16px; --lw-hero: 150px; --lw-page: 124px; }
  .js .site-nav { display: none; }
  .js .menu-toggle { display: inline-flex; }
  .js .site-head[data-zone="page"] { padding-top: 0; padding-bottom: 0; height: var(--hc); }
  .js .site-head[data-zone="page"] .brand__logo { width: var(--lw-page); }
  html:not(.js) .site-nav__list { gap: 18px; }
  html:not(.js) .site-nav .is-pending, html:not(.js) .lang { display: none; }
}
/* Menü offen: Kopf immer hell-kompakt über dem Menü */
.menu-open .site-head { --nav-bg: #ffffff; }

/* Anker der Startseite (sprachspezifische IDs, data-anchor): Ziel landet unter dem kompakten Kopf.
   S03 mit Desktop-Bewegung: systems.js setzt ein Inline-scroll-margin – das bleibt maßgeblich. */
.js main [data-anchor] { scroll-margin-top: var(--nav-h, 56px); }
/* Sektionen mit eigenem großzügigem Innenabstand landen bündig: Der kompakte Kopf liegt dann über der
   eigenen Sektion (Band in deren Farbe) statt über dem Ende der vorherigen. */
.js main [data-anchor]:not(.s03) { scroll-margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .site-head, .js .site-head .brand__logo, .site-head__band, .js .site-head::before, .site-menu,
  .site-nav__link, .lang__toggle, .menu-toggle, .lang__chev { transition: none !important; }
}

/* ---- Visual Direction 05.10.: Primär-CTA im Kopf (Desktop), Ziel S03 ---- */
.site-nav__cta {
  display: inline-flex; align-items: center; gap: .6em; min-height: 46px; padding: 0 20px;
  background: var(--graphite); color: #fff; border-radius: 3px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.site-nav__cta:hover { background: var(--orange); color: var(--graphite); }
.site-head[data-theme="light"] .site-nav__cta { background: #fff; color: var(--graphite); }
.site-head[data-zone="page"] .site-nav__cta { min-height: 38px; padding: 0 16px; font-size: 12px; }
@media (max-width: 1099px) { .site-nav__cta { display: none; } }
html:not(.js) .site-nav__cta { display: none; }