:root {
  --bg: #15171c;
  --panel: #1e2128;
  --ink: #e6e8ec;
  --muted: #8b919c;
  --ok: #7fd28b;
  --warn: #e6c07b;
  --err: #e08a8a;
  --accent: #6ea8fe;
  --line: #2a2e37;
  --mark: #4a3b1e;
  --collapsed-frame: #e6b84a;              /* Amber-Rahmen eingeklappter Floater (Job 68) */
  --collapsed-glow: rgba(230,184,74,.20);  /* weicher Glow/Kopf-Tint dazu */
  /* Eingeklappte Tear-Leisten: Kopf-Tint je Menü (wie der Notiz-Glow, aber farbig).
     Defaults hier; in den Einstellungen überschreibbar (app.js setzt --tear-glow-* am :root inline). */
  --tear-glow-tag: rgba(96,165,250,.26);     /* helles Blau        – Tag */
  --tear-glow-color: rgba(248,113,113,.26);  /* helles Rot         – Farbe */
  --tear-glow-bm: rgba(143,109,255,.26);     /* kräftiges Violett  – Lesezeichen */
  --tear-glow-browse: rgba(200,208,220,.26); /* helles Grau        – Blättern */
  --tear-glow-comment: rgba(94,214,130,.26); /* helles Grün        – Kommentar */
  /* Seitlicher Innenabstand JEDES Verses – der reservierte Streifen für die Blätter-Pfeile
     ‹ › (und ^ v). Er wird per negativem Margin wieder aufgehoben, der Text bleibt also
     stehen wo er ist; der Platz kommt aus dem .col-body-Padding. EINZIGER Stellknopf:
     größer = weniger Text-Überlagerung, kostet bei schmalen Spalten aber Textbreite. */
  --v-pad-x: .9rem;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ---- Kopfleiste (global, fix über allem) ---- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: stretch; gap: .5rem;
  padding: .6rem clamp(.6rem, 4vw, 1.2rem);
  /* Job 53: etwas höher als bisher (.6rem → .35rem oben), alle Buttons rücken mit hoch. */
  padding-top: calc(.35rem + env(safe-area-inset-top));
  background: rgba(21,23,28,.97);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
/* Job 191: In der macOS-Web-App liegt die Fenster-Titelleiste ÜBER der Seite und schluckt jeden
   Klick auf die Kopf-Knöpfe (nur das unterste Viertel reagierte, sonst zog man das Fenster). Die
   Klasse setzt app.js (`markMacApp`) – ausschliesslich am Mac; iPhone/iPad/Android bleiben, wie
   sie sind, dort gibt es keine Überlagerung. `--hh` misst sich danach von selbst neu. */
body.mac-app .topbar { padding-top: calc(.35rem + env(safe-area-inset-top) + 28px); }
/* Job 53: alle 4 Kopf-Buttons oben bündig (flex-start) statt zentriert – so haben
   Burger, ↶/↷ und I dasselbe Top; die Versions-Nr. hängt unter dem Burger (nav-stack). */
.topbar-row { display: flex; align-items: flex-start; gap: .6rem; }
/* Kommandozeile (Job 27) – sitzt jetzt in Reihe 1, direkt nach dem ☰ (flex:1 = füllt
   den Platz zwischen Burger-Stapel und ↶/↷). */
.cmdbar { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
/* Kommandozeile aus der Kopfzeile genommen (v0.9.6.18) – Code/Verdrahtung bleiben, nur versteckt.
   Nötig, weil das display:flex oben das UA-`[hidden]` sonst übersteuert. Zum Zurückholen: das
   `hidden`-Attribut an `.cmdbar` in index.html entfernen. Wiederkommen soll ohnehin NICHT hier,
   sondern über den Prototyp `cmd-test.html` erprobt werden. */
.cmdbar[hidden] { display: none; }
.cmd-wrap { position: relative; flex: 1; min-width: 0; }
#cmd {
  width: 100%; box-sizing: border-box; background: #0f1115; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: .9rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: .4rem .6rem;
}
#cmd::placeholder { color: #555b66; }
#cmd:focus { outline: none; border-color: var(--accent); }
#cmd-msg { font-size: .75rem; color: #8a93a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
/* Autovervollständigung unter dem Feld */
#cmd-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.5); padding: .25rem; max-height: 50vh; overflow-y: auto;
}
#cmd-list[hidden] { display: none; }
.cmd-item {
  display: flex; align-items: baseline; gap: .5rem; padding: .35rem .5rem;
  border-radius: 6px; cursor: pointer;
}
.cmd-item:hover { background: #232833; }
.cmd-item.info { cursor: default; opacity: .8; }
.cmd-item.info:hover { background: none; }
.ci-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; color: var(--ink); white-space: nowrap; }
.ci-hint { font-size: .72rem; color: #8a93a0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Gespeicherte Befehle (★ speichern, ≡ Liste; Klick = ins Feld setzen, nicht ausführen) */
.cmd-saved-wrap { position: relative; display: flex; gap: .25rem; flex: 0 0 auto; }
#cmd-save, #cmd-saved-btn { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; padding: 0; line-height: 1;
  background: #191c22; color: var(--muted); border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 1rem; cursor: pointer; }
#cmd-save:hover, #cmd-saved-btn:hover { color: var(--accent); border-color: var(--accent); }
#cmd-saved-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 16rem; max-width: 80vw;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.5); padding: .25rem; max-height: 50vh; overflow-y: auto; }
#cmd-saved-list[hidden] { display: none; }
.cmd-saved-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem;
  border-radius: 6px; }
.cmd-saved-item:hover { background: #232833; }
.cmd-saved-item .csi-text { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-saved-item .csi-del { flex: 0 0 auto; background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: .9rem; padding: .1rem .3rem; }
.cmd-saved-item .csi-del:hover { color: #e23b3b; }
.cmd-saved-empty { padding: .4rem .5rem; font-size: .8rem; color: var(--muted); }
/* JS setzt --hh = Höhe der fixen Kopfleiste; body bekommt entsprechend Abstand. */
body { padding-top: var(--hh, 3.2rem); }
.topbar button {
  background: #191c22; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  font: inherit; font-size: 1rem; padding: 0 .7rem; cursor: pointer;
  /* Job 53: alle Kopf-Buttons exakt gleich hoch (Höhe des Burgers) + Inhalt zentriert;
     die feste Höhe macht die unterschiedlichen Schriftgrößen (↶/↷ 1.2rem, I 1.18em) höhen-neutral. */
  box-sizing: border-box; height: var(--btn-h, 2.1rem);
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar button:active { background: var(--accent); color: #0f1115; }
/* ☰-Burger + darunter die kleine Test-Build-Nr. (links gestapelt). */
.nav-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .12rem; }
.topbar .ver { font-size: .65rem; color: #555b66; line-height: 1; padding-left: .15rem; }
/* Version · Speicher | Abgleich stehen in EINER Zeile (der .nav-stack darüber ist column). */
.topbar .ver-row { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
/* Job 163 – RIEGEL: die Zeile darunter darf die Kopf-Knöpfe nie aus dem Schirm schieben. Sie
   bestimmt die Breite des .nav-stack, und die .topbar ist `position: fixed` – was rechts
   hinausfällt, ist per Scrollen/Pinch unerreichbar (iPhone 14 Plus, 21.8.2026: ↷ halb, I weg).
   Darum: die Knöpfe schrumpfen nicht, der Stapel schon, und die Zeile wird notfalls seitlich
   abgeschnitten. `overflow-x: clip` statt `hidden` – `hidden` schnitte oben/unten die
   vergrösserte Trefferfläche der Versions-Nr. (negativer Rand) weg. */
.topbar-row > button { flex-shrink: 0; }
.nav-stack { min-width: 0; }
.topbar .ver-row { max-width: 100%; overflow-x: clip; }
/* Job 163 – Weg (a), Jogis Wahl 22.9.2026: am schmalen Schirm bekommt die Zeile eine EIGENE
   Zeile unter den Knöpfen (volle Breite), statt neben ihnen um Platz zu ringen. Der Stapel löst
   sich dafür auf (`display: contents`), der ☰ wird gewöhnlicher Nachbar von ↶ ↷ I, die Zeile
   bricht per `order` + 100 % Breite um. Optisch steht sie wie vorher unter dem ☰.
   Am breiten Schirm bleibt alles, wie es war (dort ist Platz). */
@media (max-width: 600px) {
  .topbar-row { flex-wrap: wrap; row-gap: .12rem; }
  .nav-stack { display: contents; }
  .topbar .ver-row { order: 1; flex: 0 0 100%; }
}
/* Job 169: die Versions-Nr. ist ein Knopf („Was ist neu"). Bewusst dezent – sie soll nicht
   nach Bedien-Element schreien, aber unter dem Finger nachgeben. Trefferfläche über Polster
   + negativen Rand vergrößert, ohne die Kopfzeile aufzuziehen (dieselbe Kur wie beim 📌). */
.topbar .ver-tap { cursor: pointer; padding: .35rem .3rem .35rem .15rem; margin: -.35rem -.3rem -.35rem 0; }
.topbar .ver-tap:hover { color: var(--accent); }
/* Abgleich-Anzeige (Job 155): Trennstrich als border-left – der gehört an den ANFANG von
   #st-sync, damit beim späteren Rückbau von storage.js kein einsamer Strich stehen bleibt.
   Polsterung ist Trefferfläche: der Text ist die Bedienung, am Finger sonst zu klein. */
#st-sync { cursor: pointer; padding: .3rem .25rem .3rem .5rem; margin-left: .45rem;
           border-left: 1px solid #2c3140; }
#st-sync:empty { display: none; }
/* Vier Zustände (Jogi, 20.8.2026). Die Farben steigern sich: blau = Mitteilung, gelb = drüben
   wartet etwas, orange = beides. „Daten sind aktuell" bleibt bewusst FARBLOS (erbt .ver) –
   eine Zeile, die dauernd leuchtet, sieht man nach drei Tagen nicht mehr.
   Gelb und Orange sind bei .65rem kaum zu unterscheiden; die Unterscheidung trägt der TEXT. */
#st-sync.sync-lokal  { color: #6fb3ff; }                     /* auf Server speichern → */
#st-sync.sync-server { color: #efc91f; }                     /* Neue Daten vom Server laden ← */
#st-sync.sync-beides { color: #ff9f43; font-weight: 700; }   /* Daten abgleichen ↔ */
#st-sync.sync-fehler { color: #ff6b6b; }                     /* wie der Speicher-Schreibfehler */
/* Undo/Redo-Buttons (Job 30): ↶/↷ neben „suchen"; matt, wenn nichts zurückzunehmen ist. */
#btn-undo, #btn-redo { font-size: 1.2rem; line-height: 1; padding: 0 .55rem; }
#btn-undo:disabled, #btn-redo:disabled { opacity: .35; cursor: default; }
#btn-undo:disabled:active, #btn-redo:disabled:active { background: #191c22; color: var(--ink); }

/* ---- Lese-Ansicht: Spalten nebeneinander ---- */
body { overflow: hidden; }                 /* gescrollt wird in den Spalten */
#reader {
  display: flex; gap: 1px; background: var(--line);
  height: calc(100vh - var(--hh, 3.2rem));         /* Fallback für ältere Browser */
  height: calc(100dvh - var(--hh, 3.2rem));        /* dvh: ohne Bereich hinter den Browser-Leisten */
  overflow-x: auto;                         /* viele Spalten -> horizontal scrollen */
  /* iOS-System-Callout (Kopieren/Nachschlagen …) im Lesebereich unterdrücken – das eigene
     Kontextmenü übernimmt (inkl. „📋 Kopieren"); die Textauswahl selbst bleibt erlaubt.
     Muster: menu-test.html. */
  -webkit-touch-callout: none;
}
/* Spaltenbreite kommt aus dem aktiven Ansichtsprofil (Einstellungen → Spaltenbreite),
   Fallback 18rem. Gesetzt als --col-width am :root durch applyColWidth() in app.js. */
.col { flex: 1 0 var(--col-width, 18rem); min-width: var(--col-width, 18rem); display: flex; flex-direction: column; background: var(--bg); position: relative; }
/* position:relative macht die .col zum Bezugsrahmen der Griffe/des Popups (grip.js hängt sie
   in die aktive .col und setzt sie .col-relativ). Kein z-index -> kein Stapel-Kontext, damit
   Griffe (z-index 60) über Nachbarspalten bleiben. .col hat overflow:visible -> kein Clipping. */
/* Spaltenkopf: Übersetzungs-Dropdown + Stellen-Feld + Hinzufügen/Schließen */
.col-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; flex-wrap: wrap; gap: .3rem;
  padding: .35rem .4rem;
  background: #1a1d23; border-bottom: 1px solid var(--line);
}
/* Verweis-Spalte (Job 50): öl-/schmutziggelb getönte Titelleiste, damit man sie sofort als
   Verweis-Spalte erkennt. */
.col.is-refs .col-head { background: #2e2b14; border-bottom-color: #8a7a30; }
/* Interlinear-Spalte (Job 51): grünlich getönte Titelleiste, damit sie sich von der
   bläulichen Verweis-Spalte unterscheidet. */
.col.is-inter .col-head { background: #1e2d22; border-bottom-color: #3b7a55; }
/* Spalten-Gruppen (Job 58, Variante C): eine Quell-Spalte + ihre Helfer werden als eine
   Gruppe umrahmt (Rand-Klassen statt DOM-Wrapper). Solo-Spalten bleiben ohne Rahmen. */
.col.grp-multi { border-top: 2px solid var(--grp-frame, #6675a0); border-bottom: 2px solid var(--grp-frame, #6675a0); }
.col.grp-start { border-left: 2px solid var(--grp-frame, #6675a0); }
.col.grp-end { border-right: 2px solid var(--grp-frame, #6675a0); }
/* Graue Live-Vorschau („so verstanden") steht als EIGENE Zeile UNTER dem Stellen-Feld
   (v0.9.23.2, Jogi B – vorher inline in der Bibel-Zeile). */
.col-preview {
  flex: 1 0 100%; min-width: 0; margin: 0 .1rem;
  font-size: .72rem; font-style: italic; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-preview:not(.show) { display: none; }
/* Klickbare Buch-Chips bei Mehrdeutigkeit („1" -> 1Mos/1Sam/…). Eigene Zeile unter dem
   Stellen-Feld (wie die graue Vorschau, nie beide). Optik = blau wie tests/ref-test.html. */
.col-chips { flex: 1 0 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 .1rem; }
.col-chips:not(.show) { display: none; }
.col-chip {
  border: 1px solid var(--accent); color: var(--accent);
  background: rgba(110, 168, 254, .10); border-radius: 999px;
  font-size: .78rem; padding: .12rem .55rem; cursor: pointer; white-space: nowrap;
}
.col-chip:hover { background: rgba(110, 168, 254, .24); }
.col-chip:active, .col-chip.sel { background: var(--accent); color: #0f1115; }   /* .sel = Tastatur-Wahl (↓/←/→) */
.col-head .col-src {
  flex: 0 1 auto; max-width: 8.5rem; min-width: 3rem;
  background: #0f1115; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: .76rem; padding: .25rem .3rem; cursor: pointer;
}
.col-head .col-ref-wrap {
  flex: 1 0 100%; min-width: 0; position: relative; display: flex; align-items: center; gap: .3rem;
  /* eigene Zeile, volle Breite; nur noch Feld + Leeren-✕ (🔍/+/✕ sitzen seit v0.9.23.2 in Zeile 1) */
}
.col-head .col-ref {
  flex: 1 1 auto; min-width: 0;
  background: #0f1115; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; font: inherit; font-size: .9rem; padding: .3rem .5rem .3rem 1.6rem;
}
.col-head .col-ref:focus { outline: none; border-color: var(--accent); }
.col-head .col-clear {   /* Leeren-✕ LINKS im Feld (Jogi-Wunsch, vorher rechts) */
  position: absolute; left: .25rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .85rem; line-height: 1; padding: .15rem .35rem;
}
.col-head .col-clear:hover { color: var(--accent); }
.col-head .col-ref::placeholder { color: #444a54; }   /* Default-Hinweis schwächer */
.col-head .col-find, .col-head .col-add, .col-head .col-close {
  flex: 0 0 auto; width: 1.7rem; height: 1.7rem; padding: 0; line-height: 1;
  background: #191c22; border: 1px solid var(--line); border-radius: 6px;
  font: inherit; font-size: 1.05rem; cursor: pointer;
}
/* Zeile 1 (v0.9.23.2): 🔍 + ✕ als rechtsbündige Gruppe neben dem Bibel-Dropdown –
   margin-left:auto NUR an der Lupe schiebt die ganze Gruppe nach rechts. */
.col-head .col-find { font-size: .85rem; margin-left: auto; }
.col-head .col-add { color: var(--accent); }
/* Schließen-✕: nur der Glyph dunkel-rot, Hintergrund/Rahmen neutral wie beim +.
   Beim Drücken leuchtet der Knopf auf (:active, v0.9.17.18). */
.col-head .col-close { color: #8a2f24; }
.col-head .col-close:active { background: #b25a4c; color: #0f1115; }
.col-head button:active { background: var(--accent); color: #0f1115; }
.col-empty { color: var(--muted); padding: 1rem .3rem; font-size: .9rem; }
/* Verweis-Spalte (Job 50): je Verweis eine Kopfzeile (Richtung · Stelle · Stimmen) über dem
   Verstext der Zielstelle; dezente Trennlinie zwischen den Einträgen. */
.ref-entry { padding-top: .5rem; margin-top: .5rem; border-top: 1px solid #2a2e37; }
.ref-entry:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.ref-head { color: var(--accent); font-size: .82rem; font-weight: 600; margin-bottom: .3rem; letter-spacing: .01em; }
/* Abschnitts-Überschriften: eigene Verweise (Job 60) zuerst + optisch abgesetzt, dann TSK. */
.ref-sec { margin: .8rem 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.ref-sec-own { color: var(--accent); }
.ref-own { border-top: 0; margin-top: .35rem; padding-top: .4rem; padding-left: .55rem;
  border-left: 3px solid var(--accent); background: rgba(110,168,254,.07); border-radius: 0 6px 6px 0; }
.ref-own-komm { color: var(--ink); font-size: .82rem; font-style: italic; margin-bottom: .35rem; opacity: .9; }
/* Abgeleitete Eingehende (Job 61): wie eigene, aber rötlich (Pfeil-Farbe eingehend) + gedämpft. */
.ref-entry.ref-derived { border-left-color: #b06a6a; background: rgba(176,106,106,.07); opacity: .92; }
/* Richtungs-Pfeil eingefärbt (nur das Zeichen): ausgehend grün, eingehend rot, beide gelb – ölige/gedämpfte Töne. */
.ref-arrow { font-weight: 700; }
.ref-dir-t { color: #d1573a; }   /* eingehend – Rostrot */
.ref-dir-f { color: #4fd23a; }   /* ausgehend – Moosgrün */
.ref-dir-b { color: #e0b83a; }   /* beide – Senfgelb */
/* Interlinear-Spalte (Job 51): je Grundtext-Wort eine Zeile – Original groß, darunter
   Glosse (englisch) und klein die Strong-Nr. + Wortform. */
.il-row { padding: .4rem .3rem; border-top: 1px solid #23262e; }
.il-row:first-child { border-top: 0; }
.il-word { font-size: 1.2rem; color: var(--ink); line-height: 1.4; }
.il-gloss { color: var(--ink); font-size: .9rem; margin-top: .05rem; }
.il-lemma { color: #9aa3b2; font-size: .78rem; font-style: italic; margin-top: .06rem; }  /* Lemma-/Wörterbuch-Glosse (Job 52) */
.il-meta { color: var(--muted); font-size: .72rem; margin-top: .12rem; letter-spacing: .02em; }
/* Seitliches Padding mind. --v-pad-x: der Vers zieht mit negativem Margin genau so weit
   nach außen (s. .v) – sonst ragt er aus dem Scroll-Container (overflow-y:auto macht
   overflow-x zu auto -> Querscrollen/Clipping). */
.col-body { flex: 1; overflow-y: auto;
  padding: 1.1rem clamp(var(--v-pad-x), 2.4vw, 1.6rem) 2rem; }
/* Statuszeile pro Spalte (unten): zeigt nur noch Stelle/Verszahl (Bedienung = FAB-Knopf). */
.col-status {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: .4rem;
  /* oben enger (weniger Abstand zum Inhalt), unten höher + iPhone-Sicherheitszone
     (env(safe-area-inset-bottom)) -> Inhalt rutscht über runde Ecken + Home-Strich */
  padding: .08rem .55rem calc(.3rem + env(safe-area-inset-bottom, 0px) / 2);
  font-size: .66rem; letter-spacing: .03em; color: var(--muted);
  background: #1a1d23; border-top: 1px solid var(--line);
}
.col-status-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Fokussierte Spalte: Akzent-Streifen oben + glühender Kopf-Balken (wie kompendium).
   Kopf-Glow doppelt so groß wie zuvor (0 3px 11px -3px -> 0 6px 22px -6px), Akzent-
   Streifen oben 2->4px – „Doppel-Glow"-Wirkung beim Aktivieren. WÖRTLICH lassen. */
.col.focus { box-shadow: inset 0 4px 0 0 var(--accent); }
.col.focus .col-head {
  color: var(--ink);
  border-bottom-color: var(--accent);
  box-shadow: 0 6px 22px -6px var(--accent);
}
/* Innenabstand + neg. Rand auf JEDEM Vers (nicht nur dem aktiven) -> beim Aktivieren ändert sich
   die Box-Höhe nicht mehr, die folgenden Verse „springen" nicht (Weg 1). Bodenrand entsprechend
   gekürzt (.1rem), damit der Text-zu-Text-Abstand ~gleich bleibt (.2+.1+.2 ≈ .5rem wie vorher). */
/* Seitlicher Innenabstand auf JEDEM Vers (nicht nur dem aktiven) – der Streifen für die
   Blätter-Pfeile. Das negative Margin hebt ihn exakt wieder auf: der TEXT bleibt genau dort,
   wo er ohne Pfeile stünde, die Vers-Box wächst nach außen ins .col-body-Padding hinein.
   Damit ändert sich beim Aktivieren NICHTS mehr – kein seitlicher Ruck, kein Umbruch-Sprung
   (früher schaltete .has-nav das Padding von .4rem auf 1.5rem um). */
.v { display: block; position: relative; border-radius: 6px;
     padding: .2rem var(--v-pad-x); margin: 0 calc(-1 * var(--v-pad-x)) .1rem; }
/* Blätter-Pfeile (Job „Weiter-Blättern"): dezent, im reservierten Rand-Streifen des Fokus-
   Verses. ‹ › (Kapitel) sitzen mittig links/rechts, ⌃ ⌄ (Spalten-Anfang/-Ende) links oben /
   rechts unten. Der Kasten ist etwas breiter als der Streifen, die GLYPHE bleibt aber innen –
   nur die unsichtbare Trefferfläche ragt ~.35rem über die Textkante. */
.v-nav {
  position: absolute; width: 1.25rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); opacity: .3; font-size: 1.25rem; font-weight: 700; line-height: 1;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: opacity .12s, background .12s;
}
.v-nav-g { display: block; line-height: 1; }
/* ⌃/⌄ = dasselbe Guillemet um 90° gedreht -> garantiert gleiche Optik, kein Font-Risiko */
.v-nav-top .v-nav-g, .v-nav-bot .v-nav-g { transform: rotate(90deg); }
.v-nav-prev { left: 0; top: 50%; transform: translateY(-50%); border-radius: 6px 0 0 6px; }
.v-nav-next { right: 0; top: 50%; transform: translateY(-50%); border-radius: 0 6px 6px 0; }
.v-nav-top { left: 0; top: .05rem; border-radius: 6px 0 0 0; }
.v-nav-bot { right: 0; bottom: .05rem; border-radius: 0 0 6px 0; }
/* Trägt eine SEITE zwei Pfeile, teilen sie sich die Vershöhe (oben/unten) statt fester 2rem –
   sonst lägen sie an kurzen Versen übereinander (z. B. ‹ + ⌃ am Kapitel-Schlussvers).
   app.js setzt nav-l2/nav-r2 am Vers, je nachdem welche Seite doppelt belegt ist. */
.v.nav-l2 .v-nav-prev { top: auto; bottom: 0; transform: none; height: 50%; border-radius: 0 0 0 6px; }
.v.nav-l2 .v-nav-top  { top: 0; height: 50%; }
.v.nav-r2 .v-nav-next { top: 0; transform: none; height: 50%; border-radius: 0 6px 0 0; }
.v.nav-r2 .v-nav-bot  { bottom: 0; height: 50%; }
.v-nav:hover { opacity: .95; background: rgba(110, 168, 254, .16); }
.v-nav:active { opacity: 1; background: rgba(110, 168, 254, .28); }
/* Vers-Bezug "Apo 1:3 " — markierbar (kopierbar), dezent vor dem Verstext */
.v .vref {
  color: var(--accent); font-size: .76rem; font-weight: 700;
  white-space: nowrap; user-select: text; -webkit-user-select: text;
  cursor: pointer;                       /* Job 29: Klick färbt den Vers */
}
/* Umgeflippter Vers (Job 151): steht in einer ANDEREN Übersetzung als die Spalte. Grüner
   Streifen links + grüner Versname, damit auf einen Blick klar ist, dass hier fremder Text
   steht; das Kürzel rechts (.vsrc) schaltet eine Übersetzung weiter. Der Streifen läuft über
   box-shadow (inset), damit er die Vers-Geometrie NICHT verschiebt – Padding/Margin von .v
   müssen synchron bleiben, s. „Blätter-Pfeile am Vers". */
.v.v-flip { box-shadow: inset 3px 0 0 var(--flip-line, #3b7a55); border-radius: 6px; }
.v.v-flip .vref { color: var(--flip-ink, #7fc6a0); }
.v.v-flip .vflip-leer { color: var(--muted, #8b919c); font-style: italic; }
.v .vsrc {
  float: right; margin-left: .4rem; cursor: pointer;
  font-size: .66rem; letter-spacing: .06em; line-height: 1.5;
  color: var(--flip-ink, #7fc6a0); border: 1px solid var(--flip-line, #3b7a55);
  border-radius: 5px; padding: 0 .3rem;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.v .vsrc:hover, .v .vsrc:active { background: rgba(59, 122, 85, .28); }
/* 📌 am fremden Vers (Job 164): hält diese Übersetzung dauerhaft an dieser Stelle fest.
   Hohl = nur geflippt (Sitzung), gefüllt = angepinnt (gespeichert). Als SVG in currentColor
   gezeichnet, damit es die grüne Flip-Farbe erbt (ein Emoji brächte seine eigene mit). */
/* FALLE (an 428 px gemessen, 23.8.2026): mit dem blossen Zeichen war die Trefferfläche
   16 × 13 px – am Finger nicht zu treffen. Das Polster vergrössert NUR die Fläche; der
   negative Rand nimmt seinen Platz wieder heraus, damit die Zeile nicht auseinandergeht. */
.v .vpin {
  background: none; border: 0; padding: .3rem .5rem; margin: -.3rem -.25rem -.3rem .1rem;
  cursor: pointer; vertical-align: -.12em; line-height: 1;
  color: var(--flip-line, #3b7a55);
  opacity: .75; touch-action: manipulation;
}
.v .vpin svg { width: .95em; height: .95em; display: inline-block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.v .vpin:hover, .v .vpin:active { opacity: 1; }
.v .vpin.on { color: var(--flip-ink, #7fc6a0); opacity: 1; }
.v .vpin.on svg { fill: currentColor; }
/* Job 29: vers-neutrale Lese-Färbung (Hintergrund am ganzen Vers-Block) */
/* liegt auf demselben Element wie .v -> Werte MÜSSEN mit .v synchron bleiben (--v-pad-x),
   sonst versetzt sich die Lese-Farbfläche gegen die Vers-Box */
.v-shaded { border-radius: 6px; padding: .2rem var(--v-pad-x);
            margin-left: calc(-1 * var(--v-pad-x)); margin-right: calc(-1 * var(--v-pad-x)); }
/* Aktiver Vers (zuletzt geklickt, pro Spalte einer, nur Sitzung) -> heller Hintergrund, gleiche
   Box wie .v-shaded. KEIN !important: eine gesetzte Lese-Farbe (inline-Style) gewinnt, damit man
   die frisch gewählte Farbe sofort sieht (nicht erst beim Verswechsel). */
/* Aktiver Vers: NUR ein umlaufender Rahmen (outline) – kein heller Hintergrund mehr. Der Vers behält
   also seinen normalen dunklen Hintergrund + helle Schrift; der Rahmen allein markiert ihn (gilt für
   uneingefärbte UND gefärbte Verse gleich). outline statt box-shadow -> kollidiert nicht mit dem
   .v-active-Glow. Rahmen konfigurierbar (Einstellungen → „Aktiver Vers"): --active-bg = Rahmenfarbe
   (Default Creme), --active-bw = Rahmendicke (Default 2px). */
/* .v-reffocus = derselbe Rahmen in der VERWEIS-Spalte, aber ein eigener Zustand: er trägt dort nur
   den ›-Pfeil und macht den Vers NICHT zum aktiven Vers (Farbe/Tag/Lesezeichen bleiben außen vor). */
.v-lastclick, .v-reffocus {   /* Box/Padding/Rand sitzen schon auf .v -> hier NUR der Rahmen (kein Höhen-Sprung) */
  outline: var(--active-bw, 2px) solid var(--active-bg, #efe7c6); outline-offset: -2px; }
/* In Spalten OHNE Fokus: gleicher Rahmen, nur durchscheinend (Deckkraft = Einstellung
   „inaktive Spalte", app.js setzt --active-bg-dim = Rahmenfarbe + Alpha). Dicke bleibt. */
.col:not(.focus) .v-lastclick, .col:not(.focus) .v-reffocus { outline-color: var(--active-bg-dim, rgba(239,231,198,.35)); }
/* Orientierungs-Glow: erst beim Wiederklick auf den aktiven Vers, haftet (Sitzung) – rechte Kante.
   BLAUER SEITEN-GLOW – wörtlich, NICHT in eine CSS-Variable packen (löst sich nicht überall auf). */
.v-active { box-shadow: inset -4px 0 0 0 var(--accent), inset -14px 0 16px -10px var(--accent); }
/* Geflippt UND haftender Glow: beide sitzen im box-shadow, sonst überschriebe der spätere den
   früheren (der grüne Streifen wäre am glühenden Vers weg). Der Glow bleibt WÖRTLICH stehen –
   nicht in eine Variable packen (löste sich auf iOS auf, s. CLAUDE.md „Vers-Färben"). */
.v.v-flip.v-active { box-shadow: inset 3px 0 0 var(--flip-line, #3b7a55), inset -4px 0 0 0 var(--accent), inset -14px 0 16px -10px var(--accent); }
.v.hit { background: var(--mark); border-radius: 6px;
         box-shadow: 0 0 0 .35rem var(--mark); }
/* Gleiche Kur wie beim aktiven Vers: der Fokus-Rahmen (.hit, z. B. nach „joh 3:16" anhängen)
   und der grüne Flip-Streifen teilen sich EINE Zeichen-Eigenschaft – ohne diese Regel frisst
   der Rahmen den Streifen, und fremder Text sähe aus wie der eigene. Glow WÖRTLICH lassen. */
.v.v-flip.hit { box-shadow: inset 3px 0 0 var(--flip-line, #3b7a55), 0 0 0 .35rem var(--mark); }
.v.v-flip.hit.v-active { box-shadow: inset 3px 0 0 var(--flip-line, #3b7a55), 0 0 0 .35rem var(--mark), inset -4px 0 0 0 var(--accent), inset -14px 0 16px -10px var(--accent); }
mark { background: #6ea8fe44; color: inherit; border-radius: 3px; }
/* Job „Tags": dezente Chips am Versende (kein Band, keine Farbe), Klick = als Spalte sammeln */
.vtags { display: inline; }
.vtag { font: inherit; font-size: .72rem; line-height: 1; cursor: pointer;
  margin-left: .3em; padding: .12em .45em; border-radius: 999px;
  background: #232830; color: var(--accent); border: 1px solid var(--line); }
.vtag:hover { border-color: var(--accent); }
.vtag-sel { font-style: italic; }   /* Auswahl-Tag (übersetzungs-gebunden) abgesetzt */

/* (Vers-Werkzeugleiste Farbe/Tag/Lesezeichen + ⚒/Pfeil-Fallback entfernt – FAB-Knopf ist Standard.) */

/* ---- Overlays (Picker + Suche) ---- */
.overlay { position: fixed; inset: 0; z-index: 40; display: none;
           background: rgba(10,11,14,.6); }
.overlay.show { display: block; }
.sheet-x {
  position: absolute; top: .5rem; right: .6rem; z-index: 2;
  background: none; border: none; color: var(--muted);
  font-size: 1.5rem; cursor: pointer; padding: .2rem .4rem;
}

/* Buch/Kapitel-Picker (Bottom-Sheet) */
#picker .box {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 88vh; overflow: auto;
  background: var(--panel); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; padding: 1rem clamp(.7rem, 4vw, 1.2rem) 1.4rem;
}
#picker .box .inner { width: min(680px, 96vw); margin: 0 auto; }

/* Suchfenster: zentriertes, gerahmtes Fenster – nur so breit wie der Inhalt,
   feste Höhe (Oberkante springt beim Tippen nicht mehr). Optik wie das F1-Popup. */
#sheet .box {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.2rem, 5vw, 2.5rem);
}
#sheet .box .inner {
  position: relative; width: min(680px, 100%);
  height: min(86vh, 760px); max-height: 86vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.3rem clamp(1.1rem, 4vw, 1.6rem) 1.5rem;
  box-shadow: 0 20px 55px -14px rgba(0,0,0,.75);
}
/* Tabs + Suchfeld bleiben oben stehen, nur die Trefferliste scrollt. */
#sheet .box .inner > .tabs { flex: 0 0 auto; }
#sheet section { flex: 1 1 auto; min-height: 0; }
#sheet section[hidden] { display: none; }
#tab-ref { overflow: auto; }
#tab-text { display: flex; flex-direction: column; }
#tab-text #results { flex: 1 1 auto; min-height: 0; overflow: auto; }
.pick-h { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
          color: var(--muted); margin: .2rem 0 .7rem; }
.grid { display: grid; gap: .4rem; }
.grid.books { grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
.grid.chaps { grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); }
.grid button {
  padding: .55rem .3rem; font: inherit; font-size: .92rem; cursor: pointer;
  background: #191c22; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid button.sel { border-color: var(--accent); color: var(--accent); }
.grid button:active { background: var(--accent); color: #0f1115; }
.grid .grp { grid-column: 1/-1; color: var(--muted); font-size: .62rem;
             letter-spacing: .1em; text-transform: uppercase; margin: .6rem 0 .1rem; }

/* ---- Suche ---- */
.tabs { display: flex; gap: .4rem; margin-bottom: .8rem; }
.tabs button {
  flex: 1; padding: .5rem; font: inherit; cursor: pointer;
  background: #191c22; color: var(--muted);
  border: 1px solid var(--line); border-radius: 9px;
}
.tabs button.active { background: #222732; color: var(--ink); border-color: var(--accent); }
/* Einstellungen-Register (Allgemein | Infoseiten). */
#settings .set-tabs { margin-top: .2rem; }
/* Angedockte Fenster verschieb-/größenveränderbar: Kopf = Ziehgriff, Eck-Griff = Größe */
#settings .pick-h, #bm-manage .pick-h, #export .pick-h, #import .pick-h {
  cursor: move; touch-action: none; -webkit-user-select: none; user-select: none; }
.win-resize { position: absolute; width: 18px; height: 18px; z-index: 3; display: none;
  cursor: nwse-resize; touch-action: none; opacity: .6;
  border-right: 3px solid var(--muted); border-bottom: 3px solid var(--muted);
  border-bottom-right-radius: 12px; }
.win-resize:hover { opacity: 1; border-color: var(--accent); }
#settings .set-panel[hidden] { display: none; }

.search-src-row { margin-bottom: .5rem; font-size: .85rem; color: var(--muted); }
.search-src-row select {
  font: inherit; color: var(--ink); background: #191c22;
  border: 1px solid var(--line); border-radius: 7px; padding: .25rem .4rem; margin-left: .3rem;
}

#out {
  min-height: 2.1em; padding: .7rem 1rem;
  background: #0f1115; border: 1px solid var(--line); border-radius: 10px;
  font-size: 1.3rem; font-weight: 500; margin-bottom: .35rem; word-break: break-word;
}
#out.empty { color: var(--muted); font-weight: 400; font-size: 1rem; }
#out.ok { color: var(--ok); }
#out.warn { color: var(--warn); }
#out.err { color: var(--err); }
#out .hint { display:block; font-size:.85rem; color:var(--muted); margin-top:.3rem; font-weight:400; }
#in { width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }

#q, #goto, #mine-run {
  width: 100%; padding: .8rem 1rem; font: inherit; font-size: 1.15rem;
  background: #0f1115; color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px;
}
#q:focus { outline: none; border-color: var(--accent); }
/* Buch-Vorschläge unterm Lese-Suchfeld (Job 40, Jogi 2026-07-09) */
.q-wrap { position: relative; }
.q-sug { display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 7;
  max-height: min(50vh, 320px); overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.45); }
.q-sug-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; cursor: pointer;
  border-top: 1px solid var(--line); }
.q-sug-row:first-child { border-top: none; }
.q-sug-row:hover { background: var(--panel2); }
.q-sug .qs-name { color: var(--ink); font-size: .98rem; }
.q-sug .qs-hint { margin-left: auto; color: var(--muted); font-size: .72rem; }
#goto, #mine-run { background: #21303f; border-color: var(--accent); cursor: pointer;
        font-weight: 600; margin-top: .45rem; }
/* „Meine"-Reiter (Job 36): Quellen-Haken untereinander */
.mine-srcs { display: flex; flex-direction: column; gap: .45rem; margin: .4rem .2rem .8rem; }
.mine-srcs label { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.mine-srcs input { accent-color: var(--accent); }
.opts { display: flex; gap: 1rem; margin: .6rem .2rem; flex-wrap: wrap; font-size: .9rem; color: var(--muted); }
.opts label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.opts input { accent-color: var(--accent); }
.help-btn { margin-left: auto; background: #191c22; color: var(--accent);
  border: 1px solid var(--line); border-radius: 8px; padding: .3rem .7rem;
  font: inherit; font-size: .85rem; cursor: pointer; }
.help-btn:active { background: var(--accent); color: #0f1115; }
.search-info { font-size: .8rem; color: var(--muted); margin: .5rem .2rem; min-height: 1.2em; }
/* Dauerhafter Punkt-Hinweis im Register „Suche" (v0.9.42.3) – etwas leiser als die Statuszeile,
   damit er nicht mit dem Trefferergebnis konkurriert. */
.q-tip { font-size: .78rem; line-height: 1.45; color: var(--muted); opacity: .85;
         margin: .5rem .2rem 0; border-left: 2px solid var(--line); padding-left: .5rem; }
.q-tip code { font-size: .95em; padding: 0 .2em; border-radius: 3px; background: rgba(255,255,255,.08); }

/* Zentrierte, opake, gerahmte Popups (Hilfe / Menü / Einstellungen) */
#help, #settings, #export, #import { z-index: 50; background: rgba(10,11,14,.72); }
#login { z-index: 60; background: rgba(8,9,12,.92); }   /* Gate: über allem, blockt */
/* Suche-Hilfe (#help, nicht aus dem Menü) bleibt zentriert. */
#help .box {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.2rem, 6vw, 3rem);
}
#help .box .inner {
  position: relative; width: min(560px, 100%);
  max-height: 84vh; overflow: auto;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.4rem clamp(1.1rem, 4vw, 1.7rem) 1.6rem;
  box-shadow: 0 20px 55px -14px rgba(0,0,0,.75);
}
/* Menü-Inhalts-Fenster docken an DASSELBE top/left wie das Menü-Panel an (statt zentriert
   aufzuspringen) – dürfen aber breiter sein. Abgedunkelter Hintergrund bleibt (anders als Menü). */
#settings .box, #bm-manage .box, #export .box, #import .box, #login .box {
  position: absolute; inset: 0;
}
#settings .box .inner, #bm-manage .box .inner, #export .box .inner, #import .box .inner, #login .box .inner,
#news .box .inner {
  position: absolute; top: calc(var(--hh) + 6px); left: 8px;
  width: min(560px, 92vw); overflow: auto;
  /* Das Fenster beginnt UNTER der Kopfleiste – die Höhe muss den Rest hergeben, sonst ragt
     es unten aus dem Bild und die Fußzeile (z. B. „✓ Übernehmen") ist nie erreichbar
     (v0.9.30.2). dvh, weil iOS die Fläche hinter der URL-Leiste in vh mitzählt. */
  max-height: calc(100vh - var(--hh, 3.2rem) - 12px);
  max-height: calc(100dvh - var(--hh, 3.2rem) - 12px);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 1.4rem clamp(1.1rem, 4vw, 1.7rem) 1.6rem;
  box-shadow: 0 20px 55px -14px rgba(0,0,0,.75);
}
/* Menü + Untermenüs: kleines Panel oben links, KEIN Abdunkeln (durchsichtiger Fang-Layer
   fängt den Klick daneben zum Schließen). */
#menu, #data-menu, #manage-menu { z-index: 50; background: transparent; }
#menu .box, #data-menu .box, #manage-menu .box { position: absolute; inset: 0; }
#menu .box .inner, #data-menu .box .inner, #manage-menu .box .inner {
  position: absolute; top: calc(var(--hh) + 6px); left: 8px;
  width: min(290px, 92vw); overflow: auto;
  max-height: calc(100vh - var(--hh, 3.2rem) - 12px);   /* wie die Inhalts-Fenster oben (v0.9.30.3) */
  max-height: calc(100dvh - var(--hh, 3.2rem) - 12px);
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); border-radius: 14px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 20px 55px -14px rgba(0,0,0,.75);
}
/* Breadcrumbs in den Unterfenstern */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
  margin-bottom: .85rem; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.crumbs button { font: inherit; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--accent); }
.crumbs button:hover { text-decoration: underline; }
.crumbs .sep { color: #4b5563; }
.crumbs .here { color: var(--ink); font-weight: 600; }
/* Schloss-Chip im Header (Konto) */
/* #login dient zugleich als blockierendes Gate (ohne X/Breadcrumb) und als freiwilliges
   Konto-Fenster (.konto -> X + Breadcrumb sichtbar). */
#login:not(.konto) .sheet-x, #login:not(.konto) .crumbs { display: none; }
/* Menü-Einträge */
.menu-list { display: flex; flex-direction: column; gap: .5rem; }
.menu-list button {
  text-align: left; padding: .7rem .9rem; font: inherit; font-size: 1rem; cursor: pointer;
  background: #191c22; color: var(--ink); border: 1px solid var(--line); border-radius: 9px;
}
.menu-list button:active { background: var(--accent); color: #0f1115; }
.menu-list .menu-ic { font-size: 1.4em; vertical-align: -.08em; margin-right: .12em; }
/* Einstellungen */
.set-row { margin-top: .3rem; }
.set-label { font-size: .95rem; font-weight: 600; margin-bottom: .5rem; }
.set-sc { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sc-val {
  flex: 1 1 auto; min-width: 8rem; padding: .45rem .7rem; font-size: .95rem;
  background: #0f1115; border: 1px solid var(--line); border-radius: 8px; color: var(--accent); font-weight: 600;
}
.set-sc button {
  padding: .45rem .8rem; font: inherit; font-size: .9rem; cursor: pointer;
  background: #191c22; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.set-sc button:active { background: var(--accent); color: #0f1115; }
.set-hint { font-size: .82rem; color: var(--muted); margin: .6rem 0 0; line-height: 1.5; }
/* Spaltenbreite-Profile (Einstellungen) */
.colprof-table { width: 100%; border-collapse: collapse; margin: .6rem 0 .5rem; font-size: .9rem; }
.colprof-table td { padding: .25rem .35rem .25rem 0; vertical-align: middle; }
.colprof-name { font-weight: 600; }
.colprof-name input {
  width: 9rem; padding: .35rem .55rem; font: inherit; font-weight: 600;
  background: #0f1115; border: 1px solid var(--line); border-radius: 7px; color: var(--ink);
}
.colprof-w {
  width: 4.2rem; padding: .35rem .5rem; font: inherit;
  background: #0f1115; border: 1px solid var(--line); border-radius: 7px; color: var(--accent); font-weight: 600;
}
.colprof-table .unit { color: var(--muted); font-size: .82rem; }
.colprof-del {
  padding: .25rem .55rem; font: inherit; font-size: .85rem; cursor: pointer;
  background: #191c22; color: var(--muted); border: 1px solid var(--line); border-radius: 7px;
}
.colprof-del:hover { color: #e08a8a; border-color: #e08a8a; }
.colprof-table tr.active { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 7px; }
#colprof-add {
  padding: .4rem .8rem; font: inherit; font-size: .88rem; cursor: pointer;
  background: #191c22; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.test-links { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); line-height: 1.6; }
.test-links a { color: var(--accent); font-weight: 600; text-decoration: none; }
.test-links a:hover { text-decoration: underline; }
/* Anmeldung (Gate) + Daten-Fenster */
.login-field { display: flex; flex-direction: column; gap: .35rem; margin: .8rem 0; }
.login-field label { font-size: .9rem; color: var(--muted); }
.login-field input, .data-text {
  font: inherit; padding: .55rem .7rem; color: var(--ink);
  background: #0f1115; border: 1px solid var(--line); border-radius: 8px;
}
.data-text { width: 100%; min-height: 9rem; resize: vertical;
  font-family: Consolas, monospace; font-size: .85rem; white-space: pre; }
.data-text.ta-full { position: fixed; inset: 1.5vh 1.5vw; width: 97vw; height: 97vh;
  z-index: 70; min-height: 0; resize: none; }
.data-btns, .login-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.data-btns button, .login-btns button {
  padding: .55rem .9rem; font: inherit; font-size: .9rem; cursor: pointer;
  background: #191c22; color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.data-btns button.primary, .login-btns button.primary { background: var(--accent); color: #0f1115; font-weight: 700; }
.data-btns button:active, .login-btns button:active { background: var(--accent); color: #0f1115; }
/* Gruppen-Haken (Export/Import): Bibel vs. Infoseiten */
.grp-pick { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin: .7rem 0 .2rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: #191c22; }
.grp-pick .grp-lbl { font-size: .82rem; color: var(--muted); margin-right: .1rem; }
.grp-pick label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .95rem; }
.grp-pick input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.grp-pick input:disabled + span { opacity: .45; }
.data-sec { margin-top: 1.1rem; }
.data-sec > h3 { font-size: .98rem; margin: 0 0 .2rem; }
.login-msg, .data-msg { font-size: .85rem; color: var(--muted); margin-top: .6rem; min-height: 1.1rem; }
.login-msg.err, .data-msg.err { color: #e08a8a; }
.login-msg.ok, .data-msg.ok { color: #86c98b; }
/* Status oben in Export-/Import-Fenster sichtbar halten (Aktionen sitzen weiter unten). */
#export-msg, #import-msg { position: sticky; top: 0; z-index: 2; margin: 0 0 .2rem;
  background: var(--bg, #15171c); padding: .25rem 0; }
#export-msg:not(:empty), #import-msg:not(:empty) { padding: .4rem .6rem; border-radius: 6px; background: #1b2026; }
.auth-state { font-size: .85rem; color: var(--muted); margin: .2rem 0 .6rem; }
/* Sync-v2-Import-Vorschau: eine Zeile je Thema mit Haken + Zähler */
#data-preview-list { border: 1px solid #3a4150; border-radius: 8px; padding: .6rem .7rem; background: #1b2026; }
.prev-row { display: flex; align-items: center; gap: .6rem; padding: .35rem .1rem; cursor: pointer; }
.prev-row + .prev-row { border-top: 1px solid #2a313c; }
.prev-check { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); flex: 0 0 auto; }
.prev-label { font-weight: 600; min-width: 8.5rem; }
.prev-info { font-size: .82rem; color: var(--muted); }
.prev-row.prev-none { opacity: .5; cursor: default; }
/* Sync-v2-Backup-Archiv: Titel-Zeile + Liste älterer Backups */
.data-bk-row { display: flex; gap: .5rem; align-items: center; margin-top: .7rem; }
.bk-title { flex: 1 1 auto; min-width: 0; padding: .45rem .6rem; border-radius: 6px;
  border: 1px solid #3a4150; background: #12151a; color: var(--fg); font-size: .9rem; }
/* „⬆ Zum Server sichern" ist bewusst der weisse Standard-Knopf; nach dem Klick bleibt nur der
   Rahmen (Zeichen: Lauf angeworfen), bis im Fenster etwas geaendert / es neu geoeffnet wird. */
#data-push.gedrueckt { background: transparent; color: #fff;
  border-style: solid; border-color: #fff; }   /* Rahmenbreite vom Standard-Knopf lassen: kein Groessensprung */
.bk-archive { margin-top: .6rem; border: 1px solid #3a4150; border-radius: 8px; overflow: hidden; }
.bk-empty { padding: .6rem .7rem; font-size: .85rem; color: var(--muted); }

/* === Import Sync v2 (Job 31): zwei Schritte, faltbare Abschnitte, Backup-Liste === */
.imp-steps { display: flex; gap: .5rem; align-items: center; margin: .2rem 0 .8rem; font-size: .72rem; }
.imp-step { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
.imp-step .n { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); font-size: .7rem; }
.imp-step.active { color: var(--ink); }
.imp-step.active .n { background: var(--accent); color: #0f1115; border-color: var(--accent); }
.imp-arrow { color: var(--line); }
.imp-back { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit;
  padding: .3rem 0; margin-bottom: .4rem; }
.imp-back:hover { color: var(--ink); }

/* faltbare Abschnitte (Server-Backups / Datei-Text), unabhängig auf-/zuklappbar */
.sec-fold { border: 1px solid var(--line); border-radius: 9px; margin-bottom: .6rem;
  background: #191c22; overflow: hidden; }
.sec-fold > summary { cursor: pointer; list-style: none; padding: .6rem .8rem; font-size: .9rem;
  display: flex; align-items: center; gap: .5rem; }
.sec-fold > summary::-webkit-details-marker { display: none; }
.sec-fold > summary .ic { font-size: 1.05rem; }
.sec-fold > summary .cnt { font-size: .74rem; color: var(--muted); margin-left: auto; }
.sec-fold > summary::after { content: "⌄"; margin-left: auto; color: var(--muted); }
.sec-fold[open] > summary::after { content: "⌃"; }
.sec-fold .sec-body { padding: .1rem .8rem .8rem; }

/* Backup-Liste: max. ~4 sichtbar, Rest scrollt; neuestes mit Schild */
.bk-list { display: flex; flex-direction: column; gap: .4rem;
  max-height: 15rem; overflow-y: auto; padding-right: .2rem; }
.bk-list > * { flex: 0 0 auto; }   /* dieselbe Zieharmonika-Falle wie .fab-tear-list, s. dort */
.bk { display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: 8px; background: #0f1115; color: var(--ink); cursor: pointer; font: inherit; }
.bk:hover { border-color: var(--accent); }
.bk .ic { font-size: 1.1rem; flex-shrink: 0; }
.bk-main { flex: 1; min-width: 0; }
.bk-when { display: block; font-size: .9rem; }
.bk-meta { display: block; font-size: .85rem; font-weight: 600; color: #c3c9d4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-size { font-size: .72rem; color: var(--muted); flex-shrink: 0; }
.bk-badge { flex-shrink: 0; font-size: .64rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: .05rem .45rem; opacity: .85; }

/* Schritt 2: Quelle + „nichts Neues"-Hinweis */
.prev-src { font-size: .8rem; color: var(--muted); margin: .1rem 0 .7rem; background: #191c22;
  border: 1px solid var(--line); border-radius: 7px; padding: .4rem .65rem; }
.prev-src b { color: var(--ink); }
.prev-k-neu { color: var(--ok); }
.prev-k-rep { color: var(--warn); }
#data-preview-empty { font-size: .88rem; color: var(--muted); background: #191c22;
  border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; margin: .3rem 0; }
.prev-foot { margin-top: .8rem; }
#data-preview-apply[disabled], #data-import-run[disabled] { opacity: .45; cursor: default; }

/* === Etappe 2: Zeile mit 👁/🗑, Ansehen-Fenster, Hilfs-Overlays === */
.bk-row { display: flex; gap: .4rem; align-items: stretch; }
.bk-row .bk { flex: 1; }
.bk-eye, .bk-del { flex-shrink: 0; width: 2.5rem; border: 1px solid var(--line); border-radius: 8px;
  background: #191c22; color: var(--muted); cursor: pointer; font-size: 1.05rem; }
.bk-eye:hover { border-color: var(--accent); color: var(--ink); }
.bk-del:hover { border-color: var(--err); color: var(--err); }

.insp-id { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: #191c22;
  border: 1px solid var(--line); border-radius: 8px; padding: .5rem .7rem; margin: .2rem 0 .8rem; }
.insp-when { font-size: .95rem; }
.insp-meta { font-size: .86rem; font-weight: 600; color: #c3c9d4; }
.insp-size { font-size: .74rem; color: var(--muted); margin-left: auto; }
.insp-summary { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { font-size: .76rem; color: var(--ink); background: #191c22; border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .6rem; }
.chip b { color: var(--accent); }
.insp-sec { border-top: 1px solid var(--line); padding: .7rem 0 .2rem; }
.insp-sec:first-child { border-top: 0; }
.insp-sec h4 { margin: 0 0 .45rem; font-size: .86rem; }
.insp-sec h4 .c { color: var(--muted); font-weight: 400; font-size: .78rem; }
.il { font-size: .84rem; padding: .12rem 0; }
.il .ref, .mi .ref { color: var(--accent); }
.il .txt { color: var(--muted); }
.swrow { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .2rem; }
.sw { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }
.dot { display: inline-block; width: .9rem; height: .9rem; border-radius: 4px; border: 1px solid #0006; flex-shrink: 0; }
.ikv { display: grid; grid-template-columns: auto 1fr; gap: .15rem .8rem; font-size: .84rem; }
.ikv .k { color: var(--muted); }
.allink { display: inline-block; margin-top: .4rem; background: none; border: none; color: var(--accent);
  cursor: pointer; font: inherit; font-size: .78rem; padding: .1rem 0; }
.allink:hover { text-decoration: underline; }
.allink::after { content: " ›"; }

.raw-wrap { position: relative; }
.raw-fs { position: absolute; top: .4rem; right: .4rem; z-index: 1; background: #1e2128;
  border: 1px solid var(--line); border-radius: 6px; color: var(--muted); cursor: pointer; padding: .1rem .4rem; }
.raw-fs:hover { color: var(--ink); border-color: var(--accent); }
#insp-raw-pre { margin: 0; max-height: 14rem; overflow: auto; background: #0f1115; border: 1px solid var(--line);
  border-radius: 7px; padding: .6rem .7rem; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
.insp-foot { margin-top: 1rem; align-items: center; }
.foot-spacer { flex: 1; }
.danger { color: var(--err); border-color: var(--err); background: transparent; }
.danger:hover { background: var(--err); color: #1a0f10; }

/* Hilfs-Overlays (über dem Import-Fenster) */
.bk-modal { position: fixed; inset: 0; z-index: 80; display: none; align-items: center; justify-content: center;
  background: rgba(10, 11, 14, .6); padding: clamp(1rem, 6vw, 3rem); }
.bk-modal.show { display: flex; }
.bk-modal-box { position: relative; width: min(420px, 100%); max-height: 80vh; overflow: hidden;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; }
.bk-modal-h { padding: .8rem 1rem .6rem; border-bottom: 1px solid var(--line); font-size: .9rem;
  display: flex; align-items: center; gap: .5rem; }
.bk-modal-h .sheet-x { position: static; margin-left: auto; }
.bk-mini-list { overflow: auto; padding: .4rem .5rem; }
.mi { font-size: .78rem; padding: .26rem .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid #ffffff0a; display: flex; align-items: center; gap: .4rem; }
.bk-modal-pad { padding: 1rem; }
.bk-modal-pad p { margin: .1rem 0 1rem; font-size: .85rem; }

.bk-fs { position: fixed; inset: 0; z-index: 90; display: none; flex-direction: column; background: #0c0d10; }
.bk-fs.show { display: flex; }
.bk-fs-h { display: flex; align-items: center; padding: .7rem 1rem; border-bottom: 1px solid var(--line); font-size: .85rem; }
.bk-fs-h .sheet-x { position: static; margin-left: auto; }
#bk-raw-full-pre { flex: 1; margin: 0; overflow: auto; padding: 1rem;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }
/* Trennstriche in einer Spalte: dünn zwischen Kapiteln, fett zwischen Büchern */
.sep-ch { border-top: 2px dashed #6b7480; margin: .9rem .2rem; }
.sep-book { border-top: 2px solid var(--accent); margin: 1.5rem .2rem 1.1rem; }
.help-lead { font-size: .9rem; color: var(--muted); margin: .3rem 0 .9rem; line-height: 1.55; }
.help-lead code, .help-list code {
  background: #0f1115; border: 1px solid var(--line); border-radius: 5px;
  padding: .03rem .35rem; font-size: .9em; color: var(--ink); }
.help-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem .9rem;
  align-items: baseline; margin: 0 0 .9rem; }
.help-list dt { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent); white-space: nowrap; font-size: .95rem; }
.help-list dd { margin: 0; color: #cdd2da; font-size: .92rem; }
#results { margin-top: .4rem; }
.res {
  display: block; width: 100%; text-align: left;
  padding: .6rem .8rem; margin-bottom: .4rem; cursor: pointer;
  background: #191c22; border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font: inherit;
}
.res:active { border-color: var(--accent); }
.res .rref { color: var(--accent); font-size: .8rem; font-weight: 700; display: block; margin-bottom: .15rem; }
.res .rtxt { font-size: .95rem; color: #cdd2da; }
/* Treffer aus den eigenen Texten (Job 89): abgesetzter Rand + Stelle als Link am ENDE.
   Darunter der zugehörige Vers (`.rverse`, v0.9.42.0) – gedämpft, damit klar bleibt, was
   der eigene Text ist und was der Bibeltext. */
.res-mine { border-left: 3px solid #6f7ea8; background: #1b1e26; }
.res-mine .rkind { margin-right: .35rem; opacity: .85; }
.res-mine .rverse { display: block; margin: .35rem 0 0; padding-left: .6rem;
  border-left: 2px solid var(--line); font-size: .88rem; color: var(--muted); }
.res-mine .rref-end { margin: .35rem 0 0; text-decoration: underline; }
/* `.opts label` ist inline-flex – das übersteuert sonst das UA-`[hidden]` (gleiche Falle
   wie bei der ausgeblendeten Kommandozeile). */
.opts label[hidden] { display: none; }

/* Bibel-Tastatur (aus rel) */
.kbd-fmt { display: flex; gap: .4rem; margin-bottom: .3rem; }
.kbd-fmt button { flex: 1; padding: .4rem; font: inherit; font-size: .78rem;
  background: #191c22; color: var(--muted); border: 1px solid #23272f; border-radius: 8px; cursor: pointer; }
.kbd-fmt button.active { background: #222732; color: var(--ink); border-color: var(--accent); }
.kbd-sug { display: none; flex-wrap: wrap; align-items: center; gap: .4rem;
  min-height: 2.2rem; padding: .5rem .7rem; margin-bottom: .6rem;
  background: #191c22; border: 1px solid #23272f; border-radius: 10px; }
.kbd-sug.show { display: flex; }
.kbd-sug .lbl { font-size: .8rem; color: var(--muted); }
.kbd-sug .chip { padding: .3rem .7rem; font: inherit; font-size: 1rem;
  background: #0f1115; color: var(--accent); border: 1px solid #2a3340; border-radius: 999px; cursor: pointer; }
.kbd-sug .chip:active, .kbd-sug .chip.sel { background: var(--accent); color: #0f1115; border-color: var(--accent); }
.kbd-keys { display: flex; flex-direction: column; gap: .35rem; }
.kbd-row { display: flex; gap: .35rem; justify-content: center; }
.kbd-row button { flex: 1 1 0; min-width: 0; padding: .65rem .2rem; font: inherit; font-size: 1.05rem;
  background: #191c22; color: var(--ink); border: 1px solid #23272f; border-radius: 8px; cursor: pointer; }
.kbd-row button:active { background: var(--accent); color: #0f1115; }
.kbd-row button.dim { opacity: .28; color: var(--muted); }
.kbd-row button.op { color: var(--accent); font-weight: 600; }
.kbd-row button.act { color: var(--warn); }
.kbd-row button.wide { flex-grow: 6; }
.kbd-engine { text-align: right; margin-top: .4rem; font-size: .62rem; color: #555b66; letter-spacing: .03em; }

/* ---- Anmerkungen (Stufe 2, Schritt 1) ---- */
/* angezeigter (evtl. ersetzter) Bereich – dezent unterstrichen */
.anno { text-decoration: underline dotted var(--accent); text-underline-offset: 2px; }
.anno-fmt { text-decoration: none; }   /* formatierter Text trägt seinen eigenen Stil */
/* kleiner Punkt-Marker: blau = ersetztes Original, grün = Markdown-Kommentar */
.anno-mark {
  background: none; border: 0; padding: 0 .15em; margin: 0;
  cursor: pointer; font-size: .6em; vertical-align: super; line-height: 1;
}
.anno-mark-orig { color: var(--accent); }
.anno-mark-alt { color: var(--accent); }   /* hohler Punkt ○: Ersatz-Text liegt bereit, ist nicht eingesetzt */
.anno-mark-note { color: var(--ok); }
.anno-mark:hover { color: var(--ink); }
/* aufgeklapptes Original (inline, hinter blauem Punkt) */
.anno-fold {
  background: #1a1d23; border: 1px solid var(--line); border-radius: 5px;
  color: var(--muted); font-size: .82em; padding: .05em .4em; margin: 0 .15em;
}
/* „Was ist neu" (Job 169): Liste der jüngsten Fassungen. Der Text ist Markdown und läuft
   durch dieselbe Maschine wie Kommentar und Infoseite (md.js, Job 158.4) – darum gelten hier
   dieselben Klassen (.md-blank, u.md-u …), s. `.anno-note`. */
/* FALLE (beim Bauen gefunden, an 428 px am Schnappschuss gesehen): Rahmen, Hintergrund und
   Platzierung eines solchen Fensters kommen aus der Sammel-Regel oben, die die Fenster
   EINZELN AUFZÄHLT. Ohne `#news` darin stand der Text ohne Kasten quer über der App.
   **Neues Fenster ⇒ dort eintragen**, nicht hier eine zweite Fassung bauen.
   Gescrollt wird von `.inner` (wie bei allen anderen) – bewusst KEIN eigener Scroll-Bereich
   in einem `position: fixed`-Fenster (iOS-Falle, s. „Herausgezogene Leisten"). */
.news-item { border-top: 1px solid var(--line); padding: .7rem 0; }
.news-item:first-child { border-top: none; padding-top: .2rem; }
.news-ver { font-size: .72rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace;
  letter-spacing: .03em; margin-bottom: .25rem; }
.news-item.news-jetzt .news-ver { color: var(--accent); }
.news-txt { font-size: .92em; line-height: 1.5; color: var(--ink); }
.news-txt p { margin: 0; }          /* Abstand kommt aus .md-blank, sonst doppelt */
.news-txt .md-blank { display: block; }
.news-txt code { background: #0f1115; border-radius: 3px; padding: 0 .25em; font-size: .9em; }
.news-txt a { color: var(--accent); }
.news-txt img { max-width: 100%; }
.news-load { color: var(--muted); padding: .6rem 0; }

/* aufgeklappter Markdown-Kommentar: eigener umrahmter Absatz in neuer Zeile */
.anno-note {
  display: block; margin: .5rem 0 .7rem; padding: .5rem .7rem;
  background: #171b22; border: 1px solid var(--line); border-left: 3px solid var(--ok);
  border-radius: 7px; color: var(--ink); font-size: .92em; position: relative;
}
.anno-note[hidden] { display: none; }   /* sonst überstimmt display:block das HTML-hidden */
.anno-note > :first-child { margin-top: 0; }
.anno-note > :last-child { margin-bottom: 0; }
.anno-note p { margin: 0; }        /* Abstand kommt aus den erhaltenen Leerzeilen (md-blank) */
.anno-note .md-blank { display: block; }
.anno-note img { max-width: 100%; }
.anno-note h1, .anno-note h2, .anno-note h3,
.anno-note h4, .anno-note h5, .anno-note h6 { margin: .5em 0 .3em; line-height: 1.2; }
.anno-note ul, .anno-note ol { margin: .4em 0; padding-left: 1.4em; }
.anno-note li.task { list-style: none; margin-left: -1.2em; }
.anno-note blockquote { margin: .4em 0; padding: .1em .7em; border-left: 3px solid var(--line); color: var(--muted); }
.anno-note hr { border: 0; border-top: 1px solid var(--line); margin: .6em 0; }
.anno-note code { background: #0f1115; border-radius: 3px; padding: 0 .25em; font-size: .9em; }
/* Eingebetteter Vers im Kommentar (Job 208): dieselben Klassen wie in der Infoseite (.mdv …),
   hier nur ohne .md-scope drumherum. Der .vref darin ist NICHT der Versname dieses Verses –
   anders gefärbt und nicht fett, damit man die beiden nicht verwechselt. */
.anno-note .mdv { display: block; margin: .4rem 0; padding: .3rem .6rem; border-left: 3px solid var(--accent);
  background: rgba(110,168,254,.08); border-radius: 0 6px 6px 0; }
.anno-note .mdv-head { display: block; cursor: pointer; user-select: none; -webkit-user-select: none; }
.anno-note .mdv-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.anno-note .mdv-head:hover .mdv-label { color: #cdd2da; }
.anno-note .mdv-caret { color: var(--muted); font-size: .7rem; margin-right: .35rem; }
.anno-note .mdv-body { display: block; margin-top: .15rem; }
.anno-note .mdv.collapsed .mdv-body { display: none; }
.anno-note .mdv-v { display: block; margin: .1rem 0; }
.anno-note .mdv-v .vref { color: #9cc2ff; font-weight: 400; font-size: .8em; margin-right: .35rem; cursor: default; }
.anno-note .mdv-err { display: block; color: var(--muted); font-style: italic; font-size: .85em; }
.anno-note pre { background: #0f1115; border: 1px solid var(--line); border-radius: 6px; padding: .5em .6em; overflow-x: auto; }
.anno-note pre code { background: none; padding: 0; }
.anno-note a { color: var(--accent); }
.anno-note table { border-collapse: collapse; margin: .4em 0; }
.anno-note th, .anno-note td { border: 1px solid var(--line); padding: .2em .5em; text-align: left; }
.anno-note th { background: #1a1d23; }
/* schwebende Leiste über der Auswahl */
/* Toolbar im aufgeklappten Kommentar: Bearbeiten / Einklappen */
.anno-note-bar { display: flex; gap: .5rem; justify-content: flex-end; margin-bottom: .3rem; }
.anno-note-bar button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: .82em;
}
.anno-note-bar button:hover { color: var(--accent); }

/* Rechtsklick-Kontextmenü */
#anno-menu {
  position: fixed; z-index: 55; min-width: 11rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.5); padding: .25rem; font-size: .85rem;
  display: flex; flex-direction: column;
  /* nicht markierbar */
  -webkit-user-select: none; user-select: none;
}
#anno-menu[hidden] { display: none; }
#anno-menu button {
  background: none; border: 0; border-radius: 5px; text-align: left;
  padding: .4rem .55rem; color: var(--ink); cursor: pointer; font: inherit;
}
#anno-menu button:hover { background: #232833; }
#anno-menu .mi-ico { display: inline-block; margin-right: .3rem; }
#anno-menu .anno-sep { height: 1px; background: var(--line); margin: .28rem .2rem; }
#anno-menu button.disabled { color: #6b7280; cursor: default; }
#anno-menu button.disabled:hover { background: none; }

#anno-bar {
  position: fixed; z-index: 50; width: 20rem; max-width: calc(100vw - 1rem);
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.5);
  padding: .6rem; display: flex; flex-direction: column; gap: .45rem;
  font-size: .85rem;
}
#anno-bar[hidden] { display: none; }
/* Umschalter Kommentar / Ersetzen */
.anno-tabs { display: flex; gap: .3rem; }
.anno-tab {
  flex: 1 1 auto; background: #191c22; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem;
  cursor: pointer; font: inherit;
}
.anno-tab.active { color: var(--ink); border-color: var(--accent); }
.anno-tab[hidden] { display: none; }
.anno-tabs[hidden] { display: none; }      /* Vers-Kommentar: gar keine Umschalter */
.anno-sec { display: flex; flex-direction: column; gap: .45rem; }
.anno-sec[hidden] { display: none; }
/* Formatieren: Farb-Swatches + Schalter */
.fmt-row { display: flex; align-items: center; gap: .5rem; }
.fmt-row > span { color: var(--muted); flex: 0 0 5.5rem; }
.fmt-swatches { display: flex; gap: .35rem; flex-wrap: wrap; }
.fmt-sw {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line);
  padding: 0; cursor: pointer;
}
.fmt-sw.fmt-none { background: #0f1115; color: var(--muted); font-size: .8rem; line-height: 1; }
.fmt-sw.sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.fmt-toggles { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.anno-comment-head { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; }
#anno-fs {
  background: #191c22; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .1rem .4rem; cursor: pointer; font-size: 1rem; line-height: 1;
}
#anno-bar #anno-text, #anno-bar #anno-comment {
  background: #0f1115; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .5rem; font: inherit;
}
/* Ersatz-Text-Feld mit ✕ RECHTS innen (v0.9.40.2): leeren ⇄ Original zurückholen */
.anno-text-wrap { position: relative; display: flex; }
.anno-text-wrap #anno-text { flex: 1 1 auto; min-width: 0; padding-right: 1.9rem; }
.anno-text-wrap #anno-text-x {
  position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .85rem; line-height: 1; padding: .15rem .35rem;
}
.anno-text-wrap #anno-text-x:hover { color: var(--accent); }
#anno-bar #anno-comment { resize: vertical; min-height: 6rem; font-family: inherit; }
#anno-bar #anno-text:focus, #anno-bar #anno-comment:focus { outline: none; border-color: var(--accent); }
.anno-chk { display: flex; align-items: center; gap: .4rem; color: var(--muted); cursor: pointer; }
.anno-btns { display: flex; justify-content: flex-end; gap: .4rem; margin-top: .15rem; }
.anno-btns button {
  background: #191c22; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .7rem; cursor: pointer; font: inherit;
}
.anno-btns #anno-save { color: var(--accent); border-color: var(--accent); }
.anno-btns #anno-delete { color: var(--err); border-color: var(--err); margin-right: auto; }
.anno-btns button:active { background: var(--accent); color: #0f1115; }

/* Vollbild-Editor: Leiste füllt den Bildschirm, Textfeld wächst mit */
#anno-bar.fullscreen {
  inset: 0; left: 0 !important; top: 0 !important; width: auto; max-width: none;
  border-radius: 0; padding: 1rem;
}
#anno-bar.fullscreen .anno-sec[data-sec="kommentar"] { flex: 1 1 auto; }
#anno-bar.fullscreen #anno-comment { flex: 1 1 auto; min-height: 0; resize: none; }
/* Werkzeugleiste (Job 208, dieselbe wie in den Infoseiten) – nur im Vollbild */
#anno-bar .anno-tools { display: none; }
#anno-bar.fullscreen .anno-tools { display: block; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#anno-bar.fullscreen .anno-tools .md-edittools { flex-wrap: wrap; border-bottom: none; }
#anno-bar.fullscreen .anno-tools .md-colbar { border-bottom: none; border-top: 1px solid var(--line); }
/* iPhone/iPad: Safari zoomt die GANZE Seite auf, sobald ein Feld mit Schrift < 16 px den Cursor
   bekommt – und bleibt vergrössert (Jogi, 22.9.2026: Vollbild ragte links/rechts/oben hinaus,
   Pinch holte es zurück). 16 px nur dort, wo Safari das tut (`-webkit-touch-callout` kennt nur
   iOS/iPadOS); am Rechner bleibt die Leiste klein. NICHT per `maximum-scale=1` lösen – das nähme
   das Pinch-Zoomen überall, und die Griffe zoomen bewusst mit. Vorerst nur dieses Fenster. */
@supports (-webkit-touch-callout: none) {
  #anno-bar #anno-text, #anno-bar #anno-comment { font-size: 16px; }
}
/* Edit | Preview (Job 208) – nur im Vollbild; Preview blendet Leiste + Textfeld aus.
   Die Vorschau trägt .anno-note und sieht damit aus wie der Kommentar am Vers. Sie scrollt
   selbst – mit overscroll-behavior/touch-action wie bei .h-fix (iOS-Falle „Herausgezogene
   Leisten"); das Vollbild deckt ohnehin die ganze Seite ab. */
.anno-head-r { display: inline-flex; align-items: center; gap: .4rem; }
#anno-bar .anno-mode { display: none; }
#anno-bar.fullscreen .anno-mode { display: inline-flex; }
#anno-bar.anno-prevmode .anno-tools, #anno-bar.anno-prevmode #anno-comment { display: none; }
#anno-bar.fullscreen .anno-sec[data-sec="kommentar"] { min-height: 0; }   /* sonst wächst sie mit der Vorschau über den Rand */
#anno-bar.fullscreen #anno-prev:not([hidden]) { flex: 1 1 auto; min-height: 0; margin: 0;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; font-size: 1rem; }
.anno-prev-leer { color: var(--muted); font-style: italic; }

/* ---- Lesezeichen ---- */
.bm-mark { height: 1.4em; width: auto; vertical-align: -.3em; margin-left: .2em; cursor: pointer; }
#anno-menu button.small { font-size: .78em; padding: .25rem .55rem; }
/* Verwaltung: je Lesezeichen eine Karte mit beschrifteten Zeilen */
.bm-empty { color: var(--muted); margin: .4rem 0; }
.bm-row { display: flex; flex-direction: column; gap: .4rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.bm-head { display: flex; align-items: center; gap: .5rem; }
.bm-prev { flex: 0 0 auto; }
.bm-prev .bm-mark { height: 2em; vertical-align: middle; margin: 0; }
.bm-head .bm-active { margin-left: auto; }
/* Job 81: Verwendungszahl neben dem Band – leise, aber vor dem Löschen sichtbar. */
.bm-use { flex: 0 0 auto; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.bm-field { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.bm-lbl { flex: 0 0 3rem; color: var(--muted); font-size: .8rem; }
.bm-field .fmt-swatches { flex: 0 1 auto; }
.bm-text { flex: 1 1 10rem; background: #0f1115; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .5rem; font: inherit; }
.bm-text:focus { outline: none; border-color: var(--accent); }
.bm-row.bm-focus { background: rgba(61,139,255,.12); border-radius: 8px; }   /* „✎ Bearbeiten" hebt die Zeile hervor (Job 87) */
.bm-active, .bm-insert, .bm-del { background: #191c22; color: var(--ink); border: 1px solid var(--line);
  border-radius: 6px; padding: .3rem .55rem; cursor: pointer; font: inherit; }
.bm-active.on { color: var(--warn); border-color: var(--warn); }
.bm-insert { color: var(--accent); border-color: var(--accent); }
.bm-del { color: var(--muted); }
.bm-del:hover { color: var(--err); }
#bm-add { margin-top: .7rem; background: #191c22; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 6px; padding: .4rem .7rem; cursor: pointer; font: inherit; }

/* ===== Schwebe-Knopf (Job 35, fab.js) ===== */
:root { --fab-size: 50px; --fab-op: .8; }
#fab-knob { position: fixed; z-index: 55; width: var(--fab-size); height: var(--fab-size);
  border-radius: 50%; border: none; cursor: grab; touch-action: none; opacity: var(--fab-op);
  background: radial-gradient(circle at 36% 32%, #2c5798, #15294a 72%);
  box-shadow: 0 6px 16px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.18);
  transition: opacity .15s; -webkit-tap-highlight-color: transparent; display: none; }
body.fab-show #fab-knob { display: block; }
#fab-knob::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(110,168,254,.55), transparent 68%); }
#fab-knob.pulse::before { animation: fab-halo 1.2s ease-in-out 4; }
@keyframes fab-halo { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:.95; transform:scale(1.16); } }
#fab-knob:active { cursor: grabbing; }
/* Verstecken (Fenster offen ODER ausgeschaltet) – Zustand (offenes Menü) bleibt erhalten */
body:not(.fab-show) .fab-item, body:not(.fab-show) .fab-list { display: none !important; }

.fab-item { position: fixed; z-index: 54; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; border: 1px solid var(--line); background: #222734; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  text-align: center; padding: 2px; overflow: hidden; cursor: pointer; touch-action: none;
  opacity: 0; transform: scale(.2); box-shadow: 0 4px 12px rgba(0,0,0,.4); pointer-events: none;
  transition: left .18s cubic-bezier(.2,.8,.3,1.2), top .18s cubic-bezier(.2,.8,.3,1.2), opacity .14s, transform .14s; }
.fab-item.show { opacity: 1; transform: scale(1); pointer-events: auto; }
.fab-item.nodrag { transition: none; }
.fab-item:hover { border-color: var(--accent); }
.fab-item.color { border-color: rgba(255,255,255,.25); }
.fab-item.off { opacity: .4; }
.fab-item .fab-ic { font-size: 16px; line-height: 1; }
.fab-item .fab-cap { font-size: 8.5px; line-height: 1.02; max-width: 44px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-item.color .fab-cap { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); font-size: 9px; }

.fab-list { position: fixed; z-index: 54; min-width: 150px; background: #1b202b;
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.55);
  padding: 4px; opacity: 0; transform: scale(.92); transform-origin: center;
  transition: opacity .14s, transform .14s; }
.fab-list.show { opacity: 1; transform: scale(1); }
.fab-list.scroll { max-height: 8.2rem; overflow-y: auto; }
.fab-list.nodrag { transition: none; }
.fab-row { padding: .5rem .8rem; border-radius: 8px; font-size: .9rem; color: var(--ink);
  cursor: pointer; white-space: nowrap; touch-action: none; }
.fab-row:hover { background: #283246; color: #cfe0ff; }
.fab-row.off { opacity: .45; pointer-events: none; }

/* ---- Rausgezogene Menü-Leiste (tear-off): eigene, frei ziehbare Mini-Toolbar ---- */
body:not(.fab-show) .fab-tear { display: none !important; }   /* mit dem Knopf verstecken */
/* Keine Textauswahl auf Knopf/Menüs/Leisten (Titelleisten etc. verwirrten) – Verstext bleibt markierbar */
#fab-knob, .fab-item, .fab-list, .fab-tear { -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
.fab-tear { position: fixed; z-index: 54; background: #1b202b; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.55); min-width: 96px;
  max-width: calc(100vw - 20px);   /* nie breiter als der Screen (lange Tag-Namen/Lösch-Zeile) */
  touch-action: none; overflow: hidden; }
.fab-tear.collapsed { min-width: 0; }
/* Aufblinken einer schon offenen Leiste: weicher pulsierender Glow, gleich wie beim Notiz-Fenster
   (0.9.28.5, noteBlink); ruhender Schlagschatten bleibt als Basis. */
.fab-tear.flash { animation: fab-tflash .5s ease-in-out 2; }
@keyframes fab-tflash {
  0%, 100% { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 0 rgba(110,168,255,0); }
  50%      { box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 24px 7px rgba(110,168,255,.85); } }
.fab-tear-head { display: flex; align-items: center; gap: .25rem; padding: .28rem .3rem .28rem .6rem;
  cursor: grab; background: #222a38; border-bottom: 1px solid var(--line); }
.fab-tear.collapsed .fab-tear-head { border-bottom: none; }
/* Eingeklappt: farbiger Kopf-Glow je Menü (analog zum gelben Notiz-Glow) */
.fab-tear.collapsed.tear-tag     .fab-tear-head { background: var(--tear-glow-tag); }
.fab-tear.collapsed.tear-color   .fab-tear-head { background: var(--tear-glow-color); }
.fab-tear.collapsed.tear-bm      .fab-tear-head { background: var(--tear-glow-bm); }
.fab-tear.collapsed.tear-browse  .fab-tear-head { background: var(--tear-glow-browse); }
.fab-tear.collapsed.tear-comment .fab-tear-head { background: var(--tear-glow-comment); }
.fab-tear-head:active { cursor: grabbing; }
/* Kopf: Icon (+ Wort) + ▾ links, nur ✕ rechts (Titel schmal, ✕ via margin-left:auto) */
.fab-tear-title { font-size: .8rem; color: #cfe0ff; font-weight: 600; flex: 0 1 auto; white-space: nowrap;
  display: flex; align-items: center; gap: .3rem; }
.fab-tear-title .fab-ic { font-size: .92rem; }
.fab-tear-title.icon-only .fab-ic { font-size: 1.15rem; }   /* tearNoLabel: nur Icon, etwas größer */
.fab-tear-btn { width: 1.55rem; height: 1.55rem; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; cursor: pointer; color: var(--muted);
  font-size: .85rem; flex: 0 0 auto; }
.fab-tear-btn:hover { background: #2c3344; color: #cfe0ff; }
.fab-tear-collapse { color: #6ea8ff; }                       /* Auf-/Zuklapp-Icon bläulich hervorgehoben */
.fab-tear-close { margin-left: auto; }                       /* nur das ✕ nach rechts */
.fab-tear-body { padding: 4px; }
.fab-tear.collapsed .fab-tear-body { display: none; }
/* waagrechte Werkzeug-Reihe (Farbe / Blättern); Buttons füllen die Breite, mehrere Zeilen stapeln */
.fab-tear-row { display: flex; gap: 4px; }
.fab-tear-row + .fab-tear-row { margin-top: 4px; }           /* z. B. Blättern: Buch- / Kapitel-Zeile */
.fab-tear-row .fab-ti { flex: 1 0 auto; width: 44px; height: 44px; border-radius: 9px; border: 1px solid var(--line);
  background: #222734; color: var(--ink); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; cursor: pointer; padding: 2px; overflow: hidden; }
.fab-tear-row .fab-ti:hover { border-color: var(--accent); }
.fab-tear-row .fab-ti.color { border-color: rgba(255,255,255,.25); color: #fff; }
.fab-tear-row .fab-ti.off { opacity: .4; pointer-events: none; }
.fab-tear-row .fab-ti .fab-ic { font-size: 15px; line-height: 1; }
.fab-tear-row .fab-ti .fab-cap { font-size: 8.5px; line-height: 1.02; max-width: 40px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-tear-row .fab-ti.color .fab-cap { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); font-size: 9px; }
/* festes Raster (Farbe: 2 Spalten – Grün/Gelb oben, Rot/aus unten) */
.fab-tear-grid { display: grid; gap: 4px; }
.fab-tear-grid .fab-ti { height: 44px; border-radius: 9px; border: 1px solid var(--line);
  background: #222734; color: var(--ink); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; cursor: pointer; padding: 2px; overflow: hidden; }
.fab-tear-grid .fab-ti:hover { border-color: var(--accent); }
.fab-tear-grid .fab-ti.color { border-color: rgba(255,255,255,.25); color: #fff; }
.fab-tear-grid .fab-ti.off { opacity: .4; pointer-events: none; }
.fab-tear-grid .fab-ti .fab-ic { font-size: 15px; line-height: 1; }
.fab-tear-grid .fab-ti .fab-cap { font-size: 8.5px; line-height: 1.02; max-width: 44px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fab-tear-grid .fab-ti.color .fab-cap { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.55); font-size: 9px; }
/* senkrechte Liste (Tag / Lesez. / Mehr); bei gesetzter Breite werden lange Namen ellipsiert */
.fab-tear-list { display: flex; flex-direction: column; max-height: 9rem; overflow-y: auto; }
/* ⚠️ FALLE (Jogi, 23.8.2026 – „faltet sich wie eine Zieharmonika"): in einem Flex-Container
   SCHRUMPFEN die Kinder von selbst (`flex-shrink: 1`), sobald die Höhe begrenzt wird. Die
   Einträge wurden dadurch von 37 auf 19 px gestaucht, `scrollHeight` blieb gleich der Höhe –
   also KEIN Überlauf und trotz `overflow-y: auto` nichts zu scrollen, nur unlesbar gequetschter
   Text. Jedes Kind muss darum seine Höhe behalten. */
.fab-tear-list > * { flex: 0 0 auto; }
/* iOS/Touch: von sich aus KEIN interner Scroll-Bereich – der macht in einem position:fixed-
   Element die ganze Seite touch-taub (kein Vers mehr antippbar, s. .fab-bm-grid). Liste wächst;
   die Suche hält sie kurz.
   AUSNAHME seit v0.9.54.1 (Job 165): hat Jogi selbst eine Höhe gezogen (`h-fix`, gesetzt von
   fab.js setListHoehe), darf sie auch scrollen – sonst wäre alles unterhalb der gezogenen Kante
   unerreichbar. `touch-action`/`overscroll-behavior` halten die Geste im Kasten, damit sie nicht
   an die Seite darunter durchschlägt. Rückweg: Doppeltipp auf den Griff. */
@media (hover: none) {
  .fab-tear-list { max-height: none; overflow-y: visible; }
  .fab-tear-list.h-fix { overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
}
.fab-tear-list .fab-ti { padding: .45rem .7rem; border-radius: 7px; font-size: .88rem; color: var(--ink);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fab-tear-list .fab-ti:hover { background: #283246; color: #cfe0ff; }
.fab-tear-list .fab-ti.off { opacity: .45; pointer-events: none; }
/* Eck-Griff (nur Listen-Leisten): diagonal ziehen = Höhe + Breite */
.fab-tear-resize { height: 20px; margin-top: 0; cursor: nwse-resize; display: flex;
  align-items: center; justify-content: center; touch-action: none; }
.fab-tear-resize::before { content: ""; width: 26px; height: 3px; border-radius: 3px; background: var(--line); }
.fab-tear-resize:hover::before { background: var(--accent); }
/* Tag-Verwaltung in der Tag-Leiste: Bearbeiten-Zeilen (✎/🗑), Lösch-Abfrage, ＋-neu-Eingabe */
.fab-tear-edit.on { background: #2c3344; color: #ffd479; }
.fab-tag-row { display: flex; align-items: center; gap: .2rem; }
.fab-tag-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fab-tag-q { font-size: .78rem; color: var(--muted); }   /* nowrap+Ellipsis von .fab-ti/.fab-tag-name */
.fab-tag-lock { color: var(--warn); }           /* Job 81: „hängt an Versen – bleibt" */
.fab-tag-btn { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; border-radius: 6px; cursor: pointer; color: var(--muted); font-size: .82rem; }
.fab-tag-btn:hover { background: #2c3344; color: #cfe0ff; }
.fab-tag-btn.warn:hover { background: #4a2430; color: #ff9aa8; }
/* setzen/filtern-Umschalter (zwei Pillen) oben in der Tag- bzw. Lesezeichen-Leiste */
.fab-mode { display: flex; gap: .25rem; padding: 1px 2px 4px; }
.fab-mopt { flex: 1 1 0; text-align: center; padding: .25rem .3rem; border-radius: 7px;
  border: 1px solid var(--line); background: #141821; color: var(--muted);
  font-size: .78rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.fab-mopt:hover { border-color: var(--accent); color: #cfe0ff; }
.fab-mopt.on { background: #283246; border-color: var(--accent); color: #cfe0ff; font-weight: 600; }
/* Icon-Pillen (✓ / Trichter) statt Wörter – gleiche Zeile, SCHMAL (statt halber Leistenbreite),
   damit die Tag-Leiste insgesamt schmaler werden kann */
.fab-mopt.icon { flex: 0 0 auto; min-width: 2.1rem; display: flex; align-items: center;
  justify-content: center; padding: .2rem .45rem; font-size: .95rem; line-height: 1; }
.fab-tag-new { padding: 3px 2px 1px; }
/* Kombinierte Eingabezeile: Umschalt-Knopf (🔍 ⇄ ＋) + EIN Feld (suchen / neues Tag) */
.fab-tag-field { display: flex; align-items: center; gap: .2rem; }
.fab-tag-field .fab-tag-input { flex: 1 1 auto; width: auto; }
.fab-tag-input { width: 100%; min-width: 0; box-sizing: border-box; background: #141821;
  border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
  font-size: .8rem; padding: .25rem .4rem;
  -webkit-user-select: text; user-select: text; }
.fab-tag-input::placeholder { color: var(--muted); font-style: italic; }
.fab-tag-row .fab-tag-input { flex: 1 1 auto; width: auto; }   /* Umbenennen-Feld statt des Namens */
/* Lesezeichen ausgezogen: 2-Spalten-Raster der Band-SVGs, 2 Reihen sichtbar, Rest scrollbar */
/* KEIN internes Scrollen (overflow/max-height): ein scrollender Bereich in einem position:fixed-
   Element macht auf iOS die ganze Seite touch-unempfindlich (man kann keinen Vers mehr antippen).
   Darum alle Bänder direkt im 2-Spalten-Raster; die Leiste wächst in der Höhe. */
.fab-bm-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 5px; }
.fab-bm { border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; line-height: 0;
  border-radius: 6px; }
.fab-bm:hover { outline: 1px solid var(--accent); outline-offset: 1px; }
.fab-bm.off { opacity: .4; pointer-events: none; }
.fab-bm-svg { display: block; width: 50px; height: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.fab-bm-add { margin-top: 4px; padding: .4rem .6rem; border-radius: 7px; font-size: .82rem;
  color: var(--muted); cursor: pointer; white-space: nowrap; }
.fab-bm-add:hover { background: #283246; color: #cfe0ff; }
/* Einzel-Aktion in einer rausgezogenen Leiste (z. B. Kommentar) */
.fab-tear-one { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 8px;
  cursor: pointer; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.fab-tear-one:hover { background: #283246; color: #cfe0ff; }
.fab-tear-one .fab-ic { font-size: 1rem; }

/* ---- Griff-System (Job 37): eigene Wort-Auswahl statt nativer iOS-Auswahl ---- */
/* Verse sind NICHT mehr nativ markierbar -> iOS zeigt gar kein System-Menü mehr.
   (Überschreibt auch das user-select:text der .vref.) Kopieren übernimmt 📋 im Griff-Popup. */
#reader .col-body, #reader .col-body .vref {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* Interlinear-Spalte (Job 51): kein Griff-System, keine Verse -> native Auswahl/Kopieren
   der Interlinear-Zeilen wieder erlauben (überschreibt die col-body-Sperre oben). */
#reader .col.is-inter .col-body {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
/* Kopf-Knopf „Grundtext kopieren“ oben in der Interlinear-Spalte. */
.il-copy { display: block; width: 100%; box-sizing: border-box; margin: 0 0 .3rem;
  background: #1e2d22; border: 1px solid #3b7a55; border-radius: 7px; color: #cfe9d6;
  font-size: .82rem; padding: .4rem .5rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.il-copy:hover { background: #274536; }
/* Strong-Nummer in der Interlinear-Zeile: sieht aus wie Text, ist ein Knopf (Job 149). */
.il-strong { background: none; border: 0; padding: 0; font: inherit; letter-spacing: inherit;
  color: #7fc6a0; border-bottom: 1px dotted #3b7a55; cursor: pointer; }
.il-strong:hover { color: #a8e0c0; }
/* Strong-Karte: überdeckt die Interlinear-Ansicht derselben Spalte (Job 149). Farbton wie
   die Interlinear-Spalte, damit klar bleibt, wo man ist. */
.st-card { padding: .1rem 0 .6rem; -webkit-user-select: text; user-select: text; }
.st-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .5rem; }
.st-nav { background: #1e2d22; border: 1px solid #3b7a55; border-radius: 7px; color: #cfe9d6;
  font-size: 1rem; line-height: 1; padding: .25rem .55rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.st-nav:hover:not([disabled]) { background: #274536; }
.st-nav[disabled] { opacity: .35; cursor: default; }
.st-nr { margin-left: auto; color: #7fc6a0; font-size: .9rem; letter-spacing: .04em; }
.st-lemma { font-size: 1.35rem; color: var(--ink); line-height: 1.4; }
.st-tr { color: #9aa3b2; font-style: italic; font-size: .85rem; margin-top: .05rem; }
.st-def { color: var(--ink); font-size: .92rem; line-height: 1.45; margin-top: .5rem; }
.st-kjv, .st-here { color: var(--muted); font-size: .82rem; line-height: 1.4; margin-top: .45rem; }
.st-lbl { display: inline-block; min-width: 2.4rem; color: #7fc6a0; font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; }
.st-none { color: var(--muted); font-style: italic; }
/* Verweis auf eine andere Nummer, mitten im Wörterbuch-Text. */
.st-ref { background: none; border: 0; padding: 0; font: inherit; color: #7fc6a0;
  border-bottom: 1px dotted #3b7a55; cursor: pointer; }
.st-ref:hover { color: #a8e0c0; }
/* Konkordanz-Teil unten in der Karte. */
.st-conc { margin-top: .8rem; border-top: 1px solid #23262e; padding-top: .6rem; }
.st-count { color: var(--muted); font-size: .8rem; margin-bottom: .35rem; }
.st-all { display: block; width: 100%; box-sizing: border-box; background: #1e2d22;
  border: 1px solid #3b7a55; border-radius: 7px; color: #cfe9d6; font-size: .85rem;
  padding: .45rem .5rem; cursor: pointer; -webkit-user-select: none; user-select: none; }
.st-all:hover { background: #274536; }
.st-books { display: flex; flex-wrap: wrap; gap: .25rem; }
.st-book { background: #1e2d22; border: 1px solid #3b7a55; border-radius: 6px; color: #cfe9d6;
  font-size: .78rem; padding: .22rem .4rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.st-book:hover { background: #274536; }
.st-book .st-n { color: #7fc6a0; }
/* „als Text kopieren“ – dezenter als die Öffner darüber (zweite Wahl, nicht der Hauptweg). */
.st-copy { display: block; width: 100%; box-sizing: border-box; margin-top: .4rem;
  background: none; border: 1px solid #2c3a32; border-radius: 7px; color: #9aa3b2;
  font-size: .78rem; padding: .35rem .5rem; cursor: pointer;
  -webkit-user-select: none; user-select: none; }
.st-copy:hover { background: #1e2d22; color: #cfe9d6; }
/* Wort-Raster: jedes Wort ein .w-Span (data-i; .vref = Wort 0). Padding/Radius wie Prototyp –
   vertikales Padding ändert die Zeilenhöhe nicht. */
#reader .w { border-radius: 3px; padding: .08rem 0; }
/* Auswahl-Anstrich; !important, damit er auch über Anmerkungs-Inline-Styles (Format-Hintergrund)
   und Lese-Färbung sichtbar bleibt. */
#reader .w.gsel { background: #2b4a7a !important; color: #dbe7ff !important; }
/* Griffe (iOS-Stil: Anfang-Ball OBEN, Ende-Ball UNTEN); Stengel-Länge --stem aus den
   Einstellungen (grip.js setzt sie am :root, Default 30px).
   position: ABSOLUTE, verankert IN der aktiven .col (grip.js hängt sie dort ein und rechnet
   .col-relativ). Grund fürs iPhone: so sind die Griffe echter Spalten-Inhalt und zoomen beim
   Pinch mit dem Text mit; die Differenz Wort-Rect minus .col-Rect kürzt zudem den Visual-
   Viewport-Versatz heraus. FIXED bzw. body-absolut mit reinen Viewport-Koordinaten driftete
   beim Zoom aufs falsche Wort. */
.grip { position: absolute; z-index: 60; width: 44px; height: calc(22px + var(--stem, 30px));
  display: none; touch-action: none; cursor: grab; }
.grip.show { display: block; }
.grip::before { /* Stengel */
  content: ""; position: absolute; left: 50%; width: 2px; background: var(--accent);
  transform: translateX(-50%); height: var(--stem, 30px); }
.grip::after { /* Ball */
  content: ""; position: absolute; left: 50%; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); transform: translateX(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.25); }
#grip-a::before { top: 22px; }
#grip-a::after  { top: 0; }
#grip-b::before { top: 0; }
#grip-b::after  { bottom: 0; }
.grip.drag { cursor: grabbing; }
.grip.drag::after { transform: translateX(-50%) scale(1.25); }
/* Aktions-Popup an der Auswahl (voller Befehlssatz; bricht am schmalen Schirm um) */
#grip-pop { position: absolute; z-index: 55; display: none; gap: .15rem; align-items: center;   /* absolute wie .grip: zoomt beim Pinch mit (s. .grip-Kommentar) */
  background: var(--panel, #1b202b); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,.6); padding: .25rem;
  -webkit-user-select: none; user-select: none;
  flex-wrap: wrap; max-width: calc(100vw - 12px); }
#grip-pop.show { display: flex; }
#grip-pop button { background: transparent; color: var(--ink); border: none; border-radius: 9px;
  padding: .45rem .6rem; font: 600 .8rem/1 system-ui, sans-serif; cursor: pointer;
  display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
#grip-pop button:hover { background: #283246; color: #cfe0ff; }
#grip-pop button[disabled] { opacity: .38; cursor: default; }
#grip-pop button[disabled]:hover { background: transparent; color: var(--ink); }
/* Kurz-Rückmeldung (Toast) für Griff-Aktionen (msgTag-Ziel #cmd-msg ist versteckt) */
#grip-toast { position: fixed; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 70; transform: translateX(-50%) translateY(1.4rem);
  background: #283246; color: #cfe0ff; border: 1px solid var(--accent); border-radius: 999px;
  padding: .45rem 1rem; font-size: .85rem; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#grip-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Kurz-Rückmeldung, die AUCH in der Infoseiten-Ansicht sichtbar ist (Job 166): #grip-toast
   blendet `body.pages-mode` aus, die Meldung über ein totes Sprungziel muss aber ankommen. */
#pg-toast { position: fixed; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 120; transform: translateX(-50%) translateY(1.4rem);
  background: #283246; color: #cfe0ff; border: 1px solid var(--accent); border-radius: 999px;
  padding: .45rem 1rem; font-size: .85rem; opacity: 0; transition: opacity .2s, transform .2s;
  pointer-events: none; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#pg-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Infoseiten-Ansicht (Job 38, Etappe 3a) – alles unter #pages gescoped.
   Umschaltung: body.pages-mode blendet #reader aus und #pages ein.
   ============================================================ */
#pages { display: none; }
body.pages-mode #reader { display: none; }
body.pages-mode #pages {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  --panel2: #191c22;
  height: calc(100vh - var(--hh, 3.2rem));
  height: calc(100dvh - var(--hh, 3.2rem));
}

/* Icon-Leiste: eigene volle Zeile über Navi + Arbeitsbereich (Job 40 Etappe 3;
   ersetzt die alte nav-top-Zeile + den schwebenden ›-Ausklapp-Knopf). */
#pages .pg-iconbar { display: flex; align-items: center; gap: .3rem; padding: .35rem .55rem;
  border-bottom: 1px solid var(--line); background: var(--panel); }
#pages .pg-iconbar .ntitle { margin-left: auto; font-size: .8rem; color: var(--muted);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
#pages .pg-iconbar .iconbtn.on { color: var(--accent); border-color: var(--line); background: var(--panel2); }
/* Darunter: Navi + Anfasser + Arbeitsbereich in einer Zeile. */
#pages .pg-main { flex: 1 1 auto; min-height: 0; display: flex; }

/* Navi links – eigene, klar getrennte Spalte (kann NICHT überlappt werden). */
#pages .pg-nav { flex: 0 0 220px; width: 220px; max-width: 72vw;
  background: var(--panel); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  position: relative; z-index: 2; }
/* Eingeklappt: Navi ganz weg (kein Streifen); ☰ in der Icon-Leiste holt sie zurück. */
#pages.nav-collapsed .pg-nav, #pages.nav-collapsed .pg-navsplit { display: none; }
/* Anfasser rechts an der Navi – Spaltenbreite ziehen. */
#pages .pg-navsplit { flex: 0 0 6px; cursor: col-resize; background: transparent; position: relative; }
#pages .pg-navsplit::after { content: ""; position: absolute; inset: 0 2px; background: var(--line); }
#pages .pg-navsplit:hover::after { background: var(--accent); opacity: .85; }
#pages .iconbtn { background: transparent; border: 1px solid transparent; color: var(--muted);
  border-radius: 6px; padding: .1rem .35rem; font: inherit; font-size: .9rem; cursor: pointer; }
#pages .iconbtn:hover { color: var(--ink); border-color: var(--line); background: var(--panel2); }
#pages .iconbtn:disabled { opacity: .35; cursor: default; }
#pages .iconbtn:disabled:hover { color: var(--muted); border-color: transparent; background: transparent; }
#pages .nav-scroll { flex: 1; min-height: 0; overflow: auto; padding: .3rem 0 1rem; }

#pages .rub { border-bottom: 1px solid var(--line); }
#pages .rub-head { display: flex; align-items: center; gap: .35rem; width: 100%; text-align: left;
  background: var(--bg); border: none; color: var(--ink); font: inherit; font-size: .82rem;
  font-weight: 600; padding: .4rem .5rem; cursor: pointer; }
#pages .rub-head:hover { background: var(--panel2); }
#pages .rub-head .caret { color: var(--muted); font-size: .7rem; width: .8rem; }
#pages .rub-head .tools { margin-left: auto; display: flex; gap: .1rem; }
#pages .rub-body { padding: .15rem 0 .3rem; min-height: 1.4rem; }
#pages .rub.closed .rub-body { display: none; }
#pages .rub-note { color: var(--muted); font-size: .78rem; font-style: italic; padding: .2rem .7rem .4rem 1.5rem; }
/* Job 158.2: Schloss nur am Knoten, der den Schutz trägt (nicht an den erbenden Kindern). */
/* Job 158.2: gezeichnetes Schloss (kein Emoji) – nur so lässt es sich in „alles gesperrt"
   (kräftig) und „teilweise" (blass) abstufen. Farbe = Textfarbe der Zeile. */
#pages .tlock { margin-left: .35rem; flex: 0 0 auto; display: inline-flex; align-items: center; opacity: .6; }
#pages .tlock.part { opacity: .24; }
#pages .tlock .lk { width: .68rem; height: .68rem; display: block; }
#pages .tlock .lk rect { fill: currentColor; }
#pages .tlock .lk path { fill: none; stroke: currentColor; stroke-width: 2.1; }
/* Job 158.1: einmaliger Bericht der Baum-Begradigung, über dem Baum. */
#pages .pg-hinweis { margin: .3rem .5rem .5rem; padding: .45rem .55rem; border-radius: .35rem;
  background: rgba(255, 196, 0, .12); border: 1px solid rgba(255, 196, 0, .35); font-size: .78rem; }
#pages .pg-hinweis-kopf { font-weight: 600; margin-bottom: .25rem; }
#pages .pg-hinweis-liste { white-space: pre-wrap; color: var(--muted); max-height: 9rem; overflow: auto; }
#pages .pg-hinweis-ok { margin-top: .4rem; font: inherit; cursor: pointer; padding: .1rem .5rem;
  border-radius: .3rem; border: 1px solid var(--line); background: transparent; color: inherit; }

#pages .tree-row { display: flex; align-items: center; gap: .3rem; padding: .22rem .5rem;
  cursor: pointer; font-size: .86rem; border-left: 2px solid transparent;
  /* Langdruck = Kontextmenü (Job 76): iOS-Callout + Text-Markieren an den Zeilen aus */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Hover nur auf echten Maus-Geräten – am Touch klebte sonst die zuletzt getippte Zeile grau (Job 77) */
@media (hover: hover) {
  #pages .tree-row:hover { background: var(--panel2); }
  #pages .tag-row:hover { background: var(--panel2); }
}
/* offene Reiter: nur noch der blaue Randstrich (Jogi, Job 77) – blauer Hintergrund gehört jetzt der Auswahl */
#pages .tree-row.page.active { border-left-color: var(--accent); }
#pages .tree-row.sel { background: rgba(110,168,254,.15); }
#pages .tree-row.sel-child { background: rgba(110,168,254,.07); }   /* Kind eines gewählten Ordners: keine Box, nur einheitlich mit-getönt */
#pages .tree-row .tw { width: 1rem; text-align: center; color: var(--muted); font-size: .72rem; }
#pages .tree-row .ico { width: 1.3rem; text-align: center; }
/* Ordner-Icon (SVG .fico): gedämpftes App-Blau (Akzent-Familie #6ea8fe, hier bewusst ruhiger), etwas größer (Jogi v0.9.22.3; Job 40, hier tweakbar). */
#pages .tree-row .ico .fico { width: 1.35em; height: 1.35em; vertical-align: -0.24em; fill: #7a9fd4; }
/* Navi-Toggle (SVG .hico): kräftige Balken, neutral-hell (auf var(--accent) umstellbar). */
#pages .pg-iconbar .iconbtn .hico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; fill: #e6e8ec; }
#pages .tree-row .tlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pages .tree-row.folder > .tlabel { color: #cdd2da; font-weight: 600; }
#pages .tree-kids { margin-left: .4rem; }
#pages .tree-kids.closed { display: none; }
#pages .tree-rename { flex: 1; min-width: 0; font: inherit; font-size: .84rem; background: #0f1115;
  color: var(--ink); border: 1px solid var(--accent); border-radius: 5px; padding: .05rem .3rem;
  -webkit-user-select: text; user-select: text; }   /* Ausnahme vom user-select:none der Zeile (Job 76) */
#pages .tree-rename.rename-dup { border-color: #d05a5a; box-shadow: 0 0 0 1px #d05a5a inset; }
#pages .tree-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }

/* Papierkorb-Zeile (Job 76): fester Wurzel-Ordner ganz unten, Icon leer (Umriss) / voll (gefüllt + Müll) */
#pages .tree-row.trash > .tlabel { color: #9aa3af; }
#pages .tico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; fill: #8b93a1; }
#pages .tico .tcan { fill: none; stroke: #8b93a1; stroke-width: 1.5; }
#pages .tico.full .tcan { fill: #8b93a1; stroke: none; }
#pages .tico .tpap { fill: #d9b23a; }

/* Kontextmenü im Infoseiten-Baum (Job 76) – Optik wie #anno-menu */
.nav-menu {
  position: fixed; z-index: 55; min-width: 11rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.5); padding: .25rem; font-size: .85rem;
  display: flex; flex-direction: column;
  -webkit-user-select: none; user-select: none;
}
.nav-menu button { background: none; border: 0; border-radius: 5px; text-align: left;
  padding: .4rem .55rem; color: var(--ink); cursor: pointer; font: inherit; }
.nav-menu button:hover { background: #232833; }
.nav-menu .mi-ico { display: inline-block; margin-right: .3rem; }
.nav-menu-sep { height: 1px; background: var(--line); margin: .28rem .2rem; }
.nav-menu button.disabled { color: #6b7280; cursor: default; }
.nav-menu button.disabled:hover { background: none; }

/* Auswahl-Modus (Job 77): Checkbox je Zeile + Aktionsleiste über dem Baum */
#pages .selbox { width: 1rem; text-align: center; color: var(--accent); font-size: .8rem; flex: none; }
#pages .selbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .15rem;
  padding: .3rem .5rem; background: var(--bg); border-bottom: 1px solid var(--line); font-size: .8rem; }
#pages .selbar .selcount { margin-right: auto; color: var(--muted); }

/* Ordner-Wähler „Verschieben/Kopieren nach …" (Job 77): nutzt die .nav-menu-Optik, mittig + scrollbar */
.folder-pick { max-height: 70vh; max-width: min(20rem, calc(100vw - 2rem)); }
.folder-pick .fp-title { font-weight: 600; padding: .35rem .55rem .45rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.folder-pick .fp-list { overflow-y: auto; display: flex; flex-direction: column; }
.folder-pick .fp-list button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; flex: none; }

#pages .tag-row { display: flex; align-items: center; gap: .4rem; padding: .22rem .7rem; cursor: pointer; font-size: .84rem; }
/* :hover s. o. beim tree-row-Hover (nur @media (hover:hover), Job 77) */
#pages .tag-row .tag-name { color: #cfe0ff; overflow: hidden; text-overflow: ellipsis; }
#pages .tag-row .tct { margin-left: auto; color: var(--muted); font-size: .72rem; }

/* Bereiche (Panes) */
/* ---- Infoseiten-Suche (Job 40 Etappe 3): Such-Panel in der Navi-Spalte ---- */
#pages .search-wrap { position: sticky; top: 0; z-index: 6; background: var(--panel);
  padding: .4rem .45rem .35rem; border-bottom: 1px solid var(--line); }
#pages .search-row { display: flex; align-items: center; gap: .25rem; }
#pages .search-field { flex: 1 1 auto; min-width: 0; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: .4rem .55rem;
  font: inherit; font-size: .86rem; outline: none; }
#pages .search-field:focus { border-color: var(--accent); }
#pages .search-clear { flex: 0 0 auto; background: transparent; border: none; color: var(--muted);
  font-size: 1.15rem; line-height: 1; cursor: pointer; padding: .15rem .35rem; border-radius: 6px; }
#pages .search-clear:hover { color: var(--ink); background: var(--panel2); }
#pages .search-clear.hidden { display: none; }
/* Die graue Status-Zeile: EIN Ort für alle Kurz-Rückmeldungen der Suche. */
#pages .search-meta { color: var(--muted); font-size: .72rem; padding: .3rem .55rem .1rem; }
/* Vorschlagsliste = schwebendes Overlay unter dem Feld (schiebt die Treffer NICHT weg). */
#pages .sug-list { position: absolute; left: .45rem; right: .45rem; top: 100%; z-index: 7;
  max-height: min(60vh, 300px); overflow-y: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 0 0 8px 8px; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
#pages .sug { display: flex; align-items: center; gap: .5rem; padding: .32rem .6rem; cursor: pointer; font-size: .82rem; }
#pages .sug:hover { background: var(--panel2); }
#pages .sug.on { background: rgba(61,139,255,.18); }
#pages .sug.dis { color: var(--muted); font-style: italic; cursor: default; }
#pages .sug-label { color: var(--ink); }
#pages .sug-key { color: var(--accent); font-weight: 600; }
#pages .sug .sug-hint { margin-left: auto; color: var(--muted); font-size: .72rem; }
#pages .search-results { padding: .2rem 0 1rem; }
#pages .sr-empty { color: var(--muted); font-size: .78rem; font-style: italic; padding: .5rem .7rem; line-height: 1.6; }
#pages .sr-empty code { font-style: normal; color: #cdd2da; background: var(--panel2); border-radius: 4px; padding: 0 .25rem; }
#pages .sr-page { padding: .3rem .35rem .1rem; }
#pages .sr-title { display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: .84rem;
  font-weight: 600; color: #cdd2da; padding: .18rem .3rem; border-radius: 6px; }
#pages .sr-title:hover { background: var(--panel2); color: var(--ink); }
#pages .sr-title .ico { width: 1.1rem; text-align: center; }
#pages .sr-title .sr-ct { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .72rem; }
#pages .sr-hits { margin: .1rem 0 .2rem; }
#pages .sr-line { cursor: pointer; font-size: .78rem; color: var(--muted); line-height: 1.45;
  padding: .14rem .5rem .14rem 1.5rem; border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pages .sr-line:hover { background: var(--panel2); color: var(--ink); border-left-color: var(--accent); }
#pages .sr-title.sel { background: rgba(61,139,255,.18); color: var(--ink); }
#pages .sr-line.sel { background: var(--panel2); color: var(--ink); border-left-color: var(--accent); }
#pages .sr-line mark { background: rgba(61,139,255,.30); color: var(--ink); border-radius: 3px; padding: 0 .1rem; }
#pages .sr-more { cursor: pointer; font-size: .74rem; color: var(--accent); padding: .1rem .5rem .25rem 1.5rem; }
#pages .sr-more:hover { text-decoration: underline; }
/* bibel:-Suche (Job 40 E4) – Verse als Treffer. Klick-Sprung folgt später → cursor:default. */
#pages .sr-bible { padding: .1rem 0 .2rem; }
#pages .sr-verse { padding: .28rem .55rem; border-left: 2px solid transparent; font-size: .78rem; line-height: 1.5; }
#pages .sr-verse .sr-vref { color: var(--accent); font-weight: 600; margin-right: .4rem; white-space: nowrap; }
#pages .sr-verse .sr-vtext { color: var(--muted); }
#pages .sr-verse mark { background: rgba(61,139,255,.30); color: var(--ink); border-radius: 3px; padding: 0 .1rem; }
/* Fundstellen-Ziel blinkt kurz in der Preview auf. */
#pages .sr-flash { animation: srflash 1.1s ease-out; }
@keyframes srflash { from { background: rgba(61,139,255,.28); } to { background: transparent; } }

#pages .pg-workbench { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; overflow: hidden; }
#pages .pane { flex: 1 1 0; min-width: var(--pane-min, 90px); min-height: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--line); }
#pages .pane:last-child { border-right: none; }
/* Maximierter Bereich (⛶/❐ in der Reiterleiste): alle anderen Panes + Splitter ausblenden */
#pages .pg-workbench.maxed .pane, #pages .pg-workbench.maxed .pane-split { display: none; }
#pages .pg-workbench.maxed .pane.pane-max { display: flex; }
#pages .pane-split { flex: 0 0 8px; cursor: col-resize; background: var(--line); position: relative; touch-action: none; }
/* Während ein UI-Element gezogen wird (Splitter, Notiz-/Menü-Fenster verschieben/größen):
   keine Text-/Element-Markierung im Hintergrund (v0.9.27.1/2, Touch fasst den Griff sonst kaum) */
body.ui-dragging, body.ui-dragging * { user-select: none !important; -webkit-user-select: none !important; }
#pages .pane-split::after { content: ""; position: absolute; inset: 0 2px;
  background: linear-gradient(var(--muted), var(--muted)) center/2px 34px no-repeat; opacity: .35; }
#pages .pane-split:hover::after { opacity: .85; }
#pages .pane-tabs { flex: 0 0 auto; display: flex; align-items: stretch; min-height: 2.05rem;
  border-bottom: 1px solid var(--line); background: var(--panel); }
#pages .pane.focus .pane-tabs { box-shadow: inset 0 2px 0 var(--accent); }
#pages .pane-tablist { flex: 1 1 auto; min-width: 0; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; }
#pages .tab { display: flex; align-items: center; gap: .4rem; padding: .3rem .55rem; cursor: pointer;
  font-size: .82rem; color: var(--muted); white-space: nowrap; max-width: 190px; border-right: 1px solid var(--line);
  /* Langdruck öffnet das Reiter-Menü – iOS-Callout/Textauswahl dabei unterdrücken (wie .tree-row) */
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
#pages .tab:hover { background: var(--panel2); color: var(--ink); }
#pages .tab.on { color: var(--ink); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--accent); }
#pages .tab .tname { overflow: hidden; text-overflow: ellipsis; }
#pages .tab .tx { color: var(--muted); font-size: .72rem; border-radius: 4px; padding: 0 .22rem; }
#pages .tab .tx:hover { color: #ff9a9a; background: rgba(255,120,120,.14); }
#pages .pane-tools { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; padding: 0 .35rem; border-left: 1px solid var(--line); }
.md-scope .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.md-scope .seg button { background: var(--panel); border: none; color: var(--muted); font: inherit; font-size: .76rem; padding: .2rem .5rem; cursor: pointer; }
.md-scope .seg button + button { border-left: 1px solid var(--line); }
.md-scope .seg button.on { background: rgba(110,168,254,.2); color: #cfe0ff; }
#pages .pane-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; }
#pages .pane-empty { color: var(--muted); font-size: .85rem; padding: 1.5rem 1rem; margin: auto; text-align: center; max-width: 22rem; }

/* Seiten-Inhalt Edit | Preview */
.md-scope .pcontent { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; }
.md-scope .sub { min-height: 0; box-sizing: border-box; }
.md-scope .sub.edit { flex: 0 0 var(--er, 50%); overflow: hidden; display: flex;
  flex-direction: column; position: relative; }   /* Spalte: Werkzeugleiste über dem Text */
/* Werkzeugleiste der Edit-Ansicht (v0.9.23.2): schmale Zeile über dem Textfeld */
.md-scope .md-edittools { flex: 0 0 auto; display: flex; align-items: center; gap: .25rem;
  padding: 2px 4px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.md-scope .md-etool { background: #191c22; border: 1px solid var(--line); border-radius: 6px;
  color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .72rem; line-height: 1; padding: .2rem .45rem; cursor: pointer; }
.md-scope .md-etool:hover { border-color: var(--accent); color: #cfe0ff; }
.md-scope .md-etool-b { font-weight: 700; }
.md-scope .md-etool-i { font-style: italic; }
.md-scope .md-etool-u { text-decoration: underline; }
.md-scope .md-etool-s { text-decoration: line-through; }
/* Farben (Job 170): ein Knopf, darunter eine Leiste mit zwei Reihen. Die Farbfelder holen ihren
   Wert aus `--mdc` (s. .md-fg-*/.md-bg-* weiter unten) – hier steht bewusst kein Hex, sonst
   liefen Knopf und gerenderter Text auseinander. */
.md-scope .md-colbar { flex: 0 0 auto; padding: .25rem .3rem; background: #14171c;
  border-bottom: 1px solid var(--line); }
.md-scope .md-colbar[hidden] { display: none; }
.md-scope .md-colrow { display: flex; align-items: center; gap: .3rem; padding: .1rem 0; }
.md-scope .md-collabel { color: var(--muted); font-size: .72rem; min-width: 5.2rem; }
.md-scope .md-colsw { width: 1.5rem; height: 1.5rem; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); font-size: .8rem; line-height: 1; padding: 0; }
.md-scope .md-colsw:hover { border-color: var(--accent); }
.md-scope .md-colsw-bg { background: var(--mdc); color: #1b1610; }
.md-scope .md-colsw-fg { background: #191c22; color: var(--mdc); font-weight: 700; }
/* Sprungmarken (Job 166): Knopf + Namensleiste unter der Werkzeugleiste. */
.md-scope .md-etool-mark { font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.md-scope .md-markbar { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
  padding: .25rem .3rem; border-bottom: 1px solid var(--line); background: #14171c; }
.md-scope .md-markbar[hidden] { display: none; }
.md-scope .md-marklabel { color: #b8e6c8; font-family: ui-monospace, Menlo, monospace; font-weight: 700; }
.md-scope .md-markin { flex: 1 1 auto; min-width: 4rem; background: #191c22; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: .2rem .4rem; font-size: .84rem;
  font-family: ui-monospace, Menlo, monospace; }
.md-scope .md-markin:focus { outline: none; border-color: var(--accent); }
.md-scope .md-marktool { background: #191c22; border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); cursor: pointer; padding: .2rem .5rem; font-size: .8rem; }
.md-scope .md-marktool:hover { border-color: var(--accent); color: #cfe0ff; }
/* Job 167: die Marke wird angezeigt statt versteckt – klein und gedämpft, damit sie den
   Lesefluss nicht stört, aber verrät, wo ein Sprungziel sitzt. */
.md-scope .md-marktag, .anno-note .md-marktag { font-size: .68em; color: var(--muted); opacity: .8;
  font-family: ui-monospace, Menlo, monospace; vertical-align: .25em; margin-left: .12em;
  white-space: nowrap; }
/* Angesprungenes Ziel kurz aufblitzen lassen – sonst weiss man nicht, wo man gelandet ist. */
.md-scope .md-zielblink { animation: md-zielblink 1.4s ease-out; border-radius: 4px; }
@keyframes md-zielblink {
  0% { background: rgba(110,168,254,.34); }
  100% { background: transparent; } }
.md-scope .md-esep { width: 1px; align-self: stretch; background: var(--line); margin: 0 .15rem; }
/* Job 158.6: Schreibschutz. Das Schloss steht ganz links in der Edit-Leiste; freigegeben leuchtet
   es, und die Schreibfläche verliert ihren gedämpften Ton. Ohne diesen zweiten Hinweis merkt man
   am Handy nicht, warum das Tippen nichts bewirkt. */
.md-scope .md-elock { border-color: var(--line); opacity: .85; }
.md-scope .md-elock.frei { border-color: var(--accent); color: #cfe0ff; opacity: 1; }
.md-scope .sub.edit textarea[readonly] { background: #14161b; color: #97a0ad; }
/* Status-Zeile des Edit-Modus (Job 80, v0.9.25.1): fester schmaler Streifen UNTER dem Textfeld.
   Der graue Stellen-Hinweis („Psalm · 150 Kapitel") steht darin; Buch-Chips (.col-chip wie im
   Spaltenkopf) tauchen DARÜBER auf (absolut, bottom:100%) – so springt der Inhalt nie. */
.md-scope .md-editstatus { flex: 0 0 auto; position: relative; display: flex; align-items: center;
  min-height: 1.35rem; padding: .1rem .35rem; background: var(--panel2); border-top: 1px solid var(--line); }
.md-scope .md-editstatus-txt { font-size: .78rem; color: var(--muted); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-scope .md-refchips { position: absolute; left: .25rem; right: .25rem; bottom: 100%;
  margin-bottom: 2px; display: none; flex-wrap: wrap; gap: .3rem; padding: .25rem .35rem;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35); z-index: 3; }
.md-scope .md-refchips.show { display: flex; }
/* kurzes Aufblinken der angeklickten Zeile im Edit-Feld (Klick in Preview -> Cursor dorthin) */
.md-scope .md-flash { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2;
  background: rgba(110,168,254,.38); animation: md-flash-anim .95s ease-out forwards; }
@keyframes md-flash-anim {
  0%, 100% { opacity: 0; }
  12%, 52% { opacity: 1; }
  32%, 72% { opacity: .12; }
}
.md-scope .sub.prev { flex: 1 1 0; min-width: 0; overflow: auto; padding: .3rem 1rem .8rem; background: var(--panel2); }
.md-scope .pcontent[data-only="edit"] .sub.edit { flex: 1 1 0; }
.md-scope .pcontent[data-only="edit"] .sub.prev,
.md-scope .pcontent[data-only="edit"] .md-split-handle { display: none; }
.md-scope .pcontent[data-only="prev"] .sub.prev { flex: 1 1 0; }
.md-scope .pcontent[data-only="prev"] .sub.edit,
.md-scope .pcontent[data-only="prev"] .md-split-handle { display: none; }
.md-scope .sub.edit textarea { flex: 1; width: 100%; height: auto; min-height: 0; box-sizing: border-box; resize: none;
  background: var(--panel); color: var(--ink); border: none; padding: .6rem .7rem; font: 13px/1.55 ui-monospace, Menlo, monospace; }
.md-scope .sub.edit textarea:focus { outline: none; }
.md-scope .md-split-handle { flex: 0 0 7px; cursor: col-resize; background: var(--line); position: relative; touch-action: none; }
.md-scope .md-split-handle::after { content: ""; position: absolute; inset: 0 2px;
  background: linear-gradient(var(--muted), var(--muted)) center/2px 26px no-repeat; opacity: .4; }
.md-scope .md-split-handle:hover::after { opacity: .8; }

/* Preview-Typografie – H1–H6 Farbe + Größe über :root-Variablen (Einstellungen → Infoseiten),
   Fallback = dunkel/ölige Standard-Palette. */
.md-scope .sub.prev h1 { color: var(--ph1-color, #8c3b3b); font-size: var(--ph1-size, 1.45rem);
  border-bottom: 1px solid var(--line); padding-bottom: .25rem; margin: 1rem 0 .6rem; }
.md-scope .sub.prev h2 { color: var(--ph2-color, #9a7d2e); font-size: var(--ph2-size, 1.2rem); margin: 1.1rem 0 .45rem; }
.md-scope .sub.prev h3 { color: var(--ph3-color, #3f628f); font-size: var(--ph3-size, 1.05rem); margin: 1rem 0 .4rem; }
.md-scope .sub.prev h4 { color: var(--ph4-color, #4f7a55); font-size: var(--ph4-size, .98rem); margin: .9rem 0 .35rem; }
.md-scope .sub.prev h5 { color: var(--ph5-color, #6f5591); font-size: var(--ph5-size, .95rem); margin: .9rem 0 .35rem; }
.md-scope .sub.prev h6 { color: var(--ph6-color, #8b8f98); font-size: var(--ph6-size, .9rem); margin: .9rem 0 .35rem; }
.md-scope .sub.prev p { margin: 0; }   /* Abstand kommt aus den erhaltenen Leerzeilen (md-blank), nicht doppelt */
.md-scope .sub.prev .md-blank { display: block; }
.md-scope .sub.prev ul, .md-scope .sub.prev ol { margin: .4rem 0; padding-left: 1.5rem; }
.md-scope .sub.prev li.task { list-style: none; margin-left: -1.2rem; }
.md-scope .sub.prev blockquote { margin: .6rem 0; padding: .15rem .9rem; border-left: 3px solid var(--muted);
  color: #cdd2da; background: rgba(139,145,156,.08); border-radius: 0 6px 6px 0; }
.md-scope .sub.prev hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
.md-scope .sub.prev table { border-collapse: collapse; margin: .6rem 0; }
.md-scope .sub.prev th, .md-scope .sub.prev td { border: 1px solid var(--line); padding: .28rem .6rem; }
.md-scope .sub.prev th { background: var(--panel); color: #cdd2da; }
.md-scope .sub.prev code { font-family: ui-monospace, Menlo, monospace; font-size: .86em; background: var(--pcode-bg, #1e2128);
  border: 1px solid var(--pcode-border, #2a2e37); border-radius: 5px; padding: .02rem .35rem; }
.md-scope .sub.prev pre { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: .6rem .8rem; overflow-x: auto; }
.md-scope .sub.prev pre code { border: none; background: none; padding: 0; }
.md-scope .sub.prev img { max-width: 100%; }
/* --Text-- = Unterstreichen; Farbe + Schriftstärke aus den Einstellungen (Infoseiten-Register). */
.md-scope .sub.prev u.md-u, .anno-note u.md-u, .news-txt u.md-u { text-decoration: underline; text-underline-offset: 2px;
  color: var(--pu-color, #e6e8ec); font-weight: var(--pu-weight, 400); }
/* ++Text++ = DOPPELT unterstrichen; Farbe + Stärke wie --Text--, eigene Vars. */
.md-scope .sub.prev u.md-uu, .anno-note u.md-uu, .news-txt u.md-uu { text-decoration: underline double; text-underline-offset: 3px;
  color: var(--puu-color, #e6e8ec); font-weight: var(--puu-weight, 400); }
/* Farbige Auszeichnung (Job 170): =g:Schrift:= und ==g:Hintergrund:== aus md.js.
   ⚠️ BEWUSST NICHT die Vers-Palette aus app.js. Jogis Vorgabe hiess erst „sehr hell" und wurde
   im Gespräch präzisiert zu **SATT** (24.8.2026, am Rot des B/I-Knopfs `#8f1515` erklärt): voll
   gesättigte Töne, nur so weit aufgehellt, dass sie auf dem dunklen Lesegrund als Schrift tragen.
   Aufgehellte Pastelltöne (`#ff5252`) sahen nach Lachs aus, der Knopfton selbst ist als Schrift
   zu dunkel. Hintergrund bei 40 % (…66), Schrift hell.
   md.js kennt keine Farbwerte, nur die Klassen. */
.md-fg-r, .md-bg-r { --mdc: #e53935; --mdcb: #e5393566; }
.md-fg-o, .md-bg-o { --mdc: #fb8c00; --mdcb: #fb8c0066; }
.md-fg-y, .md-bg-y { --mdc: #fdd835; --mdcb: #fdd83566; }
.md-fg-g, .md-bg-g { --mdc: #00c853; --mdcb: #00c85366; }
.md-fg-b, .md-bg-b { --mdc: #1e88e5; --mdcb: #1e88e566; }
.md-scope .sub.prev .md-fg, .anno-note .md-fg, .news-txt .md-fg { color: var(--mdc); }
.md-scope .sub.prev .md-bg, .anno-note .md-bg, .news-txt .md-bg { background: var(--mdcb);
  color: #f3efe4; border-radius: 3px; padding: 0 .1em; }
/* ~~Text~~ = durchgestrichen */
.md-scope .sub.prev s.md-s, .anno-note s.md-s, .news-txt s.md-s { text-decoration: line-through; }
/* Edit-Auswahl blockweise im Preview zeigen (Job „Infoseiten-Register", Marker d). */
.md-scope .sub.prev .md-selhl { background: rgba(110,168,254,.16); border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(110,168,254,.16); }
.md-scope .sub.prev a { color: #9cc2ff; }

/* Verweise/Einbau/Frontmatter */
.md-scope .md-wiki { color: #9cc2ff; text-decoration: underline dotted; cursor: pointer; }
.md-scope .md-miss { color: var(--muted); font-style: italic; }
.md-scope .md-pagelink { color: #9cc2ff; text-decoration: underline dotted; cursor: pointer; }
.md-scope .mdv { display: block; margin: .55rem 0; padding: .45rem .75rem; border-left: 3px solid var(--accent);
  background: rgba(110,168,254,.08); border-radius: 0 8px 8px 0; }
.md-scope .mdv-label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
/* Vers-Einbettung ein-/ausklappbar (Kopf = ▾ + Stelle; Klick klappt den Körper ein/aus) */
.md-scope .mdv-head { display: block; cursor: pointer; margin-bottom: .15rem; user-select: none; }
.md-scope .mdv-head .mdv-label { display: inline; margin-bottom: 0; }
.md-scope .mdv-head:hover .mdv-label { color: #cdd2da; }
.md-scope .mdv-caret { color: var(--muted); font-size: .7rem; margin-right: .35rem; }
.md-scope .mdv-body { display: block; }
.md-scope .mdv.collapsed .mdv-body { display: none; }
.md-scope img { max-width: 100%; }
.md-scope .mdv-body img { display: block; max-width: 100%; }
.md-scope .mdv-v { display: block; margin: .1rem 0; }
.md-scope .mdv-v .vref { color: var(--accent); font-size: .8em; margin-right: .35rem; white-space: nowrap; }
.md-scope .mdv-more, .md-scope .mdv-err { display: block; color: var(--muted); font-style: italic; font-size: .85em; }
.md-scope .mdv-embed { border-left-color: #7bd88f; background: rgba(123,216,143,.06); }
.md-scope .mdv-embed .mdv-label { color: #9ee0ad; }
.md-scope .mdv-src { cursor: pointer; }
.md-scope .mdv-src:hover { color: #cfeecf; }
.md-scope .mdv-loop { border-left-color: #e0a458; background: rgba(224,164,88,.08); }
.md-scope .md-props { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .15rem 0 .5rem; padding: .25rem .1rem; }
.md-scope .md-props + .md-props { margin-top: -.3rem; }
.md-scope .md-prop-k { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; min-width: 3.6rem; }
.md-scope .md-tagchip { display: inline-block; padding: .04rem .5rem; border: 1px solid var(--accent);
  border-radius: 999px; color: #cfe0ff; background: rgba(110,168,254,.14); cursor: pointer; font-size: .76rem; }
.md-scope .md-tagchip:hover { background: rgba(110,168,254,.28); }
.md-scope .md-aliases { color: #cdd2da; font-size: .82rem; }
/* In der Infoseiten-Ansicht die Lese-Möbel (FAB/Griff-Toast) ausblenden. */
body.pages-mode #fab-knob,
body.pages-mode .fab-item,
body.pages-mode .fab-list,
body.pages-mode .fab-tear,
body.pages-mode #grip-toast { display: none !important; }
/* Bibel/Infoseiten-Umschalter rechts in der Kopfleiste (Job 38, 3a).
   Rot wie früher das „S" im Suchen-Knopf (#8f1515). */
#btn-view { margin-left: auto; min-width: 2rem; color: #8f1515; font-weight: 800; font-size: 1.18em; }

/* Einstellungen: Abschnitts-Trenner + H1–H6-Stiltabelle (Job 38, 3c-Anfang) */
.set-sep { margin: 1.4rem 0 .2rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line);
  font-size: .95rem; font-weight: 700; color: var(--accent); }
.hstyle-table { border-collapse: collapse; margin: .3rem 0 .5rem; }
.hstyle-table td { padding: .18rem .5rem .18rem 0; vertical-align: middle; }
.hstyle-table td:first-child { color: var(--muted); font-weight: 600; width: 2.2rem; }
.hstyle-table input[type=color] { width: 2.4rem; height: 1.6rem; padding: 0; border: 1px solid var(--line);
  border-radius: 5px; background: none; cursor: pointer; }
.hstyle-table .hsize { width: 4rem; }

/* ============================================================
   Schwebende Notiz-Fenster (Job 56, notes.js) – Infoseite über der Leseansicht.
   Der Körper trägt .md-scope → Edit/Preview sehen aus wie in der Infoseiten-Ansicht.
   Nur Sitzung; in der Infoseiten-Vollansicht ausgeblendet (Zustand bleibt).
   ============================================================ */
.note-float { position: fixed; z-index: 55; display: flex; flex-direction: column;
  width: 340px; height: 300px; min-width: 220px; min-height: 44px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); overflow: hidden; }
/* Minimiert: so schmal wie möglich (Kopfbreite). Breite/Höhe stecken weiter inline bzw. im
   CSS-Default → beim Ausklappen (Klasse weg) kommt das Original von selbst zurück. */
/* Eingeklappt = auffälliger „Sticky-Note"-Zustand (Job 68): Amber-Rahmen + Glow, fetter Titel,
   📝 voran. Über --collapsed-frame gebaut, damit es sich später auf die anderen eingeklappten
   Floater (z. B. .fab-tear.collapsed) übertragen lässt. */
/* Auffälliges Aufblinken, wenn man im /notiz-Wähler eine bereits offene Notiz wählt (0.9.28.3).
   Pulsierender bläulicher Glow (0.9.28.4); der ruhende Schlagschatten bleibt als Basis erhalten. */
@keyframes noteBlink {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(110,168,255,0); }
  50%      { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 24px 7px rgba(110,168,255,.85); }
}
.note-float.note-blink { animation: noteBlink .5s ease-in-out 2; }
.note-float.collapsed { height: auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; }
.note-float.collapsed .note-body, .note-float.collapsed .note-resize { display: none; }
.note-float.collapsed .note-head { background: var(--collapsed-glow); }
.note-float.collapsed .nt-caret { display: none; }
.note-float.collapsed .note-title::before { content: "📝"; flex: 0 0 auto; margin-right: .25rem; }
.note-float.collapsed .nt-name { max-width: 10rem; font-weight: 700; color: var(--ink); }
body.pages-mode .note-float { display: none; }

.note-head { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem;
  padding: .3rem .4rem; background: var(--panel2); border-bottom: 1px solid var(--line);
  cursor: move; touch-action: none; user-select: none; }
.note-float.collapsed .note-head { border-bottom: none; }
.note-title { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .25rem;
  overflow: hidden; background: none; border: none; color: var(--ink); font: inherit;
  font-size: .82rem; cursor: pointer; padding: .1rem .2rem; border-radius: 5px; }
.note-title:hover { background: rgba(255,255,255,.06); }
.note-title .nt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-title .nt-caret { color: var(--muted); font-size: .85rem; flex: 0 0 auto; line-height: 1; }
.note-title .nt-rename { flex: 1 1 auto; min-width: 0; background: #0f141c; color: var(--ink);
  border: 1px solid var(--accent); border-radius: 4px; font: inherit; font-size: .82rem;
  padding: .05rem .25rem; outline: none; }
.note-hbtn { flex: 0 0 auto; background: transparent; border: 1px solid transparent; color: var(--muted);
  font: inherit; font-size: .9rem; line-height: 1; padding: .12rem .35rem; border-radius: 6px; cursor: pointer; }
.note-hbtn:hover { color: var(--ink); border-color: var(--line); background: var(--panel); }
.note-hbtn.note-min { color: #6ea8ff; }   /* Auf-/Zuklapp-Icon bläulich hervorgehoben */
.note-hbtn.note-min:hover { color: #9cc4ff; }
.note-hbtn.note-x:hover { color: #ff9a9a; border-color: rgba(255,120,120,.4); background: rgba(255,120,120,.14); }

.note-body { flex: 1 1 auto; min-height: 0; display: flex; }
/* das von Pages.makeEditor gelieferte Widget füllt den Körper */
.note-editor { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.note-eptoggle { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem;
  padding: .25rem .4rem; border-bottom: 1px solid var(--line); background: var(--panel2); }

/* Eck-Griffe an allen 4 Ecken (v0.9.23.0); der Winkel-Marker zeigt je Ecke nach außen */
.note-resize { position: absolute; width: 16px; height: 16px; touch-action: none; z-index: 2; }
.note-resize::after { content: ""; position: absolute; width: 8px; height: 8px; opacity: .6; }
.note-resize.se { right: 0; bottom: 0; cursor: nwse-resize; }
.note-resize.se::after { right: 3px; bottom: 3px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); }
.note-resize.sw { left: 0; bottom: 0; cursor: nesw-resize; }
.note-resize.sw::after { left: 3px; bottom: 3px; border-left: 2px solid var(--muted); border-bottom: 2px solid var(--muted); }
.note-resize.ne { right: 0; top: 0; cursor: nesw-resize; }
.note-resize.ne::after { right: 3px; top: 3px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); }
.note-resize.nw { left: 0; top: 0; cursor: nwse-resize; }
.note-resize.nw::after { left: 3px; top: 3px; border-left: 2px solid var(--muted); border-top: 2px solid var(--muted); }
/* Die oberen Griffe liegen ÜBER den Kopf-Ecken: rechts Luft lassen, damit ✕ frei bleibt */
.note-float:not(.collapsed) .note-head { padding-right: 16px; }

/* Mini-Wähler (letzte Seiten + neue Seite) */
.note-picker { position: fixed; z-index: 56; min-width: 200px; max-width: 320px; max-height: 60vh;
  overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5); padding: .25rem; }
.note-picker .np-row { display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--ink); font: inherit; font-size: .82rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-picker .np-row:hover { background: var(--panel2); }
.note-picker .np-row.sel { background: var(--panel2); box-shadow: inset 0 0 0 1px var(--accent); }
.note-picker .np-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-picker .np-row-snip { font-size: .72rem; color: var(--muted); margin-top: .05rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-picker .np-new { color: var(--accent); font-weight: 600; }
.note-picker .np-sep { height: 1px; background: var(--line); margin: .2rem .2rem; }
.note-picker .np-empty { color: var(--muted); font-style: italic; font-size: .78rem; padding: .3rem .5rem; }
.note-picker .np-search { width: 100%; box-sizing: border-box; margin-bottom: .25rem;
  background: #0f1115; border: 1px solid var(--line); border-radius: 6px; color: var(--ink);
  font: inherit; font-size: .82rem; padding: .32rem .45rem; }
.note-picker .np-search:focus { outline: none; border-color: var(--accent); }
.note-picker .np-list { max-height: 44vh; overflow: auto; }
/* Zweiter Schritt im Wähler (Job 166): Sprungziele der gewählten Seite. */
.note-picker .np-step { display: flex; align-items: center; gap: .35rem; padding: .1rem .2rem .3rem;
  border-bottom: 1px solid var(--line); margin-bottom: .25rem; }
.note-picker .np-back { background: none; border: none; color: var(--accent); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .1rem .3rem; }
.note-picker .np-step-name { color: var(--muted); font-size: .78rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.note-picker .np-row-all { color: var(--accent); }
.note-picker .np-row-ziel .np-row-name { font-size: .82rem; }
.note-picker .np-row-mark .np-row-name { color: #b8e6c8; font-family: ui-monospace, Menlo, monospace; }
.note-picker .np-row-stelle .np-row-name { color: #cfe0ff; }

/* ---- Eigene Verweise am Versende (Job 60) ------------------------------ */
/* Job 158.3: Infoseiten am Vers – Chip „📄 N" als Schwester von „🔗 N", nur in Grün gehalten,
   damit man die beiden Listen am Versende auseinanderhält. Die Wahrheit steht im Frontmatter der
   Infoseite; hier hängt nichts als die Anzeige. */
.md-scope .md-bibchip { display: inline-block; margin: 0 .25rem .2rem 0; padding: .1rem .4rem;
  border: 1px solid #2b4735; background: #141f18; border-radius: 5px;
  font: .74rem/1.3 ui-monospace, monospace; color: #9fd8b6; }
.md-scope .md-bibwarn { color: #e0b070; font: .76rem/1.4 system-ui, sans-serif; }

.pagelist { display: inline; }
.pl-toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  vertical-align: baseline; margin-left: .35rem;
  font: 600 .72rem/1 system-ui, sans-serif; color: #8fc8a6;
  border: 1px solid #2b4735; background: #141f18; border-radius: 6px; padding: .2rem .5rem; }
.pl-toggle:hover { border-color: #4a9068; color: #d3f0e0; }
/* Das Zeichen ist ein SVG in `currentColor` – so wechselt es beim Aufklappen mit ins helle
   Grün, ohne zweite Farbregel. Ohne feste Größe würde es die Zeilenhöhe des Verses sprengen. */
.pl-ico { width: .95em; height: .95em; display: block; flex: 0 0 auto; }
.pagelist.open .pl-toggle { color: #eafff1; border-color: #4a9068; background: #2c5a41; }
.pl-items { display: block; margin-top: .35rem; }
.pl-items[hidden] { display: none; }
.pl-item { border: 1px solid #1e3327; border-radius: 7px; background: #101814; margin-bottom: .3rem;
  padding: .25rem .45rem; cursor: pointer; display: flex; gap: .5rem; align-items: baseline; }
.pl-item:hover { border-color: #4a9068; background: #14211a; }
.pl-name { font: 600 .8rem/1.3 system-ui, sans-serif; color: #cfe6d9; }
.pl-cmt { flex: 1 1 auto; min-width: 0; font: .8rem/1.3 system-ui, sans-serif; color: #9fb0a6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Einstellungen → Zeichen am Vers: jede Wahl zeigt den ECHTEN Chip als Vorschau. */
.pgi-wahl { display: flex; flex-wrap: wrap; gap: .45rem; }
.pgi-opt { display: flex; align-items: center; gap: .45rem; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  padding: .35rem .55rem; color: var(--ink); font: inherit; font-size: .82rem;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.pgi-opt.an { border-color: #4a9068; background: rgba(74,144,104,.14); }
.pgi-opt .pgi-probe { pointer-events: none; margin-left: 0; }
.pgi-name { color: var(--muted); }
.pgi-opt.an .pgi-name { color: #d3f0e0; }

.reflist { display: inline; }
.rl-toggle { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  vertical-align: baseline; margin-left: .35rem;   /* klebt inline ans Versende, bricht bei Platzmangel um */
  font: 600 .72rem/1 system-ui, sans-serif; color: #8fa6c8;
  border: 1px solid #2b3547; background: #141a24; border-radius: 6px; padding: .2rem .5rem; }
.rl-toggle:hover { border-color: var(--accent); color: #cfe0ff; }
.reflist.open .rl-toggle { color: #eaf1ff; border-color: #4a6690; background: #2c3d5a; }
.rl-items { display: block; margin-top: .35rem; }
.rl-items[hidden] { display: none; }   /* zugeklappt: nur Icon+Zahl sichtbar (Klasse würde [hidden] sonst überstimmen) */
.rl-item { border: 1px solid #232c3a; border-radius: 7px; background: #12161e; margin-bottom: .3rem; padding: .25rem .3rem; }
.rl-item.dragging { opacity: .6; border-color: var(--accent); }
.rl-line { display: flex; align-items: baseline; gap: .4rem; }
.rl-arr { flex: 0 0 auto; align-self: center; cursor: grab; touch-action: none; user-select: none;
  padding: 0 .1rem; font: 700 .8rem/1.3 system-ui, sans-serif; }   /* gleiche Höhe wie Stelle/Kommentar */
.rl-arr:active { cursor: grabbing; }
.rl-ref { flex: 0 0 auto; font: 600 .72rem/1.3 system-ui, sans-serif; color: #9fc0ee; cursor: pointer; white-space: nowrap; }
.rl-ref:hover { color: #cfe0ff; text-decoration: underline; }
.rl-cmt { flex: 1 1 auto; min-width: 0; font: .8rem/1.3 system-ui, sans-serif; color: #cdd4e0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none; border-bottom: 1px dotted #2a3340; }
.rl-cmt:focus { border-bottom-color: var(--accent); white-space: normal; overflow: visible; text-overflow: clip; }
.rl-cmt:empty::before { content: attr(data-ph); color: #556; font-style: italic; }
.rl-embed { display: block; margin: .3rem 0 .1rem; padding: .3rem .4rem; border-left: 2px solid #3a5170;
  background: #0f141c; border-radius: 0 5px 5px 0; font-size: .86rem; color: #c3cbd7; }
.rl-embed[hidden] { display: none; }
/* eingehende Verweise (Job 62): read-only, dezent abgesetzt */
.rl-sep { margin: .35rem 0 .25rem; font: 600 .6rem/1 system-ui, sans-serif; letter-spacing: .06em;
  text-transform: uppercase; color: #d1573a; opacity: .8; }
.rl-item.rl-in { border-color: #331d1d; background: #150f0f; }
.rl-arr.rl-arr-ro { cursor: default; touch-action: auto; }
.rl-cmt.rl-cmt-ro { border-bottom: none; color: #c6a9a9; cursor: default; }
.rl-ev { display: block; margin-bottom: .15rem; }
.rl-ev:last-child { margin-bottom: 0; }
.rl-evn { font: 600 .66rem/1 system-ui, sans-serif; color: var(--muted); margin-right: .3rem; }

/* ---- Verweis anlegen: Overlay (Job 60) --------------------------------- */
#ref-add.show { display: flex; align-items: flex-start; justify-content: center; }
#ref-add { padding: 8vh 4vw; background: rgba(0,0,0,.55); }
.ref-add-box { width: min(520px, 96vw); max-height: 84vh; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.55); padding: 1rem 1.1rem 1.1rem; }
.ref-add-head { display: flex; align-items: center; justify-content: space-between;
  font: 600 1rem/1.2 system-ui, sans-serif; color: var(--ink); margin-bottom: .7rem; }
.ref-add-x { background: #191d25; border: 1px solid var(--line); color: #c7ccd5; border-radius: 7px;
  width: 28px; height: 28px; font-size: 14px; cursor: pointer; }
.ref-add-x:hover { border-color: #c46; color: #f2b8c2; }
.ref-add-lab { font: 600 .72rem/1 system-ui, sans-serif; color: var(--muted); letter-spacing: .02em; margin: .5rem 0 .3rem; }
.ref-add-hint { font-weight: 400; font-style: italic; opacity: .7; margin-left: .35rem; letter-spacing: 0; }
#ref-add-in, #ref-add-cmt { width: 100%; box-sizing: border-box; background: #0f1115; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .92rem; padding: .5rem .6rem; }
#ref-add-in:focus, #ref-add-cmt:focus { outline: none; border-color: var(--accent); }
#ref-add-cmt { resize: vertical; font-family: system-ui, sans-serif; font-size: .88rem; }
.ref-add-prev { margin-top: .5rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: 8px;
  background: #12151b; overflow-y: auto; max-height: 34vh; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.ref-add-prev.err { color: #f0a9a9; font-style: italic; }
.ref-add-plbl { font: 600 .74rem/1 system-ui, sans-serif; color: var(--accent); margin-bottom: .4rem; letter-spacing: .01em; }
.ref-add-loading { color: var(--muted); font-style: italic; font-size: .82rem; }
.ref-add-v { margin-bottom: .25rem; }
.ref-add-vn { font: 600 .68rem/1 system-ui, sans-serif; color: var(--muted); margin-right: .35rem; }
.ref-add-btns { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.ref-add-cancel, .ref-add-commit { font: inherit; font-size: .88rem; border-radius: 8px; padding: .5rem .9rem; cursor: pointer; }
.ref-add-cancel { background: #191d25; color: var(--ink); border: 1px solid var(--line); }
.ref-add-cancel:hover { border-color: var(--muted); }
.ref-add-commit { background: #27406b; color: #dbe8ff; border: 1px solid var(--accent); }
.ref-add-commit:hover { background: #2e4d80; }
.ref-add-commit:disabled { opacity: .45; cursor: default; background: #191d25; color: var(--muted); border-color: var(--line); }