/* tapr — Retro Modern (Brand-Styleguide): IBM-Terminal-Ästhetik, mint auf warmem Schwarz.
   Selbst gehostete Fonts (kein CDN → kein Tracking, DSGVO-sauber). Themes über data-theme. */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); }

:root, [data-theme="tapr"] {
  /* Palette laut Styleguide: Primary Mint, Background, Surface, Surface Light, Border,
     Text Primary (warmes Weiß), Text Secondary, Error, Warning */
  --bg:#0F1115; --bg2:#1A1D1C; --surface:#232726; --line:#343B38;
  --text:#EEE6CF; --sub:#AAA18E;
  --main:#7FB59A; --main-hover:#8DC8AB; --main-active:#6CA286;
  --correct:#7FB59A; --error:#C46A63; --warn:#CFA55B;
}
/* Typografie laut Styleguide: Headlines/Zahlen IBM Plex Mono, Fließtext Inter */
:root { --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
        --font-ui:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
[data-theme="dracula"] { --bg:#282a36; --bg2:#21222c; --sub:#7d8cc4; --text:#f8f8f2; --main:#bd93f9; --correct:#50fa7b; --error:#ff5555; --surface:#2d2f3d; --line:#343746; }
[data-theme="gruvbox"] { --bg:#282828; --bg2:#1d2021; --sub:#94867a; --text:#ebdbb2; --main:#fabd2f; --correct:#b8bb26; --error:#fb4934; --surface:#32302f; --line:#3c3836; }
[data-theme="nord"]    { --bg:#2e3440; --bg2:#272c36; --sub:#8892a6; --text:#eceff4; --main:#88c0d0; --correct:#a3be8c; --error:#bf616a; --surface:#363c49; --line:#3b4252; }
/* light — warme Brand-Variante (Creme statt Blau/Grau): dunkleres Mint für Kontrast auf hell */
[data-theme="light"] { --bg:#F1EDE0; --bg2:#FAF7EC; --surface:#FFFFFF; --line:#D9D2BE;
  --text:#2A2C24; --sub:#84806F;
  --main:#4E8A6F; --main-hover:#5D9A7E; --main-active:#427459;
  --correct:#4E8A6F; --error:#B0493F; --warn:#A87F36; }
[data-theme="mono"]    { --bg:#0f0f10; --bg2:#0a0a0b; --sub:#7d7d82; --text:#e6e6e6; --main:#e6e6e6; --correct:#9a9a9a; --error:#ff6b6b; --surface:#161618; --line:#222224; }

* { box-sizing:border-box; margin:0; padding:0; }
/* Sichtbarer Fokusring nur bei Tastaturbedienung (Maus-Klicks zeigen keinen Ring) —
   ersetzt das frühere pauschale blur(), das Tastaturnutzern den Fokus wegnahm. */
:focus-visible { outline:2px solid var(--main); outline-offset:2px; border-radius:6px; }
.cap:focus-visible { outline:none; }
html,body { height:100%; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-mono);
  font-feature-settings:"liga" 0, "tnum" 1; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
  transition:background .3s,color .3s;
  overflow-x:hidden;
}
h2 { font-weight:600; font-size:18px; letter-spacing:-.2px; }
h3 { font-weight:600; }
/* Fließtext (Beschreibungen, Hinweise, Rechtstexte) in Inter — Headlines/Zahlen bleiben Mono */
.muted, .mplead, .mpgd, .lessoncard .ld, .doc p, .doc li, .row > span, .modalbox p { font-family:var(--font-ui); }

/* ---------- Top-Leiste ---------- */
/* Menüband: dezent schwebend — bleibt beim Scrollen oben, leicht durchscheinend */
header.top { display:flex; align-items:center; gap:18px; padding:14px 30px; flex-wrap:wrap;
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* Logo laut Styleguide: Pixel-T-Bildmarke + Wortmarke "tapr|" mit blinkendem Cursor (~1s) */
.brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; color:var(--text); letter-spacing:.2px; }
.brand b { color:var(--main); font-weight:600; }
.brandmark { width:22px; height:auto; fill:var(--main); flex:none; }
.brandword { letter-spacing:.5px; }
@keyframes caret { 50% { opacity:0; } }
.brandcursor { animation:caret 1s step-end infinite; }
.brand small { color:var(--sub); font-weight:400; margin-left:2px; font-size:12px; }
.brand.big { justify-content:center; font-size:30px; gap:14px; margin-bottom:6px; }
.brand.big .brandmark { width:40px; }
nav.config { display:flex; align-items:center; gap:3px; margin-left:auto; flex-wrap:wrap; }
nav.config button, nav.config select, nav.config a.navlink {
  background:transparent; border:none; color:var(--sub); font-family:inherit; font-size:13px;
  padding:7px 11px; border-radius:8px; cursor:pointer; transition:color .15s, background .15s, border-color .15s; letter-spacing:.2px;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
nav.config button:hover, nav.config a.navlink:hover { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
nav.config button.active { color:var(--main); background:color-mix(in srgb, var(--main) 12%, transparent); }
/* Dezente Outline-Icons vor den Ansichts-Knöpfen (folgen der Textfarbe) */
nav.config button:has(.navico) { display:inline-flex; align-items:center; gap:6px; }
.navico { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; opacity:.85; }
nav.config .sep { width:1px; height:16px; background:color-mix(in srgb, var(--line) 80%, transparent); margin:0 7px; }
nav.config select { color:var(--sub); padding-right:6px; border:1px solid transparent; }
nav.config select:hover { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
/* Sprach-Schalter (DE/EN) als kleine Kapsel */
#langBtn { border:1px solid var(--line); padding:5px 10px; font-size:11px; font-weight:600;
  letter-spacing:1.2px; color:var(--text); }
#langBtn:hover { border-color:color-mix(in srgb, var(--main) 45%, var(--line)); color:var(--main); }
/* Browser stylen die geschlossene <select>-Box zwar über background/color,
   die aufgeklappte Optionsliste aber nur, wenn <option> selbst gestylt wird —
   sonst bleibt sie hell und passt nicht zum dunklen Theme. */
select { background:var(--bg2); color:var(--text); border:1px solid var(--line); border-radius:6px; }
select option { background:var(--bg2); color:var(--text); }

/* Modus-Dropdown (bündelt die Trainingsmodi statt einer langen Button-Reihe) */
.dropdown { position:relative; }
.dropbtn { display:flex; align-items:center; gap:7px;
  background:var(--bg2) !important; border:1px solid var(--line) !important; color:var(--text) !important;
  font-weight:500; padding:7px 13px !important; }
.dropbtn:hover { border-color:color-mix(in srgb, var(--main) 45%, var(--line)) !important; }
#modeBtnLabel { color:var(--main); }
.dropbtn .care { font-size:9px; opacity:.55; transition:transform .15s; }
.dropdown:has(.dropmenu:not([hidden])) .care { transform:rotate(180deg); }
@keyframes dropin { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.dropmenu {
  position:absolute; top:100%; left:0; margin-top:8px; z-index:30;
  display:flex; flex-direction:column; min-width:185px; padding:7px;
  background:var(--bg2);
  border:1px solid var(--line); border-radius:12px;
  max-height:min(72vh, 640px); overflow-y:auto;
  animation:dropin .14s ease-out;
}
.dropmenu.right { left:auto; right:0; }
.dropmenu button { text-align:left; padding:8px 12px; border-radius:8px; }
.dropmenu button:hover { background:color-mix(in srgb, var(--text) 8%, transparent); }
.dropmenu button.active { color:var(--main); background:color-mix(in srgb, var(--main) 12%, transparent); font-weight:500; }
.dropgroup { padding:9px 12px 4px; font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sub); opacity:.65; }
.dropsep { height:1px; background:color-mix(in srgb, var(--line) 80%, transparent); margin:6px 5px; }
/* 2-Spalten-Raster für Gruppen mit vielen kurzen Einwort-Labels (Wörter&Text/Zahlen im
   Moduswechsel-Dropdown) — hält lange Dropdowns kompakt statt einer langen Einzelspalte. */
.dropgrid { display:grid; grid-template-columns:1fr 1fr; gap:1px; }
.dropmenu:has(.dropgrid) { min-width:230px; }
.dropgrid button { white-space:nowrap; }
/* Verlässt die aktuelle Ansicht (statt nur den Modus zu wechseln) — Pfeil rechtsbündig macht
   den Unterschied zu den reinen Moduswechsel-Einträgen sichtbar, nicht nur über Trennstriche. */
.dropgo { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.dropgo .navico { opacity:.6; }
.dropgo:hover .navico { opacity:1; }

/* ---------- Hauptbereich ---------- */
main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  width:100%; max-width:820px; margin:0 auto; padding:0 30px 64px; }
/* Zentrieren über auto-Margins: passt der Inhalt nicht ins Fenster (z. B. Nummernblock-Modus),
   kollabieren sie zu 0 und oben wird NICHTS mehr abgeschnitten — die Seite scrollt stattdessen. */
main > section:not([hidden]) { margin-top:auto; margin-bottom:auto; }
body.wide main > section:not([hidden]) { margin-top:0; margin-bottom:0; }

/* ---------- Trainer (zentriert) ---------- */
#trainer { width:100%; display:flex; flex-direction:column; align-items:center; position:relative; }

/* Eine ruhige Konfig-/Statuszeile über dem Text (MonkeyType-Stil). Dimmt beim Tippen. */
.cfgbar { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:nowrap;
  width:100%; margin-bottom:34px; color:var(--sub); font-size:13px; height:30px; white-space:nowrap;
  transition:opacity .35s ease; }
@media (max-width:760px) { .cfgbar { flex-wrap:wrap; height:auto; min-height:30px; white-space:normal; } }
.cfgbar.dim { opacity:.28; }
.cfgset { display:inline-flex; align-items:center; gap:4px; }
.cfgbtn { background:transparent; border:none; color:var(--sub); font-family:inherit; font-size:13px;
  padding:5px 9px; border-radius:8px; cursor:pointer; transition:color .15s, background .15s; letter-spacing:.3px; }
.cfgbtn:hover { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.cfgbtn.on, #cfgLang { color:var(--main); }
.cfgdot { opacity:.5; }
.cfglive { display:inline-flex; align-items:baseline; gap:14px; }
.cfglive b { color:var(--main); font-weight:500; font-size:15px; letter-spacing:-.3px; }
.cfglive .cfgu { font-size:11px; margin-left:-9px; letter-spacing:.5px; }
.cfglive .cfgerr { color:var(--error); }
.cfglive .cfgerr::before { content:"✗"; font-size:11px; margin-right:2px; }
.cfglive.hidden { visibility:hidden; }
.cfgstage { display:inline-flex; align-items:center; gap:8px; cursor:default; }
/* Verdientes Abzeichen: Medaille + Name in Akzentfarbe (permanent, sinkt nie — s. ladder()) */
.cfgmedal { width:13px; height:13px; fill:none; stroke:var(--main); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; flex:none; opacity:.9; }
.cfgbadge { color:var(--main); letter-spacing:.3px; }
.cfgstage .track { width:64px; height:3px; background:var(--line); border-radius:2px; overflow:hidden; display:inline-block; }
.cfgstage .track > div { height:3px; background:var(--main); opacity:.8; }
.cfgnext { opacity:.7; }
.cfgnext small { font-size:10px; letter-spacing:.4px; }
.cfgfocus { display:inline-flex; align-items:center; gap:8px; border-radius:6px; }
/* begleitet den Erst-Einblick-Toast: lenkt den Blick einmalig auf die Fokus-Zeile, ohne das
   Layout zu verschieben (Glow statt Größenänderung). */
.cfgfocus.pulseonce { animation:focusglow 2.2s ease-out; }
@keyframes focusglow {
  0% { box-shadow:0 0 0 6px color-mix(in srgb, var(--main) 32%, transparent); }
  100% { box-shadow:0 0 0 6px transparent; }
}
@media (prefers-reduced-motion: reduce) { .cfgfocus.pulseonce { animation:none; } }
.cfgfocus b { color:var(--text); letter-spacing:2px; }
.cfgfocus .drill { color:var(--main); }
.cfgfocus .clearfocus { background:none; border:none; color:var(--sub); cursor:pointer; font-family:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.cfgfocus .clearfocus:hover { color:var(--text); }

/* min-height reserviert die Zeile schon, bevor die erste Taste die Anzeige-Schwelle
   erreicht — sonst springt beim Freischalten der ersten Taste alles darunter (inkl.
   Tippbereich) plötzlich nach unten. */
.keystrip { display:flex; flex-wrap:wrap; justify-content:center; gap:3px; width:100%; margin-bottom:20px; min-height:20px; }
.keystrip .k { min-width:20px; height:20px; padding:0 4px; display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--sub); text-transform:uppercase; letter-spacing:.5px; }
.keystrip.hidden { display:none; }





/* Tippfläche — bricht wie .kbwrap bewusst aus dem schmalen <main> (820px) aus,
   damit auf breiten Bildschirmen mehr Text pro Zeile Platz hat, statt gequetscht
   zu wirken. max-width deckelt es, damit Zeilen auf sehr breiten Screens lesbar bleiben.
   Schriftgröße skaliert mit der Viewport-Breite (clamp) — groß auf Desktop, kompakt auf
   dem Handy. Die Höhe ist auf exakt zwei Zeilen fixiert; JS füllt immer nur so viel Text
   ein, wie in diese zwei Zeilen passt (keybr-artig, kein Scrollen). */
.words { --lh:1.75; font-size:clamp(20px, 2.5vw, 33px); line-height:var(--lh); letter-spacing:.3px; color:var(--sub);
  position:relative;   /* Anker fuer das schwebende Caret (#scaret) */
  height:calc(2em * var(--lh)); overflow:hidden;
  user-select:none; cursor:text;
  width:100vw; max-width:1100px; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:0 20px; text-align:center; }
.word { display:inline-block; }
.word.tight { margin-right:0.6em; }
.letter { position:relative; display:inline-block; transition:color .05s; }
.letter.space { white-space:pre; }
.letter.pop { animation:pop .13s ease-out; }
@keyframes pop { 0% { transform:scale(1.4); } 100% { transform:scale(1); } }
.letter.correct { color:var(--text); }
.letter.incorrect { color:var(--error); }
.letter.incorrect.space { background:var(--error); opacity:.35; border-radius:2px; }
/* ---------------- Fog Mode: Verdeckung des Textes VOR dem Cursor (TASK-02) ----------------
   Alle drei Stile verändern NUR das verdeckte Zeichen selbst und NIE seine Box-Breite — die
   Tippfläche darf sich beim Verdecken nicht verschieben (Akzeptanzkriterium "zero layout shift").
   Die Schrift ist Monospace (--font-mono), daher hat auch der Masken-Block dieselbe Laufweite.
   .fog-blur/.fog-fade = reiner Paint (filter/opacity), kein Reflow. .fog-mask legt einen ▪-Block
   absolut positioniert über das (transparent geschaltete) Zeichen — die Box bleibt unverändert. */
.letter.fog-blur { filter:blur(5px); }
.letter.fog-fade { opacity:.06; }
.letter.fog-mask { color:transparent; }
.letter.fog-mask::before { content:"▪"; position:absolute; inset:0; color:var(--sub); opacity:.5; text-align:center; pointer-events:none; }
/* Unter prefers-reduced-motion / forced-colors erzwingt app.js den mask-Stil (blur/fade sind für
   Low-Vision bzw. im Kontrastmodus ungeeignet, s. TASK-02 §Accessibility) — hier keine CSS-Notlogik,
   die den Text versehentlich wieder freilegen könnte. */
/* Schwebendes Caret: EIN Element, das per Transition weich zur Zielposition gleitet
   (MonkeyType-Gefühl). Blinkt nur im Leerlauf (.idle); .noglide = Sofort-Sprung bei Blockwechsel. */
#scaret { position:absolute; left:0; top:0; width:2.5px; background:var(--main); border-radius:2px;
  transition:transform .13s cubic-bezier(.25,.75,.3,1), height .13s; pointer-events:none; z-index:2; }
#scaret.noglide { transition:none; }
#scaret.idle { animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }

.hint { margin-top:36px; color:var(--sub); font-size:12px; opacity:.6; text-align:center; }
.hint kbd { font-family:inherit; color:var(--text); font-size:12px; }

.pausenotice { margin-top:14px; color:var(--main); font-size:12px; text-align:center; min-height:15px; }
.pausenotice[hidden] { display:block !important; visibility:hidden; }   /* Platz bleibt reserviert -> nichts springt */

/* ---------- Statistik (typografisch, keine Boxen) ---------- */
.stats { width:100%; }

/* Informationshierarchie: Heute -> Coach -> Fortschritt -> Verlauf -> Rekorde. Jeder Block
   bekommt eine sichtbar größere Überschrift als die Karten darin (.card > h3), damit die
   fünf Fragen aus der Statistik-Übersicht ohne Scrollen/Suchen beantwortet werden. */
.statsection { margin-top:64px; }
.statsection:first-child { margin-top:0; }
.ssectitle { font-size:22px; font-weight:600; letter-spacing:-.3px; color:var(--text); margin:0 0 18px; }
/* Rekorde sind wichtig, sollen aber nicht mit der "Heute"-Sektion konkurrieren — kleinere
   Überschrift und kompaktere Kennzahlen statt der großen Haupt-Tiles. */
.statsection.records .ssectitle { font-size:15px; color:var(--sub); text-transform:uppercase; letter-spacing:1px; }
.statsection.records .tilegrid .v { font-size:clamp(20px, 2vw, 26px); letter-spacing:-.5px; }

.tilegrid { display:grid; grid-template-columns:repeat(4,1fr); gap:28px 32px; margin:8px 0 6px; }
.tile .v { font-size:clamp(34px, 3.8vw, 54px); font-weight:600; line-height:1; letter-spacing:-1.5px; color:var(--main); font-variant-numeric:tabular-nums; }
.tile .v.acc { color:var(--text); }
.tile .l { font-size:12px; color:var(--sub); margin-top:10px; letter-spacing:.6px; text-transform:lowercase; }
@media (max-width:720px) { .tilegrid { grid-template-columns:repeat(2,1fr); } }

.tvnote { font-size:13px; margin-top:16px; color:var(--sub); }
.tvnote.good { color:var(--correct); }
.tvnote.bad { color:var(--error); }

/* Coach: Erklärsätze statt Rohzahlen — jede Zeile eine konkrete, datenbasierte Aussage
   (schwächste Taste/Übergang, Tempo-Trend, nächstes Level) statt eine weitere Kachel. */
.coachlist { display:flex; flex-direction:column; gap:14px; }
.coachrow { display:flex; align-items:center; gap:14px; padding:16px 20px; border:1px solid var(--line); border-radius:10px; background:var(--bg2); }
.coachrow .dot2 { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--main); }
.coachrow.weak .dot2 { background:var(--warn); }
.coachrow.warn .dot2 { background:var(--error); }
.coachrow .txt { flex:1 1 auto; font-size:14px; line-height:1.5; color:var(--text); }
.coachrow .btn { flex:0 0 auto; }
/* Angepinnter Erst-Fund: bleibt dauerhaft oben im Coach, damit der einmalige "Aha"-Moment aus
   dem Toast nicht wieder in Vergessenheit gerät. Eigene, etwas hellere Umrandung als die
   laufenden Hinweise darunter, damit klar ist: das ist ein historischer Fund, kein aktueller. */
.coachrow.pinned { border-color:color-mix(in srgb, var(--main) 45%, var(--line)); }
.coachrow.pinned .dot2 { background:var(--main); }
.coachrow.pinned .txt { display:flex; flex-direction:column; gap:3px; }
.coachrow.pinned .eyebrow { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--sub); }
.coachrow.pinned b { color:var(--text); font-weight:600; }
.coachrow.pinned .sub { font-size:12px; color:var(--sub); }

.card { padding:36px 0 10px; margin:0; border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.card:first-of-type { border-top:none; }
.tilegrid + .card { margin-top:28px; }
.card > h3 { font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--main); margin-bottom:24px; }
.card > h3 small { text-transform:none; letter-spacing:0; color:var(--sub); opacity:.6; margin-left:8px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
.grid2 .card { border-top:1px solid var(--line); }
@media (max-width:720px) { .grid2 { grid-template-columns:1fr; } }

/* Pro-Taste-Reihen */
.krow { display:flex; align-items:center; gap:16px; font-size:14px; margin:13px 0; }
.krow .kc { width:24px; font-weight:600; font-size:15px; text-transform:uppercase; color:var(--text); }
.krow .bartrack { flex:1 1 auto; background:var(--line); height:6px; border-radius:3px; overflow:hidden; }
.krow .bar { display:block; height:6px; background:var(--main); border-radius:3px; }
.krow .num { color:var(--sub); flex:0 0 auto; text-align:right; font-variant-numeric:tabular-nums; }
.krow .num.w { width:68px; } .krow .num.a { width:46px; } .krow .num.n { width:50px; }

/* Bigramme */
.bgrow { display:flex; align-items:center; gap:14px; font-size:14px; margin:13px 0; }
.bgrow .bg { font-weight:600; font-size:15px; letter-spacing:2px; color:var(--text); width:48px; }
.bgrow .num { color:var(--sub); margin-right:auto; font-variant-numeric:tabular-nums; }

/* Verlauf mit Achsen — Y-Achse deckt exakt den gezeichneten Bereich ab (Chart minus Innenabstand) */
.sparkwrap { display:flex; gap:12px; }
.yax { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;
  width:38px; height:166px; margin-top:12px; color:var(--sub); font-size:11px; font-variant-numeric:tabular-nums; }
.spark { flex:1 1 auto; height:190px; display:block; }
.xax { display:flex; justify-content:space-between; margin:8px 0 0 50px; color:var(--sub); font-size:11px; }

/* Aktivitäts-Kalender */
.cal { display:flex; gap:4px; }
.cal .col { display:flex; flex-direction:column; gap:4px; }
.cal .cell { width:17px; height:17px; border-radius:4px; background:var(--line); }
.callegend { display:flex; align-items:center; gap:6px; margin-top:18px; color:var(--sub); font-size:12px; }
.callegend .cell { width:13px; height:13px; border-radius:3px; }

/* Erfolgsstrang */
.ladder { display:flex; align-items:flex-start; gap:0; }
.ladder .node { display:flex; flex-direction:column; align-items:center; gap:8px; }
.ladder .dot { width:12px; height:12px; border-radius:50%; background:var(--line); }
.ladder .dot.done { background:var(--main); }
.ladder .dot.cur { box-shadow:0 0 0 4px color-mix(in srgb, var(--main) 30%, transparent); }
.ladder .cap { font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; }
.ladder .cap.on { color:var(--text); }
.ladder .link { flex:1; height:2px; background:var(--line); margin-top:5px; }
.ladder .link.done { background:var(--main); opacity:.6; }
.laddertext { margin-top:18px; color:var(--sub); font-size:13px; }

/* Tasten-Heatmap (monochrom, Akzent-Tönung nach Proficiency) */
.kb { display:flex; flex-direction:column; gap:6px; align-items:center; }
.kb .kbrow { display:flex; gap:6px; }
.kb .kbkey { width:48px; height:48px; border-radius:9px; background:var(--bg2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:500; color:var(--sub); }
.kb .kbkey .lab { color:inherit; }
.kblegend { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:20px; color:var(--sub); font-size:12px; }
.kblegend .ramp { width:110px; height:12px; border-radius:4px; background:linear-gradient(90deg, color-mix(in srgb, var(--main) 8%, var(--bg2)), var(--main)); }
.kblegend .dot.err { width:12px; height:12px; border-radius:3px; background:var(--error); margin-left:10px; }

/* ---------- Buttons / Texte ---------- */
.btn { background:transparent; border:1px solid var(--line); color:var(--text); font-family:inherit;
  padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; transition:.15s; }
.btn:hover { border-color:var(--main); color:var(--main); }
.btn.primary { background:var(--main); color:var(--bg); border-color:var(--main); font-weight:500; }
.btn.primary:hover { background:var(--main-hover, var(--main)); border-color:var(--main-hover, var(--main)); color:var(--bg); }
.btn.primary:active { background:var(--main-active, var(--main)); }
.btn.tiny { padding:3px 11px; font-size:11px; border-radius:6px; color:var(--sub); }
.btn.tiny:hover { color:var(--main); }
.dataact { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0; }
.muted { color:var(--sub); font-size:12px; line-height:1.6; }
.muted.small { font-size:11px; }
[hidden] { display:none !important; }

/* Login-/Registrier-Modal */
.modalbox.login { width:400px; }
.modalbox.login h3 { margin-bottom:6px; font-size:16px; }
.pw { display:block; width:100%; margin:10px 0 0; background:var(--bg); border:1px solid var(--line);
  color:var(--text); font-family:inherit; font-size:14px; padding:11px 13px; border-radius:9px; }
.pw:focus-visible { outline:2px solid var(--main); outline-offset:2px; border-color:var(--main); }
.loginswitch { margin-top:14px; text-align:center; }
.linklike { background:none; border:none; color:var(--main); cursor:pointer; font-family:inherit; font-size:inherit;
  text-decoration:underline; text-underline-offset:3px; padding:0; }
.donate { color:var(--main) !important; text-decoration:none; }
.donate:hover { text-decoration:underline; }

/* ---------- Einstellungen ----------
   Karten laut Styleguide (Radius 12, Padding 24, Kontrast über Flächen statt Schatten);
   Zeilen: Beschriftung links, Bedienelement rechts; Checkboxen als Kippschalter. */
/* Sprungmarken-Leiste: reine Navigationshilfe. BEWUSST NICHT sticky — bei langen Karten
   (z.B. Darstellung mit 10 Zeilen) würde eine dauerhaft fixierte Leiste sonst mitten durch
   die Karte "schneiden" und Zeilen dahinter verdecken, während man durch die Karte scrollt.
   Stattdessen eine ruhige, einmalige Leiste oben, die per Anker zur Karte springt. */
.setjump { display:flex; flex-wrap:wrap; gap:2px; margin:-4px 0 18px; padding:8px 0; }
.setjump a { color:var(--sub); font-size:12px; text-decoration:none; padding:6px 12px; border-radius:8px;
  border:1px solid transparent; transition:color .15s, background .15s, border-color .15s; }
.setjump a:hover { color:var(--text); background:color-mix(in srgb, var(--text) 7%, transparent); }
.setblock { background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:24px; margin-bottom:14px; scroll-margin-top:80px; }
.setblock h3 { font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--main); margin-bottom:16px; }
.row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0; padding:9px 0;
  font-size:13px; color:var(--text); cursor:pointer; }
.row + .row, .row + p + .row { border-top:1px solid color-mix(in srgb, var(--line) 45%, transparent); }
.row > span { flex:1 1 auto; }
/* Kippschalter statt roher Checkbox */
.row input[type=checkbox] { appearance:none; -webkit-appearance:none; flex:none; width:36px; height:20px;
  border-radius:20px; background:var(--line); border:none; position:relative; cursor:pointer;
  transition:background .15s; margin:0; }
.row input[type=checkbox]::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--text); transition:transform .15s, background .15s; }
.row input[type=checkbox]:checked { background:var(--main); }
.row input[type=checkbox]:checked::after { transform:translateX(16px); background:var(--bg); }
.setblock p.muted { margin:2px 0 8px; }
input.num { width:72px; background:var(--bg); border:1px solid var(--line); color:var(--text); font-family:inherit;
  padding:6px 9px; border-radius:7px; font-size:13px; flex:none; }
input.num:focus-visible { outline:2px solid var(--main); outline-offset:2px; border-color:var(--main); }
select.num { flex:none; padding:6px 9px; font-size:13px; }

/* ---------- Anmelde-/Ladeansicht (Cloudflare Access davor) ---------- */
.auth { position:fixed; inset:0; background:var(--bg); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.authbox { width:360px; max-width:100%; display:flex; flex-direction:column; gap:12px; }
.autherr { color:var(--error); font-size:12px; min-height:15px; }

/* ---------- Rechtliches / Footer ----------
   Im normalen Seitenfluss (statt fixed) — schwebt nicht mehr über scrollendem
   Inhalt wie der Statistik; body ist flex-column, main flex:1 drückt ihn ans Ende. */
footer.legal { display:flex; gap:8px; justify-content:center;
  align-items:center; padding:20px 12px 24px; font-size:12px; color:var(--sub); }
footer.legal a { color:var(--sub); text-decoration:none; }
footer.legal a:hover { color:var(--main); }
footer.legal .sepdot { opacity:.5; }
.footerlink { font-size:inherit; color:var(--sub) !important; text-decoration:none !important; padding:0; }
.footerlink:hover { color:var(--main) !important; }
.authlegal { margin-top:10px; text-align:center; }
.authlegal a { color:var(--sub); text-decoration:underline; text-underline-offset:3px; }
.authlegal a:hover { color:var(--main); }
main { padding-bottom:40px; }
.btn.danger { border-color:color-mix(in srgb, var(--error) 45%, var(--line)); color:var(--error); }
.btn.danger:hover { border-color:var(--error); background:color-mix(in srgb, var(--error) 12%, transparent); color:var(--error); }
.delrow { margin-top:18px; }

/* ---------- Konto-Dropdown (Gast/angemeldet, ersetzt die alten Einzelelemente) ---------- */
.acctbtn { display:inline-flex !important; align-items:center; gap:7px; }
.acctavatar { width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--main) 22%, var(--bg2)); color:var(--main); }
.acctavatar svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.acctavatar.on { background:var(--main); }
.acctavatar.on svg { display:none; }
.acctavatar.on::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--bg); }
.acctico { width:16px; height:16px; margin-right:9px; vertical-align:-3px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#accountMenu button { display:flex; align-items:center; }

/* ---------- Eigener-Text-Modal ---------- */
.modal { position:fixed; inset:0; background:color-mix(in srgb, var(--bg) 75%, transparent); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; z-index:45; padding:20px; }
.modalbox { width:560px; max-width:100%; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:24px; }
.modalbox h3 { margin-bottom:8px; font-size:15px; }
.modalbox textarea { width:100%; height:200px; margin:14px 0; resize:vertical; background:var(--bg); border:1px solid var(--line);
  color:var(--text); font-family:inherit; font-size:14px; line-height:1.6; padding:14px; border-radius:10px; }
.modalbox textarea:focus-visible { outline:2px solid var(--main); outline-offset:2px; border-color:var(--main); }
.modalact { display:flex; justify-content:flex-end; gap:10px; }

/* ---------- Versteckte Eingabe-Erfassung (robust gegen Dead-Keys / Accent-Popup) ---------- */
.cap { position:fixed; top:0; left:0; width:1px; height:1px; opacity:0; border:none; outline:none;
  background:transparent; color:transparent; caret-color:transparent; padding:0; margin:0; z-index:-1; font-size:16px; }

/* ---------- On-Screen-Tastatur (Herzstück) ---------- */
/* bewusst breiter als <main> (das für den Lesetext auf 820px begrenzt ist):
   die Tastatur bricht per 100vw-Trick aus diesem Rahmen aus, damit größere
   Layouts (100/1800) nicht unnötig zusammengequetscht/abgeschnitten werden. */
.kbwrap { width:100vw; display:flex; justify-content:center; margin:34px calc(50% - 50vw) 4px; overflow-x:auto; }
.kbwrap.hidden { display:none; }
.keyboard { --u:38px; --g:6px; display:flex; gap:16px; align-items:flex-start; }
@media (max-width:1180px) { .keyboard { --u:32px; --g:5px; gap:12px; } }
@media (max-width:980px)  { .keyboard { --u:27px; --g:4px; gap:9px; } }
.kbleft { display:flex; flex-direction:column; gap:var(--g); }
.kbrow { display:flex; gap:var(--g); }
.key { height:var(--u); min-width:var(--u); border-radius:8px; background:var(--surface);
  border:1px solid var(--line); color:var(--sub); display:flex; align-items:center; justify-content:center;
  font-size:11px; line-height:1; padding:0 4px; position:relative; flex:0 0 auto;
  transition:background .09s ease, color .09s ease, border-color .09s ease, box-shadow .09s ease; }
.key.wide { font-size:10px; letter-spacing:.3px; color:color-mix(in srgb, var(--sub) 75%, transparent); }
.key.home::after { content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  width:12px; height:2px; border-radius:2px; background:var(--sub); opacity:.65; }
.key.next { background:var(--main); color:var(--bg); border-color:var(--main); font-weight:600;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--main) 22%, transparent); }
.key.modnext { background:color-mix(in srgb, var(--main) 20%, var(--surface));
  color:var(--text); border-color:color-mix(in srgb, var(--main) 55%, var(--line)); }
.kbcluster { display:flex; flex-direction:column; justify-content:space-between; gap:var(--g); align-self:stretch; }
.kbnav { display:grid; grid-template-columns:repeat(3, var(--u)); gap:var(--g); }
.kbarrows { display:grid; grid-template-columns:repeat(3, var(--u)); gap:var(--g); }
.kbarrows .ar { height:var(--u); }
.kbarrows .up { grid-column:2; grid-row:1; } .kbarrows .left { grid-column:1; grid-row:2; }
.kbarrows .down { grid-column:2; grid-row:2; } .kbarrows .right { grid-column:3; grid-row:2; }
.kbnumpad { display:grid; grid-template-columns:repeat(4, var(--u)); grid-auto-rows:var(--u); gap:var(--g); }
.kbnumpad .key { height:auto; }
.kbnumpad.active-region { outline:2px solid color-mix(in srgb, var(--main) 45%, transparent); outline-offset:8px; border-radius:10px; }
@media (max-width:760px) { .keyboard { --u:23px; --g:3px; gap:7px; } }

/* ---------- Buch-Fortschritt ---------- */
.bookbar { width:100%; display:flex; align-items:center; gap:12px; margin-bottom:20px; color:var(--sub); font-size:12px; }
.bookbar .btitle { color:var(--text); }
.bookbar .track { flex:1 1 auto; height:3px; background:var(--line); border-radius:2px; overflow:hidden; }
.bookbar .track > div { height:3px; background:var(--main); opacity:.8; }
.bookbar.hidden { display:none; }

/* ---------- Zen ---------- */
body.zen .keystrip, body.zen .cfgbar, body.zen .kbwrap { display:none !important; }
#zenBtn.active { color:var(--main); }

/* ---------- Rechtstexte (Impressum / Datenschutz) ---------- */
.doc { max-width:760px; margin:0 auto; padding:40px 30px 100px; }
.doc .back { color:var(--sub); text-decoration:none; font-size:13px; }
.doc .back:hover { color:var(--main); }
.doc h1 { font-size:24px; font-weight:600; margin:24px 0 8px; }
.doc h2 { font-size:15px; font-weight:600; margin:28px 0 8px; color:var(--text); }
.doc p, .doc li { color:var(--text); font-size:14px; line-height:1.7; }
.doc .sub { color:var(--sub); }
.doc ul { margin:6px 0 6px 20px; }
.doc a { color:var(--main); }
.doc .ph { color:var(--main); background:color-mix(in srgb, var(--main) 12%, transparent); padding:0 4px; border-radius:4px; }
.doc hr { border:none; border-top:1px solid var(--line); margin:26px 0; }

/* ---------- Lektionen ---------- */
.lessonsgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; margin-top:18px; }
.lessoncard { display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer;
  font-family:inherit; transition:border-color .15s, transform .1s; }
.lessoncard:hover { border-color:var(--main); transform:translateY(-1px); }
.lessoncard .ln { font-size:14px; font-weight:600; color:var(--text); }
.lessoncard .ld { font-size:12px; color:var(--sub); line-height:1.5; }
.lessoncard .lgo { font-size:11px; color:var(--main); margin-top:4px; letter-spacing:.3px; }

/* ---------- Wöchentliche Liga ---------- */
.boardwrap { overflow-x:auto; }
table.board { width:100%; border-collapse:collapse; font-size:13px; font-variant-numeric:tabular-nums; }
table.board th { text-align:right; font-weight:500; font-size:10px; letter-spacing:1px; text-transform:uppercase;
  color:var(--sub); padding:0 10px 12px; white-space:nowrap; }
table.board th.l, table.board td.l { text-align:left; }
table.board td { text-align:right; padding:10px; border-top:1px solid var(--line); color:var(--text); white-space:nowrap; }
table.board td.rank { color:var(--sub); width:28px; }
table.board tr.mine td { color:var(--main); }
table.board tr.mine td.l { font-weight:600; }
.bmine { font-size:10px; color:var(--bg); background:var(--main); padding:1px 6px; border-radius:20px; margin-left:6px; letter-spacing:.5px; }
.leaguehead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.leaguehead h3 { display:flex; align-items:center; gap:10px; margin:0; }
.leaguedesc { margin-top:6px; max-width:64ch; }
/* Stufen-Badge: dezente Pixel-Kachel in der Stufenfarbe (Bronze … Mint = Brand-Akzent) */
.tierbadge { font-size:10px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  padding:3px 8px; border-radius:4px; color:var(--bg); background:var(--sub); }
.tierbadge[data-tier="0"] { background:#b08d57; }
.tierbadge[data-tier="1"] { background:#9aa5b1; }
.tierbadge[data-tier="2"] { background:#d4a017; }
.tierbadge[data-tier="3"] { background:#7fa6c9; }
.tierbadge[data-tier="4"] { background:var(--main); }
table.board.league td.pts { font-weight:600; }
table.board.league td.pts small { color:var(--sub); font-weight:400; }
/* Auf-/Abstiegszonen: dezente Tönung + beschriftete Trennzeile */
table.board.league tr.lg-up td { background:color-mix(in srgb, var(--main) 7%, transparent); }
table.board.league tr.lg-down td { background:color-mix(in srgb, var(--error) 7%, transparent); }
table.board.league tr.zonerow td { padding:2px 10px; border-top:none; text-align:left; }
table.board.league tr.zonerow span { font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:var(--main); }
table.board.league tr.zonerow.down span { color:var(--error); }

/* ---------- Onboarding (Erst-Hinweis) ---------- */
.onboard { position:absolute; left:50%; transform:translateX(-50%); top:-52px; z-index:5;
  max-width:640px; width:max-content; padding:12px 40px 12px 16px;
  background:color-mix(in srgb, var(--main) 8%, var(--bg2)); border:1px solid color-mix(in srgb, var(--main) 30%, var(--line));
  border-radius:10px; color:var(--text); font-size:13px; line-height:1.6; text-align:left; }
.onboard .onboardx { position:absolute; top:8px; right:10px; background:none; border:none; color:var(--sub);
  cursor:pointer; font-size:13px; font-family:inherit; padding:2px 4px; }
.onboard .onboardx:hover { color:var(--text); }

/* ---------- Fehlerzustand (geteilte Komponente: Tipptrainer Sync, Piano Coach/Skill-Graph) ----------
   Punkt statt Icon (Styleguide §5 "keine Emojis"), Radius/Padding wie .card/.pcard. Copy-Ton:
   was ist passiert, ist der Fortschritt sicher, was passiert automatisch — nie "Fehler" ohne
   Kontext (Spez. 11 §10 "what happened / is progress safe / what to do"). */
.errorbanner { display:flex; align-items:flex-start; gap:10px; background:var(--bg2);
  border:1px solid color-mix(in srgb, var(--error) 40%, var(--line)); border-radius:12px;
  padding:14px 16px; margin:12px 30px 16px; }
@media (max-width:640px) { .errorbanner { margin:10px 16px 14px; } }
.errorbanner .ebdot { width:8px; height:8px; border-radius:50%; background:var(--error); flex:none; margin-top:5px; }
.errorbanner .ebtext { flex:1 1 auto; line-height:1.5; font-family:var(--font-ui); font-size:13px; color:var(--text); }
.errorbanner .ebretry { background:none; border:none; color:var(--main); cursor:pointer; font-family:inherit;
  font-size:13px; text-decoration:underline; text-underline-offset:3px; padding:0; white-space:nowrap; flex:none; align-self:center; }
.errorbanner .ebretry:hover { color:var(--main-hover, var(--main)); }

/* ---------- Toast / Belohnungs-Einblendung ---------- */
.toast { position:fixed; bottom:52px; left:50%; transform:translate(-50%, 12px); z-index:70;
  padding:10px 18px; border-radius:10px; font-size:13px; letter-spacing:.2px;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; white-space:nowrap; max-width:90vw; overflow:hidden; text-overflow:ellipsis; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
.toast.unlock { border-color:color-mix(in srgb, var(--main) 55%, var(--line)); }
.toast.unlock::before { content:"+ "; color:var(--main); font-weight:600; }
.toast.milestone { border-color:color-mix(in srgb, var(--correct) 55%, var(--line)); }
.toast.milestone::before { content:"★ "; color:var(--correct); }
/* Erst-Einblick-Toast: die eine Einblendung, die das adaptive Modell für neue Nutzer:innen
   sichtbar macht — bewusst breiter/länger stehend als die kurzen Belohnungs-Toasts, mit drei
   Zeilen (Kopf/Fund/Handlung) statt einem Satz, und mit Klick-Affordanz (führt in den Coach). */
.toast.insight { white-space:normal; max-width:min(420px, 86vw); text-align:left; line-height:1.5;
  padding:16px 20px; cursor:pointer; pointer-events:auto;
  border-color:color-mix(in srgb, var(--main) 60%, var(--line)); }
.toast.insight:hover { border-color:var(--main); }
.toast.insight .tihead { font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--main); margin-bottom:8px; }
.toast.insight .tibody { color:var(--text); }
.toast.insight .ticta { margin-top:10px; font-size:12px; color:var(--main); text-decoration:underline; text-underline-offset:3px; }
/* Kurzer Scan-Effekt beim Erscheinen — der kleine "Wow"-Moment, der "hier wurde gerade etwas
   analysiert" unterstreicht, ohne dauerhaft zu animieren oder abzulenken. */
.toast.insight::after { content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none;
  background:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--main) 22%, transparent) 50%, transparent 70%);
  background-size:250% 100%; background-position:150% 0; animation:tiscan 1.1s ease-out; }
@keyframes tiscan { 0% { background-position:150% 0; opacity:1; } 100% { background-position:-50% 0; opacity:0; } }
@media (prefers-reduced-motion: reduce) { .toast.insight::after { animation:none; display:none; } }

/* ---------- Sitzungs-Rückblick: kurze, von selbst erscheinende Zusammenfassung nach einer
   Übungspause (Coach-Konzept: Training -> Analyse -> Empfehlung fürs nächste Mal). ---------- */
.sessioncard { position:fixed; right:20px; bottom:20px; z-index:71; width:min(320px, 86vw);
  background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  animation:sumIn .3s ease-out; }
.sessioncard[hidden] { display:none; }
.sessioncard h4 { font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--main); margin:0 22px 12px 0; }
.sessioncard .onboardx { position:absolute; top:12px; right:14px; }
.sumlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sumlist li { font-size:13px; line-height:1.5; color:var(--text); padding-left:20px; position:relative; }
.sumlist li::before { content:"✓"; position:absolute; left:0; color:var(--main); }
.sumlist li.warn::before { content:"!"; color:var(--warn); font-weight:700; }
.sumtip { margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--sub); }
@keyframes sumIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .sessioncard { animation:none; } }
@media (max-width:720px) { .sessioncard { right:12px; bottom:12px; left:12px; width:auto; } }

.key.justunlocked { animation:keypulse 1.5s ease-out; }
@keyframes keypulse {
  0%, 100% { background:var(--surface); border-color:var(--line); }
  20%, 60% { background:var(--main); border-color:var(--main); color:var(--bg); box-shadow:0 0 0 5px color-mix(in srgb, var(--main) 25%, transparent); }
}

/* ---------- Mobil / Touch ---------- */
/* Auf Touch-Geräten gibt es keine physische Tastatur, deren Fingerlage man lernen könnte —
   die On-Screen-Tastatur wäre nur abgeschnittener Ballast. Daher dort ausblenden. */
@media (pointer: coarse) {
  .kbwrap { display:none !important; }
}
@media (max-width: 640px) {
  .brand small { display:none; }                 /* Tagline spart auf kleinen Screens Platz */
  header.top { padding:14px 16px; gap:10px; }
  #accountLabel { max-width:26vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  main { padding:0 16px 40px; }
  #kbheat { overflow-x:auto; }                    /* Heatmap nicht abschneiden, sondern scrollbar */
  .kb .kbkey { width:34px; height:34px; font-size:12px; }
}

/* ---------- Weniger Bewegung (Barrierefreiheit) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Mehrspieler-Overlay ---------------- */
.mpscreen { position:fixed; inset:0; z-index:60; background:var(--bg);
  display:flex; align-items:flex-start; justify-content:center; overflow-y:auto; padding:32px 18px; }
.mpscreen[hidden] { display:none; }
.mpwrap { width:900px; max-width:100%; position:relative; }
.mpx { position:absolute; top:-6px; right:-4px; background:transparent; border:none; color:var(--sub);
  font-size:24px; cursor:pointer; padding:6px 10px; line-height:1; }
.mpx:hover { color:var(--text); }
.mphead { font-weight:600; letter-spacing:.5px; color:var(--text); margin-bottom:26px; font-size:18px; }
.mphead b { color:var(--main); }
.mppane[hidden] { display:none; }
.mplead { color:var(--sub); margin:0 0 24px; line-height:1.6; max-width:640px; font-size:15px; }

/* Spielauswahl */
.mpgames { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-bottom:26px; }
.mpgame { display:flex; flex-direction:column; align-items:flex-start; gap:8px; text-align:left;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:20px 18px; cursor:pointer;
  color:var(--text); transition:border-color .12s, background .12s; }
.mpgame:hover { border-color:color-mix(in srgb, var(--main) 40%, var(--line)); }
.mpgame.sel { border-color:var(--main); background:color-mix(in srgb, var(--main) 10%, var(--bg2)); }
.mpgi { font-size:30px; line-height:0; color:var(--sub); }
.mpgame.sel .mpgi, .mpgame:hover .mpgi { color:var(--main); }
/* Outline-Icons (Styleguide §6) skalieren mit der Schriftgröße des Umfelds */
.mpico { width:1em; height:1em; display:inline-block; vertical-align:-0.12em; }
.mpcrown .mpico { color:var(--main); width:1.05em; height:1.05em; vertical-align:-0.16em; }
.mpgn { font-weight:600; font-size:17px; }
.mpgd { font-size:13px; color:var(--sub); line-height:1.5; }

.mpnamerow { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; max-width:360px; }
.mpnamerow label { font-size:14px; color:var(--sub); }
.mpnamerow input, .mpjoinrow input { background:var(--bg2); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:12px 14px; font-family:inherit; font-size:16px; }
.mpactrow { display:flex; gap:12px; flex-wrap:wrap; }
.mpbtn { background:var(--bg2); color:var(--text); border:1px solid var(--line); border-radius:8px;
  padding:12px 24px; font-family:inherit; font-size:16px; cursor:pointer; transition:opacity .12s, background .12s; }
.mpbtn:hover { background:var(--surface); }
.mpbtn.primary { background:var(--main); color:var(--bg); border-color:var(--main); font-weight:600; }
.mpbtn.primary:hover { opacity:.9; background:var(--main); }
.mpbtn.primary:disabled { opacity:.4; cursor:not-allowed; }
.mpbtn.small { padding:6px 12px; font-size:13px; }
.mpor { color:var(--sub); text-align:center; margin:18px 0; letter-spacing:4px; }
.mpjoinrow { display:flex; gap:10px; justify-content:center; }
.mpjoinrow input { width:130px; text-align:center; text-transform:uppercase; letter-spacing:4px; font-weight:600; }
.mperr { color:var(--error); margin-top:14px; min-height:20px; font-size:14px; }

/* Lobby */
.mpcodebox { display:flex; align-items:center; gap:14px; margin-bottom:10px; font-size:17px; color:var(--sub); }
.mpcode { font-size:44px; letter-spacing:10px; color:var(--main); font-weight:700; font-family:var(--font-mono); }
.mpmuted { color:var(--sub); }
.mpmuted.small { font-size:14px; }
.mplobbygame { margin:18px 0; padding:14px 16px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; font-size:15px; }
.mplobbygame .mpgi { font-size:20px; vertical-align:middle; margin-right:5px; }
.mpplayers { display:flex; align-items:center; gap:18px; margin:24px 0; }
.mpp { flex:1; display:flex; align-items:center; gap:12px; background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; min-height:60px; color:var(--text); font-size:16px; }
.mpp i { color:var(--sub); font-style:italic; }
.mpvs { color:var(--sub); font-weight:600; font-size:16px; }
.mpavatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  background:var(--main); color:var(--bg); font-weight:700; font-size:15px; flex:none; }
.mpavatar.wait { background:var(--line); color:var(--sub); }
.mpself { color:var(--main); font-size:13px; }

/* Spielansicht */
.mpbars { display:flex; flex-direction:column; gap:12px; margin-bottom:30px; }
.mpbar { display:grid; grid-template-columns:170px 1fr 60px; align-items:center; gap:14px; }
.mpblabel { font-size:15px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mptrack { height:16px; background:var(--bg2); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.mpfill { height:100%; width:0; border-radius:8px; transition:width .18s ease-out; }
.mpfill.me { background:var(--main); }
.mpfill.opp { background:var(--correct); }
.mpbwpm { font-size:14px; color:var(--sub); text-align:right; font-variant-numeric:tabular-nums; }
.mptextwrap { position:relative; }
.mptext { font-size:clamp(22px, 3.4vw, 30px); line-height:1.7; letter-spacing:.3px; white-space:pre-wrap;
  word-break:normal; color:var(--sub); padding:8px 2px; user-select:none; }
.mptext .mpc { color:var(--sub); }
.mptext .mpc.ok { color:var(--correct); }
.mptext .mpc.bad { color:var(--error); background:color-mix(in srgb, var(--error) 22%, transparent); border-radius:3px; }
.mptext .mpc.cur { color:var(--text); border-bottom:2px solid var(--main); }
.mpcount { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:72px; font-weight:800; color:var(--main); background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-radius:12px; backdrop-filter:blur(2px); }
.mpcapture { position:absolute; opacity:0; width:1px; height:1px; border:0; padding:0; pointer-events:none; }
.mpstatus { margin-top:20px; color:var(--sub); min-height:22px; }

/* Ergebnis */
.mpresulthead { font-size:32px; font-weight:700; margin-bottom:26px; }
.mpresulthead.win { color:var(--correct); }
.mpresulthead.lose { color:var(--sub); }
.mpresulthead.tie { color:var(--main); }
.mpresultbody { margin-bottom:30px; }
.mprow { display:flex; align-items:center; gap:18px; padding:16px 18px; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; margin-bottom:12px; font-size:16px; }
.mprow.win { border-color:var(--main); background:color-mix(in srgb, var(--main) 10%, var(--bg2)); }
.mprname { flex:1; font-weight:600; }
.mprstat { color:var(--sub); font-size:15px; font-variant-numeric:tabular-nums; }
.mprstat b { color:var(--text); font-size:18px; }
.mpteam { display:flex; gap:18px; margin-bottom:18px; }
.mpstat { flex:1; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:16px 18px; text-align:center; }
.mpstat span { display:block; font-size:13px; color:var(--sub); margin-bottom:5px; }
.mpstat b { font-size:30px; color:var(--main); }

@media (max-width:620px) {
  .mpgames { grid-template-columns:1fr; }
  .mpbar { grid-template-columns:96px 1fr 42px; gap:8px; }
  .mprow { flex-wrap:wrap; gap:10px; }
}

/* ---------------- Echo Mode (TASK-03) — nutzt .mpwrap/.mppane/.mpbtn/.mplead/.mpstatus/
   .mpresulthead vom Duell-Overlay mit, nur Diff/Optionen/Exposure sind eigene Klassen.
   Diff-Beschriftungen kommen aus echo.js/STR — hier steht bewusst KEIN sprachlicher content. */
/* Sanfter Phasenwechsel: kurzes Einblenden bei jedem Panel-Wechsel. Läuft nur in diesem Overlay;
   die globale prefers-reduced-motion-Regel (s. oben) setzt die Dauer auf ~0. */
#echoScreen .mppane { animation:ecpane .22s ease-out; }
@keyframes ecpane { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
/* Sichtbare Fokus-Zustände für alle Bedienelemente des Modus (Tastatur-Nutzer) */
#echoScreen .mpbtn:focus-visible, #echoScreen select:focus-visible,
#echoScreen input:focus-visible, #echoScreen summary:focus-visible {
  outline:2px solid var(--main); outline-offset:2px; }
#echoScreen .mpbtn.big { padding:12px 26px; font-size:16px; }
/* Titel mit Modus-Icon (dasselbe Echo-Wellen-Motiv wie der Nav-Button) */
.echead { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.echead .ecico { width:26px; height:26px; color:var(--main); flex:0 0 auto; }
/* Längere Lesetexte in Inter (Styleguide: Fließtext UI-Schrift, Mono nur Headlines/Zahlen) */
.eclead, .ecdetails p, .ecsteps span { font-family:var(--font-ui); }
/* "So funktioniert's" auf einen Blick: drei ruhige Schritt-Karten */
.ecsteps { list-style:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  padding:0; margin:0 0 22px; }
.ecsteps li { background:var(--bg2); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.ecstepnum { font-style:normal; width:22px; height:22px; border-radius:50%;
  background:color-mix(in srgb, var(--main) 18%, transparent); color:var(--main);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.ecsteps b { font-size:14px; color:var(--text); }
.ecsteps span { font-size:13px; color:var(--sub); line-height:1.5; }
/* Aufklappbare Warum-Erklärung: ausführlich verfügbar, ohne den Einstieg zu erschlagen */
.ecdetails { border:1px solid var(--line); border-radius:10px; background:var(--bg2);
  margin:0 0 26px; max-width:720px; }
.ecdetails summary { cursor:pointer; padding:13px 16px; font-size:14px; font-weight:600;
  color:var(--text); list-style:none; display:flex; align-items:center; gap:10px;
  border-radius:10px; transition:background .12s; }
.ecdetails summary::-webkit-details-marker { display:none; }
.ecdetails summary::before { content:"▸"; color:var(--main); transition:transform .15s; }
.ecdetails[open] summary::before { transform:rotate(90deg); }
.ecdetails summary:hover { background:var(--surface); }
.ecdetails p { margin:0; padding:2px 16px 14px; font-size:14px; color:var(--sub);
  line-height:1.65; max-width:660px; }
.ecoptshead { font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--sub);
  margin-bottom:10px; }
.ecopts { display:flex; flex-direction:column; gap:14px; margin:0 0 28px; max-width:480px; }
.ecopt { display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:14px; color:var(--text); }
.ecopt input[type="range"] { width:150px; accent-color:var(--main); }
.ecmultwrap { display:flex; align-items:center; gap:10px; }
.ecmultwrap b { color:var(--main); font-variant-numeric:tabular-nums; min-width:38px; text-align:right; }
.ecopt select { background:var(--bg2); color:var(--text); border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; font-family:inherit; font-size:14px; }
/* Phasen-Kopf: ruhiges Wortzahl-Abzeichen statt Zahlen-Bombardement */
.ecphasehead { display:flex; justify-content:center; margin-bottom:8px; }
.ecspanbadge { font-size:13px; color:var(--sub); border:1px solid var(--line); border-radius:999px;
  padding:4px 14px; letter-spacing:.4px; background:var(--bg2); }
.ecexposure { font-size:clamp(24px, 3.6vw, 34px); line-height:1.6; text-align:center; color:var(--text);
  max-width:720px; margin:36px auto; min-height:2.4em; display:flex; align-items:center; justify-content:center; }
.ecinput { display:block; width:100%; max-width:720px; margin:30px auto 0; background:var(--bg2);
  border:1px solid var(--line); border-radius:10px; color:var(--text); font-family:inherit;
  font-size:clamp(18px, 2.6vw, 24px); padding:16px 18px; text-align:center; }
.ecinput:focus { outline:2px solid var(--main); outline-offset:2px; }
.ecactions { display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:720px; margin:18px auto 0; }
.eckeys { font-size:13px; color:var(--sub); }
/* Spannen-Änderung: deutlich, aber ruhig — kein Konfetti (CLAUDE.md §2.8) */
.ecnotice { font-size:15px; font-weight:600; margin:-10px 0 20px; padding:10px 16px; border-radius:9px;
  display:inline-block; }
.ecnotice.up { color:var(--correct); background:color-mix(in srgb, var(--correct) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--correct) 40%, transparent); }
.ecnotice.down { color:var(--warn); background:color-mix(in srgb, var(--warn) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
/* Diff: Form/Beschriftung/Symbol statt Farbe allein (CLAUDE.md §8) */
.ecdiff { font-size:clamp(17px, 2.4vw, 22px); line-height:2.2; margin:20px 0; }
.ecw { display:inline-block; margin:3px 8px 3px 0; padding:2px 8px; border-radius:7px; }
.ecw .ecwt { font-weight:500; }
.ecw .ecmark { font-style:normal; margin-left:5px; font-weight:700; }
.ecw .ectag { font-style:normal; font-size:11px; color:var(--sub); margin-left:6px; letter-spacing:.3px;
  text-decoration:none; display:inline-block; }
.ecw.match .ecwt { color:var(--text); }
.ecw.match .ecmark { color:var(--correct); }
.ecw.typo { border-bottom:2px dotted var(--warn); }
.ecw.typo .ecwt { color:var(--warn); }
.ecw.sub .ecwt { color:var(--error); text-decoration:line-through; text-decoration-thickness:2px; }
.ecw.sub .ectag { color:var(--text); font-size:inherit; font-weight:600; }
.ecw.missing { border:1px dashed var(--line); background:var(--bg2); }
.ecw.missing .ecwt { color:var(--sub); }
.ecw.extra { background:color-mix(in srgb, var(--warn) 14%, transparent); }
.ecw.extra .ecwt { color:var(--warn); }
.ecmetrics { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0; }
.ecmetric { background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:12px 16px;
  min-width:118px; flex:0 1 auto; }
.ecmetric span { display:block; font-size:12px; color:var(--sub); margin-bottom:4px; }
.ecmetric b { font-size:20px; color:var(--main); font-variant-numeric:tabular-nums; }
.ecmetric.big { border-color:color-mix(in srgb, var(--main) 45%, var(--line));
  background:color-mix(in srgb, var(--main) 6%, var(--bg2)); }
.ecmetric.big b { font-size:28px; }
.eclimitnote { font-size:13px; color:var(--sub); margin-top:18px; max-width:640px; line-height:1.6; }
@media (max-width:620px) {
  .ecopts { max-width:none; }
  .ecsteps { grid-template-columns:1fr; }
  .ecmetrics { gap:8px; }
  .ecmetric { min-width:calc(50% - 8px); flex:1 1 calc(50% - 8px); padding:10px 12px; }
  .ecactions { flex-direction:column; align-items:stretch; text-align:center; }
}

/* Google-Login-Button im Anmelde-Dialog */
.oauthsep { display:flex; align-items:center; gap:12px; margin:16px 0 10px; color:var(--sub); font-size:13px; }
.oauthsep::before, .oauthsep::after { content:""; flex:1; height:1px; background:var(--line); }
.oauthbtn { display:flex; width:100%; align-items:center; justify-content:center; gap:10px;
  background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:8px;
  padding:11px 16px; font-family:inherit; font-size:15px; cursor:pointer; }
.oauthbtn:hover { background:var(--surface); }
.oauthbtn .gicon { flex:none; display:block; }

/* Spenden-Karte in den Einstellungen: freundlich hervorgehoben, aber nicht aufdringlich */
.donateblock { display:flex; gap:18px; align-items:flex-start; margin-top:26px; padding:22px 22px 20px;
  background:color-mix(in srgb, var(--main) 7%, var(--bg2));
  border:1px solid color-mix(in srgb, var(--main) 30%, var(--line)); border-radius:14px; }
.donateicon { font-size:26px; line-height:1; flex:none; margin-top:4px; color:var(--main); font-weight:600; letter-spacing:-2px; }
.donatebody h3 { margin-bottom:8px; color:var(--text); text-transform:none; letter-spacing:.2px;
  font-size:16px; font-weight:600; }
.donatebody p { margin:0 0 14px; line-height:1.55; max-width:520px; }
.donatebtn { display:inline-block; background:var(--main); color:var(--bg); border-color:var(--main);
  font-weight:600; text-decoration:none; padding:10px 20px; border-radius:8px; }
.donatebtn:hover { opacity:.9; color:var(--bg); }
.setversion { text-align:center; margin:22px 0 8px; font-variant-numeric:tabular-nums; letter-spacing:.4px; }

/* Spielart-Wahl in der Mehrspieler-Lobby (nur Host) */
.mppickhint { font-size:12px; color:var(--sub); margin-bottom:8px; }
.mpgamestrip { display:flex; flex-wrap:wrap; gap:8px; }
.mpgamepill { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:20px;
  background:var(--bg2); border:1px solid var(--line); color:var(--text); font-family:inherit;
  font-size:13px; cursor:pointer; transition:border-color .12s, background .12s; }
.mpgamepill:hover { border-color:color-mix(in srgb, var(--main) 45%, var(--line)); }
.mpgamepill.sel { border-color:var(--main); background:color-mix(in srgb, var(--main) 12%, var(--bg2)); color:var(--main); font-weight:500; }


/* Statistik & Liga in voller Breite (MonkeyType-artig); Trainer bleibt kompakt. */
body.wide main { max-width:1240px; justify-content:flex-start; padding-top:34px; }
body.wide .tilegrid { gap:30px 36px; }

/* MonkeyType-artiges Duell-Ergebnis: große Zahlen, zwei Spalten */
.mpresgrid { display:flex; align-items:center; justify-content:center; gap:40px; margin:10px 0 26px; flex-wrap:wrap; }
.mpvsbig { color:var(--sub); font-size:18px; opacity:.6; }
.mpcol { text-align:center; min-width:180px; padding:22px 26px; border-radius:16px; }
.mpcol.win { background:color-mix(in srgb, var(--main) 8%, transparent); }
.mpcname { color:var(--sub); font-size:14px; margin-bottom:10px; }
.mpcol.win .mpcname { color:var(--main); font-weight:600; }
.mpcwpm { font-size:clamp(44px, 6vw, 64px); font-weight:600; line-height:1; letter-spacing:-2px; color:var(--main); }
.mpcwpm span, .mpcacc span { display:block; font-size:11px; font-weight:400; letter-spacing:.8px; color:var(--sub); margin-top:6px; }
.mpcacc { font-size:clamp(26px, 3.4vw, 36px); font-weight:500; line-height:1; color:var(--text); margin-top:16px; }
.mpcsub { color:var(--sub); font-size:13px; margin-top:14px; font-variant-numeric:tabular-nums; }

/* ---------------- Nemesis: Boss aus den eigenen Schwächen ----------------
   Teilt sich Rahmen/Buttons/Textfeld-Klassen (.mpwrap/.mpbtn/.mptext/…) mit dem
   Mehrspieler-Overlay oben — nur die boss-eigenen Elemente (Golem, Balken, Riss-
   Anzeige) sind neu. */
.nmico.big { width:34px; height:34px; color:var(--main); margin-bottom:14px; }
.nmcount { color:var(--sub); font-size:14px; margin:-8px 0 22px; font-variant-numeric:tabular-nums; }
.nmboss { display:flex; align-items:center; gap:28px; margin-bottom:22px; flex-wrap:wrap; }
/* Blockiger Golem aus demselben Pixel-Raster wie die Bildmarke (Styleguide §2) */
.nmgolem { display:grid; grid-template-columns:repeat(7, 1fr); grid-template-rows:repeat(8, 1fr);
  gap:3px; width:112px; height:128px; flex:none; }
.nmgolem.shattered { pointer-events:none; }
.nmcell { background:var(--main); border-radius:2px; }
.nmgolem.hit .nmcell { animation:nmhit .28s ease; }
@keyframes nmhit { 30% { background:var(--error); transform:scale(1.08); } 100% { background:var(--main); transform:none; } }
.nmbars { flex:1 1 260px; display:flex; flex-direction:column; gap:10px; min-width:220px; }
.nmbarrow { display:grid; grid-template-columns:84px 1fr; align-items:center; gap:12px; }
.nmbarrow span { font-size:13px; color:var(--sub); white-space:nowrap; }
.nmcrackrow { margin-top:2px; margin-left:96px; }   /* .nmbars ist flex-column: Einrückung statt Grid-Spalte */
.nmcracktrack { height:5px; background:var(--bg2); border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.nmcrackfill { height:100%; width:0; background:var(--warn); transition:width .18s ease-out; }
.nmhint { color:var(--sub); font-size:14px; margin:0 0 18px; }
.nmtrained { color:var(--main); font-size:14px; margin-top:-14px; }
@media (prefers-reduced-motion: reduce) {
  .nmgolem.hit .nmcell { animation:none; }
}

/* ---------------- Arcade-Hub (games.js: Tightrope, Pulse, Blackout) ----------------
   Teilt sich Rahmen/Karten/Textfeld-Klassen (.mpwrap/.mpgame/.mptext/…) mit dem
   Mehrspieler-Overlay — hier nur die spielspezifischen Elemente. */
.gmbest { font-size:12px; color:var(--main); font-variant-numeric:tabular-nums; }
.gmres { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; }
.gmres b { font-size:clamp(44px, 6vw, 64px); font-weight:600; color:var(--main); line-height:1; letter-spacing:-2px; }
.gmres span { color:var(--sub); font-size:15px; }
.gmscore { color:var(--sub); font-size:15px; font-variant-numeric:tabular-nums; }
.gmscore b { color:var(--main); font-size:22px; }

/* Tightrope: Seil + blockiger Läufer (gleiches Pixel-Vokabular wie Bildmarke/Golem) */
.gmtr { margin-bottom:20px; }
.gmrope { position:relative; height:64px; border-bottom:2px solid var(--line); margin-bottom:12px; }
.gmwalker { position:absolute; left:50%; bottom:0; width:18px; height:44px; margin-left:-9px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  transform-origin:50% 100%; transition:transform .18s ease; }
.gmwcell { width:12px; border-radius:2px; background:var(--main); }
.gmwcell.h { height:12px; width:12px; border-radius:50%; }
.gmwcell.b { height:13px; }
@keyframes gmshake { 25% { margin-left:-11px; } 75% { margin-left:-7px; } }
.gmwalker.shaky { animation:gmshake .3s ease infinite; }
.gmtrmeta { display:flex; align-items:center; gap:18px; }
.gmwobble { display:inline-flex; gap:6px; }
.gmwobble i { width:10px; height:10px; border-radius:50%; background:var(--bg2); border:1px solid var(--line); }
.gmwobble i.on { background:var(--error); border-color:var(--error); }

/* Pulse: pochender Kreis im gemessenen Takt */
.gmpl { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.gmbeat { width:26px; height:26px; border-radius:50%; border:2px solid var(--main); opacity:.35; flex:none; }
@keyframes gmbeat { 0% { transform:scale(.7); opacity:.9; } 100% { transform:scale(1.15); opacity:.25; } }
.gmbeat.run { animation:gmbeat 400ms ease-out infinite; }
.gmtime { color:var(--sub); font-size:14px; margin-left:auto; font-variant-numeric:tabular-nums; }

/* Blackout: Dunkel-Overlay mit rundem Lichtkegel (CSS-Maske um die Cursor-Position) */
.gmbl { display:flex; align-items:center; gap:18px; margin-bottom:20px; }
.gmfueltrack { flex:1; }
.gmstage.dark .gmlight { position:relative; }
.gmstage.dark .gmlight::after {
  content:""; position:absolute; inset:-8px; pointer-events:none; border-radius:8px;
  background:radial-gradient(circle var(--lr, 120px) at var(--lx, 50%) var(--ly, 50%),
    transparent 0%, transparent 62%, color-mix(in srgb, var(--bg) 96%, transparent) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .gmwalker.shaky { animation:none; }
  .gmbeat.run { animation:none; opacity:.7; }
}

/* ---------------- Sternenkarte (Statistik): jeder Übungstag ein Stern ---------------- */
.skycard canvas { width:100%; height:200px; display:block; border-radius:10px; background:var(--bg); }
.skyhint { margin-top:10px; }

/* ---------------- Keycap-Designs (Einstellungen -> Tastatur) ----------------
   Feste Farbsets wie echte Keycap-Sets — unabhängig vom Seiten-Theme, wirksam auf
   allen Tastaturgrößen. "wide" = Modifier/Sondertasten, "next" = nächste Taste. */

/* tapr — Brand-Keycaps laut Styleguide §11: Creme-Kappen, dunkle Modifier, Mint-Akzent */
body[data-caps="tapr"] .keyboard .key { background:#DDD5BF; color:#232323; border-color:#c9c0a8;
  box-shadow:0 1.5px 0 #bdb49b; }
body[data-caps="tapr"] .keyboard .key.wide { background:#2A2C30; color:#AAA18E; border-color:#3a3d42;
  box-shadow:0 1.5px 0 #1c1e21; }
body[data-caps="tapr"] .keyboard .key.home::after { background:#6CA286; opacity:.9; }
body[data-caps="tapr"] .keyboard .key.next { background:#7FB59A; color:#0F1115; border-color:#7FB59A;
  box-shadow:0 0 0 4px rgba(127,181,154,.25); }
body[data-caps="tapr"] .keyboard .key.modnext { background:#3a4a42; color:#7FB59A; border-color:#7FB59A; }

/* blossom — weiß/rosa mit roter Beschriftung (nach dem Vorbild-Foto) */
body[data-caps="blossom"] .keyboard .key { background:#ffffff; color:#e23b5f; border-color:#f2cdd6;
  box-shadow:0 1.5px 0 #ecc2cd; }
body[data-caps="blossom"] .keyboard .key.wide { background:#f6c8d4; color:#d92b52; border-color:#eeb4c4;
  box-shadow:0 1.5px 0 #e6a8ba; }
body[data-caps="blossom"] .keyboard .key.home::after { background:#e23b5f; opacity:.8; }
body[data-caps="blossom"] .keyboard .key.next { background:#e23b5f; color:#ffffff; border-color:#e23b5f;
  box-shadow:0 0 0 4px rgba(226,59,95,.25); }
body[data-caps="blossom"] .keyboard .key.modnext { background:#fbe3e9; color:#d92b52; border-color:#e88ba1; }

/* retro — Creme/Beige mit graugrünen Modifiern (Klassiker-Look) */
body[data-caps="retro"] .keyboard .key { background:#ece8da; color:#4a4d42; border-color:#d8d3c2;
  box-shadow:0 1.5px 0 #cfc9b6; }
body[data-caps="retro"] .keyboard .key.wide { background:#b9beac; color:#3d4037; border-color:#a8ad9b;
  box-shadow:0 1.5px 0 #9ba08e; }
body[data-caps="retro"] .keyboard .key.home::after { background:#bf4d43; opacity:.85; }
body[data-caps="retro"] .keyboard .key.next { background:#bf4d43; color:#f6f2e6; border-color:#bf4d43;
  box-shadow:0 0 0 4px rgba(191,77,67,.22); }
body[data-caps="retro"] .keyboard .key.modnext { background:#d9d4c4; color:#3d4037; border-color:#bf4d43; }

/* ocean — Tiefblau mit Orange-Akzent */
body[data-caps="ocean"] .keyboard .key { background:#22304f; color:#dfe7f5; border-color:#31426b;
  box-shadow:0 1.5px 0 #1a2540; }
body[data-caps="ocean"] .keyboard .key.wide { background:#18223c; color:#8fa3c8; border-color:#28355a;
  box-shadow:0 1.5px 0 #111a30; }
body[data-caps="ocean"] .keyboard .key.home::after { background:#f5a623; opacity:.9; }
body[data-caps="ocean"] .keyboard .key.next { background:#f5a623; color:#1a2540; border-color:#f5a623;
  box-shadow:0 0 0 4px rgba(245,166,35,.25); }
body[data-caps="ocean"] .keyboard .key.modnext { background:#31426b; color:#f5a623; border-color:#f5a623; }

/* matcha — Creme mit Salbeigrün */
body[data-caps="matcha"] .keyboard .key { background:#f4f1e4; color:#4c6b52; border-color:#dfdac6;
  box-shadow:0 1.5px 0 #d5cfb9; }
body[data-caps="matcha"] .keyboard .key.wide { background:#abc4a2; color:#33502f; border-color:#98b48e;
  box-shadow:0 1.5px 0 #8aa680; }
body[data-caps="matcha"] .keyboard .key.home::after { background:#5f8f68; opacity:.85; }
body[data-caps="matcha"] .keyboard .key.next { background:#5f8f68; color:#f7f5ea; border-color:#5f8f68;
  box-shadow:0 0 0 4px rgba(95,143,104,.25); }
body[data-caps="matcha"] .keyboard .key.modnext { background:#dfe7d5; color:#33502f; border-color:#5f8f68; }

/* carbon — Anthrazit mit Orange */
body[data-caps="carbon"] .keyboard .key { background:#33363b; color:#e8e3d9; border-color:#43474d;
  box-shadow:0 1.5px 0 #26282c; }
body[data-caps="carbon"] .keyboard .key.wide { background:#26282c; color:#9aa0a8; border-color:#3a3d42;
  box-shadow:0 1.5px 0 #1c1e21; }
body[data-caps="carbon"] .keyboard .key.home::after { background:#f56b0a; opacity:.9; }
body[data-caps="carbon"] .keyboard .key.next { background:#f56b0a; color:#1f2124; border-color:#f56b0a;
  box-shadow:0 0 0 4px rgba(245,107,10,.25); }
body[data-caps="carbon"] .keyboard .key.modnext { background:#43474d; color:#f56b0a; border-color:#f56b0a; }

/* Zeit-Test: Dauer-Pillen in der Konfigzeile + Ergebnis-Overlay */
.cfgpills { display:inline-flex; align-items:center; gap:4px; }
.cfgpills button { background:transparent; border:1px solid var(--line); color:var(--sub); font-family:inherit;
  font-size:12px; padding:3px 9px; border-radius:14px; cursor:pointer; transition:color .15s, border-color .15s; }
.cfgpills button:hover { color:var(--text); border-color:color-mix(in srgb, var(--main) 45%, var(--line)); }
.cfgpills button.on { color:var(--main); border-color:var(--main); background:color-mix(in srgb, var(--main) 10%, transparent); }
.cfgpills b { color:var(--main); font-size:15px; font-weight:500; min-width:40px; text-align:center; font-variant-numeric:tabular-nums; }
/* Zeit-Test-Ergebnis: ersetzt den Tippbereich (kein Overlay über geblurrtem Text mehr).
   MonkeyType-Anordnung: große Zahlen links, Verlaufs-Chart rechts, Detailzeile darunter. */
#trainer.showresult :is(.keystrip, .cfgbar, .words, .hint, .kbwrap, .capswarn, .onboard, .bookbar, .pausenotice) { display:none !important; }
.testresult { width:100%; max-width:860px; margin:0 auto; }
.testresult[hidden] { display:none; }
.trhead { color:var(--correct); font-size:13px; font-weight:600; min-height:17px; margin-bottom:10px; letter-spacing:.6px; text-transform:lowercase; }
.trtop { display:flex; gap:36px; align-items:stretch; }
.trnums { display:flex; flex-direction:column; gap:16px; justify-content:center; flex:0 0 auto; }
.trstat .trlbl { display:block; font-size:14px; color:var(--sub); margin-bottom:2px; }
.trstat b { display:block; font-size:64px; font-weight:600; line-height:1; letter-spacing:-2px; color:var(--main); font-variant-numeric:tabular-nums; }
.trstat.acc b { font-size:40px; }
.trchartwrap { flex:1 1 auto; min-width:0; align-self:center; }
.trchartwrap canvas { display:block; width:100%; }
.trdetails { display:flex; gap:40px; margin-top:26px; flex-wrap:wrap; }
.trd span { display:block; font-size:11px; color:var(--sub); letter-spacing:.6px; margin-bottom:5px; }
.trd b { font-size:20px; font-weight:500; color:var(--main); font-variant-numeric:tabular-nums; }
.trprev { color:var(--sub); font-size:12px; margin-top:18px; min-height:15px; }
.tract { margin-top:14px; }
.trhint { color:var(--sub); font-size:11px; margin-top:12px; opacity:.7; }
@media (max-width:720px) {
  .trtop { flex-direction:column; gap:20px; }
  .trnums { flex-direction:row; gap:32px; }
  .trdetails { gap:26px; }
}

/* CapsLock-Warnung: schwebt über dem Layout (verschiebt nichts), auffällig aber ruhig */
.capswarn { position:absolute; left:50%; transform:translateX(-50%); top:-46px; z-index:6;
  background:color-mix(in srgb, var(--error) 14%, var(--bg2)); color:var(--error);
  border:1px solid color-mix(in srgb, var(--error) 45%, var(--line)); border-radius:20px;
  padding:6px 14px; font-size:12px; font-weight:600; letter-spacing:.4px; }

/* Vorschauzeile (dritte Zeile, nicht tippbar) */
.words.threeline { height:calc(3em * var(--lh)); }
.words .word.preview { opacity:.32; white-space:pre-wrap; }

/* Duell: Gegner-Caret + Ergebnis-Chart */
.mptext { position:relative; }
#mpGhost { position:absolute; left:0; top:0; width:2.5px; border-radius:2px; background:var(--correct);
  opacity:.55; transition:transform .45s linear, height .2s; pointer-events:none; }
.mpreschart { margin:4px 0 22px; }
.mpreschart canvas { width:100%; display:block; }
.mplegend { display:flex; gap:18px; justify-content:center; margin-top:8px; font-size:12px; }

/* ---------------- 3D-Keycap-Designs (fotorealistischer Look nach Mockup) ----------------
   Zusätzliche Varianten — komplett gescoped, bestehende Designs bleiben unangetastet.
   Aufbau: Gehäuse mit Innen-Bevel um die Tastatur, Tastenkappen mit Verlaufs-Oberseite,
   sichtbarer "Tastenwand" (harter Unterkanten-Schatten) und gedrückter Nächste-Taste. */
body[data-caps^="3d"] .keyboard {
  background:var(--kb-case);
  padding:16px 18px 24px; border-radius:16px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -5px 10px rgba(0,0,0,.22),
              0 18px 44px rgba(0,0,0,.42);
}
body[data-caps^="3d"] .keyboard .key {
  background:linear-gradient(180deg, var(--kb-top1), var(--kb-top2));
  color:var(--kb-legend);
  border:1px solid color-mix(in srgb, var(--kb-side) 82%, #00000022);
  border-radius:6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.06),
              0 3.5px 0 var(--kb-side), 0 5px 4px rgba(0,0,0,.30);
  align-items:flex-start; padding-top:4px;
  transition:background .09s ease, color .09s ease, box-shadow .09s ease, transform .09s ease;
}
body[data-caps^="3d"] .keyboard .key.wide {
  justify-content:flex-start; padding-left:8px;
  background:linear-gradient(180deg, var(--kb-mod1), var(--kb-mod2));
  color:var(--kb-modlegend);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.08),
              0 3.5px 0 var(--kb-modside), 0 5px 4px rgba(0,0,0,.30);
  border-color:color-mix(in srgb, var(--kb-modside) 82%, #00000022);
}
body[data-caps^="3d"] .keyboard .key.home::after { background:var(--kb-legend); opacity:.75; bottom:5px; }
/* Nächste Taste: kräftige Akzentkappe, optisch "eingedrückt" (sinkt auf die Wand) */
body[data-caps^="3d"] .keyboard .key.next {
  background:linear-gradient(180deg, var(--kb-next1), var(--kb-next2));
  color:var(--kb-nextlegend); font-weight:600;
  border-color:color-mix(in srgb, var(--kb-nextside) 85%, #00000022);
  transform:translateY(2.5px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 var(--kb-nextside), 0 2px 2px rgba(0,0,0,.28);
}
body[data-caps^="3d"] .keyboard .key.modnext {
  background:linear-gradient(180deg, color-mix(in srgb, var(--kb-next1) 35%, var(--kb-mod1)), color-mix(in srgb, var(--kb-next2) 35%, var(--kb-mod2)));
  color:var(--kb-modlegend);
}

/* blossom 3d — Creme-Gehäuse, weiße Kappen mit rosaroter Schrift, rosa Modifier (Mockup) */
body[data-caps="3d-blossom"] .keyboard {
  --kb-case:#e9e3d6;
  --kb-top1:#fdfaf2; --kb-top2:#f1ebdc; --kb-side:#cfc7b2; --kb-legend:#d64a6a;
  --kb-mod1:#f8ccd8; --kb-mod2:#efb4c5; --kb-modside:#d295a5; --kb-modlegend:#c23a5e;
  --kb-next1:#f0708f; --kb-next2:#e75c7e; --kb-nextside:#c04a66; --kb-nextlegend:#ffffff;
}
/* cream 3d — beiges Monochrom, die Nächste-Taste folgt dem Akzent des Seiten-Themes */
body[data-caps="3d-cream"] .keyboard {
  --kb-case:#ddd8cb;
  --kb-top1:#f7f3e7; --kb-top2:#eae4d3; --kb-side:#c6bfab; --kb-legend:#5c5a51;
  --kb-mod1:#e8e2d1; --kb-mod2:#dbd4c1; --kb-modside:#b8b09b; --kb-modlegend:#6d6a5f;
  --kb-next1:color-mix(in srgb, var(--main) 82%, #ffffff); --kb-next2:var(--main);
  --kb-nextside:color-mix(in srgb, var(--main) 65%, #000000); --kb-nextlegend:#ffffff;
}
/* retro 3d — Creme-Kappen mit braunen Modifiern (Mockup unten links) */
body[data-caps="3d-retro"] .keyboard {
  --kb-case:#d8d2c2;
  --kb-top1:#f6f1e2; --kb-top2:#eae3d0; --kb-side:#c4bca6; --kb-legend:#5a5346;
  --kb-mod1:#93765f; --kb-mod2:#82664f; --kb-modside:#64503d; --kb-modlegend:#f3ecdd;
  --kb-next1:#d3603e; --kb-next2:#c4512f; --kb-nextside:#9c3f24; --kb-nextlegend:#fff6ec;
}