/* relaunch-tarif.css — Tarif-Detailseite (Staging-Integration des Mockups tarif.html).
   Nur seitenspezifische .tp- und .crumb-Regeln; Tokens + Chrome liefert relaunch.css.
   Quelle: mockups/shop-relaunch/relaunch/tarif.html <style> (Commit-Stand bf6613c+). */
  /* Tarifseite — Vodafone-Produkt-Story-Layout, gegossen in relaunch.css-Tokens.
     Luftiger Hero · grosse Spec-Tiles · Vorteils-Karten · sticky Konfigurator · Akkordeons. */
  .tp{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .crumb{padding:18px 0 0}
  .crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;font-size:13px;color:var(--ink-3)}
  .crumb a{color:var(--ink-3)} .crumb a:hover{color:var(--cta)} .crumb .sep{color:#c2c8d2}
  .crumb [aria-current]{color:var(--ink-2)}

  /* HERO */
  .tp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,4vw,56px);align-items:start;padding:40px 0 8px}
  /* JS setzt .no-media, wenn das Produktbild 403/404 liefert (store-Symlink fehlt):
     statt leerer Bildspalte laeuft die Detail-Spalte lesbar begrenzt weiter */
  .tp-hero.no-media{grid-template-columns:minmax(0,720px)}
  .tp-net{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:680;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-2)}
  .tp-net img{width:26px;height:26px;border-radius:50%}
  /* 29.07.: --orange ist laut Token-Definition "dekorativer Akzent" — weisser Text
     darauf ergab 2,9:1. --cta ist der dafuer vorgesehene Ton (4,79:1, AA). */
  .tp-rec{display:inline-block;background:var(--cta);color:#fff;font-size:11px;font-weight:680;
    letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:980px;margin-left:8px;vertical-align:middle}
  .tp-hero h1{font-size:clamp(30px,4vw,46px);line-height:1.05;letter-spacing:-.03em;color:var(--ink);margin:14px 0 6px}
  .tp-lead{font-size:16.5px;line-height:1.5;color:var(--ink-2);margin:0 0 22px} /* noch von tarif.blade.php (JS-Route) genutzt */
  /* Lead als Subline unter der Bewertung (21.07., tarif-detail) — lange
     gepflegte desc_long wird auf 3 Zeilen gekappt, Kaufzone bleibt oben. */
  .tp-sub{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 16px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .tp-sub p{margin:0}

  /* Produktbild links — echtes Live-Shop-Visual, klebt beim Scrollen (Daniel: ans alte Layout halten) */
  .tp-media{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);
    padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
  .tp-media img{width:100%;height:auto;max-width:440px;display:block}
  /* Bildfehler-Fallback (JS enthidden): Netzbetreiber-Logo + Netz-Label statt leerer Karte.
     [hidden]-Guard PFLICHT: display:flex wuerde sonst das hidden-Attribut aushebeln
     (Author-Regel schlaegt UA [hidden]{display:none}) — sobald Flos Bild wieder 200
     liefert, klebte der Fallback sichtbar NEBEN dem Bild (.tp-media ist flex). */
  .tp-media-fb[hidden]{display:none}
  .tp-media-fb{display:flex;flex-direction:column;align-items:center;gap:14px;padding:44px 0}
  .tp-media-fb img{width:96px;height:96px;max-width:none;border-radius:50%}
  .tp-media-fb span{font-size:14px;font-weight:560;color:var(--ink-2);letter-spacing:.02em}

  /* Detail-Spalte rechts — Tarifdetails aufgelistet */
  .tp-detail{min-width:0}
  /* Netz-Marker-Pill unter dem h1: die geteilte .net-marker-Regel bringt aus
     dem Karten-Kontext nur margin-top mit — hier symmetrisch 10px ober- und
     unterhalb (h1 traegt schon 6px mb). */
  .tp-detail > .net-marker{margin:4px 0 10px}
  .tp-buy-rate{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);margin:0 0 4px}
  .tp-buy-rate .stars{color:#f5a623;letter-spacing:1px} .tp-buy-rate b{color:var(--ink)}
  .tp-speclist{list-style:none;margin:6px 0 26px;padding:0;display:grid;gap:11px}
  .tp-speclist li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;color:var(--ink)}
  .tp-speclist svg{width:18px;height:18px;color:var(--cta);flex:none;margin-top:1px}
  /* "Das ist drin" — Highlight-Leistungen VOR der Kauf-Box (21.07.): kompakte
     4er-Liste + nativer Ausklapper fuer den Rest. Karten-Rahmen neutral wie
     .tp-calc-dd, damit es nicht als CTA-Flaeche gelesen wird; haelt Preis/CTA
     above the fold, ohne Leistungen unter dem CTA zu vergraben. */
  .tp-specs-top{border:1px solid var(--line);border-radius:14px;background:var(--paper-2);padding:13px 15px;margin:2px 0 18px}
  .tp-specs-lbl{font-size:12px;font-weight:680;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin:0 0 9px}
  .tp-specs-top .tp-speclist{margin:0;gap:9px}
  .tp-specs-top .tp-speclist li{font-size:14.5px}
  /* Detail-Absprung als Fusszeile IN der Box (21.07.) — kein frei
     schwebender Link mehr zwischen Box und Kaufzone. */
  /* Startguthaben-Pille (28.07.): dieselbe Komponente wie auf den Karten, die
     bringt aber nur margin-top mit. In der Box folgt darunter der gestrichelte
     Detail-Fuss, gemessen 2px Abstand — die Pille klebte daran. Bei der letzten
     Textzeile faellt das nicht auf, weil line-height 1.45 unter der Grundlinie
     Luft laesst; die Pille endet hart mit Hintergrund.
     Der Grund wird zusaetzlich deckend gesetzt: die Karten-Pille traegt
     rgba(30,122,58,.1) und rechnet damit gegen Weiss (gemessen 4,70:1). Auf der
     Box-Flaeche --paper-2 komponiert derselbe Schleier zu rgb(224,233,228) und
     der Text faellt auf 4,33:1 — unter die 4,5 aus WCAG 1.4.3 (13px/640 ist
     kein Grosstext). #e9f2eb ist exakt dieser Tint auf Weiss, die Pille sieht
     also aus wie auf der Karte und behaelt deren Kontrast. */
  .tp-specs-top .feat-startgut{margin:12px 0;background:#e9f2eb}
  .tp-specs-foot{margin-top:2px;border-top:1px dashed var(--line)}
  .tp-specs-foot .tp-detail-link{margin:0}
  .tp-buy-lbl{font-size:12px;font-weight:640;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);margin-bottom:10px}
  /* Kauf-Box liegt seit 19.07. direkt nach Titel/Bewertung (above the fold);
     danach Trust-Zeile, Lead, Specs, Detail-Link — Luftabstaende fuer
     die neuen Nachbarschaften: */
  .tp-detail .tp-buy-lbl{margin-top:14px}
  /* "Tarif aktiv bis"-Countdown direkt an der Kaufzone (zwischen Bewertung und
     Laufzeit-Wahl, 19.07.) — Dringlichkeit am Preis; --cta-d fuer AA. */
  .tp-valid{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:640;color:var(--cta-d);margin:6px 0 0}
  .tp-valid svg{width:16px;height:16px;flex:none}
  /* external_url-Variante: externer Bestell-Link statt Warenkorb-Formular. */
  .tp-ext{display:flex;justify-content:center;width:100%;margin-bottom:10px}
  .tp-opt{position:relative;display:block;width:100%;text-align:left;background:var(--paper);border:1.5px solid var(--line);
    border-radius:var(--r-md);padding:13px 15px;cursor:pointer;transition:border-color .15s,box-shadow .15s;margin-bottom:10px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .tp-buy-lbl + .tp-opt{margin-top:18px}
  /* Laufzeit-Karten nebeneinander (Daniel 07.07.): 2-Spalten-Grid, mobil gestapelt.
     Der grid-gap ersetzt den Karten-margin-bottom; der Wrapper haelt oben Platz zum
     Label fuer die "Besonders beliebt"-Pille (top:-15px). */
  .tp-buy-lbl + .tp-opts{margin-top:18px}
  .tp-opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
  .tp-opts > .tp-opt{margin-bottom:0}
  @media(max-width:640px){.tp-opts{grid-template-columns:1fr}}
  /* Ausgewaehlte Karte: oranger Rand + leicht oranger Hintergrund (nicht nur Rand),
     damit die Auswahl klar sichtbar ist (Daniel 07.07.). */
  .tp-opt[aria-pressed="true"]{border-color:var(--cta);background:rgba(255,104,0,.06);box-shadow:0 0 0 3px rgba(194,78,0,.10)}
.tp-opt:hover{border-color:var(--ink-3)}
.tp-opt:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
  .tp-opt-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .tp-opt-dur{font-size:13px;font-weight:640;color:var(--ink)}
  .tp-opt-save{font-size:11px;font-weight:680;color:var(--green-strong);background:rgba(22,163,74,.10);
    padding:2px 8px;border-radius:980px;white-space:nowrap}
  .tp-opt-note{font-size:11.5px;color:var(--ink-3);margin-top:1px}
  .tp-opt-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:8px}
  .tp-opt-pop{position:absolute;top:-15px;right:14px;font-size:11px;font-weight:680;color:#fff;background:var(--cta);
    padding:3px 10px;border-radius:6px 6px 0 0;white-space:nowrap;letter-spacing:.02em;line-height:1.35}
  .tp-opt-sale{font-size:11px;font-weight:680;color:#fff;background:#c0392b;
    padding:2px 8px;border-radius:980px;white-space:nowrap;margin-left:auto;align-self:center}
  .tp-opt-price b{font-size:27px;font-weight:730;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
  .tp-opt-price s{font-size:13px;color:var(--ink-3)}
  .tp-opt-price small{font-size:12px;color:var(--ink-2)}
  .tp-speclist li.tp-spec-hl{color:var(--green-strong);font-weight:560}
  .tp-speclist li.tp-spec-hl svg{color:var(--green-strong)}
  .tp-opt-total{display:block;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
  .tp-opt-total[hidden]{display:none}
  .tp-opt-total b{color:var(--ink);font-weight:680}
  /* Fliesstext-Fallback des Rechenwegs (nur wenn der calcSteps-Parser nicht
     greift): kleines Label + Satz, beide Laufzeiten untereinander (§5 UWG). */
  .tp-calc-lbl{font-size:12.5px;font-weight:680;color:var(--ink);margin:14px 0 2px}
  .tp-calc-lbl:first-child{margin-top:0}
  .tp-calc-line{margin:0;color:var(--ink-2);font-size:13.5px}
  /* Rechenweg-Disclosure "Wie rechnet sich der Preis?" — angedockt an die
     Laufzeit-Karten (data-dur waehlt die sichtbare Rechnung), praesent durch
     Orange-Tint + Rechner-Icon; offen wird der Grund weiss (Lese-Modus). */
  .tp-calc-dd{margin:-6px 0 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2)} /* bewusst NEUTRAL (grau statt Orange-Tint): sonst liest sich das Disclosure wie eine dritte, aktive Laufzeit-Karte (Daniel/User 12.07., Screenshot IMG_9618) */
  .tp-calc-dd[open]{background:#fff}
  .tp-calc-dd summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;
    font-size:14px;font-weight:650;color:var(--ink);min-height:44px;box-sizing:border-box}
  .tp-calc-dd summary::-webkit-details-marker{display:none}
  .tp-calc-dd summary:focus-visible{outline:2px solid var(--cta);outline-offset:-3px;border-radius:12px}
  .tp-calc-dd summary .calc-ico{flex:none;width:19px;height:19px;color:var(--cta-d)}
  .tp-calc-dd summary .chev{margin-left:auto;transition:transform .18s ease;flex:none;color:var(--ink-3)}
  .tp-calc-dd[open] summary .chev{transform:rotate(180deg)}
  .tp-calc-dd .dd-body{padding:0 14px 13px}
  .calc-dur-badge{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--cta-d);
    background:rgba(255,104,0,.13);padding:3px 9px;border-radius:980px;white-space:nowrap}
  .tp-calc-dd .calc-for{display:none}
  .tp-calc-dd[data-dur="1"] .calc-for[data-dur="1"]{display:block}
  .tp-calc-dd[data-dur="0"] .calc-for[data-dur="0"]{display:block}
  /* .calc-tbl/.calc-note leben jetzt in relaunch.css — geteilt mit dem
     Rechenweg-Panel der Startseiten-Karten (.card-calc). */
  .tp-cta{margin-top:14px}
  .tp-cta .btn{width:100%}
  .tp-qty{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
  .tp-qty-lbl{font-size:13px;font-weight:640;color:var(--ink)}
  .tp-qty-ctrl{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
  .tp-qty-btn{width:46px;height:46px;border:0;background:var(--paper);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;touch-action:manipulation}
  .tp-qty-btn:hover{background:#e9edf2}
  .tp-qty-btn:disabled{opacity:.4;cursor:not-allowed}
  .tp-qty-in{width:54px;height:46px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:16px;font-weight:640;color:var(--ink);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
  .tp-qty-in::-webkit-outer-spin-button,.tp-qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  /* MwSt.-Zeile zentriert unterm vollbreiten CTA (19.07.) — die ganze Zone
     unter dem Button laeuft auf einer ruhigen Mittelachse. */
  .tp-vat{font-size:11.5px;color:var(--ink-3);margin-top:10px;text-align:center}
  /* Trust-Zusagen als leise, zentrierte Punkt-Zeile (19.07.) statt 2x2-Haken-
     Raster: Haken traegt nur noch die Spec-Liste. Spans atomar (nowrap),
     Trennpunkt via ::after — bei Umbruch bleibt er am Zeilenende haengen. */
  .tp-buy-trust{display:flex;flex-wrap:wrap;justify-content:center;column-gap:8px;row-gap:3px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
  .tp-buy-trust span{white-space:nowrap;font-size:12px;font-weight:540;color:var(--ink-3);line-height:1.6}
  .tp-buy-trust span:not(:last-child)::after{content:"·";margin-left:8px;color:var(--ink-3)}
  /* Unter 340px steht jedes Label allein in der Zeile — dann haengen die
     Trennpunkte nutzlos am Zeilenende: weglassen, sauberer Stapel. */
  @media (max-width:340px){.tp-buy-trust span:not(:last-child)::after{content:none}}
  /* Defensiv: das alte statische tarif.blade.php traegt noch Haken-SVGs. */
  .tp-buy-trust svg{width:14px;height:14px;color:var(--green-strong);flex:none}

  /* Vollbreiten-Band fuer Rhythmuswechsel (hell-grau) */
  .tp-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:28px}

  /* Vorteile: Icon links / Text rechts (anderes Muster als die Spec-Chips) */
  .tp-adv{padding:48px 0}
  .tp-adv h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
  .tp-adv .sub{font-size:16px;color:var(--ink-2);margin:0 0 28px}
  .tp-adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
  /* Feste Titelspalte: Beschreibungstexte aller Kacheln auf einer Fluchtlinie */
  .tp-ac{display:grid;grid-template-columns:50px 172px minmax(0,1fr);gap:0 16px;align-items:start}
  .tp-ac .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;
    background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .tp-ac .ic svg{width:24px;height:24px;color:var(--cta)}
  .tp-ac h3{font-size:16.5px;letter-spacing:-.01em;color:var(--ink);margin:1px 0 6px}
  .tp-ac p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}

  /* Service-Versprechen (Live-Paritaet): 3 weisse Karten im grauen Band */
  .tp-svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
  .tp-sc{display:flex;gap:14px;align-items:flex-start;background:var(--paper);
    border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow-sm)}
  .tp-sc .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
    background:var(--cta-soft,rgba(255,104,0,.08))}
  .tp-sc .ic svg{width:22px;height:22px;color:var(--cta)}
  .tp-sc h3{font-size:16.5px;letter-spacing:-.01em;color:var(--ink);margin:1px 0 6px}
  .tp-sc p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}

  /* Anbieter-Block "So arbeiten wir": traegt die Service-Karten am Ende des
     Produktteils. Ohne Vodafone-Extras stossen zwei graue Baender aneinander --
     dann genuegen eine Trennlinie und ein Polster, sonst liest es sich als Fehler. */
  .tp-prov{padding:46px 0}
  .tp-prov>h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 6px}
  .tp-prov>.sub{font-size:16px;color:var(--ink-2);margin:0 0 28px}
  .tp-prov .tp-svc-grid{margin-top:0}
  .tp-band+.tp-band{border-top:0;margin-top:0}
  .tp-band+.tp-band .tp-prov{padding-top:34px}

  /* Proof-Band: 3 Schritte (verkauft, bricht das Karten-Raster) */
  .tp-steps{padding:46px 0}
  .tp-steps h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 26px;text-align:center}
  .tp-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;position:relative}
  .tp-step{text-align:center;position:relative}
  .tp-step .n{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;
    font-size:18px;font-weight:720;color:#fff;background:var(--cta)}
  .tp-step h3{font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
  .tp-step p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 auto;max-width:30ch}

  /* Akkordeon-Details */
  .tp-acc{padding:40px 0 6px}
  .tp-acc h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 20px}
  .tp-ad{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:12px;box-shadow:var(--shadow-sm);overflow:hidden}
  .tp-ad>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
    padding:18px 22px;font-size:17px;font-weight:620;color:var(--ink)}
  .tp-ad>summary::-webkit-details-marker{display:none}
  .tp-ad>summary:focus-visible{outline:2px solid var(--cta);outline-offset:-3px;border-radius:var(--r-lg)}
  .tp-ad>summary .chev{margin-left:auto;transition:transform .2s;color:var(--ink-3)}
  .tp-ad[open]>summary .chev{transform:rotate(180deg)}
  .tp-ad .body{padding:2px 22px 22px}

  /* FAQ der PDP im Startseiten-Stil (relaunch.css .faq-*): Trennlinien statt
     Karten. Nur die Optik wandert -- die Mechanik bleibt natives <details>,
     also kein JS, Tastaturbedienung und Browser-Suche bleiben erhalten. */
  .tp-faq .tp-ad{background:none;border:0;border-bottom:1px solid var(--line);
    border-radius:0;box-shadow:none;margin-bottom:0;overflow:visible}
  /* overflow-wrap: die Fragen entstehen aus Tarifnamen, ein kuenftiges Wort ohne
     Bindestrich wuerde die Spalte auf 280px sprengen (gemessen: +347px). */
  .tp-faq .tp-ad>summary{align-items:flex-start;padding:24px 4px 24px 0;
    font-size:17.5px;font-weight:560;letter-spacing:-.015em;color:var(--ink);
    overflow-wrap:anywhere;touch-action:manipulation}
  .tp-faq .tp-ad>summary:hover{color:var(--cta)}
  .tp-faq .tp-ad>summary:focus-visible{outline:2px solid var(--cta);outline-offset:-2px;border-radius:0}
  .tp-faq .tp-ad>summary .chev{flex:0 0 auto;margin-top:2px;color:var(--ink-3)}
  .tp-faq .tp-ad[open]>summary .chev{color:var(--cta)}
  .tp-faq .tp-ad .body{padding:0 44px 26px 0}
  .tp-faq .tp-ad .body p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0;overflow-wrap:anywhere}
  /* Spaltenzahl setzt das Template nach Fragenmenge (ab 7 zwei Spalten). */
  .tp-faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
  .tp-faq-col{border-top:1px solid var(--line)}
  .tp-faq-cols.eins{grid-template-columns:1fr;max-width:820px}
  /* Mehr-Schalter: erst ab 860px abwaerts sichtbar (Regel im Breakpoint unten,
     dieselbe Breite steht als matchMedia in relaunch-tarif.js -- beide zusammen
     aendern, sonst traegt ein sichtbarer Eintrag `inert`),
     denn nur mobil steht die FAQ untereinander und wird lang. Optik vom
     Schalter der Startseite geerbt, damit beide FAQ-Bloecke gleich anfassen. */
  .tp-faq-mehr{display:none;max-width:820px}
  /* Flache Ghost-Leiste wie auf der Startseite (.faq-more-btn), bewusst keine
     Button-Pille: die konkurriert sonst mit dem orangen CTA. Die Trennlinie
     kommt vom letzten sichtbaren Item, nicht vom Schalter -- traegt er eine
     eigene border-top, stossen zwei 1px-Kanten aneinander und ergeben optisch
     2px (auf der Startseite live gemessen, 28.07.2026).
     Warum die Startseite ihre border-top trotzdem behaelt: ihre FAQ ist dort
     zweispaltig, und bei ungerader Fragenzahl steht die letzte Frage allein in
     der Schlusszeile -- die Item-Linie wuerde dann nur unter einer Spalte
     laufen. Hier ist die Liste ab 860px abwaerts immer einspaltig (Zeile 316),
     der Schalter sitzt also garantiert direkt unter einem Item. */
  .tp-faq-mehr-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    min-height:48px;padding:16px 12px;border:0;
    background:none;font:inherit;font-size:15px;font-weight:560;color:var(--ink-2);cursor:pointer;
    touch-action:manipulation;-webkit-tap-highlight-color:transparent;
    transition:background .15s,color .15s}
  .tp-faq-mehr-btn:hover{background:rgba(22,32,46,.03);color:var(--ink)}
  .tp-faq-mehr-btn:active{background:rgba(22,32,46,.06)}
  .tp-faq-mehr-btn:focus-visible{outline:2px solid var(--cta);outline-offset:-2px}
  .tp-faq-mehr-btn .chev{width:16px;height:16px;flex:0 0 auto;transition:transform .25s}
  .tp-faq-mehr-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .tp-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
  .tp-row:last-child{border-bottom:none}
  .tp-row .k{color:var(--ink-2)}
  .tp-row .v{color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
  .tp-row .v.pos{color:var(--green-strong)} .tp-row .v.del{text-decoration:line-through;color:var(--ink-3);font-weight:500}
  .tp-row.tot{border-top:2px solid var(--line);border-bottom:none;margin-top:4px;padding-top:11px}
  .tp-row.tot .k{font-weight:640;color:var(--ink)} .tp-row.tot .v{font-size:17px;font-weight:720;color:var(--cta)}
  .tp-way{margin-top:16px;font-size:14px;color:var(--ink-2);line-height:1.7;
    background:var(--paper-3);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
  .tp-way:not(:first-of-type){margin-top:10px}
  .tp-way b{color:var(--ink)} .tp-way .res{color:var(--cta);font-weight:680}
  .tp-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 36px}
  .tp-doc{margin-top:16px;font-size:13.5px}
  .tp-doc a{display:inline-flex;align-items:center;gap:8px;color:var(--cta);font-weight:560}
  .tp-doc svg{width:16px;height:16px}

  /* verwandte Tarife: .section-Padding (88px) auf Seitenrhythmus (48-56px) eindampfen */
  .tp-rel{margin-top:0;padding:56px 0 64px}
  /* Der Abstand zur Bildreihe haengt seit dem Wegfall des Untertitels an der
     Ueberschrift selbst. Die p-Regel darunter bleibt fuer die alte Interim-Seite
     stehen (per 301 auf /tarife, also unerreichbar) — dort steht der Absatz noch. */
  .tp-rel-head h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 18px}
  .tp-rel-head p{color:var(--ink-2);font-size:16px;margin:0 0 20px}
  /* Related-Karten 29.07.: zurueck zum Produktbild, jetzt als Bild-Reihe statt
     Text-Karte (Vorgabe Daniel: "nur die Bilder, die Ersparnis und der Name,
     damit die klicken"). Die Reihenfolge macht der Controller (relatedTariffs):
     eigenes Netz zuerst, danach die uebrigen.
     Kein JS-Slider: overflow-x + scroll-snap reichen. Die Reihe ist mit elf
     Karten breiter als jedes Fenster, sie scrollt also von selbst — auf dem
     Handy per Wisch, auf dem Desktop per Trackpad oder Scrollleiste. Pfeile
     waeren nachruestbar, sind aber nicht gebaut. */
  /* Innenabstand ist kein Zierrat: overflow-x:auto clippt auch nach oben/unten,
     sonst schneidet die Reihe den Fokus-Ring (3px + 3px Versatz) und den
     Hover-Schatten ab. scroll-padding haelt den Ring auch an der Kante frei. */
  /* "safe center" bleibt als Sicherung: bei elf Karten laeuft die Reihe ohnehin
     ueber, "safe" faellt dann auf linksbuendig zurueck und die erste Karte
     startet am Rand. Schrumpft der Katalog eines Tages auf wenige Tarife, stehen
     sie mittig statt linksbuendig mit leerem Rest daneben. Echtes "center" wuerde
     beim Ueberlauf den Anfang hinter den Scrollrand schieben, also Karte eins
     unerreichbar machen. Browser ohne Kenntnis von "safe" verwerfen die ganze
     Deklaration und bleiben bei linksbuendig, was ebenfalls traegt. */
  .tp-rel .rel-row{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;scroll-padding-inline:10px;justify-content:safe center;
    -webkit-overflow-scrolling:touch;padding:8px 10px 22px;margin:0 -10px;scrollbar-width:thin}
  /* Feste 220 Pixel statt wachsender Karten. Vorher zog flex-grow sie auf dem
     Desktop bis 380 Pixel auf, das Bild im Rahmen 3:4 damit auf 504 Pixel Hoehe —
     eine Karte war hoeher als ein halber Bildschirm (29.07. gemessen). 74vw als
     zweite Bremse fuer sehr schmale Geraete: bei 280 Pixel bleibt so ein Streifen
     der Nachbarkarte sichtbar, der zum Wischen einlaedt. */
  .rel-card{scroll-snap-align:start;flex:0 0 min(220px,74vw);max-width:220px;position:relative;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
    display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
  /* pointer-events:none — der Akzentstreifen liegt ueber dem Klick-Overlay und
     waere sonst ein toter Streifen an der Kartenoberkante. */
  .rel-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--rel-accent,var(--line));z-index:3;pointer-events:none}
  .rel-card[data-net="vodafone"]{--rel-accent:var(--vodafone)}
  .rel-card[data-net="o2"]{--rel-accent:var(--o2)}
  .rel-card[data-net="freenet"]{--rel-accent:var(--telekom)}
  .rel-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#d9dde5}
  .rel-card:active{transform:translateY(0)}
  /* Der Ring gehoert um die ganze Karte, nicht um den Titeltext — aber nur bei
     Tastatur-Fokus. Beides zusammen nur dort, wo :has() traegt: sonst bliebe der
     Link ohne Ring zurueck. */
  @supports selector(:has(*)){
    .rel-card:has(a:focus-visible){outline:3px solid var(--cta);outline-offset:3px}
    .rel-card h3 a:focus-visible{outline:none}
  }
  /* Ein Klickziel ueber die ganze Karte — kein toter Bereich neben dem Titel. */
  .rel-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}

  .rel-media{position:relative}
  /* Rahmen 3:4, weil die Tarifbilder im Hochformat liegen (rund 1080 x 1456).
     Ein quadratischer Ausschnitt kappte oben das Anbieter-Logo — bei freenet
     sichtbar geprueft. So bleibt gut ein Prozent Beschnitt, also nichts.
     height:auto ist PFLICHT: die width/height-Attribute am <img> mappen auf CSS
     und wuerden sonst die Attribut-Hoehe erzwingen, aspect-ratio griffe nie. */
  .rel-media img{display:block;width:100%;height:auto;aspect-ratio:3/4;
    object-fit:cover;object-position:center;background:var(--paper-2)}

  /* Runder Stoerer, Bildsprache des alten Werbebanners. Gruen statt Orange, weil
     Ersparnis im Relaunch durchgehend gruen spricht (.save-pill, .save-mini,
     .bd-neg) und Orange dort die Marke selbst ist. --green-strong traegt Weiss
     mit 5,4:1, das hellere --green nur 3,3:1 und faellt fuer 12px durch.
     Eigener Schatten statt --shadow-md: der Token ist fuer Karten auf hellem
     Papier gerechnet und verschwindet auf einem Foto. */
  .rel-save{position:absolute;right:12px;bottom:12px;z-index:2;
    width:clamp(74px,30%,96px);aspect-ratio:1/1;border-radius:50%;
    background:var(--green-strong);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;line-height:1.05;
    /* Weisser Ring als erster Schatten: das freenet-Motiv ist selbst limettengruen,
       dort liefe die Marke sonst in den Hintergrund. Auf Rot und Blau schadet er
       nicht, also eine Regel statt einer Ausnahme pro Anbieter. */
    box-shadow:0 0 0 2.5px #fff,0 3px 14px rgba(0,0,0,.3)}
  /* freenet setzt bei allen vier Motiven eine Speed-Zeile an den unteren Rand
     ("BIS ZU 300 MBIT/S 5G MAX", 29.07. an allen vier geprueft) — dort deckt die
     Marke sonst das Zeilenende zu. Anheben ist gefahrlos, weil die Reihe immer
     nur einen Anbieter zeigt: beide Stellungen stehen nie nebeneinander. Bei
     Vodafone und o2 bleibt sie unten, sonst liegt sie auf der SIM-Karte. */
  .rel-card[data-net="freenet"] .rel-save{bottom:16%}
  .rel-save .k,.rel-save .s{font-size:12px;font-weight:640}
  .rel-save .z{font-size:21px;font-weight:760;letter-spacing:-.02em;margin:1px 0}

  .rel-body{padding:13px 15px 16px}
  /* Zwei Zeilen fest reserviert (2 x 1.25em): bei 220 Pixel Kartenbreite braucht
     "Vodafone Business XL Unlimited" zwei Zeilen, "Business Starter" eine — ohne
     Reserve saessen die Sternenzeilen nebeneinander auf verschiedenen Hoehen. */
  .rel-card h3{margin:0;font-size:16px;font-weight:640;letter-spacing:-.015em;
    line-height:1.25;min-height:2.5em;overflow-wrap:break-word}
  .rel-card h3 a{color:inherit}
  .rel-rate{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px;
    font-size:12.5px;font-variant-numeric:tabular-nums}
  .rel-rate .st{color:var(--orange);letter-spacing:1px;line-height:1}
  .rel-rate b{font-size:13px;font-weight:680;color:var(--ink)}
  .rel-rate .cnt{color:var(--ink-3)}

  /* Faellt das Bild aus, entfernt relaunch-tarif.js die ganze .rel-media — mit
     ihr ginge auch der Stoerer und damit die Ersparnis verloren. Diese Pille
     traegt sie dann nach. */
  .rel-body .rel-save-fb{display:none}
  .rel-card:not(:has(.rel-media)) .rel-body .rel-save-fb{display:inline-flex;margin:0 0 8px}

  @media (prefers-reduced-motion:reduce){
    .rel-card{transition:none}
    .rel-card:hover{transform:none}
  }

  .tp-sticky{display:none}

  @media (max-width:960px){
    .tp-hero{grid-template-columns:1fr;gap:28px}
    .tp-media{position:static}
    .tp-media img{max-width:340px;margin:0 auto}
    .tp-cols{grid-template-columns:1fr}
  }
  @media (max-width:680px){
    .tp-adv-grid{grid-template-columns:1fr;gap:20px}
    /* schmale Viewports: Titel neben Icon, Text darunter volle Breite */
    .tp-ac{grid-template-columns:50px minmax(0,1fr)}
    .tp-ac h3{align-self:center;margin:0}
    .tp-ac p{grid-column:2;margin-top:4px}
    .tp-steps-grid{grid-template-columns:1fr;gap:24px}
  }
  @media (max-width:900px){
    .tp-svc-grid{grid-template-columns:1fr;gap:14px}
  }
  @media (max-width:860px){
    .tp-faq-cols{grid-template-columns:1fr}
    .tp-faq-col+.tp-faq-col{border-top:0}
    /* Nur mit JavaScript: ohne den Schalter waeren die Extras nicht erreichbar.
       Serverseitig stehen alle Fragen im DOM (FAQPage-Schema, Suche, Text-Parity). */
    /* Ohne Abstand: die Leiste schliesst direkt an die Liste an, ihre Oberkante
       ist die Unterlinie der letzten Frage. */
    .js .tp-faq-mehr{display:block}
    .js .tp-faq-cols.is-collapsed .tp-ad.is-extra{display:none}
  }
  @media (max-width:768px){
    body{padding-bottom:84px}
    .tp-sticky{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--paper);
      border-top:1px solid var(--line);box-shadow:0 -2px 14px rgba(16,32,46,.10);
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      transform:translateY(110%);opacity:0;visibility:hidden;pointer-events:none;
      transition:transform .28s ease,opacity .28s ease,visibility .28s}
    .tp-sticky.show{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
    /* Mobile-Sticky: bei Menge > 1 wird das Label laenger ("... gesamt ..."). Die
       Basis-.btn ist nowrap -> lief auf schmalen Phones (280/320px) horizontal ueber.
       Kompakter (15px, seitl. 16px) + Umbruch erlaubt: 360/390px bleiben einzeilig,
       280/320px brechen sauber 2-zeilig (kein Overflow, Tap-Target >=44px). */
    .tp-sticky .btn{width:100%;font-size:15px;line-height:1.2;padding:11px 16px;white-space:normal;min-height:46px}
  }
  /* reduced-motion: relaunch.css listet nur Bestands-Selektoren — neue Komponenten hier nachziehen */
  @media (prefers-reduced-motion:reduce){
    .tp-sticky,.tp-opt,.tp-switch-b,.tp-calc-dd summary .chev,.tp-ad>summary .chev,
    .tp-faq-mehr-btn,.tp-faq-mehr-btn .chev{transition:none}
  }
  /* Tarifdetails: Trigger-Link in der Kaufbox */
  .tp-detail-link{display:inline-flex;align-items:center;gap:6px;margin:2px 0 16px;min-height:44px;background:none;border:0;padding:0;
    /* --cta-d statt --cta: der Knopf sitzt auf .tp-specs-top (--paper-2), dort
       kommt --cta nur auf 4,40:1. Die dunklere Stufe hebt ihn auf 5,57:1. */
    font-family:inherit;font-size:13.5px;font-weight:640;color:var(--cta-d);cursor:pointer;touch-action:manipulation}
  .tp-detail-link:hover{text-decoration:underline}
.tp-detail-link:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:4px}
  .tp-detail-link svg{width:15px;height:15px;flex:none}
  /* Tarifdetails-Overlay (wie Live-Shop) */
  .tp-modal[hidden]{display:none}
  .tp-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-start;justify-content:center;
    padding:clamp(12px,4vh,56px) 16px;overflow-y:auto}
  .tp-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,32,.55);backdrop-filter:blur(2px)}
  .tp-modal-box{position:relative;width:100%;max-width:560px;background:#fff;border-radius:var(--r-2xl);
    box-shadow:0 24px 64px rgba(15,23,32,.28);overflow:hidden;animation:tpModalIn .18s ease}
  /* Mit Tarifdetails-Tabelle breiter (kuratierte Labels bis 398px, sonst 2-3-zeiliger
     Umbruch); ohne Tabelle (freenet: nur PDF-Karte) bleiben kompakte 560px */
  .tp-modal-box:has(.tp-td-wrap){max-width:840px}
  @keyframes tpModalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .tp-modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px clamp(18px,3vw,28px);border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
  .tp-modal-head h2{margin:0;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
  .tp-modal-x{width:40px;height:40px;border:0;border-radius:10px;background:var(--paper);color:var(--ink-2);
    cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
  .tp-modal-x:hover{background:#e9edf2;color:var(--ink)}
  .tp-modal-x svg{width:18px;height:18px}
  .tp-modal-body{padding:clamp(18px,3vw,28px)}
  /* Tarifdetails-Tabelle — Optik 1:1 wie Checkout .li-info-html: heller Header (--paper-2), Wert-Spalte rechtsbuendig + tabular, umrandeter Scroll-Container */
  .tp-td-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-md)}
  /* Element-Selektoren statt .tp-td-Klasse: das DB-HTML kommt als nacktes <table>
     ohne Klassen (Sanitizer laesst nur Struktur-Tags durch), analog Checkout .li-info-html */
  .tp-td-wrap table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.45}
  .tp-td-wrap thead th{text-align:left;background:var(--paper-2);color:var(--ink);font-weight:700;padding:9px 12px;font-size:13px;vertical-align:top;border-bottom:1px solid var(--line)}
  .tp-td-wrap thead th:last-child{text-align:right}
  .tp-td-wrap tbody td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top;line-height:1.45;font-weight:400}
  /* Labelspalte fest auf 55%: sonst draengen die langen Erklaertexte rechts die
     Labels in den Umbruch (auto-Layout gab links nur 294px, Labels bis 398px) */
  .tp-td-wrap th:first-child,.tp-td-wrap tbody td:first-child{width:55%}
  .tp-td-wrap tbody td:last-child{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
  .tp-td-wrap tbody tr:last-child td{border-bottom:0}
  .tp-td-wrap td b,.tp-td-wrap td strong{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
  .tp-td-wrap td small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}
  /* Dokumente — wie Checkout .li-docs: umrandete Download-Karten mit Datei-Icon */
  .tp-docs-lbl{margin:18px 0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3)}
  .tp-docs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .tp-docs a{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;background:#fff;transition:border-color .15s,background .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .tp-docs a:hover{border-color:var(--ink-3);background:var(--paper-2)}
  .tp-docs a:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
  .tp-docs svg{width:18px;height:18px;flex:none;color:var(--cta)}
  .tp-td-src{margin:18px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.45}
  @media (prefers-reduced-motion:reduce){.tp-modal-box{animation:none}}

  /* ===== VODAFONE-SPEZIFISCH: GigaDepot + Tarif-Extras (o2/Freenet: eigene Inhalte) ===== */
  .tp-vf{padding:46px 0;border-top:1px solid var(--line)}
  .tp-vf-feat{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;margin-bottom:44px}
  .tp-vf-feat h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 14px}
  .tp-vf-feat p{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
  .tp-vf-feat p:last-child{margin-bottom:0}
  /* 29.07.: nur der Fliesstext, NICHT das Visual. Vorher griff .tp-vf-feat b auch
     ins rote Badge und faerbte ausgerechnet das Kernwort "Datenvolumen" dunkelblau
     auf Rot (3,41:1), waehrend die Spans daneben weiss blieben. */
  .tp-vf-feat-txt b{color:var(--ink);font-weight:640}
  .tp-vf-vis{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;align-items:center;gap:18px}
  .tp-vf-vis-badge{width:128px;height:128px;border-radius:50%;background:#e60000;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.2;padding:0 14px}
  .tp-vf-vis-badge span{font-size:12px;font-weight:500}
  .tp-vf-vis-badge b{font-size:15px;font-weight:730;margin:2px 0}
  .tp-vf-bars{display:flex;align-items:flex-end;gap:16px}
  .tp-vf-bar{width:46px;border:2px solid var(--ink);border-radius:6px 6px 4px 4px;position:relative;background:#fff}
  .tp-vf-bar i{position:absolute;left:0;right:0;bottom:0;background:rgba(230,0,0,.14);border-top:2px dashed #e60000;display:block}
  .tp-vf-bar-lbl{display:block;text-align:center;font-size:12px;color:var(--ink-2);margin-top:6px}
  .tp-vf-vis-note{font-size:12px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:7px}
  .tp-vf-vis-note::before{content:"";width:22px;height:0;border-top:2px dashed #e60000;display:inline-block}

  .tp-vf-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .tp-vf-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
  .tp-vf-card-banner{background:#e60000;min-height:128px;display:flex;align-items:center;gap:16px;padding:20px 22px;position:relative}
  .tp-vf-card.is-freenet .tp-vf-card-banner{background:#8bbf26}
  .tp-vf-card-banner::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:38px;background:rgba(0,0,0,.55)}
  .tp-vf-card-ic{width:58px;height:58px;flex:none;color:#fff;position:relative;z-index:1}
  .tp-vf-card-ic svg{width:100%;height:100%}
  .tp-vf-card-img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:#e60000}
  .tp-vf-card-banner b{position:relative;z-index:1;color:#fff;font-size:21px;font-weight:730;letter-spacing:-.01em;line-height:1.15}
  .tp-vf-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
  .tp-vf-card-body h3{font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
  .tp-vf-card-body p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 18px;flex:1}
  .tp-vf-card-link{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-radius:var(--r-md);
    background:var(--ink);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s}
  .tp-vf-card-link:hover{background:#000}
  .tp-vf-card-link:focus-visible{outline:2px solid var(--cta);outline-offset:2px}

  /* ===== Kundenstimmen-Carousel ===== */
  .tp-testi{padding:50px 0;border-top:1px solid var(--line)}
  .tp-testi h2{font-size:26px;letter-spacing:-.02em;color:var(--ink);margin:0 0 26px;text-align:center}
  .tp-testi-stage{max-width:680px;margin:0 auto;position:relative;min-height:200px}
  .tp-testi-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .35s;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .tp-testi-slide[data-active]{opacity:1;visibility:visible;position:relative}
  .tp-testi-q{font-size:17px;line-height:1.6;color:var(--ink);margin:0 0 18px;max-width:60ch}
  .tp-testi-who{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink-2);font-weight:560}
  .tp-testi-who img{width:26px;height:26px;border-radius:50%}
  .tp-testi-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:26px}
  .tp-testi-arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background .15s}
  .tp-testi-arrow:hover{border-color:var(--ink-3);background:var(--paper-2)}
  .tp-testi-arrow:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
  .tp-testi-arrow svg{width:18px;height:18px}
  .tp-testi-dots{display:flex;gap:9px}
  .tp-testi-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer;transition:background .15s,transform .15s}
  .tp-testi-dot[aria-current="true"]{background:var(--cta);transform:scale(1.25)}
  .tp-testi-dot:focus-visible{outline:2px solid var(--cta);outline-offset:3px}

  @media (max-width:768px){
    .tp-vf-feat{grid-template-columns:1fr;gap:26px}
    .tp-vf-cards{grid-template-columns:1fr}
    .tp-testi-q{font-size:16px}
  }
  @media (prefers-reduced-motion:reduce){.tp-testi-slide{transition:none}}


/* Provider-Umschalter (Mockup) */
.tp-switch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 2px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.tp-switch-lbl{font-size:12.5px;font-weight:680;color:var(--ink-2);padding-right:2px}
.tp-switch-b{font:inherit;font-size:13.5px;font-weight:640;min-height:44px;padding:6px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink-2);cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s,color .15s}
.tp-switch-b:hover{border-color:var(--ink-3)}
.tp-switch-b:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
.tp-switch-b[aria-pressed="true"]{border-color:var(--cta);background:var(--cta);color:#fff}
.tp-switch-hint{margin-left:auto;font-size:11.5px;color:var(--ink-3)}
.tp-opt[disabled]{opacity:.55;cursor:not-allowed}
.tp-opt[disabled]:hover{border-color:var(--line)}
.tp-opt-off{color:var(--ink-3);font-weight:680}
@media(max-width:560px){.tp-switch-hint{display:none}}