/* Seite /sola-scriptura/ (scripts/sola-scriptura.mjs): drei Fragen an „die Schrift allein“. Papier- und Nachtabschnitte
   im Wechsel, Lesespalte für den Text (38rem), breitere Bausteine bis 72rem: die Probe (Karten zum Aufklappen),
   2 Tim 3,14–17 mit Anmerkungen (src/wort.js), Quelle mit zwei Strömen, Wortwahl in drei Übersetzungen, Glieder der
   Kette, Inhaltsverzeichnis in vier Ständen, Zeitleiste (src/szenen.js setzt --p), Lesarten, das Mosaik des Irenäus,
   das Apostelkonzil, die Zeugen, Sorgen, Einwände, Gespräch, zum Mitnehmen. Auswahlen: src/schrift.js
   (data-gewaehlt am Behälter, aria-current an der passenden Tafel). Ohne Skript stehen alle Tafeln untereinander.
   Das Verzeichnis kommt aus src/zeitleiste.css (Dialog auf schmalen Bildschirmen, src/verzeichnis.js). */
.schrift-seite { --spalte: 38rem; --breit: 72rem; --rand: max(1.25rem, env(safe-area-inset-left, 0px)); }
.schrift-seite main { display: block; overflow-x: clip; }
/* EB Garamond setzt für Latein sonst das klassische V für U („scriptvra“); im Mosaikband ist das gewollt */
.schrift-seite .artikel-titel { font-feature-settings: "locl" 0; }
.schrift-seite .prose { margin-inline: auto; }
.schrift-seite .prose p, .schrift-seite .prose-list li { font-size: 1.0625rem; }
.schrift-seite .prose a:not(.ref):not(.knopf) { text-underline-offset: .2em; }
.schrift-seite h2, .schrift-seite h3, .schrift-seite h4 { scroll-margin-top: 5rem; }
.schrift-seite section, .schrift-seite .unterteil { scroll-margin-top: 4.5rem; }

/* ------------------------------------------------------------ Kopf: das Band SOLA SCRIPTVRA */
.sola-band { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.sola-band .inschrift-zeile { font-size: clamp(2.1rem, 1rem + 5.2vw, 4.4rem); letter-spacing: .1em; }
/* „SOLA“ als Umriss: das Wort, nach dem gefragt wird. Beim Laden steht es kurz gefüllt da und wird dann leer. */
.sola-frage {
  display: inline-block; color: var(--lapis); -webkit-text-stroke: .045em #1b2f6b;
  animation: sola-leeren 1.6s cubic-bezier(.4, 0, .2, 1) .9s both;
}
@keyframes sola-leeren { from { color: var(--lapis); } to { color: transparent; } }
@supports not (-webkit-text-stroke: 1px) { .sola-frage { animation: none; opacity: .45; } }
.schrift-hinweis {
  max-width: var(--spalte); margin: 0 auto clamp(1.5rem, 4vw, 2.25rem); padding: 0 1.25rem; text-align: center;
  font-family: var(--font-ui); font-size: .875rem; line-height: 1.5; color: var(--ink-3);
}

/* ------------------------------------------------------------ Verzeichnis */
/* Breite Bildschirme: als Kasten unter dem Kopf, die Teile nebeneinander; schmal: Dialog über „Inhalt“ (verzeichnis.js) */
.schrift-verzeichnis { max-width: 60rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.kg-uebersicht .schrift-verzeichnis-liste { display: block; column-gap: 2rem; }
.schrift-verzeichnis-liste > li { break-inside: avoid; margin-bottom: .1rem; }
.schrift-verzeichnis-liste > li > a { font-weight: 600; }
.schrift-verzeichnis-liste ol { list-style: none; margin: 0 0 .35rem; padding: 0 0 0 .9rem; border-left: 1px solid var(--rule); }
.schrift-verzeichnis-liste ol a { font-size: .85rem; color: var(--ink-2); }
/* Spalten von oben nach unten: die Teile mit ihren Abschnitten bleiben beisammen, ohne Lücken wie in einem Raster */
@media (min-width: 760px) { .schrift-verzeichnis:not(.kg-dialog .schrift-verzeichnis) .schrift-verzeichnis-liste { columns: 2; } }
@media (min-width: 1180px) { .schrift-verzeichnis:not(.kg-dialog .schrift-verzeichnis) .schrift-verzeichnis-liste { columns: 3; } }
@media (max-width: 1179px) { .js .schrift-verzeichnis:not(.kg-dialog .schrift-verzeichnis) { margin-inline: var(--rand); } }

/* ------------------------------------------------------------ Teile und Abschnitte */
.teil { padding: clamp(3.5rem, 9vw, 6.5rem) var(--rand); }
.teil--papier { background: var(--sheet); border-block: 1px solid var(--rule); }
.teil-titel { margin: 0 0 1.1rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 1.08; }
.teil-kopf { position: relative; }
/* Die römische Ziffer der Frage, groß und leise hinter der Überschrift; nur Schmuck, deshalb aus data-nr (die Frage
   selbst steht in der Überschrift) */
.teil-nr::before { content: attr(data-nr); }
.teil-nr {
  display: block; margin: 0 0 -.15em; font-family: var(--font-kapitalis); font-weight: 600; line-height: 1;
  font-size: clamp(4.5rem, 3rem + 7vw, 8.5rem); letter-spacing: .04em; color: var(--gold); opacity: .32;
}
.abschnitt-untertitel {
  margin: 0 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.55rem, 1.25rem + 1.2vw, 2.1rem); line-height: 1.15;
}
.prose .abschnitt-untertitel { margin-top: .5rem; }
.unterteil { max-width: var(--breit); margin: clamp(3.5rem, 8vw, 5.5rem) auto 0; }
.unterteil > .prose:not(:first-child) { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.weiter-link { margin-top: 1.4rem; font-family: var(--font-ui); font-size: .95rem; font-weight: 600; }
.weiter-link a { display: inline-flex; align-items: center; gap: .4rem; color: var(--gold-text); text-decoration: none; }
.weiter-link a:hover .pfeil { transform: translateX(4px); }

/* Auswahl (src/schrift.js): Knöpfe wie Reiter */
.wahl { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 1.1rem; }
.wahl button {
  min-height: 2.75rem; padding: .45rem 1rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--sheet); color: var(--ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: var(--font-ui); font-size: .9rem; font-weight: 600; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.wahl button:hover { border-color: var(--gold); color: var(--ink); }
.wahl button[aria-pressed="true"] { background: var(--night); border-color: var(--night); color: var(--gold-hell); }
.wahl button:focus-visible { outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wahl button[aria-pressed="true"] { background: var(--night-3); border-color: var(--gold-line); } }
:root[data-theme="dark"] .wahl button[aria-pressed="true"] { background: var(--night-3); border-color: var(--gold-line); }
@media (max-width: 520px) { .wahl { gap: .3rem; } .wahl button { padding: .4rem .72rem; font-size: .84rem; } }
/* Mit Skript zeigt der Behälter nur die gewählte Tafel; ohne Skript stehen alle da */
.ist-bedienbar [data-zu]:not([aria-current]) { display: none; }
.ist-bedienbar [data-zu][aria-current] { animation: tafel-auf .35s ease both; }
@keyframes tafel-auf { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------ Worum es geht */
.worum-karten { max-width: 60rem; margin: clamp(2rem, 5vw, 3rem) auto; display: grid; gap: 1rem; }
@media (min-width: 820px) { .worum-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.worum-karte { position: relative; padding: 1.3rem 1.25rem 1.1rem; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.worum-karte p { margin: 0; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; }
.worum-karte-art { margin-bottom: .55rem !important; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.worum-karte--beide { box-shadow: inset 0 0 0 2px var(--gold-line); background: var(--gold-tint); }
.worum-karte--beide .worum-karte-art { color: var(--gold-text); }
.worum-karte--kirche .worum-karte-art { color: var(--violet); }

/* ------------------------------------------------------------ Drei Fragen */
.fragen { background: var(--paper); }
.fragen-liste { list-style: none; max-width: 64rem; margin: 0 auto; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 820px) { .fragen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.js .frage.zeigen { transition-delay: calc(var(--i, 0) * .12s); }
.frage-link {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: .35rem; height: 100%; padding: 1.4rem 1.3rem 1.2rem;
  border-radius: 18px; background: var(--night); color: var(--auf-nacht); text-decoration: none; overflow: hidden;
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
}
.frage-link::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background-color: var(--gold); }
.frage-link:hover { transform: translateY(-3px); }
.frage-link:hover .pfeil { transform: translateX(5px); }
.frage-link:focus-visible { outline-color: var(--gold-text); }
.frage-nr { font-family: var(--font-kapitalis); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--gold-hell); }
.frage-text { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.15; color: #fff; }
.frage-unter { font-family: var(--font-ui); font-size: .92rem; line-height: 1.45; color: var(--auf-nacht-2); }
.frage-pfeil { color: var(--gold-hell); font-size: 1.3rem; }

/* ------------------------------------------------------------ Erzählung (Hahn) */
.erzaehlung { margin: 1.6rem 0 0; padding: 1.1rem 1.25rem; border-left: 3px solid var(--gold); background: var(--gold-tint); border-radius: 0 12px 12px 0; }
.erzaehlung p { margin: 0; font-size: 1rem; line-height: 1.62; }

/* ------------------------------------------------------------ Die Probe: sieben Stellen */
.probe-liste { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 700px) { .probe-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .probe-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.js .probe-karte.zeigen { transition-delay: calc(var(--i, 0) * .09s); }
.probe-karte details { height: 100%; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .2s ease; }
.probe-karte details[open] { box-shadow: inset 0 0 0 2px var(--rubric-line); }
.probe-karte summary { display: grid; gap: .45rem; padding: 1.1rem 1.15rem 1rem; cursor: pointer; list-style: none; border-radius: 16px; }
.probe-karte summary::-webkit-details-marker { display: none; }
.probe-stelle { font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--rubric); }
.probe-zitat { font-family: var(--font-display); font-size: 1.22rem; line-height: 1.35; font-style: italic; }
.probe-frage { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; font-family: var(--font-ui); font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.probe-auf { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--rule-strong); transition: transform .25s ease; }
details[open] .probe-auf { transform: rotate(45deg); }
.probe-antwort { padding: 0 1.15rem 1.1rem; border-top: 1px dashed var(--rule-strong); margin: 0 1.15rem; padding-inline: 0; }
.probe-antwort p { margin: .85rem 0 0; font-size: .98rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; }
.probe-vers { font-family: var(--font-ui); font-size: .82rem !important; color: var(--ink-3); }
details[open] .probe-antwort { animation: tafel-auf .3s ease both; }

/* ------------------------------------------------------------ 2 Tim 3,14–17 mit Anmerkungen */
.passage { display: grid; gap: 1.25rem; margin: 1.5rem auto 0; max-width: 64rem; }
@media (min-width: 900px) { .passage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem; align-items: start; } }
.passage-text { position: relative; margin: 0; padding: 1.9rem 1.5rem 1.5rem; border-radius: 18px; background: var(--sheet); border: 1px solid var(--rule); overflow: hidden; }
.passage-text::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-color: var(--gold); }
@media (min-width: 900px) { .passage-text { position: sticky; top: 5.5rem; } }
.passage-text figcaption { margin-bottom: .8rem; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.passage-text figcaption span { font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--ink-3); }
.passage-text blockquote { margin: 0; }
.passage-text p { margin: 0; font-family: var(--font-display); font-size: clamp(1.18rem, 1.05rem + .45vw, 1.38rem); line-height: 1.7; }
.passage-text sup { font-family: var(--font-ui); font-size: .6em; font-weight: 700; color: var(--gold-text); margin: 0 .2em 0 .1em; }
.passage-text .paar { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .08em; text-underline-offset: .22em; }
.paar-nr {
  display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: .2em; vertical-align: .35em; border-radius: 50%;
  background: var(--gold); color: #fff; font-family: var(--font-ui); font-size: .55em; font-weight: 700; line-height: 1;
}
.anmerkungen { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.anmerkung { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .7rem; padding: .85rem .9rem; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); cursor: pointer; }
.anmerkung p { margin: 0; font-size: .98rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; }
.anmerkung-nr { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--gold); color: #fff; font-family: var(--font-ui); font-weight: 700; }
.anmerkung.ist-aktiv { background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold-line); }

/* ------------------------------------------------------------ Leitvers 2 Thess 2,15 und die Quelle */
.leitvers { position: relative; max-width: 54rem; margin: 0 auto clamp(2rem, 5vw, 3rem); padding: 2.4rem clamp(1.25rem, 4vw, 2.75rem) 1.6rem; border-radius: 20px; background: var(--night); color: var(--auf-nacht); text-align: center; overflow: hidden; box-shadow: var(--shadow); }
.leitvers-band { position: absolute; left: 0; right: 0; top: 0; height: 8px; background-color: var(--gold); background-size: 96px auto; }
.leitvers blockquote { margin: 0; }
.leitvers p { margin: 0; font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.3; color: #fff; text-wrap: balance; }
.leitvers figcaption { margin-top: 1rem; font-family: var(--font-ui); font-size: .85rem; color: var(--auf-nacht-2); }
.leitvers .ref, .nacht .ref, .frage-link .ref { --c: var(--gold-hell); --c-line: rgba(236, 210, 142, .5); --c-tint: rgba(236, 210, 142, .16); }
.zweispalt { display: grid; gap: 1.5rem; max-width: 68rem; margin: 0 auto; align-items: center; }
@media (min-width: 960px) { .zweispalt { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem; } .zweispalt .prose { margin: 0; } }
.zweispalt--bild { align-items: start; }
@media (min-width: 960px) { .zweispalt--bild { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.quelle { margin: 0; }
.quelle-bild { display: block; width: 100%; height: auto; overflow: visible; }
.quelle-punkt, .quelle-ziel { fill: var(--sheet); stroke: var(--gold); stroke-width: 3; }
.quelle-ziel { stroke: var(--lapis); }
.quelle-name { font-family: var(--font-ui); font-size: 17px; font-weight: 700; fill: var(--ink); }
.quelle-weg { font-family: var(--font-display); font-size: 24px; font-style: italic; fill: var(--ink-2); }
.quelle-strom { fill: none; stroke: url(#quelle-gold); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 460; stroke-dashoffset: 0; }
.js .quelle .quelle-strom { stroke-dashoffset: 460; transition: stroke-dashoffset 1.8s cubic-bezier(.3, .6, .2, 1) .2s; }
.js .quelle .quelle-strom--brief { transition-delay: .55s; }
.js .quelle.ist-sichtbar .quelle-strom { stroke-dashoffset: 0; }
.quelle figcaption { margin-top: .6rem; font-family: var(--font-ui); font-size: .85rem; line-height: 1.5; color: var(--ink-3); text-align: center; }

/* ------------------------------------------------------------ Gemälde */
.gemaelde { max-width: 46rem; margin: clamp(2.5rem, 6vw, 3.5rem) auto 0; }
.zweispalt .gemaelde { margin: 0; }
.gemaelde-rahmen { display: block; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.gemaelde-rahmen picture, .gemaelde-rahmen img { display: block; width: 100%; height: auto; }
.gemaelde figcaption { padding: .75rem .1rem 0; font-family: var(--font-ui); font-size: .82rem; line-height: 1.5; color: var(--ink-2); }
.gemaelde .werk { color: var(--ink); font-weight: 600; }
.gemaelde .nachweis { display: block; margin-top: .2rem; color: var(--ink-3); }

/* ------------------------------------------------------------ Ein Wort, zwei Urteile */
.wortwahl { max-width: 56rem; margin: 1.5rem auto; }
.wortwahl-rahmen { overflow-x: auto; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.wortwahl-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.wortwahl-tabelle caption { padding: 1rem 1rem .4rem; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wortwahl-griechisch { display: block; margin-bottom: .2rem; font-family: var(--font-display); font-size: 2rem; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--gold-text); }
.wortwahl-tabelle th, .wortwahl-tabelle td { padding: .8rem 1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.wortwahl-tabelle thead th { font-family: var(--font-ui); font-size: .78rem; font-weight: 700; color: var(--ink-3); border-top: 0; }
.wortwahl-tabelle tbody th { width: 34%; font-family: var(--font-ui); font-size: .9rem; font-weight: 700; }
.wortwahl-wer { display: block; font-weight: 500; color: var(--ink-3); font-size: .82rem; }
.wortwahl-tabelle td { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.4; }
.wortwahl-zeile--tadel th { box-shadow: inset 4px 0 0 var(--ink-3); }
.wortwahl-zeile--lob th { box-shadow: inset 4px 0 0 var(--gold); }
.wortwahl > figcaption { margin-top: .6rem; font-family: var(--font-ui); font-size: .82rem; line-height: 1.5; color: var(--ink-3); text-align: center; }
.ist-bedienbar .wortwahl-tabelle td[aria-current] { animation: tafel-auf .35s ease both; }

/* ------------------------------------------------------------ Vier Glieder */
.glieder { max-width: 60rem; margin: 1.5rem auto; display: grid; gap: .6rem; }
.glieder-titel { margin-top: .8rem; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.glieder-kette { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 720px) { .glieder-kette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; } }
.glied { position: relative; display: grid; gap: .15rem; padding: .85rem .9rem; border-radius: 999px; text-align: center; background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.js .glied.zeigen { transition-delay: calc(var(--i, 0) * .18s); }
.glied-wer { font-family: var(--font-display); font-size: 1.2rem; font-weight: 500; }
.glied-wie { font-family: var(--font-ui); font-size: .78rem; color: var(--ink-3); }
.glieder-kette--clemens .glied { box-shadow: inset 0 0 0 1.5px var(--green-line); }
/* Auf dem Handy steht jedes Glied als schmale Zeile untereinander */
@media (max-width: 719px) { .glied { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .55rem; padding: .55rem 1rem; } }
/* Pfeile zwischen den Gliedern: auf dem Handy nach unten, breit nach rechts */
.glied:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -.5rem; width: 2px; height: .5rem; background: var(--gold); transform: translateX(-50%);
}
@media (min-width: 720px) {
  .glied:not(:last-child)::after { left: auto; right: -1.4rem; bottom: auto; top: 50%; width: 1.4rem; height: 2px; transform: none; }
}

/* ------------------------------------------------------------ Was die Apostel außerdem wussten */
.fundstuecke-liste { list-style: none; max-width: 68rem; margin: 1.5rem auto; padding: 0; display: grid; gap: .85rem; }
@media (min-width: 680px) { .fundstuecke-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .fundstuecke-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.js .fundstueck.zeigen { transition-delay: calc(var(--i, 0) * .09s); }
.fundstueck { padding: 1.05rem 1.1rem; border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.fundstueck-stelle { margin: 0 0 .4rem; font-family: var(--font-ui); font-size: .82rem; font-weight: 700; }
.fundstueck blockquote { margin: 0 0 .55rem; }
.fundstueck blockquote p { margin: 0; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; font-style: italic; }
.fundstueck-herkunft { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------ Das Inhaltsverzeichnis in vier Ständen */
.nt-seite { max-width: 52rem; margin: 1.5rem auto; }
.nt-blatt {
  position: relative; padding: 1.6rem clamp(1rem, 4vw, 2.2rem) 1.3rem; border-radius: 6px;
  background: #f6efdf; color: #2a2318; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), 0 22px 50px rgba(40, 28, 10, .18);
  background-image: linear-gradient(90deg, rgba(120, 90, 40, .06), transparent 12%, transparent 88%, rgba(120, 90, 40, .06));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nt-blatt { background-color: #2a2620; color: #efe6d2; } }
:root[data-theme="dark"] .nt-blatt { background-color: #2a2620; color: #efe6d2; }
.nt-kopf { margin: 0 0 1rem; text-align: center; font-family: var(--font-kapitalis); font-size: 1.15rem; letter-spacing: .14em; }
.nt-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .05rem 1.6rem; }
@media (min-width: 680px) { .nt-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nt-buch {
  order: var(--o-heute); display: flex; align-items: baseline; gap: .55rem; padding: .28rem .4rem; border-radius: 6px;
  font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25;
  transition: background-color .3s ease, color .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.nt-buch::before { content: attr(data-n); min-width: 1.5em; text-align: right; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; color: rgba(90, 70, 30, .6); font-variant-numeric: tabular-nums; }
.nt-kurz { display: none; }
.nt-buch--extra { display: none; }
/* Eusebius um 325: bestritten (b), beides genannt (u) */
[data-gewaehlt="eusebius"] .nt-buch[data-eusebius="b"] { background: rgba(176, 112, 20, .16); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 20, .55); }
[data-gewaehlt="eusebius"] .nt-buch[data-eusebius="u"] { background: repeating-linear-gradient(135deg, rgba(176, 112, 20, .16) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 20, .4); }
/* Codex Sinaiticus: andere Folge, zwei weitere Schriften */
[data-gewaehlt="sinaiticus"] .nt-buch { order: var(--o-sinaiticus); }
[data-gewaehlt="sinaiticus"] .nt-buch::before { content: attr(data-n-sinaiticus); }
[data-gewaehlt="sinaiticus"] .nt-buch--extra { display: flex; background: rgba(34, 64, 143, .12); box-shadow: inset 0 0 0 1.5px rgba(34, 64, 143, .45); }
/* Luther 1522: vier Bücher ohne Nummer ans Ende */
[data-gewaehlt="luther"] .nt-buch { order: var(--o-luther); }
[data-gewaehlt="luther"] .nt-buch::before { content: attr(data-n-luther); }
[data-gewaehlt="luther"] .nt-buch[data-luther="x"] { margin-top: .2rem; opacity: .62; font-style: italic; box-shadow: inset 0 -1px 0 rgba(90, 70, 30, .4); }
.nt-legende { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: center; font-family: var(--font-ui); font-size: .78rem; }
.nt-legende li::before { content: ""; display: inline-block; width: 1.1rem; height: .75rem; margin-right: .4rem; vertical-align: -.05rem; border-radius: 3px; }
.nt-legende-b::before { background: rgba(176, 112, 20, .16); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 20, .55); }
.nt-legende-u::before { background: repeating-linear-gradient(135deg, rgba(176, 112, 20, .2) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1.5px rgba(176, 112, 20, .4); }
.nt-legende-x::before { box-shadow: inset 0 -1px 0 rgba(90, 70, 30, .5); opacity: .7; }
.nt-legende-extra::before { background: rgba(34, 64, 143, .12); box-shadow: inset 0 0 0 1.5px rgba(34, 64, 143, .45); }
.nt-legende li { display: none; }
.ist-bedienbar .nt-legende li[aria-current] { display: list-item; animation: none; }
.nt-texte { margin-top: 1rem; }
.nt-text { margin: 0 0 .8rem; font-size: 1rem; line-height: 1.6; text-align: center; color: var(--ink-2); text-wrap: pretty; }
.nt-text strong { font-family: var(--font-ui); color: var(--ink); }
.ist-bedienbar .nt-text { min-height: 4.8em; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }

/* ------------------------------------------------------------ Woher weißt du es? */
.woher-liste { list-style: none; max-width: 44rem; margin: 1.5rem auto; padding: 0; display: grid; gap: .6rem; counter-reset: woher; }
.js .woher.zeigen { transition-delay: calc(var(--i, 0) * .08s); }
.woher details { border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.woher summary { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .8rem; align-items: center; padding: .9rem 1rem; cursor: pointer; list-style: none; border-radius: 16px; }
.woher summary::-webkit-details-marker { display: none; }
.woher-nr { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--night); color: var(--gold-hell); font-family: var(--font-ui); font-weight: 700; }
.woher-antwort { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; }
.woher-frage { margin: 0 1rem; padding: .2rem 0 1rem 2.9rem; position: relative; }
.woher-frage::before { content: "?"; position: absolute; left: .55rem; top: .55rem; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
.woher-frage p { margin: .6rem 0 0; font-size: .98rem; line-height: 1.6; }
.woher details[open] .woher-frage { animation: tafel-auf .3s ease both; }

/* ------------------------------------------------------------ Zeitleiste: Wie die Liste entstand */
.zeit { --p: 0; list-style: none; position: relative; max-width: 40rem; margin: 2rem auto; padding: .3rem 0 0 2.6rem; }
.zeit::before, .zeit::after { content: ""; position: absolute; left: .7rem; top: .6rem; width: 2px; }
.zeit::before { bottom: 1rem; background: var(--rule-strong); }
.zeit::after { height: calc((100% - 1.6rem) * var(--p)); background: linear-gradient(var(--gold-hell), var(--gold)); }
.zeit-punkt { position: relative; padding: 0 0 1.7rem; }
.zeit-punkt::before {
  content: ""; position: absolute; left: calc(-2.6rem + .7rem - 6px); top: .35rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold); transition: background-color .5s ease, box-shadow .5s ease;
}
.zeit-punkt.ist-sichtbar::before { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-tint); }
.zeit-jahr { margin: 0; font-family: var(--font-kapitalis); font-weight: 600; letter-spacing: .06em; color: var(--gold-text); }
.zeit-titel { margin: .1rem 0 .3rem; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.zeit-text { margin: 0; line-height: 1.6; color: var(--ink-2); hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------ Nachtabschnitte: Ohne Papier und Tinte, zum Mitnehmen */
.nacht {
  position: relative; padding: clamp(4rem, 10vw, 7rem) var(--rand); background: var(--night); color: var(--auf-nacht);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 74, .14), transparent 60%);
}
.nacht::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-color: var(--gold); background-size: 96px auto; }
.nacht-inner { max-width: 46rem; margin: 0 auto; }
.nacht .eyebrow { color: var(--gold-hell); text-align: center; }
.nacht-titel { margin: 0 0 1.6rem; text-align: center; font-family: var(--font-display); font-weight: 500; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); line-height: 1.05; color: #fff; }
.nacht-text p, .nacht p { line-height: 1.68; }
.nacht-text p { margin: 0 0 1.1em; hyphens: auto; -webkit-hyphens: auto; }
.nacht a:not(.ref):not(.share-btn) { color: var(--auf-nacht); }
.nacht .share-btn { color: var(--auf-nacht-3); }
.nacht .share-btn:hover { color: var(--gold-hell); background: rgba(236, 210, 142, .14); }
.nacht .kernsatz { margin: 0 auto 2rem; text-align: center; }
.nacht .kernsatz p { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); color: #fff; }
.nacht .kernsatz figcaption { color: var(--auf-nacht-2); }

/* Kernsatz eines Zeugen */
.kernsatz { margin: .6rem 0 .8rem; }
.kernsatz blockquote { margin: 0; }
.kernsatz p { margin: 0; font-family: var(--font-display); font-size: 1.22rem; line-height: 1.38; text-wrap: pretty; }
.kernsatz figcaption { margin-top: .45rem; font-family: var(--font-ui); font-size: .82rem; color: var(--ink-3); }

/* ------------------------------------------------------------ Ein Satz, vier Lesarten */
.lesarten { max-width: 52rem; margin: 1.5rem auto; }
.lesarten-vers { margin: 0 0 1.2rem; text-align: center; }
.lesarten-vers p { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 1.3rem + 2vw, 2.7rem); line-height: 1.15; color: var(--rubric); }
.lesarten-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.lesart { padding: 1.2rem 1.3rem 1.1rem; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.ist-bedienbar .lesart { min-height: 11.5rem; }
.lesart-name { margin: 0 0 .5rem; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.lesart-wortlaut { margin: 0 0 .6rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; }
.lesart-erklaerung { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* ------------------------------------------------------------ Das Mosaik des Irenäus */
.mosaik { max-width: 26rem; margin: 2rem auto; text-align: center; }
.mosaik-rahmen { padding: 14px; border-radius: 10px; background-color: var(--gold); background-size: 96px auto; box-shadow: inset 0 0 0 3px #6f5520, var(--shadow); }
.mosaik-bild { display: block; width: 100%; height: auto; border-radius: 4px; background: #e9d9a8; }
.stein { transform-box: fill-box; transform-origin: center; transform: rotate(var(--r)); transition: transform 1.1s cubic-bezier(.5, 0, .2, 1) var(--t); }
[data-gewaehlt="fuchs"] .stein { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * -1)); }
.stein--g { fill: #d7b25a; }
.stein--o { fill: #b8862b; }
.stein--l { fill: #22408f; }
.stein--r { fill: #b8352f; }
.stein--w { fill: #f1e6cf; }
.stein--b { fill: #6b4423; }
.stein--k { fill: #1b1b26; }
.mosaik .wahl { margin-top: 1rem; }
.mosaik figcaption { margin-top: .4rem; }
.mosaik-text { margin: 0 0 .4rem; font-family: var(--font-ui); font-size: .9rem; line-height: 1.5; color: var(--ink-2); }

/* ------------------------------------------------------------ Das Apostelkonzil */
.konzil { list-style: none; max-width: 68rem; margin: 1.5rem auto; padding: 0; display: grid; gap: .8rem; counter-reset: konzil; }
@media (min-width: 900px) { .konzil { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.js .konzil-schritt.zeigen { transition-delay: calc(var(--i, 0) * .15s); }
.konzil-schritt { position: relative; padding: 1.2rem 1.1rem 1rem; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.konzil-nr { margin: 0; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--night); color: var(--gold-hell); font-family: var(--font-ui); font-weight: 700; }
.konzil-titel { margin: .6rem 0 .4rem; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; }
.konzil-schritt blockquote { margin: 0; }
.konzil-schritt blockquote p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.08rem; line-height: 1.4; }
.konzil-stelle { margin: .35rem 0 .5rem; font-family: var(--font-ui); font-size: .8rem; }
.konzil-text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.konzil-schritt:nth-child(3) { box-shadow: inset 0 0 0 2px var(--gold-line); background: var(--gold-tint); }

/* ------------------------------------------------------------ Die Zeugen */
.zeugen-reihe { list-style: none; max-width: var(--breit); margin: 0 auto clamp(2.5rem, 6vw, 3.5rem); padding: 0; display: grid; gap: .9rem; }
@media (min-width: 700px) { .zeugen-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .zeugen-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zeuge { display: flex; flex-direction: column; padding: 1.2rem 1.15rem 1.05rem; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); border-top: 4px solid var(--green); }
.zeuge-zeit { margin: 0; font-family: var(--font-ui); font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--green); }
.zeuge-name { margin: .15rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; }
.zeuge .kernsatz p { font-size: 1.12rem; }
/* Nebeneinander stehen Name, Zitat und Text jeder Karte auf gleicher Höhe */
@media (min-width: 700px) { .zeuge { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; } }
.zeuge-text { margin: 0; padding-top: .3rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------ Gründe und Sorgen */
.sorgen-liste { list-style: none; max-width: 64rem; margin: 0 auto; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 860px) { .sorgen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; } }
.js .sorge.zeigen { transition-delay: calc(var(--i, 0) * .1s); }
.sorge { padding: 1.3rem 1.3rem 1.1rem; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.sorge-satz { margin: 0 0 .7rem; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; font-style: italic; color: var(--ink); }
.sorge-antwort p { margin: 0; font-size: .98rem; line-height: 1.62; color: var(--ink-2); hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------ Einwände */
.einwaende-liste { list-style: none; max-width: 46rem; margin: 0 auto; padding: 0; display: grid; gap: .6rem; }
.einwand details { border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.einwand details[open] { box-shadow: inset 0 0 0 2px var(--gold-line); }
.einwand summary { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; cursor: pointer; list-style: none; border-radius: 14px; }
.einwand summary::-webkit-details-marker { display: none; }
.einwand-satz { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.3; font-style: italic; }
.einwand-auf { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--rule-strong); font-family: var(--font-ui); transition: transform .25s ease; }
details[open] .einwand-auf { transform: rotate(45deg); }
.einwand-antwort { padding: 0 1.1rem 1.1rem; }
.einwand-antwort p { margin: 0; font-size: 1rem; line-height: 1.65; hyphens: auto; -webkit-hyphens: auto; }
details[open] .einwand-antwort { animation: tafel-auf .3s ease both; }

/* ------------------------------------------------------------ Für das Gespräch */
.gespraech-spalten { max-width: 64rem; margin: 0 auto; display: grid; gap: 1rem; }
@media (min-width: 860px) { .gespraech-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } }
.gespraech-spalte { padding: 1.4rem 1.35rem 1rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.gespraech-titel { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; line-height: 1.2; }
.gespraech-spalte .prose-list li { font-size: .98rem; line-height: 1.58; }
.gespraech .abschnitt-lead { max-width: 44rem; }
.gespraech .prose { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

/* ------------------------------------------------------------ Zum Mitnehmen */
.mitnehmen-liste { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1rem; }
.mitnehmen-frage { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: .2rem 1.1rem; align-items: baseline; padding: 1.2rem 1.2rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(236, 210, 142, .2); }
.js .mitnehmen-frage.zeigen { transition-delay: calc(var(--i, 0) * .18s); }
.mitnehmen-nr { grid-row: span 2; font-family: var(--font-kapitalis); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--gold-hell); text-align: center; }
.mitnehmen-text { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.15; color: #fff; }
.mitnehmen-antwort { margin: .3rem 0 0; color: var(--auf-nacht-2); line-height: 1.6; }
.mitnehmen-schluss {
  margin: 0 0 .8rem; text-align: center; font-family: var(--font-kapitalis); font-weight: 600; letter-spacing: .06em;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); color: var(--gold-hell); text-wrap: balance;
}
.mitnehmen-schluss .kreuz { display: inline-block; margin-right: .4em; vertical-align: -.02em; }
.mitnehmen-satz { margin: 0 auto; max-width: 36rem; text-align: center; font-size: 1.08rem; color: var(--auf-nacht); }
@media (max-width: 520px) { .mitnehmen-frage { grid-template-columns: 2.8rem minmax(0, 1fr); } .mitnehmen-nr { font-size: 2rem; } .mitnehmen-text { font-size: 1.4rem; } }

/* Abstand zum Weiterlesen nach dem letzten Nachtabschnitt */
.mitnehmen + .artikel-weiter { border-top: 0; }

/* ------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  .sola-frage { animation: none; color: transparent; }
  .js .quelle .quelle-strom { stroke-dashoffset: 0; transition: none; }
  .zeit::after { height: calc(100% - 1.6rem); }
  .stein { transition: none; }
  ::view-transition-group(*) { animation: none; }
}
@media (forced-colors: active) {
  .sola-frage { color: CanvasText; -webkit-text-stroke: 0; }
  .wahl button[aria-pressed="true"] { outline: 2px solid CanvasText; }
}