/* Phones scroll the cards themselves. Never translate an entire illustration at the
   same time as native scrolling; keep motion inside the graphic instead. */
@media (max-width: 767px) {
  html body :is(#funktionen, #nutzen, #ventures) .feat-stage,
  html body :is(#funktionen, #nutzen, #ventures) .feat-stage .fc,
  html body #elg-os :is(.flow, .os-sockel, .os-modul) {
    translate: none !important;
    transform: none !important;
    animation: none !important;
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html body :is(#funktionen, #nutzen, #ventures) .feat-stage .fc.mobile-arriving {
    animation: mobile-card-arrive .35s ease-out both !important;
  }
  .mobile-inview .m-balken i {
    transform-origin: bottom;
    animation: mobile-bar-grow 1.8s cubic-bezier(.2,.7,.3,1) both;
  }
  .mobile-inview .m-balken i:nth-child(2n) { animation-delay: .12s; }
  .mobile-inview .m-balken i:nth-child(3n) { animation-delay: .24s; }
  .mobile-inview .m-arrow {
    animation: mobile-data-flow 2.8s ease-in-out infinite !important;
  }
  .mobile-inview .m-chip.on, .mobile-inview .m-node.core {
    animation: mobile-data-glow 3.6s ease-in-out infinite !important;
  }
  #f2 .kette .mod .stat.wechsel .stat-text { animation: statRaus .22s ease forwards !important; }
  #f2 .kette .mod .stat .stat-text.neu { animation: statRein .38s ease both !important; }
  #f4 .f4-balken i { transition: width .5s linear !important; }
  @keyframes mobile-card-arrive { from { opacity: .85; } to { opacity: 1; } }
  @keyframes mobile-bar-grow { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
  @keyframes mobile-data-flow { 0%,100% { translate: -2px 0; opacity: .5; } 50% { translate: 2px 0; opacity: 1; } }
  @keyframes mobile-data-glow { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
}