/* datayeah.de – keine externen Ressourcen, keine Cookies, keine Tracker */
:root{
  --bg:#FBFBFD; --bg-2:#F3F4F8; --ink:#0E1116; --muted:#596070; --faint:#8A90A0; --line:rgba(14,17,22,.09);
  --teal:#14B8A6; --teal-2:#0891B2; --sun:#FF8A3D; --rose:#F5387F; --amber:#FF6B35; --coal:#1C1D22;
  --g-pass:linear-gradient(135deg,#2DD4BF,#0891B2);
  --g-fami:linear-gradient(135deg,#FF8A3D,#F5387F);
  --g-medi:linear-gradient(135deg,#FF8A3D,#FF5A1F);
  --g-brand:linear-gradient(100deg,#14B8A6 0%,#0891B2 28%,#F5387F 68%,#FF8A3D 100%);
  --display:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --r:28px; --shadow:0 30px 80px -30px rgba(20,30,60,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;text-wrap:balance}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
.grad{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:sheen 8s ease-in-out infinite alternate}
@keyframes sheen{to{background-position:100% 0}}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
:focus-visible{outline:2px solid var(--teal-2);outline-offset:3px;border-radius:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.5rem;border-radius:999px;font-family:var(--display);font-weight:700;font-size:.95rem;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s,background .2s}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 12px 30px -12px rgba(14,17,22,.6)}
.btn-line{background:rgba(255,255,255,.7);border-color:var(--line);backdrop-filter:blur(10px)}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.link{font-family:var(--display);font-weight:700;display:inline-flex;gap:.4rem;align-items:center}
.link svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.link:hover svg{transform:translateX(4px)}

/* Reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* Header: Logo + Venn-Menü (das Logo entfaltet sich zur Navigation) */
header.nav{position:fixed;inset:0 0 auto 0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(16px,3vw,32px);pointer-events:none}
header.nav>*{pointer-events:auto}
.logo{display:flex;align-items:center;font-family:var(--display);font-weight:800;font-size:1.28rem;letter-spacing:-.04em;padding:.42rem 1rem .42rem .5rem;border-radius:999px;background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);box-shadow:0 8px 24px -14px rgba(14,17,22,.3),0 0 0 1px rgba(14,17,22,.05);transition:color .4s,background .4s,box-shadow .4s}
.logo svg{width:30px;height:30px;margin-right:.55rem}
.logo b{font-weight:800;background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav.on-dark .logo,.nav.open .logo{color:var(--ink)}
.nav.on-dark:not(.open) .logo{color:#fff;background:rgba(14,17,22,.55);box-shadow:0 8px 24px -14px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.1)}
.nav.open .logo{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.menubtn{display:flex;align-items:center;gap:.75rem;height:52px;padding:0 8px 0 20px;border:0;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--display);font-weight:700;font-size:.92rem;cursor:pointer;box-shadow:0 10px 30px -12px rgba(14,17,22,.35),0 0 0 1px rgba(14,17,22,.06);transition:transform .4s var(--spring),box-shadow .3s}
.menubtn:hover{transform:scale(1.05)}
.menubtn .mt{position:relative;display:grid}
.menubtn .mt span{grid-area:1/1;transition:opacity .3s,transform .4s var(--ease)}
.menubtn .mt .x{opacity:0;transform:translateY(8px)}
.nav.open .menubtn .mt .o{opacity:0;transform:translateY(-8px)}
.nav.open .menubtn .mt .x{opacity:1;transform:none}
.mi{position:relative;width:38px;height:38px;border-radius:50%;background:var(--bg-2);isolation:isolate;transition:transform .6s var(--spring)}
.mi i{position:absolute;width:16px;height:16px;border-radius:50%;mix-blend-mode:multiply;transition:transform .55s var(--spring)}
.mi i:nth-child(1){background:var(--teal);left:6px;top:7px}
.mi i:nth-child(2){background:var(--rose);left:16px;top:7px}
.mi i:nth-child(3){background:var(--sun);left:11px;top:15px}
.menubtn:hover .mi i:nth-child(1){transform:translate(-3px,-3px)}
.menubtn:hover .mi i:nth-child(2){transform:translate(3px,-3px)}
.menubtn:hover .mi i:nth-child(3){transform:translateY(4px)}
.nav.open .mi{transform:rotate(180deg)}
.nav.open .mi i{transform:translate(0,0)!important}
.nav.open .mi i:nth-child(1){transform:translate(3px,2px)!important}
.nav.open .mi i:nth-child(2){transform:translate(-3px,2px)!important}

.menu{position:fixed;inset:0;z-index:60;overflow:hidden;background:radial-gradient(70% 60% at 30% 20%,#E6FAF6 0%,transparent 60%),radial-gradient(60% 60% at 80% 30%,#FFE6EF 0%,transparent 60%),radial-gradient(60% 60% at 50% 90%,#FFEBDD 0%,transparent 60%),#FBFBFD;clip-path:circle(0 at var(--ox,100%) var(--oy,0));visibility:hidden;transition:clip-path .5s cubic-bezier(.7,0,.2,1),visibility 0s .5s}
.menu.open{clip-path:circle(160vmax at var(--ox,100%) var(--oy,0));visibility:visible;transition:clip-path .55s cubic-bezier(.6,0,.2,1),visibility 0s}
.venn{--R:min(29vw,23vh,230px);--oy:3vh;position:absolute;inset:0;isolation:isolate;transition:translate .3s ease-out;pointer-events:none}
.origin{position:absolute;left:50%;top:calc(50% + var(--oy));width:0;height:0}
.cl{position:absolute;inset:0;pointer-events:none}
.cl.goo{filter:url(#goo)}
.venn .c{position:absolute;display:block;pointer-events:auto;width:calc(var(--R)*2);height:calc(var(--R)*2);left:calc(50% + var(--x)*var(--R) - var(--R));top:calc(50% + var(--oy) + var(--y)*var(--R) - var(--R));border-radius:50%;mix-blend-mode:multiply;transform:translate(var(--dx,0),var(--dy,0)) scale(.05);opacity:0;transition:transform .45s cubic-bezier(.6,-.3,.75,.2),opacity .2s .3s,translate .7s var(--spring),scale .7s var(--spring);cursor:pointer;outline-offset:-6px}
.venn .c::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--col)}
.menu.open .venn .c{opacity:1;transform:none;animation:fly 1s var(--dl) both;transition:opacity .15s var(--dl),translate .7s var(--spring),scale .7s var(--spring)}
.menu.open .venn .c::before{animation:float 8s ease-in-out 1.3s infinite alternate}
.c1{--x:-.55;--y:-.32;--dl:.02s;--col:var(--teal)}
.c2{--x:.55;--y:-.32;--dl:.07s;--col:var(--rose)}
.c3{--x:0;--y:.62;--dl:.12s;--col:var(--sun)}
.c2::before{animation-delay:2s!important;animation-duration:9s!important}.c3::before{animation-delay:3s!important;animation-duration:10s!important}
@keyframes fly{
  0%{transform:translate(var(--dx),var(--dy)) scale(.04);opacity:0;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  8%{opacity:1}
  34%{transform:translate(calc(var(--dx)*.16),calc(var(--dy)*.02)) scale(.8,.6);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  55%{transform:translate(calc(var(--dx)*-.025),calc(var(--dy)*-.045)) scale(1.2,1.1);animation-timing-function:ease-in-out}
  68%{transform:translate(0,calc(var(--dy)*.01)) scale(.9,1.06)}
  80%{transform:scale(1.05,.97)}
  90%{transform:scale(.99,1.01)}
  100%{transform:none;opacity:1}}
@keyframes float{0%{scale:1;translate:0 0}50%{scale:1.03;translate:calc(var(--R)*.02) calc(var(--R)*-.03)}100%{scale:.985;translate:calc(var(--R)*-.02) calc(var(--R)*.025)}}
.venn:has(.c:hover) .c:not(:hover){scale:.955}
.venn:has(.c1:hover) .c2{translate:calc(var(--R)*.09) calc(var(--R)*-.04)}
.venn:has(.c1:hover) .c3{translate:calc(var(--R)*.05) calc(var(--R)*.09)}
.venn:has(.c2:hover) .c1{translate:calc(var(--R)*-.09) calc(var(--R)*-.04)}
.venn:has(.c2:hover) .c3{translate:calc(var(--R)*-.05) calc(var(--R)*.09)}
.venn:has(.c3:hover) .c1{translate:calc(var(--R)*-.05) calc(var(--R)*-.09)}
.venn:has(.c3:hover) .c2{translate:calc(var(--R)*.05) calc(var(--R)*-.09)}
.venn .c:hover{scale:1.08}
.rip{position:absolute;left:var(--ox,100%);top:var(--oy,0);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none}
.rip.r2{border-color:var(--rose)}.rip.r3{border-color:var(--sun)}
.menu.open .rip{animation:rip .9s cubic-bezier(.2,.7,.2,1) both}
.menu.open .rip.r2{animation-delay:.08s}.menu.open .rip.r3{animation-delay:.16s}
@keyframes rip{0%{transform:scale(.2);opacity:.8}100%{transform:scale(22);opacity:0}}
.lbl{position:absolute;left:calc(50% + var(--x)*var(--R));top:calc(50% + var(--oy) + var(--y)*var(--R));translate:-50% -50%;text-align:center;color:#fff;pointer-events:none;opacity:0;transform:translateY(16px) scale(.85);transition:opacity .3s,transform .3s;font-family:var(--display)}
.menu.open .lbl{opacity:1;transform:none;transition:opacity .4s var(--dl),transform .7s cubic-bezier(.34,1.56,.5,1) var(--dl)}
.lbl b{display:block;font-weight:800;font-size:clamp(1.05rem,min(2.7vw,3.5vh),2.2rem);letter-spacing:-.03em;line-height:1}
.lbl small{display:block;white-space:nowrap;margin-top:.45rem;font-family:var(--body);font-weight:500;font-size:clamp(.7rem,1.25vw,.95rem);opacity:.85}
.lbl.l1{--x:-.95;--y:-.64;--dl:.42s}
.lbl.l2{--x:.95;--y:-.64;--dl:.48s}
.lbl.l3{--x:0;--y:1.1;--dl:.54s}
.core{position:absolute;left:calc(50% - var(--R)*.25);top:calc(50% + var(--oy) - var(--R)*.27);pointer-events:auto;width:calc(var(--R)*.5);height:calc(var(--R)*.5);border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(.78rem,min(1.6vw,2.2vh),1.15rem);letter-spacing:-.01em;transform:scale(0);transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 0 0 0 rgba(255,255,255,.55)}
.menu.open .core{transform:none;transition:transform .7s cubic-bezier(.34,1.7,.5,1) .6s,box-shadow .3s;animation:ringc 2.6s ease-out 1.6s infinite}
@keyframes ringc{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}80%,100%{box-shadow:0 0 0 22px rgba(255,255,255,0)}}
.core:hover{transform:scale(1.14)!important}
.mfoot{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted);opacity:0;transition:opacity .3s}
.menu.open .mfoot{opacity:1;transition:opacity .5s .6s}
.mfoot a:hover{color:var(--ink)}
body.noscroll{overflow:hidden}
@media(max-width:820px){.venn{--R:min(29vw,21vh);--oy:2vh}.menubtn{height:48px;padding-left:16px}.mi{width:34px;height:34px}.mi i{transform:scale(.9)}.lbl.l1{--x:-.98;--y:-.7}.lbl.l2{--x:.98;--y:-.7}}

/* Hero */
.hero{position:relative;min-height:100svh;padding:120px 0 60px;display:flex;align-items:center;overflow:hidden}
.blobs{position:absolute;inset:0;z-index:0;pointer-events:none}
.blobs i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;will-change:transform;animation:drift 18s ease-in-out infinite alternate}
.blobs .b1{width:46vw;height:46vw;left:-10vw;top:-8vw;background:radial-gradient(circle,#5EEAD4,transparent 65%)}
.blobs .b2{width:42vw;height:42vw;right:-8vw;top:6vw;background:radial-gradient(circle,#FDBA74,transparent 65%);animation-delay:-6s}
.blobs .b3{width:40vw;height:40vw;left:30vw;bottom:-18vw;background:radial-gradient(circle,#F9A8D4,transparent 65%);animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4vw,3vw) scale(1.12)}}
.hero .wrap{width:100%;position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:1.6rem;align-items:flex-start}
.hero h1{font-weight:800;font-size:clamp(2.9rem,6.6vw,5.6rem);line-height:.98}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.15em}
.hero h1 .l>span{display:inline-block;padding-bottom:.16em;transform:translateY(110%);animation:up 1.1s var(--ease) forwards}
.hero h1 .l:nth-child(2)>span{animation-delay:.12s}
.hero h1 .l:nth-child(3)>span{animation-delay:.24s}
@keyframes up{to{transform:none}}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--muted);max-width:30rem}
.hero .lead,.hero .cta{opacity:0;animation:fade 1s .55s var(--ease) forwards}
.hero .cta{animation-delay:.7s}
.cta{display:flex;gap:.8rem;flex-wrap:wrap}
@keyframes fade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Hero-Bühne */
.stage{position:relative;height:clamp(420px,52vw,620px);opacity:0;animation:fade 1.2s .35s var(--ease) forwards}
.stage>*{position:absolute;will-change:transform;transition:transform .25s ease-out}
.float{animation:bob 7s ease-in-out infinite alternate}
@keyframes bob{from{translate:0 -8px}to{translate:0 10px}}
.phone{border-radius:2.4rem;padding:8px;background:linear-gradient(145deg,#2b2d35,#0b0c10);box-shadow:0 50px 90px -30px rgba(30,20,60,.5),inset 0 0 0 1px rgba(255,255,255,.14)}
.phone img{border-radius:1.9rem;width:100%;height:auto;background:#0a0a14}
.stage .ph{left:34%;top:0;width:clamp(170px,21vw,255px);z-index:2}
.card{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:24px}
/* Passwort-Karte */
.stage .pw{left:0;top:16%;width:clamp(210px,24vw,290px);z-index:3;padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.8rem;animation-duration:8s}
.pw .top{display:flex;align-items:center;gap:.7rem}
.pw .top img{width:38px;height:38px;border-radius:11px}
.pw .top b{font-family:var(--display);font-size:.95rem;display:block;line-height:1.1}
.pw .top small{color:var(--faint);font-size:.75rem}
.field{background:var(--bg-2);border-radius:14px;padding:.6rem .8rem;font-size:.82rem}
.field small{display:block;color:var(--faint);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase}
.field span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;font-size:.86rem;display:block;min-height:1.3em}
.bar{height:5px;border-radius:5px;background:var(--bg-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#2DD4BF,#0891B2);animation:fill 5s var(--ease) infinite}
@keyframes fill{0%{width:8%}55%,90%{width:100%}100%{width:8%}}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:700;color:#0F766E;font-family:var(--display)}
.badge svg{width:14px;height:14px}
/* Foto-Stapel */
.stage .ph2{right:0;bottom:6%;width:clamp(180px,21vw,250px);z-index:3;padding:.6rem;animation-delay:-3s;animation-duration:9s}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:16px;overflow:hidden}
.mini svg{width:100%;aspect-ratio:1;height:auto}
.ph2 .cap{display:flex;align-items:center;justify-content:space-between;padding:.6rem .35rem .2rem;font-family:var(--display);font-weight:700;font-size:.82rem}
.ph2 .cap span{display:inline-flex;gap:.3rem;align-items:center;color:#C2410C;font-size:.7rem}
.ph2 .cap svg{width:13px;height:13px}
/* Icons schweben */
.stage .ic{width:64px;height:64px;border-radius:19px;box-shadow:0 20px 40px -14px rgba(0,0,0,.4);z-index:4}
.stage .ic1{right:14%;top:2%;animation-delay:-1s}
.stage .ic2{left:2%;bottom:6%;animation-delay:-4s}
@media(max-width:940px){.hero{padding-top:100px}.hero .wrap{grid-template-columns:1fr;gap:1rem}.stage{height:min(112vw,540px);max-width:560px;margin-inline:auto;width:100%}.stage .ph{left:48%;width:38%}.stage .pw{width:56%;top:24%}.stage .pw .card{padding:.85rem!important;gap:.6rem!important}.stage .ph2{width:40%;right:0;bottom:0}.stage .ic{width:52px;height:52px;border-radius:16px}.stage .ic2{left:auto;right:46%;bottom:2%}}
.scroll-hint{position:absolute;left:50%;bottom:22px;z-index:2;width:22px;height:36px;border:2px solid rgba(14,17,22,.25);border-radius:14px;translate:-50% 0}
.scroll-hint::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;background:var(--ink);translate:-50% 0;animation:sc 1.8s infinite}
@keyframes sc{0%{opacity:0;translate:-50% 0}30%{opacity:1}100%{opacity:0;translate:-50% 12px}}
@media(max-width:940px){.scroll-hint{display:none}}

/* Trust */
.trust{padding:3.5rem 0}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.stat{text-align:left;border-top:1px solid var(--line);padding-top:1.1rem}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.04em;line-height:1}
.stat span{display:block;margin-top:.5rem;color:var(--muted);font-size:.95rem}
@media(max-width:760px){.trust .wrap{grid-template-columns:1fr 1fr}}

/* Statement */
.statement{padding:6rem 0 5rem}
.statement h2{font-weight:800;font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.04;max-width:20ch}
.statement .w{color:rgba(14,17,22,.14);transition:color .4s var(--ease)}
.statement .w.on{color:var(--ink)}
.statement .w.hi.on{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* App-Sektionen */
.app{position:relative;padding:7rem 0;overflow:hidden}
.app .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:4rem;align-items:center}
.app.flip .wrap{grid-template-columns:1.1fr 1fr}
.app.flip .copy{order:2}
.app .copy{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.app .appicon{width:72px;height:72px;border-radius:21px;box-shadow:0 22px 40px -16px var(--glow,rgba(0,0,0,.4))}
.app h2{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.02}
.app .name{font-family:var(--display);font-weight:800;letter-spacing:-.03em;font-size:1.05rem}
.app .desc{color:var(--muted);font-size:1.15rem;max-width:30rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips span{font-size:.85rem;font-weight:500;padding:.4rem .85rem;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);backdrop-filter:blur(6px)}
.replace{font-size:.9rem;color:var(--faint)}
.replace s{text-decoration-color:rgba(14,17,22,.35)}
.visual{position:relative;min-height:520px}
.visual>*{position:absolute}

/* passyeah */
.app.pass{background:linear-gradient(180deg,var(--bg),#ECFBF8 40%,#E6F6FA 80%,var(--bg));--glow:rgba(8,145,178,.55)}
.app.pass .name{color:#0F766E}
.vault{position:relative!important;width:100%;max-width:640px;margin-inline:auto;border-radius:22px;background:#fff;box-shadow:0 50px 100px -40px rgba(8,80,110,.45),0 0 0 1px rgba(8,145,178,.1);overflow:hidden;display:grid;grid-template-columns:150px 1fr}
.vault .bar-top{grid-column:1/-1;display:flex;gap:7px;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#FAFCFD}
.vault .bar-top i{width:11px;height:11px;border-radius:50%;background:#E5E7EB}
.vault .bar-top i:nth-child(1){background:#FF5F57}.vault .bar-top i:nth-child(2){background:#FEBC2E}.vault .bar-top i:nth-child(3){background:#28C840}
.vside{padding:1rem .8rem;border-right:1px solid var(--line);background:#F7FBFC;display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:500;color:var(--muted)}
.vside div{padding:.5rem .7rem;border-radius:10px;display:flex;gap:.55rem;align-items:center}
.vside div.on{background:#fff;color:var(--ink);box-shadow:0 2px 10px -4px rgba(0,0,0,.15)}
.vside svg{width:15px;height:15px;flex:none}
.vmain{padding:1rem 1.1rem 1.3rem;display:flex;flex-direction:column;gap:1rem;min-height:340px;position:relative}
.vlist{display:flex;flex-direction:column;gap:.35rem}
.vitem{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:12px;font-size:.85rem;transition:background .3s}
.vitem.on{background:#ECFBF8}
.vitem i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;font-style:normal;font-weight:800;font-family:var(--display);font-size:.8rem;flex:none}
.vitem b{display:block;font-family:var(--display);font-size:.85rem;line-height:1.15}
.vitem small{color:var(--faint);font-size:.74rem}
.vdetail{border-top:1px solid var(--line);padding-top:.9rem;display:grid;gap:.6rem}
.vdetail .row{display:flex;align-items:center;justify-content:space-between;background:var(--bg-2);border-radius:12px;padding:.6rem .8rem;font-size:.85rem}
.vdetail .row small{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.vdetail .row span.m{font-family:ui-monospace,Menlo,monospace;letter-spacing:.05em}
.copybtn{font-family:var(--display);font-weight:700;font-size:.72rem;padding:.3rem .65rem;border-radius:8px;background:#fff;color:#0F766E;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.lock{position:absolute;inset:0;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;transition:opacity .7s var(--ease),visibility .7s;z-index:3;font-family:var(--display);font-weight:700;font-size:.9rem}
.lock.open{opacity:0;visibility:hidden}
.lock .k{width:64px;height:64px;border-radius:20px;background:var(--g-pass);display:grid;place-items:center;color:#fff;box-shadow:0 20px 40px -14px rgba(8,145,178,.6)}
.lock .k svg{width:30px;height:30px}
.lock .dots{display:flex;gap:6px}
.lock .dots i{width:9px;height:9px;border-radius:50%;background:#CBD5E1;transition:background .2s}
.lock .dots i.f{background:#0891B2}
.tag-float{position:absolute!important;padding:.7rem 1rem;border-radius:16px;font-family:var(--display);font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:.55rem;z-index:4}
.tag-float svg{width:18px;height:18px;color:#0F766E}
.tf1{left:-2%;bottom:6%}.tf2{right:-2%;top:6%}
@media(max-width:940px){.tf1{left:0}.tf2{right:0}}

/* famifant */
.app.fami{background:linear-gradient(180deg,var(--bg),#FFF3EA 45%,#FFEAF1 85%,var(--bg));--glow:rgba(245,56,127,.5)}
.app.fami .name{color:#D9366E}
.fphones{height:600px}
.fphones .phone{width:clamp(170px,19vw,235px);transition:transform .3s ease-out}
.fphones .p1{left:2%;top:60px;rotate:-6deg}
.fphones .p2{left:50%;margin-left:calc(clamp(170px,19vw,235px)/-2);top:0;z-index:2}
.fphones .p3{right:2%;top:80px;rotate:6deg}
.fphones .hand{width:min(310px,58%);left:50%;margin-left:-155px;bottom:-4px;z-index:5;padding:6px;border-radius:24px;background:#141426;box-shadow:0 30px 60px -20px rgba(40,10,60,.6)}
.fphones .hand img{border-radius:19px;width:100%;height:auto}
@media(max-width:940px){.fphones{height:520px}.fphones .hand{margin-left:-130px;width:260px}}

/* fotoyeah */
.app.medi{background:radial-gradient(120% 90% at 80% 0%,#33241f 0%,#17181d 55%,#0d0e12 100%);color:#F5F1EC;--glow:rgba(255,107,53,.6);border-radius:48px;margin:0 12px}
.app.medi .name{color:#FF9B6A}
.app.medi .desc{color:rgba(245,241,236,.7)}
.app.medi .chips span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#F5F1EC}
.app.medi .replace{color:rgba(245,241,236,.5)}
.app.medi .replace s{text-decoration-color:rgba(245,241,236,.4)}
.app.medi .link{color:#fff}
.gallery{position:relative!important;width:100%;max-width:620px;margin-inline:auto;border-radius:26px;background:#101115;padding:12px;box-shadow:0 60px 100px -40px rgba(255,90,31,.35),inset 0 0 0 1px rgba(255,255,255,.1)}
.gallery .hd{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem .9rem;font-family:var(--display)}
.gallery .hd b{font-size:1.05rem}
.gallery .hd span{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;color:#FF9B6A;background:rgba(255,107,53,.12);padding:.3rem .7rem;border-radius:999px}
.gallery .hd svg{width:13px;height:13px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:6px}
.grid .t{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;opacity:0;transform:scale(.86);transition:opacity .7s var(--ease),transform .8s var(--spring);transition-delay:calc(var(--i)*55ms)}
.grid .t:nth-child(5n+2){grid-column:span 2;grid-row:span 2}
.grid.in .t{opacity:1;transform:none}
.grid .t svg{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.grid .t:hover svg{transform:scale(1.12)}
.grid .t .lk{position:absolute;right:6px;bottom:6px;width:20px;height:20px;border-radius:7px;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;transition:opacity .3s}
.grid .t:hover .lk{opacity:1}
.grid .t .lk svg{width:11px;height:11px;color:#fff;transform:none}
.scrub{position:absolute!important;right:-14px;top:70px;bottom:40px;width:6px;border-radius:6px;background:rgba(255,255,255,.08)}
.scrub i{position:absolute;left:-3px;width:12px;height:38px;border-radius:8px;background:var(--amber);top:0;animation:scrub 6s ease-in-out infinite alternate}
@keyframes scrub{to{top:calc(100% - 38px)}}
.tf3{left:-3%;bottom:10%;background:rgba(30,31,38,.85)!important;border-color:rgba(255,255,255,.12)!important;color:#fff}
.tf3 svg{color:#FF9B6A}
.tf4{right:-2%;bottom:-3%;background:rgba(30,31,38,.85)!important;border-color:rgba(255,255,255,.12)!important;color:#fff}
.tf4 svg{color:#FF9B6A}
@media(max-width:940px){.scrub{display:none}.tf3{left:0}.tf4{right:0}}
@media(max-width:940px){.app{padding:5rem 0}.app .wrap,.app.flip .wrap{grid-template-columns:1fr;gap:3rem}.app.flip .copy{order:0}.visual{min-height:0}}

/* Section head */
.head{padding:0 0 3rem;max-width:44rem}
.head h2{font-weight:800;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.04;margin-top:.7rem}
.head p{color:var(--muted);margin-top:1rem;font-size:1.15rem}

/* Bento */
.services{padding:7rem 0 4rem}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cell{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.7rem;display:flex;flex-direction:column;gap:.6rem;min-height:230px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.cell:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.cell.s2{grid-column:span 2}.cell.s6{grid-column:span 6}.cell.s3{grid-column:span 3}.cell.s4{grid-column:span 4}
.cell h3{font-size:1.35rem;font-weight:800}
.cell p{color:var(--muted);font-size:.98rem;max-width:26rem}
.cell .ico{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;margin-bottom:auto}
.cell .ico svg{width:24px;height:24px}
.cell .deco{position:absolute;right:-30px;bottom:-30px;width:190px;height:190px;border-radius:50%;filter:blur(30px);opacity:.28;transition:transform .8s var(--ease),opacity .5s}
.cell:hover .deco{transform:scale(1.4);opacity:.45}
.cell.dark{background:var(--coal);color:#fff;border-color:transparent}
.cell.dark p{color:rgba(255,255,255,.65)}
@media(max-width:940px){.cell.s2,.cell.s3,.cell.s4{grid-column:span 3}.cell.s6{grid-column:span 6}}
@media(max-width:620px){.bento{grid-template-columns:1fr}.cell.s2,.cell.s3,.cell.s4,.cell.s6{grid-column:auto}.cell{min-height:190px}}

/* Marquee */
.marquee{padding:2.5rem 0 5rem;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:.8rem;width:max-content;animation:mq 42s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track span{font-family:var(--display);font-weight:700;font-size:1.05rem;padding:.7rem 1.3rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}

/* Projekte */
.projects{padding:3rem 0 7rem;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.rail{--pad:max(24px,calc((100vw - 1180px)/2 + 24px));scroll-padding-inline:var(--pad);display:flex;gap:18px;overflow-x:auto;padding:0 var(--pad) 2rem;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.proj{flex:none;width:min(340px,80vw);scroll-snap-align:start;border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.proj:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.proj .art{height:200px;position:relative;overflow:hidden;display:grid;place-items:center;color:#fff}
.proj .num{position:absolute;left:1.3rem;top:.7rem;z-index:1;font-family:var(--display);font-weight:800;font-size:3.2rem;letter-spacing:-.04em;line-height:1;color:rgba(255,255,255,.4)}
.proj .art svg.big{width:64px;height:64px;position:relative;z-index:1;transition:transform .6s var(--spring)}
.proj:hover .art svg.big{transform:scale(1.15) rotate(-4deg)}
.proj .art::before,.proj .art::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.18)}
.proj .art::before{width:220px;height:220px;left:-70px;top:-90px}
.proj .art::after{width:160px;height:160px;right:-40px;bottom:-70px}
.proj .txt{padding:1.3rem 1.4rem 1.6rem}
.proj h3{font-size:1.2rem;font-weight:800}
.proj p{color:var(--muted);font-size:.95rem;margin-top:.35rem}
.proj .tg{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.proj .tg span{font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;background:var(--bg-2);color:var(--muted)}
.railnav{display:flex;gap:.6rem;margin-top:.2rem}
.railnav button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .3s var(--spring),background .2s}
.railnav button:hover{transform:scale(1.08);background:var(--bg-2)}
.railnav svg{width:18px;height:18px}
.headrow{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}

/* CTA */
.cta-sec{padding:2rem 0 7rem;background:var(--bg-2)}
.cta-card{position:relative;overflow:hidden;border-radius:44px;padding:clamp(3rem,7vw,6rem) 1.5rem;text-align:center;background:var(--coal);color:#fff;display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.cta-card::before,.cta-card::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.55;animation:drift 14s ease-in-out infinite alternate}
.cta-card::before{background:radial-gradient(circle,#14B8A6,transparent 65%);left:-160px;top:-200px}
.cta-card::after{background:radial-gradient(circle,#F5387F,transparent 65%);right:-160px;bottom:-220px;animation-delay:-7s}
.cta-card>*{position:relative;z-index:1}
.cta-card h2{font-weight:800;font-size:clamp(2.2rem,5.5vw,4.4rem);line-height:1.02;max-width:16ch}
.cta-card p{color:rgba(255,255,255,.72);max-width:32rem;font-size:1.15rem}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 16px 40px -14px rgba(255,255,255,.5)}

/* Footer */
footer{padding:3rem 0 2.5rem;color:var(--muted);font-size:.9rem;background:var(--bg-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1.2rem 2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:2rem}
footer .links{display:flex;gap:1.5rem;flex-wrap:wrap}
footer a:hover{color:var(--ink)}
footer .de{display:inline-flex;align-items:center;gap:.5rem}

/* Legal */
.legal{max-width:720px;margin:0 auto;padding:130px 24px 80px}
.legal h1{font-weight:800;font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:1.5rem}
.legal h2{font-size:1.25rem;margin:2rem 0 .5rem}
.legal p,.legal li{color:var(--muted)}
.legal a{color:var(--teal-2);text-decoration:underline}
.todo{background:#FFF7D6;padding:.05em .3em;border-radius:5px;color:#7A5B00}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero .lead,.hero .cta,.stage{opacity:1!important;transform:none!important}
  .hero h1 .l>span{transform:none!important}
  .grid .t{opacity:1;transform:none}
  .statement .w{color:var(--ink)}
  html{scroll-behavior:auto}
}

/* Ride or Vibe */
.pony{position:relative;margin:2rem 12px 0;border-radius:48px;overflow:hidden;color:#fff;padding:7rem 0;background:radial-gradient(100% 120% at 100% 0%,#ff6b35 0%,transparent 55%),linear-gradient(135deg,#1e0f4a,#4c1d95 60%,#6d28d9)}
.pony .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:4rem;align-items:center}
.pony .copy{display:flex;flex-direction:column;gap:1.3rem;align-items:flex-start}
.pony .name{font-family:var(--display);font-weight:800;color:#FFC29E;font-size:1.05rem}
.pony h2{font-weight:800;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.02}
.pony .desc{color:rgba(255,255,255,.78);font-size:1.15rem;max-width:30rem}
.pony .chips span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.pony .shots{position:relative;padding-bottom:2.5rem}
.shot{border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.18);background:#000;transition:transform .3s ease-out}
.shot img{width:100%;height:auto}
.shot.small{position:absolute;width:44%;right:-3%;bottom:0;border-radius:18px}
@media(max-width:940px){.pony{padding:5rem 0}.pony .wrap{grid-template-columns:1fr;gap:3rem}}



@media(max-width:620px){.tf3{display:none}}
.field span{overflow:hidden;white-space:nowrap}
@media(max-width:620px){.field span{font-size:.78rem;letter-spacing:.02em}}

/* Sektionen: Intro & neue Produkte */
.apps-intro{padding:6rem 0 0}
.apps-intro .head{padding:0;max-width:44rem}
.tag-float svg{flex:none}
.bar-top span{margin-left:.6rem;font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--faint)}

/* sipyeah */
.app.sipy{background:linear-gradient(180deg,var(--bg),#EEF0FF 40%,#E6F4FD 85%,var(--bg));--glow:rgba(79,70,229,.5)}
.app.sipy .name{color:#4F46E5}
.macwin{position:relative!important;width:100%;max-width:620px;margin-inline:auto;border-radius:22px;background:#fff;box-shadow:0 50px 100px -40px rgba(60,60,200,.45),0 0 0 1px rgba(79,70,229,.1);overflow:hidden}
.macwin .bar-top{display:flex;align-items:center;gap:7px;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#FAFAFF}
.macwin .bar-top i{width:11px;height:11px;border-radius:50%}
.macwin .bar-top i:nth-child(1){background:#FF5F57}.macwin .bar-top i:nth-child(2){background:#FEBC2E}.macwin .bar-top i:nth-child(3){background:#28C840}
.mbody{display:grid;grid-template-columns:150px 1fr;min-height:380px}
.mside{padding:1rem .8rem;border-right:1px solid var(--line);background:#F7F8FF;display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:500;color:var(--muted)}
.mside div{padding:.5rem .7rem;border-radius:10px;display:flex;gap:.55rem;align-items:center}
.mside div.on{background:#fff;color:var(--ink);box-shadow:0 2px 10px -4px rgba(0,0,0,.15)}
.mside svg{width:15px;height:15px}
.mside .reg{margin-top:auto;font-size:.74rem;color:#15803D}
.mside .reg b{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:pulse 2s infinite}
.mmain{padding:1.2rem;display:flex;flex-direction:column;gap:1.1rem;background:linear-gradient(180deg,#fff,#F7F8FF)}
.callcard{display:flex;align-items:center;gap:.8rem;padding:.9rem 1rem;border-radius:20px;background:linear-gradient(135deg,#4F46E5,#0EA5E9);color:#fff;box-shadow:0 24px 40px -20px rgba(79,70,229,.7);animation:ring 3s ease-in-out infinite}
.callcard .av{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-family:var(--display);font-weight:800}
.callcard .who{flex:1}
.callcard .who b{display:block;font-family:var(--display);line-height:1.15}
.callcard .who small{opacity:.8;font-size:.78rem}
.callcard .bt{width:36px;height:36px;border-radius:50%;background:#EF4444}
.callcard .bt.yes{background:#22C55E;animation:pulse 1.5s infinite}
@keyframes ring{0%,100%{transform:none}5%{transform:rotate(-1.2deg)}10%{transform:rotate(1.2deg)}15%{transform:rotate(-1.2deg)}20%{transform:none}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 12px rgba(34,197,94,0)}}
.wave{display:flex;gap:5px;align-items:center;justify-content:center;height:46px}
.wave i{width:5px;border-radius:3px;background:linear-gradient(180deg,#4F46E5,#0EA5E9);height:30%;animation:wv 1.1s ease-in-out infinite}
.wave i:nth-child(2n){animation-delay:-.3s}.wave i:nth-child(3n){animation-delay:-.6s}.wave i:nth-child(4n){animation-delay:-.9s}
@keyframes wv{50%{height:100%}}
.recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.recent li{display:flex;align-items:center;gap:.7rem;padding:.55rem .7rem;border-radius:12px;background:#fff;box-shadow:0 1px 0 var(--line);font-size:.84rem}
.recent li i{width:9px;height:9px;border-radius:50%;background:#22C55E}
.recent li i.m{background:#EF4444}.recent li i.i{background:#0EA5E9}
.recent li b{font-family:var(--display);font-size:.84rem;flex:1}
.recent li span{color:var(--faint);font-size:.76rem}
.tf5{left:-2%;bottom:8%}
@media(max-width:620px){.tf5{bottom:-5%}}

/* gig8 */
.app.g8s{background:radial-gradient(120% 90% at 20% 0%,#0f3b3a 0%,#0b1220 55%,#07080d 100%);color:#F2F7F7;border-radius:48px;margin:2rem 12px;--glow:rgba(45,212,191,.6)}
.app.g8s .name{color:#5EEAD4}
.app.g8s .desc{color:rgba(242,247,247,.72)}
.app.g8s .chips span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#F2F7F7}
.app.g8s .link{color:#fff}
.app.g8s .wrap{position:relative;z-index:1}
.beams{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.beams i{position:absolute;top:-30%;width:26vw;height:140%;background:linear-gradient(180deg,rgba(94,234,212,.28),transparent 70%);transform-origin:50% 0;filter:blur(24px);animation:sway 9s ease-in-out infinite alternate}
.beams i:nth-child(1){left:8%;rotate:-16deg}
.beams i:nth-child(2){left:36%;rotate:4deg;background:linear-gradient(180deg,rgba(245,56,127,.22),transparent 70%);animation-delay:-3s}
.beams i:nth-child(3){right:2%;rotate:18deg;background:linear-gradient(180deg,rgba(99,102,241,.3),transparent 70%);animation-delay:-6s}
@keyframes sway{to{rotate:14deg}}
.dash{position:relative!important;width:100%;max-width:560px;margin-inline:auto;border-radius:26px;background:rgba(16,20,30,.78);backdrop-filter:blur(16px);padding:1.2rem;box-shadow:0 60px 100px -40px rgba(45,212,191,.35),inset 0 0 0 1px rgba(255,255,255,.1)}
.dh{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.dh img{width:34px;height:34px;border-radius:50%}
.dh b{display:block;font-family:var(--display);line-height:1.1}
.dh small{color:rgba(255,255,255,.5);font-size:.74rem}
.live{margin-left:auto;font-size:.7rem;font-weight:700;font-family:var(--display);color:#5EEAD4;background:rgba(45,212,191,.14);padding:.25rem .65rem;border-radius:999px;position:relative}
.live::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#5EEAD4;margin-right:.4rem;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.kpis div{padding:.8rem .9rem;border-radius:16px;background:rgba(255,255,255,.06)}
.kpis b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;letter-spacing:-.03em}
.kpis small{color:rgba(255,255,255,.55);font-size:.72rem}
.dates{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.dates li{display:flex;align-items:center;gap:.9rem;padding:.7rem .9rem;border-radius:14px;background:rgba(255,255,255,.06);font-size:.88rem;opacity:0;animation:li 7s var(--ease) infinite}
.dates li:nth-child(2){animation-delay:.25s}.dates li:nth-child(3){animation-delay:.5s}.dates li:nth-child(4){animation-delay:.75s}
@keyframes li{0%{opacity:0;transform:translateX(16px)}8%,92%{opacity:1;transform:none}100%{opacity:0}}
.dates b{font-family:var(--display);color:#5EEAD4;min-width:3rem}
.dates span{flex:1;font-weight:600}
.dates small{display:block;font-weight:400;color:rgba(255,255,255,.5);font-size:.74rem}
.dates em{font-style:normal;font-size:.7rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:rgba(45,212,191,.16);color:#5EEAD4}
.dates em.o{background:rgba(251,146,60,.16);color:#FDBA74}
.tf6{right:-2%;bottom:-4%;background:rgba(30,34,46,.9)!important;border-color:rgba(255,255,255,.12)!important;color:#fff}
.tf6 svg{color:#5EEAD4}

/* cmsyeah */
.app.cmsy{background:linear-gradient(180deg,var(--bg),#F5F0FF 40%,#FFEFF6 85%,var(--bg));--glow:rgba(139,92,246,.5)}
.app.cmsy .name{color:#7C3AED}
.editor{position:relative!important;width:100%;max-width:620px;margin-inline:auto;border-radius:22px;background:#fff;box-shadow:0 50px 100px -40px rgba(124,58,237,.4),0 0 0 1px rgba(124,58,237,.1);overflow:hidden}
.editor .bar-top{display:flex;align-items:center;gap:7px;padding:.8rem 1rem;border-bottom:1px solid var(--line);background:#FCFAFF}
.editor .bar-top i{width:11px;height:11px;border-radius:50%}
.editor .bar-top i:nth-child(1){background:#FF5F57}.editor .bar-top i:nth-child(2){background:#FEBC2E}.editor .bar-top i:nth-child(3){background:#28C840}
.editor .url{flex:1;margin:0 .8rem!important;text-align:center;background:var(--bg-2);border-radius:999px;padding:.25rem;font-weight:500!important}
.livep{font-size:.7rem;font-weight:700;font-family:var(--display);color:#7C3AED;background:#F3E8FF;padding:.25rem .65rem;border-radius:999px}
.ebody{display:grid;grid-template-columns:130px 1fr;min-height:380px}
.pal{padding:1rem .7rem;border-right:1px solid var(--line);background:#FBF9FF;display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;font-weight:500;color:var(--muted)}
.pal small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:0 .3rem .3rem}
.pal div{padding:.55rem .65rem;border-radius:10px;background:#fff;box-shadow:0 1px 4px -1px rgba(0,0,0,.12);display:flex;gap:.5rem;align-items:center}
.pal svg{width:14px;height:14px;color:#7C3AED}
.canvas{position:relative;padding:1.1rem;background:linear-gradient(135deg,#F5F3FF,#FCE7F3)}
.cb{position:absolute;left:1.1rem;right:1.1rem;border-radius:16px;background:#fff;box-shadow:0 14px 30px -16px rgba(124,58,237,.45)}
.cb.hd{top:1.1rem;height:130px;background:linear-gradient(135deg,#C4B5FD,#F9A8D4);display:flex;flex-direction:column;justify-content:flex-end;gap:.5rem;padding:1rem}
.cb.hd i{display:block;height:10px;border-radius:5px;background:rgba(255,255,255,.85);width:55%}
.cb.hd i+i{width:35%;opacity:.7}
.cb.row{top:170px;height:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;padding:.6rem;background:transparent;box-shadow:none}
.cb.row span{border-radius:12px;background:#fff;box-shadow:0 10px 24px -14px rgba(124,58,237,.45)}
.cb.drag{top:255px;height:74px;animation:dragb 6s ease-in-out infinite}
.cb.drag::after{content:"";position:absolute;left:14px;top:16px;width:42%;height:9px;border-radius:5px;background:#E9D5FF;box-shadow:0 20px 0 #F3E8FF}
@keyframes dragb{0%,12%{transform:none}40%,60%{transform:translate(0,-96px) rotate(-1.5deg);box-shadow:0 30px 44px -14px rgba(124,58,237,.55)}90%,100%{transform:none}}
.canvas .cur{position:absolute;left:44%;top:300px;width:24px;height:24px;animation:curm 6s ease-in-out infinite;z-index:2}
@keyframes curm{0%,12%{transform:none}40%,60%{transform:translate(0,-96px)}90%,100%{transform:none}}
.tf7{right:-2%;bottom:6%}

@media(max-width:940px){.mbody,.ebody{min-height:320px}.tf5{left:0}.tf6,.tf7{right:0}.app.g8s{margin-inline:12px}}
@media(max-width:620px){.mbody{grid-template-columns:1fr}.mside{display:none}.ebody{grid-template-columns:1fr}.pal{display:none}}

/* Hero-Schlagwort rotiert */
.hero h1 em.yeah{font-style:normal}
.rot{display:inline-grid;vertical-align:bottom;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.rot i{grid-area:1/1;font-style:normal;transform:translateY(105%);opacity:0;transition:transform .8s var(--ease),opacity .5s}
.rot i.on{transform:none;opacity:1}
.rot i.out{transform:translateY(-105%);opacity:0}

/* Unterseiten */
.phero{position:relative;padding:150px 0 40px;overflow:hidden}
.phero .blobs i{opacity:.4}
.phero .wrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.phero h1{font-weight:800;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;padding-bottom:.1em}
.phero .lead{max-width:36rem}
.pchips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.pchip{display:flex;align-items:center;gap:.65rem;padding:.4rem 1rem .4rem .4rem;border-radius:999px;background:rgba(255,255,255,.75);border:1px solid var(--line);backdrop-filter:blur(8px);transition:transform .4s var(--spring),box-shadow .3s}
.pchip:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--shadow)}
.pchip img,.pchip i{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff}
.pchip i svg{width:18px;height:18px}
.pchip b{display:block;font-family:var(--display);font-size:.9rem;line-height:1.1}
.pchip small{color:var(--faint);font-size:.72rem}
.logo-s{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.04em;color:var(--ink)}
.logo-s svg{width:24px;height:24px;margin-right:.45rem}
.logo-s b{background:var(--g-brand);-webkit-background-clip:text;background-clip:text;color:transparent}

.portals{padding:1rem 0 6rem}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.portal{position:relative;overflow:hidden;border-radius:40px;padding:clamp(1.6rem,3vw,2.6rem);min-height:540px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.portal:hover{transform:translateY(-8px);box-shadow:0 40px 80px -30px rgba(20,30,60,.4)}
.portal .ptxt{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;position:relative;z-index:1}
.portal h2{font-weight:800;font-size:clamp(2rem,3.8vw,3.2rem);line-height:1.02;max-width:12ch}
.portal p{max-width:26rem;font-size:1.1rem}
.portal.studio{background:linear-gradient(160deg,#E4FBF6,#DDEBFF 60%,#EEE6FF);color:var(--ink)}
.portal.studio p{color:var(--muted)}
.portal.soft{background:radial-gradient(90% 70% at 100% 100%,#ff6b35 0%,transparent 55%),radial-gradient(80% 60% at 0% 100%,#F5387F 0%,transparent 55%),#15161c;color:#fff}
.portal.soft p{color:rgba(255,255,255,.75)}
.portal.soft .eyebrow{color:rgba(255,255,255,.55)}
.portal .pvis{position:relative;height:190px}
.portal .pvis>*{position:absolute}
.pvis .t{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;color:#fff;box-shadow:0 24px 40px -16px rgba(20,30,60,.5);animation:bob 6s ease-in-out infinite alternate;transition:transform .6s var(--spring)}
.pvis .t svg{width:34px;height:34px}
.pvis .t1{left:2%;bottom:10px;background:var(--g-pass);rotate:-8deg}
.pvis .t2{left:20%;bottom:70px;background:var(--g-fami);animation-delay:-2s;rotate:6deg}
.pvis .t3{left:40%;bottom:6px;background:linear-gradient(135deg,#6366F1,#0891B2);animation-delay:-4s;rotate:-4deg}
.pvis .t4{left:58%;bottom:76px;background:linear-gradient(135deg,#A78BFA,#F5387F);animation-delay:-1s;rotate:8deg}
.pvis .t5{left:76%;bottom:14px;background:var(--g-medi);animation-delay:-3s;rotate:-6deg}
.portal.studio:hover .t{transform:translateY(-10px) scale(1.06)}
.pvis .a{width:84px;height:84px;border-radius:26px;box-shadow:0 24px 40px -14px rgba(0,0,0,.55);animation:bob 6s ease-in-out infinite alternate;transition:transform .6s var(--spring)}
.pvis .a1{left:0;bottom:8px;rotate:-8deg}
.pvis .a2{left:19%;bottom:72px;animation-delay:-2s;rotate:6deg}
.pvis .a3{left:38%;bottom:6px;animation-delay:-4s;rotate:-4deg}
.pvis .a4{left:57%;bottom:74px;animation-delay:-1s;rotate:8deg}
.pvis .a5{left:76%;bottom:12px;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem;background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);animation-delay:-3s}
.portal.soft:hover .a{transform:translateY(-10px) scale(1.06)}
@media(max-width:820px){.pgrid{grid-template-columns:1fr}.portal{min-height:460px}.pvis .t,.pvis .a{width:64px;height:64px;border-radius:20px}.pvis .a{width:70px;height:70px}}
@media(max-width:420px){.pvis .t{width:54px;height:54px}.pvis .a{width:58px;height:58px}}

/* ===== Skalierbare Illustrationen ===== */
.artbox{position:relative;width:100%;aspect-ratio:var(--w)/var(--h)}
.art{position:absolute;left:0;top:0;width:calc(var(--w)*1px);height:calc(var(--h)*1px);transform-origin:0 0;scale:var(--s,1)}
@keyframes fadeIn{from{opacity:0}}
@keyframes upk{from{opacity:0;translate:0 24px}}
@keyframes popk{from{opacity:0;scale:.3}}
@keyframes blinkc{0%{opacity:1}50%{opacity:0}}
@keyframes typeln{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Studio-Hero: App setzt sich zusammen */
.studio-hero .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:3rem}
.studio-hero h1{font-size:clamp(2.6rem,5.4vw,4.8rem)}
.pcopy{flex:1;display:flex;flex-direction:column;gap:1.4rem;align-items:flex-start}
.studio-hero .artbox{flex:0 0 min(46%,540px)}
.aphone{position:absolute;left:170px;top:30px;width:200px;height:380px;border-radius:36px;background:#fff;box-shadow:0 40px 70px -26px rgba(30,20,80,.5),0 0 0 9px #1D1F2A;padding:24px 16px 18px;display:flex;flex-direction:column;gap:10px}
.blk{display:block;border-radius:14px;animation:drop 9s var(--d) infinite backwards}
.b-head{height:26px;background:var(--g-pass)}
.b-card{height:96px;background:var(--g-fami)}
.b-card2{height:58px;background:var(--g-medi)}
.b-row{height:30px;background:#EEF0F6}
.b-cta{height:44px;margin-top:auto;background:var(--g-brand)}
@keyframes drop{
  0%{translate:var(--fx) var(--fy);scale:.5;opacity:0;rotate:-14deg}
  8%{opacity:1}
  16%{translate:0 0;scale:1.07;rotate:2deg}
  21%{scale:.98;rotate:0deg}
  25%,88%{translate:0 0;scale:1;opacity:1;rotate:0deg}
  96%,100%{translate:0 0;scale:.96;opacity:0}}
.chipf{position:absolute;display:flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);box-shadow:var(--shadow);font:700 15px var(--display);animation:bob 6s ease-in-out infinite alternate}
.chipf svg{width:18px;height:18px;color:var(--teal-2)}
.chipf.c1{left:14px;top:70px}
.chipf.c2{left:392px;top:150px;animation-delay:-2s}
.chipf.c3{left:6px;top:300px;animation-delay:-4s}
.chipf.c4{left:404px;top:330px;animation-delay:-1s}
.codecard{position:absolute;left:388px;top:22px;width:132px;padding:14px;border-radius:18px;background:#14172a;display:flex;flex-direction:column;gap:9px;box-shadow:0 26px 40px -18px rgba(20,20,60,.6)}
.codecard i{display:block;height:7px;border-radius:4px;width:var(--w);background:var(--c);animation:typeln 3.4s steps(12) infinite alternate}
.codecard i:nth-child(2){animation-delay:.4s}.codecard i:nth-child(3){animation-delay:.8s}.codecard i:nth-child(4){animation-delay:1.2s}

/* ===== Story: So entsteht deine Software ===== */
.story{position:relative;height:520vh;height:520svh}
.story .spin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.sgrid{width:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:center}
.slist h2{font-weight:800;font-size:clamp(1.9rem,3.4vw,3rem);line-height:1.04;margin:.7rem 0 1.8rem}
.slist ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.slist ol::before{content:"";position:absolute;left:0;top:.5rem;bottom:.5rem;width:3px;border-radius:3px;background:var(--line)}
.slist ol::after{content:"";position:absolute;left:0;top:.5rem;width:3px;border-radius:3px;background:var(--g-brand);height:calc((100% - 1rem)*var(--p,0));transition:height .3s}
.sbar{display:none}
.step{display:flex;gap:1rem;align-items:flex-start;padding:.7rem 0 .7rem 1.5rem;cursor:pointer;opacity:.38;transition:opacity .4s}
.step.on{opacity:1}
.step b{font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--faint);padding-top:.32rem;min-width:1.6rem}
.step h3{font-size:1.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.step p{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s;color:var(--muted);font-size:1rem}
.step.on p{max-height:4rem;opacity:1;margin-top:.3rem}
.sdots,.scap{display:none}
.scanvas{border-radius:32px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--bg-2)}
.sc{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;overflow:hidden}
.sc.on{opacity:1;visibility:visible}
.sc.s1{background:linear-gradient(160deg,#FFF7E0,#E6FAF6)}
.sc.s2{background:linear-gradient(160deg,#EEF1FF,#F7ECFF)}
.sc.s3{background:linear-gradient(160deg,#141728,#0B0D18)}
.sc.s4{background:linear-gradient(160deg,#E7F6FF,#E8FBF2)}
.sc.s5{background:linear-gradient(160deg,#FFF0F5,#FFF6E8)}

/* Szene 1: Idee */
.s1 .glow{position:absolute;left:110px;top:-50px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(253,224,71,.55),transparent 65%)}
.sc.on.s1 .glow{animation:glowp 2.4s ease-in-out infinite alternate}
@keyframes glowp{from{scale:.85;opacity:.6}to{scale:1.1;opacity:1}}
.bulb{position:absolute;left:215px;top:40px;width:130px;height:174px;overflow:visible}
.sc.on .draw{stroke-dasharray:420;animation:drawk 1.4s ease-out backwards}
.sc.on .draw.f{stroke-dasharray:70;animation-delay:.9s}
@keyframes drawk{from{stroke-dashoffset:420}}
.sc.on .fillb{animation:fadeIn .8s .9s backwards}
.rays i{position:absolute;left:278px;top:110px;width:5px;height:26px;margin-left:-2px;border-radius:3px;background:#F59E0B;transform:rotate(var(--a)) translateY(-108px)}
.rays i:nth-child(1){--a:-80deg}.rays i:nth-child(2){--a:-53deg}.rays i:nth-child(3){--a:-27deg}.rays i:nth-child(4){--a:0deg}.rays i:nth-child(5){--a:27deg}.rays i:nth-child(6){--a:53deg}.rays i:nth-child(7){--a:80deg}
.sc.on .rays i{animation:rayk 1.2s ease-in-out infinite alternate backwards;animation-delay:calc(1.1s + var(--n,0)*.08s)}
.rays i:nth-child(2n){--n:1}.rays i:nth-child(3n){--n:2}
@keyframes rayk{from{scale:1 .35;opacity:.2}to{scale:1 1;opacity:1}}
.conn{position:absolute;left:0;top:0;width:560px;height:460px}
.conn path{fill:none;stroke:#0E1116;stroke-opacity:.3;stroke-width:2.5;stroke-dasharray:6 9;stroke-linecap:round}
.sc.on .conn path{animation:dashm 1.8s linear infinite}
@keyframes dashm{to{stroke-dashoffset:-30}}
.note{position:absolute;width:112px;height:104px;border-radius:6px 6px 24px 6px;padding:14px;box-shadow:0 18px 30px -14px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:9px}
.note b{width:24px;height:24px;border-radius:50%;background:rgba(14,17,22,.14)}
.note i{display:block;height:7px;border-radius:4px;background:rgba(14,17,22,.28);width:82%}
.note i+i{width:56%}
.n1{left:36px;top:70px;rotate:-8deg;background:#FDE68A}
.n2{left:410px;top:40px;rotate:7deg;background:#FBCFE8}
.n3{left:60px;top:290px;rotate:5deg;background:#A7F3D0}
.n4{left:392px;top:300px;rotate:-6deg;background:#BAE6FD}
.sc.on .note{animation:notepop .9s var(--spring) backwards,bobn 5s 2.6s ease-in-out infinite alternate;animation-delay:calc(.35s + var(--d,0)*.2s),2.6s}
.n2{--d:1}.n3{--d:2}.n4{--d:3}
@keyframes notepop{from{scale:.2;opacity:0;translate:0 40px}}
@keyframes bobn{from{translate:0 -6px}to{translate:0 8px}}
.q{position:absolute;font-family:var(--display);font-weight:800;font-size:46px;color:#14B8A6}
.q1{left:170px;top:60px}.q2{left:370px;top:250px;color:#F5387F}.q3{left:100px;top:210px;color:#FF8A3D}
.sc.on .q{animation:popk .6s var(--spring) backwards,bobn 4s 2s ease-in-out infinite alternate;animation-delay:1.4s,2.2s}
.sc.on .q2{animation-delay:1.7s,2.4s}.sc.on .q3{animation-delay:2s,2.6s}

/* Szene 2: Prototyp */
.wphone{position:absolute;left:175px;top:30px;width:210px;height:400px;border-radius:34px;background:#fff;box-shadow:0 30px 60px -24px rgba(60,40,140,.5),0 0 0 8px #1D1F2A;padding:24px 16px 18px;display:flex;flex-direction:column;gap:10px}
.sk{display:block;border-radius:10px;background:#E5E7EB}
.sk.st{height:8px;width:40%;margin-inline:auto}
.sk.ti{height:18px;width:62%}
.sk.im{height:96px;border-radius:16px;background:linear-gradient(135deg,#E5E7EB,#D1D5DB)}
.sk.ro{height:34px;border-radius:12px}
.sk.cta{height:44px;border-radius:14px;margin-top:auto;position:relative;overflow:hidden;background:#D1D5DB}
.sk.cta b{position:absolute;inset:0;background:var(--g-fami);opacity:0}
.sc.on .sk{animation:upk .6s var(--ease) backwards;animation-delay:calc(.2s + var(--i,0)*.12s)}
.sc.on .sk.cta b{animation:ctaon 5s 1.4s infinite}
@keyframes ctaon{0%,40%{opacity:0}46%,88%{opacity:1}96%,100%{opacity:0}}
.cursor{position:absolute;left:100px;top:346px;width:26px;height:26px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));z-index:3;opacity:0}
.sc.on .cursor{animation:curs 5s 1.4s infinite}
@keyframes curs{0%{translate:110px 120px;opacity:0}10%{opacity:1}36%{translate:0 0;scale:1}42%{scale:.8}48%{scale:1}86%{translate:0 0;opacity:1}96%,100%{translate:0 0;opacity:0}}
.ripple{position:absolute;left:104px;top:352px;width:20px;height:20px;margin:-10px;border:2px solid #F5387F;border-radius:50%;opacity:0}
.sc.on .ripple{animation:rip2 5s 1.4s infinite}
@keyframes rip2{0%,41%{opacity:0;scale:.3}43%{opacity:.9;scale:.3}62%,100%{opacity:0;scale:4.5}}
.toast{position:absolute;left:50%;bottom:74px;translate:-50% 0;background:#0E1116;color:#fff;font:700 13px var(--display);padding:8px 14px;border-radius:999px;display:flex;gap:6px;align-items:center;opacity:0}
.toast svg{width:14px;height:14px;color:#34D399}
.sc.on .toast{animation:toastk 5s 1.4s infinite}
@keyframes toastk{0%,46%{opacity:0;translate:-50% 12px}52%,88%{opacity:1;translate:-50% 0}96%,100%{opacity:0;translate:-50% 0}}
.tagx{position:absolute;font:700 13px var(--display);padding:7px 14px;border-radius:999px;background:#fff;border:2px dashed #8B5CF6;color:#6D28D9;box-shadow:0 10px 24px -12px rgba(109,40,217,.5)}
.tagx.t1{left:20px;top:196px}.tagx.t2{left:420px;top:296px}
.sc.on .tagx{animation:popk .6s var(--spring) backwards;animation-delay:1.3s}
.sc.on .tagx.t2{animation-delay:1.7s}
.conn2{position:absolute;left:0;top:0;width:560px;height:460px}
.conn2 path{fill:none;stroke:#8B5CF6;stroke-width:2.5;stroke-dasharray:6 8;stroke-linecap:round;opacity:.6}
.sc.on .conn2 path{animation:dashm 1.8s linear infinite}

/* Szene 3: Entwicklung */
.editor2{position:absolute;left:28px;top:40px;width:316px;height:282px;border-radius:18px;background:#1A1E33;box-shadow:0 30px 50px -20px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.etop{display:flex;gap:6px;padding:12px 14px;background:#141830}
.etop i{width:9px;height:9px;border-radius:50%;background:#FF5F57}.etop i:nth-child(2){background:#FEBC2E}.etop i:nth-child(3){background:#28C840}
.ecode{position:relative;padding:14px;display:flex;flex-direction:column;gap:11px}
.ecode p{margin:0;display:flex;align-items:center;gap:6px;height:12px}
.ecode u{font:10px ui-monospace,Menlo,monospace;color:#5B6386;text-decoration:none;width:14px;flex:none}
.ecode em{width:14px;flex:none}
.ecode span{display:block;height:8px;border-radius:4px;width:var(--w);background:var(--c)}
.ecode span[style*="0E1116"]{background:#C9CEE8}
.sc.on .ecode p span{animation:typeln .5s steps(12) backwards;animation-delay:calc(.5s + var(--i,0)*.38s)}
.caret{position:absolute;left:206px;top:183px;width:3px;height:14px;border-radius:2px;background:#14B8A6;opacity:0}
.sc.on .caret{animation:blinkc 1s steps(1) 3.9s infinite}
.pprev{position:absolute;left:372px;top:40px;width:160px;height:282px;border-radius:26px;background:#0F1224;box-shadow:0 0 0 6px #262B4A,0 30px 50px -20px rgba(0,0,0,.6);padding:20px 12px;display:flex;flex-direction:column;gap:9px}
.pv{display:block;border-radius:11px}
.pv.p1{height:16px;background:var(--g-pass);--k:0}
.pv.p2{height:88px;background:var(--g-fami);--k:1}
.pv.p3{height:32px;background:#2B3050;--k:2}
.pv.p4{height:32px;background:#2B3050;--k:3}
.pv.p5{height:36px;margin-top:auto;background:var(--g-medi);--k:4}
.sc.on .pv{animation:paint .7s var(--ease) backwards;animation-delay:calc(1.2s + var(--k)*.55s)}
@keyframes paint{from{filter:grayscale(1) brightness(.5);opacity:.45;scale:.92}}
.checks{position:absolute;left:28px;top:348px;display:flex;gap:10px;flex-wrap:wrap}
.chk{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.09);color:#fff;font:700 13px var(--display);border:1px solid rgba(255,255,255,.12)}
.chk svg{width:14px;height:14px;color:#34D399}
.sc.on .chk{animation:popk .5s var(--spring) backwards;animation-delay:calc(3.5s + var(--i,0)*.4s)}

/* Szene 4: Betrieb */
.ecg{position:absolute;left:80px;top:26px;width:400px;height:60px}
.ecg path{fill:none;stroke:#14B8A6;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:150 420}
.sc.on .ecg path{animation:ecgk 2.2s linear infinite}
@keyframes ecgk{from{stroke-dashoffset:150}to{stroke-dashoffset:-420}}
.rack{position:absolute;left:70px;top:112px;width:250px;display:flex;flex-direction:column;gap:12px}
.unit{height:66px;border-radius:14px;background:linear-gradient(180deg,#2A2E3B,#1B1E28);box-shadow:0 18px 30px -14px rgba(0,0,0,.5);display:flex;align-items:center;gap:8px;padding:0 16px}
.sc.on .unit{animation:upk .6s var(--ease) backwards;animation-delay:calc(.2s + var(--k,0)*.14s)}
.unit:nth-child(2){--k:1}.unit:nth-child(3){--k:2}
.led{width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 10px #34D399;flex:none}
.led.l2{background:#FBBF24;box-shadow:0 0 10px #FBBF24}
.sc.on .led{animation:blinkc 1.6s ease-in-out infinite}
.sc.on .led.l2{animation-delay:-.7s}
.unit b{flex:1;height:8px;border-radius:3px;background:repeating-linear-gradient(90deg,#3A3F52 0 8px,transparent 8px 12px);opacity:.8}
.act{position:relative;width:46px;height:6px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.act::after{content:"";position:absolute;left:0;top:0;bottom:0;width:40%;background:#34D399}
.sc.on .act::after{animation:actb 1.4s ease-in-out infinite alternate}
.act.a2::after{animation-delay:-.5s!important}.act.a3::after{animation-delay:-1s!important}
@keyframes actb{to{translate:150% 0}}
.link4{position:absolute;left:332px;top:210px;width:100px;height:20px}
.link4 path{fill:none;stroke:#0891B2;stroke-width:2.5;stroke-dasharray:5 7;opacity:.5}
.dot{position:absolute;left:332px;top:216px;width:9px;height:9px;border-radius:50%;background:#0891B2;opacity:0}
.sc.on .dot{animation:travel 2.4s linear infinite}
.dot.d2{animation-delay:-.8s!important}.dot.d3{animation-delay:-1.6s!important}
@keyframes travel{0%{translate:0 0;opacity:0}15%{opacity:1}85%{opacity:1}100%{translate:96px 0;opacity:0}}
.disk{position:absolute;left:436px;top:168px;width:90px;height:110px}
.sc.on .disk{animation:upk .7s .5s var(--ease) backwards,bobn 5s 1.4s ease-in-out infinite alternate}
.shield{position:absolute;left:440px;top:48px;width:66px;height:66px;border-radius:21px;background:linear-gradient(135deg,#34D399,#0891B2);color:#fff;display:grid;place-items:center;box-shadow:0 20px 34px -14px rgba(8,145,178,.7)}
.shield svg{width:32px;height:32px}
.sc.on .shield{animation:popk .7s .8s var(--spring) backwards,bobn 4s 1.6s ease-in-out infinite alternate}
.chips4{position:absolute;left:30px;right:30px;bottom:26px;display:flex;gap:10px;justify-content:center}
.chips4 span{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:#fff;font:700 13px var(--display);box-shadow:0 10px 24px -14px rgba(8,80,110,.5)}
.pin{width:10px;height:10px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--teal-2)}
.ok{width:9px;height:9px;border-radius:50%;background:#22C55E}
.sc.on .ok{animation:pulse 1.6s infinite}
.sc.on .chips4 span{animation:upk .6s var(--ease) backwards;animation-delay:1.2s}
.sc.on .chips4 span:nth-child(2){animation-delay:1.4s}.sc.on .chips4 span:nth-child(3){animation-delay:1.6s}

/* Szene 5: Weiterentwicklung */
.chart{position:absolute;left:0;top:0;width:560px;height:460px}
.sc.on .chart .line{stroke-dasharray:900;animation:drawl 1.8s ease-out backwards}
@keyframes drawl{from{stroke-dashoffset:900}}
.sc.on .chart .area{animation:fadeIn 1s 1s backwards}
.ver{position:absolute;font:800 13px var(--display);padding:6px 12px;border-radius:999px;background:#fff;color:#0F766E;box-shadow:0 10px 24px -12px rgba(0,80,80,.5)}
.ver.v1{left:196px;top:268px}.ver.v2{left:372px;top:148px}.ver.v3{left:474px;top:24px}
.sc.on .ver{animation:popk .6s var(--spring) backwards;animation-delay:1.1s}
.sc.on .ver.v2{animation-delay:1.5s}.sc.on .ver.v3{animation-delay:1.9s}
.wphone.small{left:64px;top:60px;width:200px;height:340px;padding:22px 14px;gap:9px}
.feat{display:flex;align-items:center;gap:8px;background:#fff;border-radius:14px;padding:9px;box-shadow:0 12px 26px -12px rgba(0,0,0,.35);border:1px solid var(--line)}
.feat i{width:30px;height:30px;border-radius:9px;background:var(--g-pass);display:grid;place-items:center;color:#fff;flex:none}
.feat i svg{width:16px;height:16px}
.feat span{flex:1;height:8px;border-radius:4px;background:#E5E7EB}
.feat em{font:700 10px var(--display);font-style:normal;background:var(--g-fami);color:#fff;padding:3px 8px;border-radius:999px}
.feat.f1{--k:0}.feat.f2{--k:1}.feat.f3{--k:2}
.sc.on .feat{animation:featin .8s var(--spring) backwards;animation-delay:calc(.7s + var(--k)*.6s)}
@keyframes featin{from{opacity:0;translate:150px 0;scale:.8}}

/* Referenzen */
.refs{padding:3rem 0 6rem;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.ref{flex:none;width:min(520px,86vw);scroll-snap-align:start;border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.ref:hover{transform:translateY(-8px);box-shadow:var(--shadow)}
.ref img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;transition:transform 1.2s var(--ease)}
.ref .rimg{overflow:hidden}
.ref:hover img{transform:scale(1.05)}
.ref .txt{padding:1.2rem 1.5rem 1.6rem}
.ref .who{font:800 .72rem var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.ref h3{font-size:1.3rem;font-weight:800;margin-top:.3rem}
.ref p{color:var(--muted);font-size:.98rem;margin-top:.4rem}
.ref .tg{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.9rem}
.ref .tg span{font-size:.72rem;font-weight:600;padding:.22rem .6rem;border-radius:999px;background:var(--bg-2);color:var(--muted)}

/* Responsive */
@media(max-width:940px){
  .studio-hero .wrap{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .studio-hero .artbox{flex:none;width:min(100%,460px);margin-inline:auto}
  .sgrid{grid-template-columns:1fr;gap:1rem;align-content:center}
  .slist{display:none}
  .sdots,.scap{display:flex}
  .svis{display:flex;flex-direction:column;align-items:center;gap:.9rem;padding-top:64px}
  .sdots{gap:.4rem}
  .sdots i{width:8px;height:8px;border-radius:50%;background:rgba(14,17,22,.2);transition:width .4s var(--ease),background .3s}
  .sdots i.on{width:26px;border-radius:5px;background:var(--ink)}
  .scap{flex-direction:column;gap:.15rem;text-align:center;min-height:3.6rem;order:3}
  .scap b{font:800 1.25rem var(--display);letter-spacing:-.02em}
  .scap span{color:var(--muted);font-size:.98rem}
  .scanvas{width:min(100%,calc((100svh - 260px)*560/460),620px);border-radius:26px}
  .story{height:480vh;height:480svh}
}
@media(prefers-reduced-motion:reduce){
  .story{height:auto}
  .story .spin{position:static;height:auto;padding:4rem 0}
}

.phero h1.rot-h1{font-size:clamp(2.1rem,5.8vw,4.9rem)}

/* Produkte-Seite: Hero */
.pdeins{padding:140px 0 70px;min-height:min(100svh,880px);display:flex;align-items:center}
.pdeins .wrap{flex-direction:row;align-items:center;justify-content:space-between;gap:3rem;width:100%}
.pdeins h1{font-size:clamp(2.1rem,4.7vw,4.4rem);line-height:1.02}
.pdeins h1 .l{display:block;white-space:nowrap;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em}
.pdeins h1 .l>span{display:inline-block;transform:translateY(110%);animation:up 1s var(--ease) forwards}
.pdeins h1 .l:nth-child(2)>span{animation-delay:.1s}.pdeins h1 .l:nth-child(3)>span{animation-delay:.2s}
.pdeins h1 .l:nth-child(4)>span{animation-delay:.3s}.pdeins h1 .l:nth-child(5)>span{animation-delay:.45s}
.pdeins .pcopy{flex:1 1 auto}
.pdeins .lead{max-width:28rem;margin-top:.4rem}
.ptiles{flex:0 0 min(40%,470px);display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:520px}
.ptile{grid-column:span 2;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.1rem .5rem 1rem;border-radius:26px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);box-shadow:0 20px 44px -22px rgba(30,40,80,.4);text-align:center;opacity:0;animation:fade .8s var(--ease) forwards,bob 6s ease-in-out infinite alternate;animation-delay:calc(.5s + var(--k)*.09s),calc(var(--k)*-.9s);transition:transform .4s var(--spring),box-shadow .3s}
.ptile:nth-child(7){grid-column:3/span 2}
.ptile:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 30px 56px -20px rgba(30,40,80,.5)}
.ptile img,.ptile i{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:#fff;box-shadow:0 14px 26px -12px rgba(0,0,0,.4)}
.ptile i svg{width:28px;height:28px}
.ptile b{font:800 .95rem var(--display);letter-spacing:-.02em;margin-top:.3rem;line-height:1.1}
.ptile small{color:var(--faint);font-size:.76rem}
@media(max-width:940px){.pdeins{padding:110px 0 50px;min-height:0}.pdeins .wrap{flex-direction:column;align-items:flex-start;gap:2rem}.ptiles{flex:none;width:100%;max-width:none}}
@media(max-width:420px){.ptiles{gap:10px}.ptile{padding:.9rem .3rem .8rem;border-radius:22px}.ptile img,.ptile i{width:50px;height:50px;border-radius:15px}.ptile b{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.ptile{opacity:1}.pdeins h1 .l>span{transform:none}}

/* Button mit rotierendem Text */
.btn-rot{gap:0}
.rot.brot{padding-bottom:0;margin-bottom:0;text-align:left;line-height:1.3}
.rot.brot i{color:var(--teal-2);transition-duration:.6s}

/* ===== Helles Gesamtbild: keine dunklen Flächen mehr ===== */
.app.medi{background:linear-gradient(180deg,var(--bg),#FFF2E9 45%,#FFE8DC 85%,var(--bg));color:var(--ink);border-radius:0;margin:0;--glow:rgba(255,107,53,.5)}
.app.medi .name{color:#EA580C}
.app.medi .desc{color:var(--muted)}
.app.medi .chips span{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--ink)}
.app.medi .replace{color:var(--faint)}
.app.medi .replace s{text-decoration-color:rgba(14,17,22,.35)}
.app.medi .link{color:var(--ink)}
.app.g8s{background:linear-gradient(180deg,var(--bg),#E8FBF6 40%,#E9EFFF 85%,var(--bg));color:var(--ink);border-radius:0;margin:0;--glow:rgba(45,212,191,.5)}
.app.g8s .name{color:#0F766E}
.app.g8s .desc{color:var(--muted)}
.app.g8s .chips span{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--ink)}
.app.g8s .link{color:var(--ink)}
.app.g8s .beams{opacity:.35}
.pony{background:linear-gradient(180deg,var(--bg),#F2EBFF 40%,#FFEBDD 85%,var(--bg));color:var(--ink);border-radius:0;margin:0;padding:7rem 0}
.pony .name{color:#7C3AED}
.pony .desc{color:var(--muted)}
.pony .chips span{background:rgba(255,255,255,.7);border-color:var(--line);color:var(--ink)}
.pony .link{color:var(--ink)}
.pony .shot{box-shadow:0 50px 90px -34px rgba(60,30,120,.5),0 0 0 1px rgba(14,17,22,.08)}
.tf3,.tf4,.tf6{background:rgba(255,255,255,.8)!important;border-color:rgba(255,255,255,.9)!important;color:var(--ink)!important}
.tf3 svg,.tf4 svg{color:#EA580C}
.tf6 svg{color:#0F766E}
.cta-card{background:linear-gradient(135deg,#DDF9F3,#FFE5EF 55%,#FFE9D8);color:var(--ink)}
.cta-card::before,.cta-card::after{opacity:.3}
.cta-card p{color:var(--muted)}
.cta-card .btn-white{background:var(--ink);color:#fff;box-shadow:0 14px 34px -12px rgba(14,17,22,.55)}
.portal.soft{background:linear-gradient(160deg,#FFEEE3,#FFE2EE 60%,#F0E8FF);color:var(--ink)}
.portal.soft p{color:var(--muted)}
.portal.soft .eyebrow{color:var(--faint)}
.pvis .a5{background:rgba(255,255,255,.75);border:1px solid rgba(14,17,22,.08);color:var(--ink)}
.portal.soft .pvis .a{box-shadow:0 24px 40px -16px rgba(60,20,80,.4)}
@media(max-width:940px){.pony{padding:5rem 0}}
.app.g8s .dash{color:#F2F7F7;background:#141824;backdrop-filter:none}
.app.g8s .dash .dh b,.app.g8s .kpis b{color:#fff}

.cell.dark{background:linear-gradient(135deg,#FFF4D9,#FFE6D6 60%,#FFE1EC);color:var(--ink)}
.cell.dark p{color:var(--muted)}

/* Szene 2: echter, KI-generierter Prototyp */
.prompt{position:absolute;left:60px;top:24px;width:440px;height:48px;border-radius:999px;background:#fff;box-shadow:0 14px 30px -14px rgba(90,60,180,.5),0 0 0 1px rgba(139,92,246,.18);display:flex;align-items:center;gap:10px;padding:0 20px;font:600 15px var(--body);color:var(--ink);z-index:2}
.prompt svg{width:20px;height:20px;color:#8B5CF6;flex:none}
.sc.on .prompt svg{animation:spinp 3s linear infinite}
@keyframes spinp{50%{scale:1.25;rotate:45deg}}
.prompt .ptxt{overflow:hidden;white-space:nowrap}
.sc.on .prompt .ptxt{animation:typeln 1.6s .3s steps(34) backwards}
.pcur{width:2px;height:20px;background:#8B5CF6;margin-left:-6px;opacity:0}
.sc.on .pcur{animation:blinkc .9s steps(1) .3s 4}
.wphone.gen{top:92px;height:350px;padding:26px 16px 18px}
.gk{display:block;border-radius:12px}
.gk.g-head{height:18px;width:58%;background:var(--g-pass)}
.gk.g-card{height:86px;background:var(--g-fami);border-radius:16px}
.gk.g-c2{height:46px;background:var(--g-medi);border-radius:14px}
.gk.g-row{height:30px;background:#EEF0F6}
.sc.on .gk{animation:genk .7s var(--spring) backwards;animation-delay:calc(1.9s + var(--i)*.28s)}
@keyframes genk{from{opacity:0;scale:.6;translate:0 16px;filter:blur(6px)}}
.sc.on .wphone.gen .sk.cta{animation-delay:calc(1.9s + 5*.28s)}
.s2 .cursor{top:300px}
.s2 .ripple{top:306px}
.s2 .toast{bottom:72px}
.sc.on.s2 .cursor,.sc.on.s2 .ripple,.sc.on.s2 .toast,.sc.on.s2 .sk.cta b{animation-delay:4s}
.tagx.t1{left:14px;top:140px;border-color:#8B5CF6}
.prompt{padding:0 24px}
.sc.on .prompt .ptxt{animation-duration:2.2s;animation-timing-function:steps(56)}
.pcur{margin-left:-2px}
.prompt{left:20px;width:520px;font-size:14.5px}

/* ===== USP: viele Tools -> eine Software ===== */
.usp{--c:0;--k:0;position:relative;height:280vh;height:280svh}
.uspin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.ugrid{width:100%;display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center}
.utext{display:flex;flex-direction:column;gap:1.4rem}
.uh,.up{display:grid}
.uh h2,.up p{grid-area:1/1}
.uh h2{font-weight:800;font-size:clamp(2.1rem,4.8vw,4.2rem);line-height:1.02;padding-bottom:.1em}
.uh h2 span:not(.grad){color:#E11D48}
.up p{font-size:1.15rem;color:var(--muted);max-width:28rem}
.u1{opacity:clamp(0,calc(1 - var(--k)*2.4),1)}
.u2{opacity:clamp(0,calc((var(--k) - .35)*1.8),1);translate:0 calc((1 - var(--k))*18px)}
.ubenef{display:flex;gap:.5rem;flex-wrap:wrap;opacity:clamp(0,calc((var(--k) - .5)*2),1);translate:0 calc((1 - var(--k))*14px)}
.ubenef span{font:700 .85rem var(--display);padding:.45rem .9rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:#0F766E}
.uart{position:relative;width:100%;aspect-ratio:1.08;max-height:78svh;justify-self:end;max-width:600px}
.tool{position:absolute;left:calc(50% + (var(--x)*(1 - var(--c)))*1%);top:calc(50% + (var(--y)*(1 - var(--c)))*1%);transform:translate(-50%,-50%) rotate(calc(var(--r)*1deg*(1 - var(--c)))) scale(calc(1 - var(--c)*.55));opacity:clamp(0,calc(1.6 - var(--c)*1.7),1);display:flex;flex-direction:column;align-items:center;padding:.65rem 1rem;border-radius:18px;background:#fff;box-shadow:0 18px 34px -18px rgba(30,40,80,.45),0 0 0 1px rgba(14,17,22,.06);white-space:nowrap;will-change:left,top,transform}
.tool b{font:800 1rem var(--display);letter-spacing:-.02em}
.tool small{font:700 .7rem var(--display);color:#E11D48;background:#FFE4EA;padding:.1rem .5rem;border-radius:999px;margin-top:.3rem}
.ucore{position:absolute;left:50%;top:50%;width:min(64%,330px);padding:1.6rem 1rem;border-radius:32px;background:#fff;box-shadow:0 40px 80px -30px rgba(20,60,90,.5),0 0 0 1px rgba(14,17,22,.06);display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;transform:translate(-50%,-50%) scale(calc(.6 + var(--k)*.4));opacity:clamp(0,calc(var(--k)*1.6),1)}
.ucore svg{width:58px;height:58px}
.ucore b{font:800 1.5rem var(--display);letter-spacing:-.03em}
.ucore small{color:var(--muted);font-size:.85rem}
@media(max-width:940px){
  .ugrid{grid-template-columns:1fr;gap:1.2rem;align-content:center;padding-top:60px}
  .uh h2{font-size:clamp(1.9rem,8.2vw,2.8rem)}
  .up p{font-size:1rem}
  .uart{aspect-ratio:1.25;max-height:36svh;justify-self:center;width:100%}
  .tool{padding:.45rem .75rem;border-radius:14px}.tool b{font-size:.82rem}.tool small{font-size:.6rem}
  .ucore{padding:1rem .8rem;border-radius:24px}.ucore b{font-size:1.15rem}.ucore svg{width:42px;height:42px}.ucore small{font-size:.72rem}
}
@media(prefers-reduced-motion:reduce){
  .usp{--c:1;--k:1;height:auto}
  .uspin{position:static;height:auto;padding:5rem 0}
  .u1{display:none}
}

/* ===== Saga: Tools -> eine Software -> Ablauf in einer Szene ===== */
.saga{--c:0;--k:0;--m:0;height:1000svh}
.saga .slist{display:grid;align-content:center}
.saga .ph1,.saga .ph2{grid-area:1/1}
.saga .ph1{opacity:clamp(0,calc(1 - var(--m)*1.7),1);pointer-events:none}
.saga .ph2{opacity:clamp(0,calc((var(--m) - .35)*1.7),1);translate:0 calc((1 - var(--m))*20px)}
.saga .ph1 h2{margin:0}
.saga .ph2 h2{margin:.7rem 0 1.6rem}
.saga .ph2 .step{pointer-events:auto}
.sstage{position:relative;width:100%;aspect-ratio:560/460}
.sstage .uart{position:absolute;inset:0;aspect-ratio:auto;max-width:none;max-height:none;justify-self:auto;opacity:clamp(0,calc(1 - var(--m)*1.6),1);scale:calc(1 + var(--m)*.07)}
.sstage .scanvas{position:relative;opacity:clamp(0,calc((var(--m) - .3)*1.5),1);scale:calc(.93 + var(--m)*.07)}
.saga .sdots,.saga .scap{opacity:clamp(0,calc((var(--m) - .6)*2.5),1)}
@media(max-width:940px){
  .saga{height:900svh}
  .saga .slist{display:grid}
  .saga .ph2 ol,.saga .ph2 .sbar{display:none}
  .saga .ph2 h2{margin:.4rem 0 0}
  .saga .svis{padding-top:0;gap:.6rem}
  .saga .sgrid{align-content:center;gap:.8rem;padding-top:60px}
  .saga .sstage{width:min(100%,calc((100svh - 410px)*560/460),620px)}
  .saga .scanvas{width:100%}
  .saga .scap{min-height:3.2rem}
}
@media(prefers-reduced-motion:reduce){
  .saga{height:auto;--c:1;--k:1;--m:1}
  .saga .ph1{display:none}
  .saga .ph2{translate:none}
  .saga .sstage .uart{display:none}
}

/* Karte "Deine Software" mit einrastenden Bausteinen + vier Versprechen */
.ucore{width:min(74%,380px);padding:1.4rem 1.1rem 1.2rem}
.umods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:.5rem}
.umods span{--t:clamp(0,calc((var(--k) - .3 - var(--i)*.08)*6),1);display:grid;place-items:center;padding:.7rem .3rem;border-radius:14px;background:var(--g);color:#fff;font:700 .74rem var(--display);opacity:var(--t);scale:calc(.6 + var(--t)*.4);translate:0 calc((1 - var(--t))*-14px);box-shadow:0 12px 20px -12px rgba(0,0,0,.4)}
.ubenef{gap:.55rem}
.ubenef span{--t:clamp(0,calc((var(--k) - .45 - var(--i)*.1)*5),1);opacity:var(--t);scale:calc(.85 + var(--t)*.15);translate:0 calc((1 - var(--t))*10px);font-size:.95rem;padding:.55rem 1.05rem;background:linear-gradient(135deg,#E6FAF6,#EAF1FF);border-color:rgba(8,145,178,.2);color:#0B5F73}
.ubenef{opacity:1;translate:none}
.saga .uh h2{font-size:clamp(1.9rem,3.9vw,3.5rem)}
@media(max-width:940px){.ucore{width:min(84%,340px);padding:1rem .8rem}.umods span{padding:.5rem .2rem;font-size:.62rem;border-radius:11px}.ubenef span{font-size:.8rem;padding:.4rem .75rem}.saga .uh h2{font-size:clamp(1.7rem,7vw,2.4rem)}}
@media(prefers-reduced-motion:reduce){.umods span,.ubenef span{--t:1}}

/* Wisch-Effekt: die Tools werden von links nach rechts weggefegt */
.tool{--t:clamp(0,calc((var(--c) - var(--p)*.5)*2.6),1);left:calc(50% + var(--x)*1%);top:calc(50% + var(--y)*1%);transform:translate(calc(-50% + var(--t)*var(--t)*420%),-50%) rotate(calc(var(--r)*1deg + var(--t)*28deg)) scale(calc(1 - var(--t)*.25));opacity:calc(1 - var(--t)*1.1);filter:blur(calc(var(--t)*7px))}
.uwipe{position:absolute;top:-6%;bottom:-6%;width:34%;left:calc(var(--c)*150% - 34%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 45%,rgba(255,255,255,.95) 60%,transparent);filter:blur(6px);opacity:clamp(0,calc(var(--c)*8),1);pointer-events:none;z-index:2;transform:skewX(-10deg)}
.ucore{transform:translate(-50%,-50%) scale(calc(.55 + var(--k)*.45));opacity:clamp(0,calc((var(--k) - .05)*3),1);filter:blur(calc((1 - var(--k))*8px))}
@media(prefers-reduced-motion:reduce){.tool,.uwipe{display:none}.ucore{filter:none}}

.uline{font:600 1rem/1.35 var(--body);color:var(--muted);max-width:19rem;opacity:clamp(0,calc((var(--k) - .3)*3),1);translate:0 calc((1 - var(--k))*8px)}
.ucore{gap:.7rem;padding:1.6rem 1.4rem}
.ucore b{font-size:1.7rem}
.uh h2.u1{font-size:clamp(1.9rem,4.2vw,3.6rem)}
.saga .uh h2.u1{font-size:clamp(1.7rem,3.5vw,3.1rem)}
@media(max-width:940px){.uh h2.u1,.saga .uh h2.u1{font-size:clamp(1.6rem,6.6vw,2.3rem)}.uline{font-size:.86rem}.ucore b{font-size:1.25rem}}
@media(prefers-reduced-motion:reduce){.uline{opacity:1;translate:none}}

/* gestörte Verbindungen zwischen den Tools */
.ulinks{position:absolute;inset:0;width:100%;height:100%;opacity:clamp(0,calc(1 - var(--c)*3.2),1)}
.ulinks line{stroke:#E11D48;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.55;animation:brk 1.6s steps(1) infinite}
.ulinks line:nth-child(2n){animation-delay:-.5s}.ulinks line:nth-child(3n){animation-delay:-1.1s}
@keyframes brk{0%,100%{stroke-dashoffset:0;opacity:.55}30%{opacity:.15}55%{stroke-dashoffset:-10;opacity:.6}80%{opacity:.25}}
.xm{position:absolute;translate:-50% -50%;width:22px;height:22px;border-radius:50%;background:#E11D48;color:#fff;font:800 11px/22px var(--display);text-align:center;font-style:normal;box-shadow:0 8px 16px -8px rgba(225,29,72,.8);opacity:clamp(0,calc(1 - var(--c)*3.2),1);animation:xp 2.2s var(--d) ease-in-out infinite}
@keyframes xp{0%,100%{scale:1}45%{scale:1.25}}
@media(max-width:940px){.xm{width:16px;height:16px;font-size:9px;line-height:16px}}
@media(prefers-reduced-motion:reduce){.ulinks,.xm{display:none}}

.uline .dd{font:800 1.12em var(--display);color:var(--ink)}

.legal ul{padding-left:1.2rem;margin:.4rem 0 1rem}
.legal li{margin:.25rem 0}
.legal h2{margin-top:2.2rem}
.legal p{line-height:1.65}

/* ===== Hero-Szene: Ökosystem aus Geräten, Cloud und KI ===== */
.studio-hero .artbox{flex:0 0 min(50%,600px)}
.aphone{left:225px;top:70px;width:190px;height:360px;padding:22px 15px 16px}
.chipf.c1,.chipf.c2,.chipf.c3,.chipf.c4,.codecard{display:none}
.dev{position:absolute;animation:drop 9s var(--d) infinite backwards}
.dev.cloud{left:40px;top:38px;width:190px;height:116px;filter:drop-shadow(0 26px 24px rgba(8,145,178,.28))}
.dev.cloud svg{width:100%;height:100%;display:block}
.cup{animation:cup 2s ease-in-out infinite}
@keyframes cup{0%,100%{translate:0 4px;opacity:.5}50%{translate:0 -5px;opacity:1}}
.netlinks{position:absolute;inset:0;width:640px;height:500px;overflow:visible;animation:fadeIn 1s 2.6s backwards}
.netlinks path{fill:none;stroke:#0891B2;stroke-width:2;stroke-dasharray:4 8;stroke-linecap:round;opacity:.45;animation:dashm 2s linear infinite}
.dev.laptop{left:2px;top:270px;width:262px}
.lscr{width:232px;height:150px;margin-inline:auto;border-radius:12px 12px 4px 4px;background:#1D1F2A;padding:7px 7px 10px;box-shadow:0 30px 44px -22px rgba(30,30,80,.55)}
.ltop{display:flex;gap:4px;padding:2px 3px 5px}.ltop i{width:5px;height:5px;border-radius:50%;background:#FF5F57}.ltop i:nth-child(2){background:#FEBC2E}.ltop i:nth-child(3){background:#28C840}
.lbody{height:110px;border-radius:6px;background:linear-gradient(160deg,#F4F7FF,#FFF1F6);padding:8px;display:flex;flex-direction:column;gap:8px}
.lstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.lstats i{height:24px;border-radius:6px;background:var(--g-pass)}
.lstats i:nth-child(2){background:var(--g-fami)}.lstats i:nth-child(3){background:var(--g-medi)}
.lbars{flex:1;display:flex;gap:6px;align-items:flex-end}
.lbars i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#8B5CF6,#6366F1);transform-origin:bottom;animation:barg 3.4s ease-in-out infinite alternate}
.lbars i:nth-child(2n){animation-delay:-.8s}.lbars i:nth-child(3n){animation-delay:-1.6s}
@keyframes barg{from{scale:1 .55}to{scale:1 1}}
.lbase{height:9px;width:262px;border-radius:2px 2px 12px 12px;background:linear-gradient(180deg,#D5D9E6,#B8BED0);box-shadow:0 14px 20px -10px rgba(0,0,0,.4)}
.dev.tablet{left:452px;top:236px;width:160px}
.tin{width:160px;height:212px;border-radius:22px;background:#1D1F2A;padding:16px 12px 14px;rotate:5deg;display:flex;flex-direction:column;gap:9px;box-shadow:0 36px 50px -24px rgba(30,20,80,.55);animation:bobt 6s ease-in-out infinite alternate}
@keyframes bobt{from{translate:0 -5px}to{translate:0 7px}}
.t-head{display:block;height:12px;width:60%;border-radius:6px;background:var(--g-fami)}
.tgrid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tgrid i{border-radius:8px;background:#2B3050;animation:tpulse 3s ease-in-out infinite}
.tgrid i:nth-child(1){background:var(--g-pass)}.tgrid i:nth-child(4){background:var(--g-medi)}.tgrid i:nth-child(5){background:var(--g-fami)}
.tgrid i:nth-child(2n){animation-delay:-1s}.tgrid i:nth-child(3n){animation-delay:-2s}
@keyframes tpulse{50%{opacity:.55}}
.t-bar{display:block;height:16px;border-radius:8px;background:var(--g-brand)}
.dev.aiorb{left:490px;top:38px;width:92px;height:92px}
.aiorb::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#C4B5FD,#8B5CF6 45%,#F5387F);box-shadow:0 0 0 0 rgba(139,92,246,.6),0 24px 40px -14px rgba(139,92,246,.7);animation:orb 2.6s ease-out infinite}
@keyframes orb{0%{box-shadow:0 0 0 0 rgba(139,92,246,.55),0 24px 40px -14px rgba(139,92,246,.7)}80%,100%{box-shadow:0 0 0 26px rgba(139,92,246,0),0 24px 40px -14px rgba(139,92,246,.7)}}
.aiorb svg{position:absolute;inset:22px;width:48px;height:48px;animation:spinp 3s linear infinite}
.aiorb .ring{position:absolute;inset:-9px;border-radius:50%;border:2px dashed rgba(139,92,246,.5);animation:spinr 14s linear infinite}
@keyframes spinr{to{rotate:360deg}}
.chipf.l-cloud{left:72px;top:2px}
.chipf.l-laptop{left:20px;top:452px}
.chipf.l-tablet{left:520px;top:462px;animation-delay:-2s}
.chipf.l-ai{left:504px;top:0;animation-delay:-3s;display:none}
@media(prefers-reduced-motion:reduce){.netlinks circle,.aiorb .ring{display:none}.dev{animation:none}}

.nw{white-space:nowrap}

/* ===== Hero: tippende Hände, Terminal, Code-Glyphen ===== */
.dev.laptop{top:262px}
.dev.lB{left:372px;top:290px}
.ldeck{position:relative;height:26px;width:262px;border-radius:3px 3px 14px 14px;background:linear-gradient(180deg,#D9DDEA,#B4BACD);box-shadow:0 16px 22px -10px rgba(0,0,0,.4);clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 9px,transparent 9px 12px),linear-gradient(180deg,#D9DDEA,#B4BACD);background-size:100% 6px,100% 100%;background-repeat:repeat-x,no-repeat;background-position:0 8px,0 0}
.lbase{display:none}
.lscr.dark{background:#11131D}
.term{height:110px;border-radius:6px;background:#0B0D16;padding:8px 9px;font:600 9.5px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#C9CEE8;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.term p{margin:0;white-space:nowrap;clip-path:inset(0 100% 0 0);animation-duration:9s;animation-timing-function:steps(24,end);animation-iteration-count:infinite;animation-fill-mode:both}
.term b{color:#F5387F;font-weight:800}.term .tok{color:#34D399}
.term .t0{animation-name:ty0}.term .t1{animation-name:ty1}.term .t2{animation-name:ty2}.term .t3{animation-name:ty3}
@keyframes ty0{0%,31%{clip-path:inset(0 100% 0 0)}41%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes ty1{0%,45%{clip-path:inset(0 100% 0 0)}53%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes ty2{0%,57%{clip-path:inset(0 100% 0 0)}65%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes ty3{0%,69%{clip-path:inset(0 100% 0 0)}70%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.tc{display:inline-block;width:6px;height:11px;vertical-align:-2px;background:#34D399;animation:blinkc .9s steps(1) infinite}
.hand{position:absolute;bottom:-40px;width:74px;height:65px;overflow:visible;z-index:3;filter:drop-shadow(0 8px 8px rgba(30,20,60,.3))}
.hand.h1{left:62px;rotate:-4deg}.hand.h2{left:140px;rotate:4deg;scale:-1 1}
.hand .pm,.hand .fg,.hand .th{fill:var(--skin)}.hand .cf{fill:var(--cuff)}
.hand .fg{transform-box:fill-box;transform-origin:50% 100%;animation:tap .6s ease-in-out infinite alternate}
.hand .f1{animation-duration:.55s}.hand .f2{animation-duration:.7s;animation-delay:-.2s}.hand .f3{animation-duration:.5s;animation-delay:-.35s}.hand .f4{animation-duration:.65s;animation-delay:-.1s}
.hand.h2 .f1{animation-delay:-.3s}.hand.h2 .f2{animation-delay:-.45s}.hand.h2 .f3{animation-delay:-.05s}.hand.h2 .f4{animation-delay:-.5s}
@keyframes tap{from{translate:0 0}to{translate:0 7px}}
.glyph{position:absolute;padding:.35rem .7rem;border-radius:999px;background:rgba(255,255,255,.85);box-shadow:0 12px 24px -12px rgba(30,40,80,.4);font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#0891B2;animation:bob 5s ease-in-out infinite alternate}
.glyph.g1{left:262px;top:18px}.glyph.g2{left:404px;top:2px;color:#F5387F;animation-delay:-2s}.glyph.g3{left:20px;top:210px;color:#FF8A3D;animation-delay:-3.5s}
.dev.tablet{left:482px;top:150px;width:124px}
.tin{width:124px;height:164px;border-radius:18px;padding:13px 9px 11px;gap:7px}
.t-head{height:9px}.t-bar{height:12px}
@media(prefers-reduced-motion:reduce){.term p{clip-path:none}.hand .fg,.tc,.glyph{animation:none}}

/* Matrix-Regen im Laptop */
.term.rain{position:relative;display:flex;justify-content:space-between;padding:0 5px;background:radial-gradient(120% 90% at 50% 100%,#0B2A1A,#030A06 70%);box-shadow:inset 0 0 26px rgba(52,211,153,.25);font:700 10.5px/12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#34D399;text-align:center;-webkit-mask-image:none}
.rc{position:relative;display:block;width:11px;height:auto;margin-top:-260px;white-space:nowrap;opacity:var(--o);text-shadow:0 0 6px rgba(52,211,153,.9);animation:mfall var(--dur) var(--dl) linear infinite;-webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);mask-image:linear-gradient(180deg,transparent,#000 55%)}
.rc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,transparent,rgba(214,255,236,.95));mix-blend-mode:screen;opacity:.85}
@keyframes mfall{from{translate:0 0}to{translate:0 420px}}
.rscan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none;mix-blend-mode:multiply}
@media(prefers-reduced-motion:reduce){.rc{animation:none;margin-top:-140px}}
.term.rain{flex-direction:row;align-items:flex-start;gap:0;overflow:hidden}

/* Sequenz im Laptop: tippen -> Matrix-Regen -> "deployed" (9-s-Schleife, gestartet mit dem Laptop) */
.lB .term{position:relative;background:#0B0D16;padding:8px 9px;display:flex;flex-direction:column;gap:2px;overflow:hidden;box-shadow:none;-webkit-mask-image:none}
.lB .term p{animation-delay:2.5s}
.lB .term .t0{animation-name:sq0}.lB .term .t1{animation-name:sq1}.lB .term .t2{animation-name:sq2}.lB .term .t3{animation-name:sq3}
@keyframes sq0{0%,28%{clip-path:inset(0 100% 0 0)}36%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq1{0%,39%{clip-path:inset(0 100% 0 0)}47%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq2{0%,77%{clip-path:inset(0 100% 0 0)}85%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq3{0%,86%{clip-path:inset(0 100% 0 0)}87%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.rainl{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:flex-start;padding:0 5px;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#0B2A1A,#030A06 75%);box-shadow:inset 0 0 26px rgba(52,211,153,.3);font:700 10.5px/12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#34D399;text-align:center;opacity:0;animation:rainl 9s 2.5s infinite both}
@keyframes rainl{0%,50%{opacity:0;filter:hue-rotate(0deg)}54%{opacity:1;filter:hue-rotate(0deg)}60%,70%{opacity:1;filter:hue-rotate(150deg)}76%,100%{opacity:0;filter:hue-rotate(150deg)}}
@media(prefers-reduced-motion:reduce){.lB .term p{clip-path:none}.rainl{display:none}}

/* Hand mit KI-Flasche: "Magic Sauce" über den Code */
.pourer{position:absolute;left:470px;top:180px;width:160px;height:240px;z-index:5;pointer-events:none;opacity:0;animation:pseq 9s 2.5s infinite both}
.pourer svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 14px 14px rgba(60,20,90,.3))}
@keyframes pseq{0%,42%{opacity:0;translate:70px -40px}47%{opacity:1;translate:0 0}80%{opacity:1;translate:0 0}86%,100%{opacity:0;translate:70px -40px}}
.bot{transform-origin:100px 90px;animation:ptilt 9s 2.5s infinite both}
@keyframes ptilt{0%,48%{rotate:12deg}54%,70%{rotate:-115deg}76%,100%{rotate:12deg}}
.hk{fill:#E0A87C}
.stream{opacity:0;animation:pstream 9s 2.5s infinite both}
@keyframes pstream{0%,55%{opacity:0}57%,70%{opacity:1}72%,100%{opacity:0}}
.flow{stroke-dasharray:14 6;animation:pflow .5s linear infinite}
@keyframes pflow{to{stroke-dashoffset:-20}}
.drop{animation:pdrop .7s ease-in infinite}.drop.d2{animation-delay:-.25s}.drop.d3{animation-delay:-.5s}
@keyframes pdrop{from{translate:0 0;opacity:1}to{translate:0 42px;opacity:0}}
.splash{animation:psplash .8s ease-in-out infinite alternate}
@keyframes psplash{from{scale:.7;opacity:.55}to{scale:1.15;opacity:1}}
.splash{transform-box:fill-box;transform-origin:center}
.spk{transform-box:fill-box;transform-origin:center;animation:pspk 1.1s ease-in-out infinite}.spk.s2{animation-delay:-.5s}
@keyframes pspk{0%,100%{scale:.4;opacity:0}50%{scale:1.2;opacity:1}}
@media(prefers-reduced-motion:reduce){.pourer{display:none}}
.lbtxt{font:800 8.6px "Plus Jakarta Sans",ui-sans-serif,sans-serif;fill:#7C3AED;letter-spacing:-.2px}

/* Arm kommt waagerecht aus dem Off von rechts, dann kippt die Hand die Flasche */
.pourer{opacity:0;animation-name:pseq2}
@keyframes pseq2{0%,40%{opacity:0;translate:480px 0}41%{opacity:1;translate:480px 0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}50%,80%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.6,0,.9,.4)}88%{opacity:1;translate:480px 0}89%,100%{opacity:0;translate:480px 0}}
.bot{transform-origin:100px 128px;animation-name:ptilt2}
@keyframes ptilt2{0%,51%{rotate:0deg}58%,70%{rotate:-115deg}77%,100%{rotate:0deg}}

/* Laptop links: der letzte Balken startet als Rakete und kracht durch die Oberkante */
.dev.laptop:not(.lB) .lscr{position:relative;animation:lshake 9s 1.7s infinite both}
@keyframes lshake{0%,59.5%{translate:0 0}60.5%{translate:-2px 1px}61.5%{translate:2px -1px}62.5%{translate:-1.5px 0}63.5%{translate:1px 1px}65%,100%{translate:0 0}}
.crash{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:4;pointer-events:none}
.cracks,.cracks2{opacity:0;animation:ccrack 9s 1.7s infinite both}
@keyframes ccrack{0%,59.5%{opacity:0}60.5%,86%{opacity:1}92%,100%{opacity:0}}
.boom{transform-box:fill-box;transform-origin:center;opacity:0;animation:cboom 9s 1.7s infinite both}
@keyframes cboom{0%,59.4%{opacity:0;scale:.2}60%{opacity:1;scale:.4}68%,100%{opacity:0;scale:3.2}}
.bsp{transform-box:fill-box;transform-origin:center;opacity:0;animation:cbsp 9s 1.7s infinite both}.bsp.b2{animation-delay:1.78s}.bsp.b3{animation-delay:1.84s}
@keyframes cbsp{0%,59.4%{opacity:0;scale:.2;translate:0 8px}62%{opacity:1;scale:1.3;translate:0 -4px}70%,100%{opacity:0;scale:.5;translate:0 -14px}}
.lbars i.rk{position:relative;z-index:3;animation:rk 9s 1.7s infinite both;scale:1 1}
@keyframes rk{
  0%,46%{translate:0 0;rotate:0deg;opacity:1}
  47%{translate:-1px 0}48%{translate:1px 0}49%{translate:-1px 0}50%{translate:1px 0}51%{translate:0 0}
  52%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  60%{translate:0 -100px;rotate:0deg}
  62%{translate:0 -94px;rotate:16deg}
  82%{translate:2px -96px;rotate:14deg}
  88%{translate:2px -96px;rotate:14deg;opacity:1}
  93%,100%{translate:2px -96px;rotate:14deg;opacity:0}}
.lbars i.rk::before{content:"";position:absolute;left:-1px;right:-1px;top:-13px;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:14px solid #F5387F;width:0;margin-inline:auto;opacity:0;animation:rknose 9s 1.7s infinite both}
@keyframes rknose{0%,45%{opacity:0}47%,93%{opacity:1}100%{opacity:0}}
.lbars i.rk::after{content:"";position:absolute;left:50%;top:100%;width:14px;height:22px;margin-left:-7px;border-radius:50% 50% 50% 50%/25% 25% 75% 75%;background:radial-gradient(circle at 50% 25%,#FFF6C7,#FACC15 40%,#FF6B35 75%,transparent);opacity:0;transform-origin:top;animation:rkfl 9s 1.7s infinite both}
@keyframes rkfl{0%,51%{opacity:0;scale:1 .3}53%{opacity:1;scale:1 1}55%{scale:.9 1.4}57%{scale:1.1 1}59%{scale:.9 1.5}60.5%,100%{opacity:0;scale:1 .2}}
@media(prefers-reduced-motion:reduce){.crash,.lbars i.rk::before,.lbars i.rk::after{display:none}.lbars i.rk{animation:none}.dev.laptop:not(.lB) .lscr{animation:none}}
/* Flasche schräger halten */
@keyframes ptilt2{0%,51%{rotate:-30deg}58%,70%{rotate:-115deg}77%,100%{rotate:-30deg}}

/* Live-Chart: Balken laufen nach links durch und wachsen, am Ende startet die Rakete */
.lbars{position:relative;flex:1;display:block;gap:0;clip-path:inset(-140px 0 0 0)}
.ltrack{position:absolute;left:0;bottom:0;height:100%;display:flex;align-items:flex-end;gap:6px;animation:lscroll 9s 1.7s infinite both}
@keyframes lscroll{0%,20%{translate:0 0}46%{translate:-182px 0}100%{translate:-182px 0}}
.lbars i{flex:none;width:24px;transform-origin:bottom}
.lbars i:not(.rk){animation:bargrow 3s ease-in-out infinite alternate;animation-delay:calc(var(--j)*-.35s)}
@keyframes bargrow{from{scale:1 .82}to{scale:1 1}}
.lbars i.rk{background:linear-gradient(180deg,#6366F1,#8B5CF6)}

/* ===== 18-s-Schleife: Akt 1 = rechter Laptop mit Magic Sauce, Akt 2 = linker Laptop mit Chart und Rakete ===== */
@keyframes drop18{
  0%{translate:var(--fx) var(--fy);scale:.5;opacity:0;rotate:-14deg}
  4%{opacity:1}
  8%{translate:0 0;scale:1.07;rotate:2deg}
  10.5%{scale:.98;rotate:0deg}
  12.5%,94%{translate:0 0;scale:1;opacity:1;rotate:0deg}
  98%,100%{translate:0 0;scale:.96;opacity:0}}
.dev,.blk{animation-name:drop18;animation-duration:18s}

/* Akt 1 (rechts) */
.lB .term p{animation-duration:18s;animation-delay:2.5s}
.lB .term .t0{animation-name:sq0b}.lB .term .t1{animation-name:sq1b}.lB .term .t2{animation-name:sq2b}.lB .term .t3{animation-name:sq3b}
@keyframes sq0b{0%,14%{clip-path:inset(0 100% 0 0)}18%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq1b{0%,19.5%{clip-path:inset(0 100% 0 0)}23.5%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq2b{0%,38.5%{clip-path:inset(0 100% 0 0)}42.5%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq3b{0%,43%{clip-path:inset(0 100% 0 0)}43.5%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.rainl{animation:rainlb 18s 2.5s infinite both}
@keyframes rainlb{0%,25%{opacity:0;filter:hue-rotate(0deg)}27%{opacity:1;filter:hue-rotate(0deg)}30%,35%{opacity:1;filter:hue-rotate(150deg)}38%,100%{opacity:0;filter:hue-rotate(150deg)}}
.pourer{animation:pseqb 18s 2.5s infinite both}
@keyframes pseqb{0%,20%{opacity:0;translate:480px 0}20.5%{opacity:1;translate:480px 0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}25%,40%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.6,0,.9,.4)}44%{opacity:1;translate:480px 0}44.5%,100%{opacity:0;translate:480px 0}}
.bot{animation:ptiltb 18s 2.5s infinite both}
@keyframes ptiltb{0%,25.5%{rotate:-30deg}29%,35%{rotate:-115deg}38.5%,100%{rotate:-30deg}}
.stream{animation:pstreamb 18s 2.5s infinite both}
@keyframes pstreamb{0%,27.5%{opacity:0}28.5%,35%{opacity:1}36%,100%{opacity:0}}

/* Akt 2 (links): startet, wenn Akt 1 fertig ist */
.dev.laptop:not(.lB) .lscr{animation:lshakeb 18s 1.7s infinite both}
@keyframes lshakeb{0%,69.7%{translate:0 0}70.25%{translate:-2px 1px}70.75%{translate:2px -1px}71.25%{translate:-1.5px 0}71.75%{translate:1px 1px}72.5%,100%{translate:0 0}}
.cracks,.cracks2{animation:ccrackb 18s 1.7s infinite both}
@keyframes ccrackb{0%,69.7%{opacity:0}70.25%,83%{opacity:1}86%,100%{opacity:0}}
.boom{animation:cboomb 18s 1.7s infinite both}
@keyframes cboomb{0%,69.7%{opacity:0;scale:.2}70%{opacity:1;scale:.4}74%,100%{opacity:0;scale:3.2}}
.bsp{animation:cbspb 18s 1.7s infinite both}.bsp.b2{animation-delay:1.78s}.bsp.b3{animation-delay:1.84s}
@keyframes cbspb{0%,69.7%{opacity:0;scale:.2;translate:0 8px}71%{opacity:1;scale:1.3;translate:0 -4px}75%,100%{opacity:0;scale:.5;translate:0 -14px}}
.ltrack{animation:lscrollb 18s 1.7s infinite both}
@keyframes lscrollb{0%,50%{translate:0 0}63%{translate:-182px 0}100%{translate:-182px 0}}
.lbars i.rk{animation:rkb 18s 1.7s infinite both}
@keyframes rkb{
  0%,63%{translate:0 0;rotate:0deg;opacity:1}
  63.5%{translate:-1px 0}64%{translate:1px 0}64.5%{translate:-1px 0}65%{translate:1px 0}65.5%{translate:0 0}
  66%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  70%{translate:0 -100px;rotate:0deg}
  71%{translate:0 -94px;rotate:16deg}
  81%{translate:2px -96px;rotate:14deg}
  84%{translate:2px -96px;rotate:14deg;opacity:1}
  86.5%,100%{translate:2px -96px;rotate:14deg;opacity:0}}
.lbars i.rk::before{animation:rknoseb 18s 1.7s infinite both}
@keyframes rknoseb{0%,62.5%{opacity:0}63.5%,86.5%{opacity:1}100%{opacity:0}}
.lbars i.rk::after{animation:rkflb 18s 1.7s infinite both}
@keyframes rkflb{0%,65.5%{opacity:0;scale:1 .3}66.5%{opacity:1;scale:1 1}67.5%{scale:.9 1.4}68.5%{scale:1.1 1}69.5%{scale:.9 1.5}70.25%,100%{opacity:0;scale:1 .2}}
@media(prefers-reduced-motion:reduce){.dev,.blk{animation:none}}

.saga .uh h2.u1{font-size:clamp(1.55rem,3.1vw,2.8rem);line-height:1.04}
@media(max-width:940px){.uh h2.u1,.saga .uh h2.u1{font-size:clamp(1.45rem,6vw,2.05rem)}}

.ubenef span{--t:clamp(0,calc((var(--k) - .42 - var(--i)*.07)*5),1)}

/* echte Rakete: Balken verwandelt sich kurz vor dem Start */
.lbars i.rk{background:none}
.lbars i.rk::before{content:"";position:absolute;inset:0;width:auto;height:auto;margin:0;border:0;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#6366F1,#8B5CF6);opacity:1;animation:rkbarb 18s 1.7s infinite both}
@keyframes rkbarb{0%,62.5%{opacity:1}63.5%,100%{opacity:0}}
.lbars i.rk .rkt{position:absolute;left:-6px;bottom:-3px;width:36px;height:64px;overflow:visible;opacity:0;animation:rktb 18s 1.7s infinite both}
@keyframes rktb{0%,62.5%{opacity:0}63.5%,86.5%{opacity:1}100%{opacity:0}}
.lbars i.rk::after{top:calc(100% - 12px);width:16px;height:24px;margin-left:-8px;z-index:-1}

/* Scroll-Hinweis am Anfang der Story */
.sshint{position:absolute;left:50%;bottom:clamp(20px,4.5svh,42px);translate:-50% 0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:.55rem;pointer-events:none;opacity:clamp(0,calc(1 - var(--c)*7),1);color:var(--muted)}
.sshint b{font:700 .8rem var(--display);letter-spacing:.14em;text-transform:uppercase}
.mouse{position:relative;width:24px;height:38px;border:2px solid rgba(14,17,22,.4);border-radius:14px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.mouse i{position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--ink);animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;translate:0 0}30%{opacity:1}100%{opacity:0;translate:0 13px}}
.sshint::after{content:"";width:9px;height:9px;border-right:2px solid rgba(14,17,22,.45);border-bottom:2px solid rgba(14,17,22,.45);rotate:45deg;margin-top:-.15rem;animation:chev 1.7s ease-in-out infinite}
@keyframes chev{0%,100%{translate:0 -3px;opacity:.4}50%{translate:0 3px;opacity:1}}
@media(prefers-reduced-motion:reduce){.sshint{display:none}}

/* ===== 12-s-Schleife (schneller): Magic Sauce ab ~4,5 s, Rakete ab ~9 s ===== */
@keyframes drop12{
  0%{translate:var(--fx) var(--fy);scale:.5;opacity:0;rotate:-14deg}
  6%{opacity:1}
  12%{translate:0 0;scale:1.07;rotate:2deg}
  15.5%{scale:.98;rotate:0deg}
  18.5%,94%{translate:0 0;scale:1;opacity:1;rotate:0deg}
  98%,100%{translate:0 0;scale:.96;opacity:0}}
.dev,.blk{animation-name:drop12;animation-duration:12s}

/* Akt 1: rechter Laptop (Delay 2.0 s) */
.lB .term p{animation-duration:12s;animation-delay:2s}
.lB .term .t0{animation-name:sq0c}.lB .term .t1{animation-name:sq1c}.lB .term .t2{animation-name:sq2c}.lB .term .t3{animation-name:sq3c}
@keyframes sq0c{0%,16%{clip-path:inset(0 100% 0 0)}20%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq1c{0%,21%{clip-path:inset(0 100% 0 0)}25%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq2c{0%,46%{clip-path:inset(0 100% 0 0)}50%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes sq3c{0%,50%{clip-path:inset(0 100% 0 0)}50.5%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.rainl{animation:rainlc 12s 2s infinite both}
@keyframes rainlc{0%,27%{opacity:0;filter:hue-rotate(0deg)}29%{opacity:1;filter:hue-rotate(0deg)}33%,43%{opacity:1;filter:hue-rotate(150deg)}47%,100%{opacity:0;filter:hue-rotate(150deg)}}
.pourer{animation:pseqc 12s 2s infinite both}
@keyframes pseqc{0%,22%{opacity:0;translate:480px 0}22.5%{opacity:1;translate:480px 0;animation-timing-function:cubic-bezier(.2,.8,.3,1)}28%,45%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.6,0,.9,.4)}49%{opacity:1;translate:480px 0}49.5%,100%{opacity:0;translate:480px 0}}
.bot{animation:ptiltc 12s 2s infinite both}
@keyframes ptiltc{0%,28.5%{rotate:-30deg}32%,42%{rotate:-115deg}46%,100%{rotate:-30deg}}
.stream{animation:pstreamc 12s 2s infinite both}
@keyframes pstreamc{0%,31%{opacity:0}32%,42%{opacity:1}43%,100%{opacity:0}}

/* Akt 2: linker Laptop (Delay 1.4 s) */
.dev.laptop:not(.lB) .lscr{animation:lshakec 12s 1.4s infinite both}
@keyframes lshakec{0%,72.5%{translate:0 0}73.3%{translate:-2px 1px}74.1%{translate:2px -1px}74.9%{translate:-1.5px 0}75.7%{translate:1px 1px}77%,100%{translate:0 0}}
.cracks,.cracks2{animation:ccrackc 12s 1.4s infinite both}
@keyframes ccrackc{0%,72.4%{opacity:0}73.2%,88%{opacity:1}92%,100%{opacity:0}}
.boom{animation:cboomc 12s 1.4s infinite both}
@keyframes cboomc{0%,72.3%{opacity:0;scale:.2}72.6%{opacity:1;scale:.4}77.5%,100%{opacity:0;scale:3.2}}
.bsp{animation:cbspc 12s 1.4s infinite both}.bsp.b2{animation-delay:1.48s}.bsp.b3{animation-delay:1.54s}
@keyframes cbspc{0%,72.3%{opacity:0;scale:.2;translate:0 8px}74.5%{opacity:1;scale:1.3;translate:0 -4px}79%,100%{opacity:0;scale:.5;translate:0 -14px}}
.ltrack{animation:lscrollc 12s 1.4s infinite both}
@keyframes lscrollc{0%,51%{translate:0 0}63%{translate:-182px 0}100%{translate:-182px 0}}
.lbars i.rk{animation:rkc 12s 1.4s infinite both}
@keyframes rkc{
  0%,63%{translate:0 0;rotate:0deg;opacity:1}
  63.7%{translate:-1px 0}64.4%{translate:1px 0}65.1%{translate:-1px 0}65.8%{translate:1px 0}66.5%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  72.5%{translate:0 -100px;rotate:0deg}
  74%{translate:0 -94px;rotate:16deg}
  86%{translate:2px -96px;rotate:14deg;opacity:1}
  90%,100%{translate:2px -96px;rotate:14deg;opacity:0}}
.lbars i.rk::before{animation:rkbarc 12s 1.4s infinite both}
@keyframes rkbarc{0%,62.5%{opacity:1}63.5%,100%{opacity:0}}
.lbars i.rk .rkt{animation:rktc 12s 1.4s infinite both}
@keyframes rktc{0%,62.5%{opacity:0}63.5%,90%{opacity:1}96%,100%{opacity:0}}
.lbars i.rk::after{animation:rkflc 12s 1.4s infinite both}
@keyframes rkflc{0%,65.5%{opacity:0;scale:1 .3}66.5%{opacity:1;scale:1 1}68.5%{scale:.9 1.4}70%{scale:1.1 1}71.5%{scale:.9 1.5}72.5%,100%{opacity:0;scale:1 .2}}

/* Rakete: Flügel, steigt aus dem Balken und startet, während die Sauce fließt */
.lbars i.rk .rkt{left:-14px;bottom:-3px;width:52px;height:66px}
.dev.laptop:not(.lB) .lscr{animation:lshaked 12s 1.4s infinite both}
@keyframes lshaked{0%,43.5%{translate:0 0}44.3%{translate:-2px 1px}45.1%{translate:2px -1px}45.9%{translate:-1.5px 0}46.7%{translate:1px 1px}48%,100%{translate:0 0}}
.cracks,.cracks2{animation:ccrackd 12s 1.4s infinite both}
@keyframes ccrackd{0%,43.4%{opacity:0}44.2%,64%{opacity:1}70%,100%{opacity:0}}
.boom{animation:cboomd 12s 1.4s infinite both}
@keyframes cboomd{0%,43.3%{opacity:0;scale:.2}43.6%{opacity:1;scale:.4}48.5%,100%{opacity:0;scale:3.2}}
.bsp{animation:cbspd 12s 1.4s infinite both}.bsp.b2{animation-delay:1.48s}.bsp.b3{animation-delay:1.54s}
@keyframes cbspd{0%,43.3%{opacity:0;scale:.2;translate:0 8px}45.5%{opacity:1;scale:1.3;translate:0 -4px}50%,100%{opacity:0;scale:.5;translate:0 -14px}}
.ltrack{animation:lscrolld 12s 1.4s infinite both}
@keyframes lscrolld{0%,22%{translate:0 0}34%{translate:-182px 0}100%{translate:-182px 0}}
.lbars i.rk{animation:rkd 12s 1.4s infinite both}
@keyframes rkd{
  0%,34%{translate:0 0;rotate:0deg;opacity:1}
  34.7%{translate:-1px 0}35.4%{translate:1px 0}36.1%{translate:-1px 0}36.8%{translate:1px 0}37.5%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  43.5%{translate:0 -100px;rotate:0deg}
  45%{translate:0 -94px;rotate:16deg}
  62%{translate:2px -96px;rotate:14deg;opacity:1}
  66%,100%{translate:2px -96px;rotate:14deg;opacity:0}}
.lbars i.rk::before{animation:rkbard 12s 1.4s infinite both}
@keyframes rkbard{0%,33%{opacity:1}35%,100%{opacity:0}}
.lbars i.rk .rkt{animation:rktd 12s 1.4s infinite both}
@keyframes rktd{0%,33%{opacity:0;translate:0 16px}35%{opacity:1;translate:0 0}66%{opacity:1;translate:0 0}70%,100%{opacity:0;translate:0 0}}
.lbars i.rk::after{animation:rkfld 12s 1.4s infinite both}
@keyframes rkfld{0%,36.5%{opacity:0;scale:1 .3}37.5%{opacity:1;scale:1 1}39.5%{scale:.9 1.4}41%{scale:1.1 1}42.5%{scale:.9 1.5}43.5%,100%{opacity:0;scale:1 .2}}

/* Rakete = der Balken selbst: Spitze oben (Dreieck), zwei Flügel-Dreiecke unten, Flamme darunter */
.lbars i.rk{background:linear-gradient(180deg,#6366F1,#8B5CF6)}
.lbars i.rk::before{content:"";position:absolute;inset:auto;left:50%;top:-14px;margin-left:-12px;width:0;height:0;border:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:14px solid #F5387F;border-radius:0;background:none;opacity:0;animation:rknosee 12s 1.4s infinite both}
@keyframes rknosee{0%,32.5%{opacity:0;scale:1 .2}34.5%,100%{opacity:1;scale:1 1}}
.lbars i.rk::before{transform-origin:50% 100%}
.lbars i.rk .rkt{left:-12px;bottom:0;width:48px;height:30px;animation:rktw 12s 1.4s infinite both}
@keyframes rktw{0%,32.5%{opacity:0;scale:.3 .3}34.5%{opacity:1;scale:1 1}100%{opacity:1;scale:1 1}}
.lbars i.rk .rkt{transform-origin:50% 100%}
.lbars i.rk::after{top:calc(100% - 4px);width:14px;height:22px;margin-left:-7px}

.lbars i.rk .rkt{left:-20px;bottom:0;width:64px;height:38px}
.lbars i.rk::after{top:calc(100% - 2px);width:16px;height:26px;margin-left:-8px}

/* ===== Balken wachsen, während die Sauce kippt; wenn sie aufhört, wird der Balken zur Rakete ===== */
.ltrack{transform-origin:0 100%;animation:lscrolle 12s 1.4s infinite both}
@keyframes lscrolle{0%,6%{translate:0 0;scale:1 .42}47%,100%{translate:-182px 0;scale:1 1}}
.dev.laptop:not(.lB) .lscr{animation:lshakee 12s 1.4s infinite both}
@keyframes lshakee{0%,57%{translate:0 0}57.8%{translate:-2px 1px}58.6%{translate:2px -1px}59.4%{translate:-1.5px 0}60.2%{translate:1px 1px}61.5%,100%{translate:0 0}}
.cracks,.cracks2{animation:ccracke 12s 1.4s infinite both}
@keyframes ccracke{0%,56.9%{opacity:0}57.7%,77.5%{opacity:1}83.5%,100%{opacity:0}}
.boom{animation:cboome 12s 1.4s infinite both}
@keyframes cboome{0%,56.8%{opacity:0;scale:.2}57.1%{opacity:1;scale:.4}62%,100%{opacity:0;scale:3.2}}
.bsp{animation:cbspe 12s 1.4s infinite both}.bsp.b2{animation-delay:1.48s}.bsp.b3{animation-delay:1.54s}
@keyframes cbspe{0%,56.8%{opacity:0;scale:.2;translate:0 8px}59%{opacity:1;scale:1.3;translate:0 -4px}63.5%,100%{opacity:0;scale:.5;translate:0 -14px}}
.lbars i.rk{animation:rke 12s 1.4s infinite both}
@keyframes rke{
  0%,47%{translate:0 0;rotate:0deg;opacity:1}
  48.2%{translate:-1px 0}48.9%{translate:1px 0}49.6%{translate:-1px 0}50.3%{translate:1px 0}51%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  57%{translate:0 -100px;rotate:0deg}
  58.5%{translate:0 -94px;rotate:16deg}
  75.5%{translate:2px -96px;rotate:14deg;opacity:1}
  79.5%,100%{translate:2px -96px;rotate:14deg;opacity:0}}
.lbars i.rk::before{animation:rknosef 12s 1.4s infinite both}
@keyframes rknosef{0%,46%{opacity:0;scale:1 .2}48%,100%{opacity:1;scale:1 1}}
.lbars i.rk .rkt{animation:rktf 12s 1.4s infinite both}
@keyframes rktf{0%,46%{opacity:0;scale:.3 .3}48%,100%{opacity:1;scale:1 1}}
.lbars i.rk::after{animation:rkfle 12s 1.4s infinite both}
@keyframes rkfle{0%,50%{opacity:0;scale:1 .3}51%{opacity:1;scale:1 1}53%{scale:.9 1.4}54.5%{scale:1.1 1}56%{scale:.9 1.5}57%,100%{opacity:0;scale:1 .2}}

/* Erfolg statt Crash: Die Rakete fliegt aus dem Screen hoch zur Cloud, kein Wackeln, keine Risse */
.dev.laptop:not(.lB) .lscr{animation:none}
.cracks,.cracks2,.boom{display:none}
.lbars i.rk{animation:rkg 12s 1.4s infinite both}
@keyframes rkg{
  0%,47%{translate:0 0;rotate:0deg;opacity:1}
  48.2%{translate:-1px 0}48.9%{translate:1px 0}49.6%{translate:-1px 0}50.3%{translate:1px 0}51%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  57%{translate:-8px -110px;rotate:-3deg;animation-timing-function:cubic-bezier(.3,0,.7,1)}
  66%{translate:-40px -270px;rotate:-8deg;opacity:1}
  70%,100%{translate:-48px -320px;rotate:-9deg;opacity:0}}
.lbars i.rk::after{animation:rkflg 12s 1.4s infinite both}
@keyframes rkflg{0%,50%{opacity:0;scale:1 .3}51%{opacity:1;scale:1 1}53%{scale:.9 1.5}54.5%{scale:1.1 1.2}56%{scale:.9 1.7}58%{scale:1.1 1.4}62%{scale:.95 1.8}68%{opacity:1;scale:1 1.6}70%,100%{opacity:0;scale:1 .2}}
.bsp{animation:cbspg 12s 1.4s infinite both}.bsp.b2{animation-delay:1.48s}.bsp.b3{animation-delay:1.54s}
@keyframes cbspg{0%,55%{opacity:0;scale:.2;translate:0 12px}58%{opacity:1;scale:1.3;translate:0 -6px}64%,100%{opacity:0;scale:.5;translate:0 -18px}}

/* Erfolg: Die Rakete fliegt über den Screen hinaus und explodiert zu einem kleinen Feuerwerk */
.lbars i.rk{animation:rkh 12s 1.4s infinite both}
@keyframes rkh{
  0%,47%{translate:0 0;rotate:0deg;opacity:1}
  48.2%{translate:-1px 0}48.9%{translate:1px 0}49.6%{translate:-1px 0}50.3%{translate:1px 0}51%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  59.5%{translate:-16px -112px;rotate:-4deg;opacity:1}
  60.5%,100%{translate:-18px -118px;rotate:-4deg;opacity:0}}
.lbars i.rk::after{animation:rkflh 12s 1.4s infinite both}
@keyframes rkflh{0%,50%{opacity:0;scale:1 .3}51%{opacity:1;scale:1 1}53%{scale:.9 1.5}54.5%{scale:1.1 1.2}56%{scale:.9 1.7}58%{scale:1.1 1.5}60%{opacity:1;scale:1 1.7}60.5%,100%{opacity:0;scale:1 .2}}
.fp,.fs,.flash{opacity:0;transform-box:fill-box;transform-origin:center}
.fp{fill:var(--c);animation:fpop 12s 1.4s infinite both}
.fs{fill:none;stroke:var(--c);stroke-width:1.8;stroke-linecap:round;animation:fpop 12s 1.4s infinite both}
.fwb.b2 .fp,.fwb.b2 .fs{animation-name:fpop2}
@keyframes fpop{0%,60.4%{opacity:0;translate:0 0;scale:.3}61.2%{opacity:1;scale:1.3}67%{opacity:1;translate:var(--dx) var(--dy);scale:1}74%{opacity:0;translate:var(--dx) calc(var(--dy) + 14px);scale:.5}100%{opacity:0;translate:var(--dx) calc(var(--dy) + 14px)}}
@keyframes fpop2{0%,63%{opacity:0;translate:0 0;scale:.3}63.8%{opacity:1;scale:1.3}69%{opacity:1;translate:var(--dx) var(--dy);scale:1}76%{opacity:0;translate:var(--dx) calc(var(--dy) + 12px);scale:.5}100%{opacity:0;translate:var(--dx) calc(var(--dy) + 12px)}}
.flash{fill:#FFF3B0;animation:fflash 12s 1.4s infinite both}
@keyframes fflash{0%,60.4%{opacity:0;scale:.2}61.2%{opacity:.95;scale:1.5}64%,100%{opacity:0;scale:3}}
@media(prefers-reduced-motion:reduce){.fp,.fs,.flash{display:none}}

/* Rakete als eine zusammenhängende Grafik: Körper + Spitze + zwei Flügel-Dreiecke + Flamme; liegt vor allem anderen */
.dev.laptop:not(.lB){z-index:8}
.dev.laptop:not(.lB) .lscr{overflow:visible}
.lbars i.rk{z-index:5;background:linear-gradient(180deg,#6366F1,#8B5CF6);animation:rkh2 12s 1.4s infinite both}
.lbars i.rk::before,.lbars i.rk::after{display:none}
@keyframes rkh2{
  0%,46.5%{translate:0 0;rotate:0deg;opacity:1;background:linear-gradient(180deg,#6366F1,#8B5CF6)}
  47%{background:none}
  48.2%{translate:-1px 0}48.9%{translate:1px 0}49.6%{translate:-1px 0}50.3%{translate:1px 0}51%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  59.5%{translate:-16px -112px;rotate:-4deg;opacity:1;background:none}
  60.5%,100%{translate:-18px -118px;rotate:-4deg;opacity:0;background:none}}
.lbars i.rk .rkt{position:absolute;left:-16px;bottom:-4px;width:56px;height:96px;overflow:visible;z-index:6;opacity:0;scale:1;transform-origin:50% 60%;animation:rktg 12s 1.4s infinite both}
@keyframes rktg{0%,46.5%{opacity:0;scale:.6 .6}47.5%,100%{opacity:1;scale:1 1}}
.rfl{transform-box:fill-box;transform-origin:50% 0;opacity:0;animation:rflg 12s 1.4s infinite both}
@keyframes rflg{0%,50%{opacity:0;scale:1 .3}51%{opacity:1;scale:1 1}53%{scale:.9 1.4}54.5%{scale:1.1 1.15}56%{scale:.9 1.6}58%{scale:1.1 1.4}60%{opacity:1;scale:1 1.6}60.5%,100%{opacity:0;scale:1 .2}}
.lbars i.rk .rkt{left:-27px;bottom:-6px;width:78px;height:134px}

/* Chart: konstante Geschwindigkeit (linear), stoppt genau dann, wenn der große Balken zur Rakete wird */
svg.rkt{max-width:none}
.lbars i.rk .rkt{left:-20px;bottom:-4px;width:64px;height:110px;max-width:none}
.ltrack{animation:lscrollh 12s 1.4s infinite both}
@keyframes lscrollh{0%,4%{translate:0 0;scale:1 .42;animation-timing-function:linear}47%,100%{translate:-566px 0;scale:1 1}}
/* Scrollen: konstant; Wachsen: erst im Kipp-Fenster der Sauce (37 % bis 47 %) */
.ltrack{animation:lscrolli 12s 1.4s infinite both;animation-timing-function:linear}
@keyframes lscrolli{
  0%,4%{translate:0 0;scale:1 .4}
  37%{translate:-434px 0;scale:1 .4}
  47%,100%{translate:-566px 0;scale:1 1}}
/* sanftes Stoppen: konstant scrollen, dann weich abbremsen; Wachsen getrennt mit weichem Ein-/Auslauf */
.ltrack{animation:lstx 12s 1.4s infinite both,lsts 12s 1.4s infinite both}
@keyframes lstx{
  0%,4%{translate:0 0;animation-timing-function:linear}
  37%{translate:-470px 0;animation-timing-function:cubic-bezier(.4,.6,.55,1)}
  47%,100%{translate:-566px 0}}
@keyframes lsts{
  0%,37%{scale:1 .4;animation-timing-function:cubic-bezier(.45,0,.35,1)}
  47%,100%{scale:1 1}}

/* Verwandlung ohne Sprung: der Balken bleibt der Körper, Spitze/Flügel/Flamme wachsen aus ihm heraus */
.lbars i.rk{background:linear-gradient(180deg,#6366F1,#8B5CF6);animation:rki 12s 1.4s infinite both}
@keyframes rki{
  0%,47%{translate:0 0;rotate:0deg;opacity:1}
  48.2%{translate:-1px 0}48.9%{translate:1px 0}49.6%{translate:-1px 0}50.3%{translate:1px 0}51%{translate:0 0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  59.5%{translate:-16px -112px;rotate:-4deg;opacity:1}
  60.5%,100%{translate:-18px -118px;rotate:-4deg;opacity:0}}
.rknose,.rkwings,.rkflame{position:absolute;max-width:none;overflow:visible;opacity:0}
.rknose{left:0;bottom:100%;width:24px;height:16px;transform-origin:50% 100%;animation:rknz 12s 1.4s infinite both}
.rkwings{left:-14px;bottom:0;width:52px;height:26px;transform-origin:50% 0;animation:rkwg 12s 1.4s infinite both}
.rkflame{left:4px;top:100%;width:16px;height:26px;transform-origin:50% 0;animation:rkfl2 12s 1.4s infinite both}
@keyframes rknz{0%,46%{opacity:0;scale:.6 0}48%{opacity:1;scale:1 1.3;animation-timing-function:ease-out}50%,100%{opacity:1;scale:1 1}}
@keyframes rkwg{0%,46.5%{opacity:0;scale:.15 .3}49%{opacity:1;scale:1.12 1.1;animation-timing-function:ease-out}51%,100%{opacity:1;scale:1 1}}
@keyframes rkfl2{0%,50%{opacity:0;scale:1 .3}51%{opacity:1;scale:1 1}53%{scale:.9 1.4}54.5%{scale:1.1 1.15}56%{scale:.9 1.6}58%{scale:1.1 1.4}60%{opacity:1;scale:1 1.6}60.5%,100%{opacity:0;scale:1 .2}}
/* nichts von der Rakete darf abgeschnitten werden: oben/unten großzügig, rechts Platz für den Flügel */
.lbars{clip-path:inset(-600px 0 -60px 0)}
.ltrack{animation:lstx2 12s 1.4s infinite both,lsts 12s 1.4s infinite both}
@keyframes lstx2{
  0%,4%{translate:0 0;animation-timing-function:linear}
  37%{translate:-452px 0;animation-timing-function:cubic-bezier(.4,.6,.55,1)}
  47%,100%{translate:-546px 0}}
.ltrack{animation:lstx3 12s 1.4s infinite both,lsts 12s 1.4s infinite both}
@keyframes lstx3{
  0%,4%{translate:0 0;animation-timing-function:linear}
  37%{translate:-500px 0;animation-timing-function:cubic-bezier(.4,.6,.55,1)}
  47%,100%{translate:-598px 0}}

/* Kontakt-Formel komplett klein geschrieben (für Großbuchstaben: text-transform:uppercase) */
.cta-card h2.eq{text-transform:lowercase;letter-spacing:-.035em}
/* Kontakt-Formel: normale Groß-/Kleinschreibung, nur "yeah!" klein */
.cta-card h2.eq{text-transform:none;letter-spacing:-.03em}
.cta-card h2.eq .grad{text-transform:lowercase}

/* animiertes "yeah!": Buchstaben hüpfen als Welle, das "!" wackelt, der Farbverlauf wandert */
.yeah{display:inline-block;background-size:220% 100%;animation:sheen 5s ease-in-out infinite alternate}
.yeah i{display:inline-block;font-style:normal;transform-origin:50% 100%}
.cta-card.in .yeah i{animation:yin .9s cubic-bezier(.34,1.6,.5,1) both,yhop 3.2s ease-in-out 1.4s infinite;animation-delay:calc(.35s + var(--i)*.09s),calc(1.6s + var(--i)*.11s)}
.cta-card.in .yeah i.ex{animation:yin .9s cubic-bezier(.34,1.6,.5,1) both,yex 3.2s ease-in-out 1.4s infinite;animation-delay:calc(.35s + var(--i)*.09s),calc(1.6s + var(--i)*.11s);transform-origin:50% 90%}
@keyframes yin{from{opacity:0;transform:translateY(.55em) scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}
@keyframes yhop{0%,50%,100%{transform:none}14%{transform:translateY(-.2em) scale(.96,1.08)}26%{transform:translateY(0) scale(1.06,.92)}36%{transform:none}}
@keyframes yex{0%,50%,100%{transform:none}10%{transform:rotate(-14deg) scale(1.12)}20%{transform:rotate(12deg) scale(1.16)}30%{transform:rotate(-7deg)}40%{transform:none}}
@media(prefers-reduced-motion:reduce){.yeah,.yeah i,.cta-card.in .yeah i{animation:none!important;opacity:1}}
/* yeah!: jeder Buchstabe trägt seinen Teil des Verlaufs, Bewegung dezent */
.yeah{background:none;color:inherit;animation:none;-webkit-background-clip:border-box;background-clip:border-box}
.yeah i{background:var(--g-brand);background-repeat:no-repeat;background-size:2.9em 100%;background-position:calc(var(--i)*-.62em) 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-card.in .yeah i{animation:yin .8s cubic-bezier(.34,1.4,.5,1) both,yhop2 4.2s ease-in-out infinite;animation-delay:calc(.3s + var(--i)*.08s),calc(1.8s + var(--i)*.13s)}
.cta-card.in .yeah i.ex{animation:yin .8s cubic-bezier(.34,1.4,.5,1) both,yex2 4.2s ease-in-out infinite;animation-delay:calc(.3s + var(--i)*.08s),calc(1.8s + var(--i)*.13s)}
@keyframes yhop2{0%,40%,100%{transform:none}14%{transform:translateY(-.07em)}28%{transform:translateY(.01em)}}
@keyframes yex2{0%,40%,100%{transform:none}12%{transform:rotate(-7deg)}24%{transform:rotate(6deg)}34%{transform:rotate(-2deg)}}
/* yeah!: kein Einflug mehr, nur Tanz (wilder); Buchstaben nicht mehr abgeschnitten */
.yeah i{padding:.14em .06em .26em;margin:-.14em -.06em -.26em}
.yeah i:nth-child(odd){--dir:1}.yeah i:nth-child(even){--dir:-1}
.cta-card .yeah i,.cta-card.in .yeah i,.cta-card.in .yeah i.ex{opacity:1;animation:ydance 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
.cta-card.in .yeah i.ex{animation-name:yexd}
@keyframes ydance{
  0%,58%,100%{transform:none}
  8%{transform:translateY(-.2em) rotate(calc(var(--dir)*-10deg)) scale(.94,1.12)}
  16%{transform:translateY(.02em) rotate(calc(var(--dir)*7deg)) scale(1.1,.88)}
  25%{transform:translateY(-.12em) rotate(calc(var(--dir)*-6deg)) scale(1,1.06)}
  34%{transform:translateY(0) rotate(calc(var(--dir)*3deg)) scale(1.04,.96)}
  44%{transform:translateY(-.04em) rotate(calc(var(--dir)*-1.5deg))}}
@keyframes yexd{
  0%,58%,100%{transform:none}
  8%{transform:rotate(-20deg) scale(1.2)}
  18%{transform:rotate(16deg) scale(1.28)}
  28%{transform:rotate(-12deg) scale(1.1)}
  38%{transform:rotate(7deg) scale(1.04)}
  48%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.cta-card .yeah i,.cta-card.in .yeah i{animation:none}}
/* yeah!: etwas ruhigerer Tanz */
.cta-card .yeah i,.cta-card.in .yeah i{animation-name:ydance2;animation-duration:3s}
.cta-card.in .yeah i.ex{animation-name:yexd2;animation-duration:3s}
@keyframes ydance2{
  0%,55%,100%{transform:none}
  9%{transform:translateY(-.11em) rotate(calc(var(--dir)*-5deg)) scale(.97,1.06)}
  19%{transform:translateY(.01em) rotate(calc(var(--dir)*4deg)) scale(1.05,.95)}
  30%{transform:translateY(-.06em) rotate(calc(var(--dir)*-3deg))}
  42%{transform:translateY(0) rotate(calc(var(--dir)*1.5deg))}}
@keyframes yexd2{
  0%,55%,100%{transform:none}
  9%{transform:rotate(-11deg) scale(1.1)}
  19%{transform:rotate(9deg) scale(1.14)}
  31%{transform:rotate(-5deg) scale(1.05)}
  43%{transform:rotate(2deg)}}

/* Konfetti im Takt des Tanzes (3 s) */
.yeah{position:relative}
.conf{position:absolute;inset:0;pointer-events:none;overflow:visible}
.cf{position:absolute;left:calc(var(--x)*1%);top:35%;width:7px;height:7px;border-radius:50%;background:var(--c);opacity:0;animation:cfly 3s ease-out infinite;animation-delay:calc(var(--d) + .1s)}
.cf.r{width:6px;height:11px;border-radius:2px}
@keyframes cfly{
  0%,7%{opacity:0;translate:0 0;rotate:0deg;scale:.3}
  10%{opacity:1;scale:1}
  26%{translate:var(--dx) var(--dy);rotate:calc(var(--rot)*.6);opacity:1}
  58%{translate:calc(var(--dx)*1.25) calc(var(--dy) + 105px);rotate:var(--rot);opacity:0}
  100%{opacity:0;translate:calc(var(--dx)*1.25) calc(var(--dy) + 105px)}}
@media(prefers-reduced-motion:reduce){.conf{display:none}}

/* Konfetti sammelt sich am Ende als Unterstreichung unter "eah!" und blendet aus */
.cf,.cf.r{width:7px;height:7px;border-radius:50%;left:calc(var(--x)*1%);top:35%;animation:cline 3s ease-in-out infinite;animation-delay:calc(var(--d) + .1s)}
.cf.r{width:6px;height:11px;border-radius:2px}
@keyframes cline{
  0%,7%{opacity:0;left:calc(var(--x)*1%);top:35%;translate:0 0;rotate:0deg;width:7px;height:7px;border-radius:50%;scale:.3}
  10%{opacity:1;scale:1}
  26%{opacity:1;left:calc(var(--x)*1%);top:35%;translate:var(--dx) var(--dy);rotate:calc(var(--rot)*.6);width:7px;height:7px;border-radius:50%;animation-timing-function:cubic-bezier(.5,0,.4,1)}
  52%{opacity:1;left:calc(var(--ex)*1%);top:112%;translate:-50% 0;rotate:0deg;width:11px;height:4px;border-radius:2px}
  80%{opacity:1;left:calc(var(--ex)*1%);top:112%;translate:-50% 0;rotate:0deg;width:11px;height:4px;border-radius:2px}
  92%,100%{opacity:0;left:calc(var(--ex)*1%);top:112%;translate:-50% 0;rotate:0deg;width:11px;height:4px;border-radius:2px}}

/* ===== yeah!: Unterstreichung entsteht -> Buchstabensprung wirbelt sie als Konfetti auf -> Ausfaden (3 s) ===== */
.cf,.cf.r{position:absolute;left:calc(var(--ex)*1%);top:calc(1.134em - 4px);width:11px;height:4px;border-radius:2px;background:var(--c);opacity:0;translate:-50% 0;animation:cline2 3s infinite both;animation-delay:calc((var(--ex) - 5)*.0055s)}
@keyframes cline2{
  0%{opacity:0;translate:-50% 0;rotate:0deg;width:11px;height:4px;border-radius:2px;scale:.2}
  6%{opacity:1;scale:1}
  47%{opacity:1;translate:-50% 0;rotate:0deg;width:11px;height:4px;border-radius:2px;scale:1;animation-timing-function:cubic-bezier(.15,.75,.3,1)}
  62%{opacity:1;translate:calc(-50% + var(--dx)) var(--dy);rotate:calc(var(--rot)*.6);width:7px;height:7px;border-radius:50%;scale:1;animation-timing-function:cubic-bezier(.5,0,.75,1)}
  86%,100%{opacity:0;translate:calc(-50% + var(--dx)*1.3) calc(var(--dy) + 100px);rotate:var(--rot);width:7px;height:7px;border-radius:50%;scale:.8}}
.cta-card .yeah i,.cta-card.in .yeah i{animation-name:ydance3;animation-duration:3s;animation-timing-function:ease-in-out}
.cta-card.in .yeah i.ex{animation-name:yexd3}
@keyframes ydance3{
  0%,45%,100%{transform:none}
  50%{transform:translateY(-.11em) rotate(calc(var(--dir)*-5deg)) scale(.97,1.06)}
  58%{transform:translateY(.01em) rotate(calc(var(--dir)*4deg)) scale(1.05,.95)}
  67%{transform:translateY(-.06em) rotate(calc(var(--dir)*-3deg))}
  77%{transform:translateY(0) rotate(calc(var(--dir)*1.5deg))}
  88%{transform:none}}
@keyframes yexd3{
  0%,45%,100%{transform:none}
  50%{transform:rotate(-11deg) scale(1.1)}
  58%{transform:rotate(9deg) scale(1.14)}
  68%{transform:rotate(-5deg) scale(1.05)}
  78%{transform:rotate(2deg)}
  88%{transform:none}}
.cf,.cf.r{top:calc(1.134em - 8px)}
.cf,.cf.r{top:calc(1.134em - 4.5px)}
.cf,.cf.r{top:calc(1.134em - 4.2px)}

/* ===== FAQ ===== */
.faq{padding:5rem 0 6rem;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.fgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:3.5rem;align-items:start}
.faq .head{padding:0}
.faq .head h2{font-weight:800;font-size:clamp(2rem,4vw,3.2rem);line-height:1.04;margin-top:.6rem}
.flist{display:flex;flex-direction:column;gap:12px}
.fq{border-radius:24px;background:#fff;border:1px solid var(--line);transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.fq:hover{box-shadow:0 20px 44px -26px rgba(20,30,60,.35)}
.fq[open]{box-shadow:0 26px 54px -28px rgba(20,30,60,.4)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;font:800 1.08rem var(--display);letter-spacing:-.02em;border-radius:24px}
.fq summary::-webkit-details-marker{display:none}
.fq summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--bg-2);transition:background .3s,transform .5s var(--spring)}
.fq summary i::before,.fq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .4s var(--ease)}
.fq summary i::after{transform:rotate(90deg)}
.fq[open] summary i{background:var(--g-brand);transform:rotate(180deg)}
.fq[open] summary i::before,.fq[open] summary i::after{background:#fff}
.fq[open] summary i::after{transform:rotate(0)}
.fa{padding:0 1.4rem 1.3rem}
.fa p{color:var(--muted);font-size:1rem;max-width:40rem;animation:faIn .5s var(--ease)}
@keyframes faIn{from{opacity:0;translate:0 -6px}}
@media(max-width:940px){.fgrid{grid-template-columns:1fr;gap:1.6rem}.faq{padding:4rem 0 5rem}}
@media(prefers-reduced-motion:reduce){.fa p{animation:none}}

.herokey{margin-bottom:-.4rem}

/* Englische Seite */
.enhero .wrap{flex-direction:column;align-items:flex-start}
.enhero h1{font-size:clamp(2.6rem,7vw,5.6rem);max-width:14ch}
.cell .soon{font:700 .78rem var(--display);color:var(--faint);padding-top:.4rem}
.bento .cell.s3 .link{margin-top:auto}

/* ===== Mobile/Tablet (einspaltig): Animation direkt unter die Überschrift, Inhalt weiter oben, weniger Leerraum in der Story ===== */
@media(max-width:940px){
  .phero{padding-top:88px}
  .studio-hero{padding-top:88px}
  .pdeins{padding-top:92px}
  .hero{padding-top:88px}
  /* Hero der Entwicklungs-Seite: Eyebrow, Überschrift, Animation, dann Text und Buttons */
  .studio-hero .pcopy{display:contents}
  .studio-hero .wrap{gap:1.3rem}
  .studio-hero .eyebrow{order:1}
  .studio-hero h1{order:2}
  .studio-hero .artbox{order:3;margin-block:-.2rem 0}
  .studio-hero .lead{order:4}
  .studio-hero .cta{order:5}
  /* Story: die Fläche der hohen ersten Überschrift nach dem Wechsel wieder freigeben (Wert kommt aus main.js) */
  .saga .ph1,.saga .ph2{align-self:start}
  .saga .svis{translate:0 calc(var(--m)*var(--shift,0px)*-1)}
}