/* ==========================================================================
   LenovaCare – lenovacare.de
   Gestaltung für ältere Menschen: große Schrift, hohe Kontraste,
   große Klickflächen, ruhiger Aufbau, keine Ablenkung.

   Markenfarben unverändert:
   Blau #0C3A76 · Orange #F15C14 · Weiß #FFFFFF
   ========================================================================== */

@import url("../fonts/fonts.css");

/* ======================================================= 1. Grundlagen */
:root {
  /* --- Markenfarben (nicht ändern) --- */
  --blau:         #0C3A76;
  --orange:       #F15C14;
  --weiss:        #FFFFFF;

  /* --- Abstufungen derselben Farben, für Lesbarkeit --- */
  --blau-tief:    #08294F;   /* Fußbereich */
  --blau-mittel:  #1A57A8;   /* helleres Blau, Kontrast zu Weiß 7,1:1 */
  --blau-luft:    #E7EEF8;   /* ruhige Abschnittsflächen */
  --blau-hauch:   #F3F7FC;
  --orange-tief:  #F15C14;   /* Vorgabe: Auf der gesamten Website wird ausschließlich das
                                Marken-Orange #F15C14 verwendet — keine abgeleiteten Abstufungen. */
  --orange-luft:  #FDEFE7;

  --text:         #14203A;   /* Fließtext, Kontrast 14.6:1 auf Weiß */
  --text-ruhig:   #43506B;   /* Nebentext, Kontrast 7.9:1 auf Weiß */
  --linie:        #D3DEEE;
  --linie-kraeftig:#A9BFDC;

  --schrift-titel: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --schrift-text:  "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --breite: 1800px;
  --breite-lesen: 900px;

  --rund: 18px;
  --rund-gross: 28px;

  --schatten: 0 10px 30px -18px rgba(12, 58, 118, .5);
  --schatten-kraeftig: 0 18px 44px -20px rgba(12, 58, 118, .45);

  --kopf-nav-hoehe: 3.6rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Bewusst größer als üblich (Standard wäre 16px) */
  font-size: 20px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-nav-hoehe) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ------------------------------------------------------- Typografie */
h1, h2, h3, h4 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.18;
  color: var(--blau);
  margin: 0 0 .7em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.4vw, 2.9rem); line-height: 1.12; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.1rem; }

p, li { max-width: 40em; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; }

a { color: var(--blau); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--orange-tief); }

.akzent { color: var(--orange-tief); }
.gross  { font-size: 1.15em; }

::selection { background: var(--orange); color: #fff; }

/* Deutlich sichtbarer Fokus – wichtig für Tastaturbedienung */
:focus-visible {
  outline: 4px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

.nur-lesbar {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprunglink {
  position: fixed; left: 1rem; top: -200px; z-index: 300;
  background: var(--blau); color: #fff; padding: 1rem 1.6rem;
  border-radius: 10px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.sprunglink:focus { top: 1rem; color: #fff; }

/* =========================================================== 2. Raster */
.bahn {
  width: 100%;
  max-width: min(var(--breite), 95vw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 2.5vw, 2.6rem);
}
.lesebahn { max-width: var(--breite-lesen); margin-inline: auto; }

.abschnitt      { padding: clamp(2.8rem, 6vw, 4.6rem) 0; }
.abschnitt-eng  { padding: clamp(1.8rem, 4vw, 2.8rem) 0; }

.flaeche-luft   { background: var(--blau-luft); }
.flaeche-hauch  { background: var(--blau-hauch); }
.flaeche-blau   { background: var(--blau); color: #fff; }
.flaeche-blau h1, .flaeche-blau h2, .flaeche-blau h3, .flaeche-blau h4 { color: #fff; }
.flaeche-blau a { color: #fff; }

.reihe { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); }
.reihe-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reihe-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Zweispalter: Text und Bild nebeneinander, nie übereinander */
.paar {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
.paar-schmal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: start;
}

/* ================================================== 3. Bausteine */

/* --- Überschrift eines Abschnitts --- */
.titel-block { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.titel-block p { color: var(--text-ruhig); font-size: 1.08rem; }
.flaeche-blau .titel-block p { color: rgba(255,255,255,.9); }

/* --- Mittig gesetzte Blöcke: alles auf einer Mittelachse --- */
.mittig { text-align: center; }
.mittig p, .mittig .ansage, .mittig ul, .mittig ol { margin-inline: auto; }
.mittig .strich { margin-inline: auto; }
.mittig .hinweiszeile { display: inline-block; }
.mittig .knopfreihe { justify-content: center; }

.hinweiszeile {
  display: block;
  font-family: var(--schrift-text);
  font-size: .8rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-tief);
  margin: 0 0 .7rem;
}
.flaeche-blau .hinweiszeile { color: #F15C14; }

.strich { width: 84px; height: 5px; background: var(--orange); border: 0; border-radius: 3px; margin: 0 0 1.6rem; }
.strich-mitte { margin-inline: auto; }
/* Schlanke Variante — greift die Akzentlinie aus dem Leitsatz auf */
.strich-schlank { width: 68px; height: 4px; border-radius: 2px; margin: 15px 0 16px; }
/* Der Außenabstand der Überschrift würde mit dem der Linie verschmelzen und
   den größeren Wert gewinnen lassen — hier deshalb neutralisiert. */
.titel-block h2:has(+ .strich-schlank) { margin-bottom: 0; }
.flaeche-blau .strich { background: #fff; }

/* --- Schaltflächen: mindestens 3rem hoch, klare Beschriftung --- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  min-height: 3.2rem;
  padding: .85rem 1.9rem;
  font-family: var(--schrift-text);
  font-size: 1.02rem; font-weight: 700;
  border: 3px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.knopf svg { width: 1.3em; height: 1.3em; flex: none; }

.knopf-orange { background: var(--orange); color: #fff; }
.knopf-orange:hover, .knopf-orange:focus-visible { background: var(--orange-tief); color: #fff; }

.knopf-blau { background: var(--blau); color: #fff; }
.knopf-blau:hover, .knopf-blau:focus-visible { background: var(--blau-tief); color: #fff; }

.knopf-rand { background: #fff; color: var(--blau); border-color: var(--blau); }
.knopf-rand:hover, .knopf-rand:focus-visible { background: var(--blau); color: #fff; }

.knopf-weiss { background: #fff; color: var(--blau); }
.knopf-weiss:hover, .knopf-weiss:focus-visible { background: var(--blau-luft); color: var(--blau); }

.knopf-weiss-rand { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.knopf-weiss-rand:hover, .knopf-weiss-rand:focus-visible { background: #fff; color: var(--blau); }

/* Anrufknopf der festen Leiste: Orange nur noch als Kante und Symbol, keine
   gefüllte Fläche mehr. Maße und Trefferfläche bleiben wie bei .knopf-rand. */
.knopf-akzent { background: #fff; color: var(--blau); border-color: var(--orange); }
.knopf-akzent svg { color: var(--orange); }
.knopf-akzent:hover, .knopf-akzent:focus-visible { background: var(--orange-luft); color: var(--blau); }

/* Zurückhaltende dritte Schaltfläche für Wege, die keine Antwort sind
   (Einwilligung: „Einstellungen"). Bewusst schwächer als die beiden
   gleichwertigen Antworten daneben — siehe Abschnitt 16. */
.knopf-still { background: #fff; color: var(--text-ruhig); border-color: var(--linie-kraeftig); font-weight: 600; }
.knopf-still:hover, .knopf-still:focus-visible { background: var(--blau-luft); color: var(--blau); border-color: var(--blau); }

.knopf-gross { min-height: 3.9rem; font-size: 1.12rem; padding: 1rem 2.3rem; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

/* --- Telefonnummer als eigenes, auffälliges Element --- */
.tel-block {
  display: inline-flex; align-items: center; gap: 1rem;
  background: #fff;
  border: 3px solid var(--orange);
  border-radius: var(--rund);
  padding: 1rem 1.6rem;
  text-decoration: none;
  color: var(--blau);
}
.tel-block:hover, .tel-block:focus-visible { background: var(--orange-luft); color: var(--blau); }
.tel-block .kreis {
  width: 3rem; height: 3rem; border-radius: 50%; flex: none;
  background: var(--orange); display: grid; place-items: center;
}
.tel-block .kreis svg { width: 1.5rem; height: 1.5rem; stroke: #fff; fill: none; stroke-width: 2; }
.tel-block .beschriftung { display: block; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-ruhig); }
.tel-block .nummer { font-family: var(--schrift-titel); font-size: 1.5rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.flaeche-blau .tel-block { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.flaeche-blau .tel-block .beschriftung { color: rgba(255,255,255,.85); }
.flaeche-blau .tel-block:hover { background: #fff; color: var(--blau); }
.flaeche-blau .tel-block:hover .beschriftung { color: var(--text-ruhig); }

/* --- Karte --- */
.karte {
  background: #fff;
  border: 2px solid var(--linie);
  border-radius: var(--rund-gross);
  padding: clamp(1.4rem, 2.6vw, 2rem);
  height: 100%;
}
.karte h3 { margin-bottom: .5rem; }
.karte p { color: var(--text-ruhig); }

/* Symbol über der Kartenüberschrift */
.karte-symbol {
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: var(--blau); color: #fff;
  display: grid; place-items: center;
  margin-bottom: 1.1rem;
}
.karte-symbol svg { width: 1.75rem; height: 1.75rem; }
.flaeche-luft .karte, .flaeche-hauch .karte { border-color: #fff; box-shadow: var(--schatten); }

/* --- Wegweiser: große, komplett klickbare Auswahlfelder --- */
.wegweiser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.weg {
  display: flex; flex-direction: column;
  background: #fff;
  border: 3px solid var(--linie);
  border-radius: var(--rund-gross);
  padding: clamp(1.5rem, 2.8vw, 2.1rem);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.weg:hover, .weg:focus-visible { border-color: var(--orange); background: var(--orange-luft); color: var(--text); transform: translateY(-3px); }
.weg .zeichen {
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: var(--blau); display: grid; place-items: center;
  margin-bottom: 1.2rem; flex: none;
}
.weg .zeichen svg { width: 2.1rem; height: 2.1rem; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.weg:hover .zeichen, .weg:focus-visible .zeichen { background: var(--orange); }
/* Statt eines Symbols ein Foto im Kreis (Ansprechpartner) */
.weg .zeichen-foto { overflow: hidden; background: none; }
.weg .zeichen-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.weg:hover .zeichen-foto, .weg:focus-visible .zeichen-foto { background: none; }
.weg h3 { margin-bottom: .45rem; }
.weg p { color: var(--text-ruhig); font-size: .97rem; margin-bottom: 1.2rem; }
.weg .pfeil {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--blau);
}
.weg .pfeil svg { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.weg:hover .pfeil { color: var(--orange-tief); }

/* --- Listen --- */
.liste-haken { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.liste-haken li {
  position: relative;
  padding-left: 2.9rem;
  max-width: 36em;
}
.liste-haken li::before {
  content: "";
  position: absolute; left: 0; top: .12em;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--blau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/60% no-repeat;
}
.liste-haken.in-orange li::before { background-color: var(--orange); }
.flaeche-blau .liste-haken li::before { background-color: var(--orange); }

.liste-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.liste-punkte li { position: relative; padding-left: 1.6rem; color: var(--text-ruhig); }
.liste-punkte li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange);
}

/* Zwei Spalten für lange Listen, auf schmalen Geräten eine */
.liste-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- Bild --- */
.bild {
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--blau-luft);
}
.bild img { width: 100%; height: 100%; object-fit: cover; }
.bild-quer { aspect-ratio: 4 / 3; }
/* Seitenverhältnis der eigenen Aufnahmen (5:4), damit nichts beschnitten wird */
.bild-alltag { aspect-ratio: 5 / 4; }
/* Bildband über die volle Seitenbreite. Im Verhältnis 3:1, damit es auch
   auf breiten Bildschirmen nicht zu hoch wird. */
.bild-breitband { aspect-ratio: 3 / 1; }
.bild-hoch { aspect-ratio: 3 / 4; }
.bild-band { aspect-ratio: 21 / 8; }

figure.bild-figur { margin: 0; }
figure.bild-figur figcaption {
  font-size: .88rem; color: var(--text-ruhig); padding-top: .7rem;
}

/* --- Merksatz / Zitat --- */
.merksatz {
  background: var(--blau);
  color: #fff;
  padding: clamp(2.4rem, 5vw, 3.8rem) 0;
  text-align: center;
}
.merksatz blockquote {
  margin: 0 auto;
  /* Breit genug, damit die Leitsätze auf großen Schirmen in einer Zeile stehen.
     Auf schmalen Geräten bricht der Satz weiterhin von selbst um. */
  max-width: 34em;
  font-family: var(--schrift-titel);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  line-height: 1.35;
}
.merksatz cite {
  display: block; margin-top: 1.3rem;
  font-family: var(--schrift-text); font-style: normal;
  font-size: .88rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #F15C14;
}

/* --- Kasten mit Hinweis --- */
.kasten {
  border-left: 6px solid var(--orange);
  background: var(--orange-luft);
  border-radius: 0 var(--rund) var(--rund) 0;
  padding: 1.3rem 1.6rem;
  color: var(--text);
}
.kasten p { max-width: none; }
.kasten-blau {
  border-left-color: var(--blau);
  background: var(--blau-luft);
}

/* ================================================ 4. Kopfbereich */

/* Eine blaue Leiste: Logo links, Navigation gleichmäßig daneben */
.kopfleiste {
  position: sticky; top: 0; z-index: 100;
  /* gleiches dunkles Blau wie der Fußbereich – rahmt die Seite ein */
  background: var(--blau-tief);
  box-shadow: 0 4px 18px -12px rgba(8, 41, 79, .9);
}
.kopfleiste .bahn {
  display: flex; align-items: stretch;
  gap: clamp(1rem, 2.4vw, 3.5rem);
  min-height: 5.2rem;
}
/* Etwas Luft um das Logo. Wächst das Logo darüber hinaus, wächst die
   Leiste mit, statt das Logo abzuschneiden. */
.marke { display: inline-flex; align-items: center; flex: none; padding-block: .5rem; }
/* Auf breiten Bildschirmen ist rechts Platz frei, dort darf das Logo größer
   werden. Ab etwa 1280px bleibt es klein, sonst verdrängt es die Reiter.
   68px bei 1280px  ->  88px ab etwa 1810px. */
.marke img { height: clamp(3.4rem, .8px + 4.8vw, 4.4rem); width: auto; flex: none; }

.markenzeile .tel-block:hover,
.markenzeile .tel-block:hover .beschriftung,

/* Navigation: weiße Schrift auf Blau, gleichmäßig über die Zeile verteilt */
.hauptnav { flex: 1; display: flex; align-items: stretch; }
.hauptnav ul {
  list-style: none; margin: 0; padding: 0; width: 100%;
  display: flex; align-items: stretch; flex-wrap: wrap;
  justify-content: space-between;
}
.hauptnav li { max-width: none; flex: 0 1 auto; display: flex; }
.hauptnav a {
  display: flex; align-items: center; justify-content: center;
  /* Enger gesetzt, damit die acht Reiter auch auf schmalen Notebooks
     in eine Zeile passen. */
  padding: .5rem clamp(.55rem, 1.05vw, 1.4rem);
  font-size: 1.02rem; font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-bottom: 5px solid transparent;
  white-space: nowrap;
}
/* Beim Überfahren eine dezent hellere Fläche, die aktuelle Seite dauerhaft
   im helleren Blau mit orangem Fuß. */
.hauptnav a:hover,
.hauptnav a:focus-visible { background: rgba(255,255,255,.15); color: #fff; }
.hauptnav a[aria-current="page"] {
  background: var(--blau-mittel);
  color: #fff;
  border-bottom-color: var(--orange);
}
.hauptnav a[aria-current="page"]:hover { background: #2264BE; color: #fff; }

/* Bedienung auf Telefon und Tablet */
.menuknopf {
  display: none;
  align-items: center; gap: .7rem;
  background: var(--blau); color: #fff;
  border: 0; border-radius: 12px;
  font-family: var(--schrift-text); font-size: 1.02rem; font-weight: 700;
  padding: .8rem 1.2rem; min-height: 3.2rem; white-space: nowrap; flex: none;
  cursor: pointer;
}
.menuknopf .balken { display: block; width: 1.4rem; height: 3px; background: #fff; border-radius: 2px; position: relative; }
.menuknopf .balken::before, .menuknopf .balken::after {
  content: ""; position: absolute; left: 0; width: 1.4rem; height: 3px; background: #fff; border-radius: 2px;
}
.menuknopf .balken::before { top: -.45rem; }
.menuknopf .balken::after { top: .45rem; }
.menuknopf[aria-expanded="true"] .balken { background: transparent; }
.menuknopf[aria-expanded="true"] .balken::before { top: 0; transform: rotate(45deg); }
.menuknopf[aria-expanded="true"] .balken::after { top: 0; transform: rotate(-45deg); }

.klappmenue { display: none; }
/* Das offene Menü liegt in der klebenden Kopfleiste. Ist es höher als das
   Fenster, bleibt sein unteres Ende unerreichbar — der klebende Kopf wandert
   nicht mit. Gemessen bei 320 x 720: Kopf plus Menü 790px, Fenster 720px; die
   letzten 70px (bisher der Anrufknopf, jetzt die Aktionsreihe) waren nicht
   scrollbar. Deshalb bekommt das Menü eine eigene Höhenbegrenzung und rollt
   innen. Abgezogen wird die Höhe der Leiste darüber: 5.2rem, ab 640px 3.7rem
   (Rev. 15; vorher 4.2rem).
   `dvh` fängt die ein- und ausfahrende Adressleiste auf Telefonen ab; die
   `vh`-Zeile davor bleibt als Rückfallebene stehen. */
.klappmenue.offen {
  display: block; background: #fff; border-top: 2px solid var(--blau-luft);
  max-height: calc(100vh - 5.2rem);
  max-height: calc(100dvh - 5.2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 640px) {
  .klappmenue.offen {
    max-height: calc(100vh - 3.7rem);
    max-height: calc(100dvh - 3.7rem);
  }
}
.klappmenue ul { list-style: none; margin: 0; padding: .6rem 0 1.2rem; }
.klappmenue li { max-width: none; }
.klappmenue a {
  display: block;
  padding: 1rem .4rem;
  font-size: 1.12rem; font-weight: 700;
  color: var(--blau); text-decoration: none;
  border-bottom: 2px solid var(--blau-luft);
}
/* Vorgabe des Auftraggebers: überall dasselbe Marken-Orange. */
.klappmenue a[aria-current="page"] { color: #F15C14; }
/* Zwei gleichrangige, kompakte Aktionen am Fuß des Klappmenüs.
   Vorher stand hier ein orange gefüllter .knopf-gross; seine Beschriftung
   „08331 499026 anrufen" brach unter 400px auf drei Zeilen um und beanspruchte
   den größten Teil der Menühöhe. Jetzt zwei Spalten, orange nur als Symbolfarbe
   und obere Kante — die Navigation darüber behält das Gewicht. */
/* URSACHE des orangen Klotzes im Klappmenü: .klappmenue liegt innerhalb von
   .kopfleiste und erbte damit `.kopfleiste .bahn { display:flex }`. Navigation
   und Anrufknopf standen deshalb NEBENeinander — der Knopf als schmale, hohe
   Säule über die volle Menühöhe, mit dreizeilig umbrechender Beschriftung.
   Hier wird die Bahn des Klappmenüs wieder zum normalen Block. */
.klappmenue .bahn { display: block; min-height: 0; }

.menue-aktionen {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  margin-top: 1rem; padding-top: 1rem;
  border-top: 2px solid var(--blau-luft);
}
.klappmenue .menue-aktion {
  display: flex; align-items: center; gap: .6rem;
  min-height: 3.1rem; padding: .6rem .75rem;
  background: #fff;
  border: 2px solid var(--linie); border-top: 3px solid var(--orange);
  border-radius: 12px;
  color: var(--blau); text-decoration: none;
}
.klappmenue .menue-aktion svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--orange); }
.klappmenue .menue-aktion-text { display: flex; flex-direction: column; min-width: 0; }
.klappmenue .menue-aktion .titel { font-size: 1rem; font-weight: 800; line-height: 1.2; }
.klappmenue .menue-aktion .wert { font-size: .84rem; font-weight: 600; color: var(--text-ruhig); line-height: 1.25; }
.klappmenue .menue-aktion:hover, .klappmenue .menue-aktion:focus-visible { background: var(--orange-luft); border-color: var(--orange); }

/* Unter 420px reicht die Spaltenbreite nicht mehr für die zweite Zeile.
   Gemessen bei 320px: je Spalte 131px, davon 72px für Text — „08331 499026"
   braucht dort rund 95px. Die Nummer bleibt über den tel:-Verweis erreichbar,
   der Name der Schaltfläche nennt sie weiterhin. */
@media (max-width: 419px) {
  .klappmenue .menue-aktion { padding: .6rem; gap: .5rem; }
  .klappmenue .menue-aktion .wert { display: none; }
}

/* ============================================ 5. Startseite: Begrüßung */
/* Etwas knapper als die übrigen Abschnitte, damit der Begrüßungsblock auf
   einem Full-HD-Bildschirm samt Schaltflächen ohne Scrollen sichtbar ist. */
.begruessung { background: var(--blau-luft); padding: clamp(2rem, 3.4vw, 3rem) 0; }
/* --- Begrüßungsraster ---------------------------------------------
   Quelltextreihenfolge: Überschrift, Unterzeile, Bild, Leitsatz, Text,
   Schaltflächen. Genau so erscheint es auf Telefon und Tablet.
   Ab 901px stellt das Raster das Bild in die rechte Spalte, oben
   bündig mit der Überschrift. */
/* Zweispaltig ab 1340px — bis 26.08.2026 stand hier 1400px.

   Die alte Begruendung lautete: "Darunter schrumpft das Bild schneller als
   der Text waechst, und der Ausgleichsabstand unter dem Bild wuerde zu gross."
   Nachgemessen traegt das nicht: Die gemeinsame Unterkante beider Spalten
   liegt bis hinunter zu 1200px Breite bei 0px, weil die rechte Spalte ueber
   `align-self: stretch` mitwaechst und `margin-top: auto` die Schaltflaechen
   nach unten schiebt. Je schmaler das Fenster, desto staerker schrumpft das
   Bild — die linke Spalte bleibt also die bestimmende.

   1340px deckt die haeufige Notebook-Breite 1366px ab. Messwerte in
   UEBERGABE.md, Abschnitt 5n.

   ACHTUNG: Die Grenze gehoert mit zwei weiteren zusammen und darf nur
   gemeinsam mit ihnen wandern:
     - `@media (max-width: 1339px)`  einspaltige .held-rechts-Fassung
     - `@media (min-width: 1340px) and (max-height: 950px)`  Abschnitt 30
   Das `@media (max-width: 1400px)` weiter unten gehoert NICHT dazu — das ist
   die 55/45-Aufteilung des Fussbereichs und bleibt bei 1400px. */
@media (min-width: 1340px) {
  .heldenraster {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    column-gap: clamp(2rem, 3.6vw, 4rem);
    align-items: start;
    align-content: start;
    grid-auto-rows: min-content;
  }
  .heldenraster > * { grid-column: 1; }
  /* span 20 statt -1: -1 bezieht sich nur auf ausdrücklich angelegte
     Zeilen und würde hier nur die erste Zeile überspannen. */
  /* Rechte Spalte wächst auf die Höhe der linken. Beratungszeile und
     Schaltflächen werden dabei nach unten geschoben, sodass beide Spalten
     auf derselben Linie abschließen. */
  .heldenraster > .held-rechts {
    grid-column: 2; grid-row: 1 / span 20;
    align-self: stretch;
    display: flex; flex-direction: column;
  }
  .held-rechts .beratungszeile { margin-top: auto; }
}
.begruessung h1 { margin-bottom: .35rem; }
/* Seitenverhältnis der Aufnahme (1200x960 = 5:4), damit object-fit: cover
   nichts wegschneidet. Das Bild füllt die rechte Spalte aus. */
.held-bild { aspect-ratio: 5 / 4; }

/* Unterzeile zur Hauptüberschrift. Groß und fett gesetzt, deshalb darf hier
   das Marken-Orange stehen (Norm für große Schrift erfüllt). */
.unterzeile {
  font-family: var(--schrift-titel);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 600; line-height: 1.25;
  color: var(--blau);
  margin: 0 0 .9rem;
}
/* Orange hervorgehobene Wörter in Überschriften — immer #F15C14. */
.in-orange { color: var(--orange-tief); }
.begruessung .ansage {
  /* Etwas größer als Fließtext, aber auf angenehmer Lesebreite.
     Breite und Zeilenhöhe sind zugleich die Stellschrauben, mit denen
     beide Spalten unten auf einer Linie abschließen. */
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  line-height: 1.75;
  color: var(--text);
  max-width: 700px;
}
.begruessung .bild { box-shadow: var(--schatten-kraeftig); }

/* Abstände im Begrüßungsblock: Überschrift, Unterzeile und Leitsatz bilden
   eine Einheit, danach folgt mehr Luft zum Fließtext. */
.begruessung .unterzeile { margin-bottom: 14px; }
.begruessung .leitsatz-zeile { margin-bottom: 24px; }
.begruessung .ansage { margin-bottom: 0; }
/* Nur die orangen "zuhause" im Fließtext halbfett — Farbe und Größe bleiben. */
.begruessung .ansage .in-orange { font-weight: 600; }
/* Breite steht in der Desktop-Stufe (640px) — hier keine zusätzliche Begrenzung,
   sonst könnte die Box auf dem Telefon aus der Spalte laufen. */
.begruessung .leitsatz-zeile { max-width: 100%; }

.merkzeile {
  display: flex; flex-wrap: wrap; gap: .7rem 1.6rem;
  margin-top: 1.8rem; padding: 0; list-style: none;
}
.merkzeile li {
  display: inline-flex; align-items: center; gap: .55rem;
  font-weight: 700; color: var(--blau); max-width: none;
}
.merkzeile svg { width: 1.4rem; height: 1.4rem; flex: none; }

/* ==================================== 6. Ablauf als nummerierte Folge */
.folge { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.folge > li {
  display: grid;
  grid-template-columns: 4.6rem minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.8rem);
  align-items: start;
  max-width: none;
}
.folge .zahl {
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  background: var(--blau); color: #fff;
  display: grid; place-items: center;
  font-family: var(--schrift-titel); font-weight: 700; font-size: 1.7rem;
}
/* Auf breiten Bildschirmen die Merkmalsliste neben den Text setzen, statt
   die Zeilen länger zu machen. Kurze Zeilen bleiben besser lesbar. */
@media (min-width: 1100px) {
  .folge > li > div:has(.liste-haken) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    column-gap: clamp(2rem, 4vw, 4rem);
    grid-auto-rows: min-content;
    align-content: start;
  }
  .folge > li > div:has(.liste-haken) > * { grid-column: 1; }
  .folge > li > div:has(.liste-haken) > .liste-haken {
    grid-column: 2;
    grid-row: 1 / span 20;
    margin-top: 0;
  }
}

.folge .zeitangabe {
  display: block;
  font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange-tief); margin-bottom: .25rem;
}
.folge h3 { margin-bottom: .4rem; }
.folge p { color: var(--text-ruhig); }
.folge .liste-haken { margin-top: 1rem; }

/* ============================ 7. Kosten: drei Situationen nebeneinander */
.kostenliste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.4vw, 1.9rem);
  align-items: stretch;
}
.kostenzeile {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff;
  border: 2px solid var(--linie);
  border-radius: var(--rund-gross);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.kostenzeile.hervor { border-color: var(--orange); border-width: 3px; box-shadow: var(--schatten); }
.kostenzeile h3 { margin-bottom: .4rem; }
.kostenzeile .wofuer { color: var(--text-ruhig); margin: 0; font-size: .99rem; min-height: 3.4em; }

/* Hinweis auf den häufigsten Fall */
.kosten-band {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  background: var(--orange); color: #fff;
  /* Groß genug, damit Weiß auf dem Marken-Orange die Norm erfüllt (3:1 ab 18,7px fett).
     Bei 14,8px wären 4,5:1 nötig gewesen, erreicht werden 3,34:1. */
  font-size: .95rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem 1rem; border-radius: 999px; white-space: nowrap;
}

.kostenzeile .betrag {
  margin: 1.4rem 0 0;
  padding: 1.1rem 0;
  border-top: 2px solid var(--blau-luft);
  border-bottom: 2px solid var(--blau-luft);
}
.kostenzeile .betrag .vorsatz {
  display: block; font-size: .76rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-ruhig);
  margin-bottom: .15rem;
}
.kostenzeile .betrag .summe {
  font-family: var(--schrift-titel); font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem); color: var(--blau); line-height: 1.15;
  white-space: nowrap;
}
.kostenzeile .betrag .takt { display: block; font-size: .88rem; color: var(--text-ruhig); }
/* Merkmale stehen unten bündig, damit die Karten gleich wirken */
.kostenzeile .merkmale { margin-top: 1.4rem; }
.kostenzeile .merkmale li { font-size: .97rem; }

.fussnote { font-size: .86rem; line-height: 1.7; color: var(--text-ruhig); max-width: 60em; }

/* ============================================ 8. Fragen und Antworten */
.fragenliste { display: grid; gap: 1rem; }
.frage {
  border: 2px solid var(--linie);
  border-radius: var(--rund);
  background: #fff;
  overflow: hidden;
}
.frage-knopf {
  width: 100%;
  display: flex; align-items: center; gap: 1.2rem;
  background: none; border: 0; cursor: pointer;
  padding: 1.2rem 1.4rem;
  text-align: left;
  font-family: var(--schrift-titel);
  font-size: 1.15rem; font-weight: 600; line-height: 1.35;
  color: var(--blau);
  min-height: 3.8rem;
}
.frage-knopf:hover { background: var(--blau-luft); }
.frage-knopf .text { flex: 1; }
.frage-knopf .zeichen {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 3px solid var(--blau); position: relative;
}
.frage-knopf .zeichen::before,
.frage-knopf .zeichen::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--blau); border-radius: 2px;
}
.frage-knopf .zeichen::before { width: 1rem; height: 3px; }
.frage-knopf .zeichen::after  { width: 3px; height: 1rem; }
.frage-knopf[aria-expanded="true"] { background: var(--blau); color: #fff; }
.frage-knopf[aria-expanded="true"] .zeichen { border-color: #fff; }
.frage-knopf[aria-expanded="true"] .zeichen::before,
.frage-knopf[aria-expanded="true"] .zeichen::after { background: #fff; }
.frage-knopf[aria-expanded="true"] .zeichen::after { height: 0; }
.antwort { padding: 1.3rem 1.4rem 1.5rem; border-top: 2px solid var(--blau-luft); }
.antwort[hidden] { display: none; }
.antwort p, .antwort li { color: var(--text-ruhig); }

/* Antworten, die ohne Klick sichtbar sind (Startseite) */
.antwort-offen {
  border: 2px solid var(--linie);
  border-radius: var(--rund);
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  background: #fff;
}
.antwort-offen h3 { margin-bottom: .5rem; }
.antwort-offen p { color: var(--text-ruhig); }

/* ================================================= 9. Bürozeiten */
.buerozeiten { width: 100%; border-collapse: collapse; table-layout: auto; }
.buerozeiten caption {
  text-align: left;
  font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700;
  color: var(--blau); padding-bottom: .8rem;
}
/* Kopfzeile der Zeitspalten */
.buerozeiten thead th {
  font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-ruhig);
  padding: 0 1.4rem .5rem 0;
  border-bottom: 2px solid var(--linie);
  text-align: left; white-space: nowrap;
}
.buerozeiten tbody th, .buerozeiten tbody td {
  padding: .6rem 1.4rem .6rem 0;
  border-bottom: 1px solid var(--linie);
  text-align: left;
  font-size: 1rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.buerozeiten tbody td:last-child, .buerozeiten thead th:last-child { padding-right: 0; }
.buerozeiten tbody th { font-weight: 700; color: var(--text); padding-right: 2rem; }
.buerozeiten tbody td { color: var(--text-ruhig); }
.buerozeiten tbody td.ohne { color: var(--linie-kraeftig); }
.buerozeiten tbody tr:last-child th,
.buerozeiten tbody tr:last-child td { border-bottom: 0; }
.buerozeiten + .zeit-hinweis { margin-top: .9rem; font-size: .93rem; color: var(--text-ruhig); }

.flaeche-blau .buerozeiten caption { color: #fff; }
.flaeche-blau .buerozeiten thead th { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.28); }
.flaeche-blau .buerozeiten tbody th { color: #fff; border-color: rgba(255,255,255,.18); }
.flaeche-blau .buerozeiten tbody td { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); }
.flaeche-blau .buerozeiten tbody td.ohne { color: rgba(255,255,255,.4); }
.flaeche-blau .zeit-hinweis { color: rgba(255,255,255,.85); }

/* --- Kontaktangaben: Symbole und Werte jeweils in einer Flucht --- */
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.kontaktliste li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .9rem;
  align-items: start;
  max-width: none;
}
.kontaktliste .ikon {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blau-luft); color: var(--blau);
}
.kontaktliste .ikon svg { width: 1.35rem; height: 1.35rem; }
.kontaktliste .angabe { display: block; padding-top: .1rem; }
.kontaktliste .rolle {
  display: block;
  font-size: .74rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-ruhig);
  margin-bottom: .1rem;
}
.kontaktliste .wert {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 1.14rem; font-weight: 600; line-height: 1.35;
  color: var(--blau);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
/* Längere Angaben (z. B. Einzugsgebiet) im normalen Fließtext */
.kontaktliste .wert-text {
  font-family: var(--schrift-text);
  font-size: .96rem; font-weight: 400; line-height: 1.55;
  max-width: 22em;
}
/* Klickfläche der Links auf 44 Pixel bringen, ohne das Layout zu verschieben */
.kontaktliste a.wert { padding-block: .38rem; margin-block: -.38rem; }
/* Rufnummern nie umbrechen */
.kontaktliste a.wert[href^="tel:"] { white-space: nowrap; }
a.wert:hover, a.wert:focus-visible { color: var(--orange-tief); text-decoration: underline; }

.notfallhinweis {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin-top: 1.2rem; padding: 1rem 1.2rem;
  background: var(--orange-luft);
  border-radius: var(--rund);
  font-weight: 700; color: var(--blau);
  text-align: center;
}
.notfallhinweis svg { width: 1.6rem; height: 1.6rem; flex: none; stroke: var(--orange-tief); fill: none; stroke-width: 2; }
.flaeche-blau .notfallhinweis { background: rgba(255,255,255,.12); color: #fff; }
.flaeche-blau .notfallhinweis svg { stroke: #F15C14; }

/* ============================================ 10. Seitenkopf Unterseiten */
.seitentitel {
  background: var(--blau-luft);
  padding: clamp(2rem, 4.5vw, 3.4rem) 0;
  border-bottom: 4px solid #fff;
}
.seitentitel h1 { margin-bottom: .5rem; }
.seitentitel p { font-size: 1.08rem; color: var(--text); }

/* Auf breiten Bildschirmen die Schaltflächen rechts neben den Text stellen */
@media (min-width: 1100px) {
  .seitentitel .bahn:not(.lesebahn):has(.knopfreihe) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    grid-auto-rows: min-content;
    align-content: start;
  }
  .seitentitel .bahn:not(.lesebahn):has(.knopfreihe) > * { grid-column: 1; }
  .seitentitel .bahn:not(.lesebahn):has(.knopfreihe) > .knopfreihe {
    grid-column: 2;
    grid-row: 1 / span 20;
    align-self: center;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
  }
}

.pfad { font-size: .88rem; color: var(--text-ruhig); margin-bottom: 1rem; }
.pfad a { color: var(--blau); }
.pfad span { margin: 0 .5rem; }

/* ============================================ 11. Rechtstexte */
.rechtstext h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 2.4rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--text-ruhig); }
.rechtstext ul { padding-left: 1.4rem; }
.rechtstext li { margin-bottom: .5rem; }
.rechtstext address { font-style: normal; line-height: 1.9; color: var(--text-ruhig); }

/* Angaben mit Bezeichnung: links die Bezeichnung, rechts der Wert.
   Dadurch beginnen alle Nummern und Adressen an derselben Stelle. */
.angabenliste {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.4rem;
  row-gap: .6rem;
  margin: 0;
  line-height: 1.6;
}
.angabenliste dt { color: var(--text-ruhig); }
.angabenliste dt::after { content: ":"; }
.angabenliste dd { margin: 0; color: var(--text-ruhig); }
/* Nummern nie mitten in der Zahl umbrechen lassen */
.angabenliste dd a { white-space: nowrap; }

/* ================================================== 12. Fußbereich */
.fuss { background: var(--blau-tief); color: rgba(255,255,255,.8); padding: clamp(2.4rem, 5vw, 3.6rem) 0 0; }
.fuss a { color: #fff; }
.fuss a:hover { color: #F15C14; }
.fuss h2 {
  color: #fff; font-family: var(--schrift-text);
  font-size: .86rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  margin-bottom: 1.1rem;
}
/* Zwei Spalten: Marke mit Anschrift links, Erreichbarkeit rechts. Die frühere
   dritte Spalte mit Bürozeiten-Tabelle und Erreichbarkeitshinweis ist entfallen
   — dieselben Angaben stehen ausführlich auf der Kontaktseite.

   Die Aufteilung ist 55 / 45: die rechte Spalte beginnt auf dem Desktop exakt
   bei 55 % der Bahnbreite und läuft bis zum rechten Rand. Der Spalt wird der
   linken Spalte abgezogen, damit die 55-%-Marke der Startpunkt der rechten
   Spalte bleibt und nicht durch den Spalt nach rechts wandert. Vorher stand
   dort `1.25fr 1fr`; die rechte Spalte begann damit erst bei 57,4 %. */
.fuss-raster {
  --fuss-spalt: clamp(2rem, 4vw, 3.6rem);
  display: grid;
  grid-template-columns: minmax(0, calc(55% - var(--fuss-spalt))) minmax(0, 1fr);
  gap: var(--fuss-spalt);
  align-items: start;
}
/* Die Überschrift der Kontaktspalte steht auf der Textachse der Liste
   darunter, nicht an der Spaltenkante — so beginnen SO ERREICHEN SIE UNS,
   BÜRO, OLIVER FISCHER, E-MAIL, BÜROZEITEN und der Hinweistext auf einer
   Linie. Der Wert ist derselbe wie in `.fuss-hinweis`: Symbolspalte plus
   Spaltenabstand der Kontaktliste. */
.fuss-kontakt h2 { margin-left: calc(2.6rem + .9rem); }
/* Kurzfassung der Bürozeiten im Fußbereich: drei Zeilen statt der Tabelle.
   Ein gemeinsames Raster für alle drei Zeilen, damit die Zeiten untereinander
   fluchten; die Tagspalte richtet sich mit `auto` nach dem längsten Eintrag
   ("Di–Do") und braucht keinen geschätzten Wert. Die ausführliche Tabelle
   steht weiterhin auf der Kontaktseite. */
/* Selektor bewusst mit `.kontaktliste`: `.kontaktliste .wert` setzt
   `display: block` und hätte sonst die höhere Spezifität. */
.kontaktliste .zeiten-kurz {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .15rem .9rem;
  font-family: var(--schrift-text);
  font-size: .96rem;
  font-weight: 400;
  line-height: 1.5;
}
.kontaktliste .zeiten-kurz .tag { font-weight: 700; }
/* Die Zeitspannen eines Tages stehen in der Zeitenspalte nebeneinander, mit
   festem Abstand statt Trennzeichen, und werden in sich nie umgebrochen
   („13 Uhr –“ allein am Zeilenende war der Preis der ausgeschriebenen Fassung).
   Früher trennte „ · “ Vor- und Nachmittag von Di–Do; mobil brach die Zeile am
   Trenner um und der Punkt blieb hinter „8 Uhr – 12 Uhr“ stehen. Reicht der
   Platz nicht, rückt die zweite Spanne an dieselbe Kante darunter; bis 640px
   stehen die Spannen immer untereinander (Regel dort). Das Leerzeichen
   zwischen den Spannen im HTML stellt ein Flex-Container nicht dar.
   (Rev. 15, 14.09.2026) */
.kontaktliste .zeiten-kurz > :not(.tag) { display: flex; flex-wrap: wrap; column-gap: 1.2em; }
.kontaktliste .zeiten-kurz .spanne { white-space: nowrap; }

.fuss-marke img { height: 4.2rem; width: auto; margin-bottom: 1.2rem; }
.fuss-marke p { font-size: .96rem; max-width: 30em; }
.fuss-marke .kontaktliste { margin-top: 1.6rem; }
.fuss li { max-width: none; }

/* Kontaktliste auf dunklem Grund */
.fuss .kontaktliste .ikon { background: rgba(255,255,255,.1); color: #fff; }
.fuss .kontaktliste .rolle { color: rgba(255,255,255,.62); }
.fuss .kontaktliste .wert { color: #fff; }
.fuss .kontaktliste a.wert:hover,
.fuss .kontaktliste a.wert:focus-visible { color: #F15C14; }

/* Bürozeiten im Fußbereich */
.fuss .buerozeiten caption {
  color: #fff; font-size: .86rem; font-family: var(--schrift-text);
  letter-spacing: .15em; text-transform: uppercase; font-weight: 800;
  padding-bottom: 1.1rem;
}
.fuss .buerozeiten thead th { color: rgba(255,255,255,.62); border-color: rgba(255,255,255,.22); font-size: .72rem; }
.fuss .buerozeiten tbody th { color: #fff; border-color: rgba(255,255,255,.14); font-size: .95rem; }
.fuss .buerozeiten tbody td { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.14); font-size: .95rem; }
.fuss .buerozeiten tbody td.ohne { color: rgba(255,255,255,.35); }
/* Im Fuß enger gesetzt, damit die Spalte schmal bleiben darf */
.fuss .buerozeiten tbody th { padding-right: 1.1rem; }
.fuss .buerozeiten tbody td,
.fuss .buerozeiten thead th { padding-right: .9rem; }
.fuss .buerozeiten tbody td:last-child,
.fuss .buerozeiten thead th:last-child { padding-right: 0; }
.fuss .zeit-hinweis { color: rgba(255,255,255,.72); font-size: .9rem; }
.fuss .notfallhinweis { background: rgba(255,255,255,.1); color: #fff; margin-top: 1.1rem; }
.fuss .notfallhinweis svg { stroke: #F15C14; }
/* Der Hinweis steht schlicht auf dem Fußhintergrund: keine Fläche, kein
   Rahmen, kein Radius. Nur das orange Symbol und weißer Text daneben.
   Bewusst ohne die Klasse `.notfallhinweis` im HTML — die trägt Fläche und
   Radius und wird im Seiteninhalt weiterhin so gebraucht.
   1.1rem Außenabstand ist der Zeilenabstand der Kontaktliste darüber. */
.fuss-hinweis {
  /* Dasselbe Raster wie die Einträge der Kontaktliste: Symbolspalte 2.6rem,
     Abstand 0.9rem. Der Text beginnt dadurch auf derselben Achse wie Büro,
     Oliver Fischer und E-Mail, das Uhrsymbol steht links davon in der
     Symbolspalte. */
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .9rem;
  /* Oben ausgerichtet, nicht mittig: bei drei- bis siebenzeiligem Hinweis
     wänderte ein mittig gesetztes Symbol weit nach unten und löste sich vom
     Text. Der Feinausgleich sitzt am Symbol selbst. */
  align-items: start;
  margin-top: 1.1rem;
  max-width: none;
  color: #fff;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.5;
  /* Ohne Ausgleich blieb bei 1920px nur ein Wort auf der letzten Zeile.
     Dieselbe Eigenschaft nutzen die Überschriften der Seite. */
  text-wrap: balance;
}
.fuss-hinweis svg {
  width: 1.2rem; height: 1.2rem;
  /* mittig in der Symbolspalte, wie die Kreise der Kontaktliste */
  justify-self: center;
  /* Mittig zur **ersten** Textzeile: die Zeile ist .96rem × 1,5 = 28,8 px hoch,
     das Symbol 24 px — macht 2,4 px Versatz. Derselbe Gedanke wie bei den
     Symbolen der Vier Versprechen, die mittig zur Überschriftzeile sitzen. */
  margin-top: .12rem;
  stroke: #F15C14; fill: none; stroke-width: 2;
}

.fuss-schluss {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 2px solid rgba(255,255,255,.15);
  padding: 1.3rem 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .9rem;
}
.fuss-schluss nav { display: flex; gap: 1.8rem; flex-wrap: wrap; }

/* ============================== 13. Feste Anrufleiste auf dem Telefon
   Rev. 11: deutlich zurückhaltender. Vorher lag hier eine vollflächig orange
   Schaltfläche, die auf jeder Seite am unteren Rand stand. Jetzt trägt der
   Anrufknopf nur noch eine orange Kante und ein oranges Symbol; die Leiste ist
   etwas flacher. Die Trefferflächen bleiben mit 3rem (60px) deutlich über den
   geforderten 44px. */
.anrufleiste {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 90;
  background: #fff;
  border-top: 2px solid var(--linie);
  padding: .5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  gap: .55rem;
  box-shadow: 0 -8px 24px -20px rgba(8,41,79,.75);
}
.anrufleiste .knopf { flex: 1; min-height: 3rem; padding: .6rem .5rem; font-size: .96rem; border-width: 2px; }
.anrufleiste .knopf svg { width: 1.2em; height: 1.2em; }

/* ================================================== 14. Formular */
.formular { display: grid; gap: 1.3rem; }
.feld { display: grid; gap: .45rem; }
.feld label { font-size: 1.02rem; font-weight: 700; color: var(--blau); }
.feld .zusatz { display: block; font-weight: 400; color: var(--text-ruhig); font-size: .92rem; }
.feld input, .feld textarea {
  font-family: var(--schrift-text); font-size: 1.05rem; color: var(--text);
  padding: .9rem 1.1rem;
  border: 3px solid var(--linie-kraeftig);
  border-radius: 12px;
  background: #fff;
  width: 100%;
  min-height: 3.4rem;
}
.feld input:focus, .feld textarea:focus { outline: 4px solid var(--orange); outline-offset: 2px; border-color: var(--blau); }
.feld textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.pflichtgruppe {
  border: 0; padding: 0; margin: 0; display: grid; gap: 1rem;
}
.pflichtgruppe legend { padding: 0; font-size: 1.02rem; font-weight: 700; color: var(--blau); }
.honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formhinweis { font-size: .92rem; color: var(--text-ruhig); }
.formfehler {
  border-left: 6px solid var(--orange-tief);
  background: var(--orange-luft);
  padding: 1rem 1.3rem; border-radius: 0 var(--rund) var(--rund) 0;
  font-weight: 700; color: var(--text);
}

/* ================================================== 15. Anpassungen */
/* Ab hier passt die Navigation nicht mehr neben das Logo */
/* Der Zeitenblock braucht rund 435px in einer Flucht. Passt das nicht mehr
   neben den Text, stellen wir beide Hälften untereinander. */
@media (max-width: 1080px) {
  .paar-schmal { grid-template-columns: 1fr; }
}

/* Wird der Platz knapper, teilen sich Marke und Erreichbarkeit die Breite
   gleichmäßig. Die Marke bekommt keine eigene Zeile mehr — bei nur zwei
   Blöcken bliebe daneben sonst eine leere Spalte stehen. */
@media (max-width: 1400px) {
  .fuss-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 1200px) {
  .hauptnav { display: none; }
  .menuknopf { display: inline-flex; margin-left: auto; align-self: center; }
}

/* Zweispalter schon hier umbrechen: bei rund 900px blieben für den Text
   sonst weniger als 20 Zeichen je Zeile. */
@media (max-width: 999px) {
  .paar, .begruessung .paar,
  .wegweiser, .reihe-3, .reihe-2, .kostenliste { grid-template-columns: 1fr; }
  .kostenzeile.hervor { order: -1; }
  .paar.bild-zuerst > *:first-child { order: 2; }
}

@media (max-width: 900px) {
  /* .begruessung .paar hat eine eigene Aufteilung mit höherer Spezifität —
     ohne die ausdrückliche Nennung bliebe der Begrüßungsblock auch auf dem
     Telefon zweispaltig und die Textspalte nur rund 180px breit. */
  .paar, .paar-schmal,
  .begruessung .paar { grid-template-columns: 1fr; }
  .paar.bild-zuerst > *:first-child { order: 2; }
  .wegweiser, .reihe-3 { grid-template-columns: 1fr; }
  /* Zweispaltige Kartenreihen hier schon umbrechen: Karten mit einem Kasten
     darin kamen sonst auf rund 20 Zeichen je Zeile.

     `minmax(0, 1fr)` statt `1fr`: `1fr` bedeutet `minmax(auto, 1fr)`, und
     dieses `auto` l bis auf die min-content-Breite ihres
     Inhalts wachsen  Auf der Kontaktseite
     brachte das bei 320 px einen  Der Erreichbarkeits-
     hinweis ist ein Flex-Kasten, dessen Textknoten als anonymes Flex-Item
     nicht unter sein l (`Betreuungseinsatzes`,
     174 px). Zusammen mit Symbol, Abstand und Polsterung ergab das 260 px
     Mindestbreite bei 233 px Platz. Die Grundregel oben nutzt `minmax(0, 1fr)`
     bereits richtig; hier fehlte es. */
  .reihe-2 { grid-template-columns: minmax(0, 1fr); }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .kostenliste { grid-template-columns: 1fr; }
  .kostenzeile.hervor { order: -1; }
  body { padding-bottom: 4.6rem; }
  .anrufleiste { display: flex; }
  /* Im Fuß wird die Spalte hier zu schmal für die dreispaltige Tabelle:
     Tag links, Zeiten rechts untereinander. Alles bleibt in einer Flucht. */
  .fuss .buerozeiten thead { display: none; }
  .fuss .buerozeiten tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    justify-content: space-between;
    align-items: center;
    gap: .1rem .8rem;
    padding: .55rem 0;
    border-bottom: 1px solid rgba(255,255,255,.14);
  }
  .fuss .buerozeiten tbody tr:last-child { border-bottom: 0; }
  .fuss .buerozeiten tbody th,
  .fuss .buerozeiten tbody td { border: 0; padding: 0; font-size: .95rem; }
  .fuss .buerozeiten tbody th { grid-column: 1; }
  .fuss .buerozeiten tbody td { grid-column: 2; text-align: right; }
  .fuss .buerozeiten tbody td.ohne { display: none; }
}

/* Fußbereich einspaltig ab hier. Zweispaltig lief er vorher bis 641 px
   hinunter; die rechte Spalte war dort nur 220 bis 290 px breit und der
   Erreichbarkeitshinweis kam auf rund 17 Zeichen je Zeile — deutlich unter der
   Grenze von 20, die das Prüfverfahren setzt. */
@media (max-width: 767px) {
  .fuss-raster { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --rund-gross: 20px; }
  /* Mobile Kopfleiste: Logo größer, Menüknopf etwas flacher, Leiste kompakter,
     damit Logo und Knopf ungefähr gleich gewichtig wirken. Die Logobreite ist
     durch den Knopf daneben begrenzt, deshalb gleicht der flachere Knopf aus.
     (Rev. 15, 14.09.2026 — vorher Leiste 4.2rem, Logo 2.2rem, Knopf 3.2rem) */
  .kopfleiste .bahn { min-height: 3.7rem; gap: .8rem; }
  .marke img { height: 2.6rem; }
  .menuknopf { padding: .7rem .9rem; font-size: .95rem; gap: .5rem; min-height: 2.7rem; }
  /* Bürozeiten im Fuß: die Spannen eines Tages untereinander, alle Uhrzeiten
     an derselben Kante (Rev. 15) */
  .kontaktliste .zeiten-kurz > :not(.tag) { flex-direction: column; }
  /* Auf dem Telefon: Tag links, die Zeiten rechts untereinander.
     So bleibt alles in einer Flucht und nichts läuft über den Rand. */
  .buerozeiten thead { display: none; }
  .buerozeiten tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, auto);
    justify-content: space-between;
    align-items: center;
    gap: .1rem .8rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--linie);
  }
  .buerozeiten tbody tr:last-child { border-bottom: 0; }
  .buerozeiten tbody th,
  .buerozeiten tbody td { border: 0; padding: 0; font-size: .97rem; }
  .buerozeiten tbody th { grid-column: 1; }
  .buerozeiten tbody td { grid-column: 2; text-align: right; }
  .buerozeiten tbody td.ohne { display: none; }
  .fuss .buerozeiten tbody tr { border-color: rgba(255,255,255,.14); }
  .flaeche-blau .buerozeiten tbody tr { border-color: rgba(255,255,255,.18); }
  .liste-zwei { grid-template-columns: 1fr; }
  /* Auf dem Telefon fressen ineinander liegende Innenabstände zu viel Breite:
     Bahn + Karte + Kasten kamen zusammen auf 169px von 371px, für den Text
     blieben rund 20 Zeichen je Zeile. Hier deshalb enger setzen. */
  .karte { padding: 1.1rem 1rem; }
  .kasten { padding: 1rem 1.1rem; border-left-width: 5px; }
  .folge > li { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .folge .zahl { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; }
  .tel-block { width: 100%; }
  .fuss-schluss { flex-direction: column; }
}

/* Nutzer, die Bewegung reduzieren möchten */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Höherer Kontrast, wenn das System es verlangt */
@media (prefers-contrast: more) {
  :root { --text-ruhig: #23304C; --linie: #8FA6C6; }
  .karte, .weg, .frage, .kostenzeile { border-color: var(--blau); }
}

/* ==================================================== 16. Druck */
@media print {
  body { padding: 0; color: #000; background: #fff; font-size: 11pt; }
  .begruessung, .seitentitel, .flaeche-luft, .flaeche-hauch { background: #fff !important; }
  .merksatz, .flaeche-blau { background: #fff !important; color: #000 !important; }
  .merksatz blockquote, .flaeche-blau h2 { color: #0C3A76 !important; }
  .fuss { background: #fff; color: #000; border-top: 2pt solid #0C3A76; }
  .fuss a, .fuss h2, .fuss address { color: #000; }
  .antwort[hidden] { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* Auf schmalen Telefonen passen Bezeichnung und Wert nicht mehr nebeneinander:
   dann steht die Bezeichnung über dem Wert. */
@media (max-width: 560px) {
  .angabenliste { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .angabenliste dt { margin-top: .9rem; }
  .angabenliste dt:first-child { margin-top: 0; }
}

/* ============================================= 16. Einwilligung
   Erscheint nur, wenn in main.js ein zustimmungspflichtiger Dienst
   auf "aktiv: true" steht. Ablehnen ist genauso leicht wie Zustimmen —
   beide Antworten sind gleich groß, gleich farbig, gleich sichtbar.

   Rev. 11: kompakter und weniger Fenster-Charakter. Der Kasten sitzt jetzt
   als schmales Band am unteren Rand statt mittig auf der Seite, der
   Hintergrund ist heller, Schrift und Innenabstände sind kleiner.
   Tastaturführung, Fokusfalle und die gesamte Logik in main.js bleiben
   unverändert — geändert wurden ausschließlich Auszeichnung und Gestaltung. */
.einwilligung {
  position: fixed; inset: 0; z-index: 200;
  display: grid; align-items: end; justify-items: center;
  padding: clamp(.6rem, 2vw, 1.4rem);
  background: rgba(8, 41, 79, .45);
}
.einwilligung[hidden] { display: none; }
body.einwilligung-offen { overflow: hidden; }

.einwilligung-fenster {
  background: #fff;
  border-radius: var(--rund);
  box-shadow: 0 18px 44px -18px rgba(8, 41, 79, .5);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  width: min(46rem, 100%);
  max-height: min(86vh, 40rem);
  overflow-y: auto;
}
.einwilligung-fenster h2 {
  font-size: 1.16rem;
  margin: 0 0 .5rem;
}
.einwilligung-fenster > p {
  max-width: none; margin-bottom: 1rem;
  font-size: .92rem; line-height: 1.5;
  color: var(--text-ruhig);
}

.einwilligung-liste { margin-bottom: 1.1rem; }
.einwilligung-fest,
.einwilligung-wahl {
  display: grid; grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .1rem .8rem; align-items: start;
  padding: .75rem 0;
  border-top: 2px solid var(--linie);
  max-width: none;
  font-size: .92rem;
}
.einwilligung-wahl { cursor: pointer; }
.einwilligung-fest .haken { color: var(--orange-tief); font-weight: 800; font-size: 1.1rem; line-height: 1.3; }
.einwilligung-wahl input {
  width: 1.5rem; height: 1.5rem; margin: .1rem 0 0;
  accent-color: var(--blau); cursor: pointer;
}

/* Drei Schaltflächen nebeneinander, sobald rund 30rem Platz sind.
   Die beiden Antworten teilen sich den Raum gleichmäßig; „Einstellungen"
   ist keine Antwort und darf schmaler bleiben. */
.einwilligung-knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.einwilligung-knoepfe .knopf { flex: 1 1 10rem; justify-content: center; text-align: center; min-height: 3rem; padding: .7rem 1.1rem; font-size: .98rem; border-width: 2px; }
.einwilligung-knoepfe .knopf-still { flex: 0 1 9rem; }

.einwilligung-fuss {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center;
  margin: .9rem 0 0; max-width: none;
  font-size: .85rem;
}
.einwilligung-fuss a { color: var(--text-ruhig); text-underline-offset: 3px; }
.einwilligung-fuss a:hover { color: var(--orange-tief); }
.fuss-einstellungen {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.fuss-einstellungen { color: #fff; }
.fuss-einstellungen:hover { color: #F15C14; }
/* Trefferfläche auf mindestens 44px bringen, ohne das Layout zu verschieben */
.fuss-einstellungen { padding-block: .5rem; margin-block: -.5rem; }
.einwilligung-fuss a { padding-block: .5rem; margin-block: -.5rem; }

@media (max-width: 560px) {
  .einwilligung { padding: 0; }
  .einwilligung-fenster {
    width: 100%; max-height: 88vh;
    border-radius: var(--rund) var(--rund) 0 0;
  }
  .einwilligung-knoepfe .knopf,
  .einwilligung-knoepfe .knopf-still { flex: 1 1 100%; }
}

/* .knopf setzt display:inline-flex und würde sonst das hidden-Attribut
   aushebeln – Schaltflächen blieben sichtbar, obwohl sie versteckt sind. */
.einwilligung [hidden] { display: none; }

/* ================================================ 17. Leitsatz
   Steht im Begrüßungsblock unter der Unterzeile, nicht als eigenes Band:
   Zwei blaue Balken übereinander wirkten schwer und schoben die
   Telefonnummer unter den sichtbaren Bereich. */
/* --- Leitsatz-Box: mobil zuerst -----------------------------------
   Grundregel gilt für Telefone. Die feste Breite von 640px steht
   ausschließlich in der Desktop-Stufe und kann deshalb auf kleinen
   Geräten gar nicht erst überlaufen. */
.leitsatz-zeile {
  position: relative;
  background: var(--blau-hauch);
  box-shadow: 0 6px 20px rgba(13, 58, 102, .08);
  border-radius: 20px;
  width: 100%;
  max-width: 100%;
  /* links Platz für das Anführungszeichen, rechts 21px wie vorgegeben */
  padding: 19px 21px 19px 54px;
  font-family: var(--schrift-titel);
  font-size: 23px !important;
  font-style: italic;
  font-weight: 600;
  line-height: 1.4 !important;
  color: var(--blau);
  text-align: left;
  margin: 0 0 30px;
}
/* Anführungszeichen als Schmuckzeichen – für Vorleseprogramme unsichtbar */
/* Anführungszeichen als Anker links. Die Glyphe füllt nur rund 42 % ihres
   Schriftfelds — 5,4rem ergeben etwa 46px sichtbare Breite. */
.leitsatz-zeile::before {
  content: "“";
  position: absolute;
  left: 11px; top: 5px;
  font-family: var(--schrift-titel);
  font-style: normal; font-weight: 800;
  font-size: 72px; line-height: 1;
  color: var(--orange);
}

/* Ebenso im blauen Merksatz-Band */
.merksatz .in-orange { color: #F15C14; }

/* Schmale Telefone (361 bis 400px): Das Logo wächst mit der Breite, von 43px
   bei 361px bis 50px bei 400px (375px: rund 45px, 390px: rund 48px). So bleibt
   immer rund 20px Luft zum Menüknopf. (Rev. 15, 14.09.2026 — vorher fest
   1.85rem = 37px) */
@media (max-width: 400px) {
  .marke img { height: clamp(2.15rem, calc(17.95vw - 1.09rem), 2.5rem); }
  .kopfleiste .bahn { gap: .6rem; }
}

/* Sehr alte, schmale Telefone (iPhone SE der ersten Baureihe, 320px).
   Bei dieser Zielgruppe durchaus noch im Einsatz. */
@media (max-width: 360px) {
  /* Auf 320px-Geräten ist die Grundschrift von 20px zu groß: Blöcke mit
     Mindestbreite (Tabellen, Karten, Listen) passen dann nicht mehr.
     18px bleibt für ältere Augen immer noch deutlich über dem Üblichen. */
  html { font-size: 18px; }
  /* Die Kontaktspalte ist hier nur 273 px breit. Mit der Einrückung auf die
     Textachse blieben für SO ERREICHEN SIE UNS 210 px — zu wenig, die
     Überschrift brach zweizeilig um. Sie steht deshalb ab hier wieder an der
     Spaltenkante, die einspaltig ohnehin die Kante des Logos ist. Die vier
     Kontaktangaben und der Hinweis behalten ihre Flucht. */
  .fuss-kontakt h2 { margin-left: 0; }
  .marke img { height: 2.2rem; }  /* 39.6px; vorher 1.6rem = 28.8px (Rev. 15) */
  .kopfleiste .bahn { gap: .45rem; padding-inline: .8rem; }
  .menuknopf { padding: .6rem .7rem; font-size: .9rem; gap: .4rem; }
  /* Die kleinere Grundschrift darf die Mindestgröße von Klickflächen nicht
     unterschreiten. Bewusst in Pixeln, damit keine Schriftänderung sie
     wieder darunter drücken kann. */
  .knopf, .weg, .frage-knopf, .menuknopf, .tel-block { min-height: 44px; }
  .kontaktliste a.wert,
  .fuss-einstellungen,
  .einwilligung-fuss a { padding-block: 11px; margin-block: -11px; }
  /* Bei 271px Spaltenbreite bricht "08331 499026 anrufen" sonst um */
  .held-knopfreihe .knopf { padding-inline: .8rem; font-size: .92rem; gap: .5rem; }
  .held-knopfreihe .knopf svg { width: 1.15rem; height: 1.15rem; }
}

/* Sehr schmale Telefone: Innenabstände zurücknehmen, damit Blöcke mit
   nicht umbrechbarem Inhalt (Telefonnummern) noch hineinpassen. */
@media (max-width: 400px) {
  .bahn { padding-inline: .85rem; }
  .tel-block { padding: .85rem 1rem; gap: .7rem; }
  .tel-block .kreis { width: 2.5rem; height: 2.5rem; }
  .tel-block .kreis svg { width: 1.25rem; height: 1.25rem; }
  .antwort-offen { padding: 1rem; }
}

/* Der orange Strich sitzt jetzt im Leitsatz-Kasten, nicht darunter.
   Als Schmuckelement über CSS, damit kein <hr> in den Absatz muss. */
.leitsatz-zeile::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  margin-top: 13px;
  background: var(--orange);
  border-radius: 2px;
}

/* Tablet: Box über die volle Spaltenbreite, Schrift 26px */
@media (min-width: 768px) {
  .leitsatz-zeile {
    width: 100%;
    padding: 20px 24px 20px 65px;
    font-size: 26px !important;
  }
  .leitsatz-zeile::before { font-size: 88px; left: 14px; top: 6px; }
  .leitsatz-zeile::after { width: 62px; margin-top: 15px; }
}

/* Desktop: feste Breite, 28px */
@media (min-width: 1024px) {
  .leitsatz-zeile {
    width: 640px;
    max-width: 100%;
    padding: 21px 28px 21px 80px;
    font-size: 28px !important;
  }
  .leitsatz-zeile::before { font-size: 112px; left: 17px; top: 8px; }
  .leitsatz-zeile::after { width: 68px; margin-top: 16px; }
}
/* „zuhause" in der Unterzeile in derselben Schriftlage wie im Leitsatz */
.unterzeile .in-orange { font-style: italic; }

/* ===================================== 18. Rechte Spalte im Hero
   Bild, Beratungszeile und Schaltflächen bilden eine Einheit:
   Emotion -> Vertrauen -> Kontaktaufnahme. */
.beratungszeile {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem;
  margin: 1.15rem 0 .95rem;
  max-width: none;
  text-align: center;
  color: var(--blau);
  font-family: var(--schrift-text);
  font-size: clamp(1rem, 1.25vw, 1.1rem);
  font-weight: 600;
  line-height: 1.4;
}
.beratungszeile svg {
  width: 1.6rem; height: 1.6rem; flex: none;
  stroke: var(--blau); fill: none;
}

/* Schaltflächen unter dem Bild: zusammen rund 83 % der Bildbreite,
   Telefon etwa 57 %, "Schreiben Sie uns" etwa 43 % davon. */
.held-knopfreihe {
  display: grid;
  grid-template-columns: 57fr 43fr;
  gap: 20px;
  width: 83%;
  margin-inline: auto;
}
.held-knopfreihe .knopf { width: 100%; justify-content: center; text-align: center; }

/* Einspaltig: Bild und Kontaktbereich mittig und in lesbarer Breite,
   sonst nähme das Bild auf einem Notebook die volle Bahn ein. */
/* Einspaltige Fassung, jetzt bis 1339px (bis 26.08.2026: 1399px).
   Muss immer die Gegengrenze zum Zweispalter oben sein. */
@media (max-width: 1339px) {
  .held-rechts { max-width: 640px; margin: 1.6rem auto; }
}
/* Erst auf dem Telefon die Schaltflächen untereinander */
@media (max-width: 700px) {
  .held-knopfreihe { grid-template-columns: 1fr; width: 100%; gap: .9rem; }
}

/* Auf dem Telefon reichten 4px, damit "08331 499026 anrufen" zweizeilig
   umbrach. Innenabstand hier knapper setzen. */
@media (max-width: 480px) {
  .held-knopfreihe .knopf { padding-inline: 1.3rem; }
}


/* Auf schmalen Telefonen würde der feste Umbruch nach "Ort." beide Hälften
   nochmals brechen — vier Zeilen statt der gewünschten zwei bis drei.
   Dort fließt der Satz deshalb frei. */
@media (max-width: 560px) {
  .leitsatz-zeile br { display: none; }
}
/* Sehr schmale Telefone: Anführungszeichen und Ränder weiter zurücknehmen,
   damit der Satz in drei Zeilen bleibt. */
@media (max-width: 400px) {
  .leitsatz-zeile { padding: 18px 18px 18px 46px; }
  .leitsatz-zeile::before { font-size: 60px; left: 9px; top: 4px; }
  .leitsatz-zeile::after { width: 50px; margin-top: 11px; }
}

/* ============================ 19. Abschnitt "Der Alltag"
   Leistungsliste und Hinweis bilden einen zusammenhängenden Block: Liste oben,
   40 px darunter der Hinweis. Der Block wird bewusst NICHT über die Bildhöhe
   verteilt — das erzeugte eine Leerfläche von 320 px in seiner Mitte. */
.paar-alltag .alltag-links { padding-top: 0; }
/* Der Hinweis steht in der linken Spalte unter den Leistungen und nimmt deren
   Breite an, statt über die ganze Seite zu laufen. */
.alltag-hinweis { margin-top: 40px; }
/* Etwas präsenter, aber bewusst kein Fettdruck — die Punkte sollen scanbar
   sein, nicht wie Überschriften wirken. */
.paar-alltag .liste-haken li { font-weight: 500; padding-left: 3.05rem; }
/* Symbole 8 % größer, Form und Farbe unverändert */
.paar-alltag .liste-haken li::before { width: 2.05rem; height: 2.05rem; }
/* "Zuhause" im Einleitungssatz halbfett, wie im Begrüßungsblock */
.titel-block p .in-orange { font-weight: 600; }

/* Auf dem Desktop steht der kompakte Informationsblock optisch mittig neben
   dem Bild. Das Bild darf dabei bewusst höher sein; der Freiraum liegt über
   und unter dem Block, nicht mehr in ihm. Keine erzwungene Höhengleichheit.

   Der Zweispalter dieses Abschnitts beginnt bei 1430px, nicht bei 1400px wie
   der Hero: zwischen 1400 und 1429px ist die linke Spalte nur 632-643px breit,
   zwei Punkte brechen dort um und der Block wurde 16-20px höher als das Bild. */
@media (min-width: 1430px) {
  .paar-alltag { align-items: center; }
  /* Zeilenabstand 28 px statt der globalen 20 px — die Liste soll luftiger
     wirken und gegenüber dem Bild rechts etwas mehr Höhe einnehmen. Nur auf
     dem Desktop: einspaltig hat die Liste fünf statt zwei Zwischenräume und
     würde dadurch 40 px länger werden.
     Bewusst nur row-gap: der column-gap muss bei 1rem bleiben, sonst schrumpft
     die Textbreite je Spalte und die beiden langen Punkte brechen um. */
  .paar-alltag .liste-haken { row-gap: 28px; }
  /* Breite bewusst unter der Spaltenbreite (859 px), damit der Block kompakt
     wirkt. Liste und Hinweis fluchten dabei an der linken Kante.
     Gemessen: unter 702 px brechen "Aufstehen, Waschen, Anziehen" und
     "Arztbesuche und Spaziergänge" zweizeilig um und die Liste wird 70 px
     höher. 710 px lässt 8 px Reserve für abweichendes Font-Rendering. */
  .paar-alltag .alltag-links { max-width: 710px; }
  /* Das Bild war mit 777 px zu dominant gegenüber dem kompakten Block links.
     700 px ergeben über aspect-ratio 5/4 genau 560 px Höhe — der Ausschnitt
     bleibt dadurch identisch. Das Hero-Bild bleibt bewusst größer.
     justify-self: end setzt die rechte Bildkante auf dieselbe Flucht wie das
     Hero-Bild darüber. Der dadurch größere Abstand zum Infoblock (294 statt
     217 px) ist ausdrücklich gewollt.
     width: 100% muss dabei stehen bleiben: der Bildrahmen hat keine eigene
     Breite und fiele mit justify-self allein auf 0 px zusammen. */
  .paar-alltag .bild-alltag { width: 100%; max-width: 700px; justify-self: end; }
}

/* Unter 1430px wird die linke Spalte höher als das Bild — dort deshalb
   untereinander, in natürlicher Höhe, ohne Breitenbegrenzung. Der Zeilenabstand
   der Liste bleibt hier bei den globalen 20 px, damit sie kompakt bleibt. */
@media (max-width: 1429px) {
  .paar-alltag { grid-template-columns: 1fr; }
}

/* ============================ 20. Abschnitt "Vier Versprechen"
   Die vier Punkte sollen beim Überfliegen als vier Zusagen lesbar sein.
   Dafür steht die Überschrift auf einer eigenen Zeile, etwas größer als der
   Fließtext, mit der Erklärung dicht darunter. Bewusst keine Karten, keine
   Rahmen, keine Flächen — der Abschnitt soll ruhig bleiben. */
.liste-versprechen { row-gap: 28px; }
.liste-versprechen li strong {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
  /* 3px, nicht 7: die Erklärungszeile bringt bei Zeilenhöhe 1,75 rund 4px
     halben Durchschuss mit. Sichtbar sind dadurch die gewünschten 7px. */
  margin-bottom: 3px;
  /* Unter 560px brechen die Überschriften um. Ohne Ausgleich stand dort bei
     "Auch danach an Ihrer Seite." ein einzelnes Wort auf der zweiten Zeile.
     Dieselbe Eigenschaft nutzen die Überschriften der Seite bereits. */
  text-wrap: balance;
}
/* Das Symbol sitzt mittig zur Überschriftzeile, nicht mittig zum ganzen Punkt.
   Es ist mit 1.9rem höher als die Überschriftzeile (29,9px), deshalb der
   negative Wert — gemessen ergibt er 0px Versatz zwischen beiden Mitten. */
.liste-versprechen li::before { top: -.2em; }

/* Der Knopf gehört zu den Versprechen und rückt deshalb näher heran als die
   üblichen 36px. Er steht auf der Textflucht der Versprechen, nicht auf der
   der Symbole — 2.9rem entspricht deren padding-left und hält die Flucht auch
   dort, wo die Grundschrift auf 18px steht. */
.versprechen .knopfreihe { margin-top: 32px; margin-left: 2.9rem; }

/* Einspaltig steht das Bild zwischen Akzentlinie und Versprechen. Der
   Textblock löst sich dafür auf (display: contents), damit seine Kinder und
   das Bild im selben Raster liegen und über order sortiert werden können.
   Der Zeilenabstand des Rasters wird dabei auf 0 gesetzt: die Elemente
   bringen ihre eigenen Abstände mit, der Rasterabstand von 36-68px würde
   Eyebrow, Überschrift und Linie auseinanderreißen.

   1620px statt der üblichen 999px, empirisch bestimmt: Die rechte Spalte ist
   inhaltlich rund 700px hoch, das Bild wächst dagegen mit der Fensterbreite.
   Gemessene Höhendifferenz zweispaltig: 243px bei 1450, 154px bei 1600,
   112px bei 1620, 29px bei 1750, ausgeglichen ab 1850. Bei 1610px wird der
   dritte Erklärungstext einzeilig, dadurch springt die rechte Spalte von 732
   auf 697px. 1620 liegt 10px darüber — Reserve für abweichendes
   Font-Rendering. Darunter einspaltig, dort nimmt das Bild die volle Breite. */
@media (max-width: 1619px) {
  .versprechen { grid-template-columns: 1fr; row-gap: 0; }
  .versprechen-text { display: contents; }
  .versprechen .hinweiszeile { order: 1; }
  .versprechen h2 { order: 2; }
  .versprechen .strich { order: 3; }
  .versprechen-bild { order: 4; margin-bottom: 1.8rem; }
  .versprechen .liste-versprechen { order: 5; }
  .versprechen .knopfreihe { order: 6; }
}

/* ============================ 21. Startseite: Ablauf als 3-Schritte-Prozess
   Der Abschnitt nutzte untereinander nur die linke Hälfte der Fläche. Auf
   breiten Schirmen stehen die drei Schritte deshalb nebeneinander, mit der
   Nummer über dem Text. Gilt ausschließlich für die Startseite — dieselbe
   Liste `.folge` erscheint unverändert auf vier weiteren Seiten. */
.folge-quer {
  --kreis: 4.6rem;
  --prozessabstand: clamp(2rem, 3vw, 3.4rem);
  --zeilenabstand: clamp(1.4rem, 3vw, 2.4rem);
}
/* Ab 640px abwärts ist der Nummernkreis 3.4rem groß — Wert aus Abschnitt 15. */

@media (max-width: 640px) { .folge-quer { --kreis: 3.4rem; } }

/* Die Akzentlinie im Kopf ist bewusst die unveränderte Klasse .strich
   (84 × 5 px, Radius 3) — dieselbe wie in "Der Alltag" und "Vier Versprechen".
   Sie braucht deshalb keine eigene Regel. */

.folge-quer > li { position: relative; }

/* Verbindungslinie zwischen den Nummern. Bewusst in der Linienfarbe der Seite
   und nur 2px stark: sie soll 1-2-3 als einen Ablauf lesbar machen, mehr
   nicht. Sie stößt an beiden Enden an die Kreise, damit keine Kette aus
   losen Strichen entsteht. */
.folge-quer > li::after {
  content: "";
  position: absolute;
  background: var(--linie-kraeftig);
  left: calc(var(--kreis) / 2 - 1px);
  top: var(--kreis);
  bottom: calc(-1 * var(--zeilenabstand));
  width: 2px;
}
.folge-quer > li:last-child::after { content: none; }

/* Drei Spalten. Umbruchpunkt gemessen: Unterhalb von 1140px brechen die
   Schrittüberschriften zweizeilig um ("Sie erhalten passende Profile",
   "Die Betreuungskraft reist an"). 1200px lässt 60px Reserve; die Spalte ist
   dort 339px breit, der Erklärungstext läuft mit rund 34 Zeichen je Zeile. */
@media (min-width: 1200px) {
  .folge-quer {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--prozessabstand);
    row-gap: 0;
    align-items: start;
  }
  /* Nummer über den Text, eine Spalte je Schritt. */
  .folge-quer > li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .folge-quer .zahl { margin-bottom: 1.4rem; }
  /* Dieselbe Linie, jetzt waagerecht von Kreis zu Kreis. */
  .folge-quer > li::after {
    left: var(--kreis);
    right: calc(-1 * var(--prozessabstand));
    top: calc(var(--kreis) / 2 - 1px);
    bottom: auto;
    width: auto;
    height: 2px;
  }
}

/* ============================ 22. Startseite: Kostenübersicht
   Angleichung an die überarbeiteten Abschnitte. Gilt nur für die Startseite —
   dieselben Karten stehen unverändert auf kosten.html. */

/* Alle drei Karten geometrisch identisch. Die hervorgehobene hatte 3px statt
   2px Kontur; das schob ihren Inhalt um 1px nach innen, wodurch Überschrift,
   Trennlinie und Preis dort einen Pixel tiefer standen. Sie tritt jetzt allein
   über Farbe und Schatten hervor — ruhiger und ohne Geometrieunterschied. */
.kostenliste-start .kostenzeile.hervor { border-width: 2px; }

/* Der Preisbereich wird an den unteren Kartenrand geschoben. Dadurch stehen
   Trennlinie und Preis in allen drei Karten auf derselben Höhe, unabhängig
   davon, wie lang die Beschreibung ist. Die feste Mindesthöhe der Beschreibung
   war ein Behelf für gleich lange Texte und entfällt deshalb. */
.kostenliste-start .wofuer { min-height: 0; }
.kostenliste-start .betrag {
  margin-top: auto;
  /* Eine feine Trennlinie oben statt zweier Linien: der Preis war zuvor
     zwischen zwei Linien eingefasst und wirkte wie ein eigener Kasten. */
  border-top: 1px solid var(--linie);
  border-bottom: 0;
  padding-bottom: 0;
}

/* Untereinander bleibt die Reihenfolge der Preise erhalten: Grundbetreuung,
   Betreuung mit Pflegebedarf, Intensive Betreuung. Die Vorlage zieht die
   hervorgehobene Karte dort nach vorn — das durchbricht die aufsteigende
   Staffelung und wirkt werblich. */
.kostenliste-start .kostenzeile.hervor { order: 0; }

/* Drei Karten erst ab 1200px. Gemessen: bei 1000px sind sie 284px breit, der
   Beschreibungstext läuft mit 23 Zeichen je Zeile über fünf Zeilen — das wirkt
   gequetscht. Ab 1200px sind es 341px, 28 Zeichen und vier Zeilen. Darunter
   greift die vorhandene einspaltige Darstellung. */
@media (max-width: 1199px) {
  .kostenliste-start { grid-template-columns: 1fr; }
}

/* Zwischen 1200 und 1599px bricht "Betreuung mit Pflegebedarf" zweizeilig um,
   die anderen beiden Überschriften bleiben einzeilig. Ohne Ausgleich stünden
   die Beschreibungen der drei Karten dann auf verschiedenen Höhen. Ab 1600px
   sind alle einzeilig, dort würde der Platz nur Leerraum erzeugen. */
@media (min-width: 1200px) and (max-width: 1599px) {
  .kostenliste-start h3 { min-height: 2.36em; }
}

/* Der Hinweis unter den Karten: der Abstand stand bisher als Inline-Angabe
   im HTML. Gestaltung unverändert — hellblaue Fläche, dunkelblaue Kante
   links, keine Kartenkontur. */
.kosten-hinweis { margin-top: 1.8rem; }

/* ===================================== 30. Hero auf flachen Bildschirmen
   ------------------------------------------------------------------
   Der Begrüßungsblock ist rein breitenabhängig bemessen: H1 58px,
   Polsterung bis 60px, Bild über aspect-ratio. Auf einem Notebook mit
   864 oder 900px Fensterhöhe rutschten dadurch die Beratungszeile und
   die beiden Schaltflächen unter die Falz — bei 1536x864 um 55px, bei
   1600x900 um 35px, und bei 1440x900 blieben nur 2px Reserve.

   Diese Regel macht ausschliesslich den Hero kompakter, und nur dort,
   wo er zweispaltig steht (ab 1340px) UND das Fenster flach ist.
   Gemessen spart sie rund 100px.

   BEWUSST ENG GEFASST:
   - nur `.begruessung`, also Startseite und Memmingen-Landingpage.
     `.seitentitel` der uebrigen neun Seiten bleibt unberuehrt.
   - kein Eingriff am globalen `h1`, an `.kopfleiste` oder an Abschnitten.
   - das Hero-Bild bleibt unangetastet: kein `max-height`, kein
     veraendertes Seitenverhaeltnis, kein anderer Bildausschnitt.
   - `min-width: 1340px` haelt Telefon und Tablet vollstaendig heraus.
     (Bis 26.08.2026 stand hier 1400px — die Grenze wurde gemeinsam mit dem
     Umbruchpunkt des Zweispalters abgesenkt, siehe Abschnitt 5n. Die drei
     Grenzen 1340 / 1339 / 1340 gehoeren zusammen und muessen gemeinsam
     wandern.)

   Die Zahlen sind gemessen, nicht geschaetzt — Vorher/Nachher steht in
   UEBERGABE.md, Abschnitt 5m.
   ------------------------------------------------------------------ */
@media (min-width: 1340px) and (max-height: 950px) {

  /* 30px statt 52–60px oben und unten: spart rund 45px */
  .begruessung { padding: 1.5rem 0; }

  /* 51 statt 58px. Bei drei Zeilen sind das rund 24px; die Ueberschrift
     bleibt damit klar die groesste Schrift der Seite. */
  .begruessung h1 { font-size: 2.55rem; margin-bottom: .25rem; }

  /* 32 statt 35px, engerer Abstand zur Zitatbox */
  .begruessung .unterzeile { font-size: 1.6rem; margin-bottom: 8px; }

  /* Nur die Innenpolsterung oben/unten und der Abstand darunter.
     Schriftgroesse, Breite, Radius, Flaeche und das Anfuehrungszeichen
     bleiben unveraendert — die Box soll gleich aussehen, nur enger sitzen. */
  .begruessung .leitsatz-zeile {
    padding-top: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
  }
}

/* ================================ 31. Gruenderportraet auf "Ueber uns"
   Im Zweispalter gab das Portraet dem Abschnitt allein seine Hoehe: bei
   1920px war es 777 x 1036px, der Textblock daneben nur 600px hoch.
   Auf 480px Breite begrenzt (61,8% der bisherigen Breite, Hoehe 640px)
   steht es rechtsbuendig in seiner Spalte -- dasselbe Mittel wie bei
   .bild-alltag im Abschnitt "Der Alltag" (justify-self: end).
   Seitenverhaeltnis, Radius, Bildausschnitt und die Bilddatei selbst
   bleiben unveraendert; nur die Darstellungsbreite sinkt.
   Wirkt nur im Zweispalter: unterhalb von 1000px wird .paar einspaltig
   (bestehende Regel bei max-width:999px), dort bleibt alles wie bisher. */
@media (min-width: 1000px) {
  .portraet-gruender { width: 100%; max-width: 480px; justify-self: end; }
}

/* =========================== 32. Markenstatement auf "Ueber uns"
   Das Statement stand bis zum 27.08.2026 als hellblauer Kasten
   (.leitsatz-zeile) im Hero der Startseite. Hier steht es bewusst reduziert:
   kein Kasten, kein farbiger Grund, kein Schmuck-Anfuehrungszeichen, kein
   Bild — nur Typografie auf dem weissen Seitengrund, darunter die
   Akzentlinie des Projekts in den Massen von .strich (84 x 5 px).
   Es sitzt hinter dem blauen .merksatz-Band und leitet zu "Wofuer wir
   stehen" ueber. Die Schriftgroesse bleibt deutlich unter der H1 und unter
   dem Band, damit es keine zweite Hauptstimme wird.
   Eigene Polsterung statt .abschnitt-eng: der Zwischenbereich soll flach
   bleiben, rund 150px Gesamthoehe auf dem Desktop.
   Alle Regeln greifen ausschliesslich innerhalb von .markenstatement. */
.markenstatement { padding: clamp(1.3rem, 2.2vw, 1.55rem) 0; }
.markenstatement blockquote {
  margin: 0 auto;
  max-width: 26em;
  text-align: center;
  font-family: var(--schrift-titel);
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  font-weight: 600;
  font-style: normal;
  line-height: 1.3;
  color: var(--blau);
}
.markenstatement blockquote::after {
  content: "";
  display: block;
  width: 84px; height: 5px;
  margin: .8rem auto 0;
  background: var(--orange);
  border-radius: 3px;
}
/* Wie beim frueheren Leitsatz: unter 560px den festen Umbruch aufheben,
   sonst bleibt "sein." als Waise auf einer eigenen Zeile stehen. */
@media (max-width: 560px) {
  .markenstatement blockquote br { display: none; }
}

/* ===================== 33. Startseiten-Hero: Bild und Unterzeile
   Gilt nur fuer den Hero der Startseite (.start-hero). Die
   Memmingen-Landingpage nutzt dieselben Klassen .begruessung, .held-bild
   und .unterzeile und bleibt ausdruecklich unberuehrt.

   1. Bildbreite: Seit die Zitatbox entfallen ist (5t) war die linke Spalte
      kuerzer als die rechte — bei 1920px um 135px. Das Bild wird deshalb
      auf 88% der Spaltenbreite begrenzt, hoechstens 640px. Gemessen ergibt
      das bei 1340 und 1440px eine buendige Unterkante und bei 1920px noch
      rund 26px Rest statt 135px. Das Seitenverhaeltnis 5:4 und der Radius
      bleiben unberuehrt.
      Wichtig: Nur das Bild deckeln, nicht .held-rechts. Die Knopfreihe ist
      83% der Spaltenbreite; deckelt man die ganze Spalte, bricht sie bei
      1920px von 76 auf 111px um. So bleibt ihre Hoehe unveraendert.
   2. Unterzeile: Der Abstand zum Fliesstext betrug nach dem Wegfall der
      Zitatbox nur noch 14px. 26px stellen die Luft wieder her, die zuvor
      der Kasten mitbrachte. Unterhalb von 1340px aendert sich nichts, dort
      folgt .held-rechts mit eigenem Aussenabstand von 32px. */
@media (min-width: 1340px) {
  .start-hero .held-bild { width: 88%; max-width: 640px; margin-inline: auto; }
  .start-hero .unterzeile { margin-bottom: 26px; }
}

/* ============ 34. Weissraum ueber dem Markenstatement ("Ueber uns")
   Zwischen dem Entstehungs-/Oliver-Bereich und dem Markenstatement standen
   bei 1920px 123px Weissraum (92px Polsterung des .abschnitt unten plus
   31px des .markenstatement oben). Das band den Claim optisch zu lose an
   den Bereich darueber. Die Polsterung des vorangehenden Abschnitts wird
   deshalb an genau dieser Stelle auf 2.3rem gesetzt; zusammen mit den
   unveraenderten 31px des Statements ergibt das rund 77px.

   Der Selektor trifft ausschliesslich einen .abschnitt, auf den unmittelbar
   ein .markenstatement folgt — projektweit genau einmal, auf /ueber-uns/.
   Kein HTML geaendert, keine negative Aussenkante, keine globale Klasse
   angefasst. Das Muster :has(+ ...) wird im Projekt schon genutzt (Zeile
   184, .titel-block h2:has(+ .strich-schlank)).

   Nur ab 1200px, der Grenze, an der die Navigation zum Menueknopf wird und
   das Layout als Desktop gilt. Auf Telefon und Tablet bleibt die bisherige
   Rhythmik unangetastet.

   ACHTUNG: Die Polsterung UNTEN am .markenstatement und die des folgenden
   .abschnitt.flaeche-luft bleiben unberuehrt — der Abstand unterhalb des
   Statements ist ausdruecklich unveraendert. */
@media (min-width: 1200px) {
  .abschnitt:has(+ .markenstatement) { padding-bottom: 2.3rem; }
}