/* Auffälligere Fassung: dunkler Einstieg, Wärmebild-Regler, Förder-Rechner */
h2{font-size:clamp(2rem,5.4vw,3.4rem)}
.progress{position:fixed;top:0;left:0;right:0;height:4px;background:var(--sun);transform-origin:0 50%;transform:scaleX(0);z-index:30}

.hero{background:#0B211E;color:#fff;padding-bottom:56px}
.hero h1{font-size:clamp(2.6rem,9vw,5rem);max-width:none}
.hero .lead{color:#C4D6D0}
.hero-note{color:#9DB5AE}
.hero .btn{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.hero .btn:hover{background:#FFD057;border-color:#FFD057;color:var(--ink)}
.hero .btn.ghost{background:transparent;border-color:#fff;color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--ink)}
.hero .band{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.hero .band-cap{color:#9DB5AE}
.hero .pin.goal{background:var(--sun);border-color:var(--sun);color:var(--ink)}
.hero .pin.goal::after{border-top-color:var(--sun)}
.hero .pin.now{border-color:#fff}
.hero .pin.now::after{border-top-color:#fff}
@media (min-width:960px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);column-gap:56px;align-items:start}
  .hero .wrap>*{grid-column:1}
  .hero .wrap>.thermo{grid-column:2;grid-row:1/span 4;align-self:center;margin-top:0}
  .hero .wrap>.band{grid-column:1/-1}
}

.thermo{margin:36px 0 0}
.t-stage{position:relative;aspect-ratio:5/4;border-radius:18px;overflow:hidden;background:#1A0B3A;border:1px solid rgba(255,255,255,.2);--pos:55%}
.t-stage:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:3px}
.t-layer{position:absolute;inset:0}
.t-layer svg{width:100%;height:100%;max-width:none}
.t-layer.hot{background:radial-gradient(circle at 50% 62%,#6A1B6E 0,#1A0B3A 72%);--t-roof:#FF4A1C;--t-wall:#FF8A1F;--t-win:#FFF6B0;--t-door:#FFC43D;--t-chim:#FF3320;--t-ground:#2A1250}
.t-layer.hot svg{filter:drop-shadow(0 0 16px rgba(255,110,30,.6))}
.t-layer.cool{background:#07163A;clip-path:inset(0 0 0 var(--pos));--t-roof:#2B3FA8;--t-wall:#1D2E8A;--t-win:#2FA89C;--t-door:#2A58B8;--t-chim:#27379A;--t-ground:#0A1030}
.t-waves path{fill:none;stroke:#FFB03B;stroke-width:5;stroke-linecap:round;animation:rise 2.4s ease-in-out infinite}
.t-waves path:nth-child(2){animation-delay:.6s}
.t-waves path:nth-child(3){animation-delay:1.2s}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}40%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.t-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;transform:translateX(-50%)}
.t-handle::after{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:1.2rem}
.t-stage input{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:ew-resize}
.t-tag{position:absolute;top:12px;font-size:.8rem;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff}
.t-tag.l{left:12px}
.t-tag.r{right:12px}
.thermo figcaption{margin-top:10px;font-size:.88rem;color:#9DB5AE}

.service{transition:box-shadow .15s,padding .15s}
.service:hover{box-shadow:inset 6px 0 0 var(--sun);padding-left:18px}

#ablauf{background:var(--ink);color:#fff;border:0}
#ablauf .steps p{color:#C4D6D0}
.steps li::before{font-size:3.6rem}

.calc{margin-top:22px;background:var(--ink);color:#fff;border-radius:16px;padding:24px 20px}
@media (min-width:700px){.calc{padding:34px}}
.calc label{font-size:1.05rem;font-weight:600;margin:14px 0 4px}
.calc output{display:block;font-size:clamp(2.2rem,7vw,3.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:var(--sun)}
.calc input[type=range]{width:100%;min-height:44px;padding:0;border:0;background:transparent;accent-color:var(--sun);cursor:pointer}
.calc-out{display:grid;gap:14px;margin-top:14px}
@media (min-width:700px){.calc-out{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.calc-out div{border-top:2px solid rgba(255,255,255,.25);padding-top:10px}
.calc-out span{display:block;font-size:.95rem;color:#C4D6D0}
.calc-out strong{display:block;font-size:1.7rem;letter-spacing:-.02em}
.calc-out .hl{border-top-color:var(--sun)}
.calc-out .hl strong{color:var(--sun)}
.calc .fine{color:#9DB5AE}

.fab{position:fixed;left:12px;right:12px;bottom:12px;z-index:25;background:var(--sun);border-color:var(--sun);color:var(--ink);box-shadow:0 8px 24px rgba(16,48,44,.35);transform:translateY(140%);transition:transform .25s}
.fab:hover{background:#FFD057;border-color:#FFD057;color:var(--ink)}
.fab.show{transform:none}
@media (min-width:860px){.fab{display:none}}
@media (prefers-reduced-motion:reduce){.t-waves path{animation:none;opacity:1}.fab,.service{transition:none}}