body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
}

.stagger {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stagger li {
  padding: 0.75rem 1rem;
  background: #eef7fd;
  border-radius: 0.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  .stagger li {
    animation: fade-in-up 0.4s ease-out backwards;
    /* sibling-index() ersetzt hier direkt die klassische JS-Zeile
       (els.forEach((el,i) => el.style.setProperty('--i', i))) oder
       das manuelle li:nth-child(1..n)-Copy-Paste — funktioniert mit
       jeder Listenlänge, ohne die Regel bei einer Änderung anzufassen. */
    animation-delay: calc(80ms * sibling-index());
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Firefox (Stand 2026-07-28, ~77% global Support, Chrome/Edge/Safari ja,
   Firefox nein) kennt sibling-index() nicht — die Deklaration wird beim
   Parsen verworfen, animation-delay fällt auf den Default 0s zurück.
   Kein Bruch: alle Items faden gleichzeitig statt gestaffelt, kein Absturz,
   keine sichtbare Lücke. Kein Fallback-CSS nötig. */