Release 0.5.2

Release 0.5.1
Release 0.5.0
2026-10-22 13:51:30 +02:00 · 2026-10-22 07:56:25 +02:00 · 2026-10-22 00:28:49 +02:00 · 2026-10-21 23:52:05 +02:00
52 changed files with 11335 additions and 467 deletions
@@ -3,7 +3,7 @@
 	"title": "Sendewerk",
 	"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
 	"tagline": "Vom Fundstück bis zur Livesendung",
-	"version": "0.3.0",
+	"version": "0.5.0",
 	"healthCheckPath": "/healthz",
 	"httpPort": 3000,
 	"addons": {
@@ -2,9 +2,9 @@
 Sendewerk ist die redaktionelle Webanwendung für den Weg vom vorbereiteten
 Inhalt bis zur moderierten und archivierten Sendung. Der aktuelle Stand umfasst
-Etappe 1 bis 3: technisches Grundgerüst, Anmeldung und Rollen sowie einen
+Etappe 1 bis 5: technisches Grundgerüst, Anmeldung und Rollen, einen
-persistenten Fundus mit Eingang, Editor, Taxonomie, privaten Bildern und
+persistenten Fundus, den Sendungsbaukasten sowie Live-Steuerung und eine
-Konfliktschutz. Sendungsbau und Live-Steuerung folgen in späteren Etappen.
+abgesicherte Präsentationsausgabe. Abschluss und Archivierung folgen in Etappe 6.
 ## Voraussetzungen
@@ -77,12 +77,80 @@ automatisch; ein sichtbarer Status meldet Erfolg, Fehler oder eine parallele
 Änderung. In diesem Fall muss die Seite neu geladen werden, bevor erneut
 gespeichert wird.
 Bereits gesendete Pieces und Pieces mit einer Einplanung in einer noch nicht
 abgeschlossenen Sendung sind standardmäßig ausgeblendet. Als gesendet gilt nur
 eine erledigte Verwendung in einer abgeschlossenen Sendung; übersprungene oder
 reservierte Inhalte gelten nicht als gesendet. Über **Auch verwendete Inhalte
 zeigen** und **Auch eingeplante Inhalte zeigen** lassen sich beide Gruppen
 unabhängig einblenden. Dann erscheinen auch Datum, Sendung und die aufklappbare
 Verwendungshistorie.
 Markdown ist in Einleitung, Recherche, Moderation, Überleitung und Präsentation
 möglich. Die Ausgabe wird serverseitig auf eine begrenzte Auswahl sicherer
 Elemente und Links reduziert. Bilder dürfen höchstens 5 MB groß sein und müssen
 als JPEG, PNG, WebP oder GIF erkannt werden. Sie liegen im konfigurierten
 Uploadverzeichnis und sind nur über eine angemeldete Route erreichbar.
 Für die Präsentation kann ein Piece alternativ genau eine seiner vorhandenen
 Quellen als Linkkarte oder Video verwenden. Linktitel, Anreißer und Bildadresse
 lassen sich manuell korrigieren. **Vorschau laden** ruft Metadaten ausdrücklich
 neu ab; manuell geänderte Felder werden dabei nicht überschrieben. Die
 **Präsentation testen**-Ansicht öffnet den aktuellen Piece-Inhalt isoliert und
 verändert weder eine Sendung noch deren laufende Ausgabe.
 ## Sendungen planen
 Unter **Sendungen** lässt sich ein neuer Stream leer, mit dem Standardablauf
 oder als Spieleabend anlegen. Abschnitte sind frei benennbar und können eine
 explizite Dauer erhalten; andernfalls ergibt sich ihre Dauer aus den
 eingeplanten Pieces. Die Reservebank zählt nie zur Planzeit.
 Der sendefertige Fundus steht neben dem Ablauf. Pieces können mehrfach
 eingeplant und je Verwendung mit eigenem Titel, eigener Dauer und eigenen
 Redaktionstexten bearbeitet werden, ohne das Original zu verändern. Das
 Stift-Symbol öffnet dafür einen auch mobil scrollbaren Editor-Dialog. **Aus
 Fundus aktualisieren** übernimmt auf Wunsch Titel, Dauer und Redaktionstexte des
 aktuellen Originals; eigene Notizen, Live-Status und gemessene Zeiten bleiben
 erhalten. Abschnitte und Verwendungen lassen sich per Drag-and-drop sowie
 gleichwertig mit sichtbaren Schaltflächen und Auswahlfeldern verschieben.
 Twitch-Titel und Ankündigung sind kopierbar. Gleichzeitige Änderungen werden
 über die Revision der gesamten Sendung erkannt und nicht still überschrieben.
 Die Quellspalte blendet gesendete und bereits in derselben Sendung eingeplante
 Originale zunächst aus; beide Gruppen lassen sich unabhängig wieder anzeigen.
 Eine konkrete Einplanung kann direkt hinter sich dupliziert werden. Dabei
 bleiben ihre angepassten Texte und ihre Dauer erhalten, während Live-Status und
 gemessene Zeiten neu beginnen. **Piece duplizieren** im Fundus erzeugt dagegen
 weiterhin einen eigenständigen Fundusinhalt.
 ## Live moderieren und präsentieren
 Die Live-Steuerung öffnet sich aus einer geplanten Sendung. Sie zeigt
 Einleitung, Moderationsstichpunkte und Überleitung in einstellbarer
 Prompter-Schrift; die private Recherche bleibt standardmäßig geschlossen.
 Zeiten und Ablaufleiste können ausgeblendet werden. Schriftgröße, Sichtbarkeit
 und Leseposition bleiben im Browser erhalten.
 Start, Erledigen, Überspringen und Zurück werden persistent mit tatsächlichen
 Zeitintervallen gespeichert. Wiederholte Befehle erzeugen keine doppelte
 Zeitbuchung. Offene Pieces und die Reserve lassen sich während der Sendung
 sortieren beziehungsweise als nächster Beitrag einfügen.
 Das separate Präsentationsfenster unter `/heinzlive/...` verwendet einen langen,
 widerrufbaren Zufallstoken. Es ändert sich ausschließlich durch die Aktion
 **Präsentieren** und erhält nur den bei der Einplanung gespeicherten Text-, Link-
 oder Video-Snapshot. YouTube- und TikTok-Adressen werden auf validierte IDs
 reduziert und ohne Autoplay in offiziellen Player-Iframes dargestellt. Andere
 oder unvollständige Videoquellen erscheinen als Linkkarte. Recherche,
 Moderationsnotizen, eigene Notizen, Kontodaten und interne Dateipfade werden
 weder im HTML noch im JSON-Zustand ausgeliefert. Der Token ist ein
 Zugangsgeheimnis und darf nicht weitergegeben oder protokolliert werden.
 Metadaten und externe Vorschaubilder werden ausschließlich serverseitig mit
 DNS-, Redirect-, Zeit- und Größenlimits abgerufen. Private und lokale
 Netzwerkziele sind gesperrt. Eingebettetes HTML oder Skripte einer Quellseite
 werden nicht übernommen.
 ## Befehle
 | Befehl               | Zweck                                                      |
@@ -158,6 +226,7 @@ Medien und redaktionellen Inhalten werden dadurch nicht verändert.
 Die direkten Laufzeit- und Werkzeugabhängigkeiten verwenden MIT- oder
 Apache-2.0-Lizenzen: Svelte/SvelteKit, Vite, Vitest, ESLint und
-`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html und file-type sind
+`better-sqlite3`, `@node-rs/argon2`, Marked, sanitize-html, file-type und
-MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und Playwright stehen
+Metascraper sind MIT-lizenziert; Nodemailer verwendet MIT-0, TypeScript und
-unter Apache-2.0. Die Lockdatei fixiert den tatsächlich installierten Baum.
+Playwright stehen unter Apache-2.0. Die Lockdatei fixiert den tatsächlich
 installierten Baum.
@@ -91,3 +91,127 @@
  ungewollten horizontalen Überlauf
 - Mobile Darkmode-Aufnahme des Piece-Editors visuell kontrolliert
 - `bash -n start.sh` und `git diff --check`: erfolgreich
 ## Etappe 4
 | Kriterium                                 | Nachweis                                                                                    | Stand                 |
 | ----------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- |
 | Spieleabend und mehrere JC-/Spieleblöcke  | persistierte Spieleabend-Vorlage, Seed-Sendung und Browserrundlauf mit Standardablauf       | erfüllt am 21.10.2026 |
 | Reihenfolge und Texte bleiben nach Reload | Verhaltenstests sowie Browsertest für Tastatur- und Drag-and-drop-Sortierung                | erfüllt am 21.10.2026 |
 | Original bleibt unverändert               | Service- und Browsertest planen dasselbe Piece mehrfach mit eigenen Titeln, Notizen, Dauern | erfüllt am 21.10.2026 |
 | Keine doppelte Dauer; Reserve zählt nicht | explizite und summierte Abschnitte sowie Reserve in Verhaltenstest und Browser geprüft      | erfüllt am 21.10.2026 |
 | Entfernen betrifft nur Einplanung         | Verhaltenstest löscht Verwendung und Abschnittskopie, nicht das Original                    | erfüllt am 21.10.2026 |
 | Sendungsänderung verändert keine Vorlage  | tiefe Vorlagenkopie vor und nach Abschnittsänderung verglichen                              | erfüllt am 21.10.2026 |
 | Smartphone-Planungsablauf                 | Abschnittsanlage, Pane-Umschaltung und Überlauf bei 390 Pixeln geprüft                      | erfüllt am 21.10.2026 |
 | Gleichwertige Bedienwege                  | Drag-and-drop, Enter auf Verschiebeschaltfläche sowie klick-/touchbare Zielauswahl geprüft  | erfüllt am 21.10.2026 |
 | Lokale Planungsaktualisierung             | Quelle und Reserve per Drag-and-drop ohne Dokumentreload; lokaler Speicherzustand geprüft   | erfüllt am 21.10.2026 |
 | Sichtbare Einfügeposition                 | Abschnitt, Fundusquelle und Reserve zeigen vor dem Drop Vorschau und transparentes Original | erfüllt am 21.10.2026 |
 | Piece-Dauer in Minuten                    | Fundus- und Verwendungseditor rechnen Minuten serverseitig in ganze Sekunden um             | erfüllt am 21.10.2026 |
 | Gleichzeitige Änderungen                  | veraltete showweite Revision rollt die gesamte Mutation zurück                              | erfüllt am 21.10.2026 |
 ## Ausgeführte Prüfungen Etappe 4
 - `npm run lint`: erfolgreich
 - `npm run check`: 0 Fehler und 0 Warnungen
 - `npm test`: 18 Tests in 4 Dateien erfolgreich
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
 - `npm run test:e2e`: 11 von 11 Browsertests erfolgreich
 - Browserprüfung bei 390, 768, 960, 1280 und 1440 Pixeln in beiden Themes ohne
  ungewollten horizontalen Überlauf
 - Mobile Aufnahme des vollständigen Sendungsbaukastens visuell kontrolliert
 - `bash -n start.sh` und `git diff --check`: erfolgreich
 ## Etappe 5
 | Kriterium                             | Nachweis                                                                                        | Stand                 |
 | ------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------- |
 | Lesbare Moderation                    | Prompter-Schrift, Einleitung und Überleitung im Browser; Recherche initial geschlossen          | erfüllt am 22.10.2026 |
 | Wiederherstellung                     | Live-Stand, Laufintervalle, Schriftgröße und Leseposition nach Neuladen geprüft                 | erfüllt am 22.10.2026 |
 | Keine doppelte Zeiterfassung          | Verhaltenstest wiederholt dieselbe Befehls-ID und findet genau ein Zeitintervall                | erfüllt am 22.10.2026 |
 | Explizite Präsentation                | Zweitfenster bleibt nach Start leer und ändert sich erst durch „Präsentieren“                   | erfüllt am 22.10.2026 |
 | Getrennte sichere Ausgabe             | anonymer Browserkontext prüft Text, Bild, HTML, JSON und fremde Medien ohne private Daten       | erfüllt am 22.10.2026 |
 | Reserve und Reihenfolge               | Reserve als nächstes Piece eingefügt; offene Reihenfolge und serverseitige Live-Grenze geprüft  | erfüllt am 22.10.2026 |
 | Popup- und Verbindungsfehler sichtbar | blockiertes Popup sowie unterbrochenes und wiederhergestelltes State-Polling im Browser geprüft | erfüllt am 22.10.2026 |
 | Persistente Linkvorschau              | Quellwahl, manuelle Felder, Reload, fehlendes Bild und isolierte Testansicht im Browser geprüft | erfüllt am 22.10.2026 |
 | Sichere Metadatenabrufe               | Tests sperren private IPv4-/IPv6-Ziele; Redirect-, Größen- und Zeitlimits sind implementiert    | erfüllt am 22.10.2026 |
 | Validierte Videoplayer                | YouTube-URL-Varianten, TikTok-ID, Zeitmarke und Playerwechsel automatisiert geprüft             | erfüllt am 22.10.2026 |
 | Präsentationssnapshot                 | Einplanung, Duplikation und explizite Aktualisierung aus dem Original im Servicetest geprüft    | erfüllt am 22.10.2026 |
 | Reale OBS-Browserquelle               | lokale tokenisierte Browserausgabe vorhanden; kein OBS auf der Prüfmaschine                     | offen                 |
 | Reale Anbieterwiedergabe              | automatisierte Tests fangen YouTube-/TikTok-Requests lokal ab                                   | offen                 |
 ## Ausgeführte Prüfungen Etappe 5
 - `npm run lint`: erfolgreich
 - `npm run check`: 0 Fehler und 0 Warnungen
 - `npm test`: 29 Tests in 6 Dateien erfolgreich
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
 - `npm run test:e2e`: 14 von 14 Browsertests erfolgreich
 - Anonymer zweiter Chromium-Kontext mit Präsentationstext, Quelle, geschütztem
  Bild und gefiltertem JSON geprüft
 - Mobile Aufnahme der Live-Steuerung bei 390 × 844 Pixeln und Desktopaufnahme
  der heinzlive-Ausgabe visuell kontrolliert
 - Popup-Blockade sowie Verbindungsabbruch und automatische Wiederverbindung im
  Browser geprüft
 - YouTube-/TikTok-Iframes, Playerwechsel, mobile Hochformatausgabe,
  Linkkartenvorschau ohne Bild, isolierte Testansicht und private Datenfilterung
  mit lokal abgefangenen Anbieterrequests geprüft
 - SSRF-Blockade einer privaten Zieladresse über die sichtbare Editorfehlermeldung
  geprüft
 - `bash -n start.sh` und `git diff --check`: erfolgreich
 ## Gezielte Fundus- und Einplanungsanpassung
 | Kriterium                                   | Nachweis                                                                                   | Stand                 |
 | ------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------- |
 | Gesendet korrekt abgeleitet                 | Servicetest schließt offene, übersprungene, Reserve- und nicht abgeschlossene Nutzung aus  | erfüllt am 22.10.2026 |
 | Historie und Fundusfilter                   | Browser prüft letztes Datum, Sendungslink, weitere Verwendungen und Sofortfilter           | erfüllt am 22.10.2026 |
 | Unabhängige Quellfilter                     | Browser kombiniert verwendet/eingeplant getrennt und erhält sie über Suchfilter            | erfüllt am 22.10.2026 |
 | Reserve und Mehrfacheinplanung              | Reserve zählt als eingeplant; bewusstes Wiedereinblenden erlaubt weitere Einplanung        | erfüllt am 22.10.2026 |
 | Rückkehr nach Entfernen                     | Browser entfernt die letzte Reserveeinplanung und bietet das Original sofort wieder an     | erfüllt am 22.10.2026 |
 | Angepasste Einplanung dupliziert            | Service und Browser prüfen Position, Texte, Notizen, Dauer und Reload                      | erfüllt am 22.10.2026 |
 | Live-Zustand des Duplikats zurückgesetzt    | Servicetest prüft `open`, neue ID und fehlende Zeitintervalle                              | erfüllt am 22.10.2026 |
 | Original unverändert                        | Piece-Anzahl und Original-ID vor und nach Einplanungsduplikation verglichen                | erfüllt am 22.10.2026 |
 | Speicherfehler nicht als Erfolg dargestellt | veraltete Revision rollt Duplikation vollständig zurück                                    | erfüllt am 22.10.2026 |
 | Globale aktive Einplanung ausgeblendet      | Browser prüft den unabhängigen Filter über mehrere nicht abgeschlossene Sendungen          | erfüllt am 22.10.2026 |
 | Snapshot ausdrücklich aktualisiert          | Service prüft neue Originaltexte und erhaltene Notizen/Intervalle; Browser löst Aktion aus | erfüllt am 22.10.2026 |
 | Fehlendes Original atomar behandelt         | Servicetest prüft Fehler und unveränderte Sendungsrevision                                 | erfüllt am 22.10.2026 |
 | Verwendungsdialog responsiv                 | Browser prüft Desktop/Mobil, Reserve, erreichbare Aktionen und sichtbare Konfliktfehler    | erfüllt am 22.10.2026 |
 ## Ausgeführte Prüfungen Fundus und Einplanung
 - `npm test`: 22 Tests in 5 Dateien erfolgreich
 - `npm run lint`: erfolgreich
 - `npm run check`: 0 Fehler und 0 Warnungen
 - gezielter Playwright-Lauf: 4 von 4 Browsertests erfolgreich
 - `npm run test:e2e`: 12 von 12 Browsertests erfolgreich
 - Desktopansichten von Fundushistorie, kombinierten Sendungsfiltern und
  Verwendungsdialog sowie mobile Quellspalte und mobiler Dialog bei 390 × 844
  Pixeln visuell kontrolliert
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
 - `bash -n start.sh` und `git diff --check`: erfolgreich
 ## Redaktionelles Piece-Arbeitsblatt
 | Kriterium                                | Nachweis                                                                                          | Stand                 |
 | ---------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
 | Schreiben steht im Mittelpunkt           | Desktop- und Mobilprüfung zeigt Fundstück, Recherche und drei Sendungstexte im primären Lesefluss | erfüllt am 22.10.2026 |
 | Kontext bleibt vollständig erreichbar    | Quellen, Einordnung, Präsentation und Bilder auf Desktop sowie als vier mobile Werkzeuge geprüft  | erfüllt am 22.10.2026 |
 | Textfelder unabhängig bearbeitbar        | Recherche und Moderationsstichpunkte im Browser gleichzeitig geöffnet und gespeichert             | erfüllt am 22.10.2026 |
 | Bestehender Formvertrag bleibt erhalten  | Autosave, Reload, Taxonomie, Quelle, Markdown, Upload, Archiv und Duplikat im Browser durchlaufen | erfüllt am 22.10.2026 |
 | Konflikte und Speicherfehler sichtbar    | parallele Revision sowie Offline-Autosave mit erfolgreicher manueller Wiederholung geprüft        | erfüllt am 22.10.2026 |
 | Schneller Video-Einstieg ohne Einordnung | Link im Eingang aufgenommen, direkt geöffnet, beschrieben und isoliert als Video getestet         | erfüllt am 22.10.2026 |
 | Responsive Darstellung und beide Themes  | 1440 × 1000 und 390 × 844 in Light/Dark ohne horizontalen Überlauf visuell kontrolliert           | erfüllt am 22.10.2026 |
 ## Ausgeführte Prüfungen Piece-Arbeitsblatt
 - `npm run lint`: erfolgreich
 - `npm run check`: 0 Fehler und 0 Warnungen
 - `npm test`: 29 Tests in 6 Dateien erfolgreich
 - `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
 - gezielter Playwright-Lauf für Autosave, Offline-Fehler, Konflikt und Upload:
  1 von 1 Browsertest erfolgreich
 - `npm run test:e2e`: 15 von 15 Browsertests erfolgreich
 - Desktop Light/Dark sowie Smartphone Light/Dark und mobiles
  Präsentationswerkzeug visuell kontrolliert; langer Titel bricht vollständig um,
  Werkzeugfläche ist opak und die Speicherleiste überdeckt mobil keine Eingaben
 - `bash -n start.sh` und `git diff --check`: erfolgreich
@@ -31,17 +31,18 @@ spätere API dieselben Regeln verwenden.
 - Zeitpunkte werden als ISO-8601-UTC-Text gespeichert. Dauern sind nichtnegative
  ganze Sekunden. Zeitzonendarstellung ist `Europe/Berlin`.
-## Geplantes Gesamtdatenmodell
+## Gesamtdatenmodell
-Etappe 1 materialisiert nur den für echte Vorschau- und Seed-Daten benötigten
+Die ersten fünf Etappen materialisieren Identität, Inhaltsverwaltung,
-Kern. Folgende Grenzen sind für spätere Migrationen bereits festgelegt.
+Sendungsplanung und Live-Durchführung. Folgende Grenzen gelten für umgesetzte
 und spätere Bereiche.
 | Bereich     | Geplante Entitäten und Beziehungen                                                                                                        |
-| ----------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | Identität   | `users`, Rollen, Sessions, Einladungen, Reset-Tokens und Sperren sind umgesetzt; technische Zugänge folgen später                         |
 | Taxonomie   | getrennte `section_categories`, `formats`, `topics`; Pieces und Vorschläge über Zuordnungstabellen mehrfach verknüpft                     |
 | Inhalt      | `pieces` mit Status, Dauer, Revision, getrennten Textbereichen, Quellen und privaten Medien; Vorlagen sind definierte Startwerte          |
-| Sendungsbau | `shows`, geordnete `show_sections`, kopierte `piece_usages`, Reservebank und Sendungsvorlagen; Original-ID bleibt Referenz       |
+| Sendungsbau | `shows`, geordnete `show_sections`, kopierte `piece_usages`, Reservebank und Sendungsvorlagen sind umgesetzt; Original-ID bleibt Referenz |
 | Live        | expliziter Live-Stand, aktuelles Element, Status je Verwendung, tatsächliche Zeiten und getrennte Präsentationsausgabe                    |
 | Historie    | unveränderliche Abschluss-Snapshots und Verwendungshistorie; Übersprungenes zählt nicht als gesendet                                      |
 | Freigaben   | widerrufbare, gehashte Lesetokens mit Sendung, Umfang, Passwortoption und Ablaufzeit                                                      |
@@ -96,12 +97,19 @@ erhalten ausschließlich kompakte Piece-Daten; private Recherche und vollständi
 Redaktionstexte werden nur an den angemeldeten Editor ausgeliefert. Themen und
 Abschnittskategorien sind Mehrfachzuordnungen, das Format bleibt eine einzelne
 unabhängige Zuordnung. Quellen werden gemeinsam mit einem Piece atomar ersetzt.
 Ein Piece kann für die Präsentation Text oder genau eine vorhandene Quelle als
 Linkkarte beziehungsweise Video auswählen. Abgerufene Metadaten und Kennzeichen
 für manuell korrigierte Felder liegen am Piece; ein erneuter Abruf überschreibt
 diese Felder nicht.
 Jedes Piece besitzt eine ganzzahlige Revision. Speichern, Archivieren und
 Medienänderungen verwenden ein bedingtes Update auf die erwartete Revision.
 Eine veraltete Bearbeitung liefert einen Konflikt und verändert weder Piece noch
 Zuordnungen. Archivieren merkt sich den vorherigen Arbeitsstatus für die
 Wiederherstellung. Duplikate erhalten neue IDs und unabhängige Bilddateien.
 Piece-Dauern werden in den Fundus- und Verwendungseditoren als Minuten erfasst,
 an der Servergrenze auf volle Sekunden gerundet und ausschließlich als ganze
 Sekunden persistiert.
 Markdown wird roh gespeichert, mit Marked serverseitig gerendert und danach mit
 sanitize-html auf eine kleine Allowlist reduziert. Bilder werden nicht über
@@ -111,6 +119,113 @@ sind zufällige IDs; Originalnamen werden nie als Pfad verwendet. `/media/[id]`
 prüft die Anmeldung und liefert private Antworten mit `no-store`, `nosniff`,
 Same-Origin-Ressourcenrichtlinie und restriktiver CSP aus.
 ## Sendungsbau
 Etappe 4 bündelt alle Planungsmutationen in `src/lib/server/shows.ts`. Eine
 Sendung ist die Konflikt- und Transaktionsgrenze: Jede Änderung an Metadaten,
 Abschnitten, Verwendungen oder Reihenfolge vergleicht die erwartete Revision und
 erhöht sie atomar. Abgeschlossene Sendungen sind bereits an dieser Grenze gegen
 weitere Bearbeitung geschützt.
 Beim Einplanen werden Titel, Dauer, Einleitung, Recherche, Moderation,
 Überleitung und der vollständige Präsentationszustand aus dem sendefertigen
 Piece kopiert. Dazu gehören Modus, ausgewählte Quelladresse samt Zeitmarke,
 Metadaten und validierte Anbieter-ID. Eigene Notizen liegen ausschließlich an
 der Verwendung. Die Referenz zum Original bleibt für Historie und
 Nachvollziehbarkeit erhalten, wird aber nicht live gespiegelt. Eine explizite
 Aktualisierung aus dem Fundus ersetzt Titel, Dauer, alle fünf Redaktionstexte
 und den Präsentationszustand atomar aus dem referenzierten Original. Eigene
 Notizen, Status und vorhandene Live-Intervalle werden dabei nicht verändert;
 fehlt das Original oder ist die Sendungsrevision veraltet, wird die gesamte
 Mutation verworfen.
 Eine Einplanung zu duplizieren kopiert genau diesen Snapshot mit derselben
 Original-ID direkt hinter das Ausgangselement. Die neue Verwendung erhält den
 Status `open`, eine neue ID und damit weder Live-Referenzen noch Zeitintervalle.
 Die Verwendungshistorie wird nicht separat gepflegt. Sie wird über die
 Original-ID aus Verwendungen mit Status `done` in abgeschlossenen Sendungen
 abgeleitet; Reservebank und alle anderen Verwendungs- oder Sendungsstatus sind
 ausgeschlossen. Über dieselbe Original-ID wird unabhängig davon ermittelt, ob
 mindestens eine Verwendung in einer noch nicht abgeschlossenen Sendung liegt.
 Der allgemeine Fundus blendet diesen globalen Kontext standardmäßig aus. Die
 Quellspalte einer Sendung betrachtet für ihren separaten Einplanungsfilter nur
 die aktuelle Sendung einschließlich Reservebank.
 Jede Sendung besitzt intern genau einen ausgeblendeten Reserveabschnitt. Dadurch
 verwenden Plan und Reserve dieselbe geprüfte Verwendungslogik, während die
 Reserve in der öffentlichen Struktur und allen Dauerberechnungen getrennt
 bleibt. Positionen werden nach jeder Transaktion kollisionsfrei normalisiert.
 Eine explizite Abschnittsdauer ersetzt die Summe der Verwendungen vollständig.
 Sendungsvorlagen und ihre Abschnitte sind eigene Tabellen. Beim Anlegen werden
 die Abschnitte mit neuen IDs kopiert; spätere Änderungen an der Sendung können
 die Vorlage deshalb nicht verändern.
 Die Editorformulare bleiben progressive SvelteKit-Form-Actions, werden im
 Browser aber mit `use:enhance` gesendet. Der Verwendungseditor liegt in einem
 nativen Dialog, den ein beschrifteter Icon-Button öffnet. Dadurch bleibt das
 Dokument bei Planungsmutationen bestehen; nur die serverseitigen Seitendaten
 werden aktualisiert. Ladeanzeige und FLIP-Animation liegen am betroffenen
 Abschnitt oder an der betroffenen Verwendung. Eindeutige Drag-Griffe übertragen
 entweder eine Quellenkopie, einen Abschnitt oder eine Verwendung auf dieselben
 serverseitig geprüften Actions wie die alternativen Schaltflächen. Während des
 Ziehens bleibt das Original transparent an seinem Ausgangsort; eine flüchtige
 Vorschau in der Liste belegt bereits die anhand der Zeigerposition berechnete
 Zielhöhe und verdrängt dadurch die benachbarten Elemente. Persistiert wird erst
 beim Loslassen.
 Die Ausschlussfilter für gesendete und bereits eingeplante Pieces arbeiten
 clientseitig auf der serverseitig berechneten Kontextmenge. Ihr Zustand wird
 ohne Navigation in die URL übernommen und bei nachfolgenden Suchfiltern
 mitgesendet. Planmutationen invalidieren anschließend die Seitendaten, sodass
 das Entfernen der letzten Einplanung ein Original unmittelbar wieder anbietet.
 ## Live-Modus und Präsentationsgrenze
 `src/lib/server/live.ts` ist die Transaktionsgrenze der Live-Durchführung. Der
 Live-Stand besitzt eine eigene Revision. Jeder steuernde Befehl trägt zusätzlich
 eine vom Browser erzeugte Befehls-ID; `(show_id, command_id)` ist eindeutig und
 liefert bei Wiederholung das bereits gespeicherte Ergebnis. Tatsächliche Zeiten
 liegen als mehrere Start-/Endintervalle je Verwendung vor. Damit bleiben
 Zurückgehen, Wiederaufnahme und bereits abgeschlossene Laufzeit getrennt von der
 geplanten Dauer nachvollziehbar.
 Die interne Route `/live` benötigt weiterhin eine aktive Sitzung und darf
 Recherche, Moderation und eigene Arbeitsdaten lesen. Die separate Ausgabe
 `/heinzlive/[token]` liegt dagegen in einem reduzierten Layout ohne Navigation
 oder Nutzerdaten. In SQLite liegt nur der SHA-256-Hash des 256-Bit-Tokens; ein
 neu erzeugter Ausgabezugang widerruft den vorherigen. Page, Polling-JSON und
 Medienroute leiten ihre Daten aus einer eigenen Positivliste ab. Bilder werden
 nur ausgeliefert, wenn sie zum aktuell ausdrücklich präsentierten Piece gehören.
 Normale Auswahl, Fortschaltung oder Wiederaufnahme verändern den
 Präsentationsstand nicht. Die öffentliche Projektion liest ausschließlich den
 gespeicherten Verwendungssnapshot; spätere Änderungen am Original erscheinen
 erst nach einer ausdrücklichen Snapshot-Aktualisierung.
 Linkmetadaten werden nur auf ausdrückliche Aktion durch
 `src/lib/server/presentation.ts` geladen. Jeder HTTP(S)-Abruf löst den Zielhost
 serverseitig auf, sperrt lokale und private IPv4-/IPv6-Ziele und bindet den
 Request an die geprüfte Adresse. Dieselbe Prüfung gilt nach höchstens drei
 Redirects. Zeit- und Größenlimits begrenzen HTML, Anbieter-Metadaten und Bilder.
 Externe Vorschaubilder gelangen nur über token- beziehungsweise
 sitzungsgebundene Proxyrouten in die Ausgabe; fremdes HTML und fremde Skripte
 werden nie übernommen.
 Videoquellen werden aus der gespeicherten URL erneut auf eine streng validierte
 YouTube- oder TikTok-ID reduziert. Der Browser erhält nur daraus erzeugte
 offizielle Embed-URLs, startet sie nicht automatisch und ersetzt das Iframe bei
 jedem Inhaltswechsel. YouTube erhält die Startsekunde als Embed-Parameter;
 TikTok wird nach dessen Bereitschaft über die offizielle Player-`postMessage`-
 Schnittstelle positioniert. Nicht unterstützte oder unvollständige Videoquellen
 fallen auf eine normale Linkkarte zurück. Eine authentifizierte Testansicht
 verwendet denselben Renderer, schreibt aber keinen Live-Zustand.
 Die Ausgabe synchronisiert ihren kleinen öffentlichen Zustand per
 `no-store`-Polling. Der letzte gültige Inhalt bleibt bei einem Verbindungsfehler
 sichtbar; die Oberfläche kennzeichnet den Abbruch und versucht die Verbindung
 mit verlangsamtem Intervall erneut. Private Live-Daten werden nicht Teil dieses
 Zustandsobjekts.
 ## Oberflächenstruktur
 Die Hauptnavigation umfasst Eingang, Fundus, Sendungen, Archiv und Verwaltung.
@@ -120,17 +235,26 @@ die untere Hauptnavigation die Seitenleiste vollständig. Auf breiten Ansichten
 stehen Fundus und Ablauf nebeneinander. Bis einschließlich `72rem` werden sie
 über eine gut erreichbare Umschaltung einzeln gezeigt, damit auch schmale
 Desktopfenster ohne horizontalen Überlauf bedienbar bleiben.
-Der Live-Modus ist eine eigene, fokussierte Ansicht; die spätere
+Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
-Präsentationsausgabe erhält eine separate, strikt reduzierte Datenansicht.
+Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
 ohne interne Anwendungsnavigation.
-Etappe 1 zeigt Fundus, Sendungsbau und Live-Modus als sichtbare
+Der eigenständige Piece-Editor ordnet denselben Formvertrag als redaktionelles
-`Gestaltungsvorschau`. Die Daten kommen bereits aus SQLite, mutierende
+Arbeitsblatt an. Titel, Fundstück, private Recherche sowie Einleitung,
-Fachabläufe werden jedoch nicht vorgetäuscht.
+Moderationsstichpunkte und Überleitung bilden die primäre Schreibfläche.
 Quellen, Einordnung, Präsentation und eine Bildzusammenfassung liegen auf breiten
 Ansichten in einer kontextuellen Seitenleiste; auf kleinen Ansichten öffnen
 dieselben DOM-Formfelder als fokussierbare Werkzeugflächen und werden dabei nicht
 neu erzeugt oder ausgehängt. `EditorialMarkdownField` hält Lese- und
 Bearbeitungszustand je Textfeld lokal, während alle Werte weiterhin gemeinsam
 über die bestehende `save`-Action und Piece-Revision gespeichert werden. Die
 separate Bild-Action und alle Präsentationsactions bleiben eigene serverseitige
 Mutationen.
-## Sicherheitsgrenzen ab den Folgeetappen
+## Sicherheitsgrenzen
 Authentifizierung und Autorisierung werden seit Etappe 2 serverseitig an jeder
 betroffenen Route und Action geprüft. Markdown und fremdes HTML werden vor
-Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Spätere
+Ausgabe bereinigt. Uploadzugriff folgt denselben Rechten. Netzwerkabrufe für
-Netzwerkabrufe erhalten Schutz gegen interne Ziele, Größen-/Zeitlimits und
+Präsentationsmetadaten und Vorschaubilder schützen interne Ziele auch nach
-kontrollierte Redirects.
+DNS-Auflösung und Redirects und besitzen Größen-, Zeit- und Redirectlimits.
@@ -1,6 +1,6 @@
 # Entscheidungen
-Stand der Quellenprüfung: 21. Oktober 2026. Verwendet wurden offizielle
+Stand der Quellenprüfung: 22. Oktober 2026. Verwendet wurden offizielle
 Dokumentationen und die npm-Registry für konkrete Paket-Metadaten.
 ## D-001: SvelteKit 3 und Node-Unterstützung
@@ -172,3 +172,107 @@ mit sicherheitsrelevanten Headern aus. Das Adapter-Requestlimit liegt mit 6 MB
 knapp oberhalb des fachlichen Dateilimits.
 Quelle: <https://owasp.org/www-community/vulnerabilities/Unrestricted_File_Upload>
 ## D-014: Sendung als transaktionales Aggregat
 Eine ganzzahlige Revision auf `shows` schützt in Etappe 4 sämtliche Metadaten,
 Abschnitte, Verwendungen und Reihenfolgen gemeinsam. Jede Mutation erhöht die
 Revision in derselben SQLite-Transaktion. Damit können voneinander abhängige
 Listenänderungen nicht teilweise gespeichert oder durch einen veralteten
 Browserstand unbemerkt überschrieben werden.
 Verwendungen speichern vollständige redaktionelle Text- und Dauerkopien. Die
 Original-ID bleibt Referenz, ist aber keine Live-Datenquelle. Eine interne,
 eindeutige Reservesection pro Sendung erlaubt dieselben geprüften Verschiebe-
 und Löschoperationen für Plan und Reserve; Dauerabfragen schließen sie aus.
 ## D-015: Drag-and-drop nur als zusätzliche Bedienung
 Abschnitte, Verwendungen und gefilterte Quellen können über eindeutige Griffe
 gezogen werden. Dieselben Ergebnisse sind mit sichtbaren
 Hoch-/Runter-Schaltflächen und Zielauswahl erreichbar. Diese Bedienelemente
 funktionieren mit einfachem Klick, Touch und Tastatur auch ohne Drag-and-drop
 oder clientseitige Spezialgesten. Das folgt WCAG 2.2 SC 2.5.7;
 Tastaturzugang allein wäre keine ausreichende Zeigeralternative. Die
 zugehörigen Form-Actions werden progressiv verbessert: Ohne JavaScript bleiben
 normale POSTs möglich, mit JavaScript erfolgt die Aktualisierung ohne
 Dokumentreload und mit lokalem Speicherzustand.
 Quellen:
 - <https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements>
 - <https://svelte.dev/docs/kit/form-actions>
 ## D-016: Live-Befehle idempotent, tatsächliche Zeiten als Intervalle
 Die Live-Steuerung verwendet eine eigene Revision und zusätzlich eine pro
 Bedienaktion erzeugte Befehls-ID. Die Datenbank akzeptiert jede Kombination aus
 Sendung und Befehls-ID nur einmal. Ein nach Verbindungsabbruch wiederholter
 Befehl liefert dieselbe Ergebnisrevision und erzeugt weder einen zweiten
 Statuswechsel noch ein zweites Zeitintervall. Laufzeit wird nicht als einzelner
 überschreibbarer Wert, sondern als Summe abgeschlossener und höchstens eines
 aktiven Intervalls ermittelt. Dadurch bleiben Zurückgehen und Wiederaufnahme
 korrekt.
 ## D-017: Präsentationsausgabe als Positivliste mit gehashtem Zugang
 Die heinzlive-Ausgabe ist kein eingeschränkter Aufruf der internen Live-Ansicht,
 sondern eine eigene Datenprojektion. Zulässig sind ausschließlich ausdrücklich
 präsentierter Titel und Präsentationstext, öffentliche Quellen sowie zugehörige
 Bilder und Alternativtexte. Recherche, Einleitung, Moderation, eigene Notizen,
 Ablauf, Nutzer und interne Dateinamen werden nicht in HTML oder JSON übernommen.
 Ein zufälliger 256-Bit-Token steht in der URL, während SQLite nur seinen
 SHA-256-Hash speichert. Medienzugriff prüft Token, aktuelle Präsentation und
 Bildzuordnung gemeinsam. Synchronisierung erfolgt über kleines `no-store`-
 Polling statt über eine dauerhaft offene Serververbindung.
 ## D-018: Verwendung aus bestehenden Sendungsdaten ableiten
 „Gesendet“ ist kein Zustand am Fundus-Piece. Die Anzeige wird ausschließlich
 aus der vorhandenen Original-ID, einer erledigten Verwendung außerhalb der
 Reservebank und dem Status `completed` ihrer Sendung abgeleitet. Dadurch können
 Einplanung, Reserve und Überspringen ein Original nicht versehentlich als
 gesendet markieren, und mehrere tatsächliche Verwendungen bleiben als Historie
 sichtbar.
 Eine Duplikation im Sendungsablauf kopiert den konkreten Verwendungssnapshot und
 nicht das Original-Piece. Die neue ID, der Status `open` und fehlende
 Live-Intervalle trennen sie von der bisherigen Durchführung. Der allgemeine
 Verwendungseditor darf den Live-Status nicht mehr aus Formulardaten schreiben;
 Statuswechsel bleiben der Live-Geschäftslogik vorbehalten.
 Eine bestehende Einplanung wird nicht automatisch mit späteren Änderungen am
 Original synchronisiert. Die ausdrücklich ausgelöste Aktion **Aus Fundus
 aktualisieren** überschreibt nur Titel, Dauer und Redaktionstexte. Eigene
 Notizen, Status und Messintervalle bleiben erhalten. Alle Zuordnungen und Filter
 verwenden ausschließlich `original_piece_id`, niemals veränderliche Titel. Im
 allgemeinen Fundus gilt „eingeplant“ global für jede nicht abgeschlossene
 Sendung; im Sendungsbau gilt es lokal für die aktuelle Sendung samt Reserve.
 ## D-019: Lokale Linkmetadaten und streng abgeleitete Video-Embeds
 Sendewerk verwendet Metascraper ausschließlich serverseitig, um Titel,
 Beschreibung, Bild und Herausgeber einer ausdrücklich gewählten vorhandenen
 Quelle zu ermitteln. Die Ergebnisse werden gespeichert und nicht bei jedem
 Seitenaufruf neu geladen. Manuell korrigierte Felder haben Vorrang. Ein eigener
 HTTP(S)-Client prüft Protokoll, Port, DNS-Ergebnisse und jedes Redirectziel,
 bindet den Request an die geprüfte öffentliche Adresse und begrenzt Redirects,
 Laufzeit und Antwortgröße. Damit ist weder ein externer Vorschaudienst noch die
 Übernahme fremden HTMLs erforderlich.
 Player werden nur für streng erkannte YouTube- und TikTok-URLs erzeugt. Aus der
 validierten Anbieter-ID baut Sendewerk die offiziellen Embed-Adressen selbst;
 gespeichertes oder fremd geliefertes Embed-HTML wird nicht verwendet. YouTube
 nutzt die datenschutzreduzierte `youtube-nocookie.com`-Adresse und den
 `start`-Parameter. TikTok erhält eine Startposition nach `onPlayerReady` über
 die dokumentierte Player-`postMessage`-API. Autoplay bleibt ausgeschaltet, und
 ein Inhaltswechsel ersetzt das Iframe vollständig.
 Quellen:
 - <https://github.com/microlinkhq/metascraper>
 - <https://developers.google.com/youtube/player_parameters>
 - <https://developers.google.com/youtube/terms/required-minimum-functionality>
 - <https://developers.tiktok.com/doc/embed-player>
 - <https://developers.tiktok.com/doc/embed-videos>
 - <https://owasp.org/www-community/attacks/Server_Side_Request_Forgery>
@@ -2,9 +2,10 @@
 ## Aktueller Umfang
-Etappe 1 bis Etappe 3 sind abgeschlossen. Architektur, Gesamtdatenmodell,
+Etappe 1 bis Etappe 5 sind abgeschlossen. Architektur, Gesamtdatenmodell,
-Anmeldung, Rollen, persistente Inhaltsbearbeitung und lokaler Betriebsweg sind
+Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
-dokumentiert. Etappe 4 wurde nicht begonnen.
+Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
 Etappe 6 wurde nicht begonnen.
 ## Umgesetzter Stand Etappe 1
@@ -37,9 +38,8 @@ umgebrochen.
 ## Noch nicht umgesetzt
-Sendungsplanung, echte Live-Steuerung, Präsentationsfenster, Archivabschluss,
+Archivabschluss, Freigaben, RSS und API. Diese späteren Bereiche dürfen nicht
-Freigaben, RSS und API. Die bestehenden Vorschauen dürfen nicht als
+als bereits implementiert verstanden werden.
 Implementierung dieser späteren Funktionen verstanden werden.
 ## Umgesetzter Stand Etappe 2
@@ -56,8 +56,8 @@ Implementierung dieser späteren Funktionen verstanden werden.
 - persistente Piece-Neuanlage aus leerem Entwurf oder drei redaktionellen Vorlagen
 - Schnellaufnahme von Gedanken und HTTP-/HTTPS-Links im Eingang
- vollständiger Editor für Quellen, Dauer, Status und getrennte Einleitung,
+- vollständiger Editor für Quellen, Dauer in Minuten, Status und getrennte
-  Recherche, Moderation, Überleitung und Präsentation
+  Einleitung, Recherche, Moderation, Überleitung und Präsentation
 - serverseitig bereinigte Markdown-Vorschau
 - unabhängige Themen, Formate und Abschnittskategorien mit Barkeeper-Verwaltung
 - serverseitige Suche und Filter nach Status, Format, Thema und Abschnitt
@@ -67,6 +67,77 @@ Implementierung dieser späteren Funktionen verstanden werden.
 - Archivieren und Wiederherstellen in den vorherigen Arbeitsstatus
 - private Rasterbilder mit Größen-/Signaturprüfung und geschützter Auslieferung
 - erweiterter Seed mit Eingangs-, Archiv-, Markdown- und Recherchebeispielen
 - standardmäßig ausgeblendete gesendete Pieces mit verlinkter, aufklappbarer
  Verwendungshistorie; gesendet bedeutet erledigt in abgeschlossener Sendung
 - standardmäßig ausgeblendete Pieces, die in mindestens einer noch nicht
  abgeschlossenen Sendung eingeplant sind, mit unabhängigem Sofortfilter
 - der eigenständige Piece-Editor ist als redaktionelles Arbeitsblatt aufgebaut:
  Titel, Fundstück, private Recherche und die getrennt gespeicherten
  Sendungstexte stehen im Schreibfluss; Quellen, Einordnung, Präsentation und
  Bilder begleiten ihn als Desktop-Kontextleiste oder mobile Werkzeuge
 - Markdown-Felder wechseln einzeln zwischen Lesen und Bearbeiten, sodass mehrere
  Textbereiche gleichzeitig offen bleiben; Autosave, Konfliktschutz und
  sichtbare Speicherfehler verwenden unverändert die Piece-Revision
 - die Schnellaufnahme „Aufnehmen und öffnen“ leitet nach erfolgreicher Anlage
  direkt zum neuen Piece weiter, statt den SvelteKit-Redirect als
  Validierungsfehler abzufangen
 ## Umgesetzter Stand Etappe 4
 - Sendungsübersicht mit leerem Start, Standardablauf und Spieleabend-Vorlage
 - frei benennbare, kategorisierte und sortierbare Abschnitte einschließlich
  eigenständiger Spieleblöcke
 - Einplanung ausschließlich sendefertiger Pieces als unabhängige Text- und
  Dauerkopien; Mehrfachverwendung desselben Originals ist möglich
 - showweite Reservebank, die nicht in Abschnitts- oder Gesamtdauer einfließt
 - explizite Abschnittsdauer ersetzt die Piece-Summe statt sie zu addieren
 - Bearbeiten, Entfernen sowie Verschieben innerhalb und zwischen Abschnitten
 - zugänglicher Stift-Dialog für alle sendungsspezifischen Felder und Aktionen,
  auf Desktop zweispaltig und auf kleinen Bildschirmen einspaltig scrollbar
 - explizites Aktualisieren eines Verwendungssnapshots aus dem Original für
  Titel, Dauer und Redaktionstexte bei erhaltenen Notizen und Live-Daten
 - Duplizieren einer konkreten Einplanung direkt hinter dem Ausgangselement mit
  erhaltenen Anpassungen, aber zurückgesetztem Live-Zustand
 - Piece-Dauern werden im Editor in Minuten eingegeben und intern weiterhin als
  ganze Sekunden gespeichert
 - Drag-and-drop über eindeutige Griffe, auch direkt aus gefilterten Quellen,
  mit positionsgenauer Einfügevorschau, transparentem Original und
  gleichwertigen Klick-, Touch- und Tastaturaktionen
 - Planungsmutationen ohne Dokumentreload mit lokalem Speicherzustand und
  animierter Neusortierung der betroffenen Elemente
 - unabhängige Sofortfilter für verwendete sowie in der aktuellen Sendung schon
  eingeplante Originale einschließlich Reservebank
 - kopierbare Twitch-Titel und Ankündigungstexte
 - showweite optimistische Revision schützt Metadaten, Reihenfolge und Inhalte
  vor unbemerktem parallelem Überschreiben
 - realistischer Seed mit Standardablauf und eigenständigem Spieleabend
 ## Umgesetzter Stand Etappe 5
 - fokussierte Moderationsansicht mit Prompter-Schrift, Einleitung, Moderation,
  Überleitung und standardmäßig geschlossener privater Recherche
 - ausblendbare Zeit- und Ablaufanzeige sowie persistente lokale Leseposition
 - aktuelles und nächstes Piece samt Abschnitt und geplantem Zeitbedarf
 - persistenter Live-Stand mit tatsächlichen Laufintervallen, Erledigen,
  Überspringen, Zurück und Wiederaufnahme
 - idempotente Live-Befehle verhindern doppelte Wirkung bei Wiederholung
 - serverseitig geschützte Umsortierung offener Pieces und Reserveeinfügung
 - explizite Präsentationsaktion; normale Live-Navigation verändert die Ausgabe
  nicht
 - getrennte, tokenisierte heinzlive-Ausgabe mit Polling, Verbindungsanzeige,
  Präsentationstext, Quellen und erlaubten Bildern
 - wählbare Text-, Linkkarten- und Videodarstellung aus genau einer vorhandenen
  Piece-Quelle mit manuell korrigierbaren, persistenten Metadaten
 - ausdrückliches serverseitiges Neuladen von Linkmetadaten über Metascraper mit
  DNS-, Redirect-, Zeit-, Größen- und Privatnetzschutz
 - validierte YouTube- und TikTok-IDs, offizielle Player-Iframes ohne Autoplay
  sowie Linkkarten-Fallback für nicht unterstützte Videoquellen
 - unveränderliche Präsentationssnapshots je Einplanung und explizite
  Aktualisierung aus dem Fundus
 - isolierte Präsentationstestansicht ohne Änderung des Live-Stands sowie
  tokengebundene, serverseitig geschützte Proxys für externe Vorschaubilder
 - Ausgabe-HTML, JSON und Medienzugriff enthalten keine Recherche,
  Moderationsnotizen, eigenen Notizen, Kontodaten oder internen Dateipfade
 ## Bekannte offene Betriebsprüfung
@@ -76,6 +147,15 @@ durchgeführt werden. Auch der lokale Container-Smoke-Test blieb offen, weil
 auf der Prüfmaschine kein Docker-Daemon lief. Manifestkernfelder und
 Startskript-Syntax wurden lokal geprüft.
 Eine reale OBS-Browserquelle stand nicht zur Verfügung. Die tokenisierte
 Präsentationsausgabe wurde stattdessen in einem anonymen zweiten Chromium-
 Browserkontext einschließlich Bild, JSON-Filterung, Polling und sichtbarem
 Verbindungsabbruch geprüft.
 Die automatisierten Playerprüfungen fingen YouTube- und TikTok-Requests lokal
 ab. URL-Erkennung, Iframe-Wechsel, Zeitmarkenübergabe und mobile Ausgabe sind
 damit geprüft, nicht jedoch die reale Wiedergabe oder Verfügbarkeit der Anbieter.
 ## Verifizierte Umgebung
 - Node.js 22.23.1, npm 10.9.8
@@ -0,0 +1,152 @@
 CREATE TABLE shows_v4 (
 	id TEXT PRIMARY KEY,
 	title TEXT NOT NULL,
 	starts_at_utc TEXT,
 	twitch_title TEXT NOT NULL DEFAULT '',
 	announcement_text TEXT NOT NULL DEFAULT '',
 	status TEXT NOT NULL CHECK (status IN ('draft', 'ready', 'live', 'completed')),
 	revision INTEGER NOT NULL DEFAULT 1 CHECK (revision >= 1),
 	created_at_utc TEXT NOT NULL,
 	updated_at_utc TEXT NOT NULL
 );
 CREATE TABLE show_sections_v4 (
 	id TEXT PRIMARY KEY,
 	show_id TEXT NOT NULL REFERENCES shows_v4(id) ON DELETE CASCADE,
 	name TEXT NOT NULL,
 	category_id TEXT REFERENCES section_categories(id) ON DELETE SET NULL,
 	position INTEGER NOT NULL CHECK (position >= 0),
 	explicit_duration_seconds INTEGER CHECK (
 		explicit_duration_seconds IS NULL OR
 		(explicit_duration_seconds >= 0 AND explicit_duration_seconds <= 86400)
 	),
 	is_reserve_bank INTEGER NOT NULL DEFAULT 0 CHECK (is_reserve_bank IN (0, 1)),
 	UNIQUE (show_id, position)
 );
 CREATE TABLE piece_usages_v4 (
 	id TEXT PRIMARY KEY,
 	show_section_id TEXT NOT NULL REFERENCES show_sections_v4(id) ON DELETE CASCADE,
 	original_piece_id TEXT REFERENCES pieces(id) ON DELETE SET NULL,
 	position INTEGER NOT NULL CHECK (position >= 0),
 	status TEXT NOT NULL CHECK (status IN ('open', 'current', 'done', 'skipped')),
 	duration_seconds INTEGER NOT NULL CHECK (duration_seconds >= 0 AND duration_seconds <= 86400),
 	title_snapshot TEXT NOT NULL,
 	intro_snapshot TEXT NOT NULL DEFAULT '',
 	research_snapshot TEXT NOT NULL DEFAULT '',
 	moderation_snapshot TEXT NOT NULL DEFAULT '',
 	transition_snapshot TEXT NOT NULL DEFAULT '',
 	presentation_snapshot TEXT NOT NULL DEFAULT '',
 	own_notes TEXT NOT NULL DEFAULT '',
 	is_reserve INTEGER NOT NULL DEFAULT 0 CHECK (is_reserve IN (0, 1)),
 	UNIQUE (show_section_id, position)
 );
 INSERT INTO shows_v4 (
 	id, title, starts_at_utc, twitch_title, announcement_text, status, revision,
 	created_at_utc, updated_at_utc
 )
 SELECT id, title, starts_at_utc, twitch_title, announcement_text, status, 1,
 	created_at_utc, updated_at_utc
 FROM shows;
 INSERT INTO show_sections_v4 (
 	id, show_id, name, category_id, position, explicit_duration_seconds, is_reserve_bank
 )
 SELECT id, show_id, name, category_id, position, explicit_duration_seconds, 0
 FROM show_sections;
 INSERT INTO show_sections_v4 (
 	id, show_id, name, category_id, position, explicit_duration_seconds, is_reserve_bank
 )
 SELECT 'reserve-bank-' || id, id, 'Reservebank', NULL,
 	COALESCE((SELECT max(position) + 1 FROM show_sections WHERE show_id = shows.id), 0), NULL, 1
 FROM shows;
 INSERT INTO piece_usages_v4 (
 	id, show_section_id, original_piece_id, position, status, duration_seconds,
 	title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
 	transition_snapshot, presentation_snapshot, own_notes, is_reserve
 )
 SELECT
 	u.id,
 	CASE WHEN u.is_reserve = 1 THEN 'reserve-bank-' || s.show_id ELSE u.show_section_id END,
 	u.original_piece_id,
 	CASE WHEN u.is_reserve = 1 THEN
 		(
 			SELECT count(*) - 1
 			FROM piece_usages earlier
 			JOIN show_sections earlier_section ON earlier_section.id = earlier.show_section_id
 			WHERE earlier.is_reserve = 1 AND earlier_section.show_id = s.show_id
 			AND (earlier_section.position < s.position OR
 				(earlier_section.position = s.position AND earlier.position < u.position) OR
 				(earlier_section.position = s.position AND earlier.position = u.position AND earlier.id <= u.id))
 		)
 	ELSE u.position END,
 	u.status,
 	u.duration_seconds,
 	u.title_snapshot,
 	u.intro_snapshot,
 	COALESCE(p.research_text, ''),
 	u.moderation_snapshot,
 	u.transition_snapshot,
 	u.presentation_snapshot,
 	'',
 	u.is_reserve
 FROM piece_usages u
 JOIN show_sections s ON s.id = u.show_section_id
 LEFT JOIN pieces p ON p.id = u.original_piece_id;
 DROP TABLE piece_usages;
 DROP TABLE show_sections;
 DROP TABLE shows;
 ALTER TABLE shows_v4 RENAME TO shows;
 ALTER TABLE show_sections_v4 RENAME TO show_sections;
 ALTER TABLE piece_usages_v4 RENAME TO piece_usages;
 CREATE INDEX idx_shows_status_start ON shows(status, starts_at_utc);
 CREATE INDEX idx_sections_show ON show_sections(show_id, position);
 CREATE INDEX idx_usages_section ON piece_usages(show_section_id, position);
 CREATE UNIQUE INDEX idx_one_reserve_bank_per_show
 	ON show_sections(show_id) WHERE is_reserve_bank = 1;
 CREATE TABLE show_templates (
 	id TEXT PRIMARY KEY,
 	name TEXT NOT NULL UNIQUE,
 	description TEXT NOT NULL DEFAULT ''
 );
 CREATE TABLE show_template_sections (
 	id TEXT PRIMARY KEY,
 	template_id TEXT NOT NULL REFERENCES show_templates(id) ON DELETE CASCADE,
 	name TEXT NOT NULL,
 	category_id TEXT REFERENCES section_categories(id) ON DELETE SET NULL,
 	position INTEGER NOT NULL CHECK (position >= 0),
 	explicit_duration_seconds INTEGER CHECK (
 		explicit_duration_seconds IS NULL OR
 		(explicit_duration_seconds >= 0 AND explicit_duration_seconds <= 86400)
 	),
 	UNIQUE (template_id, position)
 );
 CREATE INDEX idx_show_template_sections_template
 	ON show_template_sections(template_id, position);
 INSERT INTO show_templates (id, name, description) VALUES
 	('template-default', 'Standardablauf', 'Start, zwei JC-Blöcke und zwei Spiele.'),
 	('template-games', 'Spieleabend', 'Ein ruhiger Einstieg und drei flexible Spieleblöcke.');
 INSERT INTO show_template_sections (
 	id, template_id, name, category_id, position, explicit_duration_seconds
 ) VALUES
 	('template-default-start', 'template-default', 'Start', NULL, 0, 300),
 	('template-default-jc-reaction', 'template-default', 'JC / Reaction', NULL, 1, NULL),
 	('template-default-game-1', 'template-default', 'Spiel 1', NULL, 2, 3600),
 	('template-default-jc', 'template-default', 'JC', NULL, 3, NULL),
 	('template-default-game-2', 'template-default', 'Spiel 2', NULL, 4, 3600),
 	('template-games-start', 'template-games', 'Start', NULL, 0, 300),
 	('template-games-game-1', 'template-games', 'Spiel 1', NULL, 1, 2700),
 	('template-games-break', 'template-games', 'Pause & Chat', NULL, 2, 600),
 	('template-games-game-2', 'template-games', 'Spiel 2', NULL, 3, 2700),
 	('template-games-game-3', 'template-games', 'Spiel 3', NULL, 4, 2700);
@@ -0,0 +1,45 @@
 CREATE TABLE show_live_states (
 	show_id TEXT PRIMARY KEY REFERENCES shows(id) ON DELETE CASCADE,
 	revision INTEGER NOT NULL DEFAULT 0 CHECK (revision >= 0),
 	current_usage_id TEXT REFERENCES piece_usages(id) ON DELETE SET NULL,
 	started_at_utc TEXT,
 	ended_at_utc TEXT,
 	presentation_usage_id TEXT REFERENCES piece_usages(id) ON DELETE SET NULL,
 	presentation_revision INTEGER NOT NULL DEFAULT 0 CHECK (presentation_revision >= 0),
 	updated_at_utc TEXT NOT NULL
 );
 CREATE TABLE live_usage_runs (
 	id TEXT PRIMARY KEY,
 	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
 	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
 	started_at_utc TEXT NOT NULL,
 	ended_at_utc TEXT,
 	CHECK (ended_at_utc IS NULL OR ended_at_utc >= started_at_utc)
 );
 CREATE UNIQUE INDEX idx_one_active_live_run_per_show
 	ON live_usage_runs(show_id) WHERE ended_at_utc IS NULL;
 CREATE INDEX idx_live_runs_usage ON live_usage_runs(usage_id, started_at_utc);
 CREATE TABLE live_commands (
 	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
 	command_id TEXT NOT NULL,
 	action TEXT NOT NULL,
 	result_revision INTEGER NOT NULL CHECK (result_revision >= 0),
 	created_at_utc TEXT NOT NULL,
 	PRIMARY KEY (show_id, command_id)
 );
 CREATE TABLE presentation_access_tokens (
 	id TEXT PRIMARY KEY,
 	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
 	token_hash TEXT NOT NULL UNIQUE,
 	created_at_utc TEXT NOT NULL,
 	revoked_at_utc TEXT
 );
 CREATE INDEX idx_presentation_tokens_show
 	ON presentation_access_tokens(show_id, revoked_at_utc);
 UPDATE piece_usages SET status = 'open' WHERE status = 'current';
@@ -0,0 +1,28 @@
 ALTER TABLE pieces ADD COLUMN presentation_mode TEXT NOT NULL DEFAULT 'text'
 	CHECK (presentation_mode IN ('text', 'link', 'video'));
 ALTER TABLE pieces ADD COLUMN presentation_source_position INTEGER;
 ALTER TABLE pieces ADD COLUMN presentation_title TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_description TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_image_url TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_site_name TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_provider TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_provider_id TEXT NOT NULL DEFAULT '';
 ALTER TABLE pieces ADD COLUMN presentation_title_manual INTEGER NOT NULL DEFAULT 0
 	CHECK (presentation_title_manual IN (0, 1));
 ALTER TABLE pieces ADD COLUMN presentation_description_manual INTEGER NOT NULL DEFAULT 0
 	CHECK (presentation_description_manual IN (0, 1));
 ALTER TABLE pieces ADD COLUMN presentation_image_manual INTEGER NOT NULL DEFAULT 0
 	CHECK (presentation_image_manual IN (0, 1));
 ALTER TABLE pieces ADD COLUMN presentation_metadata_fetched_at_utc TEXT;
 ALTER TABLE piece_usages ADD COLUMN presentation_mode_snapshot TEXT NOT NULL DEFAULT 'text'
 	CHECK (presentation_mode_snapshot IN ('text', 'link', 'video'));
 ALTER TABLE piece_usages ADD COLUMN presentation_source_label_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_source_url_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_source_timecode_snapshot INTEGER;
 ALTER TABLE piece_usages ADD COLUMN presentation_title_meta_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_description_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_image_url_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_site_name_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_provider_snapshot TEXT NOT NULL DEFAULT '';
 ALTER TABLE piece_usages ADD COLUMN presentation_provider_id_snapshot TEXT NOT NULL DEFAULT '';
@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.3.0",
+	"version": "0.5.2",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"
@@ -28,6 +28,11 @@
 		"better-sqlite3": "^13.0.3",
 		"file-type": "^22.2.0",
 		"marked": "^18.1.1",
 		"metascraper": "^5.58.5",
 		"metascraper-description": "^5.58.4",
 		"metascraper-image": "^5.58.4",
 		"metascraper-publisher": "^5.58.4",
 		"metascraper-title": "^5.58.4",
 		"nodemailer": "^10.1.7",
 		"sanitize-html": "^2.18.1"
 	},
@@ -229,6 +229,38 @@ export function seed(databasePath = getPaths().database) {
 			]
 		);
 		replace(
 			'show_templates',
 			['id', 'name', 'description'],
 			[
 				['template-default', 'Standardablauf', 'Start, zwei JC-Blöcke und zwei Spiele.'],
 				['template-games', 'Spieleabend', 'Ein ruhiger Einstieg und drei flexible Spieleblöcke.']
 			]
 		);
 		replace(
 			'show_template_sections',
 			['id', 'template_id', 'name', 'category_id', 'position', 'explicit_duration_seconds'],
 			[
 				['template-default-start', 'template-default', 'Start', 'cat-jc', 0, 300],
 				[
 					'template-default-jc-reaction',
 					'template-default',
 					'JC / Reaction',
 					'cat-reaction',
 					1,
 					null
 				],
 				['template-default-game-1', 'template-default', 'Spiel 1', 'cat-game', 2, 3600],
 				['template-default-jc', 'template-default', 'JC', 'cat-jc', 3, null],
 				['template-default-game-2', 'template-default', 'Spiel 2', 'cat-game', 4, 3600],
 				['template-games-start', 'template-games', 'Start', 'cat-jc', 0, 300],
 				['template-games-game-1', 'template-games', 'Spiel 1', 'cat-game', 1, 2700],
 				['template-games-break', 'template-games', 'Pause & Chat', 'cat-jc', 2, 600],
 				['template-games-game-2', 'template-games', 'Spiel 2', 'cat-game', 3, 2700],
 				['template-games-game-3', 'template-games', 'Spiel 3', 'cat-game', 4, 2700]
 			]
 		);
 		replace(
 			'shows',
 			[
@@ -238,6 +270,7 @@ export function seed(databasePath = getPaths().database) {
 				'twitch_title',
 				'announcement_text',
 				'status',
 				'revision',
 				'created_at_utc',
 				'updated_at_utc'
 			],
@@ -249,6 +282,18 @@ export function seed(databasePath = getPaths().database) {
 					'Kleine Welten, große Ideen | heinzlive',
 					'Heute schauen wir auf Hardware mit Kurbel, handgemachte Filmtricks und Pixel mit Haltung.',
 					'ready',
 					1,
 					timestamp,
 					timestamp
 				],
 				[
 					'show-games-evening',
 					'Spieleabend: Kurbeln & Pixel',
 					'2026-10-16T18:00:00.000Z',
 					'Kurbeln, Pixel und ein langer Spieleabend | heinzlive',
 					'Heute spielen wir uns von ungewöhnlicher Hardware bis zu moderner Pixelart.',
 					'draft',
 					1,
 					timestamp,
 					timestamp
 				]
@@ -257,11 +302,25 @@ export function seed(databasePath = getPaths().database) {
 		replace(
 			'show_sections',
 			['id', 'show_id', 'name', 'category_id', 'position', 'explicit_duration_seconds'],
 			[
-				['section-start', 'show-october', 'Ankommen & Warmwerden', 'cat-jc', 0, 300],
+				'id',
-				['section-stories', 'show-october', 'Kleine Welten', 'cat-reaction', 1, null],
+				'show_id',
-				['section-game', 'show-october', 'Spiel 1', 'cat-game', 2, 3600]
+				'name',
 				'category_id',
 				'position',
 				'explicit_duration_seconds',
 				'is_reserve_bank'
 			],
 			[
 				['section-start', 'show-october', 'Ankommen & Warmwerden', 'cat-jc', 0, 300, 0],
 				['section-stories', 'show-october', 'Kleine Welten', 'cat-reaction', 1, null, 0],
 				['section-game', 'show-october', 'Spiel 1', 'cat-game', 2, 3600, 0],
 				['reserve-bank-show-october', 'show-october', 'Reservebank', null, 3, null, 1],
 				['games-start', 'show-games-evening', 'Start', 'cat-jc', 0, 300, 0],
 				['games-first', 'show-games-evening', 'Spiel 1', 'cat-game', 1, 2700, 0],
 				['games-chat', 'show-games-evening', 'Pause & Chat', 'cat-jc', 2, 600, 0],
 				['games-second', 'show-games-evening', 'Spiel 2', 'cat-game', 3, 2700, 0],
 				['reserve-bank-show-games-evening', 'show-games-evening', 'Reservebank', null, 4, null, 1]
 			]
 		);
@@ -276,9 +335,11 @@ export function seed(databasePath = getPaths().database) {
 				'duration_seconds',
 				'title_snapshot',
 				'intro_snapshot',
 				'research_snapshot',
 				'moderation_snapshot',
 				'transition_snapshot',
 				'presentation_snapshot',
 				'own_notes',
 				'is_reserve'
 			],
 			[
@@ -287,13 +348,15 @@ export function seed(databasePath = getPaths().database) {
 					'section-stories',
 					'piece-console',
 					0,
-					'current',
+					'open',
 					480,
 					'Die kleine Konsole mit dem großen Dreh',
 					'Eine Kurbel, ein gelber Knopf und sehr viel Charme: Was macht kleine Hardware spannend?',
 					'## Recherche\n\n- Herstellerangaben gegen unabhängige Tests prüfen\n- Fokus auf Bedienidee statt Leistungsdaten',
 					'Erst Formfaktor zeigen, dann über bewusst gesetzte Grenzen sprechen.',
 					'Von der kleinen Konsole geht es zur ganz großen Leinwand.',
 					'Weniger Leistung, mehr Idee.',
 					'',
 					0
 				],
 				[
@@ -305,24 +368,60 @@ export function seed(databasePath = getPaths().database) {
 					720,
 					'Warum praktische Effekte wieder auffallen',
 					'Man sieht manchmal gerade deshalb weniger Trick, weil wieder mehr vor der Kamera passiert.',
 					'',
 					'Beispiele vergleichen, nicht analog gegen digital ausspielen.',
 					'Nach so viel Handarbeit wird es spielerisch.',
 					'Wenn das Licht wirklich auf ein Modell fällt.',
 					'',
 					0
 				],
 				[
 					'usage-reserve',
-					'section-stories',
+					'reserve-bank-show-october',
 					'piece-pixels',
-					2,
+					0,
 					'open',
 					540,
 					'Pixelart, die nicht nostalgisch sein will',
 					'Pixel sind längst keine technische Notlösung mehr.',
 					'',
 					'Großaufnahmen vorbereiten, drei Stilmittel benennen.',
 					'Genug Theorie, jetzt spielen wir selbst.',
 					'Pixel als bewusste Entscheidung.',
 					'Ersatz, falls ein Spiel technisch ausfällt.',
 					1
 				],
 				[
 					'usage-games-console',
 					'games-first',
 					'piece-console',
 					0,
 					'open',
 					480,
 					'Die kleine Konsole mit dem großen Dreh',
 					'Wir beginnen mit Hardware, die ihr Spielprinzip gleich mitbringt.',
 					'Kurbelmechanik und verfügbare Spiele prüfen.',
 					'Konsole zeigen und Publikum nach Lieblingsmechaniken fragen.',
 					'Danach wechseln wir von Mechanik zu Grafik.',
 					'Eine Kurbel verändert, wie wir spielen.',
 					'Controller vor Sendungsbeginn laden.',
 					0
 				],
 				[
 					'usage-games-pixels',
 					'games-second',
 					'piece-pixels',
 					0,
 					'open',
 					540,
 					'Pixelart, die nicht nostalgisch sein will',
 					'Unser zweites Spiel nutzt Pixel nicht als Rückblick.',
 					'Drei aktuelle Beispiele vergleichen.',
 					'Auf Licht, Bewegung und Materialwirkung achten.',
 					'Zum Schluss sammeln wir eure Empfehlungen.',
 					'Pixel als bewusste Entscheidung.',
 					'',
 					0
 				]
 			]
 		);
@@ -7,6 +7,7 @@ declare global {
 		}
 		interface PageData {
 			user?: AuthUser | null;
 			presentationMode?: boolean;
 		}
 	}
 }
@@ -13,11 +13,13 @@ const publicPaths = new Set([
 ]);
 export const handle: Handle = async ({ event, resolve }) => {
 	const presentationPath = event.url.pathname.startsWith('/heinzlive/');
 	const presentationTestPath = /^\/fundus\/[^/]+\/praesentation(?:\/|$)/.test(event.url.pathname);
 	const token = event.cookies.get(SESSION_COOKIE);
 	event.locals.user = getSessionUser(token);
 	if (token && !event.locals.user) deleteSession(event.cookies);
-	if (!publicPaths.has(event.url.pathname) && !event.locals.user) {
+	if (!presentationPath && !publicPaths.has(event.url.pathname) && !event.locals.user) {
 		redirect(303, hasUsers() ? '/login' : '/setup');
 	}
@@ -25,6 +27,14 @@ export const handle: Handle = async ({ event, resolve }) => {
 	response.headers.set('Referrer-Policy', 'same-origin');
 	response.headers.set('X-Content-Type-Options', 'nosniff');
 	response.headers.set('X-Frame-Options', 'DENY');
 	if (presentationPath || presentationTestPath) {
 		response.headers.set('Cache-Control', 'no-store');
 		response.headers.set('Referrer-Policy', 'strict-origin-when-cross-origin');
 		response.headers.set(
 			'Content-Security-Policy',
 			"frame-src https://www.youtube-nocookie.com https://www.youtube.com https://www.tiktok.com; frame-ancestors 'none'"
 		);
 	}
 	if (event.url.pathname === '/einladung' || event.url.pathname === '/passwort-zuruecksetzen') {
 		response.headers.set('Cache-Control', 'no-store');
 	}
@@ -0,0 +1,60 @@
 <script lang="ts">
 	import MarkdownPreview from './MarkdownPreview.svelte';
 	let {
 		name,
 		label,
 		inputLabel = label,
 		hint = '',
 		emptyText,
 		value = $bindable(),
 		html,
 		privateField = false,
 		rows = 7
 	}: {
 		name: string;
 		label: string;
 		inputLabel?: string;
 		hint?: string;
 		emptyText: string;
 		value: string;
 		html: string;
 		privateField?: boolean;
 		rows?: number;
 	} = $props();
 	let editing = $state(false);
 </script>
 <section class:private-field={privateField} class:empty={!value.trim()} class="editorial-field">
 	<header>
 		<div>
 			<h3>{label}</h3>
 			{#if hint}<p>{hint}</p>{/if}
 		</div>
 		<button
 			class="text-button editorial-edit-button"
 			type="button"
 			aria-expanded={editing}
 			onclick={() => (editing = !editing)}
 		>
 			{editing ? 'Lesen' : value.trim() ? 'Bearbeiten' : 'Schreiben'}
 		</button>
 	</header>
 	{#if editing}
 		<label class="editorial-input">
 			<span class="sr-only">{inputLabel}</span>
 			<textarea aria-label={inputLabel} {name} {rows} maxlength="50000" bind:value></textarea>
 		</label>
 	{:else}
 		<input type="hidden" {name} {value} />
 		{#if value.trim()}
 			<MarkdownPreview {html} />
 		{:else}
 			<button class="editorial-empty" type="button" onclick={() => (editing = true)}>
 				<span>{emptyText}</span><small>Zum Schreiben öffnen</small>
 			</button>
 		{/if}
 	{/if}
 </section>
@@ -16,6 +16,8 @@
 		<path
 			d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6 7 7M17 17l1.4 1.4M18.4 5.6 17 7M7 17l-1.4 1.4"
 		/>
 	{:else if name === 'edit'}
 		<path d="M4 20h4L19 9l-4-4L4 16v4zM13.5 6.5l4 4" />
 	{/if}
 </svg>
@@ -0,0 +1,36 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import type { SentPieceUsage } from '#lib/server/shows.js';
 	let { history }: { history: SentPieceUsage[] } = $props();
 	function berlinDate(value: string) {
 		return new Intl.DateTimeFormat('de-DE', {
 			timeZone: 'Europe/Berlin',
 			dateStyle: 'medium'
 		}).format(new Date(value));
 	}
 </script>
 {#if history.length}
 	<div class="piece-usage-history">
 		<p>
 			<strong>Gesendet am {berlinDate(history[0].usedAtUtc)}</strong>
 			in <a href={resolve('/sendungen/[id]', { id: history[0].showId })}>{history[0].showTitle}</a>
 			{#if history.length > 1}<span>+ {history.length - 1} weitere</span>{/if}
 		</p>
 		{#if history.length > 1}
 			<details>
 				<summary>Vollständige Verwendungshistorie</summary>
 				<ul>
 					{#each history as usage (usage.usageId)}
 						<li>
 							<time datetime={usage.usedAtUtc}>{berlinDate(usage.usedAtUtc)}</time>
 							<a href={resolve('/sendungen/[id]', { id: usage.showId })}>{usage.showTitle}</a>
 						</li>
 					{/each}
 				</ul>
 			</details>
 		{/if}
 	</div>
 {/if}
@@ -0,0 +1,113 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { PresentationContent } from '#lib/server/presentation.js';
 	let {
 		content,
 		imageSrc = ''
 	}: {
 		content: PresentationContent & {
 			sources?: { label: string; url: string }[];
 			images?: { id: string; altText: string }[];
 		};
 		imageSrc?: string;
 	} = $props();
 	let frame = $state<HTMLIFrameElement>();
 	let playerUnavailable = $state(false);
 	let imageUnavailable = $state(false);
 	onMount(() => {
 		const receive = (event: MessageEvent) => {
 			if (content.provider !== 'tiktok' || event.origin !== 'https://www.tiktok.com') return;
 			if (event.source !== frame?.contentWindow || typeof event.data !== 'object' || !event.data)
 				return;
 			const message = event.data as { type?: string; value?: unknown };
 			if (message.type === 'onPlayerReady' && content.source?.timecodeSeconds) {
 				frame.contentWindow?.postMessage(
 					{
 						type: 'seekTo',
 						value: content.source.timecodeSeconds,
 						'x-tiktok-player': true
 					},
 					'https://www.tiktok.com'
 				);
 			}
 			if (message.type === 'onPlayerError') playerUnavailable = true;
 		};
 		addEventListener('message', receive);
 		return () => removeEventListener('message', receive);
 	});
 </script>
 {#if content.mode === 'text'}
 	<article class="output-content output-text">
 		<p class="output-kicker">heinzlive</p>
 		<h1>{content.title}</h1>
 		<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		<div class="output-copy">{@html content.html}</div>
 		{#if content.images?.length}<div class="output-images">
 				{#each content.images as image (image.id)}
 					<img src={`${imageSrc}/${image.id}`} alt={image.altText} />
 				{/each}
 			</div>{/if}
 		{#if content.sources?.length}<footer class="output-sources">
 				<span>Quellen</span>
 				{#each content.sources as source, index (`${index}-${source.url}`)}
 					<!-- The URL is a server-validated external HTTP(S) source. -->
 					<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 					<a href={source.url} target="_blank" rel="noopener noreferrer">{source.label}</a>
 				{/each}
 			</footer>{/if}
 	</article>
 {:else if content.mode === 'link'}
 	<article class="output-content output-link-card">
 		{#if imageSrc && !imageUnavailable}<div class="output-link-image">
 				<img src={imageSrc} alt="" onerror={() => (imageUnavailable = true)} />
 			</div>{/if}
 		<div class="output-link-copy">
 			<p class="output-kicker">{content.siteName || content.source?.label || 'Webseite'}</p>
 			<h1>{content.previewTitle || content.title}</h1>
 			{#if content.description}<p>{content.description}</p>{/if}
 			<!-- The URL is a server-validated external HTTP(S) source. -->
 			<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 			{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
 					>Original öffnen</a
 				>{/if}
 		</div>
 	</article>
 {:else}
 	<article class:portrait={content.provider === 'tiktok'} class="output-content output-video">
 		<header>
 			<p class="output-kicker">{content.siteName || content.source?.label || 'Video'}</p>
 			<h1>{content.previewTitle || content.title}</h1>
 		</header>
 		{#if content.embedUrl && !playerUnavailable}
 			<div class="output-player">
 				<iframe
 					bind:this={frame}
 					title={content.previewTitle || content.title}
 					src={content.embedUrl}
 					allow="encrypted-media; fullscreen; picture-in-picture"
 					allowfullscreen
 					onerror={() => (playerUnavailable = true)}
 				></iframe>
 			</div>
 		{:else}
 			<section class="output-fallback">
 				<strong>Video kann nicht eingebettet werden</strong>
 				<p>Der Anbieter oder diese URL ist für die eingebettete Wiedergabe nicht verfügbar.</p>
 				<!-- The URL is a server-validated external HTTP(S) source. -->
 				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 				{#if content.source}<a href={content.source.url} target="_blank" rel="noopener noreferrer"
 						>Original öffnen</a
 					>{/if}
 			</section>
 		{/if}
 		{#if content.source}<footer class="output-video-source">
 				<!-- The URL is a server-validated external HTTP(S) source. -->
 				<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 				<a href={content.source.url} target="_blank" rel="noopener noreferrer">Original öffnen</a>
 			</footer>{/if}
 	</article>
 {/if}
@@ -0,0 +1,228 @@
 <script lang="ts">
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { untrack } from 'svelte';
 	import NavIcon from './NavIcon.svelte';
 	import type { PieceUsage } from '#lib/server/shows.js';
 	let {
 		usage,
 		revision,
 		sectionId,
 		sections,
 		error,
 		enhanceCommand
 	}: {
 		usage: PieceUsage;
 		revision: number;
 		sectionId: string;
 		sections: { id: string; name: string }[];
 		error?: string;
 		enhanceCommand: SubmitFunction;
 	} = $props();
 	let dialog: HTMLDialogElement;
 	let presentationMode = $state(untrack(() => usage.presentationMode));
 	function durationInMinutes(seconds: number) {
 		return Number((seconds / 60).toFixed(2));
 	}
 </script>
 <button
 	class="usage-edit-button"
 	type="button"
 	aria-label={`${usage.title} bearbeiten und verschieben`}
 	title="Bearbeiten und verschieben"
 	onclick={() => dialog.showModal()}
 >
 	<NavIcon name="edit" />
 </button>
 <dialog
 	bind:this={dialog}
 	class="usage-editor-dialog"
 	aria-labelledby={`usage-editor-title-${usage.id}`}
 	onclick={(event) => event.target === dialog && dialog.close()}
 >
 	<header>
 		<div>
 			<p class="eyebrow">Sendungsspezifische Kopie</p>
 			<h2 id={`usage-editor-title-${usage.id}`}>{usage.title}</h2>
 		</div>
 		<form method="dialog">
 			<button class="dialog-close" type="submit" aria-label="Editor schließen">×</button>
 		</form>
 	</header>
 	<div class="usage-dialog-scroll">
 		{#if error}<div class="form-message error usage-dialog-message" role="alert">{error}</div>{/if}
 		<form
 			use:enhance={enhanceCommand}
 			method="POST"
 			action="?/updateUsage"
 			class="usage-dialog-editor"
 		>
 			<input type="hidden" name="revision" value={revision} />
 			<input type="hidden" name="usageId" value={usage.id} />
 			<section class="editor-section">
 				<div class="section-title">
 					<p class="eyebrow">Grundlagen</p>
 					<h3>Titel, Dauer und Notizen</h3>
 				</div>
 				<div class="editor-fields two-columns">
 					<label class="wide-field"
 						>Titel<input name="title" required maxlength="200" value={usage.title} /></label
 					>
 					<label
 						>Dauer in Minuten<input
 							name="durationMinutes"
 							type="number"
 							min="0"
 							max="1440"
 							step="any"
 							value={durationInMinutes(usage.durationSeconds)}
 						/></label
 					>
 					<label class="wide-field"
 						>Eigene Notizen<textarea name="ownNotes" rows="3" maxlength="50000"
 							>{usage.ownNotes}</textarea
 						></label
 					>
 				</div>
 			</section>
 			<section class="editor-section markdown-section">
 				<div class="section-title">
 					<p class="eyebrow">Redaktion</p>
 					<h3>Getrennte Arbeitsbereiche</h3>
 				</div>
 				<div class="markdown-grid">
 					<label
 						><span>Einleitung</span><textarea name="intro" rows="7" maxlength="50000"
 							>{usage.intro}</textarea
 						></label
 					>
 					<label class="private-field"
 						><span>Private Recherche</span><textarea name="research" rows="7" maxlength="50000"
 							>{usage.research}</textarea
 						></label
 					>
 					<label
 						><span>Moderationsstichpunkte</span><textarea
 							name="moderation"
 							rows="7"
 							maxlength="50000">{usage.moderation}</textarea
 						></label
 					>
 					<label
 						><span>Überleitung</span><textarea name="transition" rows="7" maxlength="50000"
 							>{usage.transition}</textarea
 						></label
 					>
 					<label class="wide-field"
 						><span>Präsentationstext</span><textarea name="presentation" rows="7" maxlength="50000"
 							>{usage.presentation}</textarea
 						></label
 					>
 				</div>
 				<div class="presentation-settings">
 					<label
 						>Darstellung<select name="presentationMode" bind:value={presentationMode}>
 							<option value="text">Text</option>
 							<option value="link">Linkvorschau</option>
 							<option value="video">Video</option>
 						</select></label
 					>
 					{#if presentationMode !== 'text'}
 						<input
 							type="hidden"
 							name="presentationSourceLabel"
 							value={usage.presentationSourceLabel}
 						/>
 						<input type="hidden" name="presentationSourceUrl" value={usage.presentationSourceUrl} />
 						<input
 							type="hidden"
 							name="presentationSourceTimecodeSeconds"
 							value={usage.presentationSourceTimecodeSeconds ?? ''}
 						/>
 						<input type="hidden" name="presentationSiteName" value={usage.presentationSiteName} />
 						<div class="presentation-source-summary wide-field">
 							<span>Ausgewählte Quelle</span>
 							<strong
 								>{usage.presentationSourceLabel ||
 									usage.presentationSourceUrl ||
 									'Keine Quelle'}</strong
 							>
 							{#if usage.presentationSourceUrl}<small>{usage.presentationSourceUrl}</small>{/if}
 						</div>
 						<label
 							>Titel<input
 								name="presentationTitle"
 								maxlength="300"
 								value={usage.presentationTitle}
 							/></label
 						>
 						<label
 							>Bild-URL<input
 								name="presentationImageUrl"
 								type="url"
 								maxlength="2000"
 								value={usage.presentationImageUrl}
 							/></label
 						>
 						<label class="wide-field"
 							>Anreißer<textarea name="presentationDescription" rows="3" maxlength="1000"
 								>{usage.presentationDescription}</textarea
 							></label
 						>
 					{/if}
 				</div>
 			</section>
 			<button class="primary-button" type="submit">Verwendung speichern</button>
 		</form>
 		<section class="usage-dialog-actions" aria-label="Weitere Aktionen">
 			<div>
 				<form use:enhance={enhanceCommand} method="POST" action="?/refreshUsage">
 					<input type="hidden" name="revision" value={revision} />
 					<input type="hidden" name="usageId" value={usage.id} />
 					<button class="secondary-button" type="submit" disabled={!usage.originalPieceId}
 						>Aus Fundus aktualisieren</button
 					>
 				</form>
 				<small
 					>Übernimmt Titel, Dauer und Redaktionstexte. Eigene Notizen und Live-Daten bleiben.</small
 				>
 			</div>
 			<form use:enhance={enhanceCommand} method="POST" action="?/duplicateUsage">
 				<input type="hidden" name="revision" value={revision} />
 				<input type="hidden" name="usageId" value={usage.id} />
 				<button class="secondary-button" type="submit">Duplizieren</button>
 			</form>
 			<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
 				<input type="hidden" name="revision" value={revision} />
 				<input type="hidden" name="usageId" value={usage.id} />
 				<input type="hidden" name="position" value="9999" />
 				<label
 					>Ziel<select name="sectionId">
 						<option value="">Reservebank</option>
 						{#each sections as target (target.id)}
 							<option value={target.id} selected={target.id === sectionId}>{target.name}</option>
 						{/each}
 					</select></label
 				>
 				<button class="secondary-button" type="submit">Verschieben</button>
 			</form>
 			<form
 				use:enhance={enhanceCommand}
 				method="POST"
 				action="?/removeUsage"
 				onsubmit={(event) =>
 					!confirm('Verwendung aus der Sendung entfernen?') && event.preventDefault()}
 			>
 				<input type="hidden" name="revision" value={revision} />
 				<input type="hidden" name="usageId" value={usage.id} />
 				<button class="text-button danger-text" type="submit">Entfernen</button>
 			</form>
 		</section>
 	</div>
 </dialog>
@@ -13,6 +13,7 @@ import {
 	getPiece,
 	getTaxonomy,
 	listPieces,
 	loadPiecePresentationMetadata,
 	savePiece,
 	setPieceArchived,
 	uploadPieceImage,
@@ -50,6 +51,18 @@ function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
 		moderationNotes: '- Punkt eins',
 		transitionText: 'Weiter geht es.',
 		presentationText: '## Sichtbare Aussage',
 		presentationMode: 'text',
 		presentationSourcePosition: null,
 		presentationTitle: '',
 		presentationDescription: '',
 		presentationImageUrl: '',
 		presentationSiteName: '',
 		presentationProvider: '',
 		presentationProviderId: '',
 		presentationTitleManual: false,
 		presentationDescriptionManual: false,
 		presentationImageManual: false,
 		presentationMetadataFetchedAtUtc: null,
 		topicIds: ['topic-gaming', 'topic-internet'],
 		categoryIds: ['cat-jc', 'cat-reaction'],
 		sources: [
@@ -86,6 +99,49 @@ describe('content management', () => {
 		});
 	});
 	it('stores fetched preview metadata and preserves manual corrections on reload', async () => {
 		const id = createPiece('find');
 		const initial = getPiece(id)!;
 		const saved = savePiece(
 			id,
 			initial.revision,
 			completeInput({
 				presentationMode: 'link',
 				presentationSourcePosition: 0,
 				presentationTitle: 'Manueller Titel',
 				presentationTitleManual: true
 			})
 		);
 		const loaded = await loadPiecePresentationMetadata(id, saved.revision, async () => ({
 			title: 'Automatischer Titel',
 			description: 'Geladener Anreißer',
 			imageUrl: 'https://example.com/vorschau.jpg',
 			siteName: 'Example',
 			provider: '',
 			providerId: ''
 		}));
 		expect(getPiece(id)).toMatchObject({
 			revision: loaded.revision,
 			presentationTitle: 'Manueller Titel',
 			presentationDescription: 'Geladener Anreißer',
 			presentationImageUrl: 'https://example.com/vorschau.jpg',
 			presentationSiteName: 'Example'
 		});
 		await loadPiecePresentationMetadata(id, loaded.revision, async () => ({
 			title: 'Anderer automatischer Titel',
 			description: 'Aktualisierter Anreißer',
 			imageUrl: '',
 			siteName: 'Example',
 			provider: '',
 			providerId: ''
 		}));
 		expect(getPiece(id)).toMatchObject({
 			presentationTitle: 'Manueller Titel',
 			presentationDescription: 'Aktualisierter Anreißer'
 		});
 	});
 	it('searches independent taxonomies and archives, restores and duplicates pieces', async () => {
 		createTaxonomy('topic', 'Technikgeschichte');
 		const topic = getTaxonomy().topics.find((entry) => entry.name === 'Technikgeschichte')!;
@@ -4,6 +4,11 @@ import path from 'node:path';
 import { fileTypeFromBuffer } from 'file-type';
 import { getDatabase } from './database.js';
 import { getServerPaths } from './config.js';
 import {
 	detectVideoProvider,
 	fetchPresentationMetadata,
 	type PresentationMode
 } from './presentation.js';
 export const PIECE_STATUSES = ['inbox', 'preparing', 'ready', 'archived'] as const;
 export type PieceStatus = (typeof PIECE_STATUSES)[number];
@@ -27,6 +32,18 @@ export type PieceInput = {
 	moderationNotes: string;
 	transitionText: string;
 	presentationText: string;
 	presentationMode: PresentationMode;
 	presentationSourcePosition: number | null;
 	presentationTitle: string;
 	presentationDescription: string;
 	presentationImageUrl: string;
 	presentationSiteName: string;
 	presentationProvider: string;
 	presentationProviderId: string;
 	presentationTitleManual: boolean;
 	presentationDescriptionManual: boolean;
 	presentationImageManual: boolean;
 	presentationMetadataFetchedAtUtc: string | null;
 	topicIds: string[];
 	categoryIds: string[];
 	sources: PieceSourceInput[];
@@ -164,6 +181,25 @@ function validatePieceInput(input: PieceInput): PieceInput {
 		}
 		return { label, url, timecodeSeconds: source.timecodeSeconds };
 	});
 	if (!['text', 'link', 'video'].includes(input.presentationMode)) {
 		throw new Error('INVALID_PRESENTATION');
 	}
 	const sourcePosition = input.presentationSourcePosition;
 	if (
 		sourcePosition !== null &&
 		(!Number.isInteger(sourcePosition) || sourcePosition < 0 || sourcePosition >= sources.length)
 	) {
 		throw new Error('INVALID_PRESENTATION');
 	}
 	if (input.presentationMode !== 'text' && sourcePosition === null) {
 		throw new Error('INVALID_PRESENTATION');
 	}
 	const presentationImageUrl = cleanText(input.presentationImageUrl, 2_000, 'presentation_image');
 	if (presentationImageUrl && !validUrl(presentationImageUrl)) {
 		throw new Error('INVALID_PRESENTATION');
 	}
 	const detected =
 		sourcePosition === null ? null : detectVideoProvider(sources[sourcePosition].url);
 	return {
 		title,
 		summary: cleanText(input.summary, 2_000, 'summary'),
@@ -175,6 +211,22 @@ function validatePieceInput(input: PieceInput): PieceInput {
 		moderationNotes: cleanText(input.moderationNotes, 50_000, 'moderation'),
 		transitionText: cleanText(input.transitionText, 50_000, 'transition'),
 		presentationText: cleanText(input.presentationText, 50_000, 'presentation'),
 		presentationMode: input.presentationMode,
 		presentationSourcePosition: sourcePosition,
 		presentationTitle: cleanText(input.presentationTitle, 300, 'presentation_title'),
 		presentationDescription: cleanText(
 			input.presentationDescription,
 			1_000,
 			'presentation_description'
 		),
 		presentationImageUrl,
 		presentationSiteName: cleanText(input.presentationSiteName, 200, 'presentation_site'),
 		presentationProvider: detected?.provider ?? '',
 		presentationProviderId: detected?.id ?? '',
 		presentationTitleManual: Boolean(input.presentationTitleManual),
 		presentationDescriptionManual: Boolean(input.presentationDescriptionManual),
 		presentationImageManual: Boolean(input.presentationImageManual),
 		presentationMetadataFetchedAtUtc: input.presentationMetadataFetchedAtUtc || null,
 		topicIds,
 		categoryIds,
 		sources
@@ -298,6 +350,18 @@ type PieceRow = {
 	moderation_notes: string;
 	transition_text: string;
 	presentation_text: string;
 	presentation_mode: PresentationMode;
 	presentation_source_position: number | null;
 	presentation_title: string;
 	presentation_description: string;
 	presentation_image_url: string;
 	presentation_site_name: string;
 	presentation_provider: string;
 	presentation_provider_id: string;
 	presentation_title_manual: number;
 	presentation_description_manual: number;
 	presentation_image_manual: number;
 	presentation_metadata_fetched_at_utc: string | null;
 	revision: number;
 	created_at_utc: string;
 	updated_at_utc: string;
@@ -308,7 +372,12 @@ export function getPiece(id: string): PieceEditor | null {
 	const row = database
 		.prepare(
 			`SELECT id, title, summary, format_id, status, duration_seconds, intro, research_text,
-			 moderation_notes, transition_text, presentation_text, revision, created_at_utc, updated_at_utc
+			 moderation_notes, transition_text, presentation_text, presentation_mode,
 			 presentation_source_position, presentation_title, presentation_description,
 			 presentation_image_url, presentation_site_name, presentation_provider,
 			 presentation_provider_id, presentation_title_manual, presentation_description_manual,
 			 presentation_image_manual, presentation_metadata_fetched_at_utc,
 			 revision, created_at_utc, updated_at_utc
 			 FROM pieces WHERE id = ?`
 		)
 		.get(id) as PieceRow | undefined;
@@ -325,6 +394,18 @@ export function getPiece(id: string): PieceEditor | null {
 		moderationNotes: row.moderation_notes,
 		transitionText: row.transition_text,
 		presentationText: row.presentation_text,
 		presentationMode: row.presentation_mode,
 		presentationSourcePosition: row.presentation_source_position,
 		presentationTitle: row.presentation_title,
 		presentationDescription: row.presentation_description,
 		presentationImageUrl: row.presentation_image_url,
 		presentationSiteName: row.presentation_site_name,
 		presentationProvider: row.presentation_provider,
 		presentationProviderId: row.presentation_provider_id,
 		presentationTitleManual: row.presentation_title_manual === 1,
 		presentationDescriptionManual: row.presentation_description_manual === 1,
 		presentationImageManual: row.presentation_image_manual === 1,
 		presentationMetadataFetchedAtUtc: row.presentation_metadata_fetched_at_utc,
 		revision: row.revision,
 		createdAtUtc: row.created_at_utc,
 		updatedAtUtc: row.updated_at_utc,
@@ -405,6 +486,11 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
 			.prepare(
 				`UPDATE pieces SET title = ?, summary = ?, format_id = ?, status = ?, duration_seconds = ?,
 				 intro = ?, research_text = ?, moderation_notes = ?, transition_text = ?, presentation_text = ?,
 				 presentation_mode = ?, presentation_source_position = ?, presentation_title = ?,
 				 presentation_description = ?, presentation_image_url = ?, presentation_site_name = ?,
 				 presentation_provider = ?, presentation_provider_id = ?, presentation_title_manual = ?,
 				 presentation_description_manual = ?, presentation_image_manual = ?,
 				 presentation_metadata_fetched_at_utc = ?,
 				 updated_at_utc = ?, revision = revision + 1, archived_from_status = NULL
 				 WHERE id = ? AND revision = ? AND status != 'archived'`
 			)
@@ -419,6 +505,18 @@ export function savePiece(id: string, expectedRevision: number, rawInput: PieceI
 				input.moderationNotes,
 				input.transitionText,
 				input.presentationText,
 				input.presentationMode,
 				input.presentationSourcePosition,
 				input.presentationTitle,
 				input.presentationDescription,
 				input.presentationImageUrl,
 				input.presentationSiteName,
 				input.presentationProvider,
 				input.presentationProviderId,
 				input.presentationTitleManual ? 1 : 0,
 				input.presentationDescriptionManual ? 1 : 0,
 				input.presentationImageManual ? 1 : 0,
 				input.presentationMetadataFetchedAtUtc,
 				updatedAtUtc,
 				id,
 				expectedRevision
@@ -477,6 +575,18 @@ export function createPiece(template: PieceTemplateId = 'blank'): string {
 		moderationNotes: defaults.moderationNotes ?? '',
 		transitionText: '',
 		presentationText: defaults.presentationText ?? '',
 		presentationMode: 'text',
 		presentationSourcePosition: null,
 		presentationTitle: '',
 		presentationDescription: '',
 		presentationImageUrl: '',
 		presentationSiteName: '',
 		presentationProvider: '',
 		presentationProviderId: '',
 		presentationTitleManual: false,
 		presentationDescriptionManual: false,
 		presentationImageManual: false,
 		presentationMetadataFetchedAtUtc: null,
 		topicIds: [],
 		categoryIds: defaults.categoryIds ?? [],
 		sources: []
@@ -582,8 +692,13 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 			database
 				.prepare(
 					`INSERT INTO pieces (id, title, summary, format_id, status, duration_seconds, intro,
-					 research_text, moderation_notes, transition_text, presentation_text, created_at_utc,
+					 research_text, moderation_notes, transition_text, presentation_text, presentation_mode,
-					 updated_at_utc, revision) VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, 1)`
+					 presentation_source_position, presentation_title, presentation_description,
 					 presentation_image_url, presentation_site_name, presentation_provider,
 					 presentation_provider_id, presentation_title_manual,
 					 presentation_description_manual, presentation_image_manual,
 					 presentation_metadata_fetched_at_utc, created_at_utc, updated_at_utc, revision)
 					 VALUES (?, ?, ?, ?, 'preparing', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1)`
 				)
 				.run(
 					id,
@@ -596,6 +711,18 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 					source.moderationNotes,
 					source.transitionText,
 					source.presentationText,
 					source.presentationMode,
 					source.presentationSourcePosition,
 					source.presentationTitle,
 					source.presentationDescription,
 					source.presentationImageUrl,
 					source.presentationSiteName,
 					source.presentationProvider,
 					source.presentationProviderId,
 					source.presentationTitleManual ? 1 : 0,
 					source.presentationDescriptionManual ? 1 : 0,
 					source.presentationImageManual ? 1 : 0,
 					source.presentationMetadataFetchedAtUtc,
 					now,
 					now
 				);
@@ -627,6 +754,66 @@ export async function duplicatePiece(sourceId: string): Promise<string> {
 	}
 }
 export async function loadPiecePresentationMetadata(
 	id: string,
 	expectedRevision: number,
 	metadataLoader = fetchPresentationMetadata
 ) {
 	if (!Number.isInteger(expectedRevision) || expectedRevision < 1) {
 		throw new Error('INVALID_REVISION');
 	}
 	const database = getDatabase();
 	const piece = database
 		.prepare(
 			`SELECT p.revision, p.presentation_mode, p.presentation_source_position,
 			 p.presentation_title_manual, p.presentation_description_manual,
 			 p.presentation_image_manual, s.url
 			 FROM pieces p LEFT JOIN piece_sources s ON s.piece_id = p.id
 			 AND s.position = p.presentation_source_position
 			 WHERE p.id = ? AND p.status != 'archived'`
 		)
 		.get(id) as
 		| {
 				revision: number;
 				presentation_mode: PresentationMode;
 				presentation_source_position: number | null;
 				presentation_title_manual: number;
 				presentation_description_manual: number;
 				presentation_image_manual: number;
 				url: string | null;
 		  }
 		| undefined;
 	if (!piece) throw new Error('NOT_FOUND');
 	if (piece.revision !== expectedRevision) throw new Error('CONFLICT');
 	if (piece.presentation_mode === 'text' || !piece.url) throw new Error('INVALID_PRESENTATION');
 	const metadata = await metadataLoader(piece.url);
 	const now = new Date().toISOString();
 	const result = database
 		.prepare(
 			`UPDATE pieces SET
 			 presentation_title = CASE WHEN presentation_title_manual = 1 THEN presentation_title ELSE ? END,
 			 presentation_description = CASE WHEN presentation_description_manual = 1 THEN presentation_description ELSE ? END,
 			 presentation_image_url = CASE WHEN presentation_image_manual = 1 THEN presentation_image_url ELSE ? END,
 			 presentation_site_name = ?, presentation_provider = ?, presentation_provider_id = ?,
 			 presentation_metadata_fetched_at_utc = ?, updated_at_utc = ?, revision = revision + 1
 			 WHERE id = ? AND revision = ? AND status != 'archived'`
 		)
 		.run(
 			metadata.title,
 			metadata.description,
 			metadata.imageUrl,
 			metadata.siteName,
 			metadata.provider,
 			metadata.providerId,
 			now,
 			now,
 			id,
 			expectedRevision
 		);
 	if (result.changes !== 1) throw new Error('CONFLICT');
 	return { revision: expectedRevision + 1, updatedAtUtc: now };
 }
 export async function uploadPieceImage(
 	pieceId: string,
 	expectedRevision: number,
@@ -47,12 +47,28 @@ describe('database setup', () => {
 					(SELECT count(*) FROM schema_migrations) AS migrations,
 					(SELECT count(*) FROM pieces) AS pieces,
 					(SELECT count(*) FROM shows) AS shows,
-					(SELECT count(*) FROM piece_usages) AS usages`
+					(SELECT count(*) FROM piece_usages) AS usages,
 					(SELECT count(*) FROM show_templates) AS templates,
 					(SELECT count(*) FROM show_sections WHERE is_reserve_bank = 1) AS reserve_banks`
 			)
-			.get() as { migrations: number; pieces: number; shows: number; usages: number };
+			.get() as {
 			migrations: number;
 			pieces: number;
 			shows: number;
 			usages: number;
 			templates: number;
 			reserve_banks: number;
 		};
 		database.close();
-		expect(counts).toEqual({ migrations: 3, pieces: 6, shows: 1, usages: 3 });
+		expect(counts).toEqual({
 			migrations: 6,
 			pieces: 6,
 			shows: 2,
 			usages: 5,
 			templates: 2,
 			reserve_banks: 2
 		});
 		expect(databasePath).not.toBe(path.resolve('.data/sendewerk.sqlite'));
 	});
@@ -0,0 +1,185 @@
 import { execFileSync } from 'node:child_process';
 import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { closeDatabase, getDatabase } from './database.js';
 import {
 	completeCurrent,
 	getLiveView,
 	getPresentationMedia,
 	getPresentationView,
 	goBack,
 	issuePresentationAccess,
 	moveOpenUsage,
 	presentUsage,
 	skipCurrent,
 	startOrResumeLive
 } from './live.js';
 let directory: string;
 beforeEach(() => {
 	directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-live-test-'));
 	process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
 	process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
 	execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
 	execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
 });
 afterEach(() => {
 	closeDatabase();
 	delete process.env.SENDEWERK_DB_PATH;
 	delete process.env.SENDEWERK_UPLOAD_DIR;
 	rmSync(directory, { recursive: true, force: true });
 });
 describe('live mode', () => {
 	it('restores live state, records actual intervals and applies commands only once', () => {
 		const started = new Date('2026-10-22T18:00:00.000Z');
 		const initial = getLiveView('show-october', started);
 		expect(initial.current).toBeNull();
 		expect(startOrResumeLive('show-october', 'start-command', 0, started)).toEqual({
 			revision: 1,
 			duplicate: false
 		});
 		expect(startOrResumeLive('show-october', 'start-command', 0, started)).toEqual({
 			revision: 1,
 			duplicate: true
 		});
 		let live = getLiveView('show-october', new Date('2026-10-22T18:05:00.000Z'));
 		expect(live.current?.id).toBe('usage-console');
 		expect(live.current?.actualDurationSeconds).toBe(300);
 		expect(() =>
 			moveOpenUsage('show-october', 'usage-effects', live.show.revision, {
 				sectionId: 'section-stories',
 				position: 0
 			})
 		).toThrow('LIVE_ORDER_LOCKED');
 		completeCurrent('show-october', 'complete-console', 1, new Date('2026-10-22T18:05:00.000Z'));
 		completeCurrent('show-october', 'complete-console', 1, new Date('2026-10-22T18:05:00.000Z'));
 		live = getLiveView('show-october', new Date('2026-10-22T18:06:00.000Z'));
 		expect(live.current?.id).toBe('usage-effects');
 		expect(
 			live.sections
 				.flatMap((section) => section.usages)
 				.find((usage) => usage.id === 'usage-console')
 		).toMatchObject({ status: 'done', actualDurationSeconds: 300 });
 		expect(
 			getDatabase()
 				.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
 				.get('usage-console')
 		).toEqual({ count: 1 });
 		expect(() => skipCurrent('show-october', 'stale-command', 1)).toThrow('CONFLICT');
 		skipCurrent('show-october', 'skip-effects', 2, new Date('2026-10-22T18:06:00.000Z'));
 		live = getLiveView('show-october', new Date('2026-10-22T18:07:00.000Z'));
 		expect(live.current).toBeNull();
 		expect(live.completedCount).toBe(2);
 		goBack('show-october', 'back-effects', 3, new Date('2026-10-22T18:07:00.000Z'));
 		live = getLiveView('show-october', new Date('2026-10-22T18:08:00.000Z'));
 		expect(live.current).toMatchObject({ id: 'usage-effects', status: 'current' });
 		expect(live.current?.actualDurationSeconds).toBe(120);
 	});
 	it('changes presentation only explicitly and exposes no private fields', async () => {
 		const uploads = process.env.SENDEWERK_UPLOAD_DIR!;
 		mkdirSync(uploads, { recursive: true });
 		writeFileSync(path.join(uploads, 'presentation.png'), Buffer.from('test-image'));
 		getDatabase()
 			.prepare(
 				`INSERT INTO piece_media (id, piece_id, storage_name, original_name, mime_type,
 				 byte_size, alt_text, position, created_at_utc) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
 			)
 			.run(
 				'presentation-image',
 				'piece-console',
 				'presentation.png',
 				'private-original-name.png',
 				'image/png',
 				10,
 				'Konsole auf dem Tisch',
 				0,
 				'2026-10-22T18:00:00.000Z'
 			);
 		const token = issuePresentationAccess('show-october');
 		expect(getPresentationView(token)).toEqual({ revision: 0, content: null });
 		startOrResumeLive('show-october', 'start-output', 0);
 		expect(getPresentationView(token)).toEqual({ revision: 0, content: null });
 		presentUsage('show-october', 'usage-console', 'present-console', 1);
 		const output = getPresentationView(token)!;
 		expect(output.content).toMatchObject({
 			title: 'Die kleine Konsole mit dem großen Dreh',
 			images: [{ id: 'presentation-image', altText: 'Konsole auf dem Tisch' }]
 		});
 		const serialized = JSON.stringify(output);
 		expect(serialized).toContain('Weniger Leistung, mehr Idee.');
 		expect(serialized).not.toContain('Herstellerangaben');
 		expect(serialized).not.toContain('Moderationsstichpunkte');
 		expect(serialized).not.toContain('private-original-name');
 		expect(serialized).not.toContain('presentation.png');
 		const media = await getPresentationMedia(token, 'presentation-image');
 		expect(media?.data.toString()).toBe('test-image');
 		expect(await getPresentationMedia(token, 'unknown-image')).toBeNull();
 		const replacementToken = issuePresentationAccess('show-october');
 		expect(getPresentationView(token)).toBeNull();
 		expect(getPresentationView(replacementToken)?.content?.title).toBe(
 			'Die kleine Konsole mit dem großen Dreh'
 		);
 	});
 	it('projects only snapshotted link and video data and changes players explicitly', () => {
 		getDatabase()
 			.prepare(
 				`UPDATE piece_usages SET presentation_mode_snapshot = 'video',
 				 presentation_source_label_snapshot = 'YouTube',
 				 presentation_source_url_snapshot = 'https://youtu.be/dQw4w9WgXcQ',
 				 presentation_source_timecode_snapshot = 75,
 				 presentation_title_meta_snapshot = 'Videotitel',
 				 presentation_site_name_snapshot = 'YouTube',
 				 presentation_provider_snapshot = 'youtube',
 				 presentation_provider_id_snapshot = 'dQw4w9WgXcQ'
 				 WHERE id = 'usage-console'`
 			)
 			.run();
 		getDatabase()
 			.prepare(
 				`UPDATE piece_usages SET presentation_mode_snapshot = 'link',
 				 presentation_source_label_snapshot = 'Artikel',
 				 presentation_source_url_snapshot = 'https://example.com/artikel',
 				 presentation_title_meta_snapshot = 'Linktitel',
 				 presentation_description_snapshot = 'Öffentlicher Anreißer',
 				 presentation_site_name_snapshot = 'Example'
 				 WHERE id = 'usage-effects'`
 			)
 			.run();
 		const token = issuePresentationAccess('show-october');
 		presentUsage('show-october', 'usage-console', 'present-video', 0);
 		expect(getPresentationView(token)?.content).toMatchObject({
 			mode: 'video',
 			previewTitle: 'Videotitel',
 			embedUrl: 'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75',
 			source: { url: 'https://youtu.be/dQw4w9WgXcQ', timecodeSeconds: 75 }
 		});
 		presentUsage('show-october', 'usage-effects', 'present-link', 1);
 		const link = getPresentationView(token)!;
 		expect(link.content).toMatchObject({
 			mode: 'link',
 			previewTitle: 'Linktitel',
 			description: 'Öffentlicher Anreißer',
 			embedUrl: '',
 			source: { label: 'Artikel', url: 'https://example.com/artikel' }
 		});
 		const serialized = JSON.stringify(link);
 		expect(serialized).not.toContain('Herstellerangaben');
 		expect(serialized).not.toContain('Moderationsstichpunkte');
 	});
 });
@@ -0,0 +1,623 @@
 import { createHash, randomBytes, randomUUID } from 'node:crypto';
 import type Database from 'better-sqlite3';
 import { getMediaFile } from './content.js';
 import { getDatabase } from './database.js';
 import { renderMarkdown } from './markdown.js';
 import { buildEmbedUrl, fetchPresentationImage, type PresentationContent } from './presentation.js';
 import {
 	getShow,
 	movePieceUsage,
 	type MovePieceUsageInput,
 	type PieceUsage,
 	type ShowSection
 } from './shows.js';
 type LiveStateRow = {
 	show_id: string;
 	revision: number;
 	current_usage_id: string | null;
 	started_at_utc: string | null;
 	ended_at_utc: string | null;
 	presentation_usage_id: string | null;
 	presentation_revision: number;
 	updated_at_utc: string;
 };
 type OrderedUsageRow = {
 	id: string;
 	section_id: string;
 	section_name: string;
 	section_position: number;
 	position: number;
 	status: PieceUsage['status'];
 };
 export type LiveUsage = PieceUsage & {
 	sectionId: string;
 	sectionName: string;
 	actualDurationSeconds: number;
 	introHtml: string;
 	researchHtml: string;
 	moderationHtml: string;
 	transitionHtml: string;
 };
 export type LiveSection = Omit<ShowSection, 'usages'> & { usages: LiveUsage[] };
 export type LiveView = {
 	show: {
 		id: string;
 		title: string;
 		status: string;
 		revision: number;
 		totalDurationSeconds: number;
 	};
 	liveRevision: number;
 	startedAtUtc: string | null;
 	updatedAtUtc: string;
 	presentationUsageId: string | null;
 	presentationRevision: number;
 	sections: LiveSection[];
 	reserve: LiveUsage[];
 	current: LiveUsage | null;
 	next: LiveUsage | null;
 	completedCount: number;
 	totalCount: number;
 };
 export type PresentationView = {
 	revision: number;
 	content: null | {
 		mode: PresentationContent['mode'];
 		title: string;
 		html: string;
 		source: PresentationContent['source'];
 		previewTitle: string;
 		description: string;
 		imageUrl: string;
 		siteName: string;
 		provider: PresentationContent['provider'];
 		providerId: string;
 		embedUrl: string;
 		sources: { label: string; url: string; timecodeSeconds: number | null }[];
 		images: { id: string; altText: string }[];
 	};
 };
 function hashToken(token: string) {
 	return createHash('sha256').update(token).digest('hex');
 }
 function nowIso(now?: Date) {
 	return (now ?? new Date()).toISOString();
 }
 function requireCommandId(commandId: string) {
 	if (!commandId || commandId.length > 200) throw new Error('INVALID_COMMAND');
 }
 function ensureLiveState(database: Database.Database, showId: string, now: string): LiveStateRow {
 	const show = database.prepare('SELECT 1 FROM shows WHERE id = ?').get(showId);
 	if (!show) throw new Error('NOT_FOUND');
 	database
 		.prepare(
 			`INSERT OR IGNORE INTO show_live_states (show_id, updated_at_utc)
 			 VALUES (?, ?)`
 		)
 		.run(showId, now);
 	return database
 		.prepare('SELECT * FROM show_live_states WHERE show_id = ?')
 		.get(showId) as LiveStateRow;
 }
 function orderedUsages(database: Database.Database, showId: string): OrderedUsageRow[] {
 	return database
 		.prepare(
 			`SELECT u.id, s.id AS section_id, s.name AS section_name,
 			 s.position AS section_position, u.position, u.status
 			 FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE s.show_id = ? AND s.is_reserve_bank = 0
 			 ORDER BY s.position, u.position`
 		)
 		.all(showId) as OrderedUsageRow[];
 }
 function usageBelongsToShow(database: Database.Database, showId: string, usageId: string) {
 	const row = database
 		.prepare(
 			`SELECT s.is_reserve_bank FROM piece_usages u
 			 JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE u.id = ? AND s.show_id = ?`
 		)
 		.get(usageId, showId) as { is_reserve_bank: number } | undefined;
 	if (!row || row.is_reserve_bank) throw new Error('NOT_FOUND');
 }
 function closeActiveRun(database: Database.Database, showId: string, now: string) {
 	database
 		.prepare(
 			`UPDATE live_usage_runs SET ended_at_utc = ?
 			 WHERE show_id = ? AND ended_at_utc IS NULL`
 		)
 		.run(now, showId);
 }
 function activateUsage(database: Database.Database, showId: string, usageId: string, now: string) {
 	usageBelongsToShow(database, showId, usageId);
 	database
 		.prepare(
 			`UPDATE piece_usages SET status = 'open'
 			 WHERE status = 'current' AND id != ? AND id IN (
 				SELECT u.id FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 				WHERE s.show_id = ?
 			 )`
 		)
 		.run(usageId, showId);
 	database.prepare(`UPDATE piece_usages SET status = 'current' WHERE id = ?`).run(usageId);
 	database
 		.prepare(
 			`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc)
 			 VALUES (?, ?, ?, ?)`
 		)
 		.run(randomUUID(), showId, usageId, now);
 	database
 		.prepare(
 			'UPDATE show_live_states SET current_usage_id = ?, ended_at_utc = NULL WHERE show_id = ?'
 		)
 		.run(usageId, showId);
 }
 function executeCommand(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	action: string,
 	operation: (database: Database.Database, state: LiveStateRow, now: string) => void,
 	nowValue?: Date
 ) {
 	requireCommandId(commandId);
 	const database = getDatabase();
 	return database.transaction(() => {
 		const duplicate = database
 			.prepare('SELECT result_revision FROM live_commands WHERE show_id = ? AND command_id = ?')
 			.get(showId, commandId) as { result_revision: number } | undefined;
 		if (duplicate) return { revision: duplicate.result_revision, duplicate: true };
 		const now = nowIso(nowValue);
 		const state = ensureLiveState(database, showId, now);
 		const show = database.prepare('SELECT status FROM shows WHERE id = ?').get(showId) as {
 			status: string;
 		};
 		if (show.status === 'completed') throw new Error('SHOW_COMPLETED');
 		if (state.revision !== expectedRevision) throw new Error('CONFLICT');
 		operation(database, state, now);
 		const updated = database
 			.prepare(
 				`UPDATE show_live_states SET revision = revision + 1, updated_at_utc = ?
 				 WHERE show_id = ? AND revision = ?`
 			)
 			.run(now, showId, expectedRevision);
 		if (updated.changes !== 1) throw new Error('CONFLICT');
 		const revision = expectedRevision + 1;
 		database
 			.prepare(
 				`INSERT INTO live_commands (show_id, command_id, action, result_revision, created_at_utc)
 				 VALUES (?, ?, ?, ?, ?)`
 			)
 			.run(showId, commandId, action, revision, now);
 		return { revision, duplicate: false };
 	})();
 }
 function actualDurations(database: Database.Database, showId: string, now: string) {
 	const rows = database
 		.prepare(
 			`SELECT usage_id, started_at_utc, ended_at_utc
 			 FROM live_usage_runs WHERE show_id = ?`
 		)
 		.all(showId) as { usage_id: string; started_at_utc: string; ended_at_utc: string | null }[];
 	const durations = new Map<string, number>();
 	for (const row of rows) {
 		const seconds = Math.max(
 			0,
 			Math.floor(
 				(new Date(row.ended_at_utc ?? now).getTime() - new Date(row.started_at_utc).getTime()) /
 					1000
 			)
 		);
 		durations.set(row.usage_id, (durations.get(row.usage_id) ?? 0) + seconds);
 	}
 	return durations;
 }
 function liveUsage(
 	usage: PieceUsage,
 	sectionId: string,
 	sectionName: string,
 	actualSeconds: number
 ) {
 	return {
 		...usage,
 		sectionId,
 		sectionName,
 		actualDurationSeconds: actualSeconds,
 		introHtml: renderMarkdown(usage.intro),
 		researchHtml: renderMarkdown(usage.research),
 		moderationHtml: renderMarkdown(usage.moderation),
 		transitionHtml: renderMarkdown(usage.transition)
 	};
 }
 export function getLiveView(showId: string, nowValue?: Date): LiveView {
 	const database = getDatabase();
 	const now = nowIso(nowValue);
 	const state = ensureLiveState(database, showId, now);
 	const show = getShow(showId);
 	if (!show) throw new Error('NOT_FOUND');
 	const durations = actualDurations(database, showId, now);
 	const sections = show.sections.map((section) => ({
 		...section,
 		usages: section.usages.map((usage) =>
 			liveUsage(usage, section.id, section.name, durations.get(usage.id) ?? 0)
 		)
 	}));
 	const reserve = show.reserve.map((usage) =>
 		liveUsage(usage, '', 'Reservebank', durations.get(usage.id) ?? 0)
 	);
 	const usages = sections.flatMap((section) => section.usages);
 	const current = usages.find((usage) => usage.id === state.current_usage_id) ?? null;
 	const currentIndex = current ? usages.findIndex((usage) => usage.id === current.id) : -1;
 	const next =
 		usages.slice(currentIndex + 1).find((usage) => usage.status === 'open') ??
 		(current ? null : (usages.find((usage) => usage.status === 'open') ?? null));
 	return {
 		show: {
 			id: show.id,
 			title: show.title,
 			status: show.status,
 			revision: show.revision,
 			totalDurationSeconds: show.totalDurationSeconds
 		},
 		liveRevision: state.revision,
 		startedAtUtc: state.started_at_utc,
 		updatedAtUtc: state.updated_at_utc,
 		presentationUsageId: state.presentation_usage_id,
 		presentationRevision: state.presentation_revision,
 		sections,
 		reserve,
 		current,
 		next,
 		completedCount: usages.filter((usage) => usage.status === 'done' || usage.status === 'skipped')
 			.length,
 		totalCount: usages.length
 	};
 }
 export function startOrResumeLive(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	nowValue?: Date
 ) {
 	return executeCommand(
 		showId,
 		commandId,
 		expectedRevision,
 		'start',
 		(database, state, now) => {
 			database
 				.prepare(
 					`UPDATE shows SET status = 'live', updated_at_utc = ?
 					 WHERE id = ? AND status != 'completed'`
 				)
 				.run(now, showId);
 			database
 				.prepare(
 					`UPDATE show_live_states SET started_at_utc = COALESCE(started_at_utc, ?), ended_at_utc = NULL
 					 WHERE show_id = ?`
 				)
 				.run(now, showId);
 			const activeRun = database
 				.prepare('SELECT 1 FROM live_usage_runs WHERE show_id = ? AND ended_at_utc IS NULL')
 				.get(showId);
 			if (state.current_usage_id && activeRun) return;
 			const current = state.current_usage_id
 				? orderedUsages(database, showId).find((usage) => usage.id === state.current_usage_id)
 				: undefined;
 			const target =
 				current ?? orderedUsages(database, showId).find((usage) => usage.status === 'open');
 			if (target) activateUsage(database, showId, target.id, now);
 		},
 		nowValue
 	);
 }
 function advanceCurrent(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	status: 'done' | 'skipped',
 	nowValue?: Date
 ) {
 	return executeCommand(
 		showId,
 		commandId,
 		expectedRevision,
 		status,
 		(database, state, now) => {
 			if (!state.current_usage_id) throw new Error('NO_CURRENT');
 			const ordered = orderedUsages(database, showId);
 			const currentIndex = ordered.findIndex((usage) => usage.id === state.current_usage_id);
 			if (currentIndex < 0) throw new Error('NOT_FOUND');
 			closeActiveRun(database, showId, now);
 			database
 				.prepare('UPDATE piece_usages SET status = ? WHERE id = ?')
 				.run(status, state.current_usage_id);
 			const next = ordered.slice(currentIndex + 1).find((usage) => usage.status === 'open');
 			if (next) activateUsage(database, showId, next.id, now);
 			else
 				database
 					.prepare('UPDATE show_live_states SET current_usage_id = NULL WHERE show_id = ?')
 					.run(showId);
 		},
 		nowValue
 	);
 }
 export function completeCurrent(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	nowValue?: Date
 ) {
 	return advanceCurrent(showId, commandId, expectedRevision, 'done', nowValue);
 }
 export function skipCurrent(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	nowValue?: Date
 ) {
 	return advanceCurrent(showId, commandId, expectedRevision, 'skipped', nowValue);
 }
 export function goBack(
 	showId: string,
 	commandId: string,
 	expectedRevision: number,
 	nowValue?: Date
 ) {
 	return executeCommand(
 		showId,
 		commandId,
 		expectedRevision,
 		'back',
 		(database, state, now) => {
 			const ordered = orderedUsages(database, showId);
 			const currentIndex = state.current_usage_id
 				? ordered.findIndex((usage) => usage.id === state.current_usage_id)
 				: ordered.length;
 			const previous = ordered
 				.slice(0, Math.max(0, currentIndex))
 				.reverse()
 				.find((usage) => usage.status === 'done' || usage.status === 'skipped');
 			if (!previous) throw new Error('NO_PREVIOUS');
 			if (state.current_usage_id) {
 				closeActiveRun(database, showId, now);
 				database
 					.prepare(`UPDATE piece_usages SET status = 'open' WHERE id = ?`)
 					.run(state.current_usage_id);
 			}
 			activateUsage(database, showId, previous.id, now);
 		},
 		nowValue
 	);
 }
 export function presentUsage(
 	showId: string,
 	usageId: string | null,
 	commandId: string,
 	expectedRevision: number,
 	nowValue?: Date
 ) {
 	return executeCommand(
 		showId,
 		commandId,
 		expectedRevision,
 		usageId ? 'present' : 'clear-presentation',
 		(database, _state, now) => {
 			if (usageId) usageBelongsToShow(database, showId, usageId);
 			database
 				.prepare(
 					`UPDATE show_live_states SET presentation_usage_id = ?,
 					 presentation_revision = presentation_revision + 1, updated_at_utc = ?
 					 WHERE show_id = ?`
 				)
 				.run(usageId, now, showId);
 		},
 		nowValue
 	);
 }
 export function moveOpenUsage(
 	showId: string,
 	usageId: string,
 	expectedShowRevision: number,
 	input: MovePieceUsageInput
 ) {
 	const database = getDatabase();
 	const usage = database
 		.prepare(
 			`SELECT u.status FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE u.id = ? AND s.show_id = ?`
 		)
 		.get(usageId, showId) as { status: PieceUsage['status'] } | undefined;
 	if (!usage) throw new Error('NOT_FOUND');
 	if (usage.status !== 'open') throw new Error('LIVE_ORDER_LOCKED');
 	if (input.sectionId) {
 		const target = database
 			.prepare(
 				`SELECT u.id, u.status FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 				 WHERE s.id = ? AND s.show_id = ? AND s.is_reserve_bank = 0 ORDER BY u.position`
 			)
 			.all(input.sectionId, showId) as { id: string; status: PieceUsage['status'] }[];
 		if (!target.length) {
 			const section = database
 				.prepare('SELECT 1 FROM show_sections WHERE id = ? AND show_id = ? AND is_reserve_bank = 0')
 				.get(input.sectionId, showId);
 			if (!section) throw new Error('NOT_FOUND');
 		}
 		const withoutMoved = target.filter((item) => item.id !== usageId);
 		const firstOpenPosition = withoutMoved.findIndex((item) => item.status === 'open');
 		const minimum = firstOpenPosition < 0 ? withoutMoved.length : firstOpenPosition;
 		if (input.position < minimum) throw new Error('LIVE_ORDER_LOCKED');
 	}
 	return movePieceUsage(showId, usageId, expectedShowRevision, input);
 }
 export function issuePresentationAccess(showId: string) {
 	const database = getDatabase();
 	const now = nowIso();
 	ensureLiveState(database, showId, now);
 	const token = randomBytes(32).toString('base64url');
 	database.transaction(() => {
 		database
 			.prepare(
 				'UPDATE presentation_access_tokens SET revoked_at_utc = ? WHERE show_id = ? AND revoked_at_utc IS NULL'
 			)
 			.run(now, showId);
 		database
 			.prepare(
 				`INSERT INTO presentation_access_tokens (id, show_id, token_hash, created_at_utc)
 				 VALUES (?, ?, ?, ?)`
 			)
 			.run(randomUUID(), showId, hashToken(token), now);
 	})();
 	return token;
 }
 function presentationShowId(database: Database.Database, token: string) {
 	if (!token || token.length > 200) return null;
 	const row = database
 		.prepare(
 			`SELECT show_id FROM presentation_access_tokens
 			 WHERE token_hash = ? AND revoked_at_utc IS NULL`
 		)
 		.get(hashToken(token)) as { show_id: string } | undefined;
 	return row?.show_id ?? null;
 }
 export function getPresentationView(token: string): PresentationView | null {
 	const database = getDatabase();
 	const showId = presentationShowId(database, token);
 	if (!showId) return null;
 	const state = ensureLiveState(database, showId, nowIso());
 	if (!state.presentation_usage_id) return { revision: state.presentation_revision, content: null };
 	const usage = database
 		.prepare(
 			`SELECT u.title_snapshot, u.presentation_snapshot, u.original_piece_id,
 			 u.presentation_mode_snapshot, u.presentation_source_label_snapshot,
 			 u.presentation_source_url_snapshot, u.presentation_source_timecode_snapshot,
 			 u.presentation_title_meta_snapshot, u.presentation_description_snapshot,
 			 u.presentation_image_url_snapshot, u.presentation_site_name_snapshot,
 			 u.presentation_provider_snapshot, u.presentation_provider_id_snapshot
 			 FROM piece_usages u JOIN show_sections s ON s.id = u.show_section_id
 			 WHERE u.id = ? AND s.show_id = ? AND s.is_reserve_bank = 0`
 		)
 		.get(state.presentation_usage_id, showId) as
 		| {
 				title_snapshot: string;
 				presentation_snapshot: string;
 				original_piece_id: string | null;
 				presentation_mode_snapshot: PresentationContent['mode'];
 				presentation_source_label_snapshot: string;
 				presentation_source_url_snapshot: string;
 				presentation_source_timecode_snapshot: number | null;
 				presentation_title_meta_snapshot: string;
 				presentation_description_snapshot: string;
 				presentation_image_url_snapshot: string;
 				presentation_site_name_snapshot: string;
 				presentation_provider_snapshot: PresentationContent['provider'];
 				presentation_provider_id_snapshot: string;
 		  }
 		| undefined;
 	if (!usage) return { revision: state.presentation_revision, content: null };
 	const sources =
 		usage.presentation_mode_snapshot === 'text' && usage.original_piece_id
 			? (database
 					.prepare(
 						`SELECT label, url, timecode_seconds AS timecodeSeconds
 					 FROM piece_sources WHERE piece_id = ? ORDER BY position`
 					)
 					.all(usage.original_piece_id) as {
 					label: string;
 					url: string;
 					timecodeSeconds: number | null;
 				}[])
 			: [];
 	const images =
 		usage.presentation_mode_snapshot === 'text' && usage.original_piece_id
 			? (database
 					.prepare(
 						`SELECT id, alt_text AS altText FROM piece_media
 					 WHERE piece_id = ? ORDER BY position`
 					)
 					.all(usage.original_piece_id) as { id: string; altText: string }[])
 			: [];
 	return {
 		revision: state.presentation_revision,
 		content: {
 			mode: usage.presentation_mode_snapshot,
 			title: usage.title_snapshot,
 			html: renderMarkdown(usage.presentation_snapshot),
 			source: usage.presentation_source_url_snapshot
 				? {
 						label: usage.presentation_source_label_snapshot,
 						url: usage.presentation_source_url_snapshot,
 						timecodeSeconds: usage.presentation_source_timecode_snapshot
 					}
 				: null,
 			previewTitle: usage.presentation_title_meta_snapshot,
 			description: usage.presentation_description_snapshot,
 			imageUrl: usage.presentation_image_url_snapshot,
 			siteName: usage.presentation_site_name_snapshot,
 			provider: usage.presentation_provider_snapshot,
 			providerId: usage.presentation_provider_id_snapshot,
 			embedUrl: buildEmbedUrl(
 				usage.presentation_provider_snapshot,
 				usage.presentation_provider_id_snapshot,
 				usage.presentation_source_timecode_snapshot
 			),
 			sources,
 			images
 		}
 	};
 }
 export async function getPresentationPreviewImage(token: string) {
 	const view = getPresentationView(token);
 	if (!view?.content?.imageUrl || view.content.mode === 'text') return null;
 	try {
 		return await fetchPresentationImage(view.content.imageUrl);
 	} catch {
 		return null;
 	}
 }
 export async function getPresentationMedia(token: string, mediaId: string) {
 	const database = getDatabase();
 	const showId = presentationShowId(database, token);
 	if (!showId) return null;
 	const allowed = database
 		.prepare(
 			`SELECT 1 FROM show_live_states l
 			 JOIN piece_usages u ON u.id = l.presentation_usage_id
 			 JOIN show_sections s ON s.id = u.show_section_id
 			 JOIN piece_media m ON m.piece_id = u.original_piece_id
 			 WHERE l.show_id = ? AND s.show_id = ? AND m.id = ?`
 		)
 		.get(showId, showId, mediaId);
 	if (!allowed) return null;
 	return getMediaFile(mediaId);
 }
@@ -0,0 +1,61 @@
 import { describe, expect, it } from 'vitest';
 import {
 	buildEmbedUrl,
 	detectVideoProvider,
 	extractMetadataFromHtml,
 	fetchPresentationMetadata
 } from './presentation.js';
 describe('presentation metadata and providers', () => {
 	it('recognizes supported YouTube URL forms and creates privacy-enhanced embeds with start time', () => {
 		for (const url of [
 			'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
 			'https://youtu.be/dQw4w9WgXcQ',
 			'https://www.youtube.com/shorts/dQw4w9WgXcQ',
 			'https://youtube.com/live/dQw4w9WgXcQ'
 		]) {
 			expect(detectVideoProvider(url)).toEqual({ provider: 'youtube', id: 'dQw4w9WgXcQ' });
 		}
 		expect(buildEmbedUrl('youtube', 'dQw4w9WgXcQ', 75)).toBe(
 			'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
 		);
 		expect(detectVideoProvider('https://evil.example/watch?v=dQw4w9WgXcQ')).toBeNull();
 		expect(detectVideoProvider('https://youtube.com/watch?v=invalid')).toBeNull();
 	});
 	it('recognizes canonical TikTok videos without inventing a start parameter', () => {
 		expect(
 			detectVideoProvider('https://www.tiktok.com/@scout2015/video/6718335390845095173')
 		).toEqual({ provider: 'tiktok', id: '6718335390845095173' });
 		expect(buildEmbedUrl('tiktok', '6718335390845095173', 90)).toBe(
 			'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
 		);
 	});
 	it('extracts generic metadata from local HTML and tolerates a missing image', async () => {
 		const metadata = await extractMetadataFromHtml(
 			`<!doctype html><html><head>
 				<meta property="og:title" content="Lokale Vorschau">
 				<meta property="og:description" content="Ein kurzer Anreißer">
 				<meta property="og:site_name" content="Testseite">
 			</head></html>`,
 			'https://example.com/artikel'
 		);
 		expect(metadata).toMatchObject({
 			title: 'Lokale Vorschau',
 			description: 'Ein kurzer Anreißer',
 			imageUrl: '',
 			siteName: 'Testseite'
 		});
 	});
 	it('rejects malformed and private metadata targets before a network request', async () => {
 		await expect(fetchPresentationMetadata('keine-url')).rejects.toThrow('FETCH_INVALID_URL');
 		await expect(fetchPresentationMetadata('http://127.0.0.1/private')).rejects.toThrow(
 			'FETCH_BLOCKED'
 		);
 		await expect(fetchPresentationMetadata('http://[::1]/private')).rejects.toThrow(
 			'FETCH_BLOCKED'
 		);
 	});
 });
@@ -0,0 +1,274 @@
 import { lookup } from 'node:dns/promises';
 import { isIP } from 'node:net';
 import http from 'node:http';
 import https from 'node:https';
 import metascraper from 'metascraper';
 import description from 'metascraper-description';
 import image from 'metascraper-image';
 import publisher from 'metascraper-publisher';
 import title from 'metascraper-title';
 export type PresentationMode = 'text' | 'link' | 'video';
 export type VideoProvider = 'youtube' | 'tiktok';
 export type PresentationMetadata = {
 	title: string;
 	description: string;
 	imageUrl: string;
 	siteName: string;
 	provider: VideoProvider | '';
 	providerId: string;
 };
 export type PresentationSource = {
 	label: string;
 	url: string;
 	timecodeSeconds: number | null;
 };
 export type PresentationContent = {
 	mode: PresentationMode;
 	title: string;
 	html: string;
 	source: PresentationSource | null;
 	previewTitle: string;
 	description: string;
 	imageUrl: string;
 	siteName: string;
 	provider: VideoProvider | '';
 	providerId: string;
 	embedUrl: string;
 };
 const scrape = metascraper([title(), description({ truncateLength: 500 }), image(), publisher()]);
 const MAX_HTML_BYTES = 1024 * 1024;
 const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
 const REQUEST_TIMEOUT_MS = 5_000;
 const MAX_REDIRECTS = 3;
 function isPrivateIpv4(address: string) {
 	const parts = address.split('.').map(Number);
 	return (
 		parts[0] === 0 ||
 		parts[0] === 10 ||
 		parts[0] === 127 ||
 		(parts[0] === 169 && parts[1] === 254) ||
 		(parts[0] === 172 && parts[1] >= 16 && parts[1] <= 31) ||
 		(parts[0] === 192 && parts[1] === 168) ||
 		(parts[0] === 100 && parts[1] >= 64 && parts[1] <= 127) ||
 		parts[0] >= 224
 	);
 }
 function isPrivateAddress(address: string) {
 	if (isIP(address) === 4) return isPrivateIpv4(address);
 	const normalized = address.toLowerCase().split('%')[0];
 	if (normalized === '::' || normalized === '::1') return true;
 	if (normalized.startsWith('fc') || normalized.startsWith('fd') || normalized.startsWith('fe8')) {
 		return true;
 	}
 	if (
 		normalized.startsWith('fe9') ||
 		normalized.startsWith('fea') ||
 		normalized.startsWith('feb')
 	) {
 		return true;
 	}
 	const mapped = normalized.match(/^::ffff:(\d+\.\d+\.\d+\.\d+)$/)?.[1];
 	return mapped ? isPrivateIpv4(mapped) : false;
 }
 async function publicAddress(url: URL) {
 	if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
 		throw new Error('FETCH_BLOCKED');
 	}
 	if (url.port && url.port !== (url.protocol === 'https:' ? '443' : '80')) {
 		throw new Error('FETCH_BLOCKED');
 	}
 	const hostname = url.hostname.startsWith('[') ? url.hostname.slice(1, -1) : url.hostname;
 	if (hostname === 'localhost' || hostname.endsWith('.localhost')) {
 		throw new Error('FETCH_BLOCKED');
 	}
 	const addresses = isIP(hostname)
 		? [{ address: hostname, family: isIP(hostname) }]
 		: await lookup(hostname, { all: true, verbatim: true }).catch(() => {
 				throw new Error('FETCH_UNAVAILABLE');
 			});
 	if (!addresses.length || addresses.some((entry) => isPrivateAddress(entry.address))) {
 		throw new Error('FETCH_BLOCKED');
 	}
 	return addresses[0];
 }
 async function requestPublic(
 	input: string,
 	accept: string,
 	maximumBytes: number,
 	redirects = 0
 ): Promise<{ url: string; contentType: string; data: Buffer }> {
 	let url: URL;
 	try {
 		url = new URL(input);
 	} catch {
 		throw new Error('FETCH_INVALID_URL');
 	}
 	const target = await publicAddress(url);
 	const client = url.protocol === 'https:' ? https : http;
 	return new Promise((resolve, reject) => {
 		const request = client.get(
 			url,
 			{
 				headers: {
 					Accept: accept,
 					'User-Agent': 'Sendewerk/0.5.1 (+https://git.hnz.io/hnzio/sendewerk)'
 				},
 				lookup: (_hostname, _options, callback) =>
 					callback(null, target.address, target.family as 4 | 6)
 			},
 			(response) => {
 				const status = response.statusCode ?? 0;
 				if (status >= 300 && status < 400 && response.headers.location) {
 					response.resume();
 					if (redirects >= MAX_REDIRECTS) return reject(new Error('FETCH_REDIRECTS'));
 					const next = new URL(response.headers.location, url).href;
 					requestPublic(next, accept, maximumBytes, redirects + 1).then(resolve, reject);
 					return;
 				}
 				if (status < 200 || status >= 300) {
 					response.resume();
 					return reject(new Error('FETCH_UNAVAILABLE'));
 				}
 				const chunks: Buffer[] = [];
 				let size = 0;
 				response.on('data', (chunk: Buffer) => {
 					size += chunk.length;
 					if (size > maximumBytes) {
 						request.destroy(new Error('FETCH_TOO_LARGE'));
 						return;
 					}
 					chunks.push(chunk);
 				});
 				response.on('end', () =>
 					resolve({
 						url: url.href,
 						contentType: String(response.headers['content-type'] ?? ''),
 						data: Buffer.concat(chunks)
 					})
 				);
 			}
 		);
 		request.setTimeout(REQUEST_TIMEOUT_MS, () => request.destroy(new Error('FETCH_TIMEOUT')));
 		request.on('error', reject);
 	});
 }
 export function detectVideoProvider(input: string): {
 	provider: VideoProvider;
 	id: string;
 } | null {
 	let url: URL;
 	try {
 		url = new URL(input);
 	} catch {
 		return null;
 	}
 	if (url.protocol !== 'https:' || url.username || url.password || url.port) return null;
 	const host = url.hostname.toLowerCase();
 	let youtubeId = '';
 	if (host === 'youtu.be') youtubeId = url.pathname.split('/').filter(Boolean)[0] ?? '';
 	if (host === 'youtube.com' || host === 'www.youtube.com' || host === 'm.youtube.com') {
 		if (url.pathname === '/watch') youtubeId = url.searchParams.get('v') ?? '';
 		else if (/^\/(shorts|embed|live)\//.test(url.pathname)) {
 			youtubeId = url.pathname.split('/').filter(Boolean)[1] ?? '';
 		}
 	}
 	if (/^[A-Za-z0-9_-]{11}$/.test(youtubeId)) {
 		return { provider: 'youtube', id: youtubeId };
 	}
 	if (host === 'tiktok.com' || host === 'www.tiktok.com' || host === 'm.tiktok.com') {
 		const id = url.pathname.match(/\/video\/(\d+)/)?.[1] ?? '';
 		if (/^\d+$/.test(id)) return { provider: 'tiktok', id };
 	}
 	return null;
 }
 export function buildEmbedUrl(
 	provider: VideoProvider | '',
 	providerId: string,
 	timecodeSeconds: number | null
 ) {
 	if (provider === 'youtube' && /^[A-Za-z0-9_-]{11}$/.test(providerId)) {
 		const url = new URL(`https://www.youtube-nocookie.com/embed/${providerId}`);
 		if (timecodeSeconds && timecodeSeconds > 0)
 			url.searchParams.set('start', String(timecodeSeconds));
 		return url.href;
 	}
 	if (provider === 'tiktok' && /^\d+$/.test(providerId)) {
 		const url = new URL(`https://www.tiktok.com/player/v1/${providerId}`);
 		url.searchParams.set('autoplay', '0');
 		url.searchParams.set('controls', '1');
 		return url.href;
 	}
 	return '';
 }
 export async function extractMetadataFromHtml(
 	html: string,
 	url: string
 ): Promise<PresentationMetadata> {
 	const metadata = await scrape({ html, url });
 	return {
 		title: String(metadata.title ?? '').slice(0, 300),
 		description: String(metadata.description ?? '').slice(0, 1_000),
 		imageUrl: String(metadata.image ?? '').slice(0, 2_000),
 		siteName: String(metadata.publisher ?? new URL(url).hostname).slice(0, 200),
 		provider: '',
 		providerId: ''
 	};
 }
 async function providerMetadata(url: string, provider: VideoProvider) {
 	const endpoint =
 		provider === 'youtube'
 			? `https://www.youtube.com/oembed?format=json&url=${encodeURIComponent(url)}`
 			: `https://www.tiktok.com/oembed?url=${encodeURIComponent(url)}`;
 	const response = await requestPublic(endpoint, 'application/json', 256 * 1024);
 	if (!response.contentType.toLowerCase().includes('json')) throw new Error('FETCH_INVALID_TYPE');
 	const value = JSON.parse(response.data.toString('utf8')) as Record<string, unknown>;
 	return {
 		title: String(value.title ?? '').slice(0, 300),
 		description: '',
 		imageUrl: String(value.thumbnail_url ?? '').slice(0, 2_000),
 		siteName: String(value.provider_name ?? (provider === 'youtube' ? 'YouTube' : 'TikTok')).slice(
 			0,
 			200
 		)
 	};
 }
 export async function fetchPresentationMetadata(url: string): Promise<PresentationMetadata> {
 	const video = detectVideoProvider(url);
 	if (video) {
 		const metadata = await providerMetadata(url, video.provider);
 		return { ...metadata, provider: video.provider, providerId: video.id };
 	}
 	const response = await requestPublic(url, 'text/html,application/xhtml+xml', MAX_HTML_BYTES);
 	const contentType = response.contentType.toLowerCase();
 	if (!contentType.includes('text/html') && !contentType.includes('application/xhtml+xml')) {
 		throw new Error('FETCH_INVALID_TYPE');
 	}
 	return extractMetadataFromHtml(response.data.toString('utf8'), response.url);
 }
 export async function fetchPresentationImage(url: string) {
 	const response = await requestPublic(
 		url,
 		'image/jpeg,image/png,image/webp,image/gif',
 		MAX_IMAGE_BYTES
 	);
 	const mimeType = response.contentType.split(';')[0].trim().toLowerCase();
 	if (!['image/jpeg', 'image/png', 'image/webp', 'image/gif'].includes(mimeType)) {
 		throw new Error('FETCH_INVALID_TYPE');
 	}
 	return { data: response.data, mimeType };
 }
@@ -1,4 +1,5 @@
 import { getDatabase } from './database.js';
 import { getShow as getShowById, listShows } from './shows.js';
 export type PreviewPiece = {
 	id: string;
@@ -104,96 +105,49 @@ export function getPieces(): PreviewPiece[] {
 	}));
 }
-type ShowRow = {
+export function getShow(showId?: string): PreviewShow {
-	id: string;
+	const latest = showId ? null : listShows().find((show) => show.startsAtUtc !== null);
-	title: string;
+	const show = getShowById(showId ?? latest?.id ?? '');
 	starts_at_utc: string;
 	twitch_title: string;
 	announcement_text: string;
 	status: string;
 };
 type SectionRow = {
 	id: string;
 	name: string;
 	category: string | null;
 	category_color: string | null;
 	explicit_duration_seconds: number | null;
 };
 type UsageRow = {
 	id: string;
 	show_section_id: string;
 	title_snapshot: string;
 	duration_seconds: number;
 	status: PreviewUsage['status'];
 	intro_snapshot: string;
 	moderation_snapshot: string;
 	transition_snapshot: string;
 	is_reserve: number;
 };
 export function getShow(): PreviewShow {
 	const database = getDatabase();
 	const show = database
 		.prepare(
 			`SELECT id, title, starts_at_utc, twitch_title, announcement_text, status
 			 FROM shows ORDER BY starts_at_utc DESC LIMIT 1`
 		)
 		.get() as ShowRow | undefined;
 	if (!show) throw new Error('No preview show found. Run npm run db:seed.');
-
+	const sections: PreviewSection[] = show.sections.map((section) => ({
 	const sectionRows = database
 		.prepare(
 			`SELECT s.id, s.name, c.name AS category, c.color AS category_color,
 				s.explicit_duration_seconds
 			 FROM show_sections s
 			 LEFT JOIN section_categories c ON c.id = s.category_id
 			 WHERE s.show_id = ? ORDER BY s.position`
 		)
 		.all(show.id) as SectionRow[];
 	const usageRows = database
 		.prepare(
 			`SELECT id, show_section_id, title_snapshot, duration_seconds, status,
 				intro_snapshot, moderation_snapshot, transition_snapshot, is_reserve
 			 FROM piece_usages WHERE show_section_id IN (
 				SELECT id FROM show_sections WHERE show_id = ?
 			 ) ORDER BY position`
 		)
 		.all(show.id) as UsageRow[];
 	const sections = sectionRows.map((section) => {
 		const usages = usageRows
 			.filter((usage) => usage.show_section_id === section.id)
 			.map((usage) => ({
 				id: usage.id,
 				title: usage.title_snapshot,
 				durationSeconds: usage.duration_seconds,
 				status: usage.status,
 				intro: usage.intro_snapshot,
 				moderation: usage.moderation_snapshot,
 				transition: usage.transition_snapshot,
 				isReserve: usage.is_reserve === 1
 			}));
 		const plannedUsages = usages.filter((usage) => !usage.isReserve);
 		return {
 		id: section.id,
 		name: section.name,
 		category: section.category ?? 'Offen',
-			categoryColor: section.category_color ?? '#8b8f98',
+		categoryColor: section.categoryColor ?? '#8b8f98',
-			durationSeconds:
+		durationSeconds: section.durationSeconds,
-				section.explicit_duration_seconds ??
+		usages: section.usages.map((usage) => ({
-				plannedUsages.reduce((total, usage) => total + usage.durationSeconds, 0),
+			id: usage.id,
-			usages
+			title: usage.title,
-		};
+			durationSeconds: usage.durationSeconds,
-	});
+			status: usage.status,
 			intro: usage.intro,
 			moderation: usage.moderation,
 			transition: usage.transition,
 			isReserve: false
 		}))
 	}));
 	const reserveHost = sections[Math.min(1, sections.length - 1)];
 	if (reserveHost) {
 		reserveHost.usages.push(
 			...show.reserve.map((usage) => ({
 				id: usage.id,
 				title: usage.title,
 				durationSeconds: usage.durationSeconds,
 				status: usage.status,
 				intro: usage.intro,
 				moderation: usage.moderation,
 				transition: usage.transition,
 				isReserve: true
 			}))
 		);
 	}
 	return {
 		id: show.id,
 		title: show.title,
-		startsAtUtc: show.starts_at_utc,
+		startsAtUtc: show.startsAtUtc ?? '',
-		startsAtBerlin: new Intl.DateTimeFormat('de-DE', {
+		startsAtBerlin: show.startsAtUtc
 			? new Intl.DateTimeFormat('de-DE', {
 					timeZone: 'Europe/Berlin',
 					weekday: 'short',
 					day: '2-digit',
@@ -201,12 +155,13 @@ export function getShow(): PreviewShow {
 					year: 'numeric',
 					hour: '2-digit',
 					minute: '2-digit'
-		}).format(new Date(show.starts_at_utc)),
+				}).format(new Date(show.startsAtUtc))
-		twitchTitle: show.twitch_title,
+			: 'Termin offen',
-		announcement: show.announcement_text,
+		twitchTitle: show.twitchTitle,
 		announcement: show.announcementText,
 		status: show.status,
 		sections,
-		totalDurationSeconds: sections.reduce((total, section) => total + section.durationSeconds, 0)
+		totalDurationSeconds: show.totalDurationSeconds
 	};
 }
@@ -0,0 +1,521 @@
 import { execFileSync } from 'node:child_process';
 import { mkdtempSync, rmSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import path from 'node:path';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { getPiece } from './content.js';
 import { closeDatabase, getDatabase } from './database.js';
 import {
 	addPieceUsage,
 	addShowSection,
 	createShow,
 	duplicatePieceUsage,
 	getPieceUsageContexts,
 	getShow,
 	listShowTemplates,
 	movePieceUsage,
 	moveShowSection,
 	refreshPieceUsageFromOriginal,
 	removePieceUsage,
 	removeShowSection,
 	updatePieceUsage,
 	updateShowSection,
 	type PieceUsage
 } from './shows.js';
 let directory: string;
 beforeEach(() => {
 	directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-shows-test-'));
 	process.env.SENDEWERK_DB_PATH = path.join(directory, 'test.sqlite');
 	process.env.SENDEWERK_UPLOAD_DIR = path.join(directory, 'uploads');
 	execFileSync(process.execPath, ['scripts/migrate.mjs'], { cwd: process.cwd(), env: process.env });
 	execFileSync(process.execPath, ['scripts/seed.mjs'], { cwd: process.cwd(), env: process.env });
 });
 afterEach(() => {
 	closeDatabase();
 	delete process.env.SENDEWERK_DB_PATH;
 	delete process.env.SENDEWERK_UPLOAD_DIR;
 	rmSync(directory, { recursive: true, force: true });
 });
 function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
 	const edited = { ...usage, ...overrides };
 	return {
 		title: edited.title,
 		intro: edited.intro,
 		research: edited.research,
 		moderation: edited.moderation,
 		transition: edited.transition,
 		presentation: edited.presentation,
 		presentationMode: edited.presentationMode,
 		presentationSourceLabel: edited.presentationSourceLabel,
 		presentationSourceUrl: edited.presentationSourceUrl,
 		presentationSourceTimecodeSeconds: edited.presentationSourceTimecodeSeconds,
 		presentationTitle: edited.presentationTitle,
 		presentationDescription: edited.presentationDescription,
 		presentationImageUrl: edited.presentationImageUrl,
 		presentationSiteName: edited.presentationSiteName,
 		ownNotes: edited.ownNotes,
 		durationSeconds: edited.durationSeconds
 	};
 }
 describe('show builder data layer', () => {
 	it('creates blank and templated shows with independent sections and reserve banks', () => {
 		const templatesBefore = listShowTemplates();
 		expect(
 			templatesBefore.find((template) => template.id === 'template-default')?.sections
 		).toHaveLength(5);
 		expect(templatesBefore.find((template) => template.id === 'template-games')?.name).toBe(
 			'Spieleabend'
 		);
 		const blank = createShow({ title: null, startsAtUtc: null, templateId: null });
 		expect(getShow(blank.id)).toMatchObject({
 			title: 'Neue Sendung',
 			startsAtUtc: null,
 			sections: [],
 			reserve: []
 		});
 		const reserveCount = getDatabase()
 			.prepare(
 				'SELECT count(*) AS count FROM show_sections WHERE show_id = ? AND is_reserve_bank = 1'
 			)
 			.get(blank.id) as { count: number };
 		expect(reserveCount.count).toBe(1);
 		const templated = createShow({
 			title: 'Vorlagenkopie',
 			startsAtUtc: '2027-01-08T19:00:00Z',
 			templateId: 'template-default'
 		});
 		const copy = getShow(templated.id)!;
 		expect(copy.sections.map((section) => section.name)).toEqual([
 			'Start',
 			'JC / Reaction',
 			'Spiel 1',
 			'JC',
 			'Spiel 2'
 		]);
 		updateShowSection(templated.id, copy.sections[0].id, copy.revision, {
 			name: 'Eigener Start',
 			categoryId: 'cat-jc',
 			explicitDurationSeconds: 420
 		});
 		expect(listShowTemplates()).toEqual(templatesBefore);
 	});
 	it('snapshots a ready piece repeatedly and keeps usage edits independent from its original', () => {
 		const created = createShow({
 			title: 'Doppelte Verwendung',
 			startsAtUtc: null,
 			templateId: null
 		});
 		const section = addShowSection(created.id, created.revision, {
 			name: 'Fundstücke',
 			categoryId: 'cat-reaction',
 			explicitDurationSeconds: null
 		});
 		const first = addPieceUsage(created.id, section.revision, {
 			pieceId: 'piece-console',
 			sectionId: section.id
 		});
 		const second = addPieceUsage(created.id, first.revision, {
 			pieceId: 'piece-console',
 			sectionId: section.id
 		});
 		const usages = getShow(created.id)!.sections[0].usages;
 		const firstSaved = updatePieceUsage(
 			created.id,
 			first.id,
 			second.revision,
 			editedUsage(usages[0], {
 				title: 'Konsole als Auftakt',
 				durationSeconds: 300,
 				ownNotes: 'Kurbel zuerst zeigen',
 				research: 'Eigene Recherchekopie'
 			})
 		);
 		updatePieceUsage(
 			created.id,
 			second.id,
 			firstSaved.revision,
 			editedUsage(usages[1], { title: 'Konsole als Rückblick', durationSeconds: 900 })
 		);
 		const show = getShow(created.id)!;
 		expect(show.sections[0].usages).toMatchObject([
 			{
 				title: 'Konsole als Auftakt',
 				durationSeconds: 300,
 				ownNotes: 'Kurbel zuerst zeigen',
 				research: 'Eigene Recherchekopie'
 			},
 			{ title: 'Konsole als Rückblick', durationSeconds: 900 }
 		]);
 		expect(getPiece('piece-console')).toMatchObject({
 			title: 'Die kleine Konsole mit dem großen Dreh',
 			durationSeconds: 480,
 			researchText:
 				'## Recherche\n\n- Herstellerangaben gegen unabhängige Tests prüfen\n- Fokus auf Bedienidee statt Leistungsdaten'
 		});
 	});
 	it('derives sent history and current planning only from qualifying usages by original id', () => {
 		const completed = createShow({
 			title: 'Abgeschlossene Sendung',
 			startsAtUtc: '2027-01-10T19:00:00Z',
 			templateId: null
 		});
 		const completedSection = addShowSection(completed.id, completed.revision, {
 			name: 'Ablauf',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const done = addPieceUsage(completed.id, completedSection.revision, {
 			pieceId: 'piece-console',
 			sectionId: completedSection.id
 		});
 		const skipped = addPieceUsage(completed.id, done.revision, {
 			pieceId: 'piece-effects',
 			sectionId: completedSection.id
 		});
 		const reserve = addPieceUsage(completed.id, skipped.revision, {
 			pieceId: 'piece-pixels',
 			sectionId: null
 		});
 		getDatabase()
 			.prepare("UPDATE piece_usages SET status = 'done' WHERE id IN (?, ?)")
 			.run(done.id, reserve.id);
 		getDatabase()
 			.prepare("UPDATE piece_usages SET status = 'skipped' WHERE id = ?")
 			.run(skipped.id);
 		getDatabase().prepare("UPDATE shows SET status = 'completed' WHERE id = ?").run(completed.id);
 		const active = createShow({ title: 'Aktuelle Planung', startsAtUtc: null, templateId: null });
 		const activeSection = addShowSection(active.id, active.revision, {
 			name: 'Plan',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const planned = addPieceUsage(active.id, activeSection.revision, {
 			pieceId: 'piece-console',
 			sectionId: activeSection.id
 		});
 		const plannedReserve = addPieceUsage(active.id, planned.revision, {
 			pieceId: 'piece-effects',
 			sectionId: null
 		});
 		getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(planned.id);
 		let contexts = getPieceUsageContexts(
 			['piece-console', 'piece-effects', 'piece-pixels'],
 			active.id
 		);
 		expect(contexts['piece-console']).toMatchObject({
 			isPlannedInCurrentShow: true,
 			sentHistory: [
 				{
 					usageId: done.id,
 					showId: completed.id,
 					showTitle: 'Abgeschlossene Sendung',
 					usedAtUtc: '2027-01-10T19:00:00.000Z'
 				}
 			]
 		});
 		expect(contexts['piece-effects']).toEqual({
 			isPlannedInActiveShow: true,
 			isPlannedInCurrentShow: true,
 			sentHistory: []
 		});
 		expect(contexts['piece-pixels']).toEqual({
 			isPlannedInActiveShow: true,
 			isPlannedInCurrentShow: false,
 			sentHistory: []
 		});
 		removePieceUsage(active.id, plannedReserve.id, plannedReserve.revision);
 		contexts = getPieceUsageContexts(['piece-effects'], active.id);
 		expect(contexts['piece-effects'].isPlannedInCurrentShow).toBe(false);
 	});
 	it('duplicates an adjusted usage directly after its source without live measurements', () => {
 		const created = createShow({
 			title: 'Einplanungsduplikat',
 			startsAtUtc: null,
 			templateId: null
 		});
 		const section = addShowSection(created.id, created.revision, {
 			name: 'Ablauf',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const usage = addPieceUsage(created.id, section.revision, {
 			pieceId: 'piece-console',
 			sectionId: section.id
 		});
 		const source = getShow(created.id)!.sections[0].usages[0];
 		const adjusted = updatePieceUsage(
 			created.id,
 			usage.id,
 			usage.revision,
 			editedUsage(source, {
 				title: 'Angepasste Einplanung',
 				durationSeconds: 777,
 				intro: 'Eigene Einleitung',
 				research: 'Eigene Recherche',
 				moderation: 'Eigene Moderation',
 				transition: 'Eigene Überleitung',
 				presentation: 'Eigene Präsentation',
 				ownNotes: 'Eigene Notizen'
 			})
 		);
 		getDatabase().prepare("UPDATE piece_usages SET status = 'done' WHERE id = ?").run(usage.id);
 		getDatabase()
 			.prepare(
 				`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc, ended_at_utc)
 				 VALUES ('source-run', ?, ?, '2027-01-01T10:00:00.000Z', '2027-01-01T10:10:00.000Z')`
 			)
 			.run(created.id, usage.id);
 		const pieceCountBefore = (
 			getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number }
 		).count;
 		const duplicate = duplicatePieceUsage(created.id, usage.id, adjusted.revision);
 		const usages = getShow(created.id)!.sections[0].usages;
 		expect(usages.map((item) => item.id)).toEqual([usage.id, duplicate.id]);
 		expect(usages[1]).toMatchObject({
 			originalPieceId: 'piece-console',
 			status: 'open',
 			durationSeconds: 777,
 			title: 'Angepasste Einplanung',
 			intro: 'Eigene Einleitung',
 			research: 'Eigene Recherche',
 			moderation: 'Eigene Moderation',
 			transition: 'Eigene Überleitung',
 			presentation: 'Eigene Präsentation',
 			ownNotes: 'Eigene Notizen'
 		});
 		expect(
 			getDatabase()
 				.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
 				.get(duplicate.id)
 		).toEqual({ count: 0 });
 		expect(
 			(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
 				.count
 		).toBe(pieceCountBefore);
 		getDatabase()
 			.prepare(
 				`UPDATE pieces SET title = 'Aktuelles Original', duration_seconds = 420,
 				 intro = 'Neue Einleitung', research_text = 'Neue Recherche',
 				 moderation_notes = 'Neue Moderation', transition_text = 'Neue Überleitung',
 				 presentation_text = 'Neue Präsentation' WHERE id = 'piece-console'`
 			)
 			.run();
 		const refreshed = refreshPieceUsageFromOriginal(created.id, usage.id, duplicate.revision);
 		const refreshedUsages = getShow(created.id)!.sections[0].usages;
 		expect(refreshedUsages[0]).toMatchObject({
 			title: 'Aktuelles Original',
 			durationSeconds: 420,
 			intro: 'Neue Einleitung',
 			research: 'Neue Recherche',
 			moderation: 'Neue Moderation',
 			transition: 'Neue Überleitung',
 			presentation: 'Neue Präsentation',
 			ownNotes: 'Eigene Notizen',
 			status: 'done'
 		});
 		expect(refreshedUsages[1]).toMatchObject({
 			title: 'Angepasste Einplanung',
 			durationSeconds: 777,
 			status: 'open'
 		});
 		expect(
 			getDatabase()
 				.prepare('SELECT count(*) AS count FROM live_usage_runs WHERE usage_id = ?')
 				.get(usage.id)
 		).toEqual({ count: 1 });
 		expect(() => duplicatePieceUsage(created.id, usage.id, adjusted.revision)).toThrow('CONFLICT');
 		expect(getShow(created.id)?.revision).toBe(refreshed.revision);
 		getDatabase()
 			.prepare('UPDATE piece_usages SET original_piece_id = NULL WHERE id = ?')
 			.run(duplicate.id);
 		expect(() =>
 			refreshPieceUsageFromOriginal(created.id, duplicate.id, refreshed.revision)
 		).toThrow('ORIGINAL_NOT_FOUND');
 		expect(getShow(created.id)?.revision).toBe(refreshed.revision);
 		expect(getShow(created.id)!.sections[0].usages).toHaveLength(2);
 	});
 	it('snapshots presentation settings until an explicit refresh and copies them on duplication', () => {
 		getDatabase()
 			.prepare(
 				`UPDATE piece_sources SET label = 'YouTube', url = ?, timecode_seconds = 75
 				 WHERE piece_id = 'piece-console' AND position = 0`
 			)
 			.run('https://youtu.be/dQw4w9WgXcQ');
 		getDatabase()
 			.prepare(
 				`UPDATE pieces SET presentation_mode = 'video', presentation_source_position = 0,
 				 presentation_title = 'Gespeicherte Vorschau', presentation_description = 'Erster Stand',
 				 presentation_site_name = 'YouTube', presentation_provider = 'youtube',
 				 presentation_provider_id = 'dQw4w9WgXcQ' WHERE id = 'piece-console'`
 			)
 			.run();
 		const show = createShow({ title: 'Snapshot-Test', startsAtUtc: null, templateId: null });
 		const section = addShowSection(show.id, show.revision, {
 			name: 'Videos',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const added = addPieceUsage(show.id, section.revision, {
 			pieceId: 'piece-console',
 			sectionId: section.id
 		});
 		let usage = getShow(show.id)!.sections[0].usages[0];
 		expect(usage).toMatchObject({
 			presentationMode: 'video',
 			presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
 			presentationSourceTimecodeSeconds: 75,
 			presentationTitle: 'Gespeicherte Vorschau'
 		});
 		getDatabase()
 			.prepare(
 				`UPDATE pieces SET presentation_title = 'Neuer Originaltitel' WHERE id = 'piece-console'`
 			)
 			.run();
 		expect(getShow(show.id)!.sections[0].usages[0].presentationTitle).toBe('Gespeicherte Vorschau');
 		const refreshed = refreshPieceUsageFromOriginal(show.id, usage.id, added.revision);
 		usage = getShow(show.id)!.sections[0].usages[0];
 		expect(usage.presentationTitle).toBe('Neuer Originaltitel');
 		duplicatePieceUsage(show.id, usage.id, refreshed.revision);
 		expect(getShow(show.id)!.sections[0].usages[1]).toMatchObject({
 			presentationMode: 'video',
 			presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
 			presentationTitle: 'Neuer Originaltitel',
 			status: 'open'
 		});
 	});
 	it('persists normalized section and usage reordering, moving and removal', () => {
 		const created = createShow({ title: 'Sortierung', startsAtUtc: null, templateId: null });
 		const firstSection = addShowSection(created.id, created.revision, {
 			name: 'Erster Block',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const secondSection = addShowSection(created.id, firstSection.revision, {
 			name: 'Zweiter Block',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		const firstUsage = addPieceUsage(created.id, secondSection.revision, {
 			pieceId: 'piece-console',
 			sectionId: firstSection.id
 		});
 		const secondUsage = addPieceUsage(created.id, firstUsage.revision, {
 			pieceId: 'piece-effects',
 			sectionId: firstSection.id
 		});
 		const thirdUsage = addPieceUsage(created.id, secondUsage.revision, {
 			pieceId: 'piece-pixels',
 			sectionId: firstSection.id
 		});
 		const reordered = movePieceUsage(created.id, thirdUsage.id, thirdUsage.revision, {
 			sectionId: firstSection.id,
 			position: 0
 		});
 		const reserved = movePieceUsage(created.id, firstUsage.id, reordered.revision, {
 			sectionId: null,
 			position: 0
 		});
 		const plannedAgain = movePieceUsage(created.id, firstUsage.id, reserved.revision, {
 			sectionId: secondSection.id,
 			position: 0
 		});
 		const removedUsage = removePieceUsage(created.id, secondUsage.id, plannedAgain.revision);
 		const movedSection = moveShowSection(created.id, secondSection.id, 0, removedUsage.revision);
 		removeShowSection(created.id, firstSection.id, movedSection.revision);
 		const show = getShow(created.id)!;
 		expect(show.sections.map((section) => [section.name, section.position])).toEqual([
 			['Zweiter Block', 0]
 		]);
 		expect(show.sections[0].usages.map((usage) => [usage.id, usage.position])).toEqual([
 			[firstUsage.id, 0]
 		]);
 		expect(show.reserve).toEqual([]);
 		expect(getDatabase().pragma('foreign_key_check')).toEqual([]);
 	});
 	it('uses explicit section durations once and excludes the show-wide reserve', () => {
 		const created = createShow({ title: 'Dauer', startsAtUtc: null, templateId: null });
 		const section = addShowSection(created.id, created.revision, {
 			name: 'Fester Block',
 			categoryId: null,
 			explicitDurationSeconds: 600
 		});
 		const planned = addPieceUsage(created.id, section.revision, {
 			pieceId: 'piece-effects',
 			sectionId: section.id
 		});
 		addPieceUsage(created.id, planned.revision, {
 			pieceId: 'piece-pixels',
 			sectionId: null
 		});
 		const explicit = getShow(created.id)!;
 		expect(explicit.sections[0].durationSeconds).toBe(600);
 		expect(explicit.totalDurationSeconds).toBe(600);
 		expect(explicit.reserve[0].durationSeconds).toBe(540);
 		updateShowSection(created.id, section.id, explicit.revision, {
 			name: 'Summierter Block',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		expect(getShow(created.id)).toMatchObject({
 			totalDurationSeconds: 720,
 			sections: [{ durationSeconds: 720 }]
 		});
 	});
 	it('rolls stale and invalid aggregate mutations back and rejects completed shows', () => {
 		const created = createShow({ title: 'Konflikt', startsAtUtc: null, templateId: null });
 		const saved = addShowSection(created.id, created.revision, {
 			name: 'Gültig',
 			categoryId: null,
 			explicitDurationSeconds: null
 		});
 		expect(() =>
 			addShowSection(created.id, created.revision, {
 				name: 'Veraltet',
 				categoryId: null,
 				explicitDurationSeconds: null
 			})
 		).toThrow('CONFLICT');
 		expect(getShow(created.id)).toMatchObject({
 			revision: saved.revision,
 			sections: [{ name: 'Gültig' }]
 		});
 		expect(() => removeShowSection(created.id, 'missing', saved.revision)).toThrow('NOT_FOUND');
 		expect(getShow(created.id)?.revision).toBe(saved.revision);
 		getDatabase().prepare("UPDATE shows SET status = 'completed' WHERE id = ?").run(created.id);
 		expect(() =>
 			addPieceUsage(created.id, saved.revision, {
 				pieceId: 'piece-console',
 				sectionId: saved.id
 			})
 		).toThrow('SHOW_COMPLETED');
 		expect(getShow(created.id)).toMatchObject({
 			revision: saved.revision,
 			sections: [{ usages: [] }]
 		});
 	});
 });
@@ -1,3 +1,6 @@
 import type { LayoutServerLoad } from './$types';
-export const load: LayoutServerLoad = ({ locals }) => ({ user: locals.user });
+export const load: LayoutServerLoad = ({ locals, url }) => ({
 	user: url.pathname.startsWith('/heinzlive/') ? null : locals.user,
 	presentationMode: url.pathname.startsWith('/heinzlive/')
 });
@@ -31,7 +31,9 @@
 	/>
 </svelte:head>
-{#if data.user}
+{#if data.presentationMode}
 	{@render children()}
 {:else if data.user}
 	<div class="app-shell">
 		<aside class="sidebar">
 			<a class="brand" href={resolve('/fundus')} aria-label="Sendewerk Startseite">
@@ -12,9 +12,9 @@ export const actions = {
 	capture: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		let id: string;
 		try {
-			const id = captureInbox(String(data.get('title') || ''), String(data.get('url') || ''));
+			id = captureInbox(String(data.get('title') || ''), String(data.get('url') || ''));
 			redirect(303, `/fundus/${id}`);
 		} catch (cause) {
 			const code = cause instanceof Error ? cause.message : '';
 			return fail(400, {
@@ -26,5 +26,6 @@ export const actions = {
 						: 'Ein Titel ist erforderlich.'
 			});
 		}
 		redirect(303, `/fundus/${id}`);
 	}
 } satisfies Actions;
@@ -10,6 +10,7 @@ import {
 	setPieceArchived,
 	type PieceTemplateId
 } from '#lib/server/content.js';
 import { getPieceUsageContexts } from '#lib/server/shows.js';
 export const load: PageServerLoad = ({ locals, url }) => {
 	requireUser(locals.user);
@@ -18,10 +19,11 @@ export const load: PageServerLoad = ({ locals, url }) => {
 		formatId: url.searchParams.get('format') ?? '',
 		topicId: url.searchParams.get('topic') ?? '',
 		categoryId: url.searchParams.get('category') ?? '',
-		status: url.searchParams.get('status') ?? ''
+		status: url.searchParams.get('status') ?? '',
 		includeUsed: url.searchParams.get('includeUsed') === '1',
 		includePlanned: url.searchParams.get('includePlanned') === '1'
 	};
-	return {
+	const pieces = listPieces({
 		pieces: listPieces({
 		statuses:
 			filters.status === 'ready'
 				? ['ready']
@@ -32,7 +34,10 @@ export const load: PageServerLoad = ({ locals, url }) => {
 		formatId: filters.formatId,
 		topicId: filters.topicId,
 		categoryId: filters.categoryId
-		}),
+	});
 	const usageContexts = getPieceUsageContexts(pieces.map((piece) => piece.id));
 	return {
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
 		templates: pieceTemplates,
 		filters
@@ -1,9 +1,48 @@
 <script lang="ts">
 	import { goto, replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { onMount, untrack } from 'svelte';
 	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import { formatClock } from '#lib/format.js';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
 	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
 	let visiblePieces = $derived(
 		data.pieces.filter(
 			(piece) =>
 				(showUsedPieces || piece.sentHistory.length === 0) &&
 				(showPlannedPieces || !piece.isPlannedInActiveShow)
 		)
 	);
 	onMount(() => {
 		const syncFiltersFromHistory = () => {
 			const search = new URL(window.location.href).searchParams;
 			showUsedPieces = search.get('includeUsed') === '1';
 			showPlannedPieces = search.get('includePlanned') === '1';
 		};
 		window.addEventListener('popstate', syncFiltersFromHistory);
 		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
 	});
 	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
 		if (name === 'includeUsed') showUsedPieces = checked;
 		else showPlannedPieces = checked;
 		const url = new URL(page.url.href);
 		if (checked) url.searchParams.set(name, '1');
 		else url.searchParams.delete(name);
 		// This URL is cloned from the current page; only same-route filter parameters change.
 		// eslint-disable-next-line svelte/no-navigation-without-resolve
 		replaceState(url, page.state);
 	}
 	async function resetFilters() {
 		await goto(resolve('/fundus'), { invalidateAll: true });
 		showUsedPieces = false;
 		showPlannedPieces = false;
 	}
 	const statusLabel = {
 		ready: 'Sendefertig',
 		preparing: 'In Vorbereitung',
@@ -20,8 +59,8 @@
 			<h1>Fundus</h1>
 			<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
 		</div>
-		<div class="heading-stat" aria-label={`${data.pieces.length} gefundene Inhalte`}>
+		<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
-			<strong>{data.pieces.length}</strong><span>Inhalte</span>
+			<strong>{visiblePieces.length}</strong><span>Inhalte</span>
 		</div>
 	</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
@@ -41,7 +80,12 @@
 		</div>
 	</details>
-	<form class="library-filters" method="GET" aria-label="Fundus durchsuchen und filtern">
+	<form
 		id="library-filters"
 		class="library-filters"
 		method="GET"
 		aria-label="Fundus durchsuchen und filtern"
 	>
 		<label class="search-field"
 			><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
 				name="q"
@@ -84,12 +128,36 @@
 			></label
 		>
 		<button class="secondary-button" type="submit">Anwenden</button>
-		<a class="text-link" href={resolve('/fundus')}>Zurücksetzen</a>
+		<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
 	</form>
 	<div class="library-filter-options" aria-label="Fundusauswahl erweitern">
 		<label class="filter-checkbox">
 			<input
 				type="checkbox"
 				name="includeUsed"
 				value="1"
 				form="library-filters"
 				checked={showUsedPieces}
 				onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
 			/>
 			<span>Auch verwendete Inhalte zeigen</span>
 		</label>
 		<label class="filter-checkbox">
 			<input
 				type="checkbox"
 				name="includePlanned"
 				value="1"
 				form="library-filters"
 				checked={showPlannedPieces}
 				onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
 			/>
 			<span>Auch eingeplante Inhalte zeigen</span>
 		</label>
 	</div>
-	{#if data.pieces.length}
+	{#if visiblePieces.length}
 		<div class="piece-grid">
-			{#each data.pieces as piece (piece.id)}
+			{#each visiblePieces as piece (piece.id)}
 				<article
 					class="piece-card"
 					style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
@@ -104,6 +172,7 @@
 					<div class="piece-primary">
 						<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
 						<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
 						<PieceUsageHistory history={piece.sentHistory} />
 					</div>
 					<div class="piece-classification">
 						<span class="category-label"
@@ -6,6 +6,7 @@ import {
 	duplicatePiece,
 	getPiece,
 	getTaxonomy,
 	loadPiecePresentationMetadata,
 	savePiece,
 	setPieceArchived,
 	uploadPieceImage,
@@ -34,6 +35,10 @@ function text(data: FormData, name: string) {
 	return String(data.get(name) || '');
 }
 function durationInSeconds(data: FormData) {
 	return Math.round(Number(data.get('durationMinutes')) * 60);
 }
 function pieceInput(data: FormData): PieceInput {
 	const labels = data.getAll('sourceLabel').map(String);
 	const urls = data.getAll('sourceUrl').map(String);
@@ -55,12 +60,26 @@ function pieceInput(data: FormData): PieceInput {
 		summary: text(data, 'summary'),
 		formatId: text(data, 'formatId') || null,
 		status: text(data, 'status') as EditablePieceStatus,
-		durationSeconds: Number(data.get('durationSeconds')),
+		durationSeconds: durationInSeconds(data),
 		intro: text(data, 'intro'),
 		researchText: text(data, 'researchText'),
 		moderationNotes: text(data, 'moderationNotes'),
 		transitionText: text(data, 'transitionText'),
 		presentationText: text(data, 'presentationText'),
 		presentationMode: text(data, 'presentationMode') as PieceInput['presentationMode'],
 		presentationSourcePosition: text(data, 'presentationSourcePosition')
 			? Number(data.get('presentationSourcePosition'))
 			: null,
 		presentationTitle: text(data, 'presentationTitle'),
 		presentationDescription: text(data, 'presentationDescription'),
 		presentationImageUrl: text(data, 'presentationImageUrl'),
 		presentationSiteName: text(data, 'presentationSiteName'),
 		presentationProvider: text(data, 'presentationProvider'),
 		presentationProviderId: text(data, 'presentationProviderId'),
 		presentationTitleManual: text(data, 'presentationTitleManual') === '1',
 		presentationDescriptionManual: text(data, 'presentationDescriptionManual') === '1',
 		presentationImageManual: text(data, 'presentationImageManual') === '1',
 		presentationMetadataFetchedAtUtc: text(data, 'presentationMetadataFetchedAtUtc') || null,
 		topicIds: data.getAll('topicIds').map(String),
 		categoryIds: data.getAll('categoryIds').map(String),
 		sources
@@ -77,12 +96,17 @@ function saveError(cause: unknown) {
 		};
 	if (code === 'INVALID_TITLE') return { status: 400, error: 'Bitte einen Titel eingeben.' };
 	if (code === 'INVALID_DURATION')
-		return { status: 400, error: 'Die Dauer muss zwischen 0 und 86.400 Sekunden liegen.' };
+		return { status: 400, error: 'Die Dauer muss zwischen 0 und 1.440 Minuten liegen.' };
 	if (code === 'INVALID_SOURCES')
 		return {
 			status: 400,
 			error: 'Quellen benötigen einen Namen und eine vollständige HTTP- oder HTTPS-Adresse.'
 		};
 	if (code === 'INVALID_PRESENTATION')
 		return {
 			status: 400,
 			error: 'Für Linkvorschau und Video muss eine vorhandene gültige Quelle ausgewählt sein.'
 		};
 	if (code.startsWith('INVALID_'))
 		return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
 	return {
@@ -112,6 +136,31 @@ export const actions = {
 			return fail(problem.status, { intent: 'save', ...problem });
 		}
 	},
 	loadPreview: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		try {
 			await loadPiecePresentationMetadata(params.id, Number(data.get('revision')));
 		} catch (cause) {
 			const code = cause instanceof Error ? cause.message : '';
 			if (code === 'FETCH_BLOCKED') {
 				return fail(400, {
 					intent: 'loadPreview',
 					error: 'Interne oder private Netzwerkziele dürfen nicht abgerufen werden.'
 				});
 			}
 			if (code.startsWith('FETCH_')) {
 				return fail(400, {
 					intent: 'loadPreview',
 					error:
 						'Die Vorschau konnte nicht sicher geladen werden. Die manuellen Angaben bleiben erhalten.'
 				});
 			}
 			const problem = saveError(cause);
 			return fail(problem.status, { intent: 'loadPreview', ...problem });
 		}
 		redirect(303, `/fundus/${params.id}`);
 	},
 	upload: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -2,18 +2,27 @@
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { beforeNavigate, goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import { onDestroy, untrack } from 'svelte';
+	import { onDestroy, tick, untrack } from 'svelte';
 	import EditorialMarkdownField from '#lib/components/EditorialMarkdownField.svelte';
 	import MarkdownPreview from '#lib/components/MarkdownPreview.svelte';
 	import type { PageProps } from './$types';
 	type ContextPanel = 'sources' | 'classification' | 'presentation';
 	let { data, form }: PageProps = $props();
 	let draft = $state(untrack(() => ({ ...data.piece })));
 	let durationMinutes = $state(untrack(() => Number((data.piece.durationSeconds / 60).toFixed(2))));
 	let revision = $state(untrack(() => data.piece.revision));
 	let sources = $state(untrack(() => data.piece.sources.map((source) => ({ ...source }))));
 	let rendered = $state(untrack(() => ({ ...data.rendered })));
 	let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
 	let saveMessage = $state('Alle Änderungen gespeichert');
 	let classificationEditing = $state(false);
 	let presentationEditing = $state(false);
 	let mobileContext = $state<ContextPanel | null>(null);
 	let sourceImageUnavailable = $state(false);
 	let editorForm: HTMLFormElement;
 	let previewForm: HTMLFormElement;
 	let saveButton: HTMLButtonElement;
 	let timer: ReturnType<typeof setTimeout> | undefined;
 	let generation = 0;
@@ -24,8 +33,27 @@
 			saveState === 'error' ||
 			saveState === 'conflict'
 	);
 	let featuredSource = $derived(
 		draft.presentationSourcePosition === null
 			? (sources[0] ?? null)
 			: (sources[draft.presentationSourcePosition] ?? sources[0] ?? null)
 	);
 	let sourcePreviewImage = $derived(
 		draft.presentationImageUrl
 			? resolve('/fundus/[id]/praesentation/preview-image', { id: data.piece.id })
 			: data.piece.media[0]
 				? `/media/${data.piece.media[0].id}`
 				: ''
 	);
 	let pendingHref: string | null = null;
 	let allowNavigation = false;
 	let contextTrigger: HTMLElement | null = null;
 	const statusLabels = {
 		inbox: 'Eingang',
 		preparing: 'In Vorbereitung',
 		ready: 'Sendefertig'
 	};
 	onDestroy(() => clearTimeout(timer));
 	beforeNavigate((navigation) => {
@@ -41,7 +69,17 @@
 		if (!saving) submitSave();
 	});
-	function scheduleSave() {
+	function scheduleSave(event?: Event) {
 		const control = event?.target;
 		if (event?.type === 'change' && !(control instanceof HTMLSelectElement)) return;
 		if (
 			control instanceof HTMLInputElement &&
 			control.name === 'presentationMode' &&
 			control.value !== 'text' &&
 			draft.presentationSourcePosition === null
 		) {
 			return;
 		}
 		generation += 1;
 		saveState = 'dirty';
 		saveMessage = 'Ungespeicherte Änderungen';
@@ -61,9 +99,43 @@
 	function removeSource(index: number) {
 		sources.splice(index, 1);
 		if (draft.presentationSourcePosition === index) draft.presentationSourcePosition = null;
 		else if (
 			draft.presentationSourcePosition !== null &&
 			draft.presentationSourcePosition > index
 		) {
 			draft.presentationSourcePosition -= 1;
 		}
 		scheduleSave();
 	}
 	function presentationSourceChanged() {
 		draft.presentationMetadataFetchedAtUtc = null;
 		draft.presentationProvider = '';
 		draft.presentationProviderId = '';
 		sourceImageUnavailable = false;
 		if (!draft.presentationTitleManual) draft.presentationTitle = '';
 		if (!draft.presentationDescriptionManual) draft.presentationDescription = '';
 		if (!draft.presentationImageManual) draft.presentationImageUrl = '';
 	}
 	async function openContext(event: MouseEvent, panel: ContextPanel) {
 		contextTrigger = event.currentTarget instanceof HTMLElement ? event.currentTarget : null;
 		mobileContext = panel;
 		await tick();
 		document.querySelector<HTMLElement>(`[data-context-close="${panel}"]`)?.focus();
 	}
 	function closeContext() {
 		mobileContext = null;
 		contextTrigger?.focus();
 		contextTrigger = null;
 	}
 	function handleEscape(event: KeyboardEvent) {
 		if (event.key === 'Escape' && mobileContext) closeContext();
 	}
 	const enhanceSave: SubmitFunction = () => {
 		const submittedGeneration = generation;
 		saving = true;
@@ -104,12 +176,35 @@
 </script>
 <svelte:head><title>{draft.title} | Fundus | Sendewerk</title></svelte:head>
 <svelte:window onkeydown={handleEscape} />
-<div class="page-wrap editor-page">
+<div class="page-wrap editor-page worksheet-page">
-	<header class="editor-header">
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
-		<div>
+
 	<form
 		bind:this={editorForm}
 		use:enhance={enhanceSave}
 		method="POST"
 		action="?/save"
 		class="piece-editor worksheet-editor"
 		oninput={scheduleSave}
 		onchange={scheduleSave}
 	>
 		<input type="hidden" name="revision" value={revision} />
 		<header class="worksheet-header">
 			<div class="worksheet-heading">
 				<a class="back-link" href={resolve('/fundus')}>← Fundus</a>
-			<h1>{draft.title}</h1>
+				<h1 class="sr-only">{draft.title}</h1>
 				<label class="worksheet-title">
 					<span class="sr-only">Titel</span>
 					<textarea
 						name="title"
 						required
 						rows="1"
 						maxlength="200"
 						aria-label="Titel"
 						bind:value={draft.title}></textarea>
 				</label>
 			</div>
 			<div
 				class:problem={saveState === 'error' || saveState === 'conflict'}
@@ -120,33 +215,237 @@
 				<i></i><span>{saveMessage}</span>
 			</div>
 		</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
-	<form
+		<nav class="mobile-editor-tools" aria-label="Piece-Werkzeuge">
-		bind:this={editorForm}
+			<button
-		use:enhance={enhanceSave}
+				type="button"
-		method="POST"
+				aria-expanded={mobileContext === 'sources'}
-		action="?/save"
+				onclick={(event) => openContext(event, 'sources')}>Quellen</button
 		class="piece-editor"
 		oninput={scheduleSave}
 		onchange={scheduleSave}
 			>
-		<input type="hidden" name="revision" value={revision} />
+			<button
-		<section class="editor-section editor-basics">
+				type="button"
-			<div class="section-title">
+				aria-expanded={mobileContext === 'classification'}
-				<p class="eyebrow">Grundlagen</p>
+				onclick={(event) => openContext(event, 'classification')}>Einordnung</button
-				<h2>Worum geht es?</h2>
+			>
 			<button
 				type="button"
 				aria-expanded={mobileContext === 'presentation'}
 				onclick={(event) => openContext(event, 'presentation')}>Präsentation</button
 			>
 			<a href="#piece-media">Bilder</a>
 		</nav>
 		<div class="editor-workspace">
 			<main class="editorial-worksheet" aria-label="Redaktionelles Arbeitsblatt">
 				<section
 					class:has-image={sourcePreviewImage && !sourceImageUnavailable}
 					class="source-feature"
 				>
 					{#if sourcePreviewImage && !sourceImageUnavailable}
 						<img src={sourcePreviewImage} alt="" onerror={() => (sourceImageUnavailable = true)} />
 					{/if}
 					<div>
 						<p class="eyebrow">Fundstück</p>
 						{#if featuredSource}
 							<h2>{draft.presentationTitle || featuredSource.label || 'Quelle'}</h2>
 							{#if draft.presentationDescription}<p>{draft.presentationDescription}</p>{/if}
 							<small>{featuredSource.label || featuredSource.url}</small>
 							<!-- The URL is a server-validated external HTTP(S) source. -->
 							<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
 							<a href={featuredSource.url} target="_blank" rel="noopener noreferrer"
 								>Original öffnen ↗</a
 							>
 						{:else}
 							<h2>Noch keine Quelle</h2>
 							<p>Eine Quelle lässt sich ergänzen, ohne den Schreibstand zu verlassen.</p>
 							<button
 								class="text-button"
 								type="button"
 								onclick={(event) => openContext(event, 'sources')}>Quelle ergänzen</button
 							>
 						{/if}
 					</div>
-			<div class="editor-fields two-columns">
+				</section>
-				<label class="wide-field"
+
-					>Titel<input name="title" required maxlength="200" bind:value={draft.title} /></label
+				<section class="writing-sheet">
 					<header class="writing-sheet-heading">
 						<div>
 							<p class="eyebrow">Arbeitsstand</p>
 							<h2>Gedanken und Sendungstext</h2>
 						</div>
 						<small>Markdown wird beim Speichern sicher formatiert.</small>
 					</header>
 					<EditorialMarkdownField
 						name="researchText"
 						label="Eigene Gedanken & Recherche"
 						inputLabel="Private Recherche"
 						hint="Nur intern"
 						emptyText="Beobachtungen, Links und offene Fragen festhalten"
 						bind:value={draft.researchText}
 						html={rendered.research}
 						privateField
 						rows={9}
 					/>
 					<div class="script-heading">
 						<p class="eyebrow">Für die Sendung</p>
 						<h2>Sendungstext</h2>
 						<p>Einleitung, Moderation und Übergang bleiben getrennt gespeichert.</p>
 					</div>
 					<div class="script-sections">
 						<EditorialMarkdownField
 							name="intro"
 							label="Einleitung"
 							emptyText="Wie beginnt dieses Thema in der Sendung?"
 							bind:value={draft.intro}
 							html={rendered.intro}
 						/>
 						<EditorialMarkdownField
 							name="moderationNotes"
 							label="Moderationsstichpunkte"
 							emptyText="Die wichtigsten Punkte für die Moderation notieren"
 							bind:value={draft.moderationNotes}
 							html={rendered.moderation}
 						/>
 						<EditorialMarkdownField
 							name="transitionText"
 							label="Überleitung"
 							emptyText="Den Übergang zum nächsten Thema vorbereiten"
 							bind:value={draft.transitionText}
 							html={rendered.transition}
 						/>
 					</div>
 				</section>
 			</main>
 			<aside
 				class:context-open={mobileContext}
 				class="editor-context"
 				aria-label="Werkzeuge zum Piece"
 			>
 				<section
 					class:mobile-active={mobileContext === 'sources'}
 					class="context-card source-editor"
 					aria-labelledby="source-context-title"
 				>
 					<header class="context-card-heading">
 						<div>
 							<p class="eyebrow">Fundstück</p>
 							<h2 id="source-context-title">Quellen</h2>
 						</div>
 						<button
 							class="context-close"
 							data-context-close="sources"
 							type="button"
 							aria-label="Quellen schließen"
 							onclick={closeContext}>×</button
 						>
 					</header>
 					{#if sources.length}
 						<div class="source-list">
 							{#each sources as source, index (index)}
 								<div class="source-row">
 									<label
 										>Name<input
 											name="sourceLabel"
 											maxlength="200"
 											bind:value={source.label}
 										/></label
 									>
 									<label
 										>URL<input
 											name="sourceUrl"
 											type="url"
 											maxlength="2000"
 											bind:value={source.url}
 										/></label
 									>
 									<label
 										>Zeitmarke in Sekunden<input
 											name="sourceTimecode"
 											type="number"
 											min="0"
 											max="86400"
 											bind:value={source.timecodeSeconds}
 										/></label
 									>
 									<button
 										class="text-button danger-text"
 										type="button"
 										onclick={() => removeSource(index)}>Entfernen</button
 									>
 								</div>
 							{/each}
 						</div>
 					{:else}
 						<p class="context-empty">Noch keine Quelle hinterlegt.</p>
 					{/if}
 					<button class="secondary-button context-wide-action" type="button" onclick={addSource}
 						>Quelle hinzufügen</button
 					>
 				</section>
 				<section
 					class:mobile-active={mobileContext === 'classification'}
 					class="context-card classification-editor"
 					aria-labelledby="classification-context-title"
 				>
 					<header class="context-card-heading">
 						<div>
 							<p class="eyebrow">Überblick</p>
 							<h2 id="classification-context-title">Einordnung</h2>
 						</div>
 						<button
 							class="context-close"
 							data-context-close="classification"
 							type="button"
 							aria-label="Einordnung schließen"
 							onclick={closeContext}>×</button
 						>
 					</header>
 					<div class="classification-summary">
 						<strong>{statusLabels[draft.status as keyof typeof statusLabels]}</strong>
 						<span>{durationMinutes || 0} Min.</span>
 						<span
 							>{data.taxonomy.formats.find((item) => item.id === draft.formatId)?.name ??
 								'Ohne Format'}</span
 						>
 					</div>
 					{#if draft.summary}<p class="context-summary-copy">{draft.summary}</p>{/if}
 					<div class="context-tags">
 						{#each data.taxonomy.topics.filter( (item) => draft.topicIds.includes(item.id) ) as item (item.id)}<span
 								>{item.name}</span
 							>{/each}
 						{#each data.taxonomy.categories.filter( (item) => draft.categoryIds.includes(item.id) ) as item (item.id)}<span
 								>{item.name}</span
 							>{/each}
 					</div>
 					<button
 						class="text-button context-edit-toggle"
 						type="button"
 						aria-expanded={classificationEditing}
 						onclick={() => (classificationEditing = !classificationEditing)}
 						>{classificationEditing ? 'Einordnung schließen' : 'Einordnung bearbeiten'}</button
 					>
 					<div class="context-fields" hidden={!classificationEditing}>
 						<label
 							>Status<select name="status" bind:value={draft.status}
-						><option value="inbox">Eingang</option><option value="preparing">In Vorbereitung</option
+								><option value="inbox">Eingang</option><option value="preparing"
 									>In Vorbereitung</option
 								><option value="ready">Sendefertig</option></select
 							></label
 						>
 						<label
 							>Dauer in Minuten<input
 								name="durationMinutes"
 								type="number"
 								min="0"
 								max="1440"
 								step="any"
 								bind:value={durationMinutes}
 							/></label
 						>
 						<label
 							>Format<select name="formatId" bind:value={draft.formatId}
 								><option value={null}>Ohne Format</option
@@ -156,30 +455,12 @@
 							></label
 						>
 						<label
 					>Dauer in Sekunden<input
 						name="durationSeconds"
 						type="number"
 						min="0"
 						max="86400"
 						step="1"
 						bind:value={draft.durationSeconds}
 					/></label
 				>
 				<label class="wide-field"
 							>Kurzbeschreibung<textarea
 								name="summary"
-						rows="2"
+								rows="3"
 								maxlength="2000"
 								bind:value={draft.summary}></textarea></label
 						>
 			</div>
 		</section>
 		<section class="editor-section taxonomy-editor">
 			<div class="section-title">
 				<p class="eyebrow">Einordnung</p>
 				<h2>Themen und Abschnitte</h2>
 			</div>
 						<fieldset>
 							<legend>Themen</legend>
 							<div class="choice-grid">
@@ -206,104 +487,203 @@
 									>{/each}
 							</div>
 						</fieldset>
 		</section>
 		<section class="editor-section markdown-section">
 			<div class="section-title">
 				<p class="eyebrow">Redaktion</p>
 				<h2>Getrennte Arbeitsbereiche</h2>
 				<small>Markdown wird unterstützt und vor der Anzeige bereinigt.</small>
 			</div>
 			<div class="markdown-grid">
 				<label
 					><span>Einleitung</span><textarea
 						name="intro"
 						rows="7"
 						maxlength="50000"
 						bind:value={draft.intro}></textarea>
 					<MarkdownPreview html={rendered.intro} /></label
 				>
 				<label class="private-field"
 					><span>Private Recherche</span><textarea
 						name="researchText"
 						rows="7"
 						maxlength="50000"
 						bind:value={draft.researchText}></textarea>
 					<MarkdownPreview html={rendered.research} /></label
 				>
 				<label
 					><span>Moderationsstichpunkte</span><textarea
 						name="moderationNotes"
 						rows="7"
 						maxlength="50000"
 						bind:value={draft.moderationNotes}></textarea>
 					<MarkdownPreview html={rendered.moderation} /></label
 				>
 				<label
 					><span>Überleitung</span><textarea
 						name="transitionText"
 						rows="7"
 						maxlength="50000"
 						bind:value={draft.transitionText}></textarea>
 					<MarkdownPreview html={rendered.transition} /></label
 				>
 				<label class="wide-field"
 					><span>Präsentationstext</span><textarea
 						name="presentationText"
 						rows="7"
 						maxlength="50000"
 						bind:value={draft.presentationText}></textarea>
 					<MarkdownPreview html={rendered.presentation} /></label
 				>
 					</div>
 				</section>
-		<section class="editor-section source-editor">
+				<section
-			<div class="section-title split-section-title">
+					class:mobile-active={mobileContext === 'presentation'}
 					class="context-card presentation-editor"
 					aria-labelledby="presentation-context-title"
 				>
 					<header class="context-card-heading">
 						<div>
-					<p class="eyebrow">Belege</p>
+							<p class="eyebrow">Publikum</p>
-					<h2>Quellen</h2>
+							<h2 id="presentation-context-title">Präsentation</h2>
 						</div>
-				<button class="secondary-button" type="button" onclick={addSource}>Quelle hinzufügen</button
+						<button
 							class="context-close"
 							data-context-close="presentation"
 							type="button"
 							aria-label="Präsentation schließen"
 							onclick={closeContext}>×</button
 						>
 					</header>
 					<div class="audience-preview">
 						<span
 							>{draft.presentationMode === 'text'
 								? 'Text'
 								: draft.presentationMode === 'link'
 									? 'Linkvorschau'
 									: 'Video'}</span
 						>
 						<strong>{draft.presentationTitle || draft.title}</strong>
 						{#if draft.presentationMode === 'text' && rendered.presentation}<MarkdownPreview
 								html={rendered.presentation}
 							/>{:else if draft.presentationDescription}<p>
 								{draft.presentationDescription}
 							</p>{:else}<p>Noch keine Vorschauangaben.</p>{/if}
 					</div>
 					<div class="presentation-card-actions">
 						<button
 							class="text-button"
 							type="button"
 							aria-expanded={presentationEditing}
 							onclick={() => (presentationEditing = !presentationEditing)}
 							>{presentationEditing ? 'Einstellungen schließen' : 'Präsentation bearbeiten'}</button
 						>
 						<a
 							class="secondary-button"
 							href={resolve('/fundus/[id]/praesentation', { id: data.piece.id })}
 							target="_blank"
 							rel="noopener">Präsentation testen</a
 						>
 					</div>
-			{#if sources.length}<div class="source-list">
+					<div class="presentation-controls" hidden={!presentationEditing}>
-					{#each sources as source, index (index)}<div class="source-row">
+						<div class="presentation-mode-picker" role="group" aria-label="Darstellung">
 							{#each [['text', 'Text'], ['link', 'Linkvorschau'], ['video', 'Video']] as mode (mode[0])}<label
 									><input
 										type="radio"
 										name="presentationMode"
 										value={mode[0]}
 										bind:group={draft.presentationMode}
 									/>{mode[1]}</label
 								>{/each}
 						</div>
 						{#if draft.presentationMode === 'text'}
 							<input
 								type="hidden"
 								name="presentationSourcePosition"
 								value={draft.presentationSourcePosition ?? ''}
 							/>
 							<input type="hidden" name="presentationTitle" value={draft.presentationTitle} />
 							<input
 								type="hidden"
 								name="presentationDescription"
 								value={draft.presentationDescription}
 							/>
 							<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
 							<EditorialMarkdownField
 								name="presentationText"
 								label="Präsentationstext"
 								emptyText="Text für die Publikumsausgabe schreiben"
 								bind:value={draft.presentationText}
 								html={rendered.presentation}
 								rows={8}
 							/>
 						{:else}
 							<input type="hidden" name="presentationText" value={draft.presentationText} />
 							<div class="presentation-settings">
 								<label
-								>Name<input name="sourceLabel" maxlength="200" bind:value={source.label} /></label
+									>Quelle<select
-							><label
+										name="presentationSourcePosition"
-								>URL<input
+										bind:value={draft.presentationSourcePosition}
-									name="sourceUrl"
+										onchange={presentationSourceChanged}
 										><option value={null}>Quelle auswählen</option
 										>{#each sources as source, index (index)}{#if source.url}<option value={index}
 													>{source.label || source.url}</option
 												>{/if}{/each}</select
 									></label
 								>
 								<label
 									>Titel<input
 										name="presentationTitle"
 										maxlength="300"
 										bind:value={draft.presentationTitle}
 										oninput={() => (draft.presentationTitleManual = true)}
 									/></label
 								>
 								<label
 									>Bild-URL<input
 										name="presentationImageUrl"
 										type="url"
 										maxlength="2000"
-									bind:value={source.url}
+										bind:value={draft.presentationImageUrl}
 										oninput={() => (draft.presentationImageManual = true)}
 									/></label
 							><label
 								>Zeitmarke in Sekunden<input
 									name="sourceTimecode"
 									type="number"
 									min="0"
 									max="86400"
 									bind:value={source.timecodeSeconds}
 								/></label
 							><button
 								class="text-button danger-text"
 								type="button"
 								onclick={() => removeSource(index)}>Entfernen</button
 								>
-						</div>{/each}
+								<label
-				</div>{:else}<p class="quiet-copy">Noch keine Quellen hinterlegt.</p>{/if}
+									>Anreißer<textarea
 										name="presentationDescription"
 										rows="3"
 										maxlength="1000"
 										bind:value={draft.presentationDescription}
 										oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
 								>
 								<div class="presentation-preview-actions">
 									<button
 										class="secondary-button"
 										type="button"
 										onclick={() => previewForm.requestSubmit()}
 										disabled={actionsBlocked || draft.presentationSourcePosition === null}
 										>Vorschau laden</button
 									><small
 										>{draft.presentationMetadataFetchedAtUtc
 											? `Zuletzt geladen: ${new Date(draft.presentationMetadataFetchedAtUtc).toLocaleString('de-DE')}`
 											: 'Noch keine Metadaten geladen.'}</small
 									>
 								</div>
 							</div>
 						{/if}
 					</div>
 					<input
 						type="hidden"
 						name="presentationTitleManual"
 						value={draft.presentationTitleManual ? '1' : '0'}
 					/>
 					<input
 						type="hidden"
 						name="presentationDescriptionManual"
 						value={draft.presentationDescriptionManual ? '1' : '0'}
 					/>
 					<input
 						type="hidden"
 						name="presentationImageManual"
 						value={draft.presentationImageManual ? '1' : '0'}
 					/>
 					<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
 					<input type="hidden" name="presentationProvider" value={draft.presentationProvider} />
 					<input type="hidden" name="presentationProviderId" value={draft.presentationProviderId} />
 					<input
 						type="hidden"
 						name="presentationMetadataFetchedAtUtc"
 						value={draft.presentationMetadataFetchedAtUtc ?? ''}
 					/>
 				</section>
 				<section class="context-card asset-summary">
 					<div>
 						<p class="eyebrow">Material</p>
 						<h2>Bilder</h2>
 						<p>
 							{data.piece.media.length
 								? `${data.piece.media.length} gespeichert`
 								: 'Noch keine Bilder'}
 						</p>
 					</div>
 					<a class="text-link" href="#piece-media">Bilder verwalten ↓</a>
 				</section>
 			</aside>
 		</div>
 		<div class="editor-savebar">
-			<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span
+			<span class:problem={saveState === 'error' || saveState === 'conflict'}>{saveMessage}</span>
-			><button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
+			<button bind:this={saveButton} class="primary-button" type="submit" disabled={saving}
 				>Jetzt speichern</button
 			>
 		</div>
 	</form>
-	<section class="editor-section media-editor">
+	<form
 		bind:this={previewForm}
 		id="preview-load-form"
 		method="POST"
 		action="?/loadPreview"
 		use:enhance
 	>
 		<input type="hidden" name="revision" value={revision} />
 	</form>
 	<section id="piece-media" class="editor-section media-editor supporting-editor-section">
 		<div class="section-title">
 			<p class="eyebrow">Private Dateien</p>
 			<h2>Bilder</h2>
@@ -0,0 +1,44 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import { getPiece } from '#lib/server/content.js';
 import { renderMarkdown } from '#lib/server/markdown.js';
 import { buildEmbedUrl, type PresentationContent } from '#lib/server/presentation.js';
 export const load: PageServerLoad = ({ locals, params }) => {
 	requireUser(locals.user);
 	const piece = getPiece(params.id);
 	if (!piece) error(404, 'Piece nicht gefunden');
 	const source =
 		piece.presentationSourcePosition === null
 			? null
 			: (piece.sources[piece.presentationSourcePosition] ?? null);
 	const content: PresentationContent & {
 		sources: typeof piece.sources;
 		images: { id: string; altText: string }[];
 	} = {
 		mode: piece.presentationMode,
 		title: piece.title,
 		html: renderMarkdown(piece.presentationText),
 		source,
 		previewTitle: piece.presentationTitle,
 		description: piece.presentationDescription,
 		imageUrl: piece.presentationImageUrl,
 		siteName: piece.presentationSiteName,
 		provider:
 			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
 				? piece.presentationProvider
 				: '',
 		providerId: piece.presentationProviderId,
 		embedUrl: buildEmbedUrl(
 			piece.presentationProvider === 'youtube' || piece.presentationProvider === 'tiktok'
 				? piece.presentationProvider
 				: '',
 			piece.presentationProviderId,
 			source?.timecodeSeconds ?? null
 		),
 		sources: piece.sources,
 		images: piece.media.map((item) => ({ id: item.id, altText: item.altText }))
 	};
 	return { pieceId: piece.id, content };
 };
@@ -0,0 +1,21 @@
 <script lang="ts">
 	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 </script>
 <svelte:head>
 	<title>Präsentation testen | Sendewerk</title>
 	<meta name="robots" content="noindex, nofollow, noarchive" />
 </svelte:head>
 <main class="heinzlive-output presentation-test-output">
 	<div class="presentation-test-status" role="status">Isolierte Testansicht</div>
 	<PresentationDisplay
 		content={data.content}
 		imageSrc={data.content.mode === 'text'
 			? '/media'
 			: `/fundus/${data.pieceId}/praesentation/preview-image`}
 	/>
 </main>
@@ -0,0 +1,26 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import { getPiece } from '#lib/server/content.js';
 import { fetchPresentationImage } from '#lib/server/presentation.js';
 export const GET: RequestHandler = async ({ locals, params }) => {
 	requireUser(locals.user);
 	const piece = getPiece(params.id);
 	if (!piece?.presentationImageUrl) error(404, 'Vorschaubild nicht verfügbar');
 	try {
 		const image = await fetchPresentationImage(piece.presentationImageUrl);
 		return new Response(new Uint8Array(image.data), {
 			headers: {
 				'Content-Type': image.mimeType,
 				'Content-Length': String(image.data.byteLength),
 				'Cache-Control': 'private, max-age=300',
 				'X-Content-Type-Options': 'nosniff',
 				'Cross-Origin-Resource-Policy': 'same-origin',
 				'Content-Security-Policy': "default-src 'none'; sandbox"
 			}
 		});
 	} catch {
 		error(404, 'Vorschaubild nicht verfügbar');
 	}
 };
@@ -0,0 +1,9 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { getPresentationView } from '#lib/server/live.js';
 export const load: PageServerLoad = ({ params }) => {
 	const view = getPresentationView(params.token);
 	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
 	return { view };
 };
@@ -0,0 +1,63 @@
 <script lang="ts">
 	import { page } from '$app/state';
 	import { onMount, untrack } from 'svelte';
 	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
 	import type { PageProps } from './$types';
 	let { data }: PageProps = $props();
 	let view = $state(untrack(() => data.view));
 	let connection = $state<'connected' | 'waiting' | 'interrupted'>('connected');
 	onMount(() => {
 		let stopped = false;
 		let timer: ReturnType<typeof setTimeout>;
 		async function refresh() {
 			try {
 				const response = await fetch(`/heinzlive/${page.params.token}/state`, {
 					headers: { Accept: 'application/json' },
 					cache: 'no-store'
 				});
 				if (!response.ok) throw new Error('STATE_UNAVAILABLE');
 				const next = await response.json();
 				if (next.revision !== view.revision) view = next;
 				connection = 'connected';
 			} catch {
 				connection = 'interrupted';
 			}
 			if (!stopped) timer = setTimeout(refresh, connection === 'interrupted' ? 3000 : 1000);
 		}
 		connection = 'waiting';
 		timer = setTimeout(refresh, 500);
 		return () => {
 			stopped = true;
 			clearTimeout(timer);
 		};
 	});
 </script>
 <svelte:head>
 	<title>heinzlive</title>
 	<meta name="robots" content="noindex, nofollow, noarchive" />
 </svelte:head>
 <main class="heinzlive-output">
 	<div class="output-connection sr-only" class:problem={connection === 'interrupted'} role="status">
 		<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
 	</div>
 	{#if view.content}
 		{#key view.revision}
 			<PresentationDisplay
 				content={view.content}
 				imageSrc={view.content.mode === 'text'
 					? `/heinzlive/${page.params.token}/media`
 					: `/heinzlive/${page.params.token}/preview-image`}
 			/>
 		{/key}
 	{:else}
 		<section class="output-idle">
 			<div class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></div>
 			<h1>Bereit für den nächsten Inhalt</h1>
 			<p>Die Moderation wählt ausdrücklich aus, was hier erscheint.</p>
 		</section>
 	{/if}
 </main>
@@ -0,0 +1,18 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { getPresentationMedia } from '#lib/server/live.js';
 export const GET: RequestHandler = async ({ params }) => {
 	const media = await getPresentationMedia(params.token, params.id);
 	if (!media) error(404, 'Bild nicht gefunden');
 	return new Response(media.data, {
 		headers: {
 			'Content-Type': media.mimeType,
 			'Content-Length': String(media.byteSize),
 			'Cache-Control': 'no-store',
 			'Content-Security-Policy': "default-src 'none'; sandbox",
 			'Cross-Origin-Resource-Policy': 'same-origin',
 			'X-Content-Type-Options': 'nosniff'
 		}
 	});
 };
@@ -0,0 +1,18 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { getPresentationPreviewImage } from '#lib/server/live.js';
 export const GET: RequestHandler = async ({ params }) => {
 	const image = await getPresentationPreviewImage(params.token);
 	if (!image) error(404, 'Vorschaubild nicht verfügbar');
 	return new Response(new Uint8Array(image.data), {
 		headers: {
 			'Content-Type': image.mimeType,
 			'Content-Length': String(image.data.byteLength),
 			'Cache-Control': 'private, max-age=300',
 			'X-Content-Type-Options': 'nosniff',
 			'Cross-Origin-Resource-Policy': 'same-origin',
 			'Content-Security-Policy': "default-src 'none'; sandbox"
 		}
 	});
 };
@@ -0,0 +1,9 @@
 import { error, json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { getPresentationView } from '#lib/server/live.js';
 export const GET: RequestHandler = ({ params }) => {
 	const view = getPresentationView(params.token);
 	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
 	return json(view, { headers: { 'Cache-Control': 'no-store' } });
 };
@@ -1,15 +1,127 @@
-import { getShow } from '#lib/server/previews.js';
+import { randomUUID } from 'node:crypto';
 import { error, fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import {
 	completeCurrent,
 	getLiveView,
 	goBack,
 	issuePresentationAccess,
 	moveOpenUsage,
 	presentUsage,
 	skipCurrent,
 	startOrResumeLive
 } from '#lib/server/live.js';
 import { listShows } from '#lib/server/shows.js';
-export function load() {
+function text(data: FormData, name: string) {
-	const show = getShow();
+	return String(data.get(name) || '');
 	const usages = show.sections.flatMap((section) =>
 		section.usages
 			.filter((usage) => !usage.isReserve)
 			.map((usage) => ({ ...usage, section: section.name }))
 	);
 	const currentIndex = Math.max(
 		0,
 		usages.findIndex((usage) => usage.status === 'current')
 	);
 	return { show, current: usages[currentIndex], next: usages[currentIndex + 1] ?? null };
 }
 function actionError(cause: unknown) {
 	const code = cause instanceof Error ? cause.message : '';
 	if (code === 'CONFLICT')
 		return {
 			status: 409,
 			error: 'Der Live-Stand wurde bereits geändert. Die Ansicht wurde erneuert.'
 		};
 	if (code === 'NO_CURRENT') return { status: 409, error: 'Es ist kein aktuelles Piece aktiv.' };
 	if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
 	if (code === 'LIVE_ORDER_LOCKED')
 		return {
 			status: 409,
 			error: 'Nur offene Pieces hinter dem aktuellen Stand können sortiert werden.'
 		};
 	if (code === 'SHOW_COMPLETED')
 		return { status: 409, error: 'Abgeschlossene Sendungen können nicht live gesteuert werden.' };
 	if (code === 'NOT_FOUND')
 		return { status: 404, error: 'Sendung oder Piece wurde nicht gefunden.' };
 	if (code.startsWith('INVALID_')) return { status: 400, error: 'Die Live-Aktion ist ungültig.' };
 	return { status: 500, error: 'Die Live-Aktion konnte nicht gespeichert werden.' };
 }
 function attempt(intent: string, operation: () => unknown) {
 	try {
 		return { intent, success: true, result: operation() };
 	} catch (cause) {
 		const problem = actionError(cause);
 		return fail(problem.status, { intent, ...problem });
 	}
 }
 export const load: PageServerLoad = ({ locals, url }) => {
 	requireUser(locals.user);
 	const showId = url.searchParams.get('show') || listShows()[0]?.id;
 	if (!showId) error(404, 'Keine Sendung vorhanden');
 	try {
 		return { live: getLiveView(showId), commandId: randomUUID() };
 	} catch (cause) {
 		if (cause instanceof Error && cause.message === 'NOT_FOUND')
 			error(404, 'Sendung nicht gefunden');
 		throw cause;
 	}
 };
 export const actions = {
 	start: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('start', () =>
 			startOrResumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
 	complete: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('complete', () =>
 			completeCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
 	skip: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('skip', () =>
 			skipCurrent(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
 	back: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('back', () =>
 			goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
 	present: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('present', () =>
 			presentUsage(
 				text(data, 'showId'),
 				text(data, 'usageId') || null,
 				text(data, 'commandId'),
 				Number(data.get('revision'))
 			)
 		);
 	},
 	moveUsage: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('moveUsage', () =>
 			moveOpenUsage(text(data, 'showId'), text(data, 'usageId'), Number(data.get('showRevision')), {
 				sectionId: text(data, 'sectionId') || null,
 				position: Number(data.get('position'))
 			})
 		);
 	},
 	createOutput: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		try {
 			const token = issuePresentationAccess(text(data, 'showId'));
 			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/${token}` };
 		} catch (cause) {
 			const problem = actionError(cause);
 			return fail(problem.status, { intent: 'createOutput', ...problem });
 		}
 	}
 } satisfies Actions;
@@ -1,92 +1,401 @@
 <script lang="ts">
-	import PreviewNotice from '#lib/components/PreviewNotice.svelte';
+	import { enhance, type SubmitFunction } from '$app/forms';
 	import { formatClock } from '#lib/format.js';
 	import { resolve } from '$app/paths';
-	import type { PageData } from './$types';
+	import { onMount, untrack } from 'svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
 	import type { PageProps } from './$types';
-	let { data }: { data: PageData } = $props();
+	let { data, form }: PageProps = $props();
 	let promptSize = $state(1.55);
 	let showRail = $state(true);
 	let showTimes = $state(true);
 	let popupMessage = $state('');
 	let now = $state(Date.now());
 	let loadedAt = $state(Date.now());
 	let currentId = $state(untrack(() => data.live.current?.id ?? null));
 	let outputWindow: Window | null = null;
 	let progress = $derived(
 		data.live.totalCount ? Math.round((data.live.completedCount / data.live.totalCount) * 100) : 0
 	);
 	let currentActualSeconds = $derived(
 		(data.live.current?.actualDurationSeconds ?? 0) +
 			(data.live.current ? Math.max(0, Math.floor((now - loadedAt) / 1000)) : 0)
 	);
 	$effect(() => {
 		const nextCurrentId = data.live.current?.id ?? null;
 		if (nextCurrentId !== currentId) {
 			currentId = nextCurrentId;
 			loadedAt = Date.now();
 		}
 	});
 	onMount(() => {
 		const key = `sendewerk-live-${data.live.show.id}`;
 		try {
 			const settings = JSON.parse(localStorage.getItem(key) || '{}');
 			if (typeof settings.promptSize === 'number') promptSize = settings.promptSize;
 			if (typeof settings.showRail === 'boolean') showRail = settings.showRail;
 			if (typeof settings.showTimes === 'boolean') showTimes = settings.showTimes;
 			if (typeof settings.scrollY === 'number')
 				requestAnimationFrame(() => scrollTo(0, settings.scrollY));
 		} catch {
 			localStorage.removeItem(key);
 		}
 		const interval = setInterval(() => (now = Date.now()), 1000);
 		const persistScroll = () => persistSettings();
 		addEventListener('scroll', persistScroll, { passive: true });
 		return () => {
 			clearInterval(interval);
 			removeEventListener('scroll', persistScroll);
 		};
 	});
 	function persistSettings() {
 		localStorage.setItem(
 			`sendewerk-live-${data.live.show.id}`,
 			JSON.stringify({ promptSize, showRail, showTimes, scrollY })
 		);
 	}
 	function changePromptSize(delta: number) {
 		promptSize = Math.min(2.4, Math.max(1.1, promptSize + delta));
 		persistSettings();
 	}
 	function toggleRail() {
 		showRail = !showRail;
 		persistSettings();
 	}
 	function toggleTimes() {
 		showTimes = !showTimes;
 		persistSettings();
 	}
 	function liveAction(name: string) {
 		return `?show=${encodeURIComponent(data.live.show.id)}&/${name}`;
 	}
 	const enhanceCommand: SubmitFunction = ({ formElement, formData, submitter }) => {
 		const command = formElement.elements.namedItem('commandId');
 		if (command instanceof HTMLInputElement) {
 			command.value = crypto.randomUUID();
 			formData.set('commandId', command.value);
 		}
 		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
 		return async ({ update }) => {
 			await update({ reset: false, invalidateAll: true });
 			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
 		};
 	};
 	const enhanceOutput: SubmitFunction = ({ submitter }) => {
 		popupMessage = '';
 		outputWindow = window.open('about:blank', 'heinzlive-output');
 		if (!outputWindow) popupMessage = 'Popup blockiert. Bitte Popups erlauben und erneut öffnen.';
 		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
 		return async ({ result, update }) => {
 			if (result.type === 'success') {
 				const response = result.data as { outputUrl: string };
 				if (outputWindow && !outputWindow.closed) {
 					outputWindow.location.href = response.outputUrl;
 					popupMessage = 'Präsentationsfenster verbunden.';
 				} else {
 					popupMessage = `Präsentationsfenster konnte nicht geöffnet werden: ${response.outputUrl}`;
 				}
 			} else {
 				outputWindow?.close();
 			}
 			await update({ reset: false, invalidateAll: false });
 			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
 		};
 	};
 </script>
-<svelte:head><title>Live-Vorschau | Sendewerk</title></svelte:head>
+<svelte:head><title>Live | {data.live.show.title} | Sendewerk</title></svelte:head>
-<div class="page-wrap live-page">
+<div class="page-wrap live-page live-controller">
 	<header class="live-header">
 		<div>
-			<p class="eyebrow"><span class="live-pulse"></span> Live-Modus · Vorschau</p>
+			<p class="eyebrow"><span class="live-pulse"></span> Live-Steuerung</p>
-			<h1>{data.show.title}</h1>
+			<h1>{data.live.show.title}</h1>
 			<p class="live-state-line">
 				{data.live.startedAtUtc
 					? 'Live-Stand wird automatisch gespeichert.'
 					: 'Noch nicht gestartet.'}
 			</p>
 		</div>
 		<div class="live-header-actions">
 			<div class="font-control" aria-label="Prompter-Schriftgröße">
 				<button
 					type="button"
-					onclick={() => (promptSize = Math.max(1.15, promptSize - 0.1))}
+					onclick={() => changePromptSize(-0.1)}
 					aria-label="Schrift verkleinern">A−</button
 				>
-				<button
+				<button type="button" onclick={() => changePromptSize(0.1)} aria-label="Schrift vergrößern"
-					type="button"
+					>A+</button
 					onclick={() => (promptSize = Math.min(2.1, promptSize + 0.1))}
 					aria-label="Schrift vergrößern">A+</button
 				>
 			</div>
-			<a href={resolve('/sendungen')}>Planung schließen</a>
+			<button type="button" class="text-button" aria-pressed={!showTimes} onclick={toggleTimes}
 				>{showTimes ? 'Zeiten ausblenden' : 'Zeiten einblenden'}</button
 			>
 			<button type="button" class="text-button" aria-pressed={!showRail} onclick={toggleRail}
 				>{showRail ? 'Ablauf ausblenden' : 'Ablauf einblenden'}</button
 			>
 			<a href={resolve('/sendungen/[id]', { id: data.live.show.id })}>Zur Planung</a>
 		</div>
 	</header>
-	<PreviewNotice area="Live-Modus" />
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 	{#if popupMessage}<div class="form-message" role="status">{popupMessage}</div>{/if}
-	<div class="live-grid">
+	<section class="live-toolbar" aria-label="Live-Sitzung">
-		<section class="live-current" style={`--prompt-size: ${promptSize}rem`}>
+		<form method="POST" action={liveAction('start')} use:enhance={enhanceCommand}>
-			<div class="live-kicker">
+			<input type="hidden" name="showId" value={data.live.show.id} />
-				<span>Aktuell · {data.current.section}</span><strong
+			<input type="hidden" name="revision" value={data.live.liveRevision} />
-					>{formatClock(data.current.durationSeconds)}</strong
+			<input type="hidden" name="commandId" value={data.commandId} />
-				>
+			<button class="primary-button" type="submit">
-			</div>
+				{data.live.startedAtUtc ? 'Live-Stand wiederaufnehmen' : 'Sendung starten'}
-			<h2>{data.current.title}</h2>
+			</button>
-			<div class="prompter-copy">{data.current.intro}</div>
+		</form>
-			<div class="moderation-card">
+		<form method="POST" action={liveAction('createOutput')} use:enhance={enhanceOutput}>
-				<span>Moderationsstichpunkte</span>
+			<input type="hidden" name="showId" value={data.live.show.id} />
-				<p>{data.current.moderation}</p>
+			<button class="secondary-button" type="submit">Präsentationsfenster öffnen</button>
-			</div>
+		</form>
-			<details class="research-details">
+		<div class="live-session-summary">
-				<summary>Recherche öffnen</summary>
+			<strong>{data.live.completedCount} / {data.live.totalCount}</strong>
-				<p>
+			<span>{progress}% bearbeitet</span>
 					Die Recherche bleibt im echten Live-Modus standardmäßig geschlossen und bewahrt beim
 					Öffnen die Leseposition.
 				</p>
 			</details>
 			<div class="transition-card">
 				<span>Überleitung</span>
 				<p>{data.current.transition}</p>
 		</div>
 	</section>
-		<aside class="live-rail">
+	<div class:without-rail={!showRail} class="live-grid">
-			<div class="next-card">
+		{#if data.live.current}<main
 				class="live-current"
 				style={`--prompt-size: ${promptSize}rem`}
 				aria-labelledby="current-title"
 			>
 				<div class="live-kicker">
 					<span>Aktuell · {data.live.current.sectionName}</span>
 					{#if showTimes}<strong
 							>{formatClock(currentActualSeconds)} / {formatClock(
 								data.live.current.durationSeconds
 							)}</strong
 						>{/if}
 				</div>
 				<h2 id="current-title">{data.live.current.title}</h2>
 				<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
 				<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 				<div class="prompter-copy">{@html data.live.current.introHtml}</div>
 				{#if data.live.current.moderationHtml}<section class="moderation-card">
 						<span>Moderationsstichpunkte</span>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						<div class="live-markdown">{@html data.live.current.moderationHtml}</div>
 					</section>{/if}
 				<details class="research-details">
 					<summary>Manuelle Recherche öffnen</summary>
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					<div class="live-markdown">{@html data.live.current.researchHtml}</div>
 				</details>
 				{#if data.live.current.transitionHtml}<section class="transition-card">
 						<span>Überleitung</span>
 						<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 						<div class="live-markdown">{@html data.live.current.transitionHtml}</div>
 					</section>{/if}
 				<div class="live-current-actions">
 					<form method="POST" action={liveAction('back')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
 						<button class="secondary-button" type="submit">Zurück</button>
 					</form>
 					<form method="POST" action={liveAction('present')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="usageId" value={data.live.current.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
 						<button class="secondary-button" type="submit">
 							{data.live.presentationUsageId === data.live.current.id
 								? 'Erneut präsentieren'
 								: 'Präsentieren'}
 						</button>
 					</form>
 					<form method="POST" action={liveAction('skip')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
 						<button class="text-button" type="submit">Überspringen</button>
 					</form>
 					<form method="POST" action={liveAction('complete')} use:enhance={enhanceCommand}>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
 						<button class="primary-button" type="submit">Erledigen und weiter</button>
 					</form>
 				</div>
 			</main>{:else}<main class="live-current live-empty">
 				<p class="eyebrow">Kein aktives Piece</p>
 				<h2>{data.live.totalCount ? 'Live-Stand bereit' : 'Noch kein Piece eingeplant'}</h2>
 				<p>
 					{data.live.totalCount
 						? 'Sendung starten oder einen abgeschlossenen Schritt zurückgehen.'
 						: 'In der Planung kann zuerst ein sendefertiges Piece hinzugefügt werden.'}
 				</p>
 				{#if data.live.completedCount}<form
 						method="POST"
 						action={liveAction('back')}
 						use:enhance={enhanceCommand}
 					>
 						<input type="hidden" name="showId" value={data.live.show.id} />
 						<input type="hidden" name="revision" value={data.live.liveRevision} />
 						<input type="hidden" name="commandId" value={data.commandId} />
 						<button class="secondary-button" type="submit">Zum letzten Piece zurück</button>
 					</form>{/if}
 			</main>{/if}
 		{#if showRail}<aside class="live-rail">
 				<section class="next-card">
 					<span>Als Nächstes</span>
-				{#if data.next}
+					{#if data.live.next}
-					<h3>{data.next.title}</h3>
+						<h3>{data.live.next.title}</h3>
-					<p>{data.next.section} · {formatClock(data.next.durationSeconds)}</p>
+						<p>
 							{data.live.next.sectionName}{#if showTimes}
 								· {formatClock(data.live.next.durationSeconds)}{/if}
 						</p>
 					{:else}
 						<h3>Sendungsende</h3>
-					<p>Kein weiteres Stück eingeplant.</p>
+						<p>Kein weiteres offenes Piece eingeplant.</p>
 					{/if}
-			</div>
+				</section>
-			<div class="live-progress">
+
-				<header><span>Ablauf</span><strong>2 / 4</strong></header>
+				<section class="live-progress">
-				<div class="progress-track"><span></span></div>
+					<header>
-				{#each data.show.sections as section, index (section.id)}
+						<span>Ablauf</span><strong>{data.live.completedCount} / {data.live.totalCount}</strong>
-					<div class:active={index === 1} class="rail-section">
+					</header>
-						<span>{String(index + 1).padStart(2, '0')}</span>
+					<div class="progress-track"><span style={`width:${progress}%`}></span></div>
 					{#each data.live.sections as section, sectionIndex (section.id)}
 						<div class:active={section.id === data.live.current?.sectionId} class="rail-section">
 							<span>{String(sectionIndex + 1).padStart(2, '0')}</span>
 							<div>
-							<strong>{section.name}</strong><small>{formatClock(section.durationSeconds)}</small>
+								<strong>{section.name}</strong>
 								{#if showTimes}<small>{formatDuration(section.durationSeconds)}</small>{/if}
 							</div>
 						</div>
 						{#each section.usages as usage, usageIndex (usage.id)}
 							<div class:current={usage.id === data.live.current?.id} class="live-run-item">
 								<div>
 									<strong>{usage.title}</strong><small>{usage.status}</small>
 								</div>
 								<div class="live-run-actions">
 									{#if usage.status === 'open'}
 										<form
 											method="POST"
 											action={liveAction('moveUsage')}
 											use:enhance={enhanceCommand}
 										>
 											<input type="hidden" name="showId" value={data.live.show.id} />
 											<input type="hidden" name="showRevision" value={data.live.show.revision} />
 											<input type="hidden" name="usageId" value={usage.id} />
 											<input type="hidden" name="sectionId" value={section.id} />
 											<input type="hidden" name="position" value={usageIndex - 1} />
 											<button
 												type="submit"
 												disabled={usageIndex === 0 ||
 													section.usages[usageIndex - 1]?.status !== 'open'}
 												aria-label={`${usage.title} nach oben`}>↑</button
 											>
 										</form>
 										<form
 											method="POST"
 											action={liveAction('moveUsage')}
 											use:enhance={enhanceCommand}
 										>
 											<input type="hidden" name="showId" value={data.live.show.id} />
 											<input type="hidden" name="showRevision" value={data.live.show.revision} />
 											<input type="hidden" name="usageId" value={usage.id} />
 											<input type="hidden" name="sectionId" value={section.id} />
 											<input type="hidden" name="position" value={usageIndex + 1} />
 											<button
 												type="submit"
 												disabled={usageIndex === section.usages.length - 1 ||
 													section.usages[usageIndex + 1]?.status !== 'open'}
 												aria-label={`${usage.title} nach unten`}>↓</button
 											>
 										</form>
 									{/if}
 									<form method="POST" action={liveAction('present')} use:enhance={enhanceCommand}>
 										<input type="hidden" name="showId" value={data.live.show.id} />
 										<input type="hidden" name="usageId" value={usage.id} />
 										<input type="hidden" name="revision" value={data.live.liveRevision} />
 										<input type="hidden" name="commandId" value={data.commandId} />
 										<button type="submit" aria-label={`${usage.title} präsentieren`}>↗</button>
 									</form>
 								</div>
 							</div>
 						{/each}
 					{/each}
 				</section>
 				<section class="live-reserve">
 					<header><span>Reserve</span><strong>{data.live.reserve.length}</strong></header>
 					{#each data.live.reserve as usage, reserveIndex (usage.id)}
 						<div class="live-reserve-item">
 							<div>
 								<strong>{usage.title}</strong>{#if showTimes}<small
 										>{formatClock(usage.durationSeconds)}</small
 									>{/if}
 							</div>
-			<div class="readonly-actions" aria-label="Spätere Live-Aktionen">
+							<div class="live-run-actions">
-				<span>Zurück</span><strong>In Etappe 5 steuerbar</strong><span>Erledigen</span>
+								<form method="POST" action={liveAction('moveUsage')} use:enhance={enhanceCommand}>
-			</div>
+									<input type="hidden" name="showId" value={data.live.show.id} />
-		</aside>
+									<input type="hidden" name="showRevision" value={data.live.show.revision} />
 									<input type="hidden" name="usageId" value={usage.id} />
 									<input type="hidden" name="sectionId" value="" />
 									<input type="hidden" name="position" value={reserveIndex - 1} />
 									<button
 										type="submit"
 										disabled={reserveIndex === 0}
 										aria-label={`${usage.title} in Reserve nach oben`}>↑</button
 									>
 								</form>
 								<form method="POST" action={liveAction('moveUsage')} use:enhance={enhanceCommand}>
 									<input type="hidden" name="showId" value={data.live.show.id} />
 									<input type="hidden" name="showRevision" value={data.live.show.revision} />
 									<input type="hidden" name="usageId" value={usage.id} />
 									<input type="hidden" name="sectionId" value="" />
 									<input type="hidden" name="position" value={reserveIndex + 1} />
 									<button
 										type="submit"
 										disabled={reserveIndex === data.live.reserve.length - 1}
 										aria-label={`${usage.title} in Reserve nach unten`}>↓</button
 									>
 								</form>
 								{#if data.live.current || data.live.sections[0]}<form
 										method="POST"
 										action={liveAction('moveUsage')}
 										use:enhance={enhanceCommand}
 									>
 										<input type="hidden" name="showId" value={data.live.show.id} />
 										<input type="hidden" name="showRevision" value={data.live.show.revision} />
 										<input type="hidden" name="usageId" value={usage.id} />
 										<input
 											type="hidden"
 											name="sectionId"
 											value={data.live.current?.sectionId ?? data.live.sections[0]?.id}
 										/>
 										<input
 											type="hidden"
 											name="position"
 											value={(data.live.current?.position ?? -1) + 1}
 										/>
 										<button class="text-button" type="submit">Als Nächstes</button>
 									</form>{/if}
 							</div>
 						</div>
 					{/each}
 					{#if !data.live.reserve.length}<p>Keine Pieces in Reserve.</p>{/if}
 				</section>
 			</aside>{/if}
 	</div>
 </div>
@@ -1,5 +1,74 @@
-import { getPieces, getShow } from '#lib/server/previews.js';
+import { fail, redirect } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import { createShow, listShows, listShowTemplates } from '#lib/server/shows.js';
-export function load() {
+function berlinLocalToUtc(value: string): string | null {
-	return { pieces: getPieces(), show: getShow() };
+	if (!value) return null;
 	const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
 	if (!match) throw new Error('INVALID_TIMESTAMP');
 	const parts = match.slice(1).map(Number);
 	const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
 	let candidate = localMilliseconds;
 	for (let attempt = 0; attempt < 2; attempt += 1) {
 		const formatted = new Intl.DateTimeFormat('en-CA', {
 			timeZone: 'Europe/Berlin',
 			year: 'numeric',
 			month: '2-digit',
 			day: '2-digit',
 			hour: '2-digit',
 			minute: '2-digit',
 			hourCycle: 'h23'
 		}).formatToParts(new Date(candidate));
 		const read = (type: Intl.DateTimeFormatPartTypes) =>
 			Number(formatted.find((part) => part.type === type)?.value);
 		const represented = Date.UTC(
 			read('year'),
 			read('month') - 1,
 			read('day'),
 			read('hour'),
 			read('minute')
 		);
 		candidate += localMilliseconds - represented;
 	}
 	return new Date(candidate).toISOString();
 }
 export const load: PageServerLoad = ({ locals }) => {
 	requireUser(locals.user);
 	return { shows: listShows(), templates: listShowTemplates() };
 };
 export const actions = {
 	create: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		const title = String(data.get('title') || '');
 		const startsAt = String(data.get('startsAt') || '');
 		const templateId = String(data.get('templateId') || '') || null;
 		let id: string;
 		try {
 			id = createShow({ title, startsAtUtc: berlinLocalToUtc(startsAt), templateId }).id;
 		} catch (cause) {
 			const code = cause instanceof Error ? cause.message : '';
 			if (code === 'INVALID_TITLE') {
 				return fail(400, { error: 'Bitte einen Titel eingeben.', title, startsAt, templateId });
 			}
 			if (code === 'INVALID_TIMESTAMP') {
 				return fail(400, {
 					error: 'Bitte einen gültigen Termin eingeben.',
 					title,
 					startsAt,
 					templateId
 				});
 			}
 			return fail(400, {
 				error: 'Die Sendung konnte nicht angelegt werden.',
 				title,
 				startsAt,
 				templateId
 			});
 		}
 		redirect(303, `/sendungen/${id}`);
 	}
 } satisfies Actions;
@@ -1,130 +1,104 @@
 <script lang="ts">
 	import PreviewNotice from '#lib/components/PreviewNotice.svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
 	import { resolve } from '$app/paths';
-	import type { PageData } from './$types';
+	import { formatDuration } from '#lib/format.js';
 	import type { PageProps } from './$types';
-	let { data }: { data: PageData } = $props();
+	let { data, form }: PageProps = $props();
-	let mobilePane = $state<'fundus' | 'plan'>('plan');
+
-	let plannedCount = $derived(
+	function berlinDate(value: string | null) {
-		data.show.sections.reduce(
+		if (!value) return 'Termin offen';
-			(total, section) => total + section.usages.filter((usage) => !usage.isReserve).length,
+		return new Intl.DateTimeFormat('de-DE', {
-			0
+			timeZone: 'Europe/Berlin',
-		)
+			dateStyle: 'medium',
-	);
+			timeStyle: 'short'
 		}).format(new Date(value));
 	}
 </script>
 <svelte:head><title>Sendungen | Sendewerk</title></svelte:head>
-<div class="page-wrap builder-page">
+<div class="page-wrap shows-page">
-	<header class="page-heading show-heading">
+	<header class="page-heading">
-		<div class="show-heading-copy">
+		<div>
 			<h1>Sendungen</h1>
-			<p class="show-title">{data.show.title}</p>
+			<p class="page-intro">Streams aus Fundus-Pieces und freien Abschnitten zusammenstellen.</p>
 			<p class="show-date">{data.show.startsAtBerlin} Uhr</p>
 		</div>
 		<div class="show-summary">
 			<div><strong>{plannedCount}</strong><span>Stücke</span></div>
 			<div>
 				<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
 			</div>
 			<a class="live-link" href={resolve('/live')}>Live-Vorschau <span>↗</span></a>
 		</div>
 	</header>
-	<PreviewNotice area="Sendungsbau" />
+	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
-	<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
+	<section class="show-create-panel">
 		<button
 			class:active={mobilePane === 'fundus'}
 			type="button"
 			onclick={() => (mobilePane = 'fundus')}>Fundus</button
 		>
 		<button class:active={mobilePane === 'plan'} type="button" onclick={() => (mobilePane = 'plan')}
 			>Ablauf</button
 		>
 	</div>
 	<div class="builder-workspace">
 		<section
 			class="builder-pane source-pane"
 			class:mobile-hidden={mobilePane !== 'fundus'}
 			aria-labelledby="source-title"
 		>
 			<header class="pane-heading">
 		<div>
-					<p class="eyebrow">Quelle</p>
+			<p class="eyebrow">Neuen Stream planen</p>
-					<h2 id="source-title">Sendefertiger Fundus</h2>
+			<h2>Leer starten oder Ablauf übernehmen</h2>
 		</div>
-				<span>{data.pieces.filter((piece) => piece.status === 'ready').length}</span>
+		<form method="POST" action="?/create" class="show-create-form">
-			</header>
+			<label
-			<div class="source-list">
+				>Titel<input
-				{#each data.pieces.filter((piece) => piece.status === 'ready') as piece (piece.id)}
+					name="title"
-					<article class="source-card" style={`--category: ${piece.categoryColor}`}>
+					required
-						<div>
+					maxlength="200"
-							<span class="category-label"><i></i>{piece.category}</span><span
+					value={form?.title ?? ''}
-								>{formatClock(piece.durationSeconds)}</span
+					placeholder="Nächste heinzlive-Sendung"
 				/></label
 			>
-						</div>
+			<label
-						<h3>{piece.title}</h3>
+				>Termin<input name="startsAt" type="datetime-local" value={form?.startsAt ?? ''} /></label
-						<p>{piece.format} · {piece.topics.join(', ')}</p>
+			>
-					</article>
+			<label
-				{/each}
+				>Ausgangspunkt<select name="templateId" value={form?.templateId ?? ''}
-			</div>
+					><option value="">Leer starten</option
-			<div class="reserve-box">
+					>{#each data.templates as template (template.id)}<option value={template.id}
-				<div>
+							>{template.name}</option
-					<span aria-hidden="true">◇</span>
+						>{/each}</select
-					<div><strong>Reservebank</strong><small>1 Stück vorbereitet</small></div>
+				></label
-				</div>
+			>
-				<p>„Pixelart, die nicht nostalgisch sein will“ wartet als Ersatz.</p>
+			<button class="primary-button" type="submit">Sendung anlegen</button>
 		</form>
 		<div class="template-notes">
 			{#each data.templates as template (template.id)}<p>
 					<strong>{template.name}:</strong>
 					{template.description}
 				</p>{/each}
 		</div>
 	</section>
-		<section
+	<section class="show-library" aria-labelledby="show-library-title">
 			class="builder-pane run-pane"
 			class:mobile-hidden={mobilePane !== 'plan'}
 			aria-labelledby="run-title"
 		>
 			<header class="pane-heading">
 				<div>
 					<p class="eyebrow">Sendungsplan</p>
 					<h2 id="run-title">Ablauf</h2>
 				</div>
 				<span>{formatDuration(data.show.totalDurationSeconds)}</span>
 			</header>
 			<div class="run-list">
 				{#each data.show.sections as section, index (section.id)}
 					<article class="run-section" style={`--category: ${section.categoryColor}`}>
 		<header>
-							<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
+			<h2 id="show-library-title">Geplante Sendungen</h2>
-							<div>
+			<span>{data.shows.length}</span>
 								<span class="category-label"><i></i>{section.category}</span>
 								<h3>{section.name}</h3>
 							</div>
 							<strong>{formatClock(section.durationSeconds)}</strong>
 		</header>
-						{#if section.usages.filter((usage) => !usage.isReserve).length > 0}
+		{#if data.shows.length}
-							<div class="usage-list">
+			<div class="show-card-list">
-								{#each section.usages.filter((usage) => !usage.isReserve) as usage (usage.id)}
+				{#each data.shows as show (show.id)}
-									<div class="usage-row">
+					<a class="show-card" href={resolve('/sendungen/[id]', { id: show.id })}>
 						<div>
-											<strong>{usage.title}</strong><small
+							<span class={`show-state ${show.status}`}
-												>{formatClock(usage.durationSeconds)} · Stand für diese Sendung</small
+								>{show.status === 'ready'
 									? 'Bereit'
 									: show.status === 'draft'
 										? 'Entwurf'
 										: show.status === 'live'
 											? 'Live'
 											: 'Abgeschlossen'}</span
 							>
 							<h3>{show.title}</h3>
 							<p>{berlinDate(show.startsAtUtc)} Uhr</p>
 						</div>
-										<span class:current={usage.status === 'current'} class="usage-status"
+						<div class="show-card-facts">
-											>{usage.status === 'current' ? 'Aktuell' : 'Offen'}</span
+							<span><strong>{show.sectionCount}</strong> Abschnitte</span><span
-										>
+								><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
 							><b aria-hidden="true">→</b>
 						</div>
 					</a>
 				{/each}
 			</div>
 		{:else}
-							<div class="section-placeholder">Spieleblock ohne vorbereiteten Fundusinhalt</div>
+			<div class="empty-state">
-						{/if}
+				<span aria-hidden="true">＋</span>
-					</article>
+				<h2>Noch keine Sendung</h2>
-				{/each}
+				<p>Oben kann der erste Stream geplant werden.</p>
 			</div>
 		{/if}
 	</section>
 </div>
 </div>
@@ -0,0 +1,257 @@
 import { error, fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import { getTaxonomy, listPieces } from '#lib/server/content.js';
 import {
 	addPieceUsage,
 	addShowSection,
 	duplicatePieceUsage,
 	getShow,
 	getPieceUsageContexts,
 	movePieceUsage,
 	moveShowSection,
 	refreshPieceUsageFromOriginal,
 	removePieceUsage,
 	removeShowSection,
 	saveShowMetadata,
 	updatePieceUsage,
 	updateShowSection,
 	type EditableShowStatus,
 	type PieceUsageUpdate
 } from '#lib/server/shows.js';
 function text(data: FormData, name: string) {
 	return String(data.get(name) || '');
 }
 function nullableDuration(data: FormData) {
 	const value = text(data, 'explicitDurationSeconds').trim();
 	return value === '' ? null : Number(value);
 }
 function pieceDurationInSeconds(data: FormData) {
 	return Math.round(Number(data.get('durationMinutes')) * 60);
 }
 function berlinLocalToUtc(value: string): string | null {
 	if (!value) return null;
 	const match = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})$/.exec(value);
 	if (!match) throw new Error('INVALID_TIMESTAMP');
 	const parts = match.slice(1).map(Number);
 	const localMilliseconds = Date.UTC(parts[0], parts[1] - 1, parts[2], parts[3], parts[4]);
 	let candidate = localMilliseconds;
 	for (let attempt = 0; attempt < 2; attempt += 1) {
 		const formatted = new Intl.DateTimeFormat('en-CA', {
 			timeZone: 'Europe/Berlin',
 			year: 'numeric',
 			month: '2-digit',
 			day: '2-digit',
 			hour: '2-digit',
 			minute: '2-digit',
 			hourCycle: 'h23'
 		}).formatToParts(new Date(candidate));
 		const read = (type: Intl.DateTimeFormatPartTypes) =>
 			Number(formatted.find((part) => part.type === type)?.value);
 		candidate +=
 			localMilliseconds -
 			Date.UTC(read('year'), read('month') - 1, read('day'), read('hour'), read('minute'));
 	}
 	return new Date(candidate).toISOString();
 }
 function berlinInput(value: string | null) {
 	if (!value) return '';
 	const parts = new Intl.DateTimeFormat('en-CA', {
 		timeZone: 'Europe/Berlin',
 		year: 'numeric',
 		month: '2-digit',
 		day: '2-digit',
 		hour: '2-digit',
 		minute: '2-digit',
 		hourCycle: 'h23'
 	}).formatToParts(new Date(value));
 	const read = (type: Intl.DateTimeFormatPartTypes) =>
 		parts.find((part) => part.type === type)?.value ?? '';
 	return `${read('year')}-${read('month')}-${read('day')}T${read('hour')}:${read('minute')}`;
 }
 function actionError(cause: unknown) {
 	const code = cause instanceof Error ? cause.message : '';
 	if (code === 'CONFLICT')
 		return {
 			status: 409,
 			error: 'Die Sendung wurde inzwischen geändert. Bitte neu laden.',
 			conflict: true
 		};
 	if (code === 'SHOW_COMPLETED')
 		return { status: 409, error: 'Abgeschlossene Sendungen können nicht bearbeitet werden.' };
 	if (code === 'PIECE_NOT_READY')
 		return { status: 400, error: 'Nur sendefertige Pieces können eingeplant werden.' };
 	if (code === 'ORIGINAL_NOT_FOUND')
 		return { status: 409, error: 'Das zugehörige Fundus-Piece ist nicht mehr verfügbar.' };
 	if (code === 'NOT_FOUND') return { status: 404, error: 'Der Eintrag wurde nicht gefunden.' };
 	if (code === 'INVALID_DURATION')
 		return { status: 400, error: 'Piece-Dauern müssen zwischen 0 und 1.440 Minuten liegen.' };
 	if (code.startsWith('INVALID_'))
 		return { status: 400, error: 'Mindestens ein Feld ist ungültig oder zu lang.' };
 	return { status: 500, error: 'Die Änderung konnte nicht gespeichert werden.' };
 }
 function attempt(intent: string, operation: () => unknown) {
 	try {
 		return { intent, success: 'Änderung gespeichert.', result: operation() };
 	} catch (cause) {
 		return fail(actionError(cause).status, { intent, ...actionError(cause) });
 	}
 }
 export const load: PageServerLoad = ({ locals, params, url }) => {
 	requireUser(locals.user);
 	const show = getShow(params.id);
 	if (!show) error(404, 'Sendung nicht gefunden');
 	const pieces = listPieces({
 		statuses: ['ready'],
 		query: url.searchParams.get('q') ?? '',
 		categoryId: url.searchParams.get('category') ?? ''
 	});
 	const usageContexts = getPieceUsageContexts(
 		pieces.map((piece) => piece.id),
 		show.id
 	);
 	return {
 		show,
 		startsAtLocal: berlinInput(show.startsAtUtc),
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
 		filters: {
 			query: url.searchParams.get('q') ?? '',
 			categoryId: url.searchParams.get('category') ?? '',
 			includeUsed: url.searchParams.get('includeUsed') === '1',
 			includePlanned: url.searchParams.get('includePlanned') === '1'
 		}
 	};
 };
 export const actions = {
 	saveMetadata: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('saveMetadata', () =>
 			saveShowMetadata(params.id, Number(data.get('revision')), {
 				title: text(data, 'title'),
 				startsAtUtc: berlinLocalToUtc(text(data, 'startsAt')),
 				twitchTitle: text(data, 'twitchTitle'),
 				announcementText: text(data, 'announcementText'),
 				status: text(data, 'status') as EditableShowStatus
 			})
 		);
 	},
 	addSection: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('addSection', () =>
 			addShowSection(params.id, Number(data.get('revision')), {
 				name: text(data, 'name'),
 				categoryId: text(data, 'categoryId') || null,
 				explicitDurationSeconds: nullableDuration(data)
 			})
 		);
 	},
 	updateSection: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('updateSection', () =>
 			updateShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')), {
 				name: text(data, 'name'),
 				categoryId: text(data, 'categoryId') || null,
 				explicitDurationSeconds: nullableDuration(data)
 			})
 		);
 	},
 	removeSection: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('removeSection', () =>
 			removeShowSection(params.id, text(data, 'sectionId'), Number(data.get('revision')))
 		);
 	},
 	moveSection: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('moveSection', () =>
 			moveShowSection(
 				params.id,
 				text(data, 'sectionId'),
 				Number(data.get('position')),
 				Number(data.get('revision'))
 			)
 		);
 	},
 	addUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('addUsage', () =>
 			addPieceUsage(params.id, Number(data.get('revision')), {
 				pieceId: text(data, 'pieceId'),
 				sectionId: text(data, 'sectionId') || null
 			})
 		);
 	},
 	updateUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('updateUsage', () =>
 			updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
 				title: text(data, 'title'),
 				durationSeconds: pieceDurationInSeconds(data),
 				ownNotes: text(data, 'ownNotes'),
 				intro: text(data, 'intro'),
 				research: text(data, 'research'),
 				moderation: text(data, 'moderation'),
 				transition: text(data, 'transition'),
 				presentation: text(data, 'presentation'),
 				presentationMode: text(data, 'presentationMode') as PieceUsageUpdate['presentationMode'],
 				presentationSourceLabel: text(data, 'presentationSourceLabel'),
 				presentationSourceUrl: text(data, 'presentationSourceUrl'),
 				presentationSourceTimecodeSeconds: text(data, 'presentationSourceTimecodeSeconds')
 					? Number(data.get('presentationSourceTimecodeSeconds'))
 					: null,
 				presentationTitle: text(data, 'presentationTitle'),
 				presentationDescription: text(data, 'presentationDescription'),
 				presentationImageUrl: text(data, 'presentationImageUrl'),
 				presentationSiteName: text(data, 'presentationSiteName')
 			})
 		);
 	},
 	duplicateUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('duplicateUsage', () =>
 			duplicatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
 		);
 	},
 	refreshUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('refreshUsage', () =>
 			refreshPieceUsageFromOriginal(params.id, text(data, 'usageId'), Number(data.get('revision')))
 		);
 	},
 	removeUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('removeUsage', () =>
 			removePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')))
 		);
 	},
 	moveUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
 		return attempt('moveUsage', () =>
 			movePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
 				sectionId: text(data, 'sectionId') || null,
 				position: Number(data.get('position'))
 			})
 		);
 	}
 } satisfies Actions;
@@ -0,0 +1,850 @@
 <script lang="ts">
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { replaceState } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import { flip } from 'svelte/animate';
 	import { onMount, untrack } from 'svelte';
 	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
 	import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 	let mobilePane = $state<'fundus' | 'plan'>('plan');
 	let dragged = $state<{ kind: 'piece' | 'section' | 'usage'; id: string } | null>(null);
 	let dropPreview = $state<
 		| { kind: 'section'; position: number }
 		| { kind: 'usage'; sectionId: string | null; position: number }
 		| null
 	>(null);
 	let dropTarget = $state<string | null>(null);
 	let moveSectionForm: HTMLFormElement;
 	let moveUsageForm: HTMLFormElement;
 	let addUsageForm: HTMLFormElement;
 	let draggedSectionId = $state('');
 	let draggedUsageId = $state('');
 	let draggedPieceId = $state('');
 	let dropSectionId = $state('');
 	let dropPosition = $state(0);
 	let copyMessage = $state('');
 	let showUsedPieces = $state(untrack(() => data.filters.includeUsed));
 	let showPlannedPieces = $state(untrack(() => data.filters.includePlanned));
 	let visiblePieces = $derived(
 		data.pieces.filter(
 			(piece) =>
 				(showUsedPieces || piece.sentHistory.length === 0) &&
 				(showPlannedPieces || !piece.isPlannedInCurrentShow)
 		)
 	);
 	let plannedCount = $derived(
 		data.show.sections.reduce((total, section) => total + section.usages.length, 0)
 	);
 	onMount(() => {
 		const syncFiltersFromHistory = () => {
 			const search = new URL(window.location.href).searchParams;
 			showUsedPieces = search.get('includeUsed') === '1';
 			showPlannedPieces = search.get('includePlanned') === '1';
 		};
 		window.addEventListener('popstate', syncFiltersFromHistory);
 		return () => window.removeEventListener('popstate', syncFiltersFromHistory);
 	});
 	function berlinDate(value: string | null) {
 		if (!value) return 'Termin offen';
 		return new Intl.DateTimeFormat('de-DE', {
 			timeZone: 'Europe/Berlin',
 			dateStyle: 'full',
 			timeStyle: 'short'
 		}).format(new Date(value));
 	}
 	function setSourceFilter(name: 'includeUsed' | 'includePlanned', checked: boolean) {
 		if (name === 'includeUsed') showUsedPieces = checked;
 		else showPlannedPieces = checked;
 		const url = new URL(page.url.href);
 		if (checked) url.searchParams.set(name, '1');
 		else url.searchParams.delete(name);
 		// This URL is cloned from the current page; only same-route filter parameters change.
 		// eslint-disable-next-line svelte/no-navigation-without-resolve
 		replaceState(url, page.state);
 	}
 	function startDrag(kind: 'piece' | 'section' | 'usage', id: string, event: DragEvent) {
 		dragged = { kind, id };
 		event.dataTransfer?.setData('text/plain', id);
 		if (event.dataTransfer) event.dataTransfer.effectAllowed = kind === 'piece' ? 'copy' : 'move';
 	}
 	function finishDrag() {
 		dragged = null;
 		dropPreview = null;
 		dropTarget = null;
 	}
 	function draggedTitle() {
 		if (!dragged) return '';
 		const draggedId = dragged.id;
 		if (dragged.kind === 'piece') {
 			return data.pieces.find((piece) => piece.id === draggedId)?.title ?? 'Piece';
 		}
 		if (dragged.kind === 'section') {
 			return data.show.sections.find((section) => section.id === draggedId)?.name ?? 'Abschnitt';
 		}
 		for (const section of data.show.sections) {
 			const usage = section.usages.find((item) => item.id === draggedId);
 			if (usage) return usage.title;
 		}
 		return data.show.reserve.find((usage) => usage.id === draggedId)?.title ?? 'Piece';
 	}
 	function positionAtPointer(event: DragEvent, position: number) {
 		const target = event.currentTarget as HTMLElement;
 		const bounds = target.getBoundingClientRect();
 		return event.clientY < bounds.top + bounds.height / 2 ? position : position + 1;
 	}
 	function previewSection(event: DragEvent, position: number) {
 		event.preventDefault();
 		if (dragged?.kind !== 'section') return;
 		dropPreview = { kind: 'section', position: positionAtPointer(event, position) };
 		dropTarget = null;
 	}
 	function previewUsage(
 		event: DragEvent,
 		sectionId: string | null,
 		position: number,
 		atPointer = true
 	) {
 		event.preventDefault();
 		if (!dragged || dragged.kind === 'section') return;
 		event.stopPropagation();
 		dropPreview = {
 			kind: 'usage',
 			sectionId,
 			position: atPointer ? positionAtPointer(event, position) : position
 		};
 		dropTarget = sectionId ?? 'reserve';
 	}
 	function dropAtPreview() {
 		if (!dropPreview) return;
 		if (dropPreview.kind === 'section') dropSection(dropPreview.position);
 		else dropUsage(dropPreview.sectionId, dropPreview.position);
 	}
 	function showsUsagePreview(sectionId: string | null, position?: number) {
 		return (
 			dropPreview?.kind === 'usage' &&
 			dropPreview.sectionId === sectionId &&
 			(position === undefined || dropPreview.position === position)
 		);
 	}
 	function dropSection(position: number) {
 		if (!dragged || dragged.kind !== 'section') return;
 		draggedSectionId = dragged.id;
 		dropPosition = position;
 		finishDrag();
 		setTimeout(() => moveSectionForm.requestSubmit());
 	}
 	function dropUsage(sectionId: string | null, position: number) {
 		if (!dragged || dragged.kind === 'section') return;
 		dropSectionId = sectionId ?? '';
 		dropPosition = position;
 		if (dragged.kind === 'piece') {
 			draggedPieceId = dragged.id;
 			finishDrag();
 			setTimeout(() => addUsageForm.requestSubmit());
 			return;
 		}
 		draggedUsageId = dragged.id;
 		finishDrag();
 		setTimeout(() => moveUsageForm.requestSubmit());
 	}
 	const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
 		const affected = formElement.closest<HTMLElement>(
 			'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
 		);
 		affected?.classList.add('is-updating');
 		if (submitter instanceof HTMLButtonElement) submitter.disabled = true;
 		return async ({ result, update }) => {
 			if (result.type === 'success') formElement.closest<HTMLDialogElement>('dialog')?.close();
 			await update({ reset: result.type === 'success', invalidateAll: true });
 			affected?.classList.remove('is-updating');
 			if (submitter instanceof HTMLButtonElement) submitter.disabled = false;
 		};
 	};
 	async function copyText(label: string, value: string) {
 		try {
 			await navigator.clipboard.writeText(value);
 			copyMessage = `${label} kopiert.`;
 		} catch {
 			copyMessage = 'Kopieren wurde vom Browser blockiert.';
 		}
 	}
 </script>
 <svelte:head><title>{data.show.title} | Sendungen | Sendewerk</title></svelte:head>
 <div class="page-wrap builder-page">
 	<header class="page-heading show-heading">
 		<div class="show-heading-copy">
 			<a class="back-link" href={resolve('/sendungen')}>← Sendungen</a>
 			<h1>{data.show.title}</h1>
 			<p class="show-date">
 				{data.show.startsAtUtc ? `${berlinDate(data.show.startsAtUtc)} Uhr` : 'Termin offen'}
 			</p>
 		</div>
 		<div class="show-summary">
 			<div><strong>{plannedCount}</strong><span>Pieces</span></div>
 			<div>
 				<strong>{formatDuration(data.show.totalDurationSeconds)}</strong><span>Planzeit</span>
 			</div>
 			<a class="live-link" href={resolve(`/live?show=${encodeURIComponent(data.show.id)}`)}
 				>Live-Steuerung <span>↗</span></a
 			>
 		</div>
 	</header>
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 	{#if form?.success}<div class="form-message success" role="status">{form.success}</div>{/if}
 	<div class="sr-only" role="status" aria-live="polite">{copyMessage}</div>
 	<details class="show-settings">
 		<summary>Sendungsdaten und Twitch-Texte</summary>
 		<form
 			use:enhance={enhanceCommand}
 			method="POST"
 			action="?/saveMetadata"
 			class="show-settings-form"
 		>
 			<input type="hidden" name="revision" value={data.show.revision} />
 			<label class="wide-field"
 				>Interner Titel<input
 					name="title"
 					required
 					maxlength="200"
 					value={data.show.title}
 				/></label
 			>
 			<label
 				>Termin<input name="startsAt" type="datetime-local" value={data.startsAtLocal} /><small
 					>Die Anzeige erfolgt immer in Europe/Berlin.</small
 				></label
 			>
 			<label
 				>Status<select name="status" value={data.show.status}
 					><option value="draft">Entwurf</option><option value="ready">Bereit</option><option
 						value="live">Live</option
 					></select
 				></label
 			>
 			<label class="wide-field"
 				>Twitch-Titel<span class="copy-field"
 					><input name="twitchTitle" maxlength="200" value={data.show.twitchTitle} /><button
 						type="button"
 						onclick={() => copyText('Twitch-Titel', data.show.twitchTitle)}>Kopieren</button
 					></span
 				></label
 			>
 			<label class="wide-field"
 				>Ankündigung<span class="copy-field"
 					><textarea name="announcementText" maxlength="20000" rows="4"
 						>{data.show.announcementText}</textarea
 					><button type="button" onclick={() => copyText('Ankündigung', data.show.announcementText)}
 						>Kopieren</button
 					></span
 				></label
 			>
 			<div class="wide-field settings-submit">
 				<span>{copyMessage}</span><button class="primary-button" type="submit"
 					>Sendungsdaten speichern</button
 				>
 			</div>
 		</form>
 	</details>
 	<div class="mobile-pane-switch" aria-label="Arbeitsbereich auswählen">
 		<button
 			class:active={mobilePane === 'fundus'}
 			aria-pressed={mobilePane === 'fundus'}
 			type="button"
 			onclick={() => (mobilePane = 'fundus')}>Fundus</button
 		>
 		<button
 			class:active={mobilePane === 'plan'}
 			aria-pressed={mobilePane === 'plan'}
 			type="button"
 			onclick={() => (mobilePane = 'plan')}>Ablauf</button
 		>
 	</div>
 	<div class="builder-workspace">
 		<section
 			class="builder-pane source-pane"
 			class:mobile-hidden={mobilePane !== 'fundus'}
 			aria-labelledby="source-title"
 		>
 			<header class="pane-heading">
 				<div>
 					<p class="eyebrow">Quelle</p>
 					<h2 id="source-title">Sendefertiger Fundus</h2>
 				</div>
 				<span>{visiblePieces.length}</span>
 			</header>
 			<form id="builder-filters" method="GET" class="builder-filter">
 				<label
 					><span class="sr-only">Fundus durchsuchen</span><input
 						type="search"
 						name="q"
 						value={data.filters.query}
 						placeholder="Fundus durchsuchen"
 					/></label
 				>
 				<label
 					><span class="sr-only">Abschnitt filtern</span><select name="category"
 						><option value="">Alle Abschnitte</option
 						>{#each data.taxonomy.categories as category (category.id)}<option
 								value={category.id}
 								selected={data.filters.categoryId === category.id}>{category.name}</option
 							>{/each}</select
 					></label
 				>
 				<button class="text-button" type="submit">Filtern</button>
 			</form>
 			<div class="builder-filter-options" aria-label="Fundusauswahl erweitern">
 				<label class="filter-checkbox">
 					<input
 						type="checkbox"
 						name="includeUsed"
 						value="1"
 						form="builder-filters"
 						checked={showUsedPieces}
 						onchange={(event) => setSourceFilter('includeUsed', event.currentTarget.checked)}
 					/>
 					<span>Auch verwendete Inhalte zeigen</span>
 				</label>
 				<label class="filter-checkbox">
 					<input
 						type="checkbox"
 						name="includePlanned"
 						value="1"
 						form="builder-filters"
 						checked={showPlannedPieces}
 						onchange={(event) => setSourceFilter('includePlanned', event.currentTarget.checked)}
 					/>
 					<span>Auch eingeplante Inhalte zeigen</span>
 				</label>
 			</div>
 			<div class="builder-source-list">
 				{#each visiblePieces as piece (piece.id)}
 					<article
 						class="builder-source-card"
 						class:is-dragging={dragged?.kind === 'piece' && dragged.id === piece.id}
 						style={`--category:${piece.categories[0]?.color ?? '#8b8f98'}`}
 					>
 						<div
 							class="source-drag-copy"
 							role="group"
 							aria-label={`${piece.title} in den Ablauf ziehen`}
 							draggable="true"
 							ondragstart={(event) => startDrag('piece', piece.id, event)}
 							ondragend={finishDrag}
 						>
 							<div>
 								<span class="category-label"
 									><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
 								><span>{formatClock(piece.durationSeconds)}</span>
 							</div>
 							<h3>{piece.title}</h3>
 							<p>
 								{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
 							</p>
 							{#if piece.isPlannedInCurrentShow}<span class="planned-label">Eingeplant</span>{/if}
 							<PieceUsageHistory history={piece.sentHistory} />
 							<small class="drag-hint">Ziehen oder Ziel auswählen</small>
 						</div>
 						<form
 							use:enhance={enhanceCommand}
 							method="POST"
 							action="?/addUsage"
 							class="source-add-form"
 						>
 							<input type="hidden" name="revision" value={data.show.revision} /><input
 								type="hidden"
 								name="pieceId"
 								value={piece.id}
 							/>
 							<label
 								><span class="sr-only">Ziel für {piece.title}</span><select
 									name="sectionId"
 									aria-label={`Ziel für ${piece.title}`}
 									><option value="">Reservebank</option
 									>{#each data.show.sections as section (section.id)}<option value={section.id}
 											>{section.name}</option
 										>{/each}</select
 								></label
 							>
 							<button class="secondary-button" type="submit">Hinzufügen</button>
 						</form>
 					</article>
 				{/each}
 			</div>
 			{#if !visiblePieces.length}<div class="empty-state">
 					<span aria-hidden="true">⌕</span>
 					<h2>Keine verfügbaren Pieces</h2>
 					<p>
 						Suchfilter ändern, ausgeblendete Inhalte einblenden oder Pieces im Fundus sendefertig
 						markieren.
 					</p>
 				</div>{/if}
 		</section>
 		<section
 			class="builder-pane run-pane"
 			class:mobile-hidden={mobilePane !== 'plan'}
 			aria-labelledby="run-title"
 		>
 			<header class="pane-heading">
 				<div>
 					<p class="eyebrow">Sendungsplan</p>
 					<h2 id="run-title">Ablauf</h2>
 				</div>
 				<span>{formatDuration(data.show.totalDurationSeconds)}</span>
 			</header>
 			<div class="run-list">
 				{#each data.show.sections as section, index (section.id)}
 					<div
 						class="section-drag-slot"
 						role="presentation"
 						ondragover={(event) => {
 							event.preventDefault();
 							event.stopPropagation();
 						}}
 						ondrop={(event) => {
 							event.stopPropagation();
 							dropAtPreview();
 						}}
 						animate:flip={{ duration: 180 }}
 					>
 						{#if dropPreview?.kind === 'section' && dropPreview.position === index}
 							<div class="drag-insert-preview section-insert-preview" data-drop-preview="section">
 								<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
 							</div>
 						{/if}
 						<article
 							class="run-section editable-run-section"
 							class:is-dragging={dragged?.kind === 'section' && dragged.id === section.id}
 							class:drop-ready={dropTarget === section.id}
 							style={`--category:${section.categoryColor ?? '#8b8f98'}`}
 							ondragover={(event) => {
 								if (dragged?.kind === 'section') previewSection(event, index);
 								else previewUsage(event, section.id, section.usages.length, false);
 							}}
 							ondrop={dropAtPreview}
 						>
 							<header
 								class="section-drag-handle"
 								role="group"
 								aria-label={`${section.name} verschieben`}
 								draggable="true"
 								ondragstart={(event) => startDrag('section', section.id, event)}
 								ondragend={finishDrag}
 							>
 								<div class="section-number">{String(index + 1).padStart(2, '0')}</div>
 								<div>
 									<span class="category-label"><i></i>{section.category ?? 'Offen'}</span>
 									<h3>{section.name}</h3>
 								</div>
 								<strong>{formatClock(section.durationSeconds)}</strong>
 							</header>
 							<div class="row-actions" aria-label={`Abschnitt ${section.name} verschieben`}>
 								<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
 									<input type="hidden" name="revision" value={data.show.revision} /><input
 										type="hidden"
 										name="sectionId"
 										value={section.id}
 									/><input type="hidden" name="position" value={index - 1} /><button
 										type="submit"
 										disabled={index === 0}
 										aria-label={`${section.name} nach oben`}>↑</button
 									>
 								</form>
 								<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
 									<input type="hidden" name="revision" value={data.show.revision} /><input
 										type="hidden"
 										name="sectionId"
 										value={section.id}
 									/><input type="hidden" name="position" value={index + 1} /><button
 										type="submit"
 										disabled={index === data.show.sections.length - 1}
 										aria-label={`${section.name} nach unten`}>↓</button
 									>
 								</form>
 							</div>
 							{#if section.usages.length}<div class="usage-list">
 									{#each section.usages as usage, usageIndex (usage.id)}
 										<div
 											class="usage-drag-slot"
 											role="presentation"
 											ondragover={(event) => {
 												event.preventDefault();
 												event.stopPropagation();
 											}}
 											ondrop={(event) => {
 												event.stopPropagation();
 												dropAtPreview();
 											}}
 											animate:flip={{ duration: 180 }}
 										>
 											{#if showsUsagePreview(section.id, usageIndex)}
 												<div
 													class="drag-insert-preview usage-insert-preview"
 													data-drop-preview="usage"
 												>
 													<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
 												</div>
 											{/if}
 											<div
 												class="usage-row editable-usage"
 												class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
 												role="group"
 												aria-label={`Verwendung ${usage.title}`}
 												ondragover={(event) => previewUsage(event, section.id, usageIndex)}
 												ondrop={(event) => {
 													event.stopPropagation();
 													dropAtPreview();
 												}}
 											>
 												<div
 													class="usage-drag-copy"
 													role="group"
 													aria-label={`${usage.title} verschieben`}
 													draggable="true"
 													ondragstart={(event) => {
 														event.stopPropagation();
 														startDrag('usage', usage.id, event);
 													}}
 													ondragend={finishDrag}
 												>
 													<strong>{usage.title}</strong><small
 														>{formatClock(usage.durationSeconds)} · sendungsspezifische Kopie</small
 													>
 												</div>
 												<div class="row-actions">
 													<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
 														<input type="hidden" name="revision" value={data.show.revision} /><input
 															type="hidden"
 															name="usageId"
 															value={usage.id}
 														/><input type="hidden" name="sectionId" value={section.id} /><input
 															type="hidden"
 															name="position"
 															value={usageIndex - 1}
 														/><button
 															type="submit"
 															disabled={usageIndex === 0}
 															aria-label={`${usage.title} nach oben`}>↑</button
 														>
 													</form>
 													<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
 														<input type="hidden" name="revision" value={data.show.revision} /><input
 															type="hidden"
 															name="usageId"
 															value={usage.id}
 														/><input type="hidden" name="sectionId" value={section.id} /><input
 															type="hidden"
 															name="position"
 															value={usageIndex + 1}
 														/><button
 															type="submit"
 															disabled={usageIndex === section.usages.length - 1}
 															aria-label={`${usage.title} nach unten`}>↓</button
 														>
 													</form>
 													<UsageEditorDialog
 														{usage}
 														revision={data.show.revision}
 														sectionId={section.id}
 														sections={data.show.sections}
 														error={form?.error}
 														{enhanceCommand}
 													/>
 												</div>
 											</div>
 										</div>
 									{/each}
 									{#if showsUsagePreview(section.id, section.usages.length)}
 										<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
 											<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
 										</div>
 									{/if}
 								</div>{:else}
 								{#if showsUsagePreview(section.id, 0)}
 									<div class="usage-list">
 										<div class="drag-insert-preview usage-insert-preview" data-drop-preview="usage">
 											<strong>{draggedTitle()}</strong><small>Hier einfügen</small>
 										</div>
 									</div>
 								{/if}
 								<div
 									class="section-placeholder"
 									role="group"
 									aria-label={`Leerer Abschnitt ${section.name}`}
 									ondragover={(event) => previewUsage(event, section.id, 0, false)}
 									ondrop={(event) => {
 										event.stopPropagation();
 										dropAtPreview();
 									}}
 								>
 									Leerer Abschnitt · Piece aus dem Fundus hinzufügen oder hierher ziehen
 								</div>
 							{/if}
 							<details class="section-editor">
 								<summary>Abschnitt bearbeiten</summary>
 								<form
 									use:enhance={enhanceCommand}
 									method="POST"
 									action="?/updateSection"
 									class="section-edit-form"
 								>
 									<input type="hidden" name="revision" value={data.show.revision} /><input
 										type="hidden"
 										name="sectionId"
 										value={section.id}
 									/><label
 										>Name<input name="name" required maxlength="200" value={section.name} /></label
 									><label
 										>Kategorie<select name="categoryId"
 											><option value="">Ohne Kategorie</option
 											>{#each data.taxonomy.categories as category (category.id)}<option
 													value={category.id}
 													selected={section.categoryId === category.id}>{category.name}</option
 												>{/each}</select
 										></label
 									><label
 										>Explizite Dauer in Sekunden<input
 											name="explicitDurationSeconds"
 											type="number"
 											min="0"
 											max="86400"
 											value={section.explicitDurationSeconds ?? ''}
 											placeholder="Summe der Pieces"
 										/></label
 									><button class="secondary-button" type="submit">Abschnitt speichern</button>
 								</form>
 								<form
 									use:enhance={enhanceCommand}
 									method="POST"
 									action="?/removeSection"
 									onsubmit={(event) =>
 										!confirm('Abschnitt samt Einplanungen entfernen?') && event.preventDefault()}
 								>
 									<input type="hidden" name="revision" value={data.show.revision} /><input
 										type="hidden"
 										name="sectionId"
 										value={section.id}
 									/><button class="text-button danger-text" type="submit"
 										>Abschnitt entfernen</button
 									>
 								</form>
 							</details>
 						</article>
 					</div>
 				{/each}
 				{#if dropPreview?.kind === 'section' && dropPreview.position === data.show.sections.length}
 					<div
 						class="drag-insert-preview section-insert-preview"
 						data-drop-preview="section"
 						role="group"
 						aria-label={`${draggedTitle()} hier einfügen`}
 						ondragover={(event) => event.preventDefault()}
 						ondrop={dropAtPreview}
 					>
 						<span>Hier einfügen</span><strong>{draggedTitle()}</strong>
 					</div>
 				{/if}
 			</div>
 			<form
 				use:enhance={enhanceCommand}
 				method="POST"
 				action="?/addSection"
 				class="add-section-form"
 			>
 				<input type="hidden" name="revision" value={data.show.revision} /><label
 					>Name<input name="name" required maxlength="200" placeholder="Neuer Abschnitt" /></label
 				><label
 					>Kategorie<select name="categoryId"
 						><option value="">Ohne Kategorie</option
 						>{#each data.taxonomy.categories as category (category.id)}<option value={category.id}
 								>{category.name}</option
 							>{/each}</select
 					></label
 				><label
 					>Explizite Dauer <input
 						name="explicitDurationSeconds"
 						type="number"
 						min="0"
 						max="86400"
 						placeholder="optional, Sekunden"
 					/></label
 				><button class="primary-button" type="submit">Abschnitt hinzufügen</button>
 			</form>
 			<section
 				class="reserve-box editable-reserve"
 				class:drop-ready={dropTarget === 'reserve'}
 				aria-label="Reservebank"
 				ondragover={(event) => previewUsage(event, null, data.show.reserve.length, false)}
 				ondrop={dropAtPreview}
 			>
 				<header>
 					<div>
 						<span aria-hidden="true">◇</span>
 						<div>
 							<strong>Reservebank</strong><small
 								>{data.show.reserve.length}
 								{data.show.reserve.length === 1 ? 'Piece' : 'Pieces'} · zählt nicht zur Planzeit</small
 							>
 						</div>
 					</div>
 				</header>
 				{#each data.show.reserve as usage, usageIndex (usage.id)}
 					<div
 						class="reserve-drag-slot"
 						role="presentation"
 						ondragover={(event) => {
 							event.preventDefault();
 							event.stopPropagation();
 						}}
 						ondrop={(event) => {
 							event.stopPropagation();
 							dropAtPreview();
 						}}
 						animate:flip={{ duration: 180 }}
 					>
 						{#if showsUsagePreview(null, usageIndex)}
 							<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
 								<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
 							</div>
 						{/if}
 						<div
 							class="reserve-usage"
 							class:is-dragging={dragged?.kind === 'usage' && dragged.id === usage.id}
 							role="group"
 							aria-label={`Reserve ${usage.title}`}
 							ondragover={(event) => previewUsage(event, null, usageIndex)}
 							ondrop={(event) => {
 								event.stopPropagation();
 								dropAtPreview();
 							}}
 						>
 							<div
 								class="usage-drag-copy"
 								role="group"
 								aria-label={`${usage.title} verschieben`}
 								draggable="true"
 								ondragstart={(event) => startDrag('usage', usage.id, event)}
 								ondragend={finishDrag}
 							>
 								<strong>{usage.title}</strong><small>{formatClock(usage.durationSeconds)}</small>
 							</div>
 							<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
 								<input type="hidden" name="revision" value={data.show.revision} /><input
 									type="hidden"
 									name="usageId"
 									value={usage.id}
 								/><input type="hidden" name="position" value="9999" /><label
 									><span class="sr-only">{usage.title} einplanen in</span><select
 										name="sectionId"
 										required
 										><option value="">Abschnitt wählen</option
 										>{#each data.show.sections as section (section.id)}<option value={section.id}
 												>{section.name}</option
 											>{/each}</select
 									></label
 								><button class="secondary-button" type="submit">Einplanen</button>
 							</form>
 							<form use:enhance={enhanceCommand} method="POST" action="?/removeUsage">
 								<input type="hidden" name="revision" value={data.show.revision} /><input
 									type="hidden"
 									name="usageId"
 									value={usage.id}
 								/><button
 									class="text-button danger-text"
 									type="submit"
 									aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
 								>
 							</form>
 							<UsageEditorDialog
 								{usage}
 								revision={data.show.revision}
 								sectionId=""
 								sections={data.show.sections}
 								error={form?.error}
 								{enhanceCommand}
 							/>
 						</div>
 					</div>
 				{/each}
 				{#if showsUsagePreview(null, data.show.reserve.length)}
 					<div class="drag-insert-preview reserve-insert-preview" data-drop-preview="usage">
 						<strong>{draggedTitle()}</strong><small>Hier in die Reserve einfügen</small>
 					</div>
 				{/if}
 				{#if !data.show.reserve.length}<p>
 						Pieces lassen sich hier parken, ohne die geplante Dauer zu erhöhen.
 					</p>{/if}
 			</section>
 		</section>
 	</div>
 	<form
 		bind:this={moveSectionForm}
 		use:enhance={enhanceCommand}
 		method="POST"
 		action="?/moveSection"
 		class="hidden-command-form"
 	>
 		<input type="hidden" name="revision" value={data.show.revision} /><input
 			type="hidden"
 			name="sectionId"
 			value={draggedSectionId}
 		/><input type="hidden" name="position" value={dropPosition} />
 	</form>
 	<form
 		bind:this={moveUsageForm}
 		use:enhance={enhanceCommand}
 		method="POST"
 		action="?/moveUsage"
 		class="hidden-command-form"
 	>
 		<input type="hidden" name="revision" value={data.show.revision} /><input
 			type="hidden"
 			name="usageId"
 			value={draggedUsageId}
 		/><input type="hidden" name="sectionId" value={dropSectionId} /><input
 			type="hidden"
 			name="position"
 			value={dropPosition}
 		/>
 	</form>
 	<form
 		bind:this={addUsageForm}
 		use:enhance={enhanceCommand}
 		method="POST"
 		action="?/addUsage"
 		class="hidden-command-form"
 	>
 		<input type="hidden" name="revision" value={data.show.revision} /><input
 			type="hidden"
 			name="pieceId"
 			value={draggedPieceId}
 		/><input type="hidden" name="sectionId" value={dropSectionId} />
 	</form>
 </div>
@@ -1,4 +1,5 @@
 import { expect, test, type Page } from '@playwright/test';
 import Database from 'better-sqlite3';
 import { readFileSync, readdirSync } from 'node:fs';
 import path from 'node:path';
@@ -29,6 +30,14 @@ async function setTheme(page: Page, theme: 'light' | 'dark') {
 	await page.evaluate((value) => localStorage.setItem('sendewerk-theme', value), theme);
 }
 async function openEditorialField(page: Page, heading: string) {
 	const field = page.locator('.editorial-field').filter({
 		has: page.getByRole('heading', { name: heading, exact: true })
 	});
 	await field.locator('.editorial-edit-button').click();
 	return field;
 }
 async function login(page: Page, email = adminEmail, password = adminPassword) {
 	await page.goto('/login');
 	await page.getByLabel('E-Mail').fill(email);
@@ -37,6 +46,12 @@ async function login(page: Page, email = adminEmail, password = adminPassword) {
 	await expect(page).toHaveURL(/\/fundus$/);
 }
 async function openSeededShow(page: Page) {
 	await page.goto('/sendungen');
 	await page.getByRole('link', { name: /Herbstsendung: Kleine Welten/ }).click();
 	await expect(page).toHaveURL(/\/sendungen\/show-october$/);
 }
 function latestMailLink(subject: string): string {
 	const outbox = process.env.SENDEWERK_E2E_OUTBOX_DIR;
 	if (!outbox) throw new Error('E2E-Outbox ist nicht konfiguriert.');
@@ -55,6 +70,124 @@ function latestMailLink(subject: string): string {
 	return match[0];
 }
 function addSentHistoryFixture(pieceId: string) {
 	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
 	if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
 	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
 	database.pragma('foreign_keys = ON');
 	const insertShow = database.prepare(
 		`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
 		 revision, created_at_utc, updated_at_utc) VALUES (?, ?, ?, '', '', 'completed', 1, ?, ?)`
 	);
 	const insertSection = database.prepare(
 		`INSERT INTO show_sections (id, show_id, name, category_id, position,
 		 explicit_duration_seconds, is_reserve_bank) VALUES (?, ?, 'Ablauf', NULL, 0, NULL, 0)`
 	);
 	const insertUsage = database.prepare(
 		`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
 		 duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
 		 transition_snapshot, presentation_snapshot, own_notes, is_reserve)
 		 VALUES (?, ?, ?, 0, 'done', 300, 'Historische Verwendung', '', '', '', '', '', '', 0)`
 	);
 	database.transaction(() => {
 		for (const [suffix, title, date] of [
 			['older', 'Rückblick im September', '2026-09-10T18:00:00.000Z'],
 			['latest', 'Rückblick im Oktober', '2026-10-10T18:00:00.000Z']
 		] as const) {
 			const showId = `e2e-history-${suffix}`;
 			const sectionId = `e2e-history-section-${suffix}`;
 			insertShow.run(showId, title, date, date, date);
 			insertSection.run(sectionId, showId);
 			insertUsage.run(`e2e-history-usage-${suffix}`, sectionId, pieceId);
 		}
 	})();
 	database.close();
 }
 function removeSentHistoryFixture() {
 	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
 	if (!dataDirectory) return;
 	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
 	database.pragma('foreign_keys = ON');
 	database.prepare("DELETE FROM shows WHERE id LIKE 'e2e-history-%'").run();
 	database.close();
 }
 function addPresentationFixture() {
 	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
 	if (!dataDirectory) throw new Error('E2E-Datenverzeichnis ist nicht konfiguriert.');
 	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
 	database.pragma('foreign_keys = ON');
 	const now = '2026-10-22T19:00:00.000Z';
 	database.transaction(() => {
 		database
 			.prepare(
 				`INSERT INTO shows (id, title, starts_at_utc, twitch_title, announcement_text, status,
 				 revision, created_at_utc, updated_at_utc)
 				 VALUES ('e2e-presentation', 'E2E Präsentation', ?, '', '', 'ready', 1, ?, ?)`
 			)
 			.run(now, now, now);
 		database
 			.prepare(
 				`INSERT INTO show_sections (id, show_id, name, category_id, position,
 				 explicit_duration_seconds, is_reserve_bank)
 				 VALUES ('e2e-presentation-section', 'e2e-presentation', 'Player', NULL, 0, NULL, 0),
 				 ('e2e-presentation-reserve', 'e2e-presentation', 'Reservebank', NULL, 1, NULL, 1)`
 			)
 			.run();
 		const insert = database.prepare(
 			`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
 			 duration_seconds, title_snapshot, intro_snapshot, research_snapshot, moderation_snapshot,
 			 transition_snapshot, presentation_snapshot, own_notes, is_reserve,
 			 presentation_mode_snapshot, presentation_source_label_snapshot,
 			 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
 			 presentation_title_meta_snapshot, presentation_description_snapshot,
 			 presentation_image_url_snapshot, presentation_site_name_snapshot,
 			 presentation_provider_snapshot, presentation_provider_id_snapshot)
 			 VALUES (?, 'e2e-presentation-section', NULL, ?, 'open', 300, ?, '', ?, ?, '', '', '', 0,
 			 'video', ?, ?, ?, ?, '', '', ?, ?, ?)`
 		);
 		insert.run(
 			'e2e-youtube',
 			0,
 			'YouTube Kurzlink',
 			'PRIVATE_RESEARCH_YOUTUBE',
 			'PRIVATE_MODERATION_YOUTUBE',
 			'YouTube',
 			'https://youtu.be/dQw4w9WgXcQ',
 			75,
 			'YouTube Vorschau',
 			'YouTube',
 			'youtube',
 			'dQw4w9WgXcQ'
 		);
 		insert.run(
 			'e2e-tiktok',
 			1,
 			'TikTok Hochformat',
 			'PRIVATE_RESEARCH_TIKTOK',
 			'PRIVATE_MODERATION_TIKTOK',
 			'TikTok',
 			'https://www.tiktok.com/@scout2015/video/6718335390845095173',
 			12,
 			'TikTok Vorschau',
 			'TikTok',
 			'tiktok',
 			'6718335390845095173'
 		);
 	})();
 	database.close();
 }
 function removePresentationFixture() {
 	const dataDirectory = process.env.SENDEWERK_E2E_DATA_DIR;
 	if (!dataDirectory) return;
 	const database = new Database(path.join(dataDirectory, 'e2e.sqlite'));
 	database.pragma('foreign_keys = ON');
 	database.prepare("DELETE FROM shows WHERE id = 'e2e-presentation'").run();
 	database.close();
 }
 test.beforeAll(async ({ browser }) => {
 	const page = await browser.newPage();
 	await page.goto('/');
@@ -170,6 +303,8 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await expect(page.locator('.sidebar')).toBeVisible();
 	await expect(page.locator('.mobile-navigation')).toBeHidden();
 	await expect(page.locator('.utility-navigation a')).toHaveText('Verwaltung');
 	await expect(page.locator('.piece-card')).toHaveCount(1);
 	await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
 	await expect(page.locator('.piece-card')).toHaveCount(4);
 	const firstRow = await page.locator('.piece-card').nth(0).boundingBox();
@@ -187,8 +322,8 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await page.getByLabel('Status').selectOption('preparing');
 	await page.getByRole('button', { name: 'Anwenden' }).click();
 	await expect(page.getByRole('heading', { name: 'Kein passendes Piece' })).toBeVisible();
-	await page.getByRole('link', { name: 'Filter zurücksetzen' }).click();
+	await page.getByRole('button', { name: 'Zurücksetzen' }).click();
-	await expect(page.locator('.piece-card')).toHaveCount(4);
+	await expect(page.locator('.piece-card')).toHaveCount(1);
 	await page.getByRole('button', { name: 'Darstellung: System' }).click();
 	await expect(page.locator('html')).toHaveAttribute('data-theme-preference', 'light');
@@ -199,15 +334,126 @@ test('desktop fundus is a compact, filterable list with persistent themes', asyn
 	await page.screenshot({ path: testInfo.outputPath('fundus-desktop-light.png'), fullPage: true });
 });
 test('sent and planned source filters stay independent and removing the last usage offers the piece again', async ({
 	page
 }, testInfo) => {
 	addSentHistoryFixture('piece-effects');
 	try {
 		await page.goto('/fundus');
 		await expect(
 			page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
 		).toHaveCount(0);
 		await page.evaluate(() => (document.body.dataset.filterDocument = 'stable'));
 		await page.getByLabel('Auch verwendete Inhalte zeigen').check();
 		await expect(
 			page.getByRole('heading', { name: 'Warum praktische Effekte wieder auffallen' })
 		).toHaveCount(0);
 		await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
 		const usedPiece = page
 			.locator('.piece-card')
 			.filter({ hasText: 'Warum praktische Effekte wieder auffallen' });
 		await expect(usedPiece).toBeVisible();
 		await expect(usedPiece).toContainText('Gesendet am 10.10.2026');
 		await expect(usedPiece).toContainText('+ 1 weitere');
 		await expect(usedPiece.getByRole('link', { name: 'Rückblick im Oktober' })).toHaveAttribute(
 			'href',
 			'/sendungen/e2e-history-latest'
 		);
 		await usedPiece.getByText('Vollständige Verwendungshistorie').click();
 		await expect(usedPiece.locator('.piece-usage-history li')).toHaveCount(2);
 		await expect(page.locator('body')).toHaveAttribute('data-filter-document', 'stable');
 		await page.getByRole('searchbox', { name: 'Fundus durchsuchen' }).fill('praktische Effekte');
 		await page.getByRole('button', { name: 'Anwenden' }).click();
 		await expect(page.getByLabel('Auch verwendete Inhalte zeigen')).toBeChecked();
 		await expect(usedPiece).toBeVisible();
 		await page.screenshot({
 			path: testInfo.outputPath('fundus-verwendungshistorie-desktop.png'),
 			fullPage: true
 		});
 		await page.goto('/sendungen');
 		await page.getByLabel('Titel').fill('E2E Filterprüfung');
 		await page.getByLabel('Ausgangspunkt').selectOption('template-default');
 		await page.getByRole('button', { name: 'Sendung anlegen' }).click();
 		await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
 		await page.getByRole('button', { name: 'Filtern' }).click();
 		const consolePiece = page
 			.locator('.builder-source-card')
 			.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
 		await consolePiece.getByRole('button', { name: 'Hinzufügen' }).click();
 		await expect(consolePiece).toHaveCount(0);
 		await page.getByPlaceholder('Fundus durchsuchen').fill('');
 		await page.getByRole('button', { name: 'Filtern' }).click();
 		await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
 		).toContainText('Eingeplant');
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
 		).toHaveCount(0);
 		await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
 		await page.getByRole('button', { name: 'Filtern' }).click();
 		await expect(page.getByLabel('Auch eingeplante Inhalte zeigen')).toBeChecked();
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
 		).toContainText('Eingeplant');
 		await page.getByPlaceholder('Fundus durchsuchen').fill('');
 		await page.getByRole('button', { name: 'Filtern' }).click();
 		await page.getByLabel('Auch eingeplante Inhalte zeigen').uncheck();
 		await page.getByLabel('Auch verwendete Inhalte zeigen').check();
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
 		).toHaveCount(0);
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Warum praktische Effekte wieder auffallen' })
 		).toContainText('Rückblick im Oktober');
 		await page.screenshot({
 			path: testInfo.outputPath('sendungsfilter-desktop.png'),
 			fullPage: true
 		});
 		await page
 			.locator('.reserve-usage')
 			.getByRole('button', { name: /aus Reserve entfernen/ })
 			.click();
 		await page.getByLabel('Auch verwendete Inhalte zeigen').uncheck();
 		await expect(
 			page
 				.locator('.builder-source-card')
 				.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' })
 		).toBeVisible();
 		await page.setViewportSize({ width: 390, height: 844 });
 		await page.getByRole('button', { name: 'Fundus', exact: true }).click();
 		await expectNoHorizontalOverflow(page);
 		await page.screenshot({
 			path: testInfo.outputPath('sendungsfilter-mobile.png'),
 			fullPage: true
 		});
 	} finally {
 		removeSentHistoryFixture();
 	}
 });
 test('desktop builder keeps the fundus beside the wider run sheet', async ({ page }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.goto('/fundus');
 	await setTheme(page, 'dark');
-	await page.goto('/sendungen');
+	await openSeededShow(page);
 	await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
-	await expect(page.getByRole('heading', { name: 'Sendungen', exact: true })).toBeVisible();
+	await expect(page.getByRole('heading', { name: 'Herbstsendung: Kleine Welten' })).toBeVisible();
 	await expect(page.getByText('Herbstsendung: Kleine Welten', { exact: true })).toBeVisible();
 	await expect(page.locator('.source-pane')).toBeVisible();
 	await expect(page.locator('.run-pane')).toBeVisible();
 	await expect(page.locator('.mobile-pane-switch')).toBeHidden();
@@ -228,7 +474,7 @@ test('desktop builder keeps the fundus beside the wider run sheet', async ({ pag
 test('narrow desktop retains the sidebar and switches the builder panes', async ({ page }) => {
 	await page.setViewportSize({ width: 960, height: 850 });
-	await page.goto('/sendungen');
+	await openSeededShow(page);
 	await expect(page.locator('.sidebar')).toBeVisible();
 	await expect(page.locator('.mobile-navigation')).toBeHidden();
@@ -246,7 +492,7 @@ test('mobile and tablet navigation do not obscure switchable content', async ({
 }, testInfo) => {
 	for (const width of [390, 768]) {
 		await page.setViewportSize({ width, height: 900 });
-		await page.goto('/sendungen');
+		await openSeededShow(page);
 		await expect(page.locator('.sidebar')).toBeHidden();
 		await expect(page.locator('.mobile-navigation')).toBeVisible();
@@ -266,10 +512,254 @@ test('mobile and tablet navigation do not obscure switchable content', async ({
 	}
 	await page.setViewportSize({ width: 390, height: 844 });
-	await page.goto('/sendungen');
+	await openSeededShow(page);
 	await page.screenshot({ path: testInfo.outputPath('sendungen-mobile.png'), fullPage: true });
 });
 test('a show can be planned from a template with independent usages and reserve', async ({
 	page
 }, testInfo) => {
 	await page.setViewportSize({ width: 1440, height: 1000 });
 	await page.goto('/sendungen');
 	await page.getByLabel('Titel').fill('E2E Planung Spiele und JC');
 	await page.getByLabel('Ausgangspunkt').selectOption('template-default');
 	await page.getByRole('button', { name: 'Sendung anlegen' }).click();
 	await expect(page).toHaveURL(/\/sendungen\/[a-f0-9-]+$/);
 	const showUrl = page.url();
 	await expect(page.locator('.run-section')).toHaveCount(5);
 	const firstSection = page.locator('.run-section').first();
 	const sectionTransfer = await page.evaluateHandle(() => new DataTransfer());
 	await firstSection.locator('.section-drag-handle').dispatchEvent('dragstart', {
 		dataTransfer: sectionTransfer
 	});
 	await page.locator('.run-section').nth(1).dispatchEvent('dragover', {
 		dataTransfer: sectionTransfer
 	});
 	await expect(page.locator('[data-drop-preview="section"]')).toContainText('Start');
 	await expect(firstSection).toHaveClass(/is-dragging/);
 	await firstSection.locator('.section-drag-handle').dispatchEvent('dragend', {
 		dataTransfer: sectionTransfer
 	});
 	await sectionTransfer.dispose();
 	await expect(page.locator('[data-drop-preview="section"]')).toHaveCount(0);
 	await page.getByPlaceholder('Fundus durchsuchen').fill('kleine Konsole');
 	await page.getByRole('button', { name: 'Filtern' }).click();
 	const source = page
 		.locator('.builder-source-card')
 		.filter({ hasText: 'Die kleine Konsole mit dem großen Dreh' });
 	await expect(page.locator('.builder-source-card')).toHaveCount(1);
 	const reactionSection = page
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) });
 	await page.locator('body').evaluate((body) => (body.dataset.builderDocument = 'stable'));
 	const sourceDragHandle = source.locator('.source-drag-copy');
 	const emptyReactionTarget = reactionSection.locator('.section-placeholder');
 	const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
 	await sourceDragHandle.dispatchEvent('dragstart', { dataTransfer });
 	await emptyReactionTarget.dispatchEvent('dragover', { dataTransfer });
 	const insertionPreview = reactionSection.locator('[data-drop-preview="usage"]');
 	await expect(insertionPreview).toContainText('Die kleine Konsole mit dem großen Dreh');
 	await expect(source).toHaveClass(/is-dragging/);
 	await expect(source).toHaveCSS('opacity', '0.45');
 	await emptyReactionTarget.dispatchEvent('drop', { dataTransfer });
 	await dataTransfer.dispose();
 	await expect(reactionSection.locator('.editable-usage')).toHaveCount(1);
 	await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
 	await expect(source).toHaveCount(0);
 	await page.getByLabel('Auch eingeplante Inhalte zeigen').check();
 	await expect(source).toContainText('Eingeplant');
 	await sourceDragHandle.dragTo(reactionSection.locator('.editable-usage'));
 	let usages = page
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
 	await expect(usages).toHaveCount(2);
 	await usages
 		.nth(0)
 		.getByRole('button', {
 			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
 		})
 		.click();
 	await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
 	const desktopEditorItems = await page
 		.locator('dialog[open] .usage-dialog-editor')
 		.evaluate((element) =>
 			Array.from(element.children)
 				.filter((child) => child.matches('section, button'))
 				.map((child) => child.getBoundingClientRect().top)
 		);
 	expect(Math.abs(desktopEditorItems[0] - desktopEditorItems[1])).toBeLessThan(2);
 	expect(desktopEditorItems[2]).toBeGreaterThan(desktopEditorItems[1]);
 	await page.screenshot({
 		path: testInfo.outputPath('verwendungseditor-desktop.png'),
 		fullPage: true
 	});
 	await page
 		.locator('dialog[open]')
 		.getByRole('button', { name: 'Aus Fundus aktualisieren' })
 		.click();
 	await expect(page.locator('dialog[open]')).toHaveCount(0);
 	usages = page
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
 	await usages
 		.nth(0)
 		.getByRole('button', {
 			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
 		})
 		.click();
 	await usages.nth(0).getByLabel('Titel').fill('Konsole als Auftakt');
 	await usages.nth(0).getByLabel('Dauer in Minuten').fill('5');
 	await usages.nth(0).getByLabel('Eigene Notizen').fill('Kurbel zuerst zeigen');
 	await usages.nth(0).getByRole('button', { name: 'Verwendung speichern' }).click();
 	await expect(reactionSection).toContainText('Konsole als Auftakt');
 	usages = page
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
 	await usages
 		.nth(1)
 		.getByRole('button', {
 			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
 		})
 		.click();
 	await usages.nth(1).getByLabel('Titel').fill('Konsole als Rückblick');
 	await usages.nth(1).getByLabel('Dauer in Minuten').fill('15');
 	await usages.nth(1).getByLabel('Eigene Notizen').fill('Andere Perspektive');
 	await usages.nth(1).getByRole('button', { name: 'Verwendung speichern' }).click();
 	await expect(page.locator('.show-summary')).toContainText('2 Std. 25 Min.');
 	usages = page
 		.locator('.run-section')
 		.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 		.locator('.editable-usage');
 	await usages
 		.nth(1)
 		.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
 		.click();
 	await usages.nth(1).getByRole('button', { name: 'Duplizieren' }).click();
 	await expect(reactionSection.locator('.editable-usage')).toHaveCount(3);
 	await expect(reactionSection.locator('.editable-usage').nth(2)).toContainText(
 		'Konsole als Rückblick'
 	);
 	await expect(page.locator('.show-summary')).toContainText('2 Std. 40 Min.');
 	const planTimeBeforeReserve = await page.locator('.show-summary').textContent();
 	await source.getByLabel(/Ziel für/).selectOption('');
 	await source.getByRole('button', { name: 'Hinzufügen' }).click();
 	await expect(page.locator('.reserve-usage')).toHaveCount(1);
 	expect(await page.locator('.show-summary').textContent()).toBe(planTimeBeforeReserve);
 	await page
 		.locator('.reserve-usage')
 		.getByRole('button', {
 			name: 'Die kleine Konsole mit dem großen Dreh bearbeiten und verschieben'
 		})
 		.click();
 	await expect(page.locator('dialog[open]')).toContainText('Sendungsspezifische Kopie');
 	await expect(
 		page.locator('dialog[open]').getByRole('button', { name: 'Duplizieren' })
 	).toBeVisible();
 	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 	const moveUp = page.getByRole('button', { name: 'Konsole als Rückblick nach oben' }).first();
 	await moveUp.focus();
 	await page.keyboard.press('Enter');
 	await expect(
 		page
 			.locator('.run-section')
 			.filter({ has: page.getByRole('heading', { name: 'JC / Reaction' }) })
 			.locator('.editable-usage strong')
 			.first()
 	).toHaveText('Konsole als Rückblick');
 	const reserveUsage = page.locator('.reserve-usage');
 	const reserveHandle = reserveUsage.locator('.usage-drag-copy');
 	const finalSectionTarget = page.locator('.run-section').last().locator('.section-placeholder');
 	const reserveTransfer = await page.evaluateHandle(() => new DataTransfer());
 	await reserveHandle.dispatchEvent('dragstart', { dataTransfer: reserveTransfer });
 	await finalSectionTarget.dispatchEvent('dragover', { dataTransfer: reserveTransfer });
 	await expect(page.locator('[data-drop-preview="usage"]')).toContainText(
 		'Die kleine Konsole mit dem großen Dreh'
 	);
 	await expect(reserveUsage).toHaveClass(/is-dragging/);
 	await finalSectionTarget.dispatchEvent('drop', { dataTransfer: reserveTransfer });
 	await reserveHandle.dispatchEvent('dragend', { dataTransfer: reserveTransfer });
 	await reserveTransfer.dispose();
 	await expect(page.locator('.reserve-usage')).toHaveCount(0);
 	await expect(page.locator('body')).toHaveAttribute('data-builder-document', 'stable');
 	await page.reload();
 	await expect(page.locator('.editable-usage')).toHaveCount(4);
 	const savedUsage = page.locator('.editable-usage').filter({ hasText: 'Konsole als Auftakt' });
 	await savedUsage
 		.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
 		.click();
 	await expect(savedUsage.getByLabel('Eigene Notizen')).toHaveValue('Kurbel zuerst zeigen');
 	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 	const duplicatedUsage = page
 		.locator('.editable-usage')
 		.filter({ hasText: 'Konsole als Rückblick' });
 	await expect(duplicatedUsage).toHaveCount(2);
 	await duplicatedUsage
 		.nth(1)
 		.getByRole('button', { name: 'Konsole als Rückblick bearbeiten und verschieben' })
 		.click();
 	await expect(duplicatedUsage.nth(1).getByLabel('Dauer in Minuten')).toHaveValue('15');
 	await expect(duplicatedUsage.nth(1).getByLabel('Eigene Notizen')).toHaveValue(
 		'Andere Perspektive'
 	);
 	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 	await page.setViewportSize({ width: 390, height: 844 });
 	await savedUsage
 		.getByRole('button', { name: 'Konsole als Auftakt bearbeiten und verschieben' })
 		.click();
 	const mobileEditorItems = await page
 		.locator('dialog[open] .usage-dialog-editor')
 		.evaluate((element) =>
 			Array.from(element.children)
 				.filter((child) => child.matches('section, button'))
 				.map((child) => child.getBoundingClientRect().top)
 		);
 	expect(mobileEditorItems[1]).toBeGreaterThan(mobileEditorItems[0]);
 	expect(mobileEditorItems[2]).toBeGreaterThan(mobileEditorItems[1]);
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({
 		path: testInfo.outputPath('verwendungseditor-mobile.png'),
 		fullPage: true
 	});
 	await page
 		.locator('dialog[open]')
 		.getByRole('button', { name: 'Entfernen' })
 		.scrollIntoViewIfNeeded();
 	await expect(
 		page.locator('dialog[open]').getByRole('button', { name: 'Entfernen' })
 	).toBeVisible();
 	await page
 		.locator('dialog[open] form[action="?/updateUsage"] input[name="revision"]')
 		.evaluate((element) => ((element as HTMLInputElement).value = '1'));
 	await page.locator('dialog[open]').getByRole('button', { name: 'Verwendung speichern' }).click();
 	await expect(page.locator('dialog[open]').getByRole('alert')).toContainText(
 		'inzwischen geändert'
 	);
 	await page.locator('dialog[open]').getByRole('button', { name: 'Editor schließen' }).click();
 	await page.getByRole('button', { name: 'Ablauf', exact: true }).click();
 	await page.getByPlaceholder('Neuer Abschnitt').fill('Finales Spiel');
 	await page.getByRole('button', { name: 'Abschnitt hinzufügen' }).click();
 	await expect(page.getByRole('heading', { name: 'Finales Spiel' })).toBeVisible();
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({ path: testInfo.outputPath('sendungsbau-mobile.png'), fullPage: true });
 	await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
 	await expect(
 		page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
 	).toBeVisible();
 	await page.goto(showUrl);
 });
 test('all work areas fit at required widths in light and dark mode', async ({ page }, testInfo) => {
 	for (const viewport of viewports) {
 		await page.setViewportSize({ width: viewport.width, height: viewport.height });
@@ -296,7 +786,7 @@ test('all work areas fit at required widths in light and dark mode', async ({ pa
 test('long titles and longer fundus lists reflow without overflow', async ({ page }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.goto('/fundus');
-	await expect(page.locator('.piece-card')).toHaveCount(4);
+	await expect(page.locator('.piece-card')).toHaveCount(1);
 	await page.evaluate(() => {
 		const list = document.querySelector('.piece-grid');
 		const rows = Array.from(document.querySelectorAll('.piece-card'));
@@ -310,7 +800,7 @@ test('long titles and longer fundus lists reflow without overflow', async ({ pag
 		}
 	});
-	await expect(page.locator('.piece-card')).toHaveCount(16);
+	await expect(page.locator('.piece-card')).toHaveCount(4);
 	await expectNoHorizontalOverflow(page);
 	await page.setViewportSize({ width: 390, height: 844 });
 	await expectNoHorizontalOverflow(page);
@@ -352,22 +842,167 @@ test('inbox, archive and administration stay concise', async ({ page }) => {
 	expect(boxes[1]?.y).toBe(boxes[2]?.y);
 });
-test('live preview retains its existing readable controls', async ({ page }) => {
+test('validated YouTube and TikTok players switch without exposing private fields', async ({
-	await page.setViewportSize({ width: 1280, height: 900 });
+	page
-	await page.goto('/live');
+}, testInfo) => {
 	addPresentationFixture();
 	try {
 		await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
 			route.fulfill({
 				contentType: 'text/html',
 				body: '<!doctype html><title>YouTube Test</title>'
 			})
 		);
 		await page.context().route('https://www.tiktok.com/player/**', (route) =>
 			route.fulfill({
 				contentType: 'text/html',
 				body: '<!doctype html><title>TikTok Test</title>'
 			})
 		);
 		await page.goto('/live?show=e2e-presentation');
 		const popupPromise = page.waitForEvent('popup');
 		await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
 		const output = await popupPromise;
 		await output.waitForLoadState('networkidle');
 		await expect(output.getByText('Bereit für den nächsten Inhalt')).toBeVisible();
 		await page.getByRole('button', { name: 'YouTube Kurzlink präsentieren' }).click();
 		const youtube = output.locator('iframe[title="YouTube Vorschau"]');
 		await expect(youtube).toHaveAttribute(
 			'src',
 			'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?start=75'
 		);
 		await expect(output.locator('.output-connection')).toHaveClass(/sr-only/);
 		const publicState = await output.evaluate(async () =>
 			JSON.stringify(await fetch(`${location.pathname}/state`).then((response) => response.json()))
 		);
 		expect(publicState).not.toContain('PRIVATE_RESEARCH');
 		expect(publicState).not.toContain('PRIVATE_MODERATION');
 		await page.getByRole('button', { name: 'TikTok Hochformat präsentieren' }).click();
 		await expect(youtube).toHaveCount(0);
 		await expect(output.locator('iframe[title="TikTok Vorschau"]')).toHaveAttribute(
 			'src',
 			'https://www.tiktok.com/player/v1/6718335390845095173?autoplay=0&controls=1'
 		);
 		await expect(output.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
 			'href',
 			'https://www.tiktok.com/@scout2015/video/6718335390845095173'
 		);
 		await output.setViewportSize({ width: 390, height: 844 });
 		await expectNoHorizontalOverflow(output);
 		await output.screenshot({
 			path: testInfo.outputPath('heinzlive-video-mobile.png'),
 			fullPage: true
 		});
 		await output.close();
 	} finally {
 		removePresentationFixture();
 	}
 });
 test('live control persists state and exposes only explicit presentation data', async ({
 	page,
 	browser
 }, testInfo) => {
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.goto('/fundus?q=kleine+Konsole&includePlanned=1');
 	await page.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' }).click();
 	const png = Buffer.from(
 		'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
 		'base64'
 	);
 	await page.getByLabel('Bild', { exact: true }).setInputFiles({
 		name: 'live-konsole.png',
 		mimeType: 'image/png',
 		buffer: png
 	});
 	await page.getByLabel('Alternativtext').fill('Kleine Konsole im Live-Bild');
 	await page.getByRole('button', { name: 'Bild hochladen' }).click();
 	await page.goto('/live?show=show-october');
 	await expect(page.getByText('Noch nicht gestartet.')).toBeVisible();
 	await page.getByRole('button', { name: 'Sendung starten' }).click();
 	await expect(page.locator('#current-title')).toHaveText('Die kleine Konsole mit dem großen Dreh');
 	await expect(
 		page.getByText('Herstellerangaben gegen unabhängige Tests prüfen')
 	).not.toBeVisible();
 	await expect(page.getByText('Vorschau · Live-Modus', { exact: true })).toBeVisible();
 	await expect(page.getByText('Eine Kurbel, ein gelber Knopf und sehr viel Charme')).toBeVisible();
 	const before = await page
 		.locator('.live-current')
 		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
 	await page.getByRole('button', { name: 'Schrift vergrößern' }).click();
-	const after = await page
+	await page.reload();
 	const restored = await page
 		.locator('.live-current')
 		.evaluate((element) => getComputedStyle(element).getPropertyValue('--prompt-size'));
-	expect(after).not.toBe(before);
+	expect(restored).not.toBe(before);
-	await page.getByText('Recherche öffnen').click();
+	await page.getByText('Manuelle Recherche öffnen').click();
 	await expect(page.locator('.research-details')).toHaveAttribute('open', '');
 	const [popup] = await Promise.all([
 		page.waitForEvent('popup'),
 		page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click()
 	]);
 	await popup.waitForURL(/\/heinzlive\/[A-Za-z0-9_-]+$/);
 	const outputUrl = popup.url();
 	const anonymous = await browser.newContext();
 	const output = await anonymous.newPage();
 	await output.goto(outputUrl);
 	await expect(
 		output.getByRole('heading', { name: 'Bereit für den nächsten Inhalt' })
 	).toBeVisible();
 	await page.getByRole('button', { name: 'Präsentieren', exact: true }).click();
 	await expect(
 		output.getByRole('heading', { name: 'Die kleine Konsole mit dem großen Dreh' })
 	).toBeVisible({
 		timeout: 10_000
 	});
 	await expect(output.getByText('Weniger Leistung, mehr Idee.')).toBeVisible();
 	await expect(output.getByAltText('Kleine Konsole im Live-Bild')).toBeVisible();
 	await output.screenshot({ path: testInfo.outputPath('heinzlive-output.png'), fullPage: true });
 	const outputHtml = await output.content();
 	expect(outputHtml).not.toContain('Herstellerangaben');
 	expect(outputHtml).not.toContain('Erst Formfaktor zeigen');
 	expect(outputHtml).not.toContain(adminEmail);
 	expect(outputHtml).not.toContain('live-konsole.png');
 	const outputState = await anonymous.request.get(`${outputUrl}/state`);
 	expect(outputState.status()).toBe(200);
 	const outputJson = await outputState.text();
 	expect(outputJson).toContain('Weniger Leistung');
 	expect(outputJson).not.toContain('Herstellerangaben');
 	expect(outputJson).not.toContain('Moderationsstichpunkte');
 	expect(outputJson).not.toContain('live-konsole.png');
 	await page.getByRole('button', { name: 'Als Nächstes' }).click();
 	await expect(page.locator('.next-card')).toContainText('Pixelart');
 	await page.getByRole('button', { name: 'Erledigen und weiter' }).click();
 	await expect(page.locator('.live-current')).toContainText('Pixelart');
 	await page.getByRole('button', { name: 'Überspringen' }).click();
 	await page.getByRole('button', { name: 'Zurück' }).click();
 	await expect(page.locator('.live-current')).toContainText('Pixelart');
 	await output.route('**/state', (route) => route.abort());
 	await expect(output.getByText('Verbindung unterbrochen')).toBeVisible({ timeout: 5_000 });
 	await output.unroute('**/state');
 	await expect(output.getByText('Verbunden')).toBeVisible({ timeout: 5_000 });
 	await page.setViewportSize({ width: 390, height: 844 });
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({
 		path: testInfo.outputPath('live-controller-mobile.png'),
 		fullPage: true
 	});
 	await page.setViewportSize({ width: 1280, height: 900 });
 	await page.evaluate(() => {
 		window.open = () => null;
 	});
 	await page.getByRole('button', { name: 'Präsentationsfenster öffnen' }).click();
 	await expect(
 		page.getByText('Popup blockiert. Bitte Popups erlauben und erneut öffnen.')
 	).toBeVisible();
 	await anonymous.close();
 	await popup.close();
 	await expectNoHorizontalOverflow(page);
 });
@@ -387,13 +1022,20 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await expect(page).toHaveURL(/\/fundus$/);
 	await page.getByRole('heading', { name: 'E2E Fundstück mit Markdown' }).click();
 	await expect(page).toHaveURL(pieceUrl);
 	await page.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
 	await page
 		.getByLabel('Kurzbeschreibung')
 		.fill('Persistiert nach Neuladen und ist gezielt suchbar.');
 	await page.getByLabel('Status').selectOption('ready');
-	await page.getByLabel('Dauer in Sekunden').fill('615');
+	await page.getByLabel('Dauer in Minuten').fill('10.25');
 	await page.getByLabel('Gaming').check();
 	await openEditorialField(page, 'Eigene Gedanken & Recherche');
 	await page.getByLabel('Private Recherche').fill('Nur intern: **Hintergrund prüfen**.');
 	await openEditorialField(page, 'Moderationsstichpunkte');
 	await page.getByLabel('Moderationsstichpunkte').fill('Den Kern in zwei Sätzen erklären.');
 	await expect(page.getByLabel('Private Recherche')).toBeVisible();
 	await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
 	await openEditorialField(page, 'Präsentationstext');
 	await page
 		.getByLabel('Präsentationstext')
 		.fill('## Sichere Vorschau\n\n<script>globalThis.e2eXss = true</script> **sichtbar**');
@@ -405,10 +1047,18 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	await page.waitForTimeout(1_200);
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert');
 	await page
 		.locator('.editorial-field')
 		.filter({ has: page.getByRole('heading', { name: 'Präsentationstext', exact: true }) })
 		.getByRole('button', { name: 'Lesen' })
 		.click();
 	await expect(page.locator('.markdown-preview script')).toHaveCount(0);
 	await expect(page.locator('.markdown-preview').last()).toContainText('Sichere Vorschau');
 	await page.reload();
 	await expect(page.getByLabel('Titel')).toHaveValue('E2E Fundstück mit Markdown');
 	await page.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
 	await expect(page.getByLabel('Dauer in Minuten')).toHaveValue('10.25');
 	await openEditorialField(page, 'Eigene Gedanken & Recherche');
 	await expect(page.getByLabel('Private Recherche')).toHaveValue(
 		'Nur intern: **Hintergrund prüfen**.'
 	);
@@ -439,6 +1089,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	await concurrent.goto(pieceUrl);
 	await page.getByLabel('Titel').fill('E2E Fundstück, extern aktualisiert');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	await concurrent.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
 	await concurrent
 		.getByLabel('Kurzbeschreibung')
 		.fill('Diese veraltete Änderung darf nicht gewinnen.');
@@ -447,6 +1098,7 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 	});
 	await concurrent.reload();
 	await expect(concurrent.getByLabel('Titel')).toHaveValue('E2E Fundstück, extern aktualisiert');
 	await concurrent.getByRole('button', { name: 'Einordnung bearbeiten' }).click();
 	await expect(concurrent.getByLabel('Kurzbeschreibung')).not.toHaveValue(
 		'Diese veraltete Änderung darf nicht gewinnen.'
 	);
@@ -471,12 +1123,125 @@ test('pieces autosave safely, detect conflicts and protect uploaded images', asy
 		'Kopie von E2E Fundstück, extern aktualisiert'
 	);
 	await page.context().setOffline(true);
 	await page.getByLabel('Titel').fill('Kopie mit unterbrochener Verbindung');
 	await expect(page.locator('.save-indicator')).toContainText('Speichern fehlgeschlagen', {
 		timeout: 10_000
 	});
 	await page.context().setOffline(false);
 	await page.getByRole('button', { name: 'Jetzt speichern' }).click();
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	await page.setViewportSize({ width: 390, height: 844 });
 	await setTheme(page, 'dark');
 	await page.reload();
 	await page.getByRole('button', { name: 'Quellen', exact: true }).click();
 	await expect(page.getByRole('heading', { name: 'Quellen', exact: true })).toBeVisible();
 	await page.getByRole('button', { name: 'Quellen schließen' }).click();
 	await expectNoHorizontalOverflow(page);
 	await page.screenshot({
 		path: testInfo.outputPath('piece-editor-mobile-dark.png'),
 		fullPage: true
 	});
 });
 test('a quickly captured video can be written and previewed before classification', async ({
 	page
 }) => {
 	await page.context().route('https://www.youtube-nocookie.com/**', (route) =>
 		route.fulfill({
 			contentType: 'text/html',
 			body: '<!doctype html><title>YouTube Test</title>'
 		})
 	);
 	await page.goto('/eingang');
 	await page.getByLabel('Titel oder Gedanke').fill('Schnelles Video-Fundstück');
 	await page.getByLabel('Link').fill('https://youtu.be/dQw4w9WgXcQ');
 	await page.getByRole('button', { name: 'Aufnehmen und öffnen' }).click();
 	await expect(page).toHaveURL(/\/fundus\/[a-f0-9-]+$/);
 	await expect(page.getByRole('link', { name: 'Original öffnen' })).toHaveAttribute(
 		'href',
 		'https://youtu.be/dQw4w9WgXcQ'
 	);
 	await expect(page.getByLabel('Status')).toBeHidden();
 	await openEditorialField(page, 'Eigene Gedanken & Recherche');
 	await page
 		.getByLabel('Private Recherche')
 		.fill('Warum funktioniert der Einstieg so unmittelbar?');
 	await openEditorialField(page, 'Moderationsstichpunkte');
 	await page
 		.getByLabel('Moderationsstichpunkte')
 		.fill('Erst Clip zeigen, dann die Beobachtung öffnen.');
 	await expect(page.getByLabel('Private Recherche')).toBeVisible();
 	await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
 	await page.getByLabel('Video').check();
 	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	const previewPromise = page.waitForEvent('popup');
 	await page.getByRole('link', { name: 'Präsentation testen' }).click();
 	const preview = await previewPromise;
 	await expect(preview.locator('iframe[title="Schnelles Video-Fundstück"]')).toHaveAttribute(
 		'src',
 		'https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ'
 	);
 	await preview.close();
 	await page.setViewportSize({ width: 390, height: 844 });
 	await page.getByRole('button', { name: 'Präsentation', exact: true }).click();
 	await expect(page.getByLabel('Video')).toBeVisible();
 	await page.getByRole('button', { name: 'Präsentation schließen' }).click();
 	await expect(page.getByLabel('Private Recherche')).toBeVisible();
 	await expectNoHorizontalOverflow(page);
 });
 test('link preview uses one existing source, persists manual fields and isolates its test view', async ({
 	page
 }, testInfo) => {
 	await page.goto('/fundus/piece-console');
 	await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
 	await page.getByLabel('Linkvorschau').check();
 	await page.getByRole('combobox', { name: 'Quelle', exact: true }).selectOption('0');
 	await page.getByLabel('Titel', { exact: true }).last().fill('Manuell korrigierte Linkvorschau');
 	await page.getByLabel('Anreißer').fill('Ein kurzer manueller Anreißer ohne Vorschaubild.');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	await page.reload();
 	await page.getByRole('button', { name: 'Präsentation bearbeiten' }).click();
 	await expect(page.getByLabel('Linkvorschau')).toBeChecked();
 	await expect(page.getByLabel('Titel', { exact: true }).last()).toHaveValue(
 		'Manuell korrigierte Linkvorschau'
 	);
 	const previewPromise = page.waitForEvent('popup');
 	await page.getByRole('link', { name: 'Präsentation testen' }).click();
 	const preview = await previewPromise;
 	await preview.waitForLoadState('networkidle');
 	await expect(preview.getByText('Isolierte Testansicht')).toBeVisible();
 	await expect(
 		preview.getByRole('heading', { name: 'Manuell korrigierte Linkvorschau' })
 	).toBeVisible();
 	await expect(preview.getByText('Ein kurzer manueller Anreißer ohne Vorschaubild.')).toBeVisible();
 	await expect(preview.locator('.output-link-image')).toHaveCount(0);
 	await preview.screenshot({
 		path: testInfo.outputPath('linkvorschau-desktop.png'),
 		fullPage: true
 	});
 	await preview.setViewportSize({ width: 390, height: 844 });
 	await expectNoHorizontalOverflow(preview);
 	await preview.screenshot({
 		path: testInfo.outputPath('linkvorschau-mobile.png'),
 		fullPage: true
 	});
 	await preview.close();
 	await page.locator('.source-row').first().getByLabel('URL').fill('http://127.0.0.1/private');
 	await expect(page.locator('.save-indicator')).toContainText('Gespeichert', { timeout: 10_000 });
 	const blockedPreview = page.waitForResponse((response) =>
 		response.url().includes('?/loadPreview')
 	);
 	await page.getByRole('button', { name: 'Vorschau laden' }).click();
 	expect((await blockedPreview).status()).toBe(400);
 	await expect(page.getByRole('alert')).toContainText('Interne oder private Netzwerkziele');
 });
Author	SHA1	Message	Date
hnzio	25da870601	Release 0.5.2	2026-10-22 13:51:30 +02:00
hnzio	fb24d171ae	Release 0.5.1	2026-10-22 07:56:25 +02:00
hnzio	5a9d7735d4	Release 0.5.0	2026-10-22 00:28:49 +02:00
hnzio	4042fe6a64	Release 0.4.0	2026-10-21 23:52:05 +02:00