/* =============================================================================
   Chronik der Freiwilligen Feuerwehr Telgte

   Gestaltungsgedanke
   ------------------
   Eine Chronik ist kein Blog und kein Prospekt. Sie ist ein Archiv, das
   erzaehlt. Drei Entscheidungen tragen das Aussehen:

   1. Zeit ist immer sichtbar. Jeder Eintrag traegt seine Jahreszahl gross und
      als Anker – man weiss jederzeit, wann man gerade ist, und kann auf ein
      einzelnes Jahr verlinken.

   2. Quellen werden ausgestellt, nicht versteckt. Fotos und Dokumente stehen
      im Passepartout wie im Museum, mit Bildunterschrift und Signatur darunter.
      Der Charme des Alters kommt aus dem Material, nicht aus Effekten.

   3. Lesbarkeit vor Wirkung. Lange historische Texte bekommen eine Serife,
      eine ruhige Zeilenfuehrung und eine begrenzte Satzbreite.

   Die Marke bleibt die der Feuerwehr: Inter fuer Navigation und Bildunter-
   schriften, Feuerwehrrot als Akzent. Nur der Grundton wird waermer.
   ============================================================================= */

:root {
  /* Flaechen: waermer als die Hauptseite, Richtung Archivkarton. */
  --papier: #F4F1EA;
  --papier-tief: #E9E3D7;
  --papier-karte: #FBF9F5;

  /* Schrift: warmes Schwarz statt reinem Schwarz – auf Papierton ruhiger. */
  --tinte: #14100C;
  --tinte-weich: #574E43;
  --tinte-zart: #8B8175;

  --rot: #CD1719;
  --rot-tief: #8F1011;

  /* Fuer Archivalien: Rahmen, Signaturen, Quellenangaben. */
  --sepia: #8A6A3E;
  --sepia-zart: #D9CDB6;

  --linie: rgba(20, 16, 12, 0.13);
  --linie-kraeftig: rgba(20, 16, 12, 0.28);

  --schrift-lese: "Source Serif 4", Georgia, "Times New Roman", serif;
  --schrift-marke: "Inter", system-ui, sans-serif;

  --spalte: 1180px;   /* Gesamtbreite des Satzspiegels */
  --lesebreite: 68ch; /* Satzbreite fuer Fliesstext */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body.chronik {
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--schrift-lese);
  font-size: 19px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Kleinschrift in Versalien: Kicker, Bildunterschriften, Navigation. */
.ch-mono {
  font-family: var(--schrift-marke);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}

.ch-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------------------------------------------------------------------------
   Kopf
   Die Wortmarke steht als Zeitspanne da – „1885 · Chronik“ – damit auf jeder
   Seite klar ist, worin man blaettert.
   --------------------------------------------------------------------------- */
.ch-kopf {
  border-bottom: 1px solid var(--linie-kraeftig);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 40;
}
.ch-kopf-innen {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: baseline;
  gap: 32px;
}
.ch-marke { text-decoration: none; flex: 0 0 auto; }
/* Die Wortmarke ist von „Chronik der Freiwilligen Feuerwehr Telgte" auf
   „Chronik Feuerwehr Telgte" gekuerzt. Damit sie dieselbe Laufbreite behaelt,
   waechst die Schrift im Verhaeltnis der beiden Wortlaengen: gemessen 1,62,
   also von 1,05rem auf 1,7rem. */
.ch-marke-titel {
  font-family: var(--schrift-marke);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.ch-marke-titel::before {
  content: "";
  display: inline-block;
  width: 11px; height: 11px;
  margin-right: 10px;
  background: var(--rot);
  vertical-align: baseline;
}
.ch-marke-unter {
  font-family: var(--schrift-marke);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  margin-top: 4px;
  /* Buendig unter dem ersten Buchstaben, nicht unter dem roten Quadrat. */
  padding-left: 21px;
}

.ch-nav { margin-left: auto; display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; }
.ch-nav a {
  font-family: var(--schrift-marke);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinte-weich);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ch-nav a:hover { color: var(--tinte); border-bottom-color: var(--linie-kraeftig); }
.ch-nav a.ist-aktiv { color: var(--tinte); border-bottom-color: var(--rot); }
.ch-nav a.ch-nav-zurueck { color: var(--tinte-zart); }

/* ---------------------------------------------------------------------------
   Startseite
   --------------------------------------------------------------------------- */
.ch-auftakt { padding: 84px 0 64px; border-bottom: 1px solid var(--linie); }
.ch-auftakt-kicker { color: var(--rot); margin-bottom: 20px; }
.ch-auftakt h1 {
  font-family: var(--schrift-lese);
  font-weight: 600;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 26px;
  max-width: 18ch;
}
.ch-auftakt-text { max-width: var(--lesebreite); font-size: 1.12rem; color: var(--tinte-weich); }
.ch-auftakt-text p { margin: 0 0 1em; }

/* Zeitspanne als Grafik: die Jahre, um die es geht. */
.ch-spanne {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  font-family: var(--schrift-marke);
}
.ch-spanne-jahr { font-size: clamp(28px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; }
.ch-spanne-strich { flex: 1; height: 2px; background: var(--linie-kraeftig); position: relative; }
.ch-spanne-strich::after {
  content: "";
  position: absolute; right: 0; top: -4px;
  width: 10px; height: 10px; background: var(--rot);
}

/* ---------------------------------------------------------------------------
   Tipp des Tages
   Bewusst als Karteikarte gedacht: leicht gedreht, Schlagschatten, oben eine
   Reiterlasche. Das ist der eine Ort, an dem die Seite spielerisch sein darf.
   --------------------------------------------------------------------------- */
.ch-tipp { padding: 64px 0; }
.ch-tipp-karte {
  position: relative;
  background: var(--papier-karte);
  border: 1px solid var(--linie);
  box-shadow: 0 1px 0 var(--linie), 0 18px 40px -28px rgba(20, 16, 12, 0.5);
  padding: 40px 44px 36px;
  max-width: 820px;
}
.ch-tipp-lasche {
  position: absolute;
  top: -13px; left: 36px;
  background: var(--rot);
  color: #fff;
  padding: 5px 14px;
}
.ch-tipp-jahr {
  font-family: var(--schrift-marke);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sepia);
  margin: 6px 0 14px;
}
.ch-tipp-titel {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
}
.ch-tipp-text { max-width: 60ch; color: var(--tinte-weich); }
.ch-tipp-text > :first-child { margin-top: 0; }
.ch-tipp-text > :last-child { margin-bottom: 0; }
.ch-tipp-mehr {
  display: inline-block;
  margin-top: 22px;
  font-family: var(--schrift-marke);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rot);
  text-decoration: none;
  border-bottom: 2px solid var(--sepia-zart);
  padding-bottom: 2px;
}
.ch-tipp-mehr:hover { border-bottom-color: var(--rot); }

/* ---------------------------------------------------------------------------
   Kapitelseiten: die Zeitleiste als Rueckgrat
   Links laeuft eine duenne Linie mit, an der die Jahre haengen. Auf schmalen
   Geraeten verschwindet sie – dort traegt die Jahreszahl allein.
   --------------------------------------------------------------------------- */
.ch-kapitel-kopf { padding: 72px 0 48px; border-bottom: 1px solid var(--linie); }
.ch-kapitel-kopf .ch-spanne { margin-top: 28px; }
.ch-kapitel-kopf h1 {
  font-family: var(--schrift-lese);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 14px 0 0;
}
.ch-kapitel-einleitung { max-width: var(--lesebreite); margin-top: 22px; color: var(--tinte-weich); }

.ch-strang { position: relative; padding: 56px 0 72px; }
.ch-strang::before {
  content: "";
  position: absolute;
  left: 148px; top: 0; bottom: 0;
  width: 1px;
  background: var(--linie-kraeftig);
}

/* ---------------------------------------------------------------------------
   Ein Chronik-Eintrag
   --------------------------------------------------------------------------- */
.ch-eintrag {
  position: relative;
  display: grid;
  grid-template-columns: 148px 1fr;
  gap: 0 44px;
  padding: 0 0 56px;
  /* Damit Sprungmarken nicht unter dem klebenden Kopf landen. */
  scroll-margin-top: 96px;
}
.ch-eintrag-jahr {
  font-family: var(--schrift-marke);
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-align: right;
  padding-right: 22px;
  color: var(--tinte);
  position: relative;
  text-decoration: none;
}
/* Der Punkt auf der Zeitlinie. */
.ch-eintrag-jahr::after {
  content: "";
  position: absolute;
  right: -5px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rot);
  box-shadow: 0 0 0 5px var(--papier);
}
.ch-eintrag-datum {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  margin-top: 7px;
}
.ch-eintrag-inhalt { min-width: 0; }
.ch-eintrag-titel {
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 600;
  line-height: 1.25;
  margin: -4px 0 12px;
}
.ch-eintrag-text { max-width: var(--lesebreite); }
.ch-eintrag-text p { margin: 0 0 1em; }
.ch-eintrag-text > :last-child { margin-bottom: 0; }

/* Schlagworte unter einem Eintrag. */
.ch-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ch-marke-chip {
  font-family: var(--schrift-marke);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--sepia);
  border: 1px solid var(--sepia-zart);
  padding: 4px 9px;
}

/* ---------------------------------------------------------------------------
   Faksimile: Foto oder Dokument als Ausstellungsstueck
   Passepartout aussen, das Stueck innen, darunter Unterschrift und Signatur.
   --------------------------------------------------------------------------- */
.ch-faksimile { margin: 28px 0; max-width: 820px; }
.ch-faksimile-rahmen {
  background: var(--papier-karte);
  border: 1px solid var(--linie);
  padding: 18px;
  box-shadow: 0 14px 32px -26px rgba(20, 16, 12, 0.55);
}
.ch-faksimile-rahmen img { width: 100%; }
.ch-faksimile figcaption {
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--tinte-weich);
  line-height: 1.5;
}
.ch-faksimile-quelle {
  display: block;
  margin-top: 6px;
  font-family: var(--schrift-marke);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sepia);
}
/* Zwei oder drei Stuecke nebeneinander. */
.ch-faksimile-reihe { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; }

/* ---------------------------------------------------------------------------
   Zitat aus einer Quelle
   --------------------------------------------------------------------------- */
.ch-zitat {
  margin: 34px 0;
  padding-left: 26px;
  border-left: 3px solid var(--rot);
  max-width: 58ch;
}
.ch-zitat p {
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 12px;
}
.ch-zitat-herkunft {
  font-family: var(--schrift-marke);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinte-zart);
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   Person
   --------------------------------------------------------------------------- */
.ch-personen { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 32px 0; }
.ch-person-bild { background: var(--papier-tief); aspect-ratio: 4 / 5; overflow: hidden; }
.ch-person-bild img { width: 100%; height: 100%; object-fit: cover; }
.ch-person-name { font-weight: 600; margin-top: 12px; }
.ch-person-rolle { font-family: var(--schrift-marke); font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinte-zart); margin-top: 3px; }
.ch-person-zeit { font-size: 0.92rem; color: var(--sepia); margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Blaettern zwischen den Kapiteln
   --------------------------------------------------------------------------- */
.ch-blaettern {
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--linie-kraeftig);
  padding: 28px 0 64px;
}
.ch-blaettern a { text-decoration: none; max-width: 46%; }
.ch-blaettern .ch-mono { color: var(--tinte-zart); display: block; margin-bottom: 5px; }
.ch-blaettern-titel { font-weight: 600; }
.ch-blaettern-weiter { text-align: right; margin-left: auto; }

/* ---------------------------------------------------------------------------
   Fussbereich
   --------------------------------------------------------------------------- */
.ch-fuss {
  background: var(--tinte);
  color: var(--papier);
  padding: 56px 0 38px;
  margin-top: 40px;
}
.ch-fuss-innen { max-width: var(--spalte); margin: 0 auto; padding: 0 32px; }
.ch-fuss-oben { display: flex; gap: 40px; flex-wrap: wrap; justify-content: space-between; }
.ch-fuss h2 {
  font-family: var(--schrift-marke);
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rot); margin: 0 0 14px; font-weight: 600;
}
.ch-fuss-text { max-width: 44ch; color: rgba(244, 241, 234, 0.72); font-size: 0.95rem; }
.ch-fuss-links { display: flex; flex-direction: column; gap: 9px; }
.ch-fuss-links a {
  font-family: var(--schrift-marke); font-size: 0.88rem;
  color: rgba(244, 241, 234, 0.82); text-decoration: none;
}
.ch-fuss-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ch-fuss-unten {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(244, 241, 234, 0.16);
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between;
  font-family: var(--schrift-marke); font-size: 0.74rem;
  color: rgba(244, 241, 234, 0.55);
}

/* ---------------------------------------------------------------------------
   Fliesstext aus dem Texteditor
   --------------------------------------------------------------------------- */
.ch-fliess { max-width: var(--lesebreite); }
.ch-fliess h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.15; margin: 1.8em 0 0.5em; letter-spacing: -0.015em; }
.ch-fliess h3 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; line-height: 1.25; margin: 1.6em 0 0.4em; }
.ch-fliess p { margin: 0 0 1em; }
.ch-fliess a { color: var(--rot); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ch-fliess ul, .ch-fliess ol { padding-left: 1.3em; }
.ch-fliess li { margin-bottom: 0.4em; }
.ch-fliess > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Schmale Geraete
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  body.chronik { font-size: 18px; }
  .ch-innen, .ch-kopf-innen, .ch-fuss-innen { padding-left: 20px; padding-right: 20px; }
  .ch-kopf-innen { flex-direction: column; gap: 14px; align-items: stretch; }
  .ch-marke-titel { font-size: 1.35rem; }
  .ch-nav { margin-left: 0; gap: 18px; }

  /* Zeitleiste raus: auf dieser Breite traegt die Jahreszahl allein. */
  .ch-strang::before { display: none; }
  .ch-eintrag { grid-template-columns: 1fr; gap: 0; padding-bottom: 44px; }
  .ch-eintrag-jahr { text-align: left; padding-right: 0; margin-bottom: 10px; font-size: 1.6rem; }
  .ch-eintrag-jahr::after { display: none; }
  .ch-eintrag-datum { display: inline; margin-left: 12px; }
  .ch-tipp-karte { padding: 32px 24px 28px; }
  .ch-blaettern a { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Schnellsuche im Kopf
   Die Lupe sitzt rechts neben der Navigation. Das aufgeklappte Feld ist als
   Zettel gedacht, der sich ueber die Seite legt – passend zum Tipp des Tages,
   aber nuechterner.
   --------------------------------------------------------------------------- */
.ch-suche { position: relative; flex: 0 0 auto; align-self: center; }

.ch-suche-knopf {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linie-kraeftig);
  background: transparent;
  color: var(--tinte-weich);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ch-suche-knopf:hover { background: var(--papier-tief); color: var(--tinte); }
.ch-suche.ist-offen .ch-suche-knopf { background: var(--rot); border-color: var(--rot); color: #fff; }
.ch-suche-knopf:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }

.ch-suche-feld {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(460px, calc(100vw - 40px));
  background: var(--papier-karte);
  border: 1px solid var(--linie);
  box-shadow: 0 20px 44px -26px rgba(20, 16, 12, 0.6);
  padding: 16px;
  z-index: 50;
}
.ch-suche-form { display: flex; gap: 8px; }
.ch-suche-eingabe {
  flex: 1; min-width: 0;
  font-family: var(--schrift-marke);
  font-size: 0.92rem;
  padding: 10px 12px;
  border: 1px solid var(--linie-kraeftig);
  background: #fff;
  color: var(--tinte);
}
.ch-suche-eingabe:focus-visible { outline: 2px solid var(--rot); outline-offset: -1px; }
.ch-suche-ab {
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  background: var(--rot);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
}
.ch-suche-ab:hover { background: var(--rot-tief); }

.ch-suche-treffer { margin-top: 14px; }
.ch-suche-treffer[hidden] { display: none; }
.ch-suche-liste { list-style: none; margin: 0; padding: 0; }
.ch-suche-liste a {
  display: block;
  padding: 9px 10px;
  text-decoration: none;
  border-left: 2px solid transparent;
}
.ch-suche-liste a:hover,
.ch-suche-liste a:focus-visible {
  background: var(--papier-tief);
  border-left-color: var(--rot);
  outline: none;
}
.ch-suche-titel { display: block; font-weight: 600; font-size: 0.98rem; line-height: 1.3; }
.ch-suche-anriss {
  display: block;
  font-size: 0.86rem;
  color: var(--tinte-weich);
  line-height: 1.4;
  margin-top: 2px;
}
.ch-suche-leer {
  margin: 0; padding: 6px 2px;
  font-size: 0.9rem; color: var(--tinte-zart);
}
.ch-suche-alle {
  display: inline-block;
  margin-top: 12px; padding-left: 10px;
  font-family: var(--schrift-marke);
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600; color: var(--rot); text-decoration: none;
}
.ch-suche-alle:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   Trefferliste von ke_search auf der Suchseite
   --------------------------------------------------------------------------- */
.tx-kesearch-pi1 { max-width: var(--lesebreite); }
.tx-kesearch-pi1 input[type="search"],
.tx-kesearch-pi1 input[type="text"] {
  font-family: var(--schrift-marke);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--linie-kraeftig);
  background: #fff;
  width: 100%;
}
.tx-kesearch-pi1 .kesearch_searchbox { display: flex; gap: 10px; align-items: stretch; }
.tx-kesearch-pi1 input[type="submit"],
.tx-kesearch-pi1 button {
  font-family: var(--schrift-marke); font-weight: 600;
  padding: 0 20px; border: 0; background: var(--rot); color: #fff; cursor: pointer;
}
.tx-kesearch-pi1 .resetbutt { display: none; }

#kesearch_results { max-width: var(--lesebreite); }
#kesearch_results .result-list-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--linie);
}
#kesearch_results .result-title {
  font-size: 1.22rem; font-weight: 600; line-height: 1.3;
}
#kesearch_results .result-title a { text-decoration: none; }
#kesearch_results .result-title a:hover { color: var(--rot); }
#kesearch_results .result-teaser { color: var(--tinte-weich); margin-top: 5px; }
#kesearch_results .hit { background: transparent; color: var(--rot); font-weight: 600; }
#kesearch_results .result-number,
#kesearch_results .add-info { display: none; }
.kesearch_num_results {
  font-family: var(--schrift-marke); font-size: 0.78rem;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--tinte-zart); margin-bottom: 8px;
}
.kesearch_pagebrowser { margin-top: 26px; font-family: var(--schrift-marke); font-size: 0.88rem; }
.kesearch_pagebrowser ul { list-style: none; display: flex; gap: 6px; padding: 0; flex-wrap: wrap; }
.kesearch_pagebrowser a, .kesearch_pagebrowser .current {
  display: block; padding: 6px 11px; text-decoration: none;
  border: 1px solid var(--linie-kraeftig);
}
.kesearch_pagebrowser .current { background: var(--rot); color: #fff; border-color: var(--rot); }

@media (max-width: 860px) {
  /* Im gestapelten Kopf sitzt die Lupe oben rechts neben der Wortmarke. */
  .ch-suche { position: absolute; top: 16px; right: 20px; }
  .ch-suche-feld { width: calc(100vw - 40px); }
}

/* ---------------------------------------------------------------------------
   Inhaltsverzeichnis im Kopf
   Achtzehn Kapitel passen nicht als Leiste nebeneinander. Stattdessen ein
   Verzeichnis zum Aufklappen, gesetzt wie im Buch: römische Ziffer links,
   Kapitelname daneben.
   --------------------------------------------------------------------------- */
.ch-inhalt-knopf {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--schrift-marke);
  font-size: 0.85rem; font-weight: 600;
  color: var(--tinte-weich);
  background: none; border: 0; padding: 4px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ch-inhalt-knopf:hover { color: var(--tinte); border-bottom-color: var(--linie-kraeftig); }
.ch-inhalt-knopf[aria-expanded="true"] { color: var(--tinte); border-bottom-color: var(--rot); }
.ch-inhalt-striche { display: inline-flex; flex-direction: column; gap: 3px; width: 15px; }
.ch-inhalt-striche i { display: block; height: 2px; background: currentColor; }
.ch-inhalt-striche i:nth-child(2) { width: 70%; }
.ch-inhalt-striche i:nth-child(3) { width: 85%; }

.ch-inhalt {
  border-top: 1px solid var(--linie);
  background: var(--papier-karte);
  box-shadow: 0 18px 36px -30px rgba(20, 16, 12, 0.6);
}
.ch-inhalt[hidden] { display: none; }
.ch-inhalt-innen { max-width: var(--spalte); margin: 0 auto; padding: 26px 32px 32px; }
.ch-inhalt-titel { color: var(--tinte-zart); margin-bottom: 16px; }
.ch-inhalt-liste {
  list-style: none; margin: 0; padding: 0;
  columns: 3; column-gap: 40px;
}
.ch-inhalt-liste li { break-inside: avoid; margin-bottom: 2px; }
.ch-inhalt-liste a {
  display: flex; gap: 12px; align-items: baseline;
  padding: 6px 8px; text-decoration: none;
  border-left: 2px solid transparent;
}
.ch-inhalt-liste a:hover,
.ch-inhalt-liste a:focus-visible {
  background: var(--papier-tief); border-left-color: var(--rot); outline: none;
}
.ch-inhalt-liste li.ist-aktiv a { border-left-color: var(--rot); }
.ch-inhalt-ziffer {
  font-family: var(--schrift-marke);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--sepia);
  flex: 0 0 34px; text-align: right;
}
.ch-inhalt-name { font-size: 0.98rem; line-height: 1.3; }
.ch-inhalt-liste li.ist-aktiv .ch-inhalt-name { font-weight: 600; }

@media (max-width: 860px) {
  .ch-inhalt-liste { columns: 1; }
  .ch-inhalt-innen { padding: 20px 20px 26px; }
}