/* Saisonale Themes – nur Akzentfarben + Deko, gleiches Layout.
 * Aktiviert über html[data-theme="…"] (siehe seasonal.js). */

/* ===== Farb-Tokens je Theme ===== */
html[data-theme="halloween"]{
  --amber:#E2611B; --amber-soft:#F08A4B; --amber-deep:#E2611B;
  --line:rgba(90,36,128,.30);
}
html[data-theme="halloween"] em{color:#7a3aa0}

html[data-theme="christmas"]{
  --amber:#1f6b3a; --amber-soft:#2c8a4e; --amber-deep:#1f6b3a;
  --line:rgba(154,42,42,.26);
}
html[data-theme="christmas"] em{color:#9a2a2a}

html[data-theme="newyear"]{
  --amber:#c9a227; --amber-soft:#e0c14d; --amber-deep:#1f3a6e;
  --line:rgba(192,160,60,.32);
}
html[data-theme="newyear"] em{color:#c9a227}

/* ===== Dekorative Ebene (blockiert nie Klicks) ===== */
.seasonal-decor{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
.seasonal-decor .dec,.seasonal-decor .dec-snow{position:absolute;background-repeat:no-repeat;background-position:center;background-size:contain}
/* Standard: alles aus */
.seasonal-decor .dec,.seasonal-decor .dec-snow{display:none}

/* ---- Halloween: Spinnennetz-Ecken + hängende Spinne ---- */
html[data-theme="halloween"] .dec-corner-l,
html[data-theme="halloween"] .dec-corner-r,
html[data-theme="halloween"] .dec-hang{display:block}
html[data-theme="halloween"] .dec-corner-l{top:0;left:0;width:190px;height:190px;opacity:.7;
  background-image:url("/assets/img/seasonal/halloween-web.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%235a2480' stroke-width='1' fill='none'%3E%3Cpath d='M0 0 L120 0 M0 0 L0 120 M0 0 L110 50 M0 0 L80 95 M0 0 L50 110 M0 0 L100 25 M0 0 L25 100'/%3E%3Cpath d='M16 0 Q14 14 0 16 M34 0 Q30 30 0 34 M54 0 Q47 47 0 54 M76 0 Q66 66 0 76 M98 0 Q86 86 0 98'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="halloween"] .dec-corner-r{top:0;right:0;width:190px;height:190px;opacity:.7;transform:scaleX(-1);
  background-image:url("/assets/img/seasonal/halloween-web.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg stroke='%235a2480' stroke-width='1' fill='none'%3E%3Cpath d='M0 0 L120 0 M0 0 L0 120 M0 0 L110 50 M0 0 L80 95 M0 0 L50 110 M0 0 L100 25 M0 0 L25 100'/%3E%3Cpath d='M16 0 Q14 14 0 16 M34 0 Q30 30 0 34 M54 0 Q47 47 0 54 M76 0 Q66 66 0 76 M98 0 Q86 86 0 98'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="halloween"] .dec-hang{top:0;left:62%;width:60px;height:150px;background-position:top center;transform-origin:top center;
  background-image:url("/assets/img/seasonal/halloween-spider.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 150'%3E%3Cline x1='35' y1='0' x2='35' y2='52' stroke='%233a2454' stroke-width='1.2'/%3E%3Cellipse cx='35' cy='78' rx='15' ry='19' fill='%231a1018'/%3E%3Cellipse cx='35' cy='62' rx='8' ry='7' fill='%23241229'/%3E%3Cg stroke='%231a1018' stroke-width='2.4' fill='none' stroke-linecap='round'%3E%3Cpath d='M22 70 C8 64 4 52 0 46'/%3E%3Cpath d='M22 82 C6 86 -2 92 -4 100'/%3E%3Cpath d='M48 70 C62 64 66 52 70 46'/%3E%3Cpath d='M48 82 C64 86 72 92 74 100'/%3E%3C/g%3E%3Ccircle cx='31' cy='60' r='2.4' fill='%23E2611B'/%3E%3Ccircle cx='39' cy='60' r='2.4' fill='%23E2611B'/%3E%3C/svg%3E");
  animation:dec-sway 5s ease-in-out infinite}

/* ---- Weihnachten: Tannenzweige + Schleife + Schnee ---- */
html[data-theme="christmas"] .dec-corner-l,
html[data-theme="christmas"] .dec-corner-r,
html[data-theme="christmas"] .dec-hang,
html[data-theme="christmas"] .dec-snow{display:block}
html[data-theme="christmas"] .dec-corner-l{bottom:0;left:0;width:230px;height:150px;background-position:bottom left;opacity:.92;
  background-image:url("/assets/img/seasonal/xmas-branch.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 130'%3E%3Cg stroke='%231f6b3a' stroke-width='6' stroke-linecap='round'%3E%3Cline x1='0' y1='120' x2='200' y2='70'/%3E%3Cline x1='40' y1='110' x2='30' y2='80'/%3E%3Cline x1='90' y1='98' x2='85' y2='66'/%3E%3Cline x1='140' y1='86' x2='138' y2='56'/%3E%3C/g%3E%3Ccircle cx='60' cy='100' r='6' fill='%23c62828'/%3E%3Ccircle cx='120' cy='86' r='6' fill='%23e0b53c'/%3E%3C/svg%3E")}
html[data-theme="christmas"] .dec-corner-r{bottom:0;right:0;width:180px;height:130px;background-position:bottom right;opacity:.85;transform:scaleX(-1);
  background-image:url("/assets/img/seasonal/xmas-branch.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 130'%3E%3Cg stroke='%232c8a4e' stroke-width='6' stroke-linecap='round'%3E%3Cline x1='0' y1='120' x2='200' y2='70'/%3E%3Cline x1='90' y1='98' x2='85' y2='66'/%3E%3C/g%3E%3C/svg%3E")}
html[data-theme="christmas"] .dec-hang{top:6px;left:50%;transform:translateX(-50%);width:64px;height:54px;
  background-image:url("/assets/img/seasonal/xmas-bow.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 50'%3E%3Cpath d='M28 20 C16 6 2 9 7 20 C2 31 18 30 28 20Z' fill='%23c62828'/%3E%3Cpath d='M28 20 C40 6 54 9 49 20 C54 31 38 30 28 20Z' fill='%23c62828'/%3E%3Ccircle cx='28' cy='20' r='4.5' fill='%239a1f1f'/%3E%3Cpath d='M25 23 L19 38 M31 23 L37 38' stroke='%23c62828' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}
html[data-theme="christmas"] .dec-snow{inset:0;width:100%;height:100%;background-size:200px 200px,260px 260px,320px 320px;
  background-image:
    radial-gradient(2px 2px at 30px 40px,rgba(255,255,255,.9),transparent),
    radial-gradient(2px 2px at 130px 90px,rgba(255,255,255,.8),transparent),
    radial-gradient(1.5px 1.5px at 80px 160px,rgba(255,255,255,.7),transparent);
  animation:dec-snow 14s linear infinite}

/* ---- Neujahr: Feuerwerk (Schwarz wird per blend ausgeblendet) ---- */
html[data-theme="newyear"] .dec-burst-l,
html[data-theme="newyear"] .dec-burst-r{display:block;mix-blend-mode:screen}
html[data-theme="newyear"] .dec-burst-l{top:40px;left:6%;width:240px;height:240px;opacity:.9;
  background-image:url("/assets/img/seasonal/newyear-fireworks.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate(60,60)' stroke='%23f0d27a' stroke-width='1.2'%3E%3Cline y2='-50'/%3E%3Cline y2='50'/%3E%3Cline x2='50'/%3E%3Cline x2='-50'/%3E%3Cline x2='35' y2='35'/%3E%3Cline x2='-35' y2='35'/%3E%3Cline x2='35' y2='-35'/%3E%3Cline x2='-35' y2='-35'/%3E%3C/g%3E%3C/svg%3E");
  animation:dec-twinkle 3.5s ease-in-out infinite}
html[data-theme="newyear"] .dec-burst-r{top:90px;right:8%;width:170px;height:170px;opacity:.8;
  background-image:url("/assets/img/seasonal/newyear-fireworks.png"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg transform='translate(60,60)' stroke='%239bb8ff' stroke-width='1.1'%3E%3Cline y2='-46'/%3E%3Cline y2='46'/%3E%3Cline x2='46'/%3E%3Cline x2='-46'/%3E%3Cline x2='32' y2='32'/%3E%3Cline x2='-32' y2='32'/%3E%3Cline x2='32' y2='-32'/%3E%3Cline x2='-32' y2='-32'/%3E%3C/g%3E%3C/svg%3E");
  animation:dec-twinkle 4.2s ease-in-out infinite .8s}

/* ===== Animationen ===== */
@keyframes dec-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes dec-snow{from{background-position:0 0,0 0,0 0}to{background-position:40px 200px,-60px 260px,30px 320px}}
@keyframes dec-twinkle{0%,100%{opacity:.35}50%{opacity:.95}}

@media (prefers-reduced-motion:reduce){
  .seasonal-decor .dec,.seasonal-decor .dec-snow{animation:none!important}
}