/* Cinematic scroll choreography on the existing FM design. */
@media(prefers-reduced-motion:no-preference){
 .button{transition:transform .4s cubic-bezier(.22,1,.36,1),background .25s,box-shadow .35s}
 .button:active{transform:scale(.97)}
 .button>span,.textlink>span{transition:transform .4s cubic-bezier(.22,1,.36,1)}
 .button:hover>span,.textlink:hover>span{transform:translateX(5px)}
 .hero-people,.people-image{overflow:hidden}
 .cinema-on .people-section,.cinema-on #funktionen,.cinema-on .proof-band{overflow:clip}
 .people-image img{transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
 @media(hover:hover) and (pointer:fine){.people-card:hover img{transform:scale(1.07)}}
 @media(min-width:1000px) and (min-height:700px){
  .cinema-on .hero{min-height:175svh;overflow:clip}
  .cinema-on .hero-grid{position:sticky;top:120px}
  .cinema-on .hero-copy{transform:translateX(var(--hero-copy-x,0px));opacity:var(--hero-copy-alpha,1)}
  .cinema-on .hero-people{transform:perspective(1600px) translateX(var(--hero-x,0px)) scale(var(--hero-scale,1)) rotateY(var(--hero-turn,0deg));transform-origin:60% 50%}
  .cinema-on .hero-person{transform:scale(var(--hero-photo-scale,1));transform-origin:57% 50%}
 }
 @media(min-width:761px) and (min-height:650px){
  .cinema-on .product-section{padding-top:36px;overflow:clip}
  .cinema-stage{height:235svh;position:relative}
  .cinema-pin{position:sticky;top:108px;perspective:1800px}
  .cinema-on .product-header{margin-bottom:22px}
  .cinema-on .product-header .eyebrow{margin-bottom:12px}
  .cinema-on .product-header>p{margin-top:14px}
  .cinema-on .product-window{width:min(100%,calc((100svh - 430px)*1.79));margin-inline:auto;transform:translateY(var(--screen-y,40px)) rotateX(var(--screen-tilt,16deg)) scale(var(--screen-scale,.56));transform-origin:50% 0%;box-shadow:0 35px 90px #244b632a}
  .cinema-on .product-note{opacity:var(--screen-note,1);transform:translateY(var(--note-y,0px))}
 }
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Headline masks reveal the existing editorial lines without changing the type treatment. */
.headline-mask{display:block;overflow:clip;padding-block:.12em;margin-block:-.12em}
.headline-ink{display:block}
.hero h1 .headline-mask,.hero h1 .headline-ink{color:inherit}
@media(prefers-reduced-motion:reduce){.headline-mask{overflow:visible}.headline-ink{transform:none!important;opacity:1!important}}