/* 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; }
html.no-scroll { overflow: hidden; }
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); }
.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ü auf dem Handy (src/menue.js): der Knopf klappt alle Seiten unter der Kopfleiste auf. „Beiträge“ steht dann nur im
   Menü; ohne Skript bleibt der Knopf verborgen und „Beiträge“ in der Kopfleiste. */
.tp-menue-knopf, .tp-menue { display: none; }
@media (max-width: 659px) {
  .tp-kopf-breit { display: none; }
  .tp-kopf-nav:has(.tp-menue-knopf:not([hidden])) .tp-kopf-beitraege { 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; }
  .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; }
  .tp-kopf-nav > ul a { padding-inline: .6rem; }
}
/* Sehr schmal (320px): nur noch der Knopf, damit nichts über den Rand ragt; „Beiträge“ steht dann im Menü */
@media (max-width: 359px) {
  .tp-kopf-nav:has(> [data-menue]:not([hidden])) > ul { 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-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, 1.4fr); 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)); }
/* 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; }
}

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