/* =====================================================================
   Konfigurator (Relaunch-Layer) — Hero-Mini + Overlay-Funnel.
   Ersetzt den statischen Ansprechpartner-Block im Hero durch den
   nativen Spar-Konfigurator. Additiv, non-destruktiv.

   Tokens stammen aus relaunch.css (dort geladen); hier nur die im
   Original-Konfigurator (lite.css) genutzten Timing-Tokens ergaenzt.
   Alle Klassen sind unter .kmini bzw. #ovBackdrop gescoped, damit sie
   NICHT mit bestehenden relaunch.css-Klassen (.step/.badge/.reveal ...)
   kollidieren.
   ===================================================================== */

:root{
  /* Timing-Tokens 1:1 aus lite.css (Original-Konfigurator) */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-press:110ms; --dur:180ms; --dur-reveal:420ms;
}

/* ---- HERO-MINI-KONFIGURATOR (ersetzt <aside class="advisor">) ---- */
.kmini{background:#fff;border-radius:var(--r-2xl);box-shadow:var(--shadow-lg);
  padding:28px;position:relative}
/* "Hier starten"-Geste: der Hero-Primaer "Kostenlos beraten lassen" ist auf Desktop
   ein toter Anker (Karte schon sichtbar). Statt ins Leere zu springen, lenkt der Klick
   den Blick per zwei kontrollierten Pulsen auf die Karte, dann stoppt es. Kein Dauer-Loop.
   Compositor-freundlich (Web-Interface-Guideline): animiert werden NUR transform+opacity.
   Der Halo ist ein eigener ::after-Ring mit statischem box-shadow, der nach aussen auf die
   orange Buehne skaliert und ausblendet; die Karte hebt zusaetzlich minimal an. */
.kmini::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.85);opacity:0}
.kmini.is-cueing{animation:kminiLift .8s ease-out 2}
.kmini.is-cueing::after{animation:kminiHalo .8s ease-out 2}
@keyframes kminiLift{0%,100%{transform:scale(1)} 35%{transform:scale(1.015)}}
@keyframes kminiHalo{
  0%  {opacity:.85; transform:scale(1)}
  70% {opacity:0;   transform:scale(1.045)}
  100%{opacity:0;   transform:scale(1.045)}
}
@media (prefers-reduced-motion:reduce){
  .kmini.is-cueing,.kmini.is-cueing::after{animation:none}
}
.kmini::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1px;background:linear-gradient(135deg,var(--orange),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.kmini-eyebrow{font-size:12.5px;font-weight:680;letter-spacing:.03em;color:var(--cta);
  text-transform:uppercase;display:flex;align-items:center;gap:7px}
.kmini-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.kmini h2{font-size:22px;line-height:1.2;letter-spacing:-.02em;margin:12px 0 0;font-weight:720}
/* text-wrap:pretty verhindert Hurenkinder — seit 27.07. ist der Untertitel auch
   mobil sichtbar, und bei 280-320px bleibt sonst leicht ein Wort allein stehen.
   Gleiche Konvention wie relaunch-checkout.css und relaunch-cart.css. */
.kmini p{font-size:14.5px;color:var(--ink-2);margin:8px 0 0;text-wrap:pretty}

/* Erster Schritt als Hook direkt in der Karte (Wert wird ins Overlay vorbefuellt) */
/* Slider-Zone: leise graue Fuellung als "hier anfassen"-Signal, aber OHNE Rahmen
   (17.07. Variante B): Fill + Rahmen zusammen waren ein Box-in-Box auf der weissen
   Karte und das nach dem Declutter schwerste Element im Hero. Ein Signal reicht;
   der Fill bleibt, die harte Umrandung faellt weg. */
.kmini-q{margin-top:20px;background:var(--paper-2);
  border-radius:var(--r-lg);padding:16px 16px 18px}
.kmini-q label{font-size:14px;font-weight:620;display:flex;justify-content:space-between;
  align-items:baseline}
.kmini-q .val{font-size:20px;font-weight:740;color:var(--cta);font-variant-numeric:tabular-nums}
/* Slider senioren-/touch-tauglich (Hero-Mini + alle Overlay-Schritte, Paritaet):
   30px-Thumb + 44px hohe Greif-Zone (WCAG 2.5.5), dickerer Track, kein Tap-Delay,
   :active-Rueckmeldung, Fokus-Ring. Overlay-Regel (frueher accent-color) ersetzt. */
.kmini-q input[type=range],
#ovBackdrop .step input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  margin-top:8px;background:transparent;cursor:pointer;touch-action:manipulation}
.kmini-q input[type=range]::-webkit-slider-runnable-track,
#ovBackdrop .step input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:999px;
  background:var(--line)}
.kmini-q input[type=range]::-moz-range-track,
#ovBackdrop .step input[type=range]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
.kmini-q input[type=range]::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:30px;height:30px;margin-top:-11px;border-radius:50%;background:var(--cta);
  border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.kmini-q input[type=range]::-moz-range-thumb,
#ovBackdrop .step input[type=range]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;
  background:var(--cta);border:3px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.28)}
.kmini-q input[type=range]:active::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]:active::-webkit-slider-thumb{width:34px;height:34px;margin-top:-13px}
.kmini-q input[type=range]:active::-moz-range-thumb,
#ovBackdrop .step input[type=range]:active::-moz-range-thumb{width:34px;height:34px}
.kmini-q input[type=range]:focus-visible,
#ovBackdrop .step input[type=range]:focus-visible{outline:none}
.kmini-q input[type=range]:focus-visible::-webkit-slider-thumb,
#ovBackdrop .step input[type=range]:focus-visible::-webkit-slider-thumb{outline:3px solid var(--cta);
  outline-offset:2px}
.kmini-q input[type=range]:focus-visible::-moz-range-thumb,
#ovBackdrop .step input[type=range]:focus-visible::-moz-range-thumb{outline:3px solid var(--cta);
  outline-offset:2px}
.kmini-q .rng-legend{display:flex;justify-content:space-between;font-size:12px;
  color:var(--ink-3);margin-top:5px}
.kmini-cta{margin-top:18px}
.kmini-cta .btn{width:100%}
/* Die kmini-Karte liegt im Hero, wo .hero .btn-primary den Button WEISS faerbt
   (weiss-auf-orange). In der weissen Karte wuerde er dadurch verschwinden —
   deshalb hier per ID zurueck auf den gefuellten CTA (#C24E00, WCAG AA). */
#kminiStart.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)}
#kminiStart.btn-primary:hover{background:var(--cta-d);
  box-shadow:0 2px 2px rgba(168,67,0,.4),0 12px 28px rgba(194,78,0,.34)}

/* Kopfzeile: Eyebrow-Pille + Sterne-Beweis in einer Reihe (Variante A 17.07.).
   flex-wrap: wo der Platz nicht reicht (schmale Phones), rutscht die Sterne-Leiste
   sauber unter die Pille — nie wortintern gebrochen. */
.kmini-headrow{display:flex;align-items:center;justify-content:space-between;
  gap:6px 14px;flex-wrap:wrap}
.kmini-headrow .kmini-trust{margin-top:0}
.kmini .k-avatar,#ovBackdrop .k-avatar{width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#ffd8b0,#ff9d4d);display:grid;place-items:center;
  color:#7a3900;flex:none;font-weight:700;font-size:16px;position:relative;overflow:visible}
.kmini .k-avatar img,#ovBackdrop .k-avatar img{position:absolute;inset:0;width:100%;height:100%;
  border-radius:50%;object-fit:cover;display:block}
.kmini .k-avatar .on,#ovBackdrop .k-avatar .on{position:absolute;right:-1px;bottom:-1px;
  width:12px;height:12px;border-radius:50%;background:var(--green);border:2px solid #fff}
.kmini .k-txt b,#ovBackdrop .k-txt b{font-size:14px;display:block;letter-spacing:-.01em}
.kmini .k-txt .subline,#ovBackdrop .k-txt .subline{font-size:12.5px;color:var(--ink-2)}

/* Berater-Zeile im Hero-Rechner — Wiedereinzug 25.07. auf User-Direktive.
   Basis ist der bis 17.07. genutzte Stand (git 7f6afbc^), das Badge neu als
   gruene Pille mit der KI-Bedarfsnummer (config mfb.ai_intake). Seit 27.07. auf
   ALLEN Breiten sichtbar; schmal wird sie gestapelt statt versteckt (siehe unten). */
.kmini-advisor{display:flex;align-items:center;gap:11px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line)}
.kmini-advisor .k-txt{flex:1;min-width:0}
.kmini-advisor .k-txt b{font-size:15px;line-height:1.3}
.kmini-ai{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:7px 15px;border-radius:999px;background:#eaf7ee;border:1px solid #bfe6cb;
  color:#15693a;font-size:13.5px;font-weight:700;text-decoration:none;white-space:nowrap;
  min-height:44px;box-sizing:border-box;transition:background .15s ease}
/* Zwei Zeilen in der Pille (27.07., Variante B): Erreichbarkeit leise oben,
   Nummer gross darunter. Zwei getrennte Groessen und Gewichte trennen, was vorher
   als eine Ziffernkette gelesen wurde. tabular-nums haelt die Zifferngruppen
   stehen, sonst wandert die Nummer je nach Ziffer. Die Pille wird dadurch 47px
   hoch statt 44 — Touch-Mass bleibt damit uebererfuellt. */
.kmini-ai-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
/* Die Label-Farbe muss auf ALLEN drei Flaechen der Pille reichen, nicht nur auf der
   Ruhefarbe: bei 11px gilt WCAG AA mit 4,5:1, und Hover/Active dunkeln ab. #4a8f68
   kam auf 3,51:1, #3d7a55 hielt nur die Ruhefarbe (4,63) und fiel auf Hover (4,37)
   und Active (4,02) durch. #36704a haelt alle drei: 5,33 / 5,03 / 4,63. Die leisere
   Wirkung traegt darum Groesse und Gewicht, nicht die Farbe. */
.kmini-ai-lbl{font-size:11px;font-weight:600;letter-spacing:.03em;color:#36704a}
.kmini-ai-num{font-size:15px;font-weight:760;font-variant-numeric:tabular-nums;margin-top:1px}
/* Der globale orange Tap-Tint (relaunch.css) wuerde sich auf die gruene Pille
   legen — seit 27.07. wird sie mobil erstmals angetippt. Ohne eigenen Tint braucht
   der Finger dann eine andere Rueckmeldung: :active liefert sie, touch-action
   nimmt die 300ms Doppeltipp-Wartezeit vor dem Waehlen. */
.kmini-ai{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kmini-ai svg{width:14px;height:14px;flex:none}
.kmini-ai:hover{background:#dff2e6}
.kmini-ai:active{background:#cfebd9}
.kmini-ai:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* Gestapelt, wo die Karte schmal wird — zwei Fenster, eine Ursache:
   1001-1199px: der Hero ist hier noch ZWEIspaltig (relaunch.css schaltet ihn erst
   ab 1000px einspaltig), die Rechner-Karte wird dadurch schmal.
   <=680px: einspaltig, aber die Viewport-Breite selbst ist klein.
   Beide Male quetscht die nowrap-Pille die Subline auf Zeichenbreite — gemessen
   1024px: 205px hohe Zeile; 360px sogar 1318px (Text bricht wortintern um).
   Darum Avatar + Text oben, Pille eigene Zeile: danach 130px, kein Overflow,
   und die Hoehe haengt nicht mehr an der Breite (360px und 390px identisch). */
@media (min-width:1001px) and (max-width:1199px), (max-width:680px){
  .kmini-advisor{display:grid;grid-template-columns:44px minmax(0,1fr);
    column-gap:11px;row-gap:10px;align-items:center}
  .kmini-advisor .k-txt{grid-column:2;grid-row:1}
  .kmini-ai{grid-column:1/-1;width:100%}
}

/* Trust — Werte 1:1 aus dem Original-Konfigurator (KonfiguratorShortcode),
   vom Betreiber belegt. Sterne-Leiste am Kopf, Micro/Bekannt-aus am Fuss. */
.kmini-trust{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:13px}
.kmini-stars{color:#f5a623;letter-spacing:1.5px;font-size:14px;line-height:1}
.kmini-rating{font-weight:740;color:var(--ink);font-variant-numeric:tabular-nums}
.kmini-trust-meta{color:var(--ink-3)}
.kmini-foottrust{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px}
/* Fuss-Trust (DSGVO/unverbindlich/keine Abos): jede Zusage ist eine ATOMARE
   Einheit (white-space:nowrap) — Icon+Text reissen nie, "DSGVO-konform" bricht
   nie wortintern. Passen alle drei nebeneinander -> eine zentrierte Reihe; wird
   die Karte zu schmal, brechen GANZE Zusagen sauber um (2+1 / gestapelt), statt
   dass Woerter zerfetzen. Ersetzt den fragilen nowrap+vw-clamp-Ansatz (2 Patches,
   User 12.07. IMG_1791 + Android-Recording 13.07.): der scheiterte, weil clamp
   an der VIEWPORT-Breite haengt, die begrenzende Breite aber die KARTE ist
   (Buy-Box-Spalte, schmaler als der Viewport — erst recht mit Display-Zoom). */
.kmini-micro{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:7px 16px;font-size:12.5px;color:var(--ink-2);font-weight:560}
.kmini-micro span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.kmini-ico{width:14px;height:14px;color:var(--green);flex:none}
/* Container-Query: Schrift richtet sich an der ECHTEN Kartenbreite aus, nicht am
   Viewport — genau die Achse, an der der alte clamp vorbeigemessen hat. Progressiv
   (@supports), Fallback ist das saubere Umbrechen oben. */
@supports (container-type:inline-size){
  .kmini-foottrust{container-type:inline-size}
  @container (max-width:290px){
    .kmini-micro{font-size:11.5px;gap:6px 12px}
  }
}
/* "Bekannt aus": Bildmarken statt Schriftzug (26.07.). Label ueber der Reihe, damit
   die drei Logos eine eigene Zeile bekommen und nicht mit dem Label um Platz ringen. */
.kmini-press{display:flex;flex-direction:column;align-items:center;gap:8px}
.kmini-press-label{text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  font-size:10px;color:var(--ink-3);flex:none}
.kmini-press-logos{display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap}
/* Monochrom ist Absicht und teils Notwendigkeit: die Leiste ist Beleg, nicht
   Blickfang, und darf dem CTA direkt darueber nicht die Aufmerksamkeit nehmen.
   brightness(0) faerbt jedes Pixel schwarz und laesst Alpha stehen — das ist das
   Gegenstueck zum brightness(0) invert(1) des dunklen Footers. Ohne den Filter
   waere Initiative Mittelstand unsichtbar, die Datei ist die weisse Fassung.
   Bewusst OHNE :hover, anders als im Footer: die Logos sind weder Link noch
   Button, und eine Hover-Reaktion direkt neben dem CTA verspricht eine
   Klickbarkeit, die es nicht gibt (Design-Audit 26.07.). Ohne Hover entfaellt
   auch die Transition und damit der prefers-reduced-motion-Zweig. */
.kmini-press-logos img{display:block;width:auto;filter:brightness(0);opacity:.45}
/* Hoehen optisch ausgeglichen, nicht gleich: ein flaches breites Logo (Telecom
   Handel 300x44) wirkt bei gleicher Pixelhoehe groesser als ein kompaktes
   (Initiative Mittelstand 300x74). */
.kmini-press-logos .kp-verivox{height:16px}
.kmini-press-logos .kp-th{height:14px}
.kmini-press-logos .kp-im{height:18px}
/* Mobil (<=560px): nur noch die Fuss-Deko weicht dem fruehen Tarif-Zugriff
   (Check24-/Verivox-Muster, Entscheid User 14.07.). DSGVO/keine-Abos und die
   "Bekannt aus"-Logos stehen unterhalb des CTA, werden vor der Entscheidung also
   nicht gelesen, und wiederholen sich 1:1 im Overlay-Funnel -> keine Info und
   keine SEO-Keywords gehen verloren.
   Untertitel und Berater-Zeile sind am 27.07. zurueckgeholt (Entscheid User nach
   gerendertem Variantenvergleich): der Untertitel erklaert in einem Satz, was die
   Karte tut, und Nicole + die klickbare 24/7-Nummer sind mobil der naheliegendste
   Kanal ueberhaupt. Gemessene Kartenhoehe danach 621px (vorher 419px), an 360px
   und 390px gleich; der CTA bleibt an derselben Stelle, weil er VOR beiden
   Bloecken steht — es waechst nur, was unter ihm haengt. */
@media(max-width:560px){
  .kmini-foottrust{display:none}   /* DSGVO/keine-Abos + "Bekannt aus" (Deko) */
}

/* ---- OVERLAY-FUNNEL ---- */
.ov-backdrop{position:fixed;inset:0;background:rgba(12,20,30,.55);backdrop-filter:blur(3px);
  display:none;place-items:center;padding:20px;z-index:50}
.ov-backdrop.open{display:grid}
.ov{background:#fff;width:100%;max-width:560px;border-radius:var(--r-2xl);
  box-shadow:var(--shadow-lg);overflow:hidden;display:flex;flex-direction:column;
  max-height:calc(100vh - 40px)}
#ovBackdrop .ov-head{padding:18px 26px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:14px}
#ovBackdrop .ov-progress{flex:1;height:7px;border-radius:980px;background:var(--paper-2);overflow:hidden}
/* Fortschritt per transform:scaleX (GPU, kein Layout) statt width */
#ovBackdrop .ov-progress i{display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--orange),var(--cta));
  border-radius:inherit;transform:scaleX(.125);transform-origin:left;
  transition:transform .35s var(--ease)}
#ovBackdrop .ov-step-count{font-size:12.5px;color:var(--ink-3);font-weight:600;white-space:nowrap;
  font-variant-numeric:tabular-nums}
#ovBackdrop .ov-close{border:none;background:var(--paper-2);width:34px;height:34px;border-radius:50%;
  cursor:pointer;color:var(--ink-2);font-size:18px;line-height:1;display:grid;place-items:center}
#ovBackdrop .ov-close:hover{background:#ececf0}
#ovBackdrop .ov-close:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}
#ovBackdrop .ov-body{padding:26px 26px 8px;overflow-y:auto;overscroll-behavior:contain}
#ovBackdrop .ov-body h3{font-size:20px;letter-spacing:-.02em;margin:0;font-weight:720}
#ovBackdrop .ov-body .sub{font-size:14px;color:var(--ink-2);margin:7px 0 0}
#ovBackdrop .ov-foot{padding:16px 26px 22px;display:flex;gap:12px;align-items:center}
#ovBackdrop .ov-foot .spacer{flex:1}
#ovBackdrop .lnk-back{background:none;border:none;color:var(--ink-2);font-weight:600;font-size:14.5px;
  cursor:pointer;padding:10px 6px;font-family:inherit;border-radius:8px}
#ovBackdrop .lnk-back:hover{color:var(--ink)}
#ovBackdrop .lnk-back:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}

#ovBackdrop .step{display:none}
#ovBackdrop .step.active{display:block;animation:mbk-fade-in .25s var(--ease)}
@keyframes mbk-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- Scan-Sweep Preloader (Reveal-Berechnung) — Shop-Optik ---- */
#ovBackdrop .scan{display:none;padding:34px 0 10px;text-align:center}
#ovBackdrop .scan.on{display:block;animation:mbk-fade-in .25s var(--ease)}
#ovBackdrop .scan-row{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:10px 14px;overflow:hidden;border-radius:980px;max-width:320px;margin:0 auto}
#ovBackdrop .scan-logo{min-width:52px;height:52px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;opacity:.4;
  will-change:transform,opacity;animation:scan-pulse 2.2s var(--ease) infinite}
#ovBackdrop .scan-logo img{height:36px;width:36px;border-radius:50%;object-fit:cover;display:block}
#ovBackdrop .scan-logo.tk{animation-delay:0ms} #ovBackdrop .scan-logo.vf{animation-delay:250ms}
#ovBackdrop .scan-logo.o2{animation-delay:500ms}
@keyframes scan-pulse{0%{opacity:.4;transform:scale(1)}8%{opacity:1;transform:scale(1.08)}
  20%{opacity:.4;transform:scale(1)}100%{opacity:.4;transform:scale(1)}}
#ovBackdrop .scan-sweep{position:absolute;top:0;bottom:0;left:0;width:64px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,104,0,.35),transparent);
  transform:translateX(-72px);will-change:transform,opacity;
  animation:scan-sweep 2.2s var(--ease) infinite}
@keyframes scan-sweep{0%{transform:translateX(-72px);opacity:0}12%{opacity:1}88%{opacity:1}
  100%{transform:translateX(300px);opacity:0}}
#ovBackdrop .scan-cap{font-weight:520;color:var(--ink-2);margin-top:20px;font-size:15px}
#ovBackdrop .scan-cap .spin{display:inline-block;width:15px;height:15px;vertical-align:-2px;margin-right:7px;
  border:2px solid var(--line);border-top-color:var(--cta);border-radius:50%;
  animation:mbk-spin 1s linear infinite}
@keyframes mbk-spin{to{transform:rotate(360deg)}}

/* Gestaffelter Reveal-Auftritt (nur opacity/transform, kein CLS) */
@keyframes mbk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
#ovBackdrop .reveal.play .rv-eyebrow,#ovBackdrop .reveal.play .rv-range,
#ovBackdrop .reveal.play .rv-sub,#ovBackdrop .reveal.play .rv-tarif,
#ovBackdrop .reveal.play .fn-advisor,#ovBackdrop .reveal.play .rv-disc{
  animation:mbk-rise var(--dur-reveal) var(--ease) both}
#ovBackdrop .reveal.play .rv-range{animation-delay:80ms}
#ovBackdrop .reveal.play .rv-sub{animation-delay:140ms}
#ovBackdrop .reveal.play .rv-tarif{animation-delay:220ms}
#ovBackdrop .reveal.play .fn-advisor{animation-delay:300ms}
#ovBackdrop .reveal.play .rv-disc{animation-delay:360ms}

@media(prefers-reduced-motion:reduce){
  #ovBackdrop .step.active,#ovBackdrop .scan.on,#ovBackdrop .reveal.play *{animation:none!important}
  #ovBackdrop .scan-logo{opacity:1;animation:none} #ovBackdrop .scan-sweep{display:none}
  #ovBackdrop .scan-cap .spin{animation:mbk-spin 1s linear infinite!important}
}

/* Range-Step */
#ovBackdrop .rng-big{text-align:center;margin:26px 0 8px}
#ovBackdrop .rng-big .num{font-size:44px;font-weight:780;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums}
#ovBackdrop .rng-big .unit{font-size:17px;color:var(--ink-2);font-weight:600;margin-left:6px}
/* Overlay-Slider-Optik siehe gemeinsame Slider-Regel oben (Hero + Overlay-Paritaet). */
#ovBackdrop .rng-legend2{display:flex;justify-content:space-between;font-size:12px;
  color:var(--ink-3);margin-top:6px}

/* Radio-Kacheln */
#ovBackdrop .opts{display:grid;gap:12px;margin-top:22px}
#ovBackdrop .opts.net{grid-template-columns:repeat(2,1fr)}
.kmini .btn,#ovBackdrop .opt,#ovBackdrop .btn,#ovBackdrop .ov-close,#ovBackdrop .lnk-back{touch-action:manipulation}
#ovBackdrop .opt{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;cursor:pointer;
  display:flex;align-items:center;gap:13px;font-weight:620;font-size:15px;background:#fff;
  transition:border-color var(--dur),background var(--dur),box-shadow var(--dur),transform var(--dur-press) var(--ease)}
#ovBackdrop .opt:hover{border-color:#d5d9e0;background:#fafbfc}
#ovBackdrop .opt:active{transform:scale(.985)}
#ovBackdrop .opt.sel{border-color:var(--cta);background:#fff7f1;box-shadow:inset 0 0 0 1px var(--cta)}
#ovBackdrop .opt:focus-visible{outline:2.5px solid var(--cta);outline-offset:2px}
#ovBackdrop .opt .badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-size:12px;font-weight:800;flex:none;letter-spacing:-.02em}
#ovBackdrop .opt .logo{width:34px;height:34px;border-radius:50%;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
#ovBackdrop .opt .logo img{height:34px;width:34px;border-radius:50%;object-fit:cover;display:block}

/* Berater-Chip im Funnel */
#ovBackdrop .fn-advisor{display:flex;align-items:flex-start;gap:11px;margin-top:22px;background:var(--paper-2);
  border-radius:var(--r-lg);padding:12px 14px;text-align:left}
#ovBackdrop .fn-advisor .k-txt{flex:1;min-width:0}
#ovBackdrop .fn-advisor .k-txt b{font-size:13.5px}
#ovBackdrop .fn-advisor .k-txt .subline{font-size:12px}
/* Antwortzeit-Bildunterschrift im Kontakt-Fuss (Schritt 7) — geteilte .k-resp in relaunch.css */
@media(max-width:560px){
  /* Avatar neben Text (Zeile 1), Kontakt-Block (Nummer + Antwortzeit-Zeile darunter)
     volle Breite unter dem Text eingerueckt. Keine Pille mehr, die um Platz kaempft. */
  #ovBackdrop .fn-advisor{display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"avatar text" "contact contact";align-items:start;row-gap:10px;column-gap:11px}
  #ovBackdrop .fn-advisor .k-avatar{grid-area:avatar}
  #ovBackdrop .fn-advisor .k-txt{grid-area:text}
  #ovBackdrop .fn-advisor .k-txt b{font-size:clamp(12px,calc(3vw + 3.2px),13.5px)}
  #ovBackdrop .fn-advisor .k-contact{grid-area:contact;justify-self:start;margin-left:52px;
    align-items:flex-start;gap:2px}
}
/* Sehr schmale Phones (<=319px, z.B. Galaxy Fold aussen 280px): Kontakt-Einrueckung
   raus, sonst overflowt die 44er-Rufnummer die Karte (Text-Spalte + margin-left
   52 lassen der nowrap-Nummer nur ~124px). 320px+ bleiben bei 52px ausgerichtet. */
@media(max-width:319px){
  #ovBackdrop .fn-advisor .k-contact{margin-left:0}
}
/* Kompakt am KONTAKT-Schritt (Step 8, .fn-advisor--compact): leise Vertrauens-
   Zeile statt geschatteter Box — konkurriert am Absende-Moment nicht mit dem CTA.
   Reveal-Schritt (Step 7) behaelt die volle Box. Subline hier redundant zu Recap
   + H3 -> versteckt (rein CSS, Partial unveraendert). */
/* Variante A "Kontakt-Karte" (an ALLEN Breiten): Avatar spannt beide Grid-Reihen
   -> die einzeilige Name-Zeile (nicht der 34px-Avatar) bestimmt die 1. Reihe,
   Kontakt rueckt mit 4px direkt unter den Namen. Kein Avatar-hohes Loch mobil,
   kein rechtsbuendig weggerissener Kontakt auf Desktop. Ein Layout ueberall. */
#ovBackdrop .fn-advisor--compact{background:transparent;border-radius:0;
  border-top:1px solid var(--line);padding:14px 2px 2px;margin-top:16px;
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"avatar text" "avatar contact";align-items:start;row-gap:4px;column-gap:11px}
#ovBackdrop .fn-advisor--compact .k-avatar{grid-area:avatar;width:34px;height:34px}
#ovBackdrop .fn-advisor--compact .k-avatar svg{width:18px;height:18px}
#ovBackdrop .fn-advisor--compact .k-avatar .on{width:10px;height:10px}
#ovBackdrop .fn-advisor--compact .k-txt{grid-area:text}
#ovBackdrop .fn-advisor--compact .k-txt b{font-size:13px}
#ovBackdrop .fn-advisor--compact .k-txt .subline{display:none}
#ovBackdrop .fn-advisor--compact .k-contact{grid-area:contact;justify-self:start;align-items:flex-start;margin-left:0;gap:3px}
#ovBackdrop .fn-privacy{margin:12px 0 0;font-size:12px;line-height:1.45;color:var(--ink-3,#6b7280);text-align:left}

/* Reveal */
#ovBackdrop .reveal{text-align:center;padding:8px 0}
#ovBackdrop .reveal .rv-eyebrow{font-size:12.5px;font-weight:680;letter-spacing:.03em;color:var(--green);
  text-transform:uppercase}
#ovBackdrop .reveal .rv-range{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px;
  color:var(--ink);font-variant-numeric:tabular-nums}
#ovBackdrop .reveal .rv-range .cur{color:var(--cta)}
#ovBackdrop .reveal .rv-sub{font-size:14px;color:var(--ink-2);max-width:40ch;margin:6px auto 0}
#ovBackdrop .reveal .rv-tarif{margin-top:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;display:flex;align-items:center;gap:13px;text-align:left}
#ovBackdrop .reveal .rv-tarif .logo{width:44px;height:44px;border-radius:50%;background:#fff;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
#ovBackdrop .reveal .rv-tarif .logo img{height:44px;width:44px;border-radius:50%;object-fit:cover;display:block}
#ovBackdrop .reveal .rv-tarif b{font-size:15px}
#ovBackdrop .reveal .rv-tarif span{font-size:13px;color:var(--ink-2)}
/* Rechtstext (§5/§6 UWG) auf AA-sicheres ink-2 statt ink-3 */
#ovBackdrop .rv-disc{font-size:11.5px;color:var(--ink-2);margin-top:16px;line-height:1.45}

/* Cross-Sell-Karte (SIM < 3) */
#ovBackdrop .xsell{margin-top:20px;border:1.5px dashed var(--cta);border-radius:var(--r-lg);
  padding:18px;background:#fff7f1;text-align:center;display:none}
#ovBackdrop .xsell.show{display:block}
#ovBackdrop .xsell b{font-size:15.5px}
#ovBackdrop .xsell p{font-size:13.5px;color:var(--ink-2);margin:6px 0 14px}

/* Kontakt-Form */
#ovBackdrop .form-grid{display:grid;gap:13px;margin-top:20px}
#ovBackdrop .field label{font-size:13px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:5px}
#ovBackdrop .field input{width:100%;border:1.5px solid var(--line);border-radius:var(--r-md);padding:12px 13px;
  font-size:16px;font-family:inherit}
#ovBackdrop .field input:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(194,78,0,.12)}
#ovBackdrop .field.invalid input{border-color:#d92d20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
#ovBackdrop .field .err{display:none;color:#b42318;font-size:12.5px;margin-top:5px;font-weight:600}
#ovBackdrop .field.invalid .err{display:block}
#ovBackdrop .consent{display:flex;gap:10px;align-items:flex-start;margin-top:4px;font-size:13px;color:var(--ink-2)}
#ovBackdrop .consent input{margin-top:2px;accent-color:var(--cta);width:17px;height:17px;flex:none}
#ovBackdrop .consent a{color:var(--cta)}
#ovBackdrop .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#ovBackdrop .save-recap{background:#f0faf3;border:1px solid #cdeed6;color:#14663a;border-radius:var(--r-md);
  padding:11px 14px;font-size:13.5px;margin-bottom:18px}
#ovBackdrop .save-recap b{color:var(--green-strong,#1e7a3a)}

/* Fehler-/Erfolg-Banner fuer den Lead-Versand */
#ovBackdrop .ov-note{border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;margin-top:16px;display:none}
#ovBackdrop .ov-note.show{display:block}
#ovBackdrop .ov-note.err{background:#fef3f2;border:1px solid #fecdca;color:#b42318}
#ovBackdrop .ov-note.ok{background:#f0faf3;border:1px solid #cdeed6;color:#14663a}

@media(max-width:1000px){
  .kmini{max-width:480px}
}
@media(max-width:560px){
  #ovBackdrop .opts.net{grid-template-columns:1fr}
  /* Overlay als Bottom-Sheet — daumenfreundlich, volle Breite */
  .ov-backdrop.open{place-items:end center;padding:0}
  .ov{max-width:100%;max-height:94vh;border-radius:20px 20px 0 0}
  #ovBackdrop .ov-body{padding:22px 18px 8px}
  #ovBackdrop .ov-head{padding:16px 22px}
  /* Bottom-Sheet: Foot nicht unter den Home-Indicator schieben */
  #ovBackdrop .ov-foot{padding:14px 18px calc(20px + env(safe-area-inset-bottom))}
  .kmini{padding:22px}
  #ovBackdrop .rng-big .num{font-size:38px}
  #ovBackdrop .reveal .rv-range{font-size:32px}
}