/* Cockpit 6b — v6.0: Bühne (Beamer-Bild 1280 × 800). Gilt in der Regie-Vorschau und auf beamer.html. Immer dunkel. */
.buehne {
  --b-grund: #0f0f11; --b-seite: #151518; --b-linie: #2a2a2e; --b-linie2: #232327; --b-ink: #f2f2f3; --b-ink2: #c8c8ce; --b-ink3: #8e8e96;
  --b-akzent: #7aa2f7; --b-akzent2: #9bb9fa; --b-rot: #ff6b5e; --b-gruen: #6fbf8a; --b-mark: rgba(255, 214, 10, .28);
  position: relative; width: 1280px; height: 800px; overflow: hidden; background: var(--b-grund); color: var(--b-ink);
  display: flex; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; box-sizing: border-box; text-align: left; line-height: 1.2;
  user-select: none; -webkit-user-select: none;
}
.buehne *, .buehne *::before, .buehne *::after { box-sizing: border-box; }
.buehne.m-schwarz { background: #000; }

/* Seitenleiste */
.buehne .bside { width: 290px; flex: none; background: var(--b-seite); border-right: 1px solid var(--b-linie); padding: 48px 36px 40px; display: flex; flex-direction: column; gap: 12px; }
.buehne .bart { font-size: 18px; font-weight: 600; letter-spacing: .14em; color: var(--b-akzent); }
.buehne .bthema { font-size: 34px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; max-height: 5.9em; overflow: hidden; }
.buehne .bflex { flex: 1; }
.buehne .bstrich { height: 2px; width: 40px; background: var(--b-akzent); }
.buehne .buhr { font-size: 52px; font-weight: 300; color: #e6e6ea; line-height: 1; margin-top: 8px; letter-spacing: -.01em; }
.buehne .brest { font-size: 20px; color: var(--b-ink3); min-height: 1.2em; }

/* Inhalt */
.buehne .bmain { flex: 1; min-width: 0; padding: 48px 60px 32px; display: flex; flex-direction: column; }
.buehne .btitel { margin: 0; min-height: 96px; max-width: 600px; display: flex; align-items: flex-end; font-size: 48px; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; overflow-wrap: anywhere; }
.buehne .bkoerper { flex: 1; min-height: 0; margin-top: 30px; border-top: 1px solid #2e2e33; overflow: hidden; font-size: 44px; }
.buehne .bz { padding: .32em 0; border-bottom: 1px solid var(--b-linie2); font-weight: 600; line-height: 1.18; overflow-wrap: anywhere; }
.buehne .bz.kopf { font-size: .5em; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--b-ink3); padding: .9em 0 .5em; border-bottom: 0; }
.buehne .bz.rot { color: var(--b-rot); font-weight: 700; }
.buehne .bz.gelb { color: var(--b-akzent2); }
.buehne .bz.tab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 1.2em; }
.buehne .bz.tab .l { font-weight: 700; }
.buehne .bz.nr, .buehne .bz.loes { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); align-items: baseline; }
.buehne .bz .n { color: var(--b-ink3); font-weight: 500; }
.buehne .bkr { display: grid; grid-auto-flow: row; }
.buehne .bkr.zwei { grid-template-rows: repeat(var(--r, 5), auto); grid-auto-flow: column; column-gap: 1.6em; align-content: start; }
.buehne .bkr .bz { border-bottom: 1px solid var(--b-linie2); }
.buehne .bz .tp { display: inline-block; margin-right: 1.15em; }
.buehne .bz .tp:last-child { margin-right: 0; }
.buehne .bloes .bz.loes .t { display: block; min-height: 1.18em; }
.buehne .bloes .bz.loes .deck { display: inline-block; width: 7em; height: .62em; border-radius: 6px; background: #26262b; vertical-align: middle; }
.buehne .bloes .bz.loes.auf .tp { font-weight: 700; }
.buehne .bloes .bz.loes.neu .tp { background: linear-gradient(transparent 10%, var(--b-mark) 10%, var(--b-mark) 94%, transparent 94%); border-radius: 4px; padding: 0 .12em; }
.buehne .bfuss { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; margin-top: 12px; border-top: 1px solid #2e2e33; min-height: 60px; }
.buehne .bregel { font-size: 26px; color: #d6d6db; display: flex; gap: 28px; font-weight: 500; white-space: nowrap; }
.buehne .bregel .gruen { color: var(--b-gruen); font-weight: 600; }
.buehne .bregel .rot { color: var(--b-rot); font-weight: 600; }
.buehne .bfussplatz { width: 220px; flex: none; }

/* Ruhebild */
.buehne .bruhe { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.buehne .bruhe .bstrich { height: 3px; width: 64px; }
.buehne .buhr.gross { font-size: 240px; font-weight: 200; letter-spacing: -.03em; line-height: 1; margin: 0; color: var(--b-ink); }
.buehne .bruhe .brest { font-size: 32px; }

/* Foto / leere Tafel */
.buehne .bbild { position: absolute; inset: 0; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.buehne .bbild img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; pointer-events: none; }
.buehne .btafel { position: absolute; inset: 0; background: var(--b-grund); }

/* Stift, Timer, Datumsfeld */
.buehne .bstriche { position: absolute; inset: 0; width: 1280px; height: 800px; pointer-events: none; overflow: visible; }
.buehne .btimer { position: absolute; transform-origin: top left; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 20px; border: 1px solid #34343a; border-radius: 10px;
  background: rgba(21, 21, 24, .94); font-size: 32px; font-weight: 500; color: #d6d6db; white-space: nowrap; letter-spacing: .01em; }
.buehne .btimer svg { width: 28px; height: 28px; flex: none; }
.buehne .btimer.stopp svg { color: var(--b-akzent); }
.buehne .btimer.aus { color: var(--b-rot); border-color: var(--b-rot); animation: bblink 1s steps(2, start) infinite; }
@keyframes bblink { 50% { opacity: .35; } }
.buehne .bdatum { position: absolute; left: 1080px; top: 0; width: 200px; height: 112px; border: 2px dashed rgba(255, 255, 255, .28); border-top: 0; border-right: 0; border-bottom-left-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .4); pointer-events: none; }

/* Datumsfeld oben rechts: immer dunkel (die Kinder schreiben dort das Datum an die Tafel) */
.buehne .bdatumfrei { position: absolute; left: 1080px; top: 0; width: 200px; height: 112px; background: var(--b-grund); z-index: 6; pointer-events: none; }
.buehne .bdatumfrei.foto { background: #000; }
.buehne .bstriche { z-index: 4; }
.buehne .btimer { z-index: 5; }
/* Schwarz: Deckel über allem — Karte, Striche und Timer bleiben darunter erhalten */
.buehne .bdeckel { position: absolute; inset: 0; background: #000; z-index: 20; }
.buehne .bdatum { z-index: 21; }
/* Titel/Thema mit mehreren Teilen: Abstand statt „·“ */
.buehne .btitel .tp, .buehne .bthema .tp { display: inline-block; margin-right: .5em; }
.buehne .bz.tab .tp { display: inline-block; margin-right: .8em; }