/* Goldener Konfetti-Regen (assets/js/konfetti.js).
   Zwei Ebenen je Stück: außen das Fallen, innen Drift und Drehung — beide
   animieren `transform`, deshalb brauchen sie getrennte Elemente. */

.kf {
  position: fixed; inset: 0; overflow: hidden;
  pointer-events: none;          /* nie einen Klick abfangen */
  z-index: 96;                   /* über dem Tier-Popup (95) */
  transition: opacity .9s ease;
}
.kf.is-ende { opacity: 0; }

.kf-p {
  position: absolute; top: -10vh; display: block;
  animation: kf-fall var(--fall) linear var(--d) forwards;
  will-change: transform;
}
.kf-p > i {
  display: block; width: 100%; height: 100%; border-radius: 1.5px;
  box-shadow: 0 0 6px rgba(232,180,90,.35);
  animation: kf-segeln var(--sway) ease-in-out var(--d) infinite alternate;
}

/* --weg: im Vollbild die Fensterhöhe, im Kasten dessen Höhe (aus dem JS). */
@keyframes kf-fall { to { transform: translateY(var(--weg, 122vh)); } }

/* Drift und Drehung in einer Bewegung — echtes Konfetti kippt beim Pendeln mit. */
@keyframes kf-segeln {
  from { transform: translateX(calc(var(--drift) * -1)) rotate3d(1, 1, .25, 0deg); }
  to   { transform: translateX(var(--drift)) rotate3d(1, 1, .25, 480deg); }
}

/* Im Abschnitt statt über dem ganzen Bildschirm — aber über dessen VOLLE
   Breite. Der Inhalt ist auf 1080 px begrenzt, der Regen soll trotzdem von
   Fensterkante zu Fensterkante fallen.

   z-index 0 hält ihn hinter Karten und Tabelle: Konfetti vor einem Preis wäre
   hübsch und unbrauchbar zugleich. Der Abschnitt darum herum braucht nur
   `position: relative` — KEIN `overflow`, das die volle Breite sonst wieder
   auf die Inhaltsspalte zurückschneiden würde. Beschnitten wird im Kasten
   selbst (`overflow: hidden` im Grundmuster oben).

   `right: auto` ist Pflicht: das Grundmuster setzt `inset: 0`, und mit left,
   right UND width zugleich wäre die Breite überbestimmt. */
.kf--kasten {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
}

/* Dauerbetrieb: die Schnipsel fallen in Schleife statt einmal. Die negativen
   Startverzögerungen aus dem JS streuen sie über die ganze Falldauer, sodass
   der Regen von der ersten Sekunde an gleichmäßig steht. */
.kf--dauerhaft .kf-p { animation-iteration-count: infinite; animation-fill-mode: none; }

@media (prefers-reduced-motion: reduce) { .kf { display: none; } }