/* ============================================================
   patiententransport-peters.de — EIN Stylesheet, kein @import.
   Zweites Stylesheet oder @import = zweite render-blockende Kette (PageSpeed-Gate).
   Farben und Kontrastwerte: public/assets/LOGO.md
   ============================================================ */

/* ── IBM Plex Sans, selbst gehostet ─────────────────────────────────────────
   Kundenentscheidung 14.09.2026 (Variante B). Vorher lag auf Überschrift UND Fließtext
   dieselbe System-Schrift — die Seite hatte damit gar keine typografische Stimme und sah
   auf Windows anders aus als auf macOS.

   EINE Datei für alle Schnitte: Google liefert IBM Plex Sans als Variable Font. Gemessen
   (400/600/700 an derselben Zeile): 422,2 / 437,6 / 444,1 px — drei echte Schnitte, keine
   vom Browser gerechnete Fettung. Statische Schnitte wären drei Downloads gewesen.

   latin-ext lädt der Browser nur, wenn ein Zeichen daraus vorkommt (unicode-range). Für
   deutsche Ortsnamen reicht latin; die zweite Datei kostet im Regelfall nichts.

   font-display:swap — der Text ist ab der ersten Millisekunde lesbar. Bei einer Seite, auf
   der jemand unter Zeitdruck eine Fahrt sucht, wäre unsichtbarer Text das schlechtere
   Geschäft als ein kurzer Schriftwechsel.

   Lizenz: SIL Open Font License 1.1 — Selbsthosten ausdrücklich erlaubt. */
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/plex-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/assets/fonts/plex-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Aus dem Logo abgeleitet, WCAG-AA geprüft */
  --c-primary:      #005EB8;   /* CTA, Links, Akzentflächen — Weiß darauf 6,38:1 */
  --c-primary-700:  #00437F;   /* Hover, Footer, Headlines — 9,96:1 */
  --c-accent:       #4C9BD6;   /* NUR Flächen/Icons/Rahmen — auf Weiß nur 2,7:1 */
  --c-flaeche:      #D6E6F5;   /* Sektionshintergrund, Trust-Leiste */
  --c-text:         #1A1D21;
  --c-text-mute:    #4A5058;
  --c-line:         #D9DEE4;
  --c-white:        #fff;
  /* Gewählte Neutrale, nicht geerbte: Tiefschwarz mit Blaustich, Papier mit Blaustich.
     Bewusst KEIN warmes Creme — das ist der Standardgriff und passt nicht zu Verkehrsblau. */
  --c-ink:          #0F1922;
  --c-papier:       #F2F5F8;
  /* Der EINE kräftige Akzent, genau einmal auf der Seite: das Rosa des Muster-4-Rezepts.
     Es ist das reale Objekt dieser Branche — der Zettel, den jeder Patient in der Hand hält. */
  --c-rezept:       #FBEEF0;
  --c-rezept-linie: #E4C2C8;
  /* KEIN Notfall-Rot: Rot ist Rettungsdienst-Signalfarbe und würde visuell die Leistung
     behaupten, die §49 PBefG ausschließt. Abweichung vom Skill-Default — beabsichtigt. */

  /* Die System-Schrift bleibt als Rückfall in der Kette: solange die Datei lädt, steht
     dort etwas Vernünftiges, und wenn sie ausfällt, bleibt die Seite lesbar. */
  --font-display: "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:    "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem;
  --wrap: 1180px;
  --shadow: 0 2px 8px rgba(16,32,48,.07), 0 12px 32px rgba(16,32,48,.06);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); color:var(--c-text); background:var(--c-white);
  font-size:1.0625rem; line-height:1.65; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--c-primary); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover{ color:var(--c-primary-700); }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.2; margin:0 0 var(--sp-2); color:var(--c-primary-700); }
h1{ font-size:clamp(1.85rem,4.4vw,2.9rem); letter-spacing:-.02em; }
h2{ font-size:clamp(1.45rem,3vw,2.05rem); letter-spacing:-.01em; }
h3{ font-size:clamp(1.12rem,2vw,1.35rem); }
p{ margin:0 0 var(--sp-2); }
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-2); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:3px solid var(--c-primary); outline-offset:2px; }

/* === Buttons ================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  font:600 1rem/1 var(--font-display); padding:.95rem 1.4rem; border-radius:var(--r-md);
  border:2px solid transparent; text-decoration:none; cursor:pointer; transition:background .15s,border-color .15s;
}
.btn--primary{ background:var(--c-primary); color:var(--c-white); }
.btn--primary:hover{ background:var(--c-primary-700); color:var(--c-white); }
.btn--ghost{ background:var(--c-white); color:var(--c-primary-700); border-color:var(--c-primary); }
.btn--ghost:hover{ background:var(--c-flaeche); color:var(--c-primary-700); }
.btn--lg{ padding:1.1rem 1.7rem; font-size:1.08rem; }

/* === Header ================================================= */
.topbar{ background:var(--c-primary-700); color:var(--c-white); font-size:.875rem; }
.topbar__in{ display:flex; gap:var(--sp-2); align-items:center; justify-content:center;
  padding:.5rem var(--sp-2); flex-wrap:wrap; }
.topbar a{ color:var(--c-white); }

.site-header{ background:var(--c-white); border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:50; }
.site-header__in{ display:flex; align-items:center; gap:var(--sp-2); padding:.7rem var(--sp-2);
  max-width:var(--wrap); margin:0 auto; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; flex:0 0 auto; }
.brand img{ width:60px; height:60px; }
.brand-name{ font-family:var(--font-display); line-height:1.05; display:flex; flex-direction:column; }
.brand-name b{ font-size:1.02rem; font-weight:700; color:var(--c-primary-700); letter-spacing:-.01em; }
.brand-name i{ font-size:.95rem; font-style:normal; color:var(--c-text-mute); letter-spacing:.14em; text-transform:uppercase; }

.nav{ display:flex; align-items:center; gap:.2rem; margin-left:auto; }
.nav > a, .nav-dd > button{
  font:600 .97rem/1 var(--font-display); color:var(--c-primary-700); background:none; border:0;
  padding:.7rem .8rem; border-radius:var(--r-sm); text-decoration:none; cursor:pointer;
}
.nav > a:hover, .nav-dd > button:hover{ background:var(--c-flaeche); }
.nav-dd{ position:relative; }
.nav-dd__menu{
  position:absolute; top:100%; left:0; min-width:16rem; background:var(--c-white);
  border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--shadow);
  padding:.4rem; display:none; z-index:60;
}
/* Geöffnet wird ausschließlich über die Klasse, die nav.js setzt.
   Vorher standen hier zwei Selektoren, die beide nicht trugen:
     · `.nav-dd[open]` — tote Regel. .nav-dd ist ein <div>, kein <details>; das
       open-Attribut wird nirgends gesetzt.
     · `:focus-within` — Safari gibt einem <button> beim Klick KEINEN Fokus. Im Chrome
       ging das Menü damit auf, in Safari nie. Genau dort hat es der Kunde probiert.
   Tastatur ist weiter bedienbar: der Knopf ist fokussierbar, Enter und Leertaste lösen
   click aus, und damit dieselbe Umschaltung. */
.nav-dd.offen > .nav-dd__menu{ display:block; }
.nav-dd__menu a{ display:block; padding:.6rem .7rem; border-radius:var(--r-sm);
  text-decoration:none; color:var(--c-text); font-size:.97rem; }
.nav-dd__menu a:hover{ background:var(--c-flaeche); color:var(--c-primary-700); }
.header-cta{ flex:0 0 auto; }

.burger{ display:none; flex:0 0 auto; margin-left:auto; background:none; border:2px solid var(--c-line);
  border-radius:var(--r-sm); padding:.55rem .6rem; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:var(--c-primary-700); margin:4px 0; }

/* Mobile-Header: der Burger MUSS im Viewport bleiben (Skill-Pflichtcheck 360/390 px) */
@media (max-width:900px){
  .nav{ display:none; }
  .burger{ display:block; }
  .nav.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; inset:auto 0 0 0; top:var(--header-h,84px);
    background:var(--c-white); border-top:1px solid var(--c-line);
    padding:var(--sp-2); overflow-y:auto; box-shadow:var(--shadow);
  }
  .nav.open .nav-dd__menu{ position:static; display:block; border:0; box-shadow:none; padding:0 0 0 .8rem; }
}
@media (max-width:560px){
  .brand img{ width:48px; height:48px; }
  .brand-name b{ font-size:.94rem; } .brand-name i{ font-size:.8rem; }
  .header-cta{ display:none; }
}
@media (max-width:390px){ .brand-name{ display:none; } }

/* === Hero — gemeinsame Bausteine der Varianten =============== */
/* Bild-Fokuspunkt. Die Personen im Hero-Foto sitzen bei 16–35 % der Bildhöhe. Ein Band
   von 1148×300 px zeigt bei object-fit:cover nur 47 % der Höhe — zentriert geschnitten
   liegt das Fenster bei 26–74 % und köpft genau die Gesichter. Der Fokus nach oben rückt
   es auf etwa 13–60 %.
   ⚠ Bei einem NEUEN Motiv diesen Wert nachrechnen, nicht übernehmen: Fenster-Oberkante
   = fokus × (1 − sichtbarer Anteil). Gegenprobe: Ausschnitt in Pillow rendern und ansehen. */
:root{ --fokus: 50% 25%; }
.hero img{ object-position:var(--fokus); }
.hero{ padding:var(--sp-4) 0; }
.hero__in{ max-width:var(--wrap); margin:0 auto; padding:0 var(--sp-2); }
.hero__eyebrow{ font:700 .82rem/1 var(--font-display); letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-primary); margin:0 0 var(--sp-1); }
.hero h1{ margin-bottom:var(--sp-2); }
.hero__lede{ font-size:1.13rem; color:var(--c-text-mute); max-width:56ch; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:var(--sp-3); }
.hero__img{ border-radius:var(--r-lg); overflow:hidden; }
.hero__img img{ width:100%; object-fit:cover; }

/* Check-Liste: die positiven Stichpunkte im Hero und im Content */
.check-list{ list-style:none; padding:0; margin:var(--sp-2) 0; display:grid; gap:.6rem; }
.check-list li{ position:relative; padding-left:2rem; }
.check-list li::before{
  content:""; position:absolute; left:0; top:.35em; width:1.25rem; height:1.25rem;
  border-radius:50%; background:var(--c-primary) no-repeat center/.7rem .7rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5L13.5 4.5'/%3E%3C/svg%3E");
}

/* Trust-Kacheln. KEINE Anfahrts-Minuten — Compliance (siehe CLAUDE.md) */
.stats{ display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-3);
  padding-top:var(--sp-2); border-top:1px solid var(--c-line); }
.stats div{ display:flex; flex-direction:column; }
.stats b{ font:700 1.4rem/1.1 var(--font-display); color:var(--c-primary-700); }
.stats span{ font-size:.87rem; color:var(--c-text-mute); }

/* === Sofort-Anfrage-Banner (NICHT Notruf-Banner) ============= */
.anfrage{ background:var(--c-flaeche); border-radius:var(--r-lg); padding:var(--sp-3);
  display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap; }
.anfrage h2{ margin:0 0 .3rem; }
.anfrage p{ margin:0; color:var(--c-text-mute); }
.anfrage__cta{ margin-left:auto; }
/* Pflicht-Abgrenzung, klein aber immer sichtbar */
.hinweis-112{ font-size:.85rem; color:var(--c-text-mute); margin-top:var(--sp-1); }

/* === Sticky-CTA Mobile ====================================== */
.sticky-cta{ display:none; }
@media (max-width:900px){
  .sticky-cta{
    display:flex; position:fixed; inset:auto 0 0 0; z-index:70; gap:.5rem;
    padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); border-top:1px solid var(--c-line);
    backdrop-filter:saturate(1.4) blur(6px);
  }
  /* flex:1 allein reicht NICHT: Flex-Items haben min-width:auto, und mit nowrap ist die
     Min-Content-Breite die Textbreite. Ergebnis waren 428px Leiste im 390px-Fenster —
     der zweite CTA lag 25px außerhalb des Bildschirms. min-width:0 + engeres Padding. */
  .sticky-cta .btn{ flex:1 1 0; min-width:0; padding-inline:.55rem; font-size:.95rem;
    text-align:center; }
  body{ padding-bottom:5rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ============================================================
   Anfrage-Widget im Hero — das zentrale Conversion-Element.
   Vorbild: katew.de hat den Transportart-Selektor direkt im Kopfbereich.

   DREI SCHRITTE, und Schritt 1 ist nur ein Klick. Alles auf einmal zu fragen
   (Transportart, von, nach, Datum, Uhrzeit, Rückfahrt, Verordnung) war zu viel
   für den ersten Moment — jedes Feld im Erstkontakt kostet Anfragen.

   ⚠ KEIN Preisrechner. Eigene Preise sind verboten. Was das Widget beantwortet,
   ist „wer zahlt" — mit Verordnung die Kasse, plus gesetzliche Zuzahlung.
   ============================================================ */
.aw{
  background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); padding:var(--sp-3); display:grid; gap:var(--sp-2);
  max-width:32rem;
}
.aw__kopf{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); }
.aw__titel{ font:700 1.08rem/1.3 var(--font-display); color:var(--c-primary-700); margin:0; }
.aw__fortschritt{ margin:0; font:600 .78rem/1 var(--font-display); color:var(--c-text-mute);
  letter-spacing:.04em; white-space:nowrap; }

.aw fieldset{ border:0; padding:0; margin:0; }
.aw__s{ display:grid; gap:var(--sp-2); }
/* Das hidden-Attribut muss IMMER gewinnen.
   Das Browser-Standardstylesheet setzt [hidden]{display:none} mit der niedrigsten
   Spezifität überhaupt — jede eigene Klassenregel mit display schlägt sie. Real passiert
   am 15.09.2026: `.aw__zeit{display:flex}` ließ die Uhrzeitfelder weiter sichtbar,
   obwohl das JavaScript sie längst auf hidden gesetzt hatte. Im DOM stand „hidden: true",
   auf dem Bildschirm stand das Feld — eine Stunde Fehlersuche.
   Dass es schon `.aw__s[hidden]` gab, zeigt: dieselbe Falle hatte vorher schon einmal
   zugeschlagen und wurde nur an DER einen Stelle repariert. Deshalb jetzt global. */
[hidden]{ display:none !important; }

.aw__s[hidden]{ display:none; }
.aw legend{
  font:600 1rem/1.3 var(--font-display); color:var(--c-text); padding:0; margin-bottom:.2rem;
}
.aw__frage{ margin:0; font-size:.95rem; color:var(--c-text-mute); }

/* Transportarten — Schritt 1, vier Kacheln, eine ist immer gewählt */
.aw__arten{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.aw__arten label{ position:relative; }
.aw__arten input{ position:absolute; opacity:0; width:0; height:0; }
.aw__arten span{
  display:block; text-align:center; padding:.85rem .3rem; border-radius:10px;
  border:1px solid #C9D2DB; background:var(--c-white); font:600 .9rem/1.2 var(--font-display);
  color:var(--c-text-mute); cursor:pointer; box-shadow:0 1px 2px rgba(16,32,48,.05);
  transition:border-color .12s,background .12s,color .12s,box-shadow .12s;
}
.aw__arten input:checked + span{
  border-color:var(--c-primary); background:var(--c-flaeche); color:var(--c-primary-700);
}
.aw__arten input:focus-visible + span{ outline:3px solid var(--c-primary); outline-offset:2px; }
@media(max-width:520px){ .aw__arten{ grid-template-columns:repeat(2,1fr); } }

.aw__row{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-items:end; }
@media(max-width:520px){ .aw__row{ grid-template-columns:1fr; } }
.aw__f{ display:grid; gap:.4rem; }
.aw__f > span{ font:600 .82rem/1 var(--font-display); color:var(--c-text-mute); }
/* Alle Texteingaben im Formular — bewusst über :not() statt über eine Aufzählung der
   Typen. REAL-BUG 10.09.2026: Das Telefonfeld wurde für die Mobiltastatur von type=text
   auf type=tel geändert und fiel damit aus der Aufzählung heraus — 21px hoch,
   Browser-Standardschrift, mitten neben einem 46px-Feld. Mit :not() kann ein künftiger
   Typwechsel (email, number, search …) die Gestaltung nicht mehr verlieren. */
.aw input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]){
  font:400 1rem/1.2 var(--font-body); color:var(--c-text);
  /* background-COLOR, nicht die Kurzform: `background:` hätte background-image auf none
     zurückgesetzt. Und weil die :not()-Kette dieser Regel höhere Spezifität hat als jeder
     Attributselektor, hätte KEINE spätere Regel das Symbol setzen können — unabhängig von
     der Reihenfolge. Symbol und Einzug kommen darum über Variablen herein. */
  background-color:var(--c-white);
  background-image:var(--aw-ikone, none);
  background-repeat:no-repeat; background-position:.82rem center; background-size:1.05rem;
  /* Kundenentscheidung 12.09.2026: der frühere 2px-Rahmen rundum wirkte „billig" — er war
     optisch so schwer wie der Rahmen eines Knopfes, obwohl ein Eingabefeld ruhig sein soll.
     Jetzt trägt eine Haarlinie den Umriss und ein Innenschatten die Tiefe: das Feld wirkt
     vertieft statt aufgeklebt. Das Gewicht liegt im Fokuszustand, nicht im Ruhezustand. */
  /* Randfarbe und Ring laufen ebenfalls über Variablen. Sonst gewinnt die :not()-Kette
     dieser Regel gegen jedes spätere :focus — der Fokusring war dadurch kurzzeitig ganz
     verschwunden, und ein unsichtbarer Fokus ist ein Bedienbarkeitsfehler, kein Schönheits-
     fehler. Variablen entziehen sich dem Spezifitätswettlauf: die Fokusregel SETZT sie,
     diese Regel VERBRAUCHT sie nur. */
  border:1px solid var(--aw-rand, #C9D2DB); border-radius:10px; width:100%;
  padding:.78rem .85rem .78rem var(--aw-einzug, .85rem);
  min-height:50px;
  box-shadow:inset 0 1px 2px rgba(16,32,48,.06), var(--aw-ring, 0 0 0 0 rgba(0,0,0,0));
  transition:border-color .12s, box-shadow .12s;
}
.aw input::placeholder{ color:#8A9199; }
.aw input:focus{ border-color:var(--c-primary); outline:none; }
.aw__check{ display:flex; align-items:center; gap:.45rem; font-size:.95rem; padding-bottom:.75rem; }
.aw__check input{ width:1.15rem; height:1.15rem; accent-color:var(--c-primary); }

/* Verordnungs-Frage — hier entsteht der „Rechner"-Effekt */
.aw__seg{ display:flex; gap:.4rem; flex-wrap:wrap; }
.aw__seg label{ position:relative; }
.aw__seg input{ position:absolute; opacity:0; width:0; height:0; }
.aw__seg span{
  display:block; padding:.5rem 1rem; border-radius:999px; border:1px solid #C9D2DB;
  background:var(--c-white); box-shadow:0 1px 2px rgba(16,32,48,.05);
  font:600 .9rem/1.2 var(--font-display); color:var(--c-text-mute); cursor:pointer;
}
.aw__seg input:checked + span{ border-color:var(--c-primary); background:var(--c-primary); color:var(--c-white); }
.aw__seg input:focus-visible + span{ outline:3px solid var(--c-primary); outline-offset:2px; }
.aw__antwort{
  background:var(--c-flaeche); border-radius:var(--r-md); padding:.8rem 1rem;
  font-size:.95rem; color:var(--c-text); margin:0;
}
.aw__antwort b{ color:var(--c-primary-700); }

.aw__nav{ display:flex; gap:.5rem; }
.aw__nav .btn{ flex:1; }
.aw__s > .btn{ width:100%; }
.aw__fuss{ font-size:.82rem; color:var(--c-text-mute); margin:0; }

/* Auf dunklem Hero-Grund braucht die Karte keinen Rahmen */
.v1 .aw{ border-color:transparent; }

/* ============================================================
   Trust-Leiste unter dem Hero — zwei Teile.

   OBEN die Fakten: Direktabrechnung (bestätigte Tatsache über uns) plus die gesetzlichen
   Beträge. Das beantwortet die Geldfrage konkreter als jedes Logo.

   UNTEN die Kassen-Logos. Kundenentscheidung — der Einwand (fremde Marken, „Zusammenarbeit"
   suggeriert eine Partnerschaft, Kassen erlauben das Leistungserbringern praktisch nie)
   wurde vorgebracht und vom Kunden abgewogen. Zwei Dinge sind deshalb bewusst so gebaut:
     · Überschrift „Direktabrechnung mit Ihrer Krankenkasse" statt „Zusammenarbeit mit
       Krankenkassen" — wahr, und behauptet keine Partnerschaft.
     · Die Logodateien liefert der Kunde. Sie liegen unter public/assets/kassen/ und sind
       NICHT von uns beschafft. Fehlt eine Datei, bleibt der Platz leer statt kaputt.
   ============================================================ */
.trust{ background:var(--c-flaeche); }
.trust__in{ max-width:var(--wrap); margin:0 auto; padding:var(--sp-4) var(--sp-2); }
.trust__fakten{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); }
/* Trennstriche zwischen den Spalten geben der Leiste Struktur, ohne Kästen zu bauen */
.trust__i + .trust__i{ border-left:1px solid rgba(0,67,127,.14);
  padding-left:var(--sp-3); margin-left:calc(-1 * var(--sp-3) / 2); }
.trust__glyph{ display:grid; place-items:center; width:2.3rem; height:2.3rem;
  border-radius:50%; background:var(--c-white); color:var(--c-primary-700);
  margin-bottom:.6rem; box-shadow:0 1px 3px rgba(0,67,127,.1); }
.trust__glyph svg{ width:1.25rem; height:1.25rem; }
.trust__i b{ display:block; font:700 1rem/1.3 var(--font-display); color:var(--c-primary-700);
  margin-bottom:.25rem; }
.trust__i > span:last-child{ display:block; font-size:.88rem; line-height:1.55;
  color:var(--c-text-mute); }
@media(max-width:900px){
  .trust__fakten{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3) var(--sp-2); }
  .trust__i:nth-child(3){ border-left:none; padding-left:0; margin-left:0; }
}
@media(max-width:520px){
  .trust__fakten{ grid-template-columns:1fr; }
  .trust__i + .trust__i{ border-left:none; padding-left:0; margin-left:0;
    border-top:1px solid rgba(0,67,127,.14); padding-top:var(--sp-2); }
}

/* ── Kassen: Namen als Schrift-Chips, Logos ersetzen sie sobald geliefert ───── */
.kassen{ margin-top:var(--sp-4); padding-top:var(--sp-3);
  border-top:1px solid rgba(0,67,127,.14); }
.kassen__titel{ text-align:center; margin:0 0 var(--sp-1);
  font:700 .72rem/1 var(--font-display); letter-spacing:.13em; text-transform:uppercase;
  color:var(--c-primary); }
/* Ein Satz statt einer Logoreihe: er trägt die Aussage allein und darf deshalb größer
   sein als der Fließtext ringsum. */
.kassen__satz{ text-align:center; margin:0 auto var(--sp-2); max-width:44ch;
  font-size:1.12rem; line-height:1.5; color:var(--c-ink); }
.kassen__satz strong{ color:var(--c-primary-700); }
.kassen__punkte{ list-style:none; margin:0 auto; padding:0; max-width:62rem;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2); }
.kassen__punkte li{ background:var(--c-white); border-radius:9px; padding:.85rem 1rem;
  font-size:.88rem; line-height:1.55; color:var(--c-text-mute);
  box-shadow:inset 0 0 0 1px rgba(16,32,48,.06); }
.kassen__punkte strong{ display:block; color:var(--c-primary-700); font-weight:600;
  margin-bottom:.15rem; }
@media(max-width:820px){ .kassen__punkte{ grid-template-columns:1fr; } }


/* === Footer ================================================= */
.site-footer{ background:var(--c-primary-700); color:#fff; margin-top:var(--sp-5); }
.site-footer a{ color:rgba(255,255,255,.9); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.site-footer__in{
  max-width:var(--wrap); margin:0 auto; padding:var(--sp-4) var(--sp-2);
  display:grid; grid-template-columns:1.3fr .8fr .8fr 1.1fr; gap:var(--sp-4);
}
.site-footer__h{ font:700 .92rem/1 var(--font-display); letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.72); margin:0 0 var(--sp-2); }
.site-footer__liste{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; font-size:.96rem; }
.site-footer__name{ font:700 1.08rem/1.3 var(--font-display); margin:.6rem 0 .2rem; }
.site-footer__tel{ font:700 1.2rem/1.2 var(--font-display); }
.site-footer__klein{ font-size:.86rem; color:rgba(255,255,255,.72); margin-top:var(--sp-2); }
.site-footer__chips{ list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.35rem .5rem; font-size:.88rem; }
.site-footer__chips a{ display:block; padding:.2rem .5rem; border-radius:var(--r-sm);
  background:rgba(255,255,255,.09); }
.site-footer__unten{ border-top:1px solid rgba(255,255,255,.15); font-size:.86rem;
  color:rgba(255,255,255,.7); }
.site-footer__in--flach{ display:flex; justify-content:space-between; gap:var(--sp-2);
  padding-block:var(--sp-2); flex-wrap:wrap; }
.site-footer__unten p{ margin:0; }
@media(max-width:900px){ .site-footer__in{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .site-footer__in{ grid-template-columns:1fr; } }

/* Hero-Variante 3 — vom Kunden gewählt: Bild oben, Inhalt ragt hinein.
   Bewusst WEISSER Grund: die Trust-Leiste darunter liegt auf --c-flaeche. Zwei getönte
   Flächen direkt übereinander verlieren die Kante und wirken wie ein Block. */
.v3{ padding:var(--sp-4) 0 var(--sp-5); }
.v3__bild{ border-radius:var(--r-lg); overflow:hidden; }
.v3__bild img{ width:100%; height:clamp(280px,44vh,480px); object-fit:cover;
  object-position:50% 30%; }
.v3__unten{ display:grid; grid-template-columns:1fr auto; gap:var(--sp-4);
  align-items:start; margin-top:-3.5rem; position:relative; }
.v3__txt{ background:var(--c-white); border-radius:var(--r-lg); padding:var(--sp-3);
  box-shadow:var(--shadow); }
.v3 .aw{ box-shadow:var(--shadow); }
@media(max-width:960px){
  .v3__unten{ grid-template-columns:1fr; margin-top:-1.5rem; }
  .v3 .aw{ max-width:none; }
}

/* Burger-Dropdown im offenen Mobilmenü */
@media(max-width:900px){ .nav.open .nav-dd__menu{ display:none; }
  .nav.open .nav-dd.offen .nav-dd__menu{ display:block; } }
.hero__tel{ margin:var(--sp-2) 0 .3rem; font-size:1.05rem; }
.hero__tel a{ font:700 1.25rem/1.2 var(--font-display); }
.v1 .hero__tel{ color:rgba(255,255,255,.9); }
.v1 .hero__tel a{ color:#fff; }

/* ============================================================
   SEKTIONSTYPEN — jede Sektion hat einen eigenen Charakter.

   Die erste Fassung schob 41 generierte Module durch drei identische Templates und
   wechselte nur die Hintergrundfarbe. Das war zu Recht als „Haufen Text" abgelehnt.
   Leitidee jetzt: Die Seite bildet den WEG von der Wohnungstür zum Termin ab. Eine
   Routenlinie trägt die Ablauf-Sektion, die Kostenfrage erscheint als Rezeptformular —
   das echte Objekt dieser Branche.
   ============================================================ */
.sek{ padding:clamp(2.5rem,6vw,5rem) 0; }
.sek--papier{ background:var(--c-papier); }
.sek__kopf{ max-width:64ch; margin-bottom:var(--sp-3); }
.sek__kopf p{ color:var(--c-text-mute); margin:0; }
.label{
  font:700 .74rem/1 var(--font-display); letter-spacing:.18em; text-transform:uppercase;
  color:var(--c-primary); margin:0 0 .7rem;
}

/* ── Transportarten: vier Bildkarten ─────────────────────────── */
.arten{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-2); }
.art{
  background:var(--c-white); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--c-line); display:flex; flex-direction:column;
  transition:transform .16s ease, box-shadow .16s ease;
}
.art:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.art__bild{ aspect-ratio:4/3; overflow:hidden; background:var(--c-papier); }
.art__bild img{ width:100%; height:100%; object-fit:cover; object-position:var(--fokus); }
.art__txt{ padding:var(--sp-2); display:flex; flex-direction:column; gap:.4rem; flex:1; }
.art h3{ margin:0; font-size:1.16rem; }
.art p{ margin:0; font-size:.94rem; color:var(--c-text-mute); }
.art__fuer{
  margin-top:auto; padding-top:.6rem; border-top:1px solid var(--c-line);
  font:600 .84rem/1.35 var(--font-display); color:var(--c-primary-700);
}
@media(max-width:900px){ .arten{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .arten{ grid-template-columns:1fr; } }

/* ── Route: die Linie ist der Ablauf, nicht Dekoration ───────── */
.route{ position:relative; display:grid; gap:var(--sp-3); padding-left:3.4rem; }
.route::before{
  content:""; position:absolute; left:1.05rem; top:.9rem; bottom:.9rem; width:2px;
  background:linear-gradient(to bottom,var(--c-primary),var(--c-accent));
  border-radius:2px;
}
.route__s{ position:relative; }
.route__s::before{
  content:counter(rt); counter-increment:rt; position:absolute; left:-3.4rem; top:-.1rem;
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--c-white); border:2px solid var(--c-primary); color:var(--c-primary-700);
  display:grid; place-items:center; font:700 .95rem/1 var(--font-display);
  font-variant-numeric:tabular-nums;
}
.route{ counter-reset:rt; }
.route__s h3{ margin:0 0 .25rem; font-size:1.1rem; }
.route__s p{ margin:0; color:var(--c-text-mute); max-width:60ch; }
@media(max-width:520px){ .route{ padding-left:2.9rem; } .route::before{ left:.85rem; }
  .route__s::before{ left:-2.9rem; width:1.8rem; height:1.8rem; font-size:.85rem; } }

/* ── Rezept-Störer: das Muster-4-Formular als Objekt ─────────── */
.rezept{
  background:var(--c-rezept); border:1px solid var(--c-rezept-linie);
  border-radius:var(--r-md); padding:clamp(1.2rem,3vw,2rem);
  max-width:46rem; position:relative;
  /* gezackte Oberkante wie ein abgerissener Formularblock */
  background-image:radial-gradient(circle at 6px -2px, transparent 6px, var(--c-rezept) 7px);
  background-size:14px 14px; background-repeat:repeat-x; background-position:top;
  padding-top:calc(clamp(1.2rem,3vw,2rem) + 10px);
}
.rezept__kopf{
  display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-2);
  border-bottom:2px solid var(--c-rezept-linie); padding-bottom:.7rem; margin-bottom:var(--sp-2);
}
.rezept__kopf b{ font:700 1.05rem/1.2 var(--font-display); color:var(--c-ink); }
.rezept__muster{
  font:600 .72rem/1 var(--font-display); letter-spacing:.14em; text-transform:uppercase;
  color:#9A6672; white-space:nowrap;
}
.rezept__zeile{
  display:grid; grid-template-columns:11rem 1fr; gap:.6rem var(--sp-2);
  padding:.7rem 0; border-bottom:1px dashed var(--c-rezept-linie);
}
.rezept__zeile:last-of-type{ border-bottom:0; }
.rezept__feld{
  font:600 .78rem/1.4 var(--font-display); letter-spacing:.08em; text-transform:uppercase;
  color:#9A6672; padding-top:.15rem;
}
.rezept__wert{ margin:0; color:var(--c-ink); font-variant-numeric:tabular-nums; }
.rezept__fuss{ margin:var(--sp-2) 0 0; font-size:.93rem; color:#7C5560; }
@media(max-width:560px){ .rezept__zeile{ grid-template-columns:1fr; gap:.15rem; } }

/* ── Bild-Band mit einer einzigen Aussage ────────────────────── */
/* ── Merkblätter: PDF-Karten ─────────────────────────────────── */
.blaetter{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.blatt{
  display:flex; gap:.8rem; align-items:flex-start; padding:var(--sp-2);
  background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-md);
  text-decoration:none; color:inherit; transition:border-color .15s, transform .15s;
}
.blatt:hover{ border-color:var(--c-primary); transform:translateY(-2px); color:inherit; }
.blatt__icon{
  flex:0 0 auto; width:2.4rem; height:3rem; border-radius:3px; background:var(--c-papier);
  border:1px solid var(--c-line); position:relative;
}
.blatt__icon::after{
  content:"PDF"; position:absolute; inset:auto 0 .35rem 0; text-align:center;
  font:700 .58rem/1 var(--font-display); letter-spacing:.06em; color:var(--c-primary);
}
.blatt__icon::before{
  content:""; position:absolute; top:.45rem; left:.4rem; right:.4rem; height:1px;
  background:var(--c-line); box-shadow:0 4px 0 var(--c-line), 0 8px 0 var(--c-line);
}
.blatt b{ display:block; font:600 .99rem/1.35 var(--font-display); color:var(--c-primary-700); }
.blatt span{ display:block; font-size:.86rem; color:var(--c-text-mute); margin-top:.15rem; }
.blatt--offen{ opacity:.55; pointer-events:none; border-style:dashed; }
@media(max-width:860px){ .blaetter{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .blaetter{ grid-template-columns:1fr; } }

/* ── Warum: drei Gründe, groß gesetzt ────────────────────────── */
.gruende{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4) var(--sp-3); }
.grund{ border-top:3px solid var(--c-primary); padding-top:var(--sp-2); }
.grund h3{ margin:0 0 .4rem; font-size:1.14rem; }
.grund p{ margin:0; color:var(--c-text-mute); font-size:.96rem; }
@media(max-width:760px){ .gruende{ grid-template-columns:1fr; gap:var(--sp-3); } }

/* ── FAQ: großzügig gesetzt, klare Öffnung ───────────────────── */
/* ── Abschluss ───────────────────────────────────────────────── */
.schluss{ background:var(--c-primary-700); color:#fff; }
.schluss .wrap{ display:grid; grid-template-columns:1.2fr auto; gap:var(--sp-3);
  align-items:center; padding-block:clamp(2rem,5vw,3.5rem); }
.schluss h2{ color:#fff; margin:0 0 .5rem; }
.schluss p{ color:rgba(255,255,255,.88); margin:0; max-width:52ch; }
.schluss .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.schluss .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; }
.schluss__cta{ display:flex; gap:.6rem; flex-wrap:wrap; }
@media(max-width:760px){ .schluss .wrap{ grid-template-columns:1fr; } }
/* Kompakte Variante für den Hero — dort zählt Überfliegbarkeit, nicht Ausführlichkeit */
.check-list--eng{ gap:.35rem; margin:var(--sp-2) 0 0; font-size:.96rem; }
.check-list--eng li{ padding-left:1.7rem; }
.check-list--eng li::before{ width:1.05rem; height:1.05rem; top:.3em; background-size:.62rem .62rem; }
/* Download-Zeile im Rezeptblock — bewusst als Link, nicht als Knopf: der Knopf
   im Abschnitt gehört der Anfrage, nicht dem Merkblatt. */
.rezept__dl{ margin:var(--sp-2) 0 0; padding-top:var(--sp-2);
  border-top:1px dashed var(--c-rezept-linie); font-size:.94rem; }
.rezept__dl a{ color:#8A4E5C; font-weight:600; }
.rezept__dl a:hover{ color:#6B3A46; }

/* ── Fahrtziele: drei Bildkarten + Zielarten als Chips ─────────────────────── */
.ziele{ display:grid; gap:var(--sp-3); grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:var(--sp-4); }
.ziel__bild{ overflow:hidden; border-radius:var(--r-2); margin-bottom:var(--sp-2); }
.ziel__bild img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  object-position:50% 45%; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.ziel:hover .ziel__bild img{ transform:scale(1.035); }
.ziel h3{ font-size:1.06rem; margin:0 0 .35rem; }
.ziel p{ margin:0; color:var(--c-ink-70); font-size:.95rem; line-height:1.6; }
@media (max-width:900px){ .ziele{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ziele{ grid-template-columns:1fr; } }

/* Chips: die Aufzählung der Zielarten, die vorher im Fließtext verschwand. */
.zielarten{ list-style:none; display:flex; flex-wrap:wrap; gap:.5rem;
  margin:var(--sp-4) 0 0; padding:0; }
.zielarten li{ font-size:.88rem; color:var(--c-ink-70); background:var(--c-papier);
  border:1px solid var(--c-linie); border-radius:999px; padding:.34rem .8rem; }

/* ── Gründe mit Teambild ───────────────────────────────────────────────────── */
.gruende-paar{ display:grid; gap:var(--sp-4); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); margin-top:var(--sp-4); }
.gruende-bild{ margin:0; }
.gruende-bild img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
  object-position:50% 40%; border-radius:var(--r-2); }
.gruende-paar .gruende{ display:grid; gap:var(--sp-2); margin:0; }
/* Wichtig: die Basisregel .gruende ist dreispaltig. Neben dem Bild bleibt dafür nur
   ~180px je Spalte übrig — Textwurst. Im Paar stapeln die Gründe deshalb. */
.gruende-paar .gruende{ grid-template-columns:1fr; }
@media (max-width:820px){ .gruende-paar{ grid-template-columns:1fr; } }

/* ── Ablauf als Linienplan ───────────────────────────────────────────────────
   Ab 900px waagerecht. Die Endpunkt-Beschriftungen stehen ÜBER der Linie und nicht
   als eigene Rasterspalten — als Spalten nahmen sie ~200px weg, wodurch die fünf
   Stationen auf 150px zusammenschrumpften und die Sektion gestopft wirkte.
   Stationstexte sind linksbündig: zentrierter Flattersatz in schmalen Spalten liest
   sich schlechter und sieht unruhiger aus. Der Rückweg ist gestrichelt. */
.linie{ --marke:2.9rem; margin-top:var(--sp-4); }

@media(min-width:900px){
  .linie__kappen{ display:flex; justify-content:space-between; margin-bottom:.7rem; }
  .linie__kappe{
    margin:0; font:700 .7rem/1 var(--font-display); letter-spacing:.09em;
    text-transform:uppercase; color:var(--c-primary-700); opacity:.85;
  }
  .linie__stationen{
    list-style:none; margin:0; padding:0; position:relative;
    display:grid; grid-template-columns:repeat(5,1fr); gap:0 1.4rem;
  }
  /* Strecke mit Punkt an jedem Ende — ohne Zusatz-Elemente */
  .linie__stationen::before{
    content:""; position:absolute; left:0; right:0; top:calc(var(--marke)/2 - 3px);
    height:6px;
    background:
      radial-gradient(circle 3px at 3px 50%, var(--c-primary) 98%, transparent) left/50% 100% no-repeat,
      radial-gradient(circle 3px at calc(100% - 3px) 50%, var(--c-primary) 98%, transparent) right/50% 100% no-repeat,
      linear-gradient(to right, rgba(0,94,184,.28), rgba(0,94,184,.28)) center/100% 2px no-repeat;
  }
  .linie__st{ position:relative; padding-top:calc(var(--marke) + 1rem); }
  .linie__marke{
    position:absolute; left:0; top:0;
    width:var(--marke); height:var(--marke); border-radius:50%;
    background:var(--c-white); border:2px solid var(--c-primary); color:var(--c-primary-700);
    display:grid; place-items:center; box-shadow:0 0 0 6px var(--c-papier);
  }
  .linie__marke svg{ width:1.32rem; height:1.32rem; }
  .linie__txt{ text-align:left; }
  .linie__st h3{ font-size:1rem; margin:0 0 .35rem; line-height:1.3; }
  .linie__st p:not(.linie__nr):not(.linie__strecke){
    margin:0; color:var(--c-text-mute); font-size:.9rem; line-height:1.6; max-width:none;
  }
  /* Beschriftung sitzt AUF der Linie, im Spalt rechts der Marke */
  .linie__strecke{
    position:absolute; top:calc(var(--marke)/2); left:calc(var(--marke) + .45rem);
    transform:translateY(-50%); width:calc(100% - var(--marke) + .5rem);
    margin:0; font-size:.7rem; font-style:normal; line-height:1.2; text-align:center;
    color:var(--c-primary-700); opacity:.78;
    background:var(--c-papier); padding:.1rem .25rem;
    /* z-index nötig: das gestrichelte ::after des Rückweg-Abschnitts wird NACH den
       Kindern gezeichnet und lief sonst als Strich durch die Beschriftung. */
    z-index:1;
  }
  .linie__strecke::before{ content:none; }
  .linie__st--zurueck .linie__marke{ border-style:dashed; }
  .linie__st--zurueck::after{
    content:""; position:absolute; top:calc(var(--marke)/2 - 1px);
    left:var(--marke); width:calc(100% - var(--marke) + 1.4rem); height:2px;
    background:repeating-linear-gradient(to right,var(--c-primary) 0 5px,transparent 5px 11px);
    opacity:.6;
  }
}

/* ── unter 900px: derselbe Plan senkrecht ──────────────────────────────────── */
@media(max-width:899px){
  .linie{ position:relative; padding-left:calc(var(--marke) + 1.5rem); }
  .linie::before{
    content:""; position:absolute; left:calc(var(--marke)/2 - 1px); top:1.6rem; bottom:1.6rem;
    width:2px; background:var(--c-primary); opacity:.28; border-radius:2px;
  }
  .linie__kappen{ display:contents; }
  .linie__kappe{
    position:relative; margin:0 0 var(--sp-3); font:700 .78rem/1 var(--font-display);
    letter-spacing:.07em; text-transform:uppercase; color:var(--c-primary-700);
  }
  .linie__kappe::before{
    content:""; position:absolute;
    left:calc(-1 * (var(--marke) + 1.5rem) + var(--marke)/2 - .31rem);
    top:-.1rem; width:.62rem; height:.62rem; border-radius:50%; background:var(--c-primary);
    box-shadow:0 0 0 3px var(--c-papier);
  }
  .linie__kappe:last-child{ margin:var(--sp-3) 0 0; }
  .linie__stationen{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3); }
  .linie__st{ position:relative; }
  .linie__marke{
    position:absolute; left:calc(-1 * (var(--marke) + 1.5rem)); top:0;
    width:var(--marke); height:var(--marke); border-radius:50%;
    background:var(--c-white); border:2px solid var(--c-primary); color:var(--c-primary-700);
    display:grid; place-items:center; box-shadow:0 0 0 5px var(--c-papier);
  }
  .linie__marke svg{ width:1.3rem; height:1.3rem; }
  .linie__st h3{ margin:0 0 .3rem; font-size:1.1rem; }
  .linie__st p:not(.linie__nr):not(.linie__strecke){ margin:0; color:var(--c-text-mute); max-width:62ch; }
  .linie__strecke{
    margin:.8rem 0 0; font-size:.83rem; font-style:italic; color:var(--c-primary-700); opacity:.72;
  }
  .linie__strecke::before{ content:"\2193  "; font-style:normal; opacity:.6; }
  .linie__st--zurueck .linie__marke{ border-style:dashed; }
  .linie__st--zurueck::after{
    content:""; position:absolute;
    left:calc(-1 * (var(--marke) + 1.5rem) + var(--marke)/2 - 1px);
    top:var(--marke); bottom:calc(-1 * var(--sp-3)); width:2px;
    background:repeating-linear-gradient(to bottom,var(--c-primary) 0 5px,transparent 5px 11px);
    opacity:.55;
  }
}
.linie__nr{
  margin:0 0 .12rem; font:700 .68rem/1 var(--font-display); letter-spacing:.09em;
  text-transform:uppercase; color:var(--c-primary); opacity:.7;
}
@media(max-width:560px){ .linie{ --marke:2.4rem; } }

/* ── Kostensektion: Kopf + Bild, Störer, Kacheln ─────────────────────────────
   Drei Ebenen, damit die Sektion nicht wieder als Werteliste endet. Der Störer
   arbeitet mit FLÄCHE: das Kassenfeld ist doppelt so breit wie der Eigenanteil.
   Das sagt die Größenordnung, ohne einen eigenen Fahrpreis zu behaupten. */
.kosten__kopf{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
  gap:var(--sp-4); align-items:end; }
.kosten__kopf .sek__kopf{ margin-bottom:0; max-width:58ch; }
.kosten__bild{ margin:0; }
.kosten__bild img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  object-position:50% 45%; border-radius:var(--r-2); display:block; }
.kosten__bild figcaption{ margin-top:.5rem; font-size:.84rem; color:var(--c-text-mute);
  line-height:1.45; }

.teilung{ display:grid; grid-template-columns:2fr 1fr; gap:2px; margin-top:var(--sp-4);
  border-radius:var(--r-md); overflow:hidden; }
.teilung__kasse,.teilung__anteil{ padding:clamp(1.15rem,2.6vw,1.9rem); }
.teilung__kasse{ background:var(--c-primary); color:#fff; }
.teilung__anteil{ background:var(--c-rezept); color:var(--c-primary-700);
  display:flex; flex-direction:column; }
.teilung__label{ margin:0 0 .5rem; font:700 .7rem/1 var(--font-display); letter-spacing:.1em;
  text-transform:uppercase; opacity:.72; }
.teilung__gross{ margin:0 0 .5rem; font:700 clamp(1.3rem,2.6vw,1.85rem)/1.2 var(--font-display);
  max-width:26ch; }
.teilung__betrag{ margin:0 0 .5rem; font:700 clamp(1.9rem,4vw,2.7rem)/1 var(--font-display);
  font-variant-numeric:tabular-nums; }
.teilung__klein{ margin:0; font-size:.9rem; line-height:1.55; }
.teilung__kasse .teilung__klein{ color:rgba(255,255,255,.9); max-width:34ch; }
.teilung__anteil .teilung__klein{ color:#7A4653; }

.kosten__kacheln{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2);
  margin-top:var(--sp-3); }
.kachel{ background:var(--c-papier); border:1px solid var(--c-line);
  border-radius:var(--r-2); padding:1.05rem 1.15rem; }
.kachel__feld{ margin:0 0 .35rem; font:700 .74rem/1.2 var(--font-display); letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-primary); }
.kachel p:not(.kachel__feld){ margin:0; font-size:.92rem; line-height:1.6;
  color:var(--c-text-mute); }
.kosten__fuss{ margin:var(--sp-3) 0 0; font-size:.92rem; color:var(--c-text-mute);
  max-width:78ch; }
/* KEIN nowrap: die Beschriftung ist 412px lang und schob bei 390px Fensterbreite die
   gesamte Seite 38px zur Seite (Querlauf auf jedem Telefon). Umbruch ist hier das
   kleinere Übel; zusammengehalten wird nur „(PDF)" über ein geschütztes Leerzeichen. */
.kosten__fuss a{ color:var(--c-primary); font-weight:600; }

@media(max-width:880px){
  .kosten__kopf{ grid-template-columns:1fr; align-items:start; }
  .teilung{ grid-template-columns:1fr; }
  .kosten__kacheln{ grid-template-columns:1fr; }
}

/* ── Aussage-Band: Foto und Satz NEBENEINANDER ───────────────────────────────
   Kein Text über dem Bild. Der vorherige Entwurf tönte das Foto blau und legte
   den Satz mittig darüber — über der Fahrzeugflanke, wo der Kontrast wegbricht. */
.aussage{ display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch; }
.aussage__bild{ position:relative; min-height:clamp(280px,34vw,430px); overflow:hidden; }
.aussage__bild img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--fokus); }
.aussage__txt{ background:var(--c-primary-700); color:#fff;
  padding:clamp(1.6rem,4vw,3.2rem); display:flex; flex-direction:column;
  justify-content:center; gap:.9rem; }
.aussage__label{ margin:0; font:700 .72rem/1 var(--font-display); letter-spacing:.12em;
  text-transform:uppercase; color:rgba(255,255,255,.62); }
.aussage blockquote{ margin:0; }
.aussage blockquote p{
  margin:0; color:#fff; text-wrap:balance; max-width:24ch;
  font:700 clamp(1.35rem,2.5vw,2rem)/1.28 var(--font-display); letter-spacing:-.015em;
}
.aussage__fuss{ margin:0; font-size:.88rem; color:rgba(255,255,255,.72); }
@media(max-width:820px){
  .aussage{ grid-template-columns:1fr; }
  .aussage__bild{ min-height:220px; }
}

/* ── FAQ: Fragenspalte + Hilfe-Karte ─────────────────────────────────────────
   Der nackte Accordion-Stapel über die volle Breite war das langweiligste
   Element der Seite. Die Nummer gibt den Karten Rhythmus, die Hilfe-Karte füllt
   die rechte Spalte mit dem, was nach einer offenen Frage kommt: anrufen. */
.faq-paar{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:var(--sp-4); align-items:start; }
.faq{ display:grid; gap:.5rem; }
.faq__i{
  background:var(--c-white); border:1px solid var(--c-line); border-radius:var(--r-md);
  overflow:hidden; transition:border-color .15s, box-shadow .15s;
}
.faq__i[open]{ border-color:var(--c-primary); box-shadow:0 2px 14px rgba(0,94,184,.09); }
.faq__i summary{
  cursor:pointer; list-style:none; padding:1rem 3rem 1rem 1.1rem; position:relative;
  display:flex; gap:.85rem; align-items:baseline;
  font:600 1.03rem/1.45 var(--font-display); color:var(--c-primary-700);
}
.faq__i summary::-webkit-details-marker{ display:none; }
.faq__nr{
  flex:0 0 auto; font:700 .78rem/1 var(--font-display); font-variant-numeric:tabular-nums;
  color:var(--c-primary); opacity:.5; padding-top:.22rem;
}
/* Plus, das beim Öffnen zum Minus wird — deutlicher als ein Pfeil */
.faq__i summary::before,.faq__i summary::after{
  content:""; position:absolute; right:1.15rem; top:1.5rem; background:var(--c-primary);
  transition:transform .2s ease, opacity .2s ease;
}
.faq__i summary::before{ width:.78rem; height:2px; }
.faq__i summary::after{ width:2px; height:.78rem; right:1.53rem; top:1.12rem; }
.faq__i[open] summary::after{ transform:rotate(90deg); opacity:0; }
.faq__i summary:hover{ background:var(--c-papier); }
.faq__a{ padding:0 1.1rem 1.15rem 3.05rem; color:var(--c-text-mute); }
.faq__a p{ margin:0; max-width:60ch; }

.faq__hilfe{
  position:sticky; top:calc(var(--h-header) + 1rem);
  background:var(--c-primary); color:#fff; border-radius:var(--r-md);
  padding:clamp(1.2rem,2.4vw,1.7rem); display:grid; gap:.75rem;
}
.faq__hilfe-h{ margin:0; font:700 1.2rem/1.25 var(--font-display); }
.faq__hilfe p{ margin:0; font-size:.94rem; line-height:1.6; color:rgba(255,255,255,.9); }
.faq__hilfe .btn{ justify-self:start; background:#fff; color:var(--c-primary-700); }
.faq__hilfe .btn:hover{ background:var(--c-papier); }
.faq__hilfe-alt{ color:#fff; font-size:.9rem; font-weight:600; text-decoration:underline;
  text-underline-offset:3px; }
.faq__hilfe .hinweis-112{ color:rgba(255,255,255,.6); font-size:.8rem; margin:0; }
@media(max-width:880px){
  .faq-paar{ grid-template-columns:1fr; }
  .faq__hilfe{ position:static; }
}

/* ═══ RUHE-PASS ═════════════════════════════════════════════════════════════
   Kundenkritik 26.08.2026: „clean fehlt mir insgesamt". Die Seite hatte sechs
   Flächenfarben, dreizehn Uppercase-Behandlungen und einen 1px-Rahmen um fast
   jede Karte. Nichts davon war einzeln falsch — zusammen ruft alles gleichzeitig.
   Dieser Block nimmt weg, er baut nichts um: weniger Flächen, weniger Rahmen,
   weniger Versalien, mehr Luft. Ein Akzent bleibt (das Rosa des Muster-4-Rezepts),
   und zwar an genau einer Stelle.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 ── Flächen: statt sechs nur noch weiß, Papier und die zwei gesetzten Blaus.
        Das gesättigte Hellblau der Trust-Leiste lag direkt unter dem Hero und
        machte den Seitenanfang bunt. */
.trust{ background:var(--c-papier); }
.trust__glyph{ background:var(--c-white); box-shadow:none; }

/* 2 ── Luft: eine Sektionshöhe für alle, deutlich großzügiger. Weißraum ist der
        wirksamste Hebel für „clean" und der einzige, der nichts wegnimmt. */
.sek{ padding-block:clamp(3rem,6vw,5rem); }
.sek__kopf{ margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
.trust__in{ padding-block:clamp(2rem,4vw,3rem); }

/* 3 ── Rahmen raus. Karten trennen sich über die Fläche, nicht über Linien.
        Auf Papier-Sektionen sind Karten weiß, auf weißen Sektionen Papier —
        so bleibt der Kontrast ohne einen einzigen Strich. */
.kachel{ border:none; background:var(--c-papier); padding:1.25rem 1.35rem; }
.sek--papier .kachel{ background:var(--c-white); }
.blatt{ border:none; background:var(--c-white); }
.sek--papier .blatt{ background:var(--c-white); }
.blatt--offen{ background:transparent; box-shadow:inset 0 0 0 1px var(--c-line); }
.trust__i + .trust__i{ border-left:none; padding-left:0; margin-left:0; }
.kassen{ border-top:none; }
/* Die FAQ-Zeilen behalten eine Kontur — sie sind anklickbar, und eine Fläche ohne
   jede Kante liest sich nicht als Bedienelement. */
.faq__i{ border-color:#E5EAF0; }

/* 4 ── Versalien: von dreizehn auf zwei. Der Hero-Eyebrow und die zwei Hälften des
        Kostenstörers dürfen rufen, weil sie etwas benennen. Alles andere ordnet
        sich unter — gleiche Information, ruhigere Stimme. */
.linie__kappe, .kassen__titel, .linie__nr{
  text-transform:none; letter-spacing:.01em; font-weight:600;
}
.linie__kappe{ font-size:.82rem; opacity:.7; }
.kassen__titel{ font-size:.86rem; opacity:.65; }
.linie__nr{ font-size:.74rem; opacity:.55; }
.kachel__feld{ text-transform:none; letter-spacing:.01em; font-size:.9rem;
  font-weight:700; color:var(--c-primary-700); }
.aussage__label{ text-transform:none; letter-spacing:.02em; font-size:.84rem;
  font-weight:600; }

/* 5 ── Radien: zwei Werte statt vier. Karten 12px, große Bildflächen 20px, Pillen rund. */
.kachel,.blatt,.faq__i,.ziel__bild,.kosten__bild img,.gruende-bild img,.faq__hilfe{
  border-radius:12px;
}

/* 6 ── Typografie beruhigen: Fließtext eine Spur größer und heller, Überschriften
        etwas enger. Weniger Fettung insgesamt — vorher war fast jede Kleinzeile 700. */
.sek__kopf p{ font-size:1.02rem; line-height:1.65; }
h2{ letter-spacing:-.02em; }
.trust__i b{ font-weight:700; }
.trust__i > span:last-child{ color:var(--c-text-mute); }

/* ── Einsatzgebiet: Landkreise und kreisfreie Städte ────────────────────────
   Kein Kartenbild: eine Deutschlandkarte wäre hier Dekoration, die Liste ist der
   Einstieg. Die Zahl hinter dem Kreis sagt, wie viele Orte dort bedient werden —
   das ist die Information, die den Klick auslöst. */
.gebiet{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.gebiet__block h3{ margin:0 0 1rem; font-size:.95rem; font-weight:600;
  color:var(--c-text-mute); }
.gebiet__liste{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.15rem 1.5rem; }
.gebiet__liste--stadt{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.gebiet__liste a{
  display:flex; justify-content:space-between; align-items:baseline; gap:.5rem;
  padding:.5rem 0; color:var(--c-primary-700); font-weight:600; font-size:.95rem;
  border-bottom:1px solid rgba(0,67,127,.09);
}
.gebiet__liste a:hover{ color:var(--c-primary); border-bottom-color:var(--c-primary); }
.gebiet__liste a span{ font-weight:400; font-size:.82rem; color:var(--c-text-mute);
  font-variant-numeric:tabular-nums; }
.gebiet__fuss{ margin:1.25rem 0 0; }
.gebiet__fuss a{ color:var(--c-primary); font-weight:600; font-size:.95rem; }
@media(max-width:900px){
  .gebiet{ grid-template-columns:1fr; }
  .gebiet__liste{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:520px){ .gebiet__liste,.gebiet__liste--stadt{ grid-template-columns:1fr; } }

/* Abschluss-CTA und Footer trafen als ZWEI gleich dunkle Blaus aufeinander, getrennt
   nur durch einen weißen Streifen aus dem Footer-Abstand — das las sich als Renderfehler.
   Jetzt: der CTA im helleren Blau, der Footer im dunklen, und sie stoßen direkt aneinander. */
.schluss{ background:var(--c-primary); }
.schluss + .site-footer{ margin-top:0; }
/* Auf farbigem Grund kippt der Primärknopf ins Weiße — sonst wäre er blau auf blau
   und damit unsichtbar (genau das passierte beim Farbwechsel der Sektion). */
.schluss .btn--primary{ background:var(--c-white); color:var(--c-primary-700); }
.schluss .btn--primary:hover{ background:var(--c-papier); }
.schluss .btn--ghost{ border-color:rgba(255,255,255,.55); color:#fff; }
.schluss .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* ── Leistungsseiten: die wenigen Abweichungen von der Startseiten-Sprache ───
   Absichtlich klein gehalten. Ein zweites Formenvokabular für die Unterseiten
   würde die Site auseinanderfallen lassen — dieselben Sektionstypen, nur andere
   Spaltenzahl, plus die Querverweis-Leiste. */
.kosten__kacheln--vier{ grid-template-columns:repeat(4,1fr); }
@media(max-width:1000px){ .kosten__kacheln--vier{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .kosten__kacheln--vier{ grid-template-columns:1fr; } }

@media(min-width:900px){
  .linie__stationen--vier{ grid-template-columns:repeat(4,1fr); }
}

/* Querverweis auf die anderen Leistungen. Als Chips, nicht als Kartenreihe: es sind
   Navigationslinks am Seitenende, keine eigenständige Inhaltssektion. */
.quer{ list-style:none; display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; }
.quer li a{
  display:block; padding:.6rem 1.05rem; border-radius:999px;
  background:var(--c-papier); color:var(--c-primary-700);
  font-weight:600; font-size:.95rem; transition:background .15s, color .15s;
}
.quer li a:hover{ background:var(--c-primary); color:#fff; }
.quer--hub a{ background:transparent; box-shadow:inset 0 0 0 1px var(--c-line); }

/* ── /einsatzgebiet: Navigations-Hub ─────────────────────────────────────────
   Andere Aufgabe als die Content-Seiten: der Leser sucht seinen Ort, nicht Text.
   Darum kein Hero-Bild, kompakter Kopf, und darunter viel Liste in ruhigen Spalten. */
.hero--hub{ padding-block:clamp(1.5rem,3vw,2.5rem) 0; }
.hub__kopf{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:var(--sp-4); align-items:start; }
.hub__kopf h1{ margin:.2rem 0 var(--sp-2); }
@media(max-width:900px){ .hub__kopf{ grid-template-columns:1fr; } }

/* Ortslisten: mehrspaltig, damit 18 Orte nicht 18 Zeilen hoch werden */
.hub__stadt{ list-style:none; margin:0; padding:0;
  columns:4 11rem; column-gap:var(--sp-3); }
.hub__stadt li{ break-inside:avoid; padding:.22rem 0; }
.hub__stadt a{ color:var(--c-text); font-size:.94rem; }
.hub__stadt a:hover{ color:var(--c-primary); text-decoration:underline;
  text-underline-offset:3px; }
.hub__stadt--gross{ columns:3 13rem; }
.hub__stadt--gross a{ font-weight:600; font-size:1.02rem; color:var(--c-primary-700); }

.hub__kreise{ display:grid; gap:var(--sp-4) var(--sp-3);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
.hub__kreis h3{ margin:0 0 .6rem; font-size:1.02rem;
  padding-bottom:.4rem; border-bottom:1px solid rgba(0,67,127,.12);
  display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.hub__kreis h3 a{ color:var(--c-primary-700); }
.hub__kreis h3 span{ font-weight:400; font-size:.8rem; color:var(--c-text-mute);
  white-space:nowrap; }
.hub__kreis .hub__stadt{ columns:2 9rem; }
@media(max-width:820px){
  .hub__kreise{ grid-template-columns:1fr; }
  .hub__stadt,.hub__stadt--gross,.hub__kreis .hub__stadt{ columns:2 8rem; }
}

/* ── Abgrenzungsseite: der Drei-Spalten-Vergleich ────────────────────────────
   Keine <table>: auf Mobil wäre eine dreispaltige Tabelle unlesbar. Stattdessen
   Karten mit identischer Zeilenstruktur (<dl>), die untereinander rutschen.
   Nur die erste Spalte ist unsere Leistung — sie ist die einzige mit Farbe. */
.abg__kopf{ max-width:62ch; }
.abg__kopf h1{ margin:.2rem 0 var(--sp-2); }
.abg__kopf p{ margin:0 0 var(--sp-2); }

.vgl{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-2);
  align-items:start; }
.vgl__sp{ background:var(--c-papier); border-radius:12px; overflow:hidden; }
.vgl__sp header{ padding:1.1rem 1.2rem .9rem; }
.vgl__sp h3{ margin:0 0 .2rem; font-size:1.06rem; color:var(--c-primary-700); }
.vgl__sp header p{ margin:0; font-size:.86rem; color:var(--c-text-mute); }
/* Unsere Spalte: farbig, damit auf einen Blick klar ist, wovon diese Site handelt */
.vgl__sp--eigen{ background:var(--c-primary); }
.vgl__sp--eigen h3{ color:#fff; }
.vgl__sp--eigen header p{ color:rgba(255,255,255,.78); }
.vgl__sp--eigen dl{ background:var(--c-white); }
.vgl__sp dl{ margin:0; padding:.2rem 1.2rem 1.1rem; }
.vgl__sp--eigen dl{ padding-top:1.1rem; }
.vgl__sp dt{ font:700 .72rem/1.2 var(--font-display); letter-spacing:.07em;
  text-transform:uppercase; color:var(--c-primary); opacity:.75;
  margin-top:.9rem; }
.vgl__sp dt:first-child{ margin-top:0; }
.vgl__sp dd{ margin:.25rem 0 0; font-size:.9rem; line-height:1.55; color:var(--c-text-mute); }
@media(max-width:900px){ .vgl{ grid-template-columns:1fr; } }

/* Entscheidungshilfe: drei Fragen mit Ja/Nein-Zweig */
.frage{ list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-2); counter-reset:f; }
.frage__i{ background:var(--c-white); border-radius:12px; padding:1.15rem 1.3rem; }
.frage__i h3{ margin:0 0 .8rem; font-size:1.04rem; }
.frage__zweig{ display:grid; gap:.5rem; }
.frage__zweig p{ margin:0; font-size:.93rem; line-height:1.55; color:var(--c-text-mute);
  padding-left:2.9rem; position:relative; }
.frage__zweig b{ position:absolute; left:0; top:0; font:700 .72rem/1.5 var(--font-display);
  letter-spacing:.05em; text-transform:uppercase; }
.frage__ja b{ color:var(--c-primary); }
.frage__nein b{ color:var(--c-text-mute); opacity:.7; }

/* Irrtümer: der „Feld"-Text ist hier ein Zitat, darum nicht in Versalien */
.kachel--irrtum .kachel__feld{ text-transform:none; letter-spacing:0; font-size:.98rem;
  line-height:1.4; font-style:italic; color:var(--c-primary-700); }

/* ── Textseiten: Impressum, Datenschutz, Über uns ────────────────────────────
   Bewusst arm. Wer das Impressum aufruft, sucht eine Angabe; wer „Über uns"
   liest, prüft Vertrauen. Beides verträgt keine Verkaufsfläche. */
.txt__kopf{ max-width:60ch; }
.txt__kopf h1{ margin:.2rem 0 var(--sp-2); }
.txt{ max-width:70ch; }
.txt h2{ font-size:1.25rem; margin:var(--sp-4) 0 .6rem; }
.txt h2:first-child{ margin-top:0; }
.txt h3{ font-size:1.05rem; margin:var(--sp-3) 0 .4rem; }
.txt p{ margin:0 0 .9rem; line-height:1.7; }
.txt a{ color:var(--c-primary); font-weight:600; }
.txt__liste{ margin:0 0 .9rem; padding-left:1.2rem; }
.txt__liste li{ margin-bottom:.4rem; line-height:1.65; }

/* Fakten-Zeilen auf „Über uns": nachprüfbare Angaben statt Erzählung */
.fakten{ margin:0; display:grid; gap:0; max-width:76ch; }
.fakten__z{ display:grid; grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:.4rem var(--sp-3); padding:.85rem 0; border-bottom:1px solid var(--c-line); }
.fakten__z:first-child{ border-top:1px solid var(--c-line); }
.fakten dt{ font-weight:700; color:var(--c-primary-700); font-size:.94rem; }
.fakten dd{ margin:0; color:var(--c-text-mute); font-size:.94rem; line-height:1.6; }
@media(max-width:640px){ .fakten__z{ grid-template-columns:1fr; gap:.15rem; } }

/* Einwilligung im Anfrage-Feld. Bewusst NICHT kleingedruckt versteckt: eine Einwilligung
   nach Art. 9 DSGVO muss erkennbar und verständlich sein, sonst ist sie unwirksam. */
.aw__einwilligung{ display:grid; grid-template-columns:auto 1fr; gap:.6rem;
  align-items:start; margin:var(--sp-2) 0 0; font-size:.82rem; line-height:1.5;
  color:var(--c-text-mute); }
.aw__einwilligung input{ margin-top:.18rem; width:1.05rem; height:1.05rem; flex:0 0 auto; }
.aw__einwilligung a{ color:var(--c-primary); font-weight:600; }

/* ── Anfrage-Formular: Folgefragen und Antwort-Ton ───────────────────────────
   Die Folgefragen erscheinen nur, wenn sie zutreffen (Fahrtgrund nur ohne
   Transportschein, Pflegegrad nur bei ambulanter Behandlung). Ein Rahmen links
   zeigt die Verschachtelung, ohne einen Kasten im Kasten zu bauen. */
.aw__folge{ margin-top:var(--sp-2); padding-left:.9rem;
  border-left:2px solid rgba(0,94,184,.22); }
.aw__seg--spalten{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.aw__seg--spalten label{ margin:0; }
.aw__seg--spalten span{ display:block; line-height:1.3; }
.aw__seg--spalten small{ display:block; font-size:.72rem; opacity:.7; font-weight:400;
  margin-top:.12rem; }
@media(max-width:420px){ .aw__seg--spalten{ grid-template-columns:1fr; } }

/* Der Ton der Antwort: grün = wir fahren, blau = wir klären, gedeckt = ohne
   Genehmigung keine Zusage. Bewusst KEIN Rot — Rot ist in dieser Branche die
   Signalfarbe des Rettungsdienstes (s. CLAUDE.md). */
.aw__antwort[data-ton="gut"]{ border-left:3px solid #1E7A46; background:#F1F8F3; }
.aw__antwort[data-ton="stopp"]{ border-left:3px solid #8A6D3B; background:#FBF6EC; }
.aw__antwort[data-ton="leer"]{ border-left:3px solid var(--c-line); }
.aw__antwort[data-ton]{ padding:.7rem .85rem; border-radius:0 6px 6px 0; }

/* Pflichtfeld-Hinweis. Auch hier kein Rot. */
.aw__hinweis{ margin:.6rem 0 0; font-size:.86rem; color:#8A4E2B; font-weight:600; }

/* ── Anfrage-Formular: Bedienkomfort ─────────────────────────────────────────
   Publikum sind überwiegend ältere Menschen und Angehörige unter Zeitdruck.
   Alles hier dient dem einen Zweck: weniger Unsicherheit pro Schritt. */

/* Schrittanzeiger. Die erste Fassung war ein 3px-Strich mit 14% Deckkraft direkt
   unter der Kopfzeile — der las sich als Trennlinie, und der Kunde hat ihn schlicht
   nicht gesehen. Jetzt beschriftet: er zeigt nicht nur wo man ist, sondern auch was
   noch kommt. Das nimmt die Sorge „wie lang wird das noch". */
.aw__stufen{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr);
  gap:.4rem; margin:0 0 var(--sp-2); padding:0; }
.aw__stufen li{ display:flex; align-items:center; gap:.4rem;
  font:600 .78rem/1.2 var(--font-display); color:var(--c-text-mute);
  padding-top:.5rem; border-top:3px solid var(--c-line);
  transition:color .2s, border-color .2s; }
.aw__stufen{ counter-reset:stufe; }
.aw__stufen li::before{
  counter-increment:stufe; content:counter(stufe);
  display:grid; place-items:center; width:1.25rem; height:1.25rem; flex:0 0 auto;
  border-radius:50%; background:var(--c-line); color:#fff;
  font-size:.7rem; font-variant-numeric:tabular-nums; }
.aw__stufen .ist-aktiv{ color:var(--c-primary-700); border-top-color:var(--c-primary); }
.aw__stufen .ist-aktiv::before{ background:var(--c-primary); }
.aw__stufen .ist-fertig{ color:var(--c-primary); border-top-color:var(--c-primary); }
/* Erledigte Schritte tragen einen Haken statt der Nummer */
.aw__stufen .ist-fertig::before{ content:"✓"; background:var(--c-primary); }

/* Zusammenfassung in Schritt 3 mit Änderungslink */
.aw__rueckblick{ display:flex; align-items:baseline; justify-content:space-between;
  gap:.7rem; background:var(--c-papier); border-radius:8px;
  padding:.6rem .75rem; margin-bottom:var(--sp-2); }
.aw__rueckblick p{ margin:0; font-size:.84rem; line-height:1.45; color:var(--c-text-mute); }
.aw__aendern{ flex:0 0 auto; background:none; border:0; padding:0; cursor:pointer;
  font:600 .82rem/1 var(--font-display); color:var(--c-primary);
  text-decoration:underline; text-underline-offset:3px; }
.aw__aendern:hover{ color:var(--c-primary-700); }

/* Erläuterung unter einer Auswahl (z. B. bei „Regelmäßig") */
.aw__notiz{ margin:0 0 .6rem; font-size:.84rem; line-height:1.5; color:var(--c-text-mute); }

.aw__f--kurz{ max-width:11rem; margin-top:var(--sp-2); }
.aw__f em{ font-style:normal; font-weight:400; opacity:.65; }

/* Fehlende Pflichtangabe wird AM FELD markiert, nicht nur als Satz darunter.
   Bewusst kein Rot — Rot ist in dieser Branche die Signalfarbe des Rettungsdienstes
   (s. CLAUDE.md). Bernstein trägt die Warnung ohne den falschen Beiklang. */
.aw input.ist-leer{ --aw-rand:#B8863B; --aw-ring:0 0 0 3px rgba(184,134,59,.20); }

/* ── Touch-Ziele im Formular ─────────────────────────────────────────────────
   Gemessen am 10.09.2026: 10 von 15 Auswahlflächen waren unter 40px hoch. Für ein
   überwiegend älteres Publikum am Telefon ist das der wichtigste Komfortpunkt —
   Apple nennt 44px, WCAG 2.5.8 mindestens 24px. Zittrige Finger treffen 30px nicht.
   Die Fläche wächst, die Schrift bleibt: es geht um Treffsicherheit, nicht um Größe. */
.aw [data-frage] label,
.aw__arten label{
  min-height:44px;
  display:flex; align-items:center; justify-content:center;
  padding-block:.5rem;
}
/* Die Kacheln mit Unterzeile richten links aus — zentriert bricht der Zweizeiler unruhig */
.aw__seg--spalten label{ justify-content:flex-start; text-align:left; }
.aw__seg--spalten label > span{ width:100%; }

/* Auch die Checkboxen: die Klickfläche ist das ganze Label, nicht nur das Kästchen */
.aw__check{ min-height:44px; display:flex; align-items:center; gap:.6rem; }

/* ── Adressvervollständigung ─────────────────────────────────────────────────
   Eigene Liste statt <datalist>: Die native Variante sieht in jedem Browser
   anders aus, lässt sich nicht gestalten und zeigt keine Zusatzzeile (Ort zur
   Klinik). Für dieses Publikum zählt genau die Zusatzzeile. */
.aw__f--vor{ position:relative; }
.aw__liste{
  position:absolute; z-index:20; left:0; right:0; top:100%; margin:.25rem 0 0; padding:.25rem;
  list-style:none; background:var(--c-white); border:1px solid var(--c-line);
  border-radius:10px; box-shadow:0 8px 24px rgba(16,32,48,.13);
  max-height:16rem; overflow-y:auto;
}
.aw__liste li{
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  padding:.6rem .7rem; border-radius:7px; cursor:pointer; min-height:44px;
}
.aw__liste li b{ font-weight:600; font-size:.95rem; color:var(--c-ink); }
.aw__liste li small{ font-size:.8rem; color:var(--c-text-mute); }
.aw__liste li:hover,
.aw__liste li[aria-selected="true"]{ background:var(--c-papier); }
.aw__liste li[aria-selected="true"] b{ color:var(--c-primary-700); }

/* Zeitfeld mit „steht noch nicht fest" daneben */
.aw__zeit{ display:flex; align-items:flex-end; gap:var(--sp-2); flex-wrap:wrap;
  margin-top:var(--sp-2); }
.aw__check--neben{ margin:0; }
.aw input:disabled{ opacity:.5; cursor:not-allowed; background:var(--c-papier); }

/* Namensnennung der Kartendaten. Erscheint erst, wenn wirklich fremde Vorschläge
   angezeigt wurden — vorher wäre sie eine Behauptung über etwas, das nicht stattfand. */
.aw__quelle{ margin:.5rem 0 0; font-size:.72rem; color:var(--c-text-mute); opacity:.75; }

/* ═══ GLANZ-PASS ════════════════════════════════════════════════════════════
   Kundenwunsch 10.09.2026: „ein bisschen zum Strahlen bringen". Das ist KEIN
   Widerspruch zum Ruhe-Pass — nichts kommt hinzu, alles wird verfeinert. Vier
   Hebel, alle unaufdringlich:
     1. Schatten, die wie Licht wirken statt wie ein grauer Rand
     2. die dunklen Flächen bekommen Tiefe statt Volltonfarbe
     3. Bilder mit weicherem Übergang und feiner Kante
     4. Bedienelemente reagieren spürbar, aber ruhig
   Alles respektiert prefers-reduced-motion (Regel steht weiter oben).
   ─────────────────────────────────────────────────────────────────────────── */

/* 1 ── Licht statt Rand. Ein Schatten aus mehreren Lagen mit steigender Weichheit
        liest sich als Höhe; eine einzelne Lage liest sich als Umrandung. */
:root{
  --schatten-1: 0 1px 2px rgba(16,32,48,.05), 0 2px 6px rgba(16,32,48,.045);
  --schatten-2: 0 2px 4px rgba(16,32,48,.05), 0 8px 18px rgba(16,32,48,.06),
                0 18px 40px rgba(16,32,48,.05);
  --schatten-3: 0 4px 10px rgba(0,67,127,.10), 0 18px 44px rgba(0,67,127,.12);
}
.v3__txt, .v3 .aw{ box-shadow:var(--schatten-2); }
.faq__i[open]{ box-shadow:var(--schatten-1); }
.aw__liste{ box-shadow:var(--schatten-2); }

/* 2 ── Tiefe in den dunklen Flächen. Ein Volltonblau wirkt flach; ein sehr flacher
        Verlauf mit einem Hauch Licht an der Oberkante gibt ihm Körper. Der Unterschied
        ist einzeln kaum zu benennen und in der Summe deutlich sichtbar. */
.teilung__kasse, .aussage__txt, .schluss, .faq__hilfe{
  background-image:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%);
}
.schluss{ position:relative; }
/* Feine Lichtkante an der Oberkante der dunklen Bänder */
.aussage__txt::before, .schluss::before{
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.aussage__txt{ position:relative; }

/* 3 ── Bilder: feine Innenkante, damit helle Motive nicht ausfransen, und ein
        weicherer Übergang beim Heranzoomen. */
.ziel__bild, .kosten__bild img, .gruende-bild img, .art__bild, .v3__bild{
  position:relative; box-shadow:inset 0 0 0 1px rgba(16,32,48,.06);
}
.v3__bild{ box-shadow:inset 0 0 0 1px rgba(16,32,48,.06), var(--schatten-1); }
.ziel__bild img{ transition:transform .6s cubic-bezier(.16,.8,.24,1); }

/* 4 ── Bedienelemente reagieren. Ruhig, aber spürbar: der Knopf hebt sich leicht,
        der Schatten wächst mit. Ohne Rückmeldung wirkt eine Seite tot, egal wie
        sauber sie gesetzt ist. */
.btn{ transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease,
                 background-color .16s ease, color .16s ease; }
.btn--primary{ box-shadow:var(--schatten-1); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:var(--schatten-3); }
.btn--primary:active{ transform:translateY(0); box-shadow:var(--schatten-1); }
.btn--ghost:hover{ transform:translateY(-1px); }

.kachel, .blatt{ transition:transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .16s ease; }
.blatt:hover{ transform:translateY(-2px); box-shadow:var(--schatten-2); }

/* Auswahlflächen im Formular: die getroffene Wahl darf man sehen */
.aw__arten input:checked + span,
.aw [data-frage] input:checked + span{ box-shadow:var(--schatten-1); }

/* 5 ── Fokus sichtbar UND schön. Ein Fokusring gehört zur Bedienbarkeit; ein
        hässlicher wird abgeschaltet, und dann fehlt er. Also einer, der passt. */
:focus-visible{ outline:3px solid var(--c-primary); outline-offset:2px; border-radius:4px; }
/* Innenschatten bleibt im Fokus erhalten — ohne ihn „springt" das Feld beim Hineinklicken
   sichtbar in der Tiefe. Der Ring kommt additiv dazu. */
.aw input:focus{ --aw-rand:var(--c-primary); --aw-ring:0 0 0 3px rgba(0,94,184,.20); outline:none; }

/* 6 ── Überschriften optisch ausgleichen: große Grade vertragen engere Laufweite,
        kleine brauchen Luft. Das ist der Unterschied zwischen „gesetzt" und „getippt". */
h1{ letter-spacing:-.028em; }
h2{ letter-spacing:-.021em; }
h3{ letter-spacing:-.012em; }
.teilung__gross, .teilung__betrag, .aussage blockquote p{ letter-spacing:-.022em; }

/* ── Stadtseite ──────────────────────────────────────────────────────────────
   Die Sektionen, die es nur hier gibt. Alles andere teilt sich die Stadtseite
   mit Startseite und Leistungsseiten — ein zweites Formenvokabular für 223
   Seiten wäre der sichere Weg, die Site auseinanderfallen zu lassen. */

.sek__kopf--breit{ max-width:72ch; }
.sek__kopf--breit p{ margin:0 0 .9rem; line-height:1.7; }

/* Fahrtziele: drei Gruppen nebeneinander, Name links, Entfernung rechts.
   Die Entfernung ist die Information, die den Unterschied macht — sie steht
   deshalb in eigener Spalte und nicht in Klammern hinter dem Namen. */
.orte-gruppen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3); align-items:start; }
.orte-gruppe h3{ margin:0 0 .7rem; font-size:.95rem; font-weight:600;
  color:var(--c-text-mute); padding-bottom:.45rem;
  border-bottom:1px solid rgba(0,67,127,.14); }
.orte-liste{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.orte-liste li{ display:grid; gap:.1rem; }
.orte-liste__n{ font-weight:600; font-size:.95rem; line-height:1.35;
  color:var(--c-primary-700); }
.orte-liste__d{ font-size:.83rem; color:var(--c-text-mute);
  font-variant-numeric:tabular-nums; }
.orte-fuss{ margin:var(--sp-3) 0 0; font-size:.82rem; color:var(--c-text-mute); }
@media(max-width:860px){ .orte-gruppen{ grid-template-columns:1fr; } }

/* Artikel: der einzige längere Fließtext der Seite. Enge Zeilenlänge und viel
   Luft über den H3 — sonst liest sich das als Wand, egal wie gut der Text ist. */
.artikel{ max-width:72ch; }
.artikel h3{ margin:var(--sp-4) 0 .6rem; font-size:1.12rem; }
.artikel h3:first-child{ margin-top:0; }
.artikel p{ margin:0 0 .95rem; line-height:1.75; }
.artikel ul:not(.check-list){ margin:0 0 .95rem; padding-left:1.2rem; }
.artikel li{ margin-bottom:.4rem; line-height:1.65; }
.artikel strong{ color:var(--c-primary-700); }

/* Ortsteile als ruhige Chipreihe. 25 Zeilen untereinander wären eine Liste,
   die niemand liest; als Fläche sieht man auf einen Blick „mein Viertel ist dabei". */
.ortsteile{ list-style:none; display:flex; flex-wrap:wrap; gap:.45rem;
  margin:0; padding:0; }
.ortsteile li{ font-size:.88rem; color:var(--c-primary-700); background:var(--c-white);
  border-radius:999px; padding:.42rem .85rem; box-shadow:var(--schatten-1); }

/* ═══ FEINSCHLIFF ══════════════════════════════════════════════════════════
   Kundenkritik 11.09.2026: „wirkt klobig und einfach — cleaner, feiner".
   Gemessen war die Ursache NICHT die Lesetypografie, sondern die Hülle:
   Radien von 12px an jedem Element, Knöpfe mit 0,95rem Innenabstand, und ein
   Größenabstand zwischen Grundschrift (17px) und H2 von nur gut dem Doppelten.

   Die Lesetexte bleiben groß — das Publikum ist überwiegend älter, und eine
   Seite kleiner zu setzen wäre hier der falsche Weg zu „fein". Kleiner wird,
   was NICHT gelesen, sondern nur bedient wird: Knöpfe, Chips, Etiketten, Nav.
   Und der Größenabstand wächst, weil er Hierarchie macht, nicht Größe.
   ────────────────────────────────────────────────────────────────────────── */

/* 1 ── Radien zurücknehmen. 12px an jeder Kante ist das, was „klobig" erzeugt. */
:root{ --r-sm: 5px; --r-md: 9px; --r-lg: 16px; }
.kachel,.blatt,.faq__i,.ziel__bild,.kosten__bild img,.gruende-bild img,.faq__hilfe,
.vgl__sp,.frage__i,.aw__liste,.aw__rueckblick{ border-radius:9px; }
.teilung{ border-radius:11px; }

/* 2 ── Mehr Abstand zwischen den Graden. Hierarchie entsteht durch Kontrast,
        nicht durch Größe: die H1 wächst, der Fließtext bleibt. */
h1{ font-size:clamp(2rem,5vw,3.35rem); letter-spacing:-.032em; line-height:1.08; }
h2{ font-size:clamp(1.5rem,3.2vw,2.3rem); letter-spacing:-.024em; line-height:1.15; }
h3{ font-size:clamp(1.08rem,1.7vw,1.28rem); letter-spacing:-.011em; }

/* 3 ── Bedienelemente schlanker. Sie werden angeklickt, nicht gelesen. */
.btn{ font-size:.97rem; padding:.82rem 1.25rem; }
.btn--lg{ font-size:1.02rem; padding:.95rem 1.5rem; }
.nav a{ font-size:.95rem; }
.quer li a,.zielarten li,.ortsteile li{ font-size:.85rem;
  padding-block:.36rem; }

/* 4 ── Feinere Linien. Ein Rahmen soll die Fläche begrenzen, nicht sie umranden. */
:root{ --c-line: #E4E9EF; }
.kachel{ padding:1.1rem 1.2rem; }
/* Icons GRÖSSER, nicht kleiner (Kundenhinweis 11.09.2026). Im Feinschliff hatte ich
   sie verkleinert — falscher Hebel: klobig wirkten die Radien und Knöpfe, nicht die
   Zeichen. Ein Glyph, das man erkennen soll, muss Fläche haben; gerade bei einem
   überwiegend älteren Publikum. */
.trust__glyph{ width:3rem; height:3rem; }
.trust__glyph svg{ width:1.6rem; height:1.6rem; stroke-width:1.5; }

/* 5 ── Etiketten kleiner und weiter gesperrt. Versalien tragen Sperrung; eng
        gesetzt wirken sie gedrungen, weit gesetzt wirken sie gesetzt. */
.label,.teilung__label,.aussage__label,.hero__eyebrow,.kachel__feld{
  font-size:.7rem; letter-spacing:.13em; }
.linie__nr{ font-size:.66rem; letter-spacing:.11em; }

/* 6 ── Der Artikel bekommt eine ruhigere Spalte und eine Einleitungszeile, die
        sich vom Rest abhebt — ein 860-Wörter-Block in einer Spalte war der
        „lange linksbündige Text", der blöd aussah. */
.artikel{ max-width:68ch; font-size:1.045rem; }
.artikel > p:first-of-type{ font-size:1.13rem; line-height:1.62; color:var(--c-ink); }
.artikel h3{ margin-top:var(--sp-4); padding-top:var(--sp-2);
  border-top:1px solid var(--c-line); }
.artikel h3:first-child{ border-top:0; padding-top:0; }

/* Ortsteile mit Text statt nur Namen. Drei Spalten, damit 25 Einträge eine Fläche
   ergeben und keine Kolonne — und damit man sein Viertel auf einen Blick findet. */
.ortsteile-karten{ columns:3 17rem; column-gap:var(--sp-3); }
.ortsteil{ break-inside:avoid; margin:0 0 var(--sp-2); padding:0 0 var(--sp-2);
  border-bottom:1px solid var(--c-line); }
.ortsteil h3{ margin:0 0 .25rem; font-size:.98rem; color:var(--c-primary-700); }
.ortsteil p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--c-text-mute); }
.ortsteil strong{ font-weight:600; color:var(--c-ink); }
@media(max-width:900px){ .ortsteile-karten{ columns:2 15rem; } }
@media(max-width:560px){ .ortsteile-karten{ columns:1; } }

.orte-bild{ margin:var(--sp-3) 0 0; }
.orte-bild img{ width:100%; height:auto; aspect-ratio:21/7; object-fit:cover;
  object-position:50% 45%; border-radius:9px; display:block;
  box-shadow:inset 0 0 0 1px rgba(16,32,48,.06); }

/* Auch die Glyphen im Linienplan mitziehen — sie gehören zur selben Zeichenfamilie
   und dürfen nicht kleiner sein als die der Trust-Leiste. */
@media(min-width:900px){
  .linie{ --marke:3.4rem; }
  .linie__marke svg{ width:1.6rem; height:1.6rem; stroke-width:1.5; }
}
@media(max-width:899px){
  .linie{ --marke:3.2rem; }
  .linie__marke svg{ width:1.5rem; height:1.5rem; stroke-width:1.5; }
}

/* ── Artikel mit Beiblatt-Spalte ─────────────────────────────────────────────
   Der Fließtext allein ließ die halbe Seitenbreite leer. Rechts stehen jetzt die
   Merkblätter — sie bleiben beim Scrollen stehen, damit man den Download nicht
   sucht, wenn man beim passenden Absatz angekommen ist. */
.artikel-paar{ display:grid; grid-template-columns:minmax(0,1fr) 19rem;
  gap:var(--sp-4); align-items:start; }
.artikel-paar .artikel{ max-width:68ch; }

.beiblatt{ position:sticky; top:calc(var(--h-header) + 1rem); display:grid; gap:var(--sp-2); }
.beiblatt__box{ background:var(--c-papier); border-radius:9px; padding:1.1rem 1.15rem; }
.beiblatt__box--ruf{ background:var(--c-primary); color:#fff;
  background-image:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%); }
.beiblatt__h{ margin:0 0 .3rem; font:700 .72rem/1 var(--font-display);
  letter-spacing:.13em; text-transform:uppercase; color:var(--c-primary); }
.beiblatt__box--ruf .beiblatt__h{ color:rgba(255,255,255,.72); }
.beiblatt__t{ margin:0 0 .8rem; font-size:.86rem; line-height:1.55; color:var(--c-text-mute); }
.beiblatt__box--ruf .beiblatt__t{ color:rgba(255,255,255,.9); }
.beiblatt__box--ruf .btn{ background:#fff; color:var(--c-primary-700); width:100%;
  text-align:center; }
.beiblatt__box--ruf .btn:hover{ background:var(--c-papier); }

.beiblatt__liste{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; }
.beiblatt__liste a{ display:grid; gap:.05rem; padding:.5rem .55rem; border-radius:6px;
  transition:background .15s; }
.beiblatt__liste a:hover{ background:var(--c-white); }
.beiblatt__liste span{ font-weight:600; font-size:.89rem; line-height:1.3;
  color:var(--c-primary-700); }
.beiblatt__liste small{ font-size:.74rem; color:var(--c-text-mute); }

@media(max-width:1000px){
  .artikel-paar{ grid-template-columns:1fr; }
  .beiblatt{ position:static; grid-template-columns:1fr 1fr; }
}
@media(max-width:620px){ .beiblatt{ grid-template-columns:1fr; } }

/* ── Linienplan nachgebessert ────────────────────────────────────────────────
   Die Streckenbeschriftung schwebte als blasser Kleintext auf einer Haarlinie —
   das las sich wie ein Versehen, nicht wie eine Beschriftung. Jetzt eine echte
   Plakette: eigene Fläche, Kontur, mehr Gewicht. Und die Linie selbst trägt
   kräftiger, damit die Plaketten darauf sitzen statt zu schweben. */
@media(min-width:900px){
  .linie__stationen::before{
    background:
      radial-gradient(circle 4px at 4px 50%, var(--c-primary) 98%, transparent) left/50% 100% no-repeat,
      radial-gradient(circle 4px at calc(100% - 4px) 50%, var(--c-primary) 98%, transparent) right/50% 100% no-repeat,
      linear-gradient(to right, rgba(0,94,184,.40), rgba(0,94,184,.40)) center/100% 2px no-repeat;
    height:8px; top:calc(var(--marke)/2 - 4px);
  }
  .linie__strecke{
    font-size:.74rem; font-weight:600; line-height:1.25;
    color:var(--c-primary-700); opacity:1;
    background:var(--c-papier);
    padding:.3rem .55rem; border-radius:999px;
    box-shadow:inset 0 0 0 1px rgba(0,94,184,.18);
  }
  /* Kappen kräftiger — sie benennen Anfang und Ende der Strecke */
  .linie__kappe{ font-size:.78rem; opacity:1; color:var(--c-primary-700); }
}
/* Schritt-Etikett und Titel enger zusammen: sie gehören zusammen, der Abstand
   zum Text darunter darf größer sein als der zwischen Nummer und Überschrift. */
.linie__nr{ margin-bottom:.05rem; }
.linie__st h3{ margin-bottom:.45rem; }

/* ── Feldsymbole ────────────────────────────────────────────────────────────
   Bewusst als CSS-Hintergrund, NICHT als zusätzliches Markup. Ein Wrapper um das
   Eingabefeld hätte die absolut positionierte Vorschlagsliste (.aw__liste, top:100%)
   aus ihrem Bezugsrahmen gehoben und die JS-Abfragen auf die Feldstruktur berührt.
   Ein Hintergrundbild kann beides nicht kaputtmachen.
   Die Symbole benennen, was ins Feld gehört — bei einer Zielgruppe, die überwiegend
   älter ist oder unter Zeitdruck steht, spart das einen Lesevorgang.
   Farbe ist fest kodiert (%234C9BD6 = --c-accent): currentColor greift in url() nicht. */
.aw input[name^="von"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-5.6-7-11a7 7 0 0 1 14 0c0 5.4-7 11-7 11z'/><circle cx='12' cy='10' r='2.6'/></svg>"); --aw-einzug:2.45rem; }
.aw input[name^="nach"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V8l8-5 8 5v13'/><path d='M12 11v5M9.5 13.5h5'/></svg>"); --aw-einzug:2.45rem; }
.aw input[name^="name"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.4'/><path d='M5 20a7 7 0 0 1 14 0'/></svg>"); --aw-einzug:2.45rem; }
.aw input[name^="tel"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h4l2 5-2.5 1.5a12 12 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/></svg>"); --aw-einzug:2.45rem; }
.aw input[name^="datum"], .aw input[name^="abdatum"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2.5'/><path d='M3.5 10h17M8 3.5v3M16 3.5v3'/></svg>"); --aw-einzug:2.45rem; }
/* Die Abholzeit bekommt dasselbe Uhrsymbol wie die Terminzeit — sie standen sonst
   direkt untereinander, eines mit und eines ohne Symbol. */
.aw input[name^="abhol"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>"); --aw-einzug:2.45rem; }
.aw input[name^="zeit"]{ --aw-ikone:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C9BD6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>"); --aw-einzug:2.45rem; }
/* Datums- und Zeitfelder zeigen rechts ihren eigenen Browser-Knopf — links bleibt frei. */
.aw input[type=date], .aw input[type=time]{ padding-right:.6rem; }
/* Auf sehr schmalen Geräten kein Symbol: der eingegebene Wert würde sonst darauf laufen. */
@media(max-width:360px){
  .aw input[name^="von"], .aw input[name^="nach"], .aw input[name^="name"],
  .aw input[name^="tel"]{ --aw-ikone:none; --aw-einzug:.85rem; }
}

/* ── Mehrfachfahrten und Serientermine (14.09.2026) ─────────────────────────
   Die wiederholbaren Zeilen sind bewusst RUHIGER gestaltet als der Hauptteil des
   Formulars: sie sind die Ausnahme, nicht der Normalfall. Wer nur eine Fahrt braucht,
   soll sie gar nicht erst wahrnehmen. */
.aw__mehr{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.2rem;
  background:none; border:1px dashed #C9D2DB; border-radius:10px;
  padding:.6rem .9rem; min-height:44px; cursor:pointer;
  font:600 .88rem/1 var(--font-display); color:var(--c-primary);
}
.aw__mehr:hover{ border-color:var(--c-primary); background:var(--c-papier); }
.aw__zeile{
  border:1px solid var(--c-line); border-radius:12px; padding:.9rem;
  margin-bottom:.7rem; background:var(--c-papier);
}
.aw__zeile .aw__f{ margin-bottom:.6rem; }
.aw__zeile .aw__f:last-of-type{ margin-bottom:0; }
.aw__zeile-kopf{
  display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  margin:0 0 .6rem; font:600 .86rem/1 var(--font-display); color:var(--c-primary-700);
}
.aw__weg{
  background:none; border:0; cursor:pointer; padding:.5rem .2rem; min-height:44px;
  font:600 .82rem/1 var(--font-display); color:var(--c-text-mute); text-decoration:underline;
}
.aw__weg:hover{ color:#8A4B2A; }
.aw__row3{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:.5rem; }
@media(max-width:520px){ .aw__row3{ grid-template-columns:1fr 1fr; } }
/* Wochentage: sieben kleine Schalter, die zusammen in eine Zeile passen müssen. */
.aw__tage{ border:0; padding:0; margin:0 0 .85rem; }
.aw__tage legend{ font:600 .82rem/1 var(--font-display); color:var(--c-text-mute);
  padding:0; margin-bottom:.4rem; }
.aw__tage em{ font-style:normal; font-weight:400; opacity:.7; }
.aw__tage label{ display:inline-block; }
.aw__tage input{ position:absolute; opacity:0; width:0; height:0; }
.aw__tage span{
  display:grid; place-items:center; min-width:2.6rem; min-height:44px; padding:0 .2rem;
  border:1px solid #C9D2DB; border-radius:9px; background:var(--c-white); cursor:pointer;
  font:600 .86rem/1 var(--font-display); color:var(--c-text-mute); margin-right:.3rem;
  box-shadow:0 1px 2px rgba(16,32,48,.05);
}
.aw__tage input:checked + span{ background:var(--c-primary); border-color:var(--c-primary);
  color:var(--c-white); }
.aw__tage input:focus-visible + span{ outline:3px solid var(--c-primary); outline-offset:2px; }
/* Auswahlliste wie die Textfelder gestalten — native selects sind ein wiederkehrender
   Kritikpunkt und fallen sonst als einziges Element aus der Gestaltung heraus. */
.aw select{
  font:400 1rem/1.2 var(--font-body); color:var(--c-text); width:100%;
  background-color:var(--c-white); border:1px solid var(--aw-rand,#C9D2DB); border-radius:10px;
  padding:.78rem 2.4rem .78rem .85rem; box-shadow:inset 0 1px 2px rgba(16,32,48,.06);
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5058' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:1.1rem;
}
.aw select:focus{ --aw-rand:var(--c-primary); outline:none;
  box-shadow:inset 0 1px 2px rgba(16,32,48,.04), 0 0 0 3px rgba(0,94,184,.20); }
.aw select.ist-leer{ --aw-rand:#B8863B;
  box-shadow:inset 0 1px 2px rgba(16,32,48,.04), 0 0 0 3px rgba(184,134,59,.20); }
.aw__notiz--neben{ align-self:center; margin:0; }
.aw__weitere{ margin:.9rem 0 .2rem; }

/* Die Entfernen-Schaltfläche der Terminzeile rechts ausrichten — sie gehört zur Zeile,
   nicht zum letzten Feld. */
.aw__zeile > .aw__weg{ display:block; margin-left:auto; }
/* Auf ganz schmalen Geräten bleiben die drei Felder untereinander lesbar; ab 380 px
   passen Tag und die beiden Uhrzeiten nebeneinander. */
@media(max-width:379px){ .aw__row3{ grid-template-columns:1fr; } }

/* Fußzeile der wiederholbaren Zeile: Rückfahrt-Häkchen links, Entfernen rechts. */
.aw__zeile-fuss{ display:flex; justify-content:space-between; align-items:center;
  gap:.8rem; flex-wrap:wrap; margin-top:.2rem; }
.aw__zeile-fuss .aw__check{ padding-bottom:0; margin:0; }
.aw__zeile > .aw__weg{ margin-left:auto; }
.aw__zeile-fuss > .aw__weg{ margin-left:0; }

/* ── Feinschliff Formular, 15.09.2026 ────────────────────────────────────────
   Zwei Kundenbefunde: die drei Felder einer Terminzeile standen „unschön versetzt",
   und der Serien-Block wirkte „gequetscht und plump". */

/* Unten ausrichten statt strecken. Damit stehen die Felder auf EINER Linie, auch wenn
   eine Beschriftung einmal umbricht — das ist der Fall, den eine feste Höhe allein
   nicht abfängt. */
.aw__row3{ align-items:end; gap:.6rem; }
.aw__row3 .aw__f > span{ min-height:1.1rem; }

/* Luft zwischen den Gruppen des Serien-Blocks. Vorher klebte jede Beschriftung direkt
   unter dem Feld der vorigen Gruppe — daher der gequetschte Eindruck. */
.aw .aw__folge > * + *{ margin-top:1.15rem; }
.aw .aw__folge > .aw__notiz + *{ margin-top:.95rem; }

/* Wochentage als Pillen statt Kästchen — dieselbe Form wie die Ja/Nein-Schalter, und
   deutlich leichter als sieben eckige Blöcke nebeneinander. */
/* Abstände hier explizit, nicht über `.aw__folge > * + *`: die frühere Deklaration
   `.aw__tage{margin:0 0 .85rem}` hat gleiche Spezifität, und wer am Ende gewinnt, hängt
   dann nur noch an der Zeilennummer. Explizit ist überprüfbar. */
/* `.aw .aw__tage`, nicht `.aw__tage`: der Reset `.aw fieldset{margin:0}` hat die
   Spezifität (0,1,1) und schlägt eine einzelne Klasse (0,1,0) — unabhängig davon, wer
   weiter unten steht. Genau daran ist der Abstand zweimal gescheitert. */
.aw .aw__tage{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.15rem 0 0; }
.aw__tage legend{ width:100%; margin-bottom:.55rem; }
.aw__tage label{ display:block; }
.aw__tage span{
  border-radius:999px; min-width:3rem; margin-right:0;
  background:var(--c-papier); border-color:#D3DAE2;
}
.aw__tage input:checked + span{ box-shadow:0 1px 2px rgba(0,67,127,.22); }

/* Die Zeilen der Mehrfachtermine etwas großzügiger. */
.aw__zeile{ padding:1rem; }
.aw__zeile-kopf{ margin-bottom:.75rem; }
.aw__zeile-fuss{ margin-top:.75rem; }

/* Innerhalb der dreispaltigen Zeile KEIN Eigenabstand an den Feldern.
   `.aw__zeile .aw__f{margin-bottom:.6rem}` stammt vom gestapelten Layout. Im Raster zählt
   dieser Außenabstand zur Größe des Rasterelements — nur das letzte Feld ist davon
   ausgenommen (`:last-of-type`), also stand genau dieses eine 9,6 px tiefer als die
   anderen beiden. Den Abstand macht hier `gap`. */
.aw__row3 .aw__f, .aw__row3 .aw__f:last-of-type{ margin-bottom:0; }

/* Der Zusatz „(optional)" soll die Beschriftung nicht auf zwei Zeilen treiben. */
.aw__f > span em{ white-space:nowrap; }

/* ── Fahrtziele als Karten (16.09.2026) ──────────────────────────────────────
   Vorher: drei nackte Textspalten, Name blau, Entfernung als grauer Kleintext
   darunter, dazu eine Haarlinie unter der Gruppenüberschrift. Der inhaltlich
   wertvollste Block der Stadtseite — recherchierte Häuser mit Namen — sah aus wie
   ein Inhaltsverzeichnis. Jetzt: Glyph je Gruppe, Einträge als Karten, Entfernung
   als Plakette. „am Ort" bekommt die kräftige Variante: das ist die stärkste
   Aussage der Sektion und stand vorher am schwächsten da. */
.orte-gruppe h3{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 .85rem; padding:0; border-bottom:0;
  font-size:.92rem; font-weight:700; color:var(--c-primary-700);
  letter-spacing:-.005em;
}
.orte-gruppe__glyph{
  flex:0 0 auto; width:2.1rem; height:2.1rem; display:grid; place-items:center;
  border-radius:8px; background:var(--c-white); color:var(--c-primary);
  box-shadow:inset 0 0 0 1px rgba(0,94,184,.16);
}
.orte-gruppe__glyph svg{ width:1.15rem; height:1.15rem; }
.orte-gruppe__n{
  margin-left:auto; font-size:.74rem; font-weight:600; color:var(--c-text-mute);
  background:var(--c-white); border-radius:999px; padding:.18rem .5rem;
  box-shadow:inset 0 0 0 1px var(--c-line); font-variant-numeric:tabular-nums;
}
.orte-liste{ gap:.4rem; }
.orte-liste li{
  display:grid; gap:.35rem; background:var(--c-white); border-radius:9px;
  padding:.7rem .8rem; box-shadow:inset 0 0 0 1px rgba(16,32,48,.06);
}
.orte-liste__n{ font-size:.92rem; color:var(--c-ink); font-weight:600; }
.orte-liste__d{
  justify-self:start; font-size:.74rem; font-weight:600; line-height:1;
  color:var(--c-text-mute); background:var(--c-papier);
  border-radius:999px; padding:.3rem .55rem;
  box-shadow:inset 0 0 0 1px var(--c-line);
}
.orte-liste__d--hier{
  color:var(--c-primary-700); background:var(--c-flaeche);
  box-shadow:inset 0 0 0 1px rgba(0,94,184,.22);
}
/* Auf der Papierfläche der Sektion brauchen die Karten keinen zusätzlichen Schatten —
   der Kontrast weiß auf papier trägt allein. */
.sek--papier .orte-liste li{ box-shadow:inset 0 0 0 1px rgba(16,32,48,.05); }

/* Beide Uhrzeiten nebeneinander (16.09.2026). Sie gehören zusammen — Abholung und Termin
   sind zwei Enden derselben Angabe — und untereinander war der Block unnötig hoch. */
.aw__zeiten{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-items:end; }
.aw__zeiten .aw__f > span{ min-height:1.1rem; }
@media(max-width:400px){ .aw__zeiten{ grid-template-columns:1fr; } }

/* ── Ratgeber-Teaser ohne Bild (Stadtseiten) ─────────────────────────────────
   Drei Karten in einer Reihe, nur Text. Auf Stadtseiten steht der Block weit unten;
   drei zusätzliche Bilder dort kosten Ladezeit, ohne etwas zu erklären. */
.teaser-reihe{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-2); align-items:stretch; }
.teaser{ display:block; background:var(--c-white); border-radius:9px; padding:1.1rem 1.2rem;
  box-shadow:inset 0 0 0 1px rgba(16,32,48,.07); transition:box-shadow .16s, transform .16s; }
.teaser:hover{ transform:translateY(-2px); box-shadow:var(--schatten-2); }
.teaser h3{ margin:0 0 .4rem; font-size:1rem; line-height:1.35; color:var(--c-primary-700); }
.teaser p{ margin:0 0 .6rem; font-size:.89rem; line-height:1.6; color:var(--c-text-mute); }
@media(max-width:860px){ .teaser-reihe{ grid-template-columns:1fr; } }

/* ── Blog-Index und Beitrag ──────────────────────────────────────────────────*/
.blatt-gitter{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-3); }
@media(max-width:900px){ .blatt-gitter{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px){ .blatt-gitter{ grid-template-columns:1fr; } }
.blatt{ display:block; background:var(--c-white); border-radius:9px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(16,32,48,.07); }
.blatt img{ width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.blatt__txt{ padding:1rem 1.1rem 1.2rem; }
.blatt__txt h3{ margin:0 0 .4rem; font-size:1.02rem; line-height:1.35; color:var(--c-primary-700); }
.blatt__txt p{ margin:0 0 .65rem; font-size:.89rem; line-height:1.6; color:var(--c-text-mute); }
.blatt__mehr{ font:600 .84rem/1 var(--font-display); color:var(--c-primary); }

.wrap--schmal{ max-width:52rem; }
.beitrag{ padding-top:var(--sp-4); }
.beitrag__weg{ font-size:.82rem; color:var(--c-text-mute); margin-bottom:.9rem; }
.beitrag__weg a{ color:var(--c-primary); }
.beitrag h1{ margin-bottom:.6rem; }
.beitrag__lede{ font-size:1.13rem; line-height:1.62; color:var(--c-ink); margin:0 0 .7rem; }
.beitrag__meta{ font-size:.82rem; color:var(--c-text-mute); margin:0 0 var(--sp-3); }
.beitrag__bild{ margin:0 0 var(--sp-4); }
.beitrag__bild img{ width:100%; height:auto; aspect-ratio:16/7; object-fit:cover; display:block; }
.beitrag__paar{ display:grid; grid-template-columns:minmax(0,1fr) 17rem; gap:var(--sp-4);
  align-items:start; }
@media(max-width:940px){ .beitrag__paar{ grid-template-columns:1fr; } }
.beitrag__faq, .beitrag__weiter{ margin-top:var(--sp-4); }
.beitrag__faq h2, .beitrag__weiter h2{ margin-bottom:var(--sp-2); }
.sek--kopf{ padding-bottom:0; }

/* Landkreis als Gliederung, nicht als Link — es gibt keine Landkreisseiten. Optisch soll
   der Eintrag trotzdem wie zuvor in der Liste stehen. */
.gebiet__kreis{ display:flex; justify-content:space-between; gap:.8rem; width:100%;
  color:var(--c-text); }
.gebiet__kreis span{ color:var(--c-text-mute); font-variant-numeric:tabular-nums; }