/* css/hskReaderV2.v1.css
   Sprechnetz-HSK_deploy — V2-Reader, Layout-Mechanik nach dem Vorbild von
   enlight-com_deploy/studium/read-v2.html (reader.css/ui-v2.css):
   sticky Topbar mit Buch/Sektion-Dropdowns + Prev/Next, main+aside-Split
   (Detail-Panel rechts, Desktop sticky / Mobil Bottom-Sheet).
   Eigenständige Datei — hskReader.v1.css (klassische UI, read.html) bleibt
   unverändert bestehen.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  --v2-bg:       var(--sn-k-bg, #f6f1e8);
  --v2-bg2:      var(--sn-k-card, #fdfaf5);
  --v2-fg:       var(--sn-k-text, #241c12);
  --v2-fg2:      var(--sn-k-muted, #6a5a48);
  --v2-line:     var(--sn-k-border, #e3d8c6);
  --v2-card:     var(--sn-k-card, #fffdf9);
  --v2-accent:   var(--sn-k-accent, #a13a24);
  --v2-accent-s: var(--sn-k-accent-s, #f3d9cd);
  --v2-ok:       var(--sn-k-ok, #16a34a);
  --v2-ok-s:     var(--sn-k-ok-s, #d1fae5);
  --v2-err:      var(--sn-k-err, #dc2626);
  --v2-err-s:    var(--sn-k-err-s, #fee2e2);
  --v2-female:   #b23a72;
  --v2-female-s: #f8d9e8;
  --v2-male:     #2f5fa8;
  --v2-male-s:   #d8e4f7;
  --v2-serif:    "Iowan Old Style", "Palatino Linotype", "Songti SC", Georgia, serif;
  --v2-font-zh:  "Noto Sans SC", "Noto Sans", system-ui, sans-serif;
  --v2-touch:    40px;
  --v2-zoom:     1;
}
[data-theme="dark"] {
  --v2-bg: #1a1a1e; --v2-bg2: #222226; --v2-fg: #e8e6e2; --v2-fg2: #a8a29a;
  --v2-line: #3a3a42; --v2-card: #242428; --v2-accent-s: #3a2119;
  --v2-ok-s: #052e16; --v2-err-s: #450a0a;
  --v2-female: #f3a0c8; --v2-female-s: #3d1f2e;
  --v2-male: #92bdf0; --v2-male-s: #1c2c42;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --v2-bg: #1a1a1e; --v2-bg2: #222226; --v2-fg: #e8e6e2; --v2-fg2: #a8a29a;
    --v2-line: #3a3a42; --v2-card: #242428; --v2-accent-s: #3a2119;
    --v2-ok-s: #052e16; --v2-err-s: #450a0a;
    --v2-female: #f3a0c8; --v2-female-s: #3d1f2e;
    --v2-male: #92bdf0; --v2-male-s: #1c2c42;
  }
}

* { box-sizing: border-box; }
/* UA-Stylesheets geben <button> (und Formularelemente allgemein) eine eigene
   Standard-Textfarbe, die NICHT automatisch der geerbten CSS color folgt.
   Ohne diesen Reset blieb jeder Button-Text schwarz — im Light Mode zufällig
   unauffällig, im Dark Mode aber schwarz auf dunklem Grund und unlesbar. */
button, input, select, textarea { color: inherit; font: inherit; }
body {
  margin: 0;
  background: linear-gradient(165deg, var(--v2-bg), var(--v2-bg2) 60%, var(--v2-bg));
  color: var(--v2-fg);
  font-family: var(--v2-serif);
  line-height: 1.6;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.v2-topBar { position: sticky; top: 0; z-index: 20; background: rgba(253,250,245,.94); backdrop-filter: blur(6px); }
[data-theme="dark"] .v2-topBar { background: rgba(24,24,28,.94); }
.v2-top {
  border-bottom: 1px solid var(--v2-line);
  padding: 10px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.v2-home {
  color: var(--v2-fg2); text-decoration: none; font-weight: 700; font-size: 14px;
  border: 1px solid var(--v2-line); border-radius: 50px; padding: 7px 14px; background: var(--v2-card);
}
.v2-home:hover { background: var(--v2-accent-s); }
.v2-sp { flex: 1; }
.v2-divider { width: 1px; align-self: stretch; min-height: 20px; background: var(--v2-line); margin: 0 2px; }
@media (max-width: 880px) { .v2-divider { display: none; } }

.v2-nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.v2-nav select {
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--v2-fg); background: var(--v2-card);
  max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
  border: 1px solid var(--v2-line); border-radius: 50px; padding: 6px 12px; cursor: pointer;
}
.v2-nav button {
  border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 50px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800; color: var(--v2-fg2);
  width: var(--v2-touch); height: var(--v2-touch); line-height: 1;
}
.v2-nav button:hover:not(:disabled) { background: var(--v2-accent-s); color: var(--v2-accent); }
.v2-nav button:disabled { opacity: .35; cursor: default; }

.v2-toolBtn {
  border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 50px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--v2-fg2);
  padding: 0 14px; height: var(--v2-touch);
}
.v2-toolBtn:hover { background: var(--v2-accent-s); color: var(--v2-accent); }
.v2-toolBtn.on { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }

.v2-zoomCtl { display: inline-flex; border: 1px solid var(--v2-line); border-radius: 50px; overflow: hidden; }
.v2-zoomCtl button {
  border: none; background: var(--v2-card); font-family: inherit; font-size: 13px; font-weight: 800;
  padding: 0 12px; height: var(--v2-touch); cursor: pointer; color: var(--v2-fg2);
}
.v2-zoomCtl button:hover { background: var(--v2-accent-s); }

.v2-srOnly {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.v2-langSel {
  font-family: inherit; font-size: 13px; border: 1px solid var(--v2-line); border-radius: 50px;
  padding: 6px 12px; background: var(--v2-card); color: var(--v2-fg); cursor: pointer;
}

.v2-themeToggle {
  border: 1px solid var(--v2-line); background: var(--v2-card); border-radius: 50%;
  width: var(--v2-touch); height: var(--v2-touch); cursor: pointer; font-size: 16px;
}

@media (max-width: 880px) {
  .v2-top { padding: 7px 10px; gap: 5px 6px; }
  .v2-home { padding: 5px 11px; font-size: 13px; }
  .v2-nav select { padding: 5px 9px; font-size: 13px; max-width: 34vw; }
  .v2-nav button { width: 28px; height: 28px; font-size: 13px; }
  .v2-toolBtn { font-size: 11px; padding: 0 8px; height: 28px; }
  .v2-zoomCtl button { height: 28px; padding: 0 9px; }
}

/* ── Layout: main + aside ───────────────────────────────────────────────── */
.v2-wrap { display: flex; max-width: 1280px; margin: 0 auto; align-items: flex-start; }
.v2-main { flex: 1; min-width: 0; padding: 16px 18px 120px; zoom: var(--v2-zoom); }
.v2-aside {
  width: 380px; flex: 0 0 380px; position: sticky; top: 62px; align-self: flex-start;
  height: calc(100vh - 62px); overflow: auto; overscroll-behavior: contain;
  border-left: 1px solid var(--v2-line); background: var(--v2-bg2);
  padding: 22px 22px 60px;
}

.v2-dl-empty { color: var(--v2-fg2); font-size: 14px; line-height: 1.7; }
.v2-dl-empty b { display: block; margin-bottom: 8px; color: var(--v2-fg); }
.v2-dl-close { display: none; position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 26px; line-height: 1; color: var(--v2-fg2); cursor: pointer; }
.v2-dl-handle { display: none; width: 52px; height: 5px; background: var(--v2-fg2); border-radius: 3px; opacity: .55; margin: 2px auto 14px; }
.v2-detail-backdrop { display: none; position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,.32); }

@media (max-width: 880px) {
  .v2-wrap { flex-direction: column; }
  .v2-topBar { position: fixed; left: 0; right: 0; top: 0; }
  .v2-wrap { padding-top: var(--v2-top-h, 120px); }
  .v2-aside {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto;
    height: min(var(--v2-sheet-height, 72vh), calc(100vh - var(--v2-top-h, 120px))); max-height: calc(100vh - var(--v2-top-h, 120px)); min-height: 58px;
    border-left: none; border-top: 1px solid var(--v2-line); border-bottom: none; background: var(--v2-bg2);
    box-shadow: 0 -10px 30px rgba(80,50,20,.14); transform: translateY(105%); transition: transform .25s;
    border-radius: 18px 18px 0 0; z-index: 30;
  }
  .v2-aside.open { transform: translateY(0); }
  .v2-aside.open.v2-aside--compact { transform: translateY(calc(100% - 58px)); }
  .v2-dl-close { display: block; }
  .v2-dl-handle { display: block; border: 0; padding: 0; cursor: ns-resize; touch-action: none; width: 72px; height: 24px; background: transparent; position: relative; margin: 0 auto 8px; }
  .v2-dl-handle::after { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 5px; background: var(--v2-fg2); border-radius: 4px; opacity: .55; }
  body.v2-detail-open .v2-detail-backdrop { display: block; }
  /* Verse brauchen auf Mobil so viel Breite wie möglich: schmales Padding und
     kompakte Vorspalten (Vers-Nr., Sprecher, Sprachtag, Play-Knopf). */
  .v2-main { padding: 10px 8px 30px; }
  .v2-verseBlock { gap: 5px; margin-bottom: 12px; }
  .v2-verseBlock__rows { gap: 2px; }
  .v2-row { gap: 4px; }
  .v2-verse-play { padding: 2px 6px; font-size: 10px; }
  .v2-verseNum { width: 20px; height: 20px; font-size: .66rem; }
  .v2-speaker { width: 18px; height: 18px; font-size: .62rem; }
}

/* ── Lesebereich (main) ─────────────────────────────────────────────────── */
.v2-bookHead { margin-bottom: 14px; }
.v2-bookHead__badge {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  color: var(--v2-accent); background: var(--v2-accent-s); border-radius: 999px; padding: 2px 10px; margin-bottom: 6px;
}
.v2-bookHead__title { font-family: var(--v2-serif); font-weight: 400; font-size: 1.7rem; margin: 0; }
.v2-sectionTopic { color: var(--v2-fg2); margin: 10px 0 16px; font-size: .95rem; }
.v2-note { background: var(--v2-accent-s); border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin: 0 0 16px; }

.v2-dialogue { display: flex; flex-direction: column; gap: 10px; }
.v2-dialogue__turn { display: flex; gap: 10px; align-items: flex-start; }
.v2-dialogue__speaker {
  position: relative; flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--v2-accent-s); color: var(--v2-accent); font-size: .78rem; font-weight: 700;
}
/* Sprecher A/B sind kurskonsistent als weiblich/männlich angelegt (Anna/Mark) —
   Abzeichen zeigt das per Farbe + Symbol statt nur dem nackten Buchstaben. */
.v2-dialogue__speaker--f { background: var(--v2-female-s); color: var(--v2-female); }
.v2-dialogue__speaker--m { background: var(--v2-male-s); color: var(--v2-male); }
.v2-dialogue__speakerSymbol {
  position: absolute; bottom: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: .62rem; line-height: 1;
  background: var(--v2-card); border: 1px solid var(--v2-line);
}
.v2-dialogue__speaker--f .v2-dialogue__speakerSymbol { color: var(--v2-female); }
.v2-dialogue__speaker--m .v2-dialogue__speakerSymbol { color: var(--v2-male); }
.v2-dialogue__bubble { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 10px; padding: 10px 14px; flex: 1; }

.v2-vocabList, .v2-exampleList { display: flex; flex-direction: column; gap: 8px; }
.v2-extension {
  margin-top: 14px; border: 1px solid var(--v2-line); border-radius: 12px;
  background: color-mix(in srgb, var(--v2-card) 72%, transparent); overflow: hidden;
}
.v2-extension > summary {
  cursor: pointer; list-style-position: inside; padding: 12px 14px;
  color: var(--v2-fg2); font-size: .86rem; font-weight: 700;
}
.v2-extension[open] > summary { border-bottom: 1px solid var(--v2-line); }
.v2-extension > .v2-vocabList,
.v2-extension > .v2-exampleList { padding: 12px; }
.v2-vocabItem, .v2-exampleItem {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 10px; padding: 10px 14px;
}
.v2-posTag { font-size: .68rem; color: var(--v2-fg2); text-transform: uppercase; letter-spacing: .03em; margin-left: auto; }

.v2-grammarList { display: flex; flex-direction: column; gap: 18px; }
.v2-grammarPoint { background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 12px; padding: 16px; }
.v2-grammarPoint__title { font-family: var(--v2-serif); margin: 0 0 6px; font-size: 1.1rem; font-weight: 400; }
.v2-grammarPoint__explanation { margin: 0 0 10px; font-size: .92rem; }
.v2-grammarPoint__pattern { background: var(--v2-accent-s); border-radius: 10px; padding: 8px 12px; font-size: .85rem; margin: 0 0 10px; }
.v2-grammarPoint__examples { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }

.v2-hanzi { font-family: var(--v2-font-zh); font-size: 1.3rem; font-weight: 500; }
.v2-pinyin { color: var(--v2-fg2); font-size: .85rem; margin-left: 6px; }
.v2-german { display: block; font-size: .88rem; margin-top: 2px; }
.v2-speakBtn { border: none; background: none; cursor: pointer; font-size: .95rem; padding: 2px 6px; border-radius: 999px; vertical-align: middle; }
.v2-speakBtn:hover { background: var(--v2-accent-s); }

.v2-char {
  font: inherit; font-family: var(--v2-font-zh); font-size: inherit;
  border: none; background: none; padding: 0; margin: 0; cursor: pointer;
  color: inherit; border-bottom: 1px dashed var(--v2-accent);
}
.v2-char:hover, .v2-char.v2-char--active { background: var(--v2-accent-s); }

.v2-loading, .v2-error { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--v2-fg2); }
.v2-error { background: var(--v2-err-s); color: var(--v2-err); border-radius: 12px; font-weight: 600; }

/* ── Detail-Panel-Inhalt (Zeichen-Wissen, statt Modal in v1) ─────────────── */
.v2-dl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.v2-dl-bigGlyph { font-size: 3rem; }
.v2-dl-bigPinyin { display: block; font-size: 1rem; }
.v2-dl-bigGloss { font-size: .95rem; }
.v2-dl-tierBadge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; border-radius: 999px; padding: 2px 10px; margin-bottom: 12px; }
.v2-dl-tierBadge--full { background: var(--v2-ok-s); color: var(--v2-ok); }
.v2-dl-tierBadge--partial { background: var(--v2-accent-s); color: var(--v2-accent); }
.v2-dl-tierBadge--none { background: var(--v2-line); color: var(--v2-fg2); }
.v2-dl-radical { font-size: .75rem; color: var(--v2-fg2); margin-left: 8px; }
.v2-dl-sectionTitle { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--v2-fg2); margin: 18px 0 8px; }
.v2-dl-text { font-size: .92rem; margin: 0 0 6px; }
.v2-dl-classical { font-family: var(--v2-font-zh); font-size: .85rem; color: var(--v2-fg2); margin: 0 0 6px; }
.v2-dl-source { font-size: .72rem; color: var(--v2-fg2); font-style: italic; margin: 0; }
.v2-dl-uncertified { font-size: .72rem; color: var(--v2-fg2); font-style: italic; margin: 8px 0 0; }
.v2-dl-noStroke { font-size: .75rem; color: var(--v2-fg2); text-align: center; padding: 40px 0; }

.v2-dl-stageRow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.v2-dl-stage { aspect-ratio: 1; border-radius: 10px; background: var(--v2-bg); display: flex; align-items: center; justify-content: center; padding: 6px; }
.v2-dl-stage svg { width: 100%; height: 100%; display: block; }
.v2-dl-stage--missing { border: 1px dashed var(--v2-line); }

.v2-dl-strokeBox { width: 140px; height: 140px; margin: 0 auto 10px; background: var(--v2-bg); border-radius: 10px; overflow: hidden; }
.v2-dl-charStrip { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.v2-dl-charBtn { min-width:38px; height:38px; padding:0 8px; border:1px solid var(--v2-line); border-radius:9px; background:var(--v2-card); color:var(--v2-fg); cursor:pointer; font-family:var(--v2-font-zh); font-size:1.25rem; }
.v2-dl-charBtn:hover, .v2-dl-charBtn.active { background:var(--v2-accent); border-color:var(--v2-accent); color:#fff; }
.v2-dl-strokeActions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.v2-dl-quizMsg { text-align: center; font-weight: 700; min-height: 1.2em; margin: 6px 0 0; }

.v2-dl-conceptChips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.v2-dl-conceptChip { font: inherit; font-size: .78rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--v2-accent); background: var(--v2-accent-s); color: var(--v2-accent); cursor: pointer; }
.v2-dl-conceptDetail { background: var(--v2-bg); border-radius: 10px; padding: 10px 12px; margin: 4px 0; font-size: .85rem; }
.v2-dl-conceptDetail strong { display: block; margin-bottom: 4px; }
.v2-dl-conceptDetail p { margin: 0; color: var(--v2-fg2); }
.v2-dl-contextGrammar { display:flex; flex-direction:column; gap:8px; }
.v2-dl-contextGrammar article { padding:10px 12px; border-radius:10px; background:var(--v2-accent-s); }
.v2-dl-contextGrammar strong { display:block; font-size:.9rem; }
.v2-dl-contextGrammar p { margin:4px 0; color:var(--v2-fg2); font-size:.82rem; }
.v2-dl-contextGrammar code { font-size:.78rem; }

.v2-btn {
  font: inherit; font-size: .85rem; font-weight: 700; border-radius: 50px; padding: 8px 16px;
  cursor: pointer; border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-fg);
}
.v2-btn:hover { background: var(--v2-accent-s); border-color: var(--v2-accent); color: var(--v2-accent); }
.v2-btn--primary { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }
.v2-btn--primary:hover { filter: brightness(1.08); color: #fff; }
.v2-btn:disabled { opacity: .35; cursor: default; }
.v2-btn--full { width: 100%; display: block; text-align: center; margin-bottom: 8px; }

/* ── Übungen im Detail-Panel ──────────────────────────────────────────────── */
.v2-exerciseHub__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.v2-skillCard {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  background: var(--v2-card); border: 1px solid var(--v2-line); border-radius: 12px; padding: 14px 8px;
  cursor: pointer; font: inherit; color: var(--v2-fg);
}
.v2-skillCard:hover:not(:disabled) { border-color: var(--v2-accent); }
.v2-skillCard:disabled { opacity: .35; cursor: default; }
.v2-skillCard__icon { font-size: 1.5rem; }
.v2-skillCard__title { font-weight: 700; font-size: .85rem; }
.v2-skillCard__desc { font-size: .72rem; color: var(--v2-fg2); }

.v2-progress { height: 6px; background: var(--v2-line); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.v2-progress__fill { height: 100%; background: var(--v2-accent); transition: width .3s; }
.v2-feedback { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-feedback__correct { color: var(--v2-ok); font-weight: 700; }
.v2-feedback__wrong { color: var(--v2-err); font-weight: 700; }
.v2-optionGrid { display: flex; flex-direction: column; gap: 8px; }
.v2-optionBtn { font: inherit; font-size: .9rem; padding: 10px; border-radius: 10px; border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-fg); cursor: pointer; text-align: left; }
.v2-optionBtn:hover:not(:disabled) { border-color: var(--v2-accent); }
.v2-exItemPlay { border: 0; background: transparent; cursor: pointer; font-size: 1rem; padding: 0 6px; margin-left: 6px; line-height: 1; }
.v2-exItemPlay:hover { transform: scale(1.15); }
.v2-optionBtn--correct { background: var(--v2-ok-s); border-color: var(--v2-ok); }
.v2-optionBtn--wrong { background: var(--v2-err-s); border-color: var(--v2-err); }

.v2-writingInput { width: 100%; font: inherit; font-family: var(--v2-font-zh); font-size: 1.05rem; padding: 8px 10px; border: 1px solid var(--v2-line); border-radius: 10px; background: var(--v2-bg); color: var(--v2-fg); margin-bottom: 6px; }

/* ── Interlinear-Zeilen: Wort + Pinyin gestapelt, Vers-/Wort-Audio ──────────
   Design/Mechanik nach enlight-com_deploy (reader.css .row/.tok/.tok-ipa) —
   hier ersetzt Pinyin die IPA-Zeile, immer sichtbar (kein Umschalt-Modus). */
.v2-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; font-family: var(--v2-language-font, inherit); }
.v2-row-body { display: flex; gap: 8px; align-items: flex-start; flex: 1; min-width: 0; }
.v2-row-tokens { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: flex-start; flex: 1; min-width: 0; }
.v2-tokenUnit { display: inline-flex; align-items: flex-start; min-width: 0; }
.v2-tokenPunctuation {
  font-family: var(--v2-font-zh); font-size: 1.15rem; line-height: 1.25;
  padding-top: 3px; color: var(--v2-fg);
}
.v2-row--de .v2-tokenPunctuation, .v2-row--en .v2-tokenPunctuation {
  font-family: inherit; font-size: 1rem; padding-top: 4px;
}
.v2-tokenPunctuation--before { margin-right: -4px; }
.v2-tokenPunctuation--after { margin-left: -4px; }

.v2-verse-play {
  flex-shrink: 0; min-width: 54px; height: 28px; border-radius: 50px;
  border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-accent);
  cursor: pointer; font-size: 12px; display: flex; align-items: center; justify-content: center;
  margin-top: 2px; padding: 0 8px;
}
.v2-verse-play:hover:not(:disabled) { background: var(--v2-accent-s); }
.v2-verse-play:disabled { opacity: .3; cursor: default; }
.v2-verse-play.v2-playing { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }

.v2-tok {
  /* <button> erbt in den UA-Stylesheets NICHT automatisch color vom Elternteil
     (eigener Default, oft schwarz) — ohne color:inherit blieb der Wort-Text
     im Dark Mode schwarz auf dunklem Grund und war praktisch unsichtbar. Im
     Light Mode fiel das nie auf, weil Schwarz dort zufällig richtig aussah. */
  font: inherit; color: inherit; border: 1px solid transparent; background: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; padding: 2px 5px; border-radius: 8px;
  line-height: 1.25;
}
.v2-tok:hover { background: var(--v2-accent-s); }
.v2-tok--active { background: var(--v2-accent); border-color: var(--v2-accent); }
.v2-tok--active .v2-tok-hanzi, .v2-tok--active .v2-tok-pinyin { color: #fff; }
.v2-tok--marquee { background: #1f6f78; border-color: #1f6f78; color: #fff; box-shadow: 0 0 0 2px rgba(31,111,120,.18); }
.v2-tok--marquee .v2-tok-hanzi, .v2-tok--marquee .v2-tok-pinyin { color: #fff; }
.v2-tok-hanzi { font-family: var(--v2-language-font, var(--v2-font-zh)); font-size: 1.15rem; }
.v2-tok-pinyin { font-size: .68rem; color: var(--v2-fg2); letter-spacing: .01em; font-style: normal; }
/* Umschrift-/Aussprachezeile unter jedem Wort global ausblendbar (alle Sprachen). */
body.v2-hide-pron .v2-tok-pinyin { display: none; }

.v2-dialogue__turn { margin-bottom: 12px; }
.v2-dialogue__turn .v2-dialogue__bubble {
  margin-left: 38px; margin-top: 2px; font-size: .9rem;
}
.v2-dialogue__bubble .v2-pinyin { display: none; } /* Pinyin steht bereits unter jedem Wort-Token */

.v2-exampleItem { margin-bottom: 14px; }
.v2-exampleItem > .v2-pinyin { display: none; }
.v2-inlineSectionTitle { margin: 28px 0 12px; padding-top: 18px; border-top: 1px solid var(--v2-line); font-size: 1.15rem; font-weight: 400; }

/* ── Vers-Nummer-Badge (wie enlight-com read-v2: roter Kreis vor jedem Vers) */
.v2-verseNum {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--v2-accent); color: #fff; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.v2-dialogue__turn { display: flex; flex-direction: column; }
.v2-dialogue__turn .v2-row { align-items: flex-start; }

/* ── Vers-Block: drei gleichberechtigte Sprachzeilen (zh/de/en) je Vers ────
   "gleichberechtigte Mechanik" — jede Zeile hat exakt dieselbe Struktur
   (Play-Button + anklickbare Wort-Tokens mit Aussprache darunter), nur die
   Sprache und ob Pinyin oder IPA gezeigt wird, unterscheidet sich. */
.v2-verseBlock { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 14px; }
.v2-verseBlock__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.v2-row { display: flex; gap: 6px; align-items: flex-start; }
/* Höhere Spezifität als .v2-row, damit das von applyVisibleLangs() gesetzte
   hidden-Attribut tatsächlich greift — generisch für JEDE Sprache (auch
   künftige), statt für jede einzelne Sprache eine eigene body.v2-hide-lang-*
   Regel zu pflegen (das ging vorher für neue Sprachen regelmäßig vergessen,
   zuletzt bei th/ar und id — Zeile entfernt zu Gunsten dieser einen Regel). */
.v2-row[hidden] { display: none; }

.v2-row:not(.v2-row--zh) .v2-tok-hanzi { font-size: 1rem; }
.v2-languageView, .v2-pronSwitch { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.v2-languageView button, .v2-pronSwitch button { border: 1px solid var(--v2-line); background: var(--v2-bg); color: var(--v2-fg); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.v2-languageView button.on, .v2-pronSwitch button.on { background: var(--v2-accent); border-color: var(--v2-accent); color: #fff; }
.v2-toolsSubhead { margin: 14px 0 0; color: var(--v2-fg2); font-size: .78rem; }
.v2-pronSwitch { font-size: .75rem; color: var(--v2-fg2); }
.v2-voiceControls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.v2-voiceControls select { min-width: 0; border: 1px solid var(--v2-line); border-radius: 999px; padding: 7px 9px; background: var(--v2-card); color: var(--v2-fg); font: inherit; font-size: .75rem; }

/* ── Grammatik-Einfärbung: Legende + Schalter (Vorbild enlight-com_deploy
   grammar-mode) — Wörter werden nach Wortart konsistent eingefärbt, statt
   per Klick vorübergehend markiert zu werden. body.v2-grammar-mode schaltet
   die Farben global für alle drei Sprachzeilen ein (dieselbe Wortart hat in
   zh/de/en dieselbe Farbe, siehe data-pos aus build_word_alignment.py). */
#v2-grammar-toggle.on { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }

.v2-grammarLegend {
  display: none; flex-wrap: wrap; gap: 5px; align-items: center;
  padding: 6px 16px; border-bottom: 1px solid var(--v2-line); background: var(--v2-bg2);
}
body.v2-grammar-mode .v2-grammarLegend { display: flex; }
.v2-grammarLegend__chip {
  font-size: 10px; font-weight: 800; letter-spacing: .02em; padding: 3px 9px;
  border-radius: 50px; color: #1f2328; white-space: nowrap;
}

body.v2-grammar-mode .v2-tok[data-pos="verb"]:not(.v2-tok--active) { background: hsl(6 68% 87%); border-color: hsl(6 52% 68%); }
body.v2-grammar-mode .v2-tok[data-pos="noun"]:not(.v2-tok--active) { background: hsl(210 62% 87%); border-color: hsl(210 48% 68%); }
body.v2-grammar-mode .v2-tok[data-pos="adj"]:not(.v2-tok--active) { background: hsl(135 48% 86%); border-color: hsl(135 38% 67%); }
body.v2-grammar-mode .v2-tok[data-pos="pron"]:not(.v2-tok--active) { background: hsl(180 52% 86%); border-color: hsl(180 42% 67%); }
body.v2-grammar-mode .v2-tok[data-pos="prep"]:not(.v2-tok--active) { background: hsl(28 72% 87%); border-color: hsl(28 58% 68%); }
body.v2-grammar-mode .v2-tok[data-pos="conj"]:not(.v2-tok--active) { background: hsl(48 78% 84%); border-color: hsl(48 62% 65%); }
body.v2-grammar-mode .v2-tok[data-pos="art"]:not(.v2-tok--active) { background: hsl(270 48% 88%); border-color: hsl(270 38% 70%); }
body.v2-grammar-mode .v2-tok[data-pos="part"]:not(.v2-tok--active) { background: hsl(250 32% 88%); border-color: hsl(250 26% 70%); }
body.v2-grammar-mode .v2-tok[data-pos="adv"]:not(.v2-tok--active) { background: hsl(315 52% 87%); border-color: hsl(315 42% 68%); }
body.v2-grammar-mode .v2-tok[data-pos="num"]:not(.v2-tok--active) { background: hsl(78 48% 85%); border-color: hsl(78 38% 67%); }
body.v2-grammar-mode .v2-tok[data-pos="cls"]:not(.v2-tok--active) { background: hsl(340 55% 88%); border-color: hsl(340 42% 70%); }
body.v2-grammar-mode .v2-tok[data-pos] .v2-tok-hanzi,
body.v2-grammar-mode .v2-tok[data-pos] .v2-tok-pinyin { color: #1f2328; }

.v2-grammarLegend__chip.verb { background: hsl(6 68% 87%); }
.v2-grammarLegend__chip.noun { background: hsl(210 62% 87%); }
.v2-grammarLegend__chip.adj  { background: hsl(135 48% 86%); }
.v2-grammarLegend__chip.pron { background: hsl(180 52% 86%); }
.v2-grammarLegend__chip.prep { background: hsl(28 72% 87%); }
.v2-grammarLegend__chip.conj { background: hsl(48 78% 84%); }

#v2-alignment-toggle.on { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }
body.v2-alignment-mode .v2-tok[data-align="0"] { background: hsl(8 72% 84%); border-color: hsl(8 55% 62%); }
body.v2-alignment-mode .v2-tok[data-align="1"] { background: hsl(42 82% 82%); border-color: hsl(42 62% 60%); }
body.v2-alignment-mode .v2-tok[data-align="2"] { background: hsl(82 58% 80%); border-color: hsl(82 45% 56%); }
body.v2-alignment-mode .v2-tok[data-align="3"] { background: hsl(150 52% 80%); border-color: hsl(150 42% 54%); }
body.v2-alignment-mode .v2-tok[data-align="4"] { background: hsl(190 66% 82%); border-color: hsl(190 48% 58%); }
body.v2-alignment-mode .v2-tok[data-align="5"] { background: hsl(225 68% 86%); border-color: hsl(225 48% 64%); }
body.v2-alignment-mode .v2-tok[data-align="6"] { background: hsl(275 58% 86%); border-color: hsl(275 42% 65%); }
body.v2-alignment-mode .v2-tok[data-align="7"] { background: hsl(325 64% 86%); border-color: hsl(325 45% 64%); }
body.v2-alignment-mode .v2-tok[data-align] .v2-tok-hanzi,
body.v2-alignment-mode .v2-tok[data-align] .v2-tok-pinyin { color: #2b211d; }

/* Das Lauflicht liegt immer über Grammatik- und Alignment-Hintergründen. */
.v2-tok.v2-tok--marquee {
  position: relative;
  z-index: 5;
  background: #1f6f78 !important;
  border-color: #1f6f78 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(31,111,120,.28), 0 2px 8px rgba(31,111,120,.18);
}
.v2-tok.v2-tok--marquee .v2-tok-hanzi,
.v2-tok.v2-tok--marquee .v2-tok-pinyin { color: #fff !important; }
.v2-grammarLegend__chip.art  { background: hsl(270 48% 88%); }
.v2-grammarLegend__chip.part { background: hsl(250 32% 88%); }
.v2-grammarLegend__chip.adv  { background: hsl(315 52% 87%); }
.v2-grammarLegend__chip.num  { background: hsl(78 48% 85%); }
.v2-grammarLegend__chip.cls  { background: hsl(340 55% 88%); }

/* ── Wort-Detail-Panel (DE/EN/…-Klick): Text+IPA und Übersetzung
   nebeneinander, analog zum zh-Kopf (Glyph | Pinyin+Gloss) — vorher stand
   hier alles einzeln untereinander (eigene column-Richtung), was die
   beiden Sprachen inkonsistent nebeneinander wirken ließ. */
.v2-dl-head--word { align-items: center; gap: 16px; }
.v2-dl-wordMain { display: flex; flex-direction: column; gap: 2px; }
.v2-dl-wordText { font-size: 1.6rem; font-weight: 700; margin: 2px 0 0; }
.v2-dl-wordIpa { font-size: 1rem; color: var(--v2-fg2); font-style: normal; margin: 0; }
.v2-alignment { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--v2-line); }
.v2-alignmentNote { margin: -4px 0 6px; color: var(--v2-fg2); font-size: .78rem; }
.v2-alignTable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.v2-alignTable th { padding: 3px 5px 6px; color: var(--v2-fg2); font-size: .68rem; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--v2-line); }
.v2-alignCell { padding: 4px 5px; vertical-align: middle; border-bottom: 1px dashed var(--v2-line); }
.v2-alignCell--empty { color: var(--v2-fg2); }
.v2-alignWord { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 6px; padding: 3px 5px; background: transparent; color: var(--v2-fg); cursor: pointer; font: inherit; text-align: left; }
.v2-alignWord:hover, .v2-alignWord.active { background: var(--v2-accent-s); color: var(--v2-accent); }
.v2-alignWord small { color: var(--v2-fg2); font-size: .68rem; }
.v2-alignPlay { font-size: .68rem; opacity: .7; }
.v2-alignCell--zh { font-family: var(--v2-font-zh); }

.v2-dl-vocab { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--v2-line); }
.v2-dl-vocab[hidden] { display:none; }
.v2-dl-vocab__title { margin:0 0 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--v2-fg2); }
.v2-dl-vocab__list { display:flex; flex-direction:column; gap:6px; }
.v2-dl-vocab__item { display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:baseline; width:100%; text-align:left; padding:8px 10px; border:1px solid var(--v2-line); border-radius:10px; background:var(--v2-card); color:var(--v2-fg); cursor:pointer; font:inherit; }
.v2-dl-vocab__item:hover { border-color:var(--v2-accent); background:var(--v2-accent-s); }
.v2-dl-vocab__hanzi { font-family:var(--v2-font-zh); font-size:1.1rem; }
.v2-dl-vocab__pinyin { font-size:.75rem; color:var(--v2-fg2); }
.v2-dl-vocab__gloss { font-size:.78rem; color:var(--v2-fg2); text-align:right; }

/* Enlight-ähnliche Werkzeug-Schublade: Die Topbar bleibt auf Mobilgeräten
   kompakt; sekundäre Bedienfunktionen liegen gesammelt in einer rechten
   Werkzeugfläche. Die bestehenden IDs und Handler der V2 bleiben erhalten. */
.v2-toolsToggle {
  border: 1px solid var(--v2-line); background: var(--v2-card); color: var(--v2-fg);
  border-radius: 50px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  height: var(--v2-touch); padding: 0 16px;
}
.v2-toolsToggle:hover, .v2-toolsToggle[aria-expanded="true"] { background: var(--v2-accent); color: #fff; border-color: var(--v2-accent); }
/* Nur die Übungen-Verknüpfung bleibt desktop-exklusiv (Platz auf Mobil). */
.v2-desktopCtl { display:none; }
.v2-desktopCtl { border:1px solid var(--v2-line); background:var(--v2-card); color:var(--v2-fg2); border-radius:50px; height:var(--v2-touch); padding:0 14px; cursor:pointer; font:inherit; font-size:13px; font-weight:700; }
.v2-desktopCtl:hover { background:var(--v2-accent-s); color:var(--v2-accent); }
@media (min-width: 881px) {
  .v2-desktopCtl { display:inline-flex; align-items:center; justify-content:center; }
}
/* Zoom, Kapitel-wiederholen und Hell/Dunkel liegen dauerhaft in der Topbar —
   auch auf Mobil, damit die wichtigsten Lesehilfen ohne Umweg über die
   Werkzeug-Schublade erreichbar sind. */
.v2-topCtl { display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--v2-line); background:var(--v2-card); color:var(--v2-fg2);
  border-radius:50px; height:var(--v2-touch); min-width:var(--v2-touch); padding:0 14px;
  cursor:pointer; font:inherit; font-size:13px; font-weight:700; }
.v2-topCtl:hover { background:var(--v2-accent-s); color:var(--v2-accent); }
.v2-topCtl.on { background:var(--v2-accent); color:#fff; border-color:var(--v2-accent); }
.v2-topZoom { display:inline-flex; align-items:center; border:1px solid var(--v2-line); border-radius:50px; overflow:hidden; }
.v2-topZoom button { border:0; background:var(--v2-card); color:var(--v2-fg2); height:var(--v2-touch); padding:0 12px; cursor:pointer; font:inherit; font-weight:700; }
.v2-topZoom button + button { border-left:1px solid var(--v2-line); }
.v2-topZoom button:hover { background:var(--v2-accent-s); }
@media (max-width: 880px) {
  .v2-topCtl { height:32px; min-width:32px; padding:0 10px; font-size:12px; }
  .v2-topZoom button { height:32px; padding:0 9px; }
}
.v2-toolsBackdrop { position: fixed; inset: 0; z-index: 40; background: rgba(35,27,17,.42); }
.v2-toolsDrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(440px, 92vw);
  overflow: auto; background: var(--v2-bg2); color: var(--v2-fg);
  box-shadow: -12px 0 40px rgba(70,45,20,.18); border-left: 1px solid var(--v2-line);
}
.v2-toolsDrawer__head { display:flex; align-items:center; justify-content:space-between; padding: 28px 24px 22px; border-bottom:1px solid var(--v2-line); }
.v2-toolsDrawer__head h2 { margin:0; font-size:1.55rem; line-height:1.1; }
.v2-toolsDrawer__head span { color:var(--v2-fg2); font-size:.9rem; }
.v2-toolsDrawer__close { width:42px; height:42px; border-radius:50%; border:2px solid var(--v2-accent); background:var(--v2-card); color:var(--v2-fg); font-size:28px; line-height:1; cursor:pointer; }
.v2-toolsSection { padding: 22px 24px; border-bottom:1px solid var(--v2-line); }
.v2-toolsSection h3 { margin:0 0 14px; font-size:1rem; color:var(--v2-fg); }
.v2-toolsSection h3 span { color:var(--v2-fg2); font-size:.78rem; font-weight:500; margin-left:5px; }
.v2-toolsGrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.v2-toolBtn--wide { width:100%; min-height:44px; height:auto; padding:10px 12px; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.v2-toolsDrawer .v2-zoomCtl { width:100%; }
.v2-toolsDrawer .v2-zoomCtl button { flex:1; }
.v2-scriptSwitch { display:flex; margin-top:12px; border:1px solid var(--v2-line); border-radius:999px; overflow:hidden; }
.v2-scriptSwitch button { flex:1; min-height:42px; border:0; background:var(--v2-card); color:var(--v2-fg2); font:inherit; cursor:pointer; }
.v2-scriptSwitch button + button { border-left:1px solid var(--v2-line); }
.v2-scriptSwitch button.on { background:var(--v2-accent); color:#fff; }
.v2-toolHint { color:var(--v2-fg2); font-size:.78rem; line-height:1.45; margin:10px 0 0; }
.v2-learnLangRow { display:flex; gap:6px; margin:10px 0 12px; }
.v2-learnLangRow button { flex:1; min-height:34px; border:1px solid var(--v2-line); border-radius:999px; background:var(--v2-card); color:var(--v2-fg2); cursor:pointer; }
.v2-learnLangRow button.on { background:var(--v2-accent); color:#fff; border-color:var(--v2-accent); }
.v2-exerciseHub__grid--advanced { margin-bottom:18px; }
.v2-speedControl { display:block; margin-top:16px; color:var(--v2-fg2); font-size:.82rem; }
.v2-speedControl output { float:right; color:var(--v2-fg); font-weight:700; }
.v2-speedControl input { display:block; width:100%; margin-top:10px; accent-color:var(--v2-accent); }
@media (max-width: 880px) {
  .v2-toolsToggle { height:32px; padding:0 12px; font-size:12px; }
  .v2-toolsDrawer { width:min(390px, 94vw); }
  .v2-toolsDrawer__head { padding:22px 18px 18px; }
  .v2-toolsSection { padding:18px; }
  /* Werkzeuge-Raster auf Mobil einspaltig (steht bewusst nach der 2-Spalten-
     Basisregel, damit die Kaskade greift). */
  .v2-toolsGrid { grid-template-columns: 1fr; }
}