/* NatureBase – Animations-Ebene (v1, 2026-10-16)
   Greift nur, wenn <html class="anim"> gesetzt ist. Bei prefers-reduced-motion komplett aus. */

/* 1 Scroll-Fortschritt */
.nb-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),var(--green-bright));transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* 2 Hero-Intro beim Laden */
.anim .hero-in > *, .anim .phero .wrap > *{opacity:0;transform:translateY(22px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*120ms + 150ms)}
.anim .hero-in > h1, .anim .phero .wrap > h1{opacity:1;transform:none}
.anim .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.anim .ln > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--l,0)*110ms + 250ms)}
.anim.loaded .hero-in > *, .anim.loaded .phero .wrap > *{opacity:1;transform:none}
.anim.loaded .ln > span{transform:none}
.anim .hero-video{transform:scale(1.08);transition:transform 3.2s cubic-bezier(.2,.7,.2,1)}
.anim.loaded .hero-video{transform:scale(1)}
.anim .scroll-hint{display:block}
.anim .scroll-hint::after{content:"";display:block;width:1px;height:42px;margin:10px auto 0;background:currentColor;
  transform-origin:top;animation:nbDrop 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes nbDrop{0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 3 Parallax entfernt (2026-10-16): Hintergründe bleiben ruhig */

/* 4 Bilder „wachsen“ von unten herein */
.anim .row.reveal .fig{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.anim .row.reveal .fig img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.anim .row.reveal.in .fig{clip-path:inset(0 0 0 0)}
.anim .row.reveal.in .fig img{transform:scale(1)}
.anim .row.reveal.in .fig:hover img{transform:scale(1.04)}
.anim .row.reveal .txt > *{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*90ms + 450ms)}
.anim .row.reveal.in .txt > *{opacity:1;transform:none}
.anim .row .num{display:inline-block}

/* 5 Gestaffelte Raster */
.anim .reveal.stg{opacity:1;transform:none}
.anim .stg > *{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .25s,filter .3s;transition-delay:calc(var(--i,0)*75ms)}
.anim .stg.in > *{opacity:1;transform:none}
.anim .logos.stg > *{transform:scale(.92)}
.anim .logos.stg.in > *{transform:none}

/* 6 Kapitelnummern gleiten ein */
.anim .reveal .kicker::before{transform:translateY(40%);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1) .1s,opacity .9s ease .1s}
.anim .reveal.in .kicker::before{transform:none;opacity:1}

/* 7 USP-Icons zeichnen sich */
.anim .usp .u-ic svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i,0)*75ms + 300ms)}
.anim .usp.in .u-ic svg *{stroke-dashoffset:0}
.anim .usp .u:hover .u-ic{transform:translateY(-3px) rotate(-4deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}

/* 8 Kennzahlen: Unterstrich wächst */
.anim .numbers .n b{position:relative}
.anim .numbers .n b::after{content:"";position:absolute;left:0;bottom:-.28em;height:2px;width:2.2rem;background:var(--green-bright);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*75ms + 500ms)}
.anim .numbers.in .n b::after{transform:scaleX(1)}
.anim .numbers .n{transition-property:opacity,transform,background}
.anim .numbers .n:hover{background:#fff}

/* 9 Galerie-Karten: sanftes Anheben */
.anim .gcard{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s,opacity .8s}
.anim .stg.in > .gcard:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(10,25,18,.22)}

@media(prefers-reduced-motion:reduce){
  .nb-progress{display:none}
  .anim *,.anim *::before,.anim *::after{transition:none!important;animation:none!important}
  .anim .hero-in > *,.anim .phero .wrap > *,.anim .stg > *,.anim .row.reveal .txt > *{opacity:1!important;transform:none!important}
  .anim .ln > span,.anim .hero-video,.anim .row.reveal .fig img{transform:none!important}
  .anim .row.reveal .fig{clip-path:none!important}
  .anim .usp .u-ic svg *{stroke-dashoffset:0!important}
  .anim .numbers .n b::after{transform:scaleX(1)!important}
  .anim .reveal .kicker::before{opacity:1!important;transform:none!important}
  
}

/* Zähler ohne Breitenspringen */
.numbers .n b,.stat-huge,.band-stats .bs b{font-variant-numeric:tabular-nums lining-nums}