/* ==========================================================================
   Jahreszeiten-Deko (Weihnachten · Winter · Herbst), siehe js/mod-deko.js
   ========================================================================== */
:root { --dk-spring: #8cc152; --dk-snow: #ffffff; --dk-snow-edge: #c9dcee; --dk-grass: #96a847; --dk-shadow: rgba(30, 50, 70, .16); }
:root[data-theme="dark"] { --dk-spring: #4f7a2f; --dk-snow: #d3dfeb; --dk-snow-edge: #8ea6bd; --dk-grass: #56602b; --dk-shadow: rgba(0, 0, 0, .35); }

/* ---------- Herbst-Design ---------- */
:root[data-design="herbst"]:not([data-theme="dark"]) { --accent: #a65218; --accent-soft: #f8e8d6; --good: #5c7a24; }
:root[data-design="herbst"][data-theme="dark"] { --accent: #ffa862; --accent-soft: #3b2616; }
:root[data-design="herbst"]:not([data-theme="dark"]) body::before {
  background:
    radial-gradient(900px 560px at 6% -8%, rgba(214, 120, 40, .22), transparent 70%),
    radial-gradient(800px 560px at 98% 8%, rgba(240, 190, 90, .30), transparent 70%),
    radial-gradient(900px 640px at 55% 112%, rgba(170, 70, 30, .16), transparent 70%);
}
:root[data-design="herbst"][data-theme="dark"] body::before { background: radial-gradient(720px 520px at 8% 4%, rgba(210, 110, 40, .28), transparent 70%), radial-gradient(640px 480px at 90% 96%, rgba(180, 80, 30, .20), transparent 70%); }
:root[data-design="herbst"] .brand-logo { filter: none; }
:root[data-design="herbst"] .topbar { border-bottom: 2px solid color-mix(in srgb, var(--accent) 30%, transparent); }


/* ---------- Frühlings-Design (grünes Theme, frischer) ---------- */
:root[data-design="fruehling"]:not([data-theme="dark"]) { --accent: #2f7d32; --accent-soft: #e3f3df; --good: #2f7d32; }
:root[data-design="fruehling"][data-theme="dark"] { --accent: #93d982; --accent-soft: #1b2c1a; }
:root[data-design="fruehling"]:not([data-theme="dark"]) body::before {
  background:
    radial-gradient(900px 560px at 4% -6%, rgba(255, 183, 201, .26), transparent 70%),
    radial-gradient(800px 560px at 98% 6%, rgba(190, 232, 140, .34), transparent 70%),
    radial-gradient(900px 640px at 55% 112%, rgba(255, 224, 120, .18), transparent 70%);
}
:root[data-design="fruehling"][data-theme="dark"] body::before { background: radial-gradient(720px 520px at 8% 4%, rgba(255, 140, 180, .14), transparent 70%), radial-gradient(640px 480px at 90% 96%, rgba(120, 200, 90, .16), transparent 70%); }
:root[data-design="fruehling"] .brand-logo { filter: none; }
:root[data-design="fruehling"] .topbar { border-bottom: 2px solid color-mix(in srgb, var(--accent) 28%, transparent); }
.dk-ground-sp { fill: var(--dk-spring); }

/* ---------- Girlande unter der Kopfzeile ---------- */
.deko-top { position: absolute; left: 0; right: 0; top: 100%; height: 64px; overflow: hidden; pointer-events: none; z-index: 2; }
.deko-top { transition: opacity .35s ease, transform .35s ease; }
.deko-top.away { opacity: 0; transform: translateY(-14px); }
.deko-top svg { display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.topbar { overflow: visible; }

/* ---------- Szene am Seitenende ---------- */
.deko-szene { margin: 34px -4px -6px; pointer-events: none; user-select: none; overflow: hidden; line-height: 0; min-height: 230px; display: flex; justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, #000 86%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(180deg, #000 86%, transparent); mask-composite: intersect; }
.dk-scene-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.dk-ground-s { fill: var(--dk-snow); stroke: var(--dk-snow-edge); stroke-width: 1.5; }
.dk-ground-g { fill: var(--dk-grass); }
.dk-snowfill { fill: var(--dk-snow); }
.dk-sm { fill: var(--dk-snow); stroke: var(--dk-snow-edge); stroke-width: 2; }
.dk-shadow { fill: var(--dk-shadow); }

/* ---------- Schnee / Blätter ---------- */
.deko-canvas { position: fixed; left: 0; top: 0; z-index: 25; pointer-events: none; contain: strict; }
:root[data-design="weihnachten"] body::after, :root[data-design="winter"] body::after { opacity: .35; }

@media (max-width: 720px) {
  .deko-szene { margin-top: 20px; min-height: 200px; }
  .dk-scene-svg { transform-origin: bottom center; }
}
@media print { .deko-top, .deko-szene, .deko-canvas { display: none !important; } }
html.gate .deko-top, html.gate .deko-szene, html.gate .deko-canvas { display: none; }

:root[data-deko="weihnachten"] .topbar { border-bottom-style: solid !important; border-bottom-width: 1px !important; }