/* ============================================================
   PLATZREGELN & ETIKETTE
   Vorne die Karte als Regelauskunft (viewBox-Kamerafahrt,
   Regel-Pins aus dem prregeln-Block), das Scharnier sind die
   fünf Pfostenfarben, hinten die Runde als Sticky-Erzählung.
   Basis (Header, Footer, Hero, Kapitel, Buttons): seite.css.
   ============================================================ */

:root{
  /* Sachfarben der realen Markierungspfosten — keine Gestaltungsfarben.
     Sie erscheinen ausschließlich in Pfosten-SVGs, Karten-Pins und
     Stationsmarken, nie als Fläche, Button oder Schrift; Textkontrast
     kommt immer aus den regulären Schriftfarben. */
  --pfosten-aus:#f4f2ec;     /* Weiß — leicht gebrochen, damit es auf Weiß sichtbar bleibt */
  --pfosten-verbot:#2e8b46;  /* Grüner Kopf / grünes Häubchen */
  --pfosten-bia:#2a6fb0;     /* Blau — Boden in Ausbesserung */
  --pfosten-gelb:#e3b422;    /* Penalty Area gelb */
  --pfosten-rot:#cc4433;     /* Penalty Area rot */
}

/* ---------------- REGEL-PINS (Karte, Chips, Tafeln) ----------------
   Ein Pin ist ein kleiner Punkt in der Sachfarbe mit dunkler Kante,
   damit Weiß und Gelb auch auf hellen Flächen bestehen. */
.prk-pin{display:inline-block;width:11px;height:11px;border-radius:50%;border:1.5px solid rgba(20,35,27,.45);vertical-align:-1px;flex:none}
.prk-pin.f-weiss{background:var(--pfosten-aus)}
.prk-pin.f-haube{background:linear-gradient(180deg,var(--pfosten-verbot) 0 42%,var(--pfosten-aus) 42%)}
.prk-pin.f-gruen{background:var(--pfosten-verbot)}
.prk-pin.f-blau{background:var(--pfosten-bia)}
.prk-pin.f-gelb{background:var(--pfosten-gelb)}
.prk-pin.f-rot{background:var(--pfosten-rot)}
.prk-pin.f-gelbrot{background:linear-gradient(90deg,var(--pfosten-gelb) 0 50%,var(--pfosten-rot) 50%)}
.prk-pin.f-ohne{background:var(--mint);border-style:dashed}

/* ---------------- KAPITEL 01 — DIE KARTE ---------------- */
.prk-buehne{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start;padding:0 var(--inset) var(--luft)}
.prk-karte{position:sticky;top:96px;background:var(--tanne);border-radius:var(--r-flaeche);overflow:hidden;aspect-ratio:588/850;max-height:calc(100svh - 120px)}
.prk-karte svg{display:block;width:100%;height:100%}
.prk-platzhalter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--lime)}
.prk-platzhalter svg{position:absolute;inset:8%;width:84%;height:84%}
.prk-laed{color:rgba(255,255,255,.55)}
.prk-karte noscript img{display:block;width:100%;height:auto}
.prk-reset{position:absolute;right:14px;top:14px;z-index:3;background:rgba(7,48,31,.82);color:#fff;border:1px solid var(--hairline-dunkel);border-radius:var(--r-pill);padding:9px 16px;cursor:pointer;transition:background var(--t-schnell)}
.prk-reset:hover{background:var(--gruen)}

/* Karte: Grundausstattung (Geländefarben, .pp-hit, .pp-glow, Nummern)
   kommt aus seite.css. Hier nur: die gewählte Bahn zeichnet ihren Weg
   per dasharray auf (platzregeln.js setzt pathLength="1" an .pp-glow). */
.prkarte .pp-hit{stroke-width:26}
.js .prkarte .pp-glow{stroke-dasharray:1;stroke-dashoffset:1}
.js .prkarte .pp-glow.an{animation:prk-weg .9s var(--ease) forwards}
@keyframes prk-weg{to{stroke-dashoffset:0}}
.prk-pin-svg{cursor:pointer}
.prk-pin-svg .stiel{stroke:rgba(255,255,255,.85);stroke-width:1.6}
.prk-pin-svg .kopf-haube,.prk-pin-svg .kopf-halb{pointer-events:none}
.prk-pin-svg circle{stroke:rgba(7,48,31,.65);stroke-width:1.4}
.prk-pin-svg.an .kopf{filter:drop-shadow(0 0 6px rgba(204,255,0,.9))}

/* Zahlenleiste 1–18 */
.prk-leiste{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.prk-nr{width:40px;height:40px;border-radius:50%;border:1px solid var(--hairline);background:#fff;color:var(--text);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;transition:background var(--t-schnell),color var(--t-schnell),border-color var(--t-schnell)}
.prk-nr:hover{border-color:var(--gruen);color:var(--gruen)}
.prk-nr.hat{border-color:var(--gruen)}
.prk-nr.hat::after{content:"";display:block;width:4px;height:4px;border-radius:50%;background:var(--gruen);margin:-1px auto 0}
.prk-nr[aria-pressed="true"]{background:var(--tanne);border-color:var(--tanne);color:#fff}
.prk-nr:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

/* Bahn-Tafeln: ohne Skript stehen alle 18 untereinander (volle Auskunft),
   mit Skript zeigt die aria-live-Region nur die gewählte. */
.prk-tafel{border-top:1px solid var(--hairline);padding:22px 0 26px}
.js .prk-tafel{display:none}
.js .prk-tafel.an{display:block}
.prk-t-kicker{color:var(--gruen)}
.prk-t-werte{color:var(--muted);letter-spacing:.08em}
.prk-t-name{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:26px;color:var(--tinte);margin:6px 0 14px}
.prk-t-hier{color:var(--muted);margin-bottom:10px}
.prk-regeln{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.prk-regeln li{border-left:2px solid var(--gruen);padding-left:14px}
.prk-r-marke{display:inline-flex;align-items:center;gap:7px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.prk-regeln strong{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--tinte)}
.prk-regeln p{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:15.5px;line-height:1.6;color:var(--text);margin-top:3px}
.prk-leer{font-family:'Hanken Grotesk',sans-serif;font-weight:300;font-size:17px;line-height:1.55;color:var(--sekundaer);margin-bottom:16px}
.prk-grund{border:1px solid var(--linie-karte);border-radius:var(--r-karte);padding:0 16px;margin-bottom:16px}
.prk-grund summary{font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gruen);padding:13px 0;cursor:pointer;list-style-position:inside}
.prk-grund summary:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.prk-grund ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px;padding:2px 0 16px}
.prk-grund li{font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:14.5px;line-height:1.55;color:var(--text)}
.prk-grund li strong{font-weight:600;color:var(--tinte)}
.prk-teilen{margin-top:2px}
.prk-wink{border-top:1px solid var(--hairline);padding-top:14px;color:var(--muted)}

@media (max-width:900px){
  /* minmax(0,…): sonst zwingt die einzeilige Zahlenleiste (18 × 48 px)
     das Grid über die Viewportbreite — horizontales Scrollen der Seite */
  .prk-buehne{grid-template-columns:minmax(0,1fr);gap:26px}
  .prk-karte{position:static;max-height:none}
  /* Zahlenleiste: einzeilig wischbar, senkrechtes Scrollen bleibt frei */
  .prk-leiste{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;padding-bottom:6px;scrollbar-width:none}
  .prk-leiste::-webkit-scrollbar{display:none}
  .prk-nr{flex:none}
}

/* ---------------- KAPITEL 02 — FÜNF FARBEN (dunkel) ---------------- */
.prfarben{background:var(--tanne);color:#fff;padding-bottom:var(--luft)}
.prf-reihe{list-style:none;padding-left:0;display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:0 var(--inset)}
.prf-pfosten h3{color:#fff;margin:14px 0 8px}
.prf-pfosten p{color:rgba(255,255,255,.72)}
/* Aufbau per stroke-dasharray, sobald die Sektion sichtbar wird (JS setzt
   .an auf .prf-reihe). Ohne Skript stehen die Pfosten fertig da. */
.js .prf-reihe line{stroke-dasharray:100;stroke-dashoffset:100}
.js .prf-reihe.an line{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease)}
.js .prf-reihe.an .prf-kopf{transition-delay:.55s}
.js .prf-reihe.an .prf-boden{transition-delay:.7s}
.js .prf-reihe.an .prf-pfosten:nth-child(2) line{transition-delay:.12s}
.js .prf-reihe.an .prf-pfosten:nth-child(2) .prf-kopf{transition-delay:.62s}
.js .prf-reihe.an .prf-pfosten:nth-child(3) line{transition-delay:.24s}
.js .prf-reihe.an .prf-pfosten:nth-child(3) .prf-kopf{transition-delay:.74s}
.js .prf-reihe.an .prf-pfosten:nth-child(4) line{transition-delay:.36s}
.js .prf-reihe.an .prf-pfosten:nth-child(5) line{transition-delay:.48s}
@media (max-width:900px){
  .prf-reihe{grid-template-columns:repeat(2,1fr);gap:26px 20px}
}

/* ---------------- KAPITEL 03 — EINE RUNDE ANSTAND ---------------- */
.et-buehne{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:44px;align-items:start;padding:0 var(--inset) var(--luft)}
.et-bild{position:sticky;top:96px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-flaeche);background:var(--tanne)}
.et-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--t-lang) var(--ease)}
.et-bild img.an{opacity:1}

/* Spur der Runde: sechs Marken, ein Golfball gleitet zur aktiven Station.
   Reine Komfort-Navigation — ohne Skript ausgeblendet (auto-Spalte kollabiert). */
.et-spur{display:none}
.js .et-spur{position:sticky;top:110px;display:flex;flex-direction:column;align-items:center;gap:44px;padding:5px 0}
.et-spur::before,.et-spur::after{content:"";position:absolute;left:50%;top:19px;bottom:19px;width:2px;margin-left:-1px}
.et-spur::before{background:var(--hairline)}
.et-spur::after{background:var(--gruen);transform:scaleY(var(--f,0));transform-origin:50% 0;transition:transform var(--t-mittel) var(--ease)}
/* Die Marken sind Löcher: dunkle Öffnung mit Innenschatten, Ziffer hell.
   Besuchte Löcher bekommen den grünen Rand, das aktive eine Lime-Ziffer —
   der Ball liegt dann sichtbar am Lochrand. */
.et-marke{position:relative;z-index:2;width:28px;height:28px;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);color:rgba(255,255,255,.72);font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:border-color var(--t-schnell),color var(--t-schnell)}
.et-marke:hover{border-color:var(--gruen);color:#fff}
.et-marke.war{border-color:var(--gruen);color:var(--lime)}
.et-marke.aktiv{border-color:var(--gruen);color:var(--lime)}
/* Der Ball rollt die Spur entlang (Schritt = Markenhöhe 28 + Lücke 44);
   die Fahrt samt Lip-out choreografiert platzregeln.js per WAAPI. */
.et-ball{position:absolute;z-index:3;left:50%;top:5px;margin-left:-9px;pointer-events:none;filter:drop-shadow(0 2px 4px rgba(11,65,43,.35))}
.et-ball svg,.et-ball img{display:block;width:18px;height:18px}

.et-station{border-top:1px solid var(--hairline);padding:34px 0 40px}
.et-station:first-child{border-top:0;padding-top:0}
/* Aktive Station voll, die anderen treten zurück (nur im Spalten-Layout) */
@media (min-width:901px){
  .js .et-station{opacity:.45;transition:opacity var(--t-mittel) var(--ease)}
  .js .et-station.aktiv{opacity:1}
}
/* Punkte tröpfeln beim ersten Sichtbarwerden gestaffelt ein */
.js .et-punkte li{opacity:0;transform:translateY(14px)}
.js .et-station.gesehen .et-punkte li{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .55s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.et-s-bild{display:none;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-flaeche);margin-bottom:18px}
.et-eyebrow{color:var(--gruen);margin-bottom:8px}
.et-station h3{color:var(--tinte);margin-bottom:12px}
/* Kennzahl: markant, aber im Textmaß — nicht die Plakatgröße des Heros */
.et-zahl{font-size:clamp(26px,2.4vw,36px);line-height:1;color:var(--tinte);margin:4px 0 12px}
.et-punkte{list-style:none;padding:0;display:flex;flex-direction:column;gap:9px}
.et-punkte li{position:relative;padding-left:20px}
.et-punkte li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--lime);border:1.5px solid var(--gruen)}
@media (max-width:900px){
  .et-buehne{grid-template-columns:1fr;gap:0}
  .et-bild{display:none}
  .js .et-spur{display:none}
  .et-s-bild{display:block}
}

/* ---------------- KAPITEL 04 — FROST UND WINTER (mint) ---------------- */
.prwinter{background:var(--mint);padding-bottom:var(--luft)}
.prwinter .kapitel-marke{border-color:rgba(20,35,27,.18)}
.prw-inhalt{padding:0 var(--inset);max-width:76ch;display:flex;flex-direction:column;gap:18px}
.prw-inhalt .t-text{font-size:17px}
.prw-pdf{margin-top:6px}

/* ---------------- KAPITEL 05/06 — WORTLAUT ---------------- */
.prr-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 var(--inset) 26px;padding:14px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.prr-stand{color:var(--muted)}
.prr-liste{list-style:none;padding:0 var(--inset);display:flex;flex-direction:column}
.prr-regel{border-bottom:1px solid var(--linie-karte);padding:22px 0;scroll-margin-top:96px}
.prr-r-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.prr-nr{flex:none;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--gruen);border:1px solid var(--gruen);border-radius:var(--r-pill);padding:4px 12px;min-width:44px;text-align:center}
.prr-nr:hover{background:var(--mint)}
.prr-nr:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.prr-r-kopf h3{font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:18px;color:var(--tinte)}
.prr-meta{display:inline-flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.prr-chip{display:inline-flex;align-items:center;gap:6px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--linie-karte);border-radius:var(--r-pill);padding:5px 12px}
a.prr-chip{color:var(--gruen);border-color:var(--gruen)}
a.prr-chip:hover{background:var(--mint)}
.prr-regel .t-text{max-width:80ch}
.prr-regel:target{background:linear-gradient(90deg,rgba(204,255,0,.14),rgba(204,255,0,0) 70%)}
.prregeln{padding-bottom:var(--luft-s)}
.prordnung{padding-bottom:var(--luft)}
.pro-zusatz{margin:26px var(--inset) 0;border:1px solid var(--linie-karte);border-radius:var(--r-karte);padding:20px 22px;display:flex;flex-direction:column;gap:10px;max-width:86ch}
.pro-zusatz-titel{color:var(--muted)}

/* ---------------- SIGNALTÖNE (Tafel im Wortlaut-Kapitel) ---------------- */
.prsignale{background:var(--pine);color:#fff;margin:0 var(--inset) var(--luft);border-radius:var(--r-karte)}
.prs-tafel{padding:30px 34px 34px}
.prs-intro{color:rgba(255,255,255,.72);margin-bottom:20px}
.prs-liste{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px}
.prs-liste li{display:grid;grid-template-columns:132px 200px minmax(0,1fr);gap:8px 20px;align-items:center}
.prs-impuls rect{fill:var(--lime)}
.prs-toene{color:#fff}
.prs-bedeutung{color:rgba(255,255,255,.72)}
@media (max-width:760px){
  .prs-liste li{grid-template-columns:1fr;gap:6px}
  .prsignale{margin:0 0 var(--luft);border-radius:0}
  .prs-tafel{padding:26px var(--inset) 30px}
}

/* ---------------- KAPITEL 07 — TURNIERE & RPR ---------------- */
.prdokumente{padding-bottom:var(--luft)}
.prd-karten{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:0 var(--inset)}
.prd-karte{border:1px solid var(--linie-karte);border-radius:var(--r-flaeche);padding:28px 28px 26px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.prd-karte h3{color:var(--tinte)}
.prd-fakten{list-style:none;padding:0;display:flex;flex-direction:column}
.prd-fakten li{font-size:15.5px;padding:10px 0;border-bottom:1px solid var(--linie-karte)}
.prd-fakten li:last-child{border-bottom:0}
@media (max-width:860px){
  .prd-karten{grid-template-columns:1fr}
}

/* ---------------- ABSCHLUSS-CTA (dunkel) ---------------- */
.prcta{background:var(--tanne);color:#fff;padding:var(--luft) var(--inset);display:flex;align-items:flex-end;justify-content:space-between;gap:44px;flex-wrap:wrap}
.prcta h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5vw,76px);font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.92;color:#fff}
.prc-text{color:rgba(255,255,255,.72);margin-top:18px;max-width:52ch}
.prc-aktion{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.prc-neben{color:rgba(255,255,255,.62)}
.prc-neben a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.prc-neben a:hover{color:var(--lime)}

/* ---------------- REDUZIERTE BEWEGUNG ----------------
   Kamerafahrt springt (macht platzregeln.js), Stationen sind eine normale
   Abschnittsfolge, Pfosten und Bahnwege stehen fertig da. */
@media (prefers-reduced-motion:reduce){
  .js .prf-reihe line{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .js .prkarte .pp-glow{stroke-dasharray:none;stroke-dashoffset:0}
  .js .prkarte .pp-glow.an{animation:none}
  .et-buehne{grid-template-columns:1fr}
  .et-bild{display:none}
  .js .et-spur{display:none}
  .et-s-bild{display:block}
  .js .et-station{opacity:1;transition:none}
  .js .et-punkte li{opacity:1;transform:none;transition:none}
}