/* Dreamlife.now · Funnel Businessplan Online-Freelancer
   Designsystem „Petrol“ (Tokens aus mein.dreamlife.now, site.css v16). Mobile first. */

@font-face{font-family:"Jakarta";src:url(../fonts/jakarta.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument";src:url(../fonts/instrument-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Caveat";src:url(../fonts/caveat.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --forest:#15302D;--pine:#10272B;--green:#157F87;--green-d:#0F6A71;--sun:#7FDCE3;--sun-d:#2BB3BE;
  --lime:#DDF4F5;--peach:#B5E8EC;--cream:#F6F5F2;--day:#EFF3F1;--paper:#fff;--sand:#EDE6DA;
  --text:#3F4B49;--muted:#5C6967;--quiet:#6E7A78;--line:rgba(21,48,45,.1);
  --bs-ink:#0E2422;--bs-grad:linear-gradient(100deg,#0F6A71,#1FA3AE 45%,#7FDCE3);--ok:#18A974;
  --f-sans:"Jakarta",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-serif:"Instrument",Georgia,serif;--f-hand:"Caveat","Segoe Print",cursive;
  --fs-hero:clamp(2.45rem,1.4rem + 5vw,4.6rem);--fs-h2:clamp(1.95rem,1.2rem + 3.1vw,3.3rem);
  --fs-lead:clamp(1.05rem,.98rem + .35vw,1.2rem);--fs-body:1.0625rem;
  --r-s:12px;--r-m:18px;--r-l:24px;--r-xl:30px;
  --lift:0 0 0 1px rgba(21,48,45,.06),0 30px 60px -34px rgba(21,48,45,.35);
  --lift-sm:0 0 0 1px rgba(21,48,45,.06),0 14px 30px -18px rgba(21,48,45,.3);
  --ease:cubic-bezier(.16,1,.3,1);
  --max:1200px;--gut:clamp(16px,4vw,48px);--sec:clamp(4.5rem,3rem + 6vw,9rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--cream);color:var(--text);font:400 var(--fs-body)/1.65 var(--f-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
svg.i{width:1.1em;height:1.1em;flex:none}
a{color:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,h4{font-family:var(--f-sans);color:var(--forest);margin:0;font-weight:800;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
em.s,h1 em,h2 em,h3 em{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--green)}
p{margin:0 0 1em}
.pt{margin-left:-.09em}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec) 0;position:relative}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--forest);color:#fff;padding:.6rem 1rem;border-radius:10px;z-index:100}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--sun-d);outline-offset:3px;border-radius:6px}

/* Eyebrow, Lead, Hand */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font:700 .82rem/1 var(--f-sans);letter-spacing:.02em;color:var(--green-d);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(21,127,135,.14)}
.dark .eyebrow{color:var(--sun)}.dark .eyebrow::before{background:var(--sun);box-shadow:0 0 0 4px rgba(127,220,227,.16)}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--muted);max-width:40rem}
.dark .lead{color:rgba(255,255,255,.74)}
.hand{font:600 1.55rem/1.05 var(--f-hand);color:var(--green);transform:rotate(-3deg);display:inline-flex;gap:.35rem;align-items:flex-end}
.dark .hand{color:var(--sun)}
.hand svg{width:54px;height:40px;flex:none}
.hand svg path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.1s var(--ease) .3s}
.hand.drawn svg path,.no-motion .hand svg path{stroke-dashoffset:0}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.5rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lead{margin-left:auto;margin-right:auto}
.sec-head h2{font-size:var(--fs-h2);margin-bottom:1rem}

/* Buttons */
.btn{--bg:var(--sun);display:inline-flex;align-items:center;gap:.9rem;background:var(--bg);color:var(--bs-ink);font:750 1.02rem/1.1 var(--f-sans);text-decoration:none;border:0;border-radius:999px;padding:.55rem .55rem .55rem 1.45rem;min-height:56px;box-shadow:0 0 0 0 rgba(127,220,227,.0),0 18px 40px -16px rgba(43,179,190,.75);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s;position:relative;isolation:isolate;text-align:left}
.btn .ar{flex:none;width:44px;height:44px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:var(--sun);transition:transform .45s var(--ease)}
.btn .ar svg{width:18px;height:18px}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(127,220,227,.22),0 24px 48px -16px rgba(43,179,190,.85)}
.btn:hover .ar{transform:rotate(-45deg)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--glow::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:conic-gradient(from var(--a,0deg),transparent 0 70%,rgba(255,255,255,.9) 80%,transparent 90%);z-index:-1;animation:spin 3.2s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:2px}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.btn--full{width:100%;justify-content:space-between}
.btn--sm{min-height:42px;font-size:.9rem;padding:.3rem .3rem .3rem 1rem;gap:.6rem}
.btn--sm .ar{width:34px;height:34px}
.btn--ghost{background:transparent;color:var(--forest);box-shadow:inset 0 0 0 1.5px rgba(21,48,45,.2)}
.dark .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--green)}
.btn-note{display:block;font-size:.84rem;color:var(--quiet);margin-top:.8rem}
.dark .btn-note{color:rgba(255,255,255,.6)}
.tlink{color:var(--green-d);font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(21,127,135,.3);transition:border-color .3s}
.tlink:hover{border-color:var(--green)}
.dark .tlink{color:var(--sun);border-color:rgba(127,220,227,.35)}

/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.pill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border-radius:999px;padding:.5rem .9rem .5rem .55rem;font:650 .86rem/1 var(--f-sans);color:var(--forest);box-shadow:var(--lift-sm)}
.pill i{width:20px;height:20px;border-radius:50%;background:var(--lime);display:grid;place-items:center;color:var(--green)}
.pill i svg{width:12px;height:12px}
.dark .pill{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(6px)}
.dark .pill i{background:rgba(127,220,227,.16);color:var(--sun)}

/* Dark stage */
.dark{background:radial-gradient(120% 80% at 80% 0%,rgba(31,163,174,.28),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(21,127,135,.22),transparent 60%),linear-gradient(180deg,var(--forest),var(--pine));color:rgba(255,255,255,.82)}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark h1 em,.dark h2 em,.dark h3 em{color:var(--sun)}
.dots::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:22px 22px;-webkit-mask:radial-gradient(80% 70% at 50% 40%,#000,transparent);mask:radial-gradient(80% 70% at 50% 40%,#000,transparent);pointer-events:none}
.dark > .wrap{position:relative;z-index:1}

/* Topbar */
.top{position:fixed;inset:0 0 auto;z-index:50;transition:background .4s,box-shadow .4s,transform .5s var(--ease)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:.45rem;text-decoration:none}
.logo img.palm{width:26px;height:26px}
.logo img.wm{height:30px;width:auto}
.logo .wm-d{display:none}
.top.solid{background:rgba(246,245,242,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.top.solid .wm-w{display:none}.top.solid .wm-d{display:block}
.top .btn--sm{opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease)}
.top.solid .btn--sm{opacity:1;transform:none;pointer-events:auto}
.top.hide{transform:translateY(-100%)}
.top .meta{display:none;font:600 .8rem/1 var(--f-sans);color:rgba(255,255,255,.7);gap:.4rem;align-items:center}
.top.solid .meta{color:var(--muted)}
@media(min-width:760px){.top .meta{display:inline-flex}}

/* HERO */
.hero{position:relative;overflow:hidden;padding:calc(68px + clamp(2rem,5vw,4.5rem)) 0 clamp(3.5rem,7vw,6.5rem);min-height:100svh;display:flex;align-items:center}
.hero .wrap{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.08fr .92fr}}
.hero h1{font-size:var(--fs-hero);margin:0 0 1.2rem;line-height:1}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.hero h1 .w > span{display:inline-block;will-change:transform}
.hero .lead{margin-bottom:1.6rem}
.hero .pills{margin:0 0 1.8rem}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.proof{display:flex;align-items:center;gap:.9rem;margin-top:2rem;flex-wrap:wrap}
.avs{display:flex}
.avs img{width:38px;height:38px;border-radius:50%;border:2px solid var(--forest);margin-left:-10px;object-fit:cover;background:var(--pine)}
.avs img:first-child{margin-left:0}
.seal-mini{width:46px;height:auto;border-radius:6px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);margin-left:.2rem}
.proof small{display:block;font-size:.84rem;line-height:1.35;color:rgba(255,255,255,.72)}
.proof strong{color:#fff;font-weight:700}
.stars{display:inline-flex;gap:2px;color:#F5C451;vertical-align:-2px}
.stars svg{width:14px;height:14px}
.glow{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;opacity:.55}
.glow.g1{width:520px;height:520px;background:#1FA3AE;right:-160px;top:-120px;opacity:.35}
.glow.g2{width:380px;height:380px;background:#7FDCE3;left:-180px;bottom:-160px;opacity:.18}

/* 3D Buch */
.bookstage{position:relative;display:grid;place-items:center;min-height:440px;perspective:1800px}
@media(min-width:960px){.bookstage{min-height:600px}}
.book{--w:clamp(220px,58vw,330px);--h:calc(var(--w)*1.415);--d:clamp(22px,6vw,34px);position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(8deg) rotateY(-26deg) rotateZ(1deg);will-change:transform}
.book > *{position:absolute;inset:0;backface-visibility:hidden}
.book .front{border-radius:3px 10px 10px 3px;overflow:hidden;transform:translateZ(calc(var(--d)/2));background:#123;box-shadow:inset 3px 0 6px rgba(0,0,0,.35)}
.book .front img{width:100%;height:100%;object-fit:cover}
.book .front::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,0) 60%);transform:translateX(var(--shine,-60%));transition:transform .2s linear;mix-blend-mode:screen}
.book .front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.08) 40%,rgba(0,0,0,.15));z-index:1}
.book .back{background:linear-gradient(160deg,#173c39,#0d2224);border-radius:10px 3px 3px 10px;transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.book .spine{width:var(--d);left:calc(var(--d)/-2);background:linear-gradient(90deg,#0d2224,#1d4a47 50%,#0f2a2a);transform:rotateY(-90deg);display:grid;place-items:center}
.book .spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 .62rem/1 var(--f-sans);letter-spacing:.18em;color:rgba(127,220,227,.8);text-transform:uppercase;white-space:nowrap}
.book .pages{width:calc(var(--d) - 4px);left:auto;right:calc(var(--d)/-2 + 2px);top:5px;bottom:5px;background:repeating-linear-gradient(90deg,#f6f5f2 0 1px,#dcdad3 1px 2px);transform:rotateY(90deg);box-shadow:inset 0 0 8px rgba(0,0,0,.18)}
.book .ptop{height:calc(var(--d) - 4px);top:calc(var(--d)/-2 + 2px);left:5px;right:5px;bottom:auto;background:repeating-linear-gradient(0deg,#f6f5f2 0 1px,#dcdad3 1px 2px);transform:rotateX(90deg)}
.book .pbot{height:calc(var(--d) - 4px);bottom:calc(var(--d)/-2 + 2px);top:auto;left:5px;right:5px;background:#e8e6e0;transform:rotateX(-90deg)}
.bookshadow{position:absolute;bottom:4%;left:50%;width:70%;height:40px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(8px);z-index:-1}
.light .bookshadow{background:radial-gradient(closest-side,rgba(21,48,45,.35),transparent)}
.chip{position:absolute;z-index:3;display:flex;align-items:center;gap:.6rem;background:#fff;color:var(--forest);border-radius:16px;padding:.6rem .85rem .6rem .6rem;box-shadow:0 20px 40px -18px rgba(0,0,0,.55);font:700 .82rem/1.15 var(--f-sans);white-space:nowrap}
.chip small{display:block;font-weight:500;color:var(--quiet);font-size:.72rem}
.chip .ic{width:32px;height:32px;border-radius:10px;background:var(--bs-grad);color:#fff;display:grid;place-items:center;flex:none}
.chip .ic svg{width:16px;height:16px}
.chip.c1{top:8%;left:2%}.chip.c2{top:46%;right:0}.chip.c3{bottom:10%;left:4%}
@media(min-width:960px){.hero .book{--w:340px}.chip.c1{top:10%;left:-6%}.chip.c2{top:50%;right:-8%}.chip.c3{bottom:9%;left:-4%}}
@media(max-width:520px){.chip{font-size:.74rem;padding:.45rem .65rem .45rem .45rem}.chip .ic{width:26px;height:26px}.chip.c1{left:0}.chip.c2{right:0}}
.hero .hand{position:absolute;right:6%;top:-2%;z-index:3}
.hero .hand svg{transform:scaleX(-1) translateY(18px)}
@media(max-width:959px){.hero .hand{right:4%;top:auto;bottom:-6%}.hero .hand svg{transform:rotate(200deg)}}
.float{animation:float 6s ease-in-out infinite}
.float.d2{animation-delay:-2s}.float.d3{animation-delay:-4s}
@keyframes float{50%{transform:translateY(-10px)}}

/* Marquee */
.marq{background:var(--pine);color:rgba(255,255,255,.8);overflow:hidden;border-top:1px solid rgba(255,255,255,.06);padding:1rem 0}
.marq .track{display:flex;gap:2.8rem;width:max-content;animation:marq 38s linear infinite}
.marq:hover .track{animation-play-state:paused}
.marq span{display:inline-flex;align-items:center;gap:.6rem;font:650 .92rem/1 var(--f-sans);white-space:nowrap}
.marq span b{color:var(--sun);font-weight:800}
.marq span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sun-d)}
@keyframes marq{to{transform:translateX(-50%)}}

/* Problem / Scroll-Text */
.say{font:800 clamp(1.7rem,1rem + 3.2vw,3.1rem)/1.12 var(--f-sans);letter-spacing:-.035em;color:var(--forest);max-width:58rem}
.say .wd{opacity:.14;transition:opacity .25s}
.say .wd.on{opacity:1}
.say em{font-family:var(--f-serif);font-weight:400;color:var(--green)}
.turn{display:grid;gap:1.6rem;margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:860px){.turn{grid-template-columns:1.2fr 1fr;align-items:center}}
.turn .card{background:#fff;border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2rem);box-shadow:var(--lift)}
.turn .card h3{font-size:1.45rem;margin-bottom:.6rem}
.wish{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.wish div{background:var(--lime);border-radius:var(--r-m);padding:1rem;font:700 .95rem/1.25 var(--f-sans);color:var(--forest);display:flex;flex-direction:column;gap:.55rem}
.wish div svg{width:22px;height:22px;color:var(--green)}

/* Inhalt mit Seitenbetrachter */
.toc{display:grid;gap:2rem}
@media(min-width:960px){.toc{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.viewer{display:none}
@media(min-width:960px){.viewer{display:block;position:sticky;top:110px;height:min(78vh,720px);perspective:1600px}}
.viewer .pg{position:absolute;inset:0;margin:auto;height:100%;width:auto;aspect-ratio:579/819;border-radius:10px;box-shadow:0 40px 80px -30px rgba(21,48,45,.5),0 0 0 1px rgba(21,48,45,.06);opacity:0;transform:rotateY(-14deg) translateX(40px) scale(.96);transition:opacity .6s var(--ease),transform .8s var(--ease);background:#fff}
.viewer .pg.on{opacity:1;transform:rotateY(-6deg) translateX(0) scale(1)}
.viewer .pgnum{position:absolute;right:4%;bottom:-2.2rem;font:600 1.3rem/1 var(--f-hand);color:var(--green)}
.items{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.it{background:#fff;border-radius:var(--r-l);padding:1.3rem 1.3rem 1.3rem 1.2rem;box-shadow:var(--lift-sm);display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .4s}
@media(min-width:960px){.it{padding:1.6rem;min-height:30vh;align-content:center;opacity:.55}.it.on{opacity:1;transform:translateX(8px);box-shadow:var(--lift)}}
.it .n{grid-row:span 2;width:46px;height:46px;border-radius:14px;background:var(--bs-grad);color:#fff;display:grid;place-items:center;font:800 1rem/1 var(--f-sans)}
.it h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.2;align-self:center}
.it p{grid-column:2;margin:.35rem 0 0;font-size:.97rem;color:var(--muted)}
.it .ref{grid-column:2;font:600 .78rem/1 var(--f-sans);color:var(--green-d);margin-top:.7rem;display:inline-flex;gap:.4rem;align-items:center}
.it .thumb{grid-column:1/-1;margin-top:1rem;border-radius:10px;box-shadow:var(--lift-sm);aspect-ratio:579/500;object-fit:cover;object-position:top;width:100%}
@media(min-width:960px){.it .thumb{display:none}}

/* Fächer */
.fan-sec{overflow:hidden}
.fan{position:relative;height:clamp(340px,60vw,560px);margin-top:1rem}
.fan .pg{position:absolute;left:50%;top:50%;width:clamp(150px,26vw,260px);aspect-ratio:579/819;margin:0;border:0;padding:0;background:#fff;border-radius:8px;box-shadow:0 24px 50px -20px rgba(21,48,45,.45),0 0 0 1px rgba(21,48,45,.06);transform:translate(-50%,-50%);cursor:zoom-in;overflow:hidden;transition:box-shadow .3s}
.fan .pg img{width:100%;height:100%;object-fit:cover}
.fan .pg:hover{box-shadow:0 34px 60px -20px rgba(21,48,45,.6),0 0 0 3px var(--sun)}
.fan-note{text-align:center;margin-top:1.5rem}

/* Baukasten */
.lab{display:grid;gap:2rem;align-items:center}
@media(min-width:960px){.lab{grid-template-columns:1fr 1.05fr;gap:4rem}}
.needs{display:grid;gap:.7rem;margin-top:1.6rem}
.need{display:flex;gap:.9rem;align-items:flex-start;background:#fff;border-radius:var(--r-m);padding:1rem 1.1rem;box-shadow:var(--lift-sm)}
.need .ic{width:38px;height:38px;border-radius:12px;background:var(--lime);color:var(--green);display:grid;place-items:center;flex:none}
.need .ic svg{width:19px;height:19px}
.need b{display:block;color:var(--forest);font-size:.98rem}
.need span{font-size:.9rem;color:var(--muted);line-height:1.45}
.kit{background:linear-gradient(180deg,#fff,#F3FAFA);border-radius:var(--r-xl);padding:clamp(1.3rem,3vw,2.2rem);box-shadow:var(--lift);position:relative}
.kit .lbl{font:800 .72rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin-bottom:.9rem}
.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.sk{border:0;background:#fff;border-radius:var(--r-m);padding:1rem .6rem;box-shadow:inset 0 0 0 1.5px rgba(21,48,45,.12);display:flex;flex-direction:column;align-items:center;gap:.55rem;color:var(--forest);font:750 .92rem/1.1 var(--f-sans);transition:all .35s var(--ease);position:relative}
.sk .ic{width:44px;height:44px;border-radius:14px;background:var(--lime);color:var(--green);display:grid;place-items:center;transition:all .35s var(--ease)}
.sk .ic svg{width:22px;height:22px}
.sk[aria-pressed="true"]{background:var(--forest);color:#fff;box-shadow:0 18px 30px -16px rgba(21,48,45,.7);transform:translateY(-3px)}
.sk[aria-pressed="true"] .ic{background:var(--bs-grad);color:#fff}
.sk[aria-pressed="true"]::after{content:"";position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315302D' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.plus{display:flex;justify-content:center;margin:.9rem 0;color:var(--quiet)}
.plus svg{width:26px;height:26px;transition:transform .6s var(--ease)}
.result{border-radius:var(--r-l);padding:1.3rem 1.4rem;background:var(--forest);color:rgba(255,255,255,.8);min-height:190px;position:relative;overflow:hidden}
.result::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(127,220,227,.35),transparent)}
.result .k{font:800 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sun);margin-bottom:.6rem}
.result h3{color:#fff;font-size:1.55rem;margin-bottom:.5rem}
.result h3 em{color:var(--sun)}
.result p{font-size:.95rem;margin:0 0 .9rem;max-width:30rem}
.result .tag{display:inline-flex;gap:.5rem;align-items:center;background:rgba(127,220,227,.14);color:#fff;border-radius:999px;padding:.45rem .8rem;font:700 .82rem/1 var(--f-sans)}
.result .anim{animation:resIn .55s var(--ease)}
@keyframes resIn{from{opacity:0;transform:translateY(10px)}}
.models{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.models button{border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:.45rem .8rem;font:650 .8rem/1 var(--f-sans);color:var(--forest)}
.models button:hover{box-shadow:inset 0 0 0 1.5px var(--green)}
.kit .hand{position:absolute;left:-.6rem;top:-2.4rem;font-size:1.4rem}
.kit .hand svg{width:42px;height:32px;transform:rotate(38deg) translate(4px,10px)}
.disc{font-size:.78rem;color:var(--quiet);margin-top:.8rem;display:flex;gap:.4rem;align-items:center}
.dark .disc{color:rgba(255,255,255,.55)}
.disc svg{width:14px;height:14px;flex:none}

/* Technik früher/heute */
.tech{display:grid;gap:1.5rem;align-items:center}
@media(min-width:960px){.tech{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.tech-photo{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--lift);max-height:560px}
.tech-photo img{width:100%;height:100%;object-fit:cover}
.tech-photo .hand{position:absolute;left:1rem;bottom:1rem;background:rgba(255,255,255,.92);padding:.5rem .8rem;border-radius:12px;font-size:1.35rem}
.then,.now{border-radius:var(--r-l);padding:1.3rem 1.4rem}
.then{background:var(--sand);color:var(--muted)}
.now{background:var(--forest);color:#fff;box-shadow:0 30px 60px -30px rgba(21,48,45,.7)}
.then .k,.now .k{font:800 .7rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;margin-bottom:.4rem;opacity:.75}
.then h3,.now h3{font-size:1.25rem;margin-bottom:.9rem}
.now h3{color:#fff}
.then ul,.now ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.then li,.now li{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.45rem .8rem;font:650 .84rem/1 var(--f-sans)}
.then li{background:rgba(255,255,255,.6);position:relative}
.then li::after{content:"";position:absolute;left:.7rem;right:.7rem;top:50%;height:2px;background:#C9584A;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.then.struck li::after{transform:scaleX(1)}
.then.struck li:nth-child(2)::after{transition-delay:.12s}.then.struck li:nth-child(3)::after{transition-delay:.24s}.then.struck li:nth-child(4)::after{transition-delay:.36s}
.now li{background:rgba(127,220,227,.13)}
.now li svg{width:14px;height:14px;color:var(--sun)}
.arrow-dn{display:grid;place-items:center;margin:-.6rem auto;position:relative;z-index:1;width:40px;height:40px;border-radius:50%;background:var(--sun);color:var(--forest);box-shadow:0 0 0 6px var(--cream)}
.arrow-dn svg{width:18px;height:18px}
.helpers{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:1.2rem}
.helpers div{background:#fff;border-radius:var(--r-m);padding:.9rem;box-shadow:var(--lift-sm);font-size:.82rem;line-height:1.35;color:var(--muted)}
.helpers b{display:block;color:var(--forest);font-size:.88rem;margin-bottom:.15rem}

/* 4 Schritte */
.steps{position:relative;display:grid;gap:1rem;list-style:none;margin:0;padding:0 0 0 2.6rem}
.steps .rail{position:absolute;left:19px;top:20px;bottom:20px;width:3px;border-radius:3px;background:rgba(21,48,45,.08)}
.steps .rail i{position:absolute;inset:0;background:var(--bs-grad);transform-origin:top;transform:scaleY(0);border-radius:3px}
.step{position:relative;background:#fff;border-radius:var(--r-l);padding:1.3rem 1.4rem;box-shadow:var(--lift-sm)}
.step .dot{position:absolute;left:calc(-2.6rem + 3px);top:1.3rem;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(21,48,45,.12);display:grid;place-items:center;font:400 1.35rem/1 var(--f-serif);font-style:italic;color:var(--green);transition:all .4s var(--ease)}
.step.on .dot{background:var(--forest);color:var(--sun);box-shadow:0 0 0 6px rgba(127,220,227,.25)}
.step h3{font-size:1.15rem;line-height:1.25;letter-spacing:-.02em;margin-bottom:.35rem}
.step h3 span{color:var(--green)}
.step p{font-size:.95rem;color:var(--muted);margin:0}
.steps{max-width:52rem}

.time{margin-top:1.5rem;display:flex;gap:1rem;align-items:center;background:var(--lime);border-radius:var(--r-l);padding:1.1rem 1.3rem;border-left:4px solid var(--green)}
.time .clock{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--green);flex:none}
.time .clock svg{width:22px;height:22px}
.time p{margin:0;font-size:.95rem;color:var(--forest)}

/* Umsatzstufen */
.chart{background:rgba(255,255,255,.04);border-radius:var(--r-xl);padding:clamp(1rem,3vw,2rem);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.chart-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.chart-top .k{font:800 .72rem/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.zones{display:flex;gap:.5rem}
.zone{font:700 .78rem/1 var(--f-sans);border-radius:999px;padding:.45rem .8rem;display:inline-flex;gap:.4rem;align-items:center}
.zone.solo{background:rgba(127,220,227,.16);color:var(--sun)}
.zone.team{background:rgba(255,255,255,.08);color:#fff}
.bars{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.bar{display:grid;grid-template-columns:6.4rem 1fr;align-items:center;gap:.7rem}
.bar .nm{grid-column:1;grid-row:1;font:650 .8rem/1.15 var(--f-sans);color:rgba(255,255,255,.7)}
.bar .trk{grid-column:2;grid-row:1;height:38px;position:relative}
.bar .col{position:absolute;left:0;top:0;bottom:0;width:calc(var(--h)*.6);min-width:6px;border-radius:6px 10px 10px 6px;background:linear-gradient(90deg,#0F6A71,#1FA3AE 55%,#7FDCE3);transform-origin:left;transform:scaleX(0);box-shadow:0 0 24px -8px rgba(127,220,227,.6)}
.bar.team .col{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.5));box-shadow:none}
.bar .val{position:absolute;left:calc(100% + .55rem);top:50%;transform:translateY(-50%);font:800 .95rem/1 var(--f-sans);color:#fff;white-space:nowrap;letter-spacing:-.02em;opacity:0}
.bar .who{position:absolute;left:calc(100% + 5.6rem);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.35rem;opacity:0}
.bar .who img{width:28px;height:28px;border-radius:50%;border:2px solid var(--sun)}
.bar .who span{font:600 .72rem/1 var(--f-sans);color:var(--sun)}
.bar.team:last-child .who,.bar:nth-child(5) .who{display:none}
@media(min-width:760px){
  .bars{grid-template-columns:repeat(7,1fr);gap:clamp(.4rem,1.2vw,1rem);align-items:end;height:clamp(320px,40vw,420px);padding-top:3.2rem}
  .bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:0}
  .bar .trk{flex:1;width:100%;height:auto;display:flex;align-items:flex-end;justify-content:center}
  .bar .col{position:relative;inset:auto;width:100%;max-width:96px;height:var(--h);min-height:6px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,#7FDCE3,#1FA3AE 55%,#0F6A71);transform-origin:bottom;transform:scaleY(0)}
  .bar.team .col{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14))}
  .bar .val{left:50%;top:auto;bottom:calc(100% + .5rem);transform:translateX(-50%);font-size:clamp(.82rem,.6rem + .5vw,1.05rem)}
  .bar .who{left:50%;top:auto;bottom:calc(100% + 2.2rem);transform:translateX(-50%);flex-direction:column;gap:.2rem}
  .bar:nth-child(5) .who{display:flex}
  .bar .who img{width:40px;height:40px}
  .bar .nm{margin-top:.7rem;text-align:center;min-height:2.3em}
}
.start-box{display:grid;gap:1rem;margin-top:1.6rem}
@media(min-width:860px){.start-box{grid-template-columns:repeat(3,1fr)}}
.start-box div{background:rgba(255,255,255,.06);border-radius:var(--r-m);padding:1rem 1.1rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.start-box b{display:block;color:#fff;font-size:1.5rem;letter-spacing:-.03em;margin-bottom:.15rem}
.start-box span{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.45;display:block}

/* Wer wir sind */
.us{display:grid;gap:3rem;align-items:center}
@media(min-width:960px){.us{grid-template-columns:1fr 1fr;gap:4.5rem}}
.stack{position:relative;height:clamp(380px,92vw,560px)}
.ph{position:absolute;background:#fff;padding:8px 8px 36px;border-radius:14px;box-shadow:0 30px 60px -28px rgba(21,48,45,.55)}
.ph img{border-radius:8px;width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:12px;bottom:9px;font:600 1.1rem/1 var(--f-hand);color:var(--forest)}
.ph.p1{width:62%;height:62%;left:0;top:4%;transform:rotate(-5deg);z-index:2}
.ph.p2{width:52%;height:58%;right:0;top:0;transform:rotate(5deg);z-index:1}
.ph.p3{width:54%;height:46%;right:2%;bottom:0;transform:rotate(3deg);z-index:3}
.us .hand{margin-top:.5rem}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.6rem 0}
.facts div{background:#fff;border-radius:var(--r-m);padding:.9rem .8rem;box-shadow:var(--lift-sm);text-align:center}
.facts b{display:block;font:800 clamp(1.3rem,1rem + 1.2vw,1.8rem)/1 var(--f-sans);color:var(--forest);letter-spacing:-.04em}
.facts span{font-size:.75rem;color:var(--quiet);line-height:1.3;display:block;margin-top:.3rem}
.ig{display:flex;gap:1rem;align-items:center;background:#fff;border-radius:var(--r-l);padding:.9rem 1.1rem;box-shadow:var(--lift-sm);text-decoration:none;color:var(--forest);transition:transform .4s var(--ease)}
.ig:hover{transform:translateY(-2px)}
.ig img{width:46px;height:46px;border-radius:12px;object-fit:cover;object-position:top}
.ig b{display:block}
.ig span{font-size:.85rem;color:var(--muted)}
.ig svg{margin-left:auto;width:20px;height:20px;color:var(--green)}

/* Ergebnisse */
.rail-wrap{position:relative}
.cases{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem var(--gut) 2rem;margin:0 calc(var(--gut)*-1);scrollbar-width:none;cursor:grab}
.cases::-webkit-scrollbar{display:none}
.cases.drag{cursor:grabbing;scroll-snap-type:none}
.case{flex:0 0 min(300px,82vw);scroll-snap-align:start;background:#fff;border-radius:var(--r-l);padding:1.3rem;box-shadow:var(--lift-sm);display:flex;flex-direction:column;user-select:none}
.case .hd{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.case .hd img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.case .hd b{display:block;color:var(--forest);font-size:1.05rem}
.case .hd span{font-size:.8rem;color:var(--quiet)}
.case .big{display:inline-flex;align-self:flex-start;background:var(--bs-grad);color:#fff;border-radius:12px;padding:.55rem .8rem;font:800 1.05rem/1.1 var(--f-sans);letter-spacing:-.02em;margin-bottom:.8rem}
.case p{font-size:.92rem;color:var(--muted);margin:0}
.rail-ctl{display:flex;gap:.5rem;justify-content:flex-end;margin-top:-1rem}
.rail-ctl button{width:46px;height:46px;border-radius:50%;border:0;background:#fff;box-shadow:var(--lift-sm);color:var(--forest);display:grid;place-items:center}
.rail-ctl button svg{width:18px;height:18px}
.vids{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:860px){.vids{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.vid{border:0;padding:0;background:#000;border-radius:var(--r-m);overflow:hidden;position:relative;aspect-ratio:16/9;box-shadow:var(--lift-sm);text-align:left}
.vid img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),opacity .4s;opacity:.9}
.vid:hover img{transform:scale(1.05);opacity:1}
.vid .play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--forest);box-shadow:0 0 0 8px rgba(255,255,255,.25);transition:transform .4s var(--ease)}
.vid:hover .play{transform:scale(1.1)}
.vid .play svg{width:20px;height:20px;margin-left:3px}
.vid .cap{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .8rem .6rem;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font:700 .82rem/1.2 var(--f-sans)}
.vid .cap small{display:block;font-weight:500;opacity:.8;font-size:.72rem}
.chats{overflow:hidden;margin-top:clamp(2.5rem,5vw,4rem);-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.chats .track{display:flex;gap:1rem;width:max-content;animation:marq 60s linear infinite;align-items:center}
.chats img{height:clamp(240px,40vw,340px);width:auto;border-radius:16px;box-shadow:var(--lift-sm)}
.chats:hover .track{animation-play-state:paused}

/* Bewertungen */
.rev-top{display:grid;gap:1.5rem;align-items:center;margin-bottom:2rem}
@media(min-width:860px){.rev-top{grid-template-columns:auto 1fr auto}}
.score{display:flex;align-items:center;gap:1.2rem;background:var(--forest);color:#fff;border-radius:var(--r-l);padding:1.2rem 1.5rem}
.score .num{font:800 3.6rem/1 var(--f-sans);letter-spacing:-.05em;white-space:nowrap}
.score .num small{font-size:1rem;font-weight:600;opacity:.7;letter-spacing:0}
.score .stars svg{width:20px;height:20px}
.score .stars i{display:inline-block;transform:scale(0);transition:transform .45s var(--ease)}
.score.on .stars i{transform:scale(1)}
.score.on .stars i:nth-child(2){transition-delay:.08s}.score.on .stars i:nth-child(3){transition-delay:.16s}.score.on .stars i:nth-child(4){transition-delay:.24s}.score.on .stars i:nth-child(5){transition-delay:.32s}
.score p{margin:.35rem 0 0;font-size:.85rem;opacity:.75;line-height:1.35}
.quotes{columns:1;column-gap:1rem}
@media(min-width:700px){.quotes{columns:2}}
@media(min-width:1040px){.quotes{columns:3}}
.q{break-inside:avoid;background:#fff;border-radius:var(--r-l);padding:1.3rem;box-shadow:var(--lift-sm);margin:0 0 1rem}
.q .stars svg{width:15px;height:15px}
.q blockquote{margin:.7rem 0 .9rem;font-size:.97rem;line-height:1.55;color:var(--text)}
.q figcaption{display:flex;align-items:center;gap:.6rem;font-size:.84rem;color:var(--quiet)}
.q figcaption b{color:var(--forest)}
.q .in{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--green);display:grid;place-items:center;font:800 .8rem/1 var(--f-sans)}
.q .ver{margin-left:auto;display:inline-flex;gap:.25rem;align-items:center;font-size:.72rem;color:var(--ok)}
.q .ver svg{width:13px;height:13px}

/* Vertrauen */
.trust{display:grid;gap:2rem;align-items:center;background:#fff;border-radius:var(--r-xl);padding:clamp(1.4rem,4vw,3rem);box-shadow:var(--lift)}
@media(min-width:860px){.trust{grid-template-columns:auto 1fr}}
.seal{width:clamp(150px,22vw,210px);margin:0 auto;transform:rotate(-3deg);filter:drop-shadow(0 20px 30px rgba(21,48,45,.25))}
.trust h2{font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);margin-bottom:.8rem}
.trust .labels{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.trust .labels span{font:700 .74rem/1 var(--f-sans);background:var(--lime);color:var(--green-d);border-radius:999px;padding:.4rem .7rem}
.trust ul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.7rem}
@media(min-width:860px){.trust ul{grid-template-columns:repeat(3,1fr)}}
.trust li{background:var(--cream);border-radius:var(--r-m);padding:1rem;font-size:.9rem;line-height:1.45}
.trust li b{display:block;color:var(--forest);margin-bottom:.2rem}
.meta-badge{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem;font-size:.82rem;color:var(--quiet)}
.meta-badge img{width:110px}

/* FAQ */
.faq{max-width:52rem;margin:0 auto;display:grid;gap:.7rem}
.faq details{background:#fff;border-radius:var(--r-m);box-shadow:var(--lift-sm);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.3rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font:750 1.02rem/1.35 var(--f-sans);color:var(--forest)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;background:var(--lime);color:var(--green);display:grid;place-items:center;transition:transform .45s var(--ease),background .3s}
.faq summary i svg{width:14px;height:14px}
.faq details[open] summary i{transform:rotate(45deg);background:var(--sun)}
.faq .a{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.97rem}
.faq .a p:last-child{margin:0}

/* Finale + Formular */
.final{overflow:hidden}
.final .wrap{display:grid;gap:3rem;align-items:center}
@media(min-width:960px){.final .wrap{grid-template-columns:.9fr 1.1fr;gap:4rem}}
.final .bookstage{min-height:380px}
@media(max-width:959px){.final .bookstage{display:none}}
.final .book{--w:clamp(190px,45vw,260px)}
.form-card{background:#fff;border-radius:var(--r-xl);padding:clamp(1.3rem,3.5vw,2.2rem);box-shadow:0 40px 80px -40px rgba(0,0,0,.6);color:var(--text)}
.form-card h2,.form-card h3{color:var(--forest)}
.form-card h2 em,.form-card h3 em{color:var(--green)}
.form-card h2{font-size:clamp(1.7rem,1.2rem + 2vw,2.4rem);margin-bottom:.5rem}
.form-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.3rem}
.f{display:grid;gap:.9rem}
.fl{position:relative}
.fl label{display:block;font:700 .82rem/1 var(--f-sans);color:var(--forest);margin:0 0 .45rem .2rem}
.fl label small{font-weight:500;color:var(--quiet)}
.fl input,.fl select{width:100%;height:54px;border-radius:14px;border:1.5px solid rgba(21,48,45,.14);background:#FBFCFC;padding:0 1rem;font:500 1rem/1 var(--f-sans);color:var(--bs-ink);transition:border-color .25s,box-shadow .25s,background .25s;-webkit-appearance:none;appearance:none}
.fl input:focus,.fl select:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 4px rgba(21,127,135,.14);background:#fff}
.fl input::placeholder{color:#9AA5A3}
.fl.err input{border-color:#C9584A;box-shadow:0 0 0 4px rgba(201,88,74,.12)}
.fl .msg{display:none;font-size:.8rem;color:#B2473A;margin:.35rem 0 0 .2rem}
.fl.err .msg{display:block}
.phone{display:grid;grid-template-columns:104px 1fr;gap:.5rem}
.phone select{background:#FBFCFC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6967' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .7rem center/14px no-repeat;padding-right:1.8rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.8rem;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{flex:none;width:22px;height:22px;margin:.05rem 0 0;accent-color:var(--green)}
.consent.err{color:#B2473A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.f .btn{margin-top:.3rem}
.f .btn[disabled]{opacity:.7;pointer-events:none}
.f .btn .spin{display:none;width:18px;height:18px;border:2.5px solid rgba(127,220,227,.35);border-top-color:var(--sun);border-radius:50%;animation:rot .8s linear infinite}
.f.busy .btn .spin{display:block}.f.busy .btn .ar svg{display:none}
@keyframes rot{to{transform:rotate(360deg)}}
.f .ferr{display:none;background:#FDF0EE;color:#8E3328;border-radius:12px;padding:.7rem .9rem;font-size:.86rem}
.f .ferr.on{display:block}
.secure{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem;font-size:.76rem;color:var(--quiet)}
.secure span{display:inline-flex;gap:.3rem;align-items:center}
.secure svg{width:13px;height:13px;color:var(--green)}

/* Modal */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:end center;padding:0;visibility:hidden}
@media(min-width:640px){.modal{place-items:center;padding:1rem}}
.modal .bd{position:absolute;inset:0;background:rgba(10,26,28,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s}
.modal .sheet{position:relative;width:100%;max-width:470px;max-height:94svh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:1.4rem 1.3rem calc(1.3rem + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .55s var(--ease);overscroll-behavior:contain}
@media(min-width:640px){.modal .sheet{border-radius:26px;padding:1.8rem;transform:translateY(30px) scale(.97);opacity:0;transition:transform .5s var(--ease),opacity .4s}}
.modal.on{visibility:visible}
.modal.on .bd{opacity:1}
.modal.on .sheet{transform:none;opacity:1}
.modal .x{position:absolute;right:.9rem;top:.9rem;width:40px;height:40px;border-radius:50%;border:0;background:var(--cream);color:var(--forest);display:grid;place-items:center}
.modal .x svg{width:16px;height:16px}
.mhead{display:flex;gap:1rem;align-items:center;margin-bottom:1.2rem;padding-right:2.6rem}
.mhead img{width:58px;border-radius:4px 7px 7px 4px;box-shadow:0 12px 24px -10px rgba(21,48,45,.6);transform:rotate(-4deg)}
.mhead h3{font-size:1.3rem;line-height:1.15}
.prog{height:6px;border-radius:6px;background:var(--day);overflow:hidden;margin-bottom:.5rem}
.prog i{display:block;height:100%;width:50%;background:var(--bs-grad);border-radius:6px;transition:width 1s var(--ease)}
.modal.on .prog i{width:90%}
.prog-l{font:700 .74rem/1 var(--f-sans);color:var(--green-d);margin-bottom:1.1rem;display:flex;justify-content:space-between}
.vmodal .sheet{max-width:900px;padding:0;background:#000;border-radius:18px;overflow:hidden}
.vmodal .x{background:rgba(255,255,255,.9);z-index:2}
.vmodal .frame{aspect-ratio:16/9;width:100%}
.vmodal iframe{width:100%;height:100%;border:0;display:block}
.vmodal .pgbig{max-height:88svh;width:auto;margin:0 auto;display:block}
@media(max-width:639px){.vmodal{place-items:center;padding:.8rem}.vmodal .sheet{border-radius:16px;transform:scale(.95);opacity:0;transition:transform .4s var(--ease),opacity .3s}}

/* Sticky Mobil-CTA */
.mcta{position:fixed;left:.6rem;right:.6rem;bottom:calc(.6rem + env(safe-area-inset-bottom));z-index:40;transform:translateY(140%);transition:transform .5s var(--ease)}
.mcta.on{transform:none}
.mcta .btn{width:100%;justify-content:space-between;box-shadow:0 18px 40px -12px rgba(0,0,0,.45)}
@media(min-width:960px){.mcta{display:none}}

/* Footer */
.foot{background:var(--pine);color:rgba(255,255,255,.62);padding:3rem 0 calc(6rem + env(safe-area-inset-bottom));font-size:.85rem}
@media(min-width:960px){.foot{padding-bottom:3rem}}
.foot .wrap{display:grid;gap:1.4rem}
.foot nav{display:flex;flex-wrap:wrap;gap:.5rem 1.3rem}
.foot a{color:rgba(255,255,255,.82);text-decoration:none}
.foot a:hover{color:var(--sun)}
.foot .small{font-size:.76rem;line-height:1.55;color:rgba(255,255,255,.45);max-width:52rem}

/* Danke-Seite */
.thx-hero{padding:calc(68px + clamp(2rem,5vw,4rem)) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.thx-hero .wrap{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.thx-hero .wrap{grid-template-columns:1.05fr .95fr}}
.check{width:64px;height:64px;border-radius:50%;background:var(--sun);display:grid;place-items:center;margin-bottom:1.3rem;box-shadow:0 0 0 10px rgba(127,220,227,.15)}
.check svg{width:30px;height:30px;color:var(--forest)}
.check path{stroke-dasharray:30;stroke-dashoffset:30;animation:drawC .7s var(--ease) .4s forwards}
@keyframes drawC{to{stroke-dashoffset:0}}
.thx-hero h1{font-size:clamp(2.2rem,1.3rem + 4vw,4rem);margin-bottom:1rem}
.track3{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.5rem;counter-reset:t}
.track3 li{display:flex;align-items:center;gap:.8rem;font:650 .92rem/1.3 var(--f-sans);color:rgba(255,255,255,.65)}
.track3 li i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);font:800 .8rem/1 var(--f-sans);font-style:normal;flex:none}
.track3 li.done{color:#fff}.track3 li.done i{background:var(--ok);box-shadow:none;color:#fff}
.track3 li.next{color:#fff}.track3 li.next i{background:var(--sun);color:var(--forest);box-shadow:0 0 0 5px rgba(127,220,227,.2)}
.track3 li i svg{width:14px;height:14px}
.openbook{position:relative;display:grid;place-items:center;min-height:400px;perspective:2000px}
.ob{--w:clamp(180px,40vw,250px);position:relative;width:calc(var(--w)*2);height:calc(var(--w)*1.415);transform-style:preserve-3d;transform:rotateX(16deg) rotateZ(-3deg)}
.ob .lp,.ob .rp,.ob .cv{position:absolute;top:0;width:50%;height:100%;border-radius:4px;overflow:hidden}
.ob .cv{overflow:visible}
.ob .cv .f1,.ob .cv .f2{border-radius:4px;overflow:hidden}
.ob .lp{left:0;background:#fff;box-shadow:inset -12px 0 20px -10px rgba(0,0,0,.25)}
.ob .rp{right:0;box-shadow:inset 12px 0 20px -10px rgba(0,0,0,.25),0 30px 60px -20px rgba(0,0,0,.6)}
.ob .lp img,.ob .rp img,.ob .cv img{width:100%;height:100%;object-fit:cover}
.ob .cv{right:0;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.6s var(--ease) .5s;z-index:3}
.ob .cv .f1,.ob .cv .f2{position:absolute;inset:0;backface-visibility:hidden}
.ob .cv .f2{transform:rotateY(180deg)}
.ob.open .cv{transform:rotateY(-178deg)}
.reads{display:grid;gap:1rem}
@media(min-width:760px){.reads{grid-template-columns:repeat(3,1fr)}}
.read{background:#fff;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--lift-sm);border:0;padding:0;text-align:left;display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s}
.read:hover{transform:translateY(-4px);box-shadow:var(--lift)}
.read img{aspect-ratio:579/430;object-fit:cover;object-position:top;width:100%}
.read div{padding:1rem 1.2rem 1.2rem}
.read .pg{font:600 1.15rem/1 var(--f-hand);color:var(--green)}
.read b{display:block;color:var(--forest);font-size:1.05rem;margin:.3rem 0 .2rem}
.read span{font-size:.88rem;color:var(--muted)}
.call{display:grid;gap:2.5rem;align-items:start}
@media(min-width:960px){.call{grid-template-columns:1fr 1.1fr;gap:4rem}}
.perks{display:grid;gap:.7rem;margin:1.6rem 0}
.perk{display:flex;gap:.9rem;background:rgba(255,255,255,.06);border-radius:var(--r-m);padding:1rem 1.1rem;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.perk .ic{width:38px;height:38px;border-radius:12px;background:var(--bs-grad);color:#fff;display:grid;place-items:center;flex:none}
.perk .ic svg{width:18px;height:18px}
.perk b{display:block;color:#fff;font-size:.98rem}
.perk span{font-size:.88rem;color:rgba(255,255,255,.68);line-height:1.45}
.cal{background:#fff;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);color:var(--text)}
.cal-head{display:flex;gap:1rem;align-items:center;padding:1.3rem 1.4rem;border-bottom:1px solid var(--line)}
.cal-head img{width:62px;height:62px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--lime)}
.cal-head b{display:block;color:var(--forest);font-size:1.1rem}
.cal-head span{font-size:.85rem;color:var(--quiet)}
.cal-body{padding:1.4rem}
.cal .pill{background:var(--lime);color:var(--forest);box-shadow:none}.cal .pill i{background:#fff;color:var(--green)}
.cal-body .meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.2rem}
.cal-frame{height:690px;display:none}
.cal-frame iframe{width:100%;height:100%;border:0}
.cal.loaded .cal-frame{display:block}
.cal.loaded .cal-body{display:none}
.cal-note{font-size:.76rem;color:var(--quiet);margin-top:.9rem;line-height:1.45}
.comm{display:grid;gap:1.4rem;align-items:center;background:#fff;border-radius:var(--r-xl);padding:clamp(1.3rem,3.5vw,2.4rem);box-shadow:var(--lift)}
@media(min-width:860px){.comm{grid-template-columns:auto 1fr auto}}
.comm img{width:120px;height:120px;border-radius:22px;object-fit:cover}
.comm h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);margin-bottom:.4rem}
.comm p{margin:0;color:var(--muted)}
.video-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--lift)}

/* Consent-Banner (nur wenn Pixel aktiv) */
.cb{position:fixed;left:.8rem;right:.8rem;bottom:.8rem;z-index:90;max-width:520px;margin:0 auto;background:#fff;border-radius:20px;padding:1.1rem 1.2rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);font-size:.86rem;color:var(--muted)}
.cb p{margin:0 0 .8rem}
.cb .row{display:flex;gap:.5rem;flex-wrap:wrap}
.cb button{border:0;border-radius:999px;padding:.65rem 1.1rem;font:700 .86rem/1 var(--f-sans)}
.cb .yes{background:var(--forest);color:#fff}.cb .no{background:var(--cream);color:var(--forest)}

/* Reveal (nur mit JS) */
.js [data-r]{opacity:0;transform:translateY(28px)}
.no-motion [data-r],.js.no-motion [data-r]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .marq .track,.chats .track{animation:none}
  .chats{overflow-x:auto}
}
