/* ================= Netzflug · Präsentations-Layout (1 Folie = 1 Bildschirm) ================= */
@font-face{font-family:"Lexend";src:url(/fonts/lexend-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0}

:root{
  --bg:#ffffff; --tint:#f3f6fb; --ink:#0b1233; --text:#3b4560; --mute:#67708a; --line:#e3e8f1; --line2:#d3dbe8;
  --accent:#0b5bd8; --accent-d:#0846b0; --accent-l:#eaf2ff; --cyan:#12a8ff; --green:#16a05a; --dark:#0a1636;
  --grad:linear-gradient(120deg,#0a3fae 0%,#0b5bd8 45%,#12a8ff 100%);
  --display:"Lexend","Inter Tight",system-ui,sans-serif;
  --sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:18px; --ease:cubic-bezier(.22,1,.36,1);
  --navh:72px; --pad:clamp(16px,4vw,56px); --vpad:clamp(12px,3.4vh,44px);
  --avail:calc(var(--sh,100vh) - var(--navh) - 2 * var(--vpad));
  --shadow:0 1px 2px rgba(11,18,51,.04),0 8px 24px -8px rgba(11,18,51,.08);
  --shadow-lg:0 2px 4px rgba(11,18,51,.04),0 30px 60px -20px rgba(11,18,51,.2);
}
*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scrollbar-width:none;overscroll-behavior:none}
html::-webkit-scrollbar{display:none}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;overscroll-behavior:none}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
svg{display:block}
.i{width:1.15em;height:1.15em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:-.18em}
h1,h2,h3,legend{font-family:var(--display)}
h1,h2,h3{color:var(--ink);letter-spacing:-.035em;line-height:1.1;margin:0;font-weight:700}
h1{font-size:clamp(28px,min(5.2vw,6.8vh),66px);line-height:1.05;letter-spacing:-.04em}
h2{font-size:clamp(22px,min(3.8vw,5vh),46px)}
.sub{font-size:clamp(14px,min(1.45vw,2.1vh),19px);color:var(--mute);margin:clamp(8px,1.8vh,18px) 0 0}
.sub b{color:var(--ink)}
.sub a{color:var(--accent);font-weight:600}
.eyebrow{display:inline-block;font-size:clamp(12px,1.7vh,14px);font-weight:600;color:var(--accent);margin:0 0 clamp(6px,1.3vh,14px)}
.head{max-width:760px;margin-bottom:clamp(14px,4vh,48px)}
.head--center{text-align:center;margin-left:auto;margin-right:auto}
br.d{display:none}@media(min-width:900px){br.d{display:inline}}

/* ---------- Folien ---------- */
.slide{position:relative;height:var(--sh,100vh);padding:calc(var(--navh) + var(--vpad)) var(--pad) var(--vpad);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg)}
.slide--tint{background:var(--tint)}
.slide__inner,.cta__inner{width:100%;max-width:1200px;flex-shrink:0;transform-origin:50% 50%;display:flex;flex-direction:column;justify-content:space-evenly}
.slide__inner>.head{margin-bottom:0}
.hero__grid,.incl,.demo,.faq{align-content:space-evenly}
.cta__inner{flex-direction:row}
.slide__inner.is-scaled,.cta__inner.is-scaled{max-width:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:clamp(42px,6.2vh,52px);padding:0 22px;border-radius:12px;font-weight:600;font-size:clamp(14.5px,2vh,16px);white-space:nowrap;transition:background-position .4s var(--ease),background .2s,color .2s,box-shadow .2s,transform .2s var(--ease),border-color .2s}
.btn:active{transform:scale(.98)}
.btn .i{transition:transform .25s var(--ease)}
.btn:hover .i:last-child{transform:translateX(3px)}
.btn--primary{background:var(--grad);background-size:160% 100%;color:#fff;box-shadow:0 8px 20px -8px rgba(11,91,216,.6),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 12px 28px -10px rgba(11,91,216,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.btn--light{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn--light:hover{border-color:var(--ink)}
.btn--white{background:#fff;color:var(--accent-d)}
.btn--white:hover{background:var(--accent-l)}
.btn--outline{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--outline:hover .i{transform:none}
.btn--sm{height:40px;padding:0 16px;font-size:14.5px;border-radius:10px}
.btn--lg{height:clamp(46px,6.8vh,56px);padding:0 26px;font-size:clamp(15px,2.1vh,17px)}
.btn--block{width:100%}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;gap:24px;height:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);line-height:1}
.logo img{width:52px;height:auto;flex-shrink:0}
.logo__word{display:block;font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.03em}
.logo__word em{font-style:normal;background:linear-gradient(90deg,#0b5bd8,#12a8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo small{display:block;white-space:nowrap;font-size:9.5px;font-weight:500;color:var(--ink);letter-spacing:.14em;text-transform:uppercase;margin-top:5px}
.logo small b{font-weight:500;color:var(--accent)}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{padding:8px 14px;border-radius:8px;font-size:15px;font-weight:500;color:var(--text);transition:background .2s,color .2s}
.nav__links a:hover,.nav__links a.is-active{background:var(--accent-l);color:var(--accent-d)}
.nav__right{display:flex;align-items:center;gap:14px;margin-left:auto}
.nav__links+.nav__right{margin-left:0}
.nav__phone{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--ink)}
.nav__phone .i{color:var(--accent);width:18px;height:18px}

/* ---------- Folien-Punkte & Zähler ---------- */
.dots{position:fixed;right:clamp(8px,1.6vw,26px);top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px}
.dots button{position:relative;width:10px;height:10px;border-radius:99px;background:rgba(11,18,51,.18);transition:height .4s var(--ease),background .3s}
.dots button.is-active{height:28px;background:var(--accent)}
.dots.on-dark button{background:rgba(255,255,255,.3)}.dots.on-dark button.is-active{background:#5cc3ff}
.dots button span{position:absolute;right:20px;top:50%;transform:translateY(-50%) translateX(6px);white-space:nowrap;font-size:12.5px;font-weight:600;color:#fff;background:var(--ink);padding:4px 10px;border-radius:6px;opacity:0;pointer-events:none;transition:all .2s}
.dots button:hover span{opacity:1;transform:translateY(-50%)}
.counter{position:fixed;left:clamp(12px,2vw,28px);bottom:clamp(10px,2vh,22px);z-index:40;font-family:var(--display);font-size:13px;color:var(--mute);display:flex;gap:4px;align-items:baseline;transition:color .3s}
.counter b{color:var(--ink);font-size:15px}
.counter.on-dark{color:#8f9bbd}.counter.on-dark b{color:#fff}
.next{position:absolute;left:50%;bottom:clamp(8px,2vh,22px);transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--accent);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);animation:nudge 2.2s var(--ease) infinite;z-index:3}
.next .i{width:22px;height:22px}
@keyframes nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

/* ---------- 1 · Start ---------- */
.slide--hero{background:radial-gradient(800px 480px at 88% 8%,rgba(18,168,255,.14),transparent 70%),radial-gradient(700px 500px at 60% 90%,rgba(11,91,216,.07),transparent 70%),var(--bg)}
.hero__grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:clamp(12px,1.8vh,14px);font-weight:500;color:var(--text);background:#fff;border:1px solid var(--line);padding:6px 13px;border-radius:99px;margin:0 0 clamp(10px,2.6vh,24px);box-shadow:var(--shadow)}
.tag__dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,160,90,.15)}
.hl{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.slide--hero .sub{color:var(--text);max-width:540px;font-size:clamp(14.5px,min(1.5vw,2.2vh),20px)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(14px,3.4vh,32px)}
.checks{list-style:none;padding:0;margin:clamp(12px,3vh,28px) 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:clamp(13px,1.9vh,15px);color:var(--text)}
.checks li{display:flex;align-items:center;gap:8px}
.checks i,.demo__list i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#e3f6ec;color:var(--green);display:grid;place-items:center;flex-shrink:0}
.checks i .i,.demo__list i .i{width:13px;height:13px;stroke-width:3}
.js .in-hero{opacity:0;transform:translateY(18px);animation:heroIn .9s var(--ease) forwards}
.js .in-hero:nth-child(2){animation-delay:.08s}.js .in-hero:nth-child(3){animation-delay:.16s}.js .in-hero:nth-child(4){animation-delay:.24s}.js .in-hero:nth-child(5){animation-delay:.32s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* 3D-Bühne */
.stage{position:relative;perspective:1400px;padding:20px 50px 40px 30px;width:100%;max-width:600px;justify-self:center}
.stage__inner{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,6deg)) rotateY(var(--ry,-14deg));transition:transform .9s var(--ease)}
.layer{transform:translateZ(var(--z,0))}
.js .stage .layer{animation:layerIn 1.3s var(--ease) both}
.js .stage .dev{animation-delay:.15s}.js .stage .phone{animation-delay:.35s}.js .stage .notif{animation-delay:1.1s}.js .stage .badge3d{animation-delay:.8s}.js .stage .cube{animation-delay:.6s}
@keyframes layerIn{from{opacity:0;transform:translateZ(calc(var(--z,0px) - 260px)) translateY(40px) rotateX(-20deg)}to{opacity:1;transform:translateZ(var(--z,0))}}
.dev{border-radius:14px;background:#fff;box-shadow:0 40px 80px -30px rgba(11,40,120,.35),0 0 0 1px var(--line);overflow:hidden}
.dev__bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f2f4f8;border-bottom:1px solid var(--line)}
.dev__bar i{width:9px;height:9px;border-radius:50%;background:#d2d8e3}
.dev__bar span{margin-left:10px;font-size:11px;color:var(--mute);background:#fff;padding:3px 12px;border-radius:6px;flex:1;max-width:200px}
.site{padding:16px 20px 20px;font-size:10px;color:#444}
.site .i{width:12px;height:12px}
.site__nav{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.site__nav b{font-size:12px;color:#14213d;margin-right:auto;display:flex;align-items:center;gap:6px}
.site__nav em{width:22px;height:22px;border-radius:6px;background:#ffd23f;color:#14213d;display:grid;place-items:center}
.site__nav u,.site__btns u,.p-hero u{text-decoration:none;background:#14213d;color:#fff;padding:5px 10px;border-radius:6px;font-weight:600}
.site__hero{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:center}
.site__hero small{color:#c58b00;font-weight:600;font-size:9px}
.site__hero h3{font-size:19px;line-height:1.12;margin:6px 0 12px;color:#14213d}
.site__btns{display:flex;gap:8px;align-items:center}
.site__btns u{background:#ffd23f;color:#14213d;padding:7px 12px}
.site__btns span{border:1px solid #ddd;padding:5px 9px;border-radius:6px;display:flex;align-items:center;gap:4px}
.site__stars{margin-top:12px;color:#f5a400;font-size:10px}.site__stars span{color:#777}
.site__img{aspect-ratio:1/.9;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#20304f,#14213d)}
.site__photo{width:100%;height:100%;background:radial-gradient(circle at 70% 35%,#ffd23f 0 9%,transparent 10%),repeating-linear-gradient(90deg,transparent 0 18px,rgba(255,255,255,.05) 18px 19px),linear-gradient(180deg,transparent 55%,rgba(255,210,63,.25));position:relative}
.site__photo::after{content:"";position:absolute;left:18%;bottom:0;width:38%;height:62%;border-radius:40% 40% 0 0;background:linear-gradient(#2f4470,#1b2a48)}
.site__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.site__cards div{border:1px solid #eee;border-radius:8px;padding:9px;display:flex;flex-direction:column;gap:6px;color:#c58b00}
.site__cards b{font-size:9.5px;color:#14213d}
.phone{position:absolute;right:-46px;bottom:-34px;width:150px;border-radius:26px;background:#0b1233;padding:8px;box-shadow:0 40px 60px -20px rgba(11,40,120,.5)}
.phone__notch{width:46px;height:5px;border-radius:5px;background:#2a3355;margin:2px auto 6px}
.phone__screen{background:#fff;border-radius:19px;overflow:hidden;font-size:9px;min-height:250px;display:flex;flex-direction:column}
.p-head{display:flex;justify-content:space-between;padding:10px 10px 6px;color:#14213d}
.p-hero{margin:4px 8px;padding:14px 10px;border-radius:10px;background:#14213d;color:#fff;display:flex;flex-direction:column;gap:6px}
.p-hero small{color:#ffd23f;font-size:8px}.p-hero b{font-size:13px;line-height:1.1}
.p-hero u{background:#ffd23f;color:#14213d;align-self:flex-start;margin-top:4px}
.p-list{padding:10px;display:flex;flex-direction:column;gap:6px;flex:1}
.p-list span{height:22px;border-radius:6px;background:#f2f2f2}
.p-call{margin:0 8px 8px;padding:9px;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;background:var(--green);color:#fff;font-weight:700}
.p-call .i{width:11px;height:11px}
.notif{position:absolute;left:-20px;bottom:-14px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px 12px 12px;box-shadow:0 30px 50px -20px rgba(11,40,120,.35);max-width:300px}
.notif__icon{width:38px;height:38px;border-radius:10px;background:var(--grad);color:#fff;display:grid;place-items:center;flex-shrink:0}
.notif b{display:block;font-size:14px;color:var(--ink)}
.notif span{display:block;font-size:12.5px;color:var(--mute);line-height:1.35}
.notif small{align-self:flex-start;font-size:11px;color:var(--mute)}
.badge3d{position:absolute;left:-44px;top:30%;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 30px 50px -20px rgba(11,40,120,.35);font-size:12px;color:var(--mute);line-height:1.25}
.badge3d>.i{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--accent-l);color:var(--accent)}
.badge3d b{display:block;color:var(--ink);font-size:13.5px}
.cube{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);transform-style:preserve-3d}
.cube::before{content:"";position:absolute;inset:0;border-radius:28%;background:linear-gradient(140deg,#3fd0ff,#0b6ff0);box-shadow:inset 0 -3px 6px rgba(0,30,120,.35),inset 0 2px 3px rgba(255,255,255,.5),0 14px 24px -8px rgba(11,91,216,.55);animation:bob 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-14px) rotate(8deg)}}

/* ---------- 2 · Warum ---------- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.6vw,20px);perspective:1200px}
.benefit{padding:clamp(16px,3vh,28px) clamp(14px,1.6vw,24px);border-radius:var(--r);border:1px solid var(--line);background:#fff}
.benefit:hover{border-color:#c9d8f5;box-shadow:var(--shadow-lg)}
.benefit:hover .icon3d{transform:translateZ(60px) rotate(-6deg) scale(1.06)}
.benefit h3{font-size:clamp(15.5px,2.3vh,19px);margin-bottom:6px}
.benefit p{margin:0;font-size:clamp(13px,1.9vh,15.5px);color:var(--mute);line-height:1.5}
.icon3d{position:relative;width:clamp(42px,6.4vh,56px);height:clamp(42px,6.4vh,56px);border-radius:16px;display:grid;place-items:center;color:#fff;background:var(--grad);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -4px 8px rgba(0,25,100,.3) inset,0 14px 24px -10px rgba(11,91,216,.7);margin-bottom:clamp(10px,2.4vh,22px);transform:translateZ(40px);transition:transform .5s var(--ease)}
.icon3d .i{width:46%;height:46%;filter:drop-shadow(0 2px 2px rgba(0,20,80,.35))}
.icon3d::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%);pointer-events:none}
.trades{margin-top:clamp(16px,4vh,44px);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trades__track{display:flex;gap:8px;width:max-content;animation:marquee 40s linear infinite}
.trades span{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;padding:7px 13px 7px 10px;border-radius:99px;background:var(--tint);color:var(--ink);white-space:nowrap}
.trades span .i{color:var(--accent);width:16px;height:16px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Tilt + Glanz */
[data-tilt]{transform-style:preserve-3d;transition:transform .6s var(--ease),box-shadow .3s,border-color .3s}
[data-tilt].is-tilting{transition:transform .12s linear,box-shadow .3s,border-color .3s}
[data-glare]{position:relative;overflow:hidden}
[data-glare]::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 40%);opacity:0;transition:opacity .3s;mix-blend-mode:soft-light;z-index:3}
[data-glare].is-tilting::after{opacity:1}

/* ---------- 3 · Alles drin ---------- */
.incl{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,72px);align-items:center}
.checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.3vh,12px);perspective:1000px}
.checklist li{display:flex;gap:12px;align-items:center;padding:clamp(9px,1.6vh,15px) 14px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .2s,box-shadow .2s,transform .3s var(--ease)}
.checklist li:hover{border-color:#c9d8f5;box-shadow:var(--shadow);transform:translateY(-2px)}
.checklist i{font-style:normal;width:clamp(30px,4.4vh,36px);height:clamp(30px,4.4vh,36px);border-radius:10px;background:var(--accent-l);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.checklist i .i{width:55%;height:55%}
.checklist li>div{min-width:0}
.checklist b{display:block;overflow-wrap:anywhere;hyphens:auto;font-size:clamp(13px,1.95vh,15.5px);color:var(--ink);line-height:1.3}
.checklist span{display:block;font-size:clamp(12px,1.7vh,13.5px);color:var(--mute);line-height:1.35}

/* ---------- 4 · Vorher / Nachher ---------- */
.ba-wrap{perspective:1600px;display:flex;justify-content:center}
.ba{position:relative;width:min(100%,calc((var(--avail) - clamp(110px,18vh,190px)) * 16 / 9));aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);box-shadow:var(--shadow-lg);--pos:100%;user-select:none;touch-action:pan-y}
.ba__after,.ba__before{position:absolute;inset:0;overflow:hidden}
.ba__after{z-index:1}.ba__before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;z-index:3;pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.25)}
.ba__line span{position:absolute;top:50%;left:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.ba__line svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:5;cursor:ew-resize;margin:0;-webkit-appearance:none;appearance:none}
.ba__range::-webkit-slider-thumb{-webkit-appearance:none;width:60px;height:400px}
.ba__tag{position:absolute;bottom:12px;z-index:4;font-size:12px;font-weight:700;padding:5px 11px;border-radius:99px;background:rgba(11,18,51,.75);color:#fff;pointer-events:none}
.ba__tag--l{left:12px}.ba__tag--r{right:12px;background:var(--accent)}
.hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:clamp(8px,1.8vh,16px) 0 0;font-size:14px;color:var(--mute)}
.hint .i{color:var(--accent)}
.ba{container-type:inline-size}
.old{position:absolute;inset:0;background:#e9e9e2;color:#222;font-family:"Times New Roman",serif;font-size:1.4cqw}
.old__head{background:linear-gradient(#5b7fb8,#2f5594);color:#fff;font-family:Arial,sans-serif;font-weight:bold;padding:2.5% 3%;font-size:1.8em;text-shadow:2px 2px 0 #1a2f55}
.old__menu{background:#cfcfcf;padding:1% 3%;border-bottom:2px solid #999}
.old__menu u{color:#00e}
.old__body{display:grid;grid-template-columns:28% 1fr;gap:3%;padding:3%}
.old__img{background:#c8c8c8;border:2px inset #aaa;aspect-ratio:4/3;display:grid;place-items:center;color:#777;font-family:Arial,sans-serif}
.old h3{font-family:"Comic Sans MS","Comic Neue",cursive;color:#c00;font-size:1.6em;margin:0 0 .5em;letter-spacing:0}
.old p{margin:0 0 .7em;line-height:1.35}
.old__small{font-size:.75em;color:#666}
.old__wip{display:inline-block;margin:.4em 0 .9em;padding:.35em;background:repeating-linear-gradient(-45deg,#f5c400 0 .8em,#222 .8em 1.6em)}
.old__wip span{display:block;background:#f5c400;padding:.25em .8em;font:bold .95em Arial,sans-serif;color:#222}
.old__count{font-size:.85em}.old__count span{font-family:"Courier New",monospace;background:#000;color:#3f3;padding:.1em .4em;letter-spacing:.15em}
.new{position:absolute;inset:0;background:linear-gradient(180deg,#fff 0 70%,#f5f9fa);font-size:1.3cqw;color:var(--text);overflow:hidden}
.new .i{width:1.1em;height:1.1em}
.new__nav{position:relative;z-index:2;display:flex;align-items:center;gap:2em;padding:2.2% 4%;font-weight:500;color:#33475b}
.new__nav b{margin-right:auto;color:#0d3b66;display:flex;align-items:center;gap:.5em;font-size:1.15em}
.new__nav em{width:1.9em;height:1.9em;border-radius:.5em;background:linear-gradient(135deg,#0d3b66,#1b8a8f);color:#fff;display:grid;place-items:center}
.new__nav u{text-decoration:none;background:#0d3b66;color:#fff;padding:.6em 1.1em;border-radius:99px;font-weight:600;display:flex;align-items:center;gap:.45em}
.new__hero{position:relative;z-index:2;padding:4.5% 4% 0;max-width:54%}
.new__hero small{display:inline-block;color:#1b8a8f;font-weight:600;background:#e3f3f3;padding:.35em .8em;border-radius:99px;font-size:.85em}
.new__hero h3{font-size:3.5em;line-height:1.02;color:#0d3b66;margin:.4em 0 .35em;letter-spacing:-.035em}
.new__hero h3 span{color:#1b8a8f}
.new__hero p{margin:0 0 1.3em;font-size:1.1em;color:#5a6b7b;max-width:30em}
.new__btns{display:flex;gap:1.2em;align-items:center;flex-wrap:wrap}
.new__btns u{text-decoration:none;background:#1b8a8f;color:#fff;padding:.9em 1.5em;border-radius:.6em;font-weight:600;box-shadow:0 .8em 1.6em -.6em rgba(27,138,143,.7)}
.new__btns span{font-weight:600;color:#0d3b66;display:flex;align-items:center;gap:.4em}
.new__svc{display:grid;grid-template-columns:repeat(3,1fr);gap:.8em;margin-top:2.2em}
.new__svc div{display:grid;grid-template-columns:auto 1fr;column-gap:.6em;align-items:center;background:#fff;border:1px solid #e6eef0;border-radius:.8em;padding:.75em .8em;box-shadow:0 .6em 1.4em -1em rgba(13,59,102,.35)}
.new__svc .i{grid-row:span 2;width:2.1em;height:2.1em;padding:.45em;border-radius:.55em;background:#e3f3f3;color:#1b8a8f}
.new__svc small{display:block;background:none;padding:0;border-radius:0;font-weight:400}
.new__svc b{font-size:.92em;color:#0d3b66;line-height:1.2}.new__svc small{font-size:.75em;color:#7a8a98;line-height:1.2}
/* Bad-Illustration */
.new__img{position:absolute;right:3%;top:15%;bottom:5%;width:38%;border-radius:1.4em;overflow:hidden;box-shadow:0 1.6em 3em -1.4em rgba(13,59,102,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.0)),repeating-linear-gradient(0deg,#dfe9eb 0 1px,transparent 1px 12.5%),repeating-linear-gradient(90deg,#dfe9eb 0 1px,transparent 1px 11%),linear-gradient(180deg,#f3f7f7,#e8f0f1)}
.new__img i{position:absolute;display:block}
.b-light{left:0;right:0;top:0;height:60%;background:radial-gradient(60% 70% at 35% 0,rgba(255,244,214,.75),transparent 70%)}
.b-floor{left:0;right:0;bottom:0;height:20%;background:repeating-linear-gradient(90deg,#b9a690 0 24%,#a8957f 24% 24.6%),#b9a690;box-shadow:inset 0 .5em 1em -.5em rgba(0,0,0,.25)}
.b-mirror{left:10%;top:12%;width:30%;aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#f9fdff 0 35%,#d6e7ec 60%,#eef6f8);border:.35em solid #c9a66b;box-shadow:0 .6em 1.2em -.4em rgba(0,0,0,.25)}
.b-vanity{left:6%;bottom:20%;width:38%;height:17%;border-radius:.3em;background:linear-gradient(180deg,#8a5a34,#6e4526);box-shadow:0 .5em .8em -.3em rgba(0,0,0,.35)}
.b-vanity::before{content:"";position:absolute;left:8%;right:8%;top:45%;height:2px;background:rgba(0,0,0,.25)}
.b-vanity i{left:22%;width:56%;top:-28%;height:34%;border-radius:.3em .3em 50% 50%;background:#fff;box-shadow:0 .2em .4em rgba(0,0,0,.15)}
.b-vanity i::before{content:"";position:absolute;left:46%;top:-80%;width:8%;height:90%;background:#9aa7ad;border-radius:.2em}
.b-shower{right:6%;top:6%;bottom:20%;width:38%;border:2px solid rgba(160,190,200,.9);border-bottom:0;background:linear-gradient(110deg,rgba(255,255,255,.55),rgba(210,235,240,.35) 45%,rgba(255,255,255,.6) 55%,rgba(210,235,240,.3));backdrop-filter:blur(1px)}
.b-shower i{left:30%;top:6%;width:40%;height:4%;border-radius:.3em;background:#9aa7ad}
.b-shower i::after{content:"";position:absolute;left:10%;right:10%;top:200%;height:900%;background:repeating-linear-gradient(90deg,rgba(130,190,210,.45) 0 1px,transparent 1px 14%);-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.b-tub{right:6%;bottom:20%;width:40%;height:2.5%;border-radius:.2em;background:#cfdadd;box-shadow:none;z-index:1}
.b-tub-old{right:4%;bottom:14%;width:56%;height:16%;border-radius:.6em .6em 45% 45%;background:linear-gradient(180deg,#fff,#e9eff1);box-shadow:0 .8em 1.2em -.5em rgba(0,0,0,.3);z-index:1}
.b-plant{left:46%;bottom:19%;width:10%;height:24%;background:radial-gradient(50% 30% at 50% 30%,#4f9a6a 98%,transparent),radial-gradient(40% 35% at 25% 55%,#3f8a5a 98%,transparent),radial-gradient(40% 35% at 78% 52%,#5aa877 98%,transparent);z-index:2}
.b-plant::after{content:"";position:absolute;left:20%;right:20%;bottom:0;height:28%;border-radius:0 0 .3em .3em;background:#e9e2d6}
.new__rev{position:absolute;z-index:3;right:33%;bottom:13%;background:#fff;border-radius:.8em;padding:.7em 1em;box-shadow:0 1em 2em -.8em rgba(13,59,102,.45);line-height:1.25}
.new__rev b{display:block;color:#0d3b66;font-size:1.1em}.new__rev b span{color:#f5a623;letter-spacing:.05em}.new__rev small{color:#7a8a98;font-size:.8em}
.new__badge{position:absolute;z-index:3;right:5%;top:19%;display:flex;align-items:center;gap:.4em;background:rgba(255,255,255,.92);color:#0d3b66;font-weight:600;font-size:.85em;padding:.5em .9em;border-radius:99px;box-shadow:0 .6em 1.2em -.6em rgba(13,59,102,.5)}
.new__badge .i{color:#1b8a8f}

/* ---------- 5 · Beispiele ---------- */
.examples{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px);perspective:1200px;max-width:min(100%,calc((var(--avail) - 200px) * 4 / 3 * 3 + 60px));margin:0 auto}
.ex{container-type:inline-size}
.ex__shot{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);position:relative;overflow:hidden;transform-style:preserve-3d;transition:box-shadow .4s;box-shadow:var(--shadow)}
.ex:hover .ex__shot{box-shadow:var(--shadow-lg)}
/* Mini-Websites – alles in em, skaliert mit der Kartenbreite */
.mini{font-size:2.15cqw;font-family:var(--sans);display:flex;flex-direction:column;--c:#1f6f5c;--c2:#e9f2ec;--ink2:#14261f}
.mini .i{width:1.25em;height:1.25em}
.m-nav{display:flex;align-items:center;gap:1.3em;padding:1em 1.4em;font-size:.95em;color:color-mix(in srgb,var(--ink2) 65%,transparent);position:relative;z-index:2}
.m-nav b{display:flex;align-items:center;gap:.45em;margin-right:auto;color:var(--ink2);font-family:var(--display);font-size:1.15em;letter-spacing:-.02em}
.m-nav b i{display:grid;place-items:center;width:1.8em;height:1.8em;border-radius:.5em;background:var(--c);color:#fff}
.m-nav b i .i{width:1.05em;height:1.05em}
.m-nav u{text-decoration:none;background:var(--c);color:#fff;padding:.5em 1em;border-radius:.5em;font-weight:600}
.m-hero{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1em;padding:.4em 1.4em 0;align-items:center;min-height:0}
.m-text small{display:block;font-size:.78em;font-weight:600;color:var(--c);letter-spacing:.02em}
.m-text h4{font-family:var(--display);font-size:2.05em;line-height:1.05;letter-spacing:-.035em;margin:.3em 0 .35em;color:var(--ink2)}
.m-text p{margin:0 0 .8em;font-size:.88em;line-height:1.4;color:color-mix(in srgb,var(--ink2) 70%,transparent)}
.m-btns{display:flex;align-items:center;gap:.5em}
.m-btns u{text-decoration:none;background:var(--c);color:#fff;font-weight:600;font-size:.9em;padding:.65em 1em;border-radius:.55em;box-shadow:0 .4em 1em -.4em var(--c)}
.m-btns em,.m-btns span{display:grid;place-items:center;height:2.3em;min-width:2.3em;padding:0 .7em;border-radius:.55em;border:1px solid color-mix(in srgb,var(--ink2) 20%,transparent);color:var(--ink2);font-style:normal;font-weight:600;font-size:.88em;grid-auto-flow:column;gap:.35em}
.m-art{position:relative;height:92%;border-radius:.9em;overflow:hidden}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;padding:1em 1.4em 1.2em}
.m-cards div{display:flex;align-items:center;gap:.5em;padding:.6em .7em;border-radius:.6em;background:#fff;box-shadow:0 .2em .8em -.3em rgba(0,0,0,.18);font-size:.82em;color:var(--ink2)}
.m-cards div .i{color:var(--c);flex-shrink:0}
.m-cards b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Garten */
.mini--garden{--c:#2f7d4f;--ink2:#15301f;background:linear-gradient(180deg,#f3f8f1,#e6f0e3)}
.garden-art{background:linear-gradient(180deg,#bfe6f5 0%,#e5f5ec 62%)}
.g-sun{position:absolute;right:14%;top:12%;width:18%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#ffe58a 40%,rgba(255,229,138,0) 72%)}
.g-hill{position:absolute;left:-20%;right:-20%;border-radius:50% 50% 0 0}
.g-hill--b{bottom:22%;height:46%;background:linear-gradient(#8fcf8a,#6db86f);left:-40%;right:10%}
.g-hill--f{bottom:-14%;height:52%;background:linear-gradient(#5aa65d,#3e8a4a)}
.g-tree{position:absolute;bottom:30%;width:16%;aspect-ratio:.7}
.g-tree::before{content:"";position:absolute;left:44%;bottom:0;width:12%;height:40%;background:#6b4a2b;border-radius:2px}
.g-tree::after{content:"";position:absolute;left:0;right:0;top:0;height:72%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7fd17a,#2f7d4f 70%)}
.g-tree--1{left:12%}.g-tree--2{left:62%;bottom:24%;width:20%}
.g-path{position:absolute;left:38%;bottom:-6%;width:24%;height:36%;background:linear-gradient(#e9dcc0,#d8c69f);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%)}
.g-tag{position:absolute;left:6%;bottom:7%;display:flex;align-items:center;gap:.35em;background:#fff;color:var(--ink2);font-size:.72em;font-weight:600;padding:.4em .7em;border-radius:99px;box-shadow:0 .3em .8em -.3em rgba(0,0,0,.3)}
.g-tag .i{color:var(--c);width:1.1em;height:1.1em}

/* Dachdecker – Vollbild-Hero */
.mini--roof{--c:#c2412d;--ink2:#fff;background:#1d2633;color:#fff}
.roof-art{position:absolute;inset:0}
.r-sky{position:absolute;inset:0;background:linear-gradient(180deg,#25344a 0%,#3d5675 55%,#e9a27a 100%)}
.r-house{position:absolute;right:-4%;bottom:15%;width:58%;height:58%;z-index:0}
.r-roof{position:absolute;inset:0 0 30% 0;clip-path:polygon(50% 0,100% 62%,100% 100%,0 100%,0 62%);background:repeating-linear-gradient(0deg,#8e2f22 0 .9em,#a63a2a .9em 1.05em),#a63a2a;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 .12em,transparent .12em 1em),repeating-linear-gradient(90deg,#b1412f 0 1.4em,#9b3627 1.4em 2.8em)}
.r-roof::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.25),transparent 40%,rgba(255,255,255,.08))}
.r-chimney{position:absolute;left:66%;top:8%;width:8%;height:26%;background:linear-gradient(90deg,#5b3a33,#71483f);z-index:-1}
.r-window{position:absolute;left:44%;top:40%;width:12%;height:13%;border-radius:.2em;background:linear-gradient(#ffd98c,#f2a541);box-shadow:0 0 1.2em rgba(255,200,110,.7)}
.r-house::after{content:"";position:absolute;left:4%;right:4%;bottom:0;height:30%;background:#e8e2d8}
.mini--roof .m-nav--dark{background:rgba(10,16,26,.45);backdrop-filter:blur(4px);color:rgba(255,255,255,.7)}
.mini--roof .m-nav b{color:#fff}
.m-hero--over{grid-template-columns:1fr;position:relative;z-index:1;padding-top:1.4em;align-items:start}
.mini--roof .m-text{max-width:58%}
.mini--roof .m-text small{color:#ffb39e}
.mini--roof .m-text h4{color:#fff;font-size:2.3em;text-shadow:0 .1em .6em rgba(0,0,0,.35)}
.mini--roof .m-btns span{border-color:rgba(255,255,255,.4);color:#fff}
.m-strip{position:relative;z-index:1;display:flex;gap:.5em;padding:0 1.4em 1.2em;flex-wrap:wrap}
.m-strip span{display:flex;align-items:center;gap:.4em;font-size:.78em;font-weight:600;padding:.45em .75em;border-radius:99px;background:rgba(14,22,36,.62);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.18);color:#fff}
.m-strip .i{color:#ffb39e}

/* Schreinerei */
.mini--wood{--c:#8a5a2b;--ink2:#2b1d12;background:linear-gradient(180deg,#faf5ee,#f1e7da)}
.mini--wood .m-hero{grid-template-columns:.95fr 1.05fr}
.wood-art{background:radial-gradient(ellipse at 30% 0%,#fff6e6,transparent 60%),linear-gradient(180deg,#efe3d2,#e2d1ba)}
.wood-art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;background:repeating-linear-gradient(90deg,#b98552 0 3.2em,#a87444 3.2em 3.3em),#b98552}
.w-shelf{position:absolute;left:12%;right:30%;top:16%;bottom:16%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:.3em;padding:.3em;border-radius:.3em;background:#9b6837;background-image:repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 .25em,transparent .25em .9em)}
.w-shelf i{border-radius:.15em;background:linear-gradient(#5e3d20,#6f4826);position:relative}
.w-shelf i:nth-child(1)::after{content:"";position:absolute;left:15%;bottom:0;width:15%;height:70%;background:#2f6f8f;box-shadow:.4em 0 0 #d9a441,.8em 0 0 #c2412d}
.w-shelf i:nth-child(4)::after{content:"";position:absolute;left:30%;bottom:0;width:40%;height:45%;border-radius:40% 40% .1em .1em;background:#e8d9c2}
.w-shelf i:nth-child(5)::after{content:"";position:absolute;left:20%;bottom:0;width:60%;height:30%;background:#c79a62;border-radius:.1em}
.w-lamp{position:absolute;right:12%;top:0;width:14%;height:40%}
.w-lamp::before{content:"";position:absolute;left:48%;top:0;width:4%;height:55%;background:#3a2a1c}
.w-lamp::after{content:"";position:absolute;left:0;right:0;top:52%;height:30%;border-radius:50% 50% 10% 10%;background:linear-gradient(#2b1d12,#4a3422);box-shadow:0 1.6em 2em -1em rgba(255,214,140,.9)}
.w-plant{position:absolute;right:12%;bottom:16%;width:12%;height:30%;background:linear-gradient(#c97a4a,#a85f35);border-radius:.2em .2em .4em .4em;clip-path:polygon(0 45%,100% 45%,88% 100%,12% 100%)}
.w-plant::before{content:"";position:absolute;inset:-10% -30% 50% -30%;background:radial-gradient(circle at 30% 60%,#4f8a4a 30%,transparent 32%),radial-gradient(circle at 70% 50%,#3f7a3c 30%,transparent 32%),radial-gradient(circle at 50% 30%,#5c9a55 30%,transparent 32%)}
.ex__meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;gap:8px}
.ex__meta b{color:var(--ink);font-size:clamp(14px,2vh,16px)}
.ex__meta span{font-size:13px;color:var(--mute);white-space:nowrap}

/* ---------- 6 · Ablauf ---------- */
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.steps::before{content:"";position:absolute;top:31px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--line2) 0 8px,transparent 8px 14px)}
.step{text-align:center;position:relative;padding:0 8px;perspective:600px}
.step__n{width:64px;height:64px;margin:0 auto clamp(12px,2.4vh,20px);position:relative;display:block;transform-style:preserve-3d;transition:transform 1s var(--ease)}
.step__n b,.step__n .i{position:absolute;inset:0;border-radius:18px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.step__n b{background:#fff;border:2px solid var(--accent);color:var(--accent);font-family:var(--display);font-size:24px;box-shadow:0 0 0 8px var(--bg)}
.step__n .i{width:64px;height:64px;padding:17px;background:var(--grad);color:#fff;transform:rotateY(180deg);box-shadow:0 0 0 8px var(--bg),0 14px 24px -10px rgba(11,91,216,.7)}
.step:hover .step__n,.step.is-flipped .step__n{transform:rotateY(180deg)}
.step h3{font-size:clamp(16px,2.4vh,19px);margin-bottom:6px}
.step p{margin:0 0 10px;font-size:clamp(13px,1.95vh,15px);color:var(--mute);line-height:1.45}
.step small{display:inline-block;font-size:12.5px;font-weight:600;color:var(--accent-d);background:var(--accent-l);padding:3px 10px;border-radius:99px}

/* ---------- 7 · Preis ---------- */
.slide--price{background:radial-gradient(700px 400px at 20% 40%,rgba(18,168,255,.08),transparent 70%),#fff}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;max-width:1000px;margin:0 auto;perspective:1400px}
.pcard{--pp:clamp(20px,3vh,34px);border-radius:24px;background:#fff;border:1px solid #cfdcf3;box-shadow:0 50px 100px -40px rgba(11,60,160,.4),0 0 0 6px rgba(11,91,216,.04);padding:var(--pp)}
.pcard>*{position:relative;z-index:1}
.pcard__top{position:relative;margin:calc(-1 * var(--pp)) calc(-1 * var(--pp)) clamp(14px,2.6vh,24px);padding:var(--pp);background:var(--grad);color:#fff;border-radius:23px 23px 0 0;overflow:hidden;transform-style:preserve-3d}
.pcard__top::before{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 65%)}
.pcard__label{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;background:rgba(255,255,255,.15);padding:6px 12px;border-radius:99px}
.pcard__price{display:flex;align-items:flex-start;gap:6px;margin-top:clamp(8px,1.8vh,16px);font-family:var(--display);line-height:1;transform:translateZ(50px)}
.pcard__num{font-size:clamp(56px,min(8vw,11vh),104px);font-weight:700;letter-spacing:-.05em;text-shadow:0 1px 0 #cfe6ff,0 2px 0 #b9d9ff,0 3px 0 #9fc9ff,0 4px 0 #7fb5fb,0 5px 0 #5a9cf2,0 14px 22px rgba(0,20,90,.45);font-variant-numeric:tabular-nums}
.pcard__cur{font-size:clamp(26px,4vh,44px);font-weight:600;margin-top:8px;opacity:.9}
.pcard__once{margin:8px 0 0;font-size:14.5px;color:rgba(255,255,255,.85)}
.pcard__list{list-style:none;padding:0;margin:0 0 clamp(14px,2.6vh,24px);display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.pcard__list li{display:flex;align-items:center;gap:8px;font-size:clamp(13px,1.9vh,15px);color:var(--ink)}
.pcard__list .i{width:20px;height:20px;padding:3px;border-radius:50%;background:#e3f6ec;color:var(--green);stroke-width:3}
.pay h3{font-size:clamp(20px,3vh,28px)}
.pay__sub{color:var(--mute);margin:8px 0 clamp(14px,3vh,26px);font-size:clamp(13.5px,2vh,16px)}
.pay__track{position:relative;display:flex;flex-direction:column;gap:clamp(8px,1.6vh,14px);perspective:900px}
.pay__line{position:absolute;left:25px;top:26px;bottom:26px;width:2px;background:var(--line)}
.pay__line i{display:block;width:100%;height:100%;background:var(--grad);transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ease) .3s}
.pay.is-in .pay__line i{transform:scaleY(1)}
.pay__step{display:flex;align-items:center;gap:16px;position:relative}
.pay__icon{width:52px;height:52px;border-radius:15px;flex-shrink:0;display:grid;place-items:center;background:#fff;border:2px solid var(--line);color:var(--mute);position:relative;z-index:1;transition:all .5s var(--ease) calc(.3s + var(--i) * .45s)}
.pay__icon .i{width:22px;height:22px}
.pay.is-in .pay__icon{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 12px 22px -10px rgba(11,91,216,.7)}
.pay__card{flex:1;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:clamp(9px,1.6vh,14px) 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);transform-origin:left center;transform:rotateY(-70deg);opacity:0;transition:transform .9s var(--ease) calc(.3s + var(--i) * .45s),opacity .6s calc(.3s + var(--i) * .45s)}
.pay.is-in .pay__card{transform:none;opacity:1}
.pay__card small{font-size:12.5px;font-weight:600;color:var(--accent);grid-column:1}
.pay__card b{grid-column:2;grid-row:1/3;font-family:var(--display);font-size:clamp(20px,3vh,26px);color:var(--ink);letter-spacing:-.03em}
.pay__card span{grid-column:1;font-size:13.5px;color:var(--mute);line-height:1.35}
.pay__sum{display:flex;justify-content:space-between;align-items:baseline;margin-top:clamp(10px,2vh,18px);padding:clamp(10px,1.8vh,16px) 16px 0 68px;border-top:2px dashed var(--line2)}
.pay__sum span{font-weight:600;color:var(--mute)}
.pay__sum b{font-family:var(--display);font-size:clamp(22px,3.2vh,28px);color:var(--ink)}

/* ---------- 8 · Demo ---------- */
.slide--dark{background:radial-gradient(900px 600px at 0% 0%,rgba(18,168,255,.16),transparent 60%),radial-gradient(800px 600px at 100% 100%,rgba(11,91,216,.25),transparent 60%),var(--dark);color:#c3cbe0}
.slide--dark h2{color:#fff}
.eyebrow--light{color:#5cc3ff}
.demo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:center}
.demo__list{list-style:none;padding:0;margin:clamp(14px,3vh,28px) 0 0;display:flex;flex-direction:column;gap:10px;font-size:clamp(14px,2.1vh,17px);color:#e8ebf3}
.demo__list li{display:flex;gap:12px;align-items:center}
.demo__list i{background:rgba(22,160,90,.2);color:#4fd18b}
.demo__call{margin-top:clamp(16px,3.6vh,32px);padding:clamp(12px,2.2vh,18px) 20px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:2px}
.demo__call span{font-size:13.5px;color:#98a2bd}
.demo__call a{font-family:var(--display);font-size:clamp(19px,2.8vh,24px);font-weight:700;color:#fff;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.demo__call a .i{color:#5cc3ff}
.demo__addr{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13.5px;color:#98a2bd}
.demo__addr .i{width:15px;height:15px;color:#5cc3ff}
.demo__slots{display:flex;align-items:center;gap:10px;margin:clamp(10px,2.2vh,20px) 0 0;font-size:14.5px;color:#c3cbe0}
.demo__slots b{color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:#4fd18b;flex-shrink:0;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,209,139,.6)}70%{box-shadow:0 0 0 8px rgba(79,209,139,0)}100%{box-shadow:0 0 0 0 rgba(79,209,139,0)}}
.form-card{background:#fff;color:var(--text);border-radius:22px;padding:clamp(18px,3.2vh,36px) clamp(16px,2.6vw,36px);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);min-height:min(470px,var(--avail))}
.form__top{display:flex;align-items:center;gap:16px;font-size:13.5px;color:var(--mute);margin-bottom:clamp(12px,2.6vh,24px)}
.form__top b{color:var(--ink)}
.form__progress{flex:1;height:6px;border-radius:6px;background:var(--tint);overflow:hidden}
.form__progress i{display:block;height:100%;width:33.3%;background:var(--grad);border-radius:inherit;transition:width .5s var(--ease)}
.fstep{border:0;padding:0;margin:0;display:none}
.fstep.is-active{display:block;animation:stepIn .5s var(--ease)}
@keyframes stepIn{from{opacity:0;transform:perspective(800px) rotateY(-12deg) translateX(20px)}to{opacity:1;transform:none}}
legend{font-size:clamp(19px,2.9vh,26px);font-weight:700;color:var(--ink);letter-spacing:-.03em;margin-bottom:clamp(12px,2.4vh,20px);padding:0}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:clamp(7px,1.2vh,10px)}
.chips--1{grid-template-columns:1fr}
.chip{display:flex;align-items:center;gap:10px;text-align:left;padding:clamp(8px,1.4vh,12px) 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:clamp(13.5px,1.95vh,15.5px);font-weight:600;color:var(--ink);transition:border-color .15s,background .15s,transform .2s var(--ease),box-shadow .2s}
.chip .i{width:clamp(28px,4.2vh,34px);height:clamp(28px,4.2vh,34px);padding:7px;border-radius:9px;background:var(--accent-l);color:var(--accent);transition:background .2s,color .2s}
.chip:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.chip.is-selected{border-color:var(--accent);background:var(--accent-l);box-shadow:0 0 0 3px rgba(11,91,216,.15)}
.chip.is-selected .i,.chip:hover .i{background:var(--grad);color:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{margin-bottom:clamp(8px,1.5vh,13px)}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field input{width:100%;height:clamp(42px,6vh,50px);padding:0 14px;border-radius:11px;border:1.5px solid var(--line2);background:#fff;font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field input::placeholder{color:#a3abbd}
.field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(11,91,216,.14)}
.field.is-invalid input{border-color:#e03a3a;box-shadow:0 0 0 4px rgba(224,58,58,.1)}
.field.is-valid input{border-color:var(--green)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--mute);margin:2px 0 12px;cursor:pointer;line-height:1.4}
.consent input{position:absolute;opacity:0;pointer-events:none}
.consent .box{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line2);display:grid;place-items:center;transition:all .15s;color:transparent}
.consent .box .i{width:14px;height:14px;stroke-width:3.2}
.consent input:checked+.box{background:var(--accent);border-color:var(--accent);color:#fff}
.consent input:focus-visible+.box{box-shadow:0 0 0 3px rgba(11,91,216,.3)}
.consent a{text-decoration:underline;color:var(--ink)}
.form__error{color:#d42f2f;font-size:13.5px;font-weight:500;margin-bottom:10px}
.form__error:empty{display:none}
.js-back{margin-top:12px;font-size:14px;color:var(--mute);display:none}
.js-back:hover{color:var(--ink)}
.submit.is-loading{opacity:.7;pointer-events:none}
.success{display:none;text-align:center;padding:30px 0}
.form-card.is-done form{display:none}
.form-card.is-done .success{display:block;animation:stepIn .5s var(--ease)}
.success__check{width:80px;height:80px;margin:0 auto 20px}
.success__check svg{width:100%;height:100%;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.success__check circle{stroke-dasharray:151;stroke-dashoffset:151;animation:draw .8s var(--ease) forwards}
.success__check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s .5s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.success h3{font-size:28px;margin-bottom:10px}
.success p{color:var(--mute);max-width:40ch;margin:0 auto}

/* ---------- 9 · FAQ ---------- */
.faq{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(24px,6vw,80px);align-items:center}
.acc{border-bottom:1px solid var(--line)}
.acc:first-child{border-top:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:clamp(12px,2.3vh,20px) 0;font-size:clamp(15px,2.2vh,18px);font-weight:600;color:var(--ink);cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary i{width:28px;height:28px;border-radius:50%;background:var(--tint);position:relative;flex-shrink:0;transition:background .2s}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s var(--ease)}
.acc[open] summary i{background:var(--grad)}
.acc[open] summary i::before,.acc[open] summary i::after{background:#fff}
.acc[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc p{margin:0;padding:0 44px clamp(12px,2.2vh,20px) 0;color:var(--mute);font-size:clamp(14px,2vh,16px)}
.acc[open] p{animation:stepIn .4s var(--ease)}

/* ---------- 10 · Abschluss ---------- */
.slide--end{padding:var(--navh) 0 0;align-items:stretch}
.end{display:flex;flex-direction:column;width:100%}
.cta{flex:1;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;padding:var(--vpad) var(--pad);overflow:hidden;min-height:0}
.cta__inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
.cta h2{color:#fff;font-size:clamp(28px,min(4.6vw,6.4vh),56px)}
.cta p{margin:10px 0 0;font-size:clamp(15px,2.3vh,19px);color:rgba(255,255,255,.88)}
.cta__btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(16px,3.6vh,32px)}
.logo3d{width:clamp(140px,min(26vw,32vh),300px);aspect-ratio:600/389;perspective:900px;flex-shrink:0;margin-right:4%}
.logo3d__spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:spin3d 9s var(--ease) infinite;filter:drop-shadow(0 30px 30px rgba(0,20,90,.35))}
.logo3d__spin img{position:absolute;inset:0;width:100%;height:100%}
@keyframes spin3d{0%,100%{transform:rotateY(-28deg) rotateX(8deg)}45%,50%{transform:rotateY(28deg) rotateX(-4deg)}}
.footer{background:#fff;padding:clamp(14px,3vh,28px) var(--pad);font-size:14px;border-top:1px solid var(--line)}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;max-width:1200px;margin:0 auto}
.footer__links{display:flex;gap:8px 22px;flex-wrap:wrap;align-items:center;color:var(--mute)}
.footer__links a{display:flex;align-items:center;gap:7px;color:var(--mute)}
.footer__links a:hover{color:var(--accent)}
.footer__links .i{width:16px;height:16px;color:var(--accent)}

/* ---------- Reveal (3D, beim Erreichen der Folie) ---------- */
.js .reveal{opacity:0;transform:perspective(1000px) rotateX(14deg) translateY(30px);transform-origin:50% 0;transition:opacity .8s var(--ease),transform .9s var(--ease)}
.js .slide.is-seen .reveal,.js .reveal.is-in{opacity:1;transform:none}
.js .slide.is-seen .reveal[data-tilt],.js .reveal.is-in[data-tilt]{transition:transform .6s var(--ease),box-shadow .3s,border-color .3s,opacity .8s var(--ease)}

/* ================= Responsive ================= */
@media (max-width:1080px){
  .nav__links{display:none}
  .benefits{grid-template-columns:repeat(2,1fr)}
}
/* Tablet hoch / Handy hoch */
@media (max-width:820px) and (orientation:portrait){
  h1{font-size:clamp(28px,min(7.4vw,5.2vh),62px)}
  h2{font-size:clamp(22px,min(5.6vw,4.2vh),46px)}
  .sub,.slide--hero .sub{font-size:clamp(14px,min(2.6vw,2vh),19px)}
  .benefit p,.step p,.checklist b{font-size:clamp(12.5px,min(2.2vw,1.8vh),16px)}
  .hero__grid,.incl,.demo,.faq,.price-grid{grid-template-columns:1fr}
  .hero__grid{gap:clamp(8px,2vh,24px)}
  .stage{max-width:min(100%,calc(var(--avail) * .62));padding:14px 40px 30px 24px}
  .incl__head,.faq__head{text-align:center}
  .steps{grid-template-columns:1fr;gap:clamp(10px,2vh,18px);max-width:520px;margin:0 auto}
  .steps::before{display:none}
  .step{text-align:left;display:flex;gap:16px;align-items:center;padding:0}
  .step__n{margin:0;flex-shrink:0;width:52px;height:52px}
  .step__n .i{width:52px;height:52px;padding:14px}
  .step__n b{font-size:20px;border-radius:15px}
  .step p{margin:2px 0 4px}
  .examples{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 10px;scrollbar-width:none;max-width:none}
  .examples::-webkit-scrollbar{display:none}
  .ex{flex:0 0 88%;scroll-snap-align:center}
  .ba{width:min(100%,calc((var(--avail) - 150px) * .68));aspect-ratio:2/3}
  .old{font-size:3.2cqw}.old__body{grid-template-columns:1fr}.old__img{display:none}
  .new{font-size:2.9cqw}
  .new__nav{gap:1em}.new__nav span{display:none}
  .new__hero{max-width:100%;padding-top:5%}
  .new__hero h3{font-size:3.1em}.new__hero p{margin-bottom:1em}
  .new__svc{display:none}
  .new__img{top:auto;left:4%;right:4%;width:auto;height:36%;bottom:3%}
  .new__rev{right:7%;left:auto;bottom:22%}.new__badge{display:none}
  .price-grid{max-width:520px}
  .demo__list,.demo__call,.demo__slots{display:none}
  .demo{gap:clamp(12px,2.4vh,24px)}
  .demo__intro{text-align:center}
  .cta__inner{flex-direction:column-reverse;text-align:center;gap:clamp(12px,3vh,30px)}
  .cta__btns{justify-content:center}
  .logo3d{margin:0}
  .footer__grid{justify-content:center;text-align:center}
  .footer__links{justify-content:center}
}
/* Handy hoch */
@media (max-width:600px) and (orientation:portrait){
  :root{--navh:60px}
  body{font-size:16px}
  .logo small{font-size:7.5px;letter-spacing:.08em}.logo__word{font-size:18px}.logo img{width:42px}
  .nav__inner{gap:10px}
  .nav__phone span{display:none}
  .nav__phone{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);justify-content:center}
  .nav__cta{padding:0 12px;font-size:13.5px;height:38px}
  .dots{right:5px;gap:7px}.dots button{width:6px;height:6px}.dots button.is-active{height:18px}.dots button span{display:none}
  .counter{display:none}
  .next{width:38px;height:38px}
  .tag{display:none}
  .ctas{flex-direction:column;gap:8px}
  .ctas .btn{width:100%}
  .checks{gap:6px 14px}
  .site{padding:10px;font-size:8px}.site__hero h3{font-size:12px}.site__nav span{display:none}.site__cards b{font-size:7.5px}
  .phone{width:96px;border-radius:18px;padding:5px;right:-26px;bottom:-22px}.phone__screen{min-height:150px;font-size:7px;border-radius:14px}.p-hero b{font-size:9px}.p-list span{height:14px}
  .notif{left:-4px;bottom:-24px;max-width:200px;padding:8px 10px 8px 8px;gap:8px}.notif__icon{width:30px;height:30px}.notif b{font-size:12px}.notif span{font-size:10.5px}
  .badge3d{display:none}
  .cube:not(:first-of-type){display:none}
  .benefits{gap:8px}
  .benefit{padding:12px}
  .benefit p{font-size:12.5px}
  .icon3d{border-radius:12px}
  .checklist{gap:7px}
  .checklist li{padding:8px 10px;gap:9px}
  .checklist span{display:none}
  .checklist b{font-size:12.5px}
  .incl__head .sub{display:none}
  .head .sub{font-size:14px}
  .pcard__list,.pay__sub,.hint{display:none}
  .pcard__top{margin-bottom:14px}
  .pay__sum{padding-left:16px}
  .field-row{grid-template-columns:1fr;gap:0}
  .field label{font-size:12.5px;margin-bottom:3px}
  .chips{gap:7px}
  .chip{padding:7px 9px;gap:8px;font-size:13px}
  .acc p{padding-right:0}
  .footer{font-size:13px}
}
/* Querformat mit wenig Höhe (Handy quer) */
@media (orientation:landscape) and (max-height:560px){
  .slide__inner>.head{margin-bottom:10px}
  :root{--navh:52px;--vpad:10px}
  .nav__inner{gap:14px}
  .logo small{display:none}.logo img{width:37px}.logo__word{font-size:17px}
  .nav__phone span{display:none}
  .btn--sm{height:34px;font-size:13px}
  .nav__links a{padding:5px 10px;font-size:13.5px}
  .tag,.checks,.next,.counter{display:none}
  .hero__grid{grid-template-columns:1.1fr .9fr}
  .stage{padding:10px 40px 26px 24px}
  .benefits{grid-template-columns:repeat(4,1fr)}
  .benefit p{display:none}
  .incl{grid-template-columns:.8fr 1.2fr}
  .checklist span{display:none}
  .demo__list,.demo__slots{display:none}
  .pcard__list{display:none}
  .faq{grid-template-columns:.7fr 1.3fr}
  .dots{gap:6px}.dots button{width:7px;height:7px}.dots button.is-active{height:18px}
}
/* ================= Lebendige Darstellungen: sanfte Dauer-Animationen =================
   Nutzt die Einzel-Properties translate / rotate / scale, damit nichts mit vorhandenen
   transform-Werten (Einblenden, Tilt, Flip, 3D-Bühne) kollidiert. Pausiert außerhalb des Bildschirms (s. u.). */
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 var(--amp,-10px)}}
@keyframes sway{0%,100%{rotate:calc(var(--sw,3deg) * -1)}50%{rotate:var(--sw,3deg)}}
@keyframes breathe{0%,100%{scale:1;opacity:var(--o1,1)}50%{scale:var(--sc,1.08);opacity:var(--o2,1)}}
@keyframes popWave{0%,14%,100%{scale:1;rotate:0deg}5%{scale:1.16;rotate:-8deg}9%{scale:.97;rotate:4deg}}
@keyframes ringPulse{0%{box-shadow:0 0 0 0 var(--rc,rgba(11,91,216,.45))}70%,100%{box-shadow:0 0 0 var(--rs,12px) rgba(11,91,216,0)}}
@keyframes shake{0%,78%,100%{rotate:0deg}81%{rotate:-14deg}84%{rotate:12deg}87%{rotate:-8deg}90%{rotate:5deg}93%{rotate:0deg}}
@keyframes sheen{0%,62%{translate:-120% 0}100%{translate:220% 0}}
@keyframes flowX{to{background-position:200% 0}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes smoke{0%{translate:0 0;scale:.5;opacity:0}20%{opacity:.55}100%{translate:30% -260%;scale:1.8;opacity:0}}
@keyframes rain{to{background-position:0 0,0 -150%}}
@keyframes orb{0%,100%{translate:0 0;scale:1}33%{translate:8% 12%;scale:1.12}66%{translate:-10% 4%;scale:.92}}

/* --- Hero: Geräte schweben leicht versetzt --- */
.js .stage .dev{animation:layerIn 1.3s var(--ease) .15s both,drift 9s ease-in-out 1.5s infinite;--amp:-8px}
.js .stage .phone{animation:layerIn 1.3s var(--ease) .35s both,drift 7s ease-in-out 1.7s infinite;--amp:-14px}
.js .stage .notif{animation:layerIn 1.3s var(--ease) 1.1s both,drift 6s ease-in-out 2.4s infinite;--amp:-9px}
.js .stage .badge3d{animation:layerIn 1.3s var(--ease) .8s both,drift 8s ease-in-out 2.1s infinite;--amp:12px}
.notif__icon{animation:shake 5s ease-in-out 3s infinite,ringPulse 5s ease-out 3.2s infinite}
.tag__dot{animation:ringPulse 2.2s ease-out infinite;--rc:rgba(22,160,90,.5)}
.hl{background-image:linear-gradient(100deg,#0a3fae,#0b5bd8 25%,#12a8ff 50%,#0b5bd8 75%,#0a3fae);background-size:200% 100%;animation:flowX 9s linear infinite}
.site__photo{animation:breathe 6s ease-in-out infinite;--sc:1.06}
.site__btns u,.p-call{animation:ringPulse 3s ease-out infinite;--rs:6px;--rc:rgba(255,210,63,.6)}
.p-call{--rc:rgba(22,160,90,.55);animation-delay:1.5s}
.site__stars{animation:breathe 3.5s ease-in-out infinite;--sc:1;--o2:.6}

/* --- Buttons: gelegentlicher Glanz --- */
.btn--primary,.btn--white{position:relative;overflow:hidden;isolation:isolate}
.btn--primary::after,.btn--white::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sheen 6s ease-in-out infinite}
.btn--white::after{background:linear-gradient(100deg,transparent,rgba(11,91,216,.12),transparent)}

/* --- Warum: Icons schweben im Wechsel --- */
.icon3d{animation:drift 5s ease-in-out infinite;--amp:-6px}
.benefit:nth-child(2) .icon3d{animation-delay:-1.25s}.benefit:nth-child(3) .icon3d{animation-delay:-2.5s}.benefit:nth-child(4) .icon3d{animation-delay:-3.75s}
.icon3d::after{background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 45%),linear-gradient(100deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%) no-repeat;background-size:100% 100%,250% 100%;animation:flowX 5s ease-in-out infinite}

/* --- Alles drin: Icons "ploppen" nacheinander auf (Welle) --- */
.checklist i{animation:popWave 6s var(--ease) infinite}
.checklist li:nth-child(2) i{animation-delay:.3s}.checklist li:nth-child(3) i{animation-delay:.6s}.checklist li:nth-child(4) i{animation-delay:.9s}.checklist li:nth-child(5) i{animation-delay:1.2s}
.checklist li:nth-child(6) i{animation-delay:1.5s}.checklist li:nth-child(7) i{animation-delay:1.8s}.checklist li:nth-child(8) i{animation-delay:2.1s}.checklist li:nth-child(9) i{animation-delay:2.4s}.checklist li:nth-child(10) i{animation-delay:2.7s}

/* --- Vorher / Nachher --- */
.b-light{animation:breathe 5s ease-in-out infinite;--sc:1;--o2:.55}
.b-shower i::after{background:repeating-linear-gradient(90deg,rgba(130,190,210,.45) 0 1px,transparent 1px 14%),repeating-linear-gradient(180deg,transparent 0 6%,rgba(255,255,255,.7) 6% 8%,transparent 8% 14%);background-size:100% 100%,100% 300%;animation:rain 1.4s linear infinite}
.b-plant{transform-origin:50% 100%;animation:sway 4s ease-in-out infinite;--sw:2.5deg}
.new__rev{animation:drift 6s ease-in-out infinite;--amp:-.5em}
.new__badge{animation:drift 7s ease-in-out -2s infinite;--amp:.4em}
.new__btns u{animation:ringPulse 3s ease-out infinite;--rs:.5em;--rc:rgba(27,138,143,.5)}
.old__wip span{animation:blink 1.1s steps(1) infinite}
.ba__line span{animation:ringPulse 2.4s ease-out infinite;--rc:rgba(255,255,255,.8)}

/* --- Beispiele --- */
.g-sun{animation:breathe 5s ease-in-out infinite;--sc:1.18}
.g-tree{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite;--sw:2deg}
.g-tree--2{animation-duration:6s;animation-delay:-2s}
.g-tag{animation:drift 5s ease-in-out infinite;--amp:-.35em}
.r-chimney::before,.r-chimney::after{content:"";position:absolute;left:-30%;top:-60%;width:160%;aspect-ratio:1;border-radius:50%;background:rgba(220,228,240,.5);filter:blur(2px);animation:smoke 4s ease-out infinite}
.r-chimney::after{animation-delay:-2s}
.r-window{animation:breathe 4s ease-in-out infinite;--sc:1;--o2:.75}
.r-sky{background-size:100% 160%;animation:skyShift 12s ease-in-out infinite alternate}
@keyframes skyShift{from{background-position:0 0}to{background-position:0 100%}}
.w-lamp{transform-origin:50% 0;animation:sway 4.5s ease-in-out infinite;--sw:4deg}
.w-plant::before{transform-origin:50% 100%;animation:sway 5s ease-in-out infinite;--sw:3deg}
.m-btns u{animation:ringPulse 3.2s ease-out infinite;--rs:.5em;--rc:color-mix(in srgb,var(--c) 55%,transparent)}
.ex:nth-child(2) .m-btns u{animation-delay:1s}.ex:nth-child(3) .m-btns u{animation-delay:2s}

/* --- Ablauf: Linie fließt, Schritte schweben als Welle --- */
.steps::before{animation:dash 1.2s linear infinite}
@keyframes dash{to{background-position:14px 0}}
.step__n{animation:drift 4s ease-in-out infinite;--amp:-6px}
.step:nth-child(2) .step__n{animation-delay:-1s}.step:nth-child(3) .step__n{animation-delay:-2s}.step:nth-child(4) .step__n{animation-delay:-3s}

/* --- Preis --- */
.pcard__top::before{animation:orb 10s ease-in-out infinite}
.pcard__label .i{animation:breathe 2.6s ease-in-out infinite;--sc:1.2}
.pay__line{overflow:hidden}
.pay.is-in .pay__line::after{content:"";position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(transparent,rgba(255,255,255,.9),transparent);animation:glint 3s ease-in-out 2.4s infinite;translate:0 -100%}
@keyframes glint{0%{translate:0 -100%}60%,100%{translate:0 340%}}
.pay.is-in .pay__icon{animation:ringPulse 4.5s ease-out infinite;animation-delay:calc(2.5s + var(--i) * 1.5s)}

/* --- Demo (dunkel): leuchtende Flächen wandern --- */
.slide--dark{isolation:isolate}
.slide--dark::before,.slide--dark::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(40px)}
.slide--dark::before{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,rgba(18,168,255,.22),transparent 65%);animation:orb 16s ease-in-out infinite}
.slide--dark::after{width:50vw;height:50vw;right:-14vw;bottom:-18vw;background:radial-gradient(circle,rgba(11,91,216,.3),transparent 65%);animation:orb 20s ease-in-out -7s infinite reverse}
.demo__call a .i{animation:shake 4s ease-in-out 1s infinite}

/* --- Abschluss: Verlauf bewegt sich, Lichtkugeln --- */
.cta{position:relative;isolation:isolate;background-image:linear-gradient(120deg,#0a3fae 0%,#0b5bd8 25%,#12a8ff 50%,#0b5bd8 75%,#0a3fae 100%);background-size:200% 200%;animation:ctaFlow 14s ease-in-out infinite alternate}
@keyframes ctaFlow{from{background-position:0% 50%}to{background-position:100% 50%}}
.cta::before,.cta::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%)}
.cta::before{width:420px;height:420px;left:-120px;top:-160px;animation:orb 13s ease-in-out infinite}
.cta::after{width:360px;height:360px;right:18%;bottom:-200px;animation:orb 17s ease-in-out -5s infinite reverse}

/* ---------- Performance: Endlos-Animationen nur, solange die Folie sichtbar ist ---------- */
.js .slide:not(.is-vis) *,.js .slide:not(.is-vis) *::before,.js .slide:not(.is-vis) *::after{animation-play-state:paused!important}

/* ================= Fließ-Modus: Handy & flache Bildschirme =================
   Statt "1 Folie = 1 Bildschirm" (skaliert, Inhalte versteckt) normales Scrollen:
   alles sichtbar, lesbare Schriftgrößen, native Scroll-Performance. Gleiche Query wie in app.js (FLOW). */
@media (max-width:820px),(max-height:560px){
  html,body{overscroll-behavior:auto}
  html{scroll-padding-top:var(--navh);scroll-behavior:smooth}
  body{font-size:16px}
  .nav{background:rgba(255,255,255,.97);backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav__inner{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
  .dots,.counter,.next{display:none}

  .slide{height:auto;display:block;padding:clamp(56px,12vw,88px) max(var(--pad),env(safe-area-inset-right)) clamp(56px,12vw,88px) max(var(--pad),env(safe-area-inset-left))}
  .slide--hero{padding-top:calc(var(--navh) + clamp(24px,6vw,48px))}
  .slide__inner,.cta__inner{transform:none!important;width:auto!important;min-height:0!important;max-width:1200px;margin:0 auto}
  .slide__inner>.head{margin-bottom:clamp(28px,7vw,44px)}

  h1{font-size:clamp(31px,8.2vw,50px)}
  h2{font-size:clamp(26px,6.6vw,40px)}
  .sub,.slide--hero .sub{font-size:clamp(16px,4.2vw,18px)}
  .eyebrow{font-size:14px}
  .btn{height:50px;font-size:16px}
  .btn--lg{height:54px;font-size:16.5px}
  .btn--sm{height:40px;font-size:14px}
  .nav__cta{height:40px;padding:0 14px;font-size:14px}
  .sub a,.demo__call a,.footer__links a{white-space:nowrap}

  /* Start */
  .tag{display:inline-flex;font-size:13px}
  .checks{display:flex;font-size:15px}
  .ctas{margin-top:26px}
  .stage{max-width:min(100%,440px);margin:8px auto 0}

  /* Warum */
  .benefit h3{font-size:18px}
  .benefit p{display:block;font-size:15px}
  .trades span{font-size:14px}

  /* Alles drin */
  .incl{gap:28px}
  .incl__head .sub{display:block}
  .checklist b{font-size:15.5px}
  .checklist span{display:block;font-size:14px}

  /* Vorher / Nachher */
  .hint{display:flex;font-size:14px}

  /* Beispiele */
  .examples{max-width:none}
  .ex__meta b{font-size:16px}

  /* Ablauf */
  .step h3{font-size:18px}
  .step p{font-size:15px}

  /* Preis */
  .pcard__list{display:grid}
  .pcard__list li{font-size:15px}
  .pay__sub{display:block;font-size:15.5px}
  .pay h3{font-size:24px}

  /* Demo */
  .demo__intro{text-align:left}
  .demo__list,.demo__call,.demo__slots{display:flex}
  .demo__list{font-size:16px}
  .demo__call a{font-size:22px}
  .form-card{min-height:0}
  legend{font-size:22px}
  .chip{font-size:15px;padding:11px 12px;min-height:52px}
  .field label{font-size:14px}
  .field input{height:50px}
  .consent{font-size:13.5px}

  /* FAQ */
  .acc summary{font-size:17px;padding:18px 0}
  .acc p{font-size:15.5px}

  /* Abschluss */
  .slide--end{padding:0}
  .cta{display:block}
  .cta{padding:clamp(56px,12vw,88px) max(var(--pad),env(safe-area-inset-right)) clamp(56px,12vw,88px) max(var(--pad),env(safe-area-inset-left))}
  .cta h2{font-size:clamp(28px,7vw,44px)}
  .cta p{font-size:17px}
  .logo3d{width:min(52vw,240px)}
  .footer{padding:28px max(var(--pad),env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left))}
  .footer__links a{min-height:36px}

  /* Reveal schlichter und günstiger */
  .js .reveal{transform:translateY(22px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
}
/* Handy/Tablet hoch im Fließ-Modus */
@media (max-width:820px) and (orientation:portrait){
  .ba{width:min(100%,430px)}
  .price-grid{gap:36px}
}
/* Handy quer im Fließ-Modus: 16:9-Vergleich, Preis-Karte & Formular nebeneinander bleiben lesbar */
@media (orientation:landscape) and (max-height:560px){
  .ba{width:min(100%,680px)}
  .benefit p{display:block}
  .tag,.checks{display:flex}
  .tag{display:inline-flex}
}
/* Schmale Handys: Karten einspaltig, Icon links */
@media (max-width:540px){
  .nav__inner{gap:8px}
  .nav__cta{padding:0 12px;font-size:13.5px;height:40px}
  .benefits{grid-template-columns:1fr;gap:10px}
  .benefit{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;padding:18px}
  .benefit .icon3d{grid-row:span 2;margin:2px 0 0;width:48px;height:48px;transform:none}
  .benefit h3{margin-bottom:4px}
  .checklist{grid-template-columns:1fr;gap:8px}
  .checklist li{padding:12px 14px;gap:12px}
  .checklist i{width:38px;height:38px}
  .pcard__list{grid-template-columns:1fr}
  .chips{grid-template-columns:1fr}
}
/* Sehr schmale Handys (iPhone SE & Co.) */
@media (max-width:380px){
  .logo small{display:none}
  .logo img{width:38px}
  .nav__phone{width:38px;height:38px}
  .nav__cta{padding:0 10px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js .in-hero{opacity:1;transform:none}
  html{scroll-behavior:auto!important}
  .pay__card{opacity:1;transform:none}
}