/* 🐣 Ostern: Pastell, hängende bemalte Ostereier, schwebende Blütenblätter. Unterbau in themes.css. */

body.easter {
  --bg: #fbf8ee;
  --card: #fffefa;
  --text: #2f2b25;
  --muted: #6d665a;
  --border: #ece4cf;
  --accent: #a8417a;
  --accent-text: #ffffff;
  --head: #4c7a34;
  --price: #8a5a12;
  --badge-bg: #f3c74f;
  --badge-text: #2f2400;
  --tint1: rgb(243 199 79 / .16);
  --tint2: rgb(176 140 220 / .14);
  --wire: #9a8763;
  --band: repeating-linear-gradient(90deg, #f6b6c8 0 14px, #f9e08b 14px 28px, #b9e4c9 28px 42px, #c9b8f0 42px 56px);
  --fall-speed: 32s;
  --drift: 45px;
  --particles-small:
    radial-gradient(3px 4px at 30px 40px, rgb(246 182 200 / .8) 50%, transparent 52%),
    radial-gradient(3px 3px at 120px 160px, rgb(185 228 201 / .85) 50%, transparent 52%),
    radial-gradient(4px 3px at 200px 90px, rgb(249 224 139 / .85) 50%, transparent 52%);
  --particles-big:
    radial-gradient(5px 6px at 70px 130px, rgb(201 184 240 / .7) 50%, transparent 52%),
    radial-gradient(5px 4px at 280px 40px, rgb(246 182 200 / .7) 50%, transparent 52%);
}

@media (prefers-color-scheme: dark) {
  body.easter {
    --bg: #1c1a24;
    --card: #262331;
    --text: #f2eef6;
    --muted: #b0a9bd;
    --border: #3a3548;
    --accent: #e27bb1;
    --accent-text: #1c1a24;
    --head: #a8d98a;
    --price: #f3c74f;
    --wire: #8a7f9c;
  }
}

body.easter .topbar .kicker::before { content: "🐣 "; }
body.easter .login h1::after { content: " 🌷"; }
body.easter .empty::before { content: "🐰 "; }

/* ---------- Ostereier mit Streifen, schaukeln leicht ---------- */

body.easter .garland i { --c: #f6b6c8; --c2: #fff; }
body.easter .garland i:nth-of-type(4n + 2) { --c: #f9e08b; --c2: #e98aa8; }
body.easter .garland i:nth-of-type(4n + 3) { --c: #b9e4c9; --c2: #8a6fd1; }
body.easter .garland i:nth-of-type(4n + 4) { --c: #c9b8f0; --c2: #f9e08b; }

body.easter .garland i::after {
  width: 15px;
  height: 20px;
  margin-left: -7.5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    linear-gradient(transparent 36%, var(--c2) 36% 46%, transparent 46% 60%, var(--c2) 60% 66%, transparent 66%),
    radial-gradient(circle at 35% 28%, rgb(255 255 255 / .7) 0 1.5px, transparent 3px),
    var(--c);
  box-shadow: 0 2px 4px rgb(0 0 0 / .12);
  transform-origin: 50% -2px;
  animation: easter-sway 3.6s ease-in-out infinite;
}
body.easter .garland i:nth-of-type(odd)::after { animation-delay: -1.8s; }
body.easter .garland i:nth-of-type(3n)::after { animation-duration: 4.4s; }

@keyframes easter-sway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}