/* 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; }

/* ---------- 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; }
/* 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 { outline:none; 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. */
.setblock { background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  padding:24px; margin-bottom:14px; }
.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 { outline:none; 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 { outline:none; 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); }

/* ---------- 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; }
}

/* 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;
}