/* =============================================================================
   layout.css — Seitengerüst: WebGL-Bühne, Messrail, Header, Sektionsraster
   ========================================================================== */

/* ---------------------------------------------------------------------------
   WEBGL-BÜHNE
   Liegt fix hinter dem gesamten Dokument. Die Szene erzählt über alle
   Sektionen hinweg weiter — sie ist kein Hero-Gimmick.
   Die Deckkraft wird per --gl-opacity vom Scroll-Controller gesteuert,
   damit Text in inhaltsdichten Sektionen immer Vorrang hat.
   ------------------------------------------------------------------------ */
.gl-stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  pointer-events: none;
  opacity: var(--gl-opacity, 1);
  transition: opacity var(--d-slow) var(--e-soft);
  contain: strict;
}

.gl-stage__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Standbild ohne WebGL — dieselbe Topologie, orthogonal projiziert.
   Füllt die Bühne genauso wie der Canvas. */
.gl-fallback-wrap {
  position: absolute;
  inset: 0;
}

.gl-fallback {
  width: 100%;
  height: 100%;
}

/* Grundlicht: liegt unter dem Canvas und gibt der Seite auch dann Tiefe,
   wenn WebGL nicht verfügbar ist. */
.gl-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%,  rgb(61 123 250 / 0.16) 0%, transparent 58%),
    radial-gradient(80% 60% at 82% 78%,  rgb(34 199 224 / 0.07) 0%, transparent 62%),
    radial-gradient(70% 70% at 12% 62%,  rgb(29 78 216 / 0.10) 0%, transparent 60%);
}

/* Feines technisches Raster über der gesamten Seite. Sehr zurückhaltend —
   es soll spürbar, nicht sichtbar sein. */
.gl-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  var(--c-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-line) 1px, transparent 1px);
  background-size: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 96px);
  opacity: 0.42;
  mask-image: radial-gradient(130% 100% at 50% 0%, #000 0%, transparent 72%);
}

/* Vignette: hält die Ränder ruhig und lässt die Mitte atmen */
.gl-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  pointer-events: none;
  background:
    radial-gradient(150% 110% at 50% 45%, transparent 42%, rgb(5 7 10 / 0.55) 78%, rgb(5 7 10 / 0.9) 100%);
}

/* ---------------------------------------------------------------------------
   HEADER
   ------------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-inline: var(--space-gutter);
  transition:
    background-color var(--d-base) var(--e-out),
    border-color     var(--d-base) var(--e-out),
    backdrop-filter  var(--d-base) var(--e-out);
  border-block-end: 1px solid transparent;
}

/* Reagiert beim Scrollen: verdichtet sich, bekommt eine Kante */
.site-header[data-scrolled="true"] {
  background-color: var(--c-veil);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-block-end-color: var(--c-line);
}

/* Bei offenem Menü übernimmt das Overlay den Hintergrund — der Header
   darf dann keinen zweiten, abweichenden Streifen darüberlegen. */
body[data-menu-open="true"] .site-header,
body[data-menu-open="true"] .site-header[data-scrolled="true"] {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-block-end-color: transparent;
}

.site-header__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

/* ---------------------------------------------------------------------------
   MESSRAIL (Desktop ≥ 1200px)
   Kein zweites Navigationsmenü, sondern eine Skala: Sektionsindex,
   Scroll-Fortschritt, Systemstatus. Rein dekorativ-informativ, deshalb
   aria-hidden — die echte Navigation steht im Header.
   ------------------------------------------------------------------------ */
.site-rail {
  display: none;
}

@media (min-width: 1200px) {
  .site-rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-rail);
    width: clamp(3.5rem, 4.4vw, 5rem);
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    /* Oben um die Kopfzeilenhöhe einrücken, sonst läuft die obere
       Beschriftung hinter den fixierten Header. */
    padding-block: calc(var(--header-h) + var(--s-4)) var(--s-6);
    pointer-events: none;
    border-inline-end: var(--b-hair);
    background: linear-gradient(to right, rgb(5 7 10 / 0.5), transparent);
  }

  /* Fortschrittslinie */
  .site-rail__track {
    grid-row: 2;
    position: relative;
    width: 1px;
    height: min(46vh, 22rem);
    background-color: var(--c-line-strong);
  }

  .site-rail__fill {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: calc(var(--scroll-progress) * 100%);
    background: linear-gradient(to bottom, var(--c-accent), var(--c-signal));
    box-shadow: var(--glow-soft);
  }

  /* Laufender Indexpunkt */
  .site-rail__dot {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: calc(var(--scroll-progress) * 100%);
    width: 5px;
    height: 5px;
    margin-inline-start: -2px;
    margin-block-start: -2px;
    border-radius: var(--r-pill);
    background-color: var(--c-signal);
    box-shadow: 0 0 12px 1px rgb(34 199 224 / 0.8);
  }

  .site-rail__label {
    font-family: var(--font-mono);
    font-size: var(--t-mono);
    letter-spacing: var(--ls-mono-wide);
    color: var(--c-text-faint);
    text-transform: uppercase;
    writing-mode: vertical-rl;
    white-space: nowrap;
    /* Beide Beschriftungen lesen von unten nach oben.
       vertical-rl allein würde von oben nach unten laufen; die Drehung um
       180° kippt die Leserichtung — die Schriftlaufrichtung ist damit auf
       der gesamten Achse einheitlich. */
    transform: rotate(180deg);
  }

  .site-rail__label--top    { grid-row: 1; align-self: start; }
  .site-rail__label--bottom { grid-row: 3; align-self: end; }

  /* Inhalt bekommt links Luft, damit die Rail nicht überlappt */
  .site-header,
  .section__inner,
  .hero__inner { padding-inline-start: max(var(--space-gutter), clamp(3.5rem, 4.4vw, 5rem)); }
}

/* ---------------------------------------------------------------------------
   HAUPTBEREICH & SEKTIONSRASTER
   ------------------------------------------------------------------------ */
.site-main {
  position: relative;
  z-index: var(--z-content);
}

.section {
  position: relative;
  padding-block: var(--space-section);
}

/* Trennlinie zwischen Sektionen — läuft an den Rändern aus, damit sie
   nicht wie ein Kasten wirkt. */
.section + .section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--space-gutter);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--c-line-strong) 18%, var(--c-line-strong) 82%, transparent);
}

.section__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.section--content .section__inner { max-width: calc(var(--w-content) + 2 * var(--space-gutter)); }

/* Sektionskopf: laufende Nummer + Titel, typografisch statt dekorativ */
.section-head {
  display: grid;
  gap: var(--s-4);
  margin-block-end: clamp(var(--s-8), 5vw, var(--s-11));
}

.section-head__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.section-head__eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--c-line-strong), transparent);
}

.section-head__num { color: var(--c-accent-soft); }

.section-head__title {
  font-size: var(--t-3xl);
  max-width: 22ch;
}

.section-head__lede {
  max-width: var(--w-prose);
  font-size: var(--t-lg);
  line-height: var(--lh-normal);
  color: var(--c-text-muted);
}

/* ---------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--s-9) var(--s-7);
  border-block-start: var(--b-hair);
  background-color: rgb(5 7 10 / 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-footer__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
  display: grid;
  gap: var(--s-7);
}

@media (min-width: 1200px) {
  .site-footer__inner { padding-inline-start: max(var(--space-gutter), clamp(3.5rem, 4.4vw, 5rem)); }
}

.site-footer__top {
  display: grid;
  gap: var(--s-6);
  align-items: start;
}

@media (min-width: 48rem) {
  .site-footer__top { grid-template-columns: 1fr auto; }
}

.site-footer__note {
  max-width: 46ch;
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-faint);
}

.site-footer__note strong {
  color: var(--c-text);
  font-weight: var(--fw-medium);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-size: var(--t-sm);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: baseline;
  padding-block-start: var(--s-5);
  border-block-start: var(--b-hair);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-text-faint);
}