/* Saison-Deko für Eingang & Catering.
   Alles hängt an der Klasse "deko-oktoberfest" auf <html>. Ist sie weg,
   sehen die Seiten exakt aus wie vorher. Gesteuert über assets/deko.js. */

:root{
  --bay-blau:#1c8ad6;
  --bay-navy:#0b2547;
  --bay-navy2:#06162c;
  --rauten:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Crect width='40' height='24' fill='%23fff'/%3E%3Cpath d='M20 0L40 12L20 24L0 12Z' fill='%231c8ad6'/%3E%3C/svg%3E");
  --rauten-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='48'%3E%3Cpath d='M40 0L80 24L40 48L0 24Z' fill='%23fff'/%3E%3C/svg%3E");
}

/* Elemente sind immer im DOM, aber nur mit Deko sichtbar */
.deko-el{display:none !important;}
html.deko-oktoberfest .deko-el{display:block !important;}
html.deko-oktoberfest .deko-el.flex{display:flex !important;}

/* ---------- Hintergrund: Nachtblau mit ganz zarten Rauten ---------- */
html.deko-oktoberfest, html.deko-oktoberfest body{
  background:linear-gradient(160deg,var(--bay-navy) 0%,#08203f 55%,var(--bay-navy2) 100%) !important;
}
html.deko-oktoberfest body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:var(--rauten-hell);background-size:80px 48px;opacity:.035;
}
html.deko-oktoberfest #app{z-index:1;}

/* ---------- Wimpelkette oben ---------- */
#deko-wimpel{position:fixed;left:0;right:0;top:0;height:13vh;z-index:18;pointer-events:none;}
#deko-wimpel svg{width:100%;height:100%;display:block;overflow:visible;}
#deko-wimpel .w{transform-box:fill-box;transform-origin:50% 0;animation:deko-wehen 4.5s ease-in-out infinite;}
@keyframes deko-wehen{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

/* ---------- Rautenband über dem Sponsoren-Laufband ---------- */
#deko-band{position:fixed;left:0;right:0;bottom:112px;height:12px;z-index:11;
  background-image:var(--rauten);background-size:20px 12px;box-shadow:0 -2px 6px rgba(0,0,0,.35);}
html.deko-oktoberfest #ticker{border-top-color:var(--bay-blau);}

/* ---------- Eingang ---------- */
html.deko-oktoberfest .lv-head{padding-top:10.5vh;}
#deko-kopf{margin-left:auto;align-items:center;gap:1.2vw;}
#deko-kopf .ozapft{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;
  font-size:3.4vw;color:#fff;text-shadow:0 3px 0 var(--bay-blau),0 6px 16px rgba(0,0,0,.5);
  transform:rotate(-4deg);margin-right:.8vw;white-space:nowrap;}
#deko-kopf img{height:12vh;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}
#deko-kopf img.mass{animation:deko-prost 6s ease-in-out infinite;transform-origin:50% 90%;}
@keyframes deko-prost{0%,80%,100%{transform:rotate(0)}86%{transform:rotate(-10deg)}92%{transform:rotate(6deg)}}

/* Karten in Bayern-Blau statt Grau – Gelb (SGB) bleibt für Akzente */
html.deko-oktoberfest .hg,
html.deko-oktoberfest .sr,
html.deko-oktoberfest .sv{background:rgba(255,255,255,.07);border-color:rgba(120,180,235,.28);}
html.deko-oktoberfest .hg.islive{border-color:#e2231a;}
html.deko-oktoberfest .wbox{background:linear-gradient(135deg,rgba(28,138,214,.28),rgba(6,22,44,.6));}
html.deko-oktoberfest .runstrip{background:rgba(255,255,255,.07);border-color:rgba(120,180,235,.28);border-left-color:#e2231a;}

/* ---------- Catering ---------- */
html.deko-oktoberfest .film-img{max-height:72vh;top:calc(50% + 4vh);}
html.deko-oktoberfest body.mit-ticker .film-img{max-height:64vh;}
html.deko-oktoberfest .wappen2{top:11vh;}
html.deko-oktoberfest .scorepill{top:11vh;}
html.deko-oktoberfest #verlauf{padding-top:11vh;background:linear-gradient(180deg,#0d2a4f,#061529);border-left-color:var(--bay-blau);}
html.deko-oktoberfest #title{background:radial-gradient(ellipse at 50% 45%,#12386a 0%,var(--bay-navy) 55%,var(--bay-navy2) 100%);}
html.deko-oktoberfest #title .vs{margin-top:6vh;}
/* Brezn & Maß links/rechts auf der Titelfolie */
.deko-titel-l,.deko-titel-r{position:absolute;bottom:6vh;height:18vh;width:auto;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.5));}
.deko-titel-l{left:3vw;transform:rotate(-8deg);}
.deko-titel-r{right:3vw;transform:rotate(8deg);}
body.mit-ticker .deko-titel-l,body.mit-ticker .deko-titel-r{height:15vh;}

/* Eigene Oktoberfest-Folie im Catering-Film */
#deko-folie{position:absolute;inset:0;z-index:5;opacity:0;transition:opacity 1.5s ease-in-out;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh 6vw 4vh;
  background:radial-gradient(ellipse at 50% 50%,#12386a 0%,var(--bay-navy) 55%,var(--bay-navy2) 100%);}
#deko-folie.on{opacity:1;}
#deko-folie .reihe{display:flex;align-items:center;justify-content:center;gap:3vw;}
#deko-folie .reihe img{height:34vh;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));}
#deko-folie .reihe img.l{transform:rotate(-10deg);}
#deko-folie .reihe img.r{transform:rotate(10deg);}
#deko-folie .badge3{display:inline-block;background:#fff;color:var(--bay-navy);font-weight:900;font-size:1.5vw;
  letter-spacing:.14em;text-transform:uppercase;padding:.5vh 2vw;border-radius:99px;margin-bottom:2vh;
  box-shadow:inset 0 -5px 0 var(--bay-blau);}
#deko-folie h2{margin:0;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;
  font-size:8vw;line-height:1;color:#fff;text-shadow:0 5px 0 var(--bay-blau),0 10px 30px rgba(0,0,0,.55);}
#deko-folie p{margin:3vh 0 0;font-size:2.1vw;font-weight:800;color:#e9f2fb;max-width:70vw;}
#deko-folie p b{color:var(--gelb);}
body.mit-ticker #deko-folie h2{font-size:6vw;}
body.mit-ticker #deko-folie .reihe img{height:24vh;}
body.mit-ticker #deko-folie p{font-size:1.7vw;}

/* =====================================================================
   HALLOWEEN – alles hängt an der Klasse "deko-halloween" auf <html>.
   Läuft auf Eingang, Catering UND den Preislisten (dort nur Rand-Deko).
   ===================================================================== */
.dekoh{display:none !important;}
html.deko-halloween .dekoh{display:block !important;}
html.deko-halloween .dekoh.flex{display:flex !important;}

/* Hintergrund nachtschwarz-violett (nicht auf den gelben Preislisten) */
html.deko-halloween body:not(.seite-preise){
  background:radial-gradient(ellipse at 50% 0%,#2a1236 0%,#140a1c 55%,#08050b 100%) !important;
}
html.deko-halloween #app{z-index:1;}

/* Orange Glut am Bildrand */
#hw-glut{position:fixed;inset:0 0 112px 0;pointer-events:none;z-index:17;
  box-shadow:inset 0 0 160px 30px rgba(255,100,0,.38);}
body.seite-preise #hw-glut{inset:0;box-shadow:inset 0 0 90px 16px rgba(255,100,0,.5);}

/* Spinnennetze oben in den Ecken + Spinne */
.hw-netz{position:fixed;top:0;width:11vw;z-index:18;pointer-events:none;}
.hw-netz svg{width:100%;display:block;}
.hw-netz.l{left:0;} .hw-netz.r{right:0;transform:scaleX(-1);}
.hw-spinne{position:fixed;top:0;left:9vw;width:2px;z-index:18;pointer-events:none;
  background:rgba(235,235,235,.55);animation:hw-seil 8s ease-in-out infinite;}
.hw-spinne svg{position:absolute;bottom:-3.2vh;left:-1.6vh;width:3.4vh;}
/* Catering mit Live-Ticker rechts: dort kein Netz über dem Spielstand */
body.mit-ticker .hw-netz.r{display:none !important;}
@keyframes hw-seil{0%,100%{height:8vh}50%{height:20vh}}

/* Fledermäuse fliegen quer durchs Bild */
.hw-bat{position:fixed;left:0;top:0;width:4.6vw;z-index:19;pointer-events:none;opacity:.92;
  animation:hw-flug linear infinite;}
.hw-bat svg{width:100%;display:block;animation:hw-flatter .26s ease-in-out infinite alternate;transform-origin:50% 40%;}
body.seite-preise .hw-bat{width:3.4vw;opacity:.8;}
@keyframes hw-flatter{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
@keyframes hw-flug{
  0%{transform:translate(-8vw,var(--y))}
  25%{transform:translate(25vw,calc(var(--y) - 5vh))}
  50%{transform:translate(55vw,calc(var(--y) + 4vh))}
  75%{transform:translate(85vw,calc(var(--y) - 4vh))}
  100%{transform:translate(110vw,var(--y))}}

/* Leuchtende Kürbisse unten links/rechts (über dem Sponsoren-Band) */
.hw-pk{position:fixed;bottom:calc(112px + 5.5vh);width:6vw;z-index:18;pointer-events:none;
  animation:hw-leuchten 2.6s ease-in-out infinite;}
.hw-pk.l{left:.8vw;} .hw-pk.r{right:.8vw;animation-delay:1.2s;}
body.seite-preise .hw-pk{bottom:-1vh;width:5.5vw;}
@keyframes hw-leuchten{0%,100%{filter:drop-shadow(0 0 10px rgba(255,140,0,.55))}50%{filter:drop-shadow(0 0 26px rgba(255,160,0,1))}}

/* Orange-schwarzes Warnband über dem Sponsoren-Laufband */
#hw-band{position:fixed;left:0;right:0;bottom:112px;height:10px;z-index:11;
  background:repeating-linear-gradient(-45deg,#FF7A00 0 14px,#111 14px 28px);box-shadow:0 -2px 8px rgba(255,110,0,.5);}
html.deko-halloween #ticker{border-top-color:#FF7A00;}

/* ---------- Eingang ---------- */
#hw-kopf{margin-left:auto;align-items:center;gap:1.2vw;margin-right:9vw;}
#hw-kopf .hw-schrift{font-family:"Arial Black",Impact,system-ui,sans-serif;font-weight:900;font-size:3.2vw;
  color:#FF8A1E;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-3deg);white-space:nowrap;
  text-shadow:0 0 18px rgba(255,120,0,.75),0 4px 0 #3b1500;}
#hw-kopf img{height:11vh;width:auto;animation:hw-leuchten 2.6s ease-in-out infinite;}
html.deko-halloween .lv-head .h small{color:#FF8A1E;}
html.deko-halloween .hg,
html.deko-halloween .sr,
html.deko-halloween .sv{background:rgba(255,255,255,.06);border-color:rgba(255,138,30,.35);}
html.deko-halloween .hg.islive{border-color:#e2231a;}
html.deko-halloween .wbox{background:linear-gradient(135deg,rgba(255,110,0,.25),rgba(20,10,28,.7));}
html.deko-halloween .runstrip{background:rgba(255,255,255,.06);border-color:rgba(255,138,30,.35);border-left-color:#e2231a;}

/* ---------- Catering ---------- */
html.deko-halloween #title{background:radial-gradient(ellipse at 50% 45%,#3a1a48 0%,#170b20 55%,#08050b 100%);}
html.deko-halloween #verlauf{background:linear-gradient(180deg,#24102e,#0c0711);border-left-color:#FF7A00;}
.hw-titel-l,.hw-titel-r{position:absolute;bottom:6vh;height:17vh;width:auto;
  animation:hw-leuchten 2.6s ease-in-out infinite;}
.hw-titel-l{left:3vw;transform:rotate(-8deg);}
.hw-titel-r{right:3vw;transform:rotate(8deg);animation-delay:1.2s;}
body.mit-ticker .hw-titel-l,body.mit-ticker .hw-titel-r{height:14vh;}

#hw-folie{position:absolute;inset:0;z-index:5;opacity:0;transition:opacity 1.5s ease-in-out;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10vh 6vw 4vh;
  background:radial-gradient(ellipse at 50% 50%,#3a1a48 0%,#170b20 55%,#08050b 100%);}
#hw-folie.on{opacity:1;}
#hw-folie .reihe{display:flex;align-items:center;justify-content:center;gap:3vw;}
#hw-folie .reihe img{height:30vh;width:auto;animation:hw-leuchten 2.6s ease-in-out infinite;}
#hw-folie .reihe img.l{transform:rotate(-10deg);}
#hw-folie .reihe img.r{transform:rotate(10deg);animation-delay:1.2s;}
#hw-folie .badge3{display:inline-block;background:#FF7A00;color:#111;font-weight:900;font-size:1.5vw;
  letter-spacing:.14em;text-transform:uppercase;padding:.5vh 2vw;border-radius:99px;margin-bottom:2vh;}
#hw-folie h2{margin:0;font-family:"Arial Black",Impact,system-ui,sans-serif;font-weight:900;font-size:7vw;line-height:1;
  color:#FF8A1E;text-transform:uppercase;text-shadow:0 0 30px rgba(255,120,0,.8),0 6px 0 #3b1500;}
#hw-folie p{margin:3vh 0 0;font-size:2.1vw;font-weight:800;color:#f3e9f7;max-width:70vw;}
body.mit-ticker #hw-folie h2{font-size:5.4vw;}
body.mit-ticker #hw-folie .reihe img{height:22vh;}
body.mit-ticker #hw-folie p{font-size:1.7vw;}

/* =====================================================================
   WEIHNACHTEN / NIKOLAUS  &  FASCHING / FASTNACHT
   Gemeinsamer Aufbau (Klassen fx-…), Farben je Motiv.
   Elemente "dkf-<motiv>" sind nur mit <html class="deko-<motiv>"> sichtbar.
   ===================================================================== */
.dkf{display:none !important;}
html.deko-weihnachten .dkf-weihnachten,
html.deko-fasching .dkf-fasching{display:block !important;}
html.deko-weihnachten .dkf-weihnachten.flex,
html.deko-fasching .dkf-fasching.flex{display:flex !important;}

/* Hintergründe (nicht auf Preislisten/Event-Listen – die haben eigene Flächen) */
html.deko-weihnachten body:not(.seite-preise){
  background:radial-gradient(ellipse at 50% 0%,#14402a 0%,#0b2418 55%,#050f0a 100%) !important;}
html.deko-fasching body:not(.seite-preise){
  background:radial-gradient(ellipse at 50% 0%,#4a1360 0%,#2a0b3a 55%,#12051a 100%) !important;}
html.deko-weihnachten #app, html.deko-fasching #app{z-index:1;}

/* Glut am Rand */
.fx-glut{position:fixed;inset:0 0 112px 0;pointer-events:none;z-index:17;}
body.seite-preise .fx-glut{inset:0;}
.dkf-weihnachten.fx-glut{box-shadow:inset 0 0 150px 26px rgba(255,200,80,.30);}
.dkf-fasching.fx-glut{box-shadow:inset 0 0 150px 26px rgba(255,60,170,.32);}
body.seite-preise .dkf-weihnachten.fx-glut{box-shadow:inset 0 0 90px 16px rgba(214,40,40,.45);}
body.seite-preise .dkf-fasching.fx-glut{box-shadow:inset 0 0 90px 16px rgba(171,71,188,.5);}

/* Lichterkette / bunte Girlande oben */
.fx-oben{position:fixed;left:0;right:0;top:0;z-index:18;pointer-events:none;}
.fx-oben svg{width:100%;height:100%;display:block;overflow:visible;}
.fx-lichter{height:10vh;}
.fx-lichter .b{animation:fx-blink 3s ease-in-out infinite;filter:drop-shadow(0 0 6px currentColor);}
@keyframes fx-blink{0%,100%{opacity:1}50%{opacity:.35}}
.fx-girlande{height:12vh;}
.fx-girlande .w{transform-box:fill-box;transform-origin:50% 0;animation:deko-wehen 4s ease-in-out infinite;}
html.deko-weihnachten .lv-head, html.deko-fasching .lv-head{padding-top:9vh;}
html.deko-weihnachten .wappen2, html.deko-weihnachten .scorepill,
html.deko-fasching .wappen2, html.deko-fasching .scorepill{top:10vh;}

/* Fallender Schnee / Konfetti */
.fx-teil{position:fixed;top:-4vh;z-index:19;pointer-events:none;animation:fx-fall linear infinite;}
.fx-schnee{border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);}
body.seite-preise .fx-schnee{box-shadow:0 0 3px rgba(0,0,0,.35);}
.fx-konfetti{width:.55vw;height:1.1vh;border-radius:1px;animation-name:fx-fall-dreh;}
@keyframes fx-fall{0%{transform:translate(0,0)}25%{transform:translate(1.5vw,27vh)}50%{transform:translate(-1vw,54vh)}
  75%{transform:translate(1.2vw,81vh)}100%{transform:translate(0,110vh)}}
@keyframes fx-fall-dreh{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(2vw,54vh) rotate(calc(var(--dreh) / 2))}
  100%{transform:translate(-1vw,110vh) rotate(var(--dreh))}}

/* Motive unten links/rechts */
.fx-ecke{position:fixed;bottom:calc(112px + 4vh);width:5.2vw;height:auto;z-index:0;pointer-events:none;   /* hinter den Inhalten */
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));}
.fx-ecke.l{left:.4vw;} .fx-ecke.r{right:.4vw;}
body.seite-preise .fx-ecke{bottom:.5vh;width:5.5vw;z-index:18;}

/* Band über dem Sponsoren-Laufband */
.fx-band{position:fixed;left:0;right:0;bottom:112px;height:10px;z-index:11;box-shadow:0 -2px 8px rgba(0,0,0,.4);}
.dkf-weihnachten.fx-band{background:repeating-linear-gradient(-45deg,#d62828 0 14px,#fff 14px 28px);}
.dkf-fasching.fx-band{background:linear-gradient(90deg,#e53935,#fb8c00,#FFD34D,#43a047,#1e88e5,#ab47bc,#ff4fa3,#e53935);}
html.deko-weihnachten #ticker{border-top-color:#d62828;}
html.deko-fasching #ticker{border-top-color:#ab47bc;}

/* Eingang: Spruch + Symbol in der Kopfzeile */
.fx-kopf{margin-left:auto;align-items:center;gap:1.2vw;}
.fx-kopf img{height:10vh;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));}
.fx-schrift{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:900;font-size:3.3vw;
  white-space:nowrap;transform:rotate(-3deg);}
.dkf-weihnachten .fx-schrift{color:#fff;text-shadow:0 3px 0 #d62828,0 6px 18px rgba(0,0,0,.55);}
.dkf-fasching .fx-schrift{font-family:"Arial Black",Impact,system-ui,sans-serif;font-style:normal;color:#FFD34D;
  text-shadow:0 3px 0 #ab47bc,0 6px 18px rgba(0,0,0,.5);}
html.deko-weihnachten .lv-head .h small{color:#FFD34D;}
html.deko-weihnachten .hg, html.deko-weihnachten .sr, html.deko-weihnachten .sv,
html.deko-fasching .hg, html.deko-fasching .sr, html.deko-fasching .sv{background:rgba(255,255,255,.07);}
html.deko-weihnachten .hg, html.deko-weihnachten .sr, html.deko-weihnachten .sv{border-color:rgba(255,211,77,.3);}
html.deko-fasching .hg, html.deko-fasching .sr, html.deko-fasching .sv{border-color:rgba(255,79,163,.35);}
html.deko-weihnachten .hg.islive, html.deko-fasching .hg.islive{border-color:#e2231a;}
html.deko-weihnachten .wbox{background:linear-gradient(135deg,rgba(214,40,40,.3),rgba(5,15,10,.6));}
html.deko-fasching .wbox{background:linear-gradient(135deg,rgba(171,71,188,.35),rgba(18,5,26,.6));}
html.deko-weihnachten .runstrip, html.deko-fasching .runstrip{background:rgba(255,255,255,.07);border-left-color:#e2231a;}

/* Catering */
html.deko-weihnachten #title{background:radial-gradient(ellipse at 50% 45%,#1d5636 0%,#0b2418 55%,#050f0a 100%);}
html.deko-fasching #title{background:radial-gradient(ellipse at 50% 45%,#6a1f86 0%,#2a0b3a 55%,#12051a 100%);}
html.deko-weihnachten #verlauf{padding-top:10vh;background:linear-gradient(180deg,#123a26,#06140d);border-left-color:#d62828;}
html.deko-fasching #verlauf{padding-top:10vh;background:linear-gradient(180deg,#3d1050,#14061c);border-left-color:#ab47bc;}
html.deko-weihnachten .film-img, html.deko-fasching .film-img{max-height:72vh;top:calc(50% + 4vh);}

.fx-folie{position:absolute;inset:0;z-index:5;opacity:0;transition:opacity 1.5s ease-in-out;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12vh 6vw 4vh;}
.fx-folie.on{opacity:1;}
.dkf-weihnachten.fx-folie{background:radial-gradient(ellipse at 50% 50%,#1d5636 0%,#0b2418 55%,#050f0a 100%);}
.dkf-fasching.fx-folie{background:radial-gradient(ellipse at 50% 50%,#6a1f86 0%,#2a0b3a 55%,#12051a 100%);}
.fx-folie .reihe{display:flex;align-items:center;justify-content:center;gap:3vw;}
.fx-folie .reihe img{height:28vh;width:auto;filter:drop-shadow(0 12px 22px rgba(0,0,0,.5));}
.fx-folie .reihe img.l{transform:rotate(-8deg);} .fx-folie .reihe img.r{transform:rotate(8deg);}
.fx-folie .badge3{display:inline-block;font-weight:900;font-size:1.5vw;letter-spacing:.14em;text-transform:uppercase;
  padding:.5vh 2vw;border-radius:99px;margin-bottom:2vh;}
.dkf-weihnachten .badge3{background:#d62828;color:#fff;}
.dkf-fasching .badge3{background:#FFD34D;color:#4a1360;}
.fx-folie h2{margin:0;font-size:7vw;line-height:1;font-weight:900;}
.dkf-weihnachten.fx-folie h2{font-family:Georgia,"Times New Roman",serif;font-style:italic;color:#fff;
  text-shadow:0 5px 0 #d62828,0 10px 30px rgba(0,0,0,.55);}
.dkf-fasching.fx-folie h2{font-family:"Arial Black",Impact,system-ui,sans-serif;color:#FFD34D;
  text-shadow:0 5px 0 #ab47bc,0 10px 30px rgba(0,0,0,.5);}
.fx-folie p{margin:3vh 0 0;font-size:2.1vw;font-weight:800;color:#f4f4f4;max-width:70vw;}
body.mit-ticker .fx-folie h2{font-size:5.4vw;}
body.mit-ticker .fx-folie .reihe img{height:20vh;}
body.mit-ticker .fx-folie p{font-size:1.7vw;}