*{box-sizing:border-box;margin:0;padding:0}
:root{
  --zoom:1;
  --bg:#f6f1e8; --bg2:#fdfaf5; --fg:#241c12; --fg1:var(--fg); --fg2:#6a5a48; --line:#e3d8c6;
  --red:#b30000; --gold:#c9a87a; --hl:#ffe39c; --hl2:#fff3cf; --hlfull:#d9a404; --card:#fffdf9;
  --play:#1f6f78; /* Lese-Cursor (Vers-Wiedergabe) — bewusst von --red (Auswahl/Klick) unterschieden */
  --aside-w:380px; /* Seitenleisten-Breite, per Ziehgriff (.gutter) verstellbar — s. reader.js applyAsideWidth() */
  --serif:"Noto Sans TC","Noto Serif",serif;
  --heb:"Noto Serif Hebrew","Noto Serif",serif;
  --grk:"Noto Serif","Doulos SIL",serif;
  /* ─── Typografie-/Abstands-Skala — vereinheitlicht die zuvor pro Komponente
     einzeln festgelegten Werte (11/12/13/10px Labels, 13/14/15px Fließtext,
     4/8/12/16px Abstände ohne System). Neue Regeln SOLLEN diese Variablen
     nutzen; bestehende Regeln werden schrittweise umgestellt.
     Nutzerwunsch: Seitenleisten-Text in identischer Groesse wie der
     Hauptbereich (.row.en .row-tokens = 18px) — sonst bleibt die Seitenleiste
     bei jeder Zoomstufe unproportional kleiner als der Haupttext und ist auf
     Mobilgeraeten schwer lesbar. Alle drei Stufen zeigen daher auf denselben
     Wert; Label/Meta bleiben durch Großschrift/Farbe/Gewicht unterscheidbar,
     nicht mehr durch kleinere Schrift. */
  --fs-label:18px;   /* Großbuchstaben-Sektionslabels (LEXIKON, FAMILIE, …) */
  --fs-meta:18px;    /* Nebeninfos, Quellenangaben, Badges */
  --fs-body:18px;    /* erklärender Fließtext (Kommentare, Hintergrund, Lexikon) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  /* Mindest-Klickzielgröße (wie --v2-touch in ui-v2.css) — jetzt auch für
     die klassische Oberfläche, nicht nur die V2-Variante. */
  --touch:40px;
}
/* ─── Dark Mode — von theme-toggle.js per body.dark gesetzt, gemeinsamer
   sn.theme-Key ueber die ganze Seite (Start/studium/lesen) hinweg ─────────── */
body.dark{
  --bg:#1a1a1e; --bg2:#222226; --fg:#e8e6e2; --fg1:var(--fg); --fg2:#a8a29a; --line:#3a3a42;
  --card:#242428; --hl:#5a4a1a; --hl2:#3a3018; --hlfull:#8a6a20;
}
body.dark html,body.dark{background:linear-gradient(165deg,#1a1a1e,#222226 60%,#1c1c20)}
body.dark .topBar{background:rgba(24,24,28,.94)}
body.dark aside{background:rgb(24,24,28)}
body.dark .top .home,body.dark .nav select,body.dark .nav button,body.dark .zhmode,body.dark .zhvoice,
body.dark .vplay,body.dark .lang-chip,body.dark #ipaToggle,body.dark #voiceToggle,
body.dark #alignToggle,body.dark #grammarToggle,body.dark .hm-close,body.dark .voice-select,
body.dark .search-panel-close,body.dark .search-input,body.dark .dl-repeat-btn,
body.dark .wt-back,body.dark .lens-btn,body.dark .search-hit,body.dark .theme-toggle,
body.dark #contReadToggle,body.dark .zoom-ctl{
  background:#242428;color:var(--fg2);border-color:var(--line)}
body.dark .top .home:hover,body.dark .nav button:hover:not(:disabled),body.dark .vplay:hover,
body.dark .lang-chip:hover,body.dark #ipaToggle:hover,body.dark #voiceToggle:hover,
body.dark #alignToggle:hover,body.dark #grammarToggle:hover,body.dark .dl-repeat-btn:hover:not(.on),
body.dark .wt-back:hover,body.dark .lens-btn:hover,body.dark .search-panel-close:hover,
body.dark #contReadToggle:hover,body.dark .zoom-ctl button:hover{
  background:#323238;color:var(--red)}
/* body.dark #id-Regeln oben (Zeile 20-26) haben dieselbe Spezifitaet wie
   #id.on und stehen NACH den .on-Regeln im Stylesheet -- ohne diese
   Override-Zeile gewinnt im Dark Mode immer die neutrale Grundfarbe, auch
   wenn der Button aktiv ist (z.B. 🔁 kontinuierliches Vorlesen unsichtbar an). */
body.dark #contReadToggle.on{background:#8a4a1a;color:#fff;border-color:#8a4a1a}
body.dark #ipaToggle.on{background:var(--red);color:#fff;border-color:var(--red)}
body.dark #alignToggle.on{background:#4a6fa5;color:#fff;border-color:#4a6fa5}
body.dark #grammarToggle.on{background:#3a8a45;color:#fff;border-color:#3a8a45}
body.dark .hm-panel,body.dark .search-panel{background:rgba(20,20,24,.97)}
body.dark .grammar-legend{background:#202024}
body.dark .lens-bar{background:#202024}
body.dark .dl-morph-raw{background:#242428;color:#c8c0b0}
body.dark .dl-slim-book{background:#202838;border-color:#3a4a6a;color:#8ab0f0}
body.dark .hm-row:hover{background:#2a2a30}
body.dark .tok.nolink.unmapped{color:var(--fg1)}
body.dark .cw{background:var(--hl2);border-color:#5a4a2a}
body.dark .row.en .row-tokens{color:#c8bfae}
body.dark .search-hit:hover{background:#2c2c32;border-color:#4a4a52}
body.dark .dl-slim-thread-btn:hover{background:#1a2a1a;border-color:#3a5a2a}
body.dark .dl-ugci-rel-chip:hover{background:#2a2038;border-color:#5a4a7a}
html,body{background:linear-gradient(165deg,#f5f0e8,#fdfaf5 60%,#f1ece2);color:var(--fg);
  font-family:var(--serif);line-height:1.6;min-height:100vh}
a{color:var(--red)}
/* .topBar buendelt .top + grammar-legend + lens-bar in EINEM sticky/fixed-
   Container -- vorher waren Legende/Lens-Bar eigenstaendige Geschwister
   NACH .top im DOM; sobald .top auf Mobile position:fixed wurde, rutschten
   sie im normalen Fluss an Position 0 und lagen unsichtbar HINTER dem
   fixierten Header. Jetzt bewegen sie sich immer gemeinsam mit ihm. */
.topBar{position:sticky;top:0;z-index:20;background:rgba(253,250,245,.94)}
.top{backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.top .home{color:var(--fg2);text-decoration:none;font-weight:700;font-size:14px;
  border:1px solid var(--line);border-radius:50px;padding:7px 14px;background:#fff}
.top .home:hover{background:#fff8ee}
.top .sp{flex:1}
/* Trennt die Kopfzeile in klare Funktionsgruppen (Navigation | Anzeige-Modi |
   Werkzeuge | Audio/Sprache | Darstellung) statt einer unsortiert wirkenden
   Reihe gleichrangiger Buttons. */
.top-divider{width:1px;align-self:stretch;min-height:20px;background:var(--line);margin:0 2px}
body.dark .top-divider{background:var(--line)}
@media(max-width:880px){.top-divider{display:none}}
.nav{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.nav select{font-family:inherit;font-size:14px;font-weight:700;color:var(--fg);background:#fff;
  max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
  border:1px solid var(--line);border-radius:50px;padding:6px 12px;cursor:pointer}
.nav button{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--fg2);width:var(--touch);height:var(--touch);line-height:1}
.nav button:hover:not(:disabled){background:#fff8ee;color:var(--red)}
.nav button:disabled{opacity:.35;cursor:default}
.zhmode{display:inline-flex;border:1px solid var(--line);border-radius:50px;overflow:hidden;background:#fff}
.zhmode button{border:none;background:none;font-family:inherit;font-size:13px;font-weight:700;
  padding:7px 13px;cursor:pointer;color:var(--fg2)}
.zhmode button.on{background:var(--red);color:#fff}
.zhvoice{display:inline-flex;border:1px solid var(--line);border-radius:50px;overflow:hidden;background:#fff}
.zhvoice button{border:none;background:none;font-family:inherit;font-size:12px;font-weight:800;
  padding:0 10px;height:var(--touch);cursor:pointer;color:var(--fg2);letter-spacing:.02em}
.zhvoice button.on{background:var(--red);color:#fff}

.wrap{display:flex;max-width:1280px;margin:0 auto;align-items:flex-start}
main{flex:1;min-width:0;padding:16px 18px 120px}
aside{width:auto;flex:0 0 clamp(280px, var(--aside-w), 640px);position:sticky;top:56px;align-self:flex-start;
  height:calc(100vh - 56px);overflow:auto;overscroll-behavior:contain;border-left:1px solid var(--line);
  background:rgba(255,253,249,.6);padding:22px 22px 60px}
/* Ziehgriff zwischen Haupttext und Seitenleiste — Desktop-Breiten-Anpassung,
   Vorbild sprechnetz-HSK_deploy (dieselbe Ziehgriff+clamp()-Logik). Nur
   sichtbar bei genug Platz (s. Media Query weiter unten für Mobile-Verhalten,
   das weiterhin die bestehende Hoehen-Ziehleiste .dl-handle nutzt). */
.gutter{flex:0 0 6px;align-self:stretch;cursor:col-resize;position:relative;touch-action:none}
.gutter::before{content:'';position:absolute;left:1px;top:0;bottom:0;width:2px;background:var(--line)}
.gutter:hover::before,.gutter.dragging::before{background:var(--gold)}
.gutter:focus-visible::before{background:var(--red)}
/* Seitenleiste nutzt denselben Zoom wie die Hauptseite (ein Regler fuer
   beide) -- die zoom-Property wird per JS direkt als Inline-Style auf
   #dlBody/#dlEmpty gesetzt (applyZoom() in reader.js), eine aequivalente
   Stylesheet-Regel wurde vom Parser aus unbekanntem Grund verworfen. */

.verse{border-bottom:1px solid var(--line);padding:12px 0 14px}
.vhead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.vnum{font-size:13px;font-weight:800;color:#fff;background:var(--red);border-radius:50px;
  min-width:30px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 8px}
.vnote-btn{border:1px solid #4a6fa5;background:#e8f0fb;border-radius:50px;cursor:pointer;
  font-size:12px;line-height:1;width:24px;height:24px;display:inline-flex;align-items:center;
  justify-content:center;padding:0;transition:background .12s,transform .12s}
.vnote-btn:hover{background:#4a6fa5;transform:scale(1.08)}
body.dark .vnote-btn{background:#1a2a3f;border-color:#4a6fa5}
body.dark .vnote-btn:hover{background:#4a6fa5}
.vplaces-btn{border:1px solid var(--gold);background:var(--hl2);border-radius:50px;cursor:pointer;
  font-size:11px;line-height:1;height:24px;display:inline-flex;align-items:center;gap:3px;
  padding:0 8px;text-decoration:none;color:var(--fg2);transition:background .12s,transform .12s}
.vplaces-btn:hover{background:var(--hl);transform:scale(1.05)}
.vplay{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:700;color:var(--fg2);padding:3px 9px;transition:background .12s,color .12s,border-color .12s}
.vplay:hover{background:#fff8ee;color:var(--red)}
.vplay-zt{border-color:#c8845a;color:#8a3800}
.vplay-zt:hover,.vplay-zt.on{background:#8a3800;color:#fff;border-color:#8a3800}
.vplay-anc{border-color:#5a7abf;color:#1a3a80}
.vplay-anc:hover,.vplay-anc.on{background:#1a3a80;color:#fff;border-color:#1a3a80}
.vplay-en{border-color:#5a9a6a;color:#1a5a30}
.vplay-en:hover,.vplay-en.on{background:#1a5a30;color:#fff;border-color:#1a5a30}
.vplay.no-audio{opacity:.65;cursor:pointer}
.vplay.no-audio:hover{background:#fff;color:var(--fg2)}

/* Row-Layout ist bewusst IMMER LTR (Play-Button links fix) — nur der innere
   .row-tokens-Wrapper bekommt bei Bedarf direction:rtl, damit RTL-Sprachen
   (he) ihre Wortreihenfolge intern korrekt zeigen, der Button aber nie auf
   die rechte Seite wandert. */
.row{display:flex;gap:6px;padding:2px 0;align-items:flex-start}
.row.anc{padding:4px 0}
.row-play{flex:0 0 auto;align-self:center}
.row-tokens{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:baseline;flex:1;min-width:0}
/* Basis-Groessen pro Schrift so kalibriert, dass sie optisch aehnlich gross
   wirken -- Noto Serif (grc/he, mit Diakritika/Nikud) liest bei gleicher px-
   Zahl deutlich groesser als Noto Sans (en), reiner px-Gleichstand haette
   Griechisch/Hebraeisch zu dominant und Englisch zu klein wirken lassen. */
.row.anc .row-tokens{font-size:22px;line-height:1.85}
.row.anc.rtl .row-tokens{direction:rtl;font-family:var(--heb)}
.row.anc.ltr .row-tokens{font-family:var(--grk)}
/* Alt-hebräische Schrift (Paläo-Hebräisch) — Text wird in reader.js
   (heToPaleo()) auf den eigenen Unicode-Block Phoenician (U+10900+)
   transliteriert, s. fonts.css "Noto Sans Phoenician". */
.row.anc.rtl.paleo .row-tokens{font-family:"Noto Sans Phoenician",var(--heb)}
/* Reichsaramäische Zwischenstufe (Imperial Aramaic) — analog zu .paleo oben,
   Text via heToImperialAramaic() auf den eigenen Unicode-Block U+10840+
   transliteriert, s. fonts.css "Noto Sans Imperial Aramaic". */
.row.anc.rtl.aramaic .row-tokens{font-family:"Noto Sans Imperial Aramaic",var(--heb)}
.row.zt .row-tokens{font-size:19px}
/* font-family explizit VOR Noto Sans TC auf Noto Serif umgestellt: Noto Sans
   TC (chinesisch orientiert) rendert den Apostroph in Kontraktionen
   ("God's") als ueberbreites, fullwidth-artiges Satzzeichen (gemessen 18px
   vs. 5px bei Noto Serif bei gleicher Schriftgroesse) -- sah wie ein
   zusaetzliches Leerzeichen vor dem "s" aus. Nur hier (englische Zeile)
   umgestellt, damit die globale --serif-Variable (Chinesisch als
   Hauptsprache) unangetastet bleibt. */
.row.en .row-tokens{font-size:18px;color:#3a2e20;font-family:"Noto Serif",serif}
.tok{padding:1px 4px;border-radius:6px;cursor:pointer;transition:background .12s,color .12s;border:1px solid transparent}
.tok:hover{background:var(--hl2)}
.tok.nolink{cursor:default;color:#9f927f}
.tok.nolink:hover{background:transparent}
/* Woerter ohne Strong-/Konzept-Zuordnung sehen jetzt aus wie alle anderen
   Woerter (keine eigene blasse/gepunktete Markierung mehr) -- bleiben aber
   klickbar (Audio + ehrlicher "keine Zuordnung"-Hinweis im Detail-Panel). */
.tok.nolink.unmapped{cursor:pointer;color:var(--fg1)}
/* Alignment-Markierung (Klick auf ein Wort): faerbt alle Vorkommen desselben
   Konzepts INNERHALB DES AKTUELLEN VERSES (Scoping in selectWord(), reader.js)
   in der Grammatik-Wortart-Farbe statt Rot -- konsistent mit body.grammar-mode
   weiter unten, damit dieselbe Farbe immer dieselbe Wortart bedeutet. Woerter
   ohne Konzept-Zuordnung (kein data-pos) fallen auf Rot zurueck. */
.tok.hl,.tok.sel{background:var(--red);border-color:var(--red);color:#fff}
.tok.hl[data-pos="verb"],.tok.sel[data-pos="verb"]{color:#1f2328;background:hsl(6 68% 82%);border-color:hsl(6 52% 60%)}
.tok.hl[data-pos="noun"],.tok.sel[data-pos="noun"]{color:#1f2328;background:hsl(210 62% 82%);border-color:hsl(210 48% 60%)}
.tok.hl[data-pos="adj"],.tok.sel[data-pos="adj"]{color:#1f2328;background:hsl(135 48% 80%);border-color:hsl(135 38% 60%)}
.tok.hl[data-pos="pron"],.tok.sel[data-pos="pron"]{color:#1f2328;background:hsl(180 52% 80%);border-color:hsl(180 42% 60%)}
.tok.hl[data-pos="prep"],.tok.sel[data-pos="prep"]{color:#1f2328;background:hsl(28 72% 82%);border-color:hsl(28 58% 60%)}
.tok.hl[data-pos="conj"],.tok.sel[data-pos="conj"]{color:#1f2328;background:hsl(48 78% 78%);border-color:hsl(48 62% 58%)}
.tok.hl[data-pos="art"],.tok.sel[data-pos="art"]{color:#1f2328;background:hsl(270 48% 82%);border-color:hsl(270 38% 62%)}
.tok.hl[data-pos="part"],.tok.sel[data-pos="part"]{color:#1f2328;background:hsl(250 32% 82%);border-color:hsl(250 26% 62%)}
.tok.hl[data-pos="adv"],.tok.sel[data-pos="adv"]{color:#1f2328;background:hsl(315 52% 82%);border-color:hsl(315 42% 60%)}
.tok.hl[data-pos="quant"],.tok.sel[data-pos="quant"]{color:#1f2328;background:hsl(78 48% 78%);border-color:hsl(78 38% 58%)}
.tok.playing{background:var(--play);color:#fff}
/* .tok.nolink(.unmapped) hat 3 Klassen (hoehere Spezifitaet als .tok.playing mit
   nur 2) und wuerde die Laufschrift-Hervorhebung sonst unsichtbar machen (Hintergrund/
   Farbe des grauen Zustands gewinnt gegen den Playing-Zustand). Explizite
   Kombi-Regel mit gleicher/hoeherer Spezifitaet stellt sicher, dass auch
   ausgegraute (satzzeichenfreie, aber konzeptlose) Woerter waehrend der
   Wiedergabe sichtbar markiert werden. */
.tok.nolink.playing,.tok.nolink.unmapped.playing{background:var(--play);color:#fff;border-color:var(--play)}
/* IPA-Modus */
.tok-ipa{display:none;font-family:'Doulos SIL','Noto Serif',serif;font-size:12px;color:var(--fg2);
  line-height:1.3;direction:ltr;text-align:center;letter-spacing:.01em}
body.ipa-mode .tok{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top}
body.ipa-mode .tok-ipa{display:block}
body.ipa-mode .row{align-items:flex-start}
#ipaToggle{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--fg2);padding:0 11px;height:var(--touch);
  letter-spacing:.04em;white-space:nowrap}
#ipaToggle:hover{background:#fff8ee;color:var(--red)}
#ipaToggle.on{background:var(--red);color:#fff;border-color:var(--red)}
#voiceToggle{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--fg2);padding:0 11px;height:var(--touch);
  letter-spacing:.04em;white-space:nowrap}
#voiceToggle:hover{background:#fff8ee;color:var(--red)}
/* Kontinuierliches Vorlesen */
#contReadToggle{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--fg2);padding:0 11px;height:var(--touch);
  letter-spacing:.04em;white-space:nowrap}
#contReadToggle:hover{background:#fff8ee;color:var(--red)}
#contReadToggle.on{background:#8a4a1a;color:#fff;border-color:#8a4a1a}
/* Geschwindigkeitsregler im Voice-Panel */
.rate-row{display:flex;align-items:center;gap:10px;padding:2px 0 12px}
.rate-lbl{font-size:12px;font-weight:700;color:var(--fg2);white-space:nowrap}
.rate-row input[type=range]{flex:1;accent-color:var(--red)}
.rate-val{font-size:12px;font-weight:800;color:var(--fg);min-width:38px;text-align:right}
/* Text-Zoom */
.zoom-ctl{display:inline-flex;border:1px solid var(--line);border-radius:50px;overflow:hidden;background:#fff}
.zoom-ctl button{border:none;background:none;font-family:inherit;font-size:12px;font-weight:800;
  padding:0 12px;height:var(--touch);cursor:pointer;color:var(--fg2)}
.zoom-ctl button:hover{background:#fff8ee;color:var(--red)}
.zoom-ctl button:first-child{border-right:1px solid var(--line)}
/* Alignment-Farb-Toggle */
#alignToggle{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--fg2);padding:0 11px;height:var(--touch);
  letter-spacing:.04em;white-space:nowrap}
#alignToggle:hover{background:#fff8ee;color:var(--red)}
#alignToggle.on{background:#4a6fa5;color:#fff;border-color:#4a6fa5}
body.align-mode .tok.can-align:not(.hl):not(.sel):not(.playing):not(.aud-loading){
  color:#1f2328;background:hsl(var(--ah) 75% 84%);border-color:hsl(var(--ah) 65% 66%)}
body.align-mode .tok.can-align:not(.hl):not(.sel):not(.playing):not(.aud-loading):hover{
  color:#1f2328;background:hsl(var(--ah) 75% 76%);border-color:hsl(var(--ah) 65% 56%)}
/* Grammar Toggle */
#grammarToggle{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--fg2);padding:0 11px;height:var(--touch);
  letter-spacing:.04em;white-space:nowrap}
#grammarToggle:hover{background:#fff8ee;color:var(--red)}
#grammarToggle.on{background:#3a8a45;color:#fff;border-color:#3a8a45}
#grammarToggle.expert{background:#2a5d8a;border-color:#2a5d8a}
/* Grammar POS — body.grammar-mode aktiviert Farben */
body.grammar-mode .tok[data-pos="verb"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(6 68% 87%);border-color:hsl(6 52% 68%)}
body.grammar-mode .tok[data-pos="noun"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(210 62% 87%);border-color:hsl(210 48% 68%)}
body.grammar-mode .tok[data-pos="adj"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(135 48% 86%);border-color:hsl(135 38% 67%)}
body.grammar-mode .tok[data-pos="pron"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(180 52% 86%);border-color:hsl(180 42% 67%)}
body.grammar-mode .tok[data-pos="prep"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(28 72% 87%);border-color:hsl(28 58% 68%)}
body.grammar-mode .tok[data-pos="conj"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(48 78% 84%);border-color:hsl(48 62% 65%)}
body.grammar-mode .tok[data-pos="art"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(270 48% 88%);border-color:hsl(270 38% 70%)}
body.grammar-mode .tok[data-pos="part"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(250 32% 88%);border-color:hsl(250 26% 70%)}
body.grammar-mode .tok[data-pos="adv"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(315 52% 87%);border-color:hsl(315 42% 68%)}
body.grammar-mode .tok[data-pos="quant"]:not(.hl):not(.sel):not(.playing):not(.aud-loading){color:#1f2328;background:hsl(78 48% 85%);border-color:hsl(78 38% 67%)}
/* Grammar Card in Detail Panel */
.dl-gram-pos{display:inline-block;font-size:var(--fs-body);font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;padding:2px 10px;border-radius:50px;margin:4px 0 6px;border:1px solid transparent}
.dl-gram-pos.verb{background:hsl(6 68% 87%);color:hsl(6 52% 38%);border-color:hsl(6 52% 68%)}
.dl-gram-pos.noun{background:hsl(210 62% 87%);color:hsl(210 48% 38%);border-color:hsl(210 48% 68%)}
.dl-gram-pos.prep{background:hsl(28 72% 87%);color:hsl(28 58% 38%);border-color:hsl(28 58% 68%)}
.dl-gram-pos.conj{background:hsl(48 78% 84%);color:hsl(48 50% 30%);border-color:hsl(48 62% 65%)}
.dl-gram-pos.art{background:hsl(270 48% 88%);color:hsl(270 38% 38%);border-color:hsl(270 38% 70%)}
.dl-gram-pos.part{background:hsl(250 32% 88%);color:hsl(250 26% 38%);border-color:hsl(250 26% 70%)}
.dl-gram-pos.pron{background:hsl(180 52% 86%);color:hsl(180 42% 30%);border-color:hsl(180 42% 67%)}
.dl-gram-pos.adv{background:hsl(315 52% 87%);color:hsl(315 42% 38%);border-color:hsl(315 42% 68%)}
.dl-gram-pos.quant{background:hsl(78 48% 85%);color:hsl(78 38% 28%);border-color:hsl(78 38% 67%)}
/* Gruppierungs-Rahmen fuer Funktion+Morphologie+POS (vorher 3 lose Bloecke) */
.dl-gram-box{margin:10px 0 4px;padding:10px 14px 12px;border:1px solid var(--line);
  border-left:4px solid var(--line);border-radius:8px}
.dl-gram-box.pos-verb{border-left-color:hsl(6 52% 62%)}
.dl-gram-box.pos-noun{border-left-color:hsl(210 48% 62%)}
.dl-gram-box.pos-prep{border-left-color:hsl(28 58% 62%)}
.dl-gram-box.pos-conj{border-left-color:hsl(48 62% 58%)}
.dl-gram-box.pos-art{border-left-color:hsl(270 38% 65%)}
.dl-gram-box.pos-part{border-left-color:hsl(250 26% 65%)}
.dl-gram-box.pos-pron{border-left-color:hsl(180 42% 60%)}
.dl-gram-box.pos-adv{border-left-color:hsl(315 42% 62%)}
.dl-gram-box.pos-quant{border-left-color:hsl(78 38% 58%)}
.dl-gram-box .dl-grammar-fn{margin-top:0}
.dl-gram-box .dl-morph{margin:8px 0 0}
.dl-gram-box .dl-grid{margin-top:10px;border-top:1px dashed var(--line);padding-top:8px}
.dl-gram-explain{margin:8px 0 2px;font-size:var(--fs-body);line-height:1.5;color:var(--fg1)}
.dl-gram-explain-zh{font-size:var(--fs-body);color:var(--fg2);font-family:'Noto Sans TC','Noto Sans SC',serif;margin-bottom:6px}
/* Grammar Legend */
.grammar-legend{display:none;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 14px;
  background:#f8f8f5;border-bottom:1px solid var(--line)}
body.grammar-mode .grammar-legend{display:flex}
.grammar-legend-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:50px;white-space:nowrap}
.grammar-legend-hint{font-size:11px;color:var(--fg2);margin-left:auto}

/* Morph-Dekodierung */
.dl-morph{margin:8px 0 6px;display:flex;flex-direction:column;gap:3px}
.dl-morph-simple{font-size:var(--fs-body);color:var(--fg1);line-height:1.5;padding-left:2px;font-family:'Noto Sans TC','Noto Sans SC',serif}
.dl-morph-simple-en{font-size:var(--fs-meta);color:var(--fg2);line-height:1.4;padding-left:2px}
.dl-morph-raw{display:inline-block;font-size:var(--fs-meta);color:#9a8878;font-family:monospace;
  padding:2px 7px;background:#f5f0e8;border-radius:4px;letter-spacing:.03em;margin-top:2px}
/* ═══ Lens Bar ═══════════════════════════════════════════════════════════════ */
.lens-bar{display:none;flex-wrap:wrap;gap:5px;padding:6px 14px;
  background:#eef1f6;border-bottom:1px solid var(--line);align-items:center}
body.grammar-mode .lens-bar{display:flex}
.lens-btn{border:1px solid #c8d0dc;background:#fff;border-radius:50px;cursor:pointer;
  font-size:11px;font-weight:800;color:#5a6a7a;padding:2px 11px;height:24px;
  letter-spacing:.04em;white-space:nowrap;font-family:inherit;transition:all .15s}
.lens-btn:hover{background:#fff8ee;border-color:var(--red);color:var(--red)}
.lens-btn.on{color:#fff;border-color:transparent}
.lens-btn[data-lens="grammar"].on{background:#7a50a0}
.lens-btn[data-lens="verb"].on{background:#c04030}
.lens-btn[data-lens="relation"].on{background:#4a8a55}
.lens-btn[data-lens="bridge"].on{background:#4a6fa5}
/* ── Grammar Lens (UGCI focus) ─────────────────────────────────────────────── */
body.grammar-lens .tok:not([data-cid^="UGCI"]):not(.hl):not(.sel):not(.playing):not(.aud-loading){
  opacity:.18;filter:grayscale(.6)}
body.grammar-lens .tok[data-cid^="UGCI"]{box-shadow:0 0 0 2px currentColor}
body.grammar-lens .tok[data-ugci-short]::after{content:attr(data-ugci-short);display:block;
  font-size:8px;font-weight:900;text-align:center;opacity:.75;margin-top:1px;letter-spacing:.02em}
/* ── Verb Lens (aspect coloring) ───────────────────────────────────────────── */
body.verb-lens .tok:not([data-pos="verb"]):not(.hl):not(.sel):not(.playing):not(.aud-loading){
  opacity:.18;filter:grayscale(.6)}
body.verb-lens .tok[data-vaspect="completed"]:not(.hl):not(.sel){
  background:hsl(30 88% 82%);border-color:hsl(30 68% 55%);color:hsl(30 55% 25%)}
body.verb-lens .tok[data-vaspect="ongoing"]:not(.hl):not(.sel){
  background:hsl(210 78% 82%);border-color:hsl(210 58% 52%);color:hsl(210 55% 22%)}
body.verb-lens .tok[data-vaspect="command"]:not(.hl):not(.sel){
  background:hsl(0 82% 82%);border-color:hsl(0 62% 52%);color:hsl(0 55% 26%)}
body.verb-lens .tok[data-vaspect="stative"]:not(.hl):not(.sel){
  background:hsl(140 55% 80%);border-color:hsl(140 40% 50%);color:hsl(140 55% 20%)}
/* ── Relation Lens (discourse connectors) ──────────────────────────────────── */
body.relation-lens .tok:not([data-rel]):not(.hl):not(.sel):not(.playing):not(.aud-loading){
  opacity:.14;filter:grayscale(.8)}
body.relation-lens .tok[data-rel]{font-weight:900}
body.relation-lens .tok[data-rel="link"]:not(.hl):not(.sel){background:hsl(48 88% 80%);border-color:hsl(48 72% 50%)}
body.relation-lens .tok[data-rel="sequence"]:not(.hl):not(.sel){background:hsl(22 88% 82%);border-color:hsl(22 68% 52%)}
body.relation-lens .tok[data-rel="purpose"]:not(.hl):not(.sel){background:hsl(280 68% 84%);border-color:hsl(280 52% 58%)}
body.relation-lens .tok[data-rel="negation"]:not(.hl):not(.sel){background:hsl(0 80% 84%);border-color:hsl(0 60% 58%)}
body.relation-lens .tok[data-rel="source"]:not(.hl):not(.sel){background:hsl(165 68% 82%);border-color:hsl(165 48% 50%)}
body.relation-lens .tok[data-rel="direction"]:not(.hl):not(.sel){background:hsl(200 78% 84%);border-color:hsl(200 58% 52%)}
body.relation-lens .tok[data-rel="comparison"]:not(.hl):not(.sel){background:hsl(90 65% 82%);border-color:hsl(90 48% 50%)}
body.relation-lens .tok[data-rel]::after{content:attr(data-rel-zh);display:block;
  font-size:8px;font-weight:900;text-align:center;opacity:.8;margin-top:1px}
/* ── Bridge Panel ──────────────────────────────────────────────────────────── */
.bridge-panel{padding:12px 14px}
.bridge-head{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#4a6fa5;margin-bottom:10px}
.bridge-table{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.bridge-row-wrap{display:flex;gap:8px;align-items:flex-start}
.bridge-lang-lbl{flex:0 0 28px;font-size:var(--fs-label);font-weight:700;color:var(--fg2);
  text-transform:uppercase;padding-top:4px}
.bridge-toks{display:flex;flex-wrap:wrap;gap:3px}
.bridge-tok{padding:2px 6px;border-radius:4px;border:1px solid var(--line);font-size:var(--fs-meta)}
.bridge-tok.verb{border-color:hsl(6 52% 68%);background:hsl(6 68% 92%)}
.bridge-tok.noun{border-color:hsl(210 48% 68%);background:hsl(210 62% 92%)}
.bridge-tok.art{border-color:hsl(270 38% 70%);background:hsl(270 48% 92%)}
.bridge-tok.prep{border-color:hsl(28 58% 68%);background:hsl(28 72% 92%)}
.bridge-tok.conj{border-color:hsl(48 62% 65%);background:hsl(48 78% 92%)}
.bridge-insight{font-size:var(--fs-meta);color:var(--fg1);padding:5px 0 5px 10px;
  border-left:3px solid #4a6fa5;margin:4px 0;line-height:1.5}
.bridge-vnum{cursor:pointer;user-select:none}
.bridge-vnum:hover{text-decoration:underline}
/* Badge-Zeile (Strong + Lemma nebeneinander) */
.dl-badge-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.dl-lemma{font-size:var(--fs-body);color:var(--fg2);padding:3px 10px;border:1px solid var(--line);
  border-radius:50px}
.dl-lemma.he{font-family:var(--heb);direction:rtl;font-size:26px;padding:4px 14px}
.dl-lemma.grc{font-family:var(--grk);font-size:22px;padding:4px 14px}
.dl-translit-inline{display:inline-block;font-size:var(--fs-meta)}
/* Grammar-Concept-Panel (UGCI) */
.dl-gc-label{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;margin:10px 0 1px}
.dl-gc-cat{font-size:var(--fs-body);font-weight:800;color:#4a6fa5;margin-bottom:1px}
.dl-gc-role{font-size:var(--fs-body);color:#6a8fc0;font-style:italic;margin-bottom:10px}
/* Concept Explorer (in-chapter) */
.dl-concept{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
/* Summary hatte, anders als .dl-corr/.dl-gene/.dl-ency .lbl, gar keine eigene
   Regel — fiel auf die Browser-Vorgabe (~16px, nicht fett, ohne Grossschrift)
   zurueck statt wie seine Akkordeon-Geschwister auszusehen. */
.dl-concept .lbl{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.dl-concept-count{font-size:var(--fs-meta);font-weight:800;color:var(--red);display:inline-block;margin-left:4px}
.dl-concept-label{font-size:var(--fs-body);color:var(--fg2)}
.dl-concept-forms{margin:8px 0 6px;display:flex;flex-direction:column;gap:3px}
.dl-concept-form{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body)}
.dl-concept-flang{flex:0 0 26px;font-size:var(--fs-label);font-weight:700;color:var(--fg2);text-transform:uppercase}
.dl-concept-fwords.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body)}
.dl-concept-verses{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.dl-concept-vref{font-size:var(--fs-meta);padding:3px 9px;border-radius:50px;background:var(--hl2);
  border:1px solid var(--gold);color:var(--fg);cursor:pointer;font-weight:700}
.dl-concept-vref:hover{background:var(--hl)}

#detail .empty{color:var(--fg2);font-size:var(--fs-body);line-height:1.7;margin-top:8px}
.dl-anc{direction:rtl;font-size:46px;line-height:1.2;margin:4px 0 2px;font-family:var(--heb)}
.dl-anc.ltr{direction:ltr;font-family:var(--grk)}
.dl-translit{font-size:var(--fs-body);color:var(--fg2);font-style:italic;
  font-family:'Doulos SIL','Noto Serif',serif}
.dl-translit.rtl{text-align:right}
.dl-ipa{font-size:var(--fs-body);color:var(--fg2);font-family:'Doulos SIL','Noto Serif',serif}
.dl-ipa.rtl{text-align:right}
.dl-word-plain{font-size:32px;line-height:1.2;margin:4px 0 2px;font-family:var(--serif)}
/* .en: Anzeigewort der Englisch-Zeile -- gleicher Apostroph-Fix wie .dl-gloss
   & Co. (chinesische Woerter behalten bewusst var(--serif)). */
.dl-word-plain.en{font-family:"Noto Serif",serif}
.dl-unmapped-note{margin-top:12px;font-size:var(--fs-body);color:var(--fg2);font-style:italic}
.dl-strong{display:inline-block;margin:12px 0 2px;background:var(--red);color:#fff;font-weight:800;
  font-size:var(--fs-body);letter-spacing:.04em;padding:4px 12px;border-radius:50px}
.dl-ugci{display:inline-block;margin:12px 0 2px;background:#4a6fa5;color:#fff;font-weight:800;
  font-size:var(--fs-body);letter-spacing:.05em;padding:4px 12px;border-radius:50px}
.dl-ugci-sub{font-size:var(--fs-meta);color:#4a6fa5;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
/* font-family wie .row.en .row-tokens: reines Englisch, Noto Serif statt der
   globalen --serif-Reihenfolge (Noto Sans TC zuerst) wegen deren zu breitem
   Apostroph-Glyph in Kontraktionen. */
.dl-gloss{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:1.6;font-family:"Noto Serif",serif}
.dl-zh-gloss{font-size:var(--fs-body);font-family:'Noto Sans TC','Noto Sans SC',serif;color:var(--fg1);margin:6px 0 2px}
.dl-grammar-fn{font-size:var(--fs-body);color:#4a6fa5;margin-top:4px}
.dl-grammar-fn-lbl{font-weight:700;letter-spacing:.03em;text-transform:uppercase;font-size:var(--fs-label);margin-right:6px}
.dl-anc-sub{font-size:var(--fs-label);color:var(--fg2);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;margin-bottom:4px}
.dl-tr-block{margin:12px 0 6px;display:flex;flex-direction:column;gap:4px}
.dl-tr-item{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body);line-height:1.5}
.dl-tr-lang{flex:0 0 22px;font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;color:var(--fg2);text-transform:uppercase}
.dl-tr-words{color:var(--fg1);font-size:var(--fs-body)}
.dl-tr-words.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body)}
.dl-grid{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-size:var(--fs-body)}
.dl-grid .r{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed var(--line)}
.dl-grid .k{flex:0 0 92px;color:var(--fg2);font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.dl-grid .v{flex:1}
.dl-corr{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.dl-corr .lbl{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
/* Nutzerfund: derselbe Apostroph-Bug wie oben bei .row.en/.dl-gloss ("Yahweh's"
   zeigte eine Leerzeile) -- der Familien-Bereich (Namen, alsoCalled, Events,
   Easton's-Text) ist komplett aus BibleData/Theographic, also durchgehend
   Englisch, hatte aber nie den Noto-Serif-Fix bekommen (neu in dieser Session
   hinzugekommen, nach dem urspruenglichen Fix). Auf dem ganzen Container statt
   einzeln je Unterklasse -- Chinesische Zeichen in den statischen UI-Labels
   (「家族 · Family」 etc.) faellt der Browser bei fehlenden Glyphen in Noto
   Serif automatisch pro Zeichen auf einen Systemfont zurueck (Standardverhalten,
   nicht auf die deklarierte font-family-Kette beschraenkt), also unproblematisch. */
.dl-gene{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;font-family:"Noto Serif",serif}
.dl-gene .lbl{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.dl-gene-tribe{text-transform:none;font-weight:400;letter-spacing:0}
.dl-gene-ambig{font-size:var(--fs-meta);color:var(--fg2);background:var(--hl2);border-radius:8px;padding:6px 10px;margin-bottom:8px}
/* Gruppierte Beziehungsliste (Eltern/Kinder/Geschwister/Partner/Vorfahren
   &Nachkommen/Weitere) statt einer einzigen undifferenzierten Liste, jede
   Person mit Geschlechtsfarbe wie im Stammbaum -- dieselbe Palette wie
   .dl-ft-node.dl-ft-male/.dl-ft-female weiter unten, fuer eine durchgaengige
   Farbsprache im ganzen Familien-Panel. */
.dl-gene-rel-group{margin-bottom:10px}
.dl-gene-rel-group:last-child{margin-bottom:0}
.dl-gene-rel-group-lbl{font-size:var(--fs-label);font-weight:700;color:var(--fg2);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.dl-gene-rel-group-items{display:flex;flex-direction:column;gap:2px}
.dl-gene-rel{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;border:1px solid transparent}
.dl-gene-rel.has-jump{cursor:pointer}
.dl-gene-rel.has-jump:hover{filter:brightness(.96)}
.dl-gene-rel-male{background:hsl(210 55% 95%);border-color:hsl(210 45% 82%)}
.dl-gene-rel-female{background:hsl(345 60% 96%);border-color:hsl(345 45% 84%)}
body.dark .dl-gene-rel-male{background:hsl(210 40% 20%);border-color:hsl(210 40% 32%)}
body.dark .dl-gene-rel-female{background:hsl(345 35% 21%);border-color:hsl(345 35% 32%)}
.dl-gene-rel-type{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.03em;flex:0 0 90px}
.dl-gene-rel-name{font-size:var(--fs-body)}
.dl-gene-src{font-size:12px;color:var(--fg2);margin-top:var(--sp-2)}
.dl-gene-src a{color:var(--fg2)}
.dl-gene .lbl{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dl-ency{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.dl-ency .lbl{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
/* gleicher Apostroph-Fix wie .dl-gloss/.dl-gene oben -- Easton's ist reiner
   Englisch-Text (auch der eigenstaendige "背景 Background"-Pfad ausserhalb
   der Genealogie, s. enrichWithEncyclopedia()). */
.dl-ency-text{font-size:var(--fs-body);line-height:1.7;font-family:"Noto Serif",serif}
.dl-ency-text p{margin:0 0 10px 0}
.dl-ency-text p:last-child{margin-bottom:0}
/* #illusView — eigenständiger Hauptseiten-Reiter (neben 🗺 Karte, 🖊
   Recherche), zeigt NUR verseRef-basierte (also aus dem Originalwerk
   übernommene) Illustrationen des aktuellen Kapitels, s. reader.js
   #openIllustrationsView / encyclopedia.js#illustrationsForChapter. */
#illusView{padding:var(--sp-3)}
.illus-view-header{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.illus-view-loading, .illus-view-empty{color:var(--fg2);font-size:var(--fs-body);line-height:1.6}
.illus-view-group{margin-bottom:20px}
.illus-view-group-lbl{font-size:13px;font-weight:700;color:var(--fg2);margin-bottom:6px}
.dl-illus-card.illus-view-card{width:110px;height:110px}
/* 插圖 · Illustrations — eigene Kategorie, Stichwort-basierte Bildkacheln
   aus drei klassischen gemeinfreien Bibel-Bildwerken (Doré/Schnorr/Merian). */
.dl-illus{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.dl-illus .lbl{font-size:var(--fs-label);color:var(--fg2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.dl-illus-group{margin-top:10px}
.dl-illus-group:first-of-type{margin-top:0}
.dl-illus-group .lbl{font-size:12px;font-weight:700;color:var(--fg2);cursor:pointer}
.dl-illus-grid{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.dl-illus-card, .map-illus-card{
  display:block;width:92px;height:92px;border-radius:8px;overflow:hidden;
  border:1px solid var(--line);padding:0;background:none;cursor:pointer;
}
.map-illus-card{width:84px;height:84px}
.dl-illus-card img, .map-illus-card img{width:100%;height:100%;object-fit:cover;display:block}
/* In-Page-Lightbox für Illustrations-Kacheln (Reader UND Karte, da beide
   reader.css laden) — Klick bleibt in der App, statt zur Commons-Dateiseite
   zu verlinken (Nutzeranforderung: "ich will nicht bei Klick auf einer
   externen Seite landen"). */
.illus-lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:9999;
  display:none;align-items:center;justify-content:center;padding:24px;
}
.illus-lightbox.open{display:flex}
.illus-lightbox-box{
  position:relative;max-width:min(92vw,720px);max-height:90vh;
  background:var(--bg);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.illus-lightbox-box img{display:block;max-width:100%;max-height:72vh;object-fit:contain;margin:0 auto;background:#000}
.illus-lightbox-cap{padding:10px 14px}
.illus-lightbox-title{font-size:15px;font-weight:700;color:var(--fg)}
.illus-lightbox-meta{font-size:12px;color:var(--fg2);margin-top:2px}
.illus-lightbox-close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;
  border:none;background:rgba(0,0,0,.55);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.illus-lightbox-close:hover{background:rgba(0,0,0,.75)}
.illus-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:none;background:rgba(0,0,0,.45);color:#fff;font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.illus-lightbox-nav:hover{background:rgba(0,0,0,.7)}
.illus-lightbox-prev{left:8px}
.illus-lightbox-next{right:8px}
.illus-lightbox-count{
  position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.55);color:#fff;font-size:11px;padding:2px 8px;border-radius:20px;
}
/* 🖼 N — Vers-Abzeichen fuer verseRef-genau zugeordnete Illustrationen,
   analog zum .vplaces-btn (🗺 N) Orts-Abzeichen. */
.villus-btn{border:1px solid var(--gold);background:var(--hl2);border-radius:50px;cursor:pointer;
  font-size:11px;line-height:1;height:24px;display:inline-flex;align-items:center;gap:3px;
  padding:0 8px;text-decoration:none;color:var(--fg2);transition:background .12s,transform .12s}
.villus-btn:hover{background:var(--hl);transform:scale(1.05)}
/* Drei unabhängige Lexikon-Quellen (Easton/ISBE/Smith) je eigenes
   <details> innerhalb von .dl-ency — getrennt gehalten, nie vermischt
   (Nutzeranforderung: "Die einzelnen Quellen getrennt halten und
   übersichtlich einordnen"). */
.dl-ency-source{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.dl-ency-source:first-of-type{margin-top:0}
.dl-ency-source .lbl{font-size:12px;font-weight:700;color:var(--fg2);cursor:pointer}
.ency-vref, .ency-xref{
  font:inherit; border:none; padding:0 2px; margin:0 -1px; border-radius:4px; cursor:pointer;
}
.ency-vref{ background:var(--hl2); color:var(--fg); font-weight:600; }
.ency-vref:hover{ background:var(--hl); }
.ency-xref{ background:none; color:var(--play); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.ency-xref:hover{ background:var(--hl2); }
/* Stammbaum war bisher schwer zu entdecken (kleiner Inline-Knopf, nur nach
   Aufklappen sichtbar) — Hinweis-Badge jetzt schon im zugeklappten
   Summary-Text (dl-gene-tree-hint), Knopf selbst deutlich größer/farbig. */
.dl-gene-tree-hint{font-size:11px;font-weight:800;text-transform:none;letter-spacing:0;
  color:var(--play);background:rgba(31,111,120,.12);border:1px solid var(--play);
  border-radius:50px;padding:3px 10px;white-space:nowrap;flex:0 0 auto}
.dl-gene-tree-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  font-size:14px;font-weight:800;text-transform:none;letter-spacing:0;color:#fff;
  background:var(--play);border:1px solid var(--play);border-radius:12px;padding:10px 14px;
  margin-bottom:10px;cursor:pointer;transition:filter .12s}
.dl-gene-tree-btn:hover{filter:brightness(1.1)}
body.dark .dl-gene-tree-hint{background:rgba(60,170,180,.16)}
.dl-gene-enrich{font-size:var(--fs-meta);color:var(--fg2);background:var(--hl2);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.dl-gene-years{font-weight:700;margin-bottom:4px}
.dl-gene-years-approx{font-weight:400;font-size:var(--fs-meta)}
.dl-gene-also{margin-bottom:4px}
.dl-gene-places{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.dl-gene-place{border-radius:6px;padding:1px 2px}
.dl-gene-place.has-jump{cursor:pointer;text-decoration:underline;text-decoration-style:dotted}
.dl-gene-place.has-jump:hover{background:var(--hl)}
.dl-gene-member{margin-bottom:4px}
.dl-gene-events{margin-top:2px}
.dl-gene-events-lbl{font-size:var(--fs-label);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.dl-gene-event{display:inline-block;font-size:var(--fs-meta);background:var(--hl);border-radius:50px;padding:2px 9px;margin:0 4px 4px 0}
.dl-gene-event.has-jump{cursor:pointer}
.dl-gene-event.has-jump:hover{filter:brightness(.95)}
.dl-gene-event-more{display:inline-block;font-size:var(--fs-meta);color:var(--fg2);padding:2px 4px}
.dl-gene-dict{line-height:1.5}
.dl-gene-tree-slot{margin-top:8px}
.dl-gene-tree-loading{font-size:var(--fs-meta);color:var(--fg2);padding:8px 0}
.dl-ft-legend{display:flex;gap:14px;margin-bottom:6px;font-size:var(--fs-label)}
.dl-ft-legend-item{display:flex;align-items:center;gap:5px;color:var(--fg2)}
.dl-ft-legend-item::before{content:"";width:11px;height:11px;border-radius:3px;display:inline-block}
.dl-ft-legend-item.dl-ft-male::before{background:hsl(210 55% 82%);border:1px solid hsl(210 45% 60%)}
.dl-ft-legend-item.dl-ft-female::before{background:hsl(345 60% 86%);border:1px solid hsl(345 45% 65%)}
/* Horizontal scrollbarer Rahmen statt erzwungenem width:100% auf dem SVG --
   bei vielen parallelen Geschwistern/Kindern wurde vorher jeder Knoten
   proportional bis zur Unlesbarkeit gestaucht (Nutzerfund: "so winzig, das
   er nicht lesbar ist"). Das SVG traegt jetzt seine eigene feste Pixelgroesse
   (width/height-Attribute in familyTreeSvgHtml()), dieser Container scrollt.
   Zentrierung ueber margin:auto AUF DEM SVG, nicht display:flex + justify-
   content:center auf dem Container: Flexbox-Zentrierung erlaubt bei
   ueberlaufendem Inhalt negative effektive Offsets auf BEIDEN Seiten, wodurch
   der linke Rand ueber overflow-x:auto nicht mehr erreichbar war (Nutzerfund:
   "muss in beide Richtungen bis zum Ende scrollbar sein, im Moment ist nach
   links begrenzt"). margin:0 auto verhaelt sich anders: passt der Baum in den
   Container, wird er wie gewuenscht zentriert; ist er breiter, loest CSS den
   ueberbestimmten auto-Rand auf beiden Seiten auf 0 auf (Standardverhalten,
   kein Browser-Sonderfall) -- das SVG faengt dann normal links buendig an und
   ist ganz regulaer bis zum rechten Rand scrollbar, keine unerreichbare Seite. */
.dl-ft-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:2px 4px}
.dl-ft-svg{display:block;margin:0 auto}
.dl-ft-line{stroke:var(--line);stroke-width:1.2}
.dl-ft-line-thin{stroke-dasharray:2 2;opacity:.7}
.dl-ft-node rect{fill:var(--hl2);stroke:var(--line);stroke-width:1}
.dl-ft-node text{fill:var(--fg);font-size:11px}
.dl-ft-node.dl-ft-known{cursor:pointer}
.dl-ft-node.dl-ft-known:hover rect{fill:var(--hl)}
.dl-ft-node.dl-ft-unknown rect{fill:none;stroke-dasharray:3 2;opacity:.6}
.dl-ft-node.dl-ft-unknown text{opacity:.6}
/* Geschlecht (BibleData "sex"-Feld, nur wenn bekannt) -- dezente Pastellfarben,
   analog zur Grammatik-Wortart-Palette weiter oben (helle Fuellung + dunklerer
   Rand, in Light/Dark je eigene Werte). */
.dl-ft-node.dl-ft-male rect{fill:hsl(210 55% 88%);stroke:hsl(210 45% 65%)}
.dl-ft-node.dl-ft-female rect{fill:hsl(345 60% 90%);stroke:hsl(345 45% 68%)}
body.dark .dl-ft-node.dl-ft-male rect{fill:hsl(210 40% 26%);stroke:hsl(210 45% 55%)}
body.dark .dl-ft-node.dl-ft-female rect{fill:hsl(345 35% 28%);stroke:hsl(345 45% 60%)}
.dl-ft-node.dl-ft-focus rect{fill:var(--gold);stroke:var(--gold)}
.dl-ft-node.dl-ft-focus text{font-weight:700}
.cw{display:inline-flex;align-items:center;gap:6px;margin:3px 5px 3px 0;padding:4px 11px;border-radius:50px;
  background:var(--hl2);border:1px solid var(--gold);font-size:var(--fs-body);cursor:pointer}
.cw:hover{background:var(--hl)}
.cw.anc.rtl{direction:rtl;font-family:var(--heb)}
.cw.anc.ltr{font-family:var(--grk)}
.cw .spk{font-size:var(--fs-meta);color:var(--red)}

@media(max-width:880px){
  .wrap{flex-direction:column}
  .gutter{display:none} /* Mobile nutzt weiterhin die Hoehen-Ziehleiste .dl-handle statt Breiten-Ziehgriff */
  /* Kopfzeile auf Mobilgeraeten bewusst position:fixed statt sticky (robuster
     gegen bekannte iOS-Safari-Eigenheiten mit sticky+backdrop-filter in
     verschachtelten Scroll-Kontexten) -- reader.js misst die tatsaechliche
     Hoehe live in --top-h (ResizeObserver, wraps je nach Breite auf 2-3
     Zeilen), .wrap bekommt exakt so viel padding-top, nie mehr/weniger. */
  .topBar{position:fixed;left:0;right:0;top:0}
  .wrap{padding-top:var(--top-h,120px)}
  /* Bottom-Sheet ist auf Mobilgeraeten IMMER sichtbar (nie ganz verborgen) —
     zeigt im Leerzustand #dlEmpty, statt erst nach einer Aktion zu erscheinen
     (Vorbild sprechnetz-HSK_deploy read-v2.html: dort ist die Seitenleiste
     von Anfang an offen). ".compact" ersetzt das vorherige "geschlossen"
     (Griff antippen statt schliessen) — reduziert auf einen 58px-Streifen
     statt komplett zu verschwinden, damit man sie jederzeit wieder aufziehen
     kann, ohne erneut einen Vers/ein Wort anzuklicken. */
  aside{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    height:48vh;max-height:82vh;min-height:22vh;
    border-left:none;border-top:none;background:var(--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}
  aside.compact{transform:translateY(calc(100% - 58px))}
  aside.dragging{transition:none}
  /* Kein X-Schliessen-Knopf mehr (Vorbild HSK: dort ebenfalls kein Close-Button
     auf dieser Breite) — "schliessen" heisst jetzt "zum Griff-Streifen
     einklappen", nicht mehr "verschwinden". */
  .dl-close{display:none!important}
  /* Bodenabstand haelt reader.js live nach (syncMobileMainPad()), damit der
     dauerhaft sichtbare Bottom-Sheet nie die letzten Zeilen des Lesetexts
     verdeckt -- Vorbild sprechnetz-HSK_deploy (--v2-mobile-main-pad). */
  main{padding-bottom:var(--mobile-main-pad,30px)}
}
.dl-close{display:none;position:absolute;top:10px;right:14px;border:none;background:none;
  font-size:26px;line-height:1;color:var(--fg2);cursor:pointer}

/* "← Zurück" — erscheint nur, wenn eine Referenz (Kommentar-Querverweis,
   Stammbaum, verwandter Grammatik-Begriff, Recherche-Sprung, …) verfolgt
   wurde; führt zur vorherigen Stelle + vorherigem Panel-Zustand zurück. */
.dl-back-btn{
  display:inline-flex; align-items:center; gap:4px; margin:0 0 10px; padding:6px 12px;
  min-height:var(--touch); border:1px solid var(--gold); border-radius:50px;
  background:var(--card); color:var(--fg); font:700 12px/1 var(--serif); cursor:pointer;
}
.dl-back-btn:hover{background:var(--hl2)}
.dl-back-btn[hidden]{display:none}

/* ─── Mobile Detail Panel ────────────────────────────────────────────────── */
/* Ziehgriff sitzt jetzt direkt auf der Trennlinie über die volle Breite,
   nicht mehr als schmaler Anfasser in der Mitte -- dieselbe Bedienlogik wie
   der Desktop-Splitter (.gutter), nur horizontal statt vertikal (Vorbild
   sprechnetz-HSK_deploy). Die Tap/Drag/Flick-Erkennung in reader.js bleibt
   unveraendert (derselbe Elementknoten), nur Position/Optik aendern sich. */
.dl-handle{display:none;position:absolute;left:0;right:0;top:0;height:17px;z-index:1;
  margin:0;background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.dl-handle:active{cursor:grabbing}
.dl-handle::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--fg2);opacity:.55;transition:background .15s,height .15s,opacity .15s}
.dl-handle:hover::before,.dl-handle:focus-visible::before,aside.dragging .dl-handle::before{
  height:3px;background:var(--red);opacity:1}
.dl-handle:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.detail-backdrop{display:none;position:fixed;inset:0;z-index:29;
  background:rgba(0,0,0,.32);transition:opacity .2s}
@media(max-width:880px){
  .dl-handle{display:block}
  /* Kein Backdrop/Abdunkeln mehr fuer das Detail-Panel (Vorbild HSK: das
     Panel ist ohnehin immer sichtbar, ein Verdunkeln des Haupttextes waere
     dafuer unpassend — .detail-backdrop bleibt fuer evtl. andere Zwecke
     bestehen, wird hier nur nicht mehr an body.detail-open gekoppelt). */
  /* Kopfzeile auf kleinen Schirmen: kompakter (kleineres Padding/Gap/Buttons),
     Buttons umbrechen statt zu quetschen. */
  .top{padding:7px 10px;gap:5px 6px}
  .top .home{padding:5px 11px;font-size:13px}
  .nav select{padding:5px 9px;font-size:13px}
  /* Buchname kann sehr lang sein ("新 帖撒羅尼迦後書 · 2 Thessalonians") --
     harte Breitengrenze + Ellipsis, sonst schiebt es Kapitel-Auswahl/Weiter-
     Button rechts aus dem 390px-Viewport hinaus. */
  #bookSel{max-width:44vw}
  #chSel{max-width:26vw}
  .nav button{width:28px;height:28px;font-size:13px}
  #learnModeToggle,#searchToggle,#hmToggle,#voiceToggle,#contReadToggle,#ipaToggle,#alignToggle,#grammarToggle{
    font-size:11px;padding:0 8px;height:28px}
  .zhvoice button{height:28px;padding:0 8px}
  .zoom-ctl button{height:28px;padding:0 9px}
  .learn-study-link{padding:5px 11px!important;font-size:12px!important}
  #audioStatus{font-size:11px}
}
@media(max-width:480px){
  #alignToggle{display:none}
}

/* Slim-Index: Bibelweite Strong-Daten */
.dl-lex{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
/* Einzelne Lexikon-Quellen (Strong/MorphGNT/OSHB/UBS, BDB, Abbott-Smith, LSJ,
   CBOL, Translation Words) — je ein eigenes, unabhaengig auf-/zuklappbares
   Unterakkordeon innerhalb von "原文詞典 · Lexicon" (Nutzerwunsch). */
.dl-lex-source{margin-top:10px}
.dl-lex-source:first-child{margin-top:0}
.dl-lex-head{font-size:var(--fs-label);font-weight:700;color:var(--fg2);letter-spacing:.04em;text-transform:uppercase;margin-bottom:8px}
.dl-lex-row{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body);line-height:1.5;margin-bottom:3px}
.dl-lex-lang{flex:0 0 24px;font-size:var(--fs-label);font-weight:700;color:var(--fg2)}
.dl-lex-text.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body)}
/* CBOL/信望愛: derselbe Gliederungs-Ansatz wie .dl-lex-gesenius-fmt/.gsn-*
   (Tiefe aus Codestruktur "1a2b1" statt aus verworfenen Leerzeichen,
   einheitliche Schriftgroesse, Hierarchie nur ueber Einrueckung+Marker). */
.dl-lex-cbol-fmt{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body);
  line-height:1.75;color:var(--fg1)}
.cbol-head{color:var(--fg2);margin-bottom:4px}
.cbol-head-main{font-weight:700;color:var(--fg1);margin-bottom:8px}
.cbol-line{margin:4px 0}
.cbol-mark{display:inline-block;min-width:2.2em;font-weight:800;color:var(--fg2)}
.cbol-d1{margin-top:10px}
.cbol-d1 .cbol-mark{color:#4a6fa5}
.cbol-d2{padding-left:20px}
.cbol-d2 .cbol-mark{color:#4a6fa5}
.cbol-d3{padding-left:40px}
.cbol-d4{padding-left:60px;color:var(--fg2)}
.cbol-d5{padding-left:80px;color:var(--fg2)}
.cbol-d5 .cbol-mark,.cbol-d4 .cbol-mark{font-weight:600;opacity:.85}
.cbol-d6{padding-left:100px;color:var(--fg2);opacity:.9}
/* Quellen-/Lizenzhinweis: wiederholt sich auf praktisch jeder Wortkarte,
   ist reine Referenz-Information (keine Lerninhalte) -- bewusst deutlich
   kleiner als der einheitliche Fliesstext-Massstab, ueberall gleich (Nutzer-
   vorgabe: "die Fussnoten winzig klein, ueberall an allen Stellen"). */
.dl-lex-attr{margin-top:6px;font-size:12px;color:var(--fg2);font-style:italic;line-height:1.4}
.dl-lex-lemma{font-size:var(--fs-body);font-weight:700;color:var(--fg1)}
.dl-lex-translit{font-size:var(--fs-meta);font-weight:500;font-style:italic;color:var(--fg2);margin-left:4px}
.dl-lex-pron{font-size:var(--fs-meta);color:var(--fg2);margin-bottom:6px}
.dl-lex-pos{font-size:var(--fs-label);font-weight:700;font-style:italic;color:var(--fg2);margin-left:6px}
.dl-lex-ref{font-size:var(--fs-label);color:var(--fg2);margin-bottom:8px}
.dl-lex-block{margin-bottom:8px}
/* Unsuffixierte .dl-lex-glosses/.dl-lex-defs sind laut reader.js immer die
   Englisch-Variante (der Chinesisch-Zweig bekommt dort die zusaetzliche .zh-
   Klasse, siehe LEX_LANGS/zh-Flag) -- gleicher Apostroph-Fix wie .dl-gloss. */
.dl-lex-glosses{font-family:"Noto Serif",serif}
.dl-lex-glosses.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body)}
.dl-lex-chip{display:inline-block;background:var(--bg2,#eef2f7);border-radius:4px;padding:1px 7px;margin:0 4px 3px 0;font-size:var(--fs-meta)}
.dl-lex-defs{margin:4px 0 0 0;padding-left:18px;font-size:var(--fs-meta);line-height:1.55;color:var(--fg2);font-family:"Noto Serif",serif}
.dl-lex-defs.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-meta)}
.dl-lex-domains{margin-top:4px}
.dl-lex-domain{display:inline-block;background:#e8f0fb;color:#3a5a85;border-radius:50px;padding:1px 8px;margin:0 4px 3px 0;font-size:var(--fs-label);font-weight:700}
.dl-lex-xref{font-weight:700;color:var(--fg)}
.dl-lex-gesenius{margin:2px 0 0 0;padding-left:18px;font-size:var(--fs-body);line-height:1.6;color:var(--fg1)}
.dl-lex-gesenius li{margin-bottom:2px}
.dl-lex-occ{font-weight:500;color:var(--fg2);text-transform:none;letter-spacing:0}
/* Abbott-Smith/LSJ sind reine Englisch-Lexika -- gleicher Apostroph-Fix wie
   .row.en .row-tokens/.dl-gloss. */
.dl-lex-abbott{font-size:var(--fs-body);line-height:1.65;color:var(--fg1);white-space:pre-line;font-family:"Noto Serif",serif}
/* BDB/Gesenius-Gliederung: I/II/III (Sinn) > 1/2/3 (Untersinn) > a/b/c
   (Unterteilung) > (1)/(2) (Beispiel) -- gleiche Schriftgroesse ueberall
   (Nutzervorgabe "einheitliche Schriftgroessen"), Hierarchie nur ueber
   Einrueckung + Marker-Gewicht/-Farbe, nicht ueber Schriftgroesse. */
.dl-lex-gesenius-fmt{font-size:var(--fs-body);line-height:1.6;color:var(--fg1)}
.gsn-head{font-weight:700;margin-bottom:10px}
.gsn-stem{font-weight:800;color:#4a6fa5;margin:14px 0 6px;padding-top:10px;border-top:1px dashed var(--line)}
.gsn-stem:first-child{margin-top:0;padding-top:0;border-top:none}
.gsn-line{margin:4px 0}
.gsn-mark{display:inline-block;min-width:1.6em;font-weight:800;color:var(--fg2)}
.gsn-d1{margin-top:10px}
.gsn-d1 .gsn-mark{color:#4a6fa5}
.gsn-d2{padding-left:22px}
.gsn-d3{padding-left:44px}
.gsn-d3 .gsn-mark{font-weight:700}
.gsn-d4{padding-left:66px}
.gsn-d4 .gsn-mark{font-weight:600;color:var(--fg2);opacity:.85}
.dl-tw{margin-top:6px}
.dl-tw-item{margin-bottom:8px;padding:6px 8px;background:var(--bg2,#f4f6f9);border-radius:6px}
.dl-tw-title{font-size:var(--fs-body);font-weight:700;color:var(--fg1);text-transform:capitalize}
.dl-tw-def{font-size:var(--fs-meta);color:var(--fg2);line-height:1.5;margin-top:2px}
.dl-slim{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.dl-slim-loading{margin-top:18px;border-top:1px solid var(--line);padding-top:12px;
  font-size:var(--fs-meta);color:var(--fg2)}
.dl-slim-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.dl-slim-count{font-size:var(--fs-body);font-weight:800;color:#4a6fa5;margin-right:2px}
.dl-slim-label{font-size:var(--fs-label);color:var(--fg2)}
.dl-slim-books{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0}
.dl-slim-book{font-size:var(--fs-label);padding:2px 8px;border-radius:50px;
  background:#f0f4fb;border:1px solid #c8d5ee;color:#4a6fa5;font-weight:700}
.dl-slim-book.cur{background:#4a6fa5;color:#fff;border-color:#4a6fa5}
.dl-slim-forms{margin:8px 0 6px;display:flex;flex-direction:column;gap:3px}
.dl-slim-form{display:flex;align-items:baseline;gap:8px;font-size:var(--fs-body)}
.dl-slim-flang{flex:0 0 26px;font-size:var(--fs-label);font-weight:700;color:var(--fg2);text-transform:uppercase}
/* Basis-Regel (EN-Formen, keine .zh-Klasse) -- gleicher Apostroph-Fix wie
   .dl-gloss/.dl-gene/.dl-ency-text oben ("Yahweh's" o.ae. zeigte eine
   Leerzeile durch Noto Sans TCs ueberbreiten Apostroph-Glyph). */
.dl-slim-fwords{font-family:"Noto Serif",serif}
.dl-slim-fwords.zh{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body)}
.dl-slim-examples{margin-top:8px}
.dl-slim-ex{padding:6px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-meta);line-height:1.5}
.dl-slim-ex:last-child{border-bottom:none}
.dl-slim-ex-ref{font-size:var(--fs-label);font-weight:700;color:#4a6fa5;letter-spacing:.04em;margin-bottom:2px}
.dl-slim-ex-ref-link{cursor:pointer}
.dl-slim-ex-ref-link:hover{text-decoration:underline}
.dl-slim-ex-zt{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body);color:var(--fg1)}
.dl-slim-ex-anc{font-size:var(--fs-body);color:var(--fg1);margin:2px 0}
.dl-slim-ex-en{color:var(--fg2);font-size:var(--fs-meta);font-family:"Noto Serif",serif}

/* ── Kommentar-Panel ─────────────────────────────────────────────────────── */
/* Akkordeon per natives <details>/<summary> (Web-Standard: Tastatur/Screen-
   reader-zugaenglich ohne eigenes JS). Eigener Pfeil-Marker statt des
   browserspezifischen Dreiecks, damit es auf allen Plattformen gleich aussieht. */
.cmt-loading,.cmt-empty{font-size:var(--fs-body);color:var(--fg2);line-height:1.6;margin-top:8px}
.cmt-entry{border-bottom:1px solid var(--line)}
.cmt-entry:last-child{border-bottom:none}
.cmt-entry>summary{list-style:none;cursor:pointer;padding:12px 22px 12px 0;position:relative;
  -webkit-tap-highlight-color:transparent}
.cmt-entry>summary::-webkit-details-marker{display:none}
.cmt-entry>summary::after{content:'';position:absolute;right:2px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--fg2);border-bottom:2px solid var(--fg2);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.cmt-entry[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.cmt-body{padding-bottom:12px}
/* Dasselbe Akkordeon-Muster wie bei Kommentaren, jetzt auch für die
   Zusatzabschnitte im Wort-Detail-Panel (Lexikon/Bibelweit/Familie/
   Hintergrund) — standardmäßig zusammengeklappt, eigener Pfeil-Marker statt
   Browser-Dreieck, damit das Panel bei vielen Abschnitten übersichtlich
   bleibt (Nutzerfeedback: "wie bei Kommentaren, bitte auch bei den anderen
   Views"). */
.dl-collapsible>summary,.map-collapsible>summary{list-style:none;cursor:pointer;position:relative;
  padding:7px 28px 7px 12px;border-radius:9px;
  background:var(--hl2);border-left:4px solid var(--gold);
  transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.dl-collapsible>summary:hover,.map-collapsible>summary:hover{background:var(--hl)}
.dl-collapsible[open]>summary,.map-collapsible[open]>summary{border-left-color:var(--red)}
.dl-collapsible>summary::-webkit-details-marker,.map-collapsible>summary::-webkit-details-marker{display:none}
.dl-collapsible>summary::after,.map-collapsible>summary::after{content:'';position:absolute;right:12px;top:50%;
  width:8px;height:8px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);
  transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.dl-collapsible[open]>summary::after,.map-collapsible[open]>summary::after{transform:translateY(-30%) rotate(-135deg)}
.cmt-src{font-size:var(--fs-label);font-weight:700;color:#4a6fa5;letter-spacing:.02em}
.cmt-trad{font-weight:600;color:var(--fg2)}
.cmt-title{font-size:var(--fs-body);font-weight:700;color:var(--fg1);margin-bottom:4px}
.cmt-text{font-size:var(--fs-body);line-height:1.65;color:var(--fg1);white-space:pre-line}
.cmt-text[dir="rtl"]{font-size:17px;line-height:1.8}
/* Formatierter Kommentartext (formatCommentaryText): zitierter Verstext
   optisch abgesetzt (Zitat-Balken), eingebettete "(1.)/(2.)/(3.)"-Unterpunkte
   bekommen jeweils eine eigene Zeile+Einzug statt im Fliesstext zu verschwinden. */
.cmt-text-fmt{font-size:var(--fs-body);line-height:1.65;color:var(--fg1)}
.cmt-quote{font-style:italic;color:var(--fg2);padding:2px 0 2px 12px;
  border-left:3px solid var(--gold);margin-bottom:10px;line-height:1.6}
.cmt-quote[dir="rtl"]{border-left:none;border-right:3px solid var(--gold);padding:2px 12px 2px 0}
.cmt-para{margin:0 0 10px}
.cmt-para:last-child{margin-bottom:0}
.cmt-sub{margin:6px 0 6px 22px}
.cmt-sub-mark{font-weight:800;color:var(--fg2);margin-right:4px}
.cmt-attr{margin-top:6px;font-size:12px;color:var(--fg2);font-style:italic;line-height:1.4}
/* Auto-verlinkte Bibelstellen im Kommentartext (z.B. "Ge 3:15") */
.cmt-ref{color:#4a6fa5;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.cmt-ref:hover{text-decoration-style:solid}
/* Kurzes Aufblitzen fuer den Vers, zu dem eine Referenz gesprungen ist, wenn
   kein konkretes Wort (cid) bekannt ist. Ist ein cid bekannt, markiert
   flashTarget() in reader.js stattdessen dauerhaft per .tok.hl (wie
   selectWord()) statt nur kurz zu blitzen. */
.verse.ref-flash{animation:ref-flash 1.6s ease-out}
@keyframes ref-flash{0%{background:rgba(74,111,165,.16)}100%{background:transparent}}
.row.ref-flash-row{animation:ref-flash-row 1.6s ease-out; border-radius:8px}
@keyframes ref-flash-row{0%{background:rgba(74,111,165,.22)}100%{background:transparent}}
/* 信望愛站註釋 (FHL) -- Gliederungsebenen 0=壹 … 5=●/◎ (kanonisch 6=unbekannt) */
.cmt-fhl{font-family:'Noto Sans TC','Noto Sans SC',serif}
.cmt-fhl-l0{font-size:var(--fs-body);font-weight:800;color:#4a6fa5;margin:10px 0 4px}
.cmt-fhl-l1{font-size:var(--fs-body);font-weight:800;color:var(--fg1);margin:8px 0 3px 4px}
.cmt-fhl-l2{font-size:var(--fs-body);font-weight:700;color:var(--fg1);margin:6px 0 3px 12px}
.cmt-fhl-l3{font-size:var(--fs-body);font-weight:700;color:var(--fg2);margin:5px 0 2px 16px}
.cmt-fhl-l4{font-size:var(--fs-body);font-weight:600;color:var(--fg1);margin:4px 0 2px 20px;line-height:1.55}
.cmt-fhl-l5{font-size:var(--fs-body);line-height:1.7;color:var(--fg1);margin:3px 0 3px 24px}
.cmt-fhl-l6{font-size:var(--fs-body);line-height:1.7;color:var(--fg1);margin:3px 0 3px 24px}
@keyframes aud-pulse{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes aud-spin{to{transform:rotate(360deg)}}
.tok.aud-loading{animation:aud-pulse .6s ease-in-out infinite}
.vplay.aud-loading{border-color:var(--gold)!important;color:var(--gold)!important;animation:aud-pulse .6s ease-in-out infinite}
.cw.no-word-audio .spk{opacity:.3}
/* Immer sichtbar (min-width reserviert) statt display:none/inline-flex zu
   wechseln — sonst springt die ganze Toolbar bei jedem Play/Stop, weil alle
   nachfolgenden Buttons in der Flex-Reihe die Breite des Idle<->Loading<->
   Ready-Wechsels mitverschieben. */
#audioStatus{font-size:11px;font-weight:700;letter-spacing:.03em;padding:5px 11px;
  border-radius:50px;border:1px solid var(--line);display:inline-flex;align-items:center;
  justify-content:center;gap:5px;white-space:nowrap;min-width:70px;color:var(--fg2)}
#audioStatus.loading{border-color:var(--gold);color:#8a6800;background:#fffbea}
#audioStatus.loading::before{content:'';display:inline-block;width:8px;height:8px;
  border:1.5px solid var(--gold);border-top-color:transparent;border-radius:50%;
  animation:aud-spin .65s linear infinite}
#audioStatus.ready{border-color:#5a9;color:#2a7a55;background:#f2fbf6}
/* ─── Concept Heatmap Panel ──────────────────────────────────────────────── */
.hm-panel{position:fixed;top:56px;left:0;right:0;bottom:0;z-index:40;
  background:rgba(246,241,232,.97);overflow:auto;padding:16px 20px 80px;display:none}
.hm-panel.open{display:block}
.hm-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.hm-title{font-size:15px;font-weight:800;color:var(--fg1)}
.hm-close{border:1px solid var(--line);background:#fff;border-radius:50px;padding:3px 12px;
  cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--fg2)}
.hm-hint{font-size:12px;color:var(--fg2);margin-bottom:14px}
/* ─── Hilfe-Panel-Inhalt (wiederverwendet hm-panel als Container) ─────────── */
.help-content{max-width:640px;margin:0 auto;font-size:14px;line-height:1.65;color:var(--fg1)}
.help-content h3{font-size:17px;font-weight:800;margin:0 0 10px}
.help-content h4{font-size:14px;font-weight:800;margin:20px 0 6px;color:var(--fg1)}
.help-content p{margin:0 0 10px}
.help-content ul{margin:0 0 10px;padding-left:20px}
.help-content li{margin-bottom:8px}
.help-content b{color:var(--fg1)}
.help-lang-sep{border:none;border-top:1px dashed var(--line);margin:28px 0}
.hm-row{display:grid;grid-template-columns:36px 1fr auto;gap:6px;align-items:center;
  padding:7px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.hm-row:hover{background:#fff8ee}
.hm-rank{font-size:11px;color:var(--fg2);font-weight:800;text-align:center}
.hm-info{display:flex;flex-direction:column;gap:1px}
.hm-orth{font-family:var(--heb);font-size:18px;direction:rtl;color:var(--fg1)}
.hm-orth.ltr{font-family:var(--grk);direction:ltr}
.hm-gloss{font-size:12px;color:var(--fg2)}
.hm-bar-wrap{display:flex;align-items:center;gap:5px;min-width:60px}
.hm-bar{height:8px;background:var(--red);border-radius:4px;opacity:.7;min-width:4px}
.hm-count{font-size:13px;font-weight:800;color:var(--fg1);min-width:22px;text-align:right}
/* ─── Stimmenauswahl-Panel ───────────────────────────────────────────────── */
.voice-row{padding:10px 0;border-bottom:1px dashed var(--line)}
.voice-lang{font-size:13px;font-weight:800;color:var(--fg1);margin-bottom:5px}
.voice-select{width:100%;font-family:inherit;font-size:13px;color:var(--fg1);
  border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff}
.voice-none{font-size:12px;color:var(--fg2);font-style:italic}
/* ─── Alignment-Tabelle (Matching Words) ────────────────────────────────── */
.dl-align-table{width:100%;border-collapse:collapse;margin-top:4px;font-size:var(--fs-body)}
.dl-align-table th{font-size:var(--fs-label);font-weight:700;color:var(--fg2);text-transform:uppercase;
  letter-spacing:.05em;text-align:left;padding:2px 6px 5px;border-bottom:1.5px solid var(--line)}
.dal-cell{padding:5px 6px;vertical-align:middle;border-bottom:1px dashed var(--line)}
.dl-align-table tr:last-child .dal-cell{border-bottom:none}
.dal-cell .cw{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  border-radius:6px;padding:2px 5px;transition:background .15s}
.dal-cell .cw:hover{background:var(--hl2)}
.dal-cell.zh .cw{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-meta)}
.dal-cell.anc .cw{font-size:var(--fs-meta)}
/* ─── UGCI Verwandte Funktionswörter ────────────────────────────────────── */
.dl-ugci-related{margin:10px 0 6px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dl-ugci-related-lbl{font-size:var(--fs-label);font-weight:700;color:var(--fg2);text-transform:uppercase;
  letter-spacing:.04em;margin-right:2px}
.dl-ugci-rel-chip{font-size:var(--fs-meta);font-weight:700;padding:2px 10px;border-radius:50px;
  border:1px solid #c8b8e8;background:#f4f0fb;color:#5a3a8a;cursor:pointer}
.dl-ugci-rel-chip:hover{background:#e8e0f8;border-color:#9a7acc}
/* ─── Repeat-Bar im Detail-Panel ────────────────────────────────────────── */
/* Im Lernmodus komplett aus (Nutzerwunsch): dort ersetzen die Trainer-Modi
   (Buchstaben/Wort/Satz/Spiel) und der eigene Wiederholen-Knopf im
   Schreibuebungs-Widget diese Funktion ohnehin, die Leiste war dort nur
   Ballast am oberen Rand der Seitenleiste. */
body.learn-mode .dl-repeat-bar{display:none}
.dl-repeat-bar{display:flex;align-items:center;gap:6px;padding:0 0 10px;
  border-bottom:1px solid var(--line);margin-bottom:12px}
.dl-repeat-btn{border:1px solid var(--line);background:#fff;border-radius:50px;
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:800;
  color:var(--fg2);padding:2px 10px;height:24px}
.dl-repeat-btn.on{background:var(--red);color:#fff;border-color:var(--red)}
.dl-repeat-btn:hover:not(.on){background:#fff8ee;color:var(--red)}
/* ─── Word Thread ─────────────────────────────────────────────────────────── */
.dl-slim-thread-btn{margin:8px 0 4px;border:1px solid #8abf7a;background:#f3fbf0;
  border-radius:50px;cursor:pointer;font-family:inherit;font-size:12px;font-weight:800;
  color:#2a6a1a;padding:4px 14px;width:100%}
.dl-slim-thread-btn:hover{background:#e2f5de;border-color:#5a9a4a}
.wt-panel{padding:10px 0}
.wt-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.wt-back{border:1px solid var(--line);background:#fff;border-radius:50px;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:800;color:var(--fg2);padding:2px 12px;height:26px}
.wt-back:hover{background:#fff8ee;color:var(--red)}
.wt-title{font-size:var(--fs-body);font-weight:800;color:#2a6a1a}
.wt-loading{font-size:13px;color:var(--fg2);padding:8px 0}
.wt-hit{padding:8px 0;border-bottom:1px dashed var(--line);cursor:pointer}
.wt-hit:last-child{border-bottom:none}
.wt-hit:hover .wt-ref{text-decoration:underline}
.wt-ref{font-size:var(--fs-label);font-weight:800;color:var(--red);letter-spacing:.04em;margin-bottom:3px}
.wt-anc{font-size:var(--fs-body);font-weight:700;margin-bottom:2px}
.wt-zt{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:var(--fs-body);color:var(--fg);line-height:1.5}
.wt-en{font-size:var(--fs-meta);color:var(--fg2);line-height:1.5}
/* ─── Suche / Search Panel ──────────────────────────────────────────────── */
.search-panel{position:fixed;top:56px;left:0;right:0;bottom:0;z-index:40;
  background:rgba(246,241,232,.97);overflow:auto;padding:20px 22px 80px;display:none}
.search-panel.open{display:block}
.search-bar{display:flex;gap:8px;margin-bottom:16px;max-width:680px}
.search-input{flex:1;font-family:var(--serif);font-size:15px;font-weight:700;
  border:1.5px solid var(--line);border-radius:50px;padding:8px 20px;background:#fff;
  outline:none;color:var(--fg)}
.search-input:focus{border-color:var(--red)}
.search-panel-close{border:1px solid var(--line);background:#fff;border-radius:50px;
  cursor:pointer;font-family:inherit;font-size:15px;font-weight:800;color:var(--fg2);
  padding:0 15px;height:38px;white-space:nowrap}
.search-panel-close:hover{background:#fff8ee;color:var(--red)}
.search-hint{font-size:12px;color:var(--fg2);margin-bottom:16px}
.search-count{font-size:12px;color:var(--fg2);margin-bottom:10px}
.search-hit{border:1px solid var(--line);background:var(--card);border-radius:12px;
  padding:10px 14px;margin-bottom:8px;cursor:pointer;max-width:680px}
.search-hit:hover{background:#fff8ee;border-color:#e8c8a0}
.search-hit-header{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.search-hit-cid{font-size:11px;font-weight:800;color:#4a6fa5;flex:0 0 auto}
.search-hit-anc{font-size:16px;font-weight:700}
.search-hit-count{font-size:11px;color:var(--fg2);margin-left:auto}
.search-hit-gloss{font-size:13px;color:var(--fg2);margin-bottom:4px}
.search-hit-ex{border-top:1px dashed var(--line);padding-top:6px;margin-top:4px}
.search-hit-ref{font-size:11px;font-weight:800;color:var(--red);letter-spacing:.04em}
.search-hit-zt{font-family:'Noto Sans TC','Noto Sans SC',serif;font-size:14px;
  color:var(--fg);line-height:1.5}
.search-hit-en{font-size:12px;color:var(--fg2);line-height:1.5}
.tok.tts-playing{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}
.tok.nolink.tts-playing,.tok.nolink.unmapped.tts-playing{background:#0f766e!important;color:#fff!important;border-color:#0f766e!important}