/* =====================================================================
   Central-Hotel Kaiserhof – Timeline / Geschichte
   Prototyp. Namespace: .kh-  (Kollisionsschutz im WP-Theme)
   Farben & Fonts abgeleitet aus centralhotel.de
   ===================================================================== */

:root {
  /* Farben (aus centralhotel.de) */
  --kh-bg:            #fbf9f4;  /* warmes Off-White */
  --kh-bg-dark:       #002302;  /* tiefes Dunkelgrün (Feature-Sektionen) */
  --kh-primary-light: #f9f5ea;  /* sehr heller, warmer Sand-Ton (getönte Breakout-Flächen) */
  --kh-surface:       #ffffff;
  --kh-text:          #2c2824;  /* warmes Fast-Schwarz */
  --kh-text-muted:    #6b6256;
  --kh-text-invert:   #f3efe6;  /* Text auf Dunkelgrün */
  --kh-gold:          #c4a150;  /* Marken-Gold (Akzent/Linie/Display) */
  --kh-gold-light:    #d1b266;
  --kh-gold-dark:     #7d6526;  /* Gold dunkel genug für Text auf Hell (≥4.5:1) */
  --kh-line:          #e2d6b8;  /* Timeline-Linie auf Hell */
  --kh-line-dark:     rgba(196, 161, 80, .45);

  /* Typografie */
  --kh-font-head: 'Julius Sans One', sans-serif;
  --kh-font-body: 'PT Sans', sans-serif;

  /* Spacing */
  --kh-space:      1rem;
  --kh-measure:    44rem;       /* narrative Lesebreite */
  --kh-rail:       18px;        /* X-Position der Timeline-Linie (mobil) */
  --kh-radius:     2px;
  --kh-radius-media: 6px;       /* sanfte Rundung für Timeline-Bilder (Entry/Context) */

  /* Duotone: vereinheitlicht alle historischen S/W-/Sepia-Bilder auf einen
     warmen Ton. SVG-Filter (#kh-duotone in index.html) bildet jeden Grauwert
     exakt zwischen Schatten (#241a10) und Licht (#e8dcc5) ab – der Weißpunkt
     ist damit exakt #e8dcc5, was sepia() nicht treffen kann. */
  --kh-duotone:    url("#kh-duotone");

  /* Motion */
  --kh-ease:       cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------- Reset / Basis ------------------------- */
.kh-timeline *,
.kh-timeline *::before,
.kh-timeline *::after { box-sizing: border-box; }

/* WP-Theme-Schutz: das Live-Theme setzt global `hyphens: auto` und trennt
   damit die Versal-Headlines mitten im Wort („CENTRAL-HO-/TEL"). Im ganzen
   Namespace auf manuelle Trennung zurücksetzen (= Prototyp-Verhalten).
   !important nötig: Theme-Regel `p, h1–h6 { hyphens: auto !important }`
   gewinnt sonst trotz geringerer Spezifität. */
.kh-timeline, .kh-timeline *,
.kh-timenav, .kh-timenav *,
.kh-lightbox, .kh-lightbox * { hyphens: manual !important; -webkit-hyphens: manual !important; }

/* WP-Theme-Schutz: Theme-Dekorationen an Überschriften/Bildern neutralisieren
   (Linien/Borders, BG-Flächen, Padding, ::after-Zierlinien). Die Timeline soll
   template-unabhängig identisch zum Prototyp rendern. Eigene Heading-Styles
   nutzen keine Pseudo-Elemente/Borders → Reset kollidiert nicht. */
.kh-timeline h1, .kh-timeline h2, .kh-timeline h3, .kh-timeline h4 {
  border: 0;
  background: none;
  padding: 0;
  /* Theme setzt text-align direkt am h1 → bricht unsere Container-Vererbung
     (Hero mobil zentriert, Einträge rechts). inherit stellt sie wieder her. */
  text-align: inherit;
  /* Theme bricht auf Mobile Wörter hart um (GESCHICH-TE) – zusätzlich zu
     hyphens auch word-break/overflow-wrap neutralisieren. */
  word-break: normal;
  overflow-wrap: normal;
}
/* WPCodeBox-Snippet 30 (site-weit): h3, h4 { letter-spacing: .1em !important;
   font-weight: 100 !important }. Seit die Einträge H3/H4 sind (Kapitel-H2 davor),
   greift das hier → Gewicht zurücksetzen; letter-spacing steht in den
   Titel-Klassen jeweils mit !important. */
.kh-timeline h3, .kh-timeline h4 { font-weight: 400 !important; }
.kh-timeline h1::before, .kh-timeline h1::after,
.kh-timeline h2::before, .kh-timeline h2::after,
.kh-timeline h3::before, .kh-timeline h3::after,
.kh-timeline h4::before, .kh-timeline h4::after { content: none; }
.kh-timeline img { border: 0; box-shadow: none; }

.kh-timeline {
  margin: 0;
  background: var(--kh-bg);
  color: var(--kh-text);
  font-family: var(--kh-font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.kh-timeline img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kh-timeline figure { margin: 0; }

/* ---- Einheitlicher Sepia-Ton für die historische Ära (bis 1968) ---- */
.kh-timeline__intro-media img,
.kh-timeline__list .kh-timeline__item img { filter: var(--kh-duotone); }
/* Ab dem ersten Farb-Eintrag (1970er) und alles danach: wieder farbig.
   --era-color markiert den Schnitt, ~ erfasst alle folgenden Einträge. */
.kh-timeline__list .kh-timeline__item--era-color img,
.kh-timeline__list .kh-timeline__item--era-color ~ .kh-timeline__item img { filter: none; }
/* Einzel-Ausnahme innerhalb der Sepia-Ära: zeigt ein bewusst farbiges Motiv
   (z.B. 1936 – die leuchtend rote Broschüre als Bildaussage). */
.kh-timeline__list .kh-timeline__item--full-color img { filter: none; }

/* ------------------------- Skip-Link ------------------------- */
.kh-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--kh-bg-dark);
  color: var(--kh-text-invert);
  font-family: var(--kh-font-body);
  text-decoration: none;
}
.kh-skip-link:focus { left: 1rem; top: 1rem; }

/* ------------------------- Fokus-Styles ------------------------- */
.kh-timeline a:focus-visible,
.kh-skip-link:focus-visible {
  outline: 3px solid var(--kh-gold);
  outline-offset: 3px;
  border-radius: var(--kh-radius);
}

/* ===================== INTRO / HERO ===================== */
.kh-timeline__intro {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}
.kh-timeline__intro-media {
  margin: 0;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: #ece5d6;
}
.kh-timeline__intro-text {
  max-width: var(--kh-measure);
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) 1.5rem 0;
  text-align: center;
}
.kh-timeline__eyebrow {
  margin: 0 0 1.25rem;
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}

/* Jahres- und Dekaden-Angaben: nie versalisieren – "1980er" bleibt "1980er",
   nicht "1980ER". Greift überall, da <time> ausschließlich Jahreszahlen führt. */
.kh-timeline time {
  text-transform: none;
}
.kh-timeline__headline {
  margin: 0 0 1.5rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  /* Max bewusst niedriger: in der schmalen Split-Hero-Spalte (~504px @1280)
     passen so zwei Wörter pro Zeile, "Central-Hotel" bleibt als Einheit ganz. */
  font-size: clamp(2rem, 6vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kh-bg-dark);
}
.kh-timeline__lead {
  max-width: 38rem;
  margin: 0 auto;
  font-size: 1.1875rem;
  color: var(--kh-text-muted);
}

/* ===================== KURZCHRONIK / PROLOG ===================== */
/* Fünf Stationen zwischen Hero und Zeitleiste – mit dem Vokabular der
   Timeline (Rail, Knoten, Display-Jahreszahlen), nicht als Kachel.
   Mobile: Rail exakt auf der x-Position der Timeline-Linie, die darunter
   einfadet → die Chronik „geht aus dem Prolog hervor“. */
.kh-facts {
  position: relative;
  max-width: var(--kh-measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 4rem) 1.5rem .5rem;
}
/* Abschnitts-Titel (H2) für Prolog und Chronik – eine Stufe über den
   Eintrags-Titeln (H3), eine unter der H1. margin statt padding: der
   Theme-Reset `.kh-timeline h2 { padding: 0 }` würde ein Padding
   überschreiben. Mobil auf der Textspalte, bündig mit den Einträgen. */
.kh-timeline__chapter {
  margin: 0 1.5rem 0 calc(1.5rem + var(--kh-rail) + 2.25rem);  /* Textspalte der Einträge */
  padding: 0;
  text-wrap: balance;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kh-bg-dark);
}
.kh-facts .kh-timeline__chapter { margin: 0 0 1.5rem calc(var(--kh-rail) + 2.25rem); }  /* Section hat das 1.5rem-Padding schon */
/* Chronik-Titel: Pause nach dem Prolog, darunter fadet die Achse ein */
#kh-chronik {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  margin-bottom: 1rem;
}
.kh-facts__list {
  position: relative;
  margin: 0;
  display: grid;
  gap: 1.25rem;
}
/* Rail: verbindet die Knoten vom ersten bis zum letzten Jahr */
.kh-facts__list::before {
  content: "";
  position: absolute;
  left: var(--kh-rail);
  top: .5rem;
  bottom: .5rem;
  width: 2px;
  transform: translateX(-50%);
  background: var(--kh-line);
}
.kh-facts__row {
  position: relative;
  padding-left: calc(var(--kh-rail) + 2.25rem);
}
/* Knoten wie beim Hannover-Kontext (10 px, Goldrand, Hintergrundfüllung) */
.kh-facts__row::before {
  content: "";
  position: absolute;
  left: calc(var(--kh-rail) - 5px);
  top: .45rem;                     /* optische Mitte der Jahreszahl (22 px, line-height 1) */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kh-bg);
  border: 2px solid var(--kh-gold);
  box-shadow: 0 0 0 3px var(--kh-bg);
}
.kh-facts__year {
  margin: 0 0 .2rem;
  font-family: var(--kh-font-head);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--kh-bg-dark);
}
.kh-facts__text {
  margin: 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--kh-text);
}

/* ===================== TIMELINE-LISTE ===================== */
.kh-timeline__list {
  position: relative;
  max-width: var(--kh-measure);
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  list-style: none;
  counter-reset: kh;
}
/* die durchgehende Linie – oben einfadend, unten durchlaufend bis zur
   Karte (siehe .kh-closing): die Linie wird dort zum Karten-Rahmen. */
.kh-timeline__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.5rem + var(--kh-rail));
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0,
    var(--kh-line) 4rem,
    var(--kh-line) 100%);
}

.kh-timeline__item {
  position: relative;
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
}

/* ---------- Kaiserhof-Meilenstein (kompakt) ---------- */
.kh-entry {
  position: relative;
  padding-left: calc(var(--kh-rail) + 2.25rem);
}
/* Knoten gegenüber der Jahreszahl auf der Linie – Bildmarke statt Punkt (Test) */
.kh-entry__year::before {
  content: "";
  position: absolute;
  left: calc(-2.25rem - 14px);     /* auf der Rail-Linie, links der Jahreszahl */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--kh-bg) url("../img/kh-bildmarke.svg") center / 58% no-repeat;
  box-shadow: 0 0 0 3px var(--kh-bg);
}
.kh-entry .kh-entry__media {     /* erhöhte Spezifität, schlägt den figure-Reset (.kh-timeline figure) */
  aspect-ratio: 3 / 2;
  margin-bottom: 1rem;           /* Luft Bild->Eyebrow, aber enger als der Eintragsabstand = Bild gehört zum Text darunter (nur Mobile; Desktop = 0) */
  overflow: hidden;
  border-radius: var(--kh-radius-media);
  background: #ece5d6;
}
.kh-entry__media--placeholder { outline: 2px dashed var(--kh-gold); outline-offset: -2px; }
.kh-entry__media--bottom img { object-position: bottom; }  /* hochformatiges Motiv (z.B. 1936-Broschuere) unten ausrichten, bis ein besseres Bild vorliegt */
.kh-entry__eyebrow,
.kh-feature__eyebrow,
.kh-context__eyebrow {
  margin: 0 0 .35rem;
  font-family: var(--kh-font-head);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-entry__year {
  display: block;
  position: relative;          /* Anker für den Bildmarke-Knoten */
  font-family: var(--kh-font-head);
  font-size: clamp(2.25rem, 7vw, 3.25rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--kh-bg-dark);
}
.kh-entry__title {
  margin: .5rem 0 .65rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  color: var(--kh-text);
}
.kh-entry__text { margin: 0; max-width: 34rem; }

/* ===================== EDITORIAL-BAND =====================
   Generischer, wiederverwendbarer Vollbreiten-Textblock (full-bleed, heller
   Sandton wie Stimmen/Gästebuch). Der BG überdeckt die Mittelachse sauber.
   Immer sichtbar (kein Aufklapp). Mehrspaltig auf Desktop, gestapelt auf
   Mobile. Wiederverwendbar für künftige redaktionelle Einschübe. */
.kh-timeline__item--editorial {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.kh-editorial {
  padding: clamp(1.75rem, 4vw, 3rem) 1.5rem;
  background: #f8f5ee;               /* Hauch dunkler als Seiten-BG (#fbf9f4) – unterbewusste Section-Trennung, ohne „Band"-Wirkung */
  color: var(--kh-text);
}
.kh-editorial__inner { max-width: 72rem; margin: 0 auto; }
.kh-editorial__head { max-width: 44rem; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.kh-editorial__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-editorial__title {
  margin: 0 0 .75rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: .02em !important;
  color: var(--kh-text);
}
.kh-editorial__lead { margin: 0; font-size: 1rem; line-height: 1.6; }
.kh-editorial__columns { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.kh-editorial__column { margin: 0; }
.kh-editorial__column-title {
  margin: 0 0 1rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  line-height: 1.7;                /* Theme setzt h4 { line-height: 35px } – Prototyp-Wert (geerbt) festschreiben */
  font-size: .9375rem;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-editorial__column > p { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.65; }
.kh-editorial__quote {
  margin: 1.25rem 0;                 /* zwischen den Absätzen – Abstand oben & unten */
  padding-left: clamp(1rem, 2vw, 1.25rem);
  border-left: 3px solid var(--kh-gold);
}
.kh-editorial__quote p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--kh-text);
}
.kh-editorial__quote p::before { content: "„"; }
.kh-editorial__quote p::after  { content: "“"; }
.kh-editorial__quote cite {
  display: block;
  margin-top: .6rem;
  font-style: normal;
  font-size: .875rem;
  letter-spacing: .04em;
  color: var(--kh-gold-dark);
}

/* ---------- Hannover-Kontextblock ---------- */
.kh-timeline__item--context .kh-context {
  position: relative;
  padding: 1.75rem 1.75rem 1.75rem calc(var(--kh-rail) + 2.25rem);
}
.kh-context::before {
  content: "";
  position: absolute;
  left: calc(var(--kh-rail) - 3px);
  top: 2.1rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--kh-bg);
  border: 2px solid var(--kh-gold);
}
.kh-context__title {
  margin: 0 0 .65rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.35;
  letter-spacing: .02em !important;
  text-transform: uppercase;
  color: var(--kh-bg-dark);
}
.kh-context__text {
  margin: 0 0 1.25rem;
  max-width: 32rem;
  color: var(--kh-text-muted);
  font-style: italic;
}
.kh-context__media {
  aspect-ratio: 3 / 2;
  max-width: 22rem;
  overflow: hidden;
  border-radius: var(--kh-radius-media);
  opacity: .96;
  filter: saturate(.9);
}
.kh-context__media--placeholder { outline: 2px dashed var(--kh-gold); outline-offset: -2px; }

/* ---------- Feature-Sektion (vollbreit, dunkel) ---------- */
.kh-timeline__item--feature {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-block: clamp(3rem, 8vw, 6rem);
}
/* Zwei direkt aufeinanderfolgende Features stoßen ohne Lücke aneinander –
   sonst wirkt der schmale Page-BG-Streifen zwischen zwei vollbreiten
   Farbflächen wie eine Fehlnaht. Sie bilden so ein bewusstes Doppel-Feature. */
.kh-timeline__item--feature:has(+ .kh-timeline__item--feature) { margin-bottom: 0; }
.kh-timeline__item--feature + .kh-timeline__item--feature { margin-top: 0; }
/* Block-Verschmelzung: kein Abstand nach unten (z.B. 1974 + Reimann-Band + 1980
   = ein zusammenhaengender Gastronomie-Block statt drei Einzelteile mit Luecke).
   Das Folge-Item verliert zusaetzlich seinen oberen Abstand (Features tragen
   margin-block, daher reicht margin-bottom:0 allein nicht). */
.kh-timeline__item--merge-down { margin-bottom: 0; }
.kh-timeline__item--merge-down + .kh-timeline__item { margin-top: 0; }
.kh-feature {
  background: var(--kh-bg-dark);
  color: var(--kh-text-invert);
}
.kh-feature__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.kh-feature__body {
  max-width: var(--kh-measure);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
}
.kh-feature__eyebrow { color: var(--kh-gold-light); }
.kh-feature__year {
  display: block;
  font-family: var(--kh-font-head);
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--kh-gold);
}
.kh-feature__title {
  margin: .5rem 0 1rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  color: var(--kh-text-invert);
}
.kh-feature__text {
  margin: 0;
  max-width: 40rem;
  font-size: 1.1875rem;
  color: rgba(243, 239, 230, .85);
}
/* Hervorgehobenes Statement (z. B. »Hannover-Lösung«): getaktete Sätze, jeder
   auf eigener Zeile. Hervorhebung allein über den Gold-Rahmen – Text bleibt im
   Creme-Weiß, damit es sich ruhig in die Spalte einfügt. */
.kh-feature__statement {
  margin: clamp(1.75rem, 4vw, 2.5rem) 0;
  max-width: 40rem;
  padding-left: clamp(1rem, 3vw, 1.5rem);
  border-left: 3px solid var(--kh-gold);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--kh-text-invert);
}
.kh-feature__statement span { display: block; }
/* Textlink in Feature-Sektionen (z. B. zum Blog-Beitrag) – auf Dunkelgrün. */
.kh-feature__more { margin: clamp(1.5rem, 3vw, 2rem) 0 0; }
.kh-feature__link {
  font-size: 1.0625rem;
  color: var(--kh-gold-light);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.kh-feature__link:hover,
.kh-feature__link:focus-visible { color: var(--kh-text-invert); }
/* etwas zurückgenommenes Bild für die Kriegs-Feature */
.kh-timeline__item--somber .kh-feature__media img { filter: grayscale(.35) brightness(.92); }

/* Zweiter Absatz im Feature-Body (z. B. Andenken-Text nach dem Leadtext) */
.kh-feature__text + .kh-feature__text { margin-top: 1rem; }

/* Glückwünsche zum Jubiläum: sichtbares Karten-Grid unten in der Section.
   Helle Sand-Fläche (VIP-/Gästebuch-Farbwelt) statt Dunkelgrün – setzt sich
   ruhig vom dunklen 2025-Feature darunter ab; mobil 1-spaltig, Desktop-Spalten
   + Vollbreiten-Band siehe Media Query. */
.kh-feature__voices {
  background: var(--kh-primary-light);
  color: var(--kh-text);
  padding: clamp(2rem, 5vw, 3rem) 1.5rem clamp(2.5rem, 6vw, 4rem);
}
.kh-feature__voices-title {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--kh-font-head);
  font-weight: 400;
  line-height: 1.7;                /* Theme setzt h4 { line-height: 35px } – Prototyp-Wert (geerbt) festschreiben */
  font-size: .9375rem;
  letter-spacing: .08em !important;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-feature__voices-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
.kh-feature__voice {
  margin: 0;
  height: 100%;
  padding-left: clamp(1rem, 2vw, 1.25rem);
  border-left: 3px solid var(--kh-gold);
}
.kh-feature__voice blockquote {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--kh-text);
}
.kh-feature__voice blockquote::before { content: "„"; }
.kh-feature__voice blockquote::after  { content: "“"; }
.kh-feature__voice figcaption {
  margin-top: .75rem;
  font-size: .9375rem;
  color: var(--kh-text);
}
.kh-feature__voice-role {
  display: block;
  margin-top: .15rem;
  font-size: .8125rem;
  letter-spacing: .03em;
  color: var(--kh-gold-dark);
}

/* ===================== GÄSTEBUCH-EINSCHUB ===================== */
/* Section-BG bricht voll aus (full-bleed, randlos). */
.kh-timeline__item--vip {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.kh-vip {
  padding: clamp(2.75rem, 6vw, 4.5rem) 1.5rem;
  background: var(--kh-primary-light);
  color: var(--kh-text);
}
/* Breakout-Container: breiter als der Seiten-Content, aber begrenzt. */
.kh-vip__inner {
  max-width: 78rem;
  margin: 0 auto;
}
.kh-vip__head { max-width: 44rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.kh-vip__eyebrow {
  margin: 0 0 .75rem;
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-vip__title {
  margin: 0 0 1rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: .04em !important;
  text-transform: uppercase;
  color: var(--kh-text);
}
.kh-vip__lead {
  max-width: 34rem;
  margin: 0;
  color: var(--kh-text-muted);
}

/* ---- Gästebuch (ARIA-Tabs): Register links, Eintrag rechts ---- */
.kh-guestbook {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 768px) {
  .kh-guestbook {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;          /* Register oben, CTA-Zeile darunter */
    grid-template-areas:
      "register entries"
      "cta      entries";
    align-items: start;
  }
  .kh-guestbook__register { grid-area: register; }
  .kh-guestbook__entries  { grid-area: entries; }
  .kh-guestbook .kh-vip__cta { grid-area: cta; }   /* sitzt direkt unter dem Register */
}

/* Register = Tab-Leiste (Namens-Index) */
.kh-guestbook__register {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kh-line);
}
@media (max-width: 767px) {
  /* Mobile: horizontal scrollbares Namensband statt langer Liste */
  .kh-guestbook__register {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    border-top: 0;
    padding-bottom: .5rem;
    scrollbar-width: thin;
  }
  .kh-guestbook__register > li { flex: 0 0 auto; }
}
.kh-guestbook__entry {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .85rem;
  align-items: baseline;
  width: 100%;
  padding: .85rem .6rem;
  border: 0;
  border-bottom: 1px solid var(--kh-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  color: var(--kh-text);
  font-family: inherit;
  transition: background-color var(--kh-dur-fast, .18s) var(--kh-ease);
}
@media (max-width: 767px) {
  .kh-guestbook__entry {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    border: 1px solid var(--kh-line);
    border-radius: 999px;
    padding: .5rem .9rem;
    white-space: nowrap;
  }
  .kh-guestbook__entry .kh-guestbook__meta { display: none; }
}
.kh-guestbook__num {
  font-family: var(--kh-font-head);
  font-size: .75rem;
  letter-spacing: .1em;
  color: var(--kh-gold-dark);
}
.kh-guestbook__name {
  grid-column: 2;
  font-family: var(--kh-font-head);
  font-size: 1.0625rem;
  letter-spacing: .03em;
  line-height: 1.2;
}
.kh-guestbook__meta {
  grid-column: 2;
  margin-top: .15rem;
  font-size: .8125rem;
  color: var(--kh-text-muted);
}
/* aktiver Eintrag: Gold-Akzent (kein Skeuomorphismus) */
.kh-guestbook__entry[aria-selected="true"] {
  background: linear-gradient(90deg, rgba(196, 161, 80, .14), transparent 72%);
  box-shadow: inset 3px 0 0 var(--kh-gold);
}
.kh-guestbook__entry[aria-selected="true"] .kh-guestbook__name { color: var(--kh-gold-dark); }
@media (hover: hover) {
  .kh-guestbook__entry:hover { background: rgba(196, 161, 80, .08); }
}
.kh-guestbook__entry:focus-visible {
  outline: 2px solid var(--kh-gold-dark);
  outline-offset: -2px;
}
@media (max-width: 767px) {
  .kh-guestbook__entry[aria-selected="true"] {
    box-shadow: none;
    border-color: var(--kh-gold);
    background: rgba(196, 161, 80, .14);
  }
}

/* Eintrag-Panel (rechts) */
.kh-guestbook__panel { margin: 0; }
.kh-guestbook__panel[hidden] { display: none; }
/* FOUC-Schutz: sobald JS läuft, nur das aktive Panel zeigen (bevor das
   Script pro Panel hidden setzt). Ohne JS bleiben alle Panels als Liste. */
.kh-js .kh-guestbook__panel:not(.is-active) { display: none; }
.kh-guestbook__panel:focus-visible {
  outline: 2px solid var(--kh-gold-dark);
  outline-offset: 4px;
}
.kh-guestbook__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}
/* Immer sichtbares Lupe-Badge → signalisiert ohne Hover, dass das Bild
   vergrößerbar ist. Dunkler Kreis + weiße Lupe trägt auf jedem Motiv. */
.kh-guestbook__media::after,
.kh-story__media::after {
  content: "";
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.15rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3);
  pointer-events: none;
  transition: background-color var(--kh-dur-fast, .18s) var(--kh-ease);
}
@media (hover: hover) {
  .kh-guestbook__media:hover::after,
  .kh-story__media:hover::after { background-color: var(--kh-gold-dark); }
}
.kh-guestbook__media:focus-visible::after,
.kh-story__media:focus-visible::after { background-color: var(--kh-gold-dark); }
.kh-guestbook__media img {
  display: block;
  width: 100%;
  /* EXPERIMENT: einheitliche Rahmenform via festem Seitenverhältnis + cover.
     Platzhalter-Motive werden später passend (auf dieses Ratio) ersetzt. */
  aspect-ratio: var(--kh-gb-ratio, 3 / 2);
  height: auto;
  object-fit: cover;
  background: #fff;
  /* dezente Fassung statt Foto-Ecken/Lederoptik. */
  border: 1px solid rgba(44, 40, 36, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}
/* EXPERIMENT: unser Duotone-Overlay → einheitlicher warmer Farbton über
   gemischte (s/w + farbige) Motive. Muss die "Farb-Ära"-Ausnahme
   (filter:none ab --era-color, Zeile ~68) überstimmen → gleiche Spezifität,
   aber später in der Quelle. */
.kh-timeline__list .kh-timeline__item--vip .kh-guestbook__media img {
  filter: var(--kh-duotone);
}
/* DEV-ONLY: Liefers ist Hochformat → bei 3:2-cover oben ausrichten, damit die
   Köpfe sichtbar bleiben. Temporär, bis das Motiv passend (3:2) ersetzt ist. */
#gb-panel-liefers .kh-guestbook__media img { object-position: top; }
.kh-guestbook__media:focus-visible,
.kh-story__media:focus-visible {
  outline: 2px solid var(--kh-gold-dark);
  outline-offset: 3px;
}
.kh-guestbook__caption {
  margin: 1rem 0 0;
  max-width: 42rem;
  color: var(--kh-text-muted);
  font-size: .9375rem;
  line-height: 1.6;
}

/* Crossfade beim Wechsel — nur bei erlaubter Bewegung.
   opacity + minimaler scale (Fokus-Settle), kein generischer translateY. */
@media (prefers-reduced-motion: no-preference) {
  .kh-guestbook__panel--enter .kh-guestbook__media,
  .kh-guestbook__panel--enter .kh-guestbook__caption {
    animation: kh-gb-enter 260ms var(--kh-ease) both;
  }
  .kh-guestbook__panel--enter .kh-guestbook__caption { animation-delay: 40ms; }
}
@keyframes kh-gb-enter {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* CTA unter dem Register — schlichter Fließtext über dem Button.
   Abstand entsteht über das Grid-Row-Gap (Desktop) bzw. Stack-Gap (Mobile). */
.kh-vip__cta { margin: 0; }
.kh-vip__cta-line {
  margin: 0 0 1rem;
  max-width: 40rem;
  color: var(--kh-text-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* ---- Lightbox (geteiltes <dialog>) ---- */
.kh-lightbox {
  /* WP-Theme-Schutz: Theme-Reset `* { margin: 0 }` löscht das UA-Default
     `dialog { margin: auto }` → Lightbox klebte oben links. Explizit setzen. */
  margin: auto;
  width: min(92vw, 60rem);
  max-width: 92vw;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--kh-text-invert);
}
.kh-lightbox::backdrop { background: rgba(0, 0, 0, .82); }
.kh-lightbox__close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.kh-lightbox__close:focus-visible { outline: 2px solid var(--kh-gold); outline-offset: 2px; }
.kh-lightbox__fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;     /* Bild + Caption auf gemeinsamer Mittelachse */
}
.kh-lightbox__img {
  display: block;
  width: auto;             /* Element = echte Bildbreite, kein Letterbox-Rahmen */
  max-width: 100%;
  max-height: 80vh;
  height: auto;
}
.kh-lightbox__caption {
  margin: .75rem 0 0;
  max-width: 48rem;        /* lange Captions umbrechen statt überbreit zu werden */
  text-align: center;      /* mittig unter dem Bild, unabhängig vom Seitenverhältnis */
  font-size: .9375rem;
  line-height: 1.5;
  color: #ececec;
}
@media (prefers-reduced-motion: no-preference) {
  .kh-lightbox[open] { animation: kh-gb-enter 200ms var(--kh-ease); }
}

/* ===================== VERTIEFTE STORY-SECTION (1947) =====================
   Breakout-Modul (full-bleed, heller Sandton wie das Gästebuch): Galerie +
   Highlight-Zahlen + Accordion (<details>) + Catering-CTA. Die Galeriebilder
   teilen sich die Lightbox (siehe [data-zoom]); ohne JS bleibt die Galerie als
   Raster aus aufklickbaren, aber nicht-zoombaren Bildern bestehen. */
.kh-timeline__item--story {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.kh-story {
  padding: clamp(2.75rem, 6vw, 4.5rem) 1.5rem;
  background: var(--kh-primary-light);
  color: var(--kh-text);
}
.kh-story__inner { max-width: 78rem; margin: 0 auto; }
.kh-story__head { max-width: 46rem; margin: 0 0 clamp(2rem, 4vw, 3rem); }
.kh-story__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-story__year {
  display: block;
  font-family: var(--kh-font-head);
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--kh-gold);
}
.kh-story__title {
  margin: .4rem 0 1rem;
  font-family: var(--kh-font-head);
  font-weight: 400;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: .03em !important;
  text-transform: uppercase;
  color: var(--kh-text);
}
.kh-story__lead {
  margin: 0;
  max-width: 42rem;
  font-size: 1.1875rem;
  color: var(--kh-text-muted);
}

/* ---- Galerie: Banner (volle Breite) + Raster ---- */
.kh-story__gallery {
  list-style: none;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  display: grid;
  gap: clamp(.6rem, 1.5vw, 1rem);
  grid-template-columns: repeat(2, 1fr);
}
.kh-story__cell { margin: 0; }
.kh-story__cell--wide { grid-column: 1 / -1; }
.kh-story__figure { margin: 0; }
.kh-story__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #ece5d6;
  border-radius: var(--kh-radius-media);
  overflow: hidden;
  cursor: zoom-in;
  line-height: 0;
}
.kh-story__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
.kh-story__cell--wide .kh-story__media img { aspect-ratio: 16 / 7; }
/* Hochformat-Motive (Köpfe oben) beim 3:2-Cover-Crop oben halten – Köpfe nicht kappen */
.kh-story__media--top img { object-position: top; }
.kh-story__cap {
  margin: .65rem 0 0;
  color: var(--kh-text-muted);
  font-size: .8125rem;
  line-height: 1.5;
}

/* ---- Highlight-Zahlen ---- */
.kh-story__stats {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--kh-line);
  border-bottom: 1px solid var(--kh-line);
}
.kh-story__stat { margin: 0; }
.kh-story__stat-num {
  font-family: var(--kh-font-head);
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--kh-gold-dark);
}
.kh-story__stat-label {
  margin: .45rem 0 0;
  max-width: 18rem;
  color: var(--kh-text-muted);
  font-size: .9375rem;
  line-height: 1.5;
}

/* ---- Fließtext + Accordion ---- */
.kh-story__body { max-width: var(--kh-measure); }
.kh-story__body > p { margin: 0 0 1.1rem; }
.kh-story__more { border-top: 1px solid var(--kh-line); margin-top: .5rem; }
.kh-story__more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;                /* Standard-Dreieck weg (FF) */
  font-family: var(--kh-font-head);
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
.kh-story__more-toggle::-webkit-details-marker { display: none; }  /* Safari/Chrome */
@media (hover: hover) {
  .kh-story__more-toggle:hover .kh-story__more-label { color: var(--kh-text); }
}
.kh-story__more > summary:focus-visible {
  outline: 2px solid var(--kh-gold-dark);
  outline-offset: 2px;
  border-radius: var(--kh-radius);
}
/* Plus-/Minus-Indikator (+ geschlossen, − geöffnet) */
.kh-story__more-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
}
.kh-story__more-icon::before,
.kh-story__more-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .8rem;
  height: 2px;
  background: var(--kh-gold-dark);
  transform: translate(-50%, -50%);
}
.kh-story__more-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.kh-story__more[open] .kh-story__more-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .kh-story__more-icon::after { transition: transform .25s var(--kh-ease); }
}
.kh-story__more-body > p { margin: 0 0 1.1rem; }
.kh-story__more-body > p:last-child { margin-bottom: .25rem; }

/* ---- Catering-Brücke / CTA ---- */
.kh-story__cta { margin-top: clamp(2rem, 4vw, 3rem); max-width: var(--kh-measure); }
.kh-story__cta-line {
  margin: 0 0 1.25rem;
  max-width: 42rem;
  color: var(--kh-text-muted);
}

/* ---------- Button ---------- */
.kh-button {
  display: inline-block;
  padding: .9rem 2.25rem;
  background: var(--kh-gold);
  color: #1c1404;
  font-family: var(--kh-font-head);
  font-size: .9375rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center; /* Mehrzeilige Labels (schmale Viewports/Textzoom) zentriert statt linksbündig */
  border-radius: var(--kh-radius);
  transition: background-color .25s var(--kh-ease), transform .25s var(--kh-ease);
}
.kh-button:hover { background: var(--kh-gold-light); }

/* Download-Variante: zweizeilig (Aktion + Format/Größe fürs a11y-Label) */
.kh-feature__download { margin: 1.75rem 0 0; }
.kh-button--download {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  line-height: 1.25;
}
.kh-button--download .kh-button__meta {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: none;
  opacity: .72;
}

/* ===================== ABSCHLUSS / FAMILIE (Karte) =====================
   Die Timeline-Linie läuft hier aus: ein mittiges Verbindungsstück führt
   sie in die Karte, deren Rahmen die Linie aufnimmt. Hell als Default,
   .kh-closing--dark schaltet auf die dunkle Markenfarbe um. */
.kh-closing {
  --kh-card-bg:      var(--kh-surface);   /* hell (weiß) */
  --kh-card-border:  var(--kh-line);
  --kh-card-text:    var(--kh-bg-dark);
  --kh-card-eyebrow: var(--kh-gold-dark);
  --kh-card-connector: var(--kh-line);

  position: relative;
  max-width: 36rem;
  /* mobil: Karte mit Seitenabstand, Linie sitzt links auf der Rail.
     margin-bottom hält Abstand zur Trennlinie des Bildnachweises. */
  margin: clamp(3rem, 7vw, 5rem) 1.5rem clamp(3rem, 8vw, 5rem);
  padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
  background: var(--kh-card-bg);
  border: 1px solid var(--kh-card-border);
  border-radius: 12px;
}
/* Verbindungsstück: schließt nahtlos an die durchlaufende Timeline-Linie an.
   Mobil auf der Rail (links), im Desktop-Breakpoint mittig (s. u.). */
.kh-closing::before {
  content: "";
  position: absolute;
  left: var(--kh-rail);
  bottom: 100%;
  width: 2px;
  height: clamp(3rem, 7vw, 5rem);
  background: var(--kh-card-connector);
}
/* Dunkle Variante – tiefes Markengrün */
.kh-closing--dark {
  --kh-card-bg:      var(--kh-bg-dark);
  --kh-card-border:  var(--kh-line-dark);
  --kh-card-text:    var(--kh-text-invert);
  --kh-card-eyebrow: var(--kh-gold-light);
}
/* Selektoren bewusst mit .kh-closing davor: schlagen .kh-timeline figure{margin:0}
   bzw. .kh-timeline img{width:100%} (sonst Portrait links + Signatur vollbreit). */
.kh-closing .kh-closing__portrait {
  width: clamp(9rem, 24vw, 11rem);
  height: clamp(9rem, 24vw, 11rem);
  margin: 0 auto 1.75rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--kh-card-border), 0 8px 28px rgba(0,35,2,.12);
}
.kh-closing__quote { margin: 0 0 1.75rem; }
.kh-closing__quote p {
  margin: 0 auto;
  max-width: 30rem;
  font-family: var(--kh-font-body);
  font-style: italic;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.65;
  letter-spacing: 0;
  color: var(--kh-card-text);
}
.kh-closing .kh-closing__signature {
  width: clamp(7rem, 22vw, 9rem);
  height: auto;
  margin: 0 auto .5rem;
  opacity: .85;
}
/* Auf Dunkel die (dunkle) Unterschrift aufhellen, damit sie lesbar bleibt */
.kh-closing--dark .kh-closing__signature {
  filter: brightness(0) invert(1);
  opacity: .9;
}
.kh-closing__attribution {
  margin: 0;
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--kh-card-eyebrow);
}
.kh-closing__role {
  display: block;
  margin-top: .35rem;
  font-size: .6875rem;
  letter-spacing: .18em;
  opacity: .75;
}

/* ===================== BILDNACHWEIS ===================== */
.kh-credits {
  max-width: var(--kh-measure);
  margin: 0 auto;
  padding: 2.5rem 1.5rem clamp(3rem, 8vw, 5rem);
  border-top: 1px solid var(--kh-line);
  color: var(--kh-text-muted);
  font-size: .8125rem;
  line-height: 1.6;
}
.kh-credits__title {
  margin: 0 0 1rem;
  font-family: var(--kh-font-head);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.6;                /* Theme setzt h3 { line-height: 30px } – Prototyp-Wert (geerbt) festschreiben */
  letter-spacing: .2em !important;
  text-transform: uppercase;
  color: var(--kh-gold-dark);
}
/* Textbreite enger als die 44rem-Sektion: bei 13px-Schrift sonst ~100
   Zeichen/Zeile. ~32rem hält die Credits unter der 80-Zeichen-Lesegrenze;
   die Trennlinie der Sektion bleibt auf voller Breite. */
.kh-credits__intro,
.kh-credits__sources,
.kh-credits__list,
.kh-credits__note { max-width: 32rem; }
.kh-credits__intro {
  margin: 0 0 .75rem;
}
.kh-credits__sources {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}
.kh-credits__sources li { display: inline; }
.kh-credits__sources li:not(:last-child)::after {
  content: " · ";
  color: var(--kh-line);
}
.kh-credits__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kh-credits__item { margin: 0 0 .75rem; }
.kh-credits__ref {
  display: inline-block;
  margin-right: .4em;
  font-weight: 700;
  color: var(--kh-text);
}
.kh-credits__link {
  color: var(--kh-gold-dark);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.kh-credits__link:hover,
.kh-credits__link:focus-visible { color: var(--kh-text); }
.kh-credits__note {
  margin: 1rem 0 0;
  font-style: italic;
}

/* ===================== DESKTOP (≥ 720px) ===================== */
@media (min-width: 720px) {
  :root { --kh-rail: 26px; }

  /* Split-Hero: Text links, Bild rechts, volle Höhe */
  .kh-timeline__intro {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    min-height: min(82vh, 760px);
    padding-bottom: 0;
  }
  .kh-timeline__intro-media {
    order: 2;
    aspect-ratio: auto;
    height: 100%;
  }
  .kh-timeline__intro-text {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    margin: 0;
    padding: 2rem clamp(2rem, 5vw, 4rem);
    text-align: left;
  }
  .kh-timeline__intro-text .kh-timeline__lead { margin-left: 0; margin-right: 0; }

  /* ===== Kurzchronik: fünf Stationen nebeneinander auf einer Linie ===== */
  .kh-facts {
    max-width: 72rem;
    padding: clamp(3.5rem, 6vw, 5rem) 1.5rem clamp(2rem, 4vw, 3rem);
    text-align: center;
  }
  .kh-timeline__chapter {
    max-width: var(--kh-measure);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .kh-facts .kh-timeline__chapter { margin: 0 auto 2.25rem; }
  #kh-chronik {
    margin-top: clamp(3rem, 5vw, 4rem);
    margin-bottom: clamp(1rem, 3vw, 2rem);
  }
  .kh-facts__list {
    grid-template-columns: repeat(5, 1fr);
    column-gap: 1.5rem;
    row-gap: 0;
  }
  /* Linie von Knotenmitte zu Knotenmitte (Spaltenmitten 10 % / 90 %) */
  .kh-facts__list::before {
    left: 10%;
    right: 10%;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 2px;
    transform: none;
  }
  .kh-facts__row { padding: 1.75rem .25rem 0; }
  .kh-facts__row::before { left: 50%; top: 0; transform: translateX(-50%); }
  .kh-facts__year { margin-bottom: .55rem; font-size: 1.625rem; }
  .kh-facts__text {
    margin: 0 auto;
    max-width: 15rem;
    font-size: .9375rem;
    color: var(--kh-text-muted);
  }

  /* ===== Center-Axis: Timeline-Linie in die Mitte ===== */
  .kh-timeline__list { max-width: 72rem; }
  .kh-timeline__list::before { left: 50%; transform: translateX(-50%); }

  /* Abschluss-Karte: horizontales Layout (Portrait links, Text rechts),
     mittig auf der zentrierten Linie. Querformat statt Hochformat. */
  .kh-closing {
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding: clamp(2.5rem, 5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
    text-align: left;
  }
  .kh-closing::before { left: 50%; transform: translateX(-50%); }
  .kh-closing .kh-closing__portrait { margin: 0; flex-shrink: 0; }
  .kh-closing__quote { margin: 0 0 1.5rem; }
  .kh-closing__quote p { margin: 0; }
  .kh-closing .kh-closing__signature { margin: 0 0 .4rem; }

  /* Hotel-Eintrag: Text LINKS, Bild RECHTS der Mittellinie */
  .kh-entry {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    align-items: center;         /* Bild + Content-Block an gemeinsamer Mitte = Knoten */
    padding-left: 0;
  }
  .kh-entry__body  { grid-column: 1; grid-row: 1; text-align: right; }  /* links der Linie, Text zur Linie hin */
  .kh-entry__body .kh-entry__text { margin-left: auto; }                /* Absatz an die Mittellinie ziehen */
  .kh-entry .kh-entry__media { grid-column: 2; grid-row: 1; margin-bottom: 0; }  /* rechts der Linie; Spezifität wie Basisregel */
  .kh-entry__year::before {                        /* Knoten auf der Mittellinie, auf Höhe der Jahreszahl */
    left: auto;
    right: calc(-1.75rem - 14px);                  /* halbe column-gap = Mittellinie, rechts der Jahreszahl */
  }

  /* Editorial-Band: zwei Spalten (eine Stimme je Spalte) */
  .kh-editorial__columns { grid-template-columns: repeat(2, 1fr); }

  /* Hannover-Kontext: Text + Bild zusammen auf EINER Seite (abwechselnd) */
  .kh-timeline__item--context .kh-context {
    width: 50%;
    padding-left: 0;
    padding-right: 3rem;     /* Abstand zur Mittellinie */
    margin-right: 50%;       /* Default: linke Seite */
    text-align: right;       /* Text zur Mittellinie hin */
  }
  .kh-timeline__item--context .kh-context__text { margin-left: auto; }
  .kh-timeline__item--context .kh-context__media { margin-left: auto; }
  .kh-timeline__item--context .kh-context::before {
    left: auto;
    right: -6px;             /* Knoten am rechten Blockrand = Mittellinie */
    top: 2.1rem;
  }
  /* abwechselnd: rechte Seite */
  .kh-timeline__item--ctx-right .kh-context {
    margin-right: 0;
    margin-left: 50%;
    padding-right: 0;
    padding-left: 3rem;
    text-align: left;        /* rechte Seite: Text zur Mittellinie hin = linksbündig */
  }
  .kh-timeline__item--ctx-right .kh-context__text,
  .kh-timeline__item--ctx-right .kh-context__media { margin-left: 0; margin-right: auto; }
  .kh-timeline__item--ctx-right .kh-context::before {
    right: auto;
    left: -6px;
  }
  .kh-context__media { max-width: 100%; }

  /* ===== Feature-Section: 2-spaltig (Bild + Text nebeneinander) =====
     Full-bleed über die volle Viewport-Breite; Bild füllt eine Spalte,
     Text die andere. Große Bilder sind hier bewusst ok. */
  .kh-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 0;
    min-height: clamp(22rem, 38vw, 32rem);
  }
  .kh-feature__media {
    aspect-ratio: auto;            /* überschreibt 16/9 – Bild füllt die Spaltenhöhe */
    height: 100%;
    grid-column: 1;
    grid-row: 1;
  }
  .kh-feature__body {
    max-width: none;
    margin: 0;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  }
  /* abwechselnd: Bild rechts, Text links */
  .kh-timeline__item--feat-right .kh-feature__media { grid-column: 2; }
  .kh-timeline__item--feat-right .kh-feature__body  { grid-column: 1; }

  /* Feature mit Stimmen-Band: Bild+Text in Zeile 1, Glückwunsch-Grid darunter
     über volle Breite (Zeile 2). 3 Karten nebeneinander. */
  .kh-feature--with-voices .kh-feature__voices { grid-column: 1 / -1; grid-row: 2; }
  .kh-feature--with-voices .kh-feature__voices-grid { grid-template-columns: repeat(2, 1fr); }
  .kh-feature__voices { padding-inline: clamp(2rem, 4vw, 3.5rem); }

  /* ===== Story-Section (1947): Galerie als Banner + 4er-Reihe, Zahlen 3-spaltig ===== */
  .kh-story__gallery { grid-template-columns: repeat(4, 1fr); }
  .kh-story__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}

/* ===================== ZEIT-NAVIGATION (schwebende Pille) =================
   Zweiteilig: eine transparente Positionierungs-Schicht (volle Breite, fixiert
   oben) zentriert die eigentliche „Pille". Die Pille ist content-breit, vollrund
   und hat einen blickdichten Hintergrund (Links bleiben über unruhigen Bildern
   lesbar) plus dezenten Frosted-Blur + Schatten. Aktiver Eintrag via JS
   (aria-current), Fortschritt über --kh-progress.
   z-index unter Skip-Link (100) und <dialog>. */
.kh-timenav {
  position: fixed;
  /* --kh-timenav-offset: Platz für ein fixes Site-Menü darüber (WP: 50px,
     gesetzt im Codebox-Snippet). Prototyp ohne Menü = 0. */
  top: calc(.75rem + var(--kh-timenav-offset, 0px));
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;             /* Schicht transparent – nur die Pille fängt Klicks */
}
/* Erst nach der Hero einblenden – nur wenn JS aktiv (.kh-js). Ohne JS bleibt
   die Leiste sichtbar (funktionierende Anker-Liste). JS setzt .is-visible,
   sobald die Hero nach oben aus dem Bild gescrollt ist. */
.kh-js .kh-timenav {
  transform: translateY(calc(-100% - .75rem - var(--kh-timenav-offset, 0px)));   /* inkl. Top-Abstand komplett aus dem Bild */
  opacity: 0;
}
.kh-js .kh-timenav.is-visible {
  transform: none;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .kh-js .kh-timenav { transition: transform .35s var(--kh-ease), opacity .35s var(--kh-ease); }
}

/* Die Pille */
.kh-timenav__inner {
  position: relative;
  overflow: hidden;
  width: max-content;               /* hugt den Inhalt (Desktop) … */
  max-width: 100%;                  /* … bis zur verfügbaren Breite (Mobile) */
  min-width: 0;                     /* darf unter Content-Breite schrumpfen → Liste scrollt */
  pointer-events: auto;
  /* solid (kein Blur) → konstanter Kontrast auf hellem wie dunklem Grund.
     Gleiche Farbe wie der Seiten-Hintergrund. */
  background: var(--kh-bg);
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 35, 2, .14);
  /* KEIN CSS-border – die Outline zeichnet die SVG (Track + Fortschritt). */
}
.kh-timenav__list {
  display: flex;
  gap: clamp(.1rem, 1.2vw, 1rem);
  justify-content: safe center;     /* safe: kippt bei Überlauf auf flex-start, klippt die ersten Marken nicht */
  margin: 0;
  padding: 0 1.25rem;               /* etwas mehr als der Pill-Radius → Marken bleiben aus den Rundungen */
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;            /* Firefox: Scrollbalken aus */
  -ms-overflow-style: none;
}
.kh-timenav__list::-webkit-scrollbar { display: none; }   /* WebKit */
.kh-timenav__item { flex: 0 0 auto; }
/* Mobile: nur die 5 Kern-Marken (Dekaden-Anker). Die --wide-Marken (1889,
   1947, VIP, 2016) blenden erst ab 768px ein → schmale Phones zeigen eine
   ruhige, scrollfreie Pille statt 9 Marken im Horizontal-Scroll. Alle Anker
   bleiben im DOM; auf Mobile bleiben sie per Scrollen erreichbar. */
.kh-timenav__item--wide { display: none; }
@media (min-width: 768px) {
  .kh-timenav__item--wide { display: block; }
}
.kh-timenav__link {
  position: relative;
  isolation: isolate;             /* eigener Stacking-Context → die getönte ::before-Pille
                                     (z-index:-1) liegt ÜBER dem opaken Pill-Background,
                                     aber unter dem Text */
  display: block;
  padding: .85rem .95rem;
  line-height: 1;                 /* Zeilenbox eng → Pille bläht nicht auf */
  font-family: var(--kh-font-head);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--kh-text-muted);
  transition: color .2s var(--kh-ease);
}
/* Mobile: Polsterung knapper, damit die 5 Kern-Marken auch auf schmalen
   Phones (~360px) ohne Horizontal-Scroll in die Pille passen. Vertikales
   Padding (Tap-Höhe) bleibt; nur horizontal wird gespart. */
@media (max-width: 767px) {
  .kh-timenav__list { padding: 0 .9rem; }   /* hält die End-Marken aus der Rundung */
  .kh-timenav__link { padding-left: .6rem; padding-right: .6rem; }
}
/* Sehr schmale Phones (≤360px, z.B. 320px): Gap + Polsterung noch enger,
   damit die letzte Marke (2025) nicht in die Pillen-Rundung läuft. */
@media (max-width: 360px) {
  .kh-timenav__list { padding: 0 .7rem; gap: .1rem; }
  .kh-timenav__link { padding-left: .45rem; padding-right: .45rem; }
}
/* Aktive Marke: weiche gold-getönte Pille hinter dem Text (ersetzt die
   Underline). Liegt via z-index:-1 hinter der Schrift; keine Layout-Auswirkung
   → die content-breite Pille bleibt beim Abschnittswechsel ruhig. */
.kh-timenav__link::before {
  content: "";
  position: absolute;
  inset: .55rem .35rem;          /* eng am Text – minimale bg-Polsterung */
  border-radius: 999px;
  background: var(--kh-gold);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s var(--kh-ease), transform .2s var(--kh-ease);
  z-index: -1;
}
@media (hover: hover) {
  .kh-timenav__link:hover { color: var(--kh-text); }
  /* zarte Andeutung der Pille beim Hover (nur wenn nicht aktiv) */
  .kh-timenav__link:hover:not([aria-current="true"])::before { opacity: .09; transform: scale(1); }
}
.kh-timenav__link:focus-visible {
  outline: 3px solid var(--kh-gold);
  outline-offset: -3px;
  border-radius: 999px;
}
.kh-timenav__link[aria-current="true"] { color: var(--kh-gold-dark); }
.kh-timenav__link[aria-current="true"]::before { opacity: .16; transform: scale(1); }

/* Fortschritt = Pill-Outline. SVG füllt die Pille; Track (faint) zeichnet die
   ruhende Kontur, Fill (gold) wächst per stroke-dashoffset rund um den Umfang.
   Geometrie (x/y/width/height/rx) setzt JS passend zur Pillengröße. */
.kh-timenav__progress {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kh-timenav__progress rect { fill: none; }
.kh-timenav__progress-track { stroke: var(--kh-line); stroke-width: 1; }
.kh-timenav__progress-fill {
  stroke: var(--kh-gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;            /* leer; JS setzt 1 − Fortschritt */
}
@media (prefers-reduced-motion: no-preference) {
  .kh-timenav__progress-fill { transition: stroke-dashoffset .12s linear; }
}

/* Sprungziele unter der Sticky-Leiste freihalten (No-JS-Fall: nativer Anker-
   Sprung landet so unter der Leiste). Das sanfte Scrollen der Nav-Sprünge
   übernimmt JS (kontrolliert, reduced-motion-bewusst) – daher hier KEIN
   scroll-behavior:smooth, das sonst unsere per-Frame-scrollTo überlagern würde.
   Hinweis WP-Integration: scroll-padding-top greift global auf :root. */
:root { scroll-padding-top: calc(4rem + var(--kh-timenav-offset, 0px)); }

/* ===================== ENTRANCE-ANIMATION =====================
   Progressive Enhancement: nur wenn JS aktiv (.kh-js) UND der Nutzer
   keine reduzierte Bewegung wünscht. Ohne JS / mit reduce: alles sichtbar. */
/* Scroll-Entrance: NUR Opacity, KEIN Transform.
   Transform (translateY/scale) auf großen WebPs zwingt Chrome zur
   Re-Rasterung pro Frame → "Flackern wie GIF", am stärksten bei den
   größten Bildern (z. B. 1980). Opacity ist compositor-only und flackert
   nicht. Daher auch kein Hover-Zoom mehr. */
@media (prefers-reduced-motion: no-preference) {
  .kh-js .kh-timeline__item,
  .kh-js .kh-closing {
    opacity: 0;
    transition: opacity .8s var(--kh-ease);
  }
  .kh-js .kh-timeline__item.is-visible,
  .kh-js .kh-closing.is-visible {
    opacity: 1;
  }
}