/* ===================================================================
   FlowCards — AnkiWeb layout, refined. See ankiweb-reference/STRUCTURE.md
   =================================================================== */
:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef0f3;
  --surface-hover: #f3f5f8;
  --border: #e4e7ec;
  --border-strong: #d2d7df;
  --text: #1f2329;
  --text-muted: #687180;
  --link: #2563eb;
  --primary: #3b82f6;
  --primary-press: #2563eb;
  --on-primary: #ffffff;
  --accent: #5b5bd6;  /* Akzent (lila) — Auswahl-Checkboxen, aktiver Audio-Replay */
  --gold: #f6b73c;

  --new: #3b82f6;     /* neu */
  --learn: #dc2626;   /* lernen */
  --review: #16a34a;  /* fällig */
  --again: #e5484d;
  --hard:  #d9730d;
  --good:  #16a34a;
  --easy:  #3b82f6;
  /* Ease-Button-Hintergründe (weisser Text) — bewusst dunkler als die Status-
     farben oben, damit weisser Text >=4.5:1 (WCAG AA) erreicht. Kontrast/Weiss:
     again 5.45:1, hard 5.02:1, good 5.02:1, easy 5.17:1. */
  --ease-again-bg: #c92a2e;
  --ease-hard-bg:  #b45309;
  --ease-good-bg:  #15803d;
  --ease-easy-bg:  #2563eb;

  /* Lese-Modus: Wort-Status-Färbung + Verständnis-Ampel-Chips. Hell-Defaults,
     im Dark-Mode (data-theme=dark + auto@prefers) gedämpft überschrieben, damit
     bekannt/lernend nicht als grelle Kacheln auf dunklem bg (#1b1d22) leuchten.
     Amber-Text bewusst #B45309 (≈5:1 auf #FFF7E0) statt #E6A100 (2.07:1, AA-Fail). */
  --read-new-bg: #DBEAFE;   --read-new-bd: #3B82F6;  --read-new-tx: #1E3A8A;
  --read-learn-bg: #FEF3C7; --read-learn-bd: #F59E0B; --read-learn-tx: #7C5A00; --read-learn-line: #B45309;
  --read-ampel-gruen-bg: #E7F6EE; --read-ampel-gruen-tx: #1E8E5A;
  --read-ampel-gelb-bg: #FFF7E0;  --read-ampel-gelb-tx: #B45309;
  --read-ampel-rot-bg: #FDECEA;   --read-ampel-rot-tx: #C0392B;
  --read-status-active-bg: #E7F6EE; --read-status-active-tx: #1E8E5A; --read-status-active-bd: #1E8E5A;

  --r: 10px;
  --r-lg: 14px;
  --shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 2px 8px rgba(16,24,40,.05);
  --shadow-2: 0 4px 20px rgba(16,24,40,.08);
  --maxw: 880px;
  --dur: 180ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #1b1d22; --surface: #24272e; --surface-2: #2b2f37; --surface-hover: #2a2e36;
    --border: #343943; --border-strong: #434956; --text: #e8eaed; --text-muted: #9aa1ac;
    --link: #7eb0ff; --primary: #4f8cff; --primary-press: #6ea0ff; --on-primary: #0e1116;
    --accent: #7c7cf0;
    --new: #60a5fa; --learn: #f87171; --review: #34d399;
    --again:#ff6369; --hard:#f59e0b; --good:#34d399; --easy:#60a5fa;
    /* Ease-Button-BG bleiben dunkel-gesättigt (weisser Text >=4.5:1 auch im Dark Mode). */
    --ease-again-bg:#c92a2e; --ease-hard-bg:#b45309; --ease-good-bg:#15803d; --ease-easy-bg:#2563eb;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 10px rgba(0,0,0,.3);
    --shadow-2: 0 6px 24px rgba(0,0,0,.45);
    /* Lese-Status gedämpft: transluzente Tönung statt heller Vollfläche. */
    --read-new-bg: rgba(59,130,246,.18); --read-new-bd: #3b6fd0; --read-new-tx: #bcd4ff;
    --read-learn-bg: rgba(245,158,11,.16); --read-learn-bd: #b07a1c; --read-learn-tx: #f2cf8f; --read-learn-line: #d99a3a;
    --read-ampel-gruen-bg: rgba(52,211,153,.16); --read-ampel-gruen-tx: #7fe0b4;
    --read-ampel-gelb-bg: rgba(245,158,11,.16);  --read-ampel-gelb-tx: #f2cf8f;
    --read-ampel-rot-bg: rgba(229,72,77,.18);     --read-ampel-rot-tx: #ff9ea1;
    --read-status-active-bg: rgba(52,211,153,.18); --read-status-active-tx: #7fe0b4; --read-status-active-bd: #2f9d6e;
  }
}
:root[data-theme="dark"] {
  --bg:#1b1d22;--surface:#24272e;--surface-2:#2b2f37;--surface-hover:#2a2e36;--border:#343943;--border-strong:#434956;
  --text:#e8eaed;--text-muted:#9aa1ac;--link:#7eb0ff;--primary:#4f8cff;--primary-press:#6ea0ff;--on-primary:#0e1116;--accent:#7c7cf0;
  --new:#60a5fa;--learn:#f87171;--review:#34d399;--again:#ff6369;--hard:#f59e0b;--good:#34d399;--easy:#60a5fa;
  --ease-again-bg:#c92a2e;--ease-hard-bg:#b45309;--ease-good-bg:#15803d;--ease-easy-bg:#2563eb;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 2px 10px rgba(0,0,0,.3);--shadow-2:0 6px 24px rgba(0,0,0,.45);
  --read-new-bg:rgba(59,130,246,.18);--read-new-bd:#3b6fd0;--read-new-tx:#bcd4ff;
  --read-learn-bg:rgba(245,158,11,.16);--read-learn-bd:#b07a1c;--read-learn-tx:#f2cf8f;--read-learn-line:#d99a3a;
  --read-ampel-gruen-bg:rgba(52,211,153,.16);--read-ampel-gruen-tx:#7fe0b4;
  --read-ampel-gelb-bg:rgba(245,158,11,.16);--read-ampel-gelb-tx:#f2cf8f;
  --read-ampel-rot-bg:rgba(229,72,77,.18);--read-ampel-rot-tx:#ff9ea1;
  --read-status-active-bg:rgba(52,211,153,.18);--read-status-active-tx:#7fe0b4;--read-status-active-bd:#2f9d6e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--text);
  background: var(--bg); min-height: 100dvh; -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; display: block; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 55%, transparent); outline-offset: 2px; border-radius: 8px; }

/* ---------- Buttons ---------- */
.btn {
  font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r); padding: 9px 16px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--surface-2); color: var(--text); white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); }
.btn--primary:hover { background: var(--primary-press); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); font-weight: 500; }
.btn--ghost:hover { background: var(--surface-hover); }
.btn--danger { background: var(--again); color: #fff; border-color: var(--again); font-weight: 600; }
.btn--danger:hover { background: color-mix(in srgb, var(--again) 85%, #000); }
.btn--outline { background: transparent; border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); color: var(--primary); font-weight: 600; min-height: 38px; padding: 7px 13px; font-size: 14px; }
.btn--outline:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.btn--sq { padding: 7px 11px; }
/* ⋯-Knopf trägt den aktiven Lern-Modus als kleines Label (Phone: einziger
   Modus-Zugang ist das Menü → aktiver Modus muss sichtbar sein). */
#btn-more { white-space: nowrap; }
.btn-more__mode { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 700;
  color: var(--primary); vertical-align: baseline; }
.btn--lg { min-height: 52px; padding: 14px 28px; font-size: 17px; border-radius: var(--r-lg); }
.btn--link { background: none; color: var(--link); font-weight: 500; }

/* ===================================================================
   TOP NAV
   =================================================================== */
.nav { position: sticky; top: 0; z-index: 30; background: var(--surface); box-shadow: var(--shadow-1); }
.nav__accent { height: 3px; background: linear-gradient(90deg, var(--gold), #f59e0b); }
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 20px;
  padding-top: calc(10px + env(safe-area-inset-top));
  display: flex; align-items: center; gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand__star { width: 26px; height: 26px; fill: var(--primary); stroke: none; }
.brand__name { font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.nav__left { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 6px; min-width: 0; }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.navlink {
  font: inherit; font-weight: 500; font-size: 15px; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 8px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.navlink:hover { color: var(--text); background: var(--surface-hover); }
.navlink.is-active { color: var(--primary); font-weight: 600; }
.navlink--muted { color: var(--text-muted); }
/* Tablet-Breiten (641–900px): die 9 Links umbrachen sonst in eine 2. Zeile.
   Stattdessen einzeilig horizontal scrollbar machen (Scrollbar dünn/versteckt).
   Mobil (≤640px) übernimmt die Bottom-Tabbar (.nav__left:none) — hier nicht relevant. */
@media (min-width: 641px) and (max-width: 900px) {
  .nav__left {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* alte Edge */
    -webkit-overflow-scrolling: touch;
  }
  .nav__left::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .navlink { flex: 0 0 auto; white-space: nowrap; }
}
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px;
  background: none; border: none; cursor: pointer; color: var(--text-muted); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.iconbtn:hover { background: var(--surface-hover); color: var(--text); }
.ic-moon { display: none; }
:root[data-theme="dark"] .ic-sun { display: none; }
:root[data-theme="dark"] .ic-moon { display: block; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .ic-sun { display: none; } :root[data-theme="auto"] .ic-moon { display: block; } }

/* Zahnrad-Menü (rechts in der Top-Nav): Einstellungen / Layouts / Konto. */
.cogmenu { position: relative; }
.cogmenu__pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.cogmenu__pop[hidden] { display: none; }
.cogmenu__pop button {
  font: inherit; font-size: 15px; font-weight: 500; color: var(--text); text-align: left;
  background: none; border: none; cursor: pointer; padding: 10px 12px; min-height: 44px;
  border-radius: 8px; transition: background var(--dur) var(--ease);
}
.cogmenu__pop button:hover { background: var(--surface-hover); }

/* ===================================================================
   PAGE / VIEWS
   =================================================================== */
.page { flex: 1; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: 28px 20px 48px; }
.view { display: none; animation: fade var(--dur) var(--ease); }
.view.is-active { display: block; }
.view:focus, .view:focus-visible { outline: none; }
.view--narrow { max-width: 620px; margin: 0 auto; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page__title { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }

/* ===================================================================
   DECKS
   =================================================================== */
.langbar { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.langchip { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; min-height: 40px; cursor: pointer; transition: all var(--dur) var(--ease); }
.langchip:hover { color: var(--text); border-color: var(--border-strong); }
.langchip.is-active { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.langchip__flag { font-size: 16px; line-height: 1; }
/* ＋ / ⚙ Chips: kompakt, kreisförmig, dezent */
.langchip--add, .langchip--manage { padding: 0; width: 40px; min-height: 40px; justify-content: center;
  font-size: 18px; line-height: 1; color: var(--text-muted); }
.langchip--add { font-weight: 700; }

/* Tagesziel-Banner (Retention) — Fortschritt + Streak oben in der Decks-View */
.dailygoal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--shadow-1); }
.dailygoal--done { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.dailygoal__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dailygoal__label { font-weight: 600; font-size: 15px; color: var(--text); }
.dailygoal__streak { font-weight: 600; font-size: 14px; color: var(--text-muted); white-space: nowrap; }
.dailygoal__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dailygoal__fill { height: 100%; border-radius: 999px; background: var(--primary); width: 0;
  transition: width var(--dur) var(--ease); }
.dailygoal--done .dailygoal__fill { background: var(--good); }

/* Kategorie-Editor: Checkbox-Liste der Top-Level-Decks */
.catpick { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto;
  border: 1px solid var(--border); border-radius: var(--r); padding: 6px; margin-top: 4px; }
.catpick__row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
  cursor: pointer; }
.catpick__row:hover { background: var(--surface-2); }
.catpick__row input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }

/* Kategorien-Verwaltung: Zeilen mit Aktionen */
.catmgr { display: flex; flex-direction: column; gap: 6px; }
.catmgr__row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.catmgr__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catmgr__actions { display: flex; gap: 6px; flex-shrink: 0; }
.btn--sm { padding: 5px 10px; font-size: 13px; min-height: 32px; }

/* Papierkorb (Trash): Button-Badge + Liste */
#btn-trash { position: relative; display: inline-flex; align-items: center; gap: 6px; }
#btn-trash.has-items { color: var(--again); }
/* Sync-Konflikt wartet auf Nutzer-Entscheidung: dezenter Aufmerksamkeits-Hinweis
   am Sync-Knopf (kein Dialog beim Auto-Sync). */
#btn-sync.has-conflict { color: var(--hard); position: relative; }
#btn-sync.has-conflict::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--hard); }
.trash-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--again); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums; }
.trashlist { display: flex; flex-direction: column; gap: 6px; }
.trashlist__row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.trashlist__info { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.trashlist__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trashlist__count { color: var(--text-muted); font-size: 13px; }
.trashlist__actions { display: flex; gap: 6px; flex-shrink: 0; }

.decktable { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.deckrow {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--border); cursor: pointer; background: var(--surface);
  transition: background var(--dur) var(--ease);
}
.deckrow:last-child { border-bottom: none; }
.deckrow:hover { background: var(--surface-hover); }
.deckrow--sub { padding-left: 40px; }
.deckrow__name { flex: 1; min-width: 0; color: var(--link); font-weight: 600; font-size: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deckrow--sub .deckrow__name { font-weight: 500; }
.deckrow__nums { display: flex; gap: 14px; align-items: baseline; font-variant-numeric: tabular-nums; }
.dnum { font-weight: 700; font-size: 15px; min-width: 22px; text-align: right; }
.dnum--review { color: var(--review); }
.dnum--new { color: var(--new); }
.dnum.is-zero { color: var(--text-muted); opacity: .45; font-weight: 500; }
.deckrow__actions { position: relative; }
.actbtn { font: inherit; font-size: 14px; font-weight: 500; color: var(--link); background: none; border: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; }
.actbtn:hover { background: var(--surface-2); }
.actmenu { position: absolute; right: 0; top: 100%; margin-top: 4px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-2); min-width: 150px; padding: 6px; z-index: 5; display: none; }
.actmenu.is-open { display: block; }
.actmenu button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--text);
  background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 6px; }
.actmenu button:hover { background: var(--surface-hover); }
.actmenu button.danger { color: var(--again); }

.collstrip { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding: 14px 4px; color: var(--text-muted); font-size: 14px; }
.collstrip__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Schnell-Lernen ▶ direkt auf der Deck-Zeile (zwischen Zählern und Aktionen). */
.deckrow__play {
  flex: 0 0 auto; width: 38px; height: 38px; min-height: 38px; border-radius: 999px;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  color: var(--primary); background: transparent;
  border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.deckrow__play:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.deckrow__play:active { transform: scale(.94); }
.deckrow__play:disabled { opacity: .35; cursor: default; }
.deckrow__play:disabled:hover { background: transparent; color: var(--primary); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }

/* ===================================================================
   DECK-DETAILSEITE (#view-deck)
   =================================================================== */
.view--deck { max-width: 620px; margin: 0 auto; }
.deckdetail__back {
  font: inherit; font-size: 15px; font-weight: 600; color: var(--link);
  background: none; border: none; cursor: pointer; padding: 6px 2px; margin-bottom: 8px; border-radius: 6px;
}
.deckdetail__back:hover { text-decoration: underline; }
.deckdetail__name { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 4px 0 20px; overflow-wrap: anywhere; }
.deckdetail__counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.dstat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 6px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--border);
}
.dstat__n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dstat__l { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.dstat--new .dstat__n { color: var(--new); }
.dstat--learn .dstat__n { color: var(--learn); }
.dstat--due .dstat__n { color: var(--review); }

.deckdetail__mature { margin-bottom: 22px; }
.dmature__bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dmature__fill { height: 100%; border-radius: 999px; background: var(--good); width: 0; transition: width var(--dur) var(--ease); }
.dmature__note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }

.deckdetail__actions { display: flex; flex-direction: column; gap: 12px; }
.deckdetail__study { width: 100%; }
.deckdetail__row2 { display: flex; gap: 10px; }
.deckdetail__row2 .btn { flex: 1; min-height: 46px; }
.deckdetail__manage { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.deckdetail__manage .btn { flex: 1; min-width: 100px; }

/* ===================================================================
   STUDY / REVIEW
   =================================================================== */
.view--study { display: none; }
.view--study.is-active { display: flex; }
.quiz { display: flex; flex-direction: column; width: 100%; min-height: calc(100dvh - 160px); }
/* Eine kompakte Kopfzeile: ⋯ · Modus-Pillen · Richtung · (Spacer) · Zähler.
   .quiz__modes nimmt die Mitte, .counts wird per margin-left:auto nach rechts
   geschoben. Auf schmalen Viewports bricht die Zeile (siehe @media ≤640px). */
.quiz__bar { display: flex; align-items: center; gap: 10px 12px; margin-bottom: 10px; flex-wrap: wrap; }
.quiz__tools { display: flex; gap: 8px; flex-wrap: wrap; flex: none; }
.quiz__modes { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.counts { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; margin-left: auto; flex: none; }
.count__plus { color: var(--text-muted); font-weight: 400; }
.count--new { color: var(--new); }
.count--learn { color: var(--learn); }
.count--review { color: var(--review); }
.count.is-active { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

.quiz__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 8px; min-height: 0; }
.qa { width: 100%; max-width: 640px; text-align: center; }
.qa__q { font-size: 24px; font-weight: 600; line-height: 1.35; color: var(--text); }
.qa__hr { border: none; border-top: 1px solid var(--border); margin: 22px auto; max-width: 320px; }
.qa__a { font-size: 21px; line-height: 1.5; color: var(--text); }
.qa__a .accent { color: var(--again); font-weight: 600; }
.qa__hint { margin-top: 18px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Real Anki card: rendered HTML + the note type's own CSS (.card{} applies to
   #cardhost). We host it on a neutral white surface like a physical flashcard,
   so it looks consistent in light + dark app themes. */
.ankicard {
  position: relative;  /* Anker für das Eselsbrücke-Schnellzugang-Icon oben rechts */
  width: 100%; max-width: 600px; margin: 0 auto;
  background: #ffffff; color: #15181c;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 30px 26px; overflow-wrap: anywhere;
}

/* Eselsbrücke-Schnellzugang oben rechts IN der aufgedeckten Karte. Dezent, aber
   auffindbar; großzügige Klickfläche (≥40px) für Touch. Sitzt in der Ecke über
   dem oberen Innenabstand → überdeckt keinen Kartentext/Bild. Aktiv-Zustand
   (Karte hat schon eine Eselsbrücke) füllt den Knopf in der Akzentfarbe. */
.ankicard__mnemo {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d8dae0; border-radius: 999px;
  /* Die generische .ankicard hat festen weißen Hintergrund (Light+Dark). Darum
     hier feste helle Chrome statt var(--surface)/var(--text) — sonst dunkler
     Kreis auf weißer Karte im Dark Mode. */
  background: #fff; color: #15181c;
  cursor: pointer; opacity: .72;
  box-shadow: var(--shadow-1);
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease),
              transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ankicard__mnemo:hover { opacity: 1; background: #f2f3f6; }
.ankicard__mnemo:active { transform: scale(.92); }
.ankicard__mnemo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ankicard__mnemoico { font-size: 18px; line-height: 1; filter: grayscale(.25); }
/* Aktiv = Eselsbrücke vorhanden → gefüllt + voll sichtbar. */
.ankicard__mnemo.is-active {
  opacity: 1; background: var(--accent);
  border-color: var(--accent); color: #fff;
}
.ankicard__mnemo.is-active .ankicard__mnemoico { filter: none; }
.ankicard__mnemo.is-active:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.ankicard .card { font-size: 22px; line-height: 1.5; background: transparent; }
.ankicard img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; }
.ankicard hr, .ankicard #answer { border: none; border-top: 1px solid #e4e4e8; margin: 20px auto; max-width: 340px; }
.ankicard a, .ankicard .hint { color: #2563eb; cursor: pointer; text-decoration: none; }
.ankicard a:hover { text-decoration: underline; }
/* „Seite 3"-Hint als Zwei-Wege-Toggle (wireHintToggles): Pfeil zeigt den Zustand
   (▸ eingeklappt, ▾ aufgeklappt), damit klar ist, dass ein erneuter Klick einklappt. */
.ankicard .hint-toggle::after { content: " ▸"; font-size: 0.85em; opacity: 0.7; }
.ankicard .hint-toggle.is-open::after { content: " ▾"; }
.ankicard .card-audio { display: block; margin: 16px auto 4px; width: 260px; max-width: 100%; height: 40px; }

/* === Mini-Audio-Player (Play/Pause + Seekbar + mm:ss) =================== */
.fcplayer {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px 5px 5px;
  max-width: 100%; vertical-align: middle;
}
/* Inline-Karten-Audio: zentriert wie der frühere native Player. */
.ankicard .fcplayer { display: flex; margin: 16px auto 4px; width: 300px; max-width: 100%; }
.fcplayer--compact { gap: 6px; padding: 4px 8px 4px 4px; }
.fcplayer__play {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center; cursor: pointer;
  background: var(--primary); color: var(--on-primary, #fff);
  border: none; font-size: 15px; line-height: 1;
  transition: background var(--dur, .18s) var(--ease, ease), transform .1s var(--ease, ease);
}
.fcplayer--compact .fcplayer__play { width: 44px; height: 44px; }
.fcplayer__play:hover { background: var(--primary-press, var(--primary)); }
.fcplayer__play:active { transform: scale(.94); }
.fcplayer__ico { pointer-events: none; }
.fcplayer.is-loading .fcplayer__play { opacity: .7; cursor: progress; }
.fcplayer__seek {
  flex: 1 1 auto; min-width: 80px; height: 24px; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.fcplayer--compact .fcplayer__seek { min-width: 56px; }
.fcplayer__seek::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: var(--border-strong);
}
.fcplayer__seek::-moz-range-track {
  height: 5px; border-radius: 999px; background: var(--border-strong);
}
.fcplayer__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px;
  margin-top: -5.5px; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--surface); cursor: pointer;
}
.fcplayer__seek::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; background: var(--primary);
  border: 2px solid var(--surface); cursor: pointer;
}
.fcplayer__seek:disabled { opacity: .5; cursor: default; }
.fcplayer__time {
  flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--text-muted); white-space: nowrap; min-width: 34px;
}
.fcplayer.is-playing { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.ankicard .card-tts { font-size: 20px; line-height: 1; width: 44px; height: 44px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-strong); cursor: pointer; margin: 12px auto; display: block; }
.ankicard .card-tts:active { transform: scale(.94); }

.quiz__foot { position: sticky; bottom: 0; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(var(--bg) 40%, var(--bg)); }
.btn--show { width: 100%; max-width: 340px; margin: 0 auto; display: flex; }
/* Tipp-Modus: „Antwort zeigen" ist nur die sekundäre „weiß ich nicht"-Option →
   kompakt, schmal, dezent (ghost), damit sie „Prüfen" nicht konkurriert. */
.btn--show.is-secondary {
  width: fit-content; max-width: 100%; min-height: 36px;
  padding: 7px 16px; font-size: 14px; border-radius: var(--r);
}
.btn--show.is-secondary .kbd { opacity: .7; }
.kbd { font-size: 11px; font-weight: 600; opacity: .8; background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 6px; }

/* Kompakte Bewerten-Leiste: Intervall sitzt klein direkt ÜBER dem Knopf,
   der Knopf selbst ist flacher (≥44px Touch-Target bleibt gewahrt), die
   Tasten-Nummer ist ein dezentes Eck-Badge. Spart spürbar Höhe, damit bei
   ausgeklappten Beispielen weniger gescrollt werden muss. */
.eases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 520px; margin: 0 auto; }
.ease { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ease__t { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1; }
.btn--ease { width: 100%; min-height: 44px; padding: 6px 6px; color: #fff; font-size: 14px; font-weight: 600; position: relative; box-shadow: var(--shadow-1); }
.btn--ease .ease__k { position: absolute; top: 3px; right: 6px; font-size: 9px; font-weight: 600; opacity: .7; }
.btn--again { background: var(--ease-again-bg); } .btn--again:hover { filter: brightness(1.07); }
.btn--hard  { background: var(--ease-hard-bg); }  .btn--hard:hover { filter: brightness(1.07); }
.btn--good  { background: var(--ease-good-bg); }  .btn--good:hover { filter: brightness(1.07); }
.btn--easy  { background: var(--ease-easy-bg); }  .btn--easy:hover { filter: brightness(1.07); }
/* Sprechen-Modus: vom Aussprache-Score vorgeschlagener Ease hervorheben. */
.ease.is-suggested .btn--ease { outline: 3px solid var(--accent); outline-offset: 2px; transform: translateY(-2px); }
.ease.is-suggested .ease__t { color: var(--accent); }

/* ===================================================================
   Desktop-Verdichtung (≥1000px): die breite Fläche besser nutzen.
   Weniger vertikaler Leerraum um die Karte (Stage zentriert nicht mehr
   mit großen Lücken, sondern startet oben), breitere Karte/Antwort,
   damit Karte + Beispiele + Eingabe + Bewerten ohne Seiten-Scroll
   zusammen sichtbar bleiben. Mobil bleibt unverändert kompakt.
   =================================================================== */
@media (min-width: 1000px) {
  /* Seiten-Wrapper NUR im Lern-Modus weiten — sonst kappt .page (max-width 880px)
     die breitere Karte/Zonen-Karte und der gewonnene Desktop-Platz verpufft. */
  .page:has(#view-study.is-active) { max-width: 1040px; }
  .quiz__stage { justify-content: flex-start; padding: 12px 8px; gap: 12px; }
  /* Generische Karte (answer_html): luftiger + breiter statt schmaler Block. */
  .ankicard { max-width: 820px; padding: 26px 34px; }
  .qa { max-width: 760px; }
  /* Strukturierte Zonen-Karte darf die Breite voll für 2 Spalten nutzen.
     Spezifität (0,2,0) schlägt die spätere Basisregel .ankicard--zones (0,1,0) bei Z2450. */
  .ankicard.ankicard--zones { max-width: 920px; }
  /* Bewerten-Leiste etwas breiter, damit die 4 Knöpfe nicht winzig wirken. */
  .eases { max-width: 600px; }
}

.done { text-align: center; padding: 48px 24px; }
.done__ring { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--review) 15%, transparent); color: var(--review); }
.done__ring .ic { width: 40px; height: 40px; stroke-width: 2.4; }
.done__title { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.done__sub { color: var(--text-muted); max-width: 420px; margin: 0 auto; line-height: 1.5; }
.done__cta { margin-top: 22px; }
/* Mehrere CTAs im Done-Screen (Tagespensum-Fall): zentriert, umbrechbar. */
.done__ctas { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.done__ctas .done__cta { margin-top: 0; }

/* Backlog-Pille im Study-Header: dezent, macht den gekappten Tageszähler ehrlich. */
.backlog-pill { font-size: 12px; line-height: 1; padding: 4px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); white-space: nowrap; align-self: center; }

/* Sitzungs-Fortschritt unter der Study-Leiste: schlanker Balken + Text. */
.studyprog { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.studyprog__bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.studyprog__fill { height: 100%; border-radius: 999px; background: var(--review); width: 0;
  transition: width var(--dur) var(--ease); }
.studyprog__txt { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Deck-Detail: „Tagesportion einstellen"-Hinweis bei großem Rückstand. */
.deckdetail__portion { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 4px;
  padding: 12px 14px; background: var(--surface-2); border-radius: var(--r-lg); }
.dportion__txt { flex: 1; min-width: 180px; font-size: 14px; color: var(--text-muted); line-height: 1.4; }

/* Untergeordneter Modal-Hinweis (z.B. Custom-Study Anzahl-Erklärung). */
.modal__note--sub { font-size: 13px; margin-top: -4px; }

/* Inline-Textbutton (Vorschlag übernehmen) im Limits-Modal. */
.lnk { background: none; border: 0; padding: 0; color: var(--primary); font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: underline; }
.lnk:hover { filter: brightness(1.1); }

/* Leerzustand „Noch keine Decks" (Onboarding mit CTAs). */
.decks-empty { text-align: center; padding: 44px 24px; background: var(--surface);
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.decks-empty__icon { font-size: 44px; line-height: 1; margin-bottom: 12px; }
.decks-empty__title { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.decks-empty__sub { color: var(--text-muted); font-size: 15px; max-width: 360px; margin: 0 auto 22px; line-height: 1.5; }
.decks-empty__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ===================================================================
   FORMS (Search / Add / Account)
   =================================================================== */
.field { display: block; position: relative; }
.field__label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 5px; }
.field__hint { font-weight: 400; opacity: .7; }
.field__input {
  width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r); padding: 11px 14px; min-height: 46px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
select.field__input { cursor: pointer; }

.searchbar { display: flex; gap: 10px; align-items: flex-end; }
.searchbar .field { flex: 1; }
.results { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.results li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; }
.results__q { font-weight: 600; } .results__a { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.results__empty { color: var(--text-muted); padding: 8px 2px; }

/* ============ Karten-Browser (#view-search) ============ */
.view--browse { max-width: 880px; margin: 0 auto; }

.browse__toolbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  padding-bottom: 12px; margin-bottom: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.browse__searchrow { display: flex; gap: 10px; align-items: stretch; }
.browse__search { flex: 1 1 auto; min-width: 0; }
.browse__deck { flex: 0 0 auto; max-width: 40%; }
input.browse__search[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

.browse__filterrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  appearance: none; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 999px; min-height: 30px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface-hover); color: var(--text); }
.chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.browse__count { margin-left: auto; color: var(--text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Tag-Filter (Dropdown) + Flag-Filter (farbige Auswahl) */
.browse__filterrow--tagflag { gap: 10px; }
.browse__tagwrap { position: relative; display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.browse__tagicon { position: absolute; left: 9px; font-size: 13px; pointer-events: none; opacity: .7; }
.browse__tag { padding-left: 28px; min-height: 32px; font-size: 13px; max-width: 200px; }

.flagpick { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.flagchip {
  appearance: none; cursor: pointer; width: 24px; height: 24px; border-radius: 999px;
  border: 2px solid var(--border-strong); background: var(--surface); padding: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.flagchip[data-flag=""] { width: auto; height: 24px; min-height: 24px; padding: 0 10px; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.flagchip[data-flag=""].is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.flagchip:hover { transform: scale(1.12); }
.flagchip.is-active:not([data-flag=""]) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; border-color: var(--bg); }
.flagchip--1 { background: #e5484d; color: #e5484d; }
.flagchip--2 { background: #d9730d; color: #d9730d; }
.flagchip--3 { background: #16a34a; color: #16a34a; }
.flagchip--4 { background: #3b82f6; color: #3b82f6; }
.flagchip--5 { background: #d946ef; color: #d946ef; }
.flagchip--6 { background: #0ea5e9; color: #0ea5e9; }
.flagchip--7 { background: #a855f7; color: #a855f7; }

/* Aktions-Zeile in der Browser-Toolbar (Notiztyp ändern) */
.browse__filterrow--actions { gap: 8px; }
.browse__changetype { min-height: 44px; }

/* Bulk-Leiste (Mehrfach-Auswahl): erscheint über der Liste, sobald ≥1 gewählt */
.browse__bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; padding: 8px 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
}
.browse__bulkinfo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.browse__bulkall { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 14px; }
.browse__bulkall input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent, var(--review)); }
.browse__bulkclear {
  border: none; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 6px 4px; min-height: 44px;
}
.browse__bulkclear:hover { color: var(--text); text-decoration: underline; }
.browse__bulkactions { display: flex; flex-wrap: wrap; gap: 8px; }
.browse__bulkactions .btn { min-height: 44px; min-width: 80px; }

/* Tag-Editor im Zeilen-Editor */
.cardtags__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.cardtags__empty { color: var(--text-muted); font-size: 13px; }
.cardtags__chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); border-radius: 999px; padding: 3px 4px 3px 10px;
  font-size: 12px; font-weight: 600; max-width: 100%;
}
.cardtags__chiptext { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.cardtags__x {
  border: none; background: none; cursor: pointer; color: var(--text-muted);
  font-size: 16px; line-height: 1; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cardtags__x:hover { background: var(--again); color: #fff; }
.cardtags__add { display: flex; gap: 8px; align-items: center; }
.cardtags__add .field__input { flex: 1 1 auto; min-width: 0; }
.cardtags__addbtn { flex: 0 0 auto; min-width: 44px; min-height: 40px; font-size: 18px; font-weight: 700; }

/* Notiztyp-Änderung: Feld-Mapping-UI im Modal */
.ntmap { margin-top: 6px; }
.ntmap__intro { color: var(--text-muted); font-size: 13px; font-weight: 600; margin: 8px 0 4px; }
.ntmap__row .field__input { min-height: 40px; }
.ntmap__warn { margin-top: 10px; }
.ntmap__warn--danger { color: var(--again); font-weight: 600; }

.cardlist { list-style: none; display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.cardrow {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--border); border-bottom: none; background: var(--surface);
  cursor: pointer; transition: background var(--dur) var(--ease);
}
.cardrow:first-child { border-top-left-radius: var(--r); border-top-right-radius: var(--r); }
.cardrow:last-child { border-bottom: 1px solid var(--border); border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); }
.cardrow:hover { background: var(--surface-hover); }

/* Auswahl-Checkbox pro Zeile (Bulk-Aktionen). Touch-Ziel ≥44px über das Label. */
.cardrow__check {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 28px; min-height: 44px; margin: -10px 0; cursor: pointer;
}
.cardrow__check input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent, var(--review)); }
.cardrow.is-selected { background: var(--surface-hover); }
.cardrow.is-selected:hover { background: var(--surface-hover); }

.cardrow__dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--text-muted); }
.cardrow__dot--new { background: var(--new); }
.cardrow__dot--learn { background: var(--learn); }
.cardrow__dot--due { background: var(--review); }
.cardrow__dot--suspended { background: var(--text-muted); opacity: .55; }

.cardrow__texts { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cardrow__front { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardrow__back { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cardrow__meta { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; max-width: 42%; }
.cardrow__deck {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border-radius: 999px; padding: 3px 9px;
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardrow__susp { font-size: 13px; opacity: .7; }
.cardrow__tags { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.cardrow__tag {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border-radius: 999px; padding: 2px 7px;
  max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cardrow__tagmore { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
/* Flag färbt den Status-Punkt mit ein (Ring), zusätzlich zum ⚑ rechts. */
.cardrow__dot--flagged { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px currentColor; }
.cardrow__dot--flagged.cardrow--flag1 { color: #e5484d; }
.cardrow__dot--flagged.cardrow--flag2 { color: #d9730d; }
.cardrow__dot--flagged.cardrow--flag3 { color: #16a34a; }
.cardrow__dot--flagged.cardrow--flag4 { color: #3b82f6; }
.cardrow__dot--flagged.cardrow--flag5 { color: #d946ef; }
.cardrow__dot--flagged.cardrow--flag6 { color: #0ea5e9; }
.cardrow__dot--flagged.cardrow--flag7 { color: #a855f7; }
.cardrow__flag { font-size: 13px; color: var(--text-muted); }
.cardrow--flag1 .cardrow__flag, .cardrow__flag.cardrow--flag1 { color: #e5484d; }
.cardrow__flag.cardrow--flag2 { color: #d9730d; }
.cardrow__flag.cardrow--flag3 { color: #16a34a; }
.cardrow__flag.cardrow--flag4 { color: #3b82f6; }
.cardrow__flag.cardrow--flag5 { color: #d946ef; }
.cardrow__flag.cardrow--flag6 { color: #0ea5e9; }
.cardrow__flag.cardrow--flag7 { color: #a855f7; }

.cardlist__loading, .cardlist__empty { color: var(--text-muted); padding: 22px 8px; text-align: center; }
.cardlist__empty { border: 1px dashed var(--border); border-radius: var(--r); }
.cardlist__emptytitle { font-weight: 600; color: var(--text); margin: 0 0 6px; }
.cardlist__emptyhint { margin: 0; font-size: 13px; }
.cardlist__emptyhint code { background: var(--surface-2); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; }

.browse__pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 16px; }
.browse__pagerinfo { color: var(--text-muted); font-size: 13px; }

@media (max-width: 560px) {
  .browse__deck { max-width: 46%; }
  .cardrow__meta { max-width: 38%; }
  .cardrow__deck { max-width: 110px; }
}

.addform { display: flex; flex-direction: column; gap: 14px; }
.frow { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 14px; }
.frow__l { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.frow--actions { grid-template-columns: 1fr; justify-items: start; }

.account { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-1); }
.account__tabs { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.atab { font: inherit; font-weight: 600; font-size: 14px; color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.atab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.account__form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.account__form .field { width: 100%; }

/* ===================================================================
   FOOTER + TOAST
   =================================================================== */
.foot-links { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
.foot-links a { color: var(--text-muted); text-decoration: none; font-size: 14px; }
.foot-links a:hover { color: var(--text); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 50;
  background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-2); opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; }
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===================================================================
   BOTTOM-TAB-BAR (nur Mobil, ≤640px) — AnkiMobile/Duolingo-Pattern.
   Desktop: per default ausgeblendet (display:none). Die obere Nav bleibt dort
   die einzige Navigation.
   =================================================================== */
.tabbar { display: none; }
.moresheet[hidden] { display: none; }
@media (max-width: 640px) {
  /* Toast über die 56px-Tabbar heben, sonst liegt er drauf. */
  .toast { bottom: calc(24px + 56px + env(safe-area-inset-bottom, 0px)); }
  /* Mobil übernimmt die Bottom-Tabbar + „Mehr"-Sheet die Navigation. Die obere
     Navigationsleiste (8 Links + Konto) muss hier nicht mehr passen → ausblenden,
     damit die Top-Bar nie umbrechen/überlaufen kann. Brand bleibt. */
  .nav__left { display: none; }
  .nav__right .navlink { display: none; }
  /* Zahnrad-Menü (Einstellungen/Layouts/Konto) ist reines Desktop-Element. Auf Mobil
     deckt die „Mehr"-Bottom-Sheet dieselben Ziele ab → Doppelung vermeiden, ausblenden. */
  .cogmenu { display: none; }
  /* Theme-Umschalter ist auf dem Phone schon im „Mehr"-Sheet (#moresheet-theme).
     Top-Bar-Icon ausblenden → ein Eingang pro Ziel, keine Doppelung. */
  #btn-theme { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    display: flex; align-items: stretch;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(16,24,40,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tabbtn {
    flex: 1 1 0; min-width: 0; min-height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 4px 6px; border: none; background: none; cursor: pointer;
    color: var(--text-muted); font: inherit;
    transition: color var(--dur) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbtn__ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; display: block; }
  .tabbtn__lab { font-size: 11px; font-weight: 600; line-height: 1; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tabbtn.is-active { color: var(--primary); }
  .tabbtn--accent { color: var(--accent); } /* „Sprechen" lila-Akzent (≠ aktiv-Blau) */
  .tabbtn.is-active.tabbtn--accent { color: var(--primary); }
  .tabbtn:active { transform: scale(.94); }

  /* „Mehr"-Bottom-Sheet */
  .moresheet { position: fixed; inset: 0; z-index: 57; }
  .moresheet__backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.42);
    opacity: 0; transition: opacity var(--dur) var(--ease); }
  .moresheet.is-show .moresheet__backdrop { opacity: 1; }
  .moresheet__card {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--surface); border-top-left-radius: 18px; border-top-right-radius: 18px;
    box-shadow: var(--shadow-2); padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 2px;
    transform: translateY(100%); transition: transform var(--dur) var(--ease);
  }
  .moresheet.is-show .moresheet__card { transform: translateY(0); }
  .moresheet__grip { width: 40px; height: 4px; border-radius: 999px; background: var(--border-strong);
    margin: 6px auto 10px; opacity: .8; }
  .moresheet__row {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px;
    padding: 12px 10px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 600; color: var(--text); text-align: left;
    border-radius: var(--r); transition: background var(--dur) var(--ease);
  }
  .moresheet__row:hover { background: var(--surface-hover); }
  .moresheet__row:active { background: var(--surface-2); }
  .moresheet__ic { font-size: 20px; line-height: 1; width: 26px; text-align: center; flex: none; }
  .moresheet__row--theme { border-top: 1px solid var(--border); margin-top: 4px; }

  /* Platz für die Tab-Bar schaffen, damit nichts verdeckt wird. */
  body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* Study-Footer (Eases) sitzt sticky bottom:0 — über die Tab-Bar heben, damit
     die wichtigste Interaktion nie verdeckt wird. */
  .quiz__foot { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
  /* Footer-Links über der Tab-Bar (sonst dahinter versteckt). */
  .foot-links { margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }

  /* Off-Canvas-Panele (Assistent) dürfen den Dokument-Scroll nicht verlängern.
     .assist-panel ist position:fixed; translateX(100%) — auf schmalen Viewports
     ragt es über die rechte Kante und erzeugt horizontalen Swipe/Overflow auf
     der ganzen App. overflow-x:hidden clippt es weg. */
  html, body { overflow-x: hidden; }

  /* Modal-Card nie breiter als Viewport (- Rand). Verhindert, dass der
     ✕-Close-Button + Footer ausserhalb des Viewports landen. */
  .modal { padding: 16px; }
  .modal__card { max-width: min(520px, calc(100vw - 32px)); }

  /* ===== Study-Screen als 3-Zonen-Layout (AnkiMobile/Quizlet-Muster) =====
     Welle 3: Der Study-View füllt exakt den Raum zwischen Top-Nav und Tabbar
     (robuste Höhe via --nav-h/--tabbar-h, gemessen in updateLayoutVars()).
     Die Seite selbst scrollt NICHT — nur die Karte (Zone 2) scrollt intern.
     ZONE 1 = .quiz__bar (fest), ZONE 2 = .quiz__stage (flex:1, intern scroll),
     ZONE 3 = .quiz__foot (unten gepinnt, immer sichtbar). */
  /* Seiten-Padding im Study-View minimieren (wie Chat), damit die Höhen-
     berechnung der .quiz nicht überläuft → keine vertikale Seiten-Scrollbar. */
  /* Top- UND Bottom-Padding der Seite im Study-View auf 0 — sonst zählt das
     untere Seiten-Padding zur .quiz-Höhe dazu und die Seite läuft um ~40px über
     (vertikale Scrollbar trotz fixer Höhe). Die Tabbar-Reserve trägt body selbst. */
  body.is-study-view .page { padding-top: 0; padding-bottom: 0; }
  body.is-study-view .quiz {
    height: calc(100dvh - var(--nav-h, 63px) - var(--tabbar-h, 57px));
    min-height: 0;
  }
  /* ZONE 1 — schlanke Top-Leiste, EINE Zeile, scrollt nicht, schrumpft nicht. */
  body.is-study-view .quiz__bar {
    flex: 0 0 auto; flex-wrap: nowrap; margin-bottom: 8px;
    gap: 8px; overflow: hidden;
  }
  body.is-study-view .quiz__tools { order: 1; flex-wrap: nowrap; flex: 0 0 auto; }
  body.is-study-view .counts { order: 3; margin-left: auto; flex: 0 0 auto; font-size: 16px; }
  body.is-study-view #btn-undo-bar { order: 2; }
  /* Modus + Richtung wandern ins ⋯-Menü → Dauer-Leiste auf dem Phone weg. */
  body.is-study-view .quiz__modes { display: none !important; }

  /* ZONE 2 — Karten-Bereich füllt den Rest und scrollt INTERN (egal wie hoch
     der Inhalt, auch 2000px). Karte sprengt nie mehr die Seite. justify oben
     statt zentriert, damit lange Karten von oben lesbar starten. */
  body.is-study-view .quiz__stage {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start; padding: 12px 6px; gap: 10px;
  }

  /* ZONE 3 — Bewerten-Zone unten gepinnt, IMMER sichtbar (kein Scrollen nötig
     um zu bewerten). Sitzt direkt an der Tabbar-Oberkante. Die .quiz endet
     bereits an der Tabbar (Höhe zieht --tabbar-h ab) → hier KEIN safe-area
     (die Tabbar trägt sie selbst, sonst doppelt). Überstimmt die globale
     sticky-Regel + die ältere bottom:calc(56px+safe)-Hebung weiter oben. */
  body.is-study-view .quiz__foot {
    position: static; flex: 0 0 auto; margin-top: auto;
    bottom: auto; padding: 10px 0 8px;
    background: var(--bg); border-top: 1px solid var(--border);
  }

  /* Touch-Targets der einzelnen Modus-Buttons (im ⋯-Menü) auf ≥44px. */
  .seg .seg__btn { min-height: 44px; }

  /* C: Bild-Dump im generischen Karten-Flow zähmen. Ein hohes (Mnemonik-/
     Merkbild-)Bild kann die Karte auf ~2000px aufblähen. Auf dem Phone die
     Bildhöhe deckeln (Seitenverhältnis bleibt via object-fit:contain), Tap
     öffnet das Bild ohnehin nicht — Zielwort + Bedeutung + Audio bleiben sofort
     sichtbar, Zone-2 scrollt den Rest. Zonen-Karten haben eigene Bild-Regeln. */
  .ankicard:not(.ankicard--zones) img {
    max-height: 38vh; object-fit: contain; object-position: center;
  }

  /* Coach-Mode-Chips: horizontal scrollbar statt die Seite zu verbreitern. */
  .chat__modes { display: flex; max-width: 100%; align-self: stretch;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .chat__modes::-webkit-scrollbar { display: none; }
  .chatmode { flex: 0 0 auto; }

  /* Deck-Zeile kompakter, damit der Deck-Name mehr Lesebreite bekommt:
     kleinere Zähler-Lücke + kein doppeltes Padding. */
  .deckrow { padding: 14px 14px; gap: 10px; }
  .deckrow__nums { gap: 10px; }
  .dnum { min-width: 18px; font-size: 14px; }
  .actbtn { padding: 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .moresheet__backdrop, .moresheet__card, .tabbtn { transition: none; }
}

/* ===================================================================
   ÜBEN-HUB (#view-practice)
   =================================================================== */
.view--practice { display: none; }
.view--practice.is-active { display: block; }

/* Heute-Karte: fällige Zahl + „Jetzt lernen". */
.prac-today { margin-bottom: 26px; }
.prac-today__card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.prac-today__card--due { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.prac-today__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.prac-today__label { font-size: 13px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .04em; }
.prac-today__num { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.02em; line-height: 1; }
.prac-today__sub { font-size: 14px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.prac-today__go { align-self: flex-start; margin-top: 4px; }
.prac-today__empty { font-size: 15px; color: var(--text-muted); line-height: 1.5; }

/* Kachel-Grid der Lern-Modi: 2 Spalten mobil → 3-4 Desktop. */
.prac-grid__head { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.prac-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px) { .prac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .prac-grid { grid-template-columns: repeat(4, 1fr); } }
.prac-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); padding: 16px 16px 18px; min-height: 124px;
  cursor: pointer; text-align: left; font: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.prac-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.prac-tile:active { transform: scale(.985); }
/* „Schwierige Karten" hebt sich als empfohlener Einstieg dezent ab (getönte
   Fläche + Akzentrand), bleibt aber im selben Kachel-Raster. */
.prac-tile--weak {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
}
.prac-tile--weak:hover { border-color: var(--accent); }
.prac-tile__ic { font-size: 26px; line-height: 1; }
.prac-tile__title { font-size: 16px; font-weight: 700; color: var(--text); }
.prac-tile__desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
@media (prefers-reduced-motion: reduce) { .prac-tile:hover { transform: none; } }

/* ===================================================================
   SPRECHEN (KI-Konversation)
   =================================================================== */
/* „Sprechen" ist die hervorgehobene Primär-Aktion → eigene Akzentfarbe (lila),
   NICHT das aktive-Blau (--primary). Sonst sieht der Link dauerhaft „aktiv" aus,
   obwohl gerade eine andere View offen ist. Bei echtem is-active dann doch --primary,
   damit die Auswahl konsistent wie bei allen anderen Links erkennbar ist. */
.navlink--accent { color: var(--accent); font-weight: 600; }
.navlink--accent:hover { color: var(--accent); }
.navlink--accent.is-active { color: var(--primary); }
.view--chat { display: none; }
.view--chat.is-active { display: block; }
.chat { display: flex; flex-direction: column; height: calc(100dvh - 150px); min-height: 420px; position: relative; }
.chat__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.chat__who { display: flex; align-items: center; gap: 10px; }
.chat__avatar { font-size: 30px; line-height: 1; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 14%, transparent); }
.chat__name { font-weight: 700; font-size: 16px; }
.chat__lang { font-size: 13px; color: var(--text-muted); }
.chat__opts { display: flex; gap: 8px; }
.chat__sel { font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r); padding: 8px 10px; min-height: 40px; cursor: pointer; }
/* Mobil: Header-Controls dürfen umbrechen statt zu überlaufen; der lange
   Session-Report-Button kürzt sich auf das 📋-Icon (aria-label bleibt) — sonst
   quetscht/überläuft die Zeile auf ~360px-Phones und der Auswerten-Knopf
   verschwindet aus dem Viewport. */
@media (max-width: 560px) {
  .chat__head { flex-wrap: wrap; row-gap: 8px; }
  .chat__opts { flex-wrap: wrap; min-width: 0; }
  .chat__report .chat__report-lab,
  .chat__score .chat__report-lab,
  .chat__archive .chat__report-lab { display: none; }
}

.chat__msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 2px; }
.cbubble-row { display: flex; flex-direction: column; max-width: 82%; }
.cbubble-row.mine { align-self: flex-end; align-items: flex-end; }
.cbubble-row.coach { align-self: flex-start; align-items: flex-start; }
.cbubble { padding: 11px 15px; border-radius: 18px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.cbubble-row.mine .cbubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 6px; }
.cbubble-row.coach .cbubble { background: var(--surface); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 6px; }
/* „↓ Neueste"-Knopf (Auto-Scroll-Lock): erscheint wenn der Nutzer beim Stream
   hochgescrollt ist. Schwebt über der Nachrichtenliste, knapp über der Eingabe. */
.msg-jump {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%) translateY(8px);
  z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 600;
  background: var(--primary); color: var(--on-primary);
  border: none; border-radius: 999px; padding: 8px 14px; min-height: 36px;
  box-shadow: var(--shadow-2); cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.msg-jump.is-show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.msg-jump:active { transform: translateX(-50%) scale(.95); }
@media (prefers-reduced-motion: reduce) { .msg-jump { transition: opacity var(--dur) var(--ease); } }

.cbubble__act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cbubble__btn { font-size: 15px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  width: 44px; height: 44px; min-width: 44px; min-height: 44px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease); }
.cbubble__btn:active { transform: scale(.92); }
.ctyping { display: inline-flex; gap: 4px; }
.ctyping i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); display: inline-block; animation: ctb 1s infinite; }
.ctyping i:nth-child(2) { animation-delay: .15s; } .ctyping i:nth-child(3) { animation-delay: .3s; }
@keyframes ctb { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Korrektur-Box. Default = ernster Ton (mind. ein echter Fehler).
   --minor = nur Kleinigkeiten → dezent (gedämpftes Amber, kein Alarm-Rot). */
.ccorr { align-self: flex-end; max-width: 82%; background: color-mix(in srgb, var(--hard) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hard) 35%, var(--border)); border-radius: 14px; padding: 10px 13px; font-size: 14px; }
.ccorr__head { font-weight: 700; color: var(--hard); font-size: 12px; margin-bottom: 6px; }
.ccorr__item { margin-bottom: 8px; }
.ccorr__item:last-child { margin-bottom: 0; }
.ccorr__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.ccorr__tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5; }
.ccorr__why { color: var(--text-muted); font-size: 13px; margin-top: 2px; }

/* Major: echter Grammatik-/Vokabelfehler. Klar erkennbar, aber gedämpftes Rot/Orange. */
.ccorr__item.major .ccorr__tag { color: var(--again); background: color-mix(in srgb, var(--again) 14%, transparent); }
.ccorr__item.major .ccorr__bad { color: var(--again); text-decoration: line-through; }
.ccorr__item.major .ccorr__good { color: var(--good); font-weight: 600; }

/* Minor: Satzzeichen/Akzent/Großschreibung. Dezent: Amber-Tag, dünner Unterstrich statt Durchstreichen. */
.ccorr__item.minor .ccorr__tag { color: var(--hard); background: color-mix(in srgb, var(--hard) 12%, transparent); }
.ccorr__item.minor .ccorr__bad { color: var(--text-muted); text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--hard) 55%, transparent); }
.ccorr__item.minor .ccorr__good { color: var(--text); font-weight: 600; }

/* Nur-Kleinigkeiten-Box: ruhiger Hintergrund, keine knallige Umrandung. */
.ccorr--minor { background: color-mix(in srgb, var(--hard) 5%, var(--surface));
  border-color: color-mix(in srgb, var(--hard) 20%, var(--border)); }
.ccorr--minor .ccorr__head { color: var(--text-muted); font-weight: 600; }

/* „📇 Als Karte" pro Korrektur-Item — eigene Fehler zu Lernkarten machen. */
.ccorr__act { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ccorr__card { font: inherit; font-size: 12px; font-weight: 600; color: var(--primary);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border));
  border-radius: 999px; padding: 3px 10px; cursor: pointer; line-height: 1.4; }
.ccorr__card:hover { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.ccorr__card:active { transform: scale(.95); }
.ccorr__card:disabled { cursor: default; opacity: .85; }
.ccorr__card.is-done { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--surface)); }
/* F — Ganzer korrigierter Satz unter den Einzel-Korrekturen. */
.ccorr__full { margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--hard) 30%, var(--border)); }
.ccorr__fulllab { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted); margin-bottom: 3px; }
.ccorr__fulltext { font-size: 15px; line-height: 1.4; color: var(--good); font-weight: 600; margin-bottom: 6px; }

/* Kleines Popup für DEUTSCHE Hilfe (Übersetzung/Erklärung) — Bottom-Sheet auf dem
   Handy, zentriert auf dem Desktop. Schließt per ✕, Hintergrund-Tap oder Esc. */
.infopop__back { position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: flex-end; justify-content: center; background: rgba(0,0,0,.38); }
.infopop { width: 100%; max-width: 560px; background: var(--surface); color: var(--text);
  border-radius: 18px 18px 0 0; box-shadow: var(--shadow-2); max-height: 80dvh;
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.infopop__head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px 8px; border-bottom: 1px solid var(--border); }
.infopop__title { font-weight: 700; font-size: 15px; }
.infopop__x { font: inherit; font-size: 16px; line-height: 1; background: transparent; border: none;
  color: var(--text-muted); cursor: pointer; padding: 6px 8px; border-radius: 8px; min-width: 36px; min-height: 36px; }
.infopop__x:hover { background: var(--bg); color: var(--text); }
.infopop__body { padding: 14px 16px 18px; font-size: 15px; line-height: 1.5;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.infopop__note { margin-top: 8px; font-size: 13px; color: var(--text-muted); font-style: italic; }
@media (min-width: 641px) {
  .infopop__back { align-items: center; padding: 20px; }
  .infopop { border-radius: 18px; max-height: 76vh; }
}

/* „❓ Nachfragen" pro Korrektur-Item — Chat-Rückfrage zu dieser Korrektur. */
.ccorr__ask { font: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 10px; cursor: pointer; line-height: 1.4;
  transition: background var(--dur) var(--ease); }
.ccorr__ask:hover { background: var(--surface-2); color: var(--text); }
.ccorr__ask:active { transform: scale(.95); }
.ccorr__ask.is-on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

/* „✨ Besser sagen"-Box (B) — eigene Box im Korrektur-Stil, eingeklappt unter der eigenen Bubble. */
.cbubble__reph { margin-top: 6px; align-self: flex-end; max-width: 100%; }
.cbubble__reph--ok { font-size: 13px; font-weight: 600; color: var(--primary);
  padding: 6px 12px; align-self: flex-end; }
.cbubble__reph .ccorr { margin-top: 0; }
/* Reph-Box: ruhiger Primär-Ton statt Fehler-Rot/Amber. */
.ccorr--reph { background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.ccorr--reph .ccorr__head { color: var(--primary); }
.ccorr__item.reph .ccorr__good { color: var(--text); font-weight: 600; }
.ccorr__item.reph .ccorr__act .cbubble__btn { width: 36px; height: 36px; min-width: 36px; min-height: 36px; font-size: 14px; }

/* ⚙ Schnell-Einstellungen — Popover im Chat-Header */
.chatqs { position: relative; display: inline-flex; }
.chatqs__btn { min-width: 40px; padding: 8px 11px; font-size: 16px; line-height: 1; }
.chatqs__btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); }
.chatqs__pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 268px; max-width: 84vw;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow-2); padding: 8px; }
.chatqs__pop[hidden] { display: none; }
.chatqs__head { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .03em; padding: 6px 8px 8px; }
.chatqs__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  min-height: 44px; padding: 8px; border: none; background: none; border-radius: 10px; cursor: pointer;
  text-align: left; transition: background var(--dur) var(--ease); }
.chatqs__row:hover { background: var(--surface-hover); }
.chatqs__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chatqs__lab { font-size: 14px; font-weight: 600; color: var(--text); }
.chatqs__help { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.chatqs__row .switch { pointer-events: none; }

.chat__bar { display: flex; align-items: flex-end; gap: 8px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); }
/* Auto-wachsendes <textarea>: 1 Zeile (min-height) bis max ~5 Zeilen (max-height),
   danach intern scrollbar. resize:none = kein Drag-Griff. line-height 1.4, kein
   horizontales Abschneiden (langer Text bricht um statt rauszuscrollen). */
.chat__input { flex: 1; min-width: 0; font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 22px; padding: 12px 18px; min-height: 48px; max-height: 140px;
  resize: none; overflow-y: hidden; display: block; }
.chat__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.chat__mic, .chat__send, .chat__miccancel { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; flex: none; border: none; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.chat__mic { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); touch-action: manipulation; }
.chat__mic.is-rec { background: var(--again); color: #fff; border-color: var(--again); animation: micpulse 1s infinite; }
.chat__mic.is-busy { background: var(--surface-2); color: var(--text-muted); cursor: default; opacity: .75; }
.chat__mic.is-busy .ic { animation: micspin .9s linear infinite; transform-origin: 50% 50%; }
.chat__mic:disabled, .chat__send:disabled { cursor: default; }
/* Abbrechen-Button (nur während Aufnahme sichtbar) */
.chat__miccancel { background: var(--surface); color: var(--again); border: 1px solid var(--again); }
.chat__miccancel .ic { width: 20px; height: 20px; }
.chat__miccancel[hidden] { display: none; }
.chat__mic .ic, .chat__send .ic { width: 22px; height: 22px; }
.chat__send { background: var(--primary); color: var(--on-primary); }
.chat__send:active, .chat__mic:active, .chat__miccancel:active { transform: scale(.92); }
@keyframes micspin { to { transform: rotate(360deg); } }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--again) 50%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }

/* ===================================================================
   CHAT — HANDY-VOLLBILD-FOKUS (≤640px)
   Der Chat füllt den sichtbaren Bereich zwischen Top-Nav und Bottom-Tabbar.
   Nachrichtenliste scrollt intern, Eingabe-Bar sitzt unten fixiert (sticky)
   und ist immer über der Tabbar erreichbar. Globaler Footer ausgeblendet,
   damit man nicht an Apps/Über/Hilfe/… vorbeiscrollen muss.
   =================================================================== */
@media (max-width: 640px) {
  /* Footer auf dem Handy in ALLEN Views ausblenden — gehört nicht unter den
     Content (Apps/Über/Hilfe/… bleibt über „Mehr"/Desktop erreichbar). Die
     body-padding-bottom-Reserve für die Tabbar (oben gesetzt) bleibt davon
     unberührt, daher bricht kein Layout. */
  .foot-links { display: none; }
  /* Seiten-Padding im Chat-View minimieren, damit der Chat den Schirm hat.
     Top-Padding auf 0, weil es sonst die .chat-Höhenberechnung verfälscht
     (Seite würde um diese 12px überlaufen und vertikal scrollen). */
  body.is-chat-view .page { padding: 0 14px 0; }
  /* Robuste Höhe: dvh minus ECHTE Nav- und Tabbar-Höhe (per JS gemessen, siehe
     updateLayoutVars() in app.js). offsetHeight enthält bereits das safe-area-
     Padding der Nav/Tabbar (Notch), darum KEIN zusätzliches env() — sonst doppelt.
     Fallbacks decken den Moment vor dem ersten Messen ab (390px-Werte). */
  body.is-chat-view .chat {
    height: calc(100dvh - var(--nav-h, 63px) - var(--tabbar-h, 57px));
    min-height: 0;
  }
  /* Nachrichtenliste füllt den Rest und scrollt intern. */
  body.is-chat-view .chat__msgs { flex: 1 1 auto; min-height: 0; }
  /* Eingabe-Bar unten festkleben, mit Hintergrund (Nachrichten scheinen nicht
     durch) + dünner Trennlinie oben. Über die Tabbar gehoben via safe-area. */
  body.is-chat-view .chat__bar {
    position: sticky; bottom: 0; z-index: 5;
    background: var(--bg); border-top: 1px solid var(--border);
    /* Die .chat endet exakt an der Tabbar-Oberkante (Höhe zieht --tabbar-h ab),
       die Tabbar trägt die safe-area-inset-bottom selbst → hier NUR kleines
       festes Padding, kein safe-area (sonst doppelt). */
    padding: 10px 0 8px;
    margin-top: auto;
  }
}

/* ---------- Wort-antippen → Übersetzung ---------- */
.tword-pop { position: fixed; z-index: 60; background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: var(--shadow-2);
  padding: 10px 14px; max-width: 260px; opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: auto; }
.tword-pop.is-show { opacity: 1; transform: none; }
.tword-w { font-weight: 700; font-size: 15px; color: var(--primary); }
.tword-tr { font-size: 16px; margin-top: 2px; }
.tword-note { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.tword-load { color: var(--text-muted); font-size: 14px; }
.tword-say { font-size: 15px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.cbubble-row .cbubble, #cardhost[data-revealed] { cursor: text; }

/* ---------- Responsive ---------- */
@media (max-width: 560px) {
  .brand__name { display: none; }
  .nav__inner { gap: 8px; padding-left: 14px; padding-right: 14px; }
  .navlink { padding: 8px 9px; font-size: 14px; }
  .page { padding: 20px 14px 40px; }
  .page__title { font-size: 24px; }
  /* Study-Toolbar: Tap-Ziel ≥44px (war 36px). Padding hebt die Höhe, min-width die Breite. */
  .quiz__tools .btn--outline,
  #btn-undo-bar { font-size: 13px; padding: 9px 12px; min-height: 44px; }
  .quiz__tools .btn--outline.btn--sq,
  #btn-undo-bar.btn--sq { padding: 9px 11px; min-width: 44px; }
  /* Rückgängig-Knopf auf dem Phone in Reihe 1 (neben ⋯/Zähler), NICHT im
     horizontal scrollenden Modus-Block → immer erreichbar (kein Off-Screen). */
  #btn-undo-bar { order: 1; }
  /* Schnell-Lernen ▶: volles 44px-Tap-Ziel auf dem Phone. */
  .deckrow__play { width: 44px; height: 44px; min-height: 44px; }
  .frow { grid-template-columns: 1fr; gap: 6px; }
  .eases { gap: 7px; }
  .btn--ease { font-size: 14px; padding: 8px 4px; }
}

/* ===================================================================
   STUDY — More-Menü
   =================================================================== */
.moremenu { position: relative; display: inline-flex; }
.moremenu__pop { position: absolute; right: 0; top: 100%; margin-top: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-2); min-width: 168px; padding: 6px; z-index: 20; display: none; }
.moremenu__pop.is-open { display: block; }
.moremenu__pop button { display: block; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--text);
  background: none; border: none; cursor: pointer; padding: 9px 11px; border-radius: 6px; min-height: 40px; }
.moremenu__pop button:hover { background: var(--surface-hover); }
.moremenu__pop button:disabled { opacity: .45; cursor: default; }
.moremenu__pop button:disabled:hover { background: none; }
.moremenu__pop { min-width: 200px; }
.moremenu__sep { height: 1px; background: var(--border); margin: 5px 4px; }
.moremenu__k { float: right; font-size: 11px; font-weight: 600; color: var(--text-muted); opacity: .8; }
.moremenu__fontrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 11px; }
.moremenu__lab { font-size: 14px; color: var(--text); }
/* Modus-/Richtungs-Sektion im ⋯-Menü: kleines Section-Label + die Segment-
   Pillen. Die generische .moremenu__pop button-Regel (display:block, volle
   Breite) würde die Pillen-Optik zerstören → hier zurücksetzen. */
.moremenu__lab--sec { display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  padding: 6px 8px 4px; }
.moremenu__seg { display: flex; width: 100%; margin: 0 0 4px; }
.moremenu__pop .moremenu__seg .seg__btn { display: inline-flex; align-items: center;
  justify-content: center; width: auto; flex: 1 1 0; min-height: 40px;
  padding: 6px 8px; text-align: center; border-radius: 999px; font-size: 13px; }
.moremenu__pop .moremenu__seg .seg__btn:hover { background: transparent; }
.moremenu__pop .moremenu__seg .seg__btn.is-on { background: var(--surface);
  box-shadow: var(--shadow-1); }
.moremenu__pop .moremenu__seg .seg__btn[hidden] { display: none; }
/* Desktop (>640px) zeigt die Modus-Leiste (.quiz__modes) → Modus/Richtung im
   ⋯-Menü ausblenden, damit die Auswahl nicht doppelt erscheint. Auf dem Handy
   (≤640px) ist die Leiste versteckt und das Menü die einzige Modus-Auswahl. */
@media (min-width: 641px) {
  #more-pop .moremenu__lab--sec,
  #more-modeseg,
  #more-dirseg,
  #more-dirseg + .moremenu__sep { display: none; }
}
.moremenu__fontbtns { display: inline-flex; gap: 6px; }
.moremenu__fontbtns button { width: 38px; min-height: 34px; padding: 0; text-align: center; font-weight: 700;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.moremenu__fontbtns button:hover { background: var(--surface-hover); border-color: var(--primary); }

/* ===================================================================
   MODAL (reusable)
   =================================================================== */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(10,14,20,.45); opacity: 0; transition: opacity var(--dur) var(--ease); }
.modal.is-show .modal__backdrop { opacity: 1; }
.modal__card { position: relative; width: 100%; max-width: 520px; max-height: calc(100dvh - 48px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.modal.is-show .modal__card { opacity: 1; transform: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border); }
.modal__title { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.modal__x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: none; border: none;
  cursor: pointer; color: var(--text-muted); font-size: 16px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.modal__x:hover { background: var(--surface-hover); color: var(--text); }
.modal__body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal__field { display: block; }
.modal__note { color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.modal__note--warn { color: var(--hard); font-weight: 600; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); }
.modal textarea.field__input { resize: vertical; min-height: 70px; line-height: 1.45; }
/* Inputs im Modal dürfen den grid-Track (place-items:center) nicht über die
   Viewportbreite aufblähen — min-width:0 + box-sizing erzwingen, sonst wächst
   die .modal__card auf die Default-Input-Breite (~480px) und der ✕/Footer
   landen ausserhalb des Viewports (Bug auf 390px). */
.modal__card .field__input,
.modal__card input,
.modal__card textarea,
.modal__card select { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ---- Import / Export ---- */
/* „Medien einschließen"-Checkbox-Zeile im Export-Dialog. */
.ie__check { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; }
.ie__check input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; flex: 0 0 auto; accent-color: var(--primary); }
.ie__check span { font-size: 15px; color: var(--text); }
/* Datei-wählen-Button + Dateiname im Import-Dialog. */
.modal__field .btn { align-self: flex-start; min-height: 44px; }
.ie__filename { display: block; margin-top: 6px; font-size: 14px; color: var(--text-muted); word-break: break-all; }
.ie__csvopts { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
/* Einstellungs-Sektion Import/Export: Buttons nebeneinander, mobil ≥44px. */
.set-ie-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.set-ie-actions .btn { flex: 1; min-width: 160px; min-height: 44px; }
.set-ie-note { margin-top: 12px; font-size: 13px; }

/* ===================================================================
   STATISTIK
   =================================================================== */
.view--stats { display: none; }
.view--stats.is-active { display: block; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 26px; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 16px; box-shadow: var(--shadow-1); }
.stat-tile__num { font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-tile__label { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.stat-tile--big { grid-column: span 2; }
.stat-tile--big .stat-tile__num { font-size: 40px; color: var(--gold); }
@media (max-width: 480px) { .stat-tile--big { grid-column: span 1; } .stat-tile--big .stat-tile__num { font-size: 32px; } }

.statcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-1); margin-bottom: 20px; }
.statcard__title { font-size: 17px; font-weight: 700; }
.statcard__sub { font-size: 13px; color: var(--text-muted); margin: 2px 0 16px; }

/* Wort-Töpfe (Reifegrad) — 3 Kacheln Gemeistert / Gefährdet / Am Lernen */
.pots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pot { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 14px 16px; border-top: 3px solid var(--border); }
.pot__head { display: flex; align-items: center; gap: 7px; }
.pot__icon { font-size: 18px; line-height: 1; }
.pot__label { font-size: 13px; font-weight: 700; color: var(--text); }
.pot__num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--text);
  font-variant-numeric: tabular-nums; margin: 8px 0 8px; line-height: 1; }
.pot__track { width: 100%; height: 8px; background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  border-radius: 999px; overflow: hidden; }
.pot__fill { height: 100%; border-radius: 999px; transition: width var(--dur) var(--ease); }
.pot__pct { font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums; margin-top: 6px; }
.pot__hint { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.35; }
.pot--mastered { border-top-color: var(--good); }
.pot--mastered .pot__fill { background: var(--good); }
.pot--risk { border-top-color: var(--hard); }
.pot--risk .pot__fill { background: var(--hard); }
.pot--learning { border-top-color: var(--new, var(--primary)); }
.pot--learning .pot__fill { background: var(--new, var(--primary)); }
@media (max-width: 480px) {
  .pots { grid-template-columns: 1fr; }
  .pot { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
  .pot__head { grid-column: 1; }
  .pot__num { grid-column: 2; grid-row: 1; margin: 0; text-align: right; }
  .pot__track { grid-column: 1 / -1; }
  .pot__pct { grid-column: 1; }
  .pot__hint { grid-column: 1 / -1; }
}

/* Schwachstellen-Radar */
.statcard--weak { border-color: var(--border-strong); }
.weak__subhead { font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 0 8px; }
.weak__subhead:first-of-type { margin-top: 4px; }
.weak__hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 8px; }
.weaklist { display: flex; flex-direction: column; gap: 8px; }
.weakrow { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); }
.weakrow__txt { min-width: 0; flex: 1; }
.weakrow__main { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.weakrow__word { font-weight: 600; color: var(--text); word-break: break-word; }
.weakrow__arrow { color: var(--text-muted); }
.weakrow__meaning { color: var(--text-muted); word-break: break-word; }
.weakrow__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.weakrow__acts { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.weakrow__btn { min-height: 44px; white-space: nowrap; }
@media (max-width: 480px) {
  .weakrow { flex-direction: column; align-items: stretch; }
  .weakrow__acts { justify-content: stretch; }
  .weakrow__btn { flex: 1; }
}

/* Forecast bars */
.forecast { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 180px; }
.fbar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.fbar__val { font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fbar__track { width: 100%; max-width: 38px; flex: 1; display: flex; align-items: flex-end;
  background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.fbar__fill { width: 100%; background: linear-gradient(var(--review), color-mix(in srgb, var(--review) 70%, var(--primary)));
  border-radius: 6px 6px 0 0; min-height: 0; transition: height var(--dur) var(--ease); }
.fbar__day { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Heatmap */
.heatmap-scroll { overflow-x: auto; padding-bottom: 4px; }
.heatmap { display: inline-flex; gap: 4px; }
.hmweek { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.hmcell { width: 13px; height: 13px; border-radius: 3px; background: var(--surface-2); }
.hmcell--l0 { background: var(--surface-2); }
.hmcell--l1 { background: color-mix(in srgb, var(--review) 28%, var(--surface-2)); }
.hmcell--l2 { background: color-mix(in srgb, var(--review) 52%, var(--surface-2)); }
.hmcell--l3 { background: color-mix(in srgb, var(--review) 75%, var(--surface-2)); }
.hmcell--l4 { background: var(--review); }
.heatmap-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.heatmap-legend .hmcell { width: 12px; height: 12px; }
.hmleg__t { font-size: 12px; color: var(--text-muted); margin: 0 4px; }

/* 14-Tage-Varianten (Forecast + Lernzeit): mehr Spalten, schmalere Balken */
.forecast--14 { grid-template-columns: repeat(14, 1fr); gap: 5px; height: 160px; }
.forecast--14 .fbar { gap: 4px; }
.forecast--14 .fbar__val { font-size: 11px; }
.forecast--14 .fbar__track { max-width: 22px; }
.forecast--14 .fbar__day { font-size: 10px; }
@media (max-width: 560px) {
  .forecast--14 .fbar__val { display: none; }
  .forecast--14 { gap: 3px; }
}

/* Pro-Deck-Tabelle */
.dtbl-scroll { overflow-x: auto; }
.dtbl { display: grid; grid-template-columns: minmax(140px, 2fr) repeat(5, minmax(48px, 1fr)); min-width: 420px; }
.dtbl__row { display: contents; }
.dtbl__c { padding: 9px 8px; font-size: 13px; font-variant-numeric: tabular-nums;
  text-align: right; border-bottom: 1px solid var(--border); color: var(--text); }
.dtbl__c--name { text-align: left; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtbl__row--head .dtbl__c { font-size: 12px; color: var(--text-muted); font-weight: 700;
  border-bottom: 2px solid var(--border-strong); text-transform: uppercase; letter-spacing: .02em; }
.dtbl__c--new   { color: var(--new); font-weight: 600; }
.dtbl__c--learn { color: var(--learn); font-weight: 600; }
.dtbl__c--due   { color: var(--review); font-weight: 600; }
.dtbl__row--head .dtbl__c--new,
.dtbl__row--head .dtbl__c--learn,
.dtbl__row--head .dtbl__c--due { color: var(--text-muted); }

/* Behaltensrate */
.retgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.retcell { background: var(--surface-2); border-radius: var(--r); padding: 16px 12px; text-align: center; }
.retcell__pct { display: block; font-size: 26px; font-weight: 700; color: var(--review); font-variant-numeric: tabular-nums; }
.retcell__lab { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 600; }

/* Antwort-Verteilung */
.ansbar { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.ansbar__seg { height: 100%; transition: width var(--dur) var(--ease); min-width: 2px; }
.ansbar__seg--again { background: var(--again); }
.ansbar__seg--hard  { background: var(--hard); }
.ansbar__seg--good  { background: var(--good); }
.ansbar__seg--easy  { background: var(--easy); }
.ansleg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.ansleg__it { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); }
.ansleg__dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.ansleg__dot--again { background: var(--again); }
.ansleg__dot--hard  { background: var(--hard); }
.ansleg__dot--good  { background: var(--good); }
.ansleg__dot--easy  { background: var(--easy); }
.ansleg__n { font-variant-numeric: tabular-nums; color: var(--text-muted); font-weight: 600; }

/* Gezieltes Lernen — Anzahl-/Tag-Felder im Dialog (Sicht-Toggle nutzt [hidden]) */
.cs-count[hidden], .cs-tag[hidden] { display: none; }

.addfields { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Einstellungen (Provider-Switching) ---------- */
.set-info {
  background: color-mix(in srgb, var(--primary) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 22px;
}
.set-info__lead { font-size: 15px; line-height: 1.5; }
.set-info__sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

.set-card { margin-bottom: 20px; }
.set-loading, .set-error { color: var(--text-muted); padding: 8px 2px; }
.set-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }

.set-field { margin-top: 14px; }
.set-field .field__label { margin-bottom: 6px; }
.set-select { width: 100%; min-height: 46px; }

.set-price-host { margin-top: 8px; }
.set-price {
  font-size: 13px; color: var(--text-muted); line-height: 1.45;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.set-price--best { color: var(--review); font-weight: 600; }
.set-badge {
  display: inline-block; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 4px 8px; border-radius: 999px; letter-spacing: .01em;
  background: color-mix(in srgb, var(--review) 16%, transparent);
  color: var(--review);
}

/* TTS-Zeile pro Sprache */
.set-ttsrow { padding: 16px 0; border-top: 1px solid var(--border); }
.set-ttsrow:first-of-type { border-top: none; padding-top: 8px; }
.set-ttsrow__head { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.set-flag { font-size: 20px; line-height: 1; }
.set-ttsrow__lang { font-size: 15px; font-weight: 700; }
.set-ttsrow__ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.set-field--inline { margin-top: 10px; }
.set-note { font-size: 12px; color: var(--hard); margin-top: 6px; line-height: 1.4; }

@media (max-width: 560px) {
  .set-ttsrow__ctrls { grid-template-columns: 1fr; gap: 10px; }
}

/* Karten-Kopf mit ⓘ-Icon rechts (TTS) */
.set-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Preis-Zeile: Preis links, ⓘ / ▶ Probe rechts */
.set-price-line { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.set-price-line .set-price-host { margin-top: 0; flex: 1 1 auto; min-width: 0; }

/* ⓘ — öffnet Preis-Vergleich */
.set-info-ic { flex: 0 0 auto; width: 30px; height: 30px; min-height: 30px;
  display: grid; place-items: center; border-radius: 999px;
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--text-muted); font-size: 17px; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.set-info-ic:hover { background: var(--surface-hover); color: var(--primary); }
.set-info-ic:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.set-cardhead .set-info-ic { margin: -4px -4px 0 0; }

/* ▶ Probe — Stimme testen (Touch ≥44px) */
.set-probe { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.set-probe:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); }
.set-probe:active { transform: scale(.97); }
.set-probe:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.set-probe__ico { font-size: 12px; line-height: 1; }
.set-probe__ico--stop { display: none; font-size: 11px; }
.set-probe__spin { display: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text-muted) 40%, transparent);
  border-top-color: var(--primary); animation: set-probe-spin .7s linear infinite; }
/* Laden: Spinner statt ▶, Klick blockiert */
.set-probe.is-loading { pointer-events: none; opacity: .85; }
.set-probe.is-loading .set-probe__ico--play { display: none; }
.set-probe.is-loading .set-probe__spin { display: inline-block; }
/* Spielt: ■ statt ▶, aktiv hervorgehoben */
.set-probe.is-playing { background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  border-color: var(--primary); color: var(--primary); }
.set-probe.is-playing .set-probe__ico--play { display: none; }
.set-probe.is-playing .set-probe__ico--stop { display: inline; }
@keyframes set-probe-spin { to { transform: rotate(360deg); } }

/* Preis-Vergleichstabelle im Modal */
.set-cmp__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.set-cmp__table th { text-align: left; font-size: 12px; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
  padding: 0 10px 8px; border-bottom: 1px solid var(--border); }
.set-cmp__table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.set-cmp__table tr:last-child td { border-bottom: none; }
.set-cmp__table tr.is-current { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.set-cmp__name { font-weight: 600; color: var(--text); word-break: break-word; }
.set-cmp__num { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.set-cmp__qual { color: var(--text-muted); }
.set-cmp__cur { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-left: 4px;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); }
.set-cmp__qualnote { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.4; }
.set-cmp__hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
@media (max-width: 480px) {
  .set-cmp__table { font-size: 13px; }
  .set-cmp__num { white-space: normal; }
  /* Schmale Screens: Preis + Qualität untereinander stapeln (Anbieter bleibt links). */
  .set-cmp__table thead .set-cmp__qual { display: none; }
  .set-cmp__table tbody td.set-cmp__qual {
    display: block; padding-top: 0; border-bottom: none;
    font-size: 12px;
  }
  .set-cmp__table tbody td.set-cmp__num { border-bottom: none; padding-bottom: 2px; }
  .set-cmp__table tbody td.set-cmp__qual::before {
    content: "Qualität: "; color: var(--text-muted); font-weight: 600;
  }
  .set-cmp__table tbody tr td:last-child { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
  .set-cmp__table tbody tr:last-child td:last-child { border-bottom: none; }
}

/* ===================================================================
   POLITUR — Skeletons, Sync, Selektion→Karte, Chat-Aktionen, Themen
   =================================================================== */

/* ---- Skeleton-Loader (Decks + Karte) ---- */
.sk { display: block; background: linear-gradient(90deg,
    var(--surface-2) 25%, color-mix(in srgb, var(--surface-2) 60%, var(--surface)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; border-radius: 6px; animation: skshimmer 1.2s ease-in-out infinite; }
@keyframes skshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.deckrow--skel { cursor: default; pointer-events: none; }
.deckrow--skel .sk--name { height: 16px; width: 42%; }
.deckrow--skel .sk--num { height: 14px; width: 54px; margin-left: auto; }
.ankicard--skel { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ankicard--skel .sk--line { height: 20px; }
.sk--w70 { width: 70%; } .sk--w90 { width: 90%; } .sk--w50 { width: 50%; }

/* ---- Sync-Knopf (Decks-Collstrip) ---- */
#btn-sync .sync-ic { display: inline-block; line-height: 1; }
#btn-sync.is-syncing { opacity: .8; }
#btn-sync.is-syncing .sync-ic { animation: syncspin .8s linear infinite; }
@keyframes syncspin { to { transform: rotate(360deg); } }

/* ---- „Übersetzung aus deinen Karten"-Label ---- */
.tword-src { display: inline-block; font-size: 11px; font-weight: 700; margin-top: 4px;
  padding: 2px 8px; border-radius: 999px; color: var(--review);
  background: color-mix(in srgb, var(--review) 14%, transparent); }

/* ---- Schwebender „📇 Als Karte"-Button (Text-Selektion) ---- */
.sel-card-btn { position: fixed; z-index: 62; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--on-primary); background: var(--primary); border: none; border-radius: 999px;
  padding: 7px 13px; cursor: pointer; box-shadow: var(--shadow-2); white-space: nowrap;
  opacity: 0; transform: translateY(4px) scale(.96);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.sel-card-btn.is-show { opacity: 1; transform: none; }
.sel-card-btn:active { transform: scale(.95); }
.sel-card-btn:disabled { opacity: .6; }

/* ---- Chat: Kopieren/Übersetzen-Button aktiv + Übersetzungs-Einblendung ---- */
.cbubble__btn.is-on { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.cbubble__tr { margin-top: 6px; padding: 8px 12px; font-size: 14px; line-height: 1.45;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; border-top-left-radius: 4px; max-width: 100%; }

/* ---- Eigene (user-)Bubble: Aktionsleiste + on-demand Grammatik-Check ---- */
/* Aktionsleiste der eigenen Nachricht rechtsbündig (Bubble ist rechtsbündig). */
.cbubble__act--mine { justify-content: flex-end; }
/* Übersetzungs-/Check-Box unter eigener Bubble rechtsbündig (gespiegelt zur Coach-Box). */
.cbubble-row.mine .cbubble__tr { align-self: flex-end; border-top-left-radius: 12px; border-top-right-radius: 4px; }
.cbubble__check { margin-top: 6px; align-self: flex-end; max-width: 100%; }
.cbubble__check--ok { font-size: 13px; font-weight: 600; color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border));
  border-radius: 12px; border-top-right-radius: 4px; padding: 7px 12px; }
.cbubble__check .ccorr { margin-top: 0; }

/* ---- Karaoke-Highlight beim Vorlesen (aktuelles Wort hervorgehoben) ---- */
.cbubble .kw { border-radius: 4px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.cbubble .kw--on { background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
/* In eigener (primary-)Bubble: hellere Markierung für Kontrast auf farbigem Grund. */
.cbubble-row.mine .cbubble .kw--on { background: color-mix(in srgb, var(--on-primary) 30%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--on-primary) 30%, transparent); }

/* ---- Chat: Themen-Chips (Frei-Modus, leeres Gespräch) ---- */
.chat__topics { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 8px 0 2px; }
.chat__topics-lab { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-right: 2px; }
.topicchip { font: inherit; font-size: 14px; font-weight: 500; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 7px 14px; min-height: 36px; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.topicchip:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); }
.topicchip:active { transform: scale(.97); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- KI-Kosten (Statistik) ---------- */
.cost-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.cost-tile { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: 12px; text-align: center; }
.cost-tile__n { display: block; font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; }
.cost-tile__l { font-size: 12px; color: var(--text-muted); }
.cost-areas { display: flex; flex-direction: column; gap: 6px; }
.cost-area { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); font-size: 14px; }
.cost-area b { font-variant-numeric: tabular-nums; }
.cost-note { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* Übersetzungs-Popup Aktionen + Karte-Button */
.tword-actions { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.tword-card { font-size: 13px; font-weight: 600; background: var(--primary); color: var(--on-primary);
  border: none; border-radius: 999px; padding: 5px 14px; min-height: 44px; cursor: pointer;
  display: inline-flex; align-items: center; }
.tword-card:disabled { opacity: .6; }
.tword-type { font-size: 13px; line-height: 1; background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tword-type:hover { color: var(--text); }
.tword-typebox { margin-top: 8px; }

/* ===================================================================
   WELLE 3+4 — Chat-Modi, Szenarien, Vorschläge, Vokabel-Chip
   =================================================================== */
.chat__report, .chat__score, .chat__archive { display: inline-flex; align-items: center; gap: 4px; }
.chat__report:disabled, .chat__score:disabled { opacity: .45; cursor: not-allowed; }
.chat__report:not(:disabled):hover, .chat__score:not(:disabled):hover,
.chat__archive:hover { background: var(--surface-hover); border-color: var(--primary); color: var(--primary); }

.chat__modes { display: inline-flex; gap: 2px; padding: 3px; margin: 4px 0 8px; align-self: flex-start;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.chatmode { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 7px 16px; min-height: 36px; border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; }
.chatmode:hover { color: var(--text); }
.chatmode.is-active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }

/* 📖 Geschichte — Aktion (kein Modus): abgesetzt vom Tab-Trio, dezent betont. */
.chatmode--story { color: var(--primary); margin-left: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); }
.chatmode--story:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }
.chatmode--story:disabled, .chatmode--story.is-loading { opacity: .6; cursor: default; }
.chatmode--story[aria-expanded="true"] { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }

/* 📖 Geschichte — Optionen-Popover (Anzahl / Quelle / Thema), vor dem Erzeugen. */
.storyopt { position: relative; display: inline-flex; }
.storyopt__pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: 300px; max-width: 88vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  box-shadow: var(--shadow-2); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.storyopt__pop[hidden] { display: none; }
.storyopt__head { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.storyopt__field { display: flex; flex-direction: column; gap: 7px; }
.storyopt__lab { font-size: 14px; font-weight: 600; color: var(--text); }
.storyopt__lab b { color: var(--primary); }
.storyopt__help { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.storyopt__range { width: 100%; height: 28px; accent-color: var(--primary); cursor: pointer; }
.storyopt .seg { flex-wrap: wrap; }
.storyopt .seg__btn { min-height: 36px; }
.storyopt__topic { font: inherit; font-size: 14px; width: 100%; min-height: 40px; padding: 8px 12px;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  transition: border-color var(--dur) var(--ease); }
.storyopt__topic:focus { outline: none; border-color: var(--primary); }
.storyopt__go { font: inherit; font-size: 15px; font-weight: 700; width: 100%; min-height: 44px;
  color: #fff; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--r);
  cursor: pointer; transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.storyopt__go:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }
.storyopt__go:active { opacity: .85; }
.storyopt__go:disabled { opacity: .6; cursor: default; }

/* Story-Bubble: Chip-Liste der verwendeten Vokabeln unter der Geschichte. */
.story-vocab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.story-vocab__lab { font-size: 12px; font-weight: 700; color: var(--text-muted); }

.chat__vocab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px;
  padding: 8px 12px; background: color-mix(in srgb, var(--gold) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 36%, var(--border)); border-radius: var(--r); }
.chat__vocab-lab { font-size: 12px; font-weight: 700; color: var(--hard); }
.vocabchip { font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px 11px; }

.chat__suggest { display: flex; flex-wrap: wrap; gap: 7px; padding: 8px 0 2px; }
.suggchip { font: inherit; font-size: 14px; font-weight: 500; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 999px;
  padding: 8px 14px; min-height: 38px; cursor: pointer; text-align: left;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.suggchip:hover { background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.suggchip:active { transform: scale(.97); }

/* Szenario-Picker */
.chat__scenarios { margin-bottom: 8px; }
.scen-head { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 10px; }
.scen-load, .scen-empty { color: var(--text-muted); font-size: 14px; padding: 6px 2px; }
.scen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.scen-card { display: flex; align-items: flex-start; gap: 11px; text-align: left; font: inherit;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 13px 14px; cursor: pointer; box-shadow: var(--shadow-1); position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.scen-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.scen-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.scen-card__icon { font-size: 24px; line-height: 1.1; flex: none; }
.scen-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.scen-card__title { font-size: 15px; font-weight: 700; color: var(--text); }
.scen-card__desc { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.scen-card__level { font-size: 11px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 999px;
  padding: 3px 8px; flex: none; align-self: flex-start; }

/* Feedback-Report (Modal-Inhalt) */
.fb-loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0; color: var(--text-muted); }
.fb-loading .ctyping i { width: 9px; height: 9px; }
.fb { display: flex; flex-direction: column; gap: 18px; }
.fb-scores { display: flex; flex-direction: column; gap: 9px; }
.fb-score { display: grid; grid-template-columns: 110px 1fr 46px; align-items: center; gap: 10px; }
.fb-score__lab { font-size: 14px; font-weight: 600; color: var(--text); }
.fb-score__track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fb-score__fill { height: 100%; border-radius: 999px; transition: width var(--dur) var(--ease); }
.fb-good { background: var(--good); } .fb-mid { background: var(--hard); } .fb-low { background: var(--again); }
.fb-score__num { font-size: 13px; font-weight: 700; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.fb-sec { display: flex; flex-direction: column; gap: 8px; }
.fb-sec__title { font-size: 14px; font-weight: 700; color: var(--text); }
.fb-summary { font-size: 14px; line-height: 1.5; color: var(--text); }
.fb-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.fb-list li { font-size: 14px; line-height: 1.45; color: var(--text); }
.fb-err { padding: 9px 11px; background: color-mix(in srgb, var(--hard) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hard) 30%, var(--border)); border-radius: var(--r); }
.fb-err__line { font-size: 14px; }
.fb-err__bad { color: var(--again); text-decoration: line-through; }
.fb-err__good { color: var(--good); font-weight: 600; }
.fb-err__why { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.fb-better { padding: 8px 11px; background: var(--surface-2); border-radius: var(--r); }
.fb-better__you { font-size: 14px; color: var(--text-muted); }
.fb-better__nat { font-size: 14px; color: var(--good); font-weight: 600; margin-top: 2px; }
.fb-vocab { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.fb-vocab:last-child { border-bottom: none; }
.fb-vocab__w { font-size: 14px; font-weight: 700; color: var(--text); }
.fb-vocab__tr { font-size: 14px; color: var(--text-muted); flex: 1; }
.fb-vocab__add { font-size: 12px; font-weight: 600; color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); border-radius: 999px; padding: 5px 11px; cursor: pointer; flex: none; }
.fb-vocab__add:disabled { opacity: .6; cursor: default; }
.fb-vocab__add.is-done { color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }

/* ---- Konversation-Fehler-Report: Korrekturen (Diff + Checkbox + übernehmen) ---- */
.cr-corr { padding: 9px 11px; background: color-mix(in srgb, var(--hard) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hard) 30%, var(--border)); border-radius: var(--r); }
.cr-corr + .cr-corr { margin-top: 8px; }
.cr-corr__head { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-height: 44px; }
.cr-corr__cb { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); cursor: pointer; }
.cr-corr__diff { font-size: 14px; line-height: 1.5; word-break: break-word; }
.cr-corr__bad { color: var(--again); text-decoration: line-through; }
.cr-corr__arrow { color: var(--text-muted); }
/* <ins> ist standardmäßig unterstrichen — wir wollen nur grün/fett */
.cr-corr__good { color: var(--good); font-weight: 600; text-decoration: none; }
.cr-corr__why { font-size: 13px; color: var(--text-muted); margin-top: 4px; margin-left: 30px; line-height: 1.4; }
.cr-cta { width: 100%; min-height: 48px; }
.cr-cta.is-done { background: var(--good); border-color: var(--good); }

/* ===================================================================
   KARTEN-TYP-PICKER (Add-View + Popup + Settings)
   =================================================================== */
.cardtype { width: 100%; }
.cardtype__group { display: flex; flex-direction: column; gap: 8px; }
.cardtype__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  font: inherit; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 11px 13px; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.cardtype__opt:hover { border-color: var(--primary); }
.cardtype__opt.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  box-shadow: 0 0 0 1px var(--primary) inset; }
.cardtype__name { font-size: 14px; font-weight: 700; color: var(--text); }
.cardtype__opt.is-active .cardtype__name { color: var(--primary); }
.cardtype__hint { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
/* Im engen Popup kompakter */
.tword-typebox .cardtype__opt { padding: 8px 10px; }
.tword-typebox .cardtype__hint { font-size: 11px; }

/* ===================================================================
   ADD-VIEW: Modus-Umschalter (Mit AI | Manuell) + AI-Generator
   =================================================================== */
.addmode { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 18px;
  background: var(--surface-2); border-radius: 999px; }
.addmode__btn { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: none; border-radius: 999px; padding: 9px 16px; min-height: 40px;
  cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.addmode__btn:hover { color: var(--text); }
.addmode__btn.is-active { background: var(--surface); color: var(--primary);
  box-shadow: var(--shadow-1); }

.aigen { display: flex; flex-direction: column; gap: 16px; }
.aigen__descwrap { position: relative; }
.aigen__desc { resize: vertical; min-height: 92px; line-height: 1.5; font: inherit; padding-right: 52px; }
/* Mikrofon-Button im Beschreibungsfeld (Diktat). Touch-Ziel ≥44px. */
.aigen__mic { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px;
  display: grid; place-items: center; font-size: 19px; line-height: 1; border-radius: 50%;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  cursor: pointer; touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.aigen__mic:hover { border-color: var(--primary); }
.aigen__mic:active { transform: scale(.92); }
.aigen__mic:disabled { opacity: .55; cursor: default; }
.aigen__mic.is-rec { background: var(--again); color: #fff; border-color: var(--again); animation: micpulse 1s infinite; }
.aigen__mic.is-busy { opacity: .7; cursor: default; }
/* „Aus Datei/PDF" + „Aus URL/News": Text ins Beschreibungsfeld laden. */
.aigen__desctools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.aigen__filebtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  padding: 0 14px; font-size: 14px; font-weight: 600; line-height: 1; border-radius: var(--r);
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  cursor: pointer; touch-action: manipulation;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.aigen__filebtn:hover { border-color: var(--primary); }
.aigen__filebtn:active { transform: scale(.97); }
.aigen__filebtn:disabled { opacity: .6; cursor: default; transform: none; }
/* News-Import-Dialog (Feed-Auswahl + Schlagzeilen + URL-Feld). */
.news-import { display: flex; flex-direction: column; gap: 12px; min-width: min(440px, 80vw); }
.news-import__urlrow { display: flex; gap: 8px; }
.news-import__urlrow .field__input { flex: 1; min-width: 0; }
.news-import__sep { position: relative; text-align: center; font-size: 12px; color: var(--text-muted);
  margin: 2px 0; }
.news-import__sep::before, .news-import__sep::after { content: ""; position: absolute; top: 50%;
  width: 22%; height: 1px; background: var(--border); }
.news-import__sep::before { left: 0; } .news-import__sep::after { right: 0; }
.news-import__feedsel { width: 100%; }
.news-import__list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 2px;
  color: var(--text-muted); font-size: 14px; }
.news-import__item { display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; min-height: 44px; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  touch-action: manipulation;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.news-import__item:hover { border-color: var(--primary); }
.news-import__item:active { transform: scale(.99); }
.news-import__item-title { font-weight: 600; line-height: 1.3; }
.news-import__item-sum { font-size: 12px; color: var(--text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aigen__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aigen__opt { margin: 0; }
.aigen__opt--count { grid-column: span 2; max-width: 140px; }
@media (min-width: 560px) {
  .aigen__opts { grid-template-columns: 2fr 1fr 0.8fr; }
  .aigen__opt--count { grid-column: auto; max-width: none; }
}
#aigen-generate, #aigen-commit { min-height: 44px; min-width: 140px; }

/* Skeleton beim Generieren */
.aigen__skeleton { display: flex; flex-direction: column; gap: 10px; }
.aigen__skrow { height: 56px; border-radius: var(--r); border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: aigen-shimmer 1.3s ease infinite; }
@keyframes aigen-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Vorschau-Liste (editierbar) */
.aigen__previewhead { font-size: 16px; font-weight: 700; color: var(--text); margin: 4px 0 12px; }
.aigen__list { display: flex; flex-direction: column; gap: 10px; }
.aigen__card { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px;
  padding: 12px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); }
.aigen__fields { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aigen__fline { display: flex; align-items: center; gap: 8px; }
.aigen__flab { flex: none; width: 64px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted); }
.aigen__finput { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.aigen__finput:focus { border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); }
.aigen__finput--ex { font-style: italic; color: var(--text-muted); }
/* Cloze-Vorschau: erzeugte Lücke sichtbar bzw. ehrlicher Fallback-Hinweis. */
.aigen__fnote { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; }
.aigen__fnote--cloze { background: color-mix(in srgb, var(--primary) 8%, var(--bg)); }
.aigen__clozeval { flex: 1; min-width: 0; color: var(--text); }
.aigen__fnote--warn { color: var(--text-muted);
  background: color-mix(in srgb, var(--hard, #d9822b) 12%, var(--bg)); }
.aigen__del { flex: none; align-self: start; width: 36px; height: 36px; min-height: 36px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1;
  color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.aigen__del:hover { color: var(--again); border-color: var(--again);
  background: color-mix(in srgb, var(--again) 10%, transparent); }
.aigen__commitbar { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.aigen__commitbar .btn { min-height: 44px; }
.aigen__empty { color: var(--text-muted); font-size: 14px; padding: 16px 0; }

/* ===================================================================
   FSRS-Optimierung (Statistik)
   =================================================================== */
.fsrs-load { color: var(--text-muted); font-size: 14px; }
.fsrs-stat { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.fsrs-stat__l { display: flex; align-items: baseline; gap: 8px; }
.fsrs-stat__num { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.fsrs-stat__lab { font-size: 13px; color: var(--text-muted); }
.fsrs-bar { display: flex; flex-direction: column; gap: 6px; }
.fsrs-bar__track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.fsrs-bar__fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--review)); border-radius: 999px;
  transition: width var(--dur) var(--ease); }
.fsrs-bar__note { font-size: 12px; color: var(--text-muted); }
.fsrs-btn { align-self: flex-start; }
.fsrs-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===================================================================
   SETTINGS — Coach-Toggles (Switch)
   =================================================================== */
.set-toggle { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--border); }
.set-card .set-toggle:first-of-type { border-top: none; }
.set-toggle__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-toggle__lab { font-size: 15px; font-weight: 600; color: var(--text); }
.set-toggle__help { font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.switch { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border-strong); cursor: pointer; position: relative; padding: 0;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.switch__knob { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease); }
.switch.is-on { background: var(--primary); border-color: var(--primary); }
.switch.is-on .switch__knob { transform: translateX(18px); }
.set-num { max-width: 140px; }
.set-divider { height: 1px; background: var(--border); margin: 8px 0; }
.set-card .set-field { margin-top: 16px; }

/* ===================================================================
   IN-APP KI-SEITENLEISTE (Assistent) — Präfix assist- / as-
   Schwebender FAB + Panel rechts (Desktop) / Drawer (Mobil).
   Nutzt die Design-Tokens oben → Dark-Theme automatisch.
   =================================================================== */

/* --- Toggle-FAB (schwebend, unten rechts, alle Views) --- */
.assist-fab {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 48;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: 600 15px/1 var(--font);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.assist-fab:hover { transform: translateY(-1px); background: var(--surface-hover); }
.assist-fab:active { transform: translateY(0); }
.assist-fab.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.assist-fab__label { white-space: nowrap; }
/* FAB ausblenden während das Panel offen ist (Schließen via X/Backdrop/Esc). */
body.assist-open .assist-fab { opacity: 0; pointer-events: none; transform: scale(.9); }

/* --- Backdrop (nur sichtbar im Mobil-Drawer) --- */
.assist-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(16,24,40,.38);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.assist-backdrop.is-show { opacity: 1; pointer-events: auto; }

/* --- Panel (Desktop: Spalte rechts, von rechts reinslidend) --- */
.assist-panel {
  position: fixed; top: 0; right: 0; z-index: 56;
  width: 380px; max-width: 92vw; height: 100%;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(16,24,40,.10);
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  will-change: transform;
}
.assist-panel.is-open { transform: translateX(0); }

/* --- Kopf --- */
.assist-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border);
  flex: none;
}
.assist-head__title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.assist-head__star { color: var(--gold); }
.assist-head__actions { display: flex; gap: 4px; }
.assist-iconbtn {
  width: 36px; height: 36px; min-width: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--text-muted); cursor: pointer;
  font-size: 15px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.assist-iconbtn:hover { background: var(--surface-2); color: var(--text); }

/* --- Nachrichtenliste --- */
.assist-msgs {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 4px;
}
.assist-row { display: flex; flex-direction: column; max-width: 88%; }
.assist-row.mine { align-self: flex-end; align-items: flex-end; }
.assist-row.bot { align-self: flex-start; }
.assist-bubble {
  padding: 10px 14px; border-radius: 16px;
  font-size: 15px; line-height: 1.5;
}
.assist-row.mine .assist-bubble { background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 6px; }
.assist-row.bot .assist-bubble { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 6px; }
.assist-bubble__text { white-space: pre-wrap; word-break: break-word; }

/* --- Tool-Status-Chips (in der Assistent-Bubble) --- */
.assist-tools { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.assist-tool {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--text-muted); max-width: 100%;
}
.assist-tool__txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assist-tool.is-done { color: var(--review); border-color: color-mix(in srgb, var(--review) 35%, var(--border)); }
.assist-tool__check { font-weight: 700; }
.assist-tool__spin {
  width: 12px; height: 12px; flex: none; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--primary);
  animation: assist-spin .7s linear infinite;
}
@keyframes assist-spin { to { transform: rotate(360deg); } }

/* --- Typing-Indikator (drei Punkte) --- */
.assist-typing { display: inline-flex; gap: 4px; padding: 2px 0; }
.assist-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); opacity: .5; animation: assist-bounce 1.2s infinite; }
.assist-typing i:nth-child(2) { animation-delay: .18s; }
.assist-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes assist-bounce { 0%,60%,100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: .9; } }

/* --- Leerer Zustand (Vorschlags-Chips) --- */
.assist-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 24px 8px; }
.assist-empty__icon { font-size: 32px; }
.assist-empty__title { font-size: 16px; font-weight: 700; color: var(--text); }
.assist-empty__sub { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; max-width: 280px; }
.assist-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 12px; }
.assist-chip {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font: 500 14px/1.3 var(--font); text-align: left; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.assist-chip:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* --- Eingabeleiste --- */
.assist-bar {
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; border-top: 1px solid var(--border);
  background: var(--surface);
}
.assist-input {
  flex: 1; resize: none; max-height: 140px;
  min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  background: var(--bg); color: var(--text);
  font: 400 15px/1.4 var(--font);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.assist-input:focus { border-color: var(--primary); }
.assist-input:disabled { opacity: .6; }
.assist-send {
  flex: none; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.assist-send:hover { background: var(--primary-press); }
.assist-send:active { transform: scale(.94); }
.assist-send:disabled { opacity: .5; cursor: not-allowed; }
.assist-send .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Mobil: Vollhöhe-Drawer von rechts, breiter --- */
@media (max-width: 640px) {
  .assist-panel { width: 100%; max-width: 100%; border-left: none; }
  /* FAB über die Bottom-Tab-Bar heben (56px + Safe-Area), sonst kollidiert es. */
  .assist-fab { right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + 56px + env(safe-area-inset-bottom, 0px)); }
  .assist-fab__label { display: none; }   /* nur das ✨-Icon auf kleinen Screens */
  .assist-fab { padding: 0; width: 52px; justify-content: center; font-size: 20px; }
  .assist-row { max-width: 92%; }
}

/* --- Reduced Motion: keine Slides/Spins --- */
@media (prefers-reduced-motion: reduce) {
  .assist-panel, .assist-backdrop, .assist-fab, .assist-send, .assist-chip,
  .assist-iconbtn, .assist-input { transition: none; }
  .assist-tool__spin { animation: none; border-top-color: var(--border-strong); }
  .assist-typing i { animation: none; opacity: .6; }
}

/* Assistent-Kopf: Modell-Label (Untertitel) */
.assist-head__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.assist-head__sub {
  font-size: 11px; font-weight: 500; letter-spacing: .2px;
  color: rgba(255,255,255,.55); padding-left: 22px;
}
.assist-head__sub:empty { display: none; }

/* Coach-Audio-Knopf während Wiedergabe (Play/Stop-Toggle) */
.cbubble__btn.is-playing { background: var(--accent, #5b5bd6); color: #fff; }

/* ===================================================================
   Tipp-Modus + Modus-/Richtungs-Wahl (Lern-View)
   =================================================================== */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.seg__btn { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); padding: 6px 14px; border-radius: 999px; min-height: 32px; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-1); }
.seg--dir .seg__btn.is-on { color: var(--text); }

/* Grade-Flash: kurzes Bewertungs-Label beim Tasten-Rating (Anki-Stil). Fixed
   mittig-unten, nicht klickbar, über dem Inhalt. Farbe je Bewertung. */
.gradeflash {
  position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 8px);
  z-index: 60; pointer-events: none;
  padding: 9px 22px; border-radius: 999px;
  font-weight: 700; font-size: 16px; letter-spacing: .2px;
  color: #fff; background: var(--good);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.28));
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.gradeflash[data-grade="again"] { background: var(--again); }
.gradeflash[data-grade="hard"]  { background: var(--hard); }
.gradeflash[data-grade="good"]  { background: var(--good); }
.gradeflash[data-grade="easy"]  { background: var(--easy); }
.gradeflash.is-in  { opacity: 1; transform: translate(-50%, 0); }
.gradeflash.is-out { opacity: 0; transform: translate(-50%, -8px); }
@media (prefers-reduced-motion: reduce) {
  /* Nur statisches Einblenden — keine Slide-Bewegung. */
  .gradeflash { transition: opacity .12s linear; transform: translate(-50%, 0); }
  .gradeflash.is-in  { transform: translate(-50%, 0); }
  .gradeflash.is-out { transform: translate(-50%, 0); }
}

/* In umgekehrter Richtung gezeigte Klartext-Frage (kein Karten-HTML). */
.card-prompt { font-size: 1.35em; font-weight: 600; text-align: center; }

/* Lücke-Modus (Cloze, Clozemaster-Stil): Bedeutungs-Hinweis (L1) klein oben,
   darunter der Beispielsatz mit der Lücke groß und mittig. */
.cloze-card { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; padding: 8px 0; }
.cloze-hint { font-size: 0.95em; color: var(--text-muted); font-weight: 500; }
.cloze-sentence { font-size: 1.4em; font-weight: 600; line-height: 1.5; }
/* Die Lücke selbst: hervorgehobener Unterstrich-Slot, klar als „hier fehlt was". */
.cloze-gap {
  display: inline-block; min-width: 4ch; padding: 0 .35em;
  border-bottom: 2px solid var(--accent);
  color: var(--accent); font-weight: 700; letter-spacing: .05em;
  vertical-align: baseline;
}
.cloze-card--fallback .cloze-fallnote { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* Diktat: stummes „Anhören"-Symbol auf der Karte (kein Text sichtbar) */
.dict-listen { font-size: 4rem; line-height: 1; text-align: center; padding: 28px 0 12px;
  opacity: .85; user-select: none; }
@media (prefers-reduced-motion: no-preference) {
  .dict-listen { animation: dictPulse 1.8s var(--ease) infinite; }
}
@keyframes dictPulse { 0%,100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

/* Diktat: Audio-Leiste (erneut / langsam abspielen) */
.dictplay { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dictplay__btn { min-height: 44px; padding: 10px 16px; font-weight: 600; }

/* Antwort-Audio-Knopf: Lade-/Spielt-Zustand. Während TTS generiert/lädt rotiert
   das Icon (ersetzt durch Spinner), Knopf disabled. „is-playing" markiert aktive
   Wiedergabe (subtiler Puls). */
.dictplay__btn:disabled { opacity: .65; cursor: progress; }
#answer-play.is-loading .answerplay__ico { display: none; }
#answer-play.is-loading::before {
  content: ""; width: 16px; height: 16px; margin-right: 2px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  display: inline-block; vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  #answer-play.is-loading::before { animation: answerSpin .7s linear infinite; }
  #answer-play.is-playing .answerplay__ico { animation: dictPulse 1.2s var(--ease) infinite; }
}
@keyframes answerSpin { to { transform: rotate(360deg); } }

/* Tipp-Eingabe */
.typebox { display: flex; flex-direction: column; gap: 10px; }
.typebox__row { display: flex; gap: 8px; align-items: stretch; }
.typebox__input { flex: 1 1 auto; min-width: 0; min-height: 48px; font: inherit; font-size: 17px;
  padding: 10px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); color: var(--text); }
.typebox__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }
.typebox__input:disabled { opacity: .7; }
.typebox__check { flex: 0 0 auto; min-height: 48px; min-width: 84px; padding: 10px 18px; }
.typebox__check:disabled { opacity: .5; cursor: default; }

/* Tipp-Ergebnis (Diff) */
.typebox__result { border-radius: var(--r); padding: 12px 14px; border: 1px solid var(--border);
  background: var(--surface); animation: trIn var(--dur) var(--ease); }
@keyframes trIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.typebox__result.is-correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.typebox__result.is-close   { border-color: var(--hard); background: color-mix(in srgb, var(--hard) 9%, var(--surface)); }
.typebox__result.is-wrong   { border-color: var(--again); background: color-mix(in srgb, var(--again) 8%, var(--surface)); }
.tr__head { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.is-correct .tr__head { color: var(--good); }
.is-close .tr__head { color: var(--hard); }
.is-wrong .tr__head { color: var(--again); }
.tr__line { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; font-size: 16px; flex-wrap: wrap; }
.tr__lab { flex: 0 0 56px; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.tr__txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Diff-Wörter (Wort-Level: mit Abstand) */
.dw { display: inline; padding: 1px 2px; border-radius: 4px; }
.dw--ok   { color: var(--good); font-weight: 600; }
.dw--bad  { color: var(--again); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dw--miss { color: var(--hard); font-weight: 600; background: color-mix(in srgb, var(--hard) 16%, transparent); }
/* Zeichen-Level: Buchstaben eng aneinander, liest sich als Wort. Kein H-Padding,
   kein Letter-Spacing → keine Lücken zwischen Buchstaben. */
.dw--char { padding: 1px 0; border-radius: 2px; letter-spacing: normal; }
/* Fehlendes Zeichen klar erkennbar: rot + dezenter Hintergrund + Unterstrich. */
.dw--char.dw--miss {
  background: color-mix(in srgb, var(--hard) 20%, transparent);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 2px; padding: 1px 1px;
}
/* Überschüssiges getipptes Zeichen: durchgestrichen rot. */
.dw--char.dw--bad { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* FSRS-Settings: Retention-Regler */
.set-fsrs-ret { margin-top: 8px; }
.set-fsrs-slider { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.set-range { flex: 1 1 auto; min-width: 0; accent-color: var(--primary); height: 28px; cursor: pointer; }
.set-fsrs-val { flex: 0 0 auto; min-width: 52px; text-align: right; font-weight: 700; font-size: 16px; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ===================== Karten-Layout-Builder ===========================
   Galerie + KI-Vorschau für eigene Notiztypen (Layouts). AnkiWeb-Look, mobil,
   Touch-Ziele >= 44px (Buttons erben .btn min-height). */
.page__sub { color: var(--text-muted); font-size: 15px; margin: -10px 0 22px; max-width: 60ch; }
.lay-card { margin-bottom: 22px; }
.lay-card .field { margin-bottom: 12px; }

/* Galerie */
.lay-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.lay-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-1);
}
.lay-tile__head { display: flex; align-items: center; gap: 8px; }
.lay-tile__label { font-weight: 700; font-size: 16px; color: var(--text); }
.lay-tile__badge {
  font-size: 11px; font-weight: 600; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px; padding: 2px 8px;
}
.lay-tile__desc { font-size: 13px; color: var(--text-muted); margin: 0; line-height: 1.4; min-height: 36px; }
.lay-tile__mini {
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  overflow: hidden; min-height: 120px;
}
.lay-tile__btn { margin-top: auto; width: 100%; }

/* Liste vorhandener Layouts */
.lay-list { display: flex; flex-direction: column; gap: 0; }
.lay-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid var(--border); min-height: 44px;
}
.lay-row:last-child { border-bottom: none; }
.lay-row__name { font-weight: 600; color: var(--text); }
.lay-row__fields { font-size: 13px; color: var(--text-muted); text-align: right; overflow-wrap: anywhere; }
.lay-empty { color: var(--text-muted); font-size: 14px; }

/* KI-Vorschau */
.lay-preview {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
}
.lay-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lay-fields__lab { font-size: 13px; color: var(--text-muted); margin-right: 4px; }
.lay-fields__chip {
  font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--surface-2); border-radius: 999px; padding: 3px 10px;
}
.lay-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .lay-cards { grid-template-columns: 1fr; } }
.lay-side { display: flex; flex-direction: column; gap: 6px; }
.lay-side__lab { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.lay-side__render {
  background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; min-height: 120px;
}
.lay-frame { display: block; }

/* Liste vorhandener Layouts — Zeile mit Umbenennen-/Bearbeiten-Buttons */
.lay-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.lay-row__edit { flex: none; align-self: center; }
.lay-row__actions { display: flex; gap: 6px; flex: none; align-self: center; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 480px) { .lay-row { align-items: flex-start; } .lay-row__actions { flex-direction: column; } }

/* Kopfzeile der „Vorhandene Layouts"-Karte (Titel + Duplikate-Button) */
.lay-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lay-card__head .btn { flex: none; align-self: flex-start; }

/* Duplikate-aufräumen-Dialog */
.dedupe { display: flex; flex-direction: column; gap: 14px; }
.dedupe__group { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px; background: var(--surface-2); }
.dedupe__base { font-size: 14px; color: var(--text-muted); margin-bottom: 6px; }
.dedupe__canon { font-size: 14px; color: var(--text); margin-bottom: 8px; }
.dedupe__count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.dedupe__member {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px; min-height: 44px;
  border-top: 1px solid var(--border); cursor: pointer;
}
.dedupe__member--disabled { cursor: not-allowed; opacity: 0.7; }
.dedupe__cb { width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.dedupe__mname { flex: 1; min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.dedupe__badge { flex: none; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.dedupe__badge--ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border)); }
.dedupe__badge--no { color: var(--again); background: color-mix(in srgb, var(--again) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--again) 35%, var(--border)); }
@media (max-width: 480px) {
  .dedupe__member { flex-wrap: wrap; }
  .dedupe__badge { margin-left: 28px; }
}

/* Notiztyp-Vorschau im Modal (Deck-Standard-Layout / Notiztyp ändern) */
.modal__preview { margin-top: 12px; }
.nt-prev { margin-top: 0; }
.nt-prev__hint { color: var(--text-muted); font-size: 13px; margin: 8px 0 0; }

/* gold-Button (KI-Anpassen) */
.btn--gold { background: var(--gold); color: #1b1d22; border-color: var(--gold); font-weight: 600; }
.btn--gold:hover { background: color-mix(in srgb, var(--gold) 88%, #000); }

/* Layout-Editor (im Modal) */
.lay-editor { display: flex; flex-direction: column; gap: 12px; }
.lay-ed-addfield { display: flex; align-items: flex-end; gap: 8px; }
.lay-ed-addfield .field { flex: 1; margin: 0; }
.lay-ed-addfield .btn { flex: none; }
.lay-ed-hint { font-size: 12px; color: var(--text-muted); margin: -6px 0 0; line-height: 1.4; }
.lay-ed-tmpl-head { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 4px; }
.lay-ed-code { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; font-size: 13px; line-height: 1.45; }
.lay-fields__chip--new { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); display: inline-flex; align-items: center; gap: 4px; }
.lay-fields__rm { background: none; border: none; cursor: pointer; color: inherit; font-size: 15px; line-height: 1; padding: 0 0 0 2px; opacity: .7; }
.lay-fields__rm:hover { opacity: 1; }
.lay-ed-ai {
  margin-top: 4px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--gold) 7%, transparent); display: flex; flex-direction: column; gap: 8px;
}
.lay-ed-ai__title { font-weight: 700; font-size: 14px; color: var(--text); }
.lay-ed-ai .field { margin: 0; }
.lay-ed-ai .btn { align-self: flex-start; }

/* ===== Aussprache-Bewertung (Azure Pronunciation Assessment) ===== */
.pron { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 4px; }
.pron__rec { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px; font-weight: 600; }
.pron__rec-ico { font-size: 16px; line-height: 1; }
.pron__rec.is-rec { color: var(--again); border-color: var(--again); background: color-mix(in srgb, var(--again) 12%, transparent); animation: pronPulse 1.2s ease-in-out infinite; }
.pron__rec.is-busy { opacity: .7; cursor: default; }
@keyframes pronPulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--again) 35%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

.pron__panel { width: 100%; max-width: var(--maxw); margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 16px; display: flex; flex-direction: column; gap: 14px; }

.pron__msg { color: var(--text-muted); font-size: 14px; line-height: 1.5; text-align: center; }

/* Score-Ringe (Genauigkeit / Flüssigkeit / Vollständigkeit) */
.pron__scores { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pron__ring { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; border: 4px solid var(--border); }
.pron__ring-num { font-size: 22px; font-weight: 800; color: var(--text); line-height: 1; }
.pron__ring-lab { font-size: 10px; color: var(--text-muted); margin-top: 3px; text-align: center; }

/* Großer Gesamt-Score */
.pron__big { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0; border-radius: var(--r); }
.pron__big-num { font-size: 40px; font-weight: 900; line-height: 1; }
.pron__big-lab { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Farbcodierung nach Score */
.is-good .pron__ring-num, .pron__big.is-good .pron__big-num { color: var(--good); }
.pron__ring.is-good { border-color: var(--good); }
.is-mid .pron__ring-num, .pron__big.is-mid .pron__big-num { color: var(--hard); }
.pron__ring.is-mid { border-color: var(--hard); }
.is-bad .pron__ring-num, .pron__big.is-bad .pron__big-num { color: var(--again); }
.pron__ring.is-bad { border-color: var(--again); }
.pron__ring.is-na { border-color: var(--border); }
.is-na .pron__ring-num, .pron__big.is-na .pron__big-num { color: var(--text-muted); }

/* Wort-Chips */
.pron__words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pron__word { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; cursor: default; }
.pron__word.has-ph { cursor: pointer; }
.pron__word.is-good { border-color: color-mix(in srgb, var(--good) 60%, var(--border)); background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.pron__word.is-mid { border-color: color-mix(in srgb, var(--hard) 60%, var(--border)); background: color-mix(in srgb, var(--hard) 12%, var(--surface)); }
.pron__word.is-bad, .pron__word.is-wrong { border-color: color-mix(in srgb, var(--again) 65%, var(--border)); background: color-mix(in srgb, var(--again) 14%, var(--surface)); }
.pron__word.is-omit { border-style: dashed; opacity: .75; }
.pron__word.is-ins { text-decoration: line-through; opacity: .8; }
.pron__word-s { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.pron__word-e { font-size: 11px; font-weight: 700; color: var(--again); text-transform: lowercase; }

/* Phonem-Aufschlüsselung (inline nach Wort) */
.pron__phon { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 8px; margin-top: 2px; background: var(--surface-2); border-radius: var(--r); }
.pron__ph { display: inline-flex; flex-direction: column; align-items: center; min-width: 34px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); }
.pron__ph-p { font-size: 14px; font-weight: 700; color: var(--text); font-family: ui-monospace, monospace; }
.pron__ph-s { font-size: 10px; color: var(--text-muted); }
.pron__ph.is-good .pron__ph-p { color: var(--good); }
.pron__ph.is-mid .pron__ph-p { color: var(--hard); }
.pron__ph.is-bad .pron__ph-p { color: var(--again); }

.pron__rec-txt { font-size: 13px; color: var(--text-muted); text-align: center; }
.pron__rec-k { font-weight: 700; }

/* Sprechen-Modus: Rating-Vorschlag aus dem Aussprache-Score */
.pron__rating-hint { font-size: 14px; text-align: center; color: var(--text-muted); }
.pron__rating-k { font-weight: 700; }
.pron__rating-v { font-weight: 800; }
.pron__rating-v.is-good { color: var(--good); }
.pron__rating-v.is-mid { color: var(--hard); }
.pron__rating-v.is-bad { color: var(--again); }
.pron__rating-v.is-na { color: var(--text-muted); }

.pron__foot { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pron__foot .btn { min-height: 44px; padding: 10px 16px; font-weight: 600; }

@media (max-width: 480px) {
  .pron__ring { width: 66px; height: 66px; }
  .pron__ring-num { font-size: 19px; }
  .pron__big-num { font-size: 34px; }
}

/* ====================================================================== */
/* Shadowing — Modell-Audio-Leiste + Score-Ring (SVG) + Dimensions-Balken */
/* ====================================================================== */

/* "Original anhören"-Leiste (über dem Mic). */
.shadow { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 4px; }
.shadow__orig { min-height: 44px; padding: 10px 18px; font-weight: 600; }
.shadow__hint { font-size: 13px; color: var(--text-muted); text-align: center; }

/* Großer SVG-Score-Ring (Nähe zum Modell). */
.shadow-score { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.shadow-score__ringwrap { position: relative; width: 132px; height: 132px; }
.shadow-ring { width: 132px; height: 132px; display: block; }
.shadow-ring__track { stroke: var(--border); }
.shadow-ring__val { transition: stroke-dasharray .5s var(--ease); }
.shadow-ring.is-good .shadow-ring__val { stroke: var(--good); }
.shadow-ring.is-mid  .shadow-ring__val { stroke: var(--hard); }
.shadow-ring.is-bad  .shadow-ring__val { stroke: var(--again); }
.shadow-ring.is-na   .shadow-ring__val { stroke: var(--border-strong); }
.shadow-score__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.shadow-score__num { font-size: 38px; font-weight: 900; line-height: 1; color: var(--text); }
.shadow-score__center.is-good .shadow-score__num { color: var(--good); }
.shadow-score__center.is-mid  .shadow-score__num { color: var(--hard); }
.shadow-score__center.is-bad  .shadow-score__num { color: var(--again); }
.shadow-score__center.is-na   .shadow-score__num { color: var(--text-muted); }
.shadow-score__lab { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* Dimensions-Balken (Aussprache/Flüssigkeit/Vollständigkeit/Betonung). */
.shadow-bars { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; }
.shadow-bar { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 8px; }
.shadow-bar__lab { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.shadow-bar__track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.shadow-bar__fill { height: 100%; border-radius: 999px; transition: width .5s var(--ease); background: var(--border-strong); }
.shadow-bar__fill.is-good { background: var(--good); }
.shadow-bar__fill.is-mid  { background: var(--hard); }
.shadow-bar__fill.is-bad  { background: var(--again); }
.shadow-bar__num { font-size: 12px; font-weight: 800; text-align: right; color: var(--text-muted); }
.shadow-bar__num.is-good { color: var(--good); }
.shadow-bar__num.is-mid  { color: var(--hard); }
.shadow-bar__num.is-bad  { color: var(--again); }

@media (max-width: 480px) {
  .shadow-score__ringwrap, .shadow-ring { width: 116px; height: 116px; }
  .shadow-score__num { font-size: 32px; }
  .shadow-bar { grid-template-columns: 80px 1fr 28px; }
}

/* ====================================================================== */
/* Streak-Freeze — Header-Chip + Panel + Schild (erwachsen, ruhig)        */
/* ====================================================================== */
.streakchip-wrap { position: relative; }
.streakchip {
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 11px;
  border-radius: 999px; border: 1px solid color-mix(in srgb, var(--hard) 40%, var(--border));
  background: color-mix(in srgb, var(--hard) 10%, var(--surface)); cursor: pointer;
  font: inherit; transition: transform .25s var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.streakchip:hover { background: color-mix(in srgb, var(--hard) 16%, var(--surface)); }
.streakchip:active { transform: scale(.96); }   /* max. dezentes scale-Feedback */
.streakchip__ic { font-size: 15px; line-height: 1; filter: saturate(1); }
.streakchip__n { font-size: 14px; font-weight: 800; color: var(--text); }
/* Heute noch nicht gelernt → ruhig ausgegraut (kein Alarm). */
.streakchip--idle { border-color: var(--border); background: var(--surface-2); }
.streakchip--idle .streakchip__ic { filter: grayscale(1); opacity: .6; }
.streakchip--idle .streakchip__n { color: var(--text-muted); }

.streakpanel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 320px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); padding: 18px; display: flex; flex-direction: column; gap: 14px;
}
.streakpanel__head { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.streakpanel__big { font-size: 44px; font-weight: 900; line-height: 1; color: var(--hard); }
.streakpanel__big.is-idle { color: var(--text-muted); }
.streakpanel__lab { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.streakpanel__note { font-size: 13px; color: var(--text-muted); line-height: 1.45; }

/* Schild-Zeile (Lucide shield, slate-blau). */
.streak-shield {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
}
.streak-shield__ic { width: 26px; height: 26px; color: #5b7290; flex: 0 0 auto; }
:root[data-theme="dark"] .streak-shield__ic { color: #8aa4c2; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .streak-shield__ic { color: #8aa4c2; } }
.streak-shield__txt { flex: 1 1 auto; min-width: 0; }
.streak-shield__n { font-size: 14px; font-weight: 700; color: var(--text); }
.streak-shield__sub { font-size: 12px; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.streak-shield__badge {
  flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #5b7290; color: #fff; font-size: 12px; font-weight: 800;
}

.streakpanel__hmtitle { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.streakpanel__heat { display: flex; gap: 3px; flex-wrap: nowrap; overflow-x: auto; }
.streakpanel__heat .hmweek { gap: 3px; }
.streakpanel__heat .hmcell { width: 11px; height: 11px; }
/* Geschützter Tag in der Heatmap: Schild-Tint (slate) statt Lern-Farbe. */
.hmcell--frozen { background: color-mix(in srgb, #5b7290 55%, var(--surface-2)) !important; box-shadow: inset 0 0 0 1.5px #5b7290; }

@media (max-width: 540px) {
  .streakpanel { width: 290px; }
}

/* ====================================================================== */
/* KI-Eselsbrücke (Mnemonik) — Editor-Dialog + Study-Pille                */
/* ====================================================================== */

/* --- Editor-Dialog (über dem Karten-Editor gestapelt) --- */
.mnemo-dialog { display: flex; flex-direction: column; gap: 12px; min-width: 280px; max-width: 460px; }
.mnemo-status { margin: 0; color: var(--text-muted); font-size: 14px; line-height: 1.4; }
.mnemo-panel { display: flex; flex-direction: column; gap: 12px; }
.mnemo-row { display: flex; flex-direction: column; gap: 4px; }
.mnemo-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.mnemo-keyword {
  font-size: 18px; font-weight: 700; color: var(--accent);
  background: var(--surface-2); border-radius: var(--r);
  padding: 8px 12px; word-break: break-word;
}
.mnemo-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.45; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); padding: 10px 12px;
}
.mnemo-textarea:focus { outline: none; border-color: var(--accent); }
.mnemo-imgwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mnemo-imgwrap > .mnemo-row { align-self: stretch; }

/* Bild-Prompt sichtbar/editierbar (aufklappbar). */
.mnemo-promptbox { align-self: stretch; border: 1px solid var(--border); border-radius: var(--r); padding: 0; }
.mnemo-promptsum {
  cursor: pointer; list-style: none; padding: 8px 12px; font-size: 12px;
  font-weight: 600; color: var(--text-muted); user-select: none;
}
.mnemo-promptsum::-webkit-details-marker { display: none; }
.mnemo-promptsum::before { content: "▸ "; display: inline-block; transition: transform .15s ease; }
.mnemo-promptbox[open] > .mnemo-promptsum::before { transform: rotate(90deg); }
.mnemo-promptarea { font-size: 13px; line-height: 1.4; margin: 0 12px; width: auto; }
.mnemo-prompthint { font-size: 12px; color: var(--accent); margin: 6px 12px 0; }
.mnemo-regenbtn { margin: 8px 12px 12px; }
.mnemo-img {
  max-width: 100%; max-height: 320px; height: auto; border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); background: #fff;
}
.mnemo-imgnote { margin: 0; color: var(--text-muted); font-size: 13px; text-align: center; }
.mnemo-src { margin: 0; font-size: 12px; color: var(--text-muted); opacity: 0.8; letter-spacing: 0.01em; }

/* --- Interaktiver Verfeinerungs-Chat (über dem Karten-Editor gestapelt) --- */
.mnemo-chat-dialog {
  display: flex; flex-direction: column; gap: 12px;
  width: min(92vw, 480px); max-width: 480px;
}
.mnemo-chat-head { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.4; word-break: break-word; }
.mnemo-chat-head__word { font-weight: 700; color: var(--accent); }

.mnemo-chat-thread {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; min-height: 96px; overflow-y: auto;
  padding: 8px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r);
}
.mnemo-msg { display: flex; max-width: 88%; }
.mnemo-msg--ai { align-self: flex-start; }
.mnemo-msg--user { align-self: flex-end; }
.mnemo-bubble {
  padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.mnemo-msg--ai .mnemo-bubble {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-bottom-left-radius: 5px;
}
.mnemo-msg--user .mnemo-bubble {
  background: var(--primary); color: var(--on-primary);
  border-bottom-right-radius: 5px;
}
.mnemo-typing { display: inline-flex; gap: 4px; align-items: center; }
.mnemo-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
  display: inline-block; animation: mnemoTb 1s infinite;
}
.mnemo-typing i:nth-child(2) { animation-delay: .15s; }
.mnemo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes mnemoTb { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.mnemo-variants { display: flex; flex-direction: column; gap: 6px; }
.mnemo-variants__list { display: flex; flex-direction: column; gap: 6px; }
.mnemo-variant {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; min-height: 44px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); color: var(--text); font: inherit;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mnemo-variant:hover { background: var(--surface-hover); border-color: var(--accent); }
.mnemo-variant:active { transform: scale(.99); }
.mnemo-variant__kw { font-size: 14px; font-weight: 700; color: var(--accent); }
.mnemo-variant__text { font-size: 13px; color: var(--text-muted); line-height: 1.35; }

.mnemo-input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  padding: 9px 12px; min-height: 44px;
}
.mnemo-input:focus { outline: none; border-color: var(--accent); }

.mnemo-imgbtns { display: flex; justify-content: center; width: 100%; margin-top: 8px; }

.mnemo-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.mnemo-quick__chip { font-size: 13px; min-height: 32px; }

/* Bild-Stil-Auswahl (Chips) */
.mnemo-styles { display: flex; flex-wrap: wrap; gap: 6px; }
.mnemo-style { min-height: 36px; padding: 6px 14px; }
@media (pointer: coarse) { .mnemo-style { min-height: 44px; } }

.mnemo-bar { display: flex; align-items: center; gap: 8px; }
.mnemo-bar__input {
  flex: 1; min-width: 0; box-sizing: border-box; font: inherit; font-size: 15px;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 11px 16px; min-height: 44px;
}
.mnemo-bar__input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* --- Study-Pille (unter der aufgedeckten Antwort) --- */
.study-mnemo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 16px 0 4px; }
.study-mnemo__pill {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--accent); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.study-mnemo__pill:hover { background: var(--surface-hover); border-color: var(--accent); }
.study-mnemo__pill[aria-expanded="true"] { background: var(--surface-hover); border-color: var(--accent); }
.study-mnemo__panel {
  width: 100%; max-width: 520px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.study-mnemo__kw {
  font-size: 16px; font-weight: 700; color: var(--accent);
  text-align: center; word-break: break-word;
}
.study-mnemo__text {
  font-size: 16px; line-height: 1.5; color: var(--text); text-align: center;
}
.study-mnemo__img {
  max-width: 100%; max-height: 300px; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); background: #fff;
}

/* ===================================================================
   Zonen-Antwort-Karte (strukturierte `fields`-Karten). Saubere Profi-Optik:
   Antwort + Eselsbrücke links, Beispiele rechts (Desktop), gestapelt (Handy).
   Beispiel-Block scrollt intern — Antwort + Bewerten-Knöpfe bleiben sichtbar.
   Lebt in #cardhost (.ankicard .card erbt Schrift). Eigene Tokens → Light+Dark.
   =================================================================== */
/* Strukturierte Karte: App-Surface statt weißer Flashcard (Dark-Mode-Kontrast). */
.ankicard--zones { background: var(--surface); color: var(--text); padding: 22px 22px; max-width: 760px;
  max-height: calc(100dvh - 200px); display: flex; flex-direction: column; min-height: 0; }
.ankicard--zones .card { color: var(--text); }
.ansz {
  display: grid; grid-template-columns: 1fr; gap: 16px;
  width: 100%; text-align: left; font-size: 16px; color: var(--text);
  min-height: 0; flex: 1 1 auto; overflow: hidden;
}
.ansz__col { display: flex; flex-direction: column; gap: 16px; min-width: 0;
  min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.zone { min-width: 0; }
.zone__h { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px; }

/* Zone ANTWORT */
.zone__wordrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zone__word { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--text);
  margin: 0; overflow-wrap: anywhere; }
.zone__audiobtn { flex: 0 0 auto; width: 44px; height: 44px; display: inline-grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); cursor: pointer; font-size: 19px; line-height: 1;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.zone__audiobtn:hover { background: var(--surface-hover); border-color: var(--primary); }
.zone__audiobtn.is-playing { border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.zone__audiobtn.is-playing .zone__audioico { animation: dictPulse 1.2s var(--ease) infinite; }
.zone__audiobtn.is-loading { opacity: .7; cursor: progress; }
.zone__meaning { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.zone__meaning li { font-size: 17px; line-height: 1.45; color: var(--text); }
.zone__img { display: block; max-width: 220px; width: 100%; max-height: 22vh; height: auto; object-fit: contain; margin: 14px 0 0;
  border-radius: var(--r); box-shadow: var(--shadow-1); background: #fff; }

/* Zone ESELSBRÜCKE */
.ansz__mnemo { border-top: 1px solid var(--border); padding-top: 16px; }
.zone__mnemobody { display: flex; flex-direction: column; gap: 10px; }
.zone__mnemokw { font-size: 16px; font-weight: 700; color: var(--accent); word-break: break-word; }
.zone__mnemotext { font-size: 15px; line-height: 1.5; color: var(--text); }
.zone__mnemoimg { max-width: 100%; max-height: 22vh; height: auto; object-fit: contain; border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); background: #fff; align-self: flex-start; }
.zone__mnemoedit, .zone__mnemoadd {
  appearance: none; cursor: pointer; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--accent); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.zone__mnemoedit:hover, .zone__mnemoadd:hover { background: var(--surface-hover); border-color: var(--accent); }
.zone__mnemoadd { font-size: 14.5px; }

/* Zone BEISPIELE — interner Scroll, begrenzte Höhe */
.ansz__examples { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
.zone__exhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.zone__exhead .zone__h { margin-bottom: 0; }
.zone__exhead .zone__audiobtn { width: 40px; height: 40px; font-size: 17px; }

/* Seite 3 — aufklappbare Beispiel-Zone (details/summary). Default eingeklappt;
   nur Antwort + Bedeutung + Bild bleiben sichtbar. */
.zone--collapsible > summary.zone__exhead {
  cursor: pointer; list-style: none; user-select: none; min-height: 40px;
  margin-bottom: 0;
}
.zone--collapsible > summary.zone__exhead::-webkit-details-marker { display: none; }
/* Eigener Disclosure-Pfeil vor dem Titel (dreht beim Öffnen). */
.zone--collapsible > summary.zone__exhead .zone__h::before {
  content: "▸"; display: inline-block; margin-right: 7px; color: var(--text-muted);
  transition: transform var(--dur) var(--ease);
}
.zone--collapsible[open] > summary.zone__exhead .zone__h::before { transform: rotate(90deg); }
.zone--collapsible[open] > summary.zone__exhead { margin-bottom: 8px; }
.zone--collapsible > summary.zone__exhead:hover .zone__h { color: var(--text); }
.zone--collapsible > summary.zone__exhead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r); }
@media (prefers-reduced-motion: reduce) {
  .zone--collapsible > summary.zone__exhead .zone__h::before { transition: none; }
}
.zone__exscroll { overflow: auto; max-height: 40vh; -webkit-overflow-scrolling: touch;
  padding-right: 4px; display: flex; flex-direction: column; gap: 12px; }
.zone__memhint { display: flex; flex-direction: column; gap: 2px; padding: 8px 11px;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); border-radius: var(--r); }
.zone__memlab { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--hard); }
.zone__memval { font-size: 15px; color: var(--text); }
.zone__exlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.zone__ex { display: flex; flex-direction: column; gap: 2px; padding-bottom: 11px;
  border-bottom: 1px solid var(--border); }
.zone__ex:last-child { border-bottom: none; padding-bottom: 0; }
.zone__exes { font-size: 16px; line-height: 1.45; color: var(--text); font-weight: 600; }
.zone__exde { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.zone__exempty { color: var(--text-muted); font-size: 14px; margin: 0; }

/* Zone META */
.ansz__meta { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-muted);
  font-weight: 600; letter-spacing: .02em; }

/* Desktop: zweispaltig (Antwort+Eselsbrücke | Beispiele). */
@media (min-width: 760px) {
  .ansz { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
  .zone__exscroll { max-height: 46vh; }
}

/* ===================== Konjugations-Trainer ===================== */
.conj-card { display: flex; flex-direction: column; gap: 14px; }
.conj-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 0; min-width: 0; }
.conj-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.conj-input {
  width: 100%; box-sizing: border-box; min-height: 44px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font-size: 16px; font-family: var(--font);
  transition: border-color var(--dur) var(--ease);
}
.conj-input:focus { outline: none; border-color: var(--accent); }
.conj-row { display: flex; gap: 12px; flex-wrap: wrap; }
.conj-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.conj-actions .btn { min-height: 44px; min-width: 90px; }
.conj-btn-mine { margin-left: auto; }

.conj-out { margin-top: 4px; }
.conj-hint { color: var(--text-muted); font-size: 14px; margin: 4px 0; }
.conj-err { color: var(--again); font-size: 14px; font-weight: 600; margin: 8px 0; }

.conj-spinner {
  width: 22px; height: 22px; margin: 10px 0; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-top-color: var(--accent); animation: conjspin 0.7s linear infinite;
}
@keyframes conjspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .conj-spinner { animation-duration: 1.6s; } }

.conj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.conj-chip {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 14px; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.conj-chip:hover { background: var(--surface-hover); border-color: var(--accent); }

/* „Meine Verben"-Liste (antippbare echte Verben aus den Karten). */
.conj-myverbs { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.conj-myverbs__lab { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); margin-bottom: 8px; }

/* Tabelle + Drill teilen Kopf/Tabellen-Styling */
.conj-table-view, .conj-drill { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.conj-thead { display: flex; flex-direction: column; gap: 4px; }
.conj-ttitle { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conj-tinf { font-size: 22px; font-weight: 700; color: var(--text); }
.conj-ttense { font-size: 14px; color: var(--text-muted); }
.conj-tnote {
  font-size: 13px; color: var(--text-muted); margin: 0;
  padding: 8px 10px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--hard) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--hard) 25%, var(--border));
}

.conj-table { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.conj-trow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.conj-trow:last-child { border-bottom: none; }
.conj-tpron { flex: 0 0 38%; min-width: 0; color: var(--text-muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conj-tform { flex: 1 1 auto; min-width: 0; color: var(--text); font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.conj-tform--empty { color: var(--text-muted); font-weight: 500; }
.conj-trow.is-ok  { background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.conj-trow.is-bad { background: color-mix(in srgb, var(--again) 7%, var(--surface)); }

/* Drill */
.conj-prog { display: flex; align-items: center; gap: 10px; }
.conj-progtxt { font-size: 13px; color: var(--text-muted); flex: 0 0 auto; }
.conj-progbar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.conj-progfill { height: 100%; background: var(--accent); border-radius: 999px; transition: width var(--dur) var(--ease); }
.conj-q { display: flex; align-items: baseline; gap: 10px; }
.conj-qpron { font-size: 22px; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.conj-qhint { font-size: 18px; color: var(--text-muted); }
.conj-drill-input { font-size: 18px; }

.conj-drill-result { border-radius: var(--r-md); padding: 12px 14px; border: 1px solid var(--border); }
.conj-drill-result.is-correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--surface)); }
.conj-drill-result.is-close   { border-color: var(--hard); background: color-mix(in srgb, var(--hard) 9%, var(--surface)); }
.conj-drill-result.is-wrong   { border-color: var(--again); background: color-mix(in srgb, var(--again) 8%, var(--surface)); }
.conj-rhead { font-weight: 700; margin-bottom: 6px; }
.conj-rline { display: flex; gap: 8px; align-items: baseline; margin-top: 4px; flex-wrap: wrap; }
.conj-rlab { flex: 0 0 56px; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.conj-rtxt { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }

.conj-drill-done .conj-score { font-size: 26px; font-weight: 800; color: var(--text); }
.conj-scoresub { margin: 2px 0 6px; color: var(--text-muted); }

@media (max-width: 520px) {
  .conj-row { flex-direction: column; }
  .conj-btn-mine { margin-left: 0; width: 100%; }
}

/* ===================================================================
   Lernpfad („Was lerne ich als Nächstes?")
   =================================================================== */
.path__langbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; }
.path__langchip { display: inline-flex; align-items: center; gap: 7px; font: inherit;
  font-weight: 600; font-size: 14px; min-height: 44px; padding: 6px 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.path__langchip:hover { border-color: var(--accent); color: var(--text); }
.path__langchip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.path__langflag { font-size: 16px; line-height: 1; }

.path__hero { border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); padding: 20px; margin: 0 0 18px; text-align: center; }
.path__herobig { font-size: 40px; font-weight: 800; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.path__herosub { margin-top: 8px; color: var(--text-muted); font-size: 15px; }
.path__herotrack { margin-top: 14px; height: 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); overflow: hidden; }
.path__herofill { height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .4s ease; }

.path__subhead { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.path__levels { margin: 0 0 22px; }
.path__lvrow { display: grid; grid-template-columns: 36px 1fr auto; align-items: center;
  gap: 10px; padding: 6px 0; }
.path__lvtag { font-weight: 700; font-size: 13px; color: var(--text);
  text-align: center; }
.path__lvtrack { height: 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted) 18%, transparent); overflow: hidden; }
.path__lvfill { height: 100%; border-radius: 999px; background: var(--accent);
  transition: width .4s ease; min-width: 2px; }
.path__lvnum { font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

.path__rec { margin: 0 0 10px; }
.path__hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.path__reclist { display: flex; flex-direction: column; gap: 8px; }
.path__recrow { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--r); background: var(--surface); }
.path__recmain { min-width: 0; flex: 1; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; }
.path__recword { font-weight: 600; color: var(--text); word-break: break-word; }
.path__recmeta { font-size: 12.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.path__recacts { display: flex; gap: 6px; flex-shrink: 0; }
.path__recbtn { min-height: 44px; white-space: nowrap; }

.path__disclaimer { margin: 22px 0 0; font-size: 12px; color: var(--text-muted);
  line-height: 1.5; max-width: 60ch; }

@media (max-width: 480px) {
  .path__recrow { flex-direction: column; align-items: stretch; }
  .path__recacts { justify-content: stretch; }
  .path__recbtn:first-child { flex: 1; }
}

/* ============ Lese-Modus (Sentence Mining) ============ */
.reading__setup { display: flex; flex-direction: column; gap: 14px; margin: 12px 0 18px; }
.reading__srcrow { display: flex; gap: 8px; }
.reading__srctab {
  flex: 1; min-height: 44px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-muted); border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 12px; transition: background .15s, color .15s, border-color .15s;
}
.reading__srctab:hover { background: var(--surface-hover); }
.reading__srctab.is-active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); border-color: var(--accent); }
.reading__panel { display: flex; flex-direction: column; gap: 12px; }
.reading__opts { display: flex; gap: 12px; flex-wrap: wrap; }
.reading__field { display: flex; flex-direction: column; gap: 4px; min-width: 110px; }
.reading__field--grow { flex: 1 1 200px; }
.reading__lbl { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.reading__sel, .reading__inp, .reading__ta {
  min-height: 44px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text); border-radius: 10px; font: inherit; padding: 9px 12px; width: 100%;
}
.reading__ta { min-height: 130px; resize: vertical; line-height: 1.5; }
.reading__check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); cursor: pointer; min-height: 44px; }
.reading__check input { width: 18px; height: 18px; accent-color: var(--accent); }
.reading__gen { align-self: flex-start; min-height: 44px; }
.reading__status { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); font-size: 14px; margin-bottom: 12px; }
.reading__status.is-error { background: color-mix(in srgb, #e5484d 12%, var(--surface)); color: #c0353a; }

/* Dezenter Indikator, während das Vorab-Glossar im Hintergrund lädt. */
.reading__glossind {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 12px;
  background: var(--surface-2); color: var(--text-muted); font-size: 13px;
}
.reading__glossind::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-top-color: var(--accent); animation: reading-spin 0.7s linear infinite;
}
@keyframes reading-spin { to { transform: rotate(360deg); } }

.reading__text { font-size: 19px; line-height: 1.7; color: var(--text); max-width: 70ch; }
.reading__empty { color: var(--text-muted); font-size: 15px; }
.reading__sent { }
.reading__w {
  cursor: pointer; border-radius: 5px; padding: 1px 3px; transition: background .12s, box-shadow .12s, border-color .12s;
  border: 1px solid transparent; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.reading__w:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.reading__w:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* LingQ-Wortfärbung (Wort-Status). neu = blau, lernend = gelb, bekannt = transparent.
   Nicht-nur-Farbe (WCAG 1.4.1): zusätzlich ein Unterstrich-Stil je Status —
   neu = durchgezogen, lernend = gepunktet. So bleibt der Status auch ohne
   Farbwahrnehmung (Daltonismus / Graustufen) erkennbar. */
.reading__w--neu {
  background: var(--read-new-bg); border-color: var(--read-new-bd); color: var(--read-new-tx);
  text-decoration: underline; text-decoration-style: solid;
  text-decoration-color: var(--read-new-bd); text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.reading__w--neu:hover { background: color-mix(in srgb, var(--read-new-bd) 28%, var(--read-new-bg)); }
.reading__w--lernend {
  background: var(--read-learn-bg); border-color: var(--read-learn-bd); color: var(--read-learn-tx);
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--read-learn-line); text-underline-offset: 2px; text-decoration-thickness: 2px;
}
.reading__w--lernend:hover { background: color-mix(in srgb, var(--read-learn-bd) 28%, var(--read-learn-bg)); }
/* bekannt: keine Markierung (transparent, kein Unterstrich) — bewusst keine Regel nötig. */
/* (Die früheren ❓-Grammatik-Icons am Satzende wurden entfernt — Grammatik kommt
   jetzt im Wort-Popup als aufklappbarer Abschnitt, ohne dauerhaftes Icon.) */

/* Verständnis-Header über dem Text: 🔵 N neu · 🟡 N lerne · ⚪ X% bekannt + Ampel-Chip. */
.reading__stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-bottom: 14px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-2); font-size: 14px; color: var(--text);
}
.reading__stats[hidden] { display: none; }
.reading__stat { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.reading__stat b { font-weight: 700; }
.reading__ampel {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
}
.reading__ampel--gruen { background: var(--read-ampel-gruen-bg); color: var(--read-ampel-gruen-tx); }
.reading__ampel--gelb  { background: var(--read-ampel-gelb-bg);  color: var(--read-ampel-gelb-tx); }
.reading__ampel--rot   { background: var(--read-ampel-rot-bg);   color: var(--read-ampel-rot-tx); }

/* ---- Lese-Modus: Umschalter Lesen | Shadowing ---- */
.reading__modebar { display: flex; justify-content: flex-start; margin-bottom: 14px; }
.reading__modebar[hidden] { display: none; }

/* Aktiver Shadowing-Satz im Text hervorgehoben. */
.reading__sent.is-shadow-active {
  /* Hintergrund-Highlight statt box-shadow-Ring: ein inline-Satz bricht oft um
     (v.a. mobil) — box-decoration-break:clone gibt jedem Zeilenfragment saubere
     gerundete Kanten statt harter Ring-Bruchstellen. */
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 6px; padding: 1px 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Im Shadowing-Modus keine Wort-Hover-Pointer (Tap deaktiviert). */
.reading__text--shadowing .reading__w { cursor: default; }
.reading__text--shadowing .reading__w:hover { background: transparent; }

/* ---- F3 Mitlesen (Karaoke-Wort-Highlight) ---- */
/* Das gerade vorgelesene Wort bekommt einen kräftigen Accent-Hintergrund.
   Sanfter Übergang, damit das Mitlaufen flüssig wirkt statt zu blinken. */
.reading__w.is-reading {
  /* Karaoke-Cue: kräftiger Akzent-Hintergrund PLUS Unterstreichung (nicht nur
     Farbe → a11y) + fett. Dunklerer Akzent-Mix sichert Kontrast für weißen Text
     auch im Dark-Mode (Review Lens 3: reines --accent erreichte nur ~3:1). */
  background: color-mix(in srgb, var(--accent) 88%, #000 12%);
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: inset 0 -2px 0 0 #fff;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background 90ms linear, color 90ms linear;
}
.reading-listen {
  margin: 14px 0; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface, color-mix(in srgb, var(--accent) 5%, transparent));
}
.reading-listen__controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.reading-listen__speed {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.92rem; color: var(--text-muted, inherit);
}
.reading-listen__speed input[type="range"] { width: 130px; accent-color: var(--accent); }
.reading-listen__speedval { min-width: 36px; font-variant-numeric: tabular-nums; }
.reading-listen__status { font-size: 0.9rem; color: var(--text-muted, inherit); margin-left: auto; }
.reading-listen__btn.is-on { background: var(--again); border-color: var(--again); color: #fff; }

/* ---- F5 Aussprache pro Laut (Phonem-Feedback im Shadowing) ---- */
/* Wiederverwendet die Score-Farbsprache (--good/--hard/--again) wie der
   Sprechen-Modus, aber als kompakte Wort→Laut-Liste. */
.reading-pron { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.reading-pron__summary { cursor: pointer; font-weight: 700; font-size: 0.95rem; margin-bottom: 8px; }
.reading-pron__words { display: flex; flex-direction: column; gap: 8px; }
.reading-pron__word { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.reading-pron__wlab {
  font-weight: 700; font-size: 0.98rem; padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border);
}
.reading-pron__wlab.is-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 50%, var(--border)); }
.reading-pron__wlab.is-mid { color: var(--hard); border-color: color-mix(in srgb, var(--hard) 50%, var(--border)); }
.reading-pron__wlab.is-bad { color: var(--again); border-color: color-mix(in srgb, var(--again) 55%, var(--border)); }
.reading-pron__wlab--err { text-decoration: underline dotted; }
.reading-pron__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.reading-pron__chip {
  font-family: ui-monospace, monospace; font-size: 0.82rem; font-weight: 700;
  padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border);
  background: var(--surface, transparent);
}
.reading-pron__chip.is-good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.reading-pron__chip.is-mid { color: var(--hard); background: color-mix(in srgb, var(--hard) 12%, transparent); }
.reading-pron__chip.is-bad { color: var(--again); background: color-mix(in srgb, var(--again) 14%, transparent); }
.reading-pron__chip.is-na { color: var(--text-muted); }
.reading-pron__legend { display: flex; gap: 14px; margin-top: 10px; font-size: 0.82rem; color: var(--text-muted); }
.reading-pron__legend-item { display: inline-flex; align-items: center; gap: 4px; }
.reading-pron__legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.reading-pron__legend-dot.is-good { background: var(--good); }
.reading-pron__legend-dot.is-mid { background: var(--hard); }
.reading-pron__legend-dot.is-bad { background: var(--again); }

/* ---- Shadowing-Panel (Satz-für-Satz) ---- */
.reading-shadow {
  margin: 16px 0; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-1);
}
.reading-shadow[hidden] { display: none; }
.reading-shadow__progress { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.reading-shadow__sent {
  font-size: 20px; line-height: 1.5; color: var(--text); font-weight: 500;
  margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: var(--surface-2);
}
.reading-shadow__controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.reading-shadow__btn { min-height: 42px; }
.reading-shadow__btn.is-rec {
  border-color: var(--again); color: var(--again);
  background: color-mix(in srgb, var(--again) 10%, transparent);
}
.reading-shadow__panel {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--surface-2);
}
.reading-shadow__panel[hidden] { display: none; }
.reading-shadow__msg { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; }
.reading-shadow__score { display: flex; align-items: baseline; gap: 4px; margin-bottom: 10px; }
.reading-shadow__score-num { font-size: 28px; font-weight: 800; }
.reading-shadow__score-lab { font-size: 13px; color: var(--text-muted); }
.reading-shadow__score.is-good .reading-shadow__score-num { color: var(--good); }
.reading-shadow__score.is-mid  .reading-shadow__score-num { color: var(--hard); }
.reading-shadow__score.is-bad  .reading-shadow__score-num { color: var(--again); }
.reading-shadow__score.is-na   .reading-shadow__score-num { color: var(--text-muted); }
.reading-shadow__bars { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.reading-shadow__bar { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 8px; }
.reading-shadow__bar-lab { font-size: 13px; color: var(--text-muted); }
.reading-shadow__bar-track { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; border: 1px solid var(--border); }
.reading-shadow__bar-fill { height: 100%; border-radius: 999px; transition: width .25s var(--ease); }
.reading-shadow__bar-fill.is-good { background: var(--good); }
.reading-shadow__bar-fill.is-mid  { background: var(--hard); }
.reading-shadow__bar-fill.is-bad  { background: var(--again); }
.reading-shadow__bar-fill.is-na   { background: var(--border-strong); }
.reading-shadow__bar-num { font-size: 13px; font-weight: 700; text-align: right; }
.reading-shadow__bar-num.is-good { color: var(--good); }
.reading-shadow__bar-num.is-mid  { color: var(--hard); }
.reading-shadow__bar-num.is-bad  { color: var(--again); }
.reading-shadow__bar-num.is-na   { color: var(--text-muted); }
.reading-shadow__cmp { display: flex; flex-wrap: wrap; gap: 8px; }
.reading-shadow__cmp-btn { min-height: 38px; }
.reading-shadow__nav { display: flex; justify-content: space-between; gap: 8px; }
.reading-shadow__nav-btn { min-width: 110px; min-height: 44px; }

/* Status-Override-Reihe im Wort-Popup („Kenne ich schon" / Zurücksetzen). */
.reading-pop__statusrow { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reading-pop__status {
  flex: 1 1 auto; min-height: 40px; padding: 7px 10px; border: 1px solid var(--border-strong);
  background: var(--surface-2); color: var(--text); border-radius: 9px;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.reading-pop__status:hover { background: var(--surface-hover); }
.reading-pop__status.is-active { border-color: var(--read-status-active-bd); background: var(--read-status-active-bg); color: var(--read-status-active-tx); }
.reading-pop__status:disabled { opacity: .6; cursor: default; }

/* Wort-/Grammatik-Panel */
.reading-pop {
  position: fixed; z-index: 80; max-width: min(340px, calc(100vw - 16px));
  /* Mobile Tabbar (56px + safe-area) berücksichtigen, damit das Popup nicht
     dahinter rutscht; langer Grammatik-Text scrollt per overflow:auto. */
  max-height: calc(100vh - 16px - 56px - env(safe-area-inset-bottom, 0px));
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22); padding: 14px; opacity: 0; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}
/* Desktop: keine fixe Tabbar → vollen Viewport nutzen. */
@media (min-width: 641px) { .reading-pop { max-height: calc(100vh - 16px); } }
.reading-pop.is-show { opacity: 1; transform: translateY(0); }
.reading-pop__w { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.reading-pop__title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.reading-pop__meaning { font-size: 15px; color: var(--text); margin-bottom: 8px; }
.reading-pop__lemma { color: var(--text-muted); font-weight: 500; font-size: 14px; }
.reading-pop__note { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.reading-pop__sentence { font-size: 14px; color: var(--text-muted); font-style: italic; margin-bottom: 10px; line-height: 1.5; }
.reading-pop__grammar { font-size: 14px; color: var(--text); line-height: 1.55; }
.reading-pop__acts { display: flex; gap: 8px; margin-bottom: 8px; }
.reading-pop__say {
  min-width: 44px; min-height: 44px; border: 1px solid var(--border-strong); background: var(--surface-2);
  border-radius: 9px; font-size: 16px; cursor: pointer; color: var(--text);
}
.reading-pop__say:hover { background: var(--surface-hover); }
.reading-pop__addrow { display: flex; gap: 6px; flex-wrap: wrap; }
.reading-pop__add {
  flex: 1 1 auto; min-height: 44px; padding: 8px 10px; border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--text);
  border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.reading-pop__add:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.reading-pop__add:disabled { opacity: .6; cursor: default; }

/* Aufklappbarer „Grammatik dieses Satzes"-Abschnitt im Wort-Popup */
.reading-pop__gram { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.reading-pop__gramsum {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
  min-height: 44px; display: flex; align-items: center; list-style: none; user-select: none;
}
.reading-pop__gramsum::-webkit-details-marker { display: none; }
.reading-pop__gramsum::before { content: "▸ "; margin-right: 4px; }
.reading-pop__gram[open] .reading-pop__gramsum::before { content: "▾ "; }
.reading-pop__gram .reading-pop__grammar { margin-top: 4px; }

/* ===== Sentence Mining (i+1) ===== */
/* „📝 Satz minen" im Wort-Popup */
.reading-pop__minerow { margin-top: 8px; }
.reading-pop__mine {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--good); border-radius: 9px;
  background: color-mix(in srgb, var(--good) 12%, var(--surface)); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .12s;
}
.reading-pop__mine:hover { background: color-mix(in srgb, var(--good) 24%, var(--surface)); }
.reading-pop__mine:disabled { opacity: .6; cursor: default; }

/* Mining-Leiste über dem Text: Tageslimit-Pill + Batch-Button */
.reading-mine { margin: 10px 0 6px; }
.reading-mine__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reading-mine__pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--good) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border)); color: var(--text);
}
.reading-mine__pill.is-reached {
  background: color-mix(in srgb, var(--hard) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--hard) 45%, var(--border));
}
.reading-mine__batchbtn { font-size: 13px; }
.reading-mine__finder {
  margin-top: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--good) 30%, var(--border)); color: var(--text);
}

/* i+1-Satz im Text: grüne Markierung + „i+1"-Badge (bereit zum Minen) */
.reading__sent.is-i1 {
  background: color-mix(in srgb, var(--good) 9%, transparent);
  border-radius: 6px; box-shadow: inset 2px 0 0 var(--good);
  padding-left: 4px;
}
.reading__i1badge {
  display: inline-block; margin-right: 5px; padding: 1px 6px; border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: middle;
  background: var(--good); color: #fff;
}

/* Batch-Vorschau: KI-i+1-Sätze, Karte VOR dem Anlegen sichtbar */
.reading-mine__list { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.reading-mine__bhead { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.reading-mine__card {
  border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  background: var(--surface); display: flex; flex-direction: column; gap: 8px;
}
.reading-mine__card.is-done { opacity: .6; border-color: var(--good); }
.reading-mine__cardtop { display: flex; align-items: center; gap: 8px; }
.reading-mine__target { font-weight: 700; color: var(--accent); }
.reading-mine__i1 {
  padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700;
  background: var(--good); color: #fff;
}
.reading-mine__i1.is-near { background: var(--hard); }
.reading-mine__sent { font-size: 16px; line-height: 1.45; }
.reading-mine__tr { font-size: 13px; color: var(--text-muted); }
.reading-mine__acts { display: flex; align-items: center; gap: 8px; }
.reading-mine__say {
  min-height: 38px; min-width: 42px; border: 1px solid var(--border-strong);
  border-radius: 9px; background: var(--surface-2); font-size: 16px; cursor: pointer;
}
.reading-mine__say:hover { background: var(--surface-hover); }
.reading-mine__add { font-size: 13px; }
@media (max-width: 420px) {
  .reading-mine__batchbtn { flex: 1 1 100%; }
}

/* Schwebender „➕ Als Karte"-Knopf bei Text-Markierung */
.reading-selbtn {
  position: fixed; z-index: 90; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--accent); border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28); white-space: nowrap;
  opacity: 0; transform: translateY(4px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
}
.reading-selbtn.is-show { opacity: 1; transform: translateY(0) scale(1); }
.reading-selbtn:disabled { opacity: .7; cursor: default; }

/* ===== Globale Markier-Leiste (FlowSelToolbar) ===== */
.flowsel-bar {
  position: fixed; z-index: 95; display: flex; gap: 4px;
  padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  opacity: 0; transform: translateY(4px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
  max-width: calc(100vw - 16px); flex-wrap: wrap; justify-content: center;
}
.flowsel-bar.is-show { opacity: 1; transform: translateY(0) scale(1); }
.flowsel-bar__btn {
  min-height: 36px; padding: 6px 12px; border: none; border-radius: 999px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s ease;
}
.flowsel-bar__btn:hover { background: var(--surface-hover); }
.flowsel-bar__btn:disabled { opacity: .6; cursor: default; }
.flowsel-bar__btn--accent { color: #fff; background: var(--accent); }
.flowsel-bar__btn--accent:hover { background: var(--accent); filter: brightness(1.06); }
@media (max-width: 480px) {
  .flowsel-bar__btn { min-height: 44px; padding: 9px 14px; }  /* Touch >=44px */
}

/* ===== Fragen-Chat (Lookup-Container: Bottom-Sheet mobil / Pane desktop) ===== */
.flowsel-chat__backdrop {
  position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.34);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.flowsel-chat__backdrop.is-show { opacity: 1; }
.flowsel-chat {
  position: fixed; z-index: 120; display: flex; flex-direction: column;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
  /* Mobile: Bottom-Sheet */
  left: 0; right: 0; bottom: 0; max-height: 72vh;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%); transition: transform var(--dur) var(--ease);
}
.flowsel-chat.is-show { transform: translateY(0); }
@media (min-width: 641px) {
  /* Desktop: sticky Pane rechts */
  .flowsel-chat {
    left: auto; right: 16px; bottom: 16px; top: auto;
    width: 380px; max-height: min(560px, calc(100vh - 32px));
    border-radius: var(--r-lg);
    transform: translateY(12px); opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .flowsel-chat.is-show { transform: translateY(0); opacity: 1; }
}
.flowsel-chat__head {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.flowsel-chat__sel { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; }
.flowsel-chat__sel-lab { display: block; color: var(--text-muted); font-size: 12px; margin-bottom: 2px; }
.flowsel-chat__sel-val {
  display: block; font-weight: 600; overflow-wrap: anywhere;
  max-height: 3.2em; overflow: hidden;
}
.flowsel-chat__x {
  flex: none; width: 36px; height: 36px; min-height: 36px; border: none;
  border-radius: var(--r); background: transparent; color: var(--text-muted);
  font-size: 16px; cursor: pointer;
}
.flowsel-chat__x:hover { background: var(--surface-hover); color: var(--text); }
.flowsel-chat__sug {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px 0;
}
.flowsel-chat__chip {
  min-height: 32px; padding: 6px 12px; border: 1px solid var(--border-strong);
  border-radius: 999px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; cursor: pointer; transition: background .12s ease;
}
.flowsel-chat__chip:hover { background: var(--surface-hover); }
.flowsel-chat__log {
  flex: 1; overflow-y: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.flowsel-chat__bubble {
  max-width: 86%; padding: 9px 13px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap;
}
.flowsel-chat__bubble--user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.flowsel-chat__bubble--ai {
  align-self: flex-start; background: var(--surface-2); color: var(--text);
  border-bottom-left-radius: 4px;
}
.flowsel-chat__bubble.is-loading { color: var(--text-muted); }
.flowsel-chat__bubble.is-error { color: #C0392B; background: #FDECEA; }
.flowsel-chat__inrow {
  display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
}
.flowsel-chat__input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px;
}
.flowsel-chat__input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.flowsel-chat__send {
  flex: none; min-height: 44px; padding: 10px 18px; border: none;
  border-radius: var(--r); background: var(--accent); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.flowsel-chat__send:disabled { opacity: .6; cursor: default; }

/* 🤖 KI-Editor-Helfer — Inline-Mini-Chat im Karten-Editor (kein Sheet/Pane;
   lebt IM Editor-Modal-Body, damit „Übernehmen" in die LIVE Inputs schreibt). */
.kiedit {
  margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface-2); overflow: hidden;
  display: flex; flex-direction: column;
}
.kiedit__head { padding: 12px 14px 0; }
.kiedit__title { font-weight: 600; font-size: 14.5px; }
.kiedit__hint { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.kiedit__sug { padding: 10px 14px 0; }
.kiedit__log {
  flex: none; max-height: 340px; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.kiedit__inrow {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
/* Vorschlags-Karte: Feldname + alt → neu + Übernehmen. */
.kiedit__change {
  align-self: stretch; max-width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.kiedit__change.is-applied { opacity: .7; border-color: #1E8E5A; background: #E7F6EE; }
.kiedit__change-field {
  font-weight: 600; font-size: 12.5px; color: var(--accent);
  overflow-wrap: anywhere;
}
.kiedit__change-diff {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  font-size: 14px; line-height: 1.5;
}
.kiedit__old {
  color: #C0392B; text-decoration: line-through; overflow-wrap: anywhere;
  max-width: 100%;
}
.kiedit__arrow { color: var(--text-muted); flex: none; }
.kiedit__new {
  color: #1E8E5A; font-weight: 600; overflow-wrap: anywhere; max-width: 100%;
}
.kiedit__apply, .kiedit__applyall {
  align-self: flex-start; min-height: 44px; padding: 8px 16px;
}
.kiedit__apply:disabled { opacity: 1; background: #1E8E5A; cursor: default; }
.kiedit__allrow { align-self: stretch; }

@media (max-width: 480px) {
  /* line-height 2.4 → Zeilenbox ~43px: schafft Platz für die unsichtbare
     Tap-Fläche (WCAG 2.5.5 Touch-Target ≥44px) OHNE dass sich die Tap-Zonen
     benachbarter Zeilen überlappen. */
  .reading__text { font-size: 18px; line-height: 2.4; }
  /* Unsichtbarer Hit-Slop: vergrößert die Tap-Fläche jedes Wort-Spans vertikal
     auf ~42px, bleibt aber innerhalb der eigenen Zeilenbox (kein Overlap). */
  .reading__w::after {
    content: ""; position: absolute; inset: -12px -2px; z-index: 1;
  }
  .reading__opts { flex-direction: column; }
  .reading__field { min-width: 0; }
}

/* ============ In-App-Login-Overlay ============ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.login-overlay[hidden] { display: none; }
.login-card {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 26px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.login-card__title { margin: 0; font-size: 24px; font-weight: 700; color: var(--text); }
.login-card__sub { margin: 0; font-size: 14px; color: var(--text-muted); }
.login-card__field { display: flex; flex-direction: column; gap: 6px; }
.login-card__label { font-size: 13px; font-weight: 600; color: var(--text); }
.login-card__input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--bg); color: var(--text); font-size: 15px;
}
.login-card__input:focus-visible { border-color: var(--primary); }
.login-card__remember {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text); cursor: pointer;
}
.login-card__error { margin: 0; font-size: 13px; color: #d92d20; font-weight: 600; }
.login-card__error[hidden] { display: none; }
.login-card__submit { width: 100%; margin-top: 4px; }

.account__hint { font-size: 14px; color: var(--text-muted); margin: 0 0 12px; }
.account__hint[hidden] { display: none; }
#account-session[hidden] { display: none; }

/* ===================================================================
   COACH-ARCHIV — „Meine Gespräche" (Muster-Panel + Verlauf + Detail)
   =================================================================== */
.arch-patterns {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin: 0 0 22px;
}
.arch-pat__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.arch-pat__title { font-size: 16px; font-weight: 700; margin: 0; color: var(--text); }
.arch-pat__sub { font-size: 12px; color: var(--text-muted); }
.arch-pat { margin-bottom: 8px; }
.arch-pat:last-child { margin-bottom: 0; }
.arch-pat__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: none; padding: 6px 4px; cursor: pointer; text-align: left;
  border-radius: 8px;
}
.arch-pat__row:hover { background: var(--surface-hover); }
.arch-pat__row--noex { cursor: default; }
.arch-pat__row--noex:hover { background: none; }
.arch-pat__cat { flex: 0 0 38%; max-width: 38%; font-size: 14px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-pat__track { flex: 1 1 auto; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.arch-pat__fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; min-width: 4px; }
.arch-pat__num { flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--text-muted); min-width: 20px; text-align: right; }
.arch-pat__ex { padding: 4px 4px 8px 8px; display: flex; flex-direction: column; gap: 6px;
  border-left: 2px solid var(--border); margin: 2px 0 6px 8px; }
.arch-pat__ex[hidden] { display: none; }
.arch-pat__exline { font-size: 13px; }
/* „Üben"-Knopf (🎯): gezielte Lese-Übung zu dieser Fehler-Kategorie. */
.arch-pat__practice {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  margin: 2px 0 6px 8px; min-height: 44px; padding: 6px 14px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.arch-pat__practice:hover { background: color-mix(in srgb, var(--accent) 20%, transparent);
  border-color: var(--accent); }

/* Fokus-Banner im Lese-Modus (gezielte Übung aus den eigenen Fehlern). */
.reading-focus {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
}
.reading-focus[hidden] { display: none; }
.reading-focus__txt { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; }
.reading-focus__txt strong { color: var(--accent); font-weight: 700; }
.reading-focus__sub { color: var(--text-muted); font-weight: 500; }
.reading-focus__clear {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1; border-radius: 8px;
}
.reading-focus__clear:hover { background: var(--surface-hover); color: var(--text); }

.arch-list__head { font-size: 15px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.arch-list { display: flex; flex-direction: column; gap: 8px; }
.arch-list__bar { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.arch-list__new { white-space: nowrap; }
.arch-item {
  display: flex; align-items: stretch; gap: 6px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px 8px 6px 6px; transition: border-color .12s, background .12s;
}
.arch-item:hover { border-color: var(--primary); background: var(--surface-hover); }
.arch-item__main {
  flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
  background: transparent; border: 0; padding: 6px 6px 6px 8px; color: inherit; font: inherit;
}
.arch-item__title {
  font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--text); margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arch-item__acts { display: flex; flex-direction: column; gap: 4px; justify-content: center; flex: 0 0 auto; }
.arch-item__act {
  cursor: pointer; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; padding: 4px 8px;
  font-size: 12px; font-weight: 600; line-height: 1.2; transition: border-color .12s, background .12s;
}
.arch-item__act:hover { border-color: var(--primary); background: var(--surface-hover); }
.arch-item__act--danger:hover { border-color: var(--again); color: var(--again); }
.arch-item__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; margin-bottom: 5px; }
.arch-item__date { color: var(--text-muted); font-weight: 600; }
.arch-item__lang, .arch-item__mode {
  background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 1px 9px; font-weight: 600;
}
.arch-item__corr { color: var(--again); font-weight: 700; }
.arch-item__topic { font-size: 14px; line-height: 1.4; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Detail-Modal: Transkript-Bubbles + Kategorie-Tag */
.arch-detail__head { margin-bottom: 10px; }
.arch-detail__sub { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.arch-transcript { display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow-y: auto;
  padding: 2px; margin-top: 4px; }
.arch-bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; }
.arch-bubble--user { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-bottom-right-radius: 4px; }
.arch-bubble--coach { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: 4px; }
.cr-corr__tag {
  display: inline-block; margin: 4px 0 0 30px; font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted); border-radius: 999px; padding: 1px 8px;
}

/* ====================================================================== */
/* ✨ MIT MEINEN WÖRTERN — Auswahl-Fenster (im globalen Modal/Bottom-Sheet) */
/* ====================================================================== */

/* Eintrags-Knopf in der Modus-Leiste — dezent betont wie der Story-Knopf. */
.chatmode--words { color: var(--primary); margin-left: 4px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)); }
.chatmode--words:hover { background: color-mix(in srgb, var(--primary) 9%, var(--surface)); }

/* FSRS-Werten-Knopf im Header (nur sichtbar im wordchat-Modus). */
.chat__fsrs { color: var(--primary); }

.wsheet { display: flex; flex-direction: column; gap: 14px; }
.wsheet__lab { font-size: 13px; font-weight: 700; color: var(--text-muted);
  letter-spacing: .01em; margin-bottom: -4px; }
.wsheet__field { display: flex; flex-direction: column; gap: 8px; }
.wsheet__field[hidden] { display: none; }

/* Modus-Kacheln (Gespräch / Geschichte) — 2 große, klare Wahlflächen. */
.wsheet__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wsheet__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 14px; min-height: 88px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--r-lg); transition: border-color .12s, background .12s;
}
.wsheet__tile:hover { border-color: var(--border-strong); }
.wsheet__tile.is-on { border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.wsheet__tileic { font-size: 22px; line-height: 1; }
.wsheet__tiletit { font-size: 15px; font-weight: 700; color: var(--text); }
.wsheet__tilesub { font-size: 11.5px; color: var(--text-muted); line-height: 1.25; }

/* Segmente / Chips: verständliche Wahl statt nackter Dropdowns. */
.wsheet__seg { display: flex; flex-wrap: wrap; gap: 8px; }
.wsheet__segbtn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600;
  min-height: 44px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--border);
  transition: border-color .12s, background .12s, color .12s;
}
.wsheet__segbtn:hover { border-color: var(--border-strong); }
.wsheet__segbtn.is-on { border-color: var(--primary); color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }

/* Zeiten-Übung: Schalter-Zeile. */
.wsheet__switchrow { display: flex; align-items: center; }
.wsheet__switch { display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text); min-height: 44px; }
.wsheet__switch input { width: 18px; height: 18px; accent-color: var(--primary); }

/* Großer Start-Knopf (im Modal-Footer). */
.wsheet__start { width: 100%; min-height: 50px; font-size: 16px; }

/* Bestätigungs-Chips: gewählte Wörter, tippen zum Entfernen. */
.wsheet--confirm { gap: 12px; }
.wsheet__status { display: flex; align-items: center; gap: 10px; color: var(--text-muted);
  font-size: 14px; padding: 14px 0; }
.wsheet__empty { color: var(--text-muted); font-size: 14px; line-height: 1.4; padding: 8px 0; }
.wsheet__chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 38vh; overflow-y: auto; }
.wsheet__chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; min-height: 40px; padding: 6px 10px 6px 14px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary); border: 1.5px solid color-mix(in srgb, var(--primary) 35%, var(--border));
  border-radius: 999px; transition: background .12s, border-color .12s, opacity .12s;
}
.wsheet__chip:hover { background: color-mix(in srgb, var(--again, #ef4444) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--again, #ef4444) 45%, var(--border));
  color: var(--again, #ef4444); }
.wsheet__chipx { font-size: 17px; line-height: 1; opacity: .7; }
.wsheet__hint { font-size: 12.5px; color: var(--text-muted); margin: 0; }

/* Zielwort-Hervorhebung in der Geschichte (fett, dezent eingefärbt). */
.story-target { font-weight: 800; color: var(--primary); }

/* FSRS-Rückkanal — Häkchen-Liste (transparent, nie automatisch). */
.fsrs { display: flex; flex-direction: column; gap: 12px; }
.fsrs__intro { font-size: 14.5px; color: var(--text); line-height: 1.4; margin: 0; }
.fsrs__list { display: flex; flex-direction: column; gap: 2px; max-height: 46vh; overflow-y: auto; }
.fsrs__row { display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 10px 8px; border-radius: var(--r-md, 10px); min-height: 44px; }
.fsrs__row:hover { background: var(--surface-hover); }
.fsrs__row input { width: 18px; height: 18px; accent-color: var(--primary); flex: 0 0 auto; }
.fsrs__word { font-size: 15px; color: var(--text); }
.fsrs__tr { color: var(--text-muted); font-weight: 400; }
.fsrs__note { font-size: 12px; color: var(--text-muted); margin: 0; }

/* Mobil: Auswahl-Fenster als echtes Bottom-Sheet — nur wenn das Modal eine
   .wsheet (oder .fsrs) enthält (:has), sonst bleibt das Modal app-weit zentriert. */
@media (max-width: 560px) {
  .wsheet__tiles { gap: 8px; }
  .wsheet__tile { min-height: 80px; padding: 12px; }
  .modal:has(.wsheet) , .modal:has(.fsrs) { place-items: end center; padding: 0; }
  .modal:has(.wsheet) .modal__card,
  .modal:has(.fsrs) .modal__card {
    max-width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg);
    max-height: 92dvh;
  }
}

/* ===================================================================
   ONBOARDING — Erststart, ruhige Vollbild-Schritte (Duolingo/Busuu-Muster)
   Je Schritt: 1 Frage, große antippbare Kacheln, Fortschrittspunkte,
   Überspringen jederzeit, warmer Ton. Greift nie in Lern-Daten ein.
   =================================================================== */
.onb {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column;
  background: var(--bg);
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  animation: onb-fade .28s var(--ease, ease) both;
}
.onb[hidden] { display: none; }
@keyframes onb-fade { from { opacity: 0; } to { opacity: 1; } }

.onb__inner {
  width: 100%; max-width: 460px; margin: 0 auto;
  flex: 1 1 auto; display: flex; flex-direction: column;
}

/* Kopfzeile: Fortschrittspunkte + Überspringen */
.onb__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 0 22px;
}
.onb__dots { display: flex; gap: 8px; }
.onb__dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--border-strong);
  transition: background var(--dur, .18s) var(--ease, ease), width var(--dur, .18s) var(--ease, ease);
}
.onb__dot.is-active { background: var(--primary); width: 22px; }
.onb__dot.is-done { background: color-mix(in srgb, var(--primary) 50%, var(--border-strong)); }
.onb__skip {
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted);
  padding: 8px 6px; border-radius: 8px; min-height: 40px;
}
.onb__skip:hover { color: var(--text); }

/* Schritt-Körper: animierter Ein-/Auswechsel */
.onb__step { flex: 1 1 auto; display: flex; flex-direction: column; }
.onb__step--enter { animation: onb-slide .3s var(--ease, ease) both; }
@keyframes onb-slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.onb__emoji { font-size: 40px; line-height: 1; margin: 6px 0 14px; }
.onb__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; color: var(--text); letter-spacing: -.01em; line-height: 1.25; }
.onb__sub { margin: 0 0 22px; font-size: 15px; color: var(--text-muted); line-height: 1.45; }

/* Kachel-Raster — große, antippbare Optionen */
.onb__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.onb__grid--one { grid-template-columns: 1fr; }
.onb__tile {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 14px 16px; text-align: left;
  border: 1.5px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur, .18s) var(--ease, ease), background var(--dur, .18s) var(--ease, ease), transform var(--dur, .18s) var(--ease, ease);
}
.onb__tile:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.onb__tile:active { transform: scale(.985); }
.onb__tile.is-sel {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.onb__tile-emoji { font-size: 24px; line-height: 1; flex: 0 0 auto; }
.onb__tile-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onb__tile-lab { line-height: 1.2; }
.onb__tile-meta { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.onb__tile-check {
  margin-left: auto; flex: 0 0 auto; font-size: 15px; color: var(--primary);
  opacity: 0; transition: opacity var(--dur, .18s) var(--ease, ease);
}
.onb__tile.is-sel .onb__tile-check { opacity: 1; }

/* Hinweiszeile (z.B. „ca. X Karten/Tag") */
.onb__note {
  margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r);
  background: var(--surface-2); color: var(--text-muted);
  font-size: 13.5px; line-height: 1.45;
}
.onb__note strong { color: var(--text); font-weight: 700; }

/* Abschluss-Übersicht */
.onb__summary { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 4px; }
.onb__sumrow {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
}
.onb__sumrow-emoji { font-size: 22px; flex: 0 0 auto; }
.onb__sumrow-txt { display: flex; flex-direction: column; gap: 2px; }
.onb__sumrow-lab { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.onb__sumrow-val { font-size: 15px; font-weight: 700; color: var(--text); }

/* Fußzeile: Weiter / Los geht's */
.onb__foot { padding-top: 22px; margin-top: auto; }
.onb__cta { width: 100%; }
.onb__back {
  display: block; width: 100%; margin-top: 10px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-muted);
  padding: 10px; border-radius: 8px; min-height: 40px;
}
.onb__back:hover { color: var(--text); }

@media (max-width: 380px) {
  .onb__title { font-size: 22px; }
  .onb__grid { gap: 10px; }
  .onb__tile { min-height: 58px; padding: 12px 14px; }
}

/* ===================================================================
   FREIHAND-/AUTO-MODUS — augenfreies Overlay (großer Start/Stop, klarer
   Status). Minimal + zentriert, hoher Kontrast, auf einen Blick erfassbar.
   Audio trägt den Flow; der Schirm ist nur Glance-Bestätigung. In der grade-Phase
   wandert das Overlay nach oben (.automode.is-grading), damit die unten gepinnten
   Grade-Buttons frei + antippbar bleiben → Glance-Korrektur.
   =================================================================== */
.automode__entry {
  margin: 12px auto 0; display: block; width: 100%; max-width: 320px;
  font-size: 15px; font-weight: 600;
  color: var(--text-muted);
}
.automode__entry:hover { color: var(--text); }
.prac-tile--auto .prac-tile__ic { filter: none; }

/* Overlay-Karte: fixiert unten-mittig, schwebt über dem Footer. In der grade-Phase
   nach oben verschoben (.automode.is-grading), damit die unten gepinnten Eases nicht
   verdeckt werden (Glance-Korrektur, Finding 5). */
.automode {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 60; width: calc(100% - 28px); max-width: 420px;
}
.automode[hidden] { display: none; }

/* Glance-Korrektur: in der grade-Phase sind die Ease-Buttons (.quiz__foot, unten
   gepinnt über der Tabbar) sichtbar. Das bottom-fixierte Overlay läge sonst exakt
   DARÜBER und blockierte die Taps (Finding 5). Darum in der grade-Phase nach OBEN
   ankern (direkt unter die Kopfleiste) — der gesamte untere Bereich (Eases +
   Tabbar) bleibt frei und antippbar. */
.automode.is-grading {
  bottom: auto; top: calc(var(--nav-h, 63px) + 8px);
}
.automode__inner {
  position: relative;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 18px; box-shadow: var(--shadow-2);
  padding: 18px 18px 16px; text-align: center;
}
.automode.is-running .automode__inner { border-color: color-mix(in srgb, var(--primary) 45%, var(--border-strong)); }
.automode.is-paused  .automode__inner { border-color: var(--hard); }

.automode__close {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 17px; line-height: 1; border-radius: 8px;
}
.automode__close:hover { background: var(--surface-2); color: var(--text); }

.automode__title { font-size: 14px; font-weight: 700; color: var(--text-muted); letter-spacing: .02em; }

/* Status-Zeile: Punkt (Phasen-Farbe) + großer, gut lesbarer Text. */
.automode__status { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.automode__state { font-size: 22px; font-weight: 700; color: var(--text); }
.automode__dot {
  width: 13px; height: 13px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-muted);
}
.automode__dot.is-prompt { background: var(--easy); }
.automode__dot.is-listen { background: var(--again); animation: automode-pulse 1.1s ease-in-out infinite; }
.automode__dot.is-think  { background: var(--hard); }
.automode__dot.is-grade  { background: var(--good); }
.automode__dot.is-paused { background: var(--hard); }
.automode__dot.is-idle   { background: var(--text-muted); }
@keyframes automode-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--again) 60%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--again) 0%, transparent); }
}

/* Aktuelle Karte / Cue (dezent) + Ergebnis (farbig). */
.automode__cue { margin-top: 4px; font-size: 13px; color: var(--text-muted); min-height: 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.automode__result { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--text-muted); min-height: 20px; }
.automode__result.is-correct { color: var(--good); }
.automode__result.is-close   { color: var(--hard); }
.automode__result.is-wrong   { color: var(--again); }
.automode__result.is-skip    { color: var(--text-muted); }

.automode__controls { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.automode__main { min-width: 160px; }
.automode__stopbtn { min-height: 52px; }
.automode__stopbtn[hidden] { display: none; }

.automode__speed { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; }
.automode__speed-lab { font-size: 12px; color: var(--text-muted); min-width: 78px; text-align: right; }
.automode__speed input[type="range"] { flex: 1; max-width: 180px; accent-color: var(--primary); }

.automode__hint { margin: 12px 2px 0; font-size: 12px; line-height: 1.45; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .automode__dot.is-listen { animation: none; }
}
@media (max-width: 390px) {
  .automode { bottom: 12px; width: calc(100% - 18px); }
  .automode__inner { padding: 16px 14px 14px; border-radius: 16px; }
  .automode__state { font-size: 20px; }
  .automode__main { min-width: 140px; }
}

/* ============ VIDEO MINEN (Sentence Mining Teil 2) ============ */
/* Mobil-first (390px), Desktop skaliert. Flow: Quelle → Fortschritt → Transkript
   (i+1 grün) → Karten-Vorschau. Reuse: .seg/.btn/.reading-mine__pill/__finder. */

.view--video { gap: 14px; }

/* Quelle (URL/Upload) */
.vid-src { display: flex; flex-direction: column; gap: 12px; }
.vid-src__seg { align-self: flex-start; }
.vid-src__panel { display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.vid-field { display: flex; flex-direction: column; gap: 5px; }
.vid-field__lbl { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.vid-field__sel { font: inherit; font-size: 15px; padding: 9px 10px; min-height: 44px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.vid-url-row { display: flex; gap: 8px; align-items: stretch; }
.vid-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 15px; padding: 11px 12px; min-height: 44px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 10px; }
.vid-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.vid-go { white-space: nowrap; min-height: 44px; }
.vid-file { display: flex; flex-direction: column; gap: 5px; font-size: 14px; }
.vid-file__lbl { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.vid-file input[type="file"] { font: inherit; font-size: 14px; padding: 8px 0; }
.vid-hint { font-size: 12.5px; color: var(--text-muted); margin: 0; line-height: 1.45; }

/* Tageslimit-Leiste */
.vid-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vid-bar__title { font-size: 13.5px; color: var(--text-muted); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }

/* Fortschritt (Hintergrund-Job) */
.vid-progress { display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.vid-progress__spin { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent); animation: vid-spin .8s linear infinite; }
@keyframes vid-spin { to { transform: rotate(360deg); } }
.vid-progress__txt { font-size: 14.5px; font-weight: 600; color: var(--text); }
@media (prefers-reduced-motion: reduce) { .vid-progress__spin { animation: none; } }

/* Status/Fehler */
.vid-status { font-size: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.vid-status--error { border-color: #d9534f55; background: #d9534f14; color: #b02a26; }
@media (prefers-color-scheme: dark) { .vid-status--error { color: #f3a6a3; } }

.vid-finder { margin: 0; }

/* Filter + Batch */
.vid-filter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vid-batch { min-height: 40px; }

/* Transkript */
.vid-transcript { display: flex; flex-direction: column; gap: 8px; }
.vid-empty { color: var(--text-muted); font-size: 14px; text-align: center; padding: 18px 0; margin: 0; }
.vid-cue { display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 12px; }
.vid-cue.is-i1 { border-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--surface)); }
.vid-cue.is-done { opacity: .6; }
.vid-cue__time { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600;
  color: var(--text-muted); padding-top: 2px; min-width: 38px; }
.vid-cue__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.vid-cue__sent { font-size: 15px; line-height: 1.5; color: var(--text); word-break: break-word; }
.vid-cue__meta { display: flex; gap: 6px; flex-wrap: wrap; }
.vid-cue__badge { font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.vid-cue__badge.is-known { background: var(--surface-2); color: var(--text-muted); }
.vid-cue__badge.is-near { background: #f6b73c22; color: #b45309; }
.vid-cue__badge.is-hard { background: var(--surface-2); color: var(--text-muted); }
.vid-cue__acts { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.vid-cue__mine { min-height: 40px; white-space: nowrap; padding: 0 12px; }
.vid-cue__play { min-height: 40px; min-width: 44px; padding: 0 10px; font-size: 16px; line-height: 1; }
.vid-cue__nohint { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.vid-cue__done { font-size: 13px; font-weight: 600; color: var(--good); white-space: nowrap; }
.vid-target { background: color-mix(in srgb, var(--good) 30%, transparent); color: inherit;
  font-weight: 700; border-radius: 4px; padding: 0 2px; }

/* Karten-Vorschau (Overlay) */
.vid-preview { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.45); }
.vid-preview[hidden] { display: none; }
.vid-pv__head { display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.vid-preview__card, .vid-pv__card { width: 100%; max-width: 440px; max-height: 88dvh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; padding: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.vid-pv__close { appearance: none; border: 0; background: var(--surface-2); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; font-size: 16px; color: var(--text); }
.vid-pv__thumb { display: flex; align-items: center; gap: 10px; padding: 12px;
  background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: 12px; }
.vid-pv__thumb-ic { font-size: 22px; flex: 0 0 auto; }
.vid-pv__thumb-txt { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }
.vid-pv__media { display: flex; flex-direction: column; gap: 10px; }
.vid-pv__img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border); }
.vid-pv__audio { width: 100%; height: 40px; }
.vid-pv__meaning { font-size: 14px; color: var(--text); }
.vid-pv__trans { font-size: 14px; color: var(--text-muted); font-style: italic; line-height: 1.5; }
.vid-pv__front { font-size: 18px; line-height: 1.55; color: var(--text); font-weight: 500; }
.vid-pv__sub { font-size: 13px; color: var(--text-muted); }
.vid-pv__opts { display: flex; flex-direction: column; gap: 8px; }
.vid-pv__check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; min-height: 36px; }
.vid-pv__acts { display: flex; gap: 10px; justify-content: flex-end; }
.vid-pv__acts .btn { min-height: 44px; }

@media (max-width: 430px) {
  .vid-url-row { flex-direction: column; }
  .vid-go { width: 100%; }
  .vid-bar__title { max-width: 100%; }
  .vid-cue { flex-wrap: wrap; }
  .vid-cue__acts { width: 100%; justify-content: flex-end; }
}

/* ===================================================================
   LEMMA-EXPLORER (Welle F / F2) — Overlay nutzt die .modal-Konvention.
   Mobil-first, Dark-Mode via Variablen, Touch-Targets >=44px, SVG-Icons.
   =================================================================== */
.lemma-card { max-width: 560px; }
.lemma-body { gap: 16px; }
.lemma-modal .modal__x svg,
.lemma-modal .lemma-iconbtn svg { width: 20px; height: 20px; }

/* Erklär-Block: wofür ist die Wortfamilien-Ansicht? */
.lemma-intro { background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px; }
.lemma-intro__lead { margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--text); }
.lemma-intro__use { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }

/* Steuerzeile: Sprache · Wort · Anzeigen. Mobil umbruchfähig. */
.lemma-ctrl { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.lemma-ctrl__lang { flex: 0 0 auto; min-width: 120px; min-height: 44px; }
.lemma-ctrl__word { flex: 1 1 140px; min-width: 0; min-height: 44px; }
.lemma-ctrl__go { flex: 0 0 auto; min-height: 44px; }

/* Lemma-Kopf: Grundform groß + Vorlese-Knopf. */
.lemma-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 14px 16px; }
.lemma-head__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lemma-head__label { font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); }
.lemma-head__lemma { font-size: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--text);
  word-break: break-word; }
.lemma-iconbtn { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text-muted); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); }
.lemma-iconbtn:hover { background: var(--surface-hover); color: var(--text); }

/* Quellen-Badge. */
.lemma-badge { display: inline-block; align-self: flex-start; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border); }
.lemma-badge--simplemma { background: rgba(79,140,255,.14); color: var(--primary); border-color: transparent; }
.lemma-badge--override { background: rgba(246,183,60,.16); color: var(--gold); border-color: transparent; }

/* Flexionen-Liste + Chips. */
.lemma-forms__head { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.lemma-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lemma-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px;
  padding: 4px 6px 4px 12px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--text); font-size: 15px; }
.lemma-chip.is-current { background: rgba(79,140,255,.16); border-color: var(--primary); font-weight: 600; }
.lemma-chip.is-lemma { background: rgba(246,183,60,.16); border-color: var(--gold); font-weight: 600; }
.lemma-chip__t { word-break: break-word; }
.lemma-chip__say { width: 30px; height: 30px; min-width: 30px; display: grid; place-items: center;
  border-radius: 999px; background: none; border: none; cursor: pointer; color: var(--text-muted);
  padding: 0; }
.lemma-chip__say svg { width: 16px; height: 16px; }
.lemma-chip__say:hover { color: var(--primary); }

/* Aktions-Knopf (alle bekannt). */
.lemma-actions { display: flex; }
.lemma-actions__know { width: 100%; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; }
.lemma-actions__ico { width: 18px; height: 18px; }

/* Gruppieren-Sektion (aufklappbar). */
.lemma-group { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.lemma-group__sum { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 14px; min-height: 44px; font-weight: 600; color: var(--text);
  background: var(--surface-2); user-select: none; }
.lemma-group__sum::-webkit-details-marker { display: none; }
.lemma-group__ico { width: 18px; height: 18px; color: var(--text-muted); }
.lemma-group__inner { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lemma-group__ta { width: 100%; resize: vertical; min-height: 84px; line-height: 1.45; box-sizing: border-box; }
.lemma-group__row { display: flex; gap: 8px; flex-wrap: wrap; }
.lemma-group__row .btn { min-height: 44px; }
.lemma-group__note { font-size: 13px; color: var(--text-muted); }
.lemma-group__out { display: flex; flex-direction: column; gap: 12px; }

/* Familien-Karte im Gruppieren-Resultat. */
.lemma-fam { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 14px;
  background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.lemma-fam__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lemma-fam__lemma { font-size: 17px; font-weight: 700; color: var(--text); word-break: break-word; }
.lemma-fam__count { font-size: 12px; color: var(--text-muted); flex: 0 0 auto; }
.lemma-fam__know { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }

/* Zustände. */
.lemma-loading, .lemma-error, .lemma-empty { font-size: 14px; color: var(--text-muted); padding: 6px 0; }
.lemma-error { color: var(--hard, #e5484d); }

@media (max-width: 480px) {
  .lemma-ctrl__lang { flex: 1 1 100%; }
  .lemma-head__lemma { font-size: 21px; }
}