/* ═══════════════════════════════════════════════════════════════════════════
   BEWEGUNG BEIM SCROLLEN

   Abschnitte gleiten beim Erscheinen sanft nach oben ein, Kacheln einer Reihe
   nacheinander, Kennzahlen zählen hoch.

   Warum nicht die neue CSS-Technik `animation-timeline: view()`?
   Sie koppelt den Ablauf an die Scrollposition — scrollt man zurück, läuft
   die Bewegung rückwärts, und das Element blendet wieder aus. Für einen
   Fortschrittsbalken ist das genau richtig, für ein einmaliges Erscheinen
   nicht: Beim dritten Vorbeiscrollen wäre es lästig. Deshalb übernimmt ein
   Beobachter die Auslösung (scroll.js), und hier steht nur, wie es aussieht.

   ── Zwei Dinge sind wichtiger als der Effekt selbst ──

   1. Ohne JavaScript ist alles sofort sichtbar. Der Ausgangszustand ist
      NICHT unsichtbar — sonst bliebe die Seite leer, wenn das Skript nicht
      lädt. Die Klasse `.bc-bewegt` setzt erst das Skript; sie versteckt,
      was es gleich darauf wieder zeigt.

   2. Wer im System "Bewegung reduzieren" eingestellt hat, sieht alles
      unbewegt. Das ist keine Nettigkeit — bei manchen Menschen lösen
      gleitende Flächen Übelkeit oder Schwindel aus.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ausgangszustand — gesetzt vom Skript, nicht vom Markup. */
.bc-bewegt .bc-auf {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}

/* Sichtbar. Ab hier bleibt es so — es gibt keinen Weg zurück. */
.bc-bewegt .bc-auf.ist-da {
  opacity: 1;
  transform: none;
}

/* Nach dem Erscheinen die Sprungvorbereitung wieder abgeben, sonst hält
   der Browser für jedes Element unnötig eine eigene Ebene vor. */
.bc-bewegt .bc-auf.ist-fertig { will-change: auto; }

/* ── GESTAFFELT ───────────────────────────────────────────────────────────
   Kacheln nebeneinander erscheinen um je 120 Millisekunden versetzt. Der
   Versatz steht als Variable, die das Skript je Kachel setzt. */
.bc-bewegt .bc-auf { transition-delay: var(--bc-verzug, 0ms); }

/* ── KENNZAHLEN ───────────────────────────────────────────────────────────
   Damit die Leiste beim Hochzählen nicht in der Breite springt: Ziffern
   bekommen alle dieselbe Laufweite. */
.bc-zahl { font-variant-numeric: tabular-nums; }

/* ── BEWEGUNG REDUZIERT ───────────────────────────────────────────────────
   Alles sofort sichtbar, kein Übergang. Gilt auch für das Hochzählen —
   dort setzt das Skript den Endwert direkt. */
@media (prefers-reduced-motion: reduce) {
  .bc-bewegt .bc-auf,
  .bc-bewegt .bc-auf.ist-da {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}