/* ============================================================================
   Hotel Kranefoer, Waltrop
   Eigenes Stylesheet. Wird NACH bootstrap.min.css eingebunden.

   Gestalterischer Gedanke
   -----------------------
   Hell, aufgeraeumt, viel Luft -- aber kontraststark. Weisse Flaechen, sehr
   grosse Ueberschriften in leichter Strichstaerke, klar sichtbare Haarlinien.
   Zwei tiefdunkle Baender setzen Akzente: das Reservierungsband direkt unter
   dem Kopfbild und die Fusszeile. Eine einzige Schriftfamilie; Hierarchie
   entsteht ueber Groesse und Laufweite.

   Alle Text-/Hintergrundpaare liegen ueber 7:1 und erfuellen damit die
   strengste WCAG-Stufe (AAA) fuer Fliesstext. Geprueft mit
   tools/kontrast-pruefen.py.

   Das Bildmaterial des Hauses ist klein aufgeloest. Deshalb steht kein Foto
   grossflaechig, und keines wird ueber seine echte Pixelbreite hinaus
   angezeigt.
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Tokens */

:root {
  /* Farben */
  --kf-tinte: #0f0d09;        /* Haupttext, fast schwarz mit warmem Stich     */
  --kf-grau: #4a443b;         /* Sekundaertext, Bildunterschriften            */
  --kf-weiss: #ffffff;        /* Hauptflaeche                                 */
  --kf-flaeche: #f0eee8;      /* zweite Flaeche, fuer wechselnde Abschnitte   */
  --kf-dunkel: #1a1710;       /* Reservierungsband und Fusszeile              */
  --kf-akzent: #664600;       /* Links und Augenbrauen auf hellem Grund       */
  --kf-akzent-hell: #e0a500;  /* dieselbe Rolle auf dunklem Grund             */
  --kf-gold: #b07d00;         /* Punkte und Zierlinien, mindestens 3:1        */

  --kf-linie: rgba(15, 13, 9, 0.22);
  --kf-linie-stark: rgba(15, 13, 9, 0.45);
  --kf-linie-hell: rgba(255, 255, 255, 0.28);

  /* Schrift */
  --kf-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Abstaende */
  --kf-raum-xs: 0.5rem;
  --kf-raum-s: 1rem;
  --kf-raum-m: 2rem;
  --kf-raum-l: 3.5rem;
  --kf-raum-xl: clamp(5rem, 10vw, 9rem);

  --kf-kopf-hoehe: 4.5rem;
}

/* ----------------------------------------------------------- 2. Grundlagen */

html {
  scroll-padding-top: calc(var(--kf-kopf-hoehe) + 1.5rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  background-color: var(--kf-weiss);
  color: var(--kf-tinte);
  font-family: var(--kf-font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2 {
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--kf-tinte);
  text-wrap: balance;
}

/* Bewusst gedeckelt: bei groesseren Werten rutscht die Reservierungs-
   Schaltflaeche auf einem 900 Pixel hohen Bildschirm unter den sichtbaren
   Bereich. */
h1 {
  font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem);
}

h2 {
  font-size: clamp(2rem, 1.35rem + 2.9vw, 3.75rem);
}

h3 {
  font-size: clamp(1.15rem, 1.06rem + 0.45vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

p {
  max-width: 68ch;
}

a {
  color: var(--kf-akzent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

a:hover,
a:focus {
  color: var(--kf-tinte);
}

/* Deutlich sichtbarer Fokusrahmen. Der zweite, weisse Ring sorgt dafuer,
   dass der Rahmen auch auf dunklen Flaechen erkennbar bleibt. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kf-tinte);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9);
  border-radius: 2px;
}

.kf-dunkelzone a:focus-visible,
.kf-dunkelzone button:focus-visible {
  outline-color: var(--kf-weiss);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.8);
}

img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------- 3. Hilfskonstrukte */

.kf-sprunglink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.85rem 1.35rem;
  background: var(--kf-tinte);
  color: var(--kf-weiss);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
}

.kf-sprunglink:focus {
  transform: translateY(0);
  color: var(--kf-weiss);
}

.kf-augenbraue {
  display: block;
  margin-bottom: var(--kf-raum-s);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kf-akzent);
}

.kf-augenbraue--hell {
  color: var(--kf-akzent-hell);
}

.kf-vorspann {
  max-width: 54ch;
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--kf-tinte);
}

.kf-klein {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--kf-grau);
}

/* --------------------------------------------------------- 4. Kopf und Navi */

.kf-kopf {
  min-height: var(--kf-kopf-hoehe);
  background-color: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--kf-linie);
}

/* Wortmarke: gesetztes "Hotel" vor dem handgeschriebenen "Kranefoer"
   aus dem alten Briefkopf. */
.kf-marke {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  text-decoration: none;
}

.kf-marke__hotel {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kf-grau);
}

/* Native Groesse 213x55 -- hier verkleinert, nie vergroessert. */
.kf-marke img {
  display: block;
  width: 132px;
  height: 34px;
}

.kf-kopf .nav-link {
  padding: 0.5rem 0.65rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--kf-tinte);
}

.kf-kopf .nav-link:hover,
.kf-kopf .nav-link:focus {
  color: var(--kf-akzent);
}

.kf-kopf .nav-link.active {
  color: var(--kf-akzent);
  font-weight: 700;
}

.kf-kopf .navbar-toggler {
  padding: 0.5rem 0.75rem;
  border-color: var(--kf-linie-stark);
}

/* -------------------------------------------------------------- 5. Kopfbild */

.kf-hero {
  padding-top: calc(var(--kf-kopf-hoehe) + clamp(2rem, 4.5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}


/* Kopfbild: hochkant, rechts neben der Ueberschrift. Das Bild liegt in zwei
   Groessen vor (720 und 1086 Pixel breit), der Browser waehlt per srcset. */
.kf-hero__bild img {
  display: block;
  width: 100%;
  height: auto;
}

.kf-hero__titel {
  margin-bottom: 1.25rem;
}

.kf-hero__ort {
  display: block;
  margin-top: 1.1rem;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 0.9375rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--kf-akzent);
}

.kf-hero__claim {
  max-width: 46ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--kf-grau);
}

.kf-hero__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--kf-raum-m);
}

/* ------------------------------------------------------------- 6. Schalter */

.kf-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;              /* bequeme Zielgroesse am Touchscreen */
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--kf-tinte);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease,
    border-color 0.16s ease;
}

.kf-btn--voll {
  background-color: var(--kf-tinte);
  color: var(--kf-weiss);
}

.kf-btn--voll:hover,
.kf-btn--voll:focus {
  background-color: var(--kf-akzent);
  border-color: var(--kf-akzent);
  color: var(--kf-weiss);
}

.kf-btn--leer {
  background-color: transparent;
  color: var(--kf-tinte);
  border-color: var(--kf-linie-stark);
}

.kf-btn--leer:hover,
.kf-btn--leer:focus {
  border-color: var(--kf-tinte);
  background-color: var(--kf-flaeche);
  color: var(--kf-tinte);
}

/* Variante fuer die dunklen Baender. */
.kf-btn--hell {
  background-color: var(--kf-weiss);
  border-color: var(--kf-weiss);
  color: var(--kf-tinte);
}

.kf-btn--hell:hover,
.kf-btn--hell:focus {
  background-color: var(--kf-akzent-hell);
  border-color: var(--kf-akzent-hell);
  color: var(--kf-tinte);
}

@media (prefers-reduced-motion: reduce) {
  .kf-btn {
    transition: none;
  }
}

/* ------------------------------------------- 7. Reservierungsband (dunkel) */

.kf-dunkelzone {
  background-color: var(--kf-dunkel);
  color: var(--kf-weiss);
}

.kf-resband {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.kf-resband__titel {
  max-width: 22ch;
  margin-bottom: var(--kf-raum-s);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--kf-weiss);
}

.kf-resband__zusatz {
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--kf-flaeche);
}

.kf-resband__aktion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kf-raum-s);
}

@media (min-width: 992px) {
  .kf-resband__aktion {
    align-items: flex-end;
    text-align: right;
  }
}

.kf-resband__label {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kf-akzent-hell);
}

/* ---------------------------------------------------------- 8. Abschnitte */

.kf-section {
  padding-block: var(--kf-raum-xl);
}

.kf-section--flaeche {
  background-color: var(--kf-flaeche);
}

.kf-section__kopf {
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* --------------------------------------------------- 9. Karten und Bilder */

.kf-karte {
  height: 100%;
  padding: var(--kf-raum-m);
  background-color: var(--kf-weiss);
  border: 1px solid var(--kf-linie);
}

.kf-karte h3 {
  margin-bottom: var(--kf-raum-s);
}

.kf-karte > :last-child {
  margin-bottom: 0;
}

/* Kompakte Karte fuer wenige Angaben, etwa die Fruehstueckszeiten. Ohne
   Begrenzung zog sich die Karte ueber die ganze Textspalte und wirkte fuer
   drei Zeilen viel zu gross. */
.kf-karte--kompakt {
  max-width: 28rem;
  /* .kf-karte hat height: 100%, damit nebeneinanderstehende Karten gleich hoch
     sind. Steht die Karte allein unter Text, zieht sie sich dadurch auf die
     Hoehe der ganzen Spalte. Hier soll sie nur so hoch wie ihr Inhalt sein. */
  height: auto;
  padding: 1.25rem 1.5rem;
}

/*
 * Bilder stehen ohne Rahmen. Die Breite wird ueber .kf-bild--250 / --371 /
 * --415 / --960 auf die native Pixelbreite begrenzt, damit nie
 * hochskaliert wird.
 */
.kf-bild {
  margin: 0;
}

.kf-bild img {
  display: block;
  width: 100%;
  height: auto;
}

.kf-bild figcaption {
  padding-top: 0.7rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--kf-grau);
}

.kf-bild--250 {
  max-width: 250px;
}

.kf-bild--371 {
  max-width: 371px;
}

/* Derzeit ungenutzt, aber vorgehalten: assets/img/hotel/zimmer-3.jpg ist
   415 Pixel breit. Wird dieses Bild eingebaut, gehoert diese Klasse dazu. */
.kf-bild--415 {
  max-width: 415px;
}

.kf-bild--960 {
  max-width: 960px;
}

/* ------------------------------------------------ 10. Listen, Fakten, Preis */

.kf-fakt {
  margin: 0;
}

.kf-fakt > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--kf-raum-s);
  justify-content: space-between;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--kf-linie);
}

.kf-fakt > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.kf-fakt dt {
  font-weight: 600;
}

.kf-fakt dd {
  margin: 0;
  color: var(--kf-grau);
  text-align: right;
}

.kf-dunkelzone .kf-fakt > div {
  border-bottom-color: var(--kf-linie-hell);
}

.kf-dunkelzone .kf-fakt dd {
  color: var(--kf-flaeche);
}

.kf-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-liste li {
  padding-block: 0.65rem;
  border-bottom: 1px solid var(--kf-linie);
}

.kf-liste li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Besondere Hinweise: Stichwort fett in eigener Zeile, darunter ein ganzer
   Satz. So braucht es keinen Gedankenstrich zwischen beidem. */
.kf-liste--hinweise strong {
  display: block;
}

.kf-preis {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--kf-raum-s);
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1rem;
  border-bottom: 1px solid var(--kf-linie);
}

.kf-preis:last-of-type {
  border-bottom: 0;
}

.kf-preis__wert {
  font-size: 1.75rem;
  font-weight: 300;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

/* ------------------------------------------------------- 11. Kontaktblock */

.kf-kontaktblock {
  font-style: normal;
  line-height: 1.9;
}

/* inline-block plus Innenabstand: so wird die anklickbare Flaeche mindestens
   24 Pixel hoch (WCAG 2.5.8). Als reines Inline-Element waere sie nur so hoch
   wie die Schrift selbst. */
.kf-kontaktblock a {
  display: inline-block;
  padding-block: 0.2rem;
  text-decoration: none;
}

.kf-kontaktblock a:hover,
.kf-kontaktblock a:focus {
  text-decoration: underline;
}

.kf-telefon {
  display: inline-block;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 300;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--kf-tinte);
}

.kf-telefon:hover,
.kf-telefon:focus {
  color: var(--kf-akzent);
  text-decoration: underline;
}

.kf-dunkelzone .kf-telefon {
  color: var(--kf-weiss);
}

.kf-dunkelzone .kf-telefon:hover,
.kf-dunkelzone .kf-telefon:focus {
  color: var(--kf-akzent-hell);
}

.kf-dunkelzone a {
  color: var(--kf-akzent-hell);
}

.kf-dunkelzone a:hover,
.kf-dunkelzone a:focus {
  color: var(--kf-weiss);
}

/* --------------------------------------------- 12. Historisches Karussell */

/*
 * Bootstrap-Karussell ohne automatisches Weiterblaettern. Die Bilder werden in
 * ihrer echten Groesse gezeigt (250 bzw. 371 Pixel breit), deshalb hat der
 * Bildbereich eine feste Mindesthoehe. So springen Pfeile und Text beim
 * Blaettern nicht.
 */
.kf-karussell {
  position: relative;
  margin-bottom: clamp(3rem, 6vw, 5rem);
  padding-inline: 4rem;
}

.kf-karussell__buehne {
  background-color: var(--kf-weiss);
  border: 1px solid var(--kf-linie);
}

.kf-karussell__bild {
  display: grid;
  gap: var(--kf-raum-m);
  align-items: center;
  margin: 0;
  padding: var(--kf-raum-m);
}

.kf-karussell__rahmen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 274px;
}

.kf-karussell__rahmen img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kf-karussell__bild {
    grid-template-columns: 371px minmax(0, 1fr);
  }
}

.kf-karussell__zaehler {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--kf-akzent);
}

.kf-karussell__titel {
  display: block;
  margin-bottom: 0.5rem;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--kf-tinte);
}

.kf-karussell__text {
  display: block;
  color: var(--kf-grau);
}

/* Pfeile: 48 Pixel gross, dunkel gefuellt, weisser Pfeil (19:1). */
.kf-karussell__pfeil {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--kf-tinte);
  color: var(--kf-weiss);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.16s ease;
}

.kf-karussell__pfeil:hover,
.kf-karussell__pfeil:focus-visible {
  background-color: var(--kf-akzent);
}

.kf-karussell__pfeil svg {
  width: 22px;
  height: 22px;
}

.kf-karussell__pfeil--zurueck {
  left: 0;
}

.kf-karussell__pfeil--vor {
  right: 0;
}

/* Auf schmalen Handys sitzen die Pfeile unter dem Bild, damit sie nichts
   verdecken und das Bild die volle Breite bekommt. */
@media (max-width: 575.98px) {
  .kf-karussell {
    padding-inline: 0;
    padding-bottom: 4.5rem;
  }

  .kf-karussell__rahmen {
    min-height: 0;
  }

  .kf-karussell__pfeil {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .kf-karussell__pfeil--zurueck {
    left: calc(50% - 56px);
  }

  .kf-karussell__pfeil--vor {
    right: calc(50% - 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kf-karussell__pfeil {
    transition: none;
  }
}

/* ------------------------------------------------------- 13. Zeitstrahl */

.kf-zeitstrahl {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-kapitel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--kf-raum-s);
  padding: 0 0 clamp(3rem, 6vw, 5rem) var(--kf-raum-m);
  border-left: 2px solid var(--kf-linie);
}

.kf-kapitel:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

/* Punkt auf der Linie. */
.kf-kapitel::before {
  position: absolute;
  top: 0.45rem;
  left: 0;
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: var(--kf-gold);
  transform: translateX(-6.5px);
}

.kf-kapitel__marke {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.kf-kapitel__nr {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--kf-akzent);
}

.kf-kapitel__zeit {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kf-grau);
}

.kf-kapitel__titel {
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.kf-kapitel__inhalt > :last-child {
  margin-bottom: 0;
}

.kf-kapitel__bild {
  margin-top: var(--kf-raum-s);
}

/* Ab Tablet: Marke links, Inhalt rechts. */
@media (min-width: 768px) {
  .kf-kapitel {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 0 var(--kf-raum-m);
    padding-left: var(--kf-raum-l);
  }

  .kf-kapitel__marke {
    display: block;
    padding-top: 0.4rem;
  }

  .kf-kapitel__nr,
  .kf-kapitel__zeit {
    display: block;
  }

  .kf-kapitel__nr {
    margin-bottom: 0.3rem;
  }

  .kf-kapitel::before {
    top: 0.6rem;
  }
}

/* Ab Desktop wandert das Bild in eine dritte Spalte. */
@media (min-width: 992px) {
  .kf-kapitel__inhalt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--kf-raum-m);
    align-items: start;
  }

  .kf-kapitel__bild {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------- 15. Fusszeile */

.kf-fuss {
  padding-block: var(--kf-raum-xl) var(--kf-raum-m);
}

.kf-fuss h2 {
  margin-bottom: var(--kf-raum-s);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kf-akzent-hell);
}

.kf-fuss h3 {
  color: var(--kf-weiss);
}

.kf-fuss__schluss {
  margin-top: var(--kf-raum-l);
  padding-top: var(--kf-raum-s);
  border-top: 1px solid var(--kf-linie-hell);
  font-size: 0.875rem;
  color: var(--kf-flaeche);
}

/* Gleiche Begruendung wie beim Kontaktblock: bequeme Zielgroesse. */
.kf-fuss__schluss a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* ------------------------------------------------------ 16. Unterseiten */

.kf-rechtsseite {
  padding-top: calc(var(--kf-kopf-hoehe) + var(--kf-raum-l));
  padding-bottom: var(--kf-raum-xl);
}

.kf-rechtsseite h2 {
  margin-top: var(--kf-raum-l);
  margin-bottom: var(--kf-raum-s);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.kf-rechtsseite h3 {
  margin-top: var(--kf-raum-m);
  font-size: 1.0625rem;
}

.kf-rechtsseite h4 {
  margin-top: var(--kf-raum-s);
}

.kf-rechtsseite ul {
  padding-left: 1.25rem;
}

.kf-rechtsseite li {
  margin-bottom: 0.4rem;
}

/* Rechtstexte haben lange Woerter. Automatische Silbentrennung verhindert
   auf schmalen Bildschirmen grosse Luecken und Ueberlauf. */
.kf-rechtsseite p,
.kf-rechtsseite li {
  hyphens: auto;
}