:root{color-scheme:dark;--ink:#eef3f4;--muted:#9daeb5;--navy:#101b22;--warm:#d58c64;--cool:#539abb;--water:#cbb584;--line:#30444f;--brand:#1cbdda;font-family:Arial,Helvetica,sans-serif;background:var(--navy);color:var(--ink)}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:5px}button{color:inherit}a{color:inherit}button:hover{border-color:#7cb7ca}::selection{background:#216484;color:white}
.scroll-track{height:650svh;position:relative}.scene-pin{height:100svh;min-height:560px;position:sticky;top:0;display:grid;grid-template-rows:88px 139px minmax(160px,1fr) 69px 28px;overflow:hidden;background:radial-gradient(ellipse at 60% 57%,#1d303a 0%,#121f27 45%,#101b22 80%)}
.site-header{margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #263740;gap:20px}.site-header img{width:165px;height:69px;object-fit:contain}.draft-label{font-size:11px;letter-spacing:2.2px;color:#a5b5bb;line-height:1.6}.draft-label span{display:block;font-size:9px;letter-spacing:1.9px;color:#7c909a}.overview-button{border:1px solid #415761;background:transparent;padding:12px 15px;font-size:12px;white-space:nowrap}.overview-button span{margin-left:18px;color:#94bcca}
.story-heading{margin:0 4.5%;padding-top:24px;position:relative;z-index:2;pointer-events:none}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2.2px;color:#b2c4cc;display:flex;gap:12px;align-items:center;margin:0 0 11px}.eyebrow-rule{height:1px;width:28px;background:#628a9c}h1{font-size:clamp(27px,3.5vw,44px);font-weight:500;letter-spacing:-1.3px;line-height:1.12;margin:0 0 10px}.story-heading>p:last-child{font-size:14px;color:#aebec5;margin:0;line-height:1.55;max-width:640px}
.drawing-area{position:relative;min-height:0;isolation:isolate;overflow:hidden}.drawing-area:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 35px 30px -35px #101b22,inset 0 -30px 30px -30px #101b22}#system-scene{width:100%;height:100%;display:block;overflow:hidden}.scene-corner{position:absolute;left:4.5%;bottom:14px;display:flex;align-items:center;gap:10px;color:#718893;font-size:8px;letter-spacing:1.5px;pointer-events:none}.corner-cross{font-size:19px;font-weight:400}.scroll-cue{position:absolute;bottom:17px;right:4.5%;display:flex;align-items:center;gap:12px;font-size:11px;color:#b2c2c9;transition:opacity .2s;pointer-events:none}.scroll-cue>span{font-size:20px;color:#90aab6}
.scene-controls{margin:0 4.5%;border-top:1px solid #2c414c;display:flex;align-items:center;justify-content:space-between;gap:30px}.flow-legend{display:flex;align-items:center;gap:20px;font-size:11px;color:#b7c6cb;white-space:nowrap}.flow-legend span{display:flex;align-items:center;gap:7px}.flow-legend i{display:block;width:15px;height:3px;background:var(--warm)}.flow-legend i.cool{background:var(--cool)}.flow-legend i.water{background:var(--water)}.flow-legend b{font-weight:400;color:#a8b6bc}.scrubber{width:240px;flex:0 1 240px}.scrubber label{display:flex;align-items:center;justify-content:space-between;font-size:10px;letter-spacing:.3px;color:#a9bec7}.scrubber output{font-variant-numeric:tabular-nums}.scrubber input{width:100%;accent-color:#99bbc9;cursor:ew-resize;display:block;margin:7px 0 0;height:16px}.motion-choice{font-size:11px;color:#a9bdc6;display:flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer}.motion-choice input{accent-color:#71a6bd;min-width:15px;min-height:15px;margin:0}.technical-caption{text-align:center;font-size:9px;letter-spacing:.4px;color:#8098a4}.technical-caption span{padding:0 9px}
.closing-section{background:#eeeae2;color:#172c37;display:grid;grid-template-columns:1.15fr 1fr;gap:12%;padding:75px 8% 82px;align-items:start}.closing-section .eyebrow{color:#627984}.closing-section h2{font-size:clamp(28px,4vw,46px);font-weight:500;letter-spacing:-1.4px;line-height:1.12;margin:15px 0}.closing-section p:not(.eyebrow){line-height:1.7;font-size:15px;max-width:440px;margin:24px 0}.restart-button{padding:13px 17px;background:#164e6a;color:white;border:0;font-size:12px;display:block}.restart-button span{margin-left:25px}.source-link{display:inline-block;margin-top:20px;color:#456574;font-size:11px;text-underline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.noscript-note{padding:20px;background:#263944}
.house{opacity:0}.room-surface{fill:#21343d;fill-opacity:.23;stroke:#3e5865;stroke-width:1.3}.structural{fill:none;stroke:#637b85;stroke-width:1.5;stroke-linejoin:round}.structural-soft{fill:none;stroke:#3f5964;stroke-width:1}.floor-line{fill:none;stroke:#65808b;stroke-width:2}.scene-label{font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:400;fill:#c0cfd5;letter-spacing:.4px}.scene-sublabel{fill:#7d98a6;font-size:16px;letter-spacing:1.2px}.device-label{opacity:0}.room-label{font-size:24px;fill:#afc2cb;letter-spacing:1.7px}.pipe{fill:none;stroke-linecap:round;stroke-linejoin:round}.pipe-shell{stroke:#0d171e;stroke-width:13}.pipe-rim{stroke:#41535d;stroke-width:10.5}.pipe-core{stroke-width:7}.pipe-sheen{stroke:#f2e9d8;stroke-opacity:.12;stroke-width:1.1}.warm-pipe{stroke:var(--warm)}.cool-pipe{stroke:var(--cool)}.water-pipe{stroke:var(--water)}.flow{stroke:#ffffff;stroke-opacity:.48;stroke-width:1.1;stroke-dasharray:1 23;animation:water-flow var(--flow-duration,5s) linear infinite;fill:none;stroke-linecap:round;stroke-linejoin:round}.fine .pipe-shell{stroke-width:8}.fine .pipe-rim{stroke-width:6}.fine .pipe-core{stroke-width:3.5}.fine .flow{stroke-width:.7;stroke-opacity:.7}.brand-word{fill:#e6ecee;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:600;letter-spacing:.2px}.reduced .flow,.paused .flow{animation-play-state:paused}.reduced .scroll-track{height:100svh;min-height:650px}.reduced .scene-pin{position:relative;min-height:650px}.reduced .scrubber{visibility:hidden}.reduced .scroll-cue{display:none}.reduced .overview-button{visibility:hidden}
@keyframes water-flow{to{stroke-dashoffset:-48}}
@media(min-width:1500px){.scene-pin{grid-template-rows:96px 155px minmax(240px,1fr) 76px 30px}.story-heading{padding-top:30px}.scene-controls{gap:50px}.flow-legend{font-size:12px}.scrubber{flex-basis:330px;width:330px}}
@media(max-width:760px){.scene-pin{grid-template-rows:72px 141px minmax(180px,1fr) 92px 34px;min-height:680px}.site-header{gap:10px;margin:0 5%}.site-header img{width:125px;height:55px}.draft-label{display:none}.overview-button{padding:10px 11px;font-size:11px}.overview-button span{margin-left:10px}.story-heading{margin:0 6%;padding-top:20px}h1{font-size:30px;letter-spacing:-.8px}.eyebrow{font-size:9px;letter-spacing:1.4px;margin-bottom:11px}.story-heading>p:last-child{font-size:12px;max-width:320px}.scene-controls{margin:0 6%;display:grid;grid-template-columns:1fr auto;grid-template-rows:31px 45px;gap:0 12px;align-content:center}.flow-legend{grid-column:1 / -1;justify-content:space-between;font-size:10px;gap:10px}.scrubber{width:auto;max-width:none}.scrubber label{font-size:9px}.motion-choice{font-size:10px;min-height:44px}.motion-choice input{width:17px;height:17px}.technical-caption{font-size:8px;letter-spacing:0;max-width:300px;margin:auto;line-height:1.5}.technical-caption span{padding:0 4px}.scene-corner{display:none}.scroll-cue{right:6%;bottom:7px;font-size:9px;gap:7px}.scroll-cue>span{font-size:15px}.closing-section{grid-template-columns:1fr;gap:0;padding:45px 7%}.closing-section h2{font-size:33px}.closing-section p:not(.eyebrow){font-size:14px;margin-top:20px}.mobile-scene .scene-label{font-size:28px}.mobile-scene .room-label{font-size:30px}.mobile-scene .scene-sublabel{font-size:22px}.reduced .scene-pin,.reduced .scroll-track{min-height:780px}.water-key{display:flex}}
@media(max-height:700px) and (min-width:761px){.scene-pin{grid-template-rows:70px 116px minmax(180px,1fr) 62px 25px}.site-header img{width:142px;height:60px}.story-heading{padding-top:18px}h1{font-size:32px}.story-heading>p:last-child{font-size:12px}}
/* Scene labels stay readable in the final overview. */
.scene-label{font-size:28px}.scene-sublabel{font-size:21px}.room-label{font-size:27px}
@media(max-width:760px){.scene-pin{grid-template-rows:62px 108px minmax(200px,1fr) 75px 24px}.site-header img{width:115px;height:52px}.story-heading{padding-top:13px}.eyebrow{font-size:8px;margin-bottom:8px}h1{font-size:25px;letter-spacing:-.6px;margin-bottom:8px}.story-heading>p:last-child{font-size:11px;line-height:1.4;max-width:320px}.scene-controls{grid-template-rows:25px 42px}.mobile-scene .scene-label{font-size:31px}.mobile-scene .room-label{font-size:34px}.mobile-scene .scene-sublabel{font-size:25px}}
/* Samsung split AC: separate refrigerant circuit and air movement. */
.ac-system{opacity:0}.refrigerant-shell{fill:none;stroke:#10252f;stroke-width:9;stroke-linejoin:round;stroke-linecap:round}.refrigerant-line{fill:none;stroke-width:4;stroke-linejoin:round;stroke-linecap:round}.refrigerant.cold .refrigerant-line{stroke:#6fc7d7}.refrigerant.warm .refrigerant-line{stroke:#d8a27f}.ac-pulse{fill:none;stroke:#f1fcff;stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:2.5 22.5;animation:refrigerant-travel 4s linear infinite,refrigerant-breathe 2.6s ease-in-out infinite}.refrigerant.warm .ac-pulse{stroke:#ffe8d6;animation-delay:-1s,-1.3s}.air-stream{fill:none;stroke-width:1.8;stroke-linecap:round;opacity:.58}.air-streams.cold .air-stream{stroke:#75cbd9}.air-streams.warm .air-stream{stroke:#dba47c}.air-pulse{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:13 87;animation:air-travel 3.4s linear infinite}.air-streams.cold .air-pulse{stroke:#b5eff5}.air-streams.warm .air-pulse{stroke:#f4c299}.air-cloud{animation:air-breathe 3.8s ease-in-out infinite}.ac-fan{transform-box:fill-box;transform-origin:center;animation:fan-turn 8s linear infinite}.air-label{font-family:Arial,Helvetica,sans-serif;font-size:27px;letter-spacing:.2px}.cold-label{fill:#87cbd7}.warm-label{fill:#d6aa89}.reduced .ac-pulse,.reduced .air-pulse,.reduced .air-cloud,.reduced .ac-fan,.paused .ac-pulse,.paused .air-pulse,.paused .air-cloud,.paused .ac-fan{animation-play-state:paused}
@keyframes refrigerant-travel{to{stroke-dashoffset:-50}}@keyframes refrigerant-breathe{0%,100%{opacity:.35}50%{opacity:.95}}@keyframes air-travel{0%{stroke-dashoffset:15;opacity:0}15%{opacity:.9}80%{opacity:.65}100%{stroke-dashoffset:-100;opacity:0}}@keyframes air-breathe{0%,100%{opacity:.45}50%{opacity:1}}@keyframes fan-turn{to{transform:rotate(360deg)}}
@media(max-width:760px){.mobile-scene .air-label{font-size:29px}}

/* One subject at a time; the complete system remains available on demand. */
.scene-pin{grid-template-rows:78px 118px minmax(200px,1fr) 62px 26px}.story-heading{padding-top:20px}.story-heading h1{font-size:clamp(26px,3.2vw,40px)}.scene-corner{display:none}.system-tabs{display:flex;align-items:center;gap:24px}.system-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:12px 0;font-size:12px;color:#8da3ad}.system-tabs button[aria-pressed=true]{color:#eff7f8;border-bottom-color:#1cbdda}.system-tabs a{font-size:11px;text-decoration:none;color:#a9bec7}.heating-system{transition:opacity .35s}.ac-system{transition:opacity .35s}#hoock-story[data-focus=climate] .heating-system{opacity:.12}#hoock-story[data-focus=climate] .heating-system .flow{animation-play-state:paused}#hoock-story[data-focus=heating] .ac-system{filter:saturate(.65)}#hoock-story[data-focus=heating] .ac-system *{animation-play-state:paused}#hoock-story[data-focus=climate] .ac-system{opacity:1!important}.pages-link{display:block;color:#164e6a;margin:22px 0;font-size:15px;text-underline-offset:6px}#hoock-story[data-focus=climate] .flow-legend{visibility:hidden}
@media(max-width:760px){.scene-pin{grid-template-rows:90px 108px minmax(200px,1fr) 75px 24px}.site-header{flex-wrap:wrap;gap:0;position:relative;padding-bottom:32px}.system-tabs{position:absolute;bottom:0;left:0;right:0;gap:22px;height:34px}.system-tabs button{padding:8px 0;font-size:11px}.system-tabs a{margin-left:auto;font-size:10px}.story-heading{padding-top:13px}.story-heading h1{font-size:25px}}

/* Service navigation stays separate from controls for the illustration. */
.home-service-nav{display:flex;align-items:center;gap:26px}.home-service-nav a,.home-contact-link{color:#c5d6df;text-decoration:none;font-size:13px;white-space:nowrap;padding:13px 0}.home-service-nav a:hover{color:white}.home-service-nav .all-services-link{background:#246c91;border:1px solid #5087a2;color:white;border-radius:8px;padding:12px 18px}.home-service-nav .all-services-link:hover{background:#2a7ba1}.home-contact-link{border:1px solid #486575;padding:12px 17px;border-radius:8px}
.story-heading{padding-right:0}.story-heading #scene-description{font-size:14px;color:#aebec5;margin:0;line-height:1.55;max-width:640px}.scene-overview{position:absolute;right:4.5%;top:4px;z-index:3;font-size:10px;padding:8px 11px;border-radius:7px;background:#142630dc}.scene-overview span{margin-left:9px}
@media(min-width:761px) and (max-width:1020px){.home-service-nav{gap:15px}.home-service-nav a{font-size:12px}.home-service-nav .all-services-link{padding:11px 13px}.home-contact-link{font-size:11px;padding:11px 12px}.site-header img{width:140px}.story-heading #scene-description{font-size:12px}}
@media(max-width:760px){.scene-pin{grid-template-rows:108px 108px minmax(200px,1fr) 75px 24px}.site-header{display:grid;grid-template-columns:1fr auto;grid-template-rows:58px 49px;gap:0;padding:0;align-items:center}.site-header>img{grid-column:1;grid-row:1}.home-contact-link{grid-column:2;grid-row:1;padding:9px 12px;font-size:11px;justify-self:end}.home-service-nav{grid-column:1/-1;grid-row:2;width:100%;gap:0;justify-content:space-between}.home-service-nav a{font-size:10px;padding:13px 0}.home-service-nav .all-services-link{padding:10px;font-size:11px;border-radius:7px}.story-heading{padding-top:14px}.story-heading #scene-description{font-size:11px;line-height:1.4;max-width:340px;margin:0}.scene-overview{right:6%;top:2px;font-size:9px;padding:7px 10px}.story-heading h1{font-size:25px}}
@media(max-width:360px){.home-service-nav a{font-size:9px}.home-service-nav .all-services-link{font-size:10px;padding:9px}.story-heading #scene-description{font-size:10px}.story-heading h1{font-size:23px}}

/* More breathing room between the chapter copy and the moving system. */
#hoock-story .scene-pin{grid-template-rows:78px 160px minmax(200px,1fr) 62px 26px}
@media(max-width:760px){#hoock-story .scene-pin{grid-template-rows:108px 140px minmax(200px,1fr) 75px 24px}}
@media(max-height:700px) and (min-width:761px){#hoock-story .scene-pin{grid-template-rows:70px 146px minmax(160px,1fr) 62px 26px}}

.sanitary-system{opacity:0;transition:opacity .3s}.potable-core{stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}.potable-pipe .pipe-shell{stroke-width:8}.potable-pipe.hard .potable-core,.potable-core.hard{stroke:#6fabbf}.potable-pipe.soft .potable-core,.potable-core.soft{stroke:#9fbc7b}.potable-pipe .flow{stroke-width:1;stroke-opacity:.6}.home-tap-water,.home-shower-water{animation:home-water 2.2s linear infinite}.softener-ring{animation:softener-status 4.5s ease-in-out infinite}#hoock-story[data-focus=water] .heating-system{opacity:.22}#hoock-story[data-focus=water] .heating-system .flow{animation-play-state:paused}#hoock-story[data-focus=climate] .sanitary-system{opacity:.2!important}.reduced .home-tap-water,.reduced .home-shower-water,.reduced .softener-ring,.paused .home-tap-water,.paused .home-shower-water,.paused .softener-ring{animation-play-state:paused}@keyframes home-water{to{stroke-dashoffset:-40}}@keyframes softener-status{0%,100%{opacity:.5}50%{opacity:1}}.flow-legend .sanitary-key{display:none}#hoock-story[data-focus=water] .flow-legend>span{display:none}#hoock-story[data-focus=water] .flow-legend .sanitary-key{display:flex}.flow-legend i.hard-water{background:#6fabbf}.flow-legend i.soft-water{background:#9fbc7b}

#hoock-story[data-focus=water] .ac-system{opacity:.35!important}
.home-legal-footer{background:#101b22;padding:28px 5%;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;color:#b2c4ce;border-top:1px solid #30444f}.home-legal-footer a{color:inherit;font-size:14px;text-underline-offset:5px}.home-legal-footer nav{display:flex;flex-wrap:wrap;gap:25px}
@media(max-width:760px){#hoock-story .scene-pin{min-height:0;grid-template-rows:108px 164px minmax(120px,1fr) 82px 24px}.home-service-nav a[href*="ueber-uns"],.home-service-nav a[href*="partner"]{display:none}.home-service-nav a,.home-service-nav .all-services-link{font-size:13px;min-height:44px;display:inline-flex;align-items:center;padding:10px 14px}.home-contact-link{font-size:12px;min-height:44px;display:flex;align-items:center}.story-heading #scene-description{font-size:13px;line-height:1.5}.story-heading .eyebrow{font-size:9px}.scrubber label{font-size:11px}.motion-choice{font-size:11px}.scene-overview{font-size:11px;min-height:36px}.flow-legend{font-size:11px}.reduced .scene-pin{min-height:720px}}
@media(max-width:360px){.home-service-nav a,.home-service-nav .all-services-link{font-size:12px;padding:10px}.story-heading h1{font-size:24px}.story-heading #scene-description{font-size:12px}}
#hoock-story[data-focus=water] .house .scene-sublabel{opacity:.2}
#system-scene .scene-label,#system-scene .scene-sublabel,#system-scene .air-label,#system-scene .room-label{paint-order:stroke;stroke:#14242d;stroke-width:7px;stroke-linejoin:round}
@media(max-width:760px){#system-scene .scene-label{font-size:27px}#system-scene .scene-sublabel{font-size:21px}}
#system-scene .water-annotation{font-size:18px}