/* 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;
  /* Fuer Lautschrift/Umschrift-Zeilen (v2-tok-pinyin) -- NIE die
     Zielsprachen-Schrift (--v2-language-font) verwenden: reine
     Skript-Fonts (z.B. "Noto Serif Thai") haben oft keine Glyphen fuer
     IPA-Sonderzeichen wie den Ligaturbogen U+0361 (t͡ɕ), waehrend "Noto
     Sans" eine der vollstaendigsten IPA/Diakritika-Abdeckungen aller
     hier genutzten Fonts hat (Bugreport 2026-08-11: th zeigte Tofu bei
     Woertern mit Ligaturbogen, obwohl dieselbe IPA im Seitenpanel, das
     nicht in --v2-language-font eingebettet ist, korrekt rendert). */
  --v2-font-ipa: "Noto Sans", "Noto Sans Thai", 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;
    --v2-variant: #b39ddb;
  }
}

* { 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 ───────────────────────────────────────────────── */
:root { --v2-aside-w: 380px; }
.v2-wrap { display: flex; max-width: 1280px; margin: 0 auto; align-items: flex-start; }
.v2-main { flex: 1; min-width: 320px; padding: 16px 18px 120px; zoom: var(--v2-zoom); }
.v2-gutter {
  flex: 0 0 8px; align-self: stretch; position: sticky; top: var(--v2-top-h, 62px);
  height: calc(100vh - var(--v2-top-h, 62px)); cursor: col-resize; touch-action: none;
  background: transparent; border: 0; padding: 0; -webkit-tap-highlight-color: transparent;
}
.v2-gutter::after {
  content: ''; display: block; width: 1px; height: 100%; margin: 0 auto;
  background: var(--v2-line); transition: background .15s, width .15s;
}
.v2-gutter:hover::after, .v2-gutter:focus-visible::after, .v2-gutter.dragging::after {
  width: 3px; background: var(--v2-accent, var(--v2-fg2));
}
.v2-gutter:focus-visible { outline: 2px solid var(--v2-accent, var(--v2-fg2)); outline-offset: -2px; }
.v2-aside {
  width: auto; flex: 0 0 clamp(280px, var(--v2-aside-w), 640px); position: sticky; top: var(--v2-top-h, 62px); align-self: flex-start;
  height: calc(100vh - var(--v2-top-h, 62px)); overflow: auto; overscroll-behavior: contain;
  background: var(--v2-bg2);
  padding: 22px 22px 60px;
}
/* Scrollbalken ausblenden, Scrollen bleibt funktional (Nutzerwunsch) —
   dieselbe Regel für alle scrollenden Bereiche der Seitenleiste. */
.v2-aside, .v2-toolsDrawer, .hskdt-transcript {
  scrollbar-width: none; -ms-overflow-style: none;
}
.v2-aside::-webkit-scrollbar, .v2-toolsDrawer::-webkit-scrollbar, .hskdt-transcript::-webkit-scrollbar {
  display: none;
}
.v2-aside-inner { zoom: var(--v2-zoom); }

.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; }
.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-gutter { display: none; }
  /* Seitenleiste ist dauerhaft sichtbar (kein Ein-/Ausblenden mehr) — der
     Griff verschiebt live ihre Höhe, genau wie der Desktop-Splitter nur
     vertikal statt horizontal. "Kompakt" blendet sie auf ein 58px-Peek
     zurück, statt sie ganz zu verstecken. */
  .v2-aside {
    position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto;
    height: min(var(--v2-sheet-height, 40vh), calc(100vh - var(--v2-top-h, 120px))); max-height: calc(100vh - var(--v2-top-h, 120px)); min-height: 58px;
    border-left: none; border-top: none; border-bottom: none; background: var(--v2-bg2);
    box-shadow: 0 -10px 30px rgba(80,50,20,.14); transform: translateY(0); transition: transform .25s;
    border-radius: 18px 18px 0 0; z-index: 30;
    /* #v2-aside scrollt auf Mobil nicht mehr selbst (Nutzerwunsch: nicht die
       ganze Seitenleiste soll springen) — die Isolation/das interne Scrollen
       des offenen Reiters übernimmt .v2-dl-section[open] unten. Weniger
       Bodenpolster als auf Desktop, sonst fehlt dem offenen Reiter unten
       sichtbar Platz. */
    overflow: hidden; padding: 14px 22px 12px;
  }
  .v2-aside-inner {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  /* Jeder Reiter nimmt normalerweise nur seine eigene Kopfzeile ein; der
     GEÖFFNETE Reiter wird zur Spalte, die den kompletten restlichen Platz
     ausfüllt — sein eigener Inhalt (__body) scrollt dann intern, statt die
     ganze Seitenleiste zu verschieben. Alle ANDEREN Reiter werden dabei
     komplett ausgeblendet (nicht nur weggescrollt), damit weder darüber
     noch darunter etwas anderes sichtbar bleibt — genau der geöffnete
     Reiter füllt oben bis unten die ganze Fläche. Beim erneuten Zuklappen
     (kein [open] mehr in der Gruppe) erscheinen automatisch wieder alle. */
  /* :not([hidden]) überall wichtig: einige Reiter (Artikulation,
     Grammatikvergleich, Sprachvergleich, Schrift lernen) tragen dauerhaft
     das open-Attribut, werden aber über [hidden] separat je nach
     Zielsprache ein-/ausgeblendet (eigener Mechanismus, nicht die normale
     Akkordeon-Exklusivität) — die dürfen hier nicht mitzählen, sonst
     "gewinnt" das Höhen-/Sichtbarkeits-CSS für einen eigentlich
     unsichtbaren Reiter statt für den tatsächlich vom Nutzer geöffneten. */
  .v2-dl-section { flex: 0 0 auto; }
  .v2-dl-section[open]:not([hidden]) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .v2-dl-section[open]:not([hidden]) > .v2-dl-section__summary { flex: 0 0 auto; }
  .v2-dl-section[open]:not([hidden]) > .v2-dl-section__body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .v2-dl-section[open]:not([hidden]) > .v2-dl-section__body::-webkit-scrollbar { display: none; }
  /* Alle direkten Geschwister des offenen Reiters ausblenden — nicht nur die
     übrigen .v2-dl-section, sondern auch Nicht-Akkordeon-Elemente wie
     #v2-dl-visual ("Visuelles Lernen zum Thema"), die sonst unterhalb des
     offenen Reiters durchgeschienen wären. */
  .v2-aside-inner:has(.v2-dl-section[open]:not([hidden])) > *:not(.v2-dl-section[open]:not([hidden])) { display: none; }
  .v2-aside--compact { transform: translateY(calc(100% - 58px)); }
  /* Die obere Kante der Seitenleiste IST der Anfasser (Nutzerwunsch) — kein
     eigener, sichtbarer Balken mehr, der Platz wegnimmt oder die Reiter-
     Überschrift überdeckt. Der Griff bleibt sticky top:0 (muss IMMER
     bedienbar bleiben, #v2-aside ist der scrollende Vorfahre), ist aber nur
     14px hoch, transparent und zieht sich per negativem margin-bottom
     wieder von der Fließ-Höhe ab, sodass er auf dem sticky Reiterkopf
     AUFLIEGT statt ihn nach unten zu verdrängen. Ein kleiner Griff-Strich
     (::after) markiert die Zone optisch, die klickbare/ziehbare Fläche ist
     die volle Breite. */
  .v2-dl-handle {
    display: block; position: sticky; width: 100%; top: 0; height: 14px; z-index: 6;
    margin: 0 0 -14px; border: 0; padding: 0; background: transparent; cursor: ns-resize; touch-action: none;
    -webkit-tap-highlight-color: transparent;
  }
  .v2-dl-handle::after {
    content: ''; position: absolute; left: 50%; top: 5px; width: 36px; height: 4px;
    margin-left: -18px; border-radius: 999px; background: var(--v2-line); transition: background .15s, width .15s;
  }
  .v2-dl-handle:hover::after, .v2-dl-handle:focus-visible::after, .v2-dl-handle.dragging::after {
    background: var(--v2-accent, var(--v2-fg2));
  }
  .v2-dl-handle:focus-visible { outline: none; }
  /* Verse brauchen auf Mobil so viel Breite wie möglich: schmales Padding und
     kompakte Vorspalten (Vers-Nr., Sprecher, Sprachtag, Play-Knopf). Unten
     reserviert padding-bottom exakt so viel Platz, wie die dauerhaft
     sichtbare Seitenleiste gerade tatsächlich einnimmt (JS hält den Wert
     live nach, siehe syncMobilePad()). */
  .v2-main { padding: 10px 8px var(--v2-mobile-main-pad, 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__explanation--lang { color: var(--v2-fg2); font-size: .85rem; }
.v2-grammarPoint__tag,
.v2-dl-contextGrammar__tag {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 50px; background: var(--v2-accent-s); color: var(--v2-fg2);
  margin-right: 4px; vertical-align: middle;
}
.v2-dl-contextGrammar__lang { font-size: .78rem !important; }
.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 { font-family: var(--v2-font-ipa); 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; }
/* Einklappbarer Unterabschnitt innerhalb des Detail-Panels (bisher nur
   Grammatik · Kontext) — gleiche Optik wie .v2-dl-sectionTitle, aber als
   <summary> statt <h3>, weil hier eine echte Auf/Zu-Interaktion hinzukommt. */
.v2-dl-subsection__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  margin: 18px 0 8px; padding: 0; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--v2-fg2);
}
.v2-dl-subsection__summary::-webkit-details-marker { display: none; }
.v2-dl-subsection__summary::after { content: '▾'; margin-left: auto; opacity: .6; font-size: .7rem; }
.v2-dl-subsection[open] > .v2-dl-subsection__summary::after { content: '▴'; }
.v2-dl-subsection__summary:hover { color: var(--v2-fg); }
.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-posFormsTitle { margin: 10px 0 6px; }
.v2-dl-posForms { display: flex; gap: 8px; margin: 0 0 12px; }
.v2-dl-posForm { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 1px solid var(--v2-line); border-radius: 9px; background: var(--v2-card); }
.v2-dl-posForm__glyph { font-size: 1.5rem; line-height: 1; }
.v2-dl-posForm__label { font-size: .68rem; color: var(--v2-fg2); }

.v2-dl-conjugationList { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.v2-dl-conjugationRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--v2-bg); border-radius: 8px; font-size: .88rem; }
.v2-dl-conjugationRow__label { color: var(--v2-fg2); }
.v2-dl-conjugationRow__answer { font-weight: 600; }

.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 {
  /* Fix 2026-08-05 (Nutzer-Bugreport): war fest auf var(--v2-font-zh)
     (Chinesisch) verdrahtet, unabhaengig von der tatsaechlichen Zielsprache
     der Zeile -- fuer JEDE Schriftvariante mit eigener Interpunktion
     (z.B. Bassa-Vah-Punkt U+16AF6, Tangsa-Punkt) zeigte das Satzzeichen
     dadurch Tofu, obwohl Wort UND Zeichen selbst korrekt waren. `inherit`
     uebernimmt stattdessen die auf .v2-row gesetzte --v2-language-font
     (fuer zh-Zeilen ist das ohnehin der CJK-Font-Stack, kein Regressionsrisiko). */
  font-family: inherit; 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-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-family: var(--v2-font-ipa); font-size: .68rem; color: var(--v2-fg2); letter-spacing: .01em; font-style: normal; }
/* "Bekanntes Wort"-Markierung (box>=MAX_BOX im Leitner-Fortschritt, s.
   isWordKnown() in hskReaderAppV2.v1.js) — bewusst nur eine dezente
   Unterstreichung per inset-box-shadow statt eigener Hintergrundfarbe, damit
   sie sich mit Grammatik-/Alignment-Modus-Hintergrundfarben nicht beißt und
   in beiden gleichzeitig sichtbar bleibt. */
.v2-tok--known:not(.v2-tok--active) { box-shadow: inset 0 -2px 0 0 var(--v2-ok); }
.v2-tok--known.v2-tok--active { box-shadow: inset 0 -2px 0 0 #fff; }
.v2-char--known { box-shadow: inset 0 -2px 0 0 var(--v2-ok); }
/* 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]:not(.v2-tok--active) .v2-tok-hanzi,
body.v2-grammar-mode .v2-tok[data-pos]:not(.v2-tok--active) .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-alignTableWrap { overflow-x: auto; max-width: 100%; }
.v2-alignTable { width: 100%; border-collapse: collapse; font-size: .82rem; }
.v2-alignTable th, .v2-alignTable td { white-space: nowrap; }
.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); }

/* Akkordeon-Abschnitte der Sidebar (Zeichen-/Wort-Wissen, Artikulation,
   Wortschatz): eigener Auf-/Zu-Zustand je Abschnitt, in localStorage gemerkt
   (s. initAccordionSection() in hskReaderAppV2.v1.js). Chevron-Mechanik nach
   dem Vorbild von .v2-dl-visual__item (dieselbe Optik, nur auf Abschnitts-
   statt Modul-Ebene). */
.v2-dl-section { border-bottom: 1px solid var(--v2-line); margin-bottom: 18px; padding-bottom: 18px; }
.v2-dl-section[hidden] { display: none; }
.v2-dl-section:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.v2-dl-section__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
  margin: 0 0 10px; padding: 8px 0; font-size: 1.05rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--v2-fg2);
  /* Sticky, damit die Überschrift des geöffneten Reiters beim Scrollen durch
     dessen Inhalt sichtbar bleibt, statt (wie bei reinem scrollTop-Sprung)
     aus dem sichtbaren Bereich zu wandern (Nutzerwunsch). top:0 auf Desktop
     (#v2-aside hat dort keinen Ziehgriff); auf Mobil s. Media Query unten,
     wo top um die Höhe von .v2-dl-handle ergänzt wird. */
  position: sticky; top: 0; z-index: 4; background: var(--v2-bg2);
}
.v2-dl-section__summary::-webkit-details-marker { display: none; }
.v2-dl-section__summary::after { content: '▾'; margin-left: auto; opacity: .6; font-size: .7rem; }
.v2-dl-section[open] > .v2-dl-section__summary::after { content: '▴'; }
.v2-dl-section__summary:hover { color: var(--v2-fg); }
/* Kein Fokus-Rahmen bei Maus-/Touch-Klick (Standard-Browser-Outline fiel erst
   durch position:sticky auf) — Tastaturfokus bleibt sichtbar, nur dezenter
   als der blaue Browser-Default. */
.v2-dl-section__summary:focus { outline: none; }
.v2-dl-section__summary:focus-visible { outline: 2px solid var(--v2-accent, var(--v2-fg2)); outline-offset: 2px; }

.v2-dl-phonetik__frame { width:100%; height:340px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-scriptlearn__frame { width:100%; height:560px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-sprachvergleich__frame { width:100%; height:600px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-corevocab__frame { width:100%; height:520px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-corevocabcards__frame { width:100%; height:640px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-laendersprachen__frame { width:100%; height:640px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }
.v2-dl-visuelleslernen__frame { width:100%; height:640px; border:0; display:block; border-radius:10px; background:var(--v2-bg); }

.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; }

.v2-dl-visual { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--v2-line); }
.v2-dl-visual[hidden] { display:none; }
.v2-dl-visual__title { margin:0 0 10px; font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; color:var(--v2-fg2); }
.v2-dl-visual__item { border:1px solid var(--v2-line); border-radius:10px; background:var(--v2-card); margin-bottom:8px; overflow:hidden; }
.v2-dl-visual__item summary { list-style:none; cursor:pointer; padding:10px 12px; display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--v2-fg); }
.v2-dl-visual__item summary::-webkit-details-marker { display:none; }
.v2-dl-visual__item summary:hover { background:var(--v2-accent-s); }
.v2-dl-visual__item summary::after { content:'▾'; margin-left:auto; opacity:.6; font-size:.7rem; }
.v2-dl-visual__item[open] summary::after { content:'▴'; }
.v2-dl-visual__icon { font-size:1.05rem; }
.v2-dl-visual__frame-wrap { border-top:1px solid var(--v2-line); background:var(--v2-bg); }
.v2-dl-visual__frame { width:100%; height:480px; border:0; display:block; background:var(--v2-bg); }

/* 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); }
/* Abspielgeschwindigkeit — dauerhaft in der Topbar (Nutzerwunsch: gilt für
   alle Sprachausgaben, nicht in der Werkzeug-Schublade versteckt). */
.v2-topSpeed {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--v2-line); border-radius:50px; background:var(--v2-card);
  height:var(--v2-touch); padding:0 12px;
}
.v2-topSpeed input[type="range"] { width:70px; accent-color:var(--v2-accent); }
.v2-topSpeed output { font-size:12px; font-weight:700; color:var(--v2-fg2); min-width:2.6em; text-align:right; }
@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-topSpeed { height:32px; padding:0 9px; }
  .v2-topSpeed input[type="range"] { width:50px; }
}
.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; flex-wrap:wrap; gap:6px; margin:10px 0 12px; }
.v2-learnLangRow button { flex:0 0 auto; min-height:34px; padding:0 12px; 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); }
/* "Sprechen"-Übung (hskDialogTrainerView.v1.js) — bewusst OHNE eigenes
   Farbthema, nutzt dieselben --v2-*-Variablen wie der Rest der Sidebar (s.
   Kommentar oben in der View-Datei). Seitenverhältnis der Avatar-Bühne
   (400:430) identisch zu .avd-avatar-stage / .ph-viseme-stage. */
.hskdt-root { display:flex; flex-direction:column; align-items:center; gap:10px; }
/* Kopf (Avatar+Knöpfe/Rollen-Badge/Status/Eingabe) bleibt sichtbar, während
   nur das Transkript darunter scrollt — sowohl über den eigenen Bildlauf des
   Transkripts (max-height unten) als auch, falls die Seitenleiste selbst noch
   weiterscrollt (kurzer Viewport, Mobil-Sheet), über position:sticky relativ
   zu .v2-aside (der tatsächlich scrollende Vorfahre). */
.hskdt-head {
  position:sticky; top:0; z-index:2; width:100%;
  display:flex; flex-direction:column; gap:6px;
  background:var(--v2-bg2); padding-bottom:6px;
}
/* Avatar links, die drei Knöpfe (Sprechen/Wiederholen/Antwort zeigen) rechts
   daneben (Nutzerwunsch), statt untereinander über die volle Breite. */
.hskdt-stage { width:100%; display:flex; gap:10px; align-items:flex-start; }
.hskdt-avatar-wrap { flex:0 0 auto; }
.hskdt-avatar-stage {
  position:relative; width:110px; aspect-ratio:400/430;
  border-radius:12px; overflow:hidden;
  background:var(--v2-bg2, var(--v2-card)); border:2px solid var(--v2-accent);
}
.hskdt-avatar-stage .ph-viseme-layer {
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity 220ms ease;
}
@media (prefers-reduced-motion: reduce) { .hskdt-avatar-stage .ph-viseme-layer { transition:none; } }
/* Avatar-Rahmen/-Hintergrund (eigene Rolle des Avatars) und der "Sprechen"-
   Knopf (Rolle des Lerners) — fest für den ganzen Durchlauf, dieselben
   Farben wie Sprechblasen/Abzeichen — s. setActiveRole() in dieser Datei
   und hskDialogTrainerApp.v1.js::avatarRoleFor()/learnerRoleFor(). */
.hskdt-avatar-stage.hskdt-role-a { border-color: var(--v2-female); background: var(--v2-female-s); }
.hskdt-avatar-stage.hskdt-role-b { border-color: var(--v2-male); background: var(--v2-male-s); }
.hskdt-btn--mic.hskdt-role-a { border-color: var(--v2-female); background: var(--v2-female-s); }
.hskdt-btn--mic.hskdt-role-b { border-color: var(--v2-male); background: var(--v2-male-s); }
.hskdt-status { font-size:.8rem; color:var(--v2-fg2); min-height:1.2em; text-align:center; }
.hskdt-status.is-busy { color:var(--v2-accent); }
.hskdt-transcript { width:100%; max-height:min(320px, 40vh); overflow-y:auto; display:grid; gap:6px; padding:4px 2px; }
.hskdt-bubble { border-radius:10px; padding:6px 10px; max-width:92%; border:1px solid var(--v2-line); background:var(--v2-card); font-size:.88rem; justify-self:start; }
.hskdt-bubble--note { justify-self:center; font-style:italic; font-size:.78rem; color:var(--v2-fg2); background:transparent; border-style:dashed; }
.hskdt-bubble--reveal { border-style:dashed; }
.hskdt-bubble--prompt { border-style:dashed; opacity:.85; }
/* Farbe UND Ausrichtung folgen der Sprechrolle (A/B), nicht der Bubble-Art
   (Avatar/Vorlage/Nutzer) — Nutzerwunsch: Sprecher A immer links, Sprecher B
   immer rechts, unabhängig vom Rollentausch. justify-self:left/right (PHYSISCH,
   nicht start/end) — "immer" gilt bewusst auch bei RTL-Zielsprachen, deren
   dir="rtl" sonst start/end umkehren würde. Farben dieselben wie die A/B-
   Sprecher-Abzeichen im Hauptbereich (.v2-dialogue__speaker--f/--m, s. oben). */
.hskdt-bubble--roleA { justify-self:left; border-color: var(--v2-female); background: var(--v2-female-s); }
.hskdt-bubble--roleB { justify-self:right; border-color: var(--v2-male); background: var(--v2-male-s); }
.hskdt-bubble__meta { font-size:.68rem; color:var(--v2-fg2); margin-bottom:2px; }
.hskdt-bubble--roleA .hskdt-bubble__meta { color: var(--v2-female); }
.hskdt-bubble--roleB .hskdt-bubble__meta { color: var(--v2-male); }
.hskdt-tokrow { display:flex; flex-wrap:wrap; gap:2px; }
/* Identische Wortgröße wie im Hauptbereich: .v2-tok-hanzi ist dort für
   Chinesisch (.v2-row--zh) 1.15rem, für jede andere Sprache 1rem
   (s. .v2-row:not(.v2-row--zh) .v2-tok-hanzi oben) — hier dieselbe
   Umschaltung über hskdt-root--zh statt .v2-row--zh. Dieselben Werte gelten
   auch für Fließtext-Bubbles (Nutzeräußerung/Hinweis) ohne Tokenaufschlüsselung
   — Nutzerwunsch: Schriftgrößen innerhalb des Transkripts aneinander angleichen. */
.hskdt-root:not(.hskdt-root--zh) .v2-tok-hanzi,
.hskdt-root:not(.hskdt-root--zh) .hskdt-bubble__text { font-size: 1rem; }
.hskdt-root.hskdt-root--zh .hskdt-bubble__text { font-size: 1.15rem; }
/* Knopfgruppe rechts neben dem Avatar — untereinander statt nebeneinander,
   damit sie in die verbleibende Breite passt. */
.hskdt-controls { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.hskdt-controls[data-mode="disabled"] { opacity:.55; }
.hskdt-controls[data-mode="text"] .hskdt-btn--mic { display:none; }
.hskdt-textform { display:none; }
/* #hskdt-controls sitzt innerhalb von .hskdt-stage, .hskdt-textform ist ein
   Geschwister von .hskdt-stage — kein direkter Nachbar, darum :has() statt
   eines einfachen Geschwister-Selektors. */
.hskdt-head:has(#hskdt-controls[data-mode="text"]) .hskdt-textform { display:flex; gap:6px; width:100%; }
.hskdt-btn {
  font:inherit; font-size:.85rem; padding:.45rem .9rem; border-radius:999px;
  border:1px solid var(--v2-line); background:var(--v2-card); color:var(--v2-fg); cursor:pointer;
}
/* Reihe aus Hauptknopf (Wiederholen/Antwort zeigen) + kleinem 🐌-Knopf
   daneben, der denselben Satz nur langsamer abspielt (Nutzerwunsch). */
.hskdt-btnrow { display:flex; gap:4px; }
.hskdt-btnrow .hskdt-btn:first-child { flex:1; min-width:0; }
.hskdt-btn--slow { flex:0 0 auto; padding:.45rem .55rem; font-size:.85rem; line-height:1; }
.hskdt-btn--mic { border-color:var(--v2-accent); font-size:.9rem; }
.hskdt-btn--mic.is-listening { animation: hskdt-pulse 1.1s ease-in-out infinite; }
/* Blinkt, solange der Nutzer an der Reihe ist (auch bei erneutem Versuch
   nach nicht erkannter Antwort, s. hskDialogTrainerApp.v1.js::runUserTurn()/
   revealAndAdvance()) — ersetzt den bisherigen Text "Jetzt sprechen …"
   (Nutzerwunsch: mehr Platz für den Dialog). */
.hskdt-controls[data-mode="mic-idle"] .hskdt-btn--mic { animation: hskdt-blink 1.1s ease-in-out infinite; }
@keyframes hskdt-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.hskdt-btn--ghost { background:transparent; font-size:.76rem; }
.hskdt-btn:disabled { opacity:.5; cursor:default; }
.hskdt-textinput { flex:1; font:inherit; padding:.45rem .7rem; border-radius:8px; border:1px solid var(--v2-line); background:var(--v2-card); color:var(--v2-fg); }
.hskdt-mic-live { font-size:.76rem; color:var(--v2-fg2); min-height:1.1em; text-align:center; }
@keyframes hskdt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--v2-accent-s, transparent); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

@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; }
}