:root {
  --bg: #12202b;
  --tuer: #b8322f;
  --tuer-dunkel: #8d2321;
  --gold: #f2c14e;
  --text: #fdf6e3;
  --zu: #3a4a56;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--text);
  background: radial-gradient(circle at 50% 0%, #22394a, var(--bg) 70%) fixed;
  min-height: 100vh;
  padding: 0 16px 48px;
}
header { text-align: center; padding: 32px 0 20px; }
h1 { margin: 0; font-size: clamp(1.8rem, 5vw, 3rem); color: var(--gold); letter-spacing: .02em; }
.countdown { font-size: clamp(1.2rem, 3.5vw, 1.8rem); margin: 10px 0 4px; }
#tage { font-weight: bold; color: var(--gold); font-size: 1.4em; }
.sub { opacity: .75; margin: 0 0 14px; font-size: .95rem; }
.fortschritt { max-width: 480px; height: 10px; margin: 0 auto; background: #0008; border-radius: 5px; overflow: hidden; }
#balken { height: 100%; width: 0; background: linear-gradient(90deg, var(--tuer), var(--gold)); transition: width 1s; }

#kalender {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  grid-auto-flow: dense;
  gap: 10px;
}
.tuer {
  aspect-ratio: 1;
  border: 2px dashed #fff5;
  border-radius: 8px;
  background: var(--tuer);
  color: var(--text);
  font: bold 1.4rem Georgia, serif;
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 4px var(--tuer-dunkel);
  transition: transform .15s;
  padding: 0;
  overflow: hidden;
}
.tuer small { display: block; font: normal .62rem system-ui, sans-serif; opacity: .8; margin-top: 2px; }
.tuer:hover { transform: scale(1.05); }
.tuer.gesperrt { background: var(--zu); box-shadow: inset 0 0 0 4px #2b3943; cursor: not-allowed; opacity: .8; }
.tuer.heute { background: var(--gold); color: #3a1a00; box-shadow: 0 0 18px var(--gold), inset 0 0 0 4px #c99a2e; animation: puls 1.6s infinite; }
.tuer.finale { grid-column: span 2; grid-row: span 2; font-size: 2rem; }
.tuer.offen { background-size: cover; background-position: center top; border-style: solid; box-shadow: none; color: transparent; }
.tuer.offen.ohne-bild { background: #0004; color: var(--text); }
@keyframes puls { 50% { transform: scale(1.06); } }

dialog {
  border: none; border-radius: 12px; padding: 0;
  background: #0d171f; color: var(--text);
  max-width: min(92vw, 720px); max-height: 92vh;
}
dialog::backdrop { background: #000c; }
#modal-inhalt { padding: 16px; text-align: center; }
#modal-inhalt img { max-width: 100%; max-height: 74vh; border-radius: 8px; display: block; margin: 0 auto; }
#modal-inhalt h2 { margin: 4px 0 12px; color: var(--gold); font-size: 1.3rem; padding-right: 32px; }
#modal-inhalt p { margin: 12px 0 0; }
.zu { position: absolute; right: 8px; top: 4px; background: none; border: 0; color: var(--text); font-size: 2rem; cursor: pointer; }
.platzhalter { padding: 48px 16px; border: 2px dashed #fff3; border-radius: 8px; opacity: .8; }

/* Tür-Aufklapp-Animation */
.tuer.klappt { animation: aufklappen .5s ease-in forwards; transform-origin: left center; }
@keyframes aufklappen { to { transform: perspective(400px) rotateY(-100deg); opacity: .2; } }