/* Zeitreise „Wandel der Zeit" — /wandel-der-zeit + /en/wandel-der-zeit
   ====================================================================

   Nur auf dieser Route geladen (templates/wandel_der_zeit.html, Block extra_css),
   NICHT in style.css: die Seite bringt 6 zusaetzliche Schriftfamilien mit, die
   sonst jede andere Seite mitschleppen wuerde.

   Herkunft: Uebersetzung der 280 style="…"-Attribute aus dem Fable-Export
   (docs/wandel-der-zeit/stations/*.html) in echte Klassen — die Seite laeuft unter
   strikter CSP ohne 'unsafe-inline', Inline-Styles waeren wirkungslos.
   Farb-/Groessenwerte stammen 1:1 aus dem Export; wo bewusst abgewichen wird,
   steht der Grund als Kommentar daneben.

   ---------------------------------------------------------------------------
   MARKUP-VERTRAG (verbindlich fuer templates/wandel_der_zeit.html, Task 6)
   ---------------------------------------------------------------------------
   Jede Station hat ihr eigenes Layout — kein generischer {% for %}-Rundumschlag.
   Gemeinsam ist allen der Rahmen; die Varianten stehen unten je Station.

     <section id="station-N" class="zr-station zr-station--N" data-zr="N">
       <div class="zr-inner">
         <p class="zr-eyebrow">…</p>

         {# Kopfzone, Variante A (St. 1, 4, 6, 8, 9): Text links, Bild rechts #}
         <div class="zr-head">
           <div>
             <h2 class="zr-h2">… <span class="zr-accent">…</span></h2>
             <p class="zr-sub">…</p>
           </div>
           <svg class="zr-icon zr-icon--float" viewBox="0 0 190 190" role="img"
                aria-label="…">…</svg>
         </div>

         {# Kopfzone, Variante B (St. 2, 3, 5, 7): zentriert #}
         <div class="zr-head-center">…</div>

         <div class="zr-flow">                      {# Absatzfolge #}
           <div class="zr-entry"><h3>…</h3><p>…</p></div>
         </div>
         <div class="zr-cards">                     {# oder: Kartenraster #}
           <div class="zr-card"><h3>…</h3><p>…</p></div>
         </div>

         <div class="zr-callout">
           <p class="zr-callout-title">…</p><p>…</p>
         </div>

         <details class="zr-quellen">
           <summary>{{ station.quellen_summary }}</summary>
           <ul>{% for q in station.quellen %}<li>{{ _a(q.key, q.label) }}</li>{% endfor %}</ul>
         </details>
       </div>
     </section>

   Drei Punkte, an denen der Export nicht 1:1 uebernommen werden darf:

   1. `sc-camel-view-box` -> `viewBox`. Der Exporter zerlegt camelCase-Attribute;
      im doc.html steht 9x `sc-camel-view-box` und 0x echtes `viewBox`. Wer das
      uebersieht, bekommt 9 nicht skalierende, beschnittene Illustrationen — sieht
      aus wie ein CSS-Bug, ist ein Attribut-Bug.
   2. SVG-Praesentationsattribute (fill, stroke, d, opacity, transform) bleiben
      Attribute und duerfen stehen. Die vier `style="filter:drop-shadow(…)"` in
      Station 6 sind KEINE Praesentationsattribute — dafuer gibt es unten
      .zr-neon-*-Klassen. Nach dem Bau muss gelten:
      `grep -n 'style="' templates/wandel_der_zeit.html` -> leer.
   3. Station 4 hat vor einem Absatz eine gross gesetzte Zahl („151 Liter"),
      im Export `<span …>151 Liter</span><br>`. Hier: `<span class="zr-stat">`,
      ohne `<br>` — die Klasse ist display:block.

   Zustaende, die static/js/wandel-der-zeit.js (Task 5) setzt:
     .zr-rail-item.is-active   aktive Station (zusaetzlich aria-current="true")
     .zr-glass-fill  style.height = "<0..100>%"  Fuellstand des Bierglases
     .zr-count-value textContent = formatierte Zahl (Sprache durchreichen!)
   CSSOM-Zuweisungen aus JS (el.style.height = …) sind CSP-konform; nur
   style="…"-Attribute im ausgelieferten HTML sind es nicht.
   Was das JS dafuer im Markup braucht — data-zr-start/-end auf .zr-count-value,
   href="#station-N" auf .zr-rail-item, `defer` am <script> — steht im Kopf von
   static/js/wandel-der-zeit.js. Beide Vertraege gelten fuer Task 6.

   Farbtokens (--terra, --cream, --serif, --sans …) kommen aus style.css, die
   vor dieser Datei geladen wird.
*/

/* ------------------------------------------------------------------ Schriften
   Je Epoche eine eigene Ueberschriften-Schrift, alle selbst gehostet.
   Herkunft, Versionen und Lizenzen: static/fonts/SCHRIFTLIZENZEN.txt
   (Special Elite steht unter Apache 2.0, nicht unter der OFL).
   Bitter + Work Sans deklariert bereits style.css. */

@font-face {
  font-family: "UnifrakturMaguntia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/unifrakturmaguntia-latin-regular.woff2") format("woff2");
}

/* Variable Font: eine Datei deckt 400–700 ab (siehe SCHRIFTLIZENZEN.txt).
   Kein zweiter @font-face je Gewicht — das laedt nur dieselben Bytes doppelt. */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/playfair-display-latin-wght.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/playfair-display-latin-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Righteous";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/righteous-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/special-elite-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Limelight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/limelight-latin-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Monoton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/monoton-latin-regular.woff2") format("woff2");
}

/* ------------------------------------------------------------------- Tokens */

.zr-station,
.zr-hero,
.zr-cta {
  --zr-fraktur: "UnifrakturMaguntia", Georgia, serif;
  --zr-playfair: "Playfair Display", Georgia, serif;
  --zr-limelight: "Limelight", Georgia, serif;
  --zr-righteous: "Righteous", system-ui, sans-serif;
  --zr-elite: "Special Elite", "Courier New", monospace;
  --zr-monoton: "Monoton", cursive;
}

/* ------------------------------------------------------------------ Bewegung */

@keyframes zrBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes zrFlicker {
  0%,
  18%,
  22%,
  62%,
  64%,
  100% {
    opacity: 1;
  }
  19%,
  21%,
  63% {
    opacity: 0.4;
  }
}

@keyframes zrFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ---------------------------------------------------------- Zeitstrahl-Rail
   Fixe Sprungmarken-Leiste rechts. Ausgeblendet, sobald sie dem Fliesstext zu
   nahe kaeme — siehe Rechnung ganz unten bei „Schmale Viewports". */

.zr-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40; /* unter der Kopfzeile (z-index 50 in style.css) */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* Fortschritts-Bierglas */
.zr-glass {
  position: relative;
  width: 20px;
  height: 28px;
  border: 2px solid var(--muted);
  border-top: none;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  background: rgba(245, 237, 227, 0.85);
  margin-right: -4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Hoehe setzt das JS (el.style.height = "42.0%"). Ohne JS bleibt das Glas leer —
   die Leiste funktioniert als reine Sprungmarken-Liste weiter. */
.zr-glass-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--peach);
}

.zr-rail-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

/* Senkrechte Linie hinter den Punkten */
.zr-rail-list::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  right: 6px;
  width: 2px;
  background: linear-gradient(
    180deg,
    rgba(107, 96, 88, 0.25),
    rgba(107, 96, 88, 0.75),
    rgba(107, 96, 88, 0.25)
  );
  border-radius: 2px;
}

.zr-rail-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  padding: 1px 0;
}

/* Jahres-Pille — immer sichtbar */
.zr-year {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  transition: all 0.25s;
  background: rgba(35, 32, 29, 0.62);
  color: rgba(245, 237, 227, 0.92);
}

.zr-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  transition: all 0.25s;
  background: var(--cream);
  border: 2px solid var(--muted);
}

.zr-rail-item:hover .zr-dot {
  background: var(--peach);
}

.zr-rail-item.is-active .zr-year {
  background: var(--terra);
  color: #fff6ec;
}

.zr-rail-item.is-active .zr-dot {
  background: var(--terra);
  border-color: var(--terra);
  box-shadow: 0 0 0 4px rgba(181, 74, 43, 0.3);
}

/* Aufklapp-Karte mit Stationsnummer + Titel.
   Der Export kennt nur mouseenter/mouseleave; Tastaturnutzer sehen die Karte
   dort nie. :focus-visible ist hier gleichberechtigt — die QA-Checkliste des
   Projekts verlangt sichtbare Fokuszustaende. */
.zr-chip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--dark);
  border: 1px solid rgba(224, 137, 79, 0.5);
  border-radius: 5px;
  padding: 8px 12px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

.zr-rail-item:hover .zr-chip,
.zr-rail-item:focus-visible .zr-chip {
  opacity: 1;
}

.zr-rail-item:focus-visible {
  outline: 2px solid var(--peach);
  outline-offset: 3px;
  border-radius: 3px;
}

.zr-chip-nr {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--peach);
  font-weight: 600;
  white-space: nowrap;
}

.zr-chip-title {
  display: block;
  margin-top: 2px;
  font-family: var(--serif);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
}

/* --------------------------------------------------------------------- Hero */

.zr-hero {
  position: relative;
  overflow: hidden; /* faengt den Lichtschein ab — sonst laeuft die Seite quer */
  background: var(--dark);
  /* Export: 150px oben, dort lag die Kopfzeile absolut ueber dem Hero.
     Hier traegt die sticky Kopfzeile (62px) eigene Hoehe bei. */
  padding: 96px 24px 90px;
  text-align: center;
}

.zr-hero-glow {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: 820px;
  height: 560px;
  background: radial-gradient(
    closest-side,
    rgba(181, 74, 43, 0.38),
    rgba(181, 74, 43, 0) 70%
  );
  pointer-events: none;
}

.zr-hero-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}

.zr-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  border: 1px solid rgba(245, 237, 227, 0.25);
  border-radius: 999px;
  color: #e9d9c5;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zr-hero h1 {
  margin-top: 30px;
  font-family: var(--serif);
  font-size: clamp(38px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #f7f0e6;
}

.zr-hero h1 .zr-accent {
  color: var(--peach);
  font-style: italic;
  font-weight: 400;
}

.zr-hero-sub {
  margin: 24px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--light);
  max-width: 620px;
}

.zr-hero-scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 44px;
  color: rgba(245, 237, 227, 0.7);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zr-hero-scroll:hover {
  color: var(--peach);
}

.zr-hero-scroll span {
  font-size: 22px;
  animation: zrBounce 1.8s ease-in-out infinite;
}

/* --------------------------------------------------- Stationen — Grundgeruest
   Farben je Station stehen weiter unten als Variablen; hier nur, was alle neun
   teilen. Grundregeln bewusst flach halten (0,1,x / 0,2,x) — keine :not()-Ketten,
   sonst schlagen sie spaetere Sonderformen (Playbook „Die Spezifitaetsfalle"). */

.zr-station {
  background: var(--zr-bg);
  border-top: 8px solid var(--zr-accent);
  padding: 92px 24px;
  /* Sprungmarken aus der Rail landen sonst unter der sticky Kopfzeile */
  scroll-margin-top: calc(var(--header-h) + 8px);
}

.zr-inner {
  max-width: 1020px;
  margin: 0 auto;
}

.zr-eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zr-eyebrow, var(--zr-accent));
  font-weight: 600;
}

/* Kopfzone A: Text links, Illustration rechts */
.zr-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
  margin-top: 14px;
}

/* Kopfzone B: zentrierter Block */
.zr-head-center {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.zr-h2 {
  color: var(--zr-h2);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.15;
  font-weight: 400;
}

.zr-sub {
  margin-top: 16px;
  font-size: 17.5px;
  line-height: 1.6;
  font-style: italic;
  color: var(--zr-sub);
}

/* Illustrationen. Groesse hier, damit im Markup kein style= noetig ist;
   viewBox bleibt Attribut (und muss aus sc-camel-view-box zurueckbenannt werden). */
.zr-icon {
  width: 170px;
  height: 170px;
  flex: none;
}

.zr-icon--float {
  animation: zrFloat 6s ease-in-out infinite;
}

/* Absatzfolge */
.zr-flow {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* Auf den Stationen 1, 2, 3, 7 und 9 stehen Kasten und Quellenverzeichnis INNERHALB
   der Absatzfolge — dort setzt der Spaltenabstand die Luft, ein zusaetzliches
   margin-top wuerde sie verdoppeln. Auf 4, 5, 6 und 8 stehen beide daneben und
   behalten ihre 22px. */
.zr-flow > .zr-callout,
.zr-flow > .zr-quellen {
  margin-top: 0;
}

.zr-entry h3 {
  font-size: 21px;
  font-weight: 700;
  color: var(--zr-h3);
}

.zr-entry p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.68;
  color: var(--zr-text);
}

/* Kartenraster */
.zr-cards {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.zr-card h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--zr-h3);
}

.zr-card p {
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--zr-text);
}

/* „Schon gewusst?"-Kasten */
.zr-callout {
  margin-top: 22px;
  padding: 22px 26px;
  background: var(--zr-callout-bg);
}

.zr-callout-title {
  color: var(--zr-callout-title);
}

.zr-callout p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--zr-callout-text, var(--zr-text));
}

/* Quellenverzeichnis je Station */
.zr-quellen {
  margin-top: 22px;
  border-top: 1px solid var(--zr-rule);
  padding-top: 14px;
}

/* Der Aufklapper traegt die Eyebrow-Farbe, nicht die Akzentfarbe: auf Station 2
   (#8A6A3B statt Tiefbraun) und Station 6 (Cyan statt Pink) sind das zwei
   verschiedene Toene, auf den uebrigen sieben derselbe. */
.zr-quellen summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--zr-eyebrow, var(--zr-accent));
  font-weight: 600;
}

.zr-quellen summary::-webkit-details-marker {
  display: none;
}

.zr-quellen summary:focus-visible {
  outline: 2px solid var(--zr-eyebrow, var(--zr-accent));
  outline-offset: 3px;
}

.zr-quellen ul {
  margin: 12px 0 0;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--zr-quellen);
}

/* .src aus style.css setzt color:inherit — auf den dunklen Stationen waere das
   unlesbar. Diese Regel (0,2,0) sticht die Grundregel (0,1,0) sauber aus. */
.zr-quellen .src {
  color: var(--zr-link);
  text-decoration-color: var(--zr-link);
}

.zr-quellen .src:hover {
  color: var(--zr-link-hover, var(--zr-link));
  text-decoration-color: var(--zr-link-hover, var(--zr-link));
}

/* ------------------------------------------- Station 1 · Antike bis Mittelalter
   Layout text-icon-flow: Text links, roemische Theke rechts, darunter drei
   Absaetze an Trennlinien. Einzige Station mit Initiale. */

.zr-station--1 {
  --zr-bg: #efe0bd;
  --zr-accent: #8c2f1b;
  --zr-h2: #3a2c18;
  --zr-h3: #3a2c18;
  --zr-text: #4a3a24;
  --zr-sub: #5c4326;
  --zr-quellen: #5c4326;
  --zr-rule: rgba(58, 44, 24, 0.3);
  --zr-link: var(--terra);
  --zr-link-hover: #8c2f1b;
  --zr-callout-bg: #e8d6aa;
  --zr-callout-title: #8c2f1b;
}

.zr-station--1 .zr-head {
  align-items: start;
  margin-top: 16px;
}

.zr-station--1 .zr-h2 {
  font-family: var(--zr-fraktur);
}

.zr-station--1 .zr-sub {
  margin-top: 18px;
  font-family: var(--zr-playfair);
  font-size: 18.5px;
}

.zr-station--1 .zr-flow {
  max-width: 760px;
}

.zr-station--1 .zr-entry {
  border-top: 2px solid var(--zr-accent);
  padding-top: 18px;
}

.zr-station--1 .zr-entry h3 {
  font-family: var(--zr-playfair);
}

.zr-dropcap {
  font-family: var(--zr-fraktur);
  font-size: 34px;
  color: #8c2f1b;
  font-weight: 400;
  padding-right: 6px;
  float: left;
  line-height: 0.9;
}

.zr-station--1 .zr-callout {
  border: 3px double var(--zr-accent);
}

.zr-station--1 .zr-callout-title {
  font-family: var(--zr-fraktur);
  font-size: 22px;
}

/* --------------------------------------------- Station 2 · Geburt der Eckkneipe
   Layout centered-icon-text-ornament: zentrierter Kopf mit Zierlinie und „❦",
   darunter Gaslaterne links, Absaetze rechts.
   Hinweis: „❦" (U+2766) steckt in keinem latin-Subset und faellt auf Georgia
   zurueck — im Original-Export genauso, kein Fehler. */

.zr-station--2 {
  --zr-bg: #f3e8d2;
  --zr-accent: #2b2118;
  --zr-eyebrow: #8a6a3b;
  --zr-h2: #2b2118;
  --zr-h3: #2b2118;
  --zr-text: #4a3a24;
  --zr-sub: #6b5638;
  --zr-quellen: #6b5638;
  --zr-rule: rgba(43, 33, 24, 0.3);
  --zr-link: var(--terra);
  --zr-link-hover: #8a6a3b;
  --zr-callout-bg: #ede0c2;
  --zr-callout-title: #8a6a3b;
}

.zr-station--2 .zr-h2 {
  margin-top: 18px;
  font-family: var(--zr-playfair);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.1;
  font-weight: 700;
}

.zr-station--2 .zr-sub {
  font-family: var(--zr-playfair);
  font-size: 18.5px;
}

/* Zierlinie unter dem Eyebrow */
.zr-rule-double {
  margin: 14px auto 0;
  width: 90px;
  height: 5px;
  border-top: 1px solid #2b2118;
  border-bottom: 3px double #2b2118;
}

.zr-ornament {
  margin-top: 14px;
  font-family: var(--zr-playfair);
  font-size: 22px;
  color: #8a6a3b;
}

/* Zweispalter: Illustration links, Text rechts */
.zr-split {
  margin-top: 44px;
  display: grid;
  gap: 40px;
  align-items: start;
}

.zr-split--icon-left {
  grid-template-columns: auto 1fr;
}

.zr-split--icon-right {
  grid-template-columns: 1fr auto;
}

.zr-split .zr-flow {
  margin-top: 0;
}

.zr-station--2 .zr-icon--float {
  animation-duration: 7s;
}

.zr-station--2 .zr-entry {
  position: relative;
  border-top: 1px solid var(--zr-accent);
  padding-top: 18px;
}

/* Kurzer fetter Anstrich auf der Trennlinie */
.zr-station--2 .zr-entry::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 44px;
  border-top: 3px solid var(--zr-accent);
}

.zr-station--2 .zr-entry h3 {
  font-family: var(--zr-playfair);
}

.zr-station--2 .zr-callout {
  border: 1px solid var(--zr-accent);
  outline: 1px solid var(--zr-accent);
  outline-offset: 3px;
}

.zr-station--2 .zr-callout-title {
  font-family: var(--zr-playfair);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
}

.zr-station--2 .zr-callout p {
  margin-top: 10px;
}

/* ------------------------------------------ Station 3 · Destillen und Ballhaeuser
   Layout centered-boxed-icon, DUNKEL: zentrierter Kopf mit Rauten-Trenner,
   darunter umrandete Absatzkaesten links, Sektglas rechts. */

.zr-station--3 {
  --zr-bg: #14110c;
  --zr-accent: #c9a227;
  --zr-h2: #e9d9a8;
  --zr-h3: #e9d9a8;
  --zr-text: rgba(240, 228, 190, 0.82);
  --zr-sub: rgba(233, 217, 168, 0.75);
  --zr-quellen: rgba(233, 217, 168, 0.7);
  --zr-rule: rgba(201, 162, 39, 0.35);
  --zr-link: #c9a227;
  --zr-link-hover: #e9d9a8;
  --zr-box-border: rgba(201, 162, 39, 0.5);
  --zr-callout-bg: rgba(201, 162, 39, 0.1);
  --zr-callout-title: #c9a227;
}

.zr-station--3 .zr-head-center,
.zr-station--7 .zr-head-center {
  max-width: 780px;
}

.zr-station--3 .zr-eyebrow {
  letter-spacing: 0.2em;
}

.zr-station--3 .zr-h2 {
  margin-top: 20px;
  font-family: var(--zr-limelight);
  font-size: clamp(30px, 4vw, 48px);
}

.zr-station--3 .zr-sub {
  font-family: var(--zr-playfair);
  font-size: 18px;
}

/* Rauten-Trenner: Linie · Quadrat auf der Spitze · Linie */
.zr-diamond {
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.zr-diamond::before,
.zr-diamond::after {
  content: "";
  width: 60px;
  border-top: 1px solid var(--zr-accent);
}

.zr-diamond span {
  width: 8px;
  height: 8px;
  background: var(--zr-accent);
  transform: rotate(45deg);
}

.zr-station--3 .zr-icon--float {
  animation-duration: 6.5s;
}

.zr-station--3 .zr-flow {
  gap: 24px;
}

/* Absaetze stehen hier in Kaesten statt an Trennlinien */
.zr-station--3 .zr-entry,
.zr-station--7 .zr-entry {
  border: 1px solid var(--zr-box-border);
  padding: 24px 28px;
}

.zr-station--3 .zr-entry h3 {
  font-family: var(--zr-playfair);
}

.zr-station--3 .zr-callout {
  border: 1px solid var(--zr-accent);
}

.zr-station--3 .zr-callout-title {
  font-family: var(--zr-limelight);
  font-size: 17px;
}

/* --------------------------------------------- Station 4 · Wirtschaftswunder
   Layout text-icon-cardgrid: Roehrenfernseher rechts, darunter drei runde
   Karten, dann ein oranger Vollton-Kasten. */

.zr-station--4 {
  --zr-bg: #f6e3bd;
  --zr-accent: #d97b29;
  --zr-h2: #5c4326;
  --zr-h3: #5c4326;
  --zr-text: #6b5638;
  --zr-sub: #7a5a33;
  --zr-quellen: #7a5a33;
  --zr-rule: rgba(92, 67, 38, 0.3);
  --zr-link: var(--terra);
  --zr-link-hover: #d97b29;
  --zr-callout-bg: #d97b29;
  --zr-callout-text: #fff6e4;
  --zr-callout-title: #fff6e4;
}

.zr-station--4 .zr-eyebrow {
  font-weight: 700;
}

.zr-station--4 .zr-h2 {
  font-family: var(--zr-righteous);
  line-height: 1.12;
}

.zr-station--4 .zr-h2 .zr-accent {
  color: var(--zr-accent);
}

.zr-station--4 .zr-sub {
  font-size: 18px;
}

.zr-station--4 .zr-card {
  background: #fff6e4;
  border-radius: 22px;
  padding: 26px 28px;
  box-shadow: 0 4px 0 rgba(92, 67, 38, 0.15);
}

.zr-station--4 .zr-card h3 {
  font-family: var(--zr-righteous);
  font-weight: 400;
}

/* Gross gesetzte Zahl vor dem Absatz („151 Liter"). display:block ersetzt das
   <br> aus dem Export. */
.zr-stat {
  display: block;
  font-family: var(--zr-righteous);
  font-size: 30px;
  color: var(--zr-accent);
}

.zr-station--4 .zr-callout {
  border-radius: 22px;
  padding: 24px 30px;
  max-width: 760px;
}

.zr-station--4 .zr-callout-title {
  font-family: var(--zr-righteous);
  font-size: 17px;
}

.zr-station--4 .zr-quellen {
  max-width: 760px;
}

.zr-station--4 .zr-quellen summary {
  font-weight: 700;
}

/* ------------------------------------------------- Station 5 · Ost und West
   Layout split-ost-west: zentrierter Kopf mit Mauer-Illustration, darunter zwei
   Panels in EINEM Rahmen (gestrichelte Mittellinie), dann der gemeinsame Kasten. */

.zr-station--5 {
  --zr-bg: #dad5c4;
  --zr-accent: #4a433c;
  --zr-h2: var(--ink);
  --zr-h3: var(--ink);
  --zr-text: #4a433c;
  --zr-sub: #5a5348;
  --zr-quellen: #5a5348;
  --zr-rule: rgba(74, 67, 60, 0.4);
  --zr-link: var(--terra);
  --zr-link-hover: #7c1f14;
  --zr-callout-bg: #4a433c;
  --zr-callout-text: #f0eadb;
  --zr-callout-title: #e8b84b;
}

.zr-station--5 .zr-eyebrow {
  font-family: var(--zr-elite);
  font-size: 13px;
  letter-spacing: 0.14em;
  font-weight: 400;
}

.zr-station--5 .zr-h2 {
  margin-top: 14px;
  font-family: var(--zr-elite);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
}

/* Die Illustration steht hier im zentrierten Kopf, nicht neben dem Text */
.zr-icon--wide {
  width: 190px;
  height: 110px;
  margin-top: 22px;
}

.zr-ost-west {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--zr-accent);
}

.zr-panel {
  padding: 30px 30px 34px;
}

.zr-panel--west {
  background: var(--cream);
  border-right: 2px dashed var(--zr-accent);
}

.zr-panel--ost {
  background: #cec8b4;
}

.zr-panel-label {
  font-family: var(--zr-elite);
  font-size: 15px;
  letter-spacing: 0.2em;
}

.zr-panel--west .zr-panel-label {
  color: var(--terra);
}

.zr-panel--ost .zr-panel-label {
  color: #7c1f14;
}

.zr-panel h3 {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--zr-h3);
}

.zr-panel-label + h3 {
  margin-top: 14px;
}

.zr-panel p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--zr-text);
}

/* Der verbindende Kasten unter den beiden Panels */
.zr-together {
  margin-top: 22px;
  background: #f0eadb;
  border: 2px solid var(--zr-accent);
  padding: 24px 28px;
}

.zr-together h3 {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--zr-h3);
}

.zr-together p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--zr-text);
}

.zr-station--5 .zr-callout {
  padding: 22px 28px;
}

.zr-station--5 .zr-callout-title {
  font-family: var(--zr-elite);
  font-size: 16px;
}

/* ---------------------------------------------------- Station 6 · Die 80er
   Layout text-icon-cardgrid-neon, DUNKEL: flackernde Monoton-Ueberschrift,
   Neonschild rechts, zwei Karten in Cyan und Pink. */

.zr-station--6 {
  --zr-bg: #0e0b14;
  --zr-accent: #ff4fa3;
  --zr-cyan: #29d9d0;
  --zr-gold: #e8b84b;
  --zr-eyebrow: var(--zr-cyan);
  --zr-h2: #ff4fa3;
  --zr-h3: var(--zr-cyan);
  --zr-text: rgba(214, 236, 235, 0.8);
  --zr-sub: rgba(214, 236, 235, 0.75);
  --zr-quellen: rgba(214, 236, 235, 0.65);
  --zr-rule: rgba(41, 217, 208, 0.3);
  --zr-link: var(--zr-cyan);
  --zr-link-hover: #ff4fa3;
  --zr-callout-bg: rgba(232, 184, 75, 0.07);
  --zr-callout-title: var(--zr-gold);
}

.zr-station--6 .zr-eyebrow {
  letter-spacing: 0.2em;
}

.zr-station--6 .zr-head {
  margin-top: 16px;
}

.zr-station--6 .zr-h2 {
  font-family: var(--zr-monoton);
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.25;
  text-shadow:
    0 0 18px rgba(255, 79, 163, 0.6),
    0 0 40px rgba(255, 79, 163, 0.3);
  animation: zrFlicker 4s linear infinite;
}

.zr-station--6 .zr-cards {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.zr-station--6 .zr-card {
  border: 1px solid rgba(41, 217, 208, 0.4);
  border-radius: 8px;
  padding: 26px 28px;
  background: rgba(41, 217, 208, 0.05);
}

.zr-station--6 .zr-card h3 {
  font-size: 20px;
}

/* Zweite Karte traegt Pink statt Cyan */
.zr-station--6 .zr-card:nth-child(2n) {
  border-color: rgba(255, 79, 163, 0.4);
  background: rgba(255, 79, 163, 0.05);
}

.zr-station--6 .zr-card:nth-child(2n) h3 {
  color: var(--zr-accent);
}

.zr-station--6 .zr-callout {
  border: 1px solid var(--zr-gold);
  border-radius: 8px;
  max-width: 760px;
}

.zr-station--6 .zr-callout-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Leuchten der Neon-Illustration. Im Export vier style="filter:…"-Attribute —
   unter der CSP wirkungslos, deshalb hier als Klassen. */
.zr-neon-cyan {
  filter: drop-shadow(0 0 6px rgba(41, 217, 208, 0.9));
}

.zr-neon-pink {
  filter: drop-shadow(0 0 6px rgba(255, 79, 163, 0.9));
}

.zr-neon-pink-soft {
  filter: drop-shadow(0 0 5px rgba(255, 79, 163, 0.8));
}

.zr-neon-gold {
  filter: drop-shadow(0 0 5px rgba(232, 184, 75, 0.9));
}

/* ----------------------------------------------------- Station 7 · Die 90er
   Layout centered-icon-flow-boxed, DUNKEL: zentrierter Kopf mit Pint, Kleeblatt
   und Dartscheibe, darunter drei Kaesten in schmalerer Spalte. */

.zr-station--7 {
  --zr-bg: #10382a;
  --zr-accent: #c9a227;
  --zr-h2: #f2e7c8;
  --zr-h3: #f2e7c8;
  --zr-text: rgba(242, 231, 200, 0.8);
  --zr-sub: rgba(242, 231, 200, 0.75);
  --zr-quellen: rgba(242, 231, 200, 0.65);
  --zr-rule: rgba(201, 162, 39, 0.35);
  --zr-link: #c9a227;
  --zr-link-hover: #f2e7c8;
  --zr-box-border: rgba(201, 162, 39, 0.45);
  --zr-callout-bg: rgba(201, 162, 39, 0.08);
  --zr-callout-title: #c9a227;
}

.zr-station--7 .zr-eyebrow {
  letter-spacing: 0.18em;
}

.zr-station--7 .zr-h2 {
  margin-top: 14px;
  font-family: var(--zr-playfair);
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.12;
  font-weight: 700;
}

.zr-station--7 .zr-h2 .zr-accent {
  font-style: italic;
  color: var(--zr-accent);
}

.zr-icon--banner {
  width: 220px;
  height: 110px;
  margin-top: 20px;
}

.zr-station--7 .zr-flow {
  gap: 22px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.zr-station--7 .zr-entry {
  background: rgba(242, 231, 200, 0.06);
  border-radius: 4px;
}

.zr-station--7 .zr-entry h3 {
  font-family: var(--zr-playfair);
}

.zr-station--7 .zr-entry p {
  font-size: 15.5px;
}

.zr-station--7 .zr-callout {
  border: 3px double var(--zr-accent);
}

.zr-station--7 .zr-callout-title {
  font-family: var(--zr-playfair);
  font-size: 18px;
  font-weight: 700;
}

/* --------------------------------------------------- Station 8 · Die 2000er
   Layout text-icon-cardgrid-gradient: Work Sans mit Verlaufswort, drei weisse
   Karten, Verlaufs-Kasten. Einzige Station ohne Epochen-Schrift. */

.zr-station--8 {
  --zr-bg: #e9eef2;
  --zr-accent: #3e7bd6;
  --zr-h2: #20303f;
  --zr-h3: #20303f;
  --zr-text: #51606e;
  --zr-sub: #51606e;
  --zr-quellen: #51606e;
  --zr-rule: rgba(32, 48, 63, 0.2);
  --zr-link: var(--terra);
  --zr-link-hover: #3e7bd6;
  --zr-callout-title: rgba(255, 255, 255, 0.85);
  --zr-callout-text: #ffffff;
}

.zr-station--8 .zr-h2 {
  font-family: var(--sans);
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Verlaufswort. Ohne Verlaufsunterstuetzung greift die Grundfarbe des H2 —
   deshalb steht color:transparent erst NACH background-clip. */
.zr-station--8 .zr-h2 .zr-accent {
  background: linear-gradient(180deg, #63b4e8, #3e7bd6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zr-station--8 .zr-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 6px 18px rgba(32, 48, 63, 0.1);
}

.zr-station--8 .zr-callout {
  background: linear-gradient(180deg, #63b4e8, #3e7bd6);
  border-radius: 14px;
  padding: 24px 30px;
  max-width: 760px;
  box-shadow: 0 6px 18px rgba(62, 123, 214, 0.3);
}

.zr-station--8 .zr-callout-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zr-station--8 .zr-quellen {
  max-width: 760px;
}

/* ------------------------------------------------ Station 9 · 2010 bis heute
   Layout text-icon-flow-counter: Zaehlerblock, dann Absaetze an Trennlinien.
   Zweite Akzentfarbe (Teal) fuer die guten Nachrichten — Markup setzt dafuer
   .zr-entry--positive bzw. .zr-count-cell--positive. */

.zr-station--9 {
  --zr-bg: var(--cream);
  --zr-accent: #b54a2b;
  --zr-positive: #1f6e5f;
  --zr-h2: var(--ink);
  --zr-h3: var(--ink);
  --zr-text: #4a433c;
  --zr-sub: #4a433c;
  --zr-quellen: #4a433c;
  --zr-rule: rgba(46, 42, 38, 0.2);
  --zr-link: var(--terra);
  --zr-link-hover: var(--green);
  --zr-callout-bg: rgba(31, 110, 95, 0.08);
  --zr-callout-title: var(--zr-positive);
}

.zr-station--9 .zr-h2 {
  font-family: var(--serif);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.zr-station--9 .zr-h2 .zr-accent {
  color: var(--zr-accent);
  font-style: italic;
  font-weight: 400;
}

.zr-station--9 .zr-flow {
  margin-top: 28px;
  gap: 22px;
  max-width: 820px;
}

.zr-station--9 .zr-entry {
  border-top: 2px solid var(--zr-accent);
  padding-top: 16px;
}

.zr-station--9 .zr-entry--positive {
  border-top-color: var(--zr-positive);
}

.zr-station--9 .zr-entry h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
}

.zr-station--9 .zr-entry--positive h3 {
  color: var(--zr-positive);
}

.zr-station--9 .zr-entry p {
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.66;
}

.zr-station--9 .zr-callout {
  border-left: 3px solid var(--zr-positive);
  padding: 20px 24px;
}

.zr-station--9 .zr-callout-title {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
}

/* Zaehlerblock. Das 1px-Raster ist der durchscheinende Hintergrund zwischen den
   Zellen — deshalb gap:1px und eine Zellenfarbe, kein border je Zelle. */
.zr-count {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(46, 42, 38, 0.14);
  border: 1px solid rgba(46, 42, 38, 0.14);
}

.zr-count-cell {
  background: var(--cream);
  padding: 30px 28px;
}

.zr-count-label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.zr-count-value {
  margin-top: 8px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--zr-accent);
  line-height: 1;
}

/* Fallback, weil der Zaehler als einziger Block ausserhalb einer
   .zr-station--9-Regel auf das Teal zugreift. */
.zr-count-cell--positive .zr-count-value {
  color: var(--zr-positive, var(--green));
}

.zr-count-caption {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zr-text);
}

/* ---------------------------------------------------------------------- CTA
   Der Export haengt hier noch einen eigenen Mini-Footer an; den liefert bei uns
   base.html. */

.zr-cta {
  background: var(--dark);
  padding: 96px 24px;
  text-align: center;
}

.zr-cta-inner {
  max-width: 840px;
  margin: 0 auto;
}

.zr-cta-kicker {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--peach);
  font-weight: 600;
}

.zr-cta h2 {
  margin-top: 16px;
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #f7f0e6;
  font-weight: 700;
}

.zr-cta-text {
  margin: 20px auto 0;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--light);
  max-width: 620px;
}

.zr-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 36px;
}

.zr-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 26px;
  border-radius: 4px;
}

.zr-btn--primary {
  background: var(--terra);
  color: #fff6ec;
}

.zr-btn--primary:hover {
  background: var(--terra-dark);
  color: #fff6ec;
}

.zr-btn--primary span {
  font-size: 18px;
}

.zr-btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 237, 227, 0.4);
}

.zr-btn--ghost:hover {
  background: rgba(245, 237, 227, 0.08);
  color: var(--cream);
}

.zr-cta-tag {
  margin-top: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--peach);
}

/* ------------------------------------------------------- Schmale Viewports */

/* Ab wann die Rail verschwinden muss:
     Textkante rechts  = 50vw + 510px   (Container 1020px, mittig)
     Platzbedarf Rail  = Pille + 9px + Punkt 14px + 18px Abstand
     Laengste Pille    = „Antiquity–1500" (EN) ~ 98px  ->  ~139px
   Damit ist erst ab 2 x (139 + Luft) + 1020 alles frei: rund 1340px.
   Die 940px aus dem Export decken nur den Handy-Fall ab — dazwischen liegt die
   Rail auf dem Fliesstext (Playbook: „Fixe Overlays"). Auf dem verbreiteten
   1366px-Notebook bleibt sie damit sichtbar, ab 1280px ist sie weg.
   Gegenprobe per Screenshot bei 1024 / 1150 / 1280 / 1366 / 1440 px. */
@media (max-width: 1339px) {
  .zr-rail {
    display: none;
  }
}

/* Kopfzone und Zweispalter stapeln, bevor die Illustration die Ueberschrift
   erdrueckt. Der Export laesst beide Raster bis 0px stehen. */
@media (max-width: 720px) {
  .zr-head,
  .zr-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .zr-icon {
    width: 130px;
    height: 130px;
  }

  .zr-icon--wide,
  .zr-icon--banner {
    width: 100%;
    max-width: 220px;
    height: auto;
  }

  /* Ost/West nebeneinander wird zu untereinander — die gestrichelte Trennlinie
     wandert dabei von rechts nach unten. */
  .zr-ost-west {
    grid-template-columns: 1fr;
  }

  .zr-panel--west {
    border-right: none;
    border-bottom: 2px dashed var(--zr-accent);
  }
}

@media (max-width: 640px) {
  .zr-station,
  .zr-cta {
    padding: 64px 20px;
  }

  .zr-hero {
    padding: 64px 20px 72px;
  }

  .zr-station--3 .zr-entry,
  .zr-station--7 .zr-entry,
  .zr-card,
  .zr-panel,
  .zr-together,
  .zr-callout {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Der Zaehler traegt die groessten Zahlen der Seite. „7,2 statt 6" bzw.
   „7.2 rather than 6" laeuft bei 42px auf schmalen Geraeten aus der Zelle. */
@media (max-width: 520px) {
  .zr-count-cell {
    padding: 24px 20px;
  }

  .zr-count-value {
    font-size: 34px;
  }
}

/* Wer Bewegung abbestellt hat, bekommt Schweben, Flackern und Huepfen nicht.
   Die Zaehler-Animation stellt das JS selbst ab (Task 5). */
@media (prefers-reduced-motion: reduce) {
  .zr-icon--float,
  .zr-station--6 .zr-h2,
  .zr-hero-scroll span {
    animation: none;
  }

  .zr-dot,
  .zr-year,
  .zr-chip {
    transition: none;
  }
}