/* advent2026/assets/css/advent.css
   Eigenstaendiges Aussehen. Nutzt nichts aus dem Hauptsystem. */

:root{
  --night-0:#070A0F;
  --night-1:#0C1119;
  --brick-1:#151C26;
  --brick-2:#1D2733;
  --brick-edge:#2A3543;
  --frost:#8CA4BE;
  --snow:#E9F0F8;
  --muted:#78899E;
  --amber:#F7C874;
  --amber-deep:#DE8C33;
  --amber-glow:rgba(247,200,116,.55);
  --cyan:#4EDFF0;
  --cyan-glow:rgba(78,223,240,.45);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--night-0);
  color:var(--snow);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.sky{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(1100px 620px at 50% -12%, #1B2740 0%, rgba(27,39,64,0) 62%),
    radial-gradient(760px 460px at 12% 8%, rgba(78,223,240,.09) 0%, rgba(78,223,240,0) 60%),
    radial-gradient(600px 420px at 88% 4%, rgba(247,200,116,.07) 0%, rgba(247,200,116,0) 60%),
    linear-gradient(180deg,#070A0F 0%,#0C1119 46%,#111925 100%);
}
#snow{position:fixed;inset:0;z-index:1;pointer-events:none}

.page{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 1.1rem 5rem}

/* ---------- Kopf ---------- */
header.hero{padding:4rem 0 2.2rem;text-align:center}
.kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 1.1rem;
}
h1{
  font-family:"Oswald",Impact,sans-serif;font-weight:700;
  font-size:clamp(2.9rem,9vw,6.2rem);line-height:.92;
  margin:0;text-transform:uppercase;color:var(--snow);
  text-shadow:0 0 46px rgba(247,200,116,.22);
}
h1 .lit{color:var(--amber);text-shadow:0 0 12px var(--amber-glow),0 0 44px rgba(222,140,51,.4)}
.tag{margin:1.15rem auto 0;max-width:34rem;color:var(--frost);font-size:1.03rem;line-height:1.6}

.status{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem;margin:2.4rem auto 0}
.chip{
  display:flex;align-items:center;gap:.55rem;
  background:rgba(21,28,38,.82);border:1px solid var(--brick-edge);
  border-radius:2px;padding:.6rem .95rem;backdrop-filter:blur(6px);
}
.chip .lbl{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.chip .val{
  font-family:"Oswald",Impact,sans-serif;font-weight:500;font-size:1.22rem;
  font-variant-numeric:tabular-nums;line-height:1;
}
.chip.tickets .val{color:var(--amber)}
.chip.draw .val{color:var(--cyan)}

.vorstart{
  margin:2.6rem auto 0;max-width:34rem;
  border:1px solid var(--brick-edge);background:rgba(21,28,38,.7);padding:1.6rem 1.4rem;
}
.vorstart-titel{
  font-family:"Oswald",Impact,sans-serif;font-size:2rem;color:var(--amber);
  margin:0 0 .5rem;text-transform:uppercase;
}
.vorstart-text{margin:0;color:var(--frost);font-size:.98rem;line-height:1.6}

.hinweis{
  margin:1.8rem auto 0;max-width:36rem;
  border:1px solid var(--brick-edge);border-left:3px solid var(--amber);
  background:rgba(21,28,38,.7);padding:1.1rem 1.2rem;text-align:left;
}
.hinweis p{margin:0 0 .8rem;color:var(--frost);font-size:.94rem;line-height:1.6}
.knopf{
  display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--night-0);background:var(--amber);text-decoration:none;
  padding:.6rem 1rem;border:1px solid var(--amber);
}
.knopf:hover{background:#FFE0A0}
.knopf:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Fassade ---------- */
.facade-wrap{margin-top:3.2rem;position:relative}
.roofline{
  height:26px;margin:0 -2px -1px;filter:blur(.4px);border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,rgba(233,240,248,.9) 0%,rgba(233,240,248,.45) 40%,rgba(233,240,248,0) 100%);
}
.facade{
  background:linear-gradient(180deg,var(--brick-2) 0%,var(--brick-1) 55%,#101720 100%);
  border:1px solid var(--brick-edge);border-top:none;
  padding:1.15rem;display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;position:relative;
}
.facade::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 52px);
}

/* ---------- Fenster ---------- */
.win{
  position:relative;aspect-ratio:3/4;border:1px solid #2E3A49;
  background:linear-gradient(165deg,#131A23 0%,#0D141C 100%);
  cursor:pointer;padding:0;overflow:hidden;font-family:inherit;color:inherit;
  transition:transform .22s ease,border-color .22s ease,box-shadow .35s ease;
}
.win:hover{transform:translateY(-3px);border-color:#3D4B5D}
.win:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.win::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(90deg,transparent calc(50% - 1px),rgba(0,0,0,.55) calc(50% - 1px),rgba(0,0,0,.55) calc(50% + 1px),transparent calc(50% + 1px)),
    linear-gradient(180deg,transparent calc(46% - 1px),rgba(0,0,0,.55) calc(46% - 1px),rgba(0,0,0,.55) calc(46% + 1px),transparent calc(46% + 1px));
}
.win::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  transition:opacity .5s ease;
  background:
    radial-gradient(60% 45% at 22% 12%,rgba(140,164,190,.20),transparent 70%),
    radial-gradient(50% 40% at 84% 88%,rgba(140,164,190,.14),transparent 70%);
}

.win .num{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  font-family:"Oswald",Impact,sans-serif;font-weight:500;
  font-size:clamp(1.5rem,3.3vw,2.4rem);color:#4A5A6E;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.6);
  transition:color .4s ease,text-shadow .4s ease,transform .4s ease;
}
.win .peek{
  position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.42rem .45rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.53rem;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:rgba(10,14,20,.78);
  background:linear-gradient(180deg,rgba(247,200,116,0),rgba(247,200,116,.85));
  opacity:0;transition:opacity .45s ease;
}

.win.today{border-color:rgba(78,223,240,.6);animation:pulse 2.6s ease-in-out infinite}
.win.today .num{color:var(--cyan);text-shadow:0 0 14px var(--cyan-glow)}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 rgba(78,223,240,0),inset 0 0 22px rgba(78,223,240,.06)}
  50%    {box-shadow:0 0 26px rgba(78,223,240,.28),inset 0 0 26px rgba(78,223,240,.14)}
}

.win.open{
  background:linear-gradient(178deg,#FFE6B4 0%,#F7C874 42%,#DE8C33 100%);
  border-color:#8A6021;
  box-shadow:0 0 26px var(--amber-glow),0 0 70px rgba(222,140,51,.24),inset 0 0 18px rgba(255,255,255,.28);
}
.win.open::after{opacity:0}
.win.open .num{color:rgba(10,14,20,.34);transform:translateY(-14%) scale(.72)}
.win.open .peek{opacity:1}

.win.draw{grid-column:span 2}
.win.draw .num::after{
  content:"";position:absolute;top:.5rem;right:.55rem;width:.42rem;height:.42rem;
  background:var(--cyan);border-radius:50%;box-shadow:0 0 10px var(--cyan);
}
.win.draw.open{
  background:linear-gradient(178deg,#D8F7FC 0%,#8FE9F5 44%,#2FA9BC 100%);
  border-color:#1E6A78;
  box-shadow:0 0 30px var(--cyan-glow),0 0 84px rgba(47,169,188,.26),inset 0 0 18px rgba(255,255,255,.3);
}
.win.draw.open .peek{background:linear-gradient(180deg,rgba(143,233,245,0),rgba(143,233,245,.9))}

.win.locked{cursor:not-allowed;opacity:.62}
.win.locked:hover{transform:none;border-color:#2E3A49}

.ground{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem;
  background:linear-gradient(180deg,#101720,#0A0F16);
  border:1px solid var(--brick-edge);border-top:none;padding:1.4rem 1.15rem 1.6rem;
}
.door-big{
  grid-column:2;width:clamp(74px,11vw,104px);height:clamp(104px,15vw,148px);
  background:linear-gradient(180deg,#25313F,#161E28);
  border:1px solid #3A4757;border-bottom:none;
  border-radius:44% 44% 0 0/22% 22% 0 0;position:relative;
}
.door-big::after{
  content:"";position:absolute;right:14%;top:52%;width:.34rem;height:.34rem;
  border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber-glow);
}
.sill{
  grid-column:1/-1;height:12px;margin:0 -1.15rem -1.6rem;
  background:linear-gradient(180deg,rgba(233,240,248,.82),rgba(233,240,248,.2));
}

.note{margin:3rem auto 0;max-width:44rem;text-align:center;color:var(--muted);font-size:.83rem;line-height:1.7}

/* ---------- Fenster-Inhalt ---------- */
.veil{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:rgba(4,7,11,.86);backdrop-filter:blur(7px);
}
.veil[hidden]{display:none}
.sheet{
  width:min(560px,100%);max-height:92vh;overflow-y:auto;position:relative;
  background:linear-gradient(180deg,#141C26,#0D131B);border:1px solid var(--brick-edge);
  box-shadow:0 0 0 1px rgba(247,200,116,.14),0 30px 90px rgba(0,0,0,.7);
  animation:rise .34s cubic-bezier(.2,.8,.3,1);
}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.sheet .band{height:3px;background:linear-gradient(90deg,var(--amber-deep),var(--amber),var(--cyan))}
.sheet .body{padding:2rem 1.9rem 1.9rem}
.sheet .eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 .7rem;
}
.sheet h2{
  font-family:"Oswald",Impact,sans-serif;font-weight:500;text-transform:uppercase;
  font-size:1.9rem;line-height:1.05;margin:0 0 .9rem;color:var(--snow);
}
.sheet p{color:var(--frost);line-height:1.65;margin:0 0 1.3rem;font-size:.97rem}
/* Aufzaehlungen aus den Rezepten kommen mit Zeilenumbruechen */
#sheetText{white-space:pre-line}
.sheet .x{
  position:absolute;top:.55rem;right:.7rem;z-index:2;background:none;border:none;
  color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:.3rem .5rem;
}
.sheet .x:hover{color:var(--snow)}
.sheet .x:focus-visible{outline:2px solid var(--cyan)}

.sheet audio,.sheet video,.sheet img{width:100%;margin-bottom:1.2rem;display:block}
.sheet iframe{width:100%;aspect-ratio:16/9;border:0;margin-bottom:1.2rem;display:block}

.aufgabe{border-top:1px solid var(--brick-edge);padding-top:1.2rem;margin-bottom:1.2rem}
.aufgabe-titel{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 .6rem;
}
.aufgabe-frage{color:var(--snow);font-size:1.02rem;margin:0 0 1rem}
.wahl{display:grid;gap:.5rem;margin-bottom:.9rem}
.wahl button{
  width:100%;text-align:left;font-family:inherit;font-size:.95rem;color:var(--snow);
  background:rgba(21,28,38,.9);border:1px solid var(--brick-edge);
  padding:.8rem .95rem;cursor:pointer;transition:border-color .2s ease,background .2s ease;
}
.wahl button:hover{border-color:var(--amber);background:rgba(30,40,52,.9)}
.wahl button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.wahl button.richtig{border-color:var(--amber);background:rgba(247,200,116,.12);color:var(--amber)}
.wahl button.falsch{border-color:#5A3038;background:rgba(90,48,56,.2);opacity:.7}
.wahl button[disabled]{cursor:default}

.rueckmeldung{min-height:1.4rem;margin:0;font-size:.92rem}
.rueckmeldung.gut{color:var(--amber)}
.rueckmeldung.schlecht{color:var(--frost)}

.aufloesung{
  margin:.9rem 0 0;padding:.85rem 1rem;
  border-left:2px solid var(--cyan);background:rgba(78,223,240,.07);
  color:var(--snow);font-size:.92rem;line-height:1.6;white-space:pre-line;
}
.aufloesung a{color:var(--amber);text-decoration:underline;text-decoration-color:rgba(247,200,116,.4);text-underline-offset:3px}
.aufloesung a:hover{color:#FFE0A0;text-decoration-color:var(--amber)}

.hinweis.gewonnen{border-left-color:var(--cyan);background:rgba(78,223,240,.08)}
.hinweis.gewonnen p{color:var(--snow);margin:0;font-size:1rem}

.gewinner{margin:3rem auto 0;max-width:46rem;text-align:center}
.gewinner h2{
  font-family:"Oswald",Impact,sans-serif;text-transform:uppercase;font-weight:500;
  font-size:1.5rem;margin:0 0 1.2rem;color:var(--amber);
}
.gewinner-block{
  display:inline-block;vertical-align:top;min-width:12rem;margin:.4rem;
  border:1px solid var(--brick-edge);background:rgba(21,28,38,.7);padding:1rem 1.2rem;
}
.gewinner-datum{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem;
}
.gewinner-art{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 .3rem}
.gewinner-rest{margin:.6rem 0 0;color:var(--muted);font-size:.78rem}
.gewinner-block ul{list-style:none;margin:0;padding:0}
.gewinner-block li{color:var(--snow);font-size:.95rem;padding:.2rem 0}

/* Adminleiste: schmal und unaufdringlich, sieht ohnehin nur der Admin */
.adminleiste{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.5rem .7rem;margin:1.4rem auto 0;max-width:46rem;
  padding:.5rem .8rem;
  border:1px solid rgba(78,223,240,.28);
  background:rgba(78,223,240,.05);
  color:var(--muted);font-size:.78rem;line-height:1.45;text-align:center;
}
.adminleiste .marke{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--night-0);background:var(--cyan);padding:.15rem .45rem;
}
.adminleiste a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px}
.adminleiste a:hover{color:#8FE9F5}

.ticket{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0;
}

@media (max-width:760px){ .facade{grid-template-columns:repeat(4,1fr)} }
@media (max-width:430px){
  .facade{grid-template-columns:repeat(3,1fr);gap:.45rem;padding:.8rem}
  .win.draw{grid-column:span 3}
  .sheet .body{padding:1.5rem 1.2rem 1.4rem}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* ==================================================================
   Der einarmige Bandit
   ================================================================== */
.bandit{margin-top:1.2rem}
.bandit-kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.64rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--amber);margin:0 0 .4rem;
}

/* Regeln vor dem ersten Zug */
.bandit-regeln{border:1px solid var(--brick-edge);background:rgba(247,200,116,.05);padding:1.1rem 1.2rem}
.bandit-regeln ul{margin:.4rem 0 .9rem;padding-left:1.1rem;color:var(--frost);font-size:.9rem;line-height:1.55}
.bandit-regeln li{margin-bottom:.35rem}
.bandit-link{display:block;color:var(--cyan);font-size:.85rem;margin-bottom:1rem}
.bandit-los{cursor:pointer;font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- Gehaeuse ---------- */
.bandit-gehaeuse{
  position:relative;padding:.9rem .9rem .9rem;
  background:
    linear-gradient(180deg,#2A1B0C 0%,#1B1109 50%,#120B05 100%);
  border-radius:16px;
  box-shadow:
    inset 0 0 0 3px #5A3A16,
    inset 0 0 0 5px #C8922E,
    inset 0 0 0 6px #FFE6B4,
    inset 0 0 0 8px #8A6021,
    0 30px 70px rgba(0,0,0,.65);
  margin-right:2.6rem;
}
/* Lauflicht rundherum */
.bandit-rahmen{position:absolute;inset:11px;border-radius:10px;pointer-events:none}
.bandit-rahmen i{
  position:absolute;width:7px;height:7px;border-radius:50%;
  background:#5B3E14;box-shadow:0 0 0 rgba(255,214,120,0);
  animation:lampe 1.2s linear infinite;
}
.bandit-rahmen i:nth-child(odd){animation-delay:.6s}
@keyframes lampe{
  0%,49%{background:#FFE6B4;box-shadow:0 0 8px #FFD678,0 0 16px rgba(255,214,120,.6)}
  50%,100%{background:#5B3E14;box-shadow:0 0 0 rgba(255,214,120,0)}
}
/* 40 Lampen: 12 oben, 12 unten, 8 links, 8 rechts */
.bandit-rahmen i:nth-child(-n+12){top:-4px;left:calc((100% - 8px) * (var(--p) / 11))}
.bandit-rahmen i:nth-child(n+13):nth-child(-n+24){bottom:-4px;left:calc((100% - 8px) * ((var(--p) - 12) / 11))}
.bandit-rahmen i:nth-child(n+25):nth-child(-n+32){left:-4px;top:calc(10% + (80% - 8px) * ((var(--p) - 24) / 7))}
.bandit-rahmen i:nth-child(n+33){right:-4px;top:calc(10% + (80% - 8px) * ((var(--p) - 32) / 7))}
.bandit-rahmen i:nth-child(1){--p:0}.bandit-rahmen i:nth-child(2){--p:1}.bandit-rahmen i:nth-child(3){--p:2}
.bandit-rahmen i:nth-child(4){--p:3}.bandit-rahmen i:nth-child(5){--p:4}.bandit-rahmen i:nth-child(6){--p:5}
.bandit-rahmen i:nth-child(7){--p:6}.bandit-rahmen i:nth-child(8){--p:7}.bandit-rahmen i:nth-child(9){--p:8}
.bandit-rahmen i:nth-child(10){--p:9}.bandit-rahmen i:nth-child(11){--p:10}.bandit-rahmen i:nth-child(12){--p:11}
.bandit-rahmen i:nth-child(13){--p:12}.bandit-rahmen i:nth-child(14){--p:13}.bandit-rahmen i:nth-child(15){--p:14}
.bandit-rahmen i:nth-child(16){--p:15}.bandit-rahmen i:nth-child(17){--p:16}.bandit-rahmen i:nth-child(18){--p:17}
.bandit-rahmen i:nth-child(19){--p:18}.bandit-rahmen i:nth-child(20){--p:19}.bandit-rahmen i:nth-child(21){--p:20}
.bandit-rahmen i:nth-child(22){--p:21}.bandit-rahmen i:nth-child(23){--p:22}.bandit-rahmen i:nth-child(24){--p:23}
.bandit-rahmen i:nth-child(25){--p:24}.bandit-rahmen i:nth-child(26){--p:25}.bandit-rahmen i:nth-child(27){--p:26}
.bandit-rahmen i:nth-child(28){--p:27}.bandit-rahmen i:nth-child(29){--p:28}.bandit-rahmen i:nth-child(30){--p:29}
.bandit-rahmen i:nth-child(31){--p:30}.bandit-rahmen i:nth-child(32){--p:31}.bandit-rahmen i:nth-child(33){--p:32}
.bandit-rahmen i:nth-child(34){--p:33}.bandit-rahmen i:nth-child(35){--p:34}.bandit-rahmen i:nth-child(36){--p:35}
.bandit-rahmen i:nth-child(37){--p:36}.bandit-rahmen i:nth-child(38){--p:37}.bandit-rahmen i:nth-child(39){--p:38}
.bandit-rahmen i:nth-child(40){--p:39}
.bandit.dreht .bandit-rahmen i{animation-duration:.35s}
.bandit.gewonnen .bandit-rahmen i{animation-duration:.18s}

.bandit-innen{position:relative;padding:.9rem .8rem .8rem;border-radius:10px;background:#0E0905}

/* Neon */
.bandit-kopfzeile{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
.bandit-neon{font-family:"Oswald",Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:1;display:flex;gap:.5rem;align-items:baseline}
.neon-a{
  font-size:1.6rem;letter-spacing:.06em;color:#FFF6E0;
  text-shadow:0 0 6px #FFD678,0 0 14px #FFB020,0 0 30px #FF8A00,0 0 50px rgba(255,138,0,.6);
  animation:neon-flackern 4s infinite;
}
.neon-b{
  font-size:1.05rem;letter-spacing:.22em;color:#E6FBFF;
  text-shadow:0 0 6px #8FE9F5,0 0 14px #4EDFF0,0 0 28px #1FB6C9;
}
@keyframes neon-flackern{
  0%,93%,100%{opacity:1}94%{opacity:.55}95%{opacity:1}97%{opacity:.7}98%{opacity:1}
}
.bandit.jackpot .neon-b{animation:neon-blink .25s steps(1) infinite}
@keyframes neon-blink{50%{opacity:.15}}

.bandit-ton{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;background:transparent;color:var(--amber);border:1px solid rgba(247,200,116,.5);
  padding:.3rem .5rem;cursor:pointer;border-radius:3px;
}
.bandit-ton.stumm{color:var(--muted);border-color:var(--brick-edge)}

/* Anzeige */
.bandit-anzeige{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:#FFB020;background:#1A0F03;border:1px solid #3A2508;border-radius:4px;padding:.4rem .6rem;
  text-shadow:0 0 6px rgba(255,176,32,.7);margin-bottom:.7rem;text-align:center;
}

/* Walzen: drei Felder sichtbar, Gewinnlinie in der Mitte */
.bandit-fenster{
  position:relative;border-radius:8px;padding:.45rem;
  background:linear-gradient(180deg,#C9CED6,#7C8592 8%,#3A424D 12%,#1A1F26 15%,#1A1F26 85%,#3A424D 88%,#7C8592 92%,#C9CED6);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.bandit-walzen{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  background:#05070A;border-radius:5px;padding:.4rem;
}
.bandit-walze{
  height:240px;overflow:hidden;border-radius:4px;position:relative;
  background:linear-gradient(180deg,#5C6675 0%,#F4F6F8 12%,#FFFFFF 50%,#F4F6F8 88%,#5C6675 100%);
  box-shadow:inset 0 0 18px rgba(0,0,0,.35);
}
.bandit-walze::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,rgba(0,0,0,.55) 100%);
}
.bandit-walze.gestoppt{animation:walze-ruck .35s ease-out}
@keyframes walze-ruck{0%{transform:translateY(0)}40%{transform:translateY(4px)}100%{transform:translateY(0)}}
.bandit-band{will-change:transform}
.bandit-band.dreht{animation:walze-dreht .16s linear infinite;filter:blur(1.2px)}
@keyframes walze-dreht{from{transform:translateY(-25%)}to{transform:translateY(-50%)}}

.bandit-symbol{
  display:flex;align-items:center;justify-content:center;height:80px;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;line-height:1;
}
.bandit-symbol b{font-weight:700}
.s-maxr b{font-size:1.15rem;letter-spacing:.1em;color:#FFF;background:linear-gradient(135deg,#FF8A00,#FFB020);padding:.35rem .5rem;border-radius:4px;box-shadow:0 2px 0 #8A4A00;transform:rotate(-4deg)}
.s-sieben b{font-size:3rem;color:#E0182D;text-shadow:2px 2px 0 #7A0A17}
.s-bar b{font-size:1.3rem;letter-spacing:.12em;color:#F4F6F8;background:#1B2740;padding:.3rem .55rem;border:2px solid #F4F6F8;border-radius:3px}
.s-stern b{font-size:2.6rem;color:#FFB020;text-shadow:0 0 10px rgba(255,176,32,.8)}
.s-note b{font-size:2.6rem;color:#1FB6C9}
.s-flocke b{font-size:2.4rem;color:#4E7EF0}

/* Gewinnlinie */
.bandit-linie{
  position:absolute;left:.45rem;right:.45rem;top:50%;height:80px;margin-top:-40px;
  border-top:2px solid rgba(255,176,32,.55);border-bottom:2px solid rgba(255,176,32,.55);
  pointer-events:none;box-shadow:0 0 12px rgba(255,176,32,.25);
}
.bandit-linie::before,.bandit-linie::after{
  content:"";position:absolute;top:50%;width:0;height:0;margin-top:-7px;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}
.bandit-linie::before{left:-.2rem;border-left:9px solid #FFB020}
.bandit-linie::after{right:-.2rem;border-right:9px solid #FFB020}
.bandit.gewonnen .bandit-linie{border-color:#FFE6B4;box-shadow:0 0 22px rgba(255,214,120,.8);animation:linie-puls .5s ease-in-out infinite}
@keyframes linie-puls{50%{box-shadow:0 0 34px rgba(255,214,120,1)}}

/* Treffer: das ganze Geraet wackelt */
.bandit.gewonnen .bandit-gehaeuse{animation:wackeln .5s ease-in-out 2}
.bandit.jackpot .bandit-gehaeuse{animation:wackeln .35s ease-in-out 6}
@keyframes wackeln{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-3px,1px) rotate(-.6deg)}
  40%{transform:translate(3px,-1px) rotate(.6deg)}
  60%{transform:translate(-2px,2px) rotate(-.4deg)}
  80%{transform:translate(2px,-2px) rotate(.4deg)}
}

/* Hebel rechts am Gehaeuse */
.bandit-hebel{
  position:absolute;right:-.2rem;top:22%;width:2.6rem;height:9.5rem;
  background:transparent;border:none;cursor:pointer;padding:0;
}
.bandit-hebel .schaft{
  position:absolute;left:0;top:44%;width:1.2rem;height:1.6rem;
  background:linear-gradient(90deg,#3A2508,#8A6021,#3A2508);border-radius:3px;
}
.bandit-hebel .stange{
  position:absolute;left:1rem;bottom:50%;width:.55rem;height:4.4rem;margin-left:-.05rem;
  background:linear-gradient(90deg,#8CA4BE,#F4F6F8,#8CA4BE);border-radius:3px;
  transform-origin:50% 100%;transition:transform .2s cubic-bezier(.3,1.4,.5,1);
}
.bandit-hebel .knauf{
  position:absolute;left:.55rem;bottom:calc(50% + 4rem);width:1.7rem;height:1.7rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FF9AA8,#E0182D 60%,#7A0A17);
  box-shadow:0 0 14px rgba(224,24,45,.6),inset -2px -3px 4px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.3,1.4,.5,1);
}
.bandit-hebel:hover .knauf{transform:scale(1.08)}
.bandit-hebel.gezogen .stange{transform:rotate(180deg)}
.bandit-hebel.gezogen .knauf{transform:translateY(8.6rem)}
.bandit-hebel:disabled{opacity:.4;cursor:not-allowed}
.bandit-hebel:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}

/* Ergebnis */
.bandit-ergebnis{margin-top:.8rem;min-height:1rem;opacity:0;transition:opacity .4s ease}
.bandit-ergebnis.da{opacity:1}
.bandit-ergebnis.niete .bandit-titel{color:var(--frost)}
.bandit-ergebnis.treffer{
  border:1px solid rgba(255,176,32,.6);background:linear-gradient(180deg,rgba(255,176,32,.12),rgba(255,176,32,.04));
  padding:.9rem 1rem;border-radius:6px;
}
.bandit-ergebnis.schlecht{color:#E4736B}
.bandit-titel{font-family:"Oswald",Impact,sans-serif;text-transform:uppercase;font-weight:500;font-size:1.15rem;margin:0 0 .3rem;color:var(--snow)}
.bandit-titel.gross{font-size:1.7rem;color:#FFB020;text-shadow:0 0 18px rgba(255,176,32,.6)}
.bandit-text{margin:0 0 .8rem;color:var(--frost);font-size:.9rem;line-height:1.55}
.bandit-los{margin:.5rem 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.bandit-offen{
  margin:.7rem 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;
}
.bandit-konfetti{position:fixed;inset:0;z-index:60;pointer-events:none}

/* ---------- Lockmodus: Lichtmuster ---------- */
.bandit.muster-b .bandit-rahmen i{animation:lampe-funkeln 1.6s ease-in-out infinite}
.bandit.muster-b .bandit-rahmen i:nth-child(3n){animation-delay:.4s}
.bandit.muster-b .bandit-rahmen i:nth-child(3n+1){animation-delay:.9s}
@keyframes lampe-funkeln{
  0%,80%,100%{background:#5B3E14;box-shadow:none}
  40%{background:#FFF6E0;box-shadow:0 0 10px #FFD678,0 0 18px rgba(255,214,120,.8)}
}
.bandit.muster-c .bandit-rahmen i{animation:lampe-welle 2.4s linear infinite}
.bandit.muster-c .bandit-rahmen i:nth-child(-n+12){animation-delay:calc(var(--p) * .12s)}
.bandit.muster-c .bandit-rahmen i:nth-child(n+13):nth-child(-n+24){animation-delay:calc((23 - var(--p)) * .12s)}
.bandit.muster-c .bandit-rahmen i:nth-child(n+25):nth-child(-n+32){animation-delay:calc((31 - var(--p)) * .12s + 1.4s)}
.bandit.muster-c .bandit-rahmen i:nth-child(n+33){animation-delay:calc((var(--p) - 32) * .12s + 1.4s)}
@keyframes lampe-welle{
  0%,25%,100%{background:#5B3E14;box-shadow:none}
  8%{background:#8FE9F5;box-shadow:0 0 10px #4EDFF0,0 0 18px rgba(78,223,240,.8)}
}
.bandit-walze.zuckt{animation:walze-zuckt .42s ease-in-out}
@keyframes walze-zuckt{0%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}60%{transform:translateY(3px)}}

/* Laufschrift in der Anzeige */
.bandit-anzeige{display:flex;justify-content:space-between;gap:1rem;overflow:hidden;white-space:nowrap}
.bandit-anzeige .fest{flex:none}
.bandit-anzeige .lauf{flex:1;overflow:hidden;position:relative;min-width:0;color:#FFD678;opacity:.85}
.bandit-anzeige .lauf.laeuft{animation:laufschrift 7s linear}
@keyframes laufschrift{from{transform:translateX(100%)}to{transform:translateX(-110%)}}

/* Glanz auf dem Chrom */
.bandit-fenster::after{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 50%,rgba(255,255,255,0) 100%);
  animation:glanz 5.5s ease-in-out infinite;
}
@keyframes glanz{0%,70%{left:-40%}100%{left:110%}}

/* ---------- Spannung vor der dritten Walze ---------- */
.bandit.spannung .bandit-rahmen i{animation:lampe-rot .45s ease-in-out infinite}
.bandit.spannung .bandit-rahmen i:nth-child(odd){animation-delay:.22s}
@keyframes lampe-rot{
  0%,100%{background:#5B1414;box-shadow:none}
  50%{background:#FF4D6D;box-shadow:0 0 10px #FF4D6D,0 0 20px rgba(255,77,109,.8)}
}
.bandit.spannung .bandit-linie{border-color:#FF4D6D;box-shadow:0 0 18px rgba(255,77,109,.6);animation:linie-puls .45s ease-in-out infinite}
.bandit.spannung .bandit-anzeige{color:#FF7A8C;text-shadow:0 0 8px rgba(255,77,109,.8)}
.bandit-band.langsam{animation-duration:.42s !important;filter:blur(.4px)}

/* ---------- Feiern ---------- */
.bandit-blitz{position:absolute;inset:0;background:#FFFFFF;opacity:0;pointer-events:none;border-radius:16px;z-index:5}
.bandit-blitz.an{animation:blitz .5s ease-out}
@keyframes blitz{0%{opacity:.95}100%{opacity:0}}
.bandit{position:relative}

.bandit-strahlen{
  position:absolute;inset:-40%;z-index:-1;opacity:0;pointer-events:none;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,214,120,0) 0deg,rgba(255,214,120,.35) 12deg,rgba(255,214,120,0) 24deg,
    rgba(78,223,240,0) 60deg,rgba(78,223,240,.3) 72deg,rgba(78,223,240,0) 84deg,
    rgba(255,214,120,0) 120deg,rgba(255,214,120,.35) 132deg,rgba(255,214,120,0) 144deg,
    rgba(78,223,240,0) 180deg,rgba(78,223,240,.3) 192deg,rgba(78,223,240,0) 204deg,
    rgba(255,214,120,0) 240deg,rgba(255,214,120,.35) 252deg,rgba(255,214,120,0) 264deg,
    rgba(78,223,240,0) 300deg,rgba(78,223,240,.3) 312deg,rgba(78,223,240,0) 324deg,rgba(255,214,120,0) 360deg);
  filter:blur(6px);
}
.bandit.treffer-buch .bandit-strahlen,.bandit.treffer-kalender .bandit-strahlen{opacity:.7;animation:strahlen 6s linear infinite}
.bandit.jackpot .bandit-strahlen{opacity:1;animation:strahlen 3s linear infinite}
@keyframes strahlen{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.bandit-gehaeuse{z-index:1}

/* Symbole auf der Gewinnlinie pulsieren */
.bandit.gewonnen .bandit-walze{animation:walze-glut 1s ease-in-out infinite}
@keyframes walze-glut{50%{box-shadow:inset 0 0 40px rgba(255,214,120,.9),0 0 22px rgba(255,214,120,.7)}}

/* Grosse Schrift beim Jackpot */
.bandit-gross{
  position:absolute;left:50%;top:38%;transform:translate(-50%,-50%) scale(.2);z-index:6;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(3rem,16vw,6.5rem);letter-spacing:.06em;color:#FFF6E0;
  text-shadow:0 0 10px #FFD678,0 0 30px #FFB020,0 0 60px #FF8A00,0 4px 0 #8A4A00;
  opacity:0;pointer-events:none;white-space:nowrap;
}
.bandit-gross.an{animation:gross 3.2s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes gross{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(3deg)}
  20%{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}
  28%{transform:translate(-50%,-50%) scale(1.06) rotate(1deg)}
  36%,80%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-70%) scale(1.3)}
}

.bandit-video{display:block;width:100%;border-radius:6px;margin-bottom:.8rem;background:#000}
.bandit-wahl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem}
.bandit-select{
  flex:1;min-width:12rem;background:#0F151D;color:var(--snow);border:1px solid var(--brick-edge);
  padding:.6rem .7rem;font-family:inherit;font-size:.9rem;border-radius:3px;
}
.bandit-select:focus{outline:2px solid var(--cyan);outline-offset:1px}
.bandit-wahl .knopf{cursor:pointer;font-family:"IBM Plex Mono",ui-monospace,monospace}
.bandit-wahl .knopf:disabled{opacity:.4;cursor:not-allowed}

@media (prefers-reduced-motion:reduce){
  .bandit-fenster::after,.bandit-walze.zuckt,.bandit-strahlen,.bandit.gewonnen .bandit-walze,.bandit-gross.an,.bandit-blitz.an,.bandit-anzeige .lauf.laeuft{animation:none}
}

@media (max-width:480px){
  .bandit-walze{height:210px}
  .bandit-symbol{height:70px}
  .bandit-linie{height:70px;margin-top:-35px}
  .s-sieben b{font-size:2.4rem}.s-stern b,.s-note b{font-size:2.1rem}.s-flocke b{font-size:2rem}
  .bandit-gehaeuse{margin-right:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .bandit-band.dreht,.bandit-rahmen i,.neon-a,.bandit.gewonnen .bandit-gehaeuse,.bandit.jackpot .bandit-gehaeuse,.bandit.gewonnen .bandit-linie{animation:none}
}

/* ==================================================================
   Kopfzeile und Fuss, auf jeder Kalenderseite
   ================================================================== */
.zur-hauptseite{
  display:inline-block;margin-top:1.4rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-decoration:none;
  border:1px solid var(--brick-edge);padding:.45rem .7rem;
}
.zur-hauptseite:hover{color:var(--amber);border-color:var(--amber)}

.advent-fuss{margin-top:4rem;border-top:1px solid var(--brick-edge);padding:1.6rem 0 0}
.advent-fuss-innen{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
}
.advent-fuss a{color:var(--muted);text-decoration:none}
.advent-fuss a:hover{color:var(--amber)}
.advent-fuss-links{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.advent-fuss-copy{margin:0;color:var(--muted);letter-spacing:.06em;text-transform:none}
@media (max-width:600px){.advent-fuss-innen{flex-direction:column;align-items:flex-start}}

/* ==================================================================
   Fester Player am unteren Rand
   ================================================================== */
body.mit-player{padding-bottom:4.6rem}
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:.9rem;padding:.7rem 1.1rem;
  background:rgba(12,17,25,.96);border-top:1px solid var(--brick-edge);
  backdrop-filter:blur(8px);box-shadow:0 -10px 30px rgba(0,0,0,.45);
}
.player-knopf{
  flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:none;cursor:pointer;
  background:var(--amber);position:relative;
}
.player-knopf:hover{background:#FFE0A0}
.player-knopf .ico-play,.player-knopf .ico-pause{position:absolute;inset:0;margin:auto}
.player-knopf .ico-play{width:0;height:0;border-left:.75rem solid var(--night-0);border-top:.48rem solid transparent;border-bottom:.48rem solid transparent;margin-left:1.05rem}
.player-knopf .ico-pause{width:.7rem;height:.8rem;border-left:.22rem solid var(--night-0);border-right:.22rem solid var(--night-0);display:none}
.player.spielt .ico-play{display:none}
.player.spielt .ico-pause{display:block}
.player-mitte{flex:1;min-width:0}
.player-titel{
  margin:0 0 .35rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--frost);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.player-balken{height:4px;background:var(--brick-edge);border-radius:2px;cursor:pointer;position:relative}
.player-fortschritt{height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--cyan));border-radius:2px;transition:width .25s linear}
.player-zeit{flex:none;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.player-zu{
  flex:none;background:transparent;border:1px solid var(--brick-edge);color:var(--muted);
  width:2rem;height:2rem;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;
}
.player-zu:hover{color:var(--snow);border-color:var(--frost)}
.player-knopf:focus-visible,.player-zu:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Abspielknopf im Fenster */
.abspielen{
  display:inline-flex;align-items:center;gap:.7rem;margin:.2rem 0 1rem;
  background:transparent;border:1px solid rgba(247,200,116,.5);color:var(--amber);
  padding:.6rem .9rem .6rem .7rem;cursor:pointer;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.abspielen:hover{background:rgba(247,200,116,.1)}
.abspielen-ico{width:0;height:0;border-left:.6rem solid var(--amber);border-top:.4rem solid transparent;border-bottom:.4rem solid transparent}
.abspielen.aktiv{border-color:var(--cyan);color:var(--cyan)}
.abspielen.aktiv .abspielen-ico{border-left-color:var(--cyan);animation:puls-ico 1s ease-in-out infinite}
@keyframes puls-ico{50%{opacity:.35}}
@media (max-width:480px){.player-zeit{display:none}}

/* Am Ziehungstag: grosser Knopf zur Ziehungsseite */
.knopf-automat{
  display:block;width:100%;text-align:center;font-size:1.15rem;padding:1rem 1.2rem;
  background:linear-gradient(180deg,#f7c874,#d9962a);color:#1a0d05;
  box-shadow:0 0 0 2px rgba(247,200,116,.35),0 0 28px rgba(247,200,116,.45);
  animation:knopfPuls 2.4s ease-in-out infinite
}
@keyframes knopfPuls{0%,100%{box-shadow:0 0 0 2px rgba(247,200,116,.35),0 0 18px rgba(247,200,116,.3)}50%{box-shadow:0 0 0 2px rgba(247,200,116,.6),0 0 40px rgba(247,200,116,.7)}}

/* Sprachwahl im Fuss */
.advent-fuss-sprachen{display:flex;gap:.2rem}
.advent-fuss-sprachen a{padding:.15rem .45rem;border:1px solid transparent;border-radius:4px;letter-spacing:.12em}
.advent-fuss-sprachen a.aktiv{border-color:rgba(247,200,116,.5);color:var(--amber)}