/* Lichterkette im Kopf der Spender-Seite (Lampen setzt js/lichterkette.js). */
/* Lichterkette: pro Geschenk eine Lampe; ein Stück Draht hängt je Lampe durch */
.lichter {
  display: flex;
  flex-wrap: wrap;
  padding: 0.2rem 0 0.4rem;
}

.lampe {
  position: relative;
  flex: none;
  width: 2.3rem;
  height: 2.6rem;
}

.lampe::before {
  position: absolute;
  inset: 0 0 auto;
  height: 0.8rem;
  content: "";
  background: url("/img/girlande.svg") center / 100% 100% no-repeat;
}

.lampe::after {
  position: absolute;
  top: 0.55rem;
  left: calc(50% - 0.5rem);
  width: 1rem;
  height: 1.45rem;
  content: "";
  background: #6b7390;
  border: 2px solid var(--dunkelblau);
  border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
}

.lampe.an::after {
  background: var(--gelb);
  box-shadow:
    0 0 6px 2px rgb(247 185 62 / 0.9),
    0 0 16px 6px rgb(247 185 62 / 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .lampe.an::after {
    animation: glimmen 2.6s ease-in-out infinite;
  }

  .lampe.an:nth-child(3n)::after {
    animation-delay: -0.9s;
  }

  .lampe.an:nth-child(3n + 1)::after {
    animation-delay: -1.7s;
  }
}

@keyframes glimmen {
  50% {
    box-shadow:
      0 0 3px 1px rgb(247 185 62 / 0.7),
      0 0 10px 3px rgb(247 185 62 / 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lampe::after {
    animation: none !important;
  }
}