/* Bewegungen. Alles unter .js-anim läuft nur mit Skript und ohne "Bewegung reduzieren". */
:root{--E:cubic-bezier(.2,.7,.2,1)}

/* Einstieg */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative}
.js-anim .hero::before{content:"";position:absolute;inset:-30% -20%;pointer-events:none;background:radial-gradient(40% 45% at 78% 40%,rgba(255,110,30,.3),transparent 70%),radial-gradient(38% 42% at 12% 78%,rgba(47,168,156,.24),transparent 70%);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(-3%,2%,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.14)}}
.js-anim .hero h1{opacity:0}
.js-anim .hero h1.split{opacity:1}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .wi{display:inline-block;transform:translateY(115%);animation:wordUp .9s var(--E) both;animation-delay:calc(var(--i)*80ms + 100ms)}
@keyframes wordUp{to{transform:none}}
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js-anim .hero .lead{animation:up .8s var(--E) .55s both}
.js-anim .hero-actions{animation:up .8s var(--E) .7s both}
.js-anim .hero-note{animation:up .8s var(--E) .85s both}
.js-anim .thermo{animation:zoom 1s var(--E) .35s both}
@keyframes zoom{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:none}}
.js-anim .hero-actions .btn:first-child{position:relative;overflow:hidden}
.js-anim .hero-actions .btn:first-child::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:shine 4.5s ease-in-out 2s infinite}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}

/* Wärmebild */
.js-anim .t-layer.hot svg{animation:glow 2.8s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 10px rgba(255,110,30,.45))}50%{filter:drop-shadow(0 0 30px rgba(255,140,40,.95))}}
.js-anim .t-handle::after{animation:ring 1.6s ease-out infinite}
@keyframes ring{from{box-shadow:0 0 0 0 rgba(255,255,255,.7)}to{box-shadow:0 0 0 18px rgba(255,255,255,0)}}
.js-anim .t-stage.used .t-handle::after{animation:none}

/* Effizienzband: startet erst, wenn es sichtbar wird */
.js-anim .band .pin.goal{animation:none;left:83.33%;opacity:0}
.js-anim .band.in .pin.goal{animation:toGoal 2s cubic-bezier(.6,.05,.2,1) .9s both}
.js-anim .band .scale span{opacity:.18;transform:scaleY(.55);transition:opacity .35s,transform .5s var(--E);transition-delay:calc((9 - var(--n))*70ms)}
.js-anim .band.in .scale span{opacity:1;transform:none}

/* Einblenden beim Scrollen */
.js-anim .rv{opacity:0;transform:translateY(30px)}
.js-anim .rv.in{opacity:1;transform:none;transition:opacity .7s var(--E) var(--d,0ms),transform .7s var(--E) var(--d,0ms),box-shadow .15s,padding .15s}

/* Ablauf: Linie zeichnet sich, Ziffer springt herein */
.js-anim .steps li{border-top-color:transparent;position:relative}
.js-anim .steps li::after{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--sun);transform:scaleX(0);transform-origin:0 50%;transition:transform .9s var(--E) var(--d,0ms)}
.js-anim .steps li.in::after{transform:none}
.js-anim .steps li::before{transform:scale(.3);opacity:0;transform-origin:0 100%;transition:transform .6s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0ms) + .25s),opacity .3s calc(var(--d,0ms) + .25s)}
.js-anim .steps li.in::before{transform:none;opacity:1}

/* Haus und Rechner */
.js-anim .house svg .p.on{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{fill:#FFDD8F}}
.readout .val,.calc-out strong{transform-origin:0 60%}
.pop{animation:pop .4s var(--E)}
@keyframes pop{from{transform:scale(.82);opacity:.2}to{transform:none;opacity:1}}

/* Kleinigkeiten */
.btn{transition:transform .18s var(--E),box-shadow .18s,background .18s,color .18s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(16,48,44,.22)}
.btn:active{transform:scale(.97)}
.chip{transition:background .2s,color .2s,transform .15s}
.chip:active{transform:scale(.95)}
.head{transition:box-shadow .25s}
.head.scrolled{box-shadow:0 8px 28px rgba(16,48,44,.14)}
.faq summary::after{transition:transform .25s}
.faq details[open] summary::after{transform:rotate(180deg)}
.js-anim .faq details[open] p{animation:up .4s var(--E) both}
@media (prefers-reduced-motion:reduce){.btn,.chip,.head,.faq summary::after{transition:none}.btn:hover,.btn:active,.chip:active{transform:none}.pop{animation:none}}