/* 🎄 Weihnachten: Tannengrün & Rot, Lichterkette, Schnee. Unterbau in themes.css. */

body.xmas {
  --bg: #f6f1e7;
  --card: #fffdf8;
  --text: #2b2420;
  --muted: #6f655c;
  --border: #e6dbc8;
  --accent: #b3202f;
  --accent-text: #ffffff;
  --head: #1f5c3d;
  --price: #86600f; /* dunkles Gold, Kontrast ≥ 4.5:1 auf Creme */
  --badge-bg: #b8892b;
  --badge-text: #1b1408;
  --tint1: rgb(179 32 47 / .07);
  --tint2: rgb(31 92 61 / .09);
  --wire: #2f3a33;
  --band: repeating-linear-gradient(-45deg, var(--accent) 0 8px, #fff 8px 16px, var(--head) 16px 24px, #fff 24px 32px);
  --snow: rgb(130 152 176 / .7);
  --particles-small:
    radial-gradient(2.5px 2.5px at 30px 40px, var(--snow) 50%, transparent 52%),
    radial-gradient(2px 2px at 110px 150px, var(--snow) 50%, transparent 52%),
    radial-gradient(3px 3px at 190px 90px, var(--snow) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 70px 200px, var(--snow) 50%, transparent 52%);
  --particles-big:
    radial-gradient(4px 4px at 60px 120px, var(--snow) 50%, transparent 52%),
    radial-gradient(3px 3px at 250px 30px, var(--snow) 50%, transparent 52%),
    radial-gradient(3.5px 3.5px at 320px 260px, var(--snow) 50%, transparent 52%);
}

@media (prefers-color-scheme: dark) {
  body.xmas {
    --bg: #0e1b16;
    --card: #15261e;
    --text: #f3ece0;
    --muted: #a5b2a8;
    --border: #26402f;
    --accent: #d93a4c;
    --head: #8fd0a8;
    --price: #e3b85c;
    --badge-bg: #e3b85c;
    --wire: #5b6b60;
    --snow: rgb(255 255 255 / .75);
  }
}

body.xmas .topbar .kicker::before { content: "🎄 "; }
body.xmas .login h1::after { content: " ✨"; }
body.xmas .empty::before { content: "⛄ "; }

/* ---------- Lichterkette: Birne mit Fassung, funkelt versetzt ---------- */

body.xmas .garland i { --c: #e23b4e; --glow: rgb(226 59 78 / .55); }
body.xmas .garland i:nth-of-type(4n + 2) { --c: #f2c14e; --glow: rgb(242 193 78 / .6); }
body.xmas .garland i:nth-of-type(4n + 3) { --c: #3fae6a; --glow: rgb(63 174 106 / .55); }
body.xmas .garland i:nth-of-type(4n + 4) { --c: #4a8fe0; --glow: rgb(74 143 224 / .55); }

body.xmas .garland i::after {
  width: 11px;
  height: 18px;
  margin-left: -5.5px;
  border-radius: 45% 45% 50% 50% / 35% 35% 65% 65%;
  background:
    linear-gradient(var(--wire) 0 5px, transparent 5px),
    radial-gradient(circle at 35% 55%, rgb(255 255 255 / .75) 0 1.5px, transparent 3px),
    var(--c);
  box-shadow: 0 4px 12px 2px var(--glow);
  animation: xmas-twinkle 2.8s ease-in-out infinite;
}
body.xmas .garland i:nth-of-type(3n + 1)::after { animation-delay: -.4s; }
body.xmas .garland i:nth-of-type(3n + 2)::after { animation-delay: -1.3s; animation-duration: 3.4s; }
body.xmas .garland i:nth-of-type(5n)::after { animation-delay: -2.1s; animation-duration: 2.2s; }

@keyframes xmas-twinkle {
  0%, 100% { filter: brightness(1.1); box-shadow: 0 4px 14px 3px var(--glow); }
  50% { filter: brightness(.65) saturate(.8); box-shadow: 0 3px 6px 0 transparent; }
}

/* ---------- Tannenzweige in den oberen Ecken (Hintergrund) ---------- */

.boughs { display: none; }

body.xmas .boughs {
  display: block;
  position: absolute;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  height: 220px;
  overflow: hidden; /* Zweige ragen über den Rand, ohne seitliches Scrollen */
  z-index: 0; /* hinter Lichterkette (2) und Inhalt (1) */
  pointer-events: none;
}
body.xmas .boughs::before,
body.xmas .boughs::after {
  content: "";
  position: absolute;
  top: -14px;
  width: clamp(220px, 38vw, 400px);
  aspect-ratio: 210 / 90;
  background: url(/img/fir-branch.svg) no-repeat 0 0 / contain;
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / .14));
  transform-origin: 0 0;
  animation: xmas-bough 7s ease-in-out infinite;
}
body.xmas .boughs::before { left: -24px; }
body.xmas .boughs::after {
  right: -24px;
  transform: scaleX(-1); /* gespiegelt an Ort und Stelle */
  transform-origin: 50% 0;
  animation-delay: -3.5s;
}
@keyframes xmas-bough {
  0%, 100% { rotate: -1deg; }
  50% { rotate: 1.5deg; }
}
@media (prefers-reduced-motion: reduce) {
  body.xmas .boughs::before,
  body.xmas .boughs::after { animation: none; }
}