/* ============================================================
   PIN-POSITIONEN — Teil A: die Anzeige
   Baut auf tokens.css + seite.css (Chrome, .kapitel, .dunkel).
   Ein visueller Schwerpunkt: die dunkle Bühne mit dem Instrument.
   ============================================================ */

.sr-nur{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pins [hidden]{display:none !important}

/* ---------- Kopf ----------
   Überschrift und Kopfbild stehen im Seiten-Hero (block_seitenhero) wie auf
   jeder anderen Unterseite. Hier steht nur noch, was diese Seite ausmacht:
   der Stand von heute — und links davon, wenn es eines gibt, das Wettspiel.
   Die Zeile bleibt flach, damit das Instrument früh im Bild ist. */
.pin-kopfzeile{padding-top:clamp(26px,4vw,46px)}
.pin-kopf{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:30px}
.pin-kopf .pin-ws{margin-left:auto}
.pin-kicker{color:var(--gruen)}
.pin-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.045em;line-height:.9;font-size:clamp(36px,5.6vw,88px);color:var(--tinte);margin:10px 0 14px}
.pin-kopf .lead{font-size:19px;font-weight:300;line-height:1.55;color:var(--sekundaer);max-width:52ch}

.pin-plakette{display:flex;align-items:center;gap:12px;border:1px solid var(--linie-karte);border-radius:var(--r-karte);padding:14px 18px;background:#fff;box-shadow:var(--schatten-karte)}
.pin-plakette b{display:block;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--tinte)}
.pin-plakette small{display:block;font-size:12.5px;color:var(--muted);margin-top:3px}
.pin-punkt{flex:none;width:10px;height:10px;border-radius:50%;background:var(--gruen);box-shadow:0 0 0 4px rgba(31,132,70,.16)}
.pin-plakette.zustand-alt .pin-punkt,.pin-plakette.zustand-leer .pin-punkt,
.pin-plakette.zustand-aus .pin-punkt{background:var(--muted);box-shadow:0 0 0 4px rgba(107,117,110,.14)}

.pin-ws{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.pin-ws .eyebrow{color:var(--gruen)}
.pin-ws-titel{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--tinte)}

/* ---------- Die dunkle Bühne ---------- */
.pin-buehne{background:var(--tanne);color:#fff;padding:clamp(28px,4vw,52px) 0 var(--luft)}
.pin-alt-band{font-size:14px;font-weight:500;color:rgba(255,255,255,.75);background:rgba(7,48,31,.55);border-left:3px solid var(--lime);margin:0 var(--inset) 26px;padding:12px 16px;border-radius:0 10px 10px 0}
.pin-alt-band b{color:#fff}
.pin-alt-band.kapitel{padding-left:16px;padding-right:16px}

.pin-instrument{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(26px,4.5vw,72px);align-items:center}
@media (max-width:900px){.pin-instrument{grid-template-columns:1fr;gap:8px}}

/* Das Grün */
.pin-gruen{margin:0}
.pin-svg{display:block;width:100%;height:auto;max-height:74svh}
.pin-g1{stop-color:#a7de74}
.pin-g2{stop-color:#7dbb4d}
.pin-schatten{fill:var(--pine);opacity:.55;transform:translate(0,10px);filter:blur(9px)}
.pin-pfad{stroke:#5d9a3c;stroke-width:2.5}
.pin-raster line{stroke:rgba(7,48,31,.5);stroke-width:2;stroke-linecap:round}
.pin-brief{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;fill:rgba(7,48,31,.52);text-anchor:middle;transition:fill var(--t-schnell),font-size var(--t-schnell)}
.pin-brief.an{display:none} /* der aktive Buchstabe steht auf der Fahne */
.pin-fahne .pin-f-fuss{fill:#fff;stroke:var(--pine);stroke-width:2}
.pin-fahne .pin-f-stange{stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.pin-fahne .pin-f-tuch{fill:#fff;stroke:var(--pine);stroke-width:1}
/* 13px auf dem groesseren Tuch — dieselbe Fahne wie in der App (runde.php).
   Die Grundlinie -29,3 im Markup rechnet mit genau dieser Groesse. */
.pin-fahne .pin-f-brief{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;fill:var(--pine);text-anchor:middle}
.pin-leer-text{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase;fill:rgba(255,255,255,.55);text-anchor:middle}
.pin-gruen-fuss{display:block;text-align:center;color:rgba(255,255,255,.45);margin-top:10px}

/* Werte rechts */
.pin-w-kicker{color:var(--lime)}
.pin-w-name{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(22px,2.6vw,32px);margin:6px 0 18px;min-height:1.1em}
.pin-feldzeile{display:flex;align-items:center;gap:18px;padding:16px 0;border-top:1px solid var(--hairline-dunkel)}
.pin-feld{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(52px,6vw,76px);line-height:1;color:var(--lime);min-width:1.1em}
.pin-zone{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(17px,1.9vw,22px);text-transform:uppercase;letter-spacing:.02em}
.pin-zone small{display:block;font-family:'Hanken Grotesk',sans-serif;font-weight:400;font-size:12.5px;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.55);margin-top:5px}
.pin-w-stand{margin-top:12px;color:rgba(255,255,255,.45)}

/* ---------- Bahnleiste ---------- */
.pin-railzeile{margin-top:clamp(26px,4vw,44px)}
.pin-rail{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding:4px 2px 10px;scrollbar-width:none}
.pin-rail::-webkit-scrollbar{display:none}
.pin-chip{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:64px;min-height:76px;padding:9px 10px 7px;background:rgba(7,48,31,.55);border:1px solid transparent;border-radius:var(--r-karte);color:rgba(255,255,255,.75);cursor:pointer;transition:background var(--t-schnell),border-color var(--t-schnell),color var(--t-schnell)}
.pin-chip:hover{background:rgba(7,48,31,.85);color:#fff}
.pin-chip[aria-selected="true"]{background:var(--lime);border-color:var(--lime);color:var(--pine)}
.pin-chip:focus-visible{outline:2.5px solid var(--lime);outline-offset:2px}
.pin-chip[aria-selected="true"]:focus-visible{outline-color:#fff}
.pin-c-nr{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px}
.pin-c-svg{width:30px;height:30px}
.pin-c-svg path{fill:rgba(255,255,255,.28)}
.pin-chip[aria-selected="true"] .pin-c-svg path{fill:rgba(7,48,31,.3)}
.pin-c-dot{fill:#fff}
.pin-chip[aria-selected="true"] .pin-c-dot{fill:var(--pine)}
.pin-c-par{color:currentColor;opacity:.65}
.pin-wink{color:rgba(255,255,255,.45);margin-top:2px}

/* ---------- Karte ---------- */
.pin-karteblock{margin-top:clamp(34px,5vw,60px);border-top:1px solid var(--hairline-dunkel);padding-top:26px}
.pin-karte-kopf{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:6px}
.pin-karte-kopf .eyebrow{color:var(--lime)}
.pin-karte-lead{color:rgba(255,255,255,.6)}
.pin-karte svg{display:block;width:100%;height:auto;max-height:88svh}
.pin-mk{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform var(--t-schnell) var(--ease)}
.pin-mk:hover{transform:scale(1.55)}
.pin-mk circle{fill:#fff;stroke:var(--pine);stroke-width:.8}
.pin-mk line{stroke:#fff;stroke-width:1.1}
.pin-mk path{fill:#fff;stroke:var(--pine);stroke-width:.4}
.pin-mk.leer{opacity:.35}
.pin-mk.an circle{fill:var(--lime)}
.pin-mk.an path{fill:var(--lime)}

/* Der Absprung von der Karte: fliegendes Grün über der Seite */
.pin-flug{position:fixed;z-index:140;pointer-events:none;will-change:transform;filter:drop-shadow(0 26px 40px rgba(6,26,17,.5))}
@media (prefers-reduced-motion: reduce){.pin-mk{transition:none}.pin-mk:hover{transform:none}}

/* ---------- Touch: Landung direkt im Plan (Kärtchen statt Sprung nach oben) ---------- */
.pin-lupe-fond{position:fixed;inset:0;z-index:135;background:rgba(6,26,17,.45)}
.pin-lupe{position:fixed;z-index:140;will-change:transform;filter:drop-shadow(0 26px 40px rgba(6,26,17,.55))}
.pin-lupe-info{position:fixed;left:50%;transform:translateX(-50%);z-index:141;width:min(88vw,420px);background:var(--tanne);border:1px solid var(--hairline-dunkel);border-radius:var(--r-karte);padding:16px 18px;color:#fff;box-shadow:var(--schatten-plakette)}
.pin-lupe-info .zeile1{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.pin-lupe-info .zeile2{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.pin-lupe-info .feld{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;line-height:1;color:var(--lime)}
.pin-lupe-info .zone{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
.pin-lupe-info .zu{margin-top:12px;width:100%;min-height:44px;background:rgba(255,255,255,.1);border:1px solid var(--hairline-dunkel);border-radius:var(--r-pill);color:#fff;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}

/* ---------- Touch: Scroll-Hold — das Instrument klebt, Scrollen blättert ---------- */
.pin-wink-touch{display:none}
@media (max-width:900px) and (pointer:coarse){
  .pin-wink-maus{display:none}
  .pin-wink-touch{display:inline}
  .pin-track{height:calc(100svh + 17 * 26svh)}
  /* top 64px = mobile Headerhöhe, sonst verdeckt der klebende Header das Grün */
  .pin-track .pin-instrument{position:sticky;top:64px;max-height:calc(100svh - 64px);overflow:hidden;gap:2px;align-content:start;padding-top:8px;padding-bottom:8px}
  .pin-track .pin-svg{max-height:36svh}
  .pin-track .pin-gruen-fuss{margin-top:2px}
  /* Beim Durchblättern ist die Bahnnummer die Orientierung — groß */
  .pin-track .pin-w-kicker{margin-top:2px;font-size:22px;letter-spacing:.04em;color:var(--lime)}
  .pin-track .pin-w-name{font-size:16px;color:rgba(255,255,255,.85);margin:2px 0 6px}
  /* Finger treffen kein 12px-Grün: die ganze Spielbahn fängt den Tipp */
  .pin-karte .pp-hit{stroke-width:36}
  .pin-track .pin-feldzeile{padding:7px 0;gap:14px}
  .pin-track .pin-feld{font-size:40px}
  .pin-track .pin-zone{font-size:15px}
  .pin-track .pin-zone small{margin-top:2px;font-size:11.5px}
  .pin-track   .pin-track   .pin-track   .pin-track .pin-w-stand{display:none}
}

/* ---------- Mitnehmen ---------- */
.pin-mitnehmen{padding-top:var(--luft-s);padding-bottom:var(--luft-s)}
.pin-mit-karte{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;border:1px solid var(--linie-karte);border-radius:var(--r-karte);padding:22px 26px}
.pin-mit-karte .eyebrow{color:var(--gruen);margin-bottom:8px}
.pin-mit-karte .t-text{max-width:64ch}

/* ---------- Erklärstück ---------- */
.pin-erklaer{background:var(--mint);padding:var(--luft-s) 0}
.pin-erklaer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(180px,.5fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:700px){.pin-erklaer-grid{grid-template-columns:1fr}}
.pin-erklaer .eyebrow{color:var(--gruen);margin-bottom:10px}
.pin-erklaer-text{max-width:70ch}
.pin-legende{margin:0;text-align:center}
.pin-legende svg{width:min(200px,100%);height:auto}
.pin-l-pfad{fill:#bcd9a6;stroke:var(--gruen);stroke-width:2}
.pin-l-linie{stroke:rgba(20,35,27,.55);stroke-width:2}
.pin-l-brief{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;fill:var(--tinte);text-anchor:middle}
.pin-l-pfeil{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted);text-anchor:middle}
.pin-legende figcaption{color:var(--muted);margin-top:8px}

/* ---------- Tabelle (No-JS, Screenreader, Grundlage der Werte) ---------- */
.pin-tabellenblock{padding-bottom:var(--luft)}
.pin-tab-titel{color:var(--gruen);margin-bottom:14px}
.pin-tab-scroll{overflow-x:auto}
.pin-tabelle{width:100%;border-collapse:collapse;font-size:14.5px}
.pin-tabelle th,.pin-tabelle td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie-karte);color:var(--text)}
.pin-tabelle thead th{font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--hairline)}
.pin-tabelle tbody th{font-weight:600;color:var(--tinte)}
.pin-tab-feld{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--gruen)}
/* Mit laufendem Skript verschwindet die Tabelle vom Bildschirm (bleibt für
   Screenreader und Druck) — ohne Skript ist sie die Anzeige. */
.js .pin-tabellenblock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Druckansicht ---------- */
.pin-druck{display:none}
@media print{
  @page{size:A4 portrait;margin:9mm}
  body{background:#fff}
  .header,.footer,.schnell,.mobilmenu,.progress,.lightbox,.pin-buehne,.pin-mitnehmen,.pin-erklaer,.pin-kopfzeile,.cta,.pin-tabellenblock{display:none !important}
  .js .pin-tabellenblock{display:none !important}
  .fluss{padding-top:0 !important}
  .pin-druck{display:block;color:#000}
  .pin-d-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;border-bottom:.6mm solid #000;padding-bottom:2.5mm;margin-bottom:3mm}
  .pin-d-kopf b{font-family:'Space Grotesk',sans-serif;font-size:13pt;text-transform:uppercase;letter-spacing:-.01em;display:block}
  .pin-d-kopf span{font-size:9pt}
  .pin-d-hinweis{max-width:60mm;text-align:right;color:#000;font-size:7pt;line-height:1.35}
  .pin-d-spalten{display:grid;grid-template-columns:1fr 1fr;column-gap:8mm}
  .pin-d-spalte:first-child{border-right:.2mm dashed #999;padding-right:4mm}
  .pin-d-zeile{display:flex;align-items:center;gap:3mm;padding:1.55mm 0;border-bottom:.2mm solid #bbb;break-inside:avoid}
  .pin-d-nr{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:11pt;width:8mm}
  .pin-d-svg{width:13mm;height:13mm;flex:none}
  .pin-d-svg path{fill:none;stroke:#000;stroke-width:4}
  .pin-d-svg line{stroke:#000;stroke-width:2.5}
  .pin-d-svg circle{fill:#000}
  .pin-d-feld{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13pt;width:7mm;text-align:center}
  .pin-d-text{font-size:8.5pt;line-height:1.3}
  .pin-d-falz{margin-top:4mm;text-align:center;font-size:7pt;color:#777;border-top:.2mm dashed #999;padding-top:1.5mm}
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .pin-brief,.pin-chip{transition:none}
}
@media (max-width:560px){
  .pin-kopf{align-items:flex-start;flex-direction:column}
    .pin-mit-karte{padding:18px}
}