:root{
  --bg:#0f172a;
  --card:#0b1220;
  --accent:#f97316;
  --text:#f8fafc;
  --muted:#94a3b8;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,var(--bg),#081026 60%);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

/* Container */
.container{
  width:100%;
  max-width:1100px;
  text-align:center;
}
h1{
  margin:0 0 8px 0;
  font-size:2.2rem;
}
.subtitle{ color:var(--muted); margin-bottom:18px }

/* Grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:18px;
  align-items:stretch;
}

/* Door wrapper */
.door-wrapper{
  perspective:1000px;
  height:140px;
}

/* Button (door) */
.door{
  display:block;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  background:transparent;
  cursor:pointer;
  perspective:inherit;
  position:relative;
  outline:none;
  -webkit-tap-highlight-color: transparent;
}

/* Front and back faces */
.door-front, .door-back{
  position:absolute;
  inset:0;
  border-radius:12px;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* front */
.door-front{
  background:linear-gradient(180deg,#ffe6cf 0%, #ffd9b3 100%);
  color:#111827;
  transform:rotateY(0deg) translateZ(1px);
  border: 2px solid rgba(0,0,0,0.08);
}
.door-number{
  font-weight:700;
  font-size:1.6rem;
  letter-spacing:0.5px;
}

/* back (content) */
.door-back{
  background: #0b1220;
  transform:rotateY(-180deg);
  align-items:center;
  justify-content:center;
}
.door-back img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* open state */
.door.open .door-front{
  transform: rotateY(180deg);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}
.door.open .door-back{
  transform: rotateY(0deg);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* Placeholder when no image */
.placeholder{
  color:var(--muted);
  padding:8px;
  font-size:0.9rem;
}

/* small screens tweak */
@media (max-width:480px){
  .door-wrapper{ height:110px }
  h1{ font-size:1.6rem }
}

/* ====== Gesperrte Türen ====== */
.door.locked .door-front {
  background: linear-gradient(180deg, #777, #555);
  color: #ddd;
  cursor: not-allowed;
  opacity: 0.7;
}
.door.locked .door-number::after {
  content: "🔒";
  font-size: 1rem;
  margin-left: 4px;
}

/* ====== Overlay (Lightbox) ====== */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}

.overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Overlay-Bild: vollständig anzeigen ===== */
.overlay-content {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease;
}

.overlay-content img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain; /* 👈 wichtig: nichts wird abgeschnitten */
  border-radius: 0;
  box-shadow: none;
  background-color: #000; /* schwarzer Rand für leere Fläche */
}


.close-btn {
  position: fixed;
  top: 20px;
  right: 30px;
  background: rgba(0,0,0,0.5);
  border: none;
  font-size: 2.5rem;
  color: #fff;
  cursor: pointer;
  font-weight: bold;
  line-height: 1;
  border-radius: 8px;
  padding: 4px 10px;
  transition: background 0.2s;
}
.close-btn:hover {
  background: rgba(255,255,255,0.2);
}


.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.door:not(.open) .door-front,
.door:not(.open) .door-back {
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
}

/* ====== Zufällige Formen & Variationen (behält Flip-Effekt) ====== */
.door-wrapper {
  perspective: 1000px;
  height: 140px;
  transition: transform 0.3s ease;
}

/* leichte Hover-Bewegung */
.door-wrapper:hover {
  transform: translateY(-4px);
}

/* Varianten von Formen (auf Wrapper anwenden, damit Flip bleibt) */
.shape-0 { transform: rotate(-1deg) scale(1.02); }
.shape-1 { transform: rotate(1.5deg) scale(0.97); }
.shape-2 { transform: rotate(-2deg) scale(1.05); }
.shape-3 { transform: rotate(0.5deg) scale(0.94); }
.shape-4 { transform: rotate(-1.2deg) scale(1.00); }
.shape-5 { transform: rotate(2deg) scale(0.98); }

/* leicht unterschiedliche Rundungen auf den Türen */
.shape-0 .door-front,
.shape-0 .door-back { border-radius: 8px; }

.shape-1 .door-front,
.shape-1 .door-back { border-radius: 20% 10% 25% 15% / 15% 25% 10% 20%; }

.shape-2 .door-front,
.shape-2 .door-back { border-radius: 50%; }

.shape-3 .door-front,
.shape-3 .door-back { border-radius: 4px; }

.shape-4 .door-front,
.shape-4 .door-back { border-radius: 16px 4px 12px 28px; }

.shape-5 .door-front,
.shape-5 .door-back { border-radius: 10% 30% 30% 10%; }

/* Standard-Anfangszustand: Rückseite verstecken */
.door .door-back {
  transform: rotateY(-180deg);
  backface-visibility: hidden;
}

/* Nur bei "open" sichtbar */
.door.open .door-front {
  transform: rotateY(180deg);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}
.door.open .door-back {
  transform: rotateY(0deg);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* ===== 🎁 Adventskalender: zufällige Positionen & hübschere Türen ===== */

/* Grundlayout leicht unregelmäßig */
.grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  perspective: 1200px;
}

/* Tür-Wrapper: Position leicht zufällig mit CSS-Variablen */
.door-wrapper {
  width: 110px;
  height: 140px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* Zufällige Versätze und Drehungen */
.door-wrapper:nth-child(3n) { transform: rotate(-2deg) translate(5px, -6px); }
.door-wrapper:nth-child(4n) { transform: rotate(1.5deg) translate(-4px, 3px); }
.door-wrapper:nth-child(5n) { transform: rotate(-1deg) translate(8px, 2px); }
.door-wrapper:nth-child(2n) { transform: rotate(2deg) translate(-6px, -4px); }
.door-wrapper:nth-child(7n) { transform: rotate(-3deg) translate(3px, 8px); }

/* Hover-Verhalten */
.door-wrapper:hover {
  transform: scale(1.03) translateY(-5px) rotate(0deg);
}

/* Tür selbst */
.door {
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent;
  position: relative;
  perspective: inherit;
  transform-style: preserve-3d;
}

/* Frontseiten-Designs */
.door-front {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  font-weight: 700;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 0 10px rgba(255,255,255,0.3);
  border: 2px solid rgba(0,0,0,0.1);
  transform: rotateY(0deg);
  transition: transform 0.7s cubic-bezier(.2,.9,.2,1);
  background: var(--door-bg, #ffd9b3);
}

/* Unterschiedliche Farben / Texturen pro Tür */
.door-wrapper:nth-child(6n+1) .door-front { --door-bg: linear-gradient(160deg,#ffe6cf,#ffd9b3); }
.door-wrapper:nth-child(6n+2) .door-front { --door-bg: linear-gradient(160deg,#fef9c3,#fde68a); }
.door-wrapper:nth-child(6n+3) .door-front { --door-bg: linear-gradient(160deg,#bbf7d0,#86efac); }
.door-wrapper:nth-child(6n+4) .door-front { --door-bg: linear-gradient(160deg,#bae6fd,#7dd3fc); }
.door-wrapper:nth-child(6n+5) .door-front { --door-bg: linear-gradient(160deg,#fecaca,#fca5a5); }
.door-wrapper:nth-child(6n+6) .door-front { --door-bg: linear-gradient(160deg,#e9d5ff,#c4b5fd); }

/* Türnummer-Stil */
.door-number {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  user-select: none;
}

/* Rückseite */
.door-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  backface-visibility: hidden;
  transform: rotateY(-180deg);
  transition: transform 0.7s cubic-bezier(.2,.9,.2,1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.door-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tür geöffnet */
.door.open .door-front {
  transform: rotateY(180deg);
}
.door.open .door-back {
  transform: rotateY(0deg);
}

/* Gesperrte Türen */
.door.locked .door-front {
  filter: grayscale(1) brightness(0.6);
  cursor: not-allowed;
  position: relative;
}
.door.locked .door-number::after {
  content: "🔒";
  position: absolute;
  font-size: 1.2rem;
  bottom: 6px;
  right: 8px;
}

/* Responsive Anpassung */
@media (max-width: 700px) {
  .door-wrapper { width: 90px; height: 110px; }
  .door-number { font-size: 1.2rem; }
}

/* ===== 🎄 Hintergrundbild ===== */
body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: url('../images/background.jpg') no-repeat center center fixed;
  background-size: cover;
  overflow-x: hidden;
  position: relative;
}

/* ===== ❄️ Schneeflocken ===== */
.snow-container {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 5;
}

.snowflake {
  position: absolute;
  top: -10px;
  color: white;
  font-size: var(--size, 1em);
  opacity: var(--opacity, 0.8);
  animation: fall var(--duration, 10s) linear infinite;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.9));
}

@keyframes fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) translateX(var(--drift, 50px)) rotate(360deg);
  }
}

/* ===== 🎶 Musiksteuerung ===== */
.music-control {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.4);
  padding: 8px 12px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.music-control button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.music-control button:hover {
  transform: scale(1.2);
}

.music-control input[type="range"] {
  width: 100px;
  accent-color: #fff;
  cursor: pointer;
}