/* Zahnbote-Marke. Schriften self-hosted (CSP font-src 'self', kein CDN, kein
   Datenschutz-Leak). Vollkorn für Titel, Literata für Text. */
/* EINE Schrift fuer alles (17.09.2026, Userentscheid). Vorher Vollkorn (Serif)
   fuer Titel und Literata (Serif) fuer Text, dazu an 13 Stellen der System-Stack —
   drei Stimmen auf sechs Bildschirmen. Plus Jakarta Sans ist eine Variable Font
   (200-800, 27 KB, selbst gehostet), deckt also alle Gewichte mit EINER Datei:
   drei Schriftdateien und 69 KB weniger als vorher.
   Selbst gehostet bleibt Pflicht — ein Google-Fonts-Abruf widerspraeche unserer
   eigenen Datenschutzerklaerung. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-style: normal; font-display: swap;
  src: url("fonts/plus-jakarta-sans.woff2") format("woff2"); }
/* Vollkorn bleibt — aber NUR fuer die Wortmarke. Sie ist das Markenzeichen,
   nicht Text: Kopf und Fuss tragen dieselbe Klasse. Alles andere (Fragen,
   Antworten, Rechtstexte) laeuft in Jakarta. */
@font-face { font-family: "Vollkorn"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/vollkorn-600.woff2") format("woff2"); }

/* Alles Markenbezogene steht in :root. Werte aus dem Zahnbote-Brand-System,
   Kontraste dort nach WCAG gemessen (Weiß auf --akzent-cta 6,08:1, --akzent-ink
   als Text 7,35:1, --warn-Ocker 5,71:1). */
:root {
  --papier: #F4F2ED;
  --karte: #FCFBF8;
  --tinte: #1E1D1B;
  --tinte-weich: #5C5B57;
  --linie: #DAD6CE;
  --linie-stark: #857E72;
  --akzent: #C3161C;       /* Grafik, Markenfläche, Fokusring */
  --akzent-flaeche: #C3161C; /* CTA-Fläche, weißer Text darauf */
  --akzent-dunkel: #A71117;
  --akzent-ink: #9E1218;   /* Akzent ALS Text: Links, Aufklapper */
  --akzent-zart: #FBEFEC;  /* weiche rote Tönung für Hinweisboxen */
  --warn: #7A5A00;         /* Frist/Fehler, Ocker weil Rot die Marke ist */
  --erfolg: #157F3C;       /* nur der Erfolgs-Haken am Ende, Weiss darauf 5,08:1 */
  --radius: 14px;
  --nav-h: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

.option, .knopf, .link-knopf, .consent label, .consent summary,
.fuss a, .wortmarke { touch-action: manipulation; }

body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  background: var(--papier);
  color: var(--tinte);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Marke mittig und praesenter: der Kopf traegt nur die Wortmarke, zentriert.
   Die Vertrauenszeile darunter uebernimmt die Reassurance, die frueher als
   kleiner Hinweis rechts stand. */
.kopf {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--linie);
}
/* Folgt die Vertrauensleiste, traegt sie die Trennlinie, nicht der Kopf, sonst
   stehen zwei Linien dicht uebereinander. */
.kopf:has(+ .vertrauensleiste), .kopf:has(+ .angebot-zeile) { border-bottom: none; }
/* Die Wortmarke ist ein Link zurueck zum Funnel: auf den Rechtsseiten ist sie
   sonst die einzige Stelle, an der man haengen bleibt. */
.wortmarke {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: .4em;
  font-family: "Vollkorn", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--tinte);
  text-decoration: none;
}
a.wortmarke:hover { color: var(--akzent-ink); }
a.wortmarke:focus-visible { outline: 2px solid var(--akzent); outline-offset: 4px; border-radius: 4px; }
/* Sperrung sitzt am Text, nicht am Kasten: sonst haengt hinter dem letzten
   Buchstaben ein Leerraum, der die Marke sichtbar aus der Mitte zieht. */
.wortmarke span { letter-spacing: .06em; margin-right: -.06em; }
/* align-items:center legt die Mitte der ZEILE auf die Mitte des Zeichens, nicht
   die Mitte der Versalien. Gemessen sass das Zeichen dadurch 1,88 px zu tief
   (bei 20 px = .094em), was als schiefe Marke sichtbar war. */
.wortmarke svg { height: 1.22em; width: auto; display: block; transform: translateY(-.094em); }
.kopf-hinweis {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--tinte-weich);
}

/* Dauerhinweis, seit 10.09.2026 auf jedem Schritt. Marken-Serife wie die
   Wortmarke, gleiche Flaeche wie die Vertrauensleiste darunter: Kopf, Hinweis
   und Leiste lesen so als ein Block, nicht als drei gestapelte Baender.
   Beschreibt die Leistung, verspricht nichts. */
.angebot-zeile {
  margin: 0;
  padding: 8px 18px 2px;
  text-align: center;
  background: var(--karte);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: var(--tinte);
}
.angebot-zeile .angebot-kurz { display: none; }

/* Vertrauensleiste. Nur ehrliche, belegbare Aussagen, kein erfundenes Siegel,
   keine Sterne. Icons in Akzentfarbe (Grafik, 3:1 genuegt), Text in --tinte-weich. */
.vertrauensleiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px 20px;
  padding: 9px 18px;
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--tinte-weich);
}
.vertrauensleiste { display: grid; justify-items: center; gap: 4px; flex-wrap: nowrap; }
.vertrauensleiste p { margin: 0; }
/* Icon und Satz bilden einen Block, der als Ganzes mittig sitzt — der Text
   selbst bleibt linksbuendig. Zentrierter Flattersatz ueber zwei Zeilen las
   sich wie ein Zitat, nicht wie eine Zusage. */
.vertraulich {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  max-width: 34em; text-align: center; color: var(--tinte);
}
.vertraulich svg { flex: none; }
.vertrauen-punkte { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.vertrauensleiste span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vertrauensleiste svg { width: 15px; height: 15px; color: var(--akzent); flex: none; }
.vertrauensleiste .vertrauen-kurz { display: none; }
/* Die belegte Zahl aus den eigenen Zaehlstaenden. Sie steht `hidden`, bis der
   Dienst eine liefert — eine 0 oder ein leerer Platz behauptet Betrieb und
   zeigt Stillstand. */
.puls-zahl[hidden] { display: none !important; }
.puls-zahl b { color: var(--akzent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.huelle {
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px 26px;
}

.balken { height: 4px; background: var(--linie); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.balken span { display: block; height: 100%; width: 0; background: var(--akzent-flaeche); transition: width .28s ease; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: 0 12px 34px rgba(30, 29, 27, .045);
}

.karte-eintritt { animation: karte-eintritt .26s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes karte-eintritt {
  from { opacity: 0; transform: translateY(10px) scale(.995); }
  to { opacity: 1; transform: none; }
}
.karte-weg { animation: karte-weg .14s ease-in both; }
@keyframes karte-weg {
  to { opacity: 0; transform: translateY(-6px) scale(.995); }
}

h1 { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 26px; line-height: 1.18; letter-spacing: -.01em; margin-bottom: 8px; font-weight: 600; }
/* Die Ueberschrift bekommt beim Stufenwechsel programmatisch den Fokus, damit
   Screenreader die neue Frage vorlesen. Sie ist NICHT bedienbar und nicht
   tabbar (tabindex="-1"), deshalb bekommt sie auch keinen Fokusrahmen: Chrome
   wertet den programmatischen Fokus sonst als :focus-visible und malt beim
   Neuladen einen roten Kasten um die Frage. Am 03.09.2026 live so gesehen. */
h1[tabindex]:focus, h1[tabindex]:focus-visible { outline: none; }
.frage-hilfe { color: var(--tinte-weich); font-size: 15.5px; line-height: 1.42; margin-bottom: 14px; }
.schritt-label {
  margin: 0 0 6px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinte-weich);
}
.karten-meta {
  min-height: 18px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.karten-meta:has(.link-knopf) { min-height: 44px; }
.karten-meta .schritt-label { margin: 0 0 0 auto; }
.karten-meta .link-knopf { margin: 0; }

/* Antwortkarten. 56px hoch, damit die Regel fuer grobe Zeiger sicher erfuellt
   ist, nicht knapp. Kein farbiger Kantenstreifen, der Zustand sitzt in Rahmen
   und Flaeche. */
.auswahl { display: grid; gap: 10px; }
.option {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 16px;
  background: var(--karte);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 17px;
  text-align: left;
  width: 100%;
  color: inherit;
  font-family: inherit;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.auswahl .option[hidden] { display: none; }
.option:hover { border-color: var(--akzent); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(30, 29, 27, .07); }
.option:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.option:disabled { color: inherit; cursor: default; opacity: 1; }
.option .marke {
  width: 20px; height: 20px; flex: 0 0 20px;
  border: 1.5px solid var(--linie-stark);
  border-radius: 50%;
}
.option[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-zart); }
.option[aria-pressed="true"] .marke { border-color: var(--akzent); border-width: 6px; }
.option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.option-pfeil { width: 18px; height: 18px; flex: 0 0 18px; color: var(--tinte-weich); }
.option-pfeil svg, .option-icon svg { display: block; width: 100%; height: 100%; }
.option[aria-pressed="true"] .option-pfeil { color: var(--akzent-ink); transform: translateX(2px); }
.option-icon {
  min-width: 38px;
  width: auto;
  height: 38px;
  flex: 0 0 auto;
  padding: 8px;
  border-radius: 999px;
  background: var(--akzent-zart);
  color: var(--akzent-ink);
}
.option-icon svg { height: 100%; width: auto; }
.option[aria-pressed="true"] .option-icon { background: var(--akzent-flaeche); color: #fff; }
/* In dichten Listen (kompakt/zweispaltig) sitzt das Zeichen kleiner, sonst
   waechst die Karte ueber ihre gemessene Hoehe hinaus. */
.auswahl.kompakt .option-icon, .auswahl.zweispaltig .option-icon {
  width: auto;
  flex-basis: auto;
  width: 30px; height: 30px; flex: 0 0 30px; padding: 6px;
}
.auswahl.raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.auswahl.raster .option {
  min-height: 142px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
}
.auswahl.raster .option-text { flex: 0; font-size: 15px; line-height: 1.35; }
.auswahl.raster .option-pfeil { display: none; }
.auswahl.kompakt .option { min-height: 50px; padding-block: 10px; }
.auswahl.zweispaltig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mehr-optionen {
  min-height: 44px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--linie-stark);
  border-radius: 9px;
  background: var(--papier);
  color: var(--akzent-ink);
  font: 600 14px/1.25 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}
.mehr-optionen::after { content: "+"; font-size: 18px; line-height: 1; }
.mehr-optionen[aria-expanded="true"]::after { content: "−"; }
.mehr-optionen:hover { background: var(--akzent-zart); }
.mehr-optionen:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  width: 100%;
  padding: 14px 22px;
  background: var(--akzent-flaeche);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font: 600 17px/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.knopf svg { width: 19px; height: 19px; flex: none; }
.knopf:hover { background: var(--akzent-dunkel); transform: translateY(-1px); box-shadow: 0 9px 20px rgba(158, 18, 24, .2); }
.knopf:active { transform: translateY(0); box-shadow: none; }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.knopf[disabled] { opacity: .45; cursor: not-allowed; }
.knopf[disabled]:hover { background: var(--akzent-flaeche); transform: none; box-shadow: none; }
.knopf.sekundaer { background: var(--karte); color: var(--akzent-ink); border: 1px solid var(--linie-stark); }
.knopf.sekundaer:hover { border-color: var(--akzent); }

.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13px; color: var(--tinte-weich); margin-bottom: 5px; }
.feld input, .feld select {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  background: var(--karte);
  border: 1px solid var(--linie-stark);
  border-radius: 11px;
}
.feld input::placeholder { color: #77736C; opacity: 1; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
.nachdruck {
  display: block;
  margin: 2px 0;
  color: var(--akzent-ink);
  font-weight: 600;
}
.eingabe-hilfe {
  display: block;
  margin-top: 6px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinte-weich);
}
/* PLZ und Ort teilen sich eine Zeile. Die Kontaktstufe hat den groessten
   Absprung im Trichter (gemessen 45,3 %), da kostet jede zusaetzliche volle
   Zeile mehr, als sie einbringt. */
.feld-paar { display: grid; grid-template-columns: 7.5rem 1fr; gap: 12px; }
.feld-paar .feld { margin-bottom: 14px; }
.ort-paar { grid-template-columns: 7.5rem minmax(0, 1fr); }
.datum-felder { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 10px; }
.datum-felder .feld { min-width: 0; }
.datum-felder + .eingabe-hilfe { margin-top: -6px; }
.weiter-knopf, .absenden-knopf { margin-top: 18px; }
/* Das Datumsfeld ist auf iOS sonst hoeher als die uebrigen Felder. */
.feld input[type="date"] { min-height: 52px; appearance: none; }
.feld.fehlt input, .feld.fehlt select, [data-feld].fehlt input { border-color: var(--warn); }
.feld[data-feld="telefon"].fehlt { --warn: var(--akzent-ink); }
.meldung { display: block; font-style: normal; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13px; color: var(--warn); margin-top: 5px; }

/* Einwilligungen: Kernsatz sichtbar, vollstaendiger Wortlaut im Aufklapper.
   Drei getrennte Kaesten, weil Beratung, Telefonwerbung und Gesundheitsdaten
   drei Zwecke sind. Keine ist vorausgewaehlt. */
.consent { border-top: 1px solid var(--linie); margin-top: 14px; padding-top: 12px; display: grid; gap: 12px; }
/* Die Zeile ist das Tippziel, nicht das Kaestchen: min-height 48px, damit die
   Regel fuer grobe Zeiger auch bei einzeiligem Text erfuellt bleibt. */
.consent label {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.38;
  min-height: 48px; padding: 2px 0; cursor: pointer;
}
.consent input[type=checkbox] { width: 24px; height: 24px; flex: 0 0 24px; margin-top: 1px; accent-color: var(--akzent); }
.consent details { margin-left: 35px; margin-top: 0; }
.consent summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--akzent-ink);
  cursor: pointer;
}
.consent .wortlaut { font-size: 13.5px; color: var(--tinte-weich); margin-top: 6px; }

.ablauf { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.ablauf-titel {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-weich); margin-bottom: 12px;
}
.ablauf-schritt { position: relative; display: flex; gap: 13px; align-items: flex-start; padding: 8px 0; }
.ablauf-schritt:not(:last-child)::before {
  content: ""; position: absolute; left: 13.5px; top: 36px; bottom: -2px; width: 1px; background: var(--linie);
}
.ablauf-nr {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--akzent-zart); color: var(--akzent-ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 14px;
}
.ablauf-schritt b { display: block; font-family: inherit; font-size: 16px; line-height: 1.3; }
.ablauf-schritt p { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; color: var(--tinte-weich); margin: 2px 0 0; }

/* Zurueck sitzt oben IM Kasten. Unter der Karte stand er isoliert neben einer
   Zeile, die dasselbe sagte wie die Vertrauensleiste im Kopf; die Zeile ist
   deshalb weg, der Knopf eingerueckt. Rahmen plus Pfeil, weil er als reiner
   Text nicht als Knopf erkennbar war. */
.link-knopf {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 15px 0 12px;
  margin-bottom: 16px;
  background: var(--papier);
  border: 1px solid var(--linie-stark); border-radius: 99px;
  font: 500 14.5px/1 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--tinte-weich); cursor: pointer;
}
.link-knopf svg { width: 16px; height: 16px; flex: none; }
.link-knopf:hover { color: var(--tinte); border-color: var(--akzent); }
.link-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.link-knopf:disabled { opacity: .55; cursor: wait; }
.code-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; }
.code-aktionen .link-knopf { margin: 0; }
.code-status {
  min-height: 20px;
  margin-top: 8px;
  text-align: center;
  font: 13px/1.4 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  color: var(--tinte-weich);
}
.code-status.ist-fehler { color: var(--warn); }

.hinweis { background: var(--akzent-zart); border-radius: var(--radius); padding: 14px 16px; font-size: 15px; margin-bottom: 16px; }

/* Nur noch der Ratgeber nutzt diese Zeile. Im Funnel stand sie unter dem
   Absendeknopf und sagte woertlich dasselbe wie der Vertrauensblock 40 px
   darunter — die Dublette ist am 16.09.2026 entfallen, mit ihr die
   Ausrichtung auf ein Icon, das es hier nicht mehr gibt. */
.vertrauen {
  margin-top: 12px;
  text-align: center;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tinte-weich);
}

/* Advertorial. Eigene Lesebreite, sonst dieselben Bausteine wie der Funnel:
   ein Wechsel der Anmutung zwischen Artikel und Strecke kostet Vertrauen. */
.huelle.lesen { max-width: 660px; padding-bottom: 40px; }
.anzeige {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinte-weich); margin-bottom: 10px;
}
.titel { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 30px; line-height: 1.16; margin-bottom: 12px; }
.vorspann { font-size: 19px; line-height: 1.5; color: var(--tinte-weich); margin-bottom: 24px; }
.lesen h2 { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 22px; line-height: 1.25; font-weight: 600; margin: 30px 0 8px; }
.lesen h3 { font-size: 18px; font-weight: 600; margin: 20px 0 4px; }
.lesen p { margin-bottom: 14px; }
/* Generische Listen und Links fuer uebernommene Rechtstexte (Impressum,
   Datenschutz). Die kuratierte .liste bleibt davon unberuehrt. */
.lesen ul:not(.liste), .lesen ol { padding-left: 1.3em; margin-bottom: 14px; }
.lesen li { margin-bottom: 6px; }
/* :not(.knopf) ist Pflicht, kein Feinschliff. Ohne das gewinnt diese Regel
   (0,1,1) gegen .knopf (0,1,0) und faerbt den CTA des Ratgebers mit der
   TEXT-Akzentfarbe #9E1218 auf die CTA-Flaeche #C3161C: 1,35:1 statt 6,08:1,
   dazu unterstrichen. Am 04.09.2026 auf der Live-Domain gemessen — betroffen
   war der primäre Anfrage-Knopf, also genau der CTA, auf den der
   gesamte Anzeigen-Traffic zielt. Die Kontrast-Rollen waren richtig gesetzt,
   diese eine Zeile hat sie ausgehebelt. */
.lesen a:not(.knopf) { color: var(--akzent-ink); text-decoration: underline; }
.lesen address { font-style: normal; }
.liste { list-style: none; margin: 0 0 16px; }
.liste li { position: relative; padding-left: 18px; margin-bottom: 9px; }
.liste li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--akzent);
}

/* Fuss ab 10.09.2026 mit Marke und Betreiberzeile: die Strecke endete sonst
   ohne Absender. AGB fehlen bewusst — ueber die Strecke kommt kein Vertrag mit
   dem Besucher zustande; sobald der Kunde einen Text liefert, ist es eine
   weitere Zeile in .fuss-links. */
.fuss {
  border-top: 1px solid var(--linie);
  padding: 16px 18px max(22px, env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 0;
  text-align: center;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-size: 13px;
}
/* min-width, nicht nur min-height: „AGB" mass gemessen 37 px breit und riss
   damit die 44er-Regel fuer grobe Zeiger. Kurze Beschriftungen sind genau
   der Fall, den eine reine Hoehenregel durchgehen laesst. */
.fuss a { color: var(--tinte-weich); display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 6px; }
.fuss .fuss-marke { color: var(--tinte); font-size: 16px; }
.fuss-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
/* Endzustaende: Erfolg (Haken, gruen) und Neutral (nicht geeignet, ruhig).
   Beide zentriert, mit Badge statt nur Text. */
.ende { text-align: center; }
.ende h1 { text-align: center; }
.ende .frage-hilfe { text-align: center; margin-bottom: 0; }
.ende-badge {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; margin: 2px auto 16px;
  background: var(--erfolg);
}
.ende-badge svg { width: 30px; height: 30px; color: #fff; stroke-width: 2.5; }
.ende-badge.neutral { background: var(--papier); border: 1px solid var(--linie-stark); }
.ende-badge.neutral svg { color: var(--tinte-weich); }
.ende-plan {
  list-style: none; text-align: left; margin: 22px 0 0;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
}
.ende-plan li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; font-size: 15px; }
.ende-plan li:not(:last-child) { border-bottom: 1px solid var(--linie); }
.ende-plan svg { width: 20px; height: 20px; flex: none; color: var(--tinte-weich); margin-top: 1px; }
.ende-plan li.getan svg { color: var(--erfolg); }
.ende .hinweis { text-align: left; margin: 20px 0 0; }
.ende .knopf { margin-top: 22px; }

@media (min-width: 620px) {
  body { font-size: 18px; }
  h1 { font-size: 29px; }
  .huelle { padding-top: 34px; }
  .wortmarke { font-size: 21px; }
}

@media (max-width: 619px) {
  html[data-variante] { --nav-h: 48px; }
  html[data-variante] body { font-size: 16px; line-height: 1.45; }
  html[data-variante] .wortmarke { font-size: 18px; }
  html[data-variante] .vertrauensleiste {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 11px;
  }
  html[data-variante] .vertrauensleiste span { gap: 4px; }
  html[data-variante] .vertrauensleiste svg { width: 14px; height: 14px; }
  html[data-variante] .vertrauensleiste .vertrauen-lang { display: none; }
  html[data-variante] .vertrauensleiste .vertrauen-kurz { display: inline-flex; }
  /* Auf dem Handy zaehlt jeder Pixel ueber der Frage: das Band bleibt eine
     Zeile, aber eine schmalere. 13 px bleiben es trotzdem — darunter meldet
     `mobil-audit.mjs` zu recht „Text < 13 px", und die Zahl im Band ist die
     eine Stelle, an der jemand wirklich etwas ablesen soll. Die laengste
     Zeile (41 Zeichen) misst so rund 275 px und passt auch auf 320 px
     Breite; `text-overflow` faengt alles Weitere ab. */
  html[data-variante] .angebot-zeile { padding: 5px 10px 1px; font-size: 13px; }
  html[data-variante] .angebot-zeile .angebot-lang { display: none; }
  html[data-variante] .angebot-zeile .angebot-kurz { display: inline; }
  html[data-variante] .huelle { padding: 10px 12px max(24px, env(safe-area-inset-bottom)); }
  html[data-variante] .balken { height: 3px; margin-bottom: 8px; }
  html[data-variante] .karte { padding: 14px 13px; border-radius: 12px; box-shadow: 0 8px 24px rgba(30, 29, 27, .04); }
  html[data-variante] .karten-meta { margin-bottom: 6px; }
  html[data-variante] h1 { font-size: 23px; line-height: 1.15; margin-bottom: 6px; }
  html[data-variante] .frage-hilfe { font-size: 14.5px; line-height: 1.38; margin-bottom: 10px; }
  html[data-variante] .auswahl { gap: 8px; }
  html[data-variante] .option {
    min-height: 48px;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 11px;
    font-size: 16px;
    line-height: 1.3;
  }
  html[data-variante] .option .marke { width: 18px; height: 18px; flex-basis: 18px; }
  html[data-variante] .option-pfeil { width: 16px; height: 16px; flex-basis: 16px; }
  html[data-variante] .option-icon { min-width: 30px; width: auto; height: 30px; flex-basis: auto; padding: 6px; }
  html[data-variante] .auswahl.raster .option {
    min-height: 86px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 8px 9px;
  }
  html[data-variante] .auswahl.raster .option-text {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.25;
    overflow-wrap: normal;
    hyphens: auto;
  }
  html[data-variante] .auswahl.raster .option-pfeil { display: none; }
  html[data-variante] .auswahl.kompakt .option-icon,
  html[data-variante] .auswahl.zweispaltig .option-icon { min-width: 26px; width: auto; height: 26px; flex-basis: auto; padding: 5px; }
  html[data-variante] .auswahl.kompakt .option { min-height: 48px; padding-block: 8px; }
  html[data-variante] .auswahl.zweispaltig { gap: 8px; }
  html[data-variante] .auswahl.zweispaltig .option { gap: 7px; padding-inline: 9px; font-size: 15px; }
  html[data-variante] .auswahl.zweispaltig .option-pfeil { display: none; }
  html[data-variante] .ablauf { margin-top: 14px; padding-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  html[data-variante] .ablauf-titel { grid-column: 1 / -1; margin-bottom: 0; }
  html[data-variante] .ablauf-schritt { display: block; padding: 0; text-align: center; }
  html[data-variante] .ablauf-schritt:not(:last-child)::before { content: none; }
  html[data-variante] .ablauf-nr { width: 24px; height: 24px; margin: 0 auto 5px; font-size: 12px; }
  html[data-variante] .ablauf-schritt b { font: 600 12px/1.25 "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }
  html[data-variante] .ablauf-schritt p { display: none; }
}

@media (max-width: 359px) {
  html[data-variante] .karte { padding: 12px 10px; }
  html[data-variante] h1 { font-size: 21px; }
  html[data-variante] .frage-hilfe { font-size: 13.5px; margin-bottom: 10px; }
  html[data-variante] .option { gap: 8px; padding-inline: 10px; font-size: 15px; }
  html[data-variante] .auswahl.raster .option {
    min-height: 70px;
    display: flex;
    justify-content: center;
    padding-inline: 5px;
  }
  html[data-variante] .auswahl.raster .option-icon { display: none; }
  html[data-variante] .auswahl.raster .option-text { font-size: 13px; }
  html[data-variante] .feld-paar, html[data-variante] .ort-paar { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .karte-eintritt, .karte-weg { animation: none; }
  .balken span, .option, .knopf { transition: none; }
}

/* Zwei kurze Felder in einer Zeile — bewusst AUCH am Telefon nebeneinander.
   `.feld-paar` daneben klappt auf kleinen Schirmen auf eine Spalte um; genau
   das waere hier falsch, denn der gewonnene Platz ist der Zweck. Vorname und
   Nachname sind kurz genug: bei 360 px bleiben je 165 px, das traegt beide
   Platzhalter. */
.namen-paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.namen-paar .feld { margin-bottom: 0; }

/* Ungerade Antwortzahl: die letzte Kachel steht sonst allein links und die
   Reihe wirkt abgebrochen. Sie bekommt die ganze Reihe und wird darin mittig
   auf Kachelbreite gesetzt — so wie es die Referenz loest. `:nth-child(odd)`
   am letzten Kind trifft genau den ungeraden Fall; bei gerader Anzahl greift
   nichts. */
.auswahl.raster .option:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px);
}
@media (max-width: 380px) {
    /* Auf sehr schmalen Geraeten ist die halbe Breite zu eng fuer zwei Zeilen
       Text — dort darf die letzte Kachel die Reihe fuellen. */
    .auswahl.raster .option:last-child:nth-child(odd) { width: 100%; }
}

/* Der saubere Umbruch des hervorgehobenen Satzes hat den Kontaktschritt um
   28 px wachsen lassen (Hilfetext 73 -> 101 px) und damit einen Teil des
   Knopf-Gewinns wieder aufgebraucht. Zurueckgeholt wird er, wo nichts
   verloren geht: an den Abstaenden, nicht am Text.
   ⚠️ Nur auf dem Kontaktschritt. Er ist der einzige Bildschirm mit dem
   Telefon-Hinweis, und er ist der einzige, auf dem es um Pixel geht — auf
   allen uebrigen bleibt die Luft, wo sie ist. */
true
/* Auch das Kartenpolster nur hier enger: 20 auf 13 px oben und unten spart
   14 px. Auf allen anderen Schritten bleibt es, wie es ist — dort ist Luft
   kein Problem, sondern Gestaltung. */
.karte:has(#telefon-hilfe) { padding-block: 13px; }
.karte:has(#telefon-hilfe) .karten-meta { margin-bottom: 2px; }