/* =========================================================================
   Mobilfunk Börse — Shop-Relaunch "Der Mensch im Mittelpunkt"
   Eigenständiges Stylesheet für das Parallel-Layout (layouts/relaunch.blade.php).
   Lädt NICHT den Legacy-Bootstrap-Stack — keine Kollision mit dem Bestandsdesign.
   Quelle: mockups/shop-relaunch/relaunch/home.html (vom User abgenommen 21.06.2026).
   Brand-Tokens: #ff6800 nur dekorativ, #c24e00 für Text/CTA (WCAG AA).
   ========================================================================= */

/* Inter (DESIGN.md-Brand-Font) — self-hosted, DSGVO-konform (kein Google-CDN).
   Variable-Roman-woff2 deckt alle genutzten Schnitte (400–700) in einer Datei.
   font-display:swap: Text bleibt im System-Fallback sofort lesbar (kein FOIT). */
@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/InterVariable.woff2?v=2") format("woff2");
}

:root{
  --ink:#16202e;          /* Haupt-Text / Tinte */
  --ink-2:#5a6675;        /* sekundär */
  --ink-3:#67707d;        /* tertiär — AA: 5,0:1 auf Weiß, 4,6:1 auf #f5f5f7 */
  --line:#e7e9ee;         /* Trennlinien */
  --paper:#ffffff;
  --paper-2:#f5f5f7;      /* ruhiges Band */
  --paper-3:#fbfbfd;
  --paper-warm:#fff7f1;   /* Grund der Empfehlungs-Karte: Orange auf 6 % heruntergezogen */
  --line-warm:#e8dcd2;    /* deren Rahmen: fast das ruhige --line, nur eine Spur waermer */
  --orange:#ff6800;       /* dekorativer Akzent */
  --cta:#c24e00;          /* Text/CTA auf Weiß, AA */
  --cta-d:#a84300;
  --green:#16a34a;        /* Erfolg/Häkchen-Icon (≥3:1 auf Weiß) — DESIGN.md success */
  --green-strong:#1e7a3a; /* Erfolg-Text auf hellem Tint (AA) — DESIGN.md success-strong */
  --vodafone:#e60000;
  --o2:#0019a5;
  --telekom:#e20074;
  --freenet:var(--telekom); /* freenet-Tarife laufen im Telekom-Netz -> Telekom-Magenta fuer Badge/Dot/Kanten-Akzent (Routing-Slug bleibt 'freenet') */
  --on-ink:#1c3d63;         /* OneNumber-Pille: kuehles Blau, bewusst NICHT gruen (Geld) / orange (Dringlichkeit) — reine Feature-Info */
  --on-line:rgba(28,61,99,.22);
  --shadow-sm:0 1px 2px rgba(22,32,46,.06), 0 4px 12px rgba(22,32,46,.05);
  --shadow-md:0 4px 16px rgba(22,32,46,.08), 0 16px 40px rgba(22,32,46,.08);
  --shadow-lg:0 8px 30px rgba(22,32,46,.10), 0 30px 70px rgba(22,32,46,.12);
  --r-2xl:24px; --r-lg:14px; --r-md:10px; /* DESIGN.md-Radius-Skala (2xl/lg/md) */
  --maxw:1180px;
  --font:"Inter var",-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:rgba(255,104,0,.18);
}
button,a,.btn,.filter{touch-action:manipulation}
/* Skip-Link: sichtbar nur bei Tastatur-Fokus */
.skip-link{position:absolute;left:14px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:980px;font-weight:560;font-size:15px;transition:top .18s ease}
.skip-link:focus-visible{top:14px}
h1,h2,h3{margin:0;font-weight:680;letter-spacing:-.022em;line-height:1.08;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(255,104,0,.18)}
:focus-visible{outline:2.5px solid var(--cta);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:560;font-size:16px;letter-spacing:-.01em;
  padding:14px 26px;border-radius:980px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 1px 1px rgba(168,67,0,.4),0 8px 22px rgba(194,78,0,.28)}
.btn-primary:hover{background:var(--cta-d);transform:translateY(-1px);box-shadow:0 2px 2px rgba(168,67,0,.4),0 12px 28px rgba(194,78,0,.34)}
.btn-ghost{background:rgba(22,32,46,.04);color:var(--ink);border-color:rgba(22,32,46,.10)}
.btn-ghost:hover{background:rgba(22,32,46,.07);transform:translateY(-1px)}
.btn-light{background:#fff;color:var(--cta)}
.btn-light:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-sm{padding:11px 20px;font-size:15px}

/* ============ Zielgruppen-Reiter ============
   Zwei Reiter zwischen Utility-Bar und Kopf, Vorbild ist Florians shop. Der aktive
   sitzt als weisses Blatt auf dem ruhigen Band und laeuft ohne Trennlinie in den
   Kopf darunter — deshalb nur oben gerundet und deshalb ohne border-bottom an der
   Leiste: eine Linie dort wuerde das Blatt vom Kopf abschneiden und die ganze Form
   entwerten. Die Abgrenzung macht allein der Farbwechsel.
   Hoehe 34px am Schreibtisch (Mauszeiger), 44px auf dem Telefon. Die 34px wuerden
   die 24px-Untergrenze aus WCAG 2.5.8 zwar einhalten, aber die beiden Reiter
   liegen ohne Abstand nebeneinander und stehen weit oben, dort wo der Daumen beim
   Greifen aufsetzt: ein Fehlgriff schickt einen Geschaeftskunden auf die
   Privatkunden-Seite und beendet die Sitzung. Deshalb am Telefon die volle
   Komfortgroesse. */
.zgbar{background:var(--paper-2)}
.zgbar .wrap{display:flex;justify-content:flex-start}
.zg{display:flex}
.zg .zg-an,.zg .zg-aus{display:inline-flex;align-items:center;height:34px;padding:0 20px;
  font-size:13.5px;font-weight:560;white-space:nowrap;letter-spacing:.01em}
.zg .zg-an{background:var(--paper);color:var(--ink);border-radius:6px 6px 0 0}
.zg .zg-aus{color:var(--ink-2)}
.zg .zg-aus:hover{color:var(--ink);background:rgba(22,32,46,.05);border-radius:6px 6px 0 0}
/* Gedrueckt-Zustand: auf dem Telefon gibt es kein :hover, ohne :active bleibt der
   Reiter beim Antippen bis zum Seitenwechsel voellig stumm. */
.zg .zg-aus:active{color:var(--ink);background:rgba(22,32,46,.10);border-radius:6px 6px 0 0}
@media (max-width:680px){
  .zg .zg-an,.zg .zg-aus{height:44px;padding:0 16px}
}
/* Ganz schmale Geraete: die zwei Woerter zusammen brauchen mehr als 280px, wenn
   das Polster bleibt. Es schrumpft, die Schrift nicht — sonst wird der Reiter
   unleserlich, bevor er zu breit ist. */
@media (max-width:340px){
  .zg .zg-an,.zg .zg-aus{padding:0 11px}
}

/* ============ Utility-Bar ============ */
.util{background:var(--ink);color:#cdd4de;font-size:13.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:18px}
.util a{color:#dfe4ea;display:inline-flex;align-items:center;gap:7px;font-weight:480}
.util a:hover{color:#fff}
.util-left{display:flex;gap:16px;align-items:center;min-width:0}
.util-right{display:flex;gap:16px;align-items:center;flex:none}
.util .sep{color:#46505f}
.util svg{width:14px;height:14px;flex:none}
.util-brand{color:#aeb6c2;font-weight:480}
.util .vdiv{width:1px;height:15px;background:#39424f;flex:none}
.util .util-trust{color:#cdd4de}
.util-trust svg{color:var(--green)}
.util .util-tel{color:#fff;font-weight:560;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.util-tel svg{color:#fff}
.util-tel:hover span{text-decoration:underline;text-underline-offset:3px}
.util-live{white-space:nowrap}
/* Gestaffelte Utility-Bar-Reduktion, damit die 40px-Leiste nie 2-zeilig aufblaeht:
   >900px alles · 681-900 nur Marke-kurz + Nummer + Live · <=680 nur Marke + Live. */
@media (max-width:900px){.util .hide-md{display:none}}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(22,163,74,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.55)}70%{box-shadow:0 0 0 7px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

/* ============ Masthead ============ */
.masthead{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:38px;height:38px;display:block;flex:none;filter:drop-shadow(0 4px 12px rgba(235,91,8,.30))}
.brand-name{display:flex;flex-direction:column;line-height:1.05;font-weight:640;font-size:16.5px;letter-spacing:-.02em}
.brand-name small{font-weight:480;font-size:11.5px;color:var(--ink-3);letter-spacing:.01em}
.mainnav{display:flex;gap:30px;margin-left:auto;margin-right:8px}
.mainnav a{font-size:15.5px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;transition:color .15s}
.mainnav a:hover{color:var(--ink)}
.mast-actions{display:flex;align-items:center;gap:12px}
.cart{position:relative}
.cart-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:15px;font-weight:520;color:var(--ink);background:none;cursor:pointer;padding:9px 16px;min-height:44px;border-radius:980px;border:1.5px solid var(--line);transition:border-color .15s,background .15s}
.cart-btn:hover{border-color:#cfd4dd;background:var(--paper-2)}
.cart-btn[aria-expanded="true"]{border-color:#cfd4dd;background:var(--paper-2)}
.cart-count{background:var(--cta);color:#fff;font-size:12px;font-weight:680;min-width:19px;height:19px;border-radius:980px;display:grid;place-items:center;padding:0 5px}
.navtoggle{display:none;font:inherit;font-weight:540;font-size:15px;background:none;border:1.5px solid var(--line);border-radius:980px;padding:8px 16px;min-height:44px;cursor:pointer;color:var(--ink)}

/* ---- Warenkorb-Panel (read-only Anzeige) ---- */
.cart-panel{position:absolute;top:calc(100% + 12px);right:0;width:340px;max-width:calc(100vw - 32px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  padding:8px;z-index:60;opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}
.cart-panel:not([hidden]){opacity:1;transform:none}
.cart-panel[hidden]{display:none}
.cart-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 12px 8px;
  font-size:15px;font-weight:620;color:var(--ink)}
.cart-head span{font-size:13px;font-weight:500;color:var(--ink-3)}
.cart-items{list-style:none;margin:0;padding:0;max-height:46vh;overflow-y:auto}
.cart-item{padding:9px 12px;border-top:1px solid var(--line)}
.cart-item-name{display:block;font-size:14.5px;font-weight:520;color:var(--ink);line-height:1.35;overflow-wrap:break-word}
.cart-item-meta{display:flex;align-items:baseline;gap:8px;margin-top:3px;font-size:13.5px;color:var(--ink-2)}
.cart-item-qty{color:var(--ink-3)}
.cart-item-price{font-weight:560;color:var(--ink);font-variant-numeric:tabular-nums}
.cart-item-price small{font-weight:480;color:var(--ink-3)}
.cart-foot{border-top:1px solid var(--line);margin-top:2px;padding:12px}
.cart-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.cart-total span{font-size:14px;color:var(--ink-2)}
.cart-total strong{font-size:18px;font-weight:640;color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cart-actions{display:flex;gap:8px}
.cart-actions .btn{flex:1}
.cart-empty{padding:22px 16px;text-align:center}
.cart-empty p{margin:0 0 14px;font-size:14.5px;color:var(--ink-2)}

/* ============ Hero (Orange-Buehne, Neon-Kurve als Vektor + Cursor-Pixel) ======
   Ex-Rasterbild (hero-buehne.webp) ersetzt durch reinen CSS-Verlauf + SVG-Kurve:
   vektorscharf auf jeder Breite/Retina, kein Upscaling-Matsch, kein Bild-Request.
   Motiv-Feinschliff spaeter moeglich = nur Verlaufs-Stops + SVG-Pfad. */
.hero{position:relative;overflow:hidden;isolation:isolate;
    background:radial-gradient(120% 140% at 88% 18%,rgba(255,180,90,.55) 0%,rgba(255,138,31,0) 42%),
    linear-gradient(105deg,#b8480a 0%,#d95c07 34%,#ee6d05 60%,#ff8a1f 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
    background:linear-gradient(90deg,rgba(178,68,0,.50) 0%,rgba(178,68,0,.14) 45%,rgba(178,68,0,0) 70%)}
/* Neon-Kurve (scharf, animiert): Halo + Kern + wandernder Licht-Puls */
.hero .neon{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none}
.hero .neon .glow{opacity:.5;animation:neonBreathe 5s ease-in-out infinite}/* Blur via SVG-feGaussianBlur (iOS-fest), nicht CSS-filter */
.hero .neon .core{opacity:.95}
.hero .neon .spark{stroke:#fff;stroke-linecap:round;stroke-dasharray:140 1600;
    filter:drop-shadow(0 0 10px rgba(255,240,220,.9));animation:neonRun 6s linear infinite}
@keyframes neonRun{from{stroke-dashoffset:1740}to{stroke-dashoffset:0}}
@keyframes neonBreathe{0%,100%{opacity:.45}50%{opacity:.7}}
/* Synapsen-Netz (Canvas, bewegungs-getrieben; auf Touch autonom) */
.hero .synapse{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
@media (prefers-reduced-motion:reduce){
    .hero .neon .spark,.hero .neon .glow{animation:none}
    .hero .neon .spark{stroke-dasharray:none;opacity:.85}
    .hero .synapse{display:none}}
/* Mobile: Kern etwas zuruecknehmen (Text-Lesbarkeit), Glow + animierter
   Licht-Puls bleiben AN — Blur kommt jetzt vom SVG-feGaussianBlur (iOS-fest) */
@media (max-width:700px){
    .hero .neon .core{opacity:.2}
    /* animation:none, sonst schlaegt der neonBreathe-Keyframe (.45-.7) die opacity:.14 */
    .hero .neon .glow{opacity:.14;animation:none}
    .hero .neon .spark{opacity:.5;filter:drop-shadow(0 0 4px rgba(255,240,220,.45))}}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:74px;padding-bottom:82px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--cta)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--orange);display:inline-block}
.hero .eyebrow{color:#fff}
.hero .eyebrow::before{background:#fff}
/* H1 zweispaltig gestaffelt: Zeile 1 "Business Handytarife", Zeile 2 "vergleichen.",
   dann die beiden weichen Zeilen. .ln erzwingt den Umbruch je Zeile (nowrap haelt
   jede Zeile zusammen), clamp haelt "Business Handytarife" bis 280px einzeilig
   (User-Wunsch 17.07., mobil nicht zu lang gezogen). */
.hero h1{font-size:clamp(1.5rem,8.6vw,3.5rem);line-height:1.06;margin:22px 0 0;letter-spacing:-.035em;color:#fff}
.hero h1 .ln{display:block;white-space:nowrap}
.hero h1 .soft{color:rgba(255,255,255,.82);font-weight:600}
.hero .lead{font-size:clamp(1.1rem,1.6vw,1.27rem);color:rgba(255,255,255,.94);max-width:33ch;margin:24px 0 0;line-height:1.5}
.hero .btn-primary{background:#fff;color:#a63c00;box-shadow:0 1px 1px rgba(122,44,0,.35),0 8px 22px rgba(122,44,0,.30)}
.hero .btn-primary:hover{background:#ffe9db;transform:translateY(-1px)}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.hero :focus-visible{outline-color:#fff}
.hero-cta{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.facts{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:13px 26px;max-width:480px}
.facts li{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:480;color:var(--ink)}
.facts svg{width:19px;height:19px;color:var(--green);flex:none}
/* Hero-Bullets: inhaltsbreite Spalten (alle einzeilig) + cremeweisser Check im
   transluzenten Badge statt Gruen (kein Farbclash auf der Orange-Buehne) */
.hero .facts{grid-template-columns:auto auto;justify-content:start;max-width:none;gap:13px 34px}
.hero .facts li{color:#fff}
.hero .facts svg{width:14px;height:14px;color:#fff;padding:5px;background:rgba(255,255,255,.15);border-radius:50%;box-sizing:content-box}

/* Berater-Karte = Held */
.advisor{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);padding:30px}
.advisor::before{content:"";position:absolute;inset:0;border-radius:var(--r-2xl);padding:1px;background:linear-gradient(160deg,rgba(255,104,0,.35),transparent 38%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.adv-top{position:relative;display:flex;align-items:center;gap:16px}
.adv-avatar{position:relative;width:72px;height:72px;border-radius:50%;flex:none;background:radial-gradient(circle at 50% 35%,#fff,#f0f1f4);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.adv-avatar svg{width:72px;height:72px}
.adv-online{position:absolute;left:54px;top:54px;width:16px;height:16px;border-radius:50%;background:var(--green);border:2.5px solid #fff;box-shadow:0 1px 3px rgba(22,32,46,.25)}
.adv-id b{display:block;font-size:18px;font-weight:640;letter-spacing:-.02em}
.adv-id span{display:block;font-size:13.5px;color:var(--ink-3);font-weight:500;margin-top:2px}
.adv-quote{margin:22px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:460}
.adv-quote .mk{color:var(--cta);font-weight:600}
.adv-line{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:12px}
.adv-phone{display:flex;align-items:center;gap:12px}
.adv-phone .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,104,0,.10);color:var(--cta);display:grid;place-items:center;flex:none}
.adv-phone .ic svg{width:20px;height:20px}
.adv-phone .t b{display:block;font-size:18px;font-weight:640;letter-spacing:-.01em}
.adv-phone .t span{font-size:12.5px;color:var(--ink-3)}
.adv-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.adv-meta svg{width:15px;height:15px;color:var(--green);flex:none}

/* ============ Beweis-Band (Rechenvorteil) ============ */
.proof{color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(125% 135% at 100% -10%, rgba(255,104,0,.15), rgba(255,104,0,.035) 38%, rgba(255,104,0,0) 64%), var(--ink)}
.proof .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:64px 24px}
.proof .eyebrow{color:#ff9a52}
.proof .eyebrow::before{background:var(--orange)}
.proof h2{color:#fff;font-size:clamp(1.7rem,3vw,2.45rem);margin:18px 0 14px;letter-spacing:-.03em}
.proof p.lead{color:#aeb8c6;font-size:17px;max-width:42ch;line-height:1.55}
.proof .small{font-size:13px;color:#8b95a6;margin-top:18px}
.calc{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-2xl);padding:28px 30px;backdrop-filter:blur(6px)}
.calc-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.calc-h b{font-size:16px;font-weight:600;color:#fff}
.calc-h span{font-size:12.5px;color:#8b95a6}
.calc-row{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09);font-size:15.5px}
.calc-row .k{color:#c2cad6}
.calc-row .v{font-variant-numeric:tabular-nums;color:#e6eaf0;font-weight:520}
.calc-row.minus .v{color:var(--green)}
.calc-row.total{border-bottom:none;padding-top:18px;margin-top:4px}
.calc-row.total .k{font-size:16px;font-weight:600;color:#fff}
.calc-row.total .v{font-size:30px;font-weight:720;letter-spacing:-.02em;color:#fff}
.calc-note{font-size:12.5px;color:#8b95a6;margin-top:16px;line-height:1.5}
/* Beweis-Band: CTA-Paar (Daniel 07.07., Variante 2) + dynamische Rechenweg-Zeilen */
.proof-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.proof .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.30)}
.proof .btn-ghost:hover{background:rgba(255,255,255,.08)}
.calc-row .k em{font-style:normal;font-size:12.5px;color:#8b95a6}
.calc-line{font-size:15px;line-height:1.6;color:#c2cad6;margin:12px 0 0}

/* ============ Preis-Aufschluesselung (D3/D4 — Warenkorb + Checkout) ============
   Geteiltes Partial _cart-breakdown.blade.php. Spiegelt die Live-Shop-Zeilen
   (Grundpreis -> Rahmenrabatt -> Rabattierter Preis -> Exklusiv-Rabatt -> Aktion
   -> Vorteilspreis). Hellkontext (weisse Karte). Horizontales Padding kommt vom
   Container (.cs-card im Warenkorb / .co .summary .bd im Checkout). */
.bd-list{margin:0}
.bd-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px}
/* [hidden]-Reset: .bd-row{display:flex} schlaegt sonst das UA-Default
   [hidden]{display:none} → konditionale Zeilen (rahmen/credit/coupon) blieben
   trotz gesetztem hidden-Attribut sichtbar (z. B. "Aktion − € 0,00" ohne Coupon).
   Spezifitaet (0,1,1) > .bd-row (0,1,0). */
.bd-row[hidden]{display:none}
.bd-row:first-child{padding-top:0}
.bd-k{color:var(--ink-2);line-height:1.42}
.bd-v{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:560;white-space:nowrap;text-align:right}
.bd-sub{color:var(--ink-2)}
.bd-note{display:block;margin-top:3px;font-size:11.5px;font-weight:440;color:var(--ink-3);line-height:1.45}
.bd-neg{color:var(--green-strong);font-weight:560}
.bd-badge{display:inline-block;font-size:11px;font-weight:640;color:var(--green-strong);
  background:rgba(30,122,58,.10);padding:2px 8px;border-radius:980px;margin-left:6px;white-space:nowrap}
.bd-row--sum .bd-k{font-weight:560;color:var(--ink)}
.bd-row--total{border-bottom:none;padding-top:16px;align-items:flex-end}
.bd-row--total .bd-k{font-size:15px;font-weight:620;color:var(--ink);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.bd-total{display:flex;flex-direction:column;align-items:flex-end}
.bd-eff{font-size:11px;font-weight:500;color:var(--ink-3);margin-bottom:1px;white-space:nowrap}
.bd-total strong{font-size:27px;font-weight:680;letter-spacing:-.01em;color:var(--ink)}
.bd-foot{font-size:11.5px;line-height:1.5;color:var(--ink-3);margin:14px 0 0}

/* ============ Sections allgemein ============ */
.section{padding:88px 0}
.section.alt{background:var(--paper-2)}
.sec-head{max-width:680px;margin:0 auto 52px;text-align:center}
.sec-head .eyebrow{justify-content:center}
.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:16px 0 0;letter-spacing:-.03em}
/* Erzwungener Zeilenumbruch in Sektions-Ueberschriften. Bewusst OHNE das
   white-space:nowrap von .hero h1 .ln: die Hero-Zeilen sind kurz, eine
   Sektionszeile wie "Jetzt vergleichen und sparen" muss bei 280-320px
   weiter umbrechen duerfen, sonst laeuft sie aus der Karte. */
.sec-head h2 .ln{display:block}
.sec-head .lead{color:var(--ink-2);font-size:18px;margin-top:16px;line-height:1.55}

/* Filterbar (Segmented Control) */
.filterbar{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:980px;padding:5px;gap:4px;margin:0 auto 40px;box-shadow:var(--shadow-sm)}
/* Chip-Wrapper: am Desktop layout-transparent (Pille bleibt unveraendert); auf
   dem Phone wird er zur horizontal scrollbaren Chip-Reihe (siehe @media 680px). */
.filter-nets{display:contents}
.filterwrap{text-align:center}
.filter{font:inherit;font-size:15px;font-weight:520;color:var(--ink-2);background:none;border:none;border-radius:980px;padding:9px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.filter .dot{width:9px;height:9px;border-radius:50%}
.filter-logo{width:20px;height:20px;border-radius:50%;object-fit:cover;flex:none}
.filter:hover{color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 2px 8px rgba(22,32,46,.18)}

/* ---- Sortierung im selben Filter-Pill (Variante A) ---- */
.sort-inpill{position:relative;display:inline-flex;align-items:center;padding-left:5px;margin-left:3px;border-left:1px solid var(--line)}
.sort-trigger{font:inherit;font-size:15px;font-weight:520;color:var(--ink-2);background:none;border:none;border-radius:980px;padding:9px 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s,color .2s;touch-action:manipulation}
.sort-trigger:hover,.sort-trigger[aria-expanded="true"]{color:var(--ink);background:var(--paper-2)}
.sort-trigger .pre{color:var(--ink-3);font-weight:520}
.sort-trigger .val{font-weight:640;color:var(--ink)}
.sort-chev{width:15px;height:15px;color:var(--ink-3);flex:none;transition:transform .2s}
.sort-trigger[aria-expanded="true"] .sort-chev{transform:rotate(180deg)}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;min-width:252px;display:flex;flex-direction:column;gap:2px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);text-align:left}
.sort-menu[hidden]{display:none}
.sort-opt{font:inherit;font-size:14px;font-weight:560;color:var(--ink-2);background:none;border:none;border-radius:8px;padding:10px 12px;min-height:44px;display:flex;align-items:center;cursor:pointer;text-align:left;white-space:nowrap;transition:background .15s,color .15s;touch-action:manipulation}
.sort-opt:hover{background:var(--paper-2);color:var(--ink)}
.sort-opt[aria-pressed="true"]{color:var(--cta-d);font-weight:680;background:rgba(255,104,0,.07)}

/* Tarif-Liste: Spec-Rows untereinander (4 Spalten: Identitaet | Leistungen | Preis | CTA) */
.grid{display:flex;flex-direction:column;gap:16px}
/* Kompakter gesetzt (28.07.), damit rechts die mitlaufende Karte Platz hat: die
   Spalten-Minima plus Abstaende sind die harte Schranke fuer die Kartenbreite.
   Vorher 195+215+212 + 2x32 gap + 2x30 padding = 746px, jetzt 668px.
   Die Werte stehen bewusst HIER und nicht als ".tarife .card" -- ein
   spezifischerer Selektor wuerde die 980px-Media-Query unten schlagen und die
   Karte auf dem Phone dreispaltig einfrieren. */
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 24px;overflow:hidden;
  display:grid;grid-template-columns:minmax(178px,1.2fr) minmax(198px,1.6fr) minmax(196px,.9fr);
  gap:18px 24px;align-items:center;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* Netz-Akzent: dezente 2px-Oberkante in Netzfarbe (frueher 5px-Vollhoehen-Balken links).
   overflow:hidden + border-radius beschneiden die Kante an den runden Ecken; unabhaengig
   von border-color (hover/featured), daher bleibt der Akzent dort erhalten. */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,var(--line))}
.card[data-net="vodafone"],.net-marker[data-net="vodafone"]{--accent:var(--vodafone)}
.card[data-net="o2"],.net-marker[data-net="o2"]{--accent:var(--o2)}
.card[data-net="telekom"],.net-marker[data-net="telekom"]{--accent:var(--telekom)}
.card[data-net="freenet"],.net-marker[data-net="freenet"]{--accent:var(--freenet)}
/* Feinschliff 21.07. (Hebel 4): Hover-Lift + Pressed — die GANZE Karte ist klickbar
   (card-stretch::after) und darf das zeigen. Kein Dead-Click-Risiko wie bei den
   statischen Prozess-Karten (e96712c): hier fuehrt der Klick wirklich zur Detailseite.
   transition (inkl. transform) steht bereits auf .card; reduced-motion nullt sie. */
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#dde1e8}
.card:active{transform:translateY(0);box-shadow:0 4px 14px rgba(22,32,46,.08)}
/* Empfehlung (03.08.): warmer Kartengrund + Tiefe statt oranger Rahmen. Der harte
   Rahmen (rgba(255,104,0,.5) plus 1px-Ring) war abgenommen worden und ist raus --
   er las sich als Fehlerzustand, nicht als Auszeichnung. Der Rahmen bleibt hier
   fast grau, nur eine Spur waermer, damit keine Linie um die Karte laeuft.
   Der Kartengrund gilt nur der Karte selbst; die Pillen darin (save/valid) sind
   durchscheinend und nehmen den warmen Ton mit -- ihr Textkontrast bleibt bei 5,1
   (vorher 5,4), also weiter ueber der Schwelle. */
.card.featured{border-color:var(--line-warm);background:var(--paper-warm);box-shadow:0 10px 26px rgba(22,32,46,.12)}
/* Ohne diese Zeile bliebe die ausgezeichnete Karte beim Zeigen stumm: .card:hover
   hat dieselbe Spezifitaet und steht davor, .featured wuerde seinen Schatten also
   ueberschreiben. */
.card.featured:hover{box-shadow:0 16px 34px rgba(22,32,46,.16)}
/* Spalte 1: Identitaet */
.card-top{display:flex;align-items:center;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.net{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:560;color:var(--ink-2)}
.net img{width:24px;height:24px;border-radius:50%;object-fit:contain;background:#fff;box-shadow:inset 0 0 0 1px rgba(22,32,46,.06)}
.net .badge{width:24px;height:24px;border-radius:50%;background:var(--ink-2);color:#fff;font-size:12px;font-weight:700;line-height:1;display:grid;place-items:center}
/* Reseller-Marke + Netz getrennt (Freenet: "Freenet · Telekom-Netz"). Marke
   kraeftig, Netz gedaempft, Trenner sehr leise — Vodafone/o2 rendern weiter nur
   den schlichten Marken-Text (kein net_note). */
.net .net-brand{color:var(--ink);font-weight:680}
.net .net-sep{color:var(--ink-3);font-weight:400;margin:0 1px}
.net .net-netz{color:var(--ink-2);font-weight:560}
.rec-tag{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--cta);padding:3px 9px;border-radius:980px;box-shadow:0 2px 6px rgba(194,78,0,.28)}
.card h3{font-size:19px;font-weight:640;letter-spacing:-.02em;overflow-wrap:anywhere}
.gb{margin-top:5px;font-size:15px;font-weight:600;color:var(--ink)}
.gb span{font-weight:480;color:var(--ink-3);font-size:13px}
.save-pill{display:inline-block;margin-top:12px;font-size:12px;font-weight:640;color:var(--green-strong);background:rgba(30,122,58,.10);padding:4px 11px;border-radius:980px}
/* Feinschliff 21.07. (Hebel 2): Pillen-Systematik — save/valid/marker teilen sich
   Schriftgroesse 12px und Padding, damit die Zeile als EIN System liest (vorher
   12 / 11,5 / 11,5px mit leicht abweichenden Hoehen). */
.net-marker{display:flex;align-items:center;gap:7px;width:fit-content;max-width:100%;margin-top:10px;font-size:12px;font-weight:560;letter-spacing:.005em;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:4px 11px 4px 9px;border-radius:980px;overflow-wrap:anywhere}
.net-marker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent,var(--ink-3));flex:none}
/* "Tarif aktiv bis"-Countdown (Live-Paritaet zur Bestands-Karte). --cta-d statt
   --cta: auf dem warmen Tint braucht der 12px-Text die dunklere Stufe fuer AA. */
.valid-pill{display:inline-block;width:fit-content;margin-top:10px;font-size:12px;font-weight:640;color:var(--cta-d);background:rgba(255,104,0,.10);padding:4px 11px;border-radius:980px}
/* OneNumber-Pille (kostenfreie Zusatzkarten S/M/L). Kuehles Blau + SIM-Icon,
   bewusst neutral gegen save (gruen=Geld) und valid (orange=Dringlichkeit); teilt
   Schriftgroesse/Padding der Pillen-Systematik. Wert abgeleitet aus $onenumber. */
.on-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:640;color:var(--on-ink);background:#fff;border:1px solid var(--on-line);padding:4px 11px 4px 9px;border-radius:980px;white-space:nowrap}
.on-tag svg{width:14px;height:14px;flex:none}
/* Kompakt-Politur: Pillen sammeln sich in EINER umbruchfaehigen Zeile (feste
   Reihenfolge im Template: Ersparnis -> Gueltigkeit -> Netz-Zusatz); die
   Einzel-margins der Pillen werden hier neutralisiert, der Abstand kommt
   einheitlich vom Container. */
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:12px}
.pills>*{margin-top:0}
/* Spalte 2: Leistungen */
.feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.feat li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2);line-height:1.4}
.feat svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:2px}
/* Feinschliff 21.07. (Hebel 1): Anker-Werte (GB/5G/Flat/360°/Multicards) dunkel+fett,
   der Rest bleibt leise — die Bullets sind ueber die Karten fast identisch, nur die
   Werte unterscheiden. Fettung setzt das Blade via $bold() (display-only). */
.feat li b{color:var(--ink);font-weight:640}
/* Spalte 3: Preis (rechtsbuendig). Kompakt-Politur: "effektiv / Monat" steht
   als eigene Zeile UNTER der Zahl (vorher zweizeilig flatternd daneben). */
.price{text-align:right}
.price .reg{font-size:13px;color:var(--ink-3);text-decoration:line-through;display:block}
/* Feinschliff 21.07. (Hebel 3): Streichpreis + Ersparnis-Prozent in EINER Zeile —
   beide Haelften des Preis-Arguments an einem Ort (gruene Pille vorher links unten,
   getrennt vom Streichpreis). Mobile-Spiegelung siehe Media-Block unten. */
.price .regline{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.price .regline .reg{display:inline}
.save-mini{font-size:11.5px;font-weight:680;color:var(--green-strong);background:rgba(30,122,58,.10);padding:2px 8px;border-radius:980px;white-space:nowrap}
.price .eff{margin-top:2px}
.price .eff b{display:block;font-size:29px;font-weight:720;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.price .eff small{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;margin-top:1px}
.price .basis{font-size:12px;color:var(--ink-3);margin-top:3px}
/* Startguthaben-Pille: sitzt als Bonus unter den Leistungen (User-Entscheid 07.07.:
   raus aus dem Preisblock, wo sie mit dem CTA um Aufmerksamkeit konkurrierte).
   --cta-d fuer AA auf dem warmen Tint; getoent ohne Rand (bewusst wie zuvor). */
/* Feinschliff 21.07. (Variante 1, User-Abnahme): Startguthaben gruen statt orange —
   Farbsystem der Karte: Gruen = Geld-Vorteil (save-mini + Startguthaben), Orange =
   Zeitdruck (valid-pill) + CTA, Neutral = Info (net-marker). Vorher trugen Countdown
   und Bonus denselben orangen Tint, obwohl sie Verschiedenes sagen. */
.feat-startgut{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:640;color:var(--green-strong);background:rgba(30,122,58,.10);padding:7px 14px;border-radius:980px}
.feat-startgut svg{width:16px;height:16px;flex:none}
/* Effektivpreis-Herleitung: a11y-Disclosure (Klick/Tap/Tastatur) statt nacktem title= */
.eff-help{position:relative;margin-top:0;display:flex;justify-content:flex-end}
/* min-height 44px = Tap-Target; die Negativ-Margins geben den Ueberstand an das
   Layout zurueck, damit der Button optisch als schmale Unterzeile der Zahl sitzt. */
.eff-info{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;font-weight:560;color:var(--ink-2);background:none;border:0;padding:3px 5px;margin:-11px -5px;min-height:44px;cursor:pointer;border-radius:6px;transition:color .15s}
.eff-info:hover,.eff-info[aria-expanded="true"]{color:var(--cta)}
/* Chevron als getoentes Accent-Badge = klare "aufklappen"-Affordance. Vorher ging
   der 13px-Pfeil in --ink-3 unter (las sich wie die Basis-Bildunterschrift). Das
   Badge waechst nicht ueber die Textzeile hinaus, das Tap-Target bleibt via
   min-height:44px am Button. */
.eff-info svg{width:20px;height:20px;padding:4px;box-sizing:border-box;flex:none;color:var(--cta);background:rgba(194,78,0,.10);border-radius:50%;transition:transform .22s cubic-bezier(.16,1,.3,1),background .15s}
.eff-info:hover svg,.eff-info[aria-expanded="true"] svg{background:rgba(194,78,0,.18)}
.eff-info[aria-expanded="true"] svg{transform:rotate(180deg)}
/* Rechenweg-Panel: klappt ueber die volle Kartenbreite auf (ersetzt das alte
   Tooltip-Popover — das wurde vom overflow:hidden der Karte gekappt und
   ueberdeckte die Preiszahl). Abstand nach oben kommt vom Karten-gap. */
.card-calc{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:4px;text-align:left}
.card-calc[hidden]{display:none}
/* Zweispaltig: Tabelle bleibt lesbar schmal (sonst zu weite Label-Wert-
   Spannung), rechts fuellt die Wort-Erklaerung die Kartenbreite. */
.calc-cols{display:grid;grid-template-columns:minmax(0,560px) minmax(240px,1fr);gap:10px 56px;align-items:start}
.card-calc .calc-tbl{max-width:560px}
.calc-expl{border-left:1px dashed var(--line);padding:14px 0 0 40px;align-self:stretch}
.calc-expl h4{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-3)}
.calc-expl p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-2);max-width:52ch}
/* Schritt-Tabelle des Effektivpreis-Rechenwegs — geteilt zwischen Karten-Panel
   (Startseite) und Buy-Box-Disclosure (Tarifseiten, relaunch-tarif.css). */
.calc-tbl{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px;color:var(--ink-2)}
.calc-tbl li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;border-bottom:1px dashed var(--line)}
.calc-tbl li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink)}
.calc-tbl li.minus span:last-child{color:var(--green-strong)}
.calc-tbl li.result{border-bottom:none;padding-top:10px;font-weight:700}
.calc-tbl li.result span:first-child{color:var(--ink)}
.calc-tbl li.result span:last-child{font-size:17px;color:var(--cta-d)}
.calc-note-in{font-style:normal;color:var(--ink-3)}
.calc-note{margin:8px 0 0;font-size:12.5px;color:var(--ink-3)}
/* Spalte 3: Kauf-Saeule — Preis + CTA gestapelt in EINER Spalte, durch eine
   Trennlinie von den Leistungen abgesetzt (Variante A, User-Abnahme 07.07.).
   Der Button sitzt direkt unter dem Preis statt frei daneben zu schweben. */
.c-buy{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding-left:32px;border-left:1px solid var(--line)}
.c-buy .price{text-align:right}
.c-buy .c-cta{margin-top:14px}
.c-cta .btn{white-space:nowrap}
/* Add-to-Cart als POST-Form: Form selbst soll layout-neutral sein, der Button traegt die Optik. */
.c-cta-form{margin:0;display:flex}
/* Form-Button (Fallback) UND direkter "Tarif ansehen"-Link (Etappe 7) full-width. */
.c-cta-form .btn,.c-cta>.btn{width:100%}
/* Ganze Karte klickbar (Dead-Click-Fix 14.07.): die Karte hebt beim Hover an und
   signalisiert damit Klickbarkeit, reagierte aber nur am CTA-Button -> Klicks auf
   Name/Preis/Pillen liefen ins Leere (Mouseflow: Dead-Clicks auf /). Stretched-Link:
   der einzige echte <a> der Karte deckt per ::after die gesamte .card ab (die hat
   bereits position:relative). Ein einziges Klickziel = a11y-sauber, kein verschachteltes
   Interaktiv-Element. Der Rechenweg-Aufklapper bleibt per z-index eigenstaendig bedienbar. */
.card .c-cta a.card-stretch::after{content:"";position:absolute;inset:0;z-index:1}
/* Tap-Highlight auf der kartengrossen Klickflaeche unterdruecken: der globale
   orange Tint (siehe :root/-webkit-tap-highlight-color) wuerde sonst beim Tippen
   die GANZE Karte aufflashen. Feedback liefert stattdessen der .card:hover-Lift +
   der Button-eigene :hover/:active-Zustand. touch-action:manipulation kommt bereits
   global von 'a,.btn'. */
.card .c-cta a.card-stretch{-webkit-tap-highlight-color:transparent}
/* KEIN :hover-Lift auf der kartengrossen Klickflaeche. Der geerbte
   .btn-primary:hover{transform:translateY(-1px)} macht den <a> zum Containing-
   Block -> das ::after{inset:0} kollabiert von Kartengroesse auf Buttongroesse
   -> Cursor faellt aus der Flaeche -> mouseout -> mouseover -> Loop (Zeiger
   flackert Hand<->Pfeil im Millisekundentakt). Feedback liefert der .card:hover-
   Zustand (box-shadow + border). Normale .btn-primary behalten den Mikro-Lift. */
.card .c-cta a.card-stretch:hover,
.card .c-cta a.card-stretch:active,
.card .c-cta a.card-stretch:focus-visible{transform:none}
.card .eff-info,.card .card-calc{position:relative;z-index:2}

/* B2B-Karte, mitlaufend rechts neben der Tarifliste (28.07., Skizze User).
   Loest das frueher quer unter der Liste liegende .b2b-Band ab: gleicher
   Aufhaenger ("ab 5 Tarife"), gleiches Ziel (#kmini) -- als Band UND Karte waere
   es dieselbe Ansprache zweimal. */

/* Nur diese Sektion laeuft breiter als die uebrige Seite (--maxw 1180px). Die
   Sidebar kostet Kartenbreite, die 100px holen sie zurueck: gemessen 29
   umgebrochene Leistungszeilen, exakt der Stand ohne Sidebar. */
.tarife .wrap{max-width:1280px}
.tf-cols{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;margin-top:26px}
.tf-main{min-width:0}
/* Kein align-items:start am Grid: die Spalte muss die volle Zeilenhoehe behalten,
   sonst schrumpft sie auf Kartenhoehe und sticky hat keinen Weg zum Laufen. */
.tf-side{min-width:0}
.tf-card{position:sticky;top:96px;color:#fff;border-radius:var(--r-2xl);
  padding:24px 22px 22px;overflow:hidden;
  background:radial-gradient(90% 200% at 100% 0%, rgba(255,104,0,.20), rgba(255,104,0,.04) 34%, rgba(255,104,0,0) 60%), var(--ink)}
.tf-card h3{color:#fff;font-size:19px;line-height:1.28;letter-spacing:-.02em;margin:0}
.tf-card p{color:#aeb8c6;font-size:14px;line-height:1.55;margin:9px 0 0}
/* 30.07.: Konfigurator-Mockup ersatzlos raus. In der 280px-Spalte lief das
   560px breite Bild auf ~305px Anzeigebreite (54 Prozent) -- die UI-Texte darin
   fielen unter 10px, das 4,9-Siegel verschwamm, und es kostete 46 Prozent der
   Kartenhoehe fuer null Aussage. An seiner Stelle stehen die drei Fragen, die
   vor dem Klick offen sind: gemessen bei 280px Spalte 712px -> 479px, die Karte
   ist also 233px kuerzer als mit Bild. Alle drei Bausteine sind Bestand: .eyebrow (Ton
   #ff9a52 wie in .proof, ebenfalls auf dunklem Grund), .feat und #cdd4de, die
   Textfarbe auf var(--ink) aus .util. --green haelt 4,98:1 gegen --ink, der
   Haken braucht auf der Karte also keinen eigenen Ton. */
.tf-card .eyebrow{color:#ff9a52;margin-bottom:10px}
.tf-card .feat{margin:16px 0 18px}
.tf-card .feat li{color:#cdd4de}
.tf-cta{display:flex;width:100%;justify-content:center;margin-top:4px}
/* Gleiches Muster wie .hero und .dev-visual: auf dunklem Grund weisser Ring.
   Der Haus-Ring (--cta) kaeme hier nur auf 3,4:1 gegen --ink. */
.tf-card :focus-visible{outline-color:#fff}
/* margin 8 + padding 5 haelt den optischen Abstand bei 13px und bringt die
   Zeile zugleich auf ein volles Fingerziel. */
.tf-tel{display:block;margin-top:8px;padding:5px 0;text-align:center;text-decoration:none;color:#aeb8c6}
.tf-tel span{display:block;font-size:12.5px;letter-spacing:.01em}
/* Nummer als eigene Zeile und nicht umbrechbar: im Fliesstext riss der Umbruch
   sie zwischen "178" und "99" auseinander (gemessen bei 280px Spalte). */
.tf-tel strong{display:block;margin-top:2px;font-size:15px;font-weight:640;color:#fff;white-space:nowrap}
.tf-tel:hover span{color:#fff}
.tf-tel:hover strong{text-decoration:underline}

/* Die Grenze liegt nicht am technischen Minimum, sondern an der Lesbarkeit: die
   Karte passt zwar bis 1101px hinunter (668px Spalten-Minimum), doch auf der
   echten Liste brechen dann 9 von 12 Tarifnamen zweizeilig um -- bei 1200px noch
   3, ab 1256px nur 1, also der Stand ganz ohne Sidebar. Ab 1256px behaelt die
   Karte darum immer mindestens 900px, darunter stapelt sich beides. */
@media (max-width:1255px){
  .tf-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .tf-card{position:static;margin-top:32px;padding:30px 28px}
  /* Seit 30.07. traegt die Karte kein Bild mehr, gestapelt faellt damit nichts
     mehr weg: was neben der Liste steht, steht auch unter ihr. */
  .tf-cta{max-width:320px;margin-left:auto;margin-right:auto}
}

/* .step stammt aus der am 27.07. entfernten Prozess-Sektion und stylt seither nur
   noch die Funnel-Schritte im Konfigurator-Overlay (index.blade.php, .step[data-step]).
   Deshalb bleiben Karten-Rahmen und Typografie stehen; Grid, Nummern-Counter,
   Icon-Kachel und Verbinder-Pfeile sind mit der Sektion weggefallen. */
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px 28px}
.step h3{font-size:17.5px;font-weight:620;letter-spacing:-.02em}
.step p{margin-top:9px;font-size:14.5px;color:var(--ink-2);line-height:1.5}

/* Geräte */
.dev-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.uspx{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.uspx li{display:flex;gap:14px;align-items:flex-start}
.uspx .ic{width:46px;height:46px;border-radius:13px;background:rgba(255,104,0,.08);border:1px solid rgba(255,104,0,.20);color:var(--cta);display:grid;place-items:center;flex:none}
.uspx .ic svg{width:22px;height:22px}
.uspx b{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.uspx span{display:block;font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.dev-visual{border-radius:var(--r-2xl);padding:48px 40px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);
  background:radial-gradient(85% 130% at 0% 0%, rgba(255,104,0,.22), rgba(255,104,0,.05) 36%, rgba(255,104,0,0) 62%), linear-gradient(150deg,#16202e,#22324a)}
/* Card A — iPhone-Buehne (Copy links, Geraet fuellt rechts bis zur Kante) */
.dv-stage{display:flex;align-items:stretch;justify-content:space-between;gap:14px;text-align:left;padding:34px 0 0 38px;min-height:392px}
.dv-copy{display:flex;flex-direction:column;align-items:flex-start;padding:6px 0 34px;z-index:2}
/* Fokus-Ring wie im Hero aufhellen: das CTA sitzt auf dem dunklen Verlauf der
   Buehne, dort erreicht der orange Ring nur 2,70:1 (WCAG 2.2 SC 1.4.11 fordert 3). */
.dev-visual :focus-visible{outline-color:#fff}
.dv-price{margin-top:auto;color:#fff}
.dv-price .dv-from{display:block;font-size:13px;color:#aeb8c6;margin-bottom:2px}
.dv-price strong{font-size:29px;font-weight:740;letter-spacing:-.02em}
/* "ab" und "/Monat" sind Nebenangaben und stehen klein. Nicht nur Typografie:
   die Copy-Spalte ist auf schmalen Geraeten 175,7px breit (das Geraetebild steht
   mit fester Breite daneben und schrumpft nicht), die Zeile brauchte mit grossem
   "ab" 177,9px und brach nach "ab" um. Klein gesetzt braucht sie 160,3px. */
.dv-price strong small,
.dv-price strong .dv-ab{font-size:15px;font-weight:600;color:#aeb8c6}
.dv-cta{margin-top:20px}
.dv-phone{align-self:flex-end;width:auto;height:104%;max-height:430px;object-fit:contain;object-position:bottom right;margin-bottom:-2px;filter:drop-shadow(0 26px 40px rgba(0,0,0,.42));z-index:1}
@media (max-width:820px){
  .dv-stage{padding:26px 0 0 24px;min-height:330px}
  .dv-phone{max-height:340px}
  .uspx{grid-template-columns:1fr}
}

/* Voices — laufende Wand (2 gegenlaeufige Reihen, Randabblendung, Hover pausiert) */
.voices-wall{margin-top:44px;overflow:hidden;touch-action:manipulation;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  display:flex;flex-direction:column;gap:20px}
.voices-row{display:flex;gap:20px;width:max-content;animation:voices-marquee 180s linear infinite;will-change:transform}
.voices-row.rev{animation-direction:reverse}
.voices-wall:hover .voices-row,.voices-row:focus-within{animation-play-state:paused}
@keyframes voices-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.voice-card{flex:0 0 340px;width:340px;box-sizing:border-box;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 22px 24px;margin:0;
  display:flex;flex-direction:column}
.vc-top{display:flex;align-items:center;gap:12px}
.vc-avatar{width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  background:#eef1f4;border:1px solid rgba(0,0,0,.06)}
.vc-id{display:flex;flex-direction:column;min-width:0}
.vc-id b{font-size:14.5px;font-weight:640;color:var(--ink);line-height:1.2}
.vc-id small{font-size:12.5px;color:var(--ink-3);font-weight:460;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-stars{margin:14px 0 0;font-size:14px;letter-spacing:2px}
.vc-stars .on{color:var(--orange)} .vc-stars .off{color:#dfe3e9}
.voice-card blockquote{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--ink);font-weight:460}
/* Manuelles Wischen statt Auto-Lauf: reduzierte Bewegung ODER Touch (kein Hover, grob) —
   Touch kann den Marquee nicht per Hover pausieren, darum dort eine wischbare Einzelzeile. */
@media (prefers-reduced-motion:reduce),(hover:none) and (pointer:coarse){
  .voices-wall{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:none;mask-image:none;scrollbar-width:none}
  .voices-wall::-webkit-scrollbar{display:none}
  .voices-row{animation:none}
  .voices-row.rev{display:none}
  .voices-row .voice-card[aria-hidden="true"]{display:none} /* Klon-Duplikate im Wisch-Modus raus */
  .voice-card{scroll-snap-align:start;flex-basis:min(340px,86vw);width:min(340px,86vw)} /* Karte passt in den Viewport, naechste lugt hervor */
}
.tarife-empty{margin:20px 0;font-size:15px;color:var(--ink-2);line-height:1.6;text-align:center}

/* Tarif-Collapse: initial nur die ersten 3 Tarife, "Mehr"-Button klappt auf.
   Pre-Collapse greift NUR mit .js (Head-Swap) -> kein 12->3-Sprung; ohne JS
   bleiben alle 12 sichtbar und die Mehr-Zone ist ausgeblendet (Bestand).
   relaunch.js uebernimmt danach filter-/sort-bewusst (setzt display inline). */
.js .grid.is-collapsed .card.is-extra{display:none}
.no-js .tarife-more{display:none}
/* Mehr-Zone als breite Ghost-Leiste (Variante B): bewusst KEINE Pille/Button-
   Silhouette, damit sie nicht mit dem orangen "Tarif ansehen"-CTA konkurriert.
   Volle Breite, flach, feine Trennlinie oben = liest als "Sektion aufklappen". */
.tarife-more{position:relative;margin-top:0}
/* Fade zieht sich weich ueber die Unterkante der 3 Karten (bottom:100% = direkt
   ueber der Mehr-Zone). Nur im eingeklappten Zustand; beim Aufklappen weg. */
.tarife-fade{position:absolute;left:0;right:0;bottom:100%;height:112px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(245,245,247,0),rgba(245,245,247,.72) 60%,var(--paper-2))}
.grid.is-open + .tarife-more .tarife-fade{display:none}
.tarife-more-btn{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:none;border:0;border-top:1px solid var(--line);color:var(--ink-2);font:inherit;font-weight:560;font-size:15px;
  padding:16px 12px;cursor:pointer;transition:background .15s,color .15s}
.tarife-more-btn:hover{background:rgba(22,32,46,.03);color:var(--ink)}
.tarife-more-btn:focus-visible{outline:2px solid var(--cta);outline-offset:-2px}
.tarife-more-btn .chev{width:16px;height:16px;transition:transform .25s ease}
.grid.is-open + .tarife-more .tarife-more-btn .chev{transform:rotate(180deg)}

/* FAQ */
.faq-list{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
/* Zwei Spalten als zwei eigene Container statt eines zeilenweise gefuellten Grids:
   im Zeilen-Grid zieht eine aufgeklappte Antwort die Zeilenhoehe der Nachbarspalte
   mit und reisst dort ein Loch. So bleibt jede Spalte fuer sich. */
.faq-cols{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;align-items:start}
.faq-col{border-top:1px solid var(--line)}
/* Eingeklappt: 4 Fragen je Spalte (= 8 sichtbare). Die uebrigen bleiben im DOM,
   nur ausgeblendet (SEO), und das JS nimmt sie zusaetzlich per inert aus der
   Tab-Reihenfolge. Ohne JS sind alle 15 sichtbar und die Mehr-Zone ist weg. */
.js .faq-cols.is-collapsed .faq-item.is-extra{display:none}
.no-js .faq-more{display:none}
/* Mehr-Zone wie bei den Tarifen: flache Ghost-Leiste ueber die volle Breite,
   bewusst keine Button-Pille (konkurriert sonst mit dem orangen CTA). */
.faq-more{max-width:1040px;margin:0 auto}
.faq-more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:none;border:0;border-top:1px solid var(--line);color:var(--ink-2);font:inherit;
  font-weight:560;font-size:15px;padding:16px 12px;min-height:44px;cursor:pointer;
  touch-action:manipulation;transition:background .15s,color .15s}
.faq-more-btn:hover{background:rgba(22,32,46,.03);color:var(--ink)}
.faq-more-btn:active{background:rgba(22,32,46,.06)}
.faq-more-btn:focus-visible{outline:2px solid var(--cta);outline-offset:-2px}
.faq-more-btn .chev{width:16px;height:16px;transition:transform .25s ease}
.faq-cols.is-open + .faq-more .faq-more-btn .chev{transform:rotate(180deg)}
@media (max-width:860px){
  .faq-cols{grid-template-columns:1fr;gap:0}
  /* Gestapelt stossen beide Spalten aufeinander: der border-top der zweiten faellt
     sonst auf den border-bottom des letzten Items der ersten (Doppellinie). */
  .faq-col + .faq-col{border-top:0}
}
.faq-q{width:100%;text-align:left;background:none;border:none;font:inherit;font-size:17.5px;font-weight:560;letter-spacing:-.015em;color:var(--ink);padding:24px 44px 24px 0;cursor:pointer;position:relative;display:block}
.faq-q:hover{color:var(--cta)}
.faq-q .chev{position:absolute;right:4px;top:50%;transform:translateY(-50%);transition:transform .25s ease;color:var(--ink-3);font-size:14px}
.faq-q[aria-expanded="true"] .chev{transform:translateY(-50%) rotate(180deg);color:var(--cta)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a>div{padding:0 44px 26px 0;color:var(--ink-2);font-size:15.5px;line-height:1.62}

/* Editorial — Kopf + Berater-Bild links, Fliesstext rechts.
   Breite wie .faq-cols darueber (1040px), damit beide Sektionen auf derselben
   Kante sitzen. Die schmale linke Spalte haelt die Textspalte bei ~620px und
   damit bei rund 72 Zeichen je Zeile; einspaltig auf 820px waren es 82.
   Kopfspalte und Spalt schrumpfen unterhalb von 1040px mit, sonst quetscht das
   Grid im Tablet-Bereich die Textspalte auf gut 50 Zeichen. */
.editorial .wrap{max-width:1040px;display:grid;
  grid-template-columns:clamp(210px,26vw,300px) 1fr;
  column-gap:clamp(40px,6vw,72px);align-items:start}
.editorial .ed-aside{display:flex;flex-direction:column;gap:30px;min-width:0}
.editorial .ed-body{min-width:0}
.editorial h2{font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.025em;margin:0}
.editorial h3{font-size:1.25rem;margin:30px 0 0;letter-spacing:-.02em}
.editorial p{color:var(--ink-2);font-size:16.5px;line-height:1.68;margin-top:16px}
.editorial .ed-body>p:first-child{margin-top:0}
.editorial strong{color:var(--ink);font-weight:620}
/* Berater-Bild: dekorativ, traegt keine eigene Aussage ohne die zwei Zeilen darunter. */
.editorial .ed-illu{display:flex;flex-direction:column;gap:14px}
.editorial .ed-illu img{width:120px;height:120px;border-radius:50%;border:1px solid var(--line)}
.editorial .ed-illu-titel{color:var(--ink);font-size:15.5px;font-weight:620;line-height:1.4;margin-top:0}
.editorial .ed-illu-zeile{font-size:14.5px;line-height:1.55;margin-top:0}
/* Gestapelt zurueck auf eine Spalte — gleicher Umbruchpunkt wie .faq-cols,
   damit FAQ und Editorial gemeinsam kippen statt nacheinander. */
@media (max-width:860px){
  /* 670 statt der frueheren 820: ergibt 622px Textbreite und damit dieselben
     rund 72 Zeichen je Zeile wie zweispaltig. Bei 820 waren es 82. */
  .editorial .wrap{display:block;max-width:670px}
  .editorial .ed-aside{display:block;margin-bottom:28px}
  /* Gestapelt legt sich das Bild neben seine zwei Zeilen, statt Hoehe zu fressen. */
  .editorial .ed-illu{display:grid;grid-template-columns:84px 1fr;column-gap:16px;row-gap:4px;
    align-items:center;margin-top:24px}
  .editorial .ed-illu img{width:84px;height:84px;grid-row:1/span 2}
  .editorial .ed-illu-titel{align-self:end}
  .editorial .ed-illu-zeile{align-self:start}
}
/* Unter 400px wird die Textspalte neben dem Bild zu eng — dann untereinander. */
@media (max-width:400px){
  .editorial .ed-illu{grid-template-columns:1fr;row-gap:12px}
  .editorial .ed-illu img{grid-row:auto}
}

/* Footer */
/* Zurueck-nach-oben (relaunch-weit, im Layout). Default versteckt (visibility:hidden
   -> nicht fokussierbar/AT-unsichtbar), relaunch.js schaltet .is-visible nach Scroll. */
.to-top{position:fixed;z-index:60;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));
  width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--ink);box-shadow:var(--shadow-md);cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,color .15s ease,border-color .15s ease}
.to-top svg{width:22px;height:22px}
.to-top:hover{color:var(--cta);border-color:var(--cta)}
.to-top:active{transform:translateY(0) scale(.94)}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.to-top{transition:opacity .2s ease,visibility .2s}}
/* Konfigurator-Overlay aktiv (mobil): Back-to-Top-FAB ausblenden, damit er nicht
   ueber dem "Weiter"-Button im Funnel-Footer klebt (FAB z-index 60 > Backdrop 50).
   #ovBackdrop wird per JS ans Body-Ende portaliert, steht im DOM also HINTER .to-top —
   darum :has() am body statt eines Geschwister-Selektors. */
@media (max-width:680px){
  body:has(#ovBackdrop.open) .to-top{display:none}
}
.footer{background:var(--ink);color:#9aa4b2;padding:64px 0 36px;font-size:14.5px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.10)}
/* Footer-Wortmarke: Logo + Name in einer Zeile (wie Header .brand), Abstand zum
   Beschreibungstext an der Zeile statt am Logo. Name auf dunkler Buehne weiss. */
.foot-brandline{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.foot-brand .brand-name{color:#fff}
.foot-brand .brand-name small{color:#9aa4b2}
.foot-brand p{color:#7b8696;max-width:34ch;line-height:1.6;font-size:14px}
/* Kontakt-Anker: die Telefonnummer (staerkster B2B-Trust-Anker) sichtbar in der
   Marken-Spalte statt versteckt in einer duennen Link-Spalte. Tap-to-call. */
.foot-contact{display:inline-flex;align-items:center;gap:11px;margin-top:20px;color:#c9d2de;padding:11px 15px;border:1px solid rgba(255,255,255,.14);border-radius:12px;transition:border-color .15s,color .15s}
.foot-contact:hover{border-color:rgba(255,104,0,.55);color:#fff}
.foot-contact svg{color:var(--orange);flex:none}
.foot-contact span{display:flex;flex-direction:column;line-height:1.25}
.foot-contact small{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#7b8696}
.foot-contact strong{font-size:16px;font-weight:600;color:#fff;letter-spacing:.01em}
.footer h4{color:#fff;font-size:14px;font-weight:600;letter-spacing:.01em;margin:0 0 16px}
.footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:#9aa4b2;transition:color .15s}
.footer ul a:hover{color:#fff}
/* Bekannt-aus-Logos (Live-Paritaet): ohne Chip direkt auf dem dunklen Footer.
   Die Assets sind fuer helle Hintergruende gezeichnet (dunkle Schrift, Alpha ja)
   -> als weisse Monochrom-Silhouette (brightness 0 + invert), leicht gedimmt,
   damit sie sich dem gedaempften Footer-Grau unterordnen. */
.foot-known{display:flex;align-items:center;gap:30px;flex-wrap:wrap;padding:22px 0 4px}
/* 29.07.: #6b7585 kam auf dem Footer-Grund #16202e nur auf 3,52:1. 11px versalien
   mit Sperrung sind der schwerste Lesefall auf der Seite -> #858f9f (4,97:1). */
.foot-known .fk-lbl{color:#858f9f;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.foot-known .fk-logo{display:inline-grid;place-items:center}
/* Logos deutlich kleiner (18px statt 26px) + Breite je Logo optisch gedeckelt,
   damit das breite "Telecom Handel" die Zeile nicht mehr dominiert. Gedimmt,
   Hover hebt ein einzelnes Logo hervor. */
.foot-known .fk-logo img{display:block;height:18px;width:auto;max-width:118px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);opacity:.55;transition:opacity .15s}
.foot-known:hover .fk-logo img{opacity:.4}
.foot-known .fk-logo img:hover{opacity:.85}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:26px;color:#8b95a6;font-size:13px;flex-wrap:wrap}
/* Die Rechtslink-Reihe hat den Umbruch bisher NICHT geerbt: .foot-bottom hat
   flex-wrap, das darin liegende .foot-legal aber nicht — dadurch stand die Reihe
   als 325px-Block und schob die ganze Seite auf. Gemessen 28.07. auf der Live-
   Startseite: 69px horizontaler Seiten-Scroll bei 280px, 29px bei 320px (325 + 24
   Rand - Viewport). Umbruch gilt jetzt dauerhaft, nicht nur unter einer Schwelle:
   die Reihe waechst mit jedem neuen Rechtslink weiter. */
.foot-legal{display:flex;align-items:center;flex-wrap:wrap;column-gap:10px;row-gap:6px}
/* Ein Rechtsziel bricht als Ganzes um oder gar nicht. Ohne das staucht Flex das
   breiteste Kind, statt die Reihe umbrechen zu lassen: bei 390px war der Cookie-
   Schalter im Ist-Zustand auf 98,9px gequetscht und 50px hoch, weil "Cookie-
   Einstellungen" intern am Bindestrich zerriss (gemessen 28.07.). Das laengste
   Ziel misst 131px und passt damit auch in die schmalste Zeile (232px bei 280px). */
.foot-legal a,.foot-legal .foot-cc{white-space:nowrap}
.foot-legal a{color:#9aa4b2;transition:color .15s;padding:4px 0}
.foot-legal a:hover{color:#fff}
/* Unter 400px faellt der Trenner weg. Als eigenes Flex-Kind bricht er sonst mit
   und landet als fuehrender oder haengender Punkt in der Zeile; der groessere
   Spalten-Abstand traegt die Trennung dann allein. Die Reihe bleibt dabei
   zweizeilig — sie braucht 344,8px bei 342 verfuegbaren, und drei Pixel gegen die
   Schriftmetrik zu feilen haelt nur bis zur naechsten Textaenderung. Zwei ruhige
   Zeilen sind besser als ein zerrissenes Wort. */
@media (max-width:400px){
  .foot-legal{column-gap:14px}
  .foot-legal span[aria-hidden="true"]{display:none}
}

/* Reveal — Scroll-Fade auf Wunsch (Daniel/User 08.07.) deaktiviert: Sektionen
   sind statisch sichtbar. Klasse + IntersectionObserver bleiben im Markup, sind
   aber wirkungslos; so ist die Seite fail-safe (kein unsichtbarer Block, falls
   der Observer nicht feuert). Reaktivieren = die zwei alten Regeln zuruecksetzen. */
.reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .live-dot,.calc{animation:none}
  .faq-a,.chev,.btn,.tarife-more-btn,.faq-more-btn,.card,.cart-btn,.eff-info svg{transition:none}
  .cart-panel{transition:none}
  .cart-panel:not([hidden]){transform:none}
  *{scroll-behavior:auto}
}
/* scroll-behavior bewusst NICHT hier: ein `html{...smooth}` an dieser Stelle
   schlaegt den Reduced-Motion-Block oben (gleiche Spezifitaet, spaeter notiert)
   und animierte weiterhin -- gemessen an PDP und Startseite. Darum umgekehrt
   gegatet: smooth nur, wenn ausdruecklich keine Reduktion gewuenscht ist. */
html{scroll-padding-top:80px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ============ Responsive ============ */
@media (max-width:1000px){
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:44px;padding-top:54px;padding-bottom:60px}
  .hero .lead{max-width:46ch}
  /* Einspaltig deckt der links-lastige Verlauf nicht mehr — flaechiger abdunkeln */
  .hero::before{background:linear-gradient(180deg,rgba(178,68,0,.42) 0%,rgba(178,68,0,.18) 60%,rgba(178,68,0,.08) 100%)}
  .advisor{max-width:480px}
  .proof .wrap{grid-template-columns:minmax(0,1fr);gap:34px}
  .dev-grid{grid-template-columns:minmax(0,1fr);gap:34px}
}
/* Spec-Rows kollabieren zu gestapelten Blöcken */
@media (max-width:980px){
  .card{grid-template-columns:minmax(0,1fr);gap:18px;padding:26px;align-items:stretch}
  .calc-cols{grid-template-columns:minmax(0,1fr)}
  .calc-expl{border-left:none;border-top:1px dashed var(--line);padding:14px 0 0;margin-top:14px}
  /* Kauf-Saeule kollabiert: Trennlinie wandert von links nach oben, Preis linksbuendig.
     .c-buy .price (Spezifitaet 2) muss gespiegelt werden, sonst schlaegt die Desktop-
     Regel `.c-buy .price{text-align:right}` das kuerzere `.price` und nur der
     effektiv/Monat-Button (eff-help, s.u.) rutscht links -> Zahlen rechts, Label links. */
  .c-buy{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:16px}
  .c-buy .price{text-align:left}
  /* Hebel 3 gespiegelt: regline folgt der linksbuendigen Mobil-Preisspalte
     (gleiches Spezifitaets-Muster wie .c-buy .price oben). */
  .c-buy .price .regline{justify-content:flex-start}
  .eff-help{justify-content:flex-start}
  .c-buy .c-cta{margin-top:12px}
  .c-cta{display:flex}
  .c-cta-form{flex:1}
  .c-cta .btn{flex:1;justify-content:center}
}
@media (max-width:680px){
  body{font-size:16px}
  .mainnav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
  .mainnav.open{display:flex}
  .mainnav a{padding:14px 24px}
  /* Header-Verdichtung Mobile: Wortmarke einzeilig halten + Menü als Icon-Button,
     damit Brand + Menü + Warenkorb in die 64px-Zeile passen (vorher 3-zeiliger
     Umbruch der Wortmarke, gemessen brand-name h:59 ≈ 3,4 Zeilen). */
  .masthead .wrap{gap:12px}
  .brand{gap:10px}
  .brand-mark{width:34px;height:34px}
  .brand-name{white-space:nowrap;font-size:15.5px}
  .brand-name small{font-size:11px}
  .mast-actions{gap:8px}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:44px;padding:0}
  .navtoggle svg{width:22px;height:22px}
  .cart-btn span.lbl{display:none}
  /* Topbar mobil: die Marke steht direkt darunter im Masthead (Logo + "Mobilfunk
     Börse") — in der Leiste NICHT wiederholen. Stattdessen der wertvollste Mobil-
     Inhalt: Tap-to-Call-Nummer links + Live-Support rechts. util-left entfaellt. */
  .util-left{display:none}
  .util-right{flex:1;justify-content:space-between}
  .hide-sm,.util .hide-sm{display:none}
  .facts,.uspx,.hero .facts{grid-template-columns:minmax(0,1fr)}
  /* Die "ab 5 Tarife"-Ansprache traegt hier die .tf-card; sie stapelt sich schon
     ab 1255px unter die Liste und braucht keinen zweiten Mobil-Override. */
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
  /* Marken-Spalte (inkl. Kontakt-Block) volle Breite, Tarife+Unternehmen darunter nebeneinander. */
  .foot-brand{grid-column:1 / -1}
  .section{padding:64px 0}
  /* Synapsen-Netz nur Desktop: JS startet die Schleife auf dem Phone gar nicht
     erst; dieser CSS-Riegel verhindert zusaetzlich ein Aufblitzen vor JS-Init. */
  .hero .synapse{display:none}
  /* Filter mobil (Variante B): die grosse weisse Pille wird auf dem Phone
     aufgeloest. Netz-Chips laufen in EINER horizontal scrollbaren Reihe
     (.filter-nets) — der letzte Chip lugt hervor und signalisiert das Scrollen;
     Sortieren sitzt als eigene, zentrierte Pille darunter. Ersetzt den frueheren
     Mehrzeilen-Wrap, der als zu klobig empfunden wurde (User 08.07.). */
  .filterbar{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;background:none;border:none;box-shadow:none;padding:0;border-radius:0;margin:0 auto 28px}
  .filter-nets{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;max-width:100%;background:#fff;border:1px solid var(--line);border-radius:980px;padding:5px;box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filter-nets::-webkit-scrollbar{display:none}
  .filter{flex:0 0 auto;white-space:nowrap;min-height:44px;font-size:14px;padding:9px 15px}
  .sort-inpill{border-left:none;margin:0;padding:0}
  .sort-trigger{min-height:44px;border:1px solid var(--line);background:#fff;border-radius:980px;box-shadow:var(--shadow-sm)}
  .sort-menu{right:auto;left:50%;transform:translateX(-50%);min-width:min(252px,86vw)}
  /* Beweis-Band Mobile: das Rechenweg-Panel hat auf dem Phone nur ~250px
     Innenbreite — Werte wie "42,00 € / Monat" duerfen nicht mitten im Betrag
     umbrechen. Der Wert bleibt einzeilig und rechts gepinnt, stattdessen darf
     das Label umbrechen. Weniger Panel-Padding schafft zusaetzliche Breite. */
  .proof .calc{padding:22px 20px}
  .calc-row{gap:12px}
  .calc-row .k{min-width:0}
  .calc-row .v{white-space:nowrap;text-align:right}
  /* CTA-Paar gestapelt statt langer Primary-Button + kleiner Ghost-Pille daneben. */
  .proof-cta{flex-direction:column;align-items:stretch}
  .proof-cta .btn{width:100%}
  /* Panel-Kopf: "75 GB · Vodafone" einzeilig halten, stattdessen darf der lange
     Tarifname umbrechen. */
  .calc-h b{min-width:0}
  .calc-h span{white-space:nowrap;flex:none}
  /* "Bekannt aus"-Logoleiste auf dem Phone: Label auf eine eigene zentrierte
     Zeile, darunter die 4 Logos als eine ruhige, zentriert umbrechende Reihe.
     Weil die Logos jetzt klein (16px) sind, passen zwei sauber pro Zeile -> kein
     ragged 1+2+1 mehr, kein starres 2x2-Raster noetig. */
  .foot-known{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px;padding:22px 0 4px}
  .foot-known .fk-lbl{flex-basis:100%;text-align:center;margin-bottom:2px}
  .foot-known .fk-logo{width:auto}
  .foot-known .fk-logo img{height:16px;max-width:96px}
}

/* ===== Cookie-Banner (OrestBida CookieConsent v3) =====
   Brand-Anpassung ueber die offiziellen CSS-Variablen der Library; der Rest
   (Layout, Fokus-Trap, a11y) kommt aus /assets/cookieconsent/cookieconsent.css. */
#cc-main{
  --cc-font-family:inherit;
  --cc-modal-border-radius:16px;
  --cc-btn-border-radius:10px;
  --cc-primary-color:#1f1f2e;
  --cc-secondary-color:#5b616e;
  --cc-btn-primary-bg:#C24E00;
  --cc-btn-primary-border-color:#C24E00;
  --cc-btn-primary-hover-bg:#A04000;
  --cc-btn-primary-hover-border-color:#A04000;
  --cc-toggle-on-bg:#C24E00;
  --cc-footer-bg:#f7f4f0;
}
/* Footer-Trigger im Stil der uebrigen Rechts-Links (Button aus a11y-Gruenden:
   loest eine Aktion aus, navigiert nicht) */
.foot-cc{background:none;border:0;cursor:pointer;font:inherit;color:#9aa4b2;transition:color .15s;padding:4px 0}
.foot-cc:hover{color:#fff}

/* Hero-Fakten auf sehr schmalen Phones (≤360px, alte kleine Androids) eine Spur
   kleiner. Urspruenglich noetig, damit der lange Punkt "Antwort innerhalb von 24
   Stunden" einzeilig blieb; seit dem Text-Tausch 25.07. ist der laengste Punkt
   "Drei Netze im Vergleich" (172px bei 15,5px gegen 272px Kastenbreite bei 320px)
   und der Schritt waere entbehrlich. Bewusst belassen, bis der Text steht —
   Aenderung waere ein eigener Lesbarkeits-Edit, kein Teil des Text-Tauschs. */
@media (max-width:360px){
  .hero .facts li{font-size:13.5px}
}

/* Kopfzeile auf sehr schmalen Geraeten (aufgeklapptes Fold, alte Kleinstphones):
   ab hier fehlt der Zeile schlicht der Platz. Gemessen 28.07. bei 280px — 232px
   stehen zur Verfuegung, gebraucht werden 279 (Marke 162 + 12 Abstand + Aktionen
   105), die Aktionen ragen 23px heraus. Verkleinern reicht nicht: Menue- und
   Warenkorb-Schalter duerfen die 44px Touch-Mass nicht unterschreiten, und
   Schriftgroesse plus Rand geben zusammen nur rund 30px her.
   Darum traegt unter 320px das Zeichen die Marke allein. Der Name geht dabei
   nicht verloren — der Link fuehrt ihn im aria-label ("Mobilfunk Börse
   Startseite"), Screenreader lesen weiter die Marke, nicht "Link". */
@media (max-width:319px){
  .brand-name{display:none}
}

/* ============================================================
   Berater-Chip (KI + persoenlicher Experte) — GETEILTE Bausteine
   Genutzt vom Partial partials/advisor-box.blade.php in zwei Kontexten:
   Tarif-Endschritt (#ovBackdrop .fn-advisor) + Hardware-Endschritt
   (#hwOvBackdrop .fn-advisor). (Aus dem Hero-Mini 17.07. entfernt, Variante A.)
   Das Wrapper-Layout (Flex/Grid, Avatar-Kreis, Pillen-Fuellung) bleibt in
   konfigurator.css / hardware-konfigurator.css. Hier NUR die neuen Teile,
   damit sie in beiden Kontexten identisch aussehen. Reihenfolge im
   Chip: Avatar | Text (Neu-Pille, Headline, Subline) | Kontakt (Tel, Pille).
   ============================================================ */
.k-avatar svg{width:23px;height:23px;color:#7a3900;position:relative;z-index:1}
/* Textspalte: min-width:0 laesst Text im Flex/Grid ueberhaupt umbrechen; overflow-wrap
   faengt ueberlange deutsche Komposita ab (bricht NUR zwischen/an ueberlangen Woertern
   — kein word-break, das sonst Nummern/atomare Labels mitten im Zeichen zerreisst). */
.k-txt{min-width:0;overflow-wrap:break-word}
.k-txt .subline{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.k-contact{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.k-phone{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:740;
  color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap;
  line-height:1;touch-action:manipulation}
.k-phone svg{width:15px;height:15px;color:var(--cta);flex:none}
.k-phone:hover{color:var(--cta)}
.k-phone:active{color:var(--cta-d)}
.k-phone:focus-visible{outline:2px solid var(--cta);outline-offset:3px;border-radius:6px}
/* Antwortzeit: leise Bildunterschrift unter der Nummer statt zweiter Pille — ein
   Kontaktpunkt, ein Akzent. Gruen bleibt allein dem Online-Punkt am Avatar. */
.k-resp{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;
  color:var(--ink-2);line-height:1.2;white-space:nowrap}
.k-resp svg{width:12px;height:12px;color:var(--green);flex:none}