/* =========================================================
   Saisonale Effekte – nur geladen, wenn ein Effekt läuft
   (Admin-Bereich → Design → Saisonale Effekte)
   ========================================================= */

/* Fallende Teilchen (Schnee, Blätter, Blüten): hinter dem Inhalt, vor dem Hintergrund */
.fx-fall {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx-fall i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  animation: fx-fall var(--d) linear var(--delay) infinite;
  will-change: transform;
}
.fx-fall b {
  display: block;
  width: 100%;
  height: 100%;
  animation: fx-sway var(--sd) ease-in-out var(--delay) infinite alternate;
}
@keyframes fx-fall {
  from { transform: translate3d(0, -8vh, 0); }
  to   { transform: translate3d(var(--drift), 108vh, 0); }
}
@keyframes fx-sway {
  from { transform: translateX(calc(var(--sway) * -1)) rotate(var(--r0)); }
  to   { transform: translateX(var(--sway)) rotate(var(--r1)); }
}

/* Schnee */
.fx-snow b {
  border-radius: 50%;
  background: #fff;
  opacity: var(--o);
  box-shadow: 0 0 0 .5px rgba(150, 170, 195, .35), 0 0 6px rgba(255, 255, 255, .9);
}

/* Blätter (SVG mit eigener Farbe) */
.fx-leaves b svg { display: block; width: 100%; height: 100%; opacity: .85; }

/* Blütenblätter */
.fx-petals b {
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #fff 0%, #f9c3d8 35%, #e8749f 100%);
  opacity: var(--o);
  box-shadow: 0 1px 3px rgba(150, 40, 90, .3);
}

/* Lichterkette unter der Kopfleiste */
.fx-lights {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 26px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
.fx-lights span {
  position: relative;
  flex: none;
  width: 54px;
  height: 12px;
  border-bottom: 1.5px solid rgba(40, 45, 40, .55);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  margin-top: -6px;
}
.fx-lights span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 7px;
  height: 11px;
  margin: -1px 0 0 -3.5px;
  border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background: var(--bulb);
  box-shadow: 0 0 6px 1px var(--bulb), 0 0 14px 2px var(--bulb-glow);
  animation: fx-glow 2.8s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.fx-lights span:nth-child(4n+1) { --bulb: #ff6a5c; --bulb-glow: rgba(255, 106, 92, .45); --delay: -.4s; }
.fx-lights span:nth-child(4n+2) { --bulb: #ffd166; --bulb-glow: rgba(255, 209, 102, .45); --delay: -1.6s; }
.fx-lights span:nth-child(4n+3) { --bulb: #6fdc8c; --bulb-glow: rgba(111, 220, 140, .4); --delay: -.9s; }
.fx-lights span:nth-child(4n)   { --bulb: #7cc8ff; --bulb-glow: rgba(124, 200, 255, .45); --delay: -2.2s; }
@keyframes fx-glow {
  from { opacity: .45; }
  to   { opacity: 1; }
}

/* Pfotenspur: läuft diagonal durch den oberen Bereich der Seite, hinter dem Inhalt */
.fx-paws {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(720px, 90vh);
  z-index: -1;
  overflow: hidden;
  color: var(--accent-a);
  pointer-events: none;
}
.fx-paws svg {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: rotate(var(--rot));
  opacity: 0;
  animation: fx-paw 12s ease-out infinite;
  animation-delay: var(--delay);
}
@keyframes fx-paw {
  0%   { opacity: 0; transform: rotate(var(--rot)) scale(.6); }
  3%   { opacity: .5; transform: rotate(var(--rot)) scale(1); }
  50%  { opacity: .5; }
  65%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Weniger Bewegung gewünscht: nichts fällt, die Lichter leuchten ruhig */
@media (prefers-reduced-motion: reduce) {
  .fx-fall, .fx-paws { display: none; }
  .fx-lights span::after { animation: none; opacity: .9; }
}
@media print {
  .fx-fall, .fx-lights, .fx-paws { display: none; }
}