/* =====================================================================
   Weihnachten: Schnee, Lichterkette, Pixel-Tannen, Geschenke, Countdown.
   Gilt für index.html und liederbuch.html, dazu das Skript assets/winter.js.
   Nach der Saison beide Dateien und ihre Einbindung löschen, dazu die Elemente mit class="xmas-...".
   ===================================================================== */
:root {
  --snow: #f4f8ff;
  --snow-shade: #c9d8f2;
  --pine: #2f9e44;
  --pine-dark: #1d6e30;
  --gold: #ffcc33;
}
/* Schneehäubchen auf Karten und Kästen (Pixel-Optik, 2px-Pixel) */
.card, .plat, .tip, .note, .warn, .dl, .song { position: relative; }
.card::before, .plat::before, .tip::before, .note::before, .warn::before, .dl::before, .song::before {
  content: ""; position: absolute; left: 8px; right: 8px; top: -5px; height: 10px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 5' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='6' height='1' fill='%23f4f8ff'/%3E%3Crect x='11' y='0' width='4' height='1' fill='%23f4f8ff'/%3E%3Crect x='19' y='0' width='7' height='1' fill='%23f4f8ff'/%3E%3Crect x='0' y='1' width='30' height='2' fill='%23f4f8ff'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23f4f8ff'/%3E%3Crect x='9' y='3' width='1' height='1' fill='%23c9d8f2'/%3E%3Crect x='16' y='3' width='3' height='1' fill='%23f4f8ff'/%3E%3Crect x='23' y='3' width='1' height='1' fill='%23c9d8f2'/%3E%3Crect x='27' y='3' width='2' height='1' fill='%23c9d8f2'/%3E%3Crect x='3' y='4' width='1' height='1' fill='%23c9d8f2'/%3E%3Crect x='17' y='4' width='1' height='1' fill='%23c9d8f2'/%3E%3Crect x='4' y='3' width='1' height='1' fill='%23c9d8f2'/%3E%3C/svg%3E") repeat-x 0 0 / 60px 10px;
  image-rendering: pixelated;
}
a.card:hover { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(255, 204, 51, .25), 0 8px 24px rgba(255, 204, 51, .08); }

/* Abschnitte durch eine Zuckerstange getrennt */
section.page { border-bottom: 3px solid transparent; border-image: repeating-linear-gradient(135deg, #b81d17 0 7px, #e9e2dc 7px 14px) 3; }
section.page:last-of-type { border-image: none; }

/* Seitenleiste: kleine Christbaumkugeln vor den Gruppen, Zuckerstange am aktiven Eintrag */
nav.side h4::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 1px; background: var(--red); box-shadow: 0 -3px 0 -1px var(--gold); }
nav.side h4:nth-of-type(3n+2)::before { background: var(--pine); }
nav.side h4:nth-of-type(3n)::before { background: var(--gold); box-shadow: 0 -3px 0 -1px var(--red); }
nav.side a.active { box-shadow: none; background: repeating-linear-gradient(180deg, var(--red) 0 4px, var(--snow) 4px 8px) left / 3px 100% no-repeat, var(--panel-2); }

/* Lichterkette unter der Kopfzeile */
.xmas-lights { position: absolute; left: 0; right: 0; top: 100%; height: 20px; display: flex; overflow: hidden; pointer-events: none; }
.xmas-lights span { flex: 0 0 40px; position: relative; height: 20px; --c: var(--red); }
.xmas-lights span::before { content: ""; position: absolute; left: -1px; right: -1px; top: -7px; height: 11px; border-bottom: 2px solid #2b3b23; border-radius: 0 0 50% 50%; }
.xmas-lights span::after {
  content: ""; position: absolute; left: 17px; top: 4px; width: 6px; height: 8px;
  border-top: 3px solid #4b4d3c; background: var(--c);
  box-shadow: 0 0 10px 2px var(--c);
  animation: xmas-blink 2.4s steps(1) infinite;
}
.xmas-lights span:nth-child(4n+2) { --c: var(--pine); }
.xmas-lights span:nth-child(4n+3) { --c: var(--gold); }
.xmas-lights span:nth-child(4n+4) { --c: var(--blue); }
.xmas-lights span:nth-child(2n)::after { animation-delay: -1.2s; }
.xmas-lights span:nth-child(3n)::after { animation-duration: 3.6s; }
@keyframes xmas-blink { 0% { opacity: 1; } 50% { opacity: .3; box-shadow: none; } }

/* Schnee-Knopf oben rechts */
.xmas-snowbtn {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font: 13px var(--pixel); color: var(--muted); cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
.xmas-snowbtn:hover { color: var(--text); }
.xmas-snowbtn[aria-pressed="true"] { color: var(--snow); border-color: #4a5f86; }
.xmas-snowbtn i { width: 8px; height: 8px; display: inline-block; background:
  linear-gradient(currentColor, currentColor) center / 2px 8px no-repeat,
  linear-gradient(currentColor, currentColor) center / 8px 2px no-repeat; }
#xmas-snow { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; }

/* Kopfbereich: Nachthimmel, Schneeboden, Tannen, Countdown */
.hero { position: relative; overflow: hidden; padding-bottom: 76px;
  background:
    radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.6px) 0 0 / 130px 95px,
    radial-gradient(circle, rgba(200,220,255,.4) 1px, transparent 1.6px) 47px 31px / 190px 140px,
    radial-gradient(ellipse at 50% 0%, rgba(224, 35, 28, .22), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(120, 160, 255, .14), transparent 55%),
    var(--bg); }
.hero > img, .hero > p, .hero > .chips, .xmas-count { position: relative; z-index: 2; }
.chip.xmas-chip { color: #fff; border-color: #8a0d0a; background: repeating-linear-gradient(135deg, #b81d17 0 8px, #8a0d0a 8px 16px); }
.xmas-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; z-index: 1; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 8' shape-rendering='crispEdges'%3E%3Crect y='4' width='32' height='4' fill='%23f4f8ff'/%3E%3Crect y='3' width='9' height='1' fill='%23f4f8ff'/%3E%3Crect x='2' y='2' width='5' height='1' fill='%23f4f8ff'/%3E%3Crect x='14' y='3' width='10' height='1' fill='%23f4f8ff'/%3E%3Crect x='16' y='2' width='6' height='1' fill='%23f4f8ff'/%3E%3Crect x='18' y='1' width='2' height='1' fill='%23f4f8ff'/%3E%3Crect x='28' y='3' width='4' height='1' fill='%23f4f8ff'/%3E%3Crect y='7' width='32' height='1' fill='%23c9d8f2'/%3E%3Crect x='5' y='6' width='3' height='1' fill='%23c9d8f2'/%3E%3Crect x='21' y='6' width='4' height='1' fill='%23c9d8f2'/%3E%3C/svg%3E") repeat-x left bottom / 128px 32px; }
.xmas-art { position: absolute; bottom: 22px; z-index: 1; line-height: 0; }
.xmas-art svg { display: block; width: 100%; height: auto; }
.xmas-art.t1 { left: 3%; width: 119px; }
.xmas-art.t2 { left: calc(3% + 104px); width: 68px; }
.xmas-art.t3 { right: 3%; width: 119px; }
.xmas-art.g1 { right: calc(3% + 116px); width: 45px; bottom: 24px; }
.xmas-art.g2 { right: calc(3% + 160px); width: 32px; bottom: 24px; }
.xmas-art .star { animation: xmas-star 1.6s steps(1) infinite; }
.xmas-art .orn { animation: xmas-blink 2.8s steps(1) infinite; }
@keyframes xmas-star { 0%, 100% { fill: #ffd84a; } 50% { fill: #fff6c4; } }
.xmas-count { margin: 26px auto 0; max-width: 420px; padding: 12px 16px 10px; background: rgba(0, 0, 0, .55); border-radius: 6px; }
.xmas-count .t { font: 17px/1.2 var(--pixel); color: var(--gold); text-shadow: 2px 2px 0 #3f2a00; }
.xmas-count .bar { height: 8px; margin: 9px auto 0; background: #3b0c0c; border: 1px solid #000; }
.xmas-count .bar i { display: block; height: 100%; width: 0; transition: width 1.2s ease-out;
  background: repeating-linear-gradient(-45deg, #e0231c 0 6px, #f4f8ff 6px 12px) 0 0 / 17px 17px;
  animation: xmas-stripes 1s linear infinite; }
@keyframes xmas-stripes { to { background-position: 17px 0; } }

/* Fußzeile mit Geschenken */
.xmas-gifts { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 0 auto 14px; line-height: 0; }
.xmas-gifts svg { display: block; height: auto; }
.xmas-greet { font: 16px var(--pixel); color: var(--gold); margin: 0 0 18px; text-shadow: 2px 2px 0 #3f2a00; }

@media (max-width: 900px) {
  .xmas-art.t2, .xmas-art.g2 { display: none; }
  .xmas-art.t1, .xmas-art.t3 { width: 68px; }
  .xmas-art.g1 { right: calc(3% + 68px); width: 32px; }
  .hero { padding-bottom: 112px; }
  .xmas-count .t { font-size: 15px; }
  .xmas-snowbtn span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xmas-lights span::after, .xmas-art .star, .xmas-art .orn, .xmas-count .bar i { animation: none; }
}