/* kk-schweiz.ch: gemeinsames Aussehen aller Seiten.
 *
 * Grundlage ist die Design-Vorlage (16 Artboards). Die Vorlage
 * arbeitet mit festen Desktop-Massen und Inline-Stilen; hier steht dasselbe
 * System als Klassen, damit der Seitenbauer es wiederverwenden kann und die
 * Mobilansicht sauber daraus folgt.
 *
 * Aufbau:
 *   1  Farben, Schrift, Grundlagen
 *   2  Bausteine (Knopf, Karte, Ueberschrift, Bildplatz)
 *   3  Kopf, Navigation, Fuss
 *   4  Sektionen der Inhaltsseiten
 *   5  Praemienrechner, Ergebnisliste, Formular
 *   6  Bewegung und Zugaenglichkeit
 *   7  Mobil
 */

/* ============================================================
   1  Farben, Schrift, Grundlagen
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-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 {
  --paper: #fafcfb;
  --weiss: #ffffff;
  --ink: #0f172b;
  --ink-70: #44534a;
  --ink-55: #5a6b60;
  --ink-45: #6d7c73;
  --ink-40: #8a988f;
  --emerald: #007f4e;
  --emerald-dunkel: #00663e;
  --emerald-hell: #d1f1e0;
  --forest: #194430;
  --forest-tief: #123324;
  --forest-linie: #2a5a42;
  --mint: #d1f1e0;
  --mint-2: #bfe9d3;
  --mint-text: #a9cebb;
  --mint-label: #7fb497;
  --linie: #dbe7e0;
  --linie-hell: #eaf2ed;
  /* Amber der Design-Vorlage. Gilt fuer alle Seiten: gefuellte
     Amber-Knoepfe, Frist-Leiste und die Kopfzeile der Top-1-Kassenkarte.
     --amber-dunkel ist zugleich Hover-Flaeche und Druckkante der Knoepfe. */
  --amber: #f7a44b;
  --amber-dunkel: #e08a2e;
  /* Abstufungen der Kassen-Kartenkoepfe: Empfehlung Nr. 1 = --amber, dann heller. */
  --amber-2: #fbc98a;
  --amber-3: #fde4c2;
  /* Orange der Textlinks und Akzente («Mehr erfahren», Hover in Kopf und
     Karten). Dunkler als --amber, damit es auf Weiss lesbar bleibt. */
  --orange-link: #c4761b;
  /* Sandton der Vorlage: Trennlinien und die grossen Ziffern der Startseite. */
  --sand: #e0dacc;
  /* Fussfarbe der Vorlage, eine Spur tiefer als --forest. */
  --forest-fuss: #0f2a1c;
  --warn: #b3541e;
  /* Rotton der Fehlermeldungen im Quiz (nach Design-Vorlage) */
  --fehler: #b3401f;

  /* ---- Tokens der Design-Vorlage (Unterseiten) ----
     Der Gruenschleier traegt alle ruhigen Baender und Hinweis-Kaesten, die
     helle Gruenflaeche die hervorgehobene Tabellenspalte und die optimierte
     Beispielkarte. Die drei Textabstufungen loesen die frueheren --ink-*
     Werte auf den Unterseiten ab. */
  --schleier: rgba(25, 68, 48, .05);
  --gruen-hell: #e7efea;
  --gruen-linie: #c2d5cb;
  --text-2: #3e5247;
  --text-3: #4c6156;
  --grau-text: #8a8574;
  /* Rand der umrissenen Knoepfe (Vorlage). */
  --rand-knopf: #c9c2b2;

  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --schatten: 0 20px 50px rgba(15, 23, 43, .07);
  --schatten-tief: 0 24px 60px rgba(15, 23, 43, .14);
  /* Huellenbreite der Design-Vorlage (1240px bei 32px Innenabstand). */
  --huelle: 1240px;
  --rand: clamp(1.15rem, .6rem + 2.2vw, 2rem);
}

* { box-sizing: border-box; }

/* Kein scroll-behavior: smooth am html: iOS/Safari verschluckt damit direkt
   nach dem Laden Scroll-Gesten. Sanftes Scrollen nur gezielt per JS. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--emerald-dunkel); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

:focus-visible {
  outline: 3px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 6px;
}

.huelle { width: 100%; max-width: var(--huelle); margin: 0 auto; padding-left: var(--rand); padding-right: var(--rand); }
.huelle-schmal { max-width: 820px; }
/* Textspalte der Themenseiten (nach Design-Vorlage): 880px, mit der
   Leistungstabelle als einziger breiterer Ausnahme (1000px). */
.huelle-text { max-width: 880px; }
.huelle-text.huelle-breit { max-width: 1000px; }

.abschnitt { padding: clamp(2.6rem, 1.6rem + 3.4vw, 4rem) 0; }
.abschnitt.band-weiss { background: var(--weiss); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
.abschnitt.band-dunkel { background: var(--forest); color: #fff; }
.abschnitt.band-dunkel .lauftext { color: var(--mint-text); }

.h-display { font-size: clamp(1.55rem, 1.15rem + 1.6vw, 2rem); font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
h1.h-display { font-size: clamp(1.9rem, 1.25rem + 2.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.03em; }

.augenbraue {
  font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--emerald);
}
/* In den grossen Sektionsköpfen (nicht nummerierte Abschnitte) steht die
   Augenbraue in Forest statt in Emerald (nach Design-Vorlage). */
.augenbraue-forest { color: var(--forest); }
.augenbraue-emerald { color: var(--emerald); }
/* Rahmen-Kasten fuer Hinweistexte (Marken-/Quellenhinweis auf /anbieter). */
.hinweis-rahmen { border: 1px solid var(--sand); border-radius: 10px; padding: 1.25rem 1.5rem; margin-top: 1.5rem; font-size: .8125rem; line-height: 1.65; color: var(--grau-text); }
.abschnitt.band-dunkel .augenbraue { color: var(--mint); }

.lauftext { font-size: 1rem; line-height: 1.7; color: var(--ink-70); max-width: 66ch; }
.klein { font-size: .8125rem; line-height: 1.6; color: var(--ink-55); }
/* Quellenzeile (nach Design-Vorlage): 13.5px, kursiv, ruhiges Grau. */
.quellenzeile { margin-top: .9rem; font-size: .84375rem; line-height: 1.65; font-style: italic; color: var(--grau-text); }
.text-link { font-weight: 700; color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.betont { color: var(--emerald); }

.kopfzeile { max-width: 60ch; margin-bottom: clamp(1.4rem, 1rem + 1.2vw, 2.2rem); display: grid; gap: .55rem; }
.kopfzeile-mitte { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
/* Breite Kopfzeile (nach Design-Vorlage): Titel links, rechts der
   erklaerende Satz oder ein Knopf, beide unten ausgerichtet. */
.kopfzeile-breit {
  max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem;
}
.kopfzeile-breit > div { display: grid; gap: .55rem; max-width: 40ch; }
.kopfzeile-breit .augenbraue { display: block; }
.kopfzeile-breit > .lauftext { max-width: 24rem; }
.kopfzeile-breit > .knopf { flex: none; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.versteckt { display: none !important; }

/* ============================================================
   2  Bausteine
   ============================================================ */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--emerald); color: #fff; font-weight: 700; font-size: .9375rem;
  padding: .9rem 1.6rem; border-radius: 13px; border: 1.5px solid var(--emerald);
  cursor: pointer; text-align: center; line-height: 1.25; transition: background .16s, color .16s, border-color .16s;
}
.knopf:hover { background: var(--emerald-dunkel); border-color: var(--emerald-dunkel); color: #fff; }
/* Knopf mit ruhigem Rand (nach Design-Vorlage): Sandrand, Schrift in
   Forest, Hover im Akzent-Orange. Loest den frueheren Emerald-Umriss ab. */
.knopf-rand { background: transparent; color: var(--forest); border-width: 1px; border-color: var(--rand-knopf); border-radius: 8px; }
.knopf-rand:hover { background: transparent; color: var(--orange-link); border-color: var(--orange-link); }
.knopf-weiss { background: #fff; color: var(--forest); border-color: #fff; }
.knopf-weiss:hover { background: var(--mint); color: var(--forest); border-color: var(--mint); }
.knopf-mint { background: var(--mint); color: var(--emerald); border-color: var(--mint); }
.knopf-mint:hover { background: var(--mint-2); color: var(--emerald-dunkel); border-color: var(--mint-2); }
/* Amber-Knopf mit Druckkante (nach Design-Vorlage): die untere
   Kante liegt zwei Bildpunkte tiefer in --amber-dunkel, beim Druecken faellt
   der Knopf auf sie herab. */
.knopf-amber {
  background: var(--amber); color: var(--forest-tief, #123324); border-color: var(--amber);
  font-weight: 700; font-size: 1rem; padding: 1rem 1.6rem; border-radius: 8px;
  box-shadow: 0 2px 0 var(--amber-dunkel);
  transition: background .16s, color .16s, border-color .16s, box-shadow .1s, transform .1s;
}
.knopf-amber:hover { background: var(--amber-dunkel); color: var(--forest-tief, #123324); border-color: var(--amber-dunkel); }
.knopf-amber:active { background: var(--amber-dunkel); border-color: var(--amber-dunkel); box-shadow: none; transform: translateY(2px); }
/* Knopf mit ruhigem Rand (Vorlage: «Alle Ratgeber», zweiter Knopf der
   Kassenkarten). Hover faerbt Rand und Schrift ins Akzent-Orange. */
.knopf-umriss {
  background: transparent; color: var(--ink); border-color: #c9c2b2; font-weight: 700;
  padding: .8rem 1.35rem;
}
.knopf-umriss:hover { background: transparent; color: var(--orange-link); border-color: var(--orange-link); }
.knopf-umriss svg { width: 15px; height: 15px; }
/* Dunkelgruener Knopf auf amberfarbener Flaeche (Karte «Unsicher, was Sie
   brauchen?»). */
.knopf-dunkel { background: var(--forest); color: #f7f4ee; border-color: var(--forest); border-radius: 8px; }
.knopf-dunkel:hover { background: var(--forest-tief); color: #fff; border-color: var(--forest-tief); }
/* Zweiter Knopf auf amberfarbenem Grund: kraeftiger Forest-Umriss. */
.knopf-umriss-dunkel {
  background: transparent; color: var(--forest); border: 2px solid var(--forest); border-radius: 8px;
  font-weight: 700;
}
.knopf-umriss-dunkel:hover { background: var(--schleier); color: var(--forest); border-color: var(--forest); }
.knopf-mini { padding: .65rem 1.05rem; font-size: .8125rem; border-radius: 11px; }
.knopf-eckig { border-radius: 13px; }
.knopf-voll { width: 100%; }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

/* Bildplatz: solange die Illustration fehlt, steht eine ruhige Mintflaeche
   im richtigen Seitenverhaeltnis. Kein gebrochenes Bildzeichen. */
.illu {
  margin: 0; position: relative; border-radius: var(--r-l); overflow: hidden;
  background: var(--mint); aspect-ratio: var(--seitenverhaeltnis, 4 / 3);
}
.illu img { width: 100%; height: 100%; object-fit: cover; }
.illu.leer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(140deg, rgba(255, 255, 255, .35), transparent 55%);
}

.merkliste { display: grid; gap: .75rem; margin-top: 1.2rem; }
.merkliste li { display: flex; gap: .7rem; font-size: .9375rem; line-height: 1.55; color: var(--ink-70); }
.merkliste .haken { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: var(--mint); color: var(--emerald); }
.merkliste .haken svg { width: 13px; height: 13px; }
.merkliste strong { color: var(--ink); }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

/* Brotkrumen (nach Design-Vorlage): ruhiges Grau, der letzte Punkt in
   Forest und halbfett. Auf Seiten mit Seitenkopf stehen sie in diesem
   (.hero-krumen), sonst als eigene Zeile ueber dem Inhalt. */
.brotkrumen { padding-top: 1.6rem; }
.brotkrumen ol, .hero-krumen ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  font-size: .84375rem; color: var(--grau-text);
}
.brotkrumen li + li::before, .hero-krumen li + li::before {
  content: '›'; margin-right: .35rem; color: var(--grau-text);
}
.brotkrumen a, .hero-krumen a { color: var(--grau-text); }
.brotkrumen a:hover, .hero-krumen a:hover { color: var(--orange-link); }
.brotkrumen span, .hero-krumen span { color: var(--forest); font-weight: 600; }

/* ============================================================
   3  Kopf, Navigation, Fuss
   ============================================================ */

#kk-topbar {
  display: none; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  background: var(--forest); color: var(--mint); font-size: .8125rem; line-height: 1.45;
  text-align: center; padding: .55rem var(--rand); text-decoration: none;
}
#kk-topbar b { color: var(--amber); }
#kk-topbar .kk-tb-cta { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; color: var(--mint); }
#kk-topbar .kk-tb-kurz { display: none; }
#kk-topbar:hover { color: var(--mint); }

/* Kopfzeile nach der Design-Vorlage: klebend, leicht
   durchscheinend mit weichem Schleier dahinter. Wo backdrop-filter fehlt,
   greift die Ersatzfarbe fast deckend, der Kopf bleibt also immer lesbar. */
.seitenkopf {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--sand);
}
@supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) {
  .seitenkopf {
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
}
.seitenkopf .zeile { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; padding-top: .7rem; padding-bottom: .7rem; }
/* Desktop: Navigation exakt in der Seitenmitte, nicht rechts am Knopf. Drei
   Spalten, Logo und Knopf bekommen gleich viel Raum. */
@media (min-width: 1024px) {
  .seitenkopf .zeile { display: grid; grid-template-columns: 1fr auto 1fr; }
  .hauptnavi { margin-left: 0; justify-self: center; }
  .kopf-rechts { justify-self: end; }
}

.wortmarke { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
/* Maskottchen als Markenzeichen: feste Hoehe, Breite folgt dem
   Seitenverhaeltnis der Datei (219x300). */
.wortmarke .marke-bild { height: 44px; width: auto; flex: none; }
.wortmarke > span { display: grid; line-height: 1.15; }
/* Wortmarke: groesser, «kk» gruen, «-schweiz» schwarz. */
.wortmarke .name { font-weight: 800; font-size: 1.625rem; color: var(--ink); letter-spacing: -.02em; }
/* Die Wortmarke steht einfarbig in Forest; das Kuerzel bekommt keinen
   eigenen Ton mehr. */
.wortmarke .name .kk { color: var(--emerald); }
/* Der frühere Zusatz «Krankenkassen vergleichen. Besser entscheiden.» steht
   seit der Design-Vorlage nur noch im Seitenfuss. */

.hauptnavi { display: flex; align-items: center; gap: 2rem; margin-left: auto; font-size: .9375rem; font-weight: 600; }
.hauptnavi > a { color: var(--forest); white-space: nowrap; }
/* Hover und aktuelle Seite im Akzent-Orange der Vorlage. */
.hauptnavi > a:hover, .hauptnavi > a[aria-current] { color: var(--orange-link); }
.navi-gruppe { position: relative; }
.navi-gruppe > button {
  display: flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer;
  font-size: .9375rem; font-weight: 600; color: var(--forest); padding: .4rem 0; white-space: nowrap;
}
.navi-gruppe > button:hover { color: var(--orange-link); }
.navi-gruppe > button svg { width: 14px; height: 14px; transition: transform .18s; }
.navi-gruppe.offen > button { color: var(--orange-link); }
.navi-gruppe.offen > button svg { transform: rotate(180deg); }
.navi-klapp {
  position: absolute; top: calc(100% + .5rem); left: -.75rem; min-width: 20rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m);
  box-shadow: var(--schatten); padding: .5rem; display: none; z-index: 70;
}
/* Bruecke ueber den sichtbaren Abstand zwischen Schalter und Klappmenue.
   Ohne sie verlaesst der Zeiger auf dem Weg nach unten die Gruppe und das
   Menue schliesst, bevor man einen Eintrag erreicht. Die Flaeche ist
   unsichtbar und gehoert zum Klappmenue, der Hover-Bereich bleibt also
   durchgehend. Der Abstand darf deshalb nie ueber margin entstehen. */
.navi-klapp::before { content: ''; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
.navi-gruppe.offen .navi-klapp { display: grid; gap: .1rem; }
.navi-klapp a { display: grid; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; color: var(--ink); }
.navi-klapp a:hover { background: var(--paper); color: var(--emerald); }
.navi-klapp b { font-size: .875rem; font-weight: 700; }
.navi-klapp small { font-size: .75rem; color: var(--ink-55); font-weight: 500; line-height: 1.45; }

.kopf-rechts { display: flex; align-items: center; gap: .6rem; flex: none; }
.kopf-cta { padding: .75rem 1.375rem; font-size: .9375rem; font-weight: 700; border-radius: 6px; }

.navi-schalter {
  display: none; width: 42px; height: 42px; border: 1px solid var(--linie); background: var(--weiss);
  border-radius: 11px; color: var(--ink); cursor: pointer; place-items: center;
}
.navi-schalter svg { width: 22px; height: 22px; }

/* Handy-Menue: Kachel-Hub.
   Kopf und Fuss stehen fest, gerollt wird nur die Ebene dazwischen. Die
   Ebenen liegen uebereinander in der Buehne: Ebene 1 (Kacheln) rutscht nach
   links, Ebene 2 (Liste) schiebt von rechts herein. min-height:0 ist am
   Blatt und an der Buehne Pflicht, sonst rollt WebKit die Flex-Kinder nicht;
   -webkit-overflow-scrolling bleibt bewusst weg, es friert Ebenen ein, die
   beim Laden noch versteckt sind. */
#mobile-navi {
  position: fixed; inset: 0; z-index: 90; background: var(--paper);
  display: flex; flex-direction: column; min-height: 0;
  visibility: hidden; opacity: 0; transform: translateY(1.5rem);
  transition: opacity .22s, transform .22s, visibility .22s;
  touch-action: pan-y; overscroll-behavior: contain;
}
#mobile-navi.offen { visibility: visible; opacity: 1; transform: none; }
#mobile-navi .navi-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem var(--rand); border-bottom: 1px solid var(--linie); background: var(--weiss); flex: none; }
#mobile-navi .navi-kopf .wortmarke .name { font-size: 1.1875rem; }

#mobile-navi .navi-buehne { position: relative; flex: 1 1 auto; min-height: 0; }
#mobile-navi .navi-ebene {
  position: absolute; inset: 0; min-height: 0; overflow-y: auto;
  touch-action: pan-y; overscroll-behavior: contain;
  padding: 1.1rem var(--rand) 1.4rem; background: var(--paper);
  transition: transform .22s ease, opacity .22s ease, visibility .22s;
}
/* Sichtbarkeit der Ebenen NUR bei offenem Menue setzen. Ein explizites
   visibility: visible an der Ebene wuerde das visibility: hidden des
   geschlossenen Menues aufheben: die Ebene laege dann durchsichtig ueber der
   ganzen Seite und schluckte Mausrad, Touch und Klicks. Die geschlossene
   Huelle bekommt zusaetzlich pointer-events: none als zweite Sicherung. */
#mobile-navi { pointer-events: none; }
#mobile-navi.offen { pointer-events: auto; }
#mobile-navi .ebene-an { transform: none; opacity: 1; }
#mobile-navi.offen .ebene-an { visibility: visible; }
#mobile-navi .ebene-links { transform: translateX(-14%); opacity: 0; visibility: hidden; }
#mobile-navi .ebene-rechts { transform: translateX(100%); opacity: 1; visibility: hidden; }

/* Ebene 1: Kachel-Raster, zwei Spalten */
#mobile-navi .kachel-raster { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
#mobile-navi .navi-kachel {
  display: flex; flex-direction: column; min-height: 7.6rem;
  padding: .9rem .8rem 1rem; background: var(--weiss);
  border: 1px solid var(--linie); border-radius: var(--r-m);
  color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color .18s, background .18s, transform .18s;
}
#mobile-navi .navi-kachel:active { transform: scale(.985); border-color: var(--mint-label); }
#mobile-navi .kachel-zeichen { display: block; margin-bottom: auto; color: var(--emerald); }
#mobile-navi .kachel-zeichen svg { width: 26px; height: 26px; }
#mobile-navi .kachel-titel { display: block; margin-top: .85rem; font-size: .9375rem; font-weight: 800; letter-spacing: -.015em; }
#mobile-navi .kachel-unter { display: block; margin-top: .2rem; font-size: .71875rem; line-height: 1.4; color: var(--ink-55); }
#mobile-navi .kachel-mehr { display: flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .6875rem; font-weight: 700; color: var(--emerald); }
#mobile-navi .kachel-mehr svg { width: 13px; height: 13px; }
#mobile-navi .kachel-pfeil { display: block; flex: none; color: var(--emerald); }
#mobile-navi .kachel-pfeil svg { width: 20px; height: 20px; }
#mobile-navi .navi-kachel[aria-current="page"] { background: var(--mint); border-color: var(--emerald); }
#mobile-navi .navi-kachel[aria-current="page"] .kachel-unter { color: var(--forest); }

/* Breite Kachel ueber beide Spalten: Zeichen, Text, Pfeil nebeneinander */
#mobile-navi .kachel-breit { grid-column: span 2; flex-direction: row; align-items: center; gap: .8rem; min-height: 0; padding: .95rem; }
#mobile-navi .kachel-breit .kachel-zeichen { margin: 0; flex: none; }
#mobile-navi .kachel-breit .kachel-text { flex: 1; min-width: 0; }
#mobile-navi .kachel-breit .kachel-titel { margin-top: 0; }
#mobile-navi .kachel-amber { background: var(--amber); border-color: var(--amber-dunkel); border-bottom-width: 2px; color: var(--forest); }
#mobile-navi .kachel-amber .kachel-zeichen, #mobile-navi .kachel-amber .kachel-pfeil { color: var(--forest); }
#mobile-navi .kachel-amber .kachel-unter { color: var(--forest); opacity: .86; }
#mobile-navi .kachel-amber:active { border-color: var(--amber-dunkel); }

/* Rechtliches und FINMA-Zeile unter dem Raster */
#mobile-navi .navi-recht { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--linie); font-size: .75rem; line-height: 1.9; color: var(--ink-40); }
#mobile-navi .navi-recht a { color: var(--ink-55); }
#mobile-navi .recht-sep { color: var(--linie); padding: 0 .3rem; }
#mobile-navi .navi-finma { margin-top: .6rem; font-size: .71875rem; font-weight: 700; color: var(--mint-label); }

/* Ebene 2: Zurueck-Knopf, Titel und Listenkarten */
#mobile-navi .navi-zurueck {
  display: inline-flex; align-items: center; gap: .4rem; height: 44px;
  padding: 0 .75rem 0 .35rem; margin: -.25rem 0 .4rem -.35rem;
  background: none; border: 0; border-radius: 10px;
  font-size: .875rem; font-weight: 700; color: var(--emerald); cursor: pointer;
  transition: background .18s;
}
#mobile-navi .navi-zurueck:active { background: var(--mint); }
#mobile-navi .navi-zurueck svg { width: 20px; height: 20px; }
#mobile-navi .tafel-titel { margin: .1rem 0 .9rem; font-size: 1.4375rem; font-weight: 800; }
#mobile-navi .navi-karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m); overflow: hidden; margin-bottom: .75rem; }
#mobile-navi .navi-zeile { display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: .7rem .875rem; color: var(--ink); border-top: 1px solid var(--linie-hell); transition: background .18s; }
#mobile-navi .navi-zeile:first-child { border-top: 0; }
#mobile-navi .navi-zeile:active { background: var(--linie-hell); }
#mobile-navi .zeilen-text { flex: 1; min-width: 0; }
#mobile-navi .zeilen-text b { display: block; font-size: .90625rem; font-weight: 700; letter-spacing: -.01em; }
#mobile-navi .zeilen-text span { display: block; margin-top: .1rem; font-size: .75rem; line-height: 1.4; color: var(--ink-55); }
#mobile-navi .zeilen-pfeil { display: block; flex: none; color: var(--mint-label); }
#mobile-navi .zeilen-pfeil svg { width: 18px; height: 18px; }
#mobile-navi .zeile-fuehrend { background: var(--mint); border-top: 0; }
#mobile-navi .zeile-fuehrend .zeilen-text b { color: var(--forest); }
#mobile-navi .zeile-fuehrend .zeilen-text span { color: var(--forest); opacity: .8; }
#mobile-navi .zeile-fuehrend .zeilen-pfeil { color: var(--forest); }
#mobile-navi .gruppe-titel { margin: 1.25rem 0 .55rem .2rem; font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }

#mobile-navi .navi-fuss { flex: none; display: grid; gap: .5rem; padding: .9rem var(--rand) 1.2rem; border-top: 1px solid var(--linie); background: var(--weiss); }
#mobile-navi .navi-fein { text-align: center; font-size: .71875rem; line-height: 1.45; color: var(--ink-55); }

/* Fuss der Design-Vorlage: tiefes Dunkelgrün, vier Spalten. */
.seitenfuss { background: var(--forest-fuss); color: var(--mint); margin-top: 0; }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.2rem; padding-top: 3rem; padding-bottom: 2.4rem; }
.fuss-marke .name { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -.02em; margin-bottom: .7rem; }
/* Markenzeichen im Fuss ist allein das Maskottchen. Das frühere grüne
   Haken-Kaestchen (::before) ist entfernt, seit das Maskottchen-Logo hier
   steht: zwei Zeichen nebeneinander waren eines zu viel. */
.fuss-marke .name .marke-bild { flex: none; height: 34px; width: auto; }
.fuss-marke p { font-size: .875rem; line-height: 1.65; color: var(--mint-text); margin-bottom: .9rem; }
.fuss-marke .finma { font-size: .8125rem; color: var(--mint-text); }
.seitenfuss h4 { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-label); margin-bottom: .85rem; font-weight: 800; }
.seitenfuss ul { display: grid; gap: .5rem; font-size: .875rem; }
.seitenfuss a { color: var(--mint); }
.seitenfuss a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Schlusszeile: links das Copyright, rechts die Sternchen-Fussnote zum
   Ersparnis-Badge (nur auf der Seite, die den Badge zeigt). */
.fuss-zeile { border-top: 1px solid rgba(247, 244, 238, .12); }
.fuss-zeile .huelle {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem;
  padding-top: 1rem; padding-bottom: 1rem;
}
.fuss-zeile p { font-size: .9375rem; color: var(--mint-label); }

/* ============================================================
   4  Sektionen der Inhaltsseiten
   ============================================================ */

/* --- Hero der Startseite ---
   Aufbau der Design-Vorlage: links Wertversprechen und
   Vergleichs-Karte, rechts das Familienfoto mit gestreiftem Schmuckrahmen und
   dem Ersparnis-Badge. Der Hero steht auf ruhigem Weiss (die Vorlage hat kein
   Hintergrundbild); der Seitenkopf der Unterseiten behaelt sein Panorama. */
.hero { position: relative; overflow: hidden; background: var(--weiss); border-bottom: 1px solid var(--sand); }
.hero-bild { position: absolute; inset: 0; pointer-events: none; }
.hero-bild img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; opacity: .45; }
.hero-bild .schleier { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--paper), rgba(250, 252, 251, .8) 55%, rgba(250, 252, 251, .45)); }
.hero-innen { position: relative; z-index: 1; padding-top: clamp(1.5rem, .9rem + 1.9vw, 2.8rem); padding-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); }
.hero-raster { display: grid; gap: clamp(1.6rem, 1rem + 3vw, 4rem); align-items: center; }
.hero-text { min-width: 0; }
.hero-text .augenbraue { display: block; margin-bottom: 1.1rem; }
.hero-text h1 { font-size: clamp(1.9rem, 1.2rem + 2.5vw, 3.1rem); line-height: 1.1; letter-spacing: -.02em; margin-bottom: .8rem; }
.hero-text .vorspann { margin-top: .6rem; margin-bottom: 1.15rem; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-70); max-width: 52ch; }
.vertrauenszeile { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; margin-bottom: 1.5rem; font-size: .875rem; font-weight: 600; }
/* Bewusst nur zwei Punkte: sie sollen auf einer Hoehe stehen, darum bricht
   kein Eintrag in sich um. */
.vertrauenszeile li { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }
.vertrauenszeile .haken { display: grid; place-items: center; color: var(--emerald); }
.vertrauenszeile .haken svg { width: 14px; height: 14px; }

/* Vergleichs-Karte im Hero (Vorlage): die zwei Segmente nebeneinander, der
   Amber-Knopf darunter ueber die ganze Breite. */
.hero-wahl {
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 14px;
  padding: 1.5rem; max-width: 33rem; box-shadow: 0 24px 48px -24px rgba(25, 68, 48, .25);
}
.hero-wahl .wahl-frage { display: block; font-size: 1.0625rem; font-weight: 800; margin-bottom: .9rem; }
/* Segmentwahl: zwei anwaehlbare Optionen (aria-checked), der Knopf darunter
   fuehrt auf die Themenseite der gewaehlten Versicherung. */
.segmentwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; min-width: 0; margin-bottom: 1rem; }
.segmentwahl button {
  min-width: 0; display: flex; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere;
  cursor: pointer; border: 2px solid var(--sand); border-radius: 8px; padding: .8rem .5rem; min-height: 48px;
  font-weight: 600; font-size: .875rem; font-family: inherit; background: var(--weiss); color: var(--ink-70); line-height: 1.2;
  transition: border-color .16s, background .16s, color .16s;
}
.segmentwahl button[aria-checked="true"] { background: #e7efea; border-color: var(--forest); color: var(--forest); font-weight: 800; }
.segmentwahl button:not([aria-checked="true"]):hover,
.segmentwahl button:not([aria-checked="true"]):focus-visible { border-color: var(--orange-link); color: var(--forest); }
.hero-wahl .wahl-start { width: 100%; font-size: 1.0625rem; padding: 1rem 1.2rem; border-radius: 8px; }
.hero-wahl .wahl-fuss { margin-top: .8rem; font-size: .78125rem; line-height: 1.5; color: var(--ink-45); text-align: center; }
.hero-wahl .wahl-fuss a { color: var(--ink-45); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.hero-wahl .wahl-fuss a:hover { color: var(--orange-link); }

/* Bildseite: Schmuckrahmen (feine Schraffur, nach rechts unten versetzt),
   darueber das Foto, darauf der Ersparnis-Badge. */
.hero-medien { position: relative; min-width: 0; }
.hero-rahmen {
  position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border-radius: var(--r-m);
  background: repeating-linear-gradient(45deg, #e8e6e1 0 2px, transparent 2px 10px);
  pointer-events: none;
}
/* .hero-foto ist ein Bildplatz (.illu): Form und Format kommen von dort,
   die Hoehe folgt hier dem Bildschirm, damit der Hero in einen Bildschirm
   passt (Hero-Gesetz). */
.hero-foto {
  position: relative; border-radius: var(--r-m);
  aspect-ratio: auto; height: clamp(21rem, 14rem + 22vh, 34rem);
}
.hero-badge {
  position: absolute; left: -1.6rem; bottom: 2rem; z-index: 2;
  display: flex; align-items: center; gap: .9rem; max-width: calc(100% - 1rem);
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 12px;
  padding: .9rem 1.15rem; box-shadow: 0 16px 32px -16px rgba(25, 68, 48, .3);
}
.hero-badge .zahl { flex: none; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--orange-link); line-height: 1.1; }
.hero-badge .worte { font-size: .78125rem; line-height: 1.4; color: var(--ink-70); max-width: 10rem; }

/* --- Seitenkopf der Unterseiten (nach Design-Vorlage) ---
   Weisser Grund mit feiner Sand-Unterkante, links Brotkrumen, Augenbraue,
   Ueberschrift, Lauftext und Knoepfe, rechts das Foto auf einer nach links
   unten versetzten Schraffur-Flaeche. Das Panorama-Hintergrundbild der
   frueheren Fassung gibt es hier nicht mehr; es bleibt allein dem
   Startseiten-Hero vorbehalten. */
.seiten-hero { position: relative; overflow: hidden; background: var(--weiss); border-bottom: 1px solid var(--sand); padding: clamp(1.8rem, 1.2rem + 2vw, 3.5rem) 0 clamp(2.2rem, 1.4rem + 2.6vw, 4.5rem); }
.seiten-hero .huelle {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; align-items: center;
  gap: clamp(1.8rem, 1.2rem + 3vw, 4rem);
}
.seiten-hero .hero-worte { min-width: 0; }
.seiten-hero .hero-krumen { margin-bottom: 1.5rem; }
.seiten-hero .augenbraue { display: block; margin-bottom: 1.25rem; }
.seiten-hero h1 {
  font-size: clamp(1.9rem, 1.25rem + 2.6vw, 3rem); font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0 0 1.375rem;
}
.seiten-hero .hero-lauftext {
  font-size: clamp(1rem, .95rem + .3vw, 1.125rem); line-height: 1.65; color: var(--text-2);
  max-width: 560px; margin: 0; text-wrap: pretty;
}
.seiten-hero .knopfzeile { margin-top: 2rem; gap: .875rem; align-items: center; }
/* Grosse Knopf-Fassung im Seitenkopf (Vorlage: 17px, 16/36px, Radius 8). */
.seiten-hero .knopf { font-size: 1.0625rem; padding: 1rem 2.25rem; border-radius: 8px; }
.seiten-hero .knopf-rand { font-size: 1rem; padding: .9375rem 1.75rem; }
.seiten-hero .hero-vertrauen { margin-top: .875rem; font-size: .8125rem; line-height: 1.55; color: var(--grau-text); }
.seiten-hero .hero-vertrauen a { color: var(--grau-text); text-decoration: underline; text-underline-offset: 2px; }
.seiten-hero .hero-vertrauen a:hover { color: var(--orange-link); }

/* Bildseite: Schraffur-Flaeche versetzt hinter dem Foto. */
.hero-flaeche { position: relative; min-width: 0; }
.hero-schraffur {
  position: absolute; inset: 24px -24px -24px 24px; border-radius: var(--r-m);
  background: repeating-linear-gradient(45deg, #e8e6e1 0 2px, transparent 2px 10px);
  pointer-events: none;
}
.hero-foto-seite {
  position: relative; display: block; width: 100%; height: 480px;
  object-fit: cover; border-radius: var(--r-m);
}
.hero-foto-seite.leer { background: var(--gruen-hell); }
/* Rechte Spalte ohne Foto (Steckbrief-Karte der Anbieterseiten). */
.hero-neben { min-width: 0; }

/* Helle Fassung ohne rechte Spalte (Uebersichtsseiten): ruhiger
   Gruenschleier statt Weiss, Text auf 760px. */
.seiten-hero.hell { background: var(--schleier); }
.seiten-hero.hell h1 { max-width: 760px; }
.seiten-hero.hell .hero-lauftext { max-width: 640px; }

/* --- Vorteile: vier Spalten mit grosser Ziffer (nach Design-Vorlage) ---
   Das Band traegt einen ruhigen Gruenschleier, die Spalten sind durch feine
   senkrechte Linien getrennt. */
.abschnitt.band-schleier { background: rgba(25, 68, 48, .05); }
.vorteile { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(25, 68, 48, .15); }
.vorteile li { padding: 1.7rem 1.6rem 1.7rem 0; border-right: 1px solid rgba(25, 68, 48, .15); margin-right: 1.6rem; }
.vorteile li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.vorteile .ziffer { display: block; font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--sand); letter-spacing: -.02em; margin-bottom: 1rem; }
.vorteile h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: .55rem; color: var(--forest); }
.vorteile p { font-size: .9375rem; line-height: 1.6; color: var(--ink-70); }

/* --- Sektion «Schweizer Krankenkassen im Vergleich» (echte Beispiel-Prämien
   aus /api/praemien) ---
   Design-Vorlage kassen-sektion-2026-08-21: ein Raster aus weissen Karten je
   Empfehlungs-Kasse (Rang-Zeile, Kassenkopf, Preis, Rating, Häkchenliste,
   zwei Knöpfe untereinander), darunter die Fussnoten mit Trennlinie. Die
   Sektion steht auf der Startseite und auf den Themen- und Anbieterseiten;
   gefüllt wird das Raster von site.js. */
.kv-karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem; align-items: start;
}
/* Kartenoptik der Startseiten-einer Design-Vorlage: farbige Kopfzeile in
   Orange-Abstufung je Rang mit Nummernkreis, darunter der weisse Kartenteil. */
.kv-karte {
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 14px;
  display: flex; flex-direction: column; overflow: hidden;
}
.kv-karte:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.kv-inhalt { display: grid; gap: 1.1rem; align-content: start; padding: 1.4rem 1.6rem 1.6rem; flex: 1; }

.kv-kopf { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.6rem; background: var(--linie-hell); }
.kv-karte.rang-1 .kv-kopf { background: var(--amber); }
.kv-karte.rang-2 .kv-kopf { background: var(--amber-2); }
.kv-karte.rang-3 .kv-kopf { background: var(--amber-3); }
.kv-nummer {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--forest); color: var(--amber); font-weight: 800; font-size: .875rem;
}
.kv-rangworte { display: grid; line-height: 1.25; min-width: 0; }
.kv-rangworte b { font-size: .9375rem; font-weight: 800; color: var(--forest); }
.kv-rangworte small { font-size: .78125rem; font-weight: 600; color: rgba(25, 68, 48, .65); }

/* Im Kopf steht allein das Logo (Wortmarke), darum eine längliche Fläche
   ohne Kachel. Der Name erscheint nur, wenn kein Logo hinterlegt ist. */
.kv-kasse { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.kv-logo { flex: none; display: block; height: 38px; max-width: 160px; }
.kv-logo img { display: block; height: 100%; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.kv-name { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere; }

.kv-preisblock { display: grid; gap: .2rem; }
.kv-preis { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.kv-preis .betrag { font-size: 1.875rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kv-preis .einheit { font-size: .8125rem; font-weight: 600; color: var(--ink-55); }
.kv-profil { font-size: .78125rem; color: var(--ink-55); }

/* Zufriedenheits-Kachel mit Skala-Balken. Fuellung und Markierung setzt
   site.js aus den echten Werten (Note der Kasse, Umfrage-Durchschnitt). */
.kv-rating {
  background: #e7efea; border: 1px solid #c2d5cb; border-radius: 10px; padding: .8rem .9rem;
}
.kv-rating-kopf { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; }
.kv-rating .note {
  flex: none; background: var(--forest); color: #fff; border-radius: 8px;
  padding: .4rem .6rem; font-size: 1.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.kv-rating .worte { display: grid; gap: .1rem; min-width: 0; }
.kv-rating .label { font-size: .8125rem; font-weight: 800; line-height: 1.3; color: var(--forest); overflow-wrap: anywhere; }
.kv-rating .sub { font-size: .75rem; line-height: 1.35; color: var(--forest); }
.kv-skala { position: relative; height: 8px; background: var(--weiss); border: 1px solid #c2d5cb; border-radius: 100px; }
.kv-skala .fuellung { position: absolute; left: 0; top: 0; bottom: 0; background: var(--forest); border-radius: 100px; }
.kv-skala .markierung { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink-40); }
.kv-skala-worte { display: flex; justify-content: space-between; gap: .5rem; margin-top: .4rem; font-size: .6875rem; color: var(--ink-45); }

.kv-punkte { display: grid; gap: .5rem; font-size: .84375rem; line-height: 1.45; color: var(--ink-70); }
.kv-punkte li { display: flex; gap: .5rem; align-items: flex-start; }
.kv-punkte svg { flex: none; width: 14px; height: 14px; margin-top: .25rem; color: var(--emerald); }

.kv-aktionen { display: grid; gap: .5rem; }
/* Beide Knöpfe gleich hoch, egal ob amber gefüllt oder mit Rand. */
.kv-btn { width: 100%; font-size: .90625rem; font-weight: 800; padding: .85rem 1.1rem; }
/* Zweiter Knopf mit ruhigem Rand, Hover im Akzent-Orange (Vorlage). */
.kv-btn-rand { background: var(--weiss); color: var(--forest); border-color: #c9c2b2; font-weight: 800; box-shadow: none; }
.kv-btn-rand:hover { background: var(--weiss); color: var(--orange-link); border-color: var(--orange-link); }

/* Fussnoten unter dem Raster. Die erste Zeile füllt site.js erst, wenn die
   Beispiel-Prämien da sind: solange bleibt sie leer und darf keine Lücke
   reissen. */
.kv-fussnoten {
  display: grid; gap: .5rem; max-width: 980px;
  margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linie);
}
.kv-fussnoten .quellenzeile { margin-top: 0; }
.kv-fussnoten p:empty { display: none; }

/* --- Ergebnisliste der Zusatzversicherung (/ergebnis?weg=zusatz) ---
   einer Design-Vorlage: eine Chipleiste «Ihre Angaben», darunter ein
   Raster aus weissen Kassenkarten (Badge-Kopf, Kassenkopf, Produktzeilen,
   Total, Offerte-Knopf, Aufklapper), darunter über die volle Breite das
   Beratungs-Band. Alle Farben stammen aus den Variablen ganz oben. Die
   Grundversicherungs-Ergebnisliste (/ergebnis, Klasse .ergebnis-blatt)
   benutzt dieselben Bausteine; Änderungen hier wirken auf beide. */
.zusatz-blatt { display: grid; gap: 1.25rem; }

/* Können keine Beträge gezeigt werden, steht diese Karte über dem Raster:
   entweder mit dem Weg zurück in den Prämien-Check (fehlende Angaben) oder
   nur mit dem Hinweis (kein Tarifwert zu den Angaben). */
.zusatz-hinweiskarte {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem;
  margin: 0 0 1rem; padding: 1rem 1.15rem; border-radius: 14px;
  background: var(--mint); border: 1.5px solid var(--emerald); color: var(--forest);
}
.zusatz-hinweiskarte .worte { margin: 0; flex: 1 1 16rem; font-size: .9375rem; line-height: 1.55; font-weight: 700; }
.zusatz-hinweiskarte .knopf { flex: none; }

/* Chipleiste «Ihre Angaben» über dem Raster. */
.zusatz-angaben {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-s);
  padding: .7rem 1rem;
}
.zusatz-angaben .titel { font-size: .8125rem; font-weight: 700; color: var(--ink-55); margin-right: .25rem; }
.zusatz-chip {
  font-size: .8125rem; font-weight: 700; line-height: 1.4;
  background: var(--linie-hell); color: var(--forest);
  border: 1px solid transparent; border-radius: 999px; padding: .35rem .75rem;
}
.zusatz-chip.neutral { background: var(--weiss); border-color: var(--linie); color: var(--ink); }
.zusatz-aendern {
  margin-left: auto; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 .2rem; font-size: .8125rem; font-weight: 700;
}

/* Karten-Raster. minmax mit min() verhindert, dass eine 300er-Spalte auf sehr
   schmalen Geräten breiter wird als der Bildschirm. */
.zusatz-raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.25rem; align-items: start;
}
.zusatz-kasse {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--r-m); overflow: hidden;
}
.zusatz-kasse.empfehlung { border: 1.5px solid var(--emerald); }
.zusatz-badge {
  background: var(--linie-hell); color: var(--forest); border-bottom: 1px solid var(--linie);
  font-size: .78125rem; font-weight: 800; text-align: center; padding: .5rem .75rem; line-height: 1.4;
}
.zusatz-kasse.empfehlung .zusatz-badge {
  background: var(--emerald); color: #fff; border-bottom-color: var(--emerald);
}
/* Neutrales Etikett: die guenstigste Praemie der Region ist eine Angabe und
   keine Empfehlung. Es bleibt darum auch dann dezent, wenn es zusaetzlich auf
   einer Empfehlungskarte steht. */
.zusatz-badge.badge-neutral,
.zusatz-kasse.empfehlung .zusatz-badge.badge-neutral {
  background: var(--linie-hell); color: var(--forest);
  border-bottom: 1px solid var(--linie); font-weight: 700;
}
.zusatz-kasse.grund-guenstigste { border: 1px solid var(--linie); }
.zusatz-kasseninhalt { padding: 1.35rem; display: grid; gap: 1rem; }
/* Im Kartenkopf steht entweder das Logo (Wortmarke, gross und länglich wie in
   der Top-Kassen-Sektion) oder, wenn keins hinterlegt ist, der ausgeschriebene
   Kassenname. Nie beides und nie ein leerer Platzhalter. */
.zusatz-kassenkopf { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.zusatz-logo { flex: none; display: block; height: 38px; max-width: 160px; }
.zusatz-logo img { display: block; height: 100%; width: auto; max-width: 160px; object-fit: contain; object-position: left center; }
.zusatz-kassenname {
  font-size: 1.1875rem; font-weight: 800; letter-spacing: -.02em; min-width: 0; overflow-wrap: anywhere;
}

/* Produktzeilen: links Produktname und Bereich, rechts Betrag oder Hinweis. */
.zusatz-posten { display: grid; gap: .65rem; }
.zusatz-posten .posten-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: .65rem;
  border-bottom: 1px solid var(--linie-hell); padding-bottom: .65rem;
}
.zusatz-posten .posten-zeile:last-child { border-bottom: 0; padding-bottom: 0; }
.zusatz-posten .worte { display: grid; gap: .1rem; min-width: 0; }
.zusatz-posten .worte b { font-size: .875rem; font-weight: 700; overflow-wrap: anywhere; }
.zusatz-posten .worte small { font-size: .78125rem; line-height: 1.45; color: var(--ink-55); }
.zusatz-posten .preis { flex: none; font-size: .875rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.zusatz-posten .anfrage { flex: none; font-size: .78125rem; font-weight: 600; color: var(--ink-55); }

/* Total-Zeile der Karte. */
.zusatz-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: .65rem;
  border-top: 1px solid var(--linie); padding-top: .9rem;
}
.zusatz-total .label { font-size: .78125rem; color: var(--ink-55); }
.zusatz-total .betrag { font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Ohne Tarifwert steht hier Text statt einer Zahl, nie ein erfundener Betrag. */
.zusatz-total .betrag-offen { font-size: .875rem; font-weight: 700; color: var(--emerald-dunkel); }
.zusatz-summenote { margin-top: -.55rem; font-size: .75rem; color: var(--ink-40); }

/* Knöpfe der Karte: die erste Empfehlung amber gefüllt, die weiteren Karten
   weiss mit dunklem Rand. */
.zusatz-offerte { width: 100%; }
.zusatz-kasse:not(.empfehlung) .zusatz-offerte {
  background: var(--weiss); color: var(--ink); border-color: var(--ink);
  /* Ohne Amber-Fuellung gehoert auch die Amber-Druckkante weg. */
  box-shadow: none;
}
.zusatz-kasse:not(.empfehlung) .zusatz-offerte:hover {
  background: var(--linie-hell); color: var(--ink); border-color: var(--ink);
}
.zusatz-mehr {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .8125rem; font-weight: 700; color: var(--emerald);
}
.zusatz-mehr:hover { color: var(--emerald-dunkel); }
.zusatz-auf svg { width: 14px; height: 14px; margin-left: .35rem; transition: transform .16s; }
@media (prefers-reduced-motion: reduce) { .zusatz-auf svg { transition: none; } }
.zusatz-kasse.offen .zusatz-auf svg { transform: rotate(180deg); }

/* Aufgeklappte Produktwahl in der Karte. */
.zusatz-stufen {
  display: grid; gap: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linie-hell);
}
.zusatz-stufen[hidden] { display: none; }
.zusatz-stufengruppe { display: grid; gap: .5rem; }
.zusatz-stufentitel { font-size: .6875rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-40); }
/* In der schmalen Karte hat der Betrag neben dem Produkttext keinen Platz:
   er rückt unter den Text, eingerückt auf Höhe des Auswahlpunkts. */
.zusatz-stufen .stufe-flaeche { flex-wrap: wrap; gap: .5rem .6rem; padding: .7rem .8rem; }
.zusatz-stufen .stufe-preis { margin-left: 2.3rem; text-align: left; }
.stufe-preis { flex: none; margin-left: auto; display: grid; gap: .1rem; text-align: right; }
.stufe-preis b { font-size: .9375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stufe-preis small { font-size: .625rem; font-weight: 600; color: var(--ink-40); }
/* Produkt ohne hinterlegten Tarifwert: Text statt Betrag, nie eine Zahl. */
.stufe-preis b.preis-offen { font-size: .75rem; font-weight: 700; color: var(--emerald-dunkel); }

/* Ergänzungen unter den Basis-Stufen einer Kategorie (Mehrfachwahl, nur
   zusammen mit einer Basis). Die Zeile darüber nennt die Basis-Produkte im
   Klartext; sie wird zur Laufzeit aus den echten Produktnamen gebaut. */
.zusatz-ergaenzungen { display: grid; gap: .5rem; margin-top: .7rem; }
.zusatz-ergtitel { font-size: .8125rem; line-height: 1.45; font-weight: 700; color: var(--ink-55); }

/* Beratungs-Band unter dem Raster, über die volle Breite. */
.zusatz-beratung {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.5rem;
}
.zusatz-beratung .worte { flex: 1 1 16rem; min-width: 0; display: grid; gap: .35rem; }
.zusatz-beratung h2 { font-size: 1.125rem; font-weight: 800; }
.zusatz-beratung p { font-size: .9375rem; line-height: 1.55; color: var(--ink-55); }
.zusatz-beratung .knopf { flex: none; }

/* Fussnote unter dem Blatt. */
.zusatz-hinweiszeile { margin-top: .9rem; font-size: .75rem; line-height: 1.6; color: var(--ink-40); max-width: 920px; }

/* --- Kundenzufriedenheits-Chip in der Faktentabelle der Anbieterseiten --- */
.note-chip {
  display: inline-flex; align-items: baseline; gap: .4rem; background: var(--mint); color: var(--forest);
  border-radius: 10px; padding: .25rem .55rem; margin-right: .5rem; vertical-align: middle;
}
.note-chip .note-chip-zahl { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.note-chip .note-chip-text { font-size: .75rem; font-weight: 700; }

/* --- Kategorien ---
   Startseiten-Sektion «Welche Versicherungen möchten Sie vergleichen?» mit den
   fünf Kategorie-Karten, im Muster der kv-Karten: weisse Karte auf
   hellem Band, Bild oben, Titel, ein Satz, «Mehr erfahren». Die ganze Karte ist
   ein Link, also von sich aus Klick- und Tippfläche. */
/* Drei Spalten wie in der Vorlage: die fuenf Themen plus die Beratungs-Karte
   ergeben zwei volle Reihen. */
.kategorien { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.kategoriekarte {
  display: flex; flex-direction: column; gap: .8rem;
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 12px;
  padding: 1.1rem; color: var(--forest);
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
/* Hover im Akzent-Orange der Design-Vorlage. */
.kategoriekarte:hover {
  transform: translateY(-3px); border-color: var(--orange-link); color: var(--forest);
  box-shadow: 0 12px 28px -16px rgba(224, 138, 46, .45);
}
.kategoriekarte:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
/* Das Bild sitzt im Kartenkopf, darum eine ruhigere Rundung als der
   Standard-Bildplatz. Die Vorlage kommt ohne diese Bilder aus; sie stehen
   bewusst dezent oben in der Karte. */
.kategoriekarte .kategorie-bild { border-radius: var(--r-s); aspect-ratio: 2 / 1; }
.kategorie-worte { display: grid; gap: .4rem; }
.kategorie-worte .marke { font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--forest); }
.kategorie-worte b { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.kategorie-worte small { font-size: .84375rem; line-height: 1.5; color: var(--ink-70); }
.kategoriekarte .weiter {
  margin-top: auto; min-height: 44px; display: flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .875rem; color: var(--orange-link);
}
.kategoriekarte .weiter svg { width: 15px; height: 15px; }

/* Sechste Karte: der Weg zur Beratung auf amberfarbenem Grund. */
.kategorie-hilfe {
  /* Die Nachbarkarten sind durch ihre Bilder hoeher; damit die Amber-Karte
     nicht halb leer wirkt, sitzt ihr Inhalt vertikal zentriert mit mehr
     Innenabstand und etwas groesserer Schrift. */
  background: var(--amber); border-color: var(--amber);
  justify-content: center; gap: 1.15rem; padding: 1.6rem 1.5rem;
}
.kategorie-hilfe:hover { transform: none; border-color: var(--amber); box-shadow: none; }
.kategorie-hilfe .kategorie-worte b { font-size: 1.375rem; font-weight: 800; }
.kategorie-hilfe .kategorie-worte small { font-size: .9375rem; line-height: 1.6; }
.kategorie-hilfe .kategorie-worte small { color: rgba(25, 68, 48, .8); }
.kategorie-hilfe .knopf { width: 100%; }

/* --- Kundenstimmen (Video-Erfahrungsberichte, Startseite) ---
   Gleichwertige weisse Karten nebeneinander (drei), Video oben
   im 16:9-Format, darunter Name und die feste Zeile "Kunde von kk-schweiz.ch".
   Kartenoptik und Textrollen sind aus .kategoriekarte/.kategorie-worte
   uebernommen, keine neuen Groessen. Der Umbruch auf eine Spalte folgt
   demselben Breakpoint wie .zwei-spalten (max-width: 1023px), der schon fuer
   vergleichbare Zwei-Spalten-Sektionen der Startseite gilt. */
.kundenstimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.kundenstimme-karte { background: var(--weiss); border: 1px solid var(--sand); border-radius: var(--r-m); overflow: hidden; }
/* Im Ruhezustand steht bewusst ein Bild in der Karte und kein Video-Element.
   Grund: Firefox zeichnet ein pausiertes <video> in einem abgerundeten,
   geclippten Container beim Hover
   neu und legt dabei einen dunklen Teilrahmen ueber das Standbild. Ohne
   Video-Element im Ruhezustand gibt es diese zweite Zeichenebene nicht.
   Das Video wird erst beim Klick erzeugt (site.js) und beim Wechsel auf eine
   andere Karte wieder entfernt, was zugleich den Video-Decoder freigibt. */
.kundenstimme-video-rahmen { position: relative; aspect-ratio: 16 / 9; background: var(--forest); }
.kundenstimme-video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--forest); }
.kundenstimme-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; }
.kundenstimme-start[hidden] { display: none; }
/* Bild und Abspiel-Zeichen liegen ueber der Tippflaeche: pointer-events aus,
   damit der Tipp auf dem Handy sicher am Knopf landet und nicht am Deko-Kind. */
.kundenstimme-vorschau { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.kundenstimme-play { position: absolute; left: 50%; top: 50%; margin: -30px 0 0 -30px; width: 60px; height: 60px; border-radius: 999px; background: rgba(255, 255, 255, .93); color: var(--forest); display: grid; place-items: center; box-shadow: 0 6px 20px rgba(15, 23, 43, .28); transition: background .18s ease, box-shadow .18s ease; }
.kundenstimme-play { pointer-events: none; }
.kundenstimme-play svg { width: 26px; height: 26px; margin-left: 3px; }
.kundenstimme-start:hover .kundenstimme-play,
.kundenstimme-start:focus-visible .kundenstimme-play { background: var(--weiss); box-shadow: 0 8px 26px rgba(15, 23, 43, .36); }
.kundenstimme-start:focus-visible { outline: 3px solid var(--emerald); outline-offset: -3px; }
.kundenstimme-beschriftung { padding: 1rem 1.3rem 1.35rem; }
.kundenstimme-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; }
.kundenstimme-ersparnis { flex: none; font-size: .875rem; font-weight: 700; line-height: 1.2; color: var(--emerald-dunkel); background: var(--mint); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; }
.kundenstimme-beschriftung b { display: block; font-size: 1.1875rem; font-weight: 700; letter-spacing: -.01em; color: var(--forest); }
.kundenstimme-beschriftung .kundenstimme-sub { display: block; font-size: .84375rem; line-height: 1.5; color: var(--ink-70); margin-top: .2rem; }

/* --- Aufklapper im Seitenstil ---
   Bewusst <details>/<summary>: klappt auch ohne JavaScript auf, ist über die
   Tastatur bedienbar und braucht keine eigene Zustandsverwaltung. Verwendet
   für «Quellen und Hinweise» unter der Kassen-Sektion und für «Alle Kassen
   anzeigen» auf /anbieter. */
.aufklapp > summary {
  display: flex; align-items: center; gap: .45rem; cursor: pointer;
  min-height: 44px; list-style: none;
  font-size: .8125rem; font-weight: 700; color: var(--ink-55);
}
.aufklapp > summary::-webkit-details-marker { display: none; }
.aufklapp > summary::after {
  content: ''; flex: none; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .18s;
}
.aufklapp[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.aufklapp > summary:hover { color: var(--emerald); }
.aufklapp > summary:focus-visible { outline: 3px solid var(--emerald); outline-offset: 3px; border-radius: var(--r-s); }

/* «Quellen und Hinweise»: dezente Zeile am Ende der Kassen-Sektion. Seit der
   einer Design-Vorlage in einer eigenen Rahmen-Box statt an einer blossen
   Trennlinie (.quellen-rahmen). */
.quellen-aufklapp { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
.quellen-aufklapp .kv-fussnoten { margin-top: .9rem; padding-top: 0; border-top: 0; }
.quellen-aufklapp.quellen-rahmen {
  border: 1px solid var(--sand); border-radius: 10px; padding: .35rem 1.35rem; margin-top: 1.5rem;
}
.quellen-rahmen > summary { min-height: 48px; }
.quellen-rahmen .kv-fussnoten { margin-top: .5rem; padding-bottom: 1.1rem; }

/* --- Ablauf (nach Design-Vorlage): links Titel und Maskottchen, rechts
   die nummerierte Liste mit grossen Ziffern und feinen Trennlinien. --- */
.ablauf-raster {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 1rem + 3vw, 4.5rem); align-items: start;
}
.ablauf-worte .augenbraue { display: block; margin-bottom: .75rem; }
.ablauf-worte h2 { margin-bottom: 1.2rem; }
.ablaufliste { display: flex; flex-direction: column; }
.ablaufliste li { display: grid; grid-template-columns: 68px 1fr; gap: 1.4rem; padding: 1.5rem 0; border-bottom: 1px solid var(--sand); }
.ablaufliste li:first-child { padding-top: 0; }
.ablaufliste .ziffer { font-size: 2.5rem; font-weight: 800; line-height: 1; color: var(--sand); letter-spacing: -.02em; }
.ablaufliste h3 { font-size: 1.1875rem; font-weight: 700; margin-bottom: .5rem; color: var(--forest); }
.ablaufliste p { font-size: .9375rem; line-height: 1.65; color: var(--ink-70); }
.ablauf-maskottchen { width: 200px; max-width: 100%; height: auto; pointer-events: none; }
.schrittliste { display: grid; max-width: 46rem; margin: 0 auto; }
.schrittliste li { display: grid; grid-template-columns: 56px 1fr; gap: 1.25rem; }
.schrittliste .nr {
  position: relative; display: grid; justify-items: center;
}
.schrittliste .nr::before {
  content: attr(data-nr); width: 44px; height: 44px; border-radius: 50%; background: var(--emerald);
  color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.125rem;
}
.schrittliste li:not(:last-child) .nr::after { content: ''; width: 2px; flex: 1; min-height: 34px; background: var(--mint); margin-top: 0; }
.schrittliste .nr { grid-auto-rows: min-content 1fr; }
.schrittliste li > div:last-child { padding-bottom: 1.75rem; }
.schrittliste h3 { font-size: 1.125rem; font-weight: 700; margin: .15rem 0 .35rem; }
.schrittliste p { font-size: .9375rem; line-height: 1.6; color: var(--ink-70); }

/* --- Link-Karten (nach Design-Vorlage) ---
   Eine einzige Kartenform fuer Bereiche, weitere Kassen und Ratgeber:
   weisse Karte mit Sandrand, kleine Marke, Ueberschrift, ein Satz und der
   Weg «Mehr erfahren» im Akzent-Orange. Die frueheren dunklen Ratgeber-
   Karten und die Sonderfassung .karten-hell sind damit entfallen; die
   Raster-Klassen .themenkarten und .ratgeber-karten bleiben bestehen.
   .themenkarte und .ratgeberkarte stehen als Altnamen mit auf denselben
   Regeln, damit direkt im Seitenbauer gesetztes Markup gleich aussieht. */
.themenkarten, .ratgeber-karten, .karten-raster {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.linkkarte, .themenkarte, .ratgeberkarte {
  display: flex; flex-direction: column; gap: .625rem; background: var(--weiss);
  border: 1px solid var(--sand); border-radius: 12px; padding: 1.75rem; color: var(--forest);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.linkkarte:hover, .themenkarte:hover, .ratgeberkarte:hover {
  border-color: var(--orange-link); color: var(--forest); transform: translateY(-3px);
  box-shadow: 0 12px 28px -16px rgba(224, 138, 46, .45);
}
.linkkarte:focus-visible, .themenkarte:focus-visible, .ratgeberkarte:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.linkkarte .marke, .themenkarte .marke {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest);
}
.linkkarte-grau .marke, .ratgeberkarte .marke {
  font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--grau-text);
}
.linkkarte h3, .themenkarte h3, .ratgeberkarte h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--forest); margin: 0; }
.linkkarte-grau h3, .ratgeberkarte h3 { font-size: 1.3125rem; }
.linkkarte p, .themenkarte p, .ratgeberkarte p { font-size: .9375rem; line-height: 1.6; color: var(--text-3); margin: 0; flex: 1; }
.linkkarte .weiter, .themenkarte .weiter, .ratgeberkarte .weiter {
  margin-top: .25rem; min-height: 24px; display: flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9375rem; color: var(--orange-link);
}
.linkkarte .weiter svg, .themenkarte .weiter svg, .ratgeberkarte .weiter svg { width: 15px; height: 15px; }
.mehr-mitte { text-align: center; margin-top: 1.75rem; }

/* --- Hebel: dunkle Karte mit zweispaltiger Liste --- */
.hebel { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; }
.hebel a { display: flex; gap: .9rem; border-bottom: 1px solid var(--forest-linie); padding-bottom: .9rem; color: #fff; }
.hebel a:hover { color: var(--mint); }
.hebel .zeichen { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: var(--emerald); color: #fff; }
.hebel h3 { font-size: 1rem; font-weight: 800; margin-bottom: .2rem; }
.hebel p { font-size: .9375rem; line-height: 1.55; color: var(--mint-text); }

.zwei-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: center; }

/* Zwei Fakten-Kacheln unter dem Text von «Über kk-schweiz.ch» (Vorlage). */
.fakten-kacheln { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.7rem; }
.fakten-kachel {
  flex: 1 1 12rem; background: var(--weiss); border: 1px solid var(--sand); border-radius: 10px; padding: 1.1rem;
}
.fakten-kachel b { display: block; font-size: 1rem; font-weight: 800; color: var(--forest); margin-bottom: .35rem; }
.fakten-kachel span { font-size: .875rem; line-height: 1.5; color: var(--ink-70); }

/* --- Franchise-Schieber --- */
.franchise-tafel { padding: 1.75rem; }
.schieber-kopf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .5rem; }
.schieber-kopf .beschriftung { font-size: .875rem; font-weight: 700; }
.schieber-kopf .stufe-wert { font-size: 1.5rem; font-weight: 800; color: var(--emerald); font-variant-numeric: tabular-nums; }
.schieber { width: 100%; accent-color: var(--emerald); margin-bottom: .35rem; touch-action: pan-y; }
.schieber-skala { display: flex; justify-content: space-between; font-size: .6875rem; color: var(--ink-40); margin-bottom: 1.1rem; }
.franchise-ausgabe { background: var(--mint); border-radius: 14px; padding: 1.1rem 1.25rem; display: grid; gap: .5rem; }
.franchise-ausgabe .zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .875rem; font-weight: 700; color: var(--forest); }
.franchise-ausgabe .zeile b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.franchise-ausgabe .hinweiszeile { margin-top: .4rem; font-size: .6875rem; line-height: 1.55; color: rgba(25, 68, 48, .75); font-weight: 500; }

/* --- FAQ (nach Design-Vorlage) ---
   Eine Fassung fuer alle Seiten: Kopf zentriert, darunter eine flache Liste
   mit feinen Sand-Trennlinien. Mechanik bleibt natives details/summary. */
.abschnitt.faq-abschnitt {
  background: var(--weiss); border-top: 1px solid var(--sand);
  padding: clamp(2.8rem, 1.8rem + 3.4vw, 5.5rem) 0;
}
.faq-kopf { text-align: center; margin-bottom: clamp(1.8rem, 1.2rem + 1.8vw, 3rem); }
.faq-kopf .augenbraue { display: block; margin-bottom: .875rem; }
.faq-kopf h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800;
  letter-spacing: -.02em; color: var(--forest); margin: 0;
}
.faq { display: flex; flex-direction: column; }
.faq details { background: none; border: 0; border-bottom: 1px solid var(--sand); border-radius: 0; }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; cursor: pointer;
  padding: 1.375rem .25rem; min-height: 56px; list-style: none;
  font-weight: 700; font-size: 1.125rem; color: var(--forest); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-link); }
.faq summary svg { flex: none; width: 19px; height: 19px; color: var(--forest); transition: transform .18s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq p { padding: 0 2.5rem 1.5rem .25rem; font-size: 1rem; line-height: 1.7; color: var(--text-2); }
/* faq-flach ist der Normalfall und steht nur noch als
   Klasse im Markup, damit aeltere Seiten nichts anders aussehen. */

/* --- Schlusskaesten --- */
.schluss { border-radius: var(--r-l); padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); display: grid; gap: .6rem; justify-items: start; }
.schluss.mint { background: var(--mint); color: var(--forest); }
.schluss.dunkel { background: var(--forest); color: #fff; }
.schluss.dunkel p { color: var(--mint-text); }
.schluss .knopf { margin-top: .6rem; }

/* Abschluss-Band der Startseite (nach Design-Vorlage): zentriert auf
   ruhigem Gruenschleier, darunter die drei Vertrauens-Punkte. */
.cta-band { background: rgba(25, 68, 48, .05); }
.cta-innen { text-align: center; color: var(--forest); display: grid; justify-items: center; gap: 1.1rem; }
.cta-innen h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); max-width: 22ch; }
.cta-innen p { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-70); max-width: 42ch; }
.cta-knopf { font-size: 1.0625rem; padding: 1.1rem 2.4rem; border-radius: 8px; }
.cta-vertrauen {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2rem;
  margin-top: .6rem; font-size: .875rem; color: var(--ink-70);
}
.cta-vertrauen li { display: flex; align-items: center; gap: .45rem; }
.cta-vertrauen .haken { display: grid; place-items: center; color: var(--emerald); }
.cta-vertrauen .haken svg { width: 14px; height: 14px; }
/* Dasselbe Band als Einschub mitten auf einer Themenseite: etwas ruhiger,
   ohne die drei Vertrauens-Punkte. */
.cta-band-mitte { padding: clamp(2.4rem, 1.6rem + 2.4vw, 4rem) 0; }
.cta-band-mitte .cta-innen h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.375rem); font-weight: 900; letter-spacing: -.025em; }
.cta-band-mitte .cta-innen p { font-size: 1.0625rem; color: var(--text-3); }
.cta-band-mitte .cta-knopf { font-size: 1.125rem; padding: 1.125rem 2.5rem; }

/* Breites Band mit Text links und Knopf rechts. Bewusst auf ruhigem
   Gruenschleier statt auf Mint; verwendet auf den Seiten ausserhalb des
   Unterseiten-Redesigns (zum Beispiel /so-bewerten-wir). */
.band-mint { background: var(--schleier); }
.band-mint .huelle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; padding-top: clamp(1.8rem, 1.2rem + 1.6vw, 2.75rem); padding-bottom: clamp(1.8rem, 1.2rem + 1.6vw, 2.75rem); }
.band-mint h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--forest); margin-bottom: .625rem; }
.band-mint p { font-size: 1rem; line-height: 1.65; color: var(--text-2); max-width: 720px; }
.band-mint .nummer { font-size: 1.625rem; font-weight: 800; color: var(--emerald); margin: .3rem 0 .6rem; display: block; }
.band-mint .nummer a { color: inherit; }
.band-mint .nummer a:hover { color: var(--emerald-dunkel); text-decoration: underline; text-underline-offset: 4px; }
.band-mint .knopfzeile { margin-top: 0; }
.band-mint .knopf { white-space: nowrap; }
.band-mint .vertrauenszeile { margin-bottom: 0; color: var(--forest); }
.band-mint .vertrauenszeile .haken { color: var(--emerald); }

/* --- Sicherheit --- */
.sicherheit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.sicherheit li { display: flex; gap: .85rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m); padding: 1.35rem; }
.sicherheit .zeichen { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: var(--mint); color: var(--emerald); }
.sicherheit b { display: block; font-size: .9375rem; margin-bottom: .25rem; }
.sicherheit p { font-size: .9375rem; line-height: 1.6; color: var(--ink-70); }

/* ------------------------------------------------------------
   Themenseiten (nach Design-Vorlage)

   Abschnitt «Das Wichtigste zum Thema» mit Berater-Karte, Inhalts-
   verzeichnis-Band, nummerierte Textabschnitte, Datentabellen, Hinweis-
   Kaesten, Karten-Stapel und Praemienbeispiel.
   ------------------------------------------------------------ */

/* --- «Das Wichtigste zum Thema»: Text links, Berater-Karte rechts --- */
.abschnitt-wichtigstes { background: var(--weiss); padding: clamp(2.8rem, 1.8rem + 3.4vw, 5.5rem) 0; }
.wichtigstes-raster {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.8rem, 1.2rem + 3vw, 4rem); align-items: start;
}
.wichtigstes-worte .augenbraue { display: block; margin-bottom: .875rem; }
.wichtigstes-worte h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; color: var(--forest); margin: 0 0 1.25rem;
}
.wichtigstes-worte p { font-size: 1rem; line-height: 1.7; color: var(--text-2); margin-bottom: 1rem; }
.wichtigstes-worte p:last-child { margin-bottom: 0; }

/* Berater-Karte: Portraet, Einordnung, Zitat, Registerangabe. */
.berater-karte { background: var(--schleier); border-radius: 14px; padding: 1.75rem; }
.berater-kopf { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.125rem; }
.berater-karte .berater-portraet {
  flex: none; width: 72px; height: 72px; aspect-ratio: 1 / 1; border-radius: 50%; margin: 0;
}
/* Gleiche Bild-Position wie beim Quiz-Foto .berater-bild, bewusst
   ueberall einheitlich: object-position 50% 0% holt den Bildausschnitt nach
   unten, damit der Kopf des Hochformat-Porträts (Kopf im oberen Drittel)
   vollständig im Kreis sitzt statt oben angeschnitten. Der zentrierte
   .illu-img-Standard zeigte hier nur Stirn und Gesicht. */
.berater-karte .berater-portraet img { object-position: 50% 0%; }
.berater-karte .rolle {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--emerald); margin-bottom: .25rem;
}
.berater-karte b { display: block; font-size: 1.0625rem; font-weight: 800; color: var(--forest); }
.berater-karte .funktion { display: block; font-size: .84375rem; color: var(--text-3); }
.berater-karte blockquote {
  margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--amber);
  font-size: 1rem; line-height: 1.65; font-style: italic; color: var(--forest);
}
.berater-karte blockquote::before { content: '«'; }
.berater-karte blockquote::after { content: '»'; }
.berater-karte .berater-fuss { font-size: .8125rem; line-height: 1.6; color: var(--grau-text); }
.berater-karte .berater-fuss a { color: var(--grau-text); text-decoration: underline; text-underline-offset: 2px; }
.berater-karte .berater-fuss a:hover { color: var(--orange-link); }

/* --- Inhaltsverzeichnis als eigenes Band --- */
.iv-band { background: var(--schleier); padding: clamp(2rem, 1.4rem + 2vw, 3.5rem) 0; }
.iv-band .augenbraue { display: block; margin-bottom: 1.375rem; }
.iv-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.iv-karten-vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iv-karte {
  display: flex; align-items: center; gap: .875rem; min-height: 56px;
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 10px;
  padding: 1rem 1.125rem; color: var(--forest); font-weight: 600; font-size: .9375rem; line-height: 1.35;
  transition: border-color .16s, color .16s;
}
.iv-karte:hover { border-color: var(--orange-link); color: var(--orange-link); }
.iv-nr { flex: none; font-size: 1.625rem; font-weight: 900; line-height: 1; color: var(--sand); }
.iv-karte:hover .iv-nr { color: var(--amber); }

/* --- Nummerierter Textabschnitt --- */
.abschnitt.abschnitt-thema { background: var(--weiss); padding: clamp(2.8rem, 1.8rem + 3.4vw, 5.5rem) 0 clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem); }
/* Folgen zwei Abschnitte aufeinander, rueckt der zweite naeher heran. */
.abschnitt.abschnitt-thema + .abschnitt.abschnitt-thema { padding-top: clamp(1.6rem, 1.1rem + 1.6vw, 2.75rem); }
.abschnitt-thema .augenbraue { display: block; margin-bottom: .875rem; }
.abschnitt-thema h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.3vw, 2.125rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.15; color: var(--forest); margin: 0 0 1.25rem;
}
.abschnitt-thema p { font-size: 1.03125rem; line-height: 1.7; color: var(--text-2); margin-bottom: 1rem; }
.abschnitt-thema p:last-child { margin-bottom: 0; }
.abschnitt-thema p.quellenzeile { font-size: .84375rem; line-height: 1.65; font-style: italic; color: var(--grau-text); }
.abschnitt-thema .text-link { color: var(--orange-link); font-weight: 700; text-decoration: none; }
.abschnitt-thema .text-link:hover { color: var(--amber-dunkel); text-decoration: underline; text-underline-offset: 3px; }
.abschnitt-thema .text-link svg { width: 15px; height: 15px; display: inline-block; vertical-align: -2px; }

/* --- Hinweis-Kasten im Textfluss --- */
.hinweis-kasten {
  border-radius: 10px; padding: 1.125rem 1.375rem; margin: 0 0 1rem;
  font-size: .96875rem; line-height: 1.65; color: var(--forest);
}
.hinweis-weich { background: var(--schleier); }
.hinweis-amber { background: var(--amber); }
.hinweis-kasten strong { color: var(--forest); }

/* --- Karten-Stapel im Textfluss --- */
.karten-stapel { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem; }
.stapel-karte { border: 1px solid var(--sand); border-radius: 12px; padding: 1.375rem 1.625rem; }
.stapel-karte h3 { font-size: 1.1875rem; font-weight: 700; color: var(--forest); margin: 0 0 .625rem; }
.stapel-karte p { font-size: .96875rem; line-height: 1.65; color: var(--text-2); margin: 0; }

/* --- Praemienbeispiel: Ausgangslage und optimierte Loesung --- */
.beispiel-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.beispiel-karte { border: 1px solid var(--sand); border-radius: 12px; padding: 1.5rem; }
.beispiel-karte-hervor { border: 2px solid var(--forest); background: var(--gruen-hell); }
.beispiel-label {
  display: block; font-size: .75rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--grau-text); margin-bottom: .75rem;
}
.beispiel-karte-hervor .beispiel-label { color: var(--emerald); }
.beispiel-betrag {
  font-size: 2.125rem; font-weight: 900; letter-spacing: -.02em; color: var(--forest);
  line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums;
}
.beispiel-betrag span { font-size: .9375rem; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.beispiel-text { font-size: .90625rem; line-height: 1.55; color: var(--text-3); margin: .5rem 0 0; }
.beispiel-karte-hervor .beispiel-text { color: var(--text-2); }

/* --- Varianten-Karten (Spital stationaer) --- */
.varianten-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.varianten-karte {
  display: flex; flex-direction: column; gap: .625rem;
  border: 1px solid var(--sand); border-radius: 12px; padding: 1.5rem;
}
.varianten-karte .marke {
  font-size: .8125rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--emerald);
}
.varianten-karte h3 { font-size: 1.25rem; font-weight: 700; color: var(--forest); margin: 0; }
.varianten-karte p { font-size: .9375rem; line-height: 1.6; color: var(--text-2); margin: 0; }

/* --- Kassen-Raster der Uebersicht «Alle Krankenkassen» --- */
.kassen-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .875rem; }
.kassen-kachel {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 56px;
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 10px; padding: 1rem 1.25rem;
  color: var(--forest); font-weight: 700; font-size: .96875rem; line-height: 1.35;
  transition: border-color .16s, color .16s;
}
.kassen-kachel:hover { border-color: var(--orange-link); color: var(--orange-link); }
.kassen-kachel .kachel-pfeil { flex: none; color: var(--orange-link); font-weight: 700; }

/* --- Steckbrief-Karte der Anbieterseiten (rechte Spalte des Seitenkopfs) --- */
.steckbrief {
  background: var(--weiss); border: 1px solid var(--sand); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(25, 68, 48, .25);
}
.steckbrief-kopf {
  background: var(--schleier); padding: 1.375rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.steckbrief-logo { height: 38px; width: auto; max-width: 160px; object-fit: contain; }
.steckbrief-name { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; color: var(--forest); }
.steckbrief-note { display: flex; align-items: center; gap: .625rem; }
.steckbrief-note .note-zahl {
  flex: none; background: var(--forest); color: #fff; font-weight: 900; font-size: 1.125rem;
  padding: .375rem .625rem; border-radius: 8px; line-height: 1; font-variant-numeric: tabular-nums;
}
.steckbrief-note .note-worte { font-size: .78125rem; line-height: 1.35; color: var(--forest); }
.steckbrief-rumpf { padding: .5rem 1.75rem 1.25rem; }
.steckbrief-zeile {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem;
  padding: .8125rem 0; border-bottom: 1px solid #efeae0; font-size: .90625rem;
}
.steckbrief-zeile:last-of-type { border-bottom: 0; }
.steckbrief-zeile span { color: var(--grau-text); }
.steckbrief-zeile b { color: var(--forest); font-weight: 600; line-height: 1.45; }
.steckbrief-zeile a { color: var(--orange-link); text-decoration: underline; text-underline-offset: 2px; }
.steckbrief-fuss { font-size: .75rem; line-height: 1.55; color: var(--grau-text); padding-top: .75rem; }

/* --- Zweispaltige Baender (Text links, Knoepfe rechts) --- */
.band-zwei-amber { background: var(--weiss); padding: clamp(2.2rem, 1.4rem + 2.6vw, 4.5rem) 0; }
.band-amber-karte {
  background: var(--amber); border-radius: 14px; padding: clamp(1.6rem, 1.1rem + 2.2vw, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center; color: var(--forest);
}
.band-amber-karte h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .625rem; }
.band-amber-karte p { font-size: 1.03125rem; line-height: 1.6; color: rgba(25, 68, 48, .85); margin: 0; }
.band-amber-karte .knopfzeile { margin-top: 0; gap: .875rem; }
.band-amber-karte .knopf { white-space: nowrap; font-size: 1rem; padding: .9375rem 1.75rem; }

.band-zwei-weich { background: var(--schleier); padding: clamp(2.2rem, 1.4rem + 2.6vw, 4.5rem) 0; }
.band-zwei-weich .huelle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: center;
}
.band-zwei-weich h2 { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; letter-spacing: -.02em; color: var(--forest); margin: 0 0 .875rem; }
.band-zwei-weich p { font-size: 1rem; line-height: 1.65; color: var(--text-2); max-width: 720px; margin: 0; }
.band-zwei-weich .knopfzeile { margin-top: 0; }
.band-zwei-weich .knopf { white-space: nowrap; font-size: 1rem; padding: .9375rem 1.75rem; }

/* --- Datentabellen der Themenseiten (nach Design-Vorlage) ---
   Forest-Kopfzeile mit gerundeter Oberkante, darunter Zeilen mit feiner
   Sand-Unterlinie. Der Rahmen scrollt auf schmalen Bildschirmen waagrecht
   in sich selbst, die Seite selbst nie: touch-action und
   overscroll-behavior halten die Geste im Kasten,
   -webkit-overflow-scrolling wird bewusst nicht gesetzt. */
.tabellenblock { margin: 0 0 1rem; }
.datentabelle {
  min-width: 0; border-radius: 10px 10px 0 0;
  overflow-x: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.datentabelle table { width: 100%; border-collapse: collapse; font-size: .96875rem; }
.datentabelle thead th {
  background: var(--forest); color: #fff; font-size: inherit; font-weight: 700;
  text-align: left; vertical-align: middle; padding: .75rem 1rem; line-height: 1.4;
}
.datentabelle thead tr th:first-child { border-top-left-radius: 10px; }
.datentabelle thead tr th:last-child { border-top-right-radius: 10px; }
.datentabelle tbody th, .datentabelle tbody td {
  padding: .75rem 1rem; border-bottom: 1px solid var(--sand);
  vertical-align: top; line-height: 1.5; color: var(--text-2);
}
.datentabelle tbody th { text-align: left; font-weight: 600; color: var(--forest); }
.datentabelle a { color: var(--orange-link); text-decoration: underline; text-underline-offset: 2px; }
.datentabelle .zahl { font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }
.datentabelle strong { color: var(--forest); }
.tabellenblock figcaption { margin-top: .75rem; font-size: .875rem; line-height: 1.65; font-style: italic; color: var(--grau-text); }
/* Drei und mehr Spalten: eine Spur kleinere Schrift (Vorlage). */
.tabelle-eng .datentabelle table { font-size: .90625rem; }
/* Letzte Spalte rechtsbuendig (Franchise, Modelle, Fristen). */
.tabelle-rechts .datentabelle tr > *:last-child { text-align: right; }
.tabelle-rechts .datentabelle tbody tr > *:last-child { color: var(--forest); font-weight: 700; white-space: nowrap; }
/* Hervorgehobene Spalte auf hellgruenem Grund (Leistungstabelle). */
.tabelle-hervor-2 .datentabelle tbody tr > *:nth-child(2),
.tabelle-hervor-3 .datentabelle tbody tr > *:nth-child(3),
.tabelle-hervor-4 .datentabelle tbody tr > *:nth-child(4) { background: var(--gruen-hell); color: var(--forest); }
/* Leistungstabelle: schmale erste Spalte, damit die beiden Textspalten Platz haben */
.leistungstabelle .datentabelle tbody th { width: 24%; }

/* Schmale Bildschirme: Gesetz, dass in Tabellen nie seitwaerts gescrollt
   werden muss. Jede Zeile wird ein Kartenblock: Zeilenkopf als Titel, jede
   Zelle darunter mit ihrer Spaltenueberschrift (data-spalte) als kleine
   Beschriftung. Die Kopfzeile bleibt nur fuer Vorleser im Dokument. */
@media (max-width: 760px) {
  /* Alle Datentabellen: keine Mindestbreite, kein Scroll-Rahmen, Zellen
     brechen um. Kurze zweispaltige Tabellen bleiben so lesbare Tabellen. */
  .datentabelle { overflow: visible; touch-action: auto; }
  .datentabelle table { min-width: 0 !important; width: 100%; font-size: .9375rem; }
  .datentabelle thead th, .datentabelle tbody th, .datentabelle tbody td { padding: .7rem .8rem; overflow-wrap: break-word; }
  .tabelle-rechts .datentabelle tbody tr > *:last-child { white-space: normal; }
  .datentabelle .zahl { white-space: normal; }

  /* Kartenstapel: drei und mehr Spalten oder lange Texte. Zeilenkopf als
     Titel, darunter jede Zelle mit ihrer Spaltenueberschrift. */
  .tabelle-stapel .datentabelle { border-radius: 0; }
  .tabelle-stapel .datentabelle table { display: block; }
  .tabelle-stapel .datentabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabelle-stapel .datentabelle tbody, .tabelle-stapel .datentabelle tbody tr,
  .tabelle-stapel .datentabelle tbody th, .tabelle-stapel .datentabelle tbody td { display: block; }
  .tabelle-stapel .datentabelle tbody tr { border: 1px solid var(--sand); border-radius: 10px; background: #fff; margin-bottom: .75rem; overflow: hidden; }
  .tabelle-stapel .datentabelle tbody tr:last-child { margin-bottom: 0; }
  .tabelle-stapel .datentabelle tbody th { padding: .8rem 1rem .45rem; border-bottom: 0; font-weight: 700; width: auto !important; }
  .tabelle-stapel .datentabelle tbody td { padding: .2rem 1rem .75rem; border-bottom: 0; }
  .tabelle-stapel .datentabelle tbody td::before {
    content: attr(data-spalte); display: block; margin-bottom: .15rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grau-text);
  }
  .tabelle-stapel.tabelle-rechts .datentabelle tr > *:last-child { text-align: left; }
  .tabelle-stapel.tabelle-hervor-2 .datentabelle tbody tr > *:nth-child(2),
  .tabelle-stapel.tabelle-hervor-3 .datentabelle tbody tr > *:nth-child(3),
  .tabelle-stapel.tabelle-hervor-4 .datentabelle tbody tr > *:nth-child(4) { margin: .15rem .6rem .6rem; padding: .6rem .75rem; border-radius: 8px; }
}

/* Deckungszeichen der Leistungstabelle */
.deckung { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; margin-right: .45rem; vertical-align: -3px; }
.deckung svg { width: 11px; height: 11px; }
.deckung-ja { background: var(--mint); color: var(--emerald); }
.deckung-teils { background: #fdeacd; color: #9a5b00; }
.deckung-nein { background: #f6e3e3; color: #a03a3a; }
.deckung-legende { display: inline-flex; flex-wrap: wrap; gap: .15rem .9rem; margin-right: .35rem; }
.deckung-legende > span { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------
   Vertrauens-Siegel direkt vor dem Seitenfuss
   ------------------------------------------------------------ */
.siegelband {
  background: var(--linie-hell); border-top: 1px solid var(--linie);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem) 0;
}
/* Drei Siegel: auf Desktop drei gleich breite Spalten, mittig unter der
   Huelle. Auf Tablet zwei Spalten, auf dem Handy eine. */
.siegel-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.4rem; max-width: 58rem; margin-inline: auto; }
.siegel-liste a, .siegel-liste > li > span { display: flex; align-items: center; gap: .8rem; height: 100%; color: var(--ink); }
.siegel-liste a:hover { color: var(--emerald-dunkel); }
.siegel-liste a:hover .siegel-zeichen { border-color: var(--emerald); }
.siegel-zeichen {
  flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--weiss);
  border: 1px solid var(--linie); color: var(--emerald); display: grid; place-items: center;
  transition: border-color .16s;
}
.siegel-zeichen svg { width: 23px; height: 23px; }
.siegel-text { font-size: .8125rem; font-weight: 700; line-height: 1.4; }

/* --- Lade-Overlay des Prämienrechners ---
   Deckt nach «Prämien anzeigen» die ganze Fläche ab, während die Tarife aus
   /api/praemien geholt werden. Danach übernimmt die Seite /ergebnis. Das
   Sperren des Hintergrund-Scrollens macht site.js nach dem
   position-fixed-Muster, damit auch iOS/WebKit nicht dahinter scrollt. */
.lade-schirm {
  position: fixed; inset: 0; z-index: 9000; background: var(--paper);
  display: grid; place-items: center; padding: 2rem var(--rand);
}
.lade-schirm[hidden] { display: none; }
.lade-schirm-innen { display: grid; justify-items: center; gap: 1.3rem; width: 100%; max-width: 26rem; text-align: center; }
.lade-maskottchen {
  width: clamp(9rem, 42vw, 13rem); height: auto; transform-origin: 50% 92%;
  animation: maskottchenSuchen 1s ease-in-out infinite alternate;
}
.lade-satz { font-size: 1rem; font-weight: 700; line-height: 1.55; color: var(--forest); }
.lade-fortschritt { display: block; width: 100%; max-width: 18rem; height: 6px; border-radius: 99px; background: var(--linie); overflow: hidden; }
.lade-fortschritt i { display: block; height: 100%; width: 6%; border-radius: 99px; background: var(--emerald); animation: ladeFortschritt 1.8s cubic-bezier(.3, .8, .35, 1) forwards; }
@keyframes maskottchenSuchen {
  from { transform: rotate(-4deg) translateY(0); }
  to { transform: rotate(4deg) translateY(-7px); }
}
@keyframes ladeFortschritt { from { width: 6%; } to { width: 100%; } }

/* --- Ergebnis-Seite: schmale Marken-Zeile statt Kopf und Navigation --- */
.ergebnis-leiste { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.ergebnis-leiste .huelle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .7rem; padding-bottom: .7rem; }
.wortmarke-klein .marke-bild { height: 34px; }
.wortmarke-klein .name { font-size: 1.0625rem; }
.ergebnis-neu { font-size: .875rem; font-weight: 700; color: var(--emerald); white-space: nowrap; }
.ergebnis-neu:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Ratgeber-Uebersicht und Artikel --- */
.ratgeber-raster { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.4rem, 1rem + 1.6vw, 2.5rem); align-items: start; }
.ratgeber-navi { position: sticky; top: 6rem; display: grid; gap: 1.2rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m); padding: 1.25rem; }
.ratgeber-navi .gruppe p { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-label); margin-bottom: .4rem; }
.ratgeber-navi .gruppe a { display: block; padding: .3rem 0; font-size: .8125rem; line-height: 1.45; color: var(--ink-70); }
.ratgeber-navi .gruppe a:hover, .ratgeber-navi .gruppe a.aktiv { color: var(--emerald); font-weight: 700; }
.ratgeber-blatt { padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); }
.artikel-vorspann { font-size: 1.0625rem; line-height: 1.7; font-weight: 700; color: var(--ink); }
.artikel-fuss { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--linie); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }

.prose-kk h2 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); margin: 1.9rem 0 .6rem; }
.prose-kk h2:first-child { margin-top: 0; }
.prose-kk h3 { font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.3; margin: 1.6rem 0 .5rem; }
.prose-kk h3:first-child { margin-top: 0; }
.prose-kk p { font-size: 1rem; line-height: 1.75; color: #2b3a31; margin-bottom: 1rem; }
.prose-kk p:last-child { margin-bottom: 0; }
.prose-kk ul { list-style: disc; padding-left: 1.2rem; margin-bottom: 1rem; }
.prose-kk ol { list-style: decimal; padding-left: 1.35rem; margin-bottom: 1rem; }
.prose-kk li { font-size: 1rem; line-height: 1.75; color: #2b3a31; margin-bottom: .35rem; }
.prose-kk li::marker { color: var(--emerald); font-weight: 700; }
.prose-kk strong { color: var(--ink); }
.prose-kk a { text-decoration: underline; text-underline-offset: 3px; }

.rechtsblatt { display: grid; gap: 1.2rem; }
.rechtsblatt h1 { margin-bottom: .3rem; }
.rechtsblatt h2 { font-size: 1.1875rem; margin: 1.6rem 0 .5rem; }
.rechtsblatt p { font-size: .9375rem; line-height: 1.75; color: #2b3a31; margin-bottom: .8rem; }
.rechtsblatt ul { list-style: disc; padding-left: 1.2rem; margin-bottom: .9rem; }
.rechtsblatt li { font-size: .9375rem; line-height: 1.75; color: #2b3a31; }
.rechtsblatt a { text-decoration: underline; text-underline-offset: 3px; }

/* --- Anbieterseiten --- */
.anbieter-schild { display: inline-flex; align-items: center; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; padding: .75rem 1.1rem; }
.anbieter-schild img { height: 30px; width: auto; object-fit: contain; }
.anbieter-schild .name { font-size: 1.25rem; font-weight: 800; }

/* Tabelle der Beispielpraemien einer Kasse (#kassen-beispiele).
   Der Rahmen wird von site.js zur Laufzeit mit einer <table> gefuellt; die
   Optik ist dieselbe wie bei den redaktionellen Datentabellen der
   Themenseiten: Forest-Kopfzeile mit gerundeter Oberkante, Zeilen mit feiner
   Sand-Unterlinie, letzte Spalte rechtsbuendig. Der Rahmen scrollt auf
   schmalen Bildschirmen waagrecht in sich selbst, die Seite nie. */
.beispieltabelle {
  min-width: 0; border-radius: 10px 10px 0 0;
  overflow-x: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.beispieltabelle table { width: 100%; border-collapse: collapse; font-size: .90625rem; min-width: 30rem; }
.beispieltabelle thead th {
  background: var(--forest); color: #fff; font-size: inherit; font-weight: 700;
  text-align: left; padding: .75rem 1rem; line-height: 1.4;
}
.beispieltabelle thead tr th:first-child { border-top-left-radius: 10px; }
.beispieltabelle thead tr th:last-child { border-top-right-radius: 10px; }
.beispieltabelle tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--sand); color: var(--text-2); line-height: 1.5; }
.beispieltabelle tbody td:first-child { font-weight: 600; color: var(--forest); }
.beispieltabelle .wert { text-align: right; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Methodik-Seite: fuenf Kategorien */
.methodik { display: grid; gap: 1.1rem; }
.methodik .block { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m); padding: 1.5rem; }
.methodik .block h2 { font-size: 1.1875rem; margin-bottom: .5rem; }
.methodik .block p { font-size: .9375rem; line-height: 1.65; color: var(--ink-70); margin-bottom: .6rem; }
.methodik .block .quellen { font-size: .75rem; color: var(--ink-40); margin-bottom: 0; }
.formelkasten { background: var(--forest); color: #fff; border-radius: var(--r-m); padding: 1.6rem; }
.formelkasten h2 { font-size: 1.125rem; margin-bottom: .5rem; }
.formelkasten .formel { background: var(--forest-tief); border-radius: 10px; padding: .9rem 1.15rem; font-size: .9375rem; font-weight: 700; margin-bottom: .75rem; }
.formelkasten p { font-size: .9375rem; line-height: 1.65; color: var(--mint-text); }
.formelkasten strong { color: #fff; }

/* ============================================================
   5  Praemienrechner, Ergebnisliste, Formular
   ============================================================ */

/* Quiz-Karte: gemeinsames Gerüst von Prämienrechner und Beratungsanfrage.
   Grundlage ist die Vorlage design-vorlagen/kontaktformular-2026-08-21/quiz.
   Auf dem Handy eine ruhige Vollseite auf Papierton, ab 768px
   eine zentrierte weisse Karte auf hellem Grund. Sichtbar ist immer genau
   ein Schritt. */
.funnel-abschnitt { padding-top: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); background: var(--paper); }
.formular-raster { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1.5rem; align-items: start; }
/* Der Begleitblock neben dem Formular ist bewusst entfernt:
   lead-formular-neben.html ist leer, darum bleibt die Formularkarte als
   einziges Element im Raster übrig und nimmt die ganze Breite ein. */
.formular-raster > .formular-karte:only-child { grid-column: 1 / -1; }

.quiz-karte { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.quiz-oben { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.quiz-zurueck {
  justify-self: start; background: none; border: 0; padding: .6rem 0; margin: 0; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 700; color: var(--emerald);
  min-height: 44px; display: inline-flex; align-items: center;
}
.quiz-zurueck:hover { color: var(--emerald-dunkel); }
/* Unsichtbar statt entfernt: die Kopfzeile behält ihre Höhe, und der Knopf
   fällt zugleich aus der Tabulator-Reihenfolge. */
.quiz-zurueck.unsichtbar { visibility: hidden; }
.quiz-stempel {
  margin-left: auto; border: 1px solid var(--mint-2); border-radius: 999px; padding: .35rem .8rem;
  font-size: .71875rem; font-weight: 800; color: var(--emerald); white-space: nowrap;
}
.quiz-titel { margin-top: .9rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
.quiz-titel span { color: var(--emerald); }

.quiz-fortschritt { margin-top: 1.4rem; display: grid; gap: .5rem; }
.zaehler { font-size: .8125rem; font-weight: 700; color: var(--emerald); }
.rechner-schritte { display: flex; gap: 6px; }
.rechner-schritte span { height: 4px; flex: 1; border-radius: 2px; background: var(--linie); }
.rechner-schritte span.aktiv, .rechner-schritte span.erledigt { background: var(--emerald); }

/* --- Ein Schritt je Ansicht --- */
.rechner-frage, .form-step { display: none; }
.rechner-frage.aktiv, .form-step.active { display: block; margin-top: 1.75rem; }
.rechner-frage .frage, .form-step .frage {
  display: block; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.5rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; margin-bottom: .5rem; text-wrap: pretty;
}
.rechner-frage .feldhinweis, .form-step .hinweis { font-size: .9375rem; line-height: 1.55; color: var(--ink-55); margin-bottom: 1.1rem; }
/* Bewusst ohne margin-top: die Abstände zwischen den Feldgruppen setzt der
   Fluss der Schritte (.step-body > * + *), sonst überschriebe diese Regel ihn. */
.quiz-karte .feldname { display: block; font-size: .8125rem; font-weight: 700; color: var(--ink-70); margin-bottom: .4rem; }
.quiz-karte .feldname-weit { margin-top: 1.1rem; }
.autohinweis { margin-top: .9rem; font-size: .8125rem; color: var(--ink-55); }

/* Eingabefelder: mindestens 16px Schriftgrösse, sonst zoomt iOS/WebKit beim
   Antippen in die Seite hinein. */
.quiz-karte .eingabe {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .875rem; font-size: 1rem; min-height: 48px; color: var(--ink);
}
.quiz-karte .eingabe:focus { outline: 2px solid var(--emerald); outline-offset: -1px; }
.quiz-karte .eingabe.gross { padding: .95rem 1rem; font-size: 1.0625rem; }
.quiz-karte .eingabe.fehler { border-color: var(--fehler); }
.feldfehler { margin-top: .5rem; font-size: .78125rem; line-height: 1.5; color: var(--fehler); }
#lead-fehler { margin-top: .8rem; font-size: .8125rem; font-weight: 700; color: var(--fehler); }

/* --- Auswahl: Pillen (Mehrfachauswahl, Franchise) und grosse Optionen --- */
.chip-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-liste.optionen { display: grid; gap: .6rem; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; cursor: pointer; padding: .7rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--weiss); color: var(--ink);
  font-weight: 600; font-size: .875rem; line-height: 1.35; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.chip input:checked + span { border: 1.5px solid var(--emerald); background: var(--mint); color: var(--emerald-dunkel); font-weight: 700; }
.chip input:checked + span::before { content: '✓'; font-weight: 800; }
.chip input:focus-visible + span { outline: 3px solid var(--emerald); outline-offset: 2px; }

.chip-liste.optionen .chip span {
  justify-content: flex-start; gap: .75rem; padding: 1.05rem 1.1rem; border-radius: 14px;
  font-size: 1.0625rem; font-weight: 500; text-align: left; background: var(--weiss); color: var(--ink);
}
.chip-liste.optionen .chip span::before {
  content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--linie); background: var(--weiss);
  display: grid; place-items: center; line-height: 1; font-size: .8125rem; color: #fff;
}
.chip-liste.optionen .chip input:checked + span { border: 1.5px solid var(--emerald); background: var(--weiss); color: var(--ink); font-weight: 700; }
.chip-liste.optionen .chip input:checked + span::before { content: '✓'; background: var(--emerald); border-color: var(--emerald); color: #fff; }

/* --- Schalter für die Unfalldeckung --- */
.quiz-schalter {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px;
  padding: .9rem 1.1rem; min-height: 56px; cursor: pointer;
}
.quiz-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.quiz-schalter .schalter-wort { font-size: .9375rem; font-weight: 700; }
.quiz-schalter .schalter-knopf {
  position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px;
  background: var(--linie); transition: background .2s;
}
.quiz-schalter .schalter-knopf::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 43, .25); transition: left .2s;
}
.quiz-schalter input:checked ~ .schalter-knopf { background: var(--emerald); }
.quiz-schalter input:checked ~ .schalter-knopf::after { left: 23px; }
.quiz-schalter input:focus-visible ~ .schalter-knopf { outline: 3px solid var(--emerald); outline-offset: 3px; }

/* --- Bereichs-Karten des Zusatz-Wegs (Mehrfachauswahl mit Leistungs-Chips) --- */
.kat-karten { display: grid; gap: .6rem; }
.kat-karte { border: 1px solid var(--linie); border-radius: 14px; background: var(--weiss); overflow: hidden; transition: border-color .16s; }
.kat-karte.gewaehlt { border: 1.5px solid var(--emerald); }
.kat-wahl { position: relative; display: block; }
.kat-wahl input { position: absolute; opacity: 0; width: 0; height: 0; }
.kat-flaeche {
  display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.kat-zeichen {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--mint); color: var(--emerald);
}
.kat-zeichen svg { width: 21px; height: 21px; }
.kat-worte { display: grid; gap: .2rem; min-width: 0; }
.kat-worte b { font-size: 1rem; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.kat-worte small { font-size: .8125rem; line-height: 1.45; color: var(--ink-55); overflow-wrap: anywhere; }
.kat-haken {
  flex: none; margin-left: auto; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 7px; border: 1.5px solid var(--linie); color: transparent;
  transition: background .16s, border-color .16s, color .16s;
}
.kat-haken svg { width: 13px; height: 13px; }
.kat-karte.gewaehlt .kat-haken { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.kat-wahl input:focus-visible + .kat-flaeche { outline: 3px solid var(--emerald); outline-offset: -3px; }
.kat-chips { padding: 0 1.1rem 1.1rem; display: grid; gap: .55rem; }
.kat-chips[hidden] { display: none; }
.kat-chips-titel { font-size: .78125rem; font-weight: 700; color: var(--ink-55); }
.kat-chips .chip span { padding: .5rem .85rem; font-size: .78125rem; min-height: 40px; }

/* --- Fuss der Schritte: Weiter-Knopf, Überspringen --- */
.rechner-fuss, .step-actions { margin-top: 1.5rem; display: grid; gap: .8rem; justify-items: stretch; }
.quiz-ueberspringen, .step-actions .skip-btn {
  justify-self: center; background: none; border: 0; padding: .5rem; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 600; color: var(--emerald);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.quiz-ueberspringen:hover, .step-actions .skip-btn:hover { color: var(--emerald-dunkel); }
.var-mikro { font-size: .78125rem; line-height: 1.5; color: var(--ink-55); text-align: center; }
.datenzeile { font-size: .71875rem; line-height: 1.55; color: var(--ink-45); text-align: center; }
.datenzeile a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }

/* --- Fusszeile der Karte --- */
.quiz-fuss {
  margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--linie);
  display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--ink-55);
}
.quiz-fuss .quiz-schild {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 6px; background: var(--mint); color: var(--emerald);
}
.quiz-fuss .quiz-schild svg { width: 12px; height: 12px; }
.quiz-fuss a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }

/* --- Berater-Zeile in der Quiz-Karte ---
   Steht auf jedem Schritt und in der Danke-Ansicht über der FINMA-Fusszeile.
   Dezent gehalten: Mint-Fläche, rundes Foto, zwei Zeilen Text. Sie liegt
   ausserhalb des Formulars und verdeckt darum keine Bedienfläche. */
.berater-zeile {
  margin-top: auto; padding: .7rem .85rem; border-radius: var(--r-s); background: var(--mint);
  display: flex; align-items: center; gap: .7rem;
}
/* margin-top:auto schiebt die Zeile ans Kartenende. Damit sie auf einem
   randvollen Schritt nicht am Formular klebt, steht der Mindestabstand am
   Formular selbst. */
#lead-form { margin-bottom: 1.25rem; }
/* Dieselbe Luft in den beiden Rechner-Karten, die die Berater-Zeile seit
   dem Anzeigen-Umbau ebenfalls tragen. */
#rechner-form { margin-bottom: 1.25rem; }
/* Die Fusszeile darunter wird nicht mehr selbst nach unten geschoben: das
   macht jetzt die Berater-Zeile, sonst stünden beide auseinandergezogen. */
.berater-zeile + .quiz-fuss { margin-top: 1rem; }
/* Beleg-Fussnote zum Ersparnis-Badge, nur auf dem Grundversicherungs-Rechner
   (rechner() in geruest.mjs). Sie steht zwischen Berater-Zeile und
   Fusszeile; beide Nachbar-Abstaende werden hier fest statt ueber
   margin-top:auto geregelt, sonst zoege die Fusszeile wieder ans Kartenende. */
/* Rundes Berater-Foto. Zwei bewusste Feinheiten:
   object-position 50% 0% holt den Bildausschnitt nach unten, damit der Kopf
   des Porträts (Hochformat 600 mal 750, Kopf im oberen Drittel) vollständig
   und mittig im Kreis sitzt statt oben angeschnitten. Der kleine obere Rand
   schiebt das Foto zusätzlich eine Spur tiefer, damit es optisch auf einer
   Linie mit der dreizeiligen Textgruppe daneben liegt. */
.berater-bild {
  flex: none; align-self: center; width: 52px; height: 52px; margin-top: 3px;
  border-radius: 50%; object-fit: cover; object-position: 50% 0%;
  border: 2px solid var(--weiss);
}
.berater-worte { display: grid; gap: .1rem; min-width: 0; }
.berater-worte b { font-size: .875rem; font-weight: 800; color: var(--forest); }
.berater-worte small { font-size: .75rem; line-height: 1.4; color: var(--forest); }
.berater-worte .berater-finma { font-size: .6875rem; color: rgba(25, 68, 48, .7); }

/* --- Beratungsanfrage: Übernahme aus dem Rechner und Eingabefelder --- */
.uebernommen { display: grid; gap: .2rem; background: var(--mint); border-radius: var(--r-s); padding: .8rem 1rem; margin-top: 1.4rem; }
.uebernommen b { font-size: .6875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--emerald-dunkel); }
.uebernommen span { font-size: .875rem; font-weight: 700; color: var(--ink); }
.step-body { display: block; }
.step-body > * + * { margin-top: .9rem; }
.step-body .feldname + .eingabe, .step-body .feldname + input, .step-body .feldname + select { margin-top: 0; }
.namensfelder { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.namensfelder > div { min-width: 0; }
/* «Weitere Person hinzufügen» bleibt ein linksbündiger Textknopf im Quiz-Stil.
   Eigene Klasse .person-btn statt .skip-btn: er zeigt nur das zweite
   Jahrgangsfeld und blättert nicht weiter.
   Volle Tippfläche von 44 Bildpunkten auf allen Geräten. */
.person-btn {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; padding: .5rem 0; cursor: pointer;
  font-family: inherit; font-size: .875rem; font-weight: 700; text-align: left; color: var(--emerald);
}
.person-btn:hover { color: var(--emerald-dunkel); }
.person-btn:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; border-radius: var(--r-s); }

/* --- Bestätigung nach dem Absenden (Danke-Ansicht) --- */
.bestaetigung {
  display: grid; gap: .7rem; justify-items: center; text-align: center;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}
.bestaetigung .danke-bild { width: clamp(118px, 32vw, 164px); height: auto; margin-bottom: .2rem; }
.bestaetigung h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.375rem); font-weight: 800; text-wrap: balance; }
.bestaetigung p { font-size: .9375rem; line-height: 1.6; color: var(--ink-70); max-width: 38ch; }
.bestaetigung ul { display: grid; gap: .55rem; margin-top: .6rem; justify-items: start; text-align: left; }
.bestaetigung li { display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 600; color: var(--ink); }
.haken-punkt {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--emerald); color: #fff; font-size: .75rem; font-weight: 800; line-height: 1;
}
.haken-punkt::before { content: '✓'; }

/* Ab 768px liegt das Quiz als weisse Karte auf hellem Grund. Die Optionen
   heben sich dann durch den Papierton vom Kartenweiss ab. */
@media (min-width: 768px) {
  .funnel-abschnitt { background: var(--linie-hell); border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie); }
  .quiz-karte {
    background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l);
    padding: 1.75rem 2.25rem 2rem; min-height: 640px;
  }
  .quiz-karte .chip span, .quiz-karte .eingabe, .kat-karte, .quiz-schalter { background: var(--paper); }
  .quiz-karte .chip-liste.optionen .chip span { background: var(--paper); }
  .quiz-karte .chip input:checked + span { background: var(--mint); }
  .quiz-karte .chip-liste.optionen .chip input:checked + span, .kat-karte.gewaehlt { background: var(--weiss); }
  .quiz-karte .eingabe:focus { background: var(--weiss); }
}

/* --- Ergebnisliste der Grundversicherung (/ergebnis) ---
   In derselben Optik wie die Zusatz-Ergebnisliste:
   Chipleiste «Ihre Angaben», Ersparnis-Zeile, Raster aus Kassenkarten,
   Quellenzeilen, Beratungs-Band. Die Bausteine (.zusatz-angaben,
   .zusatz-raster, .zusatz-kasse, .zusatz-beratung) stehen weiter oben und
   werden hier nur wiederverwendet; eigen ist allein die Modell-Tabelle im
   Aufklapper der Karte. */
.ergebnis-blatt { display: grid; gap: 1.25rem; }
.ergebnis-blatt .quellenzeile { margin-top: 0; }
.ergebnis-fussnoten { display: grid; gap: .35rem; }
.ersparnis {
  margin: 0; background: var(--mint); border-radius: 14px; padding: .9rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
}
.ersparnis .betrag { font-size: 1.25rem; font-weight: 800; color: var(--forest); font-variant-numeric: tabular-nums; }
.ersparnis .text { font-size: .875rem; font-weight: 600; color: var(--forest); }
/* Offenlegung direkt ueber den Empfehlungskarten. Sie steht offen im
   Lesefluss und nie in einem Aufklapper. */
.empf-offenlegung {
  margin: 0; font-size: .875rem; line-height: 1.6; font-weight: 600; color: var(--forest);
}

/* Aufgeklappte Modell-Tabelle in der Karte: dieselbe Tabelle wie bisher, nur
   dezenter und auf die schmale Karte gerechnet. Sie darf in sich seitwaerts
   rollen, damit nie die ganze Seite quer scrollt. */
/* Nach dem Rechner stehen nur die drei Empfehlungen offen; die uebrigen
   Kassen liegen im zugeklappten zweiten Raster (.grund-weitere) und kommen
   erst ueber den mittigen Knopf. */
.grund-alle-zeile { display: flex; justify-content: center; margin-top: 1.5rem; }
.grund-weitere { margin-top: 1.25rem; }
.grund-weitere[hidden] { display: none; }
.grund-modelle {
  padding-top: 1rem; border-top: 1px solid var(--linie-hell);
  overflow-x: auto; touch-action: pan-y; overscroll-behavior: contain;
}
.grund-modelle[hidden] { display: none; }
.grund-modelle table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 20rem; }
.grund-modelle th { text-align: left; font-size: .875rem; font-weight: 800; color: var(--ink-55); padding-bottom: .5rem; }
.grund-modelle td { padding: .45rem 0; border-top: 1px solid var(--linie-hell); color: var(--ink-70); }
.grund-modelle .wert { text-align: right; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Schmale Bildschirme: auch Prämienbeispiel und Modell-Tabelle muessen ohne
   seitliches Scrollen in die Breite passen (Gesetz: nie quer scrollen). */
@media (max-width: 760px) {
  .beispieltabelle, .grund-modelle { overflow-x: visible; touch-action: auto; }
  .beispieltabelle table, .grund-modelle table { min-width: 0; table-layout: auto; }
  .beispieltabelle table { font-size: .875rem; }
  .beispieltabelle thead th, .beispieltabelle tbody td { padding: .6rem .5rem; overflow-wrap: break-word; }
  .beispieltabelle thead th:first-child, .beispieltabelle tbody td:first-child { padding-left: .75rem; }
  .beispieltabelle thead th:last-child, .beispieltabelle tbody td:last-child { padding-right: .75rem; }
  .grund-modelle th, .grund-modelle td { overflow-wrap: break-word; padding-right: .35rem; }
  .grund-modelle th:last-child, .grund-modelle td:last-child { padding-right: 0; }
}
.grund-modelle th.wert { font-weight: 800; color: var(--ink-55); }

/* Lade-, Fehler- und Leerzustand des Blattes. Ausser beim Laden steht der
   Hinweis in derselben Mint-Karte wie im Zusatz-Weg. */
.blatt-zustand { padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); display: grid; gap: .6rem; justify-items: start; }
.ergebnis-blatt .blatt-zustand, .zusatz-blatt .blatt-zustand {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-l);
}
.blatt-zustand .zustandstitel { font-size: 1.125rem; font-weight: 800; }
.blatt-zustand p { font-size: .9375rem; line-height: 1.65; color: var(--ink-70); max-width: 60ch; }
.blatt-zustand .knopf { margin-top: .5rem; }
.ergebnis-blatt .blatt-zustand.hinweis, .zusatz-blatt .blatt-zustand.hinweis {
  background: var(--mint); border: 1.5px solid var(--emerald); color: var(--forest);
}
.blatt-zustand.hinweis p { color: var(--forest); }
.lade-balken { display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--linie-hell); overflow: hidden; position: relative; }
.lade-balken::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--emerald); border-radius: 99px; animation: laden 1.1s ease-in-out infinite; }
@keyframes laden { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }

/* Die Regeln des Lead-Formulars stehen oben bei der Quiz-Karte:
   Prämienrechner und Beratungsanfrage teilen sich dasselbe Gerüst. */

/* ============================================================
   5b  Offerten-Strecke /offerte
   ============================================================

   Eigenes Redesign nach einer Design-Vorlage. Die Farben
   stammen durchgehend aus den Variablen dieser Datei (Emerald, Forest,
   Amber, Mint), die Schrift ist die selbst gehostete Schrift der Website:
   aus der Vorlage kommt das Bild, nicht ihre Hex-Werte und nicht ihre
   Schriftdatei.

   Grosse Bildschirme  Minimaler Seitenkopf, Intro, darunter zweispaltig:
                       links die nummerierten Karten-Sektionen, rechts
                       klebend die dunkle Karte «Ihre Auswahl» und die
                       weisse Karte mit der Bestaetigung nach Art. 45 VAG.

   Bis 900px           Drei-Schritte-Assistent. public/assets/offerte.js
                       setzt data-off-schritt auf <html>; erst dann greifen
                       die Regeln unten. Ohne JavaScript traegt <html> das
                       Merkmal nicht und die Seite bleibt vollstaendig
                       sichtbar und bedienbar.

   iOS/WebKit: Der Seiten-Scroll wird nie gesperrt und es gibt keinen
   inneren Scroll-Container; die Seite scrollt als Ganzes. Damit gibt es
   weder eine -webkit-overflow-scrolling-Falle noch ein Overlay, das
   einrasten koennte. Die klebende Leiste unten nimmt die Geraetezone ueber
   env(safe-area-inset-bottom) mit auf, Eingabefelder stehen auf 16px, damit
   iOS beim Antippen nicht hineinzoomt. */

.off-seite { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }

/* --- Minimaler Seitenkopf: Wortmarke links, Pillen-Rueckweg rechts --- */
.off-kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.off-kopf-innen {
  width: 100%; max-width: var(--huelle); margin: 0 auto;
  padding: .7rem var(--rand);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.off-zurueck-pille {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: .8125rem; font-weight: 700; text-decoration: none;
  color: var(--emerald-dunkel); background: var(--linie-hell);
  border: 1px solid var(--emerald-hell); border-radius: 999px; padding: .6rem .95rem;
  transition: background .16s;
}
.off-zurueck-pille:hover { background: var(--mint); }
/* Kopf und Fortschritts-Leiste kleben als ein Block (Handy-Vorlage).
   Auf grossen Bildschirmen ist das nur der Kopf, weil die
   Fortschritts-Leiste dort auf display:none steht; auf schmalen Geraeten
   bleiben Kopf, Schritte und Summen-Balken zusammen oben stehen. */
.off-oben { position: sticky; top: 0; z-index: 20; background: var(--weiss); }

/* --- Rumpf und Intro --- */
.off-haupt { flex: 1; padding: clamp(1.5rem, 1rem + 2vw, 2.4rem) 0 clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.off-intro { max-width: 44rem; margin-bottom: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); }
.off-marke {
  display: inline-block; font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--emerald-dunkel); background: var(--mint);
  padding: .4rem .8rem; border-radius: 999px; margin-bottom: .9rem;
}
.off-intro h1 { margin-bottom: .6rem; }

/* --- Zweispaltiges Raster --- */
.off-raster { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); align-items: start; }
.off-spalte { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); min-width: 0; align-content: start; }
.off-neben { display: grid; gap: 1rem; min-width: 0; align-content: start; }
@media (min-width: 1024px) {
  .off-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 372px); gap: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
  /* Klebt unter dem ebenfalls klebenden Seitenkopf. */
  .off-neben { position: sticky; top: 5.4rem; }
}

/* --- Karten-Sektionen ---
   Nummernkreis und Ueberschrift in einer Zeile, Unterzeile und Felder auf
   der Hoehe des Textes eingerueckt. Der Einzug haengt an einer eigenen
   Variablen, damit er auf schmalen Geraeten in einem Zug wegfaellt. */
.off-karte {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: clamp(1.25rem, 1rem + 1.4vw, 2rem);
  --off-einzug: 2.4rem;
}
.off-karte[hidden] { display: none; }
.off-kopfzeile { display: flex; align-items: center; gap: .8rem; }
.off-kopfzeile h2 { font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem); font-weight: 800; letter-spacing: -.015em; text-wrap: balance; }
.off-nummer {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--emerald); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .8125rem;
}
.off-unterzeile { margin-left: var(--off-einzug); margin-top: .5rem; font-size: .8125rem; line-height: 1.6; color: var(--ink-55); }
.off-unterzeile[hidden] { display: none; }
.off-felder { display: grid; gap: 1.05rem; margin-left: var(--off-einzug); margin-top: 1.1rem; min-width: 0; }

/* --- Gesperrte Rechner-Angaben ---
   Geschlecht, Jahrgang und Postleitzahl sind Rechengrundlage der Offerte.
   Kommen sie aus dem Praemienrechner, stellt offerte.js sie fest und zeigt
   das Schloss samt Hinweiszeile. Ohne Uebergabe bleibt alles verborgen. */
.off-schloss { display: inline-flex; align-items: center; color: var(--warn); vertical-align: -.15em; }
.off-schloss svg { width: 14px; height: 14px; }
.off-schloss[hidden] { display: none; }
.off-schloss-zeile { display: flex; align-items: center; gap: .35rem; color: var(--warn); }
.off-schloss-zeile b { font-weight: 800; }

/* --- Eingabefelder ---
   Mindestens 16px Schriftgroesse, sonst zoomt iOS/WebKit beim Antippen in
   die Seite hinein. */
.off-seite .eingabe {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: .75rem .9rem;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--weiss);
  color: var(--ink); font-family: inherit; font-size: 1rem; line-height: 1.3;
}
.off-seite select.eingabe {
  appearance: none; -webkit-appearance: none; padding-right: 2.1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
.off-seite .eingabe:focus { outline: 2px solid var(--emerald); outline-offset: -1px; }
.off-seite .eingabe.fehler { border-color: var(--fehler); }
/* Festgestellte Berechnungsgrundlage: sichtbar, aber nicht aenderbar. */
.off-seite .eingabe.fix { background-color: var(--linie-hell); color: var(--ink-55); cursor: not-allowed; opacity: 1; }

.feldgruppe { display: grid; gap: .35rem; min-width: 0; }
.feldgruppe .feldname { font-size: .8125rem; font-weight: 700; color: var(--ink-70); }
.feldhinweis { font-size: .875rem; line-height: 1.55; color: var(--ink-45); }
.feldhinweis[hidden] { display: none; }
.feldpaar { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.feldpaar.strasse-paar { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
.feldpaar.plz-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.datumsfeld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: .5rem; }

/* Geschlecht als Segmentwahl: zwei gleich breite Flaechen, die gewaehlte
   in Emerald. Bleibt eine Radiogruppe, damit Vorlesegeraete und das
   Absenden unveraendert funktionieren. Franchisestufen nutzen dieselbe
   Wahl, nur schmaler (segment-eng). */
.segment-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.segment-feld { position: relative; flex: 0 1 8.5rem; min-width: 0; }
.segment-feld input { position: absolute; opacity: 0; width: 0; height: 0; }
.segment-feld span {
  display: flex; align-items: center; justify-content: center;
  min-height: 46px; padding: .6rem 1.2rem; cursor: pointer;
  border: 1.5px solid var(--linie); border-radius: var(--r-s);
  background: var(--weiss); color: var(--ink);
  font-weight: 700; font-size: .875rem; line-height: 1.2; text-align: center;
  transition: background .16s, border-color .16s, color .16s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.segment-feld input:not(:checked) + span:hover { border-color: var(--emerald); }
.segment-feld input:checked + span { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.segment-feld input:focus-visible + span { outline: 3px solid var(--emerald); outline-offset: 2px; }
/* Bemaengelte Auswahl: offerte.js setzt die Klasse am versteckten
   Radiofeld, sichtbar wird sie an den beiden Flaechen. */
.feldgruppe:has(input.fehler) .segment-feld span { border-color: var(--warn); }
/* Festgestellte Angabe: die nicht gewaehlte Flaeche tritt zurueck, geklickt
   werden kann keine der beiden mehr (offerte.js stellt die Felder still). */
.segment-wahl.gesperrt .segment-feld input:not(:checked) + span { color: var(--ink-40); background: var(--linie-hell); border-color: var(--linie); }
.segment-wahl.gesperrt .segment-feld span { cursor: not-allowed; }
.segment-wahl.segment-eng .segment-feld { flex: 0 1 6rem; }
.segment-wahl.segment-eng .segment-feld span { padding: .6rem .7rem; }

/* --- Stufen-Auswahl (Radioliste mit Punkt links) ---
   Zwei Verwendungen: die Produktlisten der Zusatz-Ergebnisliste auf
   /ergebnis (gebaut in public/assets/site.js) und die Kassen-Empfehlungen im
   Block «Grundversicherung hinzufügen» dieser Seite. Die Offerten-Strecke
   selbst hat keine Produkt-Radiolisten mehr; die Regeln
   bleiben, weil /ergebnis sie weiter braucht. */
.stufen { display: grid; gap: .5rem; }
.stufe { position: relative; display: block; }
.stufe input { position: absolute; opacity: 0; width: 0; height: 0; }
.stufe-flaeche {
  display: flex; align-items: flex-start; gap: .7rem; width: 100%;
  border: 1.5px solid var(--linie); border-radius: var(--r-s); padding: .8rem .9rem;
  cursor: pointer; transition: border-color .16s, background .16s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.stufe-flaeche:hover { border-color: var(--emerald); }
.stufe-marke {
  flex: none; width: 20px; height: 20px; margin-top: .1rem; border-radius: 50%;
  border: 1.5px solid var(--ink-40); background: var(--weiss); transition: border-color .16s;
}
.stufe input:checked + .stufe-flaeche { border-color: var(--emerald); background: var(--linie-hell); }
.stufe input:checked + .stufe-flaeche .stufe-marke { border-color: var(--emerald); border-width: 6px; }
.stufe input:focus-visible + .stufe-flaeche { outline: 3px solid var(--emerald); outline-offset: 2px; }
.stufe-worte { display: grid; gap: .15rem; min-width: 0; }
.stufe-worte b { font-weight: 700; font-size: .9375rem; }
.stufe-worte small { font-size: .8125rem; line-height: 1.45; color: var(--ink-55); }
/* Ergänzung statt Basis: Häkchen statt Punkt, weil mehrere zugleich gelten
   dürfen. Ohne passende Basis ist die Zeile abgeblendet und stillgestellt. */
.stufe-haken .stufe-marke { border-radius: 5px; }
.stufe-aus .stufe-flaeche { opacity: .5; cursor: not-allowed; }
.stufe-aus .stufe-flaeche:hover { border-color: var(--linie); }

/* Wahl der Versicherungssumme (SWICA INFORTUNA). Sie steht als eigene Zeile
   unter dem Produkt und ausserhalb seines Labels: im Label wuerde ein Klick
   ins Auswahlfeld das Kreuz umlegen. Schriftgroesse mindestens 16px, sonst
   zoomt iOS/WebKit beim Antippen in die Seite hinein. */
.stufe-summe { display: grid; gap: .25rem; padding: .1rem 0 .2rem 1.7rem; min-width: 0; }
.stufe-summe label { font-size: .8125rem; font-weight: 700; color: var(--ink-70); }
.stufe-summe select {
  width: 100%; max-width: 15rem; box-sizing: border-box; min-height: 44px;
  padding: .5rem 2.1rem .5rem .75rem;
  border: 1.5px solid var(--linie); border-radius: var(--r-s); background-color: var(--weiss);
  color: var(--ink); font-family: inherit; font-size: 1rem; line-height: 1.3;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
.stufe-summe select:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
/* Ohne passende Basis ist die Zeile darüber abgeblendet, das Feld ebenso. */
.stufe-summe-aus { opacity: .5; }
.stufe-summe-aus select { cursor: not-allowed; }

/* --- Kategorie-Karten der Leistungs-Auswahl ---
   Der Kartenkopf ist die Schaltflaeche der Kategorie; die Pille rechts zeigt
   den Zustand. Gewaehlt heisst gruener Rand und heller Grundton. Darunter
   steht die Produktliste der massgeblichen Kasse, die
   public/assets/offerte.js zur Laufzeit fuellt. */
.off-leistungen { display: grid; gap: .7rem; }
.off-leistung {
  display: grid; gap: .75rem; padding: 1.1rem;
  border: 2px solid var(--linie); border-radius: var(--r-s); background: var(--weiss);
  transition: border-color .16s, background .16s;
}
/* Bereiche, die die massgebliche Kasse gar nicht führt, blendet
   public/assets/offerte.js ganz aus. */
.off-leistung[hidden] { display: none; }
.off-leistung:hover { border-color: var(--emerald); }
.off-leistung[data-gewaehlt="1"] { border-color: var(--emerald); background: var(--linie-hell); }
.off-leistung-kopf {
  display: flex; align-items: flex-start; gap: .9rem;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.off-leistung-kopf:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.off-leistung-worte { flex: 1; min-width: 0; display: grid; gap: .25rem; justify-items: start; }
.off-leistung-titel { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.off-leistung-tarif { font-size: .8125rem; font-weight: 700; line-height: 1.45; color: var(--emerald-dunkel); }
.off-leistung-tarif.offen { font-weight: 600; color: var(--ink-45); }
.off-leistung-tarif:empty { display: none; }
.off-leistung-text { font-size: .875rem; line-height: 1.45; color: var(--ink-55); }
.off-details { display: none; }
.off-pille {
  flex: none; white-space: nowrap;
  font-size: .8125rem; font-weight: 800; padding: .5rem .85rem; border-radius: 999px;
  background: var(--weiss); color: var(--ink-70); border: 1px solid var(--linie);
}
.off-leistung[data-gewaehlt="1"] .off-pille { background: var(--emerald); color: #fff; border-color: var(--emerald); }

/* --- Produktliste einer Kategorie-Karte ---
   Eine Zeile je Produkt der massgeblichen Kasse: Punkt, Produktname samt
   Kurzbeschrieb, rechts der Betrag. Gewaehlt heisst gruener Rand und
   hellgruener Grund, wie bei der gewaehlten Karte. Jede Zeile ist mindestens
   44px hoch und damit auch mit dem Daumen sicher treffbar. */
.off-produkte { display: grid; gap: .4rem; }
.off-produkte[hidden] { display: none; }
.off-produkt { position: relative; display: block; }
.off-produkt[hidden] { display: none; }
.off-produkt input { position: absolute; opacity: 0; width: 0; height: 0; }
.off-produkt-flaeche {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem;
  min-height: 44px; padding: .55rem .75rem;
  border: 1.5px solid var(--sand); border-radius: var(--r-s); background: var(--weiss);
  cursor: pointer; transition: border-color .16s, background .16s;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.off-produkt-flaeche:hover { border-color: var(--emerald); }
.off-produkt input:checked + .off-produkt-flaeche { border-color: var(--emerald); background: var(--emerald-hell); }
.off-produkt input:focus-visible + .off-produkt-flaeche { outline: 3px solid var(--emerald); outline-offset: 2px; }
.off-produkt-marke {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ink-40); background: var(--weiss);
  transition: border-color .16s, border-width .16s;
}
.off-produkt input:checked + .off-produkt-flaeche .off-produkt-marke { border-color: var(--emerald); border-width: 6px; }
.off-produkt-worte { flex: 1 1 9rem; min-width: 0; display: grid; gap: .1rem; }
.off-produkt-worte b { font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.off-produkt-worte small { font-size: .8125rem; line-height: 1.4; color: var(--ink-55); }
.off-produkt-preis {
  flex: none; margin-left: auto; text-align: right;
  font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-70);
}
/* Ohne Tarifwert steht dort ein Satz statt einer Zahl. */
.off-produkt-preis.offen { font-size: .75rem; color: var(--emerald-dunkel); font-variant-numeric: normal; }

/* Wahl der Versicherungssumme (SWICA INFORTUNA). Sie steht als eigene Zeile
   unter dem Produkt und ausserhalb seines Labels: im Label wuerde ein Klick
   ins Auswahlfeld die Zeile mit umschalten. Schriftgroesse mindestens 16px,
   sonst zoomt iOS/WebKit beim Antippen in die Seite hinein. */
.off-summe { display: grid; gap: .25rem; padding: .15rem 0 .3rem 1.6rem; min-width: 0; }
.off-summe[hidden] { display: none; }
.off-summe label { font-size: .8125rem; font-weight: 700; color: var(--ink-70); }
.off-summe-feld {
  width: 100%; max-width: 15rem; box-sizing: border-box; min-height: 44px;
  padding: .5rem 2.1rem .5rem .75rem;
  border: 1.5px solid var(--sand); border-radius: var(--r-s); background-color: var(--weiss);
  color: var(--ink); font-family: inherit; font-size: 1rem; line-height: 1.3;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b60' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
.off-summe-feld:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.off-summe-feld:disabled { opacity: .5; cursor: not-allowed; }

/* Ergänzungen unter den Basis-Produkten einer Karte: Mehrfachwahl, die erst
   greift, wenn die passende Basis gewählt ist. Die Zeile darüber nennt die
   Basis-Produkte im Klartext und wird aus den echten Namen gebaut. */
.off-zusatzgruppe { display: grid; gap: .4rem; margin-top: .55rem; }
.off-zusatzgruppe[hidden] { display: none; }
.off-zusatztitel { font-size: .8125rem; line-height: 1.4; font-weight: 700; color: var(--ink-55); }
.off-produkt-haken .off-produkt-marke { border-radius: 5px; }
/* Ohne passende Basis: abgeblendet und nicht bedienbar. */
.off-produkt-aus .off-produkt-flaeche { opacity: .5; cursor: not-allowed; }
.off-produkt-aus .off-produkt-flaeche:hover { border-color: var(--sand); }

/* Klappknopf unter der Produktliste. Zugeklappt steht nur das gewaehlte
   Produkt da, der Knopf holt die uebrigen hervor. Bei einer einzigen Zeile
   setzt public/assets/offerte.js das Merkmal hidden. */
.off-mehr {
  justify-self: start; display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .3rem 0; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--emerald-dunkel);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.off-mehr[hidden] { display: none; }
.off-mehr:hover { color: var(--emerald); }
.off-mehr span { text-decoration: underline; text-underline-offset: 3px; }
.off-mehr-pfeil { flex: none; width: 15px; height: 15px; transition: transform .16s; }
@media (prefers-reduced-motion: reduce) { .off-mehr-pfeil { transition: none; } }
.off-mehr[aria-expanded="true"] .off-mehr-pfeil { transform: rotate(180deg); }

.off-fussnote { font-size: .75rem; line-height: 1.55; color: var(--ink-45); }
.off-entfernen {
  justify-self: start; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-55);
  text-decoration: underline; text-underline-offset: 3px;
}
.off-entfernen:hover { color: var(--emerald-dunkel); }
.off-entfernen[hidden] { display: none; }

/* --- Dunkle Karte «Ihre Auswahl» ---
   Alle Werte setzt public/assets/offerte.js: liegt keine Berechnung vor,
   bleiben Positionen und Betrag weg und es steht nur der Weg in den
   Rechner da. Es wird nie ein Tarif oder Betrag behauptet. */
.off-panel {
  background: var(--forest); color: #fff; border-radius: var(--r-l);
  padding: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  display: flex; flex-direction: column; gap: .9rem; box-shadow: var(--schatten-tief);
}
.off-panel-titel { font-size: 1.0625rem; font-weight: 800; letter-spacing: -.01em; }
.off-panel-kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .9rem; flex-wrap: wrap;
  padding-bottom: .85rem; border-bottom: 1px solid var(--forest-linie);
}
.off-panel-marke { display: block; font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mint-label); margin-bottom: .15rem; }
.off-panel-kasse b { font-size: .9375rem; font-weight: 700; }
.off-panel-profil { font-size: .75rem; line-height: 1.5; color: var(--mint-text); text-align: right; }
.off-panel-profil[hidden] { display: none; }
.off-panel-liste { display: grid; gap: .6rem; }
.off-panel-liste:empty { display: none; }
.off-panel-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; font-size: .875rem; line-height: 1.45; }
.off-panel-liste li b { flex: none; font-weight: 800; white-space: nowrap; }
.off-panel-liste li .offen { flex: none; font-weight: 600; color: var(--mint-text); white-space: nowrap; }
.off-panel-liste li.leer { color: var(--mint-text); }
.off-panel-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding-top: .85rem; border-top: 1px solid var(--forest-linie);
  font-size: .9375rem; font-weight: 800;
}
.off-panel-total b { white-space: nowrap; }
.off-panel-hinweis {
  padding: .75rem .9rem; background: rgba(255, 255, 255, .08); border-radius: 10px;
  font-size: .8125rem; line-height: 1.5; color: var(--mint-text);
}
.off-panel-hinweis[hidden] { display: none; }
.off-panel-hinweis a { color: var(--mint); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* Steht im Fluss zuletzt; auf schmalen Geraeten zieht ihn die Regel weiter
   unten an den Anfang der Karte. */
.off-absenden { order: 9; display: grid; gap: .6rem; }
.off-mikro { font-size: .75rem; text-align: center; color: var(--mint-text); }
.off-fehler { font-size: .8125rem; font-weight: 700; line-height: 1.5; }
.off-panel .off-fehler { color: var(--amber-2); }
.off-leiste .off-fehler { color: var(--fehler); }

/* --- Weisse Karte: Bestaetigung nach Art. 45 VAG --- */
.off-recht {
  background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--r-m);
  padding: 1.1rem 1.2rem; display: grid; gap: .8rem;
}
.off-recht p { font-size: .9375rem; line-height: 1.6; color: var(--ink-45); }
.off-recht a { color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.off-siegel { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .75rem; font-weight: 700; color: var(--ink-70); }
.off-siegel li { display: inline-flex; align-items: center; gap: .4rem; }
.off-siegel .punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }

/* --- Handy-Assistent ---
   Wirksam erst, wenn offerte.js data-off-schritt auf <html> gesetzt hat.
   Ohne JavaScript bleibt die Seite vollstaendig sichtbar. */
.off-topbar, .off-leiste { display: none; }

@media (max-width: 900px) {
  html[data-off-schritt] .off-topbar {
    display: block;
    background: var(--paper); border-bottom: 1px solid var(--linie);
  }
  .off-topbar-innen { width: 100%; max-width: var(--huelle); margin: 0 auto; padding: .75rem var(--rand); display: grid; gap: .65rem; }
  .off-schritte { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
  .off-schritt {
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
    display: grid; gap: .3rem; align-content: center; min-height: 44px;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .off-schritt i { display: block; height: 5px; border-radius: 99px; background: var(--linie); transition: background .16s; }
  .off-schritt span { font-size: .75rem; font-weight: 500; text-align: center; color: var(--ink-45); }
  .off-schritt.erreicht i { background: var(--emerald); }
  .off-schritt.jetzt span { font-weight: 700; color: var(--emerald-dunkel); }

  .off-summe {
    background: var(--forest-tief); color: #fff; border-radius: 12px; padding: .625rem .875rem;
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  }
  .off-summe-worte { min-width: 0; }
  .off-summe-marke { font-size: .6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--mint-label); }
  .off-summe-kurz { font-size: .8125rem; color: var(--mint-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .off-summe-total { flex: none; font-size: 1rem; font-weight: 700; }

  /* Genau eine Sektion sichtbar. */
  html[data-off-schritt] .off-intro,
  html[data-off-schritt] .off-fussnote { display: none; }
  html[data-off-schritt="1"] .off-seite [data-schritt]:not([data-schritt="1"]),
  html[data-off-schritt="2"] .off-seite [data-schritt]:not([data-schritt="2"]),
  html[data-off-schritt="3"] .off-seite [data-schritt]:not([data-schritt="3"]) { display: none; }

  html[data-off-schritt] .off-haupt { padding: 1rem 0 7rem; }
  /* Karten-Sektionen nach der Handy-Vorlage: der Innenabstand bleibt der
     der Vorlage (clamp, unten 20px), die Ueberschrift steht auf 20px. Die
     Unterzeile bleibt auf der Hoehe des Ueberschriften-Textes eingerueckt,
     die Felder darunter laufen ueber die ganze Kartenbreite. */
  .off-karte { --off-einzug: 0rem; }
  .off-kopfzeile { gap: .75rem; }
  .off-kopfzeile h2 { font-size: 1.25rem; }
  .off-unterzeile { margin-left: 2.5rem; font-size: .875rem; }

  /* Leistungs-Karten: Beschreibung erst auf Wunsch. Die Produktliste bleibt
     bewusst offen stehen: sie ist der Zweck dieses Schritts, hinter dem
     Aufklapper waere sie wieder unsichtbar. */
  .off-details {
    display: inline-block; justify-self: start; background: none; border: 0; padding: .3rem 0;
    cursor: pointer; font-family: inherit; font-size: .8125rem; font-weight: 700;
    color: var(--emerald-dunkel); text-decoration: underline; text-underline-offset: 2px;
    min-height: 34px;
  }
  .off-leistung:not([data-offen]) .off-leistung-text { display: none; }

  /* Produktzeilen: Beschriftung und Betrag auf 16px, damit sie am Daumen
     lesbar bleiben und iOS beim Antippen nicht zoomt. */
  .off-produkt-worte b { font-size: 1rem; }
  .off-produkt-worte small { font-size: .875rem; }
  .off-produkt-preis { font-size: 1rem; }
  .off-produkt-preis.offen { font-size: .875rem; }
  .off-mehr { font-size: 1rem; }

  /* Auswahl-Karte auf dem Handy: die dunkle Karte «Ihre Auswahl» entfaellt,
     weil derselbe Stand schon im Summen-Balken ganz oben steht (Handy-
     Vorlage). Uebrig bleibt der Absende-Block, der frei auf dem Seitengrund
     steht; Hinweis- und Fehlerfarbe wechseln darum von den hellen Toenen der
     dunklen Karte auf die der hellen Seite. */
  html[data-off-schritt] .off-panel {
    background: none; color: inherit; border-radius: 0; padding: 0;
    box-shadow: none; gap: .6rem;
  }
  html[data-off-schritt] .off-panel-titel,
  html[data-off-schritt] .off-panel-kopf,
  html[data-off-schritt] .off-panel-liste,
  html[data-off-schritt] .off-panel-total,
  html[data-off-schritt] .off-panel-hinweis { display: none; }
  html[data-off-schritt] .off-mikro { color: var(--ink-45); }
  html[data-off-schritt] .off-panel .off-fehler { color: var(--fehler); }
  html[data-off-schritt] .off-absenden .knopf-amber { min-height: 52px; }

  html[data-off-schritt] .off-leiste {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--weiss); border-top: 1px solid var(--linie);
    box-shadow: 0 -8px 24px rgba(15, 23, 43, .08);
  }
  .off-leiste-innen {
    width: 100%; max-width: var(--huelle); margin: 0 auto;
    padding: .7rem var(--rand) calc(.7rem + env(safe-area-inset-bottom));
    display: grid; gap: .5rem;
  }
  .off-leiste-knoepfe { display: flex; align-items: center; gap: .7rem; }
  .off-leiste-knoepfe .knopf { flex: 1; min-height: 48px; font-size: 1rem; }
  .off-leiste-knoepfe .knopf[hidden] { display: none; }
  .off-zurueck-knopf {
    flex: none; background: none; border: 0; padding: .7rem .3rem; min-height: 48px; cursor: pointer;
    font-family: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink-55);
    text-decoration: underline; text-underline-offset: 2px;
  }
  .off-zurueck-knopf[hidden] { display: none; }

  /* Auf Schritt 3 steht der Absende-Knopf im Inhalt: dort gibt es keine
     klebende Leiste mehr, und der Rumpf braucht unten keinen Platz mehr
     fuer sie (Handy-Vorlage). */
  html[data-off-schritt="3"] .off-leiste { display: none; }
  html[data-off-schritt="3"] .off-haupt { padding-bottom: 2.5rem; }
}

/* ============================================================
   6  Bewegung und Zugaenglichkeit
   ============================================================ */

/* Ohne JavaScript bleibt jeder Abschnitt sichtbar: erst .js-reveal am
   html-Element blendet ueberhaupt aus. site.js deckt zusaetzlich nach
   1,2 Sekunden alles auf, falls der Beobachter klemmt. */
.js-reveal .aufblende { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js-reveal .aufblende.sichtbar { opacity: 1; transform: none; }

@keyframes heroEin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
body.geladen .hero-stufe { animation: heroEin .6s cubic-bezier(.2, .7, .3, 1) both; }
.hero-stufe-1 { animation-delay: .04s; }
.hero-stufe-2 { animation-delay: .12s; }
.hero-stufe-3 { animation-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Lade-Overlay: kein Wippen, nur Text und ein ruhiger Balken. */
  .lade-maskottchen { animation: none !important; }
  .lade-fortschritt i { animation: none !important; width: 100%; }
  .js-reveal .aufblende { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.geladen .hero-stufe { animation: none !important; }
  /* Handy-Menue: Ebenen wechseln ohne Schub zur Seite. */
  #mobile-navi .navi-ebene { transition: none !important; }
  #mobile-navi .ebene-links, #mobile-navi .ebene-rechts { transform: none !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   7  Mobil
   ============================================================ */

@media (max-width: 1180px) {
  .kv-karten { gap: 1.1rem; }
  .kv-inhalt { padding: 1.25rem 1.35rem 1.4rem; }
  .kv-kopf { padding: .85rem 1.35rem; }
  .navi-klapp { min-width: 17rem; }
  .hauptnavi { gap: 1.4rem; }
  /* Kassen-Raster der Uebersicht: drei statt vier Spalten. */
  .kassen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .iv-karten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Vorteile: die Innenabstaende der vier Spalten enger fassen. */
  .vorteile li { padding-right: 1.1rem; margin-right: 1.1rem; }
  .ablauf-raster { gap: 2rem; }
}

@media (max-width: 1023px) {
  .hauptnavi { display: none; }
  .kopf-cta { display: none; }
  .navi-schalter { display: grid; }
  .kopf-rechts { margin-left: auto; }
  /* Maskottchen-Logo kompakter, damit die klebende Kopfzeile auf dem Handy
     nicht zu viel vom ersten Bildschirm wegnimmt. Breite folgt weiter dem
     Seitenverhaeltnis der Datei. */
  .wortmarke .marke-bild { height: 38px; }

  /* Eingabefelder auf mindestens 16px: alles darunter laesst iOS/WebKit beim
     Antippen automatisch in die Seite hineinzoomen. .eingabe.gross und die
     Auswahlfelder bleiben davon unberuehrt (die sind schon groesser). */
  .eingabe { font-size: 1rem; }

  /* Startseiten-Hero: das hochformatige Familienfoto samt Schmuckrahmen und
     Ersparnis-Badge entfaellt auf schmalen Bildschirmen. Gestapelt wuerde es
     allein einen ganzen Bildschirm fuellen und Text, Wahl-Karte und Knopf
     unter den Falz druecken. */
  .hero-medien { display: none; }

  /* Seitenkopf der Unterseiten: auf Handy und Tablet bewusst kein Kopfbild,
     weder das Foto mit Schraffur noch das Panorama im Hintergrund. Der Kopf
     besteht dann nur aus Text und Knoepfen. */
  .seiten-hero .huelle { grid-template-columns: 1fr; }
  .hero-flaeche, .hero-bild { display: none; }
  /* Zweispaltige Bloecke der Themenseiten stapeln. */
  .wichtigstes-raster { grid-template-columns: 1fr; }
  .iv-karten, .iv-karten-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .varianten-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kassen-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Vorteile: zwei Spalten, die senkrechten Trennlinien entfallen und die
     Reihen bekommen stattdessen feine Oberkanten. */
  .vorteile { grid-template-columns: 1fr 1fr; gap: 0 1.6rem; border-top: 0; }
  .vorteile li { border-right: 0; margin-right: 0; padding: 1.3rem 0; border-top: 1px solid rgba(25, 68, 48, .15); }
  .vorteile li:last-child { padding-right: 0; }
  .vorteile .ziffer { font-size: 2.125rem; margin-bottom: .7rem; }
  .zwei-spalten { grid-template-columns: 1fr; }
  .kundenstimmen { grid-template-columns: 1fr; gap: 1.2rem; }
  .formular-raster { grid-template-columns: 1fr; }
  .themenkarten, .ratgeber-karten, .karten-raster, .sicherheit { grid-template-columns: 1fr 1fr; }
  .ratgeber-raster { grid-template-columns: 1fr; }
  .ratgeber-navi { position: static; }
  .hebel { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
  /* Kassen-Karten: das auto-fit-Raster stapelt hier von selbst, die Karten
     werden nur etwas kompakter. */
  .kv-inhalt { gap: .9rem; }

  /* Siegel: zwei nebeneinander, das dritte mittig darunter */
  .siegel-liste { grid-template-columns: 1fr 1fr; }
  .siegel-liste > li:last-child { grid-column: 1 / -1; justify-self: center; }
  /* Kategorie-Karten zu zweit nebeneinander. */
  .kategorien { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Ablauf einspaltig: Titel und Maskottchen oben, Liste darunter. */
  .ablauf-raster { grid-template-columns: 1fr; gap: 1.4rem; }
  .ablauf-worte { display: grid; justify-items: start; }
  .ablauf-maskottchen { width: 160px; justify-self: center; }
  .ablaufliste li:first-child { padding-top: .5rem; border-top: 1px solid var(--sand); }
}

@media (min-width: 1024px) {
  .hero-raster { grid-template-columns: 1.1fr .9fr; }
  /* Die Bildseite darf ueber den rechten Rand hinaus atmen, damit der
     Schmuckrahmen der Vorlage sichtbar bleibt. */
  .hero-medien { margin-right: 1.5rem; }
  /* Seitenkopf: Text links, Foto oder Steckbrief rechts (Vorlage 1.1fr/0.9fr). */
  .seiten-hero.mit-bild .huelle { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
}

@media (max-width: 760px) {
  #kk-topbar .kk-tb-lang { display: none; }
  #kk-topbar .kk-tb-kurz { display: inline; }

  .vorteile { grid-template-columns: 1fr; gap: 0; }
  .themenkarten, .ratgeber-karten, .karten-raster, .sicherheit { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr; gap: 1.6rem; }
  /* Kopfzeile mit Knopf rechts: alles untereinander, der Knopf ueber die
     ganze Breite. */
  .kopfzeile-breit { flex-direction: column; align-items: stretch; }
  .kopfzeile-breit > .knopf { width: 100%; }
  .kopfzeile-breit > .lauftext { max-width: none; }
  /* Abschluss-Band: Knopf ueber die ganze Breite, Punkte untereinander. */
  .cta-knopf { width: 100%; }
  .cta-vertrauen { flex-direction: column; align-items: flex-start; gap: .5rem; text-align: left; }
  .namensfelder { grid-template-columns: 1fr; }
  /* Ergebnisliste Grundversicherung: Logo proportional kleiner, Ersparnis-
     Zeile etwas enger. Das Raster stapelt ueber .zusatz-raster. */
  .ersparnis { padding: .8rem 1rem; }
  .zusatz-logo { height: 30px; max-width: 132px; }
  .zusatz-logo img { max-width: 132px; }
  /* Berater-Zeile: Foto eine Spur kleiner, damit die beiden Textzeilen
     daneben nicht umbrechen muessen. */
  .berater-bild { width: 44px; height: 44px; }
  /* Offert-Formular: Strasse und Wohnort brauchen auf dem Handy die volle
     Breite, Hausnummer und Postleitzahl bleiben daneben schmal. */
  .feldpaar.strasse-paar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .feldpaar.plz-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); }

  .steckbrief-zeile { grid-template-columns: 1fr; gap: .2rem; }
  .artikel-fuss { flex-direction: column; align-items: flex-start; }
  .schrittliste li { grid-template-columns: 44px 1fr; gap: .9rem; }
  .schrittliste .nr::before { width: 36px; height: 36px; font-size: 1rem; }

  /* Siegel untereinander */
  .siegel-liste { grid-template-columns: 1fr; gap: .8rem; }
  .siegel-liste > li:last-child { grid-column: auto; justify-self: stretch; }
  .siegel-zeichen { width: 40px; height: 40px; }
  .siegel-zeichen svg { width: 21px; height: 21px; }

  /* ---- Themenseiten (nach Design-Vorlage) ----
     Seitenkopf flacher, alle Raster einspaltig, Tabellen enger. */
  .hero-foto-seite { height: 240px; }
  .hero-schraffur { inset: 16px -16px -16px 16px; }
  .seiten-hero .knopfzeile { margin-top: 1.5rem; }
  .seiten-hero .knopf, .seiten-hero .knopf-rand { width: 100%; }
  .iv-karten, .iv-karten-vier { grid-template-columns: 1fr; }
  .beispiel-karten { grid-template-columns: 1fr; }
  .varianten-karten { grid-template-columns: 1fr; }
  .kassen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stapel-karte { padding: 1.15rem 1.25rem; }
  .hinweis-kasten { padding: 1rem 1.15rem; }
  .berater-karte { padding: 1.25rem; }
  .berater-kopf { gap: .8rem; }
  .steckbrief-kopf, .steckbrief-rumpf { padding-left: 1.25rem; padding-right: 1.25rem; }
  /* Zweispaltige Baender: Text oben, Knoepfe darunter ueber die volle Breite. */
  .band-amber-karte, .band-zwei-weich .huelle, .band-mint .huelle { grid-template-columns: 1fr; gap: 1.4rem; }
  .band-amber-karte .knopfzeile, .band-zwei-weich .knopfzeile { flex-direction: column; align-items: stretch; }
  .band-amber-karte .knopf, .band-zwei-weich .knopf, .band-mint .knopf { width: 100%; }
  .datentabelle table, .beispieltabelle table { font-size: .875rem; }
  .tabelle-eng .datentabelle table { font-size: .875rem; }
  .datentabelle thead th, .datentabelle tbody th, .datentabelle tbody td,
  .beispieltabelle thead th, .beispieltabelle tbody td { padding: .65rem .8rem; }
  .ablauf-maskottchen { width: 140px; }
  .ablaufliste li { grid-template-columns: 48px 1fr; gap: .9rem; padding: 1.2rem 0; }
  .ablaufliste .ziffer { font-size: 2rem; }
  /* Flaches FAQ: etwas engere Abstaende, Antwort ueber die ganze Breite. */
  .faq summary { padding: 1.05rem .1rem; font-size: 1rem; min-height: 52px; }
  .faq p { padding: 0 1.5rem 1.15rem .1rem; font-size: .9375rem; }
  .fakten-kacheln { gap: .8rem; }

  /* Bereichs-Karten des Zusatz-Wegs etwas kompakter */
  .kat-flaeche { padding: .85rem .9rem; gap: .7rem; }
  .kat-zeichen { width: 38px; height: 38px; border-radius: 10px; }
  .kat-zeichen svg { width: 19px; height: 19px; }
  .kat-chips { padding: 0 .9rem .9rem; }

  /* Ergebnisliste der Zusatzversicherung: «Angaben ändern» rutscht auf eine
     eigene Zeile, Karten und Band werden etwas kompakter. */
  .zusatz-hinweiskarte { padding: .9rem 1rem; }
  .zusatz-hinweiskarte .knopf { width: 100%; }
  .zusatz-angaben { padding: .7rem .85rem; }
  .zusatz-aendern { margin-left: 0; width: 100%; }
  .zusatz-raster { gap: 1rem; }
  .zusatz-kasseninhalt { padding: 1.15rem; gap: .9rem; }
  .zusatz-beratung { padding: 1.25rem; gap: 1rem; }
  .zusatz-beratung .knopf { width: 100%; }

  /* ---- Tippflaechen: alles, was mit dem Daumen getroffen wird, mindestens
     44 Bildpunkte hoch. Das betrifft die Auswahl-Chips des Rechners, die
     Segmentwahl im Hero und die Textknoepfe (Zurueck, Ueberspringen), die
     ohne Innenabstand nur so hoch waeren wie ihre Schrift. ---- */
  .hero-wahl { padding: 1.25rem; }
  .segmentwahl button { min-height: 48px; }
  .quiz-zurueck, .quiz-ueberspringen, .step-actions .skip-btn, .person-btn,
  .off-entfernen {
    min-height: 44px; display: inline-flex; align-items: center;
  }

  /* ---- Top-Kassen-Karten ----
     Etwas weniger Innenabstand; die beiden Knöpfe stehen ohnehin schon als
     volle Breite untereinander. */
  .kv-karten { grid-template-columns: 1fr; }
  .kv-inhalt { padding: 1.15rem 1.15rem 1.3rem; }
  .kv-kopf { padding: .75rem 1.15rem; }
  /* Kategorie-Karten zu zweit nebeneinander, damit die Bilder nicht die halbe
     Seite füllen. Aufklapper etwas näher an die Karten. */
  .kategorien { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .quellen-aufklapp.quellen-rahmen { padding-left: 1rem; padding-right: 1rem; }
  .quellen-aufklapp { margin-top: 1.3rem; }
  /* Logo proportional kleiner, damit die Wortmarke nicht über die Karte läuft. */
  .kv-logo { height: 30px; max-width: 132px; }
  .kv-logo img { max-width: 132px; }
  .kv-fussnoten { margin-top: 1.3rem; }

  /* Abschluss-Kaesten: Knopf ueber die ganze Breite statt schmal links. */
  .schluss .knopf { width: 100%; }

  /* Offert-Formular, Geburtsdatum: Tag, Monat und Jahr nebeneinander. Der
     Innenabstand des Monats faellt kleiner aus, damit «September» und
     «Dezember» in die schmale Spalte passen. */
  .off-seite .datumsfeld .eingabe { padding-left: .7rem; padding-right: .7rem; }
  .off-seite .datumsfeld select.eingabe { padding-right: 1.85rem; background-position: right .55rem center; }
}

@media (max-width: 460px) {
  .knopfzeile .knopf { width: 100%; }

  /* ---- Themenseiten (nach Design-Vorlage) ---- */
  .hero-foto-seite { height: 210px; }
  .kassen-raster { grid-template-columns: 1fr; }
  .steckbrief-name { font-size: 1.4375rem; }
  .steckbrief-note .note-zahl { font-size: 1rem; }
  .beispiel-betrag { font-size: 1.75rem; }
  .iv-nr { font-size: 1.375rem; }
  .faq summary { font-size: .9375rem; gap: .8rem; }

  /* Kopfzeile und Frist-Leiste noch eine Spur kompakter. */
  .wortmarke .marke-bild { height: 34px; }
  .wortmarke .name { font-size: 1.375rem; }
  #kk-topbar { padding: .5rem 1rem; gap: .4rem; font-size: .78125rem; }

  /* Schmale Marken-Zeile der Vollbild-Seiten: Wortmarke und Rueckweg passen
     sonst nicht nebeneinander, weil der Rueckweg nicht umbrechen darf. */
  .wortmarke-klein .name { font-size: .9375rem; }
  .ergebnis-neu { font-size: .8125rem; }

  /* Offerten-Strecke: Nummernkreis etwas kleiner, damit die Überschriften
     nicht umbrechen müssen. */
  .off-nummer { width: 26px; height: 26px; font-size: .75rem; }
  .off-leistung { padding: .95rem; gap: .7rem; }
  .off-leistung-kopf { gap: .7rem; }
  .off-pille { padding: .45rem .7rem; font-size: .75rem; }
  /* Produktzeilen: der Betrag rutscht unter den Namen, statt ihn
     zusammenzuquetschen. */
  .off-produkt-flaeche { padding: .55rem .65rem; }
  .off-produkt-preis { margin-left: 1.4rem; text-align: left; }
  .off-schritt span { font-size: .6875rem; }
  .stufe-flaeche { padding: .7rem .8rem; gap: .6rem; flex-wrap: wrap; }
  /* Ergebnisliste Zusatz: der Betrag rutscht unter die Stufenworte, statt
     sie auf schmalen Geräten zusammenzuquetschen. */
  .stufe-preis { margin-left: 2.6rem; text-align: left; }
  /* Karten-Raster der Zusatz-Empfehlungen: eine Karte je Zeile. */
  .zusatz-raster { grid-template-columns: 1fr; }
  /* Kategorie-Karten: auf sehr schmalen Geräten eine Karte je Zeile. */
  .kategorien { grid-template-columns: 1fr; }
  /* Segmentwahl im Hero: das Raster stapelt die Knoepfe von selbst, sobald
     zwei Spalten nicht mehr passen (auch bei vergroesserter Systemschrift). */
  .segmentwahl button { padding: .7rem .5rem; }
  /* Top-Kassen-Karten: Name und Betrag eine Spur kleiner. */
  .kv-name { font-size: 1.0625rem; }
  .kv-preis .betrag { font-size: 1.625rem; }
  .zusatz-kassenname { font-size: 1.0625rem; }
  .zusatz-total .betrag { font-size: 1.25rem; }
  .kat-worte b { font-size: .9375rem; }
  .off-panel-total b { font-size: 1.0625rem; }
  .off-siegel { gap: .5rem .8rem; }

  /* Offert-Formular auf sehr schmalen Geräten: Vorname und Nachname
     untereinander, das Geburtsdatum bleibt dreispaltig (Tag, Monat, Jahr
     passen auch bei 320px nebeneinander). */
  .feldpaar { grid-template-columns: 1fr; }
  .feldpaar.strasse-paar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .feldpaar.plz-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .datumsfeld { gap: .4rem; }
  .off-felder { gap: .95rem; }
  .segment-feld { flex: 1 1 0; }
  /* Franchisestufen bleiben auch hier umbrechend: sechs bzw. sieben Stufen
     nebeneinander wären auf 320px nicht mehr lesbar und nicht mehr treffbar. */
  .segment-wahl.segment-eng .segment-feld { flex: 1 1 4.5rem; }
}

/* ============================================================
   Fokus-Modus «nur das Formular»
   ============================================================

   Gilt auf den Seiten, deren Kopf das Fokus-Skript traegt (build-seiten.mjs,
   Schalter fokusSkript): /beratungstermin, /danke sowie
   die beiden Rechner-Seiten /grundversicherung-vergleich und
   /zusatzversicherung-vergleich. Wirksam wird das Ganze nur, wenn die Adresse
   ?fokus=formular traegt: dann setzt das kleine Skript im Kopf die Klasse
   nur-formular auf <html>. Wer die Seite normal aufruft, sieht sie
   unveraendert vollstaendig. Alle Regeln hier haengen an html.nur-formular
   und koennen darum keine andere Seite beeinflussen.

   Sichtbar bleibt allein die Sektion mit der Karte: das Beratungsformular
   (.lead-sektion, auf /beratungstermin zugleich #anfrage) oder die
   Rechner-Karte (.funnel-abschnitt mit #rechner), dazu der Cookie-Hinweis.
   Frist-Topbar, Kopf, Mobilmenue, Brotkrumen, Seitenkopf, Sicherheits- und
   FAQ-Abschnitt sowie der Fuss sind aus. */
html.nur-formular #kk-topbar,
html.nur-formular .seitenkopf,
html.nur-formular #mobile-navi,
html.nur-formular .seitenfuss { display: none !important; }

/* An deren Stelle tritt die schlanke Kopfzeile (geruest.mjs, fokusKopf):
   Wortmarke und ein Satz Vertrauensanker, keine Navigation und kein zweiter
   Aktions-Knopf. Ausserhalb des Fokus-Modus gibt es sie nicht. Auf schmalen
   Geraeten bricht die Zeile um, statt den Satz zu quetschen. */
.fokus-kopf { display: none; }
html.nur-formular .fokus-kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .35rem 1rem;
  padding: .7rem clamp(1rem, 4vw, 2rem);
  background: var(--weiss); border-bottom: 1px solid var(--linie);
}
html.nur-formular .fokus-vertrauen { font-size: .8125rem; font-weight: 600; color: var(--ink-55); }

/* Alles im Hauptbereich ausser der Karten-Sektion. Ausgenommen bleibt das
   Lade-Overlay des Rechners (.lade-schirm): es steht als eigenes Kind im
   Hauptbereich, ist bis zum Abschluss ueber das Attribut hidden verborgen und
   duerfte danach nicht durch ein display:none !important blockiert werden. */
html.nur-formular main > *:not(.lead-sektion):not(.funnel-abschnitt):not(.lade-schirm) { display: none !important; }

/* Die Einblende-Animation wird uebersprungen: die Karte ist das einzige
   Element auf der Seite und soll sofort dastehen. */
html.nur-formular .formular-karte { opacity: 1 !important; transform: none !important; }

/* Auf dem Handy laeuft die Karte im normalen Fluss, nur mit etwas Luft oben
   und unten. Kein Vollhoehen-Zentrieren, damit die Tastatur nichts verschiebt. */
html.nur-formular main > .lead-sektion,
html.nur-formular main > .funnel-abschnitt {
  padding: clamp(1.25rem, 4vw, 2rem) 0;
  /* Die Danke-Sektion traegt sonst band-weiss mit Linien oben und unten, die
     Rechner-Sektion ab 768px ebenso. Allein auf der Seite wirken diese Linien
     wie ein Rest: sie bleiben weg. */
  border-top: 0; border-bottom: 0;
}

/* Ab 768px sitzt die Karte mittig im Fenster. Ist sie hoeher als das Fenster
   (spaetere Schritte, Danke-Ansicht), waechst die Seite einfach mit: 100svh
   ist nur eine Mindesthoehe, nichts wird abgeschnitten. min-height: 0 steht
   an jedem scrollbaren Flex-Kind, sonst rechnet WebKit die Hoehe falsch. */
@media (min-width: 768px) {
  html.nur-formular body { min-height: 100svh; display: flex; flex-direction: column; }
  html.nur-formular main { flex: 1 1 auto; display: flex; min-height: 0; }
  html.nur-formular main > .lead-sektion,
  html.nur-formular main > .funnel-abschnitt {
    flex: 1 1 auto; display: flex; align-items: center; min-height: 0;
    padding: clamp(1.5rem, 4vw, 3rem) 0;
  }
  html.nur-formular main > .lead-sektion > .huelle,
  html.nur-formular main > .funnel-abschnitt > .huelle { width: 100%; min-width: 0; }
}

/* =========================================================================
   Kontaktzeit «Am besten erreichbar»
   -------------------------------------------------------------------------
   Drei gleich breite Chips in einer Reihe, im bestehenden Chip-Stil. Auf
   schmalen Geraeten bricht die Reihe um, statt die Beschriftungen zu
   quetschen; die Flaechen bleiben dabei ueber 44px hoch und damit gut
   treffbar. Gilt gleichermassen fuer das Lead-Formular und den
   Kontaktschritt der Offerte.
   ========================================================================= */
.erreichbar-wahl { gap: .5rem; }
.erreichbar-wahl .chip { flex: 1 1 7.5rem; min-width: 0; }
.erreichbar-wahl .chip span { width: 100%; padding-left: .7rem; padding-right: .7rem; }