/* ==========================================================================
   Die Glocke digital – Gestaltung
   Angelehnt an das gedruckte Heft: Glockenblau, abgerundete Bildrahmen,
   kursive Überschriften. Ausgelegt auf WCAG 2.1 AA / 2.2.

   Aufbau: 1 Schriften · 2 Werte (Farben, Stufen) · 3 Grundlagen · 4 Knöpfe
   5 Kopf · 6 Leichte Sprache · 7 Startseite · 8 Kacheln · 9 Artikel
   10 Übersicht/Hilfe/Fehler · 11 Fuß · 12 Dialog · 13 Vorlese-Leiste
   14 Bildbetrachter · 15 Bewegung/Druck
   ========================================================================== */

/* ---------- 1 Schriften (selbst gehostet, SIL Open Font License) ---------- */
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- 2 Werte ----------
   Alles, was sich zwischen Hell, Dunkel und Kontrast unterscheidet, steht hier.
   Die übrigen Regeln greifen nur auf diese Werte zu.
   Kontraste (WCAG): Text ≥ 4,5:1, Bedienrahmen und Symbole ≥ 3:1. */
:root {
  --blau: #5990ba;            /* Glockenblau aus Heft und Website – Rahmen, Linien, Symbole */
  --blau-tief: #2c5c84;       /* Text-Blau, 7,1:1 auf Weiß */
  --blau-nacht: #1c3d5a;      /* Vorlese-Leiste */
  --blau-band: #2c5c84;       /* Blaues Kapitel-Band und Fußzeile */
  --blau-hauch: #eef4f9;
  --blau-zart: #d6e5f1;
  --gold: #e7b43c;
  --hintergrund: #ffffff;
  --flaeche: #ffffff;
  --flaeche-2: #f6f9fc;
  --text: #1d2933;
  --text-leise: #485766;      /* 7,4:1 auf Weiß */
  --linie: #d3dde6;           /* Trennlinien (nicht für Bedienelemente) */
  --rahmen: #7a8c9e;          /* Rahmen von Bedienelementen, 3,5:1 auf Weiß */
  --markierung: #fff0b3;      /* vorgelesener Absatz */
  --gelb-hg: #fff3cf;         /* Hinweise zur Leichten Sprache */
  --gelb-linie: #f0d68a;
  --papier-hg: #f4eee3;       /* Kapitel „gestern und heute“ */
  --papier-linie: #e3d8c4;
  --papier-akzent: #9a7b4f;
  --schalter-bahn: #e3e9ef;
  --fokus-innen: #1d2933;
  --fokus-aussen: #ffbf47;
  --knopf-text: #ffffff;
  --knopf-hover: #1c3d5a;
  --knopf-hover-text: #ffffff;
  --logo-filter: none;
  --schatten: 0 1px 2px rgba(28, 61, 90, .06), 0 6px 22px rgba(28, 61, 90, .08);
  --schatten-hoch: 0 2px 4px rgba(28, 61, 90, .08), 0 14px 38px rgba(28, 61, 90, .16);

  --schrift-text: "Work Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --schrift-titel: "Lora", Georgia, "Times New Roman", serif;
  --zeilen: 1.65;
  --absatz: 1.1em;
  --wortabstand: normal;
  --breit: 78rem;
  --text-breite: 41rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --leiste-h: 7rem;           /* wird per JavaScript auf die echte Höhe der Vorlese-Leiste gesetzt */

  /* Rundungen: klein (Symbole, Bildchen), mittel (Kästen), groß (Kacheln), sehr groß (Dialog) */
  --r-s: 8px;
  --r-m: 14px;
  --radius: 18px;
  --r-l: 28px;

  /* Schriftstufen – sieben Größen für die ganze Seite */
  --s-2: .8rem;
  --s-1: .9rem;
  --s0: 1rem;
  --s1: 1.2rem;
  --s2: 1.45rem;
  --s3: 1.8rem;
  --s4: 2.3rem;
  --s5: 3rem;
  color-scheme: light;
}

/* Dunkel – nach Geräteeinstellung (solange nicht „Hell“ oder „Kontrast“ gewählt ist) … */
/* Dunkel nach Geräte-Einstellung nur, wenn jemand ausdrücklich „Wie mein Gerät“ wählt – Standard ist hell */
@media (prefers-color-scheme: dark) {
  :root[data-farben="auto"] {
    --blau-tief: #9cc5e6; --blau-nacht: #0e2233; --blau-band: #1c3d5a; --blau-hauch: #172634; --blau-zart: #22384b;
    --hintergrund: #0f171e; --flaeche: #16212b; --flaeche-2: #121c25;
    --text: #e7eef4; --text-leise: #aebdca; --linie: #2b3b49; --rahmen: #687f95; --markierung: #4a3f12;
    --gelb-hg: #33291a; --gelb-linie: #5a4a26; --papier-hg: #1d1a15; --papier-linie: #3a3226; --papier-akzent: #c9a56f;
    --schalter-bahn: #2b3b49;
    --fokus-innen: #ffffff; --knopf-text: #0f171e; --knopf-hover: #e7eef4; --knopf-hover-text: #0f171e;
    --logo-filter: brightness(1.5) saturate(.9);
    --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten-hoch: 0 10px 30px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
/* … oder fest gewählt (gleiche Werte – CSS kann einen Block nicht an zwei Stellen einbinden) */
:root[data-farben="dunkel"] {
  --blau-tief: #9cc5e6; --blau-nacht: #0e2233; --blau-band: #1c3d5a; --blau-hauch: #172634; --blau-zart: #22384b;
  --hintergrund: #0f171e; --flaeche: #16212b; --flaeche-2: #121c25;
  --text: #e7eef4; --text-leise: #aebdca; --linie: #2b3b49; --rahmen: #687f95; --markierung: #4a3f12;
  --gelb-hg: #33291a; --gelb-linie: #5a4a26; --papier-hg: #1d1a15; --papier-linie: #3a3226; --papier-akzent: #c9a56f;
  --schalter-bahn: #2b3b49;
  --fokus-innen: #ffffff; --knopf-text: #0f171e; --knopf-hover: #e7eef4; --knopf-hover-text: #0f171e;
  --logo-filter: brightness(1.5) saturate(.9);
  --schatten: 0 1px 2px rgba(0,0,0,.4); --schatten-hoch: 0 10px 30px rgba(0,0,0,.5);
  color-scheme: dark;
}
/* Starker Kontrast: Schwarz, Weiß, Gelb */
:root[data-farben="kontrast"] {
  --blau: #ffe14d; --blau-tief: #ffe14d; --blau-nacht: #000000; --blau-band: #000000; --blau-hauch: #000000; --blau-zart: #000000;
  --gold: #ffe14d; --hintergrund: #000000; --flaeche: #000000; --flaeche-2: #000000;
  --text: #ffffff; --text-leise: #ffffff; --linie: #ffffff; --rahmen: #ffffff; --markierung: #004d99;
  --gelb-hg: #000000; --gelb-linie: #ffe14d; --papier-hg: #000000; --papier-linie: #ffffff; --papier-akzent: #ffe14d;
  --schalter-bahn: #000000;
  --fokus-innen: #ffffff; --fokus-aussen: #00b7ff; --knopf-text: #000000; --knopf-hover: #ffffff; --knopf-hover-text: #000000;
  --logo-filter: brightness(0) invert(1);
  --schatten: none; --schatten-hoch: none;
  color-scheme: dark;
}

/* Schriftgröße & Zeilenabstand (Einstellung „Schrift und Farben“) */
html { font-size: 100%; }
:root[data-schrift="gross"] { font-size: 118.75%; }
:root[data-schrift="sehr-gross"] { font-size: 137.5%; }
:root[data-abstand="weit"] { --zeilen: 1.95; --absatz: 1.5em; --wortabstand: .08em; }

/* ---------- 3 Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.1875rem;
  line-height: var(--zeilen);
  word-spacing: var(--wortabstand);
  overflow-wrap: break-word;
  -webkit-hyphens: auto; hyphens: auto;
  -webkit-font-smoothing: antialiased;
}
/* Platz für die Vorlese-Leiste, damit sie nichts verdeckt (auch beim Springen zu Fokus/Ankern) */
body.leiste-offen { padding-bottom: calc(var(--leiste-h) + 1.5rem); }
html:has(body.leiste-offen) { scroll-padding-bottom: calc(var(--leiste-h) + 1rem); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-tief); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: .16em; }
h1, h2, h3 { font-family: var(--schrift-titel); font-style: italic; line-height: 1.2; color: var(--blau-tief); -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
button { font: inherit; color: inherit; }
kbd { font-family: inherit; font-size: .85em; font-weight: 700; padding: .1em .45em; border: 2px solid var(--rahmen); border-bottom-width: 3px; border-radius: var(--r-s); background: var(--flaeche-2); }
abbr[title] { text-decoration: underline dotted; }

:focus-visible {
  outline: 3px solid var(--fokus-innen);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--fokus-aussen);
  border-radius: var(--r-s);
}
main:focus, section[tabindex="-1"]:focus, div[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.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;
}
.ohne-js .nur-js { display: none !important; }
.klein { font-size: .85em; }

.sym { width: 1.25em; height: 1.25em; flex: none; }
.sym-gross { width: 2.4rem; height: 2.4rem; }

.sprung {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  background: var(--fokus-aussen); color: #000; font-weight: 700;
  padding: .9rem 1.4rem; border-radius: 0 0 var(--r-m) var(--r-m); text-decoration: none;
}
.sprung:focus { top: 0; }

.schmal { max-width: 46rem; margin: 0 auto; padding: 2.5rem var(--rand) 4rem; }

/* ---------- 4 Knöpfe ---------- */
.knopf[hidden] { display: none; }
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem; padding: .65em 1.35em;
  border: 2px solid transparent; border-radius: 999px;
  font-weight: 700; font-size: var(--s0); line-height: 1.2; text-decoration: none;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.knopf:active { transform: scale(.98); }
.knopf-voll { background: var(--blau-tief); color: var(--knopf-text); }
.knopf-voll:hover { background: var(--knopf-hover); color: var(--knopf-hover-text); }
.knopf-rand { border-color: var(--blau-tief); color: var(--blau-tief); background: var(--flaeche); }
.knopf-rand:hover { background: var(--blau-hauch); }
.knopf-leise { background: none; color: var(--blau-tief); text-decoration: underline; text-underline-offset: .2em; }
.knopf-gross { min-height: 3.5rem; font-size: 1.1rem; padding-inline: 1.6em; }
.knopf-symbol { width: 3.5rem; height: 3.5rem; min-height: 0; padding: 0; flex: none; }
.knopf-symbol .sym { width: 1.6rem; height: 1.6rem; }
.knopf-rund {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border: 2px solid var(--rahmen); border-radius: 50%; background: var(--flaeche); color: var(--blau-tief); cursor: pointer;
}
.knopf-rund:hover { border-color: var(--blau-tief); background: var(--blau-hauch); }

/* ---------- 5 Kopf ---------- */
/* Schmale Zeile ganz oben: zurück zur Website der Lebensgemeinschaft – sichtbar, aber zurückhaltend */
.dach { background: var(--flaeche-2); border-bottom: 1px solid var(--linie); }
.dach-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.dach-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; font-size: var(--s-1); color: var(--text-leise); text-decoration: none; }
.dach-link span[aria-hidden] { font-size: 1.3em; line-height: 1; color: var(--blau); }
.dach-link:hover { color: var(--blau-tief); text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 26rem) { .dach-lang { display: none; } }
.kopf { background: var(--flaeche); border-bottom: 6px solid var(--blau); position: relative; z-index: 10; }
.kopf-innen {
  max-width: var(--breit); margin: 0 auto; padding: .85rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
}
.marke { display: block; border-radius: var(--r-s); }
.marke img { height: 4rem; width: auto; filter: var(--logo-filter); }
.hauptnav ul { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.hauptnav a, .hauptnav button {
  display: inline-flex; align-items: center; gap: .45em; min-height: 3rem; padding: .5em 1em;
  border: 2px solid transparent; border-radius: 999px; background: none;
  color: var(--text); font-weight: 700; font-size: var(--s0); text-decoration: none; cursor: pointer;
}
.hauptnav a:hover, .hauptnav button:hover { background: var(--blau-hauch); color: var(--blau-tief); }
.hauptnav a[aria-current="page"] { color: var(--blau-tief); border-color: var(--blau-zart); background: var(--blau-hauch); }
.hauptnav .sym { color: var(--blau-tief); }
.knopf-ansicht { border-color: var(--blau-tief) !important; color: var(--blau-tief) !important; }

@media (max-width: 47.99rem) {
  .kopf-innen { padding-block: .7rem .5rem; justify-content: center; }
  .marke img { height: 3.1rem; }
  .hauptnav { width: 100%; }
  .hauptnav ul { display: grid; grid-template-columns: repeat(3, 1fr) 1.45fr; gap: .3rem; }   /* „Schrift und Farben“ braucht mehr Platz */
  .ohne-js .hauptnav ul { grid-template-columns: repeat(3, 1fr); }
  /* Bei großer Schrift zwei Reihen statt Gedränge oder waagerechtem Scrollen */
  :root[data-schrift="gross"] .hauptnav ul, :root[data-schrift="sehr-gross"] .hauptnav ul { grid-template-columns: repeat(2, 1fr); }
  .hauptnav a, .hauptnav button {
    flex-direction: column; gap: .15em; width: 100%; min-height: 3.6rem; padding: .35em .2em;
    border-radius: var(--r-m); font-size: var(--s-1); line-height: 1.2; text-align: center; justify-content: center;
  }
  .hauptnav .sym { width: 1.5em; height: 1.5em; }
}

/* ---------- 6 Leichte Sprache: eine Einstellung für die ganze Website ---------- */
:root[data-fassung="leicht"] .nur-standard,
:root:not([data-fassung="leicht"]) .nur-leicht,
:root[data-fassung="leicht"] .ls-aus,
:root:not([data-fassung="leicht"]) .ls-an { display: none !important; }

/* Leichte Sprache wird nicht am Zeilenende getrennt */
.fassung-leicht, .kachel-teaser-leicht, .buehne-leicht, .ls-fehlt, .ls-schalter { -webkit-hyphens: manual; hyphens: manual; }

/* Der Schalter: groß, mit Wort und Symbol – „An“ und „Aus“ stehen als Text, nicht nur als Farbe */
.ls-schalter {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 3rem; padding: .3rem .4rem .3rem 1rem;
  border: 2px solid var(--blau-tief); border-radius: 999px; background: var(--flaeche);
  color: var(--blau-tief); font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
}
.ls-schalter:hover { background: var(--blau-hauch); }
.ls-schalter-name { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.ls-schalter-name .sym { width: 1.5em; height: 1.5em; }
.ls-schalter-bahn {
  position: relative; display: inline-flex; align-items: center; width: 4.6rem; height: 2.2rem; border-radius: 999px;
  background: var(--schalter-bahn); box-shadow: inset 0 0 0 2px var(--rahmen);
  color: var(--text); font-size: var(--s-1); transition: background-color .2s;
}
.ls-schalter-knopf {
  position: absolute; left: .25rem; top: .25rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--flaeche); border: 2px solid var(--rahmen); transition: transform .2s ease;
}
.ls-schalter-bahn .ls-aus { margin-left: auto; margin-right: .55rem; }
.ls-schalter-bahn .ls-an { margin-left: .6rem; color: var(--knopf-text); }
.ls-schalter[aria-checked="true"] .ls-schalter-bahn { background: var(--blau-tief); box-shadow: inset 0 0 0 2px var(--blau-tief); }
.ls-schalter[aria-checked="true"] .ls-schalter-knopf { transform: translateX(2.4rem); border-color: var(--flaeche); }
:root[data-farben="kontrast"] .ls-schalter[aria-checked="true"] .ls-schalter-knopf { background: #000; border-color: #000; }

/* Artikel ohne Leichte Sprache – freundlicher Hinweis, nur wenn Leichte Sprache an ist */
.ls-fehlt {
  margin: 0 0 2rem; padding: 1.2rem 1.4rem; border-radius: var(--radius);
  background: var(--gelb-hg); border: 2px solid var(--gelb-linie); color: var(--text); font-size: 1.12rem; line-height: 1.6;
}
.ls-fehlt p { margin: 0 0 .8rem; }
.ls-fehlt p:last-child { margin-bottom: 0; }

/* Übersicht im Modus Leichte Sprache */
.merkmal-nicht-leicht { display: none; font-weight: 700; color: var(--text-leise); }
:root[data-fassung="leicht"] .merkmal-nicht-leicht { display: inline-flex; }
:root[data-fassung="leicht"] .merkmal-leicht { display: none; }
.kachel-teaser-leicht { color: var(--text); line-height: 1.6; }
:root[data-fassung="leicht"] .kachel.ohne-leicht .kachel-bild img { opacity: .7; }
.buehne-leicht { font-size: 1.3rem; line-height: 1.75; }

/* ---------- 7 Startseite: Bühne, Wegweiser, Themen ---------- */
.buehne {
  background:
    radial-gradient(90rem 30rem at 85% -10%, var(--blau-zart), transparent 60%),
    linear-gradient(180deg, var(--blau-hauch), var(--hintergrund) 85%);
  border-bottom: 1px solid var(--linie);
}
.buehne-innen {
  max-width: var(--breit); margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--rand) clamp(2.5rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.dachzeile {
  display: block; margin: 0 0 .6rem; color: var(--blau-tief); font-family: var(--schrift-text); font-style: normal;
  font-weight: 700; font-size: var(--s-1); letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
}
.buehne h1 { margin: 0 0 1.2rem; }
.buehne .leitsatz {
  display: block; font-weight: 400;
  font-size: clamp(1.85rem, 4vw, 3.1rem); line-height: 1.15;   /* so breit wie die Spalte neben dem Titelbild: ein kurzer Satz = eine Zeile */
}
/* Jede Zeile des Leitsatzes (ein Satz oder ein von der Redaktion mit „|“ gesetzter Teil) beginnt neu und wird in sich ausgeglichen */
.leitsatz-zeile { display: block; text-wrap: balance; }
.leitsatz-zeile:first-child::before { content: "„"; }
.leitsatz-zeile:last-child::after { content: "“"; }
.buehne-einleitung { font-size: var(--s1); max-width: 40rem; margin: 0 0 1.8rem; color: var(--text); text-wrap: pretty; }   /* etwa so breit wie der Leitsatz darüber */
.buehne-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.buehne .ls-schalter { min-height: 3.5rem; }
.buehne-pdf { margin: 0; font-size: var(--s0); }
.buehne-pdf a { display: inline-flex; align-items: center; gap: .45em; min-height: 2.75rem; font-weight: 700; }
.buehne-titelbild { margin: 0; justify-self: center; width: min(100%, 25rem); }
.buehne-titelbild img {
  width: 100%; border-radius: var(--r-m); background: #fff;
  box-shadow: var(--schatten-hoch);
  transform: rotate(1.6deg);
  outline: 1px solid rgba(28,61,90,.08);
}
@media (max-width: 47.99rem) {
  .buehne-innen { grid-template-columns: 1fr; }
  .buehne-titelbild { order: -1; width: min(62%, 15rem); }
  .buehne-titelbild img { transform: none; }
  .buehne-knoepfe .knopf-gross { flex: 1 1 100%; }
  .buehne .ls-schalter { flex: 1 1 auto; justify-content: space-between; }
}

/* Wegweiser: drei gleich aufgebaute Karten – Symbol, Überschrift, ein Satz, ein Knopf */
/* Wegweiser am Seitenende: noch einmal die drei Hilfen (oben stehen dafür schon die Knöpfe) */
.wegweiser { max-width: var(--breit); margin: 0 auto; padding: 3.5rem var(--rand) 4.5rem; }
.weitere-ausgaben + .wegweiser { padding-top: 0; }
.wegweiser-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; }
.wegweiser-liste li {
  background: var(--flaeche); border: 2px solid var(--blau-zart); border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: start;
}
.wegweiser-symbol {
  grid-row: span 3; width: 3.3rem; height: 3.3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--blau); color: #fff;
}
:root[data-farben="kontrast"] .wegweiser-symbol { color: #000; }
.wegweiser-symbol .sym { width: 1.7rem; height: 1.7rem; }
.wegweiser h3 { margin: .15rem 0 .35rem; font-size: var(--s1); }
.wegweiser p { margin: 0 0 .9rem; font-size: var(--s0); color: var(--text-leise); }
.wegweiser .knopf { justify-self: start; align-self: end; min-height: 2.9rem; font-size: var(--s-1); }

.inhalt-kopf { max-width: var(--breit); margin: 0 auto; padding: 4rem var(--rand) .5rem; }
.inhalt-kopf h2 { margin: 0; font-size: clamp(1.9rem, 1.4rem + 1.6vw, var(--s4)); }
.inhalt-kopf > .inhalt-kopf-innen > p { margin: .3rem 0 1.4rem; color: var(--text-leise); font-size: var(--s0); }
.themen-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.themen-nav a {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.9rem; padding: .4em .7em .4em 1.1em;
  border: 2px solid var(--rahmen); border-radius: 999px; background: var(--flaeche);
  color: var(--text); font-weight: 700; font-size: var(--s-1); text-decoration: none;
}
.themen-nav a:hover { border-color: var(--blau-tief); color: var(--blau-tief); background: var(--blau-hauch); }
.themen-nav .anzahl {
  display: inline-grid; place-items: center; min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--blau-hauch); color: var(--blau-tief); font-size: var(--s-2);
}
.themen-nav .themen-nav-heft { padding-right: 1.1em; border-style: dashed; }
.themen-nav .themen-nav-heft .sym { color: var(--blau-tief); }

/* Kapitel – gleicher Rhythmus überall: 3,5 rem oben, 2 rem unten; Bänder 3,5 rem oben und unten */
.kapitel { padding: 3.5rem 0 2rem; scroll-margin-top: 1rem; }
.kapitel-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.kapitel-kopf { margin-bottom: 1.6rem; }
.kapitel-kopf h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1vw, var(--s3)); display: flex; align-items: center; gap: .9rem; }
.kapitel-kopf h2::before { content: ""; width: 2.4rem; height: 4px; border-radius: 4px; background: var(--blau); flex: none; }
.kapitel-kopf p { margin: .35rem 0 0 3.3rem; color: var(--text-leise); font-size: var(--s0); }

/* Das Ginkgohaus als blaues Band – wie die blauen Seiten im Heft */
.kapitel-ginkgohaus {
  margin: 1.5rem 0 0; padding: 3.5rem 0; color: #fff; position: relative; overflow: hidden;
  background: var(--blau-band);
}
.kapitel-ginkgohaus::after {
  content: ""; position: absolute; right: -3rem; top: -2rem; width: 26rem; height: 26rem; pointer-events: none; opacity: .13;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M60 116c0-22-2-40-8-52'/%3E%3Cpath d='M52 64C34 58 16 50 6 38c10-18 30-30 50-30 2 0 4 4 4 14 0-10 2-14 4-14 20 0 40 12 50 30-10 12-28 20-46 26-3 1-6 1-8 0z'/%3E%3Cpath d='M56 60 20 36M57 58 34 22M58 57 50 12M62 57 70 12M63 58 86 22M64 60 100 36'/%3E%3C/svg%3E") no-repeat center / contain;
}
:root[data-farben="kontrast"] .kapitel-ginkgohaus { border-block: 3px solid #fff; }
.kapitel-ginkgohaus .kapitel-kopf h2 { color: #fff; }
.kapitel-ginkgohaus .kapitel-kopf h2::before { background: var(--gold); }
.kapitel-ginkgohaus .kapitel-kopf p { color: rgba(255,255,255,.9); }
:root[data-farben="kontrast"] .kapitel-ginkgohaus .kapitel-kopf h2 { color: #ffe14d; }

/* „Gestern und heute“ – warmer Papierton wie die historischen Fotos */
.kapitel-geschichte {
  margin: 1.5rem 0 0; padding: 3.5rem 0;
  background: var(--papier-hg); border-block: 1px solid var(--papier-linie);
}
.kapitel-geschichte .kapitel-kopf h2::before { background: var(--papier-akzent); }
.kapitel-geschichte .kachel-bild img { filter: sepia(.12); }

/* ---------- 8 Kacheln ---------- */
.kacheln { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .kachel-gross { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .spalten-2 { grid-template-columns: repeat(2, 1fr); }
  .spalten-3 { grid-template-columns: repeat(3, 1fr); }
  .spalten-4 { grid-template-columns: repeat(4, 1fr); }
  .kachel-gross { grid-column: span 2; }
  /* Bei großer Schrift keine festen vier Spalten – die Titel bekämen sonst nur wenige Zeichen je Zeile */
  :root:not([data-schrift="normal"]) .spalten-3, :root:not([data-schrift="normal"]) .spalten-4 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  }
}

.kachel {
  position: relative; display: flex; flex-direction: column;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schatten);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.kachel:hover { transform: translateY(-4px); box-shadow: var(--schatten-hoch); border-color: var(--blau); }
/* Fokusring an der ganzen Kachel – nur bei Tastaturfokus (Browser mit :has), sonst bei jedem Fokus */
.kachel:focus-within { outline: 3px solid var(--fokus-innen); outline-offset: 3px; box-shadow: 0 0 0 8px var(--fokus-aussen); }
.kachel:focus-within:not(:has(a:focus-visible)) { outline: none; box-shadow: var(--schatten); }
.kachel a:focus-visible { outline: none; box-shadow: none; }
.kachel-bild { position: relative; aspect-ratio: 4 / 3; background: var(--blau-hauch); overflow: hidden; }
.kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .5s ease; }
.kachel:hover .kachel-bild img { transform: scale(1.04); }
.kachel-gross .kachel-bild { aspect-ratio: 2 / 1; }
.kachel-ersatz {
  display: grid; place-items: center; height: 100%; color: var(--blau);
  background: radial-gradient(circle at 30% 20%, var(--flaeche) 0, var(--blau-hauch) 45%, var(--blau-zart) 100%);
}
.kachel-ersatz .sym { width: 4.5rem; height: 4.5rem; stroke-width: 1.1; }

/* Glocke aus dem Zeitungslogo (Maske übernimmt beide Blautöne als Deckkraft) */
.glocke-logo {
  display: inline-block; width: 4.6rem; aspect-ratio: 400 / 434; background: var(--blau-tief);
  -webkit-mask: url("../img/glocke-symbol.png") center / contain no-repeat;
          mask: url("../img/glocke-symbol.png") center / contain no-repeat;
}
:root:not([data-farben="dunkel"]):not([data-farben="kontrast"]) .glocke-logo { background: var(--blau); }
@media (prefers-color-scheme: dark) { :root[data-farben="auto"] .glocke-logo { background: var(--blau-tief); } }
.kachel-ersatz .glocke-logo { transform: rotate(-8deg); transition: transform .4s ease; }
.kachel:hover .kachel-ersatz .glocke-logo { transform: rotate(8deg); }
.kachel-kompakt .kachel-ersatz .glocke-logo { width: 2.6rem; }
.kachel-gross .kachel-ersatz .glocke-logo, .kachel-breit .kachel-ersatz .glocke-logo { width: 6rem; }
@media (max-width: 39.99rem) { .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-ersatz .glocke-logo { width: 2.8rem; } }
.glocke-riesig { width: 6rem; }

/* Seitenzahl wie die grauen Seitenmarken im Heft */
.kachel-seite {
  position: absolute; left: .75rem; bottom: .75rem; min-width: 2.4rem; height: 2.4rem; padding: 0 .4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(70, 84, 96, .88); color: #fff; font-weight: 700; font-size: var(--s-1); font-variant-numeric: tabular-nums;
  box-shadow: var(--schatten);
}
:root[data-farben="kontrast"] .kachel-seite { background: #000; border: 2px solid #fff; }

.kachel-text { padding: 1.05rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.kachel h3 { margin: 0 0 .5rem; font-size: var(--s1); font-weight: 700; }
.kachel h3 a { color: var(--text); text-decoration: none; }
.kachel h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kachel:hover h3 a { color: var(--blau-tief); text-decoration: underline; text-decoration-thickness: .08em; }
.kachel-gross h3 { font-size: var(--s2); }
.kachel-dach { display: block; font-size: .72em; font-weight: 400; color: var(--blau-tief); margin-bottom: .15em; }
.kachel-teaser { margin: 0 0 1rem; font-size: var(--s0); color: var(--text-leise); line-height: 1.5; }
/* Standard-Anreißer auf vier Zeilen kürzen – die Leichte Sprache bleibt vollständig */
.kachel:not(.kachel-gross):not(.kachel-breit) .kachel-teaser:not(.kachel-teaser-leicht) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.kachel-gross .kachel-teaser { font-size: 1.08rem; max-width: 36rem; }
.kachel-meta { margin: auto 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: var(--s-1); color: var(--text-leise); align-items: center; }
.kachel-meta > span { display: inline-flex; align-items: center; gap: .3em; }
.kachel-meta .sym { width: 1.1em; height: 1.1em; }
.kachel-autor { font-weight: 700; color: var(--text); flex-basis: 100%; }
.merkmal-leicht { background: var(--blau-hauch); color: var(--blau-tief); border-radius: 999px; padding: .1em .65em .1em .45em; font-weight: 700; }
:root[data-farben="kontrast"] .merkmal-leicht { border: 1px solid #fff; }

/* Breite Aufmacher-Kachel, wenn ein Kapitel nur einen Artikel hat */
.kachel-breit { grid-column: 1 / -1; }
.kachel-breit h3 { font-size: var(--s2); }
.kachel-breit .kachel-bild { aspect-ratio: 2 / 1; }
@media (min-width: 40rem) {
  .kachel-breit { flex-direction: row; }
  .kachel-breit .kachel-bild { aspect-ratio: auto; flex: 0 0 46%; min-height: 19rem; }
  .kachel-breit .kachel-text { padding: 2rem 2.3rem; justify-content: center; }
  .kachel-breit h3 { font-size: clamp(var(--s2), 1.2rem + 1vw, var(--s3)); }
  .kachel-breit .kachel-teaser { font-size: 1.12rem; max-width: 34rem; }
  .kachel-breit .kachel-meta { margin-top: 1.1rem; }
}

/* Kompakte Kacheln (Rätsel, Termine, Adressen) */
.kacheln-kompakt { gap: 1rem; }
.kachel-kompakt { flex-direction: row; align-items: center; }
.kachel-kompakt .kachel-bild { flex: none; width: 5.5rem; aspect-ratio: 1; margin: .9rem; border-radius: var(--r-m); }
.kachel-kompakt .kachel-ersatz .sym { width: 2.4rem; height: 2.4rem; stroke-width: 1.5; }
.kachel-kompakt .kachel-text { padding: .9rem 1.1rem .9rem 0; }
.kachel-kompakt h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.kachel-kompakt .kachel-teaser { font-size: var(--s-1); margin-bottom: .4rem; }
.kachel-kompakt .kachel-meta { font-size: var(--s-2); }

/* Handy: normale Kacheln als kompakte Zeile – weniger Scrollen, gleiche Informationen */
@media (max-width: 39.99rem) {
  .kacheln { gap: .9rem; }
  .kachel:not(.kachel-gross):not(.kachel-breit) { flex-direction: row; align-items: flex-start; }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-bild { flex: none; width: 6.2rem; aspect-ratio: 1; margin: .85rem 0 .85rem .85rem; border-radius: var(--r-m); }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-text { padding: .8rem 1rem .9rem; }
  .kachel:not(.kachel-gross):not(.kachel-breit) h3 { font-size: 1.1rem; margin-bottom: .3rem; }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-teaser { font-size: var(--s-1); margin-bottom: .5rem; }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-teaser:not(.kachel-teaser-leicht) { -webkit-line-clamp: 3; line-clamp: 3; }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-autor { display: none; }
  .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-seite { left: .35rem; bottom: .35rem; min-width: 1.9rem; height: 1.9rem; font-size: var(--s-2); }
  .kachel-gross h3 { font-size: 1.4rem; }
  .kapitel-kopf p { margin-left: 0; }
}

/* Inhaltsverzeichnis wie im Heft */
.heftinhalt { margin-top: 2rem; padding: 3.5rem 0 4rem; background: var(--flaeche-2); border-top: 1px solid var(--linie); }
.heftinhalt-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.heftliste { list-style: none; margin: 0; padding: 0; }
@media (min-width: 56rem) { .heftliste { column-count: 2; column-gap: 4rem; } }
.heftliste li { break-inside: avoid; border-bottom: 1px dotted var(--linie); }
.heftliste a {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem; align-items: baseline;
  padding: .6rem .4rem; min-height: 2.9rem; color: var(--text); text-decoration: none; border-radius: var(--r-s);
}
.heftliste a:hover { background: var(--blau-hauch); }
.heftliste a:hover .heftliste-titel { text-decoration: underline; text-decoration-thickness: .08em; }
.heftliste-seite { font-family: var(--schrift-titel); font-style: italic; font-weight: 700; color: var(--blau-tief); text-align: right; font-size: 1.1rem; }
.heftliste-titel { line-height: 1.4; }
.heftliste-ls { color: var(--blau-tief); align-self: center; }
.heftliste-ls .sym { width: 1.1rem; height: 1.1rem; }

/* Weitere Ausgaben */
.weitere-ausgaben { padding: 3.5rem 0 4rem; }
.weitere-innen { max-width: var(--breit); margin: 0 auto; padding: 0 var(--rand); }
.ausgaben-reihe { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.ausgabe-mini, .ausgabe-karte {
  position: relative; display: grid; gap: 1.3rem; align-items: center;
  padding: 1.1rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); box-shadow: var(--schatten);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ausgabe-mini { grid-template-columns: 6.5rem 1fr; }
.ausgabe-karte { grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 1.2rem; }
.ausgabe-mini:hover, .ausgabe-karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hoch); border-color: var(--blau); }
.ausgabe-mini:focus-within, .ausgabe-karte:focus-within { outline: 3px solid var(--fokus-innen); outline-offset: 3px; box-shadow: 0 0 0 8px var(--fokus-aussen); }
.ausgabe-mini:focus-within:not(:has(a:focus-visible)), .ausgabe-karte:focus-within:not(:has(a:focus-visible)) { outline: none; box-shadow: var(--schatten); }
.ausgabe-mini img, .ausgabe-karte img { border-radius: 6px; box-shadow: var(--schatten-hoch); }
.ausgabe-mini img { transform: rotate(-1.5deg); }
.ausgabe-mini h3, .ausgabe-karte h2 { margin: 0 0 .25rem; font-size: var(--s2); }
.ausgabe-mini h3 a, .ausgabe-karte h2 a { color: var(--blau-tief); text-decoration: none; }
.ausgabe-mini h3 a::after, .ausgabe-karte h2 a::after { content: ""; position: absolute; inset: 0; }
.ausgabe-mini a:focus-visible, .ausgabe-karte a:focus-visible { outline: none; box-shadow: none; }
.ausgabe-mini p, .ausgabe-karte p { margin: 0 0 .3rem; color: var(--text-leise); font-size: var(--s0); }
.ausgabe-leitsatz { font-family: var(--schrift-titel); font-style: italic; }
@media (max-width: 30rem) { .ausgabe-karte { grid-template-columns: 5rem 1fr; gap: 1rem; } }

/* ---------- 9 Artikel ---------- */
.seiten-kopf { margin-bottom: 2.2rem; }
.seiten-kopf h1 { margin: 0 0 .4rem; font-size: clamp(2.2rem, 1.6rem + 2vw, var(--s5)); }
.untertitel { font-size: var(--s1); color: var(--text-leise); margin: 0; }

.beitrag { max-width: calc(var(--text-breite) + 2 * var(--rand)); margin: 0 auto; padding: 1.5rem var(--rand) 3rem; }
.brotkrumen ol { list-style: none; margin: 0 0 2.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem .5rem; font-size: var(--s-1); color: var(--text-leise); }
.brotkrumen li { display: inline-flex; align-items: center; min-height: 2.75rem; }
.brotkrumen li + li::before { content: "›"; margin-right: .5rem; color: var(--blau); font-weight: 700; }
.brotkrumen [aria-current] { color: var(--text-leise); }

.rubrik {
  margin: 0 0 .35rem; font-size: var(--s-2); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blau-tief);
}
.beitrag-kopf .rubrik { display: inline-block; background: var(--blau-hauch); padding: .2em .8em; border-radius: 999px; margin-bottom: 1rem; }
.beitrag-kopf .dachzeile { text-transform: none; letter-spacing: 0; font-family: var(--schrift-titel); font-style: italic; font-weight: 400; font-size: var(--s1); margin-bottom: .3rem; }
.beitrag-kopf h1 { margin: 0 0 .7rem; font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.3rem); font-weight: 700; }
.beitrag-kopf .untertitel { margin-bottom: 1rem; }
.beitrag-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 1.6rem; font-size: var(--s0); color: var(--text-leise); }
.beitrag-meta > span { display: inline-flex; align-items: center; gap: .4em; }
.beitrag-meta strong { color: var(--text); }

.werkzeug {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 1.2rem;
  padding: 1rem 0; margin-bottom: 2.2rem; border-block: 1px solid var(--linie);
}
.ls-link { font-weight: 700; color: var(--blau-tief); white-space: nowrap; }
.knopf-anhoeren { min-height: 3.2rem; }
.knopf-anhoeren.laeuft { background: var(--gold); color: #1d2933; }
@keyframes puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(231,180,60,.7); } 50% { box-shadow: 0 0 0 12px rgba(231,180,60,0); } }
.knopf-anhoeren.bitte-druecken { animation: puls 1.4s ease-in-out 4; }
@media (max-width: 36rem) {
  .werkzeug { flex-direction: column; align-items: stretch; }
  .werkzeug .ls-schalter { justify-content: space-between; }
}

.fassung[hidden] { display: none; }
.fliesstext > * { margin-top: 0; }
.fliesstext p { margin: 0 0 var(--absatz); }
.fliesstext h2 { font-size: var(--s2); margin: 2.2rem 0 .7rem; }
.fliesstext h3 { font-size: var(--s1); margin: 2rem 0 .5rem; font-family: var(--schrift-text); font-style: normal; color: var(--text); }
.fliesstext strong { font-weight: 700; }
.fliesstext .liste { padding-left: 1.3em; margin: 0 0 var(--absatz); }
.fliesstext .liste li { margin-bottom: .35em; }
.fliesstext .liste li::marker { color: var(--blau); }

.zitat {
  margin: 2.2rem 0; padding: .3rem 0 .3rem 1.5rem; border-left: 5px solid var(--blau);
  font-family: var(--schrift-titel); font-style: italic; font-size: var(--s2); line-height: 1.5; color: var(--blau-tief);
}
.zitat p { margin: 0; }
.zitat p::before { content: "„"; }
.zitat p::after { content: "“"; }
.zitat footer { margin-top: .6rem; font-family: var(--schrift-text); font-style: normal; font-size: var(--s0); color: var(--text-leise); }
.zitat cite { font-style: normal; font-weight: 700; }

.unterschrift {
  margin: 2rem 0 0; padding-top: 1rem; border-top: 2px solid var(--blau-zart);
  font-family: var(--schrift-titel); font-style: italic; font-size: 1.15rem; color: var(--blau-tief); display: inline-block;
}

/* Bilder im Rahmen – wie im gedruckten Heft */
.abb { margin: 2.2rem 0; }
.abb-zoom {
  display: block; position: relative; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: calc(var(--radius) + 2px);
}
.abb img { width: 100%; border: 6px solid var(--blau); border-radius: var(--radius); background: var(--blau-hauch); }
/* Die Lupe ist immer sichtbar – auf dem Tablet gibt es kein Überfahren mit der Maus */
.abb-lupe {
  position: absolute; right: .9rem; bottom: .9rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--blau-nacht);
  font-size: 1.6rem; font-weight: 700; line-height: 1; box-shadow: var(--schatten-hoch); opacity: .85; transition: opacity .2s;
}
.abb-zoom:hover .abb-lupe, .abb-zoom:focus-visible .abb-lupe { opacity: 1; }
.abb figcaption { margin-top: .6rem; font-size: var(--s0); color: var(--text-leise); line-height: 1.5; padding-left: .9rem; border-left: 3px solid var(--blau-zart); }
.abb-hoch { max-width: 26rem; margin-inline: auto; }
.abb-aufmacher { margin-top: 0; }
@media (min-width: 64rem) {
  .abb-aufmacher:not(.abb-hoch) { width: min(54rem, 100vw - 4rem); margin-left: 50%; translate: -50% 0; }
}

.galerie { list-style: none; margin: 2.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); gap: 1rem; }
.galerie[data-anzahl="2"], .galerie[data-anzahl="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 64rem) {
  .galerie { width: min(58rem, 100vw - 4rem); margin-left: 50%; translate: -50% 0; }
  .galerie[data-anzahl="2"], .galerie[data-anzahl="4"] { width: auto; margin-left: 0; translate: none; }
}
.galerie .abb { margin: 0; height: 100%; }
.galerie .abb img { aspect-ratio: 1; object-fit: cover; border-width: 4px; border-radius: var(--r-m); }
.galerie .abb-hoch { max-width: none; }
.galerie figcaption { font-size: var(--s-1); }

/* Kästen und Termine */
.kasten { margin: 2rem 0; padding: 1.2rem 1.5rem; border-radius: var(--r-m); border: 2px solid var(--blau-zart); background: var(--flaeche-2); }
.kasten p { margin: 0; }
.fliesstext .kasten .liste { margin: .5rem 0 0; }
.kasten-bank { font-variant-numeric: tabular-nums; border-color: var(--blau); background: var(--blau-hauch); }
.kasten-hinweis { border-color: var(--gold); background: var(--flaeche); border-left-width: 6px; }
.kasten-adresse { border: 0; background: none; padding: 0; margin: 0 0 1.2rem; }
.kasten-quelle { border: 0; background: none; padding: 0; font-size: var(--s-1); color: var(--text-leise); }
.kasten-gedicht {
  border: 0; background: none; padding: 0; margin: 0 0 1.6rem; text-align: center;
  font-family: var(--schrift-titel); font-style: italic; font-size: 1.18rem; line-height: 1.75; color: var(--text);
}
.kasten-gedicht:first-child::before { content: "❦"; display: block; font-style: normal; color: var(--blau); font-size: 1.6rem; margin-bottom: .8rem; }
.fliesstext h2 + .kasten-adresse { margin-top: .4rem; }
.termine { margin: 1rem 0 2rem; display: grid; gap: 0; }
.termin { display: grid; grid-template-columns: minmax(8rem, 13rem) 1fr; gap: .3rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--linie); }
.termin:first-child { border-top: 1px solid var(--linie); }
.termin dt { font-weight: 700; color: var(--blau-tief); font-variant-numeric: tabular-nums; }
.termin dd { margin: 0; }
@media (max-width: 36rem) { .termin { grid-template-columns: 1fr; } }

/* Fassung in Leichter Sprache */
.leicht-kasten {
  background: var(--blau-hauch); border-radius: var(--r-l); padding: clamp(1.4rem, 4vw, 2.6rem);
  border: 2px solid var(--blau-zart);
}
.leicht-titel {
  display: inline-flex; align-items: center; gap: .5em; margin: 0 0 1.4rem;
  font-family: var(--schrift-text); font-style: normal; font-size: 1.05rem; letter-spacing: .02em;
  background: var(--blau-tief); color: var(--knopf-text); padding: .35em 1em .35em .7em; border-radius: 999px;
}
.leicht-kasten .abb-aufmacher { width: auto; margin: 0 0 1.8rem; translate: none; }
.leicht-kasten .abb-aufmacher.abb-hoch { max-width: 22rem; }
.fassung-leicht .fliesstext { font-size: 1.12em; line-height: max(var(--zeilen), 1.8); }
.fassung-leicht .fliesstext p { margin-bottom: 1.3em; }

/* Vorlese-Markierung */

/* Blättern */
.blaettern { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin-top: 3.5rem; }
.blaettern-link {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; min-height: 4.5rem;
  border: 2px solid var(--rahmen); border-radius: var(--radius); text-decoration: none; color: var(--text); background: var(--flaeche);
}
.blaettern-link:hover { border-color: var(--blau-tief); background: var(--blau-hauch); }
.blaettern-link .sym { color: var(--blau-tief); width: 1.6rem; height: 1.6rem; }
.blaettern-was { display: block; font-size: var(--s-1); color: var(--text-leise); }
.blaettern-titel { display: block; font-weight: 700; line-height: 1.3; }
.blaettern-weiter { justify-content: flex-end; text-align: right; }
.blaettern-inhalt { flex-direction: column; gap: .2rem; justify-content: center; text-align: center; }
.blaettern-inhalt .blaettern-was { display: none; }
@media (max-width: 40rem) {
  .blaettern { grid-template-columns: minmax(0, 1fr); }
  .blaettern-inhalt { order: 3; flex-direction: row; }
  .blaettern > span:empty { display: none; }
}

/* ---------- 10 Übersicht, Hilfe, Fehlerseite ---------- */
.ausgaben-liste { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; gap: 1.4rem; }

.hilfe-abschnitt { position: relative; padding: 1.8rem 0 1.4rem 4.6rem; border-top: 1px solid var(--linie); }
.hilfe-abschnitt:first-child { border-top: 0; padding-top: 0; }
.hilfe-abschnitt:first-child .hilfe-symbol { top: 0; }
.hilfe-abschnitt h2 { margin: 0 0 .7rem; font-size: var(--s2); }
.hilfe-symbol { position: absolute; left: 0; top: 1.8rem; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--blau-hauch); color: var(--blau-tief); display: grid; place-items: center; }
.hilfe-symbol .sym { width: 1.8rem; height: 1.8rem; }
#barrierefreiheit { padding-left: 0; }
@media (max-width: 36rem) {
  .hilfe-abschnitt { padding-left: 0; }
  .hilfe-symbol { position: static; margin-bottom: .6rem; }
}

.fehler { text-align: center; padding-top: 4rem; }
.fehler h1 { font-size: var(--s4); }
.fehler-knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- 11 Fuß ---------- */
.fuss { background: var(--blau-band); color: #fff; margin-top: 2rem; }
:root[data-farben="kontrast"] .fuss { border-top: 3px solid #fff; }
.fuss-innen {
  max-width: var(--breit); margin: 0 auto; padding: 3rem var(--rand) 2rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem 3rem;
}
.fuss a { color: #fff; }
.fuss-marke { display: flex; gap: 1.3rem; align-items: flex-start; }
.fuss-marke picture { flex: none; }
.fuss-marke img { width: 4.5rem; }
.fuss-marke p { margin: 0; font-size: var(--s0); line-height: 1.6; }
.fuss-marke a { display: inline-block; padding: .3rem 0; }
.fuss-nav h2 { font-family: var(--schrift-text); font-style: normal; color: #fff; font-size: var(--s-1); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 .7rem; }
.fuss-nav ul { list-style: none; margin: 0; padding: 0; }
.fuss-nav li { margin-bottom: .1rem; }
.fuss-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 0; font-size: var(--s0); }
.fuss-zeile { max-width: var(--breit); margin: 0 auto; padding: 1.2rem var(--rand) 2rem; border-top: 1px solid rgba(255,255,255,.35); font-size: var(--s-1); }
.fuss :focus-visible { outline-color: #fff; }
@media (max-width: 56rem) { .fuss-innen { grid-template-columns: 1fr 1fr; } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 34rem) { .fuss-innen { grid-template-columns: 1fr; } }

/* ---------- 12 Dialog: Schrift und Farben ---------- */
dialog { color: var(--text); }
dialog::backdrop { background: rgba(10, 25, 40, .6); }
.ansicht {
  width: min(38rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); padding: 0;
  border: 0; border-radius: var(--r-l); background: var(--flaeche); box-shadow: var(--schatten-hoch);
}
:root[data-farben="kontrast"] .ansicht { border: 3px solid #fff; }
.ansicht-form { padding: 1.5rem 1.6rem 1.4rem; }
.ansicht-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ansicht-kopf h2 { margin: 0; font-size: var(--s2); display: flex; align-items: center; gap: .5rem; }
.ansicht-hinweis { margin: .4rem 0 1rem; font-size: var(--s0); color: var(--text-leise); }
.wahl { border: 0; padding: 0; margin: 0 0 1.25rem; }
.wahl legend { font-weight: 700; margin-bottom: .5rem; padding: 0; }
.wahl-knoepfe { display: flex; flex-wrap: wrap; gap: .45rem; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wahl label {
  display: inline-flex; align-items: center; gap: .5em; min-height: 3rem; padding: .45em 1.05em;
  border: 2px solid var(--rahmen); border-radius: 999px; cursor: pointer; font-size: var(--s0); background: var(--flaeche);
}
.wahl label:hover { border-color: var(--blau-tief); background: var(--blau-hauch); }
.wahl input:checked + label { background: var(--blau-tief); border-color: var(--blau-tief); color: var(--knopf-text); font-weight: 700; }
.wahl input:focus-visible + label { outline: 3px solid var(--fokus-innen); outline-offset: 2px; box-shadow: 0 0 0 7px var(--fokus-aussen); }
.muster { font-family: var(--schrift-titel); font-weight: 700; line-height: 1; }
.muster-s { font-size: 1rem; } .muster-m { font-size: 1.3rem; } .muster-l { font-size: 1.6rem; }
.farbmuster { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.fm-auto { background: linear-gradient(135deg, #fff 50%, #0f171e 50%); }
.fm-hell { background: #fff; } .fm-dunkel { background: #16212b; } .fm-kontrast { background: linear-gradient(135deg, #000 50%, #ffe14d 50%); }
.ansicht-fuss { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--linie); flex-wrap: wrap; }
@media (max-width: 36rem) {
  .ansicht { margin: auto 0 0; width: 100vw; max-width: 100vw; border-radius: var(--r-l) var(--r-l) 0 0; }
  .wahl-farben .wahl-knoepfe { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ---------- 13 Vorlese-Leiste ---------- */
.leiste {
  position: fixed; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom)); translate: -50% 0; z-index: 50;
  width: min(46rem, calc(100vw - 1.5rem));
  background: var(--blau-nacht); color: #fff; border-radius: var(--r-l); box-shadow: var(--schatten-hoch);
  overflow: hidden;
}
:root[data-farben="kontrast"] .leiste { border: 3px solid #ffe14d; }
.leiste[hidden] { display: none; }
.leiste-innen { display: flex; align-items: center; gap: 1rem; padding: .8rem .9rem .9rem 1.3rem; position: relative; }
.leiste-info { flex: 1; min-width: 0; }
.leiste-was { display: block; font-size: var(--s-2); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.leiste-titel { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leiste-knoepfe { display: flex; gap: .45rem; align-items: center; }
.leiste .knopf-rund { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.leiste .knopf-rund:hover { background: rgba(255,255,255,.22); border-color: #fff; }
.leiste .knopf-haupt { width: 3.6rem; height: 3.6rem; background: var(--gold); border-color: var(--gold); color: #1d2933; }
.leiste .knopf-haupt .sym { width: 1.6rem; height: 1.6rem; }
.leiste .sym-play { display: none; }
.leiste.pausiert .sym-play { display: block; }
.leiste.pausiert .sym-pause { display: none; }
.leiste :focus-visible { outline-color: #fff; }
.leiste-zeit { display: flex; align-items: center; gap: .8rem; padding: 0 1.3rem 1rem; font-variant-numeric: tabular-nums; font-size: var(--s-1); }
.leiste-zeit[hidden] { display: none; }
.leiste-zeit span { min-width: 2.8rem; opacity: .9; }
.zeit-gesamt { text-align: right; }
.zeit-regler { flex: 1; height: 2.75rem; margin: 0; background: none; accent-color: var(--gold); cursor: pointer; -webkit-appearance: none; appearance: none; }
.zeit-regler::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.5); }
.zeit-regler::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,.5); }
.zeit-regler::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--gold); }
.zeit-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 1.35rem; height: 1.35rem; margin-top: -.44rem; border-radius: 50%; background: var(--gold); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.zeit-regler::-moz-range-thumb { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--gold); border: 3px solid #fff; }
.zeit-regler:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: none; border-radius: var(--r-s); }

.anhoeren-dauer:not(:empty) { font-weight: 400; opacity: .85; font-variant-numeric: tabular-nums; padding-left: .55em; margin-left: .1em; border-left: 1px solid currentColor; }

@media (max-width: 34rem) {
  .leiste-innen { flex-direction: column; align-items: stretch; gap: .6rem; padding: 1rem; }
  .leiste-zeit { padding: 0 1rem 1rem; }
  .leiste-knoepfe { justify-content: space-between; }
}

/* ---------- 14 Bildbetrachter ---------- */
.lupe { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 1rem; border: 0; background: rgba(8, 14, 20, .96); color: #fff; }
.lupe[open] { display: grid; place-items: center; }
.lupe figure { margin: 0; display: grid; justify-items: center; gap: 1rem; max-width: 100%; }
.lupe img { max-width: min(100%, 90rem); max-height: calc(100dvh - 9rem); width: auto; height: auto; border-radius: var(--r-m); }
.lupe figcaption { max-width: 48rem; text-align: center; font-size: 1.05rem; }
.lupe-zu {
  position: fixed; top: 1rem; right: 1rem; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 3rem; padding: .5rem 1.1rem; border-radius: 999px; border: 2px solid #fff; background: rgba(0,0,0,.4); color: #fff; font-weight: 700; cursor: pointer;
}

/* ---------- 15 Bewegung reduzieren, Druck ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .kachel:hover, .ausgabe-mini:hover, .ausgabe-karte:hover, .knopf:active { transform: none; }
  .kachel:hover .kachel-bild img { transform: none; }
  .kachel-ersatz .glocke-logo, .kachel:hover .kachel-ersatz .glocke-logo { transform: rotate(-8deg); }
}

/* ---------- Handy-Feinschliff ----------
   Nichts darf breiter werden als der Bildschirm – auch nicht mit „Sehr großer“ Schrift. */
.nowrap { white-space: nowrap; }
/* Kurz- und Langfassung eines Textes: auf dem Handy die kurze (z. B. „Design“ statt „Schrift und Farben“) */
.text-kurz { display: none; }
.kachel-text, .blaettern-link, .galerie li { min-width: 0; }
.ls-schalter { max-width: 100%; }
.ls-schalter-name { min-width: 0; }

@media (max-width: 47.99rem) {
  /* Kopf: vier gleich breite Punkte; der Knopf heißt hier kurz „Design“ */
  .text-lang { display: none; }
  .text-kurz { display: inline; }
  .hauptnav ul, :root[data-schrift="gross"] .hauptnav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Bühne: erst Leitsatz und Knöpfe, dann das Titelbild */
  .buehne-innen { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; padding-top: 1.8rem; }
  .buehne-titelbild { order: 1; width: min(56%, 13rem); }
  .buehne .leitsatz { font-size: clamp(1.45rem, .1rem + 6.3vw, 2.6rem); }   /* „Ein Erbe, das uns verbindet.“ passt ab 360 px in eine Zeile */
  .buehne-einleitung { font-size: 1.125rem; }
  .buehne-knoepfe { margin-bottom: 1rem; }
  .ls-schalter-name { white-space: normal; }
  /* Einstiegsknöpfe etwas kleiner – Lautsprecher und „Leichte Sprache“ passen so auch auf 360 px nebeneinander */
  .buehne-knoepfe { gap: .6rem; }
  .buehne .knopf-gross { font-size: 1rem; min-height: 3.25rem; }
  .buehne .knopf-symbol { width: 3.25rem; height: 3.25rem; }
  .buehne .knopf-symbol .sym { width: 1.45rem; height: 1.45rem; }
  .buehne .ls-schalter { min-height: 3.25rem; font-size: .95rem; gap: .6rem; padding-left: .75rem; }
  .buehne .ls-schalter-name { gap: .4em; }
  .buehne .ls-schalter-name .sym { width: 1.4em; height: 1.4em; }
  /* Große und sehr große Schrift: nebeneinander ist kein Platz – dann Knopf mit Text, Schalter in eigener Zeile */
  :root:is([data-schrift="gross"], [data-schrift="sehr-gross"]) .buehne-knoepfe > * { flex: 1 1 100%; }
  :root:is([data-schrift="gross"], [data-schrift="sehr-gross"]) .buehne .knopf-symbol { width: auto; height: auto; min-height: 3.25rem; padding: .65em 1.35em; gap: .6em; }
  :root:is([data-schrift="gross"], [data-schrift="sehr-gross"]) .buehne .knopf-symbol .sr-only { position: static !important; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; white-space: normal; }

  /* Themen: eine Zeile zum Wischen statt acht Zeilen untereinander */
  .themen-nav { margin-inline: calc(-1 * var(--rand)); }
  .themen-nav ul {
    flex-wrap: nowrap; overflow-x: auto; padding: .25rem var(--rand) .8rem;
    scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .themen-nav ul::-webkit-scrollbar { display: none; }
  .themen-nav li { flex: none; scroll-snap-align: start; }
  .themen-nav a { white-space: nowrap; }

  /* Hilfe-Karten: Symbol neben der Überschrift, Text und Knopf über die volle Breite */
  .wegweiser-liste li { grid-template-columns: auto minmax(0, 1fr); row-gap: .7rem; padding: 1.2rem 1.2rem 1.3rem; }
  .wegweiser-liste li > * { grid-column: 1 / -1; }
  .wegweiser-liste .wegweiser-symbol { grid-row: auto; grid-column: 1; width: 2.8rem; height: 2.8rem; }
  .wegweiser-liste h3 { grid-column: 2; align-self: center; margin: 0; }
  .wegweiser p { margin: 0; }
  .wegweiser-liste li > span:not(.wegweiser-symbol) { display: block; }
  .wegweiser .knopf { width: 100%; }

  /* Fußzeile: Logo über der Anschrift – so bleibt die Zeile breit genug für die E-Mail-Adresse */
  .fuss-marke { flex-direction: column; gap: .9rem; }
  .fuss-marke img { width: 3.6rem; }

  /* Design-Dialog: gleich breite Felder statt Flatterreihen */
  .wahl-knoepfe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wahl-schrift .wahl-knoepfe, .wahl-tempo .wahl-knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wahl label { justify-content: center; text-align: center; height: 100%; padding-inline: .5em; line-height: 1.25; border-radius: var(--r-m); }
}

@media (max-width: 22rem) {
  .buehne .ls-schalter-name .sym { display: none; }
}

@media (max-width: 39.99rem) {
  /* Lange Titelwörter („Veranstaltungskalender“) nach Silben trennen statt einzelner Buchstaben in der nächsten Zeile */
  .kachel h3, .beitrag-kopf h1, .blaettern-titel, .heftliste-titel, .kapitel-kopf h2 { -webkit-hyphens: auto; hyphens: auto; }
  .beitrag-kopf h1 { font-size: clamp(1.85rem, 1.3rem + 2.6vw, 2.4rem); }
  .beitrag-kopf h1.lange-woerter { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem); }   /* ein Wort mit 16+ Buchstaben muss ganz in die Zeile passen */
  /* Pfad oben: der letzte Teil wiederholt nur die Überschrift – auf dem Handy weglassen, dann bleibt es eine Zeile */
  .brotkrumen li:last-child { display: none; }
  /* Sehr große Schrift: Zusammengehaltenes darf notfalls doch umbrechen */
  :root[data-schrift="sehr-gross"] .nowrap { white-space: normal; }
  /* Blättern: Text immer links lesbar, der Pfeil steht außen */
  .blaettern-weiter { justify-content: space-between; text-align: left; }
  /* Weitere Ausgaben: kleineres Titelbild, mehr Platz für den Text */
  .ausgabe-mini, .ausgabe-karte { grid-template-columns: 4.8rem minmax(0, 1fr); gap: 1rem; }
  /* Fotos: schmalerer Rahmen */
  .abb img { border-width: 4px; }
  .galerie .abb img { border-width: 3px; }
  /* Große Schrift: Bild über dem Text statt neben einer zu schmalen Textspalte */
  :root[data-schrift="gross"] .kachel:not(.kachel-gross):not(.kachel-breit),
  :root[data-schrift="sehr-gross"] .kachel:not(.kachel-gross):not(.kachel-breit) { flex-direction: column; align-items: stretch; }
  :root[data-schrift="gross"] .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-bild,
  :root[data-schrift="sehr-gross"] .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-bild { width: auto; aspect-ratio: 5 / 2; margin: 0; border-radius: 0; }
  :root[data-schrift="gross"] .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-text,
  :root[data-schrift="sehr-gross"] .kachel:not(.kachel-gross):not(.kachel-breit) .kachel-text { padding: .9rem 1.1rem 1rem; }
  :root:not([data-schrift="normal"]) .kachel h3 { -webkit-hyphens: auto; hyphens: auto; }
  /* Sehr lange Einzelwörter (z. B. „Inhaltsverzeichnis“, „Veranstaltungskalender“) bei großer Schrift trennen statt überstehen lassen */
  :root:not([data-schrift="normal"]) :is(.kapitel-kopf h2, .inhalt-kopf h2, .blaettern-titel, .heftliste-titel, .beitrag-kopf h1) { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  :root[data-schrift="sehr-gross"] .kapitel-kopf h2::before { display: none; }
  .blaettern-link > span { min-width: 0; }
}

@media print {
  .dach, .kopf, .fuss, .werkzeug, .blaettern, .leiste, .brotkrumen, .wegweiser, .abb-lupe, .sprung, dialog { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .fassung[hidden] { display: block !important; }
  .abb { break-inside: avoid; max-width: 60%; }
  a { color: #000; }
}