/* /zahn v2 (2026-11-02) – Kampagnenseite Allianz „Meine Zahnversicherung“ nach der Design-Übergabe zahn-v2-1.
   Baut auf familie-v2.css auf (Kopf, Hero, Knöpfe, Zitat, FAQ, Leiste). CSP: keine Inline-Styles – alles hier. */

/* ---------- Umschalter ---------- */
.zahn-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 40px; background: var(--white); }
.zahn-wahl[hidden] { display: none; }
.zahn-wahl button { min-height: 46px; border: 0; border-radius: 36px; background: transparent; color: var(--fv-text-weich);
  font: 700 16px/1.2 var(--sans); cursor: pointer; }
.zahn-wahl button[aria-pressed="true"] { background: var(--fv-gruen); color: var(--white); }

.zahn-variante { display: flex; flex-direction: column; gap: 20px; }
p.zahn-variante, details.zahn-variante { display: block; }

/* ---------- Hero ---------- */
.zahn-cta { display: flex; flex-direction: column; gap: 10px; }
.zahn-cta-hinweis { margin: 0; font-size: 14px; color: var(--fv-text-weich); text-align: center; }

/* ---------- Blöcke ---------- */
.zahn-block { padding-top: 36px; padding-bottom: 10px; display: flex; flex-direction: column; gap: 18px; }
.zahn-block--eng { padding-top: 26px; padding-bottom: 6px; }
.zahn-block h2 { margin: 0; font-size: clamp(28px, 7vw, 38px); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.zahn-text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fv-text-weich); }

/* Zeitpunkt (Kind) */
.zahn-zeit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zahn-zeit-karte { border-radius: 22px; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.45; }
.zahn-zeit-karte--gut { background: var(--fv-gruen-flaeche); }
.zahn-zeit-karte--spaet { background: var(--fv-rosa); }
.zahn-zeit-marke { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fv-gruen); }
.zahn-zeit-karte--spaet .zahn-zeit-marke { color: var(--fv-warn); }
.zahn-zeit-ende { font-weight: 700; }
.zahn-zeit-bedingung { margin-top: -6px; font-size: 13px; line-height: 1.4; color: var(--fv-text-weich); }

/* Staffel (Erwachsene) */
.zahn-staffel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.zahn-staffel-saeule { display: flex; flex-direction: column; gap: 8px; }
.zahn-staffel-betrag { font-size: 17px; font-weight: 700; text-align: center; }
.zahn-staffel-betrag--voll { color: var(--fv-gruen); }
.zahn-staffel-balken { display: block; border-radius: 14px 14px 4px 4px; }
.zahn-staffel-balken--1 { height: 60px; background: #cfe0d3; }
.zahn-staffel-balken--2 { height: 120px; background: #8fb79a; }
.zahn-staffel-balken--3 { height: 180px; background: var(--fv-gruen); }
.zahn-staffel-jahr { font-size: 14px; line-height: 1.3; color: var(--fv-text-weich); text-align: center; }

/* Vergleichstabelle */
.zahn-tabelle-rahmen { overflow-x: auto; }
.zahn-tabelle { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.zahn-tabelle th, .zahn-tabelle td { padding: 14px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fv-rand); }
.zahn-tabelle thead th { padding: 12px 10px; border-bottom: 0; font-size: 17px; font-weight: 700; }
.zahn-tabelle thead th:first-child { width: 36%; font-size: 13px; color: var(--fv-leise); }
.zahn-tabelle thead th.zahn-optimum { background: var(--fv-gruen); color: var(--white); border-radius: 14px 14px 0 0; }
.zahn-tabelle tbody th { font-weight: 700; }
.zahn-tabelle td.zahn-optimum { background: var(--fv-gruen-flaeche); font-weight: 700; }
.zahn-tabelle th span, .zahn-tabelle td span { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--fv-leise); }
.zahn-tabelle td.zahn-optimum span { color: var(--fv-gruen); font-weight: 500; }
.zahn-tabelle .zahn-nicht { margin: 0; font-size: 15px; color: #8a8d87; }
.zahn-fussnote { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fv-leise); }
@media (max-width: 420px) {
  .zahn-tabelle { font-size: 14px; }
  .zahn-tabelle th, .zahn-tabelle td { padding: 12px 6px; }
  .zahn-tabelle thead th { font-size: 16px; }
}

/* Ehrlich gesagt */
.zahn-ehrlich { border: 2px solid #f0c9bb; border-radius: 22px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.zahn-ehrlich p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fv-text-weich); }
.zahn-ehrlich .zahn-ehrlich-titel { font-size: 17px; font-weight: 700; color: var(--ink); }
.zahn-ehrlich a { color: var(--fv-gruen); font-weight: 700; }

/* Ansprechpartner */
.zahn-person { padding-top: 34px; padding-bottom: 34px; display: flex; flex-direction: column; gap: 18px; }
.fv-zitat .zahn-person-inner { padding: 0; }
.fv-zitat .zahn-person-inner img { width: 84px; height: 84px; flex: 0 0 84px; }
.zahn-person-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.zahn-person-text p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fv-text-weich); }
.zahn-person-text .zahn-person-name { font-size: 17px; font-weight: 700; color: var(--ink); }
/* familie-v2.css färbt jeden Link-Knopf weiß (.fv a.fv-knopf) – der Rahmen-Knopf braucht grüne Schrift. */
.fv a.fv-knopf--rand { color: var(--fv-gruen); }

/* FAQ-Ergänzungen */
.fv-faq details p a { color: var(--fv-gruen); }
.zahn-links { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.zahn-links li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 15px; }
.zahn-links a { color: var(--fv-gruen); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.zahn-links span { flex: none; font-size: 13px; color: var(--fv-leise); }
#makler { scroll-margin-top: 12px; }