/* =====================================================================
   krankenhausversicherung-24.de
   Grundlage: Design-Entwurf C ("warm und zugaenglich").
   Ein Krankenhausaufenthalt macht Menschen Angst - die Gestaltung soll
   beruhigen statt einzuschuechtern: runde Formen, Salbeigruen und Sand,
   groessere Schrift, weiche Schatten.
   ===================================================================== */

/* ==========================================================================
   Entwurf C — "warm und zugänglich"
   Gestaltungsidee: Ein Krankenhausaufenthalt ist ein Angstthema. Die Seite
   soll deshalb beruhigen statt zu imponieren: gedecktes Salbeigrün/Petrol als
   Leitfarbe, ein warmer Sandton als zweite Fläche, weiße Karten mit sehr
   weichen Schatten, durchgehend runde Ecken. Nichts sticht, nichts schreit.
   ========================================================================== */

/* --- Farb- und Maßtokens -------------------------------------------------
   Das Petrol ist bewusst dunkel gewählt (#2F6156). Helle Grüntöne wirken auf
   Weiß freundlich, fallen aber im Kontrast durch; dieser Ton erreicht gegen
   Weiß rund 7:1 und ist damit auch für Fließtext und Buttons sicher.        */
:root{
  --petrol:        #2F6156;   /* Leitfarbe: Überschriften, Buttons, Icons   */
  --petrol-dunkel: #24493F;   /* Hover-Zustand, Fußbereich                  */
  --petrol-hell:   #DCE9E2;   /* Icon-Kreise, zarte Flächen                 */
  --sand:          #F8F1E5;   /* warme zweite Fläche zwischen den Abschnitten */
  --sand-tief:     #F0E4D1;   /* Rahmen und Trenner auf Sand                */
  --terracotta:    #B4552B;   /* Akzent für die eine wichtige Zahl          */
  --text:          #2B3A35;   /* Fließtext, sehr dunkles Grün statt Schwarz */
  --text-leise:    #55645E;   /* Nebentext, noch AA-sicher auf Weiß         */
  --weiss:         #FFFFFF;
  --linie:         #E4EAE7;

  /* Radien: 14–20px. Runde Formen wirken freundlicher als scharfe Kanten,
     große Flächen bekommen den größeren Radius.                            */
  --r-klein: 14px;
  --r-gross: 20px;

  /* Schatten sehr weich und flach — sie sollen Tiefe andeuten, nicht das
     Element vom Hintergrund abheben.                                       */
  --schatten:      0 2px 4px rgba(38,72,62,.04), 0 10px 26px rgba(38,72,62,.06);
  --schatten-hoch: 0 4px 8px rgba(38,72,62,.06), 0 16px 36px rgba(38,72,62,.10);

  --breite: 1120px;
}

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

/* Das hidden-Attribut muss staerker sein als die Anzeigeart eines Bausteins:
   .knopf traegt display:inline-flex und wuerde sonst sichtbar bleiben. */
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

/* Grundschrift bewusst größer als üblich (17.5px) und mit viel Zeilenhöhe:
   Der Text soll ohne Anstrengung lesbar sein, auch für ältere Besucher.     */
body{
  margin:0;
  font-family:"Nunito Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size:17.5px;
  line-height:1.72;
  color:var(--text);
  background:var(--weiss);
  overflow-x:hidden;            /* Sicherung gegen horizontales Scrollen    */
}

img,svg{ max-width:100%; }

h1,h2,h3{
  line-height:1.25;
  color:var(--petrol-dunkel);
  margin:0 0 .6em;
  letter-spacing:-.01em;
}

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--petrol); }

/* Innenabstand 20px links/rechts — ab 360px bleibt so überall Luft.         */
.huelle{
  width:100%;
  max-width:var(--breite);
  margin:0 auto;
  padding:0 20px;
}

/* Für Screenreader sichtbare, optisch ausgeblendete Abschnittsüberschriften */
.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;
}

/* Deutlich sichtbarer Tastaturfokus in der Leitfarbe                        */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--petrol);
  outline-offset:3px;
  border-radius:6px;
}

/* --- Kopfbereich ---------------------------------------------------------
   Schlicht und weiß, damit der Einstieg ruhig bleibt; nur eine feine Linie
   trennt ihn vom Inhalt.                                                    */
.kopf{
  background:var(--weiss);
  border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:20;
}
.kopf__innen{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 24px;
  padding-top:14px;
  padding-bottom:14px;
}
.marke{
  font-weight:800;
  font-size:1.02rem;
  color:var(--petrol-dunkel);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-right:auto;
}
/* Kleines Kreuz-im-Kreis als Wortmarken-Zeichen, selbst gezeichnet          */
.marke__zeichen{
  width:34px;height:34px;
  flex:0 0 34px;
  border-radius:50%;
  background:var(--petrol-hell);
  color:var(--petrol);
  display:grid;place-items:center;
}

.nav{ }
.nav ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 4px;
  margin:0;padding:0;
}
.nav a{
  display:block;
  padding:8px 13px;
  border-radius:999px;          /* Pillen statt Reiter — weichere Anmutung  */
  color:var(--text-leise);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
}
.nav a:hover{ background:var(--petrol-hell); color:var(--petrol-dunkel); }

/* --- Schaltflächen -------------------------------------------------------
   Vollrunde Kapselform; der Hauptknopf trägt die Leitfarbe, der Nebenknopf
   nur eine Kontur, damit klar ist, was der wichtigere Weg ist.              */
.knopf{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.knopf--haupt{
  background:var(--petrol);
  color:var(--weiss);
  box-shadow:0 6px 18px rgba(47,97,86,.25);
}
.knopf--haupt:hover{ background:var(--petrol-dunkel); transform:translateY(-1px); }
.knopf--neben{
  background:var(--weiss);
  color:var(--petrol-dunkel);
  border-color:var(--sand-tief);
}
.knopf--neben:hover{ background:var(--sand); border-color:var(--petrol-hell); }
.knopf--klein{ padding:10px 20px; font-size:.95rem; }

/* --- Kopfbereich auf schmalen Geraeten -----------------------------------
   Vorher brach die Navigation auf zwei Zeilen um und der Angebotsknopf
   verschwand ganz — bei einem klebenden Kopf kostet das ein Drittel der
   Bildflaeche und zugleich den wichtigsten Weg der Seite.

   Jetzt: Wortmarke und Knopf teilen sich die erste Zeile, die Navigation
   liegt darunter in einer einzigen Zeile, die sich seitlich schieben laesst.
   Ein Verlauf am rechten Rand zeigt an, dass dort noch etwas folgt. Ein
   Klappmenue waere bei fuenf Punkten mehr Bedienung als Nutzen.           */
@media (max-width:700px){
  .kopf__innen{gap:10px 12px;padding-top:11px;padding-bottom:9px}
  /* Die Wortmarke ist der Domainname und damit lang. Sie wird hier so weit
     verkleinert, dass Knopf und Marke gemeinsam in eine Zeile passen —
     sonst braucht der klebende Kopf drei Zeilen. */
  .marke{font-size:.8rem;gap:7px;letter-spacing:-.005em}
  .marke__zeichen{width:26px;height:26px;flex-basis:26px}
  .marke__zeichen svg{width:15px;height:15px}
  .kopf__innen .knopf--klein{padding:9px 16px;font-size:.87rem}
  /* Textteile, die nur auf breiten Schirmen mitlaufen. */
  .nur-breit{display:none}

  /* Die Navigation steht im Quelltext vor dem Knopf; hier soll sie darunter
     liegen, damit Wortmarke und Knopf sich die erste Zeile teilen. */
  .kopf__innen .knopf--klein{order:2}
  .nav{order:3;width:100%;position:relative;margin-bottom:-2px}
  .nav ul{flex-wrap:nowrap;overflow-x:auto;gap:4px;
    padding:0 26px 4px 0;                 /* Platz fuer den Verlauf rechts */
    scrollbar-width:none;-ms-overflow-style:none}
  .nav ul::-webkit-scrollbar{display:none}
  .nav li{flex:none}
  .nav a{padding:7px 12px;font-size:.92rem;white-space:nowrap}
  .nav::after{content:"";position:absolute;right:0;top:0;bottom:4px;width:30px;
    pointer-events:none;
    background:linear-gradient(to right,rgba(255,255,255,0),#fff 70%)}
}
@media (max-width:380px){
  .marke{font-size:.74rem}
  .kopf__innen .knopf--klein{padding:9px 13px;font-size:.83rem}
}

/* --- Einstieg (Hero) -----------------------------------------------------
   Zweispaltig ab Tablet: links der Text, rechts der hervorgehobene Kasten
   mit der Zahl. Der Sandton im Hintergrund nimmt der Seite die Kühle.       */
.hero{
  background:
    radial-gradient(1000px 420px at 12% -30%, #FFFFFF 0%, rgba(255,255,255,0) 62%),
    var(--sand);
  padding:clamp(40px,7vw,78px) 0 clamp(46px,7vw,84px);
}
.hero__raster{
  display:grid;
  gap:clamp(28px,4vw,48px);
  align-items:start;
}
@media (min-width:920px){
  .hero__raster{ grid-template-columns:1.25fr .85fr; align-items:center; }
}
.hero h1{
  font-size:clamp(1.95rem,4.6vw,3.05rem);
  font-weight:800;
  margin-bottom:.5em;
  max-width:19ch;
}
@media (max-width:919px){ .hero h1{ max-width:none; } }

.hero__lead{
  font-size:clamp(1.05rem,1.6vw,1.2rem);
  color:var(--text);
  max-width:56ch;
}

.hero__knoepfe{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}
/* Auf schmalen Geraeten stehen die beiden Knoepfe untereinander. Dann
   sollen sie auch gleich breit sein — unterschiedlich lange Kapseln
   untereinander wirken unaufgeraeumt.                                       */
@media (max-width:520px){
  .hero__knoepfe{flex-direction:column;align-items:stretch}
  .hero__knoepfe .knopf{width:100%}
}

/* Vertrauenszeile als weiche Punkte-Liste — beruhigt, ohne zu werben        */
.vertrauen{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:20px 0 0;padding:0;
  font-size:.95rem;
  color:var(--text-leise);
}
.vertrauen li{ display:flex; align-items:center; gap:8px; }
.vertrauen li::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--petrol);
  flex:0 0 8px;
}

/* --- Der Kasten mit der Zahl --------------------------------------------
   Weiße Karte mit großem Radius; die 150 € stehen in Terracotta, der einzige
   warme Akzent der Seite — so bleibt die Zahl die stärkste Stelle im Bild.  */
.zahlkasten{
  background:var(--weiss);
  border-radius:var(--r-gross);
  box-shadow:var(--schatten-hoch);
  padding:clamp(24px,3.4vw,34px);
}
.zahlkasten h2{
  font-size:1rem;
  text-transform:none;
  letter-spacing:.02em;
  color:var(--text-leise);
  font-weight:700;
  margin-bottom:.4em;
}
.zahlkasten__zahl{
  font-size:clamp(2.6rem,7vw,3.6rem);
  font-weight:800;
  line-height:1.05;
  color:var(--terracotta);
  display:block;
  margin-bottom:.18em;
}
.zahlkasten p{ font-size:1.02rem; }
.zahlkasten strong{ color:var(--petrol-dunkel); }
/* Die Wochensumme als eigene, abgesetzte Zeile auf Sand                     */
.zahlkasten__woche{
  margin-top:18px;
  background:var(--sand);
  border-radius:var(--r-klein);
  padding:14px 18px;
  font-size:1rem;
}

/* --- Abschnitte ----------------------------------------------------------- */
.abschnitt{ padding:clamp(48px,7vw,86px) 0; }
.abschnitt--sand{ background:var(--sand); }
/* Folgen zwei Abschnitte derselben Farbe aufeinander, addieren sich ihre
   Innenabstaende zu einer Luecke von ueber 170 Pixeln — die Seite wirkt
   dann leer statt luftig. Zwischen gleichfarbigen Abschnitten genuegt der
   halbe Abstand; zwischen verschiedenfarbigen bleibt er voll, weil dort
   der Farbwechsel die Trennung ohnehin markiert.                          */
.abschnitt:not(.abschnitt--sand) + .abschnitt:not(.abschnitt--sand),
.abschnitt--sand + .abschnitt--sand{ padding-top:clamp(14px,2.2vw,30px); }
.abschnitt__kopf{ max-width:62ch; margin-bottom:clamp(26px,3.4vw,40px); }
.abschnitt__kopf h2{ font-size:clamp(1.5rem,3.2vw,2.15rem); font-weight:800; }

/* --- Leistungskarten -----------------------------------------------------
   Vier weiße Karten, je ein selbst gezeichnetes Symbol in einem grünen
   Kreis. Die Symbole sind rein dekorativ (aria-hidden) und nur mit dünnen,
   runden Strichen gezeichnet — passend zur weichen Gesamtanmutung.          */
.karten{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:680px){ .karten{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1020px){ .karten{ grid-template-columns:repeat(4,1fr); } }

.karte{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--r-gross);
  padding:clamp(22px,2.6vw,28px);
  box-shadow:var(--schatten);
  transition:box-shadow .2s ease, transform .2s ease;
}
.karte:hover{ box-shadow:var(--schatten-hoch); transform:translateY(-2px); }
.karte h3{ font-size:1.14rem; font-weight:700; margin-bottom:.45em; }
.karte p{ color:var(--text-leise); font-size:1rem; line-height:1.68; }

.symbolkreis{
  width:60px;height:60px;
  border-radius:50%;
  background:var(--petrol-hell);
  color:var(--petrol);
  display:grid;place-items:center;
  margin-bottom:18px;
}
.symbolkreis svg{ width:32px;height:32px; display:block; }

/* --- Die drei Entscheidungen --------------------------------------------
   Als nummerierte Schritte mit großen Ziffern in gefüllten Kreisen. Eine
   senkrechte Linie verbindet die Schritte, damit die Reihenfolge sichtbar
   wird — das nimmt dem Thema die Unübersichtlichkeit.                       */
.schritte{
  list-style:none;
  counter-reset:schritt;
  margin:0;padding:0;
  display:grid;
  gap:18px;
  max-width:880px;
}
.schritt{
  counter-increment:schritt;
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
  background:var(--weiss);
  border-radius:var(--r-gross);
  padding:clamp(20px,2.6vw,28px);
  box-shadow:var(--schatten);
}
.schritt::before{
  content:counter(schritt);
  width:52px;height:52px;
  flex:0 0 52px;
  border-radius:50%;
  background:var(--petrol);
  color:var(--weiss);
  font-weight:800;
  font-size:1.5rem;
  display:grid;place-items:center;
  line-height:1;
}
.schritt h3{ font-size:1.12rem; margin-bottom:.35em; }
.schritt p{ color:var(--text-leise); font-size:1rem; }

/* --- Ratgeber-Anrisse ---------------------------------------------------- */
.anrisse{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .anrisse{ grid-template-columns:repeat(3,1fr); } }

.anriss{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-left:5px solid var(--petrol-hell);
  border-radius:var(--r-klein);
  padding:24px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:border-left-color .2s ease, box-shadow .2s ease;
}
.anriss:hover{ border-left-color:var(--petrol); box-shadow:var(--schatten); }
.anriss h3{ font-size:1.08rem; margin-bottom:.4em; }
.anriss p{ color:var(--text-leise); font-size:1rem; margin:0; }

/* --- Fußbereich ----------------------------------------------------------
   Dunkles Petrol als ruhiger Abschluss. Die Kontaktadresse steht bewusst als
   reiner Text und ist nicht verlinkt.                                       */
.fuss{
  background:var(--petrol-dunkel);
  color:#D9E5E0;
  padding:clamp(34px,5vw,54px) 0 28px;
  margin-top:0;
}
.fuss__raster{
  display:grid;
  gap:22px;
}
@media (min-width:760px){
  .fuss__raster{ grid-template-columns:1.3fr 1fr 1fr; align-items:start; }
}
.fuss h2{ color:var(--weiss); font-size:1.02rem; margin-bottom:.5em; }
.fuss p{ font-size:1rem; margin:0 0 .4em; }
.fuss__adresse{ color:var(--weiss); font-weight:600; word-break:break-word; }
.fuss ul{ list-style:none; margin:0;padding:0; }
.fuss li{ margin-bottom:6px; }
.fuss a{ color:#D9E5E0; text-decoration:none; border-bottom:1px solid rgba(217,229,224,.35); }
.fuss a:hover{ color:var(--weiss); border-bottom-color:var(--weiss); }
.fuss__claim{
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid rgba(217,229,224,.22);
  font-size:.95rem;
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ---------- Ergaenzungen fuer die echte Website ----------
   Der Entwurf zeigte nur die Startseite. Sprunglink und Brotkrume kommen
   erst im Betrieb dazu.                                                  */

/* Sprunglink: fuer Tastatur- und Screenreader-Nutzung. Sichtbar nur, wenn
   er den Fokus hat. */
.sprung{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--petrol);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--r-klein) 0;text-decoration:none;font-weight:600}
.sprung:focus{left:0}

/* Brotkrume: schmales Band unter dem Kopf, bewusst zurueckhaltend. */
.krume{background:var(--sand);border-bottom:1px solid var(--sand-tief);
  font-size:.86rem;color:var(--text-leise)}
.krume .huelle{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:11px;padding-bottom:11px}
.krume a{color:var(--text-leise);text-decoration:none}
.krume a:hover{color:var(--petrol);text-decoration:underline}
.krume__trenner{color:var(--sand-tief);padding:0 2px}
.krume__hier{color:var(--text)}

/* Kontaktadresse im Fuss: reiner Text, kein Link. Lange Adressen duerfen
   auf schmalen Geraeten umbrechen, statt die Spalte zu sprengen. */
.fuss__adresse{word-break:break-word}

/* ---------- Bausteine fuer die Inhaltsseiten ----------
   Der Entwurf zeigte nur die Startseite mit Karten und Schritten. Fuer
   Fliesstext, Tabellen, Listen und Fragen braucht es eigene Bausteine —
   alle im selben Formenklima: runde Ecken, weiche Flaechen, viel Luft. */

/* Inhaltsspalte: Sie nutzt die volle Rasterbreite, damit Tabellen, Raster
   und Karten ihren Platz bekommen — auf einer Vergleichsseite sind das die
   wichtigsten Darstellungen. Begrenzt wird nur die Zeilenlaenge des
   Fliesstextes selbst, und zwar am Absatz, nicht am Container. Aufzaehlungen
   bekommen etwas mehr Raum, weil ihre Zeilen kuerzer sind. */
.huelle--text{max-width:var(--breite)}
/* Ueberschriften bekommen eine eigene, groessere Hoechstbreite: Sie stehen
   in groesserer Schrift und wirken in Textbreite gesetzt zerrissen, bei
   30 Zeichen dagegen wie abgeschnitten. */
.huelle--text h2{margin-top:0;max-width:44ch}
.huelle--text h3{margin:34px 0 12px;font-size:1.22rem;color:var(--petrol-dunkel);max-width:52ch}
.huelle--text p{margin:0 0 1.05rem;max-width:74ch}
.huelle--text > ul,.huelle--text > ol{max-width:80ch}
/* Ein Absatz direkt vor einer Tabelle oder einem Raster leitet diese ein und
   darf dieselbe Breite haben, sonst steht er verloren links daneben. */
.huelle--text .hinweis{max-width:88ch}

/* Oberzeile ueber der H1 — ordnet die Seite ein, ohne Gewicht zu ziehen. */
.hero__oberzeile{margin:0 0 14px;font-size:.82rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--petrol)}

/* Merkkasten: die kurze Antwort gleich zu Beginn. Sand statt Weiss, damit
   er sich abhebt, ohne wie eine Warnung zu wirken. Ein Symbol links oben
   macht auf einen Blick klar, um welche Art Hinweis es sich handelt. */
.merkkasten{background:var(--sand);border:1px solid var(--sand-tief);
  border-radius:var(--r-gross);padding:26px 30px;position:relative}
.merkkasten__titel{margin:0 0 10px;font-weight:700;color:var(--petrol-dunkel);
  display:flex;align-items:center;gap:10px}
.merkkasten__titel .ikreis{flex:none}
.merkkasten p{margin:0;max-width:78ch}
.merkkasten p + p{margin-top:.9rem}

/* Knopfreihe im Hinweiskasten: Steht dort, dass ein Tarif geschlossen ist,
   gehoert der naechste Schritt an dieselbe Stelle — nicht als Verweis auf
   ein Bedienelement weiter oben. */
.merkkasten__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.3rem !important}
.merkkasten__knoepfe .knopf{margin:0}

/* Listen im Fliesstext: Der Haken ersetzt den Punkt und passt zum
   freundlichen Ton der Seite. */
.liste{list-style:none;margin:0 0 1.4rem;padding:0}
.liste li{position:relative;padding-left:30px;margin-bottom:11px}
.liste li::before{content:"";position:absolute;left:6px;top:.55em;
  width:9px;height:5px;border-left:2.4px solid var(--petrol);
  border-bottom:2.4px solid var(--petrol);transform:rotate(-45deg)}
.liste--eng li{margin-bottom:5px}

/* Tabellen: auf schmalen Geraeten scrollbar statt gequetscht. */
.tabelle-huelle{overflow-x:auto;margin:22px 0 26px;
  border:1px solid var(--linie);border-radius:var(--r-klein)}
.tabelle{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tabelle th{background:var(--sand);text-align:left;font-weight:700;
  padding:13px 16px;border-bottom:1px solid var(--sand-tief);color:var(--petrol-dunkel)}
.tabelle td{padding:13px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.tabelle tr:last-child td{border-bottom:0}
.tabelle td:first-child{font-weight:600}

/* Quellen- und Standhinweise unter Tabellen. */
.hinweis{font-size:.86rem;color:var(--text-leise);margin-top:-6px}

/* Abschluss-Aufforderung: eine gefuellte Flaeche, einmal je Seite. */
.cta{background:var(--petrol);color:#fff;border-radius:var(--r-gross);
  padding:40px 42px;box-shadow:var(--schatten)}
.cta h2{color:#fff;margin:0 0 12px}
.cta p{color:#D9E6E0;margin:0 0 24px;max-width:56ch}
.cta .knopf--haupt{background:#fff;color:var(--petrol-dunkel)}
.cta .knopf--haupt:hover{background:var(--sand)}
/* Zweiter Weg aus der Abschlussflaeche: durchsichtig mit heller Kante,
   damit er neben dem weissen Hauptknopf zurueckbleibt, aber auf dem
   Petrolgrund noch klar als Knopf zu erkennen ist. */
.cta .knopf--neben{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.55)}
.cta .knopf--neben:hover{background:rgba(255,255,255,.12);border-color:#fff}
.cta__knoepfe{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media(max-width:560px){.cta{padding:30px 24px}}

/* Fragen: aufklappbar, damit die Seite nicht auseinanderlaeuft. */
.faq{border-top:1px solid var(--linie);max-width:820px}
.faq details{border-bottom:1px solid var(--linie)}
.faq summary{padding:20px 40px 20px 0;cursor:pointer;font-weight:600;
  list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:17px;
  font-size:1.5rem;font-weight:400;color:var(--petrol);line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--text-leise);padding:0 40px 20px 0;margin:0;max-width:70ch}

/* =====================================================================
   VISUELLE BAUSTEINE
   Eine Vergleichsseite lebt davon, dass Zahlen sichtbar werden statt nur
   dazustehen. Die folgenden Bausteine sind das Repertoire, aus dem sich
   jede Inhaltsseite bedient — alle im Formenklima des Entwurfs: runde
   Ecken, Sand und Petrol, weiche Flaechen statt harter Rahmen.
   ===================================================================== */

/* ---------- Rechenkarten: ein Fall durch mehrere Bauarten ---------- */
.rechenkarten{display:grid;gap:20px;margin:26px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rechenkarte{background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--schatten);
  display:flex;flex-direction:column}
.rechenkarte__kopf{padding:18px 22px 14px;background:var(--sand);
  border-bottom:1px solid var(--sand-tief)}
.rechenkarte__art{font-size:.78rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--petrol);margin:0 0 4px}
.rechenkarte__name{font-weight:700;margin:0;color:var(--petrol-dunkel)}
.rechenkarte__name a{color:inherit}
.rechenkarte__regel{padding:14px 22px;font-size:.88rem;color:var(--text-leise);
  border-bottom:1px solid var(--linie)}
.rechenkarte table{width:100%;border-collapse:collapse;font-size:.94rem;
  font-variant-numeric:tabular-nums}
.rechenkarte td{padding:11px 22px;border-bottom:1px solid var(--linie)}
.rechenkarte td:last-child{text-align:right;font-weight:600;white-space:nowrap}
.rechenkarte tr.summe td{background:var(--sand);font-weight:700}
.rechenkarte tr:last-child td{border-bottom:0}
.rechenkarte__offen{color:var(--terracotta)}
.rechenkarte__text{padding:14px 22px 18px;font-size:.88rem;
  color:var(--text-leise);border-top:1px solid var(--linie);margin-top:auto}

/* ---------- Balken: Beitraege oder Kosten im Groessenvergleich ---------- */
/* Ein Balken sagt auf einen Blick, was eine Zahlenspalte erst nach dem
   Lesen verraet. Die Breite kommt per --anteil aus dem PHP.            */
.balken{list-style:none;margin:24px 0 30px;padding:0}
.balken li{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;
  gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linie)}
.balken li:last-child{border-bottom:0}
.balken__spur{background:var(--petrol-hell);border-radius:999px;height:12px;overflow:hidden}
.balken__fuell{display:block;height:100%;background:var(--petrol);border-radius:999px}
.balken__fuell--akzent{background:var(--terracotta)}
.balken__wert{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.balken__name{font-size:.92rem}
@media(max-width:560px){
  .balken li{grid-template-columns:1fr auto;grid-template-areas:"name wert" "spur spur"}
  .balken__name{grid-area:name}.balken__wert{grid-area:wert}.balken__spur{grid-area:spur}
}

/* ---------- Gegenueberstellung: mit und ohne Versicherung ---------- */
.gegenueber{display:grid;gap:18px;margin:26px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gegenueber__box{border-radius:var(--r-gross);padding:24px 26px;border:1px solid}
.gegenueber__box h3{margin:0 0 12px;font-size:1.06rem}
.gegenueber__box ul{margin:0;padding-left:1.1em}
.gegenueber__box li{margin-bottom:8px}
.gegenueber__box--ohne{background:#FDF6F2;border-color:#F0DCD0}
.gegenueber__box--ohne h3{color:var(--terracotta)}
.gegenueber__box--mit{background:var(--petrol-hell);border-color:#C8DBD1}
.gegenueber__box--mit h3{color:var(--petrol-dunkel)}

/* ---------- Zeitstrahl: Wartezeit und Vertragsbeginn ---------- */
/* Die Frage „ab wann zahlt sie" ist zeitlich, nicht numerisch — deshalb
   eine Achse statt einer Tabelle.                                      */
.zeitstrahl{list-style:none;margin:28px 0 32px;padding:0 0 0 34px;
  position:relative;border-left:2px solid var(--petrol-hell)}
.zeitstrahl li{position:relative;padding-bottom:26px}
.zeitstrahl li:last-child{padding-bottom:0}
.zeitstrahl li::before{content:"";position:absolute;left:-42px;top:3px;
  width:16px;height:16px;border-radius:50%;background:var(--petrol);
  border:3px solid #fff;box-shadow:0 0 0 2px var(--petrol-hell)}
.zeitstrahl__zeit{display:block;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--petrol);margin-bottom:3px}
.zeitstrahl__was{font-weight:600;display:block;margin-bottom:3px}
.zeitstrahl p{margin:0;font-size:.92rem;color:var(--text-leise)}

/* ---------- Pruefliste vor dem Abschluss ---------- */
.pruefliste{list-style:none;margin:24px 0 30px;padding:0;counter-reset:pruef}
.pruefliste li{position:relative;padding:18px 0 18px 52px;
  border-bottom:1px solid var(--linie);counter-increment:pruef}
.pruefliste li:last-child{border-bottom:0}
.pruefliste li::before{content:counter(pruef);position:absolute;left:0;top:16px;
  width:34px;height:34px;border-radius:50%;background:var(--petrol-hell);
  color:var(--petrol-dunkel);font-weight:700;font-size:.92rem;
  display:grid;place-items:center}
.pruefliste strong{display:block;margin-bottom:4px}
.pruefliste p{margin:0;font-size:.93rem;color:var(--text-leise)}

/* ---------- Kennzahlen nebeneinander ---------- */
.kennzahlen{display:grid;gap:16px;margin:26px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kennzahl{background:var(--sand);border-radius:var(--r-klein);padding:20px 22px}
/* Spannen wie „100-250 EUR" sind breit. Sie duerfen nicht zwischen Zahl und
   Waehrungszeichen umbrechen — die Schrift skaliert stattdessen mit.        */
.kennzahl__wert{display:block;font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:800;
  color:var(--petrol-dunkel);line-height:1.1;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.kennzahl__was{display:block;margin-top:6px;font-size:.88rem;color:var(--text-leise)}

/* ---------- Hervorgehobene Tabellenzeile ---------- */
.tabelle tr.hervor td{background:var(--petrol-hell);font-weight:600}
.tabelle .ja{color:var(--petrol);font-weight:700}
.tabelle .nein{color:var(--terracotta)}

/* ---------- Aufforderung mitten im Text ---------- */
.cta-inline{background:var(--sand);border:1px solid var(--sand-tief);
  border-radius:var(--r-gross);padding:26px 30px;margin:30px 0}
.cta-inline h3{margin:0 0 8px;color:var(--petrol-dunkel)}
.cta-inline p{margin:0 0 18px;color:var(--text-leise)}

/* ---------- Erstattungsgrenze: der hervorgehobene Block ----------
   Auf einer Anbieterseite ist die Frage „bis zu welchem Steigerungsfaktor"
   die teuerste ueberhaupt. Sie bekommt deshalb einen eigenen Block, der
   sich vom Fliesstext abhebt, ohne wie eine Warnung zu wirken: Sandflaeche,
   ein kraeftiger Balken links in Terracotta, die Stufe gross gesetzt. */
.grenze{background:var(--sand);border:1px solid var(--sand-tief);
  border-left:6px solid var(--terracotta);border-radius:var(--r-gross);
  padding:26px 30px;margin:26px 0 30px}
.grenze__kopf{margin:0 0 6px;font-size:.8rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--petrol)}
.grenze__stufe{margin:0 0 4px;font-size:clamp(1.35rem,3vw,1.75rem);font-weight:800;
  line-height:1.2;color:var(--petrol-dunkel)}
.grenze__text{margin:14px 0 0;font-size:.97rem}
@media(max-width:560px){.grenze{padding:22px 20px}}

/* Die drei Stufen der GOAe als Leiter. Die Stufe, auf der die Gesellschaft
   steht, traegt .hier und wird gefuellt — so ist die Einordnung ohne Lesen
   erkennbar. */
.stufenleiter{list-style:none;counter-reset:none;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:18px 0 0;padding:0}
.stufenleiter li{background:#fff;border:1px solid var(--linie);border-radius:var(--r-klein);
  padding:12px 14px}
.stufenleiter li.hier{background:var(--petrol);border-color:var(--petrol)}
.stufenleiter__wert{display:block;font-weight:800;color:var(--petrol-dunkel);
  font-variant-numeric:tabular-nums}
.stufenleiter__was{display:block;margin-top:2px;font-size:.82rem;color:var(--text-leise)}
.stufenleiter li.hier .stufenleiter__wert{color:#fff}
.stufenleiter li.hier .stufenleiter__was{color:#D9E6E0}

/* ---------- Belegstufe an einer Angabe ----------
   Kein Satz, sondern eine Herkunftsmarke: woher die Angabe stammt. Steht
   klein und leise unter dem Wert, damit sie den Text nicht zerreisst. */
.beleg{display:block;margin-top:6px;font-size:.8rem;color:var(--text-leise);
  font-style:italic}

/* Zweckzeile unter einem Tarifnamen in der Tariftabelle. */
.tarifzweck{display:block;margin-top:4px;font-weight:400;font-size:.86rem;
  color:var(--text-leise);max-width:34ch}

/* ---------- Sortierbare Tabellenkoepfe ----------
   Der Kopf bleibt eine th-Zelle, die Schaltflaeche steckt darin. Ohne
   JavaScript passiert beim Klick nichts, die Tabelle bleibt lesbar. */
.tabelle--sortierbar th{padding:0}
.sortknopf{display:flex;align-items:center;gap:6px;width:100%;
  background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;font-weight:700;color:var(--petrol-dunkel);
  padding:13px 16px}
.sortknopf::after{content:"\2195";font-weight:400;opacity:.45;font-size:.9em}
.sortknopf:hover{color:var(--petrol);background:var(--sand-tief)}
.tabelle--sortierbar th[aria-sort="ascending"]  .sortknopf::after{content:"\2191";opacity:1}
.tabelle--sortierbar th[aria-sort="descending"] .sortknopf::after{content:"\2193";opacity:1}

/* ---------- Inhaltsverzeichnis am Seitenanfang ---------- */
.toc{background:#fff;border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:22px 26px;margin:0 0 34px;box-shadow:var(--schatten)}
.toc h2{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--petrol);margin:0 0 12px}
.toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:32px}
.toc li{margin-bottom:7px;break-inside:avoid}
.toc a{color:var(--text);text-decoration:none}
.toc a:hover{color:var(--petrol);text-decoration:underline}
@media(max-width:620px){.toc ol{columns:1}}

/* ---------- Tarif-Finder: das zentrale Werkzeug ----------
   Steht prominent auf der Startseite und auf /vergleich/. Die Filterleiste
   ist bewusst als Kaestchen-Raster gebaut und nicht als Auswahlfelder:
   Man soll auf einen Blick sehen, wonach sich ueberhaupt filtern laesst —
   die Merkmale sind hier die eigentliche Botschaft.                      */
.finder{background:var(--sand);padding:56px 0 60px;
  border-top:1px solid var(--sand-tief);border-bottom:1px solid var(--sand-tief)}
.finder__kopf{max-width:720px;margin-bottom:26px}
.finder__kopf h2{margin:0 0 10px}
.finder__lead{color:var(--text-leise);margin:0}

/* Die Gestaltung der Filterleiste steht weiter unten im Abschnitt
   „Auswahlbereich"; hier bleibt nur, was unabhaengig davon gilt. */
.finder__leer{background:#FDF6F2;border:1px solid #F0DCD0;border-radius:var(--r-klein);
  padding:18px 22px;margin:0 0 20px;color:var(--text)}

/* Die Tabelle des Finders traegt mehr Spalten als die uebrigen — sie darf
   deshalb breiter werden und auf schmalen Geraeten scrollen. */
.finder__tabelle{min-width:760px}
.finder__tabelle td:first-child{min-width:230px}
/* Zweckzeile unter dem Tarifnamen: klein, damit die Zeile nicht auftraegt. */
.tarifzweck{display:block;font-size:.82rem;color:var(--text-leise);
  font-weight:400;margin-top:3px;line-height:1.4}
/* Fehlende Angaben werden nicht versteckt, aber auch nicht betont. */
.beleg{color:var(--text-leise);font-weight:400;font-size:.88rem}

/* Kennzahl in einer Uebersichtskarte — nennt die eine Zahl, um die es auf
   der verlinkten Seite geht, noch vor dem Beschreibungstext. */
.karte__kern{font-weight:700;color:var(--terracotta);margin:0 0 8px;
  font-variant-numeric:tabular-nums}

/* ---------- Anfrageformular ---------- */
.anfrage{background:#fff;border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:30px 34px;box-shadow:var(--schatten);max-width:820px}
.anfrage__block{border:0;margin:0 0 26px;padding:0}
.anfrage__block legend{font-size:.78rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--petrol);padding:0;margin-bottom:14px}
.anfrage__reihe{margin-bottom:18px}
.anfrage__frage{margin:0 0 8px;font-weight:600;font-size:.95rem}
.anfrage__wahl{display:flex;gap:10px;flex-wrap:wrap}
.anfrage__wahl label{display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--linie);border-radius:999px;padding:9px 16px;
  cursor:pointer;font-size:.92rem;transition:border-color .12s,background .12s}
.anfrage__wahl label:hover{border-color:var(--petrol);background:var(--petrol-hell)}
.anfrage__wahl input{accent-color:var(--petrol)}
.anfrage__paar{display:grid;gap:0 18px;grid-template-columns:1fr 1fr}
.anfrage__paar--plz{grid-template-columns:140px 1fr}
@media(max-width:560px){.anfrage__paar,.anfrage__paar--plz{grid-template-columns:1fr}}

.feld{margin:0 0 16px}
.feld label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px}
.feld input,.feld textarea{width:100%;padding:11px 13px;border:1px solid var(--linie);
  border-radius:var(--r-klein);font:inherit;font-size:.97rem;background:#fff;color:var(--text)}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--mint,var(--petrol));outline-offset:1px;border-color:var(--petrol)}
.feld textarea{resize:vertical;min-height:96px}
.feld__hinweis{display:block;margin-top:5px;font-size:.83rem;color:var(--text-leise);line-height:1.45}
.feld__optional{font-weight:400;color:var(--text-leise)}
.feld--zustimmung label{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:.9rem;line-height:1.5}
.feld--zustimmung input{width:auto;margin-top:3px;flex:none;accent-color:var(--petrol)}

.anfrage__aktion{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 0}
.anfrage__zusage{font-size:.85rem;color:var(--text-leise)}

/* Honeypot: fuer Menschen unsichtbar, fuer Maschinen ein Koeder. Nicht per
   display:none, weil manche Automaten genau darauf achten. */
.anfrage__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Rueckmeldungen */
.merkkasten--erfolg{background:var(--petrol-hell);border-color:#C8DBD1}
.merkkasten--erfolg .merkkasten__titel{color:var(--petrol-dunkel)}
.merkkasten--fehler{background:#FDF6F2;border-color:#F0DCD0}
.merkkasten--fehler .merkkasten__titel{color:var(--terracotta)}

/* =====================================================================
   FINDER - Gestaltung
   Die Filter stehen als anklickbare Marken da statt als Kaestchenliste:
   Der gewaehlte Zustand ist auf einen Blick sichtbar, und die Gruppen
   bekommen ueber ihr Zeichen eine Ordnung, die eine Textliste nicht hat.
   ===================================================================== */

/* ---------- Auswahlbereich ----------
   Fuenf Gruppen nebeneinander, jede als eigene getoente Flaeche mit eigener
   Farbe. Die Farbe kommt aus dem PHP als --ton/--ton-hell an das fieldset;
   das Stylesheet bleibt dadurch generisch und kennt keine Gruppennamen.

   Warum ueberhaupt Farbe: Neun Filter nebeneinander sind ohne Gliederung
   eine Wand. Die Toene ordnen sie schneller, als ein Gruppentitel gelesen
   werden kann, und der gewaehlte Zustand ist dadurch auch aus dem
   Augenwinkel sichtbar. */
/* ---------- Aufklapper um die Filterleiste ----------
   Auf breiten Schirmen ist die Leiste immer offen und der Griff verborgen;
   auf schmalen uebernimmt der Griff die Bedienung und zeigt zugleich den
   Stand an, damit auch im zugeklappten Zustand sichtbar bleibt, wie viele
   Tarife die Liste noch enthaelt. */
.finder__klapp{margin:0}
.finder__klapp > summary{list-style:none}
.finder__klapp > summary::-webkit-details-marker{display:none}
.finder__griff{display:none}
@media(max-width:899px){
  .finder__griff{display:flex;align-items:center;gap:11px;cursor:pointer;
    background:#fff;border:1px solid var(--linie);border-radius:var(--r-klein);
    padding:14px 16px;margin-bottom:14px;box-shadow:var(--schatten);
    font-weight:700;color:var(--petrol-dunkel)}
  .finder__griff-zeichen{display:grid;place-items:center;width:34px;height:34px;
    flex:none;border-radius:50%;background:var(--petrol);color:#fff}
  .finder__griff-text{margin-right:auto}
  .finder__griff-stand{font-size:.86rem;font-weight:600;color:var(--text-leise);
    font-variant-numeric:tabular-nums;white-space:nowrap}
  .finder__griff-stand--aktiv{color:var(--petrol);
    background:var(--petrol-hell);border-radius:999px;padding:3px 10px}
  /* Ein Pfeil zeigt die Richtung an, in die der Griff arbeitet. */
  .finder__griff::after{content:"";width:11px;height:11px;flex:none;
    border-right:2.4px solid var(--petrol);border-bottom:2.4px solid var(--petrol);
    transform:rotate(45deg);margin:-4px 0 0 4px;transition:transform .18s ease}
  .finder__klapp[open] > .finder__griff::after{transform:rotate(-135deg);margin-top:3px}
  .finder__klapp[open] > .finder__griff{border-color:var(--petrol-hell)}
  /* Ohne JavaScript bleibt die Filterleiste verborgen — dann darf auch ihr
     Griff nicht dastehen und ins Leere fuehren. */
  .finder__klapp:has(> .finder__filter[hidden]) > .finder__griff{display:none}
}

/* display:block hebt die aeltere Rasterdefinition weiter oben auf — das
   Formular ist nur noch Rahmen, das Raster steckt in .finder__gruppen. */
.finder__filter{display:block;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-gross);padding:22px;margin-bottom:26px;
  box-shadow:var(--schatten-hoch)}

/* Das Raster der Gruppen.
   Feste Spaltenzahl statt auto-fit: Bei auto-fit rutscht die letzte Gruppe
   in eine eigene Zeile und steht dort allein neben leerem Raum. Auf breiten
   Schirmen laeuft deshalb ein Sechser-Raster, in dem die ersten drei Gruppen
   je zwei und die letzten beiden je drei Spalten belegen — zwei volle Zeilen
   ohne Loch. minmax(0,1fr) erlaubt den Spalten ausdruecklich, schmaler als
   ihr Inhalt zu werden; sonst sprengen die langen Filternamen ihre Gruppe.
   Jede Gruppe wird nur so hoch wie ihr Inhalt, sonst entstuende unter der
   Gruppe mit einem einzigen Filter eine leere getoente Flaeche. */
.finder__gruppen{display:grid;gap:13px;align-items:start;
  grid-template-columns:1fr}
@media(min-width:520px){.finder__gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){
  .finder__gruppen{grid-template-columns:repeat(6,minmax(0,1fr))}
  .finder__gruppen .fgruppe{grid-column:span 2}
  .finder__gruppen .fgruppe:nth-child(4),
  .finder__gruppen .fgruppe:nth-child(5){grid-column:span 3}
}

.fgruppe{border:1px solid var(--linie);
  border-color:color-mix(in srgb,var(--ton) 18%,transparent);
  background:var(--ton-hell);border-radius:var(--r-klein);
  margin:0;padding:14px 14px 15px;min-width:0}
.fgruppe__titel{display:flex;align-items:center;gap:9px;margin:0 0 11px;
  font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ton);line-height:1.3}
.fgruppe__zeichen{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:50%;background:var(--ton);color:#fff}
.fgruppe__zeichen .ikon{stroke-width:1.9}
.fgruppe__marken{display:grid;gap:8px;align-content:start;min-width:0}

/* Die Marke: Das Kaestchen bleibt im Markup und traegt die Bedienung,
   sichtbar ist nur die Flaeche. Gewaehlt wird sie in der Gruppenfarbe
   gefuellt — der Unterschied zwischen an und aus soll aus zwei Metern
   Entfernung erkennbar sein. */
.fmarke{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:8px;min-width:0;
  border:1.5px solid var(--linie);
  border-color:color-mix(in srgb,var(--ton) 22%,#fff);
  border-radius:11px;padding:9px 10px;background:#fff;
  font-size:.88rem;line-height:1.35;cursor:pointer;
  transition:border-color .14s,background .14s,box-shadow .14s,color .14s}
.fmarke input{position:absolute;opacity:0;width:0;height:0}
.fmarke__haken{display:grid;place-items:center;width:18px;height:18px;flex:none;
  border:1.5px solid var(--linie);
  border-color:color-mix(in srgb,var(--ton) 32%,#fff);border-radius:6px;
  color:transparent;background:#fff;
  transition:background .14s,border-color .14s,color .14s}
/* Die Filternamen sind deutsche Komposita und damit laenger als die Spalte.
   Weiche Trennstellen stehen im Markup; hyphens:auto faengt den Rest ab. */
.fmarke__text{min-width:0;hyphens:auto;overflow-wrap:break-word}
/* Die Anzahl der Treffer je Filter: klein, rechts, vor dem Klick lesbar. */
.fmarke__zahl{font-size:.74rem;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ton);background:color-mix(in srgb,var(--ton) 12%,#fff);
  border-radius:999px;padding:2px 7px;transition:background .14s,color .14s;
  align-self:start;margin-top:1px}

.fmarke:hover{border-color:var(--ton);
  background:color-mix(in srgb,var(--ton) 6%,#fff)}

.fmarke:has(input:checked){background:var(--ton);border-color:var(--ton);
  color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--ton) 28%,transparent)}
.fmarke:has(input:checked) .fmarke__text{font-weight:700}
.fmarke:has(input:checked) .fmarke__haken{background:#fff;border-color:#fff;
  color:var(--ton)}
.fmarke:has(input:checked) .fmarke__zahl{background:rgba(255,255,255,.22);color:#fff}

/* Ohne :has (aeltere Browser) bleibt wenigstens das Kaestchen sichtbar
   gefuellt — die Bedienung funktioniert dort unveraendert. */
.fmarke input:checked ~ .fmarke__haken{background:var(--ton);
  border-color:var(--ton);color:#fff}
.fmarke:has(input:checked) input:checked ~ .fmarke__haken{background:#fff;color:var(--ton)}

.fmarke input:focus-visible ~ .fmarke__haken{outline:2.5px solid var(--ton);
  outline-offset:3px}

/* Ein Filter, den kein Tarif erfuellt, wird nicht versteckt — er ist eine
   Aussage ueber den Markt. Er laesst sich nur nicht anklicken. */
.fmarke--leer{opacity:.45;cursor:not-allowed}
.fmarke--leer:hover{border-color:color-mix(in srgb,var(--ton) 22%,#fff);background:#fff}

.finder__aktion{display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;justify-content:space-between;min-height:44px;
  border-top:1px solid var(--linie);padding-top:16px;margin-top:16px}
.finder__zaehler{margin:0;font-weight:700;font-size:1.05rem;color:var(--text-leise);
  font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:10px}
/* Sobald gefiltert wird, faerbt sich die Zahl — sonst sieht niemand, dass
   die Liste unter der Leiste gerade kuerzer geworden ist. */
.finder__zaehler--aktiv{color:var(--petrol-dunkel)}
.finder__zaehler--aktiv::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--petrol);flex:none;
  box-shadow:0 0 0 4px var(--petrol-hell)}

/* ---------- Umschaltung der Altersstufe ----------
   Steht zwischen Filterleiste und Tabelle, weil sie die Beitragsspalte
   steuert und nicht die Auswahl der Tarife. Deshalb auch keine Gruppenfarbe:
   Das hier ist eine Ansichtssache, kein Filter. */
.alterwahl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin:0 0 16px;padding:14px 18px;background:#fff;border:1px solid var(--linie);
  border-radius:var(--r-klein);box-shadow:var(--schatten)}
.alterwahl__frage{display:flex;align-items:center;gap:9px;margin:0;
  font-weight:700;color:var(--petrol-dunkel);font-size:.95rem}
.alterwahl__frage .ikon{color:var(--petrol);flex:none}
.alterwahl__marken{display:flex;flex-wrap:wrap;gap:7px}

.amarke{position:relative;display:inline-flex;align-items:center;gap:7px;
  border:1.5px solid var(--linie);border-radius:999px;padding:7px 14px;
  background:#fff;font-size:.9rem;cursor:pointer;
  transition:border-color .13s,background .13s,color .13s}
.amarke input{position:absolute;opacity:0;width:0;height:0}
.amarke:hover{border-color:var(--petrol)}
.amarke--an{background:var(--petrol);border-color:var(--petrol);color:#fff;font-weight:700}
.amarke__zahl{font-size:.76rem;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--petrol-hell);color:var(--petrol-dunkel);
  border-radius:999px;padding:1px 7px}
.amarke--an .amarke__zahl{background:rgba(255,255,255,.24);color:#fff}
.amarke input:focus-visible ~ span{outline:2px solid var(--petrol);outline-offset:3px;
  border-radius:4px}

/* ---------- Werte in der Tabelle als Marker ---------- */
.marke-ja{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--petrol-hell);color:var(--petrol-dunkel)}
.marke-nein{color:#C2CCC8;font-size:1.1rem;line-height:1}

/* Die Erstattungsstufe ist der Wert, an dem die Seite haengt — in einer
   reinen Textspalte geht er unter, deshalb als farbige Pille. */
.stufe{display:inline-block;padding:5px 11px;border-radius:999px;
  font-size:.82rem;font-weight:600;line-height:1.3;white-space:nowrap}
.stufe--stark  {background:var(--petrol-hell);color:var(--petrol-dunkel)}
.stufe--mittel {background:#FBF1E3;color:#8A6220}
.stufe--schwach{background:#FBEAE2;color:var(--terracotta)}
.stufe--warten {background:#F2F5F4;color:var(--text-leise)}
.stufe--leer   {background:#F2F5F4;color:#8A958F}

.tf-tarif a{font-weight:600;text-decoration:none;color:var(--petrol-dunkel)}
.tf-tarif a:hover{color:var(--petrol);text-decoration:underline}
.finder__tabelle tbody tr{transition:background .12s}
.finder__tabelle tbody tr:hover{background:#FAFCFB}
.finder__tabelle td{vertical-align:middle}
.finder__tabelle td.preis strong{font-size:1.02rem;color:var(--petrol-dunkel)}

/* Nur fuer Screenreader. */
.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}

/* =====================================================================
   SYMBOLE
   Alle Symbole kommen aus includes/icons.php, sind rein dekorativ und
   erben die Textfarbe. Der Kreis darum ist die Form, in der sie ueber
   Karten und in Abschnittskoepfen stehen.
   ===================================================================== */
.ikon{display:block;flex:none}

.ikreis{display:inline-grid;place-items:center;flex:none;border-radius:50%;
  width:46px;height:46px}
.ikreis--hell{background:var(--petrol-hell);color:var(--petrol-dunkel)}
.ikreis--voll{background:var(--petrol);color:#fff}
.ikreis--warm{background:#F7E7D8;color:var(--terracotta)}
/* Kleine Ausfuehrung fuer Zeilen und Ueberschriften. */
.ikreis--klein{width:30px;height:30px}
.ikreis--klein .ikon{width:17px;height:17px}
/* Grosse Ausfuehrung als Blickfang oben auf einer Karte. */
.ikreis--gross{width:62px;height:62px}
.ikreis--gross .ikon{width:32px;height:32px}

/* =====================================================================
   ABSCHNITTSKOPF MIT SYMBOL
   Jeder groessere Abschnitt bekommt links ein Zeichen. Das gliedert die
   langen Inhaltsseiten optisch, ohne zusaetzlichen Text zu brauchen.
   ===================================================================== */
.kopfzeile{display:flex;align-items:flex-start;gap:16px;margin:0 0 20px}
.kopfzeile .ikreis{margin-top:2px}
.kopfzeile h2,.kopfzeile h3{margin:0}
.kopfzeile__text{min-width:0}
.kopfzeile__unter{margin:6px 0 0;color:var(--text-leise);font-size:.97rem;max-width:70ch}
@media(max-width:520px){.kopfzeile{gap:12px}}

/* =====================================================================
   MERKMALKARTEN
   Ein Raster aus weissen Karten mit Symbol, Ueberschrift und zwei, drei
   Zeilen Text. Ersetzt ueberall dort eine Aufzaehlung, wo die Punkte
   gleichrangig nebeneinander stehen und einzeln etwas erklaeren.
   ===================================================================== */
.merkmale{display:grid;gap:18px;margin:26px 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.merkmal{background:#fff;border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:24px 26px;box-shadow:var(--schatten);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease}
.merkmal:hover{box-shadow:var(--schatten-hoch);transform:translateY(-2px);
  border-color:var(--petrol-hell)}
.merkmal .ikreis{margin-bottom:15px}
.merkmal h3{margin:0 0 .4em;font-size:1.08rem;max-width:none}
.merkmal p{margin:0;font-size:.96rem;line-height:1.65;color:var(--text-leise);max-width:none}
.merkmal__wert{display:block;margin:0 0 6px;font-weight:800;color:var(--terracotta);
  font-variant-numeric:tabular-nums;font-size:1.12rem}
/* Als Verweis: dieselbe Karte, aber anklickbar. */
a.merkmal{text-decoration:none;color:inherit;display:block}
a.merkmal h3{color:var(--petrol-dunkel)}
a.merkmal:hover h3{color:var(--petrol)}
a.merkmal .weiter{display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:.92rem;font-weight:700;color:var(--petrol)}
a.merkmal .weiter .ikon{width:17px;height:17px;transition:transform .2s ease}
a.merkmal:hover .weiter .ikon{transform:translateX(3px)}

/* Kompakte Variante: nur Symbol und eine Zeile, fuer Aufzaehlungen von
   Leistungspunkten, die keine Erklaerung brauchen. */
.merkmale--knapp{gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.merkmale--knapp .merkmal{display:flex;align-items:center;gap:13px;
  padding:15px 18px;box-shadow:none;font-size:.96rem;line-height:1.45}
.merkmale--knapp .merkmal:hover{transform:none;box-shadow:var(--schatten)}
.merkmale--knapp .ikreis{margin-bottom:0}

/* =====================================================================
   LISTE MIT SYMBOL
   Wo eine Aufzaehlung im Fliesstext bleiben soll, tritt an die Stelle des
   Hakens ein inhaltlich passendes Zeichen.
   ===================================================================== */
.zeichenliste{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:14px;
  max-width:84ch}
.zeichenliste li{display:flex;align-items:flex-start;gap:14px}
.zeichenliste .ikreis{margin-top:1px}
.zeichenliste strong{display:block;margin-bottom:2px;color:var(--petrol-dunkel)}
.zeichenliste p{margin:0;font-size:.95rem;color:var(--text-leise);max-width:none}
/* Zweispaltig, sobald Platz da ist — sonst wird die Seite unnoetig lang. */
@media(min-width:760px){.zeichenliste--zwei{grid-template-columns:1fr 1fr;gap:16px 34px}}

/* =====================================================================
   GEGENUEBERSTELLUNG mit Zeichen in den Punkten
   ===================================================================== */
.gegenueber__box ul{list-style:none;padding:0;margin:0}
.gegenueber__box li{position:relative;padding-left:26px;margin-bottom:9px}
.gegenueber__box li::before{content:"";position:absolute;left:0;top:.45em;
  width:15px;height:15px;border-radius:50%}
.gegenueber__box--mit li::before{background:var(--petrol);
  box-shadow:inset 0 0 0 3px var(--petrol-hell)}
.gegenueber__box--ohne li::before{background:var(--terracotta);
  box-shadow:inset 0 0 0 3px #F7E0D4}
.gegenueber__box h3{display:flex;align-items:center;gap:10px}

/* =====================================================================
   TABELLE: etwas mehr Zeichnung
   Ein farbiger Kopf und Zebrastreifen machen breite Vergleichstabellen
   deutlich leichter lesbar als reine Trennlinien.
   ===================================================================== */
.tabelle-huelle{box-shadow:var(--schatten);background:#fff;border-radius:var(--r-gross)}
.tabelle th{background:var(--petrol-hell);border-bottom:1px solid #C8DBD1;
  font-size:.86rem;letter-spacing:.03em}
.tabelle tbody tr:nth-child(even) td{background:#FBFCFB}
.tabelle tbody tr:hover td{background:var(--sand)}
.tabelle td{transition:background .12s}
/* Nur auf span-Elemente INNERHALB einer Zelle anwenden: Die Klassen .ja und
   .nein sitzen an manchen Stellen direkt am td. Ein td mit inline-flex faellt
   aus dem Tabellenraster; der Browser schiebt dann eine leere Ersatzzelle ein,
   die als weisse Luecke mitten in der Zeile sichtbar wird. */
.tabelle td > span.ja,.tabelle td > span.nein{display:inline-flex;align-items:center;gap:6px}

/* =====================================================================
   KENNZAHLEN: Symbol dazu, damit die Zahlenreihe nicht flach wirkt
   ===================================================================== */
.kennzahl{display:flex;flex-direction:column;gap:2px;border:1px solid var(--sand-tief)}
.kennzahl .ikreis{margin-bottom:10px}
.kennzahlen--weiss .kennzahl{background:#fff;border-color:var(--linie);
  box-shadow:var(--schatten)}

/* =====================================================================
   SCHRITTE und PRUEFLISTE: Ziffer bleibt, Zeichnung wird kraeftiger
   ===================================================================== */
.schritt{border:1px solid var(--linie)}
.schritte--verbunden .schritt{position:relative}
.schritte--verbunden .schritt:not(:last-child)::after{content:"";position:absolute;
  left:calc(clamp(20px,2.6vw,28px) + 26px);top:100%;width:2px;height:18px;
  background:var(--petrol-hell)}
.pruefliste li{padding-left:56px}
.pruefliste li::before{width:38px;height:38px;font-size:.98rem;top:14px}

/* =====================================================================
   FAQ: der einzige Block, der schmaler bleibt — so hebt er sich vom
   uebrigen, voll breiten Inhalt ab.
   ===================================================================== */
.faq{max-width:800px;border-top:0}
.faq details{background:#fff;border:1px solid var(--linie);border-radius:var(--r-klein);
  margin-bottom:10px;transition:border-color .15s,box-shadow .15s}
.faq details[open]{border-color:var(--petrol-hell);box-shadow:var(--schatten)}
.faq summary{padding:17px 48px 17px 20px}
.faq summary:hover{color:var(--petrol)}
.faq summary::after{right:18px;top:15px;width:26px;height:26px;border-radius:50%;
  background:var(--petrol-hell);display:grid;place-items:center;font-size:1.15rem}
.faq p{padding:0 20px 18px}
.abschnitt--sand .faq details{background:#fff;border-color:var(--sand-tief)}

/* =====================================================================
   AUFFORDERUNG: Zeichnung statt Flaeche allein
   ===================================================================== */
.cta{position:relative;overflow:hidden}
/* Ein sehr schwacher Kreis im Hintergrund nimmt der grossen Flaeche die
   Haerte, ohne vom Text abzulenken. */
.cta::after{content:"";position:absolute;right:-70px;top:-90px;
  width:300px;height:300px;border-radius:50%;
  background:rgba(255,255,255,.055);pointer-events:none}
.cta__raster{display:grid;gap:22px;align-items:center;position:relative;z-index:1}
@media(min-width:820px){.cta__raster{grid-template-columns:1fr auto}}
/* Zwei Spalten: links das Zeichen (fehlt es, bleibt die Spalte 0 breit),
   rechts Ueberschrift, Text und Knopf untereinander. So sitzt der Aufruf
   ruhig im Text, statt dass Ueberschrift und Text nebeneinanderstehen. */
.cta-inline{display:grid;gap:6px 18px;align-items:start;
  grid-template-columns:auto minmax(0,1fr)}
.cta-inline .ikreis{grid-row:1/span 3;align-self:center}
.cta-inline h3{grid-column:2;margin:0}
.cta-inline p{grid-column:2;margin:0;max-width:66ch}
.cta-inline .knopf{grid-column:2;justify-self:start;margin-top:14px;white-space:nowrap}

/* =====================================================================
   FINDER: Kopf mit Zeichen, Marken mit etwas mehr Koerper
   ===================================================================== */
.finder__kopf{max-width:none;display:flex;align-items:flex-start;gap:16px;
  margin-bottom:24px}
.finder__kopf h2{margin:0 0 8px;max-width:30ch}
.finder__kopf .ikreis{margin-top:3px}
.finder__kopf .finder__lead{max-width:72ch}
.finder__aktion .knopf--neben{border-color:var(--linie);background:#fff}

/* =====================================================================
   VERTRAUENSZEILE: aus Punkten werden Haken
   ===================================================================== */
.vertrauen li::before,.vertrauen span::before{display:none}
.vertrauen{display:flex;gap:10px 22px}
.vertrauen span{display:inline-flex;align-items:center;gap:7px}
.vertrauen span::before{content:"";display:block;width:16px;height:16px;flex:none;
  border-radius:50%;background:var(--petrol-hell);
  /* Haken als Hintergrundbild, damit im PHP kein Symbol noetig ist. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6156' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.8 9.4 17.6 19.5 6.8'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat}

/* =====================================================================
   KOPFBEREICH: aktive Seite hervorheben
   ===================================================================== */
.nav a[aria-current="page"]{background:var(--petrol-hell);color:var(--petrol-dunkel)}

/* =====================================================================
   EINSTIEG: der Zahlkasten bekommt ein Zeichen
   ===================================================================== */
.zahlkasten{position:relative}
.zahlkasten h2{display:flex;align-items:center;gap:9px}
.zahlkasten h2 .ikreis{flex:none}


/* ===== Lead-Formular: Pop-up und Schrittführung ===== */
/* =====================================================================
   NACHTRAG ZU assets/css/style.css
   ---------------------------------------------------------------------
   Diesen Block an das Ende von assets/css/style.css anhängen. Eine eigene
   Datei wäre ein zweiter Netzabruf für wenige Zeilen; die Versionierung
   über asset_url() greift ohnehin nur für style.css.

   Er gestaltet das Anfrageformular in seinen beiden Erscheinungsformen:
   als Pop-up über der Seite und als offen stehendes Formular auf
   /angebot/. Farben, Radien und Schatten kommen aus den vorhandenen
   Tokens; die Feld- und Knopfklassen sind dieselben wie bisher.
   ===================================================================== */

/* ---------- Hülle ----------
   Als Pop-up eine abgedunkelte Fläche über der ganzen Seite, auf der
   /angebot/-Seite dagegen nichts weiter als ein Behälter.              */
.lead-huelle{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:28px 20px;
  background:rgba(36,73,63,.58);
  overscroll-behavior:contain;
}
.lead-huelle--seite{
  position:static; display:block; padding:0; background:none; z-index:auto;
}

/* Während das Pop-up offen ist, soll die Seite dahinter nicht mitscrollen. */
.lead-offen, .lead-offen body{ overflow:hidden; }

/* ---------- Fenster ---------- */
.lead-fenster{
  position:relative;
  display:flex; flex-direction:column;
  width:100%; max-width:760px;
  max-height:calc(100dvh - 56px);
  background:var(--weiss);
  border-radius:var(--r-gross);
  box-shadow:var(--schatten-hoch);
}
.lead-fenster:focus{ outline:none; }
.lead-huelle--seite .lead-fenster{
  max-width:820px; max-height:none;
  border:1px solid var(--linie);
  box-shadow:var(--schatten);
}

/* Auf dem Handy füllt das Pop-up den Bildschirm. 100dvh statt 100vh:
   Sonst schiebt die Adressleiste mobiler Browser den unteren Rand des
   Fensters aus dem Bild, und der Absendeknopf ist nicht erreichbar.    */
@media (max-width:760px){
  .lead-huelle{ padding:0; }
  .lead-fenster{
    max-width:none; height:100dvh; max-height:100dvh;
    border-radius:0;
  }
  .lead-huelle--seite .lead-fenster{ height:auto; border-radius:var(--r-gross); }
}

/* ---------- Kopfzeile mit Schließen-Knopf ----------
   Sie bleibt beim Blättern stehen: Auf dem Handy muss der Ausweg immer
   erreichbar sein, ohne erst nach oben scrollen zu müssen.             */
.lead-kopf{
  flex:none;
  display:flex; align-items:center; gap:14px;
  padding:18px 24px 14px;
  border-bottom:1px solid var(--linie);
  border-radius:var(--r-gross) var(--r-gross) 0 0;
  background:var(--weiss);
}
.lead-kopf__titel{
  margin:0; flex:1 1 auto;
  font-weight:700; font-size:1.02rem; line-height:1.35;
  color:var(--petrol-dunkel);
}
.lead-huelle--seite .lead-kopf{ display:none; }

.lead-schliessen{
  flex:none;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:1px solid var(--linie); border-radius:50%;
  background:var(--weiss); color:var(--text-leise);
  cursor:pointer;
}
.lead-schliessen:hover{ background:var(--sand); color:var(--petrol-dunkel); }

/* ---------- Fortschritt ----------
   Trägt das hidden-Attribut, bis das Skript die Schrittführung übernimmt
   — ohne Schritte gäbe es keinen Fortschritt anzuzeigen.               */
.lead-fortschritt{
  flex:none;
  padding:14px 24px 0;
}
.lead-fortschritt__bahn{
  height:6px; border-radius:999px;
  background:var(--petrol-hell); overflow:hidden;
}
.lead-fortschritt__balken{
  display:block; height:100%;
  background:var(--petrol);
  transition:width .25s ease;
}
.lead-fortschritt__text{
  margin:8px 0 0;
  font-size:.84rem; color:var(--text-leise);
}

/* ---------- Scrollbereich ----------
   Nur dieser Teil scrollt, Kopfzeile und Fortschritt stehen fest. Der
   großzügige untere Abstand hält das zuletzt angetippte Feld über der
   Bildschirmtastatur.                                                  */
.lead-koerper{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:20px 24px 28px;
}
.lead-huelle--seite .lead-koerper{ overflow:visible; padding:30px 34px; }
@media (max-width:760px){
  .lead-kopf{ padding:14px 18px 12px; border-radius:0; }
  .lead-fortschritt{ padding:12px 18px 0; }
  .lead-koerper{ padding:18px 18px 44vh; }
  .lead-huelle--seite .lead-koerper{ padding:22px 20px; }
}

/* Das Formular selbst bringt im Fenster keine eigene Karte mehr mit —
   die Karte ist das Fenster.                                           */
.lead-fenster .anfrage{
  background:none; border:0; box-shadow:none;
  padding:0; max-width:none;
}

/* ---------- Ein Schritt ----------
   Ohne JavaScript stehen alle Schritte untereinander und sind durch eine
   Linie getrennt; mit Schrittführung ist immer nur einer sichtbar.     */
.lead-schritt + .lead-schritt{
  margin-top:30px; padding-top:26px; border-top:1px solid var(--linie);
}
.lead-form--js .lead-schritt + .lead-schritt{
  margin-top:0; padding-top:0; border-top:0;
}
.lead-frage{
  margin:0 0 .5em;
  font-size:1.28rem; line-height:1.3;
  color:var(--petrol-dunkel);
}
.lead-frage:focus{ outline:none; }
.lead-frage:focus-visible{ outline:3px solid var(--petrol); outline-offset:4px; border-radius:6px; }
.lead-lead{
  margin:0 0 1.2em;
  font-size:.95rem; color:var(--text-leise);
}

/* ---------- Fragegruppen ---------- */
.lead-gruppe{ border:0; margin:0 0 22px; padding:0; }
.lead-gruppe legend{
  padding:0; margin-bottom:9px;
  font-weight:600; font-size:.95rem; color:var(--text);
}
.feld__hinweis--vor{ margin:-4px 0 10px; }

/* Die gewählte Antwort soll aus dem Augenwinkel erkennbar sein, nicht
   erst nach dem Lesen des Punktes im Kreis.                            */
.anfrage__wahl input:checked + span{ font-weight:700; color:var(--petrol-dunkel); }
.anfrage__wahl label:has(input:checked){
  border-color:var(--petrol); background:var(--petrol-hell);
}
.anfrage__wahl label:focus-within{
  outline:3px solid var(--petrol); outline-offset:2px;
}
.anfrage__wahl--mehrfach label{ padding:10px 18px; }

/* ---------- Fehlerzustand ---------- */
.hat-fehler input, .hat-fehler textarea, .hat-fehler select{
  border-color:var(--terracotta);
  background:#FDF6F2;
}
.lead-gruppe.hat-fehler legend{ color:var(--terracotta); }
.lead-gruppe.hat-fehler .anfrage__wahl label{ border-color:#E7C4B2; }

.lead-hinweis{
  margin:16px 0 0;
  padding:12px 16px;
  border:1px solid #F0DCD0; border-radius:var(--r-klein);
  background:#FDF6F2; color:var(--terracotta);
  font-size:.92rem; line-height:1.55;
}
.lead-hinweis:focus{ outline:none; }

/* ---------- Vor und zurück ----------
   Ohne JavaScript unsichtbar: Dann gibt es keine Schritte, zwischen
   denen sie blättern könnten, wohl aber den Absendeknopf.              */
.lead-nav{ display:none; }
.lead-form--js .lead-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-top:26px;
}
/* Im letzten Schritt steht der Absendeknopf über der Navigation; dort
   bleibt nur noch der Weg zurück, und er rückt nach links.             */
.lead-form--js .lead-schritt:last-of-type .lead-nav{ margin-top:18px; }

/* ---------- Erfolgsmeldung ---------- */
.lead-schritt--fertig .merkkasten{ margin:0; }
.lead-schritt--fertig .merkkasten:focus{ outline:none; }

/* ---------- Ratgeber: Liste aller Beitraege ----------
   Mehrspaltig, damit gut dreissig Eintraege nicht als endlose
   Kolonne stehen. Die Spaltenzahl richtet sich nach der Breite;
   auf dem Handy bleibt eine. */
.beitragsliste{list-style:none;margin:0;padding:0;
  columns:1;column-gap:40px}
@media(min-width:620px){.beitragsliste{columns:2}}
@media(min-width:1000px){.beitragsliste{columns:3}}
.beitragsliste li{break-inside:avoid;padding:9px 0;
  border-bottom:1px solid var(--linie)}
.beitragsliste a{text-decoration:none;font-weight:500}
.beitragsliste a:hover{text-decoration:underline}

/* =====================================================================
   SCHNELLFILTER auf der Startseite
   ---------------------------------------------------------------------
   Die kompakte Fassung des Tariffinders. Eine einzige Karte: oben die
   Frage, darunter drei Auswahlfelder nebeneinander, dann die Zahl gross
   gesetzt und die beiden Wege weiter.

   Die Zahl ist der Anker. Sie steht in Terracotta und in der Groesse
   einer Ueberschrift, damit der Blick nach den Auswahlfeldern sofort
   dorthin faellt und nicht auf die Knoepfe springt.
   ===================================================================== */
.sfilter{
  background:var(--weiss);
  border:1px solid var(--linie);
  border-radius:var(--r-gross);
  box-shadow:var(--schatten);
  padding:38px 40px 30px;
}
@media(max-width:620px){ .sfilter{ padding:26px 22px 22px; } }

.sfilter__kopf{ max-width:62ch; }
.sfilter__oberzeile{
  margin:0 0 6px; font-size:.86rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-leise);
}
.sfilter h2{ margin:0 0 10px; }
.sfilter__lead{ margin:0; color:var(--text-leise); }

/* --- Die drei Auswahlfelder ---------------------------------------
   Nebeneinander, solange Platz ist; darunter gestapelt. Sie tragen
   bewusst sichtbare Beschriftungen statt Platzhaltertext — ein
   Platzhalter verschwindet beim Ausfuellen und laesst den Nutzer
   raten, was er da gerade gewaehlt hat. */
.sfilter__felder{
  display:grid; gap:16px; margin:26px 0 0;
  grid-template-columns:1fr;
}
@media(min-width:760px){ .sfilter__felder{ grid-template-columns:repeat(3,1fr); } }

.sfilter__feld{ margin:0; display:flex; flex-direction:column; gap:7px; }
.sfilter__feld label{
  font-size:.9rem; font-weight:600; color:var(--petrol-dunkel);
}
.sfilter__feld select{
  appearance:none;
  width:100%; padding:13px 40px 13px 15px;
  font:inherit; font-size:1rem; color:var(--text);
  background:var(--sand);
  border:1px solid var(--sand-tief);
  border-radius:var(--r-klein);
  cursor:pointer;
  /* Der Pfeil als Hintergrundbild, damit kein zusaetzliches Element
     noetig ist und die Klickflaeche das ganze Feld bleibt. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%232F6156' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
}
.sfilter__feld select:hover{ border-color:var(--petrol-hell); }
.sfilter__feld select:focus-visible{
  outline:2px solid var(--petrol); outline-offset:2px;
}

/* --- Das Ergebnis -------------------------------------------------- */
.sfilter__ergebnis{
  margin:28px 0 0; padding:22px 0 0;
  border-top:1px solid var(--linie);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 16px;
}
.sfilter__zahl{
  margin:0; font-size:2.6rem; line-height:1; font-weight:700;
  color:var(--terracotta); font-variant-numeric:tabular-nums;
}
.sfilter__was{ margin:0; color:var(--text-leise); }
.sfilter__preis{
  margin:0; flex-basis:100%; color:var(--text);
}
.sfilter__preis strong{ color:var(--petrol-dunkel); }

.sfilter__knoepfe{
  margin:24px 0 0; display:flex; flex-wrap:wrap; gap:12px;
}
.sfilter__fuss{
  margin:20px 0 0; font-size:.86rem; color:var(--text-leise);
  max-width:70ch;
}
/* =====================================================================
   FORMULAR: Meldungen am Feld
   ---------------------------------------------------------------------
   Die Meldung steht unter dem Feld, das sie betrifft — nicht in einer
   Sammelliste am Anfang. Wer zwischen Liste und Feld hin und her sucht,
   bricht bei einem sechsstufigen Formular ab.
   ===================================================================== */
.feld__fehler{
  display:block; margin-top:6px;
  font-size:.9rem; font-weight:600; color:#B4552B;
}
.feld__fehler::before{ content:"▲ "; font-size:.8em; }

.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"]{
  border-color:#B4552B;
  background:#FDF5F1;
}
.lead-gruppe--fehler{
  border-left:3px solid #B4552B;
  padding-left:14px;
}

/* Felder, die von einer vorherigen Antwort abhaengen. Ohne JavaScript
   stehen sie sichtbar da; das hidden-Attribut setzt erst das Skript. */
.lead-wenn[hidden]{ display:none; }
.lead-wenn{
  margin-top:18px; padding-top:16px;
  border-top:1px dashed var(--sand-tief);
}
/* ---------- Formular: Absage und weitere Bereiche ----------
   „Nein danke, nur Krankenhausversicherung" steht abgesetzt ueber der
   Mehrfachauswahl. Sie ergaenzt den Wunsch nicht, sie beendet ihn —
   deshalb eine eigene Flaeche mit Abstand statt einer Zeile in
   derselben Liste. */
.feld--absage{
  margin:0 0 4px;
  padding:14px 16px;
  background:var(--sand);
  border:1px solid var(--sand-tief);
  border-radius:var(--r-klein);
}
.feld--absage label{
  display:flex; align-items:flex-start; gap:10px;
  margin:0;                       /* .feld label bringt 6px mit */
  cursor:pointer; font-weight:600; font-size:.97rem;
  line-height:1.45; color:var(--petrol-dunkel);
}
/* width:auto ist hier entscheidend: .feld input setzt 100 % und machte
   aus dem Kaestchen eine seitenbreite Flaeche. */
.feld--absage input{
  width:auto; flex:none; margin:2px 0 0;
  padding:0; accent-color:var(--petrol);
}

/* Die Trennung zwischen Absage und Auswahl ist sichtbar: ein „oder"
   in der Beschriftung genuegt nicht, wenn beides gleich aussieht. */
.lead-gruppe--weitere{
  margin-top:0; padding-top:18px;
  border-top:1px solid var(--linie);
  transition:opacity .15s ease;
}
.lead-gruppe--gesperrt{ opacity:.45; }
.lead-gruppe--gesperrt label{ cursor:not-allowed; }
/* Vier redaktionelle Bildmotive auf der Startseite. */
.merkmale--startbilder{grid-template-columns:repeat(2,minmax(0,1fr))}
.merkmale--startbilder .merkmal{min-width:0}
.startseiten-bild{margin:0 0 20px}
.startseiten-bild img{display:block;width:100%;height:auto;aspect-ratio:3/2;border-radius:8px}
.startseiten-bild figcaption{margin-top:10px;font-size:.82rem;line-height:1.55;color:var(--text-leise);overflow-wrap:break-word}
@media(max-width:600px){.merkmale--startbilder{grid-template-columns:minmax(0,1fr)}.merkmale--startbilder .merkmal{padding:18px}}

/* Alternative Bildplatzierung auf der Leistungsübersicht. */
.hero--leistungen-foto { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 100px; }
.hero--leistungen-foto .hero__raster { position: relative; z-index: 2; pointer-events: none; }
.hero--leistungen-foto .hero__raster > div { pointer-events: auto; }
.hero--leistungen-foto .hero__raster { grid-template-columns: minmax(0, 1fr); }
.hero--leistungen-foto .hero__raster > div { max-width: 610px; }
.leistungen-hero-bild { position: absolute; inset: 0; margin: 0; z-index: 0; }
.leistungen-hero-bild img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.leistungen-hero-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #f8f2e6 0%, rgba(248,242,230,.97) 35%, rgba(248,242,230,.86) 48%, rgba(248,242,230,.08) 78%); pointer-events: none; }
.leistungen-hero-bild figcaption { position: absolute; z-index: 1; right: 20px; bottom: 18px; max-width: 420px; margin-left: 20px; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,.95); color: var(--text); font-size: .8rem; line-height: 1.5; }
.leistungen-hinweis { margin-top: 32px; }
.leistungen-hinweis .zahlkasten { max-width: none; }
@media (max-width: 919px) {
  .hero--leistungen-foto { padding-bottom: 360px; background: var(--sand); }
  .hero--leistungen-foto .hero__raster > div { max-width: none; }
  .leistungen-hero-bild { top: auto; height: 330px; }
  .leistungen-hero-bild img { object-position: 80% 50%; }
  .leistungen-hero-bild::after { background: linear-gradient(180deg, var(--sand), transparent 20%); }
  .leistungen-hero-bild figcaption { bottom: 12px; right: 20px; }
}

.hero--startseite-foto .leistungen-hero-bild img { object-position: right center; }

.hero--rubrik-foto .leistungen-hero-bild img { object-position: right center; }

.hero--rubrik-foto .hero__oberzeile { overflow-wrap: anywhere; }