/* Dezente Bewegung – ergänzt styles-v20.css / site.css, ohne externe Bibliotheken.
   Greift nur, wenn <html> die Klasse "motion" trägt (gesetzt im <head>, nicht bei
   "Bewegung reduzieren"). Ohne JavaScript bleibt die Seite unverändert. */

html{scroll-padding-top:110px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* Kopfzeile wird beim Scrollen kompakter */
.motion .header{transition:box-shadow .35s}
.motion .nav{transition:min-height .35s}
.motion .brand__image{transition:width .35s}
.header.is-scrolled{box-shadow:0 10px 30px rgba(17,32,25,.10)}
.header.is-scrolled .nav{min-height:68px}
.header.is-scrolled .brand__image{width:200px}

/* Startbereich: Überschrift Wort für Wort, Bild zoomt beim Laden langsam heraus */
.motion .split-word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.motion .split-word>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.15,1);transition-delay:calc(150ms + var(--w,0) * 60ms)}
.motion.is-ready .split-word>span{transform:none}
.motion .hero-in{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.motion.is-ready .hero-in{opacity:1;transform:none}
.motion .hero__image{transform:scale(1.1);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.motion.is-ready .hero__image{transform:none}

/* Überschriften und Karten blenden beim Scrollen ein */
.motion .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 80ms)}
.motion .reveal.is-in{opacity:1;transform:none}

/* Montage-Galerie öffnet sich wie ein Vorhang */
.motion .img-reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1);transition-delay:calc(var(--i,0) * 120ms)}
.motion .img-reveal img{transform:scale(1.12);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.motion .img-reveal.is-in{clip-path:inset(0 0 0 0)}
.motion .img-reveal.is-in img{transform:none}
.motion .img-reveal.is-in:hover img{transform:scale(1.025)}

/* Produktkarten heben sich leicht an */
.motion .product-card{transition:opacity .7s ease,transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.motion .product-card.is-in:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(17,32,25,.24)}

/* Laufband unter dem Startbereich */
.marquee{background:var(--ink);color:#d9e4dc;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.marquee__track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;flex-shrink:0}
.marquee__group span{display:flex;align-items:center;padding:18px 15px;font-family:"Oswald",sans-serif;font-size:.95rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.marquee__group span::after{content:"";width:7px;height:7px;background:var(--green);transform:rotate(45deg);margin-left:30px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* Nach-oben-Knopf auf langen Seiten (Desktop) */
.to-top{position:fixed;right:24px;bottom:84px;z-index:24;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:1.1rem;box-shadow:0 8px 24px rgba(0,0,0,.14);cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s,background .2s,color .2s}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--ink);color:#fff}
@media (max-width:960px){.to-top{display:none}}