.motion-hero{isolation:isolate;height:calc(100svh - 72px);min-height:620px;padding:0 0 145px;display:flex;align-items:center;background:#16212a}.motion-hero::before{z-index:1;pointer-events:none}.motion-scenes{position:absolute;inset:0;z-index:0;overflow:hidden}.motion-scene{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0}.motion-scene.is-current{opacity:1}.motion-hero .hero-content{padding-top:0;margin-left:clamp(24px,5vw,96px);margin-right:24px;max-width:620px;transform:none;text-shadow:none}.motion-hero h1{font-size:clamp(48px,5.7vw,82px)}.motion-controls[hidden]{display:none}
/* The scene stays in view while normal document scrolling controls its camera. */
.motion-journey.is-pinned{height:420vh;position:relative}
.motion-journey.is-pinned .motion-hero{position:sticky;top:72px;height:calc(100vh - 72px);min-height:0}
.motion-scene{transform-origin:65% 48%;backface-visibility:hidden}
.motion-hero::before{background:linear-gradient(90deg,rgba(4,11,17,.78),rgba(4,11,17,.47) 43%,rgba(4,11,17,.08) 80%),linear-gradient(0deg,rgba(4,11,17,.65),transparent 35%)}
.motion-hero .hero-content{padding-block:45px 0}
.motion-hero .actions{flex-wrap:wrap}
.motion-controls{position:absolute;z-index:3;bottom:24px;left:clamp(24px,5vw,96px);right:clamp(24px,5vw,96px);color:#fff}
.motion-progress{height:2px;background:rgba(255,255,255,.3);margin-bottom:18px;overflow:hidden}
.motion-progress span{display:block;height:100%;background:#9fc5dc;transform:scaleX(.2);transform-origin:left}
.motion-toolbar{display:flex;justify-content:space-between;gap:20px;align-items:center}
.motion-chapters{display:flex;gap:8px;flex-wrap:wrap}
.motion-chapters button{font:inherit;font-size:12px;line-height:1.3;min-height:44px;padding:10px 14px;border:1px solid #ffffff50;background:#16212ab8;color:#fff;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.motion-chapters button span{font-size:10px;opacity:.75;margin-right:7px}
.motion-chapters button[aria-current]{background:#9fc5dc;color:#10202c;border-color:#9fc5dc}
.motion-chapters button:hover{border-color:white;background:#4e84aa}
.motion-chapters button:focus-visible,.motion-skip:focus-visible{outline:3px solid #fff;outline-offset:4px}
.motion-skip{font-size:11px;border-bottom:1px solid #ffffff70;padding:12px 0;white-space:nowrap}
#leistungen-start{scroll-margin-top:72px}
@media (max-width:1100px){.motion-toolbar{align-items:flex-start;flex-direction:column;gap:8px}.motion-hero{padding-bottom:190px}.motion-chapters button{padding-inline:10px}}
@media (max-width:900px),(max-height:650px){.motion-hero{height:auto;min-height:calc(100svh - 72px);padding-top:35px;padding-bottom:190px}.motion-hero .hero-content{margin-left:24px;padding-top:20px;max-width:560px}.motion-controls{left:24px;right:24px}.motion-scene{transition:opacity .65s ease}.motion-hero h1{font-size:clamp(40px,7vw,66px)}}
@media (max-width:480px){.motion-hero{padding-bottom:240px}.motion-hero h1{font-size:42px}.motion-hero p{font-size:15px}.motion-chapters{gap:6px}.motion-chapters button{font-size:11px;padding:9px}.motion-controls{bottom:18px}.motion-hero .actions{gap:8px}.motion-hero .btn{padding:13px 14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.motion-scene,.motion-chapters button{transition:none}.scroll b::after{animation:none}}

/* Larger opening copy, shifted approximately 13 cm (491 CSS px) right on desktop. */
.motion-hero .hero-content{
 --hero-copy-left:calc(clamp(24px,5vw,96px) + 491px);
 margin-left:var(--hero-copy-left);margin-right:24px;
 width:min(860px,calc(100% - var(--hero-copy-left) - 24px));
 max-width:none;flex-shrink:0;
}
.motion-hero h1{font-size:clamp(70px,8.4vw,120px)}
.motion-hero .eyebrow{font-size:17px}
.motion-hero p{font-size:23px;max-width:680px}
.motion-hero .actions .btn{font-size:15px}
@media(min-width:901px) and (max-width:1100px){
 .motion-hero .hero-content{--hero-copy-left:calc(5vw + 80px)}
}
@media(min-width:901px) and (min-height:651px) and (max-height:780px){
 .motion-hero .hero-content{padding-top:12px}
 .motion-hero h1{font-size:clamp(70px,8.4vw,100px)}
 .motion-hero p{font-size:20px}
}
@media(max-width:900px){
 .motion-hero .hero-content{--hero-copy-left:24px}
 .motion-hero h1{font-size:clamp(52px,9.5vw,88px)}
 .motion-hero .eyebrow{font-size:12px}
 .motion-hero p{font-size:20px}
}
@media(max-width:480px){
 .motion-hero h1{font-size:52px}
 .motion-hero p{font-size:18px}
 .motion-hero .actions .btn{font-size:12px}
}

/* Lift the opening copy 3 cm, limited by the space below the fixed header. */
@media(min-width:901px) and (min-height:651px){
 .motion-hero .hero-content{
  translate:0 max(-113px,min(0px,calc((100% - 100svh + 72px + var(--hero-bottom-space,145px)) / 2)));
 }
}
@media(min-width:901px) and (max-width:1100px){
 .motion-hero .hero-content{--hero-bottom-space:190px}
}

/* Mobile hero typography: 63.06048 percent of original after a further 12 percent increase. */
@media(max-width:900px){
 .motion-hero h1{font-size:clamp(32.7914496000px,5.9907456000vw,55.4932224000px)}
 .motion-hero .eyebrow{font-size:7.5672576000px}
 .motion-hero p{font-size:12.612096000px}
 .motion-hero .actions .btn{font-size:9.459072000px}
}
@media(max-width:480px){
 .motion-hero h1{font-size:32.7914496000px}
 .motion-hero p{font-size:11.3508864000px}
 .motion-hero .actions .btn{font-size:7.5672576000px}
}

/* Mobile hero photographs: 3 cm left from the previous position, net 2 cm right. */
@media(max-width:900px){
 .motion-hero .motion-scene{background-position:calc(50% + 76px) center}
}
@media(max-width:767px){
 .motion-hero .motion-scene:nth-child(4){background-position:calc(50% - 113px) center}
}

/* Move the mobile opening copy approximately 1 cm downward overall, after moving it 1 cm upward. */
@media(max-width:900px){
 .motion-hero .hero-content{position:relative;top:38px}
}

/* Match the earlier slides with a soft 650ms scene fade, including slide 4. */
.motion-hero .motion-scene{transition:opacity 1.1s cubic-bezier(.22,1,.36,1)}

/* Tablet copy: move a total of 10 cm (378 CSS px) left, keeping a 24px edge margin. */
@media(min-width:768px) and (max-width:900px){
 .motion-hero .hero-content{--hero-copy-left:24px}
}
@media(min-width:1367px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(clamp(24px,5vw,96px) + 491px - 189px))}
}
@media(min-width:901px) and (max-width:1100px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(5vw + 80px - 378px))}
}
@media(min-width:1101px) and (max-width:1366px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(clamp(24px,5vw,96px) + 491px - 378px))}
}
@media(min-width:1101px) and (max-width:1366px){
 .motion-hero .hero-content{--hero-copy-left:calc(24px - 113px)}
}
@media(min-width:1367px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(clamp(24px,5vw,96px) + 491px - 302px))}
}
@media(min-width:1101px) and (max-width:1366px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(24px - 170px))}
}
@media(min-width:768px) and (max-width:1100px) and (orientation:landscape){
 .motion-hero .hero-content{--hero-copy-left:100px}
}
@media(min-width:768px) and (max-width:1100px) and (orientation:landscape){
 .motion-hero .hero-content{--hero-copy-left:289px}
}
@media(min-width:768px){
 .motion-hero .hero-content{--hero-copy-left:113px}
}
@media(min-width:768px){
 .motion-hero h1{font-size:clamp(59px,5.1vw,98px)}
 .motion-hero p{font-size:clamp(17px,1.18vw,22px)}
 .motion-hero h1{line-height:.98}
 .motion-hero h1{font-weight:300}
 .motion-hero h1{min-height:1.96em}
 .motion-hero p{min-height:4.35em}
}
@media(min-width:768px){
 .motion-hero .hero-content{
  --hero-copy-left:clamp(24px,20vw,365px);
  width:min(680px,calc(100% - var(--hero-copy-left) - 32px));
  max-width:680px;
 }
 .motion-hero h1{font-size:clamp(62px,5.4vw,104px);line-height:.94;letter-spacing:-.025em}
 .motion-hero p{font-size:clamp(18px,1.25vw,23px);line-height:1.45;max-width:680px}
}
@media(min-width:768px){
 .motion-hero .hero-content{--hero-copy-left:113px}
}
@media(min-width:1367px){
 .motion-hero .hero-content{--hero-copy-left:max(24px,calc(clamp(24px,5vw,96px) + 491px - 359px))}
}
@media(max-width:767px){
 .motion-hero h1{min-height:1.96em}
 .motion-hero p{min-height:4.35em}
}
.motion-hero .motion-scene::after{
 content:"";position:absolute;inset:-12%;pointer-events:none;opacity:.16;
 background:radial-gradient(ellipse at 72% 28%,rgba(190,225,244,.32),transparent 24%),radial-gradient(ellipse at 28% 72%,rgba(159,197,220,.2),transparent 22%);
 mix-blend-mode:screen;animation:hero-light-drift 18s ease-in-out infinite alternate;
}
@keyframes hero-light-drift{
 0%{transform:translate3d(-2%,-1%,0) scale(1)}
 100%{transform:translate3d(3%,2%,0) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){.motion-hero .motion-scene::after{animation:none}}
.motion-skip{display:inline-flex;align-items:center;gap:10px}
.motion-skip::before{content:"";display:inline-block;width:14px;height:22px;border:1px solid currentColor;border-radius:9px;opacity:.8;background:linear-gradient(currentColor,currentColor) center 5px/2px 5px no-repeat;animation:scroll-cue 1.8s ease-in-out infinite}
@keyframes scroll-cue{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}
@media(prefers-reduced-motion:reduce){.motion-skip::before{animation:none}}