:root{
  --night:#0b0d0e;--night-2:#15181a;--ink:#eef0ec;--ink-2:#b4bbb8;
  --paper:#efefec;--paper-2:#e2e2de;--p-ink:#0b0d0e;--p-ink-2:#454a4c;
  --report:#17181c;
  --display:"Funnel Display",system-ui,sans-serif;--sans:"Funnel Sans",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --gut:clamp(20px,4.5vw,72px);--w:1480px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--lime);color:var(--on-lime)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.in{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
section{padding:clamp(56px,6vw,96px) 0}
.paper{background:var(--paper);color:var(--p-ink);--ink-2:var(--p-ink-2)}
.paper :focus-visible{outline-color:var(--p-ink)}
h1,h2,h3{font-family:var(--display);font-weight:650;margin:0;text-wrap:balance}
h2{font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.03em;max-width:22ch}
.lead{font-size:clamp(1.12rem,1.5vw,1.3rem);color:var(--ink-2);max-width:52ch;margin:28px 0 0}

/* Kopfzeile */
.bar{position:fixed;inset:0 0 auto;z-index:20;transition:background-color .3s ease}
.bar.s{background:var(--night)}
.bar .in{display:flex;align-items:center;justify-content:space-between;height:76px}
.logo{font:600 1.5rem var(--display);text-decoration:none}
.logo b{color:var(--lime);font-weight:600}
.bar nav{display:flex;align-items:center;gap:30px}
.bar nav a:not(.btn){font-size:.95rem;color:var(--ink-2);text-decoration:none;transition:color .2s ease}
.bar nav a:not(.btn):hover{color:var(--ink)}
.bar .btn{padding:11px 20px;font-size:.95rem}
@media (max-width:440px){.logo{font-size:1.3rem}.bar .btn{padding:10px 13px;font-size:.84rem}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1.08rem var(--sans);padding:19px 30px;border:0;border-radius:0;background:var(--lime);color:var(--on-lime);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform 160ms var(--ease-out),background-color .2s ease}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--lime-hi)}}
.btn.alt{background:transparent;color:inherit;border:2px solid currentColor;padding:17px 28px}
@media (hover:hover) and (pointer:fine){.btn.alt:hover{background:var(--ink);color:var(--night)}}
.row{display:flex;flex-wrap:wrap;gap:10px;max-width:620px}
.row input{flex:1 1 230px;min-width:0;font:500 1.1rem var(--sans);padding:18px 20px;border:2px solid #3a4143;border-radius:0;background:var(--night-2);color:var(--ink);transition:border-color .2s ease}
.row input::placeholder{color:#8a918f}
.row input:focus{outline:none;border-color:var(--lime)}
.fine{font-size:.9rem;color:var(--ink-2);margin:16px 0 0}
.proof{display:flex;align-items:center;gap:20px;margin:0;max-width:62ch}
.proof img{flex:none;width:76px;height:76px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--lime)}
.proof p{margin:0;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.proof b{display:block;font:600 1.1rem/1.3 var(--display);color:var(--ink)}

/* Kopf */
.hero{padding:clamp(112px,14vh,170px) 0 clamp(80px,10vw,140px)}
.hero .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,3.4vw,56px) clamp(32px,4vw,64px);align-items:center}
.hero h1{grid-column:1/-1;font-size:clamp(2.3rem,7.2vw,7.4rem);line-height:.95;letter-spacing:-.045em;max-width:none}
.hprice{display:flex;align-items:center;gap:18px;margin:0 0 18px}
.hprice b{font:700 clamp(2.8rem,3.8vw,3.8rem)/.9 var(--display);letter-spacing:-.04em;color:var(--lime);font-variant-numeric:tabular-nums}
.hprice span{font-size:.92rem;line-height:1.4;color:var(--ink-2)}
.hsub strong{color:var(--lime);font-weight:650}
.hsub .exp2{color:var(--ink)}
.hsub{font-size:clamp(1.15rem,1.6vw,1.38rem);line-height:1.45;color:var(--ink-2);max-width:40ch;margin:0}
.ticks{list-style:none;padding:0;margin:28px 0 26px;display:grid;grid-template-columns:repeat(2,max-content);gap:14px 40px}
.ticks .st svg{color:var(--on-lime)}
.ticks .st{flex:none;display:grid;place-items:center;width:30px;height:30px;background:var(--lime);color:var(--on-lime)}
.js .ticks li .st{transform:scale(.4) rotate(-12deg);animation:stamp .45s cubic-bezier(.34,1.56,.64,1) forwards;animation-delay:calc(.4s + var(--k)*.13s)}
@keyframes stamp{to{transform:none}}
.ticks li{display:flex;align-items:center;gap:14px;font:650 clamp(1.15rem,1.5vw,1.45rem)/1.2 var(--display);letter-spacing:-.01em}
.js .ticks li{opacity:0;transform:translateY(14px) scale(.96);animation:tickin .55s var(--ease-out) forwards;animation-delay:calc(.35s + var(--k)*.13s)}
.js .ticks li path{stroke-dasharray:1;stroke-dashoffset:1;animation:tickdraw .4s var(--ease-out) forwards;animation-delay:calc(.5s + var(--k)*.13s)}
@keyframes tickin{to{opacity:1;transform:none}}
@keyframes tickdraw{to{stroke-dashoffset:0}}
.ticks svg,.list svg{flex:none;color:var(--lime)}
.tilt{margin:0;perspective:1400px}
.tilt .shot{transform:rotateY(-16deg) rotateX(7deg) rotateZ(-1.5deg);transform-origin:60% 50%;transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out);box-shadow:-30px 40px 70px -20px rgba(0,0,0,.7),-6px 10px 24px -8px rgba(0,0,0,.5);will-change:transform}
.tilt .shot{outline:1px solid #343841;outline-offset:-1px}
.tilt figcaption{margin-top:28px}
.shot{position:relative;container-type:inline-size;background:var(--report);aspect-ratio:1770/1300;overflow:hidden}
.shot img{width:100%}
.shot .t{position:absolute;left:9.6%;top:25.7%;width:62%;height:15.9%;background:var(--report);display:flex;align-items:center}
.shot .t span{font:650 4.55cqw/1.05 var(--display);letter-spacing:-.035em;color:#f0f1f3;overflow-wrap:anywhere}
.shot .pill{position:absolute;left:9%;top:18.7%;width:34%;height:6.1%;background:var(--report);display:flex;align-items:center}
.shot .pill b{font:400 1.08cqw/1 var(--sans);color:#c9cbd0;border:1px solid #3a3d44;border-radius:999px;padding:.75cqw 1.2cqw}
.shot .t i{font-style:normal;color:var(--lime)}
.shot img{transition:opacity .6s ease}
.shot.fx img{opacity:0}
.shot.fx.done img{opacity:1}
#dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .6s ease}
.shot.done:not(.hot) #dots{opacity:0}
.shot .scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--lime);opacity:0;pointer-events:none;z-index:3}
.shot .scan::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:90px;background:linear-gradient(to top,color-mix(in srgb,var(--lime) 16%,transparent),transparent)}
figcaption{font-size:.88rem;color:var(--ink-2);margin-top:14px}

/* Lage */
.lage .in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"h h" "chat side";column-gap:clamp(40px,6vw,104px);row-gap:clamp(32px,4vw,56px);align-items:start}
.lage h2{grid-area:h;max-width:none}

.lage .chat{grid-area:chat}
.lage .side{grid-area:side;align-self:start}
.chat{background:var(--night);color:var(--ink);font-size:clamp(1rem,1.25vw,1.15rem);box-shadow:0 40px 80px -40px rgba(0,0,0,.55);display:flex;flex-direction:column}
.cbar{display:flex;align-items:center;gap:8px;padding:16px 22px;border-bottom:1px solid #22272a}
.cbar i{width:11px;height:11px;border-radius:50%;background:#2c3134}
.cbar span{margin-left:12px;font:600 .85rem var(--sans);color:var(--ink-2)}
.cbody{padding:clamp(24px,3vw,44px);flex:1}
.chat .q{margin-left:auto;max-width:86%;width:fit-content;background:#22272a;padding:16px 22px;border-radius:22px 22px 4px 22px;line-height:1.45}
#qt.typing::after{content:"";display:inline-block;width:2px;height:1.1em;background:var(--lime);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.think{display:none;gap:6px;margin-top:26px;padding:4px 0}
.think.on{display:flex}
.think span{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:dot 1s ease-in-out infinite}
.think span:nth-child(2){animation-delay:.15s}.think span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.chat .a{margin-top:26px}
.chat .ln{margin:0 0 10px;display:flex;gap:16px;align-items:center}
.lead2{color:var(--ink-2)}
.spark{color:var(--lime);font-weight:400}
.chat .hit,.chat .miss{padding:14px 18px;background:#16191b;border:1px solid #22272a}
.chat .ln b{font:700 1.1em var(--display);color:var(--lime);width:1em;flex:none;text-align:center}
.chat .ln span{display:flex;flex-direction:column;gap:2px;min-width:0}
.chat .ln em{font-style:normal;font-weight:600}
.chat .ln small{font-size:.82em;color:var(--ink-2)}
.chat .blur{filter:blur(6px);user-select:none}
.chat .miss{background:transparent;border:2px dashed #3a4143}
.chat .miss b{color:#5b6366}
.chat .miss small{color:#ff8a7a;font-weight:600}
.chat .you{font:700 clamp(1.6rem,2.6vw,2.4rem)/1.15 var(--display);color:var(--lime);margin-top:30px;letter-spacing:-.02em}
.js .chat .ln{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.js .chat .ln.on{opacity:1;transform:none}
.js .chat .miss.on{animation:shake .5s .2s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.stat p{margin:18px 0 0;font-size:.98rem}
.donut{position:relative;width:min(100%,190px);aspect-ratio:1}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut circle{fill:none;stroke-width:13}
.donut .tr{stroke:#0b0d0e}
.donut .val{stroke:var(--lime);stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p));transition:stroke-dashoffset 1.4s cubic-bezier(.23,1,.32,1)}
.js .donut .val{stroke-dashoffset:100}
.js .donut.on .val{stroke-dashoffset:calc(100 - var(--p))}
.donut .pc{font-style:normal;margin-left:.02em}
.donut b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:0;white-space:nowrap;font:800 clamp(2.4rem,3.6vw,3.3rem)/1 var(--display);letter-spacing:-.055em;font-variant-numeric:tabular-nums}
@media (max-width:560px){.stats{gap:20px}.donut b{font-size:2rem}.stat p{font-size:.9rem}}
.big{font:700 clamp(6rem,12vw,11rem)/.85 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.lage .side{display:grid;gap:clamp(40px,5vw,64px);padding-top:clamp(8px,1vw,16px)}
.lage .side p{margin:16px 0 0;color:var(--ink-2);max-width:44ch}
.lage .side h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.12}
.lage small{font-size:.85em}

/* Report */
.rep .in>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(48px,7vw,110px)}
.rep h2{grid-column:1/-1;font-size:clamp(3rem,6.4vw,6.2rem);line-height:.98;margin:0}
h1 em,h1 .hl,.rep h2 em,.rep h2 .hl{font-style:normal;color:var(--lime)}
.rep .lead{grid-column:1/-1;margin:clamp(24px,2.4vw,36px) 0 0;font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.45;max-width:42ch;color:var(--ink)}
.rep .list,.rep .cta-line{grid-column:1/-1}
.rep .cta-line{justify-content:center;margin-top:clamp(48px,5vw,72px)}
.rep .cta-line .btn.big{font-size:clamp(1.25rem,1.8vw,1.6rem);padding:30px 64px}
@media (max-width:980px){.rep .cta-line .btn.big{width:100%;padding:24px 20px;justify-content:center;text-align:center;white-space:normal}}
.rep .list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(56px,7vw,96px);border-top:1px solid #2a3032}
.rep .list li{padding:clamp(28px,3vw,40px) clamp(20px,2.4vw,36px) clamp(28px,3vw,40px) 0;border-bottom:1px solid #2a3032}
.rep .list b{font-size:clamp(1.5rem,2vw,1.9rem)}
.rep .list span{font-size:1.05rem}
.rep .list li:last-child{grid-column:1/-1;border-bottom:0;margin-top:clamp(28px,3vw,44px);background:var(--lime);color:var(--on-lime);padding:clamp(28px,3vw,44px);align-items:start}
.rep .list li:last-child svg{color:var(--on-lime);width:26px;height:26px;margin-top:10px}
.rep .list li:last-child b{font-size:clamp(1.8rem,2.6vw,2.5rem)}
.rep .list li:last-child span{color:var(--on-lime);font-size:clamp(1.1rem,1.4vw,1.3rem)}
.list{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:22px}
.list li{display:grid;grid-template-columns:28px 1fr;gap:4px 14px}
.list svg{grid-row:span 2;margin-top:6px}
.list b{font:650 1.3rem/1.25 var(--display)}
.list span{color:var(--ink-2)}
.cta-line{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px}

/* Ablauf */
.ablh .btn{margin-top:36px}
.abl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center}
.steps{position:relative;list-style:none;padding:0;margin:0;display:grid;gap:clamp(22px,2.4vw,34px);counter-reset:s}
.steps::before,.steps .sfill{content:"";position:absolute;left:calc(clamp(56px,4.6vw,72px)/2 - 3px);top:20px;bottom:var(--sb,110px);width:6px;background:var(--paper-2)}
.steps .sfill{background:var(--lime);transform-origin:top;transform:scaleY(0);z-index:0}
.steps li{position:relative;z-index:1;display:grid;grid-template-columns:clamp(56px,4.6vw,72px) 1fr;column-gap:clamp(18px,2vw,28px);align-items:start}
.steps li>*{grid-column:2}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);grid-column:1;grid-row:1/span 3;width:100%;aspect-ratio:1;display:grid;place-items:center;background:var(--lime);color:var(--on-lime);font:800 clamp(1.8rem,2.6vw,2.4rem)/1 var(--display)}
.steps h3{font-size:clamp(1.3rem,1.7vw,1.6rem);margin:6px 0 4px}
.steps p{margin:0;color:var(--ink-2);max-width:32ch}
.steps .t{justify-self:start;display:inline-block;margin-top:14px;font-weight:600;background:var(--lime);color:var(--on-lime);padding:4px 10px;font-size:.92rem}

.pages{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(14px,2vw,28px);margin-top:clamp(64px,7vw,104px);align-items:end}
.pages figure{margin:0}
.pages img{aspect-ratio:1770/1500;object-fit:cover;object-position:top;width:100%}
.cap2{font-size:.88rem;color:var(--ink-2);margin:18px 0 0}
/* Inhalt */
.inh{background:var(--night-2)}
.inh .lead{color:var(--ink)}
.inhg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,5vw,72px) clamp(40px,6vw,104px);margin-top:clamp(48px,6vw,88px);align-items:start}
.inhg h3{font-size:clamp(1.9rem,3.2vw,3rem);line-height:1.02;letter-spacing:-.03em;color:var(--lime)}
.inhg p{font-size:clamp(1.08rem,1.3vw,1.22rem);max-width:42ch;margin:16px 0 0}
.inhg .fazit{grid-column:1/-1;max-width:none;margin:clamp(8px,1vw,16px) 0 0;background:var(--paper);color:var(--p-ink);padding:clamp(28px,3.4vw,48px);font:650 clamp(1.4rem,2.4vw,2.2rem)/1.2 var(--display);letter-spacing:-.02em}
/* Schluss */
.fin{text-align:center;padding-top:clamp(56px,6vw,96px);display:grid;justify-items:center;gap:18px}
.fin h2{font-size:clamp(3rem,6.4vw,6.2rem);max-width:none}
.fin p{margin:0 0 14px;font-size:clamp(1.15rem,1.5vw,1.35rem);max-width:40ch}
.fin .btn.big{font-size:clamp(1.2rem,1.6vw,1.45rem);padding:26px 56px}
@media (max-width:980px){.inhg{grid-template-columns:1fr}.fin .btn.big{width:100%;white-space:normal;padding:22px 20px}}
/* Wer wir sind */
.wer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(48px,6vw,104px);align-items:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(72px,8vw,128px)}
.devs{position:relative;margin:0;aspect-ratio:10/8.2}
.mac{position:absolute;left:0;top:0;width:86%}
.mac .scr{background:#111315;border-radius:14px 14px 0 0;padding:2.2% 2.2% 0;box-shadow:0 50px 80px -40px rgba(0,0,0,.45)}
.vp{position:relative;overflow:hidden}
.vp img{width:100%;height:auto;transform:translateY(0)}
.devs.run .vp img{animation:vscroll var(--t) cubic-bezier(.2,.2,.55,1) infinite alternate}
@media (hover:hover){.devs:hover .vp img{animation-play-state:paused}}
@keyframes vscroll{0%,2%{transform:translateY(0)}94%,100%{transform:translateY(var(--y))}}
.mac .vp{aspect-ratio:16/10;border-radius:3px 3px 0 0}
.mac .chin{display:block;height:clamp(22px,2.6vw,40px);background:#d9dbdd;border-radius:0 0 14px 14px}
.mac .neck{display:block;width:16%;margin:0 auto;height:clamp(40px,5vw,78px);background:#c9cccf}
.mac .foot{display:block;width:30%;margin:0 auto;height:8px;background:#c4c7ca;border-radius:2px 2px 6px 6px}
.tab,.pho{position:absolute;background:#111315;box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.tab{left:58%;bottom:4%;width:30%;padding:1.4%;border-radius:18px}
.tab .vp{border-radius:8px;aspect-ratio:820/1180}
.pho{left:84%;bottom:0;width:14%;padding:1%;border-radius:16px}
.pho .vp{border-radius:10px;aspect-ratio:9/19}
@media (prefers-reduced-motion:reduce){.devs.run .vp img{animation:none}}
.devs figcaption{position:absolute;left:0;top:calc(100% + 18px);color:var(--p-ink-2)}
.wert>p{color:var(--p-ink-2);font-size:clamp(1.08rem,1.3vw,1.22rem);max-width:48ch;margin:24px 0 0}
.wert h2{font-size:clamp(2rem,3.6vw,3.4rem)}
.werl{display:grid;gap:clamp(24px,2.6vw,36px);margin-top:clamp(36px,4vw,56px)}
.werl h3{font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.15}
.werl p{margin:8px 0 0;color:var(--p-ink-2);max-width:44ch}
@media (max-width:980px){.wer{grid-template-columns:1fr}.devs{margin-bottom:48px}}
/* Zweifel */
.zw .head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:end}
.zwg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,104px);align-items:start}
.zwl{position:sticky;top:120px}
.zwl h2{font-size:clamp(2.1rem,3.8vw,3.8rem)}
.qa{display:grid;gap:clamp(36px,4vw,56px)}
.qa>div{background:var(--night-2);padding:clamp(24px,2.6vw,36px)}
.qa h3{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1.15;max-width:22ch}
.qa p{margin:14px 0 0;color:var(--ink-2);max-width:44ch}

.exp{font:650 clamp(1.35rem,2.5vw,2.25rem)/1.2 var(--display);letter-spacing:-.02em;color:var(--lime);max-width:32ch;margin:clamp(32px,4vw,56px) 0 0}
.exp span{color:var(--ink-2)}
/* Absender */
.ab{padding:0}
.abgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.abgrid .abt p{margin-top:8px}
.count b{display:block;font:800 clamp(7rem,14vw,13rem)/.8 var(--display);letter-spacing:-.05em}
.count span{display:block;margin-top:16px;font:600 clamp(1.1rem,1.5vw,1.35rem)/1.3 var(--display);max-width:16ch}
.abt p{color:var(--ink-2);max-width:62ch;margin:28px 0 0;font-size:clamp(1.05rem,1.3vw,1.2rem)}
.journey{position:relative}
.jstage{position:relative;padding-bottom:clamp(40px,8vh,96px);display:flex;flex-direction:column;justify-content:flex-start;gap:clamp(28px,4vh,52px);padding-top:calc(76px + clamp(32px,6vh,72px))}
.jhead{width:100%;position:relative;z-index:2}
.jhead h2{font-size:clamp(2rem,3.8vw,3.6rem)}
.jhead .abt p{font-size:clamp(1rem,1.15vw,1.12rem)}
.jyear{position:absolute;left:var(--gut);bottom:2vh;font:800 clamp(6rem,19vw,19rem)/.8 var(--display);letter-spacing:-.05em;color:var(--paper-2);white-space:nowrap;pointer-events:none;user-select:none}
.jtrack{position:relative;align-self:flex-start;list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:clamp(18px,2.2vw,32px);will-change:transform}
.card{flex:none;width:clamp(260px,31vw,540px)}
.jtrack{perspective:1600px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;align-self:stretch;padding-block:20px}.jtrack::-webkit-scrollbar{display:none}.jtrack.drag{cursor:grabbing;user-select:none}
.card{transform-style:preserve-3d;will-change:transform,opacity}
.bw{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);transition:transform .4s var(--ease-out)}
.bw .bar{position:static;display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;background:#e4e4e0}
.bw .bar i{width:9px;height:9px;border-radius:50%;background:#c9c9c4}
.card img{width:100%;aspect-ratio:5/3;object-fit:cover;object-position:top;background:#ddd;display:block}
@media (hover:hover) and (pointer:fine){.card:hover .bw{transform:translateY(-8px)}}
.card p{margin:14px 0 0;display:flex;flex-direction:column;gap:2px}
.card p b{font:650 1.2rem/1.2 var(--display)}
.card span{color:var(--ink-2);font-size:.95rem}
.card.now .nowbox{aspect-ratio:5/3;background:var(--night);color:var(--ink);display:flex;align-items:center;justify-content:center;font:700 clamp(2.4rem,4.4vw,4.2rem) var(--display);letter-spacing:-.04em}
.card.now .nowbox b{color:var(--lime);font-weight:700}
/* Banner */
.jetzt{background:var(--lime);color:var(--on-lime);padding:clamp(64px,7vw,104px) 0 clamp(56px,6vw,88px)}
#ablauf{padding-bottom:clamp(56px,6vw,96px)}
.jetzt .pre{font:600 clamp(1.3rem,2.2vw,2rem)/1.2 var(--display);margin:0 0 22px}
.jetzt .now{font:650 clamp(2rem,4.4vw,4rem)/1.05 var(--display);letter-spacing:-.03em;margin:0}
.giant{overflow:hidden;line-height:.8;margin:clamp(20px,3vw,40px) 0 clamp(36px,4vw,56px)}
.giant span{display:block;font:800 24vw/.8 var(--display);letter-spacing:-.035em;padding-left:calc(max(0px,(100vw - var(--w))/2) + var(--gut) - .04em);white-space:nowrap;transform-origin:left bottom;will-change:transform}
.jetzt .in:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.jetzt .when{font-weight:600}
.jetzt .btn{background:var(--night);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.jetzt .btn:hover{background:#262a2c}}
/* Leitsatz */
.claim{background:var(--night);padding:0 0 clamp(64px,7vw,110px)}
.hero{padding-bottom:clamp(64px,7vw,104px)!important}
.claim .in{text-align:center}
.claim .proof{width:fit-content;margin:clamp(36px,3.6vw,56px) auto 0;max-width:min(100%,60ch);text-align:left}
.ctext{margin:0;font:700 clamp(2rem,5.6vw,5.2rem)/1 var(--display);letter-spacing:-.04em;max-width:none}
.ctext .cw{display:inline-block;color:var(--ink)}
.ctext .hl{color:var(--lime)}
.js .ctext .cw{opacity:.14}
/* Kauf */
.buy .in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:center}
.buy .in{row-gap:clamp(28px,3vw,44px)}
.buy .faq{margin-top:clamp(28px,4vw,56px)}
.buy .full{grid-column:1/-1;max-width:none}
.price{font:700 clamp(5.5rem,11vw,9.5rem)/.85 var(--display);letter-spacing:-.05em;margin:0 0 14px;color:var(--lime)}
.price small{font-size:.32em;letter-spacing:0}
.buy .form{margin-top:0}
.now{font:700 clamp(1.6rem,2.6vw,2.3rem)/1.2 var(--display);margin:48px 0 0;max-width:20ch}
.now b{color:var(--lime);font-weight:inherit}
.fast{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px;counter-reset:f}
.fast li{counter-increment:f;display:flex;gap:16px;align-items:baseline;color:var(--ink-2);font-size:1.05rem}
.fast li::before{content:counter(f);font:700 1.05rem var(--display);color:var(--lime);width:1.2em}
.form .btn.big{font-size:1.15rem;padding-block:20px;justify-content:center;text-align:center}
.form .sub{margin:2px 0 0;text-align:center;color:var(--ink);font-weight:600}
.buy .faq{margin-top:0;border-top:1px solid #2a3032;padding-top:clamp(40px,5vw,72px)}
.faq h3{margin-bottom:20px}
@media (min-width:981px){.faq{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(48px,7vw,110px);align-items:start}.faq h3{grid-column:1/-1}}
.cmp{margin:18px 0 0;font:600 clamp(1.05rem,1.3vw,1.2rem)/1.4 var(--display);color:var(--ink);padding-left:16px;border-left:3px solid var(--lime);max-width:34ch}
.safe{display:flex;gap:14px;align-items:flex-start;margin:32px 0 0;color:var(--ink-2);max-width:42ch;line-height:1.5}
.safe svg{flex:none;color:var(--lime);margin-top:1px}
.form .err{margin:6px 0 0;padding:12px 14px;border-left:3px solid #ff8a7a;background:#2a1a18;color:#ffd2cb;font-size:.95rem}
.form input.bad{border-color:#ff8a7a}
.form .check.bad span{color:#ffd2cb}
.form .btn[disabled]{opacity:.6;cursor:wait}
.form.soon input{opacity:.5}
.form.soon .btn[disabled]{opacity:1;cursor:default;background:#2a3032;color:#eef0ec}
.totop{position:fixed;right:clamp(16px,2.5vw,32px);bottom:clamp(16px,2.5vw,32px);z-index:60;width:52px;height:52px;display:grid;place-items:center;background:var(--lime);color:var(--on-lime);border:0;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s var(--ease-out)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.totop:hover{background:var(--lime-hi)}}
.tax{color:var(--ink-2)}
.form{background:var(--night-2);padding:clamp(24px,3vw,40px);margin-top:40px;display:grid;gap:8px}
.form label{font-size:.92rem;color:var(--ink-2);margin-top:10px}
.form input[type=text],.form input[type=email]{font:500 1.05rem var(--sans);padding:16px 18px;border:2px solid #3a4143;border-radius:0;background:var(--night);color:var(--ink)}
.form input:focus{outline:none;border-color:var(--lime)}
.form .check{display:flex;gap:12px;font-size:.88rem;line-height:1.5;margin:14px 0 8px}
.check input{appearance:none;-webkit-appearance:none;margin:0;width:32px;height:32px;flex:none;border:2px solid var(--lime);background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .2s ease,transform .15s ease}
.check input::after{content:"";width:16px;height:9px;border:solid var(--on-lime);border-width:0 0 3.5px 3.5px;transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .25s cubic-bezier(.2,1.6,.4,1)}
.check input:checked{background:var(--lime)}
.check input:checked::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.check input:active{transform:scale(.92)}
.check input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.form .check{align-items:center;gap:18px;cursor:pointer;font-size:.95rem}
.form .btn{margin-top:10px}
.pay{display:flex;gap:8px;margin:14px 0 0}
.pay span{display:grid;place-items:center;width:54px;height:34px;background:#fff;border-radius:5px}
.pay svg{width:30px;height:30px;fill:#1a1f71}
.pay span:nth-child(2) svg{fill:#eb001b}
.pay span:nth-child(n+3) svg{fill:#111;width:34px;height:34px}

.open{color:#ff8a7a;font-weight:600}
.faq h3{font-size:1.7rem;margin:0 0 14px}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;font:600 1.15rem/1.35 var(--display);position:relative;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 1.7rem var(--sans);transition:transform .25s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;color:var(--ink-2);max-width:56ch}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--lime)}}

.trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,5vw,72px) clamp(40px,7vw,110px);align-items:center;padding-bottom:clamp(48px,5vw,72px);margin-bottom:clamp(48px,5vw,72px)}
.trust .since{color:var(--ink);margin:0;font:700 clamp(2.4rem,4vw,4rem)/.9 var(--display);letter-spacing:-.03em;margin:0}
.since em{display:block;font-style:normal;color:var(--lime);font-size:clamp(6rem,14vw,13rem);letter-spacing:-.06em;line-height:.82}
.trust h2{font-size:clamp(2rem,3.4vw,3.2rem);line-height:1.08;margin:0}
.trust p:not(.since){color:var(--ink-2);font-size:clamp(1.08rem,1.3vw,1.25rem);line-height:1.6;max-width:52ch;margin:28px 0 0}
.svc{grid-column:1/-1;list-style:none;padding:0;margin:clamp(16px,2vw,32px) 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);border-top:1px solid #2a3032}
.svc li{font:600 clamp(1.1rem,1.4vw,1.3rem)/1.3 var(--display);padding:20px 0;border-bottom:1px solid #2a3032;display:flex;gap:12px;align-items:baseline}
.svc li::before{content:"";width:8px;height:8px;background:var(--lime);flex:none;transform:translateY(-2px)}
@media (max-width:980px){.trust{grid-template-columns:1fr}.svc{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc{grid-template-columns:1fr}}
.fname{cursor:default;white-space:nowrap;padding-bottom:.2em}
.fname span{display:inline-block;transition:transform .5s cubic-bezier(.2,1.6,.4,1),color .3s ease;will-change:transform}
.contact{text-align:center;margin:0 0 clamp(56px,6vw,96px)}
.contact p{font:600 clamp(1.4rem,2.4vw,2.2rem)/1.25 var(--display);margin:0 auto;max-width:36ch;text-wrap:balance}
.contact a{display:inline-block;margin-top:clamp(14px,1.6vw,24px);font:700 clamp(2rem,4.6vw,4.2rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--lime);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 3px no-repeat;transition:background-size .35s ease}
@media (hover:hover) and (pointer:fine){.contact a:hover{background-size:100% 3px}}
footer{padding:clamp(72px,9vw,120px) 0 96px;background:var(--night-2)}
.fname{font:700 min(16.6vw,15.8rem)/.8 var(--display);letter-spacing:-.05em;margin:0}
.fname b{color:var(--lime);font-weight:700}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;margin-top:48px;color:var(--ink-2);font-size:.92rem}
.frow nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.frow a{text-decoration:none}
.frow a:hover{color:var(--ink)}

/* Wörter steigen auf */
.js h2.split{opacity:1!important;transform:none!important}
h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
h2 .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease-out);transition-delay:calc(var(--i)*55ms)}
h2.on .w>span{transform:none}
/* Wortmarke atmet */

/* Einblenden */
.js .rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--d,0ms)}
.js .rv.on{opacity:1;transform:none}

@media (max-width:980px){
  .tilt .shot{transform:rotateY(-8deg) rotateX(4deg)}
  .bar nav a:not(.btn){display:none}
  .lage .in{grid-template-areas:"h" "chat" "side"}
  .ticks{grid-template-columns:1fr 1fr;gap:12px 20px}.ticks li{font-size:1.02rem}
  .abl{grid-template-columns:1fr}
  .abgrid{grid-template-columns:1fr}
  .hero .in,.lage .in,.rep .in>div,.rep .list,.zw .head,.ab .in,.buy .in{grid-template-columns:1fr}
  .steps,.qa{grid-template-columns:1fr}
  .zwg{grid-template-columns:1fr}.zwl{position:static}
  .jstage{height:auto;padding:24px 0 48px}.jtrack{scroll-snap-type:x mandatory}.card{scroll-snap-align:start;width:78vw}.jyear{display:none}
  .pages{grid-template-columns:1fr 1fr}.pages figure:first-child{grid-column:1/-1}
  h2,.jetzt h2{font-size:clamp(1.8rem,7.6vw,2.5rem)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{transform:none;transition:opacity .3s ease}
  .jstage{height:auto;padding:40px 0}.jtrack{scroll-snap-type:x mandatory}.card{scroll-snap-align:start}
  .js .chat .ln{opacity:1;transform:none}
  .js .ctext .cw{opacity:1}
  .js .ticks li,.js .ticks li path,.js .ticks li .st{animation:none;opacity:1;transform:none;stroke-dashoffset:0}
  .tilt .shot{transition:none}
  h2 .w>span{transform:none;transition:none}
  .tlw .fill{transform:none!important}
}

/* Foto vor dem Schriftzug */
footer .proof{width:fit-content;margin:0 auto clamp(56px,6vw,96px);max-width:min(100%,60ch);text-align:left}
footer .proof img{box-shadow:0 0 0 2px var(--night-2),0 0 0 4px var(--lime)}