/* Bezahlseiten (Preise, Mein Abo, Kündigen, Danke, Kündigung bestätigt). Ergänzt style.css, überschreibt nur Bezahl-Klassen.
   Farben und Schriften kommen aus style.css (:root). Handy ab 360 px ohne horizontales Überlaufen, alle Knöpfe mind. 44 px hoch. */

/* ---------- Grundgerüst ---------- */
body.bezahl{overflow-x:hidden}
body.bezahl *,body.bezahl *::before,body.bezahl *::after{box-sizing:border-box}
body.bezahl .kopf{gap:16px 24px}
body.bezahl nav a.an{color:var(--text)}
body.bezahl .kopf .mein-abo{margin-left:auto;border:1px solid #ffa00066;border-radius:999px;padding:9px 16px;color:var(--amber);font:600 13px 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
body.bezahl .kopf .mein-abo:hover,body.bezahl .kopf .mein-abo.an{background:#ffa00018}
.bz{padding-top:28px}
.bz h1{line-height:1.05;letter-spacing:-.02em;margin:0 0 .35em;text-wrap:balance}
.bz h1 em{font-style:normal;background:linear-gradient(90deg,var(--lila),var(--amber));-webkit-background-clip:text;background-clip:text;color:transparent}
.bz .lead{max-width:700px}
.bz .lead b{color:var(--text);font-weight:600}
.bz section{scroll-margin-top:24px}
.bz .kicker{margin-bottom:10px}

/* ---------- Umschalter ---------- */
.umschalter-zeile{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 0}
.umschalter{margin:0}
.umschalter small{display:inline-block;padding:2px 8px;border-radius:999px;background:#2a1600;color:var(--amber);font-size:11px;letter-spacing:.02em}
.umschalter button[aria-pressed=true] small{background:#2a1600;color:#ffd27a}
.umschalter-hinweis{color:var(--leise);font-size:13px;margin:0}

/* ---------- Tarifkarten ---------- */
.karten{margin:24px 0 12px;align-items:stretch}
.tarif{padding:26px 22px 24px;border-radius:16px;clip-path:none;transition:border-color .3s,transform .4s var(--weich),box-shadow .4s}
.tarif:hover{transform:translateY(-2px)}
.tarif.hervor{box-shadow:0 20px 60px -30px #ffa00066}
.tarif.gewaehlt{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber),0 20px 60px -30px #ffa00088}
.tarif .band{position:absolute;top:-1px;right:18px;padding:6px 12px;border-radius:0 0 10px 10px;background:linear-gradient(135deg,var(--lila2),var(--amber));color:#fff;font:700 11px 'Space Grotesk',sans-serif;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 6px 20px #7b1fa266}
.tarif .zusatz{min-height:0;margin-bottom:12px}
.tarif .preis{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.tarif .preis-neben{min-height:1.4em;font-variant-numeric:tabular-nums}
.tarif .preis-neben s{color:#8d8aa3;margin-right:6px}
.tarif .fuer{color:#cfcde0;font-size:15px;margin:0 0 16px;line-height:1.5}
.tarif ul{font-size:15px;line-height:1.45}
.tarif li{padding:6px 0 6px 26px}
.tarif li b{color:var(--text);font-weight:600}
.tarif li::before{top:.9em}
.tarif .klein{color:var(--leise);font-size:12.5px;margin:12px 0 0;line-height:1.5}
.tarif .knopf,.tarif .knopf-leise{margin-top:auto}
.tarif .knopf[aria-pressed=true]{background:#ffd27a}
.tarif.aus{opacity:.6}
.tarif.aus .band{filter:grayscale(1)}
.tarif[hidden]{display:none}
.tarif .knopf-leise[aria-pressed=true]{border-color:var(--amber);color:var(--amber)}
.tarif[data-tarif=test]{border-color:#c084e855}
.pro-hinweis{margin:10px 0 0;color:var(--leise);font-size:13px;line-height:1.5}
.pro-hinweis[hidden]{display:none}
.schluessel-fakten{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:6px;color:#cfcde0;font-size:14.5px;line-height:1.5}
.schluessel-fakten li{position:relative;padding-left:22px}
.schluessel-fakten li::before{content:"";position:absolute;left:2px;top:.75em;width:9px;height:5px;border-left:2px solid #6fd49a;border-bottom:2px solid #6fd49a;transform:rotate(-45deg)}
.schluessel-fakten b{color:var(--text);font-weight:600}
[data-nur-abo][hidden],[data-nur-test][hidden]{display:none}

/* ---------- Vertrauensleiste ---------- */
.vertrauen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 0;padding:0;list-style:none}
.vertrauen li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--linie);border-radius:14px;background:#ffffff06;color:#cfcde0;font-size:14px;line-height:1.45}
.vertrauen li svg{flex:none;width:22px;height:22px;color:var(--amber);margin-top:1px}
.vertrauen li b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.vertrauen li span{color:var(--leise);font-size:13px}

/* ---------- Kaufformular ---------- */
.kauf{max-width:680px;margin-top:32px;border-color:#ffa00055;box-shadow:0 30px 80px -40px #ffa00055}
.kauf h2{margin-bottom:6px}
.kauf .wahl{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px;padding:12px 14px;border-radius:12px;background:#0d0b16;color:var(--text);font-weight:600}
.kauf .wahl span:last-child{color:var(--amber);font-variant-numeric:tabular-nums;white-space:nowrap}
.kauf .wahl-neben{color:var(--leise);font-size:13px;margin:0 0 18px}
.kauf .feld{display:block;color:#cfcde0;font-size:14px;margin:0 0 8px}
.kauf .haken{font-size:13.5px;color:#bdbad0}
.kauf .haken input{margin-top:2px}
.kauf .knopf{width:100%;justify-content:center;font-size:17px;min-height:54px}
.kauf .nach-knopf{display:flex;gap:8px 18px;flex-wrap:wrap;margin:12px 0 0;color:var(--leise);font-size:13px}
.kauf .nach-knopf span{display:inline-flex;align-items:center;gap:6px}
.kauf .nach-knopf svg{width:14px;height:14px;color:#6fd49a}
.kauf .rand{margin:0 0 16px}
.kauf .rand a{color:var(--amber)}

/* ---------- Ablauf in drei Schritten (scrollgesteuerte Erzählung) ----------
   Grundzustand ohne JavaScript und bei prefers-reduced-motion: alles sichtbar, Schiene voll, Mockups im Endzustand.
   bezahlung.js setzt .ablauf-js (Schritte werden beim Scrollen hervorgehoben, Schiene füllt sich) und auf Desktop
   zusätzlich .ablauf-voll (Tipp-Animation, Klick, Bestätigungen). Es werden nur transform/opacity animiert: keine Layout-Sprünge. */
.ablauf{margin-top:56px;scroll-margin-top:24px}
.ablauf .abschnitt-titel{margin-top:0;margin-bottom:28px}
.ablauf .abschnitt-titel p{max-width:560px}
.ablauf-rahmen{position:relative;--ablauf-fortschritt:1}
.ablauf-schiene{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--linie);border-radius:2px;overflow:hidden}
.ablauf-fuellung{position:absolute;inset:0;background:linear-gradient(180deg,var(--lila),var(--amber));transform-origin:top;transform:scaleY(var(--ablauf-fortschritt));transition:transform 1s var(--weich)}
.schritte{display:grid;gap:56px;margin:0;padding:8px 0 16px;list-style:none;width:100%;max-width:none;box-sizing:border-box}
.schritt{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;gap:0 24px;position:relative}
.schritt-marke{grid-column:2;grid-row:1;display:grid;place-items:center}
.schritt-marke span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--linie);color:var(--leise);font:700 18px 'Space Grotesk',sans-serif;transition:border-color .5s,color .5s,box-shadow .6s var(--weich),background .5s}
.schritt-text{grid-column:1;grid-row:1;justify-self:end;max-width:460px;width:100%}
.schritt-bild{grid-column:3;grid-row:1;justify-self:start;width:100%;max-width:440px}
.schritt:nth-child(even) .schritt-text{grid-column:3;justify-self:start}
.schritt:nth-child(even) .schritt-bild{grid-column:1;justify-self:end}
.schritt-kicker{margin:0 0 6px;color:var(--amber);font:500 12px 'Space Grotesk',sans-serif;letter-spacing:.18em;text-transform:uppercase}
.schritt h3{margin:0 0 10px;color:var(--text);font:700 clamp(22px,2.6vw,30px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.01em}
.schritt-text>p:not(.schritt-kicker){margin:0 0 14px;color:#cfcde0;font-size:16px;line-height:1.6}
.schritt-fakten{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.schritt-fakten li{position:relative;padding-left:26px;color:var(--leise);font-size:14.5px;line-height:1.5}
.schritt-fakten li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;background:#6fd49a1a;border:1px solid #6fd49a66}
.schritt-fakten li::after{content:"";position:absolute;left:5px;top:calc(.35em + 4px);width:6px;height:3px;border-left:2px solid #6fd49a;border-bottom:2px solid #6fd49a;transform:rotate(-45deg)}

/* Aktiver Schritt: Marke leuchtet, Text und Bild voll da, die anderen zurückgenommen */
.ablauf-js .schritt-text,.ablauf-js .schritt-bild{opacity:.38;transform:translateY(18px);transition:opacity .7s var(--weich),transform .9s var(--weich)}
.ablauf-js .schritt.aktiv .schritt-text,.ablauf-js .schritt.aktiv .schritt-bild{opacity:1;transform:none}
.ablauf-js .schritt.gesehen:not(.aktiv) .schritt-text,.ablauf-js .schritt.gesehen:not(.aktiv) .schritt-bild{opacity:.62;transform:none}
.schritt.aktiv .schritt-marke span,.schritt.gesehen .schritt-marke span,.ablauf:not(.ablauf-js) .schritt-marke span{border-color:transparent;background:linear-gradient(135deg,var(--lila2),var(--amber));color:#fff;box-shadow:0 0 0 1px #ffa00044,0 0 0 8px #ffa00014,0 12px 34px #ffa00055}
.schritt.aktiv .schritt-marke span{box-shadow:0 0 0 1px #ffa00066,0 0 0 10px #ffa0001c,0 14px 40px #ffa00077}

/* Mockups (reine Dekoration, aria-hidden) */
.mock{position:relative;padding:18px;border:1px solid var(--linie);border-radius:16px;background:linear-gradient(160deg,rgba(28,20,52,.9),rgba(12,9,22,.95));box-shadow:0 30px 80px -40px #7b1fa2aa,0 0 0 1px #ffffff08 inset;color:#cfcde0;font:13px/1.45 Inter,system-ui,sans-serif;transition:transform .9s var(--weich),box-shadow .9s}
.ablauf-js .schritt.aktiv .mock{box-shadow:0 36px 90px -36px #ffa00077,0 0 0 1px #ffffff0c inset}
.schritt:nth-child(odd) .mock{transform:perspective(1400px) rotateY(-5deg)}
.schritt:nth-child(even) .mock{transform:perspective(1400px) rotateY(5deg)}
.ablauf-js .schritt.aktiv .mock{transform:perspective(1400px) rotateY(0)}
.mono{font-family:ui-monospace,Consolas,'Cascadia Mono',Menlo,monospace;letter-spacing:.04em}
.mock-feld{display:block;margin:10px 0 0}
.mock-label{display:block;color:var(--leise);font-size:11px;letter-spacing:.04em;margin:0 0 4px}
.mock-eingabe{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 12px;border:1px solid #ffffff1f;border-radius:9px;background:#0b0914;color:var(--text);font-size:13.5px;white-space:nowrap;overflow:hidden}
.tippt{display:inline-block;min-height:1.2em}
.tippt::after{content:attr(data-text)}
.ablauf-voll .tippt::after{content:none}
.ablauf-voll .schritt.aktiv .tippt.laeuft{border-right:2px solid var(--amber);padding-right:2px;animation:ablauf-cursor .8s steps(1) infinite}
@keyframes ablauf-cursor{50%{border-color:transparent}}
.mock-knopf{position:relative;display:flex;align-items:center;justify-content:center;min-height:38px;margin-top:14px;border-radius:999px;background:var(--amber);color:#2a1600;font:700 13px 'Space Grotesk',sans-serif;box-shadow:0 8px 24px #ffa00033}
.mock-klick{position:absolute;right:16%;top:50%;width:18px;height:18px;margin:-9px 0 0;border-radius:50%;border:2px solid #fff;opacity:0;pointer-events:none}
.ablauf-voll .schritt.gesehen .mock-klick{animation:ablauf-klick 1.1s var(--weich) 1.6s both}
@keyframes ablauf-klick{0%{opacity:0;transform:scale(.4)}25%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
.mock-umschalter{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--linie);border-radius:999px;background:#ffffff08;font-size:11.5px;margin:0 0 12px}
.mock-umschalter span{padding:4px 10px;border-radius:999px;color:var(--leise)}
.mock-umschalter span.an{background:#ffffff14;color:var(--text)}
.mock-karte{padding:14px 14px 14px;border:1px solid #ffa00055;border-radius:12px;background:#0f0b1c;box-shadow:0 0 0 1px #ffa00022,0 16px 40px -24px #ffa00066}
.mock-karte-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.mock-karte-kopf b{color:var(--text);font:700 16px 'Space Grotesk',sans-serif}
.mock-karte-kopf em{font-style:normal;color:var(--leise);font-size:11px}
.mock-preis{margin:6px 0 8px;color:var(--text);font:700 26px 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.mock-preis small{font:500 12px Inter,sans-serif;color:var(--leise);margin-left:2px}
.mock-karte ul{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:12.5px}
.mock-karte li{padding-left:16px;position:relative}
.mock-karte li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,var(--lila),var(--amber))}
.mock-stripe-kopf{display:flex;align-items:center;gap:8px;padding:0 0 12px;border-bottom:1px solid var(--linie);color:var(--text);font-weight:600}
.mock-stripe-kopf b{margin-left:auto;font:700 15px 'Space Grotesk',sans-serif;color:var(--text)}
.mock-schloss{width:12px;height:14px;border:2px solid #6fd49a;border-radius:3px;position:relative;margin-right:2px;flex:none}
.mock-schloss::before{content:"";position:absolute;left:1px;right:1px;top:-7px;height:7px;border:2px solid #6fd49a;border-bottom:0;border-radius:6px 6px 0 0}
.mock-zahlarten{display:flex;gap:6px;margin:12px 0 2px;font-size:11.5px}
.mock-zahlarten span{padding:6px 10px;border:1px solid var(--linie);border-radius:8px;color:var(--leise)}
.mock-zahlarten span.an{border-color:#ffffff40;color:var(--text);background:#ffffff0a}
.mock-zweier{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mock-kartenlogo{flex:none;width:28px;height:18px;border-radius:4px;background:linear-gradient(135deg,#eee,#bbb);position:relative}
.mock-kartenlogo::after{content:"";position:absolute;left:5px;top:5px;width:10px;height:8px;border-radius:2px;background:#6b6b78}
.mock-stripe-knopf{background:#ecebf4;color:#1a1526}
.mock-stripe-ok{display:flex;align-items:center;gap:8px;margin:12px 0 0;color:#6fd49a;font-weight:600;font-size:12.5px}
.mock-stripe-ok i,.mock-frei i{flex:none;width:18px;height:18px;border-radius:50%;background:#6fd49a;position:relative}
.mock-stripe-ok i::after,.mock-frei i::after{content:"";position:absolute;left:5px;top:4px;width:7px;height:4px;border-left:2px solid #07060d;border-bottom:2px solid #07060d;transform:rotate(-45deg)}
.ablauf-voll .schritt:not(.gesehen) .mock-stripe-ok{opacity:0}
.ablauf-voll .schritt.gesehen .mock-stripe-ok{animation:ablauf-auf .7s var(--weich) 2.6s both}
@keyframes ablauf-auf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mock-lizenz{padding:14px}
.mock-mail{padding:12px 14px;border:1px solid var(--linie);border-radius:12px;background:#0b0914}
.mock-mail-kopf{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--linie)}
.mock-mail-kopf b{color:var(--text);font-size:13px}
.mock-mail-kopf span{color:var(--leise);font-size:11px}
.mock-mail p{margin:0 0 8px;font-size:12.5px}
.mock-schluessel{display:block;box-sizing:border-box;max-width:100%;padding:7px 10px;border-radius:8px;background:#1b1430;border:1px dashed #c084e866;color:#e6c8ff;font-size:clamp(10.5px,1.05vw,12.5px);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-align:center}
.mock-pfeil{width:2px;height:22px;margin:4px auto;background:linear-gradient(180deg,var(--lila),var(--amber));position:relative}
.mock-pfeil::after{content:"";position:absolute;left:-4px;bottom:-1px;width:7px;height:7px;border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);transform:rotate(45deg)}
.mock-app{padding:12px 14px 14px;border:1px solid #ffa00044;border-radius:12px;background:#121419;box-shadow:0 0 0 1px #ffa00018}
.mock-app .mock-eingabe{font-size:clamp(9.5px,.95vw,11.5px);letter-spacing:-.02em;padding:0 8px;justify-content:center}
.mock-app .tippt{letter-spacing:0}
.mock-app-kopf{display:flex;justify-content:space-between;align-items:center;color:var(--leise);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mock-marke{color:var(--text);font:600 14px 'Space Grotesk',sans-serif;text-transform:none;letter-spacing:0}
.mock-marke b{color:var(--amber)}
.mock-frei{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#6fd49a12;border:1px solid #6fd49a33}
.mock-frei span{color:#6fd49a;font-weight:700;font-size:13px}
.mock-frei em{grid-column:2;font-style:normal;color:var(--leise);font-size:11.5px}
.ablauf-voll .schritt:not(.gesehen) .mock-frei,.ablauf-voll .schritt:not(.gesehen) .mock-pfeil,.ablauf-voll .schritt:not(.gesehen) .mock-app{opacity:0}
.ablauf-voll .schritt.gesehen .mock-pfeil{animation:ablauf-auf .5s var(--weich) 1.2s both}
.ablauf-voll .schritt.gesehen .mock-app{animation:ablauf-auf .7s var(--weich) 1.5s both}
.ablauf-voll .schritt.gesehen .mock-frei{animation:ablauf-auf .7s var(--weich) 4.2s both}
.ablauf-schluss{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin:28px 0 0;padding-top:24px;border-top:1px solid var(--linie);color:var(--leise);font-size:14px}
.ablauf-schluss .knopf{min-height:48px;display:inline-flex;align-items:center}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin:0}
.faq details{border-top:1px solid var(--linie);padding:0}
.faq details:last-child{border-bottom:1px solid var(--linie)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;cursor:pointer;padding:16px 0;min-height:48px;color:var(--text);font:600 16px/1.4 'Space Grotesk',sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--linie);border-radius:50%;color:var(--amber);font-size:18px;line-height:1;transition:transform .35s var(--weich),border-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);border-color:#ffa00066}
.faq details p{margin:0 0 16px;color:#cfcde0;font-size:15px;line-height:1.6;max-width:720px}
.faq details p+p{margin-top:-6px}
.faq a{color:var(--amber)}
.bz .abschnitt-titel{margin:48px 0 16px}
.bz .abschnitt-titel h2{margin:0 0 6px}
.bz .abschnitt-titel p{margin:0;color:var(--leise);font-size:15px}

/* ---------- Rand- und Rechtshinweise ---------- */
.rand{line-height:1.6}
.rand span{margin-right:0}
.rand span+span::before{content:"·";margin:0 8px;color:#5f5c74}
.rand a{color:var(--leise);text-decoration:underline}
.rand a:hover{color:var(--text)}
.entwurf{display:inline-block;max-width:100%}

/* ---------- Mein Abo, Kündigen, Danke ---------- */
.abschnitt{border-radius:16px}
.abschnitt h2{font-size:clamp(22px,3vw,28px);margin:0 0 8px}
.abschnitt .unter{color:var(--leise);font-size:14px;margin:-2px 0 16px}
.abschnitt form{margin:0}
.abschnitt .feld{display:block;color:#cfcde0;font-size:14px;margin:0 0 8px}
.abschnitt .knopf,.abschnitt .knopf-leise{width:auto}
.abschnitt .meldung:empty{display:none}
.abschnitt .meldung{margin-top:12px}
.abschnitt.leise-box{background:#ffffff05}
.abo-raster{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.abo-raster .abschnitt{margin:0}
.abo-raster .breit{grid-column:1 / -1}
.kuendigen-box{border-color:#ffa00044;background:linear-gradient(135deg,rgba(74,20,140,.32),rgba(255,160,0,.08))}
.kuendigen-box p{color:#dcdae8}
.kuendigen-box .knopf-gross{width:100%;justify-content:center}
.wahl-gruppe{border:0;padding:0;margin:0 0 14px;display:flex;gap:10px 22px;flex-wrap:wrap}
.wahl-gruppe legend{padding:0;margin:0 0 8px;width:100%}
.wahl-gruppe .haken{margin:0;min-height:44px;align-items:center}
.wahl-gruppe .haken input{width:20px;height:20px;margin:0}
.kuendigen-fakten{display:grid;grid-template-columns:1fr;gap:8px;margin:0 0 18px;padding:0;list-style:none}
.kuendigen-fakten li{display:flex;gap:10px;align-items:flex-start;color:#cfcde0;font-size:14.5px;line-height:1.5}
.kuendigen-fakten svg{flex:none;width:18px;height:18px;color:#6fd49a;margin-top:3px}
.kuendigen-form .art{margin:0 0 14px;padding:12px 14px;border:1px solid var(--linie);border-radius:12px;background:#0d0b16;color:#cfcde0;font-size:14px}
.kuendigen-form .art b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}
.kuendigen-form textarea.eingabe{border-radius:14px;resize:vertical;min-height:84px;font:inherit;font-size:16px}
.kuendigen-form .knopf-gross{width:100%;justify-content:center;margin-top:4px}
.kuendigen-form .nach-knopf{margin:12px 0 0;color:var(--leise);font-size:13px;line-height:1.5}
.bestaetigt .haken-gross{box-shadow:0 0 0 8px #6fd49a11}
.bestaetigt h1{font-size:clamp(30px,5.5vw,48px);margin-bottom:.5em}
.bestaetigt dl{grid-template-columns:auto 1fr;gap:8px 20px;padding:14px 16px;border-radius:12px;background:#0d0b16}
.bestaetigt dd{color:var(--text);font-weight:600}
.bestaetigt dl[hidden],.kauf[hidden],.abschnitt[hidden],.hinweis-box[hidden]{display:none}
.naechste{margin:18px 0 20px;padding:0;list-style:none;counter-reset:n}
.naechste li{counter-increment:n;display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--linie);color:#cfcde0;font-size:15px;line-height:1.5}
.naechste li:last-child{border-bottom:1px solid var(--linie)}
.naechste li::before{content:counter(n);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--lila),var(--amber));color:#2a1600;font:700 13px 'Space Grotesk',sans-serif}
.naechste li b{color:var(--text);font-weight:600}
.aktion{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center}
.aktion .leise{color:var(--leise);text-decoration:underline;min-height:44px;display:inline-flex;align-items:center}
.aktion .leise:hover{color:var(--text)}
.kontakt-zeile{margin:20px 0 0;color:var(--leise);font-size:14px}
.kontakt-zeile a{color:var(--amber)}

/* ---------- Fuß ---------- */
body.bezahl .fuss{gap:14px 22px;padding:26px 16px 60px}

/* ---------- Handy und Tablet ---------- */
@media (max-width:1000px){
  .vertrauen{grid-template-columns:1fr 1fr}
  .vertrauen li:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:860px){
  /* Ablauf einspaltig: Schiene links, Text und Bild untereinander, keine Zickzack-Anordnung, kein 3D-Kippen */
  .ablauf-schiene{left:21px}
  .schritte{gap:40px;padding:4px 0 8px}
  .schritt{grid-template-columns:44px minmax(0,1fr);gap:6px 14px;align-items:start}
  .schritt-marke{grid-column:1;grid-row:1;align-self:start}
  .schritt-marke span{width:44px;height:44px;font-size:16px}
  .schritt:nth-child(n) .schritt-text{grid-column:2;grid-row:1;justify-self:stretch;max-width:none;padding-top:6px}
  .schritt:nth-child(n) .schritt-bild{grid-column:2;grid-row:2;justify-self:stretch;max-width:none}
  .schritt .mock{transform:none}
  .schritt-fakten{margin-bottom:16px}
  .ablauf-js .schritt-text,.ablauf-js .schritt-bild{opacity:.55;transform:translateY(12px)}
  .ablauf-js .schritt.gesehen:not(.aktiv) .schritt-text,.ablauf-js .schritt.gesehen:not(.aktiv) .schritt-bild{opacity:.8}
}
@media (max-width:760px){
  body.bezahl .kopf{padding:12px 16px;gap:10px 14px}
  body.bezahl .kopf .mein-abo{padding:8px 12px;font-size:12px;min-height:38px}
  body.bezahl nav{gap:12px;margin-left:0;width:100%;order:3}
  body.bezahl nav a{font-size:12px}
  .bz{padding:22px 16px 64px}
  .bz h1{font-size:clamp(32px,9vw,44px)}
  .beta-chip{margin-left:6px;font-size:10px;padding:2px 8px}
  .umschalter{width:100%;justify-content:stretch}
  .umschalter button{flex:1;padding:10px 8px;font-size:13px;white-space:nowrap}
  .umschalter small{display:block;margin:2px 0 0;padding:1px 6px}
  .karten{grid-template-columns:1fr;gap:14px}
  .tarif{padding:22px 18px 20px}
  .tarif .preis{font-size:40px}
  .vertrauen{grid-template-columns:1fr;gap:8px}
  .vertrauen li{padding:12px 14px}
  .kauf{padding:18px 16px;margin-top:24px}
  .kauf .wahl{font-size:15px}
  .abo-raster{grid-template-columns:1fr}
  .bestaetigt dl{grid-template-columns:1fr;gap:2px 0}
  .bestaetigt dt{margin-top:8px}
  .bestaetigt dt:first-child{margin-top:0}
  .aktion .knopf{width:100%;justify-content:center}
  .faq summary{font-size:15px;padding:14px 0}
  .rand span{display:block}
  .rand span+span::before{content:none}
}
@media (max-width:420px){
  .mock{padding:14px}
  .mock-lizenz{padding:12px}
  .mock-eingabe{font-size:12.5px;padding:0 10px}
  .mock-schluessel{font-size:11.5px;padding:6px 8px}
  .mock-zahlarten span{padding:6px 8px}
  .ablauf-schluss .knopf{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .tarif,.tarif:hover{transform:none;transition:none}
  .faq summary::after{transition:none}
  /* Ablauf statisch: bezahlung.js setzt dann keine Klassen; zur Sicherheit auch per CSS alles sichtbar und ohne Bewegung */
  .ablauf-fuellung{transition:none;transform:none}
  .ablauf .schritt-text,.ablauf .schritt-bild,.ablauf .mock-stripe-ok,.ablauf .mock-frei,.ablauf .mock-pfeil,.ablauf .mock-app{opacity:1;transform:none;transition:none;animation:none}
  .ablauf .mock,.ablauf .schritt-marke span{transition:none;transform:none}
  .ablauf .mock-klick{display:none}
  .ablauf .tippt{border-right:0;animation:none}
  .ablauf .tippt::after{content:attr(data-text)}
}

/* Mein Abo: Zahl der PCs */
.pcs-stepper{display:flex;align-items:center;gap:14px;margin:8px 0 6px}
.pcs-stepper button{min-width:48px;min-height:48px;font-size:22px;line-height:1;padding:0}
.pcs-stepper output{min-width:2.5ch;text-align:center;font:700 34px 'Space Grotesk',sans-serif;color:#fff}
#verwaltung .knopf-gross{display:inline-flex;align-items:center;justify-content:center;text-align:center}