/* Kaizen – scroll-driven cinematic hero */
.k3d{--k3d-green:#1F4D3A;--k3d-green-l:#3f8f6b;position:relative;height:730vh;background:#050605;color:#eeece6;isolation:isolate}
.k3d-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1200px;perspective-origin:50% 45%}
.k3d-stage{position:absolute;inset:0;transform-style:preserve-3d}
.k3d-frame{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform;transform-style:preserve-3d;background:#050605}
.k3d-poster,.k3d-canvas,.k3d-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#050605}
.k3d-canvas{opacity:0;transition:opacity .4s;background:transparent}
/* ambient backdrop: tiny canvas scaled up + GPU blur (works in Safari, which lacks ctx.filter) */
.k3d-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:blur(22px) brightness(.38) saturate(1.1);opacity:0;transition:opacity .4s}
.k3d.is-live .k3d-bg{opacity:1}
.k3d.is-fallback .k3d-bg{display:none}
.k3d-video{display:none}
.k3d.is-fallback .k3d-video{display:block}.k3d.is-fallback .k3d-canvas{display:none}
button.k3d-btn{cursor:pointer}
.k3d.is-live .k3d-canvas{opacity:1}
.k3d.is-live .k3d-poster{visibility:hidden}
.k3d-light{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
 background:radial-gradient(60% 45% at var(--lx,20%) 105%,rgba(63,143,107,.55),transparent 70%),radial-gradient(40% 35% at 95% -5%,rgba(31,77,58,.7),transparent 70%)}
.k3d-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 85% at 50% 48%,transparent 45%,rgba(3,4,3,.78) 100%),linear-gradient(90deg,rgba(4,5,4,.72) 0%,rgba(4,5,4,.25) 45%,transparent 70%)}
.k3d-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.12;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
 animation:k3d-grain .9s steps(6) infinite}
@keyframes k3d-grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.k3d-bar{position:absolute;left:0;right:0;height:var(--barpx,4vh);background:#030403;z-index:3;pointer-events:none;}
.k3d-bar-top{top:0}.k3d-bar-bottom{bottom:0}
.k3d-bar{animation:k3d-open 1.4s cubic-bezier(.7,0,.2,1) .35s backwards}
.k3d-bar-top{transform-origin:top}.k3d-bar-bottom{transform-origin:bottom}
@keyframes k3d-open{from{transform:scaleY(6)}to{transform:scaleY(1)}}
.k3d-captions{animation:k3d-fadein 1.1s ease 1.1s backwards}
@keyframes k3d-fadein{from{opacity:0}to{opacity:1}}
.k3d-captions{position:absolute;inset:0;z-index:4;perspective:900px;pointer-events:none}
.k3d-beat{position:absolute;left:clamp(22px,7vw,120px);bottom:clamp(90px,17vh,190px);max-width:min(760px,84vw);opacity:0;visibility:hidden;will-change:transform,opacity;transform-style:preserve-3d}
.k3d-beat.is-on{visibility:visible}
.k3d-kicker{display:inline-flex;align-items:center;gap:12px;font:700 11px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#b9d8c7;margin-bottom:22px}
.k3d-kicker:before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--k3d-green-l),transparent)}
.k3d-beat h2{margin:0;font-family:Arial Narrow,Helvetica Neue,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.86;font-size:clamp(28px,min(6.6vw,11vh),108px);text-shadow:0 10px 50px rgba(0,0,0,.55)}
.k3d-beat h2 em{font-family:inherit;font-weight:800;font-style:normal;color:transparent;-webkit-text-stroke:1.5px #eeece6}
.k3d-beat h2.k3d-big{font-size:clamp(40px,min(11vw,18vh),190px)}
.k3d-beat p{max-width:520px;margin:22px 0 0;font:400 clamp(15px,1.25vw,18px)/1.55 Helvetica Neue,Arial,sans-serif;color:rgba(238,236,230,.8)}
.k3d-final{bottom:clamp(90px,14vh,160px)}
.k3d-final.is-on{pointer-events:auto}
.k3d-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.k3d-btn{display:inline-flex;align-items:center;gap:12px;min-height:58px;padding:0 28px;border:1px solid rgba(238,236,230,.35);color:#eeece6;text-decoration:none;font:800 12px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;background:rgba(8,9,7,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .25s,border-color .25s,transform .25s}
.k3d-btn:hover{border-color:#eeece6;transform:translateY(-2px)}
.k3d-btn small{font-size:12px;letter-spacing:.06em;opacity:.8;font-weight:600}
.k3d-btn-primary{background:var(--k3d-green);border-color:var(--k3d-green-l);box-shadow:0 12px 40px rgba(31,77,58,.45),inset 0 1px 0 rgba(255,255,255,.12)}
.k3d-btn-primary:hover{background:#26604a}
.k3d-progress{position:absolute;z-index:5;right:clamp(16px,3vw,44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:700 10px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.14em;color:rgba(238,236,230,.7);font-variant-numeric:tabular-nums}
.k3d-track{position:relative;width:2px;height:min(38vh,300px);background:rgba(238,236,230,.16)}
.k3d-track i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(#eeece6,var(--k3d-green-l));transform-origin:top;transform:scaleY(var(--p,0))}
.k3d-track b{position:absolute;left:-3px;width:8px;height:1px;background:rgba(238,236,230,.5)}
.k3d-hint{position:absolute;z-index:5;left:50%;bottom:max(calc(var(--barpx,0px) / 2 - 7px),16px);transform:translateX(-50%);display:flex;flex-direction:row;align-items:center;gap:12px;pointer-events:none;font:700 10px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase;color:rgba(238,236,230,.75);transition:opacity .5s}
.k3d-hint i{width:1px;height:14px;background:linear-gradient(#eeece6,transparent);animation:k3d-cue 1.8s ease-in-out infinite}
@keyframes k3d-cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.k3d.is-scrolled .k3d-hint{opacity:0;transition-duration:.2s}
.k3d-loader{position:absolute;z-index:6;left:clamp(22px,7vw,120px);top:calc(var(--barpx,4vh) + 110px);display:flex;align-items:center;gap:10px;font:700 10px/1 Helvetica Neue,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(238,236,230,.7);transition:opacity .6s}
.k3d-loader i{width:12px;height:12px;border:1.5px solid rgba(238,236,230,.25);border-top-color:#8fcfae;border-radius:50%;animation:k3d-spin .8s linear infinite}
.k3d-loader b{font-variant-numeric:tabular-nums;color:#eeece6}
@keyframes k3d-spin{to{transform:rotate(360deg)}}
.k3d.is-loaded .k3d-loader{opacity:0}
.k3d-endfade{position:absolute;left:0;right:0;bottom:0;height:28vh;background:linear-gradient(transparent,#080907);pointer-events:none;z-index:3;opacity:calc((var(--p,0) - .9) * 10)}
/* portrait / phones: full 16:9 frame above centre on blurred backdrop, captions in the dark area below */
.k3d.is-stack .k3d-beat{top:var(--ct,60%);bottom:auto;left:20px;right:20px;max-width:640px}
.k3d.is-stack .k3d-vignette{background:radial-gradient(140% 70% at 50% 40%,transparent 50%,rgba(3,4,3,.7) 100%)}
.k3d.is-stack .k3d-hint{bottom:20px}
@media (max-width:760px){
 .k3d.is-stack .k3d-hint{bottom:calc(56px + 16px + env(safe-area-inset-bottom))}
 .k3d.is-stack .k3d-final p{display:none}
 .k3d.is-stack .k3d-ctas{flex-direction:row}
 .k3d.is-stack .k3d-ctas .k3d-btn{flex:1;padding:0 12px;letter-spacing:.1em}
 .k3d.is-stack .k3d-btn small{display:none}
 .k3d.is-stack .k3d-kicker{margin-bottom:12px}

 .k3d{height:600vh}
 .k3d-sticky{perspective:800px}
 .k3d-beat{left:20px;right:20px;bottom:calc(56px + 11vh + env(safe-area-inset-bottom));max-width:none}
 .k3d-final{bottom:calc(56px + 6vh + env(safe-area-inset-bottom))}
 .k3d-kicker{font-size:10px;letter-spacing:.2em;margin-bottom:16px}
 .k3d-beat h2{font-size:clamp(26px,min(10.4vw,6.2vh),58px);font-size:clamp(26px,min(10.4vw,6.2svh),58px)}
 .k3d-beat h2.k3d-big{font-size:clamp(40px,min(14.5vw,8.5vh),80px);font-size:clamp(40px,min(14.5vw,8.5svh),80px)}
 .k3d-beat p{font-size:15px;margin-top:16px}
 .k3d-ctas{flex-direction:column;gap:10px;margin-top:24px}
 .k3d-btn{justify-content:center;min-height:54px}
 .k3d-progress{right:10px;top:auto;bottom:auto;top:90px;transform:none}
 .k3d-progress .k3d-tc-end{display:none}
 .k3d-track{height:90px}
 .k3d-loader{left:20px;top:94px}
 .k3d-vignette{background:radial-gradient(130% 80% at 50% 40%,transparent 40%,rgba(3,4,3,.8) 100%),linear-gradient(transparent 35%,rgba(4,5,4,.82) 88%)}
}
/* short landscape (phones held sideways): captions in a compact column left, full-height image right */
.k3d.is-side .k3d-beat{left:14px;right:auto;width:var(--capw,240px);max-width:none;top:var(--ct,70px);bottom:var(--cb,14px);display:flex;flex-direction:column;justify-content:center}
.k3d.is-side .k3d-kicker{font-size:9px;letter-spacing:.16em;margin-bottom:10px;gap:8px}
.k3d.is-side .k3d-kicker:before{width:18px}
.k3d.is-side .k3d-beat h2{font-size:clamp(14px,min(3.2vw,7.5vh),34px);font-size:clamp(14px,min(3.2vw,7.5svh),34px);letter-spacing:-.03em;line-height:.92}
.k3d.is-side .k3d-beat h2.k3d-big{font-size:clamp(20px,min(4.4vw,11vh),48px);font-size:clamp(20px,min(4.4vw,11svh),48px)}
.k3d.is-side .k3d-beat h2 em{-webkit-text-stroke:1px #eeece6}
.k3d.is-side .k3d-beat p{display:none}
.k3d.is-side .k3d-ctas{flex-direction:column;gap:8px;margin-top:14px}
.k3d.is-side .k3d-btn{min-height:40px;padding:0 14px;font-size:10px;letter-spacing:.1em;justify-content:center}
.k3d.is-side .k3d-btn small{display:none}
.k3d.is-side .k3d-progress,.k3d.is-side .k3d-hint,.k3d.is-side .k3d-bar{display:none}
.k3d.is-side .k3d-loader{left:14px;top:auto;bottom:calc(var(--cb,14px) + 4px)}
.k3d.is-side .k3d-vignette{background:linear-gradient(90deg,rgba(4,5,4,.75),rgba(4,5,4,.2) 40%,transparent 60%)}
/* short landscape (iOS Safari sideways with tab + address bar: ~220-330px tall): compact chrome */
@media (orientation:landscape) and (max-height:520px){
 html body .header{height:44px;padding:0 16px}
 html body .logo{width:84px;height:34px}
 html body .header-call span{display:none}
 html body .header-call b{font-size:12px}
 html body .mobile-menu nav{top:44px}
 html body .mobile-actions a{height:40px;font-size:10px}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:680px){
 html body .header{grid-template-columns:1fr 36px 36px}
 html body .header-call,html body .mobile-menu summary{width:36px;height:36px}
}
/* JS fallback (class set by hero3d.js when innerWidth>innerHeight && innerHeight<520) */
body:has(.k3d.is-side) .header{height:44px;padding:0 16px}
body:has(.k3d.is-side) .logo{width:84px;height:34px}
body:has(.k3d.is-side) .header-call span{display:none}
.k3d.is-side .k3d-kicker{margin-bottom:8px}
@media (max-height:340px){
 .k3d.is-side .k3d-kicker{font-size:8px;margin-bottom:6px;letter-spacing:.12em}
 .k3d.is-side .k3d-beat h2{line-height:.9}
 .k3d.is-side .k3d-ctas{flex-direction:row;gap:6px;margin-top:10px}
 .k3d.is-side .k3d-btn{min-height:32px;padding:0 8px;font-size:9px;letter-spacing:.06em;flex:1}
 .k3d.is-side .k3d-btn span{display:none}
}
/* existing hero headline ("Küchenabluft. Sauber bis ins System.") must fit narrow phones & short landscape */
@media (max-width:680px){html body .hero h1{font-size:clamp(34px,min(12.6vw,8.5vh),82px);font-size:clamp(34px,min(12.6vw,8.5svh),82px)}}
@media (orientation:landscape) and (max-height:520px){html body .hero h1{font-size:clamp(34px,min(8vw,15vh),96px);font-size:clamp(34px,min(8vw,15svh),96px)}}
@media (max-aspect-ratio:13/10){.k3d-poster,.k3d-video{object-position:50% 34%}}
@media (prefers-reduced-motion:reduce){
 .k3d{height:auto;min-height:100svh}
 .k3d-sticky{position:relative;height:auto;min-height:100svh;perspective:none}
 .k3d-captions{animation:none}
 .k3d-frame{inset:0;transform:none!important}
 .k3d-poster{content:url(/hero3d/poster-end.webp)}
 .k3d-video{display:block}
 .k3d.is-playing .k3d-captions,.k3d.is-playing .k3d-vignette,.k3d.is-playing .k3d-light{display:none}
 .k3d.is-playing .k3d-video{object-fit:contain;background:#000}
 .k3d-canvas,.k3d-bg,.k3d-grain,.k3d-bar,.k3d-hint,.k3d-loader,.k3d-progress,.k3d-endfade{display:none}
 .k3d-vignette{background:linear-gradient(90deg,rgba(4,5,4,.9),rgba(4,5,4,.55) 60%,rgba(4,5,4,.35)),linear-gradient(transparent 50%,rgba(4,5,4,.85))}
 .k3d-captions{position:relative;inset:auto;perspective:none;pointer-events:auto;padding:130px clamp(20px,7vw,120px) 110px;display:flex;flex-direction:column;gap:30px}
 .k3d-beat{position:relative;left:auto;right:auto;bottom:auto;opacity:1;visibility:visible;transform:none!important;filter:none!important}
 .k3d-beat p{display:none}
 .k3d-beat h2,.k3d-beat h2.k3d-big{font-size:clamp(28px,3.6vw,52px)}
 .k3d-final p{display:block}
 .k3d-final h2{font-size:clamp(44px,6vw,96px)!important}
 .k3d-final{pointer-events:auto}
}