﻿/* SCHULZKE / Montage in motion. Native scrolling, no input interception. */
.werk-site main>.montage-hero{padding:var(--header) 0 0;background:var(--graphite);color:var(--chalk);position:relative;isolation:isolate}
.montage-stage{height:calc(100svh - var(--header));min-height:620px;max-height:1100px;position:relative;overflow:hidden;isolation:isolate;background:var(--graphite)}
.montage-topline{position:absolute;z-index:6;top:26px;left:4.5vw;right:4.5vw;display:flex;justify-content:space-between;font-size:12px;color:#d2d3ca}
.montage-scene{position:absolute;left:35%;top:13%;width:65%;height:73%;perspective:1400px;transform:translateX(var(--scene-x,0px)) scale(var(--scene-scale,1));transform-origin:65% 50%;will-change:transform}
.montage-assembly{position:absolute;inset:0;transform:rotateY(var(--scene-y,-12deg)) rotateZ(var(--scene-z,-3deg));transform-style:preserve-3d;will-change:transform}
.montage-slice{position:absolute;inset:0;overflow:hidden;will-change:transform;backface-visibility:hidden}
.montage-slice img{width:100%;height:100%;object-fit:cover;object-position:50% 49%;transform:scale(var(--detail-scale,1));transform-origin:44% 50%;display:block;will-change:transform}
.slice-one{clip-path:inset(0 66.6% 0 0)}.slice-two{clip-path:inset(0 33.3% 0 33.3%)}.slice-three{clip-path:inset(0 0 0 66.6%)}
.montage-shade{position:absolute;inset:-2px;background:linear-gradient(90deg,rgba(36,39,37,.85),rgba(36,39,37,.08) 44%,transparent 60%);opacity:var(--shade,1);pointer-events:none}
.montage-angle{position:absolute;z-index:3;width:96px;height:96px;pointer-events:none;border-color:var(--orange);border-style:solid;border-width:0;will-change:transform}
.angle-one{top:-25px;left:8%;border-left-width:9px;border-top-width:9px;transform:translateX(var(--angle-x,0px))}.angle-two{bottom:-25px;right:4%;border-right-width:9px;border-bottom-width:9px;transform:translateX(calc(var(--angle-x,0px) * -1))}
.montage-intro{position:absolute;z-index:4;top:23%;left:4.5vw;width:57%;max-width:850px;transform:translateY(var(--intro-y,0px));opacity:var(--intro-opacity,1);will-change:transform,opacity}
.werk-site .montage-intro h1{font:600 clamp(66px,7.5vw,120px)/1.02 Outfit,Arial,sans-serif!important;letter-spacing:-.065em!important;color:var(--chalk)!important;margin:0 0 28px;max-width:none}
.montage-intro h1>span{display:block;color:inherit!important}.montage-intro>p{font-size:18px;line-height:1.7;max-width:39ch;color:#e6e6de;margin:0 0 32px}.montage-actions{display:flex;align-items:center;gap:28px}.montage-actions>a:last-child{font-size:14px;text-decoration:underline;text-underline-offset:6px;min-height:44px;display:flex;align-items:center}.montage-actions .werk-button{background:var(--orange);color:#171a18!important;font-size:15px;min-height:56px;padding:17px 21px}.montage-actions .werk-button:hover{background:var(--chalk);color:var(--graphite)!important}
.montage-detail-copy{position:absolute;left:5vw;top:25%;z-index:5;max-width:37%;opacity:var(--detail-opacity,0);transform:translateY(var(--detail-y,30px));pointer-events:none;color:var(--chalk);will-change:transform,opacity}.montage-detail-copy>span{font-size:13px}.montage-detail-copy>p{font:500 clamp(42px,5.8vw,88px)/1.05 Outfit,sans-serif;letter-spacing:-.05em;margin:22px 0 30px}.montage-detail-copy a{display:inline-flex;gap:24px;align-items:center;min-height:48px;font-size:15px;text-decoration:underline;text-underline-offset:7px}.montage-hero.is-detail .montage-detail-copy{pointer-events:auto}.montage-hero.is-detail .montage-intro{pointer-events:none}
.montage-bottom{position:absolute;left:4.5vw;right:4.5vw;bottom:30px;display:flex;justify-content:space-between;align-items:center;gap:35px;z-index:7;font-size:11px;color:#d0d1c8}.montage-bottom p{max-width:50ch}.montage-bottom>a{display:flex;gap:24px;align-items:center;min-height:44px;color:var(--chalk);font-size:13px}.montage-bottom>a>span{font-size:22px}
.montage-controls{position:absolute;right:4.5vw;top:64px;z-index:8;display:flex;align-items:center;gap:22px;font-size:11px;color:#d2d3ca}.montage-controls button{min-height:44px;display:flex;align-items:center;gap:13px;color:var(--chalk)}.montage-controls button[hidden]{display:none}.montage-controls button:hover{text-decoration:underline;text-underline-offset:5px}.montage-controls button>span{font-size:13px}.montage-scroll-note{border-left:1px solid #70766e;padding-left:22px}
.montage-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;z-index:8;background:#555a53}.montage-progress span{display:block;width:100%;height:100%;background:var(--orange);transform:scaleX(var(--progress,0));transform-origin:left}
/* Only enhanced motion receives scroll space. Static fallback is complete. */
.montage-hero.motion-ready{height:190svh;min-height:1300px}.montage-hero.motion-ready .montage-stage{position:sticky;top:var(--header)}
.montage-hero.is-entering .slice-one{animation:assemble-left 1.4s cubic-bezier(.19,1,.22,1) both}.montage-hero.is-entering .slice-two{animation:assemble-middle 1.5s cubic-bezier(.19,1,.22,1) both}.montage-hero.is-entering .slice-three{animation:assemble-right 1.6s cubic-bezier(.19,1,.22,1) both}.montage-hero.is-entering .angle-one{animation:angle-seat 1.6s cubic-bezier(.19,1,.22,1) both}.montage-hero.is-entering .angle-two{animation:angle-seat 1.7s cubic-bezier(.19,1,.22,1) both}
@keyframes assemble-left{from{transform:translate3d(-90px,-55px,110px) rotateY(-9deg)}to{transform:translate3d(0,0,0) rotateY(0)}}
@keyframes assemble-middle{from{transform:translate3d(0,85px,-100px)}to{transform:translate3d(0,0,0)}}
@keyframes assemble-right{from{transform:translate3d(110px,-30px,80px) rotateY(9deg)}to{transform:translate3d(0,0,0) rotateY(0)}}
@keyframes angle-seat{from{opacity:.35;translate:0 45px;scale:1.3}to{opacity:1;translate:0 0;scale:1}}
/* A service change is a single assembly movement, not a carousel. */
@keyframes werk-cut{from{clip-path:inset(0 0 0 100%);transform:translateX(24px)}to{clip-path:inset(0);transform:translateX(0)}}
.werk-service-stage.is-enhanced .werk-service[open] .werk-service-panel{animation:werk-cut .5s cubic-bezier(.19,1,.22,1)}
.werk-site .werk-project-heading h2{font:600 clamp(65px,7vw,110px)/1.03 Outfit,sans-serif!important;letter-spacing:-.06em!important}.werk-site #stellenangebote h2{font-family:Outfit,sans-serif!important;letter-spacing:-.055em!important;font-weight:600!important;line-height:1.05!important}
.werk-site .werk-request h2{font-family:Outfit,sans-serif!important;font-weight:600!important;letter-spacing:-.07em!important;line-height:1.02!important;font-size:clamp(70px,9vw,140px)!important}
.montage-reveal{transition:clip-path .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}.montage-reveal.awaiting{clip-path:inset(0 8% 0 0);transform:translateX(-28px)}.montage-reveal.has-entered{clip-path:inset(0);transform:translateX(0)}
@media(min-width:1600px){.montage-scene{left:32%;width:66%;height:76%;top:10%}.montage-intro{left:6vw;top:23%}.montage-detail-copy{left:6vw}}
@media(max-width:1000px) and (min-width:701px){.montage-stage{min-height:700px}.montage-intro{top:27%;width:65%}.werk-site .montage-intro h1{font-size:74px!important}.montage-intro>p{font-size:16px;max-width:32ch}.montage-scene{left:27%;width:80%;top:16%;height:70%}.montage-actions{gap:18px}.montage-actions .werk-button{font-size:14px;padding:15px}.montage-shade{background:linear-gradient(90deg,rgba(36,39,37,.92),rgba(36,39,37,.35) 55%,transparent)}.montage-controls{top:65px}.montage-scroll-note{display:none}}
@media(max-width:700px){
.werk-site main>.montage-hero{padding-top:var(--header)}.montage-stage{height:calc(100svh - var(--header));min-height:690px;max-height:950px}.montage-hero.motion-ready{height:170svh;min-height:1180px}.montage-topline{left:22px;right:22px;top:20px;font-size:10px;display:block}.montage-topline>span{display:block}.montage-topline>span+span{margin-top:2px}.montage-controls{right:18px;top:12px;font-size:10px}.montage-controls button{font-size:0;gap:0;width:44px;justify-content:center;border:1px solid #63685f}.montage-controls button span{font-size:14px}.montage-scroll-note{display:none}
.montage-intro{left:22px;top:89px;width:calc(100% - 44px);max-width:none}.werk-site .montage-intro h1{font-size:clamp(48px,13.7vw,78px)!important;line-height:1.01!important;letter-spacing:-.06em!important;margin-bottom:17px}.montage-intro>p{font-size:14px;line-height:1.5;max-width:32ch;margin-bottom:18px}.montage-actions{gap:17px;align-items:center}.montage-actions .werk-button{font-size:13px;padding:12px 14px;min-height:48px;gap:15px}.montage-actions>a:last-child{font-size:12px;white-space:nowrap}
.montage-scene{left:12%;top:49%;width:88%;height:40%;perspective:900px;transform-origin:58% 50%}.montage-assembly{transform:rotateY(var(--scene-y,-9deg)) rotateZ(var(--scene-z,-3deg))}.montage-slice img{object-position:50% 48%;transform-origin:44% 49%}.montage-shade{background:linear-gradient(90deg,rgba(36,39,37,.2),transparent 60%)}.montage-angle{width:55px;height:55px}.angle-one{top:-13px;left:5%;border-width:5px 0 0 5px}.angle-two{bottom:-13px;right:9%;border-width:0 5px 5px 0}
.montage-bottom{left:22px;right:22px;bottom:14px;gap:12px;align-items:flex-end;font-size:9px}.montage-bottom p{max-width:24ch;line-height:1.5}.montage-bottom>a{font-size:11px;gap:10px;max-width:140px}.montage-bottom>a>span{font-size:20px}
.montage-detail-copy{left:22px;top:15%;max-width:90%}.montage-detail-copy>span{font-size:11px}.montage-detail-copy>p{font-size:46px;line-height:1.02;margin:17px 0}.montage-detail-copy a{font-size:13px;gap:18px}.werk-site .werk-project-heading h2{font-size:54px!important}.werk-site .werk-request h2{font-size:75px!important}
}
@media(prefers-reduced-motion:reduce){.montage-hero.motion-ready{height:auto;min-height:0}.montage-hero.motion-ready .montage-stage{position:relative;top:0}.montage-hero *,.montage-reveal,.werk-service-panel{animation:none!important;transition:none!important}.montage-reveal.awaiting{clip-path:none;transform:none}.montage-scene,.montage-assembly,.montage-slice img,.montage-intro,.montage-detail-copy{will-change:auto}.montage-controls{display:none}}
.montage-controls{background:var(--graphite);padding:0 10px}.montage-controls button{font-weight:400}.montage-intro>p,.montage-bottom,.montage-topline{font-weight:400!important}
@media(max-width:700px){.montage-controls{background:transparent;padding:0}.montage-detail-copy{top:12%}.montage-detail-copy>p{font-size:42px}.montage-controls button{background:var(--graphite)}}
.montage-stage{contain:paint}
/* Reveal stays inside the service image bounds on narrow screens. */
@keyframes werk-cut{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
