/* Feiertags-Deko (v39). Feste Farben bewusst (Deko soll in allen Farbansichten gleich aussehen);
   die Datei ist in build_farbansichten.py ausgenommen. Ebene ohne Mausereignisse. */
.deko-layer{--deko-kopf:0px;position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:4;contain:strict}
.deko-layer svg{display:block}
.deko-ecke{position:absolute;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}

.deko-oben-links{left:0;top:var(--deko-kopf)}
.deko-oben-rechts{right:0;top:var(--deko-kopf)}
.deko-unten-links{left:10px;bottom:0}
.deko-unten-rechts{right:10px;bottom:0}
.deko-unten-links,.deko-unten-rechts{transition:opacity .35s,transform .35s}
.deko-fuss .deko-unten-links,.deko-fuss .deko-unten-rechts{opacity:0;transform:translateY(30px)}
.deko-badge{display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle;animation:deko-badge-wipp 3.5s ease-in-out infinite}
.deko-badge svg{width:20px;height:20px}
@keyframes deko-badge-wipp{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* Schnee, Blütenblätter */
.deko-flocke{position:absolute;top:-10%;color:#eaf6ff;line-height:1;user-select:none;text-shadow:0 0 6px rgba(160,210,255,.6);animation:deko-fall linear infinite;will-change:transform}
.deko-blueten .deko-flocke{color:#ffb7d5;text-shadow:0 0 4px rgba(255,150,200,.5)}
@keyframes deko-fall{0%{transform:translate3d(0,0,0) rotate(0)}25%{transform:translate3d(18px,28vh,0) rotate(90deg)}50%{transform:translate3d(-14px,56vh,0) rotate(180deg)}75%{transform:translate3d(16px,84vh,0) rotate(270deg)}100%{transform:translate3d(0,115vh,0) rotate(360deg)}}

/* Konfetti */
.deko-konfetti{position:absolute;top:-6%;border-radius:2px;opacity:.9;animation:deko-konfetti linear infinite;will-change:transform}
@keyframes deko-konfetti{0%{transform:translate3d(0,0,0) rotate3d(1,1,0,0)}50%{transform:translate3d(-22px,55vh,0) rotate3d(1,1,0,540deg)}100%{transform:translate3d(20px,112vh,0) rotate3d(1,1,0,1080deg)}}

/* Halloween */
.deko-netz{width:118px;height:118px;color:rgba(235,240,245,.42)}
.deko-netzlinks{transform:scaleX(-1)}
.deko-kuerbis{width:120px;height:92px}
.deko-glut{animation:deko-flackern 2.6s ease-in-out infinite}
@keyframes deko-flackern{0%,100%{opacity:1}45%{opacity:.75}55%{opacity:.95}70%{opacity:.6}}
.deko-spinnenfaden{position:absolute;top:calc(var(--deko-kopf) - var(--deko-scroll,0px));width:40px;height:150px;color:rgba(235,240,245,.7);transform-origin:top center;animation:deko-pendel 5s ease-in-out infinite}
.deko-spinnenfaden svg{width:40px;height:92px}
@keyframes deko-pendel{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(16px)}}
.deko-flug{position:absolute;left:-80px;width:60px;height:50px;animation:deko-flug linear infinite}
.deko-flug svg{width:60px;height:50px;animation:deko-flattern .5s ease-in-out infinite alternate}
@keyframes deko-flug{0%{transform:translate3d(0,0,0)}30%{transform:translate3d(35vw,-40px,0)}60%{transform:translate3d(70vw,20px,0)}100%{transform:translate3d(calc(100vw + 120px),-20px,0)}}
@keyframes deko-flattern{from{transform:scaleY(1)}to{transform:scaleY(.72)}}

/* Weihnachten */
.deko-kettenleiste{position:absolute;left:-10px;right:-10px;top:calc(var(--deko-kopf) - 6px);height:34px}
.deko-kette{width:100%;min-width:1000px;height:34px}
.deko-birne{animation:deko-blinken 1.8s ease-in-out infinite}
@keyframes deko-blinken{0%,100%{opacity:1}50%{opacity:.35}}
.deko-baum{width:110px;height:132px}
.deko-lichter circle{animation:deko-blinken 2.2s ease-in-out infinite}
.deko-lichter circle:nth-child(2n){animation-delay:.7s}
.deko-lichter circle:nth-child(3n){animation-delay:1.3s}

/* Winter, Neujahr, Fasching, Ostern */
.deko-schneemann{width:92px;height:120px}
.deko-klee{width:72px;height:72px}
.deko-rakete{position:absolute;width:150px;height:150px;transform:translate(-50%,-50%);animation:deko-knall 4.2s ease-out infinite;opacity:0}
.deko-rakete svg{width:100%;height:100%}
@keyframes deko-knall{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}8%{opacity:1}40%{transform:translate(-50%,-50%) scale(1);opacity:.9}60%{opacity:0;transform:translate(-50%,-45%) scale(1.08)}100%{opacity:0}}
.deko-schlangenleiste{position:absolute;left:0;right:0;top:var(--deko-kopf);height:72px;overflow:hidden}
.deko-schlangen{width:100%;height:72px;min-width:900px;opacity:.75}
.deko-maske{width:126px;height:70px}
.deko-eier{width:150px;height:76px}
.deko-hase{width:90px;height:82px}

/* v68: Bild-Deko – KI-Bilder (assets/img/deko), 2-Phasen-Bilder als Streifen (Feld 1 | Feld 2) */
.deko-gruppe{position:absolute}
.deko-gruppe>.deko-figur,.deko-gruppe>.deko-wipp{position:relative}
.deko-dazu{position:absolute}
.deko-figur{background-repeat:no-repeat;background-size:100% 100%;background-position:0 0}
.deko-sprite{background-size:200% 100%}
.deko-wipp{animation:deko-wippen 4.6s ease-in-out infinite;transform-origin:50% 100%}
@keyframes deko-wippen{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.2deg)}}
.deko-a-blinzeln{animation:deko-blinzeln 5.6s steps(1,end) infinite}
@keyframes deko-blinzeln{0%{background-position:0 0}91%{background-position:100% 0}94%{background-position:0 0}}
.deko-a-blinzeln-langsam{animation:deko-blinzeln2 7.5s steps(1,end) infinite;animation-delay:-2s}
@keyframes deko-blinzeln2{0%{background-position:0 0}86%{background-position:100% 0}93%{background-position:0 0}}
.deko-a-flattern{animation:deko-wechsel2 .34s steps(1,end) infinite}
.deko-a-funkeln{animation:deko-wechsel2 .42s steps(1,end) infinite}
@keyframes deko-wechsel2{0%{background-position:0 0}50%{background-position:100% 0}}
.deko-a-wechsel{animation:deko-wechsel 6.5s steps(1,end) infinite}
@keyframes deko-wechsel{0%{background-position:0 0}55%{background-position:100% 0}85%{background-position:0 0}}
.deko-a-winken{animation:deko-winken 5.5s steps(1,end) infinite}
@keyframes deko-winken{0%{background-position:0 0}60%{background-position:100% 0}64%{background-position:0 0}68%{background-position:100% 0}72%{background-position:0 0}76%{background-position:100% 0}80%{background-position:0 0}}
.deko-a-schluepfen{animation:deko-schluepfen 8s steps(1,end) infinite}
@keyframes deko-schluepfen{0%{background-position:0 0}45%{background-position:100% 0}90%{background-position:0 0}}
.deko-a-gluehen{animation:deko-gluehen 3.4s ease-in-out infinite}
@keyframes deko-gluehen{0%,100%{filter:drop-shadow(0 0 3px rgba(255,190,90,.22))}50%{filter:drop-shadow(0 0 14px rgba(255,190,90,.55))}}
.deko-bildflug{position:absolute;left:-100px;animation:deko-flug linear infinite}
.deko-bildfaden{width:auto;height:auto;display:flex;flex-direction:column;align-items:center}
.deko-faden{display:block;width:1px;height:64px;background:rgba(235,240,245,.55)}
.deko-nebel{position:absolute;left:-6%;bottom:0;width:48vw;height:130px;background:radial-gradient(ellipse at 30% 75%,rgba(200,212,232,.16),transparent 62%),radial-gradient(ellipse at 72% 85%,rgba(200,212,232,.11),transparent 66%);animation:deko-nebel 18s ease-in-out infinite alternate;transition:opacity .35s}
@keyframes deko-nebel{from{transform:translateX(-30px)}to{transform:translateX(50px)}}
.deko-fuss .deko-nebel{opacity:0}
.deko-ki{position:absolute;left:8px;bottom:6px;padding:2px 8px;border-radius:999px;background:rgba(8,11,17,.78);color:#d6dee8;font:600 10.5px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.02em}
html[data-farbansicht=hell] .deko-ki{background:rgba(255,255,255,.88);color:#24313d;box-shadow:0 0 0 1px rgba(36,49,61,.18)}
html[data-farbansicht=hell] .deko-faden{background:rgba(40,60,75,.6)}

/* Einstellungen (Meine Werkstatt) */
.deko-optionen{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.deko-option{position:relative}
.deko-symbol{display:inline-flex;flex:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:rgba(127,160,180,.14)}
.deko-symbol svg{width:26px;height:26px}
.deko-status{margin:12px 0 4px;font-size:.92rem;font-weight:700;color:var(--text-primary,#e8f1f4)}

/* Helle Ansicht: Flocken und Netz sichtbar halten */
html[data-farbansicht=hell] .deko-flocke{color:#6fb1e0;text-shadow:none}
html[data-farbansicht=hell] .deko-blueten .deko-flocke{color:#e2609e}
html[data-farbansicht=hell] .deko-netz{color:rgba(40,60,75,.55)}
html[data-farbansicht=hell] .deko-spinnenfaden{color:rgba(40,60,75,.7)}
html[data-farbansicht=hell] .deko-kette path{stroke:#6a7f8c}

/* Ruhe: Systemeinstellung oder Leiterbahnen pausiert */
html[data-circuit-motion=paused] .deko-layer *,html[data-circuit-motion=paused] .deko-badge{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.deko-layer *,.deko-badge{animation:none!important}.deko-bildflug{display:none}.deko-flocke{top:auto}.deko-rakete{opacity:.75;transform:translate(-50%,-50%) scale(.8)}.deko-flug{display:none}.deko-spinnenfaden{transform:translateY(8px)}}

@media(max-width:760px){
  .deko-netz{width:64px;height:64px}.deko-schlangenleiste,.deko-schlangen{height:52px}.deko-kuerbis{width:72px;height:55px}.deko-baum{width:66px;height:80px}.deko-schneemann{width:58px;height:76px}
  .deko-klee{width:50px;height:50px}.deko-maske{width:84px;height:47px}.deko-eier{width:100px;height:50px}.deko-hase{width:60px;height:55px}
  .deko-spinnenfaden{height:110px}.deko-spinnenfaden svg{width:28px;height:64px}.deko-rakete{width:110px;height:110px}
  .deko-unten-links{left:4px}.deko-unten-rechts{right:4px}.deko-ecke{opacity:.92}.deko-badge svg{width:17px;height:17px}
}
@media print{.deko-layer,.deko-badge{display:none!important}}