Pult: Handy als Stream Deck mit Soundboard und Szenenwechsel

- /pult als installierbare Web-App (Manifest, Service Worker, Symbole)
- Soundboard: Sounds vom Handy hochladen, bearbeiten, im Stream spielen
  ueber die neue Browser-Source /sounds
- Szenen, Clip und Stummschalter: der Stream-PC waehlt sich mit eigenem
  Schluessel beim Hub ein (fern:verbinden), Befehle warten auf OBS
- Browser-Sources melden, welche Seite sie sind

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/cli/main.ts

@@ -690,6 +690,51 @@ async function webPasswort(args: string[]): Promise<void> {
   console.log(`${C.ok}Passwort gesetzt.${C.off} Angemeldet bleibt man 30 Tage.`);
 }
 
+/**
+ * Den Stream-PC beim Hub anmelden. Prueft vorher, ob der Hub den Schluessel
+ * annimmt - ein Tippfehler soll hier auffallen und nicht erst im Stream, wenn
+ * der Szenenknopf am Handy nichts tut.
+ */
+async function fernVerbinden(args: string[]): Promise<void> {
+  const { readSecrets, updateSecrets } = await import('#twitch/secrets.ts');
+  const [adresse, schluessel] = args;
+  if (adresse === 'aus') {
+    updateSecrets((s) => { delete s.fern; });
+    console.log('Fernsteuerung getrennt. Wirkt nach dem naechsten Start von abdulive ingest.');
+    return;
+  }
+  if (!adresse || !schluessel) {
+    const da = readSecrets().fern;
+    console.log(da ? `Eingerichtet fuer ${da.url}.` : 'Nicht eingerichtet.');
+    console.log('Aufruf: abdulive fern:verbinden <adresse> <schluessel>  (steht auf der Uebersichtsseite)');
+    return;
+  }
+  const url = adresse.replace(/\/+$/, '');
+  if (!/^https?:\/\//.test(url)) throw new Error('Die Adresse muss mit https:// anfangen.');
+
+  const probe = new AbortController();
+  let status: number;
+  try {
+    const res = await fetch(`${url}/fern/befehle`, {
+      headers: { authorization: `Bearer ${schluessel}` },
+      signal: AbortSignal.any([probe.signal, AbortSignal.timeout(10_000)]),
+    });
+    status = res.status;
+  } catch (err) {
+    throw new Error(`Hub unter ${url} nicht erreichbar: ${(err as Error).message}`);
+  } finally {
+    // Die Leitung nur oeffnen, um den Schluessel zu pruefen. Offen gelassen
+    // haette sie der Hub als verbundenen PC gezaehlt.
+    probe.abort();
+  }
+  if (status === 403) throw new Error('Der Hub lehnt den Schluessel ab. Neu von der Uebersichtsseite kopieren.');
+  if (status !== 200) throw new Error(`Der Hub antwortet ${status}. Laeuft dort eine Fassung mit Pult?`);
+
+  updateSecrets((s) => { s.fern = { url, key: schluessel }; });
+  console.log(`${C.ok}Verbunden.${C.off} Der Hub nimmt den Schluessel an.`);
+  console.log('Jetzt abdulive ingest neu starten - danach steuert das Pult OBS.');
+}
+
 // ---------------------------------------------------------------- golive
 
 /**
@@ -901,6 +946,10 @@ abdulive  -  Werkzeugkasten fuer Abdus Stream
   ingest                       Daemon auf dem Stream-PC (OBS, !clip, Rendern)
   overlay [--demo]             Nur den Overlay-Server, --demo mit erfundenem Betrieb
   web:passwort [wort]          Passwort fuer die Weboberflaeche setzen
+  fern:verbinden <adresse> <schluessel>
+                               Stream-PC beim Hub anmelden, damit das Pult OBS
+                               steuern kann. Der Befehl steht fertig auf der
+                               Uebersichtsseite des Hubs. "aus" statt Adresse trennt.
   check-env                    Umgebung pruefen
   db:migrate                   Migrationen anwenden
   fetch-model [name]           Whisper-Modell laden (Vorgabe: ggml-small.bin)
@@ -956,6 +1005,7 @@ try {
     }
     case 'overlay': await overlayOnly(args); break;
     case 'web:passwort': await webPasswort(args); break;
+    case 'fern:verbinden': await fernVerbinden(args); break;
     case 'discord:bot': await discordBot(); break;
     case 'help': case undefined: help(); break;
     default:

apps/hub/src/index.ts

@@ -37,6 +37,7 @@ import {
   ausEventSub, createDrossel, createWarteschlange, entscheiden,
 } from './rewards.ts';
 import { createAudioAblage } from './audio-ablage.ts';
+import { createLiegestuetze } from './liegestuetze.ts';
 import { createAnnouncer, type StreamInfo } from '../../broadcaster/src/golive.ts';
 import { createSpikeDetector } from '../../ingest/src/spike.ts';
 import { createBus, type AlertEvent, type Bus } from '../../overlay-server/src/bus.ts';
@@ -95,6 +96,10 @@ export async function runHub(): Promise<void> {
   // ---- Kanalpunkte
   const warteschlange = createWarteschlange();
   const drossel = createDrossel();
+  const liegestuetze = createLiegestuetze(db);
+  // Gleich zu Beginn in den Bus, sonst zeigt eine frisch verbundene
+  // Browser-Source 0, bis die naechste Einloesung kommt.
+  bus.publish({ kind: 'liegestuetze', ...liegestuetze.stand() });
 
   /**
    * Eine Einloesung abschliessen (FULFILLED) oder die Punkte zurueckgeben
@@ -189,6 +194,10 @@ export async function runHub(): Promise<void> {
         });
         if (ent.aktion === 'konfetti') bus.publish({ kind: 'konfetti', staerke: 1 });
         if (ent.aktion === 'emote-regen') bus.publish({ kind: 'hype', score: 5, rate: 40 });
+        if (ent.aktion === 'liegestuetze') {
+          const dazu = ent.plan.anzahl ?? 5;
+          bus.publish({ kind: 'liegestuetze', ...liegestuetze.aendern(dazu), dazu, name: e.userName });
+        }
         log.info(`${e.userName} hat "${e.rewardTitle}" eingeloest -> ${ent.aktion}`);
         void einloesungSetzen(e.rewardId, e.id, 'FULFILLED');
         break;
@@ -321,6 +330,7 @@ export async function runHub(): Promise<void> {
         goLive: announcer.lastResult() ?? 'noch nichts',
         overlayClients: bus.clients(),
         ttsWartend: warteschlange.liste().length,
+        liegestuetze: liegestuetze.stand(),
         ttsStimme: stimmeFehlt.length ? `fehlt: ${stimmeFehlt.join(', ')}` : 'bereit',
         spikeArmed: spikes.isArmed(),
         note: state.chatAnonymous
@@ -360,11 +370,38 @@ export async function runHub(): Promise<void> {
         log.warn('Panikschalter: Vorlesen gestoppt und Warteschlange geleert');
       },
     },
+    liegestuetze: {
+      stand: () => liegestuetze.stand(),
+      aendern: (n) => {
+        const neu = liegestuetze.aendern(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze von Hand ${n > 0 ? '+' : ''}${n} -> ` +
+          `${neu.offen} offen, ${neu.gemacht} gemacht`);
+        return neu;
+      },
+      setzen: (n) => {
+        const neu = liegestuetze.setzen(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze von Hand gesetzt -> ${neu.offen} offen`);
+        return neu;
+      },
+      gemachtSetzen: (n) => {
+        const neu = liegestuetze.gemachtSetzen(n);
+        bus.publish({ kind: 'liegestuetze', ...neu });
+        log.info(`Liegestuetze gemacht von Hand gesetzt -> ${neu.gemacht}`);
+        return neu;
+      },
+    },
   });
   void server;
 
   // ---- Zuschauerzahlen und Stream-Sitzungen
-  void pollStream(cfg, repo, state, bus, abort.signal, (stream) => announcer.announce(stream));
+  void pollStream(cfg, repo, state, bus, abort.signal, (stream) => {
+    announcer.announce(stream);
+    // Nur bei einem wirklich neuen Stream, nicht beim Neustart des Hubs
+    // mitten im Stream: dann wird die Sitzung uebernommen, nicht gestartet.
+    bus.publish({ kind: 'liegestuetze', ...liegestuetze.neuerStream() });
+  });
 
   // ---- EventSub erst, wenn ein Konto verbunden ist. Ohne Nutzer-Token
   // wuerde der Verbindungsversuch im Minutentakt scheitern und nichts als

apps/hub/src/liegestuetze.test.ts

@@ -0,0 +1,89 @@
+// Der Zaehler haelt fest, was Zuschauer mit Kanalpunkten bezahlt haben und
+// was Abdu davon geschafft hat. Er darf weder beim Neustart vergessen noch
+// ins Negative laufen, und eine Korrektur ist keine Liegestuetze.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { DatabaseSync } from 'node:sqlite';
+import { migrate } from '#db/index.ts';
+import { createLiegestuetze, HOECHSTENS } from './liegestuetze.ts';
+import { entscheiden, type RewardsConfig } from './rewards.ts';
+import { zahlAus } from '../../overlay-server/src/server.ts';
+
+function datei(): string {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'abdulive-lz-'));
+  return path.join(dir, 't.db');
+}
+
+function oeffnen(file: string): DatabaseSync {
+  const db = new DatabaseSync(file);
+  migrate(db);
+  return db;
+}
+
+test('Liegestuetze: zaehlt hoch und herunter, nie unter 0', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  assert.deepEqual(lz.stand(), { offen: 0, gemacht: 0 });
+  assert.equal(lz.aendern(10).offen, 10);
+  assert.equal(lz.aendern(10).offen, 20);
+  assert.equal(lz.aendern(-5).offen, 15);
+  assert.equal(lz.aendern(-100).offen, 0);
+  assert.equal(lz.setzen(42).offen, 42);
+  assert.equal(lz.setzen(-3).offen, 0);
+  assert.equal(lz.setzen(10_000_000).offen, HOECHSTENS);
+});
+
+test('Liegestuetze: Herunterzaehlen ist gemacht, Setzen nicht', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  lz.aendern(20);
+  assert.deepEqual(lz.aendern(-5), { offen: 15, gemacht: 5 });
+  // Nur was wirklich offen war, kann gemacht sein.
+  assert.deepEqual(lz.aendern(-100), { offen: 0, gemacht: 20 });
+  lz.aendern(10);
+  assert.deepEqual(lz.setzen(3), { offen: 3, gemacht: 20 }, 'Korrektur zaehlt nicht');
+  assert.deepEqual(lz.gemachtSetzen(7), { offen: 3, gemacht: 7 });
+});
+
+test('Liegestuetze: neuer Stream setzt gemacht zurueck, offen bleibt', () => {
+  const lz = createLiegestuetze(oeffnen(datei()));
+  lz.aendern(30);
+  lz.aendern(-10);
+  assert.deepEqual(lz.neuerStream(), { offen: 20, gemacht: 0 });
+});
+
+test('Liegestuetze: der Stand ueberlebt einen Neustart', () => {
+  const file = datei();
+  const erst = oeffnen(file);
+  const lz = createLiegestuetze(erst);
+  lz.aendern(30);
+  lz.aendern(-5);
+  erst.close();
+
+  assert.deepEqual(createLiegestuetze(oeffnen(file)).stand(), { offen: 25, gemacht: 5 });
+});
+
+test('Belohnung mit Aktion liegestuetze wird ausgefuehrt und traegt die Anzahl', () => {
+  const cfg: RewardsConfig = {
+    enabled: true,
+    belohnungen: [{ titel: '5 Liegestütze', aktion: 'liegestuetze', anzahl: 5 }],
+    tts: { freigabe: true, maxZeichen: 200, blockliste: [], proPersonProStunde: 3 },
+  };
+  const ent = entscheiden({
+    id: 'r1', rewardId: 'x', rewardTitle: '5 liegestütze', userId: 'u1', userName: 'Kevin',
+    text: '', kosten: 2000, ts: '2026-10-04T20:00:00Z',
+  }, cfg);
+  assert.equal(ent.art, 'ausfuehren');
+  assert.ok(ent.art === 'ausfuehren' && ent.aktion === 'liegestuetze' && ent.plan.anzahl === 5);
+});
+
+test('zahlAus: nur ganze Zahlen, alles andere ist null', () => {
+  assert.equal(zahlAus('10'), 10);
+  assert.equal(zahlAus(' -5 '), -5);
+  assert.equal(zahlAus('+3'), 3);
+  for (const x of ['', 'abc', '1.5', '1e3', '9999999', null, undefined]) {
+    assert.equal(zahlAus(x), null, String(x));
+  }
+});

apps/hub/src/liegestuetze.ts

@@ -0,0 +1,63 @@
+// Liegestuetze aus Kanalpunkten: was offen ist und was in diesem Stream
+// schon gemacht wurde.
+//
+// Eine Einloesung zaehlt `offen` hoch. Abdu zaehlt auf der Uebersichtsseite
+// herunter, wenn er sie gemacht hat - das wandert nach `gemacht`. Setzen ist
+// dagegen eine Korrektur und zaehlt nicht als gemacht: wer einen Tippfehler
+// behebt, hat dabei keine Liegestuetze gemacht.
+//
+// Beides liegt in der Datenbank: was die Zuschauer bezahlt haben, darf ein
+// Neustart nicht loeschen. `gemacht` beginnt mit jedem neuen Stream bei 0.
+
+import type { Db } from '#db/index.ts';
+
+/** Mehr glaubt niemand, und ein Tippfehler mit sechs Nullen soll nicht im Bild stehen. */
+export const HOECHSTENS = 99_999;
+
+export type LiegestuetzStand = { offen: number; gemacht: number };
+
+export type Liegestuetze = {
+  stand: () => LiegestuetzStand;
+  /**
+   * Zaehlt `offen` um `n` hoch oder (negativ) herunter, nie unter 0. Was
+   * dabei wirklich abgezogen wurde, kommt zu `gemacht`.
+   */
+  aendern: (n: number) => LiegestuetzStand;
+  /** Setzt `offen` fest. Korrektur, zaehlt nicht als gemacht. */
+  setzen: (n: number) => LiegestuetzStand;
+  /** Setzt `gemacht` fest. Korrektur. */
+  gemachtSetzen: (n: number) => LiegestuetzStand;
+  /** Neuer Stream: `gemacht` auf 0, `offen` bleibt. */
+  neuerStream: () => LiegestuetzStand;
+};
+
+export function createLiegestuetze(db: Db, name = 'liegestuetze'): Liegestuetze {
+  const lesen = db.prepare('SELECT wert FROM zaehler WHERE name = ?');
+  const schreiben = db.prepare(`
+    INSERT INTO zaehler (name, wert, geaendert) VALUES (?, ?, ?)
+    ON CONFLICT(name) DO UPDATE SET wert = excluded.wert, geaendert = excluded.geaendert
+  `);
+  const OFFEN = name;
+  const GEMACHT = `${name}-gemacht`;
+
+  const wert = (n: string): number => (lesen.get(n) as { wert: number } | undefined)?.wert ?? 0;
+  const schreibe = (n: string, w: number): number => {
+    const sauber = Math.min(HOECHSTENS, Math.max(0, Math.trunc(w)));
+    schreiben.run(n, sauber, new Date().toISOString());
+    return sauber;
+  };
+  const stand = (): LiegestuetzStand => ({ offen: wert(OFFEN), gemacht: wert(GEMACHT) });
+
+  return {
+    stand,
+    aendern(n) {
+      const vorher = wert(OFFEN);
+      const nachher = schreibe(OFFEN, vorher + n);
+      if (nachher < vorher) schreibe(GEMACHT, wert(GEMACHT) + (vorher - nachher));
+      return stand();
+    },
+    setzen(n) { schreibe(OFFEN, n); return stand(); },
+    gemachtSetzen(n) { schreibe(GEMACHT, n); return stand(); },
+    neuerStream() { schreibe(GEMACHT, 0); return stand(); },
+  };
+}

apps/hub/src/rewards.test.ts

@@ -25,6 +25,15 @@ test('Wortfilter: kurze Eintraege nur am Wortanfang, sonst trifft es Harmloses',
   assert.equal(wortfilterTreffer('N4Z1', LISTE), 'nazi');
 });
 
+test('Wortfilter: "www" wird zu "w" und darf nur als ganzes Wort treffen', () => {
+  // So im Stream passiert: jede Nachricht mit "wie" oder "weg" flog raus.
+  const liste = ['www', 'http'];
+  assert.equal(wortfilterTreffer('wie kann es sein, dass ich nicht mod bin?!', liste), undefined);
+  assert.equal(wortfilterTreffer('Ladiesman hat einen weg', liste), undefined);
+  assert.equal(wortfilterTreffer('geh auf www.example.de', liste), 'www');
+  assert.equal(wortfilterTreffer('https://example.de', liste), 'http');
+});
+
 test('Wortfilter: normaler Text geht durch', () => {
   assert.equal(wortfilterTreffer('Grüße an Abdu, geiler Stream!', LISTE), undefined);
 });

apps/hub/src/rewards.ts

@@ -31,7 +31,8 @@ export type Einloesung = {
   ts: string;
 };
 
-export type AktionsArt = 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'nichts';
+export type AktionsArt =
+  | 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
 
 export type BelohnungsPlan = {
   /** Titel der Belohnung auf Twitch. Gross-/Kleinschreibung egal. */
@@ -43,6 +44,8 @@ export type BelohnungsPlan = {
   freigabe?: boolean;
   /** Nur bei `tts`: laengerer Text wird abgelehnt statt gekuerzt. */
   maxZeichen?: number;
+  /** Nur bei `liegestuetze`: so viele kommen je Einloesung dazu. Vorgabe 5. */
+  anzahl?: number;
 };
 
 export type RewardsConfig = {
@@ -148,6 +151,8 @@ export function fuerFilter(text: string, mitLuecken: boolean): string {
  * Lange Eintraege (ab 5 Buchstaben) werden im zusammengezogenen Text
  * gesucht, damit Punkte und Leerzeichen dazwischen nicht helfen. Kurze nur
  * am Wortanfang: zusammengezogen stuende "nazi" sonst auch in "kann azubi".
+ * Was danach kuerzer als 3 Buchstaben ist, nur als ganzes Wort: aus "www"
+ * wird "w", und das stuende am Anfang von "wie" und "weg".
  */
 export function wortfilterTreffer(text: string, blockliste: string[]): string | undefined {
   const dicht = fuerFilter(text, false);
@@ -155,6 +160,7 @@ export function wortfilterTreffer(text: string, blockliste: string[]): string |
   return blockliste.find((eintrag) => {
     const e = fuerFilter(eintrag, false);
     if (!e) return false;
+    if (e.length < 3) return woerter.includes(e);
     return e.length >= 5 ? dicht.includes(e) : woerter.some((w) => w.startsWith(e));
   });
 }

apps/ingest/src/fern.test.ts

@@ -0,0 +1,69 @@
+// Die Leitung zum Hub, Seite des Stream-PCs.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import type { ObsClient } from '#obs/client.ts';
+import { befehlAus, sseZerleger, standLesen } from './fern.ts';
+
+test('SSE: Nachrichten, die zerteilt oder zu zweit ankommen', () => {
+  const z = sseZerleger();
+  assert.deepEqual(z('retry: 2000\n\n'), [], 'retry allein ist keine Nachricht');
+  assert.deepEqual(z('data: {"a"'), []);
+  assert.deepEqual(z(':1}\n\ndata: 2\n\nda'), ['{"a":1}', '2']);
+  assert.deepEqual(z('ta: 3\r\n\r\n'), ['3'], 'auch mit Windows-Zeilenenden');
+});
+
+test('nur bekannte Befehle mit ID werden ausgefuehrt', () => {
+  assert.deepEqual(befehlAus({ id: 'x', art: 'szene', szene: 'Pause' }), { id: 'x', art: 'szene', szene: 'Pause' });
+  assert.deepEqual(befehlAus({ id: 'x', art: 'stumm', quelle: 'Mikro', stumm: true }),
+    { id: 'x', art: 'stumm', quelle: 'Mikro', stumm: true });
+  assert.equal(befehlAus({ art: 'clip' }), null, 'ohne ID gibt es niemanden, dem man antwortet');
+  assert.equal(befehlAus({ id: 'x', art: 'beat' }), null);
+  assert.equal(befehlAus({ id: 'x', art: 'StopStream' }), null);
+});
+
+function falschesObs(antworten: Record<string, (d: Record<string, unknown>) => unknown>): ObsClient {
+  return {
+    run: async () => {},
+    isConnected: () => true,
+    request: async <T>(type: string, data?: unknown): Promise<T> => {
+      const f = antworten[type];
+      if (!f) throw new Error(`OBS lehnt ab (604): ${type}`);
+      return f((data ?? {}) as Record<string, unknown>) as T;
+    },
+  };
+}
+
+test('Stand: Szenen in OBS-Reihenfolge, nur Eingaenge mit Ton', async () => {
+  const obs = falschesObs({
+    GetSceneList: () => ({
+      currentProgramSceneName: 'Gameplay',
+      // OBS zaehlt von unten: Index 0 steht im Fenster ganz unten.
+      scenes: [{ sceneName: 'Pause', sceneIndex: 0 }, { sceneName: 'Gameplay', sceneIndex: 2 },
+        { sceneName: 'Just Chatting', sceneIndex: 1 }],
+    }),
+    GetInputList: () => ({ inputs: [{ inputName: 'Mikro' }, { inputName: 'Facecam' }, { inputName: 'Desktop' }] }),
+    GetInputMute: (d) => {
+      if (d['inputName'] === 'Facecam') throw new Error('kein Ton');
+      return { inputMuted: d['inputName'] === 'Desktop' };
+    },
+    GetReplayBufferStatus: () => ({ outputActive: true }),
+  });
+  assert.deepEqual(await standLesen(obs), {
+    obs: true,
+    szenen: ['Gameplay', 'Just Chatting', 'Pause'],
+    aktuell: 'Gameplay',
+    ton: [{ name: 'Mikro', stumm: false }, { name: 'Desktop', stumm: true }],
+    puffer: true,
+  });
+});
+
+test('Stand ohne Wiedergabepuffer: kein Clip-Knopf, aber Szenen', async () => {
+  const obs = falschesObs({
+    GetSceneList: () => ({ currentProgramSceneName: 'A', scenes: [{ sceneName: 'A', sceneIndex: 0 }] }),
+    GetInputList: () => ({ inputs: [] }),
+  });
+  const s = await standLesen(obs);
+  assert.equal(s.puffer, false);
+  assert.deepEqual(s.szenen, ['A']);
+});

apps/ingest/src/fern.ts

@@ -0,0 +1,247 @@
+// Fernsteuerung fuer OBS, Seite des Stream-PCs.
+//
+// Das Pult am Handy redet mit dem Hub, OBS laeuft hier. Der Hub kommt an
+// diesen Rechner nicht heran (fremder Router, keine Portfreigabe), also waehlt
+// sich der PC beim Hub ein und haelt die Leitung offen:
+//
+//   GET  /fern/befehle   SSE, Befehle kommen herein     (Hub -> PC)
+//   POST /fern/stand     Szenen, aktuelle Szene, Ton    (PC -> Hub)
+//   POST /fern/antwort   ob ein Befehl geklappt hat     (PC -> Hub)
+//
+// Gegenstueck: apps/overlay-server/src/fern.ts. Eingerichtet wird mit
+// `abdulive fern:verbinden <adresse> <schluessel>`; beides steht fertig auf
+// der Uebersichtsseite des Hubs.
+
+import { logger } from '#core/logger.ts';
+import { forever, sleep } from '#core/retry.ts';
+import type { ObsClient } from '#obs/client.ts';
+
+const log = logger('fern');
+
+/** Der Hub schickt alle 15 s einen Herzschlag. Drei verpasste heisst: tot. */
+const TOT_NACH_MS = 45_000;
+
+/** Nach diesen OBS-Ereignissen stimmt der gemeldete Stand nicht mehr. */
+const STAND_EREIGNISSE = new Set([
+  'CurrentProgramSceneChanged', 'SceneListChanged', 'SceneCreated', 'SceneRemoved',
+  'SceneNameChanged', 'InputMuteStateChanged', 'InputCreated', 'InputRemoved',
+  'InputNameChanged', 'ReplayBufferStateChanged',
+]);
+
+export type Stand = {
+  obs: boolean;
+  szenen: string[];
+  aktuell: string | null;
+  ton: Array<{ name: string; stumm: boolean }>;
+  puffer: boolean;
+};
+
+export type Befehl =
+  | { id: string; art: 'szene'; szene: string }
+  | { id: string; art: 'clip' }
+  | { id: string; art: 'stumm'; quelle: string; stumm: boolean };
+
+/**
+ * Zerlegt einen SSE-Strom in Nachrichten. Bekommt beliebige Stuecke - eine
+ * Nachricht kann mitten im Wort geteilt ankommen, und zwei koennen in einem
+ * Stueck stecken.
+ */
+export function sseZerleger(): (stueck: string) => string[] {
+  let rest = '';
+  return (stueck) => {
+    rest += stueck.replace(/\r\n?/g, '\n');
+    const fertig: string[] = [];
+    let i: number;
+    while ((i = rest.indexOf('\n\n')) !== -1) {
+      const block = rest.slice(0, i);
+      rest = rest.slice(i + 2);
+      const daten = block.split('\n')
+        .filter((z) => z.startsWith('data:'))
+        .map((z) => z.slice(5).replace(/^ /, ''));
+      if (daten.length) fertig.push(daten.join('\n'));
+    }
+    return fertig;
+  };
+}
+
+/** Was vom Hub kommt, pruefen. Unbekanntes wird nicht ausgefuehrt. */
+export function befehlAus(roh: unknown): Befehl | null {
+  if (!roh || typeof roh !== 'object') return null;
+  const r = roh as Record<string, unknown>;
+  const id = typeof r['id'] === 'string' ? r['id'] : '';
+  if (!id) return null;
+  if (r['art'] === 'szene' && typeof r['szene'] === 'string') return { id, art: 'szene', szene: r['szene'] };
+  if (r['art'] === 'clip') return { id, art: 'clip' };
+  if (r['art'] === 'stumm' && typeof r['quelle'] === 'string') {
+    return { id, art: 'stumm', quelle: r['quelle'], stumm: r['stumm'] === true };
+  }
+  return null;
+}
+
+/** Szenen, aktuelle Szene, stummschaltbare Eingaenge und der Puffer. */
+export async function standLesen(obs: ObsClient): Promise<Stand> {
+  const leer: Stand = { obs: false, szenen: [], aktuell: null, ton: [], puffer: false };
+  if (!obs.isConnected()) return leer;
+  try {
+    const liste = await obs.request<{
+      currentProgramSceneName: string;
+      scenes: Array<{ sceneName: string; sceneIndex: number }>;
+    }>('GetSceneList');
+    // OBS zaehlt von unten. Im Fenster steht die mit dem hoechsten Index oben,
+    // und in dieser Reihenfolge erwartet man sie auch am Handy.
+    const szenen = [...liste.scenes]
+      .sort((a, b) => b.sceneIndex - a.sceneIndex).map((s) => s.sceneName);
+
+    const eingaenge = await obs.request<{ inputs: Array<{ inputName: string }> }>('GetInputList');
+    // Welcher Eingang Ton hat, sagt OBS nicht direkt. Wer auf GetInputMute
+    // antwortet, hat welchen; Bildquellen lehnen ab.
+    const stumm = await Promise.allSettled(eingaenge.inputs.map((e) =>
+      obs.request<{ inputMuted: boolean }>('GetInputMute', { inputName: e.inputName })
+        .then((r) => ({ name: e.inputName, stumm: r.inputMuted }))));
+    const ton = stumm.flatMap((r) => (r.status === 'fulfilled' ? [r.value] : []));
+
+    const puffer = await obs.request<{ outputActive: boolean }>('GetReplayBufferStatus')
+      .then((r) => r.outputActive, () => false);
+
+    return { obs: true, szenen, aktuell: liste.currentProgramSceneName || null, ton, puffer };
+  } catch (err) {
+    log.debug(`Stand nicht gelesen: ${(err as Error).message}`);
+    return { ...leer, obs: obs.isConnected() };
+  }
+}
+
+export type FernDeps = {
+  url: string;
+  key: string;
+  obs: ObsClient;
+  /** Den Wiedergabepuffer sichern, wie bei !clip, nur ohne Abklingzeit. */
+  clip: () => Promise<{ ok: boolean; reason?: string }>;
+};
+
+export type FernAnschluss = {
+  run: (signal: AbortSignal) => Promise<void>;
+  /** Nach einem OBS-Ereignis rufen. Sammelt kurz, dann geht ein Stand raus. */
+  obsEreignis: (type: string) => void;
+  /** OBS verbunden oder getrennt. */
+  obsWechsel: () => void;
+  verbunden: () => boolean;
+};
+
+export function createFernanschluss(deps: FernDeps): FernAnschluss {
+  const basis = deps.url.replace(/\/+$/, '');
+  const kopf = { authorization: `Bearer ${deps.key}` };
+  let verbunden = false;
+  let sammler: NodeJS.Timeout | null = null;
+
+  async function post(pfad: string, body: unknown): Promise<void> {
+    try {
+      const res = await fetch(`${basis}${pfad}`, {
+        method: 'POST',
+        headers: { ...kopf, 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+        signal: AbortSignal.timeout(10_000),
+      });
+      if (!res.ok) log.warn(`${pfad}: Hub antwortet ${res.status}`);
+    } catch (err) {
+      log.debug(`${pfad} nicht zugestellt: ${(err as Error).message}`);
+    }
+  }
+
+  const standSenden = async (): Promise<void> => {
+    if (!verbunden) return;
+    await post('/fern/stand', await standLesen(deps.obs));
+  };
+
+  const spaeterSenden = (): void => {
+    // OBS feuert beim Szenenwechsel mehrere Ereignisse kurz hintereinander.
+    // Ein Stand danach reicht.
+    if (sammler) clearTimeout(sammler);
+    sammler = setTimeout(() => { sammler = null; void standSenden(); }, 300);
+  };
+
+  async function ausfuehren(b: Befehl): Promise<{ ok: boolean; text: string }> {
+    if (b.art === 'clip') {
+      const r = await deps.clip();
+      return r.ok ? { ok: true, text: 'Clip wird gesichert.' }
+        : { ok: false, text: r.reason ?? 'Clip ging nicht.' };
+    }
+    if (!deps.obs.isConnected()) return { ok: false, text: 'OBS ist auf dem Stream-PC nicht verbunden.' };
+    try {
+      if (b.art === 'szene') {
+        await deps.obs.request('SetCurrentProgramScene', { sceneName: b.szene });
+        return { ok: true, text: `Szene: ${b.szene}` };
+      }
+      await deps.obs.request('SetInputMute', { inputName: b.quelle, inputMuted: b.stumm });
+      return { ok: true, text: `${b.quelle} ${b.stumm ? 'stumm' : 'wieder an'}` };
+    } catch (err) {
+      return { ok: false, text: (err as Error).message };
+    }
+  }
+
+  async function einmal(signal: AbortSignal): Promise<void> {
+    const wachhund = new AbortController();
+    const beides = AbortSignal.any([signal, wachhund.signal]);
+    let zuletzt = Date.now();
+    const takt = setInterval(() => {
+      if (Date.now() - zuletzt > TOT_NACH_MS) {
+        log.warn('Vom Hub nichts mehr gehoert, verbinde neu');
+        wachhund.abort();
+      }
+    }, 10_000);
+
+    try {
+      const res = await fetch(`${basis}/fern/befehle`, {
+        headers: { ...kopf, accept: 'text/event-stream' }, signal: beides,
+      });
+      if (res.status === 403) {
+        log.error('Der Hub lehnt den Schluessel ab. Neu einrichten mit dem Befehl ' +
+          'von der Uebersichtsseite: abdulive fern:verbinden ...');
+        // Nicht im Sekundentakt anklopfen, der Schluessel wird nicht von allein richtig.
+        await sleep(5 * 60_000, signal).catch(() => {});
+        throw new Error('Schluessel abgelehnt');
+      }
+      if (!res.ok || !res.body) throw new Error(`Hub antwortet ${res.status}`);
+
+      verbunden = true;
+      log.info(`Mit dem Hub verbunden (${basis}) - das Pult kann OBS jetzt steuern`);
+      void standSenden();
+
+      const zerleger = sseZerleger();
+      const decoder = new TextDecoder();
+      for await (const stueck of res.body as unknown as AsyncIterable<Uint8Array>) {
+        zuletzt = Date.now();
+        for (const daten of zerleger(decoder.decode(stueck, { stream: true }))) {
+          let roh: unknown;
+          try { roh = JSON.parse(daten); } catch { continue; }
+          const b = befehlAus(roh);
+          if (!b) continue;
+          void ausfuehren(b).then((a) => {
+            log.info(`Pult: ${b.art} -> ${a.ok ? 'ok' : 'abgelehnt'} (${a.text})`);
+            return post('/fern/antwort', { id: b.id, ...a });
+          }).then(spaeterSenden);
+        }
+      }
+      throw new Error('Hub hat die Leitung geschlossen');
+    } catch (err) {
+      if (!signal.aborted) log.debug(`Leitung zum Hub weg: ${(err as Error).message}`);
+      throw err;
+    } finally {
+      clearInterval(takt);
+      if (verbunden) log.info('Leitung zum Hub getrennt');
+      verbunden = false;
+    }
+  }
+
+  return {
+    run: (signal) => forever(einmal, {
+      signal, baseMs: 2000, maxMs: 60_000,
+      onWait: (ms, n) => {
+        const zeile = `Hub nicht erreichbar, neuer Versuch in ${Math.round(ms / 1000)} s`;
+        if (n >= 3) log.warn(zeile); else log.debug(zeile);
+      },
+    }),
+    obsEreignis: (type) => { if (STAND_EREIGNISSE.has(type)) spaeterSenden(); },
+    obsWechsel: spaeterSenden,
+    verbunden: () => verbunden,
+  };
+}

apps/ingest/src/index.ts

@@ -19,6 +19,7 @@ import { readSecrets } from '#twitch/secrets.ts';
 import { streamWechsel } from '#twitch/stream-state.ts';
 import { createAnnouncer, type StreamInfo } from '../../broadcaster/src/golive.ts';
 import { createClipper } from './clips.ts';
+import { createFernanschluss } from './fern.ts';
 import { createRenderer } from './render.ts';
 import { createSpikeDetector } from './spike.ts';
 import { startServer } from './server.ts';
@@ -62,8 +63,9 @@ export async function runIngest(): Promise<void> {
     cfg.obs.url,
     () => readSecrets().obs?.password,
     {
-      onIdentified: () => { state.obsConnected = true; },
-      onClosed: () => { state.obsConnected = false; },
+      onIdentified: () => { state.obsConnected = true; fern?.obsWechsel(); },
+      onClosed: () => { state.obsConnected = false; fern?.obsWechsel(); },
+      onEvent: (type) => fern?.obsEreignis(type),
       onSceneChanged: (scene) => {
         state.obsScene = scene;
         repo.event('obs.scene_changed', { scene }, state.streamId);
@@ -114,6 +116,20 @@ export async function runIngest(): Promise<void> {
     onRawReady: (job) => renderer.enqueue(job),
   });
 
+  // ---- Fernsteuerung vom Pult (Szenen, Clip, Ton). Nur, wenn mit
+  // `abdulive fern:verbinden` eingerichtet - sonst laeuft alles wie vorher.
+  const fernZugang = readSecrets().fern;
+  const fern = fernZugang?.url && fernZugang.key
+    ? createFernanschluss({
+      url: fernZugang.url,
+      key: fernZugang.key,
+      obs,
+      clip: () => clipper.trigger('manual', { login: 'Pult' }),
+    })
+    : null;
+  if (fern) void fern.run(abort.signal);
+  else log.info('Pult-Fernsteuerung nicht eingerichtet (abdulive fern:verbinden)');
+
   // ---- Go-Live-Ankuendigung auf Discord
   const announcer = createAnnouncer({
     cfg: {
@@ -138,6 +154,7 @@ export async function runIngest(): Promise<void> {
       goLive: announcer.lastResult() ?? state.goLive,
       spikeArmed: spikes.isArmed(),
       clipsWaitingForFile: clipper.pendingCount(),
+      pult: fern ? (fern.verbunden() ? 'verbunden' : 'getrennt') : 'nicht eingerichtet',
       renderQueue: renderer.pending(),
       rendering: renderer.currentJob(),
       note: state.chatAnonymous

apps/overlay-server/README.md

@@ -10,8 +10,14 @@ offen und bringt Einrichtung und OAuth-Rückruf unter dieselbe Adresse.
 /callback      OAuth-Rückruf von Twitch                offen, `state` schützt
 /alerts …      die Browser-Sources                     Schlüssel in der URL
 /events        der Ereignisstrom dahinter              Schlüssel in der URL
+/pult          Steuerpult fürs Handy (PWA)             Passwort
+/soundboard/…  Sounds hochladen, ändern, spielen       Passwort (Datei: Schlüssel)
+/fern/…        Leitung zum Stream-PC für OBS           eigener Schlüssel im Kopf
 ```
 
+Der Fern-Schlüssel ist der dritte Zugang und der einzige, der etwas schaltet:
+er steht deshalb nie in einer Adresse, sondern in `authorization: Bearer …`.
+
 ## Server-Sent Events statt WebSocket
 
 [`chat-control.md`](../../docs/projects/chat-control.md) skizziert einen

apps/overlay-server/src/auth.test.ts

@@ -66,3 +66,14 @@ test('zwei Anmeldungen mit demselben Ablauf ergeben dasselbe Cookie', () => {
   // beenden lässt - dafür gibt es den Passwortwechsel.
   assert.equal(sitzungToken(KEY, HASH, IN_30_TAGEN), sitzungToken(KEY, HASH, IN_30_TAGEN));
 });
+
+test('der Schluessel des Stream-PCs kommt aus dem Bearer-Kopf', async () => {
+  // Hier fehlten beim ersten Wurf die Backslashes in der Regex - jeder
+  // richtige Schluessel wurde abgelehnt, und nichts im Log sah danach aus.
+  const { bearer } = await import('./auth.ts');
+  assert.equal(bearer('Bearer 33qg61wQf_ad-x9v'), '33qg61wQf_ad-x9v');
+  assert.equal(bearer('Bearer   abc'), 'abc');
+  assert.equal(bearer('Basic abc'), null);
+  assert.equal(bearer('Bearer'), null);
+  assert.equal(bearer(undefined), null);
+});

apps/overlay-server/src/auth.ts

@@ -35,6 +35,10 @@ export type Zugang = {
   abmelden: () => string;
   overlayKey: () => string;
   neuerOverlayKey: () => string;
+  /** Schluessel des Stream-PCs, im Kopf `authorization: Bearer ...`. */
+  darfFern: (req: http.IncomingMessage) => boolean;
+  fernKey: () => string;
+  neuerFernKey: () => string;
   /** Ist ueberhaupt ein Passwort gesetzt? Ohne das ist alles offen. */
   hatPasswort: () => boolean;
 };
@@ -88,6 +92,11 @@ function signatur(key: Buffer, passwordHash: string, bis: string): string {
     .digest('base64url');
 }
 
+/** Der Schluessel aus `authorization: Bearer ...`, sonst `null`. */
+export function bearer(kopf: string | undefined): string | null {
+  return /^Bearer\s+(\S+)$/.exec(kopf ?? '')?.[1] ?? null;
+}
+
 function cookies(req: http.IncomingMessage): Record<string, string> {
   const out: Record<string, string> = {};
   for (const teil of (req.headers.cookie ?? '').split(';')) {
@@ -114,6 +123,14 @@ export function createZugang(): Zugang {
     return neu;
   }
 
+  function fernKey(): string {
+    const vorhanden = store().fernKey;
+    if (vorhanden) return vorhanden;
+    const neu = crypto.randomBytes(24).toString('base64url');
+    updateSecrets((s) => { s.web = { ...s.web, fernKey: neu }; });
+    return neu;
+  }
+
   /**
    * Schluessel zum Signieren der Sitzungen. Liegt neben dem Passwort, wird
    * einmal gewuerfelt und ueberlebt damit jeden Neustart. Geht er verloren,
@@ -161,6 +178,18 @@ export function createZugang(): Zugang {
 
     abmelden: () => `${COOKIE}=; Path=/; HttpOnly; SameSite=Lax; Max-Age=0`,
     overlayKey: key,
+
+    darfFern(req) {
+      const gegeben = bearer(req.headers.authorization);
+      return Boolean(gegeben && gleich(gegeben, fernKey()));
+    },
+    fernKey,
+    neuerFernKey() {
+      const neu = crypto.randomBytes(24).toString('base64url');
+      updateSecrets((s) => { s.web = { ...s.web, fernKey: neu }; });
+      log.info('Schluessel fuer den Stream-PC neu gewuerfelt - dort neu eintragen');
+      return neu;
+    },
     neuerOverlayKey() {
       const neu = crypto.randomBytes(18).toString('base64url');
       updateSecrets((s) => { s.web = { ...s.web, overlayKey: neu }; });

apps/overlay-server/src/bus.test.ts

@@ -108,3 +108,11 @@ test('abgemeldete Zuhoerer bekommen nichts mehr', () => {
   assert.equal(n, 1);
   assert.equal(bus.clients(), 0);
 });
+
+test('der Schnappschuss traegt den letzten Stand der Liegestuetze', () => {
+  const bus = createBus();
+  assert.deepEqual(schnappschuss(bus).liegestuetze, { offen: 0, gemacht: 0 });
+  bus.publish({ kind: 'liegestuetze', offen: 20, gemacht: 0, dazu: 10, name: 'Kevin' });
+  bus.publish({ kind: 'liegestuetze', offen: 15, gemacht: 5 });
+  assert.deepEqual(schnappschuss(bus).liegestuetze, { offen: 15, gemacht: 5 });
+});

apps/overlay-server/src/bus.ts

@@ -65,6 +65,38 @@ export type StreamEvent = {
   startedAt: string | null;
 };
 
+/**
+ * Neuer Stand der Liegestuetze: offen und in diesem Stream gemacht. `dazu`
+ * und `name` nur bei einer Einloesung - eine Korrektur von Hand soll nicht
+ * aussehen wie eine.
+ */
+export type LiegestuetzeEvent = {
+  kind: 'liegestuetze';
+  offen: number;
+  gemacht: number;
+  dazu?: number;
+  name?: string;
+};
+
+/**
+ * Was der Stream-PC ueber OBS meldet. Kommt ueber die Fernsteuerung
+ * (fern.ts) herein und steht im Schnappschuss, damit das Pult nach dem
+ * Neuverbinden sofort die Szenen kennt.
+ */
+export type ObsStandEvent = {
+  kind: 'obs';
+  /** Ist der Stream-PC ueberhaupt mit dem Hub verbunden? */
+  pc: boolean;
+  /** Und hat er OBS erreicht? */
+  obs: boolean;
+  szenen: string[];
+  aktuell: string | null;
+  /** Toneingaenge, die sich stummschalten lassen. */
+  ton: Array<{ name: string; stumm: boolean }>;
+  /** Laeuft der Wiedergabepuffer? Ohne ihn gibt es keinen Clip. */
+  puffer: boolean;
+};
+
 export type OverlayEvent =
   | ChatEvent
   | AlertEvent
@@ -88,10 +120,27 @@ export type OverlayEvent =
   }
   /** Alles sofort still. Fuer den Panikschalter. */
   | { kind: 'still' }
+  | LiegestuetzeEvent
   | { kind: 'scene'; scene: string }
+  /**
+   * Ein Sound vom Pult. Wie beim Vorlesen geht nur die ID hinaus; die Datei
+   * holt sich die Seite /sounds einzeln, damit Chat und Statusleiste keine
+   * Megabytes mitschleppen.
+   */
+  | { kind: 'sound'; id: string; name: string; laut: number }
+  /** Alle laufenden Sounds abbrechen. Vorlesen bleibt davon unberuehrt. */
+  | { kind: 'sound-stopp' }
+  /** Die Liste der Sounds hat sich geaendert - offene Pulte laden neu. */
+  | { kind: 'sounds-geaendert' }
+  | ObsStandEvent
   | { kind: 'clear'; userId?: string; messageId?: string }
   | { kind: 'beat'; t: number }
-  | { kind: 'state'; stream: StreamEvent; chat: ChatEvent[]; alerts: AlertEvent[] };
+  | {
+    kind: 'state'; stream: StreamEvent; chat: ChatEvent[]; alerts: AlertEvent[];
+    /** Liegestuetze, damit der Zaehler nach dem Neuverbinden stimmt. */
+    liegestuetze: { offen: number; gemacht: number };
+    obs: ObsStandEvent;
+  };
 
 /**
  * So viele Nachrichten bekommt ein frisch verbundenes Overlay mit. Mehr
@@ -118,6 +167,10 @@ export function createBus(): Bus {
   let stream: StreamEvent = {
     kind: 'stream', live: false, title: '', category: '', viewers: 0, startedAt: null,
   };
+  let liegestuetze = { offen: 0, gemacht: 0 };
+  let obs: ObsStandEvent = {
+    kind: 'obs', pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false,
+  };
 
   return {
     publish(ev) {
@@ -131,6 +184,10 @@ export function createBus(): Bus {
         if (alerts.length > KEEP_ALERTS) alerts.shift();
       } else if (ev.kind === 'stream') {
         stream = ev;
+      } else if (ev.kind === 'liegestuetze') {
+        liegestuetze = { offen: ev.offen, gemacht: ev.gemacht };
+      } else if (ev.kind === 'obs') {
+        obs = ev;
       } else if (ev.kind === 'clear') {
         // Geloeschtes verschwindet auch aus dem Rueckblick, sonst holt der
         // naechste Neustart der Browser-Source es zurueck ins Bild.
@@ -153,7 +210,7 @@ export function createBus(): Bus {
       return () => { listeners.delete(fn); };
     },
 
-    snapshot: () => ({ kind: 'state', stream, chat: [...chat], alerts: [...alerts] }),
+    snapshot: () => ({ kind: 'state', stream, chat: [...chat], alerts: [...alerts], liegestuetze, obs }),
     clients: () => listeners.size,
   };
 }

apps/overlay-server/src/fern.test.ts

@@ -0,0 +1,116 @@
+// Die Leitung zum Stream-PC, Hub-Seite. Geprueft wird ohne Netz: die
+// SSE-Antwort ist ein nachgebautes Objekt, das mitschreibt.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { EventEmitter } from 'node:events';
+import type http from 'node:http';
+import { createBus, type ObsStandEvent } from './bus.ts';
+import { createFernsteuerung, standAus } from './fern.ts';
+import { befehlAus, sichererPfad } from './server.ts';
+
+function leitung() {
+  const req = new EventEmitter();
+  const res = Object.assign(new EventEmitter(), {
+    geschrieben: [] as string[],
+    writeHead() { return this; },
+    write(s: string) { this.geschrieben.push(s); return true; },
+    end() { req.emit('close'); },
+  });
+  const befehle = (): Array<Record<string, unknown>> => res.geschrieben
+    .filter((s) => s.startsWith('data: '))
+    .map((s) => JSON.parse(s.slice(6)) as Record<string, unknown>)
+    .filter((b) => b['art'] !== 'beat');
+  return {
+    req: req as unknown as http.IncomingMessage,
+    res: res as unknown as http.ServerResponse,
+    befehle,
+    trennen: () => req.emit('close'),
+  };
+}
+
+function obsStand(bus: ReturnType<typeof createBus>): ObsStandEvent {
+  const s = bus.snapshot();
+  if (s.kind !== 'state') throw new Error('kein Schnappschuss');
+  return s.obs;
+}
+
+test('ohne Stream-PC sagt ein Befehl ehrlich, dass es nicht ging', async () => {
+  const fern = createFernsteuerung(createBus());
+  const a = await fern.senden({ art: 'szene', szene: 'Pause' });
+  assert.equal(a.ok, false);
+  assert.match(a.text, /nicht verbunden/);
+});
+
+test('Befehl geht raus, Antwort kommt zurueck', async () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const l = leitung();
+  fern.annehmen(l.req, l.res);
+  assert.equal(obsStand(bus).pc, true);
+
+  const warten = fern.senden({ art: 'szene', szene: 'Just Chatting' });
+  const [b] = l.befehle();
+  assert.equal(b?.['art'], 'szene');
+  assert.equal(b?.['szene'], 'Just Chatting');
+
+  fern.antwort({ id: b!['id'], ok: true, text: 'Szene: Just Chatting' });
+  assert.deepEqual(await warten, { ok: true, text: 'Szene: Just Chatting' });
+});
+
+test('reisst die Leitung ab, wartet niemand weiter', async () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const l = leitung();
+  fern.annehmen(l.req, l.res);
+  fern.melden({ obs: true, szenen: ['A'], aktuell: 'A', ton: [], puffer: true });
+  assert.deepEqual(obsStand(bus).szenen, ['A']);
+
+  const warten = fern.senden({ art: 'clip' });
+  l.trennen();
+  const a = await warten;
+  assert.equal(a.ok, false);
+  assert.equal(fern.verbunden(), false);
+  // Alte Szenen stehen sonst als Knoepfe da, die nichts mehr tun.
+  assert.deepEqual(obsStand(bus), { kind: 'obs', pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false });
+});
+
+test('ein zweiter PC ersetzt den ersten', () => {
+  const bus = createBus();
+  const fern = createFernsteuerung(bus);
+  const alt = leitung();
+  const neu = leitung();
+  fern.annehmen(alt.req, alt.res);
+  fern.annehmen(neu.req, neu.res);
+  // Das Schliessen der alten Leitung darf die neue nicht als getrennt melden.
+  assert.equal(fern.verbunden(), true);
+  assert.equal(obsStand(bus).pc, true);
+  void fern.senden({ art: 'clip' });
+  assert.equal(neu.befehle().length, 1);
+  assert.equal(alt.befehle().length, 0);
+});
+
+test('der Stand vom PC wird auf die erwartete Form gebracht', () => {
+  assert.deepEqual(standAus({
+    obs: true, szenen: ['A', 7, 'B'], aktuell: 'A',
+    ton: [{ name: 'Mikro', stumm: true }, { name: 3 }, null], puffer: 'ja',
+  }), { obs: true, szenen: ['A', 'B'], aktuell: 'A', ton: [{ name: 'Mikro', stumm: true }], puffer: false });
+  assert.deepEqual(standAus('quatsch'), { obs: false, szenen: [], aktuell: null, ton: [], puffer: false });
+});
+
+test('vom Pult kommen nur bekannte Befehle durch', () => {
+  const f = (o: Record<string, string>): URLSearchParams => new URLSearchParams(o);
+  assert.deepEqual(befehlAus(f({ was: 'szene', szene: 'Pause' })), { art: 'szene', szene: 'Pause' });
+  assert.deepEqual(befehlAus(f({ was: 'stumm', quelle: 'Mikro', stumm: '1' })),
+    { art: 'stumm', quelle: 'Mikro', stumm: true });
+  assert.deepEqual(befehlAus(f({ was: 'clip' })), { art: 'clip' });
+  assert.equal(befehlAus(f({ was: 'szene' })), null);
+  assert.equal(befehlAus(f({ was: 'StopStream' })), null);
+});
+
+test('nach der Anmeldung geht es nur auf bekannte Seiten', () => {
+  assert.equal(sichererPfad('/pult'), '/pult');
+  assert.equal(sichererPfad('https://boese.example'), '/');
+  assert.equal(sichererPfad('//boese.example'), '/');
+  assert.equal(sichererPfad(null), '/');
+});

apps/overlay-server/src/fern.ts

@@ -0,0 +1,155 @@
+// Fernsteuerung fuer OBS, Hub-Seite.
+//
+// OBS laeuft auf dem Stream-PC, das Pult am Handy spricht mit dem Hub. Der
+// Hub kommt an den Stream-PC nicht heran - der steht hinter einem fremden
+// Router. Also waehlt sich der PC beim Hub ein, nicht umgekehrt:
+//
+//   Handy --POST /pult/obs--> Hub --SSE /fern/befehle--> Stream-PC --> OBS
+//   Handy <--SSE /events---- Hub <--POST /fern/stand---- Stream-PC
+//
+// Dieselbe Bauform wie bei den Browser-Sources (SSE statt WebSocket, siehe
+// README), nur mit einem eigenen Schluessel: der fuer OBS darf nur lesen,
+// dieser hier schaltet Szenen um.
+//
+// Jeder Befehl wartet auf eine Antwort vom PC. Ein Knopf, der "erledigt"
+// meldet, waehrend OBS gar nicht erreichbar war, ist am Handy schlimmer als
+// einer, der ehrlich sagt, dass es nicht ging.
+
+import type http from 'node:http';
+import crypto from 'node:crypto';
+import { logger } from '#core/logger.ts';
+import type { Bus, ObsStandEvent } from './bus.ts';
+
+const log = logger('overlay:fern');
+
+const HEARTBEAT_MS = 15_000;
+const ANTWORT_MS = 6_000;
+
+export type FernBefehl =
+  | { art: 'szene'; szene: string }
+  | { art: 'clip' }
+  | { art: 'stumm'; quelle: string; stumm: boolean };
+
+export type FernAntwort = { ok: boolean; text: string };
+
+export type Fernsteuerung = {
+  /** Die SSE-Verbindung des Stream-PCs. Eine neue ersetzt die alte. */
+  annehmen: (req: http.IncomingMessage, res: http.ServerResponse) => void;
+  /** Stand von OBS, wie ihn der PC meldet. */
+  melden: (roh: unknown) => void;
+  antwort: (roh: unknown) => void;
+  senden: (b: FernBefehl) => Promise<FernAntwort>;
+  verbunden: () => boolean;
+};
+
+const LEER: Omit<ObsStandEvent, 'kind'> = {
+  pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false,
+};
+
+/** Was vom PC kommt, auf die erwartete Form bringen. Fremdes faellt weg. */
+export function standAus(roh: unknown): Omit<ObsStandEvent, 'kind' | 'pc'> {
+  const r = (roh && typeof roh === 'object' ? roh : {}) as Record<string, unknown>;
+  const text = (v: unknown): string | null => (typeof v === 'string' && v.length <= 200 ? v : null);
+  const szenen = Array.isArray(r['szenen'])
+    ? r['szenen'].map(text).filter((s): s is string => s !== null).slice(0, 100) : [];
+  const ton = Array.isArray(r['ton'])
+    ? r['ton'].flatMap((t) => {
+      const name = text((t as Record<string, unknown>)?.['name']);
+      return name === null ? [] : [{ name, stumm: (t as Record<string, unknown>)['stumm'] === true }];
+    }).slice(0, 50) : [];
+  return {
+    obs: r['obs'] === true,
+    szenen,
+    aktuell: text(r['aktuell']),
+    ton,
+    puffer: r['puffer'] === true,
+  };
+}
+
+export function createFernsteuerung(bus: Bus): Fernsteuerung {
+  let leitung: http.ServerResponse | null = null;
+  const offen = new Map<string, { fertig: (a: FernAntwort) => void; timer: NodeJS.Timeout }>();
+
+  const veroeffentlichen = (stand: Omit<ObsStandEvent, 'kind'>): void => {
+    bus.publish({ kind: 'obs', ...stand });
+  };
+
+  return {
+    annehmen(req, res) {
+      if (leitung) {
+        // Zwei PCs zugleich hiesse: zwei OBS schalten auf denselben Knopf.
+        // Der neuere gewinnt, meist ist der alte ohnehin eine tote Leitung.
+        log.info('Stream-PC hat sich neu verbunden, alte Leitung geschlossen');
+        leitung.end();
+      }
+      res.writeHead(200, {
+        'content-type': 'text/event-stream; charset=utf-8',
+        'cache-control': 'no-cache, no-transform',
+        connection: 'keep-alive',
+        'x-accel-buffering': 'no',
+      });
+      res.write('retry: 2000\n\n');
+      leitung = res;
+      log.info('Stream-PC verbunden');
+      veroeffentlichen({ ...LEER, pc: true });
+
+      const beat = setInterval(
+        () => res.write(`data: ${JSON.stringify({ art: 'beat', t: Date.now() })}\n\n`),
+        HEARTBEAT_MS);
+      beat.unref();
+
+      const ende = (): void => {
+        clearInterval(beat);
+        if (leitung !== res) return;      // schon durch eine neuere ersetzt
+        leitung = null;
+        log.info('Stream-PC getrennt');
+        veroeffentlichen(LEER);
+        for (const [id, o] of offen) {
+          clearTimeout(o.timer);
+          o.fertig({ ok: false, text: 'Verbindung zum Stream-PC abgerissen.' });
+          offen.delete(id);
+        }
+      };
+      req.on('close', ende);
+      res.on('error', ende);
+    },
+
+    melden(roh) {
+      if (!leitung) return;
+      veroeffentlichen({ pc: true, ...standAus(roh) });
+    },
+
+    antwort(roh) {
+      const r = (roh && typeof roh === 'object' ? roh : {}) as Record<string, unknown>;
+      const id = typeof r['id'] === 'string' ? r['id'] : '';
+      const o = offen.get(id);
+      if (!o) return;
+      offen.delete(id);
+      clearTimeout(o.timer);
+      o.fertig({
+        ok: r['ok'] === true,
+        text: typeof r['text'] === 'string' ? r['text'].slice(0, 300) : '',
+      });
+    },
+
+    senden(b) {
+      const res = leitung;
+      if (!res) {
+        return Promise.resolve({
+          ok: false, text: 'Der Stream-PC ist nicht verbunden. Läuft dort abdulive?',
+        });
+      }
+      const id = crypto.randomBytes(6).toString('hex');
+      return new Promise<FernAntwort>((fertig) => {
+        const timer = setTimeout(() => {
+          offen.delete(id);
+          fertig({ ok: false, text: 'Der Stream-PC hat nicht geantwortet.' });
+        }, ANTWORT_MS);
+        offen.set(id, { fertig, timer });
+        res.write(`data: ${JSON.stringify({ id, ...b })}\n\n`);
+      });
+    },
+
+    verbunden: () => leitung !== null,
+  };
+}

apps/overlay-server/src/server.ts

@@ -8,6 +8,8 @@
 //   /callback      OAuth-Rueckruf von Twitch                 (offen, state schuetzt)
 //   /alerts ...    die Browser-Sources                       (Schluessel)
 //   /events        der SSE-Strom dahinter                    (Schluessel)
+//   /pult          Steuerpult fuers Handy (PWA)              (Passwort)
+//   /fern/...      Leitung zum Stream-PC fuer OBS            (eigener Schluessel)
 //
 // Zum Binden: hinter dem Reverse-Proxy bindet der Dienst auf 0.0.0.0, damit
 // der Proxy aus einem anderen Container drankommt. Das ist der Bruch mit
@@ -18,11 +20,14 @@ import fs from 'node:fs';
 import http from 'node:http';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { paths } from '#core/config.ts';
 import { logger } from '#core/logger.ts';
 import { setupRoutes, type ServerDeps } from '../../ingest/src/server.ts';
 import { createZugang, type Zugang } from './auth.ts';
 import { createBus, type Bus, type OverlayEvent } from './bus.ts';
 import { startDemo } from './demo.ts';
+import { createFernsteuerung, type FernBefehl, type Fernsteuerung } from './fern.ts';
+import { createSoundboard, MAX_BYTES, nameAusDatei, type Soundboard } from './sounds.ts';
 import { TEST_KNOEPFE, testEvent, type TestArt } from './test-events.ts';
 
 const log = logger('overlay');
@@ -46,6 +51,7 @@ const TYPES: Record<string, string> = {
   '.png': 'image/png',
   '.jpg': 'image/jpeg',
   '.woff2': 'font/woff2',
+  '.webmanifest': 'application/manifest+json; charset=utf-8',
 };
 
 /** Die Seiten, die als Browser-Source in OBS eingetragen werden. */
@@ -64,11 +70,18 @@ export const PAGES = [
     title: 'Pausenbild', hint: 'Eigene Szene: "Gleich geht es los", Pause, Ende.' },
   { path: '/tts', file: 'tts.html', w: 600, h: 200,
     title: 'Vorlesen', hint: 'Liest freigegebene Nachrichten vor. Braucht Ton in OBS.' },
+  { path: '/sounds', file: 'sounds.html', w: 400, h: 120,
+    title: 'Soundboard', hint: 'Spielt die Sounds vom Pult. Unsichtbar, braucht Ton in OBS („Audio über OBS steuern“ an).' },
+  { path: '/liegestuetze', file: 'liegestuetze.html', w: 420, h: 200,
+    title: 'Liegestütze', hint: 'Offene und in diesem Stream gemachte Liegestütze. Zählt bei Einlösung hoch, bedienen unten auf dieser Seite.' },
 ] as const;
 
+type LiegestuetzStand = { offen: number; gemacht: number };
+
 export type OverlayServer = {
   bus: Bus;
   zugang: Zugang;
+  fern: Fernsteuerung;
   close: () => void;
   port: number;
 };
@@ -79,6 +92,8 @@ export type OverlayOptions = {
   /** Oeffentliche Adresse ohne Schraegstrich, z. B. https://abdu.dimension47.de */
   publicUrl: string;
   bus?: Bus;
+  /** Wo die Sounds liegen. Vorgabe: neben der Datenbank. */
+  soundsDir?: string;
   /** Wird eingehaengt, damit Einrichtung und Status unter derselben Adresse liegen. */
   setup?: ServerDeps;
   /**
@@ -96,6 +111,15 @@ export type OverlayOptions = {
     /** Die fertige WAV zu einer Nachricht, solange sie abholbar ist. */
     audio: (id: string) => Buffer | undefined;
   };
+  /** Der Liegestuetz-Zaehler. Ohne ihn fehlt der Abschnitt auf der Seite. */
+  liegestuetze?: {
+    stand: () => LiegestuetzStand;
+    /** Negativ heisst gemacht: das Abgezogene zaehlt fuer diesen Stream. */
+    aendern: (n: number) => LiegestuetzStand;
+    /** Korrekturen. Zaehlen nicht als gemacht. */
+    setzen: (n: number) => LiegestuetzStand;
+    gemachtSetzen: (n: number) => LiegestuetzStand;
+  };
 };
 
 export function startOverlayServer(opts: OverlayOptions): OverlayServer {
@@ -103,13 +127,18 @@ export function startOverlayServer(opts: OverlayOptions): OverlayServer {
   const zugang = createZugang();
   // Laeuft die Vorfuehrung, steht hier ihr Abbruch. Ein zweiter Start soll
   // den ersten ersetzen, nicht danebenlaufen.
-  const vorfuehrung = { abbruch: null as AbortController | null };
+  const lz: Laufzeit = {
+    vorfuehrung: { abbruch: null },
+    sounds: createSoundboard(opts.soundsDir ?? path.join(paths.db, 'sounds')),
+    fern: createFernsteuerung(bus),
+    quellen: new Map(),
+  };
   // Hinter einem Proxy muss der Dienst von aussen erreichbar sein. Ohne
   // oeffentliche Adresse bleibt alles wie vorher an der Loopback haengen.
   const host = process.env.BIND_HOST || (opts.publicUrl ? '0.0.0.0' : '127.0.0.1');
 
   const server = http.createServer((req, res) => {
-    void handle(req, res, bus, zugang, opts, vorfuehrung).catch((err: Error) => {
+    void handle(req, res, bus, zugang, opts, lz).catch((err: Error) => {
       log.error(`Anfrage fehlgeschlagen: ${err.message}`);
       if (!res.headersSent) res.writeHead(500, { 'content-type': 'text/plain; charset=utf-8' });
       res.end('Interner Fehler');
@@ -130,23 +159,35 @@ export function startOverlayServer(opts: OverlayOptions): OverlayServer {
         ? ` - Port ${opts.port} ist belegt. Anderer Port: overlay.port in config.yaml.` : ''));
   });
 
-  return { bus, zugang, close: () => server.close(), port: opts.port };
+  return { bus, zugang, fern: lz.fern, close: () => server.close(), port: opts.port };
 }
 
 type Vorfuehrung = { abbruch: AbortController | null };
 
+/** Was der Server zwischen den Anfragen haelt. */
+type Laufzeit = {
+  vorfuehrung: Vorfuehrung;
+  sounds: Soundboard;
+  fern: Fernsteuerung;
+  /** Verbundene Browser-Sources je Seite, z. B. sounds -> 1. */
+  quellen: Map<string, number>;
+};
+
 async function handle(
   req: http.IncomingMessage, res: http.ServerResponse,
-  bus: Bus, zugang: Zugang, opts: OverlayOptions, vorfuehrung: Vorfuehrung
+  bus: Bus, zugang: Zugang, opts: OverlayOptions, lz: Laufzeit
 ): Promise<void> {
   const url = new URL(req.url ?? '/', opts.publicUrl || `http://127.0.0.1:${opts.port}`);
   const p = url.pathname;
+  const { vorfuehrung, sounds, fern } = lz;
 
   // ---- Anmeldung. Bewusst vor allem anderen.
   if (p === '/login' && req.method === 'POST') {
-    const cookie = zugang.anmelden((await readForm(req)).get('passwort') ?? '');
-    if (!cookie) return redirect(res, '/?fehler=1');
-    res.writeHead(303, { location: '/', 'set-cookie': cookie });
+    const form = await readForm(req);
+    const weiter = sichererPfad(form.get('weiter'));
+    const cookie = zugang.anmelden(form.get('passwort') ?? '');
+    if (!cookie) return redirect(res, `${weiter}?fehler=1`);
+    res.writeHead(303, { location: weiter, 'set-cookie': cookie });
     res.end();
     return;
   }
@@ -164,18 +205,54 @@ async function handle(
 
   // ---- Alles Statische ausser den Seiten selbst. Enthaelt keine Daten,
   // also auch keinen Schluessel - sonst muesste ihn jede Seite weiterreichen.
-  if (/\.(css|js|svg|png|jpg|woff2)$/.test(p)) return sendFile(res, p.replace(/^\/+/, ''));
+  if (/\.(css|js|svg|png|jpg|woff2|webmanifest)$/.test(p)) return sendFile(res, p.replace(/^\/+/, ''));
+
+  // ---- Die Leitung zum Stream-PC. Eigener Schluessel im Kopf, nie in der
+  // Adresse: wer ihn hat, schaltet Szenen um.
+  if (p.startsWith('/fern/')) {
+    if (!zugang.darfFern(req)) return send(res, 403, 'text/plain; charset=utf-8', 'Falscher Schluessel.');
+    if (p === '/fern/befehle' && req.method === 'GET') return fern.annehmen(req, res);
+    if ((p === '/fern/stand' || p === '/fern/antwort') && req.method === 'POST') {
+      let roh: unknown;
+      try { roh = JSON.parse((await readBody(req, 64 * 1024)).toString('utf8')); } catch {
+        return send(res, 400, 'text/plain; charset=utf-8', 'Kein JSON.');
+      }
+      if (p === '/fern/stand') fern.melden(roh); else fern.antwort(roh);
+      res.writeHead(204);
+      res.end();
+      return;
+    }
+    return send(res, 404, 'text/plain; charset=utf-8', 'Nicht gefunden');
+  }
 
   // ---- Die Browser-Sources und ihr Datenstrom.
-  const page = PAGES.find((x) => x.path === p || `/${x.file}` === p);
+  // Nur GET: unter /tts und /liegestuetze liegen auch die Bedienknoepfe der
+  // Uebersicht (POST, mit Anmeldung). Ohne die Einschraenkung bekamen die
+  // statt einer Antwort die Overlay-Seite - oder ohne Schluessel ein 403.
+  const page = req.method === 'GET' || req.method === 'HEAD'
+    ? PAGES.find((x) => x.path === p || `/${x.file}` === p) : undefined;
   const audioId = /^\/tts\/audio\/([A-Za-z0-9]+)$/.exec(p)?.[1];
-  if (page || p === '/events' || audioId) {
+  const soundId = /^\/soundboard\/datei\/([a-f0-9]+)$/.exec(p)?.[1];
+  if (page || p === '/events' || audioId || soundId) {
     if (!zugang.darfOverlay(req, url)) {
       return send(res, 403, 'text/plain; charset=utf-8',
         'Kein Zugang. Die Adresse braucht den Schluessel: ?key=...\n' +
         'Sie steht fertig auf der Uebersichtsseite.');
     }
-    if (p === '/events') return sse(req, res, bus);
+    if (p === '/events') return sse(req, res, bus, url, lz.quellen);
+    if (soundId) {
+      const d = sounds.datei(soundId);
+      if (!d) return send(res, 404, 'text/plain; charset=utf-8', 'Nicht (mehr) da.');
+      res.writeHead(200, {
+        'content-type': d.typ, 'content-length': d.daten.length,
+        // Darf zwischengespeichert werden: eine ID gehoert immer zu derselben
+        // Datei, und beim zweiten Druck auf denselben Knopf soll es sofort knallen.
+        'cache-control': 'private, max-age=86400, immutable',
+        'x-content-type-options': 'nosniff',
+      });
+      res.end(d.daten);
+      return;
+    }
     if (audioId) {
       const wav = opts.tts?.audio(audioId);
       if (!wav) return send(res, 404, 'text/plain; charset=utf-8', 'Nicht (mehr) da.');
@@ -190,10 +267,39 @@ async function handle(
 
   // ---- Ab hier nur mit Anmeldung.
   if (!zugang.istAngemeldet(req)) {
+    // Fragen von Skripten (fetch) bekommen eine kurze Antwort statt der
+    // Anmeldeseite, damit das Pult "abgemeldet" sagen kann statt HTML zu parsen.
+    if (req.method !== 'GET' || p.startsWith('/soundboard/') || p.startsWith('/pult/')) {
+      return send(res, 401, 'application/json; charset=utf-8',
+        JSON.stringify({ text: 'Abgemeldet. Bitte neu anmelden.', abgemeldet: true }));
+    }
     return send(res, 401, 'text/html; charset=utf-8',
-      loginPage(opts.channel, url.searchParams.has('fehler')));
+      loginPage(opts.channel, url.searchParams.has('fehler'), p));
   }
 
+  // ---- Das Pult
+  if (p === '/pult' && req.method === 'GET') return sendFile(res, 'pult.html');
+  if (p === '/pult/knoepfe' && req.method === 'GET') {
+    return send(res, 200, 'application/json; charset=utf-8', JSON.stringify({
+      knoepfe: TEST_KNOEPFE, demo: vorfuehrung.abbruch !== null,
+      tts: Boolean(opts.tts), liegestuetze: opts.liegestuetze?.stand() ?? null,
+    }));
+  }
+  if (p === '/pult/obs' && req.method === 'POST') {
+    const form = await readForm(req);
+    const befehl = befehlAus(form);
+    if (!befehl) {
+      return send(res, 400, 'application/json; charset=utf-8',
+        JSON.stringify({ ok: false, text: 'Unbekannter Befehl.' }));
+    }
+    const a = await fern.senden(befehl);
+    if (a.ok) log.info(`Pult -> OBS: ${befehl.art}${'szene' in befehl ? ` "${befehl.szene}"` : ''}`);
+    return send(res, a.ok ? 200 : 502, 'application/json; charset=utf-8', JSON.stringify(a));
+  }
+
+  // ---- Soundboard
+  if (p.startsWith('/soundboard/')) return soundboardRoute(req, res, url, bus, lz);
+
   // ---- Testknoepfe. Die Ereignisse gehen nur an die Browser-Sources: nichts
   // davon landet in der Datenbank, auf Discord oder bei Twitch.
   if (p === '/test' && req.method === 'POST') {
@@ -276,14 +382,45 @@ async function handle(
       JSON.stringify({ wartend: opts.tts.wartend() }));
   }
 
+  // ---- Liegestuetze von Hand korrigieren
+  if (p === '/liegestuetze' && req.method === 'POST' && opts.liegestuetze) {
+    const form = await readForm(req);
+    const was = form.get('was') ?? '';
+    const n = zahlAus(form.get('wert'));
+    const antwort = (text: string, code = 200): void =>
+      send(res, code, 'application/json; charset=utf-8',
+        JSON.stringify({ text, ...opts.liegestuetze!.stand() }));
+
+    if (n === null) return antwort('Keine ganze Zahl.', 400);
+    if (was === 'aendern') {
+      const neu = opts.liegestuetze.aendern(n);
+      return antwort(n < 0
+        ? `${-n} gemacht. Noch ${neu.offen} offen, ${neu.gemacht} in diesem Stream.`
+        : `+${n}, jetzt ${neu.offen} offen.`);
+    }
+    if (n < 0) return antwort('Weniger als 0 geht nicht.', 400);
+    if (was === 'setzen') {
+      return antwort(`Offen auf ${opts.liegestuetze.setzen(n).offen} gesetzt.`);
+    }
+    if (was === 'gemacht-setzen') {
+      return antwort(`Gemacht auf ${opts.liegestuetze.gemachtSetzen(n).gemacht} gesetzt.`);
+    }
+    return antwort('Unbekannt.', 400);
+  }
+
   if (p === '/schluessel/neu' && req.method === 'POST') {
     zugang.neuerOverlayKey();
     return redirect(res, '/');
   }
+  if (p === '/fernschluessel/neu' && req.method === 'POST') {
+    zugang.neuerFernKey();
+    return redirect(res, '/#stream-pc');
+  }
 
   if (p === '/' || p === '/index.html') {
     return send(res, 200, 'text/html; charset=utf-8',
-      indexPage(opts, zugang.overlayKey(), bus, vorfuehrung.abbruch !== null));
+      indexPage(opts, zugang.overlayKey(), bus, vorfuehrung.abbruch !== null,
+        { key: zugang.fernKey(), verbunden: fern.verbunden() }));
   }
 
   if (opts.setup && await setupRoutes(req, res, opts.setup, url)) return;
@@ -293,7 +430,16 @@ async function handle(
 
 // ---------------------------------------------------------------- SSE
 
-function sse(req: http.IncomingMessage, res: http.ServerResponse, bus: Bus): void {
+function sse(
+  req: http.IncomingMessage, res: http.ServerResponse, bus: Bus,
+  url: URL, quellen: Map<string, number>
+): void {
+  // Welche Seite da zuhoert. Nur zum Zaehlen: das Pult will wissen, ob die
+  // Sound-Quelle in OBS ueberhaupt offen ist, bevor es "gespielt" meldet.
+  const roh = url.searchParams.get('quelle') ?? '';
+  const quelle = /^[a-z0-9-]{1,20}$/.test(roh) ? roh : '';
+  if (quelle) quellen.set(quelle, (quellen.get(quelle) ?? 0) + 1);
+
   res.writeHead(200, {
     'content-type': 'text/event-stream; charset=utf-8',
     'cache-control': 'no-cache, no-transform',
@@ -323,7 +469,15 @@ function sse(req: http.IncomingMessage, res: http.ServerResponse, bus: Bus): voi
     HEARTBEAT_MS);
   beat.unref();
 
-  const end = (): void => { clearInterval(beat); unsubscribe(); };
+  // `close` und `error` kommen gern beide - gezaehlt wird nur einmal.
+  let zu = false;
+  const end = (): void => {
+    if (zu) return;
+    zu = true;
+    clearInterval(beat);
+    unsubscribe();
+    if (quelle) quellen.set(quelle, Math.max(0, (quellen.get(quelle) ?? 1) - 1));
+  };
   req.on('close', end);
   res.on('error', end);
 }
@@ -335,8 +489,119 @@ function zustand(bus: Bus) {
   return { live: s.stream.live, chat: s.chat };
 }
 
+// ---------------------------------------------------------------- Pult
+
+/** Formular vom Pult in einen Befehl fuer OBS. Alles andere ist `null`. */
+export function befehlAus(form: URLSearchParams): FernBefehl | null {
+  const was = form.get('was');
+  const szene = form.get('szene');
+  const quelle = form.get('quelle');
+  if (was === 'szene' && szene) return { art: 'szene', szene };
+  if (was === 'clip') return { art: 'clip' };
+  if (was === 'stumm' && quelle) return { art: 'stumm', quelle, stumm: form.get('stumm') === '1' };
+  return null;
+}
+
+async function soundboardRoute(
+  req: http.IncomingMessage, res: http.ServerResponse, url: URL, bus: Bus, lz: Laufzeit
+): Promise<void> {
+  const p = url.pathname;
+  const { sounds } = lz;
+  const json = (code: number, body: Record<string, unknown>): void =>
+    send(res, code, 'application/json; charset=utf-8', JSON.stringify(body));
+  const mitListe = (code: number, text: string): void =>
+    json(code, { text, sounds: sounds.liste(), quellen: lz.quellen.get('sounds') ?? 0 });
+  const geaendert = (): void => bus.publish({ kind: 'sounds-geaendert' });
+  const zuGross = `Zu groß: höchstens ${MAX_BYTES / 1024 / 1024} MB.`;
+
+  if (p === '/soundboard/liste' && req.method === 'GET') return mitListe(200, '');
+  if (req.method !== 'POST') return json(405, { text: 'Nur POST.' });
+
+  if (p === '/soundboard/neu') {
+    // Die Datei kommt roh im Koerper, nicht als Formular: das erspart das
+    // Zerlegen von multipart, und das Pult schickt ohnehin genau eine Datei.
+    if (Number(req.headers['content-length'] ?? 0) > MAX_BYTES) return mitListe(413, zuGross);
+    let daten: Buffer;
+    try { daten = await readBody(req, MAX_BYTES); } catch { return mitListe(413, zuGross); }
+    try {
+      const s = sounds.hinzufuegen(nameAusDatei(url.searchParams.get('name') ?? ''), daten);
+      log.info(`Sound hochgeladen: ${s.name} (${(s.bytes / 1024).toFixed(0)} KB, ${s.typ})`);
+      geaendert();
+      return json(200, { text: `„${s.name}“ ist drin.`, sound: s, sounds: sounds.liste() });
+    } catch (err) {
+      return mitListe(400, (err as Error).message);
+    }
+  }
+
+  const form = await readForm(req);
+  const id = form.get('id') ?? '';
+
+  if (p === '/soundboard/spielen') {
+    const s = sounds.holen(id);
+    if (!s) return mitListe(404, 'Den Sound gibt es nicht mehr.');
+    bus.publish({ kind: 'sound', id: s.id, name: s.name, laut: s.laut });
+    const n = lz.quellen.get('sounds') ?? 0;
+    // Gespielt wird trotzdem: vielleicht ist die Quelle nur kurz weg. Aber
+    // wer auf einen Knopf drueckt und nichts hoert, soll wissen, warum.
+    return json(200, {
+      text: n ? s.name : `${s.name} – aber in OBS ist keine Sound-Quelle verbunden.`,
+      quellen: n,
+    });
+  }
+  if (p === '/soundboard/stopp') {
+    bus.publish({ kind: 'sound-stopp' });
+    return json(200, { text: 'Alle Sounds gestoppt.' });
+  }
+  if (p === '/soundboard/aendern') {
+    const was: Parameters<Soundboard['aendern']>[1] = {};
+    for (const k of ['name', 'emoji', 'farbe'] as const) {
+      const v = form.get(k);
+      if (v !== null) was[k] = v;
+    }
+    const laut = form.get('laut');
+    if (laut !== null) was.laut = Number(laut);
+    if (!sounds.aendern(id, was)) return mitListe(404, 'Den Sound gibt es nicht mehr.');
+    geaendert();
+    return mitListe(200, 'Gespeichert.');
+  }
+  if (p === '/soundboard/loeschen') {
+    const name = sounds.holen(id)?.name;
+    if (!sounds.entfernen(id)) return mitListe(404, 'Den Sound gibt es nicht mehr.');
+    log.info(`Sound geloescht: ${name}`);
+    geaendert();
+    return mitListe(200, `„${name}“ gelöscht.`);
+  }
+  if (p === '/soundboard/verschieben') {
+    if (sounds.verschieben(id, Number(form.get('um')))) geaendert();
+    return mitListe(200, '');
+  }
+  return json(404, { text: 'Nicht gefunden.' });
+}
+
 // ---------------------------------------------------------------- Werkzeug
 
+/**
+ * Wohin es nach der Anmeldung geht. Nur eine feste Liste: ein freies Ziel
+ * machte /login zur Weiterleitung auf beliebige fremde Seiten.
+ */
+export function sichererPfad(roh: string | null | undefined): string {
+  return roh === '/pult' ? '/pult' : '/';
+}
+
+function readBody(req: http.IncomingMessage, max: number): Promise<Buffer> {
+  return new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    let size = 0;
+    req.on('data', (c: Buffer) => {
+      size += c.length;
+      if (size > max) { reject(new Error('Anfrage zu gross')); req.destroy(); return; }
+      chunks.push(c);
+    });
+    req.on('end', () => resolve(Buffer.concat(chunks)));
+    req.on('error', reject);
+  });
+}
+
 function readForm(req: http.IncomingMessage): Promise<URLSearchParams> {
   return new Promise((resolve, reject) => {
     const chunks: Buffer[] = [];
@@ -351,6 +616,13 @@ function readForm(req: http.IncomingMessage): Promise<URLSearchParams> {
   });
 }
 
+/** Eingabe von der Seite in eine ganze Zahl. Alles andere ist `null`. */
+export function zahlAus(roh: string | null | undefined): number | null {
+  if (roh === null || roh === undefined) return null;
+  const s = roh.trim();
+  return /^[+-]?\d{1,6}$/.test(s) ? Number(s) : null;
+}
+
 function redirect(res: http.ServerResponse, to: string): void {
   res.writeHead(303, { location: to });
   res.end();
@@ -427,16 +699,28 @@ const SEITEN_CSS = `
              gap: 1rem; padding: .7rem .9rem; border-top: 1px solid #241f35; }
   .wartend:first-child { border-top: 0; }
   .wartend .hint { max-width: 60ch; word-break: break-word; }
+  .lz-stand { font: 700 3rem/1 "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
+              font-variant-numeric: tabular-nums; margin: .4rem 0 1rem; }
+  .lz-stand small { font-size: 1rem; font-weight: 400; color: #8b84a3; margin: 0 2rem 0 .5rem; }
+  .lz-stand .gemacht { color: #4ade80; }
+  button.lz { margin-left: 0; min-width: 3.2rem; }
+  input.lz { width: 6.5rem; padding: .2rem .6rem; font-size: .85rem; }
   button.tts { margin-left: .4rem; }
 `;
 
-export function loginPage(channel: string, fehler: boolean): string {
+export function loginPage(channel: string, fehler: boolean, weiter = '/'): string {
   return `<!doctype html><html lang="de"><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#0d0b14">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
 <title>Anmelden</title><style>${SEITEN_CSS}
-  body { display: grid; place-items: center; height: 100vh; padding: 0; }
-  form { text-align: left; }
+  body { display: grid; place-items: center; height: 100vh; height: 100dvh; padding: 0 1rem; }
+  form { text-align: left; max-width: 100%; }
+  input[type=password] { max-width: 100%; }
 </style>
 <form method="post" action="/login">
+  <input type="hidden" name="weiter" value="${sichererPfad(weiter)}">
   <h1>abdulive <span>${escape(channel)}</span></h1>
   <p class="lead">${fehler ? '<span class="warn">Passwort stimmt nicht.</span>' : 'Passwort eingeben.'}</p>
   <input type="password" name="passwort" autofocus autocomplete="current-password" size="30">
@@ -451,7 +735,8 @@ export function loginPage(channel: string, fehler: boolean): string {
  * die Seitenliste, und das soll nicht an zwei Stellen stehen.
  */
 export function indexPage(
-  opts: OverlayOptions, key: string, bus: Bus, demoLaeuft = false
+  opts: OverlayOptions, key: string, bus: Bus, demoLaeuft = false,
+  fernInfo: { key: string; verbunden: boolean } = { key: '', verbunden: false }
 ): string {
   // Der Abschnitt erscheint nur, wenn der Hub eine Warteschlange einhaengt -
   // im Alleinbetrieb des Overlay-Servers gibt es nichts freizugeben.
@@ -466,6 +751,31 @@ Kanalpunkte zurück, sofern das verbundene Konto das darf.</p>
   <span class="hint">„Sofort still" bricht auch ab, was gerade gesprochen wird.</span>
 </div>
 <p id="tts-meldung" class="meldung">&nbsp;</p>` : '';
+  const lzFeld = opts.liegestuetze ? `
+<h2>Liegestütze</h2>
+<p class="lead">Jede Einlösung zählt hoch. Mit −1, −5, −10 herunterzählen, wenn
+sie gemacht sind: das zählt für diesen Stream als gemacht. „Setzen“ ist nur
+für Korrekturen und zählt nicht. Die Zuschauer sehen jede Änderung.</p>
+<div class="lz-stand"><span id="lz-offen">${opts.liegestuetze.stand().offen}</span><small>offen</small><span id="lz-gemacht" class="gemacht">${opts.liegestuetze.stand().gemacht}</span><small>gemacht in diesem Stream</small></div>
+<div class="gruppe">
+  <button class="lz" data-um="-10">−10</button>
+  <button class="lz" data-um="-5">−5</button>
+  <button class="lz" data-um="-1">−1</button>
+  <button class="lz" data-um="1">+1</button>
+  <button class="lz" data-um="5">+5</button>
+  <button class="lz" data-um="10">+10</button>
+</div>
+<form class="gruppe" id="lz-form">
+  <input class="lz" id="lz-wert" type="number" min="0" step="1" inputmode="numeric" placeholder="Anzahl">
+  <button type="submit" class="lz">offen setzen</button>
+  <button type="button" class="lz" id="lz-null">offen auf 0</button>
+</form>
+<form class="gruppe" id="lz-gemacht-form">
+  <input class="lz" id="lz-gemacht-wert" type="number" min="0" step="1" inputmode="numeric" placeholder="Anzahl">
+  <button type="submit" class="lz">gemacht setzen</button>
+  <span class="hint">Beginnt bei jedem neuen Stream bei 0.</span>
+</form>
+<p id="lz-meldung" class="meldung">&nbsp;</p>` : '';
   const base = opts.publicUrl || `http://127.0.0.1:${opts.port}`;
   const rows = PAGES.map((p) => {
     const id = `u${p.path.slice(1)}`;
@@ -490,9 +800,27 @@ Kanalpunkte zurück, sofern das verbundene Konto das darf.</p>
       ).join('')}
     </div>`).join('');
 
+  const fernBefehl = `abdulive fern:verbinden ${base} ${fernInfo.key}`;
+
   return `<!doctype html><html lang="de"><meta charset="utf-8">
-<title>Overlay - ${escape(opts.channel)}</title><style>${SEITEN_CSS}</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="theme-color" content="#0d0b14">
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+<title>Overlay - ${escape(opts.channel)}</title><style>${SEITEN_CSS}
+  .pultbox { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
+             border: 1px solid #3a3352; border-radius: .6rem; padding: .9rem 1.1rem;
+             margin: 0 0 2rem; max-width: 74rem; background: #120e1d; }
+  .pultbox a.gross { margin: 0; padding: .45rem 1rem; border-color: #a970ff; color: #fff;
+                     background: #6441a5; font-weight: 600; }
+</style>
 <h1>Overlay <span>${escape(opts.channel)}</span></h1>
+<div class="pultbox">
+  <a class="knopf gross" href="/pult">Pult öffnen</a>
+  <span class="hint">Soundboard, Szenen, Liegestütze und Vorlesen fürs Handy.
+  Dort im Browser-Menü „Zum Startbildschirm hinzufügen“ bzw. „App installieren“ -
+  dann liegt es wie eine App auf dem Handy.</span>
+</div>
 <p class="lead">In OBS je eine Browser-Source anlegen, Adresse eintragen, Breite und
 Höhe setzen. "Quelle beim Unsichtbarwerden deaktivieren" ausschalten, sonst
 verpasst das Overlay alles, was in einer anderen Szene passiert.</p>
@@ -524,6 +852,22 @@ ${testfeld}
 
 ${ttsFeld}
 
+${lzFeld}
+
+<h2 id="stream-pc">Stream-PC verbinden</h2>
+<p class="lead">Damit das Pult Szenen umschalten, Clips speichern und Ton stummschalten
+kann, wählt sich der Stream-PC hier ein. Einmal auf dem Stream-PC in PowerShell
+ausführen, danach <code>abdulive ingest</code> neu starten:</p>
+<p><code id="fernbefehl">${escape(fernBefehl)}</code>
+  <button data-copy="fernbefehl">kopieren</button></p>
+<p class="status"><span class="dot${fernInfo.verbunden ? ' on' : ''}"></span>${
+  fernInfo.verbunden ? 'Stream-PC ist verbunden.' : 'Stream-PC ist gerade nicht verbunden.'}</p>
+<form method="post" action="/fernschluessel/neu">
+  <button type="submit" style="margin-left:0">Schlüssel neu würfeln</button>
+  <span class="hint">Dieser Schlüssel schaltet OBS. Nie in eine Browser-Source eintragen,
+  nie zeigen. Nach dem Würfeln den Befehl oben auf dem Stream-PC erneut ausführen.</span>
+</form>
+
 <h2>Schlüssel</h2>
 <form method="post" action="/schluessel/neu">
   <button type="submit">Schlüssel neu würfeln</button>
@@ -565,11 +909,57 @@ ${ttsFeld}
         ? 'Stream läuft: ' + (ev.stream.title || 'ohne Titel')
         : 'verbunden - kein Stream';
       setzeLive(ev.stream.live);
+      if (ev.liegestuetze) zeigeLiegestuetze(ev.liegestuetze);
     } else if (ev.kind === 'stream') {
       setzeLive(ev.live);
+    } else if (ev.kind === 'liegestuetze') {
+      zeigeLiegestuetze(ev);
     }
   };
 
+  // Der Stand kommt über den Ereignisstrom, damit eine Einlösung auch hier
+  // sofort sichtbar ist und zwei offene Fenster nicht auseinanderlaufen.
+  function zeigeLiegestuetze(st) {
+    for (const [id, n] of [['lz-offen', st.offen], ['lz-gemacht', st.gemacht]]) {
+      const el = document.getElementById(id);
+      if (el && typeof n === 'number') el.textContent = n.toLocaleString('de-DE');
+    }
+  }
+  const lzMeldung = document.getElementById('lz-meldung');
+  async function lzRuf(was, wert) {
+    const res = await fetch('/liegestuetze', {
+      method: 'POST',
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },
+      body: new URLSearchParams({ was, wert: String(wert) }),
+    });
+    const body = await res.json().catch(() => ({ text: 'Fehler ' + res.status }));
+    zeigeLiegestuetze(body);
+    lzMeldung.textContent = body.text || '';
+    lzMeldung.className = 'meldung' + (res.ok ? ' ok' : ' fehler');
+    setTimeout(() => { lzMeldung.innerHTML = '&nbsp;'; lzMeldung.className = 'meldung'; }, 4000);
+  }
+  for (const b of document.querySelectorAll('button.lz[data-um]')) {
+    b.addEventListener('click', () => lzRuf('aendern', b.dataset.um));
+  }
+  const lzForm = document.getElementById('lz-form');
+  if (lzForm) {
+    lzForm.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const feld = document.getElementById('lz-wert');
+      if (feld.value === '') return;
+      lzRuf('setzen', feld.value);
+      feld.value = '';
+    });
+    document.getElementById('lz-null').addEventListener('click', () => lzRuf('setzen', 0));
+    document.getElementById('lz-gemacht-form').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const feld = document.getElementById('lz-gemacht-wert');
+      if (feld.value === '') return;
+      lzRuf('gemacht-setzen', feld.value);
+      feld.value = '';
+    });
+  }
+
   let sagAb;
   async function loese(art) {
     const res = await fetch('/test', {

apps/overlay-server/src/sounds.test.ts

@@ -0,0 +1,89 @@
+// Der Sound-Speicher nimmt Dateien vom Handy an und liefert sie unter der
+// eigenen Adresse wieder aus. Hier wird vor allem geprueft, dass er nur Ton
+// annimmt - und dass die Liste einen Neustart uebersteht.
+
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { createSoundboard, erkenneTyp, nameAusDatei, MAX_BYTES } from './sounds.ts';
+
+const ordner = (): string => fs.mkdtempSync(path.join(os.tmpdir(), 'abdulive-sounds-'));
+
+const MP3 = Buffer.concat([Buffer.from('ID3'), Buffer.alloc(64, 1)]);
+const WAV = Buffer.concat([Buffer.from('RIFF'), Buffer.alloc(4), Buffer.from('WAVE'), Buffer.alloc(32)]);
+const M4A = Buffer.concat([Buffer.alloc(4), Buffer.from('ftypM4A '), Buffer.alloc(32)]);
+
+test('Tontypen werden an den ersten Bytes erkannt', () => {
+  assert.equal(erkenneTyp(MP3), 'audio/mpeg');
+  assert.equal(erkenneTyp(Buffer.from([0xff, 0xfb, 0x90, 0x64, 0, 0, 0, 0, 0, 0, 0, 0])), 'audio/mpeg');
+  assert.equal(erkenneTyp(WAV), 'audio/wav');
+  assert.equal(erkenneTyp(Buffer.concat([Buffer.from('OggS'), Buffer.alloc(20)])), 'audio/ogg');
+  assert.equal(erkenneTyp(M4A), 'audio/mp4');
+});
+
+test('HTML ist kein Ton, auch wenn der Browser es behauptet', () => {
+  // Sonst waere das eine Ablage fuer beliebige Seiten unter der eigenen Adresse.
+  assert.equal(erkenneTyp(Buffer.from('<!doctype html><script>alert(1)</script>')), null);
+  assert.equal(erkenneTyp(Buffer.from('kurz')), null);
+  const sb = createSoundboard(ordner());
+  assert.throws(() => sb.hinzufuegen('x', Buffer.from('<html><body>hallo welt</body></html>')), /Kein Ton/);
+  assert.equal(sb.liste().length, 0);
+});
+
+test('zu gross wird abgelehnt, bevor etwas auf der Platte landet', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const riesig = Buffer.concat([MP3, Buffer.alloc(MAX_BYTES)]);
+  assert.throws(() => sb.hinzufuegen('lied', riesig), /Zu gross/);
+  assert.deepEqual(fs.readdirSync(dir), []);
+});
+
+test('hochladen, abholen, nach Neustart noch da', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const s = sb.hinzufuegen('Tusch', MP3);
+  assert.equal(s.typ, 'audio/mpeg');
+  assert.ok(s.datei.endsWith('.mp3'));
+  assert.deepEqual(sb.datei(s.id)?.daten, MP3);
+
+  const nachNeustart = createSoundboard(dir);
+  assert.equal(nachNeustart.liste()[0]?.name, 'Tusch');
+  assert.deepEqual(nachNeustart.datei(s.id)?.daten, MP3);
+});
+
+test('aendern nimmt nur, was erlaubt ist', () => {
+  const sb = createSoundboard(ordner());
+  const s = sb.hinzufuegen('Tusch', MP3);
+  const neu = sb.aendern(s.id, {
+    name: '  Ba\ndum   tss ', emoji: '🥁', farbe: 'url(javascript:x)', laut: 3,
+  })!;
+  assert.equal(neu.name, 'Ba dum tss');
+  assert.equal(neu.emoji, '🥁');
+  assert.equal(neu.farbe, s.farbe, 'freie Farbwerte waeren CSS-Einschleusung');
+  assert.equal(neu.laut, 1);
+  assert.equal(sb.aendern(s.id, { name: '   ' })?.name, 'Ba dum tss', 'leerer Name behaelt den alten');
+});
+
+test('verschieben und loeschen', () => {
+  const dir = ordner();
+  const sb = createSoundboard(dir);
+  const a = sb.hinzufuegen('A', MP3);
+  const b = sb.hinzufuegen('B', WAV);
+  sb.hinzufuegen('C', M4A);
+  assert.equal(sb.verschieben(b.id, -1), true);
+  assert.deepEqual(sb.liste().map((s) => s.name), ['B', 'A', 'C']);
+  assert.equal(sb.verschieben(b.id, -1), false, 'vor dem ersten ist nichts');
+
+  assert.equal(sb.entfernen(a.id), true);
+  assert.deepEqual(sb.liste().map((s) => s.name), ['B', 'C']);
+  assert.equal(fs.existsSync(path.join(dir, a.datei)), false, 'die Datei geht mit');
+  assert.equal(sb.entfernen(a.id), false);
+});
+
+test('Name aus dem Dateinamen', () => {
+  assert.equal(nameAusDatei('ba_dum_tss.mp3'), 'ba dum tss');
+  assert.equal(nameAusDatei('.mp3'), 'Sound');
+  assert.equal(nameAusDatei('Aufnahme 12.m4a'), 'Aufnahme 12');
+});

apps/overlay-server/src/sounds.ts

@@ -0,0 +1,187 @@
+// Die Sounds fuer das Pult.
+//
+// Hochgeladen wird vom Handy aus, abgespielt in OBS ueber die Browser-Source
+// /sounds. Dazwischen liegt nur dieser Ordner:
+//
+//   <db>/sounds/sounds.json     Name, Emoji, Farbe, Lautstaerke, Reihenfolge
+//   <db>/sounds/<id>.<endung>   die Datei selbst
+//
+// Bewusst neben der Datenbank und nicht in ihr: ein Ordner mit Dateien laesst
+// sich von Hand durchsehen und sichern, und die Datenbank bleibt klein. Und
+// bewusst nicht unter /opt/abdulive: das wird bei jedem Ausrollen ersetzt.
+//
+// Der Dateityp wird an den ersten Bytes erkannt, nicht an dem, was der Browser
+// behauptet. Ausgeliefert wird nur, was hier als Ton erkannt wurde - sonst
+// waere das eine Ablage fuer beliebige Dateien unter der eigenen Adresse.
+
+import crypto from 'node:crypto';
+import fs from 'node:fs';
+import path from 'node:path';
+
+export type Sound = {
+  id: string;
+  name: string;
+  emoji: string;
+  /** Eine der FARBEN unten. Freie Werte gaebe es nur fuer CSS-Einschleusung. */
+  farbe: string;
+  /** 0 bis 1. Multipliziert mit der Lautstaerke der Browser-Source. */
+  laut: number;
+  datei: string;
+  typ: string;
+  bytes: number;
+  seit: string;
+};
+
+export const FARBEN = ['lila', 'tuerkis', 'pink', 'gold', 'gruen', 'rot', 'blau', 'grau'] as const;
+
+/** Groesser ist kein Soundeffekt mehr, sondern ein Lied. */
+export const MAX_BYTES = 8 * 1024 * 1024;
+export const MAX_SOUNDS = 120;
+
+const ENDUNG: Record<string, string> = {
+  'audio/mpeg': '.mp3',
+  'audio/wav': '.wav',
+  'audio/ogg': '.ogg',
+  'audio/webm': '.webm',
+  'audio/mp4': '.m4a',
+};
+
+/**
+ * Tontyp an den ersten Bytes erkennen. `null` heisst: kein Ton, den OBS'
+ * Browser sicher abspielt.
+ */
+export function erkenneTyp(b: Buffer): string | null {
+  if (b.length < 12) return null;
+  const ascii = (von: number, bis: number): string => b.subarray(von, bis).toString('latin1');
+  if (ascii(0, 3) === 'ID3') return 'audio/mpeg';
+  // MPEG-Rahmen ohne ID3-Kopf: 11 gesetzte Synchronbits.
+  if (b[0] === 0xff && (b[1]! & 0xe0) === 0xe0) return 'audio/mpeg';
+  if (ascii(0, 4) === 'RIFF' && ascii(8, 12) === 'WAVE') return 'audio/wav';
+  if (ascii(0, 4) === 'OggS') return 'audio/ogg';
+  if (b[0] === 0x1a && b[1] === 0x45 && b[2] === 0xdf && b[3] === 0xa3) return 'audio/webm';
+  // MP4/M4A: das Kaestchen `ftyp` an Stelle 4. So nimmt auch das iPhone auf.
+  if (ascii(4, 8) === 'ftyp') return 'audio/mp4';
+  return null;
+}
+
+/** Name aus dem Dateinamen: ohne Endung, ohne Unterstriche, nicht zu lang. */
+export function nameAusDatei(datei: string): string {
+  const ohne = datei.replace(/\.[A-Za-z0-9]{1,5}$/, '').replace(/[_]+/g, ' ').trim();
+  return saeubern(ohne) || 'Sound';
+}
+
+function saeubern(s: string, max = 40): string {
+  // Steuerzeichen raus. Angezeigt wird ueber textContent, aber ein
+  // Zeilenumbruch im Namen zerreisst trotzdem jede Kachel.
+  return Array.from(s.replace(/[\u0000-\u001f\u007f]/g, ' ').replace(/\s+/g, ' ').trim())
+    .slice(0, max).join('');
+}
+
+function emojiOk(s: string): string {
+  // Ein Emoji kann aus mehreren Codepoints bestehen (Hautfarbe, Familien).
+  // Zehn reichen fuer alles, was man auf eine Kachel setzt.
+  return Array.from(saeubern(s, 10)).slice(0, 10).join('');
+}
+
+export type Soundboard = {
+  liste: () => Sound[];
+  holen: (id: string) => Sound | undefined;
+  datei: (id: string) => { daten: Buffer; typ: string } | undefined;
+  hinzufuegen: (name: string, daten: Buffer) => Sound;
+  aendern: (id: string, was: Partial<Pick<Sound, 'name' | 'emoji' | 'farbe' | 'laut'>>) => Sound | undefined;
+  entfernen: (id: string) => boolean;
+  /** Um eine Stelle nach vorn (-1) oder hinten (+1). */
+  verschieben: (id: string, um: number) => boolean;
+};
+
+export function createSoundboard(ordner: string): Soundboard {
+  const index = path.join(ordner, 'sounds.json');
+  const sounds: Sound[] = lesen();
+
+  function lesen(): Sound[] {
+    try {
+      const roh = JSON.parse(fs.readFileSync(index, 'utf8')) as { sounds?: Sound[] };
+      return Array.isArray(roh.sounds) ? roh.sounds : [];
+    } catch {
+      return [];
+    }
+  }
+
+  function schreiben(): void {
+    fs.mkdirSync(ordner, { recursive: true });
+    // Erst daneben schreiben, dann umbenennen: stirbt der Prozess mittendrin,
+    // bleibt die alte Liste ganz statt einer halben neuen.
+    const tmp = `${index}.${process.pid}.tmp`;
+    fs.writeFileSync(tmp, JSON.stringify({ sounds }, null, 2));
+    fs.renameSync(tmp, index);
+  }
+
+  const holen = (id: string): Sound | undefined => sounds.find((s) => s.id === id);
+
+  return {
+    liste: () => sounds.map((s) => ({ ...s })),
+    holen,
+
+    datei(id) {
+      const s = holen(id);
+      if (!s) return undefined;
+      try {
+        return { daten: fs.readFileSync(path.join(ordner, s.datei)), typ: s.typ };
+      } catch {
+        return undefined;
+      }
+    },
+
+    hinzufuegen(name, daten) {
+      if (daten.length > MAX_BYTES) {
+        throw new Error(`Zu gross: höchstens ${MAX_BYTES / 1024 / 1024} MB.`);
+      }
+      if (sounds.length >= MAX_SOUNDS) throw new Error(`Höchstens ${MAX_SOUNDS} Sounds.`);
+      const typ = erkenneTyp(daten);
+      if (!typ) throw new Error('Kein Ton, den OBS abspielt. Erlaubt sind MP3, WAV, OGG, WebM und M4A.');
+
+      const id = crypto.randomBytes(6).toString('hex');
+      const datei = `${id}${ENDUNG[typ]}`;
+      fs.mkdirSync(ordner, { recursive: true });
+      fs.writeFileSync(path.join(ordner, datei), daten);
+      const s: Sound = {
+        id, name: saeubern(name) || 'Sound', emoji: '', farbe: FARBEN[sounds.length % FARBEN.length]!,
+        laut: 0.8, datei, typ, bytes: daten.length, seit: new Date().toISOString(),
+      };
+      sounds.push(s);
+      schreiben();
+      return { ...s };
+    },
+
+    aendern(id, was) {
+      const s = holen(id);
+      if (!s) return undefined;
+      if (was.name !== undefined) s.name = saeubern(was.name) || s.name;
+      if (was.emoji !== undefined) s.emoji = emojiOk(was.emoji);
+      if (was.farbe !== undefined && (FARBEN as readonly string[]).includes(was.farbe)) s.farbe = was.farbe;
+      if (was.laut !== undefined && Number.isFinite(was.laut)) {
+        s.laut = Math.round(Math.max(0, Math.min(1, was.laut)) * 100) / 100;
+      }
+      schreiben();
+      return { ...s };
+    },
+
+    entfernen(id) {
+      const i = sounds.findIndex((s) => s.id === id);
+      if (i === -1) return false;
+      const [weg] = sounds.splice(i, 1);
+      schreiben();
+      try { fs.unlinkSync(path.join(ordner, weg!.datei)); } catch { /* schon weg */ }
+      return true;
+    },
+
+    verschieben(id, um) {
+      const i = sounds.findIndex((s) => s.id === id);
+      const ziel = i + Math.sign(um);
+      if (i === -1 || ziel < 0 || ziel >= sounds.length) return false;
+      [sounds[i], sounds[ziel]] = [sounds[ziel]!, sounds[i]!];
+      schreiben();
+      return true;
+    },
+  };
+}

apps/overlay-web/README.md

@@ -17,6 +17,7 @@ und [`client.js`](public/client.js) (Verbindung, Escaping, Emotes).
 | `/status` | 1920×160 | Titel, Kategorie, Zuschauer, Laufzeit. |
 | `/effects` | 1920×1080 | Emote-Regen bei Chat-Spitzen, Konfetti bei Abos und Raids. |
 | `/starting` | 1920×1080 | Pausenbild als eigene Szene. Deckend, nicht durchsichtig. |
+| `/sounds` | 400×120 | Spielt die Sounds vom Pult. Unsichtbar, **mit Ton**. |
 
 Die fertigen Adressen mit Schlüssel stehen auf der Übersichtsseite (`/`).
 
@@ -81,8 +82,49 @@ auf einen echten Raid wartet.
   bleibt das Overlay bei Follows stumm; Abos, Raids und Bits kommen an.
 - **BTTV- und 7TV-Emotes.** Die hängen an einer zweiten API. Twitchs eigene
   Emotes werden angezeigt.
-- **Töne.** Es liegen keine Audiodateien im Repo, und ein Overlay, das
-  ungefragt Krach macht, ist schlimmer als eines, das still ist.
+- **Töne bei Einblendungen.** Es liegen keine Audiodateien im Repo, und ein
+  Overlay, das ungefragt Krach macht, ist schlimmer als eines, das still ist.
+  Sounds gibt es nur auf Knopfdruck, über das Pult.
+
+## Das Pult (`/pult`)
+
+Keine Browser-Source, sondern eine App fürs Handy: wie ein Stream Deck, nur
+ohne Hardware. Mit Passwort, wie die Übersicht. Im Browser des Handys
+„Zum Startbildschirm hinzufügen“ (iPhone) bzw. „App installieren“ (Android),
+dann startet es ohne Adressleiste. `manifest.webmanifest` und `sw.js` machen
+das möglich; der Service Worker hält nur die Hülle vor und beantwortet nie
+einen Knopfdruck aus dem Speicher.
+
+| Reiter | Was |
+|---|---|
+| Sounds | Tasten fürs Soundboard. „+ Sound“ lädt MP3, WAV, OGG, WebM oder M4A vom Handy hoch (bis 8 MB). „Bearbeiten“: Name, Emoji, Farbe, Lautstärke, Reihenfolge, Löschen, am Handy anhören. „Stopp“ bricht alle Sounds ab. |
+| Szenen | OBS-Szenen umschalten, Clip aus dem Wiedergabepuffer speichern, Toneingänge stumm schalten. Braucht den Stream-PC (siehe unten). |
+| Stream | Liegestütze zählen, Vorlesen freigeben, „Sofort still“. |
+| Test | Dieselben Testknöpfe wie auf der Übersicht. |
+
+Die Sonne oben rechts hält den Bildschirm an (Wake Lock), solange das Pult
+offen ist.
+
+**Sounds** liegen auf dem Hub neben der Datenbank (`<db>/sounds/`), nicht im
+Repo und nicht unter `/opt/abdulive` - sie überleben jedes Ausrollen. Der
+Dateityp wird an den ersten Bytes erkannt; was kein Ton ist, wird abgelehnt.
+Gespielt wird in OBS über die Browser-Source `/sounds`, „Audio über OBS
+steuern“ an. Ist sie nicht verbunden, sagt das Pult es in Gelb. Höchstens vier
+Sounds gleichzeitig (`?max=`), `?laut=` dämpft alle.
+
+**Szenen** gehen über den Stream-PC, weil der Hub OBS nicht erreicht. Der PC
+wählt sich mit eigenem Schlüssel beim Hub ein (`apps/ingest/src/fern.ts` und
+`apps/overlay-server/src/fern.ts`). Einmal auf dem Stream-PC:
+
+```
+abdulive fern:verbinden https://abdu.dimension47.de <schlüssel>
+```
+
+Der fertige Befehl steht auf der Übersicht unter „Stream-PC verbinden“.
+Danach `abdulive ingest` neu starten. Jeder Knopf wartet auf die Antwort von
+OBS und sagt ehrlich, wenn es nicht ging.
+
+Die App-Symbole zeichnet `node scripts/make-icons.ts`.
 
 ## Vorlesen (`/tts`)
 

apps/overlay-web/public/client.js

@@ -27,7 +27,11 @@
 
   function verbinde() {
     if (quelle) { try { quelle.close(); } catch (e) { /* schon zu */ } }
-    var url = '/events' + (params.get('key') ? '?key=' + encodeURIComponent(params.get('key')) : '');
+    // `quelle` sagt dem Server, welche Seite zuhoert. Er zaehlt damit nur -
+    // das Pult will wissen, ob die Sound-Quelle in OBS ueberhaupt offen ist.
+    var quelleName = location.pathname.replace(/^\/+|\.html$/g, '') || 'index';
+    var url = '/events?quelle=' + encodeURIComponent(quelleName) +
+      (params.get('key') ? '&key=' + encodeURIComponent(params.get('key')) : '');
     quelle = new EventSource(url);
     letzteNachricht = Date.now();
 

apps/overlay-web/public/liegestuetze.html

@@ -0,0 +1,233 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Liegestütze</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Liegestütze aus Kanalpunkten: groß die offenen, darunter die in diesem
+ * Stream schon gemachten.
+ *
+ * Eine Einlösung zählt hoch und zeigt kurz, wer es war. Wenn Abdu auf der
+ * Übersichtsseite herunterzählt, blinkt die Zahl grün und "gemacht" wächst -
+ * ohne Namen, damit das nicht wie eine Einlösung aussieht.
+ *
+ * In OBS: Browser-Quelle 420x200. Einstellungen in der Adresse:
+ *   ?verstecken=1   ausblenden, solange nichts offen und nichts gemacht ist
+ *   ?gemacht=0      die Zeile "gemacht" weglassen
+ *   ?titel=...      andere Beschriftung als "Liegestütze" */
+#karte {
+  position: absolute;
+  left: 12px; bottom: 12px;
+  display: flex; align-items: center; gap: 18px;
+  padding: 16px 26px 16px 18px;
+  overflow: hidden;
+  transition: opacity .5s, transform .5s, box-shadow .4s, border-color .4s;
+}
+#karte.weg { opacity: 0; transform: translateY(14px); }
+
+.symbol {
+  width: 58px; height: 58px; flex: none;
+  display: grid; place-items: center;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--lila), var(--pink));
+  box-shadow: 0 6px 18px rgba(169, 112, 255, .45);
+}
+.symbol svg { width: 36px; height: 36px; }
+
+.text { min-width: 0; }
+#titel {
+  font: 600 13px/1 var(--font-zahl);
+  letter-spacing: .16em; text-transform: uppercase;
+  color: var(--schrift-leise);
+}
+#zahl {
+  display: block;
+  font: 800 54px/1 var(--font);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -.02em;
+  margin-top: 6px;
+}
+#zahl.erledigt { font-size: 30px; color: var(--gruen); padding: 8px 0 6px; }
+
+#gemacht {
+  display: flex; align-items: center; gap: 6px;
+  margin-top: 7px;
+  font: 600 16px/1 var(--font-zahl);
+  font-variant-numeric: tabular-nums;
+  color: var(--schrift-leise);
+}
+#gemacht b { color: var(--gruen); font-weight: 800; }
+#gemacht svg { width: 15px; height: 15px; color: var(--gruen); }
+#gemacht.aus { display: none; }
+#gemacht.mehr b { animation: gemacht-mehr .9s ease-out; display: inline-block; }
+@keyframes gemacht-mehr {
+  0%   { transform: scale(1.35); }
+  100% { transform: none; }
+}
+
+/* Einlösung: Karte glüht gold, Zahl springt. */
+#karte.mehr { border-color: var(--gold); box-shadow: var(--schatten), 0 0 28px rgba(255, 197, 61, .55); }
+#zahl.springen { animation: springen .6s cubic-bezier(.3, 1.6, .5, 1); }
+@keyframes springen {
+  0%   { transform: scale(1); }
+  40%  { transform: scale(1.22); color: var(--gold); }
+  100% { transform: scale(1); }
+}
+
+/* Korrektur nach unten: kurz grün, das heißt "gemacht". */
+#zahl.weniger { animation: weniger .9s ease-out; }
+@keyframes weniger {
+  0%   { color: var(--gruen); transform: translateY(-4px); }
+  100% { color: inherit; transform: none; }
+}
+
+/* "+5 von Name", steigt über der Karte auf. */
+#plus {
+  position: absolute;
+  left: 12px; bottom: 140px;
+  max-width: 396px;
+  padding: 8px 14px;
+  font: 700 20px/1.1 var(--font);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  opacity: 0;
+}
+#plus b { color: var(--gold); margin-right: 6px; }
+#plus.zeigen { animation: aufsteigen 3.6s ease-out both; }
+@keyframes aufsteigen {
+  0%   { opacity: 0; transform: translateY(16px); }
+  12%  { opacity: 1; transform: none; }
+  80%  { opacity: 1; transform: none; }
+  100% { opacity: 0; transform: translateY(-10px); }
+}
+</style>
+</head>
+<body>
+  <div id="plus" class="glas"></div>
+  <div id="karte" class="glas">
+    <div class="symbol" aria-hidden="true">
+      <!-- Figur im Liegestütz: Kopf, Rücken, Arme, Boden. -->
+      <svg viewBox="0 0 48 48" fill="none" stroke="#fff" stroke-width="3.4"
+           stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="17" r="4" fill="#fff" stroke="none"/>
+        <path d="M15 21 L41 29"/>
+        <path d="M17 22 L15 33"/>
+        <path d="M41 29 L42 33"/>
+        <path d="M6 37 H44" stroke-width="2.4" opacity=".7"/>
+      </svg>
+    </div>
+    <div class="text">
+      <div id="titel" class="kontur">Liegestütze</div>
+      <span id="zahl" class="kontur">0</span>
+      <div id="gemacht" class="kontur">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M5 12.5l4.5 4.5L19 7.5"/>
+        </svg>
+        <span><b>0</b> gemacht</span>
+      </div>
+    </div>
+  </div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var karte = document.getElementById('karte');
+  var zahl = document.getElementById('zahl');
+  var plus = document.getElementById('plus');
+  var gemacht = document.getElementById('gemacht');
+  var gemachtZahl = gemacht.querySelector('b');
+  if (!Overlay.param('gemacht', true)) gemacht.classList.add('aus');
+  var verstecken = Overlay.param('verstecken', false);
+  document.getElementById('titel').textContent = Overlay.param('titel', 'Liegestütze');
+
+  var angezeigt = null;   // was gerade im Bild steht
+  var gemachtBisher = null;
+  var lauf = null;        // laufendes Hochzählen
+  var glimmen = null;
+
+  function schreibe(n) {
+    if (n === 0 && !verstecken) {
+      zahl.textContent = 'erledigt';
+      zahl.classList.add('erledigt');
+    } else {
+      zahl.textContent = Overlay.zahl(n);
+      zahl.classList.remove('erledigt');
+    }
+  }
+
+  function sichtbarkeit() {
+    karte.classList.toggle('weg', verstecken && angezeigt === 0 && !gemachtBisher);
+  }
+
+  function zeigeGemacht(g) {
+    if (typeof g !== 'number') return;
+    var alt = gemachtBisher;
+    gemachtBisher = g;
+    gemachtZahl.textContent = Overlay.zahl(g);
+    if (alt !== null && g > alt) nochmal(gemacht, 'mehr');
+  }
+
+  function nochmal(el, klasse) {
+    el.classList.remove(klasse);
+    void el.offsetWidth;
+    el.classList.add(klasse);
+  }
+
+  /** Zählt sichtbar von der alten zur neuen Zahl hoch. Bei großen Sprüngen
+   *  nicht jede einzelne Zahl, sonst dauert ein Setzen auf 500 ewig. */
+  function hochzaehlen(von, bis) {
+    clearInterval(lauf);
+    var schritte = Math.min(bis - von, 20);
+    var i = 0;
+    lauf = setInterval(function () {
+      i++;
+      schreibe(i >= schritte ? bis : Math.round(von + (bis - von) * i / schritte));
+      if (i >= schritte) clearInterval(lauf);
+    }, 45);
+  }
+
+  function stand(n, einloesung) {
+    if (typeof n !== 'number') return;
+    var alt = angezeigt;
+    angezeigt = n;
+
+    // Erster Stand nach dem Verbinden: einfach hinschreiben, ohne Effekt.
+    if (alt === null || alt === n) { clearInterval(lauf); schreibe(n); return; }
+
+    if (n > alt) {
+      hochzaehlen(alt, n);
+      nochmal(zahl, 'springen');
+      karte.classList.add('mehr');
+      clearTimeout(glimmen);
+      glimmen = setTimeout(function () { karte.classList.remove('mehr'); }, 2500);
+    } else {
+      clearInterval(lauf);
+      schreibe(n);
+      nochmal(zahl, 'weniger');
+    }
+
+    if (einloesung && einloesung.name) {
+      plus.innerHTML = '<b>+' + Overlay.esc(einloesung.dazu) + '</b>' +
+        'von ' + Overlay.esc(einloesung.name);
+      nochmal(plus, 'zeigen');
+    }
+  }
+
+  Overlay.on('state', function (ev) {
+    if (!ev.liegestuetze) return;
+    stand(ev.liegestuetze.offen);
+    zeigeGemacht(ev.liegestuetze.gemacht);
+    sichtbarkeit();
+  });
+  Overlay.on('liegestuetze', function (ev) {
+    stand(ev.offen, ev.dazu ? { dazu: ev.dazu, name: ev.name } : null);
+    zeigeGemacht(ev.gemacht);
+    sichtbarkeit();
+  });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/manifest.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "abdulive Pult",
+  "short_name": "Pult",
+  "description": "Soundboard, Szenen, Liegestütze und Vorlesen für den Stream von abdulive_.",
+  "lang": "de",
+  "id": "/pult",
+  "start_url": "/pult",
+  "scope": "/",
+  "display": "standalone",
+  "orientation": "any",
+  "background_color": "#0d0b14",
+  "theme_color": "#0d0b14",
+  "icons": [
+    { "src": "/icons/pult-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/pult-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+    { "src": "/icons/pult-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+  ],
+  "shortcuts": [
+    { "name": "Szenen", "url": "/pult#szenen", "icons": [{ "src": "/icons/pult-192.png", "sizes": "192x192" }] }
+  ]
+}

apps/overlay-web/public/pult.css

@@ -0,0 +1,408 @@
+/* Das Pult. Fuers Handy gebaut, nicht fuer OBS: anders als die
+ * Browser-Sources hat es einen deckenden Hintergrund und will angefasst
+ * werden. Farben wie in theme.css, damit Pult und Overlay zusammengehoeren.
+ *
+ * Grundregel fuer alles, was man im Stream mit einem Daumen trifft: eine
+ * Taste ist mindestens 48 px hoch, und was passiert ist, sieht man an der
+ * Taste selbst - nicht nur in einer Meldung am Rand. */
+
+:root {
+  color-scheme: dark;
+  --grund: #0d0b14;
+  --flaeche: #171327;
+  --flaeche-2: #1f1a33;
+  --linie: #2c2642;
+  --linie-stark: #3a3352;
+  --schrift: #ece9f6;
+  --leise: #9b94b3;
+
+  --lila: #a970ff;
+  --lila-tief: #6441a5;
+  --tuerkis: #4fd1c5;
+  --pink: #ff4fa3;
+  --gold: #ffc53d;
+  --gruen: #4ade80;
+  --rot: #ef4444;
+  --blau: #60a5fa;
+  --grau: #8b84a3;
+
+  --rund: 16px;
+  --kopf-h: 56px;
+  --reiter-h: 64px;
+  --oben: env(safe-area-inset-top, 0px);
+  --unten: env(safe-area-inset-bottom, 0px);
+
+  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --font-zahl: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html { background: var(--grund); }
+body {
+  margin: 0;
+  min-height: 100vh;
+  min-height: 100dvh;
+  background: var(--grund);
+  color: var(--schrift);
+  font: 16px/1.45 var(--font);
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
+  overscroll-behavior-y: contain;
+}
+
+a { color: var(--lila); }
+code {
+  font: .85em "Cascadia Mono", ui-monospace, Consolas, monospace;
+  background: var(--flaeche-2); padding: .1em .35em; border-radius: 6px;
+}
+svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2;
+      stroke-linecap: round; stroke-linejoin: round; flex: none; }
+[hidden] { display: none !important; }
+
+/* ------------------------------------------------------------ Kopf */
+
+.kopf {
+  position: sticky; top: 0; z-index: 20;
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  height: calc(var(--kopf-h) + var(--oben));
+  padding: var(--oben) 16px 0;
+  background: rgba(13, 11, 20, .88);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom: 1px solid var(--linie);
+}
+.kanal { display: flex; align-items: center; gap: 12px; min-width: 0; }
+.marke { font: 600 17px/1 var(--font-zahl); letter-spacing: -.01em; }
+.marke b { color: var(--lila); font-weight: 700; }
+
+.live {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 10px; border-radius: 999px;
+  font: 600 13px/1.2 var(--font-zahl); font-variant-numeric: tabular-nums;
+  background: rgba(239, 68, 68, .16); color: #ffb3b3;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
+          animation: puls 1.6s ease-in-out infinite; flex: none; }
+.live.aus { background: var(--flaeche-2); color: var(--leise); }
+.live.aus i { background: var(--grau); animation: none; }
+
+.kopf-rechts { display: flex; align-items: center; gap: 8px; }
+.rund {
+  display: grid; place-items: center; width: 40px; height: 40px;
+  border-radius: 50%; border: 1px solid var(--linie); background: transparent;
+  color: var(--leise); cursor: pointer;
+}
+.rund[aria-pressed="true"] { color: var(--gold); border-color: rgba(255, 197, 61, .45);
+                             background: rgba(255, 197, 61, .1); }
+.netz { display: grid; place-items: center; width: 24px; height: 40px; }
+.netz i { width: 10px; height: 10px; border-radius: 50%; background: var(--rot);
+          box-shadow: 0 0 0 4px rgba(239, 68, 68, .15); }
+.netz.an i { background: var(--gruen); box-shadow: 0 0 0 4px rgba(74, 222, 128, .14); }
+
+.banner {
+  position: sticky; top: calc(var(--kopf-h) + var(--oben)); z-index: 19;
+  padding: 10px 16px; font-size: 14px;
+  background: #3b1d1d; color: #ffd0d0; border-bottom: 1px solid #5c2a2a;
+}
+
+@keyframes puls { 50% { opacity: .35; } }
+
+/* ------------------------------------------------------------ Inhalt */
+
+main {
+  padding: 16px 16px calc(var(--reiter-h) + var(--unten) + 88px);
+  max-width: 980px; margin: 0 auto;
+}
+.tab { display: none; }
+.tab.an { display: block; animation: rein .18s ease-out; }
+@keyframes rein { from { opacity: 0; transform: translateY(4px); } }
+
+.leiste { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+.luecke { flex: 1; }
+
+.abschnitt {
+  display: flex; align-items: center; gap: 8px;
+  margin: 26px 0 10px; font: 600 13px/1 var(--font); letter-spacing: .08em;
+  text-transform: uppercase; color: var(--leise);
+}
+.abschnitt:first-child { margin-top: 4px; }
+.klein { font-size: 13px; color: var(--leise); margin: 10px 0; }
+.klein.mitte { text-align: center; }
+
+.karte {
+  background: var(--flaeche); border: 1px solid var(--linie);
+  border-radius: var(--rund); padding: 16px; margin-bottom: 16px;
+}
+.karte .abschnitt { margin-top: 0; }
+
+.hinweis {
+  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px;
+  background: var(--flaeche); border: 1px solid var(--linie);
+}
+.hinweis.warn { background: rgba(255, 197, 61, .08); border-color: rgba(255, 197, 61, .4);
+                color: #ffe2a0; }
+.hinweis.warn a { color: var(--gold); }
+
+/* ------------------------------------------------------------ Knoepfe */
+
+.knopf {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; padding: 0 16px;
+  font: 600 15px/1 var(--font); color: var(--schrift);
+  background: var(--flaeche-2); border: 1px solid var(--linie-stark);
+  border-radius: 12px; cursor: pointer; user-select: none; -webkit-user-select: none;
+  text-decoration: none; touch-action: manipulation;
+  transition: transform .08s, background .15s, border-color .15s;
+}
+.knopf:active { transform: scale(.96); }
+.knopf:disabled { opacity: .4; cursor: not-allowed; transform: none; }
+.knopf.primaer { background: var(--lila-tief); border-color: var(--lila); color: #fff; }
+.knopf.warnung { color: #ffb3b3; border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); }
+.knopf.gross { min-height: 52px; padding: 0 22px; font-size: 16px; }
+.knopf.breit { width: 100%; }
+.knopf[aria-pressed="true"] { background: var(--schrift); color: var(--grund); border-color: var(--schrift); }
+.knopf.wartet { opacity: .7; pointer-events: none; }
+.knopf:focus-visible, .kachel:focus-visible, .szene:focus-visible, .rund:focus-visible,
+.reiter button:focus-visible { outline: 2px solid var(--lila); outline-offset: 2px; }
+
+/* ------------------------------------------------------------ Soundraster */
+
+.raster {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+  gap: 10px;
+}
+@media (min-width: 640px) { .raster { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } }
+
+.kachel {
+  --c: var(--lila);
+  position: relative;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
+  aspect-ratio: 1; padding: 10px 8px; min-width: 0;
+  border-radius: 18px; cursor: pointer; overflow: hidden;
+  color: #fff; font: 600 14px/1.2 var(--font); text-align: center;
+  background:
+    radial-gradient(120% 90% at 30% 0%, color-mix(in oklab, var(--c) 42%, transparent), transparent 70%),
+    color-mix(in oklab, var(--c) 14%, var(--flaeche));
+  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
+  touch-action: manipulation; user-select: none; -webkit-user-select: none;
+  transition: transform .08s ease-out;
+}
+.kachel:active { transform: scale(.93); }
+.kachel .emoji { font-size: 34px; line-height: 1; }
+.kachel .name {
+  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  overflow: hidden; overflow-wrap: anywhere; max-width: 100%;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+}
+.kachel.ohne-emoji .name { font-size: 16px; -webkit-line-clamp: 3; }
+.kachel::after {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+  background: color-mix(in oklab, var(--c) 70%, #fff); opacity: 0;
+}
+.kachel.knall::after { animation: knall .6s ease-out; }
+@keyframes knall { 0% { opacity: .55; } 100% { opacity: 0; } }
+.kachel.knall { animation: wippen .35s ease-out; }
+@keyframes wippen { 40% { transform: scale(1.04); } }
+
+.raster.bearbeiten .kachel { animation: zittern .5s ease-in-out infinite alternate; }
+.raster.bearbeiten .kachel:nth-child(2n) { animation-delay: -.25s; }
+@keyframes zittern { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
+.raster.bearbeiten .kachel::before {
+  content: "✎"; position: absolute; top: 6px; right: 8px; font-size: 14px; opacity: .85;
+}
+
+.kachel[data-farbe="lila"], .farbe[data-farbe="lila"] { --c: var(--lila); }
+.kachel[data-farbe="tuerkis"], .farbe[data-farbe="tuerkis"] { --c: var(--tuerkis); }
+.kachel[data-farbe="pink"], .farbe[data-farbe="pink"] { --c: var(--pink); }
+.kachel[data-farbe="gold"], .farbe[data-farbe="gold"] { --c: var(--gold); }
+.kachel[data-farbe="gruen"], .farbe[data-farbe="gruen"] { --c: var(--gruen); }
+.kachel[data-farbe="rot"], .farbe[data-farbe="rot"] { --c: var(--rot); }
+.kachel[data-farbe="blau"], .farbe[data-farbe="blau"] { --c: var(--blau); }
+.kachel[data-farbe="grau"], .farbe[data-farbe="grau"] { --c: var(--grau); }
+
+.kachel.laedt { opacity: .55; pointer-events: none; }
+.kachel.laedt .name::after { content: " …"; }
+
+.leer { text-align: center; padding: 32px 12px; color: var(--leise); }
+.leer h2 { color: var(--schrift); font-size: 20px; margin: 18px 0 6px; }
+.leer p { max-width: 34ch; margin: 0 auto 20px; }
+.leer-bild { display: inline-grid; grid-template-columns: repeat(3, 34px); gap: 6px; }
+.leer-bild span { aspect-ratio: 1; border-radius: 9px; border: 1.5px dashed var(--linie-stark); }
+.leer-bild span:nth-child(2) { border-color: var(--lila); background: rgba(169, 112, 255, .12); }
+.leer-bild span:nth-child(6) { border-color: var(--tuerkis); background: rgba(79, 209, 197, .1); }
+
+/* ------------------------------------------------------------ Szenen */
+
+.szenen { display: grid; gap: 8px; }
+@media (min-width: 640px) { .szenen { grid-template-columns: repeat(2, 1fr); } }
+.szene {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  min-height: 64px; padding: 0 18px; width: 100%;
+  font: 600 17px/1.2 var(--font); color: var(--schrift); text-align: left;
+  background: var(--flaeche); border: 1px solid var(--linie-stark); border-radius: var(--rund);
+  cursor: pointer; touch-action: manipulation; transition: transform .08s, background .15s;
+}
+.szene:active { transform: scale(.98); }
+.szene .szene-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.szene .marke-an {
+  font: 700 11px/1 var(--font); letter-spacing: .1em; text-transform: uppercase;
+  padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .16); display: none;
+}
+.szene.aktiv { background: var(--lila-tief); border-color: var(--lila); }
+.szene.aktiv .marke-an { display: inline-block; }
+.szene.wartet { opacity: .6; }
+
+.knopf.clip {
+  width: 100%; min-height: 64px; font-size: 17px; border-radius: var(--rund);
+  background: rgba(255, 79, 163, .14); border-color: rgba(255, 79, 163, .55); color: #ffd1e8;
+}
+.knopf.clip svg { width: 24px; height: 24px; }
+
+.ton { display: grid; gap: 8px; }
+.ton-zeile {
+  display: flex; align-items: center; gap: 12px; width: 100%;
+  min-height: 56px; padding: 0 14px 0 16px;
+  font: 500 15px/1.2 var(--font); color: var(--schrift); text-align: left;
+  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 14px; cursor: pointer;
+}
+.ton-zeile .ton-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ton-zeile .ton-stand {
+  font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
+  padding: 7px 10px; border-radius: 8px; background: rgba(74, 222, 128, .14); color: var(--gruen);
+}
+.ton-zeile.stumm { border-color: rgba(239, 68, 68, .45); }
+.ton-zeile.stumm .ton-stand { background: rgba(239, 68, 68, .16); color: #ffb3b3; }
+.ton-zeile.stumm svg { color: #ffb3b3; }
+
+.leer-karte { text-align: center; padding: 28px 18px; }
+.leer-karte h2 { font-size: 18px; margin: 0 0 8px; }
+.leer-karte p { color: var(--leise); margin: 0; font-size: 14px; }
+
+/* ------------------------------------------------------------ Stream */
+
+.lz-zahlen { display: flex; gap: 28px; margin: 4px 0 16px; }
+.lz-zahlen div { display: flex; flex-direction: column; }
+.lz-zahlen b { font: 700 52px/1 var(--font-zahl); font-variant-numeric: tabular-nums; }
+.lz-zahlen span { color: var(--leise); font-size: 13px; margin-top: 4px; }
+.lz-zahlen .gemacht b { color: var(--gruen); }
+.lz-knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.lz-knoepfe .knopf { min-height: 56px; font-size: 18px; font-variant-numeric: tabular-nums; }
+
+.zaehler {
+  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
+  border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; letter-spacing: 0;
+}
+.wartend { display: grid; gap: 10px; margin-bottom: 12px; }
+.wartend .leer-zeile { color: var(--leise); font-size: 14px; }
+.nachricht { background: var(--flaeche-2); border-radius: 12px; padding: 12px; }
+.nachricht .wer { font-weight: 600; color: var(--tuerkis); font-size: 14px; }
+.nachricht .was { margin: 4px 0 10px; overflow-wrap: anywhere; }
+.nachricht .reihe { display: flex; gap: 8px; }
+.nachricht .reihe .knopf { flex: 1; }
+
+.knopf.panik {
+  width: 100%; min-height: 64px; margin-top: 8px; font-size: 18px; border-radius: var(--rund);
+  background: var(--rot); border-color: var(--rot); color: #fff;
+}
+.knopf.panik svg { width: 24px; height: 24px; }
+
+/* ------------------------------------------------------------ Test */
+
+.gruppe { margin-bottom: 4px; }
+.gruppe .knoepfe { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
+.gruppe .knopf { min-height: 48px; font-weight: 500; font-size: 14px; padding: 0 10px; }
+
+/* ------------------------------------------------------------ Reiter */
+
+.reiter {
+  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
+  display: grid; grid-template-columns: repeat(4, 1fr);
+  height: calc(var(--reiter-h) + var(--unten));
+  padding-bottom: var(--unten);
+  background: rgba(18, 14, 29, .94);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-top: 1px solid var(--linie);
+}
+.reiter button {
+  position: relative;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  background: none; border: 0; color: var(--leise); cursor: pointer;
+  font: 500 12px/1 var(--font); touch-action: manipulation;
+}
+.reiter button svg { width: 24px; height: 24px; }
+.reiter button.an { color: var(--schrift); }
+.reiter button.an svg { color: var(--lila); }
+.reiter .punkt { position: absolute; top: 10px; left: calc(50% + 10px); width: 9px; height: 9px;
+                 border-radius: 50%; background: var(--pink); border: 2px solid var(--grund); }
+
+/* ------------------------------------------------------------ Meldung */
+
+.meldung {
+  position: fixed; left: 50%; z-index: 40;
+  bottom: calc(var(--reiter-h) + var(--unten) + 14px);
+  transform: translate(-50%, 12px);
+  max-width: min(92vw, 460px); padding: 12px 16px; border-radius: 12px;
+  background: #241f35; border: 1px solid var(--linie-stark); color: var(--schrift);
+  font-size: 15px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
+  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
+}
+.meldung.an { opacity: 1; transform: translate(-50%, 0); }
+.meldung.ok { border-color: rgba(74, 222, 128, .5); }
+.meldung.fehler { border-color: rgba(255, 197, 61, .6); color: #ffe2a0; }
+
+/* ------------------------------------------------------------ Blatt */
+
+.blatt {
+  width: 100%; max-width: 560px; margin: auto auto 0; padding: 0;
+  border: 1px solid var(--linie-stark); border-bottom: 0; border-radius: 22px 22px 0 0;
+  background: var(--flaeche); color: var(--schrift);
+}
+@media (min-width: 640px) { .blatt { margin: auto; border-radius: 22px; border-bottom: 1px solid var(--linie-stark); } }
+.blatt::backdrop { background: rgba(5, 4, 9, .65); backdrop-filter: blur(2px); }
+.blatt[open] { animation: hoch .22s ease-out; }
+@keyframes hoch { from { transform: translateY(40px); opacity: 0; } }
+.blatt form { padding: 10px 18px calc(18px + var(--unten)); display: grid; gap: 16px; }
+.griff { width: 40px; height: 4px; border-radius: 4px; background: var(--linie-stark); margin: 0 auto; }
+.blatt-kopf { display: flex; gap: 10px; }
+.blatt input:not([type=range]) {
+  font: inherit; color: var(--schrift); background: var(--flaeche-2);
+  border: 1px solid var(--linie-stark); border-radius: 12px; min-height: 52px; padding: 0 14px;
+}
+.blatt input:focus { outline: 2px solid var(--lila); outline-offset: 0; }
+.emoji-feld { width: 64px; text-align: center; font-size: 26px !important; padding: 0 !important; }
+.name-feld { flex: 1; min-width: 0; font-size: 17px !important; }
+.schnell { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
+.schnell button {
+  flex: none; width: 42px; height: 42px; border-radius: 10px; font-size: 22px;
+  background: var(--flaeche-2); border: 1px solid var(--linie); cursor: pointer;
+}
+.feld { display: grid; gap: 10px; }
+.feld-name { font-size: 13px; color: var(--leise); display: flex; justify-content: space-between; }
+.feld-name b { color: var(--schrift); font-variant-numeric: tabular-nums; }
+.farben { display: flex; gap: 8px; flex-wrap: wrap; }
+.farbe {
+  --c: var(--lila);
+  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
+  background: var(--c); border: 3px solid var(--flaeche); box-shadow: 0 0 0 1px var(--linie-stark);
+}
+.farbe[aria-checked="true"] { box-shadow: 0 0 0 2px var(--schrift); }
+input[type=range] { width: 100%; accent-color: var(--lila); height: 32px; }
+.blatt-reihe { display: flex; gap: 8px; align-items: center; }
+.blatt-reihe #b-hoeren { flex: 1; }
+
+/* ------------------------------------------------------------ Abgemeldet */
+
+.abgemeldet {
+  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
+  background: rgba(13, 11, 20, .96); text-align: center; padding: 24px;
+}
+.abgemeldet p { color: var(--leise); max-width: 32ch; margin: 8px auto 22px; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}

apps/overlay-web/public/pult.html

@@ -0,0 +1,195 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#0d0b14">
+<meta name="color-scheme" content="dark">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Pult">
+<title>Pult · abdulive</title>
+<link rel="manifest" href="/manifest.webmanifest">
+<link rel="icon" href="/icons/pult-192.png" type="image/png">
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
+<link rel="stylesheet" href="/pult.css">
+</head>
+<body>
+
+<header class="kopf">
+  <div class="kanal">
+    <span class="marke">abdu<b>live</b></span>
+    <span id="live" class="live aus"><i></i><span id="live-text">offline</span></span>
+  </div>
+  <div class="kopf-rechts">
+    <button id="wach" class="rund" type="button" aria-pressed="false" title="Bildschirm anlassen">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3v2M12 19v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M3 12h2M19 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/><circle cx="12" cy="12" r="4"/></svg>
+    </button>
+    <span id="netz" class="netz" title="Verbindung zum Hub"><i></i></span>
+  </div>
+</header>
+
+<div id="banner" class="banner" hidden></div>
+
+<main>
+  <!-- ======================================================== Sounds -->
+  <section id="tab-sounds" class="tab an" aria-labelledby="nav-sounds">
+    <div class="leiste">
+      <button id="stopp" class="knopf warnung" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>
+        Stopp
+      </button>
+      <span class="luecke"></span>
+      <button id="bearbeiten" class="knopf" type="button" aria-pressed="false">Bearbeiten</button>
+      <label class="knopf primaer" for="datei">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+        Sound
+      </label>
+      <input id="datei" type="file" accept="audio/*,.mp3,.wav,.ogg,.m4a,.webm" multiple hidden>
+    </div>
+    <div id="quelle-fehlt" class="hinweis warn" hidden>
+      In OBS ist keine Sound-Quelle verbunden – die Zuschauer hören nichts. Browser-Source
+      <code>/sounds</code> anlegen, die Adresse steht auf der <a href="/">Übersicht</a>.
+    </div>
+    <div id="raster" class="raster" aria-live="polite"></div>
+    <div id="sounds-leer" class="leer" hidden>
+      <div class="leer-bild" aria-hidden="true">
+        <span></span><span></span><span></span><span></span><span></span><span></span>
+      </div>
+      <h2>Noch keine Sounds</h2>
+      <p>MP3, WAV, OGG oder M4A vom Handy hochladen. Jeder Sound wird eine Taste;
+      ein Druck spielt ihn im Stream.</p>
+      <label class="knopf primaer gross" for="datei">Ersten Sound hinzufügen</label>
+    </div>
+  </section>
+
+  <!-- ======================================================== Szenen -->
+  <section id="tab-szenen" class="tab" aria-labelledby="nav-szenen">
+    <div id="obs-fehlt" class="karte leer-karte" hidden>
+      <h2 id="obs-fehlt-titel">Stream-PC nicht verbunden</h2>
+      <p id="obs-fehlt-text"></p>
+    </div>
+    <div id="obs-da" hidden>
+      <h3 class="abschnitt">Szenen</h3>
+      <div id="szenen" class="szenen"></div>
+
+      <h3 class="abschnitt">Clip</h3>
+      <button id="clip" class="knopf clip" type="button">
+        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h3l2-3h6l2 3h3v12H4z"/><circle cx="12" cy="13" r="3.5"/></svg>
+        <span>Clip speichern</span>
+      </button>
+      <p id="clip-hinweis" class="klein"></p>
+
+      <h3 class="abschnitt">Ton</h3>
+      <div id="ton" class="ton"></div>
+    </div>
+  </section>
+
+  <!-- ======================================================== Stream -->
+  <section id="tab-stream" class="tab" aria-labelledby="nav-stream">
+    <div id="lz-karte" class="karte" hidden>
+      <h3 class="abschnitt">Liegestütze</h3>
+      <div class="lz-zahlen">
+        <div><b id="lz-offen">0</b><span>offen</span></div>
+        <div class="gemacht"><b id="lz-gemacht">0</b><span>gemacht</span></div>
+      </div>
+      <div class="lz-knoepfe">
+        <button class="knopf" data-um="-10" type="button">−10</button>
+        <button class="knopf" data-um="-5" type="button">−5</button>
+        <button class="knopf" data-um="-1" type="button">−1</button>
+        <button class="knopf" data-um="1" type="button">+1</button>
+        <button class="knopf" data-um="5" type="button">+5</button>
+        <button class="knopf" data-um="10" type="button">+10</button>
+      </div>
+      <p class="klein">Minus zählt als gemacht. Korrekturen ohne Zählung auf der <a href="/">Übersicht</a>.</p>
+    </div>
+
+    <div id="tts-karte" class="karte" hidden>
+      <h3 class="abschnitt">Vorlesen <span id="tts-anzahl" class="zaehler" hidden></span></h3>
+      <div id="wartend" class="wartend"></div>
+      <button id="alle-ablehnen" class="knopf" type="button">Alle ablehnen</button>
+    </div>
+
+    <button id="still" class="knopf panik" type="button">
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM16 9l5 6M21 9l-5 6"/></svg>
+      Sofort still
+    </button>
+    <p class="klein mitte">Bricht Vorlesen und alle Sounds ab und leert die Warteschlange.</p>
+  </section>
+
+  <!-- ======================================================== Test -->
+  <section id="tab-test" class="tab" aria-labelledby="nav-test">
+    <div id="test-live" class="hinweis warn" hidden>Der Stream läuft. Was du hier auslöst, sehen die Zuschauer.</div>
+    <p class="klein">Erfundene Ereignisse, nur für die Browser-Sources. Nichts davon landet
+    in der Datenbank, auf Discord oder bei Twitch.</p>
+    <div id="test-gruppen"></div>
+    <h3 class="abschnitt">Dauerbetrieb</h3>
+    <button id="demo" class="knopf breit" type="button" data-art="demo-an">Vorführung starten</button>
+    <p class="klein"><a href="/">Übersicht und OBS-Adressen</a> · <a href="/setup">Einrichtung</a> · <a href="/logout">Abmelden</a></p>
+  </section>
+</main>
+
+<div id="meldung" class="meldung" role="status" aria-live="polite"></div>
+
+<nav class="reiter" aria-label="Bereiche">
+  <button id="nav-sounds" data-tab="sounds" class="an" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="2"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="2"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="2"/></svg>
+    Sounds
+  </button>
+  <button id="nav-szenen" data-tab="szenen" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2.5" y="5" width="19" height="13" rx="2"/><path d="M8 21h8"/></svg>
+    Szenen
+  </button>
+  <button id="nav-stream" data-tab="stream" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V10M10 20V4M16 20v-7M22 20H2"/></svg>
+    Stream
+    <i id="nav-tts" class="punkt" hidden></i>
+  </button>
+  <button id="nav-test" data-tab="test" type="button">
+    <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 3h6M10 3v6l-5 9a2 2 0 0 0 1.8 3h10.4a2 2 0 0 0 1.8-3l-5-9V3"/></svg>
+    Test
+  </button>
+</nav>
+
+<dialog id="blatt" class="blatt">
+  <form method="dialog" id="blatt-form">
+    <div class="griff" aria-hidden="true"></div>
+    <div class="blatt-kopf">
+      <input id="b-emoji" class="emoji-feld" maxlength="10" placeholder="🔊" aria-label="Emoji" autocomplete="off">
+      <input id="b-name" class="name-feld" maxlength="40" placeholder="Name" aria-label="Name" autocomplete="off">
+    </div>
+    <div id="b-schnell" class="schnell" aria-label="Emoji-Vorschläge"></div>
+    <div class="feld">
+      <span class="feld-name">Farbe</span>
+      <div id="b-farben" class="farben" role="radiogroup" aria-label="Farbe"></div>
+    </div>
+    <label class="feld">
+      <span class="feld-name">Lautstärke <b id="b-laut-zahl">80 %</b></span>
+      <input id="b-laut" type="range" min="0" max="100" step="5" value="80">
+    </label>
+    <div class="blatt-reihe">
+      <button type="button" id="b-hoeren" class="knopf">Am Handy anhören</button>
+      <button type="button" id="b-vor" class="knopf" aria-label="Nach vorn">◀</button>
+      <button type="button" id="b-zurueck" class="knopf" aria-label="Nach hinten">▶</button>
+    </div>
+    <div class="blatt-reihe">
+      <button type="button" id="b-loeschen" class="knopf warnung">Löschen</button>
+      <span class="luecke"></span>
+      <button type="button" id="b-abbrechen" class="knopf">Abbrechen</button>
+      <button type="submit" id="b-speichern" class="knopf primaer">Speichern</button>
+    </div>
+  </form>
+</dialog>
+
+<div id="abgemeldet" class="abgemeldet" hidden>
+  <div>
+    <h2>Abgemeldet</h2>
+    <p>Die Anmeldung ist abgelaufen oder das Passwort wurde geändert.</p>
+    <a class="knopf primaer gross" href="/pult">Neu anmelden</a>
+  </div>
+</div>
+
+<script src="/pult.js"></script>
+</body>
+</html>

apps/overlay-web/public/pult.js

@@ -0,0 +1,638 @@
+/* Das Pult: Soundboard, Szenen, Liegestuetze, Vorlesen - am Handy.
+ *
+ * Zwei Wege zum Hub:
+ *   - der Ereignisstrom /events (wie bei den Browser-Sources), damit zwei
+ *     offene Pulte und die Uebersichtsseite nicht auseinanderlaufen;
+ *   - einfache POSTs fuer jeden Druck. Jede Antwort sagt, ob es geklappt
+ *     hat, und genau das steht danach an der Taste.
+ *
+ * Fremder Text (Soundnamen, Szenen, Chat) kommt nur ueber textContent ins
+ * DOM, nie ueber innerHTML. */
+(function () {
+  'use strict';
+
+  var $ = function (id) { return document.getElementById(id); };
+  var FARBEN = ['lila', 'tuerkis', 'pink', 'gold', 'gruen', 'rot', 'blau', 'grau'];
+  var SCHNELL = ['🔊', '😂', '💀', '👏', '🎺', '🥁', '💥', '🚨', '🤡', '😱', '🔥', '❤️', '👀', '🐐', '🫡', '🎉'];
+
+  var zustand = {
+    sounds: [],
+    obs: { pc: false, obs: false, szenen: [], aktuell: null, ton: [], puffer: false },
+    live: false,
+    bearbeiten: false,
+    ttsAn: false,
+  };
+
+  // ------------------------------------------------------------ Hilfen
+
+  function el(tag, klasse, text) {
+    var e = document.createElement(tag);
+    if (klasse) e.className = klasse;
+    if (text !== undefined) e.textContent = text;
+    return e;
+  }
+
+  function tippen() {
+    if (navigator.vibrate) { try { navigator.vibrate(12); } catch (e) { /* egal */ } }
+  }
+
+  var meldungTimer;
+  function melden(text, art) {
+    var m = $('meldung');
+    if (!text) return;
+    m.textContent = text;
+    m.className = 'meldung an' + (art ? ' ' + art : '');
+    clearTimeout(meldungTimer);
+    meldungTimer = setTimeout(function () { m.className = 'meldung'; }, art === 'fehler' ? 4500 : 2200);
+  }
+
+  /** POST mit Formular, Antwort als JSON. Wirft nie; Fehler stehen in `ok`. */
+  function rufen(pfad, felder, roh) {
+    var opts = { method: 'POST', credentials: 'same-origin' };
+    if (roh) {
+      opts.body = roh;
+    } else {
+      opts.headers = { 'content-type': 'application/x-www-form-urlencoded' };
+      opts.body = new URLSearchParams(felder || {});
+    }
+    return fetch(pfad, opts).then(function (res) {
+      return res.json().catch(function () { return { text: 'Fehler ' + res.status }; })
+        .then(function (body) {
+          if (res.status === 401) abgemeldet();
+          body.ok = res.ok && body.ok !== false;
+          return body;
+        });
+    }, function () {
+      return { ok: false, text: 'Keine Verbindung zum Hub.' };
+    });
+  }
+
+  function holen(pfad) {
+    return fetch(pfad, { credentials: 'same-origin' }).then(function (res) {
+      if (res.status === 401) { abgemeldet(); throw new Error('abgemeldet'); }
+      if (!res.ok) throw new Error('Fehler ' + res.status);
+      return res.json();
+    });
+  }
+
+  function abgemeldet() { $('abgemeldet').hidden = false; }
+
+  /** Taste waehrend eines Rufs sperren, damit ein Doppeltipp nicht doppelt schaltet. */
+  function mitWarten(knopf, versprechen) {
+    knopf.classList.add('wartet');
+    return versprechen.then(function (r) { knopf.classList.remove('wartet'); return r; });
+  }
+
+  // ------------------------------------------------------------ Reiter
+
+  function zeigeReiter(name) {
+    var reiter = document.querySelectorAll('.reiter button');
+    for (var i = 0; i < reiter.length; i++) {
+      reiter[i].classList.toggle('an', reiter[i].dataset.tab === name);
+    }
+    var tabs = document.querySelectorAll('.tab');
+    for (var j = 0; j < tabs.length; j++) tabs[j].classList.toggle('an', tabs[j].id === 'tab-' + name);
+    try { localStorage.setItem('pult-reiter', name); } catch (e) { /* privat */ }
+    if (name === 'stream') ladeWartend();
+    window.scrollTo(0, 0);
+  }
+  document.querySelector('.reiter').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-tab]');
+    if (b) { tippen(); zeigeReiter(b.dataset.tab); }
+  });
+
+  // ------------------------------------------------------------ Kopf
+
+  var laufzeitTimer;
+  function zeigeStream(s) {
+    zustand.live = !!s.live;
+    var live = $('live');
+    live.classList.toggle('aus', !s.live);
+    clearInterval(laufzeitTimer);
+    var schreiben = function () {
+      if (!s.live) { $('live-text').textContent = 'offline'; return; }
+      var teile = ['LIVE'];
+      if (s.startedAt) {
+        var min = Math.max(0, Math.floor((Date.now() - Date.parse(s.startedAt)) / 60000));
+        teile.push(Math.floor(min / 60) + ':' + String(min % 60).padStart(2, '0'));
+      }
+      teile.push((s.viewers || 0).toLocaleString('de-DE') + ' 👁');
+      $('live-text').textContent = teile.join(' · ');
+    };
+    schreiben();
+    if (s.live) laufzeitTimer = setInterval(schreiben, 30000);
+    $('test-live').hidden = !s.live;
+    var gesperrt = document.querySelectorAll('#test-gruppen [data-offline]');
+    for (var i = 0; i < gesperrt.length; i++) gesperrt[i].disabled = !!s.live;
+    var demo = $('demo');
+    if (demo.dataset.art === 'demo-an') demo.disabled = !!s.live;
+  }
+
+  // Bildschirm anlassen. Ein Pult, das nach 30 s schwarz wird, ist mitten
+  // im Stream keins. Der Wunsch wird gemerkt; das Handy gibt die Sperre bei
+  // jedem Wegwischen frei, also wird sie beim Zurueckkommen neu geholt.
+  var sperre = null;
+  var wachGewuenscht = false;
+  try { wachGewuenscht = localStorage.getItem('pult-wach') === '1'; } catch (e) { /* privat */ }
+  function wachHolen() {
+    if (!wachGewuenscht || !('wakeLock' in navigator) || document.visibilityState !== 'visible') {
+      $('wach').setAttribute('aria-pressed', String(!!sperre));
+      return;
+    }
+    navigator.wakeLock.request('screen').then(function (s) {
+      sperre = s;
+      $('wach').setAttribute('aria-pressed', 'true');
+      s.addEventListener('release', function () {
+        sperre = null;
+        $('wach').setAttribute('aria-pressed', 'false');
+      });
+    }, function () { $('wach').setAttribute('aria-pressed', 'false'); });
+  }
+  $('wach').addEventListener('click', function () {
+    tippen();
+    if (!('wakeLock' in navigator)) { melden('Dieser Browser kann den Bildschirm nicht wach halten.', 'fehler'); return; }
+    wachGewuenscht = !sperre;
+    try { localStorage.setItem('pult-wach', wachGewuenscht ? '1' : '0'); } catch (e) { /* privat */ }
+    if (sperre) { sperre.release(); sperre = null; melden('Bildschirm darf wieder ausgehen.'); }
+    else { wachHolen(); melden('Bildschirm bleibt an.', 'ok'); }
+  });
+  document.addEventListener('visibilitychange', function () {
+    if (document.visibilityState === 'visible') { wachHolen(); ladeSounds(); }
+  });
+
+  // ------------------------------------------------------------ Sounds
+
+  function ladeSounds() {
+    return holen('/soundboard/liste').then(zeigeSounds, function () { /* Meldung kommt woanders */ });
+  }
+
+  function zeigeSounds(body) {
+    if (body.sounds) zustand.sounds = body.sounds;
+    if (typeof body.quellen === 'number') $('quelle-fehlt').hidden = body.quellen > 0;
+    var raster = $('raster');
+    raster.textContent = '';
+    raster.classList.toggle('bearbeiten', zustand.bearbeiten);
+    $('sounds-leer').hidden = zustand.sounds.length > 0;
+    $('bearbeiten').hidden = zustand.sounds.length === 0;
+    if (!zustand.sounds.length && zustand.bearbeiten) setzeBearbeiten(false);
+
+    zustand.sounds.forEach(function (s) {
+      var k = el('button', 'kachel' + (s.emoji ? '' : ' ohne-emoji'));
+      k.type = 'button';
+      k.dataset.id = s.id;
+      k.dataset.farbe = FARBEN.indexOf(s.farbe) !== -1 ? s.farbe : 'lila';
+      if (s.emoji) k.appendChild(el('span', 'emoji', s.emoji));
+      k.appendChild(el('span', 'name', s.name));
+      k.setAttribute('aria-label', (zustand.bearbeiten ? 'Bearbeiten: ' : 'Abspielen: ') + s.name);
+      raster.appendChild(k);
+    });
+  }
+
+  function knall(id) {
+    var k = document.querySelector('.kachel[data-id="' + CSS.escape(id) + '"]');
+    if (!k) return;
+    k.classList.remove('knall');
+    void k.offsetWidth;               // Animation neu starten, auch beim Doppeltipp
+    k.classList.add('knall');
+  }
+
+  $('raster').addEventListener('click', function (e) {
+    var k = e.target.closest('.kachel');
+    if (!k) return;
+    tippen();
+    var id = k.dataset.id;
+    if (zustand.bearbeiten) { oeffneBlatt(id); return; }
+    knall(id);
+    rufen('/soundboard/spielen', { id: id }).then(function (r) {
+      if (!r.ok) { melden(r.text, 'fehler'); return; }
+      $('quelle-fehlt').hidden = r.quellen > 0;
+      if (!r.quellen) melden(r.text, 'fehler');
+    });
+  });
+
+  $('stopp').addEventListener('click', function () {
+    tippen();
+    rufen('/soundboard/stopp').then(function (r) { melden(r.text, r.ok ? 'ok' : 'fehler'); });
+  });
+
+  function setzeBearbeiten(an) {
+    zustand.bearbeiten = an;
+    $('bearbeiten').setAttribute('aria-pressed', String(an));
+    $('bearbeiten').textContent = an ? 'Fertig' : 'Bearbeiten';
+    $('raster').classList.toggle('bearbeiten', an);
+    var kacheln = document.querySelectorAll('.kachel');
+    for (var i = 0; i < kacheln.length; i++) {
+      var s = zustand.sounds[i];
+      if (s) kacheln[i].setAttribute('aria-label', (an ? 'Bearbeiten: ' : 'Abspielen: ') + s.name);
+    }
+  }
+  $('bearbeiten').addEventListener('click', function () { tippen(); setzeBearbeiten(!zustand.bearbeiten); });
+
+  // Hochladen: roh im Koerper, eine Datei nach der anderen. Parallel waere
+  // schneller, aber dann kommt die Reihenfolge durcheinander.
+  $('datei').addEventListener('change', function (e) {
+    var dateien = Array.prototype.slice.call(e.target.files || []);
+    e.target.value = '';
+    var weiter = Promise.resolve();
+    dateien.forEach(function (d, i) {
+      weiter = weiter.then(function () {
+        melden((dateien.length > 1 ? (i + 1) + '/' + dateien.length + ' · ' : '') + d.name + ' wird hochgeladen …');
+        return rufen('/soundboard/neu?name=' + encodeURIComponent(d.name), null, d).then(function (r) {
+          melden(r.text, r.ok ? 'ok' : 'fehler');
+          if (r.sounds) zeigeSounds(r);
+          // Der erste Sound geht gleich ins Bearbeiten: ein Emoji macht aus
+          // einer Liste von Dateinamen erst ein Pult.
+          if (r.ok && r.sound && dateien.length === 1) oeffneBlatt(r.sound.id);
+        });
+      });
+    });
+  });
+
+  // ------------------------------------------------------------ Blatt
+
+  var blatt = $('blatt');
+  var offenId = null;
+  var probe = null;
+
+  (function baueBlatt() {
+    var schnell = $('b-schnell');
+    SCHNELL.forEach(function (em) {
+      var b = el('button', '', em);
+      b.type = 'button';
+      b.addEventListener('click', function () { $('b-emoji').value = em; tippen(); });
+      schnell.appendChild(b);
+    });
+    var farben = $('b-farben');
+    FARBEN.forEach(function (f) {
+      var b = el('button', 'farbe');
+      b.type = 'button';
+      b.dataset.farbe = f;
+      b.setAttribute('role', 'radio');
+      b.setAttribute('aria-label', f);
+      b.addEventListener('click', function () { waehleFarbe(f); tippen(); });
+      farben.appendChild(b);
+    });
+  })();
+
+  function waehleFarbe(f) {
+    var alle = $('b-farben').children;
+    for (var i = 0; i < alle.length; i++) alle[i].setAttribute('aria-checked', String(alle[i].dataset.farbe === f));
+    blatt.dataset.farbe = f;
+  }
+
+  function oeffneBlatt(id) {
+    var s = zustand.sounds.find(function (x) { return x.id === id; });
+    if (!s) return;
+    offenId = id;
+    $('b-name').value = s.name;
+    $('b-emoji').value = s.emoji || '';
+    $('b-laut').value = Math.round((s.laut ?? 0.8) * 100);
+    $('b-laut-zahl').textContent = $('b-laut').value + ' %';
+    waehleFarbe(s.farbe);
+    $('b-loeschen').textContent = 'Löschen';
+    $('b-loeschen').dataset.sicher = '';
+    if (typeof blatt.showModal === 'function') blatt.showModal(); else blatt.setAttribute('open', '');
+  }
+
+  function schliesseBlatt() {
+    if (probe) { probe.pause(); probe = null; }
+    offenId = null;
+    if (blatt.open) blatt.close();
+  }
+
+  $('b-laut').addEventListener('input', function () {
+    $('b-laut-zahl').textContent = $('b-laut').value + ' %';
+    if (probe) probe.volume = Number($('b-laut').value) / 100;
+  });
+
+  $('b-hoeren').addEventListener('click', function () {
+    if (!offenId) return;
+    if (probe) { probe.pause(); probe = null; $('b-hoeren').textContent = 'Am Handy anhören'; return; }
+    probe = new Audio('/soundboard/datei/' + encodeURIComponent(offenId));
+    probe.volume = Number($('b-laut').value) / 100;
+    $('b-hoeren').textContent = 'Anhören stoppen';
+    probe.onended = function () { probe = null; $('b-hoeren').textContent = 'Am Handy anhören'; };
+    probe.play().catch(function () { melden('Abspielen am Handy ging nicht.', 'fehler'); });
+  });
+
+  function verschieben(um) {
+    if (!offenId) return;
+    tippen();
+    rufen('/soundboard/verschieben', { id: offenId, um: String(um) }).then(function (r) {
+      if (r.sounds) zeigeSounds(r);
+    });
+  }
+  $('b-vor').addEventListener('click', function () { verschieben(-1); });
+  $('b-zurueck').addEventListener('click', function () { verschieben(1); });
+
+  $('b-loeschen').addEventListener('click', function () {
+    var b = $('b-loeschen');
+    // Zweimal tippen statt confirm(): ein Dialog des Browsers sieht am Handy
+    // aus wie eine Fehlermeldung, und er haelt die Seite an.
+    if (!b.dataset.sicher) { b.dataset.sicher = '1'; b.textContent = 'Wirklich löschen?'; tippen(); return; }
+    var id = offenId;
+    schliesseBlatt();
+    rufen('/soundboard/loeschen', { id: id }).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (r.sounds) zeigeSounds(r);
+    });
+  });
+
+  $('b-abbrechen').addEventListener('click', schliesseBlatt);
+  blatt.addEventListener('close', function () { if (probe) { probe.pause(); probe = null; } });
+  blatt.addEventListener('click', function (e) { if (e.target === blatt) schliesseBlatt(); });
+
+  $('blatt-form').addEventListener('submit', function (e) {
+    e.preventDefault();
+    var id = offenId;
+    if (!id) return;
+    var felder = {
+      id: id,
+      name: $('b-name').value,
+      emoji: $('b-emoji').value,
+      farbe: blatt.dataset.farbe || 'lila',
+      laut: String(Number($('b-laut').value) / 100),
+    };
+    schliesseBlatt();
+    rufen('/soundboard/aendern', felder).then(function (r) {
+      if (!r.ok) melden(r.text, 'fehler');
+      if (r.sounds) zeigeSounds(r);
+    });
+  });
+
+  // ------------------------------------------------------------ OBS
+
+  function zeigeObs(o) {
+    zustand.obs = o;
+    var fehlt = !o.pc || !o.obs;
+    $('obs-fehlt').hidden = !fehlt;
+    $('obs-da').hidden = fehlt;
+    if (!o.pc) {
+      $('obs-fehlt-titel').textContent = 'Stream-PC nicht verbunden';
+      $('obs-fehlt-text').textContent = 'Auf dem Stream-PC muss abdulive ingest laufen und einmal mit ' +
+        '„abdulive fern:verbinden …“ eingerichtet sein. Der Befehl steht auf der Übersicht unter „Stream-PC verbinden“.';
+    } else if (!o.obs) {
+      $('obs-fehlt-titel').textContent = 'OBS ist nicht erreichbar';
+      $('obs-fehlt-text').textContent = 'Der Stream-PC ist da, aber OBS nicht. Läuft OBS, und ist ' +
+        'obs-websocket an (Werkzeuge → WebSocket-Servereinstellungen)?';
+    }
+    if (fehlt) return;
+
+    var szenen = $('szenen');
+    szenen.textContent = '';
+    o.szenen.forEach(function (name) {
+      var b = el('button', 'szene' + (name === o.aktuell ? ' aktiv' : ''));
+      b.type = 'button';
+      b.dataset.szene = name;
+      b.appendChild(el('span', 'szene-name', name));
+      b.appendChild(el('span', 'marke-an', 'Im Bild'));
+      szenen.appendChild(b);
+    });
+    if (!o.szenen.length) szenen.appendChild(el('p', 'klein', 'OBS meldet keine Szenen.'));
+
+    $('clip').disabled = !o.puffer;
+    $('clip-hinweis').textContent = o.puffer
+      ? 'Sichert die letzten Sekunden aus dem Wiedergabepuffer, wie !clip im Chat – ohne Abklingzeit.'
+      : 'Der Wiedergabepuffer läuft nicht. In OBS unten rechts „Wiedergabepuffer starten“.';
+
+    var ton = $('ton');
+    ton.textContent = '';
+    o.ton.forEach(function (t) {
+      var b = el('button', 'ton-zeile' + (t.stumm ? ' stumm' : ''));
+      b.type = 'button';
+      b.dataset.quelle = t.name;
+      b.dataset.stumm = t.stumm ? '1' : '0';
+      b.innerHTML = t.stumm
+        ? '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM16 9l5 6M21 9l-5 6"/></svg>'
+        : '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4zM15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13"/></svg>';
+      b.appendChild(el('span', 'ton-name', t.name));
+      b.appendChild(el('span', 'ton-stand', t.stumm ? 'stumm' : 'an'));
+      ton.appendChild(b);
+    });
+    if (!o.ton.length) ton.appendChild(el('p', 'klein', 'Keine Toneingänge gefunden.'));
+  }
+
+  function obsRuf(knopf, felder) {
+    tippen();
+    return mitWarten(knopf, rufen('/pult/obs', felder)).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      return r;
+    });
+  }
+
+  $('szenen').addEventListener('click', function (e) {
+    var b = e.target.closest('.szene');
+    if (!b || b.classList.contains('aktiv')) return;
+    obsRuf(b, { was: 'szene', szene: b.dataset.szene }).then(function (r) {
+      // Sofort umfaerben, nicht erst auf den naechsten Stand warten. Der
+      // Stand vom PC kommt hinterher und rueckt es gerade, falls noetig.
+      if (r.ok) zeigeObs(Object.assign({}, zustand.obs, { aktuell: b.dataset.szene }));
+    });
+  });
+  $('clip').addEventListener('click', function () { obsRuf($('clip'), { was: 'clip' }); });
+  $('ton').addEventListener('click', function (e) {
+    var b = e.target.closest('.ton-zeile');
+    if (!b) return;
+    obsRuf(b, { was: 'stumm', quelle: b.dataset.quelle, stumm: b.dataset.stumm === '1' ? '0' : '1' });
+  });
+
+  // ------------------------------------------------------------ Liegestuetze
+
+  function zeigeLz(st) {
+    if (!st) return;
+    $('lz-karte').hidden = false;
+    if (typeof st.offen === 'number') $('lz-offen').textContent = st.offen.toLocaleString('de-DE');
+    if (typeof st.gemacht === 'number') $('lz-gemacht').textContent = st.gemacht.toLocaleString('de-DE');
+  }
+  document.querySelector('.lz-knoepfe').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-um]');
+    if (!b) return;
+    tippen();
+    mitWarten(b, rufen('/liegestuetze', { was: 'aendern', wert: b.dataset.um })).then(function (r) {
+      zeigeLz(r);
+      if (!r.ok) melden(r.text, 'fehler');
+    });
+  });
+
+  // ------------------------------------------------------------ Vorlesen
+
+  function zeigeWartend(liste) {
+    var box = $('wartend');
+    box.textContent = '';
+    $('tts-anzahl').hidden = !liste.length;
+    $('tts-anzahl').textContent = String(liste.length);
+    $('nav-tts').hidden = !liste.length;
+    $('alle-ablehnen').hidden = liste.length < 2;
+    if (!liste.length) { box.appendChild(el('div', 'leer-zeile', 'Nichts wartet auf Freigabe.')); return; }
+    liste.forEach(function (w) {
+      var n = el('div', 'nachricht');
+      n.appendChild(el('div', 'wer', w.name));
+      n.appendChild(el('div', 'was', w.text));
+      var reihe = el('div', 'reihe');
+      var ja = el('button', 'knopf primaer', 'Vorlesen');
+      ja.type = 'button'; ja.dataset.was = 'freigeben'; ja.dataset.id = w.id;
+      var nein = el('button', 'knopf', 'Ablehnen');
+      nein.type = 'button'; nein.dataset.was = 'ablehnen'; nein.dataset.id = w.id;
+      reihe.appendChild(ja); reihe.appendChild(nein);
+      n.appendChild(reihe);
+      box.appendChild(n);
+    });
+  }
+
+  function ladeWartend() {
+    if (!zustand.ttsAn) return;
+    holen('/tts/wartend').then(function (b) { zeigeWartend(b.wartend || []); }, function () { /* still */ });
+  }
+
+  function ttsRuf(was, id) {
+    tippen();
+    return rufen('/tts', { was: was, id: id || '' }).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (r.wartend) zeigeWartend(r.wartend);
+    });
+  }
+  $('wartend').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-was]');
+    if (b) ttsRuf(b.dataset.was, b.dataset.id);
+  });
+  $('alle-ablehnen').addEventListener('click', function () { ttsRuf('alle-ablehnen'); });
+
+  // Der Panikschalter. Ohne Vorlesen haelt er wenigstens die Sounds an.
+  $('still').addEventListener('click', function () {
+    tippen();
+    if (zustand.ttsAn) { ttsRuf('still'); return; }
+    rufen('/soundboard/stopp').then(function (r) { melden(r.ok ? 'Alles still.' : r.text, r.ok ? 'ok' : 'fehler'); });
+  });
+
+  // ------------------------------------------------------------ Test
+
+  function baueTest(knoepfe, demoLaeuft) {
+    var gruppen = $('test-gruppen');
+    gruppen.textContent = '';
+    var namen = [];
+    knoepfe.forEach(function (k) { if (namen.indexOf(k.gruppe) === -1) namen.push(k.gruppe); });
+    namen.forEach(function (g) {
+      var box = el('div', 'gruppe');
+      box.appendChild(el('h3', 'abschnitt', g));
+      var reihe = el('div', 'knoepfe');
+      knoepfe.filter(function (k) { return k.gruppe === g; }).forEach(function (k) {
+        var b = el('button', 'knopf', k.label);
+        b.type = 'button';
+        b.dataset.art = k.art;
+        if (k.nurOffline) b.dataset.offline = '1';
+        reihe.appendChild(b);
+      });
+      box.appendChild(reihe);
+      gruppen.appendChild(box);
+    });
+    setzeDemo(demoLaeuft);
+  }
+
+  function setzeDemo(laeuft) {
+    var d = $('demo');
+    d.dataset.art = laeuft ? 'demo-aus' : 'demo-an';
+    d.textContent = laeuft ? 'Vorführung stoppen' : 'Vorführung starten';
+    d.disabled = !laeuft && zustand.live;
+  }
+
+  function testRuf(knopf) {
+    tippen();
+    mitWarten(knopf, rufen('/test', { art: knopf.dataset.art })).then(function (r) {
+      melden(r.text, r.ok ? 'ok' : 'fehler');
+      if (typeof r.demo === 'boolean') setzeDemo(r.demo);
+    });
+  }
+  $('test-gruppen').addEventListener('click', function (e) {
+    var b = e.target.closest('button[data-art]');
+    if (b && !b.disabled) testRuf(b);
+  });
+  $('demo').addEventListener('click', function () { testRuf($('demo')); });
+
+  // ------------------------------------------------------------ Strom
+
+  var quelle = null;
+  var zuletzt = Date.now();
+
+  function verbinde() {
+    if (quelle) { try { quelle.close(); } catch (e) { /* zu */ } }
+    quelle = new EventSource('/events?quelle=pult');
+    zuletzt = Date.now();
+    quelle.onopen = function () { setzeNetz(true); };
+    quelle.onerror = function () {
+      setzeNetz(false);
+      // EventSource sagt nicht, ob es an der Anmeldung liegt. Eine kurze
+      // Frage klaert das, sonst stuende "keine Verbindung" fuer immer da.
+      holen('/soundboard/liste').then(function () { /* nur Netz */ }, function () { /* abgemeldet() hat schon */ });
+    };
+    quelle.onmessage = function (e) {
+      zuletzt = Date.now();
+      setzeNetz(true);
+      var ev;
+      try { ev = JSON.parse(e.data); } catch (err) { return; }
+      switch (ev.kind) {
+        case 'state':
+          zeigeStream(ev.stream);
+          if (ev.obs) zeigeObs(ev.obs);
+          if (ev.liegestuetze && !$('lz-karte').hidden) zeigeLz(ev.liegestuetze);
+          break;
+        case 'stream': zeigeStream(ev); break;
+        case 'obs': zeigeObs(ev); break;
+        case 'liegestuetze': if (!$('lz-karte').hidden) zeigeLz(ev); break;
+        case 'sound': knall(ev.id); break;
+        case 'sounds-geaendert': ladeSounds(); break;
+        case 'tts': ladeWartend(); break;
+      }
+    };
+  }
+
+  function setzeNetz(an) {
+    $('netz').classList.toggle('an', an);
+    var banner = $('banner');
+    banner.hidden = an;
+    if (!an) banner.textContent = 'Keine Verbindung zum Hub – verbinde neu …';
+  }
+
+  // Wachhund wie in client.js: der Hub schickt alle 15 s einen Herzschlag.
+  // Am Handy reisst die Leitung beim Wegwischen ab, ohne dass es jemand merkt.
+  setInterval(function () {
+    if (Date.now() - zuletzt > 45000) verbinde();
+  }, 10000);
+  document.addEventListener('visibilitychange', function () {
+    if (document.visibilityState === 'visible' && Date.now() - zuletzt > 20000) verbinde();
+  });
+
+  // ------------------------------------------------------------ Start
+
+  holen('/pult/knoepfe').then(function (b) {
+    baueTest(b.knoepfe || [], !!b.demo);
+    zustand.ttsAn = !!b.tts;
+    $('tts-karte').hidden = !b.tts;
+    if (b.liegestuetze) zeigeLz(b.liegestuetze);
+    ladeWartend();
+  }, function () { /* abgemeldet oder weg - zeigt sich oben */ });
+  ladeSounds();
+  verbinde();
+  wachHolen();
+
+  // Die Liste der Wartenden kommt nicht ueber den Strom (dort steht nur, was
+  // vorgelesen wird). Also nachsehen, solange das Pult offen ist.
+  setInterval(function () {
+    if (document.visibilityState === 'visible') ladeWartend();
+  }, 4000);
+  // Ob die Sound-Quelle in OBS offen ist, aendert sich ohne Ereignis.
+  setInterval(function () {
+    if (document.visibilityState === 'visible') ladeSounds();
+  }, 20000);
+
+  // Ein Reiter in der Adresse (Verknuepfung "Szenen" am App-Symbol) geht vor
+  // dem zuletzt benutzten.
+  var gemerkt = location.hash.slice(1) || null;
+  if (!gemerkt) { try { gemerkt = localStorage.getItem('pult-reiter'); } catch (e) { /* privat */ } }
+  if (gemerkt && $('tab-' + gemerkt)) zeigeReiter(gemerkt);
+
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/sw.js').catch(function (e) {
+      console.warn('[pult] Service Worker nicht registriert', e);
+    });
+  }
+})();

apps/overlay-web/public/sounds.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<html lang="de">
+<head>
+<meta charset="utf-8">
+<title>abdulive - Soundboard</title>
+<link rel="stylesheet" href="/theme.css">
+<style>
+/* Eine reine Tonquelle. Im Stream ist nichts zu sehen - ein Sound, der
+ * zusaetzlich seinen Namen ins Bild schreibt, nimmt ihm die Pointe.
+ *
+ * Mit ?probe=1 steht unten, was gerade klingt. Damit laesst sich im Browser
+ * pruefen, ob ein Druck am Handy hier ankommt, auch ohne Lautsprecher. */
+#liste {
+  position: fixed;
+  left: 12px; right: 12px; bottom: 12px;
+  display: none;
+  flex-direction: column;
+  gap: 6px;
+  font: 600 16px/1.2 var(--font-zahl);
+}
+body.probe #liste { display: flex; }
+.laeuft {
+  padding: 8px 12px;
+  border-radius: 10px;
+  background: var(--tinte-klar);
+  border-left: 4px solid var(--lila);
+}
+.laeuft.fehler { border-left-color: var(--rot); }
+</style>
+</head>
+<body>
+  <div id="liste"></div>
+
+<script src="/client.js"></script>
+<script>
+(function () {
+  'use strict';
+
+  var liste = document.getElementById('liste');
+  var schluessel = Overlay.param('key', '');
+  /* Lautstaerke der ganzen Quelle. Besser im OBS-Mixer regeln; das hier ist
+   * fuer den Fall, dass alle Sounds gemeinsam zu laut aufgenommen sind. */
+  var gesamt = Math.max(0, Math.min(1, Overlay.param('laut', 1)));
+  /* Mehr gleichzeitig klingt nicht mehr nach Soundboard, sondern nach Unfall.
+   * Der aelteste Sound macht dem neuen Platz. */
+  var maxGleichzeitig = Math.max(1, Overlay.param('max', 4));
+  var laufend = [];
+
+  function zeile(name, fehler) {
+    var d = document.createElement('div');
+    d.className = 'laeuft' + (fehler ? ' fehler' : '');
+    d.textContent = name;
+    liste.appendChild(d);
+    return d;
+  }
+
+  function aufhoeren(eintrag) {
+    var i = laufend.indexOf(eintrag);
+    if (i !== -1) laufend.splice(i, 1);
+    try { eintrag.ton.pause(); } catch (e) { /* egal */ }
+    eintrag.ton.removeAttribute('src');
+    if (eintrag.zeile.parentNode) eintrag.zeile.parentNode.removeChild(eintrag.zeile);
+  }
+
+  function alleStopp() {
+    laufend.slice().forEach(aufhoeren);
+  }
+
+  Overlay.on('sound', function (ev) {
+    while (laufend.length >= maxGleichzeitig) aufhoeren(laufend[0]);
+
+    var ton = new Audio('/soundboard/datei/' + encodeURIComponent(ev.id) +
+      (schluessel ? '?key=' + encodeURIComponent(schluessel) : ''));
+    var laut = typeof ev.laut === 'number' ? ev.laut : 0.8;
+    ton.volume = Math.max(0, Math.min(1, laut * gesamt));
+    var eintrag = { ton: ton, zeile: zeile(ev.name || 'Sound') };
+    laufend.push(eintrag);
+
+    ton.onended = function () { aufhoeren(eintrag); };
+    ton.onerror = function () {
+      console.error('[sounds] nicht abspielbar', ev.name, ton.error && ton.error.code);
+      eintrag.zeile.classList.add('fehler');
+      setTimeout(function () { aufhoeren(eintrag); }, 3000);
+    };
+    // Notbremse: ein Sound, der nie "zu Ende" meldet, belegte sonst fuer
+    // immer einen Platz.
+    setTimeout(function () { aufhoeren(eintrag); }, 5 * 60 * 1000);
+
+    var p = ton.play();
+    // Ein normaler Browser spielt erst nach einem Klick in die Seite. OBS
+    // nicht - wer hier im Browser testet, sieht es an der roten Zeile.
+    if (p && p.catch) p.catch(function (e) {
+      console.error('[sounds] Wiedergabe verweigert', e && e.name);
+      eintrag.zeile.textContent = (ev.name || 'Sound') + ' (erst in die Seite klicken)';
+      eintrag.zeile.classList.add('fehler');
+      setTimeout(function () { aufhoeren(eintrag); }, 3000);
+    });
+  });
+
+  Overlay.on('sound-stopp', alleStopp);
+  // Der Panikschalter gilt auch hier.
+  Overlay.on('still', alleStopp);
+  // Nach dem Neuverbinden nichts nachholen: ein Sound zur falschen Zeit ist
+  // schlimmer als keiner.
+  Overlay.on('state', function () { });
+})();
+</script>
+</body>
+</html>

apps/overlay-web/public/sw.js

@@ -0,0 +1,47 @@
+/* Service Worker fuer das Pult.
+ *
+ * Er macht genau zwei Dinge: er ist da, damit sich das Pult als App
+ * installieren laesst, und er haelt die Huelle des Pults vor, damit es ohne
+ * Netz wenigstens aufgeht und "keine Verbindung" sagen kann statt einer
+ * leeren Fehlerseite des Browsers.
+ *
+ * Immer zuerst das Netz: nach dem Ausrollen soll sofort die neue Fassung
+ * laufen, nicht die aus dem Speicher. Alles, was nicht auf der Liste steht -
+ * Ereignisstrom, Knoepfe, Sounds, die Browser-Sources fuer OBS -, fasst er
+ * nicht an. Ein Pult, das einen Szenenwechsel aus dem Speicher beantwortet,
+ * waere schlimmer als gar keins. */
+
+var SPEICHER = 'pult-v1';
+var HUELLE = ['/pult', '/pult.css', '/pult.js', '/manifest.webmanifest',
+  '/icons/pult-192.png', '/icons/apple-touch-icon.png'];
+
+self.addEventListener('install', function () { self.skipWaiting(); });
+
+self.addEventListener('activate', function (e) {
+  e.waitUntil(caches.keys().then(function (namen) {
+    return Promise.all(namen.filter(function (n) { return n !== SPEICHER; })
+      .map(function (n) { return caches.delete(n); }));
+  }).then(function () { return self.clients.claim(); }));
+});
+
+self.addEventListener('fetch', function (e) {
+  var url = new URL(e.request.url);
+  if (e.request.method !== 'GET' || url.origin !== self.location.origin) return;
+  if (HUELLE.indexOf(url.pathname) === -1) return;
+
+  e.respondWith(fetch(e.request).then(function (res) {
+    // Nur Gelungenes merken. Die Anmeldeseite (401) gehoert nicht in den
+    // Speicher, sonst steht sie beim naechsten Funkloch statt des Pults da.
+    if (res.ok) {
+      var kopie = res.clone();
+      caches.open(SPEICHER).then(function (c) { c.put(url.pathname, kopie); });
+    }
+    return res;
+  }, function () {
+    return caches.match(url.pathname).then(function (r) {
+      return r || new Response('Keine Verbindung zum Hub.', {
+        status: 503, headers: { 'content-type': 'text/plain; charset=utf-8' },
+      });
+    });
+  }));
+});

config/config.example.yaml

@@ -130,7 +130,7 @@ loyalty:
 # Belohnungen, die hier nicht stehen, werden protokolliert und sonst in Ruhe
 # gelassen - nicht jede Belohnung geht das Toolkit etwas an.
 #
-# Aktionen: konfetti | emote-regen | einblendung | tts | nichts
+# Aktionen: konfetti | emote-regen | einblendung | tts | liegestuetze | nichts
 rewards:
   enabled: false              # aus, bis hier bewusst Belohnungen stehen
   belohnungen: []
@@ -141,6 +141,9 @@ rewards:
   #   - titel: Nachricht vorlesen
   #     aktion: tts
   #     maxZeichen: 150
+  #   - titel: 5 Liegestütze
+  #     aktion: liegestuetze
+  #     anzahl: 5               # so viele kommen je Einloesung dazu
   tts:
     # Vorgabe ist die Freigabe von Hand, und das aus gutem Grund: Kanalpunkte
     # sammeln sich beim Zugucken von allein an und sind damit kaum eine
@@ -155,10 +158,10 @@ rewards:
     # Gesprochen wird im Hub mit Piper, nicht im Browser - dort haengt die
     # Stimme am Rechner, der streamt. Name einer Datei unter models/piper/
     # (ohne .onnx) oder ein absoluter Pfad. Einrichten: scripts/install-piper.sh
-    stimme: de_DE-mls-medium
-    # mls hat 236 Sprecher in einem Modell; hier steht die Nummer (0-235).
-    # Bei Stimmen mit nur einem Sprecher weglassen.
-    sprecher: 0
+    stimme: de_DE-thorsten-medium
+    # Nur bei Stimmen mit mehreren Sprechern, z. B. de_DE-mls-medium (0-235).
+    # Die klang im Stream allerdings verwaschen.
+    # sprecher: 0
 
 # Overlay-Server. Zugleich die einzige Tuer nach aussen, wenn der Dienst
 # zentral laeuft: Uebersicht, Einrichtung und OAuth-Rueckruf haengen daran.

docs/handoff.md

@@ -1,6 +1,6 @@
 # Übergabe
 
-Stand **2026-09-23**, letztes gebautes Paket 0.5.4. Wer hier weitermacht,
+Stand **2026-10-18**, letztes gebautes Paket 0.5.4. Wer hier weitermacht,
 liest zuerst diese Seite, dann [`07-mvp-plan.md`](07-mvp-plan.md). Für Abdu
 selbst gibt es das [Handbuch](handbuch/handbuch.pdf).
 
@@ -20,7 +20,7 @@ Auslöser bis zum fertigen Short steht im Code vollständig. Geprüft ist sie
 | S5 Onboarding + Sichtung | offen | |
 | S6 Erstchatter-Begrüßung | offen | |
 
-280 Tests, alle grün. Was noch fehlt, steht vollständig in
+288 Tests, alle grün. Was noch fehlt, steht vollständig in
 [`offene-punkte.md`](offene-punkte.md).
 
 ## Neu: der Dienst läuft zentral
@@ -83,9 +83,18 @@ Durchlauf, im Entwurfsmodus.
 
 ## Das Overlay steht
 
-Fünf Browser-Sources unter `apps/overlay-web/public`, ausgeliefert vom
-Overlay-Server: Einblendungen, Chat, Statusleiste, Effekte, Pausenbild. Kein
-Build, kein Framework - OBS lädt die Dateien direkt.
+Browser-Sources unter `apps/overlay-web/public`, ausgeliefert vom
+Overlay-Server: Einblendungen, Chat, Kamerarahmen, Statusleiste, Effekte,
+Pausenbild, Vorlesen, Liegestütze. Kein Build, kein Framework - OBS lädt die
+Dateien direkt.
+
+**Nächste Sitzung: das Overlay wird neu gemacht.** Gestaltung von Grund auf,
+nicht nur der Kamerarahmen. Was bleiben sollte, weil es Fehler verhindert, die
+man erst im Stream bemerkt: `client.js` (Neuverbinden, Wachhund,
+Schnappschuss, `Overlay.esc`), der durchsichtige Hintergrund und die Kontur
+aus `theme.css`, `?probe=1` zum Ansehen im Browser. Die Ereignisse auf dem Bus
+(`apps/overlay-server/src/bus.ts`) sind die Schnittstelle, an der sich die
+neuen Seiten festhalten können.
 
 Die Ereignisse kommen über Server-Sent Events statt WebSocket. Warum, und was
 gegen die tote Browser-Source nach einem Neustart getan ist, steht in
@@ -110,6 +119,28 @@ Zum Ansehen ohne Stream: auf der Übersichtsseite gibt es unter
 einen Knopf. Die Ereignisse gehen nur an die Browser-Sources. Dasselbe im
 Dauerbetrieb: `abdulive overlay --demo` oder der Knopf „Vorführung starten".
 
+## Das Pult: Handy als Stream Deck
+
+Seit 2026-10-26 gebaut, **noch nicht ausgerollt und nicht an echtem OBS
+geprüft**. `/pult` auf dem Hub ist eine installierbare Web-App (PWA) mit
+Soundboard, Szenenwechsel, Clip-Knopf, Stummschaltern, Liegestützen,
+Vorlese-Freigabe und den Testknöpfen. Beschreibung in
+[`apps/overlay-web/README.md`](../apps/overlay-web/README.md#das-pult-pult).
+
+- **Sounds lädt Abdu selbst hoch**, am Handy über „+ Sound“. Sie liegen auf
+  dem Hub unter `<db>/sounds/`, gespielt wird über die neue Browser-Source
+  `/sounds` (muss in OBS eingetragen werden, mit Ton).
+- **Szenen** brauchen die neue Leitung Stream-PC → Hub: einmal
+  `abdulive fern:verbinden <adresse> <schlüssel>` auf dem Stream-PC (Befehl
+  steht auf der Übersicht), dann läuft sie in `abdulive ingest` mit. Das
+  heißt auch: **ein neues Paket für den Stream-PC** ist nötig, nicht nur
+  ein Ausrollen des Hubs.
+- Geprüft: 311 Tests, Typprüfung, ein Durchlauf im Browser gegen einen
+  nachgebauten Stream-PC mit falschem OBS (Szenenwechsel, Stummschalten,
+  abgelehnte Szene, Hochladen, Abspielen in der Sound-Quelle). Ungeprüft:
+  echtes OBS, iPhone/Android-Installation, der Weg durch Nginx Proxy Manager
+  für die lange offene `/fern/befehle`-Leitung und Uploads bis 8 MB.
+
 ## Kanalpunkte: „Nachricht vorlesen" läuft
 
 Seit 2026-09-23 scharf. Der Weg: EventSub meldet die Einlösung, der Hub
@@ -120,15 +151,20 @@ prüft (`apps/hub/src/rewards.ts`), Piper spricht, `/tts` spielt ab.
 | Belohnung | „Nachricht vorlesen", 1000 Punkte, Texteingabe Pflicht |
 | Freigabe | keine, wird direkt vorgelesen |
 | Schutz | Wortfilter (29 Einträge), 200 Zeichen, 3 je Person und Stunde, „Sofort still" auf der Übersichtsseite |
-| Stimme | Piper, `de_DE-mls-medium`, Sprecher 0 |
+| Stimme | Piper, `de_DE-thorsten-medium` (mls klang verwaschen) |
 
 **Die Stimme entsteht im Hub, nicht im Browser.** Zuerst lief es über
 `speechSynthesis` in der Browser-Quelle. Das hat in OBS gesprochen, aber
 amerikanisch: OBS' Browser sah keine deutsche Stimme und die Seite nahm die
 erste beliebige. Piper liegt unter `/opt/piper` im LXC (2 Kerne: 200 Zeichen
 in 0,7 s), das Stimmenmodell unter `models/piper/`. Beides überlebt jedes
-Ausrollen; eingerichtet mit `scripts/install-piper.sh`. Proben aller 236
-mls-Sprecher lassen sich mit `--speaker N` erzeugen.
+Ausrollen; eingerichtet mit `scripts/install-piper.sh`.
+
+**Die erste Stimme war `de_DE-mls-medium`, Sprecher 0**, und klang im Stream
+„wie jemand mit Schlaganfall". Die Phoneme stimmten (`piper --debug`), es lag
+am Modell: Hörbuch-Aufnahmen von 236 Laien, Sprecher 0 ist ein beliebiger.
+Seit 2026-09-24 läuft `de_DE-thorsten-medium`, ein Sprecher, darum kein
+`sprecher` mehr in der Konfiguration. Das mls-Modell liegt noch daneben.
 
 **Die Belohnung muss über die API angelegt sein** (`abdulive rewards:anlegen`).
 Nur die App, die eine Belohnung angelegt hat, darf deren Einlösungen
@@ -142,11 +178,51 @@ zusammengezogenen Text gesucht, kürzere nur am Wortanfang, sonst stünde
 „nazi" in „kann azubi". Die Liste steht nur in der Hub-Konfiguration, nicht
 im Repo.
 
+**Der Filter hat eine Stunde lang fast alles abgelehnt.** `www` in der Liste
+wurde zusammengezogen zu `w` und traf damit jedes Wort, das mit w anfängt
+(„wie", „weg"). Die Punkte gingen zurück, im Log stand nur `Wortfilter`.
+Behoben am 2026-09-24: was nach dem Zusammenziehen unter 3 Buchstaben hat,
+trifft nur noch als ganzes Wort. **Noch offen:** lange Einträge treffen über
+Wortgrenzen hinweg, „Spaß tut gut" fliegt wegen `spast` raus, „eine Gerade"
+wegen `neger`. Wer eine Ablehnung nachvollziehen will: der Text steht im
+Ereignis `points.redeemed` in der Datenbank.
+
 **Der YAML-Leser konnte keine Listen aus Maps.** `- titel: X` zerfiel in
 Zeichenketten, jede Belohnung war ohne Meldung unwirksam - auch das Beispiel
 in `config.example.yaml`. Behoben und getestet; die bestehenden Dateien
 werden nachweislich gleich gelesen wie vorher.
 
+## Kanalpunkte: Liegestütze
+
+Seit 2026-10-04 scharf. Die Belohnung „5 Liegestütze" gab es auf Twitch schon
+(von Hand angelegt, 61 Einlösungen bis dahin). Sie steht jetzt in der
+Hub-Konfiguration mit `aktion: liegestuetze`, `anzahl: 5`, zugeordnet über den
+Titel. Wird sie auf Twitch umbenannt, zählt der Hub nicht mehr mit.
+
+| | |
+|---|---|
+| Zähler | `apps/hub/src/liegestuetze.ts`, Tabelle `zaehler` (Migration 003), übersteht Neustarts |
+| Offen | Einlösung +5. Auf der Übersicht −1/−5/−10, Setzen, auf 0 |
+| Gemacht | Was mit −1/−5/−10 abgezogen wird. Setzen zählt nicht, das ist Korrektur. Eigenes Feld zum Korrigieren |
+| Neuer Stream | Gemacht auf 0, offen bleibt. Nicht beim Neustart des Hubs mitten im Stream, nicht bei einer Lücke bis 5 Minuten |
+| Overlay | `/liegestuetze`, 420×200. `?verstecken=1`, `?gemacht=0`, `?titel=...` |
+
+**Ungeprüft im Stream.** Getestet mit Probeserver und Browser. Weder eine
+echte Einlösung noch das Nullen beim Streamstart ist seit dem Ausrollen
+passiert. Der Zähler startete bei 0 offen, die 61 alten Einlösungen sind nicht
+übernommen. In OBS ist die Quelle noch nicht eingetragen.
+
+**Die Belohnung ist nicht über die API angelegt.** Der Hub kann ihre
+Einlösungen deshalb nicht als erledigt melden und schreibt bei jeder eine
+Warnung ins Log. Für das Zählen egal. Eine ältere Belohnung „10 Liegestütze"
+(12 Einlösungen bis 2026-09-24) steht nicht in der Konfiguration.
+
+**Nebenbei behoben: die Vorlese-Freigabe auf der Übersicht war tot.**
+`POST /tts` landete bei der Overlay-Seite `/tts` statt bei der Freigabe, auf
+dem Hub ohne Schlüssel sogar mit 403. „Vorlesen", „Ablehnen" und „Sofort
+still" haben damit nie gewirkt. Overlay-Seiten werden jetzt nur bei GET
+ausgeliefert. Gegen eine echte Warteschlange nicht nachgeprüft.
+
 ## Der Discord-Server steht
 
 Dazugekommen seit der letzten Übergabe, und kein Teil des MVP: der
@@ -162,7 +238,23 @@ und [Clips](projects/clip-shorts.md) liegen fertig im verschlüsselten Speicher
 unter `goLiveWebhook`, `recapWebhook` und `clipsWebhook`. Wer diese Werkzeuge
 baut, muss sich um Discord nicht mehr kümmern, sondern nur noch posten.
 
-Sieben Kanäle, vier Rollen, zwei AutoMod-Regeln. Der Entwurf und seine
+Zehn Kanäle, vier Rollen, zwei AutoMod-Regeln. Seit 2026-10-17 dabei:
+`🙋│begrüßung` für Discords Beitrittsmeldungen (liefen vorher in
+`#allgemein`), und die Foren `🎮│spielvorschläge` und
+`👀│reaction-einsendungen`. Beide hatte Abdu als Textkanäle angelegt, sie sind
+jetzt Foren mit Tags, die nur Mods setzen, und 👍 als Standard-Reaktion.
+Discord wandelt keinen Textkanal in ein Forum um: die beiden leeren
+Textkanäle wurden einmalig über die API gelöscht, das Setup-Skript selbst
+löscht weiterhin nichts.
+
+Im Spielvorschläge-Forum stehen neun Beiträge, einer je Spiel aus Abdus
+Liste, vom Bot angelegt (Titel vorher nachgeschlagen, „involkyr" heißt
+Invokyr). In `📢│ankündigungen` hat der Bot das Forum angekündigt, ohne Ping.
+Der Bot darf dort trotz Schreibsperre für `@everyone` posten.
+
+**Der Hub ist nicht neu ausgerollt.** Das Setup lief aus einer Kopie im
+Container, der laufende Prozess hat noch den Stand davor. Für den Server ist
+das egal, für den Knopf auch. Beim nächsten Ausrollen kommt es mit. Der Entwurf und seine
 Begründung stehen in [`projects/discord-community.md`](projects/discord-community.md);
 die Kurzfassung ist, dass bei 5 bis 30 Zuschauern fünf sichtbare Kanäle besser
 sind als zwanzig leere.
@@ -203,6 +295,16 @@ nichts Vertrauliches mehr hineinschreiben, auch nicht in die Doku.
 (`ZeasyAlex/abdulive`) und `discord` (`ZeasyAlex/abdulive_-discord`). Wer
 pusht, pusht auf beide, sonst laufen sie auseinander.
 
+**`deploy-hub.sh` schiebt den Arbeitsstand, nicht den Commit.** Liegt
+Unfertiges herum, landet es im LXC. Sauber ausrollen aus einem eigenen
+Checkout:
+
+```bash
+git worktree add --detach ../abdulive-deploy HEAD
+../abdulive-deploy/scripts/deploy-hub.sh
+git worktree remove ../abdulive-deploy
+```
+
 Die Begründungen stehen in [`decisions/`](decisions/), acht ADRs. Wer eine
 davon umwerfen will, liest sie vorher. ADR-0004 (Docker) ist durch ADR-0007
 ersetzt; die Analyse darin bleibt lesenswert, weil zwei der vier
@@ -382,7 +484,7 @@ Dazu eine Kleinigkeit mit Wirkung: das Bot-Konto sollte Moderator sein
 (`/mod <botname>`). Ohne das gilt ein Limit von 20 Chat-Nachrichten je 30
 Sekunden statt 100, und im Follower-only-Modus kommt der Bot gar nicht durch.
 
-Und zwei für Discord, beide nicht über die API machbar:
+Und drei für Discord, die nicht über die API gehen:
 
 1. **Sich selbst die Rolle `Abdu` geben.** Das Skript legt Rollen an, aber es
    hängt sie niemandem um.
@@ -390,6 +492,9 @@ Und zwei für Discord, beide nicht über die API machbar:
    Kanalinfo und in einen Chat-Befehl eintragen. Ein Server, den im Stream
    niemand erwähnt, bleibt leer. Das ist der eine Handgriff, an dem hängt, ob
    der Server überhaupt jemanden bekommt.
+3. **Tags in den Foren pflegen.** „Wird gespielt", „Gespielt", „Eher nicht"
+   bzw. „Kommt dran", „Angeschaut" setzen nur Abdu und Mods. Ein Vorschlag,
+   der sichtbar umgesetzt wird, bringt den nächsten.
 
 ## Wo ich weitermachen würde
 
@@ -403,12 +508,15 @@ malt. Das war vorher nicht zu erraten.
 `mode: live`. Das ist der kleinste verbleibende Handgriff mit der größten
 Wirkung.
 
-**Den Kamerarahmen fertig machen** und die Statusleiste damit ablösen.
+**Das Overlay neu machen** (nächste Sitzung, siehe oben). Der Kamerarahmen
+als Entwurf geht darin auf, die Statusleiste soll ersetzt werden. Danach die
+Liegestütze-Quelle in OBS eintragen und im Stream einmal beobachten.
 
 **`apps/recap` bauen.** Angefangen, aber nicht committet: `apps/recap/src/recap.ts`
 und Ergänzungen in `packages/db/src/repos.ts` liegen nur im Arbeitsstand
 (die Typprüfung meckert dort noch über `url: undefined`). Der Webhook liegt
-bereit, der Hub hat die Daten.
+bereit, der Hub hat die Daten. Seit 2026-10-04 wird aus einem sauberen
+Checkout ausgerollt, der halbe Recap liegt also nicht mehr im LXC.
 
 **Danach S5.** Nicht wegen des Codes, sondern weil das Werkzeug ohne
 Sichtungsseite für Abdu nicht bedienbar ist. Die Kette funktioniert, aber sie
@@ -442,7 +550,7 @@ auf denselben Klick. Auf dem Stream-PC bleibt das Discord-Token leer.
 
 **Der Overlay-Schlüssel steht in der Adresse.** Damit steht er in jedem
 OBS-Profil und auf jedem Screenshot der Einstellungen. Neu würfeln geht auf
-der Übersichtsseite, aber danach müssen alle fünf Adressen in OBS neu
+der Übersichtsseite, aber danach müssen alle Adressen in OBS neu
 eingetragen werden.
 
 **Das Overlay hat nie unter Last gelaufen.** Geprüft ist es gegen den

docs/projects/discord-community.md

@@ -33,9 +33,12 @@ und ist die massgebliche Fassung. Was hier steht, ist die Begruendung dazu.
 | Kategorie | Kanal | Wer schreibt | Wofuer |
 |---|---|---|---|
 | 📌 Info | `👋│willkommen` | niemand | Die drei Regeln, einmal gepostet |
+| 📌 Info | `🙋│begrüßung` | alle | Discords Beitrittsmeldungen |
 | 📌 Info | `📢│ankündigungen` | nur Webhooks | Stream-Start und Recap; Diskussion in Threads |
 | 🎮 Community | `💬│allgemein` | alle | Der Hauptkanal. Im Zweifel hier |
 | 🎮 Community | `🎬│clips` | alle + Clip-Knopf | Gute Momente |
+| 🎮 Community | `🎮│spielvorschläge` | alle (Forum) | Ein Beitrag je Spiel, abgestimmt per 👍 |
+| 🎮 Community | `👀│reaction-einsendungen` | alle (Forum) | Ein Beitrag je Clip, auf den Abdu reagieren soll |
 | 🎮 Community | `🔊 Zusammen zocken` | — | Sprachkanal |
 | 🔒 Intern | `🔨│mod-chat` | Mods | Fuer alle anderen unsichtbar |
 | 🔒 Intern | `🤖│technik-log` | Toolkit | Probelaeufe, Fehler, AutoMod-Treffer |
@@ -54,6 +57,23 @@ Server ist der erste Eindruck, den jemand davon bekommt.
 So bleibt die Kanalansicht eine saubere Liste von Streams, und die Diskussion
 ueber das Recap haengt trotzdem direkt daran.
 
+`🙋│begrüßung` gibt es, weil Discord die Beitrittsmeldungen sonst in den
+ersten Kanal des Servers schreibt, und das war `💬│allgemein`. Dort gingen die
+Meldungen im Gespräch unter und das Gespräch in den Meldungen. Der Kanal ist
+beschreibbar, sonst tut der Winke-Knopf unter der Meldung nichts. Welcher
+Kanal es ist, steht in `SYSTEM_CHANNEL`.
+
+Die beiden Foren hat Abdu als Textkanäle angelegt, seit 2026-10-17 stehen sie
+als Foren im Bauplan. In einem Textkanal schlägt nach drei Wochen jemand
+dasselbe Spiel noch einmal vor, weil der erste Vorschlag weggescrollt ist. Im
+Forum gibt es einen Beitrag je Spiel, darunter wird per 👍 abgestimmt. Die
+Tags für den Stand („Wird gespielt", „Gespielt", „Eher nicht" bzw. „Kommt
+dran", „Angeschaut") setzen nur Mods. Sonst markiert jeder sein eigenes Spiel
+als „wird gespielt". Discord wandelt einen Textkanal nicht in ein Forum um:
+die leeren Textkanäle wurden einmalig von Hand gelöscht, das Skript selbst
+löscht weiterhin nichts. Foren gehen auch ohne Community-Server, am echten
+Server nachgeprüft.
+
 Der Sprachkanal ist bewusst dabei, obwohl er anfangs leer sein wird. Ein
 Sprachkanal, den zwei Leute nutzen, ist der Anfang; einer, den es nicht gibt,
 wird nie einer.

packages/core/src/config.ts

@@ -60,8 +60,8 @@ export type Config = {
     enabled: boolean;
     belohnungen: Array<{
       titel?: string; id?: string;
-      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'nichts';
-      freigabe?: boolean; maxZeichen?: number;
+      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
+      freigabe?: boolean; maxZeichen?: number; anzahl?: number;
     }>;
     tts: {
       freigabe: boolean; maxZeichen: number;
@@ -135,8 +135,8 @@ const DEFAULTS = {
     enabled: false,
     belohnungen: [] as Array<{
       titel?: string; id?: string;
-      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'nichts';
-      freigabe?: boolean; maxZeichen?: number;
+      aktion: 'konfetti' | 'emote-regen' | 'einblendung' | 'tts' | 'liegestuetze' | 'nichts';
+      freigabe?: boolean; maxZeichen?: number; anzahl?: number;
     }>,
     tts: {
       // Vorgabe ist die Freigabe durch Abdu. Kanalpunkte sammeln sich beim
@@ -146,7 +146,7 @@ const DEFAULTS = {
       maxZeichen: 200,
       blockliste: [] as string[],
       proPersonProStunde: 3,
-      stimme: 'de_DE-mls-medium',
+      stimme: 'de_DE-thorsten-medium',
     },
   },
   overlay: { port: 4791, enabled: true },

packages/db/migrations/003_zaehler.sql

@@ -0,0 +1,8 @@
+-- Zaehler, die einen Neustart ueberleben muessen. Erster Fall: offene
+-- Liegestuetze aus Kanalpunkten. Wer 2000 Punkte ausgegeben hat, will nicht
+-- erleben, dass ein Update des Hubs seine Liegestuetze verschluckt.
+CREATE TABLE zaehler (
+  name      TEXT PRIMARY KEY,
+  wert      INTEGER NOT NULL,
+  geaendert TEXT NOT NULL
+);

packages/discord/src/api.ts

@@ -161,7 +161,14 @@ export type RestFull = Rest & {
 
 export type ApiRole = { id: string; name: string; permissions: string; position: number; color: number; hoist: boolean; mentionable: boolean; managed: boolean };
 export type ApiOverwrite = { id: string; type: 0 | 1; allow: string; deny: string };
-export type ApiChannel = { id: string; name: string; type: number; position: number; parent_id: string | null; topic?: string | null; permission_overwrites?: ApiOverwrite[] };
+export type ApiTag = { id?: string; name: string; emoji_id?: string | null; emoji_name: string | null; moderated: boolean };
+export type ApiChannel = {
+  id: string; name: string; type: number; position: number; parent_id: string | null;
+  topic?: string | null; permission_overwrites?: ApiOverwrite[];
+  // Nur Foren.
+  available_tags?: ApiTag[];
+  default_reaction_emoji?: { emoji_id: string | null; emoji_name: string | null } | null;
+};
 export type ApiGuild = {
   id: string; name: string; owner_id: string; roles: ApiRole[]; features: string[];
   // Die Felder aus GUILD_SETTINGS, damit sich vergleichen laesst, statt bei
@@ -170,6 +177,7 @@ export type ApiGuild = {
   explicit_content_filter?: number;
   default_message_notifications?: number;
   system_channel_flags?: number;
+  system_channel_id?: string | null;
 };
 export type ApiWebhook = { id: string; name: string; channel_id: string; url?: string; token?: string };
 export type ApiUser = { id: string; username: string; bot?: boolean };

packages/discord/src/apply.test.ts

@@ -7,7 +7,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiWebhook, type Rest } from './api.ts';
-import { applyPlan, type Step } from './apply.ts';
+import { applyPlan, mergeTags, type Step } from './apply.ts';
 import { CATEGORIES, CHANNELS, EVERYONE, ROLES } from './plan.ts';
 import { str } from './permissions.ts';
 
@@ -504,3 +504,41 @@ test('eine Nachricht ohne Knopfleiste bekommt sie nachgereicht', async () => {
   assert.equal((api.messages.get(kanal)![0]!.components as unknown[]).length, 1);
   assert.equal(api.messages.get(kanal)!.length, 1, 'nicht neu posten');
 });
+
+// ---------------------------------------------------------------- Foren
+
+test('ein Forum bekommt Tags und Standard-Reaktion aus dem Bauplan', async () => {
+  const api = new FakeDiscord();
+  await run(api);
+  const plan = CHANNELS.find((c) => c.key === 'spielvorschlaege')!;
+  const forum = live(api, 'spielvorschlaege')!;
+  assert.equal(forum.type, CH.FORUM);
+  assert.deepEqual(forum.available_tags?.map((t) => t.name), plan.tags?.map((t) => t.name));
+  assert.equal(forum.default_reaction_emoji?.emoji_name, plan.reaction);
+});
+
+test('ein Textkanal gleichen Namens wird nicht fuer das Forum gehalten', async () => {
+  // Discord kann einen Textkanal nicht in ein Forum umwandeln. Der alte steht
+  // also daneben, bis ihn jemand loescht - angepasst werden darf er nicht.
+  const api = new FakeDiscord();
+  api.channels.push({ id: '1', name: '🎮│spielvorschläge', type: CH.TEXT, position: 0, parent_id: null });
+  await run(api);
+  assert.equal(api.channels.filter((c) => c.name === '🎮│spielvorschläge').length, 2);
+  assert.equal(api.channels.find((c) => c.id === '1')?.available_tags, undefined);
+});
+
+test('von Hand angelegte Tags bleiben mit ihrer ID stehen', async () => {
+  const fremd = { id: '77', name: 'Horror', emoji_name: '👻', moderated: false };
+  const eigen = { id: '78', name: 'gespielt', emoji_name: '✔️', moderated: false };
+  const out = mergeTags([fremd, eigen], [
+    { name: 'Gespielt', emoji: '✅', moderated: true },
+    { name: 'Eher nicht', emoji: '❌', moderated: true },
+  ]);
+  assert.ok(out);
+  assert.deepEqual(out.find((t) => t.name === 'Horror'), fremd);
+  const g = out.find((t) => t.name === 'Gespielt')!;
+  assert.equal(g.id, '78', 'ohne ID verlieren die Beitraege ihre Markierung');
+  assert.equal(g.emoji_name, '✅');
+  assert.ok(out.find((t) => t.name === 'Eher nicht'));
+  assert.equal(mergeTags(out, [{ name: 'Gespielt', emoji: '✅', moderated: true }]), null);
+});

packages/discord/src/apply.ts

@@ -11,14 +11,14 @@
 import { logger } from '#core/logger.ts';
 import { updateSecrets } from '#twitch/secrets.ts';
 import {
-  CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiUser,
+  CH, type ApiChannel, type ApiGuild, type ApiOverwrite, type ApiRole, type ApiTag, type ApiUser,
   type ApiWebhook, type Rest,
 } from './api.ts';
 import { str } from './permissions.ts';
 import { selfRoleComponents } from './selfroles.ts';
 import {
-  AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, GUILD_SETTINGS, ROLES, WELCOME,
-  type CategoryPlan, type ChannelPlan, type OverwritePlan, type WebhookSlot,
+  AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, GUILD_SETTINGS, ROLES, SYSTEM_CHANNEL, WELCOME,
+  type CategoryPlan, type ChannelPlan, type OverwritePlan, type TagPlan, type WebhookSlot,
 } from './plan.ts';
 
 const log = logger('discord:setup');
@@ -241,7 +241,30 @@ function kindOf(type: number): string {
 }
 
 /** Kategorie und Kanal unterscheiden sich fuers Auftragen nur im Typ. */
-type AnyPlan = CategoryPlan & { type: number; topic?: string };
+type AnyPlan = CategoryPlan & { type: number; topic?: string; tags?: TagPlan[]; reaction?: string };
+
+/**
+ * Tags eines Forums: die aus dem Plan nachziehen, fremde stehen lassen.
+ * Discord ersetzt beim PATCH die ganze Liste, deshalb gehen die vorhandenen
+ * mit ihrer ID wieder mit - ohne ID waere es ein neuer Tag, und Beitraege
+ * verloeren ihre Markierung. Gibt null zurueck, wenn alles passt.
+ */
+export function mergeTags(existing: ApiTag[], plan: TagPlan[]): ApiTag[] | null {
+  let changed = false;
+  const out = existing.map((t) => ({ ...t }));
+  for (const p of plan) {
+    const want = { name: p.name, emoji_name: p.emoji, moderated: p.moderated ?? false };
+    const hit = out.find((t) => eq(t.name, p.name));
+    if (!hit) {
+      out.push(want);
+      changed = true;
+    } else if (hit.name !== want.name || hit.emoji_name !== want.emoji_name || hit.moderated !== want.moderated) {
+      Object.assign(hit, want, { emoji_id: null });
+      changed = true;
+    }
+  }
+  return changed ? out : null;
+}
 
 async function applyChannel(
   api: Rest, guild: ApiGuild, existing: ApiChannel[], steps: Step[], dry: boolean,
@@ -268,6 +291,8 @@ async function applyChannel(
       ...(parentId ? { parent_id: parentId } : {}),
       ...(plan.topic ? { topic: plan.topic } : {}),
       ...(overwrites.length ? { permission_overwrites: overwrites } : {}),
+      ...(plan.tags?.length ? { available_tags: mergeTags([], plan.tags) } : {}),
+      ...(plan.reaction ? { default_reaction_emoji: { emoji_id: null, emoji_name: plan.reaction } } : {}),
     }, 'Kanal aus dem Bauplan');
     steps.push({ kind, name: plan.name, change: 'erstellt' });
     return made;
@@ -280,6 +305,11 @@ async function applyChannel(
   if (parentId && found.parent_id !== parentId) patch['parent_id'] = parentId;
   const merged = mergeOverwrites(found.permission_overwrites ?? [], plan.overwrites ?? [], roleId);
   if (merged) patch['permission_overwrites'] = merged;
+  const tags = plan.tags?.length ? mergeTags(found.available_tags ?? [], plan.tags) : null;
+  if (tags) patch['available_tags'] = tags;
+  if (plan.reaction && found.default_reaction_emoji?.emoji_name !== plan.reaction) {
+    patch['default_reaction_emoji'] = { emoji_id: null, emoji_name: plan.reaction };
+  }
 
   if (Object.keys(patch).length === 0) {
     steps.push({ kind, name: plan.name, change: 'unveraendert' });
@@ -525,7 +555,13 @@ export async function applyPlan(
     await applyWebhooks(api, channel, plan, steps, dry, urls);
   }
 
-  // 4. AutoMod und Begruessung - beides braucht Kanaele, die es geben muss.
+  // 4. Beitrittsmeldungen, AutoMod und Begruessung - alles braucht Kanaele,
+  // die es geben muss.
+  const system = made.get(SYSTEM_CHANNEL);
+  if (system && guild.system_channel_id !== system.id) {
+    if (!dry) await api.patch(`/guilds/${guild.id}`, { system_channel_id: system.id }, 'Beitrittsmeldungen aus dem Bauplan');
+    steps.push({ kind: 'Server', name: `Beitrittsmeldungen nach ${system.name}`, change: dry ? 'erstellt' : 'angepasst' });
+  }
   await applyAutomod(api, guild, made.get('technik-log')?.id ?? null, steps, dry);
   const welcome = made.get('willkommen');
   if (welcome) {

packages/discord/src/plan.test.ts

@@ -6,7 +6,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import { P, bits, names, str } from './permissions.ts';
-import { AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, ROLES, WELCOME } from './plan.ts';
+import { AUTOMOD, AUTOMOD_BLOCK, CATEGORIES, CHANNELS, EVERYONE, ROLES, SYSTEM_CHANNEL, WELCOME } from './plan.ts';
 import { findChannel, mergeOverwrites, normalizeName, rolePositions } from './apply.ts';
 import { CH } from './api.ts';
 
@@ -180,6 +180,16 @@ test('der Begruessungstext verweist nur auf Kanaele, die angelegt werden', () =>
   }
 });
 
+test('Beitritte landen in einem eigenen, beschreibbaren Kanal', () => {
+  // Ohne Angabe nimmt Discord den ersten Kanal, und das war #allgemein.
+  const c = CHANNELS.find((x) => x.key === SYSTEM_CHANNEL);
+  assert.ok(c, `${SYSTEM_CHANNEL} gibt es nicht`);
+  assert.notEqual(c.key, 'allgemein');
+  // Der Winke-Knopf unter der Meldung schreibt im Namen dessen, der klickt.
+  const deny = c.overwrites?.find((o) => o.role === '@everyone')?.deny ?? 0n;
+  assert.equal(deny & P.SEND_MESSAGES, 0n);
+});
+
 // ---------------------------------------------------------------- Merge
 
 const ID = (name: string): string | undefined =>
@@ -334,3 +344,16 @@ test('die AutoMod-Regel kennt ihren frueheren Namen', () => {
   assert.ok(regel?.aliases?.includes('Erwaehnungs-Spam'),
     'sonst steht die Regel nach der Umbenennung zweimal da');
 });
+
+test('Tags und Standard-Reaktion stehen nur an Foren und passen in Discords Grenzen', () => {
+  for (const c of CHANNELS) {
+    if (c.type !== CH.FORUM) {
+      assert.equal(c.tags, undefined, `${c.name}: Tags gibt es nur in Foren`);
+      assert.equal(c.reaction, undefined, `${c.name}: Standard-Reaktion gibt es nur in Foren`);
+      continue;
+    }
+    assert.ok((c.tags?.length ?? 0) <= 20, `${c.name}: hoechstens 20 Tags`);
+    for (const t of c.tags ?? []) assert.ok(t.name.length <= 20, `Tag ${t.name} ist laenger als 20 Zeichen`);
+    assert.ok((c.topic?.length ?? 0) <= 4096, `${c.name}: Richtlinien zu lang`);
+  }
+});

packages/discord/src/plan.ts

@@ -49,16 +49,30 @@ export type CategoryPlan = {
   overwrites?: OverwritePlan[];
 };
 
+/** Ein Stichwort, mit dem Forenbeitraege markiert werden. */
+export type TagPlan = {
+  /** Hoechstens 20 Zeichen, sonst lehnt Discord ab. */
+  name: string;
+  emoji: string;
+  /** Setzen duerfen nur Mods (MANAGE_THREADS), nicht der Verfasser. */
+  moderated?: boolean;
+};
+
 export type ChannelPlan = {
   key: string;
   name: string;
   aliases?: string[];
   type: number;
+  /** Bei Foren sind das die Richtlinien, die ueber jedem neuen Beitrag stehen. */
   topic?: string;
   /** `key` einer Kategorie aus CATEGORIES. */
   category?: string;
   overwrites?: OverwritePlan[];
   webhooks?: Array<{ name: string; slot: WebhookSlot }>;
+  /** Nur Foren. Von Hand angelegte Tags bleiben daneben stehen. */
+  tags?: TagPlan[];
+  /** Nur Foren: die Reaktion, die unter jedem Beitrag schon angeboten wird. */
+  reaction?: string;
 };
 
 // ---------------------------------------------------------------- Rechte
@@ -184,6 +198,17 @@ export const CHANNELS: ChannelPlan[] = [
     topic: 'Was das hier ist und die drei Regeln.',
     overwrites: READONLY,
   },
+  {
+    // Hier landen Discords Beitrittsmeldungen (SYSTEM_CHANNEL). Beschreibbar,
+    // damit der Winke-Knopf unter der Meldung funktioniert - der antwortet im
+    // Namen dessen, der klickt.
+    key: 'begruessung',
+    name: '🙋│begrüßung',
+    aliases: ['begrüßung', 'begruessung'],
+    type: CH.TEXT,
+    category: 'info',
+    topic: 'Wer neu ist, taucht hier auf. Sag Hallo.',
+  },
   {
     key: 'ankuendigungen',
     name: '📢│ankündigungen',
@@ -214,6 +239,44 @@ export const CHANNELS: ChannelPlan[] = [
     topic: 'Gute Momente aus dem Stream. Der Clip-Knopf postet hier hin.',
     webhooks: [{ name: 'Clips', slot: 'clipsWebhook' }],
   },
+  {
+    // Von Abdu als Textkanal angelegt, seit 2026-10-17 ein Forum: ein Beitrag
+    // je Spiel, abgestimmt wird per Daumen. Im Textkanal schlaegt nach drei
+    // Wochen jemand dasselbe Spiel noch einmal vor, weil der erste Vorschlag
+    // weggescrollt ist. Der erste Satz der Richtlinien ist Abdus eigener.
+    // Die Stand-Tags setzen nur Mods, sonst markiert jeder sein Spiel als
+    // "wird gespielt".
+    key: 'spielvorschlaege',
+    name: '🎮│spielvorschläge',
+    aliases: ['spielvorschläge', 'spielvorschlaege'],
+    type: CH.FORUM,
+    category: 'community',
+    topic: 'Ihr wollt sehen wie ich Spiele zocke, die euch gefallen? Schreibt gerne eure Vorschläge rein!\n\n' +
+      'Ein Beitrag pro Spiel. Gibt es das Spiel schon, Daumen hoch drücken statt noch einmal posten - ' +
+      'so sehe ich, was ihr am meisten sehen wollt.',
+    reaction: '👍',
+    tags: [
+      { name: 'Wird gespielt', emoji: '🎮', moderated: true },
+      { name: 'Gespielt', emoji: '✅', moderated: true },
+      { name: 'Eher nicht', emoji: '❌', moderated: true },
+    ],
+  },
+  {
+    // Ebenfalls von Abdu angelegt und ebenfalls ein Forum: ein Beitrag je
+    // Clip, damit man sieht, was schon dran war.
+    key: 'reaction',
+    name: '👀│reaction-einsendungen',
+    aliases: ['reaction-einsendungen'],
+    type: CH.FORUM,
+    category: 'community',
+    topic: 'Ihr habt Clips oder Videos worauf ich reagieren sollte? Schickt hier die Clips rein!\n\n' +
+      'Ein Beitrag pro Clip, Link in den Beitrag.',
+    reaction: '👍',
+    tags: [
+      { name: 'Kommt dran', emoji: '🔜', moderated: true },
+      { name: 'Angeschaut', emoji: '✅', moderated: true },
+    ],
+  },
   {
     key: 'voice',
     name: '🔊 Zusammen zocken',
@@ -260,6 +323,14 @@ export const GUILD_SETTINGS = {
   system_channel_flags: 4,        // Einrichtungstipps unterdruecken, Beitritte zeigen
 };
 
+/**
+ * `key` des Kanals, in den Discord "X ist beigetreten" schreibt. Ohne Angabe
+ * nimmt Discord den ersten Kanal des Servers, und das war #allgemein: dort
+ * gingen die Beitritte zwischen den Gespraechen unter, und umgekehrt.
+ * Steht nicht in GUILD_SETTINGS, weil die ID erst nach den Kanaelen feststeht.
+ */
+export const SYSTEM_CHANNEL = 'begruessung';
+
 /**
  * Wird einmalig in #willkommen gepostet, wenn der Kanal noch leer ist.
  * {key} wird durch die Erwaehnung des Kanals mit diesem `key` ersetzt.
@@ -276,6 +347,8 @@ Das hier ist der Ort zwischen den Streams. Wer mitliest, gehört dazu.
 **Wo was passiert**
 > {allgemein} - alles andere
 > {clips} - die guten Momente
+> {spielvorschlaege} - was Abdu mal spielen sollte
+> {reaction} - Clips, auf die Abdu reagieren soll
 > {ankuendigungen} - Stream-Start und die Zusammenfassung danach
 
 **Bescheid wissen, wenn der Stream startet**

packages/obs/src/client.ts

@@ -11,9 +11,13 @@ import { forever } from '#core/retry.ts';
 
 const log = logger('obs');
 
-/** Ereignisgruppen als Bitmaske. Wir brauchen General, Scenes und Outputs. */
-export const SUBSCRIPTIONS = { general: 1, config: 2, scenes: 4, outputs: 64 } as const;
-const DEFAULT_SUBS = SUBSCRIPTIONS.general | SUBSCRIPTIONS.scenes | SUBSCRIPTIONS.outputs;
+/**
+ * Ereignisgruppen als Bitmaske. Wir brauchen General, Scenes und Outputs,
+ * dazu Inputs fuer die Stummschalter auf dem Pult.
+ */
+export const SUBSCRIPTIONS = { general: 1, config: 2, scenes: 4, inputs: 8, outputs: 64 } as const;
+const DEFAULT_SUBS = SUBSCRIPTIONS.general | SUBSCRIPTIONS.scenes |
+  SUBSCRIPTIONS.inputs | SUBSCRIPTIONS.outputs;
 
 /**
  * Antwort auf die Authentifizierungsaufforderung.
@@ -31,6 +35,8 @@ export type ObsEventHandlers = {
   onSceneChanged?: (scene: string) => void;
   onIdentified?: () => void;
   onClosed?: () => void;
+  /** Jedes Ereignis, auch die oben schon einzeln gemeldeten. */
+  onEvent?: (type: string, data: Record<string, unknown>) => void;
 };
 
 export type ObsClient = {
@@ -105,6 +111,7 @@ export function createObs(
         } else if (type === 'CurrentProgramSceneChanged') {
           handlers.onSceneChanged?.(String(data['sceneName'] ?? ''));
         }
+        handlers.onEvent?.(type, data);
         break;
       }
       case 7: {  // RequestResponse

packages/twitch/src/secrets.ts

@@ -59,7 +59,15 @@ export type SecretStore = {
      * Ausrollen neu.
      */
     sessionKey?: string;
+    /**
+     * Mit diesem Schluessel waehlt sich der Stream-PC beim Hub ein und
+     * nimmt Befehle fuer OBS entgegen. Anders als overlayKey schaltet er
+     * etwas, steht deshalb nie in einer Adresse.
+     */
+    fernKey?: string;
   };
+  /** Auf dem Stream-PC: wo der Hub steht und womit man sich dort meldet. */
+  fern?: { url: string; key: string };
   bluesky?: { handle: string; appPassword: string };
   /** Nur noetig, wenn die Pakete hinter einer Anmeldung liegen. */
   update?: { token: string };

scripts/install-piper.sh

@@ -13,12 +13,12 @@
 # Umgebung (mit Vorgaben):
 #   PVE_HOST=192.168.2.20            Proxmox-Host
 #   CT=141                           Container-ID
-#   STIMME=de_DE-mls-medium          Name aus huggingface.co/rhasspy/piper-voices
+#   STIMME=de_DE-thorsten-medium          Name aus huggingface.co/rhasspy/piper-voices
 set -euo pipefail
 
 PVE_HOST="${PVE_HOST:-192.168.2.20}"
 CT="${CT:-141}"
-STIMME="${STIMME:-de_DE-mls-medium}"
+STIMME="${STIMME:-de_DE-thorsten-medium}"
 
 # de_DE-thorsten-medium -> de/de_DE/thorsten/medium
 IFS=- read -r LOCALE SPRECHER QUALI <<< "$STIMME"

scripts/make-icons.ts

@@ -0,0 +1,133 @@
+// Zeichnet die App-Symbole fuer das Pult (PWA) und schreibt sie nach
+// apps/overlay-web/public/icons/. Ohne Grafikprogramm und ohne Abhaengigkeit:
+// ein paar abgerundete Rechtecke, als PNG von Hand kodiert.
+//
+// Aufruf:  node scripts/make-icons.ts
+//
+// Die PNGs liegen im Repo. Neu zeichnen nur, wenn sich das Motiv aendert.
+
+import fs from 'node:fs';
+import path from 'node:path';
+import zlib from 'node:zlib';
+import { fileURLToPath } from 'node:url';
+
+const ZIEL = path.resolve(path.dirname(fileURLToPath(import.meta.url)),
+  '..', 'apps', 'overlay-web', 'public', 'icons');
+
+type Farbe = [number, number, number];
+const hex = (h: string): Farbe =>
+  [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
+
+const TASTEN: Farbe[] = ['#a970ff', '#4fd1c5', '#ff4fa3', '#ffc53d'].map(hex);
+const OBEN = hex('#221a3a');
+const UNTEN = hex('#0d0b14');
+
+/** Abstand zum Rand eines abgerundeten Rechtecks, negativ heisst innen. */
+function rundRect(x: number, y: number, x0: number, y0: number, x1: number, y1: number, r: number): number {
+  const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
+  const hx = (x1 - x0) / 2 - r, hy = (y1 - y0) / 2 - r;
+  const qx = Math.abs(x - cx) - hx, qy = Math.abs(y - cy) - hy;
+  return Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - r;
+}
+
+type Motiv = {
+  /** Hintergrund bis zum Rand (maskable, Apple) oder selbst abgerundet. */
+  vollflaechig: boolean;
+  /** Wo die vier Tasten sitzen, als Anteil der Kantenlaenge. */
+  von: number; bis: number;
+};
+
+function zeichne(groesse: number, m: Motiv): Buffer {
+  const px = Buffer.alloc(groesse * groesse * 4);
+  const ss = 4;                                     // 4x4 Unterabtastung je Pixel
+  const spalt = (m.bis - m.von) * 0.09;
+  const taste = (m.bis - m.von - spalt) / 2;
+
+  for (let py = 0; py < groesse; py++) {
+    for (let pxi = 0; pxi < groesse; pxi++) {
+      let r = 0, g = 0, b = 0, a = 0;
+      for (let sy = 0; sy < ss; sy++) {
+        for (let sx = 0; sx < ss; sx++) {
+          const x = (pxi + (sx + 0.5) / ss) / groesse;
+          const y = (py + (sy + 0.5) / ss) / groesse;
+
+          const imGrund = m.vollflaechig || rundRect(x, y, 0, 0, 1, 1, 0.22) <= 0;
+          if (!imGrund) continue;
+          let c: Farbe = [0, 1, 2].map((i) => OBEN[i]! + (UNTEN[i]! - OBEN[i]!) * y) as Farbe;
+
+          for (let i = 0; i < 4; i++) {
+            const tx = m.von + (i % 2) * (taste + spalt);
+            const ty = m.von + Math.floor(i / 2) * (taste + spalt);
+            if (rundRect(x, y, tx, ty, tx + taste, ty + taste, taste * 0.26) <= 0) {
+              // Oben etwas heller: sieht nach Taste aus statt nach Flaeche.
+              const hell = 1.12 - 0.22 * ((y - ty) / taste);
+              c = TASTEN[i]!.map((v) => Math.min(255, v * hell)) as Farbe;
+            }
+          }
+          r += c[0]; g += c[1]; b += c[2]; a += 255;
+        }
+      }
+      const n = ss * ss, o = (py * groesse + pxi) * 4;
+      // Vormultipliziert gemittelt, damit die Kanten nicht dunkel ausfransen.
+      const deck = a / n;
+      px[o] = deck ? Math.round(r / (a / 255)) : 0;
+      px[o + 1] = deck ? Math.round(g / (a / 255)) : 0;
+      px[o + 2] = deck ? Math.round(b / (a / 255)) : 0;
+      px[o + 3] = Math.round(deck);
+    }
+  }
+  return png(groesse, groesse, px);
+}
+
+// ---------------------------------------------------------------- PNG
+
+const CRC = new Uint32Array(256).map((_, n) => {
+  let c = n;
+  for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+  return c >>> 0;
+});
+function crc32(b: Buffer): number {
+  let c = 0xffffffff;
+  for (const v of b) c = CRC[(c ^ v) & 0xff]! ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+function block(typ: string, daten: Buffer): Buffer {
+  const len = Buffer.alloc(4); len.writeUInt32BE(daten.length);
+  const td = Buffer.concat([Buffer.from(typ, 'latin1'), daten]);
+  const crc = Buffer.alloc(4); crc.writeUInt32BE(crc32(td));
+  return Buffer.concat([len, td, crc]);
+}
+function png(w: number, h: number, rgba: Buffer): Buffer {
+  const kopf = Buffer.alloc(13);
+  kopf.writeUInt32BE(w, 0); kopf.writeUInt32BE(h, 4);
+  kopf[8] = 8; kopf[9] = 6; kopf[10] = 0; kopf[11] = 0; kopf[12] = 0;   // 8 bit RGBA
+  const zeilen = Buffer.alloc((w * 4 + 1) * h);
+  for (let y = 0; y < h; y++) rgba.copy(zeilen, y * (w * 4 + 1) + 1, y * w * 4, (y + 1) * w * 4);
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    block('IHDR', kopf),
+    block('IDAT', zlib.deflateSync(zeilen, { level: 9 })),
+    block('IEND', Buffer.alloc(0)),
+  ]);
+}
+
+// ---------------------------------------------------------------- los
+
+const NORMAL: Motiv = { vollflaechig: false, von: 0.2, bis: 0.8 };
+// Maskable: alles Wichtige im Kreis mit 40 % Radius, der Rest wird abgeschnitten.
+const MASKE: Motiv = { vollflaechig: true, von: 0.29, bis: 0.71 };
+// Apple rundet selbst und mag keine Durchsicht.
+const APPLE: Motiv = { vollflaechig: true, von: 0.22, bis: 0.78 };
+
+fs.mkdirSync(ZIEL, { recursive: true });
+const dateien: Array<[string, number, Motiv]> = [
+  ['pult-192.png', 192, NORMAL],
+  ['pult-512.png', 512, NORMAL],
+  ['pult-maskable-512.png', 512, MASKE],
+  ['apple-touch-icon.png', 180, APPLE],
+];
+for (const [name, groesse, motiv] of dateien) {
+  const daten = zeichne(groesse, motiv);
+  fs.writeFileSync(path.join(ZIEL, name), daten);
+  console.log(`${name}  ${groesse}x${groesse}  ${(daten.length / 1024).toFixed(1)} KB`);
+}