/* Zuschauerseite s.php: das Video ist die Seite. Die Bühne bleibt schwarz (Kinosaal),
   alles darunter im Hausstil v1.1.0 (Creme, Newsreader/Manrope, Pillenknöpfe) — seit 27.10.2026.
   Werte kommen aus /hausstil/v1.1.0/hausstil.css (in s.php eingebunden), immer mit Rückfall. */
:root {
  --hg: var(--hs-bg, #f3eee6); --flaeche: var(--hs-surface, #ffffff); --linie: var(--hs-border, #e5ddd0);
  --text: var(--hs-ink, #1c1a17); --leise: var(--hs-text-muted, #4a453d); --zart: var(--hs-text-subtle, #6b645a);
  --akzent: var(--hs-ink, #1c1a17); --akzent-hell: var(--hs-ink-hover, #2e2b26);
  --gold: var(--hs-gold, #c9a04a); --gold-text: var(--hs-gold-dark, #7a5512);
  --radius: var(--hs-radius, 1.25rem);
  --schrift: var(--hs-font-sans, "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --schrift-titel: var(--hs-font-display, "Newsreader", Georgia, "Times New Roman", serif);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--hg); color: var(--text); }
body { font: 16px/1.6 var(--schrift); -webkit-font-smoothing: antialiased; }
.versteckt { display: none !important; }

.buehne { position: relative; width: 100%; background: #000; display: flex; align-items: center; justify-content: center;
  height: min(100svh - 96px, 56.25vw); min-height: 220px; }
.buehne video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }
.vorbereitung { color: var(--hs-on-ink-muted, #cfc7b9); padding: 2rem; text-align: center; }

.start { position: absolute; inset: 0; border: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.45));
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.start-knopf { width: 92px; height: 92px; border-radius: 50%; background: rgba(243,238,230,.95); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.45); transition: transform .15s ease; }
.start-knopf svg { width: 40px; height: 40px; fill: var(--text); margin-left: 6px; }
.start:hover .start-knopf, .start:focus-visible .start-knopf { transform: scale(1.07); }
.start-dauer { position: absolute; right: 16px; bottom: 14px; background: rgba(0,0,0,.7); color: #fff; font-size: .85rem; padding: 2px 8px; border-radius: 6px; }

.ende { position: absolute; inset: 0; background: rgba(28,26,23,.82); display: flex; align-items: center; justify-content: center; }
.ende-innen { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; padding: 1rem; }
/* Dunkler Kasten: Hauptknopf darin creme */
.ende .knopf.haupt { background: var(--hs-on-ink, #f3eee6); border-color: var(--hs-on-ink, #f3eee6); color: var(--text); }
.ende .knopf.haupt:hover { background: #fff; }

.text { max-width: 960px; margin: 0 auto; padding: 26px 16px 56px; }
.kopfzeile { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; justify-content: space-between; }
h1 { font-family: var(--schrift-titel); font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.15; margin: 0 0 6px; font-weight: 400; letter-spacing: -.02em; }
.von { margin: 0; color: var(--zart); font-size: .92rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: .5rem; }
.beschreibung { margin: 18px 0 0; color: var(--leise); max-width: 70ch; white-space: normal; font-size: 1.02rem; }

.knopf { font: inherit; font-size: .95rem; border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); padding: .65rem 1.15rem;
  border-radius: var(--hs-radius-pill, 999px); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; font-weight: 500; }
.knopf:hover { border-color: var(--zart); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--hs-on-ink, #f3eee6); font-weight: 600; }
.knopf.haupt::after { content: " →"; }
.knopf.haupt:hover { background: var(--akzent-hell); }
.knopf:focus-visible, .kapitel button:focus-visible, .start:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.kapitel { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--linie); }
.kapitel li { border-bottom: 1px solid var(--linie); }
.kapitel button { all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 14px; padding: 12px 4px; cursor: pointer; color: var(--leise); }
.kapitel button:hover { color: var(--text); background: rgba(201,160,74,.07); }
.kapitel button.aktiv { color: var(--text); font-weight: 600; }
.zeit { font-variant-numeric: tabular-nums; color: var(--gold-text); min-width: 3.2em; }

dialog { border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); border-radius: var(--radius); padding: 24px; width: min(480px, calc(100vw - 32px));
  box-shadow: var(--hs-shadow, 0 12px 32px rgba(28,26,23,.1)); }
dialog::backdrop { background: rgba(28,26,23,.55); }
dialog h2 { margin: 0 0 6px; font-family: var(--schrift-titel); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; }
.leise { color: var(--leise); font-size: .9rem; margin: 0 0 12px; }
textarea, input[type=text] { width: 100%; font: inherit; color: var(--text); background: var(--hg); border: 1px solid var(--linie); border-radius: 12px; padding: .65rem .75rem; margin: 0 0 10px; }
textarea:focus, input[type=text]:focus { outline: none; border-color: var(--gold); }
.zeile { display: flex; justify-content: flex-end; gap: .5rem; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--hs-on-ink, #f3eee6); padding: .6rem 1rem; border-radius: 12px;
  opacity: 0; pointer-events: none; transition: all .2s ease; font-size: .95rem; max-width: calc(100vw - 32px); }
.toast.zeigen { opacity: 1; transform: translateX(-50%) translateY(0); }

.schau-hinweis { max-width: 520px; margin: 18vh auto 0; padding: 0 16px; text-align: center; }
.schau-hinweis p { color: var(--leise); }

@media (max-width: 640px) {
  .buehne { height: 56.25vw; }
  .start-knopf { width: 72px; height: 72px; }
  .start-knopf svg { width: 32px; height: 32px; }
  .aktionen { width: 100%; }
  .aktionen .knopf { flex: 1; justify-content: center; }
}