/* 0.30.3: Fonts self-hosted (DSGVO + kein render-blockierender @import).
   Quelle: Fontsource, latin subset. Playwrite CL lädt weiterhin
   class-etp-block.php (Boot-Splash braucht sie vor diesem Stylesheet). */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/jost-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jost-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/jost-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/courier-prime-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/courier-prime-latin-700-normal.woff2') format('woff2')}

:root {
  color-scheme: light;
  /* ── Retro Schulbuch Palette ── */
  --bg: #F4EAD5; --surface: #FBF6EC; --surface2: #F4EAD5; --surface3: var(--surface2);
  --border: #2B2018; --border2: #2B2018;
  --text: #2B2018; --dim: #6E5D49; --mid: #9c8a70;
  --accent: #D79A2B; --accent-d: rgba(215,154,43,.15); --accent-d2: rgba(215,154,43,.07);
  --display: 'Jost', sans-serif;
  --green: #1E6E6A; --green-d: #d8ece9;
  --red: #C8402E; --red-d: #fbe3de;
  --blue: #4E6E8A; --blue-d: rgba(78,110,138,.12); /* Schieferblau statt Leuchtblau */
  /* ── ERWEITERTE SCHULBUCH-PALETTE (0.27 Design-Kontrakt) ──
     Semantik-Farben (Zeitformen, Kategorien) sind gedämpfte
     Vintage-Tinten, keine Leuchtfarben. Blau=Schiefer, Lila=Pflaume,
     Terracotta ist offizieller dritter Warmton.
     KONTRAKT: Neue Styles nutzen NUR var(--…)-Tokens. Prüfung:
     python3 tools/design-lint.py vor jedem Build. */
  --purple: #7A5464; --purple-d: rgba(122,84,100,.12);
  --terracotta: #C75C2A; --terracotta-d: rgba(199,92,42,.12);
  --mono: 'Courier Prime', monospace;
  --sans: 'Jost', sans-serif;
  /* 0.24.2: Schulbuch-Lesetext — eine Variable steuert alle Fließtexte.
     Alternative Schreibmaschine: --serif: 'Courier Prime', monospace; */
  /* 0.30.3: Garamond stillgelegt — bei 14px auf dem iPhone zu zart,
     Erklärstimme wandert auf die Schiefertafel. --serif bleibt als
     Variable erhalten (~31 Stellen), zeigt aber auf die Grotesk.
     Nach Geräte-Abnahme: Stellen schrittweise auf var(--sans) umziehen,
     dann Variable entfernen. */
  --serif: 'Jost', sans-serif;
  /* ── RADIUS-SKALA (0.27 Design-Kontrakt) ──
     xs 4 (Fills/Bars) · s 10 (Badges/Mini) · r 16 (Karten/Buttons)
     · l 22 (Sheets/große Inputs) · 50% rund · 999px Pill. */
  --r-xs: 4px; --r-s: 10px; --r: 16px; --r-l: 22px;
  --accent-h: #C08722; --dim2: var(--dim); --bg-soft: var(--surface2); /* Alt-Referenzen geheilt */
  /* ── TYPO-HIERARCHIE (0.27 Design-Kontrakt) ──
     H1 Screen-Titel: Jost 26px/800 · H2 Sheet-/Sektionstitel: 20px/800
     · H3 Karten-Titel: 17px/700 · Body: 14px · Eyebrow: Courier 11px/700
     uppercase ls .12em · Display-Zahlen (36px+) sind bewusste Momente. */
  /* ── Retro-spezifisch ── */
  --bw: 2.5px;           /* Border-Stärke */
  --shadow: 3px 3px 0 #2B2018;
  --shadow-lg: 4px 4px 0 #2B2018;
  --shadow-accent: 3px 3px 0 #D79A2B;
  --shadow-green: 3px 3px 0 #1E6E6A;
  --shadow-red: 3px 3px 0 #C8402E;
  --bg-pattern: radial-gradient(var(--surface2) 1px, transparent 1.4px);
  --bg-pattern-size: 22px 22px;

  /* ── 0.36.2: UNTERE SICHERHEITSZONE — Single Source of Truth ──
     Die Nav-Hoehe stand vorher an sechs Stellen als hartes 64px, das
     Screen-Padding an vier Stellen mit widerspruechlichen Werten
     (200px in Zeile 62/842, spaeter still auf 100px reduziert — der
     spaetere Block gewann, ohne dass es jemandem auffiel). Genau
     deshalb hing der letzte Button unter der Nav.
     Ab jetzt: alles leitet sich von diesen vier Tokens ab.
       --etp-nav-h      Hoehe der Bottom-Nav (Icons + Labels)
       --etp-safe-b     iPhone Home-Indicator, sonst 0
       --etp-bnav-total Was die Nav real verdeckt
       --etp-bottom-safe Was jeder Screen unten freihalten muss     */
  --etp-nav-h: 64px;
  --etp-safe-b: env(safe-area-inset-bottom, 0px);
  --etp-bnav-total: calc(var(--etp-nav-h) + var(--etp-safe-b));
  --etp-content-gap: 96px;   /* Luft zwischen letztem Element und Nav */
  --etp-bottom-safe: calc(var(--etp-bnav-total) + var(--etp-content-gap));
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); background-image: var(--bg-pattern); background-size: var(--bg-pattern-size); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.5; min-height: 100vh; }
.screen { display: none; max-width: 700px; margin: 0 auto; box-sizing: border-box; min-height: calc(100dvh + 60px); padding: 32px 20px var(--etp-bottom-safe); }
.screen.active { display: block; }

/* ── TYPOGRAPHY ── */
.eyebrow { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
h1 { font-size: 26px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; line-height: 1.1; }
h1 strong { font-weight: 800; }
h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.section-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--dim) !important; border-bottom: var(--bw) solid var(--border); padding-bottom: 8px; margin-bottom: 14px; }

/* ── CARDS ── */
.card { background: var(--surface) !important; border: var(--bw) solid var(--border); border-radius: var(--r); padding: 20px; color: var(--text) !important; box-shadow: var(--shadow); }
.card + .card { margin-top: 14px; }

/* ── BUTTONS ── */
.btn { border: var(--bw) solid var(--border); border-radius: var(--r); cursor: pointer; font-family: var(--sans); font-weight: 800; transition: all .15s; box-shadow: var(--shadow); }
.btn:active { box-shadow: none; transform: translate(1px, 1px); }
.btn-primary { background: var(--accent); color: var(--text); padding: 13px 20px; font-size: 16px; letter-spacing: .01em; }
.btn-primary:hover { opacity: .92; }
.btn-primary:disabled { background: var(--surface3); color: var(--mid); cursor: not-allowed; box-shadow: none; border-color: var(--mid); opacity: .5; }
.btn-primary.full { width: 100%; padding: 14px; }
.btn-ghost { background: var(--surface); color: var(--text); padding: 11px 16px; font-size: 14px; }
.btn-ghost:hover { background: var(--surface2); }
.btn-danger { background: var(--red-d); border-color: var(--border); color: var(--red); padding: 11px 16px; font-size: 14px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn-primary { flex: 1; }

/* ── INPUTS ── */
.inp { width: 100%; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 11px 14px; color: var(--text); font-family: var(--sans); font-size: 15px; outline: none; transition: border-color .15s;  }
.inp:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(215,154,43,.25); }
.inp::placeholder { color: var(--mid); }
.inp-mono { font-family: var(--mono); font-size: 20px; text-align: center; padding: 14px; font-weight: 700; }
.inp-mono.ok { border-color: var(--green); background: var(--green-d); }
.inp-mono.err { border-color: var(--red); background: var(--red-d); }

/* ── PILL TOGGLES ── */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: flex; align-items: center; gap: 7px; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 8px 14px; cursor: pointer; transition: all .15s; user-select: none; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--dim); }
.pill:hover { color: var(--text); }
.pill.on { border-color: var(--accent); background: var(--accent-d); color: var(--accent); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; transition: background .15s; }
.pill.on .dot { background: var(--accent); }

/* ── PROGRESS ── */
.progress-track { height: 9px; background: var(--surface3); border-radius: var(--r); overflow: hidden; border: 2px solid var(--border); }
.progress-fill { height: 100%; border-radius: var(--r); transition: width .4s; }
.progress-fill.green { background: var(--green); }
.progress-fill.accent { background: var(--accent); }
.progress-fill.red { background: var(--red); }

/* ── STAT ROW ── */
.stat-row { display: flex; gap: 10px; }
.stat-box { flex: 1; background: var(--surface) !important; border: var(--bw) solid var(--border); border-radius: var(--r); padding: 12px; text-align: center; color: var(--text) !important; box-shadow: var(--shadow); }
.stat-n { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; margin-bottom: 4px; color: inherit; }
.stat-l { font-size: 10px; color: var(--dim); font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; }

/* ── BADGE ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 4px 10px; border-radius: var(--r); border: 2px solid var(--border); }
.badge-presente   { background: var(--surface); color: var(--dim); }
.badge-preterito  { background: var(--red-d); color: var(--red); border-color: var(--red); }
.badge-imperfecto { background: var(--blue-d); color: var(--blue); border-color: var(--blue); }
.badge-futuro     { background: var(--green-d); color: var(--green); border-color: var(--green); }
.badge-condicional{ background: var(--purple-d); color: var(--purple); border-color: var(--purple); }
.badge-subjuntivo { background: var(--accent-d); color: var(--accent); border-color: var(--accent); }

/* ── SPINNER ── */
.spinner { width: 18px; height: 18px; border: 3px solid var(--surface3); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-row { display: flex; align-items: center; gap: 10px; color: var(--dim); font-family: var(--mono); font-size: 13px; }

/* ── FEEDBACK BOX ── */
.fb { border-radius: var(--r); padding: 14px 18px; font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.5; display: none; border: var(--bw) solid var(--border);  box-shadow: var(--shadow); }
.fb.show { display: block; }
.fb { color: var(--text); }
.fb.ok { background: var(--green-d); border-color: var(--green); }
.fb.bad { background: var(--red-d); border-color: var(--red); }
.fb-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 7px; }
.fb.ok .fb-title { color: var(--green); }
.fb.bad .fb-title { color: var(--red); }
.big-form { font-family: var(--mono); font-size: 20px; font-weight: 700; margin-top: 4px; color: var(--text); }

/* ── ERROR MSG ── */
.err-msg { background: var(--red-d); border: var(--bw) solid var(--red); border-radius: var(--r); padding: 11px 14px; font-size: 13px; color: var(--red); display: none; margin-bottom: 12px; box-shadow: var(--shadow-red); }
.err-msg.show { display: block; }

/* ─────────────── DASHBOARD ─────────────── */
#s-dashboard .top-bar { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; }
#dash-header-btn:hover .eyebrow { opacity: .7; }
#dash-header-btn .eyebrow { transition: opacity .15s; }
.streak-box { background: var(--accent-d); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 10px 16px; text-align: center; }
.streak-n { font-family: var(--mono); font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.streak-l { font-size: 10px; color: var(--dim); opacity: 1; font-family: var(--mono); letter-spacing: 1px; text-transform: uppercase; }
.chapter-list { margin-top: 4px; }
.chapter-item { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 16px 18px; margin-bottom: 12px; cursor: pointer; transition: all .15s; display: block; width: 100%; text-align: left; box-shadow: var(--shadow); }
.chapter-item:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(43,32,24,.3); }
.chapter-item.completed { border-color: var(--green); box-shadow: var(--shadow-green); }
.ch-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ch-name { font-weight: 700; font-size: 16px; }
.ch-status { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.ch-status.done { color: var(--green); }
.ch-status.gate { color: var(--accent); }
.ch-status.active { color: var(--red); }
.ch-tenses { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.ch-prog { display: flex; align-items: center; gap: 10px; }
.ch-prog .progress-track { flex: 1; }
.ch-prog-label { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.empty-state { text-align: center; padding: 48px 20px; color: var(--dim); }
.empty-state .big { font-size: 36px; margin-bottom: 12px; color: var(--mid); }

/* ─────────────── CHAPTER NEW ─────────────── */
#s-chapter-new .form-group { margin-bottom: 22px; }
#s-chapter-new label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--mid); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }

/* ─────────────── CHAPTER DETAIL ─────────────── */
.detail-header { margin-bottom: 24px; }
.detail-header h2 { font-size: 22px; }
.actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
  box-sizing: border-box;
}
.action-card {
  min-width: 0;
  box-sizing: border-box;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 10px;
  cursor: pointer;
  transition: all .12s;
  text-align: center;
  font-family: var(--sans);
  box-shadow: var(--shadow);
}
/* Das WordPress-Theme (components.css .btn) setzt border-radius:full und
   white-space:nowrap. Da unsere Buttons class="action-card btn" tragen,
   überschreibt das Theme unsere Rundung + erzwingt nowrap (zerrissener
   Text). Hier gezielt nur diese beiden Theme-Eigenschaften neutralisieren
   — höhere Spezifität + !important, ohne die globale .btn anzufassen
   (die wird von anderen Buttons gebraucht). */
.actions-grid .action-card.btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;
  border-radius: var(--r) !important;
  white-space: normal !important;
  font-family: var(--sans) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.action-card:hover:not(:disabled) { border-color: var(--accent); box-shadow: var(--shadow-accent); }
.action-card:disabled { opacity: 1; cursor: not-allowed; background: var(--surface2); border-color: var(--border); box-shadow: none; }
.action-card:disabled .ac-name { color: var(--mid); }
.action-card:disabled .ac-desc { color: var(--dim); }
.action-card.gate-card { border-color: rgba(215,154,43,.25); }
.action-card.gate-card:hover:not(:disabled) { border-color: var(--accent); }
/* Icon-Zeile entfällt im neuen Look — Vokabel-Pills haben auch keine */
.action-card .ac-icon { display: none; }
.action-card .ac-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.action-card .ac-desc {
  display: block;
  font-size: 10px;
  font-family: var(--mono);
  color: var(--dim);
  margin-top: 3px;
  letter-spacing: .04em;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}
.action-card:hover:not(:disabled) .ac-desc { color: var(--accent); }
.detail-stats { margin-bottom: 24px; }

/* ─────────────── EXERCISE ─────────────── */
.ex-nav { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.ex-progress-wrap { flex: 1; }
.ex-label { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-bottom: 4px; display: flex; justify-content: space-between; letter-spacing: 1px; }
.score-pills { display: flex; gap: 6px; }
.score-pill { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: var(--r); border: 2px solid var(--border); }
.sp-ok  { background: var(--green-d); color: var(--green); border-color: var(--green); }
.sp-bad { background: var(--red-d); color: var(--red); border-color: var(--red); }
.q-card { background: var(--surface) !important; border: var(--bw) solid var(--accent); border-radius: var(--r); padding: 32px 28px; margin-bottom: 18px; text-align: center; color: var(--text) !important; box-shadow: var(--shadow-accent); overflow: hidden; }
.q-verb { font-size: 38px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; margin-bottom: 4px; }
.q-de { font-size: 14px; color: var(--dim); margin-bottom: 18px; }
.q-pronoun { font-family: var(--mono); font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.q-hint { font-size: 13px; color: var(--dim); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mc-btn { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 16px; font-family: var(--mono); font-size: 16px; font-weight: 700; cursor: pointer; transition: all .15s; color: var(--text) !important; box-shadow: var(--shadow); }
/* 0.30.2: Hover nur auf echten Hover-Geräten — iOS klebt :hover sonst am
   letzten Touch-Punkt und der Button der NÄCHSTEN Frage wirkt vorausgewählt. */
@media (hover: hover) {
  .mc-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-d); box-shadow: var(--shadow-accent); }
}
.mc-btn.mc-ok  { border-color: var(--green); background: var(--green-d); color: var(--green) !important; box-shadow: var(--shadow-green); }
.mc-btn.mc-bad { border-color: var(--red); background: var(--red-d); color: var(--red) !important; box-shadow: var(--shadow-red); animation: shakeX .4s ease; }
.mc-btn:disabled { cursor: default; }
.due-badge { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: var(--r); background: var(--red-d); color: var(--red); border: 2px solid var(--red); margin-left: 6px; }

@keyframes shakeX { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }

/* ── HINT ── */
.hint-wrap { position: relative; display: inline-block; margin-top: 14px; }
.hint-btn { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-l); padding: 6px 14px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--dim); cursor: pointer; transition: all .15s; letter-spacing: 1px; }
.hint-btn:hover { border-color: var(--accent); color: var(--accent); }
.hint-btn.used { border-color: var(--accent); color: var(--accent); opacity: .7; }
.hint-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 14px 16px; width: 280px; font-size: 13px; line-height: 1.5; color: var(--text); box-shadow: var(--shadow-lg); z-index: 10; display: none; text-align: left; }
.hint-tooltip.show { display: block; }
.hint-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--border); }
.hint-rule-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); margin-bottom: 7px; }
.hint-pattern { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); background: var(--surface2); border: 2px solid var(--border); border-radius: var(--r); padding: 6px 10px; margin: 6px 0; }
.hint-note { font-size: 12px; color: var(--dim); margin-top: 6px; font-style: italic; }

/* ─────────────── GATE ─────────────── */
.gate-header { background: var(--accent-d); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 18px; margin-bottom: 22px; box-shadow: var(--shadow-accent); }
.gate-header .eyebrow { margin-bottom: 4px; }
.gate-header h2 { font-size: 18px; font-weight: 800; }
.gate-header h2 strong { font-weight: 800; }
.gate-prog { display: flex; gap: 8px; margin-top: 14px; }
.gate-dot { flex: 1; height: 9px; border-radius: var(--r); background: var(--surface3); border: 2px solid var(--border); transition: background .3s; }
.gate-dot.pass { background: var(--green); }
.gate-dot.fail { background: var(--red); }
.gate-dot.current { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }
.gate-q-box { background: var(--surface2); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 14px; min-height: 70px; display: flex; align-items: center; justify-content: center;  box-shadow: var(--shadow); }
.gate-q-text { font-size: 16px; font-style: italic; line-height: 1.6; text-align: center; }
.gate-textarea { resize: vertical; min-height: 90px; font-size: 15px; line-height: 1.6; }
.ai-fb-box { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 18px; margin-bottom: 14px; display: none;  box-shadow: var(--shadow); }
.ai-fb-box.show { display: block; }
.ai-fb-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.ai-fb-content { font-size: 13px; color: var(--mid); line-height: 1.7; }
.ai-fb-content strong { color: var(--text); }
.correction-line { margin: 6px 0; padding: 8px 10px; background: var(--red-d);  border-radius: var(--r); font-family: var(--mono); font-size: 12px; color: var(--text); }
.corrected-line { margin: 8px 0; padding: 8px 10px; background: var(--green-d);  border-radius: var(--r); font-family: var(--mono); font-size: 12px; color: var(--text); }
.gate-result { text-align: center; padding: 32px 20px; }
.gate-result .big-icon { font-size: 48px; margin-bottom: 16px; color: var(--green); font-family: var(--mono); font-weight: 700; }
.gate-result h2 { font-size: 22px; margin-bottom: 8px; }
.gate-result p { color: var(--mid); font-size: 14px; }

/* ─────────────── RESULTS ─────────────── */
.results-score { text-align: center; margin-bottom: 28px; }
.results-big { font-size: 64px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--accent); margin-bottom: 6px; }
.results-grade { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.tense-bar-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 2px solid var(--surface3); }
.tense-bar-row:last-child { border-bottom: none; }
.tbr-name { font-family: var(--mono); font-size: 12px; color: var(--dim); min-width: 150px; }
.tbr-bar { flex: 1; }
.tbr-score { font-family: var(--mono); font-size: 12px; color: var(--dim); min-width: 44px; text-align: right; }
.wrong-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--surface) !important; border: var(--bw) solid var(--border); border-radius: var(--r); padding: 12px 14px; margin-bottom: 8px; font-family: var(--mono); font-size: 13px; color: var(--text) !important; }
.wr-l { font-size: 10px; color: var(--dim) !important; letter-spacing: 1px; text-transform: uppercase; }
.wr-v { font-size: 14px; font-weight: 700; margin-top: 2px; color: var(--text) !important; }
.wr-bad { color: var(--red) !important; }
.wr-ok  { color: var(--green) !important; }
.wr-sub { font-size: 11px; color: var(--dim) !important; margin-top: 1px; }

/* ─────────────── API KEY SETUP ─────────────── */
.api-notice { background: var(--surface2); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 14px 16px; font-size: 12px; color: var(--mid); line-height: 1.6; margin-bottom: 12px;  box-shadow: var(--shadow); }
.api-notice a { color: var(--accent); }
.mt8  { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.mt24 { margin-top: 24px; }
.mb8  { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; }
.mb24 { margin-bottom: 24px; }
.hidden { display: none !important; }

/* ─────────────── LEKTIONEN ─────────────── */
.tab-bar { display:flex; gap:6px; margin-bottom:24px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
.tab-bar::-webkit-scrollbar { display:none; }
.tab-btn { background:var(--surface); border:var(--bw) solid var(--border); border-radius: var(--r-l); padding:8px 16px; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--dim); cursor:pointer; transition:all .15s; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; flex-shrink:0; }
.tab-btn:hover { color:var(--text); }
.tab-btn.active { border-color:var(--accent); background:var(--accent-d); color:var(--accent); }
.lektion-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; margin-bottom:10px; cursor:pointer; transition:border-color .15s; display:block; width:100%; text-align:left; }
.lektion-card:hover { border-color:var(--border2); }
.lk-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.lk-name { font-weight:600; font-size:15px; }
.lk-topic { font-size:11px; font-family:var(--mono); color:var(--mid); letter-spacing:.04em; text-transform:uppercase; }
.lk-prog-row { display:flex; align-items:center; gap:10px; }
.lk-prog-row .progress-track { flex:1; }
.lk-prog-label { font-family:var(--mono); font-size:11px; color:var(--dim); white-space:nowrap; }
/* Lektion exercise */
.lek-text-box { background:var(--surface2); border:1px solid var(--border); border-radius: var(--r-s); padding:18px 20px; margin-bottom:20px; font-size:14px; line-height:1.8; color:var(--text); }
.lek-text-box .highlight { background:var(--accent-d); color:var(--accent); border-radius: var(--r-xs); padding:1px 5px; font-family:var(--mono); font-weight:600; }
.lek-question { font-size:16px; font-weight:600; margin-bottom:16px; line-height:1.5; }
.lek-hint { font-size:12px; color:var(--dim); font-style:italic; margin-top:6px; margin-bottom:12px; }
.translate-inp { width:100%; background:var(--surface); border:var(--bw) solid var(--border); border-radius:var(--r); padding:14px 16px; color:var(--text); font-family:var(--sans); font-size:16px; outline:none; transition:border-color .15s; margin-bottom:12px; }
.translate-inp:focus { border-color:var(--accent); box-shadow: 0 0 0 3px rgba(215,154,43,.2); outline: none; }
.translate-inp::placeholder { color:var(--dim); }
.translate-inp.ok { border-color:var(--green); background:var(--green-d); }
.translate-inp.bad { border-color:var(--red); background:var(--red-d); }
/* Irregular verbs */
.irr-filter { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px; }
.verb-paradigm-card { background:var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:24px; margin-bottom:14px; }
.vpc-header { display:flex; align-items:baseline; gap:12px; margin-bottom:18px; border-bottom:1px solid var(--border); padding-bottom:12px; }
.vpc-inf { font-size:26px; font-weight:600; color:var(--accent); letter-spacing:-.01em; }
.vpc-de  { font-size:13px; color:var(--mid); }
.vpc-tenses { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media(max-width:500px){ .vpc-tenses { grid-template-columns:1fr 1fr; } }
.vpc-tense { background:var(--surface2); border-radius: var(--r-xs); padding:12px; }
.vpc-tense-name { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.vpc-forms { font-family:var(--mono); font-size:12px; line-height:1.8; }
.vpc-forms .pron { color:var(--dim); }
.vpc-forms .form { color:var(--text); font-weight:600; }
.vpc-forms .form.irr { color:var(--accent); }


/* ─────────────── VOCAB TRAINER ─────────────── */
.vocab-card-front { background:var(--surface) !important; border:var(--bw) solid var(--accent); border-radius: var(--r); padding:36px 28px; text-align:center; margin-bottom:16px; color:var(--text) !important; box-shadow: var(--shadow-accent); }
.vocab-es { font-size:42px; font-weight:800; color:var(--accent); letter-spacing:-.02em; margin-bottom:6px; }
.vocab-phonetic { font-size:13px; color:var(--dim); font-style:italic; margin-bottom:10px; font-family:var(--mono); }
.vocab-cat-chip { display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 10px; border-radius: var(--r-l); background:var(--accent-d); color:var(--accent); border: 2px solid var(--accent); }
.vocab-mc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.vocab-mc-btn { background:var(--surface); border:var(--bw) solid var(--border); border-radius: var(--r); padding:14px; font-family:var(--sans); font-size:15px; font-weight:500; cursor:pointer; transition:all .15s; color:var(--text) !important; text-align:center; box-shadow: var(--shadow); }
@media (hover: hover) {
  .vocab-mc-btn:hover:not(:disabled) { border-color:var(--accent); background:var(--accent-d); box-shadow: 3px 3px 0 var(--accent); }
}
.vocab-mc-btn.mc-ok  { border-color:var(--green); background:var(--green-d); color:var(--green) !important; font-weight:700; box-shadow: var(--shadow-green); }
.vocab-mc-btn.mc-bad { border-color:var(--red); background:var(--red-d); color:var(--red) !important; font-weight:700; box-shadow: var(--shadow-red); animation: shakeX .4s ease; }
.vocab-mc-btn:disabled { cursor:default; }
.vocab-mc-btn.mc-answered { opacity:0.7; }
.vocab-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; border:none; border-bottom:1.5px dashed rgba(43,32,24,.28); border-radius:0; font-family:var(--serif); font-size:14px; background:transparent !important; margin-bottom:0; box-shadow:none; color: var(--text) !important; }
.vocab-item:last-child { margin-bottom: 0; }
.vocab-item-es { font-weight:600; color:var(--text) !important; font-size:15px; }
.vocab-item-de { color:var(--dim) !important; }
.vocab-item-bar { width:40px; height:6px; border-radius: var(--r-xs); background:var(--surface3); border: 2px solid var(--border); overflow:hidden; }
.vocab-item-bar-fill { height:100%; border-radius: var(--r-xs); }
.vocab-mode-bar { display:flex; gap:8px; margin-bottom:20px; }


/* ─────────────── KONTEXT TRAINER ─────────────── */
.kontext-ref { font-size:13px; line-height:1.7; }
.kontext-ref h4 { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; padding-bottom:4px; border-bottom:1px solid var(--border); }
.kontext-ref .signal { display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; padding:2px 7px; border-radius: var(--r-xs); margin:2px 3px 2px 0; }
.sig-pret  { background:var(--red-d);    color:var(--red); }
.sig-imp   { background:var(--blue-d);   color:var(--blue); }
.sig-fut   { background:var(--green-d);  color:var(--green); }
.sig-cond  { background:var(--purple-d); color:var(--purple); }
.sig-subj  { background:var(--accent-d); color:var(--accent); }
.kontext-q { font-size:17px; line-height:1.7; margin-bottom:16px; font-family:var(--sans); }
.kontext-q .gap { display:inline-block; border-bottom:2px solid var(--accent); min-width:80px; padding:0 4px; font-family:var(--mono); font-weight:600; color:var(--accent); text-align:center; font-size:15px; }
.kontext-q .signal-tag { font-family:var(--mono); font-size:11px; font-weight:600; padding:1px 6px; border-radius: var(--r-xs); margin-right:2px; vertical-align:middle; }
.kontext-hint { font-size:12px; color:var(--dim); font-style:italic; margin-bottom:14px; font-family:var(--mono); }
.kontext-explain { background:var(--surface2) !important;  border-radius: 0 4px 4px 0; padding:12px 14px; font-size:13px; line-height:1.65; color:var(--mid) !important; margin-top:8px; }
.kontext-explain strong { color:var(--text); }
.kontext-explain .rule { font-family:var(--mono); font-size:11px; color:var(--accent); display:block; margin-top:5px; }


/* ─────────────── ACHIEVEMENTS ─────────────── */
.achievement-toast { 
  position: fixed;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface) !important;
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 290px;
  max-width: 380px;
  box-shadow: var(--shadow-accent);
  z-index: 99999;
  transition: bottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  color:var(--text) !important;
}
.achievement-toast.show { bottom: 28px; }
.achievement-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.achievement-text { flex: 1; }
.achievement-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  margin-bottom: 3px;
}
.achievement-name {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
  color:var(--text) !important;
}
.achievement-desc {
  font-size: 11px;
  color: var(--dim) !important;
}
.achievement-xp {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent) !important;
  flex-shrink: 0;
}


/* ─────────────── CHARACTERS ─────────────── */
.char-wrap {
  position: fixed;
  bottom: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  z-index: 9998;
  transition: bottom 0.45s cubic-bezier(0.34, 1.35, 0.64, 1);
  pointer-events: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.char-wrap.show { bottom: 64px; }
.char-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
}
/* Speech bubble above the character */
.char-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 22px 22px 22px 4px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--sans);
  letter-spacing: 0.01em;
  margin-bottom: 12px;
  display: none;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
/* Tail — bottom-left, comic style */
.char-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 18px;
  border-left: 0px solid transparent;
  border-right: 14px solid transparent;
  border-top: 12px solid var(--accent);
}
.char-bubble::before {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 20px;
  border-left: 0px solid transparent;
  border-right: 11px solid transparent;
  border-top: 10px solid #fff;
  z-index: 1;
}
.char-bubble.show { display: block; }

/* Animations */
@keyframes charNod {
  0%,100% { transform: rotate(0deg); transform-origin: bottom center; }
  25%      { transform: rotate(-8deg); transform-origin: bottom center; }
  75%      { transform: rotate(8deg); transform-origin: bottom center; }
}
@keyframes charShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(8px); }
  60%     { transform: translateX(-6px); }
  80%     { transform: translateX(6px); }
}
@keyframes charJump {
  0%,100% { transform: translateY(0); }
  30%     { transform: translateY(-18px); }
  60%     { transform: translateY(-8px); }
}
@keyframes charWave {
  0%,100% { transform: rotate(0deg); transform-origin: bottom center; }
  25%     { transform: rotate(-6deg); transform-origin: bottom center; }
  75%     { transform: rotate(6deg); transform-origin: bottom center; }
}
.char-nod   { animation: charNod   0.5s ease-in-out 2; }
.char-shake { animation: charShake 0.5s ease-in-out 2; }
.char-jump  { animation: charJump  0.5s ease-in-out 3; }
.char-wave  { animation: charWave  0.8s ease-in-out 3; }


/* ─── REDESIGN: Dashboard ─────────────────────── */
.stat-mini { background: var(--surface) !important; border: var(--bw) solid var(--border); border-radius: var(--r); padding: 10px 8px; text-align: center;  box-shadow: var(--shadow); }
.stat-mini .stat-n { font-family: var(--sans); font-size: 22px; font-weight: 700; line-height: 1; }
.stat-mini .stat-l { font-family: var(--mono); font-size: 8px; color: var(--dim); letter-spacing: .06em; margin-top: 3px; }
.mod-tile { background: var(--surface) !important; border: var(--bw) solid var(--border) !important; border-radius: var(--r) !important; padding: 14px 14px !important; text-align: left; cursor: pointer; transition: transform .12s;  box-shadow: var(--shadow); }
.mod-tile:active { transform: scale(.97); }
.mt-tag { font-family: var(--mono); font-size: 8px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.mt-key { font-family: var(--sans); font-size: 26px; font-weight: 800; color: var(--border2); line-height: 1; margin-bottom: 4px; }
.mt-name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--text); }
.mt-sub { font-family: var(--mono); font-size: 10px; color: var(--accent); margin-top: 4px; }
.streak-box { background: var(--surface) !important; border: var(--bw) solid var(--border) !important; border-radius: var(--r); padding: 8px 12px; text-align: center; flex-shrink: 0;  box-shadow: var(--shadow); }
.streak-n { font-family: var(--sans); font-size: 24px; font-weight: 700; color: var(--accent); line-height: 1; }
.streak-l { font-family: var(--mono); font-size: 8px; color: var(--dim); letter-spacing: .08em; margin-top: 2px; }

/* ─── REDESIGN: Vocab setup ───────────────────── */
.vocab-mode-row { display: flex; gap: 6px; margin-bottom: 14px; }
.vocab-mode-pill { padding: 7px 16px; border-radius: var(--r-l); border: var(--bw) solid var(--border); background: var(--surface); font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--mid); cursor: pointer; transition: all .15s; }
.vocab-mode-pill.on { background: var(--accent); border-color: var(--accent); color: var(--text); font-weight: 700; }
.vocab-session-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.vocab-session-btn { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 10px 6px; text-align: center; cursor: pointer; transition: transform .12s;  box-shadow: var(--shadow); }
.vocab-session-btn:active { transform: scale(.96); }
.vocab-session-btn.active-session { border-color: rgba(200,169,110,.4); }
.vsb-val { font-family: var(--sans); font-size: 20px; font-weight: 700; line-height: 1; }
.vsb-lbl { font-family: var(--mono); font-size: 8px; color: var(--dim); letter-spacing: .06em; margin-top: 2px; }
.cat-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 80px; }
.cat-chip-item { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 10px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: all .12s;  box-shadow: var(--shadow); }
.cat-chip-item.on { border-color: var(--accent); background: var(--accent-d2); }
.cci-key { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--dim); width: 24px; height: 24px; border-radius: var(--r); background: var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .03em; }
.cat-chip-item.on .cci-key { background: rgba(215,154,43,.15); color: var(--accent); }
.cci-name { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cci-cnt { font-family: var(--mono); font-size: 9px; color: var(--dim); }
.cci-ck { font-family: var(--mono); font-size: 9px; color: transparent; margin-left: auto; }
.cat-chip-item.on .cci-ck { color: var(--accent); }
/* .vocab-start-float ist vollständig weiter unten definiert (Floating-Buttons-Block);
   hier stand ein beim Editieren zerstörter Duplikat-Rest — entfernt in 0.23.2. */

/* ─── REDESIGN: Exercise screen ───────────────── */
.ex-nav-new { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ex-close-btn { width: 34px; height: 34px; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 16px; color: var(--mid); cursor: pointer; flex-shrink: 0; box-shadow: var(--shadow); }
.ex-close-btn:active { box-shadow: none; transform: translate(1px, 1px); }
.ex-prog-new { flex: 1; }
.ex-prog-labels { display: flex; justify-content: space-between; margin-bottom: 5px; }
.ex-prog-labels span { font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: .05em; }
.ex-prog-track { height: 3px; background: var(--border); border-radius: var(--r-xs); overflow: hidden; }
.ex-prog-bar { height: 100%; background: var(--accent); border-radius: var(--r-xs); transition: width .3s ease; }
.ex-scores-new { display: flex; gap: 5px; }
.ex-score-pill { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r); }
.ex-score-pill.ok  { background: rgba(91,170,122,.15); color: var(--green); }
.ex-score-pill.bad { background: rgba(224,85,85,.15); color: var(--red); }
.vocab-card-new { background: var(--surface) !important; border: var(--bw) solid var(--border); border-radius: var(--r-l); padding: 28px 20px 22px; text-align: center; margin-bottom: 14px;  box-shadow: var(--shadow); }
.vcn-cat { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: var(--accent); text-transform: uppercase; margin-bottom: 12px; }
.vcn-word { font-family: var(--sans); font-size: 26px; font-weight: 800; color: var(--text); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 8px; }
.vcn-ex { font-family: var(--sans); font-size: 12px; color: var(--mid); font-style: italic; }
.mc-grid-new { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.mc-btn-new { background: var(--surface) !important; border: var(--bw) solid var(--border) !important; border-radius: var(--r) !important; padding: 14px 10px !important; color: var(--text) !important; font-family: var(--sans) !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer; text-align: center; line-height: 1.3; transition: all .12s; display: block; width: 100%;  box-shadow: var(--shadow); }
.mc-btn-new.mc-ok  { border-color: var(--green) !important; background: var(--green-d) !important; color: var(--green) !important; font-weight: 700 !important; }
.mc-btn-new.mc-bad { border-color: var(--red) !important; background: var(--red-d) !important; color: var(--red) !important; }
.fb-strip-new { background: var(--green-d); border: var(--bw) solid var(--green); border-radius: var(--r); padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 13px; font-weight: 700; color: var(--green); margin-bottom: 12px;  box-shadow: var(--shadow); }
.fb-strip-new.bad { background: var(--red-d); border-color: var(--red); color: var(--red); }

/* ─── INTRO SCREEN ────────────────────────────── */
#s-intro {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#s-intro.active { display: flex; }
#s-intro.active ~ * #app-bnav,
body:has(#s-intro.active) #app-bnav { display: none !important; }
#s-intro::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(200,169,110,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,110,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.intro-logo { opacity:0; animation: iUp .5s .1s ease forwards; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; margin-bottom: 4px; opacity: 0; animation: iUp .5s .1s ease forwards; }
.intro-title { opacity:0; animation: iUp .5s .3s ease forwards; font-family: var(--sans); font-size: 36px; font-weight: 800; color: var(--text); letter-spacing: -.02em; margin-bottom: 40px; opacity: 0; animation: iUp .5s .3s ease forwards; }
.intro-title em { color: var(--accent); font-style: normal; }
/* ── Intro stage: flex row, chars aligned to bottom ── */
.intro-stage {
  width: min(420px, 96vw);
  height: 240px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 0 8px;
  margin-bottom: 8px;
}

/* Each character column */
.intro-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transform: translateY(120px);
  opacity: 0;
  flex-shrink: 0;
}

/* Animation delays per char */
.intro-char:nth-child(1) { animation: iCin .55s .55s  cubic-bezier(.34,1.5,.64,1) forwards; }
.intro-char:nth-child(2) { animation: iCin .55s .85s  cubic-bezier(.34,1.5,.64,1) forwards; }
.intro-char:nth-child(3) { animation: iCin .55s 1.15s cubic-bezier(.34,1.5,.64,1) forwards; }
.intro-char:nth-child(4) { animation: iCin .55s 1.45s cubic-bezier(.34,1.5,.64,1) forwards; }

/* Individual heights — visual hierarchy */
.intro-char:nth-child(1) .intro-img { height: 210px; }   /* Guia — biggest   */
.intro-char:nth-child(4) .intro-img { height: 185px; }   /* Tio  — gedrungen */
.intro-char:nth-child(2) .intro-img { height: 155px; }   /* Abuela — small   */
.intro-char:nth-child(3) .intro-img { height: 130px; }   /* Escolar — smallest */

.intro-img {
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Speech bubble */
.intro-bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 16px 16px 16px 4px;
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  margin-bottom: 10px;
  opacity: 0;
  box-shadow: var(--shadow);
}
.intro-char:nth-child(1) .intro-bubble { animation: iBub .3s .95s  ease forwards; }
.intro-char:nth-child(2) .intro-bubble { animation: iBub .3s 1.25s ease forwards; }
.intro-char:nth-child(3) .intro-bubble { animation: iBub .3s 1.55s ease forwards; }
.intro-char:nth-child(4) .intro-bubble { animation: iBub .3s 1.85s ease forwards; }
.intro-bubble::after  { content:''; position:absolute; bottom:-9px; left:14px; border-left:0 solid transparent; border-right:12px solid transparent; border-top:9px solid var(--accent); border-bottom:none; }
.intro-bubble::before { content:''; position:absolute; bottom:-7px; left:16px; border-left:0 solid transparent; border-right:10px solid transparent; border-top:8px solid #fff; border-bottom:none; z-index:1; }

.intro-char-name { font-family: var(--mono); font-size: 7px; color: var(--dim); letter-spacing: .05em; margin-top: 4px; }
/* intro-bubble dark removed */
.intro-char:nth-child(1) .intro-bubble { animation: iBub .3s .95s ease forwards; }
.intro-char:nth-child(2) .intro-bubble { animation: iBub .3s 1.25s ease forwards; }
.intro-char:nth-child(3) .intro-bubble { animation: iBub .3s 1.55s ease forwards; }
.intro-char:nth-child(4) .intro-bubble { animation: iBub .3s 1.85s ease forwards; }
.intro-bubble::after  { content:''; position:absolute; bottom:-9px; left:14px; border-left:0 solid transparent; border-right:12px solid transparent; border-top:9px solid var(--accent); border-bottom:none; }
.intro-bubble::before { content:''; position:absolute; bottom:-7px; left:16px; border-left:0 solid transparent; border-right:10px solid transparent; border-top:8px solid #fff; border-bottom:none; z-index:1; }
.intro-enter { position: relative; opacity:0; animation: iUp .4s 2.4s ease forwards; margin-top: 32px; padding: 13px 44px; background: var(--accent); color: var(--text); border: var(--bw) solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg); font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; cursor: pointer; opacity: 0; animation: iUp .4s 2.4s ease forwards; transition: transform .1s, opacity .1s; }
.intro-enter:active { transform: scale(.97); }
/* ─── WELCOME PARADE ─────────────────────────── */
.parade-stage {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  width: min(480px, 96vw);
  height: 200px;
  gap: 6px;
  padding: 0 8px;
  margin: 0 auto 8px;
  overflow: visible;
}
.parade-char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 0;
  min-width: 0;
  max-width: 100px;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .5s ease, transform .55s cubic-bezier(.34,1.5,.64,1);
}
.parade-char.pin {
  opacity: 1;
  transform: translateY(0);
}
.parade-char img {
  height: 170px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
.parade-bubble {
  position: absolute;
  bottom: calc(100% - 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}
.parade-bubble.bin { opacity: 1; }
.parade-bubble::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--accent);
}
.parade-name {
  font-family: var(--mono);
  font-size: 7px;
  color: var(--dim);
  letter-spacing: .06em;
  margin-top: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}
#intro-empezar {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
#intro-empezar.parade-done {
  opacity: 1;
  pointer-events: auto;
}



/* ─── BOTTOM NAV ─────────────────────────── */
.app-nb { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:8px 0; border:none; background:none; cursor:pointer; }
.app-ni { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--dim); letter-spacing:.04em; transition:color .15s; }
.app-nd { width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .15s; margin:0 auto; }
.app-nb.on .app-ni { color:var(--accent); }
.app-nb.on .app-nd { opacity:1; }

/* ─── RESPONSIVE / DESKTOP ───────────────── */
body {
  max-width: 700px !important;
  margin: 0 auto !important;
  padding: 0 0 64px !important;
}
.screen {
  /* Robuste Scroll-Lösung statt fragilem padding-bottom:
     - min-height etwas über Viewport erzwingt IMMER Scrollbarkeit,
       auch wenn der Inhalt kurz ist (sonst klebt der letzte Button
       unerreichbar hinter der fixed Bottom-Nav).
     - Großzügiger Endraum (140px + Nav 64px + iOS Safe-Area) sorgt
       dafür dass der letzte Button immer komplett über Nav + iPhone-
       Home-Indicator geschoben werden kann. */
  box-sizing: border-box !important;
  min-height: calc(100dvh + 60px) !important;
  padding: 20px 20px var(--etp-bottom-safe) !important;
}

@media (min-width: 600px) {
  html { font-size: 16px; }
  .screen { padding: 28px 32px var(--etp-bottom-safe) !important; }
  .stat-mini .stat-n { font-size: 28px !important; }
  h1 { font-size: 32px !important; }
  .vocab-card-new { padding: 36px 28px 28px !important; }
  .vcn-word { font-size: 38px !important; }
  .mc-grid-new { gap: 12px !important; }
  .mc-btn-new { padding: 18px 14px !important; font-size: 15px !important; border-radius: var(--r) !important; }
  .mod-tile { padding: 20px 18px !important; }
  .mt-key { font-size: 32px !important; }
  .mt-name { font-size: 17px !important; }
  #app-bnav { width: min(700px, 100%); }
}


.big-form { color: var(--text) !important; font-size: 20px; font-weight: 700; display: block; margin-top: 6px; }

/* ── Global style alignment ───────────────────────── */
.section-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--dim) !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 10px !important;
}
/* Pill filters (category selectors in all modules) */
.pill {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r-l) !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  padding: 6px 14px !important;
  margin: 0 4px 6px 0 !important;
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.pill.on {
  background: var(--accent-d) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.pill .dot { display: none !important; }
/* Ghost buttons */
.btn-ghost {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  color: var(--mid) !important;
  border-radius: var(--r) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow);
}
.btn-ghost:hover { color: var(--text) !important; border-color: var(--border2) !important; }
/* Primary buttons */
.btn-primary {
  background: var(--accent) !important;
  color: var(--text) !important;
  border-radius: var(--r) !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
/* Cards */
.card {
  border-radius: var(--r) !important;
}
/* Stat boxes */
.stat-box {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border);
  border-radius: var(--r) !important;
  padding: 10px 8px !important;
  text-align: center;
  box-shadow: var(--shadow);
}
.stat-n {
  font-family: var(--sans) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}
.stat-l {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  color: var(--dim) !important;
  letter-spacing: .06em !important;
  margin-top: 2px !important;
}
/* Results */
.results-big {
  font-family: var(--sans) !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
}
.results-grade {
  font-family: var(--sans) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
}
/* Exercise nav */
.ex-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.ex-nav .btn-ghost {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border-radius: var(--r) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ex-progress-wrap {
  flex: 1 !important;
}
.ex-label {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: var(--dim) !important;
  letter-spacing: .05em !important;
}
.progress-track { height: 3px !important; background: var(--border) !important; border-radius: var(--r-xs) !important; }
.progress-fill  { height: 100% !important; border-radius: var(--r-xs) !important; }
.score-pills { display: flex !important; gap: 5px !important; }
.score-pill {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: var(--r) !important;
}
.sp-ok  { background: var(--green-d) !important; color: var(--green) !important; }
.sp-bad { background: var(--red-d) !important;   color: var(--red) !important; }
/* Feedback boxes */
.fb { padding: 11px 14px !important; border-radius: var(--r) !important; margin-bottom: 12px !important; }
.fb.ok  { background: var(--green-d) !important; border-color: var(--green) !important; color: var(--green) !important; }
.fb.bad { background: var(--red-d) !important;   border-color: var(--red) !important;   color: var(--red) !important; }
.fb-title { font-family: var(--sans) !important; font-size: 13px !important; font-weight: 700 !important; }
/* Vocab card */
.vocab-card-front {
  border-radius: var(--r-l) !important;
  padding: 28px 20px 22px !important;
  text-align: center !important;
}
.vocab-es {
  font-family: var(--sans) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.1 !important;
}
.vocab-cat-chip {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.vocab-mc-btn {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px 10px !important;
  color: var(--text) !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow);
}
.mc-ok  { border-color: var(--green) !important; background: var(--green-d) !important; color: var(--green) !important; }
.mc-bad { border-color: var(--red) !important; background: var(--red-d) !important; color: var(--red) !important; }
.vocab-mode-bar { display: flex; gap: 8px; }
/* Input */
.translate-inp {
  border-radius: var(--r) !important;
  font-family: var(--sans) !important;
  font-size: 18px !important;
}
/* Vocab item list */
.vocab-item {
  display: flex; align-items: center; gap: 12px;
  /* 0.28.4: Optik kommt aus der ersten Definition (gestrichelt, Serif) */
}
.vocab-item-es { font-weight: 700; color: var(--text); min-width: 0; }
.vocab-item-de { color: var(--dim2); font-size: 13px; flex: 1; }


/* ── BOTTOM NAV — definitive ─────────────────── */
#app-bnav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 700px !important;
  height: var(--etp-bnav-total) !important;
  background: var(--surface) !important;
  border-top: var(--bw) solid var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  z-index: 9000 !important;
  padding: 0 0 var(--etp-safe-b) 0 !important;
  margin: 0 !important;
}
.app-nb {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 8px 0 !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  min-width: 0 !important;
}


/* ── Character images: transparent bg ──────── */
.char-img, .intro-img {
  background: transparent !important;
  mix-blend-mode: normal !important;
}
.char-wrap {
  background: transparent !important;
}
.intro-stage {
  background: transparent !important;
}


/* ── Intro keyframes (restored) ─────────────────── */
@keyframes iCin {
  from { transform: translateY(120px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes iUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes iBub {
  from { opacity: 0; transform: scale(.6) translateY(5px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}


/* ════════════════════════════════════════════
   LIGHT MODE OVERRIDES
════════════════════════════════════════════ */

/* Cards get subtle shadow instead of dark bg */
.card, .stat-mini, .mod-tile, .vocab-card-new,
.vocab-card-front, .wcard, .word-card, .cat-chip-item,
.vocab-session-btn, .mc-btn-new, .mc-btn, .vocab-mc-btn {
}

/* Streak badge */
.streak-box {
  border-color: var(--border) !important;
}

/* Section labels */
.section-label, .g-sub, .greeting-sub, .cat-lbl,
.ex-prog-labels span, .mt-tag, .mod-card-tag, .mt-sub.dim {
  color: var(--dim) !important;
}

/* Bottom nav retro */
#app-bnav {
  border-top: var(--bw) solid var(--border) !important;
  box-shadow: none !important;
}
.app-nb.on .app-ni { color: var(--accent) !important; }
.app-nd { background: var(--accent) !important; }

/* Module tile key letter */
.mt-key { color: var(--border2) !important; }
.mod-card-key { color: var(--border2) !important; }

/* Score pills */
.sp-ok, .ex-score-pill.ok { 
  background: rgba(46,143,90,.12) !important; 
  color: var(--green) !important; 
}
.sp-bad, .ex-score-pill.bad { 
  background: rgba(192,57,43,.1) !important; 
  color: var(--red) !important; 
}

/* MC buttons */
.mc-btn-new, .vocab-mc-btn {
  color: var(--text) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
.mc-ok, .mc-btn-new.mc-ok { 
  border-color: var(--green) !important; 
  background: var(--green-d) !important; 
  color: var(--green) !important; 
}
.mc-bad, .mc-btn-new.mc-bad { 
  border-color: var(--red) !important; 
  background: var(--red-d) !important; 
  color: var(--red) !important; 
}

/* Feedback strips */
.fb.ok, .fb-strip-new { 
  background: rgba(46,143,90,.08) !important; 
  border-color: rgba(46,143,90,.25) !important; 
  color: var(--green) !important; 
}
.fb.bad, .fb-strip-new.bad { 
  background: rgba(192,57,43,.08) !important; 
  border-color: rgba(192,57,43,.2) !important; 
  color: var(--red) !important; 
}

/* Vocab word card */
.vcn-word, .vocab-es { color: var(--text) !important; }

/* Progress bar track */
.ex-prog-track, .progress-track, .xptrack { 
  background: var(--border) !important; 
}

/* Ghost buttons */
.btn-ghost { 
  background: var(--surface) !important; 
  color: var(--mid) !important;
  border-color: var(--border) !important; 
}

/* Input */
.inp, .translate-inp {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.inp::placeholder, .translate-inp::placeholder { color: var(--dim) !important; }

/* Vocab item list */
.vocab-item { border-bottom-color: var(--border) !important; }
.vocab-item-de { color: var(--mid) !important; }

/* Achievement toast */
.achievement-toast {  
  background: var(--surface) !important; 
  border-color: var(--accent) !important;
  color: var(--text) !important;
}

/* Results screen */
.results-big { color: var(--text) !important; }

/* Char bubble on light bg — handled in base CSS */

/* Pill filters */
.pill { 
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--mid) !important;
}
.pill.on { 
  background: var(--accent-d) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Chapter cards in Verben */
.chapter-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Wordlist toggle button */
/* 0.28.4: #vocab-wordlist-toggle-Override entfernt — .wl-toggle-btn regelt */

/* ════════════════════════════════════════════
   ANDES BACKGROUND (Desktop only)
════════════════════════════════════════════ */
#andes-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: none; /* hidden on mobile */
}
@media (min-width: 760px) {
  #andes-bg { display: block; }
}


/* ── Nav icons ─────────────────────────────────── */
.app-icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  transition: opacity .15s, filter .15s;
  display: block;
  opacity: 0.85;;
  filter: grayscale(0.3);
}
.app-nb.on .app-icon { opacity: 1; filter: none; }
.app-ni {
  font-family: var(--mono);
  font-size: 11px !important;
  font-weight: 700;
  color: var(--dim);
  letter-spacing: .04em;
  transition: color .15s;
  text-transform: none !important;
}
.app-nb.on .app-ni { color: var(--accent) !important; }


/* ── Collapsible toggle ────────────────────────────── */
.collapsible-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  transition: background .15s, border-color .15s;
  gap: 4px;
  box-shadow: var(--shadow);
}
.collapsible-toggle:hover { border-color: var(--accent); background: var(--surface2); }
.coll-arrow { font-size: 10px; color: var(--dim); margin-left: auto; flex-shrink: 0; }
.coll-icon { width:20px; height:20px; background:var(--border); border-radius: var(--r-xs); display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--mid); flex-shrink:0; margin-right:8px; font-family:var(--mono); font-weight:700; }
.coll-body {
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 14px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}


/* ══ TUTOR CHAT ════════════════════════════════════════════════════ */
#s-tutor {
  display: none;
  flex-direction: column;
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  padding: 0 !important;
  max-width: 700px;
  margin: 0 auto;
  background: var(--bg);
  z-index: 99800;
}

/* Header */
.tutor-header {
  padding: 14px 18px;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.tutor-char-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.tutor-char-avatar img {
  height: 40px;
  width: auto;
  object-fit: contain;
}
.tutor-header-info { flex: 1; min-width: 0; }
.tutor-header-title {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}
.tutor-header-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 2px;
}
.tutor-close {
  width: 32px; height: 32px;
  border-radius: var(--r);
  border: var(--bw) solid var(--border);
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 16px;
  flex-shrink: 0;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.tutor-close:hover { border-color: var(--red); color: var(--red); }

/* Error chips strip */
.tutor-chips {
  padding: 10px 18px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.tutor-chip {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mid);
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: var(--shadow);
}
.tutor-chip.wrong { border-color: rgba(192,57,43,.3); color: var(--red); background: var(--red-d); }
.tutor-chip.topic { border-color: rgba(215,154,43,.3); color: var(--accent); background: var(--accent-d); }

/* Messages area */
.tutor-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}
.tutor-messages::-webkit-scrollbar { width: 4px; }
.tutor-messages::-webkit-scrollbar-track { background: transparent; }
.tutor-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-xs); }

/* Message rows */
.tutor-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: msgIn .25s ease;
}
.tutor-msg-row.user { flex-direction: row-reverse; }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Small avatar in chat */
.tutor-mini-avatar {
  width: 28px; height: 28px;
  border-radius: var(--r);
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}
.tutor-mini-avatar img { height: 26px; width: auto; object-fit: contain; }
.tutor-mini-avatar.user-av {
  background: var(--accent-d);
  border-color: rgba(215,154,43,.3);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

/* Bubbles */
.tutor-bubble {
  max-width: 82%;
  padding: 11px 14px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  position: relative;
}
.tutor-bubble.claude {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.tutor-bubble.user {
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.tutor-bubble p { margin: 0 0 8px; }
.tutor-bubble p:last-child { margin-bottom: 0; }
.tutor-bubble strong { font-weight: 700; }

/* Exercise box inside claude bubble */
.tutor-exercise {
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  line-height: 1.7;
  box-shadow: var(--shadow);
}
.tutor-exercise-label {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  font-family: var(--mono);
}

/* System messages */
.tutor-system-msg {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .06em;
  padding: 4px 0;
}

/* Typing indicator */
.tutor-typing-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  animation: msgIn .2s ease;
}
.tutor-typing-bubble {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  border-bottom-left-radius: 4px;
  padding: 12px 16px;
  display: flex;
  gap: 5px;
  align-items: center;
  box-shadow: var(--shadow);
}
.tutor-typing-bubble span {
  width: 7px; height: 7px;
  background: var(--border2);
  border-radius: 50%;
  animation: tDot .9s infinite;
}
.tutor-typing-bubble span:nth-child(2) { animation-delay: .15s; }
.tutor-typing-bubble span:nth-child(3) { animation-delay: .30s; }
@keyframes tDot {
  0%,60%,100% { transform: translateY(0); opacity:.45; }
  30%          { transform: translateY(-5px); opacity:1; }
}

/* Input bar */
.tutor-input-bar {
  padding: 10px 16px 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 2px solid var(--border);
  background: var(--surface);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}
.tutor-input {
  flex: 1;
  background: var(--bg);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  padding: 10px 16px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  outline: none;
  resize: none;
  max-height: 100px;
  line-height: 1.4;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.tutor-input:focus { border-color: var(--accent); }
.tutor-input::placeholder { color: var(--dim); }
.tutor-send-btn {
  width: 42px; height: 42px;
  background: var(--accent);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
}
.tutor-send-btn:not(:disabled):hover { transform: scale(1.06); }
.tutor-send-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.tutor-send-btn svg { width: 17px; height: 17px; color: var(--text); }

/* API key prompt card */
.tutor-key-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  border-bottom-left-radius: 4px;
  padding: 16px;
  max-width: 82%;
}
.tutor-key-card p { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.tutor-key-card a { color: var(--accent); }
.tutor-key-row { display: flex; gap: 8px; align-items: center; }
.tutor-key-inp {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r);
  border: var(--bw) solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.tutor-key-inp:focus { border-color: var(--accent); }
.tutor-key-save {
  padding: 9px 16px;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.tutor-error-msg {
  background: var(--red-d);
  border: var(--bw) solid rgba(192,57,43,.2);
  border-radius: var(--r);
  padding: 7px 14px;
  font-size: 11px;
  color: var(--red);
  margin: 0 18px 6px;
  font-family: var(--mono);
  flex-shrink: 0;
  box-shadow: var(--shadow);
}


/* ── Woodpecker logo ───────────────────────────────── */
.wp-logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.wp-logo-img {
  height: 44px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block !important;
  visibility: visible !important;
}
.wp-logo-text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
@media (min-width: 600px) {
  .wp-logo-img { height: 60px; }
}


/* ── Intro screen logo ──────────────────────────── */
.intro-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.intro-wp-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  opacity: 0;
  animation: iUp .6s .05s ease forwards;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}


/* ── 5-column nav adjustments ───────────────────── */
#app-bnav .app-nb { padding: 6px 0 !important; }
#app-bnav .app-icon { width: 26px !important; height: 26px !important; }
#app-bnav .app-ni { font-size: 8px !important; letter-spacing: .04em !important; }


/* ── Vocab tab — clean layout ───────────────────────── */
.vocab-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  margin-bottom: 18px;
}
.vocab-stats-grid .stat-mini {
  background: var(--surface);
  padding: 12px 6px;
  border-radius: var(--r);
  text-align: center;
}
.vocab-stats-grid .stat-n { font-size: 22px !important; font-weight: 700; line-height: 1; }
.vocab-stats-grid .stat-l { font-size: 9px; font-family: var(--mono); color: var(--dim); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; }

/* Two big mode buttons */
.vocab-mode-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.vocab-mode-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 16px 14px;
  cursor: pointer;
  transition: all .15s;
  font-family: var(--sans);
  text-align: center;
  box-shadow: var(--shadow);
}
.vocab-mode-card:active { transform: scale(.97); }
.vocab-mode-card.on {
  background: rgba(215,154,43,.1);
  border-color: var(--accent);
}
.vmc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.vocab-mode-card.on .vmc-title { color: var(--accent); }
.vmc-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .04em;
}

/* Custom dropdown */
.vocab-cat-select-wrap { margin-bottom: 12px; }
.vocab-cat-label {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vocab-cat-select { position: relative; }
.vocab-cat-trigger {
  width: 100%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.vocab-cat-trigger:hover { border-color: var(--accent); }
.vocab-cat-trigger svg { color: var(--dim); flex-shrink: 0; }
.vocab-cat-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 6px;
  z-index: 200;
  box-shadow: 4px 4px 0 rgba(43,32,24,.3);
  max-height: 320px;
  overflow-y: auto;
}
.vocab-cat-option {
  padding: 10px 12px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r);
  transition: background .1s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vocab-cat-option:hover { background: rgba(215,154,43,.1); }
.vocab-cat-option .vco-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vocab-cat-option .vco-meta { font-size: 10px; font-family: var(--mono); flex-shrink: 0; letter-spacing: .03em; }


/* ── Lucas badge & gain animation ─────────────────── */
.lucas-badge {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 6px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
  min-width: 56px;
  font-family: inherit;
  box-shadow: var(--shadow);
}
.lucas-badge:active { transform: scale(.94); }
.lucas-badge:hover { border-color: var(--accent); background: rgba(215,154,43,.08); }
.lucas-num {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
.lucas-lbl {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--dim);
  letter-spacing: .08em;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Lucas gain pop animation */
.lucas-gain-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  background: var(--accent);
  color: var(--text);
  padding: 16px 32px;
  border-radius: var(--r-l);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.01em;
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 12px 36px rgba(215,154,43,.55), 0 0 0 5px rgba(215,154,43,.18);
  animation: lucasGain 2s ease forwards;
  white-space: nowrap;
}
/* Phase 10.3: Negative (Spend) hat andere Farbe — rotbraun, dezenter. */
.lucas-gain-pop.lucas-gain-neg {
  background: var(--red);
  color: #fff;
  box-shadow: 0 12px 36px rgba(196,92,92,.45), 0 0 0 5px rgba(196,92,92,.16);
}
@keyframes lucasGain {
  0%   { opacity: 0; transform: translate(-50%, -30%) scale(.5) rotate(-3deg); }
  18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(2deg); }
  35%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  78%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(.85); }
}

/* Phase 10.4: Info-Button neben der Header-Pill */
.lucas-info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  border: var(--bw) solid var(--border);
  color: var(--mid);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.lucas-info-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.08);
}

/* Phase 10.4: "Was sind Lucas?" Intro/Info Modal — wiederverwendet die
   nudge-overlay-Animation, aber mit etwas mehr Platz für Erklärungen. */
.lucas-intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nudgeFadeIn .25s ease;
}
.lucas-intro-card {
  background: var(--surface);
  border: var(--bw) solid var(--accent);
  border-radius: var(--r-l);
  padding: 28px 24px 22px;
  max-width: 420px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
  animation: nudgeSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
}
.lic-emoji {
  font-size: 48px;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1;
}
.lic-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.lic-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  margin-bottom: 18px;
}
.lic-section {
  margin-bottom: 16px;
}
.lic-section-h {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.lic-section-h .lic-icon {
  font-size: 16px;
  line-height: 1;
}
.lic-section-body {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
}
.lic-section-body strong { color: var(--text); }
.lic-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12px;
}
.lic-table td {
  padding: 4px 0;
  color: var(--mid);
}
.lic-table td:last-child {
  text-align: right;
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
}
.lic-divider {
  border-top: 2px solid var(--border);
  margin: 14px 0;
}
.lic-balance-line {
  background: rgba(215,154,43,.1);
  border: var(--bw) solid rgba(215,154,43,.3);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  box-shadow: var(--shadow);
}
.lic-balance-num {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
  font-family: var(--sans);
}
.lic-close {
  width: 100%;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s;
}
.lic-close:hover { transform: scale(.98); }



/* ── Bonus Lektionen cards ────────────────────── */
.bonus-lek-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bonus-lek-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-family: var(--sans);
  cursor: default;
  transition: all .15s;
  width: 100%;
  box-shadow: var(--shadow);
}
.bonus-lek-card.unlocked {
  cursor: pointer;
  border-color: rgba(215,154,43,.3);
}
.bonus-lek-card.unlocked:active { transform: scale(.98); }
.bonus-lek-card.unlocked:hover { border-color: var(--accent); background: rgba(215,154,43,.05); }
.bonus-lek-card.affordable {
  border-style: dashed;
  border-color: rgba(215,154,43,.55);
  background: rgba(215,154,43,.04);
}
.blc-icon {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--accent);
  flex-shrink: 0;
  width: 36px;
  text-align: center;
  background: rgba(215,154,43,.1);
  border: var(--bw) solid rgba(215,154,43,.3);
  border-radius: var(--r);
  padding: 8px 0;
  line-height: 1;
  box-shadow: var(--shadow);
}
.bonus-lek-card.locked .blc-icon {
  color: var(--dim);
  background: var(--surface2, rgba(0,0,0,.04));
  border-color: var(--border);
  opacity: 1 !important;
}
.blc-info { flex: 1; min-width: 0; }
.blc-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.blc-sub {
  font-size: 11px;
  color: var(--dim);
  font-family: var(--mono);
  letter-spacing: .02em;
  line-height: 1.35;
}
.blc-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: .04em;
  flex-shrink: 0;
  font-weight: 700;
}
.blc-cost { flex-shrink: 0; }
.blc-buy {
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  padding: 8px 14px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
}
.blc-buy:hover { opacity: .9; }
.blc-buy:active { transform: scale(.95); }
.blc-buy:disabled {
  background: var(--surface2, var(--border));
  color: var(--dim);
  cursor: not-allowed;
}

/* Bonus lesson view — reading mode */
#s-bonus-lek-view { padding-bottom: var(--etp-bottom-safe) !important; }
.blv-intro {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 22px;
  box-shadow: var(--shadow);
}
.blv-section {
  margin-bottom: 22px;
}
.blv-section-h {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: var(--bw) solid var(--border);
}
.blv-example {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-bottom: 6px;
  box-shadow: var(--shadow);
}
.blv-es {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.blv-es .spk-btn { flex-shrink: 0; margin-top: 1px; }
.blv-es > span { flex: 1; }
.blv-de {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 13px;
  color: var(--mid);
  margin-top: 4px;
  font-style: italic;
  line-height: 1.4;
}
.blv-vocab {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.blv-vocab-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1.5px dashed rgba(43, 32, 24, .3);
  font-family: var(--sans);
}
.blv-vocab-row:last-child { border-bottom: none; }
.blv-vocab-es {
  font-weight: 700;
  color: var(--text);
  font-size: 13px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--serif);
  font-weight: 700;
}
.blv-vocab-es .spk-btn { flex-shrink: 0; }
.blv-vocab-de {
  font-size: 11px;
  color: var(--mid);
  text-align: right;
  font-family: var(--serif);
  font-weight: 500;
}

/* ── FERIA DIALOG ─────────────────────────── */
#s-feria-dialog { padding-bottom: var(--etp-bottom-safe) !important; }
.fd-progress { display:flex; gap:4px; margin-bottom:16px; }
.fd-progress-dot { flex:1; height:4px; border-radius: var(--r-xs); background:var(--border); transition:background .25s; }
.fd-progress-dot.done { background:var(--green); }
.fd-progress-dot.current { background:var(--accent); }
.fd-stage { background:var(--surface); border:1px solid var(--border); border-radius: var(--r); padding:18px 16px; min-height:300px; }
.fd-coach { display:flex; align-items:flex-start; gap:12px; padding:14px; background:rgba(215,154,43,.08); border:1px solid var(--border); border-radius: var(--r); margin-bottom:16px; }
.fd-coach-img { width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:center top; flex-shrink:0; border:1.5px solid var(--accent); background:var(--surface2); }
.fd-coach-text { font-size:13px; line-height:1.55; color:var(--text); flex:1; }
.fd-coach-text strong { color:var(--accent); }
.fd-bubble-row { display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.fd-bubble-row.right { flex-direction:row-reverse; }
.fd-char-img { width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:center top; flex-shrink:0; border:1.5px solid var(--border); background:var(--surface2); }
.fd-bubble { background:var(--surface2); border-radius: var(--r); padding:10px 13px; max-width:78%; border:var(--bw) solid var(--border); box-shadow:var(--shadow); }
.fd-bubble-row.right .fd-bubble { background:var(--accent-d); }
.fd-bubble-name { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; }
.fd-bubble-es { font-size:14px; font-weight:600; color:var(--text); line-height:1.4; }
.fd-bubble-de { font-size:12px; color:var(--mid); margin-top:3px; font-style:italic; line-height:1.4; }
.fd-prompt { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--mid); margin:18px 0 10px; }
.fd-choices { display:flex; flex-direction:column; gap:8px; }
.fd-choice { background:var(--surface); border:1px solid var(--border); border-radius: var(--r-s); padding:12px 14px; cursor:pointer; text-align:left; transition:all .15s; font-family:var(--sans); width:100%; }
.fd-choice:hover:not(:disabled) { border-color:var(--accent); background:rgba(215,154,43,.05); }
.fd-choice:disabled { cursor:not-allowed; }
.fd-choice.correct { border-color:var(--green); background:var(--green-d); }
.fd-choice.wrong { border-color:var(--red); background:var(--red-d); opacity:.65; }
.fd-choice-es { font-size:14px; font-weight:600; color:var(--text); }
.fd-choice-de { font-size:11px; color:var(--mid); margin-top:3px; font-style:italic; }
.fd-feedback { background:var(--green-d); border:var(--bw) solid var(--border); border-radius: var(--r); padding:11px 14px; margin-top:14px; font-family:var(--serif); font-weight:500; font-size:14px; color:var(--text); line-height:1.5; display:none; box-shadow:var(--shadow); }
.fd-feedback.show { display:block; }
.fd-feedback.bad { background:var(--red-d); }
.fd-feedback strong { color:var(--accent); }
.fd-input-wrap { margin-top:10px; }
.fd-input { width:100%; background:var(--surface2); border:var(--bw) solid var(--border); border-radius: var(--r); padding:14px; color:var(--text); font-family:var(--mono); font-size:18px; text-align:center; outline:none; box-shadow:var(--shadow); }
.fd-input:focus { border-color:var(--accent); box-shadow:3px 3px 0 var(--accent); }
.fd-input.ok { border-color:var(--green); background:var(--green-d); }
.fd-input.err { border-color:var(--red); background:var(--red-d); }
.fd-summary { text-align:center; padding:30px 16px 20px; }
.fd-summary-icon { font-size:44px; margin-bottom:10px; }
.fd-summary-title { font-size:22px; font-weight:800; margin-bottom:8px; letter-spacing:-.01em; }
.fd-summary-text { color:var(--mid); font-size:13px; line-height:1.55; margin-bottom:18px; }
.fd-tutor-btn { background:var(--surface); border:1.5px dashed var(--accent); border-radius: var(--r); padding:14px 18px; width:100%; cursor:pointer; transition:all .15s; font-family:var(--sans); margin-bottom:10px; }
.fd-tutor-btn:hover { background:rgba(215,154,43,.05); }
.fd-tutor-icon { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.fd-tutor-label { font-size:14px; font-weight:600; color:var(--text); }
.fd-tutor-sub { font-size:11px; color:var(--mid); margin-top:3px; }
.fd-tutor-btn:disabled { cursor:not-allowed; }

/* ── FlashDialog AI-Chat (Phase 9b) ───────── */
.fd-chat-wrap { display:flex; flex-direction:column; padding:0 4px; }
.fd-chat-bubbles { max-height:62vh; overflow-y:auto; padding:4px 2px 8px; scroll-behavior:smooth; }
.fd-user-initial { display:flex; align-items:center; justify-content:center; background:var(--accent); color: var(--text); font-weight:700; font-family:var(--sans); font-size:18px; border:1.5px solid var(--accent); }
.fd-chat-textarea { box-sizing:border-box; }
.fd-chat-textarea:focus { outline:none; border-color:var(--accent); }
.fd-chat-textarea:disabled { opacity:.55; cursor:not-allowed; }
.fd-typing { display:inline-flex; gap:4px; padding:6px 0 2px; }
.fd-typing span { width:7px; height:7px; border-radius:50%; background:var(--mid); opacity:.4; animation:fdTypingDot 1.1s infinite ease-in-out; }
.fd-typing span:nth-child(2) { animation-delay:.15s; }
.fd-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes fdTypingDot {
  0%, 60%, 100% { opacity:.3; transform:translateY(0); }
  30% { opacity:.95; transform:translateY(-3px); }
}

/* ── Speaker / TTS button ────────────────── */
.spk-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:var(--surface2); color:var(--accent); cursor:pointer; transition:all .15s; padding:0; vertical-align:middle; flex-shrink:0; }
.spk-btn:hover { background:rgba(215,154,43,.1); border-color:var(--accent); }
.spk-btn:active { transform:scale(.9); }
.spk-btn.speaking { background:var(--accent); color: var(--text); border-color:var(--accent); animation:spkPulse 1.2s ease-in-out infinite; }
.spk-btn svg { width:16px; height:16px; display:block; }
.spk-btn-lg { width:38px; height:38px; }
.spk-btn-lg svg { width:18px; height:18px; }
.spk-btn-sm { width:26px; height:26px; }
.spk-btn-sm svg { width:13px; height:13px; }
@keyframes spkPulse { 0%,100%{box-shadow:0 0 0 0 rgba(215,154,43,.5)} 50%{box-shadow:0 0 0 6px rgba(215,154,43,0)} }

.vcn-word-row { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:8px; }
.vcn-word-row .vcn-word { margin-bottom:0; }

.spk-toggle { display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius: var(--r); background:var(--surface); border:1px solid var(--border); font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mid); cursor:pointer; transition:all .15s; }
.spk-toggle.on { background:rgba(215,154,43,.12); border-color:var(--accent); color:var(--accent); }
.spk-toggle svg { width:11px; height:11px; }

/* ── Lucas Nudge Popup ─────────────────────── */
.lucas-nudge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: nudgeFadeIn .25s ease;
}
@keyframes nudgeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lucas-nudge-card {
  background: var(--surface);
  border: var(--bw) solid var(--accent);
  border-radius: var(--r-l);
  padding: 24px 22px;
  max-width: 360px;
  width: 100%;
  text-align: center;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
  animation: nudgeSlideUp .35s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes nudgeSlideUp {
  from { opacity: 0; transform: translateY(30px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lnc-icon {
  font-size: 44px;
  margin-bottom: 10px;
}
.lnc-title {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.lnc-text {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 14px;
}
.lnc-balance {
  background: rgba(215,154,43,.1);
  border: var(--bw) solid rgba(215,154,43,.3);
  border-radius: var(--r);
  padding: 10px;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  box-shadow: var(--shadow);
}
.lnc-num {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
}
.lnc-lbl {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lnc-buttons {
  display: flex;
  gap: 8px;
}
.lnc-btn-secondary, .lnc-btn-primary {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, opacity .15s;
}
.lnc-btn-secondary {
  background: transparent;
  border: var(--bw) solid var(--border);
  color: var(--mid);
  box-shadow: var(--shadow);
}
.lnc-btn-primary {
  background: var(--accent);
  border: var(--bw) solid var(--accent);
  color: var(--text);
  box-shadow: var(--shadow);
}
.lnc-btn-secondary:active, .lnc-btn-primary:active { transform: scale(.96); }


/* ── Activity card with Guía ──────────────────── */
.activity-wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: 14px;
  position: relative;
  flex-wrap: nowrap !important;
}
.activity-wrap .activity-card {
  flex: 1 1 auto;
  margin-bottom: 0;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: var(--shadow);
}
.activity-toki-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.activity-toki {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(1px 2px 4px rgba(0,0,0,.10));
}
.activity-toki-bubble {
  flex: 1;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.activity-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.4;
}
.activity-line:last-child { margin-bottom: 0; }
.act-num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  min-width: 44px;
  text-align: right;
  letter-spacing: -.02em;
  line-height: 1;
}
.activity-line strong { font-weight: 700; color: var(--text); }
.activity-empty {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mid);
  font-style: italic;
}
.activity-due {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--border);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
}
.act-due-num {
  background: var(--accent);
  color: var(--text);
  padding: 3px 10px;
  border-radius: var(--r);
  font-weight: 700;
  font-size: 13px;
}
@media (max-width: 380px) {
  .activity-wrap .activity-card { padding: 14px 14px; }
  .activity-toki { width: 48px; height: 48px; }
  .activity-toki-bubble { font-size: 14px; }
  .act-num { font-size: 28px; min-width: 40px; }
}

/* ── Float start button + swipe hint ─────────── */
.vocab-start-float, .swipe-btn-floating {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 540px;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  z-index: 500;
  transition: transform .12s, box-shadow .15s;
  text-align: left;
}
.vocab-start-float:active { transform: translateX(-50%) scale(.98); }
.vocab-start-float .vsf-sub {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(26,26,26,.65);
  margin-top: 2px;
  text-transform: uppercase;
}

/* Swipe hint pulse on mobile */
@media (max-width: 600px) {
  .swipe-btn::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 5l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: swipeHint 2.4s infinite;
  }
}
@keyframes swipeHint {
  0%, 100% { opacity: 0; transform: translate(0, -50%); }
  40% { opacity: .6; transform: translate(8px, -50%); }
  60% { opacity: .6; transform: translate(8px, -50%); }
}


.blv-icon-mono {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .05em;
  background: rgba(215,154,43,.12);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 8px 14px;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: var(--shadow);
}


/* ── App brand header (¡Cachai!) ─────────────── */
/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12 — HEADER REFRESH
   Dreigeteilter Top-Header (Toki-fly · Status-Pill · Racha+Lucas), darunter
   eine schmale Sub-Row mit Datum + Hola-Greeting.

   Phase 12.5: Header wandert aus dem s-dashboard heraus und steht global
   vor allen Screens — bleibt damit auf jedem Tab konstant sichtbar.
   ═══════════════════════════════════════════════════════════════════════════ */

#app-header-global {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px 20px 4px;
  background: var(--bg);
}

@media (min-width: 600px) {
  #app-header-global { padding: 28px 32px 6px; }
}

.app-header-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
}

.app-header-center {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.app-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Status-Pill in der Header-Mitte ─── zwei States:
   logged-out: gelber Akzent, "Anmelden" als Call-to-Action
   logged-in:  dezent, zeigt den Usernamen, Klick führt zum Account */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  padding: 6px 14px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: all .15s ease;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: var(--shadow);
}
.status-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.status-pill:active { transform: scale(.96); }

.status-pill-logged-out {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.status-pill-logged-out:hover {
  background: var(--accent-d, var(--accent));
  color: var(--text);
  filter: brightness(.95);
}

.status-pill-logged-in .status-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Lucas-Pillen-Wrap muss relative sein, damit das "?"-Overlay genau positioniert
   wird. Racha und Lucas stehen jetzt direkt nebeneinander (statt untereinander). */
.lucas-badge-wrap {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 5;
}

/* Phase 12: "?" als Overlay in der oberen rechten Ecke der Lucas-Pille */
.lucas-info-btn.lucas-info-overlay {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  z-index: 6;
}

/* Sub-Row: Hola-Greeting links · Datum rechts (oder beides linksbündig auf
   schmalen Screens — Greeting bleibt dann oben dank wrap statt wrap-reverse) */
.app-header-sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  flex-wrap: wrap;
}
.app-header-sub .app-brand-greet {
  margin-top: 0 !important;
  font-size: 18px !important;
}
.app-header-sub .app-brand-weekday {
  margin-top: 0 !important;
}

@media (min-width: 600px) {
  .app-header-sub .app-brand-greet { font-size: 22px !important; }
}

/* ── Phase 12.2: Placeholder-Cards für Module/Hilfe ── */
.placeholder-card {
  max-width: 480px;
  margin: 80px auto 40px;
  padding: 32px 28px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  text-align: center;
}
.placeholder-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: -.01em;
}
.placeholder-body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 24px;
}
.placeholder-btn {
  background: transparent;
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.placeholder-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12.3 — HOME-REFRESH
   ═══════════════════════════════════════════════════════════════════════════ */

/* 3 Fortschritts-Tiles + Toki-point rechts ───────────────────────────── */
.home-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.home-progress-tiles {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  min-width: 0;
}
.home-tile {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  box-shadow: var(--shadow);
}
.home-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.home-tile:active { transform: scale(.97); }
.home-tile-num {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 5px;
}
.home-tile-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.005em;
}
.home-tile-sub {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.home-progress-toki {
  width: 88px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.1));
  user-select: none;
  pointer-events: none;
}
@media (max-width: 380px) {
  .home-progress-toki { width: 64px; }
  .home-tile-num { font-size: 22px; }
  .home-tile { padding: 12px 6px; min-height: 78px; }
  .home-tile-label { font-size: 11px; }
}

/* Empezar-Karte: minimal, ohne die alten Activity-Lines ───────────── */
.activity-card.empezar-card { padding-bottom: 14px; }

/* Fehler-Karte: Refactor laut Phase 12 ─────────────────────────────── */
.error-card { position: relative; cursor: pointer; }
.error-card .error-card-eyebrow { display: none !important; }  /* Eyebrow "Übungs-Modus" raus */

/* Phase 12.5: Count + Trash sitzen rechts oben nebeneinander im Head,
   nicht mehr Trash absolute über dem Count. */
.error-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.error-card-trash {
  background: transparent;
  border: none;
  color: var(--dim);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--r);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.error-card-trash:hover {
  color: var(--red);
  background: rgba(196,92,92,.08);
}
.error-card-trash:active { transform: scale(.92); }

/* Module-Pills als echte Buttons mit Hover ─── */
button.error-mod-pill {
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s ease;
}
button.error-mod-pill:hover {
  background: rgba(0,0,0,.04);
  transform: translateY(-1px);
}
button.error-mod-pill:active { transform: scale(.96); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12.4 — MODULE-PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.module-page-header {
  position: relative;
  padding-bottom: 18px;
  padding-right: 90px;            /* Platz für Toki rechts */
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
  min-height: 84px;
}
.module-page-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.module-page-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.module-page-sub {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--dim);
  margin-top: 2px;
}
.module-page-toki {
  position: absolute;
  bottom: 14px;
  right: 0;
  width: 78px;
  height: auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.08));
}

.module-grid-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;        /* alle Kacheln gleich hoch */
  gap: 10px;
  margin-bottom: 24px;
  align-items: stretch;
}
/* Lektionen-Tile spannt beide Spalten — visuell den Lerneinheits-Charakter
   hervorheben und das ungerade 5te-Tile-Problem im 2-Spalt-Grid lösen. */
.mod-tile-wide {
  grid-column: 1 / -1;
}
/* Text darf umbrechen statt abgeschnitten zu werden ("Zeiten im Kontext",
   "Unregelm. Verben" passten nicht einzeilig in die schmale Kachel). */
.mod-tile { display: flex; flex-direction: column; min-width: 0; }
/* Gleiche Theme-Kollision wie bei .action-card: die Kacheln tragen
   class="mod-tile btn", das Theme-.btn erzwingt nowrap/uppercase/full-
   radius. Gezielt neutralisieren. */
.module-grid-v2 .mod-tile.btn {
  white-space: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: var(--r) !important;
  font-family: var(--sans) !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}
.mod-tile .mt-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.2;
  font-size: 14px !important;
}
.mod-tile .mt-sub { white-space: normal; overflow-wrap: anywhere; }

@media (min-width: 600px) {
  .module-page-title { font-size: 36px; }
  .module-grid-v2 { gap: 12px; }
  .module-page-toki { width: 88px; }
}
@media (max-width: 380px) {
  .module-page-header { padding-right: 70px; min-height: 76px; }
  .module-page-toki { width: 62px; bottom: 12px; }
  .module-page-title { font-size: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12.5 — ACCOUNT-CARD (s-account)
   ═══════════════════════════════════════════════════════════════════════════ */
.account-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: var(--shadow);
}
.account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 2px solid var(--border);
}
.account-row:last-of-type { border-bottom: none; padding-bottom: 18px; }
.account-row-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.account-row-value {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.account-logout-btn {
  margin-top: 8px;
  width: 100%;
  padding: 12px !important;
  font-family: var(--sans);
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text) !important;
  background: var(--accent) !important;
  border: var(--bw) solid var(--border) !important;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.account-logout-btn:active { box-shadow: none; transform: translate(1px, 1px); }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12.6 — HILFE: Zeitformen-Referenz (zr-*) im hellen Theme
   ═══════════════════════════════════════════════════════════════════════════ */
.zr-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.zr-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--border);
}
.zr-title-row .badge {
  font-size: 12px !important;
  padding: 5px 11px;
}
.zr-section { margin-bottom: 14px; }
.zr-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
}
.zr-when {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  font-family: var(--serif);
  font-weight: 500;
}
.zr-when-de {
  font-size: 13px;
  color: var(--mid);
  font-style: italic;
  margin-top: 3px;
  font-family: var(--serif);
  font-weight: 500;
}
.zr-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.zr-signal {
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 5px 10px;
  box-shadow: var(--shadow);
}
.zr-signal-es {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.zr-signal-de {
  font-size: 10px;
  color: var(--mid);
  margin-top: 1px;
}
.zr-form-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 5px;
}
.zr-form-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  min-width: 100px;
  flex-shrink: 0;
}
.zr-form-row-val {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  word-break: break-word;
}
.zr-tip {
  background: var(--surface2);
  
  border-radius: 0 4px 4px 0;
  padding: 10px 13px;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.55;
}


.app-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.app-brand-logo {
  height: 56px !important;
  width: auto !important;
  min-width: 50px;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.app-brand-wrap {
  min-height: 60px;
}
.app-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.app-brand-title {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1;
}
.app-brand-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.app-brand-greet {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
  margin-top: 14px;
}
.agreet-dot { color: var(--accent); }
.app-brand-weekday {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: .04em;
  margin-top: 4px;
}
@media (min-width: 600px) {
  .app-brand-logo { height: 68px; }
  .app-brand-title { font-size: 36px; }
}


/* ── Splash Screen (Specht + ¡Cachai!) ────────── */
.splash-screen {
  position: fixed;
  inset: 0;
  background: var(--bg, var(--surface));
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .45s ease;
}
/* 0.28.7: Splash bleibt bis die App HYDRIERT ist. JS setzt .splash-done
   (nach dem ersten renderDashboard im Sync-Callback) → weiches Ausblenden. */
.splash-screen.splash-done { opacity: 0; pointer-events: none; }
.splash-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(215,154,43,.08), transparent 60%);
  pointer-events: none;
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
}
.splash-logo {
  height: 130px;
  width: auto;
  opacity: 0;
  transform: scale(.6) rotate(-8deg);
  animation: splashLogoIn 1s cubic-bezier(.34, 1.56, .64, 1) .1s forwards,
             splashLogoBounce 2.4s ease 1.1s infinite;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.18));
}
@keyframes splashLogoIn {
  0%   { opacity: 0; transform: scale(.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes splashLogoBounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.04) rotate(-2deg); }
}
.splash-cachai {
  font-family: var(--display);
  font-size: 68px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -.01em;
  margin-top: 18px;
  opacity: 0;
  transform: translateY(20px) scale(.9);
  animation: splashTextIn .7s cubic-bezier(.34, 1.56, .64, 1) .55s forwards;
  line-height: 1;
}
.splash-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 14px;
  opacity: 0;
  animation: splashSubIn .5s ease .9s forwards;
}
@keyframes splashTextIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes splashSubIn {
  to { opacity: 1; }
}
@keyframes splashFadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* 0.28.7: dezenter Lade-Spinner unter dem Schriftzug */
.splash-spinner {
  width: 26px;
  height: 26px;
  margin-top: 22px;
  border: 3px solid rgba(215,154,43,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: splashSpin .7s linear infinite, splashSubIn .5s ease 1.1s forwards;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
@media (max-width: 480px) {
  .splash-logo { height: 110px; }
  .splash-cachai { font-size: 52px; }
  .splash-sub { font-size: 10px; letter-spacing: .22em; }
}


/* ── Onboarding screen ─────────────────────── */
.onboard-screen {
  position: fixed;
  inset: 0;
  background: var(--bg, var(--surface));
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.onboard-screen.active { display: flex; }
.onboard-card {
  max-width: 380px;
  width: 100%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 32px 24px;
  text-align: center;
}
.onboard-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.onboard-title {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.onboard-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--dim);
  margin-bottom: 24px;
}
.onboard-input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 17px;
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text);
  outline: none;
  margin-bottom: 16px;
  text-align: center;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.onboard-input:focus {
  border-color: var(--accent);
}
.onboard-btn {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .1s;
}
.onboard-btn:active { transform: scale(.96); }
.onboard-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}


/* ── Intro screen ¡Cachai! brand ─────────────── */
.intro-cachai {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1;
  margin-top: 6px;
  margin-bottom: 0;
  opacity: 0;
  animation: iUp .5s 1.0s ease forwards;
}
@media (min-width: 600px) {
  .intro-cachai { font-size: 34px; }
}


/* ── Error Card (Alle Fehler üben) ─────────────── */
.error-card {
  background: var(--surface);
  border: var(--bw) solid var(--accent);
  border-radius: var(--r);
  padding: 16px 18px;
  margin-bottom: 14px;
  cursor: default;
  position: relative;
  overflow: hidden;
}
.error-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(215,154,43,.06), transparent 60%);
  pointer-events: none;
}
.error-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  position: relative;
}
.error-card-title { display: flex; flex-direction: column; gap: 4px; }
.error-card-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.error-card-headline {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
}
.error-card-count {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  text-align: right;
}
.error-card-count small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 4px;
}
.error-card-modules {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  position: relative;
}
.error-mod-pill {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--r-l);
  background: var(--bg);
  border: var(--bw) solid var(--border);
  letter-spacing: .03em;
  box-shadow: var(--shadow);
}
.error-mod-pill strong { font-weight: 800; margin-left: 3px; }
.error-card-desc {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--mid);
  line-height: 1.45;
  margin-bottom: 14px;
  position: relative;
}
.error-card-actions {
  display: flex;
  gap: 8px;
  position: relative;
}
.error-btn-primary {
  flex: 1;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .1s;
}
.error-btn-primary:active { transform: scale(.97); }
.error-btn-ghost {
  background: transparent;
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: all .1s;
  box-shadow: var(--shadow);
}
.error-btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.error-btn-ghost:active { transform: scale(.97); }


/* ── ANSWER ELEMENTS — größere Schrift für bessere Lesbarkeit (Mobile) ── */
.mc-btn {
  font-size: 19px !important;
  padding: 18px !important;
  line-height: 1.4;
}
.vocab-mc-btn {
  font-size: 18px !important;
  padding: 18px 16px !important;
  font-weight: 500 !important;
  line-height: 1.4;
}
.vocab-mc-btn.mc-ok,
.vocab-mc-btn.mc-bad,
.mc-btn.mc-ok,
.mc-btn.mc-bad {
  font-weight: 700 !important;
}

/* Tipp/Translate Input Fields */
.translate-inp,
.lek-question {
  font-size: 18px !important;
  padding: 16px 18px !important;
  line-height: 1.5;
}

/* Question texts */
.lek-question { font-size: 19px !important; line-height: 1.5; }
.gate-q-text  { font-size: 19px !important; line-height: 1.6; }
.kontext-q    { font-size: 20px !important; line-height: 1.6; }

/* Vokabel-Card frontside text (das deutsche Wort beim Tippen) */
.vocab-card-front,
.word-card,
.wcard {
  font-size: 22px !important;
}

/* Ex-Bereich allgemein für Frage-Texte */
.ex-question,
.ex-prompt,
.ex-q {
  font-size: 20px !important;
  line-height: 1.5;
}

/* Vocab Tipp-Modus Input field falls anders heißt */
input[type="text"].translate-inp,
input.translate-inp {
  font-size: 19px !important;
}

@media (max-width: 380px) {
  .mc-btn       { font-size: 17px !important; padding: 16px !important; }
  .vocab-mc-btn { font-size: 16px !important; padding: 16px 14px !important; }
  .lek-question { font-size: 17px !important; }
  .gate-q-text  { font-size: 17px !important; }
  .kontext-q    { font-size: 18px !important; }
  .vocab-card-front, .word-card, .wcard { font-size: 19px !important; }
}


/* ── Onboarding Step 2: Gender + Why-Link ─────────── */
.onboard-why-link {
  display: inline;
  background: none;
  border: none;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
}
.onboard-why-link:hover { opacity: .7; }

.onboard-gender-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.onboard-gender-btn {
  width: 100%;
  padding: 14px 18px;
  background: var(--bg);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.onboard-gender-btn:hover {
  border-color: var(--accent);
  background: var(--accent-d, rgba(215,154,43,.08));
}
.onboard-gender-btn:active {
  transform: scale(.97);
}
.onboard-gender-btn.selected {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}

/* Why-popup (overlay) */
.onboard-why-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.onboard-why-popup.active { display: flex; }
.onboard-why-card {
  max-width: 380px;
  width: 100%;
  background: var(--surface);
  border-radius: var(--r);
  padding: 28px 24px;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
}
.onboard-why-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.onboard-why-title {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}
.onboard-why-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 20px;
}
.onboard-why-body em {
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
}
/* ═════════════════════════════════════════════════════════════
   DESIGN REFRESH — Wärme, Lesbarkeit, Einheit
   ═════════════════════════════════════════════════════════════ */

/* ── PASS 1: Body-Typografie wärmer ─── */
body { font-size: 15px !important; line-height: 1.55 !important; }

/* ── PASS 1: Header — Greeting prominenter, Mono-Labels weg ─── */
.app-brand-greet {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  margin-top: 14px !important;
  color: var(--text) !important;
}
.app-brand-weekday {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 2px !important;
}
.app-brand-title { font-family: var(--display) !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.app-brand-sub {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  opacity: .8 !important;
}

/* Streak + Lucas Pills — runder, freundlicher, Sans statt Mono */
.streak-box {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  min-width: 64px;
  position: relative !important;
}
.streak-box::before {
  content: '';
  position: absolute;
  top: -8px;
  right: -6px;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8743a' stroke='%23c0392b' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
.streak-n { font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important; }
.streak-l {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 3px !important;
  opacity: .85 !important;
}

.lucas-badge {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 10px 14px !important;
  min-width: 64px !important;
}
.lucas-num { font-size: 22px !important; }
.lucas-lbl {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 3px !important;
  opacity: .85 !important;
}

/* ── PASS 2: Module-Tiles neu — Icons, mehr Atem ─── */
#module-grid { gap: 10px !important; }
.mod-tile {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 18px 16px !important;
  transition: transform .15s, box-shadow .15s, border-color .15s !important;
  position: relative;
  overflow: hidden;
  min-height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mod-tile:hover {
  border-color: rgba(215,154,43,.35) !important;
  box-shadow: var(--shadow-accent);
  transform: translateY(-1px);
}
.mod-tile:active { transform: scale(.98) !important; }

/* Old "tag" caps (Wortschatz/Grammatik) — much softer */
.mt-tag {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  opacity: .7 !important;
}

/* Buchstaben-Key wegblenden, durch Icon ersetzt */
.mt-key {
  display: none !important;
}

.mt-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  margin-top: 2px !important;
}
.mt-sub {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--dim) !important;
  margin-top: 4px !important;
  letter-spacing: .03em !important;
}

/* Decorative icon — top-right corner of tile, derived from tile content */
.mod-tile::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(215,154,43,.08);
  border: var(--bw) solid rgba(215,154,43,.18);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
}

/* Per-tile distinct SVG icons (lucide-style stroke icons, encoded as data URIs) */
/* Vokabeln — book-open */
.mod-tile[onclick*="vocab"]::after {
  background-color: rgba(215,154,43,.10);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8935a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}
/* Konjugieren — pencil */
.mod-tile[onclick*="verben"]::after {
  background-color: rgba(58,111,168,.10);
  border-color: rgba(58,111,168,.20);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a6fa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}
/* Zeiten im Kontext — clock */
.mod-tile[onclick*="kontext"]::after {
  background-color: rgba(122,82,176,.10);
  border-color: rgba(122,82,176,.20);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a52b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
}
/* Lektionen — map-pin (Santiago/Chile-Bezug) */
.mod-tile[onclick*="lektionen"]::after {
  background-color: rgba(192,57,43,.08);
  border-color: rgba(192,57,43,.18);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Unregelmäßige — zap */
.mod-tile[onclick*="irr"]::after {
  background-color: rgba(46,143,90,.10);
  border-color: rgba(46,143,90,.20);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e8f5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='13 2 3 14 12 14 11 22 21 10 12 10 13 2'/%3E%3C/svg%3E");
}
/* Zeitformen-Referenz — table */
.mod-tile[onclick*="zeitref"]::after {
  background-color: rgba(122,82,176,.08);
  border-color: rgba(122,82,176,.18);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a52b0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3C/svg%3E");
}

/* Two-column tiles: leave room for top-right icon */
.mod-tile { padding-right: 60px !important; }

/* Mobile: Cat-chip-Auswahl im Kontext-Tab einspaltig (Modul-Tiles bleiben 2-spaltig) */
@media (max-width: 700px) {
  #tab-content-kontext .cat-chip-grid { grid-template-columns: 1fr !important; }
}

/* Help/Reference toggle icons — replace the bullet with proper SVGs */
.coll-icon-help, .coll-icon-table {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--r) !important;
  background-color: rgba(215,154,43,.10) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  flex-shrink: 0;
  margin-right: 10px;
  display: inline-block;
}
.coll-icon-help {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8935a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}
.coll-icon-table {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8935a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='3' y1='9' x2='21' y2='9'/%3E%3Cline x1='3' y1='15' x2='21' y2='15'/%3E%3Cline x1='9' y1='3' x2='9' y2='21'/%3E%3Cline x1='15' y1='3' x2='15' y2='21'/%3E%3C/svg%3E");
}

/* ── UNIFIED TILE TYPOGRAPHY — gleiche Schriftgrößen über alle Kacheln ───
   Titel:  17px / 700 / sans / -.01em letter-spacing
   Sub:    13px / 500 / sans / mid-color
   ───────────────────────────────────────────────────────────────── */

/* Module-Tiles (Startseite) */
.mt-name {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--text) !important;
}
.mt-sub {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--dim) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-top: 3px !important;
  opacity: .9 !important;
}

/* Cat-chip-Tiles (Zeiten-Tab Kategorie-Auswahl) */
.cat-chip-item {
  padding: 14px 14px !important;
  border-radius: var(--r) !important;
  min-height: 64px;
}
.cci-name {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--text) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.cci-cnt {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  margin-top: 2px !important;
  opacity: .9 !important;
}
.cci-key {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: var(--r) !important;
  background: rgba(215,154,43,.10) !important;
  color: var(--accent) !important;
  letter-spacing: .03em !important;
}

/* Help-Toggle-Kacheln (Signalwörter / Zeitformen) */
.collapsible-toggle {
  padding: 14px 14px !important;
  border-radius: var(--r) !important;
  min-height: 64px;
}
.collapsible-toggle > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.collapsible-toggle > div > div:first-child {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--text) !important;
}
.collapsible-toggle > div > div:not(:first-child) {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  opacity: .9 !important;
}

/* Vokabel-Modus-Karten (Multiple Choice / Tippen) */
.vmc-title {
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  color: var(--text) !important;
  margin-bottom: 3px !important;
}
.vmc-sub {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: .9 !important;
}
.vocab-mode-card {
  padding: 14px !important;
  border-radius: var(--r) !important;
  min-height: 64px;
}

/* Module section label */
#home-module-label {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  margin-bottom: 12px !important;
  opacity: .85 !important;
}

/* ── PASS 1: Activity card overrides (slim) ─── */
.activity-line { font-size: 14px !important; }

/* 0.29.16: Die alte "Verschweißungs"-Generation (Card + Panel + Naht
   als Einheit) ist RAUS — Role Model ist die freie Vokabel-Anordnung.
   Nur die display-Regeln bleiben. */
#ex-mode-tippen.hidden, #ex-mode-mc.hidden { display: none !important; }
#ex-fb.hidden { display: none !important; }

/* Lektion-Übung */
.lek-question {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: 22px 22px 0 0 !important;
  border-bottom: none !important;
  padding: 20px 18px !important;
  margin-bottom: 0 !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  box-shadow: var(--shadow);
}
#lek-mc-grid:not(.hidden), #lek-translate-wrap:not(.hidden) {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-top: 2px dashed rgba(215,154,43,.25);
  padding: 16px !important;
  margin: 0 !important;
  box-shadow: var(--shadow);
}
#lek-translate-wrap .translate-inp { margin-bottom: 0 !important; }
#lek-fb {
  border-radius: 0 !important;
  margin: 0 !important;
  
  border-right: 2px solid var(--border);
}
#lek-fb.hidden { display: none !important; }
.lek-question ~ .btn-row:has(.btn-primary:not(.hidden)) {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-top: none;
  border-radius: 0 0 22px 22px !important;
  padding: 14px 16px !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* Kontext-Übung */
/* 0.29.16: Kontext-Verschweißung ebenfalls raus (s.o.). Das Panel um
   die MC-Pills warf trotz border:none-Override weiter seinen Offset-
   Schatten — Fabians "Rahmen rechts und unten". */
#kontext-fb.hidden { display: none !important; }
#kontext-mc-wrap:not(.hidden), #kontext-type-wrap:not(.hidden) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 14px 0 0;
  margin: 0 0 12px;
}

/* Larger, friendlier exercise primary button */
#ex-btn-check, #ex-btn-next,
#lek-btn-check, #lek-btn-next,
#kontext-btn-check, #kontext-btn-next {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 20px !important;
  border-radius: var(--r) !important;
  letter-spacing: -.01em !important;
}

/* ── PASS 1+2: Generelle Mono-Caps-Labels weicher (überall) ─── */
.eyebrow, .ex-label {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--mid) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: .85 !important;
}

/* Counter (z.B. "3 / 20") — Sans, freundlicher */
#ex-counter, #lek-counter, #kontext-ex-counter, #vocab-ex-counter {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mid) !important;
}

/* Score pills im Header der Übungen */
.score-pill {
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: var(--r) !important;
  padding: 5px 11px !important;
}

/* ═════════════════════════════════════════════════════════════
   END DESIGN REFRESH
   ═════════════════════════════════════════════════════════════ */

/* ═════════════════════════════════════════════════════════════
   CULTURA — Sabes que... (Toki Kultur-Karten)
   ═════════════════════════════════════════════════════════════ */

/* Toki des Tages — Vertikale Karte mit Volltext (Phase 12 / Sabes-Que CPT) */
.toki-today-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  
  border-radius: var(--r);
  padding: 18px 20px 20px;
  text-align: left;
  width: 100%;
  box-shadow: var(--shadow);
}
.toki-today-card .tt-banner {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -.01em;
}
.toki-today-card .tt-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.toki-today-card .tt-char {
  flex: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toki-today-card .tt-char img {
  width: 80px;
  height: auto;
  display: block;
}
.toki-today-card .tt-heading { flex: 1; min-width: 0; }
.toki-today-card .tt-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.toki-today-card .tt-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
}
.toki-today-card .tt-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
}
.toki-today-card .tt-text p { margin: 0 0 .6em; }
.toki-today-card .tt-text p:last-child { margin-bottom: 0; }
.toki-today-card .tt-text em {
  font-style: italic;
  color: var(--accent);
  font-weight: 700;
}

/* Cultura tab content */
.cultura-intro {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.cultura-intro-text {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
}
.cultura-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.cultura-pill {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--mid);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: all .15s;
  box-shadow: var(--shadow);
}
.cultura-pill:hover { border-color: var(--border2); color: var(--text); }
.cultura-pill.on {
  border-color: var(--accent);
  background: var(--accent-d);
  color: var(--accent);
}
.cultura-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cultura-card {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s;
  box-shadow: var(--shadow);
}
.cultura-card:hover { border-color: var(--border2); }
.cultura-card.read {
  opacity: .65;
}
.cultura-card.read:hover { opacity: 1; }
.cultura-card .cc-toki {
  flex: 0 0 72px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
}
.cultura-card .cc-toki img {
  width: 72px;
  height: auto;
  display: block;
}
.cultura-card .cc-body { flex: 1; min-width: 0; }
.cultura-card .cc-cat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.cultura-card .cc-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 6px;
}
.cultura-card .cc-text {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
}
.cultura-card .cc-text em {
  font-style: italic;
  color: var(--text);
  font-weight: 700;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .cultura-card .cc-toki { flex: 0 0 56px; }
  .cultura-card .cc-toki img { width: 56px; }
  .toki-today-card { padding: 16px; gap: 12px; }
  .toki-today-card .tt-banner { font-size: 26px; }
  .toki-today-card .tt-char { flex: 0 0 64px; }
  .toki-today-card .tt-char img { width: 64px; }
  .toki-today-card .tt-title { font-size: 22px; }
  .toki-today-card .tt-text { font-size: 13.5px; }
}

/* Sabes-que Preview Overlay — appears before lesson start (~25%) */
.sq-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28, 26, 24, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.sq-preview-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.sq-preview-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  
  border-radius: var(--r);
  padding: 18px 18px 14px 18px;
  max-width: 460px;
  width: 100%;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
  transform: translateY(16px);
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sq-preview-overlay.show .sq-preview-card {
  transform: translateY(0);
}
.sq-preview-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.sq-preview-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.sq-preview-toki {
  flex: 0 0 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.sq-preview-toki img {
  width: 80px;
  height: auto;
  display: block;
}
.sq-preview-content { flex: 1; min-width: 0; }
.sq-preview-cat {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.sq-preview-title {
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  margin-bottom: 6px;
}
.sq-preview-text {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.6;
}
.sq-preview-text em {
  font-style: italic;
  color: var(--text);
  font-weight: 700;
}
.sq-preview-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 6px;
}
.sq-preview-progress {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: var(--r-xs);
  overflow: hidden;
}
.sq-preview-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: var(--r-xs);
}
.sq-preview-btn {
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .12s;
}
.sq-preview-btn:hover { opacity: .9; }
.sq-preview-btn:active { opacity: .7; }
@media (max-width: 480px) {
  .sq-preview-toki { flex: 0 0 60px; }
  .sq-preview-toki img { width: 60px; }
  .sq-preview-title { font-size: 15px; }
  .sq-preview-text { font-size: 12px; }
}

/* Toki Toast — appears at top during lesson start */
/* Toki-Motivations-Overlay — Vollbild, kurz, knackig */
.toki-toast {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(247, 244, 239, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.toki-toast.show {
  opacity: 1;
  pointer-events: auto;
}
.toki-toast .tt-toast-toki {
  display: flex;
  align-items: center;
  justify-content: center;
}
.toki-toast .tt-toast-toki img {
  width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.10));
  transform: translateY(24px) scale(.92);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease;
}
.toki-toast.show .tt-toast-toki img {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.toki-toast .tt-toast-text {
  margin-top: 32px;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  text-align: center;
  letter-spacing: -.01em;
  line-height: 1.18;
  max-width: 440px;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .12s, opacity .35s ease .12s;
}
.toki-toast.show .tt-toast-text {
  transform: translateY(0);
  opacity: 1;
}
@media (max-width: 480px) {
  .toki-toast .tt-toast-toki img { width: 160px; }
  .toki-toast .tt-toast-text { font-size: 26px; margin-top: 24px; max-width: 320px; }
}
@media (max-width: 360px) {
  .toki-toast .tt-toast-toki img { width: 140px; }
  .toki-toast .tt-toast-text { font-size: 22px; }
}

/* ═════════════════════════════════════════════════════════════
   LLAMADAS — Anrufe von Personas (Lebenssimulation Chile)
   ═════════════════════════════════════════════════════════════ */

/* Postkasten-Karte auf Home — Liste pendenter Anrufe */
.call-inbox {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 16px;
}
.call-inbox-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  
  border-radius: var(--r);
  padding: 14px 14px 14px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
  text-align: left;
  width: 100%;
  box-shadow: var(--shadow);
}
.call-inbox-card:hover { border-color: var(--accent); }
.call-inbox-card:active { transform: scale(.99); }
.call-inbox-card.urgent { border-left-color: var(--terracotta); }
.cic-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface2);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.cic-avatar img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top center;
}
.call-inbox-card.urgent .cic-avatar { background: rgba(199,92,42,.10); }
.cic-body { flex: 1; min-width: 0; }
.cic-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2px;
}
.cic-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 2px;
}
.cic-preview {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cic-icon {
  flex: 0 0 24px;
  color: var(--accent);
  font-size: 18px;
  animation: phoneRing 1.6s ease-in-out infinite;
}
.call-inbox-card.urgent .cic-icon { color: var(--terracotta); }
@keyframes phoneRing {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-12deg); }
  20%, 40% { transform: rotate(12deg); }
  50% { transform: rotate(0deg); }
}

/* Anruf-Modal (Vollbild beim Annehmen) */
.call-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(28, 26, 24, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.call-modal-overlay.show { opacity: 1; pointer-events: auto; }
.call-modal {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 28px 24px 22px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  text-align: center;
}
.call-modal-overlay.show .call-modal {
  transform: translateY(0) scale(1);
}
.cm-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cm-avatar {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 6px auto;
  position: relative;
}
.cm-avatar img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.15));
  animation: cmAvatarBob 2s ease-in-out infinite;
}
@keyframes cmAvatarBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.cm-name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.cm-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 18px;
}
.cm-bubble {
  background: var(--surface2);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  margin-bottom: 18px;
  position: relative;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
}
.cm-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: var(--surface2);
  border-radius: var(--r);
  transform: rotate(45deg);
}
.cm-cost {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 16px;
  letter-spacing: .04em;
}
.cm-cost strong {
  color: var(--accent);
  font-weight: 700;
}
.cm-buttons {
  display: flex;
  gap: 10px;
}
.cm-btn {
  flex: 1;
  padding: 13px 16px;
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  border: var(--bw) solid var(--border);
  background: var(--surface);
  color: var(--mid);
  transition: all .15s;
  box-shadow: var(--shadow);
}
.cm-btn:hover { border-color: var(--border2); color: var(--text); }
.cm-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
}
.cm-btn.primary:hover { opacity: .92; }
.cm-btn.primary:disabled { opacity: .5; cursor: not-allowed; }
/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 12.6 — KARTEN-HARMONISIERUNG
   Alle Tile/Card-Klassen bekommen den Module-Tile-Look:
   1px dünner Rahmen · 16px Radius · sehr minimaler Shadow für Tiefe.
   Akzente bleiben dezent (Fehler-Karte hat ::before-Gradient, Sabes-Que
   hat Border-Left) — aber kein 1.5px Accent-Border mehr.
   ═══════════════════════════════════════════════════════════════════════════ */
.mod-tile,
.home-tile,
.error-card,
.toki-today-card,
.zr-card,
.account-card,
.lektion-card,
.bonus-lek-card,
.verb-paradigm-card,
.fd-stage {
  border-radius: var(--r) !important;
}

/* Fehler-Karte: dünner Rahmen statt 1.5px Accent — der ::before-Gradient
   trägt die visuelle Hervorhebung jetzt allein. */
.error-card {
  border: var(--bw) solid var(--border) !important;
  box-shadow: var(--shadow);
}

/* Home-Tile Hover-Shadow leichter — der base-shadow ist schon da. */
.home-tile:hover {
}

/* Mod-Tile Hover bekommt ähnlichen Lift wie home-tile. */
.mod-tile { transition: transform .12s, box-shadow .15s, border-color .15s; }
.mod-tile:hover {
  border-color: var(--border2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 13 — ÜBUNGS-REDESIGN
   (a) Mobile-Kompaktheit: Karten und Headers passen "above the fold"
   (b) Toki-Helfer ersetzt embedded Hint-Buttons + Signalwörter-Bar
   (c) Schulbuch-Politur: warmes Papier, Outline-Stempel statt Filled-Badge
   ─────────────────────────────────────────────────────────────────── */

/* ── (a) Kompakte Konjugations-Karte ─────────────────────────────── */
.q-card {
  padding: 18px 16px !important;
  margin-bottom: 12px !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  border-color: rgba(215,154,43, .25) !important;
  box-shadow: inset 0 -2px 0 rgba(215,154,43, .06);
}
.q-verb     { font-size: 30px !important; margin-bottom: 2px !important; }
.q-de       { font-size: 13px !important; margin-bottom: 6px !important; }
.q-pronoun  { font-size: 17px !important; margin-bottom: 6px !important; }

/* Outline-Stempel statt Filled-Badge */
.q-card .badge,
#kontext-q-card .badge {
  display: inline-block;
  background: transparent !important;
  border: var(--bw) solid rgba(215,154,43, .4) !important;
  color: var(--accent) !important;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  padding: 2px 8px !important;
  border-radius: var(--r) !important;
  margin-bottom: 10px !important;
  box-shadow: var(--shadow);
}

/* ── (a) Kompakte Vokabel-Karte ──────────────────────────────────── */
.vocab-card-new {
  padding: 18px 16px !important;
  margin-bottom: 10px !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  border-color: rgba(215,154,43, .25) !important;
  box-shadow: inset 0 -2px 0 rgba(215,154,43, .06);
}
.vcn-word { font-size: 26px !important; margin-bottom: 6px !important; }

/* ── (a) Kompakte Kontext-Frage ──────────────────────────────────── */
#kontext-q-card {
  padding: 16px 14px !important;
  margin-bottom: 10px !important;
}
.kontext-q { font-size: 17px !important; margin-bottom: 10px !important; }

/* "Warum diese Zeit?" — kleiner Text-Link nach falscher Antwort,
   statt vollbreiter Ghost-Button. Wird erst nach dem Prüfen sichtbar. */
.kontext-explain-link {
  background: none;
  border: none;
  padding: 4px 0;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  letter-spacing: .04em;
}
.kontext-explain-link:hover { color: var(--text); }

/* ── (a) Kompaktere ex-nav ───────────────────────────────────────── */
.ex-nav-new { margin-bottom: 10px !important; }
.ex-nav     { margin-bottom: 14px !important; }

/* Engere Karten bei sehr schmalen Screens (iPhone SE-Klasse) */
@media (max-width: 380px) {
  .q-card           { padding: 14px 12px !important; }
  .q-verb           { font-size: 27px !important; }
  .vocab-card-new   { padding: 14px 12px !important; }
  .vcn-word         { font-size: 24px !important; }
  #kontext-q-card   { padding: 14px 12px !important; }
  .kontext-q        { font-size: 16px !important; }
}

/* Auf Desktop minimal mehr Luft — aber nicht zurück zu Phase-12 Ausmaßen */
@media (min-width: 600px) {
  .q-card         { padding: 22px 20px !important; }
  .q-verb         { font-size: 34px !important; }
  .vocab-card-new { padding: 22px 20px !important; }
  .vcn-word       { font-size: 32px !important; }
  #kontext-q-card { padding: 20px 18px !important; }
  .kontext-q      { font-size: 18px !important; }
}

/* ── (b) Toki-Helfer-Knopf ───────────────────────────────────────── */
/* Phase 13.3: Rahmen entfernt, etwas dunklerer Background statt
   reinem Cream — wirkt freundlicher, weniger UI-Element-haft. */
.toki-helper-btn {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 8px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer;
  z-index: 9500;
  transition: transform .15s, box-shadow .15s, background .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toki-helper-btn:hover  { transform: scale(1.05); background: var(--surface2); }
.toki-helper-btn:active { transform: scale(.96); }
.toki-helper-btn.active { background: var(--accent); }
.toki-helper-btn img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}

/* ── (b) Toki-Helfer-Bottom-Sheet ────────────────────────────────── */
.toki-helper-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .25);
  z-index: 9600;
  opacity: 0;
  transition: opacity .2s;
}
.toki-helper-backdrop.show { opacity: 1; }

.toki-helper-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 700px;
  max-height: 70vh;
  max-height: 70dvh;
  background: var(--surface);
  border-top: 2px solid rgba(215,154,43, .4);
  border-radius: 16px 16px 0 0;
  z-index: 9700;
  padding: 8px 18px calc(max(20px, env(safe-area-inset-bottom)) + 18px);
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}
.toki-helper-sheet.show { transform: translate(-50%, 0); }

.ths-handle {
  width: 36px;
  height: 4px;
  background: rgba(215,154,43, .35);
  border-radius: var(--r-xs);
  margin: 0 auto 10px;
}
.ths-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.ths-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ths-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--dim);
  cursor: pointer;
  padding: 0 4px;
}
.ths-close:hover { color: var(--text); }
.ths-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}

/* Innere Strukturen im Sheet — Signalwörter-Gruppen, Regel-Anzeige */
.ths-rule-pattern {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(215,154,43, .08);
  border: var(--bw) solid rgba(215,154,43, .25);
  border-radius: var(--r);
  padding: 8px 12px;
  margin: 6px 0;
  box-shadow: var(--shadow);
}
.ths-rule-note {
  font-size: 12px;
  color: var(--mid);
  font-style: italic;
  margin-top: 6px;
}
.ths-sig-group     { margin-bottom: 14px; }
.ths-sig-group:last-child { margin-bottom: 4px; }
.ths-sig-label {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
.ths-sig-words {
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid);
}
.ths-sig-rule {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--dim);
  margin-top: 4px;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 13.1 — Folge-Politur
   ─────────────────────────────────────────────────────────────────── */

/* ── Vereinheitlichter Modul-Start-Button ────────────────────────── */
/* Ersetzt die zwei verschiedenen "Jetzt starten" / "Jetzt üben"-Buttons.
   Sticky bottom, kompakt, nur Label + Play-Symbol + Pfeil. */
.btn-start-uni {
  position: fixed;
  left: 50%;
  bottom: calc(var(--etp-bnav-total) + 6px);
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 340px;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r);
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 100;
  transition: transform .12s, box-shadow .15s;
}
.btn-start-uni:hover  { opacity: .92; }
.btn-start-uni:active { transform: translateX(-50%) scale(.98); }
.btn-start-uni .bsu-play  { font-size: 12px; line-height: 1; opacity: .9; }
.btn-start-uni .bsu-arrow { font-size: 18px; line-height: 1; margin-left: 2px; }

/* Toki-Helfer rutscht hoch wenn ein Start-Button sichtbar ist, damit
   beide nicht übereinander sitzen. Body-Klasse wird per JS gesetzt
   (siehe refreshTokiHelper / showHideStartButton). */
body.has-fixed-start-btn .toki-helper-btn {
  bottom: calc(max(140px, env(safe-area-inset-bottom) + 140px));
}

/* ── Stärkere Stempel-Optik fürs Tense-Badge (Outline + leichte Rotation) ── */
.q-card .badge,
#kontext-q-card .badge {
  transform: rotate(-1.5deg);
  border-width: 1.5px !important;
  background: rgba(215,154,43, .04) !important;
}

/* ── Notebook-Linien für kleine Sub-Heads (dezent, nur als Akzent) ── */
/* Wirkt wie eine handgezogene Unterstreichung unter Section-Labels. */
.section-label,
.eyebrow {
  position: relative;
}
.section-label::after,
.eyebrow::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  background: rgba(215,154,43, .35);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 13.2 — DIRECT-CLICK + Karten-Style-Vereinheitlichung
   ─────────────────────────────────────────────────────────────────── */

/* ── Vokabel-Tab: Modus-Pills (oben, kompakt) ───────────────────── */
.vocab-mode-pills {
  display: flex;
  gap: 8px;
  margin: 14px 0 6px;
}
.vmp {
  flex: 1;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  cursor: pointer;
  text-align: center;
  transition: all .12s;
  font-family: var(--sans);
  box-shadow: var(--shadow);
}
.vmp:hover  { border-color: var(--accent); }
.vmp.on     { border-color: var(--accent); background: rgba(215,154,43,.08); }
.vmp .vmp-t { display: block; font-size: 13px; font-weight: 700; color: var(--text); }
.vmp .vmp-s { display: block; font-size: 10px; font-family: var(--mono); color: var(--dim); margin-top: 2px; letter-spacing: .04em; }
.vmp.on .vmp-s { color: var(--accent); }

/* ── Vokabel-Tab: Kategorie-Kacheln (direct-click) ──────────────── */
.vocab-cat-tiles {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 80px;
}
.vocab-cat-tile {
  width: 100%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all .12s;
  font-family: var(--sans);
  text-align: left;
}
.vocab-cat-tile:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent);
}
.vocab-cat-tile:active { transform: translateY(0); }
.vct-main  { flex: 1; min-width: 0; }
.vct-name  { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.vct-meta  { font-size: 11px; font-family: var(--mono); color: var(--dim); letter-spacing: .02em; }
.vct-meta .vct-due { color: var(--accent); font-weight: 700; }
.vct-meta .vct-new { color: var(--mid); }
.vct-meta .vct-tot { color: var(--dim); }
.vct-arrow { font-size: 18px; color: var(--accent); flex-shrink: 0; opacity: .7; }
.vocab-cat-tile:hover .vct-arrow { opacity: 1; transform: translateX(2px); transition: all .12s; }
/* Phase 16: gesperrte Aufbau-Kategorien — sichtbar als Ziel, aber inaktiv */
.vct-locked {
  opacity: .55;
  cursor: not-allowed !important;
  background: var(--surface) !important;
  border-style: dashed !important;
}
.vct-locked:hover { opacity: .55; transform: none; }
.vct-locked .vct-name { color: var(--mid) !important; }
.vct-lockmsg {
  color: var(--accent) !important;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .03em;
}
.vct-lockicon { color: var(--mid); opacity: .8; display: flex; align-items: center; }

/* ── Kontext-Tab: Kacheln zeigen ► (start) statt ✓ (selected) ──── */
.cat-chip-item .cci-arrow {
  margin-left: auto;
  font-size: 18px;
  color: var(--accent);
  opacity: .7;
  flex-shrink: 0;
}
.cat-chip-item:hover .cci-arrow { opacity: 1; transform: translateX(2px); transition: all .12s; }
.cat-chip-item .cci-ck { display: none !important; } /* alte ✓-Symbole ausblenden falls noch vorhanden */

/* ── Kontext-Übung: MC-Buttons im Vokabel-Stil ──────────────────── */
#kontext-mc-wrap.mc-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: transparent !important;
  border: none !important;
  padding: 12px 0 0 !important;
  margin: 0 0 12px !important;
}
#kontext-mc-wrap .mc-btn {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px 12px !important;
  font-family: var(--sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  line-height: 1.35 !important;
  min-height: 64px;
  transition: all .12s;
}
#kontext-mc-wrap .mc-btn:hover:not(:disabled) {
  border-color: var(--accent) !important;
  background: rgba(215,154,43,.06) !important;
  transform: translateY(-1px);
}
#kontext-mc-wrap .mc-btn.mc-ok {
  border-color: var(--green) !important;
  background: rgba(46,143,90,.08) !important;
  color: var(--green) !important;
  font-weight: 700 !important;
}
#kontext-mc-wrap .mc-btn.mc-bad {
  border-color: var(--red) !important;
  background: rgba(192,57,43,.08) !important;
  color: var(--red) !important;
}

/* ── Kontext-Übung: Type-Input freundlicher ─────────────────────── */
#kontext-type-wrap {
  background: transparent !important;
  border: none !important;
  padding: 12px 0 0 !important;
  margin: 0 0 12px !important;
}
#kontext-type-wrap .inp,
#kontext-type-wrap .inp-mono {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  text-align: left !important;
}
#kontext-type-wrap .inp::placeholder {
  font-family: var(--sans) !important;
  color: var(--dim) !important;
  font-weight: 400;
}
#kontext-type-wrap .inp:focus {
  border-color: var(--accent) !important;
  background: rgba(215,154,43,.04) !important;
}

/* ── Tense-Badge nach links (statt zentriert) ──────────────────── */
/* Phase 13.1 hatte die Rotation drin — wir behalten sie, aber positionieren
   das Badge links oben in der Karte (außerhalb der zentrierten Inhalte). */
.q-card,
#kontext-q-card {
  position: relative;
}
.q-card .badge,
#kontext-q-card .badge {
  position: absolute;
  top: 12px;
  left: 14px;
  margin: 0 !important;
  z-index: 2;
}
/* Inhalt drückt nach unten um Platz fürs Badge zu lassen */
.q-card .badge ~ * ,
#kontext-q-card .badge ~ * {
  margin-top: 0;
}
.q-card { padding-top: 38px !important; }
#kontext-q-card { padding-top: 38px !important; }

/* Auf engen Screens leicht schmaler */
@media (max-width: 380px) {
  .q-card { padding-top: 34px !important; }
  #kontext-q-card { padding-top: 34px !important; }
}

/* ── Konjugations-Eingabefeld auf s-exercise auch freundlicher ── */
#ex-tippen .inp,
#ex-mode-tippen .inp,
#exercise .inp-mono {
  background: var(--surface) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  font-family: var(--sans) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 13.3 — Lektion-Charaktere & Sabes-Que Desktop-Layout
   ─────────────────────────────────────────────────────────────────── */

/* ── Charaktere in Lektion-Einführung (Rosette) ──────────────────── */
.blv-intro-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}
.blv-chars {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: flex-start;
}
.blv-char-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.blv-char-item img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface);
  object-fit: cover;
  object-position: center top;
  display: block;
  border: var(--bw) solid var(--border);
  box-shadow: 2px 2px 0 var(--accent);
}
.blv-char-name {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--mid);
  text-align: center;
  letter-spacing: .04em;
  max-width: 80px;
  line-height: 1.3;
}

/* Auf Desktop: Charaktere links, Intro-Text rechts daneben (analog Feria) */
@media (min-width: 700px) {
  .blv-intro-wrap {
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
  }
  .blv-chars {
    flex: 0 0 auto;
    max-width: 200px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .blv-intro {
    flex: 1;
    margin-top: 0 !important;
  }
}

/* ── Sabes-Que Desktop: Toki rechts neben Text ───────────────────── */
/* Auf Mobile bleibt's wie es ist (vertikal). Ab 700px: Banner oben,
   darunter 2-Spalten Grid mit Text links und Charakter rechts.
   Trick: tt-head bekommt display:contents, damit tt-char und tt-heading
   am äußeren Grid teilnehmen statt im flex-row gefangen zu sein. */
@media (min-width: 700px) {
  .toki-today-card {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }
  .toki-today-card .tt-banner   { grid-column: 1 / -1; }
  .toki-today-card .tt-head     { display: contents; }
  .toki-today-card .tt-heading  { grid-column: 1; grid-row: 2; align-self: end; }
  .toki-today-card .tt-text     { grid-column: 1; grid-row: 3; }
  .toki-today-card .tt-char     {
    grid-column: 2;
    grid-row: 2 / span 2;
    flex: 0 0 130px;
    align-self: start;
  }
  .toki-today-card .tt-char img { width: 130px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 14 — MOTIVATION-ENGINE (In-Session-Sheet + Reward-Karte)
   ─────────────────────────────────────────────────────────────────── */

/* ── In-Session Bottom-Sheet (Streak +5 / +10 / -3) ──────────────── */
.motiv-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .15);
  z-index: 9750;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.motiv-backdrop.show { opacity: 1; pointer-events: auto; }

.motiv-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  border-radius: 16px 16px 0 0;
  z-index: 9800;
  padding: 6px 18px calc(max(20px, env(safe-area-inset-bottom)) + 18px);
  transition: transform .32s cubic-bezier(.32, .72, 0, 1);
  cursor: pointer;
}
.motiv-sheet.show { transform: translate(-50%, 0); }
.motiv-sheet.motiv-ok        { border-top-color: var(--green); }
.motiv-sheet.motiv-encourage { border-top-color: var(--accent); }
.motiv-sheet.motiv-rojo      { border-top-color: var(--red); }

.motiv-sheet .ms-handle {
  width: 36px;
  height: 4px;
  background: rgba(215,154,43, .35);
  border-radius: var(--r-xs);
  margin: 0 auto 12px;
}
.motiv-sheet .ms-body {
  display: flex;
  align-items: center;
  gap: 16px;
}
.motiv-sheet .ms-toki {
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.motiv-sheet .ms-toki img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  display: block;
}
.motiv-sheet .ms-text { flex: 1; min-width: 0; }
.motiv-sheet .ms-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.motiv-sheet.motiv-ok        .ms-eyebrow { color: var(--green); }
.motiv-sheet.motiv-encourage .ms-eyebrow { color: var(--accent); }
.motiv-sheet.motiv-rojo      .ms-eyebrow { color: var(--red); }
.motiv-sheet .ms-msg {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

/* ── Session-End Belohnungs-Karte (zentral, modal-artig) ────────── */
.lucas-reward-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 24, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9900;
  padding: 20px;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.lucas-reward-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.lucas-reward-overlay .lrc-card {
  background: var(--surface);
  border-radius: var(--r-l);
  padding: 26px 28px 22px;
  width: 100%;
  max-width: 360px;
  text-align: center;
  position: relative;
  box-shadow: 8px 10px 0 rgba(43,32,24,.5);
  transform: scale(.86) translateY(20px);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.lucas-reward-overlay.show .lrc-card {
  transform: scale(1) translateY(0);
}

.lucas-reward-overlay .lrc-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--dim);
  cursor: pointer;
  padding: 4px 8px;
}
.lucas-reward-overlay .lrc-close:hover { color: var(--text); }

.lucas-reward-overlay .lrc-toki {
  margin: 0 auto 10px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lucas-reward-overlay .lrc-toki img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  display: block;
  animation: lrcBounce .5s ease-out;
}
@keyframes lrcBounce {
  0%   { transform: scale(.6) rotate(-6deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.lucas-reward-overlay .lrc-amount-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 6px 0 4px;
  color: var(--accent);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
}
.lucas-reward-overlay .lrc-plus   { font-size: 32px; }
.lucas-reward-overlay .lrc-amount { font-size: 56px; letter-spacing: -.02em; }
.lucas-reward-overlay .lrc-label {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-left: 4px;
}

.lucas-reward-overlay .lrc-phrase {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 14.1 — Tutor-Chat Politur & Motivations-Sheet rahmenlos
   ─────────────────────────────────────────────────────────────────── */

/* ── Tutor-Header größer, freundlicher, Toki-mit-Buch ────────────── */
/* Override der älteren .tutor-header Regel (Z. 1229) — bewusst spezifischer
   gemacht über #s-tutor Vorfahre, damit Spezifität gewinnt ohne !important. */
#s-tutor .tutor-header {
  padding: 18px 18px 16px;
  background: var(--surface);
  border-bottom: 2px solid rgba(215,154,43, .2);
  display: flex;
  align-items: center;
  gap: 14px;
}
#s-tutor .tutor-char-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  box-shadow: 2px 2px 0 var(--accent);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#s-tutor .tutor-char-avatar img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}
#s-tutor .tutor-header-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tutor-header-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
#s-tutor .tutor-header-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.2;
}
#s-tutor .tutor-header-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mid);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
  line-height: 1.35;
}

/* Auf engen Screens etwas kompakter, damit der Header nicht 2 Zeilen wirft */
@media (max-width: 380px) {
  #s-tutor .tutor-char-avatar { width: 54px; height: 54px; }
  #s-tutor .tutor-char-avatar img { width: 46px; height: 46px; }
  #s-tutor .tutor-header-title { font-size: 17px; }
  #s-tutor .tutor-header-sub   { font-size: 11px; }
}

/* ── Motivations-Sheet rahmenlos, fade nach oben ─────────────────── */
/* Vorher hatte das Sheet einen dicken farbigen Border-Top und harten
   Hintergrund. Jetzt: weicher Gradient von cremig unten nach transparent
   oben — wirkt eher wie ein Hauch der von unten reinweht. */
.motiv-sheet {
  background: linear-gradient(
    to top,
    #FBF6EC 0%,
    #FBF6EC 55%,
    rgba(251, 246, 236, .85) 75%,
    rgba(251, 246, 236, .35) 92%,
    rgba(251, 246, 236, 0) 100%
  ) !important;
  border-top: none !important;
  /* Schatten weg, oder zumindest deutlich weicher — der harte Cast-Shadow
     hat den "Karten-Rand" optisch wieder erzeugt. */
  box-shadow: none !important;
  padding-bottom: calc(max(20px, env(safe-area-inset-bottom)) + 30px) !important;
  padding-top: 22px !important;
  max-width: 520px !important;
}

/* Handle weg — keine Greifleiste mehr nötig, das Sheet fühlt sich nicht
   mehr nach Modal an */
.motiv-sheet .ms-handle { display: none !important; }

/* Backdrop noch dezenter — kaum sichtbar, nur ein Hauch */
.motiv-backdrop { background: rgba(0, 0, 0, .08) !important; }

/* Toki etwas größer, da kein Rahmen mehr ablenkt */
.motiv-sheet .ms-toki { flex: 0 0 80px; }
.motiv-sheet .ms-toki img { width: 80px; height: 80px; }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 14.2 — Safe-Area & Bottom-Padding
   iPhone Home-Indicator versteckt sonst Buttons/Inhalte am unteren Rand.
   env(safe-area-inset-bottom) ist auf Geräten mit Indicator ~34px, sonst 0.
   ─────────────────────────────────────────────────────────────────── */

/* Bottom-Nav: respektiert die Safe-Area, wächst dafür mit. Hintergrund
   wird über den Indicator-Bereich gezogen, damit er nicht "abgehackt"
   wirkt. Höhe 64px (Phase 16.3: größere Icons/Labels, 80er-Schulbuch). */
#app-bnav {
  height: var(--etp-bnav-total) !important;
  padding-bottom: var(--etp-safe-b) !important;
  /* Inhalt (Icons) bleibt in den oberen 64px zentriert, der Indicator-Bereich
     hat nur den Background. */
  align-items: flex-start !important;
}
.app-nb { height: var(--etp-nav-h); }

/* Body bekommt zusätzlich Safe-Area-Padding damit Screen-Inhalt nicht
   unter der gewachsenen Nav verschwindet. */
body {
  padding-bottom: var(--etp-bnav-total) !important;
}

/* 0.36.2: Screen-Inhalt — das Bottom-Padding kommt jetzt aus
   --etp-bottom-safe. Diese Regel stand frueher mit 100px hier und hat
   die 200px von oben still ueberschrieben; genau der Konflikt, der den
   letzten Button unter die Nav geschoben hat. */
.screen {
  padding-bottom: var(--etp-bottom-safe) !important;
}

/* btn-start-uni: Auch der Sticky-Start-Button rutscht oberhalb der Nav. */
.btn-start-uni {
  bottom: calc(var(--etp-bnav-total) + 6px) !important;
}

/* Toki-Helfer-Knopf rutscht auch hoch (war schon mit safe-area, jetzt
   konsistent mit Start-Button). */
.toki-helper-btn {
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}
body.has-fixed-start-btn .toki-helper-btn {
  bottom: calc(140px + env(safe-area-inset-bottom)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 14.3 — Tutor-Chat lesbar + Result-Screen Buttons trennen
   ─────────────────────────────────────────────────────────────────── */

/* ── Tutor-Bubbles größer, lesbarer ──────────────────────────────── */
#s-tutor .tutor-bubble {
  font-size: 15px !important;
  line-height: 1.65 !important;
  padding: 14px 18px !important;
  max-width: 88% !important;
  border-radius: var(--r-l) !important;
}
#s-tutor .tutor-bubble.claude {
  border-bottom-left-radius: 6px !important;
}
#s-tutor .tutor-bubble.user {
  border-bottom-right-radius: 6px !important;
}
#s-tutor .tutor-bubble p {
  margin-bottom: 12px !important;
}
#s-tutor .tutor-bubble p:last-child {
  margin-bottom: 0 !important;
}

/* Pill-Highlights innerhalb der Bubble (Vokabel-Hervorhebungen wie
   "aquel/aquella", "la frontera" usw.) etwas mehr Luft & Größe. */
#s-tutor .tutor-bubble [class*="pill"],
#s-tutor .tutor-bubble code {
  font-size: 14px !important;
  padding: 4px 10px !important;
}

/* ── Tutor-Input wesentlich größer & touch-friendly ─────────────── */
#s-tutor .tutor-input-bar {
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom)) !important;
  gap: 10px !important;
  align-items: center !important;
  background: var(--surface) !important;
  border-top: 2px solid rgba(215,154,43, .2) !important;
}
#s-tutor .tutor-input {
  font-size: 16px !important;  /* 16px verhindert iOS auto-zoom */
  padding: 14px 18px !important;
  min-height: 50px !important;
  line-height: 1.45 !important;
  border-radius: var(--r-l) !important;
  border-width: 1.5px !important;
}
#s-tutor .tutor-send-btn {
  width: 50px !important;
  height: 50px !important;
}
#s-tutor .tutor-send-btn svg {
  width: 20px !important;
  height: 20px !important;
}

/* Auf engen Screens etwas kompakter, aber immer noch touch-friendly */
@media (max-width: 380px) {
  #s-tutor .tutor-bubble    { font-size: 14.5px !important; padding: 12px 15px !important; }
  #s-tutor .tutor-input     { font-size: 16px !important; padding: 12px 16px !important; min-height: 46px !important; }
  #s-tutor .tutor-send-btn  { width: 46px !important; height: 46px !important; }
}

/* ── Result-Screen "Aus Fehlern lernen" Button: nicht mehr fixed-style ── */
/* Vorher nutzte er .btn-start-uni mit inline-Override auf position:relative.
   Der z-index:100 + box-shadow:20px der Klasse ließ ihn aber als kleiner
   "schwebender Tag" wirken — überlagerte angrenzende Elemente und warf
   einen sichtbaren Streifen ("blaues Dreieck") nach unten. Wir gönnen ihm
   eine eigene Klasse ohne fixed-Eigenschaften. */
.btn-start-inline {
  width: 100%;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow-lg);
  border-radius: var(--r);
  padding: 14px 22px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .12s, box-shadow .15s;
  margin-top: 8px;
}
.btn-start-inline:hover  { opacity: .92; }
.btn-start-inline:active { transform: scale(.98); }
.btn-start-inline .bsu-play  { width: 12px; height: 12px; line-height: 1; opacity: .95; flex-shrink: 0; }
.btn-start-inline .bsu-arrow { font-size: 18px; line-height: 1; margin-left: 2px; }

/* ── Lucas-Pill im Result-Grade (Phase 14.3.1) ───────────────────── */
/* Vorher war das ein nackter "+7 ⓛ" String mit nur einem Unicode-Symbol —
   auf iOS Safari rendert U+24DB (ⓛ) als blauer Emoji-Kreis. Jetzt richtige
   Pill mit Wort "lucas" statt Symbol. */
.res-lucas-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: var(--r);
  background: rgba(215,154,43, .15);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 15 — Login-Step im Onboarding
   ─────────────────────────────────────────────────────────────────── */

/* Login-Step Sub-Text bekommt mehr Luft + Akzent für die Vorteile */
.onboard-login-sub {
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: left !important;
  margin-bottom: 24px !important;
  color: var(--mid) !important;
}
.onboard-login-sub strong {
  color: var(--text);
  font-weight: 700;
}

/* Zwei Buttons untereinander — primary + ghost */
.onboard-login-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.onboard-btn-ghost {
  width: 100%;
  background: transparent;
  color: var(--mid);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .12s;
  box-shadow: var(--shadow);
}
.onboard-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}
.onboard-btn-ghost:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════════
   PHASE 15.7 — Interaktive Tutor-Übungs-Cards
   ─────────────────────────────────────────────────────────────────── */

.tutor-ex-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 18px 18px 16px;
  margin: 4px 0 2px;
  animation: texIn .25s ease;
}
@keyframes texIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.tex-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.tex-dots { display: flex; gap: 5px; }
.tex-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border2);
}
.tex-dot.done    { background: var(--green); }
.tex-dot.current { background: var(--accent); transform: scale(1.3); }

.tex-prompt {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ── Multiple-Choice / Lückensatz: klickbare Antwort-Cards ──────── */
.tex-body { display: flex; flex-direction: column; gap: 8px; }

.tex-choice {
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
  box-shadow: var(--shadow);
}
.tex-choice:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-d2);
}
.tex-choice:active:not(:disabled) { transform: scale(.98); }
.tex-choice:disabled { cursor: default; }
.tex-choice.correct {
  border-color: var(--green);
  background: var(--green-d);
  color: var(--green);
  font-weight: 700;
}
.tex-choice.wrong {
  border-color: var(--red);
  background: var(--red-d);
  color: var(--red);
}

/* ── Satz bauen: Wort-Token-Karten ─────────────────────────────── */
.tex-build-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-height: 48px;
  padding: 12px;
  background: var(--bg);
  border: 1.5px dashed var(--border2);
  border-radius: var(--r);
  margin-bottom: 12px;
  align-items: center;
}
.tex-build-ph {
  font-size: 13px;
  color: var(--dim);
  font-style: italic;
}
.tex-build-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}
.tex-tok {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 9px 14px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  transition: all .12s;
  box-shadow: var(--shadow);
}
.tex-tok:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-d2);
}
.tex-tok:active:not(:disabled) { transform: scale(.96); }
.tex-tok.placed {
  background: var(--accent-d);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.tex-tok:disabled { cursor: default; opacity: .85; }

.tex-build-check {
  width: 100%;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 13px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.tex-build-check:disabled {
  background: var(--surface3);
  color: var(--dim);
  cursor: default;
}
.tex-build-check:not(:disabled):hover { background: var(--accent-h, var(--accent)); }

.tex-build-sol {
  font-size: 14px;
  color: var(--text);
  background: var(--green-d);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.tex-build-sol-lbl {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--green);
  margin-right: 6px;
}

/* ── Feedback nach Antwort ─────────────────────────────────────── */
.tex-feedback {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r);
  animation: texIn .2s ease;
  /* 0.29.11: Rezeptur wie .fb-strip-new (Vokabeln = Vorlage):
     Border + Offset-Schatten statt weicher Farbfläche. */
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
}
.tex-feedback.ok { background: var(--green-d); border-color: var(--green); }
.tex-feedback.no { background: var(--red-d); border-color: var(--red); }
.tex-fb-head {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 5px;
}
.tex-feedback.ok .tex-fb-head { color: var(--green); }
.tex-feedback.no .tex-fb-head { color: var(--red); }
.tex-fb-explain {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 12px;
}
.tex-next-btn {
  background: var(--text);
  color: var(--bg);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 10px 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.tex-next-btn:hover { opacity: .88; }
.tex-next-btn:active { transform: scale(.97); }

/* ── Abschluss-Card ────────────────────────────────────────────── */
.tutor-ex-done { text-align: center; padding: 28px 20px; }
.tex-done-score {
  font-size: 38px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.tex-done-msg {
  font-size: 15px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 18px;
}
.tex-done-btn {
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 13px 32px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.tex-done-btn:hover { opacity: .9; }
.tex-done-btn:active { transform: scale(.97); }

/* ── Übersetzen DE→ES: Freitext-Eingabe ────────────────────────── */
.tex-tr-wrap { display: flex; flex-direction: column; gap: 12px; }
.tex-tr-input {
  width: 100%;
  background: var(--bg);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  line-height: 1.5;
  resize: none;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s;
  box-shadow: var(--shadow);
}
.tex-tr-input:focus { border-color: var(--accent); }
.tex-tr-input:disabled { opacity: .85; }
.tex-tr-check {
  width: 100%;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 13px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
}
.tex-tr-check:disabled {
  background: var(--surface3);
  color: var(--dim);
  cursor: default;
}
.tex-tr-check:not(:disabled):hover { background: var(--accent-h, var(--accent)); }
.tex-tr-check:not(:disabled):active { transform: scale(.98); }

/* Kill browser focus outlines — we use border-color for focus indication */
.etp-trainer-root input:focus,
.etp-trainer-root textarea:focus,
.etp-trainer-root select:focus,
.etp-trainer-root button:focus,
.etp-trainer-root .translate-inp:focus,
.etp-trainer-root .inp:focus { outline: none !important; }

/* ══════════════════════════════════════════════════════════════ */
/* ── ESTACIÓN MAP — Abenteuer-Pins mit SVG-Pfad ──────────────── */
/* ══════════════════════════════════════════════════════════════ */
.est-adventure { position: relative; overflow: visible; }

/* ── Pin (einzelne Station) ── */
.est-pin {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
  text-align: center;
  z-index: 2;
}

/* Number badge — oben am Icon */
.est-pin-num {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 4px;
  letter-spacing: 1px;
}
.est-pin-active .est-pin-num { color: var(--accent); }
.est-pin-complete .est-pin-num { color: var(--green); }
.est-pin-locked .est-pin-num { color: var(--mid); opacity: 0.5; }

/* Icon circle */
.est-pin-icon {
  position: relative;
  width: 60px; height: 60px;
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: all 0.2s;
  margin-bottom: 6px;
}
.est-pin-icon img {
  width: 38px; height: 38px;
  object-fit: contain;
}

/* Active icon */
.est-pin-active .est-pin-icon {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
  background: var(--accent-d2);
}

/* Completed icon */
.est-pin-complete .est-pin-icon {
  border-color: var(--green);
  box-shadow: var(--shadow-green);
  background: var(--green-d);
}

/* Locked icon */
.est-pin-locked .est-pin-icon {
  border-color: rgba(43,32,24,0.15);
  box-shadow: none;
  background: var(--surface2);
  opacity: 0.5;
}
.est-pin-locked .est-pin-icon img {
  opacity: 0.3;
  filter: grayscale(0.8);
}

/* Hover (not locked) */
.est-pin:not(.est-pin-locked):hover .est-pin-icon {
  transform: scale(1.08);
  box-shadow: var(--shadow-accent);
  border-color: var(--accent);
}

/* Check badge */
.est-pin-check {
  position: absolute;
  top: -2px; right: -2px;
  width: 20px; height: 20px;
  background: var(--green);
  color: var(--surface);
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--surface);
  z-index: 3;
}

/* Lock badge */
.est-pin-lock {
  position: absolute;
  bottom: -2px; right: -2px;
  z-index: 3;
}
.est-pin-lock img { width: 18px; height: 18px; object-fit: contain; }

/* Pulse ring */
.est-pin-pulse {
  position: absolute;
  inset: -6px;
  border: 2.5px solid var(--accent);
  border-radius: 50%;
  animation: estPulse 2s ease-in-out infinite;
  z-index: 1;
}
@keyframes estPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0; transform: scale(1.3); }
}

/* Name pill */
.est-pin-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  max-width: 100px;
}
.est-pin-locked .est-pin-label { color: var(--mid); opacity: 0.5; }

/* Subtitle */
.est-pin-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--dim);
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.est-pin-locked .est-pin-sub { opacity: 0.4; }

/* Score */
.est-pin-score {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  margin-top: 1px;
}

/* ── Estación Flow: Extra Bottom-Spacing ── */
#s-estacion { padding-bottom: var(--etp-bottom-safe) !important; }
#est-dialog { padding-bottom: 80px; }
#est-intro { padding-bottom: 80px; }
#est-complete { padding-bottom: 80px; }
#est-dialog-next { margin-bottom: 40px; }
.btn-primary.full { margin-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════ */
/* ── VOCAB DRILL: Einheitliches Design (alle Module) ─────────── */
/* ══════════════════════════════════════════════════════════════ */

/* MC buttons — einheitliche Größe und Style */
.vocab-mc-btn, .mc-btn-new {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 16px !important;
  border-radius: var(--r) !important;
  border-width: var(--bw) !important;
  box-shadow: var(--shadow) !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
}

/* MC correct/wrong — einheitliche Farben */
.vocab-mc-btn.mc-ok, .mc-btn-new.mc-ok,
.mc-btn.mc-ok {
  border-color: var(--green) !important;
  background: var(--green-d) !important;
  color: var(--green) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-green) !important;
}
.vocab-mc-btn.mc-bad, .mc-btn-new.mc-bad,
.mc-btn.mc-bad {
  border-color: var(--red) !important;
  background: var(--red-d) !important;
  color: var(--red) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-red) !important;
  text-decoration: line-through;
}

/* Feedback strip — einheitlich */
.fb-strip-new, .fb-strip-new.bad {
  border-radius: var(--r) !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  box-shadow: var(--shadow-green) !important;
}
.fb-strip-new.bad {
  box-shadow: var(--shadow-red) !important;
}
.fb-strip-new .fb-title,
#vocab-fb-title {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}

/* Vocab card front — einheitlich wie Estaciones q-card */
.vocab-card-front {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-accent) !important;
  border-radius: var(--r) !important;
}
.vocab-es {
  font-weight: 800 !important;
  color: var(--accent) !important;
}

/* Translate input — einheitlich */
.translate-inp {
  border-width: var(--bw) !important;
  border-radius: var(--r) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: var(--mono) !important;
  text-align: center !important;
  padding: 14px 16px !important;
}
.translate-inp:focus {
  box-shadow: 0 0 0 3px rgba(215,154,43,.2) !important;
  outline: none !important;
}
.translate-inp.ok {
  border-color: var(--green) !important;
  background: var(--green-d) !important;
}
.translate-inp.bad {
  border-color: var(--red) !important;
  background: var(--red-d) !important;
}

/* Check/Prüfen button — einheitlich */
#vocab-btn-check, .btn-check-vocab {
  background: var(--accent) !important;
  color: var(--text) !important;
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow) !important;
  padding: 14px !important;
}

/* Category badge above word */
#vocab-ex-cat, .vocab-ex-cat {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  border-radius: var(--r-l) !important;
  border: 2px solid currentColor !important;
  padding: 4px 10px !important;
}

/* Sound toggle pill */
.snd-toggle-pill {
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r-l) !important;
  font-family: var(--mono) !important;
}

/* Score pills einheitlich */
#vocab-ex-ok, #vocab-ex-bad {
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  min-width: 28px !important;
  text-align: center !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════ */
/* ── UNIFIED MC GRID: 2 Spalten überall ──────────────────────── */
/* ══════════════════════════════════════════════════════════════ */

/* Estaciones MC options → 2-Spalten Grid */
/* ── 0.48: Optionen-Container — Default einspaltig, voll breit ────
   Vorher war das Grid Default-AN und alles andere (Wortliste, Frases,
   Dialog, Quiz) musste sich per Ausnahme wieder auf volle Breite
   zwingen. Das ging schief, sobald ein Renderer keine Ausnahme hatte —
   halbe Wortkarten, schiefe MC-Kacheln. Jetzt umgekehrt: Standard ist
   die volle Breite, zweispaltig wird NUR, wo der Renderer die Klasse
   .est-opts-mc setzt (kurze MC-Optionen). */
#est-dialog-options {
  display: block !important;
}
#est-dialog-options > .card,
#est-dialog-options > button {
  display: block;
  width: 100% !important;
  margin: 0 0 10px !important;
}

/* Zweispaltiges MC-Raster nur auf ausdrücklichen Wunsch */
#est-dialog-options.est-opts-mc {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
#est-dialog-options.est-opts-mc > .card,
#est-dialog-options.est-opts-mc > button {
  margin: 0 !important;
  min-height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Vocab MC grid → 2 Spalten (schon so, aber sicherstellen) */
#vocab-mc-wrap {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* Konjugation MC → 2 Spalten */
.mc-grid {
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* ZS MC options → 2 Spalten */
.zs-ex-options {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

/* Alle MC buttons einheitlich */
#est-dialog-options > .card,
#est-dialog-options > button,
#vocab-mc-wrap > button,
.mc-grid > button,
.zs-ex-option {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 16px 14px !important;
  border-radius: var(--r) !important;
  border-width: var(--bw) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  cursor: pointer;
}
/* MC-Kacheln zentriert, einzeilige Antworten links */
#est-dialog-options.est-opts-mc > .card,
#vocab-mc-wrap > button,
.mc-grid > button { text-align: center !important; }

/* ═══════════════════════════════════════════════════════════════
   0.24: JOURNEY-KARTEN — die drei Kernbereiche auf der Modul-Seite.
   Reiner Retro-Baukasten: Surface-Karte, dunkler Rand, großer
   Offset-Schatten. Drills darunter behalten die kleinen mod-tiles.
   ═══════════════════════════════════════════════════════════════ */
.journey-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 22px;
}
.journey-card {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px 14px;
  cursor: pointer;
  transition: transform .1s;
}
.journey-card:active { transform: translate(2px, 2px); box-shadow: var(--shadow); }
.jc-tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.jc-name {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}
.jc-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .03em;
  color: var(--dim);
  margin-top: 4px;
  line-height: 1.45;
}
.jc-bar {
  margin-top: 10px;
  height: 8px;
  border: 2px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--bg);
  overflow: hidden;
}
.jc-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--r-xs);
  transition: width .3s ease;
}
.tools-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   0.24.1: LLAMADA-FAB — verpasste Anrufe unten links, gespiegelt
   zum Toki-Helfer rechts. Portrait des neuesten Anrufers, Telefon-
   Mini-Icon, rote Zähler-Badge. Klick öffnet Bottom-Sheet.
   ═══════════════════════════════════════════════════════════════ */
.call-fab {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  bottom: calc(28px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  padding: 0;
  cursor: pointer;
  z-index: 9500;
  overflow: visible;
}
.call-fab:active { transform: scale(.96); }
body.has-fixed-start-btn .call-fab {
  bottom: calc(140px + env(safe-area-inset-bottom));
}
.call-fab-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.call-fab-face-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 20px;
  color: var(--text);
}
.call-fab-phone {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-fab-phone img { width: 13px; height: 13px; object-fit: contain; }
.call-fab-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-s);
  background: var(--red);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  box-shadow: 1px 1px 0 var(--border);
}
.call-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 32, 24, .45);
  z-index: 9600;
  display: none;
}
.call-sheet-backdrop.open { display: flex; align-items: flex-end; }
.call-sheet {
  width: 100%;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface);
  border-top: var(--bw) solid var(--border);
  border-radius: 16px 16px 0 0;
  padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
}
.call-sheet-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   0.24.2: SCHULBUCH-TYPOGRAFIE — Lesetexte in Serif (var(--serif)).
   Dreiteilung: Serif = Fließtext, Courier = Labels/Stempel,
   Jost = UI & Titel. Und: TOKI-WELCOME auf der Home.
   ═══════════════════════════════════════════════════════════════ */
.toki-today-card .tt-text,
#est-intro-text,
.est-phase-prose,
.lek-text-box {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.65;
}

/* 0.37: Der Toki fuehrt die Home an — gross, mittig, Spruch darunter.
   Vorher stand er als 72px-Vignette links neben der Blase. */
.toki-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 2px 4px;
  cursor: pointer;
}
/* 0.52: Vokabelkarten-Linien hinter dem grossen Toki. Eine kräftige rote
   Linie oben (die Randlinie), darunter dünne dunkle Zeilen im festen
   Abstand — wie auf einer Karteikarte. Rein per Gradient, kein Bild.
   Nur hinter der Toki-Bühne, nicht hinter der Sprechblase. */
.toki-welcome-stage {
  position: relative;
}
.toki-welcome-stage::before {
  content: '';
  position: absolute;
  /* über die Bühne hinaus, damit die Karte breiter wirkt als der Toki */
  top: 0; bottom: -6px;
  left: -34px; right: -34px;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--r-s);
  /* obere rote Linie + wiederkehrende dünne dunkle Zeilen */
  background-image:
    linear-gradient(var(--red) 0 0),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 33px,
      rgba(43, 32, 24, 0.10) 33px,
      rgba(43, 32, 24, 0.10) 34px
    );
  background-repeat: no-repeat, repeat;
  background-size: 100% 2px, 100% 100%;
  background-position: 0 22px, 0 22px;
  opacity: .7;
}
/* Toki und Bild über den Linien */
.toki-welcome-stage > * { position: relative; z-index: 1; }
/* 0.33: Welcome-Stage — Buehne fuer den Rive-Toki mit Einflug.
   Gleiche Zoom-Crop-Technik wie im Tutor (Canvas groesser, Stage
   schneidet den Artboard-Leerraum weg). Tuning: die 1.6-fache Groesse. */
.toki-welcome-stage {
  width: 200px; height: 208px; flex-shrink: 0;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.toki-welcome-stage .toki-rive { width: 320px; height: 320px; flex: none; }
/* 0.35: gespiegelt — Toki schaut zur Sprechblase statt von ihr weg. */
/* 0.35 spiegelte den Toki, damit er zur Blase links schaut. Die Blase
   steht jetzt mittig darunter — und der Fly-Toki ist frontal. Keine
   Spiegelung mehr, sonst kippt der Schopf auf die falsche Seite. */
.toki-welcome-stage .toki-rive { transform: scaleX(-1); }
.toki-welcome-stage .toki-welcome-img { align-self: center; }
.toki-welcome-img {
  width: 192px;
  height: auto;
  flex-shrink: 0;
  display: block;
}
.toki-welcome-bubble {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--r);
  padding: 12px 18px;
  text-align: center;
  align-self: stretch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   0.24.3: HOME-FEINSCHLIFF
   1) ¡Cachai!-Wortmarke im Header (statt zweitem Toki)
   2) Welcome-Toki größer, trägt jetzt die Begrüßung
   3) ¿Sabes qué? kompakt zweispaltig, Banner mit Retro-Textschatten
   4) Llamada-FAB +20%
   ═══════════════════════════════════════════════════════════════ */
.app-brand-word {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  color: var(--text);
  line-height: 1;
  white-space: nowrap;
}
.app-brand-word .abw-dot { color: var(--accent); }
/* 0.50: Logo-Wortmarke im Header. Höhe an die alte Textzeile angelehnt. */
.app-brand-logo-img {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 2px;
}
@media (max-width: 380px) {
  .app-brand-logo-img { height: 30px; }
}

/* 2) Welcome-Toki: schön groß */
.toki-welcome-img { width: 232px; }
.toki-welcome-stage { width: 240px; height: 250px; }
.toki-welcome-stage .toki-rive { width: 384px; height: 384px; }
.toki-welcome-bubble { font-size: 15.5px; margin-bottom: 14px; }

/* 3) ¿Sabes qué? kompakt */
.toki-today-card.tt-compact { gap: 8px; padding: 14px 16px 16px; }
.toki-today-card.tt-compact .tt-banner {
  font-size: 23px;
  text-shadow: 2px 2px 0 rgba(43, 32, 24, .3);
}
.tt-cols {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tt-cols .tt-char { flex: 0 0 62px; }
.tt-cols .tt-char img { width: 62px; height: auto; }
.tt-col-body { flex: 1; min-width: 0; }
.tt-col-body .tt-title { font-size: 17px; margin-top: 1px; }
.toki-today-card.tt-compact .tt-text {
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 6px;
}

/* 4) Llamada-FAB +20% */
.call-fab { width: 62px; height: 62px; }
.call-fab-phone { width: 26px; height: 26px; right: -4px; bottom: -2px; }
.call-fab-phone img { width: 15px; height: 15px; }
.call-fab-badge { min-width: 24px; height: 24px; border-radius: var(--r); font-size: 12px; top: -7px; right: -7px; }


/* ═══════════════════════════════════════════════════════════════
   0.24.4: HOME-ORDNUNG + DUDEN-KARTE + EB GARAMOND
   EB Garamond fällt kleiner aus als Lora — Lesetexte laufen in
   Gewicht 500 und einen Punkt größer.
   ═══════════════════════════════════════════════════════════════ */
.app-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.app-header-left .app-brand-weekday {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--dim);
}

.toki-today-card .tt-text,
#est-intro-text,
.est-phase-prose,
.lek-text-box,
.toki-welcome-bubble {
  font-weight: 500;
}
#est-intro-text, .est-phase-prose, .lek-text-box { font-size: 16px; }
.toki-welcome-bubble { font-size: 16px; }

/* Duden-Karte: Eyebrow über rotem Banner mit schwarzem Schatten,
   Lemma fett im Textanfang, Charakter rechts. */
.toki-today-card.tt-compact .tt-eyebrow { margin-bottom: 2px; }
.toki-today-card.tt-compact .tt-banner {
  color: var(--red);
  text-shadow: 2px 2px 0 var(--border);
  margin-bottom: 4px;
}
.toki-today-card.tt-compact .tt-text { font-size: 15px; margin-top: 0; }
.tt-lemma {
  font-weight: 700;
  font-style: normal;
  font-size: 1.1em;
}


/* ═══════════════════════════════════════════════════════════════
   0.24.5: THEME-ABWEHR FÜR JOURNEY-KARTEN
   Das Site-Theme (components.css) presst .btn in Uppercase-Pills mit
   flex-row — auf der Live-Site liefen die Journey-Inhalte deshalb aus
   den Karten. Gleiche Abwehr wie bei den mod-tiles.
   ═══════════════════════════════════════════════════════════════ */
.journey-card.btn {
  /* 0.35.7: Icon volle Kartenhöhe rechts, Text + Balken links (jc-body).
     Schatten explizit auf var(--shadow) — identisch zu .mod-tile, damit
     obere und untere Karten dieselbe Tiefe haben. */
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 16px;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;
  white-space: normal !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-align: left !important;
  height: auto !important;
  padding: 16px 16px 14px 18px !important;
}
.journey-card.btn:active { box-shadow: none !important; }
.jc-body { flex: 1; min-width: 0; }

/* Extra-Training: Retro-Icons statt Buchstaben-Kreise.
   0.35.7: 46 → 64px — die Icons sollen tragen, nicht dekorieren. */
.mt-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   0.24.5: EB GARAMOND DURCHGEHEND — alle Lese- und Sprachinhalte.
   UI (Buttons, Labels, Nav) bleibt Jost/Courier.
   ═══════════════════════════════════════════════════════════════ */
.tutor-bubble,
.fd-bubble-es,
.fd-bubble-de,
.cic-preview,
.vocab-card-front,
#est-dialog-es,
.est-dialog-de {
  font-family: var(--serif);
  font-weight: 500;
}
.tutor-bubble { font-size: 15px; }
.fd-bubble-es { font-size: 15.5px; font-weight: 700; }
.fd-bubble-de { font-size: 13.5px; }
.cic-preview  { font-size: 14px; font-style: italic; }


/* ═══════════════════════════════════════════════════════════════
   0.25: KAPITEL-HEADER in der Estación-Karte — Courier-Stempel
   zwischen den Serpentinen-Abschnitten.
   ═══════════════════════════════════════════════════════════════ */
.est-chapter-header {
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}
.est-chapter-header .ech-line {
  flex: 1;
  height: 0;
  border-top: 2px dashed rgba(43, 32, 24, .3);
}
.est-chapter-header .ech-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   0.25.1: ALTE DEKO-ICONS AUS — die mod-tiles tragen jetzt echte
   Retro-PNG-Icons; die per ::after generierten Farbkreise (noch aus
   der Vor-Retro-Ära, teils mit alter Goldpalette) sind Geschichte.
   ═══════════════════════════════════════════════════════════════ */
.mod-tile::after { content: none !important; }


/* ═══════════════════════════════════════════════════════════════
   0.25.2: TOKI-STAGE & CELEBRATION SHEET
   .toki-stage ist der Rive-Anker: heute PNG, später Canvas — die
   Container-Maße bleiben bei der Migration identisch.
   ═══════════════════════════════════════════════════════════════ */
.toki-stage { display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* 0.35.1: Rive-Canvas in der Stage — prozentualer Zoom-Crop, skaliert
   mit jeder per tokiSprite() gesetzten Groesse (140, 120, ...). */
.toki-stage .toki-rive { width: 160%; height: 160%; flex: none; max-width: none; max-height: none; }
.toki-stage img,
.toki-stage canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.celebr-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 32, 24, .5);
  z-index: 9800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.celebr-card {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: 8px 10px 0 rgba(43, 32, 24, .5);
  padding: 26px 24px 22px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  animation: celebrPop .25s ease-out;
}
@keyframes celebrPop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.celebr-card .toki-stage { margin: 0 auto 10px; }
#vocab-res-toki { display: flex; justify-content: center; margin-bottom: 10px; }
.celebr-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.celebr-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 8px;
}
.celebr-msg {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 18px;
}
.celebr-btn {
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  padding: 12px 32px;
  cursor: pointer;
}
.celebr-btn:active { box-shadow: none; transform: translate(1px, 1px); }

/* ═══════════════════════════════════════════════════════════════
   0.26: BEZAHL-ÜBUNG — nutzt das Celebration-Grundgerüst.
   ═══════════════════════════════════════════════════════════════ */
.pay-card { max-width: 360px; }
.pay-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: var(--bw) solid var(--border);
  box-shadow: 2px 2px 0 var(--accent);
  margin: 0 auto 10px;
  display: block;
  background: var(--surface);
}
.pay-quote {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.pay-quote > span { min-width: 0; }
.pay-quote .spk-btn { flex-shrink: 0; margin-top: 2px; }
.pay-spk {
  background: none;
  border: none;
  font-size: 17px;
  cursor: pointer;
  padding: 0 4px;
  vertical-align: middle;
}
.pay-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.pay-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.pay-opt {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
  padding: 12px;
  cursor: pointer;
}
.pay-opt:active { box-shadow: none; transform: translate(1px, 1px); }
.pay-opt.right { background: var(--accent); }
.pay-opt.wrong { background: var(--red-d); border-color: var(--red); }
.pay-opt:disabled { cursor: default; opacity: 1; }
.pay-feedback { min-height: 20px; font-family: var(--serif); font-weight: 500; font-size: 14px; line-height: 1.45; }
.pay-feedback .pay-ok  { color: var(--green, #1E6E6A); font-weight: 700; }
.pay-feedback .pay-bad { color: var(--red); }

/* 0.26.1: Bezahl-Sheet immer zuoberst — unabhängig von Modal-Resten */
#pay-backdrop { z-index: 10050; }


/* ═══════════════════════════════════════════════════════════════
   0.26.8: LEKTIONS-VIEW RETRO-AUDIT — Feinschliff blv-*
   ═══════════════════════════════════════════════════════════════ */
.blv-intro-wrap .blv-intro { margin-bottom: 0; }

/* Close-Button: die etablierte .ex-close-btn-Regel (Zeile ~570) gilt jetzt
   auch in den Lektions-Views — deren Inline-Styles sind entfernt. */


/* ═══ 0.27.3 Batch 3.1: Journey-Karten bekommen Icons (wie Extra-Training) ═══ */
.journey-card { position: relative; }
/* 0.35.7: Icon nicht mehr klein in der Ecke, sondern als eigene Spalte
   über die volle Kartenhöhe (align-self: stretch aus dem Flex-Row). */
.jc-icon {
  position: static;
  width: 84px;
  height: auto;
  align-self: stretch;
  object-fit: contain;
  flex: none;
}

/* Kopf-Kästen Racha + Lucas: identische Maße */
.app-header-right .streak-box,
.app-header-right .lucas-badge {
  min-width: 86px;
  box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   0.28: TOKI-TUTOR — KI-Fehler-Dialog (geteilt: Estaciones, Lektionen)
   ═══════════════════════════════════════════════════════════════ */
.tt-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 20px; text-align: center; }
/* 0.32.1: Slot 200px. Der Rive-Canvas wird groesser gerendert und vom
   Slot beschnitten (overflow) — das Artboard traegt viel Leerraum um
   Toki, der Zoom holt ihn auf echte ~200px Sichtgroesse. Tuning-Wert:
   die 320px am .tt-avatar-rive (groesser = mehr Zoom). */
.tt-avatar { width: 200px; height: 200px; object-fit: contain; }
.tt-avatar-slot { width: 200px; height: 200px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tt-avatar-slot .toki-rive { width: 320px; height: 320px; flex: none; }

/* 0.34: Seiten-Header-Buehne — Rive-Toki im Modul-Header (Zoom-Crop).
   Uebernimmt die absolute Position des module-page-toki; das PNG darin
   bleibt Fallback und behaelt seine Groesse. */
.toki-page-stage {
  position: absolute; bottom: 8px; right: 0;
  width: 104px; height: 104px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.toki-page-stage .module-page-toki { position: static; bottom: auto; right: auto; }
/* 0.34.1: zentriert statt flex-end (schnitt den Schopf ab) + Zoom
   eine Stufe zurueck, damit Crest und Krallen Luft haben. */
.toki-page-stage .toki-rive { width: 150px; height: 150px; flex: none; }
@media (max-width: 380px) {
  .toki-page-stage { width: 84px; height: 84px; bottom: 6px; }
  .toki-page-stage .toki-rive { width: 121px; height: 121px; }
}

.tt-avatar-slot .tt-avatar { display: block; }
/* 0.49: Wenn nur das PNG im Slot liegt (Rive aus), den Crop aufheben —
   sonst fuellt der zoom-dimensionierte Slot nur die halbe Flaeche. */
.tt-avatar-slot:not(:has(.toki-rive)) {
  overflow: visible;
  width: 160px;
  height: 160px;
}
.tt-avatar-slot:not(:has(.toki-rive)) .tt-avatar {
  width: 160px;
  height: 160px;
  object-fit: contain;
}
.tt-error-card {
  width: 100%;
  background: var(--red-d);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 12px 16px;
  text-align: left;
}
.tt-error-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.tt-error-detail { font-family: var(--serif); font-size: 14px; color: var(--text); line-height: 1.5; }
.tt-bubble {
  width: 100%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  text-align: left;
}
.tt-bubble-ok { background: var(--green-d); border-color: var(--green); }
.tt-bubble-bad { background: var(--red-d); }
.tt-input {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-l);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text);
  outline: none;
}
.tt-input:focus { border-color: var(--accent); box-shadow: 3px 3px 0 var(--accent); }
.tt-btn {
  width: 100%;
  padding: 15px;
  background: var(--accent);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
}
.tt-btn:active { box-shadow: none; transform: translate(1px, 1px); }
.tt-skip {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  color: var(--dim); padding: 4px;
}
.tt-spinner {
  width: 24px; height: 24px; margin: 4px auto;
  border: 3px solid var(--surface2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ttSpin .8s linear infinite;
}
@keyframes ttSpin { to { transform: rotate(360deg); } }


/* ═══ 0.28.1: KAPITEL-DETAIL — Angleich an Vokabel-Kategorie ═══ */
/* Die Fortschrittszeile bekam zu wenig Luft und überlappte die Stat-Kästen. */
#s-chapter-detail .detail-stats .stat-row { margin-bottom: 18px; }
#s-chapter-detail .section-label { margin-top: 6px; }

/* Löschen-Button: dezent, im Schulbuch-Stil statt grellem Rosa.
   Klein, unaufdringlich, aber erkennbar destruktiv (Courier + Rot-Text). */
.det-delete-btn {
  background: transparent !important;
  border: 1.5px solid rgba(200, 64, 46, .35) !important;
  box-shadow: none !important;
  color: var(--red) !important;
  font-family: var(--mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 11px !important;
  margin-top: 18px !important;
  max-width: 220px;
}
.det-delete-btn:active { transform: translate(1px, 1px); }


/* 0.28.4: Wortliste = EINE Retro-Card mit gestrichelten Trennlinien */
#vocab-wordlist {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 4px 4px;
  overflow: hidden;
}
#vocab-wordlist .vocab-item:last-child { border-bottom: none; }
.vocab-item-es { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--text) !important; }
.vocab-item-de { font-family: var(--serif); color: var(--dim) !important; }

/* 0.28.4: Wortlisten-Toggle im Retro-Stil (Courier-Pill mit Rand + Schatten) */
.wl-toggle-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  padding: 8px 18px;
  cursor: pointer;
}
.wl-toggle-btn:active { box-shadow: none; transform: translate(1px, 1px); }

/* ═══════════════════════════════════════════════════════════════
   0.29.0 — GAST-SCHLÖSSER
   Lucas-Badge & Racha-Box für Gäste: gedimmt + Retro-Schloss.
   Klick öffnet das Auth-Modal (Handler in trainer.js).
   ═══════════════════════════════════════════════════════════════ */
.etp-guest-locked { position: relative; opacity: .6; cursor: pointer; }
.etp-guest-locked:hover { opacity: .8; }
.etp-guest-lock-badge {
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface);
  color: var(--text);
  border: var(--bw) solid var(--border);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--border);
  pointer-events: none;
  z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   0.29.13 — MODUL-ANGLEICH: KONJUGIEREN (Vokabeln = Role Model)
   Fabians Spezifikation per annotierten Screenshots:
   (1) Frage-Card wie Vokabel-Card: geschlossene Surface-Card mit
       Ink-Border + Offset-Schatten, Rubrik zentriert, Wort in Ink,
       Erklärung kursiv. Keine Amber-Sonderbehandlung mehr.
   (2) MC "ohne Hintergrund": das alte "angeschweißte" Panel unter
       der Card (Surface + Border + gestrichelte Naht) fällt weg —
       die Pills stehen frei mit Abstand, wie bei Vokabeln.
   (3) Kapitel-Liste/-Detail: Schrift + Farbe aus dem System statt
       iOS-Button-Blau; Detail-Titel im Display-Font wie die
       Modul-Header.
   ═══════════════════════════════════════════════════════════════ */

/* (1) Frage-Card nach Vokabel-Rezeptur */
/* 0.29.15: Schritt 2+3 des Modul-Angleichs — Zeiten im Kontext läuft
   über #kontext-q-card, Unregelmäßige Verben teilen sich s-exercise
   und sind damit automatisch abgedeckt. Gleiche Rezeptur für beide. */
#s-exercise .q-card,
#s-kontext-ex .q-card {
  border: var(--bw) solid var(--border) !important;
  border-radius: var(--r-l) !important;
  box-shadow: var(--shadow) !important;
  background: var(--surface) !important;
  padding: 24px 20px 20px !important;
}
#s-exercise .q-verb {
  color: var(--text) !important;
  font-family: var(--sans);
  font-weight: 800;
}
#s-exercise .q-de {
  font-style: italic;
  color: var(--mid) !important;
}
#s-exercise .q-card .badge,
#s-kontext-ex .q-card .badge {
  display: table !important;
  margin: 0 auto 12px !important;
}
/* Kontext: Frage-Text zentriert unter dem Stempel wirkt in der
   geschlossenen Card ruhiger; Lücke bleibt Amber als Blickanker. */
#s-kontext-ex .kontext-q { text-align: center; }
#s-kontext-ex .kontext-hint { text-align: center; }

/* (2) MC/Tippen frei stehend — Panel-Verschweißung aufgelöst */
#ex-mode-tippen, #ex-mode-mc {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 14px !important;
}
.q-card + #ex-mode-tippen,
.q-card + #ex-mode-mc { border-radius: 0 !important; }
#ex-fb, #kontext-fb {
  border-radius: var(--r) !important;
  border: var(--bw) solid var(--green) !important;
  margin: 14px 0 12px !important;
}
#ex-fb.bad, #kontext-fb.bad { border-color: var(--red) !important; }
#ex-q-card ~ .btn-row:has(.btn-primary:not(.hidden)) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 0 0 !important;
  box-shadow: none !important;
}
/* MC-Pills: Schrift wie Role Model (Sans statt Mono), Verbformen
   dürfen einen Tick größer bleiben */
#ex-mc-grid .mc-btn {
  font-family: var(--sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* (3) Kapitel-Liste: iOS-Button-Blau + Systemfont neutralisieren */
.chapter-item { color: var(--text); font-family: var(--sans); }
.ch-name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -.01em;
}

/* (3) Kapitel-Detail: Header im Modul-Muster */
.detail-header h2 {
  font-family: var(--display);
  font-size: 26px !important;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   0.29.13 — FEHLER-ÜBEN: ECHTES GRÜN + GELBER WEITER-BUTTON
   Das System-"Grün" (--green #1E6E6A) liest sich als Petrol/Blau.
   Für Korrekt-Zustände im Fehler-Modus: warmes Schulheft-Grün.
   Bewusst NUR hier — gefällt es, rollen wir es auf alle Module.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --verde: #4A7C3A;
  --verde-d: #e7efdc;
}
.tex-choice.correct {
  border-color: var(--verde) !important;
  background: var(--verde-d) !important;
  color: var(--verde) !important;
}
.tex-feedback.ok { background: var(--verde-d) !important; border-color: var(--verde) !important; }
.tex-feedback.ok .tex-fb-head { color: var(--verde); }
.tex-next-btn {
  background: var(--accent) !important;
  color: var(--text) !important;
  border: var(--bw) solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.tex-next-btn:hover { opacity: 1 !important; filter: brightness(1.05); }

/* ═══════════════════════════════════════════════════════════════════
   ¡AL TIRO! — Bild-Erkennungs-Spiel (Hauptmodul)
   Schulbuch-Kontrakt: nur var(--…)-Tokens, harte Schatten, Radius-Skala.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dashboard: Kategorie-Kacheln ── */
.at-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-cat-tile { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); padding: 14px; cursor: pointer; transition: all .15s; box-shadow: var(--shadow); text-align: center; }
@media (hover: hover) {
  .at-cat-tile:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-d); box-shadow: var(--shadow-accent); }
}
.at-cat-tile.at-locked { opacity: .55; cursor: default; }
.at-cat-cover { width: 72px; height: 72px; object-fit: contain; margin: 0 auto 8px; display: block; }
.at-cat-name { font-family: var(--sans); font-weight: 700; font-size: 16px; color: var(--text); }
.at-cat-sub { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 3px; }
.at-loading, .at-empty { font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: center; padding: 28px 12px; }
.at-empty code { font-size: 11px; }

/* ── Rundentimer ── */
.at-timer-track { height: 6px; background: var(--surface2); border: var(--bw) solid var(--border); border-radius: var(--r-xs); overflow: hidden; margin-bottom: 14px; }
.at-timer-bar { height: 100%; width: 100%; background: var(--accent); border-radius: 0; }
.at-timer-bar.at-timer-low { background: var(--red); }

/* ── Prompt (Wort ODER Bild) ── */
.at-prompt { display: flex; justify-content: center; align-items: center; margin-bottom: 14px; }
.at-prompt-word { font-family: var(--sans); font-weight: 800; font-size: 30px; color: var(--text); text-align: center; padding: 26px 0; }
/* 0.30.2: Prompt-Bild volle Kartenbreite statt Briefmarke */
.at-prompt-img { width: 100%; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 12px; }
.at-prompt-img img { width: 100%; max-height: 220px; object-fit: contain; display: block; }

/* ── Antwort-Grids ── */
.at-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.at-opt { background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r); cursor: pointer; transition: all .15s; box-shadow: var(--shadow); color: var(--text); }
@media (hover: hover) {
  .at-opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-d); box-shadow: var(--shadow-accent); }
}
.at-opt-img { padding: 10px; }
.at-opt-img img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; pointer-events: none; }
.at-opt-word { padding: 18px 12px; font-family: var(--sans); font-weight: 600; font-size: 16px; text-align: center; }
.at-opt.at-ok { border-color: var(--green); background: var(--green-d); box-shadow: var(--shadow-green); }
.at-opt.at-bad { border-color: var(--red); background: var(--red-d); box-shadow: var(--shadow-red); animation: shakeX .4s ease; }
/* Zeit abgelaufen: die richtige Option in Rot (ohne Shake) — "verpasst",
   nicht "richtig beantwortet". */
.at-opt.at-missed { border-color: var(--red); background: var(--red-d); box-shadow: var(--shadow-red); }
.at-opt.at-dim { opacity: .45; }
.at-opt:disabled { cursor: default; }

/* ── Runden-Feedback (Wort — Übersetzung) ── */
.at-fb { margin-bottom: 12px; text-align: center; font-weight: 700; }

/* ── Results: Fehler-Review ── */
.at-wrong-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: var(--bw) solid var(--border); border-radius: var(--r-s); padding: 8px 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.at-wrong-row img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.at-wrong-es { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--text); }
.at-wrong-de { font-family: var(--mono); font-size: 12px; color: var(--dim); }

/* ══════════════════════════════════════════════════════════════════════
   0.36.0 — ESTACIÓN: HERO, CHARAKTER-AUFTRITT, WORTSCHATZ, FRASES
   Neuer Lektions-Ablauf: Hero → Wortschatz I/II → Dialog → Frases
   → Gemischte Übung → Quiz. Der Charakter tritt in jedem Präsentations-
   Block auf, damit die Lektion Leben bekommt.
   ══════════════════════════════════════════════════════════════════ */

/* ── HERO-BILD ────────────────────────────────────────────────────── */
.est-hero {
  margin: 0 0 18px;
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface2);
}
.est-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── BLOCK-HEADLINE (Grundwortschatz, Frases típicas …) ───────────── */
.est-block-head {
  margin-bottom: 14px;
  border-bottom: var(--bw) solid var(--border);
  padding-bottom: 8px;
}
.est-block-headline {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text);
}

/* ── CHARAKTER-AUFTRITT MIT SPRECHBLASE ──────────────────────────── */
.est-char-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}
.est-char-intro-img {
  width: 96px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: center;
  align-self: center;
}
.est-char-bubble {
  flex: 1;
  position: relative;
  background: var(--accent-d);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
/* Blasen-Zipfel nach links zum Charakter. Zwei Dreiecke: Rahmen + Füllung. */
.est-char-bubble::before,
.est-char-bubble::after {
  content: '';
  position: absolute;
  left: -11px;
  bottom: 18px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 11px solid var(--border);
}
.est-char-bubble::after {
  left: -7px;
  border-right-color: var(--accent-d);
}
.est-char-bubble-name {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 4px;
}
.est-char-bubble-text {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

/* ── WORTSCHATZ-LISTE ─────────────────────────────────────────────── */
.est-word-list {
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.est-word-row {
  padding: 12px 14px;
  border-bottom: 2px solid var(--surface2);
}
.est-word-row:last-child { border-bottom: 0; }

.est-word-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
}
.est-word-es {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.est-word-de {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--mid);
}
/* 0.48: Wort und Bedeutung stehen jetzt zeilenweise untereinander statt
   nebeneinander — bei langen deutschen Wörtern brach die Baseline sonst um. */
.est-word-main { align-items: baseline; }
.est-word-de { display: block; width: 100%; margin-top: 2px; }
/* Beispielsatz: bewusst kleiner und eingerückt — er trägt das Wort,
   er konkurriert nicht mit ihm. */
.est-word-example {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--accent);
}
.est-word-ex-es {
  display: inline;
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--text);
}
.est-word-ex-de {
  display: block;
  font-family: var(--serif);
  font-size: 12px;
  color: var(--mid);
  margin-top: 2px;
}

/* ── FRASES TÍPICAS ───────────────────────────────────────────────── */
.est-frases-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.est-frase-row {
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 13px 15px;
  box-shadow: var(--shadow);
}
.est-frase-es {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.est-frase-de {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--dim);
  margin-top: 3px;
}
.est-frase-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mid);
  margin-top: 6px;
}

/* ── GEMISCHTE ÜBUNG ──────────────────────────────────────────────── */
.est-gap-slot {
  display: inline-block;
  min-width: 64px;
  border-bottom: var(--bw) solid var(--accent);
  color: transparent;
  vertical-align: baseline;
}
.est-mixed-input-wrap { margin-top: 4px; }
.est-mixed-input {
  width: 100%;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  padding: 13px 15px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  outline: none;
  box-shadow: var(--shadow);
  transition: border-color .15s;
}
.est-mixed-input:focus { border-color: var(--accent); }
.est-mixed-input:disabled { opacity: 1; }

/* ── MOBILE (iPhone-first) ────────────────────────────────────────── */
@media (max-width: 480px) {
  .est-block-headline { font-size: 19px; }
  .est-char-intro-img { width: 62px; }
  .est-char-bubble-text { font-size: 14px; }
  .est-word-es { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════
   0.37 — HOME-NEUBAU
   Der grosse Toki fuehrt, darunter die drei Zahlen, dann ein
   zugeklapptes ¿Sabes qué?, dann wo man bei Estaciones und Zeitreise
   wirklich steht. Alles bestehende Bausteine — nur neu sortiert.
   ─────────────────────────────────────────────────────────────────── */

/* ── 1) Icons in den Fortschritts-Kacheln ───────────────────────── */
.home-tile-ico {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  pointer-events: none;
}
@media (max-width: 380px) {
  .home-tile-ico { width: 44px; height: 44px; margin-bottom: 4px; }
}

/* ── 2) ¿Sabes qué? — zugeklappt, oeffnet auf Klick ─────────────── */
/* Der Kopf ist ein echter Button (Tastatur + Screenreader), sieht aber
   aus wie der bisherige Kartenkopf: kein Rahmen, kein Hintergrund. */
.toki-today-card .tt-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.toki-today-card .tt-toggle-txt { display: block; min-width: 0; }
.toki-today-card .tt-toggle .tt-eyebrow,
.toki-today-card .tt-toggle .tt-banner { display: block; }
.toki-today-card .tt-chev {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--accent);
  transition: transform .22s ease;
}
.toki-today-card.tt-collapsed .tt-cols { display: none; }
.toki-today-card.tt-collapsed .tt-chev { transform: rotate(-90deg); }
.toki-today-card .tt-toggle:active .tt-chev { transform: scale(.9); }

/* ── 3) Stand-Sektionen (Estaciones / Zeitreise) ────────────────── */
/* Die Karten sind unveraendert .journey-card — hier nur der Abstand
   zwischen Kopfzeile und Karte. */
.home-stand { margin-top: 22px; }
.home-stand .section-label { margin-bottom: 10px; }
.home-stand .journey-card { margin-bottom: 20px; }
.home-stand .journey-card:last-child { margin-bottom: 0; }

/* ── 0.37.1: Der 20er-Moment ─────────────────────────────────────────
   Bewusst nur zwei Abweichungen vom normalen ok-Sheet: ein groesserer
   Toki und der Gold-Rahmen. Kein Konfetti, kein Blinken — der Ueberraschte
   Blick soll die Arbeit machen, nicht der Effekt. */
.motiv-sheet.motiv-wow .ms-toki { flex: 0 0 96px; }
.motiv-sheet.motiv-wow .ms-toki img { width: 96px; height: 96px; }
.motiv-sheet.motiv-wow { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   0.38 — ESTACIONES: KAPITEL-EBENE
   Ebene 1 der Karte. Bewusst dieselbe Sprache wie die Home-Kacheln:
   Karton, 2.5px Rand, Versatzschatten. Gesperrt heisst blass, nicht
   grau-tot — der Blick soll wissen, dass da noch was kommt.
   ─────────────────────────────────────────────────────────────────── */
/* ── 0.39: Kapitel-Knoten auf der Karte ──────────────────────────
   Erben alles von .est-pin (Kreis, Rand, Schatten, Zustaende) und
   sind nur groesser — eine Ebene hoeher, also mehr Gewicht. */
.est-pin-cap .est-pin-icon { width: 92px; height: 92px; }
.est-pin-cap .est-pin-icon img { width: 72px; height: 72px; }
.est-pin-cap .est-pin-label { font-size: 16px; }
.est-pin-cap .est-pin-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--dim);
  margin-top: 2px;
}
.est-pin-cap.est-pin-active .est-pin-count { color: var(--accent); }
.est-pin-cap.est-pin-complete .est-pin-count { color: var(--green); }

/* ── 0.39.1: Aufklappen statt Ebenenwechsel ──────────────────────
   Die Knoten bleiben im DOM und wandern nur — deshalb die Transition
   auf top/left. Ohne sie waere das Aufklappen ein harter Sprung. */
.est-adventure .est-pin {
  transition: top .42s cubic-bezier(.22,.68,.32,1),
              left .42s cubic-bezier(.22,.68,.32,1),
              opacity .28s ease,
              transform .28s ease;
}
/* Startzustand neuer Knoten (und Endzustand verschwindender): klein
   und blass, damit sie aus dem Pfad heraus aufgehen. */
.est-adventure .est-pin.est-pin-enter {
  opacity: 0;
  transform: translateX(-50%) scale(.6);
}
/* Das geoeffnete Kapitel bekommt Gewicht — es fuehrt jetzt eine Gruppe. */
.est-pin-cap.est-pin-open .est-pin-icon {
  border-color: var(--accent);
  box-shadow: var(--shadow-accent);
}

/* Stationsknoten: eine Ebene tiefer, also kleiner */
.est-pin-st .est-pin-icon { width: 50px; height: 50px; }
.est-pin-st .est-pin-icon img { width: 32px; height: 32px; }
.est-pin-st .est-pin-label { font-size: 13px; }
.est-pin-st .est-pin-sub { font-size: 11px; }

/* ═══════════════════════════════════════════════════════════════════
   0.40 — KURZE ANRUFE
   Nutzt das bestehende .call-modal als Buehne. Neu ist nur, was der
   grosse Anruf nicht hat: der Gespraechsverlauf und die Antwortwahl.
   ─────────────────────────────────────────────────────────────────── */

/* Klingeln: das Portrait wippt leicht, wie ein vibrierendes Telefon. */
.corta-ring .corta-ring-face { animation: cortaRing 1.6s ease-in-out infinite; }
@keyframes cortaRing {
  0%, 62%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-6deg); }
  72% { transform: rotate(5deg); }
  78% { transform: rotate(-4deg); }
  84% { transform: rotate(3deg); }
  90% { transform: rotate(0deg); }
}

.corta-said {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin: 8px 0 16px;
}
/* 0.53: Rundes Kopf-Portrait wie im Klingel-Screen — nicht die ganze
   Figur. object-position:top holt den Kopf in den Kreis, der Rest wird
   vom border-radius weggeschnitten. */
.corta-face {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: var(--surface2);
  border: 2px solid var(--border);
}
.corta-said-txt { flex: 1; min-width: 0; }
/* Spanisch: fett in der UI-Schrift. Deutsch: kursiv in der Serifenschrift.
   Vorher stand der spanische Satz in Serif und stach gegen die Kopfzeile ab. */
.corta-es {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}
.corta-de {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mid);
  margin-top: 3px;
}

.corta-prompt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: left;
  margin-bottom: 8px;
}

.corta-opts { display: flex; flex-direction: column; gap: 8px; }
.corta-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  border-radius: var(--r-s);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.corta-opt:active { transform: translate(1px, 1px); }
.corta-opt[disabled] { cursor: default; }
.corta-opt-es { font-size: 15px; color: var(--text); }
.corta-opt-de { font-size: 12px; color: var(--mid); }
.corta-opt.is-right { border-color: var(--green); background: var(--green-d); }
.corta-opt.is-wrong { border-color: var(--red); background: var(--red-d); }

.corta-feedback {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
  background: var(--surface2);
  border-left: 3px solid var(--red);
  border-radius: var(--r-xs);
  padding: 9px 12px;
  margin-top: 4px;
  text-align: left;
}

/* ── 0.42: Klingel-Screen ────────────────────────────────────────
   Bewusst karg. Ein klingelndes Telefon verrät auch nicht, worum es
   geht — Gesicht, Name, zwei Tasten, mehr braucht der Moment nicht. */
.corta-ring-card { text-align: center; }

.corta-ring-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.corta-ring-eyebrow svg { width: 15px; height: 15px; }

.corta-ring-face {
  width: 116px;
  height: 116px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--surface2);
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.corta-ring-face img {
  width: 104px;
  height: 104px;
  object-fit: contain;
  object-position: bottom;
}
.corta-initial {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 800;
  color: var(--mid);
  align-self: center;
}

.corta-ring-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text);
  margin-bottom: 22px;
}

.corta-ring-keys {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin-bottom: 10px;
}
.corta-key {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: var(--bw) solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.corta-key svg { width: 27px; height: 27px; }
.corta-key:active { transform: translate(2px, 2px); box-shadow: none; }
.corta-key-no  { background: var(--red);   color: var(--surface); }
.corta-key-yes { background: var(--green); color: var(--surface); }
/* Nur die Annahme-Taste pulsiert — sie ist die Einladung. */
.corta-key-yes { animation: cortaKeyPulse 1.6s ease-in-out infinite; }
@keyframes cortaKeyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}

.corta-ring-hint {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
   0.47 — ESTACIONES: Wortschatz-Header, Quiz, Endscreen
   ─────────────────────────────────────────────────────────────────── */

/* Schmaler Wortschatz-Header: kleiner Charakter, Blase daneben, Wörter
   darunter über die volle Breite. Ersetzt den grossen est-char-intro,
   der pro Block die halbe Höhe fraß. */
.est-vocab-intro {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.est-vocab-intro-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: bottom;
}
.est-vocab-intro-text {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mid);
}

/* ── Estaciones-Endscreen: an die Ergebnis-Screens angeglichen ──── */
.est-complete-screen {
  text-align: center;
  padding: 36px 20px;
  animation: zsFadeIn .4s ease;
}
.est-complete-toki { display: flex; justify-content: center; margin-bottom: 10px; }
.est-complete-toki-img { width: 128px; height: 128px; object-fit: contain; }

.est-complete-title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 6px;
}
.est-complete-name {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--mid);
  margin-bottom: 26px;
}

.est-complete-stats {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 26px;
}
.est-complete-stat {
  min-width: 104px;
  padding: 16px 12px;
  background: var(--surface);
  border: var(--bw) solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.est-complete-stat-n {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.est-cs-green { color: var(--green); }
.est-cs-gold  { color: var(--accent); }
.est-complete-stat-l {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── 0.49: Dialog-Antworten — konsistente Schriften ─────────────────
   Spanisch fett in der UI-Schrift, Deutsch kursiv in der Serifenschrift,
   wie jede Übersetzung in der App. Vorher erbte die deutsche Zeile eine
   andere Schrift und stach heraus. */
.est-ans-es {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 3px;
}
.est-ans-de {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--mid);
}

/* ── 0.49: Motivations-Pause nach dem Wortschatz-Quiz ───────────── */
.est-block-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 20px 12px;
}
.est-block-done-toki {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 12px;
}
.est-block-done-title {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.est-block-done-text {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--mid);
  max-width: 260px;
  line-height: 1.5;
}

/* 0.50: Volles Logo auf dem Willkommens-Screen — ersetzt die Eyebrow-Zeile. */
.onboard-logo {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

/* ── 0.53: Kurzanruf-Kopfzeile ──────────────────────────────────────
   Name in der Display-Schrift, Zähler als dezente Mono-Unterzeile —
   dasselbe Muster wie die Estaciones-Kopfzeilen, statt einer winzigen
   gemischten Mono-Zeile. */
.corta-head {
  text-align: left;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--surface2);
}
.corta-head-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--text);
}
.corta-head-sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 2px;
}