/* ============================================================
   SOLENDA · motion.css — Bewegung & Scroll-Effekte (Okt. 2026)
   Ergänzt style.css. Alle Effekte respektieren prefers-reduced-motion.
   Komponenten:
     .page-hero--media   Foto-/Video-Hero mit Ken-Burns + Parallax
     .zoom-reveal        Bild wächst beim Scrollen auf volle Breite (Apple-Stil)
     .hscroll            Galerie läuft beim Scrollen horizontal
     .scrub-text         Statement, Wörter leuchten beim Scrollen auf
     .energy-story       Scrollytelling: erzeugen → speichern → verbrauchen
     .stat-band          Kennzahlen zählen hoch
     .marquee            endlos laufende Referenz-Leisten
   ============================================================ */

:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1)}

/* ---------- Hero-Texte: gestaffelter Auftritt beim Laden ---------- */
.page-hero .crumbs,.page-hero .kicker,.page-hero h1,.page-hero .lede,.page-hero .ph-actions,
.hero .wrap>h1,.hero .wrap>.lede,.hero .hero-actions,.hero .hero-chips{animation:riseIn 1s var(--ease-out) both}
.page-hero .kicker,.hero .wrap>.lede{animation-delay:.08s}
.page-hero h1,.hero .hero-actions{animation-delay:.16s}
.page-hero .lede,.hero .hero-chips{animation-delay:.28s}
.page-hero .ph-actions{animation-delay:.4s}
@keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ---------- Foto-/Video-Hero ---------- */
.page-hero .kicker{color:var(--amber-2)}
.page-hero--media{min-height:min(88svh,860px);display:flex;align-items:flex-end;background:var(--dark);isolation:isolate}
.page-hero--media::after{display:none}                        /* Skizze aus, das Foto spricht */
.page-hero--media::before{z-index:1;mix-blend-mode:screen;opacity:.8}
.page-hero--media .wrap{position:relative;z-index:2}
.page-hero--media h1{text-shadow:0 2px 30px rgba(5,10,20,.35)}
.page-hero--media p.lede{color:#DCE6EB}
.ph-media{position:absolute;inset:0;z-index:0;overflow:hidden;transform:translate3d(0,var(--hy,0px),0);will-change:transform}
.ph-media img,.ph-media video,.page-hero .ph-media img[width]{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 22s var(--ease-out) both}
.ph-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,18,32,.62) 0%,rgba(10,18,32,.18) 38%,rgba(10,18,32,.55) 70%,rgba(10,18,32,.93) 100%),
             linear-gradient(90deg,rgba(10,18,32,.55) 0%,rgba(10,18,32,0) 60%)}
@keyframes kenburns{from{transform:scale(1.18)}to{transform:scale(1.04)}}
.ph-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem;position:relative}
.ph-scroll{position:absolute;left:50%;bottom:1.4rem;z-index:2;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(233,242,244,.5);border-radius:14px}
.ph-scroll::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--amber-2);animation:wheel 1.8s var(--ease-io) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Produkt-Freisteller schwebt im Hero (Helios) */
.page-hero--product{display:flex;align-items:center;min-height:min(80svh,760px)}
.page-hero--product .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;position:relative;z-index:2}
.ph-product{position:relative;justify-self:center;width:min(440px,100%)}
.ph-product img{width:100%;height:auto;filter:drop-shadow(0 40px 50px rgba(0,0,0,.45));animation:floaty 6s ease-in-out infinite}
.ph-product::after{content:"";position:absolute;left:12%;right:12%;bottom:-6%;height:24px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);animation:floatyShadow 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(.6deg)}}
@keyframes floatyShadow{0%,100%{transform:scaleX(1);opacity:.9}50%{transform:scaleX(.82);opacity:.55}}

/* ---------- Bild-Reveal: Bilder öffnen sich beim Einscrollen ---------- */
.visual.reveal img,.img-duo.reveal img{clip-path:inset(10% 10% 10% 10%);transition:clip-path 1.3s var(--ease-out)}   /* nur clip-path: verändert keine Layout-Breite */
.visual.reveal.in img,.img-duo.reveal.in img{clip-path:inset(-60px -60px -60px -60px)}
.img-duo.reveal.in img:nth-child(2){transition-delay:.12s}
.visual.reveal .float-card{opacity:0;transform:translateY(20px);transition:opacity .8s .45s var(--ease-out),transform .8s .45s var(--ease-out)}
.visual.reveal.in .float-card{opacity:1;transform:none}

/* ---------- Zoom-Reveal (Apple-Stil) ---------- */
.zoom-reveal{--z:0;position:relative;height:230vh;background:var(--paper)}
.zoom-reveal.on-dark{background:var(--dark)}
.zr-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.zr-frame{position:absolute;inset:0;margin:0;
  clip-path:inset(calc((1 - var(--z))*16%) calc((1 - var(--z))*20%) round calc((1 - var(--z))*32px));will-change:clip-path}
.zr-frame img,.zoom-reveal .zr-frame img[width]{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.28 - .28*var(--z)));will-change:transform}
.zr-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,32,0) 35%,rgba(10,18,32,.85) 100%);opacity:calc(var(--z)*1.1)}
.zr-copy{position:absolute;left:0;right:0;bottom:clamp(2.5rem,8svh,5.5rem);z-index:2;color:var(--dark-text);
  opacity:clamp(0,calc((var(--z) - .6)*3.2),1);transform:translateY(calc((1 - var(--z))*60px))}
.zr-copy h2{font-size:clamp(2rem,5.4vw,4.2rem);max-width:18ch;margin:.7rem 0 .9rem}
.zr-copy p{max-width:56ch;color:#DCE6EB;font-size:clamp(1rem,1.6vw,1.15rem)}
.zr-copy .kicker{color:var(--amber-2)}
.zr-copy .kicker::before{background:var(--amber-2)}
.zr-lead{position:absolute;left:0;right:0;top:calc(var(--header-h) + 2.5svh);z-index:2;text-align:center;
  opacity:clamp(0,calc(1 - var(--z)*3),1);transform:translateY(calc(var(--z)*-40px))}
.zr-lead h2{font-size:clamp(1.7rem,4vw,3rem);margin-top:.6rem}
.on-dark .zr-lead{color:var(--dark-text)}

/* ---------- Horizontal-Galerie ---------- */
.hscroll{position:relative;background:var(--paper)}
.hscroll.dark{background:linear-gradient(165deg,var(--dark) 0%,var(--dark-2) 100%);color:var(--dark-text)}
.hscroll.tinted{background:#ECEFEE}
.hs-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(1.4rem,3svh,2.4rem);padding-top:var(--header-h)}
.hs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.hs-head .section-head{margin-bottom:0;min-width:0}
h1,h2,h3{overflow-wrap:break-word}
.hs-count{font-family:var(--font-head);font-weight:600;font-size:.9rem;letter-spacing:.14em;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.hscroll.dark .hs-count{color:var(--dark-soft)}
.hs-track{display:flex;gap:1.2rem;padding-inline:max(4vw,calc((100vw - var(--wrap))/2));will-change:transform;transform:translate3d(var(--hx,0px),0,0)}
.hs-item{position:relative;flex:none;height:min(56svh,520px);margin:0;border-radius:var(--radius);overflow:hidden;background:var(--dark);box-shadow:var(--shadow)}
.hs-item img,.hscroll .hs-item img[width]{height:100%;width:auto;max-width:none;object-fit:cover;transform:scale(calc(1.12 - .12*var(--in,1)));transition:transform .2s linear}
.hs-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.2rem 1rem;font-size:.85rem;font-weight:500;color:var(--dark-text);background:linear-gradient(180deg,transparent,rgba(10,18,32,.78))}
.hs-progress{width:min(var(--wrap),92vw);margin-inline:auto;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.hscroll.dark .hs-progress{background:var(--dark-line)}
.hs-progress span{display:block;height:100%;background:var(--grad-sun);transform-origin:left;transform:scaleX(var(--hp,0))}
/* Mobil & ohne Animation: natives Wischen mit Einrasten */
.hscroll.is-native{padding:clamp(4.5rem,9vw,8rem) 0;height:auto!important}
.hscroll.is-native .hs-sticky{position:relative;height:auto;padding-top:0;overflow:visible}
.hscroll.is-native .hs-track{transform:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:.4rem}
.hscroll.is-native .hs-track::-webkit-scrollbar{display:none}
.hscroll.is-native .hs-item{scroll-snap-align:center;height:min(58svh,420px)}
.hscroll.is-native .hs-item img{transform:none}
.hscroll.is-native .hs-progress span{transform:scaleX(var(--hp,0));transition:transform .15s}
.hs-swipe{display:none;font-size:.82rem;color:var(--ink-soft);letter-spacing:.06em}
.hscroll.dark .hs-swipe{color:var(--dark-soft)}
.hscroll.is-native .hs-swipe{display:inline-flex;align-items:center;gap:.4rem}
.hs-swipe::after{content:"→";animation:nudge 1.6s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---------- Statement: Wörter leuchten beim Scrollen ---------- */
.statement{padding:clamp(5rem,12vw,10rem) 0}
.scrub-text{font-family:var(--font-head);font-weight:600;font-size:clamp(1.7rem,4.2vw,3.3rem);line-height:1.2;letter-spacing:-.02em;max-width:24ch}
.scrub-text .w{opacity:.16;transition:opacity .35s ease,color .35s ease}
.scrub-text .w.on{opacity:1}
.scrub-text em{font-style:normal}
.scrub-text em .w.on{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.statement .wrap>p.st-sub{margin-top:1.6rem;max-width:58ch;color:var(--ink-soft)}
.statement.dark .st-sub{color:var(--dark-soft)}

/* ---------- Energie-Story (Scrollytelling) ---------- */
.energy-story{background:linear-gradient(165deg,var(--dark) 0%,var(--dark-2) 100%);color:var(--dark-text)}
.es-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.es-visual{position:sticky;top:calc(var(--header-h) + 4svh);height:calc(100svh - var(--header-h) - 8svh);display:grid;place-items:center}
.es-visual svg{width:100%;max-width:560px;height:auto;max-height:100%;overflow:visible}
.es-steps{padding:18svh 0 22svh}
.es-step{min-height:62svh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transform:translateX(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.es-step.on{opacity:1;transform:none}
.es-step .es-num{font-family:var(--font-head);font-weight:700;font-size:.85rem;letter-spacing:.2em;color:var(--amber-2)}
.es-step h3{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:.6rem 0 .9rem}
.es-step p{color:var(--dark-soft);max-width:44ch}
.es-head{padding-top:clamp(4.5rem,9vw,8rem)}
.es-head .section-head{margin-bottom:0}
.es-head .section-head p{color:var(--dark-soft)}
/* SVG-Zustände */
.es-svg .ln{fill:none;stroke:rgba(233,242,244,.22);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.es-svg .fill-soft{fill:rgba(233,242,244,.06)}
.es-svg .panel{fill:#16354A;stroke:rgba(233,242,244,.35);stroke-width:1}
.es-svg .flow{fill:none;stroke:var(--amber-2);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 10;opacity:0;transition:opacity .6s}
.es-svg .sun-core{fill:url(#esSun)}
.es-svg .sun-rays{stroke:var(--amber-2);stroke-width:2.5;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:spin 30s linear infinite;opacity:.35;transition:opacity .6s}
.es-svg .bat-level{fill:url(#esBat);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.08);transition:transform 1.4s var(--ease-out)}
.es-svg .glow{opacity:0;transition:opacity .6s}
.es-svg .lbl{font-family:var(--font-head);font-size:11px;font-weight:600;letter-spacing:.14em;fill:var(--dark-soft);text-transform:uppercase;transition:fill .5s}
.es-svg .grid-line{transition:opacity .6s}
.es-svg .panel{transition:fill .6s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dash{to{stroke-dashoffset:-56}}
.es-svg .flow{animation:dash 1.1s linear infinite}
/* Schritt 1: Erzeugen */
.energy-story[data-step="1"] .sun-rays,.energy-story[data-step="2"] .sun-rays,.energy-story[data-step="3"] .sun-rays,.energy-story[data-step="4"] .sun-rays{opacity:1}
.energy-story[data-step="1"] .f-sun,.energy-story[data-step="2"] .f-sun,.energy-story[data-step="3"] .f-sun,.energy-story[data-step="4"] .f-sun{opacity:1}
.energy-story[data-step="1"] .panel,.energy-story[data-step="2"] .panel,.energy-story[data-step="3"] .panel,.energy-story[data-step="4"] .panel{fill:#1F5B78}
.energy-story[data-step="1"] .l-pv{fill:var(--amber-2)}
/* Schritt 2: Speichern */
.energy-story[data-step="2"] .f-bat,.energy-story[data-step="3"] .f-bat,.energy-story[data-step="4"] .f-bat{opacity:1}
.energy-story[data-step="2"] .bat-level,.energy-story[data-step="3"] .bat-level,.energy-story[data-step="4"] .bat-level{transform:scaleY(.86)}
.energy-story[data-step="2"] .l-bat{fill:var(--amber-2)}
/* Schritt 3: Selbst verbrauchen */
.energy-story[data-step="3"] .f-house,.energy-story[data-step="3"] .f-car,.energy-story[data-step="4"] .f-house,.energy-story[data-step="4"] .f-car{opacity:1}
.energy-story[data-step="3"] .g-house,.energy-story[data-step="4"] .g-house{opacity:1}
.energy-story[data-step="3"] .l-house,.energy-story[data-step="3"] .l-car{fill:var(--amber-2)}
/* Schritt 4: Unabhängig — Netz tritt zurück, nur Überschuss fließt raus */
.energy-story[data-step="4"] .grid-line{opacity:.25}
.energy-story[data-step="4"] .f-grid{opacity:.55}
.energy-story[data-step="4"] .l-grid{fill:var(--amber-2)}
.energy-story[data-step="4"] .badge{opacity:1;transform:none}
.es-svg .badge{opacity:0;transform:translateY(8px);transition:opacity .6s .2s,transform .6s .2s var(--ease-out);transform-box:fill-box}

/* ---------- Kennzahlen ---------- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.stat{border-top:2px solid var(--line);padding-top:1.2rem}
.dark .stat{border-color:var(--dark-line)}
.stat strong{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--ink-soft);max-width:26ch}
.dark .stat span{color:var(--dark-soft)}

/* ---------- Referenz-Laufband ---------- */
.marquee{display:grid;gap:1.2rem;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-row{display:flex;gap:1.2rem;width:max-content;animation:mq 70s linear infinite}
.mq-row.rev{animation-direction:reverse;animation-duration:84s}
.marquee:hover .mq-row{animation-play-state:paused}
.mq-row a{flex:none;display:block;height:clamp(180px,24vw,280px);border-radius:var(--radius);overflow:hidden;position:relative}
.mq-row img,.marquee .mq-row a img[width]{height:100%;width:auto;max-width:none;transition:transform .6s var(--ease-out)}
.mq-row a:hover img{transform:scale(1.06)}
.mq-row a span{position:absolute;left:.8rem;bottom:.8rem;background:rgba(10,18,32,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:var(--dark-text);font-size:.78rem;font-weight:600;letter-spacing:.04em;border-radius:999px;padding:.3rem .8rem;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.mq-row a:hover span,.mq-row a:focus-visible span{opacity:1;transform:none}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Bento: Produkt-Kachel mit Freisteller ---------- */
.tile--product{background:radial-gradient(120% 90% at 70% 20%,#1E3B4C 0%,var(--dark) 70%)}
.tile--product img{object-fit:contain;width:auto;height:72%;inset:6% 6% auto auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.45))}
.tile--product:hover img{transform:translateY(-8px) rotate(-1.5deg)}
/* Kacheln: Bild driftet beim Scrollen leicht (Bild etwas höher, damit keine Kante sichtbar wird) */
.tile:not(.tile--product) img{top:-30px;height:calc(100% + 60px);translate:0 var(--ty,0px)}

.stat-band--3{grid-template-columns:repeat(3,1fr)}
@media (max-height:780px) and (min-width:761px){.hs-head .section-head p{display:none}.hs-item{height:min(50svh,480px)}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .es-grid{grid-template-columns:1fr;gap:0}
  .es-visual{top:var(--header-h);height:36svh;z-index:2;background:var(--dark);padding:.8rem 4vw .4rem;margin-inline:-4vw}
  .es-visual::after{content:"";position:absolute;left:0;right:0;top:100%;height:36px;background:linear-gradient(180deg,var(--dark),rgba(10,18,32,0));pointer-events:none}
  .es-visual svg{max-width:420px}
  .es-steps{padding:6svh 0 10svh}
  .es-step{min-height:56svh;transform:none}
  .stat-band,.stat-band--3{grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
  .page-hero--product .wrap{grid-template-columns:1fr}
  .ph-product{width:min(320px,74%);justify-self:start;margin-top:.5rem}
}
@media (max-width:600px){
  .page-hero--media{min-height:82svh}
  .ph-scroll{display:none}
  .ph-actions .btn{width:100%;justify-content:center}
  .zoom-reveal{height:190vh}
  .zr-frame{clip-path:inset(calc((1 - var(--z))*24%) calc((1 - var(--z))*7%) round calc((1 - var(--z))*22px))}
  .zr-frame img{transform:scale(calc(1.18 - .18*var(--z)))}
  .zr-copy{bottom:2rem}
  .scrub-text{font-size:clamp(1.55rem,7.4vw,2.2rem)}
  .mq-row a{height:170px}
  .tile--product img{height:62%}
}

/* ---------- Weniger Bewegung gewünscht ---------- */
@media (prefers-reduced-motion:reduce){
  .page-hero .crumbs,.page-hero .kicker,.page-hero h1,.page-hero .lede,.page-hero .ph-actions,
  .hero .wrap>h1,.hero .wrap>.lede,.hero .hero-actions,.hero .hero-chips{animation:none}
  .ph-media{transform:none}
  .ph-media img,.ph-media video,.ph-product img,.ph-product::after,.ph-scroll::after,.hs-swipe::after{animation:none}
  .visual.reveal img,.img-duo.reveal img{clip-path:none;transition:none}
  .visual.reveal .float-card{opacity:1;transform:none;transition:none}
  .zoom-reveal{--z:1;height:auto}
  .zr-sticky{position:relative;height:auto;min-height:80svh}
  .zr-lead{display:none}
  .zr-copy{opacity:1;transform:none}
  .scrub-text .w{opacity:1;transition:none}
  .es-step{opacity:1;transform:none}
  .es-svg .sun-rays,.es-svg .flow{animation:none}
  .mq-row{animation:none}
  .marquee{overflow-x:auto}
  .tile:not(.tile--product) img{translate:none}
}