@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(assets/poppins-ac6d71b4.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(assets/poppins-0da2d17e.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(assets/poppins-179f97ec.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(assets/poppins-cb726212.woff2) format("woff2")}

:root{
 --blue:#038BEE;
 --blue-press:#0279D3;
 --ink:#0A1A3F;
 --ink-2:#56627A;
 --ink-3:#98A2B5;
 --surface:#F2F5F9;
 --surface-hover:#EBF0F6;
 --line:#E2E8F0;
 --ac:#038BEE;
 --ac-soft:rgba(3,139,238,.16);
 --r-sheet:28px;
 --r-opt:20px;
 --pad:22px;
 --ease:cubic-bezier(.22,1,.36,1);
 --safe-t:env(safe-area-inset-top,0px);
 --safe-b:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#FFFFFF}
html.is-start{background:linear-gradient(#038BEE 50%,#FFFFFF 50%)}
body{margin:0;min-height:100vh;font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
img,svg{display:block}
h1,h2,p{margin:0}
[hidden]{display:none!important}
::selection{background:rgba(3,139,238,.22)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------- Layout ---------- */
.app{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.hero{position:relative;isolation:isolate;flex:1 0 auto;display:flex;flex-direction:column;min-height:300px;padding:calc(18px + var(--safe-t)) var(--pad) calc(var(--r-sheet) + 30px);background:var(--blue);color:#FFFFFF;overflow:hidden}
.side{position:relative;z-index:2;background:#FFFFFF}
.is-start .side{margin-top:calc(var(--r-sheet) * -1);border-radius:var(--r-sheet) var(--r-sheet) 0 0}

/* ---------- Start: Blau ---------- */
.hero-top{display:flex;align-items:center;gap:12px}
.hero-top img{width:79px;height:23px}
.hero-top span{padding-left:12px;border-left:1px solid rgba(255,255,255,.42);font-size:14px;line-height:18px;font-weight:500;letter-spacing:.005em}
.signal-art{position:absolute;z-index:-1;right:calc(var(--pad) - 4px);bottom:calc(var(--r-sheet) - 14px);display:flex;align-items:flex-end;gap:12px;height:min(80%,430px);pointer-events:none}
.signal-art i{display:block;width:40px;border-radius:13px 13px 4px 4px;background:rgba(255,255,255,.13);transform-origin:50% 100%}
.signal-art i:nth-child(1){height:28%}
.signal-art i:nth-child(2){height:52%}
.signal-art i:nth-child(3){height:76%}
.signal-art i:nth-child(4){height:100%}
.hero-copy{margin-top:auto;padding-top:44px}
h1{font-size:clamp(38px,11.4vw,60px);line-height:1.03;font-weight:700;letter-spacing:-.036em;text-wrap:balance}
h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
h1 .ln>span{display:inline-block}
.hero-sub{margin-top:18px;max-width:34ch;font-size:16.5px;line-height:1.5;font-weight:400;color:rgba(255,255,255,.95);text-wrap:pretty}

/* ---------- Start: weisses Blatt ---------- */
.sheet{padding:28px var(--pad) calc(22px + var(--safe-b))}
.sheet-title{margin-bottom:14px;font-size:15px;font-weight:600;letter-spacing:-.005em}
.list{display:grid;gap:10px}
.trust{margin-top:18px;font-size:13.5px;line-height:1.45;color:var(--ink-2);text-align:center}

/* ---------- Antwort-Elemente ---------- */
.opt{position:relative;isolation:isolate;display:flex;align-items:center;gap:14px;width:100%;min-height:76px;margin:0;padding:12px 16px 12px 12px;border:0;border-radius:var(--r-opt);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform .22s var(--ease),background-color .2s ease,color .2s ease .1s}
@media (hover:hover){.opt:hover{background:var(--surface-hover)}}
.opt:active{transform:scale(.982)}
.opt:focus-visible{outline-offset:2px}
.fill{position:absolute;inset:0;z-index:-1;background:var(--blue);clip-path:circle(0px at 50% 50%);pointer-events:none}
.opt[aria-pressed=true]{color:#FFFFFF}
.opt[aria-pressed=true] .fill{clip-path:circle(150% at 50% 50%)}
.ic{flex:0 0 52px;width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:#FFFFFF;color:var(--ink);box-shadow:0 1px 2px rgba(10,26,63,.07),0 0 0 1px rgba(10,26,63,.04)}
.ic svg{width:32px;height:32px}
.lbl{flex:1;min-width:0;font-size:16px;line-height:1.3;font-weight:500;letter-spacing:-.006em}
.lbl small{display:block;margin-top:3px;font-size:13.5px;line-height:1.35;font-weight:400;letter-spacing:0;color:var(--ink-2);transition:color .2s ease .1s}
.opt[aria-pressed=true] .lbl small,.opt[aria-pressed=true] .unit{color:rgba(255,255,255,.85)}
.tick{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#FFFFFF;color:var(--blue);opacity:0;transform:scale(.4)}
.tick svg{width:16px;height:16px}
.tick path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .34s cubic-bezier(.6,0,.2,1) .16s}
.opt[aria-pressed=true] .tick{opacity:1;transform:none}
.opt[aria-pressed=true] .tick path{stroke-dashoffset:0}
.chev{flex:0 0 22px;color:var(--ink-3);transition:color .2s ease .1s}
.chev svg{width:22px;height:22px}
.opt[aria-pressed=true] .chev{color:#FFFFFF}

/* Anbieter */
.grid2{grid-template-columns:1fr 1fr}
.prov{gap:10px;min-height:68px;padding:12px 10px 12px 12px}
.prov .tick{position:absolute;left:39px;top:calc(50% + 2px);width:21px;height:21px;box-shadow:0 0 0 2px var(--blue)}
.prov .tick svg{width:13px;height:13px}
.logo{width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center;border-radius:50%;background:#FFFFFF;overflow:hidden;box-shadow:0 1px 2px rgba(10,26,63,.07),0 0 0 1px rgba(10,26,63,.05)}
.logo img{max-width:32px;max-height:24px;width:auto;height:auto}
.logo.swisscom img{height:26px;max-height:26px}
.logo.sunrise img{height:23px;max-height:23px}
.logo.salt img{width:29px}
.logo.lebara img{width:34px;max-width:34px}
.logo.yallo img{width:31px;max-width:31px}
.logo.quickline{background:#1C1C1E}
.logo.quickline img{width:36px;max-width:36px}
.logo.neutral{color:var(--ink)}
.logo.neutral svg{width:26px;height:26px}
.logo.text{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--ink)}
.name{min-width:0;font-size:14.5px;line-height:1.25;font-weight:500;letter-spacing:-.008em;white-space:nowrap}

/* Kosten */
.price{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:98px;padding:14px 16px}
.price .tick{position:absolute;top:12px;right:12px}
.unit{font-size:13px;line-height:1.3;font-weight:500;color:var(--ink-2);transition:color .2s ease .1s}
.num{font-size:28px;line-height:1.12;font-weight:600;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.price.wide{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;min-height:62px;padding:12px 16px}
.price.wide .tick{position:static}

/* Andere */
.other{margin-top:14px}
.field{position:relative}
.field input{width:100%;height:60px;padding:24px 16px 8px;border:0;border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:500;outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .2s ease,background-color .2s ease;-webkit-appearance:none;appearance:none}
.field input:focus{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--blue)}
.field input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #D92D20}
.field input::placeholder{color:var(--ink-3);font-weight:400}
.field label{position:absolute;left:16px;top:10px;font-size:12px;line-height:1.2;font-weight:500;color:var(--ink-2);pointer-events:none}
.err{margin-top:8px;font-size:13.5px;color:#B42318}
.btn{display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin-top:12px;border:0;border-radius:16px;background:var(--blue);color:#FFFFFF;font-size:16px;font-weight:600;letter-spacing:-.005em;cursor:pointer;touch-action:manipulation;transition:transform .22s var(--ease),background-color .2s ease}
.btn:active{transform:scale(.98);background:var(--blue-press)}
@media (hover:hover){.btn:hover{background:var(--blue-press)}}

/* ---------- Fragen ---------- */
.flow{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:#FFFFFF}
.bar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:calc(58px + var(--safe-t));padding:var(--safe-t) 10px 0 6px;background:#FFFFFF;box-shadow:0 1px 0 rgba(226,232,240,0);transition:box-shadow .25s ease}
.bar.scrolled{box-shadow:0 1px 0 var(--line)}
.back{justify-self:start;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background-color .2s ease,transform .22s var(--ease)}
.back:active{background:var(--surface);transform:scale(.94)}
.back svg{width:24px;height:24px}
.bar-logo{width:72px;height:21px}
.sig{justify-self:end;display:flex;align-items:center;gap:9px;padding-right:8px}
.sig-bars{display:flex;align-items:flex-end;gap:2.5px;height:15px}
.sig-bars i{display:block;width:4px;border-radius:1.5px;background:#D7DFEA;transform-origin:50% 100%;transition:background-color .3s ease}
.sig-bars i.on{background:var(--blue)}
.sig-txt{min-width:66px;font-size:13px;line-height:1;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.stage{flex:1;padding:16px var(--pad) calc(36px + var(--safe-b))}
.step{max-width:560px;margin:0 auto}
.q-title{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.032em;text-wrap:balance;outline:none}
.q-hint{margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.opts{display:grid;gap:10px;margin-top:26px}

/* Betrag (Schieber) */
.amount{margin-top:28px;padding:22px 20px 16px;border-radius:var(--r-opt);background:var(--surface)}
.amount-val{display:flex;align-items:baseline;gap:8px;font-variant-numeric:tabular-nums}
.amount-val .cur{font-size:18px;font-weight:600;color:var(--ink-2)}
.amount-val b{font-size:54px;line-height:1;font-weight:700;letter-spacing:-.045em}
.amount-val small{font-size:15px;font-weight:500;color:var(--ink-2)}
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:12px 0 0;background:transparent;cursor:pointer;touch-action:pan-y}
.range:focus{outline:none}
.range::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(to right,var(--blue) 0 var(--p,30%),#D9E1EB var(--p,30%) 100%)}
.range::-moz-range-track{height:8px;border-radius:99px;background:#D9E1EB}
.range::-moz-range-progress{height:8px;border-radius:99px;background:var(--blue)}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:32px;height:32px;margin-top:-12px;border:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px rgba(10,26,63,.08),0 6px 16px rgba(10,26,63,.2);transition:transform .16s var(--ease)}
.range:active::-webkit-slider-thumb{transform:scale(1.14)}
.range::-moz-range-thumb{width:32px;height:32px;border:0;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 1px rgba(10,26,63,.08),0 6px 16px rgba(10,26,63,.2)}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--blue),0 6px 16px rgba(10,26,63,.2)}
.range-ends{display:flex;justify-content:space-between;margin-top:2px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.amount + .btn{margin-top:16px}
.linkbtn{display:block;margin:10px auto 0;padding:10px 14px;border:0;background:none;color:var(--ink-2);font:inherit;font-size:14.5px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Empfehlung */
.save-all{display:inline-flex;margin-top:14px;padding:7px 12px;border-radius:999px;background:rgba(3,139,238,.1);color:#0565B8;font-size:14px;font-weight:600}
.rec-group{margin-top:26px;font-size:13px;font-weight:600;color:var(--ink-2)}
.rec-group + .rec{margin-top:10px}
.rec{margin-top:22px;border-radius:24px;background:#FFFFFF;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 20px 44px -26px rgba(10,26,63,.38)}
.rec-top{display:flex;align-items:center;gap:12px;padding:18px 18px 0}
.rec-name{font-size:18px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.rec-net{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--ink-2)}
.rec-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;padding:16px 18px 0;font-variant-numeric:tabular-nums}
.rec-price b{font-size:42px;line-height:1;font-weight:700;letter-spacing:-.045em}
.rec-price span{font-size:15px;font-weight:500;color:var(--ink-2)}
.rec-price s{margin-left:4px;font-size:14px;color:var(--ink-3)}
.save{display:inline-flex;margin:12px 18px 0;padding:7px 12px;border-radius:999px;background:rgba(3,139,238,.1);color:#0565B8;font-size:14px;font-weight:600}
.same{margin:10px 18px 0;font-size:14px;color:var(--ink-2)}
.rec-list{display:grid;gap:9px;margin:16px 0 0;padding:0 18px;list-style:none}
.rec-list li{display:flex;gap:10px;font-size:14.5px;line-height:1.38}
.rec-list svg{flex:0 0 18px;width:18px;height:18px;margin-top:1px;color:var(--blue)}
.rec-cta{display:grid;gap:8px;padding:18px}
.rec-cta .btn{margin:0;text-decoration:none}
.btn.soft{background:var(--surface);color:var(--ink)}
@media (hover:hover){.btn.soft:hover{background:var(--surface-hover)}}
.alt{display:flex;align-items:center;gap:12px;margin-top:10px;padding:14px 16px;border-radius:var(--r-opt);background:var(--surface);color:var(--ink);text-decoration:none;transition:transform .22s var(--ease),background-color .2s ease}
.alt:active{transform:scale(.985)}
@media (hover:hover){.alt:hover{background:var(--surface-hover)}}
.alt .logo{width:40px;height:40px;flex:0 0 40px}
.alt-txt{flex:1;min-width:0;font-size:14.5px;line-height:1.35}
.alt-txt small{display:block;font-size:13px;color:var(--ink-2)}
.alt-price{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.foot{margin-top:20px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}

/* Kurztext zweizeilig (v8.8) */
.hero-sub{white-space:pre-line}

/* Haken-Zeile (v8.6) */
.trust-list{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 14px;margin:18px 0 0;padding:0;list-style:none;font-size:13.5px;font-weight:500;color:var(--ink)}
.trust-list li{display:flex;align-items:center;gap:5px;white-space:nowrap}
.trust-list svg{width:15px;height:15px;flex:0 0 15px;color:var(--blue)}

/* Angaben im Kontakt */
.sum{margin-top:6px;font-size:15px;line-height:1.45;color:var(--ink)}
.sum b{font-weight:600}

/* Server-Version: Spam-Schutz (unsichtbar) und Ersatz bei Störung */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fail{padding:14px 16px;border-radius:16px;background:#FEF3F2;color:#7A271A;font-size:14px;line-height:1.45}
.fail b{display:block;margin-bottom:2px}
.fail .btn{margin-top:10px;height:50px}
.btn[aria-busy=true]{opacity:.7;pointer-events:none}

/* Start-Knopf (v8.3) */
.cta-start{height:62px;margin-top:0;border-radius:18px;font-size:17px;box-shadow:0 16px 32px -16px rgba(3,139,238,.7)}

/* Kontakt (Beispiel, sendet nichts) */
.chosen{margin-top:22px;padding:12px 14px 14px;border-radius:var(--r-opt);background:var(--surface)}
.chosen-l{font-size:12.5px;font-weight:500;color:var(--ink-2)}
.chosen-row{display:flex;align-items:center;gap:12px;margin-top:9px}
.chosen-row .logo{width:36px;height:36px;flex:0 0 36px}
.chosen-row .logo img{max-width:26px;max-height:20px}
.chosen-row .logo.swisscom img,.chosen-row .logo.sunrise img{height:21px;max-height:21px}
.chosen-row .logo.salt img{width:24px}
.chosen-row .logo.quickline img{width:30px;max-width:30px}
.chosen-name{flex:1;min-width:0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.chosen-price{font-size:14.5px;font-weight:500;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.cform{display:grid;gap:10px;margin-top:22px}
.cform .err{margin:-2px 2px 0}
.flabel{margin-top:8px;font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pref{flex-direction:column;justify-content:center;gap:8px;min-height:98px;padding:14px 6px 12px;text-align:center}
.pref .ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px}
.pref .ic svg{width:28px;height:28px}
.pref .lbl{flex:0 0 auto;font-size:14.5px}
.consent{position:relative;display:flex;align-items:flex-start;gap:12px;margin-top:2px;padding:14px 16px;border-radius:16px;background:var(--surface);font-size:13.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.consent input{position:absolute;top:16px;left:18px;width:20px;height:20px;margin:0;opacity:0}
.cbox{display:grid;place-items:center;flex:0 0 24px;height:24px;margin-top:1px;border-radius:7px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #C9D0DA;color:transparent;transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.cbox svg{width:16px;height:16px}
.consent input:checked+.cbox{background:var(--blue);box-shadow:none;color:#FFFFFF}
.consent input:focus-visible+.cbox{outline:2px solid var(--blue);outline-offset:3px}
.consent input[aria-invalid=true]+.cbox{box-shadow:inset 0 0 0 2px #D92D20}
.cform .btn{margin-top:6px}
.note{margin:16px 2px 0;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.note a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.privacy{margin-top:12px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--line)}
.privacy summary{display:flex;align-items:center;justify-content:space-between;min-height:50px;padding:0 12px 0 16px;list-style:none;font-size:14.5px;font-weight:600;cursor:pointer}
.privacy summary::-webkit-details-marker{display:none}
.privacy .chev svg{transition:transform .3s var(--ease)}
.privacy[open] .chev svg{transform:rotate(90deg)}
.privacy p{padding:0 16px 14px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.privacy a{color:var(--ink)}
.done-box{margin-top:22px;padding:16px 18px;border-radius:var(--r-opt);background:var(--surface);font-size:15px;line-height:1.5}
.done-box small{display:block;margin-top:6px;font-size:13.5px;color:var(--ink-2)}
.end.done .btn{margin-top:16px;text-decoration:none}
.test-box{margin-top:30px;padding:12px 14px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);font-size:13px;line-height:1.45;color:var(--ink-2)}
.test-box .linkbtn{margin:4px 0 0;padding:4px 0;font-size:13.5px}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));z-index:40;width:max-content;max-width:calc(100% - 40px);margin:0;padding:12px 18px;border-radius:18px;background:var(--ink);color:#FFFFFF;box-shadow:0 12px 32px rgba(10,26,63,.25);font-size:14px;font-weight:500;line-height:1.4;text-align:center;pointer-events:none;transform:translateX(-50%);transition:opacity .25s ease,transform .4s var(--ease)}
.toast:empty{padding:0;opacity:0;box-shadow:none;transform:translate(-50%,10px)}

/* Muster-Ende */
.end-sig{display:flex;align-items:flex-end;gap:7px;height:64px;margin:10px 0 28px}
.end-sig i{display:block;width:13px;border-radius:4px;background:var(--blue);transform-origin:50% 100%}
.end .btn{margin-top:30px}

/* Übergang Start → Fragen */
.paper{position:fixed;left:0;right:0;top:0;z-index:30;height:calc(100vh + 80px);height:calc(100lvh + 80px);background:#FFFFFF;border-radius:var(--r-sheet) var(--r-sheet) 0 0;pointer-events:none;will-change:transform}

/* ---------- Mobil ---------- */
@media (max-width:919.98px){
 .is-flow .hero{display:none}
 .is-flow .side{min-height:100vh;min-height:100svh}
 /* v8.18: Inhalt mittig im Handy, kein leeres Feld unten */
 .stage{display:flex;flex-direction:column;padding-top:8px;padding-bottom:calc(56px + var(--safe-b))}
 .step{width:100%;margin-top:auto;margin-bottom:auto}
 .q-hint{text-wrap:balance}
 /* v8.19: Kontakt passt auf einen Bildschirm */
 .stage:has(.cpage){padding-top:4px;padding-bottom:calc(14px + var(--safe-b))}
 .cpage .q-title{font-size:24px}
 .cpage .q-hint{margin-top:4px;font-size:14px}
 .cpage .chosen{margin-top:12px;padding:9px 12px 10px;border-radius:16px}
 .cpage .chosen-l{font-size:12px}
 .cpage .sum{margin-top:2px;font-size:13.5px;line-height:1.4}
 .cpage .cform{gap:8px;margin-top:12px}
 .cpage .field input{height:50px;padding:19px 14px 5px;border-radius:14px}
 .cpage .field label{left:14px;top:7px;font-size:11.5px}
 .cpage .flabel{margin-top:2px;font-size:14px}
 .cpage .grid3{gap:8px}
 .cpage .pref{flex-direction:row;gap:6px;min-height:48px;padding:6px 4px;border-radius:14px}
 .cpage .pref .ic{width:24px;height:24px;flex:0 0 24px;border-radius:0;background:none;box-shadow:none}
 .cpage .pref .ic svg{width:22px;height:22px}
 .cpage .pref[aria-pressed=true] .ic{color:#FFFFFF}
 .cpage .pref .lbl{font-size:14px}
 .cpage .consent{gap:10px;padding:10px 12px;border-radius:14px;font-size:12.5px;line-height:1.4}
 .cpage .consent input{top:12px;left:14px}
 .cpage .cbox{flex-basis:22px;height:22px}
 .cpage .cform .btn{height:52px;margin-top:2px}
 .cpage .note{margin-top:10px;font-size:12.5px;line-height:1.45}
 .cpage .privacy{margin-top:8px;border-radius:14px}
 .cpage .privacy summary{min-height:42px;font-size:13.5px}
}
@media (max-width:389.98px){
 .cpage .grid3{gap:6px}
 .cpage .pref{gap:4px;padding:6px 2px}
 .cpage .pref .ic{width:18px;height:18px;flex-basis:18px}
 .cpage .pref .ic svg{width:18px;height:18px}
 .cpage .pref .lbl{font-size:13px;letter-spacing:-.01em}
}
@media (max-width:919.98px) and (max-height:720px){
 .cpage .q-title{font-size:22px}
 .cpage .chosen,.cpage .cform{margin-top:10px}
 .cpage .field input{height:46px;padding-top:17px}
 .cpage .field label{top:6px}
 .cpage .pref{min-height:44px}
 .cpage .consent{padding:8px 12px}
 .cpage .cform .btn{height:50px}
 .cpage .note{margin-top:8px}
 .cpage .privacy{margin-top:6px}
 .cpage .privacy summary{min-height:38px}
}
@media (max-width:389.98px){
 .trust-list{flex-wrap:nowrap;gap:0 10px;font-size:12.5px}
 .trust-list svg{width:13px;height:13px;flex-basis:13px}
}
@media (max-width:359.98px){
 :root{--pad:18px}
 .opt{gap:12px;padding-left:10px}
 .ic{flex-basis:48px;width:48px;height:48px}
 .q-title{font-size:25px}
}
@media (max-width:389.98px){
 .prov .logo{width:40px;height:40px;flex-basis:40px}
 .prov .tick{left:35px}
}

/* ---------- Desktop ---------- */
@media (min-width:920px){
 html.is-start{background:#FFFFFF}
 .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(520px,1fr)}
 .hero{position:sticky;top:0;height:100vh;padding:44px 56px 64px}
 .hero-top img{width:93px;height:27px}
 .hero-top span{font-size:15px}
 .signal-art{right:48px;bottom:0;height:64%;gap:14px}
 .signal-art i{width:54px;border-radius:16px 16px 0 0}
 h1{font-size:clamp(54px,5.1vw,84px)}
 .hero-sub{font-size:18px;max-width:30ch}
 .side{margin:0!important;border-radius:0!important;display:flex;flex-direction:column;min-height:100vh}
 .sheet{flex:1;display:flex;flex-direction:column;justify-content:center;padding:64px 56px}
 .sheet-in{width:100%;max-width:440px;margin:0 auto}
 .sheet-title{font-size:16px;margin-bottom:16px}
 .flow{min-height:100vh}
 .bar{height:80px;padding:0 32px 0 24px}
 .stage{padding:32px 56px 72px}
 .step{max-width:460px}
 .q-title{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
 .opt,.btn,.back{transition:none}
 .tick path{transition:none}
}

/* ========== v8.25 (28.10.2026): Startseite Premium – kompakt, Farbverlauf, Knopf beim Text ========== */
/* ---------- v8.22: Startseite clean, ohne Zeichen ---------- */
.signal-art{}
.hero{background:linear-gradient(180deg,#1495F2 0%,#038BEE 55%,#0682E0 100%)}
.hero-copy{margin-top:auto;margin-bottom:auto;padding-top:0}
@media (max-width:919.98px){.hero-copy{transform:translateY(6%)}}
/* ---------- v8.24 Muster: Farbverlauf «Mesh», bewegt ---------- */
.hero{background:#0870D6}
.signal-art{display:block!important;position:absolute;inset:0;right:auto;bottom:auto;width:100%;height:100%;z-index:-2;gap:0;pointer-events:none;filter:blur(70px) saturate(1.15)}
.signal-art i{position:absolute;display:block;width:auto;border-radius:50%;background:none;animation:mesh 18s ease-in-out infinite}
.signal-art i:nth-child(1){width:95%;height:55%;left:-30%;top:-15%;background:#56BCFF;animation-duration:17s}
.signal-art i:nth-child(2){width:90%;height:55%;right:-35%;left:auto;top:20%;background:#0A1A3F;opacity:.85;animation-duration:21s;animation-direction:reverse}
.signal-art i:nth-child(3){width:80%;height:45%;left:-10%;top:55%;background:#038BEE;animation-duration:19s}
.signal-art i:nth-child(4){width:70%;height:40%;right:-20%;left:auto;top:-10%;background:#9ADBFF;opacity:.75;animation-duration:23s;animation-direction:reverse}
@keyframes mesh{0%,100%{transform:translate(0,0) scale(1) rotate(0)}33%{transform:translate(12%,10%) scale(1.15) rotate(20deg)}66%{transform:translate(-10%,6%) scale(.92) rotate(-15deg)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("assets/grain-a1.svg")}
.hero::after{content:"";position:absolute;z-index:-1;left:-60%;top:-20%;width:60%;height:140%;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.16),rgba(255,255,255,0));transform:rotate(18deg);animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,55%{left:-60%}85%,100%{left:130%}}
.hero-copy{margin-top:auto;margin-bottom:auto;padding-top:0}
@media (max-width:919.98px){.hero-copy{transform:translateY(6%)}}
@media (prefers-reduced-motion:reduce){.signal-art i,.hero::after{animation:none}}
/* ---------- v8.25 Muster: Premium, kompakt, Knopf direkt beim Text ---------- */
html.is-start{background:#0A2A6B}
.is-start .app{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;background:#0870D6;padding:calc(88px + var(--safe-t)) 0 calc(40px + var(--safe-b))}
.is-start .hero{position:static;isolation:auto;flex:0 0 auto;min-height:0;height:auto;padding:0 28px;background:none;overflow:visible}
.is-start .hero-top{position:absolute;left:0;right:0;top:calc(24px + var(--safe-t));justify-content:center}
.is-start .hero-copy{margin:0;padding:0;transform:none;text-align:center}
.is-start h1{max-width:12ch;margin:0 auto;font-size:clamp(36px,10.2vw,52px);line-height:1.04;letter-spacing:-.035em;text-shadow:0 2px 30px rgba(10,26,63,.25)}
.is-start .hero-sub{max-width:28ch;margin:16px auto 0;font-size:16px;line-height:1.5;color:rgba(255,255,255,.88)}
.is-start .side{margin:0;border-radius:0;background:none;min-height:0}
.is-start .sheet{padding:30px 28px 0}
.is-start .sheet-in{max-width:340px;margin:0 auto}
.is-start .cta-start{height:58px;border-radius:999px;background:#FFFFFF;color:#0A1A3F;font-size:16.5px;font-weight:600;letter-spacing:-.01em;box-shadow:0 18px 40px -14px rgba(10,26,63,.55),inset 0 -2px 0 rgba(10,26,63,.06);gap:10px}
.is-start .cta-start::after{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("assets/arrow-a1.svg") center/contain no-repeat;mask:url("assets/arrow-a1.svg") center/contain no-repeat;transition:transform .25s var(--ease)}
.is-start .cta-start:active{background:#EAF4FE;transform:scale(.98)}
@media (hover:hover){.is-start .cta-start:hover{background:#F2F8FF}.is-start .cta-start:hover::after{transform:translateX(3px)}}
.is-start .trust-list{margin-top:18px;flex-wrap:nowrap;gap:0 12px;font-size:13px;color:rgba(255,255,255,.92);font-weight:500}
.is-start .sheet-in{max-width:360px}
.is-start .trust-list svg{color:#9ADBFF}
@media (min-width:920px){
 .is-start .app{display:flex;padding:0}
 .is-start .hero-top{left:56px;right:auto;top:44px}
 .is-start h1{font-size:clamp(56px,4.8vw,72px)}
 .is-start .hero-sub{font-size:18px;margin-top:20px}
 .is-start .sheet{flex:0;padding:36px 0 0;display:block}
 .is-start .sheet-in{max-width:380px}
}

/* v8.26 (29.10.2026): Logo + «Abo-Check» mittig direkt über der Headline, nur Startseite */
.is-start .hero-top{position:static;justify-content:center;margin:0 0 26px}
@media (min-width:920px){.is-start .hero-top{position:static;left:auto;top:auto;margin-bottom:34px}}

/* v8.27 (29.10.2026): Logo-Block mittig zwischen oberem Rand und Headline (gleicher Abstand oben/unten), nur Startseite */
.is-start .app{justify-content:flex-start;padding-top:var(--safe-t);padding-bottom:calc(24px + var(--safe-b))}
.is-start .hero{flex:1 1 auto;display:flex;flex-direction:column}
.is-start .hero-top{position:static;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:96px;margin:0}
.is-start .side{flex:1 1 auto}
@media (min-width:920px){.is-start .app{padding:0}.is-start .hero-top{left:auto;top:auto;min-height:120px;margin:0}}

/* v8.28 (29.10.2026): Startseite fein abgestimmt – natelo oben, «Abo-Check» darunter, ruhige Abstände */
.is-start .hero-top{flex-direction:column;gap:9px}
.is-start .hero-top img{width:104px;height:auto}
.is-start .hero-top span{padding:0;border:0;font-size:12.5px;line-height:1;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.is-start h1{line-height:1.06}
.is-start .hero-sub{margin-top:16px}
.is-start .sheet{padding-top:32px}
.is-start .trust-list{margin-top:18px}
@media (min-width:920px){
 .is-start .hero-top{gap:11px}
 .is-start .hero-top img{width:128px}
 .is-start .hero-top span{font-size:13.5px}
 .is-start .hero-sub{margin-top:20px}
 .is-start .sheet{padding-top:36px}
}

/* ===== v8.29 (29.10.2026): Sprachwahl auf der Startseite ===== */
.langs{position:absolute;left:0;right:0;bottom:calc(14px + var(--safe-b));z-index:5;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;margin:0;padding:0 12px}
.langs>svg{flex:0 0 auto;width:15px;height:15px;margin:0 4px 0 2px;color:rgba(255,255,255,.78)}
.lang{margin:0;padding:8px 7px;border:0;border-radius:999px;background:none;color:rgba(255,255,255,.8);font:inherit;font-size:12.5px;line-height:1.2;font-weight:500;letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .2s ease,color .2s ease}
.lang[aria-pressed="true"]{background:#FFFFFF;color:#0A1A3F;font-weight:600;box-shadow:0 6px 16px -8px rgba(10,26,63,.6)}
@media (hover:hover){.lang:hover{background:rgba(255,255,255,.16);color:#FFFFFF}.lang[aria-pressed="true"]:hover{background:#FFFFFF;color:#0A1A3F}}
.lang:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.is-flow .langs{display:none}
.is-start .app{padding-bottom:calc(80px + var(--safe-b))}
@media (min-width:920px){.langs{bottom:26px}.lang{font-size:13.5px}.is-start .app{padding-bottom:84px}}
html.lat-ext body,html.lat-ext button,html.lat-ext input{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.is-start .trust-list{flex-wrap:wrap;row-gap:4px}
@media (min-width:920px){.is-start h1{max-width:14ch}.is-start .sheet-in{max-width:440px}}

/* ========== v8.31 (29.10.2026): Logik-Check + Feedback Florat ========== */
/* Betrag: leer («–»), bis gezogen oder getippt; die Zahl ist ein Eingabefeld (genauer Franken) */
.amount-val{cursor:text}
.amt-in{width:3.6ch;min-width:0;margin:0;padding:0 4px;border:0;border-radius:14px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #D9E1EB;color:var(--ink);font:inherit;font-size:50px;line-height:1.12;font-weight:700;letter-spacing:-.04em;text-align:center;font-variant-numeric:tabular-nums;outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .2s ease}
.amt-in::placeholder{color:#AEB6C4;opacity:1}
.amt-in:focus{box-shadow:inset 0 0 0 2px var(--blue)}
.amount[data-touched=false] .range::-webkit-slider-thumb{opacity:.6}
.amount[data-touched=false] .range::-moz-range-thumb{opacity:.6}
.range-ends{align-items:center}
.amount-tip{font-size:12.5px;font-weight:600;color:var(--blue);transition:opacity .25s ease}
.amount[data-touched=true] .amount-tip{opacity:0}
#amount-err{margin-top:10px}
.amount + .err + .btn{margin-top:16px}
/* Danke: nächster Schritt + Teilen */
.next{margin-top:12px;padding:14px 18px;border-radius:var(--r-opt);box-shadow:inset 0 0 0 1.5px var(--line)}
.next-l{font-size:13px;font-weight:600;color:var(--blue)}
.next-t{margin-top:4px;font-size:15px;line-height:1.5}
.share{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--ink-2)}
.share .linkbtn{margin-top:2px;color:var(--ink);font-weight:600}
.end.done .btn.wa{margin-top:14px}
@media (max-width:919.98px) and (max-height:720px){
 .end-sig{height:44px;margin:0 0 16px}
 .done .q-hint{margin-top:6px}
 .done-box,.next{padding:12px 16px}
 .done-box{margin-top:14px}
 .share{margin-top:16px;padding-top:12px}
 .cpage .q-hint{font-size:13.5px;line-height:1.4}
 .cpage .chosen{padding:8px 12px 9px}
 .cpage .sum{line-height:1.35}
 .cpage .cform{gap:7px}
 .cpage .consent{padding:7px 12px}
 .cpage .note{margin-top:6px}
}
/* Kontakt: Kontaktweg zuerst */
.cpage .grid3{margin-top:0}
/* Startseite: kleine weisse Texte lesbar (Abdunkelung oben/unten und weich hinter Logo und Haken, Farbverlauf bleibt) */
.is-start .app::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,30,85,.42) 0%,rgba(5,30,85,0) 26%,rgba(5,30,85,0) 70%,rgba(5,30,85,.45) 100%)}
.is-start .hero-top span{color:#FFFFFF}
.lang{color:#FFFFFF;min-height:36px}
.langs>svg{color:#FFFFFF}
.is-start .trust-list{color:#FFFFFF}
@media (max-width:419.98px){.is-start .trust-list{font-size:12.5px;gap:4px 9px}}
.is-start .hero-sub{max-width:34ch}
.is-start .hero-top span{position:relative}
.is-start .hero-top span::before{content:"";position:absolute;left:50%;top:50%;width:160vw;max-width:900px;height:240px;transform:translate(-50%,-62%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,30,85,.5),rgba(5,30,85,.18) 55%,rgba(5,30,85,0))}
.is-start .trust-list{position:relative}
.is-start .trust-list::before{content:"";position:absolute;left:50%;top:50%;width:120%;height:300%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(5,30,85,.5),rgba(5,30,85,0))}

/* v8.34: Fortschritt oben rechts in langen Sprachen (z. B. Shqip «Pothuajse gati») auf kleinen Handys nicht ans Logo */
@media (max-width:389.98px){.sig{gap:6px;padding-right:2px}.sig-txt{min-width:0;font-size:12px}}

/* ========== v8.35 «Turbo»: Thema direkt auf der Startseite (Kacheln) ========== */
.tstart{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tst{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:108px;margin:0;padding:14px 6px 12px;border:1px solid rgba(255,255,255,.38);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);color:#FFFFFF;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 18px 36px -20px rgba(10,26,63,.75),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .25s var(--ease),background-color .25s ease,color .25s ease}
.tst-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:#FFFFFF;color:var(--blue);box-shadow:0 10px 20px -10px rgba(10,26,63,.55)}
.tst-ic svg{width:29px;height:29px}
.tst-l{font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.005em;text-align:center}
.tst::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 22px rgba(255,255,255,.35);opacity:0;animation:tstGlow 4.8s ease-in-out infinite;pointer-events:none}
.tst:nth-child(2)::after{animation-delay:1.6s}
.tst:nth-child(3)::after{animation-delay:3.2s}
@keyframes tstGlow{0%,62%,100%{opacity:0}72%{opacity:1}84%{opacity:.25}}
.tst:active{transform:scale(.96);background:#FFFFFF;color:#0A1A3F}
@media (hover:hover){.tst:hover{background:#FFFFFF;color:#0A1A3F;transform:translateY(-3px)}}
.tst:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (max-height:720px){.tst{min-height:94px;gap:8px;padding:11px 4px 10px}.tst-ic{width:40px;height:40px}.tst-ic svg{width:25px;height:25px}}
@media (min-width:920px){.tstart{gap:14px}.tst{min-height:128px}.tst-l{font-size:15px}}
@media (prefers-reduced-motion:reduce){.tst::after{animation:none}}
/* Anbieter-Mehrfachwahl: Weiter-Knopf unter den Kacheln */
#multi-err{margin-top:10px}
.opts + .other + .err + .btn,.opts + .other + #multi-err + #multi-next{margin-top:16px}
#multi-next{margin-top:16px}
/* Sehr kleine Handys (unter 340 px): Fortschritt nur als Balken, sonst stösst «Pothuajse gati» ans Logo */
@media (max-width:339.98px){.sig-txt{display:none}}

/* ========== v8.37: eine übersichtliche Seite (Anbieter, Preis ziehen, Reisen) – gut lesbar ========== */
.stage:has(.apage){padding-top:4px}
.apage .q-title{font-size:28px}
.apage .q-hint{margin-top:6px;font-size:15.5px;color:var(--ink-2)}
.blk{margin-top:26px}
.blk + .blk{padding-top:22px;border-top:1px solid #E6EBF2}
.blk-h{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.blk-n{flex:0 0 26px;width:26px;height:26px;display:grid;place-items:center;margin-top:1px;border-radius:50%;background:var(--blue);color:#FFFFFF;font-size:14px;font-weight:700}
.blk-l{font-size:18px;line-height:1.3;font-weight:600;color:var(--ink);letter-spacing:-.015em}
.blk-s{margin-top:2px;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.apage .grid2{gap:10px}
.apage .prov{min-height:60px;font-size:15.5px}
.apage .amount{margin-top:0}
.chip{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 10px;border:0;border-radius:16px;background:var(--surface);color:var(--ink);font:inherit;font-size:15px;font-weight:500;line-height:1.25;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.chip .fill{position:absolute;inset:0;z-index:-1;background:var(--blue);clip-path:circle(0 at 50% 50%)}
.chip[aria-pressed="true"]{color:#FFFFFF;font-weight:600}
.chip[aria-pressed="true"] .fill{clip-path:none}
.chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chip-unk{display:flex;width:100%;min-height:48px;margin-top:10px}
.apage .other{margin-top:10px}
.apage .err{margin-top:8px}
.apage #abo-next{margin-top:28px}
@media (max-width:389.98px){.blk-l{font-size:17px}.chip{font-size:14.5px}.apage .prov{font-size:15px}}

/* ========== v8.39: clean wie Apple – weiss, grosse Schrift, feine Rahmen, Segment-Schalter, Knopf fix unten ========== */
.is-flow .stage{background:#FFFFFF}
.bar{background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.is-flow .q-title{font-weight:700;letter-spacing:-.035em}
.stage:has(.topic) .q-title,.apage .q-title{font-size:34px;line-height:1.08}
.stage:has(.topic) .q-hint,.apage .q-hint{margin-top:8px;font-size:17px;line-height:1.4;color:#6E7787}
.stage:has(.apage){padding-bottom:0}
.blk{margin-top:44px;padding:0;border:0;background:none;box-shadow:none}
.blk + .blk{padding-top:0;border-top:0}
.ah{margin:0 0 16px;font-size:22px;line-height:1.25;font-weight:600;letter-spacing:-.022em;color:#8A93A3}
.ah b{font-weight:600;color:var(--ink)}
/* Kacheln: weiss, feine Linie; gewählt = blauer Rahmen + blauer Haken */
.is-flow .opt{background:#FFFFFF;box-shadow:inset 0 0 0 1px #D5DAE1;transition:box-shadow .2s ease,transform .1s ease-out}
@media (hover:hover){.is-flow .opt:hover{background:#FFFFFF;box-shadow:inset 0 0 0 1px #A9B2BF}}
.is-flow .opt:active{transform:scale(.97)}
.is-flow .opt .fill{display:none}
.is-flow .opt[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 0 0 2px var(--blue)}
.is-flow .opt[aria-pressed=true] .lbl small{color:var(--ink-2)}
.is-flow .opt[aria-pressed=true] .chev{color:var(--blue)}
.is-flow .opt .tick{background:var(--blue);color:#FFFFFF}
.is-flow .prov .tick{box-shadow:0 0 0 2px #FFFFFF}
.is-flow .topic .ic{background:#F1F4F8;box-shadow:none;color:var(--blue)}
.is-flow .cpage .pref[aria-pressed=true] .ic{color:var(--blue)}
.stage:has(.topic) .opt.topic{min-height:84px}
.stage:has(.topic) .opt.topic .lbl{font-size:17px;font-weight:600}
.apage .grid2{gap:10px}
.apage .prov{min-height:62px;border-radius:16px;font-size:16px}
/* Preis */
.apage .amount{margin-top:0;padding:0;background:none;border-radius:0}
.apage .amt-in{background:#F1F4F8;box-shadow:none;border-radius:14px;font-weight:700;letter-spacing:-.04em}
.apage .amt-in:focus{background:#FFFFFF;box-shadow:inset 0 0 0 2px var(--blue)}
.unk{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:10px 0;border:0;background:none;color:var(--blue);font:inherit;font-size:16px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent}
.unk .fill{display:none}
.unk::before{content:"";flex:0 0 20px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B8C0CC;transition:background-color .2s ease,box-shadow .2s ease}
.unk::before{content:none}
/* Reisen: Segment-Schalter wie iOS */
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:3px;border-radius:14px;background:#EEF1F5}
.seg-b{position:relative;z-index:1;height:48px;margin:0;border:0;border-radius:11px;background:none;color:var(--ink);font:inherit;font-size:16px;font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .1s ease-out}
.seg-b:active{transform:scale(.96)}
.seg-b .fill{display:none}
.seg-b[aria-pressed="true"]{font-weight:600}
.seg-b:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.seg-t{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:11px;background:#FFFFFF;box-shadow:0 3px 8px rgba(10,26,63,.12),0 0 0 .5px rgba(10,26,63,.06);opacity:0;transition:transform .45s cubic-bezier(.25,1,.35,1),opacity .2s ease}
.seg:has(.seg-b[aria-pressed="true"]) .seg-t{opacity:1}
.seg:has(.seg-b:nth-of-type(2)[aria-pressed="true"]) .seg-t{transform:translateX(100%)}
.seg:has(.seg-b:nth-of-type(3)[aria-pressed="true"]) .seg-t{transform:translateX(200%)}
/* Weiter: fix unten auf Glas, grau bis alles da ist */
.abar{position:sticky;bottom:0;z-index:4;margin:40px calc(-1 * var(--pad)) 0;padding:12px var(--pad) calc(12px + var(--safe-b));background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.apage .abar #abo-next{margin-top:0}
#abo-next{transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
#abo-next.is-wait{background:#E8ECF1;color:#7B8596;box-shadow:none}
#abo-next.is-ready{background:var(--blue);color:#FFFFFF}
/* Einblenden: Titel sofort, Abschnitte beim Scrollen */
.apage .blk{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.apage .blk.in{opacity:1;transform:none}
.apage > .q-title,.apage > .q-hint{animation:riseIn .7s cubic-bezier(.16,1,.3,1) both}
.apage > .q-hint{animation-delay:.06s}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (max-width:389.98px){.stage:has(.topic) .q-title,.apage .q-title{font-size:31px}.ah{font-size:20px}}
@media (prefers-reduced-motion:reduce){.apage .blk{transform:none;transition:opacity .3s ease}.apage > .q-title,.apage > .q-hint{animation:none}.seg-t{transition:opacity .2s ease}}
@media (prefers-reduced-transparency:reduce){.bar,.abar{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ========== v8.40: Reisen mit Icons, clean ========== */
.trv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.is-flow .opt.trv{flex-direction:column;align-items:center;justify-content:flex-start;gap:0;min-height:0;padding:16px 6px 14px;border-radius:18px;text-align:center}
.trv-ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:14px;background:#F1F4F8;color:var(--ink);transition:background-color .2s ease,color .2s ease}
.trv-ic svg{width:28px;height:28px}
.trv-l{font-size:16px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.trv-s{margin-top:3px;font-size:12.5px;line-height:1.3;color:var(--ink-2)}
.is-flow .opt.trv[aria-pressed=true] .trv-ic{background:var(--blue);color:#FFFFFF}
.opt.trv .tick{position:absolute;top:8px;right:8px;width:20px;height:20px}
.opt.trv .tick svg{width:12px;height:12px}
.apage .amt-in::placeholder{color:#B4BCC8}
.trv-ic .x{stroke:#F1F4F8}
.is-flow .opt.trv[aria-pressed=true] .trv-ic .x{stroke:var(--blue)}
@media (max-width:359.98px){.trv-s{font-size:11.5px}.trv-l{font-size:15px}}

/* ========== v8.41: Computer – Formular breiter, Inhalt mittig, auf grossen Bildschirmen alles auf einen Blick ========== */
@media (min-width:920px){
 .is-flow .app{grid-template-columns:minmax(0,1fr) minmax(560px,1.25fr)}
 .is-flow .stage{display:flex;flex-direction:column}
 .is-flow .step{width:100%;max-width:560px;margin:auto}
 .is-flow .bar{background:#FFFFFF;-webkit-backdrop-filter:none;backdrop-filter:none}
 .blk{margin-top:34px}
 .abar{margin-top:32px}
 .stage:has(.apage){padding-bottom:0}
 .apage .prov{cursor:pointer}
}
@media (min-width:1200px){
 .is-flow .step{max-width:640px}
 /* Themenwahl: 3 Karten nebeneinander */
 .stage:has(.topic) .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
 .stage:has(.topic) .opt.topic{flex-direction:column;align-items:flex-start;gap:14px;min-height:178px;padding:20px 18px}
 .stage:has(.topic) .opt.topic .chev{position:absolute;top:18px;right:14px}
 .stage:has(.topic) .opt.topic .lbl{font-size:18px}
 /* Anbieter: 4 nebeneinander, Logo oben */
 .apage .grid2{grid-template-columns:repeat(4,1fr);gap:12px}
 .apage .prov{flex-direction:column;justify-content:center;gap:9px;min-height:104px;padding:14px 8px;text-align:center}
 .apage .prov .logo{width:42px;height:42px;flex:0 0 42px}
 .is-flow .apage .prov .tick{left:auto;right:9px;top:9px;width:20px;height:20px}
 /* Preis und Reisen nebeneinander */
 .apage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:36px}
 .apage > *{grid-column:1 / -1}
 .apage:has([data-blk="usage"]) > [data-blk="amt"]{grid-column:1}
 .apage:has([data-blk="usage"]) > [data-blk="usage"]{grid-column:2}
 .apage .amt-in{font-size:46px}
}

/* ========== v8.42: Schritte 1–2–3 sichtbar, erledigt = blauer Haken ========== */
.ahw{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.ahw .ah{margin:0}
.an{position:relative;flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;margin-top:-2px;border-radius:50%;background:var(--ink);color:#FFFFFF;font-size:15px;font-weight:700;transition:background-color .25s ease}
.an-n{transition:opacity .2s ease,transform .3s ease}
.an-ok{position:absolute;inset:7px;width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.5,.5,1)}
.blk.is-done .an{background:var(--blue)}
.blk.is-done .an-n{opacity:0;transform:scale(.4)}
.blk.is-done .an-ok{opacity:1;transform:none}
@media (max-width:389.98px){.an{flex-basis:28px;width:28px;height:28px;font-size:14px}.an-ok{inset:6px}}
@media (prefers-reduced-motion:reduce){.an,.an-n,.an-ok{transition:none}}

/* ========== v8.43: schöner – Flaggen, Geräte, ruhige Schritte, keine Plaketten ========== */
/* Schritte */
.ahw{display:block;margin-bottom:16px}
.aey{display:flex;align-items:center;gap:0;margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--blue)}
.aey-ok{width:0;height:14px;margin-right:0;opacity:0;transition:width .25s ease,margin .25s ease,opacity .2s ease}
.blk.is-done .aey-ok{width:14px;margin-right:6px;opacity:1}
/* Kacheln: nur Rahmen zeigt die Wahl, keine Haken-Plaketten */
.apage .prov .tick,.opt.trv .tick{display:none}
.is-flow .opt{border-radius:16px}
.is-flow .opt[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--blue),0 8px 22px -14px rgba(3,139,238,.7)}
.apage .prov .logo{box-shadow:none}
.apage .prov .logo.neutral{background:#F4F6F9}
/* Reisen: Flaggen */
.trv-ic,.is-flow .opt.trv[aria-pressed=true] .trv-ic{width:40px;height:40px;margin-bottom:12px;border-radius:10px;background:none;box-shadow:0 4px 10px -4px rgba(10,26,63,.35)}
.trv-ic svg{width:40px;height:40px;display:block}
/* Themenwahl: Geräte als volle Formen auf zartem Blau */
.is-flow .topic .ic{width:56px;height:56px;flex:0 0 56px;border-radius:16px;background:linear-gradient(160deg,#F2F8FF,#E2EFFD);box-shadow:none}
.is-flow .topic .ic svg{width:36px;height:36px}
.is-flow .topic .chev{color:#B6BEC9}
/* Preis: grosse Zahl ohne Kasten, feine Linie darunter */
.apage .amt-in{background:transparent;border-radius:0;box-shadow:inset 0 -2px 0 #D5DAE1;padding:0 2px}
.apage .amt-in:focus{background:transparent;box-shadow:inset 0 -2px 0 var(--blue)}

/* ========== v8.44: Kontaktseite klar – Titel über den Feldern, sichtbare Rahmen, grössere Schrift ========== */
.stage:has(.kpage){padding-top:4px}
.kpage .q-title{font-size:30px;line-height:1.1}
.kpage .q-hint{margin-top:6px;font-size:16px;line-height:1.4;color:#6E7787}
.kpage .chosen{margin-top:20px;padding:14px 16px;border-radius:16px;background:#F5F8FC}
.kpage .chosen-l{font-size:13px;font-weight:600;color:var(--blue)}
.kpage .sum{margin-top:4px;font-size:15px;line-height:1.45;color:var(--ink)}
.kpage .cform{display:block;margin-top:0}
.kblk{margin-top:30px}
.kblk .ah{margin:0 0 14px}
.kpage .grid3{gap:10px}
.is-flow .kpage .opt.pref{flex-direction:column;justify-content:center;gap:10px;min-height:104px;padding:16px 6px 14px;text-align:center}
.is-flow .kpage .pref .ic{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:linear-gradient(160deg,#F2F8FF,#E2EFFD);box-shadow:none}
.kpage .pref .ic svg{width:30px;height:30px}
.kpage .pref .lbl{flex:0 0 auto;font-size:15px;font-weight:600}
.fld{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.kblk .ah + .fld{margin-top:0}
.fld label{font-size:15px;font-weight:600;color:var(--ink)}
.fld input{width:100%;height:56px;margin:0;padding:0 16px;border:0;border-radius:14px;background:#FFFFFF;box-shadow:inset 0 0 0 1.5px #C5CDD8;color:var(--ink);font:inherit;font-size:17px;font-weight:500;outline:none;-webkit-appearance:none;appearance:none;transition:box-shadow .2s ease}
.fld input::placeholder{color:#A3ACB9;font-weight:400}
.fld input:focus{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px rgba(3,139,238,.14)}
.fld input[aria-invalid=true]{box-shadow:inset 0 0 0 2px #D92D20}
.kpage .err{margin:6px 2px 0}
.kpage .consent{margin-top:26px;padding:16px;gap:12px;border-radius:16px;background:#F5F8FC;font-size:14px;line-height:1.5;color:#3D4757}
.kpage .cbox{flex-basis:26px;height:26px;border-radius:8px;box-shadow:inset 0 0 0 2px #9AA5B4}
.kpage .consent input{top:17px;left:17px;width:26px;height:26px}
.kpage .kbar{margin-top:20px}
.kpage #send{margin-top:0;height:58px;font-size:17px}
.kpage .note{margin-top:18px;font-size:14px;line-height:1.5}
.kpage .privacy{margin-top:12px}
@media (max-width:389.98px){.kpage .q-title{font-size:27px}.is-flow .kpage .opt.pref{min-height:96px}.kpage .pref .lbl{font-size:14px}}


/* ========== v8.46: hell und clean ========== */
.is-flow .stage{background:#FFFFFF}
/* Schritt-Titel */
.sh{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.sh.plain{display:block}
.sh-n{position:relative;flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;margin-top:-1px;border-radius:50%;background:#EDF5FE;color:var(--blue);font-size:15px;font-weight:700;transition:background-color .3s ease,color .3s ease}
.sh-num{transition:opacity .2s ease,transform .3s ease}
.sh-ok{position:absolute;inset:8px;width:16px;height:16px;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .35s cubic-bezier(.3,1.5,.5,1)}
.blk.is-done .sh-n{background:var(--blue);color:#FFFFFF}
.blk.is-done .sh-num{opacity:0;transform:scale(.4)}
.blk.is-done .sh-ok{opacity:1;transform:none}
.sh-x{min-width:0}
.sh-t{margin:0;font-size:20px;line-height:1.25;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.sh-s{margin-top:3px;font-size:15px;line-height:1.4;color:#6E7787}
.blk{margin-top:40px}
.apage .blk[data-blk="prov"]{margin-top:26px}
.kblk .sh{margin-bottom:14px}
/* Kacheln: weiss, feine Linie, Auswahl = blauer Rahmen + weicher Schatten */
.is-flow .opt{background:#FFFFFF;box-shadow:inset 0 0 0 1px #E1E6EC}
@media (hover:hover){.is-flow .opt:hover{background:#FFFFFF;box-shadow:inset 0 0 0 1px #B9C2CE}}
.is-flow .opt[aria-pressed=true],.is-flow .opt[aria-pressed=true]:hover{box-shadow:inset 0 0 0 2px var(--blue),0 10px 26px -14px rgba(3,139,238,.65)}
.is-flow .opt[aria-pressed=true]{animation:selPop .38s cubic-bezier(.3,1.4,.5,1)}
@keyframes selPop{0%{transform:scale(.96)}100%{transform:none}}
/* Icons im App-Stil */
.is-flow .topic .ic,.is-flow .kpage .pref .ic{background:none;box-shadow:none;border-radius:0}
.is-flow .topic .ic{width:48px;height:48px;flex:0 0 48px}
.is-flow .topic .ic svg{width:48px;height:48px;filter:drop-shadow(0 6px 10px rgba(10,26,63,.16))}
.is-flow .kpage .pref .ic{width:44px;height:44px;flex:0 0 44px}
.is-flow .kpage .pref .ic svg{width:44px;height:44px;filter:drop-shadow(0 6px 10px rgba(10,26,63,.16))}
.trv-ic,.is-flow .opt.trv[aria-pressed=true] .trv-ic{box-shadow:0 6px 12px -6px rgba(10,26,63,.35)}
/* Knopf */
#abo-next.is-wait{background:#EEF1F5;color:#8A94A6;box-shadow:none}
/* Check-Karte, hell */
.tkt{position:sticky;top:calc(58px + var(--safe-t));z-index:3;margin:20px 0 0;padding:12px 14px 13px;border-radius:18px;background:rgba(246,248,251,.92);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);box-shadow:inset 0 0 0 1px #E6EAF0}
.tkt.fin{position:relative;top:auto}
.tkt-h{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--ink)}
.tkt-t{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkt-dot{display:none}
.tkt-p{flex:0 0 auto;color:var(--blue);font-variant-numeric:tabular-nums}
.tkt-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.tkt-c{display:inline-flex;align-items:center;max-width:100%;height:28px;padding:0 11px;border-radius:99px;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkt-c.off{background:#ECEFF3;color:#9AA4B3}
.tkt-c.on{background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 1px #D9DFE7}
.tkt-c.pop{animation:chipIn .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes chipIn{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
.tkt-bar{height:3px;margin-top:11px;border-radius:99px;background:#E6EAF0;overflow:hidden}
.tkt-bar i{display:block;height:100%;border-radius:inherit;background:var(--blue);transition:width .7s cubic-bezier(.16,1,.3,1)}
@media (min-width:920px){.tkt{top:80px}}
/* Check-Moment, hell */
.scan{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);color:var(--ink);animation:scanIn .3s ease both}
.scan.out{animation:scanOut .4s ease forwards}
@keyframes scanIn{from{opacity:0}to{opacity:1}}
@keyframes scanOut{to{opacity:0}}
.scan-in{width:100%;max-width:340px;text-align:center}
.scan-orb{position:relative;width:120px;height:120px;margin:0 auto 24px}
.scan-orb span{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(3,139,238,.45);animation:orb 2.1s ease-out infinite}
.scan-orb span:nth-child(2){animation-delay:.7s}
.scan-orb span:nth-child(3){animation-delay:1.4s}
@keyframes orb{0%{transform:scale(.45);opacity:1}100%{transform:scale(1.2);opacity:0}}
.scan-orb b{position:absolute;inset:30px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding-bottom:18px;border-radius:50%;background:var(--blue);box-shadow:0 14px 30px -10px rgba(3,139,238,.7)}
.scan-orb i{display:block;width:6px;border-radius:2px;background:#FFFFFF;transform-origin:50% 100%;animation:bars 1.1s ease-in-out infinite alternate}
.scan-orb i:nth-child(1){height:8px}.scan-orb i:nth-child(2){height:13px;animation-delay:.15s}.scan-orb i:nth-child(3){height:18px;animation-delay:.3s}.scan-orb i:nth-child(4){height:23px;animation-delay:.45s}
@keyframes bars{from{transform:scaleY(.45)}to{transform:none}}
.scan-t{font-size:20px;font-weight:600;letter-spacing:-.015em}
.scan-l{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px;text-align:left}
.scan-l li{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;background:#F4F6F9;font-size:15px;font-weight:500;opacity:0;transform:translateY(10px);animation:scanLi .45s cubic-bezier(.16,1,.3,1) var(--d) forwards}
.scan-l li:last-child{background:var(--blue);color:#FFFFFF;font-weight:600}
.scan-ok{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#FFFFFF}
.scan-l li:last-child .scan-ok{background:#FFFFFF;color:var(--blue)}
.scan-ok svg{width:13px;height:13px}
@keyframes scanLi{to{opacity:1;transform:none}}
@media (max-width:389.98px){.sh-t{font-size:19px}}
@media (prefers-reduced-motion:reduce){.is-flow .opt[aria-pressed=true],.tkt-c.pop,.scan-orb span,.scan-orb i,.sh-n,.sh-num,.sh-ok{animation:none;transition:none}.scan-l li{animation:none;opacity:1;transform:none}.tkt-bar i{transition:none}}

/* ========== v8.47: einheitliche Icons, mehr Platz auf dem iPhone, Kontakt kompakt ========== */
/* Icons: zartes Blau, Glyphe blau; gewählt = blau mit weisser Glyphe */
.is-flow .topic .ic{width:48px;height:48px;flex:0 0 48px;border-radius:14px;background:#EAF4FE;color:var(--blue);box-shadow:none;transition:background-color .2s ease,color .2s ease}
.is-flow .topic .ic svg{width:27px;height:27px;filter:none}
.is-flow .opt.topic[aria-pressed=true] .ic{background:var(--blue);color:#FFFFFF}
.is-flow .apage .prov .logo.neutral{background:#EAF4FE;color:var(--blue)}
.is-flow .apage .prov .logo.neutral svg{width:22px;height:22px}
.is-flow .apage .prov[aria-pressed=true] .logo.neutral{background:var(--blue);color:#FFFFFF}
/* Kontaktweg: eine kompakte Reihe */
.is-flow .kpage .opt.pref{flex-direction:column;justify-content:center;gap:4px;min-height:66px;padding:8px 4px;border-radius:14px}
.is-flow .kpage .pref .ic{width:22px;height:22px;flex:0 0 22px;border-radius:0;background:none;color:var(--blue)}
.is-flow .kpage .pref .ic svg{width:22px;height:22px;filter:none}
.kpage .pref .lbl{font-size:14px;font-weight:600}
.kpage .kpref + .err + #email-wrap,.kpage #email-wrap{margin-top:14px}
/* Zusammenfassung: eine Zeile */
.ksum{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:11px 14px;border-radius:14px;background:#F2F8FE;font-size:14.5px;line-height:1.45;color:var(--ink)}
.ksum b{font-weight:600}
.ksum-ok{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--blue);color:#FFFFFF}
.ksum-ok svg{width:12px;height:12px}
.kpage .kblk{margin-top:26px}
/* iPhone: weniger Luft oben, kleinere Knopfleiste */
@media (max-width:919.98px){
 .apage .q-title,.kpage .q-title{font-size:28px;line-height:1.1}
 .apage .q-hint,.kpage .q-hint{margin-top:4px;font-size:15px}
 .apage .blk[data-blk="prov"]{margin-top:22px}
 .blk{margin-top:32px}
 .sh{margin-bottom:12px}
 .apage .grid2{gap:8px}
 .apage .prov{min-height:56px}
 .abar{padding-top:10px;padding-bottom:calc(10px + var(--safe-b))}
 .apage .abar #abo-next,.kpage #send{height:52px}
 .kpage .consent{margin-top:20px}
}
@media (max-width:389.98px){.apage .q-title,.kpage .q-title{font-size:26px}}
@media (max-width:359.98px){.apage .prov .name{font-size:14px}.apage .prov{gap:8px;padding-left:8px;padding-right:6px}}
/* Leisten fast deckend: nichts scheint durch */
.is-flow .bar{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.abar{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Kontakt: Knopf am Ende des Formulars (klebt nicht, verdeckt nichts, auch nicht mit Tastatur) */
.kpage .kbar{position:static;margin:22px 0 0;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* Weiter-Knopf: sagt, was noch fehlt; gut lesbar */
#abo-next.is-wait{background:#EEF1F5;color:#4E596B;font-weight:600}
/* «Weiss ich nicht» als ruhige Kachel wie die anderen */
.unk{display:flex;justify-content:center;width:100%;min-height:48px;margin-top:12px;padding:0 14px;border-radius:14px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #E1E6EC;color:var(--ink);font-weight:500;transition:box-shadow .2s ease}
.unk[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--blue),0 10px 26px -14px rgba(3,139,238,.65)}
@media (hover:hover){.unk:hover{box-shadow:inset 0 0 0 1px #B9C2CE}.unk[aria-pressed="true"]:hover{box-shadow:inset 0 0 0 2px var(--blue)}}

/* ========== v8.48: Haken «Weiss ich nicht» als SVG (CSP-sicher, kein data:-Bild) ========== */
.unk-c{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #B8C0CC;color:transparent;transition:background-color .2s ease,box-shadow .2s ease,color .2s ease}
.unk-c svg{width:13px;height:13px}
.unk[aria-pressed="true"] .unk-c{background:var(--blue);box-shadow:none;color:#FFFFFF}
/* v8.48 Sprachen: lange Wörter passen in schmale Kacheln (z. B. «Switzerland», «Aucune idée»), Knopf «Noch: …» einzeilig */
.is-flow .opt.trv{padding-left:4px;padding-right:4px}
.apage .prov .name{white-space:normal;line-height:1.2}
@media (max-width:389.98px){.apage .prov{padding-right:6px}}
@media (max-width:374.98px){.trv-l{font-size:15.5px}}
@media (max-width:359.98px){.trv-l{font-size:13.5px}#abo-next.is-wait .abo-next-t{font-size:15px}.apage .prov{padding-right:2px;gap:7px}}