*{box-sizing:border-box}
  :root{
    --ink:#0B1B33; --muted:#4B5C74; --soft:#5C6B80; --line:#E3E9F2;
    --primary:#1F8A38; --primary2:#3BAA57; --primaryd:#156327;
    --green:#1F8A38; --green2:#2FA04C; --gold:#E9A93D;
    --bg:#F4F7FC; --surface:#fff; --soft-text:#4B5C74;
    --mn:'Manrope',system-ui,sans-serif; --bd:'IBM Plex Sans',system-ui,sans-serif;
    --sh-sm:0 1px 2px rgba(11,27,51,.05),0 8px 22px -14px rgba(11,27,51,.18);
    --sh-md:0 2px 4px rgba(11,27,51,.04),0 22px 48px -26px rgba(11,27,51,.28);
    --sh-lg:0 4px 10px rgba(11,27,51,.05),0 36px 76px -30px rgba(15,45,110,.35);
    --grad-cta:linear-gradient(135deg,#3BAA57 0%,#1F8A38 52%,#156327 100%);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  html,body{margin:0}
  body{font-family:var(--bd);color:#33425A;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
  a{color:inherit}
  h1,h2,h3{font-family:var(--mn);color:var(--ink);letter-spacing:-.02em;margin:0}
  .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,28px)}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  @keyframes coin{0%{transform:translateY(6px) scale(.9);opacity:0}25%{opacity:.9}100%{transform:translateY(-26px) scale(1.05);opacity:0}}
  @keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.03)}}
  @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
  @keyframes livedot{0%,100%{box-shadow:0 0 0 0 rgba(14,158,110,.45)}70%{box-shadow:0 0 0 7px rgba(14,158,110,0)}}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  ::selection{background:var(--primary);color:#fff}
  html{scroll-behavior:smooth}
  section{scroll-margin-top:70px}
  .snap-page{display:flex;flex-direction:column;justify-content:center}
  .snap-top{position:relative}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  :focus-visible{outline:3px solid rgba(31,138,56,.45);outline-offset:2px;border-radius:6px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
    html{scroll-behavior:auto}
  }

  /* header */
  header.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid rgba(227,233,242,.9);transition:box-shadow .25s var(--ease)}
  header.hd.scrolled{box-shadow:0 12px 32px -22px rgba(11,27,51,.35)}
  .hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:13px;padding-bottom:13px}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
  .logo .mark{width:36px;height:36px;border-radius:10px;background:var(--grad-cta);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px -8px #1F8A38cc}
  .logo .mark i{color:#fff;font-size:20px}
  .logo .wm{font-family:var(--mn);font-size:19px}
  .nav{display:flex;align-items:center;gap:28px}
  .nav a{text-decoration:none;color:#42526B;font-size:15px;font-weight:500;position:relative;padding:4px 0;transition:color .18s}
  .nav a:hover{color:var(--primary)}
  .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--primary);transition:right .22s var(--ease)}
  .nav a:hover::after{right:0}
  .btn{font-family:var(--mn);font-weight:700;text-decoration:none;border:none;cursor:pointer}
  .btn-pill{display:inline-flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;padding:11px 22px;border-radius:999px;background:var(--grad-cta);color:#fff;font-size:15px;box-shadow:0 12px 26px -12px #1F8A38cc;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .btn-pill:hover{transform:translateY(-1px);box-shadow:0 16px 32px -12px #1F8A38dd}

  /* hero – zentriert, fast volle Höhe, Premium-Glow */
  .hero-c{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(56px,9vh,96px) clamp(16px,4vw,28px) clamp(48px,7vh,72px);
    background:
      radial-gradient(46% 38% at 78% 12%,rgba(14,158,110,.09) 0%,transparent 100%),
      radial-gradient(70% 55% at 50% -5%,#DFF4E3 0%,rgba(223,234,255,0) 100%),
      radial-gradient(120% 90% at 50% 0%,#EBF8EE 0%,var(--bg) 58%,var(--bg) 100%)}
  .hero-c::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:radial-gradient(rgba(31,138,56,.075) 1px,transparent 1.4px);
    background-size:26px 26px;
    -webkit-mask-image:radial-gradient(60% 52% at 50% 34%,#000 0%,transparent 100%);
    mask-image:radial-gradient(60% 52% at 50% 34%,#000 0%,transparent 100%)}
  .hero-inner{max-width:860px;margin:0 auto;position:relative}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-weight:700;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--primaryd);background:rgba(255,255,255,.75);border:1px solid #C8E8D0;padding:8px 16px;border-radius:999px;margin-bottom:22px;box-shadow:var(--sh-sm);backdrop-filter:blur(6px)}
  .hero-c h1{font-weight:800;font-size:clamp(34px,5.6vw,62px);line-height:1.03}
  .hero-c h1 .tw{background:linear-gradient(120deg,#3BAA57,#1F8A38 55%,#156327);-webkit-background-clip:text;background-clip:text;color:transparent}
  .caret{display:inline-block;width:4px;height:.82em;background:var(--primary);margin-left:5px;vertical-align:-.06em;animation:blink 1s steps(1) infinite;border-radius:2px}
  .hero-c p.sub{font-size:clamp(17px,2.6vw,21px);line-height:1.58;color:#46566E;max-width:580px;margin:24px auto 0}
  .hero-c p.sub strong{color:var(--ink)}
  .hero-c p.sub strong.b{color:var(--primary)}

  /* Hero-„Kassenbon": Beweis vor Behauptung. Zahlen identisch zur
     Effektivpreis-Box, nur in Alltagssprache und ohne Fachbegriffe. */
  .proof{max-width:560px;margin:28px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-md);padding:6px 20px 14px;text-align:left}
  /* Kopf: welcher Vertrag ist das ueberhaupt? Netz-Logo + Datenvolumen zuerst. */
  .pf-head{display:flex;align-items:center;gap:12px;padding:14px 0 12px;border-bottom:1px solid var(--line)}
  .pf-logo{height:20px;width:auto;max-width:92px;object-fit:contain;display:block;flex:0 0 auto}
  .pf-what{display:flex;flex-direction:column;gap:1px;min-width:0}
  .pf-what b{font-family:var(--mn);font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.2}
  .pf-what small{font-family:var(--bd);font-weight:500;font-size:12px;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pf-h{display:flex;align-items:center;gap:8px;font-family:var(--mn);font-weight:700;font-size:12.5px;color:var(--muted);padding:11px 0 3px}
  .pf-h i{color:var(--primary);font-size:16px}
  .pf-r{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:12px 0}
  .pf-l{display:flex;flex-direction:column;gap:3px;font-family:var(--mn);font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.25}
  .pf-l small{font-family:var(--bd);font-weight:500;font-size:12.5px;color:var(--soft);line-height:1.45}
  .pf-v{font-family:var(--mn);font-weight:800;font-size:17px;color:var(--ink);white-space:nowrap;text-align:right;padding-top:1px}
  .pf-v.minus{color:var(--green)}
  .pf-r.sum{border-top:1px dashed #DCE3EC;margin-top:2px;padding-top:14px}
  .pf-r.sum .pf-v{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-top:0}
  .pf-r.sum .pf-v b{font-family:var(--mn);font-weight:800;font-size:30px;color:var(--green);letter-spacing:-.02em;line-height:1}
  .pf-r.sum .pf-v small{font-family:var(--bd);font-weight:600;font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.05em}
  /* Marktanker: der ehrliche Vergleich statt einer Behauptung. */

  .dr-seg-anz b{color:#8A6D1F}
  .dr-anz{font-family:var(--bd);font-size:12px;font-weight:600;color:#8A6D1F;background:#FBF3DC;border:1px solid #EFDFAE;border-radius:8px;padding:3px 9px;margin-top:6px;display:inline-block}
  .dr-anz0{color:#1F8A38;background:#E9F7F1;border-color:#BFE7D6}
  .pf-anker{display:flex;align-items:flex-start;gap:8px;margin-top:4px;padding:11px 12px;background:#F2FBF6;border:1px solid #CFE8DA;border-radius:12px;font-size:13px;line-height:1.5;color:#2A3B52}
  /* Sprechblase: RNM-Vorteil als Teaser (RNM ist Standard AUS). */
  .pf-teaser{position:relative;display:flex;align-items:center;gap:9px;margin-top:12px;padding:11px 14px;background:var(--grad-cta);border-radius:13px;font-size:13.5px;line-height:1.4;color:#fff;box-shadow:0 12px 26px -14px rgba(31,138,56,.7)}
  .pf-teaser i{font-size:18px;flex:0 0 auto;opacity:.9}
  .pf-teaser b{font-weight:800}
  .pf-teaser::before{content:'';position:absolute;top:-6px;left:20px;width:12px;height:12px;background:var(--primary2);transform:rotate(45deg)}
  .pf-anker i{color:var(--green2);font-size:15px;flex:0 0 auto;margin-top:1px}
  .pf-anker b{font-family:var(--mn);font-weight:800;color:var(--green)}
  .pf-f{display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);margin-top:10px;padding-top:11px;font-size:12.5px;color:var(--soft)}
  .pf-f i{font-size:14px;color:#9AA8BC}
  /* Ohne die „Bestes Angebot"-Karte steht die Warum-Spalte allein -> mittig,
     mit Lesebreite statt auf halber Strecke zu kleben. */
  .best-grid-solo .why-col{flex:1 1 100%;max-width:780px}

  /* Die drei Fragen unter dem Kassenbon. Bewusst zurueckhaltend: die Zahl
     oben soll die Show sein, nicht der Button. */
  .proof-wrap{max-width:560px;margin:28px auto 0}
  .proof-wrap .proof{margin-top:0}
  #proofBox.pf-flash .pf-r.sum{animation:pfFlash .75s var(--ease)}
  @keyframes pfFlash{from{background:rgba(11,122,85,.11)}to{background:transparent}}
  .pq{margin-top:14px;text-align:left}
  .pq-h{font-family:var(--mn);font-weight:700;font-size:13px;color:var(--muted);margin-bottom:9px}
  .pq-chips{display:flex;flex-wrap:wrap;gap:8px}
  .pq-chip{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;min-height:44px;border-radius:11px;cursor:pointer;font-family:var(--mn);font-weight:600;font-size:14px;background:var(--surface);color:#42526B;border:1px solid var(--line);box-shadow:var(--sh-sm);transition:border-color .18s,color .18s,background .18s,box-shadow .18s}
  .pq-chip i{font-size:16px;color:var(--primary);transition:color .18s}
  .pq-chip:hover{border-color:#B4DEC0;color:var(--ink)}
  .pq-chip.on{background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:0 10px 22px -12px rgba(31,138,56,.75)}
  .pq-chip.on i{color:#fff}
  .pq-cta{display:inline-flex;align-items:center;gap:8px;margin-top:12px;text-decoration:none;font-family:var(--mn);font-weight:700;font-size:14px;color:var(--primary);padding:9px 2px}
  .pq-cta i{transition:transform .2s var(--ease)}
  .pq-cta:hover i{transform:translateY(3px)}
  @media(max-width:520px){
    .pq-chips{flex-direction:column;align-items:stretch}
    .pq-chip{justify-content:flex-start}
  }
  @media(prefers-reduced-motion:reduce){
    #proofBox.pf-flash .pf-r.sum{animation:none}
    .pq-cta i{transition:none}
  }
  @media(max-width:520px){
    .proof{padding:4px 15px 12px}
    .pf-l{font-size:14.5px}
    .pf-v{font-size:15.5px}
    .pf-r.sum .pf-v b{font-size:26px}
  }
  .scroll-down{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;color:#9AA7B8;text-decoration:none;font-size:12px;font-weight:600;font-family:var(--mn)}
  .scroll-down i{font-size:20px;animation:bounce 1.8s ease-in-out infinite}
  .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;justify-content:center}
  .cta1{text-decoration:none;background:var(--grad-cta);color:#fff;padding:16px 26px;border-radius:14px;font-size:16px;display:inline-flex;align-items:center;gap:9px;box-shadow:0 18px 38px -14px rgba(31,138,56,.75),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .cta1:hover{transform:translateY(-2px);box-shadow:0 24px 46px -16px rgba(31,138,56,.85),inset 0 1px 0 rgba(255,255,255,.22)}
  .cta1 i{transition:transform .2s var(--ease)}
  .cta1:hover i{transform:translateX(3px)}
  .cta2{text-decoration:none;background:rgba(255,255,255,.85);color:var(--primaryd);border:1.5px solid #C6E6CE;padding:16px 26px;border-radius:14px;font-size:16px;display:inline-flex;align-items:center;gap:9px;backdrop-filter:blur(6px);transition:border-color .2s,background .2s,transform .2s var(--ease)}
  .cta2:hover{border-color:var(--primary);background:#fff;transform:translateY(-2px)}
  .trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;justify-content:center}
  .trust > span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#33425A;font-weight:600;font-family:var(--mn);background:rgba(255,255,255,.78);border:1px solid #E3E9F2;padding:9px 15px;border-radius:999px;box-shadow:var(--sh-sm);backdrop-filter:blur(6px)}
  .trust i{color:var(--green2);font-size:17px}
  .trust .live-dot{display:inline-block;width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--green2);animation:livedot 2s ease-out infinite;flex-shrink:0;box-shadow:none}

  /* best-angebot */
  .best-sec{padding:56px clamp(16px,4vw,28px);gap:30px;background:linear-gradient(180deg,#EBF4EC 0%,#E7F3E9 100%);border-radius:34px 34px 0 0;box-shadow:0 -26px 60px -34px rgba(15,30,54,.3)}
  .best-grid{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:clamp(28px,5vw,56px);align-items:center;justify-content:center}
  .best-col{flex:1 1 380px;min-width:300px;max-width:450px}
  .best-empty{background:#fff;border:1px solid var(--line);border-radius:24px;padding:48px 24px;text-align:center;color:var(--soft);font-size:15px}
  .why-col{flex:1 1 320px;min-width:280px}
  .why-col h2{font-weight:800;font-size:clamp(24px,3.4vw,34px);line-height:1.12;margin:12px 0 0}
  .why-col p{font-size:clamp(15px,2.2vw,16.5px);line-height:1.6;color:var(--muted);margin:14px 0 0}
  .why-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
  .why-stats > div{background:rgba(255,255,255,.72);border:1px solid #E3E9F2;border-radius:16px;padding:14px 16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .why-stats > div:hover{transform:translateY(-2px);box-shadow:var(--sh-sm)}
  .why-stats .v{font-family:var(--mn);font-weight:800;font-size:clamp(22px,3.6vw,28px);color:var(--ink)}
  .why-stats .v .u{color:var(--soft);font-size:15px;font-weight:700}
  .why-stats .k{font-size:12.5px;color:var(--soft-text);margin-top:3px;font-weight:500}

  /* ablauf */
  .ablauf{padding:64px 0;background:var(--bg);border-radius:34px 34px 0 0;box-shadow:0 -26px 60px -34px rgba(15,30,54,.3)}
  .ab-grid{background:#fff;border:1px solid #E7ECF3;border-radius:24px;padding:24px clamp(16px,3vw,30px) 28px;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,46px);align-items:center;max-width:1080px;margin:0 auto;box-shadow:var(--sh-md)}
  .ab-stage{flex:1 1 360px;min-width:0;max-width:100%;overflow:hidden;display:flex;justify-content:center}
  .ab-side{flex:1 1 320px;min-width:280px}
  .dial-outer{width:100%;max-width:100%;overflow:hidden;display:flex;justify-content:center}
  .dial{position:relative;width:400px;height:400px;transform-origin:top left}
  .node{position:absolute;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px -6px rgba(16,32,60,.18);cursor:pointer;transition:.45s var(--ease);z-index:2;padding:0}
  .node i{font-size:28px;line-height:1}
  .ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:184px;height:184px;border-radius:50%;z-index:1;transition:background .1s linear}
  .med{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:156px;height:156px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 6px #fff,0 10px 30px -12px rgba(16,32,60,.25);z-index:3;transition:background .4s;animation:pulse 2.6s ease-in-out infinite}
  .med i{font-size:54px;line-height:1;transition:color .4s}
  .coin{position:absolute;color:#E8B23A;animation:coin 2.4s ease-in-out infinite}
  .meter{background:radial-gradient(130% 130% at 0% 0%,#0F1E36,#16305A);border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--sh-md)}
  .meter .ml{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:#8FA6C8;font-weight:600}
  .meter .bar{height:5px;width:130px;max-width:38vw;background:rgba(255,255,255,.14);border-radius:4px;margin-top:9px;overflow:hidden}
  .meter .bar > i{display:block;height:100%;background:linear-gradient(90deg,#36D399,#2FA04C);border-radius:4px;transition:width .12s linear}
  .meter .mv{font-family:var(--mn);font-weight:800;font-size:clamp(26px,7vw,34px);color:#36D399;line-height:1;white-space:nowrap}
  .cap{margin-top:18px;display:flex;gap:14px;align-items:flex-start}
  .cap .num{font-family:var(--mn);font-weight:800;font-size:38px;line-height:1;transition:color .4s}
  .cap .of{font-family:var(--mn);font-weight:700;font-size:17px;color:#C2CCDA;margin-top:6px}
  .cap .t{font-family:var(--mn);font-weight:700;font-size:19px;color:var(--ink);line-height:1.2}
  .cap .d{font-size:14px;line-height:1.5;color:var(--muted);margin-top:5px}
  .segs{display:flex;gap:6px;margin-top:14px}
  .segs .s{flex:1;height:5px;border-radius:4px;background:#E7ECF3;position:relative;overflow:hidden;cursor:pointer}
  .segs .s > i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}

  /* crawlbare Schritt-Liste (No-JS-Fallback, per JS ausgeblendet) */
  .ab-steps{list-style:none;margin:26px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px}
  .ab-steps li{display:flex;gap:12px;background:#fff;border:1px solid #E7ECF3;border-radius:16px;padding:16px}
  .ab-steps .n{font-family:var(--mn);font-weight:800;font-size:22px;color:var(--primary);line-height:1}
  .ab-steps strong{display:block;font-family:var(--mn);font-weight:700;font-size:15px;color:var(--ink);line-height:1.25}
  .ab-steps span{display:block;font-size:13px;color:var(--muted);margin-top:5px;line-height:1.5}
  .js .ab-steps{display:none}

  /* formula */
  .formula{padding:24px clamp(16px,4vw,28px)}
  .formula .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;max-width:1000px;margin:0 auto}
  .fpill{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:12px;background:#F0F4FB;border:1px solid var(--line);font-family:var(--mn);font-weight:700;color:var(--ink);font-size:14.5px}
  .fpill i{color:var(--primary);font-size:18px}
  .fpill.win{background:#E9F7F0;border-color:#BCEBD6;color:var(--green);font-weight:800}
  .fop{color:var(--soft);font-size:18px}

  /* partner */
  .partner{background:var(--bg);padding:34px 0}
  .partner.in-best{background:transparent;padding:0;width:100%}
  .partner .h{text-align:center;font-family:var(--mn);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:22px}
  /* Die Logos sind provisionsgetragene Partnerlinks -- eine Logo-Leiste wirkt
     als Vertrauenssignal, der Nutzer rechnet beim Klick nicht mit einer
     Weiterleitung. Sichtbares "Anzeige" schliesst § 5a Abs. 4 UWG ab. */
  .partner .partner-ad{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid #D9E1EC;border-radius:5px;font-size:10px;letter-spacing:.06em;color:#8A97A8;vertical-align:middle}
  .mqr{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mqt{display:flex;width:max-content;animation:mq 44s linear infinite}
  /* Bewusst KEINE Hover-Pause: das Karussell laeuft immer weiter (Jans Vorgabe). */
  .mqg{display:flex;gap:16px;padding-right:16px;align-items:center}
  .ptile{display:flex;align-items:center;justify-content:center;height:72px;width:150px;padding:14px 22px;background:#fff;border:1px solid #EAEEF4;border-radius:14px;box-shadow:0 8px 20px -14px rgba(16,32,60,.3);transition:transform .2s var(--ease),box-shadow .2s var(--ease);cursor:pointer}
  /* Text-Badge fuer Partner ohne lokales Logo (ersetzt die Remote-Tracking-Banner) */
  .ptile-txt{font-family:var(--mn);font-weight:800;font-size:15px;letter-spacing:.02em;color:#42526B;white-space:nowrap}
  .ptile:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
  .ptile img{max-height:36px;max-width:108px;width:auto;object-fit:contain;display:block}

  /* finder */
  .finder{padding:70px 0;background:var(--bg);border-radius:34px 34px 0 0;box-shadow:0 -26px 60px -34px rgba(15,30,54,.3)}
  .sec-head{text-align:center;max-width:660px;margin:0 auto 28px}
  .eyebrow{font-family:var(--mn);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
  .sec-head h2{font-weight:800;font-size:clamp(28px,4vw,42px);line-height:1.1;margin-top:12px}
  .sec-head p{font-size:clamp(15px,2.2vw,17px);line-height:1.55;color:var(--muted);margin:14px 0 0}
  .finder-box{background:#fff;border:1px solid #E3E9F2;border-radius:22px;padding:22px clamp(14px,3vw,26px);display:flex;flex-direction:column;gap:18px;box-shadow:var(--sh-md)}
  /* KI-Suche */
  .ai-box{display:flex;flex-direction:column;gap:12px;padding:16px 16px 18px;margin:-6px -6px 0;border:1px solid #D8F0DE;border-radius:16px;background:linear-gradient(135deg,#F3FAF4 0%,#F0FBF6 100%)}
  .ai-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .ai-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mn);font-weight:700;font-size:11.5px;letter-spacing:.04em;color:#fff;background:linear-gradient(120deg,#1F8A38,#2FA04C);padding:5px 11px;border-radius:999px}
  .ai-head b{font-family:var(--mn);font-weight:700;font-size:14.5px;color:var(--ink)}
  .ai-row{display:flex;gap:10px;flex-wrap:wrap}
  .ai-input{flex:1;min-width:230px;padding:14px 16px;border-radius:12px;border:1.5px solid #D8E1EF;font-size:15px;font-family:var(--bd);color:var(--ink);background:#fff;outline:none;transition:border-color .18s,box-shadow .18s}
  .ai-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,138,56,.14)}
  .ai-go{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-weight:700;font-size:15px;padding:14px 22px;border-radius:12px;border:none;cursor:pointer;background:var(--grad-cta);color:#fff;box-shadow:0 14px 28px -14px #1F8A38cc;white-space:nowrap;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .ai-go:hover{transform:translateY(-1px);box-shadow:0 18px 34px -14px #1F8A38dd}
  .ai-hint{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--soft);font-weight:600}
  .ai-ex{font-size:12.5px;font-weight:600;color:#42526B;background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:999px;cursor:pointer;font-family:var(--bd);transition:border-color .18s,color .18s}
  .ai-ex:hover{border-color:var(--primary);color:var(--primary)}
  .ai-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--green);background:#E9F7F0;border:1px solid #BCEBD6;padding:4px 10px;border-radius:999px}
  .fcols{display:flex;flex-wrap:wrap;gap:24px}
  .fcol{flex:1 1 280px}
  .flabel{font-family:var(--mn);font-weight:700;font-size:13px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:7px}
  .fhint{font-family:var(--bd);font-weight:500;font-size:11px;color:var(--soft);background:var(--surface,#F5F8FD);border:1px solid var(--line,#E1E9F6);border-radius:9px;padding:1px 7px;margin-left:2px}
  .flabel i{color:var(--primary)}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:10px 17px;border-radius:11px;cursor:pointer;font-size:14px;font-family:var(--mn);font-weight:600;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease),box-shadow .18s;white-space:nowrap;background:#F7F9FC;color:#42526B;border:1px solid var(--line);user-select:none}
  .chip:hover{border-color:#A6D8B2;color:var(--primaryd);background:#fff;transform:translateY(-1px)}
  .chip.on{background:var(--grad-cta);color:#fff;border-color:transparent;box-shadow:0 10px 22px -12px rgba(31,138,56,.75)}

  /* "ab"-Preis je Filter-Option (Vergleichsportal-Konvention): zeigt VOR dem
     Klick, was die Option bringt. Bewusst zurueckhaltend gesetzt -- der Preis
     informiert, das Label bleibt die Hauptsache. */
  .chip-ab{margin-left:8px;font-family:var(--mn);font-weight:700;font-size:12px;color:var(--primaryd);
           background:#EAF6ED;border-radius:6px;padding:2px 6px;letter-spacing:-.01em;white-space:nowrap;
           transition:background .18s,color .18s}
  .chip.on .chip-ab{background:rgba(255,255,255,.22);color:#fff}
  .chip:hover .chip-ab{background:#DCF0E2}
  .chip.on:hover .chip-ab{background:rgba(255,255,255,.28)}
  /* Negativer Effektivpreis = Ertrag. Kraeftiger gesetzt als ein normaler
     "ab"-Preis, weil hier die Aussage kippt: nicht "kostet wenig", sondern
     "bringt Geld". Auf dem gewaehlten Chip greift die weisse Regel darueber. */
  .chip-ab.is-plus{background:var(--primaryd);color:#fff;display:inline-flex;align-items:center;gap:4px}
  .chip-ab.is-plus i{font-size:12px;line-height:1}
  .chip:hover .chip-ab.is-plus{background:var(--primary)}
  /* Keine Treffer: sichtbar lassen (die Option existiert ja), aber klar als
     Sackgasse markieren -- ausblenden wuerde das Layout bei jedem Klick umbauen. */
  .chip.is-empty{opacity:.42;cursor:not-allowed}
  .chip.is-empty:hover{transform:none;border-color:var(--line);color:#42526B;background:#F7F9FC}
  .chips-self .chip .chip-ab{margin-left:auto;align-self:center}

  /* Extras-Chips: Ich-Satz gross, Fachbegriff klein darunter (fuer Kenner). */
  .chips-self .chip{white-space:normal;align-items:flex-start;flex-direction:row;padding:11px 16px;max-width:100%}
  .chips-self .chip>i{margin-top:1px;flex:0 0 auto}
  .chips-self .chip-t{display:block;line-height:1.25}
  .chips-self .chip em{display:block;font-style:normal;font-family:var(--bd);font-weight:500;font-size:11.5px;color:var(--soft);letter-spacing:.01em;margin-top:2px}
  .chips-self .chip.on em{color:rgba(255,255,255,.82)}
  .fextra{border-top:1px solid #E7ECF3;padding-top:16px;display:flex;flex-direction:column;gap:16px}
  /* Im Spalten-Kontext wird flex-basis:280px zur HOEHE -> 200px Leerraeume im
     breiten Finder (Kategorie-Seiten). Basis hier neutralisieren. */
  .fextra>.fcol{flex:0 0 auto}
  .fcol-sort{margin-top:0}
  /* RNM: ein Anbieter+Netz-Dropdown, direkt unter dem RNM-Chip. */
  /* Kleine Erklaerzeile unter einem Rechnungs-Label (Karten, Zeilen, Tarifseite) */
  .cr-sub{display:block;font-style:normal;font-size:11.5px;line-height:1.35;font-weight:500;color:#7E9C8A;margin-top:2px}
  .rnm-combo{width:100%;padding:11px 13px;border:1px solid #E4EAF2;border-radius:11px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);background:#fff;margin-top:2px;cursor:pointer}
  .rnm-combo:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,138,56,.12)}
  /* Sidebar-Finder kompakter: kleiner, enger, auf einen Blick untereinander. */
  .finder-side .finder-box{gap:13px;padding:16px 15px}
  .finder-side .flabel{font-size:12.5px;margin-bottom:7px}
  .finder-side .chips{gap:7px}
  .finder-side .chip{min-height:40px;padding:9px 13px;font-size:13.5px}
  .finder-side .fcols{gap:14px}
  /* Klappt DIREKT unter dem RNM-Chip auf (liegt im Chip-Stapel); volle Breite auch bei Chip-Reihen */
  .rnm-fields{display:none;flex:0 0 100%;min-width:100%;margin:2px 0 4px;padding:14px 16px 16px;background:#F4FBF5;border:1.5px solid #CDE9D4;border-radius:14px}
  .rnm-fields.show{display:block;animation:rnmDown .28s var(--ease)}
  @keyframes rnmDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
  .rnm-fields .flabel{margin-bottom:4px}
  .rnm-hint{font-size:12.5px;color:var(--soft-text);margin-bottom:10px}

  .res-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:26px 0 12px}
  /* Sortier-Tabs + aktive Filter-Chips (Vergleichsportal-Kopf ueber der Liste) */
  .sort-bar{display:flex;align-items:center;gap:10px;margin:0 0 10px;flex-wrap:wrap}
  .sb-lbl{display:inline-flex;align-items:center;gap:6px;font-family:var(--mn);font-weight:700;font-size:13px;color:var(--muted);flex:0 0 auto}
  .chips-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .chips-tabs::-webkit-scrollbar{display:none}
  /* Ranking-Transparenz (§ 5b UWG): muss von der Ergebnisliste aus erreichbar
     sein, deshalb sitzt der Link direkt an der Sortierung statt nur im Footer. */
  .sb-info{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto;
           font-family:var(--mn);font-weight:600;font-size:12.5px;color:var(--muted);
           text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
  .sb-info:hover{color:var(--ink)}
  .data-stand{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--soft-text)}
  .chips-tabs .chip{flex:0 0 auto}
  .active-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px}
  .af-lead{font-size:12.5px;font-weight:600;color:var(--soft)}
  .af-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mn);font-weight:700;font-size:12.5px;color:var(--primaryd);background:#EDF8EF;border:1px solid #D2EDD9;border-radius:999px;padding:7px 13px;min-height:32px;cursor:pointer;transition:background .18s,border-color .18s,transform .16s cubic-bezier(.23,1,.32,1)}
  .af-chip:active{transform:scale(.97)}
  /* Touch-Geraete: Hover-Transforms abschalten -- Tap loest sonst "klebrige"
     Hover-Zustaende mit Layout-Shift aus (Emil: hover hinter hover-Media gaten). */
  @media (hover: none){
    .chip:hover,.dr-more:hover,.pq-chip:hover,.af-chip:hover,.qs-chip:hover{transform:none}
  }

  /* ---- Vergleichen: Merken-Button, Sticky-Leiste, Overlay ---- */
  .dr-cmpbtn{display:none}
  body.cmp-ready .dr-cmpbtn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mn);font-weight:700;font-size:13px;color:#5A6B82;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 14px;min-height:38px;cursor:pointer;transition:color .18s,border-color .18s,background .18s,transform .16s cubic-bezier(.23,1,.32,1)}
  body.cmp-ready .dr-cmpbtn:hover{border-color:#A6D8B2;color:var(--primaryd)}
  body.cmp-ready .dr-cmpbtn:active{transform:scale(.97)}
  body.cmp-ready .dr-cmpbtn.on{color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);border-color:transparent}
  #cmpBar{position:fixed;left:50%;bottom:14px;transform:translate(-50%,130%);z-index:60;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:min(94vw,760px);background:#0F1E36;color:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 24px 60px -20px rgba(10,20,40,.55);transition:transform .22s cubic-bezier(.23,1,.32,1)}
  #cmpBar.show{transform:translate(-50%,0)}
  .cb-items{display:flex;gap:8px;flex-wrap:wrap}
  .cb-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mn);font-weight:600;font-size:12.5px;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:6px 12px;cursor:pointer;transition:background .18s}
  .cb-chip:hover{background:rgba(255,255,255,.22)}
  .cb-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
  .cb-go{font-family:var(--mn);font-weight:800;font-size:13.5px;color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);border:none;border-radius:11px;padding:11px 16px;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1)}
  .cb-go:active{transform:scale(.97)}
  .cb-go:disabled{opacity:.45;cursor:default}
  .cb-clear{font-family:var(--mn);font-weight:600;font-size:12.5px;color:rgba(255,255,255,.75);background:none;border:none;cursor:pointer;padding:6px}
  .cb-clear:hover{color:#fff}
  #cmpOverlay{position:fixed;inset:0;z-index:70;background:rgba(11,27,51,.55);display:none;align-items:center;justify-content:center;padding:20px}
  #cmpOverlay.show{display:flex}
  .co-panel{background:#fff;border-radius:20px;max-width:min(96vw,900px);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 40px 90px -30px rgba(10,20,40,.5)}
  .co-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;border-bottom:1px solid var(--line);font-family:var(--mn);font-size:17px;color:var(--ink)}
  .co-close{font-size:22px;line-height:1;color:#7A899E;background:none;border:none;cursor:pointer;padding:4px 10px;border-radius:8px;transition:background .18s,color .18s}
  .co-close:hover{background:#F0F4FB;color:var(--ink)}
  .co-scroll{overflow:auto;padding:6px 10px 16px}
  .co-table{border-collapse:collapse;width:100%;min-width:560px;font-size:14px;color:#33425A}
  .co-table th{font-family:var(--mn);font-weight:800;font-size:14px;color:var(--ink);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
  .co-table td{padding:10px 14px;border-bottom:1px solid #EEF2F7;vertical-align:top}
  .co-table td:first-child{color:#7A899E;font-size:12.5px;white-space:nowrap}
  .co-best{font-family:var(--mn);font-weight:800;font-size:10.5px;color:#1F8A38;background:#E4F6EE;border:1px solid #BCEBD6;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px}
  .co-cta{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-family:var(--mn);font-weight:800;font-size:13.5px;color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);border-radius:10px;padding:10px 14px;transition:transform .16s cubic-bezier(.23,1,.32,1)}
  .co-cta:active{transform:scale(.97)}
  @media(prefers-reduced-motion:reduce){#cmpBar{transition:none}}
  .af-chip:hover{background:#DFF2E4;border-color:#B4DEC0}
  .af-x{font-size:15px;line-height:1;color:inherit}
  .af-reset{font-family:var(--mn);font-weight:700;font-size:12.5px;color:var(--muted);background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:6px 4px}
  .af-reset:hover{color:var(--ink)}
  .res-head .c{font-family:var(--mn);font-weight:700;font-size:17px;color:var(--ink)}
  .res-head .c span{color:var(--soft-text);font-weight:600;font-size:14px}
  .badge-live{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-family:var(--mn);font-weight:700;padding:6px 12px;border-radius:999px;background:#F0F3F8;color:var(--soft);border:1px solid var(--line)}
  .badge-live.on{background:#E9F7F0;color:var(--green);border-color:#BCEBD6}

  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:20px}
  /* Tarifkarten (Wrapper-Klasse; inneres Markup kommt aus dbt_lib.php/homepage.js) */
  .tcard{background:#fff;border:1px solid #E7ECF3;border-radius:22px;padding:22px 20px 20px;display:flex;flex-direction:column;text-align:center;box-shadow:var(--sh-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s;animation:rise .5s var(--ease) both}
  .tcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:#C6E6CE}
  .tcard.best{border-color:#BCEBD6;box-shadow:0 3px 8px rgba(11,122,85,.06),0 30px 60px -34px rgba(11,122,85,.45)}
  .tcard.best:hover{border-color:#8FDDBE;box-shadow:0 4px 10px rgba(11,122,85,.08),0 38px 72px -34px rgba(11,122,85,.55)}
  .tcard a{cursor:pointer}
  .tc-cta:hover{filter:brightness(1.07)}
  .foot-note{font-size:12px;color:var(--soft-text);margin-top:22px;line-height:1.5;max-width:840px}
  .empty{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted);font-size:15px}

  /* faq */
  .faq{padding:74px 0;background:var(--bg)}
  .faq .wrap{max-width:820px}
  .faq-list{margin:0 auto;display:flex;flex-direction:column;gap:14px}
  .qa{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .2s}
  .qa:hover{border-color:#C6E6CE}
  .qa.open{border-color:#1F8A3855;box-shadow:0 18px 44px -24px rgba(16,32,60,.3)}
  .qa > button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:18px 22px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:var(--mn);font-weight:700;font-size:16px;color:var(--ink)}
  .qa .ans{max-height:0;opacity:0;overflow:hidden;transition:.35s;padding:0 22px}
  .qa.open .ans{max-height:320px;opacity:1;padding:0 22px 20px}
  .qa .ans p{margin:0;color:var(--muted);font-size:15px;line-height:1.65}

  /* seo + cta + footer */
  .seo{padding:74px 0;background:transparent}
  .seo .wrap{max-width:880px}
  .seo h2{font-size:clamp(24px,3.6vw,36px);line-height:1.15}
  .seo h3{font-size:clamp(19px,2.6vw,22px);margin-top:34px}
  .seo p{font-size:clamp(15px,2.2vw,16.5px);line-height:1.7;color:#46566E;margin:14px 0 0}
  .keybox{background:#fff;border:1px solid #E3E9F2;border-radius:18px;padding:22px 24px;margin:24px 0 4px;box-shadow:var(--sh-sm)}
  .kb-h{font-family:var(--mn);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}
  .keybox ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;color:#33425A;font-size:15.5px;line-height:1.55}
  .keybox strong{color:var(--ink)}
  /* hub */
  .hub{padding:20px 0 8px;background:transparent}
  .hub h2{font-weight:800;font-size:clamp(20px,3vw,26px);margin:0 0 16px}
  .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
  .hub-grid a{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;background:#fff;border:1px solid #E7ECF3;border-radius:12px;padding:13px 16px;font-family:var(--mn);font-weight:600;font-size:14px;color:#33425A;transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
  .hub-grid a:hover{border-color:#A6D8B2;transform:translateY(-2px);box-shadow:var(--sh-sm)}
  .hub-grid a:hover i{transform:translate(2px,-2px);color:var(--primary)}
  .hub-grid a i{font-size:13px;color:var(--soft);transition:transform .18s var(--ease),color .18s}
  .cta-band{padding:18px clamp(16px,4vw,28px);background:transparent}
  .cta-inner{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;border-radius:28px;background:radial-gradient(120% 130% at 0% 0%,#1F8A38,#156327 60%,#0D4A1F);padding:clamp(36px,6vw,54px) clamp(20px,4vw,40px);text-align:center;box-shadow:0 40px 80px -44px #0D4A1F}
  .cta-inner::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(59,170,87,.55),transparent 65%);top:-210px;right:-120px;pointer-events:none}
  .cta-inner::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(14,158,110,.32),transparent 65%);bottom:-190px;left:-100px;pointer-events:none}
  .cta-inner h2{position:relative;color:#fff;font-size:clamp(26px,4vw,40px);line-height:1.1}
  .cta-inner p{position:relative;font-size:clamp(15px,2.4vw,18px);color:#C5E6CD;margin:14px auto 0;max-width:540px;line-height:1.55}
  .cta-inner a{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:26px;text-decoration:none;font-family:var(--mn);font-weight:700;font-size:17px;padding:16px 28px;border-radius:14px;background:#fff;color:#156327;box-shadow:0 18px 40px -16px rgba(0,0,0,.4);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .cta-inner a:hover{transform:translateY(-2px);box-shadow:0 24px 48px -16px rgba(0,0,0,.5)}
  footer.ft{background:#0B1B33;color:#9FB1CC;padding:50px 0 28px}
  .ft .cols{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
  .ft .brand{max-width:300px}
  .ft .brand p{font-size:14px;line-height:1.6;color:#7E91AE;margin-top:16px}
  .ft .grp{display:flex;gap:48px;flex-wrap:wrap}
  .ft .grp .ft-h{font-family:var(--mn);font-weight:700;color:#fff;font-size:14px;margin:0 0 14px}
  .ft .grp a{display:block;color:#9FB1CC;text-decoration:none;font-size:14px;margin-bottom:10px;transition:color .18s}
  .ft .grp a:hover{color:#fff}
  .ft .copy{margin-top:32px;padding-top:20px;border-top:1px solid #21344F;font-size:12.5px;color:#647894}

  @media(max-width:880px){ .nav{display:none} }
  @media(max-width:560px){ .hd .wrap{gap:10px} .hd .btn-pill{padding:10px 14px;font-size:13.5px} .logo .wm{font-size:16.5px} .logo .mark{width:32px;height:32px} }

  /* Ablauf-Dial auf Mobile: gestapelt, zentriert, passt in die Breite */
  @media(max-width:760px){
    .ablauf{padding:44px 0}
    .ab-grid{padding:20px 14px 24px;gap:12px}
    .ab-stage,.ab-side{flex:1 1 100%;min-width:0;width:100%}
    .ab-side{margin-top:4px}
    .cap{justify-content:center;max-width:440px;margin-left:auto;margin-right:auto}
    .segs{max-width:440px;margin-left:auto;margin-right:auto}
  }


  /* ================= Header: Mega-Menü + Mobile-Nav ================= */
  .hd-right{display:flex;align-items:center;gap:10px}
  .nav-mega{position:static}
  .nav-mega-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#42526B;font-size:15px;font-weight:600;padding:4px 0}
  .nav-mega-btn .chev{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease)}
  .nav-mega:hover .nav-mega-btn,.nav-mega:focus-within .nav-mega-btn{color:var(--primary)}
  .nav-mega:hover .chev,.nav-mega:focus-within .chev{transform:rotate(225deg) translateY(-2px)}
  .mega{position:absolute;left:0;right:0;top:100%;display:block;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s linear .18s;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);box-shadow:0 34px 60px -30px rgba(11,27,51,.35)}
  .nav-mega:hover .mega,.nav-mega:focus-within .mega{visibility:visible;opacity:1;transform:none;transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s}
  .mega-grid{max-width:1200px;margin:0 auto;padding:26px clamp(16px,4vw,28px) 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
  .mega .mg .mg-h{font-family:var(--mn);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
  .mega .mg a{display:block;text-decoration:none;color:#33425A;font-size:14.5px;font-weight:500;padding:6px 0;border-radius:6px;transition:color .15s}
  .mega .mg a:hover{color:var(--primary)}
  .mega .mg a::after{content:none}
  /* Mobile-Nav (ohne JS bedienbar: <details>) */
  .mnav{display:none;position:static}
  .mnav > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff}
  .mnav > summary::-webkit-details-marker{display:none}
  .mnav-burger{display:flex;flex-direction:column;gap:4.5px;width:18px}
  .mnav-burger i{display:block;height:2px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
  .mnav[open] .mnav-burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .mnav[open] .mnav-burger i:nth-child(2){opacity:0}
  .mnav[open] .mnav-burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  /* Blur macht den Header sonst zum Containing Block für das fixed-Panel */
  header.hd:has(.mnav[open]){backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  /* Logo + Burger-X über dem geöffneten Panel halten (sichtbar + klickbar) */
  .hd .logo{position:relative;z-index:46}
  .mnav > summary{position:relative;z-index:46;background:#fff}
  .mnav-panel{position:fixed;left:0;right:0;top:0;height:100svh;background:#fff;overflow-y:auto;padding:78px clamp(16px,4vw,24px) 40px;z-index:40;animation:rise .25s var(--ease)}
  .mnav-top{display:block;text-decoration:none;font-family:var(--mn);font-weight:800;font-size:16px;color:var(--primary);padding:14px 4px;border-bottom:1px solid var(--line)}
  .mnav-grp{border-bottom:1px solid var(--line)}
  .mnav-grp summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:var(--mn);font-weight:700;font-size:15.5px;color:var(--ink);padding:15px 4px;min-height:44px}
  .mnav-grp summary::-webkit-details-marker{display:none}
  .mnav-chev{width:9px;height:9px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg);transition:transform .2s var(--ease);flex-shrink:0}
  .mnav-grp[open] .mnav-chev{transform:rotate(225deg)}
  .mnav-links{padding:2px 4px 14px}
  .mnav-links a{display:flex;align-items:center;text-decoration:none;color:#42526B;font-size:15px;font-weight:500;min-height:44px;padding:0 10px;border-radius:10px}
  .mnav-links a:active{background:#F0F4FB}
  .mnav-static{padding:14px 4px}
  .mnav-static a{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-family:var(--mn);font-weight:700;font-size:15.5px;min-height:44px}
  @media(max-width:880px){ .nav{display:none} .mnav{display:block} }

  /* ================= Breadcrumbs ================= */
  .crumbs{font-size:13px;color:var(--soft);margin-bottom:16px}
  .crumbs a{color:var(--primary);text-decoration:none}
  .crumbs a:hover{text-decoration:underline}

  /* ================= Kategorie-Seiten ================= */
  .kat-kicker{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .kicker-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-size:12.5px;font-weight:700;color:var(--primaryd);background:#E9F6EC;border:1px solid #CFEBD6;padding:6px 13px;border-radius:999px}
  .kicker-pill .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green2);animation:livedot 2s ease-out infinite}
  .kat-h1{font-family:var(--mn);font-weight:800;color:var(--ink);font-size:clamp(27px,4.2vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:820px}
  .kat-sub{font-size:clamp(15px,2.2vw,17px);line-height:1.65;color:#46566E;margin:16px 0 0;max-width:780px}
  .kat-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
  .kat-stats > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;box-shadow:var(--sh-sm)}
  .kat-stats .k{font-size:11.5px;color:var(--soft-text);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  .kat-stats .v{font-family:var(--mn);font-weight:800;font-size:20px;color:var(--ink);margin-top:2px}
  .kat-stats .v.green{color:var(--green)}
  .kat-stats .v .u{font-size:13px;color:var(--soft);font-weight:700}
  .kat-sec-h{font-family:var(--mn);font-weight:800;color:var(--ink);font-size:clamp(20px,3vw,26px);letter-spacing:-.01em;margin:0 0 16px}
  .kat-intro{max-width:820px;margin:40px 0 0}
  .kat-intro p{font-size:clamp(15px,2.2vw,16.5px);line-height:1.7;color:#46566E;margin:13px 0 0}
  /* Netzvergleich: guenstigster Effektivpreis je Netz (einzigartige Live-Daten). */
  .kat-netzcompare{margin:40px 0 0}
  .kat-nc-lead{font-size:clamp(15px,2.2vw,16.5px);line-height:1.7;color:#46566E;margin:10px 0 18px;max-width:820px}
  .kat-nc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;max-width:820px}
  .kat-nc{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:18px 20px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-sm);text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
  a.kat-nc:hover{border-color:#B4DEC0;box-shadow:var(--sh-md);transform:translateY(-2px)}
  .kat-nc.best{border-color:var(--green2);box-shadow:0 12px 28px -16px rgba(14,158,110,.5)}
  .kat-nc .nc-ab{font-family:var(--mn);font-weight:700;font-size:15px;color:var(--ink)}
  .kat-nc .nc-ab b{font-size:22px;color:var(--green);letter-spacing:-.02em}
  .kat-nc .nc-ab span{font-family:var(--bd);font-weight:500;font-size:11px;color:var(--soft);margin-left:4px}
  .kat-nc .nc-n{font-family:var(--bd);font-size:12.5px;color:var(--soft)}
  .kat-faq{max-width:820px;margin:38px 0 0}
  .kat-faq-list{display:flex;flex-direction:column;gap:12px}
  .kat-faq-list details{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px 20px;transition:border-color .2s}
  .kat-faq-list details:hover{border-color:#C6E6CE}
  .kat-faq-list summary{font-family:var(--mn);font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;list-style:none}
  .kat-faq-list summary::-webkit-details-marker{display:none}
  .kat-faq-list p{margin:10px 0 0;color:var(--muted);font-size:14.5px;line-height:1.6}
  .kat-rel{margin:38px 0 0}
  .kat-deals{margin:34px 0 0}
  .deals-grid{margin-top:6px}

  /* Chip als Navigations-Link (Kategorie-Finder) */
  a.chip{text-decoration:none}
  .chip .chip-x{margin-left:7px;font-weight:800;opacity:.85}

  /* ================= Null-Treffer-Intelligenz (Zustand C) ================= */
  .condhit{margin-top:28px;background:linear-gradient(135deg,#F1FAF3 0%,#EFFBF5 100%);border:1px solid #CBE9D3;border-radius:20px;padding:24px clamp(18px,3vw,30px) 26px;box-shadow:var(--sh-sm)}
  .condhit .ch-head h2,.condhit .ch-head h3{font-family:var(--mn);font-weight:800;color:var(--ink);font-size:clamp(18px,2.6vw,23px);line-height:1.25;letter-spacing:-.01em;margin:12px 0 0}
  .condhit .ch-head p{font-size:14.5px;line-height:1.6;color:#46566E;margin:10px 0 0;max-width:640px}
  .ch-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mn);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8A5A00;background:#FFF2D9;border:1px solid #F0D9A6;padding:5px 12px;border-radius:999px}
  .ch-toggle,.ch-relax{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-family:var(--mn);font-weight:700;font-size:15px;padding:14px 22px;border-radius:13px;border:none;text-decoration:none;cursor:pointer;background:var(--grad-cta);color:#fff;box-shadow:0 16px 32px -14px rgba(31,138,56,.8);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .ch-toggle:hover,.ch-relax:hover{transform:translateY(-2px);box-shadow:0 22px 40px -16px rgba(31,138,56,.9)}
  .ch-second{margin-top:18px;padding-top:18px;border-top:1px dashed #CBE9D3}
  .condhit-js{grid-column:1/-1}
  .relax{margin-top:20px}
  .relax-h{font-family:var(--mn);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:10px}
  .relax-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
  .relax-grid a{display:flex;flex-direction:column;gap:3px;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px 16px;transition:border-color .18s,transform .18s var(--ease),box-shadow .18s}
  .relax-grid a:hover{border-color:#A6D8B2;transform:translateY(-2px);box-shadow:var(--sh-sm)}
  .relax-grid b{font-family:var(--mn);font-weight:700;font-size:14px;color:var(--ink)}
  .relax-grid span{font-size:12.5px;color:var(--green);font-weight:600}

  /* ================= Mehr laden ================= */
  .loadmore-wrap{display:flex;justify-content:center;margin-top:22px}
  .loadmore{font-family:var(--mn);font-weight:700;font-size:15px;padding:14px 26px;border-radius:13px;border:1.5px solid #C6E6CE;background:#fff;color:var(--primaryd);cursor:pointer;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s var(--ease)}
  .loadmore:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh-sm)}
  .loadmore .lm-rest{color:var(--soft-text);font-weight:600}

  /* ================= Top-Deals-Sektion ================= */
  .topdeals{padding:64px 0;background:var(--bg)}

  /* ================= Tarif-Detailseite: Vergleich + Sticky-CTA ================= */
  .cmp-table{margin-top:38px;max-width:720px}
  .cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .cmp-col{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 22px}
  .cmp-col .cmp-h{font-family:var(--mn);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
  .cmp-col .cmp-v{font-family:var(--mn);font-weight:800;font-size:clamp(26px,4vw,34px);color:var(--ink);margin-top:8px;letter-spacing:-.02em}
  .cmp-col .cmp-v span{font-size:15px;color:var(--soft);font-weight:700}
  .cmp-col .cmp-s{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
  .cmp-win{border-color:#BCEBD6;background:linear-gradient(180deg,#F4FBF8,#fff);box-shadow:0 3px 8px rgba(11,122,85,.06),0 26px 52px -32px rgba(11,122,85,.4)}
  .cmp-win .cmp-v{color:var(--green)}
  .cmp-badge{position:absolute;top:-12px;right:14px;font-family:var(--mn);font-weight:800;font-size:12.5px;color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);padding:6px 13px;border-radius:999px;box-shadow:0 10px 22px -10px rgba(11,122,85,.8)}
  .sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px clamp(14px,4vw,20px) calc(10px + env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:14px;box-shadow:0 -14px 34px -20px rgba(11,27,51,.35)}
  .sticky-cta .sc-price{font-size:12.5px;color:var(--muted);font-weight:600}
  .sticky-cta .sc-price span{display:block;font-family:var(--mn);font-weight:800;font-size:20px;color:var(--green)}
  .sticky-cta a{flex-shrink:0;text-decoration:none;font-family:var(--mn);font-weight:700;font-size:15px;padding:13px 26px;border-radius:12px;background:var(--grad-cta);color:#fff;box-shadow:0 14px 28px -12px rgba(31,138,56,.8)}
  @media(max-width:760px){ .sticky-cta{display:flex} }


  /* ================= So funktioniert's: Swipe-Story mit Partner-Mockups ================= */
  .howto{padding:56px 0 48px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .swip{position:relative;max-width:920px;margin:0 auto}
  .swip-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 4px 10px;-webkit-overflow-scrolling:touch}
  .swip-track::-webkit-scrollbar{display:none}
  .swip-track:focus-visible{outline:3px solid rgba(31,138,56,.45);outline-offset:4px;border-radius:12px}
  .swip-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,4vw,40px);align-items:center;background:linear-gradient(135deg,#F6FBF7 0%,#F3FBF7 100%);border:1px solid #E0E8F4;border-radius:22px;padding:clamp(18px,3.5vw,34px)}
  .swip-cap .swip-n{display:inline-block;font-family:var(--mn);font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--primaryd);background:#E5F5E9;border:1px solid #C8E8D0;padding:5px 12px;border-radius:999px}
  .swip-cap h3{font-family:var(--mn);font-weight:800;font-size:clamp(19px,2.8vw,25px);color:var(--ink);line-height:1.2;margin:12px 0 0;letter-spacing:-.01em}
  .swip-cap p{font-size:clamp(14px,2vw,15.5px);line-height:1.6;color:#46566E;margin:10px 0 0}
  .swip-cap p strong{color:var(--green)}
  /* Browser-Fenster-Mockup */
  .mock-win{position:relative;background:#fff;border:1px solid #DFE7F2;border-radius:16px;box-shadow:0 18px 44px -22px rgba(11,27,51,.3);overflow:hidden;max-width:400px;width:100%;justify-self:center}
  .mock-bar{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 44px;color:#fff;min-height:38px;border-radius:15px 15px 0 0}
  .mock-dots{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;gap:5px}
  .mock-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
  .mock-name{font-family:var(--mn);font-weight:800;font-size:13.5px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center}
  .mock-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
  .mock-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:#54657E}
  .mock-row b{color:var(--ink);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
  .mock-prod{justify-content:flex-start;gap:12px;padding-bottom:10px;border-bottom:1px solid #EEF2F8}
  .mock-prod div{display:flex;flex-direction:column;gap:2px;min-width:0}
  .mock-prod b{font-family:var(--mn);font-size:14px;line-height:1.25}
  .mock-prod span{font-size:12px;color:#64748B}
  .mock-phone{flex-shrink:0;width:26px;height:40px;border-radius:6px;border:2px solid #33425A;position:relative;background:#F4F7FC}
  .mock-phone::after{content:"";position:absolute;left:50%;top:3px;transform:translateX(-50%);width:8px;height:2.5px;border-radius:2px;background:#33425A}
  .mock-price{background:#F7F9FC;border:1px solid #EDF1F6;border-radius:11px;padding:10px 13px}
  .mock-price b{font-family:var(--mn);font-weight:800;font-size:19px}
  .mock-green b{color:var(--green)}
  .mock-cta{margin-top:2px;text-align:center;color:#fff;font-family:var(--mn);font-weight:700;font-size:14px;padding:12px;border-radius:11px;filter:saturate(1.05)}
  .mock-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--mn);font-weight:700;font-size:12.5px;color:#1F8A38;background:#E4F6EE;border:1px solid #BCEBD6;padding:6px 12px;border-radius:999px}
  .mock-badge i{font-size:14px}
  /* Paket-Mockup */
  .mock-pkg{display:flex;flex-direction:column;gap:14px;max-width:400px;width:100%;justify-self:center}
  .pkg-box{position:relative;background:linear-gradient(180deg,#E8CFA8,#DCBE8F);border-radius:14px;height:86px;box-shadow:0 16px 36px -20px rgba(120,84,30,.55)}
  .pkg-tape{position:absolute;left:50%;top:0;bottom:0;width:34px;transform:translateX(-50%);background:rgba(255,255,255,.4)}
  .pkg-label{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;background:#fff;border-radius:7px;padding:5px 12px;font-size:11.5px;font-weight:700;color:#33425A;box-shadow:0 4px 10px -4px rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:88%;text-align:center}
  .pkg-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pkg-item{background:#fff;border:1px solid #DFE7F2;border-radius:14px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;box-shadow:0 12px 28px -18px rgba(11,27,51,.28)}
  .pkg-item b{font-family:var(--mn);font-size:13.5px;color:var(--ink)}
  .pkg-sim{display:flex;align-items:center;justify-content:center;width:34px;height:42px;border-radius:8px 8px 8px 14px;background:linear-gradient(135deg,#FFD98A,#E9A93D);font-family:var(--mn);font-weight:800;font-size:10px;color:#6B4A00}
  .pkg-tag{font-family:var(--mn);font-weight:800;font-size:11px;padding:4px 10px;border-radius:999px}
  .pkg-red{color:#B4232A;background:#FDEBEC;border:1px solid #F5C6C9}
  .pkg-green{color:#1F8A38;background:#E4F6EE;border:1px solid #BCEBD6}
  /* Großes Telefon (Schritt 4) */
  .mock-phonebig{position:relative;max-width:230px;width:70%;aspect-ratio:9/17;justify-self:center;background:linear-gradient(180deg,#0F1E36,#16305A);border-radius:28px;border:3px solid #0B1B33;box-shadow:0 24px 50px -24px rgba(11,27,51,.55);overflow:hidden}
  .pb-notch{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:64px;height:16px;border-radius:999px;background:#0B1B33}
  .pb-status{position:absolute;top:34px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#C5E6CD;font-family:var(--mn);font-weight:700;font-size:12px}
  .pb-bars{display:flex;align-items:flex-end;gap:2.5px}
  .pb-bars i{width:4px;background:#36D399;border-radius:1.5px}
  .pb-bars i:nth-child(1){height:5px}.pb-bars i:nth-child(2){height:8px}.pb-bars i:nth-child(3){height:11px}.pb-bars i:nth-child(4){height:14px}
  .pb-toast{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.97);border-radius:13px;padding:12px 14px;font-family:var(--mn);font-weight:700;font-size:13px;color:var(--ink);box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
  .pb-toast i{color:#2FA04C;font-size:18px}
  /* Banking-App (Schritt 6) */
  .mock-bank{background:#fff;border:1px solid #DFE7F2;border-radius:16px;box-shadow:0 18px 44px -22px rgba(11,27,51,.3);overflow:hidden;max-width:400px;width:100%;justify-self:center}
  .bank-head{background:linear-gradient(120deg,#0F1E36,#16305A);color:#fff;font-family:var(--mn);font-weight:800;font-size:13.5px;padding:12px 16px}
  .bank-tx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid #EEF2F8}
  .bank-tx b{display:block;font-family:var(--mn);font-size:13.5px;color:var(--ink)}
  .bank-tx span{font-size:12px;color:#64748B}
  .bank-amt{font-family:var(--mn);font-weight:800;font-size:20px;color:var(--green);white-space:nowrap}
  .bank-calc{display:flex;flex-direction:column;gap:3px;padding:13px 16px;background:#F7FBF9}
  .bank-calc span{font-size:12.5px;color:#54657E}
  .bank-calc b{font-family:var(--mn);font-weight:800;font-size:15px;color:var(--green)}
  /* Pfeile + Dots */
  .swip-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .swip-arrow:hover{transform:translateY(-50%) scale(1.07);box-shadow:var(--sh-md)}
  .swip-prev{left:-14px}.swip-next{right:-14px}
  .chev-l,.chev-r{width:10px;height:10px;border-right:2.5px solid var(--primaryd);border-bottom:2.5px solid var(--primaryd)}
  .chev-l{transform:rotate(135deg);margin-left:3px}
  .chev-r{transform:rotate(-45deg);margin-right:3px}
  .swip-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:14px}
  .swip-dots{display:flex;gap:7px}
  .swip-dot{width:26px;height:26px;border-radius:50%;border:none;background:transparent;cursor:pointer;position:relative;padding:0}
  .swip-dot::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#CBD6E6;transition:background .2s,transform .2s var(--ease)}
  .swip-dot.on::after{background:var(--primary);transform:scale(1.35)}
  .swip-step{font-family:var(--mn);font-weight:600;font-size:13px;color:var(--soft-text)}
  .swip-step b{color:var(--ink)}
  .howto-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:26px}
  .howto-note{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--soft-text);font-weight:600;font-family:var(--mn)}
  .howto-note i{color:var(--green2);font-size:16px}
  @media(max-width:760px){ .topdeals{display:none} }
  @media(max-width:720px){
    .swip-slide{grid-template-columns:1fr;gap:16px;padding:48px 16px 20px}
    .mock-win,.mock-bank,.mock-pkg{max-width:340px}
    .mock-phonebig{max-width:170px}
    .swip-arrow{display:none}
    .swip-cap{text-align:center}
  }

  .howto-link{font-family:var(--mn);font-weight:600;font-size:14px;color:var(--primaryd);text-decoration:none}
  .howto-link:hover{text-decoration:underline}

  /* ================= Story-Upgrade: Klick-Cursor, URL-Leiste, Rechnung ================= */
  .mock-addr{display:flex;justify-content:center;background:#F2F5FA;border-bottom:1px solid #E8EDF5;padding:6px 12px}
  .mock-addr span{font-family:var(--bd);font-weight:600;font-size:11px;color:#54657E;background:#fff;border:1px solid #E3E9F2;padding:3px 14px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .mock-foot{font-size:10.5px;color:var(--soft-text);margin-top:-4px}
  .mock-cur{position:absolute;z-index:6;left:56%;bottom:26px;opacity:0;transform:translate(120px,90px);pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}
  .swip-slide.on .mock-cur{animation:curIn 1s .6s var(--ease) forwards,curClick .35s 1.8s ease forwards}
  @keyframes curIn{from{opacity:0;transform:translate(120px,90px)}to{opacity:1;transform:translate(0,0)}}
  @keyframes curClick{0%{transform:translate(0,0) scale(1)}45%{transform:translate(0,0) scale(.78)}100%{transform:translate(0,0) scale(1)}}
  .swip-slide.on .mock-cta{animation:ctaPress .32s 1.85s ease}
  @keyframes ctaPress{0%{transform:scale(1)}50%{transform:scale(.96);filter:brightness(.85)}100%{transform:scale(1)}}
  .mock-done{position:absolute;top:-38px;left:50%;display:inline-flex;align-items:center;gap:6px;font-family:var(--mn);font-weight:800;font-size:12.5px;color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);padding:7px 16px;border-radius:999px;box-shadow:0 12px 24px -10px rgba(11,122,85,.8);opacity:0;transform:translate(-50%,10px) scale(.85);z-index:7;white-space:nowrap}
  .swip-slide.on .mock-done{animation:donePop .45s 2.3s var(--ease) forwards}
  .swip-slide.on .mock-pkg + .mock-done, .swip-slide.on .mock-badge ~ .mock-done{animation-delay:1.4s}
  @keyframes donePop{to{opacity:1;transform:translate(-50%,0) scale(1)}}
  .bank-calc .bc-r{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#54657E;padding:3px 0}
  .bank-calc .bc-r b{font-weight:600;color:#33425A;white-space:nowrap}
  .bank-calc .bc-g b{color:var(--green)}
  .bank-calc .bc-sum{border-top:1px solid #E3EDE7;margin-top:5px;padding-top:8px}
  .bank-calc .bc-sum b{font-weight:700}
  .bank-calc .bc-eff{border-top:1px dashed #CDE3D8;margin-top:4px;padding-top:8px}
  .bank-calc .bc-eff span{font-family:var(--mn);font-weight:700;color:var(--ink)}
  .bank-calc .bc-eff b{font-family:var(--mn);font-weight:800;font-size:16px;color:var(--green)}

  /* Slide 1: Tarif im Fokus (GB + Netz), Handy klein */
  .mock-prod{flex-direction:column;align-items:stretch;gap:4px}
  .mock-prod .mock-tarif{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
  .mock-tarif b{font-family:var(--mn);font-weight:800;font-size:22px;color:var(--ink);letter-spacing:-.01em}
  .mock-tarif .mt-im{font-size:13px;color:var(--soft-text);font-weight:500}
  .mock-prod .mock-tarifsub{display:block;flex-direction:row;font-size:12px;color:#64748B}
  .mock-devrow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--soft-text);padding:7px 11px;background:#F7F9FC;border:1px dashed #DCE3EC;border-radius:9px}
  .mock-phone-sm{width:14px;height:22px;border-width:1.5px;border-radius:3.5px}
  .mock-phone-sm::after{width:5px;height:1.5px;top:2px}

  /* ================= Hero-Quick-Start: Suche auf Screen 1 (Check24-Muster) ================= */
  /* Schnell-Chips statt Textfeld: kein Kasten mehr, nur die Ein-Tipp-Sprunge. */
  .qs{max-width:640px;margin:18px auto 0}
  .qs-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center}
  .qs-lead{font-family:var(--mn);font-weight:700;font-size:13.5px;color:var(--soft)}
  .qs-chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:9px 16px;border-radius:11px;cursor:pointer;font-size:14px;font-family:var(--mn);font-weight:600;background:#F4F7FC;color:#33425A;border:1px solid #E0E8F4;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
  .qs-chip:hover{border-color:#A6D8B2;color:var(--primaryd);background:#fff;transform:translateY(-1px)}
  .qs-chip i{color:var(--primary);font-size:15px}
  @media(max-width:560px){
    .qs-chips{justify-content:flex-start}
    .qs-chip{flex:1 1 45%;justify-content:center}
  }

  /* ===== Finder-Layout: feste Filter-Sidebar links + Ergebnisse rechts ===== */
  /* Eine Leserichtung statt zwei: Der Filter stand als Spalte NEBEN der Liste,
     das Auge musste zwei Bereiche parallel lesen (Jans Rueckmeldung 23.08.2026).
     Jetzt liegt er als schmale Leiste darueber und ist zugeklappt -- die Liste
     bekommt die volle Breite. Aufklappen per Klick, wie am Handy. */
  .finder-layout{display:block;margin-top:6px}
  .finder-main{margin-top:14px}
  /* Filter-Umschalter: auf dem Desktop unsichtbar, greift erst unter 920px. */
  .finder-toggle{display:flex;width:100%;align-items:center;gap:10px;min-height:48px;padding:12px 16px;border-radius:13px;cursor:pointer;font-family:var(--mn);font-weight:700;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);text-align:left}
  .finder-toggle>i:first-child{color:var(--primary);font-size:18px;flex:0 0 auto}
  .finder-toggle>span{flex:1 1 auto}
  .finder-toggle b{font-weight:700;color:var(--primary);margin-left:6px}
  .finder-toggle .ft-caret{color:var(--soft);font-size:16px;flex:0 0 auto;transition:transform .2s var(--ease)}
  .finder-toggle:hover{border-color:#B4DEC0}
  @media(prefers-reduced-motion:reduce){ .finder-toggle .ft-caret{transition:none} }
  .finder-side{position:static;max-height:none;overflow:visible}
  /* Zugeklappt starten -- homepage.js oeffnet nur, wenn der Nutzer selbst
     Filter mitgebracht hat (data-basis). */
  .finder-side .finder-box{display:none}
  .finder-side.offen .finder-box{display:block;margin-top:12px}
  .finder-side.offen .ft-caret{transform:rotate(180deg)}
  .finder-side::-webkit-scrollbar{width:8px}
  .finder-side::-webkit-scrollbar-thumb{background:#D6DEEA;border-radius:8px}
  .finder-side .finder-box{padding:18px 15px;gap:14px}
  .finder-side .ai-box{padding:13px 12px 14px;margin:-2px -2px 0}
  .finder-side .ai-row{flex-direction:column;align-items:stretch}
  .finder-side .ai-go{justify-content:center}
  .finder-side .fcols{flex-direction:column;gap:14px}
  .finder-side .fcol{flex:1 1 auto;min-width:0}
  .finder-main{min-width:0}
  .finder-main .res-head{margin-top:0}

  /* ===== CHECK24-Stil: horizontale Deal-Zeilen (Finder-Ergebnisse) ===== */
  .deal-list{display:flex;flex-direction:column;gap:14px}
  /* Ruhige Zeile statt drei Spalten: Vorher lagen Marke, drei Spec-Kaesten und
     Preisblock NEBENEINANDER, dazu eine Fusszeile -- vier Bereiche gleichzeitig.
     Jetzt links Name/Geraet mit den Eckdaten darunter, rechts Preis und Knopf. */
  .deal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(212px,auto);gap:9px 24px;align-items:start;background:#fff;border:1px solid #E4EAF2;border-radius:18px;padding:20px 24px;box-shadow:0 1px 2px rgba(16,32,60,.04);transition:box-shadow .2s ease,border-color .2s ease}
  .deal-row:hover{border-color:#C5E6CD;box-shadow:0 18px 36px -22px rgba(31,138,56,.35)}

  .deal-row.best{border-color:#BCEBD6;box-shadow:0 18px 40px -24px rgba(11,122,85,.45)}
  .dr-brand{display:flex;flex-direction:column;gap:3px;min-width:0}
  .dr-badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:#1F8A38;color:#fff;font-family:var(--mn);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;margin-bottom:6px}
  .dr-badge i{color:#FFD98A}
  .dr-logo{margin:2px 0 4px}
  .dr-name{font-family:var(--mn);font-weight:800;font-size:21px;color:#0F1E36;line-height:1.18;letter-spacing:-.01em}
  .dr-name a{text-decoration:none;color:inherit}
  .dr-name a:hover{color:var(--primary)}
  .dr-dev{font-size:13px;color:#5A6B82;margin-top:1px}
  .dr-dev-hint{color:#8A97A8;font-size:12px}
  .dr-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
  .dr-tag{font-size:11px;font-weight:600;color:#5A6B82;background:#F0F3F8;border:1px solid #E4EAF2;padding:3px 9px;border-radius:6px}
  .dr-specs{display:flex;flex-wrap:wrap;gap:10px}
  .dr-seg{flex:1 1 92px;min-width:84px;background:#F6F8FC;border:1px solid #EDF1F7;border-radius:12px;padding:12px 10px;text-align:center}
  .dr-seg b{display:block;font-family:var(--mn);font-weight:800;font-size:16px;color:#0F1E36;line-height:1.15}
  .dr-seg span{display:block;font-size:11px;color:#7A899E;margin-top:4px}
  .dr-buy{display:flex;flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .dr-anchor{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:20px}
  /* Kein line-through: Der Grundpreis entfaellt nicht, er laeuft weiter --
     er wird nur durch den Geraeteankauf gegengerechnet. Durchstreichen
     wuerde eine Preisermaessigung suggerieren, die es nicht gibt. */
  .dr-was{font-size:12.5px;color:#64748B}
  .dr-save{font-family:var(--mn);font-weight:800;font-size:11.5px;color:#1F8A38;background:#E4F6EE;border:1px solid #BCEBD6;padding:2px 8px;border-radius:999px}
  .dr-price{display:flex;flex-direction:column;align-items:center;line-height:1}
  .dr-price b{font-family:var(--mn);font-weight:800;font-size:31px;letter-spacing:-.02em;color:#1F8A38}
  .dr-price span{font-size:11px;color:#7A899E;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
  .dr-more{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;font-family:var(--mn);font-weight:800;font-size:15.5px;padding:15px 16px;border-radius:13px;background:linear-gradient(135deg,#2FA04C,#1F8A38);color:#fff;box-shadow:0 14px 28px -12px rgba(31,138,56,.8);transition:transform .14s ease,box-shadow .2s ease}
  .dr-more:hover{transform:translateY(-2px);box-shadow:0 22px 42px -14px rgba(31,138,56,.9)}
  .dr-more:active{transform:translateY(0) scale(.98)}
  .dr-foot{grid-column:1 / -1;border-top:1px solid #EEF2F7;margin-top:4px;padding-top:16px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .dr-partners{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px}
  .dr-partner{display:flex;align-items:center;gap:9px}
  .dr-plabel{font-size:12px;color:#7A899E;font-weight:600}
  .dr-pbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mn);font-weight:800;font-size:13px;color:var(--pc);background:#fff;border:1.5px solid var(--pc);border-radius:10px;padding:7px 12px;line-height:1}
  .dr-pbadge i{font-size:15px}
  .dr-calc{width:100%;max-width:540px}
  .dr-calc-btn{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--mn);font-weight:700;font-size:14.5px;color:var(--primary);background:#EDF8EF;border:1px solid #D2EDD9;border-radius:12px;padding:13px 18px;transition:background .18s}
  .dr-calc-btn:hover{background:#DFF2E4}
  .dr-calc-btn::-webkit-details-marker{display:none}
  .dr-calc-btn i{font-size:17px}
  .dr-caret{font-size:14px;transition:transform .2s ease}
  .dr-calc[open] .dr-caret{transform:rotate(180deg)}
  .dr-calc-body{margin-top:12px;padding:16px 18px;background:#F7F9FC;border:1px solid #EDF1F6;border-radius:14px;display:flex;flex-direction:column;gap:8px}
  .dr-cr{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:#5A6B82}
  /* Doppelkarten-Hinweis in der Effektivpreis-Berechnung (dbt_dk_note/dkNote) */
  .dr-dknote{display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:11px 14px;background:#F2F7FF;border:1px solid #D8E6FA;border-radius:11px;font-size:12.5px;line-height:1.55;color:#3D5A78}
  .dr-dknote i{font-size:16px;flex-shrink:0;margin-top:1px;color:#3B82D6}
  .dr-dknote b{color:#1E3A5F}
  .dr-cr span:last-child{font-variant-numeric:tabular-nums}
  .dr-cr.sum{border-top:1px solid #E7ECF3;padding-top:10px;margin-top:2px;color:#33425A}
  .dr-cr.sum span{font-weight:700;color:#33425A}
  .dr-cr.eff{border-top:2px dashed #CBEBDB;padding-top:11px;margin-top:2px}
  .dr-cr.eff span{font-family:var(--mn);font-weight:800;color:#1F8A38}
  .dr-cr.eff span:last-child{font-size:16px}
  /* Handy-Bedienleiste und ihre Blaetter existieren nur unter 920px --
     ohne diese Grundregel waeren die Container am Desktop sichtbar. */
  .mbar,.blatt-fuss,.msheet{display:none}
  @media(max-width:920px){
    .finder-layout{grid-template-columns:1fr;gap:18px}
    .finder-side{position:static;max-height:none;overflow:visible}
    /* Filter eingeklappt: sonst liegen ~2.000px Bedienfeld vor dem ersten Deal. */
    .finder-toggle{display:flex}
    .finder-side .finder-box{display:none}
    .finder-side.offen .finder-box{display:block}
    .finder-side.offen .ft-caret{transform:rotate(180deg)}
    .finder-side .fcols{flex-direction:row;flex-wrap:wrap}
    .deal-row{grid-template-columns:1fr;gap:10px;padding:14px}
    .dr-buy{border-top:1px solid #EEF2F7;padding-top:12px}

    /* ===== Karte am Handy radikal ausgeduennt ==============================
       Gemessen: 735px je Karte, 12 Karten = 8.800px allein fuer die Liste.
       Was hier wegfaellt, ist auf der Detailseite vollstaendig vorhanden --
       die ganze Karte verlinkt ohnehin dorthin. Was bleibt, ist die
       Entscheidungsgrundlage: Name, Geraet, Volumen, Laufzeit, Preis, Knopf.
       Reine CSS-Aenderung: Markup, Logik und Desktop bleiben unberuehrt. */
    /* Rechnung am Handy wieder da (Jan, 25.08.2026): Sie war ausgeblendet,
       weil die Karte kurz bleiben sollte -- der Block ist aber zugeklappt
       und kostet nur die Knopfhoehe. Wer den Preis nicht glaubt, kann ihn
       jetzt an Ort und Stelle nachrechnen statt erst die Seite zu wechseln. */
    /* body.cmp-ready .dr-cmpbtn setzt display:inline-flex -- gleiche Spezifitaet,
       also muss meine Regel eine Stufe hoeher liegen, sonst gewinnt sie nicht. */
    body.cmp-ready .deal-row .dr-cmpbtn{display:none}
    .deal-row .dr-topklasse{display:none}     /* zweites Abzeichen = Rauschen */
    /* Kacheln in den Listen-Zeilen SICHTBAR (Jan, 27.08.2026): diese Regel
   versteckte alles ausser den t-cond-Bedingungen -- Server und JS lieferten
   die Farbsprache laengst, das CSS blendete sie weg. Vier Debug-Runden. */
.deal-row .dr-tag{display:inline-flex;align-items:center}           /* Volumen steht schon in den Specs */
    .deal-row .dr-tag.t-cond{display:inline-flex}   /* Bedingungen bleiben, auch mobil */
    /* Partnerzeile bleibt -- sie nennt die Gegenpartei und ist Pflichtangabe --
       aber klein und einzeilig statt als zwei Kaesten. */
    .dr-foot{padding-top:10px}
    .dr-partners{gap:6px;font-size:11px;flex-wrap:wrap}
    .dr-partners .dr-pbox{padding:4px 8px;font-size:11px}
    /* Drei Kaesten mit Wert UND Beschriftung brauchten 84px fuer drei Angaben.
       Als eine Textzeile mit Trennpunkten sind es rund 24px -- die Beschriftungen
       ("Datenvolumen", "Laufzeit", "Geschwindigkeit") erklaeren sich von selbst. */
    .dr-specs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px;background:none;
      border:0;padding:0;box-shadow:none}
    .dr-seg{background:none;border:0;padding:0;box-shadow:none;flex:0 0 auto;display:inline-flex;
      align-items:baseline;gap:7px;min-width:0}
    .dr-seg span{display:none}
    .dr-seg b{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
    .dr-seg:not(:last-child)::after{content:"·";color:var(--soft);font-weight:700}
    /* Die drei Sortier-Tabs passten hier nie nebeneinander (343px Fenster,
       438px Inhalt) -- "Top-Ersparnis" war abgeschnitten. Sortiert wird am
       Handy ueber die Leiste unten; der Pflicht-Link bleibt stehen. */
    .sort-bar .chips-tabs,.sort-bar .sb-lbl{display:none}
    body.mbar-an .sticky-cta{display:none}
    .sort-bar{justify-content:flex-start}

    /* ===== Feste Leiste am unteren Rand (Portal-Standard am Handy) =====
       Ohne sie sind Filter und Sortierung nur am Seitenanfang erreichbar --
       auf einer 21.000px langen Liste heisst das Zurueckscrollen. Beide
       Knoepfe oeffnen ein Blatt von unten, statt Chips seitlich wegzuschieben. */
    .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;
      padding:9px clamp(12px,4vw,18px) calc(9px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line);
      box-shadow:0 -14px 34px -20px rgba(11,27,51,.35)}
    .mbar button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;
      border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-weight:700;
      font-size:14.5px;color:var(--ink);cursor:pointer;padding:0 10px}
    .mbar button i{font-size:17px;color:var(--green)}
    .mbar button b{min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
      padding:0 6px;border-radius:99px;background:var(--green);color:#fff;font-size:12px;font-weight:800}
    .mbar button b:empty{display:none}
    .mbar button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    body.hat-mbar{padding-bottom:74px}
    /* Solange ein Blatt offen ist, bleibt die Seite dahinter stehen. */
    body.blatt-auf{overflow:hidden}

    /* Filterblatt: das vorhandene Panel wird zum Vollbild-Overlay --
       kein zweites Markup, also bleiben alle Chips und ihre Logik gueltig. */
    body.blatt-filter .finder-side{position:fixed;inset:0;z-index:70;background:var(--bg,#F7F9FC);
      overflow:auto;-webkit-overflow-scrolling:touch;padding:0 14px 96px;margin:0;max-height:none}
    body.blatt-filter .finder-side .finder-box{display:block;border:0;box-shadow:none;background:transparent;padding:8px 0}
    body.blatt-filter .finder-toggle{position:sticky;top:0;z-index:2;margin:0 -14px;border-radius:0;
      border-left:0;border-right:0;border-top:0}
    /* Im Blatt schliesst der Kopf -- ein Pfeil nach oben sagt das nicht.
       Das Kreuz als Textzeichen, weil der Symbolsatz eingekuerzt ist. */
    body.blatt-filter .finder-toggle .ft-caret{display:none}
    body.blatt-filter .finder-toggle::after{content:"\00D7";margin-left:auto;padding:0 2px;
      font-size:27px;line-height:1;color:var(--muted);font-weight:400}
    body.blatt-filter .finder-side{animation:blattAuf .22s cubic-bezier(.32,.72,0,1)}
    @keyframes blattAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
    .blatt-fuss{display:none;position:fixed;left:0;right:0;bottom:0;z-index:71;
      padding:10px clamp(12px,4vw,18px) calc(10px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
    body.blatt-filter .blatt-fuss{display:flex}
    .blatt-fuss button{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--green);
      color:#fff;font:inherit;font-weight:800;font-size:15.5px;cursor:pointer}

    /* Sortierblatt: die drei Optionen untereinander, in voller Breite. */
    /* display:none koennte nicht animieren -- deshalb liegt das Blatt gerendert
       bereit und wird nur sichtbar geschaltet. */
    .msheet{display:block;visibility:hidden;position:fixed;inset:0;z-index:70}
    body.blatt-sort .msheet{visibility:visible}
    .msheet-bg{position:absolute;inset:0;background:rgba(11,27,51,.45);opacity:0;transition:opacity .2s ease}
    body.blatt-sort .msheet-bg{opacity:1}
    .msheet-box{position:absolute;left:0;right:0;bottom:0;background:#fff;border-radius:18px 18px 0 0;
      padding:6px 0 calc(10px + env(safe-area-inset-bottom));box-shadow:0 -18px 40px -18px rgba(11,27,51,.4);
      transform:translateY(100%);transition:transform .22s cubic-bezier(.32,.72,0,1)}
    body.blatt-sort .msheet-box{transform:none}
    @media(prefers-reduced-motion:reduce){
      .msheet-bg,.msheet-box{transition:none}
      body.blatt-filter .finder-side{animation:none}
    }
    .msheet-griff{width:42px;height:4px;border-radius:4px;background:#D6DEEA;margin:8px auto 4px}
    .msheet-h{font-weight:800;font-size:15px;padding:8px 18px 6px;color:var(--ink)}
    .msheet-opt{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;
      min-height:54px;padding:0 18px;border:0;border-top:1px solid #EEF2F7;background:#fff;
      font:inherit;font-size:15.5px;color:var(--ink);text-align:left;cursor:pointer}
    .msheet-opt[aria-checked="true"]{font-weight:800;color:var(--green)}
    .msheet-opt i{font-size:19px;color:var(--green);opacity:0}
    .msheet-opt[aria-checked="true"] i{opacity:1}
  }

/* ===== Kompakt-Layout (Check24-Dichte): Tarif im Fokus, Handy nachrangig ===== */
.deal-row{padding:14px 16px 10px;gap:10px 14px}
.dr-name a{font-size:16.5px;line-height:1.2}
.dr-dev{font-size:11.5px;color:var(--soft);display:flex;align-items:center;gap:5px;margin-top:2px}
.dr-dev i{font-size:12px;color:#9AA8BC}
.dr-tags{margin-top:4px}
.dr-tag{font-size:10px;padding:2px 7px}
.dr-seg{padding:7px 10px;min-height:0}
.dr-seg b{font-size:13.5px}
/* "Geschwindigkeit" ist EIN Wort mit 15 Zeichen und kann nicht umbrechen --
   auf 375 px braucht es 81 px, die Kachel bietet 74. Silbentrennung (die
   Seite ist lang="de") loest das, ohne das Wort zu kuerzen. */
.dr-seg span{font-size:9.5px;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
.dr-seg-anz b{font-size:12.5px}
.dr-price b{font-size:24px}
.dr-price span{font-size:9.5px}
.dr-anchor{font-size:11px}
.dr-more{padding:9px 14px;font-size:13px;min-height:46px}
.dr-foot{padding-top:8px;margin-top:2px}
.dr-partner .dr-plabel{font-size:10px}
.dr-pbadge{font-size:11px;padding:4px 9px}
.dr-calc-btn{padding:7px 11px;font-size:12px}

/* Bonus-Tags farbig + Info-Icon + prominenter Berechnungs-Button */
.dr-tag.t-unl{color:#1F8A38;background:#E9F6EC;border-color:#C4E7CD}
.dr-tag.t-yng{color:#7C3AED;background:#F3EEFE;border-color:#DDD0FA}
.dr-tag.t-giga{color:#C0392B;background:#FBECEA;border-color:#EFC9C3}
/* RNM einheitlich BLAU (Jans Farbsprache 27.08.2026): gruen ist auf der
   Seite die Erfolgs-/Ersparnisfarbe -- die Wechselbonus-Bedingung soll
   sich davon abheben, gleiche Toene wie die RNM-Schritte der Tarifseite. */
.dr-tag.t-rnm{color:#1D4ED8;background:#DEEBFF;border-color:#BFD8FF;font-weight:700}
.dr-tag.t-tradein{color:#9A5B00;background:#FFF3DE;border-color:#F5D9A6;font-weight:700}
.dr-info{cursor:help;margin-left:6px;color:var(--primary)}
.dr-info i{font-size:16px;vertical-align:-2px}
.dr-calc-btn{color:var(--primary);background:#E9F6EC;border:1px solid #C4E7CD;font-weight:700;font-size:13px}

/* Schrift +1 (Review) + auffaelliges (i) + Tarifwelt-Logo */
.dr-name a{font-size:18px}
.dr-seg b{font-size:15px}
.dr-seg span{font-size:11px}
.dr-price b{font-size:27px}
.dr-price span{font-size:10.5px}
.dr-more{font-size:14px}
.dr-tag{font-size:11px}
.dr-pbadge{font-size:12px}
.dr-calc-btn{font-size:14px;padding:9px 13px}
.chip{font-size:14.5px}
.dr-info{cursor:pointer;margin-left:7px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff}
.dr-info i{font-size:14px;vertical-align:0}
.dr-tw{margin-top:6px}
.dr-tw img{height:20px;width:auto;max-width:130px;object-fit:contain;display:block}

/* Filter-Ladefeedback: Liste dimmen, solange neue Ergebnisse geladen werden. */
#grid{transition:opacity .15s ease}
#grid.is-loading{opacity:.45;pointer-events:none}

/* ================= Frosch-Branding (Grün-Umbau 08/2026) ================= */
/* Schlanke, volle Breite laufende Hero-Zeile mit Maskottchen statt grossem Hero. */
.hero-band{background:linear-gradient(120deg,#1F8A38 0%,#2FA04C 55%,#39B159 100%);position:relative;overflow:hidden}
.hero-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.5px);background-size:24px 24px;pointer-events:none}
.hb-inner{max-width:1200px;margin:0 auto;padding:22px clamp(16px,4vw,28px) 26px;display:flex;flex-direction:column;gap:16px}
.hb-frog{width:clamp(64px,9vw,96px);height:auto;flex:0 0 auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.28));animation:frogfloat 4.5s ease-in-out infinite}
@keyframes frogfloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.hb-text{flex:1 1 260px;min-width:220px}
.hb-text h1{color:#fff;font-weight:800;font-size:clamp(21px,3vw,31px);line-height:1.2;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.hb-text p{margin:7px 0 0;color:#fff;font-family:var(--mn);font-weight:700;font-size:clamp(16px,2.2vw,21px);line-height:1.3}
.hb-proof{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;color:rgba(255,255,255,.85);font-size:13px;font-weight:600}
.hb-proof .live-dot{width:8px;height:8px;border-radius:50%;background:#B8F5C9;display:inline-block;animation:livedot 2s ease-out infinite}
.hb-trust{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hb-trust span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#fff;font-weight:700;font-family:var(--mn);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:7px 13px;border-radius:999px;backdrop-filter:blur(4px)}
.hb-trust i{color:#FFD98A;font-size:15px}
.hb-trust .live-dot{width:8px;height:8px;border-radius:50%;background:#B8F5C9;animation:livedot 2s ease-out infinite;display:inline-block}
@media(max-width:640px){.hb-trust{display:none}}

/* Hero links: runder Frosch im Ring + kompakte Headline */
.hb-head{display:flex;align-items:center;justify-content:center;gap:18px;text-align:center;flex-wrap:wrap}
.hb-text{text-align:center}
.hb-ring{flex:0 0 auto;width:86px;height:86px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -10px rgba(0,0,0,.35),0 0 0 5px rgba(255,255,255,.25)}
.hb-ring img{width:76px;height:76px;border-radius:50%}
/* Suchmaske (Vergleichsportal-Look): weisse Box, zwei Fragen, ein Button */
.hb-search{width:100%;background:#fff;border-radius:18px;padding:15px 18px 14px;box-shadow:0 24px 55px -22px rgba(0,0,0,.45)}
.hs-group{margin-bottom:9px}
/* Parameter horizontal nebeneinander (Vergleichsportal-Leiste), mobil gestapelt */
.hs-bar{display:flex;align-items:stretch;gap:0;border:1px solid #EDF1F6;border-radius:14px;background:#FCFDFE;overflow:visible}
.hs-bar > .hs-group{flex:1 1 0;min-width:0;margin:0;padding:11px 16px;border-left:1px solid #EDF1F6;display:flex;flex-direction:column;justify-content:flex-start}
.hs-bar > .hs-group:first-child{border-left:0;flex:1.45 1 0}
.hs-bar > .hs-group-go{flex:0 0 auto;padding:11px 12px;justify-content:center;align-self:stretch}
.hs-group-go .hs-go{margin:0;white-space:nowrap;height:100%}
.hs-group-extras{margin-top:11px}

.hs-group em{font-style:normal;font-weight:500;text-transform:none;letter-spacing:0;color:#9AA8BC}
.hs-vertrag{text-align:center;font-family:var(--mn);font-weight:800;font-size:15px;color:#0B1B33;margin:0 0 10px}
.hs-vertrag u{text-decoration:none;color:#1F8A38;border-bottom:2px solid #9FDCB9}
.hs-lbl{display:block;text-align:center;font-family:var(--mn);font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#0B1B33;margin-bottom:7px}
.hs-val{color:#1F8A38;font-weight:800}
.hs-sublbl{display:block;text-align:center;font-size:11px;color:#7A899E;margin-top:4px}
.hs-chips{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.hs-chips button{cursor:pointer;border:1.5px solid var(--line);background:#F8FAFD;color:#33425A;font-family:var(--mn);font-weight:600;font-size:13.5px;padding:8px 13px;border-radius:999px;transition:all .13s}
.hs-chips button.on{background:#1F8A38;border-color:#1F8A38;color:#fff;font-weight:700}
.hs-go{width:100%;margin-top:13px;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-family:var(--mn);font-weight:800;font-size:16px;padding:14px;border-radius:13px;background:var(--grad-cta);color:#fff;box-shadow:0 14px 28px -12px rgba(31,138,56,.8);transition:transform .15s}
.hs-go:hover{transform:translateY(-1px)}
.hs-title{display:block;font-family:var(--mn);font-weight:800;font-size:17.5px;line-height:1.3;color:#0B1B33;margin-bottom:13px;text-align:center}
.hs-title i{vertical-align:-2px;margin-right:7px}
.hs-badge10{display:inline-flex;align-items:center;gap:5px;background:#E9F6EC;border:1px solid #C5E6CD;color:#1F8A38;font-size:12.5px;font-weight:800;padding:5px 12px;border-radius:999px;letter-spacing:.01em}
.hs-badge10 i{font-size:14px}
.hs-lbl u{text-decoration:none;color:#1F8A38;font-weight:800;border-bottom:2px solid #9FDCB9}
.hs-title i{color:#2FA04C;font-size:18px}
.hs-multi button.on{background:#0F5E42;border-color:#0F5E42}
.hs-kurz{display:none}
@media(max-width:760px){.hs-kurz{display:inline}}
.hs-netz button{display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:34px;padding:5px 8px;font-size:13px}
.hs-netz button img{height:16px;width:auto;max-width:70px;object-fit:contain;display:block}
.hs-netz button.on{background:#E9F6EC;border-color:#1F8A38;box-shadow:0 0 0 3px rgba(11,122,85,.15);color:#1F8A38;font-weight:800}
.hs-range{width:100%;height:32px;accent-color:#1F8A38;cursor:pointer;margin:0}
/* Wert-Bubble direkt auf dem Slider-Daumen, laeuft beim Ziehen mit (JS setzt left) */
.hs-slider{position:relative;padding-top:31px}
.hs-bubble{position:absolute;top:0;left:50%;transform:translateX(-50%);background:#1F8A38;color:#fff;font-family:var(--mn);font-weight:800;font-size:15.5px;line-height:1;padding:7px 14px;border-radius:999px;white-space:nowrap;pointer-events:none;box-shadow:0 8px 18px -8px rgba(11,122,85,.65)}
.hs-bubble::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1F8A38;border-bottom:0}
.hs-go{font-size:15px;padding:13px 16px}
.hs-rnm select{width:100%;font-family:inherit;font-size:14px;font-weight:600;color:#0F1E36;padding:10px 12px;border:1.5px solid var(--line);border-radius:11px;background:#F8FAFD;outline:none}
.hs-rnm select:focus{border-color:#1F8A38;box-shadow:0 0 0 4px rgba(31,138,56,.12)}

.hs-price input{width:100%;height:100%;font-family:var(--mn);font-weight:800;font-size:18px;color:#0B1B33;padding:12px 64px 12px 14px;border:1.5px solid var(--line);border-radius:12px;outline:none;-moz-appearance:textfield}
.hs-price input::-webkit-outer-spin-button,.hs-price input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hs-price input:focus{border-color:#1F8A38;box-shadow:0 0 0 4px rgba(31,138,56,.12)}
.hs-price span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mn);font-weight:700;font-size:13px;color:#7A899E}
.hs-result{display:none;margin-top:11px;padding:11px 14px;border-radius:13px;text-align:center}
.hs-result.show{display:block;animation:chompop .35s var(--ease)}
@keyframes chompop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hs-result.win{background:linear-gradient(120deg,#E4F5E9,#DFF5EC);border:2px solid #2FA04C;box-shadow:0 18px 40px -22px rgba(11,122,85,.55)}
.hs-result.meh{background:#F4F7FB;border:1px solid #E4EAF2}
.hs-result.err{background:#FEF3EE;border:1px solid #F5CDBA;color:#8A4B2D;font-size:14px}
.hs-result .hr-big{font-family:var(--mn);font-weight:800;font-size:clamp(21px,3.4vw,29px);color:#1F8A38;line-height:1.15}
.hs-result .hr-big b{font-size:1.22em;letter-spacing:-.01em;white-space:nowrap}
/* Aufploppen: kurzer Scale-Impuls, damit das Ergebnis nicht uebersehen wird */
.hs-result.pop{animation:hrpop .5s cubic-bezier(.2,1.1,.3,1) both}
@keyframes hrpop{0%{opacity:0;transform:scale(.94) translateY(10px)}60%{transform:scale(1.02) translateY(0)}100%{opacity:1;transform:scale(1)}}
.hs-spin{display:inline-block;animation:hsspin .8s linear infinite}
@keyframes hsspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hs-result.pop{animation:none}.hs-spin{animation:none}}
.hs-result .hr-sub{font-size:12.5px;color:#33425A;font-weight:600;margin-top:4px}
.hs-result .hr-note{font-size:10px;color:#93A1B5;margin-top:6px;line-height:1.4}
.hs-result a.hr-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;text-decoration:none;font-family:var(--mn);font-weight:800;font-size:16px;padding:14px 30px;border-radius:13px;background:var(--grad-cta);color:#fff;box-shadow:0 16px 30px -12px rgba(31,138,56,.85);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.hs-result a.hr-cta:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(31,138,56,.9)}
.hs-result.pop a.hr-cta{animation:hrring 1.6s ease-out .35s 2}
@keyframes hrring{0%{box-shadow:0 16px 30px -12px rgba(31,138,56,.85),0 0 0 0 rgba(14,158,110,.5)}70%{box-shadow:0 16px 30px -12px rgba(31,138,56,.85),0 0 0 14px rgba(14,158,110,0)}100%{box-shadow:0 16px 30px -12px rgba(31,138,56,.85),0 0 0 0 rgba(14,158,110,0)}}
@media (prefers-reduced-motion: reduce){.hs-result.pop a.hr-cta{animation:none}}
@media(max-width:640px){.hs-result a.hr-cta{width:100%}}
@media(max-width:760px){.hb-ring{display:none}.hb-search{padding:14px}}
/* Sticky-Rechner-CTA (nur mobil, verschwindet sobald der Finder im Bild ist) */
.sticky-cta.sc-hide{display:none!important}
/* Vertragscheck-Band auf der Startseite */
.chk-band{background:#F4F9F5;border-top:1px solid #E2EFE5;border-bottom:1px solid #E2EFE5}
.chk-band-in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;padding-top:30px;padding-bottom:30px}
.chk-band .cb-txt h2{font-family:var(--mn);font-weight:800;font-size:clamp(20px,3vw,26px);color:#0B1B33;letter-spacing:-.01em}
.chk-band .cb-txt p{margin-top:6px;color:#5A6B82;font-size:15px;max-width:560px;line-height:1.5}
.chk-band .cb-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-family:var(--mn);font-weight:800;font-size:15.5px;padding:14px 26px;border-radius:13px;background:var(--grad-cta);color:#fff;box-shadow:0 16px 30px -14px rgba(31,138,56,.8)}

/* Partner-Sektion direkt unter dem Band */
.partner-top{background:linear-gradient(180deg,#fff 0%,var(--bg) 92%);padding:26px 0 18px}
.partner-top .h{font-size:13px}
/* Direkt nach dem Partner-Karussell: Panel-Kante entfaellt, Flaeche laeuft weich durch */
.partner-top + .finder{border-radius:0;box-shadow:none;padding-top:26px}
/* Schlanker Rechner-Kopf: eine Zeile Titel + Halbsatz, kein Absatz-Block */
.sec-head-slim{margin-bottom:16px}
.sec-head-slim h2{font-size:clamp(21px,2.6vw,27px);margin-top:0;display:inline-flex;align-items:center;gap:10px}
.sec-head-slim h2 i{color:var(--primary);font-size:.9em}
.sec-head-slim p{font-size:14px;margin-top:5px}

/* Extras zuerst: grosse, klar klickbare Spar-Chips ganz oben im Finder */
.fextra-top{border-top:none;border-bottom:1px solid #E7ECF3;padding:2px 0 16px;margin-bottom:2px}
.fextra-top .flabel{font-size:14px;color:var(--ink)}
.fextra-top .chips-self{gap:10px}
.fextra-top .chips-self .chip{min-height:56px;padding:13px 18px;font-size:15px;border-width:1.5px;border-color:#CDE9D4;background:#F4FBF5;border-radius:14px}
.fextra-top .chips-self .chip>i{font-size:19px;color:var(--primary)}
.fextra-top .chips-self .chip em{font-size:12px}
.fextra-top .chips-self .chip.on{background:var(--grad-cta);border-color:transparent}
.fextra-top .chips-self .chip.on>i{color:#fff}
.finder-side .fextra-top .chips-self .chip{min-height:50px;font-size:14px;padding:11px 14px}

/* Gruene Flammen fuer Top-Deals */
.flames{display:inline-flex;align-items:flex-end;gap:1px;height:1em;vertical-align:-2px}
.flames i{display:block;width:.34em;height:.85em;border-radius:50% 50% 42% 42%/62% 62% 38% 38%;background:linear-gradient(180deg,#8FE7A4,#2FA04C 55%,#1F8A38);transform-origin:50% 100%;animation:flick .62s ease-in-out infinite alternate}
.flames i:nth-child(2){height:1.05em;animation-delay:.18s}
.flames i:nth-child(3){height:.72em;animation-delay:.34s}
@keyframes flick{from{transform:scaleY(.86) scaleX(1.04)}to{transform:scaleY(1.08) scaleX(.94)}}
@media(prefers-reduced-motion:reduce){.flames i{animation:none}.hb-frog{animation:none}}

/* Frosch-Tipp: Maskottchen sitzt auf der besten Deal-Zeile */
.deal-row.best{position:relative}
.deal-row.best::after{content:"";position:absolute;top:-24px;right:18px;width:52px;height:52px;background:url('assets/frosch/frosch-96.png') center/contain no-repeat;filter:drop-shadow(0 6px 14px rgba(15,74,29,.35));animation:frogfloat 4.5s ease-in-out infinite;pointer-events:none}
.dr-badge{background:linear-gradient(135deg,#2FA04C,#1F8A38)}

/* Tarif-Detailseite: grosser SIM-only-Check statt Vergleichstabelle */
.simcheck{position:relative;margin-top:26px;background:linear-gradient(120deg,#F2FBF5 0%,#E9F8EE 100%);border:1.5px solid #BFE7CB;border-radius:20px;padding:22px clamp(18px,3vw,30px);box-shadow:0 24px 54px -36px rgba(15,74,29,.45);overflow:hidden}
.simcheck .sc-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#1F8A38}
.sc-row{display:flex;align-items:center;gap:clamp(14px,3vw,30px);flex-wrap:wrap;margin-top:14px}
.sc-col{display:flex;flex-direction:column;gap:3px}
.sc-col .sc-k{font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.05em}
.sc-col b{font-family:var(--mn);font-weight:800;letter-spacing:-.02em;line-height:1}
.sc-col.sim b{font-size:clamp(22px,3.4vw,28px);color:#8A97A8;text-decoration:line-through;text-decoration-color:#D14343;text-decoration-thickness:3px}
.sc-col.you b{font-size:clamp(34px,5.4vw,46px);color:#1F8A38}
.sc-col small{font-size:12.5px;color:var(--soft-text)}
.sc-arrow{font-size:26px;color:#2FA04C;flex:0 0 auto}
.sc-badge{margin-left:auto;margin-right:clamp(70px,9vw,120px);font-family:var(--mn);font-weight:800;font-size:clamp(15px,2.4vw,19px);color:#fff;background:linear-gradient(135deg,#2FA04C,#1F8A38);border-radius:999px;padding:10px 18px;box-shadow:0 14px 30px -14px rgba(31,138,56,.8);display:inline-flex;align-items:center;gap:8px}
.simcheck .sc-frog{position:absolute;right:-14px;bottom:-18px;width:104px;opacity:.95;transform:rotate(-8deg);filter:drop-shadow(0 8px 18px rgba(15,74,29,.3));pointer-events:none}
@media(max-width:640px){.simcheck .sc-frog{width:74px;right:-10px;bottom:-12px}.sc-badge{margin-left:0;margin-right:0}}
.deal-einordnung{margin-top:14px;font-size:12.5px;color:var(--soft-text);line-height:1.6}
.deal-tarifname{margin-top:8px;font-size:13.5px;color:var(--soft);font-weight:600}
.deal-tarifname b{color:#33425A}
.logo .mark-frog{background:none;box-shadow:none;border-radius:50%;object-fit:contain;padding:0}
/* Segment-Badge „Top X % seiner Klasse" — echtes Perzentil, kein Fantasie-Score.
   align-self:flex-start ist PFLICHT: .dr-brand ist eine Stretch-Spalte, ohne
   das dehnt sich der Chip. NIE .dr-seg nennen: die Klasse gehoert schon den
   Info-Kacheln der Zeile (flex:1 1 92px) -- die Kollision erzeugte die
   Riesen-Blase aus Jans Screenshot vom 21.08. */
.dr-topklasse{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;font-family:var(--mn);font-weight:700;font-size:11px;padding:4px 10px;border-radius:999px;white-space:nowrap;margin-bottom:6px}
.dr-topklasse i{font-size:11.5px}

/* Hero-Widget mobil: nach den Basisregeln, damit die Overrides greifen */
@media(max-width:760px){
  /* Hero kompakter: sonst fuellt er mehr als einen Bildschirm und man
     ahnt nicht, dass darunter der Rechner kommt (Mobil-Test 21.08.). */
  .hb-inner{padding:16px clamp(14px,4vw,20px) 18px;gap:12px}
  .hb-text h1{font-size:clamp(20px,5.6vw,25px)}
  .hb-text p{font-size:16.5px;margin-top:5px}
  .hb-proof{margin-top:8px;font-size:12px}
  .hs-title{font-size:15px;margin-bottom:10px}
  .hs-group{margin-bottom:7px}
  .hs-vertrag{font-size:16px;margin-bottom:12px}
  .hs-lbl{font-size:15px;margin-bottom:6px;color:#0B1B33}
  .hs-netz button{height:44px;min-width:70px}
  .hs-lang{display:none}                 /* lange Chip-Beschriftung nur am Desktop */
  .hs-group-extras .hs-lbl em{display:none}
  .hs-multi button{padding:10px 14px;font-size:14px}
  .hs-netz button img{height:20px}
  .hs-slider{padding-top:28px}
  .hs-sublbl{margin-top:2px}
  /* Tap-Ziele: Tarifname in den Karten und Fussnoten-Links */
  .dr-name a{display:inline-block;padding:7px 0;line-height:1.35}
  /* Tarifname und "Mehr erfahren" in den Kacheln (Kategorie-/Top-Deals) */
  .tcard a{display:inline-block;padding:6px 0;line-height:1.35}
  .crumbs a{padding:6px 0}
  .sb-info{padding:8px 0}
}
@media(max-width:900px){
  /* display:contents loest die Leiste auf -> die Zellen werden direkte
     Flex-Kinder des Formulars und lassen sich per order sortieren. Sonst
     stuende der Absenden-Button VOR den Extras (Mobile-Test 21.08.). */
  .hb-search{display:flex;flex-direction:column}
  .hs-bar{display:contents}
  .hs-bar > .hs-group{border-left:0;padding:0;margin-bottom:11px;order:1}
  .hs-title{order:0}
  .hs-group-extras{order:2;margin-top:0}
  .hs-rnm{order:3}
  .hs-bar > .hs-group-go{order:4;padding:0;margin-bottom:0}
  .hs-group-go .hs-go{width:100%}
  .hs-result{order:5}
  /* Footer-/Breadcrumb-Links: 19px Textzeilen sind mit dem Daumen kaum
     zu treffen -> Trefferflaeche auf ~40px, ohne die Optik zu aendern. */
  .ft .grp a{padding:9px 0;margin-bottom:2px}
  .crumbs a{display:inline-block;padding:6px 0}
  /* Groessere Trefferflaeche fuer den Daumen */
  .hs-range{height:44px}
  .hs-netz button{height:40px;min-width:66px}
  .hs-netz button img{height:18px}
  .hs-multi button{padding:11px 15px;font-size:14px}
}

/* ===== Erklaerstreifen unter dem Hero =====================================
   Bewusst flach gehalten: Ein frueherer Erklaerblock schob den ersten Deal auf
   5.417px (6,7 Bildschirme mobil). Ziel hier ~300px mobil. Drei Schritte in
   einer Reihe, Rechenbeispiel als eine Zeile, Haken als eine Zeile. */
.wieso{background:#fff;border-bottom:1px solid var(--line);padding:22px 0 20px}
.wieso .wrap{display:flex;flex-direction:column;gap:14px}
.ws-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
.ws-steps li{display:flex;align-items:flex-start;gap:11px;min-width:0}
.ws-n{flex:0 0 auto;width:26px;height:26px;border-radius:99px;background:var(--green);color:#fff;
  font-family:var(--mn);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.ws-steps b{display:block;font-size:15px;line-height:1.25;color:var(--ink)}
.ws-steps span:not(.ws-n){display:block;font-size:13.5px;line-height:1.4;color:var(--muted);margin-top:2px}
.ws-bsp{margin:0;padding:12px 14px 11px;border-radius:12px;background:#F2F8F4;border:1px solid #DCEFE3}
.wb-h{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--green);
  display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;margin-bottom:8px}
.wb-h span{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
.wb-r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14px;line-height:1.5;color:var(--ink);padding:2px 0}
.wb-r b{font-family:var(--mn);font-weight:700;white-space:nowrap}
.wb-sum{border-top:1px dashed #BFE0CC;margin-top:5px;padding-top:7px;font-weight:700}
.wb-sum b{font-weight:800;color:var(--green);font-size:16px}
.wb-fuss{font-size:13px;line-height:1.45;color:var(--muted);margin-top:5px}
.ws-ehrlich{margin:0;display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--muted)}
.ws-ehrlich i{flex:0 0 auto;font-size:17px;color:var(--muted);margin-top:1px}
@media(max-width:920px){
  .wieso{padding:18px 0 16px}
  .ws-steps{grid-template-columns:1fr;gap:11px}
  .ws-steps b{font-size:14.5px}
  .ws-steps span:not(.ws-n){font-size:13px}
  .ws-bsp{padding:11px 12px}
  .wb-r{font-size:13.5px;gap:10px}
  .wb-sum b{font-size:15.5px}
  .wb-fuss{font-size:12.5px}
  .ws-ehrlich{font-size:12.5px}
}

/* Drei-Zeilen-H1 im Hero: etwas kleiner und enger als die alte einzeilige
   Fassung, damit das Band nicht den halben ersten Bildschirm frisst. */
.hb-h1-3{line-height:1.16;text-wrap:balance}
@media(max-width:920px){
  .hb-h1-3{font-size:clamp(23px,6.2vw,30px)}
  /* Untertitel lag bei 16,5px gegen 21px H1 -- zu dicht beieinander, beides
     konkurrierte um den Blick. Rund 70 % der H1 stellt die Rangfolge her. */
  .hb-h1-3 + p{font-size:14.5px;line-height:1.35;opacity:.95}
  /* Streifen enger schnueren: jeder Pixel hier schiebt den ersten Tarif nach unten. */
  .wieso{padding:15px 0 13px}
  .wieso .wrap{gap:11px}
  .ws-steps{gap:9px}
  .ws-n{width:23px;height:23px;font-size:13px}
  .ws-steps li{gap:9px}
}

/* ===== Angebots-Bubbles im Hero =========================================
   Ersetzen den Ersparnis-Check: ein konkretes Angebot wirkt sofort, eine
   Eingabemaske erst nach dem Ausfuellen. Jede Bubble fuehrt auf ihre
   Kategorieseite -- nebenbei interne Links auf die Seiten, die ranken. */
.hero-deals{margin-top:16px}
.hd-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.hd-b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:13px 8px 11px;border-radius:16px;background:rgba(255,255,255,.97);text-decoration:none;
  box-shadow:0 10px 26px -14px rgba(11,27,51,.5);transition:transform .14s ease,box-shadow .14s ease}
.hd-b:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(11,27,51,.55)}
.hd-b b{font-size:15px;font-weight:800;color:var(--ink);line-height:1.1}
.hd-b span{font-size:13px;color:var(--muted);font-weight:600;margin-top:3px}
.hd-b span em{font-style:normal;font-family:var(--mn);font-weight:800;font-size:18px;color:var(--green)}
.hd-b i{font-style:normal;font-size:10.5px;color:var(--soft);letter-spacing:.02em}
/* Negative Effektivpreise sind das staerkste Argument -- sie duerfen auffallen. */
.hd-minus{background:#fff;outline:2px solid #C8F0D8}
.hd-minus span em{color:#1F8A38}
.hd-sub{margin:11px 0 0;text-align:center;font-size:13px;color:rgba(255,255,255,.92)}
.hd-sub a{color:#fff;text-decoration:underline;text-underline-offset:3px;font-weight:700}
@media(max-width:920px){
  .hero-deals{margin-top:13px}
  /* Fuenf nebeneinander waeren auf 375px je 65px breit -- unlesbar.
     Zwei Reihen: vier Stufen oben, Unlimited breit darunter. */
  .hd-row{grid-template-columns:repeat(2,1fr);gap:8px}
  .hd-row .hd-b:last-child{grid-column:1/-1}
  .hd-b{padding:11px 8px 9px;border-radius:14px}
  .hd-b b{font-size:14px}
  .hd-b span em{font-size:17px}
  .hd-sub{font-size:12px;margin-top:9px}
}

/* ===== Klappbare Textblöcke (.fold) =====================================
   Lange Fließtexte stehen am Handy zugeklappt: Der Text bleibt im Markup –
   er trägt die Rankings, und Google liest aufklappbare Inhalte normal –,
   aber das Auge muss nicht mehr daran vorbei. Desktop unverändert offen. */
.fold > summary{display:none}
.fold > summary h2{margin:0}
@media(max-width:920px){
  .fold > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
    cursor:pointer;list-style:none;background:#fff;border:1px solid var(--line);
    border-radius:14px;padding:14px 16px}
  .fold > summary::-webkit-details-marker{display:none}
  .fold > summary h2{font-size:17px;line-height:1.25}
  .fold > summary i{flex:0 0 auto;color:var(--green);font-size:18px;transition:transform .18s ease}
  .fold[open] > summary i{transform:rotate(180deg)}
  .fold[open] > summary{margin-bottom:12px}
}

/* ===== Ruhige Ergebniszeile (muss ans Dateiende) ========================
   Die Regeln standen zuerst direkt hinter .deal-row -- dort wurden sie von
   den spaeteren Originaldefinitionen von .dr-specs/.dr-seg/.dr-topklasse
   ueberschrieben und blieben wirkungslos (live gemessen). Am Ende gewinnen
   sie bei gleicher Spezifitaet ueber die Quellreihenfolge. */
.deal-row > .dr-brand{grid-column:1;grid-row:1}
.deal-row > .dr-specs{grid-column:1;grid-row:2}
.deal-row > .dr-buy{grid-column:2;grid-row:1/span 2;align-self:center}
.deal-row > .dr-foot{grid-column:1/-1;grid-row:3}
/* Eckdaten als Textzeile statt drei Kästen – die Beschriftungen
   ("Datenvolumen", "Laufzeit", "Geschwindigkeit") erklären sich von selbst. */
.deal-row .dr-specs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 9px;
  background:none;border:0;padding:0;box-shadow:none}
.deal-row .dr-seg{background:none;border:0;padding:0;box-shadow:none;
  display:inline-flex;align-items:baseline;gap:9px;flex:0 0 auto}
.deal-row .dr-seg span{display:none}
.deal-row .dr-seg b{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap}
.deal-row .dr-seg:not(:last-child)::after{content:"·";color:var(--soft);font-weight:700}
/* Zweites Abzeichen ist Rauschen, wenn schon "Frosch-Tipp" dasteht. */
.deal-row .dr-topklasse{display:none}
/* Partnerzeile bleibt (Pflichtangabe), aber klein und ruhig. */
.deal-row .dr-foot{padding-top:11px;margin-top:2px;border-top:1px solid #F1F5F9}
.deal-row .dr-partners{font-size:11.5px;gap:8px}

@media(max-width:920px){
  /* Am Handy wieder gestapelt: Die Spaltenzuweisung oben erzeugte sonst eine
     zweite Spalte von nur 106px – zu eng für Preis und Knopf (live gemessen). */
  .deal-row > .dr-brand,
  .deal-row > .dr-specs,
  .deal-row > .dr-buy,
  .deal-row > .dr-foot{grid-column:1;grid-row:auto}
}

/* Doppelter Volumen-Tag: steht schon in der Eckdaten-Zeile darunter -- deshalb
   sind die INFORMATIVEN Tags in der Zeile aus. BEDINGUNGEN (.t-cond: "Nur mit
   Altgerät", "Vorbestellung") bleiben sichtbar: sie tragen den gezeigten Preis,
   und ohne sie wirkt er unbedingt erreichbar (Rechts-Audit 26.08.2026). */
.deal-row .dr-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
/* Kacheln in den Listen-Zeilen SICHTBAR (Jan, 27.08.2026): diese Regel
   versteckte alles ausser den t-cond-Bedingungen -- Server und JS lieferten
   die Farbsprache laengst, das CSS blendete sie weg. Vier Debug-Runden. */
.deal-row .dr-tag{display:inline-flex;align-items:center}
.deal-row .dr-tag.t-cond{display:inline-flex;align-items:center}

/* ===== Ergebniszeile: alles Sekundäre in die linke Spalte ================
   Die Fußzeile lief über die volle Breite und machte aus der Zeile einen
   dritten Block. Jetzt steht sie klein unter den Eckdaten, die Höhe
   bestimmt nur noch der Preisblock rechts. */
.deal-row > .dr-foot{grid-column:1;grid-row:3;border-top:0;padding-top:6px;margin-top:0}
.deal-row .dr-partners{font-size:11px;gap:10px;flex-wrap:wrap}
.deal-row .dr-plabel{font-size:10px;letter-spacing:.02em}
/* Die Rechnung steht auf der Detailseite – ein Klick entfernt, die ganze
   Zeile verlinkt dorthin. In der Liste ist sie nur Wiederholung. */
/* Die Regel blendete die Rechnung auf ALLEN Breiten aus; ab 921px hob eine
   zweite sie wieder auf. Am Handy blieb sie damit versteckt -- genau der
   Fall, den Jan wieder haben will. */
.deal-row .dr-calc{display:block}
/* Vergleichen bleibt (echte Funktion), aber klein und ohne eigene Zeile. */
.deal-row .dr-cmpbtn{font-size:12px;padding:5px 10px;min-height:0}

/* ===== Graue Wiederholungen in der Liste =================================
   Gezählt auf einer Kategorieseite: 78 graue Textfragmente, 60 davon aus
   den Zeilen – „Tarif"/„Ankauf" 24 ×, „(wird verkauft)" 12 ×, „/MON.
   EFFEKTIV" 12 ×. In jeder Zeile steht dasselbe.
   Sie erscheinen jetzt nur in der ERSTEN Zeile: Dort erklären sie das
   Muster, danach kennt es der Leser. „statt X € Grundpreis" bleibt überall –
   die Zahl ist je Angebot anders und hält den Effektivpreis fest. */
.deal-list > *:not(:first-child) .dr-plabel{display:none}
.deal-list > *:not(:first-child) .dr-dev-hint{display:none}
/* Doch auf JEDER Karte (Jan, 24.08.2026): Bei einem Effektivpreis ist die
   Einheit keine Wiederholung, sondern die Aussage. Ohne sie liest sich
   "0,99 €" wie ein normaler Monatspreis -- genau der Irrtum, den die ganze
   Seite ausraeumen soll. */

/* ===== Historien-Kennzeichen in der Zeile ================================
   Lebendigkeit aus den Daten statt aus Animation: Die Preise ändern sich
   alle fünf Minuten, die Historie liegt vor. Dadurch sieht jede Zeile
   anders aus, ohne dass sich etwas bewegt. */
.dr-trend{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;
  background:#F2F8F4;border:1px solid #DCEFE3;color:#1F8A38;
  font-family:var(--mn);font-weight:700;font-size:11.5px;white-space:nowrap}
.dr-trend i{font-size:13px}
.dr-trend-best{background:#1F8A38;border-color:#1F8A38;color:#fff}
@media(max-width:920px){ .dr-trend{font-size:11px;padding:3px 8px} }
/* Preis gestiegen: gleiche Form, andere Farbe – wer vergleicht, soll auch
   das sehen. Ein Portal, das nur gute Nachrichten zeigt, ist keins. */
.dr-trend-hoch{background:#FDF3F2;border-color:#F3D9D6;color:#B03A2E}

/* ===== Frosch-Begründung auf der besten Zeile ===========================
   Persönlichkeit MIT Inhalt: Der Frosch behauptet nicht „tolles Angebot",
   sondern nennt den Grund. Erscheint genau einmal je Liste. */
.dr-badge img{border-radius:99px;vertical-align:-3px}
.dr-frosch{margin-top:4px;font-size:12.5px;line-height:1.45;color:#1F8A38}
.dr-frosch span{font-weight:800}
@media(max-width:920px){ .dr-frosch{font-size:12px} }
/* Abzeichen und Trend nebeneinander statt jeweils über die volle Breite:
   .dr-brand ist eine Flex-SPALTE, die Kinder werden sonst gestreckt und
   sehen aus wie Banner (live gesehen). */
.dr-brand{align-items:flex-start}
.dr-brand > .dr-badge,
.dr-brand > .dr-trend{align-self:flex-start;flex:0 0 auto}

/* Einordnung VOR den Preisen: Sonst liest man fünf Zahlen, bevor man weiß,
   was sie bedeuten – gemessen stand die Erklärung 257 px unter dem ersten
   Preis. */
.hd-vor{margin:0 0 9px;text-align:center;font-size:14px;line-height:1.4;
  color:rgba(255,255,255,.95);font-weight:600}
@media(max-width:920px){ .hd-vor{font-size:13px;margin-bottom:8px} }

/* ===== Sprechblase des Frosches im Band =================================
   Er sitzt links im Ring; die Blase zeigt mit einem kleinen Zipfel dorthin.
   Auf dem Handy steht der Ring über dem Text, dann zeigt der Zipfel nach oben. */
.hb-sagt{margin:10px 0 0;display:flex;justify-content:center}
.hb-sagt span{position:relative;display:inline-block;max-width:560px;
  background:rgba(255,255,255,.97);color:#14361F;border-radius:16px;
  padding:11px 16px;font-size:15px;line-height:1.45;font-weight:600;
  box-shadow:0 10px 26px -16px rgba(11,27,51,.55)}
.hb-sagt span::before{content:"";position:absolute;left:26px;top:-7px;
  width:14px;height:14px;background:inherit;transform:rotate(45deg);border-radius:3px}
@media(max-width:920px){
  .hb-sagt span{font-size:13.5px;padding:10px 14px;line-height:1.4}
  .hb-sagt span::before{left:50%;margin-left:-7px}
}

/* ===== „Wer dahintersteckt" =============================================
   Bewusst schlicht und ohne Marketingrahmen: Die Wirkung kommt daher, dass
   ein Name und eine Adresse dastehen – nicht aus der Gestaltung. */
.wer{padding:6px 0 4px}
.wer-box{display:flex;gap:20px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:20px 22px;max-width:820px;margin:0 auto}
.wer-foto{flex:0 0 auto;width:104px;height:104px;border-radius:99px;object-fit:cover;
  border:3px solid #DCEFE3}
.wer-text{min-width:0}
.wer-text h2{margin:0 0 8px;font-size:19px;line-height:1.25}
.wer-text p{margin:0 0 8px;font-size:14.5px;line-height:1.6;color:#3A4A61}
.wer-text a{color:var(--green);font-weight:700}
.wer-kontakt{font-size:13.5px}
@media(max-width:920px){
  .wer-box{flex-direction:column;gap:14px;padding:16px 16px;align-items:center;text-align:center}
  .wer-text h2{font-size:17.5px}
  .wer-text p{font-size:13.5px}
}

/* ===== Der Weg als Bild („Schatzkarte") =================================
   Drei Stationen mit Nummer, Partnername und Betrag. Erklärungen liegen
   hinter einem ⓘ – sie bleiben im Markup (Google, Screenreader), nehmen aber
   keinen Platz. Kein JS nötig: <details> reicht. */
.karte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.k-stat{position:relative;text-align:center;padding:0 16px}
.k-stat:not(:last-child)::after{content:"";position:absolute;top:29px;right:-22px;width:44px;
  border-top:2px dashed #BFD9C8}
.k-bild{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:99px;background:#F2F8F4;border:2px solid #DCEFE3;
  color:#1F8A38;margin-bottom:11px}
.k-bild svg{width:29px;height:29px}
.k-bild b{position:absolute;left:-5px;top:-5px;width:23px;height:23px;border-radius:99px;
  background:var(--green);color:#fff;font-family:var(--mn);font-weight:800;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.k-h{display:block;font-size:15px;line-height:1.3;color:var(--ink)}
/* ⓘ – öffnet die Erklärung an Ort und Stelle */
.k-i{display:inline-block;vertical-align:1px;margin-left:5px}
.k-i > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:17px;height:17px;border-radius:99px;border:1.5px solid #BFD9C8;
  color:#5A8C6E;font-family:var(--mn);font-weight:800;font-size:11px;line-height:1}
.k-i > summary::-webkit-details-marker{display:none}
.k-i[open] > summary{background:var(--green);border-color:var(--green);color:#fff}
.k-i > span{display:block;margin-top:7px;font-size:12.5px;line-height:1.45;color:var(--muted);
  font-weight:500;text-align:center}
.k-geld{display:block;font-family:var(--mn);font-weight:800;font-size:21px;margin-top:10px}
.k-raus{color:#B03A2E}
.k-rein{color:#1F8A38}
/* Zielstation: der Preis ist das Argument – entsprechend groß. */
.k-ziel .k-bild{background:var(--green);border-color:var(--green);color:#fff}
.k-gross{display:block;margin-top:10px;font-family:var(--mn);font-weight:800;
  font-size:26px;line-height:1.1;color:#1F8A38}
.k-gross em{font-style:normal;font-size:14px;font-weight:700;color:#4E8E6D}
.k-plus{display:block;margin-top:4px;font-size:12.5px;color:#1F8A38;font-weight:700}
.k-quelle{margin:16px 0 0;text-align:center;font-size:12px;color:var(--muted)}
@media(max-width:920px){
  .karte{grid-template-columns:1fr;gap:22px}
  .k-stat{padding:0 0 0 68px;text-align:left}
  .k-bild{position:absolute;left:0;top:0;width:50px;height:50px;margin:0}
  .k-bild svg{width:25px;height:25px}
  .k-stat:not(:last-child)::after{top:56px;left:24px;right:auto;width:0;height:calc(100% - 44px);
    border-top:0;border-left:2px dashed #BFD9C8}
  .k-h{font-size:14.5px}
  .k-i > span{text-align:left}
  .k-geld{font-size:19px;margin-top:7px}
  .k-gross{font-size:23px;margin-top:7px}
}

/* ===== Preis-Kasten im Band ============================================
   Überschrift, Preise und Link gehören zusammen – also bekommen sie einen
   gemeinsamen Rahmen statt lose übereinander zu stehen. Räumliche Trennung
   statt weiterer Erklärsätze. */
.hd-box{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);
  border-radius:20px;padding:16px 18px 14px;backdrop-filter:blur(3px)}
.hd-vor{margin:0 0 11px;text-align:center;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.92)}
.hd-sub{margin:12px 0 0}
@media(max-width:920px){
  .hd-box{padding:13px 12px 11px;border-radius:17px}
  .hd-vor{font-size:11.5px;margin-bottom:9px}
}

/* ===== Partnerleiste in der Inhaltsbreite ==============================
   Das Band lief über die volle Bildschirmbreite und wirkte dadurch wie ein
   fremdes Element. Jetzt endet es dort, wo auch der übrige Inhalt endet. */
.partner .mqr{max-width:1200px;margin:0 auto;padding:0 clamp(14px,3vw,28px)}

/* ===== Schnellsprung (steht jetzt auf hellem Grund, nicht mehr im Band) ==
   Reihenfolge auf der Seite: was es ist → wie es geht → wo man hinspringt.
   Vorher standen die Preise über der Erklärung – man las fünf Zahlen, ohne
   sie einordnen zu können. */
.sprung{padding:4px 0 26px}
.sprung .hd-box{background:#fff;border:1px solid var(--line);backdrop-filter:none;
  box-shadow:0 1px 2px rgba(16,32,60,.04)}
.sprung .hd-vor{color:var(--muted)}
.sprung .hd-b{background:#F7FAFD;border:1px solid #E7EEF6;box-shadow:none}
.sprung .hd-b:hover{background:#fff;border-color:#C5E6CD}
.sprung .hd-minus{background:#F2F8F4;outline:0;border-color:#BFE0CC}
.sprung .hd-sub{color:var(--muted)}
.sprung .hd-sub a{color:var(--green)}
/* Überschrift kommt beim Laden kurz nach vorn – einmal, nicht dauernd. */
.hb-h1-3{animation:h1auf .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes h1auf{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .hb-h1-3{animation:none} }
/* Volumen klein über dem Preis – sonst brach „Unlimited für −4,88 €/Monat"
   am Handy mitten im Betrag um. */
.k-was{display:block;margin-top:10px;font-size:13px;font-weight:700;color:#4E8E6D}
.k-gross{margin-top:1px;white-space:nowrap}
@media(max-width:920px){ .k-was{margin-top:7px;font-size:12.5px} }

/* ===== Bühnen am Handy ===================================================
   Eine Aussage pro Bildschirm, dazwischen drei Pfeile als Weiterführung.
   Nur unter 920px – am Desktop bleibt der gewohnte Fluss, dort sieht man
   ohnehin mehrere Abschnitte gleichzeitig. */
.pfeile,.st-fuss,.st-kicker,.st-deal,.st-frage,.st-alle{display:none}

@media(max-width:920px){
  html{scroll-behavior:smooth}
  /* 100svh statt 100vh: Auf dem Handy wandert die Browserleiste, vh rechnet
     mit der größten Höhe und schneidet die Pfeile unten ab. */
  /* Die klebende Kopfleiste ist 71px hoch und liegt UEBER der Buehne --
     ohne diesen Innenabstand verschwanden die obersten 71px jeder Buehne
     dauerhaft darunter, und der zentrierte Inhalt sass zu tief
     (Jans Fund: "Seite 2 ist mit dem Banner ueberschnitten"). */
  .st{min-height:100lvh;box-sizing:border-box;padding-top:71px;
    display:flex;flex-direction:column;justify-content:center;
    scroll-margin-top:0}
  .st{scroll-snap-align:none}
  .st1 .hb-inner{width:100%}
  .st2,.st3{padding:26px 0 8px}
  .st2 .wrap,.st3 .wrap{width:100%}

  /* Kopf der Bühnen */
  .st-kicker{display:block;text-align:center;font-size:11.5px;font-weight:800;
    letter-spacing:.1em;text-transform:uppercase;color:var(--green);margin:0 0 6px}
  .st-deal{display:block;text-align:center;font-size:19px;line-height:1.3;
    color:var(--ink);margin:0 0 22px;font-weight:600}
  .st-deal b{font-family:var(--mn);font-weight:800;font-size:26px;color:#1F8A38;display:block;margin-top:2px}
  .st-deal span{font-size:14px;color:var(--muted);font-weight:600}
  .st-frage{display:block;text-align:center;font-size:22px;line-height:1.25;
    font-weight:800;color:var(--ink);margin:0 0 16px}

  /* Drei Pfeile: versetzt aufblenden – das liest das Auge als Richtung. */
  .pfeile{display:flex;flex-direction:column;align-items:center;gap:3px;
    margin:22px auto 4px;padding:6px;width:44px;text-decoration:none}
  .pfeile i{width:15px;height:15px;border-right:2.5px solid currentColor;
    border-bottom:2.5px solid currentColor;transform:rotate(45deg);opacity:.25;
    animation:pf 1.6s ease-in-out infinite}
  .pfeile i:nth-child(2){animation-delay:.18s}
  .pfeile i:nth-child(3){animation-delay:.36s}
  @keyframes pf{0%,100%{opacity:.22}45%{opacity:1}}
  .st1 .pfeile{color:#fff}
  .st2 .pfeile,.st3 .pfeile,.st-fuss .pfeile{color:var(--green)}
  .st-fuss{display:block}

  .st-alle{display:block;margin:16px auto 0;max-width:320px;text-align:center;
    background:var(--green);color:#fff;font-weight:800;font-size:15.5px;
    padding:14px 18px;border-radius:14px;text-decoration:none;
    box-shadow:0 12px 26px -14px rgba(31,138,56,.7)}

  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .pfeile i{animation:none;opacity:.6}
  }
}
@media(max-width:920px){
  /* Der Frosch war am Handy ausgeblendet – auf der ersten Bühne ist Platz,
     und wer von TikTok kommt, sucht genau ihn. */
  .st1 .hb-ring{display:inline-flex;margin:0 auto 18px}
  .st1 .hb-ring img{width:88px;height:88px}
  .st1 .hb-head{flex-direction:column;align-items:center;text-align:center}
}
@media(max-width:920px){
  /* Die alte Daumenleiste überdeckte den unteren Rand der Bühnen. Sie ist
     jetzt überflüssig: Bühne 3 endet mit „Zu allen Tarifen" und Pfeilen. */
  .sticky-cta{display:none !important}
  /* Bühne 2 kompakter, damit Erklärung UND Pfeile auf einen Bildschirm passen. */
  .st2 .k-quelle{margin-top:10px;font-size:11px}
  .st2 .ws-ehrlich{font-size:11.5px;margin-top:10px}
  .st2 .karte{gap:16px}
  .st2 .pfeile{margin-top:14px}
}

@media(max-width:920px){
  /* ===== Einrasten: jede Bühne ist eine eigene Seite ====================
     proximity statt mandatory wäre weicher – aber Jan will klar getrennte
     Seiten. Nur die Bühnen tragen einen Rastpunkt; ab dem Rechner scrollt
     die Seite wieder frei. */
  /* Einrasten GANZ entfernt (24.08.2026, dritter Anlauf):
     - "mandatory" zog in Kombination mit scroll-behavior:smooth bei jedem
       Sprung zur allerersten Buehne zurueck.
     - "proximity" war besser, aber das Scrollen fuehlte sich weiterhin
       zaeh und unvorhersehbar an (Jans Rueckmeldung).
     Die Buehnen wirken auch OHNE Einrasten wie eigene Seiten, weil jede
     eine volle Bildschirmhoehe fuellt. Scrollen ist jetzt ueberall normal,
     die Pfeile springen weiterhin gezielt. Verlaesslich schlaegt clever. */

  /* Bühne 1: Zeile mit dem günstigsten Preis */
  .st1-ab{display:block;text-align:center;margin:16px 0 0;font-size:15px;
    color:rgba(255,255,255,.95);font-weight:600}
  .st1-ab b{font-family:var(--mn);font-weight:800;font-size:19px;color:#fff}

  /* Bühne 2: großer Kopf, dann nur Volumen, Netzlogo, Preis */
  .st-kicker-gross{font-size:13px;letter-spacing:.12em;margin-bottom:12px}
  .st-best{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 26px}
  .sb-gb{font-size:26px;font-weight:800;line-height:1.1;color:var(--ink)}
  .sb-logo{height:30px;width:auto;object-fit:contain}
  .sb-preis{font-family:var(--mn);font-weight:800;font-size:34px;line-height:1.05;color:#1F8A38}
  .sb-preis em{font-style:normal;font-size:14px;font-weight:700;color:#4E8E6D;margin-left:2px}

  /* Die drei Schritte zentriert und knapper */
  .st2 .k-stat{padding:0;text-align:center}
  .st2 .k-bild{position:static;margin:0 auto 8px}
  .st2 .k-stat:not(:last-child)::after{display:none}
  .st2 .karte{gap:18px}
  .st2 .k-h{font-size:14px}
  .st2 .k-geld{font-size:18px;margin-top:5px}
  .st2 .k-was{margin-top:5px}
  .st2 .k-gross{font-size:21px}

  /* Das i ganz unten – öffnet ein Fenster über der Seite */
  .pop{display:block;margin:8px auto 0;width:max-content}
  .pop > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
    justify-content:center;width:30px;height:30px;border-radius:99px;
    border:1.5px solid #CBDCD2;color:#5A8C6E;font-family:var(--mn);font-weight:800;font-size:14px}
  .pop > summary::-webkit-details-marker{display:none}
  .pop-bg{display:none;position:fixed;inset:0;background:rgba(11,27,51,.5);z-index:80}
  .pop-in{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:81;
    background:#fff;border-radius:18px;padding:18px 18px 20px;
    box-shadow:0 -18px 44px -18px rgba(11,27,51,.5);max-height:70svh;overflow:auto}
  .pop[open] .pop-bg,.pop[open] .pop-in{display:block}
  .pop-h{margin:0 0 8px;font-weight:800;font-size:15px;color:var(--ink)}
  .pop-in p{margin:0 0 9px;font-size:13.5px;line-height:1.55;color:#3A4A61}
  .pop-in p:last-child{margin-bottom:0}

  /* Bühne 3: größere Überschrift und deutlichere Kacheln */
  .st-frage{font-size:26px;margin-bottom:20px}
  .st3 .hd-box{background:none;border:0;box-shadow:none;padding:0}
  .st3 .hd-vor{display:none}
  .st3 .hd-row{gap:11px}
  .st3 .hd-b{background:#fff;border:2px solid #E3EBF4;border-radius:18px;padding:16px 10px 14px;
    box-shadow:0 10px 24px -18px rgba(16,32,60,.5)}
  .st3 .hd-b b{font-size:17px}
  .st3 .hd-b span em{font-size:22px}
  .st3 .hd-minus{border-color:#1F8A38;background:#F2F8F4}
  .st3 .st-alle{margin-top:20px}
}
@media(max-width:920px){
  /* Bühne 2 muss auf EINEN Bildschirm passen – sonst schneidet die zentrierte
     Ausrichtung den Kopf oben ab (live gesehen). */
  .st2{padding:14px 0 6px}
  .st2 .k-bild{width:44px;height:44px;margin-bottom:6px}
  .st2 .k-bild svg{width:22px;height:22px}
  .st2 .k-bild b{width:20px;height:20px;font-size:11px}
  .st2 .karte{gap:13px}
  .st2 .k-h{font-size:13.5px;line-height:1.25}
  .st2 .k-geld{font-size:17px;margin-top:4px}
  .st-best{margin-bottom:18px}
  .sb-gb{font-size:23px}
  .sb-preis{font-size:30px}
  .st-kicker-gross{margin-bottom:9px}
  .st2 .pop{margin-top:6px}
  .st2 .pfeile{margin-top:10px}
}

/* ===== Bühnen-Elemente am Desktop ======================================
   BUG (gefunden 24.08.2026): Diese Regel stand ohne min-width-Grenze und
   überschrieb damit die mobile Regel gleicher Spezifität weiter oben im
   File -- ".st1-ab" verschwand dadurch AUCH am Handy, Bühne 1 wirkte leer.
   Jetzt klar auf Desktop begrenzt. */
@media(min-width:921px){
  .st-best,.st1-ab{display:none}
  .pop > summary{display:none}
  .pop-bg{display:none}
  .pop-in{display:block;position:static;background:none;box-shadow:none;padding:0;
    max-height:none;overflow:visible;margin-top:14px}
  .pop-h{margin:0 0 6px;font-weight:800;font-size:14px;color:var(--ink)}
  .pop-in p{margin:0 0 7px;font-size:12.5px;line-height:1.55;color:var(--muted);text-align:center}
}

/* Am Desktop bleibt das Laufband, das Raster ist dort überflüssig. */
.pgrid{display:none}

@media(max-width:920px){
  /* ===== Bühne 4: Partner ================================================
     Alle gleichzeitig sichtbar statt als Laufband, gruppiert nach ihrer
     Rolle im Ablauf. Danach Pfeile zu allen Tarifen. */
  /* Laufband am Handy aus -- das feste Raster darunter zeigt alle
     gleichzeitig. Regel haengt jetzt an .partner statt an der
     entfernten Buehnen-Klasse .st4 (sonst liefen BEIDE, live gesehen). */
  .partner-top .mqr{display:none}
  .pgrid{display:block;width:100%}
  .pg-h{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:var(--muted);text-align:center;margin:16px 0 8px}
  .pg-h:first-child{margin-top:4px}
  .pg-row{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
  .pg-row .ptile{flex:0 0 auto;min-width:96px;min-height:52px;display:flex;
    align-items:center;justify-content:center;padding:9px 13px;background:#fff;
    border:1px solid var(--line);border-radius:13px;text-decoration:none}
  .pg-row .ptile img{max-height:24px;width:auto;object-fit:contain}
  .pg-row .ptile-txt{font-weight:800;font-size:13px;color:var(--ink)}

  /* Der Rechner bekommt einen eigenen Rastpunkt -- ohne ihn zog "mandatory"
     den Besucher hinter der letzten Bühne immer wieder zurück (Jans Fund). */
}
@media(max-width:920px){
  /* Etwas enger: Die Pfeile standen hart an der Unterkante des Bildschirms. */
  .partner-top .h{margin-bottom:6px}
  .pg-h{margin:11px 0 6px;font-size:10.5px}
  .pg-row{gap:8px}
  .pg-row .ptile{min-width:86px;min-height:44px;padding:7px 11px;border-radius:12px}
  .pg-row .ptile img{max-height:20px}
  .pg-row .ptile-txt{font-size:12.5px}
}

@media(max-width:920px){
  /* ===== Bühne 1: Anspruch + zwei Beispiele =============================
     Vorher wirkte die erste Bühne leer -- H1 und Preiszeile allein lassen
     viel freie Fläche. Ein Satz Anspruch plus zwei echte, kleinere
     Angebote füllen sie, ohne die Kernaussage zu verwässern. */
  .st1-claim{margin:20px 0 0;text-align:center;font-size:15.5px;font-weight:700;
    color:rgba(255,255,255,.92);letter-spacing:.01em}
  .s1-beispiele{display:flex;justify-content:center;gap:10px;margin:16px 0 0;flex-wrap:wrap}
  .s1-b{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:10px 16px 9px;border-radius:14px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.3);text-decoration:none;color:#fff;
    white-space:nowrap}
  .s1-b b{font-size:13px;font-weight:700;color:rgba(255,255,255,.9)}
  .s1-b span{font-family:var(--mn);font-weight:800;font-size:16px;color:#fff}
  .s1-b i{font-style:normal;font-family:var(--font,inherit);font-weight:600;
    font-size:10px;margin-left:2px;color:rgba(255,255,255,.85)}
  .s1-minus{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55)}

  /* ===== Bühne 3: Netz-Auswahl oben ======================================
     Drei Logos, gleich groß, direkt unter der Überschrift -- führen auf die
     jeweilige Netz-Kategorieseite. */
  .st-netze{display:flex;justify-content:center;gap:11px;margin:0 0 20px}
  .st-netze a{display:flex;align-items:center;justify-content:center;
    width:88px;height:52px;background:#fff;border:1.5px solid var(--line);
    border-radius:13px}
  .st-netze a img{max-width:64px;max-height:24px;object-fit:contain}

  /* ===== Bühne 4: Partner – etwas mehr Bühnencharakter ==================
     Leicht getönter statt reinweißer Grund, damit sie als eigene Seite
     wirkt (wie die anderen drei), und einheitlichere Kachelgrößen. */
  .partner-top{background:linear-gradient(180deg,#fff 0%,#F6FAF7 100%)}
  .pg-row .ptile{min-width:104px;flex:1 1 104px;max-width:150px;
    transition:border-color .15s ease,box-shadow .15s ease}
  .pg-row .ptile:active{border-color:#BFE0CC;box-shadow:0 6px 16px -10px rgba(31,138,56,.4)}
}

@media(max-width:920px){
  /* ===== „Die Revolution für Handytarife" als Auszeichnung ==============
     Über der Überschrift statt als Zeile darunter: So trägt sie den
     Anspruch, statt ihn nachzuschieben. Leicht erhabene Glasfläche mit
     weitem Buchstabenabstand – zeitgemäß und ruhig zugleich. */
  /* Der Anspruch traegt die Buehne: gross und weiss, mit Schreibmarke
     waehrend des Tippens. min-height haelt die Zeile frei, damit beim
     Schreiben nichts springt. */
  /* Rangfolge: Der Anspruch ist groesser und steht mit Luft ueber den drei
     Zeilen -- ohne den Abstand las sich alles als EIN Block aus vier
     gleich grossen Zeilen (live gesehen). */
  /* Ueber dem Frosch. min-height haelt die Zeile frei, damit beim Wechsel
     der Sprueche nichts springt -- ohne sie huepft der ganze Block, sobald
     das Feld kurz leer ist. clamp mit vw haelt jeden Spruch einzeilig. */
  .st1-claim{margin:0;text-align:center;min-height:1.35em;display:flex;
    align-items:center;justify-content:center}
  .st1-tipp{display:inline-block;color:#fff;font-size:clamp(15px,4.9vw,20px);
    line-height:1.3;font-weight:700;letter-spacing:.005em;white-space:nowrap;
    text-shadow:0 2px 14px rgba(0,0,0,.2)}
  /* Groessen naeher beieinander: Spruch 20, Ueberschrift 24, Tarifzeile 17 --
     vorher lagen 19 / 23 / 15 auseinander und wirkten unruhig. */
  .st1 .hb-h1-3{font-size:clamp(20px,5.9vw,24px);line-height:1.28}
  .st1 .st1-ab{font-size:16.5px}
  .st1 .st1-ab b{font-size:20px}
  .st1-tipp.tippt::after{content:"";display:inline-block;width:2px;height:1em;
    margin-left:3px;vertical-align:-2px;background:#fff;animation:marke .75s step-end infinite}
  @keyframes marke{0%,100%{opacity:1}50%{opacity:0}}

  /* Alle drei Netze auf einen Blick, unten auf der Buehne. */
  /* Logos direkt an den Text heranziehen: Vorher lagen 330px Leere dazwischen,
     weil der Inhalt zentriert und die Logos ans Ende gedrueckt wurden. */
  .st1 .hb-inner{display:flex;flex-direction:column;justify-content:center}
  .st1-netze{display:flex;justify-content:center;align-items:center;gap:12px;margin:26px 0 0}
  .st1-netze img{height:26px;width:auto;max-width:78px;object-fit:contain;
    background:#fff;border-radius:10px;padding:7px 11px}

  /* Partner ohne Bühnen-Status: kompakter Streifen statt Vollbild. */
  .partner-top{padding:26px 0 22px}
  .pg-h:first-child{margin-top:0}
}
/* Auszeichnung am Desktop unsichtbar – dort trägt die H1 allein. */
/* Am Desktop unsichtbar: Auszeichnung (dort traegt die H1 allein) und die
   Netz-Buttons (die gehoeren zur Handy-Buehne 3 -- ohne diese Regel standen
   sie ungestylt und riesig im Fluss, live gesehen). */
@media(min-width:921px){
  /* Am Desktop traegt die H1 allein; Anspruch und Netz-Logos gehoeren zur
     Handy-Buehne und wuerden hier ungestylt im Fluss stehen. */
  .st1-claim{display:none}
  .st1-netze{display:none}
  .st-netze{display:none}
}

@media(max-width:920px){
  /* ===== Bühne 1: Abstände explizit ====================================
     Gemessen: .hb-text war 260px hoch, obwohl die drei Kinder zusammen nur
     132px brauchen – 128px kamen aus geerbten Margins der ursprünglichen
     Hero-Gestaltung. Statt sie einzeln zu suchen, gelten hier feste Werte. */
  .st1 .hb-head{gap:18px}
  /* flex:0 0 auto ist der Kern: .hb-text erbt aus dem urspruenglichen
     Zweispalter ein flex:1 -- in der Spaltenanordnung wird daraus HOEHE
     statt Breite, und der Block dehnte sich um 142px (live gemessen). */
  /* Mehr Luft zwischen Ueberschrift und Tarifzeile (Jans Wunsch). */
  .st1 .hb-text{display:flex;flex-direction:column;align-items:center;gap:22px;flex:0 0 auto}
  .st1 .hb-head{flex:0 0 auto}
  .st1 .hb-text > *{margin:0}
  .st1-netze{margin-top:34px}
  .st1 .pfeile{margin-top:26px}
}

@media(max-width:920px){
  /* ===== Bühne 2 in der Bildsprache von Bühne 1 =========================
     Grüner Grund wie die erste Bühne, darauf weiße Karten. Das verbindet
     die beiden Bühnen zu einer Erzählung, statt dass Bühne 2 wie ein
     fremder Abschnitt wirkt. Bühne 3 bleibt hell – so entsteht Rhythmus. */
  .st2{background:linear-gradient(170deg,#2E9B49 0%,#3DA857 55%,#46B061 100%);
    color:#fff}
  .st2 .st-kicker{color:rgba(255,255,255,.85)}

  /* Das Angebot als weiße Karte – das Ergebnis, bevor der Weg kommt. */
  .st2 .st-best{background:#fff;border-radius:20px;padding:16px 18px 18px;
    margin:0 auto 22px;max-width:330px;gap:7px;
    box-shadow:0 18px 40px -22px rgba(0,0,0,.45)}
  .st2 .sb-gb{color:var(--ink)}
  .st2 .sb-preis{color:#1F8A38}
  .st2 .sb-preis em{color:#4E8E6D}

  /* Die drei Stationen als Karten mit großer Zeichnung. */
  .st2 .karte{gap:11px}
  .st2 .k-stat{background:rgba(255,255,255,.97);border-radius:18px;
    padding:14px 14px 15px;text-align:center;
    box-shadow:0 14px 32px -22px rgba(0,0,0,.5)}
  .st2 .k-stat::after{display:none}          /* keine gestrichelte Linie auf Karten */
  .st2 .k-bild{position:static;width:60px;height:60px;margin:0 auto 8px;
    background:#F2F8F4;border:2px solid #DCEFE3;color:#1F8A38}
  .st2 .k-bild svg{width:34px;height:34px}
  .st2 .k-bild b{left:-4px;top:-4px;width:22px;height:22px;font-size:12px}
  .st2 .k-ziel .k-bild{background:var(--green);border-color:var(--green);color:#fff}
  .st2 .k-h{color:var(--ink);font-size:14px}
  .st2 .k-geld{font-size:19px;margin-top:6px}

  /* Das i und die Pfeile auf grünem Grund. */
  .st2 .pop > summary{border-color:rgba(255,255,255,.5);color:#fff}
  .st2 .pfeile{color:#fff}
}
@media(max-width:920px){
  /* Straffer, damit ⓘ und Pfeile mit auf den Bildschirm passen:
     gemessen 727px Inhalt bei 812px Höhe abzüglich 71px Kopfleiste. */
  .st2 .st-best{padding:13px 16px 15px;margin-bottom:16px;max-width:300px;gap:4px}
  .st2 .sb-gb{font-size:21px}
  .st2 .sb-preis{font-size:27px}
  .st2 .sb-logo{height:26px}
  .st2 .karte{gap:9px}
  .st2 .k-stat{padding:11px 12px 12px}
  .st2 .k-bild{width:50px;height:50px;margin-bottom:6px}
  .st2 .k-bild svg{width:28px;height:28px}
  .st2 .k-h{font-size:13.5px;line-height:1.25}
  .st2 .k-geld{font-size:17.5px;margin-top:4px}
  .st2 .pop{margin-top:10px}
  .st2 .pfeile{margin-top:12px}
  .st2 .st-kicker-gross{margin-bottom:8px}
}
@media(max-width:920px){
  /* Zweiter Durchgang: gemessen endeten die Pfeile bei 840px auf 812px Schirm.
     Die 28px kommen aus Kreisen, Innenabstaenden und den Luecken zwischen den Bloecken. */
  .st2 .st-kicker-gross{margin-bottom:5px}
  .st2 .st-best{margin-bottom:10px;padding:11px 16px 13px}
  .st2 .k-stat{padding:9px 12px 10px}
  .st2 .k-bild{width:44px;height:44px;margin-bottom:5px}
  .st2 .k-bild svg{width:25px;height:25px}
  .st2 .karte{gap:8px;margin:0}
  .st2 .pop{margin-top:8px}
  .st2 .pfeile{margin-top:9px}
}
/* Karten Buehne 2: kurze fette Aktion, Partner als eigene Zeile darunter.
   Vorher stand alles in einer Zeile, das ⓘ von Karte 2 fiel um und machte
   die Karte hoeher als die beiden anderen. */
.k-wo{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);margin-top:2px}
.st2 .k-wo{color:#4B6B55}
@media(max-width:920px){
  .st2 .k-h{font-size:15px;line-height:1.25}
  .st2 .k-wo{font-size:12px;margin-top:3px}
  .st2 .k-geld{margin-top:5px}
  .st2 .k-stat{padding:9px 12px 11px}
}

/* =====================================================================
   BUEHNEN-UMBAU 24.08.2026 (Jan)
   Wechselnde Gruende: 1 gruen, 2 weiss, 3 gruen, 4 (Partner) weiss.
   Auf den Buehnen nur noch schwarze und gruene Schrift, kein Grau.
   Alles Graue und Rechtliche steht gesammelt am Seitenende (#preise).
   ===================================================================== */
.stern{color:var(--primary);text-decoration:none;font-weight:800;
  font-size:.7em;vertical-align:super;line-height:0;margin-left:1px}
.stern:hover{text-decoration:underline}

/* Angaben-Block am Seitenende -- hierher fuehren alle Sternchen. */
.rechtl{background:var(--bg);padding:30px 0 34px}
.rechtl h2{font-size:15px;letter-spacing:0;margin:0 0 8px}
.rechtl .foot-note{margin:0}

/* Der Finder haengt jetzt in .frei-zone, die alte Nachbarschafts-Regel
   .partner-top + .finder greift dadurch nicht mehr. */
.frei-zone > .finder{border-radius:0;box-shadow:none;padding-top:26px}

/* Netzlogo mitten in der Zeile von Station 3. */
.k-logo{height:22px;width:auto;vertical-align:-4px;margin:0 3px}

@media(max-width:920px){
  /* ===== Scrollen: eine Buehne je Wischgeste, exakt zentriert ==========
     Vierter Anlauf, diesmal mit dem Teil, der vorher fehlte:
     - scroll-snap-stop:always  -> genau EIN Schritt pro Geste statt
       Durchrutschen ueber mehrere Buehnen.
     - scroll-behavior:auto     -> die Pfeile springen sofort und exakt.
       Mit "smooth" kaempfte die laufende Animation gegen das Einrasten,
       daher wurde man frueher auf die erste Buehne zurueckgezogen.
     - .frei-zone traegt selbst einen Rastpunkt und ist viel hoeher als der
       Bildschirm. Ein Rastbereich, der groesser als der Bildschirm ist,
       gilt laut Spezifikation auf ganzer Laenge als gueltige Rastposition
       -- deshalb scrollt ab dem Rechner wieder alles frei, ohne dass
       "mandatory" einen zurueckzieht. Genau daran sind die drei frueheren
       Anlaeufe gescheitert. */
  /* Einrasten NUR solange die Buehnen laufen. Reines CSS reicht nicht:
     "mandatory" gilt fuer das ganze Dokument, und der Browser laesst dann
     keine Scrollposition mehr zu, die kein Rastpunkt ist -- gemessen war
     alles unterhalb von 9133px unerreichbar, also FAQ, Text, Angaben und
     Fusszeile. homepage.js setzt die Klasse, solange man in den Buehnen
     ist, und nimmt sie darunter wieder weg. Ohne JS: gar kein Einrasten,
     also derselbe Zustand wie vorher -- nichts kann unerreichbar werden. */
  html{scroll-behavior:auto;scroll-padding-top:0}
  html.buehnen{scroll-snap-type:y mandatory}
  .st{scroll-snap-align:start;scroll-snap-stop:always}
  .frei-zone{scroll-snap-align:start}

  /* Buehne 1 steht UNTER der Kopfleiste (die klebt erst danach), darf also
     nur den Rest des Bildschirms hoch sein. Der Rastpunkt wird per
     scroll-margin wieder auf 0 gezogen. */
  .st1{min-height:calc(100lvh - 71px);padding-top:0;scroll-margin-top:71px}

  /* Untere Browserleiste (iPhone): sobald Safari sie einklappt, waechst svh
     auf lvh -- und die eingeklappte Leiste liegt UEBER diesem Bereich.
     100lvh - 100svh ist genau diese Hoehe. Als unterer Innenabstand
     gerechnet bleiben die drei Pfeile in jedem Zustand frei.
     Erste Zeile ist der Rueckfall fuer Browser ohne svh. */
  .st{padding-bottom:18px}
  .st{padding-bottom:calc(100lvh - 100svh + env(safe-area-inset-bottom,0px) + 16px)}

  /* Ziele in der freien Zone nicht unter die Kopfleiste springen lassen. */
  .frei-zone [id]{scroll-margin-top:78px}

  /* ===== Buehne 2: weiss, schwarz-gruen ============================== */
  /* NUR die seitlichen Abstaende zuruecksetzen -- padding:0 hat vorher auch
     den 71px-Abstand fuer die Kopfleiste und den unteren fuer die
     Browserleiste geloescht. */
  /* Aeltere Regeln (.st2,.st3{padding:26px 0 8px}) haben den 71px-Abstand
     fuer die klebende Kopfleiste ueberschrieben. Hier explizit zurueck. */
  .st2,.st3{padding-top:71px}
  .st2{background:#fff;color:var(--ink);padding-left:0;padding-right:0}
  .st2 .st-kicker-gross{color:var(--primary);margin-bottom:14px}
  .st2 .karte{gap:12px}
  .st2 .k-stat{background:#fff;border:2px solid #E6F0E9;border-radius:18px;
    padding:12px 14px 14px;text-align:center;box-shadow:0 12px 28px -22px rgba(11,27,51,.5)}
  .st2 .k-bild{position:static;width:46px;height:46px;margin:0 auto 7px;
    background:#F2F8F4;border:2px solid #DCEFE3;color:var(--primary)}
  .st2 .k-bild svg{width:26px;height:26px}
  .st2 .k-bild > b{background:var(--primary);border-color:#fff;color:#fff}
  .st2 .k-ziel .k-bild{background:var(--primary);border-color:var(--primary);color:#fff}
  .st2 .k-h{display:block;font-family:var(--mn);font-weight:800;font-size:16px;
    line-height:1.25;color:var(--ink)}
  /* Betrag: Bezeichnung schwarz, Zahl gruen -- kein Grau, kein Rot. */
  .st2 .k-geld{display:block;font-family:var(--bd);font-weight:600;font-size:14px;
    color:var(--ink);margin-top:6px}
  .st2 .k-geld b{font-family:var(--mn);font-weight:800;font-size:20px;
    color:var(--primary);display:inline-block;margin-left:2px}
  .st2 .k-raus b{color:var(--ink)}
  .st2 .pop > summary{border-color:#CFE3D6;color:var(--primary);background:#fff}
  .st2 .pfeile{color:var(--primary)}

  /* ===== Buehne 4: Partner, weiss ==================================== */
}

@media(max-width:920px){
  /* Karte 2 braucht zwei Titelzeilen ("Handy zum Festpreis verkaufen bei
     Clevertronic") und war dadurch 20px hoeher als 1 und 3. Alle Titel
     reservieren jetzt zwei Zeilen -- drei gleich hohe Karten lesen sich als
     drei gleichwertige Schritte. Der Platz dafuer kommt aus Kreisen,
     Innenabstaenden und der Luecke. */
  .st2 .k-h{min-height:2.5em;display:flex;align-items:center;justify-content:center}
  .st2 .karte{gap:10px}
  .st2 .k-stat{padding:10px 12px 12px}
  .st2 .k-bild{width:42px;height:42px;margin-bottom:6px}
  .st2 .k-bild svg{width:24px;height:24px}
}
@media(max-width:920px){
  /* ===== Buehne 3: wieder gruen (Jan, 24.08.2026) =====================
     Sie stand auf dem hellgrauen Seitengrund und brach den Wechsel
     gruen - weiss - gruen - weiss. Karten bleiben weiss, die Kleinzeilen
     werden schwarz statt grau. */
  .st3{background:linear-gradient(170deg,#2E9B49 0%,#3DA857 55%,#46B061 100%);color:#fff}
  .st3 .st-frage{color:#fff}
  .st3 .hd-box{background:transparent;border:0;box-shadow:none;padding:0}
  .st3 .hd-vor{color:#fff}
  .st3 .hd-b{background:#fff;border-color:transparent;box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}
  .st3 .hd-b b{color:var(--ink)}
  .st3 .hd-b span{color:var(--ink)}
  .st3 .hd-b span em{color:var(--primary)}
  .st3 .hd-b i{color:var(--ink);opacity:1}
  .st3 .hd-minus{border:2px solid var(--gold)}
  .st3 .st-alle{background:#fff;color:var(--primaryd);box-shadow:0 14px 34px -20px rgba(0,0,0,.6)}
  .st3 .pfeile{color:#fff}
}
@media(min-width:921px){
  /* Wie am Handy: Bezeichnung schwarz, nur die Zahl faerbig. Die alte Regel
     hat "Gesamtkosten 24M:" mit rot eingefaerbt. Muss in dieser Abfrage
     stehen -- ohne sie wuerde sie die Handy-Regeln gleicher Staerke
     ueberschreiben, weil sie spaeter in der Datei steht. */
  .k-geld{color:var(--ink);font-family:var(--bd);font-weight:600;font-size:14px}
  .k-geld b{font-family:var(--mn);font-weight:800;font-size:19px}
  .k-raus b{color:#B03A2E}
  .k-rein b{color:#1F8A38}
}

/* =====================================================================
   PARTNER als schmales Band statt eigener Buehne (24.08.2026)
   Ein ganzer Bildschirm nur fuer Logos kostet den Besucher von TikTok eine
   Wischgeste, bevor er ein Angebot sieht. Das Band steht jetzt direkt vor
   der Trefferliste -- auf dem Weg jedes Besuchers, ohne eigenen Bildschirm.
   Am Handy als Laufband statt als Raster: eine Reihe statt vier, dieselbe
   Aussage auf einem Fuenftel der Hoehe.
   ===================================================================== */
.partner-top{background:#fff;padding:20px 0 18px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner-top .h{font-family:var(--mn);font-weight:800;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 13px;text-align:center}
@media(max-width:920px){
  .partner-top .mqr{display:block;max-width:none;padding:0}
  .partner-top .pgrid{display:none}
  .partner-top .ptile{height:54px;width:116px;padding:9px 14px;border-radius:12px}
  .partner-top .ptile img{max-height:24px;max-width:84px}
  .partner-top .ptile-txt{font-size:12.5px}
  .partner-top .mqg{gap:10px;padding-right:10px}
  .partner-top .mqt{animation-duration:38s}
}

/* =====================================================================
   KLEINE BILDSCHIRME (iPhone SE & Co. mit ausgeklappten Browserleisten)
   Gemessen bei 620px Hoehe: Buehne 2 brauchte 729px, Buehne 3 696px --
   die Pfeile lagen 87 bzw. 56px unter dem Rand. Hier alles proportional
   kleiner, damit jede Buehne auch dort EIN Bildschirm bleibt.
   ===================================================================== */
@media(max-width:920px) and (max-height:740px){
  .st{padding-bottom:10px}
  .st{padding-bottom:calc(100lvh - 100svh + env(safe-area-inset-bottom,0px) + 8px)}
  .st-kicker-gross{margin-bottom:6px;font-size:12px}
  .pfeile{margin:10px auto 0}
  .pfeile i{width:12px;height:12px}

  /* Buehne 1 */
  .st1 .hb-ring{width:64px;height:64px}
  .st1 .hb-h1-3{font-size:25px}
  .st1-claim{font-size:15px}
  .st1-ab{margin-top:10px;font-size:14px}
  .st1-netze img{height:22px}

  /* Buehne 2 und 3 skalieren fliessend (siehe unten), hier nur der Rahmen. */
}

/* =====================================================================
   FLIESSENDE GROESSEN AUF BUEHNE 2 UND 3
   Feste Stufen waren zu grob: bei 620px Hoehe blieben auf Buehne 2 227px
   ungenutzt, bei 812px lief sie ueber. Alles Platzfressende haengt jetzt
   an svh und waechst mit dem Bildschirm mit -- eine Regel statt Stufen.
   ===================================================================== */
@media(max-width:920px){
  .st2 .k-bild{width:clamp(32px,5.6svh,46px);height:clamp(32px,5.6svh,46px);
    margin-bottom:clamp(4px,.9svh,8px)}
  .st2 .k-bild svg{width:58%;height:58%}
  .st2 .k-h{font-size:clamp(14px,2.02svh,16.5px)}
  .st2 .k-geld{font-size:clamp(12.5px,1.75svh,14.5px);margin-top:clamp(3px,.75svh,7px)}
  .st2 .k-geld b{font-size:clamp(17px,2.55svh,21px)}
  .st2 .k-stat{padding:clamp(7px,1.3svh,12px) 12px clamp(9px,1.5svh,14px)}
  .st2 .karte{gap:clamp(7px,1.3svh,11px)}
  .st2 .k-logo{height:clamp(18px,2.6svh,23px)}

  .st3 .st-frage{font-size:clamp(19px,2.8svh,23px);margin-bottom:clamp(10px,1.9svh,16px)}
  .st3 .st-netze{margin-bottom:clamp(10px,1.9svh,16px)}
  .st3 .st-netze img{height:clamp(20px,2.9svh,26px)}
  .st3 .hd-b{padding:clamp(8px,1.4svh,13px) 8px clamp(9px,1.6svh,14px)}
  .st3 .hd-b b{font-size:clamp(15px,2.2svh,18px)}
  .st3 .hd-b span em{font-size:clamp(19px,2.9svh,25px)}
  .st3 .hd-b i{font-size:clamp(10.5px,1.5svh,12px)}
  .st3 .st-alle{padding:clamp(12px,1.9svh,17px) 18px;font-size:clamp(15px,2.1svh,17px);
    margin-top:clamp(10px,1.8svh,16px)}
}

/* =====================================================================
   TABLET (600-920px): dieselben Buehnen, aber in Tablet-Groesse
   Die Handy-Regeln greifen bis 920px -- auf einem 768er iPad stand deshalb
   Handy-Typografie mitten auf einem grossen Schirm. Hier alles eine Stufe
   groesser, Inhalt auf eine lesbare Spaltenbreite begrenzt.
   ===================================================================== */
@media(min-width:600px) and (max-width:920px){
  .st1-claim{font-size:22px}
  .st1 .hb-ring{width:104px;height:104px}
  .st1 .hb-ring img{width:104px;height:104px}
  .st1 .hb-h1-3{font-size:40px}
  .st1-ab{font-size:20px;margin-top:22px}
  .st1-ab b{font-size:27px}
  .st1-netze{gap:14px;margin-top:26px}
  .st1-netze img{height:32px}
  .pfeile{width:60px;margin-top:26px}
  .pfeile i{width:20px;height:20px;border-width:3px}

  .st-kicker-gross{font-size:16px;margin-bottom:20px}
  .st2 .karte{max-width:580px;margin:0 auto;gap:16px}
  .st2 .k-stat{padding:18px 22px 20px;border-radius:22px}
  .st2 .k-bild{width:64px;height:64px;margin-bottom:10px}
  .st2 .k-bild > b{width:26px;height:26px;font-size:14px}
  .st2 .k-h{font-size:22px;min-height:0}
  .st2 .k-geld{font-size:18px;margin-top:8px}
  .st2 .k-geld b{font-size:28px}
  .st2 .k-logo{height:28px}

  .st3 .st-frage{font-size:32px;margin-bottom:22px}
  .st3 .st-netze{margin-bottom:22px}
  .st3 .st-netze img{height:32px}
  .st3 .hero-deals{max-width:620px;margin:0 auto}
  .st3 .hd-b b{font-size:22px}
  .st3 .hd-b span em{font-size:30px}
  .st3 .hd-b i{font-size:13px}
  .st3 .st-alle{font-size:20px;padding:18px 30px;max-width:420px;
    margin-left:auto;margin-right:auto}

  .partner-top .h{font-size:19px}
  .partner-top .ptile{height:68px;width:150px;padding:12px 18px}
  .partner-top .ptile img{max-height:32px;max-width:110px}
  .partner-top .ptile-txt{font-size:15px}
}

/* =====================================================================
   DESKTOP-UMBAU 24.08.2026
   Der Hero war ein 160px hoher Streifen: Frosch links angeklebt, Ueberschrift
   mittig, kein Anspruch, kein Preis, keine Netzlogos -- und die drei Schritte
   darunter in 15px-Schrift ueber die volle Breite. Jetzt derselbe Aufbau wie
   am Handy, nur in Desktop-Groesse und auf eine lesbare Spaltenbreite
   begrenzt: Anspruch, Frosch, Ueberschrift, Preiszeile, Netzlogos.
   ===================================================================== */
@media(min-width:921px){
  .hero-band{padding:0}
  .hb-inner{max-width:1000px;padding:52px clamp(16px,4vw,28px) 46px;gap:0}
  .hb-head{flex-direction:column;align-items:center;gap:0;text-align:center;flex-wrap:nowrap}

  /* Der Anspruch schreibt sich auch hier Buchstabe fuer Buchstabe -- er war
     am Desktop bisher ganz ausgeblendet. */
  .st1-claim{display:flex;justify-content:center;align-items:center;
    margin:0 0 16px;min-height:1.4em}
  .st1-tipp{display:inline-block;color:rgba(255,255,255,.94);font-size:21px;
    font-family:var(--mn);font-weight:700;letter-spacing:.01em;white-space:nowrap}
  .st1-tipp.tippt::after{content:"";display:inline-block;width:2px;height:1em;
    margin-left:3px;background:currentColor;vertical-align:-2px;animation:blink 1s steps(1) infinite}

  .hb-ring{width:112px;height:112px;margin:0 0 20px}
  .hb-ring img{width:112px;height:112px}
  .hb-text{flex:0 0 auto;width:100%}
  .hb-h1-3{font-size:46px;line-height:1.14}

  .st1-ab{display:block;margin:22px 0 0;font-size:20px;font-weight:600;
    color:rgba(255,255,255,.95)}
  .st1-ab b{font-family:var(--mn);font-weight:800;font-size:28px;color:#fff}

  .st1-netze{display:flex;justify-content:center;align-items:center;gap:14px;margin:28px 0 0}
  .st1-netze img{height:30px;width:auto;max-width:96px;object-fit:contain;
    background:#fff;border-radius:11px;padding:8px 14px}

  /* Die drei Schritte: weisser Grund, groessere Zeichnungen, lesbare Schrift. */
  .st2{background:#fff;padding:52px 0 54px}
  .st2 .st-kicker{display:block;text-align:center;font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--primary);font-weight:800;margin:0 0 34px}
  .karte{max-width:1040px;margin:0 auto}
  .k-bild{width:76px;height:76px}
  .k-bild svg{width:42px;height:42px}
  .k-bild > b{width:26px;height:26px;font-size:14px}
  .k-h{font-size:19px;line-height:1.3}
  .k-geld{font-size:16px;margin-top:11px}
  .k-geld b{font-size:25px}
  .k-logo{height:26px;vertical-align:-5px}
  .k-stat:not(:last-child)::after{top:38px}
}
@media(min-width:921px){
  /* Titel 1 und 2 brechen in der Spalte um, Titel 3 nicht -- ohne feste
     Hoehe standen die drei Betraege auf verschiedenen Linien. */
  .k-h{min-height:2.6em;display:flex;align-items:center;justify-content:center}
  /* Wie am Handy: schwarz und gruen, kein Rot. */
  .k-raus b{color:var(--ink)}
}
@media(min-width:921px){
  /* Die Angebots-Kacheln waren mit 15px/18px die kleinste Schrift auf einem
     1280er Schirm -- ausgerechnet die Preise. Und "/Mon. effektiv" stand in
     10,5px Grau. Jetzt in Groesse und Farbe wie am Handy. */
  .hd-box{max-width:1060px;margin:0 auto;padding:24px 24px 26px}
  .hd-vor{font-size:13px;letter-spacing:.12em;color:var(--ink);margin-bottom:20px}
  .hd-row{gap:14px}
  .hd-b{padding:17px 12px 18px;border-radius:16px}
  .hd-b b{font-size:20px}
  .hd-b span{font-size:15px;color:var(--ink)}
  .hd-b span em{font-size:28px}
  .hd-b i{font-size:12px;color:var(--ink);opacity:.8}
  .partner-top .h{font-size:17px;margin-bottom:18px}
}

/* =====================================================================
   FEINSCHLIFF 24.08.2026 (Jan)
   ===================================================================== */
@media(max-width:920px){
  /* --- Buehne 1 -----------------------------------------------------
     Mehr Luft zwischen Anspruchszeile und Frosch -- dadurch rutschen
     Frosch und alles darunter nach unten, die Zeile nach oben. */
  .st1-claim{margin:0 0 clamp(26px,5svh,52px)}

  /* Die Preiszeile war blosser Text auf gruenem Grund. Als heller Riegel
     mit Rahmen ist sie das, was sie sein soll: das Angebot. */
  .st1 .st1-ab{display:inline-block;margin:clamp(18px,3.2svh,30px) auto 0;
    padding:clamp(9px,1.7svh,14px) clamp(16px,4.6vw,24px);
    background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.42);
    border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:clamp(14px,2.05svh,16px);color:#fff;font-weight:600;
    box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
  .st1 .st1-ab b{font-size:clamp(19px,2.9svh,24px);color:#fff}

  /* Netzlogos deutlich groesser: sie beantworten die erste Frage jedes
     Besuchers ("ist mein Netz dabei?") und waren mit 26px zu leise. */
  .st1-netze{gap:clamp(9px,2.6vw,14px);margin-top:clamp(22px,4svh,34px)}
  .st1-netze img{height:clamp(34px,4.8svh,44px);max-width:none;
    padding:clamp(9px,1.4svh,13px) clamp(14px,4vw,20px);border-radius:14px;
    box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}

  /* --- Buehne 2 -----------------------------------------------------
     Ueberschrift als echte Ueberschrift statt Kleinkicker. */
  .st2 .st-kicker-gross{font-size:clamp(21px,3.3svh,28px);font-weight:800;
    font-family:var(--mn);letter-spacing:-.01em;text-transform:none;
    color:var(--ink);margin-bottom:clamp(12px,2.2svh,20px)}

  /* Grosse Ziffer statt Zeichnung (Jan): die Nummer IST das Bild. */
  .st2 .k-bild{position:relative;width:clamp(44px,7.2svh,60px);height:clamp(44px,7.2svh,60px)}
  .st2 .k-bild svg{display:none}
  .st2 .k-bild > b{position:static;width:auto;height:auto;margin:0;padding:0;
    background:none;border:0;box-shadow:none;border-radius:0;
    font-family:var(--mn);font-weight:800;line-height:1;
    font-size:clamp(24px,4svh,33px);color:var(--primary)}
  .st2 .k-ziel .k-bild > b{color:#fff}

  /* --- Tarifkarten --------------------------------------------------
     Die Eckdaten mittig und in einen Kasten -- vorher standen sie links
     als lose Textkette unter dem Namen. */
  /* Zwei Klassen im Waehler, weil .deal-row .dr-specs weiter oben Grund,
     Rahmen und Innenabstand zurueckgesetzt hat -- eine Klasse allein verliert. */
  .deal-row .dr-specs{justify-content:center;background:#F6F8FC;
    border:1px solid #E7EDF6;border-radius:12px;padding:10px 12px;margin-top:11px}
  .deal-row .dr-seg b{font-size:14px}

  /* Partnerband hat unten Platz, also auch Luft. */
  .partner-top{padding:34px 0 30px}
  .partner-top .h{font-size:17px;margin-bottom:16px}
}

@media(min-width:921px){
  /* Am Desktop dieselbe Ziffern-Logik und dieselbe Ueberschriftgroesse. */
  .k-bild svg{display:none}
  .k-bild > b{position:static;width:auto;height:auto;margin:0;padding:0;
    background:none;border:0;box-shadow:none;border-radius:0;
    font-family:var(--mn);font-weight:800;line-height:1;font-size:38px;color:var(--primary)}
  .k-ziel .k-bild > b{color:#fff}
  .st2 .st-kicker{font-size:26px;font-weight:800;font-family:var(--mn);
    letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:34px}
}
@media(max-width:920px){
  /* Der Riegel muss auf eine Zeile: mit "entdecken" brach er auf 375px um.
     Das Wort war ohnehin doppelt -- die drei Pfeile darunter sagen dasselbe. */
  .st1 .st1-ab{white-space:nowrap}
  /* Drei gleich breite Kaesten statt drei verschieden breiter: die Logos
     haben unterschiedliche Seitenverhaeltnisse, feste Hoehe allein reicht nicht. */
  .st1-netze img{width:clamp(92px,26vw,118px);height:clamp(50px,7.4svh,64px);
    object-fit:contain;padding:clamp(10px,1.5svh,14px) clamp(12px,3.4vw,18px)}
}
@media(max-width:920px){
  /* Netzlogo fuehrt die Zahlenzeile an. */
  .st2 .k-geld .k-logo{height:clamp(16px,2.3svh,20px);vertical-align:-3px;margin:0 6px 0 0}
}
@media(min-width:921px){
  .k-geld .k-logo{height:22px;vertical-align:-4px;margin:0 7px 0 0}
}
@media(min-width:921px){
  /* Preisriegel und grosse Netzlogos auch am Desktop -- die Handy-Regeln
     dafuer stehen in @media(max-width:920px) und greifen hier nicht. */
  .st1 .st1-ab{display:inline-block;margin:26px 0 0;padding:13px 26px;white-space:nowrap;
    background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.42);
    border-radius:999px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-size:19px;color:#fff;font-weight:600;
    box-shadow:0 18px 40px -24px rgba(0,0,0,.55)}
  .st1 .st1-ab b{font-size:27px;color:#fff}
  .st1-netze{margin-top:30px;gap:16px}
  .st1-netze img{width:132px;height:66px;object-fit:contain;max-width:none;
    padding:13px 20px;border-radius:14px;box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
}
@media(min-width:600px) and (max-width:920px){
  /* Der Riegel war neben einer 40px-Ueberschrift zu leise. Muss nach dem
     Feinschliff-Block stehen, sonst gewinnen dessen clamp-Werte. */
  .st1 .st1-ab{padding:12px 24px;font-size:19px}
  .st1 .st1-ab b{font-size:27px}
  .st1-netze img{width:150px;height:74px;padding:14px 22px}
}
@media(max-width:920px) and (max-height:740px){
  /* Die grosse Ueberschrift hat auf kleinen Schirmen die Luft gefressen:
     gemessen blieben bei 620px nur 3px unter den Pfeilen. */
  .st2 .st-kicker-gross{font-size:clamp(18px,3svh,22px);margin-bottom:clamp(8px,1.6svh,12px)}
  .st2 .k-bild{width:clamp(38px,6.6svh,46px);height:clamp(38px,6.6svh,46px)}
  .st2 .k-bild > b{font-size:clamp(21px,3.6svh,27px)}
  .st2 .k-stat{padding:clamp(6px,1.1svh,10px) 12px clamp(7px,1.3svh,11px)}
}
@media(max-width:920px) and (max-height:740px){
  /* Buehne 1 ist nur 100svh minus Kopfleiste hoch -- bei 620px Schirm also
     549px. Mit den groesseren Logos und dem Riegel lief der dritte Pfeil
     6px darueber hinaus. */
  .st1-claim{margin-bottom:clamp(18px,3.4svh,34px)}
  .st1 .st1-ab{margin-top:clamp(13px,2.4svh,24px);padding:clamp(8px,1.4svh,12px) 18px}
  .st1-netze{margin-top:clamp(15px,2.9svh,26px)}
  .st1-netze img{height:clamp(42px,6.4svh,56px);padding:clamp(8px,1.2svh,12px) 14px}
}

/* =====================================================================
   ZOOM UND SEITENABSTAND AM HANDY (24.08.2026)
   Drei Ursachen, alle nachgemessen:
   1. iOS zoomt beim Antippen eines Eingabe- oder Auswahlfelds automatisch
      hinein, sobald dessen Schrift kleiner als 16px ist -- und bleibt danach
      zoomt. Auf der Startseite betraf das die RNM-Auswahl (14px), auf den
      Kategorieseiten dieselbe.
   2. Safari blaeht Schriften eigenmaechtig auf ("text inflation"), solange
      text-size-adjust auf auto steht. Danach stimmen alle Abstaende nicht mehr.
   3. Der seitliche Abstand lag bei 15-16px und war zwischen Buehne 1 und dem
      Rest um einen Pixel verschieden.
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input,select,textarea{font-size:16px}

@media(max-width:920px){
  /* Ein einheitlicher Seitenabstand ueber die ganze Seite. */
  .wrap,.hb-inner{padding-left:20px;padding-right:20px}
  .st1 .hb-inner{padding-left:20px;padding-right:20px}
  select.rnm-combo{font-size:16px}
}
@media(max-width:920px) and (max-height:670px){
  /* Sehr kleine Schirme (iPhone SE mit ausgeklappten Leisten, ~553px):
     bei 635px blieben auf Buehne 2 und 3 nur noch 9px Luft. */
  .st{padding-bottom:calc(100lvh - 100svh + env(safe-area-inset-bottom,0px) + 6px)}
  .pfeile{margin-top:6px;padding:2px}
  .pfeile i{width:11px;height:11px}
  .st1-claim{margin-bottom:clamp(12px,2.6svh,24px);font-size:14px}
  .st1 .hb-ring{width:58px;height:58px}
  .st1 .hb-h1-3{font-size:22px}
  .st1 .st1-ab{margin-top:10px;padding:7px 15px;font-size:13px}
  .st1 .st1-ab b{font-size:17px}
  .st1-netze{margin-top:12px;gap:7px}
  .st1-netze img{height:36px;padding:7px 11px}
  .st2 .st-kicker-gross{font-size:17px;margin-bottom:7px}
  .st2 .karte{gap:6px}
  .st2 .k-stat{padding:5px 10px 7px}
  .st2 .k-bild{width:34px;height:34px;margin-bottom:3px}
  .st2 .k-bild > b{font-size:19px}
  .st2 .k-h{font-size:13.5px}
  .st2 .k-geld{font-size:12px;margin-top:3px}
  .st2 .k-geld b{font-size:16px}
  .st3 .st-frage{font-size:18px;margin-bottom:8px}
  .st3 .st-netze{margin-bottom:8px}
  .st3 .st-netze img{height:18px}
  .st3 .hd-b{padding:6px 6px 7px}
  .st3 .st-alle{padding:10px 16px;font-size:14px;margin-top:8px}
}
@media(max-width:430px){
  /* Kopfleiste: Logo + "Tarif finden" + Menue brauchten 327px, verfuegbar
     waren bei 20px Rand nur 325 -- der Menue-Knopf wurde rechts angeschnitten.
     Statt den Rand zu verkleinern (der soll ueberall gleich sein) werden hier
     die Kopf-Elemente etwas kleiner. */
  header.hd .logo{font-size:15px}
  header.hd .hd-right .btn{padding:9px 13px;font-size:14px}
  header.hd .hd-right{gap:8px}
}
@media(max-width:430px){
  /* Die Schriftgroesse am .logo greift nicht durch: der Schriftzug .wm hat
     eine eigene (16,5px) und ist damit 129px breit. Gemessen brauchte die
     Leiste 336px bei 316px Platz. */
  header.hd .logo .wm{font-size:15px}
  header.hd .logo .mark{width:28px;height:28px}
  header.hd .logo{gap:7px}
  header.hd > .wrap{gap:8px}
  header.hd .hd-right .btn{padding:9px 11px}
}
@media(max-width:365px){
  /* Unter ~360px reicht der Platz auch verkleinert nicht: Logo 152 + rechte
     Seite 151 + Luecke 8 = 311 bei 291 verfuegbar. Dort traegt der Frosch
     allein -- er ist als Marke eindeutig, und der Menue-Knopf muss erreichbar
     bleiben. Betrifft nur sehr alte Geraete (iPhone SE der ersten Reihe). */
  header.hd .logo .wm{display:none}
}

/* =====================================================================
   GROSSE HANDYS (ab 390px breit UND 780px hoch)
   Auf Jans iPhone 16 Pro (402x874) war die H1 nur 23,7px: die Regel
   deckelt bei clamp(20px, 5,9vw, 24px). Alles war fuer ein 375er Geraet
   ausgelegt und liess auf einem grossen Schirm 100px leer. Hier eine
   Stufe groesser -- nur wenn wirklich Platz da ist, sonst greifen weiter
   die kleineren Stufen darueber.
   ===================================================================== */
@media(min-width:390px) and (max-width:599px) and (min-height:780px){
  .st1-tipp{font-size:clamp(19px,5.4vw,23px)}
  .st1 .hb-ring{width:104px;height:104px}
  .st1 .hb-ring img{width:104px;height:104px}
  /* Gemessen: bei 402px Breite (362 nutzbar) haelt „Guenstigen Tarif
     behalten." bis 29,5px drei Zeilen, darueber bricht sie auf vier.
     7,2vw bleibt ueber die ganze Handy-Breite unter dieser Grenze. */
  .st1 .hb-h1-3{font-size:clamp(26px,7.2vw,32px);line-height:1.22}
  .st1 .st1-ab{padding:13px 24px;font-size:18px}
  .st1 .st1-ab b{font-size:27px}
  .st1-netze img{width:clamp(108px,29vw,132px);height:72px;padding:14px 18px}

  .st2 .st-kicker-gross{font-size:30px}
  .st2 .k-bild{width:62px;height:62px}
  .st2 .k-bild > b{font-size:38px}
  .st2 .k-h{font-size:17.5px}
  .st2 .k-geld{font-size:15px}
  .st2 .k-geld b{font-size:23px}
  .st2 .k-geld .k-logo{height:21px}
  .st2 .k-stat{padding:14px 14px 16px}

  .st3 .st-frage{font-size:27px}
  .st3 .st-netze img{height:30px}
  .st3 .hd-b b{font-size:19px}
  .st3 .hd-b span em{font-size:27px}
  .st3 .hd-b i{font-size:12.5px}
  .st3 .st-alle{font-size:17px;padding:16px 24px}
}

/* =====================================================================
   BUEHNE 1: eine Formel statt Stufen
   Die Groessen hingen bisher an Breiten- ODER Hoehenstufen. Ergebnis: auf
   einem 375er Schirm mit 812px Hoehe war die H1 22px, auf einem 402er
   23,7px -- beide Male viel zu klein fuer den Platz. min(vw, svh) nimmt
   immer den kleineren der beiden Werte: breit UND hoch gibt gross, eng
   ODER flach gibt klein. Damit fallen die Stufen fuer Buehne 1 weg.
   Gemessen: „Guenstigen Tarif behalten." braucht 12,3x seine Schriftgroesse
   an Breite -- 7vw laesst ueberall Luft.
   ===================================================================== */
@media(max-width:599px){
  .st1-tipp{font-size:clamp(15px,min(5.4vw,2.7svh),23px)}
  .st1 .hb-ring{width:clamp(58px,min(25vw,11svh),110px);
    height:clamp(58px,min(25vw,11svh),110px)}
  .st1 .hb-ring img{width:100%;height:100%}
  .st1 .hb-h1-3{font-size:clamp(20px,min(7vw,3.6svh),32px);line-height:1.22}
  .st1 .st1-ab{font-size:clamp(13px,min(4.3vw,2.1svh),18px);
    padding:clamp(8px,1.5svh,13px) clamp(16px,5vw,24px)}
  .st1 .st1-ab b{font-size:clamp(17px,min(6.6vw,3.2svh),27px)}
  /* Breite nicht ausrechnen, sondern die Zeile fuellen lassen: drei gleich
     breite Kaesten ohne Ueberlauf, egal wie breit das Geraet ist. */
  .st1-netze img{flex:1 1 0;min-width:0;max-width:134px;
    height:clamp(34px,min(15vw,7.5svh),74px)}
}

/* =====================================================================
   UEBERSCHRIFT DER TREFFERLISTE BLEIBT STEHEN
   Der Rastpunkt-Versuch machte Positionen unerreichbar (gemessen: 2700,
   3200 und 5000 landeten alle bei 2622) -- dieselbe Falle wie beim
   Einrasten der ganzen Seite. Stattdessen klebt die Ueberschrift unter der
   Kopfleiste, solange die Liste im Bild ist. Damit ist sie immer da, egal
   wie kraeftig gewischt wurde, und man weiss jederzeit, wo man ist.
   ===================================================================== */
@media(max-width:920px){
  #tarife .sec-head{position:sticky;top:70px;z-index:6;
    background:var(--bg);margin:0 -20px;padding:9px 20px 10px;
    box-shadow:0 8px 14px -12px rgba(11,27,51,.45)}
  #tarife .sec-head h2{font-size:18px;display:flex;align-items:center;gap:8px}
  #tarife .sec-head h2 i{font-size:19px;color:var(--primary)}
}
@media(max-width:920px){
  /* Die "Filter & Suche"-Leiste lief halb unter der klebenden Ueberschrift
     durch und sah dort abgeschnitten aus (Jans Bild). Sie ist am Handy
     ohnehin doppelt: die Leiste am unteren Rand traegt "Filter" und
     "Bester Effektivpreis". Im geoeffneten Filterblatt bleibt sie als Kopf
     mit Schliessen-Kreuz erhalten, deshalb nur dort ausblenden, wo das
     Blatt zu ist. Die Bedingung haengt an body.hat-mbar -- ohne JS gibt es
     die untere Leiste nicht, dann bleibt die obere stehen. */
  /* An mbar-an haengen, NICHT an hat-mbar: hat-mbar sagt nur "es gibt eine
     untere Leiste", mbar-an sagt "sie steht gerade da". Die untere Leiste
     erscheint erst, wenn die Trefferliste im Bild ist -- an hat-mbar
     gekoppelt waere der Filter davor ueber KEINEN Weg erreichbar.
     Flackern kann es nicht: der Umschalter steckt selbst in .finder-layout,
     also ist er nur sichtbar, wenn auch die untere Leiste steht. */
  body.mbar-an:not(.blatt-filter) .finder-toggle{display:none}
  /* Ohne die Leiste braucht die Ueberschrift etwas mehr Luft nach unten. */
  body.mbar-an:not(.blatt-filter) #tarife .sec-head{padding-bottom:12px}
}
@media(max-width:920px){
  /* "· sortiert nach Effektivpreis" brach in eine zweite Zeile um; das
     einzelne Wort stand dann direkt unter der klebenden Ueberschrift und
     sah aus, als waere die Ueberschrift abgeschnitten. Am Handy steht die
     Sortierung ohnehin in der Leiste unten ("Bester Effektivpreis"). */
  body.hat-mbar #resCount > span{display:none}
  /* Klare Kante, damit die Ueberschrift als Leiste lesbar ist und nicht mit
     dem verschmilzt, was darunter durchlaeuft. */
  #tarife .sec-head{border-bottom:1px solid var(--line)}
}
@media(max-width:920px){
  /* Unter einer klebenden Leiste sieht alles Runde angeschnitten aus, sobald
     es halb darunter steht -- erst die Filterleiste, dann die "Live-Daten"-
     Pille. Text und Tarifkarten laufen dagegen sauber durch. Die Pille sagt
     ohnehin dasselbe wie die Zeile "Stand 24.08.2026, 15:06 Uhr" direkt
     darunter, nur unschaerfer. */
  body.hat-mbar #liveBadge{display:none}
  body.hat-mbar #tarife .res-head{margin-bottom:2px}
}
@media(max-width:920px){
  /* Sticky schiebt ein Element nach UNTEN, solange seine natuerliche Position
     ueber der Klebemarke liegt -- und ueberdeckt dabei, was darunter steht.
     Gemessen: die Trefferzahl lag bei 82-105px genau hinter der Ueberschrift
     (70-112px). Mit 70px Innenabstand oben sitzt die Ueberschrift beim
     Ankommen schon genau auf ihrer Klebemarke, verschiebt sich also nie und
     ueberdeckt nichts. */
  .frei-zone > #tarife{padding-top:70px;scroll-margin-top:0}
}
@media(max-width:920px){
  /* Weicher Verlauf unter der Leiste: Inhalt, der darunter durchlaeuft,
     blendet aus, statt an einer harten Kante abgeschnitten zu wirken.
     Genau das hat Jan als "abgeschnitten" gesehen. */
  #tarife .sec-head{position:sticky;box-shadow:none;border-bottom:0}
  #tarife .sec-head::after{content:"";position:absolute;left:0;right:0;top:100%;
    height:16px;pointer-events:none;
    background:linear-gradient(var(--bg),rgba(244,247,252,0))}
}

/* =====================================================================
   DESKTOP-FEINSCHLIFF 24.08.2026
   1. Schritt 3 brach um: das Vodafone-Logo ist bei 22px Hoehe 112px breit,
      zusammen mit "20 GB 24M: 0,37 €/M" waren es mehr als die 315px
      Spaltenbreite. Logo kleiner und in der Breite gedeckelt, Zeile
      umbruchfest.
   2. Die Sprungkacheln waren flache Kaesten ohne Rangfolge. Jetzt klare
      Staffelung (Volumen - Preis - Einheit), fuehlbarer Rahmen und eine
      Reaktion beim Zeigen.
   ===================================================================== */
@media(min-width:921px){
  /* NICHT die ganze Zeile umbruchfest machen: bei einem laengeren Volumen
     ("Unlimited") liefe sie aus der 315px-Spalte heraus. Nur der Betrag
     bleibt zusammen, der Rest darf notfalls umbrechen. */
  .k-geld{font-size:14.5px}
  .k-geld b{white-space:nowrap}
  .k-geld .k-logo{height:18px;max-width:72px;object-fit:contain;margin:0 7px 0 0}

  .hero-deals{padding:6px 0 2px}
  .hd-box{background:#fff;border:1px solid #E7EDF6;border-radius:22px;
    padding:26px 26px 28px;box-shadow:0 18px 44px -34px rgba(11,27,51,.5)}
  .hd-vor{font-family:var(--mn);font-weight:800;font-size:17px;letter-spacing:0;
    text-transform:none;color:var(--ink);margin-bottom:22px}
  .hd-row{gap:16px}
  .hd-b{display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:20px 14px 21px;border-radius:18px;background:#FBFCFE;
    border:1.5px solid #E4EDF6;box-shadow:none;text-decoration:none;
    transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)}
  .hd-b:hover{transform:translateY(-3px);border-color:#BFE0CC;
    box-shadow:0 16px 32px -20px rgba(31,138,56,.45)}
  .hd-b b{font-family:var(--mn);font-weight:800;font-size:21px;color:var(--ink);line-height:1.1}
  .hd-b span{display:flex;align-items:baseline;gap:6px;margin-top:8px;
    font-size:14px;color:var(--muted);font-weight:600}
  .hd-b span em{font-family:var(--mn);font-weight:800;font-size:31px;
    font-style:normal;color:var(--primary);line-height:1}
  .hd-b i{font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
    color:var(--soft);margin-top:5px}
  /* Der guenstigste der Reihe darf sich abheben -- er traegt schon eine
     eigene Klasse, wenn der Preis negativ ist. */
  .hd-minus{background:#F4FBF6;border-color:#BFE0CC}
  .hd-minus span em{color:var(--primaryd)}
}
@media(min-width:921px){
  /* Die gestrichelte Verbindung war 44px lang und sass in der 32px-Luecke
     zwischen den Textspalten -- zwischen den Kreisen liegen aber 271px
     freier Raum. Als durchgehende Linie liest man den Weg, vorher waren es
     Stummel. */
  .k-stat:not(:last-child)::after{width:190px;right:-95px;top:37px}
}

/* =====================================================================
   FLAMMEN AN BESONDERS STARKEN ANGEBOTEN
   Schwelle 88 % unter dem Grundpreis -- an echten Daten gewaehlt: von 12
   sichtbaren Zeilen trafen es 3. Bei 85 % waeren es 5 gewesen, dann sagt
   das Zeichen nichts mehr.
   ===================================================================== */
/* Flammen gibt es in der Liste nicht mehr -- dort steht die Frosch-Bewertung.
   Auf der Tarifseite bleiben sie am Effektivpreis. */

/* =====================================================================
   LISTENKARTE AM DESKTOP AUFRAEUMEN
   Die linke Spalte ist 884px breit, der Inhalt stand darin untereinander
   und mittig -- dadurch lag der halbe Kasten leer. Partner, Rechnung und
   Vergleichen stehen jetzt nebeneinander links.
   ===================================================================== */
@media(min-width:921px){
  .deal-row .dr-foot{flex-direction:row;align-items:center;justify-content:flex-start;
    flex-wrap:wrap;gap:10px 22px}
  .deal-row .dr-partners{gap:18px}
  .deal-row .dr-calc{margin:0}
  .deal-row .dr-cmpbtn{margin:0}
  .deal-row .dr-tw img{height:22px;max-width:150px}
  .deal-row .dr-specs{gap:0 12px;margin-top:2px}
}

/* =====================================================================
   FROSCH-BEWERTUNG
   Ersetzt die Flammen. Ein Feuer behauptet nur "gut" -- die Froesche sagen
   WAS gut ist: wie viel vom Preisvorteil gesichert ist und wie wenig man
   vorstrecken muss. Keine Nutzerbewertungen, eine eigene Rechnung aus den
   Angebotsdaten; die Kriterien stehen unten bei den Angaben.
   ===================================================================== */
.frosch-bw{display:flex;align-items:center;gap:3px;margin-top:9px;flex-wrap:wrap}
.frosch-bw i{width:17px;height:17px;flex:0 0 auto;
  background:url(assets/frosch/frosch-96.png) center/contain no-repeat}
.frosch-bw i.aus{opacity:.2;filter:grayscale(1)}
.frosch-bw b{margin-left:7px;font-size:12.5px;font-weight:700;color:var(--primaryd);
  letter-spacing:.01em}
@media(max-width:920px){
  .frosch-bw{justify-content:center;margin-top:10px}
  .frosch-bw i{width:16px;height:16px}
  .frosch-bw b{font-size:12px;margin-left:6px}
}

/* Netzlogo im Filter-Chip -- das Netz erkennt man am Logo schneller als am Wort. */
/* display:inline-block, weil eine globale img{display:block}-Regel das Logo
   sonst aus der Chip-Zeile wirft. Kein loading="lazy": die Bilder stecken im
   zugeklappten Filter und wurden dadurch gar nicht erst geladen. */
.chip-logo{display:inline-block;height:15px;width:auto;max-width:54px;
  object-fit:contain;vertical-align:-3px;margin-right:6px}
.chip.on .chip-logo{filter:none}
@media(max-width:920px){ .chip-logo{height:14px;max-width:48px;margin-right:5px} }

/* =====================================================================
   FROSCH-BEWERTUNG als Notenplakette (0–10)
   Farbstufen nach Jans Vorgabe: <4 rot, 4–5 orange, 5–6,5 gelb,
   6,5–8 hellgruen, 8–9 dunkelgruen, 9–10 dunkelblau.
   Alle Fuellfarben tragen weisse Schrift mit mindestens 4,5:1 Kontrast --
   deshalb ist "gelb" ein dunkles Gold und kein Signalgelb.
   ===================================================================== */
.fnote{display:inline-flex;align-items:center;gap:8px;vertical-align:-3px}
.fnote > b{flex:0 0 auto;min-width:38px;padding:5px 7px;border-radius:7px;
  font-family:var(--mn);font-weight:800;font-size:16px;line-height:1.1;
  color:#fff;text-align:center;letter-spacing:-.01em}
.fnote > span{display:flex;flex-direction:column;line-height:1.15;
  font-family:var(--mn);font-weight:800;font-size:13.5px;color:var(--ink)}
.fnote > span i{font-style:normal;font-weight:600;font-size:11px;color:var(--soft);
  letter-spacing:.01em}
.fn-rot > b{background:#C0392B}
.fn-orange > b{background:#D9741A}
.fn-gelb > b{background:#B98900}
.fn-hellgruen > b{background:#4E9C2E}
.fn-dunkelgruen > b{background:#1F8A38}
.fn-dunkelblau > b{background:#1B3F8B}

/* =====================================================================
   LISTENKARTE AM DESKTOP SCHMALER
   Die linke Spalte ist 884px breit, stapelte aber alles untereinander:
   Abzeichen, Logo, Name, Note, Tarifwelt -- fuenf Zeilen bei viel freiem
   Platz daneben. Als umbrechende Zeile passt das in zwei, und es passen
   deutlich mehr Tarife auf den Bildschirm.
   ===================================================================== */
@media(min-width:921px){
  .deal-row{padding:14px 16px}
  /* flex-direction MUSS mit: die Basisregel setzt column, sonst zentriert
     align-items nur die gestapelten Zeilen statt sie nebeneinander zu legen. */
  .deal-row .dr-brand{display:flex;flex-direction:row;flex-wrap:wrap;
    align-items:center;justify-content:flex-start;gap:7px 14px}
  .deal-row .dr-brand > *{margin:0}
  .deal-row .dr-logo img{height:22px}
  .deal-row .dr-name{font-size:17px}
  .deal-row .dr-tw img{height:19px;max-width:120px}
  .deal-row .fnote{margin-left:2px}
  .deal-row .fnote > b{min-width:34px;padding:4px 6px;font-size:15px}
  .deal-row .fnote > span{font-size:12.5px}
  .deal-row .fnote > span i{font-size:10.5px}
  .deal-row .dr-specs{margin-top:6px}
  .deal-row .dr-foot{padding-top:10px;margin-top:6px;gap:8px 18px}
}
@media(min-width:921px){
  /* Letzter Schritt: Eckdaten und Fusszeile nebeneinander statt untereinander.
     Gemessen war die Karte 207px hoch -- links nur 26+21+48px Inhalt, rechts
     113px Kaufspalte, dazwischen Leerraum. Jetzt bestimmt die Kaufspalte die
     Hoehe und nichts steht mehr ungenutzt. */
  .deal-row{grid-template-columns:auto minmax(0,1fr) 212px}
  .deal-row > .dr-brand{grid-column:1 / 3;grid-row:1}
  .deal-row > .dr-specs{grid-column:1;grid-row:2;align-self:center}
  .deal-row > .dr-foot{grid-column:2;grid-row:2;align-self:center;
    border-top:0;margin-top:0;padding-top:0;justify-content:flex-end}
  .deal-row > .dr-buy{grid-column:3;grid-row:1 / span 2}
  .deal-row .dr-more{min-height:42px}
}
@media(max-width:920px){
  /* Die Karte ist am Handy mittig gesetzt -- die Plakette muss mit. */
  .deal-row .fnote{justify-content:center;margin:3px 0 1px}
  .deal-row .fnote > b{min-width:42px;font-size:17px;padding:6px 8px}
}

/* =====================================================================
   LISTENKARTE AM DESKTOP: Aufbau wie im Vergleichsportal
   Links die Identitaet (Netz-Logo + Tarifname), in der Mitte die Eckdaten
   als leichte Kacheln plus die Note, rechts Preis und Knopf. Darunter eine
   schmale Zeile mit Partnern, Rechnung und Vergleichen.
   Vorher lag alles in einer langen Zeile nebeneinander -- lesbar, aber ohne
   Ordnung: man wusste nicht, wo man hinschauen soll.
   ===================================================================== */
@media(min-width:921px){
  .deal-row{grid-template-columns:minmax(190px,1fr) auto auto 210px;
    gap:10px 18px;align-items:center}
  .deal-row > .dr-brand{grid-column:1;grid-row:1 / span 2;align-self:center;
    flex-direction:column;align-items:flex-start;gap:5px}
  .deal-row > .dr-specs{grid-column:2;grid-row:1;align-self:center;
    flex-wrap:nowrap;gap:8px}
  .deal-row > .fnote{grid-column:3;grid-row:1;align-self:center}
  .deal-row > .dr-buy{grid-column:4;grid-row:1 / span 2;align-self:center}
  .deal-row > .dr-foot{grid-column:2 / 4;grid-row:2;align-self:center;
    border-top:1px solid #EEF2F7;margin:0;padding-top:10px;
    justify-content:flex-start;gap:8px 16px}

  /* Eckdaten als Kacheln: Wert gross, Bezeichnung klein darunter. */
  .deal-row .dr-seg{flex-direction:column;align-items:center;gap:1px;
    background:#F5F7FB;border:1px solid #EAEFF6;border-radius:11px;
    padding:8px 14px;min-width:92px}
  .deal-row .dr-seg::after{display:none}
  .deal-row .dr-seg b{font-family:var(--mn);font-weight:800;font-size:15px;color:var(--ink)}
  .deal-row .dr-seg span{display:block;font-size:10.5px;font-weight:600;
    letter-spacing:.02em;color:var(--soft)}

  .deal-row .dr-brand .dr-logo img{height:24px}
  .deal-row .dr-name{font-size:18px}
}

/* Notenplakette: Wort in Schwarz, Zusatz ruhiger -- vorher war beides grau. */
.fnote > span{color:#0B1B33;font-size:14px}
.fnote > span i{color:#5A6B82;font-weight:600}
@media(min-width:921px){
  /* Spalte 1 war 367px breit und schob die Kacheln nach rechts. */
  .deal-row{grid-template-columns:minmax(180px,250px) auto auto 210px}

  /* Die Rechnung war in der Liste ausgeblendet ("steht ja auf der
     Detailseite"). Jan will sie hier haben -- als schmaler Aufklapper wie
     im Vergleichsportal, nicht als gruener Knopf. */
  .deal-row .dr-calc{display:block;width:auto;max-width:none}
  .deal-row .dr-calc-btn{background:none;border:0;padding:0;gap:6px;
    justify-content:flex-start;font-size:12.5px;font-weight:700;color:var(--primary)}
  .deal-row .dr-calc-btn:hover{background:none;text-decoration:underline}
  .deal-row .dr-calc-btn > i:first-child{display:none}
  .deal-row .dr-calc-btn .dr-caret{font-size:13px}
  .deal-row .dr-calc-body{margin-top:10px;padding:12px 14px;font-size:13px}
}
@media(min-width:921px){
  /* Die Fusszeile hatte nur die mittleren Spalten (478px) -- "Vergleichen"
     brach dadurch in eine eigene Zeile. Ueber die volle Breite passt alles. */
  .deal-row > .dr-brand{grid-row:1}
  .deal-row > .dr-foot{grid-column:1 / 4;grid-row:2}
}

/* =====================================================================
   LISTENKARTE AM HANDY: Preis neben den Namen statt darunter
   Gemessen: 382-408px pro Karte, also 2 Tarife pro Bildschirm. Der
   Preisblock allein war 126px -- „statt"-Zeile, Preis, Einheit, i-Punkt und
   Knopf untereinander. Bei Check24 steht der Preis oben rechts neben dem
   Namen, dadurch passen dort 2,4 Karten hin.
   display:contents loest den Preisblock auf, damit seine Teile einzeln im
   Raster platziert werden koennen.
   ===================================================================== */
@media(max-width:920px){
  .deal-row{display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:7px 12px;align-items:start;text-align:left}
  .deal-row > .dr-brand{grid-column:1;grid-row:1 / span 2;align-items:flex-start}
  .deal-row > .dr-buy{display:contents}
  .deal-row .dr-anchor{grid-column:2;grid-row:1;text-align:right;justify-self:end}
  .deal-row .dr-price{grid-column:2;grid-row:2;align-items:flex-end;justify-self:end;
    text-align:right}
  .deal-row .dr-more{grid-column:1 / -1;grid-row:6;width:100%}
  .deal-row > .fnote{grid-column:1 / -1;grid-row:3;justify-content:flex-start}
  .deal-row > .dr-specs{grid-column:1 / -1;grid-row:4}
  .deal-row > .dr-foot{grid-column:1 / -1;grid-row:5;justify-content:flex-start;
    align-items:center;border-top:0;padding-top:2px;margin-top:0}
  /* Der i-Punkt wiederholt nur, was unten bei den Angaben steht. */
  .deal-row .dr-info{display:none}
  .deal-row .dr-tags{justify-content:flex-start}
}
@media(max-width:920px){
  /* Der schwebende Frosch sass rechts oben -- genau dort steht jetzt der
     Grundpreis. Er wandert nach links, wo neben dem "Frosch-Tipp"-Abzeichen
     Platz ist; auf Karten ohne Abzeichen stoert er dort nichts. */
  /* Ganz weg am Handy: rechts oben steht der Preis, links oben das
     "Frosch-Tipp"-Abzeichen -- das sagt dasselbe und kollidiert nicht.
     Am Desktop bleibt der schwebende Frosch. */
  .deal-row.best::after{display:none}
  /* Partner in EINE Zeile: zwei Zeilen kosteten 36px je Karte. */
  .deal-row .dr-partners{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
  .deal-row .dr-partner{display:inline-flex;align-items:center;gap:6px}
  .deal-row .dr-plabel{font-size:10.5px;color:var(--soft)}
  .deal-row .dr-pbadge{font-size:12px;padding:4px 9px}
}
@media(max-width:920px){
  /* Partner muessen in eine Zeile passen: 335px Innenbreite, zwei Abzeichen
     plus Beschriftungen. Kleiner setzen statt umbrechen lassen. */
  .deal-row .dr-partners{gap:5px 10px;justify-content:flex-start}
  .deal-row .dr-pbadge{font-size:11.5px;padding:4px 8px;gap:5px}
  .deal-row .dr-pbadge i{font-size:13px}
  .deal-row .dr-plabel{font-size:10px}
}
@media(max-width:920px){
  /* "statt X € Grundpreis" oben rechts raus (Jan): dort steht jetzt der
     Preis, die Zeile darueber drueckte ihn in die Ecke. Der Bezug bleibt
     auf der Tarifseite und in der Rechnung. */
  /* Zahlpreis bleibt auch mobil sichtbar (PAngV; Rechts-Audit 26.08.2026) --
     vorher war der Effektivpreis am Handy die einzige Preisangabe.
     WICHTIG: eigene volle Zeile. Die Platzierung aus der Regel weiter oben
     (Spalte 2, ~92 px) liess den 250 px breiten Anker unter die Chips
     laufen -- auf 48 % der Zeilen war der Grundpreis verdeckt. */
  .deal-row .dr-anchor{grid-column:1 / -1;grid-row:auto;justify-self:stretch;
    display:flex;justify-content:flex-start;flex-wrap:wrap;font-size:11.5px;color:#7A899E;gap:7px}
  .deal-row > .dr-brand{min-width:0}
  .deal-row .dr-name{overflow-wrap:anywhere}
  .deal-row .dr-price{grid-row:1 / span 2;align-self:center}
}

/* =====================================================================
   RUHE REIN — Desktop und Tablet (ab 600px)
   Gemessen auf der Startseite: 19 Gruentoene, 18 Schattenvarianten,
   19 Eckradien, 34 Schriftgroessen. Genau das laesst eine Seite wie
   automatisch zusammengesetzt aussehen -- jedes Element bringt eigene
   Werte mit, statt sich an ein System zu halten.
   Vergleichsportale machen das Gegenteil: EINE Akzentfarbe, sonst
   Graustufen; Haarlinien statt weicher Schatten; zwei, drei Radien.
   ===================================================================== */
@media(min-width:600px){
  /* --- 1. Schatten raus, Haarlinien rein --------------------------------
     Grosse weiche Schatten sind der staerkste "Vorlagen"-Hinweis. Eine
     1px-Kante trennt genauso, wirkt aber gebaut statt gerendert. */
  .deal-row,.hd-box,.hd-b,.k-stat,.dr-seg,.partner .ptile,.st1-netze img,
  .st-netze a,.rechtl,.deal-facts{box-shadow:none}
  .deal-row{border:1px solid #E4E9F0}
  .deal-row.best{border-color:#BCD9C4;box-shadow:none}
  .hd-box{border:1px solid #E4E9F0}
  .hd-b{border:1px solid #E4E9F0;background:#fff}
  .hd-b:hover{box-shadow:none;border-color:var(--primary);transform:none;background:#F7FBF8}

  /* --- 2. Radien auf drei Werte ---------------------------------------- */
  .deal-row,.hd-box,.k-stat,.finder-box,.rechtl{border-radius:14px}
  .hd-b,.dr-seg,.deal-facts,.dr-calc-body,.finder-toggle{border-radius:10px}
  .chip,.dr-pbadge,.dr-badge,.badge-live{border-radius:999px}

  /* --- 3. Mikro-Schriftgroessen zusammenfassen -------------------------- */
  .dr-seg span,.hd-b i,.fnote > span i,.dr-plabel{font-size:11.5px}
  .dr-price span,.dr-anchor{font-size:12.5px}
}
@media(min-width:600px){
  /* --- 4. Farbige Leucht-Schatten unter Knoepfen ------------------------
     rgba(31,138,56,.8) 0 14px 28px -12px ist ein gruener Schein unter dem
     Knopf. Nichts an einer echten Oberflaeche leuchtet farbig -- das ist
     der staerkste "Vorlagen"-Hinweis. Ein knapper neutraler Schatten
     genuegt, um den Knopf als Knopf zu lesen. */
  .dr-more,.btn.cta1,.cb-cta,.st-alle,.hr-cta{
    box-shadow:0 1px 2px rgba(11,27,51,.10),0 2px 6px rgba(11,27,51,.06)}
  .dr-more:hover,.btn.cta1:hover,.cb-cta:hover{
    box-shadow:0 2px 4px rgba(11,27,51,.12),0 6px 14px rgba(11,27,51,.10)}
  .chip.on{box-shadow:none}
  .finder-toggle{box-shadow:none}
  /* Abschnittskante statt 34px-Rundung mit Schlagschatten. */
  .best-sec{border-radius:0;box-shadow:none;border-top:1px solid var(--line)}
  /* Radien angleichen. */
  .dr-more{border-radius:10px}
  .dr-seg{border-radius:10px}
}
/* --- 5. Hero beruhigen (alle Geraete) ---------------------------------
   Ein 120-Grad-Verlauf ueber drei Gruentoene plus Punktraster ist die
   Kombination, die man aus Baukasten-Vorlagen kennt. Vergleichsportale
   nehmen eine flaeche Markenfarbe. Hier ein kaum sichtbarer senkrechter
   Verlauf und ein deutlich zurueckgenommenes Raster -- bewusst auch am
   Handy, sonst haetten die Geraete zwei verschiedene Hintergruende. */
.hero-band{background:linear-gradient(180deg,#1E8737 0%,#23913D 100%)}
.hero-band::before{background-image:radial-gradient(rgba(255,255,255,.075) 1px,transparent 1.5px);
  background-size:26px 26px}

@media(min-width:600px){

  /* --- 6. Verschachtelte Kaesten aufloesen -------------------------------
     Weisser Kasten auf grauem Band auf weisser Seite -- drei Ebenen fuer
     eine Kachelreihe. Das Band wird weiss, der Kasten verliert Rahmen und
     Grund, nur die Kacheln bleiben als Objekte stehen. */
  .sprung{background:#fff;border-top:1px solid var(--line);padding:34px 0 40px}
  .sprung .hd-box{background:none;border:0;box-shadow:none;padding:0;max-width:1060px}
  .sprung .hd-b{background:#FBFCFE}
  /* Gleicher Rhythmus wie der Abschnitt darueber. */
  .st2{padding-top:44px;padding-bottom:44px;border-top:1px solid var(--line)}
}
@media(min-width:600px){
  /* --- 7. Untergrenze fuer Schriftgroessen ------------------------------
     Gemessen lief Text bis auf 9,5px herunter -- 36 Elemente unter 12px.
     Das ist auf einem Bildschirm in Armlaenge nicht mehr komfortabel
     lesbar und traegt zum unruhigen Eindruck bei: viele Stufen, keine
     Ordnung. Alles Kleine sitzt jetzt auf 12px. */
  .dr-seg span,.hd-b i,.fnote > span i,.dr-plabel,.dr-badge,.dr-trend,
  .deal-facts .k,.cr-sub,.dr-partners,.dr-partner,.dr-price span,
  .sb-info,.data-stand,.badge-live,.hd-vor{font-size:12px}
  .dr-pbadge{font-size:12.5px}

}
@media(min-width:600px){
  /* Diese drei setzen weiter oben eigene, kleinere Werte mit hoeherer
     Staerke (.deal-row davor) -- deshalb hier ebenfalls mit .deal-row. */
  .deal-row .dr-seg span{font-size:12px}
  .deal-row .fnote > span i{font-size:12px}
  .deal-row .dr-plabel{font-size:12px}
}
@media(min-width:600px){
  /* Der i-Punkt am Preis war grau auf grau; durch die Farbvereinheitlichung
     ist sein Grund gruen geworden und das graue Zeichen darauf verschwindet
     -- es blieb ein bunter Punkt ohne Bedeutung. Am Handy ist er laengst
     weg, hier auch: In derselben Karte steht "Effektivpreis-Berechnung",
     und unten stehen die Angaben. */
  .deal-row .dr-info{display:none}
}

/* =====================================================================
   LESBARKEIT AM HANDY: Untergrenze 11,5px
   Gemessen 46 Textstellen unter 11px, einzelne bei 8,5px. Am Handy sitzt
   der Text naeher am Auge als am Schreibtisch, aber der Bildschirm ist
   auch kleiner -- unter rund 11px wird Fliesstext muehsam. Die
   Geraete-Illustrationen (mm-*, dbt-*) bleiben aussen vor, das sind
   Abbildungen von Bildschirminhalten, kein Lesetext.
   ===================================================================== */
@media(max-width:599px){
  .deal-row .dr-seg span,.deal-row .fnote > span i,.deal-row .dr-plabel,
  .dr-trend,.dr-badge,.hd-b i,.cr-sub,.dr-partners,.dr-partner,
  .sb-info,.data-stand,.badge-live,.hd-vor,.wk-plabel{font-size:11.5px}
}

/* =====================================================================
   KONTRAST — gemessen, nicht geschaetzt
   27 Textstellen lagen unter dem Mindestkontrast (4,5 : 1 fuer Fliesstext).
   Die groesste Gruppe war das Kleintext-Grau #7A899E auf Weiss: 3,56 : 1.
   Es steht jetzt auf #5C6B80 = 5,43 : 1 (Variable --soft, wirkt ueberall).

   Die Notenplakette: Rot und Dunkelblau waren in Ordnung, Orange (3,25),
   Gelb (3,16) und Hellgruen (3,43) nicht -- weisse Schrift auf hellen
   Farben geht nicht auf. Statt die Farben abzudunkeln (dann waeren Gelb und
   Orange kaum noch zu unterscheiden) wechselt in der Mitte der Leiter die
   SCHRIFTFARBE auf Dunkel. Damit bleiben die Farben so kraeftig wie
   gedacht und alle sechs Stufen sind lesbar:
     rot #C0392B weiss 5,44 · orange #F0913A dunkel 7,23
     gelb #F2C230 dunkel 10,28 · hellgruen #8CC63F dunkel 8,42
     dunkelgruen #1B7B32 weiss 5,35 · dunkelblau #1B3F8B weiss 9,86
   ===================================================================== */
.fn-rot > b{background:#C0392B;color:#fff}
.fn-orange > b{background:#F0913A;color:#0B1B33}
.fn-gelb > b{background:#F2C230;color:#0B1B33}
.fn-hellgruen > b{background:#8CC63F;color:#0B1B33}
.fn-dunkelgruen > b{background:#1B7B32;color:#fff}
.fn-dunkelblau > b{background:#1B3F8B;color:#fff}
/* Der Zusatz unter den Rechnungszeilen stand auf 3,0 : 1. */
.cr-sub{color:#5C6B80}

/* Gruener TEXT auf Weiss kam auf 4,42 : 1 -- 0,08 unter dem Mindestwert.
   Fuer Flaechen bleibt #1F8A38 (weisse Schrift darauf: 4,42 reicht dort,
   weil die Schrift gross und fett ist), fuer kleinen gruenen Text gibt es
   jetzt einen eigenen, etwas tieferen Ton mit 5,35 : 1. */
.eyebrow,.kb-h,.sb-info,.dr-calc-btn,.cr-plus,.cr-minus,.deal-row .dr-calc-btn,
.dr-trend,.mg-h,.fnote > span i{color:#1B7B32}
.dr-plabel,.wk-plabel,.cr-sub,.data-stand,.copy{color:#5C6B80}
/* Fusszeile: die Copyright-Zeile stand mit 3,82 : 1 auf dem dunklen Grund. */
.ft .copy{color:rgba(255,255,255,.82)}
/* Betraege in der aufklappbaren Rechnung: gruen auf hellgrauer Zeile 4,19. */
.dr-calc-body span,.calc-list span,.cr-row span{color:#1B7B32}
.dr-calc-body > div > span:first-child,.cr-row > span:first-child{color:var(--ink)}
/* Die letzten drei: --soft-text (#64748B) lag auf dem hellgrauen Band bei
   4,43, und die Betraege in der aufklappbaren Rechnung stehen in .dr-cr. */
#resCount > span,.foot-note,.foot-note a{color:#4B5C74}
.dr-calc-body .dr-cr span{color:#1B7B32}
.dr-calc-body .dr-cr > span:first-child{color:var(--ink)}

/* =====================================================================
   TRENNUNG UEBER FLAECHEN STATT KAESTCHEN (Jan, 24.08.2026)
   Live gemessen: 198 Elemente trugen einen Rahmen oder Schatten, waehrend
   die Abschnitte selbst kaum eine eigene Flaeche hatten -- .finder, .seo,
   .hub und .cta-band waren durchsichtig. Die Gliederung lief also komplett
   ueber Umrandungen, verschachtelt bis zu drei Ebenen tief (Karte > Chip >
   Rechenblock). Genau das erzeugt den Baukasten-Eindruck.
   Die grossen Portale machen es umgekehrt: durchgehende Farbbaender ueber
   die volle Breite, und INNERHALB eines Bandes moeglichst keine Rahmen.
   Rhythmus ab hier: gruen - weiss - grau - weiss - grau - weiss - grau.
   ===================================================================== */

/* --- 1. Abschnitte bekommen eine eigene Flaeche ---------------------- */
.finder{background:var(--bg)}
.faq{background:#fff}
.seo{background:var(--bg)}
.hub,.cta-band{background:#fff}
.partner-top{background:#fff}
.rechtl{background:var(--bg)}

/* Der Finder war ein riesiges abgerundetes Kaestchen mit 60px-Schatten --
   die Geste, die eine ganze Seitenhaelfte wie eine Karte aussehen liess. */
.finder,.partner-top + .finder,.frei-zone > .finder{border-radius:0;box-shadow:none}

/* --- 2. Kaesten innerhalb der Baender abbauen ------------------------ */
@media(min-width:921px){
  /* Die Tarifkarte bleibt weiss -- auf dem grauen Band trennt sie sich von
     selbst. Rahmen und Schatten sind dafuer nicht noetig. */
  .deal-row{border-color:transparent;box-shadow:none}
  .deal-row:hover{border-color:#DCE6F2;box-shadow:0 2px 10px -4px rgba(16,32,60,.18)}

  /* Die drei Eckdaten standen als Kaestchen IN der Karte -- Kasten im
     Kasten. Jetzt Spalten mit einer Haarlinie dazwischen. */
  .deal-row .dr-seg{background:none;border:0;border-radius:0;padding:10px 14px}
  .deal-row .dr-seg + .dr-seg{border-left:1px solid #EDF1F7}

  /* Die aufklappbare Rechnung ebenso: sie liegt bereits in der Karte. */
  .deal-row .dr-calc-body{background:none;border:0;border-radius:0;
    border-top:1px solid #EDF1F7;padding:12px 2px 2px}
}

/* --- 3. FAQ und Partner: Zeilen statt Kacheln ------------------------ */
.faq .qa{background:none;border:0;border-radius:0;border-bottom:1px solid #E7EDF6;box-shadow:none}
.partner .ptile{background:none;border:0;box-shadow:none}

/* Nachschaerfung: .wieso und .sprung waren beide weiss und wurden nur durch
   eine 1px-Linie getrennt -- also wieder eine Umrandung statt einer Flaeche.
   Jetzt echter Wechsel grau/weiss, Linien raus. Die Volumen-Kacheln
   verlieren ihren Rahmen und tragen nur noch eine Fuellung. */
/* Nur am Desktop: am Handy ist Buehne 2 weiss -- so von Jan freigegeben,
   und dort trennen ohnehin die Vollbild-Buehnen, nicht die Flaechen. */
@media(min-width:921px){ .wieso{background:var(--bg)} }
/* NUR DESKTOP -- und zwar zwingend: Buehne 3 ist am Handy gruen (Jan,
   24.08.2026, Block weiter oben in @media(max-width:920px)), samt weisser
   Schrift fuer Ueberschrift, Vorzeile und Pfeile. Ohne diese Media-Query
   gewann die Weiss-Regel hier unten bei gleicher Spezifitaet ueber
   .st3{background:linear-gradient(...)} -- der gruene Grund verschwand, die
   weisse Schrift blieb. Ergebnis war weiss auf weiss: "Jetzt alle Tarife
   entdecken" stand mit Kontrast 1.00 da, unsichtbar aber platzraubend.
   Dasselbe galt fuer die Kachelfarbe. */
@media(min-width:921px){
  .sprung{background:#fff}
  .wieso,.sprung{border-top:0;border-bottom:0}
  .sprung .hd-b{background:#F1F5FA;border:0;box-shadow:none}
  .sprung .hd-b:hover{background:#E9F2EC}
  .sprung .hd-minus{background:#EAF4EE}
}

/* =====================================================================
   HAENDLER-LOGOS IM TARIF-CHIP (Jan, 24.08.2026)
   Gezaehlt ueber 32.702 Angebote: Bestellt wird zu 32 % bei Sparhandy,
   32 % bei DEINHANDY, 12 % o2, 9 % MediaMarkt, 9 % Samsung; verkauft wird
   zu 79 % an wirkaufens. Genau diese Namen beantworten die Vertrauensfrage
   des Besuchers ("bei wem bestelle ich, wer zahlt mir das Geld?") -- und
   die steht am konkreten Angebot, nicht in einem Logostreifen am Seitenende.
   Passend zur Flaechen-statt-Kaestchen-Regel steht das Logo frei, ohne
   Rahmen und ohne Fuellung; die farbige Textmarke bleibt der Rueckfall.
   ===================================================================== */
.dr-pbadge.dr-plogo{background:none;border:0;padding:0;border-radius:0}
.dr-plogo img{height:18px;width:auto;display:inline-block;vertical-align:middle}
/* Platzhalter (noch kein echtes Logo geliefert) etwas zuruecknehmen, damit
   klar ist, dass hier noch etwas fehlt. */
.dr-plogo-ph img{opacity:.72}
@media(max-width:920px){ .dr-plogo img{height:15px} }

/* Groesse ueber eine feste BOX, nicht ueber die Hoehe allein: die Logos haben
   sehr verschiedene Seitenverhaeltnisse (MediaMarkt 2:1, Wortmarken bis 4:1).
   Mit height:18px kam MediaMarkt bei 36x18px heraus -- unlesbar, waehrend in
   derselben Zeile 396px frei standen. object-fit:contain haelt jedes kuenftige
   Logo in denselben Grenzen, egal welches Format Jan liefert. */
.dr-plogo img{height:24px;width:auto;max-width:132px;object-fit:contain}
@media(max-width:920px){ .dr-plogo img{height:20px;max-width:104px} }

/* =====================================================================
   KAESTEN STATT RANDLOSER BAENDER (Jan, 24.08.2026)
   Korrektur des Flaechen-Umbaus von heute Nachmittag. Zwei Befunde:
   1. body traegt bereits var(--bg) = #F4F7FC. Meine grauen "Baender" waren
      damit unsichtbar -- die Trennung kam allein von den weissen
      Abschnitten. Das Ergebnis wirkte wie durchlaufende Farbflaechen.
   2. Jan will die Farbe nicht ueber die volle Breite, sondern in Kaesten.
   Also: grauer Seitengrund bleibt, die Abschnitte werden weisse Kaesten mit
   Hoechstbreite und runden Ecken. Ausnahme ist die Tarifliste -- ein weisser
   Kasten voller weisser Karten waere flach. Dort bleibt der graue Grund
   sichtbar und die KARTEN sind die Kaesten; sie bekommen ihre feine Kante
   zurueck, die ich im Baender-Umbau entfernt hatte.
   Der gruene Hero bleibt randlos: er ist der Markenkopf, kein Inhaltsblock.
   ===================================================================== */
@media(min-width:921px){
  /* Das Sprungband am PC raus (Jan): dieselben Volumen stehen als Filter
     direkt ueber der Liste, das Band war die zweite Auswahl fuer dieselbe
     Sache. Am Handy bleibt es Buehne 3. */
  .sprung{display:none}

  .wieso,.faq,.seo,.hub,.cta-band,.partner-top{
    max-width:1320px;margin-left:auto;margin-right:auto;
    background:#fff;border-radius:22px}
  .wieso{margin-top:22px}
  .faq,.seo,.hub,.cta-band,.partner-top{margin-top:18px}
  /* Aneinandergrenzende Kaesten sollen nicht wie einer wirken. */
  .hub + .cta-band{margin-top:10px}

  /* Tarifliste: kein Kasten, damit die weissen Karten die Kaesten sind. */
  .finder,.partner-top + .finder,.frei-zone > .finder{
    background:transparent;max-width:none;border-radius:0;box-shadow:none}
  .deal-row{border-color:#E4EAF2}
  .deal-row:hover{border-color:#C9DCEA;box-shadow:0 2px 12px -5px rgba(16,32,60,.22)}
}

/* =====================================================================
   TOP-ANGEBOT: LOGOS UND ZAHLEN AUF DER SPALTENMITTE (Jan, 24.08.2026)
   Gemessen: Jede Spalte ist 347px breit, Mitte also 173. Kreis, Titel und
   die Zahlen-ZEILE sassen exakt auf 173 -- der BETRAG aber auf 239, 205
   und 250, weil die Beschriftung ("Gesamtkosten 24M:", "Festpreis:") ihn
   nach rechts schob, in jeder Spalte unterschiedlich weit. Deshalb steht
   die Beschriftung jetzt darueber statt davor: der Betrag landet in allen
   drei Spalten auf 173 und die drei Zahlen fluchten miteinander.
   Dazwischen die Logos der beteiligten Haendler.
   ===================================================================== */
.k-marke{display:flex;align-items:center;justify-content:center;
  margin:9px 0 3px;min-height:26px}
.k-marke img{height:26px;width:auto;max-width:150px;object-fit:contain}
.karte .k-geld{display:flex;flex-direction:column;align-items:center;gap:1px}
.k-lbl{font-style:normal;display:block;font-weight:600;letter-spacing:.01em;
  color:var(--soft-text);line-height:1.25}
.k-wert{display:inline-flex;align-items:flex-start;justify-content:center}
@media(min-width:921px){
  .k-lbl{font-size:13px}
  .k-marke{margin:11px 0 4px;min-height:28px}
  .k-marke img{height:28px}
}
@media(max-width:920px){
  /* Buehne 2 ist eine Vollbild-Seite -- die zusaetzliche Zeile und die
     Logoreihe muessen aus dem vorhandenen Platz kommen, nicht dazu. */
  .k-lbl{font-size:clamp(10.5px,1.5svh,12.5px)}
  .k-marke{margin:clamp(4px,.8svh,8px) 0 clamp(1px,.3svh,3px);
    min-height:clamp(16px,2.6svh,24px)}
  .k-marke img{height:clamp(16px,2.6svh,24px);max-width:96px}
}

/* Der Betrag stand 3px links der Mitte: das Sternchen zaehlt zur Breite von
   .k-wert, also verschiebt es den <b> beim Zentrieren. Aus dem Fluss nehmen. */
/* Das Sternchen bleibt im Textfluss NEBEN der Zahl -- absolut positioniert
   sass es an der Oberkante des Zahlenkastens und damit optisch neben der
   Beschriftung darueber. Stattdessen spiegelt ein unsichtbares Gegenstueck
   links seine Breite: der Betrag steht dadurch exakt mittig, ohne dass das
   Sternchen seine Zeile verlaesst. */
.k-wert{position:static}
/* vertical-align:super aus .stern greift hier nicht: als Flex-Element
   richtet sich das Sternchen nach align-items, sass also an der Oberkante
   des Zahlenkastens und schwebte optisch neben der Beschriftung darueber.
   align-self haengt es an die Zahl, zu der es gehoert. */
.k-wert{align-items:center}
.k-wert::before{content:"*";visibility:hidden;font-weight:800;
  font-size:.62em;align-self:center;padding-right:1px}
.k-wert .stern{position:static;align-self:center;padding-left:1px;
  vertical-align:baseline;line-height:1}

/* Buehne 2 am Handy: die Logo- und die Beschriftungszeile kommen dazu, also
   muss anderswo Platz frei werden -- die Buehne ist eine Vollbild-Seite und
   darf nicht wachsen (gemessen 896px statt 812, das haette das seitenweise
   Scrollen gebrochen). Die Titel brauchen ohne den Haendlernamen nur noch
   eine Zeile, deshalb hier die feste Mindesthoehe von 2,6 Zeilen zurueck. */
@media(max-width:920px){
  .st2 .k-h{min-height:0}
  .st2 .karte{gap:clamp(5px,1svh,9px)}
}
@media(min-width:921px){ .k-h{min-height:1.4em} }

/* Restliche 17px fuer Buehne 2 am Handy: Abstaende der Logo-Zeile, nicht die
   Schriftgroessen -- kleine Zeilen waren ausdruecklich nicht gewuenscht. */
@media(max-width:920px){
  .k-marke{margin:clamp(2px,.45svh,5px) 0 0}
  .karte .k-geld{gap:0}
}
@media(max-width:920px){ .k-lbl{line-height:1.05} }

/* =====================================================================
   AUCH DER HERO WIRD EIN KASTEN (Jan, 24.08.2026)
   Bei 2000px Fensterbreite gemessen: Gruen lief ueber 1985px ab Kante 0,
   die Kaesten ueber 1320 ab 333, die Karten ueber 1144 ab 421 -- drei
   Breiten, drei Kanten. Und 50 % der gruenen Flaeche war leer, also fast
   1000x573px gesaettigtes Gruen ohne Inhalt. Als einziger randloser Block
   folgte der Hero der Kaesten-Regel nicht.
   Jetzt dieselbe Breite und derselbe Radius wie alle anderen Kaesten. Das
   Gruen deckt nur noch die Flaeche, die es auch nutzt. overflow:hidden ist
   noetig, damit Verlauf und Punktmuster an der runden Ecke abschneiden.
   Nur ab 921px -- am Handy ist der Hero eine Vollbild-Buehne.
   ===================================================================== */
@media(min-width:921px){
  .hero-band{max-width:1320px;margin:22px auto 0;border-radius:22px;overflow:hidden}
  /* Der erste Kasten darunter braucht dann keinen doppelten Abstand mehr. */
  .wieso{margin-top:18px}
}

/* =====================================================================
   PARTNERZEILE: BESCHRIFTUNG ZURUECK, LOGOS GROESSER (Jan, 24.08.2026)
   1. "Tarif"/"Ankauf" standen seit einer frueheren Aufraeumaktion nur in
      der ERSTEN Zeile (.deal-list > *:not(:first-child) .dr-plabel). Das war
      richtig, solange dort Textmarken standen -- "Tarif · MediaMarkt
      Tarifwelt" erklaerte sich selbst. Mit Logos nicht mehr: zwei nackte
      Bildmarken nebeneinander sagen nicht, welche der Shop und welche das
      Ankaufsportal ist. Das Label traegt jetzt die Bedeutung, nicht die
      Wiederholung.
   2. 24px waren zu klein: Das MediaMarkt-Zeichen ist ein dreizeiliges
      Gebilde, die Zeile "Tarifwelt" darin war ~6px hoch. +50 %.
   ===================================================================== */
.deal-list > *:not(:first-child) .dr-plabel{display:inline}
.dr-plogo img{height:36px;max-width:190px}
@media(max-width:920px){ .dr-plogo img{height:30px;max-width:150px} }

/* =====================================================================
   PARTNER-RASTER UNTER DEM HERO -- NUR DESKTOP (Jan, 24.08.2026)
   Statisch statt Laufband: Bewegung direkt unter Headline und Preis zieht
   den Blick vom Wichtigsten weg, und laufende Logobaender werden als
   Werbung weggeblendet. Die Gruppierung nach Netz / Tarif / Ankauf ist die
   eigentliche Aussage -- sie beantwortet "wo bestelle ich" und "wer zahlt
   mir das Geld" auf einen Blick.
   Am Handy unveraendert: dort bleibt das Raster unten, hier ist nichts.
   ===================================================================== */
.partner-hero{display:none}
@media(min-width:921px){
  .partner-hero{display:block;max-width:1320px;margin:18px auto 0;
    background:#fff;border-radius:22px;padding:20px 24px 22px}
  .partner-hero .wrap{max-width:none;padding:0}
  .partner-hero .h{font-family:var(--mn);font-weight:800;font-size:13px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--soft-text);
    text-align:center;margin:0 0 16px}
  .partner-hero .pgrid{display:grid;grid-template-columns:auto 1fr;
    align-items:center;gap:10px 18px}
  .partner-hero .pg-h{font-size:11.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--soft-text);text-align:right;
    white-space:nowrap;margin:0}
  .partner-hero .pg-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  /* Kein Kasten um jedes Logo -- das waere wieder die Kaestchen-Optik.
     Die Logos stehen frei auf der weissen Flaeche. */
  .partner-hero .ptile{background:none;border:0;box-shadow:none;
    height:auto;width:auto;min-width:0;padding:4px 8px;border-radius:8px}
  .partner-hero .ptile:hover{transform:none;background:#F4F7FC}
  .partner-hero .ptile img{max-height:30px;max-width:132px;width:auto;
    object-fit:contain;display:block}
  .partner-hero .ptile-txt{font-size:14px;color:var(--soft-text)}
  /* Unten nicht noch einmal dasselbe. */
  .partner-top{display:none}
}

/* Partnerkachel ohne Verweis (Anbieter, deren Tarife noch nicht in den Daten
   stecken): sieht aus wie die anderen, reagiert aber nicht auf den Zeiger. */
.ptile-ohne{cursor:default}
.partner-hero .ptile-ohne:hover{background:none}

/* Ersatz fuer ein defektes Logo -- sieht aus wie die Textmarke von frueher. */
.logo-fehlt{font-family:var(--mn);font-weight:800;font-size:13px;
  color:var(--soft-text);white-space:nowrap;letter-spacing:.01em}
.dr-plogo .logo-fehlt{font-size:12.5px}
@media(max-width:920px){ .logo-fehlt{font-size:11.5px} }

/* Partner-Raster mittig statt linksbuendig (Jan, 24.08.2026) und die
   Ueberschrift kraeftiger. */
@media(min-width:921px){
  .partner-hero .wrap{text-align:center}
  .partner-hero .pgrid{display:inline-grid;grid-template-columns:auto auto;
    text-align:left}
  .partner-hero .pg-row{justify-content:center}
  .partner-hero .h{font-size:15px;font-weight:800;color:var(--ink);
    letter-spacing:.08em;margin-bottom:18px}
}

/* Gruppenbeschriftungen im Partner-Raster raus (Jan, 24.08.2026): Sie
   standen in einer eigenen Spalte links und zogen das Raster aus der Mitte.
   Ohne sie stapeln sich die Reihen einfach mittig -- welche Marke wofuer
   steht, sagt die Marke selbst. Am Handy bleiben sie: dort liegt das Raster
   ganz unten und die Reihen stehen ohne Beschriftung zusammenhanglos da. */
@media(min-width:921px){
  .partner-hero .pg-h{display:none}
  .partner-hero .pgrid{display:flex;flex-direction:column;align-items:center;
    gap:12px;text-align:center}
  .partner-hero .pg-row{justify-content:center}
}

/* Angebotszeile unter "Aktuelles Top-Angebot". */
.st-unter{text-align:center;margin:0 0 22px;color:var(--ink);font-weight:600}
.st-unter b{font-family:var(--mn);font-weight:800;color:#1B7B32}
@media(min-width:921px){
  .st2 .st-kicker-gross{margin-bottom:8px}
  .st-unter{font-size:17px;margin-bottom:26px}
  .st-unter b{font-size:20px}
}
@media(max-width:920px){
  .st2 .st-kicker-gross{margin-bottom:clamp(4px,.8svh,8px)}
  .st-unter{font-size:clamp(13px,1.9svh,15.5px);margin-bottom:clamp(8px,1.6svh,15px)}
  .st-unter b{font-size:clamp(15px,2.2svh,18px)}
}

/* Die neue Angebotszeile kostet 36px, Buehne 2 ist aber eine Vollbild-Seite
   (gemessen 848 statt 812). Der Platz kommt aus den Innenabstaenden der drei
   Stationen und der Logo-Zeile -- NICHT aus den Nummernkreisen oder den
   Betraegen; gross sollten die ausdruecklich bleiben. */
@media(max-width:920px){
  .st2 .k-stat{padding:clamp(4px,.8svh,8px) 12px clamp(5px,.9svh,9px)}
  .k-marke{margin-top:clamp(1px,.2svh,3px)}
}
@media(max-width:920px){ .st-unter{margin-bottom:clamp(6px,1.2svh,11px)} }

/* Netzlogos aus dem gruenen Hero (Jan, 24.08.2026) -- nur am Desktop.
   Dort stehen dieselben drei Logos direkt darunter in der Partner-Reihe
   "Netze"; im Hero waren sie also eine Wiederholung, die Hoehe kostet.
   Am Handy bleiben sie: das Partner-Raster liegt dort ganz am Seitenende,
   im Hero sind sie die einzige Antwort auf "ist mein Netz dabei?". */
@media(min-width:921px){ .st1-netze{display:none} }

/* Auch die Preiszeile aus dem gruenen Hero (Jan, 24.08.2026) -- nur Desktop.
   Der Preis geht dabei nicht verloren: direkt unter dem Hero steht
   "20 GB im Vodafone-Netz fuer eff. 0,37 €/M" als Unterzeile des
   Top-Angebots, und zwar mit Kontext statt als blosse Zahl.
   Am Handy bleibt sie: dort ist Buehne 1 eine eigene Bildschirmseite und
   traegt sonst nur noch Anspruch, Frosch und Ueberschrift. */
/* .st1 .st1-ab (0,2,0) steht weiter oben und schlaegt .st1-ab (0,1,0)
   unabhaengig von der Reihenfolge -- deshalb hier dieselbe Staerke. */
@media(min-width:921px){ .st1-ab,.st1 .st1-ab{display:none} }

/* "Unsere Partner" auf dieselbe Stufe wie "Aktuelles Top-Angebot" (Jan,
   24.08.2026). Nicht nur die Groesse: Versalien und weite Sperrung machen
   aus 26px eine ganz andere Anmutung. Beide sind jetzt Abschnitts-
   Ueberschriften derselben Ebene, also auch dieselbe Behandlung. */
@media(min-width:921px){
  .partner-hero .h{font-size:26px;letter-spacing:-.26px;text-transform:none;
    font-weight:800;color:var(--ink);margin-bottom:22px}
}

/* =====================================================================
   TOP-ANGEBOT: DIE ZAHLEN NACH VORN (Jan, 24.08.2026)
   Gemessen war der Betrag 25px -- kleiner als die Abschnitts-Ueberschrift
   (26px) und kaum groesser als der Stationstitel (19px). Die Zahl, um die
   es geht, stand typografisch auf Platz drei.
   Kein Leuchten oder Schatten: das war genau die Optik, die vorhin als
   "nach KI aussehend" rausgeflogen ist. Die Aufmerksamkeit kommt aus der
   Rangfolge -- Betrag deutlich groesser, alles andere ringsum kleiner und
   ruhiger, damit die Zahl Luft bekommt.
   ===================================================================== */
@media(min-width:921px){
  .karte .k-geld b{font-size:38px;line-height:1.05}
  .karte .k-h{font-size:16px;font-weight:700;color:#33425A;line-height:1.3}
  .karte .k-lbl{font-size:12.5px}
  .k-marke img{height:24px}
  .k-marke{min-height:24px;margin:10px 0 5px}
  .st-unter{font-size:16px}
  .st-unter b{font-size:26px}
}
@media(max-width:920px){
  /* Am Handy ist Buehne 2 hoehenbegrenzt -- was der Betrag gewinnt, muss
     ringsum abgegeben werden. */
  .st2 .k-geld b{font-size:clamp(21px,3.3svh,28px);line-height:1.05}
  .st2 .k-h{font-size:clamp(12.5px,1.75svh,14.5px)}
  .k-lbl{font-size:clamp(10px,1.4svh,11.5px)}
  .k-marke img{height:clamp(14px,2.2svh,20px)}
  .k-marke{min-height:clamp(14px,2.2svh,20px)}
}

/* =====================================================================
   DER EFFEKTIVPREIS ALS ERGEBNIS (Jan, 24.08.2026)
   Groesser allein reichte nicht: alle drei Betraege waren gleich gross, der
   dritte ist aber das ERGEBNIS der Rechnung -- Station 1 und 2 sind die
   Zwischenschritte. Deshalb bekommt Station 3 ein eigenes Feld und die
   groesste Zahl. Ein ruhiges gruenes Feld statt Leuchten oder Schatten:
   Aufmerksamkeit ueber Flaeche und Rangfolge, nicht ueber Effekte.
   ===================================================================== */
@media(min-width:921px){
  /* Alle drei bekommen dieselbe Innenhoehe, sonst sitzt Station 3 tiefer
     als die anderen -- gemessen 12px, Kreis und Titel liefen aus der Reihe.
     Das Feld faerbt nur, es verschiebt nicht. */
  .karte .k-stat{padding:18px 14px 22px}
  .karte .k-ziel{background:#F1F8F3;border-radius:18px}
  .karte .k-ziel .k-geld b{font-size:46px;letter-spacing:-.02em}
  .karte .k-ziel .k-lbl{color:#1B7B32;font-weight:700}
  /* Die Verbindungslinie endet vor dem Feld, sonst laeuft sie hinein. */
  .k-stat:nth-child(2)::after{right:-64px;width:128px}
}
@media(max-width:920px){
  .st2 .k-ziel{background:#F1F8F3}
  .st2 .k-ziel .k-geld b{font-size:clamp(24px,3.9svh,33px)}
  .st2 .k-ziel .k-lbl{color:#1B7B32;font-weight:700}
}

/* Tarifkarte: Logo etwas kleiner, Preis groesser (Jan, 24.08.2026).
   Gemessen belegte das Ankaufslogo 4.224 px², der Effektivpreis nur
   2.113 px² -- das Logo des Ankaufsportals war doppelt so praesent wie die
   Zahl, um die es geht, und in kraeftigem Rot zehnmal untereinander. */
.dr-plogo img{height:30px;max-width:150px}
@media(min-width:921px){ .dr-price b{font-size:36px} }
@media(max-width:920px){ .dr-plogo img{height:26px;max-width:132px} }

/* Preisanstieg wieder rot. Bei der Kontrast-Aufraeumung (24.08.2026) geriet
   .dr-trend in eine Sammelregel, die Gruen setzt -- und die steht spaeter im
   Dokument als .dr-trend-hoch, bei gleicher Spezifitaet gewinnt sie. Damit
   erschienen Preissteigerungen gruen, also im Signal fuer gute Nachrichten.
   Das ist keine Geschmacksfrage: die Farbe hat die Aussage verdreht. */
.dr-trend-hoch,.dr-trend-hoch i{color:#B03A2E}

/* =====================================================================
   TOP-ANGEBOT WERTIGER (Jan: "schaut billig aus", 24.08.2026)
   Gemessen, was den Eindruck macht:
   - 2px GESTRICHELTE Linien in Hellgruen zwischen Pastellkreisen. Das ist
     die Bildsprache kostenloser Praesentationsvorlagen; durchgezogene
     Haarlinien lesen sich sofort anders.
   - 76x76px Kreise fuer je eine Ziffer -- viel Flaeche, wenig Aussage.
   - 66px tote Flaeche unter der letzten Zahl: der Block fuellte seinen
     Kasten nicht, das wirkt unfertig.
   - Das gruene Ergebnisfeld schwebte, ein gestrichelter Stummel zeigte
     darauf. Jetzt reicht es ueber die volle Zeilenhoehe und sitzt wie eine
     Spalte statt wie ein aufgeklebtes Etikett.
   ===================================================================== */
@media(min-width:921px){
  /* Durchgezogen statt gestrichelt, duenner, zurueckhaltender. */
  .k-stat:not(:last-child)::after{border-top:1px solid #D8E5DC;top:32px}
  /* Vor dem Ergebnisfeld endet die Linie frueher, statt hineinzulaufen. */
  .k-stat:nth-child(2)::after{right:-52px;width:104px}

  /* Kleinere, satter gezeichnete Kreise: die Ziffer bleibt gross genug,
     die Pastellblase verschwindet. */
  .st2 .k-bild{width:56px;height:56px;border-width:1.5px;
    background:#EAF4EE;border-color:#C9E3D3;margin-bottom:14px}
  .st2 .k-bild > b{font-size:24px}

  /* Der Kasten sass 44px oben und 44px unten -- unten blieben dadurch 66px
     leer. Enger und symmetrisch zum Inhalt. */
  .wieso{padding:38px 0 34px}
  .karte .k-stat{padding:16px 14px 14px}
  .karte .k-ziel{padding-bottom:20px}
}
/* Der Ergebniskreis bleibt gefuellt: .st2 .k-bild (0,2,0) hatte
   .k-ziel .k-bild (0,2,0) ueberschrieben, weil es spaeter steht. */
@media(min-width:921px){
  .st2 .k-ziel .k-bild{background:var(--green);border-color:var(--green);color:#fff}
}

/* =====================================================================
   VERBINDUNGSLINIEN AUS DER GEOMETRIE RECHNEN (Jan-Fund, 24.08.2026)
   Gemessen: Linie 2 begann 52px NACH Kreis 2 -- schwebte also frei -- und
   lief 52px IN das gruene Ergebnisfeld hinein. Ursache waren feste
   Pixelwerte (right:-52px, width:104px), die nicht zur Spaltenbreite
   passen. Jetzt aus der Spaltenbreite gerechnet, mit 8px Luft an beiden
   Enden; damit stimmt es auch bei anderen Fensterbreiten.
   Kreis ist 56px breit, Abstand Kreisrand zu Spaltenrand also
   (Spaltenbreite - 56) / 2.
   ===================================================================== */
@media(min-width:921px){
  /* Linie 1: von Kreis 1 bis Kreis 2. */
  .k-stat:nth-child(1)::after{
    right:calc(8px - (100% - 56px) / 2);
    width:calc(100% - 72px)}
  /* Linie 2: von Kreis 2 bis an die Kante des Ergebnisfeldes, nicht hinein. */
  .k-stat:nth-child(2)::after{
    right:8px;
    width:calc((100% - 56px) / 2 - 16px)}
}

/* =====================================================================
   RECHENBELEG (Jan, 24.08.2026)
   Ersetzt die Schrittfolge aus drei Nummernkreisen. Die alte Form erzaehlte
   eine Reihenfolge, der Inhalt ist aber eine Rechnung -- deshalb wirkte sie
   trotz aller Detailkorrekturen billig: Kreise und gestrichelte Linien sind
   die Bildsprache von Onboarding-Strecken.
   Traeger der Wertigkeit hier: rechtsbuendige Betraege mit TABELLENZIFFERN
   (font-variant-numeric), damit die Kommastellen exakt untereinander stehen,
   eine ruhige Trennlinie vor der Summe und ein Ergebnis, das durch Groesse
   fuehrt statt durch Effekte.
   ===================================================================== */
.rechnung{max-width:620px;margin:0 auto;text-align:left}
.re-zeile,.re-ergebnis{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;padding:13px 0}
.re-zeile + .re-zeile{border-top:1px solid #EDF1F7}
.re-was{display:flex;flex-direction:column;gap:3px;font-family:var(--mn);
  font-weight:700;color:var(--ink);line-height:1.25}
.re-was em{font-style:normal;font-weight:600;color:var(--soft-text);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.re-was em img{height:18px;width:auto;max-width:104px;object-fit:contain;
  display:inline-block;vertical-align:middle}
/* Tabellenziffern: sonst tanzen die Kommastellen der Betraege. */
.re-wert{font-family:var(--mn);font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.re-ab{color:#1B7B32}
.re-summe{border-top:2px solid var(--ink);margin-top:2px}
.re-summe .re-was,.re-summe .re-wert{color:var(--ink)}
.re-ergebnis{margin-top:10px;background:#F1F8F3;border-radius:16px;
  padding:16px 20px;align-items:center}
.re-ergebnis .re-was em{color:#1B7B32}
.re-ergebnis .re-wert{color:#1B7B32;display:flex;align-items:baseline;gap:4px}
.re-ergebnis .re-wert i{font-style:normal;font-weight:700}

@media(min-width:921px){
  .rechnung{max-width:660px}
  .re-was{font-size:17px}
  .re-was em{font-size:13.5px}
  .re-wert{font-size:22px}
  .re-summe .re-wert{font-size:24px}
  .re-ergebnis .re-wert b{font-size:44px;letter-spacing:-.02em}
  .re-ergebnis .re-wert i{font-size:17px}
  .re-ergebnis .re-was{font-size:18px}
  .wieso{padding:34px 0 38px}
}
@media(max-width:920px){
  /* Buehne 2 ist eine Vollbild-Seite -- alles ueber svh, damit es passt. */
  .rechnung{max-width:none}
  .re-zeile,.re-ergebnis{padding:clamp(7px,1.35svh,12px) 0;gap:12px}
  .re-was{font-size:clamp(13px,1.9svh,15.5px)}
  .re-was em{font-size:clamp(10.5px,1.5svh,12.5px)}
  .re-was em img{height:clamp(13px,1.9svh,17px)}
  .re-wert{font-size:clamp(16px,2.4svh,20px)}
  .re-summe .re-wert{font-size:clamp(17px,2.6svh,22px)}
  .re-ergebnis{padding:clamp(10px,1.7svh,15px) 14px;margin-top:clamp(6px,1.1svh,10px)}
  .re-ergebnis .re-wert b{font-size:clamp(26px,4.2svh,36px)}
  .re-ergebnis .re-wert i{font-size:clamp(12px,1.8svh,15px)}
  .re-ergebnis .re-was{font-size:clamp(13px,1.9svh,15.5px)}
}

/* Nachbesserung Rechenbeleg:
   1. Die Summenlinie war unsichtbar: .re-zeile + .re-zeile (zwei Klassen,
      0-2-0) schlaegt .re-summe (0-1-0) unabhaengig von der Reihenfolge.
   2. display:flex auf dem Zusatz machte aus "im", <img> und "-Netz" drei
      Flex-Elemente mit 6px Abstand -- daher die Luecke vor "-Netz".
      Normaler Textfluss mit vertikal ausgerichtetem Bild loest das.
   3. Das MediaMarkt-Zeichen ist dreizeilig und bei 18px unlesbar. */
.re-zeile.re-summe{border-top:2px solid var(--ink);margin-top:2px}
.re-was em{display:block}
.re-was em img{height:22px;max-width:118px;vertical-align:-6px;margin:0 1px}
@media(max-width:920px){
  .re-was em img{height:clamp(15px,2.2svh,19px);vertical-align:-5px}
}

/* Am Handy steht "20 GB im Vodafone-Netz" schon als Unterzeile ueber dem
   Beleg. Im Ergebnis noch einmal ist es nicht nur doppelt, es bricht bei
   375px auch zwischen Logo und "-Netz" um. Dort also weglassen. */
@media(max-width:920px){
  .re-ergebnis .re-was em{display:none}
  .re-ergebnis .re-was{align-self:center}
}

/* =====================================================================
   EINZELPOSTEN NEBEN DEM BELEG (Jan, 24.08.2026)
   Der Beleg zeigt, WIE sich der Effektivpreis ergibt; diese Spalte zeigt,
   WORAUS die erste Zeile besteht. Bewusst zurueckhaltend gesetzt -- sie ist
   Beleg zum Beleg, nicht zweite Hauptsache: kleinere Schrift, kein Rahmen,
   nur eine senkrechte Trennlinie.
   Erst ab 921px: darunter ist Buehne 2 eine Vollbild-Seite mit festem
   Hoehenbudget.
   ===================================================================== */
.rechnung-raum{display:block}
.re-posten{display:none}
@media(min-width:921px){
  .rechnung-raum{display:grid;grid-template-columns:minmax(0,1fr) 268px;
    gap:0 38px;align-items:start;max-width:1000px;margin:0 auto}
  .rechnung{max-width:none;margin:0}
  .re-posten{display:block;border-left:1px solid #EDF1F7;padding-left:38px}
  .re-posten-h{display:block;font-family:var(--mn);font-weight:800;font-size:12.5px;
    letter-spacing:.1em;text-transform:uppercase;color:var(--soft-text);margin-bottom:12px}
  .re-p{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
    padding:7px 0;font-size:14px;color:var(--ink);font-weight:600}
  .re-p em{display:block;font-style:normal;font-weight:600;font-size:12px;
    color:var(--soft-text);margin-top:1px}
  .re-p-wert{font-family:var(--mn);font-weight:800;font-variant-numeric:tabular-nums;
    white-space:nowrap}
  .re-p-summe{border-top:1px solid var(--ink);margin-top:5px;padding-top:9px}
}

/* Kaesten exakt auf Kartenbreite (Jan, 24.08.2026).
   Gemessen: Karte = min(1200px, Fenster) - 2 x 28px Wrap-Innenabstand.
   width:calc(100% - 56px) bildet genau das ab -- unter 1200px waechst und
   schrumpft der Kasten mit dem Fenster wie die Karte, darueber deckelt
   max-width bei 1144. Feste 1144px allein wuerden bei schmaleren Fenstern
   auseinanderlaufen. */
@media(min-width:921px){
  .hero-band,.wieso,.faq,.seo,.hub,.cta-band,.partner-hero{
    max-width:1144px;width:calc(100% - 56px);margin-left:auto;margin-right:auto}
}

/* Die Einzelposten sind Beleg zum Beleg, nicht zweite Hauptsache. Gemessen
   hatten sie aber SECHS fette Zahlen gegen die vier des Belegs -- gleicher
   Schnitt (800), gleiche Farbe, nur kleiner. Jetzt ruhiger gesetzt; fett
   bleibt allein die Summe, weil sie die Bruecke zur ersten Belegzeile ist. */
@media(min-width:921px){
  .re-p{font-weight:600;color:#33425A}
  .re-p-wert{font-weight:600;color:#33425A}
  .re-p-summe,.re-p-summe .re-p-wert{font-weight:800;color:var(--ink)}
}

/* Einzelposten: Kopf mittig und benannt (Jan, 24.08.2026). Ohne den Zusatz
   stand die Aufstellung frei im Raum -- sie gehoert zur ERSTEN Belegzeile,
   also zum Tarif dieses Haendlers. */
@media(min-width:921px){
  .re-posten-h{text-align:center}
  .re-posten-wer{display:flex;align-items:center;justify-content:center;gap:7px;
    margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--soft-text);
    padding-bottom:12px;border-bottom:1px solid #EDF1F7}
  .re-posten-wer img{height:20px;width:auto;max-width:104px;object-fit:contain}
}
@media(max-width:920px){ .re-posten-wer{display:none} }

/* Netzangabe in der Ergebniszeile: Logo am Desktop, Klartext am Handy.
   Die Unterzeile ueber dem Beleg ist weg, also ist das hier die einzige
   Stelle, die Volumen und Netz nennt -- am Handy brach sie mit Logo aber
   zwischen Bild und "-Netz" um. */
.re-netz-bild{display:none}
.re-netz-text{display:inline}
@media(min-width:921px){
  .re-ergebnis .re-was em{display:block}
  .re-netz-bild{display:inline-block}
  .re-netz-text{display:none}
}
@media(max-width:920px){
  .re-ergebnis .re-was em{display:block}
  .re-ergebnis .re-was{align-self:flex-start}
}

/* .re-was em img (0-1-2) schlaegt .re-netz-bild (0-1-0) -- deshalb wurden am
   Handy Logo UND Klartext gezeigt und die Zeile brach dreifach um.
   Mit zwei Klassen (0-2-0) gewinnt die Regel. */
.re-ergebnis .re-netz-bild{display:none}
.re-ergebnis .re-netz-text{display:inline}
@media(min-width:921px){
  .re-ergebnis .re-netz-bild{display:inline-block}
  .re-ergebnis .re-netz-text{display:none}
}

/* Aufwaertspfeil durch Drehung: ph-arrow-up ist im eingekuerzten Symbolsatz
   nicht enthalten (live gemessen 0px breit, content:none). Der Pfeil stand
   also im HTML, war aber unsichtbar. */
.dr-pfeil-hoch{transform:rotate(180deg)}

/* Beide Spalten des Belegs gleich hoch, oben und unten buendig (Jan,
   24.08.2026): Gemessen war die linke 310px, die rechte 286px und endete
   25px hoeher. align-items:stretch zieht beide auf dieselbe Hoehe, die
   Trennlinie laeuft dadurch ueber die volle Strecke. */
@media(min-width:921px){
  .rechnung-raum{align-items:stretch}
  .re-posten{display:flex;flex-direction:column}
  /* Die Summe wird nach unten gedrueckt, damit sie mit dem Ergebnis
     abschliesst statt in der Luft zu haengen. */
  .re-p-summe{margin-top:auto}
}

/* Letzte Zeile beider Spalten auf gleicher Hoehe (Jan, 24.08.2026).
   Gemessen: Die Spalten waren zwar gleich hoch (588..915), aber das gruene
   Ergebnisfeld endete bei 898 -- ich hatte nur die Summe rechts nach unten
   gedrueckt, das Feld links nicht. 17px Versatz.
   Jetzt wird auch der Beleg zur Flex-Spalte und das Ergebnis ans Ende
   geschoben; beide schliessen damit auf derselben Linie ab. */
@media(min-width:921px){
  .rechnung{display:flex;flex-direction:column}
  .re-ergebnis{margin-top:auto}
}

/* =====================================================================
   LISTE UND FILTER (Jan, 25.08.2026)
   ===================================================================== */
/* Die drei Eckdaten wieder als leichte Kacheln. Ich hatte sie beim
   Flaechen-Umbau flach gemacht -- hier sind sie aber keine Trennung,
   sondern drei gleichwertige Werte, die man auf einen Blick erfassen soll.
   Bewusst sehr leise: Fuellung ohne Rahmen, damit es nicht wieder nach
   Kaestchen-im-Kaestchen aussieht. */
@media(min-width:921px){
  .deal-row .dr-seg{background:#F4F7FC;border:0;border-radius:11px;padding:9px 14px}
  .deal-row .dr-seg + .dr-seg{border-left:0}
  .deal-row .dr-specs{gap:8px}
}
@media(max-width:920px){
  .deal-row .dr-seg{background:#F4F7FC;border:0;border-radius:9px;padding:6px 10px}
}

/* Filter am PC und Tablet dauerhaft offen. Der Knopf war ein Handy-Muster,
   das ohne Media-Query auch auf 1440px lief. */
@media(min-width:921px){
  .finder-toggle{display:none}
  .finder-side .finder-box,.finder-side.offen .finder-box{display:block;margin-top:0}
}

/* Filter zuruecksetzen */
.freset{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.freset a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);
  font-weight:700;font-size:13.5px;color:var(--soft-text);text-decoration:none;
  padding:9px 14px;border-radius:11px;background:#F4F7FC;transition:color .16s,background .16s}
.freset a:hover{color:var(--ink);background:#EAEFF7}
.freset i{font-size:15px}
.freset.aus{display:none}

/* =====================================================================
   HANDY: ZWEI BUEHNEN STATT DREI (Jan, 25.08.2026)
   Buehne 2 (Top-Angebot mit Rechenbeleg) entfaellt am Handy, Buehne 3
   (die Sprungkacheln) rueckt an ihre Stelle -- und wird dabei von Gruen auf
   Weiss gedreht. Am Desktop bleibt beides unveraendert.
   ACHTUNG, das ist hier schon einmal schiefgegangen: Die weissen
   Schriftregeln fuer die gruene Buehne stehen in einem eigenen Block. Wird
   nur der Hintergrund getauscht, steht weiss auf weiss. Deshalb werden alle
   Textfarben hier ausdruecklich mitgesetzt.
   ===================================================================== */
@media(max-width:920px){
  .wieso{display:none}

  /* Buehne bleibt gruen (Jan, 25.08.2026, zweite Runde) -- die weisse
     Fassung wirkte leer. Weisse Kacheln auf Gruen, wie vorher. */
  /* Kompakte Kacheln: zwei Zeilen statt drei. */
  .st3 .hd-row{grid-template-columns:repeat(2,1fr);gap:10px}
  .st3 .hd-row .hd-b:last-child{grid-column:auto}
  .st3 .hd-b{padding:clamp(11px,2svh,17px) 10px;text-align:center}
  .st3 .hd-b b{display:block;font-size:clamp(17px,2.6svh,21px);line-height:1.15}
  .st3 .hd-b span{display:block;margin-top:clamp(3px,.7svh,6px);
    font-size:clamp(12.5px,1.8svh,14.5px);font-weight:600;line-height:1.2}
  .st3 .hd-b span em{font-style:normal;font-family:var(--mn);font-weight:800;
    font-size:clamp(17px,2.6svh,21px)}
  .st3 .hd-b span i{font-style:normal;font-size:.7em;vertical-align:super}
}
@media(max-width:920px){
  /* Ungerade Anzahl: die letzte Kachel fuellt die Zeile, sonst steht sie
     allein links und das Raster wirkt abgebrochen. Die Anzahl haengt davon
     ab, wie viele VERSCHIEDENE Preise es gerade gibt -- heute drei. */
  .st3 .hd-row .hd-b:last-child:nth-child(odd){grid-column:1 / -1}
}

/* Buehne 2 am Handy wieder gruen, Kacheln weiss (Jan, 25.08.2026).
   Die Kompaktfassung der Kacheln bleibt -- nur die Farben drehen zurueck.
   Textfarben wieder ausdruecklich, damit nichts weiss auf weiss steht. */
@media(max-width:920px){
  .st3{background:linear-gradient(170deg,#2E9B49 0%,#3DA857 55%,#46B061 100%);color:#fff}
  .st3 .st-frage{color:#fff}
  .st3 .hd-vor{color:#fff}
  .st3 .pfeile{color:#fff}
  .st3 .st-netze a{background:#fff;border:0}
  .st3 .hd-b{background:#fff;border:0;box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}
  .st3 .hd-minus{background:#fff;outline:2px solid var(--gold)}
  .st3 .hd-b b{color:var(--ink)}
  .st3 .hd-b span{color:var(--soft-text)}
  .st3 .hd-b span em{color:#1B7B32}
  .st3 .st-alle{background:#fff;color:var(--primaryd);
    box-shadow:0 14px 34px -20px rgba(0,0,0,.6)}
  /* Fuenf Kacheln in zwei Spalten -> die letzte fuellt die Zeile. */
  .st3 .hd-row .hd-b:last-child:nth-child(odd){grid-column:1 / -1}
}

/* =====================================================================
   PARTNER-BUEHNE AM HANDY (Jan, 25.08.2026)
   Ersetzt die Kachel-Buehne. Weisser Grund, damit die Logos ihre eigenen
   Farben behalten -- auf Gruen muesste jedes Logo einen Kasten bekommen,
   und dann sieht es aus wie eine Werbewand.
   ===================================================================== */
.st-partner{display:none}
@media(max-width:920px){
  .st-partner{display:flex}
  .sprung{display:none}          /* Kachel-Buehne entfaellt am Handy */

  .st-partner{background:#fff}
  .st-partner .st-frage{display:block;color:var(--ink);text-align:center;
    font-size:clamp(20px,3svh,25px);margin-bottom:clamp(14px,2.6svh,22px)}
  .st-partner .pgrid{display:block;width:100%}
  .st-partner .pg-h{font-size:clamp(10px,1.5svh,11.5px);font-weight:800;
    letter-spacing:.09em;text-transform:uppercase;color:var(--soft-text);
    text-align:center;margin:clamp(9px,1.8svh,15px) 0 clamp(5px,1svh,8px)}
  .st-partner .pg-h:first-child{margin-top:0}
  .st-partner .pg-row{display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(6px,1.2svh,10px)}
  .st-partner .ptile{background:#F7FAFD;border:1px solid #E7EEF6;box-shadow:none;
    min-width:0;height:auto;width:auto;
    padding:clamp(6px,1.1svh,10px) clamp(9px,2.4vw,14px);border-radius:11px}
  .st-partner .ptile img{max-height:clamp(15px,2.4svh,21px);max-width:88px;
    width:auto;object-fit:contain;display:block}
  .st-partner .ptile-txt{font-size:clamp(11px,1.7svh,13px);color:var(--ink)}
  .st-partner .pfeile{color:#9FB3C8}
}

/* Filter am Handy (Jan, 25.08.2026):
   1. Die Kopfzeile "Filter & Suche" lief nur ueber die Wrap-Breite (335 von
      375px). Ueber die volle Breite ist sie leichter zu treffen und liest
      sich als eigene Leiste statt als Kachel.
   2. Zweiter Knopf im Fuss zum Schliessen -- das Zeichen oben rechts ist
      weit weg vom Daumen, wenn man unten im Filter steht. */
@media(max-width:920px){
  /* width:auto liess den Flex-Knopf auf Inhaltsbreite schrumpfen (gemessen
     248 von 375px). Die Breite muss explizit gerechnet werden: volle
     Elternbreite plus die beiden Innenabstaende, die wir negativ ausgleichen. */
  .finder-side .finder-toggle{width:calc(100% + 2 * clamp(16px,4vw,28px));
    margin-left:calc(0px - clamp(16px,4vw,28px));
    margin-right:calc(0px - clamp(16px,4vw,28px));border-radius:0;
    border-left:0;border-right:0;padding-left:clamp(16px,4vw,28px);
    padding-right:clamp(16px,4vw,28px)}
  /* KEIN display hier! Die Sichtbarkeit steuert die Regel weiter oben --
     mit display:flex stand die Leiste dauerhaft auf jeder Seite. */
  .blatt-fuss{flex-direction:column;gap:8px}
  .blatt-zu{background:#fff;color:var(--soft-text);border:1px solid var(--line);
    font-family:var(--mn);font-weight:700;font-size:14.5px;border-radius:13px;
    min-height:48px;cursor:pointer}
  .blatt-zu:hover{color:var(--ink);border-color:#C9D6E6}
}

/* Partner-Buehne passte nicht auf den Schirm: 21 Kacheln in vier Gruppen
   brauchen mehr als 812px. Enger gesetzt -- die Gruppentitel schrumpfen
   staerker als die Logos, weil die Logos die Aussage tragen. */
@media(max-width:920px){
  .st-partner .st-frage{font-size:clamp(18px,2.6svh,22px);
    margin-bottom:clamp(8px,1.5svh,14px)}
  .st-partner .pg-h{font-size:clamp(9px,1.2svh,10.5px);
    margin:clamp(6px,1.2svh,10px) 0 clamp(3px,.6svh,5px)}
  .st-partner .pg-row{gap:clamp(5px,.9svh,8px)}
  .st-partner .ptile{padding:clamp(4px,.8svh,8px) clamp(7px,2vw,11px);border-radius:9px}
  .st-partner .ptile img{max-height:clamp(12px,1.9svh,18px);max-width:74px}
  .st-partner .ptile-txt{font-size:clamp(10px,1.4svh,12px)}
  .st-partner .pfeile{margin-top:clamp(6px,1.2svh,12px)}
}

/* Gruppentitel auf der Partner-Buehne raus (Jan, 25.08.2026): Die Logos
   sagen selbst, worum es geht -- vier graue Versalzeilen dazwischen waren
   die einzigen grauen Elemente auf einer sonst weissen Flaeche.
   Am Seitenende (dort steht dasselbe Raster) bleiben sie: da fehlt der
   Zusammenhang, den hier der Kopf "Unsere Partner" liefert. */
@media(max-width:920px){
  .st-partner .pg-h{display:none}
  .st-partner .pg-row{margin-bottom:clamp(6px,1.2svh,11px)}
  .st-partner .pg-row:last-of-type{margin-bottom:0}
}

/* "Unsere Partner" deutlich groesser und mehr Luft zu den Kacheln
   (Jan, 25.08.2026). Die Bühne hat den Platz: die Logos sind seit dem
   Engersetzen kompakt genug. */
@media(max-width:920px){
  .st-partner .st-frage{font-size:clamp(26px,4.2svh,34px);line-height:1.15;
    margin-bottom:clamp(20px,3.6svh,32px)}
}

/* --------------------------------------------------------------------------
   Aufklappbare Effektivpreis-Rechnung: Formatierung (Jan, 25.08.2026)
   Der Betrag rechts brach in drei Zeilen um ("− / 50,00 / €"), weil beide
   Spans schrumpfen durften und die lange Erklaerzeile links die Breite an
   sich zog. Jetzt ist der Betrag starr und die Beschriftung gibt nach --
   und die Betraege stehen als Spalte untereinander statt ausgefranst.
   -------------------------------------------------------------------------- */
.dr-cr{align-items:baseline;gap:6px 14px}
.dr-cr > span:first-child{flex:1 1 auto;min-width:0}
.dr-cr > span:last-child{flex:0 0 auto;white-space:nowrap;text-align:right;
  font-variant-numeric:tabular-nums}
.dr-cr .cr-sub{margin-top:3px}
.dr-calc-body{gap:9px}
/* Trennlinien statt reiner Abstand: die Rechnung soll wie ein Beleg lesbar
   sein, nicht wie eine lose Liste. Nur zwischen den Posten, nicht ueber der
   ersten Zeile -- .sum und .eff bringen ihre eigene Linie mit. */
.dr-calc-body > .dr-cr + .dr-cr:not(.sum):not(.eff){border-top:1px solid #EEF2F7;padding-top:9px}

@media(max-width:920px){
  /* Filter-Fuss: "Filter schliessen" und "Filter zuruecksetzen" nebeneinander
     (Jan, 25.08.2026) -- untereinander waere die Leiste drei Knoepfe hoch und
     haette die Trefferliste zugedeckt. */
  .blatt-zeile{display:flex;gap:8px}
  .blatt-zeile > button{flex:1 1 0;min-width:0;width:auto;padding:0 8px}
  /* Zwingend hoehere Spezifitaet als .blatt-fuss button -- sonst faerbt die
     Grundregel beide Nebenknoepfe gruen, und die Leiste haette drei
     gleichrangige Hauptknoepfe. Gruen bleibt allein "Tarife anzeigen". */
  .blatt-fuss .blatt-zu{background:#fff;color:#33425A;border:1px solid var(--line);
    font-family:var(--mn);font-weight:700;font-size:14px;border-radius:12px;min-height:44px}
  .blatt-fuss .blatt-zu:hover{color:var(--ink);border-color:#C9D6E6}
}

/* --- Farbsprache der Spar-Extras (Jan, 27.08.2026): RNM blau, Young lila,
   GigaKombi rot -- identisch zu Karten-Kacheln, Schritt-Chips und
   Rechnungszeilen. "aus" = dezente Toenung, "an" = satte Kategorie-Farbe
   (ersetzt das einheitliche Gruen, das alles gleich aussehen liess). --- */
.chips-self .chip.chip-rnm{background:#F3F8FF;border-color:#BFD8FF;color:#1D4ED8}
.chips-self .chip.chip-rnm em{color:#3B6FD4}
.chips-self .chip.chip-rnm.on{background:#1D4ED8;border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(29,78,216,.75)}
.chips-self .chip.chip-young{background:#F8F5FF;border-color:#DDD0FA;color:#7C3AED}
.chips-self .chip.chip-young em{color:#8B5CF6}
.chips-self .chip.chip-young.on{background:#7C3AED;border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(124,58,237,.75)}
.chips-self .chip.chip-gigakombi{background:#FDF3F2;border-color:#EFC9C3;color:#C0392B}
.chips-self .chip.chip-gigakombi em{color:#CD6155}
.chips-self .chip.chip-gigakombi.on{background:#C0392B;border-color:transparent;color:#fff;box-shadow:0 10px 22px -12px rgba(192,57,43,.75)}
.chips-self .chip.on em{color:rgba(255,255,255,.85)}

/* Inline-Logos in der aufklappbaren Effektivpreis-Rechnung der Listen-Karten:
   Regel stand nur in tarif.php -- ohne sie rendert z. B. das MediaMarkt-Logo
   (594px-Quelldatei) in Originalgroesse ueber mehrere Zeilen (Jan, 27.08.2026). */
.fg-inlogo{height:15px;width:auto;max-width:88px;vertical-align:-3px;display:inline-block;object-fit:contain}


/* CTA im Startseiten-Top-Angebot (Jan, 28.08.2026) */
.re-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:13px 18px;border-radius:12px;background:linear-gradient(135deg,#1F8A38,#17692B);color:#fff;font-weight:800;font-size:16px;text-decoration:none;box-shadow:0 6px 16px rgba(31,138,56,.28)}
.re-cta:hover{filter:brightness(1.06)}

/* Kachel-Erklaerungen als Pop-up (Hover + Klick/Tap; Jan, 28.08.2026).
   Texte kommen aus data-tip (dbt_tag_span) -- vorher native title-Tooltips,
   die auf dem Handy unsichtbar waren. */
.dr-tag[data-tip]{position:relative;cursor:help}
.dr-tag[data-tip]:hover::after,.dr-tag.tip-open::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);z-index:60;background:#1D2521;color:#fff;padding:9px 11px;border-radius:9px;font-size:12px;font-weight:500;line-height:1.5;width:max-content;max-width:min(250px,78vw);white-space:normal;text-align:left;box-shadow:0 8px 22px rgba(0,0,0,.25);pointer-events:none}
.dr-tag[data-tip]:hover::before,.dr-tag.tip-open::before{content:"";position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1D2521;z-index:60}