@property --lift{syntax:"<number>";inherits:true;initial-value:0}
@font-face{font-family:"Archivo V";font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(fonts/archivo-wdth.woff2) format("woff2-variations")}
@font-face{font-family:"Instrument Sans";font-weight:400;font-display:swap;src:url(fonts/instrument-400.woff2) format("woff2")}
@font-face{font-family:"Instrument Sans";font-weight:600;font-display:swap;src:url(fonts/instrument-600.woff2) format("woff2")}
:root{--royal:#1B3FB4;--royal-deep:#112B82;--night:#0B1C5C;--gold:#FFD84D;--ink:#14182B;--muted:#535A70;--wash:#F4F6FB;--line:#DCE0EC;--ease:cubic-bezier(.22,1,.36,1);--r:22px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Instrument Sans",system-ui,sans-serif;color:var(--ink);font-size:18px;line-height:1.6;background:#fff;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.narrow{max-width:860px}
.center{text-align:center}
.cond{font-family:"Archivo V",sans-serif;font-stretch:70%;font-weight:900;letter-spacing:-.005em;line-height:.95;text-transform:uppercase}
.slice{position:relative;font-family:"Archivo V",sans-serif;font-stretch:68%;font-weight:900;line-height:1;display:inline-block}
.slice .t{display:block}.slice .t1{clip-path:inset(0 0 53% 0);transform:translateY(-.035em)}.slice .t2{position:absolute;inset:0;clip-path:inset(48% 0 0 0)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;border-radius:999px;font:600 17px/1.2 "Instrument Sans",sans-serif;min-height:52px;border:0;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.small{padding:11px 18px;font-size:15px;min-height:44px}
.btn.big{font-size:19px;padding:20px 32px}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 24px -10px rgba(255,216,77,.8)}
.btn-gold:hover{box-shadow:0 14px 30px -10px rgba(255,216,77,.95)}
.btn-line{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-ghost{color:#fff;padding-left:6px;padding-right:6px}
.btn-ghost:hover{color:var(--gold)}
.btn-royal{background:var(--royal);color:#fff}
.btn-royal:hover{background:var(--royal-deep)}
.btn-outline{border:1.5px solid var(--line);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--ink)}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--royal);color:#fff;transition:background .35s,box-shadow .35s,color .35s}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-size:34px}
.links{display:flex;align-items:center;gap:30px;font-size:16px}
.links a:not(.btn){opacity:.85;transition:opacity .2s}
.links a:not(.btn):hover{opacity:1}
.home .top{background:transparent}
.home .top.scrolled{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);color:var(--ink);box-shadow:0 1px 0 rgba(20,24,43,.08)}
.home .top.scrolled .logo{color:var(--royal)}

/* ---------- Intro ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--royal-deep);display:grid;place-items:center;pointer-events:none}
.intro-logo{font-size:clamp(96px,24vw,280px);color:#fff}
.intro-logo .t1{animation:introLift .75s .3s var(--ease) both}
.intro-logo::after{content:"";position:absolute;left:4%;right:4%;top:50.5%;height:.035em;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:introLine .6s .45s var(--ease) both}
.intro{animation:introOut .9s 1.2s cubic-bezier(.76,0,.24,1) both}
@keyframes introLift{from{transform:translateY(-.035em)}to{transform:translateY(-.16em)}}
@keyframes introLine{to{transform:scaleX(1)}}
@keyframes introOut{to{transform:translateY(-100%)}}
.intro-on body{overflow:hidden}

/* ---------- Hero ---------- */
.hero{position:relative;background:radial-gradient(120% 90% at 85% 10%,#2A55D9 0%,var(--royal) 35%,var(--royal-deep) 70%,var(--night) 100%);color:#fff;margin-top:-72px;padding:150px 0 110px;overflow:hidden}
.hero-glow{position:absolute;width:760px;height:760px;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,77,.22),transparent 62%);pointer-events:none;animation:glow 9s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(-60px,50px) scale(1.08)}}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.08fr;gap:64px;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:26px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(255,216,77,.7);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(255,216,77,0)}100%{box-shadow:0 0 0 0 rgba(255,216,77,0)}}
.hero-h{font-size:clamp(64px,8.4vw,124px);line-height:.88}
.hero-h .line{display:block;overflow:hidden;padding-bottom:.04em}
.hero-h .line>span{display:block}
.hero-h em{font-style:normal;color:var(--gold)}
.lead{font-size:21px;line-height:1.55;color:rgba(255,255,255,.86);max-width:30em;margin-top:30px}
.ctas{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:36px}
.proof{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;padding:0;margin:34px 0 0;font-size:15px;color:rgba(255,255,255,.78)}
.proof li{display:flex;align-items:center;gap:8px}
.proof li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23112B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;flex:none}

.browser{border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 50px 100px -30px rgba(3,10,40,.75),0 0 0 1px rgba(255,255,255,.12);transform:perspective(1600px) rotateY(-7deg) rotateX(3deg);transition:transform .8s var(--ease)}
.hero-visual:hover .browser{transform:perspective(1600px) rotateY(0) rotateX(0)}
.bar,.dbar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#EEF0F5;border-bottom:1px solid #E1E4EC}
.bar i,.dbar i{width:10px;height:10px;border-radius:50%;background:#D3D7E2}
.bar i:first-child,.dbar i:first-child{background:#FF6159}.bar i:nth-child(2),.dbar i:nth-child(2){background:#FFBD2E}.bar i:nth-child(3),.dbar i:nth-child(3){background:#28C941}
.bar span,.dbar span{margin-left:12px;flex:1;max-width:260px;background:#fff;border-radius:7px;font-size:12px;color:#7A8095;padding:3px 12px;line-height:1.4}
.compare{position:relative;--pos:50%;aspect-ratio:1440/774;overflow:hidden;user-select:none}
.compare img{width:100%;height:100%;object-fit:cover;object-position:top}
.cmp-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:var(--gold);pointer-events:none}
.cmp-line span{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cmp-tag{position:absolute;top:14px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(20,24,43,.78);color:#fff;pointer-events:none}
.tag-l{left:14px}.tag-r{right:14px;background:var(--gold);color:var(--ink)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-note{margin-top:16px;font-size:14px;color:rgba(255,255,255,.6);text-align:center}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* Hero-Aufbau nach dem Intro */
.js .hero-h .line>span{transform:translateY(105%);transition:transform 1s var(--ease)}
.js .hero-h .line:nth-child(2)>span{transition-delay:.1s}.js .hero-h .line:nth-child(3)>span{transition-delay:.2s}
.js.ready .hero-h .line>span{transform:none}
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js.ready .rise{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Sections ---------- */
.sec{padding:130px 0}
.light{background:var(--wash)}
.blue{background:var(--royal-deep);color:#fff}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--royal);margin-bottom:18px;display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:2px;background:currentColor}
.center .eyebrow::after{content:"";width:28px;height:2px;background:currentColor}
.eyebrow.gold{color:var(--gold)}
.sec-head{margin-bottom:64px}
.sec h2,.story-intro h2,.cta-sec h2{font-size:clamp(46px,6vw,84px)}
.huge{font-size:clamp(56px,8vw,120px)!important}
.sub{font-size:20px;color:var(--muted);max-width:36em;margin-top:22px}
.center .sub{margin-left:auto;margin-right:auto}

/* ---------- Story ---------- */
.story-intro{padding:140px 0 40px;background:#fff}
.story-intro h2{color:var(--royal-deep)}
.stories{background:#fff}
.story{position:relative;height:300vh}
.story-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:5fr 8fr;gap:64px;align-items:center;width:100%}
.story-num{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.story-h{display:grid;font-size:clamp(40px,4.4vw,66px)}
.story-h span,.chips{grid-area:1/1;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.h-old{color:#9AA0B3}
.h-new{color:var(--royal-deep);opacity:0;transform:translateY(24px)}
.is-new .h-old{opacity:0;transform:translateY(-24px)}
.is-new .h-new{opacity:1;transform:none}
.story-text>.chips-old,.story-text>.chips-new{margin-top:30px}
.story-text{display:grid;grid-template-rows:auto auto auto}
.story-text .chips-old,.story-text .chips-new{grid-row:3;grid-column:1}
.story-text .story-num{grid-row:1}.story-text .story-h{grid-row:2}
.chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;align-content:flex-start}
.chips li{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:600;padding:9px 16px;border-radius:999px}
.chips-old li{background:#FCEDEC;color:#B4302A}
.chips-old li::before{content:"✕";font-size:12px}
.chips-new li{background:#E9EEFC;color:var(--royal-deep)}
.chips-new li::before{content:"✓";font-size:13px;color:var(--royal)}
.chips-new{opacity:0;transform:translateY(16px)}
.is-new .chips-old{opacity:0;transform:translateY(-16px)}
.is-new .chips-new{opacity:1;transform:none}
.chips li{transition:transform .5s var(--ease)}

.device-wrap{display:flex;justify-content:center}
.device{width:min(100%,calc(68vh * 1.6));border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -30px rgba(17,43,130,.45),0 0 0 1px rgba(20,24,43,.08);transform:translateY(calc((1 - var(--lift,0)) * 10px));}
.screen{position:relative;aspect-ratio:1440/900;overflow:hidden;background:#ddd}
.screen img{width:100%;height:100%;object-fit:cover;object-position:top}
.shot-old{transform:scale(calc(1 - var(--lift,0) * .06));filter:brightness(calc(1 - var(--lift,0) * .45)) saturate(calc(1 - var(--lift,0) * .5));transform-origin:50% 0}
.shot-new{position:absolute;inset:0;clip-path:inset(calc((1 - var(--lift,0)) * 100%) 0 0 0)}
.shot-new img{transform:translateY(calc((1 - var(--lift,0)) * 18%))}
.lift-edge{position:absolute;left:0;right:0;height:4px;top:calc((1 - var(--lift,0)) * 100% - 2px);background:var(--gold);box-shadow:0 0 24px 4px rgba(255,216,77,.6);opacity:var(--edge,0)}
.year{position:absolute;top:14px;right:14px;font:600 12px/1 "Instrument Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;border-radius:999px;transition:opacity .4s}
.y-old{background:rgba(20,24,43,.8);color:#fff}
.y-new{background:var(--gold);color:var(--ink);opacity:0}
.is-new .y-old{opacity:0}.is-new .y-new{opacity:1}
.story-progress{position:absolute;left:40px;right:40px;bottom:28px;height:3px;border-radius:2px;background:var(--line);max-width:1160px;margin:0 auto}
.story-progress span{display:block;height:100%;border-radius:2px;background:var(--royal);width:calc(var(--p,0) * 100%)}

/* ---------- Videos ---------- */
.videos-sec{padding-top:100px}
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.videos figure{margin:0}
.videos video{width:100%;aspect-ratio:9/16;border-radius:var(--r);background:#000;object-fit:cover;box-shadow:0 30px 60px -30px rgba(17,43,130,.45)}
.videos figcaption{margin-top:14px;font-size:16px;color:var(--muted)}

/* ---------- Features ---------- */
.blue h2{max-width:12em}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,.18)}
.feat>div{padding:34px 30px 10px 0}
.feat>div+div{padding-left:30px;border-left:1px solid rgba(255,255,255,.18)}
.fnum{font-family:"Archivo V",sans-serif;font-stretch:70%;font-weight:900;font-size:44px;color:var(--gold);line-height:1}
.feat h3{font-size:21px;margin:22px 0 10px}
.feat p{color:rgba(255,255,255,.75);font-size:17px}

/* ---------- Check ---------- */
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.check-sec h2{color:var(--royal-deep)}
.quiz{background:#fff;border-radius:28px;padding:44px;box-shadow:0 40px 90px -40px rgba(17,43,130,.4),0 0 0 1px var(--line);min-height:360px;display:flex;flex-direction:column}
.q-progress{height:6px;border-radius:3px;background:var(--wash);overflow:hidden;margin-bottom:36px}
.q-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--royal),#4C74F0);border-radius:3px;transition:width .5s var(--ease)}
.q-count{font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.q-text{font-size:27px;line-height:1.3;font-weight:600;margin:14px 0 34px;min-height:3.9em}
.q-btns{display:flex;gap:12px}
.q-btns .btn{flex:1}
.swap{animation:swap .45s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateX(24px)}}
.q-result{text-align:center;animation:swap .5s var(--ease)}
.score{font-family:"Archivo V",sans-serif;font-stretch:70%;font-weight:900;font-size:120px;line-height:.9;color:var(--royal)}
.score small{font-size:40px;color:var(--muted);margin-left:6px}
.q-verdict{font-size:40px;color:var(--royal-deep);margin:14px 0 12px}
.q-result p:not(.q-verdict){color:var(--muted)}
.q-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}

/* ---------- Ablauf ---------- */
#ablauf h2{color:var(--royal-deep)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;list-style:none;padding:0;margin:0}
.steps li{position:relative;background:#fff;border-radius:var(--r);padding:34px 28px;box-shadow:0 0 0 1px var(--line)}
.snum{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--royal);color:#fff;font-weight:700;margin-bottom:22px}
.steps b{font-size:20px;display:block;margin-bottom:8px}
.steps p{color:var(--muted);font-size:16px}
.promise{display:flex;gap:30px;align-items:center;margin-top:44px;background:var(--royal-deep);color:#fff;border-radius:28px;padding:40px 48px}
.seal{flex:none;width:84px;height:84px;animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.seal svg{width:100%;height:100%}
.promise h3{font-size:26px;margin-bottom:8px}
.promise p{color:rgba(255,255,255,.8)}

/* ---------- Preise ---------- */
#preise h2{color:var(--royal-deep)}
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pack{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:40px 34px;background:#fff;box-shadow:0 0 0 1px var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pack:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(17,43,130,.35)}
.pack h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.price{font-family:"Archivo V",sans-serif;font-stretch:70%;font-weight:900;font-size:66px;line-height:1;margin:14px 0 10px;color:var(--royal-deep)}
.pdesc{color:var(--muted);font-size:16px;margin-bottom:24px}
.pack ul{list-style:none;padding:24px 0 0;margin:0 0 32px;border-top:1px solid var(--line);flex:1}
.pack li{position:relative;padding-left:28px;margin-bottom:12px;font-size:16px}
.pack li::before{content:"✓";position:absolute;left:0;color:var(--royal);font-weight:700}
.pack .btn{width:100%}
.pro{background:var(--royal-deep);color:#fff;box-shadow:0 40px 80px -30px rgba(17,43,130,.6);transform:scale(1.03)}
.pro:hover{transform:scale(1.03) translateY(-6px)}
.pro h3,.pro .pdesc{color:rgba(255,255,255,.7)}
.pro .price{color:#fff}
.pro ul{border-color:rgba(255,255,255,.18)}
.pro li::before{color:var(--gold)}
.flag{position:absolute;top:-14px;left:34px;background:var(--gold);color:var(--ink);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.care{text-align:center;color:var(--muted);margin-top:40px;font-size:17px}
.deal{display:flex;align-items:center;gap:20px;max-width:820px;margin:26px auto 0;padding:20px 26px;border-radius:18px;background:#FFF8D9;border:1.5px dashed #E8C22E}
.deal-tag{flex:none;background:var(--ink);color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 13px;border-radius:999px}
.deal s{color:var(--muted)}

/* ---------- Über mich ---------- */
.about{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.about-img{position:relative}
.about-img img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:32px;background:var(--wash)}
.about-img::before{content:"";position:absolute;inset:24px -24px -24px 24px;border-radius:32px;background:var(--gold);z-index:-1}
.about-badge{position:absolute;left:24px;bottom:24px;background:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.about-badge::before{content:"📍 "}
.about h2{color:var(--royal-deep);margin-bottom:24px}
.about-lead{font-size:24px;line-height:1.4;font-weight:600;margin-bottom:18px}
.about p+p{margin-top:14px}
.about p:not(.about-lead):not(.eyebrow){color:var(--muted)}
.facts{display:flex;gap:40px;list-style:none;padding:28px 0 0;margin:32px 0 0;border-top:1px solid var(--line)}
.facts b{display:block;font-family:"Archivo V",sans-serif;font-stretch:70%;font-weight:900;font-size:48px;line-height:1;color:var(--royal)}
.facts span{font-size:15px;color:var(--muted)}

/* ---------- FAQ ---------- */
#faq h2{color:var(--royal-deep)}
.faq details{background:#fff;border-radius:18px;margin-bottom:12px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s}
.faq details[open]{box-shadow:0 0 0 1.5px var(--royal),0 20px 40px -25px rgba(17,43,130,.35)}
.faq summary{list-style:none;cursor:pointer;padding:24px 64px 24px 28px;font-weight:600;font-size:19px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:24px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:var(--wash);display:grid;place-items:center;font-size:20px;color:var(--royal);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--royal);color:#fff}
.faq details p{padding:0 28px 26px;color:var(--muted)}

/* ---------- Kontakt ---------- */
.cta-sec{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 10% 100%,#2A55D9 0%,var(--royal) 35%,var(--royal-deep) 70%,var(--night) 100%);color:#fff;padding:140px 0}
.cta-sec .hero-glow{left:-260px;right:auto;top:auto;bottom:-300px}
.cta-grid{position:relative;display:grid;grid-template-columns:1.3fr 1fr;gap:70px;align-items:center}
.cta-sec h2{margin-bottom:24px}
.cta-sec p{color:rgba(255,255,255,.82);font-size:20px}
.contact{display:flex;flex-direction:column;gap:14px}
.contact .mail{text-align:center;font-size:16px;color:rgba(255,255,255,.6)}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:#AEB4C8;font-size:15px}
.foot-row{display:flex;justify-content:space-between;align-items:center;padding:26px 40px;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px}
.foot a{color:#fff}

.float-cta{position:fixed;left:16px;right:16px;bottom:16px;z-index:30;display:none;text-align:center;background:var(--gold);color:var(--ink);font-weight:700;padding:15px;border-radius:999px;box-shadow:0 12px 30px -8px rgba(0,0,0,.4);transform:translateY(140%);transition:transform .45s var(--ease)}
.float-cta.show{transform:none}

/* ---------- Rechtliches ---------- */
.legal{max-width:760px;margin:0 auto;padding:70px 40px 100px}
.legal h1{font-size:64px;color:var(--royal)}
.legal h2{font-size:22px;margin:36px 0 8px}
.legal p,.legal li{color:#3A4058}
.legal a{color:var(--royal);text-decoration:underline}

/* ---------- Tablet ---------- */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .browser{transform:none}
  .feat{grid-template-columns:1fr 1fr}
  .feat>div:nth-child(3){padding-left:0;border-left:0}
  .feat>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.18);margin-top:20px}
  .steps{grid-template-columns:1fr 1fr}
  .check-grid,.about,.cta-grid{grid-template-columns:1fr;gap:48px}
  .about-img{max-width:420px}
  .packs{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .pro{transform:none}.pro:hover{transform:translateY(-6px)}
}

/* ---------- Handy ---------- */
@media (max-width:860px){
  body{font-size:17px}
  .wrap{padding:0 20px}
  .nav{height:64px}
  .logo{font-size:28px}
  .links a:not(.btn){display:none}
  .hero{margin-top:-64px;padding:110px 0 90px}
  .hero-h{font-size:clamp(54px,17vw,84px)}
  .lead{font-size:18px;margin-top:22px}
  .ctas{margin-top:28px}.ctas .btn-gold{width:100%}
  .proof{gap:8px 18px;font-size:14px}
  .hero-glow{width:460px;height:460px;right:-200px;top:-120px}
  .scroll-cue{display:none}
  .sec{padding:84px 0}
  .sec-head{margin-bottom:40px}
  .sub{font-size:18px}
  .story-intro{padding:90px 0 10px}

  /* Story als Handy im Handy */
  .story{height:280vh}
  .story-sticky{align-items:flex-start;padding-top:76px}
  .story-grid{display:flex;flex-direction:column;gap:16px}
  .story-num{margin-bottom:8px;font-size:12px}
  .story-h{font-size:clamp(28px,8.4vw,40px)}
  .story-text .chips-old,.story-text .chips-new{margin-top:12px}
  .chips{gap:6px}
  .chips li{font-size:13px;padding:6px 11px}
  .device-wrap{width:100%}
  .device{width:min(74vw,calc((100svh - 330px) * 390 / 844));border-radius:38px;padding:9px;background:#14182B;box-shadow:0 40px 80px -30px rgba(17,43,130,.55),inset 0 0 0 2px #2B3150}
  .dbar{display:none}
  .screen{aspect-ratio:390/844;border-radius:30px}
  .screen::before{content:"";position:absolute;z-index:3;top:9px;left:50%;width:34%;height:22px;margin-left:-17%;background:#14182B;border-radius:12px}
  .year{top:auto;bottom:14px;right:50%;transform:translateX(50%)}
  .story-progress{left:20px;right:20px;bottom:18px}

  .videos{grid-template-columns:1fr;max-width:340px;margin:0 auto;gap:40px}
  .feat{grid-template-columns:1fr}
  .feat>div,.feat>div+div{padding:28px 0 0;border-left:0;margin-top:0}
  .feat>div+div{border-top:1px solid rgba(255,255,255,.18);margin-top:24px}
  .quiz{padding:30px 22px;border-radius:24px;min-height:330px}
  .q-text{font-size:22px}
  .steps{grid-template-columns:1fr}
  .promise{flex-direction:column;align-items:flex-start;padding:32px 26px;gap:18px}
  .promise h3{font-size:22px}
  .seal{width:64px;height:64px}
  .price{font-size:58px}
  .deal{flex-direction:column;align-items:flex-start;gap:12px}
  .about-img{max-width:none;margin-right:24px}
  .about-lead{font-size:21px}
  .facts{gap:22px}.facts b{font-size:38px}.facts span{font-size:13px}
  .faq summary{font-size:17px;padding:20px 58px 20px 20px}
  .faq details p{padding:0 20px 22px}
  .cta-sec{padding:96px 0 110px}
  .foot-row{padding:22px 20px 90px}
  .float-cta{display:block}
  .legal{padding:48px 20px 72px}
  .legal h1{font-size:44px}
}


/* ---------- Handy: Vorher/Nachher bildschirmfüllend ---------- */
@media (max-width:860px){
  .hero-visual{display:none}
  .hero{padding-bottom:70px}
  .story-intro{padding:80px 0 30px}
  .story{height:240vh;transition:--lift .9s cubic-bezier(.65,0,.35,1)}
  .story-sticky{padding-top:0;align-items:stretch}
  .story-grid{display:block;position:relative;height:100%;padding:0;max-width:none}
  .device-wrap{position:absolute;inset:64px 0 0 0}
  .device{width:100%;height:100%;border-radius:0;padding:0;background:#fff;box-shadow:none;transform:none}
  .screen{aspect-ratio:auto;height:100%;border-radius:0}
  .screen::before{display:none}
  .shot-old{transform:scale(calc(1 - var(--lift,0) * .08))}
  .lift-edge{opacity:min(calc(var(--lift) * 30),calc((1 - var(--lift)) * 4));height:5px}
  .year{display:none}
  .story-num::before{content:"Vorher · ";color:#FF9C95}
  .is-new .story-num::before{content:"Nachher · ";color:var(--gold)}
  .story-text{position:absolute;z-index:4;left:12px;right:12px;bottom:14px;padding:16px 18px 18px;border-radius:20px;background:rgba(11,28,92,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;box-shadow:0 20px 40px -12px rgba(0,0,0,.45)}
  .story-num{color:rgba(255,255,255,.65);margin-bottom:6px}
  .story-h{font-size:clamp(24px,7vw,32px)}
  .h-old{color:#fff}.h-new{color:var(--gold)}
  .story-text .chips-old,.story-text .chips-new{margin-top:10px}
  .chips-old li{background:rgba(255,97,89,.18);color:#FFB3AD}
  .chips-new li{background:rgba(255,216,77,.16);color:#FFE58A}
  .chips-new li::before{color:var(--gold)}
  .story-progress{display:none}
}
@media (max-width:860px) and (prefers-reduced-motion:reduce){.story{transition:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.about-solo{grid-template-columns:1fr;max-width:860px}