/* Präsentations-Player – Design */
@font-face{font-family:Poppins;src:url(fonts/Poppins-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Medium.ttf) format("truetype");font-weight:500 600;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Bold.ttf) format("truetype");font-weight:700 800;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Regular.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-SemiBold.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-Variable.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url(fonts/Lora-Italic-Variable.ttf) format("truetype");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:InterDisplay;src:url(fonts/InterDisplay-SemiBold.otf) format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:InterDisplay;src:url(fonts/InterDisplay-Bold.otf) format("opentype");font-weight:700;font-display:swap}

:root{--bg:#061226;--bg2:#0A1A36;--line:#1B2D52;--line2:rgba(214,226,246,.13);--tx:#F2F5FB;--mu:#A9B6CF;--mu2:#6B7A99;--acc2:#F0B323;--ff:Inter;--ffd:InterDisplay;
  --glass:rgba(16,24,40,.66);--side:300px;--top:60px;--r:18px;--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:var(--ff),Inter,"Segoe UI",Tahoma,"Noto Sans Arabic","Geeza Pro",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{width:1em;height:1em}
em{font-style:normal;color:var(--acc)}
#kp{position:fixed;inset:0;display:grid;grid-template-columns:var(--side) 1fr;grid-template-rows:var(--top) 1fr;background:var(--bg)}

/* Paymago-Hintergrund wie auf der Paymago-Seite: Lichtflächen + 64-px-Raster + driftendes Licht */
.kfx{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;display:none}
#kp.fx .kfx{display:block}
.kfx::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 8% 6%,color-mix(in srgb,var(--acc2) 16%,transparent),transparent 62%),radial-gradient(820px 520px at 96% 4%,color-mix(in srgb,var(--acc) 13%,transparent),transparent 62%),radial-gradient(900px 600px at 50% 112%,color-mix(in srgb,var(--acc2) 10%,transparent),transparent 65%),linear-gradient(color-mix(in srgb,var(--acc) 3.5%,transparent) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,color-mix(in srgb,var(--acc) 3.5%,transparent) 1px,transparent 1px) 0 0/64px 64px}
.kfx i{position:absolute;inset:-20% -10%;background:radial-gradient(480px 300px at 30% 40%,color-mix(in srgb,var(--acc) 7%,transparent),transparent 70%),radial-gradient(520px 320px at 75% 65%,color-mix(in srgb,var(--acc2) 7%,transparent),transparent 70%);animation:kDrift 22s ease-in-out infinite alternate}
@keyframes kDrift{0%{transform:translate3d(-3%,-2%,0)}100%{transform:translate3d(4%,3%,0)}}
#kp[data-vmode=full] .kfx{opacity:.45}
.kp-hero .kfx{z-index:0}
.hero-in{z-index:1}

/* Kopfzeile */
.kp-top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--line);background:rgba(8,12,22,.85);backdrop-filter:blur(12px);z-index:20}
.logo{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.logo b{font:700 22px/1 var(--ffd),InterDisplay,Inter,sans-serif;letter-spacing:-.02em}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc)}
.logo span{margin-inline-start:12px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.partner{font-size:11px;padding:5px 10px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc);border-radius:99px;white-space:nowrap}
.tools{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.langs{display:flex;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.langs button{padding:7px 10px;font-size:12px;font-weight:600;color:var(--mu);transition:.2s}
.langs button.on{background:var(--acc);color:#0C1320}
.langs button:not(.on):hover{color:var(--tx);background:rgba(255,255,255,.05)}
.ib{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line2);transition:.2s}
.ib:hover{border-color:var(--acc);color:var(--acc)}
.ib svg,.pill svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib.off{opacity:.45}.ib.off .w{display:none}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);font-weight:600;font-size:14px;transition:.2s}
.pill svg{fill:currentColor;stroke:none}
.pill:hover{border-color:var(--acc)}
.pill.primary{background:var(--acc);color:#0C1320;border-color:var(--acc);box-shadow:0 8px 30px -8px color-mix(in srgb,var(--acc) 70%,transparent)}
.pill.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
#kp-play .i-pause,#kp-play .lz{display:none}
#kp.playing #kp-play .i-pause,#kp.playing #kp-play .lz{display:inline}
#kp.playing #kp-play .i-play,#kp.playing #kp-play .lp{display:none}
.only-m{display:none}

/* Kapitel-Liste */
.kp-side{border-inline-end:1px solid var(--line);overflow:auto;padding:14px 12px 24px;background:var(--bg);z-index:15;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.side-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu2);padding:4px 10px 10px;display:flex;justify-content:space-between}
.ch{display:flex;gap:12px;width:100%;text-align:start;padding:10px;border-radius:12px;position:relative;transition:background .2s;margin-bottom:2px}
.ch:hover{background:rgba(255,255,255,.035)}
.ch .n{flex:none;width:26px;height:26px;border-radius:8px;border:1px solid var(--line2);display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--mu)}
.ch .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ch b{font-size:13.5px;font-weight:600}
.ch small{font-size:11.5px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch .p{position:absolute;inset-inline:48px 12px;bottom:3px;height:2px;border-radius:2px;background:var(--line);--p:0;overflow:hidden}
.ch .p::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:left;transform:scaleX(var(--p))}
[dir=rtl] .ch .p::after{transform-origin:right}
.ch.done .p::after{transform:scaleX(1);opacity:.5}
.ch:not(.on):not(.done) .p{opacity:0}
.ch.on{background:rgba(255,255,255,.05)}
.ch.on .n{background:var(--acc);color:#0C1320;border-color:var(--acc)}
.ch.done .n{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}

/* Bühne */
.kp-stage{position:relative;overflow:hidden;container-type:size;container-name:stage;background:radial-gradient(120% 90% at 70% 40%,#17223A,var(--bg))}
.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.bgv.on{opacity:1}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,22,calc(var(--scrim) + .3)) 0%,rgba(8,12,22,var(--scrim)) 45%,rgba(8,12,22,calc(var(--scrim) - .15)) 100%),linear-gradient(0deg,rgba(8,12,22,.85) 0%,transparent 28%)}
[dir=rtl] .scrim{background:linear-gradient(-90deg,rgba(8,12,22,calc(var(--scrim) + .3)) 0%,rgba(8,12,22,var(--scrim)) 45%,rgba(8,12,22,calc(var(--scrim) - .15)) 100%),linear-gradient(0deg,rgba(8,12,22,.85) 0%,transparent 28%)}
#kp[data-vmode=full] .scrim{background:linear-gradient(0deg,rgba(8,12,22,.85) 0%,transparent 35%),linear-gradient(90deg,rgba(8,12,22,.55),transparent 50%)}
.head{position:absolute;inset-inline-start:4.5cqw;top:5cqh;z-index:3}
.kp-stage>.kfx{z-index:1}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:max(11px,.85cqw);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
.kicker::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--acc)}
.head h2{margin:.5cqh 0 0;font:700 clamp(26px,3.4cqw,64px)/1.02 var(--ffd),InterDisplay,Inter,sans-serif;letter-spacing:-.025em}
.show{position:absolute;inset-inline-start:4.5cqw;top:28cqh;width:40cqw;z-index:3;font:700 clamp(28px,4.3cqw,84px)/1.04 var(--ffd),InterDisplay,Inter,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.show .w{display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px)}
.show.in .w{animation:wIn .7s var(--ease) forwards;animation-delay:calc(var(--k) * 28ms)}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.viz{position:absolute;inset-inline-end:3cqw;top:13cqh;width:52cqw;height:64cqh;z-index:2;container-type:size;opacity:0;transform:scale(.97);transition:opacity .8s var(--ease),transform .9s var(--ease)}
.viz.in{opacity:1;transform:none}
.cap{position:absolute;inset-inline:4.5cqw 4.5cqw;bottom:calc(14cqh);z-index:4;font-size:clamp(16px,1.55cqw,30px);font-weight:500;line-height:1.35;min-height:1.4em;text-shadow:0 2px 14px rgba(0,0,0,.6);max-width:64cqw}
.cap span{transition:color .25s,opacity .25s}
.cap .fut{opacity:.45}
.cap .past{opacity:1}
.cap .now{opacity:1;color:#FFFFFF}
.cap .hl{color:var(--acc)}
.ctrl{position:absolute;inset-inline:3.5cqw;bottom:3.2cqh;z-index:5;display:flex;align-items:center;gap:12px}
.segs{flex:1;display:flex;gap:5px;height:22px;align-items:center}
.seg{flex:1;height:22px;display:flex;align-items:center}
.seg i{display:block;height:4px;border-radius:4px;background:var(--acc);width:0;box-shadow:0 0 10px color-mix(in srgb,var(--acc) 60%,transparent)}
.seg{background:linear-gradient(var(--line2),var(--line2)) center/100% 4px no-repeat;border-radius:4px}
.seg.done i{width:100%;opacity:.55;box-shadow:none}
.seg:hover{background-size:100% 6px}
.time{font-size:12px;color:var(--mu);font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
.legal{position:absolute;inset-inline-end:3.5cqw;bottom:9.5cqh;z-index:6;max-width:44cqw;font-size:11px;color:var(--mu);text-align:end;line-height:1.45}
.legal button{font-size:11px;color:var(--tx);padding:4px 9px;border:1px solid var(--line2);border-radius:99px;background:rgba(8,12,22,.6)}
.legal span,.legal a{display:none}
.legal.open span,.legal.open a{display:inline}
.legal.open{background:rgba(8,12,22,.92);border:1px solid var(--line2);border-radius:12px;padding:10px 12px}
.legal a{color:var(--acc)}
.noaudio{position:absolute;top:5cqh;inset-inline-end:3.5cqw;z-index:6;font-size:11px;letter-spacing:.06em;color:var(--mu);border:1px dashed var(--line2);border-radius:99px;padding:5px 10px}
.bigplay,.fin{position:absolute;inset:0;margin:auto;z-index:8;display:none}
.bigplay{width:96px;height:96px;border-radius:50%;background:var(--acc);color:#0C1320;box-shadow:0 0 0 12px color-mix(in srgb,var(--acc) 18%,transparent),0 20px 60px -10px color-mix(in srgb,var(--acc) 60%,transparent)}
.bigplay svg{width:38px;height:38px;fill:currentColor;margin-inline-start:5px}
#kp.needs-tap .bigplay{display:grid;place-items:center;animation:pulse 2.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 22px color-mix(in srgb,var(--acc) 8%,transparent),0 20px 60px -10px color-mix(in srgb,var(--acc) 60%,transparent)}}
#kp.finished .fin{display:grid;place-items:end center;inset:auto 0 9cqh 0;height:auto}

/* Startseite */
.kp-hero{position:absolute;inset:0;z-index:30;display:none;place-items:center;background:radial-gradient(70% 60% at 50% 40%,#18253D 0%,var(--bg) 70%);text-align:center;padding:24px;overflow:auto}
#kp.hero .kp-hero{display:grid}
.kp-hero .glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 16%,transparent),transparent 60%);filter:blur(20px);animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-3vh) scale(1.06)}}
.hero-in{position:relative;max-width:920px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--acc)}
.kp-hero h1{font:700 clamp(40px,6.4vw,92px)/1 var(--ffd),InterDisplay,Inter,sans-serif;letter-spacing:-.035em;margin:18px 0 18px;text-wrap:balance}
.kp-hero p{font-size:clamp(15px,1.25vw,19px);color:var(--mu);max-width:640px;margin:0 auto 30px;line-height:1.55}
.hero-act{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.langs.big button{padding:11px 16px;font-size:14px}
.pill.primary{height:46px;padding:0 26px;font-size:15px}
.kp-hero .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:34px;max-width:860px}
.kp-hero .chip{font-size:12.5px;padding:7px 12px;border:1px solid var(--line2);border-radius:99px;color:var(--mu);transition:.2s}
.kp-hero .chip:hover{color:var(--tx);border-color:var(--acc)}
.embed .kp-top{display:none}
.embed#kp{grid-template-rows:0 1fr}

/* ================= Szenen (1em = 2.2 % der Szenenbreite) ================= */
.sc{position:absolute;inset:0;font-size:2.3cqw;color:var(--tx)}
.sc [data-b]{opacity:0;translate:0 .8em;scale:.98;transition:opacity .7s var(--ease),translate .8s var(--ease),scale .8s var(--ease);transition-delay:calc(var(--i,0) * 110ms + var(--d,0s))}
.sc [data-b].on{opacity:1;translate:none;scale:none}
.sc [data-b].gone{opacity:0;translate:0 -.6em;scale:.98;transition-delay:0s;pointer-events:none}
.sc .dim{opacity:.18!important;filter:blur(1px);transition:opacity .8s,filter .8s}
.glass{background:var(--glass);border:1px solid var(--line2);border-radius:1em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1.5em 3em -1.5em rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06)}
.ic{width:1.3em;height:1.3em;flex:none}
.ic.xs{width:.95em;height:.95em}.ic.sm{width:1.1em;height:1.1em}.ic.lg{width:2em;height:2em}.ic.xl{width:3.2em;height:3.2em}
.lbl{font-size:.82em;letter-spacing:.12em;text-transform:uppercase;color:var(--mu)}
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.5em .9em;border:1px solid var(--line2);border-radius:99em;background:rgba(14,21,36,.7);font-size:.95em;font-weight:500;white-space:nowrap}
.chip .ic{color:var(--acc);width:1.1em;height:1.1em}
.side{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:44%;display:grid}
.side>*{grid-area:1/1}
.panel{padding:1.1em 1.2em;display:flex;flex-direction:column;gap:.7em;align-self:center}
.row{display:flex;align-items:center;gap:.75em;font-size:1em}
.row>span{flex:1}
.row .ic{color:var(--acc)}
.row b{color:var(--acc);font-weight:600}
.row code,code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;color:var(--mu);direction:ltr;unicode-bidi:embed}
.stag{opacity:0;transform:translateX(-.8em);transition:.6s var(--ease);transition-delay:calc(var(--i,0) * 140ms + .25s)}
.on .stag,.stag.on{opacity:1;transform:none}
.ok{display:inline-flex;align-items:center;gap:.3em;color:var(--acc);font-weight:600}
.big{font:700 3.2em/1 var(--ffd),InterDisplay,Inter,sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.big small{font-size:.38em;color:var(--mu);font-weight:600;letter-spacing:0}
.coin{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;font:700 1.45em/1 var(--ffd),InterDisplay,Inter;color:#0C1320;box-shadow:0 0 0 .18em rgba(255,255,255,.08),0 .6em 1.4em -.4em rgba(0,0,0,.7)}
.coin span{font-size:1em}
.coin.usdt{background:radial-gradient(circle at 30% 30%,#7FF0C4,#1EA67A)}
.coin.usdc{background:radial-gradient(circle at 30% 30%,#A3BFEC,#2C6BD1);color:#FFFFFF}
.coin.btc{background:radial-gradient(circle at 30% 30%,#93B9F6,#296FE1)}
.coin.eth{background:radial-gradient(circle at 30% 30%,#D2E0F6,#638AC9);color:#FFFFFF}
.ask-ring{width:7em;height:7em;border-radius:50%;display:grid;place-items:center;color:var(--acc);background:radial-gradient(circle,color-mix(in srgb,var(--acc) 22%,transparent),transparent 70%);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);box-shadow:0 0 4em color-mix(in srgb,var(--acc) 25%,transparent);animation:breathe 3.6s ease-in-out infinite}
.ask-ring.sm{width:4.6em;height:4.6em}
@keyframes breathe{50%{box-shadow:0 0 6em color-mix(in srgb,var(--acc) 38%,transparent);transform:scale(1.03)}}
.real{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;text-align:center}
.real b{font:700 1.7em/1.15 var(--ffd),InterDisplay,Inter;max-width:16em}
.toggle{width:2.6em;height:1.45em;border-radius:99em;background:var(--line2);position:relative;flex:none}
.toggle::after{content:"";position:absolute;top:.18em;inset-inline-start:.18em;width:1.1em;height:1.1em;border-radius:50%;background:#FFFFFF;transition:.5s var(--spring)}
.on .toggle,.toggle.on{background:var(--acc)}
.on .toggle::after,.toggle.on::after{inset-inline-start:1.32em;background:#0C1320}
.strike{position:absolute;left:-4%;right:-4%;top:50%;height:.18em;background:var(--acc);border-radius:1em;transform:scaleX(0) rotate(-8deg);transform-origin:left;transition:transform .7s var(--ease) .9s;box-shadow:0 0 1em var(--acc)}
.on .strike{transform:scaleX(1) rotate(-8deg)}
.timer{flex-direction:row;align-items:center;gap:1.2em}
.timer>svg{width:5em;height:5em;transform:rotate(-90deg);flex:none}
.timer .trk{fill:none;stroke:var(--line2);stroke-width:6}
.timer .prg{fill:none;stroke:var(--acc);stroke-width:6;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 2.4s var(--ease) .3s}
.timer.on .prg{stroke-dashoffset:0}
.timer strong{font:700 2em var(--ffd),InterDisplay}
.timer>div{display:flex;flex-direction:column;gap:.3em}

/* intro / outro */
.vault-rings{position:absolute;inset:0;margin:auto;width:24em;height:24em}
.vault-rings.small{width:20em;height:20em}
.vault-rings svg{width:100%;height:100%;overflow:visible}
.vault-rings .r{fill:none;stroke:var(--acc);stroke-width:1.2;transform-origin:200px 200px}
.vault-rings .r1{stroke-dasharray:4 14;opacity:.5;animation:spin 40s linear infinite}
.vault-rings .r2{stroke-dasharray:120 30 8 30;opacity:.7;animation:spin 26s linear infinite reverse}
.vault-rings .r3{stroke-dasharray:2 8;opacity:.6;animation:spin 18s linear infinite}
.vault-rings .r4{stroke-width:2;opacity:.9;filter:drop-shadow(0 0 8px var(--acc))}
@keyframes spin{to{transform:rotate(360deg)}}
.vault-core{position:absolute;inset:0;display:grid;place-items:center;color:var(--acc);filter:drop-shadow(0 0 1.2em var(--acc))}
.seed-grid{position:absolute;inset:0;margin:auto;width:30em;height:13em;display:grid;grid-template-columns:repeat(4,1fr);gap:.6em;align-content:center}
.seed-grid span{padding:.6em .4em;border:1px dashed var(--line2);border-radius:.6em;font-size:.85em;color:var(--mu);text-align:center;background:rgba(8,12,22,.85)}
.intro-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.15em}
.intro-brand b{font:700 6em/1 var(--ffd),InterDisplay,Inter;letter-spacing:-.04em;text-shadow:0 0 .6em rgba(0,0,0,.8)}
.intro-brand .dot{width:.9em;height:.9em;align-self:flex-end;margin-bottom:.9em}
.sc-intro .chips{position:absolute;left:0;right:0;bottom:6%;display:flex;justify-content:center;gap:.6em;flex-wrap:wrap}
.sc-intro [data-b="2"].on~.vault-rings,.sc-intro .vault-rings.on~.intro-brand.on{}
.sc-intro .intro-brand.on~.chips{}
.sc-intro .vault-rings{transition:opacity .8s,transform 1s var(--ease)}
.sc-outro .ctas{position:absolute;left:0;right:0;bottom:8%;display:flex;justify-content:center;gap:.8em;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;height:2.8em;padding:0 1.6em;border-radius:.7em;border:1px solid var(--line2);font-weight:600;color:var(--tx);text-decoration:none;font-size:1.05em;background:rgba(14,21,36,.7);transition:.25s}
.cta.primary{background:var(--acc);border-color:var(--acc);color:#0C1320;box-shadow:0 1em 2.4em -.8em var(--acc)}
.cta:hover{transform:translateY(-2px)}

/* whynow */
.timeline{position:absolute;inset-inline-start:2%;top:50%;transform:translateY(-50%);width:62%;display:flex;flex-direction:column;gap:1.3em;padding-inline-start:1.6em;border-inline-start:2px solid var(--line2)}
.tl-item{position:relative;display:flex;flex-direction:column;gap:.15em}
.tl-dot{position:absolute;inset-inline-start:-2.05em;top:.2em;width:.9em;height:.9em;border-radius:50%;background:var(--acc);box-shadow:0 0 1em var(--acc)}
.tl-date{font:700 1.25em var(--ffd),InterDisplay,sans-serif;color:var(--acc)}
.tl-text{font-size:1.05em}
.warn-card{position:absolute;inset-inline-end:0;top:50%;margin-top:-3em;width:44%;padding:1.2em;display:flex;align-items:center;gap:.8em;color:var(--tx);font-weight:600;font-size:1.05em}
.warn-card .ic{color:#FF8A70}
.ask{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2em}
.ask p{font:700 1.8em var(--ffd),InterDisplay,sans-serif;margin:0;text-align:center}

/* balance */
.bal-wrap{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:54%;aspect-ratio:1}
.bal-card{position:absolute;inset:22% 6%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;padding:1em;z-index:2}
.bal-card .big{font-size:2.6em}
.nets{display:flex;gap:.4em;flex-wrap:wrap;justify-content:center}
.nets span{font-size:.72em;padding:.35em .7em;border-radius:99em;border:1px solid var(--line2);color:var(--mu)}
.orbit{position:absolute;inset:-6%;animation:spin 30s linear infinite}
.orb{position:absolute;left:50%;top:50%;margin:-1.6em;transform-origin:center}
.orb .coin{animation:spin 30s linear infinite reverse}
.orb:nth-child(1){transform:translate(0,-11.5em)}
.orb:nth-child(2){transform:translate(11.5em,0)}
.orb:nth-child(3){transform:translate(0,11.5em)}
.orb:nth-child(4){transform:translate(-11.5em,0)}

/* transfer */
.p2p{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1em}
.ph{width:7em;height:9em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;color:var(--acc)}
.ph span{color:var(--tx);font-weight:600}
.lane{position:relative;height:.25em;background:linear-gradient(90deg,var(--line2),var(--acc),var(--line2));border-radius:1em}
.pkt{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-style:normal;font-weight:700;font-size:.9em;padding:.4em .8em;border-radius:99em;background:var(--acc);color:#0C1320;box-shadow:0 0 1.6em var(--acc);animation:fly 2.4s var(--ease) infinite}
@keyframes fly{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
[dir=rtl] .pkt{animation-name:flyr}@keyframes flyr{0%{left:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
.badges{grid-column:1/-1;display:flex;justify-content:center;gap:.6em;flex-wrap:wrap;margin-top:1.2em}
.checks{position:absolute;inset:0;margin:auto;width:70%;height:max-content;padding:1.2em;display:flex;flex-direction:column;gap:.8em}
.ck{display:flex;align-items:center;gap:.9em;font-size:1.1em;padding:.5em 0;border-bottom:1px solid var(--line)}
.ck:last-child{border:0}
.ck .box{width:2.4em;height:2.4em;border-radius:.6em;display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--acc)}
.ck span:nth-child(2){flex:1}
.ck .tick{width:1.8em;height:1.8em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320}
.sc .ck .tick[data-b]{scale:0;translate:none;transition:opacity .3s,scale .5s var(--spring);transition-delay:calc(var(--i) * 600ms + .3s)}
.sc .ck .tick[data-b].on{scale:1}
.batch{position:absolute;inset:0;margin:auto;width:80%;height:max-content;padding:1.2em}
.batch .hdr{display:flex;align-items:center;gap:.7em;margin-bottom:1em}
.batch .hdr .ic{color:var(--acc)}
.batch .hdr span{margin-inline-start:auto;color:var(--mu)}
.dots{display:grid;grid-template-columns:repeat(20,1fr);gap:.35em}
.dots i{aspect-ratio:1;border-radius:50%;background:var(--line2);transition:background .3s;transition-delay:calc(var(--i) * 18ms + .4s)}
.batch.on .dots i{background:var(--acc);box-shadow:0 0 .5em color-mix(in srgb,var(--acc) 60%,transparent)}
.bankout{position:absolute;inset:0;margin:auto;width:64%;height:max-content;padding:1.6em;display:flex;align-items:center;gap:1.2em;color:var(--acc)}
.bankout b{display:block;color:var(--tx);font-size:1.3em}
.bankout span{font:700 2em var(--ffd),InterDisplay;color:var(--acc)}

/* earn */
.plans{position:absolute;inset:0;display:flex;align-items:center;gap:1em}
.plan{flex:1;padding:1.3em 1em;display:flex;flex-direction:column;gap:.5em;text-align:center;align-items:center}
.plan strong{font:700 3.4em/1 var(--ffd),InterDisplay,sans-serif;letter-spacing:-.03em}
.plan small{color:var(--mu);font-size:.85em}
.plan.hot{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 0 3em -1em var(--acc),inset 0 1px 0 rgba(255,255,255,.06)}
.plan.hot strong{color:var(--acc)}
.mini{display:flex;gap:.2em;height:2.2em;align-items:flex-end;margin-top:.4em}
.mini i{width:.5em;height:0;background:var(--acc);border-radius:.15em;transition:height .5s var(--ease);transition-delay:calc(var(--i) * 90ms + .8s)}
.plan.on .mini i{height:calc(30% + var(--i) * 6%)}
.tree{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.4em}
.lvl{display:flex;gap:1.4em;align-items:center;position:relative}
.node{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(14,21,36,.85);color:var(--acc);position:relative;opacity:0;transform:scale(.4);transition:.6s var(--spring);transition-delay:calc(var(--i,0) * 120ms + .2s)}
.tree.on .node{opacity:1;transform:none}
.node.sm{width:2.3em;height:2.3em}
.node.me{width:4.4em;height:4.4em;background:var(--acc);color:#0C1320;border-color:var(--acc);box-shadow:0 0 2.4em color-mix(in srgb,var(--acc) 60%,transparent)}
.node.me b{position:absolute;top:110%;font-size:.8em;color:var(--tx);white-space:nowrap}
.node em{position:absolute;top:112%;font-size:.8em;font-weight:700;white-space:nowrap}
.node.ghost{border-style:dashed;color:var(--mu)}
.lvl.up .half{font:700 1.4em var(--ffd),InterDisplay,sans-serif;color:var(--acc)}
.example{position:absolute;inset:0;margin:auto;width:78%;height:max-content;padding:1.5em;display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center}
.example .big{color:var(--acc)}
.example .bars{display:flex;gap:.35em;align-items:flex-end;height:4em;margin-top:.8em;width:100%}
.example .bars i{flex:1;height:0;border-radius:.25em .25em 0 0;background:linear-gradient(var(--acc),color-mix(in srgb,var(--acc) 30%,transparent));transition:height .45s var(--ease);transition-delay:calc(var(--i) * 140ms + .6s)}
.example.on .bars i{height:100%}
.real .chip{font-size:.9em}

/* swap */
.swapbox{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:52%;padding:1.3em;display:flex;flex-direction:column;gap:.7em}
.sw-row{padding:.8em 1em;border-radius:.8em;background:rgba(255,255,255,.035);display:flex;flex-direction:column;gap:.5em}
.sw-v{display:flex;align-items:center;gap:.7em}
.sw-v .coin{width:2.2em;height:2.2em;font-size:1em}
.sw-v b{font:700 1.8em var(--ffd),InterDisplay,sans-serif;flex:1;font-variant-numeric:tabular-nums}
.sw-v span{color:var(--mu);font-weight:600}
.sw-mid{display:grid;place-items:center;margin:-1.2em 0;z-index:1}
.spin{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320;animation:spin 3s var(--ease) infinite}
.rate{display:flex;align-items:center;gap:.5em;font-size:.85em;color:var(--mu);position:relative;padding-bottom:.4em}
.rate small{opacity:.7}
.rate .live{width:.55em;height:.55em;border-radius:50%;background:var(--acc);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.rate .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--acc);width:0}
.rate.on .bar{animation:fill 1s linear infinite}
@keyframes fill{to{width:100%}}
.sw-btn{height:2.6em;border-radius:.7em;background:var(--acc);color:#0C1320;font-weight:700}
.noaddr{position:relative;align-items:center;flex-direction:row;justify-content:space-between}
.noaddr code{font-size:1em}
.noaddr .ok{width:2em;height:2em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320}
.bridge,.src{flex-direction:row;align-items:center;justify-content:center;gap:.6em}
.flow{color:var(--acc);animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(.3em)}}
[dir=rtl] .flow,[dir=rtl] .arrow{transform:scaleX(-1)}
.owner{flex-direction:row;align-items:center;justify-content:center;gap:1.2em;color:var(--acc)}
.owner .coins{display:flex;align-items:center;gap:.4em}
.owner .coin{width:2.4em;height:2.4em;font-size:1em}

/* lend */
.loan{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1.4em}
.cols{display:flex;align-items:flex-end;justify-content:center;gap:1.6em}
.col{display:flex;flex-direction:column;align-items:center;gap:.5em}
.cols .bar{width:5em;border-radius:.6em .6em .2em .2em;display:grid;place-items:center;font:700 1.6em var(--ffd),InterDisplay,sans-serif;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease) .3s}
.cols.on .bar{transform:none}
.bar.coll{height:6.3em;background:linear-gradient(color-mix(in srgb,var(--acc) 85%,#FFFFFF),color-mix(in srgb,var(--acc) 35%,transparent));color:#0C1320;font-size:1.3em}
.bar.ln{height:4.2em;background:rgba(255,255,255,.08);border:1px solid var(--line2);font-size:1.3em}
.cols .arrow{color:var(--acc);padding-bottom:2em}
.sched{padding:1em 1.2em}
.sched .bars{display:flex;gap:.35em;align-items:flex-end;height:4.2em;margin-top:.6em}
.sched .bars i{flex:1;height:0;background:linear-gradient(var(--acc),color-mix(in srgb,var(--acc) 20%,transparent));border-radius:.2em .2em 0 0;transition:height .5s var(--ease);transition-delay:calc(var(--i) * 110ms + .3s)}
.sched.on .bars i{height:var(--h)}
.axis{display:flex;justify-content:space-between;font-size:.75em;color:var(--mu);margin-top:.3em}
.book{position:absolute;inset:0;margin:auto;width:74%;height:max-content;padding:1.2em;display:flex;flex-direction:column;gap:.55em}
.book .hdr{display:flex;justify-content:space-between;color:var(--mu);font-size:.85em;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.2em}
.gauge{display:flex;align-items:center;gap:1em;margin-top:.6em;padding-top:.8em;border-top:1px solid var(--line)}
.gauge svg{width:6em;height:3.5em}
.gauge .trk{fill:none;stroke:var(--line2);stroke-width:8;stroke-linecap:round}
.gauge .prg{fill:none;stroke:var(--acc);stroke-width:8;stroke-linecap:round;stroke-dasharray:158;stroke-dashoffset:158;transition:stroke-dashoffset 2s var(--ease) .4s}
.gauge.on .prg{stroke-dashoffset:30}

/* card */
.card3d{position:absolute;inset-inline-start:0;top:50%;width:52%;perspective:60em;transform:translateY(-50%)}
.card3d .cface{position:relative;aspect-ratio:1.586}
.cface{position:absolute;inset:0;border-radius:1em;padding:1.2em 1.3em;display:flex;flex-direction:column;justify-content:space-between;color:#DDE7F6;
  background:radial-gradient(120% 140% at 0% 0%,#2A3A1C 0%,#152036 45%,#080C16 100%);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 2.5em 5em -1.5em rgba(0,0,0,.9),0 0 4em -1em color-mix(in srgb,var(--acc) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.18);
  animation:tilt 9s ease-in-out infinite;transform-style:preserve-3d}
.cface::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%);background-size:250% 100%;animation:sheen 6s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotateY(-14deg) rotateX(6deg)}50%{transform:rotateY(12deg) rotateX(-4deg)}}
@keyframes sheen{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
.ctop{display:flex;justify-content:space-between;align-items:center}
.ctop b{font:700 1.5em var(--ffd),InterDisplay,sans-serif;letter-spacing:.12em}
.nfc{width:1.4em;height:1.4em;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-left-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
.chipc{width:2.6em;height:2em;border-radius:.35em;background:linear-gradient(135deg,#A4BDE3,#506FA2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.cnum{font:500 1.25em ui-monospace,Menlo,monospace;letter-spacing:.08em;direction:ltr}
.cbot{display:flex;justify-content:space-between;font-size:.8em;letter-spacing:.14em;color:rgba(255,255,255,.7);direction:ltr}
.prices{display:flex;gap:.8em;align-self:center;width:100%}
.price{flex:1;padding:1.1em;display:flex;flex-direction:column;gap:.25em;align-items:flex-start;transition-delay:calc(var(--i) * 160ms)}
.price strong{font:700 2.3em/1 var(--ffd),InterDisplay,sans-serif;color:var(--acc)}
.price s{color:var(--mu);font-size:.9em}
.price small{color:var(--tx);font-size:.85em}
.price .valid{font-size:.75em;color:var(--mu);margin-top:.3em}
.prices.on .price{opacity:1}

.cardimg{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.cardimg.single{border-radius:4.6%/7.3%;box-shadow:0 2.5em 5em -1.5em rgba(0,0,0,.95),0 0 4em -1.2em color-mix(in srgb,var(--acc) 30%,transparent)}
.cardimg.pair{filter:drop-shadow(0 2.2em 2.6em rgba(0,0,0,.85)) drop-shadow(0 0 2.5em color-mix(in srgb,var(--acc) 18%,transparent))}
.tiltwrap{position:relative;animation:tilt 9s ease-in-out infinite;transform-style:preserve-3d;border-radius:4.6%/7.3%;overflow:hidden}
.tiltwrap .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);background-size:250% 100%;animation:sheen 6s ease-in-out infinite;pointer-events:none}
.cardpair{position:absolute;inset-inline-start:0;top:50%;width:54%;transform:translateY(-50%)}
.cardpair .cardimg{animation:floaty 7s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -.5em}}
.pthumb{width:100%;border-radius:.45em;margin-bottom:.5em;box-shadow:0 .6em 1.2em -.4em rgba(0,0,0,.8)}
.startcards{position:absolute;inset-inline-end:0;top:50%;width:40%;transform:translateY(-50%)}
.startcards .cardimg{animation:floaty 7s ease-in-out infinite}

/* telegram */
.tg{position:absolute;inset:0;margin:auto;width:58%;height:100%;display:flex;flex-direction:column;overflow:hidden}
.tg-h{display:flex;align-items:center;gap:.7em;padding:.9em 1.1em;border-bottom:1px solid var(--line)}
.tg-h .av{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320}
.tg-h small{display:block;color:var(--acc);font-size:.75em}
.tg-body{flex:1;padding:1em;display:flex;flex-direction:column;gap:.55em;justify-content:flex-end;overflow:hidden}
.msg{max-width:82%;padding:.6em .8em;border-radius:.9em;font-size:.9em;line-height:1.35;background:rgba(255,255,255,.06);align-self:flex-start;display:none}
.msg.on{display:block;animation:pop .55s var(--spring) both;animation-delay:var(--d,0s)}
@keyframes pop{from{opacity:0;transform:translateY(.8em) scale(.94)}to{opacity:1;transform:none}}
.msg .v{display:block;font:700 1.25em var(--ffd),InterDisplay,sans-serif;color:var(--acc);margin-top:.15em}
.msg.out{align-self:flex-end;background:color-mix(in srgb,var(--acc) 85%,#000000);color:#0C1320;font-weight:600}
.msg.btn{align-self:stretch;max-width:none;text-align:center;border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc);background:transparent;font-weight:600}
.msg.sys{align-self:center;font-size:.75em;color:var(--mu);background:transparent;border:1px solid var(--line2)}
.msg.warn{align-self:stretch;max-width:none;background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);font-weight:600}
.msg .ic{width:1em;height:1em;vertical-align:-.15em;color:var(--acc)}
.msg.out .ic{color:#0C1320}
.qrm{padding:.4em;background:#FFFFFF}
.qrm .qr{width:6em;height:6em;display:block}
.perm{position:absolute;inset-inline-start:0;top:0;display:flex;flex-direction:column;gap:.5em;z-index:2}
.perm .chip{color:var(--mu)}
.perm .chip .ic:last-child{color:#FF8A70}

/* security */
.vault{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:54%;aspect-ratio:1}
.v-ring{position:absolute;inset:8%;width:84%;height:84%;animation:spin 60s linear infinite}
.v-ring circle{fill:none;stroke:var(--line2);stroke-width:1.5}
.v-ring circle.d{stroke:var(--acc);stroke-dasharray:3 9;opacity:.6}
.v-core{position:absolute;inset:0;display:grid;place-items:center;color:var(--acc);filter:drop-shadow(0 0 1.5em var(--acc))}
.lk{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-10.5em) rotate(calc(-1 * var(--a)))}
.lk span{position:absolute;left:-1.3em;top:-1.3em;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(14,21,36,.9);color:var(--mu);transition:.5s;transition-delay:calc(var(--i) * 260ms + .3s)}
.lk em{position:absolute;top:1.5em;left:50%;transform:translateX(-50%);font-size:.72em;color:var(--mu);white-space:nowrap;font-weight:600;transition:.5s;transition-delay:calc(var(--i) * 260ms + .3s)}
.lk.on span{background:var(--acc);color:#0C1320;border-color:var(--acc);box-shadow:0 0 1.4em var(--acc)}
.lk.on em{color:var(--tx)}
.sc .lk[data-b]{opacity:1;translate:none;scale:none}
.keys{position:absolute;left:0;right:0;bottom:-2%;display:flex;justify-content:center;gap:.5em;flex-wrap:wrap}
.alarm .ic{color:#FF8A70;animation:blink .8s infinite}
.tf{display:grid;place-items:center;align-self:center}
.tf strong{font:700 5em var(--ffd),InterDisplay,sans-serif;color:var(--acc);text-shadow:0 0 .4em color-mix(in srgb,var(--acc) 50%,transparent)}

/* gateway */
.checkout{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:50%;padding:1.2em;display:flex;flex-direction:column;gap:.9em;overflow:hidden}
.co-h{display:flex;align-items:center;gap:.6em}
.co-h .ic{color:var(--acc)}
.co-h span{margin-inline-start:auto;font-size:.8em;color:var(--mu)}
.co-amt{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.co-amt strong{font:700 1.9em var(--ffd),InterDisplay,sans-serif}
.co-qr{display:flex;gap:1em;align-items:center}
.co-qr .qr{width:6.2em;height:6.2em;border-radius:.5em}
.co-qr div{display:flex;flex-direction:column;gap:.3em}
.co-btn{height:2.6em;border-radius:.7em;display:grid;place-items:center;background:var(--acc);color:#0C1320;font-weight:700}
.paid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6em;background:rgba(12,18,30,.88);backdrop-filter:blur(6px)}
.paid b{font:700 2em var(--ffd),InterDisplay;color:var(--acc)}
.ok-ring{width:5em;height:5em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320;transform:scale(.4);transition:transform .6s var(--spring) .2s}
.paid.on .ok-ring{transform:none}
.sandbox{flex-direction:row;align-items:center;gap:.8em}

/* subaccounts */
.sc-sub .edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.edges .e{fill:none;stroke:var(--line2);stroke-width:.35;opacity:0;transition:opacity .8s .3s}
.edges .e.on{opacity:1}
.edges .flowline{fill:none;stroke:var(--acc);stroke-width:.6;stroke-dasharray:2 3;opacity:0;animation:dash 1.2s linear infinite}
.edges .flowline.on{opacity:1}
@keyframes dash{to{stroke-dashoffset:-10}}
.nd{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 100% / 70);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.3em}
[dir=rtl] .nd{left:auto;right:calc(var(--x) * 1%);transform:translate(50%,-50%)}
.nd .ic{width:2.8em;height:2.8em;padding:.6em;border-radius:50%;border:1px solid var(--line2);background:rgba(14,21,36,.9);color:var(--acc);box-sizing:border-box}
.nd b{font-size:.8em;white-space:nowrap}
.nd.main .ic{width:3.8em;height:3.8em;background:var(--acc);color:#0C1320;border-color:var(--acc);box-shadow:0 0 2em color-mix(in srgb,var(--acc) 55%,transparent)}
.nd.sm .ic{width:2.2em;height:2.2em;padding:.45em}
.nd.ghost .ic{border-style:dashed;color:var(--mu)}
.sc-sub[data-x]{}
.invite{position:absolute;inset-inline-end:0;top:0}
.pk{position:absolute;inset-inline-end:0;bottom:4%;display:flex;gap:.5em;color:var(--acc)}
.pk .ic{width:2.2em;height:2.2em;padding:.45em;border:1px solid var(--line2);border-radius:.6em;background:rgba(14,21,36,.85)}
.limits{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:.6em}
.sc .nd[data-b]{scale:.6}.sc .nd[data-b].on{scale:none}

/* market */
.flow{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:2em}
.steps{display:flex;justify-content:space-between;position:relative}
.sc-market .steps .line{position:absolute;left:5%;right:5%;top:1.6em;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform 2.6s linear .2s;z-index:0;opacity:1}
[dir=rtl] .sc-market .steps .line{transform-origin:right}
.sc-market .steps .line.on{transform:scaleX(1)}
.st{display:flex;flex-direction:column;align-items:center;gap:.6em;width:19%;text-align:center;z-index:1;transition-delay:calc(var(--i) * 520ms)!important}
.st .bub{width:3.2em;height:3.2em;border-radius:50%;display:grid;place-items:center;background:#111A2C;border:1px solid var(--line2);color:var(--acc)}
.st.on .bub{border-color:var(--acc);box-shadow:0 0 1.2em color-mix(in srgb,var(--acc) 45%,transparent)}
.st:last-child.on .bub{background:var(--acc);color:#0C1320}
.st b{font-size:.82em;font-weight:600}
.sc .st[data-b]{opacity:.35;translate:none;scale:none}
.sc .st[data-b].on{opacity:1}
.disc{align-self:center}
.dispute{display:flex;justify-content:center;gap:.6em}
.escrow{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;gap:1em}
.party{width:30%;padding:1.4em 1em;display:flex;flex-direction:column;align-items:center;gap:.5em;color:var(--acc)}
.party b{color:var(--tx)}
.escrow .mid{display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center}
.escrow .mid b{font:700 1.4em var(--ffd),InterDisplay,sans-serif}
.escrow .mid small{color:var(--mu)}

/* start */
.sc-start .steps{position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:56%;display:flex;flex-direction:column;gap:.7em}
.srow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:1em;row-gap:.2em;padding:.9em 1.1em}
.srow .n{width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;background:var(--acc);color:#0C1320;font-weight:700}
.srow b{flex:1;font-size:1.15em}
.srow small{grid-column:2/4;grid-row:2;color:var(--mu);font-size:.82em}
.srow .tick{color:var(--acc)}
.contact{position:absolute;inset-inline-end:0;top:50%;transform:translateY(-50%);width:34%;padding:1.3em;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7em}
.contact .av{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.contact small{display:block;color:var(--mu);margin-top:.3em}

/* kinetic */
.sc-kinetic{display:flex;flex-direction:column;justify-content:center;gap:.7em}
.krow{display:flex;align-items:center;gap:.8em;padding:.9em 1.1em;font-size:1.1em}
.krow .ic{color:var(--acc)}

/* ================= Responsiv ================= */
@media (max-width:1100px){:root{--side:250px}}
@media (max-width:900px){
  :root{--top:56px}
  #kp{grid-template-columns:minmax(0,1fr)}
  .kp-top{gap:8px;padding:0 10px;overflow:hidden}
  .tools{gap:6px}
  .only-m{display:grid}
  .logo span,.partner{display:none}
  .kp-side{position:absolute;top:var(--top);bottom:0;inset-inline-start:0;width:min(86vw,320px);transform:translateX(-105%);transition:transform .35s var(--ease);box-shadow:0 0 60px rgba(0,0,0,.8)}
  [dir=rtl] .kp-side{transform:translateX(105%)}
  #kp.menu-open .kp-side{transform:none}
  .kp-stage{grid-column:1}
  .langs button{padding:7px 6px;font-size:10.5px}
  .logo b{font-size:19px}
}
@media (max-width:420px){
  #kp-snd{display:none}
  .ib{width:34px;height:34px}
  .pill{height:34px;padding:0 10px}
  #kp-fs,#kp-cc{display:none}
  .pill .lp,.pill .lz{display:none!important}
  .pill{padding:0 12px}
}
@container stage (max-aspect-ratio: 1/1){
  .head{top:3cqh}
  .head h2{font-size:clamp(22px,7cqw,40px)}
  .viz{inset-inline:4cqw;top:14cqh;width:92cqw;height:50cqh}
  .show{top:65.5cqh;width:92cqw;font-size:clamp(22px,7.4cqw,44px)}
  .cap{bottom:12cqh;max-width:none;font-size:clamp(14px,4cqw,20px)}
  .legal{max-width:92cqw;bottom:19cqh}
  .sc{font-size:2.35cqw}
}
/* Hochformat (Handy): Szenen untereinander statt nebeneinander */
@container stage (max-aspect-ratio: 1/1){
  .noaudio{display:none}
  .sc{font-size:2.6cqw}
  .sc .side{top:auto;bottom:0;transform:none;width:100%}
  .bal-wrap,.card3d,.cardpair,.swapbox,.checkout,.vault{left:0;right:0;margin:0 auto;top:0;transform:none;width:62%}
  .bal-wrap{width:64%}
  .cardpair{width:74%}
  .sc-start .steps{top:0;transform:none;width:100%}
  .startcards,.contact{top:auto;bottom:0;transform:none;width:62%;left:0;right:0;margin:0 auto}
  .timeline{top:0;transform:none;width:100%}
  .warn-card{top:auto;bottom:0;margin:0;width:100%}
  .tg{width:86%}
  .st b{font-size:.7em}
  .prices .price strong{font-size:1.9em}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.2s!important}}

/* ===== v1.3: Sprachauswahl, Intro, Fußzeile, Rechtliche Hinweise, Karten am Ende ===== */
.flag{width:22px;height:15px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.lsel{position:relative;display:inline-flex;align-items:center}
.lcur{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line2);border-radius:10px;font-size:12.5px;font-weight:700;color:var(--tx);transition:.2s}
.lcur:hover{border-color:var(--acc)}
.lcur svg:not(.flag){width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;opacity:.7}
.lsel.big .lcur{height:46px;min-width:190px;justify-content:space-between;padding:0 14px 0 16px;font-size:15px;border-radius:10px;background:rgba(14,21,36,.55);gap:10px}
.lsel.big .lcur b{flex:1;text-align:start}
.lsel.big .lcur .flag{width:26px;height:17px}
.lpanel{position:fixed;z-index:95;width:300px;max-height:min(420px,70vh);display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:#111A2C;border:1px solid var(--line2);box-shadow:0 24px 60px -12px rgba(0,0,0,.85)}
.lpanel[hidden]{display:none}
.l-search{width:100%;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line2);background:#0B111C;color:var(--tx);font:inherit;font-size:14px;outline:none}
.l-search:focus{border-color:var(--acc)}
.l-list{overflow:auto;display:grid;gap:4px}
.lopt{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center;text-align:start;padding:9px 12px;min-height:50px;line-height:1.2;border-radius:10px;border:1px solid transparent;transition:.15s}
.lopt .flag{grid-row:1/3;width:28px;height:19px}
.lopt b{font-size:14px;align-self:end}
.lopt small{font-size:11.5px;color:var(--mu);align-self:start}
.lopt:hover{background:rgba(255,255,255,.05)}
.lopt.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.lnone{color:var(--mu);font-size:13px;margin:6px}

/* Fußzeile auf jeder Folie: Exklusiv-Hinweis + Rechtliche Hinweise */
.ctrl{bottom:calc(2.4cqh + 22px)}
.kp-foot{position:absolute;inset-inline:3.5cqw;bottom:max(6px,1cqh);z-index:6;display:flex;align-items:center;gap:6px 14px;flex-wrap:nowrap;font-size:11px;line-height:1.3;color:var(--mu);white-space:nowrap;overflow:hidden}
.kp-foot .excl{display:flex;gap:.35em;min-width:0;color:var(--mu);text-decoration:none;text-transform:lowercase;letter-spacing:.01em}
.kp-foot .excl .ex-t{overflow:hidden;text-overflow:ellipsis}
.kp-foot .excl b{flex:none}
.kp-foot .excl b{color:var(--acc);font-weight:600}
.kp-foot .excl:hover b{text-decoration:underline}
.kp-foot .lshort{margin-inline-start:auto;overflow:hidden;text-overflow:ellipsis;opacity:.8}
.kp-foot .lbtn{flex:none;font-size:11px;color:var(--tx);padding:2px 9px;border:1px solid var(--line2);border-radius:99px;background:rgba(8,12,22,.6)}
.kp-foot .lbtn:hover{border-color:var(--acc)}
.legal{bottom:calc(9.5cqh + 14px)}
.side-legal{display:block;margin:8px 16px 16px;padding:9px 12px;width:calc(100% - 32px);text-align:start;font-size:12px;color:var(--mu);border:1px solid var(--line2);border-radius:10px}
.side-legal:hover{color:var(--tx);border-color:var(--acc)}
.kp-side{display:flex;flex-direction:column}
.kp-side nav{flex:1;min-height:0;overflow:auto}

/* Startseite */
.hero-excl{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:22px;padding:9px 16px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);color:var(--tx);text-decoration:none;font-size:13.5px}
.hero-excl i{font-style:normal;color:var(--acc)}
.hero-excl b{color:var(--acc);font-weight:700}
.hero-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:26px;font-size:12px}
.hero-legal button,.hero-legal a{color:var(--mu);text-decoration:none}
.hero-legal button:hover,.hero-legal a:hover{color:var(--tx)}

/* Intro */
.kp-intro{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#070B15;overflow:hidden;--isec:9s}
.kp-intro[hidden]{display:none}
.kp-intro .iv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s}
.kp-intro.go .iv{opacity:.55}
.kp-intro::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 45%,transparent,rgba(7,11,20,.85) 75%),linear-gradient(color-mix(in srgb,var(--acc) 4%,transparent) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,color-mix(in srgb,var(--acc) 4%,transparent) 1px,transparent 1px) 0 0/64px 64px;pointer-events:none}
.kp-intro .ifx{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.i-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:min(2.2vh,18px);padding:24px;width:min(980px,100%)}
.i-in>*{opacity:0}
.i-kick{font-size:clamp(11px,1.2vw,14px);letter-spacing:.32em;text-transform:uppercase;color:var(--acc);font-weight:700}
.i-logo{display:flex;align-items:flex-end;gap:.08em;font:700 clamp(64px,12vw,170px)/.9 var(--ffd),InterDisplay,Inter;letter-spacing:-.05em}
.i-logo .dot{width:.16em;height:.16em;border-radius:50%;background:var(--acc);margin-bottom:.12em;box-shadow:0 0 .4em var(--acc)}
.i-lines{display:flex;flex-wrap:wrap;justify-content:center;gap:.2em .45em;font:700 clamp(24px,4vw,56px)/1.1 var(--ffd),InterDisplay,Inter;letter-spacing:-.03em}
.i-lines span{opacity:0;transform:translateY(.4em);filter:blur(8px)}
.i-lines span:nth-child(2){color:var(--acc)}
.i-card{width:min(440px,70vw);max-height:30vh;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
.i-excl{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:clamp(13px,1.3vw,16px);color:var(--mu)}
.i-excl b{color:var(--acc)}
.i-skip{position:absolute;z-index:3;bottom:28px;inset-inline-end:28px}
.i-bar{position:absolute;z-index:3;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06)}
.i-bar i{display:block;height:100%;width:0;background:var(--acc)}
.kp-intro.go .i-bar i{animation:iBar var(--isec) linear forwards}
.kp-intro.go .i-kick{animation:iUp .9s var(--ease) .3s forwards}
.kp-intro.go .i-logo{animation:iLogo 1.4s var(--spring) .6s forwards}
.kp-intro.go .i-lines{opacity:1}
.kp-intro.go .i-lines span{animation:iWord .9s var(--ease) forwards}
.kp-intro.go .i-lines span:nth-child(1){animation-delay:1.6s}
.kp-intro.go .i-lines span:nth-child(2){animation-delay:2.3s}
.kp-intro.go .i-lines span:nth-child(3){animation-delay:3s}
.kp-intro.go .i-card{animation:iCard 1.6s var(--ease) 3.6s forwards,iFloat 6s ease-in-out 5.2s infinite}
.kp-intro.go .i-excl{animation:iUp .9s var(--ease) 5s forwards}
.kp-intro.out{opacity:0;transition:opacity .6s}
@keyframes iBar{to{width:100%}}
@keyframes iUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes iLogo{from{opacity:0;transform:scale(.6);filter:blur(16px)}to{opacity:1;transform:none;filter:none}}
@keyframes iWord{to{opacity:1;transform:none;filter:none}}
@keyframes iCard{from{opacity:0;transform:translateY(60px) rotateX(35deg) scale(.85)}to{opacity:1;transform:none}}
@keyframes iFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Modale Fenster: Sprache + Rechtliche Hinweise */
.kp-lm,.kp-langm{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(6,9,15,.8);backdrop-filter:blur(6px)}
.kp-lm[hidden],.kp-langm[hidden]{display:none}
.lm-box{position:relative;width:min(860px,100%);max-height:min(86vh,900px);overflow:auto;padding:28px 30px 30px;border-radius:18px;background:linear-gradient(170deg,#17223A,#0C121E);border:1px solid color-mix(in srgb,var(--acc) 30%,transparent);box-shadow:0 30px 80px -20px rgba(0,0,0,.9);color:var(--tx);font-size:14.5px;line-height:1.6;text-align:start}
.lm-box h2{margin:0 0 8px;font:700 26px/1.2 var(--ffd),InterDisplay,Inter}
.lm-box h3{margin:20px 0 6px;font:700 16px var(--ffd),InterDisplay,Inter;color:var(--acc)}
.lm-box p{margin:0 0 10px;color:#D1DEF3}
.lm-box .muted{color:var(--mu)}
.lm-intro{padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);background:color-mix(in srgb,var(--acc) 7%,transparent)}
.lm-x{position:sticky;top:0;float:inline-end;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:#111A2C;color:var(--tx);cursor:pointer;font-size:15px;z-index:2}
.lm-prov{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lm-prov li{padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--line2);font-size:13.5px;color:#D1DEF3}
.lm-links{display:flex;flex-wrap:wrap;gap:8px 16px}
.lm-box a{color:var(--acc);font-size:13.5px;word-break:break-word}
.lm-ch dt{margin-top:10px;font-weight:700}
.lm-ch dd{margin:2px 0 0;color:var(--mu);font-size:13.5px}
.lang-box{width:min(460px,100%);display:flex;flex-direction:column;gap:12px;text-align:center}
.lang-box h2{margin:0}
.lang-box p{margin:0}
.lang-box .l-list{max-height:min(46vh,380px);text-align:start}
.lang-box .l-go{align-self:center;min-width:180px;justify-content:center}
@media (max-width:640px){.lm-box{padding:22px 18px}}

/* Folie „Rechtliche Hinweise“ */
.sc-legal .lg-grid{position:absolute;inset:0 0 4em 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em;align-content:center}
.lg-tile{padding:1em 1.1em;display:flex;flex-direction:column;gap:.35em}
.lg-tile .ic{color:var(--acc);width:1.5em;height:1.5em}
.lg-tile b{font-size:.95em}
.lg-tile p{margin:0;font-size:.62em;line-height:1.5;color:#D3D7E0}
.sc-legal .lg-more{position:absolute;left:0;right:0;bottom:.4em;margin:auto;width:max-content;font-size:.75em}
#kp.silent .cap{display:none}

/* Abschluss: Karten mit Preisen + Bestellen */
.sc-outro .vault-rings.small{opacity:.35}
.sc-outro .o-top{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;align-items:center;gap:.4em}
.sc-outro .o-top .intro-brand{position:relative;inset:auto}
.sc-outro .o-top .intro-brand b{font-size:2.6em}
.o-excl{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:.3em;font-size:.6em;padding:.45em 1em;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);background:color-mix(in srgb,var(--acc) 8%,transparent);color:var(--tx);text-decoration:none}
.o-excl i{font-style:normal;color:var(--acc)}
.o-excl b{color:var(--acc)}
.o-cards{position:absolute;left:0;right:0;top:24%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8em}
.o-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.25em;padding:.8em .9em 1em}
.o-card .cardimg{width:82%;max-height:6.4em;object-fit:contain;filter:drop-shadow(0 .8em 1.2em rgba(0,0,0,.6));margin-bottom:.2em}
.o-name{font-size:.72em}
.o-price{display:flex;align-items:baseline;gap:.4em}
.o-price strong{font:700 1.5em/1 var(--ffd),InterDisplay,Inter;color:var(--acc)}
.o-price s{font-size:.55em;color:var(--mu)}
.o-mon{font-size:.55em;color:var(--mu)}
.o-card .cta{font-size:.62em;margin-top:.4em}
.o-foot{position:absolute;left:0;right:0;top:78%;display:flex;flex-direction:column;align-items:center;gap:.25em;text-align:center}
.o-foot small{font-size:.52em;color:var(--mu)}
.o-foot .cta{font-size:.58em;margin-top:.3em;height:2.4em}
#kp.finished .fin{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
#kp.finished .fin a.pill{text-decoration:none}

@media (max-width:900px){
  .kp-foot .lshort{display:none}
  .kp-foot .lbtn{margin-inline-start:auto}
  .lcur{height:32px;padding:0 8px}
  .lsel:not(.big) .lcur b{font-size:11px}
}
@container stage (max-aspect-ratio: 1/1){
  .ctrl{bottom:calc(2cqh + 22px)}
  .sc-legal .lg-grid{grid-template-columns:1fr 1fr;gap:.5em}
  .lg-tile p{font-size:.7em}
  .o-cards{top:28%}
}

.hero-act .pill.primary,.hero-act .lcur{height:46px}
.lpanel{padding:12px}
.lpanel .l-list{max-height:300px;min-height:0;flex:1}
@media (max-width:600px){.kp-foot .excl .ex-t{display:none}.kp-foot .excl::before{content:'★';color:var(--acc)}}

/* Login-Hinweis für Mitglieder (Abschlussfolie) – neongrün, pulsierend */
.o-member{position:absolute;left:0;right:0;top:70%;margin:auto;width:max-content;max-width:100%;display:flex;align-items:center;gap:.8em;padding:.55em .7em .55em 1em;border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.o-member p{margin:0;font-size:.6em;line-height:1.35;color:var(--tx);max-width:26em}
.o-member b{color:var(--acc)}
.cta.neon,.pill.neon{flex:none;background:#729DE2;border-color:#729DE2;color:#080E1B;font-weight:800;text-decoration:none;animation:neonPulse 1.6s ease-in-out infinite}
.o-member .cta.neon{font-size:.6em;height:2.4em}
@keyframes neonPulse{0%,100%{box-shadow:0 0 .3em #729DE2,0 0 .9em rgba(114,157,226,.55)}50%{box-shadow:0 0 .6em #729DE2,0 0 2em rgba(114,157,226,.85),0 0 3.2em rgba(114,157,226,.4);filter:brightness(1.12)}}
.sc-outro .o-foot{top:84%}
@container stage (max-aspect-ratio: 1/1){.o-member{top:72%;flex-direction:column;text-align:center;gap:.4em}.sc-outro .o-foot{top:88%}}
@media (prefers-reduced-motion:reduce){.cta.neon,.pill.neon{animation:none;box-shadow:0 0 1em rgba(114,157,226,.7)}}

/* Aufnahme-Modus für Videos (?video=1) */
#kp.vidmode{grid-template-columns:minmax(0,1fr);cursor:none}
#kp.vidmode .kp-side,#kp.vidmode .tools,#kp.vidmode #kp-menu,#kp.vidmode #kp-prev,#kp.vidmode #kp-next,#kp.vidmode .noaudio,#kp.vidmode .bigplay,#kp.vidmode #kp-again,#kp.vidmode .i-skip,#kp.vidmode .kp-foot .lbtn{display:none!important}
#kp.vidmode .kp-stage{grid-column:1}
#kp.vidmode *{cursor:none!important}
.vflash{position:fixed;inset:0;z-index:999;background:#FFFFFF}

/* Abschlussfolie als Spalte: nichts überlappt, egal welches Seitenverhältnis */
.sc-outro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55em}
.sc-outro .o-top,.sc-outro .o-cards,.sc-outro .o-member,.sc-outro .o-foot{position:relative;inset:auto;top:auto;left:auto;right:auto;margin:0}
.sc-outro .o-cards{width:100%}
.sc-outro .o-card .cardimg{max-height:min(5.2em,22cqh)}
.sc-outro .o-top .intro-brand b{font-size:2.2em}
.sc-outro .vault-rings.small{position:absolute}
@container stage (max-aspect-ratio: 1/1){.sc-outro .o-member{top:auto}.sc-outro .o-foot{top:auto}}
/* v1.4: Chinesisch (vereinfacht/traditionell) – passende Schriften, Zeilenumbruch ohne Leerzeichen */
html:lang(zh-Hans) body,html:lang(zh-Hans) .lpanel{font-family:var(--ff),Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif}
html:lang(zh-Hant) body,html:lang(zh-Hant) .lpanel{font-family:var(--ff),Inter,"PingFang TC","PingFang HK","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC","Source Han Sans TC",system-ui,sans-serif}
html:lang(zh-Hans) *,html:lang(zh-Hant) *{letter-spacing:normal!important;hyphens:manual!important}
html:lang(zh-Hans) .show,html:lang(zh-Hant) .show,html:lang(zh-Hans) .cap,html:lang(zh-Hant) .cap{line-break:strict;word-break:normal;overflow-wrap:anywhere}
html:lang(zh-Hans) .show .w,html:lang(zh-Hant) .show .w{overflow-wrap:normal}
html:lang(zh-Hans) :is(.show,h1,h2,h3,b,strong,.big){font-family:var(--ffd),InterDisplay,Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Noto Sans CJK SC",sans-serif}
html:lang(zh-Hant) :is(.show,h1,h2,h3,b,strong,.big){font-family:var(--ffd),InterDisplay,Inter,"PingFang TC","PingFang HK","Microsoft JhengHei","Noto Sans TC","Noto Sans CJK TC",sans-serif}

/* ===================== Paymago ===================== */
.logo-img{height:22px;width:auto;display:block;align-self:center}
.i-logo img{height:clamp(46px,8vw,120px);width:auto;display:block;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--acc) 35%,transparent))}
.sc .chip{display:inline-flex;align-items:center;gap:.4em;padding:.45em .85em;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc) 35%,var(--line2));background:color-mix(in srgb,var(--acc) 8%,rgba(16,24,40,.6));font-size:.78em;font-weight:500;white-space:nowrap}
.sc .chip .ic{color:var(--acc)}
.sc .ic.lg{width:1.5em;height:1.5em}.sc .ic.xl{width:3em;height:3em}
.sc .stag{opacity:0;transform:translateY(.5em);transition:opacity .6s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 120ms + .15s)}

/* Intro */
.sc-pintro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1em}
.pi-orb{position:absolute;inset:4% 12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 28%,transparent),transparent 62%);filter:blur(10px);animation:piPulse 6s ease-in-out infinite}
@keyframes piPulse{50%{transform:scale(1.08);opacity:.75}}
.pi-cards{position:relative;height:13em;width:22em}
.pi-c{position:absolute;top:0;height:13em;width:auto;filter:drop-shadow(0 1.4em 1.6em rgba(0,0,0,.65))}
.pi-c1{left:1.2em;rotate:-9deg;animation:piF 7s ease-in-out infinite}
.pi-c2{right:1.2em;rotate:8deg;animation:piF 7s ease-in-out -3.5s infinite}
@keyframes piF{50%{translate:0 -.6em}}
.sc-pintro .pi-cards[data-b]{translate:0 2em;scale:.9}
.pi-brand{display:flex;flex-direction:column;align-items:center;gap:.5em}
.pi-logo{height:2.6em;width:auto;filter:drop-shadow(0 0 1em color-mix(in srgb,var(--acc) 40%,transparent))}
.pi-kick{font-size:.62em;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);font-weight:600}
.pi-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em}
.pi-chips .chip{opacity:0;transform:translateY(.4em);transition:.6s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.pi-chips.on .chip{opacity:1;transform:none}
.pi-stats{display:flex;gap:.7em}
.pi-stat{padding:.55em 1.1em;display:flex;flex-direction:column;align-items:center;min-width:7.5em}
.pi-stat b{font:700 1.25em/1.1 var(--ffd),sans-serif;color:var(--acc)}
.pi-stat small{font-size:.66em;color:var(--mu)}

/* Privat & Firma */
.sc-split{display:flex;flex-direction:column;justify-content:center;gap:.9em}
.sp-cols{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:1em}
.sp-col{padding:1.1em 1.1em;display:flex;flex-direction:column;gap:.55em}
.sp-h{display:flex;align-items:center;gap:.55em;margin-bottom:.35em}
.sp-h .ic{color:var(--acc)}
.sp-h b{font:700 1.15em/1.1 var(--ffd),sans-serif}
.sp-row{display:flex;gap:.5em;align-items:flex-start;font-size:.8em;line-height:1.3}
.sp-row .ic{color:var(--acc);flex:none;margin-top:.15em}
.sp-col.on .stag{opacity:1;transform:none}
.sp-mid,.sp-duo{position:relative;display:flex;justify-content:center}
.sp-mid span,.sp-duo span{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.2em;border-radius:99px;font-size:.8em;font-weight:600;border:1px solid var(--line2);background:var(--glass)}
.sp-duo span{background:var(--acc);color:#0C1320;border-color:var(--acc);box-shadow:0 .6em 2em -.6em var(--acc)}
.sp-mid .ic{color:var(--acc)}

/* IBAN */
.ib-card{position:absolute;left:8%;right:8%;top:0;padding:1.2em 1.4em;background:linear-gradient(135deg,rgba(44,66,112,.85),rgba(16,24,40,.85));overflow:hidden}
.ib-card::after{content:"";position:absolute;inset:-40% -10% auto auto;width:60%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);rotate:20deg;animation:ibSh 5s ease-in-out infinite}
@keyframes ibSh{0%{translate:-160% 0}60%,100%{translate:120% 0}}
.ib-top{display:flex;justify-content:space-between;align-items:center}
.ib-lbl{font-size:.66em;letter-spacing:.2em;text-transform:uppercase;color:var(--mu)}
.ib-tag{display:inline-flex;gap:.35em;align-items:center;font-size:.66em;font-weight:600;padding:.3em .7em;border-radius:99px;background:color-mix(in srgb,var(--acc) 20%,transparent);color:var(--acc)}
.ib-num{font:600 1.55em/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;margin:.55em 0 .5em;white-space:nowrap}
.ib-holder{display:flex;align-items:center;gap:.5em;font-size:.82em;color:var(--mu)}
.ib-chip{margin-inline-start:auto;width:2.2em;height:1.6em;border-radius:.3em;background:linear-gradient(135deg,#DCDFE5,#9196A1)}
.ib-ccy{position:absolute;left:0;right:0;top:9.6em;display:flex;align-items:center;gap:1em}
.ib-count{flex:none;display:flex;flex-direction:column;align-items:center;width:6.5em}
.ib-count b{font:700 2.6em/1 var(--ffd),sans-serif;color:var(--acc)}
.ib-count small{font-size:.66em;color:var(--mu)}
.ib-flow{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000000 12%,#000000 88%,transparent)}
.ib-track,.wo-track,.cb-track{display:flex;gap:.5em;width:max-content;animation:mq 26s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
[dir=rtl] .ib-track,[dir=rtl] .wo-track,[dir=rtl] .cb-track{animation-name:mqr}@keyframes mqr{to{transform:translateX(50%)}}
.ib-track span{padding:.5em .9em;border-radius:.6em;border:1px solid var(--line2);background:rgba(16,24,40,.7);font-weight:600;font-size:.82em}
.ib-tiles{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.7em}
.ib-t{padding:.8em 1em;display:flex;flex-direction:column;gap:.2em}
.ib-t small{font-size:.64em;color:var(--mu);line-height:1.25}
.ib-t b{font:700 1.5em/1.1 var(--ffd),sans-serif;color:var(--acc)}

/* Karte 3D */
.pc-stage{position:absolute;inset-inline-start:0;top:8%;width:52%;aspect-ratio:856/540;perspective:70em}
.pc-flip{position:absolute;inset:0;transform-style:preserve-3d;animation:pcSpin 12s ease-in-out infinite}
@keyframes pcSpin{0%,38%{transform:rotateY(-14deg) rotateX(6deg)}50%,88%{transform:rotateY(166deg) rotateX(6deg)}100%{transform:rotateY(346deg) rotateX(6deg)}}
.pc-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:4.5%/7%;overflow:hidden;box-shadow:0 1.6em 3em -1em rgba(0,0,0,.8)}
.pc-face img{width:100%;height:100%;object-fit:cover;display:block}
.pc-back{transform:rotateY(180deg)}
.pc-face .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16) 45%,transparent 60%);background-size:250% 100%;animation:sheen 4s ease-in-out infinite}
@keyframes sheen{0%{background-position:120% 0}100%{background-position:-120% 0}}
.pc-shadow{position:absolute;left:10%;right:10%;bottom:-18%;height:12%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 35%,transparent),transparent);filter:blur(6px)}
.pc-side{position:absolute;inset-inline-end:0;top:0;bottom:0;width:44%;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.pc-row{display:flex;align-items:center;gap:.6em;padding:.6em .85em;font-size:.8em}
.pc-row .ic{color:var(--acc);flex:none}
.pc-del{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.75em .9em}
.pc-del div{display:flex;flex-direction:column;gap:.2em}
.pc-del small{display:flex;align-items:center;gap:.35em;font-size:.64em;color:var(--mu)}
.pc-del b{font:700 1.1em/1.1 var(--ffd),sans-serif;color:var(--acc)}

/* Modelle */
.md-row{position:absolute;left:0;right:0;top:0;bottom:6.4em;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em}
.md-t{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:.9em .7em .8em;gap:.15em}
.md-t.best{border-color:color-mix(in srgb,var(--acc) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),0 1.5em 3em -1.5em color-mix(in srgb,var(--acc) 55%,transparent)}
.md-badge{position:absolute;top:.7em;inset-inline-end:.7em;font-size:.62em;font-weight:700;padding:.25em .6em;border-radius:99px;background:var(--acc);color:#0C1320}
.md-img{height:8.2em;display:grid;place-items:center;margin-bottom:.3em}
.md-img img{max-height:8.2em;max-width:100%;filter:drop-shadow(0 .8em 1em rgba(0,0,0,.6))}
.md-name{font:700 .95em/1.15 var(--ffd),sans-serif}
.md-sub{font-size:.62em;color:var(--mu)}
.md-price{display:flex;flex-direction:column;align-items:center;margin-top:.35em}
.md-price s{font-size:.7em;color:var(--mu)}
.md-price strong{font:700 1.5em/1.05 var(--ffd),sans-serif}
.md-price small{font-size:.58em;color:var(--mu)}
.md-mem{margin-top:.45em;padding:.35em .8em;border-radius:.6em;background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);display:flex;flex-direction:column;align-items:center}
.md-mem small{font-size:.56em;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.md-mem b{font:700 1.2em/1.1 var(--ffd),sans-serif;color:var(--acc)}
.md-mon{font-size:.56em;color:var(--mu);margin-top:.35em}
.md-incl{position:absolute;left:0;right:0;bottom:2.9em;display:flex;flex-wrap:wrap;justify-content:center;gap:.35em}
.md-incl .chip{font-size:.62em;opacity:0;transform:translateY(.4em);transition:.6s var(--ease);transition-delay:calc(var(--i) * 90ms)}
.md-incl.on .chip{opacity:1;transform:none}
.md-note{position:absolute;left:0;right:0;bottom:0;margin:auto;width:max-content;max-width:100%;display:flex;align-items:center;gap:.5em;padding:.5em 1.1em;border-radius:99px;background:var(--acc);color:#0C1320;font-size:.76em;font-weight:600}

/* Überweisen */
.fl-node{position:absolute;top:50%;translate:0 -50%;width:7em;padding:1em .6em;display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center;font-size:.85em;z-index:2}
.sc .fl-node[data-b]{translate:0 -45%}.sc .fl-node[data-b].on{translate:0 -50%}
.fl-node .ic{color:var(--acc)}
.fl-a{inset-inline-start:0}.fl-b{inset-inline-end:0}
.fl-rows{position:absolute;inset:6% 8.6em 22% 8.6em;display:flex;flex-direction:column;justify-content:space-around}
.fl-row{position:relative;height:2.6em;display:flex;align-items:center;justify-content:center}
.fl-line{position:absolute;left:-1.6em;right:-1.6em;top:50%;height:2px;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 20%,transparent),color-mix(in srgb,var(--acc) 55%,transparent),color-mix(in srgb,var(--acc) 20%,transparent))}
.fl-line em{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);opacity:0}
.fl-row.on .fl-line em{opacity:1;animation:flDot 2.2s linear infinite;animation-delay:calc(var(--i,0) * 300ms)}
[dir=rtl] .fl-row.on .fl-line em{animation-name:flDotR}
@keyframes flDot{from{left:0}to{left:calc(100% - 8px)}}@keyframes flDotR{from{left:calc(100% - 8px)}to{left:0}}
.fl-lbl{position:relative;padding:.4em 1em;display:flex;flex-direction:column;align-items:center;min-width:12em}
.fl-lbl b{font-size:.86em}.fl-lbl small{font-size:.6em;color:var(--mu)}
.fl-ok{position:absolute;left:0;right:0;bottom:0;margin:auto;width:max-content;display:flex;align-items:center;gap:.8em;padding:.7em 1.3em}
.fl-ok .ok-ring{width:2.4em;height:2.4em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#0C1320;scale:.4;transition:scale .6s var(--spring) .2s}
.fl-ok.on .ok-ring{scale:1}
.fl-ok div{display:flex;flex-direction:column}.fl-ok b{font:700 1.2em/1.1 var(--ffd),sans-serif}.fl-ok small{font-size:.66em;color:var(--mu)}

/* Gebühren */
.fe-box{position:absolute;left:4%;right:4%;top:0;max-height:100%;padding:1em 1.3em;display:flex;flex-direction:column}
.fe-h{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.6em;margin-bottom:.3em;border-bottom:1px solid var(--line2)}
.fe-h b{font:700 1.15em/1.1 var(--ffd),sans-serif;color:var(--acc)}
.fe-h span{font-size:.62em;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.fe-r{display:flex;justify-content:space-between;gap:1em;padding:.42em 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.8em}
.fe-r b{font-weight:600;text-align:end;white-space:nowrap}
.fe-r.on b{color:#FFFFFF}
.sc-fees .fe-r:last-of-type{border-bottom:0}
.fe-note{margin-top:.4em;padding-top:.5em;font-size:.58em;color:var(--mu)}

/* Limits */
.sc-limits{display:grid;grid-template-columns:.82fr 1.18fr;gap:.8em}
.sc-limits>div{position:relative;padding:.9em 1.1em;display:flex;flex-direction:column}
.li-h{display:flex;align-items:center;gap:.5em;margin-bottom:.5em}
.li-h .ic{color:var(--acc)}.li-h b{font:700 1em/1.1 var(--ffd),sans-serif}
.li-fees{align-self:start}
.li-r{padding:.32em 0}
.li-t{display:flex;justify-content:space-between;gap:.6em;font-size:.72em}
.li-t b{color:#FFFFFF;white-space:nowrap}
.li-bar{display:block;height:.38em;border-radius:99px;background:rgba(255,255,255,.07);margin-top:.28em;overflow:hidden}
.li-bar em{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc2),var(--acc));transition:width 1.4s var(--ease) .25s}
.li-r.on .li-bar em{width:var(--p)}

/* Funktionen-Raster */
.ft-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:.7em}
.ft-t{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8em;row-gap:.2em;align-content:center;align-items:center;padding:.8em 1em}
.ft-t b{align-self:end}.ft-t small{align-self:start}
.ft-i{grid-row:1/3;width:2.6em;height:2.6em;border-radius:.8em;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.ft-t b{font-size:.92em;line-height:1.2}
.ft-t small{font-size:.66em;color:var(--mu);line-height:1.3}

/* Team-Karten */
.tm-grid{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6em}
.tm-c{display:flex;flex-direction:column;gap:.5em;transition-delay:calc(var(--i) * 140ms)!important}
.tm-card{position:relative;aspect-ratio:1.586;border-radius:.7em;background:linear-gradient(145deg,#203051,#0A0F18 60%,#152036);box-shadow:0 1em 1.6em -.8em rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}
.tm-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 50%,transparent 65%)}
.tm-logo{position:absolute;top:.5em;inset-inline-start:.55em;width:1.1em;height:1.1em;border-radius:.2em;background:linear-gradient(135deg,#4D83D9,#3967B1 60%,#A67CB7)}
.tm-n{position:absolute;bottom:.45em;inset-inline-start:.55em;font-size:.6em;font-weight:600;color:#DEE5F1}
.tm-mc{position:absolute;bottom:.45em;inset-inline-end:.5em;display:flex}.tm-mc b{width:.85em;height:.85em;border-radius:50%;background:#585C60}.tm-mc b+b{margin-inline-start:-.35em;background:#7E8287}
.tm-bud b{font:700 1.05em/1.1 var(--ffd),sans-serif}
.tm-bar{display:block;height:.35em;border-radius:99px;background:rgba(255,255,255,.08);margin:.3em 0 .2em;overflow:hidden;opacity:1!important;translate:none!important}
.tm-bar em{display:block;height:100%;width:0;background:var(--acc);border-radius:99px;transition:width 1.3s var(--ease)}
.tm-bar.on em{width:var(--u)}
.tm-bud small{font-size:.58em;color:var(--mu)}
.tm-ctrl{position:absolute;left:0;width:56%;bottom:0;padding:.6em .9em;display:flex;flex-direction:column;gap:.25em}
.tm-ctrl .row{display:flex;align-items:center;gap:.6em;font-size:.74em;padding:.25em 0}
.tm-ctrl .row .ic{color:var(--acc)}
.tm-ctrl .toggle{margin-inline-start:auto;flex:none;width:2.6em}
.tm-ctrl .row span:not(.toggle){flex:1}
.tm-ctrl.on .stag{opacity:1;transform:none}
.tm-push{position:absolute;inset-inline-end:0;bottom:1.2em;width:40%;display:flex;align-items:center;gap:.6em;padding:.7em .9em;font-size:.7em;line-height:1.3}
.tm-push .ic{color:var(--acc);flex:none;width:1.4em;height:1.4em}
.sc .tm-push[data-b]{translate:1.5em 0}

/* App */
.ap-phone{position:absolute;inset-inline-start:4%;top:0;bottom:0;aspect-ratio:9/18.5;border-radius:2.2em;padding:.55em;background:linear-gradient(145deg,#263A61,#0C121E);box-shadow:0 2em 3em -1.2em rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.08)}
.ap-scr{height:100%;border-radius:1.75em;background:linear-gradient(180deg,#17223A,#0C121E);padding:.9em .85em;display:flex;flex-direction:column;gap:.35em;overflow:hidden;font-size:.74em}
.ap-sb{display:flex;justify-content:space-between;font-size:.72em;color:var(--mu);margin-bottom:.4em}
.ap-hi{color:var(--mu);font-size:.8em}.ap-name{font-size:1.05em}
.ap-bal{margin:.5em 0;padding:.8em;border-radius:1em;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 45%,#263A61),#1C2A47);display:flex;flex-direction:column;gap:.15em}
.ap-bal small{font-size:.72em;color:rgba(255,255,255,.75)}.ap-bal strong{font:700 1.5em/1.1 var(--ffd),sans-serif}
.ap-act{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.ap-act span{display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.5em .2em;border-radius:.7em;background:rgba(255,255,255,.05);font-size:.72em}
.ap-act .ic{color:var(--acc)}
.ap-tx{display:flex;flex-direction:column;gap:.3em;margin-top:.4em}
.ap-r{display:flex;align-items:center;gap:.5em;padding:.45em .5em;border-radius:.6em;background:rgba(255,255,255,.035)}
.ap-r i{width:1.8em;height:1.8em;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--acc)}
.ap-r b{margin-inline-start:auto;font-weight:600}.ap-r b.pos{color:#5FE0A0}
.ap-phone.on .stag{opacity:1;transform:none}
.ap-note{margin-top:auto;text-align:center;font-size:.6em;color:var(--mu2);letter-spacing:.12em;text-transform:uppercase}
.ap-side{position:absolute;inset-inline-end:0;top:0;bottom:0;width:54%;display:flex;flex-direction:column;justify-content:center;gap:.5em}
.ap-stores{display:flex;gap:.5em;margin-bottom:.4em}
.ap-f{display:flex;align-items:center;gap:.65em;padding:.65em .9em;font-size:.8em}
.ap-f .ic{color:var(--acc);flex:none}

/* Weltweit */
.wo-globe{position:absolute;inset-inline-start:0;top:0;width:52%;aspect-ratio:1}
.wo-globe svg{width:100%;height:100%;animation:woSpin 60s linear infinite}
@keyframes woSpin{to{transform:rotate(360deg)}}
.wo-lines{fill:none;stroke:color-mix(in srgb,var(--acc) 45%,transparent);stroke-width:.6}
.wo-pin{position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;margin:-1.2em;border-radius:50%;display:grid;place-items:center;font-size:.78em;font-weight:700;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);background:rgba(16,24,40,.8);animation:woOrb 18s linear infinite;animation-delay:calc(var(--i) * -3s)}
@keyframes woOrb{from{transform:rotate(0) translateX(8.6em) rotate(0)}to{transform:rotate(360deg) translateX(8.6em) rotate(-360deg)}}
.wo-stats{position:absolute;inset-inline-end:0;top:0;width:44%;display:flex;flex-direction:column;gap:.6em}
.wo-s{padding:.8em 1.1em;display:flex;align-items:baseline;gap:.6em}
.wo-s b{font:700 2.4em/1 var(--ffd),sans-serif;color:var(--acc)}
.wo-s small{font-size:.9em}
.wo-fx{position:absolute;left:0;right:0;bottom:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000000 10%,#000000 90%,transparent)}
.wo-track span{padding:.5em 1em;border-radius:.6em;border:1px solid var(--line2);background:rgba(16,24,40,.7);font-weight:600;font-size:.8em;white-space:nowrap}

/* Cashback */
.cb-coin{position:absolute;left:0;right:0;top:0;margin:auto;width:6.5em;height:6.5em;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--acc) 70%,#FFFFFF),var(--acc) 45%,color-mix(in srgb,var(--acc) 50%,#000000));color:#0C1320;box-shadow:0 0 3em color-mix(in srgb,var(--acc) 45%,transparent);animation:cbPulse 3.2s ease-in-out infinite}
@keyframes cbPulse{50%{transform:translateY(-.3em) scale(1.04);box-shadow:0 0 4.5em color-mix(in srgb,var(--acc) 60%,transparent)}}
.cb-coin small{font-size:.62em;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cb-cats{position:absolute;left:0;right:0;top:7.6em;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em}
.cb-c{display:flex;flex-direction:column;align-items:center;gap:.35em;padding:.65em .4em;text-align:center;font-size:.72em;opacity:0;transform:scale(.8);transition:.6s var(--spring);transition-delay:calc(var(--i) * 90ms)}
.cb-c .ic{color:var(--acc)}
.cb-cats.on .cb-c{opacity:1;transform:none}
.cb-par{position:absolute;left:0;right:0;top:58%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000000 10%,#000000 90%,transparent)}
.cb-soon{position:absolute;left:0;right:0;top:76%;margin:auto;width:max-content;display:flex;align-items:center;gap:.5em;padding:.5em 1.1em;border-radius:99px;border:1px dashed color-mix(in srgb,var(--acc) 60%,transparent);color:var(--acc);font-size:.78em;font-weight:600}

/* Krypto */
.cr-coins{position:absolute;left:0;right:0;top:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5em}
.cr-c{display:flex;flex-direction:column;align-items:center;gap:.2em;padding:.8em .3em;text-align:center}
.cr-coins.on .stag{opacity:1;transform:none}
.cr-s{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1.1em;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc)}
.cr-c b{font-size:.82em}.cr-c small{font-size:.6em;color:var(--mu)}
.cr-cards{position:absolute;left:0;right:0;top:8.2em;display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.cr-k{display:flex;align-items:center;gap:.8em;padding:1em 1.1em}
.cr-k .ic{color:var(--acc);flex:none}
.cr-k div{display:flex;flex-direction:column;gap:.15em}.cr-k b{font-size:.9em}.cr-k small{font-size:.68em;color:var(--mu)}
.cr-k strong{font:700 1.4em/1.1 var(--ffd),sans-serif;color:var(--acc)}
.cr-risk{position:absolute;left:0;right:0;bottom:.4em;margin:auto;width:max-content;max-width:100%;display:flex;align-items:center;gap:.5em;padding:.55em 1.1em;border-radius:.8em;border:1px solid rgba(255,138,112,.45);background:rgba(255,138,112,.08);color:#FFB3A3;font-size:.74em}

/* Sicherheit */
.ps-shield{position:absolute;inset-inline-start:0;top:0;width:34%;aspect-ratio:1;color:var(--acc);filter:drop-shadow(0 0 1.4em color-mix(in srgb,var(--acc) 45%,transparent))}
.ps-shield svg{width:100%;height:100%}
.ps-grid{position:absolute;inset-inline-end:0;top:0;width:62%;display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.ps-p{display:flex;align-items:center;gap:.55em;padding:.6em .8em;font-size:.74em}
.ps-p .ic{color:var(--acc);flex:none}
.ps-dep{position:absolute;inset-inline-end:0;width:62%;top:11.6em;display:flex;align-items:center;justify-content:center;gap:.7em}
.ps-dep>div{padding:.7em 1.2em;display:flex;flex-direction:column;align-items:center}
.ps-dep small{font-size:.64em;color:var(--mu)}.ps-dep b{font:700 1.45em/1.1 var(--ffd),sans-serif}
.ps-dep .hi{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}.ps-dep .hi b{color:var(--acc)}
.ps-plus{font:700 1.6em/1 var(--ffd),sans-serif;color:var(--acc)}
.ps-rules{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:.3em .9em;padding:.7em 1em;font-size:.72em}
.ps-rules div{display:flex;align-items:center;gap:.45em}.ps-rules .ic{color:#FF8A70;flex:none}
.ps-rules.on .stag{opacity:1;transform:none}

/* Partner */
.pa-lines{position:absolute;inset:0;width:100%;height:100%}
.pa-lines line{stroke:color-mix(in srgb,var(--acc) 55%,transparent);stroke-width:1.4;stroke-dasharray:2 1.5;animation:paDash 3s linear infinite;vector-effect:non-scaling-stroke}
@keyframes paDash{to{stroke-dashoffset:-14}}
.pa-center{position:absolute;left:50%;top:50%;translate:-50% -50%!important;padding:1.1em 1.4em}
.pa-logo{height:1.7em;width:auto;display:block}
.pa-n{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:.6em .9em;max-width:12em}
.sc .pa-n[data-b]{translate:-50% -40%}.sc .pa-n[data-b].on{translate:-50% -50%}
.pa-n b{font-size:.8em}.pa-n small{font-size:.6em;color:var(--mu)}
.pa-mission{position:absolute;left:0;right:0;bottom:-.3em;text-align:center;font:600 .86em/1.3 var(--ffd),sans-serif;color:var(--acc)}

/* Abschluss mit 3 Karten */
.sc-outro.pm .o-logo{height:2.3em;width:auto}
.o-cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.o-cards.three .o-card.best{border-color:color-mix(in srgb,var(--acc) 60%,transparent)}
.o-price{display:flex;flex-direction:column;align-items:center}
.o-price s{font-size:.62em;color:var(--mu)}
.o-mem{font-size:.62em;color:var(--acc);padding:.25em .6em;border-radius:.5em;background:color-mix(in srgb,var(--acc) 14%,transparent)}
.o-mem b{font-size:1.25em}

@container stage (max-aspect-ratio: 1/1){
  .sp-cols{grid-template-columns:1fr;inset:0 0 7em 0;gap:.5em}.sp-col{padding:.7em .9em;gap:.3em}
  .md-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4em}.md-img{height:6em}.md-img img{max-height:6em}
  .pc-stage{width:100%;top:0;inset-inline:0;max-width:24em;margin:auto}.pc-side{top:auto;width:100%;height:55%}
  .ap-phone{inset-inline-start:0}.wo-globe{width:46%}
  .o-cards.three{gap:.4em}
}

.pc-phone{position:absolute;inset-inline-start:-3%;top:66%;width:28%;aspect-ratio:9/17;border-radius:1.2em;padding:.3em;background:linear-gradient(145deg,#263A61,#0C121E);box-shadow:0 1.4em 2.4em -1em rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.1);z-index:3}
.pc-pscr{height:100%;border-radius:.95em;background:linear-gradient(180deg,#17223A,#0C121E);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;padding:.4em;text-align:center}
.pc-pscr small{font-size:.5em;color:var(--mu);letter-spacing:.08em;text-transform:uppercase}
.pc-pcard{width:92%;border-radius:.3em;box-shadow:0 .5em .9em -.4em rgba(0,0,0,.8);animation:pcTap 3s ease-in-out infinite}
@keyframes pcTap{50%{transform:translateY(-.25em) scale(1.03)}}
.pc-pscr b{font:700 .8em/1 var(--ffd),sans-serif;color:var(--acc)}
.pc-pscr span{font-size:.44em;color:var(--mu);padding:.25em .5em;border:1px solid var(--line2);border-radius:99px}

/* Begrüßung (wie KCC-Cover) */
.sc-pwelcome{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;text-align:center}
.pw-hello{font:700 3.2em/1 var(--ffd),sans-serif;letter-spacing:-.02em;background:linear-gradient(90deg,#FFFFFF,var(--acc) 55%,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .5em color-mix(in srgb,var(--acc) 35%,transparent))}
.sc .pw-hello[data-b]{scale:.85}.sc .pw-hello[data-b].on{scale:1;transition:scale 1.4s var(--spring),opacity .8s}
.cv-logo{position:relative;width:20em;height:8em;display:grid;place-items:center}
.cv-logo .logo-img{position:relative;width:17em;height:auto;filter:drop-shadow(0 0 1.2em color-mix(in srgb,var(--acc) 40%,transparent))}
.cv-logo .rays{position:absolute;width:24em;height:24em;left:50%;top:50%;margin:-12em 0 0 -12em;stroke:color-mix(in srgb,var(--acc) 16%,transparent);stroke-width:.35;animation:spin 60s linear infinite}
.cv-logo .ring{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);translate:-50% -50%}
.cv-logo .r1{width:13em;height:13em;animation:breathe2 4s ease-in-out infinite}
.cv-logo .r2{width:18em;height:18em;border-color:color-mix(in srgb,var(--acc) 15%,transparent);animation:breathe2 4s ease-in-out 1s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe2{50%{scale:1.06;opacity:.6}}
.pw-logo{overflow:visible}
.pw-sweep{position:absolute;left:50%;top:50%;width:17em;height:3em;translate:-50% -50%;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;mix-blend-mode:overlay;animation:sheen 3.5s ease-in-out infinite;pointer-events:none}
.cv-tag{font:600 .75em/1 var(--ffd),sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--acc)}
.pw-excl{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1.2em;border-radius:99px;background:var(--acc);color:#0C1320;font-weight:600;font-size:.82em;box-shadow:0 .8em 2em -.8em var(--acc)}
.cv-brands{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5em .9em;font:600 .95em var(--ffd),sans-serif;color:var(--tx)}
.cv-brands i{width:.35em;height:.35em;border-radius:50%;background:var(--acc)}
.cv-quote{font:italic 500 1.05em/1.3 var(--ffd),sans-serif;color:var(--acc2)}

/* ===== Team / Standorte / Kontakt (v1.1.0) ===== */
.sc-crew{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5em;align-content:center}
.cr-area{display:flex;flex-direction:column;gap:.5em;padding:.6em .35em .7em;border-radius:1em;border:1px solid var(--line2);background:linear-gradient(170deg,rgba(124,163,227,.06),rgba(12,18,30,.35));transition:opacity .6s,filter .6s,border-color .6s,background .6s,box-shadow .6s}
.cr-h{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em;font:700 .68em/1.1 var(--ffd),Inter;text-transform:uppercase;letter-spacing:.04em;color:var(--acc);text-wrap:balance}
.cr-h span{width:2.1em;height:2.1em;border-radius:.55em;display:grid;place-items:center;border:1px solid var(--line2);font-size:.95em;color:var(--acc2)}
.cr-p{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.2em}
.cr-ph,.pct-ph{position:relative;width:4.6em;height:4.6em;border-radius:50%;padding:.18em;background:conic-gradient(from 200deg,#7CA3E3,#4D83D9,#425885,#7CA3E3);box-shadow:0 .5em 1.2em -.4em rgba(0,0,0,.8)}
.cr-ph::before,.pct-ph::before{content:attr(data-in);position:absolute;inset:.18em;border-radius:50%;display:grid;place-items:center;background:#111A2B;font:700 1.1em var(--ffd),Inter;color:var(--acc)}
.cr-img{position:relative;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cr-p b{font:600 .74em/1.15 var(--ffd),Inter;white-space:nowrap}
.cr-p small{font-size:.64em;line-height:1.2;color:var(--mu)}
.cr-area.hot{border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:linear-gradient(170deg,rgba(124,163,227,.18),rgba(17,26,43,.5));box-shadow:0 0 2.5em -1em rgba(124,163,227,.6)}
.viz:not([data-beat="0"]) .sc-crew .cr-area:not(.hot){opacity:.35!important;filter:grayscale(.6)}
@container (max-height:460px){.cr-ph{width:3.6em;height:3.6em}.cr-area{gap:.35em}}

.sc-loc{display:flex;flex-direction:column;justify-content:center;gap:.7em}
.lc-map{position:relative;width:100%;aspect-ratio:2.6866;flex:none}
.lc-img{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.lc-arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lc-arcs path{fill:none;stroke:var(--acc2);vector-effect:non-scaling-stroke;stroke-width:1.6px;stroke-dasharray:4 5;opacity:0;translate:none!important;scale:none!important;transition:opacity .8s}
.lc-arcs path.on{opacity:.85;animation:lcdash 1.6s linear infinite}
@keyframes lcdash{to{stroke-dashoffset:-18}}
.lc-pin{position:absolute;width:0;height:0;z-index:2;translate:none!important;scale:none!important}
.lc-pin i{position:absolute;left:-.42em;top:-.42em;width:.84em;height:.84em;border-radius:50%;background:var(--acc2);box-shadow:0 0 .8em var(--acc),0 0 0 .18em rgba(12,18,30,.85)}
.lc-pin i::before,.lc-pin i::after{content:"";position:absolute;inset:-.1em;border-radius:50%;border:2px solid var(--acc);animation:lcping 2.2s ease-out infinite}
.lc-pin i::after{animation-delay:1.1s}
@keyframes lcping{from{scale:1;opacity:.9}to{scale:4.2;opacity:0}}
.lc-pin.hq i{width:1.15em;height:1.15em;left:-.575em;top:-.575em;background:#FFFFFF}
.lc-pin span{position:absolute;left:.9em;top:-.75em;white-space:nowrap;font:700 .66em/1 var(--ffd),Inter;padding:.35em .6em;border-radius:99em;background:rgba(12,18,30,.9);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);color:var(--tx)}
.lc-pin.l span{left:auto;right:.9em}
.lc-pin.hq span,.lc-pin.hot span{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;border-color:transparent}
[dir=rtl] .lc-pin span{left:.9em;right:auto}
.lc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5em}
.lc-f{display:flex;align-items:center;gap:.7em;padding:.6em .8em;transition:border-color .6s,box-shadow .6s,opacity .7s,translate .8s var(--ease)}
.lc-ic{flex:none;width:2.2em;height:2.2em;border-radius:.6em;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.lc-f b{display:block;font:700 .84em/1.2 var(--ffd),Inter}
.lc-f small{display:block;margin-top:.15em;font-size:.7em;color:var(--mu)}
.lc-f.hot{border-color:var(--acc);box-shadow:0 0 2em -.8em rgba(124,163,227,.6)}
@container (max-height:470px){.lc-map{width:82%;align-self:center}.lc-f small{display:none}}

.sc-pct{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em}
.pct-card{display:flex;align-items:center;gap:1.4em;padding:1.3em 1.6em;max-width:34em;width:100%}
.pct-ph{flex:none;width:8.4em;height:8.4em}
.pct-ring{position:absolute;inset:-.6em;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);animation:breathe2 3.5s ease-in-out infinite}
.pct-ring.r2{inset:-1.3em;border-color:color-mix(in srgb,var(--acc2) 22%,transparent);animation-delay:1s}
.pct-tx{display:flex;flex-direction:column;gap:.3em;min-width:0}
.pct-kick{font:700 .66em/1 var(--ffd),Inter;text-transform:uppercase;letter-spacing:.12em;color:var(--acc2)}
.pct-name{font:800 1.6em/1.05 var(--ffd),Inter;letter-spacing:-.02em}
.pct-role{font-size:.78em;color:var(--mu);line-height:1.3}
.pct-lines{display:flex;flex-direction:column;gap:.3em;margin-top:.4em}
.pct-lines a{display:flex;align-items:center;gap:.5em;font-size:.82em;color:var(--tx);text-decoration:none;pointer-events:auto}
.pct-lines .ic{color:var(--acc)}
.pct-steps{display:flex;gap:.5em;flex-wrap:wrap;justify-content:center}
.pct-steps .chip b{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;margin-inline-end:.4em;background:var(--acc);color:#0C1320;font-size:.85em}
.pct-btns{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.pct-btn{display:inline-flex;align-items:center;gap:.45em;padding:.6em 1.1em;border-radius:.7em;border:1px solid var(--acc);color:var(--tx);text-decoration:none;font-weight:600;font-size:.85em;pointer-events:auto;transition:.2s}
.pct-btn.pri{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;border-color:transparent;box-shadow:0 .6em 1.6em -.6em rgba(124,163,227,.7)}
.pct-btn:hover{filter:brightness(1.1);translate:0 -.1em}
@container (max-width:560px){.pct-card{flex-direction:column;text-align:center}.pct-lines a{justify-content:center}}
.sc-crew{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));max-width:40em;margin:0 auto;width:100%}
.cr-grow{align-items:center;text-align:center;border-style:dashed}
.cr-ghosts{display:grid;grid-template-columns:repeat(2,2.6em);gap:.4em;margin:.2em 0}
.cr-ghosts i{width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;border:1px dashed color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc);opacity:.7;animation:breathe2 3s ease-in-out infinite;animation-delay:calc(var(--i)*.4s)}
.cr-gn{font:800 1.9em/1 var(--ffd),Inter;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-grow small{font-size:.64em;color:var(--mu);line-height:1.25}

/* ===== v1.1.0 neue Szenen ===== */
.sc-cmp{display:flex;flex-direction:column;justify-content:center;gap:.5em}
.cm-head{display:grid;grid-template-columns:1fr 2em 1fr;font:700 .72em/1 var(--ffd),Inter;text-transform:uppercase;letter-spacing:.1em;padding:0 .3em}
.cm-head .cm-l{color:var(--mu)}.cm-head .cm-r{grid-column:3;color:var(--acc2)}
.cm-row{display:grid;grid-template-columns:1fr 2em 1fr;align-items:center;gap:0}
.cm-a,.cm-b{display:flex;align-items:center;gap:.55em;padding:.55em .8em;font-size:.84em}
.cm-a{opacity:.62}.cm-a .ic{color:#FF8A8A}
.cm-b{border-color:color-mix(in srgb,var(--acc) 40%,transparent)}.cm-b .ic{color:var(--acc2)}
.cm-b span{font-weight:600}
.cm-arrow{display:grid;place-items:center;color:var(--acc)}
.cm-row.hot .cm-b{box-shadow:0 0 1.8em -.6em rgba(124,163,227,.7);border-color:var(--acc)}
.cm-badge{align-self:center;margin-top:.4em;display:flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:99em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;font-weight:700;font-size:.82em}

.sc-ibans{display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto 1fr;gap:.6em;align-content:center}
.flag{width:1.6em;height:auto;border-radius:.2em;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15)}
.is-main{padding:1em 1.1em;display:flex;flex-direction:column;gap:.7em;background:linear-gradient(150deg,rgba(124,163,227,.22),rgba(17,26,43,.75))}
.is-top{display:flex;align-items:center;gap:.5em}.is-top .flag{width:2em}
.is-top b{font:800 1.1em var(--ffd),Inter}.is-top small{color:var(--mu);font-size:.72em}
.is-live{margin-inline-start:auto;font-size:.62em;font-weight:700;padding:.3em .6em;border-radius:99em;background:rgba(77,131,217,.18);color:var(--acc2)}
.is-num{font:700 1.25em/1 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em}
.is-hold{display:flex;align-items:center;gap:.5em;font-size:.78em;color:var(--mu)}
.is-list{grid-row:span 2;display:flex;flex-direction:column;gap:.35em;justify-content:center}
.is-row{display:grid;grid-template-columns:auto 3em 1fr auto;align-items:center;gap:.55em;padding:.42em .65em;font-size:.78em}
.is-row b{font-weight:800}.is-row small{color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.is-row code{display:none}
.is-st{font-size:.72em;font-weight:700;color:var(--acc2)}
.is-row.soon{border-style:dashed}.is-row.soon .is-st{color:var(--mu)}
.is-row.hot{border-color:var(--acc)}
.is-count{display:flex;align-items:center;gap:.8em;padding:.8em 1em;position:relative;overflow:hidden}
.is-count strong{font:800 2.8em/1 var(--ffd),Inter;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.is-count b{display:block;font-weight:700;font-size:.9em}
.is-count small{display:flex;align-items:center;gap:.35em;font-size:.72em;color:var(--mu);margin-top:.25em}
.is-bar{position:absolute;left:0;right:0;bottom:0;height:.25em;background:rgba(255,255,255,.06)}
.is-bar em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width 2.5s var(--ease)}
.is-bar.on em{width:22%}

.sc-wallet{display:grid;grid-template-columns:auto 1fr;gap:1.4em;align-items:center}
.wl-phone{width:12.5em;aspect-ratio:9/18.5;border-radius:1.9em;padding:.45em;background:linear-gradient(160deg,#2A3F6A,#0F1727);box-shadow:0 2em 4em -1.5em rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.12)}
.wl-scr{height:100%;border-radius:1.5em;background:radial-gradient(120% 70% at 50% 0%,#283D66,#0C121E 70%);padding:.7em .8em;display:flex;flex-direction:column;align-items:center;gap:.6em}
.wl-scr .ap-sb{width:100%}
.wl-lbl{font-size:.66em;color:var(--mu);align-self:flex-start}
.wl-card{position:relative;width:100%;border-radius:.6em;overflow:hidden;box-shadow:0 1em 2em -.8em rgba(0,0,0,.9)}.wl-card img{display:block;width:100%}
.wl-state{display:flex;align-items:center;gap:.3em;font-size:.66em;color:var(--acc2);font-weight:700}
.wl-pay{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:.7em}
.wl-nfc{width:3.4em;height:3.4em;border-radius:50%;display:grid;place-items:center;background:rgba(124,163,227,.15);color:var(--acc);box-shadow:0 0 0 0 rgba(124,163,227,.5);animation:wlpulse 2s infinite}
@keyframes wlpulse{70%{box-shadow:0 0 0 1.2em rgba(124,163,227,0)}100%{box-shadow:0 0 0 0 rgba(124,163,227,0)}}
.wl-side{display:flex;flex-direction:column;gap:.5em}
.wl-badges{display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.wl-b{display:inline-flex;align-items:center;gap:.4em;padding:.5em .9em;border-radius:.7em;background:#FFFFFF;color:#000000;font-size:.82em}
.wl-badges small{font-size:.68em;color:var(--mu)}
.pc-row.hot{border-color:var(--acc)}

.sc-ways{display:flex;flex-direction:column;justify-content:center;gap:.7em}
.wy-row{display:grid;grid-template-columns:1fr auto 1fr;gap:.6em;align-items:stretch}
.wy-c{position:relative;padding:1em 1em .9em;display:flex;flex-direction:column;gap:.4em}
.wy-c.b{background:linear-gradient(160deg,rgba(124,163,227,.2),rgba(17,26,43,.75));border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.wy-n{position:absolute;top:-.7em;inset-inline-start:1em;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320}
.wy-t{font:800 1em/1.15 var(--ffd),Inter;margin-top:.3em}.wy-s{font-size:.68em;color:var(--acc2)}
.wy-p{display:flex;align-items:baseline;gap:.5em;margin:.2em 0}.wy-p strong{font:800 1.4em/1 var(--ffd),Inter}.wy-p small{font-size:.7em;color:var(--mu)}
.wy-i{display:flex;align-items:center;gap:.45em;font-size:.76em}.wy-i .ic{color:var(--acc2);flex:none}
.wy-or{align-self:center;font:700 .75em var(--ffd),Inter;text-transform:uppercase;letter-spacing:.1em;color:var(--mu)}
.wy-c.hot{box-shadow:0 0 2.4em -.8em rgba(124,163,227,.7);border-color:var(--acc)}
.wy-same{align-self:center;display:flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:99em;border:1px solid var(--line2);font-size:.82em;font-weight:600}.wy-same .ic{color:var(--acc)}

.sc-tl{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4em;align-content:center;padding-top:.5em}
.tl-line{position:absolute;top:2.85em;left:8%;right:8%;height:2px;background:var(--line2)}
.tl-line em{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width 9s linear}
.tl-line.on em{width:100%}
.tl-s{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em}
.tl-dot{position:relative;width:4.2em;height:4.2em;border-radius:50%;display:grid;place-items:center;background:#111A2B;border:1px solid var(--line2);color:var(--acc);transition:.6s}
.tl-dot i{position:absolute;top:-.3em;inset-inline-end:-.3em;width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;font:800 .7em/1 var(--ffd),Inter;font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320}
.tl-s b{font:700 .78em/1.2 var(--ffd),Inter}.tl-s small{font-size:.64em;color:var(--mu);line-height:1.25}
.tl-s.hot .tl-dot{background:linear-gradient(150deg,rgba(124,163,227,.4),rgba(77,131,217,.2));border-color:var(--acc);box-shadow:0 0 2em -.4em rgba(124,163,227,.8);scale:1.08}

.sc-calc{display:flex;align-items:center}
.ca-box{width:100%;padding:.9em 1em}
.ca-h,.ca-r{display:grid;grid-template-columns:5.5em 1fr 6em 1.4fr;gap:.6em;align-items:center}
.ca-h{font-size:.66em;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);padding-bottom:.5em;border-bottom:1px solid var(--line2)}
.ca-r{padding:.6em 0;border-bottom:1px solid var(--line);font-size:.84em;transition:background .5s}
.ca-ty{font-size:.78em;font-weight:700;padding:.25em .55em;border-radius:99em;background:rgba(124,163,227,.15);color:var(--acc);justify-self:start}
.ca-ty.b{background:rgba(77,131,217,.15);color:var(--acc2)}
.ca-f{display:flex;justify-content:space-between;align-items:center;gap:.5em}.ca-f small{font-size:.74em;color:var(--mu)}.ca-f strong{font:800 1.15em var(--ffd),Inter}
.ca-r.hot{background:linear-gradient(90deg,rgba(124,163,227,.12),transparent)}

.sc-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:1em;align-items:center}
.ct-panel{padding:1em;display:flex;flex-direction:column;gap:.15em}
.ct-h{display:flex;align-items:center;gap:.7em;margin-bottom:.4em}.ct-card{width:5em;border-radius:.35em}
.ct-h b{font:700 1em var(--ffd),Inter}
.ct-r{display:flex;justify-content:space-between;align-items:center;padding:.6em .2em;border-bottom:1px solid var(--line);font-size:.86em}
.ct-r b{color:var(--acc2)}
.ct-r.hot{color:var(--acc2)}.ct-r.hot .toggle{filter:drop-shadow(0 0 .5em var(--acc))}
.ct-side{display:flex;flex-direction:column;gap:.45em}

.sc-aff{display:grid;grid-template-columns:.9fr 1.3fr;grid-template-rows:1fr auto;gap:.6em 1em;align-items:center}
.af-tree{display:flex;flex-direction:column-reverse;align-items:center;gap:.3em}
.af-lv{width:var(--w);padding:.35em 0;text-align:center;border-radius:.5em;font-size:.68em;font-weight:700;background:linear-gradient(90deg,rgba(124,163,227,calc(.5 - var(--i)*.07)),rgba(77,131,217,calc(.35 - var(--i)*.05)));border:1px solid rgba(124,163,227,.25)}
.af-you{display:flex;align-items:center;gap:.4em;margin-top:.2em;padding:.4em .9em;border-radius:99em;background:#FFFFFF;color:#0C1320;font-size:.8em}
.af-tab{padding:.8em 1em}
.af-h,.af-r{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.4em;align-items:center}
.af-h{font-size:.66em;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;padding-bottom:.4em;border-bottom:1px solid var(--line2)}.af-h b{text-align:end}
.af-r{padding:.42em 0;border-bottom:1px solid var(--line);font-size:.84em}
.af-r strong{text-align:end;font:800 1em var(--ffd),Inter}
.af-r:first-of-type strong{color:var(--acc2);font-size:1.15em}
.af-req{grid-column:span 2;justify-self:center;display:flex;align-items:center;gap:.5em;padding:.5em 1em;border-radius:99em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;font-weight:700;font-size:.8em}

.sc-br{display:flex;flex-direction:column;justify-content:center;gap:1em}
.br-row{display:grid;grid-template-columns:9em 1fr 9em;gap:.8em;align-items:center}
.br-n{padding:1em .6em;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35em}
.br-n .ic{color:var(--acc2)}.br-n b{font:800 1.1em var(--ffd),Inter}.br-n small{font-size:.68em;color:var(--mu)}
.br-n.pm{background:linear-gradient(160deg,rgba(124,163,227,.25),rgba(17,26,43,.75));border-color:var(--acc)}
.br-mid{display:flex;flex-direction:column;gap:1.4em}
.br-lane{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4em}
.br-lane i{position:relative;width:100%;height:2px;background:var(--line2);overflow:visible}
.br-lane i em{position:absolute;top:-.3em;width:.6em;height:.6em;border-radius:50%;background:var(--acc2);box-shadow:0 0 1em var(--acc);opacity:0}
.br-lane.on i em{opacity:1;animation:brmove 1.8s linear infinite}
.br-lane.l.on i em{animation-direction:reverse}
@keyframes brmove{from{left:0}to{left:calc(100% - .6em)}}
.br-lane span{font-size:.76em;text-align:center}
.br-note{align-self:center;display:flex;align-items:center;gap:.5em;font-size:.72em;color:var(--mu)}
@container (max-width:560px){.sc-ibans,.sc-ctrl,.sc-aff,.sc-wallet{grid-template-columns:1fr}.wl-phone{display:none}.sc-tl{grid-template-columns:repeat(3,1fr);row-gap:1em}.tl-line{display:none}.wy-row{grid-template-columns:1fr}.wy-or{justify-self:center}}
.show .show-sub{display:block;margin-top:.55em;font:600 .3em/1.3 var(--ff),Inter,sans-serif;letter-spacing:.01em;color:var(--acc2);animation:fadeUp .8s .5s both}
@keyframes fadeUp{from{opacity:0;translate:0 .6em}}
.pi-region{display:inline-flex;align-items:center;gap:.4em;margin-top:.5em;padding:.35em .8em;border-radius:99em;border:1px solid color-mix(in srgb,var(--acc2) 50%,transparent);color:var(--acc2);font-size:.7em;font-weight:600}

/* Echte Seiten / Login / Ersparnis / Checkliste */
.sc-screen{display:grid;grid-template-columns:1.5fr 1fr;gap:1em;align-items:center}
.sc-screen.tall{grid-template-columns:1fr 1.1fr}
.sw-win{border-radius:.9em;overflow:hidden;border:1px solid var(--line2);background:#111A2B;box-shadow:0 2em 4em -1.6em rgba(0,0,0,.9),0 0 3em -1.5em rgba(124,163,227,.5)}
.sw-bar{display:flex;align-items:center;gap:.35em;padding:.45em .7em;background:#17233B;border-bottom:1px solid var(--line)}
.sw-bar>i{width:.6em;height:.6em;border-radius:50%;background:#293F6A}.sw-bar>i:first-child{background:#FF5F57}.sw-bar>i:nth-child(2){background:#3D81EF}.sw-bar>i:nth-child(3){background:#28C840}
.sw-url{margin-inline-start:.6em;flex:1;display:flex;align-items:center;gap:.4em;padding:.25em .7em;border-radius:99em;background:#0C121E;font-size:.62em;color:var(--mu)}
.sw-url .ic{width:1em;height:1em;color:var(--acc2)}
.sw-view{position:relative;line-height:0;overflow:hidden}
.sw-img{width:100%;height:auto;display:block}
.tall .sw-view{max-height:22em}.tall .sw-img{object-fit:cover;object-position:top}
.sw-win.on .sw-img{animation:swpan 18s ease-in-out infinite alternate}
@keyframes swpan{from{scale:1}to{scale:1.06}}
.sw-glow{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);background-size:250% 100%;animation:swglow 6s linear infinite}
@keyframes swglow{from{background-position:120% 0}to{background-position:-120% 0}}
.sw-side{display:flex;flex-direction:column;gap:.45em}
.sw-pt{display:flex;align-items:center;gap:.65em;padding:.55em .75em;transition:border-color .6s,box-shadow .6s,opacity .7s,translate .8s var(--ease)}
.sw-n{flex:none;width:2.1em;height:2.1em;border-radius:.6em;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
.sw-pt b{display:block;font:700 .82em/1.2 var(--ffd),Inter}.sw-pt small{display:block;margin-top:.12em;font-size:.68em;color:var(--mu);line-height:1.25}
.sw-pt.hot{border-color:var(--acc);box-shadow:0 0 2em -.8em rgba(124,163,227,.7)}
.lg-view{display:grid;place-items:center;padding:1.2em;background:radial-gradient(90% 70% at 50% 0%,#2C4371,#0C121E 75%)}
.lg-card{width:min(100%,17em);display:flex;flex-direction:column;gap:.45em;padding:1.1em;border-radius:.9em;background:rgba(17,26,43,.85);border:1px solid var(--line2);line-height:1.2}
.lg-brand{font:800 .9em var(--ffd),Inter;letter-spacing:.12em}.lg-brand small{font-size:.6em;color:var(--acc2);letter-spacing:.2em}
.lg-card>strong{font:800 1.05em var(--ffd),Inter;margin-top:.3em}.lg-card>small{font-size:.66em;color:var(--mu)}
.lg-tabs{display:grid;grid-template-columns:1fr 1fr;padding:.2em;border-radius:.6em;background:#0C121E;font-size:.66em;text-align:center}
.lg-tabs span{padding:.45em;border-radius:.45em;color:var(--mu)}.lg-tabs .on{background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;font-weight:700}
.lg-f{display:flex;flex-direction:column;gap:.2em}.lg-f small{font-size:.58em;color:var(--mu)}.lg-f i{height:1.9em;border-radius:.45em;background:#0C121E;border:1px solid var(--line2);font-style:normal;font-size:.7em;display:flex;align-items:center;padding:0 .7em;color:var(--mu)}
.lg-rem{display:flex;align-items:center;gap:.4em;font-size:.58em;color:var(--mu)}.lg-chk{width:1.3em;height:1.3em;border-radius:.3em;display:grid;place-items:center;background:var(--acc);color:#0C1320}.lg-chk .ic{width:.9em;height:.9em}
.lg-btn{padding:.6em;border-radius:.55em;text-align:center;font-weight:700;font-size:.74em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320}
.lg-forgot{font-size:.6em;color:var(--acc2);text-align:center}
.lg-new{margin-top:.2em;padding-top:.5em;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.2em}.lg-new b{font-size:.66em}.lg-new small{font-size:.56em;color:var(--mu)}
.sc-sav{display:flex;flex-direction:column;justify-content:center;gap:.8em}
.sv-cards{display:flex;gap:.5em;flex-wrap:wrap}
.sv-box{padding:1em 1.2em;display:flex;flex-direction:column;gap:.8em}
.sv-h{font:700 .8em var(--ffd),Inter;text-transform:uppercase;letter-spacing:.08em;color:var(--acc2)}
.sv-bar{display:grid;grid-template-columns:11em 1fr 5em;gap:.7em;align-items:center;font-size:.84em}
.sv-bar i{height:1.5em;border-radius:.5em;background:rgba(255,255,255,.05);overflow:hidden}
.sv-bar i em{display:flex;gap:2px;height:100%;width:0;transition:width 1.6s var(--ease)}
.sv-bar.on i em{width:var(--w)}
.sv-bar i u{flex:1;border-radius:.3em;background:linear-gradient(90deg,#FF8A8A,#FF6B6B)}
.sv-bar.b i u{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.sv-bar strong{font:800 1.2em var(--ffd),Inter;text-align:end}
.sv-save{display:flex;justify-content:space-between;align-items:center;padding:.7em 1em;border-radius:.7em;background:linear-gradient(90deg,rgba(124,163,227,.22),rgba(77,131,217,.12));border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.sv-save small{font-weight:700}.sv-save strong{font:800 1.9em/1 var(--ffd),Inter;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-note{display:flex;align-items:center;gap:.5em;font-size:.76em;color:var(--mu)}.sv-note .ic{color:var(--acc)}
.sc-chk{display:flex;flex-direction:column;justify-content:center;gap:.7em}
.ck-head{display:flex;align-items:center;gap:.5em;font:700 .9em var(--ffd),Inter;color:var(--acc2)}
.ck-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35em .6em}
.ck-i{display:flex;align-items:center;gap:.55em;padding:.42em .6em;border-radius:.6em;border:1px solid var(--line2);background:rgba(17,26,43,.55);font-size:.8em}
.ck-i span{flex:none;width:1.8em;height:1.8em;border-radius:.5em;display:grid;place-items:center;background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
.ck-i b{font-weight:600;line-height:1.2}
@container (max-width:560px){.sc-screen,.sc-screen.tall{grid-template-columns:1fr}.ck-grid{grid-template-columns:1fr}.sv-bar{grid-template-columns:1fr 4.5em}.sv-bar span{grid-column:span 2}}
@container (max-height:470px){.sw-pt small{display:none}.ck-i{padding:.3em .5em}}

.sc-cmp.neutral .cm-a{opacity:1}.sc-cmp.neutral .cm-a .ic{color:var(--mu)}.sc-cmp.neutral .cm-head .cm-l{color:var(--tx)}
.sc-ws{display:grid;grid-template-columns:auto 1fr;gap:1.2em;align-items:center}
.ws-cal{width:11em;padding:1.2em 1em;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3em;background:linear-gradient(160deg,rgba(124,163,227,.28),rgba(17,26,43,.8));border-color:var(--acc)}
.ws-cal small{font-size:.66em;text-transform:uppercase;letter-spacing:.14em;color:var(--acc2);font-weight:700}
.ws-cal strong{font:800 2em/1 var(--ffd),Inter}.ws-cal b{font:800 1.25em var(--ffd),Inter;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ws-cal span{display:flex;align-items:center;gap:.35em;font-size:.68em;color:var(--mu);margin-top:.3em}
.ws-side{display:flex;flex-direction:column;gap:.6em}.ws-h b{font:700 1em var(--ffd),Inter}
.ws-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4em}
.ws-t{display:flex;align-items:center;gap:.55em;padding:.55em .7em;font-size:.82em}.ws-t .ic{color:var(--acc);flex:none}.ws-t.hot{border-color:var(--acc)}
.ws-free{display:flex;align-items:center;gap:.6em;flex-wrap:wrap;font-size:.8em;color:var(--mu)}.ws-free>.ic{color:var(--acc2)}
.sc-thx{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;text-align:center}
.thx-orb{position:absolute;width:26em;height:26em;border-radius:50%;background:radial-gradient(circle,rgba(124,163,227,.28),transparent 65%);filter:blur(10px);z-index:0}
.sc-thx>*:not(.thx-orb){position:relative}
.thx-limg{width:11em;height:auto;filter:drop-shadow(0 1em 2em rgba(0,0,0,.6))}
.thx-big{font:800 4.4em/1 var(--ffd),Inter;letter-spacing:-.03em;background:linear-gradient(90deg,#FFFFFF,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.thx-line{display:flex;align-items:center;gap:.8em;padding:.9em 1.2em;max-width:30em;text-align:start;font-size:1em;font-weight:600}.thx-line .ic{color:var(--acc);flex:none}
.thx-foot{font-size:.9em;color:var(--mu);font-style:italic}
@container (max-width:560px){.sc-ws{grid-template-columns:1fr}.ws-cal{justify-self:center}}

.sc-gal{display:flex;flex-direction:column;justify-content:center;gap:.7em}
.gl-badge{align-self:flex-start;display:flex;align-items:center;gap:.55em;padding:.45em .9em;border-radius:99em;background:linear-gradient(90deg,rgba(124,163,227,.25),rgba(77,131,217,.12));border:1px solid color-mix(in srgb,var(--acc) 50%,transparent);font-size:.8em}
.gl-badge small{color:var(--mu)}
.gl-dot{width:.6em;height:.6em;border-radius:50%;background:var(--acc2);box-shadow:0 0 0 0 rgba(77,131,217,.6);animation:wlpulse 1.8s infinite}
.gl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em}
.gl-f{margin:0;display:flex;flex-direction:column;gap:.3em;transition:opacity .7s,translate .8s var(--ease),scale .6s}
.gl-win{border-radius:.6em;overflow:hidden;border:1px solid var(--line2);background:#111A2B;box-shadow:0 1em 2em -1em rgba(0,0,0,.9)}
.gl-win .sw-bar{padding:.3em .5em}.gl-win .sw-bar>i{width:.45em;height:.45em}.gl-win .sw-url{font-size:.5em;padding:.15em .5em}
.gl-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.gl-f figcaption{font:600 .72em var(--ffd),Inter;text-align:center}
.gl-f.hot{scale:1.04}.gl-f.hot .gl-win{border-color:var(--acc);box-shadow:0 0 2em -.6em rgba(124,163,227,.7)}
@container (max-width:560px){.gl-grid{grid-template-columns:repeat(2,1fr)}}

.wy-c.on .stag,.af-tab.on .stag{opacity:1;transform:none}
.is-count{align-self:start}
.sc-screen{grid-template-columns:2fr 1fr}.sc-screen.tall{grid-template-columns:1.15fr 1fr}
.tall .sw-view{max-height:24em}
.lc-pin.b span{top:.6em}
.af-lv span{white-space:nowrap}
.thx-big{font-size:3.8em}

/* Karten zwischendurch */
.deco{position:absolute;inset-inline-start:4.5cqw;width:38cqw;z-index:2;pointer-events:none;opacity:0;transition:opacity .9s var(--ease),translate 1s var(--ease);translate:0 1.5cqh}
.deco.on{opacity:1;translate:none}
.dc-in{position:relative;height:100%;display:flex;align-items:center;gap:1.4cqw;perspective:900px}
.dc{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 1.6cqh 2.2cqh rgba(0,0,0,.7));animation:dcfloat 6s ease-in-out infinite}
.dc.up.l{rotate:-8deg}.dc.up.r{rotate:7deg;animation-delay:-3s}
.v-fan .dc-in{gap:0}.dc.fb{rotate:-12deg;margin-inline-end:-6cqw;opacity:.92}.dc.fp{rotate:6deg;animation-delay:-2s}
.v-flat .dc-in{gap:0}.dc.flat{height:78%}.dc.flat.a{rotate:-6deg;z-index:2}.dc.flat.b{rotate:8deg;margin-inline-start:-9cqw;translate:0 12%;opacity:.95;animation-delay:-3s}
.dc.duo{height:100%}
.dc.solo{rotate:-10deg}
.dc-glow{position:absolute;inset:-10% -5%;z-index:-1;background:radial-gradient(50% 50% at 30% 50%,rgba(124,163,227,.28),transparent 70%);filter:blur(8px)}
@keyframes dcfloat{0%,100%{transform:translateY(0) rotateY(0deg)}50%{transform:translateY(-4%) rotateY(10deg)}}
[dir=rtl] .dc.fb{margin-inline-end:-6cqw}
.hero .deco,.silent .deco{display:none}
@media (max-width:860px),(max-aspect-ratio:1/1){.deco{display:none}}

/* ===== Scrollbalken im Präsentations-Design (alle Fenster, Listen, Rechtshinweise, Seitenleiste) ===== */
html{scrollbar-gutter:auto}
*::-webkit-scrollbar{width:10px;height:10px;background:transparent}
*::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:10px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--acc),var(--acc2,var(--acc)));border-radius:10px;border:2px solid rgba(0,0,0,.45);background-clip:padding-box;min-height:40px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--acc2,var(--acc)),var(--acc));background-clip:padding-box}
*::-webkit-scrollbar-button{display:none;width:0;height:0}
*::-webkit-scrollbar-corner{background:transparent}
.lm-box::-webkit-scrollbar-track,.kp-side::-webkit-scrollbar-track{margin:14px 0}
@supports selector(::-webkit-scrollbar){*{scrollbar-color:auto!important}}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--acc) rgba(255,255,255,.04)!important}}
.lm-box{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.lm-box{max-height:88svh;width:calc(100vw - 20px);border-radius:14px}*::-webkit-scrollbar{width:6px;height:6px}}

/* Startseite: nie abgeschnitten – auf kurzen, quer gehaltenen und kleinen Bildschirmen scrollbar und kompakter */
.kp-hero{place-items:normal;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.kp-hero{grid-template-columns:minmax(0,1fr);overflow-x:hidden}
.kp-hero .hero-in{margin:auto;width:100%;min-width:0}
.kp-hero .glow{position:fixed;inset:0;margin:auto;pointer-events:none}
@media (max-height:760px){
  .kp-hero{padding:18px 16px}
  .kp-hero h1{font-size:clamp(28px,min(6.4vw,9.5vh),92px);margin:10px 0 12px}
  .kp-hero p{font-size:clamp(13px,min(1.25vw,2.5vh),19px);margin-bottom:18px}
  .kp-hero .chips{margin-top:18px}
  .kp-hero .hero-logo{width:min(240px,50vw,32vh);margin-bottom:2px}
  .kp-hero .hero-excl{margin-top:14px}
  .kp-hero .hero-legal{margin-top:14px}
  .kp-hero .snd-hint{margin:-6px auto 14px!important}
}
@media (max-height:480px){
  .kp-hero{padding:12px 14px}
  .kp-hero .eyebrow{font-size:10px}
  .kp-hero h1{font-size:clamp(22px,min(5vw,11vh),56px);margin:6px 0 8px}
  .kp-hero p{font-size:12.5px;line-height:1.45;margin-bottom:12px;max-width:760px}
  .kp-hero .pill.primary,.kp-hero .hero-act .lcur{height:38px}
  .kp-hero .chips{margin-top:12px}
  .kp-hero .chip{padding:5px 10px;font-size:11.5px}
  .kp-hero .hero-logo{width:min(150px,26vh)}
}
@media (max-width:480px){
  .kp-hero .chips{gap:6px}
  .kp-hero .chip{padding:6px 10px;font-size:12px}
}
/* Kapitel-Chips: auf kleineren/kürzeren Bildschirmen eine wischbare Zeile statt einer langen Liste */
@media (max-height:960px),(max-width:900px){
  .kp-hero .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;max-width:min(860px,100%);margin-inline:auto;padding:2px 24px 10px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000000 24px,#000000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000000 24px,#000000 calc(100% - 24px),transparent);scrollbar-width:thin;overscroll-behavior-x:contain}
  .kp-hero .chip{flex:none;white-space:nowrap;scroll-snap-align:start}
  .kp-hero .chips::-webkit-scrollbar{height:6px}
  .kp-hero .chips::-webkit-scrollbar-track{background:rgba(255,255,255,.06);border-radius:99px;margin-inline:40px}
  .kp-hero .chips::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--acc),var(--acc2));border:0;border-radius:99px;min-width:60px}
}
/* Chips-Scrollbalken in Danho-Farben (Chrome ab 121 nutzt scrollbar-color statt ::-webkit-scrollbar) */
@supports (scrollbar-color:red blue){@media (max-height:960px),(max-width:900px){.kp-hero .chips{scrollbar-width:thin;scrollbar-color:var(--acc2) rgba(255,255,255,.07)!important}}}
@media (max-height:960px) and (min-height:761px){
  .kp-hero h1{font-size:clamp(34px,min(6.4vw,9vh),92px);margin:14px 0 14px}
  .kp-hero p{margin-bottom:22px}
  .kp-hero .hero-logo{width:min(300px,60vw,26vh)}
  .kp-hero .chips{margin-top:24px}
}

/* Szenen passen auch in sehr breite, niedrige Fenster: Schriftgröße richtet sich nach Breite UND Höhe (bis Seitenverhältnis 1,88 : 1 unverändert) */
.sc{font-size:min(2.3cqw,4.33cqh)}
/* ===================== HIBARR (aus VALYGO übernommen) ===================== */
.sc-vplans{display:grid;place-items:center;padding:0 3.5em}
.vp-tab{width:100%;max-width:44em;padding:.6em 1.1em 1em}
.vp-row{display:grid;grid-template-columns:1.35fr repeat(3,1fr);align-items:center;gap:.5em;padding:.38em 0;border-bottom:1px solid var(--line);font-size:.82em}
.vp-row:last-of-type{border-bottom:0}
.vp-head{align-items:end;padding:.4em 0 .7em;font-size:1em}
.vp-l{color:var(--mu);font-weight:500}
.vp-plan{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1em;padding:.7em .4em .6em;border-radius:.8em;border:1px solid var(--line2);background:rgba(255,255,255,.03)}
.vp-plan.best{border-color:var(--acc);background:linear-gradient(180deg,rgba(83,125,193,.22),rgba(83,125,193,.04));box-shadow:0 1em 2.4em -1.2em var(--acc)}
.vp-pop{position:absolute;top:-.95em;padding:.15em .7em;border-radius:99em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;font:700 .62em/1.6 var(--ffd),Inter;letter-spacing:.08em;font-style:normal;text-transform:uppercase}
.vp-name{font:700 .78em var(--ffd),Inter;letter-spacing:.14em}
.vp-price{font:800 1.9em/1 var(--ffd),Inter;background:linear-gradient(90deg,#FFFFFF,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.vp-plan small{color:var(--mu);font-size:.62em}
.vp-dep{margin-top:.25em;font-size:.62em;color:var(--tx);opacity:.85;text-align:center}
.vp-c{display:grid;place-items:center;text-align:center;padding:.15em 0;border-radius:.5em}
.vp-c.best{background:rgba(83,125,193,.08)}
.vp-c b{font-weight:700;font-size:.95em}
.vp-y,.vp-n{display:grid;place-items:center;width:1.5em;height:1.5em;border-radius:50%}
.vp-y{background:rgba(83,125,193,.22);color:#BACEEF}.vp-n{background:rgba(255,90,110,.12);color:#FF8A9A}
.vp-y .ic,.vp-n .ic{width:.95em;height:.95em}
.vp-note{margin-top:.7em;font-size:.6em;color:var(--mu);line-height:1.45}
.sc-voutro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1em;text-align:center;padding:0 3em}
.sc-voutro>*:not(.vo-orb){position:relative}
.vo-orb{position:absolute;width:30em;height:30em;border-radius:50%;background:radial-gradient(circle,rgba(83,125,193,.32),transparent 65%);filter:blur(12px)}
.vo-top{display:flex;flex-direction:column;align-items:center;gap:.7em}
.vo-logo{height:2.6em;width:auto;filter:drop-shadow(0 .8em 1.6em rgba(0,0,0,.6))}
.vo-brand{font:800 3em var(--ffd),Inter;letter-spacing:.1em}
.vo-claim{font:700 1.7em/1.15 var(--ffd),Inter;letter-spacing:-.01em;max-width:22em}
.vo-claim em{font-style:normal;background:linear-gradient(90deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.vo-cta{display:flex;flex-direction:column;align-items:center;gap:.55em;padding:1em 1.8em}
.vo-cta small{color:var(--mu);letter-spacing:.14em;text-transform:uppercase;font-size:.68em}
.vo-btn{height:3em;font-size:1.15em;gap:.55em}.vo-btn .ic{width:1.1em;height:1.1em}
.vo-url{font:700 1.15em var(--ffd),Inter;letter-spacing:.02em;color:#C3D5F2}
.vo-plans{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}.vo-plans .chip b{color:var(--acc2);margin-inline-end:.15em}
.vo-note{max-width:40em;font-size:.6em;line-height:1.45;color:var(--mu)}
.sc-vplans{padding:0 2.2em 0 40%}
.vp-tab{max-width:none;padding:.5em .9em .7em}
.vp-row{font-size:.72em;padding:.28em 0}
.vp-head{font-size:.9em}
.vp-note{font-size:.52em;margin-top:.5em}

/* ===================== HIBARR ===================== */
.sc-hphoto{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:.7em}
.hp-ph{position:relative;margin:0;border-radius:1em;overflow:hidden;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);box-shadow:0 1.6em 3em -1.4em rgba(0,0,0,.8)}
.hp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:hpKB 22s ease-in-out infinite alternate}
@keyframes hpKB{0%{transform:scale(1.02) translate3d(0,0,0)}100%{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
.hp-sh{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(9,14,24,.78))}
.hp-ph figcaption{position:absolute;left:.9em;top:.8em;padding:.25em .7em;border-radius:99em;background:rgba(9,14,24,.7);font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:var(--acc2)}
.hp-stats{position:absolute;left:.8em;right:.8em;bottom:.8em;display:flex;gap:.5em;flex-wrap:wrap}
.hp-st{display:flex;flex-direction:column;padding:.45em .8em;border-radius:.7em;min-width:0}
.hp-st b{font:800 1.15em/1.05 var(--ffd),Inter;color:var(--acc2)}
.hp-st small{font-size:.58em;color:var(--tx);opacity:.85}
.hp-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35em .7em}
.hp-i{display:flex;align-items:center;gap:.55em;font-size:.74em;line-height:1.25}
.hp-i span{flex:none;display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:.55em;background:color-mix(in srgb,var(--acc) 18%,transparent);color:var(--acc2)}
.hp-i span .ic{width:1.05em;height:1.05em}
.hp-i b{font-weight:600}
.hp-note{font-size:.52em;line-height:1.4;color:var(--mu)}
.sc-hphoto.tall{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center}
.sc-hphoto.tall .hp-ph{height:100%}
.sc-hphoto.tall .hp-list{grid-template-columns:1fr}
.sc-hphoto.tall .hp-note{grid-column:1/-1}
.sc-hpkgs{display:flex;flex-direction:column;gap:.55em}
.hk-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:.55em}
.n4 .hk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.hk-c{position:relative;display:flex;flex-direction:column;padding:.75em .8em .6em;min-height:0;overflow:hidden}
.hk-c.best{border-color:var(--acc);background:linear-gradient(180deg,rgba(83,125,193,.2),rgba(83,125,193,.03)),var(--glass);box-shadow:0 1em 2.4em -1.2em var(--acc)}
.hk-pop{position:absolute;top:.55em;right:.6em;padding:.1em .6em;border-radius:99em;background:linear-gradient(90deg,var(--acc),var(--acc2));color:#0C1320;font:700 .5em/1.7 var(--ffd),Inter;letter-spacing:.08em;font-style:normal;text-transform:uppercase}
.hk-n{font:700 .66em/1.25 var(--ffd),Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);padding-inline-end:4.5em}
.hk-c:not(.best) .hk-n{padding-inline-end:0}
.hk-p{margin-top:.15em;font:800 1.35em/1.05 var(--ffd),Inter;background:linear-gradient(90deg,#FFFFFF,var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hk-s{font-size:.54em;color:var(--mu);margin-top:.1em}
.hk-c ul{list-style:none;margin:.45em 0 0;padding:0;display:flex;flex-direction:column;gap:.22em}
.hk-c li{display:flex;gap:.4em;align-items:flex-start;font-size:.56em;line-height:1.3}
.hk-c li .ic{flex:none;width:1.05em;height:1.05em;margin-top:.1em;color:var(--acc)}
.hk-note{font-size:.5em;line-height:1.4;color:var(--mu)}
@container (max-width:560px){.hk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-list{grid-template-columns:1fr}.sc-hphoto.tall{grid-template-columns:1fr}}
/* ===================== OTAVO: Intro-Film mit Ton ===================== */
.kp-intro.film{background:#000000}
.kp-intro.film .iv{object-fit:contain;background:#000000}
.kp-intro.film.go .iv{opacity:1}
.kp-intro.film::after,.kp-intro.film .ifx,.kp-intro.film .i-in{display:none}
/* Danho (OTAVO-Basis): Hochformat-Clips (9:16) neben der Liste */
.sc-hphoto.portrait{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:center;column-gap:1.4em}
.sc-hphoto.portrait .hp-ph{height:100%;aspect-ratio:var(--ar,9/16);width:auto;max-height:100%}
.sc-hphoto.portrait .hp-list{grid-template-columns:1fr;align-self:center}
.sc-hphoto.portrait .hp-note{grid-column:1/-1}
.sc-hphoto.portrait .hp-img{animation:none}
.hp-ph video.hp-img{animation:none}
@container (max-width:560px){.sc-hphoto.portrait{grid-template-columns:1fr}.sc-hphoto.portrait .hp-ph{height:auto;max-height:46cqh;justify-self:center}}

/* ===================== OTAVO-Szenen ===================== */
html{--terra:#4778C8;--sand:#9DB8E2;--navy:#17233B}
.show .w em,.show em{font-style:normal}
/* Tabelle N Spalten */
.sc-otab{display:flex;align-items:center}
.ot-box{position:absolute;left:3%;right:3%;top:50%;translate:0 -50%;padding:1em 1.2em;font-size:.82em}
.ot-cap{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding-bottom:.55em;margin-bottom:.2em;border-bottom:1px solid var(--line2)}
.ot-cap b{font:600 1.2em/1.1 var(--ffd),serif;color:var(--tx)}.ot-cap small{font-size:.6em;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.ot-row{display:grid;grid-template-columns:minmax(7em,1.25fr) repeat(var(--n),minmax(0,1fr));align-items:center;gap:.6em;padding:.42em 0;border-bottom:1px solid rgba(255,255,255,.05)}
.ot-row:last-of-type{border-bottom:0}
.ot-hd{padding:.2em 0 .5em;border-bottom:1px solid var(--line2)}
.ot-hd .ot-c{display:flex;flex-direction:column;gap:.15em}
.ot-hd .ot-c b{font:700 .95em/1 var(--ffd),serif;letter-spacing:.04em;color:var(--sand)}
.ot-hd .ot-c.best b{color:var(--acc)}
.ot-hd small{font-size:.62em;color:var(--mu)}
.ot-l{font-size:.78em;color:var(--mu)}
.ot-c{font-size:.8em;min-width:0}
.ot-c.best{position:relative}
.ot-hl{color:var(--acc);font-weight:700;font-size:1.05em}
.ot-c .vp-y{color:var(--acc)}.ot-c .vp-n{color:var(--mu2)}
.ot-c .ic{width:1.1em;height:1.1em}
.ot-note{margin-top:.5em;padding-top:.5em;border-top:1px solid var(--line2);font-size:.62em;color:var(--mu)}
/* Beispielrechnung */
.sc-ocalc{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr auto;gap:.8em;padding:0 3%;align-content:center}
.sc-ocalc.nobars{grid-template-columns:1fr}
.oc-box{padding:1em 1.2em;align-self:center;font-size:.86em}
.oc-h{display:flex;flex-direction:column;gap:.25em;padding-bottom:.55em;margin-bottom:.25em;border-bottom:1px solid var(--line2)}
.oc-tag{display:inline-flex;align-items:center;gap:.4em;font-size:.56em;letter-spacing:.18em;text-transform:uppercase;color:var(--acc2)}
.oc-tag .ic{width:1.2em;height:1.2em}
.oc-h b{font:600 1.15em/1.15 var(--ffd),serif}.oc-h small{font-size:.66em;color:var(--mu)}
.oc-r{display:flex;justify-content:space-between;gap:1em;padding:.36em 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.8em}
.oc-r b{white-space:nowrap;font-weight:600}
.oc-r.minus b{color:#88ADEA}.oc-r.plus b{color:var(--sand)}
.oc-r.total{border-top:1px solid var(--line2);border-bottom:0;margin-top:.15em;padding-top:.5em}.oc-r.total b{color:var(--tx);font-size:1.08em}
.oc-res{display:flex;justify-content:space-between;align-items:baseline;gap:1em;margin-top:.55em;padding:.6em .8em;border-radius:.7em;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 26%,transparent),color-mix(in srgb,var(--acc2) 8%,transparent));border:1px solid color-mix(in srgb,var(--acc) 45%,transparent)}
.oc-res small{font-size:.7em;color:var(--tx)}.oc-res strong{font:700 1.35em/1 var(--ffd),serif;color:#FFFFFF;white-space:nowrap}
.oc-bars{padding:.9em 1em;align-self:center;display:flex;flex-direction:column;gap:.6em;min-height:13em}
.oc-bh{font-size:.6em;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.oc-cols{flex:1;display:flex;align-items:flex-end;gap:.6em;min-height:10em}
.oc-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3em;min-width:0}
.oc-col b{font-size:.62em;white-space:nowrap}
.oc-col i{display:block;width:100%;height:var(--p);border-radius:.4em .4em .15em .15em;background:rgba(255,255,255,.05);overflow:hidden;position:relative}
.oc-col em{position:absolute;inset:0;background:linear-gradient(0deg,var(--acc),var(--acc2));transform-origin:bottom;scale:1 0;transition:scale 1.1s var(--ease);transition-delay:calc(var(--i) * 140ms + .2s)}
.oc-col.on em{scale:1 1}
.oc-col small{font-size:.56em;color:var(--mu);text-align:center;line-height:1.15}
.oc-note{grid-column:1/-1;display:flex;gap:.5em;align-items:flex-start;font-size:.6em;color:var(--mu);line-height:1.35}
.oc-note .ic{flex:none;width:1.3em;height:1.3em;color:var(--acc)}
/* Leitidee Dreieck */
.sc-otri{display:grid;grid-template-columns:1fr 1.1fr;gap:1.2em;align-items:center;padding:0 3%}
.tr-fig{position:relative;aspect-ratio:200/180;width:100%;max-width:17em;justify-self:center}
.tr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tr-a{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linejoin:miter;stroke-dasharray:520;stroke-dashoffset:520;animation:trdraw 2.4s var(--ease) .3s forwards}
.tr-b{fill:var(--acc);opacity:0;animation:trfade 1s ease 1.6s forwards}
@keyframes trdraw{to{stroke-dashoffset:0}}@keyframes trfade{to{opacity:1}}
.tr-fig span{position:absolute;font:600 .7em/1 var(--ffd),serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.tr-v{top:-1.6em;left:50%;translate:-50% 0;color:var(--sand)}.tr-v.on{translate:-50% 0}
.tr-l{bottom:38%;left:-4%;translate:-60% 0;color:var(--tx)}.tr-l.on{translate:-60% 0}
.tr-r{bottom:38%;right:-4%;translate:60% 0;color:var(--tx)}.tr-r.on{translate:60% 0}
.tr-s{bottom:-1.7em;left:50%;translate:-50% 0;color:var(--acc)}.tr-s.on{translate:-50% 0}
.tr-list{display:flex;flex-direction:column;gap:.55em}
.tr-i{display:grid;grid-template-columns:auto 1fr;column-gap:.7em;padding:.65em .9em}
.tr-i em{grid-row:span 2;font:700 1.1em/1 var(--ffd),serif;color:var(--acc);font-style:normal}
.tr-i b{font-size:.86em}.tr-i small{font-size:.66em;color:var(--mu);line-height:1.35}
/* Kennzahlen */
.sc-ostats{display:flex;flex-direction:column;justify-content:center;gap:.8em;padding:0 3%}
.os-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7em}
.os-i{display:flex;flex-direction:column;gap:.3em;padding:.9em 1em}
.os-i strong{font:600 1.7em/1 var(--ffd),serif;color:var(--sand);letter-spacing:-.01em}
.os-i span{font-size:.72em;line-height:1.3}.os-i small{font-size:.56em;color:var(--acc);letter-spacing:.06em}
.os-note{font-size:.58em;color:var(--mu)}
/* Abschlussfolie */
.sc-ofin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;text-align:center}
.of-top{display:flex;flex-direction:column;align-items:center;gap:.45em}
.of-logo{height:2.2em;width:auto}.of-brand{font:700 2em/1 var(--ffd),serif;letter-spacing:.2em}
.of-claim{font:500 .95em/1.25 var(--ffd),serif;color:var(--mu)}.of-claim em{color:var(--acc)}
.of-card{display:flex;align-items:center;gap:1.3em;padding:1.1em 1.5em;text-align:start;max-width:30em}
.of-card .pct-ph{flex:none;width:6.2em;height:6.2em}
.of-btns{display:flex;gap:.6em;flex-wrap:wrap;justify-content:center}
.of-btns .pct-btn{font-size:.9em;padding:.7em 1.2em}
.of-note{font-size:.55em;color:var(--mu);max-width:52em;line-height:1.35}
@media (max-width:760px){.sc-ocalc,.sc-otri{grid-template-columns:1fr}.oc-bars{min-height:9em}.tr-fig{max-width:10em}.of-card{flex-direction:column;text-align:center}}

/* ===================== Danho & Partner: neue Szenen ===================== */
button.pct-btn{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.pct-l{display:inline-flex;align-items:center;gap:.45em;cursor:pointer;color:var(--tx)}
.pct-l:hover{color:var(--acc)}
.of-btns{flex-wrap:wrap}
[data-ob]{cursor:pointer}
/* Gastgeber */
.sc-dduo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:3% 4% 2.5%}
.dd-tag{position:absolute;top:5%;left:50%;transform:translateX(-50%);font:600 0.56em/1 var(--ff);letter-spacing:.28em;text-transform:uppercase;color:var(--acc2);white-space:nowrap}
.dd-stage{position:relative;height:76%;aspect-ratio:760/620;max-width:92%;display:flex;align-items:flex-end;justify-content:center}
.dd-glow{position:absolute;inset:8% 4% 0;background:radial-gradient(50% 55% at 30% 45%,color-mix(in srgb,var(--acc) 45%,transparent),transparent 70%),radial-gradient(45% 50% at 72% 42%,color-mix(in srgb,var(--acc2) 26%,transparent),transparent 70%);filter:blur(18px);opacity:.9}
.dd-img{position:relative;width:100%;height:100%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
.dd-fade{position:absolute;left:-10%;right:-10%;bottom:-2px;height:18%;background:linear-gradient(transparent,var(--bg))}
.dd-names{position:relative;display:flex;gap:4%;width:min(900px,86%);justify-content:space-between;margin-top:-5%;z-index:2}
.dd-n{flex:1;max-width:44%;text-align:center;padding:.8em 1em;border:1px solid color-mix(in srgb,var(--acc2) 55%,transparent);border-radius:14px}
.dd-n b{display:block;font:800 0.96em/1.1 var(--ffd);letter-spacing:.06em;text-transform:uppercase;color:var(--acc2)}
.dd-n small{display:block;margin-top:.35em;font:500 0.52em/1.3 var(--ff);color:var(--tx);opacity:.85;letter-spacing:.04em}
.dd-line{margin-top:1.4%;font:600 0.74em/1.3 var(--ffd);color:var(--tx);text-align:center}
.dd-line em{font-style:normal;color:var(--acc)}
.dd-pl{margin-top:.6%;font:500 0.48em/1 var(--ff);letter-spacing:.35em;color:var(--acc2);opacity:.85}
/* YouTube */
.sc-yt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2%;padding:4% 5%}
.yt-head{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;justify-content:center}
.yt-head b{font:700 0.89em/1.1 var(--ffd);color:var(--tx)}
.yt-head small{width:100%;text-align:center;color:var(--mu);font:500 0.56em/1.2 var(--ff)}
.yt-logo{display:inline-grid;place-items:center;width:2.2em;height:1.55em;border-radius:.45em;background:#FF0033;color:#fff}
.yt-logo .ic{width:1.1em;height:1.1em}
.yt-grid{display:grid;gap:1.4vw;width:min(1150px,96%);grid-template-columns:repeat(3,1fr)}
.yt-grid.n1{grid-template-columns:minmax(0,560px);justify-content:center}.yt-grid.n2,.yt-grid.n4{grid-template-columns:repeat(2,1fr)}
.yt-c{display:flex;flex-direction:column;gap:.55em;padding:.7em;border-radius:16px;text-align:left;color:var(--tx);font:inherit;border:1px solid var(--line);cursor:pointer;transition:transform .25s,border-color .25s}
button.yt-c{-webkit-appearance:none;appearance:none;background:none}
.yt-c:hover{transform:translateY(-3px);border-color:var(--acc)}
.yt-c.soon{cursor:default}
.yt-th{position:relative;display:block;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 40%,var(--bg2)),var(--bg2))}
.yt-th img{width:100%;height:100%;object-fit:cover;display:block}
.yt-pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:3.2em;height:2.2em;border-radius:.6em;background:rgba(255,0,51,.92);display:grid;place-items:center;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.yt-pl .ic{width:1.3em;height:1.3em}
.yt-c b{font:600 0.59em/1.3 var(--ffd)}
.yt-c small{color:var(--mu);font:500 0.48em/1.3 var(--ff)}
.yt-c em{font-style:normal;align-self:flex-start;font:600 10px/1 var(--ff);letter-spacing:.12em;text-transform:uppercase;padding:.45em .7em;border-radius:99px;background:color-mix(in srgb,var(--acc2) 22%,transparent);color:var(--acc2)}
.yt-ch{display:inline-flex;align-items:center;gap:.5em;padding:.65em 1.2em;border-radius:99px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--tx);font:600 0.52em/1 var(--ff);cursor:pointer}
.yt-ch:hover{border-color:var(--acc);color:var(--acc)}
.yt-note{color:var(--mu2);font:500 0.44em/1.3 var(--ff);text-align:center}
.yt-modal{position:fixed;inset:0;z-index:99999;background:rgba(3,8,18,.86);backdrop-filter:blur(6px);display:grid;place-items:center;padding:3vw}
.yt-box{position:relative;width:min(1100px,94vw);aspect-ratio:16/9;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#000}
.yt-box iframe{width:100%;height:100%;border:0;display:block}
.yt-x{position:absolute;top:8px;right:10px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:26px;line-height:1;cursor:pointer}
@media (max-width:700px){.yt-grid{grid-template-columns:1fr!important}.dd-names{width:96%}.dd-stage{height:62%}}
.pct-btn.pri{background:linear-gradient(135deg,var(--acc),#1D4ED8);color:#fff;box-shadow:0 .6em 1.6em -.6em color-mix(in srgb,var(--acc) 70%,transparent)}
.yt-c,.yt-ch,.pct-l,[data-ob],[data-yt]{pointer-events:auto}
.oc-cols{flex:none;height:10em}
.oc-col i{height:calc(var(--p) * .82)}
/* Startseiten-Logo (wie KCC) */
.kp-hero .hero-logo{display:block;width:min(360px,62vw,30vh);max-height:22vh;object-fit:contain;height:auto;margin:0 auto 14px;filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.kp-hero .hero-logo + .eyebrow{display:block}
/* v1.0.3 – Abschluss-Buttons mit Lead-Formular, YouTube-Button, gesperrte Videos */
.of-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5em,1fr));gap:.6em;max-width:44em;margin-inline:auto}
.of-btns .pct-btn{justify-content:center;background:rgba(10,26,54,.72);border:1px solid var(--line2);border-radius:.8em;min-height:2.9em}
.of-btns .pct-btn .ic{width:1.25em;height:1.25em;flex:none;color:var(--acc2)}
.of-btns .pct-btn:hover{border-color:var(--acc)}
.of-btns .pct-btn.pri{grid-column:1/-1;font-size:1em;min-height:3.1em;border:0}
.of-btns .pct-btn.pri .ic{color:#fff}
.of-btns .pct-btn.yt .ic{color:#FF2D55}
.yt-c.locked .yt-th img{filter:saturate(.85) brightness(.62)}
.yt-c.locked .yt-pl{background:rgba(6,18,38,.78);border:1px solid var(--acc2);color:var(--acc2)}
.yt-lk{position:absolute;left:.6em;bottom:.6em;display:inline-flex;align-items:center;gap:.4em;font:600 10px/1 var(--ff)!important;letter-spacing:.06em!important;text-transform:none!important;padding:.55em .8em!important;border-radius:99px;background:var(--acc2)!important;color:#0A1428!important}
.yt-lk .ic{width:1.1em;height:1.1em}
.yt-lks{color:var(--acc2)!important}
.yt-ch .ic{color:#FF2D55}
.partner{white-space:nowrap}
.hero-coop{display:inline-block;margin:0 auto 14px;font-size:13px;letter-spacing:.02em;color:var(--mu);border:1px solid var(--line2);border-radius:99px;padding:6px 14px;background:rgba(10,26,54,.55)}
.hero-coop b{color:var(--acc2);font-weight:600}
.of-coop{display:block;margin-top:.35em;font:500 .42em/1.3 var(--ff);letter-spacing:.04em;color:var(--acc2)}
.hero-coop{display:table;margin:0 auto 14px}
.of-btns .pct-btn.pri{background:linear-gradient(135deg,var(--acc),#1D4ED8);color:#fff;box-shadow:0 .7em 1.8em -.6em color-mix(in srgb,var(--acc) 75%,transparent)}
.of-btns .pct-btn.pri:hover{filter:brightness(1.08)}

/* v1.0.4: echte Personenfotos auf Begrüßung und Abschluss (Johann / Hannes) */
.sc-person{position:absolute;bottom:0;height:96%;margin:0;z-index:0;pointer-events:none;display:flex;align-items:flex-end}
.sc-person.sp-r{right:1%}.sc-person.sp-l{left:1%}
[dir=rtl] .sc-person.sp-r{right:auto;left:1%}[dir=rtl] .sc-person.sp-l{left:auto;right:1%}
.sc-person .sp-img{height:100%;width:auto;max-width:none;object-fit:contain;filter:drop-shadow(0 1.2em 2.4em rgba(0,0,0,.55))}
.sc-person .sp-fade{position:absolute;left:-10%;right:-10%;bottom:0;height:16%;background:linear-gradient(transparent,var(--bg));pointer-events:none}
.sc .sc-person[data-b]{opacity:0;translate:0 1.2em}.sc .sc-person[data-b].on{opacity:1;translate:0 0;transition:opacity 1s,translate 1.2s var(--spring)}
.sc-pwelcome.has-p{align-items:flex-start;padding-inline-start:2%;padding-inline-end:50%;text-align:start}
.sc-pwelcome.has-p .sc-person{height:90%}
.sc-pwelcome.has-p>*:not(.sc-person){position:relative;z-index:1}
.sc-thx.has-p{padding-inline-start:40%;padding-inline-end:1%}
.sc-thx>.sc-person,.sc-pwelcome>.sc-person{position:absolute}.sc-thx.has-p .sc-person{height:94%}.sc-thx.has-p .thx-big{font-size:5.2em}
.sc-thx.has-p>*:not(.sc-person){z-index:1}
@media (max-width:700px){.sc-pwelcome.has-p{padding-inline-end:4%;align-items:center;text-align:center}.sc-thx.has-p{padding-inline-start:3%}.sc-person{opacity:.28!important;height:80%}}

[data-ob]{cursor:pointer}

/* v1.0.4 – Danke-Folie: Schritte als Zeile + alle Kontakt-Buttons in einer Reihe */
.thx-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em 1.2em;font-size:.82em;color:var(--mut,#b9c3d6)}
.thx-steps span{display:inline-flex;align-items:center;gap:.45em}
.thx-steps b{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:var(--acc);color:#fff;font-size:.85em}
.thx-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:.55em;max-width:46em}
.thx-btns .pct-btn{font-size:.86em;padding:.68em 1.1em;white-space:nowrap}
.thx-btns .pct-btn.yt{border-color:#ff3b3b}
/* Lead-Formular im Modal: schließt nur über den Button */
.ld-modal{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;background:rgba(3,8,20,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:2vh 2vw;animation:ldIn .25s ease}
@keyframes ldIn{from{opacity:0}to{opacity:1}}
.ld-box{position:relative;width:min(820px,100%);height:min(92vh,980px);border-radius:18px;overflow:hidden;background:#061226;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.ld-fr{display:block;width:100%;height:100%;border:0;background:transparent}
.ld-x{position:absolute;top:10px;inset-inline-end:10px;z-index:2;display:inline-flex;align-items:center;gap:.4em;height:40px;padding:0 .9em;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(10,20,40,.9);color:#fff;font:600 14px/1 system-ui,sans-serif;cursor:pointer}
.ld-x i{font-style:normal;font-size:22px;line-height:1}
.ld-x:hover,.ld-x:focus-visible{background:var(--acc,#3B82F6);outline:none}
@media (max-width:700px){.ld-modal{padding:0}.ld-box{height:100%;width:100%;border-radius:0}.ld-x span{display:none}}
.thx-btns .pct-btn:not(.pri){background:rgba(6,18,38,.88);backdrop-filter:blur(4px)}
.sc-thx.has-p .thx-btns{position:absolute;inset-inline-start:-16%;inset-inline-end:0;bottom:3%;max-width:none;flex-wrap:nowrap;justify-content:flex-end;z-index:3;font-size:.74em;gap:.45em}
.sc-thx.has-p .thx-foot{margin-bottom:3.2em}
@media (max-width:900px){.sc-thx.has-p .thx-btns{position:relative;inset:auto;bottom:auto;flex-wrap:wrap}.sc-thx.has-p .thx-foot{margin-bottom:0}}