/* Project previews, job story and application polish. */
.motion-design .video-hero{padding-top:30px;padding-bottom:48px}
.motion-design .video-title{margin-bottom:25px}
.motion-design .video-title h1{font-size:clamp(47px,5.15vw,73px);line-height:1.02;margin-bottom:15px}
.motion-design .video-title .eyebrow{margin-bottom:12px;padding:6px 12px}
.motion-design .video-title .lead{font-size:16px;line-height:1.5}
.motion-design .hero-tags{margin-top:13px}
.motion-design .hero-orbit{height:370px;top:-40px}
.project-section{align-items:center}
.project-browser{border:1px solid #b7a4ff45;border-radius:20px;background:#181921;overflow:hidden;box-shadow:0 25px 75px #0005;min-width:0}
.browser-top{display:flex;align-items:center;gap:17px;padding:14px 18px;border-bottom:1px solid #ffffff15;font-size:10px}
.browser-dots{font-size:11px;letter-spacing:3px;color:#b7a4ff}
.browser-address{flex:1;text-align:center;color:#cbcad6;background:#ffffff07;border-radius:6px;padding:5px}
.project-controls{display:flex;gap:7px;padding:12px 18px;border-bottom:1px solid #ffffff15}
.project-controls button{border:1px solid #ffffff25;background:transparent;color:#c1bed0;border-radius:100px;padding:7px 14px;font-size:11px;transition:background .2s,color .2s}
.project-controls button[aria-pressed=true]{background:var(--mint);color:#111e18;border-color:var(--mint)}
.project-viewport{height:355px;overflow:auto;overscroll-behavior:contain;background:#eeedf2;scrollbar-width:thin;scrollbar-color:#b7a4ff #171821}
.project-shot{display:block;width:100%;height:auto}
.project-browser[data-view=mobile] .project-viewport{width:230px;margin:18px auto;border:6px solid #34353d;border-radius:22px;height:355px}
.project-browser-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 18px;font-size:9px;border-top:1px solid #ffffff15}
.project-browser-footer a{color:var(--mint);font-size:11px;text-underline-offset:4px}
.project-help{margin:0;padding:0 18px 14px;font-size:10px}
.job-story{display:grid;grid-template-columns:1fr 1.1fr;align-items:start;gap:50px}
.job-visual{position:sticky;top:100px;border:1px solid #b7a4ff35;border-radius:24px;padding:26px;background:radial-gradient(ellipse at 20% 0,#b7a4ff20,transparent 65%),#14151e;overflow:hidden}
.job-visual-top{font-size:9px;letter-spacing:1.4px;color:#c1b7da}
.job-scene svg{display:block;width:100%;max-height:290px;fill:none;stroke:var(--mint);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin:15px 0}
.scene-label{display:block;text-align:center;color:#e1dbef;font-size:12px;min-height:20px}
.job-indicators{display:flex;gap:7px;justify-content:center;margin-top:25px}
.job-indicators i{width:22px;height:3px;border-radius:10px;background:#ffffff23;transition:width .3s,background .3s}
.job-indicators i.active{width:42px;background:var(--mint)}
.job-steps article{position:relative;min-height:248px;padding:32px;border:1px solid #ffffff16;border-radius:20px;margin-bottom:15px;background:#14151c;transition:border-color .3s,background .3s}
.job-steps article.is-current{border-color:#94f0d17c;background:linear-gradient(130deg,#94f0d109,#b7a4ff0c),#14151c}
.job-steps .number{margin-bottom:20px}
.job-steps h3{font-size:27px;letter-spacing:-1px}
.job-steps p{font-size:14px;margin-bottom:14px}
.job-step-button{border:0;background:transparent;color:var(--mint);padding:8px 0;font-size:11px;text-decoration:underline;text-underline-offset:5px}
.motion-design .trust-grid article,.motion-design .services article{transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s,border-color .25s,box-shadow .25s}
.motion-design .trust-grid article.is-touched,.motion-design .services article.is-touched{border-color:var(--mint);box-shadow:0 0 35px #94f0d117}
.motion-design .trust-grid article:hover .trust-mark,.motion-design .services article:hover>span{transform:rotate(-8deg) scale(1.1)}
.motion-design .trust-mark,.motion-design .services article>span{transition:transform .3s}
.motion-design .faq details{overflow:hidden}
.motion-design .faq summary:after{transition:transform .3s}
.motion-design .faq details[open] summary:after{transform:rotate(180deg)}
.motion-design dialog{background:radial-gradient(ellipse at 100% 0,#b7a4ff14,transparent 45%),#101117;border-color:#b7a4ff50;border-radius:24px}
.motion-design .dialog-body{padding:30px}
.motion-design .progress{gap:8px;margin-top:22px}
.motion-design .progress span{height:auto;min-height:38px;display:grid;place-items:center;border:1px solid #ffffff1c;border-radius:9px;background:#ffffff05;color:#8e8b9e;font-size:10px;transition:background .3s,color .3s}
.motion-design .progress span:nth-child(1):after{content:'01 · Interesse'}
.motion-design .progress span:nth-child(2):after{content:'02 · Rahmen'}
.motion-design .progress span:nth-child(3):after{content:'03 · Kontakt'}
.motion-design .progress span.active{background:#94f0d115;border-color:#94f0d144;color:var(--mint)}
.motion-design .choices label{position:relative;border-radius:16px;padding:20px;gap:15px;transition:border-color .25s,background .25s,transform .25s}
.motion-design .choices label:hover{border-color:#b7a4ff70}
.motion-design .choices label:has(input:checked){background:#94f0d10c;border-color:var(--mint);box-shadow:inset 3px 0 var(--mint)}
.motion-design .choices input{accent-color:var(--mint);width:20px;height:20px}
.motion-design .field input,.motion-design .field textarea,.motion-design .field select{border-radius:12px;background:#181923;border-color:#ffffff24}
.motion-design .field:focus-within{color:var(--mint)}
.motion-design .dialog-body #success{padding:7px 0 12px}
.motion-design #success .eyebrow{font-size:9px;margin-top:20px}
.motion-design .success-icon{width:76px;height:76px;background:#94f0d10d;box-shadow:0 0 0 9px #94f0d105;margin:28px 0;border-color:#94f0d180}
.motion-design #success h3{font-size:31px;line-height:1.12;letter-spacing:-1.3px}
.success-next{padding:0;margin:27px 0 0;list-style:none;display:grid;gap:10px}
.success-next li{display:flex;gap:12px;align-items:center;padding:12px 15px;background:#ffffff04;border:1px solid #ffffff12;border-radius:10px;font-size:12px;color:#d0cbdc}
.success-next span{color:var(--mint);font-size:10px}
body[data-motion=off] .trust-grid article,body[data-motion=off] .services article{--tilt-x:0deg!important;--tilt-y:0deg!important}
@media(max-width:1000px){.job-story{gap:24px}.job-steps article{padding:25px}.project-viewport{height:300px}}
@media(max-width:760px){.motion-design .video-hero{padding-top:24px;padding-bottom:40px}.motion-design .video-title h1{font-size:clamp(39px,10.3vw,62px)}.motion-design .video-title .lead{font-size:14px}.motion-design .hero-tags{gap:5px;margin-top:12px}.motion-design .hero-tags span{font-size:8px;padding:4px 8px}.motion-design .video-title{margin-bottom:22px}.project-section{gap:27px}.project-viewport{height:300px}.project-browser-footer{padding-inline:12px;flex-wrap:wrap}.browser-top{gap:9px;padding-inline:12px}.browser-address{font-size:9px}.job-story{grid-template-columns:1fr;gap:15px}.job-visual{position:relative;top:auto;padding:20px}.job-scene svg{max-height:190px;margin:6px 0}.job-visual-top{font-size:8px}.job-indicators{margin-top:15px}.job-steps article{min-height:0;padding:24px}.job-steps h3{font-size:24px}.motion-design .dialog-body{padding:24px 20px}.motion-design .choices label{padding:17px}.motion-design #success h3{font-size:27px}}
.motion-design .trust-grid article:hover,.motion-design .services article:hover{transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-5px)}
body[data-motion=off] .trust-grid article:hover,body[data-motion=off] .services article:hover{transform:none}
@media(min-width:1000px){.motion-design .video-title{display:grid;grid-template-columns:1.3fr 1fr;gap:8px 46px;text-align:left;max-width:none}.motion-design .video-title .eyebrow{grid-column:1/-1;justify-self:start;margin-bottom:6px}.motion-design .video-title h1{grid-column:1;grid-row:2/4;font-size:clamp(46px,4.7vw,66px);margin:0}.motion-design .video-title .lead{grid-column:2;grid-row:2;text-align:left;margin:0;align-self:end}.motion-design .hero-tags{grid-column:2;grid-row:3;justify-content:flex-start;margin-top:6px;align-self:start}}
@media(max-width:760px){.job-story{display:block}.job-visual{position:sticky;top:12px;z-index:2;padding:15px 20px;margin-bottom:18px;background:#171823;box-shadow:0 8px 30px #0005}.job-scene svg{max-height:130px}.job-visual-top{font-size:7px}.scene-label{font-size:10px}.job-indicators{margin-top:10px}.job-steps article{position:relative;z-index:1}}