/* Gemeinsame Grundlagen aller Seiten von tuespetrus.de: Farben (hell und dunkel), Schriften, Grundelemente,
   Wortmarke, Brotkrumen und Fußzeile. Die Rezension ergänzt styles.css, die Startseite startseite.css. */
:root {
  --paper: #fafaf8;
  --sheet: #ffffff;
  --ink: #1c2130;
  --ink-2: #4a5063;
  --ink-3: #686f81;         /* Kontrast mind. 4,5:1 auf --paper und --sheet */
  --rule: #e2e1dc;
  --rule-strong: #cfcdc5;
  --rubric: #a3242b;        /* Bibel: Rubrikenrot */
  --rubric-tint: rgba(163, 36, 43, 0.08);
  --rubric-line: rgba(163, 36, 43, 0.35);
  --violet: #5a3e8d;        /* Katechismus */
  --violet-tint: rgba(90, 62, 141, 0.08);
  --violet-line: rgba(90, 62, 141, 0.35);
  --ochre: #85560d;         /* Zitat aus dem besprochenen Buch */
  --ochre-tint: rgba(133, 86, 13, 0.09);
  --ochre-line: rgba(133, 86, 13, 0.38);
  --green: #1a6a56;         /* Kirchenväter */
  --green-tint: rgba(26, 106, 86, 0.08);
  --green-line: rgba(26, 106, 86, 0.35);
  --backdrop: rgba(14, 17, 26, 0.42);
  --shadow: 0 1px 2px rgba(20, 24, 36, 0.06), 0 14px 36px rgba(20, 24, 36, 0.16);
  --topbar-bg: rgba(250, 250, 248, 0.9);

  /* Farben aus dem Kuppelmosaik des Petersdoms: Goldgrund, blaue Buchstaben, rotes Kreuz, Nachtblau der Laterne */
  --night: #0b1230;
  --night-2: #131c44;
  --night-3: #1e2a5c;
  --gold: #c9a24a;
  --gold-hell: #ecd28e;
  --gold-tief: #94711f;
  --gold-text: #7a5a12;     /* Gold als Schrift auf Papier, Kontrast mind. 4,5:1 */
  --gold-line: rgba(154, 118, 36, 0.4);
  --gold-tint: rgba(201, 162, 74, 0.12);
  --lapis: #22408f;
  --kreuz: #c8343b;
  --auf-nacht: #f2ecdd;
  --auf-nacht-2: #cfc7b3;
  --auf-nacht-3: #a49c88;

  --font-display: "EB Garamond", Garamond, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Literata", Georgia, Cambria, "Times New Roman", serif;
  --font-ui: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-kapitalis: "Cinzel", "Trajan Pro", "EB Garamond", Garamond, Georgia, serif;

  --measure: 38rem;
  --margin-col: 7rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131519;
    --sheet: #1b1e25;
    --ink: #ebe8e1;
    --ink-2: #bdb9b0;
    --ink-3: #8f8c86;
    --rule: #2b2f38;
    --rule-strong: #3a3f4a;
    --rubric: #f08a86;
    --rubric-tint: rgba(240, 138, 134, 0.12);
    --rubric-line: rgba(240, 138, 134, 0.4);
    --violet: #bba5ee;
    --violet-tint: rgba(187, 165, 238, 0.12);
    --violet-line: rgba(187, 165, 238, 0.4);
    --ochre: #e2b566;
    --ochre-tint: rgba(226, 181, 102, 0.12);
    --ochre-line: rgba(226, 181, 102, 0.42);
    --green: #6fcaaf;
    --green-tint: rgba(111, 202, 175, 0.12);
    --green-line: rgba(111, 202, 175, 0.4);
    --backdrop: rgba(0, 0, 0, 0.55);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);
    --topbar-bg: rgba(19, 21, 25, 0.88);
    --night: #080d24;
    --night-2: #10183a;
    --night-3: #1a2552;
    --gold-text: #e0bd6c;
    --gold-line: rgba(224, 189, 108, 0.42);
    --gold-tint: rgba(224, 189, 108, 0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131519;
  --sheet: #1b1e25;
  --ink: #ebe8e1;
  --ink-2: #bdb9b0;
  --ink-3: #8f8c86;
  --rule: #2b2f38;
  --rule-strong: #3a3f4a;
  --rubric: #f08a86;
  --rubric-tint: rgba(240, 138, 134, 0.12);
  --rubric-line: rgba(240, 138, 134, 0.4);
  --violet: #bba5ee;
  --violet-tint: rgba(187, 165, 238, 0.12);
  --violet-line: rgba(187, 165, 238, 0.4);
  --ochre: #e2b566;
  --ochre-tint: rgba(226, 181, 102, 0.12);
  --ochre-line: rgba(226, 181, 102, 0.42);
  --green: #6fcaaf;
  --green-tint: rgba(111, 202, 175, 0.12);
  --green-line: rgba(111, 202, 175, 0.4);
  --backdrop: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px rgba(0, 0, 0, 0.5);
  --topbar-bg: rgba(19, 21, 25, 0.88);
  --night: #080d24;
  --night-2: #10183a;
  --night-3: #1a2552;
  --gold-text: #e0bd6c;
  --gold-line: rgba(224, 189, 108, 0.42);
  --gold-tint: rgba(224, 189, 108, 0.12);
  color-scheme: dark;
}

/* ------------------------------------------------------------ Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* overflow-anchor: none – nach Zurück/Vor stellt der Browser genau die gemerkte Stelle wieder her. Mit Scroll-Anker
   richtet Chrome sie an einem Element aus, und das ist hier oft gerade in Bewegung (Einblenden, Scroll-Szenen) – man
   landet dann versetzt. Alle Bilder haben feste Maße, beim Laden springt also nichts. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-anchor: none; }
/* Bei offenem Dialog steht die Seite still. scrollbar-gutter hält den Platz der Scrollleiste frei, sonst rückt die
   Seite bei immer sichtbaren Scrollleisten (macOS „Immer“, Windows) um deren Breite zur Seite. */
html.no-scroll { overflow: hidden; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 0.99rem + 0.3vw, 1.1875rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.site { min-height: 100vh; }
a { color: inherit; }
cite { font-style: italic; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--rubric); outline-offset: 3px; border-radius: 4px; }
:is(a, button, input, select, [tabindex]):focus-visible { scroll-margin-block: 5rem; }
main[tabindex="-1"] { scroll-margin-top: 4rem; }
.neuer-tab-icon { margin-inline-start: .2em; font: .85em var(--font-ui); white-space: nowrap; }

.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 1000;
  background: var(--sheet); color: var(--ink); padding: .5rem .9rem; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600;
  transform: translateY(-300%);
}
.skip:focus { transform: none; box-shadow: var(--shadow); }
.js .zeigen:focus-within { opacity: 1; transform: none; }
.nobr { white-space: nowrap; }

/* Links auf andere Websites: leiser als die Verweise mit Vorschau, fein gepunktet in der halb durchsichtigen Farbe
   der Schrift (so passt es auf Papier wie auf Nachtblau). Gilt auf allen Seiten und geht den Linkfarben der einzelnen
   Abschnitte vor. Nicht gemeint sind Knöpfe, Links mit eigenem Symbol oder Bild (Buchempfehlungen, Vorschau,
   Steckbrief, Medaillons) und Links auf tuespetrus.de selbst. */
a[href^="http"]:not([href*="//tuespetrus.de"]):not(.ref, .knopf, .rh-knopf, :has(svg, img)) {
  text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  text-underline-offset: .24em;
}
a[href^="http"]:not([href*="//tuespetrus.de"]):not(.ref, .knopf, .rh-knopf, :has(svg, img)):hover { text-decoration-color: currentColor; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ Kopfleiste (Startseite und Textseiten) */
.tp-kopf {
  position: sticky; top: 0; z-index: 50; color: var(--auf-nacht);
  background: rgba(11, 18, 48, 0.94);
  -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid rgba(236, 210, 142, 0.18);
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .35s ease, border-color .35s ease;
}
.tp-kopf-inner {
  max-width: 72rem; margin: 0 auto; min-height: 3.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem max(1rem, env(safe-area-inset-right, 0px)) .5rem max(1rem, env(safe-area-inset-left, 0px));
}
.tp-kopf .tp-marke { color: var(--gold-hell); }
.tp-kopf-nav { display: flex; align-items: center; gap: .15rem; }
.tp-kopf-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.tp-kopf-nav a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: .3rem .7rem; border-radius: 999px;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .02em;
  color: var(--auf-nacht); text-decoration: none; white-space: nowrap;
}
.tp-kopf-nav a:hover { background: rgba(236, 210, 142, 0.14); color: var(--gold-hell); }
/* Zwei Zeilen je Seite: klein das Wort über dem Titel der Seite („Ort“), darunter der Name („Petersdom“) */
.tp-kopf-nav > ul a { flex-direction: column; justify-content: center; gap: .05rem; padding-block: .25rem; border-radius: 12px; line-height: 1.15; }
.tp-kopf-wort { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); opacity: .82; }
.tp-kopf-name { font-size: .84rem; }
.tp-kopf-suche {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; margin-left: .25rem; border-radius: 999px;
  color: var(--auf-nacht); -webkit-tap-highlight-color: transparent;
}
.tp-kopf-suche:hover, .tp-kopf-suche[aria-current="page"] { background: rgba(236, 210, 142, 0.14); color: var(--gold-hell); }
.tp-kopf-suche svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.tp-kopf :focus-visible { outline-color: var(--gold-hell); }
/* Über dem Titelbild der Startseite: durchsichtig, bis man daran vorbeigescrollt hat */
.tp-kopf--ueber { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tp-kopf--ueber:is(.ist-fest, :has([data-menue][aria-expanded="true"])) { background: rgba(11, 18, 48, 0.9); border-bottom-color: rgba(236, 210, 142, 0.18); -webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px); }
/* Knopf „Inhalt“ (kopfleiste({ inhalt }), src/verzeichnis.js): auf schmalen Bildschirmen öffnet er das Verzeichnis */
.tp-inhalt-knopf { display: none; }
@media (max-width: 1179px) {
  .tp-inhalt-knopf:not([hidden]) {
    display: inline-flex; align-items: center; min-height: 2.3rem; margin-left: .35rem; padding: .3rem .9rem; border-radius: 999px;
    border: 1px solid rgba(236, 210, 142, 0.45); background: transparent; color: var(--gold-hell); cursor: pointer;
    font-family: var(--font-ui); font-size: .875rem; font-weight: 600; letter-spacing: .02em; -webkit-tap-highlight-color: transparent;
  }
  .tp-inhalt-knopf:hover, .tp-inhalt-knopf[aria-expanded="true"] { background: rgba(236, 210, 142, 0.14); }
}
/* Menü (src/menue.js): schmaler als 1180 px klappt der Knopf alle Seiten unter der Kopfleiste auf; ohne Skript bleibt
   er verborgen, dann stehen die Seiten in der Fußzeile. Die Suche bleibt immer in der Kopfleiste. */
.tp-menue-knopf, .tp-menue { display: none; }
@media (max-width: 1179px) {
  .tp-kopf-breit { display: none; }
  .tp-menue-knopf:not([hidden]) {
    display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.4rem; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--auf-nacht); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .tp-menue-knopf:hover, .tp-menue-knopf[aria-expanded="true"] { background: rgba(236, 210, 142, 0.14); color: var(--gold-hell); }
  .tp-menue-knopf svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; overflow: visible; }
  .tp-menue-knopf path { transition: transform .25s ease, opacity .2s ease; }
  .tp-menue-oben { transform-origin: 12px 7px; }
  .tp-menue-unten { transform-origin: 12px 17px; }
  .tp-menue-knopf[aria-expanded="true"] .tp-menue-oben { transform: translateY(5px) rotate(45deg); }
  .tp-menue-knopf[aria-expanded="true"] .tp-menue-mitte { opacity: 0; }
  .tp-menue-knopf[aria-expanded="true"] .tp-menue-unten { transform: translateY(-5px) rotate(-45deg); }
  .tp-menue:not([hidden]) {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
    padding: .5rem max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1rem, env(safe-area-inset-left, 0px));
    background: var(--night); border-bottom: 1px solid rgba(236, 210, 142, 0.18);
    box-shadow: 0 18px 36px rgba(4, 7, 20, 0.35);
    animation: tp-menue-auf .22s ease-out;
  }
  .tp-menue ul { display: grid; gap: 0; max-width: 40rem; margin: 0 auto; }
  .tp-menue li + li { border-top: 1px solid rgba(236, 210, 142, 0.12); }
  .tp-menue a { display: flex; min-height: 3rem; padding: .7rem .75rem; border-radius: 10px; font-size: 1.05rem; white-space: normal; }
}
@keyframes tp-menue-auf { from { opacity: 0; transform: translateY(-.4rem); } }
@media (max-width: 599px) {
  .tp-kopf .tp-marke-zeile { display: none; }
}
/* Sehr schmal (320px): Suche und Inhalt nur noch über das Menü, damit nichts über den Rand ragt */
@media (max-width: 359px) {
  .tp-kopf-nav:has(> [data-menue]:not([hidden])) > .tp-kopf-suche { display: none; }
}

/* ------------------------------------------------------------ Textseiten (Impressum, Fehlerseite) */
.tp-textseite { min-height: 100vh; display: flex; flex-direction: column; }
.tp-text {
  flex: 1; width: 100%; max-width: 44rem; margin: 0 auto;
  padding: 2.5rem max(1.25rem, env(safe-area-inset-right, 0px)) 1rem max(1.25rem, env(safe-area-inset-left, 0px));
}
.tp-text-titel {
  margin: 0 0 1.25rem; font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.2rem); line-height: 1.05; letter-spacing: -.01em;
}
.tp-text h2 {
  margin: 2.5rem 0 .9rem; padding-top: 1.2rem; border-top: 1px solid var(--rule-strong);
  font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; line-height: 1.2;
}
.tp-text section { scroll-margin-top: 4.5rem; }
.tp-text p, .tp-text li { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }
.tp-text p { margin: 0 0 .9rem; }
.tp-text a { text-decoration-color: var(--gold-line); text-underline-offset: .18em; }
.tp-text a:hover { color: var(--gold-text); text-decoration-color: currentColor; }
.tp-text-sub { margin: 1.4rem 0 .4rem; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; }
.tp-text .eyebrow, .eyebrow {
  margin: 0 0 .6rem; font-family: var(--font-ui); font-size: .75rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--rubric);
}
.tp-nachweise { margin: 0 0 1rem; padding-left: 1.1rem; display: grid; gap: .6rem; font-size: .95rem; }
.text-bild { display: inline-block; overflow: visible; }

/* ------------------------------------------------------------ Wortmarke und Kuppel-Zeichen */
.tp-marke {
  display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none;
  border-radius: 8px; -webkit-tap-highlight-color: transparent;
}
.tp-zeichen { width: 1.9rem; height: 1.9rem; flex: none; color: var(--gold); }
.tp-zeichen .tp-zeichen-kreuz { stroke: var(--kreuz); }
.tp-wortmarke { display: block; height: .82rem; width: auto; fill: currentColor; }
.tp-marke-text { display: grid; gap: .28rem; }
.tp-marke-zeile {
  font-family: var(--font-ui); font-size: .62rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1; opacity: .78;
}

/* ------------------------------------------------------------ Brotkrumen */
.tp-pfad { margin: 0 0 1.1rem; font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3); }
.tp-pfad ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .45rem; }
.tp-pfad li { display: inline-flex; align-items: center; gap: .45rem; }
.tp-pfad li + li::before { content: "›"; color: var(--rule-strong); }
.tp-pfad a { color: var(--ink-2); text-decoration: none; border-radius: 4px; }
.tp-pfad a:hover { color: var(--gold-text); text-decoration: underline; text-underline-offset: .2em; }

/* ------------------------------------------------------------ Fußzeile */
.tp-fuss {
  position: relative; margin-top: 3rem; background: var(--night); color: var(--auf-nacht-2);
  font-family: var(--font-ui); font-size: .9rem; line-height: 1.55;
  padding: 3rem max(1.25rem, env(safe-area-inset-right, 0px)) calc(2.25rem + env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
}
/* Goldener Mosaikstreifen als oberer Abschluss, wie der Fries unter der Kuppel */
.tp-fuss::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--mosaik-gold, linear-gradient(90deg, var(--gold-tief), var(--gold-hell), var(--gold), var(--gold-hell), var(--gold-tief)));
  background-size: 96px auto;
}
.tp-fuss-inner { max-width: 72rem; margin: 0 auto; display: grid; gap: 2rem; }
.tp-fuss .tp-marke { color: var(--gold-hell); }
.tp-fuss-satz { max-width: 22rem; margin: 1.1rem 0 0; font-family: var(--font-body); font-size: .95rem; line-height: 1.6; color: var(--auf-nacht-2); }
.tp-fuss-mehr { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .9rem 0 0; }
.tp-fuss-mehr a { color: var(--gold-hell); text-decoration: underline; text-decoration-color: rgba(236, 210, 142, 0.4); text-underline-offset: .2em; }
.tp-fuss-nav { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tp-fuss-titel { margin: 0 0 .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.tp-fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tp-fuss a { color: var(--auf-nacht); text-decoration: none; border-radius: 4px; }
.tp-fuss a:hover { color: var(--gold-hell); text-decoration: underline; text-underline-offset: .2em; }
.tp-fuss :focus-visible { outline-color: var(--gold-hell); }
/* Link auf die Seite, auf der man ist (scripts/build.mjs: aktuelleSeite): kein Neuladen, golden als „hier“ */
a[aria-current="page"] { pointer-events: none; cursor: default; }
.tp-fuss a[aria-current="page"], .tp-kopf-nav a[aria-current="page"] { color: var(--gold-hell); }
.tp-fuss-klein { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(236, 210, 142, 0.16); font-size: .8rem; color: var(--auf-nacht-3); }
/* Stand der Seite: über dem Kleingedruckten, mit derselben Trennlinie */
.tp-fuss-stand { margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(236, 210, 142, 0.16); font-size: .85rem; color: var(--auf-nacht-2); }
.tp-fuss-stand time { color: var(--gold-hell); font-weight: 600; white-space: nowrap; }
.tp-fuss-stand + .tp-fuss-klein { margin-top: -1.4rem; padding-top: 0; border-top: 0; }
.tp-fuss-klein a { color: var(--auf-nacht-2); text-decoration: underline; text-decoration-color: rgba(236, 210, 142, 0.3); text-underline-offset: .15em; }
.tp-fuss-bild { margin: 0; display: grid; gap: .3rem; }
.tp-fuss-bild li { font-size: .78rem; line-height: 1.45; color: var(--auf-nacht-3); }
@media (min-width: 820px) {
  .tp-fuss-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 3rem; }
  .tp-fuss-klein, .tp-fuss-stand { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ Abschnitte (Startseite und Themenseiten) */
.abschnitt-kopf { max-width: 46rem; margin: 0 auto clamp(2rem, 5vw, 3.25rem); text-align: center; }
.abschnitt-kopf .eyebrow { color: var(--gold-text); }
.abschnitt-titel {
  margin: 0; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.7rem); line-height: 1.05; letter-spacing: -.01em;
}
.abschnitt-lead { margin: 1.1rem auto 0; max-width: 38rem; font-size: 1.08em; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.nachweis { font-family: var(--font-ui); font-size: .72rem; line-height: 1.4; }
.nachweis a { color: inherit; text-decoration-color: currentColor; text-underline-offset: .15em; }
.pfeil { width: 1em; height: 1em; flex: none; transition: transform .25s ease; }
.kreuz { width: .78em; height: .78em; flex: none; fill: var(--kreuz); filter: drop-shadow(0 1px 0 rgba(255, 240, 200, .45)); }
/* Leitwort: ein Satz aus der Schrift oder von einem frühen Zeugen, groß und mittig (Startseite: 1 Petr 3,15–16) */
.leitwort { max-width: 52rem; margin: 0 auto; text-align: center; }
.leitwort p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.55rem); line-height: 1.28; text-wrap: balance; }
.leitwort cite { display: block; margin-top: 1rem; font-family: var(--font-ui); font-style: normal; font-weight: 700; font-size: .8rem; letter-spacing: .16em; color: var(--gold-text); }
/* Schluss eines Abschnitts, kleiner, über einer feinen goldenen Linie (Startseite: 1 Petr 4,11) */
.leitwort--schluss { max-width: 40rem; margin-top: clamp(2.5rem, 6vw, 3.5rem); padding-top: clamp(2rem, 5vw, 2.75rem); border-top: 1px solid var(--gold-line); }
.leitwort--schluss p { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); line-height: 1.35; }
/* Knopf, der zu einer anderen Seite führt */
.knopf {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .65rem 1.3rem; border-radius: 999px;
  background: var(--night); color: var(--gold-hell); text-decoration: none; box-shadow: var(--shadow);
  font-family: var(--font-ui); font-size: .95rem; font-weight: 700; letter-spacing: .01em;
  transition: background-color .2s ease, transform .2s ease;
}
.knopf:hover { background: var(--night-3); }
.knopf:hover .pfeil { transform: translateX(4px); }
.knopf:focus-visible { outline-color: var(--gold-text); }
.knopf--hell:focus-visible { outline-color: var(--gold-hell); }
.knopf--hell { background: var(--gold-hell); color: var(--night); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.knopf--hell:hover { background: #f6e3ae; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .knopf:not(.knopf--hell) { background: var(--night-3); box-shadow: inset 0 0 0 1px var(--gold-line); }
  :root:not([data-theme="light"]) .knopf:not(.knopf--hell):hover { background: #24316a; }
}
:root[data-theme="dark"] .knopf:not(.knopf--hell) { background: var(--night-3); box-shadow: inset 0 0 0 1px var(--gold-line); }
/* Einblenden beim Scrollen (src/zeigen.js); ohne Skript ist alles sofort sichtbar */
.js .zeigen { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .zeigen.ist-sichtbar { opacity: 1; transform: none; }
.js.zurueck .zeigen { transform: none; }

/* ------------------------------------------------------------ Weniger Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .js .zeigen { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Lesefortschritt (src/fortschritt.js) */
.lesefortschritt { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); z-index: 60; height: 3px; pointer-events: none; }
.lesefortschritt span {
  display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell));
}

.tp-fuss::before, .mosaik-gold, .wort-text::before { background-image: url(/bilder/mosaik-gold.7a156f7e4b.webp); background-image: image-set(url(/bilder/mosaik-gold.38f39f3526.avif) type("image/avif"), url(/bilder/mosaik-gold.7a156f7e4b.webp) type("image/webp")); }
.mosaik-blau { background-image: url(/bilder/mosaik-blau.3eec9187ff.webp); background-image: image-set(url(/bilder/mosaik-blau.860c7c2c2b.avif) type("image/avif"), url(/bilder/mosaik-blau.3eec9187ff.webp) type("image/webp")); }