/* Leichte Raumklima-Visualisierung: ein WebP, animierte SVG-Flächen, keine Videodatei. */
.hero-climate{position:relative;isolation:isolate;height:500px;overflow:hidden;border-radius:28px;background:#e9e4db;color:#df8b43;box-shadow:0 12px 38px #243b4b0a}
.hc-scene{display:block;width:100%;height:100%}.hc-energy{color:#df8b43;transition:color 1.6s ease}.hero-climate[data-mode=cool] .hc-energy{color:#439cca}
.hc-label{position:absolute;top:21px;left:22px;padding:8px 11px;border-radius:99px;background:#ffffffcf;color:#33444b;font-size:12px;font-weight:600;backdrop-filter:blur(10px)}.hc-label>span{font-weight:400;opacity:.7}
.hc-pause{position:absolute;right:20px;top:20px;width:34px;height:34px;display:grid;place-items:center;border:1px solid #ffffff6e;border-radius:50%;background:#ffffffcf;color:#33444b;backdrop-filter:blur(10px)}.hc-pause:hover{background:white}.hc-pause svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hc-pause .hc-play-symbol{display:none}.hero-climate[data-running=false] .hc-pause-symbol{display:none}.hero-climate[data-running=false] .hc-play-symbol{display:block}
.hc-caption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;gap:12px;background:#ffffffe0;border:1px solid #ffffffd9;border-radius:18px;backdrop-filter:blur(16px);padding:8px 10px;box-shadow:0 7px 25px #152e4312;color:var(--ink);overflow:hidden}
.hc-modes{display:flex;flex:0 0 174px;gap:2px;padding:3px;background:#edf0f1;border-radius:99px}.hc-modes button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;min-height:44px;padding:7px 9px;border:0;border-radius:99px;background:transparent;color:#687078;font-size:13px;line-height:1.4;transition:color .3s,background .3s,box-shadow .3s}.hc-modes button:disabled{cursor:default}.hc-modes button[aria-pressed=true]{background:#fff;color:#a3531c;box-shadow:0 2px 6px #2637460a}.hc-modes [data-hc-mode=cool][aria-pressed=true]{color:#28678e}.hc-modes svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hc-description{min-width:0;flex:1}.hc-description p{margin:0;font-size:13px;line-height:1.5;color:#4c5961;text-wrap:pretty}.hc-progress{position:absolute;bottom:0;left:16px;right:16px;height:2px;background:#e7eaec}.hc-progress>span{display:block;height:100%;background:#cc874e;transform:scaleX(0);transform-origin:left}.hero-climate[data-mode=cool] .hc-progress>span{background:#609dbf}
.hc-wave{opacity:0;transform-origin:580px 365px}.hc-wave ellipse{fill:none;stroke:currentColor;stroke-width:2.2}.hero-climate.is-enhanced .hc-wave{animation:hc-radiate 4.8s ease-out infinite}.hero-climate.is-enhanced[data-mode=cool] .hc-wave{animation-name:hc-absorb}.hero-climate.is-enhanced .hc-wave-two{animation-delay:-1.6s}.hero-climate.is-enhanced .hc-wave-three{animation-delay:-3.2s}
.hero-climate[data-running=false] .hc-wave{animation-play-state:paused}
.hc-nojs{position:absolute;bottom:0;left:0;right:0;background:white;color:#33444b;font-size:13px;padding:15px}
@keyframes hc-radiate{0%{transform:translateY(0) scale(.85,1);opacity:0}15%{opacity:.7}85%{opacity:.25}100%{transform:translateY(320px) scale(1.18,2.4);opacity:0}}
@keyframes hc-absorb{0%{transform:translateY(320px) scale(1.18,2.4);opacity:0}20%{opacity:.3}80%{opacity:.7}100%{transform:translateY(0) scale(.85,1);opacity:0}}
@media(max-width:1050px){.hero-climate{height:460px}}
@media(max-width:820px){.hero-climate{height:425px}.hc-label{left:15px;top:15px;font-size:12px}.hc-pause{top:14px;right:14px}.hc-caption{left:12px;right:12px;bottom:12px;padding:8px 10px}}
@media(max-width:600px){.hero-climate{height:440px;border-radius:24px}.hc-caption{left:14px;right:14px;bottom:14px}.hc-label{font-size:12px}.hc-modes button{font-size:13px}}
@media(max-width:360px){.hero-climate{height:405px}.hc-label{font-size:12px}.hc-caption{left:10px;right:10px;gap:8px;padding:7px 8px}.hc-modes{flex-basis:154px}.hc-modes button{gap:4px;padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.hero-climate .hc-wave{animation:none!important;opacity:0}.hc-energy,.hc-modes button{transition:none}}
/* SVG-Verläufe erben die Betriebsfarbe auch innerhalb der Definitionen. */
.hero-climate{transition:color 1.6s ease}.hero-climate[data-mode=cool]{color:#439cca}
@media(prefers-reduced-motion:reduce){.hero-climate{transition:none}}

/* Nur die Aussicht wechselt die Jahreszeit; der Innenraum bleibt exakt derselbe. */
.hc-winter-view{opacity:1;transition:opacity 1.6s ease}
.hero-climate[data-mode=cool] .hc-winter-view{opacity:0}
@media(prefers-reduced-motion:reduce){.hc-winter-view{transition:none}}