/* ==================================================
   STYLE.CSS — Verwischte Spuren
   - Hero (gepinnte Zeitachse) am Anfang
   - Sticky Hauptbühne (Karte + Bubbles), Text-Boxen scrollen drüber
   - Responsive: 1280–2560 px (MBP 14" bis iMac 24")
   ================================================== */

@font-face {
  font-family: "Söhne";
  src: url("fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Söhne Halbfett wird NICHT verwendet — überall nur "Buch" (Regular).
   Überschriften/Titel werden allein durch GROSSBUCHSTABEN (uppercase)
   ausgezeichnet, nicht durch Schriftstärke. */

:root {

  --bg:           #0a0c0e;
  --text:         #f1efea;
  --text-dim:     #888888;
  --map-fill:     #14181b;
  --map-stroke:   #2a2f33;

  --bubble-1:     #bccec2;
  --bubble-2:     #899eaa;
  --bubble-3:     #c43a3a;
  --bubble-4:     #5fc94c;
  --bubble-5:     #cccc99;
  --bubble-mute:  #3a3f43;

  --pop-alpine:            #669999;
  --pop-baltic:            #996633;
  --pop-carpathian:        #333300;
  --pop-central-european:  #663333;
  --pop-dinaric-balkan:    #336633;
  --pop-italian-peninsula: #003333;
  --pop-karelian:          #cccc99;
  --pop-iberian:           #336666;
  --pop-scandinavian:      #996666;

  /* Höhengeführte Einheit (wie die Frames: Skala S = Fensterhöhe / 1440).
     --u = 1 Design-Pixel höhengeführt; --fs-frame-body = Frame-Lauftext (25px@1440).
     Damit skalieren Hero-Hint, Marker, Outro (und der Titel/Untertitel via vw→--u)
     proportional mit der Höhe, exakt im Takt der Frames. */
  /* Frame-Skala: EXAKT frameScale() der Frames (js/frame-scaffold.js).
     --S = Anzeige-px pro Design-Pixel (Design-Basis 2560×1440). Höhe
     füllt, seitlich max. 120px Beschnitt, sonst Letterbox oben/unten →
     1:1 dasselbe Resize-Verhalten wie ein Frame. */
  /* WICHTIG: --S ist eine EINHEITENLOSE Zahl (für transform: scale()).
     Sie wird in JS (hero-intro.js → applyStageScale) bei init & resize
     gesetzt = frameScale() der Frames. Dieser Fallback (1) gilt nur, bis
     das JS einmal gelaufen ist. NICHT als CSS-calc(100vh/1440) schreiben —
     das ergäbe eine px-Länge und scale() würde ungültig. */
  --S:             1;
  --u:             var(--S);              /* Alias (rückwärtskompatibel, ungenutzt) */

  /* SINGLE-TRANSFORM-MODELL: Die .hero-stage ist eine echte 2560×1440-px-
     Bühne und wird als GANZES via transform: scale(--S) skaliert (genau
     wie ein Frame). Daher sind ALLE Hero-Innenwerte reine Design-Einheiten
     (px/%/rem) OHNE * var(--S). --fs-frame-body = 25 Design-px Lauftext. */
  --fs-frame-body: 25px;                  /* Frame-Lauftext = 25 Design-px */


  /* ============================================================
      INTRO-TWEAK-PANEL  —  ALLE Intro-Stellschrauben an EINEM Ort
     ------------------------------------------------------------
     Alle Werte sind DESIGN-px @1440 (bzw. % der Bühne) und skalieren
     automatisch via --S mit (Intro bleibt = Frame-Grösse). Einfach hier
     die Zahlen ändern — die Selektoren weiter unten sind alle verdrahtet.
     ============================================================ */

  /* — TITEL — */
  --intro-title-size:        230px; /* 235.5 Schriftgrösse "VERWISCHTE SPUREN" */
  --intro-title-gap:          25px;    /* Abstand Titel ↓ (zum Untertitel) */

  /* — UNTERTITEL — (per JS auf Breite von „VERWISCHTE" kalibriert) */
  --intro-subtitle-scale:    0.88;    /* kleiner = schmaler; grösser = breiter */

  /* — HINT — („scrolle"-Hinweis) */
  --intro-hint-size:         25px;    /* Schriftgrösse Hint */
  --intro-hint-gap:          25px;    /* Abstand Hint ↑ (zum Untertitel) */

  /* — MARKER (Zeitachse) — */
  --intro-marker-label-size: 25px;    /* Marker-Label (oben am Pfahl) */
  --intro-marker-desc-size:  25px;    /* Marker-Beschreibung (über Label) */
  --intro-marker-year-size:  25px;    /* Jahreszahl (unten am Pfahl) */
  --intro-marker-top-offset: 17px;     /* Label + Beschreibung rauf (+) / runter (−) */
  --intro-marker-year-offset: 17px;    /* Jahr runter (+) / rauf (−) */

  /* — OUTRO — („Heute: …"-Text am Ende) — Frame-Look: linke Textspalte.
     Alle Werte sind DESIGN-px (Basis 2560×1440), skalieren via --S mit. */
  --intro-outro-size:        30px;    /* Schriftgrösse Outro */
  --intro-outro-x:           200px;   /* linke Kante (= Frame-Textspalte / Hero-Titel) */

  --intro-outro-top:         220px;   /* Oberkante Buchstaben (= Frame-Titel-Höhe) */
  --intro-outro-width:       800px;   /* Spaltenbreite / Zeilenlänge */
  --intro-outro-lh:          1.45;    /* Zeilenabstand */

  /* — CHOICE-ÜBERSCHRIFT — („Wähle deinen Einstieg") */
  --intro-choice-title-size: 25px;    /* Schriftgrösse Überschrift */
  --intro-choice-title-gap:  25px;    /* Abstand Überschrift ↔ Buttons (Design-px) */

  /* — BUTTONS — (Einstiegs-Auswahl, rechts neben Outro, vertikal gestapelt,
     vertikal mittig zur Outro-Textspalte ausgerichtet) */
  --intro-btn-text-size:     25px;    /* Button-Texte (Label + Beschreibung) */
  --intro-btn-width:         700px;   /* Button-Breite */
  --intro-btn-gap:           25px;    /* vertikaler Abstand ZWISCHEN den Buttons (Design-px) */
  --intro-btn-x:             1300px;  /* linke Kante des Button-Blocks (Design-px) */



  /* Responsive Schriftgrössen via clamp(min, fluid, max) */
  --fs-h1:    clamp(2.2rem, 4.5vw, 4.5rem);

  --fs-h2:    clamp(0.78rem, 0.6vw + 0.6rem, 1.05rem);
  --fs-body:  clamp(0.95rem, 0.4vw + 0.85rem, 1.2rem);
  --fs-small: clamp(0.72rem, 0.25vw + 0.65rem, 0.9rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "Söhne", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);

  /* Texte (SVG + HTML-Overlay) verhalten sich wie Grafik:
     nicht markierbar/auswaehlbar. Klickbarkeit der Buttons bleibt. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* SVG-Text nicht interaktiv: kein Text-Cursor (I-Beam), Klicks gehen
   durch zu Bubbles/Timeline-Kreisen. */
svg text { pointer-events: none; }


/* --------- Sticky Stage --------- */
/* Hinweis: Opacity wird komplett von gsap gesteuert (siehe main.js
   wechsleZu), damit Stage + Section synchron einfaden. Keine CSS-
   Transition mehr — sonst entsteht ein Frame, in dem die Bühne sichtbar
   wird, bevor sie ihren Inhalt aufgesetzt hat (Flackern). */
#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
#stage > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#map-layer svg, #bubble-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* --------- Legende --------- */
#legend {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 5;
  background: rgba(10, 12, 14, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.9rem 1.1rem;
  border: 1px solid #1f2326;
  border-radius: 4px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.4s;
  min-width: 11rem;
  max-width: 22rem;
}
#legend.hidden { opacity: 0; }

/* --------- Trail-Overlay (Titel + Scroll-Hint, nach Trail-Wahl) --------- */
#trail-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 14, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  opacity: 1;
  /* Asymmetrisch: Einblenden sofort (damit das Overlay den Section-Wechsel
     direkt überdeckt und nichts aufblitzt), Ausblenden weich über 0.6 s. */
  transition: opacity 0s ease;
  text-align: center;
  padding: 0 6vw;
}
#trail-overlay.hidden {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.trail-overlay-kicker {
  /* "Trail 1" / "Trail 2"-Label entfernt — JS schreibt einen leeren
     Textinhalt, dieses Display:none stellt sicher, dass das Element
     keinen Platz mehr beansprucht. */
  display: none;
}
.trail-overlay-title {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;

  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 2rem;
}
.trail-overlay-hint {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text);
  padding: 0.6rem 1.2rem;
  background: rgba(10, 12, 14, 0.7);
  border: 1px solid #2a2f33;
  border-radius: 999px;
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* --------- Achsen- und Punkt-Labels im annotation-layer --------- */
#annotation-layer {
  pointer-events: none;
}

/* --------- Medien-Collage (Szene «Emotional aufgeladene Meinungen») ---
   Headlines + Leserkommentare als überlappende «Pinnwand». Positionen
   werden in scenes.js zugewiesen; hier nur Grundlook + Schatten. */
.media-card {
  position: absolute;
  display: block;
  height: auto;
  border-radius: 4px;
  background: #1a1c1f;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
}
/* Jahres-Timeline (klickbar) — Sibling von #stage, am <body>.
   z-index hoch genug, damit sie über stage & legend liegt. */
.year-switch {
  position: fixed;
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  z-index: 40;
  pointer-events: auto;
}
.year-switch button {
  font-family: inherit;
  font-size: var(--fs-small);
  letter-spacing: 0.14em;
  background: rgba(10,12,14,0.85);
  color: var(--text-dim);
  border: 1px solid #2a2f33;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.year-switch button:hover { color: var(--text); border-color: #4a5055; }
.year-switch button.active {
  background: rgba(255,255,255,0.10);
  color: var(--text);
  border-color: var(--text);
}
.viz-axis-col, .viz-axis-row, .viz-label {
  position: absolute;
  font-size: var(--fs-small);
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}
.viz-axis-col {
  transform: translateX(-50%);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}
.viz-axis-row {
  transform: translate(-100%, -50%);
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.viz-label {
  font-weight: 400;

  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.25rem 0;
  font-size: var(--fs-small);
  color: #d6d6d6;
}
.legend-swatch {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --------- Story --------- */
#story {
  position: relative;
  z-index: 2;
}

/* ============================================================
   HERO — eine 100vh-Section, kein Scroll. Animation startet
   per Enter/Klick auf "Start". Danach erscheint die Trail-Wahl.
   ============================================================ */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;                 /* clippt die Bühne (Beschnitt wie Frames) */
  background: var(--bg, #0a0c0e);   /* Bereich um die Bühne = schwarze Balken */
}

/* Keine Letterbox-Balken mehr: Das Skalierungsmodell füllt die Höhe IMMER
   exakt aus (S = vh/1440), daher entsteht oben/unten kein Rand. Intro und
   Frames sind randlos gleich hoch. */



/* Zentrierter Design-Block (2560×1440 Design-px, real skaliert via --S).
   ALLE Hero-Inhalte leben hierin und verhalten sich beim Resize 1:1 wie
   ein Frame: schwarze Balken seitlich (breit) bzw. oben/unten (schmal).
   overflow:hidden → Inhalt wird exakt auf den Block beschnitten. */
.hero-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  /* ECHTE Design-Pixel — KEIN * var(--S). Skalierung passiert als EINE
     Transformation über das ganze Element (genau wie ein Frame-SVG). */
  width:  2560px;
  height: 1440px;
  transform: translate(-50%, -50%) scale(var(--S));
  transform-origin: center center;
  overflow: hidden;
}

.hero-title {

  /* Titel links oben, gemäss neuer Skizze. "VERWISCHTE" soll exakt
     2/3 der Viewport-Breite einnehmen → max-width: 66.66vw. Subtitle,
     Hint und H1 leben darin als natürlich gestapelte Block-Elemente,
     damit die vertikalen Abstände konsistent sind. */
  position: absolute;
  top: 8%;               /* % der Bühne (1440 Design-px) */
  /* 200 Design-px = exakt bündig mit allen Fliesstexten (--intro-outro-x,
     TEXT.X, OUTRO.X). Liegt sicher INNERHALB der garantiert sichtbaren Zone
     (max. 120px Beschnitt pro Seite). */
  left: 200px;          /* Design-px der 2560er-Bühne (= Fliesstext-Kante) */


  right: auto;
  text-align: left;
  padding: 0;
  width: 66.66%;
  max-width: 66.66%;
  pointer-events: none;
  z-index: 6;            /* über dem Hintergrund-Banner (z:1) und Wolf (z:5) */

}




/* Viewport ist 100vw breit, clippt nur horizontal die Wrapper-Enden.
   Höhe gross genug für Labels (oben, mehrzeilig bei langen Pfählen)
   + Jahr (unten) der Pfähle. HIER TWEAKEN, wenn die Labels weiter
   nach oben sollen — Linie bleibt visuell auf 50vh, weil der innere
   .hero-timeline ihre Position auf top:50% relativ zur Viewport-Höhe
   hat. */
/* Viewport = volle Hero-Section (100vh, 100vw). Das Hintergrund-Banner
   füllt die ganze Fläche; was rechts über den 480vw-Wrapper hinausgeht,
   wird von overflow:hidden abgeschnitten. */
.hero-timeline-viewport {
  position: absolute;
  inset: 0;
  width: 100%;      /* = Bühne (2560 Design-px) */
  height: 100%;     /* = Bühne (1440 Design-px) */
  overflow: hidden;
}


/* Wrapper-Breite definiert, wie weit sich die Zeitachse seitlich erstreckt.
   Bei 8 Pfählen + Start + Ende = 10 Stops sorgt 480vw für ca. 48vw
   Luft pro Stop — mehr Atemraum als vorher (was 360vw bei 6 Pfählen war).
   HIER TWEAKEN, wenn die Pfähle noch weiter auseinander sollen. */
/* Position der "Bodenkante" (= oberer Rand des schwarzen Bodens im
   Hintergrund-SVG). Linie + Wolf + Pfähle + Pfoten sitzen alle auf
   dieser Höhe. HIER TWEAKEN, falls die Spur nicht exakt auf der
   Bodenkante des Banners liegt (Werte z. B. 56vh / 60vh / 62vh). */
/* Im hero_background_v2.svg (viewBox 9830×1150) beginnt der SCHWARZE
   BODEN (cls-71-Rect) bei y ≈ 862.5, also bei ~75% der Bildhöhe. Da
   das Bild mit height:100vh angezeigt wird, liegt diese Bodenkante
   **immer** bei 75vh, unabhängig von der Viewport-Breite. Linie,
   Wolf, Pfähle und Pfoten teilen sich diesen Anker. Falls die Linie
   noch minimal verschoben wirkt, hier feinjustieren (74.5vh / 75.5vh …). */
:root { --ground-y: 75%; }   /* 75% der Bühne (= 1080 Design-px) */
/* Feinjustage der Intro-Bodenkante (Wurzel-Fix Intro↔Frame-Versatz):
   verschiebt den Hero-Hintergrund vertikal, bis seine gemalte Bodenkante
   EXAKT auf Design-Y 1080 (= --ground-y) liegt — deckungsgleich mit den
   Frames und dem Outro. 0px = keine Korrektur. Negativ = Bild nach oben. */
:root { --hero-bg-shift: 0px; }






.hero-timeline {
  position: absolute;
  top: var(--ground-y);
  left: 0;
  width: 480%;       /* 480% der Bühne (= 12288 Design-px) */
  height: 0;
  will-change: transform;
}


/* .hero-start ist jetzt nur noch eine ID am Hint-Paragraph innerhalb
   von .hero-title — keine eigene Positionierung mehr nötig. Falls JS
   noch darauf referenziert (Display etc.), bleibt das via #hero-start
   funktional. */


/* Choice-Bereich erscheint nach Ende der Hero-Animation: Outro-Text
   ("Heute: …") + Wähle-Überschrift + 2 Buttons NEBENEINANDER, ein wenig
   unter der Timeline platziert. Die Timeline-Viewport endet bei
   ca. 50vh + 100px (top: 50% − 100px, height: 200px). */
.hero-choice {
  /* Outro + h2 + Buttons sitzen alle KLAR OBERHALB des Wolfs.
     Wolf-Top liegt bei ~ground-y − 6vw (Wolfhöhe). Wir lassen den
     Choice-Block ganz oben in der Hero-Section beginnen, mit einem
     Padding, das sicherstellt, dass die Buttons spätestens auf ~50vh
     enden — also deutlich über dem Wolf bei 75vh.

     ====== TWEAK ======
     padding-top (1. Wert in `padding`):
       höher = Buttons weiter UNTEN (näher beim Wolf)
       tiefer = Buttons weiter OBEN
     Empfohlen: 30vh – 42vh. Bei 38vh sitzen die Buttons knapp
     über dem Wolf.
     =================== */
  /* FRAME-LOOK: Zeile, die an der Frame-Textspalte (links) und auf
     Frame-Titel-Höhe (oben) beginnt. Höhe = auto → so hoch wie das
     höchste Kind. align-items:center legt die Mitte der Outro-Spalte
     und die Mitte des Button-Blocks auf dieselbe Linie → Buttons sind
     vertikal mittig zur Outro-Textspalte. Alles via Panel. */
  position: absolute;
  top:  var(--intro-outro-top);     /* Panel — Oberkante = Frame-Titel-Höhe */
  left: var(--intro-outro-x);       /* Panel — linke Kante = Frame-Textspalte */
  display: flex;
  flex-direction: column;           /* Outro oben, Choice-Block direkt darunter */
  align-items: flex-start;          /* alles linksbündig zur Outro-Spalte */
  background: transparent;          /* Kein Overlay — Linie bleibt sichtbar */
  z-index: 10;
}



.hero-choice[hidden] { display: none; }

#hero-start-btn {
  font-family: inherit;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--text);
  color: var(--text);
  padding: 0.8rem 2.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
#hero-start-btn:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
#hero-start-btn[disabled] {
  opacity: 0.3;
  pointer-events: none;
}

.hero-title h1 {
  /* Headline in Söhne Buch (Regular, NICHT halbfett), Versalien,
     zweizeilig. Schriftgrösse so kalibriert, dass "VERWISCHTE" knapp
     UNTER 2/3 vw bleibt — JS misst nachher exakt und passt Subtitle
     und Hint an dessen tatsächliche Breite (bzw. "SPUREN"-Breite) an. */
  font-weight: 400;
  font-size: var(--intro-title-size);   /* Panel */
  line-height: 1.0;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0 0 var(--intro-title-gap) 0;   /* Panel */

}

.hero-subtitle {
  /* Subtitle Versalien, nicht kursiv, BÜNDIG zur Breite von "VERWISCHTE".
     font-size wird per JS gesetzt (siehe main.js → kalibriereHeroTexte),
     Default hier nur als Fallback bis das JS gelaufen ist. */
  display: block;
  white-space: nowrap;
  font-size: 41px;   /* Design-px */
  color: var(--text);

  opacity: 0.85;

  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  margin: 0;
}


.hero-hint {
  /* Hint Versalien, kleiner als Subtitle. BÜNDIG zur Breite von "SPUREN".
     font-size wird per JS gesetzt (siehe main.js → kalibriereHeroTexte). */
  display: block;
  white-space: nowrap;
  margin: var(--intro-hint-gap) 0 0 0;   /* Panel */
  font-size: var(--intro-hint-size);     /* Panel */

  color: var(--text-dim);
  text-transform: uppercase;

  letter-spacing: 0.08em;
  text-align: left;
  animation: pulse 2.4s ease-in-out infinite;
}


@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* Zeitachse Kicker — auf Viewport zentriert, nicht auf 300vw-Wrapper */
.hero-timeline-viewport .kicker {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 2.5rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--fs-small);
  white-space: nowrap;
  z-index: 3;
}
.hero-timeline .kicker { display: none; }
/* Linie und Pfähle leben im 300vw-Wrapper.
   - links 20vw  = Startposition des Wolfes
   - rechts 50vw = "Camera-mid"-Position (Wolf ab Phase 2 dort)
   Damit liegt Pfahl 0 genau unter dem Wolf-Start und Pfahl 1.0
   genau unter dem Wolf, wenn die Kamera ihren Endpunkt erreicht. */
.hero-timeline .timeline-line,
.hero-timeline .timeline-marker-layer,
.hero-timeline .paw-trail-layer {
  position: absolute;
  /* Design-Pixel: 20% bzw. 50% von 2560. (left/right-% wären hier auf die
     480%-breite .hero-timeline bezogen — deshalb explizit in Design-px.) */
  left:  512px;    /* = 20% von 2560 */
  right: 1280px;   /* = 50% von 2560 */
  top: 0;

}

.hero-timeline .timeline-line {
  height: 1px;
  background: #3a3f43;
  /* Linie wird durch das Hintergrund-Banner ohnehin überdeckt; halten
     wir sie als unsichtbaren Anker bei opacity 0. */
  opacity: 0;
}
.hero-timeline .timeline-marker-layer { height: 0; z-index: 4; }
.hero-timeline .paw-trail-layer       { height: 0; z-index: 3; pointer-events: none; }

/* Hintergrund-Banner (Berge + Boden, viewBox 9830×1150).
   Wir wollen, dass die im SVG eingezeichnete BODENKANTE (y≈541, ~47%
   der Bildhöhe) **exakt** auf der Timeline-Linie (= var(--ground-y))
   sitzt. Dafür:
     - height: 100vh, width:auto → natürliches Seitenverhältnis,
       die Bodenkante ist immer bei 47% der Bildhöhe = 47vh in Pixel.
     - top: -47vh innerhalb des Wrappers (Wrapper top = ground-y).
       Damit liegt 47vh unter dem Bildoberkante = wrapper-top = Linie.
   Das Bild ist mit ~855vh breit (≈ 481vw bei 16:9), läuft also rechts
   über den 480vw-Wrapper hinaus. Was über den 100vw-Viewport hinaus-
   ragt, wird durch overflow:hidden des Viewports abgeschnitten. */
.hero-timeline .hero-background-img {
  position: absolute;
  left: 0;
  /* Bildoberkante = Wrapper-Top minus 75vh. Damit liegt 75vh
     unterhalb der Bildoberkante = der SCHWARZE BODEN (cls-71, y≈862.5
     in viewBox 9830×1150) exakt auf Wrapper-Top = Timeline-Linie. */
  /* -1080 Design-px (= -75% der Bühnenhöhe) + Feinjustage --hero-bg-shift,
     damit die gemalte Bodenkante exakt auf Design-Y 1080 sitzt (= Frames/Outro). */
  top: calc(-1080px + var(--hero-bg-shift));


  width: auto;
  height: 1440px; /* = volle Bühnenhöhe (Design-px) */

  pointer-events: none;

  user-select: none;
  z-index: 1;
}



/* Wolf: jetzt als SVG-Bild statt als Punkt. Visuell fix bei 20% vw. */
.hero-timeline-viewport .timeline-wolf {
  position: absolute;
  top: var(--ground-y);
  left: 20%;                       /* 20% der Bühnenbreite (Viewport = Bühne) */
  width: 140px;                    /* Wolfsbreite in Design-px */
  height: auto;


  /* Wolf "steht" auf der Linie: Bottom-Kante des SVG = Linie.
     +8px schiebt den Wolf leicht nach unten, damit die Hinterpfote
     auf der Bodenkante aufsetzt (transparenter Padding-Raum unten
     im SVG wird so ausgeglichen). */
  transform: translate(-50%, calc(-100% + 8px));


  z-index: 5;
  pointer-events: none;
}

.hero-timeline-viewport .timeline-wolf img {
  display: block;
  width: 100%;
  height: auto;
  /* Kein drop-shadow: der weiche Schein wirkte bei der Bewegung wie
     ein „Motion Blur". Wolf bleibt jetzt scharf. */
}


/* Pfoten-Spuren (Trail hinter dem Wolf). Jede Pfote wird per JS in
   .paw-trail-layer eingefügt und fadet selbständig aus. */
.paw-trail-layer .paw {
  /* ====== TWEAK ======
     Hinweis: Die effektive Y-Position der Pfote wird IM JS
     (scenes.js → playHeroTimeline → spawnPaw) gesetzt — siehe
     dort PAW_DROP_Y_PX / PAW_WALK_SWING. Dieses `top: 0` ist
     nur der Anker (Bodenkante), der JS-Wert wird draufgerechnet.
     Wenn Pfoten generell tiefer/höher liegen sollen, dort
     PAW_DROP_Y_PX anpassen, nicht hier.
     =================== */
  position: absolute;
  top: 0;                     /* Linie = Boden (Anker; JS überschreibt y) */
  width: 9px;
  height: 9px;
  /* Oberkante der Pfote sitzt auf der Bodenkante (Linie):
     translateX zentriert, Y bleibt 0 → Pfote ragt nur nach unten. */
  transform: translateX(-50%);

  background: url("SVG_Startview/spur.svg") center/contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
/* Permanente Pfote unter dem Pfahl (bleibt nach dem Verblassen der
   Trail-Spuren sichtbar — fungiert als visueller Fusspunkt des
   vertikalen Strichs hoch zum Label). */
.timeline-marker .tm-paw {
  position: absolute;
  left: 50%;
  top: 0;
  width: 11px;
  height: 11px;
  /* Oberkante auf der Bodenkante, ragt nach unten. */
  transform: translateX(-50%);
  background: url("SVG_Startview/spur.svg") center/contain no-repeat;
  opacity: 0;
  pointer-events: none;
}

/* Feiner weisser Strich vom Boden (Pfoten-Position) hoch zum Label.
   Wächst per GSAP von scaleY 0 → 1, sobald der Wolf den Pfahl passiert. */
.timeline-marker .tm-line-up {
  position: absolute;
  left: 50%;
  bottom: 50%;                /* startet bei der Linie */
  width: 1px;
  height: 80px;               /* HIER TWEAKEN: Strichlänge nach oben */
  background: rgba(255,255,255,0.65);
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
}


/* Pfähle (Marker) */
.timeline-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.timeline-marker .tm-strich {
  width: 1px;
  height: 28px;
  background: var(--text);
  opacity: 0.7;
  margin: -14px auto 0 auto;
}
.timeline-marker .tm-label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Label hängt am OBEREN Ende der weissen Up-Linie (80px hoch);
     plus etwas Luft. Falls die Up-Linie länger/kürzer wird, hier
     mitziehen oder via CSS-Variable koppeln.
     Panel: --intro-marker-top-offset verschiebt Label+Desc gemeinsam. */
  margin-bottom: calc(80px + 0.6rem + var(--intro-marker-top-offset));


  font-size: var(--intro-marker-label-size);   /* Panel */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  white-space: normal;
  width: max-content;           /* statt nur max-width */         

  max-width: 60rem;             /* /* hier breite tweaken: zwingt Umbruch */
  text-align: center;          
  line-height: 1.25;
}

.timeline-marker .tm-desc {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* desc sitzt oberhalb des Labels: Up-Linie + Label-Zeile + Luft.
     Panel: --intro-marker-top-offset verschiebt Label+Desc gemeinsam. */
  margin-bottom: calc(80px + 0.6rem + 1.4em + 0.6rem + var(--intro-marker-top-offset));


  font-size: var(--intro-marker-desc-size);   /* Panel */
  color: var(--text-dim);
  white-space: normal;
  width: max-content;

  max-width: 60rem;             /* hier breite tweaken */
  text-align: center;
  line-height: 1.3;
}

.timeline-marker .tm-jahr {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* Mehr Luft zwischen Pfoten-Markierung am Boden und der Jahreszahl.
     Panel: --intro-marker-year-offset verschiebt das Jahr runter/rauf. */
  margin-top: calc(1.4rem + var(--intro-marker-year-offset));

  font-size: var(--intro-marker-year-size);   /* Panel */

  font-weight: 400;
  text-transform: uppercase;         /* Jahr in Versalien */

  color: var(--text-dim);
  white-space: normal;   
  width: max-content;     
  max-width: 60rem;             /* hier breite tweaken */ 
  text-align: center;           
  line-height: 1.25;            /* damit Umbrüche sauber aussehen */
}


/* Outro erscheint am Timeline-Ende ÜBER dem Wolf-Punkt
   (zwischen Hero-Title und Timeline-Viewport). HIER TWEAKEN,
   wenn der Text höher oder tiefer sitzen soll. */
/* OUTRO = linke Textspalte im Frame-Look. Erstes Flex-Kind von
   .hero-choice → definiert die Zeilenhöhe, an deren Mitte die Buttons
   (zweites Kind) per align-items:center ausgerichtet werden. */
.hero-end-outro {
  position: static;
  flex: 0 0 auto;
  width: var(--intro-outro-width);          /* Panel — Zeilenlänge */
  margin: 0;

  font-size: var(--intro-outro-size);       /* Panel */
  line-height: var(--intro-outro-lh);       /* Panel */
  color: var(--text);
  text-align: left;                          /* Frame-Look: linksbündig */
  pointer-events: none;
}

.hero-end-outro p { margin: 0 0 .8em; }
.hero-end-outro p:last-child { margin-bottom: 0; }
.hero-end-outro[hidden] { display: none; }

/* BUTTON-BLOCK rechts (Überschrift + gestapelte Buttons). margin-left
   setzt seine LINKE Kante exakt auf --intro-btn-x (= btn-x − outro-x −
   outro-width, da der Block hinter der Outro-Spalte in der Flex-Zeile
   beginnt). So bleibt --intro-btn-x die „echte" linke Pixelposition. */
.hero-choice-actions {
  flex: 0 0 auto;
  margin-left: 0;                            /* direkt unter dem Outro, linksbündig */
  margin-top: calc(var(--intro-outro-size) * 1.6); /* Abstand Outro ↔ „Wähle deinen Einstieg" */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--intro-choice-title-gap);        /* Panel — Überschrift ↔ Buttons */
  width: var(--intro-outro-width);           /* = Outro-Breite (Buttons spannen genau darüber) */
  pointer-events: auto;
}


.hero-choice-actions h2 {
  font-size: var(--intro-outro-size);   /* = Outro-Lauftextgrösse */
  text-transform: uppercase;       /* „Wähle deinen Einstieg" in Versalien */
  letter-spacing: 0.14em;
  color: var(--text);              /* Off-White (wie der Outro-Text) */
  margin: 0;                       /* Abstand kommt aus dem Flex-gap */
}

/* Buttons NEBENEINANDER (horizontal), beide zusammen = Outro-Breite. */
.hero-choice-actions .choice-buttons {
  flex-direction: row;
  align-items: stretch;                      /* beide Buttons gleich hoch */

  width: var(--intro-outro-width);           /* = Outro-Breite (beide Buttons darüber) */
  max-width: none;
  gap: var(--intro-btn-gap);                 /* Panel — horizontaler Abstand */
  margin-top: 0;
}

/* Variante A — schlanker Button MIT Hintergrund (als Button erkennbar).
   Label (Off-White, Versalien) + kurze Beschreibung (dim), dezenter
   Hintergrund + 1px-Rahmen, Hover hellt auf. Je ~50 % nebeneinander. */
.hero-choice-actions .choice-buttons button {
  flex: 1 1 0;                               /* je ~50 % (gleichmäßig nebeneinander) */
  width: auto;
  min-width: 0;                              /* erlaubt Schrumpfen, kein Overflow */
  /* Label OBEN, Beschreibung DARUNTER (überschreibt das geerbte Grid
     auto 1fr, das beide nebeneinander legte). */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a2f33;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
  font-size: var(--intro-btn-text-size);     /* Panel */
  transition: background 0.2s, border-color 0.2s;
}

.hero-choice-actions .choice-buttons button:hover {
  background: rgba(255,255,255,0.08);
  border-color: #4a5055;
}
.hero-choice-actions .choice-buttons button .num {
  font-size: var(--intro-btn-text-size);     /* gleich gross wie Label, nicht überdimensional */
  color: var(--text-dim);
  align-self: start;
}
.hero-choice-actions .choice-buttons button .label {

  color: var(--text);                        /* Off-White */
  font-size: var(--intro-btn-text-size);     /* Panel */
}
.hero-choice-actions .choice-buttons button .desc {
  color: var(--text-dim);
  font-size: var(--intro-btn-text-size);     /* Panel */
  margin-top: 0.25em;
}





/* ============================================================
   STORY-STEPS
   Text links, Hauptviz rechts (Karte/Bubbles auf Sticky Stage).
   ============================================================ */
.step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;     /* Text links */
  padding: 4rem 4vw 4rem 6vw;
  pointer-events: none;
}

.step-inner {
  max-width: clamp(20rem, 28vw, 32rem);
  background: rgba(10, 12, 14, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 1.5rem 1.6rem;
  border-radius: 4px;
  pointer-events: auto;
}

.kicker {
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  margin-bottom: 0.8rem;
}

.step h2 {
  font-weight: 400;

  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  margin-bottom: 0.8rem;
}

.step p {
  font-size: var(--fs-body);
  line-height: 1.55;
}
.step p + p { margin-top: 0.8rem; }
.step .quellen {
  margin-top: 1.4rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
/* Fazit-Frage als hervorgehobener Schlussakzent */
.step .fazit-frage {
  margin-top: 1.4rem;
  font-size: clamp(1.15rem, 1.2vw + 0.6rem, 1.6rem);
  line-height: 1.4;
  color: var(--text);
}

/* --------- Trail Choice / End buttons --------- */
.choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1rem;
  width: clamp(20rem, 28vw, 32rem);
}
.choice-buttons button {
  pointer-events: auto;
  cursor: pointer;
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a2f33;
  color: var(--text);
  padding: 0.9rem 1rem;
  font-family: inherit;
  font-size: var(--fs-body);
  border-radius: 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  transition: background 0.2s, border-color 0.2s;
}
.choice-buttons button:hover {
  background: rgba(255,255,255,0.08);
  border-color: #4a5055;
}
.choice-buttons button .num {
  grid-row: 1 / 3;
  font-size: 1.6rem;
  font-weight: 400;

  color: var(--text-dim);
  align-self: center;
}
.choice-buttons button .label {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--fs-small);
}

.choice-buttons button .desc {
  color: var(--text-dim);
  font-size: var(--fs-small);
}
.choice-buttons.small {
  width: 100%;            /* nicht über die Textbox hinaus */
  max-width: 100%;
}
.choice-buttons.small button {
  display: block;
  width: 100%;
  grid-template-columns: none;
  grid-template-rows: none;
  font-size: var(--fs-small);
  padding: 0.7rem 1rem;
}

/* --------- Trail / Fazit Sichtbarkeit --------- */
.hero               { display: block; }
.hero.hidden        { display: none;  }
.trail              { display: block; }
.trail.hidden       { display: none;  }
[data-scene="fazit"].hidden { display: none; }

/* Body-Lock während Hero / während Auto-Scroll --------- */
body.locked   { overflow: hidden; }
body.scrolling { pointer-events: none; }
body.scrolling .choice-buttons button,
body.scrolling #hero-start-btn { pointer-events: auto; }

/* --------- Map / Bubbles --------- */
.land {
  fill: var(--map-fill);
  stroke: var(--map-stroke);
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
  transition: fill 0.6s ease;
}
.land.ch { fill: #1a2024; }

.wolf-area { stroke: none; opacity: 0.85; }
.wolf-area.refugia            { fill: var(--bubble-3); }
.wolf-area.alpine             { fill: var(--pop-alpine); }
.wolf-area.baltic             { fill: var(--pop-baltic); }
.wolf-area.carpathian         { fill: var(--pop-carpathian); }
.wolf-area.central-european   { fill: var(--pop-central-european); }
.wolf-area.dinaric-balkan     { fill: var(--pop-dinaric-balkan); }
.wolf-area.italian-peninsula  { fill: var(--pop-italian-peninsula); }
.wolf-area.karelian           { fill: var(--pop-karelian); }
.wolf-area.iberian            { fill: var(--pop-iberian); }
.wolf-area.scandinavian       { fill: var(--pop-scandinavian); }

.kanton {
  fill: var(--map-fill);
  stroke: var(--map-stroke);
  stroke-width: 0.4px;
  vector-effect: non-scaling-stroke;
}
.kanton-outline {
  fill: none;
  stroke: var(--text);
  stroke-width: 0.9px;
  stroke-opacity: 0.6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* ============================================================
   Shift + T: Step-Texte global ein-/ausblenden.
   Wirkt nur auf die scrollenden Step-Texte (.step-inner).
   Legende, Annotations, Tooltips, Hero-Titel und Trail-Overlay
   bleiben sichtbar.
   ============================================================ */
.step-inner { transition: opacity 0.25s ease; }
body.steptext-hidden .step-inner {
  opacity: 0;
  pointer-events: none;
}