:root {
  --bg:#0f172a;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --accent:#e11d48;
  --accent-2:#fb7185;
  --ring:#f59e0b;
  --ok:#16a34a;
}
* {
  box-sizing:border-box
}
html,
body {
  height:100%
}
body {
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial;
  color:var(--text);
  min-height:100vh;
  background: radial-gradient(1200px 800px at 20% 10%, #1f2937 0%, var(--bg) 60%), url('https://images.unsplash.com/photo-1482517967863-00e15c9b44be?q=80&w=2069&auto=format&fit=crop') center/cover no-repeat fixed;
} /* Head & basics */
.site-head {
  text-align:center;
  padding:2rem 1rem 1rem;
  backdrop-filter:blur(2px);
}
h1 {
  margin:0 0 .25rem;
  font-size:clamp(1.6rem,2.5vw,2.4rem)
}
.subtitle {
  color:var(--muted);
  margin-bottom:.75rem 
}
.legend {
  color:var(--muted);
}
a.btn[aria-disabled="true"] {
  pointer-events:none;
  opacity:.6;
  filter:grayscale(20%);
}
.controls {
  text-align:center;
  margin:1rem 0 2rem 
}
.reset {
  text-decoration:none;
  border:1px solid #ffffff33;
  padding:.6rem .9rem;
  border-radius:.75rem;
  color:var(--text) 
}
.reset:hover {
  background:#ffffff10 
} /* Grid */
.grid {
  width:min(1100px,92vw);
  margin:0 auto 3rem;
  display:grid;
  gap:.85rem;
  grid-template-columns:repeat(6,1fr) 
}
@media (max-width:900px) {
  .grid {
    grid-template-columns:repeat(4,1fr) 
  }
}
@media (max-width:640px) {
  .grid {
    grid-template-columns:repeat(3,1fr) 
  }
} /* ========================= 3D-DOOR TILES ========================= */
.door {
  position:relative;
  aspect-ratio:1/1;
  border:1px solid #ffffff1a;
  border-radius:1rem;
  background:linear-gradient(145deg,#0b1224,#121a32); /* Fallback-Hintergrund */
  box-shadow:0 10px 30px #00000055, inset 0 0 0 2px #ffffff0d;
  cursor:pointer;
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, filter .2s ease, opacity .2s ease;
  display:block; /* keine centrierende Grid-Zahl mehr hier – die Zahl steckt in den Flügeln */
}
.door:hover {
  transform:translateY(-2px);
  box-shadow:0 16px 35px #00000066, inset 0 0 0 2px #ffffff1a 
}
.door:active {
  transform:translateY(0) 
}
.door[aria-disabled="true"] {
  cursor:not-allowed;
  filter:grayscale(.75) brightness(.85);
  opacity:.75 
} /* Bühne & Hintergrundbild (liegt HINTER den Flügeln) */
.door .door-scene {
  position:absolute;
  inset:0;
  perspective: 1000px;
  border-radius: .8rem;
}
.door .door-bg {
  position:absolute;
  inset:0;
  background:#0b1224; /* Fallback, falls kein Bild */
  background-size: cover;
  background-position: center;
  border-radius:.8rem;
  overflow:hidden; /* Bild standardmäßig unsichtbar */
  opacity: 0;
  transition: opacity .35s ease;
} /* Bild nur bei aktiven Türen auf Hover sichtbar … */
.door.can-open:hover .door-bg {
  opacity: 1;
} /* … sowie während/ab dem Öffnen */
.door.opening .door-bg,
.door.opened .door-bg {
  opacity: 1;
} /* Sicherheit: gesperrt bleibt unsichtbar */
.door[aria-disabled="true"] .door-bg {
  opacity: 0 !important;
} 

/* Abgelaufene Türen (nach Schließen-Datum): Vorschau anzeigen, leicht ausgegraut */
.door.closed .door-bg {
  opacity: .9 !important;
  filter: grayscale(100%) brightness(.8);
}

/* Abgelaufene Türen dauerhaft „offen“ darstellen */
.door.closed .leaf-left {
  transform: rotateY(-100deg);
}
.door.closed .leaf-right {
  transform: rotateY(100deg);
}


/* Tür-Flügel */
.door .leaf {
  position:absolute;
  inset:0;
  border-radius:.8rem;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.25));
  box-shadow: inset 0 6px 16px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.25);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform .9s cubic-bezier(.2,.7,.1,1);
}
.door .leaf-left {
  transform-origin: left center;
  border-right:1px solid rgba(255,255,255,.06);
}
.door .leaf-right {
  transform-origin: right center;
  border-left: 1px solid rgba(255,255,255,.06);
} /* Zahl (liegt auf beiden Flügeln, mittig) */
.door .num {
  position:absolute;
  inset:auto auto 50% 50%;
  transform: translate(-50%, 50%);
  font-weight:800;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing:.02em;
  pointer-events:none;
  text-shadow:0 2px 0 #00000055;
} /* Öffnen nur für aktive Türen */
.door.can-open:hover .leaf-left,
.door.can-open.opening .leaf-left {
  transform: rotateY(-100deg);
}
.door.can-open:hover .leaf-right,
.door.can-open.opening .leaf-right {
  transform: rotateY(100deg);
} /* Dauerhaft offen lassen (bis Reload) */
.door.opened .leaf-left {
  transform: rotateY(-100deg);
}
.door.opened .leaf-right {
  transform: rotateY(100deg);
} /* (Optional) alte Ribbon/Badge/Opened-Optik deaktivieren */
.ribbon {
  display:none 
}
.badge {
  display:none 
} /* .opened { } <-- keine farbliche Umgestaltung mehr nötig */ /* Zahl knallweiß (auch auf aktiven Türen) */
.door .num {
  color:#fff;
  text-shadow:none; /* optional: weglassen, falls du es magst */
  opacity:1;
} /* falls du gesperrte Türen etwas dezenter willst (optional) */
.door[aria-disabled="true"] .num {
  color:#e5e7eb; /* leicht abgemildert */
  text-shadow:none;
} /* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .door .leaf {
    transition:none 
  }
  .door.can-open:hover .leaf-left,
  .door.can-open:hover .leaf-right {
    transform:none 
  }
} /* ========================= Lightbox / Modal ========================= */
.overlay {
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:#000000aa;
  z-index:50 
}
.overlay[aria-hidden="false"] {
  display:grid 
}
.modal {
  width:92vW;
  max-width:650px;
  background:linear-gradient(180deg,#0b1224,#0e142b);
  border:1px solid #ffffff22;
  border-radius:1.2rem;
  overflow:hidden;
  box-shadow:0 40px 70px #000000aa;
  animation:pop .2s ease;
  max-height: 92vh;              /* <-- Neu: begrenzt die Höhe */
  display: grid;                 /* Kopf fix, Body scrollt */
  grid-template-rows: auto 1fr;  /* .head | .body */
}
@keyframes pop {
  from {
    transform:scale(.98);
    opacity:.8 
  }
  to {
    transform:scale(1);
    opacity:1 
  }
}
.head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid #ffffff1a 
}
.title {
  font-weight:700;
  font-size:1.05rem 
}
.close {
  background:transparent;
  color:#fff;
  border:1px solid #ffffff33;
  border-radius:.6rem;
  padding:.4rem .6rem;
  cursor:pointer 
}
.body {
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  padding:1.25rem;
  overflow: auto;                /* <-- Neu: Inhalt kann scrollen */
  -webkit-overflow-scrolling: touch; /* smoother Scroll auf iOS */
}

@media (max-width: 480px) {
  .modal { max-height: 96vh; }
}

.media {
  border-radius:.8rem;
  border:1px solid #ffffff1a;
  background:#0b0f1f;

}

/* Bild oder Video soll ganz normal skalieren */
.media img,
.media video {
  width:100%;
  height:auto;
  display:block;
}



label {
  font-size:.9rem;
  color:var(--muted) 
}
input,
textarea {
  width:100%;
  padding:.7rem .8rem;
  background:#0a0f20;
  color:#fff;
  border:1px solid #ffffff22;
  border-radius:.6rem;
  outline:none 
}
input:focus,
textarea:focus {
  border-color:var(--ring);
  box-shadow:0 0 0 3px #f59e0b33 
}
.actions {
  display:flex;
  gap:.5rem;
  align-items:center;
  flex-wrap:wrap 
}
.btn {
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border:none;
  border-radius:.7rem;
  padding:.7rem 1rem;
  font-weight:700;
  cursor:pointer 
}
.secondary {
  background:transparent;
  border:1px solid #ffffff33 
}
.hint {
  color:var(--muted);
  font-size:.85rem 
}
.success {
  display:none;
  background:#052e18;
  border:1px solid #22c55e55;
  color:#bbf7d0;
  padding:.7rem .8rem;
  border-radius:.6rem;
  font-size:.9rem 
}
.success.show {
  display:block 
}
.site-foot {
  text-align:center;
  padding:1.5rem;
  color:#9ca3af;
  font-size:.9rem 
}
.site-foot a {
  color:#cbd5e1 
}
.content-text {
  line-height:1.6 
} /* Countdown – Glass Pill */
#countdown {
  --cd-a: var(--accent);
  --cd-b: var(--accent-2);
  margin-top:.35rem;
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid #ffffff22;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: 0 10px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:var(--text);
  font-weight:700;
  font-size:clamp(.95rem, 1.4vw, 1.05rem);
  letter-spacing:.01em;
  font-variant-numeric: tabular-nums;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
#countdown::before {
  content:"⏳";
  font-size:1.1em;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
} /* (Optional) Zahlen besonders highlighten, falls du sie mit <b>...<\/b> umschließt */
#countdown b {
  background:linear-gradient(90deg, var(--cd-a), var(--cd-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 24px rgba(225,29,72,.25);
  font-weight:800;
}

#signup input {margin-bottom:.8rem}
#signup label {margin-bottom:0.5rem;display:block}

.dsgvo-note{margin:.8rem 0; font-size:.95rem; color:var(--muted);}
.dsgvo-note a{text-decoration:underline;color:var(--muted);}
.dsgvo-note a:hover;{text-decoration:none;color:var(--muted);}
.dsgvo-note ul,.dsgvo-note ol{padding-left:1.2rem}

.cons-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
  cursor: pointer;
  font-size: .95rem;
  color: var(--muted);
}

/* Normale Browser-Checkbox */
.cons-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* Pflichtfeld-Stern */
.cons-label .req {
  color: #dc2626;
  font-weight: bold;
}


@media (max-width: 768px) {
  body {
    /* Verlauf weg, nur Bild, vollflächig */
    background:
      #0f172a
      url('https://images.unsplash.com/photo-1482517967863-00e15c9b44be?q=80&w=2069&auto=format&fit=crop')
      center/cover no-repeat;

    background-attachment: scroll; /* explizit KEIN fixed auf Mobile */
  }
}