/* Foerderverein FHE Bewegung nach Brandmanual: Uebergaenge 160 ms ease-out (--fv-duration, --fv-easing), nur transform/opacity,
   kein Bounce, kein Glow, keine Wipes. Versteckte Zustaende gibt es nur unter html.m-js (js/motion.js setzt die Klasse nie bei
   prefers-reduced-motion), ohne JS ist alles sichtbar. */
:root { --m-ease: var(--fv-easing, ease-out); --m-dur: var(--fv-duration, 160ms); }

/* ---- Einblenden ---- */
.m-js .m-r { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity var(--m-dur) var(--m-ease) var(--m-d, 0ms), transform var(--m-dur) var(--m-ease) var(--m-d, 0ms); }
.m-js .m-r.m-in { opacity: 1; transform: none; }
.m-js .m-i { overflow: hidden; opacity: 0; transition: opacity var(--m-dur) var(--m-ease) var(--m-d, 0ms); }
.m-js .m-i.m-in { opacity: 1; }
.m-js .m-h .m-w { display: inline-block; opacity: 0; transform: translate3d(0, .2em, 0); transition: opacity var(--m-dur) var(--m-ease) calc(var(--m-d, 0ms) + var(--m-wd, 0ms)), transform var(--m-dur) var(--m-ease) calc(var(--m-d, 0ms) + var(--m-wd, 0ms)); }
.m-js .m-h.m-in .m-w { opacity: 1; transform: none; }

/* ---- Stepper: Linie, Nummer, Text folgen nacheinander (je 160 ms) ---- */
.m-js .m-s { border-top-color: transparent; }
.m-js .m-s::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--fv-nachtblau); transform: scaleX(0); transform-origin: left center; transition: transform var(--m-dur) var(--m-ease) var(--m-d, 0ms); }
.m-js .m-s .c-steps__num { opacity: 0; transition: opacity var(--m-dur) var(--m-ease) calc(var(--m-d, 0ms) + 80ms); }
.m-js .m-s .c-steps__title, .m-js .m-s .c-steps__text { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity var(--m-dur) var(--m-ease) calc(var(--m-d, 0ms) + 160ms), transform var(--m-dur) var(--m-ease) calc(var(--m-d, 0ms) + 160ms); }
.m-js .m-s .c-steps__text { transition-delay: calc(var(--m-d, 0ms) + 240ms); }
.m-js .m-s.m-in::before { transform: none; }
.m-js .m-s.m-in .c-steps__num, .m-js .m-s.m-in .c-steps__title, .m-js .m-s.m-in .c-steps__text { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  /* ---- Header ein/aus ---- */
  .c-header { transition: transform var(--m-dur) var(--m-ease), background-color var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease); }
  .c-header.is-hidden { transform: translate3d(0, -100%, 0); }

  /* ---- Navigation: Markierung unter dem aktiven Punkt ---- */
  .c-nav__indicator { transition: transform var(--m-dur) var(--m-ease), width var(--m-dur) var(--m-ease), opacity var(--m-dur) var(--m-ease); will-change: transform; }
  .c-nav__indicator.is-on { opacity: 1; }

  /* ---- Dropdowns (Desktop) ---- */
  @media (min-width: 1201px) {
    .c-nav__panel { transform: translate3d(0, 8px, 0); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease), visibility 0s linear var(--m-dur); }
    .c-nav__item.is-open > .c-nav__panel, .c-nav__item--has-sub:hover > .c-nav__panel { transform: none; }
  }

  /* ---- Mobiles Menue: Eintraege ohne Staffelung ---- */
  @media (max-width: 1200px) {
    .c-nav__item, .c-nav__mobile-cta { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease); }
    .is-menu-open .c-nav__item, .is-menu-open .c-nav__mobile-cta { opacity: 1; transform: none; }
  }
}

/* Sicherheitsnetz: Kopfbereiche (Hero, Seitenkopf) sind spaetestens nach 2,5 s sichtbar, auch wenn rAF/IntersectionObserver nicht feuern */
.m-js .c-hero .m-w, .m-js .c-page-hero .m-w, .m-js .c-hero .m-r, .m-js .c-page-hero .m-r { animation: m-safe 0s linear 2.5s forwards; }
@keyframes m-safe { to { opacity: 1; transform: none; } }
/* Bildmarke: setzt sich beim Einblenden zusammen (Klasse is-assemble per js/main.js) */
.m-js .c-mark:not(.is-assemble) .c-mark__b { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .m-js .m-r, .m-js .m-i, .m-js .m-h .m-w, .m-js .m-s .c-steps__num, .m-js .m-s .c-steps__title, .m-js .m-s .c-steps__text { opacity: 1; transform: none; transition: none; }
  .m-js .m-s::before { transform: none; transition: none; }
}