/* ================= Prosito · Baukasten: Kulissen und Effekte (effekte.js) =================
   Alles liegt in #llfx, fängt keine Fingertipps ab und liegt hinter bzw. über dem Inhalt, ohne ihn zu verdecken. */
#llfx,#llfxv{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#llfxv{z-index:2} /* Effekte vorne liegen HINTER dem Inhalt (z 3) – nie über Text oder Dialogen; kurze Momente in #llfxj */
body.llfx #app{position:relative;z-index:3}
#llfx{z-index:1}
#llfxj{position:fixed;inset:0;pointer-events:none;z-index:42;overflow:hidden}
#llfx .fx-deko{position:absolute;left:0;right:0;bottom:0;height:min(42vh,320px);opacity:.95}
#llfx .fx-deko svg{width:100%;height:100%;display:block}
#llfx .fx-canvas,#llfxv .fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3}
#llfxv .fx-lichter{position:absolute;left:0;right:0;top:env(safe-area-inset-top);height:24px;z-index:4}
#llfxv .fx-lichter svg{width:100%;height:24px;display:block}
#llfxv .fx-birne{animation:fx-blink 2.4s ease-in-out infinite}
#llfxv .fx-birne.b1{animation-delay:.8s}#llfxv .fx-birne.b2{animation-delay:1.6s}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.35}}
body.fx-mit-lichtern .wrap{padding-top:calc(34px + env(safe-area-inset-top))}
#llfx .fx-kamin{position:absolute;left:0;right:0;bottom:0;height:120px;opacity:0;transition:opacity .6s;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(242,140,58,.42),rgba(224,90,71,.16) 55%,transparent 80%)}
#llfx .fx-kamin.an{opacity:1;animation:fx-flacker 3.2s ease-in-out infinite}
@keyframes fx-flacker{0%,100%{opacity:.85}30%{opacity:1}55%{opacity:.7}75%{opacity:.95}}
#llfxv .fx-flug{position:absolute;inset:0;z-index:5}
#llfxv .fx-schlitten{position:absolute;left:-220px;color:rgba(255,255,255,.75);animation:fx-schlitten 8.5s linear forwards}
@keyframes fx-schlitten{0%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(calc(50vw + 110px),-22px) rotate(2deg)}100%{transform:translate(calc(100vw + 240px),6px) rotate(-3deg)}}
#llfxv .fx-rentier{position:absolute;top:calc(4px + env(safe-area-inset-top));left:-70px;color:rgba(255,255,255,.7);animation:fx-sprung 3s ease-in-out forwards}
@keyframes fx-sprung{0%{transform:translate(0,0)}25%{transform:translate(25vw,-34px)}50%{transform:translate(50vw,0)}75%{transform:translate(75vw,-34px)}100%{transform:translate(calc(100vw + 80px),0)}}
#llfxj .fx-glocke,#llfxv .fx-glocke{position:fixed;animation:fx-glocke 1.05s ease-out forwards;transform-origin:50% 10%}
@keyframes fx-glocke{0%{transform:rotate(0) scale(.6);opacity:0}15%{transform:rotate(-22deg) scale(1);opacity:1}35%{transform:rotate(18deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(6deg);opacity:1}100%{transform:translateY(-14px) rotate(0);opacity:0}}
#llfxj .fx-konfetti,#llfxv .fx-konfetti{position:absolute;top:-12px;width:7px;height:12px;border-radius:2px;animation:fx-konfetti 2s ease-in forwards}
@keyframes fx-konfetti{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx,0),105vh) rotate(720deg)}}
#llfx .fx-polar{animation:fx-polar 9s ease-in-out infinite alternate}
@keyframes fx-polar{0%{opacity:.55;transform:translateX(-10px)}100%{opacity:1;transform:translateX(10px)}}
#llfx .fx-dampf{animation:fx-dampf 3.6s ease-in-out infinite}
@keyframes fx-dampf{0%,100%{opacity:.12;transform:translateY(4px)}50%{opacity:.35;transform:translateY(-4px)}}
/* Weniger Bewegung: alles still */
@media (prefers-reduced-motion: reduce){#llfx *,#llfxv *,#llfxj *{animation:none!important}#llfxj .fx-konfetti,#llfxj .fx-glocke{display:none}#llfx .fx-kamin.an{opacity:.85}#llfxv .fx-schlitten,#llfxv .fx-rentier,#llfxv .fx-konfetti,#llfxj .fx-glocke,#llfxv .fx-glocke{display:none}}
#llfx.ruhig *,#llfxv.ruhig *{animation:none!important}

/* ---------- Galerie (Euer Auftritt) ---------- */
.auftritt .af-form,#afvl,#affx{min-width:0;max-width:100%}
.fx-mini{display:block;position:relative;aspect-ratio:9/12;border-radius:12px;overflow:hidden}
.fx-mini svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%}
.gal-kat{max-width:100%;display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}
.gal-kat .gk{flex:0 0 auto;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--li);background:var(--k);color:var(--t);font-weight:700;font-size:15px}
.gal-kat .gk.an{background:var(--a);color:var(--at,#111113);border-color:var(--a)}
.gal-kat .gk.bald{opacity:.45;font-weight:600}
.gal-kat .gk.bald small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid currentColor;border-radius:6px;padding:0 5px}
.gal-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.gal-karte{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--k);border:2px solid transparent;border-radius:16px;padding:8px;color:var(--t);cursor:pointer;min-height:44px;font:inherit}
.gal-karte.an{border-color:var(--a)}
.gal-karte b{font-size:15px;line-height:1.2}.gal-karte small{color:var(--t3);font-size:13px;line-height:1.3}
.gal-karte .gal-haken{position:absolute;top:8px;right:8px;background:var(--a);color:var(--at,#111113);border-radius:999px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.gal-karte .gal-bild{position:relative}
.gal-bald-hinweis{color:var(--t3);font-size:14px;margin:10px 0 0}
.fx-schalter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.fx-sch{display:flex;align-items:center;gap:10px;background:var(--k);border:1px solid var(--li);border-radius:14px;padding:8px 12px;min-height:52px}
.fx-sch .fx-i{font-size:22px;width:28px;text-align:center}
.fx-sch .fx-t{flex:1;min-width:0}.fx-sch .fx-t b{display:block;font-size:15px}.fx-sch .fx-t small{display:block;color:var(--t3);font-size:12.5px;line-height:1.3}
.fx-sch input[type=checkbox]{width:26px;height:26px;accent-color:var(--a);flex:0 0 auto}
.fx-stufen{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto}
.fx-sch.fx-breit{grid-column:1/-1;flex-wrap:wrap}
.fx-stufen button{min-height:36px;min-width:44px;padding:0 10px;border-radius:999px;border:1px solid var(--li);background:transparent;color:var(--t);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.fx-stufen button[aria-pressed=true]{background:var(--a);color:var(--at,#111113);border-color:var(--a)}
.fx-wuerfel{display:inline-flex;align-items:center;gap:8px}
@media (max-width:420px){.gal-raster{grid-template-columns:repeat(2,1fr)}.fx-schalter{grid-template-columns:1fr}}