/* NEXIOST Effekte – Stand 20.10.2026
   1) Abschnitte gleiten herein  2) Zahl zählt hoch  3) Kupfer-Glanz auf Buttons
   Ohne JavaScript oder bei "Bewegung reduzieren" bleibt alles sofort sichtbar. */

/* 1) Weiches Hereingleiten – nur aktiv, wenn effects.js die Klasse fx-ready setzt */
html.fx-ready .fx-reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--fx-delay,0s);
  will-change:opacity,transform;
}
html.fx-ready .fx-reveal.fx-in{
  opacity:1;
  transform:none;
}
html.fx-ready .fx-reveal.fx-done{will-change:auto}

/* Bilder bekommen zusätzlich einen sanften Schärfe-Übergang */
html.fx-ready .fx-reveal.fx-img{filter:blur(6px)}
html.fx-ready .fx-reveal.fx-img.fx-in{filter:none;transition-property:opacity,transform,filter}

/* 2) Hochzählende Zahl: feste Breite verhindert Springen des Layouts */
.mission-stat.fx-counting{display:inline-block}

/* 3) Kupfer-Glanz auf Buttons */
.button,.footer-cta{position:relative;overflow:hidden;isolation:isolate}
.button::after,.footer-cta::after{
  content:"";
  position:absolute;
  top:-20%;bottom:-20%;
  left:-60%;
  width:45%;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,240,222,0) 12%,rgba(255,246,234,.85) 42%,rgba(226,160,104,.55) 58%,rgba(255,226,190,0) 88%,transparent 100%);mix-blend-mode:soft-light;
  transform:skewX(-18deg) translateX(0);
  opacity:0;
}
.button>*,.footer-cta>*{position:relative;z-index:2}
@media (hover:hover){
  .button:hover::after,.footer-cta:hover::after{animation:fx-sheen 1.25s cubic-bezier(.45,.05,.35,1) forwards}
}
.button:focus-visible::after,.footer-cta:focus-visible::after{animation:fx-sheen 1.25s cubic-bezier(.45,.05,.35,1) forwards}
/* Touch: kurzer Glanz beim Antippen */
.button.fx-tap::after,.footer-cta.fx-tap::after{animation:fx-sheen 1.1s cubic-bezier(.45,.05,.35,1) forwards}
@keyframes fx-sheen{
  0%{opacity:0;transform:skewX(-18deg) translateX(0)}
  12%{opacity:1}
  78%{opacity:1}
  100%{opacity:0;transform:skewX(-18deg) translateX(420%)}
}

/* Barrierefreiheit und Druck: keine Bewegung, alles sichtbar */
@media (prefers-reduced-motion:reduce){
  html.fx-ready .fx-reveal{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .button::after,.footer-cta::after{display:none}
}
@media print{
  html.fx-ready .fx-reveal{opacity:1!important;transform:none!important;filter:none!important}
}