/* ==========================================================================
   HausChat.de — Preise-Seite
   Wird nur von preise.html nach styles.css geladen. Eine Farbe für die ganze
   Seite: Petrol. Oben hell mit den drei Tarifen, in der Mitte die
   Vergleichstabelle auf Weiß und die Fragen auf der Seitenfarbe, unten der
   Ausblick auf Petrol, der ohne Kante in den Footer läuft.
   ========================================================================== */

/* ── Einblenden beim Scrollen: 200ms, 8px, einmal ─────────────────────── */
/* Gleiche Regel wie auf der Funktionen-Seite. Sie steht hier noch einmal,
   weil jede Unterseite nur 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}

/* ── Kopf — heller Grund, zwei weiche Petrolflecken ───────────────────── */
/* Nur ein Farbton, anders als der Funktionen-Hero mit seinen drei Flecken:
   die Preisseite führt von oben bis unten dieselbe Farbe. */
.phero{--t-500:var(--teal-500);--t-700:var(--teal-700);position:relative;overflow:hidden;
  /* 88px Abstand plus die Leiste, die über dem Kopf liegt. */
  padding:calc(88px + var(--nav-height)) 0 var(--section-py-web);
  background:
    linear-gradient(to top,var(--page) 0,rgba(250,249,247,0) 460px),
    radial-gradient(56% 44% at 14% 2%,rgba(201,227,174,.95),rgba(201,227,174,0) 70%),
    radial-gradient(52% 42% at 90% 12%,rgba(201,227,174,.75),rgba(201,227,174,0) 70%),
    var(--page)}
.phero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.phero .eyebrow{color:var(--teal-700)}
.phero h1{font-size:clamp(38px,5.2vw,68px);line-height:1.05;letter-spacing:var(--ls-display);
  color:var(--ink);max-width:14em;margin:14px 0 18px}
.phero__lead{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--teal-700);max-width:34em}
.phero__note{margin-top:24px;font-size:14px;line-height:1.55;color:var(--muted)}

/* ── Rechner: wie viele Personen ──────────────────────────────────────── */
/* Der Preis besteht aus zwei Teilen. Niemand soll sie addieren müssen —
   der Regler tut es und schreibt eine Zahl auf jede Karte. Die Stellung
   allein trägt die Aussage nicht, deshalb steht die Zahl groß darüber. */
.rechner{width:100%;max-width:520px;margin:34px auto 0;padding:24px 26px 20px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-card);text-align:center}
.rechner__frage{display:block;font-size:15px;line-height:1.45;color:var(--text-muted)}
.rechner__zahl{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:6px}
.rechner__zahl b{font-family:var(--font-body);font-weight:var(--fw-light);font-size:44px;line-height:1.05;
  color:var(--teal-700);font-variant-numeric:tabular-nums}
.rechner__zahl span{font-size:16px;color:var(--text-muted)}

/* Der Regler selbst. Bahn als Haarlinie, Griff im Petrol der Seite.
   Der Griff ist 28px groß, die Bedienfläche darum 48px hoch. */
.rechner__regler{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--tap-min);
  margin-top:14px;background:transparent;cursor:pointer}
.rechner__regler:focus-visible{outline:2px solid var(--teal-500);outline-offset:4px;border-radius:var(--radius-small)}
.rechner__regler::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:var(--hairline)}
.rechner__regler::-moz-range-track{height:4px;border-radius:2px;background:var(--hairline)}
.rechner__regler::-moz-range-progress{height:4px;border-radius:2px;background:var(--teal-500)}
.rechner__regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;
  margin-top:-12px;border:2px solid #FFFFFF;border-radius:50%;background:var(--teal-500);
  transition:background var(--dur-fast) var(--ease-out)}
.rechner__regler::-moz-range-thumb{width:28px;height:28px;border:2px solid #FFFFFF;border-radius:50%;
  background:var(--teal-500);transition:background var(--dur-fast) var(--ease-out)}
.rechner__regler:hover::-webkit-slider-thumb{background:var(--teal-700)}
.rechner__regler:hover::-moz-range-thumb{background:var(--teal-700)}

.rechner__skala{display:flex;justify-content:space-between;margin-top:-4px;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rechner__tipp{margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline);
  font-size:15px;line-height:1.5;color:var(--body)}
.rechner__tipp b{font-weight:var(--fw-bold);color:var(--teal-700)}

/* Der Weg für alles über 100 Personen. Steht unter den Karten, nicht als
   vierte Karte — es ist kein Tarif, sondern ein Gespräch. */
.phero__anfrage{margin-top:28px;font-size:15px;line-height:1.55;color:var(--text-muted)}
.phero__anfrage a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px}
.phero__anfrage a:hover{color:var(--teal-500)}

/* Der Grund zum Wechseln. Steht über der Leistungsliste, weil die Frage
   "warum der nächste Tarif" vor "was ist drin" kommt. */
.tarif .tarif__grund{margin:20px 0 -4px;padding-top:20px;border-top:1px solid var(--hairline);
  font-size:14px;line-height:1.55;color:var(--teal-700)}
.tarif__grund b{display:block;margin-bottom:4px;font-weight:var(--fw-bold);color:var(--ink)}
.tarif__liste{border-top:0 !important;padding-top:14px !important}
.tarif--top .tarif__grund{border-top-color:rgba(255,255,255,.22);color:var(--teal-200)}
.tarif--top .tarif__grund b{color:#FFFFFF}

/* Ein Tarif, den ein größerer bei dieser Personenzahl unterbietet. Er bleibt
   wählbar und lesbar — keine Deckkraft, die im Sonnenlicht verschwindet.
   Nur der Preis tritt zurück, damit die teurere Zahl nicht mehr schreit. */
/* ── Die drei Tarifkarten ─────────────────────────────────────────────── */
/* Weiß auf der Seitenfarbe, Haarlinie statt Schatten. Die mittlere Karte
   ist dasselbe Petrol in dunkel — ein Farbton in zwei Temperaturen. */
.tarife{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  width:100%;max-width:1080px;margin:44px auto 0;align-items:stretch;text-align:left}
.tarif{position:relative;display:flex;flex-direction:column;padding:32px;
  background:var(--card);border:1px solid var(--hairline);border-radius:var(--radius-card)}
.tarif .eyebrow{color:var(--teal-500)}
.tarif__fuer{margin-top:6px;font-size:15px;line-height:1.45;color:var(--text-muted)}
.tarif__preis{display:flex;align-items:baseline;gap:8px;margin-top:24px}
/* Almarai Light nur oberhalb von 24px — hier 48px, also erlaubt. */
.tarif__preis b{font-family:var(--font-body);font-weight:var(--fw-light);font-size:48px;
  line-height:1.05;letter-spacing:var(--ls-display);color:var(--ink)}
.tarif__preis span{font-size:15px;color:var(--text-muted)}
/* Steht dort ein Wort statt einer Zahl, wird es kleiner gesetzt: 48px
   Light trägt eine Zahl, aber keinen Satz. */
.tarif__preis--wort b{font-size:30px;font-weight:var(--fw-regular);letter-spacing:var(--ls-heading)}
/* Feste Mindesthöhe, damit die drei Knöpfe auf einer Linie stehen, auch
   wenn die Zeile bei „jährlich" länger wird. */
.tarif__basis{min-height:44px;margin-top:8px;font-size:14px;line-height:1.5;color:var(--text-muted)}
.tarif .btn{margin:16px 0 24px}
.tarif__liste{padding-top:22px;border-top:1px solid var(--hairline)}
.tarif__liste li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;
  font-size:15px;line-height:1.5;color:var(--body)}
.tarif__liste li .icon{width:18px;height:18px;flex:0 0 auto;margin-top:3px;color:var(--teal-500)}

/* Mittlere Karte: dieselbe Farbe, dunkle Stufe. Kein Verlauf auf Karten. */
.tarif--top{background:var(--teal-700);border-color:var(--teal-700)}
.tarif--top .eyebrow{color:var(--teal-200)}
.tarif--top .tarif__fuer,.tarif--top .tarif__basis,.tarif--top .tarif__preis span{color:var(--teal-200)}
.tarif--top .tarif__preis b{color:#FFFFFF}
.tarif--top .tarif__liste{border-top-color:rgba(255,255,255,.22)}
.tarif--top .tarif__liste li{color:var(--teal-100)}
.tarif--top .tarif__liste li .icon{color:var(--teal-300)}
.tarif--ueberholt .tarif__preis b{color:var(--body)}
.tarif--ueberholt .tarif__basis{color:var(--body)}
/* Auf der Petrol-Karte muss die Dämpfung heller werden statt dunkler,
   sonst verschwindet die Zahl im Untergrund. */
.tarif--top.tarif--ueberholt .tarif__preis b{color:var(--teal-200)}
.tarif--top.tarif--ueberholt .tarif__basis{color:var(--teal-100)}
.tarif__mark{position:absolute;top:-13px;left:32px;white-space:nowrap;
  display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--radius-pill);
  background:var(--teal-100);color:var(--teal-900);font-weight:var(--fw-bold);font-size:12px;
  letter-spacing:var(--ls-label);text-transform:uppercase}

/* Der Hinweis auf der Mittel-Karte: es gibt einen Weg zu den Automationen,
   der nicht über die Betriebsgröße führt. */
/* Zwei Klassen, weil site.css mit `.on-light p` sonst gewinnt und den Text
   in der Sektionsfarbe setzt — auf der Petrol-Karte wäre er dann unsichtbar. */
.tarif--top .tarif__zusatz{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.5;color:var(--teal-200)}

/* ── Zubuchbares ──────────────────────────────────────────────────────── */
/* Drei schmale Karten unter den Tarifen. Bewusst kleiner als die Tarife —
   das hier ist Beiwerk, kein vierter Tarif. */
.addons{width:100%;max-width:1080px;margin:48px auto 0;text-align:left}
.addons__titel{font-family:var(--font-body);font-weight:var(--fw-bold);font-size:13px;
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);text-align:center}
.addons__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:18px}
.addon{padding:22px 24px;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--radius-card)}
.addon__kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.addon__kopf .eyebrow{color:var(--teal-500)}
.addon__preis{font-family:var(--font-body);font-weight:var(--fw-regular);font-size:22px;
  line-height:1;color:var(--ink);white-space:nowrap}
.addon .addon__text{margin-top:10px;font-size:14px;line-height:1.55;color:var(--teal-700)}
/* Ein Add-on ohne festen Preis trägt keine große Zahl — sonst liest sich
   "auf Anfrage" wie ein Betrag. */
.addon__preis:not(.addon__preis--zahl){font-size:14px;color:var(--body)}
.addons__fuss{margin-top:16px;font-size:13px;line-height:1.5;color:var(--body);text-align:center}

/* ── Große Übersicht — weißer Abschnitt, eine Tabelle ─────────────────── */
.vgl{background:var(--card)}
.vgl .sec-head h2{font-size:40px}
/* Erst unterhalb von 900px 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{border:1px solid var(--hairline);border-radius:var(--radius-card);background:var(--card)}
.vgl table{width:100%;border-collapse:collapse;font-size:15px}
.vgl th,.vgl td{padding:15px 20px;text-align:left;vertical-align:top}
.vgl thead th{position:sticky;top:var(--nav-height);z-index:2;background:var(--card);
  box-shadow:inset 0 -1px 0 var(--hairline)}
.vgl thead .vgl__plan{text-align:center}
.vgl thead .vgl__plan strong{display:block;font-family:var(--font-heading);font-weight:400;
  font-size:20px;line-height:1.25;color:var(--ink)}
.vgl thead .vgl__plan span{display:block;margin-top:2px;font-size:14px;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: das kleine Großbuchstaben-Label des Systems, sonst nichts. */
.vgl__gruppe th{background:var(--teal-50);color:var(--teal-700);
  font-weight:var(--fw-bold);font-size:12px;line-height:var(--lh-label);
  letter-spacing:var(--ls-label);text-transform:uppercase}
.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+tr>*{border-top:1px solid var(--hairline)}
/* 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{color:var(--teal-500)}
.vgl .nein{color:var(--muted);font-weight:var(--fw-bold)}
.vgl__fuss{margin-top:20px;font-size:14px;line-height:1.55;color:var(--muted);text-align:center}

/* ── Häufige Fragen — Aufklapper wie im Abschnitt „Für wen" ───────────── */
.faq{background:var(--page)}
.faq__list{max-width:900px;margin:0 auto;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--radius-card);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}

/* ── Ausblick — Petrol, weiche Einblende von oben, wie „Alles auf einen
   Blick" auf der Funktionen-Seite. Endet flach auf Petrol 900, damit die
   Naht zum Footer verschwindet. ───────────────────────────────────────── */
.road{--t-100:var(--teal-100);--t-200:var(--teal-200);--t-300:var(--teal-300);
  position:relative;margin-top:-120px;padding:420px 0 96px;
  background:
    radial-gradient(150% 480px at 14% -150px,rgba(250,249,247,.55),rgba(250,249,247,0) 70%),
    radial-gradient(130% 400px at 78% -120px,rgba(250,249,247,.45),rgba(250,249,247,0) 68%),
    linear-gradient(180deg,
      rgba(250,249,247,1) 0px,
      rgba(250,249,247,.980) 40px,
      rgba(250,249,247,.926) 80px,
      rgba(250,249,247,.844) 120px,
      rgba(250,249,247,.741) 160px,
      rgba(250,249,247,.624) 200px,
      rgba(250,249,247,.500) 240px,
      rgba(250,249,247,.376) 280px,
      rgba(250,249,247,.259) 320px,
      rgba(250,249,247,.156) 360px,
      rgba(250,249,247,.074) 400px,
      rgba(250,249,247,.020) 440px,
      rgba(250,249,247,0) 480px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
.road .sec-head h2{font-size:40px}
/* Petrol 200 statt 300: auf Petrol 700 erreicht 300 nur 4,35 Kontrast. */
.road .sec-head .eyebrow{color:var(--teal-200)}
.road__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.rk{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:20px;
  background:var(--glass-fill);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.rk__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rk__kopf .icon{width:24px;height:24px;color:var(--teal-200)}
.rk h3{font-size:24px;line-height:1.25;color:#FFFFFF}
.rk p{font-size:15px;line-height:1.55;color:var(--teal-100)}
/* Die Beispiele stehen unten bündig, damit die drei Karten gleich wirken. */
.rk__tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:6px}
.rk__tags li{padding:7px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  font-size:13px;line-height:1.2;color:#FFFFFF}
/* Stand der Sache. Kein Statusfarben-Set: Ampelfarben heißen im System
   „Frist nah" und „überfällig" und dürfen hier nichts anderes bedeuten. */
.rchip{display:inline-flex;align-items:center;height:24px;padding:0 10px;
  border-radius:var(--radius-pill);border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);color:#FFFFFF;
  font-weight:var(--fw-bold);font-size:12px;line-height:1;
  letter-spacing:var(--ls-label);text-transform:uppercase}
.rchip--jetzt{background:var(--teal-100);border-color:transparent;color:var(--teal-900)}
.road__note{max-width:var(--measure-narrow);margin:36px auto 0;text-align:center;
  font-size:15px;line-height:1.6}
.road .road__note{color:var(--teal-200)}

/* ── Breiten ──────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .tarif{padding:26px}
  .tarif__mark{left:26px}
}
@media (max-width:960px){
  .phero{padding-top:calc(64px + var(--nav-height))}
  .tarife{grid-template-columns:1fr;max-width:520px;margin-top:36px}
  .addons__liste{grid-template-columns:1fr}
  .addons{max-width:520px}
  .tarif__mark{top:-13px}
  .vgl .sec-head h2,.road .sec-head h2{font-size:32px}
  /* Ab hier passt die Tabelle nicht mehr: waagerecht scrollen, Kopfzeile
     klebt dann nicht mehr — dafür bleibt jede Spalte breit genug zum Lesen. */
  .vgl__wrap{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .vgl table{min-width:760px}
  .vgl thead th{position:static}
  .road__grid{grid-template-columns:1fr}
  .rk{padding:24px}
}
@media (max-width:640px){
  .phero h1{font-size:34px}
  .phero__lead{font-size:17px}
  .rechner{padding:20px 18px 16px}
  .vgl .sec-head h2,.road .sec-head h2{font-size:30px}
  .vgl th,.vgl td{padding:13px 16px}
  .frage__head{font-size:18px;padding:20px 22px}
  .frage__body p{padding:0 22px 22px}
  .road{margin-top:-70px;padding:260px 0 72px;background:
    radial-gradient(150% 300px at 20% -100px,rgba(250,249,247,.5),rgba(250,249,247,0) 70%),
    linear-gradient(180deg,rgba(250,249,247,1) 0px,rgba(250,249,247,.9) 50px,rgba(250,249,247,.62) 110px,rgba(250,249,247,.3) 180px,rgba(250,249,247,.08) 240px,rgba(250,249,247,0) 290px),
    linear-gradient(160deg,var(--teal-700),var(--teal-900) 72%,var(--teal-900) 100%)}
}

/* Feste Spaltenbreite, damit die drei Tarife gleich breit stehen und die
   erste Spalte den Rest bekommt. */
.vgl__plan{width:190px}

/* ==========================================================================
   HausChat — Ergänzungen für Preise (Einheiten-Rechner, Add-ons, Pilot)
   und die Vergleichsseite, die dieselbe Datei lädt.
   ========================================================================== */

/* „Geplant": kleines Label für alles, was noch nicht fertig ist. Bewusst
   keine Ampelfarbe — die heißt im System „Frist nah" oder „überfällig". */
.geplant{display:inline-flex;align-items:center;height:20px;padding:0 7px;margin-left:2px;
  border-radius:var(--radius-pill);border:1px solid var(--teal-200);background:var(--teal-50);
  color:var(--teal-700);font-family:var(--font-body);font-weight:var(--fw-bold);font-size:10px;
  line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;white-space:nowrap;vertical-align:1px}
.tarif--top .geplant{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.14);color:#FFFFFF}

/* Der Tarif, der zu den Einheiten passt, bekommt einen Ring. */
.tarif--passt{outline:2px solid var(--teal-500);outline-offset:4px}

/* Vier Add-ons stehen zu zweit nebeneinander, unter 960px untereinander. */
.addons__liste--vier{grid-template-columns:repeat(2,minmax(0,1fr))}
.addon{display:flex;flex-direction:column;transition:border-color var(--dur-fast) var(--ease-out)}
.addon.is-an{border-color:var(--teal-500);box-shadow:inset 0 0 0 1px var(--teal-500)}
.addon__wahl{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap-min);margin-top:auto;padding-top:8px;
  font-size:14px;font-weight:var(--fw-bold);color:var(--ink);cursor:pointer}
.addon__wahl input{width:20px;height:20px;margin:0;accent-color:var(--teal-500);cursor:pointer}
.addon__briefe{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--body)}
.addon__briefe input{width:96px;height:40px;padding:0 10px;border:1px solid var(--hairline);border-radius:var(--radius-control);
  background:var(--card);font:inherit;color:var(--ink)}
.addon__briefe input:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
/* Ohne JavaScript rechnet nichts mit — dann auch nichts zum Ankreuzen. */
html:not(.js) .addon__wahl,html:not(.js) .addon__briefe{display:none}
.addons .summe{max-width:760px;margin:20px auto 0;padding:16px 20px;background:var(--card);
  border:1px solid var(--hairline);border-radius:var(--radius-card);text-align:center;
  font-size:15px;line-height:1.55;color:var(--body)}
.addons .summe b{font-weight:var(--fw-bold);color:var(--teal-700)}

/* Pilot: dunkles Petrol wie die mittlere Tarifkarte, drei Schritte daneben. */
.pilot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 48px;align-items:center;
  width:100%;max-width:1080px;margin:48px auto 0;padding:40px;text-align:left;
  background:var(--teal-700);border-radius:var(--radius-card)}
.pilot .eyebrow{color:var(--teal-200)}
.pilot h2{margin-top:10px;font-size:32px;line-height:1.16;letter-spacing:var(--ls-heading);color:#FFFFFF}
.pilot .pilot__text{margin-top:12px;font-size:15px;line-height:1.55;color:var(--teal-100)}
.pilot .btn{margin-top:22px}
.pilot__schritte{display:grid;gap:10px}
.pilot__schritte li{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:16px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  font-size:14px;line-height:1.5;color:var(--teal-100)}
.pilot__schritte .icon{width:22px;height:22px;flex:0 0 auto;margin-top:1px;color:var(--teal-200)}
.pilot__schritte b{display:block;font-size:16px;font-weight:var(--fw-bold);color:#FFFFFF}

/* ── Vergleichsseite ──────────────────────────────────────────────────── */
/* Sprungmarken unter dem Kopf. */
.sprung{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.sprung a{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 18px;
  border-radius:var(--radius-pill);background:var(--card);border:1px solid var(--hairline);
  font-size:15px;color:var(--ink);transition:var(--transition-control)}
.sprung a:hover{border-color:var(--teal-300);color:var(--teal-700)}
/* Abschnitte im Wechsel weiß und Seitenfarbe. */
.vgl--seite{background:var(--page)}
/* Zwei Karten nebeneinander: was die anderen gut können, was HausChat anders macht. */
.gegen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1080px;margin:0 auto 32px}
.gegen h3{margin-top:8px;font-size:24px;line-height:1.25;letter-spacing:var(--ls-heading)}
.gegen .tarif h3{color:var(--ink)}
.gegen .tarif--top h3{color:#FFFFFF}
.vgl__wrap--zwei{max-width:1080px;margin:0 auto}
.vgl__wrap--zwei .vgl__plan{width:300px}
.vgl__wrap--zwei tbody td{font-size:15px;line-height:1.5}

@media (max-width:960px){
  .addons__liste--vier{grid-template-columns:1fr}
  .pilot{grid-template-columns:1fr;max-width:520px;padding:28px 24px}
  .pilot h2{font-size:28px}
  .gegen{grid-template-columns:1fr;max-width:620px}
  .vgl__wrap--zwei .vgl__plan{width:220px}
}