/* =====================================================================
   locomo – Grundlayout: Header, Stage, Platzhalter-Sections
   Alle Werte kommen aus tokens.css.
   ===================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  font-weight: var(--weight-light);
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, dt { margin: 0; }

/* ---------------------------------------------------------------------
   Header
   Drei unabhängige, fixierte Ebenen:
   1. weiße Fläche bis zur Stage-Oberkante (verdeckt Inhalte beim Scrollen)
   2. Logo (wird per JS über transform skaliert und verschoben)
   3. Sprachumschalter (feste Position und feste Maße → zuckt nie)
   --------------------------------------------------------------------- */
.header-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--stage-top);
  background: var(--color-paper);
  z-index: 10;
}

.logo {
  position: fixed;
  top: 0;
  left: var(--content-inset);
  /* Grundbreite = großes Logo in voller Inhaltsbreite. JS skaliert davon ausgehend. */
  width: var(--content-width);
  transform-origin: 0 0;
  z-index: 11;
  display: block;
  line-height: 0;
}
.logo img { width: 100%; height: auto; display: block; }
.logo--animate { transition: transform 400ms ease; }   /* nur beim Öffnen/Schließen eines Modals */

.lang-switch {
  position: fixed;
  /* Switch vertikal mittig zum kleinen Logo */
  top: calc(var(--header-space) + (var(--logo-small-h) - var(--switch-h)) / 2);
  right: var(--content-inset);
  display: flex;
  z-index: 11;
}
.lang-switch button {
  /* Feste Segmentbreite: Schnittwechsel ändert nur die Glyphe, nie die Box */
  width: var(--switch-segment-w);
  height: var(--switch-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--type-ui-size);
  font-weight: var(--weight-light);
  line-height: var(--switch-h);
  color: var(--color-ink);
  cursor: pointer;
}
.lang-switch button[aria-pressed="true"] {
  background: var(--color-sand-light);
  font-weight: var(--weight-medium);
}
.lang-switch button:focus-visible,
.logo:focus-visible,
.stage-skip:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Stage
   .stage-track ist hoch (Länge der Infografik), .stage-viewport klebt
   per position: sticky oben, solange die Infografik läuft.
   --------------------------------------------------------------------- */
.stage-track {
  position: relative;
  /* Höhe wird von JS gesetzt: Gesamtdauer × Scroll-Einheit + 1 Bildschirm */
}

.stage-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.stage {
  position: absolute;
  top: var(--stage-top);
  bottom: var(--stage-bottom);
  left: var(--content-inset);
  right: var(--content-inset);
  border-radius: var(--radius);
  overflow: hidden;           /* Sand-Fläche in C und Schürze werden am Rahmen abgeschnitten */
  background: var(--color-paper);
}

.stage-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Schürze: Sand-Fläche unter dem großen Logo, fährt beim Scrollen nach unten weg */
.apron {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* top wird von JS gesetzt (= Unterkante des großen Logos) */
  background: var(--color-sand);
  border-radius: var(--radius) var(--radius) 0 0;
  will-change: transform;
}

/* ---------- Texte in der Stage ---------- */
.stage-text {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stage-text > * {
  position: absolute;
  opacity: 0;                 /* Sichtbarkeit steuert ausschließlich die Timeline */
  will-change: opacity;
}

.t-claim,
.t-segment h3,
.t-vision,
.t-final {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-line);
  font-weight: var(--weight-light);
}
.t-claim .word { opacity: 0; will-change: opacity; }

.t-segment { width: max-content; max-width: calc(100% - 2 * var(--stage-inset)); }
.t-segment h3 { margin-bottom: var(--heading-gap); }
.t-segment dl {
  display: grid;
  gap: var(--list-item-gap);
  font-size: var(--type-stage-list-size);
  line-height: var(--type-stage-list-line);
}
.t-segment dt { font-weight: var(--weight-medium); }
.t-segment dd { font-weight: var(--weight-light); }

.t-label {
  font-size: var(--type-stage-label-size);
  line-height: var(--type-stage-label-line);
  white-space: nowrap;
}

.t-vision { white-space: nowrap; transform: translate(-50%, -50%); text-align: center; }
.t-final {
  transform: translate(-50%, -50%);
  text-align: center;
  width: max-content;
  max-width: calc(100% - 2 * var(--stage-inset));   /* bricht auf Mobile um */
}
.t-final strong { font-weight: var(--weight-medium); }

/* „Überspringen“ rechtsbündig unter der Stage, mittig im unteren Abstand */
.stage-skip {
  position: absolute;
  right: var(--content-inset);
  bottom: calc((var(--stage-bottom) - var(--type-meta-line)) / 2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-line);
  font-weight: var(--weight-light);
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  z-index: 2;
}