Refine live controls and compact show cards

CloudronManifest.json

@@ -3,7 +3,7 @@
 	"title": "Sendewerk",
 	"description": "Redaktionelle Planung und Durchführung von heinzlive-Sendungen.",
 	"tagline": "Vom Fundstück bis zur Livesendung",
-	"version": "0.5.0",
+	"version": "0.5.12",
 	"healthCheckPath": "/healthz",
 	"httpPort": 3000,
 	"addons": {

THIRD_PARTY_NOTICES.md

@@ -0,0 +1,11 @@
+# Third-party notices
+
+## Font Awesome Pro Plus 7.0.0
+
+The icon metadata in `src/lib/icons/classic-regular.ts` and the SVG sprite in
+`static/icons/classic-regular.svg` are derived from Font Awesome Pro Plus 7.0.0
+Classic Regular. Font Awesome Pro is commercial software and remains subject to
+the Font Awesome Pro commercial license:
+https://fontawesome.com/license
+
+The Sendewerk MIT license does not apply to that icon data.

docs/ACCEPTANCE.md

@@ -215,3 +215,294 @@
   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
+
+## Oberflächenrelease 0.5.4
+
+| Kriterium                                  | Nachweis                                                                                       | Stand                 |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------------- | --------------------- |
+| Klare Hierarchie in beiden Themes          | Eingang, Fundus, Editor, Sendungsplan und Live-Steuerung in Light/Dark visuell kontrolliert    | erfüllt am 22.10.2026 |
+| Exakte heinzlive-Darkmode-Farben           | berechnete Theme-Tokens und Screenshots der dunklen Arbeitsansichten geprüft                   | erfüllt am 22.10.2026 |
+| Responsive Darstellung ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln auf allen gezielt geprüften Ansichten    | erfüllt am 22.10.2026 |
+| Sendungsplan-Aktionen bleiben erreichbar   | drei sichtbare Aktionen einer Planzeile liegen waagerecht auf gleicher Höhe; Mobilbild geprüft | erfüllt am 22.10.2026 |
+| Fokus und reduzierte Bewegung              | sichtbarer Cyan-Fokusring und bestehende `prefers-reduced-motion`-Regeln im Stylesheet geprüft | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenrelease 0.5.4
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- gezielter Chromium-Lauf für Eingang, Fundus, Piece-Editor, Sendungsplan und
+  Live-Steuerung bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne
+  Konsolenfehler oder horizontalen Seitenüberlauf
+- Desktop- und Mobilaufnahmen aller genannten Ansichten visuell kontrolliert
+- vollständige Unit- und E2E-Matrix nicht erneut ausgeführt, weil dieser Release
+  ausschließlich Darstellung und redaktionelle Kurztexte verändert
+- `git diff --check`: erfolgreich
+
+## Oberflächenkorrektur 0.5.5
+
+| Kriterium                             | Nachweis                                                                                    | Stand                 |
+| ------------------------------------- | ------------------------------------------------------------------------------------------- | --------------------- |
+| Nachtblau und Glaswirkung erkennbar   | berechnete Transparenz/Unschärfe und Desktop-/Mobilaufnahmen in Darkmode geprüft            | erfüllt am 22.10.2026 |
+| Schreibfelder im Ruhezustand sichtbar | deckende Feldfarbe, feine Kontur, Innenabstand und Textcursor im Piece-Editor geprüft       | erfüllt am 22.10.2026 |
+| Goldener Tastaturfokus                | berechnete Fokusfarbe und Fokus-Schatten am Titelfeld geprüft; Cyanrahmen nicht mehr aktiv  | erfüllt am 22.10.2026 |
+| Inhaltsgerechte Feldhöhen             | kurze Einleitung ist niedriger als ausführliche Moderationsfläche; beide bleiben skalierbar | erfüllt am 22.10.2026 |
+| Lightmode und Smartphone erhalten     | fünf Arbeitsansichten bei 1440 × 1000 und 390 × 844 Pixeln ohne Seitenüberlauf geprüft      | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.5
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- gezielter Chromium-Lauf in Light/Dark und Desktop/Mobil ohne Konsolenfehler
+  oder horizontalen Seitenüberlauf; Glas-, Feld- und Fokuswerte zusätzlich
+  programmatisch geprüft
+- vollständige Unit- und E2E-Matrix gemäß Auftrag nicht erneut ausgeführt
+- `git diff --check`: erfolgreich
+
+## Oberflächenkorrektur 0.5.6
+
+| Kriterium                                     | Nachweis                                                                                          | Stand                 |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
+| Gold-/Violettlicht und Glasflächen sichtbar   | Fundus und Editor in Light/Dark auf Desktop und Mobil visuell sowie über berechnete Werte geprüft | erfüllt am 22.10.2026 |
+| Schreibflächen ruhig und eindeutig abgegrenzt | deckende Feldfarbe, Kontur und goldener Fokus im geöffneten Piece-Editor geprüft                  | erfüllt am 22.10.2026 |
+| Neuanlage und Suche unmittelbar erreichbar    | sichtbare Fundusaktionen sowie geöffnete Vorlagenauswahl auf Desktop und Mobil geprüft            | erfüllt am 22.10.2026 |
+| Zusatzfilter und Zeilenaktionen zugänglich    | native Aufklappelemente für Filter und Aktionen per Browserinteraktion geprüft                    | erfüllt am 22.10.2026 |
+| Funduszeilen per Tastatur zu öffnen           | erster Titeleintrag fokussiert, mit Eingabetaste geöffnet und Editoraufruf geprüft                | erfüllt am 22.10.2026 |
+| Lightmode und Smartphone ohne Seitenüberlauf  | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes                            | erfüllt am 22.10.2026 |
+
+## Ausgeführte Prüfungen Oberflächenkorrektur 0.5.6
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- gezielter Chromium-Lauf für Fundus und geöffneten Piece-Editor bei
+  1440 × 1000 und 390 × 844 Pixeln in Light/Dark ohne Konsolenfehler oder
+  horizontalen Seitenüberlauf
+- Neuanlage, Zusatzfilter, Aktionsmenü, Tastaturöffnung, Glaswerte und goldener
+  Fokus automatisiert kontrolliert; alle erzeugten Desktop-/Mobilaufnahmen
+  visuell geprüft
+- Produktionsbuild sowie vollständige Unit- und E2E-Matrix gemäß Auftrag nicht
+  ausgeführt
+- `git diff --check`: erfolgreich
+
+## Materialkorrektur 0.5.7
+
+| Kriterium                                    | Nachweis                                                                                         | Stand                 |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------ | --------------------- |
+| Hintergrundlicht im Arbeitsbereich sichtbar  | Fundus und Sendungsplanung ohne Popup in Dark/Light auf Desktop und Mobil visuell geprüft        | erfüllt am 23.10.2026 |
+| Popup erhält die Lichtstimmung               | Editor mit leichtem `46%`-Backdrop und `6px` Blur gegen Ansicht ohne Popup verglichen            | erfüllt am 23.10.2026 |
+| Verschachtelte Ablaufkarten werden dunkler   | berechnete RGBA-Werte von Außenglas, Abschnitt, Piece und Aktionsgruppe kontrolliert             | erfüllt am 23.10.2026 |
+| Graue Sonderflächen entfernt                 | aktive Tabs, private Recherche, Quellen-/Materialflächen und Aktionsgruppen visuell geprüft      | erfüllt am 23.10.2026 |
+| Schreibfelder bleiben ruhig und klar         | deckende Feldfüllung, feine Kontur und unveränderter Goldfokus in beiden Editorbereichen geprüft | erfüllt am 23.10.2026 |
+| Lightmode und Smartphone ohne Seitenüberlauf | Chromium-Messung bei 1440 × 1000 und 390 × 844 Pixeln in beiden Themes                           | erfüllt am 23.10.2026 |
+
+## Ausgeführte Prüfungen Materialkorrektur 0.5.7
+
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- berechnete Styles vor und nach der Korrektur für App-Hintergrund, Navigation,
+  Ablauf-Panel, Abschnitte, Pieces, Aktionsgruppen, Dialog, Backdrop, Tabs,
+  Rechercheflächen und Schreibfelder kontrolliert
+- gezielter Chromium-Lauf für Sendungsplanung sowie Piece-Editor mit
+  „Sendungstext“ und „Recherche & Quellen“ bei 1440 × 1000 und 390 × 844 Pixeln
+  in Light/Dark ohne Konsolenfehler oder horizontalen Seitenüberlauf
+- Desktop-/Mobilaufnahmen mit und ohne Popup visuell verglichen
+- vollständige Funktionstests gemäß Auftrag nicht ausgeführt
+- `git diff --check`: erfolgreich
+
+## Redaktionelle Arbeitsabläufe 0.5.8
+
+| Kriterium                                  | Nachweis                                                                                         | Stand                 |
+| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------- |
+| Persistente unabhängige Piece-Vorlagen     | Servicetests prüfen Snapshot, Revision, Neuanlage, Wiederverwendung und Löschen                  | erfüllt am 23.10.2026 |
+| Atomare idempotente Direktanlage           | Verhaltenstests prüfen Wiederholung derselben Befehls-ID und vollständigen Rollback              | erfüllt am 23.10.2026 |
+| Interner und öffentlicher Titel getrennt   | Service- und Browserabläufe prüfen getrennte Werte, Snapshots und Fallback                       | erfüllt am 23.10.2026 |
+| Entfernen betrifft nur konkrete Verwendung | Browser prüft Bestätigung, Rückgabe in Fundus und unverändertes Original                         | erfüllt am 23.10.2026 |
+| Beliebige Live-Verwendung auswählbar       | Verhaltenstests wählen ersten und erledigten Eintrag über stabile Usage-ID                       | erfüllt am 23.10.2026 |
+| Stabiler widerrufbarer OBS-Kanal           | Servicetests prüfen Wiederöffnung/Rotation; anonymer Browser prüft Fragmenttausch und Cookie     | erfüllt am 23.10.2026 |
+| Private Quellen und Uploads bleiben intern | HTML- und JSON-Prüfung enthält weder implizite Quellen, Uploadnamen noch interne Redaktionstexte | erfüllt am 23.10.2026 |
+| Responsive und gleichwertig bedienbar      | Chromium prüft Desktop/Mobil, Light/Dark, Drag-and-drop sowie Klick- und Tastaturalternativen    | erfüllt am 23.10.2026 |
+| Reale OBS- und Anbieterwiedergabe          | Keine OBS-Installation und keine echten Anbieteraufrufe in der lokalen Prüfumgebung              | offen                 |
+
+## Ausgeführte Prüfungen 0.5.8
+
+- `npm run lint`: nach Formatierung erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm test`: 33 Tests in 6 Dateien erfolgreich
+- `npm run test:e2e`: 15 von 15 Chromium-Browsertests erfolgreich
+- Browsermatrix bei 390, 768, 960, 1280 und 1440 Pixeln einschließlich
+  Light/Dark, horizontalem Überlauf, Tastaturbedienung, Planung, Live-Steuerung
+  und anonymer Ausgabe geprüft; Screenshots wurden durch die Suite erzeugt
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- `npm run db:migrate`: Migrationen `0007_editorial_workflows.sql` und
+  `0008_durable_planning_commands.sql` erfolgreich auf der zuvor gesicherten
+  lokalen Entwicklungsdatenbank angewendet
+- `bash -n start.sh`: erfolgreich
+- reale OBS-Browserquelle und echte YouTube-/TikTok-Wiedergabe nicht ausgeführt;
+  Anbieterrequests wurden in den Browsertests lokal abgefangen
+
+## Live-Werkbank 0.5.9
+
+| Kriterium                                      | Nachweis                                                                                           | Stand                 |
+| ---------------------------------------------- | -------------------------------------------------------------------------------------------------- | --------------------- |
+| Favorit ist globale Originaleigenschaft        | Service prüft Revision/Status; Browser prüft Stern, Sortierung und weiterhin wirksamen Planfilter  | erfüllt am 23.10.2026 |
+| Werkzeugkatalog und Rechte                     | Barkeeper-Verwaltung serverseitig geschützt; Browser prüft Anlage, Formatbezug und Deaktivierung   | erfüllt am 23.10.2026 |
+| Deaktivierte Zuordnung bleibt bearbeitbar      | Browser öffnet das Piece erneut und findet Werkzeug, Arbeitslink, Notiz und Deaktivierungsstatus   | erfüllt am 23.10.2026 |
+| Relationen werden unveränderlich gesnapshottet | Service ändert Quelle, Werkzeug und Thema und sieht Änderungen erst nach expliziter Aktualisierung | erfüllt am 23.10.2026 |
+| Private Live-Materialien bleiben privat        | Live-Steuerung zeigt Snapshot-Quelle; anonymes HTML/JSON enthält den privaten Materiallink nicht   | erfüllt am 23.10.2026 |
+| Thematische Publikum-Dachzeile                 | Usage-Themen werden stabil projiziert; Chromium zeigt „Gaming“ oberhalb des Präsentationstitels    | erfüllt am 23.10.2026 |
+| Persistenter Abschnitts-Countdown              | kontrollierte Testzeit prüft eingefrorenes Soll, Reload, Piece-Wechsel und Abschluss ohne Reset    | erfüllt am 23.10.2026 |
+| Responsive Bedienung                           | komplette Browsermatrix und gezielter Werkzeugeditor bei 390 × 844 ohne horizontalen Überlauf      | erfüllt am 23.10.2026 |
+| Reale OBS- und Anbieterwiedergabe              | Keine OBS-Installation und keine echten Anbieteraufrufe in der lokalen Prüfumgebung                | offen                 |
+
+## Ausgeführte Prüfungen 0.5.9
+
+- `npm run lint`: erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm test`: 37 Tests in 7 Dateien erfolgreich
+- `npm run test:e2e`: 16 von 16 Chromium-Browsertests erfolgreich
+- zusätzlicher gezielter Chromium-Lauf des Werkzeugeditors bei 390 × 844 Pixeln:
+  1 von 1 erfolgreich, ohne horizontalen Überlauf
+- Browsermatrix bei 390, 768, 960, 1280 und 1440 Pixeln einschließlich
+  Light/Dark, Planung, Live-Steuerung, anonymer Ausgabe und privater Materialien
+  erfolgreich; Screenshots wurden durch die Suite erzeugt
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- lokale Entwicklungsdatenbank vorab nach
+  `.data/backups/0.5.9-pre-migration/sendewerk.sqlite` gesichert;
+  `npm run db:migrate` hat `0009_live_workbench.sql` erfolgreich angewendet
+- `bash -n start.sh` und `git diff --check`: erfolgreich
+- reale OBS-Browserquelle und echte YouTube-/TikTok-Wiedergabe nicht ausgeführt;
+  Anbieterrequests wurden in den Browsertests lokal abgefangen
+
+## Editor-Erlebnis 0.5.10
+
+| Kriterium                                   | Nachweis                                                                                          | Stand                 |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------- | --------------------- |
+| Titel direkt und per Tastatur bearbeitbar   | Chromium prüft Vorlage, Inline-Titel, Autosave, Schließen und erneutes Öffnen                     | erfüllt am 23.10.2026 |
+| Gemeinsame Themen- und Werkzeugauswahl      | Browser prüft Auswahl, Speicherung und deaktivierte Werkzeugzuordnung; Svelte-Check ist warnfrei  | erfüllt am 23.10.2026 |
+| Themenicons lokal und persistent            | Migration und Servicetests prüfen Iconwert und Snapshot; Verwaltung nutzt lokalen Iconpicker      | erfüllt am 23.10.2026 |
+| Präsentationsbild ausdrücklich gewählt      | Browser lädt Bild hoch, aktualisiert Usage und sieht nur dieses Bild in anonymer Ausgabe          | erfüllt am 23.10.2026 |
+| Medien- und Usage-Snapshots bleiben stabil  | Servicetest entfernt Originalmedium und erhält bestehende Usage-Ausgabe                           | erfüllt am 23.10.2026 |
+| Piece-Löschen ist wiederherstellbar         | Servicetest prüft Revision, Soft Delete, Listenausblendung, Medienzugriff und Wiederherstellung   | erfüllt am 23.10.2026 |
+| Live-Verwendungen sicher entfernbar         | Servicetests erlauben nur offene, nie gelaufene, nicht aktuelle oder präsentierte Verwendungen    | erfüllt am 23.10.2026 |
+| Leere OBS-Ausgabe ist transparent           | Chromium prüft leeren Renderer vor und nach Präsentation sowie versteckten Verbindungsstatus      | erfüllt am 23.10.2026 |
+| Responsive Bedienung                        | vollständige Browsermatrix prüft 390 bis 1440 Pixel, Light/Dark und horizontalen Überlauf         | erfüllt am 23.10.2026 |
+| Reales OBS, reale Anbieter und echtes iOS   | In der lokalen Prüfumgebung nicht verfügbar                                                       | offen                 |
+| Werkzeugkatalog entspricht Themenverwaltung | Kompakte Iconzeilen und gemeinsamer Anlegen-/Bearbeitendialog wurden auf Desktop/Mobil verglichen | erfüllt am 23.10.2026 |
+| Vollständige Classic-Regular-Auswahl        | Generierung liefert 3.671 Icons; seltenes Icon wurde gesucht, gespeichert und im Piece angezeigt  | erfüllt am 23.10.2026 |
+| Formatwahl nutzt gemeinsamen Picker         | Browser ordnet Quiz im Dialog zu und erhält Format sowie Deaktivierungszustand nach Reload        | erfüllt am 23.10.2026 |
+
+## Ausgeführte Prüfungen 0.5.10
+
+- `npm run lint`: erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm test`: 40 Tests in 7 Dateien erfolgreich
+- `npm run test:e2e`: 16 von 16 Chromium-Browsertests erfolgreich
+- Browsermatrix bei 390, 768, 960, 1280 und 1440 Pixeln einschließlich
+  Light/Dark, mobiler Navigation, Dialogen, Planung, Live-Steuerung, anonymer
+  Ausgabe, Medienauswahl und privater Datenfilterung erfolgreich; Screenshots
+  wurden durch die Suite erzeugt
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- lokale Entwicklungsdatenbank vorab nach
+  `.data/backups/0.5.10-pre-migration/sendewerk.sqlite` gesichert;
+  `npm run db:migrate` hat `0010_editor_experience.sql` erfolgreich angewendet
+- vor der Werkzeugmigration zusätzlich nach
+  `.data/backups/0.5.10-tool-icons-pre-migration/sendewerk.sqlite` gesichert;
+  `npm run db:migrate` hat `0011_tool_icons.sql` erfolgreich angewendet
+- Werkzeugkatalog, Anlegen-/Bearbeitendialog, geöffnete Iconauswahl und
+  Piece-Werkzeugauswahl bei 1280 × 720 und 390 × 844 Pixeln visuell direkt mit
+  der Themenverwaltung verglichen; keine horizontale Überlauffläche festgestellt
+- `bash -n start.sh`: erfolgreich
+- reale OBS-Browserquelle, echte YouTube-/TikTok-Wiedergabe und Safari auf einem
+  iOS-Gerät nicht ausgeführt; Anbieterrequests wurden lokal abgefangen
+
+## Verwaltungskorrektur 0.5.11
+
+| Kriterium                                  | Nachweis                                                                                 | Stand                 |
+| ------------------------------------------ | ---------------------------------------------------------------------------------------- | --------------------- |
+| Werkzeugdialog ist initial geschlossen     | Chromium prüft den Dialog vor jeder Bedienaktion bei 390 und 1280 Pixeln                 | erfüllt am 23.10.2026 |
+| Dialog öffnet nur nach bewusster Aktion    | Browser legt ein Werkzeug an und öffnet ein bestehendes Werkzeug anschließend zum Ändern | erfüllt am 23.10.2026 |
+| Bestehender Werkzeugablauf bleibt erhalten | Browser prüft Icon, Format, Deaktivierung und Piece-Zuordnung nach erneutem Laden        | erfüllt am 23.10.2026 |
+| Themen-Iconpicker bleibt im Viewport       | Chromium prüft Öffnen und Auswahl bei 390, 960 und 1280 Pixeln                           | erfüllt am 23.10.2026 |
+
+## Kompakte Live-Regie 0.5.12
+
+| Kriterium                                         | Nachweis                                                                                                | Stand                 |
+| ------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------- |
+| Globale Navigation bleibt aus der Regie           | Chromium findet weder Seitenleiste noch mobilen App-Header oder Bottomnavigation                        | erfüllt am 24.10.2026 |
+| Kleines Desktopfenster bleibt zweispaltig         | Chromium prüft Moderation, Ablauf und feste Aktionen bei 900 × 450 Pixeln                               | erfüllt am 24.10.2026 |
+| Niedrige Desktophöhe wird berücksichtigt          | 900 × 450 aktiviert kompakte Abstände ohne Transform oder CSS-Zoom                                      | erfüllt am 24.10.2026 |
+| Zweizeiliger Kopf gewinnt Inhaltsfläche           | Chromium begrenzt die Kopfhöhe bei 670 × 450 und prüft die unveränderte feste Aktionsleiste             | erfüllt am 24.10.2026 |
+| Lange Kopftitel bleiben kontrolliert              | Abschnitt und Folgetitel kürzen einzeilig und öffnen vollständig per Klick, Enter und Escape            | erfüllt am 24.10.2026 |
+| Regiemenü bleibt sichtbar und erreichbar          | Browser prüft Viewportgrenzen, Scrollzugang, Sendungsname und Aktionen bei 1280, 670 und 390 Pixeln     | erfüllt am 24.10.2026 |
+| Menü schließt zugänglich                          | Escape und Außenklick schließen das Popover und führen den Fokus zum Auslöser zurück                    | erfüllt am 24.10.2026 |
+| Lange Inhalte scrollen innerhalb der Fläche       | Synthetischer Langtext und zusätzliche Ablaufabschnitte erzeugen zwei unabhängige Scroller              | erfüllt am 24.10.2026 |
+| Mobile Regie verwendet ein Ablauf-Sheet           | 390 × 700 prüft Endlage, Fokus, Escape, Aktionsschließen und Wechsel auf 900 Pixel                      | erfüllt am 24.10.2026 |
+| Leseposition bleibt am Piece                      | Nach tiefem Scrollen beginnt ein direkt gewähltes anderes Piece am oberen Rand                          | erfüllt am 24.10.2026 |
+| Zustände sind ausgeschrieben                      | Ablauf prüft Kommend, Aktuell, Erledigt und Übersprungen                                                | erfüllt am 24.10.2026 |
+| Erstes und letztes Piece direkt wählbar           | Browser wechselt per stabiler Usage-ID auf Desktop und aus dem mobilen Sheet in beide Richtungen        | erfüllt am 24.10.2026 |
+| Navigation veröffentlicht nicht automatisch       | Öffentliche Ausgabe bleibt bei direkter Auswahl unverändert                                             | erfüllt am 24.10.2026 |
+| Zurück ist reine Betrachtungsnavigation           | Browser prüft unverändertes aktuelles Piece, Countdown und Ausgabe sowie gesperrte Fortschrittsaktionen | erfüllt am 24.10.2026 |
+| Timer und Livezustand überleben Reload            | Aktuelles Piece und laufender Abschnittscountdown bleiben nach Neuladen erhalten                        | erfüllt am 24.10.2026 |
+| Wiederaufnahme nur bei Unterbrechung              | Während eines aktiven Pieces fehlt die Aktion; nach unterbrochenem Stand ist sie prominent              | erfüllt am 24.10.2026 |
+| Sendungsende ist eindeutig                        | Letztes Piece zeigt Endaktion ohne horizontalen Überlauf; danach fehlen Weiter-Aktionen                 | erfüllt am 24.10.2026 |
+| Liste und Kalender nutzen dieselben Daten         | Chromium wechselt zwischen beiden Ansichten; Sendungslinks bleiben identisch erreichbar                 | erfüllt am 24.10.2026 |
+| Kalenderpräferenz bleibt am Konto                 | Service- und Browsertest prüfen Standardwert, Speicherung und Reload                                    | erfüllt am 24.10.2026 |
+| Monat und Berliner Tage sind korrekt              | Unit-Tests prüfen Monatsgrenzen und UTC-Zuordnung; Browser prüft Monatswechsel und heutigen Tag         | erfüllt am 24.10.2026 |
+| Mehrere und terminlose Sendungen bleiben sichtbar | Desktopkalender und mobile Agenda zeigen zwei Termine am Tag; eigener Bereich zeigt offenen Termin      | erfüllt am 24.10.2026 |
+
+## Ausgeführte Prüfungen 0.5.12
+
+- `npm run lint`: erfolgreich
+- `npm run check`: 0 Fehler und 0 Warnungen
+- `npm test`: 44 Tests in 8 Dateien erfolgreich
+- gezielte Kalender- und Live-Regie-Läufe: 2 von 2 Chromium-Tests erfolgreich
+- `npm run test:e2e`: 17 von 17 Chromium-Browsertests erfolgreich
+- Browserprüfungen der Live-Regie bei 1440 × 900, 900 × 450, 670 × 450 und
+  390 × 700 Pixeln sowie des Kalenders bei 1440 × 1000 und 390 × 844 Pixeln
+  erfolgreich
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`
+- Versionsgleichheit `0.5.12` in Paket, Lockdatei und Cloudron-Manifest geprüft
+- `bash -n start.sh` und `git diff --check`: erfolgreich
+- reale OBS-Browserquelle, echte YouTube-/TikTok-Wiedergabe und Safari auf einem
+  iOS-Gerät nicht ausgeführt; Anbieterrequests wurden lokal abgefangen
+
+## Erweiterte Live-Steuerung 0.5.12
+
+| Kriterium                                      | Stand                        |
+| ---------------------------------------------- | ---------------------------- |
+| Gemeinsame persistente Pause                   | implementiert, nicht geprüft |
+| Abschnitts- und Gesamtreset bleiben unabhängig | implementiert, nicht geprüft |
+| Gesamt-/Restzeit ohne Doppelerfassung          | implementiert, nicht geprüft |
+| Ende, Wiederaufnahme und neuer Lauf getrennt   | implementiert, nicht geprüft |
+| Privates Feld „Interaktion“ durch alle Kopien  | implementiert, nicht geprüft |
+| Öffentliche Positivliste unverändert           | implementiert, nicht geprüft |
+| Classic-Regular-Icons und Drawer-Schließen     | gezielt im Browser geprüft   |
+
+Für die ursprüngliche Erweiterung wurden auf ausdrücklichen Auftrag zunächst
+keine Prüfungen ausgeführt. Die nachfolgenden Korrekturen weisen inzwischen
+Migration, Typen, Build, bestehendes Liveverhalten und die betroffenen
+Oberflächen gezielt nach; die übrigen neuen Timer- und Statusfälle bleiben ohne
+vollständige erneute Matrix.
+
+## Live-500-Korrektur 0.5.12
+
+- Ursache auf einer schreibgeschützt untersuchten lokalen Datenbank bestätigt:
+  `0013` war protokolliert, `live_show_timer_runs` fehlte jedoch.
+- `0014_live_show_timer_repair.sql` auf einer Kopie dieser Datenbank angewendet
+  und erneut ausgeführt; Tabelle und Indizes wurden angelegt, 13 bestehende
+  Intervalle genau einmal übernommen und ein offenes Intervall erhalten.
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+
+## Live-Icons und kompakte Sendungskarten 0.5.12
+
+- `npm run check`: 0 Fehler und 0 Warnungen.
+- `npm run test:unit -- --run src/lib/server/live.spec.ts`: 6 Tests erfolgreich.
+- `npm run build`: erfolgreich mit `@sveltejs/adapter-node`.
+- Gezielter Chromium-Ablauf der Sendungsübersicht mit Desktopkalender, mobiler
+  Agenda und Rückkehr zur Liste: erfolgreich.
+- Vollständiger bestehender Live-Regie-Ablauf einschließlich 900 × 450,
+  670 × 450 und 390 × 700 Pixeln: erfolgreich; Iconleiste, Kopfhöhe,
+  Viewportgrenzen und horizontaler Überlauf geprüft.
+- Zusätzliche visuelle Chromium-Prüfung bei 656 × 400 und 390 × 700 Pixeln:
+  Sendungskarte unter 130 Pixel hoch, Menü-/Ausgabe-/Timericons sichtbar und
+  Pausebutton wechselt bedienbar zu Fortsetzen.

docs/ARCHITECTURE.md

@@ -38,12 +38,12 @@ 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                     |
+| Taxonomie   | getrennte `section_categories`, `formats`, `topics` samt optionalem Themenicon; Pieces und Vorschläge mehrfach verknüpft            |
-| Inhalt      | `pieces` mit Status, Dauer, Revision, getrennten Textbereichen, Quellen und privaten Medien; Vorlagen sind definierte Startwerte          |
+| Inhalt      | `pieces` mit Status, Soft Delete, Favorit, Revision, Texten, Quellen, Werkzeugen und privaten Medien; Vorlagen speichern Snapshots  |
-| Sendungsbau | `shows`, geordnete `show_sections`, kopierte `piece_usages`, Reservebank und Sendungsvorlagen sind umgesetzt; Original-ID bleibt Referenz |
+| Sendungsbau | `shows`, geordnete `show_sections`, `piece_usages` samt Quellen-/Werkzeug-/Themen-/Mediensnapshots, Reservebank und Vorlagen        |
-| Live        | expliziter Live-Stand, aktuelles Element, Status je Verwendung, tatsächliche Zeiten und getrennte Präsentationsausgabe                    |
+| Live        | expliziter Live-Stand, aktuelles Element, tatsächliche Piece-Zeiten, persistente Abschnitts-/Gesamttimer 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                                                |
 | RSS         | Feedquellen, Abrufläufe und externe Einträge mit stabiler Herkunfts-ID sowie Status neu/übernommen/verworfen                        |
@@ -64,6 +64,15 @@ oder eine explizite Abschnittsdauer. Beides wird nie addiert. Reserveelemente
 zählen erst nach dem Einplanen. Geplante und tatsächliche Dauer bleiben
 getrennt.
 
+Ein Live-Abschnittstimer entsteht ausschließlich beim tatsächlichen Eintritt in
+einen Abschnitt mit positiver expliziter Dauer. Er speichert dieses Soll als
+unveränderlichen Wert und summiert eigene Laufintervalle; Piece-Wechsel im
+selben Abschnitt erzeugen deshalb weder Reset noch doppelte Piece-Laufzeit.
+Der Gesamttimer speichert ebenfalls mehrere Laufintervalle. Eine gemeinsame
+Pause schließt die offenen Piece-, Abschnitts- und Gesamtintervalle; Fortsetzen
+öffnet neue Intervalle, ohne die Pause als Laufzeit zu zählen. Abschnitts- und
+Gesamtreset ersetzen ausschließlich die jeweilige Zeitbasis.
+
 ## Anmeldung und Rechte
 
 Etappe 2 ergänzt lokale Konten mit den festen Rollen `barkeeper` und
@@ -97,11 +106,25 @@ 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.
+`is_favorite` ist eine globale Eigenschaft des Originals und keine Nutzung oder
+Historienmarkierung. Der Werkzeugkatalog liegt getrennt von Formaten; Formate
+sind nur Eignungszuordnungen. `piece_tools` hält pro Piece den privaten
+Arbeitslink und eine Notiz, während Deaktivierung das Katalogobjekt und alle
+bestehenden Zuordnungen erhält. Ein serverseitig validiertes `icon_name` gehört
+zum Werkzeugkatalog und wird im Originaleditor angezeigt, ohne bestehende
+Usage-Snapshots nachträglich zu verändern.
 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.
 
+Piece-Vorlagen liegen als validierte JSON-Snapshots in `piece_templates`. Jeder
+Speichervorgang kopiert den vollständigen Vorlageninhalt tief und erhöht bei
+einer Aktualisierung die Revision; spätere Änderungen am Ausgangs-Piece wirken
+nicht auf die Vorlage zurück. Die leere Vorlage bleibt virtuell. Interner Titel
+und optionaler Präsentationstitel sind getrennte Felder; ohne öffentlichen Titel
+verwendet die Präsentationsprojektion den internen Titel als Fallback.
+
 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
@@ -119,6 +142,15 @@ 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.
 
+Ein Piece kann genau eines seiner aktiven Medien ausdrücklich als
+Präsentationsbild auswählen. Die Auswahl liegt in `piece_presentation_media`;
+das Entfernen setzt am Medium einen Zeitstempel statt die Datei zu löschen.
+Damit bleiben bereits erzeugte `usage_media_snapshots` auflösbar, während neue
+Einplanungen und der Originaleditor nur aktive Medien berücksichtigen. Das
+Soft Delete eines Pieces setzt ebenfalls nur `deleted_at_utc`: normale Listen
+und neue Einplanungen schließen es aus, bestehende Verwendungsreferenzen und
+Snapshots bleiben unverändert erhalten.
+
 ## Sendungsbau
 
 Etappe 4 bündelt alle Planungsmutationen in `src/lib/server/shows.ts`. Eine
@@ -128,9 +160,12 @@ 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
+Interaktion, Ü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
+Metadaten und validierte Anbieter-ID. Zusätzlich speichern eigene geordnete
+Tabellen alle Quellen, Werkzeugnamen samt Start-/Arbeitslink und Notiz, die
+Themennamen samt Icon sowie das ausdrücklich ausgewählte Präsentationsmedium.
+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
@@ -161,6 +196,18 @@ 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 Sendungsübersicht leitet Liste, Desktop-Monatsraster und mobile Monatsagenda
+aus derselben `listShows()`-Abfrage ab. UTC-Zeitpunkte werden erst für Gruppierung
+und Anzeige nach `Europe/Berlin` in zivile Kalendertage übersetzt. Sendungen ohne
+Startzeit bleiben in einem eigenen Bereich sichtbar. `users.show_overview_view`
+speichert ausschließlich die kontobezogene Darstellungspräferenz; der gewählte
+Monat bleibt URL-Zustand und verändert keine Sendungsdaten.
+
+Die Direktanlage aus einer Sendung erzeugt Piece und Verwendung innerhalb einer
+verschachtelbaren SQLite-Transaktion. `planning_commands` speichert die
+Befehls-ID und das Ergebnis, sodass ein wiederholter Request dieselben IDs
+zurückgibt und weder ein zweites Piece noch eine zweite Einplanung erzeugt.
+
 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
@@ -190,17 +237,39 @@ liegen als mehrere Start-/Endintervalle je Verwendung vor. Damit bleiben
 Zurückgehen, Wiederaufnahme und bereits abgeschlossene Laufzeit getrennt von der
 geplanten Dauer nachvollziehbar.
 
+`live_show_timer_runs` hält die unabhängige Gesamtzeit. Pause und Fortsetzen
+behandeln Gesamt-, Abschnitts- und Piece-Intervalle gemeinsam. Beenden setzt den
+Sendungsstatus auf `completed`, schließt laufende Intervalle, markiert offene
+Pieces aber nicht als erledigt. Eine ausdrückliche Wiederaufnahme bewahrt Zeiten
+und Fortschritt; nur „Neuer Durchlauf“ verwirft Laufintervalle und setzt die
+Piece-Status zurück. Die Restzeitschätzung verwendet je Abschnitt entweder die
+positive Abschnittsdauer oder die verbleibenden Piece-Dauern und zählt beide nie
+zusammen.
+
 Die interne Route `/live` benötigt weiterhin eine aktive Sitzung und darf
-Recherche, Moderation und eigene Arbeitsdaten lesen. Die separate Ausgabe
+Recherche, Moderation und eigene Arbeitsdaten lesen. Die separate Ausgabe nutzt
-`/heinzlive/[token]` liegt dagegen in einem reduzierten Layout ohne Navigation
+den stabilen Kanal `/heinzlive/default` in einem reduzierten Layout ohne
-oder Nutzerdaten. In SQLite liegt nur der SHA-256-Hash des 256-Bit-Tokens; ein
+Navigation oder Nutzerdaten. Der geheime 256-Bit-Schlüssel steht nur im
-neu erzeugter Ausgabezugang widerruft den vorherigen. Page, Polling-JSON und
+URL-Fragment und wird per POST gegen ein `HttpOnly`-, `SameSite=Strict`-Cookie
-Medienroute leiten ihre Daten aus einer eigenen Positivliste ab. Bilder werden
+getauscht. SQLite speichert seinen SHA-256-Hash für die Zugangsprüfung sowie den
-nur ausgeliefert, wenn sie zum aktuell ausdrücklich präsentierten Piece gehören.
+rohen Schlüssel, weil die angemeldete Steuerung dieselbe stabile OBS-Adresse
-Normale Auswahl, Fortschaltung oder Wiederaufnahme verändern den
+erneut ausgeben können muss. Datenbank und Sicherungen sind deshalb Teil der
-Präsentationsstand nicht. Die öffentliche Projektion liest ausschließlich den
+Geheimnisgrenze. Eine Rotation widerruft den bisherigen Schlüssel, normales
-gespeicherten Verwendungssnapshot; spätere Änderungen am Original erscheinen
+erneutes Öffnen behält ihn bei.
-erst nach einer ausdrücklichen Snapshot-Aktualisierung.
+Das private Markdownfeld „Interaktion“ wird am Original und als
+Verwendungssnapshot gespeichert und ausschließlich in der authentifizierten
+Live-Regie gerendert. Page, Polling-JSON und Proxyrouten leiten ihre Daten aus einer eigenen
+Positivliste ab. Private Quellen-/Werkzeug-Snapshots, Arbeitslinks, Notizen und
+Uploads werden nicht veröffentlicht; nur Themennamen sowie die ausdrücklich
+gewählte Link- oder Videoquelle und deren erlaubte Vorschau-URL können die
+Grenze passieren.
+Lokale Betrachtungsnavigation, Fortschaltung oder Wiederaufnahme verändern den
+Präsentationsstand nicht. Zurück und die Auswahl einer Ablaufzeile wechseln nur
+den im Browser betrachteten Verwendungssnapshot; tatsächliches Live-Piece,
+Status, Timer und Ausgabe bleiben serverseitig unverändert. Die öffentliche
+Projektion liest ausschließlich den ausdrücklich präsentierten
+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
@@ -235,10 +304,42 @@ 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.
+Die Sendungsübersicht schaltet über zwei gleichwertige Formularaktionen zwischen
+Liste und Kalender um. Auf breiten Ansichten erscheint ein siebenspaltiges
+Monatsraster ohne Termin-Drag-and-drop; bis `52rem` ersetzt es eine lineare,
+touchfreundliche Agenda desselben Monats.
 Der Live-Modus ist eine eigene, fokussierte Arbeitsansicht. Die
 Präsentationsausgabe verwendet eine separate, strikt reduzierte Datenansicht
 ohne interne Anwendungsnavigation.
 
+Die private Route `/live` verwendet ebenfalls einen eigenen authentifizierten
+Layoutmodus ohne allgemeine Seitenleiste, mobilen App-Header oder
+Bottomnavigation. Ihre Regiefläche belegt die verfügbare Viewporthöhe als Raster
+aus fester Statuszeile, unabhängig scrollender Piece- und Ablaufspalte sowie
+fester Aktionszeile. Die Breite entscheidet über zwei Spalten oder das mobile
+Sheet; eine geringe Desktophöhe verdichtet zusätzlich Abstände und Leisten,
+ohne Schrift oder Oberfläche zu skalieren. Unterhalb des schmalen Breakpoints
+wird ausschließlich die Ablaufspalte als modales Sheet mit Fokusbegrenzung
+eingeblendet; beim Wechsel auf einen breiteren Viewport wird dieser Modalzustand
+aufgehoben. Die lokale Betrachtungsnavigation ist keine Live-Action; erst
+Präsentieren, Überspringen und Erledigen schreiben den jeweiligen getrennten
+Zustand. Die öffentliche `/heinzlive`-Projektion bleibt unverändert. Lokale
+Lesepositionen sind an die jeweilige Verwendung gebunden und werden nicht
+zwischen Pieces übertragen.
+
+Der Live-Kopf besteht aus zwei regulären Rasterzeilen. Abschnitt und folgendes
+Piece sind einzeilig gekürzte, fokussierbare Schaltflächen, die ihren vollständigen
+Text lokal aufklappen. Das Regiemenü wird bei Bedarf als fest am Viewport
+positionierter Dialog neben dem Kopf gerendert. Dadurch unterliegt es weder dem
+Overflow der Regiefläche noch dem durch Glasfilter erzeugten Stacking Context;
+seine maximale Höhe bleibt an den Viewport gebunden und intern scrollbar.
+
+Icons werden aus dem lokalen Font-Awesome-Classic-Regular-Sprite unter
+`static/icons` gerendert. Die Verwaltung lädt zusätzlich die durchsuchbaren
+Metadaten aller 3.671 Icons, zeigt je Suchergebnis aber höchstens 120 Einträge
+gleichzeitig. Allgemeine Seiten wie Login oder Navigation laden den Katalog
+nicht in ihren Client-Chunk.
+
 Der eigenständige Piece-Editor ordnet denselben Formvertrag als redaktionelles
 Arbeitsblatt an. Titel, Fundstück, private Recherche sowie Einleitung,
 Moderationsstichpunkte und Überleitung bilden die primäre Schreibfläche.

docs/DECISIONS.md

@@ -276,3 +276,152 @@ Quellen:
 - <https://developers.tiktok.com/doc/embed-player>
 - <https://developers.tiktok.com/doc/embed-videos>
 - <https://owasp.org/www-community/attacks/Server_Side_Request_Forgery>
+
+## D-020: Stabile Ausgabekanal-Adresse mit Fragment-Schlüssel
+
+OBS soll eine dauerhaft konfigurierte Adresse verwenden können, ohne dass ein
+Zugangsschlüssel in HTTP-Requests, Serverlogs oder Referer-Headern erscheint.
+Darum bleibt die Kanaladresse `/heinzlive/default` stabil und trägt den
+zufälligen Schlüssel ausschließlich als URL-Fragment. Ein kleiner Browser-POST
+tauscht ihn gegen ein `HttpOnly`-, `SameSite=Strict`-Cookie; danach greifen
+Seite, Polling und erlaubte Proxys nur mit diesem Cookie zu. Für die Prüfung
+liegt ein SHA-256-Hash vor. Der rohe Schlüssel muss zusätzlich in SQLite
+gespeichert werden, weil die angemeldete Steuerung dieselbe stabile OBS-Adresse
+nach einem Neustart erneut ausgeben können muss. Damit sind Datenbank und
+Sicherungen bewusst Teil der Geheimnisgrenze. Wiederholtes Öffnen behält den
+Schlüssel, eine ausdrückliche Rotation widerruft ihn sofort.
+
+Die öffentliche Projektion folgt einer engeren Positivliste als der interne
+Piece-Snapshot. Weder private Uploads noch alle Piece-Quellen werden implizit
+veröffentlicht. Passieren dürfen nur öffentlicher Text, Präsentationstitel sowie
+die ausdrücklich gewählte und erneut validierte Link- oder Videoquelle mit
+erlaubten Vorschaufeldern.
+
+## D-021: Vorlagen-Snapshots und idempotente Direktanlage
+
+Persistente Piece-Vorlagen speichern validierte, tief kopierte JSON-Snapshots
+mit eigener Revision. Damit bleiben sie unabhängig von späteren Änderungen am
+Ausgangs-Piece, ohne für jedes optionale Piece-Feld eine zweite Tabellenstruktur
+zu benötigen. Die virtuelle leere Vorlage wird nicht persistiert.
+
+Eine Direktanlage im Sendungsplan ist ein einzelner fachlicher Befehl. Piece,
+Verwendung und Sendungsrevision werden in derselben SQLite-Transaktion
+geschrieben. `planning_commands` macht die Befehls-ID eindeutig und speichert
+das Ergebnis, damit Wiederholungen nach Verbindungsabbrüchen keine Dubletten
+erzeugen. Interner und öffentlicher Titel werden getrennt gespeichert und beim
+Einplanen getrennt in den Verwendungssnapshot kopiert.
+
+## D-022: Werkzeuge und Live-Abschnittszeit als eigene Snapshot-Grenzen
+
+Favoriten bleiben ein boolesches Merkmal des Fundus-Originals. Sie ändern weder
+Revision, Status noch Verwendungshistorie und werden nicht pro Konto
+dupliziert. Der Werkzeugkatalog ist eine eigene Entität: Formatbeziehungen
+beschreiben nur die Eignung, während Piece-Zuordnungen den privaten Arbeitslink
+und die Notiz tragen. Katalogeinträge werden deaktiviert statt gelöscht, damit
+bestehende Piece- und Sendungsbezüge lesbar bleiben.
+
+Beim Einplanen kopieren eigene Relationstabellen alle Quellen, Werkzeuge und
+sortierten Themennamen an die Verwendung. Damit können Katalognamen, URLs,
+Themen und Originalzuordnungen später geändert werden, ohne eine vorbereitete
+Sendung still umzuschreiben. Nur die bewusste Aktion **Aus Fundus aktualisieren**
+ersetzt diese Snapshots. Die öffentliche Positivliste darf daraus ausschließlich
+die Themen-Dachzeile übernehmen; private Materiallinks und Werkzeugdaten bleiben
+auf der authentifizierten Live-Route.
+
+Der Abschnitts-Countdown verwendet von den Piece-Laufintervallen getrennte
+`live_section_timers` und `live_section_timer_runs`. Beim ersten tatsächlichen
+Eintritt wird eine positive explizite Abschnittsdauer eingefroren. Weitere
+Pieces desselben Abschnitts nutzen denselben Timer; Abschnittswechsel schließen
+ihn. So bleiben Reload und Wiederaufnahme persistent, ohne die vorhandene
+Piece-Zeiterfassung doppelt zu zählen.
+
+## D-023: Ausdrückliche Medienauswahl und wiederherstellbares Entfernen
+
+Ein privater Piece-Upload wird nicht allein durch seine Existenz öffentlich.
+Das Original verweist ausdrücklich auf höchstens ein aktives
+Präsentationsmedium. Beim Einplanen oder bewussten Aktualisieren wird diese
+Auswahl mit Medium-ID und Alternativtext an die Verwendung kopiert. Die
+öffentliche Route akzeptiert nur das Medium des aktuell präsentierten
+Usage-Snapshots; Originalname, interner Speicherpfad und andere Uploads bleiben
+außerhalb der Projektion.
+
+Medien und Pieces werden nicht physisch gelöscht, solange bestehende
+Sendungsfassungen auf ihre unveränderlichen Snapshots angewiesen sein können.
+Zeitstempel blenden sie aus aktuellen Arbeitslisten und neuen Einplanungen aus,
+erhalten aber Referenzen und ermöglichen die Wiederherstellung von Pieces. Eine
+Verwendung oder ein Abschnitt darf dagegen nur entfernt werden, solange keine
+betroffene Verwendung jemals live gelaufen ist und weder aktuell noch
+präsentiert wird.
+
+Der lokale Iconkatalog enthält die vollständige Classic-Regular-Familie mit
+3.671 Icons. Ein generierter Metadatenkatalog ermöglicht Suche und serverseitige
+Validierung, während ein statischer SVG-Sprite über den gemeinsamen
+`currentColor`-Renderer dargestellt wird. So lädt die Navigation nicht sämtliche
+Pfaddaten in ihren JavaScript-Chunk. Es gibt weder einen externen Laufzeitabruf
+noch eine Laufzeitabhängigkeit vom benachbarten Quellverzeichnis; Herkunft und
+Lizenz stehen in `THIRD_PARTY_NOTICES.md`.
+
+## D-024: Private Live-Regie als fokussierter Viewport
+
+Die authentifizierte Live-Steuerung nutzt einen eigenen Root-Layoutmodus und
+rendert die allgemeine App-Navigation nicht. Kopf- und Aktionszeile bleiben fest;
+Moderation und Ablauf sind die einzigen unabhängig scrollenden Arbeitsflächen.
+Die Umschaltung zum mobilen Sheet hängt von der Fensterbreite ab, damit ein
+breites, niedriges Desktopfenster weiterhin zwei Spalten verwendet. Die Höhe
+steuert dort unabhängig die Dichte von Abständen und Bedienleisten. Textgröße
+und Gesamtoberfläche werden nicht skaliert.
+
+Der Kopf verwendet genau zwei kompakte Informationszeilen. Lange Kontexttitel
+bleiben im Ruhezustand einzeilig und werden auf bewusste Klick- oder
+Tastaturaktion lokal vollständig sichtbar. Das Regiemenü ist kein verschachteltes
+`details` innerhalb der Glasfläche, sondern ein explizit gesteuertes,
+viewportgebundenes Popover. So bleiben Z-Index, Maximalhöhe, Escape,
+Außenklick und Fokus-Rückkehr unabhängig von Overflow und Filter-Stacking-
+Contexts kontrollierbar.
+
+Diese Darstellung ist keine neue Live-Zustandsgrenze. Zurück und die direkte
+Auswahl im Ablauf sind reine lokale Betrachtungsnavigation. Sie verändern weder
+aktuelles Live-Piece noch Status, Zeitintervalle, Abschnittstimer oder Ausgabe.
+Während ein anderes Piece betrachtet wird, bleiben Fortschrittsaktionen
+gesperrt; Präsentieren darf dagegen weiterhin ausdrücklich genau das betrachtete
+Piece ausgeben. Start, Erledigen, Überspringen, Reserveeinfügung und Präsentation
+bleiben serverseitige Actions mit ihren bisherigen Revisions- und
+Idempotenzregeln.
+
+## D-025: Gemeinsame Sendungsdaten für Liste und Kalender
+
+Listenansicht, Desktop-Monatsraster und mobile Monatsagenda werden aus derselben
+kompakten Sendungsliste abgeleitet. Es gibt kein zweites Kalenderdatenmodell und
+keine Bibliothek für Terminverwaltung. UTC-Zeitpunkte werden mit
+`Europe/Berlin` einem zivilen Tag zugeordnet; der ausgewählte Monat bleibt als
+URL-Parameter navigierbar. Mehrere Sendungen eines Tages werden vollständig und
+chronologisch gezeigt, Sendungen ohne Startzeit separat.
+
+Die Präferenz `list` oder `calendar` gehört zum angemeldeten Konto und wird als
+kleines geprüftes Feld an `users` gespeichert. Sie ist weder Bestandteil einer
+Sendung noch Browserzustand. Der Kalender dient nur der Navigation und erhält
+bewusst kein Drag-and-drop, damit eine Terminänderung ausschließlich über die
+bestehende serverseitig validierte Sendungsbearbeitung erfolgt.
+
+## D-026: Gemeinsame Live-Pause und getrennte Zeitbasen
+
+Piece-Laufzeit, Abschnittszeit und Gesamtzeit bleiben getrennte persistente
+Intervallmengen. Pause schließt in einer Live-Transaktion alle offenen
+Intervalle, Fortsetzen eröffnet sie am gespeicherten Fortschritt erneut. Dadurch
+zählt weder Browserwechsel noch eine beliebig lange Pause zur Sendezeit. Ein
+Abschnittsreset ersetzt nur den aktiven Abschnittstimer; ein Gesamtreset löscht
+nur die Gesamtlaufintervalle. Beide ändern weder Piece-Status noch Reihenfolge,
+Restplanung oder Präsentationsstand.
+
+Die Restzeit ist eine Ableitung, kein zweiter Ablaufplan. Für jeden verbleibenden
+Abschnitt gilt entweder dessen positive explizite Dauer oder die Summe seiner
+verbleibenden Piece-Dauern. Bereits abgeschlossene Abschnitte werden ausgelassen,
+ungeplante Abschnitte werden sichtbar gezählt und eine Überziehung reduziert
+nicht die geplante Zeit kommender Inhalte.
+
+`completed` beendet einen Durchlauf, nicht automatisch dessen offene Pieces.
+Wiederaufnahme und neuer Durchlauf sind deshalb getrennte Befehle: Erstere
+bewahrt Intervalle und Fortschritt, letzterer setzt beides ausdrücklich zurück.
+Das private Markdownfeld „Interaktion“ folgt derselben Original-/Snapshotgrenze
+wie Moderation und Überleitung, ist aber nicht Teil der öffentlichen
+Präsentations-Positivliste.

docs/RELEASE_NOTES.md

@@ -0,0 +1,244 @@
+# Release Notes
+
+## 0.5.12 - Live-Regie und Sendungskalender
+
+Veröffentlicht am 24. Oktober 2026
+
+Sendewerk 0.5.12 macht aus der privaten Live-Steuerung eine kompakte Regieansicht
+für Vollbild, Smartphone und kleine Desktopfenster neben OBS oder Firebot. Die
+Sendungsübersicht erhält zusätzlich eine kontobezogen gespeicherte Listen- und
+Kalenderansicht. Die öffentliche heinzlive-Ausgabe und die gespeicherten
+Livezustände bleiben technisch getrennt.
+
+### Highlights
+
+- Ausgabe, Gesamtzeit, Abschnittszeit und Menü tragen in der Live-Kopfleiste
+  jetzt die passenden lokalen Classic-Regular-Icons. Pause beziehungsweise
+  Fortsetzen ist zusätzlich als direkter Iconbutton neben der Abschnittszeit
+  erreichbar.
+- Die Live-Regie verwendet die gesamte Fensterfläche ohne normale
+  App-Seitenleiste, mobilen App-Header oder Bottomnavigation.
+- Zwei kompakte Kopfzeilen halten Abschnitt, „Danach“, Menü, Ausgabe,
+  Abschnittscountdown und Ablauf gleichzeitig erreichbar. Der Sendungsname ist
+  in das Menü gewandert.
+- Lange Abschnitts- und Folgetitel bleiben einzeilig gekürzt und lassen sich per
+  Klick oder Tastatur vollständig aufklappen, ohne benachbarte Bedienelemente zu
+  überlagern.
+- Moderation und Ablauf bleiben auch bei einem nur 900 × 450 Pixel großen
+  Desktopfenster nebeneinander. Lange Inhalte scrollen innerhalb ihrer
+  Arbeitsfläche; Kopf- und Aktionszeile bleiben sichtbar.
+- Niedrige Desktopfenster verdichten Abstände und Bedienleisten anhand der
+  verfügbaren Höhe, ohne Text oder die gesamte Oberfläche zu skalieren.
+- Die feste Fußleiste ist auf „Zurück“, „Präsentieren“, „Überspringen“ und
+  „Erledigen & weiter“ reduziert. Das nächste Piece steht in der Kopfzeile, das
+  Leeren der Präsentation direkt am Ausgabezustand.
+- Auf dem Smartphone öffnet „Ablauf · Piece X/Y“ den Ablauf als separates Sheet,
+  während das aktuelle Piece die Hauptfläche bleibt. Fokusführung, Escape und
+  der Wechsel zurück auf eine breite Ansicht schließen den Modalzustand sauber.
+
+### Moderation und Materialien
+
+- Interner Titel, Einleitung, Moderationsstichpunkte und Überleitung erscheinen
+  in klarer Lesereihenfolge. Leere Bereiche werden weggelassen.
+- Recherche, Quellen, Werkzeuge und eigene Notizen sind kompakt beschriftet und
+  werden nur bei Bedarf geöffnet.
+- Die Prompter-Schriftgröße bleibt einstellbar und wird weiterhin lokal
+  gespeichert. Texte werden nicht automatisch verkleinert.
+- Piece-Position, Piece-Titel und Zeit stehen in einer gemeinsamen kompakten
+  Kopfzeile; dadurch beginnt die Einleitung weiter oben.
+
+### Ablauf und Liveverhalten
+
+- Pause und Fortsetzen steuern Piece-, Abschnitts- und Gesamtzeit gemeinsam und
+  zählen Pausen auch nach Reload oder Navigation nicht mit.
+- Gelaufene Gesamtzeit und geschätzte Restzeit lassen sich direkt umschalten;
+  die Auswahl bleibt lokal erhalten. Ungeplante verbleibende Abschnitte sind
+  sichtbar, ohne Abschnitts- und Piece-Dauern doppelt zu zählen.
+- Abschnitts- und Gesamtzeit lassen sich getrennt nach Bestätigung zurücksetzen.
+  Ablaufposition, Piece-Status, Restplanung und Präsentation bleiben dabei
+  unverändert.
+- Sendungen lassen sich ausdrücklich vorbereiten, starten, pausieren und
+  beenden. Nach dem Ende sind „Lauf fortsetzen“ und „Neuer Durchlauf“ getrennte
+  Aktionen; offene Pieces werden beim Beenden nicht automatisch erledigt.
+- Abschnitte sind kompakt aufklappbar; der aktuelle Abschnitt ist geöffnet und
+  das aktive Piece bleibt in der Ablaufspalte sichtbar.
+- Pieces kennzeichnen tatsächliches Live-Piece, lokal betrachtetes Piece und
+  ausgegebenes Piece getrennt. Jeder Eintrag lässt sich zur Betrachtung wählen,
+  einschließlich des ersten Eintrags.
+- Die Reserve bleibt zusammengeklappt erreichbar. Dauerhafte Sortierpfeile und
+  die separate große „Als Nächstes“-Karte entfallen; Umsortieren bleibt über
+  eine kompakte Aktion am jeweiligen Eintrag erreichbar.
+- Die lokal gespeicherte Leseposition gehört zum jeweiligen Piece. Eine direkte
+  Auswahl beginnt daher oben, ohne die Position des vorherigen Textes zu erben.
+- „Zurück“ und direkte Ablaufwahl verändern weder aktuelles Live-Piece noch
+  Erledigungsstatus, Timer oder Ausgabe. Bei einem nur betrachteten früheren
+  Piece bleiben Überspringen und Erledigen gesperrt. Nur „Präsentieren“ oder
+  „Präsentation leeren“ verändert die öffentliche Ausgabe.
+- Abschnittstimer, tatsächliche Laufzeiten, Livefortschritt und Wiederaufnahme
+  verwenden unverändert die vorhandenen persistenten Zustände.
+- „Live-Stand wiederaufnehmen“ erscheint nur bei einem tatsächlich
+  unterbrochenen Ablauf, nicht während eines aktiven Pieces.
+
+### Einstellungen
+
+- Ausgabekanal verbinden, Schlüssel erneuern, Kanal trennen, Theme wechseln,
+  Zeiten ein-/ausblenden und „Zur Planung“ bleiben im Regiemenü erreichbar.
+- Das Regiemenü erscheint als viewportgebundenes Popover sicher über den
+  Glasflächen. Es bleibt in kleinen Fenstern scrollbar erreichbar und schließt
+  mit Escape oder Außenklick; der Fokus kehrt zum Menüauslöser zurück.
+
+### Interaktion
+
+- „Interaktion“ ergänzt Piece und Sendungsfassung als optionales privates
+  Markdownfeld zwischen Moderationsstichpunkten und Überleitung.
+- Vorlagen, Duplikate, Einplanungen und die bewusste Aktualisierung aus dem
+  Fundus übernehmen das Feld jeweils als unabhängigen Snapshot.
+- Die private Live-Regie zeigt das Feld nur bei Inhalt. Die öffentliche
+  heinzlive-Ausgabe übernimmt es nicht.
+
+### Sendungsübersicht
+
+- Sendungskarten bleiben auf kleinen Bildschirmen kompakt: Status, Titel und
+  Termin stehen neben den horizontal angeordneten Abschnitts- und Zeitangaben,
+  statt die Karte durch vollständiges Stapeln unnötig zu erhöhen.
+- „Liste | Kalender“ schaltet zwischen der bekannten Sendungsliste und einer
+  Monatsansicht um; die Auswahl bleibt am angemeldeten Konto gespeichert.
+- Auf dem Desktop zeigt ein vollständiges Montag-bis-Sonntag-Raster alle Termine
+  des Monats. Mehrere Sendungen pro Tag bleiben vollständig sichtbar und nach
+  Uhrzeit sortiert.
+- Auf dem Smartphone wird derselbe Monat als chronologische Agenda dargestellt.
+  Vorheriger Monat, nächster Monat und der Sprung zu heute bleiben erreichbar.
+- Die Gruppierung verwendet `Europe/Berlin`. Sendungen ohne Startzeit stehen in
+  einem eigenen Bereich und verschwinden weder aus Liste noch Kalender.
+- Der Kalender ist eine Navigationsansicht. Termine werden weiterhin nur über
+  die bestehende Sendungsbearbeitung geändert; Termin-Drag-and-drop wurde nicht
+  ergänzt.
+
+### Update und Kompatibilität
+
+- `0012_show_overview_view.sql` ergänzt ausschließlich die kontobezogene
+  Listen-/Kalenderpräferenz mit dem sicheren Standardwert `list`.
+- Es ist keine Änderung der Konfiguration erforderlich.
+- `0013_live_controls_and_interaction.sql` ergänzt das private Interaktionsfeld
+  und persistente Gesamtzeitintervalle. Bestehende Piece-Laufintervalle werden
+  als Gesamtzeit übernommen.
+- Bestehende Sendungen, Livezustände, Abschnittstimer, Ausgabekanäle und
+  Präsentationssnapshots bleiben erhalten.
+- Paket, Lockdatei und Cloudron-Manifest tragen gemeinsam Version `0.5.12`.
+
+### Prüfung
+
+- Die ergänzte Iconleiste, Pause/Fortsetzen und die kompakte Sendungskarte wurden
+  gezielt in Chromium bei 670 × 450, 390 × 700 und 656 × 400 Pixeln geprüft.
+  Typprüfung, sechs Live-Verhaltenstests und Produktionsbuild sind erfolgreich.
+- Die vollständige Matrix wurde für diese Ergänzung nicht erneut ausgeführt; die
+  folgenden Gesamtnachweise stammen vom vorherigen 0.5.12-Stand.
+- 44 Unit- und Verhaltenstests sowie 17 Chromium-E2E-Abläufe sind erfolgreich.
+- Die Live-Regie wurde bei 1440 × 900, 900 × 450, 670 × 450 und 390 × 700 Pixeln
+  mit langen Titeln, sichtbarem Regiemenü, unabhängigen Scrollflächen und
+  mobilem Ablauf-Sheet geprüft; der Kalender zusätzlich bei 1440 × 1000 und
+  390 × 844 Pixeln.
+- Reales OBS, echte YouTube-/TikTok-Wiedergabe und Safari auf einem iOS-Gerät
+  standen nicht zur Verfügung.
+
+## 0.5.11 - Verwaltungskorrektur
+
+Veröffentlicht am 23. Oktober 2026
+
+- Der Dialog „Werkzeug hinzufügen“ bleibt beim Aufruf der Verwaltungsseite
+  wieder zuverlässig geschlossen.
+- Der Dialog erscheint erst, wenn ein neues Werkzeug angelegt oder ein
+  bestehendes Werkzeug bearbeitet wird.
+- Die Iconauswahl unter „Inhaltliche Zuordnung“ bleibt auf Desktop und
+  Smartphone vollständig im sichtbaren Browserbereich.
+- Die Korrektur gilt gleichermaßen für Desktop- und Smartphone-Ansichten und
+  verändert keine vorhandenen Werkzeuge oder Zuordnungen.
+
+## 0.5.10 - Editor-Erlebnis
+
+Veröffentlicht am 23. Oktober 2026
+
+Sendewerk 0.5.10 beschleunigt die tägliche Redaktionsarbeit und schärft die
+Grenze zwischen privaten Medien und der öffentlichen Präsentation. Titel,
+Themen, Werkzeuge und Präsentationsbilder lassen sich direkter bearbeiten; die
+wichtigsten Listen und Dialoge benötigen auf Desktop und Smartphone weniger
+Platz. Bestehende Sendungsfassungen bleiben bei späteren Änderungen am Fundus
+stabil.
+
+### Highlights
+
+- Titel von Fundus- und Sendungsfassungen lassen sich direkt in der jeweiligen
+  Ansicht ändern. Die Bedienung funktioniert auch vollständig per Tastatur.
+- Themen und Werkzeuge verwenden kompakte, durchsuchbare Auswahlflächen. Der
+  Werkzeugkatalog folgt nun demselben Bedienmuster wie die Themenverwaltung.
+- Für Themen, Werkzeuge, Navigation und Aktionen stehen 3.671 lokal
+  bereitgestellte Classic-Regular-Icons zur Verfügung. Zur Laufzeit werden
+  keine Icons von externen Diensten geladen.
+- Präsentationsbilder werden bewusst aus den aktiven Piece-Medien gewählt und
+  beim Einplanen in die Sendungsfassung übernommen. Private Uploads werden nicht
+  allein durch das Hochladen öffentlich.
+- Pieces lassen sich wiederherstellbar löschen. Bereits vorbereitete
+  Sendungsfassungen und ihre Medien-Snapshots bleiben dabei erhalten.
+- Die heinzlive-Ausgabe kann ausdrücklich geleert werden. Im leeren Zustand ist
+  sie vollständig transparent und zeigt auch keinen Verbindungsstatus.
+
+### Redaktion und Verwaltung
+
+- Der Werkzeugkatalog entspricht der Themenverwaltung: kompakte Glasfläche,
+  Icon, Name, Status und Bearbeitungsaktion statt dauerhaft offener Formulare.
+- Anlegen und Bearbeiten eines Werkzeugs verwenden denselben responsiven Dialog
+  für Name, Start-URL, Beschreibung, Icon, passende Formate und Aktivstatus.
+- Die Formatzuordnung nutzt dieselbe durchsuchbare Mehrfachauswahl wie andere
+  Zuordnungen. Deaktivierte Werkzeuge und bestehende Piece-Zuordnungen bleiben
+  erhalten.
+- Fundus, Eingang, Archiv, Vorlagen und Sendungsansichten sind kompakter und
+  bleiben per Klick, Touch und Tastatur bedienbar.
+
+### Pieces und Präsentation
+
+- Präsentationsbilder werden ausdrücklich aus aktiven Piece-Medien ausgewählt
+  und unveränderlich an Sendungsfassungen kopiert.
+- Entfernte Medien bleiben für bestehende Sendungsfassungen verfügbar, werden
+  aber nicht mehr für neue Einplanungen angeboten.
+- Pieces können wiederherstellbar gelöscht werden. Offene, nie live gelaufene
+  Verwendungen und Abschnitte lassen sich unter geschützten Bedingungen
+  entfernen.
+- Themenicons werden zusammen mit der jeweiligen Sendungsfassung gespeichert.
+  Spätere Änderungen an Thema, Werkzeug oder Original-Piece verändern eine
+  vorbereitete Sendung weiterhin nur nach ausdrücklicher Aktualisierung aus dem
+  Fundus.
+
+### Live-Ausgabe
+
+- Eine leere heinzlive-Ausgabe ist vollständig transparent und zeigt weder
+  Renderer noch Verbindungsstatus.
+- Eine aktive Präsentation lässt sich unabhängig vom aktuell laufenden Piece
+  leeren.
+
+### Update und Kompatibilität
+
+- `0010_editor_experience.sql` ergänzt Themenicons, Medien-Snapshots und Soft
+  Delete.
+- `0011_tool_icons.sql` ergänzt persistente Werkzeugicons mit einem sicheren
+  Standardwert. Werkzeug-IDs, Formatbeziehungen, Piece-Zuordnungen und
+  Deaktivierungszustände bleiben erhalten.
+- Die Migrationen laufen beim nächsten Serverstart automatisch. Vor dem Update
+  sollte wie üblich eine konsistente Sicherung der SQLite-Datenbank und des
+  Upload-Verzeichnisses angelegt werden.
+- Für dieses Release sind keine manuellen Datenkonvertierungen und keine
+  Änderungen an der Konfiguration erforderlich.
+
+### Prüfung
+
+- 40 Unit- und Verhaltenstests sowie 16 Chromium-E2E-Abläufe erfolgreich.
+- Werkzeugverwaltung, Iconauswahl und Piece-Werkzeugauswahl wurden zusätzlich
+  bei 1280 × 720 und 390 × 844 Pixeln visuell mit der Themenverwaltung
+  verglichen.
+- Reales OBS, echte YouTube-/TikTok-Wiedergabe und Safari auf einem iOS-Gerät
+  standen nicht zur Verfügung.
+
+### Noch nicht enthalten
+
+Der Abschluss und die Archivierung vollständiger Sendungen, externe
+Lesefreigaben, RSS-Import und API gehören zu späteren Etappen und sind nicht Teil
+von 0.5.10.

docs/STATUS.md

@@ -7,6 +7,249 @@ Anmeldung, Rollen, persistente Inhaltsbearbeitung, Sendungsplanung,
 Live-Steuerung, Präsentationsausgabe und lokaler Betriebsweg sind dokumentiert.
 Etappe 6 wurde nicht begonnen.
 
+## Live-Regie und Sendungskalender 0.5.12
+
+- die Live-Kopfleiste zeigt Classic-Regular-Icons für Ausgabe, Gesamtzeit,
+  Abschnitt, Menü und Ablauf; Pause/Fortsetzen liegt zusätzlich als direkter,
+  beschrifteter Iconbutton neben der Abschnittszeit
+- Sendungskarten ordnen Fakten auf kleinen Bildschirmen wieder horizontal an und
+  vermeiden dadurch die zuvor unnötig hohe Kartenfläche
+- Reparaturmigration `0014_live_show_timer_repair.sql` ergänzt fehlende
+  Gesamttimertabellen auch dann, wenn `0013` bereits in einem früheren
+  Zwischenstand protokolliert wurde; der 500-Fehler beim Laden von `/live` ist
+  damit behoben
+- gemeinsame persistente Pause für Piece-, Abschnitts- und Gesamttimer;
+  Fortsetzen zählt Pausenzeit weder nach Navigation noch nach Reload mit
+- getrennte bestätigungspflichtige Resets für Abschnitts- und Gesamtzeit, ohne
+  Piece-Status, Ablaufposition, Restplanung oder Präsentationsstand zu verändern
+- umschaltbare, lokal gemerkte Anzeige von gelaufener Gesamtzeit und geschätzter
+  Restzeit; Abschnitte ohne eigene Planung werden kenntlich gemacht und
+  Abschnitts- sowie Piece-Dauern nie doppelt addiert
+- explizite Sendungssteuerung für Entwurf, Bereit, Start, Pause, Ende,
+  Wiederaufnahme eines beendeten Laufs und klar getrennten neuen Durchlauf
+- optionales privates Markdownfeld „Interaktion“ zwischen Moderation und
+  Überleitung; Original, Vorlage, Sendungsfassung, Duplikation und bewusste
+  Fundus-Aktualisierung führen jeweils unabhängige Snapshots
+- „Interaktion“, Timer- und Sendungssteuerung bleiben aus der öffentlichen
+  heinzlive-Projektion ausgeschlossen
+- fokussierte private Liveansicht ohne normale App-Seitenleiste oder mobile
+  Bottomnavigation; Planung, Theme, Schriftgröße, Zeitdarstellung und
+  Ausgabekanal bleiben über das kompakte Regiemenü erreichbar
+- zweizeilige feste Kopfzeile: Abschnitt und „Danach“ teilen sich die erste
+  Zeile mit dem Menü; Ausgabe, Abschnittscountdown und Ablaufschalter bilden die
+  zweite Zeile. Der Sendungsname steht platzsparend im Menü
+- lange Abschnitts- und Folgetitel sind regulär einzeilig gekürzt und lassen
+  sich per Klick oder Tastatur vollständig aufklappen
+- feste, auf vier Kernaktionen reduzierte Fußleiste mit Zurück, Präsentieren,
+  Überspringen und kontextgerechtem Erledigen; das Leeren der Präsentation liegt
+  direkt beim Ausgabezustand
+- aktuelle Moderation und schmale Ablaufspalte bleiben auch bei 900 × 450 Pixeln
+  nebeneinander; beide Arbeitsflächen scrollen unabhängig, ohne die ganze Seite
+  oder einzelne Textblöcke zu verschachtelten Scrollcontainern zu machen
+- bei niedrigen Desktopfenstern werden Abstände und Bedienleisten anhand der
+  verfügbaren Höhe verdichtet, ohne Text oder Gesamtoberfläche zu skalieren
+- auf schmalen Ansichten bleibt das Piece die Hauptfläche und der Ablauf öffnet
+  als separates, safe-area-fähiges Sheet mit Fokusführung und Escape-Schließen
+- kompakter aufklappbarer Ablauf mit ausgeschriebenen Zuständen, lokaler
+  Betrachtung jedes Pieces, automatisch sichtbarem aktuellen Eintrag und
+  zusammengeklappter Reserve; Sortierung bleibt in einer kompakten Aktion
+  erreichbar, dauerhafte Sortierpfeile entfallen
+- die Leseposition wird je Piece lokal erhalten; ein erstmals gewähltes Piece
+  beginnt oben statt an der Position des vorherigen Textes
+- Piece-Position, Titel und Zeit teilen sich einen kompakten Piece-Kopf, ohne die
+  einstellbare Moderationsschrift zu verkleinern
+- das Regiemenü liegt als viewportgebundenes Popover sicher über den Glasflächen,
+  bleibt scrollbar erreichbar und schließt per Escape oder Außenklick mit
+  Fokus-Rückkehr zum Auslöser
+- Recherche, Quellen, Werkzeuge und eigene Notizen erscheinen nur bei Bedarf;
+  leere Moderationsbereiche werden nicht dargestellt
+- Zurück und direkte Ablaufwahl verändern weder tatsächliches Live-Piece noch
+  Status, Timer oder öffentliche Ausgabe; Überspringen und Erledigen bleiben bei
+  einem nur betrachteten früheren Piece gesperrt
+- Liste und Kalender teilen dieselben Sendungsdaten; der Desktop zeigt ein
+  vollständiges Monatsraster, das Smartphone eine chronologische Monatsagenda
+- Monatswechsel, heutiger Tag, mehrere Termine pro Tag und Sendungen ohne Termin
+  bleiben sichtbar; die bevorzugte Listen- oder Kalenderansicht wird je Konto
+  gespeichert
+- die Wiederaufnahmeaktion erscheint nur bei tatsächlich unterbrochenem
+  Live-Stand statt während eines laufenden Pieces
+
+Etappe 6 bleibt unverändert unbegonnen.
+
+Die bestehende lokale Prüfmatrix umfasst 44 Verhaltenstests und 17
+Chromium-Abläufe. Die nachträgliche Icon-, Pause- und Kartenkorrektur wurde
+zusätzlich mit Typprüfung, sechs Live-Verhaltenstests, Produktionsbuild und
+gezielten Chromium-Abläufen bei 670 × 450, 390 × 700 und 656 × 400 Pixeln
+geprüft. Die vollständige Matrix wurde dafür nicht erneut ausgeführt.
+Reales OBS, echte YouTube-/TikTok-Wiedergabe sowie Safari auf einem iOS-Gerät
+bleiben mangels verfügbarer Umgebung offen.
+
+## Verwaltungskorrektur 0.5.11
+
+- der Werkzeugdialog bleibt beim Laden geschlossen und öffnet erst nach einer
+  bewussten Aktion
+- die Themen-Iconauswahl bleibt bei mobilen und breiten Ansichten vollständig
+  innerhalb des Viewports
+
+## Editor-Erlebnis 0.5.10
+
+- direkte, tastaturbedienbare Titelbearbeitung in Fundus- und Sendungsfassungen
+  sowie gemeinsame kompakte Auswahlflächen für Themen und Werkzeuge
+- vollständiger lokaler Classic-Regular-Katalog mit 3.671 Icons für Navigation,
+  Aktionen sowie frei wählbare Themen- und Werkzeugicons; durchsuchbare
+  Metadaten und SVG-Sprite vermeiden externe Laufzeitabhängigkeiten
+- kompakter Werkzeugkatalog nach dem Muster der Themenverwaltung; Anlegen und
+  Bearbeiten teilen einen responsiven Dialog mit gestalteter Icon- und
+  Formatauswahl, bestehende Zuordnungen und Deaktivierung bleiben erhalten
+- Präsentationsbilder werden bewusst aus aktiven Piece-Medien ausgewählt und als
+  unveränderlicher Usage-Snapshot eingeplant; private Bilder werden dadurch
+  weder implizit noch nach späterer Originaländerung öffentlich
+- entfernte Medien bleiben für bestehende Sendungsfassungen erhalten, während
+  neue Einplanungen nur aktive Medien übernehmen
+- wiederherstellbares Soft Delete für Pieces sowie geschütztes Entfernen offener,
+  nie live gelaufener Verwendungen und Abschnitte
+- kompaktere Fundus-, Eingangs-, Archiv-, Vorlagen- und Sendungsansichten mit
+  mobilen, touch- und tastaturbedienbaren Alternativen
+- transparente leere heinzlive-Ausgabe ohne sichtbaren Renderer oder
+  Verbindungsstatus; die Steuerung kann eine aktive Präsentation unabhängig vom
+  aktuellen Piece leeren
+
+Etappe 6 bleibt unverändert unbegonnen. Die lokale Prüfmatrix umfasst 40
+Verhaltenstests und 16 Chromium-Abläufe. Reales OBS, echte
+YouTube-/TikTok-Wiedergabe sowie Safari auf einem iOS-Gerät bleiben mangels
+verfügbarer Umgebung offen.
+
+## Live-Werkbank 0.5.9
+
+- globale Favoriten am Fundus-Original mit stabiler Vorsortierung; verwendete
+  Favoriten bleiben sichtbar, geplante Favoriten respektieren weiterhin den
+  Einplanungsfilter
+- Barkeeper-Werkzeugkatalog mit Start-URL, Beschreibung, passenden Formaten und
+  verlustfreier Deaktivierung; Arbeitslink und Notiz bleiben für die gesamte
+  Thekencrew im gemeinsamen Piece- und Verwendungseditor bearbeitbar
+- vollständige, voneinander unabhängige Usage-Snapshots für Quellen, Werkzeuge
+  und alphabetisch stabilisierte Themen; spätere Original- oder
+  Katalogänderungen wirken erst nach bewusster Aktualisierung aus dem Fundus
+- kompakte private Materialliste in der Live-Steuerung mit Arbeitslink vor
+  Start-URL und verständlichem Zustand ohne URL
+- responsive Themen-Dachzeile in der Publikumsausgabe; ohne Thema bleibt sie
+  vollständig aus, während Präsentations- und interner Titel getrennt bleiben
+- persistenter Abschnitts-Countdown für positive explizite Abschnittsdauern mit
+  eingefrorenem Soll, sekündlicher Anzeige, Goldwarnung ab zwei Minuten und
+  roter Überziehung ohne Ton, Blinken oder automatische Weiterschaltung
+
+Etappe 6 bleibt unverändert unbegonnen. Reales OBS und echte
+YouTube-/TikTok-Wiedergabe bleiben mangels verfügbarer Umgebung offen.
+
+Die lokale Prüfmatrix umfasst 37 Verhaltenstests und 16 Chromium-Abläufe.
+Desktop, Smartphone, Light/Dark, Favoritenfilter, Werkzeug-Deaktivierung,
+Snapshot-Stabilität, private Live-Materialien, öffentliche Themenprojektion und
+persistente Abschnittszeit wurden geprüft.
+
+## Redaktionelle Arbeitsabläufe 0.5.8
+
+- persistente Piece-Vorlagen als unabhängige, revisionierte Snapshots; eigene
+  Vorlagen lassen sich aus Fundus-Pieces speichern, erneut verwenden und löschen
+- atomare, idempotente Piece-Neuanlage direkt in einer Sendung einschließlich
+  Einplanung; fehlgeschlagene Schritte hinterlassen weder Piece noch Verwendung
+- getrennte interne und öffentliche Titel an Piece und Verwendung; ein leerer
+  Präsentationstitel fällt kontrolliert auf den internen Titel zurück
+- präzises Entfernen einzelner Verwendungen mit Bestätigung sowie zusätzlicher
+  Drag-and-drop-Rückgabe in den Fundusbereich
+- Auswahl jedes konkreten Ablauf-Pieces in der Live-Steuerung, einschließlich
+  erstem und bereits erledigtem Eintrag
+- stabiler OBS-Ausgabekanal `/heinzlive/default` mit geheimem URL-Fragment,
+  HttpOnly-Cookie-Austausch und ausdrücklicher Schlüsselrotation
+- öffentliche Ausgabe als Positivliste: implizite Piece-Quellen und private
+  Uploads werden nicht mehr veröffentlicht; nur ausdrücklich gewählte
+  Link-/Videoquellen und deren erlaubte Vorschau bleiben sichtbar
+
+Die vollständige lokale Prüfmatrix umfasst 33 Verhaltenstests und 15
+Chromium-Abläufe. Desktop, Mobil, Light/Dark, Tastatur- und Touchalternativen,
+Planung, Live-Ausgabe sowie anonyme Ausgabedaten wurden geprüft. Reales OBS und
+echte YouTube-/TikTok-Wiedergabe bleiben mangels verfügbarer Umgebung offen.
+
+## Materialkorrektur 0.5.7
+
+- statische Gold-/Blauviolettlichter so positioniert und verstärkt, dass sie im
+  eigentlichen Arbeitsbereich statt fast ausschließlich hinter der Navigation
+  sichtbar werden
+- gemeinsame Materialtokens auf Außenglas, dunkle Innenfläche und tiefe
+  Ablaufkarte reduziert; verschachtelte Abschnitte, Pieces und Aktionsgruppen
+  werden nach innen dunkler statt heller und blaugrau
+- aktive Editortabs transparent goldgetönt und private Recherche sowie
+  Quellen-/Materialbereiche auf transparente Nachtblauflächen zurückgeführt
+- Dialog-Backdrop von starker Abdunklung und Unschärfe auf eine leichtere
+  Trennung reduziert, sodass die Lichtstimmung bei geöffnetem Editor erhalten
+  bleibt
+- deckende Schreibfelder, Goldfokus, Lightmode, Mobilansicht und lesbare
+  Komponentenfüllungen ohne verfügbaren Blur bleiben erhalten
+
+Die berechneten Hintergründe, Transparenzen, Filter und Begrenzungseigenschaften
+wurden vor und nach der Korrektur in Chromium kontrolliert. Sendungsplanung,
+Sendungstext und Recherche wurden bei 1440 × 1000 und 390 × 844 Pixeln in beiden
+Themes visuell geprüft.
+
+## Oberflächenkorrektur 0.5.6
+
+- sichtbare statische Gold- und Blauviolettlichter hinter den halbtransparenten
+  Navigations- und Editorflächen
+- klarere Glaswirkung in Navigation sowie Kopf, Tabs und Fuß des Piece-Editors;
+  Schreibflächen bleiben deckend, ruhig und goldfokussiert
+- Fundus mit dauerhaft sichtbarer Suche und Neuanlage, aufklappbaren Zusatzfiltern
+  und inhaltsorientierten, vollständig anklickbaren Zeilen
+- vorhandene Vorschaubilder beziehungsweise kleine Symbolplatzhalter sowie
+  gebündelte Menüs für Duplizieren und Archivieren
+- bestehende Server-Actions, Filterlogik und Editor-Bereiche unverändert
+
+Geprüft wurden `npm run check` sowie Fundus und geöffneter Piece-Editor in
+Chromium bei 1440 × 1000 und 390 × 844 Pixeln in Light/Dark. Die gezielte
+Kontrolle umfasste Tastaturöffnung, Menüs, Fokus, Glaswerte, Seitenüberlauf und
+visuell geprüfte Screenshots. Produktionsbuild und vollständige Testmatrix wurden
+gemäß Auftrag nicht ausgeführt.
+
+## Oberflächenkorrektur 0.5.5
+
+- dunkle Grundfläche mit sehr zurückhaltenden Gold-/Cyan-Lichtfeldern innerhalb
+  der Anwendung statt gleichmäßig deckender Blauflächen
+- Navigation, große Arbeitsflächen und Piece-Dialog als dunkles beziehungsweise
+  helles Glas mit feiner Lichtkante, Unschärfe und ruhigem Schatten
+- Gold für Dialogkontur, Fokus, aktive Zustände und Hauptaktionen; Cyan nur noch
+  für ergänzende redaktionelle Hinweise und Links
+- klar abgegrenzte, weitgehend deckende Schreibfelder mit Goldfokus, Platzhaltern
+  und nach Textrolle abgestuften Höhen
+- bestehende nachträgliche CSS-Override-Schicht entfernt und die Gestaltung in
+  gemeinsame Tokens und ursprüngliche Komponentenregeln zurückgeführt
+
+Geprüft wurden Typen, Produktionsbuild sowie gezielte Chromium-Ansichten von
+Eingang, Fundus, Piece-Editor, Sendungsplanung und Live-Steuerung bei 1440 × 1000
+und 390 × 844 Pixeln in beiden Themes. Die vollständige Unit- und E2E-Matrix
+bleibt wie beauftragt Schritt 3 vorbehalten.
+
+## Oberflächenrelease 0.5.4
+
+- gemeinsame Light-/Dark-Tokens für ruhige Arbeitsflächen, Cyan als
+  Interaktionsfarbe und Gold für die jeweilige Hauptaktion
+- Darkmode im heinzlive-Farbraum mit Hintergrund `#0B1220`, Flächen `#152238`,
+  Text `#FFF7E8`, Sekundärtext `#A9B6C8`, Gold `#E7B957`, Cyan `#67DDE8` und
+  Grenzen `#30435C`
+- vereinheitlichte Navigation, Formulare, Meldungen, Listen, Sendungsplan,
+  Live-Steuerung und Piece-Dialoge ohne Änderung der Bedienlogik
+- kompaktere Planzeilen mit sichtbarem Drag-Griff und waagerechter Aktionsgruppe;
+  Klick-, Touch- und Tastaturalternativen bleiben erhalten
+- verständliche Kontextnamen „Fundusfassung“ und „Sendungsfassung“ sowie weniger
+  technische Erläuterungen im redaktionellen Arbeitsfluss
+- dezente Speicheraktion im gespeicherten Zustand und hervorgehobene Aktion bei
+  ungespeicherten Änderungen, Fehlern oder Konflikten
+
+Für diesen Design-Release wurden `npm run check`, `npm run build` und gezielte
+Chromium-Sichtkontrollen auf Eingang, Fundus, Piece-Editor, Sendungsplan und
+Live-Steuerung bei 1440 × 1000 sowie 390 × 844 Pixeln in Light/Dark ausgeführt.
+Konsolenfehler und horizontaler Seitenüberlauf traten dabei nicht auf. Die
+vollständige Unit- und E2E-Matrix wurde für die rein visuelle Änderung bewusst
+nicht erneut ausgeführt; die fachlichen Nachweise der Etappen 1 bis 5 bleiben
+unverändert.
+
 ## Umgesetzter Stand Etappe 1
 
 - SvelteKit-/TypeScript-Monolith mit Node-Adapter

migrations/0007_editorial_workflows.sql

@@ -0,0 +1,58 @@
+ALTER TABLE pieces ADD COLUMN output_title TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN output_title_snapshot TEXT NOT NULL DEFAULT '';
+
+CREATE TABLE piece_templates (
+	id TEXT PRIMARY KEY,
+	name TEXT NOT NULL UNIQUE,
+	description TEXT NOT NULL DEFAULT '',
+	snapshot_json TEXT NOT NULL CHECK (json_valid(snapshot_json)),
+	revision INTEGER NOT NULL DEFAULT 1 CHECK (revision >= 1),
+	created_at_utc TEXT NOT NULL,
+	updated_at_utc TEXT NOT NULL
+);
+
+INSERT INTO piece_templates (
+	id, name, description, snapshot_json, revision, created_at_utc, updated_at_utc
+) VALUES
+	(
+		'talk', 'Gespräch',
+		'Leitfragen, Recherche und eine klare Überleitung.',
+		'{"title":"Unbenanntes Gespräch","formatId":"format-talk","moderationNotes":"## Leitfragen\n\n- ","categoryIds":["cat-jc"]}',
+		1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
+	),
+	(
+		'find', 'Reaction / Fundstück',
+		'Quelle, Einordnung und präsentierbare Kernaussage.',
+		'{"title":"Neues Fundstück","formatId":"format-find","presentationText":"## Kernaussage\n\n","categoryIds":["cat-reaction"]}',
+		1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
+	),
+	(
+		'interaction', 'Interaktion',
+		'Quiz, Publikumsfrage oder kleines Spiel.',
+		'{"title":"Neue Interaktion","formatId":"format-quiz","moderationNotes":"## Ablauf\n\n1. ","categoryIds":["cat-game"]}',
+		1, '2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z'
+	);
+
+CREATE TABLE planning_commands (
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	command_id TEXT NOT NULL,
+	piece_id TEXT NOT NULL REFERENCES pieces(id) ON DELETE CASCADE,
+	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
+	result_revision INTEGER NOT NULL CHECK (result_revision >= 1),
+	created_at_utc TEXT NOT NULL,
+	PRIMARY KEY (show_id, command_id)
+);
+
+CREATE TABLE presentation_channels (
+	id TEXT PRIMARY KEY,
+	name TEXT NOT NULL,
+	access_key TEXT NOT NULL,
+	key_hash TEXT NOT NULL UNIQUE,
+	show_id TEXT REFERENCES shows(id) ON DELETE SET NULL,
+	revision INTEGER NOT NULL DEFAULT 0 CHECK (revision >= 0),
+	created_at_utc TEXT NOT NULL,
+	updated_at_utc TEXT NOT NULL
+);
+
+UPDATE presentation_access_tokens
+SET revoked_at_utc = COALESCE(revoked_at_utc, '2026-10-23T00:00:00.000Z');

migrations/0008_durable_planning_commands.sql

@@ -0,0 +1,18 @@
+CREATE TABLE planning_commands_durable (
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	command_id TEXT NOT NULL,
+	piece_id TEXT NOT NULL,
+	usage_id TEXT NOT NULL,
+	result_revision INTEGER NOT NULL CHECK (result_revision >= 1),
+	created_at_utc TEXT NOT NULL,
+	PRIMARY KEY (show_id, command_id)
+);
+
+INSERT INTO planning_commands_durable (
+	show_id, command_id, piece_id, usage_id, result_revision, created_at_utc
+)
+SELECT show_id, command_id, piece_id, usage_id, result_revision, created_at_utc
+FROM planning_commands;
+
+DROP TABLE planning_commands;
+ALTER TABLE planning_commands_durable RENAME TO planning_commands;

migrations/0009_live_workbench.sql

@@ -0,0 +1,102 @@
+ALTER TABLE pieces ADD COLUMN is_favorite INTEGER NOT NULL DEFAULT 0
+	CHECK (is_favorite IN (0, 1));
+
+CREATE TABLE tools (
+	id TEXT PRIMARY KEY,
+	name TEXT NOT NULL UNIQUE,
+	start_url TEXT NOT NULL DEFAULT '',
+	description TEXT NOT NULL DEFAULT '',
+	is_active INTEGER NOT NULL DEFAULT 1 CHECK (is_active IN (0, 1)),
+	created_at_utc TEXT NOT NULL,
+	updated_at_utc TEXT NOT NULL
+);
+
+CREATE TABLE tool_formats (
+	tool_id TEXT NOT NULL REFERENCES tools(id) ON DELETE CASCADE,
+	format_id TEXT NOT NULL REFERENCES formats(id) ON DELETE CASCADE,
+	PRIMARY KEY (tool_id, format_id)
+);
+
+CREATE TABLE piece_tools (
+	id TEXT PRIMARY KEY,
+	piece_id TEXT NOT NULL REFERENCES pieces(id) ON DELETE CASCADE,
+	tool_id TEXT NOT NULL REFERENCES tools(id) ON DELETE RESTRICT,
+	work_url TEXT NOT NULL DEFAULT '',
+	note TEXT NOT NULL DEFAULT '',
+	position INTEGER NOT NULL CHECK (position >= 0),
+	UNIQUE (piece_id, tool_id),
+	UNIQUE (piece_id, position)
+);
+
+CREATE TABLE usage_source_snapshots (
+	id TEXT PRIMARY KEY,
+	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
+	label TEXT NOT NULL,
+	url TEXT NOT NULL,
+	timecode_seconds INTEGER CHECK (timecode_seconds IS NULL OR timecode_seconds >= 0),
+	position INTEGER NOT NULL CHECK (position >= 0),
+	UNIQUE (usage_id, position)
+);
+
+CREATE TABLE usage_tool_snapshots (
+	id TEXT PRIMARY KEY,
+	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
+	original_tool_id TEXT REFERENCES tools(id) ON DELETE SET NULL,
+	name TEXT NOT NULL,
+	start_url TEXT NOT NULL DEFAULT '',
+	work_url TEXT NOT NULL DEFAULT '',
+	note TEXT NOT NULL DEFAULT '',
+	position INTEGER NOT NULL CHECK (position >= 0),
+	UNIQUE (usage_id, position)
+);
+
+CREATE TABLE usage_topic_snapshots (
+	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
+	name TEXT NOT NULL,
+	position INTEGER NOT NULL CHECK (position >= 0),
+	PRIMARY KEY (usage_id, position)
+);
+
+CREATE TABLE live_section_timers (
+	id TEXT PRIMARY KEY,
+	show_id TEXT NOT NULL REFERENCES shows(id) ON DELETE CASCADE,
+	section_id TEXT NOT NULL REFERENCES show_sections(id) ON DELETE CASCADE,
+	planned_duration_seconds INTEGER NOT NULL CHECK (planned_duration_seconds > 0),
+	started_at_utc TEXT NOT NULL,
+	ended_at_utc TEXT,
+	CHECK (ended_at_utc IS NULL OR ended_at_utc >= started_at_utc)
+);
+
+CREATE TABLE live_section_timer_runs (
+	id TEXT PRIMARY KEY,
+	timer_id TEXT NOT NULL REFERENCES live_section_timers(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 INDEX idx_piece_tools_piece ON piece_tools(piece_id, position);
+CREATE INDEX idx_tool_formats_format ON tool_formats(format_id, tool_id);
+CREATE INDEX idx_usage_sources_usage ON usage_source_snapshots(usage_id, position);
+CREATE INDEX idx_usage_tools_usage ON usage_tool_snapshots(usage_id, position);
+CREATE UNIQUE INDEX idx_one_open_section_timer_per_show
+	ON live_section_timers(show_id) WHERE ended_at_utc IS NULL;
+CREATE UNIQUE INDEX idx_one_open_run_per_section_timer
+	ON live_section_timer_runs(timer_id) WHERE ended_at_utc IS NULL;
+
+INSERT INTO usage_source_snapshots (
+	id, usage_id, label, url, timecode_seconds, position
+)
+SELECT lower(hex(randomblob(16))), u.id, ps.label, ps.url, ps.timecode_seconds, ps.position
+FROM piece_usages u
+JOIN piece_sources ps ON ps.piece_id = u.original_piece_id;
+
+INSERT INTO usage_topic_snapshots (usage_id, name, position)
+SELECT usage_id, name, position
+FROM (
+	SELECT u.id AS usage_id, t.name,
+		row_number() OVER (PARTITION BY u.id ORDER BY t.name, t.id) - 1 AS position
+	FROM piece_usages u
+	JOIN piece_topics pt ON pt.piece_id = u.original_piece_id
+	JOIN topics t ON t.id = pt.topic_id
+);

migrations/0010_editor_experience.sql

@@ -0,0 +1,49 @@
+ALTER TABLE topics ADD COLUMN icon_name TEXT NOT NULL DEFAULT '';
+
+ALTER TABLE pieces ADD COLUMN deleted_at_utc TEXT;
+
+ALTER TABLE piece_media ADD COLUMN removed_at_utc TEXT;
+
+CREATE TABLE piece_presentation_media (
+	piece_id TEXT PRIMARY KEY REFERENCES pieces(id) ON DELETE CASCADE,
+	media_id TEXT NOT NULL UNIQUE REFERENCES piece_media(id) ON DELETE RESTRICT
+);
+
+CREATE TRIGGER validate_piece_presentation_media_insert
+BEFORE INSERT ON piece_presentation_media
+WHEN NOT EXISTS (
+	SELECT 1 FROM piece_media
+	WHERE id = NEW.media_id AND piece_id = NEW.piece_id AND removed_at_utc IS NULL
+)
+BEGIN
+	SELECT RAISE(ABORT, 'presentation media does not belong to piece');
+END;
+
+CREATE TRIGGER validate_piece_presentation_media_update
+BEFORE UPDATE ON piece_presentation_media
+WHEN NOT EXISTS (
+	SELECT 1 FROM piece_media
+	WHERE id = NEW.media_id AND piece_id = NEW.piece_id AND removed_at_utc IS NULL
+)
+BEGIN
+	SELECT RAISE(ABORT, 'presentation media does not belong to piece');
+END;
+
+ALTER TABLE usage_topic_snapshots ADD COLUMN icon_name TEXT NOT NULL DEFAULT '';
+
+CREATE TABLE usage_media_snapshots (
+	id TEXT PRIMARY KEY,
+	usage_id TEXT NOT NULL REFERENCES piece_usages(id) ON DELETE CASCADE,
+	original_media_id TEXT NOT NULL REFERENCES piece_media(id) ON DELETE RESTRICT,
+	alt_text TEXT NOT NULL DEFAULT '',
+	position INTEGER NOT NULL CHECK (position >= 0),
+	is_presentation INTEGER NOT NULL DEFAULT 0 CHECK (is_presentation IN (0, 1)),
+	UNIQUE (usage_id, position)
+);
+
+CREATE INDEX idx_pieces_deleted_at ON pieces(deleted_at_utc);
+CREATE INDEX idx_piece_media_active ON piece_media(piece_id, position)
+	WHERE removed_at_utc IS NULL;
+CREATE INDEX idx_usage_media_usage ON usage_media_snapshots(usage_id, position);
+CREATE UNIQUE INDEX idx_one_presentation_media_per_usage
+	ON usage_media_snapshots(usage_id) WHERE is_presentation = 1;

migrations/0011_tool_icons.sql

@@ -0,0 +1 @@
+ALTER TABLE tools ADD COLUMN icon_name TEXT NOT NULL DEFAULT 'wrench';

migrations/0012_show_overview_view.sql

@@ -0,0 +1,3 @@
+ALTER TABLE users
+ADD COLUMN show_overview_view TEXT NOT NULL DEFAULT 'list'
+CHECK (show_overview_view IN ('list', 'calendar'));

migrations/0013_live_controls_and_interaction.sql

@@ -0,0 +1,21 @@
+ALTER TABLE pieces ADD COLUMN interaction_text TEXT NOT NULL DEFAULT '';
+ALTER TABLE piece_usages ADD COLUMN interaction_snapshot TEXT NOT NULL DEFAULT '';
+
+CREATE TABLE live_show_timer_runs (
+  id TEXT PRIMARY KEY,
+  show_id TEXT NOT NULL REFERENCES shows(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_open_show_timer_run
+ON live_show_timer_runs(show_id)
+WHERE ended_at_utc IS NULL;
+
+CREATE INDEX idx_live_show_timer_runs_show
+ON live_show_timer_runs(show_id, started_at_utc);
+
+INSERT INTO live_show_timer_runs (id, show_id, started_at_utc, ended_at_utc)
+SELECT 'migrated-' || id, show_id, started_at_utc, ended_at_utc
+FROM live_usage_runs;

migrations/0014_live_show_timer_repair.sql

@@ -0,0 +1,18 @@
+CREATE TABLE IF NOT EXISTS live_show_timer_runs (
+  id TEXT PRIMARY KEY,
+  show_id TEXT NOT NULL REFERENCES shows(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 IF NOT EXISTS idx_one_open_show_timer_run
+ON live_show_timer_runs(show_id)
+WHERE ended_at_utc IS NULL;
+
+CREATE INDEX IF NOT EXISTS idx_live_show_timer_runs_show
+ON live_show_timer_runs(show_id, started_at_utc);
+
+INSERT OR IGNORE INTO live_show_timer_runs (id, show_id, started_at_utc, ended_at_utc)
+SELECT 'migrated-' || id, show_id, started_at_utc, ended_at_utc
+FROM live_usage_runs;

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "sendewerk",
-	"version": "0.5.3",
+	"version": "0.5.12",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "sendewerk",
-			"version": "0.5.3",
+			"version": "0.5.12",
 			"dependencies": {
 				"@node-rs/argon2": "^2.2.2",
 				"better-sqlite3": "^13.0.3",

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "sendewerk",
 	"private": true,
-	"version": "0.5.3",
+	"version": "0.5.12",
 	"type": "module",
 	"engines": {
 		"node": ">=22.17 <25"

scripts/generate-classic-regular-icons.mjs

@@ -0,0 +1,51 @@
+import { copyFileSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import path from 'node:path';
+
+const sourceRoot = process.argv[2];
+if (!sourceRoot) {
+	throw new Error('Usage: node scripts/generate-classic-regular-icons.mjs <font-awesome-web-root>');
+}
+
+const javascript = readFileSync(path.join(sourceRoot, 'js', 'regular.js'), 'utf8');
+const metadata = JSON.parse(readFileSync(path.join(sourceRoot, 'metadata', 'icons.json'), 'utf8'));
+const start = javascript.indexOf('  var icons = ') + '  var icons = '.length;
+const end = javascript.indexOf('\n  };', start) + '\n  }'.length;
+if (start < '  var icons = '.length || end < start)
+	throw new Error('Classic Regular icons not found');
+
+const definitions = JSON.parse(javascript.slice(start, end));
+const icons = Object.keys(definitions)
+	.map((name) => {
+		const details = metadata[name];
+		return {
+			name,
+			label: details?.label ?? name.replaceAll('-', ' '),
+			terms: details?.search?.terms ?? []
+		};
+	})
+	.sort((left, right) => left.label.localeCompare(right.label, 'en'));
+
+const output = `// Generated from Font Awesome Pro Plus 7.0.0 Classic Regular metadata.
+// Covered by the Font Awesome Pro commercial license; see THIRD_PARTY_NOTICES.md.
+export type ClassicRegularIcon = {
+\tname: string;
+\tlabel: string;
+\tterms: readonly string[];
+};
+
+export const classicRegularIcons: readonly ClassicRegularIcon[] = ${JSON.stringify(icons)};
+
+export type IconName = string;
+
+export const classicRegularIconNames = new Set<string>(
+	classicRegularIcons.map((icon) => icon.name)
+);
+`;
+
+writeFileSync('src/lib/icons/classic-regular.ts', output);
+mkdirSync('static/icons', { recursive: true });
+copyFileSync(
+	path.join(sourceRoot, 'sprites-full', 'regular.svg'),
+	'static/icons/classic-regular.svg'
+);
+console.log(`Generated ${icons.length} Classic Regular icons.`);

scripts/seed.mjs

@@ -425,6 +425,28 @@ export function seed(databasePath = getPaths().database) {
 				]
 			]
 		);
+		database.prepare('DELETE FROM usage_source_snapshots').run();
+		database
+			.prepare(
+				`INSERT INTO usage_source_snapshots
+				 (id, usage_id, label, url, timecode_seconds, position)
+				 SELECT 'seed-source-' || u.id || '-' || ps.position, u.id, ps.label, ps.url,
+				 ps.timecode_seconds, ps.position
+				 FROM piece_usages u JOIN piece_sources ps ON ps.piece_id = u.original_piece_id`
+			)
+			.run();
+		database.prepare('DELETE FROM usage_topic_snapshots').run();
+		database
+			.prepare(
+				`INSERT INTO usage_topic_snapshots (usage_id, name, position)
+				 SELECT usage_id, name, position FROM (
+					SELECT u.id AS usage_id, t.name,
+					row_number() OVER (PARTITION BY u.id ORDER BY t.name, t.id) - 1 AS position
+					FROM piece_usages u JOIN piece_topics pt ON pt.piece_id = u.original_piece_id
+					JOIN topics t ON t.id = pt.topic_id
+				 )`
+			)
+			.run();
 	});
 
 	seedDatabase();

src/lib/calendar.spec.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import {
+	berlinDateKey,
+	buildCalendarDays,
+	formatMonthLabel,
+	normalizeMonthKey,
+	shiftMonth
+} from './calendar.js';
+
+describe('show calendar', () => {
+	it('groups UTC instants by their Berlin civil date', () => {
+		expect(berlinDateKey('2026-09-30T22:30:00.000Z')).toBe('2026-10-01');
+		expect(berlinDateKey('2026-12-31T23:30:00.000Z')).toBe('2027-01-01');
+	});
+
+	it('builds a Monday-first six-week month without dropping boundary days', () => {
+		const days = buildCalendarDays('2026-10', '2026-10-24');
+		expect(days).toHaveLength(42);
+		expect(days[0]).toMatchObject({ date: '2026-09-28', inSelectedMonth: false });
+		expect(days.find((day) => day.date === '2026-10-24')?.isToday).toBe(true);
+		expect(days.at(-1)?.date).toBe('2026-11-08');
+	});
+
+	it('moves across year boundaries and validates month keys', () => {
+		expect(shiftMonth('2026-12', 1)).toBe('2027-01');
+		expect(shiftMonth('2026-01', -1)).toBe('2025-12');
+		expect(normalizeMonthKey('2026-13', '2026-10')).toBe('2026-10');
+		expect(normalizeMonthKey('2026-02', '2026-10')).toBe('2026-02');
+		expect(formatMonthLabel('2026-10')).toBe('Oktober 2026');
+	});
+});

src/lib/calendar.ts

@@ -0,0 +1,75 @@
+export const BERLIN_TIME_ZONE = 'Europe/Berlin';
+
+export type CalendarDay = {
+	date: string;
+	dayNumber: number;
+	inSelectedMonth: boolean;
+	isToday: boolean;
+};
+
+const berlinDateFormatter = new Intl.DateTimeFormat('en-CA', {
+	timeZone: BERLIN_TIME_ZONE,
+	year: 'numeric',
+	month: '2-digit',
+	day: '2-digit'
+});
+
+function padded(value: number) {
+	return String(value).padStart(2, '0');
+}
+
+function dateParts(value: string | Date) {
+	const parts = berlinDateFormatter.formatToParts(
+		typeof value === 'string' ? new Date(value) : value
+	);
+	const read = (type: Intl.DateTimeFormatPartTypes) =>
+		Number(parts.find((part) => part.type === type)?.value);
+	return { year: read('year'), month: read('month'), day: read('day') };
+}
+
+export function berlinDateKey(value: string | Date) {
+	const parts = dateParts(value);
+	return `${parts.year}-${padded(parts.month)}-${padded(parts.day)}`;
+}
+
+export function berlinMonthKey(value: string | Date) {
+	return berlinDateKey(value).slice(0, 7);
+}
+
+export function normalizeMonthKey(value: string | null | undefined, fallback: string) {
+	if (!value || !/^\d{4}-(0[1-9]|1[0-2])$/.test(value)) return fallback;
+	return value;
+}
+
+export function shiftMonth(monthKey: string, delta: number) {
+	const [year, month] = monthKey.split('-').map(Number);
+	const shifted = new Date(Date.UTC(year, month - 1 + delta, 1));
+	return `${shifted.getUTCFullYear()}-${padded(shifted.getUTCMonth() + 1)}`;
+}
+
+export function formatMonthLabel(monthKey: string) {
+	const [year, month] = monthKey.split('-').map(Number);
+	return new Intl.DateTimeFormat('de-DE', {
+		timeZone: 'UTC',
+		month: 'long',
+		year: 'numeric'
+	}).format(new Date(Date.UTC(year, month - 1, 1)));
+}
+
+export function buildCalendarDays(monthKey: string, todayKey: string): CalendarDay[] {
+	const [year, month] = monthKey.split('-').map(Number);
+	const first = new Date(Date.UTC(year, month - 1, 1));
+	const mondayOffset = (first.getUTCDay() + 6) % 7;
+	const start = new Date(Date.UTC(year, month - 1, 1 - mondayOffset));
+	return Array.from({ length: 42 }, (_, index) => {
+		const date = new Date(start);
+		date.setUTCDate(start.getUTCDate() + index);
+		const dateKey = `${date.getUTCFullYear()}-${padded(date.getUTCMonth() + 1)}-${padded(date.getUTCDate())}`;
+		return {
+			date: dateKey,
+			dayNumber: date.getUTCDate(),
+			inSelectedMonth: dateKey.startsWith(monthKey),
+			isToday: dateKey === todayKey
+		};
+	});
+}

src/lib/components/AppIcon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	let { name, label, size = '1em' }: { name: string; label?: string; size?: string } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	role={label ? 'img' : undefined}
+	aria-label={label}
+	aria-hidden={label ? undefined : 'true'}
+	class="app-icon"
+>
+	<use href={`/icons/classic-regular.svg#${name || 'circle'}`} />
+</svg>
+
+<style>
+	.app-icon {
+		display: inline-block;
+		flex: none;
+		fill: currentColor;
+		vertical-align: -0.125em;
+	}
+</style>

src/lib/components/ChoicePicker.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import AppIcon from './AppIcon.svelte';
+
+	type Item = {
+		id: string;
+		name: string;
+		iconName?: string;
+		description?: string;
+		meta?: string;
+	};
+
+	let {
+		items,
+		selectedIds,
+		label,
+		fieldName,
+		onselectionchange
+	}: {
+		items: Item[];
+		selectedIds: string[];
+		label: string;
+		fieldName?: string;
+		onselectionchange: (ids: string[]) => void;
+	} = $props();
+	let query = $state('');
+	let menu: HTMLDetailsElement;
+	let filtered = $derived(
+		items.filter((item) =>
+			`${item.name} ${item.description ?? ''} ${item.meta ?? ''}`
+				.toLocaleLowerCase('de')
+				.includes(query.trim().toLocaleLowerCase('de'))
+		)
+	);
+	let selected = $derived(items.filter((item) => selectedIds.includes(item.id)));
+
+	function toggle(id: string) {
+		onselectionchange(
+			selectedIds.includes(id)
+				? selectedIds.filter((selectedId) => selectedId !== id)
+				: [...selectedIds, id]
+		);
+	}
+</script>
+
+<div class="choice-picker">
+	{#if fieldName}
+		{#each selectedIds as id (id)}<input type="hidden" name={fieldName} value={id} />{/each}
+	{/if}
+	{#if selected.length}
+		<div class="choice-picker-selected" aria-label={`${label}: ausgewählt`}>
+			{#each selected as item (item.id)}
+				<span
+					>{#if item.iconName}<AppIcon name={item.iconName} />{/if}{item.name}</span
+				>
+			{/each}
+		</div>
+	{/if}
+	<details bind:this={menu} class="choice-picker-menu">
+		<summary>{selected.length ? `${label} ändern` : `${label} auswählen`}</summary>
+		<div class="choice-picker-popover">
+			<label class="choice-picker-search">
+				<span class="sr-only">{label} durchsuchen</span>
+				<AppIcon name="magnifying-glass" />
+				<input type="search" placeholder={`${label} durchsuchen`} bind:value={query} />
+			</label>
+			<div class="choice-picker-options">
+				{#each filtered as item (item.id)}
+					<label class:active={selectedIds.includes(item.id)}>
+						<input
+							type="checkbox"
+							checked={selectedIds.includes(item.id)}
+							onchange={() => toggle(item.id)}
+						/>
+						{#if item.iconName}<AppIcon name={item.iconName} size="1.2em" />{/if}
+						<span
+							><strong>{item.name}</strong>{#if item.description}<small>{item.description}</small
+								>{/if}</span
+						>
+						{#if item.meta}<small>{item.meta}</small>{/if}
+					</label>
+				{:else}<p>Keine Treffer.</p>{/each}
+			</div>
+			<button
+				class="choice-picker-close text-button"
+				type="button"
+				onclick={() => (menu.open = false)}>Auswahl schließen</button
+			>
+		</div>
+	</details>
+</div>

src/lib/components/IconPicker.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { classicRegularIcons } from '#lib/icons/classic-regular.js';
+	import AppIcon from './AppIcon.svelte';
+
+	let { name = $bindable(), inputName = 'iconName' }: { name: string; inputName?: string } =
+		$props();
+	let query = $state('');
+	let menu: HTMLDetailsElement;
+	let filtered = $derived(
+		classicRegularIcons.filter((icon) =>
+			`${icon.name} ${icon.label} ${icon.terms.join(' ')}`
+				.toLocaleLowerCase('de')
+				.includes(query.trim().toLocaleLowerCase('de'))
+		)
+	);
+	let visible = $derived(filtered.slice(0, 120));
+</script>
+
+<div class="icon-picker">
+	<input type="hidden" name={inputName} value={name} />
+	<details bind:this={menu}>
+		<summary><AppIcon name={name || 'circle'} /> Icon auswählen</summary>
+		<div class="icon-picker-popover">
+			<label
+				><span class="sr-only">Icons durchsuchen</span><input
+					type="search"
+					placeholder="Icon suchen"
+					bind:value={query}
+				/></label
+			>
+			<div class="icon-picker-grid">
+				{#each visible as icon (icon.name)}
+					<button
+						type="button"
+						class:active={name === icon.name}
+						title={icon.label}
+						onclick={() => {
+							name = icon.name;
+							menu.open = false;
+						}}><AppIcon name={icon.name} /><span>{icon.label}</span></button
+					>
+				{/each}
+			</div>
+			{#if filtered.length > visible.length}<p class="icon-picker-hint">
+					{visible.length} von {filtered.length} Icons sichtbar. Suche verwenden, um weitere Icons zu
+					finden.
+				</p>{/if}
+		</div>
+	</details>
+</div>

src/lib/components/InlineTitleEditor.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import AppIcon from './AppIcon.svelte';
+
+	let {
+		value = $bindable(),
+		form,
+		name = 'title',
+		label = 'Titel',
+		oncommit
+	}: {
+		value: string;
+		form: string;
+		name?: string;
+		label?: string;
+		oncommit?: () => void;
+	} = $props();
+
+	let editing = $state(false);
+	let original = $state('');
+	let input = $state<HTMLInputElement>();
+	let trigger = $state<HTMLButtonElement>();
+
+	async function edit() {
+		original = value;
+		editing = true;
+		await tick();
+		input?.focus();
+		input?.select();
+	}
+
+	async function finish(commit: boolean) {
+		if (!editing) return;
+		if (!commit) value = original;
+		editing = false;
+		if (commit && value !== original) oncommit?.();
+		await tick();
+		trigger?.focus();
+	}
+</script>
+
+<div class="inline-title-editor">
+	<input type="hidden" {form} {name} {value} />
+	{#if editing}
+		<label>
+			<span class="sr-only">{label}</span>
+			<input
+				bind:this={input}
+				bind:value
+				maxlength="200"
+				required
+				onkeydown={(event) => {
+					if (event.key === 'Enter') {
+						event.preventDefault();
+						void finish(true);
+					} else if (event.key === 'Escape') {
+						event.preventDefault();
+						void finish(false);
+					}
+				}}
+				onblur={() => void finish(true)}
+			/>
+		</label>
+	{:else}
+		<button bind:this={trigger} type="button" class="inline-title-trigger" onclick={edit}>
+			<span>{value}</span><AppIcon name="pen" size="0.9em" />
+			<span class="sr-only">{label} bearbeiten</span>
+		</button>
+	{/if}
+</div>

src/lib/components/MarkdownEditorField.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	import { tick } from 'svelte';
+	import AppIcon from './AppIcon.svelte';
 
 	let {
 		name,
 		label,
 		value = $bindable(),
-		rows = 7,
+		rows = 4,
 		placeholder = '',
 		privateField = false,
 		form
@@ -60,12 +61,15 @@
 			<button type="button" aria-label="Kursiv" title="Kursiv" onclick={() => replaceSelection('_')}
 				><em>I</em></button
 			>
-			<button type="button" aria-label="Liste" title="Liste" onclick={addList}>• Liste</button>
+			<button type="button" aria-label="Liste" title="Liste" onclick={addList}
+				><AppIcon name="list-check" /> Liste</button
+			>
 			<button
 				type="button"
 				aria-label="Link"
 				title="Link"
-				onclick={() => replaceSelection('[', '](https://)', 'Linktext')}>↗ Link</button
+				onclick={() => replaceSelection('[', '](https://)', 'Linktext')}
+				><AppIcon name="link" /> Link</button
 			>
 		</span>
 	</div>

src/lib/components/NavIcon.svelte

@@ -1,34 +1,21 @@
 <script lang="ts">
+	import AppIcon from './AppIcon.svelte';
+
 	let { name }: { name: string } = $props();
+	const aliases: Record<string, string> = {
+		library: 'folder-open',
+		shows: 'calendar-days',
+		archive: 'box-archive',
+		settings: 'gear',
+		edit: 'pen'
+	};
+	let iconName = $derived(aliases[name] ?? name);
 </script>
 
-<svg viewBox="0 0 24 24" aria-hidden="true">
+<AppIcon name={iconName} size="1.25rem" />
-	{#if name === 'inbox'}
-		<path d="M4 5.5h16v13H4zM4 14h4l1.5 2h5l1.5-2h4" />
-	{:else if name === 'library'}
-		<path d="M5 4.5h4v15H5zM10.5 4.5h4v15h-4zM16 5.5l3-1 3.5 14-3 1z" />
-	{:else if name === 'shows'}
-		<path d="M4 6.5h16v13H4zM8 3.5v6M16 3.5v6M4 10h16" />
-	{:else if name === 'archive'}
-		<path d="M4 7h16v13H4zM3 4h18v4H3zM9 12h6" />
-	{:else if name === 'settings'}
-		<circle cx="12" cy="12" r="3" />
-		<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>
 
 <style>
-	svg {
+	:global(.app-icon) {
-		width: 1.25rem;
+		display: block;
-		height: 1.25rem;
-		fill: none;
-		stroke: currentColor;
-		stroke-linecap: round;
-		stroke-linejoin: round;
-		stroke-width: 1.7;
 	}
 </style>

src/lib/components/PieceEditorDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { tick, type Snippet } from 'svelte';
+	import AppIcon from './AppIcon.svelte';
 
 	let {
 		labelledby,
@@ -53,7 +54,7 @@
 			class="dialog-close"
 			type="button"
 			aria-label="Editor schließen"
-			onclick={onrequestclose}>×</button
+			onclick={onrequestclose}><AppIcon name="xmark" /></button
 		>
 	</header>
 	<nav class="piece-dialog-tabs" aria-label="Editorbereiche">

src/lib/components/PresentationDisplay.svelte

@@ -41,7 +41,7 @@
 
 {#if content.mode === 'text'}
 	<article class="output-content output-text">
-		<p class="output-kicker">heinzlive</p>
+		{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
 		<h1>{content.title}</h1>
 		<!-- HTML is produced exclusively by the server-side allowlist sanitizer. -->
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
@@ -66,6 +66,7 @@
 				<img src={imageSrc} alt="" onerror={() => (imageUnavailable = true)} />
 			</div>{/if}
 		<div class="output-link-copy">
+			{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
 			<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}
@@ -79,6 +80,7 @@
 {:else}
 	<article class:portrait={content.provider === 'tiktok'} class="output-content output-video">
 		<header>
+			{#if content.topics.length}<p class="output-topics">{content.topics.join(' · ')}</p>{/if}
 			<p class="output-kicker">{content.siteName || content.source?.label || 'Video'}</p>
 			<h1>{content.previewTitle || content.title}</h1>
 		</header>

src/lib/components/ThemeToggle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import AppIcon from './AppIcon.svelte';
 
 	type Preference = 'system' | 'light' | 'dark';
 	const preferences: Preference[] = ['system', 'light', 'dark'];
@@ -42,8 +43,10 @@
 	onclick={cycle}
 	aria-label={`Darstellung: ${labels[preference]}`}
 >
-	<span class="theme-symbol" aria-hidden="true">
+	<span class="theme-symbol" aria-hidden="true"
-		{preference === 'system' ? '◐' : preference === 'light' ? '○' : '●'}
+		><AppIcon
-	</span>
+			name={preference === 'system' ? 'display' : preference === 'light' ? 'sun' : 'moon'}
+		/></span
+	>
 	<span>{labels[preference]}</span>
 </button>

src/lib/components/ToolEditorDialog.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import AppIcon from './AppIcon.svelte';
+	import ChoicePicker from './ChoicePicker.svelte';
+	import IconPicker from './IconPicker.svelte';
+
+	type Format = { id: string; name: string };
+	type Tool = {
+		id: string;
+		name: string;
+		startUrl: string;
+		description: string;
+		iconName: string;
+		isActive: boolean;
+		formatIds: string[];
+	};
+
+	let { formats }: { formats: Format[] } = $props();
+	let dialog: HTMLDialogElement;
+	let nameInput: HTMLInputElement;
+	let tool = $state<Tool | null>(null);
+	let name = $state('');
+	let startUrl = $state('');
+	let description = $state('');
+	let iconName = $state('wrench');
+	let isActive = $state(true);
+	let formatIds = $state<string[]>([]);
+
+	export async function showModal(selectedTool: Tool | null = null) {
+		tool = selectedTool;
+		name = selectedTool?.name ?? '';
+		startUrl = selectedTool?.startUrl ?? '';
+		description = selectedTool?.description ?? '';
+		iconName = selectedTool?.iconName || 'wrench';
+		isActive = selectedTool?.isActive ?? true;
+		formatIds = [...(selectedTool?.formatIds ?? [])];
+		dialog.showModal();
+		await tick();
+		nameInput.focus();
+	}
+
+	function close() {
+		dialog.close();
+	}
+</script>
+
+<dialog
+	bind:this={dialog}
+	class="management-dialog tool-editor-dialog"
+	aria-labelledby="tool-dialog-title"
+	onclick={(event) => event.target === dialog && close()}
+>
+	<header>
+		<div class="management-dialog-title">
+			<span class="management-dialog-icon"><AppIcon name={iconName || 'wrench'} /></span>
+			<div>
+				<p class="eyebrow">{tool ? 'Werkzeug bearbeiten' : 'Werkzeug hinzufügen'}</p>
+				<h2 id="tool-dialog-title">{tool?.name || 'Neues Werkzeug'}</h2>
+			</div>
+		</div>
+		<button class="dialog-close" type="button" aria-label="Werkzeugdialog schließen" onclick={close}
+			><AppIcon name="xmark" /></button
+		>
+	</header>
+	<form
+		class="management-dialog-form"
+		method="POST"
+		action={tool ? '?/updateTool' : '?/createTool'}
+	>
+		{#if tool}<input type="hidden" name="toolId" value={tool.id} />{/if}
+		<div class="management-dialog-fields">
+			<label
+				>Name<input
+					bind:this={nameInput}
+					bind:value={name}
+					name="name"
+					required
+					maxlength="120"
+				/></label
+			>
+			<label
+				>Start-URL<input
+					bind:value={startUrl}
+					name="startUrl"
+					type="url"
+					maxlength="2000"
+					placeholder="https://…"
+				/></label
+			>
+			<label class="wide-field"
+				>Beschreibung<textarea bind:value={description} name="description" rows="3" maxlength="2000"
+				></textarea></label
+			>
+		</div>
+		<div class="management-dialog-selections">
+			<div>
+				<span class="field-label">Icon</span>
+				<IconPicker bind:name={iconName} />
+			</div>
+			<div>
+				<span class="field-label">Passende Formate</span>
+				<ChoicePicker
+					items={formats}
+					selectedIds={formatIds}
+					label="Formate"
+					fieldName="formatIds"
+					onselectionchange={(ids) => (formatIds = ids)}
+				/>
+			</div>
+			<label class="toggle-row"
+				><input type="checkbox" name="isActive" value="1" bind:checked={isActive} /><span
+					><strong>Aktiv</strong><small
+						>Deaktivierte Werkzeuge bleiben in bestehenden Pieces erhalten.</small
+					></span
+				></label
+			>
+		</div>
+		<footer>
+			<button class="secondary-button" type="button" onclick={close}>Abbrechen</button>
+			<button class="primary-button" type="submit"
+				>{tool ? 'Änderungen speichern' : 'Werkzeug anlegen'}</button
+			>
+		</footer>
+	</form>
+</dialog>

src/lib/components/UsageEditorDialog.svelte

@@ -2,6 +2,7 @@
 	import { enhance, type SubmitFunction } from '$app/forms';
 	import { untrack } from 'svelte';
 	import MarkdownEditorField from './MarkdownEditorField.svelte';
+	import InlineTitleEditor from './InlineTitleEditor.svelte';
 	import NavIcon from './NavIcon.svelte';
 	import PieceEditorDialog from './PieceEditorDialog.svelte';
 	import type { PieceUsage } from '#lib/server/shows.js';
@@ -25,8 +26,13 @@
 	let formId = $derived(`usage-editor-form-${usage.id}`);
 	let editor: { showModal: () => void; close: () => void };
 	let activeSection = $state<'script' | 'research' | 'presentation'>('script');
-	let draft = $state(untrack(() => ({ ...usage })));
+	let draft = $state(
+		untrack(() => ({ ...usage, tools: usage.tools.map((tool) => ({ ...tool })) }))
+	);
 	let dirty = $state(false);
+	let selectedMedia = $derived(
+		draft.media.find((media) => media.id === draft.presentationMediaId) ?? null
+	);
 
 	function durationInMinutes(seconds: number) {
 		return Number((seconds / 60).toFixed(2));
@@ -64,21 +70,9 @@
 	onrequestclose={requestClose}
 >
 	{#snippet header()}
-		<p class="eyebrow">Verwendung in dieser Sendung</p>
+		<p class="eyebrow">Sendungsfassung</p>
-		<label class="piece-dialog-title">
+		<InlineTitleEditor form={formId} bind:value={draft.title} oncommit={() => (dirty = true)} />
-			<span class="sr-only">Titel</span>
-			<textarea
-				form={formId}
-				name="title"
-				required
-				rows="1"
-				maxlength="200"
-				aria-label="Titel"
-				bind:value={draft.title}
-				oninput={() => (dirty = true)}></textarea>
-		</label>
 		<h2 class="sr-only" id={`usage-editor-title-${usage.id}`}>{draft.title}</h2>
-		<small>Änderungen gelten nur für diese Einplanung.</small>
 	{/snippet}
 
 	<form
@@ -99,7 +93,6 @@
 					<p class="eyebrow">Für die Moderation</p>
 					<h3>Sendungstext</h3>
 				</div>
-				<small>Die drei Teile bleiben getrennt gespeichert.</small>
 			</div>
 			<div class="piece-writing-stack">
 				<MarkdownEditorField
@@ -115,6 +108,13 @@
 					rows={10}
 					bind:value={draft.moderation}
 				/>
+				<MarkdownEditorField
+					name="interaction"
+					label="Interaktion"
+					placeholder="Welche Frage möchtest du dem Chat stellen?"
+					privateField
+					bind:value={draft.interaction}
+				/>
 				<MarkdownEditorField
 					name="transition"
 					label="Überleitung"
@@ -165,13 +165,40 @@
 				/>
 			</div>
 			<section class="piece-source-summary">
-				<p class="eyebrow">Snapshot-Quelle</p>
+				<p class="eyebrow">Snapshot-Quellen</p>
-				{#if draft.presentationSourceUrl}
+				{#if draft.sources.length}
-					<strong>{draft.presentationSourceLabel || draft.presentationSourceUrl}</strong>
+					{#each draft.sources as source (source.id)}<div>
-					<small>{draft.presentationSourceUrl}</small>
+							<strong>{source.label}</strong><small>{source.url}</small>
-				{:else}
+						</div>{/each}
-					<p>Für diese Verwendung wurde keine Präsentationsquelle kopiert.</p>
+				{:else}<p>Für diese Verwendung wurden keine Quellen kopiert.</p>{/if}
-				{/if}
+			</section>
+			<section class="piece-source-editor">
+				<div class="piece-subsection-heading">
+					<div>
+						<p class="eyebrow">Snapshot</p>
+						<h3>Werkzeuge</h3>
+					</div>
+					<small>Name und Start-URL bleiben Teil der Sendungsfassung.</small>
+				</div>
+				{#if draft.tools.length}<div class="source-list">
+						{#each draft.tools as tool (tool.id)}<div class="source-row tool-assignment-row">
+								<input type="hidden" name="usageToolId" value={tool.id} />
+								<div class="tool-assignment-name">
+									<strong>{tool.name}</strong>{#if tool.startUrl}<small>{tool.startUrl}</small>{/if}
+								</div>
+								<label
+									>Arbeitslink<input
+										name="toolWorkUrl"
+										type="url"
+										maxlength="2000"
+										placeholder={tool.startUrl || 'https://…'}
+										bind:value={tool.workUrl}
+									/></label
+								>
+								<label>Notiz<input name="toolNote" maxlength="2000" bind:value={tool.note} /></label
+								>
+							</div>{/each}
+					</div>{:else}<p class="context-empty">Keine Werkzeuge in dieser Sendungsfassung.</p>{/if}
 			</section>
 		</section>
 
@@ -185,6 +212,14 @@
 			</div>
 			<div class="piece-presentation-layout">
 				<div class="piece-presentation-controls">
+					<label
+						>Präsentationstitel<input
+							name="outputTitle"
+							maxlength="300"
+							placeholder="Optional, sonst interner Titel"
+							bind:value={draft.outputTitle}
+						/></label
+					>
 					<MarkdownEditorField
 						name="presentation"
 						label="Öffentlicher Text"
@@ -215,6 +250,7 @@
 						value={draft.presentationSourceTimecodeSeconds ?? ''}
 					/>
 					<input type="hidden" name="presentationSiteName" value={draft.presentationSiteName} />
+					<input type="hidden" name="presentationMediaId" value={draft.presentationMediaId ?? ''} />
 					{#if draft.presentationMode !== 'text'}
 						<div class="presentation-settings">
 							<div class="presentation-source-summary wide-field">
@@ -227,9 +263,10 @@
 								{#if draft.presentationSourceUrl}<small>{draft.presentationSourceUrl}</small>{/if}
 							</div>
 							<label
-								>Titel<input
+								>Kartentitel<input
 									name="presentationTitle"
 									maxlength="300"
+									placeholder="Optionaler Anzeigetitel"
 									bind:value={draft.presentationTitle}
 								/></label
 							>
@@ -238,6 +275,7 @@
 									name="presentationImageUrl"
 									type="url"
 									maxlength="2000"
+									placeholder="https://…"
 									bind:value={draft.presentationImageUrl}
 								/></label
 							>
@@ -246,6 +284,7 @@
 									name="presentationDescription"
 									rows="3"
 									maxlength="1000"
+									placeholder="Kurzer Text zur Vorschau"
 									bind:value={draft.presentationDescription}></textarea></label
 							>
 						</div>
@@ -259,15 +298,52 @@
 						<input type="hidden" name="presentationImageUrl" value={draft.presentationImageUrl} />
 					{/if}
 				</div>
+				{#if draft.media.length}<fieldset class="usage-media-picker">
+						<legend>Hochgeladenes Präsentationsbild</legend>
+						<label
+							><input
+								type="radio"
+								checked={!draft.presentationMediaId}
+								onchange={() => {
+									draft.presentationMediaId = null;
+									dirty = true;
+								}}
+							/> Kein Bild</label
+						>
+						<div class="media-grid">
+							{#each draft.media as media (media.id)}<label class="media-presentation-choice"
+									><input
+										type="radio"
+										checked={draft.presentationMediaId === media.id}
+										onchange={() => {
+											draft.presentationMediaId = media.id;
+											dirty = true;
+										}}
+									/><img src={`/media/${media.originalMediaId}`} alt={media.altText} /><span
+										>Auswählen</span
+									></label
+								>{/each}
+						</div>
+					</fieldset>{/if}
 				<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
 					<p class="output-kicker">Vorschau · {draft.presentationMode}</p>
-					<h4>{draft.presentationTitle || draft.title}</h4>
+					<h4>{draft.outputTitle || draft.title}</h4>
 					{#if draft.presentationMode === 'text'}
 						<p class="preview-markdown-source">
 							{draft.presentation || 'Noch kein öffentlicher Text.'}
 						</p>
+						{#if selectedMedia}<img
+								src={`/media/${selectedMedia.originalMediaId}`}
+								alt={selectedMedia.altText}
+							/>{/if}
 					{:else}
-						{#if draft.presentationImageUrl}<img src={draft.presentationImageUrl} alt="" />{/if}
+						{#if selectedMedia}<img
+								src={`/media/${selectedMedia.originalMediaId}`}
+								alt={selectedMedia.altText}
+							/>{:else if draft.presentationImageUrl}<img
+								src={draft.presentationImageUrl}
+								alt=""
+							/>{/if}
 						<p>
 							{draft.presentationDescription ||
 								draft.presentationSourceUrl ||
@@ -317,14 +393,16 @@
 				method="POST"
 				action="?/removeUsage"
 				onsubmit={(event) =>
-					!confirm('Verwendung aus der Sendung entfernen?') && event.preventDefault()}
+					!confirm('Piece aus dieser 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" disabled={dirty}>Entfernen</button>
+				<button class="text-button danger-text" type="submit" disabled={dirty}
+					>Aus Sendung entfernen</button
+				>
 			</form>
 		</div>
 		<div class="piece-dialog-primary-action">

src/lib/server/auth.spec.ts

@@ -70,6 +70,21 @@ afterEach(async () => {
 });
 
 describe('authentication', () => {
+	it('stores the show overview preference per user', async () => {
+		const { createFirstAdmin, getShowOverviewView, setShowOverviewView } =
+			await import('./auth.js');
+		const user = await createFirstAdmin({
+			setupToken: 'a'.repeat(32),
+			email: 'calendar@example.test',
+			displayName: 'Kalender Test',
+			password: 'a-valid-password-123'
+		});
+		expect(getShowOverviewView(user.id)).toBe('list');
+		expect(setShowOverviewView(user.id, 'calendar')).toBe('calendar');
+		expect(getShowOverviewView(user.id)).toBe('calendar');
+		expect(() => setShowOverviewView(user.id, 'invalid')).toThrow('INVALID_VIEW');
+	});
+
 	it('creates the first Barkeeper once and stores no plaintext secret', async () => {
 		const { createFirstAdmin } = await import('./auth.js');
 		const password = 'Ein-sehr-langes-Testpasswort';

src/lib/server/auth.ts

@@ -26,6 +26,7 @@ const PASSWORD_OPTIONS = {
 } as const;
 
 export type Role = 'barkeeper' | 'thekencrew';
+export type ShowOverviewView = 'list' | 'calendar';
 export type AuthUser = {
 	id: string;
 	email: string;
@@ -66,6 +67,23 @@ export function normalizeEmail(email: string): string {
 	return email.trim().toLowerCase();
 }
 
+export function getShowOverviewView(userId: string): ShowOverviewView {
+	const row = getDatabase()
+		.prepare('SELECT show_overview_view FROM users WHERE id = ?')
+		.get(userId) as { show_overview_view: ShowOverviewView } | undefined;
+	if (!row) throw new Error('NOT_FOUND');
+	return row.show_overview_view;
+}
+
+export function setShowOverviewView(userId: string, view: string): ShowOverviewView {
+	if (view !== 'list' && view !== 'calendar') throw new Error('INVALID_VIEW');
+	const result = getDatabase()
+		.prepare('UPDATE users SET show_overview_view = ?, updated_at_utc = ? WHERE id = ?')
+		.run(view, nowUtc(), userId);
+	if (!result.changes) throw new Error('NOT_FOUND');
+	return view;
+}
+
 export function validEmail(email: string): boolean {
 	return email.length <= 254 && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
 }

src/lib/server/content.spec.ts

@@ -12,14 +12,19 @@ import {
 	getMediaFile,
 	getPiece,
 	getTaxonomy,
+	listPieceTemplates,
 	listPieces,
 	loadPiecePresentationMetadata,
 	savePiece,
+	savePieceAsTemplate,
 	setPieceArchived,
+	setPieceDeleted,
+	setPieceFavorite,
 	uploadPieceImage,
+	updateTaxonomy,
 	type PieceInput
 } from './content.js';
-import { closeDatabase } from './database.js';
+import { closeDatabase, getDatabase } from './database.js';
 import { renderMarkdown } from './markdown.js';
 
 let directory: string;
@@ -42,6 +47,7 @@ afterEach(() => {
 function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
 	return {
 		title: 'Getestetes Piece',
+		outputTitle: '',
 		summary: 'Eine persistente Kurzbeschreibung.',
 		formatId: 'format-talk',
 		status: 'ready',
@@ -73,6 +79,57 @@ function completeInput(overrides: Partial<PieceInput> = {}): PieceInput {
 }
 
 describe('content management', () => {
+	it('sorts global favorites first without changing their revision', () => {
+		const before = getPiece('piece-console')!;
+		setPieceFavorite('piece-console', true);
+		const pieces = listPieces({ statuses: ['ready'] });
+		expect(pieces[0]).toMatchObject({ id: 'piece-console', isFavorite: true });
+		expect(getPiece('piece-console')).toMatchObject({
+			isFavorite: true,
+			revision: before.revision,
+			status: before.status
+		});
+	});
+
+	it('persists independently versioned templates and copies their complete snapshot', () => {
+		const sourceId = createPiece('talk');
+		const source = getPiece(sourceId)!;
+		savePiece(
+			sourceId,
+			source.revision,
+			completeInput({
+				title: 'Interner Vorlagentitel',
+				outputTitle: 'Titel für die Ausgabe',
+				presentationText: 'Unveränderlicher Vorlagentext'
+			})
+		);
+		const created = savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Redaktioneller Stand');
+		const template = listPieceTemplates().find((entry) => entry.id === created.id)!;
+		expect(template).toMatchObject({ name: 'Eigene Vorlage', revision: 1 });
+
+		const changed = getPiece(sourceId)!;
+		savePiece(sourceId, changed.revision, {
+			...changed,
+			status: 'ready',
+			presentationText: 'Spätere Änderung'
+		});
+		const copyId = createPiece(created.id);
+		expect(getPiece(copyId)).toMatchObject({
+			title: 'Interner Vorlagentitel',
+			outputTitle: 'Titel für die Ausgabe',
+			presentationText: 'Unveränderlicher Vorlagentext',
+			sources: [
+				{ label: 'Dokumentation', url: 'https://example.com/dokumentation', timecodeSeconds: 75 }
+			]
+		});
+
+		const updated = savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Neuer Stand', created.id, 1);
+		expect(updated.revision).toBe(2);
+		expect(() =>
+			savePieceAsTemplate(sourceId, 'Eigene Vorlage', 'Veraltet', created.id, 1)
+		).toThrow('CONFLICT');
+	});
+
 	it('persists complete pieces and rejects stale revisions atomically', () => {
 		const id = createPiece('talk');
 		const initial = getPiece(id)!;
@@ -143,8 +200,17 @@ describe('content management', () => {
 	});
 
 	it('searches independent taxonomies and archives, restores and duplicates pieces', async () => {
-		createTaxonomy('topic', 'Technikgeschichte');
+		createTaxonomy('topic', 'Technikgeschichte', 'microchip');
 		const topic = getTaxonomy().topics.find((entry) => entry.name === 'Technikgeschichte')!;
+		expect(topic.iconName).toBe('microchip');
+		updateTaxonomy('topic', topic.id, 'Computergeschichte', 'microchip');
+		expect(getTaxonomy().topics.find((entry) => entry.id === topic.id)).toMatchObject({
+			name: 'Computergeschichte',
+			iconName: 'microchip'
+		});
+		expect(() => updateTaxonomy('topic', topic.id, 'Computergeschichte', '../unsafe')).toThrow(
+			'INVALID_ICON'
+		);
 		const sourceId = createPiece('find');
 		const source = getPiece(sourceId)!;
 		savePiece(
@@ -198,15 +264,17 @@ describe('content management', () => {
 			'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
 			'base64'
 		);
-		await uploadPieceImage(
+		const uploaded = await uploadPieceImage(
 			id,
 			1,
 			new File([png], '../bild.png', { type: 'text/html' }),
-			'Ein heller Pixel'
+			'Ein heller Pixel',
+			true
 		);
 		const piece = getPiece(id)!;
 		expect(piece.media).toHaveLength(1);
 		expect(piece.media[0]).toMatchObject({ mimeType: 'image/png', altText: 'Ein heller Pixel' });
+		expect(piece.presentationMediaId).toBe(uploaded.id);
 		const media = await getMediaFile(piece.media[0].id);
 		expect(media?.data.equals(png)).toBe(true);
 		expect(existsSync(path.join(directory, 'uploads', '../bild.png'))).toBe(false);
@@ -219,7 +287,87 @@ describe('content management', () => {
 				''
 			)
 		).rejects.toThrow('INVALID_IMAGE_TYPE');
+		const stored = getDatabase()
+			.prepare('SELECT storage_name FROM piece_media WHERE id = ?')
+			.get(piece.media[0].id) as { storage_name: string };
 		await deletePieceImage(id, piece.media[0].id, piece.revision);
 		expect(getPiece(id)?.media).toHaveLength(0);
+		expect(getPiece(id)?.presentationMediaId).toBeNull();
+		expect(await getMediaFile(piece.media[0].id)).toBeNull();
+		expect(existsSync(path.join(directory, 'uploads', stored.storage_name))).toBe(true);
+	});
+
+	it('selects presentation media atomically, copies active media and omits media from templates', async () => {
+		const id = createPiece();
+		const png = Buffer.from(
+			'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+			'base64'
+		);
+		const selected = await uploadPieceImage(
+			id,
+			1,
+			new File([png], 'auswahl.png', { type: 'image/png' }),
+			'Auswahl',
+			true
+		);
+		const second = await uploadPieceImage(
+			id,
+			selected.revision,
+			new File([png], 'entfernt.png', { type: 'image/png' }),
+			'Entfernt'
+		);
+		await deletePieceImage(id, second.id, second.revision);
+		const source = getPiece(id)!;
+		expect(() =>
+			savePiece(id, source.revision, {
+				...source,
+				title: 'Darf nicht gespeichert werden',
+				status: 'preparing',
+				presentationMediaId: 'fremdes-medium'
+			})
+		).toThrow('presentation media does not belong to piece');
+		expect(getPiece(id)).toMatchObject({
+			title: 'Neues Piece',
+			revision: source.revision,
+			presentationMediaId: selected.id
+		});
+
+		const duplicateId = await duplicatePiece(id);
+		const duplicate = getPiece(duplicateId)!;
+		expect(duplicate.media).toHaveLength(1);
+		expect(duplicate.presentationMediaId).toBe(duplicate.media[0].id);
+		expect(duplicate.presentationMediaId).not.toBe(selected.id);
+
+		const template = savePieceAsTemplate(id, 'Ohne Medienreferenz', 'Nur Inhaltsdaten');
+		const snapshot = getDatabase()
+			.prepare('SELECT snapshot_json FROM piece_templates WHERE id = ?')
+			.get(template.id) as { snapshot_json: string };
+		expect(JSON.parse(snapshot.snapshot_json)).not.toHaveProperty('presentationMediaId');
+		expect(getPiece(createPiece(template.id))?.presentationMediaId).toBeNull();
+	});
+
+	it('soft-deletes pieces behind revisions and keeps their original media private', async () => {
+		const id = createPiece();
+		const png = Buffer.from(
+			'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=',
+			'base64'
+		);
+		const uploaded = await uploadPieceImage(
+			id,
+			1,
+			new File([png], 'privat.png', { type: 'image/png' }),
+			'Privat'
+		);
+		const deleted = setPieceDeleted(id, uploaded.revision, true);
+		expect(getPiece(id)).toBeNull();
+		expect(listPieces({ statuses: ['preparing'] }).some((piece) => piece.id === id)).toBe(false);
+		expect(await getMediaFile(uploaded.id)).toBeNull();
+		expect(() => setPieceFavorite(id, true)).toThrow('NOT_FOUND');
+		expect(() => savePiece(id, deleted.revision, completeInput())).toThrow('NOT_FOUND');
+		expect(() => setPieceDeleted(id, uploaded.revision, false)).toThrow('CONFLICT');
+
+		const restored = setPieceDeleted(id, deleted.revision, false);
+		expect(getPiece(id)).toMatchObject({ id, revision: restored.revision });
+		expect((await getMediaFile(uploaded.id))?.data.equals(png)).toBe(true);
 	});
 });

src/lib/server/database.spec.ts

@@ -62,7 +62,7 @@ describe('database setup', () => {
 		database.close();
 
 		expect(counts).toEqual({
-			migrations: 6,
+			migrations: 12,
 			pieces: 6,
 			shows: 2,
 			usages: 5,

src/lib/server/live.spec.ts

@@ -6,13 +6,18 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { closeDatabase, getDatabase } from './database.js';
 import {
 	completeCurrent,
+	clearPresentationChannel,
+	getPresentationChannelView,
 	getLiveView,
 	getPresentationMedia,
 	getPresentationView,
 	goBack,
 	issuePresentationAccess,
 	moveOpenUsage,
+	presentationChannelAccess,
 	presentUsage,
+	rotatePresentationChannelKey,
+	selectUsage,
 	skipCurrent,
 	startOrResumeLive
 } from './live.js';
@@ -35,6 +40,99 @@ afterEach(() => {
 });
 
 describe('live mode', () => {
+	it('persists a frozen section countdown across usage changes and reloads', () => {
+		getDatabase()
+			.prepare(
+				"UPDATE show_sections SET explicit_duration_seconds = 300 WHERE id = 'section-stories'"
+			)
+			.run();
+		const start = new Date('2026-10-23T18:00:00.000Z');
+		startOrResumeLive('show-october', 'timer-start', 0, start);
+		let live = getLiveView('show-october', new Date('2026-10-23T18:01:40.000Z'));
+		expect(live.sectionTimer).toMatchObject({
+			sectionId: 'section-stories',
+			plannedDurationSeconds: 300,
+			elapsedSeconds: 100
+		});
+		getDatabase()
+			.prepare(
+				"UPDATE show_sections SET explicit_duration_seconds = 600 WHERE id = 'section-stories'"
+			)
+			.run();
+		completeCurrent(
+			'show-october',
+			'timer-next-piece',
+			live.liveRevision,
+			new Date('2026-10-23T18:02:00.000Z')
+		);
+		live = getLiveView('show-october', new Date('2026-10-23T18:04:00.000Z'));
+		expect(live.current?.id).toBe('usage-effects');
+		expect(live.sectionTimer).toMatchObject({
+			plannedDurationSeconds: 300,
+			elapsedSeconds: 240
+		});
+		completeCurrent(
+			'show-october',
+			'timer-finish',
+			live.liveRevision,
+			new Date('2026-10-23T18:06:00.000Z')
+		);
+		expect(
+			getLiveView('show-october', new Date('2026-10-23T18:07:00.000Z')).sectionTimer
+		).toBeNull();
+	});
+
+	it('selects any rundown usage by stable id, including the first and completed entries', () => {
+		let live = getLiveView('show-october');
+		expect(() =>
+			selectUsage('show-october', 'usage-effects', 'select-before-start', live.liveRevision)
+		).toThrow('NOT_STARTED');
+		startOrResumeLive('show-october', 'start-selection', live.liveRevision);
+		live = getLiveView('show-october');
+		selectUsage('show-october', 'usage-effects', 'select-second', live.liveRevision);
+		live = getLiveView('show-october');
+		expect(live.current?.id).toBe('usage-effects');
+
+		selectUsage('show-october', 'usage-console', 'select-first', live.liveRevision);
+		live = getLiveView('show-october');
+		expect(live.current?.id).toBe('usage-console');
+		completeCurrent('show-october', 'complete-first', live.liveRevision);
+		live = getLiveView('show-october');
+		expect(
+			live.sections
+				.flatMap((section) => section.usages)
+				.find((usage) => usage.id === 'usage-console')?.status
+		).toBe('done');
+
+		selectUsage('show-october', 'usage-console', 'return-to-completed', live.liveRevision);
+		expect(getLiveView('show-october').current).toMatchObject({
+			id: 'usage-console',
+			status: 'current'
+		});
+	});
+
+	it('keeps one stable output channel until its key is explicitly rotated', () => {
+		const key = issuePresentationAccess('show-october');
+		expect(issuePresentationAccess('show-october')).toBe(key);
+		expect(presentationChannelAccess('default', key)).toBe(true);
+		expect(getPresentationChannelView('default')).toEqual({
+			revision: 1_000_000_000,
+			content: null
+		});
+
+		const replacement = rotatePresentationChannelKey('show-october');
+		expect(replacement).not.toBe(key);
+		expect(presentationChannelAccess('default', key)).toBe(false);
+		expect(presentationChannelAccess('default', replacement)).toBe(true);
+		startOrResumeLive('show-october', 'start-channel', 0);
+		presentUsage('show-october', 'usage-console', 'present-channel', 1);
+		expect(getPresentationChannelView('default')?.content).not.toBeNull();
+		clearPresentationChannel();
+		expect(getPresentationChannelView('default')?.content).toBeNull();
+		issuePresentationAccess('show-october');
+		expect(getPresentationChannelView('default')?.content).toBeNull();
+	});
+
 	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);
@@ -105,6 +203,14 @@ describe('live mode', () => {
 				0,
 				'2026-10-22T18:00:00.000Z'
 			);
+		getDatabase()
+			.prepare(
+				`INSERT INTO usage_tool_snapshots
+				 (id, usage_id, original_tool_id, name, start_url, work_url, note, position)
+				 VALUES ('private-live-tool', 'usage-console', NULL, 'Privates Werkzeug', '',
+				 'https://private.example.test/board', 'PRIVATE_TOOL_NOTE', 0)`
+			)
+			.run();
 
 		const token = issuePresentationAccess('show-october');
 		expect(getPresentationView(token)).toEqual({ revision: 0, content: null });
@@ -115,7 +221,9 @@ describe('live mode', () => {
 		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' }]
+			topics: ['Gaming'],
+			images: [],
+			sources: []
 		});
 		const serialized = JSON.stringify(output);
 		expect(serialized).toContain('Weniger Leistung, mehr Idee.');
@@ -123,13 +231,19 @@ describe('live mode', () => {
 		expect(serialized).not.toContain('Moderationsstichpunkte');
 		expect(serialized).not.toContain('private-original-name');
 		expect(serialized).not.toContain('presentation.png');
+		expect(serialized).not.toContain('https://example.com/console');
+		expect(serialized).not.toContain('https://private.example.test/board');
+		expect(serialized).not.toContain('PRIVATE_TOOL_NOTE');
 
 		const media = await getPresentationMedia(token, 'presentation-image');
-		expect(media?.data.toString()).toBe('test-image');
+		expect(media).toBeNull();
 		expect(await getPresentationMedia(token, 'unknown-image')).toBeNull();
 
 		const replacementToken = issuePresentationAccess('show-october');
-		expect(getPresentationView(token)).toBeNull();
+		expect(replacementToken).toBe(token);
+		expect(getPresentationView(token)?.content?.title).toBe(
+			'Die kleine Konsole mit dem großen Dreh'
+		);
 		expect(getPresentationView(replacementToken)?.content?.title).toBe(
 			'Die kleine Konsole mit dem großen Dreh'
 		);

src/lib/server/live.ts

@@ -1,6 +1,8 @@
 import { createHash, randomBytes, randomUUID } from 'node:crypto';
+import { readFile } from 'node:fs/promises';
+import path from 'node:path';
 import type Database from 'better-sqlite3';
-import { getMediaFile } from './content.js';
+import { getServerPaths } from './config.js';
 import { getDatabase } from './database.js';
 import { renderMarkdown } from './markdown.js';
 import { buildEmbedUrl, fetchPresentationImage, type PresentationContent } from './presentation.js';
@@ -9,6 +11,7 @@ import {
 	movePieceUsage,
 	type MovePieceUsageInput,
 	type PieceUsage,
+	type ShowStatus,
 	type ShowSection
 } from './shows.js';
 
@@ -39,6 +42,7 @@ export type LiveUsage = PieceUsage & {
 	introHtml: string;
 	researchHtml: string;
 	moderationHtml: string;
+	interactionHtml: string;
 	transitionHtml: string;
 };
 
@@ -53,7 +57,10 @@ export type LiveView = {
 		totalDurationSeconds: number;
 	};
 	liveRevision: number;
+	calculatedAtUtc: string;
 	startedAtUtc: string | null;
+	endedAtUtc: string | null;
+	isPaused: boolean;
 	updatedAtUtc: string;
 	presentationUsageId: string | null;
 	presentationRevision: number;
@@ -63,12 +70,29 @@ export type LiveView = {
 	next: LiveUsage | null;
 	completedCount: number;
 	totalCount: number;
+	sectionTimer: null | {
+		sectionId: string;
+		sectionName: string;
+		plannedDurationSeconds: number;
+		elapsedSeconds: number;
+		runningSinceUtc: string | null;
+	};
+	totalTimer: {
+		elapsedSeconds: number;
+		runningSinceUtc: string | null;
+	};
+	remainingEstimate: {
+		seconds: number;
+		activeCountdownSeconds: number;
+		unplannedSectionCount: number;
+	};
 };
 
 export type PresentationView = {
 	revision: number;
 	content: null | {
 		mode: PresentationContent['mode'];
+		topics: string[];
 		title: string;
 		html: string;
 		source: PresentationContent['source'];
@@ -142,6 +166,128 @@ function closeActiveRun(database: Database.Database, showId: string, now: string
 		.run(now, showId);
 }
 
+function closeShowTimerRun(database: Database.Database, showId: string, now: string) {
+	database
+		.prepare(
+			`UPDATE live_show_timer_runs SET ended_at_utc = ?
+			 WHERE show_id = ? AND ended_at_utc IS NULL`
+		)
+		.run(now, showId);
+}
+
+function openShowTimerRun(database: Database.Database, showId: string, now: string) {
+	const active = database
+		.prepare('SELECT 1 FROM live_show_timer_runs WHERE show_id = ? AND ended_at_utc IS NULL')
+		.get(showId);
+	if (!active) {
+		database
+			.prepare(
+				`INSERT INTO live_show_timer_runs (id, show_id, started_at_utc)
+				 VALUES (?, ?, ?)`
+			)
+			.run(randomUUID(), showId, now);
+	}
+}
+
+function showTimerRunning(database: Database.Database, showId: string) {
+	return Boolean(
+		database
+			.prepare('SELECT 1 FROM live_show_timer_runs WHERE show_id = ? AND ended_at_utc IS NULL')
+			.get(showId)
+	);
+}
+
+function elapsedRuns(
+	runs: { started_at_utc: string; ended_at_utc: string | null }[],
+	now: string
+) {
+	return runs.reduce(
+		(total, run) =>
+			total +
+			Math.max(
+				0,
+				Math.floor(
+					(new Date(run.ended_at_utc ?? now).getTime() - new Date(run.started_at_utc).getTime()) /
+						1_000
+				)
+			),
+		0
+	);
+}
+
+function closeSectionTimer(database: Database.Database, showId: string, now: string) {
+	const timer = database
+		.prepare('SELECT id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL')
+		.get(showId) as { id: string } | undefined;
+	if (!timer) return;
+	database
+		.prepare(
+			'UPDATE live_section_timer_runs SET ended_at_utc = ? WHERE timer_id = ? AND ended_at_utc IS NULL'
+		)
+		.run(now, timer.id);
+	database
+		.prepare('UPDATE live_section_timers SET ended_at_utc = ? WHERE id = ?')
+		.run(now, timer.id);
+}
+
+function resumeSectionTimerRun(database: Database.Database, showId: string, now: string) {
+	const timer = database
+		.prepare('SELECT id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL')
+		.get(showId) as { id: string } | undefined;
+	if (!timer) return;
+	const running = database
+		.prepare(
+			'SELECT 1 FROM live_section_timer_runs WHERE timer_id = ? AND ended_at_utc IS NULL'
+		)
+		.get(timer.id);
+	if (!running) {
+		database
+			.prepare(
+				`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
+				 VALUES (?, ?, ?)`
+			)
+			.run(randomUUID(), timer.id, now);
+	}
+}
+
+function syncSectionTimer(
+	database: Database.Database,
+	showId: string,
+	usageId: string,
+	now: string
+) {
+	const section = database
+		.prepare(
+			`SELECT s.id, s.explicit_duration_seconds 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(usageId, showId) as { id: string; explicit_duration_seconds: number | null } | undefined;
+	if (!section) throw new Error('NOT_FOUND');
+	const active = database
+		.prepare(
+			'SELECT id, section_id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL'
+		)
+		.get(showId) as { id: string; section_id: string } | undefined;
+	if (active?.section_id === section.id) return;
+	if (active) closeSectionTimer(database, showId, now);
+	if (!section.explicit_duration_seconds || section.explicit_duration_seconds <= 0) return;
+	const timerId = randomUUID();
+	database
+		.prepare(
+			`INSERT INTO live_section_timers
+			 (id, show_id, section_id, planned_duration_seconds, started_at_utc)
+			 VALUES (?, ?, ?, ?, ?)`
+		)
+		.run(timerId, showId, section.id, section.explicit_duration_seconds, now);
+	database
+		.prepare(
+			`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
+			 VALUES (?, ?, ?)`
+		)
+		.run(randomUUID(), timerId, now);
+}
+
 function activateUsage(database: Database.Database, showId: string, usageId: string, now: string) {
 	usageBelongsToShow(database, showId, usageId);
 	database
@@ -165,6 +311,7 @@ function activateUsage(database: Database.Database, showId: string, usageId: str
 			'UPDATE show_live_states SET current_usage_id = ?, ended_at_utc = NULL WHERE show_id = ?'
 		)
 		.run(usageId, showId);
+	syncSectionTimer(database, showId, usageId, now);
 }
 
 function executeCommand(
@@ -173,7 +320,8 @@ function executeCommand(
 	expectedRevision: number,
 	action: string,
 	operation: (database: Database.Database, state: LiveStateRow, now: string) => void,
-	nowValue?: Date
+	nowValue?: Date,
+	allowCompleted = false
 ) {
 	requireCommandId(commandId);
 	const database = getDatabase();
@@ -187,7 +335,7 @@ function executeCommand(
 		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 (show.status === 'completed' && !allowCompleted) throw new Error('SHOW_COMPLETED');
 		if (state.revision !== expectedRevision) throw new Error('CONFLICT');
 		operation(database, state, now);
 		const updated = database
@@ -243,6 +391,7 @@ function liveUsage(
 		introHtml: renderMarkdown(usage.intro),
 		researchHtml: renderMarkdown(usage.research),
 		moderationHtml: renderMarkdown(usage.moderation),
+		interactionHtml: renderMarkdown(usage.interaction),
 		transitionHtml: renderMarkdown(usage.transition)
 	};
 }
@@ -269,6 +418,77 @@ export function getLiveView(showId: string, nowValue?: Date): LiveView {
 	const next =
 		usages.slice(currentIndex + 1).find((usage) => usage.status === 'open') ??
 		(current ? null : (usages.find((usage) => usage.status === 'open') ?? null));
+	const timer = database
+		.prepare(
+			`SELECT t.id, t.section_id, s.name AS section_name, t.planned_duration_seconds
+			 FROM live_section_timers t JOIN show_sections s ON s.id = t.section_id
+			 WHERE t.show_id = ? AND t.ended_at_utc IS NULL`
+		)
+		.get(showId) as
+		| { id: string; section_id: string; section_name: string; planned_duration_seconds: number }
+		| undefined;
+	let sectionTimer: LiveView['sectionTimer'] = null;
+	if (timer) {
+		const runs = database
+			.prepare(
+				`SELECT started_at_utc, ended_at_utc FROM live_section_timer_runs
+				 WHERE timer_id = ? ORDER BY started_at_utc`
+			)
+			.all(timer.id) as { started_at_utc: string; ended_at_utc: string | null }[];
+		const running = runs.find((run) => run.ended_at_utc === null) ?? null;
+		const elapsedSeconds = elapsedRuns(runs, now);
+		sectionTimer = {
+			sectionId: timer.section_id,
+			sectionName: timer.section_name,
+			plannedDurationSeconds: timer.planned_duration_seconds,
+			elapsedSeconds,
+			runningSinceUtc: running?.started_at_utc ?? null
+		};
+	}
+	const totalTimerRuns = database
+		.prepare(
+			`SELECT started_at_utc, ended_at_utc FROM live_show_timer_runs
+			 WHERE show_id = ? ORDER BY started_at_utc`
+		)
+		.all(showId) as { started_at_utc: string; ended_at_utc: string | null }[];
+	const runningTotalTimer = totalTimerRuns.find((run) => run.ended_at_utc === null) ?? null;
+	const totalElapsedSeconds = elapsedRuns(totalTimerRuns, now);
+	const remainingAnchor = current ?? next;
+	let reachedRemaining = !remainingAnchor;
+	let remainingSeconds = 0;
+	let activeCountdownSeconds = 0;
+	let unplannedSectionCount = 0;
+	for (const section of sections) {
+		if (section.id === remainingAnchor?.sectionId) reachedRemaining = true;
+		if (!reachedRemaining) continue;
+		const remainingUsages = section.usages.filter(
+			(usage) => usage.status === 'open' || usage.status === 'current'
+		);
+		if (remainingUsages.length === 0) continue;
+
+		if (section.id === current?.sectionId) {
+			if (section.durationSeconds > 0 && sectionTimer?.sectionId === section.id) {
+				activeCountdownSeconds = Math.max(0, section.durationSeconds - sectionTimer.elapsedSeconds);
+				remainingSeconds += activeCountdownSeconds;
+			} else {
+				remainingSeconds += remainingUsages.reduce((total, usage) => {
+					const elapsed = usage.id === current?.id ? usage.actualDurationSeconds : 0;
+					const remainder = Math.max(0, usage.durationSeconds - elapsed);
+					if (usage.id === current?.id) activeCountdownSeconds = remainder;
+					return total + remainder;
+				}, 0);
+				if (section.durationSeconds <= 0) unplannedSectionCount += 1;
+			}
+		} else if (section.durationSeconds > 0) {
+			remainingSeconds += section.durationSeconds;
+		} else {
+			remainingSeconds += remainingUsages.reduce(
+				(total, usage) => total + usage.durationSeconds,
+				0
+			);
+			unplannedSectionCount += 1;
+		}
+	}
 	return {
 		show: {
 			id: show.id,
@@ -278,7 +498,10 @@ export function getLiveView(showId: string, nowValue?: Date): LiveView {
 			totalDurationSeconds: show.totalDurationSeconds
 		},
 		liveRevision: state.revision,
+		calculatedAtUtc: now,
 		startedAtUtc: state.started_at_utc,
+		endedAtUtc: state.ended_at_utc,
+		isPaused: Boolean(state.started_at_utc && !state.ended_at_utc && !runningTotalTimer),
 		updatedAtUtc: state.updated_at_utc,
 		presentationUsageId: state.presentation_usage_id,
 		presentationRevision: state.presentation_revision,
@@ -288,7 +511,17 @@ export function getLiveView(showId: string, nowValue?: Date): LiveView {
 		next,
 		completedCount: usages.filter((usage) => usage.status === 'done' || usage.status === 'skipped')
 			.length,
-		totalCount: usages.length
+		totalCount: usages.length,
+		sectionTimer,
+		totalTimer: {
+			elapsedSeconds: totalElapsedSeconds,
+			runningSinceUtc: runningTotalTimer?.started_at_utc ?? null
+		},
+		remainingEstimate: {
+			seconds: remainingSeconds,
+			activeCountdownSeconds,
+			unplannedSectionCount
+		}
 	};
 }
 
@@ -306,7 +539,7 @@ export function startOrResumeLive(
 		(database, state, now) => {
 			database
 				.prepare(
-					`UPDATE shows SET status = 'live', updated_at_utc = ?
+					`UPDATE shows SET status = 'live', revision = revision + 1, updated_at_utc = ?
 					 WHERE id = ? AND status != 'completed'`
 				)
 				.run(now, showId);
@@ -316,10 +549,14 @@ export function startOrResumeLive(
 					 WHERE show_id = ?`
 				)
 				.run(now, showId);
+			openShowTimerRun(database, showId, now);
 			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;
+			if (state.current_usage_id && activeRun) {
+				resumeSectionTimerRun(database, showId, now);
+				return;
+			}
 			const current = state.current_usage_id
 				? orderedUsages(database, showId).find((usage) => usage.id === state.current_usage_id)
 				: undefined;
@@ -331,6 +568,263 @@ export function startOrResumeLive(
 	);
 }
 
+export function pauseLive(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'pause',
+		(database, state, now) => {
+			if (!state.started_at_utc || state.ended_at_utc) throw new Error('NOT_LIVE');
+			if (!showTimerRunning(database, showId)) throw new Error('ALREADY_PAUSED');
+			closeShowTimerRun(database, showId, now);
+			closeActiveRun(database, showId, now);
+			database
+				.prepare(
+					`UPDATE live_section_timer_runs SET ended_at_utc = ?
+					 WHERE timer_id IN (
+						SELECT id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL
+					 ) AND ended_at_utc IS NULL`
+				)
+				.run(now, showId);
+		},
+		nowValue
+	);
+}
+
+export function resumeLive(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'resume',
+		(database, state, now) => {
+			if (!state.started_at_utc || state.ended_at_utc) throw new Error('NOT_LIVE');
+			if (showTimerRunning(database, showId)) throw new Error('ALREADY_RUNNING');
+			openShowTimerRun(database, showId, now);
+			if (state.current_usage_id) {
+				database
+					.prepare(
+						`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc)
+						 VALUES (?, ?, ?, ?)`
+					)
+					.run(randomUUID(), showId, state.current_usage_id, now);
+			}
+			resumeSectionTimerRun(database, showId, now);
+		},
+		nowValue
+	);
+}
+
+export function resetSectionTimer(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'reset-section-timer',
+		(database, _state, now) => {
+			const timer = database
+				.prepare(
+					`SELECT section_id, planned_duration_seconds
+					 FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL`
+				)
+				.get(showId) as
+				| { section_id: string; planned_duration_seconds: number }
+				| undefined;
+			if (!timer) throw new Error('NO_SECTION_TIMER');
+			const running = showTimerRunning(database, showId);
+			closeSectionTimer(database, showId, now);
+			const timerId = randomUUID();
+			database
+				.prepare(
+					`INSERT INTO live_section_timers
+					 (id, show_id, section_id, planned_duration_seconds, started_at_utc)
+					 VALUES (?, ?, ?, ?, ?)`
+				)
+				.run(timerId, showId, timer.section_id, timer.planned_duration_seconds, now);
+			if (running) {
+				database
+					.prepare(
+						`INSERT INTO live_section_timer_runs (id, timer_id, started_at_utc)
+						 VALUES (?, ?, ?)`
+					)
+					.run(randomUUID(), timerId, now);
+			}
+		},
+		nowValue
+	);
+}
+
+export function resetTotalTimer(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'reset-total-timer',
+		(database, state, now) => {
+			if (!state.started_at_utc || state.ended_at_utc) throw new Error('NOT_LIVE');
+			const running = showTimerRunning(database, showId);
+			database.prepare('DELETE FROM live_show_timer_runs WHERE show_id = ?').run(showId);
+			if (running) openShowTimerRun(database, showId, now);
+		},
+		nowValue
+	);
+}
+
+export function setShowStatus(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	expectedShowRevision: number,
+	status: Extract<ShowStatus, 'draft' | 'ready'>,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		`status-${status}`,
+		(database, state, now) => {
+			if (state.started_at_utc) throw new Error('ALREADY_STARTED');
+			const result = database
+				.prepare(
+					'UPDATE shows SET status = ?, revision = revision + 1, updated_at_utc = ? WHERE id = ? AND revision = ?'
+				)
+				.run(status, now, showId, expectedShowRevision);
+			if (result.changes !== 1) throw new Error('CONFLICT');
+		},
+		nowValue
+	);
+}
+
+export function endLive(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'end',
+		(database, state, now) => {
+			if (!state.started_at_utc || state.ended_at_utc) throw new Error('NOT_LIVE');
+			closeShowTimerRun(database, showId, now);
+			closeActiveRun(database, showId, now);
+			database
+				.prepare(
+					`UPDATE live_section_timer_runs SET ended_at_utc = ?
+					 WHERE timer_id IN (
+						SELECT id FROM live_section_timers WHERE show_id = ? AND ended_at_utc IS NULL
+					 ) AND ended_at_utc IS NULL`
+				)
+				.run(now, showId);
+			database
+				.prepare(
+					`UPDATE show_live_states SET ended_at_utc = ? WHERE show_id = ?`
+				)
+				.run(now, showId);
+			database
+				.prepare(`UPDATE shows SET status = 'completed', revision = revision + 1, updated_at_utc = ? WHERE id = ?`)
+				.run(now, showId);
+		},
+		nowValue
+	);
+}
+
+export function resumeEndedLive(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'resume-ended',
+		(database, state, now) => {
+			if (!state.ended_at_utc) throw new Error('NOT_ENDED');
+			database.prepare(`UPDATE shows SET status = 'live', revision = revision + 1, updated_at_utc = ? WHERE id = ?`).run(now, showId);
+			database
+				.prepare('UPDATE show_live_states SET ended_at_utc = NULL WHERE show_id = ?')
+				.run(showId);
+			openShowTimerRun(database, showId, now);
+			if (state.current_usage_id) {
+				database
+					.prepare(
+						`INSERT INTO live_usage_runs (id, show_id, usage_id, started_at_utc)
+						 VALUES (?, ?, ?, ?)`
+					)
+					.run(randomUUID(), showId, state.current_usage_id, now);
+				resumeSectionTimerRun(database, showId, now);
+			}
+		},
+		nowValue,
+		true
+	);
+}
+
+export function startNewLiveRun(
+	showId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'start-new-run',
+		(database, state, now) => {
+			if (!state.ended_at_utc) throw new Error('NOT_ENDED');
+			database.prepare('DELETE FROM live_usage_runs WHERE show_id = ?').run(showId);
+			database.prepare('DELETE FROM live_show_timer_runs WHERE show_id = ?').run(showId);
+			database.prepare('DELETE FROM live_section_timers WHERE show_id = ?').run(showId);
+			database
+				.prepare(
+					`UPDATE piece_usages SET status = 'open'
+					 WHERE show_section_id IN (SELECT id FROM show_sections WHERE show_id = ?)`
+				)
+				.run(showId);
+			database
+				.prepare(
+					`UPDATE show_live_states
+					 SET current_usage_id = NULL, started_at_utc = ?, ended_at_utc = NULL
+					 WHERE show_id = ?`
+				)
+				.run(now, showId);
+			database.prepare(`UPDATE shows SET status = 'live', revision = revision + 1, updated_at_utc = ? WHERE id = ?`).run(now, showId);
+			openShowTimerRun(database, showId, now);
+			const target = orderedUsages(database, showId).find((usage) => usage.status === 'open');
+			if (target) activateUsage(database, showId, target.id, now);
+		},
+		nowValue,
+		true
+	);
+}
+
 function advanceCurrent(
 	showId: string,
 	commandId: string,
@@ -344,6 +838,7 @@ function advanceCurrent(
 		expectedRevision,
 		status,
 		(database, state, now) => {
+			if (!showTimerRunning(database, showId)) throw new Error('TIMER_PAUSED');
 			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);
@@ -354,10 +849,12 @@ function advanceCurrent(
 				.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
+			else {
+				closeSectionTimer(database, showId, now);
 				database
 					.prepare('UPDATE show_live_states SET current_usage_id = NULL WHERE show_id = ?')
 					.run(showId);
+			}
 		},
 		nowValue
 	);
@@ -393,6 +890,7 @@ export function goBack(
 		expectedRevision,
 		'back',
 		(database, state, now) => {
+			if (!showTimerRunning(database, showId)) throw new Error('TIMER_PAUSED');
 			const ordered = orderedUsages(database, showId);
 			const currentIndex = state.current_usage_id
 				? ordered.findIndex((usage) => usage.id === state.current_usage_id)
@@ -414,6 +912,35 @@ export function goBack(
 	);
 }
 
+export function selectUsage(
+	showId: string,
+	usageId: string,
+	commandId: string,
+	expectedRevision: number,
+	nowValue?: Date
+) {
+	return executeCommand(
+		showId,
+		commandId,
+		expectedRevision,
+		'select',
+		(database, state, now) => {
+			if (!state.started_at_utc) throw new Error('NOT_STARTED');
+			if (!showTimerRunning(database, showId)) throw new Error('TIMER_PAUSED');
+			usageBelongsToShow(database, showId, usageId);
+			if (state.current_usage_id === usageId) return;
+			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, usageId, now);
+		},
+		nowValue
+	);
+}
+
 export function presentUsage(
 	showId: string,
 	usageId: string | null,
@@ -480,25 +1007,90 @@ export function issuePresentationAccess(showId: string) {
 	const database = getDatabase();
 	const now = nowIso();
 	ensureLiveState(database, showId, now);
-	const token = randomBytes(32).toString('base64url');
+	return database.transaction(() => {
-	database.transaction(() => {
+		let channel = database
+			.prepare("SELECT * FROM presentation_channels WHERE id = 'default'")
+			.get() as { access_key: string; show_id: string | null } | undefined;
+		if (!channel) {
+			const accessKey = randomBytes(32).toString('base64url');
+			clearPresentationState(database, showId);
 			database
 				.prepare(
-				'UPDATE presentation_access_tokens SET revoked_at_utc = ? WHERE show_id = ? AND revoked_at_utc IS NULL'
+					`INSERT INTO presentation_channels
+					 (id, name, access_key, key_hash, show_id, revision, created_at_utc, updated_at_utc)
+					 VALUES ('default', 'Standardausgabe', ?, ?, ?, 1, ?, ?)`
 				)
-			.run(now, showId);
+				.run(accessKey, hashToken(accessKey), showId, now, now);
+			channel = { access_key: accessKey, show_id: showId };
+		} else if (channel.show_id !== showId) {
+			clearPresentationState(database, showId);
 			database
 				.prepare(
-				`INSERT INTO presentation_access_tokens (id, show_id, token_hash, created_at_utc)
+					`UPDATE presentation_channels SET show_id = ?, revision = revision + 1,
-				 VALUES (?, ?, ?, ?)`
+					 updated_at_utc = ? WHERE id = 'default'`
 				)
-			.run(randomUUID(), showId, hashToken(token), now);
+				.run(showId, now);
+		}
+		return channel.access_key;
 	})();
-	return token;
+}
+
+function clearPresentationState(database: Database.Database, showId: string) {
+	database
+		.prepare(
+			`UPDATE show_live_states SET presentation_usage_id = NULL,
+			 presentation_revision = presentation_revision + 1, updated_at_utc = ?
+			 WHERE show_id = ? AND presentation_usage_id IS NOT NULL`
+		)
+		.run(nowIso(), showId);
+}
+
+export function clearPresentationChannel() {
+	const now = nowIso();
+	getDatabase().transaction(() => {
+		const database = getDatabase();
+		const channel = database
+			.prepare("SELECT show_id FROM presentation_channels WHERE id = 'default'")
+			.get() as { show_id: string | null } | undefined;
+		if (!channel) throw new Error('NOT_FOUND');
+		if (channel.show_id) clearPresentationState(database, channel.show_id);
+		database
+			.prepare(
+				`UPDATE presentation_channels SET show_id = NULL, revision = revision + 1,
+				 updated_at_utc = ? WHERE id = 'default'`
+			)
+			.run(now);
+	})();
+}
+
+export function rotatePresentationChannelKey(showId: string) {
+	issuePresentationAccess(showId);
+	const accessKey = randomBytes(32).toString('base64url');
+	const now = nowIso();
+	getDatabase()
+		.prepare(
+			`UPDATE presentation_channels SET access_key = ?, key_hash = ?, revision = revision + 1,
+			 updated_at_utc = ? WHERE id = 'default'`
+		)
+		.run(accessKey, hashToken(accessKey), now);
+	return accessKey;
+}
+
+export function presentationChannelAccess(channelId: string, accessKey: string) {
+	if (!channelId || !accessKey || accessKey.length > 200) return false;
+	return Boolean(
+		getDatabase()
+			.prepare('SELECT 1 FROM presentation_channels WHERE id = ? AND key_hash = ?')
+			.get(channelId, hashToken(accessKey))
+	);
 }
 
 function presentationShowId(database: Database.Database, token: string) {
 	if (!token || token.length > 200) return null;
+	const channel = database
+		.prepare('SELECT show_id FROM presentation_channels WHERE key_hash = ?')
+		.get(hashToken(token)) as { show_id: string | null } | undefined;
+	if (channel) return channel.show_id;
 	const row = database
 		.prepare(
 			`SELECT show_id FROM presentation_access_tokens
@@ -508,15 +1100,30 @@ function presentationShowId(database: Database.Database, token: string) {
 	return row?.show_id ?? null;
 }
 
+export function getPresentationChannelView(channelId: string): PresentationView | null {
+	const channel = getDatabase()
+		.prepare('SELECT show_id, revision FROM presentation_channels WHERE id = ?')
+		.get(channelId) as { show_id: string | null; revision: number } | undefined;
+	if (!channel) return null;
+	if (!channel.show_id) return { revision: channel.revision * 1_000_000_000, content: null };
+	const view = getPresentationViewForShow(channel.show_id);
+	return { ...view, revision: channel.revision * 1_000_000_000 + view.revision };
+}
+
 export function getPresentationView(token: string): PresentationView | null {
 	const database = getDatabase();
 	const showId = presentationShowId(database, token);
 	if (!showId) return null;
+	return getPresentationViewForShow(showId);
+}
+
+function getPresentationViewForShow(showId: string): PresentationView {
+	const database = getDatabase();
 	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,
+			`SELECT u.title_snapshot, u.output_title_snapshot, u.presentation_snapshot,
 			 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,
@@ -528,8 +1135,8 @@ export function getPresentationView(token: string): PresentationView | null {
 		.get(state.presentation_usage_id, showId) as
 		| {
 				title_snapshot: string;
+				output_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;
@@ -543,33 +1150,16 @@ export function getPresentationView(token: string): PresentationView | null {
 		  }
 		| 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,
+			topics: (
+				database
+					.prepare('SELECT name FROM usage_topic_snapshots WHERE usage_id = ? ORDER BY position')
+					.all(state.presentation_usage_id) as { name: string }[]
+			).map((topic) => topic.name),
+			title: usage.output_title_snapshot || usage.title_snapshot,
 			html: renderMarkdown(usage.presentation_snapshot),
 			source: usage.presentation_source_url_snapshot
 				? {
@@ -589,8 +1179,15 @@ export function getPresentationView(token: string): PresentationView | null {
 				usage.presentation_provider_id_snapshot,
 				usage.presentation_source_timecode_snapshot
 			),
-			sources,
+			sources: [],
-			images
+			images: (
+				database
+					.prepare(
+						`SELECT id, alt_text FROM usage_media_snapshots
+						 WHERE usage_id = ? AND is_presentation = 1`
+					)
+					.all(state.presentation_usage_id) as { id: string; alt_text: string }[]
+			).map((media) => ({ id: media.id, altText: media.alt_text }))
 		}
 	};
 }
@@ -605,19 +1202,35 @@ export async function getPresentationPreviewImage(token: string) {
 	}
 }
 
-export async function getPresentationMedia(token: string, mediaId: string) {
+export async function getPresentationMedia(
+	token: string,
+	snapshotId: string
+): Promise<{ data: Buffer; mimeType: string; byteSize: number; altText: string } | null> {
 	const database = getDatabase();
 	const showId = presentationShowId(database, token);
-	if (!showId) return null;
+	if (!showId || !snapshotId) return null;
-	const allowed = database
+	const media = database
 		.prepare(
-			`SELECT 1 FROM show_live_states l
+			`SELECT pm.storage_name, pm.mime_type, pm.byte_size, ums.alt_text
-			 JOIN piece_usages u ON u.id = l.presentation_usage_id
+			 FROM show_live_states state
+			 JOIN usage_media_snapshots ums ON ums.usage_id = state.presentation_usage_id
+			 JOIN piece_usages u ON u.id = ums.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
+			 JOIN piece_media pm ON pm.id = ums.original_media_id
-			 WHERE l.show_id = ? AND s.show_id = ? AND m.id = ?`
+			 WHERE state.show_id = ? AND s.show_id = state.show_id
+			 AND s.is_reserve_bank = 0 AND ums.id = ? AND ums.is_presentation = 1`
 		)
-		.get(showId, showId, mediaId);
+		.get(showId, snapshotId) as
-	if (!allowed) return null;
+		{ storage_name: string; mime_type: string; byte_size: number; alt_text: string } | undefined;
-	return getMediaFile(mediaId);
+	if (!media) return null;
+	try {
+		return {
+			data: await readFile(path.join(getServerPaths().uploads, media.storage_name)),
+			mimeType: media.mime_type,
+			byteSize: media.byte_size,
+			altText: media.alt_text
+		};
+	} catch {
+		return null;
+	}
 }

src/lib/server/presentation.ts

@@ -28,6 +28,7 @@ export type PresentationSource = {
 
 export type PresentationContent = {
 	mode: PresentationMode;
+	topics: string[];
 	title: string;
 	html: string;
 	source: PresentationSource | null;

src/lib/server/previews.ts

@@ -86,7 +86,7 @@ export function getPieces(): PreviewPiece[] {
 				(SELECT count(*) FROM piece_sources ps WHERE ps.piece_id = p.id) AS source_count
 			FROM pieces p
 			LEFT JOIN formats f ON f.id = p.format_id
-			WHERE p.status IN ('preparing', 'ready')
+			WHERE p.status IN ('preparing', 'ready') AND p.deleted_at_utc IS NULL
 			ORDER BY CASE p.status WHEN 'ready' THEN 0 ELSE 1 END, p.title`
 		)
 		.all() as PieceRow[];
@@ -175,9 +175,12 @@ export function getTaxonomy() {
 			id: string;
 			name: string;
 		}[],
-		topics: database.prepare('SELECT id, name FROM topics ORDER BY name').all() as {
+		topics: database
+			.prepare('SELECT id, name, icon_name AS iconName FROM topics ORDER BY name')
+			.all() as {
 			id: string;
 			name: string;
+			iconName: string;
 		}[]
 	};
 }

src/lib/server/shows.spec.ts

@@ -9,6 +9,7 @@ import {
 	addPieceUsage,
 	addShowSection,
 	createShow,
+	createAndAddPieceUsage,
 	duplicatePieceUsage,
 	getPieceUsageContexts,
 	getShow,
@@ -44,6 +45,7 @@ function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
 	const edited = { ...usage, ...overrides };
 	return {
 		title: edited.title,
+		outputTitle: edited.outputTitle,
 		intro: edited.intro,
 		research: edited.research,
 		moderation: edited.moderation,
@@ -57,12 +59,71 @@ function editedUsage(usage: PieceUsage, overrides: Partial<PieceUsage> = {}) {
 		presentationDescription: edited.presentationDescription,
 		presentationImageUrl: edited.presentationImageUrl,
 		presentationSiteName: edited.presentationSiteName,
+		presentationMediaId: edited.presentationMediaId,
 		ownNotes: edited.ownNotes,
 		durationSeconds: edited.durationSeconds
 	};
 }
 
 describe('show builder data layer', () => {
+	it('creates a fundus original and usage atomically and idempotently', () => {
+		const created = createShow({ title: 'Direkte Planung', startsAtUtc: null, templateId: null });
+		const section = addShowSection(created.id, created.revision, {
+			name: 'Ablauf',
+			categoryId: null,
+			explicitDurationSeconds: null
+		});
+		const before = (
+			getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number }
+		).count;
+		const first = createAndAddPieceUsage(created.id, section.revision, 'new-piece-command', {
+			title: 'Direkt geplantes Piece',
+			templateId: 'talk',
+			sectionId: section.id
+		});
+		const repeated = createAndAddPieceUsage(created.id, section.revision, 'new-piece-command', {
+			title: 'Darf nicht doppelt entstehen',
+			templateId: 'blank',
+			sectionId: section.id
+		});
+		expect(repeated).toEqual({ ...first, duplicate: true });
+		expect(getShow(created.id)?.sections[0].usages).toHaveLength(1);
+		expect(getPiece(first.pieceId)).toMatchObject({
+			title: 'Direkt geplantes Piece',
+			status: 'ready',
+			formatId: 'format-talk'
+		});
+		expect(
+			(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
+				.count
+		).toBe(before + 1);
+
+		expect(() =>
+			createAndAddPieceUsage(created.id, first.revision, 'failing-command', {
+				title: 'Rollback',
+				templateId: 'blank',
+				sectionId: 'missing'
+			})
+		).toThrow('NOT_FOUND');
+		expect(
+			(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
+				.count
+		).toBe(before + 1);
+
+		const removed = removePieceUsage(created.id, first.usageId, first.revision);
+		const afterRemoval = createAndAddPieceUsage(created.id, removed.revision, 'new-piece-command', {
+			title: 'Darf auch nach dem Entfernen nicht neu entstehen',
+			templateId: 'blank',
+			sectionId: section.id
+		});
+		expect(afterRemoval).toEqual({ ...first, duplicate: true });
+		expect(getShow(created.id)?.sections[0].usages).toHaveLength(0);
+		expect(
+			(getDatabase().prepare('SELECT count(*) AS count FROM pieces').get() as { count: number })
+				.count
+		).toBe(before + 1);
+	});
+
 	it('creates blank and templated shows with independent sections and reserve banks', () => {
 		const templatesBefore = listShowTemplates();
 		expect(
@@ -360,7 +421,8 @@ describe('show builder data layer', () => {
 			.run('https://youtu.be/dQw4w9WgXcQ');
 		getDatabase()
 			.prepare(
-				`UPDATE pieces SET presentation_mode = 'video', presentation_source_position = 0,
+				`UPDATE pieces SET output_title = 'Öffentlicher Ausgabetitel',
+				 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'`
@@ -378,6 +440,7 @@ describe('show builder data layer', () => {
 		});
 		let usage = getShow(show.id)!.sections[0].usages[0];
 		expect(usage).toMatchObject({
+			outputTitle: 'Öffentlicher Ausgabetitel',
 			presentationMode: 'video',
 			presentationSourceUrl: 'https://youtu.be/dQw4w9WgXcQ',
 			presentationSourceTimecodeSeconds: 75,
@@ -402,6 +465,180 @@ describe('show builder data layer', () => {
 		});
 	});
 
+	it('keeps private source, tool and topic snapshots stable until an explicit refresh', () => {
+		const database = getDatabase();
+		database
+			.prepare(
+				`INSERT INTO tools (id, name, start_url, description, is_active, created_at_utc, updated_at_utc)
+				 VALUES ('tool-tierlist', 'Tierlist', 'https://example.com/start', '', 1, ?, ?)`
+			)
+			.run('2026-10-23T00:00:00.000Z', '2026-10-23T00:00:00.000Z');
+		database
+			.prepare(
+				`INSERT INTO piece_tools (id, piece_id, tool_id, work_url, note, position)
+				 VALUES ('piece-tool-console', 'piece-console', 'tool-tierlist', 'https://example.com/board', 'Erster Stand', 0)`
+			)
+			.run();
+		const show = createShow({ title: 'Relationen', startsAtUtc: null, templateId: null });
+		const section = addShowSection(show.id, show.revision, {
+			name: 'Block',
+			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({
+			sources: [{ label: 'Herstellerseite', url: 'https://example.com/console' }],
+			tools: [{ name: 'Tierlist', workUrl: 'https://example.com/board', note: 'Erster Stand' }],
+			topics: [{ name: 'Gaming', iconName: '' }]
+		});
+
+		database
+			.prepare("UPDATE piece_sources SET label = 'Neue Quelle' WHERE piece_id = 'piece-console'")
+			.run();
+		database
+			.prepare("UPDATE tools SET name = 'Neuer Katalogname' WHERE id = 'tool-tierlist'")
+			.run();
+		database
+			.prepare(
+				"UPDATE piece_tools SET work_url = 'https://example.com/new' WHERE id = 'piece-tool-console'"
+			)
+			.run();
+		database.prepare("DELETE FROM piece_topics WHERE piece_id = 'piece-console'").run();
+		database
+			.prepare(
+				"INSERT INTO piece_topics (piece_id, topic_id) VALUES ('piece-console', 'topic-internet')"
+			)
+			.run();
+		usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage.sources[0].label).toBe('Herstellerseite');
+		expect(usage.tools[0]).toMatchObject({
+			name: 'Tierlist',
+			workUrl: 'https://example.com/board'
+		});
+		expect(usage.topics).toEqual([{ name: 'Gaming', iconName: '' }]);
+
+		refreshPieceUsageFromOriginal(show.id, usage.id, added.revision);
+		usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage.sources[0].label).toBe('Neue Quelle');
+		expect(usage.tools[0]).toMatchObject({
+			name: 'Neuer Katalogname',
+			workUrl: 'https://example.com/new'
+		});
+		expect(usage.topics).toEqual([{ name: 'Netzkultur', iconName: '' }]);
+	});
+
+	it('snapshots active media, their presentation choice and topic icons independently', () => {
+		const database = getDatabase();
+		database.prepare("UPDATE topics SET icon_name = 'gamepad' WHERE id = 'topic-gaming'").run();
+		const insertMedia = database.prepare(
+			`INSERT INTO piece_media (id, piece_id, storage_name, original_name, mime_type,
+			 byte_size, alt_text, position, created_at_utc, removed_at_utc)
+			 VALUES (?, 'piece-console', ?, ?, 'image/png', 10, ?, ?, ?, ?)`
+		);
+		insertMedia.run(
+			'media-first',
+			'first.png',
+			'first-original.png',
+			'Erstes Bild',
+			0,
+			'2026-10-23T00:00:00.000Z',
+			null
+		);
+		insertMedia.run(
+			'media-second',
+			'second.png',
+			'second-original.png',
+			'Zweites Bild',
+			1,
+			'2026-10-23T00:00:00.000Z',
+			null
+		);
+		insertMedia.run(
+			'media-removed',
+			'removed.png',
+			'removed-original.png',
+			'Entferntes Bild',
+			2,
+			'2026-10-23T00:00:00.000Z',
+			'2026-10-23T01:00:00.000Z'
+		);
+		database
+			.prepare(
+				"INSERT INTO piece_presentation_media (piece_id, media_id) VALUES ('piece-console', 'media-first')"
+			)
+			.run();
+		const show = createShow({ title: 'Medien', startsAtUtc: null, templateId: null });
+		const section = addShowSection(show.id, show.revision, {
+			name: 'Bilder',
+			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.topics).toEqual([{ name: 'Gaming', iconName: 'gamepad' }]);
+		expect(usage.media).toMatchObject([
+			{ originalMediaId: 'media-first', altText: 'Erstes Bild', position: 0, isPresentation: true },
+			{
+				originalMediaId: 'media-second',
+				altText: 'Zweites Bild',
+				position: 1,
+				isPresentation: false
+			}
+		]);
+		expect(usage.presentationMediaId).toBe(usage.media[0].id);
+
+		const selected = updatePieceUsage(show.id, usage.id, added.revision, {
+			...editedUsage(usage),
+			presentationMediaId: usage.media[1].id
+		});
+		usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage.media.map((item) => item.isPresentation)).toEqual([false, true]);
+		expect(() =>
+			updatePieceUsage(show.id, usage.id, selected.revision, {
+				...editedUsage(usage),
+				presentationMediaId: 'media-first'
+			})
+		).toThrow('INVALID_PRESENTATION_MEDIA');
+		expect(getShow(show.id)?.revision).toBe(selected.revision);
+
+		const duplicate = duplicatePieceUsage(show.id, usage.id, selected.revision);
+		const duplicateUsage = getShow(show.id)!.sections[0].usages[1];
+		expect(duplicateUsage.media.map((item) => item.originalMediaId)).toEqual([
+			'media-first',
+			'media-second'
+		]);
+		expect(duplicateUsage.presentationMediaId).toBe(duplicateUsage.media[1].id);
+		expect(duplicateUsage.media.map((item) => item.id)).not.toEqual(
+			usage.media.map((item) => item.id)
+		);
+
+		database
+			.prepare("UPDATE piece_media SET removed_at_utc = ? WHERE id = 'media-first'")
+			.run('2026-10-23T02:00:00.000Z');
+		database
+			.prepare("UPDATE piece_media SET alt_text = 'Neuer Alternativtext' WHERE id = 'media-second'")
+			.run();
+		database.prepare("DELETE FROM piece_presentation_media WHERE piece_id = 'piece-console'").run();
+		database
+			.prepare(
+				"INSERT INTO piece_presentation_media (piece_id, media_id) VALUES ('piece-console', 'media-second')"
+			)
+			.run();
+		refreshPieceUsageFromOriginal(show.id, usage.id, duplicate.revision);
+		usage = getShow(show.id)!.sections[0].usages[0];
+		expect(usage.media).toMatchObject([
+			{ originalMediaId: 'media-second', altText: 'Neuer Alternativtext', isPresentation: true }
+		]);
+		expect(duplicateUsage.media).toHaveLength(2);
+	});
+
 	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, {

src/lib/server/shows.ts

@@ -1,5 +1,6 @@
 import { randomUUID } from 'node:crypto';
 import type Database from 'better-sqlite3';
+import { createPiece } from './content.js';
 import { getDatabase } from './database.js';
 import { detectVideoProvider, type PresentationMode } from './presentation.js';
 
@@ -42,9 +43,11 @@ export type PieceUsage = {
 	status: UsageStatus;
 	durationSeconds: number;
 	title: string;
+	outputTitle: string;
 	intro: string;
 	research: string;
 	moderation: string;
+	interaction: string;
 	transition: string;
 	presentation: string;
 	presentationMode: PresentationMode;
@@ -58,6 +61,28 @@ export type PieceUsage = {
 	presentationProvider: string;
 	presentationProviderId: string;
 	ownNotes: string;
+	sources: { id: string; label: string; url: string; timecodeSeconds: number | null }[];
+	tools: {
+		id: string;
+		originalToolId: string | null;
+		name: string;
+		startUrl: string;
+		workUrl: string;
+		note: string;
+	}[];
+	topics: UsageTopic[];
+	media: PieceUsageMedia[];
+	presentationMediaId: string | null;
+};
+
+export type UsageTopic = { name: string; iconName: string };
+
+export type PieceUsageMedia = {
+	id: string;
+	originalMediaId: string;
+	altText: string;
+	position: number;
+	isPresentation: boolean;
 };
 
 export type SentPieceUsage = {
@@ -129,9 +154,11 @@ export type PieceUsageInput = {
 
 export type PieceUsageUpdate = {
 	title: string;
+	outputTitle: string;
 	intro: string;
 	research: string;
 	moderation: string;
+	interaction?: string;
 	transition: string;
 	presentation: string;
 	presentationMode: PresentationMode;
@@ -144,6 +171,8 @@ export type PieceUsageUpdate = {
 	presentationSiteName: string;
 	ownNotes: string;
 	durationSeconds: number;
+	tools?: { id: string; workUrl: string; note: string }[];
+	presentationMediaId?: string | null;
 };
 
 export type MovePieceUsageInput = {
@@ -185,9 +214,11 @@ type UsageRow = {
 	status: UsageStatus;
 	duration_seconds: number;
 	title_snapshot: string;
+	output_title_snapshot: string;
 	intro_snapshot: string;
 	research_snapshot: string;
 	moderation_snapshot: string;
+	interaction_snapshot: string;
 	transition_snapshot: string;
 	presentation_snapshot: string;
 	presentation_mode_snapshot: PresentationMode;
@@ -348,6 +379,43 @@ function usageSection(
 	return row;
 }
 
+function requireUsagesRemovable(
+	database: Database.Database,
+	showId: string,
+	usageIds: string[]
+): void {
+	if (!usageIds.length) return;
+	const placeholders = usageIds.map(() => '?').join(', ');
+	const state = database
+		.prepare(
+			`SELECT current_usage_id, presentation_usage_id FROM show_live_states WHERE show_id = ?`
+		)
+		.get(showId) as
+		{ current_usage_id: string | null; presentation_usage_id: string | null } | undefined;
+	if (state?.current_usage_id && usageIds.includes(state.current_usage_id)) {
+		throw new Error('USAGE_IS_CURRENT');
+	}
+	if (state?.presentation_usage_id && usageIds.includes(state.presentation_usage_id)) {
+		throw new Error('USAGE_IS_PRESENTED');
+	}
+	if (
+		database
+			.prepare(`SELECT 1 FROM live_usage_runs WHERE usage_id IN (${placeholders}) LIMIT 1`)
+			.get(...usageIds)
+	) {
+		throw new Error('USAGE_HAS_LIVE_RUNS');
+	}
+	if (
+		database
+			.prepare(
+				`SELECT 1 FROM piece_usages WHERE id IN (${placeholders}) AND status != 'open' LIMIT 1`
+			)
+			.get(...usageIds)
+	) {
+		throw new Error('USAGE_NOT_OPEN');
+	}
+}
+
 function normalizePositions(
 	database: Database.Database,
 	table: 'show_sections' | 'piece_usages',
@@ -368,7 +436,7 @@ function normalizePositions(
 	ids.forEach((id, position) => update.run(position, id));
 }
 
-function usageFromRow(row: UsageRow): PieceUsage {
+function usageFromRow(database: Database.Database, row: UsageRow): PieceUsage {
 	return {
 		id: row.id,
 		originalPieceId: row.original_piece_id,
@@ -376,9 +444,11 @@ function usageFromRow(row: UsageRow): PieceUsage {
 		status: row.status,
 		durationSeconds: row.duration_seconds,
 		title: row.title_snapshot,
+		outputTitle: row.output_title_snapshot,
 		intro: row.intro_snapshot,
 		research: row.research_snapshot,
 		moderation: row.moderation_snapshot,
+		interaction: row.interaction_snapshot,
 		transition: row.transition_snapshot,
 		presentation: row.presentation_snapshot,
 		presentationMode: row.presentation_mode_snapshot,
@@ -391,10 +461,258 @@ function usageFromRow(row: UsageRow): PieceUsage {
 		presentationSiteName: row.presentation_site_name_snapshot,
 		presentationProvider: row.presentation_provider_snapshot,
 		presentationProviderId: row.presentation_provider_id_snapshot,
-		ownNotes: row.own_notes
+		ownNotes: row.own_notes,
+		sources: (
+			database
+				.prepare(
+					`SELECT id, label, url, timecode_seconds FROM usage_source_snapshots
+					 WHERE usage_id = ? ORDER BY position`
+				)
+				.all(row.id) as {
+				id: string;
+				label: string;
+				url: string;
+				timecode_seconds: number | null;
+			}[]
+		).map((source) => ({
+			id: source.id,
+			label: source.label,
+			url: source.url,
+			timecodeSeconds: source.timecode_seconds
+		})),
+		tools: (
+			database
+				.prepare(
+					`SELECT id, original_tool_id, name, start_url, work_url, note
+					 FROM usage_tool_snapshots WHERE usage_id = ? ORDER BY position`
+				)
+				.all(row.id) as {
+				id: string;
+				original_tool_id: string | null;
+				name: string;
+				start_url: string;
+				work_url: string;
+				note: string;
+			}[]
+		).map((tool) => ({
+			id: tool.id,
+			originalToolId: tool.original_tool_id,
+			name: tool.name,
+			startUrl: tool.start_url,
+			workUrl: tool.work_url,
+			note: tool.note
+		})),
+		topics: (
+			database
+				.prepare(
+					'SELECT name, icon_name FROM usage_topic_snapshots WHERE usage_id = ? ORDER BY position'
+				)
+				.all(row.id) as { name: string; icon_name: string }[]
+		).map((topic) => ({ name: topic.name, iconName: topic.icon_name })),
+		media: (
+			database
+				.prepare(
+					`SELECT id, original_media_id, alt_text, position, is_presentation
+					 FROM usage_media_snapshots WHERE usage_id = ? ORDER BY position`
+				)
+				.all(row.id) as {
+				id: string;
+				original_media_id: string;
+				alt_text: string;
+				position: number;
+				is_presentation: number;
+			}[]
+		).map((media) => ({
+			id: media.id,
+			originalMediaId: media.original_media_id,
+			altText: media.alt_text,
+			position: media.position,
+			isPresentation: media.is_presentation === 1
+		})),
+		presentationMediaId:
+			(
+				database
+					.prepare(
+						'SELECT id FROM usage_media_snapshots WHERE usage_id = ? AND is_presentation = 1'
+					)
+					.get(row.id) as { id: string } | undefined
+			)?.id ?? null
 	};
 }
 
+function snapshotPieceRelations(database: Database.Database, usageId: string, pieceId: string) {
+	database.prepare('DELETE FROM usage_source_snapshots WHERE usage_id = ?').run(usageId);
+	database.prepare('DELETE FROM usage_tool_snapshots WHERE usage_id = ?').run(usageId);
+	database.prepare('DELETE FROM usage_topic_snapshots WHERE usage_id = ?').run(usageId);
+	database.prepare('DELETE FROM usage_media_snapshots WHERE usage_id = ?').run(usageId);
+	const sources = database
+		.prepare(
+			`SELECT label, url, timecode_seconds, position FROM piece_sources
+			 WHERE piece_id = ? ORDER BY position`
+		)
+		.all(pieceId) as {
+		label: string;
+		url: string;
+		timecode_seconds: number | null;
+		position: number;
+	}[];
+	const addSource = database.prepare(
+		`INSERT INTO usage_source_snapshots (id, usage_id, label, url, timecode_seconds, position)
+		 VALUES (?, ?, ?, ?, ?, ?)`
+	);
+	for (const source of sources) {
+		addSource.run(
+			randomUUID(),
+			usageId,
+			source.label,
+			source.url,
+			source.timecode_seconds,
+			source.position
+		);
+	}
+	const tools = database
+		.prepare(
+			`SELECT pt.tool_id, t.name, t.start_url, pt.work_url, pt.note, pt.position
+			 FROM piece_tools pt JOIN tools t ON t.id = pt.tool_id
+			 WHERE pt.piece_id = ? ORDER BY pt.position`
+		)
+		.all(pieceId) as {
+		tool_id: string;
+		name: string;
+		start_url: string;
+		work_url: string;
+		note: string;
+		position: number;
+	}[];
+	const addTool = database.prepare(
+		`INSERT INTO usage_tool_snapshots
+		 (id, usage_id, original_tool_id, name, start_url, work_url, note, position)
+		 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+	);
+	for (const tool of tools) {
+		addTool.run(
+			randomUUID(),
+			usageId,
+			tool.tool_id,
+			tool.name,
+			tool.start_url,
+			tool.work_url,
+			tool.note,
+			tool.position
+		);
+	}
+	const topics = database
+		.prepare(
+			`SELECT t.name, t.icon_name FROM piece_topics pt JOIN topics t ON t.id = pt.topic_id
+			 WHERE pt.piece_id = ? ORDER BY t.name, t.id`
+		)
+		.all(pieceId) as { name: string; icon_name: string }[];
+	const addTopic = database.prepare(
+		'INSERT INTO usage_topic_snapshots (usage_id, name, icon_name, position) VALUES (?, ?, ?, ?)'
+	);
+	topics.forEach((topic, position) => addTopic.run(usageId, topic.name, topic.icon_name, position));
+	const media = database
+		.prepare(
+			`SELECT pm.id, pm.alt_text, pm.position,
+			 CASE WHEN ppm.media_id IS NULL THEN 0 ELSE 1 END AS is_presentation
+			 FROM piece_media pm
+			 LEFT JOIN piece_presentation_media ppm
+			  ON ppm.piece_id = pm.piece_id AND ppm.media_id = pm.id
+			 WHERE pm.piece_id = ? AND pm.removed_at_utc IS NULL ORDER BY pm.position`
+		)
+		.all(pieceId) as {
+		id: string;
+		alt_text: string;
+		position: number;
+		is_presentation: number;
+	}[];
+	const addMedia = database.prepare(
+		`INSERT INTO usage_media_snapshots
+		 (id, usage_id, original_media_id, alt_text, position, is_presentation)
+		 VALUES (?, ?, ?, ?, ?, ?)`
+	);
+	for (const item of media) {
+		addMedia.run(
+			randomUUID(),
+			usageId,
+			item.id,
+			item.alt_text,
+			item.position,
+			item.is_presentation
+		);
+	}
+}
+
+function copyUsageRelations(database: Database.Database, sourceUsageId: string, usageId: string) {
+	const sources = database
+		.prepare(
+			`SELECT label, url, timecode_seconds, position FROM usage_source_snapshots
+			 WHERE usage_id = ? ORDER BY position`
+		)
+		.all(sourceUsageId) as {
+		label: string;
+		url: string;
+		timecode_seconds: number | null;
+		position: number;
+	}[];
+	const addSource = database.prepare(
+		`INSERT INTO usage_source_snapshots (id, usage_id, label, url, timecode_seconds, position)
+		 VALUES (?, ?, ?, ?, ?, ?)`
+	);
+	for (const source of sources)
+		addSource.run(
+			randomUUID(),
+			usageId,
+			source.label,
+			source.url,
+			source.timecode_seconds,
+			source.position
+		);
+	const tools = database
+		.prepare(
+			`SELECT original_tool_id, name, start_url, work_url, note, position
+			 FROM usage_tool_snapshots WHERE usage_id = ? ORDER BY position`
+		)
+		.all(sourceUsageId) as {
+		original_tool_id: string | null;
+		name: string;
+		start_url: string;
+		work_url: string;
+		note: string;
+		position: number;
+	}[];
+	const addTool = database.prepare(
+		`INSERT INTO usage_tool_snapshots
+		 (id, usage_id, original_tool_id, name, start_url, work_url, note, position)
+		 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+	);
+	for (const tool of tools)
+		addTool.run(
+			randomUUID(),
+			usageId,
+			tool.original_tool_id,
+			tool.name,
+			tool.start_url,
+			tool.work_url,
+			tool.note,
+			tool.position
+		);
+	database
+		.prepare(
+			`INSERT INTO usage_topic_snapshots (usage_id, name, icon_name, position)
+			 SELECT ?, name, icon_name, position FROM usage_topic_snapshots WHERE usage_id = ?`
+		)
+		.run(usageId, sourceUsageId);
+	database
+		.prepare(
+			`INSERT INTO usage_media_snapshots
+			 (id, usage_id, original_media_id, alt_text, position, is_presentation)
+			 SELECT lower(hex(randomblob(16))), ?, original_media_id, alt_text, position, is_presentation
+			 FROM usage_media_snapshots WHERE usage_id = ?`
+		)
+		.run(usageId, sourceUsageId);
+}
+
 export function listShows(): ShowListItem[] {
 	return (
 		getDatabase()
@@ -478,8 +796,8 @@ export function getShow(id: string): Show | null {
 	const usageRows = database
 		.prepare(
 			`SELECT u.id, u.show_section_id, u.original_piece_id, u.position, u.status,
-			 u.duration_seconds, u.title_snapshot, u.intro_snapshot, u.research_snapshot,
+			 u.duration_seconds, u.title_snapshot, u.output_title_snapshot, u.intro_snapshot, u.research_snapshot,
-			 u.moderation_snapshot, u.transition_snapshot, u.presentation_snapshot,
+			 u.moderation_snapshot, u.interaction_snapshot, u.transition_snapshot, u.presentation_snapshot,
 			 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,
@@ -492,7 +810,7 @@ export function getShow(id: string): Show | null {
 	const usagesBySection = new Map<string, PieceUsage[]>();
 	for (const row of usageRows) {
 		const usages = usagesBySection.get(row.show_section_id) ?? [];
-		usages.push(usageFromRow(row));
+		usages.push(usageFromRow(database, row));
 		usagesBySection.set(row.show_section_id, usages);
 	}
 	const sections = sectionRows
@@ -754,6 +1072,12 @@ export function removeShowSection(
 	return database.transaction(() => {
 		const result = bumpShow(database, showId, expectedRevision);
 		sectionBelongsToShow(database, showId, sectionId);
+		const usageIds = (
+			database.prepare('SELECT id FROM piece_usages WHERE show_section_id = ?').all(sectionId) as {
+				id: string;
+			}[]
+		).map((usage) => usage.id);
+		requireUsagesRemovable(database, showId, usageIds);
 		database.prepare('DELETE FROM show_sections WHERE id = ?').run(sectionId);
 		const ids = (
 			database
@@ -805,8 +1129,8 @@ export function addPieceUsage(
 		sectionBelongsToShow(database, showId, sectionId, input.sectionId === null);
 		const piece = database
 			.prepare(
-				`SELECT p.title, p.duration_seconds, p.intro, p.research_text, p.moderation_notes,
+				`SELECT p.title, p.output_title, p.duration_seconds, p.intro, p.research_text, p.moderation_notes,
-				 p.transition_text, p.presentation_text, p.status, p.presentation_mode,
+				 p.interaction_text, p.transition_text, p.presentation_text, p.status, p.presentation_mode,
 				 COALESCE(ps.label, '') AS presentation_source_label,
 				 COALESCE(ps.url, '') AS presentation_source_url,
 				 ps.timecode_seconds AS presentation_source_timecode,
@@ -818,10 +1142,12 @@ export function addPieceUsage(
 			.get(input.pieceId) as
 			| {
 					title: string;
+					output_title: string;
 					duration_seconds: number;
 					intro: string;
 					research_text: string;
 					moderation_notes: string;
+					interaction_text: string;
 					transition_text: string;
 					presentation_text: string;
 					presentation_mode: PresentationMode;
@@ -838,6 +1164,13 @@ export function addPieceUsage(
 			  }
 			| undefined;
 		if (!piece) throw new Error('NOT_FOUND');
+		if (
+			!database
+				.prepare('SELECT 1 FROM pieces WHERE id = ? AND deleted_at_utc IS NULL')
+				.get(input.pieceId)
+		) {
+			throw new Error('NOT_FOUND');
+		}
 		if (piece.status !== 'ready') throw new Error('PIECE_NOT_READY');
 		const ids = (
 			database
@@ -849,14 +1182,14 @@ export function addPieceUsage(
 		database
 			.prepare(
 				`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
-				 duration_seconds, title_snapshot, intro_snapshot, research_snapshot,
+				 duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot, research_snapshot,
-				 moderation_snapshot, transition_snapshot, presentation_snapshot,
+				 moderation_snapshot, interaction_snapshot, transition_snapshot, presentation_snapshot,
 				 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, own_notes, is_reserve)
-				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, '', ?)`
+				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, '', ?)`
 			)
 			.run(
 				id,
@@ -865,9 +1198,11 @@ export function addPieceUsage(
 				ids.length,
 				piece.duration_seconds,
 				piece.title,
+				piece.output_title,
 				piece.intro,
 				piece.research_text,
 				piece.moderation_notes,
+				piece.interaction_text,
 				piece.transition_text,
 				piece.presentation_text,
 				piece.presentation_mode,
@@ -882,12 +1217,67 @@ export function addPieceUsage(
 				piece.presentation_provider_id,
 				input.sectionId === null ? 1 : 0
 			);
+		snapshotPieceRelations(database, id, input.pieceId);
 		ids.splice(position, 0, id);
 		normalizePositions(database, 'piece_usages', ids);
 		return { ...result, id };
 	})();
 }
 
+export function createAndAddPieceUsage(
+	showId: string,
+	expectedRevision: number,
+	commandId: string,
+	input: Omit<PieceUsageInput, 'pieceId'> & { title: string; templateId: string }
+) {
+	if (!commandId || commandId.length > 200) throw new Error('INVALID_COMMAND');
+	const title = cleanText(input.title, 200, 'title', true);
+	const database = getDatabase();
+	return database.transaction(() => {
+		const duplicate = database
+			.prepare(
+				`SELECT piece_id, usage_id, result_revision FROM planning_commands
+				 WHERE show_id = ? AND command_id = ?`
+			)
+			.get(showId, commandId) as
+			{ piece_id: string; usage_id: string; result_revision: number } | undefined;
+		if (duplicate) {
+			return {
+				pieceId: duplicate.piece_id,
+				usageId: duplicate.usage_id,
+				revision: duplicate.result_revision,
+				duplicate: true
+			};
+		}
+
+		const pieceId = createPiece(input.templateId || 'blank');
+		database
+			.prepare(
+				`UPDATE pieces SET title = ?, status = 'ready', revision = revision + 1,
+				 updated_at_utc = ? WHERE id = ?`
+			)
+			.run(title, new Date().toISOString(), pieceId);
+		const usage = addPieceUsage(showId, expectedRevision, {
+			pieceId,
+			sectionId: input.sectionId,
+			position: input.position
+		});
+		database
+			.prepare(
+				`INSERT INTO planning_commands
+				 (show_id, command_id, piece_id, usage_id, result_revision, created_at_utc)
+				 VALUES (?, ?, ?, ?, ?, ?)`
+			)
+			.run(showId, commandId, pieceId, usage.id, usage.revision, new Date().toISOString());
+		return {
+			pieceId,
+			usageId: usage.id,
+			revision: usage.revision,
+			duplicate: false
+		};
+	})();
+}
+
 export function duplicatePieceUsage(
 	showId: string,
 	usageId: string,
@@ -899,8 +1289,8 @@ export function duplicatePieceUsage(
 		const sourceSection = usageSection(database, showId, usageId);
 		const source = database
 			.prepare(
-				`SELECT original_piece_id, status, duration_seconds, title_snapshot, intro_snapshot,
+				`SELECT original_piece_id, status, duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot,
-				 research_snapshot, moderation_snapshot, transition_snapshot, presentation_snapshot,
+				 research_snapshot, moderation_snapshot, interaction_snapshot, transition_snapshot, presentation_snapshot,
 				 presentation_mode_snapshot, presentation_source_label_snapshot,
 				 presentation_source_url_snapshot, presentation_source_timecode_snapshot,
 				 presentation_title_meta_snapshot, presentation_description_snapshot,
@@ -922,14 +1312,14 @@ export function duplicatePieceUsage(
 		database
 			.prepare(
 				`INSERT INTO piece_usages (id, show_section_id, original_piece_id, position, status,
-				 duration_seconds, title_snapshot, intro_snapshot, research_snapshot,
+				 duration_seconds, title_snapshot, output_title_snapshot, intro_snapshot, research_snapshot,
-				 moderation_snapshot, transition_snapshot, presentation_snapshot,
+				 moderation_snapshot, interaction_snapshot, transition_snapshot, presentation_snapshot,
 				 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, own_notes, is_reserve)
-				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+				 VALUES (?, ?, ?, ?, 'open', ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
 			)
 			.run(
 				id,
@@ -938,9 +1328,11 @@ export function duplicatePieceUsage(
 				ids.length,
 				source.duration_seconds,
 				source.title_snapshot,
+				source.output_title_snapshot,
 				source.intro_snapshot,
 				source.research_snapshot,
 				source.moderation_snapshot,
+				source.interaction_snapshot,
 				source.transition_snapshot,
 				source.presentation_snapshot,
 				source.presentation_mode_snapshot,
@@ -956,6 +1348,7 @@ export function duplicatePieceUsage(
 				source.own_notes,
 				source.is_reserve
 			);
+		copyUsageRelations(database, usageId, id);
 		ids.splice(sourcePosition + 1, 0, id);
 		normalizePositions(database, 'piece_usages', ids);
 		return { ...result, id };
@@ -973,8 +1366,8 @@ export function refreshPieceUsageFromOriginal(
 		usageSection(database, showId, usageId);
 		const source = database
 			.prepare(
-				`SELECT p.title, p.duration_seconds, p.intro, p.research_text,
+				`SELECT p.title, p.output_title, p.duration_seconds, p.intro, p.research_text,
-				 p.moderation_notes, p.transition_text, p.presentation_text, p.presentation_mode,
+				 p.moderation_notes, p.interaction_text, p.transition_text, p.presentation_text, p.presentation_mode,
 				 COALESCE(ps.label, '') AS presentation_source_label,
 				 COALESCE(ps.url, '') AS presentation_source_url,
 				 ps.timecode_seconds AS presentation_source_timecode,
@@ -983,15 +1376,17 @@ export function refreshPieceUsageFromOriginal(
 				 FROM piece_usages u JOIN pieces p ON p.id = u.original_piece_id
 				 LEFT JOIN piece_sources ps ON ps.piece_id = p.id
 				 AND ps.position = p.presentation_source_position
-				 WHERE u.id = ?`
+				 WHERE u.id = ? AND p.deleted_at_utc IS NULL`
 			)
 			.get(usageId) as
 			| {
 					title: string;
+					output_title: string;
 					duration_seconds: number;
 					intro: string;
 					research_text: string;
 					moderation_notes: string;
+					interaction_text: string;
 					transition_text: string;
 					presentation_text: string;
 					presentation_mode: PresentationMode;
@@ -1009,8 +1404,8 @@ export function refreshPieceUsageFromOriginal(
 		if (!source) throw new Error('ORIGINAL_NOT_FOUND');
 		database
 			.prepare(
-				`UPDATE piece_usages SET title_snapshot = ?, duration_seconds = ?, intro_snapshot = ?,
+				`UPDATE piece_usages SET title_snapshot = ?, output_title_snapshot = ?, duration_seconds = ?, intro_snapshot = ?,
-				 research_snapshot = ?, moderation_snapshot = ?, transition_snapshot = ?,
+				 research_snapshot = ?, moderation_snapshot = ?, interaction_snapshot = ?, transition_snapshot = ?,
 				 presentation_snapshot = ?, presentation_mode_snapshot = ?,
 				 presentation_source_label_snapshot = ?, presentation_source_url_snapshot = ?,
 				 presentation_source_timecode_snapshot = ?, presentation_title_meta_snapshot = ?,
@@ -1020,10 +1415,12 @@ export function refreshPieceUsageFromOriginal(
 			)
 			.run(
 				source.title,
+				source.output_title,
 				source.duration_seconds,
 				source.intro,
 				source.research_text,
 				source.moderation_notes,
+				source.interaction_text,
 				source.transition_text,
 				source.presentation_text,
 				source.presentation_mode,
@@ -1038,6 +1435,15 @@ export function refreshPieceUsageFromOriginal(
 				source.presentation_provider_id,
 				usageId
 			);
+		snapshotPieceRelations(
+			database,
+			usageId,
+			(
+				database
+					.prepare('SELECT original_piece_id FROM piece_usages WHERE id = ?')
+					.get(usageId) as { original_piece_id: string }
+			).original_piece_id
+		);
 		return result;
 	})();
 }
@@ -1049,11 +1455,14 @@ export function updatePieceUsage(
 	input: PieceUsageUpdate
 ): MutationResult {
 	const title = cleanText(input.title, 200, 'title', true);
+	const outputTitle = cleanText(input.outputTitle, 300, 'output_title');
 	const duration = validDuration(input.durationSeconds)!;
 	const values = {
 		intro: cleanText(input.intro, 50_000, 'intro'),
 		research: cleanText(input.research, 50_000, 'research'),
 		moderation: cleanText(input.moderation, 50_000, 'moderation'),
+		interaction:
+			input.interaction === undefined ? null : cleanText(input.interaction, 50_000, 'interaction'),
 		transition: cleanText(input.transition, 50_000, 'transition'),
 		presentation: cleanText(input.presentation, 50_000, 'presentation'),
 		ownNotes: cleanText(input.ownNotes, 50_000, 'notes')
@@ -1074,8 +1483,8 @@ export function updatePieceUsage(
 		usageSection(database, showId, usageId);
 		database
 			.prepare(
-				`UPDATE piece_usages SET title_snapshot = ?, intro_snapshot = ?, research_snapshot = ?,
+				`UPDATE piece_usages SET title_snapshot = ?, output_title_snapshot = ?, intro_snapshot = ?, research_snapshot = ?,
-				 moderation_snapshot = ?, transition_snapshot = ?, presentation_snapshot = ?,
+				 moderation_snapshot = ?, interaction_snapshot = COALESCE(?, interaction_snapshot), transition_snapshot = ?, presentation_snapshot = ?,
 				 presentation_mode_snapshot = ?, presentation_source_label_snapshot = ?,
 				 presentation_source_url_snapshot = ?, presentation_source_timecode_snapshot = ?,
 				 presentation_title_meta_snapshot = ?, presentation_description_snapshot = ?,
@@ -1085,9 +1494,11 @@ export function updatePieceUsage(
 			)
 			.run(
 				title,
+				outputTitle,
 				values.intro,
 				values.research,
 				values.moderation,
+				values.interaction,
 				values.transition,
 				values.presentation,
 				presentation.mode,
@@ -1104,6 +1515,55 @@ export function updatePieceUsage(
 				duration,
 				usageId
 			);
+		if (input.tools) {
+			const existing = database
+				.prepare('SELECT id FROM usage_tool_snapshots WHERE usage_id = ?')
+				.all(usageId) as { id: string }[];
+			const existingIds = new Set(existing.map((tool) => tool.id));
+			if (
+				input.tools.length !== existing.length ||
+				input.tools.some((tool) => !existingIds.has(tool.id))
+			) {
+				throw new Error('INVALID_TOOLS');
+			}
+			const updateTool = database.prepare(
+				'UPDATE usage_tool_snapshots SET work_url = ?, note = ? WHERE id = ? AND usage_id = ?'
+			);
+			for (const tool of input.tools) {
+				const workUrl = cleanText(tool.workUrl, 2_000, 'tools');
+				if (workUrl) {
+					try {
+						const url = new URL(workUrl);
+						if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password) {
+							throw new Error();
+						}
+					} catch {
+						throw new Error('INVALID_TOOLS');
+					}
+				}
+				updateTool.run(workUrl, cleanText(tool.note, 2_000, 'tools'), tool.id, usageId);
+			}
+		}
+		if (input.presentationMediaId !== undefined) {
+			if (
+				input.presentationMediaId !== null &&
+				!database
+					.prepare('SELECT 1 FROM usage_media_snapshots WHERE id = ? AND usage_id = ?')
+					.get(input.presentationMediaId, usageId)
+			) {
+				throw new Error('INVALID_PRESENTATION_MEDIA');
+			}
+			database
+				.prepare('UPDATE usage_media_snapshots SET is_presentation = 0 WHERE usage_id = ?')
+				.run(usageId);
+			if (input.presentationMediaId !== null) {
+				database
+					.prepare(
+						'UPDATE usage_media_snapshots SET is_presentation = 1 WHERE id = ? AND usage_id = ?'
+					)
+					.run(input.presentationMediaId, usageId);
+			}
+		}
 		return result;
 	})();
 }
@@ -1117,6 +1577,7 @@ export function removePieceUsage(
 	return database.transaction(() => {
 		const result = bumpShow(database, showId, expectedRevision);
 		const source = usageSection(database, showId, usageId);
+		requireUsagesRemovable(database, showId, [usageId]);
 		database.prepare('DELETE FROM piece_usages WHERE id = ?').run(usageId);
 		const ids = (
 			database

src/lib/server/tools.spec.ts

@@ -0,0 +1,78 @@
+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 { closeDatabase } from './database.js';
+import { createTool, listTools, updateTool } from './tools.js';
+
+let directory: string;
+
+beforeEach(() => {
+	directory = mkdtempSync(path.join(tmpdir(), 'sendewerk-tools-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('tool catalog', () => {
+	it('validates, classifies and deactivates tools without deleting them', () => {
+		const id = createTool({
+			name: 'Tierlist',
+			startUrl: 'https://example.com/tierlist',
+			description: 'Gemeinsames Ranking',
+			iconName: 'ranking-star',
+			isActive: true,
+			formatIds: ['format-quiz']
+		});
+		expect(listTools()).toEqual([
+			{
+				id,
+				name: 'Tierlist',
+				startUrl: 'https://example.com/tierlist',
+				description: 'Gemeinsames Ranking',
+				iconName: 'ranking-star',
+				isActive: true,
+				formatIds: ['format-quiz']
+			}
+		]);
+		updateTool(id, {
+			name: 'Tierlist',
+			startUrl: '',
+			description: '',
+			iconName: 'list-ol',
+			isActive: false,
+			formatIds: []
+		});
+		expect(listTools()).toEqual([]);
+		expect(listTools(true)[0]).toMatchObject({ id, iconName: 'list-ol', isActive: false });
+		expect(() =>
+			createTool({
+				name: 'Unsicher',
+				startUrl: 'javascript:alert(1)',
+				description: '',
+				iconName: 'wrench',
+				isActive: true,
+				formatIds: []
+			})
+		).toThrow('INVALID_TOOL_URL');
+		expect(() =>
+			createTool({
+				name: 'Unbekanntes Icon',
+				startUrl: '',
+				description: '',
+				iconName: 'kein-font-awesome-icon',
+				isActive: true,
+				formatIds: []
+			})
+		).toThrow('INVALID_ICON');
+	});
+});

src/lib/server/tools.ts

@@ -0,0 +1,156 @@
+import { randomUUID } from 'node:crypto';
+import { classicRegularIconNames } from '#lib/icons/classic-regular.js';
+import { getDatabase } from './database.js';
+
+export type Tool = {
+	id: string;
+	name: string;
+	startUrl: string;
+	description: string;
+	iconName: string;
+	isActive: boolean;
+	formatIds: string[];
+};
+
+export type ToolInput = Omit<Tool, 'id'>;
+
+function clean(value: unknown, maximum: number, required = false) {
+	const text = String(value ?? '').trim();
+	if (text.length > maximum || (required && !text)) throw new Error('INVALID_TOOL');
+	return text;
+}
+
+function validUrl(value: string) {
+	if (!value) return '';
+	try {
+		const url = new URL(value);
+		if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password)
+			throw new Error();
+		return url.href;
+	} catch {
+		throw new Error('INVALID_TOOL_URL');
+	}
+}
+
+function validated(input: ToolInput): ToolInput {
+	const formatIds = [...new Set(input.formatIds.filter(Boolean))];
+	if (formatIds.length > 30) throw new Error('INVALID_TOOL');
+	if (formatIds.length) {
+		const placeholders = formatIds.map(() => '?').join(', ');
+		const row = getDatabase()
+			.prepare(`SELECT count(*) AS count FROM formats WHERE id IN (${placeholders})`)
+			.get(...formatIds) as { count: number };
+		if (row.count !== formatIds.length) throw new Error('INVALID_TOOL_FORMAT');
+	}
+	return {
+		name: clean(input.name, 120, true),
+		startUrl: validUrl(clean(input.startUrl, 2_000)),
+		description: clean(input.description, 2_000),
+		iconName: (() => {
+			const iconName = clean(input.iconName, 120, true);
+			if (!classicRegularIconNames.has(iconName)) throw new Error('INVALID_ICON');
+			return iconName;
+		})(),
+		isActive: Boolean(input.isActive),
+		formatIds
+	};
+}
+
+export function listTools(includeInactive = false): Tool[] {
+	const database = getDatabase();
+	const rows = database
+		.prepare(
+			`SELECT id, name, start_url, description, icon_name, is_active FROM tools
+			 ${includeInactive ? '' : 'WHERE is_active = 1'} ORDER BY is_active DESC, name`
+		)
+		.all() as {
+		id: string;
+		name: string;
+		start_url: string;
+		description: string;
+		icon_name: string;
+		is_active: number;
+	}[];
+	const formats = database.prepare(
+		'SELECT format_id FROM tool_formats WHERE tool_id = ? ORDER BY format_id'
+	);
+	return rows.map((row) => ({
+		id: row.id,
+		name: row.name,
+		startUrl: row.start_url,
+		description: row.description,
+		iconName: row.icon_name,
+		isActive: row.is_active === 1,
+		formatIds: (formats.all(row.id) as { format_id: string }[]).map((item) => item.format_id)
+	}));
+}
+
+function replaceFormats(toolId: string, formatIds: string[]) {
+	const database = getDatabase();
+	database.prepare('DELETE FROM tool_formats WHERE tool_id = ?').run(toolId);
+	const insert = database.prepare('INSERT INTO tool_formats (tool_id, format_id) VALUES (?, ?)');
+	for (const formatId of formatIds) insert.run(toolId, formatId);
+}
+
+export function createTool(rawInput: ToolInput) {
+	const input = validated(rawInput);
+	const database = getDatabase();
+	const id = randomUUID();
+	const now = new Date().toISOString();
+	try {
+		database.transaction(() => {
+			database
+				.prepare(
+					`INSERT INTO tools (id, name, start_url, description, icon_name, is_active, created_at_utc, updated_at_utc)
+					 VALUES (?, ?, ?, ?, ?, ?, ?, ?)`
+				)
+				.run(
+					id,
+					input.name,
+					input.startUrl,
+					input.description,
+					input.iconName,
+					input.isActive ? 1 : 0,
+					now,
+					now
+				);
+			replaceFormats(id, input.formatIds);
+		})();
+	} catch (cause) {
+		if (cause instanceof Error && cause.message.includes('UNIQUE')) {
+			throw new Error('TOOL_EXISTS', { cause });
+		}
+		throw cause;
+	}
+	return id;
+}
+
+export function updateTool(id: string, rawInput: ToolInput) {
+	const input = validated(rawInput);
+	const database = getDatabase();
+	try {
+		database.transaction(() => {
+			const result = database
+				.prepare(
+					`UPDATE tools SET name = ?, start_url = ?, description = ?, icon_name = ?, is_active = ?, updated_at_utc = ?
+					 WHERE id = ?`
+				)
+				.run(
+					input.name,
+					input.startUrl,
+					input.description,
+					input.iconName,
+					input.isActive ? 1 : 0,
+					new Date().toISOString(),
+					id
+				);
+			if (result.changes !== 1) throw new Error('NOT_FOUND');
+			replaceFormats(id, input.formatIds);
+		})();
+	} catch (cause) {
+		if (cause instanceof Error && cause.message.includes('UNIQUE')) {
+			throw new Error('TOOL_EXISTS', { cause });
+		}
+		throw cause;
+	}
+}

src/routes/+layout.server.ts

@@ -2,5 +2,6 @@ import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = ({ locals, url }) => ({
 	user: url.pathname.startsWith('/heinzlive/') ? null : locals.user,
-	presentationMode: url.pathname.startsWith('/heinzlive/')
+	presentationMode: url.pathname.startsWith('/heinzlive/'),
+	liveControllerMode: url.pathname === '/live'
 });

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import NavIcon from '#lib/components/NavIcon.svelte';
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import ThemeToggle from '#lib/components/ThemeToggle.svelte';
 
 	let { children, data } = $props();
@@ -33,6 +34,8 @@
 
 {#if data.presentationMode}
 	{@render children()}
+{:else if data.user && data.liveControllerMode}
+	<main id="main-content" class="live-controller-shell">{@render children()}</main>
 {:else if data.user}
 	<div class="app-shell">
 		<aside class="sidebar">
@@ -84,7 +87,9 @@
 				<span>Sendewerk</span>
 			</a>
 			<form method="POST" action="/logout">
-				<button class="mobile-logout" type="submit" aria-label="Abmelden">↗</button>
+				<button class="mobile-logout" type="submit" aria-label="Abmelden"
+					><AppIcon name="right-from-bracket" /></button
+				>
 			</form>
 			<ThemeToggle />
 		</header>

src/routes/archiv/+page.server.ts

@@ -1,11 +1,17 @@
 import { fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
-import { listPieces, setPieceArchived } from '#lib/server/content.js';
+import { listPieces, setPieceArchived, setPieceDeleted } from '#lib/server/content.js';
 
 export const load: PageServerLoad = ({ locals }) => {
 	requireUser(locals.user);
-	return { pieces: listPieces({ statuses: ['archived'] }) };
+	return {
+		pieces: listPieces({ statuses: ['archived'] }),
+		deletedPieces: listPieces({
+			statuses: ['inbox', 'preparing', 'ready', 'archived'],
+			deleted: true
+		})
+	};
 };
 
 export const actions = {
@@ -18,5 +24,15 @@ export const actions = {
 		} catch {
 			return fail(409, { error: 'Das Piece wurde inzwischen geändert. Bitte Seite neu laden.' });
 		}
+	},
+	restoreDeleted: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceDeleted(String(data.get('pieceId') || ''), Number(data.get('revision')), false);
+			return { success: 'Gelöschtes Piece wurde wiederhergestellt.' };
+		} catch {
+			return fail(409, { error: 'Das Piece wurde inzwischen geändert. Bitte Seite neu laden.' });
+		}
 	}
 } satisfies Actions;

src/routes/archiv/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 </script>
@@ -28,8 +29,29 @@
 				</article>{/each}
 		</div>
 	{:else}<section class="quiet-panel planned-panel">
-			<div class="planned-icon" aria-hidden="true">□</div>
+			<div class="planned-icon" aria-hidden="true"><AppIcon name="box-archive" /></div>
 			<h2>Keine Pieces archiviert</h2>
 			<p>Archivierte Inhalte lassen sich hier später wiederherstellen.</p>
 		</section>{/if}
+	<section class="deleted-pieces" aria-labelledby="deleted-pieces-title">
+		<h2 id="deleted-pieces-title">Gelöschte Pieces</h2>
+		<p class="quiet-copy">
+			Diese Einträge bleiben wiederherstellbar; bestehende Sendungsfassungen werden nicht verändert.
+		</p>
+		{#if data.deletedPieces.length}<div class="archive-list">
+				{#each data.deletedPieces as piece (piece.id)}<article>
+						<div>
+							<h2>{piece.title}</h2>
+							{#if piece.summary}<p>{piece.summary}</p>{/if}
+						</div>
+						<form method="POST" action="?/restoreDeleted">
+							<input type="hidden" name="pieceId" value={piece.id} /><input
+								type="hidden"
+								name="revision"
+								value={piece.revision}
+							/><button class="secondary-button" type="submit">Wiederherstellen</button>
+						</form>
+					</article>{/each}
+			</div>{:else}<p class="context-empty">Keine gelöschten Pieces.</p>{/if}
+	</section>
 </div>

src/routes/eingang/+page.server.ts

@@ -1,7 +1,7 @@
 import { fail } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
-import { captureInbox, listPieces } from '#lib/server/content.js';
+import { captureInbox, listPieces, setPieceDeleted } from '#lib/server/content.js';
 
 export const load: PageServerLoad = ({ locals }) => {
 	requireUser(locals.user);
@@ -26,5 +26,15 @@ export const actions = {
 						: 'Ein Titel ist erforderlich.'
 			});
 		}
+	},
+	delete: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceDeleted(String(data.get('pieceId') || ''), Number(data.get('revision')), true);
+			return { deleted: true };
+		} catch {
+			return fail(409, { error: 'Das Piece wurde inzwischen geändert. Bitte neu laden.' });
+		}
 	}
 } satisfies Actions;

src/routes/eingang/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
 </script>
@@ -45,18 +46,37 @@
 	{#if data.pieces.length}
 		<section class="inbox-list">
 			<h2>{data.pieces.length} {data.pieces.length === 1 ? 'offener Inhalt' : 'offene Inhalte'}</h2>
-			{#each data.pieces as piece (piece.id)}<a
+			{#each data.pieces as piece (piece.id)}<article class="inbox-item">
-					class="inbox-item"
+					<a href={resolve('/fundus/[id]', { id: piece.id })}
-					href={resolve('/fundus/[id]', { id: piece.id })}
 						><span
 							><strong>{piece.title}</strong><small
 								>{piece.sourceCount ? `${piece.sourceCount} Quelle` : 'Gedanke ohne Link'}</small
 							></span
-					><span>Ausarbeiten →</span></a
+						><span>Ausarbeiten <AppIcon name="arrow-right" /></span></a
-				>{/each}
+					>
+					<details class="piece-actions">
+						<summary aria-label={`Aktionen für ${piece.title}`}><AppIcon name="ellipsis" /></summary
+						>
+						<div class="piece-actions-popover">
+							<form
+								method="POST"
+								action="?/delete"
+								onsubmit={(event) =>
+									!confirm(`„${piece.title}“ löschen?`) && event.preventDefault()}
+							>
+								<input type="hidden" name="pieceId" value={piece.id} /><input
+									type="hidden"
+									name="revision"
+									value={piece.revision}
+								/>
+								<button class="text-button danger-text" type="submit">Piece löschen</button>
+							</form>
+						</div>
+					</details>
+				</article>{/each}
 		</section>
 	{:else}<section class="quiet-panel planned-panel">
-			<div class="planned-icon" aria-hidden="true">＋</div>
+			<div class="planned-icon" aria-hidden="true"><AppIcon name="plus" /></div>
 			<h2>Eingang ist leer</h2>
 			<p>Neue Gedanken und Links können oben direkt aufgenommen werden.</p>
 		</section>{/if}

src/routes/fundus/+page.server.ts

@@ -3,12 +3,14 @@ import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import {
 	createPiece,
+	deletePieceTemplate,
 	duplicatePiece,
 	getTaxonomy,
 	listPieces,
-	pieceTemplates,
+	listPieceTemplates,
 	setPieceArchived,
-	type PieceTemplateId
+	setPieceDeleted,
+	setPieceFavorite
 } from '#lib/server/content.js';
 import { getPieceUsageContexts } from '#lib/server/shows.js';
 
@@ -39,7 +41,7 @@ export const load: PageServerLoad = ({ locals, url }) => {
 	return {
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
-		templates: pieceTemplates,
+		templates: listPieceTemplates(),
 		filters
 	};
 };
@@ -57,12 +59,22 @@ export const actions = {
 		const data = await request.formData();
 		let id: string;
 		try {
-			id = createPiece(String(data.get('template') || 'blank') as PieceTemplateId);
+			id = createPiece(String(data.get('template') || 'blank'));
 		} catch (cause) {
 			return fail(400, { intent: 'create', error: actionError(cause) });
 		}
 		redirect(303, `/fundus/${id}`);
 	},
+	deleteTemplate: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			deletePieceTemplate(String(data.get('templateId') || ''), Number(data.get('revision')));
+			return { intent: 'deleteTemplate', success: 'Vorlage gelöscht.' };
+		} catch (cause) {
+			return fail(409, { intent: 'deleteTemplate', error: actionError(cause) });
+		}
+	},
 	duplicate: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -83,5 +95,28 @@ export const actions = {
 		} catch (cause) {
 			return fail(409, { intent: 'archive', error: actionError(cause) });
 		}
+	},
+	favorite: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceFavorite(String(data.get('pieceId') || ''), data.get('favorite') === '1');
+			return { intent: 'favorite', success: 'Favorit aktualisiert.' };
+		} catch (cause) {
+			return fail(404, { intent: 'favorite', error: actionError(cause) });
+		}
+	},
+	delete: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceDeleted(String(data.get('pieceId') || ''), Number(data.get('revision')), true);
+			return {
+				intent: 'delete',
+				success: 'Piece gelöscht. Bestehende Sendungsfassungen bleiben erhalten.'
+			};
+		} catch (cause) {
+			return fail(409, { intent: 'delete', error: actionError(cause) });
+		}
 	}
 } satisfies Actions;

src/routes/fundus/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	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 AppIcon from '#lib/components/AppIcon.svelte';
 	import { formatClock } from '#lib/format.js';
 	import type { PageProps } from './$types';
 
@@ -13,7 +15,7 @@
 	let visiblePieces = $derived(
 		data.pieces.filter(
 			(piece) =>
-				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showUsedPieces || piece.sentHistory.length === 0 || piece.isFavorite) &&
 				(showPlannedPieces || !piece.isPlannedInActiveShow)
 		)
 	);
@@ -59,26 +61,49 @@
 			<h1>Fundus</h1>
 			<p class="page-intro">Vorbereitete Inhalte für kommende Sendungen.</p>
 		</div>
+		<div class="fundus-heading-actions">
 			<div class="heading-stat" aria-label={`${visiblePieces.length} gefundene Inhalte`}>
 				<strong>{visiblePieces.length}</strong><span>Inhalte</span>
 			</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}
-
 			<details class="template-picker">
-		<summary>Neues Piece anlegen</summary>
+				<summary><AppIcon name="plus" /> Neues Piece</summary>
+				<div class="template-popover">
 					<div class="template-grid">
 						{#each data.templates as template (template.id)}
 							<form method="POST" action="?/create">
 								<input type="hidden" name="template" value={template.id} />
 								<button type="submit"
-						><strong>{template.name}</strong><span>{template.description}</span></button
+									><AppIcon name={template.iconName} size="1.35rem" /><strong
+										>{template.name}</strong
+									><span>{template.description}</span></button
 								>
 							</form>
 						{/each}
 					</div>
+					{#if data.templates.some((template) => template.id !== 'blank')}<details
+							class="template-management"
+						>
+							<summary>Vorlagen verwalten</summary>
+							{#each data.templates.filter((template) => template.id !== 'blank') as template (template.id)}
+								<form
+									method="POST"
+									action="?/deleteTemplate"
+									onsubmit={(event) =>
+										!confirm(`Vorlage „${template.name}“ löschen?`) && event.preventDefault()}
+								>
+									<input type="hidden" name="templateId" value={template.id} />
+									<input type="hidden" name="revision" value={template.revision} />
+									<span>{template.name}</span>
+									<button class="text-button danger-text" type="submit">Löschen</button>
+								</form>
+							{/each}
+						</details>{/if}
+				</div>
 			</details>
+		</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}
 
 	<form
 		id="library-filters"
@@ -86,20 +111,26 @@
 		method="GET"
 		aria-label="Fundus durchsuchen und filtern"
 	>
+		<div class="fundus-search-row">
 			<label class="search-field"
-			><span aria-hidden="true">⌕</span><span class="sr-only">Fundus durchsuchen</span><input
+				><AppIcon name="magnifying-glass" /><span class="sr-only">Fundus durchsuchen</span><input
 					name="q"
 					type="search"
 					value={data.filters.query}
 					placeholder="Titel, Quelle oder Thema suchen"
 				/></label
 			>
+			<button class="secondary-button" type="submit">Suchen</button>
+			<details class="filter-picker">
+				<summary><AppIcon name="list-check" /> Weitere Filter</summary>
+				<div class="filter-panel">
 					<label
 						><span>Status</span><select name="status"
 							><option value="">Alle</option><option
 								value="ready"
 								selected={data.filters.status === 'ready'}>Sendefertig</option
-				><option value="preparing" selected={data.filters.status === 'preparing'}>In Arbeit</option
+							><option value="preparing" selected={data.filters.status === 'preparing'}
+								>In Arbeit</option
 							></select
 						></label
 					>
@@ -121,22 +152,19 @@
 					>
 					<label
 						><span>Abschnitt</span><select name="category"
-				><option value="">Alle</option>{#each data.taxonomy.categories as item (item.id)}<option
+							><option value="">Alle</option
+							>{#each data.taxonomy.categories as item (item.id)}<option
 									value={item.id}
 									selected={data.filters.categoryId === item.id}>{item.name}</option
 								>{/each}</select
 						></label
 					>
-		<button class="secondary-button" type="submit">Anwenden</button>
-		<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)}
 							/>
@@ -147,13 +175,20 @@
 								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>
+					<div class="filter-actions">
+						<button class="secondary-button" type="submit">Filter anwenden</button>
+						<button class="text-button" type="button" onclick={resetFilters}>Zurücksetzen</button>
+					</div>
+				</div>
+			</details>
+		</div>
+	</form>
 
 	{#if visiblePieces.length}
 		<div class="piece-grid">
@@ -162,16 +197,29 @@
 					class="piece-card"
 					style={`--category: ${piece.categories[0]?.color ?? '#8b8f98'}`}
 				>
+					<form method="POST" action="?/favorite" class="piece-favorite-form" use:enhance>
+						<input type="hidden" name="pieceId" value={piece.id} />
+						<input type="hidden" name="favorite" value={piece.isFavorite ? '0' : '1'} />
+						<button
+							class="piece-favorite"
+							class:active={piece.isFavorite}
+							type="submit"
+							aria-label={piece.isFavorite
+								? `${piece.title} aus Favoriten entfernen`
+								: `${piece.title} als Favorit markieren`}
+							aria-pressed={piece.isFavorite}><AppIcon name="star" /></button
+						>
+					</form>
 					{#if piece.mediaId}<img
 							class="piece-thumbnail"
 							src={`/media/${piece.mediaId}`}
 							alt=""
-						/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true"
+						/>{:else}<span class="piece-thumbnail piece-thumbnail-placeholder" aria-hidden="true">
-							>S</span
+							<AppIcon name={piece.topics[0]?.iconName || 'newspaper'} size="2rem" />
-						>{/if}
+						</span>{/if}
 					<div class="piece-primary">
 						<h2><a href={resolve('/fundus/[id]', { id: piece.id })}>{piece.title}</a></h2>
-						<p>{piece.summary || 'Noch keine Kurzbeschreibung.'}</p>
+						{#if piece.summary}<p>{piece.summary}</p>{/if}
 						<PieceUsageHistory history={piece.sentHistory} />
 					</div>
 					<div class="piece-classification">
@@ -179,22 +227,26 @@
 							><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
 						>
 						<div class="piece-tags">
-							<span>{piece.format}</span>{#each piece.topics as topic (topic.id)}<span
+							{#if piece.formatId}<span>{piece.format}</span
-									>{topic.name}</span
+								>{/if}{#each piece.topics as topic (topic.id)}<span>{topic.name}</span>{/each}
-								>{/each}
 						</div>
 					</div>
 					<div class="piece-state">
 						<span class:ready={piece.status === 'ready'} class="status-label"
 							>{statusLabel[piece.status]}</span
-						><span class="piece-facts"
+						>{#if piece.durationSeconds || piece.sourceCount}<span class="piece-facts"
-							><span><b>{formatClock(piece.durationSeconds)}</b> geplant</span><span
+								>{#if piece.durationSeconds}<span
+										><b>{formatClock(piece.durationSeconds)}</b> geplant</span
+									>{/if}{#if piece.sourceCount}<span
 										>{piece.sourceCount} {piece.sourceCount === 1 ? 'Quelle' : 'Quellen'}</span
-							></span
+									>{/if}</span
+							>{/if}
 						>
 					</div>
-					<div class="piece-actions">
+					<details class="piece-actions">
-						<a class="text-link" href={resolve('/fundus/[id]', { id: piece.id })}>Bearbeiten</a>
+						<summary aria-label={`Aktionen für ${piece.title}`}><AppIcon name="ellipsis" /></summary
+						>
+						<div class="piece-actions-popover">
 							<form method="POST" action="?/duplicate">
 								<input type="hidden" name="pieceId" value={piece.id} /><button
 									class="text-button"
@@ -208,13 +260,29 @@
 									value={piece.revision}
 								/><button class="text-button danger-text" type="submit">Archivieren</button>
 							</form>
+							<form
+								method="POST"
+								action="?/delete"
+								onsubmit={(event) =>
+									!confirm(
+										`Piece „${piece.title}“ löschen? Bestehende Sendungsfassungen bleiben erhalten.`
+									) && event.preventDefault()}
+							>
+								<input type="hidden" name="pieceId" value={piece.id} /><input
+									type="hidden"
+									name="revision"
+									value={piece.revision}
+								/>
+								<button class="text-button danger-text" type="submit">Piece löschen</button>
+							</form>
 						</div>
+					</details>
 				</article>
 			{/each}
 		</div>
 	{:else}
 		<div class="empty-state">
-			<span aria-hidden="true">⌕</span>
+			<span aria-hidden="true"><AppIcon name="magnifying-glass" /></span>
 			<h2>Kein passendes Piece</h2>
 			<p>Andere Filter wählen oder ein neues Piece anlegen.</p>
 			<a class="secondary-button" href={resolve('/fundus')}>Filter zurücksetzen</a>

src/routes/fundus/[id]/+page.server.ts

@@ -6,26 +6,37 @@ import {
 	duplicatePiece,
 	getPiece,
 	getTaxonomy,
+	listPieceTemplates,
 	loadPiecePresentationMetadata,
 	savePiece,
+	savePieceAsTemplate,
 	setPieceArchived,
+	setPieceDeleted,
+	setPieceFavorite,
 	uploadPieceImage,
 	type EditablePieceStatus,
 	type PieceInput,
 	type PieceSourceInput
 } from '#lib/server/content.js';
 import { renderMarkdown } from '#lib/server/markdown.js';
+import { listTools } from '#lib/server/tools.js';
 
 function renderedFields(
 	piece: Pick<
 		PieceInput,
-		'intro' | 'researchText' | 'moderationNotes' | 'transitionText' | 'presentationText'
+		| 'intro'
+		| 'researchText'
+		| 'moderationNotes'
+		| 'interactionText'
+		| 'transitionText'
+		| 'presentationText'
 	>
 ) {
 	return {
 		intro: renderMarkdown(piece.intro),
 		research: renderMarkdown(piece.researchText),
 		moderation: renderMarkdown(piece.moderationNotes),
+		interaction: renderMarkdown(piece.interactionText ?? ''),
 		transition: renderMarkdown(piece.transitionText),
 		presentation: renderMarkdown(piece.presentationText)
 	};
@@ -55,8 +66,12 @@ function pieceInput(data: FormData): PieceInput {
 			timecodeSeconds: timecode ? Number(timecode) : null
 		});
 	}
+	const toolIds = data.getAll('toolId').map(String);
+	const toolWorkUrls = data.getAll('toolWorkUrl').map(String);
+	const toolNotes = data.getAll('toolNote').map(String);
 	return {
 		title: text(data, 'title'),
+		outputTitle: text(data, 'outputTitle'),
 		summary: text(data, 'summary'),
 		formatId: text(data, 'formatId') || null,
 		status: text(data, 'status') as EditablePieceStatus,
@@ -64,6 +79,7 @@ function pieceInput(data: FormData): PieceInput {
 		intro: text(data, 'intro'),
 		researchText: text(data, 'researchText'),
 		moderationNotes: text(data, 'moderationNotes'),
+		interactionText: text(data, 'interactionText'),
 		transitionText: text(data, 'transitionText'),
 		presentationText: text(data, 'presentationText'),
 		presentationMode: text(data, 'presentationMode') as PieceInput['presentationMode'],
@@ -80,9 +96,15 @@ function pieceInput(data: FormData): PieceInput {
 		presentationDescriptionManual: text(data, 'presentationDescriptionManual') === '1',
 		presentationImageManual: text(data, 'presentationImageManual') === '1',
 		presentationMetadataFetchedAtUtc: text(data, 'presentationMetadataFetchedAtUtc') || null,
+		presentationMediaId: text(data, 'presentationMediaId') || null,
 		topicIds: data.getAll('topicIds').map(String),
 		categoryIds: data.getAll('categoryIds').map(String),
-		sources
+		sources,
+		tools: toolIds.map((toolId, index) => ({
+			toolId,
+			workUrl: toolWorkUrls[index] ?? '',
+			note: toolNotes[index] ?? ''
+		}))
 	};
 }
 
@@ -120,7 +142,13 @@ export const load: PageServerLoad = ({ locals, params }) => {
 	const piece = getPiece(params.id);
 	if (!piece) error(404, 'Piece nicht gefunden');
 	if (piece.status === 'archived') redirect(303, '/archiv');
-	return { piece, taxonomy: getTaxonomy(), rendered: renderedFields(piece) };
+	return {
+		piece,
+		taxonomy: getTaxonomy(),
+		tools: listTools(true),
+		templates: listPieceTemplates().filter((template) => template.id !== 'blank'),
+		rendered: renderedFields(piece)
+	};
 };
 
 export const actions = {
@@ -161,6 +189,25 @@ export const actions = {
 		}
 		redirect(303, `/fundus/${params.id}`);
 	},
+	saveTemplate: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const reference = text(data, 'templateRef');
+		const [templateId, revision] = reference.split('|');
+		try {
+			savePieceAsTemplate(
+				params.id,
+				text(data, 'templateName'),
+				text(data, 'templateDescription'),
+				templateId || undefined,
+				revision ? Number(revision) : undefined
+			);
+			return { intent: 'saveTemplate', success: 'Vorlage gespeichert.' };
+		} catch (cause) {
+			const problem = saveError(cause);
+			return fail(problem.status, { intent: 'saveTemplate', ...problem });
+		}
+	},
 	upload: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -168,7 +215,13 @@ export const actions = {
 		if (!(image instanceof File))
 			return fail(400, { intent: 'upload', error: 'Bitte ein Bild auswählen.' });
 		try {
-			await uploadPieceImage(params.id, Number(data.get('revision')), image, text(data, 'altText'));
+			await uploadPieceImage(
+				params.id,
+				Number(data.get('revision')),
+				image,
+				text(data, 'altText'),
+				data.get('selectForPresentation') === '1'
+			);
 		} catch (cause) {
 			const code = cause instanceof Error ? cause.message : '';
 			if (code === 'CONFLICT')
@@ -216,5 +269,25 @@ export const actions = {
 			return fail(409, { intent: 'archive', error: saveError(cause).error });
 		}
 		redirect(303, '/archiv');
+	},
+	favorite: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceFavorite(params.id, data.get('favorite') === '1');
+			return { intent: 'favorite', success: true };
+		} catch (cause) {
+			return fail(404, { intent: 'favorite', error: saveError(cause).error });
+		}
+	},
+	delete: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			setPieceDeleted(params.id, Number(data.get('revision')), true);
+		} catch (cause) {
+			return fail(409, { intent: 'delete', error: saveError(cause).error });
+		}
+		redirect(303, '/fundus');
 	}
 } satisfies Actions;

src/routes/fundus/[id]/+page.svelte

@@ -4,6 +4,9 @@
 	import { resolve } from '$app/paths';
 	import { onDestroy, onMount, untrack } from 'svelte';
 	import MarkdownEditorField from '#lib/components/MarkdownEditorField.svelte';
+	import AppIcon from '#lib/components/AppIcon.svelte';
+	import ChoicePicker from '#lib/components/ChoicePicker.svelte';
+	import InlineTitleEditor from '#lib/components/InlineTitleEditor.svelte';
 	import PieceEditorDialog from '#lib/components/PieceEditorDialog.svelte';
 	import PresentationDisplay from '#lib/components/PresentationDisplay.svelte';
 	import type { PresentationContent } from '#lib/server/presentation.js';
@@ -14,6 +17,7 @@
 	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 pieceTools = $state(untrack(() => data.piece.tools.map((tool) => ({ ...tool }))));
 	let rendered = $state(untrack(() => ({ ...data.rendered })));
 	let activeSection = $state<'script' | 'research' | 'presentation'>('script');
 	let saveState = $state<'idle' | 'dirty' | 'saving' | 'saved' | 'error' | 'conflict'>('idle');
@@ -42,9 +46,17 @@
 			? resolve('/fundus/[id]/praesentation/preview-image', { id: data.piece.id })
 			: ''
 	);
-	let previewContent = $derived<PresentationContent>({
+	let selectedMedia = $derived(
+		draft.media.find((media) => media.id === draft.presentationMediaId) ?? null
+	);
+	let previewContent = $derived<
+		PresentationContent & { images: { id: string; altText: string }[] }
+	>({
 		mode: draft.presentationMode,
-		title: draft.title,
+		topics: data.taxonomy.topics
+			.filter((topic) => draft.topicIds.includes(topic.id))
+			.map((topic) => topic.name),
+		title: draft.outputTitle || draft.title,
 		html: rendered.presentation,
 		source: featuredSource
 			? {
@@ -64,8 +76,16 @@
 				? `https://www.youtube-nocookie.com/embed/${draft.presentationProviderId}${featuredSource?.timecodeSeconds ? `?start=${featuredSource.timecodeSeconds}` : ''}`
 				: draft.presentationProvider === 'tiktok' && draft.presentationProviderId
 					? `https://www.tiktok.com/player/v1/${draft.presentationProviderId}`
-					: ''
+					: '',
+		images: selectedMedia ? [{ id: selectedMedia.id, altText: selectedMedia.altText }] : []
 	});
+	let presentationPreviewImage = $derived(
+		selectedMedia
+			? draft.presentationMode === 'text'
+				? '/media'
+				: `/media/${selectedMedia.id}`
+			: sourcePreviewImage
+	);
 	let pendingHref: string | null = null;
 	let allowNavigation = false;
 
@@ -147,6 +167,31 @@
 		scheduleSave();
 	}
 
+	function removeTool(index: number) {
+		pieceTools.splice(index, 1);
+		scheduleSave();
+	}
+
+	function selectTools(ids: string[]) {
+		for (const id of ids) {
+			if (pieceTools.some((tool) => tool.toolId === id)) continue;
+			const tool = data.tools.find((item) => item.id === id);
+			if (tool)
+				pieceTools.push({
+					id: crypto.randomUUID(),
+					toolId: tool.id,
+					name: tool.name,
+					startUrl: tool.startUrl,
+					iconName: tool.iconName,
+					isActive: tool.isActive,
+					workUrl: '',
+					note: ''
+				});
+		}
+		pieceTools = pieceTools.filter((tool) => ids.includes(tool.toolId));
+		scheduleSave();
+	}
+
 	function presentationSourceChanged() {
 		draft.presentationMetadataFetchedAtUtc = null;
 		draft.presentationProvider = '';
@@ -209,21 +254,25 @@
 		onrequestclose={requestClose}
 	>
 		{#snippet header()}
-			<p class="eyebrow">Fundus-Original</p>
+			<div class="piece-editor-kicker">
-			<label class="piece-dialog-title">
+				<p class="eyebrow">Fundusfassung</p>
-				<span class="sr-only">Titel</span>
+				<form method="POST" action="?/favorite" use:enhance>
-				<textarea
+					<input type="hidden" name="favorite" value={data.piece.isFavorite ? '0' : '1'} />
+					<button
+						class="piece-favorite"
+						class:active={data.piece.isFavorite}
+						type="submit"
+						aria-label={data.piece.isFavorite ? 'Aus Favoriten entfernen' : 'Als Favorit markieren'}
+						aria-pressed={data.piece.isFavorite}><AppIcon name="star" /></button
+					>
+				</form>
+			</div>
+			<InlineTitleEditor
 				form="piece-editor-form"
-					name="title"
-					required
-					rows="1"
-					maxlength="200"
-					aria-label="Titel"
 				bind:value={draft.title}
-					oninput={scheduleSave}></textarea>
+				oncommit={scheduleSave}
-			</label>
+			/>
 			<h1 class="sr-only" id="piece-editor-title">{draft.title}</h1>
-			<small>Original im Fundus · Änderungen wirken nicht rückwirkend auf Einplanungen.</small>
 		{/snippet}
 
 		<form
@@ -244,7 +293,6 @@
 						<p class="eyebrow">Für die Moderation</p>
 						<h2>Sendungstext</h2>
 					</div>
-					<small>Die drei Teile bleiben getrennt gespeichert.</small>
 				</div>
 				<div class="piece-writing-stack">
 					<MarkdownEditorField
@@ -260,6 +308,13 @@
 						rows={10}
 						bind:value={draft.moderationNotes}
 					/>
+					<MarkdownEditorField
+						name="interactionText"
+						label="Interaktion"
+						placeholder="Welche Frage möchtest du dem Chat stellen?"
+						privateField
+						bind:value={draft.interactionText}
+					/>
 					<MarkdownEditorField
 						name="transitionText"
 						label="Überleitung"
@@ -305,20 +360,20 @@
 								name="summary"
 								rows="3"
 								maxlength="2000"
+								placeholder="Worum geht es in wenigen Sätzen?"
 								bind:value={draft.summary}></textarea></label
 						>
 						<fieldset>
-							<legend>Themen</legend>
+							<legend>Themen</legend><ChoicePicker
-							<div class="choice-grid">
+								items={data.taxonomy.topics}
-								{#each data.taxonomy.topics as item (item.id)}<label
+								selectedIds={draft.topicIds}
-										><input
+								label="Themen"
-											type="checkbox"
+								fieldName="topicIds"
-											name="topicIds"
+								onselectionchange={(ids) => {
-											value={item.id}
+									draft.topicIds = ids;
-											bind:group={draft.topicIds}
+									scheduleSave();
-										/>{item.name}</label
+								}}
-									>{/each}
+							/>
-							</div>
 						</fieldset>
 						<fieldset>
 							<legend>Vorgeschlagene Abschnittskategorien</legend>
@@ -369,6 +424,7 @@
 										>Name<input
 											name="sourceLabel"
 											maxlength="200"
+											placeholder="Name der Quelle"
 											bind:value={source.label}
 										/></label
 									><label
@@ -376,6 +432,7 @@
 											name="sourceUrl"
 											type="url"
 											maxlength="2000"
+											placeholder="https://…"
 											bind:value={source.url}
 										/></label
 									><label
@@ -384,6 +441,7 @@
 											type="number"
 											min="0"
 											max="86400"
+											placeholder="Optional"
 											bind:value={source.timecodeSeconds}
 										/></label
 									><button
@@ -394,6 +452,63 @@
 								</div>{/each}
 						</div>{:else}<p class="context-empty">Noch keine Quelle hinterlegt.</p>{/if}
 				</section>
+				<section class="piece-source-editor">
+					<div class="piece-subsection-heading">
+						<div>
+							<p class="eyebrow">Arbeitsmittel</p>
+							<h3>Werkzeuge</h3>
+						</div>
+						<ChoicePicker
+							items={data.tools
+								.filter((tool) => tool.isActive)
+								.map((tool) => ({
+									id: tool.id,
+									name: tool.name,
+									description: tool.description,
+									iconName: tool.iconName,
+									meta: tool.formatIds.includes(draft.formatId ?? '') ? 'Passt zum Format' : ''
+								}))}
+							selectedIds={pieceTools.map((tool) => tool.toolId)}
+							label="Werkzeuge"
+							onselectionchange={selectTools}
+						/>
+					</div>
+					{#if pieceTools.length}<div class="source-list">
+							{#each pieceTools as tool, index (tool.id)}<div
+									class="source-row tool-assignment-row"
+								>
+									<input type="hidden" name="toolId" value={tool.toolId} />
+									<div class="tool-assignment-name">
+										<AppIcon name={tool.iconName || 'wrench'} /><span
+											><strong>{tool.name}</strong>{#if !tool.isActive}<small>Deaktiviert</small
+												>{/if}</span
+										>
+									</div>
+									<label
+										>Arbeitslink<input
+											name="toolWorkUrl"
+											type="url"
+											maxlength="2000"
+											placeholder={tool.startUrl || 'https://…'}
+											bind:value={tool.workUrl}
+										/></label
+									>
+									<label
+										>Notiz<input
+											name="toolNote"
+											maxlength="2000"
+											placeholder="Optional"
+											bind:value={tool.note}
+										/></label
+									>
+									<button
+										class="text-button danger-text"
+										type="button"
+										onclick={() => removeTool(index)}>Entfernen</button
+									>
+								</div>{/each}
+						</div>{:else}<p class="context-empty">Noch kein Werkzeug zugeordnet.</p>{/if}
+				</section>
 			</section>
 
 			<section class="piece-editor-panel" hidden={activeSection !== 'presentation'}>
@@ -411,6 +526,14 @@
 				</div>
 				<div class="piece-presentation-layout">
 					<div class="piece-presentation-controls">
+						<label
+							>Präsentationstitel<input
+								name="outputTitle"
+								maxlength="300"
+								placeholder="Optional, sonst interner Titel"
+								bind:value={draft.outputTitle}
+							/></label
+						>
 						<MarkdownEditorField
 							name="presentationText"
 							label="Öffentlicher Text"
@@ -441,9 +564,10 @@
 								></label
 							>
 							<label
-								>Titel<input
+								>Kartentitel<input
 									name="presentationTitle"
 									maxlength="300"
+									placeholder="Optionaler Anzeigetitel"
 									bind:value={draft.presentationTitle}
 									oninput={() => (draft.presentationTitleManual = true)}
 								/></label
@@ -453,6 +577,7 @@
 									name="presentationImageUrl"
 									type="url"
 									maxlength="2000"
+									placeholder="https://…"
 									bind:value={draft.presentationImageUrl}
 									oninput={() => (draft.presentationImageManual = true)}
 								/></label
@@ -462,6 +587,7 @@
 									name="presentationDescription"
 									rows="3"
 									maxlength="1000"
+									placeholder="Kurzer Text zur Vorschau"
 									bind:value={draft.presentationDescription}
 									oninput={() => (draft.presentationDescriptionManual = true)}></textarea></label
 							>
@@ -483,7 +609,7 @@
 					<aside class="piece-presentation-preview" aria-label="Präsentationsvorschau">
 						<PresentationDisplay
 							content={previewContent}
-							imageSrc={sourceImageUnavailable ? '' : sourcePreviewImage}
+							imageSrc={sourceImageUnavailable ? '' : presentationPreviewImage}
 						/>
 					</aside>
 				</div>
@@ -513,17 +639,44 @@
 			</section>
 		</form>
 
-		<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'research'}>
+		<section class="piece-editor-panel piece-media-panel" hidden={activeSection !== 'presentation'}>
 			<div class="piece-subsection-heading">
 				<div>
-					<p class="eyebrow">Private Dateien</p>
+					<p class="eyebrow">Hochgeladene Bilder</p>
-					<h3>Material</h3>
+					<h3>Präsentationsbild</h3>
 				</div>
 				<small>JPEG, PNG, WebP oder GIF bis 5 MB</small>
 			</div>
-			{#if data.piece.media.length}<div class="media-grid">
+			{#if data.piece.media.length}<label class="media-none"
+					><input
+						form="piece-editor-form"
+						type="radio"
+						name="presentationMediaId"
+						value=""
+						checked={!draft.presentationMediaId}
+						onchange={() => {
+							draft.presentationMediaId = null;
+							scheduleSave();
+						}}
+					/> Kein hochgeladenes Bild</label
+				>
+				<div class="media-grid">
 					{#each data.piece.media as media (media.id)}<figure>
-							<img src={`/media/${media.id}`} alt={media.altText} />
+							<label class="media-presentation-choice"
+								><input
+									form="piece-editor-form"
+									type="radio"
+									name="presentationMediaId"
+									value={media.id}
+									checked={draft.presentationMediaId === media.id}
+									onchange={() => {
+										draft.presentationMediaId = media.id;
+										scheduleSave();
+									}}
+								/><img src={`/media/${media.id}`} alt={media.altText} /><span
+									>Als Präsentationsbild</span
+								></label
+							>
 							<figcaption>
 								<span>{media.altText || media.originalName}</span>
 								<form method="POST" action="?/deleteImage">
@@ -555,11 +708,33 @@
 				><button class="secondary-button" type="submit" disabled={actionsBlocked}
 					>Bild hochladen</button
 				>
+				<label class="upload-select"
+					><input type="checkbox" name="selectForPresentation" value="1" checked /> Direkt als Präsentationsbild
+					verwenden</label
+				>
 			</form>
 		</section>
 
 		{#snippet footer()}
 			<div class="piece-dialog-secondary-actions">
+				<details class="template-save-menu">
+					<summary>Als Vorlage speichern</summary>
+					<form method="POST" action="?/saveTemplate">
+						<label
+							>Vorlage<select name="templateRef">
+								<option value="">Neue Vorlage</option>
+								{#each data.templates as template (template.id)}<option
+										value={`${template.id}|${template.revision}`}>{template.name}</option
+									>{/each}
+							</select></label
+						>
+						<label>Name<input name="templateName" required maxlength="120" /></label>
+						<label>Beschreibung<input name="templateDescription" maxlength="500" /></label>
+						<button class="text-button" type="submit" disabled={actionsBlocked}
+							>Vorlage speichern</button
+						>
+					</form>
+				</details>
 				<form method="POST" action="?/duplicate">
 					<button class="text-button" type="submit" disabled={actionsBlocked}>Duplizieren</button>
 				</form>
@@ -571,6 +746,19 @@
 						disabled={actionsBlocked}>Archivieren</button
 					>
 				</form>
+				<form
+					method="POST"
+					action="?/delete"
+					onsubmit={(event) =>
+						!confirm('Piece löschen? Bestehende Sendungsfassungen bleiben erhalten.') &&
+						event.preventDefault()}
+				>
+					<input type="hidden" name="revision" value={revision} /><button
+						class="text-button danger-text"
+						type="submit"
+						disabled={actionsBlocked}>Piece löschen</button
+					>
+				</form>
 			</div>
 			<div class="piece-dialog-primary-action">
 				<span
@@ -581,10 +769,18 @@
 				>
 				<button
 					bind:this={saveButton}
-					class="primary-button"
+					class:primary-button={saveState === 'dirty' ||
+						saveState === 'error' ||
+						saveState === 'conflict'}
+					class:secondary-button={saveState === 'idle' ||
+						saveState === 'saved' ||
+						saveState === 'saving'}
 					type="submit"
 					form="piece-editor-form"
-					disabled={saving}>Jetzt speichern</button
+					disabled={saving}
+					>{saveState === 'error' || saveState === 'conflict'
+						? 'Erneut speichern'
+						: 'Speichern'}</button
 				>
 			</div>
 		{/snippet}

src/routes/fundus/[id]/praesentation/+page.server.ts

@@ -1,7 +1,7 @@
 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 { getPiece, getTaxonomy } from '#lib/server/content.js';
 import { renderMarkdown } from '#lib/server/markdown.js';
 import { buildEmbedUrl, type PresentationContent } from '#lib/server/presentation.js';
 
@@ -18,7 +18,10 @@ export const load: PageServerLoad = ({ locals, params }) => {
 		images: { id: string; altText: string }[];
 	} = {
 		mode: piece.presentationMode,
-		title: piece.title,
+		topics: getTaxonomy()
+			.topics.filter((topic) => piece.topicIds.includes(topic.id))
+			.map((topic) => topic.name),
+		title: piece.outputTitle || piece.title,
 		html: renderMarkdown(piece.presentationText),
 		source,
 		previewTitle: piece.presentationTitle,
@@ -37,8 +40,10 @@ export const load: PageServerLoad = ({ locals, params }) => {
 			piece.presentationProviderId,
 			source?.timecodeSeconds ?? null
 		),
-		sources: piece.sources,
+		sources: [],
-		images: piece.media.map((item) => ({ id: item.id, altText: item.altText }))
+		images: piece.media
+			.filter((item) => item.id === piece.presentationMediaId)
+			.map((item) => ({ id: item.id, altText: item.altText }))
 	};
 	return { pieceId: piece.id, content };
 };

src/routes/fundus/[id]/praesentation/+page.svelte

@@ -14,8 +14,10 @@
 	<div class="presentation-test-status" role="status">Isolierte Testansicht</div>
 	<PresentationDisplay
 		content={data.content}
-		imageSrc={data.content.mode === 'text'
+		imageSrc={data.content.images.length
+			? data.content.mode === 'text'
 				? '/media'
+				: `/media/${data.content.images[0].id}`
 			: `/fundus/${data.pieceId}/praesentation/preview-image`}
 	/>
 </main>

src/routes/heinzlive/[token]/+page.server.ts

@@ -1,9 +1,10 @@
-import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { getPresentationView } from '#lib/server/live.js';
+import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
 
-export const load: PageServerLoad = ({ params }) => {
+export const load: PageServerLoad = ({ params, cookies }) => {
-	const view = getPresentationView(params.token);
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
-	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
+	const view = presentationChannelAccess(params.token, accessKey)
-	return { view };
+		? getPresentationChannelView(params.token)
+		: null;
+	return { view, channelId: params.token };
 };

src/routes/heinzlive/[token]/+page.svelte

@@ -5,8 +5,10 @@
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
-	let view = $state(untrack(() => data.view));
+	let view = $state(untrack(() => data.view ?? { revision: -1, content: null }));
-	let connection = $state<'connected' | 'waiting' | 'interrupted'>('connected');
+	let connection = $state<'connected' | 'waiting' | 'interrupted'>(
+		untrack(() => (data.view ? 'connected' : 'waiting'))
+	);
 
 	onMount(() => {
 		let stopped = false;
@@ -26,8 +28,22 @@
 			}
 			if (!stopped) timer = setTimeout(refresh, connection === 'interrupted' ? 3000 : 1000);
 		}
-		connection = 'waiting';
+		async function connect() {
-		timer = setTimeout(refresh, 500);
+			const accessKey = decodeURIComponent(location.hash.slice(1));
+			if (accessKey) {
+				const response = await fetch(`/heinzlive/${data.channelId}/access`, {
+					method: 'POST',
+					headers: { 'Content-Type': 'application/json' },
+					body: JSON.stringify({ key: accessKey })
+				});
+				if (!response.ok) {
+					connection = 'interrupted';
+					return;
+				}
+			}
+			timer = setTimeout(refresh, 0);
+		}
+		void connect();
 		return () => {
 			stopped = true;
 			clearTimeout(timer);
@@ -40,7 +56,7 @@
 	<meta name="robots" content="noindex, nofollow, noarchive" />
 </svelte:head>
 
-<main class="heinzlive-output">
+<main class:empty={!view.content} class="heinzlive-output">
 	<div class="output-connection sr-only" class:problem={connection === 'interrupted'} role="status">
 		<span></span>{connection === 'interrupted' ? 'Verbindung unterbrochen' : 'Verbunden'}
 	</div>
@@ -48,16 +64,12 @@
 		{#key view.revision}
 			<PresentationDisplay
 				content={view.content}
-				imageSrc={view.content.mode === 'text'
+				imageSrc={view.content.images.length
+					? view.content.mode === 'text'
 						? `/heinzlive/${page.params.token}/media`
+						: `/heinzlive/${page.params.token}/media/${view.content.images[0].id}`
 					: `/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>

src/routes/heinzlive/[token]/access/+server.ts

@@ -0,0 +1,18 @@
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { presentationChannelAccess } from '#lib/server/live.js';
+
+export const POST: RequestHandler = async ({ params, request, cookies, url }) => {
+	const body = (await request.json().catch(() => null)) as { key?: unknown } | null;
+	const accessKey = typeof body?.key === 'string' ? body.key : '';
+	if (!presentationChannelAccess(params.token, accessKey)) {
+		error(404, 'Präsentationsausgabe nicht gefunden');
+	}
+	cookies.set(`sendewerk-output-${params.token}`, accessKey, {
+		path: `/heinzlive/${params.token}`,
+		httpOnly: true,
+		sameSite: 'strict',
+		secure: url.protocol === 'https:'
+	});
+	return json({ success: true }, { headers: { 'Cache-Control': 'no-store' } });
+};

src/routes/heinzlive/[token]/media/[id]/+server.ts

@@ -1,11 +1,13 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationMedia } from '#lib/server/live.js';
+import { getPresentationMedia, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = async ({ params }) => {
+export const GET: RequestHandler = async ({ params, cookies }) => {
-	const media = await getPresentationMedia(params.token, params.id);
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey)) error(404, 'Bild nicht gefunden');
+	const media = await getPresentationMedia(accessKey, params.id);
 	if (!media) error(404, 'Bild nicht gefunden');
-	return new Response(media.data, {
+	return new Response(new Uint8Array(media.data), {
 		headers: {
 			'Content-Type': media.mimeType,
 			'Content-Length': String(media.byteSize),

src/routes/heinzlive/[token]/preview-image/+server.ts

@@ -1,9 +1,12 @@
 import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationPreviewImage } from '#lib/server/live.js';
+import { getPresentationPreviewImage, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = async ({ params }) => {
+export const GET: RequestHandler = async ({ params, cookies }) => {
-	const image = await getPresentationPreviewImage(params.token);
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey))
+		error(404, 'Vorschaubild nicht verfügbar');
+	const image = await getPresentationPreviewImage(accessKey);
 	if (!image) error(404, 'Vorschaubild nicht verfügbar');
 	return new Response(new Uint8Array(image.data), {
 		headers: {

src/routes/heinzlive/[token]/state/+server.ts

@@ -1,9 +1,12 @@
 import { error, json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
-import { getPresentationView } from '#lib/server/live.js';
+import { getPresentationChannelView, presentationChannelAccess } from '#lib/server/live.js';
 
-export const GET: RequestHandler = ({ params }) => {
+export const GET: RequestHandler = ({ params, cookies }) => {
-	const view = getPresentationView(params.token);
+	const accessKey = cookies.get(`sendewerk-output-${params.token}`) ?? '';
+	if (!presentationChannelAccess(params.token, accessKey))
+		error(404, 'Präsentationsausgabe nicht gefunden');
+	const view = getPresentationChannelView(params.token);
 	if (!view) error(404, 'Präsentationsausgabe nicht gefunden');
 	return json(view, { headers: { 'Cache-Control': 'no-store' } });
 };

src/routes/live/+page.server.ts

@@ -4,12 +4,23 @@ import type { Actions, PageServerLoad } from './$types';
 import { requireUser } from '#lib/server/auth.js';
 import {
 	completeCurrent,
+	clearPresentationChannel,
+	endLive,
 	getLiveView,
 	goBack,
 	issuePresentationAccess,
 	moveOpenUsage,
+	pauseLive,
 	presentUsage,
+	rotatePresentationChannelKey,
+	resetSectionTimer,
+	resetTotalTimer,
+	resumeEndedLive,
+	resumeLive,
+	selectUsage,
+	setShowStatus,
 	skipCurrent,
+	startNewLiveRun,
 	startOrResumeLive
 } from '#lib/server/live.js';
 import { listShows } from '#lib/server/shows.js';
@@ -26,6 +37,8 @@ function actionError(cause: unknown) {
 			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 === 'NOT_STARTED')
+		return { status: 409, error: 'Die Sendung muss vor der Auswahl gestartet werden.' };
 	if (code === 'NO_PREVIOUS') return { status: 409, error: 'Es gibt kein vorheriges Piece.' };
 	if (code === 'LIVE_ORDER_LOCKED')
 		return {
@@ -36,6 +49,13 @@ function actionError(cause: unknown) {
 		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 === 'TIMER_PAUSED') return { status: 409, error: 'Die Sendung ist pausiert.' };
+	if (code === 'ALREADY_PAUSED' || code === 'ALREADY_RUNNING')
+		return { status: 409, error: 'Der Timerzustand wurde bereits geändert.' };
+	if (code === 'NO_SECTION_TIMER')
+		return { status: 409, error: 'Es ist kein Abschnittstimer aktiv.' };
+	if (code === 'NOT_LIVE' || code === 'NOT_ENDED' || code === 'ALREADY_STARTED')
+		return { status: 409, error: 'Die Sendung befindet sich nicht im passenden Zustand.' };
 	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.' };
 }
@@ -70,6 +90,72 @@ export const actions = {
 			startOrResumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
+	pause: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('pause', () =>
+			pauseLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	resume: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('resume', () =>
+			resumeLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	resetSectionTimer: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('resetSectionTimer', () =>
+			resetSectionTimer(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	resetTotalTimer: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('resetTotalTimer', () =>
+			resetTotalTimer(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	setStatus: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		const status = text(data, 'status');
+		if (status !== 'draft' && status !== 'ready') {
+			return fail(400, { intent: 'setStatus', error: 'Der Sendungsstatus ist ungültig.' });
+		}
+		return attempt('setStatus', () =>
+			setShowStatus(
+				text(data, 'showId'),
+				text(data, 'commandId'),
+				Number(data.get('revision')),
+				Number(data.get('showRevision')),
+				status
+			)
+		);
+	},
+	end: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('end', () =>
+			endLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	resumeEnded: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('resumeEnded', () =>
+			resumeEndedLive(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
+	startNewRun: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('startNewRun', () =>
+			startNewLiveRun(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
+		);
+	},
 	complete: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -91,6 +177,18 @@ export const actions = {
 			goBack(text(data, 'showId'), text(data, 'commandId'), Number(data.get('revision')))
 		);
 	},
+	select: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('select', () =>
+			selectUsage(
+				text(data, 'showId'),
+				text(data, 'usageId'),
+				text(data, 'commandId'),
+				Number(data.get('revision'))
+			)
+		);
+	},
 	present: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
@@ -118,10 +216,25 @@ export const actions = {
 		const data = await request.formData();
 		try {
 			const token = issuePresentationAccess(text(data, 'showId'));
-			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/${token}` };
+			return { intent: 'createOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
 		} catch (cause) {
 			const problem = actionError(cause);
 			return fail(problem.status, { intent: 'createOutput', ...problem });
 		}
+	},
+	rotateOutput: async ({ locals, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		try {
+			const token = rotatePresentationChannelKey(text(data, 'showId'));
+			return { intent: 'rotateOutput', success: true, outputUrl: `/heinzlive/default#${token}` };
+		} catch (cause) {
+			const problem = actionError(cause);
+			return fail(problem.status, { intent: 'rotateOutput', ...problem });
+		}
+	},
+	clearOutput: async ({ locals }) => {
+		requireUser(locals.user);
+		return attempt('clearOutput', () => clearPresentationChannel());
 	}
 } satisfies Actions;

src/routes/sendungen/+page.server.ts

@@ -1,6 +1,7 @@
 import { fail, redirect } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
-import { requireUser } from '#lib/server/auth.js';
+import { berlinDateKey, berlinMonthKey, normalizeMonthKey, shiftMonth } from '#lib/calendar.js';
+import { getShowOverviewView, requireUser, setShowOverviewView } from '#lib/server/auth.js';
 import { createShow, listShows, listShowTemplates } from '#lib/server/shows.js';
 
 function berlinLocalToUtc(value: string): string | null {
@@ -34,12 +35,37 @@ function berlinLocalToUtc(value: string): string | null {
 	return new Date(candidate).toISOString();
 }
 
-export const load: PageServerLoad = ({ locals }) => {
+export const load: PageServerLoad = ({ locals, url }) => {
-	requireUser(locals.user);
+	const user = requireUser(locals.user);
-	return { shows: listShows(), templates: listShowTemplates() };
+	const today = new Date();
+	const todayMonth = berlinMonthKey(today);
+	const selectedMonth = normalizeMonthKey(url.searchParams.get('month'), todayMonth);
+	return {
+		shows: listShows(),
+		templates: listShowTemplates(),
+		view: getShowOverviewView(user.id),
+		selectedMonth,
+		previousMonth: shiftMonth(selectedMonth, -1),
+		nextMonth: shiftMonth(selectedMonth, 1),
+		todayMonth,
+		todayDate: berlinDateKey(today)
+	};
 };
 
 export const actions = {
+	setView: async ({ locals, request }) => {
+		const user = requireUser(locals.user);
+		const data = await request.formData();
+		const view = String(data.get('view') || '');
+		const todayMonth = berlinMonthKey(new Date());
+		const month = normalizeMonthKey(String(data.get('month') || ''), todayMonth);
+		try {
+			setShowOverviewView(user.id, view);
+		} catch {
+			return fail(400, { error: 'Die Ansicht konnte nicht gespeichert werden.' });
+		}
+		redirect(303, `/sendungen?month=${encodeURIComponent(month)}`);
+	},
 	create: async ({ locals, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();

src/routes/sendungen/+page.svelte

@@ -1,9 +1,35 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import { berlinDateKey, buildCalendarDays, formatMonthLabel } from '#lib/calendar.js';
 	import { formatDuration } from '#lib/format.js';
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import type { PageProps } from './$types';
 
 	let { data, form }: PageProps = $props();
+	let scheduledShows = $derived(data.shows.filter((show) => show.startsAtUtc !== null));
+	let undatedShows = $derived(data.shows.filter((show) => show.startsAtUtc === null));
+	let calendarDays = $derived(buildCalendarDays(data.selectedMonth, data.todayDate));
+	let showsByDate = $derived.by(() => {
+		const grouped: Record<string, (typeof data.shows)[number][]> = {};
+		for (const show of scheduledShows) {
+			const key = berlinDateKey(show.startsAtUtc!);
+			const shows = grouped[key] ?? [];
+			shows.push(show);
+			grouped[key] = shows;
+		}
+		for (const shows of Object.values(grouped)) {
+			shows.sort((left, right) => left.startsAtUtc!.localeCompare(right.startsAtUtc!));
+		}
+		return grouped;
+	});
+	let agendaDays = $derived(
+		calendarDays.filter((day) => day.inSelectedMonth && (showsByDate[day.date]?.length ?? 0) > 0)
+	);
+	const timeFormatter = new Intl.DateTimeFormat('de-DE', {
+		timeZone: 'Europe/Berlin',
+		hour: '2-digit',
+		minute: '2-digit'
+	});
 
 	function berlinDate(value: string | null) {
 		if (!value) return 'Termin offen';
@@ -13,22 +39,52 @@
 			timeStyle: 'short'
 		}).format(new Date(value));
 	}
+
+	function berlinTime(value: string) {
+		return timeFormatter.format(new Date(value));
+	}
+
+	function agendaDate(value: string) {
+		return new Intl.DateTimeFormat('de-DE', {
+			timeZone: 'UTC',
+			weekday: 'long',
+			day: '2-digit',
+			month: 'long'
+		}).format(new Date(`${value}T12:00:00Z`));
+	}
+
+	function statusLabel(status: string) {
+		if (status === 'ready') return 'Bereit';
+		if (status === 'draft') return 'Entwurf';
+		if (status === 'live') return 'Live';
+		return 'Abgeschlossen';
+	}
 </script>
 
 <svelte:head><title>Sendungen | Sendewerk</title></svelte:head>
 
 <div class="page-wrap shows-page">
-	<header class="page-heading">
+	<header class="page-heading shows-heading">
 		<div>
 			<h1>Sendungen</h1>
 			<p class="page-intro">Streams aus Fundus-Pieces und freien Abschnitten zusammenstellen.</p>
 		</div>
+		<form method="POST" action="?/setView" class="show-view-toggle" aria-label="Darstellung">
+			<input type="hidden" name="month" value={data.selectedMonth} />
+			<button type="submit" name="view" value="list" aria-pressed={data.view === 'list'}>
+				<AppIcon name="list" /> Liste
+			</button>
+			<button type="submit" name="view" value="calendar" aria-pressed={data.view === 'calendar'}>
+				<AppIcon name="calendar" /> Kalender
+			</button>
+		</form>
 	</header>
 
 	{#if form?.error}<div class="form-message error" role="alert">{form.error}</div>{/if}
 
-	<section class="show-create-panel">
+	<details class="show-create-panel">
-		<div>
+		<summary><AppIcon name="plus" /> Neue Sendung planen</summary>
+		<div class="show-create-heading">
 			<p class="eyebrow">Neuen Stream planen</p>
 			<h2>Leer starten oder Ablauf übernehmen</h2>
 		</div>
@@ -45,60 +101,155 @@
 			<label
 				>Termin<input name="startsAt" type="datetime-local" value={form?.startsAt ?? ''} /></label
 			>
+			<fieldset class="show-template-grid">
+				<legend>Ausgangspunkt</legend>
 				<label
-				>Ausgangspunkt<select name="templateId" value={form?.templateId ?? ''}
+					><input type="radio" name="templateId" value="" checked={!form?.templateId} /><AppIcon
-					><option value="">Leer starten</option
+						name="newspaper"
-					>{#each data.templates as template (template.id)}<option value={template.id}
+					/><span
-							>{template.name}</option
+						><strong>Leer starten</strong><small>Eine leere Sendung frei aufbauen.</small></span
-						>{/each}</select
 					></label
 				>
+				{#each data.templates as template (template.id)}<label
+						><input
+							type="radio"
+							name="templateId"
+							value={template.id}
+							checked={form?.templateId === template.id}
+						/><AppIcon name="list-check" /><span
+							><strong>{template.name}</strong><small>{template.description}</small></span
+						></label
+					>{/each}
+			</fieldset>
 			<button class="primary-button" type="submit">Sendung anlegen</button>
 		</form>
-		<div class="template-notes">
+	</details>
-			{#each data.templates as template (template.id)}<p>
-					<strong>{template.name}:</strong>
-					{template.description}
-				</p>{/each}
-		</div>
-	</section>
 
 	<section class="show-library" aria-labelledby="show-library-title">
 		<header>
-			<h2 id="show-library-title">Geplante Sendungen</h2>
+			<h2 id="show-library-title">{data.view === 'list' ? 'Geplante Sendungen' : 'Kalender'}</h2>
 			<span>{data.shows.length}</span>
 		</header>
-		{#if data.shows.length}
+
-			<div class="show-card-list">
+		{#if data.view === 'list'}
-				{#each data.shows as show (show.id)}
+			{#if scheduledShows.length}<div class="show-card-list">
-					<a class="show-card" href={resolve('/sendungen/[id]', { id: show.id })}>
+					{#each scheduledShows as show (show.id)}<a
-						<div>
+							class="show-card"
-							<span class={`show-state ${show.status}`}
+							href={resolve('/sendungen/[id]', { id: show.id })}
-								>{show.status === 'ready'
-									? 'Bereit'
-									: show.status === 'draft'
-										? 'Entwurf'
-										: show.status === 'live'
-											? 'Live'
-											: 'Abgeschlossen'}</span
 						>
+							<div>
+								<span class={`show-state ${show.status}`}>{statusLabel(show.status)}</span>
 								<h3>{show.title}</h3>
 								<p>{berlinDate(show.startsAtUtc)} Uhr</p>
 							</div>
 							<div class="show-card-facts">
-							<span><strong>{show.sectionCount}</strong> Abschnitte</span><span
+								{#if show.sectionCount}<span><strong>{show.sectionCount}</strong> Abschnitte</span
+									>{/if}{#if show.totalDurationSeconds}<span
 										><strong>{formatDuration(show.totalDurationSeconds)}</strong> Planzeit</span
-							><b aria-hidden="true">→</b>
+									>{/if}<b aria-hidden="true"><AppIcon name="arrow-right" /></b>
-						</div>
-					</a>
-				{/each}
 							</div>
+						</a>{/each}
+				</div>{:else}<div class="empty-state compact">
+					<h2>Keine terminierten Sendungen</h2>
+					<p>Sendungen ohne Termin bleiben unten erreichbar.</p>
+				</div>{/if}
 		{:else}
-			<div class="empty-state">
+			<div class="show-month-toolbar">
-				<span aria-hidden="true">＋</span>
+				<div>
-				<h2>Noch keine Sendung</h2>
+					<p class="eyebrow">Monatsansicht</p>
-				<p>Oben kann der erste Stream geplant werden.</p>
+					<h3>{formatMonthLabel(data.selectedMonth)}</h3>
+				</div>
+				<!-- Query-only navigation stays on the resolved Sendungen route. -->
+				<!-- eslint-disable svelte/no-navigation-without-resolve -->
+				<nav aria-label="Kalendermonat" class="show-month-navigation">
+					<a
+						href={`${resolve('/sendungen')}?month=${encodeURIComponent(data.previousMonth)}`}
+						aria-label="Vorheriger Monat"><AppIcon name="chevron-left" /></a
+					>
+					<a href={`${resolve('/sendungen')}?month=${encodeURIComponent(data.todayMonth)}`}>Heute</a
+					>
+					<a
+						href={`${resolve('/sendungen')}?month=${encodeURIComponent(data.nextMonth)}`}
+						aria-label="Nächster Monat"><AppIcon name="chevron-right" /></a
+					>
+				</nav>
+				<!-- eslint-enable svelte/no-navigation-without-resolve -->
+			</div>
+
+			<div class="show-calendar" aria-label={formatMonthLabel(data.selectedMonth)}>
+				<div class="show-calendar-weekdays" aria-hidden="true">
+					{#each ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] as weekday (weekday)}<span
+							>{weekday}</span
+						>{/each}
+				</div>
+				<div class="show-calendar-grid">
+					{#each calendarDays as day (day.date)}<section
+							class:outside={!day.inSelectedMonth}
+							class:today={day.isToday}
+							class="show-calendar-day"
+							aria-label={day.date}
+						>
+							<strong>{day.dayNumber}</strong>
+							{#if day.inSelectedMonth}<div class="show-calendar-events">
+									{#each showsByDate[day.date] ?? [] as show (show.id)}<a
+											href={resolve('/sendungen/[id]', { id: show.id })}
+											class={`show-calendar-event ${show.status}`}
+										>
+											<time>{berlinTime(show.startsAtUtc!)}</time>
+											<span>{show.title}</span>
+											<small>{statusLabel(show.status)}</small>
+										</a>{/each}
+								</div>{/if}
+						</section>{/each}
+				</div>
+			</div>
+
+			<div class="show-agenda" aria-label={`Termine ${formatMonthLabel(data.selectedMonth)}`}>
+				{#if agendaDays.length}{#each agendaDays as day (day.date)}<section
+							class:today={day.isToday}
+							class="show-agenda-day"
+						>
+							<h3>{agendaDate(day.date)}</h3>
+							<div>
+								{#each showsByDate[day.date] ?? [] as show (show.id)}<a
+										class="show-agenda-event"
+										href={resolve('/sendungen/[id]', { id: show.id })}
+									>
+										<time>{berlinTime(show.startsAtUtc!)}</time>
+										<span
+											><strong>{show.title}</strong><small>{statusLabel(show.status)}</small></span
+										>
+									</a>{/each}
+							</div>
+						</section>{/each}{:else}<div class="empty-state compact">
+						<h2>Keine Termine in diesem Monat</h2>
+					</div>{/if}
 			</div>
 		{/if}
 	</section>
+
+	{#if undatedShows.length}<section
+			class="show-library show-undated"
+			aria-labelledby="undated-title"
+		>
+			<header>
+				<h2 id="undated-title">Ohne Termin</h2>
+				<span>{undatedShows.length}</span>
+			</header>
+			<div class="show-card-list">
+				{#each undatedShows as show (show.id)}<a
+						class="show-card"
+						href={resolve('/sendungen/[id]', { id: show.id })}
+					>
+						<div>
+							<span class={`show-state ${show.status}`}>{statusLabel(show.status)}</span>
+							<h3>{show.title}</h3>
+							<p>Termin offen</p>
+						</div>
+						<div class="show-card-facts">
+							<b aria-hidden="true"><AppIcon name="arrow-right" /></b>
+						</div>
+					</a>{/each}
+			</div>
+		</section>{/if}
 </div>

src/routes/sendungen/[id]/+page.server.ts

@@ -1,10 +1,12 @@
+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 { getTaxonomy, listPieces } from '#lib/server/content.js';
+import { getTaxonomy, listPieces, listPieceTemplates } from '#lib/server/content.js';
 import {
 	addPieceUsage,
 	addShowSection,
+	createAndAddPieceUsage,
 	duplicatePieceUsage,
 	getShow,
 	getPieceUsageContexts,
@@ -90,6 +92,16 @@ function actionError(cause: unknown) {
 	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 (
+		['USAGE_IS_CURRENT', 'USAGE_IS_PRESENTED', 'USAGE_HAS_LIVE_RUNS', 'USAGE_NOT_OPEN'].includes(
+			code
+		)
+	)
+		return {
+			status: 409,
+			error:
+				'Diese Sendungsfassung war bereits live aktiv oder wird gerade verwendet und kann nicht entfernt werden.'
+		};
 	if (code === 'INVALID_DURATION')
 		return { status: 400, error: 'Piece-Dauern müssen zwischen 0 und 1.440 Minuten liegen.' };
 	if (code.startsWith('INVALID_'))
@@ -123,6 +135,8 @@ export const load: PageServerLoad = ({ locals, params, url }) => {
 		startsAtLocal: berlinInput(show.startsAtUtc),
 		pieces: pieces.map((piece) => ({ ...piece, ...usageContexts[piece.id] })),
 		taxonomy: getTaxonomy(),
+		pieceTemplates: listPieceTemplates(),
+		createCommandId: randomUUID(),
 		filters: {
 			query: url.searchParams.get('q') ?? '',
 			categoryId: url.searchParams.get('category') ?? '',
@@ -197,17 +211,33 @@ export const actions = {
 			})
 		);
 	},
+	createUsage: async ({ locals, params, request }) => {
+		requireUser(locals.user);
+		const data = await request.formData();
+		return attempt('createUsage', () =>
+			createAndAddPieceUsage(params.id, Number(data.get('revision')), text(data, 'commandId'), {
+				title: text(data, 'title'),
+				templateId: text(data, 'templateId') || 'blank',
+				sectionId: text(data, 'sectionId') || null
+			})
+		);
+	},
 	updateUsage: async ({ locals, params, request }) => {
 		requireUser(locals.user);
 		const data = await request.formData();
+		const toolIds = data.getAll('usageToolId').map(String);
+		const toolWorkUrls = data.getAll('toolWorkUrl').map(String);
+		const toolNotes = data.getAll('toolNote').map(String);
 		return attempt('updateUsage', () =>
 			updatePieceUsage(params.id, text(data, 'usageId'), Number(data.get('revision')), {
 				title: text(data, 'title'),
+				outputTitle: text(data, 'outputTitle'),
 				durationSeconds: pieceDurationInSeconds(data),
 				ownNotes: text(data, 'ownNotes'),
 				intro: text(data, 'intro'),
 				research: text(data, 'research'),
 				moderation: text(data, 'moderation'),
+				interaction: text(data, 'interaction'),
 				transition: text(data, 'transition'),
 				presentation: text(data, 'presentation'),
 				presentationMode: text(data, 'presentationMode') as PieceUsageUpdate['presentationMode'],
@@ -219,7 +249,13 @@ export const actions = {
 				presentationTitle: text(data, 'presentationTitle'),
 				presentationDescription: text(data, 'presentationDescription'),
 				presentationImageUrl: text(data, 'presentationImageUrl'),
-				presentationSiteName: text(data, 'presentationSiteName')
+				presentationSiteName: text(data, 'presentationSiteName'),
+				presentationMediaId: text(data, 'presentationMediaId') || null,
+				tools: toolIds.map((id, index) => ({
+					id,
+					workUrl: toolWorkUrls[index] ?? '',
+					note: toolNotes[index] ?? ''
+				}))
 			})
 		);
 	},

src/routes/sendungen/[id]/+page.svelte

@@ -6,6 +6,7 @@
 	import { flip } from 'svelte/animate';
 	import { onMount, untrack } from 'svelte';
 	import PieceUsageHistory from '#lib/components/PieceUsageHistory.svelte';
+	import AppIcon from '#lib/components/AppIcon.svelte';
 	import UsageEditorDialog from '#lib/components/UsageEditorDialog.svelte';
 	import { formatClock, formatDuration } from '#lib/format.js';
 	import type { PageProps } from './$types';
@@ -22,9 +23,11 @@
 	let moveSectionForm: HTMLFormElement;
 	let moveUsageForm: HTMLFormElement;
 	let addUsageForm: HTMLFormElement;
+	let removeUsageForm: HTMLFormElement;
 	let draggedSectionId = $state('');
 	let draggedUsageId = $state('');
 	let draggedPieceId = $state('');
+	let removedUsageId = $state('');
 	let dropSectionId = $state('');
 	let dropPosition = $state(0);
 	let copyMessage = $state('');
@@ -33,7 +36,7 @@
 	let visiblePieces = $derived(
 		data.pieces.filter(
 			(piece) =>
-				(showUsedPieces || piece.sentHistory.length === 0) &&
+				(showUsedPieces || piece.sentHistory.length === 0 || piece.isFavorite) &&
 				(showPlannedPieces || !piece.isPlannedInCurrentShow)
 		)
 	);
@@ -165,6 +168,17 @@
 		setTimeout(() => moveUsageForm.requestSubmit());
 	}
 
+	function removeDraggedUsage() {
+		if (dragged?.kind !== 'usage') return;
+		if (!confirm('Piece aus dieser Sendung entfernen?')) {
+			finishDrag();
+			return;
+		}
+		removedUsageId = dragged.id;
+		finishDrag();
+		setTimeout(() => removeUsageForm.requestSubmit());
+	}
+
 	const enhanceCommand: SubmitFunction = ({ formElement, submitter }) => {
 		const affected = formElement.closest<HTMLElement>(
 			'.run-section, .editable-reserve, .builder-source-card, .show-settings, .add-section-form'
@@ -194,7 +208,7 @@
 <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>
+			<a class="back-link" href={resolve('/sendungen')}><AppIcon name="arrow-left" /> Sendungen</a>
 			<h1>{data.show.title}</h1>
 			<p class="show-date">
 				{data.show.startsAtUtc ? `${berlinDate(data.show.startsAtUtc)} Uhr` : 'Termin offen'}
@@ -206,7 +220,7 @@
 				<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
+				>Live-Steuerung <AppIcon name="display" /></a
 			>
 		</div>
 	</header>
@@ -287,8 +301,18 @@
 	<div class="builder-workspace">
 		<section
 			class="builder-pane source-pane"
+			class:drop-ready={dropTarget === 'source'}
 			class:mobile-hidden={mobilePane !== 'fundus'}
 			aria-labelledby="source-title"
+			ondragover={(event) => {
+				if (dragged?.kind !== 'usage') return;
+				event.preventDefault();
+				dropTarget = 'source';
+			}}
+			ondrop={(event) => {
+				event.preventDefault();
+				removeDraggedUsage();
+			}}
 		>
 			<header class="pane-heading">
 				<div>
@@ -297,6 +321,33 @@
 				</div>
 				<span>{visiblePieces.length}</span>
 			</header>
+			{#if dropTarget === 'source'}<div class="drag-remove-target">
+					<strong>Aus Sendung entfernen</strong><span>Das Fundus-Original bleibt erhalten.</span>
+				</div>{/if}
+			<details class="plan-piece-create">
+				<summary>Neues Piece direkt einplanen</summary>
+				<form use:enhance={enhanceCommand} method="POST" action="?/createUsage">
+					<input type="hidden" name="revision" value={data.show.revision} />
+					<input type="hidden" name="commandId" value={data.createCommandId} />
+					<label>Titel<input name="title" required maxlength="200" /></label>
+					<label
+						>Vorlage<select name="templateId">
+							{#each data.pieceTemplates as template (template.id)}<option value={template.id}
+									>{template.name}</option
+								>{/each}
+						</select></label
+					>
+					<label
+						>Ziel<select name="sectionId">
+							<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">Anlegen und einplanen</button>
+				</form>
+			</details>
 			<form id="builder-filters" method="GET" class="builder-filter">
 				<label
 					><span class="sr-only">Fundus durchsuchen</span><input
@@ -361,7 +412,11 @@
 									><i></i>{piece.categories.map((item) => item.name).join(', ') || 'Offen'}</span
 								><span>{formatClock(piece.durationSeconds)}</span>
 							</div>
-							<h3>{piece.title}</h3>
+							<h3>
+								{#if piece.isFavorite}<span class="favorite-mark" aria-label="Favorit"
+										><AppIcon name="star" /></span
+									>{/if}{piece.title}
+							</h3>
 							<p>
 								{piece.format} · {piece.topics.map((item) => item.name).join(', ') || 'Ohne Thema'}
 							</p>
@@ -396,7 +451,7 @@
 				{/each}
 			</div>
 			{#if !visiblePieces.length}<div class="empty-state">
-					<span aria-hidden="true">⌕</span>
+					<span aria-hidden="true"><AppIcon name="magnifying-glass" /></span>
 					<h2>Keine verfügbaren Pieces</h2>
 					<p>
 						Suchfilter ändern, ausgeblendete Inhalte einblenden oder Pieces im Fundus sendefertig
@@ -472,7 +527,7 @@
 									/><input type="hidden" name="position" value={index - 1} /><button
 										type="submit"
 										disabled={index === 0}
-										aria-label={`${section.name} nach oben`}>↑</button
+										aria-label={`${section.name} nach oben`}><AppIcon name="arrow-up" /></button
 									>
 								</form>
 								<form use:enhance={enhanceCommand} method="POST" action="?/moveSection">
@@ -483,7 +538,7 @@
 									/><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
+										aria-label={`${section.name} nach unten`}><AppIcon name="arrow-down" /></button
 									>
 								</form>
 							</div>
@@ -533,7 +588,7 @@
 													ondragend={finishDrag}
 												>
 													<strong>{usage.title}</strong><small
-														>{formatClock(usage.durationSeconds)} · sendungsspezifische Kopie</small
+														>{formatClock(usage.durationSeconds)}</small
 													>
 												</div>
 												<div class="row-actions">
@@ -549,7 +604,8 @@
 														/><button
 															type="submit"
 															disabled={usageIndex === 0}
-															aria-label={`${usage.title} nach oben`}>↑</button
+															aria-label={`${usage.title} nach oben`}
+															><AppIcon name="arrow-up" /></button
 														>
 													</form>
 													<form use:enhance={enhanceCommand} method="POST" action="?/moveUsage">
@@ -564,7 +620,8 @@
 														/><button
 															type="submit"
 															disabled={usageIndex === section.usages.length - 1}
-															aria-label={`${usage.title} nach unten`}>↓</button
+															aria-label={`${usage.title} nach unten`}
+															><AppIcon name="arrow-down" /></button
 														>
 													</form>
 													<UsageEditorDialog
@@ -770,7 +827,13 @@
 									></label
 								><button class="secondary-button" type="submit">Einplanen</button>
 							</form>
-							<form use:enhance={enhanceCommand} method="POST" action="?/removeUsage">
+							<form
+								use:enhance={enhanceCommand}
+								method="POST"
+								action="?/removeUsage"
+								onsubmit={(event) =>
+									!confirm('Piece aus dieser Sendung entfernen?') && event.preventDefault()}
+							>
 								<input type="hidden" name="revision" value={data.show.revision} /><input
 									type="hidden"
 									name="usageId"
@@ -778,7 +841,7 @@
 								/><button
 									class="text-button danger-text"
 									type="submit"
-									aria-label={`${usage.title} aus Reserve entfernen`}>Entfernen</button
+									aria-label={`${usage.title} aus Sendung entfernen`}>Aus Sendung entfernen</button
 								>
 							</form>
 							<UsageEditorDialog
@@ -847,4 +910,14 @@
 			value={draggedPieceId}
 		/><input type="hidden" name="sectionId" value={dropSectionId} />
 	</form>
+	<form
+		bind:this={removeUsageForm}
+		use:enhance={enhanceCommand}
+		method="POST"
+		action="?/removeUsage"
+		class="hidden-command-form"
+	>
+		<input type="hidden" name="revision" value={data.show.revision} />
+		<input type="hidden" name="usageId" value={removedUsageId} />
+	</form>
 </div>

src/routes/verwaltung/+page.server.ts

@@ -4,9 +4,11 @@ import {
 	createTaxonomy,
 	deleteTaxonomy,
 	getTaxonomy,
+	updateTaxonomy,
 	type TaxonomyKind
 } from '#lib/server/content.js';
 import { getMailConfig } from '#lib/server/config.js';
+import { createTool, listTools, updateTool, type ToolInput } from '#lib/server/tools.js';
 import {
 	inviteUser,
 	isRole,
@@ -25,6 +27,7 @@ export const load: PageServerLoad = ({ locals }) => {
 		taxonomy: getTaxonomy(),
 		users: listUsers(),
 		invitations: listOpenInvitations(),
+		tools: listTools(true),
 		mailTransport: getMailConfig().transport
 	};
 };
@@ -40,9 +43,27 @@ function actionError(cause: unknown): string {
 		return 'Verwendete oder für Vorlagen benötigte Einträge können nicht entfernt werden.';
 	if (code === 'INVALID_COLOR') return 'Bitte eine gültige Farbe wählen.';
 	if (code === 'INVALID_TAXONOMY') return 'Bitte einen gültigen Namen eingeben.';
+	if (code === 'INVALID_ICON') return 'Bitte ein Icon aus der angebotenen Auswahl verwenden.';
+	if (code === 'TOOL_EXISTS') return 'Ein Werkzeug mit diesem Namen existiert bereits.';
+	if (code === 'INVALID_TOOL_URL')
+		return 'Die Start-URL muss eine vollständige HTTP- oder HTTPS-Adresse sein.';
+	if (code === 'INVALID_TOOL_FORMAT')
+		return 'Mindestens ein gewähltes Format existiert nicht mehr.';
+	if (code === 'INVALID_TOOL') return 'Bitte die Werkzeugdaten prüfen.';
 	return 'Die Aktion konnte nicht ausgeführt werden.';
 }
 
+function toolInput(data: FormData): ToolInput {
+	return {
+		name: String(data.get('name') || ''),
+		startUrl: String(data.get('startUrl') || ''),
+		description: String(data.get('description') || ''),
+		iconName: String(data.get('iconName') || ''),
+		isActive: data.get('isActive') === '1',
+		formatIds: data.getAll('formatIds').map(String)
+	};
+}
+
 export const actions = {
 	invite: async ({ locals, request }) => {
 		const actor = requireBarkeeper(locals.user);
@@ -112,12 +133,36 @@ export const actions = {
 			return fail(400, { intent: 'taxonomy', error: 'Ungültige Taxonomieart.' });
 		}
 		try {
-			createTaxonomy(kind, String(data.get('name') || ''), String(data.get('color') || ''));
+			createTaxonomy(
+				kind,
+				String(data.get('name') || ''),
+				String(data.get('color') || ''),
+				String(data.get('iconName') || '')
+			);
 			return { intent: 'taxonomy', success: 'Eintrag angelegt.' };
 		} catch (cause) {
 			return fail(400, { intent: 'taxonomy', error: actionError(cause) });
 		}
 	},
+	updateTaxonomy: async ({ locals, request }) => {
+		requireBarkeeper(locals.user);
+		const data = await request.formData();
+		const kind = String(data.get('kind') || '') as TaxonomyKind;
+		if (!['category', 'format', 'topic'].includes(kind)) {
+			return fail(400, { intent: 'taxonomy', error: 'Ungültige Taxonomieart.' });
+		}
+		try {
+			updateTaxonomy(
+				kind,
+				String(data.get('taxonomyId') || ''),
+				String(data.get('name') || ''),
+				String(data.get('iconName') || '')
+			);
+			return { intent: 'taxonomy', success: 'Eintrag aktualisiert.' };
+		} catch (cause) {
+			return fail(400, { intent: 'taxonomy', error: actionError(cause) });
+		}
+	},
 	deleteTaxonomy: async ({ locals, request }) => {
 		requireBarkeeper(locals.user);
 		const data = await request.formData();
@@ -131,5 +176,25 @@ export const actions = {
 		} catch (cause) {
 			return fail(400, { intent: 'taxonomy', error: actionError(cause) });
 		}
+	},
+	createTool: async ({ locals, request }) => {
+		requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			createTool(toolInput(data));
+			return { intent: 'tool', success: 'Werkzeug angelegt.' };
+		} catch (cause) {
+			return fail(400, { intent: 'tool', error: actionError(cause) });
+		}
+	},
+	updateTool: async ({ locals, request }) => {
+		requireBarkeeper(locals.user);
+		const data = await request.formData();
+		try {
+			updateTool(String(data.get('toolId') || ''), toolInput(data));
+			return { intent: 'tool', success: 'Werkzeug aktualisiert.' };
+		} catch (cause) {
+			return fail(400, { intent: 'tool', error: actionError(cause) });
+		}
 	}
 } satisfies Actions;

src/routes/verwaltung/+page.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
+	import AppIcon from '#lib/components/AppIcon.svelte';
+	import IconPicker from '#lib/components/IconPicker.svelte';
+	import ToolEditorDialog from '#lib/components/ToolEditorDialog.svelte';
 	import type { PageProps } from './$types';
 	let { data, form }: PageProps = $props();
+	let toolDialog: { showModal: (tool?: (typeof data.tools)[number] | null) => void };
 
 	function confirmTaxonomyRemoval(event: SubmitEvent) {
 		if (!confirm('Eintrag wirklich entfernen?')) event.preventDefault();
@@ -12,7 +16,7 @@
 <div class="page-wrap narrow-page">
 	<header class="page-heading">
 		<h1>Verwaltung</h1>
-		<p class="page-intro">Konten, Rollen und bestehende Taxonomie verwalten.</p>
+		<p class="page-intro">Konten, Werkzeuge und bestehende Taxonomie verwalten.</p>
 	</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}
@@ -113,6 +117,46 @@
 		</section>
 	</div>
 
+	<h2 class="section-heading">Werkzeuge</h2>
+	<section class="quiet-panel tool-management">
+		<div class="panel-heading">
+			<div>
+				<p class="eyebrow">Redaktionelle Hilfsmittel</p>
+				<h2>Werkzeugkatalog</h2>
+			</div>
+			<button class="compact-add-button" type="button" onclick={() => toolDialog.showModal()}>
+				<AppIcon name="plus" /> Werkzeug hinzufügen
+			</button>
+		</div>
+		<p class="catalog-note">
+			Deaktivierte Werkzeuge bleiben in bestehenden Pieces und Sendungen erhalten.
+		</p>
+		<div class="catalog-settings-list tool-settings-list">
+			{#each data.tools as tool (tool.id)}
+				<button
+					type="button"
+					class:inactive={!tool.isActive}
+					aria-label={`${tool.name} bearbeiten`}
+					onclick={() => toolDialog.showModal(tool)}
+				>
+					<span class="catalog-entry-icon"><AppIcon name={tool.iconName || 'wrench'} /></span>
+					<span class="catalog-entry-copy">
+						<strong>{tool.name}</strong>
+						<small
+							>{tool.isActive ? 'Aktiv' : 'Deaktiviert'}{#if tool.formatIds.length}
+								· {data.taxonomy.formats
+									.filter((format) => tool.formatIds.includes(format.id))
+									.map((format) => format.name)
+									.join(', ')}{/if}</small
+						>
+					</span>
+					<AppIcon name="pen" />
+				</button>
+			{/each}
+		</div>
+	</section>
+	<ToolEditorDialog bind:this={toolDialog} formats={data.taxonomy.formats} />
+
 	<h2 class="section-heading">Taxonomie</h2>
 	<div class="settings-grid">
 		<section class="quiet-panel taxonomy-panel">
@@ -126,7 +170,9 @@
 								type="hidden"
 								name="taxonomyId"
 								value={category.id}
-							/><button type="submit" aria-label={`${category.name} entfernen`}>×</button>
+							/><button type="submit" aria-label={`${category.name} entfernen`}
+								><AppIcon name="trash" /></button
+							>
 						</form></span
 					>{/each}
 			</div>
@@ -158,7 +204,9 @@
 								type="hidden"
 								name="taxonomyId"
 								value={format.id}
-							/><button type="submit" aria-label={`${format.name} entfernen`}>×</button>
+							/><button type="submit" aria-label={`${format.name} entfernen`}
+								><AppIcon name="trash" /></button
+							>
 						</form></span
 					>{/each}
 			</div>
@@ -173,20 +221,31 @@
 				><button class="text-button" type="submit">Hinzufügen</button>
 			</form>
 		</section>
-		<section class="quiet-panel taxonomy-panel">
+		<section class="quiet-panel taxonomy-panel topic-management-panel">
 			<p class="eyebrow">Themen</p>
 			<h2>Inhaltliche Zuordnung</h2>
-			<div class="taxonomy-list editable-taxonomy">
+			<div class="topic-settings-list">
-				{#each data.taxonomy.topics as topic (topic.id)}<span
+				{#each data.taxonomy.topics as topic (topic.id)}
-						>{topic.name}
+					<details>
+						<summary
+							><AppIcon name={topic.iconName || 'circle'} /><strong>{topic.name}</strong><AppIcon
+								name="pen"
+							/></summary
+						>
+						<form class="topic-edit-form" method="POST" action="?/updateTaxonomy">
+							<input type="hidden" name="kind" value="topic" />
+							<input type="hidden" name="taxonomyId" value={topic.id} />
+							<label>Name<input name="name" required maxlength="80" value={topic.name} /></label>
+							<IconPicker name={topic.iconName} />
+							<button class="secondary-button" type="submit">Änderungen speichern</button>
+						</form>
 						<form method="POST" action="?/deleteTaxonomy" onsubmit={confirmTaxonomyRemoval}>
-							<input type="hidden" name="kind" value="topic" /><input
+							<input type="hidden" name="kind" value="topic" />
-								type="hidden"
+							<input type="hidden" name="taxonomyId" value={topic.id} />
-								name="taxonomyId"
+							<button class="text-button danger-text" type="submit">Thema löschen</button>
-								value={topic.id}
+						</form>
-							/><button type="submit" aria-label={`${topic.name} entfernen`}>×</button>
+					</details>
-						</form></span
+				{/each}
-					>{/each}
 			</div>
 			<form class="taxonomy-form" method="POST" action="?/createTaxonomy">
 				<input type="hidden" name="kind" value="topic" /><label
@@ -196,7 +255,7 @@
 						maxlength="80"
 						placeholder="Neues Thema"
 					/></label
-				><button class="text-button" type="submit">Hinzufügen</button>
+				><IconPicker name="" /><button class="text-button" type="submit">Hinzufügen</button>
 			</form>
 		</section>
 	</div>