@layer animation{
@keyframes reveal{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes trace{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes rise{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@keyframes thermal{from{mask-size:0% 0%;mask-position:64% 45%;opacity:0}to{mask-size:220% 220%;mask-position:64% 45%;opacity:1}}
@keyframes dial{from{transform:rotate(-115deg)}to{transform:rotate(115deg)}}
@keyframes climb{from{opacity:.16;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes pipe{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}
@keyframes travel{from{transform:translateX(-25px);opacity:.15}to{transform:translateX(35px);opacity:1}}
@keyframes fill{from{transform:scaleX(.25)}to{transform:scaleX(1)}}
.motion-full .in-motion{will-change:transform,opacity}
.motion-full .card{transition:transform 500ms var(--ease)}.motion-full .card:hover,.motion-full .card:focus-within{transform:translateY(-4px)}
.motion-full .scene-ready .trace{clip-path:inset(0 calc((1 - var(--fortschritt)) * 100%) 0 0)}
.motion-full .scene-ready .fill-up{clip-path:inset(calc((1 - var(--fortschritt)) * 100%) 0 0)}
.motion-full .scene-ready .thermal-warm{mask-size:calc(var(--fortschritt) * 240%) calc(var(--fortschritt) * 240%);mask-position:64% 45%;opacity:var(--fortschritt)}
.motion-full .scene-ready .dial-hand{transform-box:fill-box;transform-origin:50% 100%;transform:rotate(calc(-115deg + var(--fortschritt) * 230deg))}
.motion-full .scene-ready .flow-dot{transform:translateX(calc(var(--fortschritt) * 60px - 25px))}
.motion-full .scene-ready .step{opacity:clamp(.18,calc(var(--fortschritt) * 5 - var(--stufe,0)),1)}
.motion-full .scene-ready .scale-fill{transform-origin:left;transform:scaleX(calc(.25 + var(--fortschritt) * .75))}
.motion-full .document-pipe{clip-path:inset(0 0 calc((1 - var(--waerme)) * 100%))}
.motion-full .reading-rail{transform:scaleX(var(--waerme))}
.motion-full .reveal{opacity:0;transform:translateY(22px);transition:transform 500ms var(--ease),opacity 500ms var(--ease);transition-delay:calc(var(--stufe,0) * 60ms)}.motion-full .reveal.is-visible{opacity:1;transform:none}
@supports(animation-timeline:scroll()){
.motion-full.native-scroll .reveal{animation:reveal 500ms var(--ease) both;animation-timeline:view();animation-range:entry 0% entry 100%;transition:none}
.motion-full.native-scroll .document-pipe{animation:pipe 500ms linear both;animation-timeline:scroll(root);animation-range:0% 100%}
.motion-full.native-scroll .reading-rail{animation:fill 500ms linear both;animation-timeline:scroll(root);animation-range:0% 100%}
.motion-full.native-scroll .scene-ready .trace{animation:trace 500ms var(--ease) both;animation-timeline:--scene;animation-range:entry 10% exit 80%}
.motion-full.native-scroll .scene-ready .fill-up{animation:rise 500ms var(--ease) both;animation-timeline:--scene;animation-range:entry 15% exit 75%}
.motion-full.native-scroll .scene-ready .thermal-warm{animation:thermal 500ms linear both;animation-timeline:scroll(root);animation-range:0px 800px}
.motion-full.native-scroll .scene-ready .dial-hand{animation:dial 500ms linear both;animation-timeline:--scene;animation-range:entry 20% exit 80%}
.motion-full.native-scroll .scene-ready .flow-dot{animation:travel 500ms linear both;animation-timeline:--scene;animation-range:entry 0% exit 100%}
.motion-full.native-scroll .scene-ready .step{animation:climb 500ms var(--ease) both;animation-timeline:--scene;animation-range:entry calc(var(--stufe,0) * 6%) exit calc(50% + var(--stufe,0) * 6%)}
.motion-full.native-scroll .scene-ready .scale-fill{animation:fill 500ms linear both;animation-timeline:--scene;animation-range:entry 0% exit 100%}
}
[data-szene]{view-timeline-name:--scene;view-timeline-axis:block}
}
@layer utilities{
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html.motion-reduced{scroll-behavior:auto}html.motion-reduced *,html.motion-reduced *:before,html.motion-reduced *:after{animation:none!important;transform:none!important;transition:opacity 180ms linear!important;will-change:auto!important;scroll-behavior:auto!important}html.motion-reduced .reveal,html.motion-reduced .step{opacity:1!important}html.motion-reduced .trace,html.motion-reduced .fill-up,html.motion-reduced .document-pipe{clip-path:none!important}html.motion-reduced .thermal-warm{mask:none!important;opacity:1!important}html.motion-reduced .chronik-scroll{height:auto!important}html.motion-reduced .heatpump-section{min-height:0!important}html.motion-reduced .chronik-scroll>.container,html.motion-reduced .heatpump-section>.container{position:relative!important}html.motion-reduced .chronik-stage .timeline{display:grid!important;width:auto!important}html.motion-reduced .chronik-stage article{width:auto!important}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transform:none!important;transition:opacity 180ms linear!important;will-change:auto!important;scroll-behavior:auto!important}.reveal,.step{opacity:1!important}.trace,.fill-up,.document-pipe{clip-path:none!important}.thermal-warm{mask:none!important;opacity:1!important}.chronik-scroll{height:auto!important}.heatpump-section{min-height:0!important}.chronik-scroll>.container,.heatpump-section>.container{position:relative!important}.chronik-stage .timeline{display:grid!important;width:auto!important}.chronik-stage article{width:auto!important}}
@media print{.nav-toggle,.motion-toggle,.scene-controls,.mobile-call,.document-pipe,.reading-rail,canvas{display:none!important}*,*:before,*:after{animation:none!important;transform:none!important;position:static!important;box-shadow:none!important}.hero,.site-footer,.scene-panel{print-color-adjust:exact}.container{padding:24px}.szene{content-visibility:visible}.chronik-scroll{height:auto!important}.chronik-stage .timeline{display:block!important;width:auto!important}.chronik-stage article{width:auto!important;break-inside:avoid}.heatpump-section{min-height:0!important}.heatpump-stage>.poster{visibility:visible!important}.hero .container,.two-col,.grid,.reading-layout{display:block}.reading-nav{display:none}.reveal,.step{opacity:1!important}}
}

@layer komponenten{
.photo-panel{position:relative;overflow:hidden;background:var(--kalt-tief);border:1px solid var(--line);box-shadow:var(--shadow-2);isolation:isolate;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 44px) 100%,0 100%)}
.photo-panel img{width:100%;height:100%;min-height:320px;aspect-ratio:3/2;object-fit:cover;transform:scale(1.08) translate3d(0,calc(var(--poster-drift,0) * -28px),0);transition:transform 160ms linear;filter:saturate(.88) contrast(1.04)}
.photo-panel:after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#071a2400 28%,#071a24b8 100%);pointer-events:none}
.photo-panel figcaption{position:absolute;z-index:2;inset:auto 22px 20px;color:#e8edef;text-transform:uppercase;letter-spacing:.12em;display:flex;justify-content:space-between;gap:16px}
.photo-panel .image-tag{display:inline-flex;align-items:center;gap:8px}.photo-panel .image-tag:before{content:'◉';color:var(--accent-on-dark)}
.experience-dock{position:fixed;z-index:40;right:18px;top:50%;translate:0 -50%;width:172px;padding:12px;background:#071a24ed;color:#e8edef;border:1px solid #355463;box-shadow:0 20px 60px #0005;backdrop-filter:blur(14px);display:grid;grid-template-columns:44px 1fr;gap:8px 10px;align-items:center;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.dock-orbit{grid-row:1/3}.dock-orbit svg{width:44px;height:44px;rotate:-90deg}.dock-orbit circle{fill:none;stroke:#355463;stroke-width:2}.dock-orbit .dock-progress{stroke:#e7a178;stroke-dasharray:113.1;stroke-dashoffset:113.1;transition:stroke-dashoffset 100ms linear}
.dock-count{font:650 12px/1 var(--sans);letter-spacing:.12em;color:#e7a178}.dock-title{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#d7e0e4}.dock-actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.dock-actions button,.dock-actions a{display:grid;place-items:center;min-width:0;min-height:36px;border:1px solid #526b77;background:transparent;color:#e8edef;text-decoration:none}.dock-actions button:hover,.dock-actions a:hover{background:#e7a178;color:#071a24;border-color:#e7a178}
.card[data-widget]:after,.scene-panel[data-widget]:before{content:attr(data-widget);position:absolute;right:14px;top:12px;font:600 11px/1 var(--sans);letter-spacing:.12em;color:var(--muted)}
.process-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:32px 0;background:var(--line);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.process-flow article{position:relative;padding:28px;background:var(--warm-1);min-height:210px}
.process-flow article>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:34px;border:1px solid var(--accent);border-radius:50%;color:var(--accent);font-size:23px;box-shadow:inset 0 0 0 7px var(--warm-1),inset 0 0 0 8px var(--line)}
.process-flow article:not(:last-child):after{content:'→';position:absolute;right:-13px;top:42px;z-index:2;width:24px;height:24px;display:grid;place-items:center;background:var(--accent);color:var(--cold-deep);font:700 14px/1 var(--sans);border-radius:50%}
.process-flow h3{margin-bottom:8px}.process-flow p{margin:0;color:var(--muted)}
}

@layer animation{
.motion-full .scroll-poster>.container{opacity:calc(.18 + var(--poster-reveal,0) * .82);transform:perspective(1400px) translate3d(calc((1 - var(--poster-reveal,0)) * var(--poster-side,1) * 24px),calc((1 - var(--poster-reveal,0)) * 58px),0) rotateX(calc((1 - var(--poster-reveal,0)) * 5deg)) rotateY(calc((1 - var(--poster-reveal,0)) * var(--poster-side,1) * -2.5deg));transform-origin:50% 20%;transition:opacity 90ms linear,transform 90ms linear}
.motion-full .scroll-poster.hero>.container{transform-origin:50% 0}
.motion-full .scroll-poster.chronik-scroll>.container,.motion-full .scroll-poster.heatpump-section>.container{opacity:1;transform:none}
@media(max-width:1180px){.experience-dock{display:none}}
@media(max-width:920px){.process-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.process-flow article:nth-child(2):after{display:none}}
@media(max-width:639px){.photo-panel img{min-height:260px}.photo-panel figcaption{inset:auto 14px 12px;display:block}.photo-panel figcaption span{display:block;margin-top:4px}}
@media(max-width:639px){.process-flow{grid-template-columns:1fr}.process-flow article{min-height:0}.process-flow article:after{display:none!important}}
@media(prefers-reduced-motion:reduce){.scroll-poster>.container,.photo-panel img{opacity:1!important;transform:none!important}.experience-dock{display:none}}
@media print{.experience-dock{display:none!important}.photo-panel{clip-path:none}.photo-panel img{min-height:0}}
}