/* Distributed motion system: each animation explains its section. */
.motion-enhanced #leistungen .offer{opacity:0;transform:translateX(-54px);filter:blur(4px)}
.motion-enhanced #leistungen .offer:nth-child(2){transform:translateX(54px)}
.motion-enhanced #leistungen.motion-active .offer{animation:offer-arrive .78s cubic-bezier(.2,.8,.2,1) forwards}
.motion-enhanced #leistungen.motion-active .offer:nth-child(2){animation-delay:.12s}
.motion-enhanced #leistungen.motion-active .offer:nth-child(3){animation-delay:.24s}
@keyframes offer-arrive{to{opacity:1;transform:none;filter:none}}
#leistungen .offers{position:relative;isolation:isolate}
#leistungen .offer:after{position:absolute;z-index:3;right:auto;bottom:-1px;left:0;width:86px;height:2px;content:"";pointer-events:none;background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:0;filter:drop-shadow(0 0 6px var(--signal))}
#leistungen.motion-active .offer:after{animation:service-packet 2.4s cubic-bezier(.3,.7,.2,1) both}
#leistungen.motion-active .offer:nth-child(2):after{animation-delay:.38s}
#leistungen.motion-active .offer:nth-child(3):after{animation-delay:.76s}
@keyframes service-packet{0%{left:0;opacity:0}12%{opacity:1}82%{opacity:.8}100%{left:calc(100% - 86px);opacity:0}}
#leistungen .heading em{position:relative;display:inline-block}
#leistungen .heading em:after{position:absolute;right:0;bottom:-7px;left:0;height:2px;content:"";background:var(--signal);transform:scaleX(0);transform-origin:left}
#leistungen.motion-active .heading em:after{animation:draw-underline .9s .3s ease forwards}
@keyframes draw-underline{to{transform:scaleX(1)}}

.proof .stage{position:relative;isolation:isolate;overflow:hidden}
.proof .stage:before{position:absolute;z-index:-1;inset:-20%;content:"";opacity:.28;background-image:linear-gradient(rgba(200,255,61,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,61,.13) 1px,transparent 1px);background-size:34px 34px;transform:perspective(700px) rotateX(62deg) translateY(28%);transform-origin:center bottom}
.proof.motion-active .stage:before{animation:proof-grid 12s linear infinite}
@keyframes proof-grid{to{background-position:0 68px,68px 0}}
.proof .stage:after{position:absolute;z-index:0;top:0;bottom:0;left:-20%;width:16%;content:"";pointer-events:none;background:linear-gradient(90deg,transparent,rgba(200,255,61,.13),transparent);transform:skewX(-16deg)}
.proof.motion-active .stage:after{animation:proof-scan 5.2s 1s ease-in-out infinite}
@keyframes proof-scan{0%,18%{left:-22%;opacity:0}34%{opacity:1}66%{left:108%;opacity:1}82%,100%{left:108%;opacity:0}}
.proof .panel{position:relative;z-index:2}
.proof .panel.active{animation:proof-panel-in .55s cubic-bezier(.16,1,.3,1) both}
@keyframes proof-panel-in{0%{opacity:0;transform:translate3d(32px,16px,0);clip-path:inset(0 100% 0 0)}100%{opacity:1;transform:none;clip-path:inset(0)}}
.proof .tab{position:relative;overflow:hidden;transition:padding-left .22s ease,background .22s ease,color .22s ease}
.proof .tab:after{position:absolute;top:0;bottom:0;left:0;width:3px;content:"";background:var(--signal);transform:scaleY(0);transform-origin:bottom;transition:transform .24s ease}
.proof .tab.active:after{transform:scaleY(1)}
.motion-enhanced .proof .heading em{display:inline-block;transform:translateY(18px);opacity:0}
.proof.motion-active .heading em{animation:proof-title .75s .16s cubic-bezier(.16,1,.3,1) forwards}
@keyframes proof-title{to{transform:none;opacity:1}}

.process{--process-progress:0;position:relative;isolation:isolate;overflow:hidden}
.process:before{position:absolute;z-index:4;top:-1px;left:0;width:calc(var(--process-progress) * 100%);height:3px;content:"";background:var(--signal);box-shadow:0 0 18px rgba(200,255,61,.45);transition:width .08s linear}
.process:after{position:absolute;z-index:5;top:-5px;left:calc(var(--process-progress) * (100% - 10px));width:10px;height:10px;content:"";background:var(--paper);clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%);box-shadow:0 0 18px rgba(200,255,61,.7);transition:left .08s linear}
.motion-enhanced .process .step{opacity:.34;transform:translateY(28px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1),background .35s ease}
.motion-enhanced .process .step.reached{opacity:1;transform:none;background:linear-gradient(180deg,rgba(200,255,61,.055),transparent 56%)}
.process .step.reached .step-num{text-shadow:0 0 14px rgba(200,255,61,.55)}
.process .step h3{position:relative;width:max-content}
.process .step h3:after{position:absolute;right:-18px;top:50%;width:5px;height:5px;content:"";background:var(--signal);opacity:0;transform:translateY(-50%) rotate(45deg) scale(0);transition:.3s ease}
.process .step.reached h3:after{opacity:1;transform:translateY(-50%) rotate(45deg) scale(1)}

.promise{position:relative;isolation:isolate;overflow:hidden}
.promise-geometry{position:absolute;z-index:-1;inset:0;pointer-events:none}
.promise-shard{position:absolute;background:var(--ink);opacity:.08;will-change:transform}
.promise-shard.one{top:-25%;right:11%;width:18%;height:150%;transform:skewX(-24deg) translateY(-110%)}
.promise-shard.two{right:29%;bottom:-45%;width:8%;height:138%;transform:skewX(-24deg) translateY(120%)}
.promise-shard.three{top:14%;right:-3%;width:30%;height:34%;clip-path:polygon(16% 0,100% 0,84% 100%,0 100%);transform:translateX(115%)}
.promise.motion-active .promise-shard.one{animation:shard-one 1.15s cubic-bezier(.16,1,.3,1) forwards}
.promise.motion-active .promise-shard.two{animation:shard-two 1.25s .08s cubic-bezier(.16,1,.3,1) forwards}
.promise.motion-active .promise-shard.three{animation:shard-three 1.05s .2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes shard-one{to{transform:skewX(-24deg) translateY(0)}}@keyframes shard-two{to{transform:skewX(-24deg) translateY(0)}}@keyframes shard-three{to{transform:translateX(0)}}
.motion-enhanced .promise-title .promise-line{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em}
.motion-enhanced .promise-title .promise-line>span{display:block;transform:translateY(115%);will-change:transform}
.promise.motion-active .promise-line>span{animation:promise-line .82s cubic-bezier(.16,1,.3,1) forwards}
.promise.motion-active .promise-line:nth-child(2)>span{animation-delay:.1s}.promise.motion-active .promise-line:nth-child(3)>span{animation-delay:.2s}
@keyframes promise-line{to{transform:none}}
.motion-enhanced .promise-copy-motion{opacity:0;transform:translateX(34px)}
.motion-enhanced .promise.motion-active .promise-copy-motion{animation:promise-copy .75s .42s cubic-bezier(.16,1,.3,1) forwards}
@keyframes promise-copy{to{opacity:1;transform:none}}
.promise .button{position:relative;overflow:hidden}.promise .button:before{position:absolute;inset:0;content:"";background:var(--signal);transform:translateX(-104%) skewX(-18deg);transition:transform .42s ease}.promise .button:hover:before{transform:translateX(104%) skewX(-18deg)}

.footer-brand{position:relative;overflow:hidden}.footer-brand:after{position:absolute;top:0;bottom:0;left:-30%;width:18%;content:"";background:linear-gradient(90deg,transparent,rgba(200,255,61,.55),transparent);transform:skewX(-18deg);opacity:0}.footer.motion-active .footer-brand:after{animation:footer-scan 1.4s .2s ease both}@keyframes footer-scan{15%{opacity:1}100%{left:112%;opacity:0}}

@media(max-width:980px){.motion-enhanced #leistungen .offer,.motion-enhanced #leistungen .offer:nth-child(2){transform:translateY(28px)}.process:before{top:0;left:0;width:3px;height:calc(var(--process-progress) * 100%)}.process:after{top:calc(var(--process-progress) * (100% - 10px));left:-4px}.promise-shard.one{right:16%;width:24%}.promise-shard.two{right:48%;width:12%}}
@media(max-width:680px){.proof .stage:before{animation:none!important}.promise-shard{opacity:.055}.footer-brand:after{display:none}}
@media(prefers-reduced-motion:reduce){.motion-enhanced #leistungen .offer,.motion-enhanced #leistungen .offer:nth-child(2),.motion-enhanced .process .step,.motion-enhanced .promise-copy-motion,.promise-title .promise-line>span,.proof .heading em{opacity:1;filter:none;transform:none}.offer:after,.proof .stage:after,.proof .stage:before,.promise-shard,.footer-brand:after{animation:none!important}.process:before{width:100%}.process:after{display:none}}