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

/* Schneeflocken (fallend, dezent) */
.xmas-flake{
  position:fixed;
  top:-24px;
  z-index:50;
  color:rgba(255,255,255,0.85);
  text-shadow:0 0 4px rgba(255,255,255,0.5);
  pointer-events:none;
  user-select:none;
  will-change:transform;
  animation-name:xmas-fall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes xmas-fall{
  0%{transform:translate(0,0);}
  50%{transform:translate(14px,55vh);}
  100%{transform:translate(-12px,110vh);}
}

/* Schneemänner — stehen direkt auf ausgewählten Kästchen (siehe
   addSnowmen in weihnachten.js), daher position:absolute relativ
   zur jeweiligen Box statt fix im Viewport. */
.xmas-snowman{
  position:absolute;
  top:-52px;
  z-index:40;
  font-size:56px;
  line-height:1;
  opacity:0.92;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.45));
  animation:xmas-sway 5s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes xmas-sway{
  0%,100%{transform:rotate(-4deg);}
  50%{transform:rotate(4deg);}
}

/* Sternschnuppen — fliegen von außerhalb des Bildschirms rein und
   fliegen darüber hinweg, unabhängig vom Scrollen. Start-/Endpunkt
   und Richtung kommen pro Stück per Inline-Variablen aus dem JS. */
.xmas-star{
  position:fixed;
  left:var(--x0,0);
  top:var(--y0,0);
  z-index:45;
  width:130px;
  height:2px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
  border-radius:2px;
  transform:rotate(var(--ang,35deg));
  transform-origin:left center;
  opacity:0;
}
.xmas-star.xmas-star-run{
  animation:xmas-shoot 0.9s ease-in forwards;
}
@keyframes xmas-shoot{
  0%{left:var(--x0,0);top:var(--y0,0);opacity:0;}
  8%{opacity:1;}
  75%{opacity:1;}
  100%{left:var(--x1,0);top:var(--y1,0);opacity:0;}
}

@media(max-width:600px){
  .xmas-snowman{font-size:38px;top:-36px;}
  .xmas-flake{font-size:12px!important;}
}