/* Shared stylesheet for the pre-rendered quiz pages (public/quiz/**). */
/* Die Farb-Tokens stehen zentral in /assets/theme.css (beide Themes) und
   werden von jeder Seite VOR dieser Datei geladen. Hier stehen nur noch
   Komponenten-Regeln — vorher hatte jede der Seitengruppen ihren eigenen
   :root-Block, und alle standen noch auf der dunkelgruenen Palette. */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(ellipse 900px 520px at 12% -8%, rgba(255,255,255,0.045), transparent 60%),
    radial-gradient(ellipse 900px 640px at 92% 8%, rgba(255,255,255,0.035), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:var(--ce-font-text);
  overflow-x:hidden;
}
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 20px; }

/* ---- NAV ---- */
.nav{ display:flex; align-items:center; justify-content:space-between; padding:20px 0; max-width:1120px; margin:0 auto; padding-left:20px; padding-right:20px; }
.nav-brand{ display:flex; align-items:center; gap:8px; font-family:var(--ce-font-ui); font-weight:800; font-size:18px; text-decoration:none; }
.nav-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--court-bright); }
.nav-links{ display:flex; align-items:center; gap:18px; font-size:13.5px; font-weight:700; color:var(--ink-muted); }
.nav-links a{ text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{
  background:var(--court-bright); color:var(--on-accent); border-radius:9px;
  padding:8px 14px; font-weight:800; font-size:13px; text-decoration:none; white-space:nowrap;
}
@media (max-width: 639px){ .nav-links a:not(.nav-cta){ display:none; } }

/* Theme-Umschalter in der Navigation — sieht aus wie die uebrigen
   Nav-Elemente, setzt nur das Button-Default zurueck. */
.nav-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0; border-radius:999px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border-subtle);
  color:var(--ink); font-size:15px; line-height:1;
  -webkit-appearance:none; appearance:none;
  transition:background .18s ease, border-color .18s ease;
}
.nav-theme-toggle:hover{ background:var(--surface-hover); border-color:var(--accent-line); }
.nav-theme-toggle:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .nav-theme-toggle{ transition:none; } }

/* ---- BREADCRUMB + HERO ---- */
/* --ink-faint ist der Ton fuer Zierlinien, nicht fuer Schrift: auf
   --surface-1 sind das 1,9:1 (Sand) bzw. 3,0:1 (Graphite). Breadcrumb,
   Footer-Links, Meta-Zeile und Antwort-Kuerzel liefen hier noch darueber
   — auf genau den Seiten, ueber die Leute per Suchmaschine einsteigen.
   Sie nutzen jetzt --ink-muted (>4,5:1 in beiden Themes), dieselbe
   Korrektur wie im App-Stylesheet. */

/* Outfit laedt per display=swap, davor rendert die System-Schrift — und die
   ist rund 20% breiter. Diese Ersatzfamilie skaliert sie per size-adjust auf
   Outfits Laufweite, damit der Schriftzug vor und nach dem Laden gleich
   breit ist und in der Kopfzeile nichts springt oder ueberlaeuft. */
@font-face{
  font-family:'Outfit Fallback';
  src:local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('DejaVu Sans');
  size-adjust:82%;
  ascent-override:100%; descent-override:25%; line-gap-override:0%;
}
/* ---- WORT-BILDMARKE "CAGE SLASH" ---------------------------------------
   Drei kinetische Slashes bilden ein schraeges P: Stamm in der Textfarbe,
   obere Schleife im Akzent, unterer Slice im Ball-Gelb. Alle drei ueber
   Tokens, damit die Marke in Sand und Graphite mitwechselt. Identisch
   definiert in src/style.css, src/landing.css und den Stylesheets der
   vorgerenderten Seiten. */
.brand-logo{ display:inline-flex; align-items:center; gap:10px; min-width:0; text-decoration:none; color:var(--text-main); }
.brand-logo-mark{ width:clamp(27px, 7.2vw, 30px); height:clamp(27px, 7.2vw, 30px); flex:0 0 auto; display:block; }
.brand-logo-text{ font-family:'Outfit', 'Outfit Fallback', ui-sans-serif, system-ui, sans-serif; font-size:clamp(19px, 5.2vw, 22px); line-height:1; white-space:nowrap; }
.brand-text-heavy{ font-weight:900; letter-spacing:-0.5px; color:var(--text-main); }
.brand-text-light{ font-weight:600; letter-spacing:-0.2px; color:var(--accent-primary); }
/* Der Ball-gelbe Slice steht im Graphite mit 10,2:1 auf dem dunklen Grund,
   im Sand aber nur mit 1,31:1 auf der hellen Karte — er schwebt dort
   regelrecht. Statt das Gelb aufzugeben (es IST die Ballfarbe) bekommt er
   eine Kante aus --amber-ink: im Sand ein dunkles Bernstein (4,0:1 gegen
   die Karte), im Graphite fast derselbe Ton wie die Fuellung, dort also
   unsichtbar — genau da, wo er auch nicht gebraucht wird. */
.brand-logo-mark polygon{ stroke:var(--amber-ink); stroke-width:1.4; stroke-linejoin:round; }
.brand-logo:focus-visible{ outline:2px solid var(--accent-primary); outline-offset:3px; border-radius:8px; }
/* Unter 460px reicht der Platz in der Navigationszeile nicht fuer
   Signet, Schriftzug, Theme-Knopf UND den CTA-Button: gemessen ragte der
   Schriftzug bei 390px um 25px und bei 320px um 86px in die rechte
   Gruppe hinein. Dort steht das Signet allein — die Wortmarke sagt die
   Ueberschrift direkt darunter ohnehin. */
@media (max-width: 459px){
  .nav .brand-logo-text{ display:none; }
}



.crumb{ font-size:12.5px; font-weight:700; color:var(--ink-muted); margin:0 0 12px; }
.crumb a{ color:var(--ink-muted); text-decoration:none; }
.crumb a:hover{ color:var(--court-bright); }
.module-hero{ padding:28px 0 20px; }
.module-hero h1{
  font-family:var(--ce-font-ui); font-weight:800; font-size:clamp(26px,5vw,38px);
  line-height:1.15; margin:0 0 12px; text-wrap:balance;
}
.module-hero .lead{ font-size:16px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0 0 22px; }
.btn{
  font-family:var(--ce-font-ui); font-weight:800; font-size:14.5px; border-radius:11px; border:none;
  padding:13px 22px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.btn-primary{ background:var(--court-bright); color:var(--on-accent); }
.btn-primary:hover{ filter:brightness(1.06); }

/* ---- TOPIC NAV (click-through chips + pager) ---- */
.topic-nav{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 28px; padding:0; }
.topic-nav a{
  display:flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink-muted);
  font-family:var(--ce-font-ui); font-weight:800; font-size:13px; text-decoration:none; flex:0 0 auto;
}
.topic-nav a:hover{ border-color:var(--court-bright); color:var(--ink); }
.topic-nav a.active{ background:var(--court-bright); color:var(--on-accent); border-color:var(--court-bright); }
body:not(.js-active) .topic-nav{ display:none; }

.topic-pager{ display:none; justify-content:space-between; gap:12px; margin:8px 0 40px; }
.topic-pager button{
  font-family:var(--ce-font-ui); font-weight:800; font-size:13.5px; border-radius:10px;
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink);
  padding:11px 18px; cursor:pointer;
}
.topic-pager button:hover:not(:disabled){ border-color:var(--court-bright); }
.topic-pager button:disabled{ opacity:.35; cursor:default; }
body.js-active .topic-pager{ display:flex; }

/* ---- TOPIC ARTICLES ---- */
.topic-list{ list-style:none; margin:8px 0 40px; padding:0; display:flex; flex-direction:column; gap:0; }
.topic-article{ border-top:1px dashed var(--line); padding:24px 0; }
.topic-article:first-child{ border-top:1px solid var(--line); }
body.js-active .topic-article[hidden]{ display:none; }
.topic-num{
  font-family:var(--ce-font-ui); font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.tier-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:10.5px; font-weight:800;
  letter-spacing:.02em; text-transform:none; background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--line-strong);
}
.tier-badge.tier-einsteiger{ color:var(--ball); border-color:rgba(143,203,161,0.4); }
.tier-badge.tier-grundlagen{ color:var(--ink-muted); border-color:var(--line-strong); }
.tier-badge.tier-fortgeschritten{ color:var(--court-bright); border-color:rgba(234,199,104,0.4); }
.tier-badge.tier-experte{ color:var(--gold); border-color:rgba(226,149,78,0.4); }
.tier-badge.tier-profi{ color:var(--error); border-color:rgba(225,79,82,0.4); }
.topic-article h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:20px; margin:6px 0 16px; text-wrap:balance; }
/* Diagram + scenario side by side from tablet width up — on the
   original stacked layout the diagram alone (a full 220×320 court)
   pushed the scenario, options and explanation below the fold on every
   single puzzle, so paging through them felt like scrolling all over
   again even though only one puzzle was ever shown at a time. */
.puzzle-top{ display:flex; flex-direction:column; gap:14px; margin:0 0 14px; }
.topic-diagram{
  background:var(--court); border:1px solid var(--line); border-radius:14px;
  padding:14px; margin:0; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.topic-diagram:not([data-court="master"]) svg{ width:100%; max-width:200px; height:auto; }
/* Lesbarkeit der Feld-Beschriftungen — mirrort src/style.css's
   .court-wrap-Regel/public/coaching/assets/pages.css: dünner dunkler
   Halo hinter jedem Diagramm-Text, damit Zonen-/Hinweistexte (rot/
   gedämpftes Grau-Grün, 7-10px) unabhängig vom Rasen-Verlauf darunter
   lesbar bleiben. Spieler-Token-Beschriftungen (DU/P/G1/G2) sitzen
   bereits auf einem soliden Kreis und bleiben ausgenommen. */
.topic-diagram:not([data-court="master"]) svg text{ paint-order:stroke fill; stroke:var(--court-strong); stroke-width:2.4px; stroke-linejoin:round; }
.topic-diagram:not([data-court="master"]) svg .tt-token text{ stroke:none; }
.topic-article p{ font-size:15px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0 0 10px; }
.scenario{ font-size:15.5px !important; color:var(--ink) !important; margin:0 !important; }
.scenario b{ color:var(--court-bright); }
@media (min-width: 640px){
  .puzzle-top{ flex-direction:row; align-items:flex-start; gap:20px; }
  .topic-diagram{ flex:0 0 190px; }
  .topic-diagram:not([data-court="master"]) svg{ max-width:190px; }
  .scenario{ flex:1 1 auto; padding-top:2px; }
}
/* MASTER-COURT (Bemerkung B7, 01.10.2026): mit JavaScript ersetzt der
   Master-Court das V2-Diagramm (/quiz/assets/court.js). Er bringt Flaeche,
   Rahmen und Umschalter selbst mit und ist quer statt hoch — deshalb
   steht er ueber dem Szenario in voller Breite, wie im App-Quiz, statt in
   der schmalen Spalte des V2-Bildes. */
.topic-diagram[data-court="master"]{ background:transparent; border:0; padding:0; display:block; width:100%; max-width:620px; }
.puzzle-top:has(.topic-diagram[data-court="master"]){ flex-direction:column; align-items:stretch; }

/* ---- QUIZ OPTIONS + EXPLANATION ---- */
.quiz-options{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; max-width:62ch; }
.quiz-options li{
  display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.55;
  border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink-muted);
}
.quiz-options li .mark{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:var(--surface-2); color:var(--ink-muted); margin-top:1px;
}
.quiz-options li.correct{ border-color:var(--ok-ink); background:var(--ok-bg); color:var(--ink); }
.quiz-options li.correct .mark{ background:var(--ok-ink); color:var(--on-ok); }
.quiz-option-btn{
  display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  background:none; border:none; padding:0; margin:0; cursor:default; color:inherit;
  font:inherit; line-height:inherit;
}

/* ---- LOESUNG ERST NACH KLICK ----------------------------------------
   OHNE JavaScript bleibt alles so, wie es war: Haken, Erklaerung und
   Loesungs-Flugbahn stehen im HTML und sind sichtbar — das ist der
   Zustand, den Google indexiert, und die Seite bleibt ohne JS vollstaendig
   lesbar. Sobald pages.js laeuft, setzt es .js-active auf den Body und
   .quiz-locked auf jedes Szenario; ab da ist die Loesung verdeckt, bis
   jemand eine Option waehlt. */
body.js-active .quiz-option-btn{ cursor:pointer; }
/* Im verdeckten Zustand muss die richtige Option EXAKT aussehen wie die
   anderen — sonst verraet schon die Faerbung die Loesung. Deshalb werden
   hier genau die Werte der Basisregel zurueckgesetzt, nicht "irgendein"
   neutraler Ton, und der Haken wird transparent statt versteckt (die
   Hoehe der Zeile bleibt damit identisch). */
body.js-active .quiz-locked .quiz-options li.correct{ border-color:var(--line); background:transparent; color:var(--ink-muted); }
body.js-active .quiz-locked .quiz-options li.correct .mark{ background:var(--surface-2); color:transparent; }
body.js-active .quiz-locked .quiz-options li:hover{ border-color:var(--accent-ink); background:var(--surface-hover); }
body.js-active .quiz-locked .quiz-explain{ display:none; }
body.js-active .quiz-locked .topic-diagram .sol{ opacity:0; }
/* Die gewaehlte Option bleibt nach dem Aufdecken markiert. */
.quiz-options li.picked{ box-shadow:inset 0 0 0 2px var(--accent-primary); }
.quiz-options li.picked.correct{ box-shadow:inset 0 0 0 2px var(--ok-ink); }
.quiz-hint{
  margin:-8px 0 14px; font-size:13px; font-weight:700; color:var(--accent-ink);
}
body:not(.js-active) .quiz-hint{ display:none; }
.quiz-cta-inline{ margin:14px 0 0; }
.quiz-explain{
  font-size:14px; line-height:1.6; max-width:62ch; background:var(--surface-2); border:1px solid var(--border-interactive);
  border-radius:12px; padding:14px 16px; color:var(--ink-muted) !important;
}
.quiz-explain b{ color:var(--ink); }

/* ---- MODULE GRID (quiz hub) ---- */
.hub-hero{ padding:28px 0 8px; text-align:left; }
.hub-hero h1{ font-family:var(--ce-font-ui); font-weight:800; font-size:clamp(26px,5vw,38px); margin:0 0 12px; text-wrap:balance; }
.hub-hero p{ font-size:16px; line-height:1.6; color:var(--ink-muted); max-width:62ch; margin:0; }
.hub-hero p + p{ margin-top:10px; }
.module-grid{ display:grid; grid-template-columns:1fr; gap:14px; margin:28px 0 48px; }
.module-card{
  display:flex; gap:14px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-card);
}
.module-card:hover{ border-color:var(--court-bright); }
/* Kachel, Rand und feste Groesse sind mit dem Perlen-Rollout entfallen:
   die Perle bringt Flaeche, Rand und Schatten selbst mit, und diese
   Regel stand mit (0,2,0) ueber .pearl-huelle aus assets/pearl.css —
   gemessen ein zweiter Rahmen von 1px um jede Perle. */
.module-card .m-icon{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
}
.module-card h2{ font-family:var(--ce-font-ui); font-weight:800; font-size:15.5px; margin:0 0 4px; }
.module-card p{ font-size:13px; line-height:1.5; color:var(--ink-muted); margin:0 0 4px; }
.module-card .m-count{ font-size:11.5px; font-weight:700; color:var(--accent-ink); }

/* ---- FOOTER ---- */
footer{ border-top:1px solid var(--line); padding:26px 0 40px; margin-top:20px; max-width:1120px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
.footer-row{ display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.footer-links{ display:flex; gap:18px; font-size:12.5px; color:var(--ink-muted); flex-wrap:wrap; justify-content:center; }
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ color:var(--ink-muted); }
.footer-note{ font-size:12px; color:var(--ink-muted); }

@media (min-width: 640px){
  .module-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-row{ flex-direction:row; justify-content:space-between; text-align:left; }
}
@media (min-width: 900px){
  .module-grid{ grid-template-columns:repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---- PRO-VORSCHAU (nur mit PAYWALL_AKTIV erzeugt) ---- */
.pro-badge{ display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--accent-primary); color:var(--on-accent); font-family:var(--ce-font-ui); font-weight:800; font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; vertical-align:middle; margin-left:6px; }
.topic-pro{ border-top-style:dashed; }
.topic-pro .pro-hinweis{ font-size:14px; font-weight:700; color:var(--ink); }