/* ============================================================
   FOX & RABBIT — „Dein erstes Turnier spielst du nicht allein."

   Grundstimmung hell und offen, mit genau zwei Dunkelflächen: die
   Runde (03) und der Abschluss (08). Das ist die Gegenbewegung zur
   Turnierseite, die über weite Strecken auf --pine läuft.

   Der Signaturmoment ist 03: links klebt die Scorekarte und füllt
   sich, rechts laufen die neun Bahnen randlos vorbei. Die Karte
   klebt NUR innerhalb ihres Kapitels — ein über die ganze Seite
   mitlaufendes Blatt gehört der Seite „Mitglied werden".

   Präfix fr-. Vor jedem neuen Klassennamen geprüft, dass er nicht
   schon in seite.css steht.
   ============================================================ */

/* ---------- Typografie-Stufen aus tokens.css ----------
   Die .t-*-Klassen fehlen in site/ (seite.css bringt nur die
   Farbtokens mit). Wortgleich wie in turniere.css. */
.t-display{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.045em;line-height:1.06;font-size:clamp(30px,5.6vw,72px)}
.t-hero{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.055em;line-height:1.06;font-size:min(clamp(48px,8.6vw,150px),18svh)}
.t-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.035em;line-height:1.08;font-size:clamp(22px,2.8vw,34px)}

/* ---------- Bühne ----------
   .sh-zahl steht nicht in seite.css, sondern nur in tokens.css — wie bei
   FAQ und Hotels also hier mitliefern, sonst steht die Kennzahl als
   Fließtext neben ihrer Unterzeile. */
.sh-zahl{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:4px;padding-bottom:.3em}
.sh-zahl .t-zahl{font-size:clamp(56px,7vw,104px);line-height:.9;color:var(--lime)}
.sh-zahl em{font-style:normal;font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);max-width:16ch}
/* Bahn 1 ist ein Gegenlichtbild: oben steht die Sonne, und darauf ist weder
   der Kicker in --lime noch die gefüllte Zeile der Schlagzeile lesbar. Der
   Standard-Schleier der Komponente läuft nur von unten — hier braucht es
   zusätzlich eine Abdunklung von oben. Gemessen, nicht geschätzt. */
.hero.seitenhero::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,17,.74) 0%,rgba(6,26,17,.52) 26%,rgba(6,26,17,.2) 46%,rgba(6,26,17,0) 64%)}

/* ---------- Grundregeln ----------
   Das Wappen im Kopf hängt 130 px in die Seite; Sprungziele
   brauchen Abstand, sonst laufen sie dahinter. */
.fr-begleitung,.fr-vorher,.fr-runde,.fr-summe,.fr-danach,.fr-fuechse,.fr-termine,.fr-cta,
.fr-spur,.fr-bahn{scroll-margin-top:150px}
.fr-begleitung h2,.fr-fuechse h2,.fr-bruch,.fr-danach-bild figcaption{text-wrap:balance}
.fr-nur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* line-height:.9 aus seite.css und Umlaute vertragen sich nicht: Beginnt
   Zeile 2 einer Versalüberschrift mit Ä/Ö/Ü, stoßen die Punkte in die
   Grundlinie darüber (gemessen: .90, .98 und 1.02 kollidieren, erst 1.06
   hält frei). Auf dieser Seite fängt „OHNE ZU ZÄHLEN." genau so an. */
.fr-begleitung .kapitel-kopf h2,.fr-fuechse .kapitel-kopf h2{line-height:1.06}

/* Die eine Randgeste der Seite: Unterlinien laufen von LINKS auf —
   überall dieselbe Richtung, auch im Fokusring. */
.fr-link{position:relative;color:var(--gruen);font-weight:500}
.fr-link::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-schnell) ease-out}
.fr-link:hover::after,.fr-link:focus-visible::after{transform:scaleX(1)}
.dunkel .fr-link,.fr-runde .fr-link{color:var(--lime)}

.fr-wege{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:26px}

/* ============================================================
   01 · JEMAND GEHT MIT — asymmetrisch, Zahlenspalte rechts
   ============================================================ */
.fr-begleitung{padding:var(--luft) 0}
.fr-beg-lage{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr);gap:56px;align-items:start}
.fr-beg-text p+p{margin-top:18px}
.fr-beg-text p{max-width:64ch}
.fr-beg-zahlen{border-top:1px solid var(--hairline)}
.fr-beg-zahlen li{display:flex;flex-direction:column;gap:4px;padding:20px 0;border-bottom:1px solid var(--hairline)}
.fr-beg-zahlen .t-zahl{font-size:clamp(38px,4vw,58px);color:var(--tinte);line-height:1}
.fr-beg-zahlen em{font-style:normal;color:var(--muted)}

/* ============================================================
   02 · BEVOR ES LOSGEHT — randloser Bildschnitt, dann schmal
   ============================================================ */
.fr-vorher{padding-bottom:var(--luft)}
.fr-beleg{position:relative;height:36svh;min-height:250px;overflow:hidden;background:var(--pine)}
/* Näher heran: Die zwei Zeilen am Fuß der Karte sind der Beweis — sie müssen
   lesbar sein, nicht nur vorhanden. Der Ursprung liegt auf der unteren
   Kartenkante, damit der Zoom genau dorthin zieht. */
.fr-beleg img{width:100%;height:100%;object-fit:cover;object-position:26% 86%;
  transform:scale(1.34);transform-origin:26% 88%}
/* Kontrast über einen Verlauf von rechts, nicht über eine Fläche. */
.fr-beleg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(270deg,rgba(6,26,17,.78) 0%,rgba(6,26,17,.62) 34%,rgba(6,26,17,0) 68%)}
.fr-beleg figcaption{position:absolute;z-index:2;right:var(--inset);bottom:34px;width:min(38ch,44vw);color:#fff}
.fr-beleg figcaption .t-titel{color:#fff}
.fr-beleg figcaption .t-mikro{color:rgba(255,255,255,.62);margin-top:12px}

.fr-vorher-lage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;
  align-items:start;padding-top:var(--luft)}
.fr-schritte,.fr-danach-liste{list-style:none}
.fr-schritte li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--hairline)}
.fr-schritte li:first-child{border-top:1px solid var(--hairline)}
.fr-schritt-nr{font-size:20px;color:var(--gruen)}
.fr-schritte .t-text{max-width:62ch}
.fr-rand p{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-bottom:1px solid var(--hairline)}
.fr-rand p:first-child{border-top:1px solid var(--hairline)}
.fr-rand .t-mikro{color:var(--gruen)}

/* ============================================================
   03 · DIE RUNDE — der Signaturmoment
   Links die klebende Karte, rechts die randlosen Bahnen.
   ============================================================ */
.fr-runde{background:var(--pine);color:rgba(255,255,255,.86);padding:var(--luft) 0 0}
.fr-runde-kopf .kapitel-marke{border-color:var(--hairline-dunkel)}
.fr-runde-kopf .kapitel-marke .nr{color:var(--lime)}
.fr-runde-kopf .kapitel-marke .was{color:rgba(255,255,255,.5)}
.fr-runde-zeile{color:var(--lime);margin-top:22px}
.fr-runde-lead{color:rgba(255,255,255,.76);max-width:52ch;margin-top:14px}

.fr-runde-lage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:0 48px;margin-top:var(--luft)}
/* Kein align-items:start: Die linke Spalte muss so hoch sein wie die Bahnen,
   sonst hat position:sticky keinen Weg und die Karte steht nur oben. */
.fr-karte-spalte{padding-left:var(--inset)}
.fr-karte{position:sticky;top:104px;background:var(--weiss);color:var(--tinte);
  border-radius:var(--r-flaeche);padding:22px 24px 20px}
.fr-karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--hairline)}
.fr-karte-kopf .t-mikro{color:var(--muted)}
.fr-karte-wappen{width:16px;height:auto;flex:none;opacity:.72}
/* Die Beschriftung steht UNTER der Linie — wie auf dem gedruckten Blatt. */
.fr-karte-felder{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;padding:16px 0 4px}
.fr-karte-felder p{display:flex;flex-direction:column;gap:5px}
.fr-karte-felder .t-mikro{color:var(--muted)}
.fr-karte-linie{display:block;min-height:26px;padding-bottom:4px;border-bottom:1px solid var(--tinte);
  font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--tinte)}

/* Wischbereich der Scorekarte. position:relative ist Pflicht — in den
   Zellen sitzen absolut positionierte Elemente, die sonst am Zuschnitt
   vorbeilaufen und die Seite wieder breit machen. Links etwas Luft,
   damit der Marker der aktiven Zeile (box-shadow, translateX) nicht
   abgeschnitten wird. */
.fr-karte-rollen{position:relative;overflow-x:auto;padding-left:8px;margin-left:-8px;
  scrollbar-width:thin}
.fr-karte-tab{width:100%;min-width:320px;border-collapse:collapse;margin-top:18px}
.fr-karte-tab th,.fr-karte-tab td{padding:7px 4px;text-align:right;font-size:14px;
  border-bottom:1px solid var(--linie-karte);color:var(--tinte)}
.fr-karte-tab thead th{color:var(--muted);border-bottom-color:var(--hairline);padding-bottom:9px}
.fr-karte-tab tbody th{text-align:left;font-size:15px}
.fr-karte-erklaer{color:var(--muted);margin:10px 0 2px;max-width:46ch;letter-spacing:0;text-transform:none}
.fr-karte-tab .fr-meter{color:var(--muted);font-weight:600;position:relative}
/* Beide Abschlaglängen stehen IMMER da — die rote hinter der gelben,
   klein und beschriftet. Bis 31.08.2026 erschien sie nur beim Überfahren;
   das las sich wie ein Fehler (Andreas: „nur bei mouseover — Schwachsinn"). */
.fr-karte-tab .fr-rot{display:block;color:var(--live);font-size:.72em;font-weight:600;white-space:nowrap}
.fr-karte-tab tbody tr{transition:transform var(--t-mittel) var(--ease),background var(--t-schnell)}
.fr-karte-tab tbody tr:hover{background:var(--mint)}
/* Die aktive Zeile rückt um dieselben 4 px wie jeder Pfeil auf der Seite. */
.fr-karte-tab tbody tr.fr-aktiv{transform:translateX(4px)}
.fr-karte-tab tbody tr.fr-aktiv>th{box-shadow:-8px 0 0 -6px var(--gruen)}
.fr-karte-tab .fr-wert>span{display:inline-block}
.fr-karte-tab .fr-karte-summe{font-size:15px}

.fr-karte-fuss{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding-top:14px;
  border-top:1.5px solid var(--tinte)}
.fr-karte-fuss .t-zahl{font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--tinte)}
.fr-karte-fuss em{font-style:normal;color:var(--muted)}
.fr-karte-quelle{color:var(--muted);margin-top:12px;letter-spacing:.08em;text-transform:none;
  font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:400;line-height:1.5}

/* Die Bahnen: randlos bis an den Fensterrand. */
.fr-bahnen{display:flex;flex-direction:column;gap:0;list-style:none}
.fr-bahn{position:relative;overflow:hidden}
.fr-bahn img{width:100%;height:42svh;min-height:260px;object-fit:cover;object-position:50% 52%}
.fr-bahn-gross img{height:82svh;min-height:420px}
.fr-bahn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,26,17,.42) 0%,rgba(6,26,17,0) 34%,rgba(6,26,17,.2) 62%,rgba(6,26,17,.86) 100%)}
/* Die zwei grossen Bahnen tragen viel Text auf hellem Gras: der Verlauf
   greift dort frueher. Kontrast gemessen, nicht geschaetzt. */
.fr-bahn-gross::after{background:linear-gradient(180deg,rgba(6,26,17,.42) 0%,rgba(6,26,17,.1) 18%,
  rgba(6,26,17,.48) 46%,rgba(6,26,17,.82) 74%,rgba(6,26,17,.93) 100%)}
.fr-bahn-text{position:absolute;z-index:2;left:34px;right:34px;bottom:30px;color:#fff}
.fr-bahn-nr{position:absolute;top:-8px;right:0;font-size:clamp(40px,5vw,86px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.34)}
.fr-bahn-werte{color:var(--lime)}
.fr-bahn-satz{color:#fff;max-width:46ch;margin-top:10px}
.fr-bahn-mess{color:rgba(255,255,255,.56);margin-top:12px;letter-spacing:.08em;text-transform:none;
  font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:400}
.fr-bruch{color:#fff;max-width:22ch;margin-top:16px}
.fr-bruch-text{color:rgba(255,255,255,.78);max-width:56ch;margin-top:14px}

.fr-runde-schluss{padding:var(--luft) var(--inset)}
.fr-runde-schluss .t-lead{color:rgba(255,255,255,.86);max-width:56ch}

/* ============================================================
   04 · DIE SUMME — die Ruhezeile: eine Zahl, eine Fläche
   ============================================================ */
.fr-summe{background:var(--mint);padding:calc(var(--luft)*1.4) 0}
.fr-summe-lage{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:64px;align-items:end}
.fr-summe-zahl .t-mikro{color:var(--gruen)}
.fr-summe-zahl .t-hero{color:var(--tinte);margin:12px 0 20px}
.fr-summe-zahl .t-lead{color:var(--text);max-width:44ch}
.fr-summe-werte{border-top:1px solid var(--hairline)}
.fr-summe-werte li{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--hairline)}
.fr-summe-werte .t-zahl{font-size:30px;color:var(--tinte);min-width:2.6ch;text-align:right}
.fr-summe-werte em{font-style:normal}
.fr-summe-text{margin-top:var(--luft)}
.fr-summe-text .t-text{max-width:66ch}

/* ============================================================
   05 · NACH DER KARTE
   ============================================================ */
.fr-danach{padding-bottom:var(--luft)}
.fr-danach-bild{position:relative;height:34svh;min-height:240px;overflow:hidden;background:var(--pine)}
.fr-danach-bild img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.fr-danach-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,26,17,.1) 0%,rgba(6,26,17,.72) 100%)}
.fr-danach-bild figcaption{position:absolute;z-index:2;left:var(--inset);bottom:28px;color:#fff;max-width:20ch}
.fr-danach-liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;padding-top:var(--luft)}
.fr-danach-liste li{padding:24px 0;border-top:1px solid var(--hairline)}
.fr-danach-liste .t-text{max-width:56ch}
.fr-beleg-zeile{color:var(--muted);margin-top:10px}

/* ============================================================
   06 · FÜR DIE FÜCHSE — gespiegelt zu 03, mit Reel-Streifen
   ============================================================ */
.fr-fuechse{background:var(--mint);padding:var(--luft) 0}
.fr-fuechse-lage{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.fr-fuechse-text .t-text{max-width:52ch}
.fr-einschraenkung{margin-top:16px;padding-left:16px;border-left:2px solid var(--gruen);max-width:52ch}
.fr-fuchs-satz{margin-top:28px;color:var(--tinte);max-width:22ch}
.fr-reels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.fr-reel video{width:100%;height:auto;aspect-ratio:304/540;object-fit:cover;background:var(--pine);
  border-radius:var(--r-flaeche)}
/* Keine Reihe gleich großer Bilder: der mittlere Clip sitzt höher. */
.fr-reel:nth-child(2){margin-top:-8%}
.fr-reel figcaption{color:var(--muted);margin-top:10px}

/* ============================================================
   07 · DIE TERMINE — echte Tabelle, Titel in der Kopfzeile
   ============================================================ */
.fr-termine{padding:var(--luft) 0}
.fr-tab-rollt{overflow-x:auto;margin-top:26px}
.fr-tab{width:100%;border-collapse:collapse;min-width:640px}
.fr-tab caption{text-align:left;color:var(--tinte);padding-bottom:26px}
.fr-tab th,.fr-tab td{padding:16px 14px;text-align:right;border-bottom:1px solid var(--hairline);
  vertical-align:baseline}
.fr-tab thead th{color:var(--muted);white-space:nowrap}
.fr-tab thead th:first-child,.fr-tab tbody th{text-align:left}
.fr-tab tbody th{display:table-cell}
.fr-tab tbody th .t-zahl{display:block;font-size:18px;color:var(--tinte)}
.fr-tab tbody th em{display:block;font-style:normal;color:var(--muted);margin-top:4px}
.fr-tab tbody td{color:var(--text)}
.fr-tab tbody tr:hover{background:var(--mint)}
.fr-tab tbody tr.fr-zeile-offen{background:var(--mint)}
.fr-tab tbody tr.fr-zeile-offen th,.fr-tab tbody tr.fr-zeile-offen td{border-bottom:1.5px solid var(--gruen)}
.fr-tab .btn{white-space:nowrap}
.fr-tab-fuss{color:var(--muted);margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;
  letter-spacing:.08em;text-transform:none;font-family:'Hanken Grotesk',sans-serif;
  font-size:13px;font-weight:400}

/* ============================================================
   08 · ABSCHLUSS — so gestaltet wie der erste Bildschirm
   ============================================================ */
.fr-cta{background:var(--pine);color:#fff;padding:calc(var(--luft)*1.2) 0}
/* Seit die Echo-Spalte weg ist, steht der Abschluss einspaltig. */
.fr-cta-lage{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;align-items:end}
.fr-cta h2{color:#fff}
.fr-cta-datum{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-top:26px}
.fr-cta-datum .t-hero{color:var(--lime)}
.fr-cta-datum em{font-style:normal;color:rgba(255,255,255,.62)}
.fr-cta-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fr-cta .t-lead{color:rgba(255,255,255,.8);max-width:44ch;margin-top:22px}
/* Das Echo: dieselben zwei Felder wie auf der Karte, ein Achtel so groß. */

/* ============================================================
   SCHMALE FENSTER
   Der Verzicht wird größer, nicht kleiner: die Karte klebt nicht
   mehr, sondern wird zu einem Streifen mit drei Werten. Die
   vollständige Tabelle steht einmal am Kapitelende.
   ============================================================ */
@media (max-width:1100px){
  .fr-beg-lage,.fr-vorher-lage,.fr-summe-lage,.fr-fuechse-lage,.fr-cta-lage{grid-template-columns:1fr;gap:36px}
  .fr-beg-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;border-top:0}
  .fr-beg-zahlen li{border-top:1px solid var(--hairline)}
  /* Kein Sticky. Die Karte steht vollständig UNTER den Bahnen — alle
     Werte bleiben lesbar, auch ohne JavaScript. Darüber legt das Skript
     einen schmalen Streifen, der mitzählt; ohne JS gibt es ihn nicht,
     und es fehlt nichts. */
  .fr-runde-lage{display:flex;flex-direction:column;gap:0}
  .fr-bahnen{order:1}
  .fr-karte-spalte{order:2;padding:var(--luft-s) var(--inset) 0}
  .fr-karte{position:static}
  .fr-danach-liste{grid-template-columns:1fr}
  .fr-cta-lage{gap:44px}
}
@media (max-width:640px){
  .fr-beg-zahlen{grid-template-columns:1fr}
  .fr-beleg figcaption{position:static;width:auto;padding:20px var(--inset) 26px;background:var(--pine)}
  .fr-beleg{height:auto;min-height:0}
  .fr-beleg img{height:28svh;min-height:180px}
  .fr-beleg::after{display:none}
  .fr-bahn img{height:52svh}
  .fr-bahn-gross img{height:68svh}
  .fr-bahn-text{left:22px;right:22px;bottom:22px}
  .fr-reels{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;-webkit-overflow-scrolling:touch}
  /* Hochformate sind auf schmalen Fenstern im Vorteil — größer zeigen. */
  .fr-reel{flex:0 0 78vw;scroll-snap-align:start}
  .fr-reel:nth-child(2){margin-top:0}
  .fr-cta-datum{gap:12px}
}

/* ============================================================
   BEWEGUNGSREGIE
   Aufdecken statt Einblenden; nichts läuft zweimal.
   ============================================================ */
.js .fr-bahn img{clip-path:inset(100% 0 0 0);transform:scale(1.04);
  transition:clip-path var(--t-lang) var(--ease),transform 1s var(--ease)}
.js .fr-bahn.fr-auf img{clip-path:inset(0);transform:none}
/* Ohne JS und vor dem Start stehen die Werte da — das HTML trägt den
   Endzustand, fox-rabbit.js nimmt ihn für die Vorführung zurück. */
.js .fr-karte-tab .fr-wert>span{transition:transform var(--t-mittel) var(--ease),opacity var(--t-schnell)}
.js .fr-karte-tab tr.fr-leer .fr-wert>span{transform:translateY(100%);opacity:0}
.js .fr-karte-tab .fr-wert{overflow:hidden}
.fr-karte-fuss .t-zahl{border-radius:2px;box-shadow:0 0 0 0 rgba(204,255,0,0);
  transition:box-shadow var(--t-mittel) ease-out}
.fr-karte-fuss .t-zahl.fr-halt{box-shadow:0 0 0 2px var(--lime)}

@media (prefers-reduced-motion:reduce){
  .js .fr-bahn img{clip-path:none;transform:none;transition:none}
  .js .fr-karte-tab tr.fr-leer .fr-wert>span{transform:none;opacity:1}
  .fr-karte-fuss .t-zahl.fr-halt{box-shadow:0 0 0 2px var(--lime);transition:none}
  .fr-karte-tab tbody tr.fr-aktiv{transform:none}
}

/* ---------- Der Streifen auf schmalen Fenstern ----------
   Wird nur von fox-rabbit.js eingesetzt: Bahn, Ø Schläge, laufende
   Punktesumme. Er ersetzt den Effekt, statt ihn zu schrumpfen. */
.fr-streifen{position:sticky;top:76px;z-index:6;display:none;
  grid-template-columns:auto 1fr auto;gap:0 20px;align-items:baseline;
  padding:11px var(--inset);background:var(--weiss);color:var(--tinte);
  border-bottom:1px solid var(--linie-karte)}
.fr-streifen span{display:flex;flex-direction:column-reverse;gap:2px}
.fr-streifen .t-zahl{font-size:20px;line-height:1.1}
.fr-streifen em{font-style:normal;color:var(--muted);font-family:'Space Grotesk',sans-serif;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.fr-streifen>span:last-child{text-align:right}
@media (max-width:1100px){.js .fr-streifen{display:grid}}

/* ============================================================
   02 · ZWEI SPUREN, EINE KARTE — der Signaturmoment (31.08.2026)
   Zwei benannte Linien laufen an den Stationen entlang und münden
   in einen Punkt. Alle Texte stehen immer; nur die Linie zeichnet
   sich beim Scrollen (fox-rabbit.js). Ohne JavaScript und bei
   reduzierter Bewegung ist sie fertig gezeichnet.
   ============================================================ */
.fr-spur{background:var(--mint);padding:var(--luft-s) 0 var(--luft)}
.fr-spur-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.92;font-size:clamp(40px,6vw,86px);color:var(--tinte);
  margin:18px 0 14px}
.fr-spur-lead{max-width:52ch;color:var(--text)}
.fr-spur-lage{display:grid;grid-template-columns:132px minmax(0,1fr);gap:0 clamp(20px,4vw,64px);
  margin-top:6px;position:relative}
.fr-spur-achse{position:relative}
.fr-spur-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* Die Linien wie in der Jahresszene der Einsteigerprogramme: die eigene
   dünn in Tinte, die des Begleiters grün und einen Hauch dünner
   (einsteiger_jahr.js zeichnet 1.7/1.5). non-scaling-stroke, weil das
   preserveAspectRatio="none"-Raster die Striche sonst je Richtung
   verschieden dehnt — das gilt für das RUHENDE Blatt (ohne JavaScript,
   bei reduzierter Bewegung). Sobald fox-rabbit.js die Szene übernimmt,
   rechnet es das Blatt auf echte Pixel um (Maßstab 1:1) und schaltet
   non-scaling-stroke ab: Im gestreckten Raster misst der Browser das
   Strichmuster in Bildschirm-px, `pathLength` normiert aber aufs Raster
   — der gezeichnete Kopf lief dem mitrollenden Ball davon, je nach
   Fensterbreite mal vor, mal zurück (gemessen bis 105 px). */
.fr-spur-linie{stroke-linecap:round;vector-effect:non-scaling-stroke}
.fr-spur-du{stroke:var(--tinte);stroke-width:1.7}
.fr-spur-fuchs{stroke:var(--gruen);stroke-width:1.5}
.js .fr-spur-linie{stroke-dasharray:1;stroke-dashoffset:var(--frs,0)}
/* ---- Das Loch am Zusammenlauf + die zwei Bälle ----
   Loch-Optik wortgleich mit den Marken der Etikette-Spur (platzregeln.css
   .et-marke): dunkle Öffnung mit Innenschatten. Die Bühne ist ein 0×0-Anker
   auf der Lochmitte; alles Weitere steht in px-Transforms relativ dazu.
   Die CSS-Grundstellung IST der Endstand der Choreografie — deiner ist
   versenkt, der vom Fuchs liegt ausgelippt am Lochrand. So stimmt das Bild
   auch ohne JavaScript und bei reduzierter Bewegung; fox-rabbit.js spielt
   nur die Fahrt dorthin. */
.fr-spur-buehne{position:absolute;left:50%;top:98.6%;width:0;height:0;pointer-events:none}
.fr-spur-loch{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(20,35,27,.3);
  background:radial-gradient(circle at 38% 30%,#1c3527 0%,#0a1a11 72%);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.6)}
.fr-spur-ball{position:absolute;left:-9px;top:-9px;width:18px;height:18px;
  filter:drop-shadow(0 2px 4px rgba(11,65,43,.35))}
.fr-spur-ball svg,.fr-spur-ball img{display:block;width:18px;height:18px}
.fr-spur-ball-du{opacity:0}
.fr-spur-ball-fuchs{transform:translate(16px,-6px)}
/* Mit Skript liegt der Fuchs-Ball nicht schon VOR seiner Fahrt am Loch —
   er erscheint erst mit ihr (fox-rabbit.js setzt nach der Fahrt opacity 1). */
.js .fr-spur-ball-fuchs{opacity:0}
/* ---- Die Szene klebt am Compositor ----
   Aufgebaut wird das hier von fox-rabbit.js (Halter, Decks, Läufe); ohne
   Skript und bei reduzierter Bewegung existiert nichts davon, dort steht der
   fertige Endstand. Warum überhaupt: Klebt der Kopf per Skript an der
   Leselinie, sieht man jedes Stocken des Hauptfadens — der Compositor
   scrollt weiter, das Skript kommt nicht dran, Ball und Strich wandern mit
   und schnappen zurück (gemessen bis 67 px). `position:sticky` erledigt
   dieselbe Bewegung ohne Hauptfaden.

   Das Deck ist die Hintergrundfarbe über dem noch nicht gezeichneten Teil:
   ein Element der Höhe null, das an der Leselinie klebt und dessen ::after
   nach unten deckt. Der `clip-path` am Halter schneidet es an der Lochmitte
   ab, damit es den Schlusssatz darunter nicht zudeckt — clip-path macht
   keinen Scrollbereich auf, sticky klebt weiter am Fenster (geprüft). */
.fr-spur-klebt .fr-spur-linie{stroke-dasharray:none}
.fr-spur-halter{position:absolute;top:1.4%;height:97.2%;clip-path:inset(0);pointer-events:none}
.fr-spur-halter-du{left:0;width:50%}
.fr-spur-halter-fuchs{left:50%;width:50%}
.fr-spur-deck{display:block;position:sticky;height:0}
.fr-spur-halter-du .fr-spur-deck{top:var(--fr-kopf-du,58vh)}
.fr-spur-halter-fuchs .fr-spur-deck{top:var(--fr-kopf-fuchs,58vh)}
.fr-spur-deck::after{content:'';position:absolute;top:0;left:0;right:0;height:300vh;
  background:var(--mint)}
/* Die Läufe reichen vom Pfadanfang bis zur Lochmitte: Dort werden die Bälle
   abgesetzt und bleiben liegen. Der des Fuchses endet 10 px früher — genau
   dort beginnt seine Randkurve, und von da an rechnet das Skript. */
.fr-spur-lauf{position:absolute;left:50%;top:1.4%;width:0;pointer-events:none}
.fr-spur-lauf-du{height:calc(97.2% + 9px)}
.fr-spur-lauf-fuchs{height:calc(97.2% - 1px)}
/* display:block ist Pflicht: position:sticky blockifiziert nicht, ein
   inline gebliebener <span> säße in seiner Zeilenbox — gemessen 34 px
   unter dem Strichkopf. */
.fr-spur-klebt .fr-spur-ball{display:block;position:sticky;left:auto;margin-left:-9px}
.fr-spur-lauf-du .fr-spur-ball{top:var(--fr-ball-du,58vh)}
.fr-spur-lauf-fuchs .fr-spur-ball{top:var(--fr-ball-fuchs,58vh)}
.fr-spur-legende{display:flex;align-items:center;gap:10px;margin:22px 0 8px;color:var(--tinte)}
.fr-spur-punkt{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.fr-spur-punkt-du{background:var(--tinte)}
.fr-spur-punkt-fuchs{background:var(--gruen);margin-left:14px}
.fr-stationen{list-style:none;margin:0;padding:0;display:grid;gap:clamp(34px,5vh,58px)}
.fr-station{border-top:1px solid var(--hairline);padding-top:18px;position:relative}
.fr-station-nr{color:var(--text);letter-spacing:.2em}
.fr-station-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(21px,2.2vw,30px);color:var(--tinte);margin:4px 0 14px}
.fr-station-paar{display:grid;grid-template-columns:1fr 1fr;gap:18px clamp(20px,3vw,44px)}
.fr-station-paar p{margin:0;line-height:1.55}
.fr-station-rolle{margin:0 0 6px!important}
.fr-station-du .fr-station-rolle{color:var(--tinte)}
.fr-station-fuchs .fr-station-rolle{color:var(--gruen)}
.fr-spur-schluss{margin-top:34px;font-family:'Space Grotesk',sans-serif;font-weight:700;
  font-size:clamp(19px,2vw,26px);color:var(--tinte)}
.fr-spur-stifte{letter-spacing:.08em;margin-right:10px}
.fr-stift-du{color:var(--tinte)}
.fr-stift-fuchs{color:var(--gruen)}
@media (max-width:760px){
  .fr-spur-lage{grid-template-columns:44px minmax(0,1fr);gap:0 16px}
  .fr-spur-name{display:none}
  .fr-station-paar{grid-template-columns:1fr}
}