/* Grundrauschen: Einzug beim Scrollen, Linien, Mikro-Interaktionen (Welle 1) */
.mo{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .75s cubic-bezier(.16,1,.3,1)}
.mo.go{opacity:1;transform:none}
.mo-hasrail{position:relative}
.mo-rail{position:absolute;left:-1.4rem;top:.6rem;bottom:.6rem;width:2px;background:rgba(127,127,127,.22);pointer-events:none}
.mo-rail b{position:absolute;inset:0;background:currentColor;transform-origin:top;transform:scaleY(var(--p,0));transition:transform .25s linear}
.mo-rail--x{left:0;right:0;top:-1.1rem;bottom:auto;width:auto;height:2px}
.mo-rail--x b{transform-origin:left;transform:scaleX(var(--p,0))}
.mo-mag{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.faq details .faq__a{overflow:hidden}
@media (max-width:880px){.mo-rail{display:none}}
@media (prefers-reduced-motion:reduce){.mo{opacity:1;transform:none;transition:none}.mo-rail b{transform:none;transition:none}.mo-mag{transition:none}}

/* Welle 2: Mockups rollen als Fenster auf, Titelleisten mit Ampel */
.mo-win{clip-path:inset(0 0 100% 0 round .8rem);transition:clip-path .9s cubic-bezier(.4,0,.2,1)}
.mo-win.go{clip-path:inset(0 0 0 0 round .8rem)}
.rack__head::before,.sim__head::before,.stg__head::before,.ci__head::before,.box__head::before,.proc__head::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#ff5f57;box-shadow:.95rem 0 0 #febc2e,1.9rem 0 0 #28c840;margin-right:2.2rem;align-self:center;flex:0 0 auto}
.rack__head>span,.sim__head>span,.stg__head>span,.ci__head>span,.box__head>span,.proc__head>.proc__seg{margin-right:auto}
.cam::before{content:"";position:absolute;left:0;right:0;top:0;height:1.7rem;background:#111;z-index:2}
.cam::after{content:"";position:absolute;left:.9rem;top:.58rem;width:.55rem;height:.55rem;border-radius:50%;background:#ff5f57;box-shadow:.95rem 0 0 #febc2e,1.9rem 0 0 #28c840;z-index:3}
/* Welle 3: Illustrationen aus Punkten, Sprechblasen ploppen, Fotos legen sich frei */
.mo-dots{position:relative}
.mo-dots img{transition:opacity .6s ease}
.mo-dots.pending img{opacity:0}
.mo-dots canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .7s ease}
.mo-dots.done canvas{opacity:0}
.mo-pop{opacity:0;transform:scale(.94) translateY(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,1.3,.4,1)}
.mo-pop.go{opacity:1;transform:none}
.mo-photo{clip-path:inset(0 100% 0 0);transform:scale(1.08);transition:clip-path 1s cubic-bezier(.4,0,.2,1),transform 1.4s ease}
.mo-photo.go{clip-path:inset(0 0 0 0);transform:none}
@media (prefers-reduced-motion:reduce){.mo-win,.mo-pop,.mo-photo{clip-path:none;opacity:1;transform:none;transition:none}.mo-dots.pending img{opacity:1}.mo-dots canvas{display:none}}
.cta__vis img,.hcta__vis img{display:block;width:100%;height:auto}
/* Zitat tippt sich; Wort-Tausch in Überschriften */
.mo-type{visibility:hidden}
.mo-type.is-typing,.mo-type.is-done{visibility:visible}
.mo-type.is-typing::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.08em;background:currentColor;vertical-align:-.1em;animation:moBlink .7s steps(1) infinite}
@keyframes moBlink{50%{opacity:0}}
.swap{display:inline-grid;vertical-align:baseline;text-align:left;transition:width .5s cubic-bezier(.16,1,.3,1)}
.swap__w{grid-area:1/1;justify-self:start;width:max-content;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1);opacity:0;transform:translateY(.35em);white-space:nowrap}
.swap__w.on{opacity:1;transform:none}
.swap__w.off{opacity:0;transform:translateY(-.35em)}
@media (prefers-reduced-motion:reduce){.mo-type{visibility:visible}.swap__w{transition:none}}