:root { --grund:#1b1712; --karte:#27211a; --linie:#3d3428; --text:#f3eadb; --leise:#b3a690; --gold:#e8a33d; --rot:#e0453a; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background-image:
    radial-gradient(circle at 12% 18%, #241e17 0 22px, transparent 23px),
    radial-gradient(circle at 78% 8%, #221c15 0 14px, transparent 15px),
    radial-gradient(circle at 60% 70%, #221c15 0 18px, transparent 19px);
  background-size: 240px 240px;
}
main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.kopf { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 14px; }
.logo { width: 52px; height: 52px; border-radius: 14px; }
h1 { margin: 0; font-size: 26px; color: var(--gold); line-height: 1.1; }
.unter { color: var(--leise); font-size: 14px; }

.buehne {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0d0b08; border: 1px solid var(--linie); border-radius: 18px; overflow: hidden;
}
.buehne video, .buehne img, .buehne iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border: 0; background: #000; }
.buehne:fullscreen { border-radius: 0; border: 0; }

.status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 99px;
  background: rgba(0,0,0,.6); font-size: 13px; font-weight: 700; letter-spacing: .4px;
}
.status .punkt { width: 9px; height: 9px; border-radius: 50%; background: var(--leise); }
.status.live .punkt { background: var(--rot); animation: puls 1.6s infinite; }
.status.live { color: #fff; }
@keyframes puls { 50% { opacity: .35; } }

.vollbild { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 12px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 20px; cursor: pointer; }

.leer {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; background: radial-gradient(circle at 50% 40%, #2c2419, #120f0b 75%);
}
.leer[hidden] { display: none; }
.leer h2 { margin: 6px 0 4px; font-size: 22px; }
.leer p { margin: 0; color: var(--leise); max-width: 420px; }
.leer-gecko { font-size: 64px; animation: schaukeln 4s ease-in-out infinite; }
@keyframes schaukeln { 50% { transform: translateY(-6px) rotate(-4deg); } }

.infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 16px 0; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; }
.kachel h3 { margin: 0 0 6px; font-size: 16px; color: var(--gold); }
.kachel p, .kachel ul { margin: 0; color: var(--leise); font-size: 15px; }
.kachel ul { padding-left: 18px; }
.kachel li { margin: 4px 0; }
.kachel table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kachel td { padding: 5px 0; border-top: 1px solid var(--linie); vertical-align: top; }
.kachel td:first-child { color: var(--leise); padding-right: 10px; }
.kachel tr:first-child td { border-top: 0; }

.fuss { text-align: center; color: var(--leise); font-size: 13px; padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 20px); }
.fuss a { color: var(--leise); }

/* Eingebettet in der Handy-App: nur das Bild */
body.app { background: var(--grund); }
body.app .kopf, body.app .fuss, body.app .infos { display: none; }
body.app main { padding: 0; }
body.app .buehne { border-radius: 14px; }