/* ==========================================================================
   HausChat.de — Preise-Seite
   Wird nur von preise.html geladen, nach css/tarife.css, css/ticket.css und
   css/pilot.css. Aufbau:
   1. Kopf hell, danach dunkles Petrol wie der Preis-Abschnitt der Startseite:
      Regler, eine Glas-Karte mit Häuserzeile und daneben die Rechnung
      und drei Zusagen (Bausteine aus css/tarife.css, Rechner:
      js/tarife.js). Unten blendet das Petrol wieder in die Seitenfarbe.
   2. Grundpreis: zwei Karten nebeneinander — links der feste Preis mit
      den Highlights, rechts die Einheiten zum Eintippen.
   3. Add-ons hell darunter: ein Raster aus weißen Feldern mit feinen
      Linien — erst alles, was im Grundpreis steckt, mit 0 € als
      Preisschild, dann die drei zum Dazubuchen mit Schalter, darunter
      die Summe.
   4. Pilot mit dem Pilot-Ticket wie auf der Startseite (css/pilot.css).
   5. Vergleich: alles bei HausChat oder vier Anbieter, zwei Karten
      nebeneinander, drei Zahlen, fünf Gründe.
   6. Was im Preis steckt: weiße Karte, die Kopfzeile bleibt beim Scrollen.
   7. Fragen in zwei Spalten, links Überschrift und Gespräch.
   8. Überblick auf Petrol, läuft ohne Kante in den Footer.
   ========================================================================== */

/* ── Einblenden beim Scrollen: 200ms, 8px, einmal ─────────────────────── */
/* Gleiche Regel wie auf der Funktionen-Seite. Sie steht hier noch einmal,
   weil jede Unterseite ihre eigene Datei nach styles.css lädt. */
.rv{opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.rv.is-in{opacity:1;transform:none}
.rv-kids>*{opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.rv-kids.is-in>*{opacity:1;transform:none}
.rv-kids.is-in>:nth-child(2){transition-delay:90ms}
.rv-kids.is-in>:nth-child(3){transition-delay:180ms}
.rv-kids.is-in>:nth-child(4){transition-delay:270ms}
/* Ohne JavaScript bleibt alles sichtbar. */
html:not(.js) .rv,html:not(.js) .rv-kids>*{opacity:1;transform:none}

/* ── 1. Kopf und Tarife — ein Abschnitt ───────────────────────────────── */
/* Der Grund ist Petrol. Hinter der Überschrift liegt eine helle Fläche mit
   zwei Grünflecken (::before). Darunter blendet sie in einem langen, weichen
   Verlauf ins Petrol (::after), mit zwei hellen Wolken, damit der Rand nicht
   wie eine gerade Kante wirkt. Beides hängt an der Überschrift, so beginnt
   der Übergang bei jeder Breite direkt unter dem Text. isolation hält beide
   Flächen hinter dem Inhalt, overflow-x schneidet die 100vw breiten Flächen
   seitlich ab. Unten blendet das Petrol genauso weich in die Seitenfarbe.
   Das Petrol endet 4px über der Unterkante, damit an krummen Pixeln keine
   feine Linie stehen bleibt. */
.tf.tf--seite{--kopf-oben:calc(80px + var(--nav-height));--verlauf:440px;--rest:60px;
  isolation:isolate;overflow-x:clip;margin:0;padding:var(--kopf-oben) 0 420px;
  background:
    radial-gradient(150% 440px at 14% calc(100% + 150px),color-mix(in srgb,var(--page) 55%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 70%),
    radial-gradient(130% 380px at 78% calc(100% + 120px),color-mix(in srgb,var(--page) 45%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 68%),
    linear-gradient(0deg,color-mix(in srgb,var(--page) 100%,transparent) 0%,color-mix(in srgb,var(--page) 98.3%,transparent) 8.33%,color-mix(in srgb,var(--page) 93.3%,transparent) 16.67%,color-mix(in srgb,var(--page) 85.4%,transparent) 25%,color-mix(in srgb,var(--page) 75%,transparent) 33.33%,color-mix(in srgb,var(--page) 62.9%,transparent) 41.67%,color-mix(in srgb,var(--page) 50%,transparent) 50%,color-mix(in srgb,var(--page) 37.1%,transparent) 58.33%,color-mix(in srgb,var(--page) 25%,transparent) 66.67%,color-mix(in srgb,var(--page) 14.6%,transparent) 75%,color-mix(in srgb,var(--page) 6.7%,transparent) 83.33%,color-mix(in srgb,var(--page) 1.7%,transparent) 91.67%,color-mix(in srgb,var(--page) 0%,transparent) 100%) 0 100%/100% 440px no-repeat,
    radial-gradient(55% 520px at 50% 1000px,color-mix(in srgb,var(--teal-300) 16%,transparent),color-mix(in srgb,var(--teal-300) 0%,transparent) 70%),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 60%,var(--teal-900) 100%) 0 0/100% calc(100% - 4px) no-repeat}
.tf.tf--seite::before{top:900px;bottom:420px}
.tf-kopf{position:relative;display:flex;flex-direction:column;align-items:center;max-width:960px;margin:0 auto;text-align:center}
.tf-kopf::before,.tf-kopf::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;pointer-events:none}
.tf-kopf::before{top:calc(-1 * var(--kopf-oben));bottom:var(--rest);
  background:
    linear-gradient(to top,var(--page) 0,color-mix(in srgb,var(--page) 0%,transparent) 300px),
    radial-gradient(56% 56% at 14% 0,color-mix(in srgb,var(--teal-200) 95%,transparent),color-mix(in srgb,var(--teal-200) 0%,transparent) 70%),
    radial-gradient(52% 52% at 90% 8%,color-mix(in srgb,var(--teal-200) 75%,transparent),color-mix(in srgb,var(--teal-200) 0%,transparent) 70%),
    var(--page)}
.tf-kopf::after{top:calc(100% - var(--rest));height:var(--verlauf);
  background:
    radial-gradient(150% 400px at 14% -60px,color-mix(in srgb,var(--page) 55%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 70%),
    radial-gradient(130% 340px at 78% -40px,color-mix(in srgb,var(--page) 45%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 68%),
    linear-gradient(180deg,color-mix(in srgb,var(--page) 100%,transparent) 0%,color-mix(in srgb,var(--page) 98.3%,transparent) 8.33%,color-mix(in srgb,var(--page) 93.3%,transparent) 16.67%,color-mix(in srgb,var(--page) 85.4%,transparent) 25%,color-mix(in srgb,var(--page) 75%,transparent) 33.33%,color-mix(in srgb,var(--page) 62.9%,transparent) 41.67%,color-mix(in srgb,var(--page) 50%,transparent) 50%,color-mix(in srgb,var(--page) 37.1%,transparent) 58.33%,color-mix(in srgb,var(--page) 25%,transparent) 66.67%,color-mix(in srgb,var(--page) 14.6%,transparent) 75%,color-mix(in srgb,var(--page) 6.7%,transparent) 83.33%,color-mix(in srgb,var(--page) 1.7%,transparent) 91.67%,color-mix(in srgb,var(--page) 0%,transparent) 100%)}
.tf .tf-kopf .eyebrow{font-size:13px;letter-spacing:.16em;color:var(--teal-700)}
/* Hinweis auf die Pilot-Aktion über der Überschrift, springt zum Ticket. */
.tf-kopf__pilot{display:inline-flex;align-items:center;gap:10px;max-width:100%;height:40px;padding:0 18px 0 14px;border-radius:var(--radius-pill);background:#FFFFFF;border:1px solid var(--hairline);
  color:var(--body);font-size:14px;line-height:1.3;text-decoration:none;white-space:nowrap;transition:border-color .2s var(--ease-out),color .2s var(--ease-out)}
.tf-kopf__pilot:hover{border-color:var(--teal-300);color:var(--ink)}
.tf-kopf__pilot strong{flex:0 0 auto;white-space:nowrap;color:var(--teal-700);font-weight:var(--fw-bold)}
.tf-kopf__pilot-punkt{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--green-300)}
.tf-kopf__pilot-punkt::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green-300);animation:pilot-welle 2.2s var(--ease-out) infinite}
.tf-kopf__pilot .icon{flex:0 0 auto;width:16px;height:16px;color:var(--teal-700)}
@media (max-width:600px){
  .tf-kopf__pilot{height:auto;padding:10px 16px 10px 14px;white-space:normal;text-align:left}
}
@media (prefers-reduced-motion:reduce){.tf-kopf__pilot-punkt::after{animation:none;opacity:0}}
.tf .tf-kopf h1{max-width:14em;margin:16px 0 20px;font-size:clamp(32px,4.2vw,56px);font-weight:600;line-height:1.1;letter-spacing:var(--ls-display);color:var(--ink)}
.tf .tf-kopf__lead{max-width:38em;margin:0;font-size:17px;line-height:var(--lh-lead);color:var(--body)}
/* Der Regler beginnt, wo der Verlauf fast ganz im Petrol angekommen ist. */
.tf--seite .tf-rechner{margin-top:calc(var(--verlauf) - var(--rest) - 70px);margin-bottom:72px}

/* Die Karte: unter dem Preis die Rechnung in einem Satz. */
.tf .tf-plan__rechnung{min-height:21px;margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--teal-200)}
.tf-plan.is-zuklein .tf-preis b{color:rgba(255,255,255,.5);transition:color .3s ease}
/* Der Grund zum Wechseln: fett die Aussage, darunter ein Satz dazu. */
.tf--seite .tf-plan__grund{font-weight:400;font-size:15px;color:var(--teal-200)}
.tf--seite .tf-plan__grund b{display:block;margin-bottom:4px;font-size:15.5px;font-weight:var(--fw-bold);color:#FFFFFF}
.tf .tf-mehr{margin:40px 0 0;font-size:15px;line-height:1.55;color:var(--teal-200);text-align:center}
.tf .tf-mehr a{color:#FFFFFF;text-decoration:underline;text-underline-offset:3px}
.tf .tf-mehr a:hover{color:var(--teal-100)}

/* Vorübergehend: der Preis-Block unter der Überschrift ist raus, der Kopf
   steht allein. Kein Petrol, kein Verlauf — die helle Fläche läuft einfach
   in den Add-on-Abschnitt. Kommt der Preis-Block zurück, fällt tf--nurkopf
   im HTML weg und alles darüber gilt wieder. */
/* Dreifach gestuft, damit es auch die Handy-Regeln weiter unten sticht. */
/* Die hellen Flächen hängen sonst an der Überschrift und ragen über den
   Abschnitt hinaus. .tf ist position:relative und läge damit über dem Anfang
   der Add-ons — die Zeile „Add-ons“ wäre verdeckt. Deshalb hier beide weg und
   die zwei Grünflecken direkt auf den Abschnitt. */
.tf.tf--seite.tf--nurkopf{padding-bottom:80px;
  background:
    radial-gradient(56% 70% at 14% 0,color-mix(in srgb,var(--teal-200) 95%,transparent),color-mix(in srgb,var(--teal-200) 0%,transparent) 70%),
    radial-gradient(52% 64% at 90% 8%,color-mix(in srgb,var(--teal-200) 75%,transparent),color-mix(in srgb,var(--teal-200) 0%,transparent) 70%),
    var(--page)}
.tf.tf--seite.tf--nurkopf::before{content:none}
.tf--seite.tf--nurkopf .tf-kopf::before,.tf--seite.tf--nurkopf .tf-kopf::after{content:none}

/* Die zwei Grundpreis-Karten stehen ohne Kopf direkt unter der Überschrift.
   Der Baustein selbst liegt in css/tarife.css, weil die Startseite ihn auch
   braucht. */
.gp{padding-top:0}

/* ── Add-ons — heller Abschnitt unter dem Tarif ───────────────────────── */
/* Ein Raster aus weißen Feldern, dazwischen nur eine feine Linie (gap auf
   der Linienfarbe). Je Feld oben das Symbol, darunter links Name und Satz,
   rechts das Preisschild. Was im Grundpreis steckt, steht mit 0 € in Wiese;
   was extra kostet, in Tinte und hat unten den Schalter „Mitrechnen“.
   Die zweite Rasterreihe wächst (grid-template-rows), damit die Schalter
   nebeneinanderliegender Felder auf einer Höhe stehen.
   Die Zeichen sind gemalte Bilder (assets/img/zeichen/, erzeugt mit
   Bildgenerator/zeichen.py) und stehen frei, ohne Kachel dahinter. */
.ad{padding-top:24px;background:var(--page)}
.ad .sec-head{margin-bottom:40px}
.ad .sec-head h2{font-size:40px}
.ad .sec-head .eyebrow{color:var(--teal-500)}

/* Fragezeichen am Titel, wie der Hinweis im Tarif der App. Steht überall
   auf dieser Seite statt eines Untertitels: der Satz steckt im Zettel.
   .mit-hilfe macht die Überschrift zur Zeile, damit das Zeichen danebensteht. */
.mit-hilfe{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.sec-head:not(.sec-head--center) .mit-hilfe,.faq__kopf .mit-hilfe{justify-content:flex-start}
.hilfe{position:relative;flex:0 0 auto;display:inline-flex}
.hilfe__knopf{position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;
  border:1px solid var(--hairline);border-radius:50%;background:var(--card);color:var(--muted);
  font:inherit;font-family:var(--font-body);font-size:13px;font-weight:var(--fw-bold);line-height:1;cursor:help;
  transition:var(--transition-control)}
.hilfe__knopf::before{content:"";position:absolute;inset:-12px}
.hilfe:hover .hilfe__knopf,.hilfe:focus-within .hilfe__knopf,.hilfe.is-offen .hilfe__knopf{
  background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.hilfe__knopf:focus-visible{outline:2px solid var(--teal-500);outline-offset:3px}
.hilfe__text{position:absolute;z-index:5;left:50%;top:calc(100% + 10px);width:288px;padding:12px 14px;
  border-radius:12px;background:var(--ink);color:#FFFFFF;font-family:var(--font-body);
  font-size:13.5px;font-weight:400;line-height:1.5;text-align:left;translate:-50% 4px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,translate .18s ease,visibility 0s linear .18s}
.hilfe__text::after{content:"";position:absolute;left:50%;bottom:100%;translate:-50% 0;border:7px solid transparent;border-bottom-color:var(--ink)}
/* js/tarife.js schiebt den Zettel so weit, dass er ganz ins Fenster passt (--hilfe-schub) –
   auch geschlossen, sonst ließe sich die Seite seitlich schieben. Die Spitze bleibt am Fragezeichen. */
.hilfe__text{transform:translateX(var(--hilfe-schub,0px))}
.hilfe__text::after{transform:translateX(calc(-1 * var(--hilfe-schub,0px)))}
.hilfe:hover .hilfe__text,.hilfe:focus-within .hilfe__text,.hilfe.is-offen .hilfe__text{
  opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s}
/* Auf Petrol: heller Knopf, weißer Zettel. */
.on-dark .hilfe__knopf{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:var(--teal-100)}
.on-dark .hilfe:hover .hilfe__knopf,.on-dark .hilfe:focus-within .hilfe__knopf,.on-dark .hilfe.is-offen .hilfe__knopf{
  background:#FFFFFF;border-color:#FFFFFF;color:var(--teal-900)}
.on-dark .hilfe__knopf:focus-visible{outline-color:#FFFFFF}
.on-dark .hilfe__text{background:#FFFFFF;color:var(--ink)}
.on-dark .hilfe__text::after{border-bottom-color:#FFFFFF}

.ad__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;max-width:1120px;margin:0 auto;
  background:var(--hairline);border:1px solid var(--hairline);border-radius:24px;overflow:hidden}
.ad-karte{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;
  gap:18px 24px;padding:28px 30px 26px;background:var(--card);transition:background-color .25s var(--ease-out)}
.ad-karte.is-an{background:var(--teal-50)}
/* Die gemalten Zeichen stehen frei, ohne Kachel – sonst wird es zu eng. */
.ad-karte__ic{grid-column:1/-1;display:block;width:48px;height:48px}
.ad .ad-karte__name{font-size:20px;line-height:1.3;color:var(--ink)}
.ad .ad-karte__satz{margin:8px 0 0;font-size:15px;line-height:1.55;color:var(--body)}
.ad .ad-karte__preis{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 8px;
  margin:0;max-width:176px;text-align:right}
.ad-karte__preis b{font-family:var(--font-heading);font-weight:400;font-size:38px;line-height:1;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}
.ad-karte__preis span{font-size:14px;color:var(--muted);white-space:nowrap}
.ad-karte__preis small{flex:0 0 100%;margin-top:6px;font-size:13px;line-height:1.4;color:var(--muted)}
/* Was im Grundpreis steckt: 0 € in Wiese, damit es als „kostet nichts“ liest. */
.ad-karte--drin .ad-karte__preis b{color:var(--teal-700)}

/* Menge und Schalter stehen unter dem Text, über die ganze Breite. */
.ad-menge{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:14px;color:var(--body)}
.ad-menge input{width:104px;height:40px;padding:0 10px;border:1px solid var(--hairline);border-radius:var(--radius-control);
  background:var(--card);color:var(--ink);font:inherit;text-align:right}
.ad-menge input:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.ad-schalter{position:relative;grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:var(--tap-min);
  padding-top:14px;border-top:1px solid var(--hairline);
  font-size:14px;font-weight:var(--fw-bold);color:var(--ink);cursor:pointer}
.ad-schalter input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.ad-schalter__bahn{position:relative;flex:0 0 auto;width:42px;height:24px;border-radius:99px;background:var(--hairline);
  transition:background-color .25s ease}
.ad-schalter__bahn::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 25%,transparent);transition:translate .25s var(--ease-out)}
.ad-schalter input:checked+.ad-schalter__bahn{background:var(--teal-500)}
.ad-schalter input:checked+.ad-schalter__bahn::after{translate:18px 0}
.ad-schalter input:focus-visible+.ad-schalter__bahn{outline:2px solid var(--teal-500);outline-offset:3px}
html:not(.js) .ad-schalter,html:not(.js) .ad-menge{display:none}

/* Letztes Feld: kein Preis, sondern der Weg ins Gespräch. */
.ad-karte--frage{background:var(--page)}
.ad-karte__link{grid-column:1/-1;display:inline-flex;align-items:center;gap:8px;padding-top:14px;
  border-top:1px solid var(--hairline);font-size:15px;font-weight:var(--fw-bold);color:var(--teal-700);text-decoration:none}
.ad-karte__link .icon{width:18px;height:18px;transition:translate var(--dur-fast) var(--ease-out)}
.ad-karte__link:hover{color:var(--teal-900)}
.ad-karte__link:hover .icon{translate:3px 0}

/* ── Summe unter den Add-ons ──────────────────────────────────────────── */
.ad-summe{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px 36px;
  max-width:1120px;margin:20px auto 0;padding:24px 26px 24px 30px;border-radius:24px;
  background:var(--card);border:1px solid var(--hairline)}
html:not(.js) .ad-summe{display:none}
.ad-summe__label{display:block;font-size:12px;font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--muted)}
.ad .ad-summe__teile{margin:6px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink)}
.ad .ad-summe__betrag{display:flex;align-items:baseline;gap:10px;margin:0}
.ad-summe__betrag b{font-family:var(--font-heading);font-weight:400;font-size:46px;line-height:1;letter-spacing:-.03em;
  color:var(--ink);white-space:nowrap}
.ad-summe__betrag span{font-size:14px;line-height:1.3;color:var(--muted)}
.ad .ad__fuss{max-width:1120px;margin:16px auto 0;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}

/* ── 3. Pilot — das Ticket wie auf der Startseite ─────────────────────── */
.pilot--preise{padding-top:0}

/* ── 4. Vergleich — alles bei HausChat oder vier Anbieter ─────────────── */
.vs{--t-500:var(--teal-500);--t-700:var(--teal-700);background:var(--page)}
.vs .sec-head h2{font-size:40px}
.vs__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto;align-items:stretch}
.vs-karte{display:flex;flex-direction:column;padding:30px 32px 28px;border-radius:24px;background:var(--card);border:1px solid var(--hairline)}
.vs-karte h3{margin-bottom:18px;font-size:24px;line-height:1.25;color:var(--ink)}
.vs-zeilen{margin:0;padding:0}
.vs-zeilen>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--hairline)}
.vs-zeilen>div:first-child{border-top:0;padding-top:0}
.vs-zeilen dt{margin:0;font-size:15.5px;line-height:1.45;color:var(--body)}
.vs-zeilen dd{margin:0;font-family:var(--font-heading);font-size:22px;line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.vs-zeilen .vs-zeilen__summe{margin-top:4px;padding-top:16px;border-top:1px solid var(--ink)}
.vs-zeilen .vs-zeilen__summe dt{font-weight:var(--fw-bold);color:var(--ink)}
.vs-zeilen .vs-zeilen__summe dd{font-size:34px;letter-spacing:-.03em}
.vs .vs-karte__fuss{margin:18px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
/* Unsere Karte auf Petrol, wie der Preis-Abschnitt. */
.vs-karte--wir{background:linear-gradient(160deg,var(--teal-700),var(--teal-900) 80%);border-color:var(--teal-900)}
.vs-karte--wir h3,.vs-karte--wir .vs-zeilen dd,.vs-karte--wir .vs-zeilen .vs-zeilen__summe dt{color:#FFFFFF}
.vs-karte--wir .vs-zeilen dt{color:var(--teal-100)}
.vs-karte--wir .vs-zeilen>div{border-color:rgba(255,255,255,.14)}
.vs-karte--wir .vs-zeilen .vs-zeilen__summe{border-color:color-mix(in srgb,var(--teal-200) 60%,transparent)}
.vs .vs-karte--wir .vs-karte__fuss{color:var(--teal-200)}
/* Drei Zahlen darunter. */
.vs-zahlen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1000px;margin:24px auto 0;padding:0;list-style:none}
.vs-zahlen li{display:flex;flex-direction:column;gap:4px;padding:22px 26px;border-radius:20px;background:var(--card);border:1px solid var(--hairline)}
.vs-zahlen b{font-family:var(--font-heading);font-weight:400;font-size:38px;line-height:1.05;letter-spacing:-.03em;color:var(--teal-700)}
.vs-zahlen span{font-size:14.5px;color:var(--muted)}
/* Fünf Gründe. */
.vs-warum{max-width:800px;margin:56px auto 0}
.vs-warum h3{margin-bottom:18px;font-size:28px;line-height:1.2;letter-spacing:var(--ls-heading);color:var(--ink)}
.vs-warum ul{margin:0;padding:0;list-style:none}
.vs-warum li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--hairline);font-size:16px;line-height:1.6;color:var(--body)}
.vs-warum li:first-child{border-top:0}
.vs-warum li::before{content:"";position:absolute;left:4px;top:22px;width:10px;height:10px;border-radius:50%;background:var(--teal-300)}
.vs-warum li b{color:var(--ink)}
.vs .vs-warum__fuss{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ── 5. Was im Preis steckt — weiße Karte auf der Seitenfarbe ─────────── */
.vgl{--t-500:var(--teal-500);--t-700:var(--teal-700);background:var(--page)}
.vgl .sec-head h2{font-size:40px}
/* Erst unterhalb von 960px wird gescrollt. Darüber steht die Tabelle
   vollständig, und nur dann bleibt die Kopfzeile beim Scrollen oben kleben:
   in einem Element mit overflow-x klebt sie nicht mehr am Fenster. */
.vgl__wrap{max-width:1120px;margin:0 auto;border:1px solid var(--hairline);border-radius:24px;background:var(--card)}
.vgl table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.vgl th,.vgl td{padding:12px 20px;text-align:left;vertical-align:middle}
.vgl thead th{position:sticky;top:var(--nav-height);z-index:2;padding-top:20px;padding-bottom:16px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--hairline)}
.vgl thead th:first-child{border-top-left-radius:24px}
.vgl thead th:last-child{border-top-right-radius:24px}
.vgl__plan{width:260px}
.vgl thead .vgl__plan{text-align:center}
.vgl thead .vgl__plan strong{display:block;font-family:var(--font-heading);font-weight:400;font-size:22px;line-height:1.25;color:var(--ink)}
.vgl thead .vgl__plan span{display:block;margin-top:2px;font-size:13.5px;color:var(--text-muted)}
.vgl thead th:first-child{font-weight:var(--fw-bold);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);vertical-align:bottom}
/* Gruppenzeile: Symbol und kleines Label, mit Luft nach oben. */
.vgl__gruppe th{padding-top:26px;padding-bottom:10px;color:var(--teal-700);font-weight:var(--fw-bold);font-size:12.5px;
  letter-spacing:var(--ls-label);text-transform:uppercase}
.vgl__gruppe-name{display:inline-block}
.vgl__gruppe .icon{width:18px;height:18px;margin-right:10px;vertical-align:-4px;color:var(--teal-500)}
.vgl tbody th[scope="row"]{font-weight:var(--fw-regular);color:var(--body)}
.vgl tbody td{text-align:center;color:var(--ink)}
.vgl tbody tr:not(.vgl__gruppe)+tr:not(.vgl__gruppe)>*{border-top:1px solid var(--hairline)}
.vgl tbody tr:not(.vgl__gruppe):hover>td{background:color-mix(in srgb,var(--teal-900) 2.5%,transparent)}
/* Zeilenkopf deckend, weil er auf dem Handy beim Wischen über den Spalten steht. */
.vgl tbody tr:not(.vgl__gruppe):hover>th{background:#F9FAF9}
.vgl tbody tr:last-child>:first-child{border-bottom-left-radius:24px}
.vgl tbody tr:last-child>:last-child{border-bottom-right-radius:24px}
/* Die Spalte des empfohlenen Tarifs steht auf der hellsten Stufe derselben
   Farbe. Hintergrund auf <col> ist genau dafür da. */
.vgl__hi{background:var(--teal-50)}
.vgl .ja{width:26px;height:26px;padding:6px;border-radius:50%;background:var(--teal-100);color:var(--teal-700);vertical-align:middle}
.vgl .nein{color:var(--muted);font-weight:var(--fw-bold)}
.vgl__addon{display:inline-block;padding:4px 11px;border:1px solid var(--hairline);border-radius:var(--radius-pill);background:var(--card);
  font-size:13px;line-height:1.35;color:var(--ink);white-space:nowrap}
/* Eine Spalte je Paket: breiterer Rahmen, schmale gleich breite Spalten.
   Unter 1000 px lässt sich die Tabelle seitlich schieben. */
.vgl--pakete .vgl__wrap{max-width:1280px}
.vgl--pakete table{table-layout:fixed}
.vgl--pakete col:first-child{width:22%}
.vgl--pakete col.vgl__plan{width:13%}
.vgl--pakete th.vgl__plan{width:auto}
.vgl--pakete th,.vgl--pakete td{padding-left:14px;padding-right:14px}
.vgl--pakete tbody th[scope="row"]{padding-left:22px}
.vgl--pakete thead th:first-child{padding-left:22px}
.vgl--pakete thead .vgl__plan strong{font-size:19px}
.vgl--pakete thead .vgl__plan span{font-size:13px}
.vgl--pakete tbody td{font-size:14px;font-variant-numeric:tabular-nums}
.vgl--pakete .vgl__addon{padding:3px 8px;font-size:12.5px}
/* Kleiner Zusatz unter dem Zeilenkopf, z. B. „2 Monate geschenkt“. */
.vgl .vgl__zusatz{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
@media (max-width:1000px){
  .vgl.vgl--pakete .vgl__wrap{overflow-x:auto}
  .vgl.vgl--pakete table{min-width:860px}
  .vgl.vgl--pakete thead th{position:static;background:var(--card)}
  .vgl.vgl--pakete .vgl__plan{width:auto}
}
.vgl .vgl__fuss{max-width:60em;margin:24px auto 0;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}

/* ── 6. Häufige Fragen — zwei Spalten ─────────────────────────────────── */
/* Letzter heller Abschnitt vor dem Footer. */
.faq{--t-500:var(--teal-500);--t-700:var(--teal-700);background:var(--page)}
.faq__raster{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px 72px;align-items:start}
.faq__kopf{position:sticky;top:calc(var(--nav-height) + 40px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.faq .faq__kopf .eyebrow{color:var(--teal-500)}
.faq__kopf h2{font-size:40px;line-height:1.12;letter-spacing:var(--ls-heading)}
.faq .faq__text{max-width:24em;font-size:17px;line-height:1.6;color:var(--body)}
.faq__kopf .btn{margin-top:10px}
.faq__list{background:var(--card);border:1px solid var(--hairline);border-radius:24px;overflow:hidden}
.frage+.frage{border-top:1px solid var(--hairline)}
.frage__head{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;
  min-height:var(--tap-min);padding:22px 26px;background:transparent;border:0;cursor:pointer;
  text-align:left;font-family:var(--font-heading);font-weight:400;font-size:20px;line-height:1.32;
  color:var(--ink);transition:var(--transition-control)}
.frage__head:hover{background:var(--surface-hover)}
.frage__head .icon{flex:0 0 auto;color:var(--teal-500);transition:transform var(--dur-fast) var(--ease-out)}
.frage.is-open .frage__head{color:var(--teal-500)}
.frage.is-open .frage__head .icon{transform:rotate(90deg)}
/* 0fr auf 1fr statt hidden — nur so lässt sich die Höhe weich animieren. */
.frage__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)}
.frage.is-open .frage__body{grid-template-rows:1fr}
/* Beschnitten wird der Innenrahmen, nicht der Absatz: läge der Innenabstand am
   Absatz, bliebe seine Höhe im geschlossenen Zustand als Lücke stehen.
   min-height:0, sonst schrumpft das Rasterelement nicht unter seine Inhaltshöhe. */
.frage__inhalt{overflow:hidden;min-height:0}
.frage__body p{padding:0 26px 24px;font-size:16px;line-height:1.65;color:var(--body);max-width:var(--measure-prose);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.frage.is-open .frage__body p{opacity:1;visibility:visible;transition-delay:0s}

/* ── Breiten ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .ad-summe{grid-template-columns:minmax(0,1fr) auto}
  .ad-summe__knopf{grid-column:1/-1;justify-self:start}
}
@media (max-width:960px){
  .tf.tf--seite{--kopf-oben:calc(56px + var(--nav-height))}
  .ad .sec-head h2{font-size:32px}
  .ad__raster{grid-template-columns:1fr;max-width:560px;border-radius:20px}
  .ad-karte{padding:24px 22px 22px}
  .ad-summe{grid-template-columns:1fr;max-width:560px;padding:22px 22px 24px}
  .ad-summe__knopf{justify-self:stretch}
  .ad .ad__fuss{max-width:560px}
  .vgl .sec-head h2,.vs .sec-head h2,.faq__kopf h2{font-size:32px}
  .vs__raster{grid-template-columns:1fr;max-width:560px}
  .vs-zahlen{max-width:560px}
  /* Zwei Spalten passen auch am Handy: nichts scrollt, die Kopfzeile klebt
     nicht mehr, die rechte Spalte wird schmaler. */
  .vgl table{min-width:0}
  .vgl__plan{width:132px}
  .vgl thead .vgl__plan strong{font-size:18px}
  .vgl thead .vgl__plan span{font-size:12.5px}
  .vgl thead th{position:static;background:var(--card)}
  /* Die erste Spalte bleibt beim Wischen stehen, der Gruppenname auch. */
  .vgl tbody th[scope="row"]{overflow-wrap:anywhere}
  .vgl thead th:first-child{top:auto}
  .vgl__gruppe-name{display:flex;align-items:flex-start;gap:10px}
  .vgl__gruppe .icon{flex:0 0 auto;margin:0;vertical-align:0}
  .faq__raster{grid-template-columns:1fr;gap:28px}
  .faq__kopf{position:static}
}
@media (max-width:640px){
  .tf.tf--seite{--verlauf:300px;--rest:40px;padding-bottom:300px;
    background:
      radial-gradient(150% 300px at 20% calc(100% + 100px),color-mix(in srgb,var(--page) 50%,transparent),color-mix(in srgb,var(--page) 0%,transparent) 70%),
      linear-gradient(0deg,color-mix(in srgb,var(--page) 100%,transparent) 0%,color-mix(in srgb,var(--page) 98.3%,transparent) 8.33%,color-mix(in srgb,var(--page) 93.3%,transparent) 16.67%,color-mix(in srgb,var(--page) 85.4%,transparent) 25%,color-mix(in srgb,var(--page) 75%,transparent) 33.33%,color-mix(in srgb,var(--page) 62.9%,transparent) 41.67%,color-mix(in srgb,var(--page) 50%,transparent) 50%,color-mix(in srgb,var(--page) 37.1%,transparent) 58.33%,color-mix(in srgb,var(--page) 25%,transparent) 66.67%,color-mix(in srgb,var(--page) 14.6%,transparent) 75%,color-mix(in srgb,var(--page) 6.7%,transparent) 83.33%,color-mix(in srgb,var(--page) 1.7%,transparent) 91.67%,color-mix(in srgb,var(--page) 0%,transparent) 100%) 0 100%/100% 320px no-repeat,
      linear-gradient(160deg,var(--teal-700),var(--teal-900) 60%,var(--teal-900) 100%) 0 0/100% calc(100% - 4px) no-repeat}
  .tf.tf--seite::before{top:700px;bottom:300px}
  /* Hinweis auf die Pilot-Aktion über der Überschrift, springt zum Ticket. */
.tf-kopf__pilot{display:inline-flex;align-items:center;gap:10px;max-width:100%;height:40px;padding:0 18px 0 14px;border-radius:var(--radius-pill);background:#FFFFFF;border:1px solid var(--hairline);
  color:var(--body);font-size:14px;line-height:1.3;text-decoration:none;white-space:nowrap;transition:border-color .2s var(--ease-out),color .2s var(--ease-out)}
.tf-kopf__pilot:hover{border-color:var(--teal-300);color:var(--ink)}
.tf-kopf__pilot strong{flex:0 0 auto;white-space:nowrap;color:var(--teal-700);font-weight:var(--fw-bold)}
.tf-kopf__pilot-punkt{position:relative;flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--green-300)}
.tf-kopf__pilot-punkt::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--green-300);animation:pilot-welle 2.2s var(--ease-out) infinite}
.tf-kopf__pilot .icon{flex:0 0 auto;width:16px;height:16px;color:var(--teal-700)}
@media (max-width:600px){
  .tf-kopf__pilot{height:auto;padding:10px 16px 10px 14px;white-space:normal;text-align:left}
}
@media (prefers-reduced-motion:reduce){.tf-kopf__pilot-punkt::after{animation:none;opacity:0}}
.tf .tf-kopf h1{font-size:30px}
  .tf .tf-kopf__lead{font-size:16px}
  .tf--seite .tf-rechner{margin-top:calc(var(--verlauf) - var(--rest) - 50px);margin-bottom:48px}
  .ad .sec-head h2{font-size:30px}
  /* Am Handy steht der Preis unter dem Namen, nicht daneben. */
  .ad-karte{grid-template-columns:minmax(0,1fr);gap:14px}
  .ad .ad-karte__preis{max-width:none;justify-content:flex-start;text-align:left}
  .ad-karte__preis b{font-size:32px}
  .ad-karte__preis small{flex:0 0 auto;margin-top:0}
  /* Am Handy hängt der Zettel an der rechten Kante, sonst ragt er raus. */
  .hilfe__text{left:auto;right:-8px;width:min(250px,calc(100vw - 48px));translate:0 4px}
  .hilfe__text::after{left:auto;right:10px;translate:0 0}
  .hilfe:hover .hilfe__text,.hilfe:focus-within .hilfe__text,.hilfe.is-offen .hilfe__text{translate:0 0}
  .ad-summe__betrag b{font-size:40px}
  .vgl .sec-head h2,.vs .sec-head h2,.faq__kopf h2{font-size:30px}
  .vs-karte{padding:24px 22px 22px}
  .vs-zeilen .vs-zeilen__summe dd{font-size:30px}
  .vs-zahlen{grid-template-columns:1fr;gap:12px}
  .vs-zahlen li{flex-direction:row;align-items:baseline;justify-content:space-between;padding:16px 20px}
  .vs-zahlen b{font-size:30px}
  .vs-warum{margin-top:40px}
  .vs-warum h3{font-size:24px}
  .vgl th,.vgl td{padding:11px 14px}
  .frage__head{font-size:18px;padding:20px 22px}
  .frage__body p{padding:0 22px 22px}
}
@media (prefers-reduced-motion:reduce){
  .ad-karte,.hilfe__knopf,.hilfe__text,.ad-schalter__bahn,.ad-schalter__bahn::after,.ad-karte__link .icon,.tf-plan.is-zuklein .tf-preis b{transition:none}
}