/* =============================================================================
   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;
}

/* align-items: center, nicht baseline: Der „Inhalt"-Schalter ist ein
   Flex-Element und hat dadurch eine andere Grundlinie als ein Textlink –
   nebeneinander stünde „Über" sonst sichtbar höher. */
.ch-nav { margin-left: auto; display: flex; gap: 26px; align-items: center; 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);
  /* Gleicher Innenabstand wie am Schalter, damit die Unterstreichung beider
     auf derselben Höhe sitzt. */
  padding: 4px 0;
  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%;
}
/* Suchfeld und Knopf auf gleicher Höhe.
   ke_search verschachtelt beides: das Feld steckt in einem div.kesearchbox,
   der Knopf in einem span.submitbutt. align-items: stretch dehnt nur diese
   Hüllen – der Knopf darin behielt seine Eigenhöhe und saß dadurch zu niedrig.
   Deshalb werden die Hüllen selbst zu Flex-Kästen und Feld wie Knopf auf volle
   Höhe gezogen. */
.tx-kesearch-pi1 .kesearch_searchbox {
  display: flex; gap: 10px; align-items: stretch;
  border: 0; margin: 0; padding: 0;   /* fieldset bringt eigene Ränder mit */
}
/* Zwei Regeln aus dem Stylesheet von ke_search halten hier dagegen; es wird
   nach unserem geladen:
     div.kesearchbox { margin-bottom: .5em }  – der Aussenabstand zieht die
        Unterkante des Feldes nach oben, waehrend der Knopf daneben auf volle
        Zeilenhoehe gedehnt bleibt. Genau das laesst ihn unten ueberstehen.
     #ke_search_sword { padding: 0.5em }      – ein ID-Selektor, der unseren
        Innenabstand schlaegt. Deshalb hier mit der Klasse davor, damit die
        Spezifitaet reicht. */
.tx-kesearch-pi1 .kesearchbox {
  flex: 1 1 auto; min-width: 0; display: flex;
  margin-bottom: 0;
}
.tx-kesearch-pi1 #ke_search_sword { padding: 12px 14px; }
.tx-kesearch-pi1 .kesearchbox input[type="search"],
.tx-kesearch-pi1 .kesearchbox input[type="text"] { flex: 1 1 auto; width: auto; }
.tx-kesearch-pi1 .kesearchbox .clearer { display: none; }

.tx-kesearch-pi1 .submitbutt { display: flex; flex: 0 0 auto; }
.tx-kesearch-pi1 .submitbutt input[type="submit"],
.tx-kesearch-pi1 input[type="submit"],
.tx-kesearch-pi1 button {
  height: 100%;
  font-family: var(--schrift-marke); font-weight: 600; font-size: 0.95rem;
  padding: 0 22px;
  /* Derselbe 1px-Rahmen wie am Eingabefeld, sonst wäre der Knopf 2px flacher. */
  border: 1px solid var(--rot);
  background: var(--rot); color: #fff; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.tx-kesearch-pi1 .submitbutt input[type="submit"]:hover,
.tx-kesearch-pi1 input[type="submit"]:hover {
  background: var(--rot-tief); border-color: var(--rot-tief);
}
.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: 22px 32px 26px; }

.ch-inhalt-kopf {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.ch-inhalt-titel { color: var(--tinte-zart); }
.ch-inhalt-filter {
  margin-left: auto;
  flex: 0 1 320px; min-width: 200px;
  font-family: var(--schrift-marke); font-size: 0.9rem;
  padding: 8px 12px;
  border: 1px solid var(--linie-kraeftig);
  background: #fff; color: var(--tinte);
}
.ch-inhalt-filter:focus-visible { outline: 2px solid var(--rot); outline-offset: -1px; }

/* Ohne Javascript bleibt alles untereinander sichtbar; erst die Klasse
   „ist-zweispaltig" schaltet auf die Nebeneinander-Ansicht um. */
.ch-inhalt-raster { display: block; }
/* Ein eigenes display schlaegt das display:none, das der Browser [hidden]
   mitgibt. Ohne diese Regel bliebe das Raster beim Filtern stehen und die
   Trefferliste erschiene darunter statt an seiner Stelle. */
.ch-inhalt-raster[hidden] { display: none; }
.ch-inhalt.ist-zweispaltig .ch-inhalt-raster {
  display: grid;
  grid-template-columns: minmax(230px, 300px) 1fr;
  gap: 28px;
  align-items: start;
}

.ch-inhalt-kapitel { list-style: none; margin: 0; padding: 0; }
.ch-inhalt-kapitel button {
  display: flex; align-items: baseline; gap: 12px; width: 100%;
  padding: 7px 10px; border: 0; background: none; cursor: pointer;
  text-align: left; font: inherit; color: inherit;
  border-left: 2px solid transparent;
}
.ch-inhalt-kapitel button:hover,
.ch-inhalt-kapitel button:focus-visible {
  background: var(--papier-tief); outline: none;
}
.ch-inhalt-kapitel button.ist-gewaehlt {
  background: var(--papier-tief); border-left-color: var(--rot);
}
.ch-inhalt-kapitel button.ist-aktiv .ch-inhalt-name { font-weight: 700; }
.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-anzahl {
  margin-left: auto;
  font-family: var(--schrift-marke); font-size: 0.72rem;
  color: var(--tinte-zart);
}

/* Rechte Spalte: nur das gewaehlte Kapitel, mit eigener Bildlaufleiste.
   Die Begrenzung sorgt dafuer, dass auch der Fuhrpark mit 91 Seiten das
   Verzeichnis nicht ueber den Bildschirm hinaus wachsen laesst. */
.ch-inhalt.ist-zweispaltig .ch-inhalt-seiten {
  max-height: min(58vh, 460px);
  overflow-y: auto;
  padding-right: 6px;
}
.ch-inhalt.ist-zweispaltig .ch-inhalt-gruppe[hidden] { display: none; }
.ch-inhalt-gruppe + .ch-inhalt-gruppe { margin-top: 20px; }

.ch-inhalt-kapitellink {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--schrift-marke); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--rot); text-decoration: none;
}
.ch-inhalt-kapitellink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Zwei Spalten als Raster, nicht als Mehrspaltensatz: `columns` legt den
   Inhalt erst in die Hoehe und laesst ihn dann nach rechts weiterlaufen – in
   einem senkrecht scrollenden Kasten entstuende waagerechter Ueberlauf. Ein
   Raster fliesst zeilenweise und scrollt wie erwartet. */
.ch-inhalt-unter {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
}
.ch-inhalt-unter li { min-width: 0; }
.ch-inhalt-unter a {
  display: block; padding: 4px 8px;
  font-size: 0.9rem; color: var(--tinte-weich);
  text-decoration: none; border-left: 2px solid transparent;
}
.ch-inhalt-unter a:hover,
.ch-inhalt-unter a:focus-visible {
  background: var(--papier-tief); border-left-color: var(--sepia);
  color: var(--tinte); outline: none;
}
.ch-inhalt-unter li.ist-aktiv > a { color: var(--tinte); font-weight: 600; }

/* Trefferliste des Filters – ersetzt waehrend der Eingabe beide Spalten. */
.ch-inhalt-treffer { margin-top: 4px; max-height: min(58vh, 460px); overflow-y: auto; }
.ch-inhalt-treffer[hidden] { display: none; }
.ch-inhalt-treffer ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px;
}
.ch-inhalt-treffer li { min-width: 0; }
.ch-inhalt-treffer a {
  display: block; padding: 6px 8px; text-decoration: none;
  border-left: 2px solid transparent;
}
.ch-inhalt-treffer a:hover,
.ch-inhalt-treffer a:focus-visible {
  background: var(--papier-tief); border-left-color: var(--rot); outline: none;
}
.ch-treffer-kapitel {
  display: block;
  font-family: var(--schrift-marke); font-size: 0.68rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--sepia);
}
.ch-treffer-name { display: block; font-size: 0.95rem; color: var(--tinte); }
.ch-inhalt-leer { padding: 10px 8px; color: var(--tinte-zart); font-size: 0.92rem; }

/* ---------------------------------------------------------------------------
   Verzeichnis auf einer Kapitelseite
   Die Kapitelseiten tragen keinen eigenen Text – hier steht, was im Kapitel
   zu finden ist. Gesetzt wie ein Inhaltsverzeichnis im Buch.
   --------------------------------------------------------------------------- */
.ch-kapitelverzeichnis { margin-top: 8px; max-width: 760px; }
.ch-kapitelverzeichnis-titel { color: var(--tinte-zart); margin-bottom: 14px; }
.ch-kapitelverzeichnis ol { list-style: none; margin: 0; padding: 0; }
.ch-kapitelverzeichnis li { border-bottom: 1px solid var(--linie); }
.ch-kapitelverzeichnis li:first-child { border-top: 1px solid var(--linie); }
.ch-kapitelverzeichnis a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 14px 10px; text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .12s, border-color .12s;
}
.ch-kapitelverzeichnis a:hover,
.ch-kapitelverzeichnis a:focus-visible {
  background: var(--papier-karte); border-left-color: var(--rot); outline: none;
}
.ch-kv-nummer {
  font-family: var(--schrift-marke);
  font-size: 0.78rem; font-weight: 700;
  color: var(--sepia);
  flex: 0 0 28px; text-align: right;
}
.ch-kv-name { font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.ch-kv-unter { font-size: 0.9rem; color: var(--tinte-zart); margin-left: auto; }

@media (max-width: 860px) {
  .ch-inhalt-unter { margin-left: 24px; }
  .ch-kapitelverzeichnis a { gap: 12px; padding: 12px 6px; }
  .ch-kv-unter { display: none; }
}

/* ---------------------------------------------------------------------------
   Fahrzeug-Datenblatt
   Merkmal und Wert als Beschreibungsliste, gesetzt wie eine Tabelle. Auf
   schmalen Geräten untereinander statt nebeneinander – zweispaltige Tabellen
   werden dort sonst unleserlich schmal.
   --------------------------------------------------------------------------- */
.ch-fahrzeug { max-width: 820px; }
.ch-fahrzeug-titel {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600; line-height: 1.2;
  margin: 0 0 20px;
}
.ch-fahrzeug-bilder { margin-bottom: 24px; }
.ch-fahrzeug-bilder .ch-faksimile + .ch-faksimile { margin-top: 18px; }

.ch-fahrzeug-daten { margin: 0; border-top: 1px solid var(--linie-kraeftig); }
.ch-fahrzeug-zeile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--linie);
}
.ch-fahrzeug-zeile dt {
  font-family: var(--schrift-marke);
  font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tinte-zart);
  padding-top: 3px;
}
.ch-fahrzeug-zeile dd { margin: 0; }

.ch-fahrzeug-besonderheit {
  margin-top: 24px; padding: 18px 20px;
  background: var(--papier-karte);
  border-left: 3px solid var(--sepia);
}
.ch-fahrzeug-besonderheit .ch-mono { color: var(--sepia); margin-bottom: 7px; }
.ch-fahrzeug-besonderheit p { margin: 0; }

@media (max-width: 720px) {
  .ch-fahrzeug-zeile { grid-template-columns: 1fr; gap: 2px; }
  .ch-fahrzeug-zeile dt { padding-top: 0; }
}

/* ---------------------------------------------------------------------------
   Amtsträger
   Die Dienstjahre bekommen zusätzlich einen Balken. In den Quelldokumenten
   steht dafür ein eigenes Balkendiagramm auf einer Extraseite – hier sitzt der
   Vergleich direkt an der Zahl.
   --------------------------------------------------------------------------- */
.ch-amt { max-width: 820px; }
.ch-amt-titel { font-size: clamp(21px, 2.4vw, 27px); font-weight: 600; margin: 0 0 18px; }
.ch-amt-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ch-amt-tabelle th {
  font-family: var(--schrift-marke);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--tinte-zart);
  text-align: left; padding: 0 10px 8px 0;
  border-bottom: 1px solid var(--linie-kraeftig);
}
.ch-amt-tabelle td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--linie); vertical-align: baseline; }
.ch-amt-zeit { white-space: nowrap; color: var(--sepia); font-family: var(--schrift-marke); font-size: 0.86rem; }
.ch-amt-name { font-weight: 600; }
.ch-amt-jahre-kopf, .ch-amt-jahre { width: 33%; }
.ch-amt-jahre { position: relative; white-space: nowrap; }
.ch-amt-zahl { font-family: var(--schrift-marke); font-size: 0.86rem; color: var(--tinte-weich); }
.ch-amt-balken {
  display: block; height: 4px; margin-top: 5px;
  background: var(--sepia-zart); min-width: 2px;
}

@media (max-width: 640px) {
  .ch-amt-tabelle, .ch-amt-tabelle tbody, .ch-amt-tabelle tr, .ch-amt-tabelle td { display: block; }
  .ch-amt-tabelle thead { display: none; }
  .ch-amt-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .ch-amt-tabelle td { border: 0; padding: 1px 0; }
  .ch-amt-jahre-kopf, .ch-amt-jahre { width: auto; }
}

@media (max-width: 860px) {
  .ch-inhalt-innen { padding: 18px 20px 24px; }
  /* Nebeneinander lohnt sich hier nicht mehr – Kapitel und Seiten
     untereinander, die Hoehenbegrenzung bleibt. */
  .ch-inhalt.ist-zweispaltig .ch-inhalt-raster { grid-template-columns: 1fr; gap: 16px; }
  .ch-inhalt.ist-zweispaltig .ch-inhalt-seiten { max-height: 42vh; }
  .ch-inhalt-unter, .ch-inhalt-treffer ul { grid-template-columns: 1fr; }
  .ch-inhalt-kopf { gap: 12px; }
  .ch-inhalt-filter { margin-left: 0; flex: 1 1 100%; }
}

/* Menütrenner: erscheinen im Menü wie ein Kapitel, sind aber kein Verweis. */
.ch-nav-trenner {
  font-family: var(--schrift-marke); font-size: 0.85rem; font-weight: 500;
  color: var(--tinte-weich); padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.ch-inhalt-kapitellink.ist-trenner { color: var(--tinte-zart); cursor: default; }
.ch-inhalt-kapitellink.ist-trenner:hover { text-decoration: none; }