/* ═══════════════════════════════════════════════════════════════════
   BEWEGUNG — Motion Graphics der Startseite
   ═══════════════════════════════════════════════════════════════════
   Auf einer Seite über den eigenen Tod ist Bewegung eine heikle Sache.
   Nichts hier springt, blinkt oder fordert Aufmerksamkeit. Alles bewegt
   sich langsam, in großen Bögen, und hört von selbst wieder auf.

   Vier Elemente:
     .aura        zwei sehr langsam wandernde Farbschleier hinter dem Hero
     .ablauf      die Linie, die die drei Schritte verbindet (in startseite.css)
     .zaehler     Zahlen, die einmal hochlaufen, wenn sie sichtbar werden
     .laufband    die Namen der Partnerhäuser, endlos und ruhig

   Jede Regel endet in @media (prefers-reduced-motion: reduce) — dort steht
   die Seite still und zeigt trotzdem alles. Das ist keine Kür: Bewegung kann
   bei Migräne und vestibulären Störungen körperliche Beschwerden auslösen.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Aura: zwei wandernde Farbschleier ─── */

.aura {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.aura span {
  position: absolute; display: block;
  width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  will-change: transform;
}
.aura span:nth-child(1) {
  left: -16vw; top: -22vw;
  background: radial-gradient(circle at 50% 50%, rgba(112, 72, 97, .5), transparent 68%);
  animation: aura-a 46s ease-in-out infinite alternate;
}
.aura span:nth-child(2) {
  right: -20vw; bottom: -26vw;
  background: radial-gradient(circle at 50% 50%, rgba(138, 111, 58, .42), transparent 68%);
  animation: aura-b 62s ease-in-out infinite alternate;
}

@keyframes aura-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(8vw, 6vw, 0) scale(1.14); }
}
@keyframes aura-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-7vw, -5vw, 0) scale(1); }
}

/* ─── Zähler ─── */

.zaehler-reihe {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px; margin-top: 44px;
}
.zaehler {
  text-align: center; padding: 26px 18px;
  background: var(--white); border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.zaehler b {
  display: block;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(30px, 4vw, 44px); letter-spacing: -.02em;
  color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.zaehler small {
  display: block; margin-top: 10px;
  font-size: 13.5px; color: var(--muted); line-height: 1.5;
}

/* ─── Laufband der Partnernamen ─── */

.laufband {
  overflow: hidden; position: relative;
  padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.laufband-spur {
  display: flex; gap: 46px; width: max-content;
  animation: laufband 64s linear infinite;
}
.laufband:hover .laufband-spur,
.laufband:focus-within .laufband-spur { animation-play-state: paused; }
.laufband a {
  font-family: var(--font-display); font-weight: 300;
  font-size: 15px; letter-spacing: .01em;
  color: var(--muted); white-space: nowrap;
}
.laufband a:hover { color: var(--accent); }

@keyframes laufband {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ─── Sanftes Einblenden beim Scrollen (ergänzt .reveal aus base.css) ─── */

.heben { transition: transform .55s var(--ease-out), box-shadow .55s var(--ease-out); }
.heben:hover { transform: translateY(-4px); }

/* ═══════════════════════════════════════════════════════════════════
   Ruhemodus — hier steht alles still
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .aura span { animation: none; }
  .laufband-spur { animation: none; }
  .laufband {
    overflow-x: auto; -webkit-mask-image: none; mask-image: none;
  }
  .laufband-spur { width: auto; }
  .heben { transition: none; }
  .heben:hover { transform: none; }
}

/* ─── Schmale Fenster ─── */

@media (max-width: 720px) {
  .zaehler-reihe { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .aura span { filter: blur(56px); opacity: .42; }
}