/* ============================================================
   CHECKOUT-TRAINER — Tool-Styles (gescopt unter #dct-app)
   ============================================================
   Angelegt nach dem Muster von oche-meter.css: alle Regeln unter einem
   Scope, keine :root-Tokens, keine eigenen Schriften.

   Die Theme-Tokens werden per var(--x, fallback) benutzt. In WordPress
   greift damit automatisch der Wert aus style.css; als einzelne HTML-Datei
   (Vorschau, lokaler Test) zieht der Fallback. Eine Farbe ändert man also
   im Theme, nicht hier.

   Bewusst NICHT enthalten (kommt aus dem Theme):
   - :root-Tokens (--navy/--gold/--wheat/--cream/--fd/--fb/--ease …)
   - Schriften: Bebas Neue, DM Sans und Playfair sind im Theme selbst
     gehostet. Kein Google-Fonts-Request aus diesem Tool.
   - Header, Hero, Footer, Container-Breite (.ctr).
   - Kein Dark Mode: das Theme hat keinen, das Tool darf keinen eigenen
     haben, sonst sieht es bei manchen Besuchern anders aus als die Seite.

   Bebas Neue liegt nur als Schnitt 400 vor und das Theme setzt
   font-synthesis:none. Display-Text steht deshalb überall auf
   font-weight:400 — ein 700 würde schlicht ignoriert.
   ============================================================ */

#dct-app{
  /* Semantische Tokens, abgeleitet aus dem Theme */
  --bg:var(--cream,#fefcf7);
  --surface:var(--white,#fff);
  --soft:var(--wheat-light,#faf3e3);
  --soft-line:var(--wheat,#f5e8cc);
  --line:var(--g200,#e5e7eb);
  --line-dash:var(--g300,#d1d5db);
  --fill:var(--g100,#f3f4f6);
  --ink:var(--navy,#162742);
  --ink2:var(--g600,#4b5563);
  --ink3:var(--g500,#6b7280);
  --accent:var(--gold,#c9a84c);
  --accent-2:var(--gold-light,#e0c675);
  --accent-ink:#9a7c2c;
  /* Blau ist die Aktionsfarbe (Knoepfe, aktiver Reiter), Rot bleibt fuer
     Fehler reserviert: ueberworfen, Sackgasse, Zeit abgelaufen. So bedeutet
     eine rote Flaeche im Tool immer dasselbe. */
  --primary:var(--blue,#2563a8);
  --primary-dark:var(--blue-dark,#1a4578);
  --danger:var(--red,#c8102e);
  --primary-soft:#e9f0f8;                                   /* Fallback */
  --primary-soft:color-mix(in srgb,var(--primary) 9%,#fff); /* wenn unterstuetzt */
  --info:var(--blue,#2563a8);
  --good:#1f7a4b;
  --good-soft:#e8f2ec;
  --card-r:20px; --pill:50px; --field-r:12px;
  --shadow:0 4px 24px rgba(22,39,66,.06);
  --ease:cubic-bezier(.16,1,.3,1);
  /* Eigene Namen statt --fd/--fb: eine Custom Property, die sich selbst
     referenziert, ist ein Zyklus und faellt komplett aus. */
  --t-disp:var(--fd,'Bebas Neue','Oswald','Arial Narrow',sans-serif);
  --t-body:var(--fb,'DM Sans','Segoe UI',system-ui,sans-serif);

  /* Scheibe — bleibt ein Dartboard. Nur der Rand nimmt das Navy der Seite auf. */
  --bed-dark:#22201c; --bed-light:#e3d7b8;
  --ring-red:#c0392b; --ring-green:#2b7a4b;
  --wire:#9aa0a6; --board-rim:var(--navy,#162742); --num-ink:#f5efe2;
}

#dct-app{font-family:var(--t-body);color:var(--g800,#1f2937);line-height:1.6;}
#dct-app *,#dct-app *::before,#dct-app *::after{box-sizing:border-box;}
#dct-app h1,#dct-app h2,#dct-app h3{font-family:var(--t-disp);font-weight:400;
  letter-spacing:2px;line-height:1.1;color:var(--ink);margin:0;text-wrap:balance;}
#dct-app p{margin:0;}
/* KEIN border:none hier: #dct-app button hat hoehere Spezifitaet als jede
   Komponentenregel und haette saemtliche Button-Rahmen im Tool ausgeknipst.
   Das Theme setzt button{border:none} global - das ist schwach genug, dass
   die Klassen unten es ueberschreiben. */
#dct-app button{font-family:inherit;color:inherit;cursor:pointer;}
#dct-app :focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

/* Das hidden-Attribut gegen die display-Regeln dieser Datei absichern.
   Das JS blendet .dct-over und .dct-next allein ueber das hidden-Attribut ein
   und aus, aber eine Autoren-Regel wie .dct-over{display:grid} schlaegt immer
   das [hidden]{display:none} des Browser-Stylesheets. Ohne diese Zeile liegt
   das weisse Rundenende-Overlay (90% deckend) dauerhaft ueber der Dartscheibe
   und die Weiter-Zeile ist immer sichtbar.
   In vorschau/checkout-trainer.html steht die Regel separat im <style>-Block
   und fehlte deshalb in dieser Datei. */
#dct-app [hidden]{display:none!important;}

/* Sektion und Container wie im Theme. Steht #dct-app bereits in einem .ctr,
   kann dieses innere .ctr entfallen — siehe Einbau-Anleitung. */
/* Oben nur 56px statt --sp-y: darüber steht die Intro-Sektion .ctin des
   Templates (Header + zwei Karten). Volle --sp-y auf beiden Seiten hätte den
   Tool-Kopf weit von den Karten abgesetzt, zu denen er gehört. */
#dct-app .dct-sec{padding:56px 0 var(--sp-y,100px);background:var(--bg);}
#dct-app .dct-sec + .dct-sec{padding-top:0;}
#dct-app .ctr{max-width:1320px;margin:0 auto;padding:0 24px;}

/* ---------- Sektionskopf (Theme-Muster .slbl/.sttl) ---------- */
.dct-top{margin-bottom:32px;}
.dct-eyebrow{font-family:var(--t-disp);font-size:.875rem;letter-spacing:4px;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px;}
.dct-top h1{font-size:clamp(2.2rem,4.5vw,3.2rem);}
.dct-top h1 em{font-style:normal;color:var(--info);}
.dct-sub{color:var(--ink3);font-size:1rem;margin-top:12px;max-width:62ch;line-height:1.7;}

/* ---------- Sektionskopf im Tool (Muster .slbl/.sttl des Themes) ---------- */
.dct-head{margin:0 0 20px;}
.dct-head--wege{margin-top:var(--sp-y,100px);padding-top:var(--sp-y,100px);
  border-top:1px solid var(--line);}
.dct-h2{font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:2px;}
.dct-h2 span{color:var(--primary);}
.dct-headsub{color:var(--ink3);font-size:1rem;margin-top:12px;max-width:62ch;line-height:1.7;}

/* ---------- Modus-Umschalter: echte Knoepfe, keine Pillen ----------
   Zwei Modi (Trainer / Highscore). Rechteckig mit kleinem Radius, kraeftigem
   Rahmen und 2px Schattenkante nach unten — das liest sich als Knopf, waehrend
   die fruehere Pillen-Form eher nach Filter-Chip aussah. */
.dct-tabs{display:flex;gap:12px;margin:0 0 28px;flex-wrap:wrap;}
.dct-tabs button{font-family:var(--t-disp);font-size:1.05rem;letter-spacing:2.5px;
  padding:14px 36px;border-radius:10px;background:var(--surface);
  color:var(--ink);border:2px solid var(--line);min-height:52px;
  box-shadow:0 2px 0 var(--line);
  transition:background .25s var(--ease),border-color .25s var(--ease),
             color .25s var(--ease),box-shadow .25s var(--ease),transform .1s var(--ease);}
.dct-tabs button[aria-selected="true"]{background:var(--primary);color:#fff;
  border-color:var(--primary);box-shadow:0 2px 0 var(--primary-dark);}
.dct-tabs button:active{transform:translateY(2px);box-shadow:none;}
@media(hover:hover){
  .dct-tabs button:not([aria-selected="true"]):hover{background:var(--soft);
    border-color:var(--soft-line);box-shadow:0 2px 0 var(--soft-line);}
}
@media(max-width:560px){
  .dct-tabs{gap:10px;}
  .dct-tabs button{flex:1 1 0;padding:14px 12px;font-size:1rem;letter-spacing:1.5px;}
}

/* ---------- Raster: Scheibe links, Einrichtung rechts ----------
   Gespiegeltes .layout des Oche-Meters. Die Scheibe ist das, worauf man
   schaut und klickt, deshalb steht sie zuerst; die Einrichtung begleitet
   sie rechts. Das How-To sitzt unter der Scheibe und verschwindet, sobald
   eine Runde laeuft. */
/* Zeile 2 auf 1fr (nicht auto): bei zwei auto-Zeilen verteilt das Raster den
   Ueberschuss des hohen Panels GLEICHMAESSIG auf beide Zeilen — dann steht das
   Board mit einer Luecke darunter und die How-To-Karte schwebt zwischen zwei
   gleich grossen Leerraeumen. Mit 1fr nimmt Zeile 2 den gesamten Rest auf, die
   Karte streckt sich hinein und schliesst buendig mit dem Panel ab. */
.dct-grid{display:grid;grid-template-columns:1fr 400px;grid-template-rows:auto 1fr;
  grid-template-areas:"board panel" "howto panel";gap:24px;align-items:start;}
.dct-grid>.dct-col{grid-area:panel;align-self:start;}
/* stretch + zentrierter Inhalt: die Karte fuellt die Resthoehe, der Text sitzt
   mittig statt oben — sonst wirkt der freie Platz darunter wie ein Fehler. */
.dct-grid>.dct-howto{grid-area:howto;align-self:stretch;display:flex;
  flex-direction:column;justify-content:center;}
.dct-grid>.dct-boardwrap{grid-area:board;align-self:start;}
@media(max-width:920px){
  /* Am Handy bleibt die Scheibe immer oben - vor wie waehrend einer Runde.
     Alles andere waere ein Tool, bei dem man erst scrollen muss, um zu sehen,
     worum es geht. */
  .dct-grid{grid-template-columns:1fr;grid-template-rows:none;
    grid-template-areas:"board" "panel" "howto";}
  /* Weniger Kartenrand: jeder Millimeter Scheibe zaehlt beim Tippen.
     Mit #dct-app davor, sonst gewinnt die spaeter notierte Basisregel. */
  #dct-app .dct-boardwrap{padding:12px;}
  #dct-app .dct-over{inset:12px;}
}

/* How-To-Karte (Muster .howto) */
.dct-howto{padding:28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-r);box-shadow:var(--shadow);}
.dct-howto-title{font-family:var(--t-disp);font-size:1.2rem;letter-spacing:2px;color:var(--ink);
  border-bottom:2px solid var(--soft-line);padding-bottom:10px;margin-bottom:20px;}
.dct-howto-title em{font-style:normal;color:var(--accent);}
.dct-howto p{font-size:.9rem;color:var(--ink2);line-height:1.7;}

/* ---------- Karten ---------- */
.dct-setup,.dct-task,.dct-review,.dct-boardwrap,.dct-scroll,.dct-stat,.dct-card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--card-r);box-shadow:var(--shadow);}
.dct-setup{padding:28px;}
.dct-setup h2,.dct-review h3{font-family:var(--t-disp);font-size:1.2rem;letter-spacing:2px;
  color:var(--ink);border-bottom:2px solid var(--soft-line);padding-bottom:10px;
  margin-bottom:20px;}
.dct-setup h2 em{font-style:normal;color:var(--accent);}
.dct-setup .lead{color:var(--ink3);font-size:.9rem;margin:-10px 0 28px;line-height:1.65;}

/* ---------- Scheibe ---------- */
.dct-boardwrap{position:relative;padding:24px;}
/* Die Scheibe ist quadratisch: ohne Deckel wuerde sie die ganze Spalte
   fuellen und die Karte ueber 800px hoch machen. */
.dct-board{display:block;width:100%;max-width:800px;margin-inline:auto;height:auto;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.dct-board .seg{stroke:var(--wire);stroke-width:.9;transition:filter .1s;}
.dct-board .seg,.dct-board .hit{cursor:pointer;}
@media(hover:hover){.dct-board .seg:hover{filter:brightness(1.35);}}
.dct-board.locked .seg,.dct-board.locked .hit{cursor:default;pointer-events:none;}
.dct-board .bedD{fill:var(--bed-dark);} .dct-board .bedL{fill:var(--bed-light);}
.dct-board .ringR{fill:var(--ring-red);} .dct-board .ringG{fill:var(--ring-green);}
.dct-board .rim{fill:var(--board-rim);}
.dct-board .num{fill:var(--num-ink);font-family:var(--t-disp);font-weight:400;
  font-size:17px;letter-spacing:1px;text-anchor:middle;dominant-baseline:central;
  pointer-events:none;}

/* Vergrößerte Tippflächen für Triple, Doppel und Bull. Unsichtbar, ändern nichts
   am Aussehen, und nur dort aktiv, wo mit dem Finger gezielt wird. */
.dct-board .hitlayer{display:none;}
@media(pointer:coarse){.dct-board .hitlayer{display:block;}}
.dct-board .hit{fill:transparent;stroke:none;}

/* Gezeigter Weg: Gold wie die Bemaßung im Oche-Meter, Ziffern in Navy. */
/* Gold allein verschwindet auf dem cremefarbenen Bett; der dunkle Schlagschatten
   gibt dem Umriss auf hellem wie auf schwarzem Grund eine Kante. */
.dct-board .hint{fill:none;stroke:var(--accent-2);stroke-width:4.5;pointer-events:none;
  opacity:0;filter:drop-shadow(0 0 2px rgba(11,16,26,.85));}
.dct-board .hint.on{opacity:1;animation:dct-pulse 1.1s ease-in-out infinite;}
@keyframes dct-pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.dct-board .dart{pointer-events:none;}
.dct-board .step{pointer-events:none;}
.dct-board .step ellipse{fill:var(--accent);stroke:var(--surface);stroke-width:2;}
.dct-board .step text{fill:var(--ink);font-family:var(--t-disp);font-weight:400;
  font-size:19px;text-anchor:middle;dominant-baseline:central;}
@media(prefers-reduced-motion:reduce){
  .dct-board .hint.on{animation:none;}
  #dct-app *{transition-duration:.01ms!important;animation-duration:.01ms!important;}
}

.dct-over{position:absolute;inset:24px;display:grid;place-items:center;text-align:center;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  backdrop-filter:blur(2px);border-radius:var(--field-r);padding:24px;}
.dct-over .big{font-family:var(--t-disp);font-weight:400;font-size:clamp(3rem,8vw,4.5rem);
  line-height:1;color:var(--ink);margin-top:6px;}

/* ---------- Hinweiskasten (Theme-Muster .note) ---------- */
.dct-note{font-size:.86rem;color:var(--ink2);line-height:1.7;background:var(--soft);
  border:1px solid var(--soft-line);border-left:4px solid var(--accent);
  border-radius:var(--field-r);padding:14px 20px;margin-top:20px;}
.dct-note b{color:var(--ink);}
.dct-note code{font-family:ui-monospace,Consolas,monospace;font-size:.82rem;
  background:var(--fill);border-radius:4px;padding:1px 6px;}

/* ---------- Setup-Formular ----------
   Drei Fragen, jede mit nummeriertem Kopf und einer Trennlinie darueber.
   Die Optionen sind echte Radio-Karten: weisse Flaeche mit sichtbarer Kante,
   die gewaehlte bekommt einen blauen Rahmen, eine leichte blaue Toenung und
   einen gefuellten Punkt. Vorher war es umgekehrt - die gewaehlte Option war
   weiss, die ungewaehlten weizenfarben, also wirkte die Auswahl blasser als
   der Rest. */
.dct-form{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:26px;counter-reset:dctq;}
.dct-form>li{display:flex;flex-direction:column;gap:12px;counter-increment:dctq;}
.dct-form>li + li{border-top:1px solid var(--line);padding-top:26px;}
.dct-form .q{display:flex;align-items:center;gap:11px;font-family:var(--t-disp);
  font-size:1.05rem;letter-spacing:2px;color:var(--ink);}
.dct-form .q::before{content:counter(dctq);flex:0 0 26px;width:26px;height:26px;
  display:inline-grid;place-items:center;border-radius:50%;
  background:var(--soft);border:1px solid var(--soft-line);color:var(--accent-ink);
  font-size:.85rem;letter-spacing:0;}
.dct-form>li.muted{opacity:.4;pointer-events:none;}

.dct-choice{display:flex;flex-direction:column;gap:10px;}
.dct-choice button{display:grid;grid-template-columns:22px 1fr;gap:14px;
  align-items:start;width:100%;min-height:62px;text-align:left;
  background:var(--surface);border:1.5px solid var(--line);
  border-radius:var(--field-r);padding:13px 16px;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease);}
.dct-choice button::before{content:'';width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-dash);background:var(--surface);margin-top:2px;
  transition:all .2s var(--ease);}
.dct-choice .lb{display:block;min-width:0;font-size:.98rem;font-weight:600;}
.dct-choice .lb small{display:block;font-weight:400;font-size:.8rem;
  color:var(--ink3);margin-top:3px;line-height:1.45;}
@media(hover:hover){
  .dct-choice button:hover{border-color:var(--primary);background:var(--soft);}
  .dct-choice button:hover::before{border-color:var(--primary);}
}
.dct-choice button[aria-pressed="true"]{border-color:var(--primary);
  background:var(--primary-soft);
  /* Ring statt dickerem Rahmen - sonst wackelt das Layout beim Umschalten. */
  box-shadow:0 0 0 1px var(--primary);}
.dct-choice button[aria-pressed="true"]::before{border-color:var(--primary);
  background:var(--primary);box-shadow:inset 0 0 0 3px var(--surface);}
.dct-choice button[aria-pressed="true"] .lb{color:var(--ink);}
.dct-choice button[aria-pressed="true"] .lb small{color:var(--ink2);}

.dct-field{display:flex;flex-direction:column;gap:8px;}
.dct-field>span{font-family:var(--t-disp);font-size:.8rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--accent);}
.dct-seg{display:inline-flex;gap:8px;flex-wrap:wrap;}
.dct-seg button{flex:1 1 auto;font-family:var(--t-disp);font-size:.9rem;letter-spacing:1.5px;
  padding:8px 16px;border-radius:var(--pill);background:var(--soft);color:var(--ink);
  border:1px solid var(--soft-line);min-height:42px;transition:all .3s var(--ease);}
.dct-seg button[aria-pressed="true"]{background:var(--primary);color:#fff;border-color:var(--primary);}

.dct-adv{margin-top:24px;border-top:1px dashed var(--line-dash);padding-top:16px;}
.dct-adv summary{font-family:var(--t-disp);font-size:.9rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--accent);cursor:pointer;list-style:none;
  padding:6px 0;min-height:34px;}
.dct-adv summary::-webkit-details-marker{display:none;}
.dct-adv summary::before{content:"+ ";}
.dct-adv[open] summary::before{content:"\2212 ";}
.dct-adv .body{display:flex;flex-direction:column;gap:18px;padding-top:16px;}
.dct-rangerow{display:flex;flex-wrap:wrap;gap:12px;}
.dct-rangerow .dct-field{flex:0 0 92px;}
.dct-num,.dct-search{width:100%;font-family:var(--t-body);font-size:.95rem;color:var(--g800,#1f2937);
  background:var(--soft);border:1px solid var(--soft-line);border-radius:var(--field-r);
  padding:12px 14px;min-height:48px;transition:border-color .3s var(--ease);}
.dct-num:focus,.dct-search:focus{outline:none;border-color:var(--accent);}
#dct-app input[type=number]{-moz-appearance:textfield;}

/* ---------- Schaltflächen (Theme-Muster .bp / .tab / .ocm-pdf) ---------- */
.dct-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:var(--pill);font-size:.92rem;font-weight:600;
  min-height:48px;background:var(--soft);color:var(--ink);
  border:1px solid var(--soft-line);transition:all .3s var(--ease);}
@media(hover:hover){.dct-btn:hover{background:var(--soft-line);}}
.dct-btn.primary{background:var(--primary);border-color:var(--primary);color:#fff;}
.dct-btn.primary:disabled{background:var(--primary);border-color:var(--primary);}
@media(hover:hover){.dct-btn.primary:hover{background:var(--primary-dark);
  border-color:var(--primary-dark);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(37,99,168,.28);}}
.dct-btn.gold{background:var(--accent);border-color:var(--accent);color:var(--ink);}
@media(hover:hover){.dct-btn.gold:hover{background:var(--accent-2);border-color:var(--accent-2);}}
.dct-btn:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none;}
.dct-btn.big{width:100%;padding:16px;font-family:var(--t-disp);font-weight:400;
  font-size:1.15rem;letter-spacing:2px;margin-top:24px;min-height:58px;}

/* ---------- HUD ---------- */
.dct-hud{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.05fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--card-r);
  overflow:hidden;margin-bottom:16px;}
.dct-hud>div{background:var(--surface);padding:12px 14px;min-width:0;}
.dct-hud .k{font-family:var(--t-disp);font-size:.72rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;}
.dct-hud .v{font-family:var(--t-disp);font-weight:400;font-size:1.7rem;line-height:1.2;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.dct-hud .v small{font-size:1rem;color:var(--ink3);}
#dct-hud-level,#dct-hud-task{font-size:1.45rem;}

/* ---------- Aufgabenkarte ---------- */
.dct-task{overflow:hidden;}
.dct-taskhead{padding:20px 24px 14px;display:flex;align-items:flex-end;
  justify-content:space-between;gap:12px;}
.dct-taskhead .lbl{font-family:var(--t-disp);font-size:.78rem;letter-spacing:3px;
  text-transform:uppercase;color:var(--accent);}
.dct-rest{font-family:var(--t-disp);font-weight:400;font-size:5rem;line-height:.9;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.dct-darts{display:flex;gap:2px;justify-content:flex-end;align-items:center;}
#dct-app .dct-dart{width:44px;height:44px;display:block;flex:0 0 auto;overflow:visible;
  color:var(--primary);transition:color .15s ease,opacity .15s ease;}
#dct-app .dct-dart{--dart-flight:var(--accent);}
#dct-app .dct-dart .barrel{fill:currentColor;}
#dct-app .dct-dart .shaft{fill:currentColor;opacity:.9;}
#dct-app .dct-dart .tip{fill:currentColor;}
#dct-app .dct-dart .flight{fill:var(--dart-flight);}
#dct-app .dct-dart .strike{display:none;}
#dct-app .dct-dart.spent{color:var(--line-dash);--dart-flight:var(--line-dash);}
#dct-app .dct-dart.spent .strike{display:block;}
#dct-app .dct-dart .strike .halo{stroke:var(--surface);stroke-width:3.6;}
#dct-app .dct-dart .strike .bar{stroke:var(--ink3);stroke-width:1.9;}
@media(max-width:420px){ #dct-app .dct-dart{width:36px;height:36px;} }

.dct-timer{height:6px;background:var(--fill);position:relative;overflow:hidden;}
.dct-timer>i{position:absolute;inset:0 auto 0 0;background:var(--accent);width:100%;display:block;}
.dct-timer.low>i{background:var(--danger);}

.dct-slots{display:flex;gap:10px;padding:18px 24px;}
.dct-slot{flex:1;min-width:0;border:1px dashed var(--line-dash);border-radius:var(--field-r);
  padding:12px 6px;text-align:center;font-family:var(--t-disp);font-weight:400;font-size:1.4rem;
  letter-spacing:1px;color:var(--ink3);background:var(--soft);}
.dct-slot.filled{border-style:solid;background:var(--surface);color:var(--ink);}
.dct-slot.q1{border-color:var(--good);color:var(--good);}
.dct-slot.q2{border-color:var(--accent-ink);color:var(--accent-ink);}
.dct-slot.q3{border-color:var(--danger);color:var(--danger);}
.dct-slot small{display:block;font-family:var(--t-body);font-size:.68rem;font-weight:500;
  letter-spacing:1px;text-transform:uppercase;color:var(--ink3);margin-top:4px;}

.dct-msg{padding:0 24px 16px;font-size:.95rem;color:var(--ink2);min-height:24px;}
.dct-msg b{color:var(--ink);}

/* Steht als letztes Element der Aufgabenkarte (Knoepfe darueber), deshalb
   unten 24px wie das vorherige Schlusselement .dct-actions. */
.dct-why{margin:0 24px 24px;border:1px solid var(--soft-line);border-radius:var(--field-r);
  background:var(--soft);padding:16px 18px;font-size:.88rem;}
.dct-why--tip{color:var(--ink3);}
/* Mit #dct-app davor: die Basisregel #dct-app p{margin:0} ist ein ID-Selektor
   und schlaegt jede reine Klassenregel — ohne das kleben die Absaetze. */
#dct-app .dct-why--tip p{line-height:1.7;}
#dct-app .dct-why--tip p + p{margin-top:12px;}

/* Reservierte Hoehe gegen das Springen der Aufgabenkarte.
   Ohne sie wuchs die Karte beim Abschluss jeder Aufgabe um ~340px (Erklaerung
   290px + Weiter-Zeile 66px) und fiel beim Klick auf "Naechste Aufgabe" wieder
   zusammen — bei 10 Aufgaben pro Runde ein staendiges Pendeln.
   Der reservierte Platz steht nicht leer: waehrend des Loesens zeigt er den
   Spiel-Tipp (.dct-why--tip aus showTip()), danach die Fehlwurf-Analyse.
   290px = groesste gemessene Erklaerung ueber alle 187 Faelle bei >=480px
   Panelbreite (Spanne dort 236-290px); der Tipp reserviert zusaetzlich die
   66px der Weiter-Zeile, damit die Summe in beiden Zustaenden gleich ist.
   Erst ab 480px: darunter waechst die Erklaerung durch den Textumbruch auf bis
   zu 556px (bei 320px Breite), und ein dauerhaft so hoher, groesstenteils
   leerer Tippkasten waere auf dem Handy schlimmer als der Sprung. Dort stehen
   Scheibe und Karte ohnehin untereinander, die Aenderung passiert unterhalb des
   Sichtbereichs und die fixierte Bedienleiste fuehrt durch die Runde. */
@media(min-width:480px){
  .dct-why{min-height:290px;}
  .dct-why--tip{min-height:356px;}
  /* Auch die Meldung schwankt: einzeilig bei "Perfekt. +164 Punkte", zweizeilig
     bei "Daneben. Von Rest 103 kommst du ... Weg: T19 Bull" oder beim Hinweis
     zu zwei Darts auf der Hand — gemessen 40px vs. 65px. Ohne diese Reservierung
     bliebe genau dieser Unterschied als Rest-Sprung uebrig. */
  .dct-msg{min-height:65px;}
}
.dct-why h4{margin:0 0 10px;font-family:var(--t-disp);font-weight:400;font-size:.85rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--accent-ink);}
.dct-why table{width:100%;border-collapse:collapse;font-size:.88rem;}
.dct-why td{padding:4px 0;vertical-align:top;color:var(--ink2);}
.dct-why td:first-child{font-family:var(--t-disp);font-weight:400;font-size:1.05rem;
  letter-spacing:1px;width:52px;color:var(--ink);}
.dct-why td:nth-child(2){width:62px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;}

/* unten 14px statt 24px: darunter folgt die Weiter-Zeile bzw. der
   Auswertungskasten, nicht mehr der Kartenrand. */
.dct-actions{display:flex;gap:10px;padding:0 24px 14px;flex-wrap:wrap;}
.dct-actions .dct-btn{flex:1 1 auto;}
.dct-actions #dct-stop{flex:1 1 100%;color:var(--ink3);}
.dct-next{display:flex;align-items:center;gap:12px;padding:0 24px 18px;}
.dct-next .dct-btn{flex:1;}
.dct-next kbd{font-family:ui-monospace,Consolas,monospace;font-size:.72rem;color:var(--ink3);
  border:1px solid var(--line);border-radius:4px;padding:3px 7px;white-space:nowrap;}

/* ---------- Auswertung nach der Runde ----------
   Klassen bewusst .dct-rv/.dct-rvrow statt .rv/.rvrow: .rv ist im Theme die
   globale Scroll-Reveal-Klasse (style.css) und hängt an Hero-Badge, -Titel,
   -Subline, der goldenen Linie und an Sektionen. Eine ungescopte .rv-Regel hier
   macht jedes dieser Elemente zum Flex-Container — der Hero-Titel bricht dann um
   und der rote Strich unter dem gold gefärbten <span> läuft über die ganze
   Containerbreite, weil der <span> als Flex-Item blockifiziert wird. */
.dct-review{padding:24px;margin-bottom:20px;}
.dct-review .hint{font-size:.88rem;color:var(--ink3);margin:-10px 0 16px;line-height:1.6;}
.dct-rv{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--field-r);overflow:hidden;}
.dct-rvrow{display:grid;grid-template-columns:20px 48px 1fr auto;gap:12px;align-items:center;
  background:var(--surface);padding:11px 14px;}
.dct-rvrow .n{font-size:.72rem;color:var(--ink3);text-align:right;}
.dct-rvrow .rest{font-family:var(--t-disp);font-weight:400;font-size:1.4rem;letter-spacing:1px;
  font-variant-numeric:tabular-nums;color:var(--ink);}
.dct-rvrow.ok .rest{color:var(--good);} .dct-rvrow.bad .rest{color:var(--danger);}
.dct-rvrow .ways{min-width:0;}
.dct-rvrow .ways b{font-family:var(--t-disp);font-weight:400;font-size:1.15rem;letter-spacing:1px;
  display:block;color:var(--ink);}
.dct-rvrow .ways em{font-style:normal;font-size:.76rem;color:var(--ink3);display:block;}
/* Gleichwertiger Weg: gruen wie ein Treffer, nicht grau wie eine Korrektur.
   Die Zeile nennt trotzdem den Modellweg — nur eben als Alternative. */
.dct-rvrow .ways em.eq{color:var(--good);}
.dct-rvrow .tm{font-size:.8rem;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* Die fruehere fixierte Mobil-Bedienleiste (.dct-mbar) ist entfernt: sie
   wiederholte Rest und Status aus der Aufgabenkarte und verdeckte dabei genau
   den unteren Teil der Scheibe, auf den man tippen muss. Weiter und Zurueck
   laufen jetzt ueber die Knoepfe in der Karte. Damit entfaellt auch die
   Ausweich-Regel fuer den Back-to-Top-Knopf des Themes. */

/* ---------- Wegetabelle (eigener Abschnitt, kein Reiter mehr) ---------- */
.dct-tablebar{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:flex-end;margin-bottom:20px;}
.dct-search{width:180px;}
.dct-scroll{overflow-x:auto;}
.dct-tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:680px;}
.dct-tbl th{text-align:left;font-family:var(--t-disp);font-weight:400;font-size:.95rem;
  letter-spacing:2px;color:#fff;background:var(--ink);padding:13px 22px;
  position:sticky;top:0;z-index:1;}
.dct-tbl td{padding:11px 22px;}
.dct-tbl tbody tr+tr td{border-top:1px solid var(--fill);}
.dct-tbl tbody tr{cursor:pointer;}
@media(hover:hover){.dct-tbl tbody tr:hover{background:var(--soft);}}
.dct-tbl .rest{font-family:var(--t-disp);font-weight:400;font-size:1.45rem;letter-spacing:1px;
  width:68px;color:var(--ink);font-variant-numeric:tabular-nums;}
.dct-tbl .way{font-family:var(--t-disp);font-weight:400;font-size:1.15rem;letter-spacing:1.5px;
  color:var(--ink);white-space:nowrap;}
.dct-tbl .dim{color:var(--g400,#9ca3af);}
.dct-tbl .pct{font-weight:700;text-align:right;color:var(--info);
  font-variant-numeric:tabular-nums;white-space:nowrap;}
.dct-detail td{background:var(--soft);padding:0 22px 16px;}
.dct-detail .inner{padding:14px 0 2px;font-size:.86rem;color:var(--ink2);}

/* ---------- Statistik ---------- */
.dct-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;margin-bottom:28px;}
.dct-stat{padding:20px 22px;}
.dct-stat .k{font-family:var(--t-disp);font-size:.8rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);}
.dct-stat .v{font-family:var(--t-disp);font-weight:400;font-size:2.6rem;line-height:1.1;
  color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px;}
.dct-stat .v small{font-size:1.2rem;color:var(--ink3);}

.dct-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.dct-panel h3{font-size:1.35rem;letter-spacing:2px;margin-bottom:6px;}
.dct-panel .hint{font-size:.86rem;color:var(--ink3);margin-bottom:16px;line-height:1.6;}
.dct-bars{display:flex;flex-direction:column;gap:10px;}
.dct-bar{display:grid;grid-template-columns:56px 1fr 96px;gap:12px;align-items:center;}
.dct-bar b{font-family:var(--t-disp);font-weight:400;font-size:1.3rem;letter-spacing:1px;
  color:var(--ink);font-variant-numeric:tabular-nums;}
.dct-bar .track{height:8px;background:var(--fill);border-radius:var(--pill);overflow:hidden;}
.dct-bar .fill{height:100%;background:var(--danger);border-radius:var(--pill);}
.dct-bar span{font-size:.78rem;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums;}
.dct-rank{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--field-r);overflow:hidden;}
.dct-rank>div{background:var(--surface);padding:12px 16px;display:grid;
  grid-template-columns:26px 1fr auto;gap:12px;align-items:center;font-size:.9rem;}
.dct-rank .pos{font-family:var(--t-disp);font-weight:400;font-size:1.25rem;color:var(--accent);
  text-align:center;}
.dct-rank .meta{font-size:.76rem;color:var(--ink3);display:block;}
.dct-rank .tm{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.dct-empty{color:var(--ink3);font-size:.9rem;padding:16px 0;font-style:italic;}

/* ---------- Fuß ---------- */
.dct-foot{margin-top:32px;padding-top:16px;border-top:1px dashed var(--line-dash);
  font-size:.78rem;color:var(--ink3);line-height:1.8;display:flex;flex-wrap:wrap;
  gap:6px 20px;justify-content:space-between;}
.dct-foot code{font-family:ui-monospace,Consolas,monospace;font-size:.74rem;
  background:var(--fill);border-radius:4px;padding:1px 6px;}