/* PRACTX Darkmode-Auflage für die Betreiber-Vorlage v29.
   Es werden ausschließlich Farben, Flächen, Rahmen, Radien und die Größe des
   Fließtextes überschrieben. Keine Rasterspalten, keine Seitenverhältnisse,
   keine Abstände der Vorlage. Die Vorlagen-CSS bleibt unberührt im <style>-Block
   stehen; hier gewinnt nur die spätere Quellreihenfolge.
   Die Schriften sind die der Vorlage (System-Schrift) — v4 lädt keine Fontdatei. */

/* ---------- 1. Farbtoken ---------- */
:root{
  --page:#000000;
  --paper:#13171C;
  --ink:#FFFFFF;
  --muted:#808080;
  --soft:#2A323D;
  --navy:#ED1E79;
  --green:#02CEDD;
  --pink:#ED1E79;
  --pink-mid:#B7175D;
  --pink-dark:#801041;
  --teal:#02CEDD;
  --teal-dark:#016F77;
  --blau:#009FE3;
  --lime:#D2EF66;
  --lime-mid:#EDBB40;
  /* Zwei Farben der App-Palette, die der Entwurf nicht brauchte: Lemon und
     Rosa tragen zwei der zehn Kategorie-Karten auf „Regeln & Philosophie". */
  --lemon:#E0FE7D;
  --rosa:#F3BEFF;
  --orange:#FF8C1A;
  --sun:#F65549;
  --purple:#C5ACFF;
  --gruen:#99FF95;
  --slate-hell:#1F1F29;
  --slate-dunkel:#0C0C11;
  --line:#242A33;
  /* App-Standard: alle Rechtecke tragen Radius 10. */
  --radius:10px;
  --small:10px;
}

/* ---------- 2. Blockwechsel: jeder zweite Block steht direkt auf Schwarz ----------
   Gezählt wird ab dem obersten Block (Hero): 1., 3., 5. … liegen auf Schwarz,
   2., 4., 6. … auf der Blockfläche #13171C.
   Unterseiten tragen als erstes Kind von #main die Brotkrumen-Zeile .page-trail.
   Ein blosses nth-child(odd) zählt diese Zeile mit und kippte dort die Reihenfolge —
   deshalb die zweite, engere Regel für genau diesen Fall.
   Die drei Flächen-Variablen gelten für alles, was in einem Block liegt:
   --embed-bg  eingebettete Fläche (Karte, Rechner, Callout)
   --embed-alt Fläche in einer eingebetteten Fläche (Bild, Vorschau, Hover)
   --video-bg  Videoflächen, die auf Blockfläche schwarz bleiben sollen         */
#main > .section:nth-child(odd){--block-bg:transparent;--embed-bg:var(--paper);--embed-alt:var(--page);--video-bg:var(--paper)}
#main > .section:nth-child(even){--block-bg:var(--paper);--embed-bg:var(--soft);--embed-alt:var(--paper);--video-bg:var(--page)}
#main > .page-trail ~ .section:nth-child(even){--block-bg:transparent;--embed-bg:var(--paper);--embed-alt:var(--page);--video-bg:var(--paper)}
#main > .page-trail ~ .section:nth-child(odd){--block-bg:var(--paper);--embed-bg:var(--soft);--embed-alt:var(--paper);--video-bg:var(--page)}
/* Die Preisblöcke stehen immer auf Schwarz; ihre Karten tragen die Verläufe. */
#main > .page-trail ~ .section.on-black,
#main > .section.on-black{--block-bg:transparent;--embed-bg:var(--paper);--embed-alt:var(--page);--video-bg:var(--paper)}
/* Die Gegenrichtung: ein Block, der immer auf der Blockfläche #13171C steht,
   gleich an welcher Stelle der Folge. Seit dem 29.09.2026 für den Preis von
   Spieler- & Eltern-Pro, der zwischen zwei Blöcken auf Schwarz liegt. */
#main > .page-trail ~ .section.auf-flaeche,
#main > .section.auf-flaeche{--block-bg:var(--paper);--embed-bg:var(--soft);--embed-alt:var(--paper);--video-bg:var(--page)}
#main > .section{background:var(--block-bg,var(--paper))}

/* ---------- 3. Grundflächen ---------- */
body{background:var(--page);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline-color:var(--teal)}
.skip{background:var(--soft);color:var(--ink)}
.no-js{background:var(--paper);color:var(--ink)}

.section{background:var(--paper);border:0;box-shadow:none}
.section.dark{color:var(--ink)}
/* Fließtext bleibt auch im dunklen Block weiß (Abschnitt 13); klein und grau
   bleiben dort nur die Kleintexte. */
.section.dark p,
.section.dark .trial-copy{color:var(--ink)}
.section.dark .fine,
.section.dark .trial-safety{color:var(--muted)}
.section.dark .eyebrow{color:var(--teal)}
/* Die Text-Links im Inhalt sind seit v9 grau statt teal — siehe Abschnitt 5a.
   Der dunkle Block braucht eine eigene Zeile, weil die Vorlage hier mit
   .section.dark a.text-link eine engere Regel setzt als das bloße .text-link. */
.section.dark a.text-link{color:var(--muted)}           /* Grau #808080 */
.section.dark a.text-link:hover{color:var(--ink)}       /* Weiß #FFFFFF */

/* ---------- 4. Navigation und Editor-Leiste ---------- */
.nav-inner{background:rgba(19,23,28,.94);box-shadow:none;border:0}
.nav-link{color:var(--muted)}
.nav-link:hover{background:var(--soft);color:var(--ink)}
.nav-link[aria-current=page]{background:var(--soft);color:var(--teal)}
/* Auf einer Unterseite der Academy (Spiel, Kurzbericht) steht der Punkt
   „Academy" aktiv wie auf der Academy selbst; site.js setzt dort
   aria-current="true" (navbar). Nur am Link: das Kürzel des aktuellen Marktes
   ist ein <span> mit demselben Merkmal und bleibt, wie es ist. */
a.nav-link[aria-current="true"]{background:var(--soft);color:var(--teal)}
.menu-toggle{background:var(--soft);color:var(--ink);border-radius:10px}
.editor-bar{color:var(--muted)}
.switch-title{color:var(--muted)}
.draft-tag{color:var(--ink)}
.market-switch{background:var(--paper);border-radius:10px}
.market-switch button{color:var(--muted);border-radius:10px}
.market-switch button[aria-pressed=true]{background:var(--soft);color:var(--ink)}
.page-trail{color:var(--muted)}

/* ---------- 5. Knöpfe ---------- */
.button{background:var(--pink);color:#fff;border-radius:10px}
.button.secondary{background:var(--soft);color:var(--ink)}
.button.is-pending{background:var(--soft);color:var(--muted);cursor:default}
.store-button{background:var(--embed-bg,var(--soft));color:var(--ink);border:0;border-radius:10px;box-shadow:none}
.store-button:hover{background:var(--embed-bg,var(--soft))}
.store-button.is-pending,
.section.dark .store-button,
.section.dark .store-button.is-pending,
.section.dark .store-button:hover{background:var(--embed-bg,var(--soft));color:var(--muted);cursor:default}
.store-button small{color:var(--muted)}
.store-pending{color:var(--muted)}

/* ---------- 5a. Text-Links im Inhalt: grau statt teal ----------
   Die Links mit Pfeil („Wie Constraints im Basketball helfen →") bleiben als
   interne Verlinkung stehen, treten aber zurück: Grau statt Teal, beim
   Überfahren Weiß. Unterstreichung, Pfeil und Schriftgröße der Vorlage bleiben.
   Navigation, Fußzeile, Knöpfe und der Markt-Umschalter sind nicht betroffen —
   sie tragen keine Klasse .text-link.
   Gesetzt werden die Token --muted (#808080) und --ink (#FFFFFF) statt der
   Zahlen selbst: so bleibt die Auflage an einer Stelle einstellbar, wie im
   ganzen Blatt. Der Hexwert steht im Kommentar dahinter, damit die Farbe
   beim Nachschlagen lesbar ist. */
.text-link{color:var(--muted)}                          /* Grau #808080 */
.text-link:hover{color:var(--ink)}                      /* Weiß #FFFFFF */

/* ---------- 6. Hero ---------- */
.hero-photo{background:var(--embed-bg,var(--paper))}
.hero-photo.hero-photo--mockup{background:transparent;box-shadow:none}
.hero-photo strong{color:var(--ink)}
.asset-type{color:var(--muted)}
.fine,.fit-note,.quiet,.sources,.calc-caption,.constraint-caption{color:var(--muted)}
/* Die teale Über-Überschrift steht seit v7 nur noch im Hero der Startseite.
   Mit v10 trägt sie dort Größe und Schnitt der Subline (20 px am Rechner,
   18 px am Handy) statt der 15 px davor: sie ist die erste Zeile der Seite und
   stand kleiner da als jeder Satz darunter. Teal bleibt — die Farbe ist das
   Einzige, was sie noch von einem Absatz unterscheidet. */
.eyebrow{color:var(--teal)}
.section.hero .eyebrow{font-size:20px;font-weight:400;letter-spacing:normal;line-height:1.55;margin-bottom:16px}
@media(max-width:780px){.section.hero .eyebrow{font-size:18px}}
@media(max-width:460px){.section.hero .eyebrow{font-size:18px}}

/* ---------- 7. Testangebot ---------- */
.trial-badge{background:var(--embed-bg,var(--soft));color:var(--ink);border:0;border-radius:10px}
.trial-badge.pro{background:var(--pink);color:#fff}
.trial-safety{color:var(--muted)}
.trial-strip{border-top:1px solid var(--line)}
.pill-label{background:var(--teal);color:#000;border-radius:10px}

/* ---------- 8. Karten und eingebettete Flächen ---------- */
.card,
.soft .card,
.message,
.topic-link,
.goals-group,
.communication-card,
.parent-summary,
.team-role-note,
.role-row,
.role-switch,
.cost-callout,
.calculator,
.drill-fact,
.dialog-status,
.inline-code{background:var(--embed-bg,var(--soft));color:var(--ink);border:0;border-radius:10px}
.parent-media{background:var(--embed-alt,var(--paper));border-radius:10px}
.topic-link:hover{background:var(--embed-alt,var(--paper))}
.topic-link strong,.goals-group h3,.message blockquote,.video-points dt,.cost-number,.cost-title,.parent-summary-sub{color:var(--ink)}
.message small,.message .message-label,.mode-label,.cost-unit,.role-row span{color:var(--muted)}
.badge-state{background:var(--embed-bg,var(--soft));color:var(--gruen);border-radius:10px}
.badge-state.state-1{background:var(--embed-bg,var(--soft));color:var(--lime)}
.badge-state.state-2{background:var(--embed-bg,var(--soft));color:var(--muted)}
/* ---------- 8a. Schritte: die Zahl trägt den Schritt ----------
   Die graue Fläche hinter der Zahl ist mit v8 entfallen. Die Zahl steht frei,
   48 px und fett, und jeder Schritt hat seine eigene Farbe; die Überschrift
   direkt darunter trägt dieselbe. Der Absatz bleibt weiß (Abschnitt 13).
   Die Vorlage setzt die Zahl in ein 30-px-Quadrat mit Radius — beides wird
   hier zurückgenommen, sonst stünde eine 48-px-Ziffer in einem 30-px-Kasten. */
.steps .step-number{
  display:block;
  width:auto;height:auto;
  background:none;border-radius:0;
  color:inherit;
  font-size:48px;font-weight:700;line-height:1.05;
  margin-bottom:6px;
}
/* Fünf Farben, je eine Stufe: 1 Teal, 2 Grün, 3 Pink, 4 Lila, 5 Blau.
   einfach: Die Liste zählt bis fünf und wiederholt sich nicht. Zwei der drei
   Schrittlisten haben genau drei Einträge (Hallenplanung auf der Vereinsseite,
   die Schritte auf „Basketball-Trainer werden"); die Liste auf „So
   funktioniert's" hat seit Ralfs Vorgabe vom 29.09.2026 vier und trägt die
   Farben seit dem Abend desselben Tages als Fläche statt als Schrift
   (steps--4, unten). Stufe 4 und 5 sind damit Vorrat; ein sechster Schritt
   bliebe weiß. Sobald eine Liste länger wird, gehört hier eine umlaufende Zählung hin — und dann
   besser als Klasse beim Rendern, so wie es die Akzentkarten in Abschnitt 14
   machen. */
.steps>li:nth-child(1) .step-number,.steps>li:nth-child(1) h3{color:var(--teal)}
.steps>li:nth-child(2) .step-number,.steps>li:nth-child(2) h3{color:var(--gruen)}
.steps>li:nth-child(3) .step-number,.steps>li:nth-child(3) h3{color:var(--pink)}
.steps>li:nth-child(4) .step-number,.steps>li:nth-child(4) h3{color:var(--purple)}
.steps>li:nth-child(5) .step-number,.steps>li:nth-child(5) h3{color:var(--blau)}
/* Vier Schritte als farbige Kästchen (Ralfs Vorgabe vom 29.09.2026 abends:
   „die 4 Steps bitte in 4 Kästchen (farbig) 2x2"). Die Klasse steps--4 setzt
   site.js aus der Zahl der Schritte und nur an der Liste auf „So
   funktioniert's"; die übrigen Schrittlisten bleiben wie oben.
   Raster: ab 781 px immer zwei mal zwei, auch am großen Rechner - die vier
   Spalten vom Mittag entfallen. Das Raster streckt jede Zelle auf die Höhe
   ihrer Zeile, deshalb sind die zwei Kästchen einer Zeile gleich hoch.
   Darunter gilt die eine Spalte der Vorlage.
   Kästchen: gefüllt in der Schrittfarbe von oben (1 Teal, 2 Grün, 3 Pink,
   4 Lila), Radius der Karten, kein Rahmen, kein Schatten. Die Schrift ist
   schwarz wie auf allen farbigen Karten (Abschnitt 14) - Zahl, Überschrift
   und Absatz, ohne Farbwechsel im Kästchen. Die Farbregeln oben setzen Zahl
   und Überschrift farbig, Abschnitt 13 den Absatz weiß; die Zeile mit
   :nth-child(n) ist enger als beide und gewinnt deshalb unabhängig von der
   Reihenfolge im Blatt.
   Die Handy-Regel der Vorlage stellt die Zahl in eine 32-px-Spalte neben
   Überschrift und Absatz (display:grid am li). Das Kästchen bleibt deshalb
   ausdrücklich ein Block: Zahl, Überschrift und Absatz stehen untereinander,
   am Handy wie am Rechner. */
.steps.steps--4{gap:16px}
.steps.steps--4>li{display:block;padding:28px;border:0;border-radius:var(--small);box-shadow:none;color:#000000}
.steps.steps--4>li:nth-child(1){background:var(--teal)}
.steps.steps--4>li:nth-child(2){background:var(--gruen)}
.steps.steps--4>li:nth-child(3){background:var(--pink)}
.steps.steps--4>li:nth-child(4){background:var(--purple)}
.steps.steps--4>li:nth-child(n) .step-number,
.steps.steps--4>li:nth-child(n) h3,
.steps.steps--4>li:nth-child(n) p{color:#000000}
@media(min-width:781px){.steps.steps--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.steps.steps--4>li{padding:24px}}

/* ---------- 9. Video- und Drill-Flächen (Videoflächen sind schwarz) ---------- */
.video-portrait{background:var(--video-bg,var(--page));color:var(--ink);box-shadow:none;border-radius:10px}
.video-portrait p,.video-portrait .asset-type{color:var(--muted)}
.play-symbol,.drill-play,.dialog-close{background:var(--embed-alt,var(--soft));color:var(--ink);border-radius:10px}
.constraint-item{background:var(--embed-bg,var(--soft));border-radius:10px;border:0}
.constraint-label{color:var(--ink)}
.drill-card{background:var(--embed-bg,var(--soft));border-radius:10px;box-shadow:none}
.drill-card:hover{box-shadow:none}
.drill-thumb{background:var(--embed-alt,var(--page))}
.drill-thumb:before{content:none}
.drill-detail-video{background:var(--embed-alt,var(--page));border-radius:10px}
.drill-free-badge{background:var(--embed-alt,var(--soft));color:var(--ink);border-radius:10px}
.drill-free-note{background:var(--embed-bg,var(--soft));color:var(--ink);border-radius:10px}
.drill-tag{background:var(--embed-alt,var(--paper));color:var(--muted);border-radius:10px}
.drill-filter button{background:var(--embed-bg,var(--soft));color:var(--muted);border-radius:10px}
.drill-filter button[aria-pressed=true]{background:var(--pink);color:#fff}
.drill-goal-head span,.drill-fact span{color:var(--muted)}

/* ---------- 10. Preisblöcke nach dem Muster der App-Kaufseite ---------- */
.billing-wrap{position:relative;display:inline-block;margin-bottom:34px}
.segmented{background:var(--slate-hell);border:0;border-radius:24px;padding:4px;gap:2px}
.segmented button{background:transparent;color:var(--muted);border-radius:24px;padding:10px 18px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.segmented button[aria-pressed=true]{background:var(--soft);color:var(--ink)}
/* Der Chip „2 MONATE GRATIS" hängt seit dem 29.09.2026 an der Option
   12 Monate (.billing-option) statt bei 75 % des Umschalters - mittig unter
   diesem Knopf, wie zuvor unter „Jährlich". */
.billing-option{position:relative;display:inline-flex}
.save-chip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:8px;white-space:nowrap;background:linear-gradient(180deg,var(--gruen) 0%,#7DC47A 100%);color:#000;border-radius:24px;padding:6px 12px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Sieben Zeilen, in jeder Karte dieselben: Hinweiszeile, Name, Untertitel,
   Preis, Zahlungshinweis (bis 28.09.2026: Early-Bird), Vorspann, Inhalt. Die
   Karten sind Subgrids des Preisrasters, deshalb beginnt jede Zeile in allen
   Karten auf derselben Höhe; leere Zeilen bleiben als leere Rasterzellen stehen.
   Die achte Zeile trug bis v7 den Auswahl-Knopf; mit v8 ist sie entfallen,
   weil Lizenzen noch nicht kaufbar sind.
   Seit der Modelländerung vom 28.09.2026 stehen drei Trainerkarten (.three).
   Die hervorgehobene Karte ist etwas breiter; seit Ralfs Entwurf vom
   29.09.2026 ist das Team Pro rechts (vorher Coach Pro in der Mitte) - sie
   trägt dort ihre Zerlegung aus zwei kleinen Karten. Der Umrechner über den
   Karten (Abschnitt 25) übernimmt genau diese Spaltenmaße. */
.plan-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr;grid-template-rows:repeat(7,auto);gap:14px;margin-top:25px;align-items:stretch}
.plan-grid.two{grid-template-columns:1fr 1fr}
.plan-grid.three{grid-template-columns:1fr 1fr 1.2fr}
.plan-card{--plan-ink:#000000;--plan-paper:#FFFFFF;display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0;min-width:0;padding:26px 22px;border:0;border-radius:16px;box-shadow:none;color:var(--plan-ink)}
.plan-lime{background:linear-gradient(180deg,var(--lime) 0%,var(--lime-mid) 52%,var(--orange) 100%)}
.plan-sun{background:linear-gradient(180deg,var(--orange) 0%,var(--sun) 52%,var(--pink) 100%)}
.plan-pink{background:linear-gradient(180deg,var(--pink) 0%,var(--pink-mid) 52%,var(--pink-dark) 100%)}
/* Die empfohlene Karte ragt oben und unten heraus. Die um denselben Betrag
   erhöhte Polsterung hält ihren Inhalt auf den Linien der Nachbarkarten. */
.plan-featured{margin:-14px 0;padding:40px 24px}
.plan-flag{text-align:center;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.plan-name{font-size:26px;font-weight:700;letter-spacing:0;line-height:1.12;text-transform:uppercase;color:var(--plan-ink)}
.plan-sub{font-size:16px;font-weight:400;line-height:1.45;margin-top:8px;color:var(--plan-ink)}
.plan-price{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.plan-amount{display:inline-flex;align-items:center;border-radius:24px;padding:7px 16px;background:var(--plan-ink);color:var(--plan-paper);font-size:18px;font-weight:700;line-height:1.3;white-space:nowrap}
.plan-amount.is-pending{white-space:normal;font-size:15px}
/* .plan-oder ist das „oder" vor dem zweiten Preis der Spielerkarte (Abschnitt
   25 d) - in der Schrift der Einheit, damit die Zeile neben der Pille keinen
   Stärkenwechsel trägt. */
.plan-period,.plan-oder{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.plan-early{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
/* Der Zahlungshinweis unter der Pille: eine Zeile je Aussage, klein und in der
   Schrift der Karte - kein eigener Farb- oder Stärkenwechsel. */
.plan-hinweis{flex-direction:column;align-items:flex-start;gap:2px}
.plan-hinweis span{font-size:14px;font-weight:400;line-height:1.4}
.plan-preface{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:20px;color:var(--plan-ink)}
/* Der Abstand zum Vorspann sitzt an der Inhaltszeile selbst, nicht an ihrem
   ersten Kind — sonst begänne die Aufzählung in einer Karte mit Gruppen
   14 px tiefer als in einer Karte ohne. */
.plan-content{min-width:0;margin-top:14px}
.plan-content>.plan-group:first-child{margin-top:0}
.plan-group{margin-top:18px}
/* Ohne Knopf endet die Karte nach der Aufzählung. Die 24 px, die früher den
   Abstand zum Knopf hielten, entfallen deshalb in beiden Kartenformen — der
   mit Gruppen und der ohne; sonst trüge die Karte unten einen doppelten
   Abstand. Es bleibt der Innenabstand der Karte. */
.plan-content>.plan-group:last-of-type{margin-bottom:0}
.plan-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.plan-group .plan-list{margin:12px 0 0}
.plan-list li{display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:start;font-size:17px;line-height:1.45}
.plan-dot{width:9px;height:9px;border-radius:50%;background:var(--plan-ink);margin-top:.55em}
.plan-group-title{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--plan-ink)}
/* Ersatzweg für Browser ohne subgrid: die Karte bleibt eine Spalte, die
   Zeilen bekommen feste Mindesthöhen. Weniger genau als subgrid, aber die
   Segmente stehen weiterhin ungefähr auf einer Linie. */
@supports not (grid-template-rows:subgrid){
  .plan-grid,.plan-grid.two{grid-template-rows:none}
  .plan-card{display:flex;flex-direction:column;grid-row:auto}
  .plan-flag{min-height:28px}
  .plan-sub{min-height:70px}
  .plan-early{min-height:34px}
  .plan-preface{min-height:37px}
  .plan-content{flex:1}
}
.price-disclaimer{color:var(--muted)}
.calculator input{accent-color:var(--pink)}
.calculator output,.calculator .calc-result{color:var(--ink)}

@media(max-width:1050px){
  .plan-grid{grid-template-columns:1fr 1fr}
  .plan-grid.three{grid-template-columns:1fr 1fr 1fr}
  .plan-featured{margin:0;padding:26px 22px}
}
@media(max-width:780px){
  .plan-grid,.plan-grid.two,.plan-grid.three{grid-template-columns:1fr}
  .billing-wrap{margin-bottom:38px}
  /* Drei Zahlungsarten statt zwei: mit dem Rechner-Innenabstand brächen
     „6 MONATE" und „12 MONATE" am Handy auf zwei Zeilen um. */
  .billing-wrap .segmented button{padding:10px 12px;white-space:nowrap}
  /* Der dritte Knopf sitzt am Handy am rechten Rand; mittig darunter ragte
     der breitere Chip aus dem Fenster. Er schließt deshalb rechts mit dem
     Knopf ab und bleibt unter dem Umschalter. */
  .save-chip{left:auto;right:0;transform:none}
}

/* ---------- 11. FAQ, Dialog, Fuß ---------- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:first-child{border-top:1px solid var(--line)}
.faq-item summary{color:var(--ink)}
dialog{background:var(--paper);color:var(--ink);border:0;border-radius:10px;box-shadow:none}
dialog::backdrop{background:rgba(0,0,0,.72)}
.footer a:not(.wordmark){color:var(--muted)}
.footer .legal{color:var(--muted)}

/* ---------- 12. Wartelisten-Formular (neue Seite, keine Vorlagenmaße) ---------- */
.waitlist .field{display:block;color:var(--muted)}
.waitlist .field>span{display:block;color:var(--ink);margin-bottom:6px}
.waitlist input,.waitlist select{width:100%;background:var(--embed-bg,var(--soft));color:var(--ink);border:0;border-radius:10px;padding:12px 14px}
.waitlist input::placeholder{color:var(--muted)}
.waitlist .field-hint{display:block;color:var(--muted);margin-top:6px}
.waitlist .field--check{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start}
.waitlist .field--check input{width:auto;accent-color:var(--pink)}
.waitlist .field--check span{color:var(--muted)}
.waitlist .button{margin-top:20px}

/* ---------- 12a. Hero-Überschrift: zwei Zeilen am Rechner ----------
   „Für smartere Trainingsplanung." braucht mit Schlusspunkt 629,6 px, die
   Hero-Spalte gibt 620,3 px her — bei der Vorlagengröße 48 px bricht die zweite
   Zeile deshalb um. Gemessen ist 47 px die größte Größe, die in eine Zeile passt
   (47,5 px bricht bereits um); das sind 97,9 % der Vorlage.
   Die Zeile ist keine feste Größe, sondern dieselbe mitwachsende Formel der
   Vorlage um diesen Faktor verkleinert: zwischen 1001 und 1199 px ist die Spalte
   schmaler als bei 1280 px, eine feste Größe bräche dort weiter um.
   Unter 1001 px bleibt alles unverändert — die Handy- und Tablet-Stufen der
   Vorlage greifen dort weiter.
   Seit dem größeren Titelbild (Abschnitt 28, Ralf, 29.09.2026 abends) ist die
   Textspalte am Rechner nur noch halb so breit wie der Hero. Beide Zeilen
   brechen dort an ihrer vorgesehenen Stelle um, die Überschrift steht also in
   vier Zeilen - das lässt Ralfs Vorgabe ausdrücklich zu. Die Größe bleibt:
   Eine Überschrift, die auf zwei Zeilen zurückschrumpft, wäre rund ein
   Fünftel kleiner und stünde neben dem größeren Bild schwächer da. */
@media(min-width:1001px){
  .hero-copy .product-headline{font-size:clamp(2.4rem,3.9vw,2.9375rem)}
}

/* ---------- 13. Fließtext: Subline-Größe und Weiß ----------
   Fließtext heißt: Absätze, Aufzählungen und Beschreibungstexte. Sie tragen die
   Größe der Subline (20 px am Rechner, 18 px am Handy) und Weiß.
   Überschriften, Knöpfe, Eyebrows und Navigation bleiben unverändert; die
   Kleintexte in Teil b bleiben klein und grau. */
body{font-size:17px}

/* a) Fließtext.
   Die Zeile für das blosse <p> trägt die Regel für jeden Absatz ohne eigene
   Klasse. Eine Klasse mit eigener Größe gewinnt darüber — deshalb behalten die
   Kleintexte in Teil b ihre Maße, ohne dass sie hier ausgenommen werden müssen. */
p{font-size:20px;color:var(--ink)}
.lede{font-size:20px;color:var(--ink)}
.lede.small{font-size:20px;color:var(--ink)}
.hero-detail{font-size:20px;color:var(--ink)}
.trial-copy{font-size:20px;color:var(--ink)}
.card p{font-size:20px;color:var(--ink)}
.communication-card p{font-size:20px;color:var(--ink)}
.parent-summary p,
.parent-summary-copy p:not(.parent-summary-sub){font-size:20px;color:var(--ink)}
.team-role-note p{font-size:20px;color:var(--ink)}
.faq-item p{font-size:20px;color:var(--ink)}
.cost-callout p{font-size:20px;color:var(--ink)}
.steps p{font-size:20px;color:var(--ink)}
.topic-link span{font-size:20px;color:var(--ink)}
.goals-group ul,.goals-group ul li{font-size:20px;color:var(--ink)}
.message blockquote{font-size:20px;color:var(--ink)}
.video-points dt,.video-points dd{font-size:20px;color:var(--ink)}
.drill-meta p{font-size:20px;color:var(--ink)}
.drill-copy-section p,.drill-copy-section li{font-size:20px;color:var(--ink)}
.review-checks p{font-size:20px;color:var(--ink)}

/* b) Kleintexte: klein und grau. Preiskarten bleiben unberührt — ihre Innentexte
   stehen auf farbiger Fläche und tragen deren Schriftfarbe. */
.fine{font-size:13px;color:var(--muted)}
.quiet{font-size:15px;color:var(--muted)}
.price-disclaimer{font-size:13px;color:var(--muted)}
.calc-caption{font-size:14px;color:var(--muted)}
.cost-unit{font-size:13px;color:var(--muted)}
.store-pending{font-size:13px;color:var(--muted)}
.footer .legal{color:var(--muted)}
.sources{color:var(--muted)}
.page-trail{color:var(--muted)}

/* ---------- 14. Kleine Karten in Zweier-Rastern: PRACTX-Akzentfarben ----------
   Jede kleine Karte, die zu zweit (oder zu dritt, zu viert) in einer Zeile steht
   und Funktionen, Varianten, Wege oder Themen aufzählt, bekommt eine
   Akzentfarbe: Teal, Blau, Grün, Pink, Lila.
   Seit v8 läuft diese Folge über die ganze Seite durch und beginnt nicht mehr
   in jedem Raster von vorn. Der Grund ist ein Befund des Betreibers: Zwei
   untereinander liegende Zweier-Raster trugen beide Teal und Blau, und die
   gleichfarbigen Karten sahen aus, als gehörten sie inhaltlich zusammen.
   Die Stelle in der Folge vergibt deshalb nicht mehr die Position im Raster
   (nth-child), sondern ein seitenweiter Zähler beim Rendern; er setzt die
   Klasse accent-1 bis accent-5 (siehe index.html, Funktion akzent()).
   Weil die Farbe mit jeder Karte um genau eine Stelle weiterrückt, tragen zwei
   nebeneinanderliegende Karten weiterhin nie dieselbe Farbe, gleich ob das
   Raster zwei, drei oder vier Spalten hat.
   Betroffen sind die fünf Raster der Vorlage: .grid (Helfer cards() und die
   beiden Karten der Seite „So funktioniert's"), .communication-grid,
   .topic-grid, .goals-grid und .constraint-icons.
   Nicht gefärbt bleiben Preiskarten (sie tragen ihre Verläufe), Kosten-Callout,
   Rechner, Nachrichten-Zitat, FAQ, Store-Knöpfe, Formularfelder, die
   Eltern-Bildkarte, die Schritte und die Videoflächen.
   Schrift auf farbiger Fläche ist schwarz — die App-Regel für helle Flächen,
   für Pink der Betreiber-Entscheid vom 19.09.2026. Radius 10 bleibt, kein
   Rahmen, kein Schatten. */
.accent-1{--karte:var(--teal)}
.accent-2{--karte:var(--blau)}
.accent-3{--karte:var(--gruen)}
.accent-4{--karte:var(--pink)}
.accent-5{--karte:var(--purple)}

.grid>.card,
.communication-grid>.communication-card,
.topic-grid>.topic-link,
.goals-grid>.goals-group,
.constraint-icons>.constraint-item{
  background:var(--karte,var(--embed-bg,var(--soft)));
  color:#000000;
  border:0;
  border-radius:10px;
  box-shadow:none;
}
/* Überschrift, Fließtext, Aufzählung und Kleinlabel auf der farbigen Fläche.
   Die Zeilen sind einzeln nötig, weil Abschnitt 8 und 13 diesen Elementen
   ihre eigene weisse Farbe geben; ohne die engere Regel gewinnen sie. */
.grid>.card h3,
.grid>.card p,
.grid>.card .mode-label,
.communication-grid>.communication-card h3,
.communication-grid>.communication-card p,
.topic-grid>.topic-link strong,
.topic-grid>.topic-link span,
.goals-grid>.goals-group h3,
.goals-grid>.goals-group ul,
.goals-grid>.goals-group ul li,
.constraint-icons>.constraint-item .constraint-label{color:#000000}
/* Die Themenkarte der Academy ist selbst der Link. Ihr Hover wechselte bisher
   die Fläche auf --paper; auf einer farbigen Karte bleibt die Farbe stehen,
   es ändert sich nur der Zeiger. */
.topic-grid>.topic-link:hover{background:var(--karte,var(--embed-alt,var(--paper)));cursor:pointer}
/* Der Zustands-Chip der Methodenkarte stand auf der Blockfläche und ist auf der
   farbigen Karte ein schwarzes Feld; seine Textfarben bleiben unverändert. */
.grid>.card .badge-state{background:#000000}
/* Die vier Constraint-Symbole sind weisse Strichzeichnungen mit pinken
   Akzenten — auf heller Fläche wären sie unsichtbar. brightness(0) färbt beide
   Anteile schwarz, ohne die Dateien anzufassen. */
.constraint-icons>.constraint-item .constraint-icon{filter:brightness(0)}
/* Auf Pink ist 18 px die kleinste Schrift. Die vierte Kachel ist die pinke;
   damit die vier Kacheln einer Reihe gleich aussehen, gilt das Mass für alle. */
.constraint-icons>.constraint-item .constraint-label{font-size:18px}

@media(max-width:780px){
  p,
  .lede,.hero-copy .lede,.lede.small,.hero-detail,.trial-copy,
  .card p,.communication-card p,
  .parent-summary p,.parent-summary-copy p:not(.parent-summary-sub),
  .team-role-note p,.faq-item p,.cost-callout p,.steps p,
  .topic-link span,.goals-group ul,.goals-group ul li,
  .message blockquote,.video-points dt,.video-points dd,
  .drill-meta p,.drill-copy-section p,.drill-copy-section li,
  .review-checks p{font-size:18px}
  .fine{font-size:13px}
  .store-pending{font-size:13px}
  /* Am Handy stellt die Vorlage die Zahl in eine 32-px-Spalte neben Überschrift
     und Absatz. Eine 48-px-Ziffer passt dort nicht hinein, und die Überschrift
     stünde neben statt unter ihrer Zahl. Der Schritt läuft deshalb auch am
     Handy von oben nach unten — wie am Rechner. */
  .steps li{display:block}
  .steps .step-number{grid-row:auto}
  .steps p{grid-column:auto}
}

/* ---------- 15. Zugaben der produktiven Website ----------
   Der Entwurf trug den Markt-Umschalter in einer Editor-Leiste über der Seite.
   Auf der echten Website gibt es diese Leiste nicht; der Markt steht als
   schlichter Textlink in der Navigation und im Fuß. Deshalb hier nur das
   Nötigste: keine neue Fläche, keine neue Form, nur Schriftschnitt und Farbe.
   Alles andere erben die Links von .nav-link beziehungsweise vom Fuß. */
.nav-market{font-size:12px;font-weight:700;letter-spacing:.06em;padding-left:9px;padding-right:9px}
.nav-market.is-current{color:var(--ink);cursor:default}
.footer-meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px 26px;flex-wrap:wrap;margin-top:20px}
.footer-meta .is-current{font-size:13px;color:var(--ink)}
.footer-markets{display:flex;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
/* Telefonnummer und E-Mail im Impressum sind Verweise im Fließtext. Sie tragen
   nicht .text-link, weil dessen Pfeil hinter einer Rufnummer nichts zu suchen
   hat — die Farbe ist dieselbe. */
.inline-link{color:var(--muted);text-underline-offset:4px}
.inline-link:hover{color:var(--ink)}
/* Impressum und Imprint sind Fließtext mit Zwischenüberschriften - eine Form,
   die die Vorlage nicht kennt, weil sie keine Rechtsseite enthielt. Alle
   Überschriften der Vorlage tragen margin:0; ohne diese Zeilen klebten die
   Abschnitte aneinander. */
.legal-copy h3{margin-top:30px}
.legal-copy>h3:first-of-type{margin-top:0}
.legal-copy p{max-width:74ch}
@media(max-width:780px){
  .nav-market{flex:0 0 auto}
  .footer-meta{display:block}
  .footer-markets{margin-top:10px}
}

/* ---------- 16. Übungsbibliothek: echte Übungen, echtes Video ----------
   Zugaben dieses Pakets. Sie betreffen nur Seiten, die es im Entwurf noch
   nicht gab (Detailseite einer Übung) oder Flächen, die dort ein Platzhalter
   waren (die Abspielfläche). Kein Mass und keine Farbe einer bestehenden
   Seite wird dadurch anders.

   Die Abspielfläche IST das schwarze Videofeld des Entwurfs - .video-portrait
   auf der Startseite, .drill-detail-video auf der Detailseite. Hier steht nur,
   was ein <button> an Voreinstellungen des Browsers mitbringt und was die
   Vorlage für eine <figure> gesetzt hätte. */
.video-play{
  font:inherit;
  color:inherit;
  text-align:center;
  width:100%;
  border:0;
  padding:26px;
  gap:15px;
  cursor:pointer;
}
.video-portrait.video-play{display:flex;flex-direction:column;justify-content:center;align-items:center}
/* Eine Videofläche ist schwarz - das ist die Zusage aus Abschnitt 9. Die
   Bestandsregel für .drill-detail-video greift dafür auf --embed-alt zu; auf
   einem Block mit Blockfläche ist das genau dieselbe Farbe, die Fläche wäre
   dort unsichtbar. --video-bg liefert immer die Gegenfarbe. */
.drill-detail-video.video-play{display:grid;place-items:center;align-content:center;gap:14px;background:var(--video-bg,var(--page))}
.video-play .drill-play{width:62px;height:62px;font-size:19px;border-radius:50%;background:#fff;color:#18181d;padding-left:3px;display:grid;place-items:center}
.video-play:hover .drill-play{background:var(--teal);color:#000}
.video-play-title{font-size:20px;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.video-play-sub{font-size:13px;color:var(--muted);max-width:26ch}
.video-play-note{font-size:13px;color:var(--teal)}
.video-play-note:empty{display:none}

/* Die Bühne übernimmt Form und Radius der Fläche, die sie ersetzt. */
.video-buehne{background:#000;overflow:hidden;display:block;padding:0}
.video-buehne video{display:block;width:100%;height:100%;object-fit:contain;background:#000}

/* Detailseite: das Hochformat bleibt schlank und steht mittig, die Varianten
   stehen darunter. Ohne Breitengrenze füllte ein 9:16-Feld die ganze Spalte. */
.drill-video-wrap{max-width:340px;margin:0 auto}
.variant-plays:empty{display:none}
.variant-plays{display:grid;gap:8px;margin-top:16px}
.variant-play{display:flex;align-items:center;gap:12px;text-align:left;width:100%;padding:10px 14px;border-radius:10px;background:var(--embed-bg,var(--soft));color:var(--ink);font:inherit;font-size:14px;line-height:1.35}
.variant-play .drill-play{width:30px;height:30px;font-size:12px;flex:0 0 auto;border-radius:50%;background:var(--embed-alt,var(--paper));color:var(--ink);display:grid;place-items:center;padding-left:2px}
.variant-play:hover,.variant-play.is-current{background:var(--teal);color:#000}
.variant-play:hover .drill-play,.variant-play.is-current .drill-play{background:#000;color:var(--teal)}

/* einfach: Die vier Textblöcke der Detailseite (Ziel, Aufbau, Ausführung,
   Feedback) tragen ein einzelnes Wort als Überschrift. In der H2-Größe der
   Vorlage (bis 3,25 rem) stünde dort ein Wort quer über den Block; deshalb
   eine kleinere Stufe - nur für diese Blöcke, keine andere Seite berührt. */
.drill-text h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:6px}
.drill-text .lede{margin-top:14px}
.feedback-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:22px}
.feedback-spalte h3{font-size:16px;margin-bottom:10px}
.feedback-spalte ul{margin:0;padding-left:18px}
.feedback-spalte li{font-size:18px;line-height:1.6;color:var(--ink)}

/* Kennzeichenzeile und Dauer: Sachangaben, deshalb klein und grau wie jede
   andere Kleinangabe der Seite (Abschnitt 13 b). */
.drill-specs{font-size:13px;color:var(--muted);margin-top:9px}
.drill-specs-hero{margin-top:18px;font-size:14px}
.drill-stock{font-size:15px;color:var(--ink);margin-top:14px}
.drill-duration{position:absolute;right:12px;bottom:12px;z-index:1;background:#000000cc;color:#fff;border-radius:10px;padding:4px 8px;font-size:11px;font-weight:700}

/* Das CLA-Symbol einer Variante steht auf einer farbigen Karte - dort ist die
   Schrift schwarz, also auch die Zeichnung. */
.cla-symbol{display:block;width:64px;margin-bottom:12px}
.cla-symbol svg{display:block;width:100%;height:auto;filter:brightness(0)}

@media(max-width:780px){
  .drill-video-wrap{max-width:310px}
  .feedback-grid{grid-template-columns:1fr;gap:18px}
  .video-play-title{font-size:18px}
}
@media(max-width:460px){
  .drill-video-wrap{max-width:100%}
  .drill-specs{font-size:12px}
}

/* ---------- 17. Vorschaubilder, Entwicklungsziele und Lizenzkarten (v10) ----------
   Drei Zugaben der Korrekturrunde vom 23.09.2026. Sie ändern kein Mass des
   abgenommenen Entwurfs, sondern füllen Flächen, die dort leer oder mit
   Platzhaltern belegt waren. */

/* a) Das Standbild auf der Abspielfläche.
   Die Datei liegt unter /assets/video/ und kommt aus dem Bauschritt - vor dem
   Klick geht keine Anfrage nach außen. Über dem Bild liegt ein Verlauf, damit
   Titel und Play-Symbol auf jedem Standbild lesbar bleiben; er ist eine Fläche,
   kein Rahmen. Die Reihenfolge der drei z-index-Stufen ist nötig, weil das
   Bild als erstes Kind sonst über dem Verlauf läge. */
.video-play.hat-bild,.drill-thumb.hat-bild,.variant-thumb.hat-bild{position:relative;overflow:hidden}
.video-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.video-play.hat-bild:before{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit;background:linear-gradient(180deg,#0000001f 0%,#00000073 58%,#000000bf 100%)}
.video-play.hat-bild>*:not(img){position:relative;z-index:2}
.video-play.hat-bild .video-play-sub{color:#d7d7de}

/* b) Die Karte der Bibliothek: Bild, Play-Symbol, Titel - sonst nichts.
   Der dekorative Strich der Vorlage (.drill-thumb:after) wird zum Verlauf über
   dem Bild; eine weisse Haarlinie quer über ein Foto wäre ein Rest. */
.drill-card .drill-thumb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;text-align:center}
.drill-thumb.hat-bild:after{content:'';position:absolute;inset:0;left:0;top:0;right:0;bottom:0;width:auto;z-index:1;background:linear-gradient(180deg,#0000001f 0%,#00000073 58%,#000000bf 100%)}
.drill-card .drill-play{position:relative;z-index:2;width:56px;height:56px;font-size:18px;border-radius:50%;background:#fff;color:#18181d;padding-left:3px;display:grid;place-items:center}
.drill-card:hover .drill-play{background:var(--teal);color:#000}
.drill-thumb-titel{position:relative;z-index:2;font-size:17px;font-weight:650;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}

/* c) Die Variantenzeile trägt ihr Standbild als Briefmarke. */
.variant-thumb{position:relative;flex:0 0 auto;width:52px;height:38px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--embed-alt,var(--paper))}
.variant-play .variant-thumb .drill-play{position:relative;z-index:2;width:24px;height:24px;font-size:10px;background:#fff;color:#18181d}
.variant-thumb.hat-bild:before{content:'';position:absolute;inset:0;z-index:1;background:#00000059}
.variant-play:hover .variant-thumb .drill-play,.variant-play.is-current .variant-thumb .drill-play{background:#000;color:var(--teal)}

/* d) Die drei Titel im Videoblock tragen je eine Farbe, der Text darunter
   bleibt weiß. Kein Farbwechsel innerhalb eines Satzes - die Farbe gehört der
   ganzen Zeile. */
.video-points dt.vp-1{color:var(--teal)}
.video-points dt.vp-2{color:var(--gruen)}
.video-points dt.vp-3{color:var(--pink)}

/* e) Die Entwicklungsziele als kleine Karten.
   Farbe je Gruppe statt je Karte: Grundlagen Teal, Angriff Grün, Verteidigung
   Blau, Spiel Lila - die Klasse setzt _build/ziele-bauen.mjs, nicht eine
   nth-child-Regel. Schrift und Zeichnung sind schwarz wie auf jeder anderen
   Akzentfläche der Seite; die Zeichnung erbt die Farbe über currentColor.
   einfach: Fünf Karten je Reihe am Rechner, fest. Bei 20 Zielen in vier
   Gruppen füllt das die Reihen ohne Lücke; eine mitwachsende Spaltenzahl
   (auto-fit) liesse bei drei Zielen drei sehr breite Karten stehen. */
.ziel-gruppen{display:grid;gap:10px;margin-top:30px}
.ziel-raster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.ziel-raster--stapel{grid-template-columns:1fr}
/* e2) Die vier Gruppen klappen auf und zu wie die Kategorien auf „Regeln und
   Philosophie" (Betreiber-Anordnung vom 23.09.2026). Nur der Kopf trägt die
   Akzentfarbe der Gruppe (Klasse accent-* am <summary>); das Raster liegt
   darunter auf der Blockfläche, weil die Karten dieselbe Farbe tragen und in
   einer gleichfarbigen Fläche verschwänden. Kopf, Titel, Zahl und Pfeil sind
   dieselbe Bauform wie .std-karte-kopf; kein Rahmen, kein Browser-Dreieck.
   Zwischen offener Gruppe und nächstem Kopf steht mehr Luft als zwischen zwei
   geschlossenen Köpfen, damit das Raster sichtbar zu seinem Kopf gehört. */
.ziel-gruppe[open]{margin-bottom:16px}
.ziel-gruppe-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:10px;background:var(--karte,var(--soft));color:#000000;cursor:pointer;list-style:none}
.ziel-gruppe-kopf::-webkit-details-marker{display:none}
.ziel-gruppe-titel{display:block;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:#000000}
.ziel-gruppe-zahl{display:block;font-size:15px;line-height:1.45;color:#000000}
.ziel-gruppe-pfeil{flex:0 0 auto;font-size:24px;line-height:1;color:#000000}
.ziel-gruppe-pfeil:after{content:'\25be'}
.ziel-gruppe[open] .ziel-gruppe-pfeil:after{content:'\25b4'}
.ziel-gruppe>.ziel-raster{margin-top:10px}
.ziel-karte{display:flex;align-items:center;gap:11px;min-width:0;padding:13px 14px;border-radius:10px;background:var(--karte,var(--embed-bg,var(--soft)));color:#000000}
.ziel-symbol{flex:0 0 auto;display:block;width:28px;height:28px;color:#000000}
.ziel-symbol svg{display:block;width:100%;height:100%}
/* "Bewegungsgrundlagen" und "Entscheidungsfindung" sind länger als die Spalte:
   ohne Trennung ragte das Wort über die Karte hinaus und wurde abgeschnitten.
   hyphens:auto trennt nach den Regeln der Seitensprache (html lang), und
   overflow-wrap fängt die Fälle, in denen auch das nicht reicht. */
.ziel-titel{min-width:0;font-size:16px;line-height:1.25;letter-spacing:-.01em;color:#000000;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}

/* f) Das Beispiel auf "So funktioniert's": links das Hauptziel, rechts die
   Nebenziele.
   Betreiber-Korrektur vom 23.09.2026: Die Karten tragen hier nicht mehr die
   Akzentfarbe ihrer Gruppe, sondern ihre Rolle im Drill - das Hauptziel auf
   Teal, die Nebenziele auf der Blockfläche mit einer 1-px-Linie in Teal. Die
   Linie ist die einzige Umrandung der Seite und ausdrücklich gewollt: ohne sie
   verschwände eine Karte aus #13171C im Block, der dieselbe Farbe trägt.
   Der Innenabstand der Nebenziel-Karte ist um genau die Linienstärke kleiner,
   damit beide Kartenformen gleich hoch bleiben; ohne diese Zeile stünde die
   rechte Spalte 2 px tiefer als die linke.
   Die beiden Beschriftungen tragen seit derselben Runde die Größe, die vorher
   der Übungstitel hatte (22 px, weiß, h3-Schnitt), der Übungstitel selbst eine
   Stufe darüber (26 px). */
.ziel-beispiel-titel{font-size:26px;color:var(--ink);margin-top:30px}
.ziel-beispiel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:start;margin-top:16px}
.ziel-spalte{min-width:0}
.ziel-spalte-label{font-size:22px;font-weight:700;letter-spacing:-.022em;line-height:1.28;color:var(--ink);margin-bottom:12px}
.ziel-karte--haupt{background:var(--teal);color:#000000}
.ziel-karte--neben{background:var(--paper);border:1px solid var(--teal);padding:12px 13px;color:var(--ink)}
.ziel-karte--neben .ziel-titel,.ziel-karte--neben .ziel-symbol{color:var(--ink)}

/* g) Lizenzkarten: dieselben Verläufe wie die Preiskarten, Schrift schwarz.
   Sie stehen auf "So funktioniert's" (zwei). Die drei Karten im Hero der
   Startseite sind seit Ralfs Vorgabe vom 29.09.2026 abends fort und mit
   ihnen die Regeln, die dort den Namen in der schmalen Spalte mitwachsen
   ließen (.lizenz-karten--hero). */
.lizenz-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.lizenz-karten--zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:28px}
.lizenz-karte{--plan-ink:#000000;min-width:0;padding:18px;border-radius:10px;color:var(--plan-ink)}
.lizenz-name{display:block;font-size:26px;font-weight:700;line-height:1.12;letter-spacing:0;text-transform:uppercase;color:var(--plan-ink)}
.lizenz-karte p{font-size:16px;line-height:1.4;margin-top:8px;color:var(--plan-ink)}
.lizenz-karten--zwei .lizenz-karte{padding:24px}
.lizenz-karten--zwei .lizenz-karte p{font-size:20px;line-height:1.5;margin-top:12px}

@media(max-width:1050px){
  .ziel-raster{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ziel-raster--stapel{grid-template-columns:1fr}
}
@media(max-width:780px){
  .ziel-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ziel-raster--stapel{grid-template-columns:1fr}
  .ziel-beispiel{grid-template-columns:1fr;gap:20px}
  .lizenz-karten,.lizenz-karten--zwei{grid-template-columns:1fr}
  .lizenz-karten--zwei .lizenz-karte p{font-size:18px}
  .drill-thumb-titel{font-size:15px}
}
@media(max-width:460px){
  .ziel-raster{grid-template-columns:1fr}
  .ziel-titel{font-size:17px}
}

/* ---------- 18. Kostenplanung der Startseite (entfallen) ----------
   Hier standen vom 23.09. bis zum 29.09.2026 die Regeln für Lizenzwahl
   (.cost-switch) und Regler (.cost-slider) des Kostenblocks der Startseite.
   Der Block ist seit Ralfs Vorgabe vom 29.09.2026 abends fort, und kein
   anderer Block trägt diese Klassen. Die beiden Flächen .cost-callout mit
   .cost-title, .cost-number und .cost-unit bleiben (Abschnitte 8 und 13):
   Sie trägt weiter der Block „Ein möglicher Teambeitrag" der deutschen
   Elternseite. */

/* ---------- 19. Korrekturrunde vom 23.09.2026 ----------
   Vier Zugaben: die Markt-Wahl ohne Download-Knopf, die Reihenfolge im Hero am
   Handy, die anklickbare Kommunikationskarte und die Seite
   „Regeln & Philosophie". */

/* a) Markt-Wahl statt Download-Knopf.
   Am Rechner soll sich nichts ändern: .nav-markets ist dort display:contents
   und damit im Raster der Navigation gar nicht vorhanden - die drei Links
   stehen wie bisher am Ende der Leiste.
   Am Handy stand die Wahl zunächst als eigene Zeile im aufgeklappten Menü. Sie
   steht dort seit dem Nachtrag vom selben Tag nicht mehr, sondern dauerhaft
   sichtbar neben der Menü-Taste (Abschnitt 20); die Zeile ist deshalb fort,
   nicht nur verschoben. */
.nav-markets{display:contents}

/* b) Hero am Handy: das Bild direkt unter die Überschrift.
   Gelöst über die Reihenfolge, nicht über zweites Markup: .hero-copy wird zu
   display:contents, damit Eyebrow, Überschrift und Sublines selbst zu Feldern
   des Hero-Rasters werden - dazwischen lässt sich das Bild dann einsortieren.
   Die Lizenzkarten, die bis zum 29.09.2026 als fünftes Feld folgten, sind
   fort (Abschnitt 17 g), und mit ihnen ihre Zeile hier.
   Der Zeilenabstand des Rasters geht dabei auf 0, weil sonst
   zwischen JEDEM Absatz die Rasterlücke stünde; die Abstände kommen wie am
   Rechner aus den Rändern der Elemente selbst.
   Am Rechner (ab 900 px) bleibt alles, wie es war.
   Das Bild endete hier bis zum 29.09.2026 bei 560 px. Seit Ralfs Vorgabe vom
   Abend dieses Tages („Mache das Titelbild bitte größer") nimmt es die volle
   Inhaltsbreite; max-width:none schlägt dabei auch die 560 px, die die
   Vorlage unter 761 px an .hero-photo--mockup setzt. Unter rund 630 px
   Fenster war das Bild ohnehin so breit wie die Spalte - dort ändert sich
   nichts. Die Zeile gilt für die ganze einspaltige Stufe bis 899 px und nicht
   erst ab 780 px: Sonst spränge das Bild beim Übergang von 780 auf 781 px von
   gut 700 auf 560 px zurück. */
@media(max-width:899px){
  .section.hero .hero-layout{grid-template-columns:minmax(0,1fr);row-gap:0}
  .section.hero .hero-layout>.hero-copy{display:contents}
  .section.hero .hero-layout>.hero-copy>.eyebrow{order:1}
  .section.hero .hero-layout>.hero-copy>.product-headline{order:2}
  .section.hero .hero-layout>.hero-photo{order:3;margin-top:22px;max-width:none;justify-self:center}
  .section.hero .hero-layout>.hero-copy>.lede{order:4}
}

/* c) Die Karte „Regeln & Philosophie" auf der Startseite ist selbst der Verweis.
   Fläche, Farbe und Schrift bleiben die der Kommunikationskarte (Abschnitt 14);
   hier steht nur, was ein <a> von sich aus mitbringt. */
.communication-grid>a.communication-card{display:block;text-decoration:none;cursor:pointer}
.communication-mehr{display:inline-block;margin-top:14px;font-size:16px;font-weight:650;color:#000000;text-decoration:underline;text-underline-offset:5px}
.communication-mehr:after{content:' \2192';text-decoration:none}

/* d) Regeln & Philosophie: die Standards-Maske der App zum Ausprobieren.
   Die Kategorie-Karte trägt die Farbe der App und damit schwarze Schrift - wie
   jede farbige Fläche dieser Seite (Abschnitt 14). Das Kästchen ist ebenfalls
   schwarz: gewählt gefüllt, ungewählt nur die Linie. Der Block
   „Unsere Team-DNA" steht auf der Blockfläche #13171C, seine Sätze als weisse
   Karten - dieselbe Bauform wie in der App. Unter dem Titel sagt ein Satz in
   normaler Schrift, was die Team-DNA ist (seit Ralfs Sichtung vom 30.09.2026;
   bis dahin stand dort eine graue Zählzeile unter den Sätzen).
   Die DNA-Marke hinter jedem Satz (bis zum 30.09.2026 ein Stern) ist ein
   kleines Schild mit dem Wort „DNA", ohne Rahmen und ohne Kreis: aus
   ausgegraut - ein Hauch Schwarz über der Kartenfarbe, die Schrift halb
   durchsichtig -, gesetzt schwarz gefüllt mit weißer Schrift. Das schwarze
   Schild hebt sich von allen zehn Kartenfarben gleich deutlich ab, weil alle
   hell sind. Gesperrt (Satz nicht angehakt) ist sie noch blasser. Ohne color-mix
   fällt das Grau auf --muted zurück. */
.std-dna{background:var(--embed-bg,var(--paper));border-radius:10px;padding:26px}
.std-dna-titel{font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.std-dna-zweck{margin-top:10px;max-width:760px;font-size:18px;line-height:1.45;color:var(--ink)}
.std-dna-liste{display:grid;gap:10px;margin-top:16px}
.std-dna-satz{background:#FFFFFF;color:#000000;border-radius:10px;padding:18px 20px;font-size:20px;line-height:1.35}
.std-dna-leer{font-size:20px;color:var(--muted)}

.std-bereich{margin-top:34px}
.std-bereich-titel{font-size:22px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}

.std-karte{background:var(--karte,var(--soft));border-radius:10px;color:#000000;margin-bottom:10px;overflow:hidden}
.std-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;cursor:pointer;list-style:none}
.std-karte-kopf::-webkit-details-marker{display:none}
.std-karte-titel{display:block;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:#000000}
.std-karte-zahl{display:block;font-size:15px;line-height:1.45;color:#000000}
.std-karte-pfeil{flex:0 0 auto;font-size:24px;line-height:1;color:#000000}
.std-karte-pfeil:after{content:'\25be'}
.std-karte[open] .std-karte-pfeil:after{content:'\25b4'}
.std-liste{padding:0 18px 8px}
.std-zeile{display:flex;align-items:flex-start;gap:10px;padding:7px 0}
.std-wahl{display:flex;align-items:flex-start;gap:12px;flex:1 1 auto;min-width:0;cursor:pointer}
/* Das Kästchen ist ein echtes <input type="checkbox"> - Tastatur, Vorlesesoftware
   und die Beschriftung daneben kommen damit vom Browser. Gezeichnet wird es
   selbst, weil die Voreinstellung des Browsers eine helle Fläche mit grauer
   Linie ist; auf einer farbigen Karte wäre das ein Fremdkörper. */
.std-haken{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;border:2px solid #000000;border-radius:4px;background:transparent;display:grid;place-items:center;cursor:pointer}
.std-haken:checked{background:#000000}
.std-haken:checked:after{content:'\2713';color:#FFFFFF;font-size:14px;line-height:1}
.std-satz{font-size:18px;line-height:1.4;color:#000000}
.std-dna-marke{flex:0 0 auto;min-width:48px;min-height:30px;margin-top:-2px;padding:0 10px;border:0;border-radius:var(--radius);box-shadow:none;background:transparent;background:color-mix(in srgb,var(--page) 12%,transparent);color:var(--muted);color:color-mix(in srgb,var(--page) 45%,transparent);font-size:14px;font-weight:700;line-height:1;letter-spacing:.08em;cursor:pointer}
.std-dna-marke[aria-pressed="true"]{background:var(--page);color:var(--ink)}
.std-dna-marke[disabled]{opacity:.4;cursor:default}
.std-meldung{margin:0 18px 14px;font-size:15px;line-height:1.45;color:#000000}
.std-meldung:empty{display:none}

/* Die zehn Kategorie-Farben. Sie stehen hier und nicht in data/standards.js:
   die Zuordnung ist eine Setzung der Gestaltung und lässt sich ohne einen
   neuen Datenlauf tauschen - genau wie in der App (StandardCategory.color). */
.std-kat-team_culture{--karte:var(--gruen)}
.std-kat-commitment{--karte:var(--lemon)}
.std-kat-communication{--karte:var(--teal)}
.std-kat-development{--karte:var(--blau)}
.std-kat-practice{--karte:var(--orange)}
.std-kat-competition{--karte:var(--pink)}
.std-kat-parent_support{--karte:var(--purple)}
.std-kat-parent_sideline{--karte:var(--rosa)}
.std-kat-parent_communication{--karte:var(--teal)}
.std-kat-parent_organization{--karte:var(--lime)}

@media(max-width:780px){
  .std-dna{padding:20px}
  .std-dna-satz{font-size:18px;padding:16px 18px}
  .std-dna-leer{font-size:18px}
  .std-karte-titel{font-size:18px}
  .std-satz{font-size:18px}
}

/* ---------- 20. Nachtrag vom 23.09.2026: die Markt-Wahl am Handy ----------
   Unter der Menü-Schwelle der Vorlage (781 px) steht links neben „Menü" das
   Kürzel des aktuellen Marktes; ein Klick klappt die drei Märkte darunter auf.
   Am Rechner ändert sich nichts: die Hülle ist dort display:none, die Reihe
   US INT DE steht unverändert am Ende der Navigation.

   Die Taste trägt zusätzlich die Klasse .menu-toggle und erbt damit Fläche
   (#2A323D), Radius 10, Polster, Mindesthöhe und die Schriftgröße der engen
   Breiten von der Menü-Taste selbst - eine zweite, gleichlautende Regel würde
   beim nächsten Nachschärfen der einen auseinanderlaufen. */
.market-picker{display:none}
@media(max-width:780px){
  /* Die Markt-Zeile im aufgeklappten Menü (Abschnitt 19 a) ist damit fort:
     dieselbe Wahl an zwei Orten ist nicht doppelt, sondern mehrdeutig. */
  .nav-markets{display:none}
  .market-picker{display:block;position:relative;margin-left:auto}
  /* Das auto-Maß wandert von der Taste an die Hülle. Zwei auto-Ränder in
     derselben Flex-Zeile teilen sich den freien Platz - das Kürzel stünde dann
     in der Mitte statt neben der Taste. */
  .nav-inner .menu-toggle{margin-left:0}
  /* Nach rechts ausgerichtet, nicht nach links: die Hülle steht am rechten
     Rand, und eine nach links geöffnete Fläche kann die Seite nicht breiter
     machen als das Fenster. */
  .market-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:95;min-width:158px;padding:6px;border-radius:10px;background:var(--paper)}
  .market-menu a{display:block;padding:10px 12px;border-radius:8px;font-size:15px;text-decoration:none;color:var(--muted);white-space:nowrap}
  .market-menu a[aria-current="true"]{color:var(--ink)}
}

/* ---------- 21. Rotation Hero: das Spiel im Geräterahmen ----------
   Das Spiel steht in einem nachgezeichneten iPhone (Ansage des Betreibers vom
   23.09.2026): Der Besucher soll auf einen Blick sehen, dass er hier ein Stück
   der App bedient und kein Web-Spielchen daneben. Die Seite hatte dafür kein
   Muster — .cla-device ist eine <figure> um ein fertiges Bildschirmfoto und
   trägt nichts Lebendiges.

   Der Rahmen ist Attrappe: Insel, Statuszeile und Griff tragen kein
   Bedienelement und keinen Spielzustand. Alles darin ist dagegen ABGESCHRIEBEN
   aus lib/features/rotation_hero/ der App — Größen, Abstände und Laufweiten
   stehen hier in denselben Bildpunkten wie dort, und das Gerät ist mit 402x874
   genau so groß wie das Telefon, auf dem die Bildschirmfotos entstanden sind.
   Nur so stimmen die Verhältnisse; ein frei gewählter Kasten mit „ungefähr so"
   großen Ringen sähe auf jedem Bildschirm anders aus als die App.

   Unter 520 px fällt der Rahmen ganz weg — mit Insel, Statuszeile und Griff.
   Ein gemaltes Telefon auf einem echten Telefon ist albern, und es kostet an
   der schmalsten Stelle rund 30 px Breite: genau dort, wo die fünf Bankringe
   ihre Fingerkuppen-Untergrenze von 44 px sonst nicht mehr halten können. Das
   Spiel füllt dann den Block und nimmt sich die Höhe des Fensters.

   Zwei Abweichungen von der App, beide unvermeidbar und beide sichtbar
   gemacht:

   a) SCHRIFTGEWICHTE. Die App setzt Barlow Condensed in 400 (Fließtext) und
      600 (Zahlen, Überschriften). Im Paket liegen nur die Schnitte 600 bis 900
      — einen 400er gibt es nicht. Beide Grade rutschen deshalb um eine Stufe
      nach oben (400 -> 600, 600 -> 700): Der ABSTAND zwischen beiden trägt die
      Gliederung, nicht ihr absoluter Wert. Bildeten beide auf 600 ab, wäre der
      Unterschied zwischen Name und Restzeit ganz fort.
   b) FARBWERTE. Alle Farben kommen aus den Merkmalen aus Abschnitt 1; sie SIND
      die App-Palette. Zwei Flächen brauchen zusätzlich Durchsicht (der Verlauf
      über dem Startbild und die Fläche hinter der Abbruchfrage) — sie mischen
      dieselben Merkmale mit color-mix, statt einen rohen Wert einzusetzen. */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/barlow-condensed-700.woff2') format('woff2')}

/* a) Das Gerät.
   Die Fläche des Rahmens ist --soft, die Haarlinie darauf --line: ein dunkles,
   neutrales Gehäuse, das sich vom schwarzen Schirm abhebt, ohne eine eigene
   Farbe mitzubringen. Der Schirm ist --page, also genau das Schwarz, auf dem
   auch die App steht.
   Die Breite trägt der Rahmen und nicht der Schirm: Ein „max-content" am
   Rahmen liesse die Breitenangabe des Schirms ins Leere greifen (100 % von
   einer Breite, die gerade erst aus dem Kind entstehen soll) — der Schirm
   fiele dann auf null zusammen. Der Rahmen misst deshalb selbst, der Schirm
   füllt ihn. Zwischen 520 px und rund 580 px Fenster ist der Block schmaler
   als 430 px; dann greift max-width, und ein etwas schmaleres Telefon ist
   allemal besser als eines, das über den Blockrand hinausragt. */
.spiel-rahmen{--schirm:402px;--status:59px;--unten:34px;box-sizing:border-box;width:calc(var(--schirm) + 28px);max-width:100%;margin:26px auto 0;padding:14px;border-radius:58px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line);font-family:'Barlow Condensed',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.spiel-schirm{position:relative;width:100%;height:874px;border-radius:44px;background:var(--page);color:var(--ink);overflow:hidden}
.spiel-szene{position:absolute;inset:0}
/* Die Statuszeile liegt ÜBER der Bühne, nicht darüber im Fluss: Das Startbild
   reicht in der App bis an die obere Kante und läuft hinter ihr durch. */
.spiel-statusleiste{position:absolute;top:0;left:0;right:0;height:var(--status);display:flex;align-items:center;justify-content:space-between;padding:8px 34px 0;font-size:17px;font-weight:700;letter-spacing:.3px;pointer-events:none;z-index:3}
.spiel-symbole{display:flex;align-items:center;gap:6px}
.spiel-symbol{display:block}
.spiel-insel{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:120px;height:34px;border-radius:999px;background:var(--page);pointer-events:none;z-index:4}
.spiel-griff{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:138px;height:5px;border-radius:999px;background:var(--soft);pointer-events:none;z-index:4}

/* b) Der Einstieg: eine Provokation, ein Knopf, sonst nichts.
   Das Bild trägt oben und wird nach unten weggeblendet. Der Verlauf beginnt
   erst unter der Bildmitte, damit das Gesicht stehen bleibt, und endet VOLL
   schwarz: Dort steht der Text, und Weiß auf einem halb durchscheinenden Bild
   ist auf keinem Gerät verlässlich lesbar (start_screen.dart). Die vier Stopps
   sind von dort abgeschrieben. */
.spiel-einstieg{position:absolute;inset:0}
.spiel-einstieg-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.spiel-einstieg-schleier{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--page) 55%,transparent) 42%,var(--page) 62%,var(--page) 100%)}
/* Der Block hängt an der UNTEREN Kante und ist trotzdem scrollbar: Bei sehr
   großer Systemschrift wächst der Text nach oben aus dem Bild heraus, statt
   in einen Überlauf zu laufen. Der Knopf bleibt dabei an derselben Stelle. */
.spiel-einstieg-text{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - var(--status));overflow-y:auto;overscroll-behavior:contain;padding:24px;display:flex;flex-direction:column;align-items:stretch}
.spiel-einstieg-titel{font-size:32px;font-weight:700;line-height:1.05;letter-spacing:.5px;color:var(--ink)}
.spiel-einstieg-satz{margin-top:16px;font-size:20px;font-weight:600;line-height:1.25;letter-spacing:.5px;color:var(--ink)}
.spiel-einstieg .spiel-knopf{margin-top:28px}

/* c) Die Spielfläche.
   Eine Spalte, in der genau ein Element nachgibt: das Feld. Alles andere hat
   sein Maß aus der App — Kopfzeile 48, Balken 6, Knopf 52. Oben und unten
   bleiben die Sicherheitsabstände des Geräts frei, wie es die SafeArea der App
   tut. */
.spiel-partie{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(var(--status) + 4px) 16px calc(12px + var(--unten))}
.spiel-kopf{flex:0 0 auto;display:flex;align-items:center;height:48px}
/* Rechts derselbe Platz wie links: So steht der Titel wirklich in der Mitte
   und rutscht nicht daneben. In der App ist der Platz leer, hier trägt er den
   Tonschalter — den es dort nicht braucht. */
.spiel-rund{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;padding:0;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}
.spiel-titel{flex:1 1 auto;min-width:0;text-align:center;font-size:18px;font-weight:600;letter-spacing:1.8px;line-height:1.2}
.spiel-uhr{flex:0 0 auto;text-align:center;font-size:36px;font-weight:700;letter-spacing:1.8px;line-height:1.2;color:var(--ink)}
.spiel-balken{flex:0 0 auto;margin-top:8px;height:6px;border-radius:4px;background:var(--soft);overflow:hidden}
.spiel-balken-wert{display:block;width:0;height:100%;border-radius:4px;background:var(--pink)}
/* Der Hinweis ersetzt die Statuszeile für zwei Sekunden — dieselbe Zeile,
   dieselbe Stelle, andere Farbe. So wandert der Blick nicht. */
.spiel-status{flex:0 0 auto;margin:12px 0 0;text-align:center;font-size:12px;font-weight:600;letter-spacing:1.2px;line-height:1.35;color:var(--muted)}
.spiel-status.ist-hinweis{color:var(--lime)}

/* Das Wechselbudget als drei Marken (Betreiber, 24.09.2026).
   Die Regel „höchstens drei Wechsel je Fenster" gibt es seit dem ersten Tag,
   sie war nur nicht zu bemerken: Sie stand als Nebensatz in der Statuszeile
   („noch 2 Wechsel") und sonst nur in einem Hinweis, der den vierten Tipp
   quittierte und nach zwei Sekunden wieder verschwand. Eine Regel, die niemand
   bemerkt, ist für den Spieler nicht vorhanden - genau so entstand der Eindruck,
   sie sei aus dem Spiel gefallen.
   Drei Marken statt einer Zahl, weil das Budget während des Fensters abgelesen
   und nicht gelesen wird: Wie viele Striche noch leuchten, sieht man im
   Vorbeischauen. Lime ist im Spiel durchgehend die Farbe des noch Offenen (der
   Restzeit-Bogen am Ring trägt sie auch), --soft die des Verbrauchten.
   Die Zeile steht IMMER in der Spalte und wird nur unsichtbar geschaltet, nicht
   ausgebaut: Ein Aus- und Einbauen änderte die Höhe der Spalte beim Öffnen des
   Fensters, und das quadratische Feld darüber sprang bei jedem Wechsel auf ein
   neues Maß - mitsamt den fünf Ringen, die man gerade antippen will. */
.spiel-budget{flex:0 0 auto;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:6px;visibility:hidden}
.spiel-budget.ist-sichtbar{visibility:visible}
.spiel-budget-marke{width:22px;height:5px;border-radius:3px;background:var(--lime)}
.spiel-budget-marke.ist-verbraucht{background:var(--soft)}
/* Der abgewiesene Tipp: Farbe UND eine kurze Bewegung. Die Farbe allein wäre
   auf einem Element von 5 px Höhe leicht zu übersehen, die Bewegung allein
   bliebe bei reduzierter Bewegung ganz aus - deshalb beides, und unter
   `reduce` bleibt die Farbe als reine Zustandsänderung übrig. */
.spiel-budget.ist-abgelehnt .spiel-budget-marke{background:var(--pink)}
.spiel-budget.ist-abgelehnt{animation:spiel-ruettel .34s ease-in-out}
@keyframes spiel-ruettel{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  45%{transform:translateX(5px)}
  70%{transform:translateX(-3px)}
}
@media(prefers-reduced-motion:reduce){
  .spiel-budget.ist-abgelehnt{animation:none}
}

/* Das Feld ist quadratisch; seine Kante setzt das Skript (Math.min aus Breite
   und Höhe), weil eine Fläche ihre eigene Kantenlänge kennen muss, bevor sie
   die Ringe darauf bemessen kann. */
.spiel-feld{flex:1 1 auto;min-height:0;margin-top:10px;display:flex;align-items:center;justify-content:center}
.spiel-court{position:relative;flex:0 0 auto}
.spiel-court-bild{position:absolute;inset:0;width:100%;height:100%}
/* Gemessen wird der RING, nicht der ganze Block: Unter dem Ring stehen zwei
   Zeilen, und würde der Block als Ganzes zentriert, säße der Ring um deren
   halbe Höhe zu hoch — der gestrichelte Kreis schaute unten hervor
   (court_view.dart). Name und Zeit dürfen dabei über den Feldrand hinausragen;
   abgeschnitten wären sie schlimmer als überstehend. */
.spiel-platz{position:absolute;transform:translate(-50%,calc(var(--platz,44px) / -2))}

.spiel-bank{flex:0 0 auto;margin-top:10px}
.spiel-bank-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px}
.spiel-bank-titel{font-size:15px;font-weight:700;letter-spacing:1.5px;color:var(--ink)}
.spiel-bank-zahl{font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}
/* Die dritte Angabe im Bankkopf sagt, wonach die Bank sortiert ist: links
   sitzt, wer am längsten nicht gespielt hat. Sie ist die leiseste der drei —
   eine Auskunft, keine Anweisung: Der Trainer darf jeden Wartenden nehmen, und
   ein zu lauter Hinweis läse sich wie die Aufforderung, von vorne zu nehmen.
   Der Punkt davor ist GEZEICHNET und nicht getippt (`content:''` plus Fläche):
   Ein Mittelpunkt als Zeichen stünde im Vorlesetext der Zeile und wäre dort
   Lärm. Gruppiert wird damit das Weiche gegen die Zahl davor.
   Umbruch erlaubt: Bei sehr großer Systemschrift passen drei Angaben nicht in
   eine Zeile - dann kostet der Kopf eine zweite, und das Feld darüber gibt sie
   her. Ein waagerechter Überlauf wäre hier die schlechtere Wahl: Er verschöbe
   die ganze Spalte, nicht nur den Kopf. */
.spiel-bank-ordnung{font-size:11px;font-weight:600;letter-spacing:.6px;color:var(--muted)}
.spiel-bank-ordnung::before{content:'';display:inline-block;width:3px;height:3px;margin-right:7px;border-radius:50%;background:currentColor;vertical-align:middle}
/* EINE waagerechte Reihe, seitlich schiebbar (Betreiber, 24.09.2026).
   Vorher brach die Bank nach fünf Plätzen um und stand bei sieben Wartenden
   zweireihig da - die zweite Reihe kostete am Telefon rund 90 px, und die
   fehlten dem Spielfeld darüber. Eine schiebbare Leiste ist zugleich näher an
   einer echten Auswechselbank: Die Spieler sitzen nebeneinander, und wer weiter
   hinten sitzt, ist nicht weg, sondern ein Stück weiter rechts.
   Die Spaltenbreite kommt aus dem Skript (--bank-spalte) und nicht aus einem
   Prozentwert hier: Sie ist dieselbe Zahl, aus der das Skript die Ringgröße
   ableitet, und zwei Stellen mit derselben Zahl liefen auseinander. Der
   Rückfallwert gilt für den einen Bildaufbau, bevor gemessen wurde.
   Mittig steht die Reihe über `auto`-Ränder am ersten und letzten Platz und
   ausdrücklich NICHT über `justify-content:center`. Beim heutigen Kader greift
   keines von beidem: Zwölf Spieler und höchstens fünf auf dem Feld heißt
   mindestens sieben auf der Bank, und sieben passen nie in fünfeinhalb Spalten.
   Die Zeilen stehen trotzdem, und die Wahl zwischen ihnen ist keine Geschmacks-
   frage: Zentrierter Inhalt, der überläuft, ragt zu BEIDEN Seiten hinaus, und
   die linke Hälfte ist dann nicht mehr erreichbar - ein `auto`-Rand nimmt
   dagegen nur positiven Freiraum und fällt beim Überlauf auf null (gemessen
   24.09.2026 in Chromium: Gigi steht bei scrollLeft 0 vollständig da, der Weg
   endet genau bei scrollWidth - clientWidth).
   `overscroll-behavior-x:contain` hält das Schieben in der Leiste: Ohne die
   Zeile setzt der Browser die Geste am Ende der Leiste auf der Seite fort - am
   Telefon ist das die Zurück-Wischgeste, und ein Wisch auf der Bank verließe
   die Seite. */
.spiel-bank-reihe{display:flex;margin-top:6px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none}
.spiel-bank-reihe::-webkit-scrollbar{display:none}
.spiel-bank-zelle{flex:0 0 var(--bank-spalte,20%);display:flex;justify-content:center}
.spiel-bank-zelle:first-child{margin-left:auto}
.spiel-bank-zelle:last-child{margin-right:auto}
/* Dass es weitergeht, sagt zweierlei: Der nächste Spieler steht angeschnitten
   am Rand (die Leiste zeigt fünfeinhalb Plätze, nicht fünf), und darüber liegt
   eine weiche Kante in der Farbe des Schirms. Die Kante hängt an der Hülle um
   die Leiste und nicht an der Leiste selbst - in der Leiste würde sie
   mitgeschoben und stünde gleich darauf mitten zwischen zwei Spielern.
   Sie erscheint nur auf der Seite, auf der wirklich etwas liegt; welche das
   ist, misst das Skript (messeBankRand). Eine dauerhaft eingeblendete Kante
   behauptete bei drei Wartenden eine Fortsetzung, die es nicht gibt. */
.spiel-bank-reihen{position:relative}
.spiel-bank-reihen::before,
.spiel-bank-reihen::after{content:'';position:absolute;top:0;bottom:0;width:30px;pointer-events:none;opacity:0}
.spiel-bank-reihen::before{left:0;background:linear-gradient(90deg,var(--page),transparent)}
.spiel-bank-reihen::after{right:0;background:linear-gradient(270deg,var(--page),transparent)}
.spiel-bank-reihen.hat-links::before,
.spiel-bank-reihen.hat-rechts::after{opacity:1}

/* Der EINE Knopf. Höhe 52 statt der Fingerkuppen-Grenze von 44: Er wird bei
   laufender Uhr gedrückt, oft in Eile (game_control_button.dart). */
.spiel-knopf{flex:0 0 auto;margin-top:12px;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:var(--lime);color:var(--page);font-family:inherit;font-size:18px;font-weight:600;letter-spacing:1.8px;cursor:pointer}
.spiel-knopf.ist-teal{background:var(--teal)}
/* Gedämpft statt ausgeblendet: Der Knopf bleibt sichtbar, damit zu sehen ist,
   WAS als Nächstes käme — nur eben noch nicht geht. */
.spiel-knopf:disabled{background:var(--soft);color:var(--muted);cursor:default}

/* d) Der Spielerring.
   Die Spur ist --soft, der Bogen --lime und bei Überzeit --pink. Die
   Strichstärke steht nicht hier, sondern kommt je Ringgröße aus dem Skript:
   Sie soll in jeder Größe drei Bildpunkte breit bleiben, und ein Strich in
   viewBox-Einheiten wüchse mit dem Kreis mit.
   Was der REALITY-Schalter von alledem verbirgt, steht in Teil j. */
.spiel-spieler{width:var(--ring,44px);display:flex;flex-direction:column;align-items:center;padding:0;border:0;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer}
.spiel-ring{position:relative;width:var(--ring,44px);height:var(--ring,44px);display:grid;place-items:center}
.spiel-bogen{position:absolute;inset:0;width:100%;height:100%}
.spiel-bogen-spur{fill:none;stroke:var(--soft)}
.spiel-bogen-rest{fill:none;stroke:var(--lime);stroke-linecap:round}
.spiel-spieler.ist-warn .spiel-bogen-rest{stroke:var(--pink)}
.spiel-bild{width:var(--bild,34px);height:var(--bild,34px);border-radius:50%;object-fit:cover;background:var(--soft)}
.spiel-ersatz{position:absolute;font-size:14px;font-weight:700;letter-spacing:.7px}
.spiel-name{margin-top:4px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:1.2px;line-height:1.3}
.spiel-zeit{white-space:nowrap;font-size:14px;font-weight:700;letter-spacing:.7px;line-height:1.3;color:var(--lime)}
.spiel-spieler.ist-warn .spiel-zeit{color:var(--pink)}

/* e) Das Ergebnis. Scrollt im Schirm und nicht in der Seite: Ein Block, der
   die Seite unter sich wegzieht, sobald man im Telefon wischt, fühlt sich
   kaputt an.
   Die Sicherheitsabstände stehen hier als Kante der Fläche und nicht als
   Polster: Ein gepolsterter Bildlauf schiebt seinen Inhalt UNTER die
   Statuszeile, und dort stand dann eine Zeile des Zeitstrahls quer durch Uhr
   und Insel. Die App hat dieselbe Kante, weil ihre SafeArea um den Bildlauf
   liegt und nicht darin. */
.spiel-ergebnis{position:absolute;left:0;right:0;top:var(--status);bottom:var(--unten);overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 24px}
/* Der Knopf nimmt die volle Breite (GameControlButton: width double.infinity).
   In der Spielfläche erledigt das die Spalte; hier steht er in einem Bildlauf
   und muss es selbst sagen. */
.spiel-ergebnis .spiel-knopf{display:block;width:100%;margin-top:26px}
.spiel-ergebnis-kopf{display:flex;justify-content:flex-start}
.spiel-ergebnis-zeile{margin:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}
.spiel-ergebnis-note{margin:10px 0 0;text-align:center;font-size:18px;font-weight:600;letter-spacing:1.8px}
/* „Solide" bleibt weiß: Die drei Akzentfarben sind für die Aussagen
   reserviert, die etwas bedeuten (rotation_hero_record_card.dart). */
.spiel-ergebnis-note.ist-lime{color:var(--lime)}
.spiel-ergebnis-note.ist-teal{color:var(--teal)}
.spiel-ergebnis-note.ist-ink{color:var(--ink)}
.spiel-ergebnis-note.ist-pink{color:var(--pink)}
.spiel-ergebnis-warum{margin:8px 0 0;text-align:center;font-size:14px;font-weight:600;letter-spacing:.3px;line-height:1.45;color:var(--muted)}
/* Die Zeile zur Bestenliste steht heller als die Begründung darüber, aber
   ruhiger als die Note: Sie ist eine Auskunft und keine Bewertung. Sie erscheint
   erst mit der Antwort des Servers und bleibt bis dahin ausgeblendet — ein
   reservierter Leerraum sähe aus wie eine Zeile, die nicht geladen hat. */
.spiel-ergebnis-platz{margin:8px 0 0;text-align:center;font-size:14px;font-weight:600;letter-spacing:.3px;line-height:1.45;color:var(--teal)}
.spiel-kennzahlen{display:flex;margin-top:18px}
.spiel-kennzahl{flex:1 1 0;min-width:0;text-align:center}
.spiel-kennzahl-wert{font-size:24px;font-weight:700;letter-spacing:1.2px;line-height:1.2}
.spiel-kennzahl-name{margin-top:2px;font-size:12px;font-weight:600;letter-spacing:1.2px;line-height:1.3;color:var(--muted)}
.spiel-abschnitt{margin:22px 0 0;font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}

/* Der Zeitstrahl. Die Namensspalte ist fest und nicht am längsten Namen
   bemessen: Alle zwölf Spuren müssen an derselben Stelle beginnen, sonst lässt
   sich ein Wechsel nicht über die Zeilen hinweg ablesen. */
.spiel-strahl{margin-top:8px}
.spiel-strahl-zeile,.spiel-strahl-achse{display:flex;align-items:center}
.spiel-strahl-zeile{padding:3px 0}
.spiel-strahl-name{flex:0 0 62px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:1.2px}
.spiel-strahl-spur{position:relative;flex:1 1 auto;height:12px;border-radius:6px;background:var(--soft);overflow:hidden}
.spiel-strahl-balken{position:absolute;top:0;bottom:0;border-radius:6px;background:var(--lime)}
/* Zwei Einsätze ohne Pause dazwischen sollen als ZWEI lesbar bleiben — sonst
   verschwindet ein Wechsel, bei dem jemand sofort zurückkommt, in einem
   durchgehenden Balken. Die Haarlinie liegt deshalb AUF dem Balken. */
.spiel-strahl-balken.hat-kante-links{box-shadow:inset 1px 0 0 0 var(--page)}
.spiel-strahl-balken.hat-kante-rechts{box-shadow:inset -1px 0 0 0 var(--page)}
.spiel-strahl-balken.hat-kante-links.hat-kante-rechts{box-shadow:inset 1px 0 0 0 var(--page),inset -1px 0 0 0 var(--page)}
.spiel-strahl-achse{margin-top:4px}
/* Die Marke bei 0 und die bei 40 stehen bündig am Rand, statt zur Hälfte
   darüber hinauszuragen — dasselbe, was Align in der App tut. */
.spiel-strahl-marken{flex:1 1 auto;display:flex;justify-content:space-between;font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}

/* Die Abweichungsliste. Teal heißt „zu wenig", pink „zu viel"; genau
   getroffen zählt zu „nicht überzogen". */
.spiel-abweichung-zeile{display:flex;align-items:center;gap:10px;padding:6px 0}
.spiel-abweichung-bild{flex:0 0 30px;width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--soft)}
.spiel-abweichung-mitte{flex:1 1 auto;min-width:0}
.spiel-abweichung-oben{display:flex;align-items:baseline;gap:8px}
.spiel-abweichung-name{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:1.2px}
.spiel-abweichung-gespielt{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:1.2px;color:var(--muted)}
.spiel-abweichung-spur{position:relative;margin-top:4px;height:10px;border-radius:5px;background:var(--soft)}
.spiel-abweichung-balken{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--teal)}
.spiel-abweichung-zeile.ist-zuviel .spiel-abweichung-balken{background:var(--pink)}
/* Die Soll-Linie liegt ÜBER dem Balken und nicht daneben: Der Blick soll auf
   einen Griff sehen, ob der Balken vor oder hinter der Marke endet. */
.spiel-abweichung-marke{position:absolute;top:0;bottom:0;width:2px;background:var(--ink)}
.spiel-abweichung-zahl{flex:0 0 60px;text-align:right;font-size:14px;font-weight:700;letter-spacing:.7px;color:var(--teal)}
.spiel-abweichung-zeile.ist-zuviel .spiel-abweichung-zahl{color:var(--pink)}

/* f) Die Abbruchfrage. Voll deckende schwarze Fläche hinter einer weißen
   Haarlinie; abbrechen ist der pinke, gefüllte Knopf — der sichere Weg ist der
   auffällige, die verwerfende Antwort steht grau daneben
   (practx_confirm_dialog.dart). */
.spiel-abfrage{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--page) 62%,transparent)}
.spiel-abfrage-karte{width:100%;max-width:300px;padding:24px 20px 16px;border:1px solid var(--ink);border-radius:14px;background:var(--page);text-align:center}
.spiel-abfrage-titel{margin:0;font-size:18px;font-weight:600;letter-spacing:1.8px;color:var(--ink)}
.spiel-abfrage-text{margin:12px 0 0;font-size:16px;font-weight:600;letter-spacing:.5px;line-height:1.4;color:var(--ink)}
.spiel-abfrage-reihe{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px}
.spiel-abfrage-weiter,.spiel-abfrage-raus{min-height:44px;padding:0 20px;border:0;border-radius:999px;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer}
.spiel-abfrage-weiter{background:var(--pink);color:var(--page)}
.spiel-abfrage-raus{background:transparent;color:var(--muted)}

/* g) Ohne Rahmen: unter 520 px ist das Gerät fort, das Spiel füllt den Block.
   Die Höhe kommt dann aus dem Fenster statt aus dem Gerät — mit Untergrenze,
   weil die Spalte unter rund 600 px keinen Platz mehr für ein Feld lässt, auf
   dem fünf 44-px-Ringe nebeneinander Platz haben. Dann scrollt lieber die
   Seite. */
@media(max-width:519px){
  .spiel-rahmen{--status:0px;--unten:0px;width:100%;margin-top:0;padding:0;border-radius:var(--radius);background:var(--page);box-shadow:none}
  .spiel-schirm{width:100%;height:clamp(600px,calc(100dvh - 40px),860px);border-radius:var(--radius)}
  .spiel-statusleiste,.spiel-insel,.spiel-griff{display:none}
  .spiel-partie{padding-left:14px;padding-right:14px}
}

/* h) Die Spielseite: das Gerät steht allein.
   Ansage des Betreibers vom 24.09.2026. Die Academy trug seit dem Tag nichts
   als das Spiel; seit dem 29.09.2026 steht das Spiel auf seiner eigenen
   Unterseite (/academy/rotation-hero/, /de/academy/rotation-hero/), und die
   Academy ist ein Dashboard (Abschnitt 29). Die Regeln hier hängen an der
   Marke body.seite-spiel und am Block und sind mit umgezogen, ohne dass sich
   eine Zeile ändern musste. Am Block ändert sich dreierlei:

   1. KEIN KASTEN. Der Block hat keine Fläche und kein Polster; am Rechner steht
      das Gerät damit vor Schwarz. Die Blockfolge aus Abschnitt 2 bleibt dabei
      unberührt - der Block trägt .on-black und nimmt sich damit dieselbe
      Ausnahme wie die Preisblöcke, statt eine zweite Mechanik aufzumachen.
   2. VOLLE BREITE AM HANDY. Unter 520 px ist der Geräterahmen ohnehin fort
      (Teil g); hier fällt zusätzlich das seitliche Polster der Seitenhülle weg,
      damit das Spiel wirklich von Kante zu Kante steht. Die Brotkrume darüber
      bekommt ihr Polster einzeln zurück, sonst klebte sie am Rand.
   3. DIE LEISTE KLEBT NICHT. Auf jeder anderen Seite bleibt sie oben stehen;
      hier läge sie auf dem Gerät. Deshalb hängt die Ausnahme an der Marke
      body.seite-spiel und nicht an der Leiste selbst.

   Die Höhe, und der Zielkonflikt dahinter (24.09.2026): Der Betreiber nannte
   erst 90 % der Fensterhöhe, damit das ganze Gerät ohne Scrollen zu sehen ist —
   und danach, dass der Erklärtext ÜBER dem Gerät stehen soll. Beides zusammen
   geht auf keinem Bildschirm: Der Text allein füllt am Rechner rund 450 px, am
   Telefon über 800 px. Die jüngere Ansage gewinnt, und die 90 % sind damit eine
   OBERGRENZE und kein Sollwert.
   Der frühere dritte Term (`100dvh` minus Leiste und Brotkrume) ist deshalb
   fort. Er hielt das Gerät klein, damit der ganze Block in ein Fenster passt —
   ein Zweck, den es nicht mehr gibt; was über dem Gerät steht, ist jetzt der
   Text, und dessen Höhe kann keine CSS-Zahl kennen. Ein Gerät, das sich an
   einen unerreichbaren Zweck anpasst, wäre nur noch klein.
   Die Untergrenze ist dafür neu und der eigentliche Schutz: Unterhalb von rund
   760 px bleibt in der Spalte kein Feld mehr übrig, auf dem fünf Ringe stehen
   können — Kopfzeile, Uhr, Balken, Status, Bank und Knopf haben ihr festes Maß
   aus der App, und nur das Feld gibt nach. Auf einem niedrigen Fenster scrollt
   deshalb lieber die Seite, statt das Spielfeld zu verschlucken.
   Die Zeile für den Schirm ist nötig, weil Teil a und Teil g ihm feste Höhen
   geben; hier füllt er den Rahmen, der die Höhe trägt. */
body.seite-spiel .nav-shell{position:static}
#main > .section.spiel-block{padding:0}
.spiel-block .spiel-rahmen{margin-top:0;height:clamp(760px,90dvh,902px)}
.spiel-block .spiel-schirm{height:100%}
/* Die Höhe des Geräts wird RESERVIERT, bevor das Gerät da ist - derselbe Wert
   wie am Rahmen darin, damit nichts springt.
   Das Spiel kommt über einen dynamischen Import und hängt beim ersten Aufbau
   der Seite noch nicht im Dokument; die Bühne ist bis dahin null hoch, und
   alles darunter steht um ein ganzes Gerät zu weit oben. Seit der Bestenliste
   ist das nicht mehr nur ein Sprung im Bild: Gemessen am 24.09.2026 (Chromium,
   1280x900) lag sie dadurch beim Aufbau im Sichtfeld, ihr Beobachter löste
   sofort aus und holte die Daten - genau der Abruf ohne Zutun des Besuchers,
   den die Datenschutzerklärung ausschließt. */
.spiel-block .spiel-buehne{min-height:clamp(760px,90dvh,902px)}

/* Text ÜBER dem Gerät, auf beiden Größen (Betreiber, 24.09.2026). Eine Spalte
   statt des früheren Rasters `auto | 1fr`: Überschrift, Absätze, Gerät stehen
   in der Reihenfolge des Dokuments untereinander, und damit ist die
   Vorlesereihenfolge weiterhin die, die man sieht.
   Der senkrechte Abstand ist kleiner als der frühere waagerechte: Zwischen zwei
   Spalten trennt Weißraum, untereinander genügt die Zeile Luft - und jeder
   Bildpunkt hier fehlt dem Gerät weiter unten. */
.spiel-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,2.4vw,34px)}
.spiel-buehne{min-width:0}
.spiel-buehne.ist-fehler{padding:24px 0;color:var(--muted)}
/* Dieselbe Textbreite wie jeder andere Fließtext der Seite (.lede: 790 px),
   mittig über dem Gerät. Über die volle Blockbreite gesetzt, rissen die Zeilen
   am Rechner auf rund 1150 px auf - lesbar ist das nicht mehr. */
.spiel-worte{min-width:0;max-width:790px;margin-left:auto;margin-right:auto}
/* Die Überschrift bleibt unter der Vorlagengröße (bis 4,4 rem), obwohl sie
   jetzt über der ganzen Breite stehen könnte: In voller Größe bräche sie am
   Rechner in zwei Zeilen um, und die zweite Zeile fehlte unten dem Spielfeld.
   Die Höhe über dem Gerät ist seit dieser Ansage das knappe Gut. */
.spiel-worte h1{font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.1}
.spiel-worte .lede{margin-top:20px}

@media(max-width:519px){
  body.seite-spiel .shell{padding-left:0;padding-right:0}
  body.seite-spiel .page-trail{padding-left:20px;padding-right:20px}
  /* Ohne Geräterahmen fallen Statuszeile und Griff weg (Teil g); die Spalte
     braucht deshalb rund 200 px weniger als am Rechner, bevor das Feld
     verschwindet. Die Untergrenze ist entsprechend niedriger. */
  .spiel-block .spiel-rahmen{border-radius:0;height:clamp(560px,90dvh,860px)}
  .spiel-block .spiel-buehne{min-height:clamp(560px,90dvh,860px)}
  .spiel-block .spiel-schirm{border-radius:0}
  .spiel-worte{padding:0 20px}
}

/* i) Die Bestenliste unter dem Gerät (Betreiber, 24.09.2026).
   Der Block steht auf der Blockfläche #13171C, weil er in der Blockfolge aus
   Abschnitt 2 hinter dem Spiel liegt — das Gerät darüber steht auf Schwarz,
   die Liste hebt sich davon von selbst ab. Es braucht dafür keine eigene
   Fläche und keine Karte.

   Die Zahlen laufen über tabular-nums: Ohne sie sind Ziffern verschieden
   breit, und eine Spalte aus Zeiten steht nicht auf einer Kante. Genau das ist
   aber ihr Zweck — sie wird von oben nach unten verglichen.

   Die Werte-Spalte trägt keine Sekundenangabe im Kopf: Was dort steht, erklärt
   die Zeile über der Tabelle, und ein Kopf aus zwei Zeilen bräche am Telefon
   ungünstig um.

   Alle Farben kommen aus Abschnitt 1; --teal ist im Spiel die Farbe von „zu
   wenig gespielt" und trägt hier den Platz, --muted das Beiwerk. */
.bestenliste-hinweis{max-width:640px}
/* Schmaler als der Fließtext darüber: Drei kurze Spalten auf 640 px ließen
   zwischen Wert und Zeitpunkt eine Lücke, über die das Auge nicht mehr von
   einer Spalte zur nächsten findet (gemessen 24.09.2026, 1280x900). */
.bestenliste{width:100%;max-width:520px;margin-top:26px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.bestenliste th,
.bestenliste td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
.bestenliste th{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.bestenliste td{font-size:17px;color:var(--ink)}
/* Platz und Wert sind die beiden Zahlen, die man vergleicht; der Zeitpunkt ist
   Beiwerk und steht gedämpft am rechten Rand. */
.bestenliste .bestenliste-platz{width:3.5em;font-weight:700;color:var(--teal)}
.bestenliste .bestenliste-wert{font-weight:700}
.bestenliste .bestenliste-zeit{color:var(--muted);text-align:right}
.bestenliste thead th:last-child{text-align:right}
/* Platzhalter, Leerfall und Ausfall teilen sich eine Zeile über die ganze
   Breite. Sie bleibt ruhig und grau: Ein nicht erreichbarer Server ist für den
   Besucher kein Fehler, den er beheben könnte. */
.bestenliste .bestenliste-satz td{color:var(--muted);font-size:16px}
/* Die Mindesthöhe hält den Platz der Zählerzeile frei, solange sie leer ist —
   sonst springt der Block, sobald die Antwort da ist. */
.bestenliste-zaehler{margin-top:18px;color:var(--muted);font-size:16px;min-height:1.4em}

/* Am Telefon zählt jede Spalte einzeln: Der Zeitpunkt ist die längste und
   bekommt den Rest, deshalb schrumpfen Innenabstand und Platzspalte zuerst. */
@media(max-width:519px){
  .bestenliste th,
  .bestenliste td{padding:10px 6px}
  .bestenliste th{font-size:12px;letter-spacing:.05em}
  .bestenliste td{font-size:16px}
  .bestenliste .bestenliste-platz{width:2.4em}
}

/* j) Der REALITY-Schalter (Betreiber, 24.09.2026).
   Er blendet die Restzeit AN DEN SPIELERN aus - den Bogen um den Ring und den
   Countdown darunter. Uhr, Balken, Namen, Gesichter, Bank und Wechsel-Marken
   bleiben stehen; das Spiel selbst rechnet unverändert weiter (assets/game/
   spiel.js, kRealityName).

   WO ER SITZT. In der Spalte des Tonschalters, nach unten aus der Kopfzeile
   herausragend: Die Hülle .spiel-kopf-rechts nimmt dieselben 48 px wie der
   runde Knopf, damit der Titel weiterhin wirklich mittig steht, und der
   Schalter hängt absolut an ihrer Unterkante. Eine eigene Zeile in der Spalte
   wäre der naheliegende Weg und der falsche: Sie nähme dem quadratischen Feld
   darunter ihre Höhe, und das Feld ist das einzige Element dieser Seite, das
   nachgeben darf. Neben der Uhr ist dafür Platz - sie steht mittig und ist
   auch als „40:00" keine 90 px breit.

   WARUM 44 PX HOCH, obwohl die Schrift 11 px misst: Das ist die Untergrenze,
   die eine Fingerkuppe sicher trifft, und sie gilt hier wie am Bankring
   (kMinTipp). Der Schalter wird bei laufender Uhr gedrückt.

   DER ZUSTAND ist eine Fläche und kein Beiwerk: aus - Umriss in --pink, an -
   gefüllt in --pink mit Schrift in --page. Dieselbe Form trägt schon der
   bejahende Knopf der Abbruchfrage (Teil f). Die Farbe kommt aus Abschnitt 1,
   wie jede andere in dieser Datei.

   VERBORGEN WIRD MIT visibility, nicht mit display. Der Countdown steht unter
   dem Ring in der Spalte; fiele er aus dem Fluss, schrumpfte der Block jedes
   Spielers um eine Zeile, und alle zwölf Ringe sprängen auf eine neue Größe -
   mitten im Spiel, während man einen davon antippen will. Dieselbe Begründung
   hält schon die Budget-Zeile im Fluss (Teil c).

   DER UMRISS BLEIBT. Der Ring IST die Schaltfläche; ohne Kreis wäre nicht mehr
   zu sehen, wo man tippen kann. An die Stelle des Bogens tritt deshalb ein
   ruhender Kreis in --soft - derselbe Ort, dieselbe Breite wie die Spur
   darunter (das Skript zieht den Bogen um die halbe Strichstärke ein, seine
   Außenkante liegt damit genau auf der Kastenkante). Er trägt keinen Zustand:
   Er ist für jeden Spieler gleich und ändert sich nie. Damit ist auch die
   Warnfärbung fort, die sonst verriete, wer überzogen hat - sie hängt an
   genau den beiden Elementen, die hier verschwinden (Teil d).

   Die Ergebnisseite bleibt unberührt, und zwar baulich: Die Klasse hängt an
   .spiel-partie, nicht am Schirm. Was nach dem Schlusssignal an Zeiten
   auftaucht, ist ein eigener Baum - und dort ist die Auflösung der Sinn der
   Sache. */
.spiel-kopf-rechts{position:relative;flex:0 0 48px;height:48px}
.spiel-reality{position:absolute;top:100%;right:0;min-height:44px;padding:0 12px;border:1px solid var(--pink);border-radius:999px;background:transparent;color:var(--pink);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:1.4px;line-height:1.2;white-space:nowrap;cursor:pointer;transition:background-color .18s ease,color .18s ease}
.spiel-reality.ist-an{background:var(--pink);color:var(--page)}
/* Wer weniger Bewegung eingestellt hat, bekommt den Zustandswechsel hart -
   die Farbe sagt dasselbe, sie sagt es nur ohne Überblendung. */
@media(prefers-reduced-motion:reduce){
  .spiel-reality{transition:none}
}
.spiel-partie.ist-reality .spiel-bogen,
.spiel-partie.ist-reality .spiel-zeit{visibility:hidden}
.spiel-partie.ist-reality .spiel-ring{border-radius:50%;box-shadow:inset 0 0 0 3px var(--soft)}

/* ---------- 22. Funktionen für Trainer (/de/funktionen/, nur Markt de) ----------
   Drei Blöcke: Hero, die Galerie mit Filtern und der Abschluss (der
   Einordnungsblock „Warum so viele Funktionen?" mit drei Akzentkarten ist
   seit dem 24.09.2026 auf Betreiber-Wunsch entfallen). Die Blockfolge Schwarz / #13171C aus Abschnitt 2 ergibt
   sich aus der Reihenfolge von selbst; die Galerie trägt zusätzlich .on-black,
   weil ihre Kacheln die Blockfläche #13171C tragen und auf ihr verschwänden.
   Die Filter-Pillen sind die der Übungsseite (.drill-filter, Abschnitt 9),
   die Tarif-Abzeichen tragen die Verläufe der Preiskarten (Abschnitt 10). Kein
   Rahmen, kein Schatten, keine Symbolsammlung. */

/* a) Hero. Die Überschrift trägt die Größe der Startseite
   (.product-headline): in der H1-Größe der Unterseiten bräche jede der beiden
   Zeilen am Rechner noch einmal um. */
.funktionen-hero .funktionen-titel{font-size:clamp(2.4rem,4vw,3rem);line-height:1.07;letter-spacing:-.045em}
.funktionen-hero .lede{max-width:760px}
.funktionen-abschluss .cta-links{margin-top:28px}

/* b) Die Filterleiste steht fest unter der Navigation (14 px Abstand + 64 px
   Höhe der Leiste der Vorlage), solange die Galerie im Bild ist. Die schwarze
   Fläche verdeckt die Kacheln, die unter ihr durchlaufen; der Schatten ist
   keine Linie, sondern schließt dieselbe Fläche nach oben an die Navigation. */
.funktionen-filter{position:sticky;top:84px;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;padding:12px 0;background:var(--page);box-shadow:0 -12px 0 var(--page)}
.funktionen-gruppe{display:flex;align-items:center;gap:12px;min-width:0}
.funktionen-gruppe-label{flex:0 0 auto;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.funktionen-filter .drill-filter{margin:0;min-width:0}
.funktionen-filter .drill-filter button{white-space:nowrap}
.funktionen-zahl{margin-top:10px;font-size:15px;line-height:1.45;color:var(--muted)}
.funktionen-leer{margin-top:10px;font-size:20px;color:var(--ink)}

/* c) Das Raster: 12 Spalten wie die Wunschgrößen (xl 8, l 6, m 4, s 3). Die
   Spanne jeder Kachel setzt der Packer in site.js als --span; jede Zeile ergibt
   genau 12, deshalb steht keine Kachel allein mit offener rechter Kante.
   align-items:stretch macht die Kacheln einer Zeile gleich hoch. */
.funktionen-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px;margin-top:18px;align-items:stretch}
.funktion{grid-column:span var(--span,4);display:flex;flex-direction:column;min-width:0;background:var(--paper);color:var(--ink);border-radius:10px;overflow:hidden;transition:transform .28s ease,opacity .28s ease,translate .18s ease}
/* Die Raster-Kennung hebt die Regel über .funktion.bild-rechts (display:grid)
   hinaus - sonst stünde eine ausgefilterte Bild-Kachel weiter im Raster. */
.funktionen-raster>.funktion[hidden]{display:none}
.funktion-inhalt{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:20px}
.funktion-kopf{min-width:0}
.funktion-marke{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:15px;line-height:1.45;color:var(--muted)}
/* Das Abzeichen: FREE Lime, MENTORED Orange, PRO und TEAM PRO Pink - schwarze
   Schrift, auf Pink weiße (Betreiber-Brief vom 23.09.2026). */
.funktion-tarif{display:inline-flex;align-items:center;border-radius:24px;padding:4px 11px;font-size:12px;font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:#000000}
.funktion-tarif.plan-pink{color:#FFFFFF}
.funktion-kategorie{font-size:15px;color:var(--muted)}
.funktion-titel{margin-top:12px;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--ink);overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
.funktion-text{margin-top:10px;font-size:20px;line-height:1.5;color:var(--ink)}
.funktion-pfeil{display:none}
/* Hover wie die Karten der Übungsbibliothek: zwei Pixel nach oben. Über die
   eigene Eigenschaft translate, damit er der Umordnung (transform) nicht in
   die Quere kommt. */
@media(hover:hover) and (min-width:781px){.funktion:hover{translate:0 -2px}}

/* d) Die Bilder sind Teil-Screenshots der App: oben angeschnitten, nie
   verzerrt. Ab 7 Spalten steht das Bild rechts neben dem Text, bei 6 darüber;
   darunter trägt die Kachel keines.
   Die Höhe bestimmt der Text, nie das Bild: rechts liegt das Bild absolut in
   seiner Spalte, oben hat es eine feste Höhe. So bleibt eine Bild-Kachel am
   Rechner bei rund 340 px - der Betreiber-Vorgabe „nie mehr als ein Viertel
   des Bildschirms". */
.funktion-bild{display:none;margin:0;background:var(--page);overflow:hidden}
.funktion-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media(min-width:781px){
  .funktion.mit-bild .funktion-bild{display:block}
  .funktion.bild-oben .funktion-bild{flex:0 0 auto;height:110px}
  .funktion.bild-rechts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr)}
  .funktion.bild-rechts .funktion-bild{position:relative;grid-column:2;grid-row:1;min-height:280px}
  .funktion.bild-rechts .funktion-bild img{position:absolute;inset:0}
  .funktion.bild-rechts .funktion-inhalt{grid-column:1;grid-row:1}
}

/* e) Am Handy zwei Spalten (große Kacheln über beide), unter 480 px eine.
   Die Leiste wird kompakt: je Gruppe eine Zeile, die Pillen laufen seitlich
   statt umzubrechen. Im Klappmodus (Klasse vom Skript, siehe site.js
   Abschnitt 4e) zeigt die Kachel nur Kopf und Bild; der Text klappt auf Tipp
   in ihr auf. Ohne Skript fehlt die Klasse, und jeder Text bleibt offen. */
@media(max-width:780px){
  .funktionen-filter{top:76px;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:8px;padding:10px 0}
  .funktionen-gruppe{gap:10px}
  .funktionen-filter .drill-filter{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .funktionen-filter .drill-filter::-webkit-scrollbar{display:none}
  .funktionen-raster{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
  .funktion{grid-column:span var(--span-handy,1)}
  .funktion.mit-bild-handy .funktion-bild{display:block}
  .funktion-bild img{height:auto;max-height:50vh}
  .funktion-inhalt{padding:18px}
  .funktion-titel{font-size:20px}
  .funktion-text{font-size:18px}
  .ist-klappbar .funktion{cursor:pointer}
  .ist-klappbar .funktion:not(.is-offen) .funktion-text{display:none}
  /* Ralf 24.09.: auch das Bild erst mit dem Text - zu zeigt die Kachel nur
     Tarif, Kategorie und Titel. Vier Klassen schlagen die Bild-Regeln der
     Handy-Stufen darunter (.funktion .funktion-bild). */
  .ist-klappbar .funktion:not(.is-offen) .funktion-bild{display:none}
  .ist-klappbar .funktion-kopf{position:relative;padding-right:30px}
  .ist-klappbar .funktion-pfeil{display:block;position:absolute;right:0;top:0;font-size:22px;line-height:1;color:var(--muted)}
  .ist-klappbar .funktion-pfeil:after{content:'\25be'}
  .ist-klappbar .funktion.is-offen .funktion-pfeil:after{content:'\25b4'}
  .funktionen-hero .funktionen-titel{font-size:clamp(2.35rem,6.6vw,3.4rem)}
}
@media(max-width:479px){
  .funktionen-raster{grid-template-columns:minmax(0,1fr)}
  .funktion{grid-column:auto}
  .funktion .funktion-bild{display:block}
}
@media(max-width:460px){
  .funktionen-hero .funktionen-titel{font-size:clamp(1.9rem,7.65vw,2.6rem)}
}

/* ---------- 23. Entwicklungshinweis über der Navigation (alle drei Märkte) ----------
   Volle Fensterbreite, außerhalb der Seitenhülle - deshalb kein max-width und
   kein margin:auto wie beim Inhalt, sondern volle Breite mit eigenem Innenabstand.
   Bewusst nicht sticky: die Leiste bleibt wie bisher stehen, dieser Streifen
   scrollt mit dem Inhalt fort. Auf der Spielseite (body.seite-spiel) gilt
   dieselbe Regel wie überall - keine Ausnahme nötig, da der Streifen vor der
   Leiste steht und von deren position:static (Abschnitt 21) unberührt bleibt.

   Seit dem 28.09.2026 trägt der Streifen das Eintragefeld der E-Mail-Liste
   (site.js Abschnitt 5a). Die Regeln des Betreibers gelten wörtlich: keine
   Rahmen um gefüllte Flächen, kein Wechsel von Farbe oder Schriftstärke
   innerhalb eines Satzes, keine Symbole in Kreisen. Der Streifen bleibt Lemon
   mit schwarzer Schrift; das Feld ist eine weiße Fläche ohne Rahmen, der Knopf
   eine schwarze - beide Radius 8 und gleich hoch.
   Am Rechner stehen Hinweis, Feld und Knopf in EINER Zeile, darunter die
   Zeile mit dem Pflicht-Kästchen (seit dem 28.09.2026 statt des früheren
   Hinweistexts). Das leistet ein umbrechendes Flex-Band: Die Kästchen-Zeile
   nimmt die ganze Breite und fängt damit immer eine eigene Zeile an. Wird das
   Fenster schmaler als Hinweis plus Feld plus Knopf, bricht die Hülle
   .band-eingabe als Ganzes in die nächste Zeile - nie Feld und Knopf
   auseinander.
   Die Kästchen-Zeile gehört ins Formular, sonst käme das Feld consent bei der
   Funktion nie an; ihre Lage aber ist die des Bandes, nicht die des Formulars.
   Deshalb zeichnet das Formular keinen eigenen Kasten (display:contents):
   Hinweis, Hülle und Kästchen-Zeile sind unmittelbar Glieder des Bandes.
   schwelle: Manche ältere Browser-Fassung führt ein Element mit
   display:contents für Vorlesesoftware nicht mehr als eigenen Bereich - dort
   fehlt dann die Landmarke „E-Mail-Liste zum Launch"; Feld, Knopf, Kästchen
   und Link bleiben vollständig erreichbar. Die Alternative, das Formular als
   Kasten mit der Kästchen-Zeile nur unter Feld und Knopf, hätte den Satz auf
   die Breite des Formulars gezwängt (drei Zeilen statt einer am Rechner).
   Der Fokusrahmen ist schwarz statt teal (Abschnitt 3): Teal auf Lemon ist
   kaum zu sehen. Er hängt allein an :focus-visible, also an der Tastatur. */
.entwicklung-band{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 16px;background:var(--lemon);color:#000;font-weight:700;font-size:20px;line-height:1.4;text-align:center;padding:10px 16px}
.entwicklung-band .band-text{font-size:20px;font-weight:700;line-height:1.4;color:#000}
.band-form{display:contents}
.band-eingabe{display:flex;align-items:center;gap:8px;min-width:0}
/* 16 px im Feld sind keine Geschmacksfrage: darunter vergrößert Safari auf dem
   iPhone die ganze Seite, sobald man ins Feld tippt. */
.band-feld{-webkit-appearance:none;appearance:none;width:260px;height:40px;padding:0 12px;border:0;border-radius:8px;box-shadow:none;background:#fff;color:#000;font-size:16px;font-weight:400;line-height:normal}
.band-feld::placeholder{color:#5c5c5c;opacity:1}
.band-knopf{-webkit-appearance:none;appearance:none;flex:0 0 auto;height:40px;padding:0 16px;border:0;border-radius:8px;background:#000;color:#fff;font-size:16px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer}
/* Die Kästchen-Zeile: klein, normal, schwarz wie der frühere Hinweis. Das
   Kästchen ist das Bordmittel des Browsers, nur größer und mit schwarzem
   Haken (accent-color); die Beschriftung ist sichtbar und selbst Tippfläche
   (label for), der Link steht neben ihr. */
.band-zustimmung{flex:0 0 100%;display:flex;justify-content:center;align-items:flex-start;gap:8px;font-size:13px;font-weight:400;line-height:1.45;color:#000;text-align:left}
.band-zustimmung input{flex:0 0 auto;width:20px;height:20px;margin:0;accent-color:#000;cursor:pointer}
.band-zustimmung label{min-width:0;cursor:pointer}
.band-zustimmung a{flex:0 0 auto;color:#000;text-decoration:underline;text-underline-offset:2px}
.entwicklung-band a:focus-visible,
.entwicklung-band input:focus-visible,
.entwicklung-band button:focus-visible{outline:2px solid #000;outline-offset:2px}
/* Sichtbar versteckt: die Beschriftung ist für Vorlesesoftware da, der
   Platzhalter im Feld sagt dasselbe für das Auge. */
.band-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Der Köder liegt links außerhalb des Fensters. Eine Lage links außen macht
   die Seite nicht breiter - Überlauf nach links lässt sich nicht scrollen. */
.band-falle{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(max-width:780px){
  .entwicklung-band{font-size:16px;gap:8px}
  .entwicklung-band .band-text{flex:0 0 100%;font-size:16px}
  .band-eingabe{flex:1 1 100%}
  .band-feld{flex:1 1 auto;width:auto;min-width:0}
  .band-knopf{padding:0 14px}
  /* Am Handy bricht der Satz in mehrere Zeilen. Links das Kästchen (24 px, gut
     mit dem Finger zu treffen), rechts der Satz, der Link darunter in derselben
     Spalte - so steht der Satz nicht zwischen Kästchen und Link eingeklemmt.
     Die 3 px über der Beschriftung setzen ihre erste Zeile auf die Mitte des
     Kästchens. */
  .band-zustimmung{display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;gap:2px 10px;font-size:12px}
  .band-zustimmung input{width:24px;height:24px}
  .band-zustimmung label{padding-top:3px}
  .band-zustimmung a{grid-column:2;justify-self:start}
}

/* Die Statusseiten /launch-info/ und /launch-info/en/: der Hero der
   Unterseiten, darunter bei einem Link aus der Mail ein einziger Knopf. */
.launch-form{margin-top:28px}

/* ---------- 24. Basketball-Trainer werden: Fotos (alle drei Märkte), dazu
   seit dem Foto-Ausdünnen vom 24.09.2026 der Startseiten-Block "Vereinslage"
   ----------
   Hero zweispaltig wie der Startseiten-Hero, Textblöcke als Text (~55 %) und
   Bild (~45 %) nebeneinander mit wechselnder Seite - dieselben `.ec-reihe`/
   `.ec-bild`-Regeln trägt jetzt auch der Vereinslage-Block auf der Startseite
   (immer Text links, Bild rechts). Der frühere Fotostreifen "spass" vor dem
   Abschlussblock ist entfallen. Die Fotos sind klein (330-960 px) und werden
   nur per CSS skaliert, nie in der Datei. Radius 10, kein Rahmen, kein
   Schatten. Am Handy steht das Bild über dem Text (Hero: unter der H1). */
.ec-foto{display:block;width:100%;height:auto;border-radius:10px;object-fit:cover}
.ec-hero-bild,.ec-bild{margin:0;min-width:0;position:relative}
/* KI-Kennzeichnung: das App-Zeichen (drei Funkelsterne) unten rechts im Foto,
   weiß und leicht transparent, mit Schlagschatten für helle Bildstellen. Bis
   zum 29.09.2026 ein Probelauf allein am Foto der Vereinslage; seit Ralfs
   Vorgabe vom Abend dieses Tages trägt es jedes KI-generierte Foto der
   Website (site.js, kiKennzeichnen): die Fotos von „Basketball-Trainer
   werden" in allen drei Märkten, die Vereinslage und das Elternbild im Block
   „Kommunikation" der Startseite. Das Zeichen hängt absolut am Behälter des
   Fotos; .ec-bild und .ec-hero-bild tragen dafür position:relative (oben),
   .parent-media bekommt es hier. Ohne die Zeile stünde das Zeichen des
   Elternbilds nicht auf dem Foto, sondern an der nächsten Kante darüber. Der
   Behälter ist so groß wie das Foto - kein Innenabstand, kein Rahmen -,
   deshalb sitzt das Zeichen überall gleich weit von der Bildecke. */
.parent-media{position:relative}
.ec-ki{position:absolute;right:12px;bottom:12px;display:flex;color:#fff;opacity:.8;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ec-ki svg{display:block;width:26px;height:auto;fill:currentColor}
@media(max-width:780px){
  .ec-ki{right:8px;bottom:8px}
  .ec-ki svg{width:22px;height:auto}
}
.ec-hero .ec-foto{aspect-ratio:16/10;object-position:55% 50%}
.ec-reihe{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:44px;align-items:center}
.ec-reihe--links{grid-template-columns:minmax(0,45fr) minmax(0,55fr)}
.ec-reihe--links .ec-bild{order:-1}
.ec-text{min-width:0}
.ec-bild .ec-foto{max-height:420px}
@media(min-width:900px){
  .section.hero .ec-hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
@media(max-width:899px){
  .section.hero .ec-hero>.hero-copy>h1{order:2}
  .section.hero .ec-hero>.ec-hero-bild{order:3;margin-top:22px}
  .section.hero .ec-hero .ec-foto{max-height:50vh}
}
@media(max-width:780px){
  .ec-reihe,.ec-reihe--links{grid-template-columns:minmax(0,1fr);gap:24px}
  .ec-reihe .ec-bild{order:-1}
  .ec-bild .ec-foto{max-height:50vh}
}

/* ---------- 25. Preisseite nach Ralfs Entwurf vom 29.09.2026 ----------
   Vier Zugaben: die Überschrift über den Trainerkarten, der Umrechner, die
   Zerlegung von Team Pro und der Spielerabschnitt (Preis einzeln und der
   Vergleich Free gegen Pro). Alle Farben aus Abschnitt 1, alle Verläufe aus
   Abschnitt 10. Kein Rahmen um eine gefüllte Fläche, kein Symbol im Kreis. */

/* a) Die Überschrift in Versalien, schmal und kräftig: Barlow Condensed 700,
   derselbe Schnitt, den Abschnitt 21 für das Spiel lädt - keine weitere
   Schriftdatei. Versalien macht das Blatt, im Text steht die Überschrift in
   normaler Schreibung (Vorlesehilfen buchstabieren Versalien sonst). */
.preis-titel{font-family:'Barlow Condensed',system-ui,sans-serif;font-weight:700;font-size:clamp(2.2rem,3.9vw,3.1rem);line-height:1.02;letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
@media(max-width:780px){.preis-titel{font-size:clamp(2rem,8.6vw,2.6rem)}}

/* b) Der Umrechner (site.js Abschnitt 4b).
   Der Regler: pinke Füllung links vom Knopf, heller Rest. Die Füllung endet
   genau in der Knopfmitte - der Knopf (28 px) läuft innerhalb der Spur, seine
   Mitte liegt also bei 14 px + (Spur - 28 px) × Anteil. Den Anteil setzt das
   Skript als --anteil am Regler. Das Element ist 28 px hoch, damit die
   Tippfläche den Knopf ganz umfasst; die sichtbare Spur ist 10 px. */
.umrechner{margin-top:16px;margin-bottom:22px}
.umrechner-regler{-webkit-appearance:none;appearance:none;display:block;width:100%;height:28px;margin:0;padding:0;background:transparent;cursor:pointer}
.umrechner-regler::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--pink) calc(14px + (100% - 28px) * var(--anteil,.75)),#E4E4EA 0)}
.umrechner-regler::-moz-range-track{height:10px;border-radius:999px;background:linear-gradient(90deg,var(--pink) calc(14px + (100% - 28px) * var(--anteil,.75)),#E4E4EA 0)}
.umrechner-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin-top:-9px;border:0;border-radius:50%;background:var(--pink)}
.umrechner-regler::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:var(--pink)}
/* Das Raster unter dem Regler hat dieselben Spalten wie .plan-grid.three
   (1fr 1fr 1.2fr, Lücke 14 px), nur ist jede Kartenspalte in zwei Hälften
   geteilt und die Lücken sind eigene Spalten. So liegen die Linien 4 und 7
   genau auf der Mitte der Coach-Pro- und der Team-Pro-Karte: Die Pillen
   stehen zentriert über ihrer Karte, die Klammer läuft von Kartenmitte zu
   Kartenmitte, und „Verteilt auf …" steht über der Mitte der Klammer. */
.umrechner-raster{display:grid;grid-template-columns:1fr 14px .5fr .5fr 14px .6fr .6fr;margin-top:20px}
.umrechner-zahl{grid-column:4/7;grid-row:1;justify-self:center;text-align:center;font-size:20px;font-weight:600;line-height:1.1;color:var(--ink);white-space:nowrap}
.umrechner-zahl output{font-size:48px;line-height:1;font-variant-numeric:tabular-nums}
/* Die Klammer ist eine Linie, keine Fläche: oben der Steg von der Zahl, dann
   der Bogen über beide Pillen, an den Enden je ein Strich nach unten. */
.umrechner-klammer{grid-column:4/7;grid-row:2;position:relative;height:18px;margin-top:16px;border:2px solid var(--muted);border-bottom:0;border-radius:10px 10px 0 0}
.umrechner-klammer:before{content:'';position:absolute;left:50%;bottom:100%;width:2px;height:14px;margin-left:-1px;background:var(--muted)}
.umrechner-preis{grid-row:3;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.umrechner-preis--links{grid-column:3/5}
.umrechner-preis--rechts{grid-column:6/8}
.umrechner-pille{display:inline-flex;align-items:center;border-radius:24px;padding:8px 20px;background:#FFFFFF;color:#000000;font-size:24px;font-weight:700;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.umrechner-einheit{margin-top:8px;font-size:14px;line-height:1.4;color:var(--ink)}
/* Am Rechner nennt die Karte darunter den Tarif; der Name steht dann nur für
   Vorlesehilfen da. Am Handy (unten) ist er sichtbar. */
.umrechner-name{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:1050px){
  .umrechner-raster{grid-template-columns:1fr 14px .5fr .5fr 14px .5fr .5fr}
}
/* Am Handy stehen die Karten untereinander; die beiden Pillen stehen dann
   nebeneinander, jede mit ihrem Namen darüber. Dieselben Rasterlinien: die
   ersten beiden Spalten fallen auf null, die Klammer läuft von Pillenmitte zu
   Pillenmitte. */
@media(max-width:780px){
  .umrechner-raster{grid-template-columns:0 0 1fr 1fr 12px 1fr 1fr;margin-top:16px}
  .umrechner-zahl{font-size:18px}
  .umrechner-zahl output{font-size:40px}
  .umrechner-name{position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
  .umrechner-klammer{margin-top:12px;height:14px}
  .umrechner-pille{font-size:20px;padding:7px 16px}
  .umrechner-einheit{font-size:13px}
}
@media(max-width:380px){
  .umrechner-pille{font-size:18px;padding:6px 12px}
}

/* c) Team Pro BESTEHT AUS: zwei kleine Karten im Verlauf ihres Tarifs, ein
   „+" dazwischen. Der Pink-Verlauf ist der helle Teil von plan-pink (bis
   Pink-Mid) - die Karte liegt im unteren, dunklen Teil der Team-Pro-Karte und
   verschwände dort mit dem vollen Verlauf. Dieselbe Klasse trägt die Karte
   von Spieler- & Eltern-Pro (Teil d): Dort steht der Preis unten, und
   „/ MONAT" läge sonst schwarz auf #801041. */
.plan-pink-hell{background:linear-gradient(180deg,var(--pink) 0%,var(--pink-mid) 100%)}
.plan-zerlegung{display:grid;gap:6px}
.plan-baustein{display:block;min-width:0;padding:14px 16px 15px;border-radius:10px;color:#000000}
.plan-baustein-name{display:block;font-size:18px;font-weight:700;line-height:1.2;text-transform:uppercase;color:#000000}
.plan-baustein-zeile{display:block;margin-top:4px;font-size:15px;line-height:1.4;color:#000000}
.plan-plus{justify-self:center;font-size:26px;font-weight:700;line-height:1;color:var(--plan-ink)}
/* Die Zeile darunter liegt im dunklen Teil der Team-Pro-Karte (Richtung
   #801041). Schwarz erreichte dort nur rund 2,6:1, Weiß rund 8:1 - deshalb
   ausnahmsweise weiß, die ganze Zeile in einer Farbe (Fix 29.09.2026). */
.plan-zerlegung-fuss{margin-top:14px;font-size:15px;line-height:1.45;color:#FFFFFF}

/* d) Spieler- & Eltern-Pro einzeln: links die Karte (Monats- und
   12-Monats-Preis), rechts Überschrift und zwei Sätze. Der Block steht auf der Blockfläche (.auf-flaeche, Abschnitt
   2). Die Überschrift ist eine Stufe kleiner als die Blocküberschriften - sie
   steht in einer halben Spalte. */
.spieler-preis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 40px;align-items:center}
.spieler-preis-karte{--plan-ink:#000000;--plan-paper:#FFFFFF;min-width:0;padding:26px 24px 28px;border-radius:16px;color:#000000}
/* Seit dem 29.09.2026 trägt die Karte zwei Preise untereinander: der zweite
   (12 Monate) rückt näher an den ersten als der erste an den Untertitel -
   beide gehören zusammen. */
.spieler-preis-karte .plan-price--zweiter{margin-top:10px}
/* Die Hinweiszeile („entspricht … im Monat") liegt unten im dunklen Teil des
   Verlaufs (Richtung #B7175D); Schwarz war dort nur knapp lesbar. Deshalb
   weiß, die ganze Zeile in einer Farbe - wie „Eltern buchen nichts extra."
   in der Team-Pro-Karte (Teil c, Fix 29.09.2026). */
.spieler-preis-karte .plan-hinweis span{color:#FFFFFF}
.spieler-preis-titel{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15}
.spieler-preis-satz{margin-top:12px;font-size:20px;line-height:1.5;color:var(--ink)}
.spieler-preis-titel+.spieler-preis-satz{margin-top:16px}

/* e) Der Vergleich Free gegen Pro, je Gruppe eine Matrix: Zeile, Spalte FREE,
   Spalte PRO. Oben die Free-Zeilen (beide Haken), darunter die Pro-Zeilen;
   die vier Kernvorteile liegen quer im Pink-Verlauf, Schrift und Haken dort
   schwarz. Alle anderen Zeilen tragen die eingebettete Fläche (#13171C auf
   Schwarz). Am Handy bleiben FREE und PRO rechts neben jeder Zeile - die
   Spalten werden schmaler, die Zeile bricht um, nichts scrollt seitlich. */
.vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:30px;align-items:start}
.vergleich-gruppe{min-width:0}
.vergleich-kopf{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px;align-items:center;padding:0 14px 10px}
.vergleich-gruppe-titel{font-size:13px;font-weight:700;letter-spacing:.06em;line-height:1.4;text-transform:uppercase;color:var(--ink)}
.vergleich-chip{justify-self:center;border-radius:24px;padding:4px 10px;font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:#000000}
.vergleich-zeilen{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vergleich-zeile{display:grid;grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px;align-items:center;padding:13px 14px;border-radius:10px;background:var(--embed-bg,var(--paper))}
.vergleich-zeile--kern{padding:16px 14px;background:linear-gradient(90deg,var(--pink) 0%,var(--pink-mid) 100%)}
.vergleich-was{min-width:0}
.vergleich-titel{display:block;font-size:18px;line-height:1.35;color:var(--ink)}
.vergleich-satz{display:block;margin-top:3px;font-size:15px;line-height:1.45;color:var(--muted)}
.vergleich-zeile--kern .vergleich-titel{font-weight:700;color:#000000}
.vergleich-zeile--kern .vergleich-satz{color:#000000}
.vergleich-mark{justify-self:center;font-size:19px;font-weight:700;line-height:1}
.vergleich-mark--free{color:var(--lime)}
.vergleich-mark--pro{color:var(--pink)}
.vergleich-mark--nein{font-weight:400;color:var(--muted)}
.vergleich-zeile--kern .vergleich-mark{color:#000000}
.vergleich-zeile--kern .vergleich-mark--nein{color:rgba(0,0,0,.45)}
.vergleich-fein{margin-top:10px;padding:0 14px;font-size:13px;line-height:1.5;color:var(--muted)}

@media(max-width:900px){
  .spieler-preis,.vergleich{grid-template-columns:minmax(0,1fr)}
  .vergleich{gap:24px}
}
@media(max-width:560px){
  .vergleich-kopf,.vergleich-zeile{grid-template-columns:minmax(0,1fr) 44px 44px;gap:6px}
  .vergleich-kopf{padding:0 12px 8px}
  .vergleich-zeile{padding:12px}
  .vergleich-zeile--kern{padding:14px 12px}
  .vergleich-chip{padding:3px 7px;font-size:11px}
  .vergleich-titel{font-size:17px}
  .vergleich-fein{padding:0 12px}
  .spieler-preis-karte{padding:22px 20px 24px}
  .spieler-preis-satz{font-size:18px}
}

/* ---------- 26. Das „i" hinter den Funktionen der Preisseite (Ralf, 29.09.2026) ----------
   Hinter jeder Funktion der Trainerkarten Coach Free und Coach Pro und hinter
   jeder Zeile des Vergleichs für Spieler und Eltern steht ein „i"; ein Tipp
   klappt darunter die Erklärung auf (site.js Abschnitt 4g). Ralfs Hausregeln
   gelten wörtlich: ein schlichter Kleinbuchstabe - kein Kreis, kein Rahmen,
   keine Fläche, kein Symbolzeichen; keine Outline als Gestaltung; die
   Erklärung ohne Kasten, Rahmen und Fläche und ohne Farb- oder Stärkenwechsel
   im Satz. Alle Farben aus Abschnitt 1 bzw. aus der Schrift der Karte. */

/* a) Das „i". Die Farbe erbt es von seiner Zeile: schwarz auf den Verläufen
   und in den Kernzeilen, weiß im Vergleich auf Schwarz - gedämpft über die
   Deckkraft, voll deckend bei Hover und Fokus. 0,65 und nicht weniger: Auf dem
   Pink am unteren Ende von Coach Pro und am linken Rand der Kernzeilen hält
   das Schwarz so noch rund 3,5:1, die Grenze für Bedienelemente ist 3:1.
   Die Tippfläche ist mindestens 24 x 24 px; das Zeichen sitzt links darin,
   direkt hinter dem letzten Wort. Die negativen Ränder nehmen die Fläche aus
   dem Zeilenbau heraus: oben und unten, damit die Zeile nicht höher wird,
   rechts um die volle Breite, damit das „i" in der Zeile keinen Platz
   beansprucht. Ohne den rechten Rand rutschte es bei voller Zeile allein in
   eine neue Zeile (gemessen 29.09.2026: „Trainings- & Spielkalender" am
   Handy, „PRACTX AI plant dein Training" am Rechner) - jede geschlossene
   Zeile wäre dort eine Textzeile höher geworden. So steht es bei voller Zeile
   einige Pixel im Innenabstand bzw. in der Lücke zur FREE-Spalte, die dort
   leer ist. Die Tippfläche bleibt trotzdem 24 x 24 px. */
.info-i{-webkit-appearance:none;appearance:none;display:inline-block;min-width:24px;min-height:24px;margin:-4px -24px -4px 0;padding:0 0 0 4px;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit;font-size:.85em;font-weight:600;line-height:24px;text-align:left;vertical-align:baseline;opacity:.65;cursor:pointer}
.info-i:hover,
.info-i:focus{opacity:1}
/* Tastaturfokus: Unterstreichung statt Rahmen. Die 3-px-Outline der Vorlage
   (button:focus-visible) wird hier bewusst aufgehoben - die Unterstreichung
   und die volle Deckkraft zeigen den Fokus ohne Rahmen. */
.info-i:focus-visible{outline:none;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* b) Die Erklärung: ein eigener Block unter dem Funktionstext, in derselben
   Spalte, etwas kleiner und in normaler Stärke. Die Farbe ist die gedämpfte
   Schrift des Untergrunds: im Vergleich auf Schwarz --muted wie der Satz der
   Kernzeilen, in den Kernzeilen Schwarz wie deren Satz, auf den Verläufen der
   Trainerkarten die Kartenschrift - dort stehen auch Untertitel und
   Zahlungshinweis in ihr (Abschnitt 10), und ein abgeschwächtes Schwarz fiele
   auf dem Pink unter 4,5:1. [hidden] muss eigens gelten: display:block
   überstimmte sonst das Attribut, und jede Erklärung stünde offen da. */
.info-text{display:block;margin-top:6px;font-size:15px;font-weight:400;line-height:1.45;color:var(--muted)}
.info-text[hidden]{display:none}
.plan-card .info-text{color:var(--plan-ink)}
.vergleich-zeile--kern .info-text{color:#000000}

/* c) Im Vergleich steht das „i" in einer Hülle neben dem Titel
   (.vergleich-titelzeile), damit .vergleich-titel weiter genau Ralfs Wortlaut
   trägt. Die Hülle übernimmt Größe, Zeilenhöhe und Farbe des Titels, der Titel
   läuft darin als Zeile im Fluss: So steht das „i" direkt hinter dem letzten
   Wort, und eine geschlossene Zeile ist so hoch wie vorher - mit der
   Zeilenhöhe des Fließtexts (1,55) stünde jede Zeile rund 2 px höher. Die
   Erklärung liegt in der Textspalte (.vergleich-was); FREE und PRO bleiben in
   ihren Spalten, die Zeile wird nur höher. */
.vergleich-titelzeile{display:block;font-size:18px;line-height:1.35;color:var(--ink)}
.vergleich-titelzeile>.vergleich-titel{display:inline}
.vergleich-zeile--kern .vergleich-titelzeile{color:#000000}
@media(max-width:560px){
  .vergleich-titelzeile{font-size:17px}
}

/* ---------- 27. Startseite: „Für jeden Trainer" in zwei Spalten (Ralf, 29.09.2026 abends) ----------
   Der Block steht direkt unter der Vereinslage (site.js, zweiWegeBlock): links
   „Für Neueinsteiger", rechts „Für erfahrene Trainer". Ab 781 px stehen die
   Spalten nebeneinander, darunter untereinander - dieselbe Schwelle wie die
   Handy-Stufe der übrigen Abschnitte (bis 780 px). Das Raster streckt beide
   Spalten auf die Höhe der längeren, die Flächen enden deshalb auf einer
   Linie.

   Jede Spalte steht auf der eingebetteten Fläche (--embed-bg aus Abschnitt 2:
   #13171C auf einem schwarzen Block, #2A323D auf der Blockfläche) - wie die
   Elternkarte und der Team-DNA-Block: Radius 10, kein Rahmen, kein Schatten.
   Welche der beiden Farben es wird, entscheidet die Blockfolge, nicht diese
   Datei.

   Die Überschrift ist die Beschriftung einer Spalte, keine Blocküberschrift:
   24 px (am Handy 22 px), in der Akzentfarbe der Spalte - Neueinsteiger Lime,
   erfahrene Trainer Pink, die ganze Zeile in einer Farbe. Die Zuordnung hängt
   an der Kennung der Spalte (zwei-wege-spalte--neu, --erfahren) und steht
   hier, nicht in den Daten: eine Setzung der Gestaltung wie die
   Kategorie-Farben in Abschnitt 19 d.

   Die fünf Punkte sind die Liste des Videoblocks (.video-points): Titel fett
   auf eigener Zeile, der Satz darunter, beide 20 px (am Handy 18 px) und weiß
   (Abschnitt 13). Die Farben vp-1 bis vp-3 setzt allein der Videoblock; hier
   tragen die Titel keine solche Klasse und bleiben weiß. Hier steht nur, was
   die Liste in einer Spalte anders braucht: den Abstand zum Satz davor. */
.zwei-wege{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:28px}
.zwei-wege-spalte{min-width:0;padding:32px;border:0;border-radius:var(--radius);box-shadow:none;background:var(--embed-bg,var(--paper));color:var(--ink)}
.zwei-wege-titel{font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.zwei-wege-spalte--neu .zwei-wege-titel{color:var(--lime)}
.zwei-wege-spalte--erfahren .zwei-wege-titel{color:var(--pink)}
.zwei-wege-spalte .lede{margin-top:12px}
.zwei-wege-punkte{margin-top:24px}
@media(min-width:781px){
  .zwei-wege{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media(max-width:780px){
  .zwei-wege-spalte{padding:24px}
  .zwei-wege-titel{font-size:22px}
}
/* Am Handy nach dem ersten Absatz zugeklappt (Ralf, 29.09.2026 abends): Jede
   Spalte zeigt dann Überschrift, Einleitungssatz und darunter den Knopf
   „Mehr lesen" (site.js, zweiWegeBlock); ein Tipp klappt die fünf Punkte auf,
   der Knopf heißt dann „Weniger anzeigen".
   Der Knopf trägt .text-link und damit Größe, Stärke, Unterstreichung und das
   Grau der übrigen Textlinks (Abschnitt 5a). Zurückgenommen wird hier nur,
   was ein <button> vom Browser mitbringt (Fläche, Innenabstand) - kein Rahmen,
   kein Kasten -, und der Pfeil der Textlinks: Er heißt auf dieser Seite „führt
   auf eine andere Seite", dieser Knopf klappt aber an Ort und Stelle auf. Die
   Tippfläche ist 44 px hoch, die Schrift bleibt die der Textlinks.
   Eingeschaltet wird das Zuklappen erst über die Klasse ist-klappbar, die
   allein das Skript im Browser setzt: Ohne Skript und ab 781 px sind die
   Punkte offen und der Knopf verborgen. Der Zustand steht allein in
   aria-expanded am Knopf, gelesen über den direkt folgenden Nachbarn - die
   Anzeige kann damit nie etwas anderes zeigen, als der Knopf der Vorlesehilfe
   sagt. */
.zwei-wege .zwei-wege-mehr{display:none}
.zwei-wege .zwei-wege-mehr:after{content:none}
@media(max-width:780px){
  .zwei-wege.ist-klappbar .zwei-wege-mehr{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;min-height:44px;margin-top:4px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
  .zwei-wege.ist-klappbar .zwei-wege-mehr+.zwei-wege-punkte{margin-top:12px}
  .zwei-wege.ist-klappbar .zwei-wege-mehr[aria-expanded="false"]+.zwei-wege-punkte{display:none}
}

/* ---------- 28. Startseite: das Titelbild größer (Ralf, 29.09.2026 abends) ----------
   „Mache das Titelbild bitte größer." Das Bild der zwei Handys stand in der
   schmaleren der beiden Spalten der Vorlage (1,6 : 1). Seit die drei
   Lizenzkarten aus dem Hero fort sind (Abschnitt 17 g), ist die Textspalte
   ohnehin kürzer. Ab 900 px - überall dort, wo Text und Bild nebeneinander
   stehen - teilen sich beide die Breite jetzt hälftig; die Lücke der Vorlage
   bleibt. Gemessen am 29.09.2026 in Chromium: 504 statt 388 px Bildbreite bei
   1440 px Fenster, 464 statt 357 px bei 1100 px (je Faktor 1,3).
   Die Regel hängt an der Hülle, die das Mockup trägt (:has), und nicht an
   jeder Hero-Hülle: „Basketball-Trainer werden" nutzt dieselbe Hülle mit
   eigener Aufteilung (Abschnitt 24). Ein Browser ohne :has verwirft die Zeile
   und zeigt die Aufteilung der Vorlage - kleiner, aber heil.
   Innenabstand hat das Mockup keinen: Die Vorlage setzt ihn für
   .hero-photo--mockup auf 0, das Bild füllt seine Spalte. Datei und Maße des
   Bildes bleiben unberührt.
   Die Überschrift steht in der halben Breite in vier Zeilen (Abschnitt 12a),
   ragt aber nicht über ihre Spalte hinaus - das misst _build/shots.mjs
   (Probe „Titelbild"). Am Handy nimmt das Bild die volle Inhaltsbreite
   (Abschnitt 19 b). */
@media(min-width:900px){
  .section.hero .hero-layout:has(>.hero-photo--mockup){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- 29. Academy als Dashboard, Kurzberichte (Ralf, 29.09.2026 abends) ----------
   Die Academy ist ein Dashboard: je Rubrik ein Block mit Kacheln (site.js,
   academy; Inhalt aus data/academy.js). Das Spiel steht seitdem auf seiner
   eigenen Unterseite (Abschnitt 21 h).

   a) Die Rubrik-Überschrift ist die Beschriftung einer Gruppe, keine
      Blocküberschrift (Ralfs Hausregel: keine übergroßen Block-Überschriften):
      27 px wie die Gruppenüberschriften der FAQ, am Handy 24 px.
   b) Das Raster: bis zum 29.09.2026 spät drei gleiche Spalten am Rechner,
      zwei ab 1050 px abwärts, eine am Handy. Seitdem zwölf Spalten mit
      Kacheln verschiedener Breite; Raster, Stufen und der obere Block stehen
      in Abschnitt 31. Die Kacheln einer Zeile werden gleich hoch.
   c) Die Kachel ist eine gefüllte Fläche ohne Rahmen, ohne Umriss, ohne
      Schatten, Radius 10 - wie die Karten in Abschnitt 14. Die Farbe hängt an
      der Rubrik und nicht am seitenweiten Akzentzähler: eine Gruppe, eine
      Farbe (Eltern Lila, Trainer Teal, Spielen Pink, Gute Seiten Grün). Die
      Zuordnung steht hier und nicht in den Daten, eine Setzung der Gestaltung
      wie die Kategorie-Farben in Abschnitt 19 d. Schrift auf der Fläche ist
      schwarz; kein Farb- oder Stärkewechsel innerhalb eines Satzes. Titel,
      Satz und - bei Adressen nach außen - die Domain stehen je auf eigener
      Zeile. Auf Pink ist 18 px die kleinste Schrift (Abschnitt 14), deshalb
      steht nichts auf einer Kachel darunter.
      Der Hover wechselt keine Farbe, er unterstreicht nur den Titel: Die ganze
      Kachel ist der Link, und das Zeichen dafür soll die Farbe nicht stören.
   d) Der Hinweis „öffnet in einem neuen Tab" ist nur für die Vorlesehilfe da
      (.nur-vorlesen); sichtbar steht die Domain.
   e) Die Kurzberichte sind schlichte Textseiten: die vier Fragen als kleine
      Zwischenüberschriften (24 px, am Handy 22 px), darunter je ein Absatz
      in der Größe des Fließtextes (Abschnitt 13). */
.academy-rubrik h2{font-size:27px;line-height:1.2;letter-spacing:-.02em}
.academy-rubrik--trainer{--rubrik:var(--teal)}
.academy-rubrik--netz{--rubrik:var(--gruen)}
.academy-kachel{display:flex;flex-direction:column;gap:10px;min-width:0;padding:24px;border:0;border-radius:var(--radius);box-shadow:none;background:var(--rubrik,var(--embed-bg,var(--soft)));color:#000000;text-decoration:none}
.academy-kachel:hover{background:var(--rubrik,var(--embed-bg,var(--soft)))}
.academy-kachel:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.academy-kachel .academy-kachel-titel{font-size:22px;font-weight:700;line-height:1.25;letter-spacing:-.02em;color:#000000;text-decoration:none}
.academy-kachel:hover .academy-kachel-titel{text-decoration:underline;text-underline-offset:4px}
.academy-kachel .academy-kachel-text{font-size:20px;line-height:1.45;color:#000000}
.academy-kachel .academy-kachel-ziel{margin-top:auto;padding-top:4px;font-size:18px;line-height:1.4;color:#000000}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.bericht-text .bericht-frage{margin-top:36px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.bericht-text .bericht-frage:first-child{margin-top:0}
.bericht-text .bericht-frage+.lede{margin-top:10px}
.bericht-text .bericht-fakten{margin-top:32px;max-width:790px}
@media(max-width:780px){
  .academy-rubrik h2{font-size:24px}
  .academy-kachel{padding:20px}
  .academy-kachel .academy-kachel-text{font-size:18px}
  .bericht-text .bericht-frage{font-size:22px}
}

/* ---------- 30. Wissen der Academy und Eltern-Ratgeber (Ralf, 29.09.2026 abends) ----------
   Zehn Wissensartikel unter /de/academy/<slug>/ und die deutsche Elternseite
   als Ratgeber in Fragen und Antworten (site.js, Abschnitt 4h; Inhalt aus
   data/wissen.js).

   a) Die Rubrik „Wissen" auf dem Dashboard trägt Lemon: die einzige helle
      Akzentfarbe, die noch keine Rubrik hat. Schrift schwarz wie auf jeder
      Kachel (Abschnitt 29 c). Die Kennzeile „Für Eltern · 2 Min." steht
      unten auf der Kachel in derselben Größe wie die Domain der Netz-Kacheln
      (18 px) - kleiner nicht, weil Abschnitt 29 c das für alle Kacheln so
      festlegt.
   b) Der Artikel ist eine Textseite wie ein Kurzbericht (Abschnitt 29 e). Die
      H1 trägt nur die Titelzeile; der Untertitel steht darunter als eigene
      Zeile in 22 px halbfett (am Handy 19 px), etwa in der Größe der
      Hero-Einleitung - vier Zeilen in voller H1-Größe wären eine übergroße
      Überschrift. Die
      Zwischenüberschriften - aus dem Fettgedruckten des Entwurfs sowie
      „Unsere Thesen", „In PRACTX", „Quellen", „Passt dazu" - sind
      Beschriftungen in 24 px (am Handy 22 px), keine Blocküberschriften.
      Absätze und Listen in der Größe des Fließtextes (Abschnitt 13).
   c) Ein Link im Satz (ein Artikeltitel, eine DOI) übernimmt Farbe und
      Stärke des Satzes und ist nur unterstrichen - kein Farb- oder
      Stärkewechsel innerhalb eines Satzes.
   d) „In PRACTX" steht auf einer gefüllten Fläche in Lemon, der Farbe der
      Rubrik: ohne Rahmen, ohne Umriss, ohne Schatten, Radius 10. Schrift und
      Links darauf sind schwarz - das Grau der Textlinks trüge auf Lemon
      nicht.
   e) Die Quellen stehen klein und grau (15 px, wie .quiet). Lange DOIs und
      Titel brechen notfalls mitten im Wort um, damit am Handy nichts über
      den Rand ragt.
   f) Der Ratgeber: „Fragen und Antworten" ist eine Gruppenbeschriftung in
      27 px wie die Rubriken der Academy, jede Frage eine kleine
      Zwischenüberschrift (22 px), die Antwort Fließtext. Die Spielregeln für
      den Spielfeldrand stehen auf einer gefüllten Fläche in Lila, der Farbe
      der Eltern-Rubrik; Schrift schwarz. */
.academy-rubrik--wissen{--rubrik:var(--lemon)}
.academy-kachel .academy-kachel-kennzeile{margin-top:auto;padding-top:4px;font-size:18px;line-height:1.4;color:#000000}
.wissen-kopf .wissen-untertitel{max-width:790px;margin-top:18px;font-size:22px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.wissen-kopf .wissen-kennzeile{margin-top:18px;font-size:15px;line-height:1.5;color:var(--muted)}
.wissen-text .lede{max-width:790px;margin-top:18px}
.wissen-text>.lede:first-child{margin-top:0}
.wissen-text .wissen-zwischentitel{margin-top:40px;font-size:24px;font-weight:700;line-height:1.25;letter-spacing:-.02em}
.wissen-text .wissen-zwischentitel+.lede{margin-top:12px}
.wissen-liste,.wissen-thesen{max-width:790px;margin:12px 0 0;padding-left:24px}
.wissen-liste li,.wissen-thesen li{margin-top:10px;font-size:20px;line-height:1.55;color:var(--ink)}
.wissen-inline{color:inherit;font-weight:inherit;text-decoration:underline;text-underline-offset:3px}
.wissen-inline:hover{color:inherit}
.wissen-weiter{display:table;margin-top:14px}
.wissen-practx{max-width:860px;margin-top:40px;padding:28px;border:0;border-radius:var(--radius);box-shadow:none;outline:0;background:var(--lemon);color:#000000}
.wissen-text .wissen-practx .wissen-zwischentitel{margin-top:0;color:#000000}
.wissen-practx .lede,.wissen-practx .wissen-liste li{color:#000000}
.wissen-practx .wissen-liste li:first-child{margin-top:0}
.wissen-practx a.text-link,.wissen-practx a.text-link:hover{color:#000000}
.wissen-quellen{max-width:860px;margin:12px 0 0;padding-left:18px}
.wissen-quellen li{margin-top:8px;font-size:15px;line-height:1.6;color:var(--muted);overflow-wrap:anywhere}
.wissen-text .cta-links{margin-top:14px}
.wissen-text .wissen-stand{margin-top:36px}
.ratgeber-fragen h2{font-size:27px;line-height:1.2;letter-spacing:-.02em}
.ratgeber-liste{max-width:860px}
.ratgeber-eintrag{margin-top:34px}
.ratgeber-eintrag:first-child{margin-top:24px}
.ratgeber-eintrag .ratgeber-frage{font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
.ratgeber-eintrag .lede{max-width:790px;margin-top:10px}
.ratgeber-eintrag .ratgeber-mehr{margin-top:10px}
.ratgeber-regeln-flaeche{max-width:860px;padding:32px;border:0;border-radius:var(--radius);box-shadow:none;outline:0;background:var(--purple);color:#000000}
.ratgeber-regeln-flaeche .ratgeber-regeln-titel{font-size:27px;line-height:1.2;letter-spacing:-.02em;color:#000000}
.ratgeber-regeln-liste{margin:16px 0 0;padding-left:24px}
.ratgeber-regeln-liste li{margin-top:8px;font-size:20px;line-height:1.5;color:#000000}
@media(max-width:780px){
  .wissen-kopf .wissen-untertitel{margin-top:14px;font-size:19px}
  .wissen-text .wissen-zwischentitel{margin-top:32px;font-size:22px}
  .wissen-liste li,.wissen-thesen li{font-size:18px}
  .wissen-practx{padding:22px}
  .ratgeber-fragen h2{font-size:24px}
  .ratgeber-eintrag .ratgeber-frage{font-size:20px}
  .ratgeber-regeln-flaeche{padding:22px}
  .ratgeber-regeln-flaeche .ratgeber-regeln-titel{font-size:24px}
  .ratgeber-regeln-liste li{font-size:18px}
}

/* ---------- 31. Academy: oberer Block und Kachelgrößen (Ralf, 29.09.2026 spät) ----------
   „die seite sieht durch den extrem gleichförmigen aufbau sehr langweilig
   aus. rotation hero muss ganz nach oben auch mit dem Vorschaubild. Daneben
   kommt Eltern darunter tools mit dem regel &...., coach, dann wissen,
   ähnlich wie bei den funktionen soll hier das design auch über
   unterschiedliche kachelgrößen aufgelockert werden auch wenn es nicht wie
   eine geschlossene gallerie-wand anmuten soll."

   a) Das Raster hat zwölf Spalten wie die Funktionsseite (Abschnitt 22 c).
      Jede Kachel trägt ihre Breite als Klasse aus data/academy.js:
      breite-xl, -l, -m, -s für 8, 6, 4, 3 Spalten. Die drei gleichen
      Spalten, die bis dahin in Abschnitt 29 standen, waren der gleichförmige
      Aufbau. Der Abstand ist 18 statt 14 px: Die Kacheln sollen als einzelne
      Flächen stehen, nicht als geschlossene Wand. Anders als auf der
      Funktionsseite muss nicht jede Zeile aufgehen - die zweite Zeile der
      Trainer endet bewusst offen.
   b) Der obere Block direkt unter dem Hero hat keine sichtbare Überschrift
      (seinen Namen hört nur die Vorlesehilfe). Links steht Rotation Hero
      über zwei Zeilen, rechts daneben die übrigen Kacheln untereinander: im
      deutschen Markt Eltern, darunter das Tool; im englischen nur das Tool,
      das dann beide Zeilen nimmt. Das hängt an der Kennung des Blocks (oben),
      nicht an einer Zählung in site.js.
   c) Im oberen Block stehen drei Gruppen nebeneinander, deshalb trägt dort
      jede Kachel ihre eigene Farbe statt der des Blocks: Spiel Pink und
      Eltern Lila wie bis dahin ihre Rubriken (deren Zeilen aus Abschnitt 29
      sind hierher umgezogen), das Tool neu in Orange - die einzige
      Akzentfarbe, die noch keine Gruppe der Academy trägt.
   d) Rotation Hero zeigt das Spiel im Handy (seit dem 30.09.2026, Ralf:
      „hier soll der Smartphone Dummy hin und nicht das Panter Bild"; bis
      dahin der Panther, angeschnitten mit object-fit:cover): am Rechner als
      Spalte rechts in der Kachel (40 % der Breite, volle Höhe), am Handy
      über dem Text (280 px hoch). Das Handy muss ganz zu sehen sein, deshalb
      object-fit:contain, mittig, und am Rechner 28/24 px Innenabstand als
      Luft zum Kachelrand; am Handy gibt die Kachel selbst den Abstand (das
      Bild zieht nicht mehr an den Rand). Die Ecken des Geräts sind im Bild
      durchsichtig, dahinter steht das Pink der Kachel - kein eigener
      Hintergrund, kein Rahmen um die Fläche. Am Rechner liegt das
      Bild absolut in der Kachel und bestimmt ihre Höhe nicht - sonst machte
      das Hochformat die Kachel doppelt so hoch wie die Spalte daneben. Die
      Höhe kommt aus dem Text, aus der Spalte daneben und aus der
      Mindesthöhe. Die Ecken schneidet die Kachel selbst (overflow:hidden).
   e) Titel großer Kacheln (xl, l) 28 px, Rotation Hero 32 px, alle übrigen
      22 px wie bisher (Abschnitt 29). Die Kennzeile über dem Titel („Spiel",
      „Für Eltern", „Tool") steht in 18 px, der kleinsten Schrift auf Pink
      (Abschnitt 29 c). Die These einer großen Wissenskachel ist ein eigener
      Absatz in Größe und Farbe des Satzes darüber.
   f) Bis 1050 px zwei Spalten: xl und l über beide, m und s je eine.
      Rotation Hero nimmt die volle Breite und behält das Bild rechts, Eltern
      und Tool stehen darunter nebeneinander (steht dort nur eine Kachel,
      nimmt sie die Breite allein). Bis 780 px eine Spalte, das Bild über
      dem Text.
   g) Seit dem 30.09.2026 trägt Rotation Hero unten einen Startknopf mit dem
      Wortlaut des Spiels (site.js, academyKachel): in der Form von
      .band-knopf (Abschnitt 23), aber 48 px hoch und in 18 px, ohne
      Umrandung und ohne Symbol. Anders als dort weiß mit schwarzer Schrift,
      denn auf jeder Kachel ist die Schrift schwarz (Abschnitt 29 c,
      _build/shots.mjs prüft das). Er ist das letzte Element der Kachel,
      margin-top:auto legt ihn an ihren Boden - vorher stand unter dem Satz
      die halbe Fläche leer. Eine Kennzeile, die ihn nach oben drücken
      könnte, hat die Spielkachel nicht. Am Handy steht er unter dem Text,
      das Bild bleibt oben. */
.academy-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;margin-top:24px}
.academy-raster>.breite-xl{grid-column:span 8}
.academy-raster>.breite-l{grid-column:span 6}
.academy-raster>.breite-m{grid-column:span 4}
.academy-raster>.breite-s{grid-column:span 3}
.academy-raster--oben{margin-top:0}
.academy-raster--oben>.academy-kachel:first-child{grid-row:span 2}
.academy-raster--oben>.academy-kachel:nth-child(2):last-child{grid-row:span 2}
.academy-kachel--spielen{--rubrik:var(--pink)}
.academy-kachel--eltern{--rubrik:var(--purple)}
.academy-kachel--tools{--rubrik:var(--orange)}
.academy-kachel .academy-kachel-marke{font-size:18px;font-weight:600;line-height:1.3;color:#000000}
.academy-raster>.breite-xl .academy-kachel-titel,.academy-raster>.breite-l .academy-kachel-titel{font-size:28px;line-height:1.2}
.academy-kachel.mit-bild .academy-kachel-titel{font-size:32px;line-height:1.15}
.academy-kachel .academy-kachel-these{font-size:20px;line-height:1.45;color:#000000}
/* Die Lesezeit einer Wissenskachel hält zusammen (site.js, academyKachel):
   In einer Kachel der Breite s bräche „3 Min." sonst in zwei Zeilen. */
.academy-kachel .academy-kachel-lesezeit{white-space:nowrap}
.academy-kachel.mit-bild{position:relative;overflow:hidden;min-height:420px;padding-right:calc(40% + 28px)}
.academy-kachel .academy-kachel-bild{position:absolute;top:0;right:0;bottom:0;box-sizing:border-box;width:40%;height:100%;max-width:none;margin:0;padding:28px 24px;border-radius:0;object-fit:contain;object-position:center;background:transparent}
.academy-kachel .academy-kachel-start{display:inline-flex;align-items:center;align-self:flex-start;margin-top:auto;height:48px;padding:0 22px;border:0;border-radius:8px;background:#fff;color:#000;font-size:18px;font-weight:700;line-height:1;white-space:nowrap}
@media(max-width:1050px){
  .academy-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .academy-raster>.breite-xl,.academy-raster>.breite-l{grid-column:span 2}
  .academy-raster>.breite-m,.academy-raster>.breite-s{grid-column:span 1}
  .academy-raster--oben>.academy-kachel:first-child{grid-row:auto}
  .academy-raster--oben>.academy-kachel:nth-child(2):last-child{grid-row:auto;grid-column:span 2}
  .academy-kachel.mit-bild{min-height:360px}
}
@media(max-width:780px){
  .academy-raster{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px}
  .academy-raster--oben{margin-top:0}
  .academy-raster>.academy-kachel,.academy-raster--oben>.academy-kachel:nth-child(2):last-child{grid-column:auto;grid-row:auto}
  .academy-raster>.breite-xl .academy-kachel-titel,.academy-raster>.breite-l .academy-kachel-titel{font-size:24px}
  .academy-kachel.mit-bild .academy-kachel-titel{font-size:28px}
  .academy-kachel .academy-kachel-these{font-size:18px}
  .academy-kachel.mit-bild{min-height:0;padding-right:20px}
  .academy-kachel .academy-kachel-bild{position:static;flex:0 0 auto;width:100%;height:280px;margin:0 0 4px;padding:0}
}

/* ---------- 32. Regeln & Philosophie: der Kopf mit Muster und Angaben ----------
   Seit dem 30.09.2026 (Plan regelwerk-pdf-website-2026-09-29, site.js
   Abschnitt 4c; umgebaut nach Ralfs Sichtung am selben Tag). Ralfs
   Hausregeln gelten wörtlich: keine Rahmen oder Linien um Flächen, keine
   Symbole in Kreisen, keine Riesen-Überschrift, kein Wechsel von Farbe oder
   Schriftstärke innerhalb eines Satzes. Farben nur über die Variablen oben.
   a) Der Kopf (#std-kopf) liegt auf der Blockfläche (.auf-flaeche) ganz oben,
      vor der Team-DNA: am Rechner zweispaltig - links das Muster, rechts die
      Angaben -, am Handy untereinander, das Muster zuerst.
   b) Das Muster steht in einem Fenster: eine gefüllte dunkle Fläche wie die
      übrigen Karten dieser Seite (--embed-bg), darin die zwei Seiten als
      weiße Bilder untereinander. Das Fenster hat eine feste Höhe (520 px, am
      Handy 420 px) und rollt senkrecht; so zeigt es genug von Seite 1, um zu
      verstehen, worum es geht, ohne die Angaben daneben nach unten zu
      drücken. Die Seiten tragen den Radius der App. Das Fenster ist ein
      gewöhnlicher Block und kein Raster: In einem Raster mit fester Höhe
      schrumpfen die Zeilen auf die Höhe des Fensters, sobald eine Seite
      overflow:hidden trägt - dann gäbe es nichts zu rollen, und die Seiten
      wären abgeschnitten.
   c) Die Eingabefelder (.std-feld) sind weiße Flächen ohne Rahmen mit
      schwarzer Schrift - die Bauform des Felds im gelben Streifen (Abschnitt
      23), nur 48 px hoch. Mindestens 16 px Schrift: darunter vergrößert Safari
      auf dem iPhone beim Tippen die ganze Seite. Der Platzhalter ist dunkler
      als --muted, weil Grau #808080 auf Weiß zu schwach wäre; ohne color-mix
      bleibt es bei --muted. Titel in 22 px wie die Titel der Standards, keine
      Blocküberschrift in voller Größe. Die Angaben stehen am Rechner zu
      zweit, der Team Chant über die ganze Breite; am Handy alle untereinander.
   d) Der Knopf ist ein .button (Pink). Gesperrt - während das PDF entsteht -
      steht er grau auf --soft. Die Statuszeile hält ihre Höhe auch leer, damit
      der Block beim ersten Text nicht springt. Den zweiten Knopf am Ende der
      Auswahl trennt derselbe Abstand vom letzten Bereich wie zwei Bereiche
      voneinander.
   e) Unter dem oberen Knopf steht der Hinweis „Unten kostenlos konfigurieren"
      (seit dem 30.09.2026): ein gewöhnlicher Textlink, Grau und Pfeil wie die
      übrigen. Die Statuszeile bleibt direkt am Knopf, zwischen Knopf und
      Hinweis. Solange sie leer ist, gibt sie im Kopf ihre Höhe ab - sonst
      stünde der Hinweis eine leere Zeile tief unter dem Knopf statt direkt
      darunter. Kommt der erste Text, rückt nur der Hinweis eine Zeile tiefer;
      am Rechner ist die Spalte mit dem Muster ohnehin höher. */
.std-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start}
.std-vorschau-spalte{min-width:0}
.std-vorschau{display:block;height:520px;overflow-y:auto;padding:16px;border-radius:var(--radius);background:var(--embed-bg,var(--soft))}
.std-vorschau-seite{display:block;overflow:hidden;border-radius:var(--radius);background:var(--ink)}
.std-vorschau-seite+.std-vorschau-seite{margin-top:16px}
.std-vorschau-seite img{display:block;width:100%;height:auto}
.std-vorschau-link{margin-top:14px;font-size:16px;line-height:1.45}

.std-feld{-webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;min-height:48px;padding:0 14px;border:0;border-radius:var(--radius);box-shadow:none;background:var(--ink);color:var(--page);font-size:18px;font-weight:400;line-height:normal}
.std-feld::placeholder{color:var(--muted);opacity:1}
.std-feld::placeholder{color:color-mix(in srgb,var(--page) 64%,var(--ink))}

.std-pdf{min-width:0}
.std-pdf-titel{font-size:22px;font-weight:700;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
#regelwerk-pdf .std-pdf-text{margin-top:12px;font-size:18px;line-height:1.45}
.std-pdf-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;margin-top:22px}
.std-pdf-feld{min-width:0}
.std-pdf-feld--breit{grid-column:1 / -1}
.std-pdf-feld label{display:block;margin-bottom:8px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.std-pdf-knopf{margin-top:26px;cursor:pointer}
.std-pdf-knopf:disabled{background:var(--soft);color:var(--muted);cursor:default}
.std-pdf-status{min-height:1.45em;margin-top:14px;font-size:18px;line-height:1.45;color:var(--ink)}
#std-pdf-status:empty{min-height:0;margin-top:0}
.std-pdf-hinweis{margin-top:12px;line-height:1.45}
.std-pdf-ende{margin-top:34px}
.std-pdf-ende .std-pdf-knopf{margin-top:0}
@media(max-width:780px){
  .std-kopf{grid-template-columns:minmax(0,1fr);gap:26px}
  .std-vorschau{height:420px;padding:12px}
  .std-vorschau-seite+.std-vorschau-seite{margin-top:12px}
  .std-pdf-felder{grid-template-columns:minmax(0,1fr);gap:14px}
  .std-pdf-status{font-size:16px}
}

/* ---------- 33. Taktikboard: Kopf, Schritte, Magnettafel, App-Abschnitt, Fragen ----------
   Seit Ralfs Änderungswunsch vom 10.10.2026 (site.js, taktikboardSeite und
   Abschnitt 4i). Seine Hausregeln gelten wörtlich: keine Rahmen, Schatten
   oder Outlines um gefüllte Flächen, keine Symbole in Kreisen oder Kacheln,
   keine übergroßen Blocküberschriften, kein Wechsel von Farbe oder
   Schriftstärke innerhalb eines Satzes. Die einzige Haarlinie steht am
   Gehäuse des Telefons (.tb-handy) - wie am Gerät von Rotation Hero, an dem
   es sich ausrichtet (Abschnitt 21 a).
   Einige Regeln beginnen mit #taktikboard: assets/board/board.css lädt NACH
   dieser Datei und setzt Breite und Größen des Kopfs mit Klassen; die
   Kennung gewinnt unabhängig von der Reihenfolge.                         */

/* a) Kopf. Er ist kompakt, damit die Bühne am Rechner ohne Scrollen in der
      oberen Fensterhälfte beginnt (gemessen bei 1280x800 und 1440x900): wenig
      Luft über dem Kicker, die h1 in der Größe der Blocküberschriften statt
      der vollen Größe der Vorlage, die Einleitung über die volle Breite und
      in 18 statt 20 px. Über dem Block stehen schon rund 200 px (Streifen zur
      E-Mail-Liste, Leiste, Brotkrume); mit 20 px bräche die deutsche
      Einleitung in vier statt drei Zeilen, und die Bühne begänne unter der
      Fenstermitte. Die Bühne nimmt sich die ganze Breite des Blocks; wie
      groß das Feld darin wird, regelt board.css (höchstens 72 % der
      Fensterhöhe). */
#taktikboard{padding-top:14px}
#taktikboard .taktikboard-layout{gap:18px}
#taktikboard .taktikboard-worte{max-width:none;margin-left:0;margin-right:0}
#taktikboard .eyebrow{font-size:15px;line-height:1.3;letter-spacing:.02em;margin-bottom:8px}
#taktikboard h1{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15}
#taktikboard .lede{margin-top:10px;max-width:none;font-size:18px;line-height:1.5}
#taktikboard .taktikboard-buehne{max-width:none}

/* Die Einleitung am Handy: bis 700 px bleiben die ersten beiden Sätze offen,
   der Rest steht hinter „Weiterlesen". Eingeschaltet wird das erst über
   .ist-klappbar, die allein das Skript im Browser setzt - ohne Skript steht
   der ganze Absatz da und der Knopf ist verborgen. Der Zustand steht allein
   in aria-expanded am Knopf; :has liest ihn vom Behälter aus, weil der Knopf
   hinter dem Absatz steht. Nach dem Öffnen verschwindet der Knopf. Der Pfeil
   der Textlinks entfällt wie bei „Mehr lesen" (Abschnitt 27): Er heißt „führt
   auf eine andere Seite", dieser Knopf öffnet an Ort und Stelle. */
.tb-weiter{display:none}
.tb-weiter:after{content:none}
.tb-einleitung-rest:focus{outline:none}
@media(max-width:700px){
  .tb-einleitung.ist-klappbar .tb-weiter[aria-expanded="false"]{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;min-height:44px;margin-top:2px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
  .tb-einleitung.ist-klappbar:has(.tb-weiter[aria-expanded="false"]) .tb-einleitung-rest{display:none}
}

/* b) Die Blocküberschriften der Seite in der Größe der Preisüberschrift für
      Spieler (Abschnitt 27), keine Blocküberschrift in voller Größe. */
.tb-schritte-block h2,
.tb-magnet h2,
.taktikboard-app h2,
.tb-fragen h2{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.15}

/* c) „So nutzt du das Taktikboard": drei Schritte nebeneinander, am Handy
      untereinander. Das Symbol steht frei über der Überschrift, als Linie in
      Orange, der Farbe des Werkzeugs - ohne Kreis, ohne Kachel, ohne Zahl.
      Überschrift und Text bleiben weiß. Die Klasse heißt tb-schritt-symbol:
      tb-symbol gehört den Symbolen im Werkzeug selbst (board.css). */
.tb-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin:28px 0 0;padding:0;list-style:none}
.tb-schritte li{min-width:0}
.tb-schritt-symbol{display:block;width:32px;height:32px;color:var(--orange)}
.tb-schritte h3{margin-top:14px;font-size:22px;line-height:1.25;color:var(--ink)}
.tb-schritte p{margin-top:8px;line-height:1.5}

/* d) „Digital statt Magnettafel": ein ruhiger Absatz in schmaler Lesespalte,
      ohne Bild. */
.tb-magnet-spalte{max-width:720px}
.tb-magnet-spalte p{margin-top:16px;line-height:1.6}

/* e) Der App-Abschnitt. Leer bleibt er unsichtbar - wenn
      data/taktikboard-app.js fehlt; dieselbe Regel steht in board.css, hier
      noch einmal, damit sie nicht an der Reihenfolge der Stilvorlagen hängt.
      Seine Fläche reicht über die ganze Fensterbreite: Ein Randbild
      (border-image) malt die Blockfläche 100vw nach links und rechts über den
      Block hinaus. Der Inhalt bleibt in der Spalte der Seite, und anders als
      ein breiterer Block macht das Randbild die Seite nicht breiter - was
      außerhalb des Kastens gemalt wird, scrollt nicht. Es ist kein Rahmen:
      Randbreite 0, gefüllt wird nur die Fläche. */
.section.taktikboard-app:empty{display:none}
.section.taktikboard-app{border-radius:0;border-image:conic-gradient(var(--paper) 0 0) fill 0//0 100vw}
.taktikboard-app .lede{max-width:820px}

/* Die fünf Zeilen: Bild und Text je zur Hälfte, das Bild abwechselnd links
   (Zeile 1, 3, 5) und rechts. Im Markup steht der Text vorn; am Handy steht
   das Bild in jeder Zeile über dem Text. */
.tb-app-zeilen{display:grid;gap:64px;margin-top:48px}
.tb-app-zeile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.tb-app-zeile:nth-child(odd) .tb-app-bild{order:-1}
.tb-app-text{min-width:0;max-width:520px}
.tb-app-text h3{font-size:24px;line-height:1.25;color:var(--ink)}
.tb-app-text p{margin-top:12px;line-height:1.55}
.tb-app-bild{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.tb-app-bild figcaption{margin-top:16px;max-width:300px;font-size:16px;line-height:1.45;color:var(--muted);text-align:center}

/* Das Telefon: dieselben Verhältnisse wie das Gerät von Rotation Hero
   (Abschnitt 21 a; Schirm 402x874, Rand 14, Gehäuse-Radius 58, Schirm-Radius
   44, Insel 120x34 auf 11), hier aus der Gehäusebreite --w gerechnet, damit
   das Telefon kleiner stehen kann, ohne seine Form zu verlieren. Gehäuse
   --soft mit der Haarlinie --line, Schirm schwarz. Der Schirm schneidet nie
   etwas ab: Jedes Bild steht in voller Breite und ist kürzer als der Schirm.
   - mit-statusleiste: oben bündig; die Statusleiste des Bildschirmfotos
     liegt unter der Insel wie am echten Gerät.
   - ohne-statusleiste: darüber ein schwarzer Streifen in der Höhe der
     Statusleiste (59 von 874), damit die Insel nichts vom Bild verdeckt.
   - pdf-seite: die Seite in voller Breite, senkrecht in der Mitte. */
.tb-handy{--w:270px;box-sizing:border-box;width:var(--w);max-width:100%;padding:calc(var(--w) * 14 / 430);border-radius:calc(var(--w) * 58 / 430);background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.tb-schirm{position:relative;box-sizing:border-box;width:100%;aspect-ratio:402/874;border-radius:calc(var(--w) * 44 / 430);background:var(--page);overflow:hidden}
.tb-schirm img{display:block;width:100%;height:auto}
.tb-schirm--ohne-statusleiste{padding-top:calc(var(--w) * 59 / 430)}
.tb-schirm--pdf-seite{display:flex;flex-direction:column;justify-content:center}
.tb-insel{position:absolute;top:calc(var(--w) * 11 / 430);left:50%;transform:translateX(-50%);width:calc(var(--w) * 120 / 430);height:calc(var(--w) * 34 / 430);border-radius:999px;background:var(--page);pointer-events:none}

/* Der Abschlussstreifen: Lemon mit schwarzer Schrift wie der Streifen zur
   E-Mail-Liste über der Leiste (Abschnitt 23), zu dem sein Knopf führt. Der
   Knopf ist dort wie hier schwarz mit weißer Schrift; die beiden Textlinks
   stehen schwarz statt grau, Grau wäre auf Lemon kaum lesbar. Kein Rahmen,
   kein Schatten; der Fokusrahmen ist schwarz und hängt allein an der
   Tastatur. */
.tb-app-abschluss{margin-top:64px;padding:32px;border:0;border-radius:var(--radius);box-shadow:none;background:var(--lemon);color:#000}
.tb-app-abschluss p{max-width:760px;color:#000;line-height:1.5}
.tb-app-wege{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:22px}
.tb-launch-knopf{-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border:0;border-radius:8px;box-shadow:none;background:#000;color:#fff;font-size:16px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer}
.tb-app-abschluss .text-link,
.tb-app-abschluss .text-link:hover{color:#000}
.tb-app-abschluss a:focus-visible,
.tb-app-abschluss button:focus-visible{outline:2px solid #000;outline-offset:3px}

/* f) Die häufigen Fragen: das Akkordeon der Vorlage (Abschnitt 11). */
.tb-fragen .short-faq{max-width:900px}

@media(max-width:780px){
  #taktikboard{padding-top:24px}
  .tb-schritte{grid-template-columns:minmax(0,1fr);gap:28px}
  .tb-app-zeilen{gap:48px;margin-top:36px}
  .tb-app-zeile{grid-template-columns:minmax(0,1fr);gap:20px}
  .tb-app-zeile .tb-app-bild{order:-1}
  .tb-app-text{max-width:none}
  .tb-app-text h3{font-size:22px}
  .tb-app-abschluss{margin-top:48px;padding:24px}
}
/* Unter 520 px steht das Telefon schmaler; das Bild bleibt ganz sichtbar.
   Der Knopf nimmt dort die ganze Breite des Streifens, sonst bräche sein
   Text knapp in zwei Zeilen. */
@media(max-width:520px){
  .tb-handy{--w:240px}
  .tb-launch-knopf{width:100%;justify-content:center;text-align:center}
}