/* Zahnbote-Marke. Schriften self-hosted (CSP font-src 'self', kein CDN, kein
   Datenschutz-Leak). Vollkorn für Titel, Literata für Text. */
@font-face { font-family: "Vollkorn"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/vollkorn-600.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/literata-400.woff2") format("woff2"); }
@font-face { font-family: "Literata"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/literata-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-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%; }

body {
  font-family: "Literata", Georgia, "Times New Roman", 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) { 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;
  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: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--tinte-weich);
}

/* 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: ui-sans-serif, system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--tinte-weich);
}
.vertrauensleiste span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vertrauensleiste svg { width: 15px; height: 15px; color: var(--akzent); flex: none; }

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

/* Drei Phasen statt Prozentzahl: der Nutzer sieht, dass nach den Fragen noch
   etwas fuer ihn kommt. Aus dem Marktbenchmark uebernommen. */
.phasen {
  display: flex;
  gap: 8px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  color: var(--tinte-weich);
  margin-bottom: 12px;
}
.phase { display: flex; align-items: center; gap: 6px; }
.phase + .phase::before { content: ""; width: 14px; height: 1px; background: var(--linie-stark); }
.phase i {
  font-style: normal;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--linie-stark);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700;
}
.phase.ist-aktiv { color: var(--tinte); font-weight: 600; }
.phase.ist-aktiv i { background: var(--akzent-flaeche); border-color: var(--akzent-flaeche); color: #fff; }

.balken { height: 4px; background: var(--linie); border-radius: 99px; overflow: hidden; margin-bottom: 22px; }
.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: 22px 20px;
}

h1 { font-family: "Vollkorn", Georgia, serif; font-size: 25px; line-height: 1.2; 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: 15px; margin-bottom: 18px; }

/* 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 {
  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 .12s, background .12s;
}
.option:hover { border-color: var(--akzent); }
.option:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.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; }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  width: 100%;
  padding: 14px 22px;
  background: var(--akzent-flaeche);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font: 600 17px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
}
.knopf[disabled] { opacity: .45; cursor: not-allowed; }

.feld { display: block; margin-bottom: 14px; }
.feld > span { display: block; font-family: 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:focus, .feld select:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: var(--akzent); }
/* 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; }
/* 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 { border-color: var(--warn); }
.feld em { display: block; font-style: normal; font-family: 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: 18px; padding-top: 16px; display: grid; gap: 14px; }
/* 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: 14.5px; line-height: 1.45;
  min-height: 48px; padding: 4px 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: 2px; }
.consent summary { font-family: 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; }

/* 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 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; }

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

/* Erreichbarkeit als Chip-Reihe statt als weiterer Bildschirm: sie ist eine
   Kontaktangabe, keine Qualifizierungsfrage, und gehoert deshalb hierher.
   48px hoch, damit die Regel fuer grobe Zeiger erfuellt bleibt. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 48px;
  padding: 10px 16px;
  background: var(--karte);
  border: 1px solid var(--linie-stark);
  border-radius: 99px;
  font: 500 16px/1.2 inherit;
  color: inherit;
  cursor: pointer;
  flex: 1 1 auto;
}
.chip:hover { border-color: var(--akzent); }
.chip:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.chip[aria-pressed="true"] { border-color: var(--akzent); background: var(--akzent-zart); font-weight: 600; }

.vertrauen {
  margin-top: 12px;
  text-align: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  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: 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: "Vollkorn", Georgia, 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: "Vollkorn", Georgia, 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 „Jetzt die vier Fragen beantworten", also genau der Knopf, 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 {
  border-top: 1px solid var(--linie);
  padding: 14px 18px 22px;
  display: flex; gap: 18px; justify-content: center;
  font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px;
}
.fuss a { color: var(--tinte-weich); display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }

/* Ablauf-Strip auf der ersten Stufe: was gleich passiert, in drei Schritten.
   Ein Standard-Baustein guter Funnels, nimmt der ersten Frage die Nacktheit,
   ohne etwas zu behaupten. Verbundener Zeitstrahl statt farbigem Kantenbalken. */
.ablauf { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie); }
.ablauf-titel {
  font-family: 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: 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: ui-sans-serif, system-ui, sans-serif; font-size: 13.5px; color: var(--tinte-weich); margin: 2px 0 0; }

/* 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; }

/* Sekundaerer Knopf fuer die sanfte Abzweigung (nicht geeignet -> Ratgeber). */
.knopf.sekundaer { background: var(--karte); color: var(--akzent-ink); border: 1px solid var(--linie-stark); }
.knopf.sekundaer:hover { border-color: var(--akzent); }

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