/* Weihnachtlicher Look „Winternacht" der Spender-Seiten (index.html, danke.html), gewählt am
   02.11.2026 (Variante A, Prototyp auf dem Zweig prototyp/stile): Nachthimmel wie das
   Spendenformular im Stil „Weihnachtlich", Zettel an Lichterleinen mit Holzklammern, rote Knöpfe.
   Liegt über zettel.css und Co. und gilt nur mit body.winternacht.
   Himmel (Schnee, Sterne): winternacht-himmel.css. */
.winternacht {
  --weihnachtsrot: #c8372a;
  --licht: #ffe08a;
  --hell-text: #c9d1ee;

  color: #f3f5ff;
  background: radial-gradient(
      ellipse at 50% 0%,
      #2c3f86 0%,
      #172353 45%,
      #0c1330 100%
    )
    fixed;
}

/* Das Blatt fällt weg: die Seite ist der Himmel */
.winternacht #app {
  position: relative;
  max-width: 1180px;
  color: #f3f5ff;
  background: none;
  box-shadow: none;
  --muted: var(--hell-text);
}

.winternacht #app::before,
.winternacht .kopfband .deko {
  display: none;
}

/* Kopf: Logo, großer Titel mit Stern, alles mittig */
.winternacht .kopfband {
  flex-direction: column;
  gap: 1rem;
  padding: 2.2rem 1rem 0.5rem;
  text-align: center;
  background: none;
  border: 0;
}

.winternacht .logo {
  width: min(13rem, 60%);
  background-position: center;
}

.winternacht .kopfband h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 7vw, 4.2rem);
  text-shadow: 0 0 28px rgb(249 177 34 / 0.35);
  text-wrap: balance;
}

.winternacht .kopfband h1::before {
  color: var(--gelb);
  content: "✦ ";
}

.winternacht .fortschritt {
  justify-items: center;
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.winternacht .zaehler {
  color: var(--gelb);
  background: none;
}

.winternacht .fortschritt .balken {
  width: 100%;
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.85);
}

/* Lichterkette im Kopf: bunte Lampen wie am Spendenformular */
.winternacht .lichter {
  justify-content: center;
}

.winternacht .lampe::before {
  filter: invert(1) opacity(0.5);
}

.winternacht .lampe::after {
  background: #2a3566;
  border-color: #0c1330;
}

.winternacht .lampe.an::after {
  --c: var(--gelb);

  background: var(--c);
  box-shadow:
    0 0 8px 2px var(--c),
    0 0 18px 6px rgb(255 255 255 / 0.15);
}

.winternacht .lampe.an:nth-child(3n + 1)::after {
  --c: #ea4f3d;
}
.winternacht .lampe.an:nth-child(3n)::after {
  --c: #7fc67a;
}

/* Überschrift über den Zetteln */
.winternacht #sack-titel {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  text-align: center;
}

.winternacht #sack-titel::before,
.winternacht #sack-titel::after {
  color: var(--gelb);
  content: " ✦ ";
}

/* Die Zettel hängen an Lichterleinen: jede Leine läuft über die ganze Reihe */
.winternacht .kacheln {
  gap: 3.6rem 1.6rem;
  padding-top: 2.4rem;
}

.winternacht .zettel {
  transform: none;
}

.winternacht .zettel::before {
  position: absolute;
  top: -1.9rem;
  right: -0.85rem;
  left: -0.85rem;
  height: 1rem;
  content: "";
  background:
    radial-gradient(
        circle,
        var(--licht) 0 0.16rem,
        rgb(249 177 34 / 0.5) 0.24rem,
        transparent 0.45rem
      )
      center / 1.8rem 100% repeat-x,
    linear-gradient(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.4)) center /
      100% 2px no-repeat;
}

.winternacht .zettel .dreher {
  rotate: var(--dreh);
  transform-origin: 50% -1.4rem;
}

/* Die Hinweis-Leiste ist ein gelber Zettel: dunkle Schrift, sonst erbt sie das Weiß des Himmels */
.winternacht .hinweis {
  color: var(--dunkelblau);
}

.winternacht .seite {
  --muted: #4a5578;

  border-radius: 3px 3px 16px 3px;
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.4);
}

/* Holzklammer statt Klebestreifen */
.winternacht .seite::before {
  top: -1.75rem;
  left: calc(50% - 0.36rem);
  width: 0.72rem;
  height: 2.3rem;
  background: linear-gradient(90deg, #9a6533, #d9a66b 45%, #a8733f);
  border-radius: 3px;
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.45);
  transform: none;
}

.winternacht .zettel.ist-korb .seite::before {
  background: linear-gradient(90deg, #8f2219, #e0574a 45%, #a3291f);
}

.winternacht .zettel.ist-korb .seite {
  box-shadow:
    inset 0 -7px 0 var(--weihnachtsrot),
    0 0 0 3px var(--licht),
    0 12px 26px rgb(0 0 0 / 0.4);
}

.winternacht .zettel.alle {
  color: #f3f5ff;
  background: rgb(255 255 255 / 0.07);
  border: 2px dashed rgb(255 255 255 / 0.45);
}

/* Icon: weiß im roten Kreis, passend zu den Knöpfen */
.winternacht .vorn .emoji[data-icon] {
  --icon-abstand: 22%;
  --icon-farbe: #fff;

  width: 3.9rem;
  height: 3.9rem;
  background: var(--weihnachtsrot);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgb(200 55 42 / 0.35);
}

/* Knöpfe: rot und rund wie beim Spendenformular */
.winternacht .haupt,
.winternacht .zettel.alle .haupt,
.winternacht .hinten .haupt,
.winternacht #spenden {
  padding: 0.8rem 1.4rem;
  font:
    700 1.1rem/1.2 system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  color: #fff;
  background: var(--weihnachtsrot);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgb(200 55 42 / 0.45);
}

.winternacht .haupt:disabled {
  background: #8a8fa8;
  box-shadow: none;
}

/* Korb-Leiste: dunkles Glas mit Lichterleine oben */
.winternacht .korbleiste {
  background: rgb(12 19 48 / 0.92);
  border-top: 0;
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.45);
  backdrop-filter: blur(6px);
}

.winternacht .korbleiste::before {
  position: absolute;
  inset: -0.5rem 0.5rem auto;
  height: 1rem;
  content: "";
  background:
    radial-gradient(
        circle,
        var(--licht) 0 0.16rem,
        rgb(249 177 34 / 0.5) 0.24rem,
        transparent 0.45rem
      )
      center / 1.8rem 100% repeat-x,
    linear-gradient(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.5)) center /
      100% 2px no-repeat;
}

.winternacht #spenden {
  min-height: 3.2rem;
  font-size: 1.15rem;
}

.winternacht .fuss {
  color: var(--hell-text);
  border-top-color: rgb(255 255 255 / 0.25);
}

/* Bewegung nur, wenn erlaubt: Schnee fällt, Sterne funkeln, Zettel schaukeln an der Klammer */
@media (prefers-reduced-motion: no-preference) {
/* Bewegung nur, wenn erlaubt: Leinen glimmen, Zettel schaukeln an der Klammer (Himmel: winternacht-himmel.css) */
@media (prefers-reduced-motion: no-preference) {
  .winternacht .zettel::before {
    animation: nacht-glimmern 2.8s ease-in-out infinite;
  }

  .winternacht .zettel:not(.gedreht, .ist-erfuellt, .alle):hover {
    animation: none;
  }

  .winternacht .zettel:not(.gedreht, .ist-erfuellt, .alle):hover .dreher {
    animation: nacht-schaukeln 1.3s ease-in-out;
  }

  .winternacht #spenden:not(:disabled) {
    animation: nacht-pulsieren 2.4s ease-in-out infinite;
  }
}

@keyframes nacht-glimmern {
  50% {
    opacity: 0.6;
  }
}

@keyframes nacht-schaukeln {
  20% {
    rotate: calc(var(--dreh) - 3deg);
  }
  50% {
    rotate: calc(var(--dreh) + 2deg);
  }
  80% {
    rotate: calc(var(--dreh) - 1deg);
  }
}

@keyframes nacht-pulsieren {
  50% {
    box-shadow: 0 0 0 7px rgb(200 55 42 / 0.35);
  }
}