/* advent2026/assets/css/kalender.css
   Das Aussehen der Kalenderseite im Stil der Ziehungsseite: Winterkulisse,
   Leuchtschild, goldene Tafeln, ein Weihnachtshaus mit 24 Fensterbildern,
   das Fenster-Modal im Goldrahmen. Liegt ueber advent.css. */

body.kalender-seite{background:#070A0F}
body.kalender-seite .sky{display:none}
.kulisse{
  position:fixed;inset:0;z-index:0;background-image:var(--kulisse);
  background-size:cover;background-position:center 30%;filter:saturate(1.1);
}
.kulisse::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 50% 40%,rgba(0,0,0,0) 0%,rgba(4,7,12,.5) 100%),
    linear-gradient(180deg,rgba(4,7,12,.4) 0%,rgba(4,7,12,0) 25%,rgba(4,7,12,.15) 70%,rgba(4,7,12,.85) 100%);
}
body.kalender-seite .page{max-width:1280px;padding:0 1rem 2rem}

/* ---------- Kopf ---------- */
.automat-kopf{width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:.9rem}
.bildknopf{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  border:none;background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;
  cursor:pointer;text-decoration:none;padding:0;box-sizing:border-box;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.6));transition:transform .15s ease,filter .3s ease;
}
.bildknopf:hover{transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(255,214,120,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.6))}
.bildknopf:active{transform:scale(.97)}
.bildknopf span{
  font-family:"Oswald",Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:#FFF6E0;text-shadow:0 0 8px rgba(255,214,120,.9),0 2px 0 #6A0A17;line-height:1.05;text-align:center;
}
.bildknopf.zurueck{width:clamp(180px,22vw,260px);aspect-ratio:1180/486}
.bildknopf.zurueck span{position:absolute;left:36%;right:13%;top:22%;bottom:22%;display:flex;align-items:center;justify-content:center;font-size:clamp(.62rem,1.2vw,.82rem)}
/* Roter Knopf: leere Flaeche, Text mittig */
.bildknopf.rot{width:clamp(220px,28vw,320px);aspect-ratio:1154/577;margin-top:.4rem}
.bildknopf.rot span{position:absolute;left:12%;right:12%;top:24%;bottom:24%;display:flex;align-items:center;justify-content:center;font-size:clamp(.72rem,1.4vw,.95rem)}

/* ---------- Schild und Titel ---------- */
body.kalender-seite header.hero{padding:.4rem 0 1.2rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.schild{position:relative;width:min(520px,92vw);margin:0 auto;text-align:center}
.schild img{width:100%;display:block;filter:drop-shadow(0 12px 30px rgba(0,0,0,.6))}
.schild-text{
  position:absolute;left:14%;right:14%;top:30%;bottom:32%;
  display:flex;align-items:center;justify-content:center;gap:.45em;white-space:nowrap;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;text-transform:uppercase;line-height:1;
}
.schild-a{font-size:clamp(1.2rem,4vw,2rem);letter-spacing:.05em;color:#FFF6E0;text-shadow:0 0 6px #FFD678,0 0 14px #FFB020,0 0 30px #FF8A00,0 3px 0 #7A3A00}
.schild-b{font-size:clamp(.85rem,2.9vw,1.45rem);letter-spacing:.1em;color:#E6FBFF;text-shadow:0 0 6px #8FE9F5,0 0 14px #4EDFF0,0 0 26px #1FB6C9}
.schild-datum{margin:.2rem 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);text-shadow:0 0 10px rgba(247,200,116,.6)}
body.kalender-seite h1.titel{
  font-size:clamp(2rem,5.6vw,3.6rem);line-height:1;margin:1.2rem 0 0;
  text-shadow:0 0 30px rgba(0,0,0,.9),0 0 46px rgba(247,200,116,.25);
}
body.kalender-seite .tag{color:#FFF6E0;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 18px rgba(0,0,0,.8);max-width:40rem;font-size:1rem}

/* ---------- Zaehler-Tafeln ---------- */
body.kalender-seite .status{gap:.6rem;margin-top:1.6rem}
body.kalender-seite .chip{
  --zb:clamp(170px,21vw,250px);
  width:var(--zb);aspect-ratio:1205/630;box-sizing:border-box;
  background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;border:none;border-radius:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:calc(var(--zb) * .08) calc(var(--zb) * .12);backdrop-filter:none;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
body.kalender-seite .chip .lbl{color:#BFD3EA;font-size:clamp(.5rem,.9vw,.62rem);text-align:center;white-space:nowrap}
body.kalender-seite .chip .val{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;color:#FFF6E0;text-shadow:0 0 10px #FFD678,0 0 22px rgba(255,176,32,.7)}
body.kalender-seite .chip.tickets .val,body.kalender-seite .chip.draw .val{color:#FFF6E0}

/* Hinweise und Vorstart als Samtkarten */
body.kalender-seite .hinweis,body.kalender-seite .vorstart{
  border:1px solid rgba(247,200,116,.5);border-left-width:1px;border-radius:8px;
  background:linear-gradient(180deg,rgba(60,6,12,.88),rgba(30,3,8,.92));
  box-shadow:0 0 0 1px rgba(255,214,120,.12),0 20px 50px rgba(0,0,0,.6);text-align:center;
}
body.kalender-seite .hinweis p,body.kalender-seite .vorstart-text{color:#FFF6E0}
body.kalender-seite .hinweis.gewonnen{border-color:#FFD678;box-shadow:0 0 30px rgba(255,214,120,.35)}
body.kalender-seite .adminleiste{color:#BFD3EA;text-shadow:0 1px 3px rgba(0,0,0,.9)}

/* ---------- Das Haus ---------- */
.haus{position:relative;width:min(1180px,100%);margin:1.6rem auto 0;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7))}
.haus-bild{width:100%;display:block}
/* Fensterfeld auf der Wand: drei Reihen oben, unten je drei links und rechts der Tuer */
body.kalender-seite .facade{
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:none;border:none;padding:0;display:block;
}
body.kalender-seite .facade::before{display:none}
body.kalender-seite .win{
  position:absolute;aspect-ratio:1/1;border:none;background-color:transparent;
  background-size:100% 100%;background-repeat:no-repeat;overflow:visible;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6));transition:transform .22s ease,filter .3s ease;
}
body.kalender-seite .win::before,body.kalender-seite .win::after{display:none}
body.kalender-seite .win:hover{transform:scale(1.06);filter:drop-shadow(0 0 16px rgba(255,214,120,.7)) drop-shadow(0 6px 12px rgba(0,0,0,.6))}
body.kalender-seite .win.locked{cursor:not-allowed;opacity:1;filter:brightness(.55) drop-shadow(0 6px 12px rgba(0,0,0,.6))}
body.kalender-seite .win.locked:hover{transform:none}
body.kalender-seite .win.draw{grid-column:auto}

/* Nummer und Art */
body.kalender-seite .win .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;font-size:clamp(1rem,2.6vw,2rem);
  color:#FFF6E0;text-shadow:0 0 8px rgba(0,0,0,.9),0 0 14px rgba(255,214,120,.6),0 2px 0 #3a1c05;transform:none;
}
body.kalender-seite .win.draw .num{color:#FFF6E0;text-shadow:0 0 10px rgba(0,0,0,.9),0 0 18px #FFD678}
body.kalender-seite .win.draw .num::after{display:none}
body.kalender-seite .win.open .num{
  inset:auto;left:50%;top:6%;transform:translateX(-50%);font-size:clamp(.7rem,1.5vw,1.05rem);
  color:#FFE6B4;text-shadow:0 0 8px rgba(0,0,0,.95);
}
body.kalender-seite .win .peek{
  left:12%;right:12%;bottom:5%;padding:.12rem .25rem;border-radius:4px;
  background:linear-gradient(180deg,#f7c874,#d9962a);color:#1a0d05;font-size:clamp(.38rem,.8vw,.5rem);
  opacity:0;box-shadow:0 2px 8px rgba(0,0,0,.6);
}
body.kalender-seite .win.open .peek{opacity:1}
body.kalender-seite .win.today{animation:fenster-puls 2.4s ease-in-out infinite}
@keyframes fenster-puls{50%{filter:drop-shadow(0 0 22px rgba(255,214,120,.95)) drop-shadow(0 6px 12px rgba(0,0,0,.6))}}
body.kalender-seite .win.draw:not(.locked){animation:fenster-stern 3s ease-in-out infinite}
@keyframes fenster-stern{50%{filter:drop-shadow(0 0 18px rgba(255,214,120,.8)) drop-shadow(0 6px 12px rgba(0,0,0,.6))}}

/* Positionen in Prozent der Hausbreite/-hoehe. Wand: 7 % bis 93 % breit,
   Reihen 1 bis 3 ueber dem Sims, Reihe 4 rechts und links der Tuer. */
.win{width:9%}
.win[data-tag="1"]{left:8.5%;top:16.5%}
.win[data-tag="2"]{left:22.8%;top:16.5%}
.win[data-tag="3"]{left:37.1%;top:16.5%}
.win[data-tag="4"]{left:51.4%;top:16.5%}
.win[data-tag="5"]{left:65.7%;top:16.5%}
.win[data-tag="6"]{left:80%;top:16.5%}
.win[data-tag="7"]{left:8.5%;top:31.5%}
.win[data-tag="8"]{left:22.8%;top:31.5%}
.win[data-tag="9"]{left:37.1%;top:31.5%}
.win[data-tag="10"]{left:51.4%;top:31.5%}
.win[data-tag="11"]{left:65.7%;top:31.5%}
.win[data-tag="12"]{left:80%;top:31.5%}
.win[data-tag="13"]{left:8.5%;top:46.5%}
.win[data-tag="14"]{left:22.8%;top:46.5%}
.win[data-tag="15"]{left:37.1%;top:46.5%}
.win[data-tag="16"]{left:51.4%;top:46.5%}
.win[data-tag="17"]{left:65.7%;top:46.5%}
.win[data-tag="18"]{left:80%;top:46.5%}
.win[data-tag="19"]{left:4.5%;top:69%}
.win[data-tag="20"]{left:15.5%;top:69%}
.win[data-tag="21"]{left:26.5%;top:69%}
.win[data-tag="22"]{left:64.5%;top:69%}
.win[data-tag="23"]{left:75.5%;top:69%}
.win[data-tag="24"]{left:86.5%;top:69%}

/* ---------- Gewinner und Hinweistext ---------- */
body.kalender-seite .gewinner{
  margin:2.8rem auto 0;max-width:900px;box-sizing:border-box;padding:.6rem 1rem 1.2rem;text-align:center;
  background:radial-gradient(120% 90% at 50% 20%,#6a0c18 0%,#3d0509 60%,#2a0306 100%);background-clip:padding-box;
  border-style:solid;border-width:58px 56px;border-image-slice:100;border-image-width:58px 56px;border-image-repeat:round;
  box-shadow:0 30px 60px rgba(0,0,0,.8);
}
body.kalender-seite .gewinner h2{
  font-family:"Oswald",Impact,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.6rem,3.4vw,2.4rem);margin:0 0 1rem;color:#FFF6E0;text-shadow:0 0 10px #FFD678,0 0 24px rgba(255,176,32,.7);
}
body.kalender-seite .gewinner-block{margin:0 0 1.4rem;border:none;background:none;padding:0}
body.kalender-seite .gewinner-block:last-child{margin-bottom:0}
body.kalender-seite .gewinner-datum{
  display:inline-flex;align-items:center;justify-content:center;width:clamp(240px,36vw,330px);aspect-ratio:3/2;box-sizing:border-box;
  background-size:100% 100%;background-repeat:no-repeat;margin:0 auto .5rem;padding:0 12%;
  font-family:"Oswald",Impact,sans-serif;font-weight:700;font-size:clamp(.85rem,1.5vw,1rem);letter-spacing:.06em;text-transform:uppercase;line-height:1.15;
  color:#FFF6E0;text-shadow:0 0 8px #FFD678,0 2px 0 #6A2A00;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55));
}
.gewinner-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.35rem}
.gewinner-liste li{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.8rem;text-align:left;
  padding:.4rem .8rem;border-radius:8px;background:rgba(0,0,0,.28);border:1px solid rgba(247,200,116,.22);
}
.gewinner-liste li.gw-song{border-color:rgba(255,214,120,.7);box-shadow:0 0 14px rgba(255,214,120,.25)}
.gw-symbole{display:flex;gap:.15rem}
.gw-symbole img{width:clamp(22px,3vw,34px);height:clamp(22px,3vw,34px);object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.gw-art{font-family:"Oswald",Impact,sans-serif;font-size:clamp(.85rem,1.6vw,1.05rem);letter-spacing:.05em;text-transform:uppercase;color:#FFF6E0;white-space:nowrap;min-width:7em;line-height:1.1}
.gw-art small{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.55rem;letter-spacing:.14em;color:#FFD678}
.gw-namen{color:#FFE6B4;font-size:.92rem;line-height:1.5}
.gw-song .gw-namen{font-family:"Oswald",Impact,sans-serif;font-size:1.15rem;color:#FFF6E0;text-shadow:0 0 10px rgba(255,214,120,.6)}
body.kalender-seite .note{color:#BFD3EA;text-shadow:0 1px 4px rgba(0,0,0,.9)}

/* Meine Gewinne: gleiche Tafel wie die Gewinnerliste, dazu Wahl und Download-Knopf */
.mg-hinweis{margin:-.4rem 0 1rem;color:#FFE6B4;font-size:.9rem}
.mg-stand{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
.mg-titel{font-family:"Oswald",Impact,sans-serif;color:#FFF6E0;font-size:1rem}
.mg-wahl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;width:100%}
.mg-select{flex:1 1 220px;min-width:0;padding:.5rem .6rem;border-radius:6px;border:1px solid rgba(247,200,116,.5);background:#1a0406;color:#FFF6E0;font:inherit;font-size:.9rem}
.mg-stand .knopf{padding:.5rem .9rem;font-size:.8rem}
.mg-frist{display:block;width:100%;color:#BFD3EA;font-size:.72rem;letter-spacing:.04em}
.mg-fehler{color:#FFB3B3;font-size:.85rem;width:100%}

/* ---------- Fuss wie am Automaten ---------- */
.fuss-deko{
  position:relative;z-index:2;width:100%;margin-top:3rem;box-sizing:border-box;
  background:var(--fussbild) center bottom / cover no-repeat #070A0F;padding:5.4rem 1rem 2.4rem;
}
/* Hochkant (Handy) zeigt von der Kulisse nur die Bildmitte, dafuer reicht der schmale Ausschnitt */
@media (max-aspect-ratio:8/9){.kulisse{background-image:var(--kulisse-hoch,var(--kulisse))}}
.fuss-deko::before{
  content:"";position:absolute;left:0;right:0;top:-1.6rem;height:6.4rem;
  background:var(--girlande) center top / auto 100% repeat-x;pointer-events:none;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.6));
}
.fuss-deko::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,10,15,.1),rgba(7,10,15,.55));pointer-events:none}
.fuss-deko .advent-fuss{position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;padding:0;background:transparent;border:none}
.fuss-deko .advent-fuss-innen{justify-content:center;text-align:center;gap:.7rem 1.6rem}
.fuss-deko .advent-fuss-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem}
.fuss-deko .advent-fuss-copy{width:100%;margin:.2rem 0 0;color:var(--frost);text-shadow:0 0 8px rgba(0,0,0,.8)}
.fuss-deko .advent-fuss a{color:#FFE6B4;text-shadow:0 0 8px rgba(0,0,0,.8)}
body.kalender-seite .player{z-index:30}

/* ---------- Fenster-Modal im Goldrahmen ---------- */
body.kalender-seite .veil{background:rgba(4,7,11,.72);backdrop-filter:blur(5px);padding:1rem;overflow:auto}
body.kalender-seite .sheet{
  width:min(720px,calc(100vw - 2rem));max-height:none;overflow:visible;border-radius:0;
  background:radial-gradient(120% 90% at 50% 20%,#6a0c18 0%,#3d0509 60%,#2a0306 100%);background-clip:padding-box;
  box-shadow:0 30px 60px rgba(0,0,0,.8);
  border-style:solid;border-width:58px 56px;
  border-image-slice:100;border-image-width:58px 56px;border-image-repeat:round;
}
body.kalender-seite .sheet .band{display:none}
body.kalender-seite .sheet .body{padding:.6rem 1rem 1rem;max-height:calc(100vh - 2rem - 116px);overflow:auto}
/* Schliessen-Kreuz: goldener Ring, roter Kern, springt beim Oeffnen auf, dreht sich beim Hover */
body.kalender-seite .sheet .x{
  position:absolute;right:-2.4rem;top:-2.4rem;z-index:5;width:3rem;height:3rem;border-radius:50%;padding:0;cursor:pointer;
  border:3px solid #E9C46A;
  background:radial-gradient(circle at 35% 30%,#ff5b6e,#c8102e 55%,#6a0a17);
  box-shadow:0 0 0 2px #7a4a12,0 0 18px rgba(255,214,120,.6),0 8px 18px rgba(0,0,0,.7),inset 0 -3px 6px rgba(0,0,0,.4);
  color:#FFF6E0;font-family:"Oswald",Impact,sans-serif;font-weight:700;font-size:1.9rem;line-height:1;
  display:flex;align-items:center;justify-content:center;text-shadow:0 1px 0 #6A0A17;
  transition:transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s ease;
  animation:zu-auf .5s cubic-bezier(.3,1.6,.5,1) both;
}
body.kalender-seite .sheet .x:hover{transform:scale(1.15) rotate(90deg);box-shadow:0 0 0 2px #7a4a12,0 0 30px rgba(255,214,120,.95),0 8px 18px rgba(0,0,0,.7)}
body.kalender-seite .sheet .x:active{transform:scale(.95) rotate(90deg)}
@keyframes zu-auf{0%{transform:scale(0) rotate(-180deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
body.kalender-seite .sheet .eyebrow{color:#FFD678}
body.kalender-seite .ziehung-hinweis{
  margin:0 0 1rem;padding:.7rem 1rem;border-radius:8px;border:1px solid rgba(255,214,120,.6);
  background:rgba(255,214,120,.1);color:#FFE6B4;font-family:"Oswald",Impact,sans-serif;letter-spacing:.04em;font-size:1rem;
}
body.kalender-seite .ziehung-hinweis[hidden]{display:none}
body.kalender-seite .sheet h2{color:#FFF6E0;text-shadow:0 0 10px rgba(255,214,120,.5)}
body.kalender-seite .sheet p{color:#FFF6E0}
body.kalender-seite .aufgabe{border-top:1px solid rgba(255,214,120,.3)}
body.kalender-seite .aufgabe-titel{color:#FFD678}
body.kalender-seite .aufgabe-frage{color:#FFF6E0}
body.kalender-seite .wahl button{
  border:1px solid rgba(255,214,120,.45);border-radius:8px;
  background:linear-gradient(180deg,rgba(120,10,24,.9),rgba(70,4,12,.95));color:#FFF6E0;
  font-family:"Oswald",Impact,sans-serif;font-size:1rem;letter-spacing:.04em;padding:.7rem 1rem;
  box-shadow:0 0 0 1px rgba(255,214,120,.1),0 6px 16px rgba(0,0,0,.5);text-align:left;
}
body.kalender-seite .wahl button:hover{border-color:#FFD678;background:linear-gradient(180deg,rgba(160,20,36,.95),rgba(90,6,16,.98));box-shadow:0 0 16px rgba(255,214,120,.4)}
body.kalender-seite .wahl button.richtig{border-color:#FFD678;background:linear-gradient(180deg,#f7c874,#d9962a);color:#1a0d05;box-shadow:0 0 22px rgba(255,214,120,.6)}
body.kalender-seite .wahl button.falsch{opacity:.55}
body.kalender-seite .wahl button[disabled]:not(.richtig){opacity:.45;filter:saturate(.4);cursor:default}
body.kalender-seite .wahl button[disabled]:hover{border-color:rgba(255,214,120,.45);box-shadow:0 0 0 1px rgba(255,214,120,.1),0 6px 16px rgba(0,0,0,.5)}
body.kalender-seite .rueckmeldung.gut{color:#FFD678}
body.kalender-seite .rueckmeldung.schlecht{color:#BFD3EA}
body.kalender-seite .aufloesung{color:#FFF6E0;border-color:rgba(255,214,120,.3)}
body.kalender-seite .aufloesung a{color:#FFD678}
body.kalender-seite .ticket .knopf,body.kalender-seite .knopf-automat{
  background:linear-gradient(180deg,#f7c874,#d9962a);color:#1a0d05;border:none;border-radius:6px;
  font-family:"Oswald",Impact,sans-serif;font-size:1rem;letter-spacing:.08em;padding:.7rem 1.2rem;
}

/* ---------- Handy ---------- */
@media (max-width:860px){
  .bildknopf.zurueck{width:170px}
  .win{width:10%}
  body.kalender-seite .win .num{font-size:1rem}
  body.kalender-seite .win.open .num{font-size:.6rem}
  body.kalender-seite .win .peek{display:none}
  body.kalender-seite .chip{--zb:min(44vw,200px)}
  body.kalender-seite .sheet{border-width:34px 32px;border-image-width:34px 32px}
  body.kalender-seite .gewinner{border-width:34px 32px;border-image-width:34px 32px;padding:.4rem .5rem .8rem}
  .gewinner-liste li{grid-template-columns:auto 1fr;gap:.5rem}
  .gw-namen{grid-column:1 / -1}
  body.kalender-seite .sheet .x{right:-1.6rem;top:-1.6rem;width:2.5rem;height:2.5rem;font-size:1.6rem}
  .fuss-deko{padding:4.6rem .8rem 2rem}
  .fuss-deko::before{height:5rem;top:-1.2rem}
  .fuss-deko .advent-fuss-innen{flex-direction:column;gap:.6rem}
}