/* ══════════════════════════════════════════════════════════════
   HALLOWEEN-MODUL — eigenständig, greift in nichts anderes ein.
   Aktiv automatisch 14.–31. Oktober (siehe halloween.js).
   Entfernen: einfach die <link>- und <script>-Tags für
   halloween.css / halloween.js aus den HTML-Dateien löschen,
   oder diese beiden Dateien löschen.
   ══════════════════════════════════════════════════════════════ */

/* Herbstlaub (fallend, dezent) */
.hw-leaf{
  position:fixed;
  top:-24px;
  z-index:50;
  pointer-events:none;
  user-select:none;
  will-change:transform;
  animation-name:hw-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes hw-fall{
  0%{transform:translate(0,0) rotate(0deg);}
  25%{transform:translate(26px,28vh) rotate(90deg);}
  50%{transform:translate(-10px,55vh) rotate(180deg);}
  75%{transform:translate(22px,82vh) rotate(270deg);}
  100%{transform:translate(-14px,110vh) rotate(360deg);}
}

/* Kürbisse — stehen direkt auf ausgewählten Kästchen (siehe
   addPumpkins in halloween.js), daher position:absolute relativ
   zur jeweiligen Box statt fix im Viewport. */
.hw-pumpkin{
  position:absolute;
  top:-52px;
  z-index:40;
  font-size:56px;
  line-height:1;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 0 10px rgba(255,140,0,0.55)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  animation:hw-sway 6s ease-in-out infinite, hw-glow 3.4s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes hw-sway{
  0%,100%{transform:rotate(-3deg);}
  50%{transform:rotate(3deg);}
}
@keyframes hw-glow{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,140,0,0.45)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));}
  45%{filter:drop-shadow(0 0 16px rgba(255,150,20,0.85)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));}
  60%{filter:drop-shadow(0 0 11px rgba(255,140,0,0.6)) drop-shadow(0 4px 8px rgba(0,0,0,0.45));}
}

/* Fledermäuse — fliegen von außerhalb des Bildschirms rein und
   wieder hinaus, unabhängig vom Scrollen. Start- und Endpunkt
   kommen pro Tier per Inline-Variablen aus dem JS. */
.hw-bat{
  position:fixed;
  left:var(--x0,0);
  top:var(--y0,0);
  z-index:45;
  font-size:30px;
  line-height:1;
  pointer-events:none;
  user-select:none;
  opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.hw-bat.hw-bat-run{
  animation:hw-fly 3.4s linear forwards;
}
.hw-bat span{
  display:block;
  animation:hw-flap 0.28s ease-in-out infinite;
}
@keyframes hw-fly{
  0%{left:var(--x0,0);top:var(--y0,0);opacity:0;}
  6%{opacity:1;}
  94%{opacity:1;}
  100%{left:var(--x1,0);top:var(--y1,0);opacity:0;}
}
@keyframes hw-flap{
  0%,100%{transform:scale(1,1) translateY(0);}
  50%{transform:scale(1,0.55) translateY(3px);}
}

@media(max-width:600px){
  .hw-pumpkin{font-size:38px;top:-36px;}
  .hw-leaf{font-size:14px!important;}
  .hw-bat{font-size:24px;}
}