/* ----- Lichterkette ----- */

.lichterkette {
  /* Positioniert die Kette oben auf der Seite */
  position: fixed; /* Bleibt beim Scrollen oben */
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  z-index: 9998; /* Sorgt dafür, dass sie über dem Inhalt liegt */
  pointer-events: none; /* Sorgt dafür, dass man "durch" sie klicken kann */
}

.lichterkette li {
  display: inline-block;
  list-style: none;
  width: 12px;
  height: 24px;
  border-radius: 50%;
  margin: 0 8px;
  animation: blink 1.4s infinite;
  background: white; /* Grundfarbe */
}

/* Die verschiedenen Farben und der Leuchteffekt (box-shadow) */
.lichterkette li:nth-child(4n+1) {
  background: #ff0000; /* Rot */
  box-shadow: 0 0 15px 5px #ff0000;
}
.lichterkette li:nth-child(4n+2) {
  background: #00ff00; /* Grün */
  box-shadow: 0 0 15px 5px #00ff00;
}
.lichterkette li:nth-child(4n+3) {
  background: #0000ff; /* Blau */
  box-shadow: 0 0 15px 5px #0000ff;
}
.lichterkette li:nth-child(4n+4) {
  background: #ffff00; /* Gelb */
  box-shadow: 0 0 15px 5px #ffff00;
}

/* Die Blink-Animation */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* Lässt jede zweite Lampe zeitversetzt blinken (schönerer Effekt) */
.lichterkette li:nth-child(2n) {
  animation-delay: 0.7s;
}


/* ----- Schneefall ----- */

/* Diese Klasse wird vom JavaScript an die Schneeflocken vergeben */
.snowflake {
  position: fixed;
  top: -10px; /* Startet über dem Bildschirm */
  z-index: 9999; /* Über allem, auch den Lichtern */
  background: #fff;
  border-radius: 50%;
  pointer-events: none; /* Man kann durchklicken */
  animation: fall linear; /* Die Fall-Animation */
}

/* Die Keyframes für die Fall-Animation (JS setzt die Dauer) */
@keyframes fall {
  to {
    transform: translateY(100vh); /* Fällt bis zum unteren Bildschirmrand */
    opacity: 0;
  }
}