Release 1.37.0

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

VERSION

@@ -1 +1 @@
-1.36.1
+1.37.0

config/services.yaml

@@ -48,6 +48,9 @@ services:
     App\Content\DocumentLibrary:
         arguments:
             $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
+    App\Content\VideoLibrary:
+        arguments:
+            $directory: '%env(projectdir:MEDIA_DIRECTORY)%'
     # Die Schriften liegen im oeffentlichen Ordner: sie sollen vom Webserver direkt ausgeliefert
     # werden, ohne PHP dazwischen - das ist der Punkt der Uebung.
     # Die Stellen, die wissen muessen, wie die Verwaltung heisst.

docs/ARCHITECTURE.md

@@ -1,6 +1,24 @@
 # Architekturentscheidungen
 
-Stand: 14.10.2026. Arbeitstitel KantSites; Produktname offen.
+Stand: 27.10.2026. Arbeitstitel KantSites; Produktname offen.
+
+## ADR 125 – Videos: eigene Bibliothek, Baustein und Sektionshintergrund (Dokumentschema v28, 04.11.2026)
+
+**Kontext:** Der Hero von kant-it.de soll ein Video im Hintergrund bekommen. Die Mediathek nahm nur Bilder und PDFs, die Alpaka-Videos von Hüfner und die Drews-Videos blieben deshalb draußen. Ein `<video>` in „Eigenes HTML“ ginge, verlangt aber Dateien von Hand auf dem Server und kann weder Bewegung reduzieren noch ein Anhalten anbieten.
+
+**Entscheidung:** Eigene Tabelle `video` und `VideoLibrary` nach dem Vorbild der Dokumente, Dateien als `<id>.mp4`/`<id>.webm` im Medienordner, bis 64 MB, Typ nach den ersten Bytes (MOV abgewiesen). Ausgeliefert unter `/media/<id>.<endung>` mit Range-Anfragen und `default-src 'none'`. Im Dokument stehen Adressen, nicht Kennungen: Baustein `video` (`src`, `srcWebm`, `poster`, `title`, `mode`: `player`/`loop`) und an der Sektion `props.backgroundVideo`/`backgroundVideoWebm`. Der Validator lässt nur Adressen der eigenen Mediathek zu; fremde Videos bleiben Sache von „Externer Inhalt“ mit Einwilligung.
+
+Schleifen stehen ohne `autoplay` im HTML, mit `preload="none"`. `video.js` startet sie, solange sie zu sehen sind, und zeigt den Knopf zum Anhalten (WCAG 2.2.2). Bei „Bewegung reduzieren“ oder Datensparen bleibt das Standbild, starten lässt es sich von Hand. Das Skript kommt nur auf Seiten mit Schleife; ein Spieler lässt `script-src 'none'` stehen.
+
+**Folgen:** Kein Umrechnen auf dem Server: Wer zu große Dateien hochlädt, bekommt zu große Dateien, deshalb der Hinweis im Dialog. Die PHP-Grenzen `upload_max_filesize` und `post_max_size` des Hostings gelten zusätzlich. Die Überlagerung einer Sektion ist Teil ihres CSS-Hintergrunds und liegt damit unter dem Video. Website-Pakete von vor v28 bleiben importierbar, die Tabelle gilt dort als leer.
+
+## ADR 124 – KantTresor meldet sich in der Zentrale, ohne Update aus der Ferne (27.10.2026)
+
+**Kontext:** Umut will in der Zentrale neben den KantSites-Installationen auch die KantTresor-Instanzen sehen (eigener Reiter); ein Update per Knopfdruck braucht KantTresor nicht.
+
+**Entscheidung:** Dieselbe Tabelle `installation` mit neuer Spalte `produkt` (Migration 2 der Zentrale; Altbestand wird `kantsites`), dazu `laufzeit`, `mandanten`, `stoerungen`, `speicher`. Eigener Endpunkt `POST /api/kanttresor/melden` (`Api::meldenTresor`) mit demselben Schlüssel-/HMAC-Verfahren wie ADR 123; eine Kennung bleibt an ihr Produkt gebunden (403 sonst). Die Antwort ist nur `{"ok":true}` – nie ein Auftrag, und `Bestand::beauftragen` lehnt KantTresor-Kennungen ab. Übersicht unter `/kanttresor` mit eigenen Spalten und der Kachel „Dienst gestört oder Speicher knapp“ (≥ 90 %). Als neueste Fassung gilt die höchste gemeldete, weil die KantArchiv-Releaseseite nicht öffentlich ist und ihre Tags nicht gepflegt sind. Gegenstück in KantArchiv: `controlplane/zentrale.py`, beat-Task alle 15 min, ab 1.82.0.
+
+**Folgen:** Die Zentrale muss neu hochgeladen werden; die Datenbank migriert beim ersten Aufruf. „Veraltet“ ist bei KantTresor relativ zum Bestand – ist keine Instanz auf dem neuesten Stand, fällt das nicht auf. KantTresor gibt keine Tür nach außen frei; er sendet nur. Die IP-Adresse wird wie bei KantSites gespeichert.
 
 ## ADR 123 – Zentrale auf sites.kant-it.de: Meldung, Übersicht, Update aus der Ferne (14.10.2026)
 

docs/STATUS.md

@@ -1,5 +1,59 @@
 # Projektstatus
 
+## Videos: Mediathek, Video-Baustein, Sektionshintergrund (04.11.2026)
+
+**Anlass:** Umut: Hero-Video für kant-it.de, „baust du video embedding gleich ein“.
+
+**Erledigt (ADR 125, Schema v28, Migration `Version20261104000100`):** `VideoLibrary` und Tabelle `video`; Upload über die Mediathek und den neuen Dialog `openVideos`; Abschnitt „Videos“ in der Mediathek; Auslieferung `/media/<id>.mp4|webm`; Baustein „Video“ (Spieler oder Schleife, Zweitformat WebM, Standbild, Titel); Hintergrundvideo samt WebM an der Sektion; `video.js` startet Schleifen nur sichtbar, mit Knopf zum Anhalten, ohne Start bei „Bewegung reduzieren“ und Datensparen. Website-Paket nimmt Tabelle und Dateien mit, ältere Pakete bleiben importierbar.
+
+**Geprüft:** PHPUnit 686 Tests unter PHP 8.3, davon nur die sechs `UpdaterTest`-Fälle rot, die in der Testumgebung auch ohne diese Änderung scheitern (kein Git-Verlauf der Arbeitskopie). Neu: `testAVideoFromTheLibraryPlaysAsBlockAndAsSectionBackground`. 41 JavaScript-Tests, Twig-Lint, PHP-Stilprüfung. Playwright (Chromium) in einer isolierten Installation: Upload beider Formate, Auswahl im Editor, Vorschau, Veröffentlichen, WebM läuft, füllt die Sektion, Knopf hält an, Reduzieren startet nichts und lädt nichts, Range-Antwort 206, keine CSP- und Konsolenfehler.
+
+**Nicht geprüft:** Safari und echtes iOS-Gerät, H.264 im Testbrowser (Playwright-Chromium spielt nur WebM), Lighthouse mit Video, Upload auf dem Hosting (PHP-Limits).
+
+**Durchsicht vor dem Release (05.11.2026):** CSP (`default-src 'self'` deckt die Videos), Sicherung, Website-Paket, Auslieferung mit Range und Schema-Migration passen. Nachgebessert: „Video“, „Video anhalten“ und „Video abspielen“ fehlten im Wörterbuch von `kant_t` – auf `/en/`- und türkischen Seiten stand der Knopf deutsch; jetzt Englisch und Türkisch (Französisch fällt wie sonst auf Englisch zurück). `video.js` überspringt ein `data-video-loop` ohne Knopf (etwa aus „Eigenes HTML“), statt mit einem Fehler alle folgenden Videos stehen zu lassen. Im Design-Panel stehen beim Video Größe und Abstand vorn statt der Textgruppe.
+
+**Geprüft:** PHPUnit 686/686 grün unter PHP 8.4 (auch `UpdaterTest`) und 8.2 (dort nur die bekannte Warnung in `UpdaterTest::testTrackedEnvironmentFromAnOlderTagCannotReplaceInstallationSettings`); php-cs-fixer ohne Befund, `lint:twig`, `npm test` 41/41, `test:editor` grün, `test:browser` gegen 8080 grün (die zwei bekannten Kontrastbefunde auf `/grundlagen`, Inhalt). Lokale `var/cms.db` auf `Version20261104000100` migriert.
+
+**Nächster Schritt:** Release 1.37.0, dann auf kant-it.de hochladen und in der Hero-Sektion als Hintergrundvideo wählen.
+
+## Sicherheitsupdate symfony/mime, Release 1.36.2 (03.11.2026)
+
+**Anlass:** Monatlicher Sicherheitscheck (`reports/sicherheit-2026-11.md`, nicht in Git): `symfony/mime` 7.4.19 betroffen von CVE-2026-45070 (E-Mail-Header-Injection über Parameternamen, behoben ab 7.4.22), in `main` und in v1.36.1. KantSites baut keine MIME-Parameternamen aus Eingaben, Ausnutzbarkeit gering. Umut: „Ja, Update + Release“.
+
+**Erledigt:** `composer update "symfony/*" --with-all-dependencies`: Symfony 7.4.x → 7.4.22 (mime, mailer, framework-bundle, http-kernel, security-*, console, yaml, rate-limiter u. a.), Polyfills 1.43.3, masterminds/html5 2.12.0. `npm audit fix` für die Entwicklungswerkzeuge (zod 3.25 → 4.6.7 unter lighthouse/puppeteer-core). `composer.json` unverändert, kein eigener Code geändert, keine Migration.
+
+**Geprüft:** `composer audit` und `npm audit` ohne Befund. PHPUnit 685 Tests grün unter PHP 8.4; unter 8.2 nur die bekannte Warnung in `UpdaterTest::testTrackedEnvironmentFromAnOlderTagCannotReplaceInstallationSettings` (vorbestehend). php-cs-fixer ohne Befund, `npm test` 41/41, `test:editor` grün, `test:browser` gegen 8080 grün (die zwei bekannten Kontrastbefunde auf `/grundlagen`, Inhalt).
+
+**Release:** Tag `v1.36.2`, Releaseeintrag mit Zip, `.sha256` und `install.php`; anonymer Download stimmt mit der Prüfsumme überein (3cf4e8c9…), `releases/latest` meldet v1.36.2. Im Archiv steckt `symfony/mime` v7.4.22.
+
+**Weiter offen aus dem Check:** HSTS auf den Kundenseiten einschalten (System → HSTS); PHP-Mindestfassung vor dem 31.12.2026 (Ende PHP 8.2) anheben.
+
+**Nächster Schritt:** In der Zentrale „Alle aktualisieren“ auf 1.36.2.
+
+## Zentrale: Reiter KantTresor (27.10.2026)
+
+**Anlass:** Umut: KantTresor soll sich in der Zentrale melden, eigener Reiter; „was wir nicht brauchen ist Aktualisierung per Knopfdruck“.
+
+**Erledigt:** `zentrale/`: Migration 2 (`produkt`, `laufzeit`, `mandanten`, `stoerungen`, `speicher`; Altbestand = KantSites), Endpunkt `POST /api/kanttresor/melden`, Reiter KantSites/KantTresor, Übersicht `/kanttresor` mit Kacheln (inkl. „Dienst gestört oder Speicher knapp“), Live-Suche, Detailseite ohne Update- und Auftragsteil, serverseitige Ablehnung von Aufträgen für KantTresor. ADR 124, `zentrale/README.md`. KantArchiv (eigenes Repo): `controlplane/zentrale.py`, Modell `ZentraleMeldung` (Migration 0016), beat-Task `controlplane.zentrale_melden` alle 15 min, Einstellungen `ZENTRALE_URL`/`ZENTRALE_ADRESSE`/`ZENTRALE_POLL_SECONDS`, Tests – dort als 1.82.0 committet und gepusht (fc2019b, b261658).
+
+**Geprüft:** `php scripts/zentrale-check.php` 28/28 (11 neue zu KantTresor). KantArchiv: `tests.test_zentrale` + `test_manage_gui` 24/24, ruff, mypy, `migrate_all` im Dev-Stack. Ende-zu-Ende: echte Meldung aus dem KantTresor-Container per HTTP an die lokale Zentrale (200, Antwortunterschrift gültig). Upgrade einer Zentrale-DB im Stand 1. Browser (Port 8115): Reiter, Filter, Live-Suche, Zurücksetzen bleibt auf `/kanttresor`, Detailseite, Notiz, untergeschobener Update-Auftrag wird abgelehnt, KantSites-Reiter unverändert mit Update-Knöpfen, 375 px ohne Querscrollen, keine Konsolenfehler. Demo-DB wieder gelöscht. Nicht geprüft: Live-Zentrale, Meldung einer echten KantTresor-Produktion über das Internet.
+
+**Fund unterwegs:** Der Dev-Stack von KantArchiv hat `host.docker.internal` in `DJANGO_ALLOWED_HOSTS` und hätte sich sonst an die echte Zentrale gemeldet. Jetzt gesperrt über `.internal` und `DJANGO_DEBUG=True`; vor dem ersten Takt gestoppt, es ging nichts raus.
+
+**Nächster Schritt:** Umut lädt `zentrale/app/` und `zentrale/public/` neu hoch (`config.php` und `var/` bleiben). KantTresor-Instanzen mit `./update.sh` auf 1.82.0 heben; nach spätestens 15 min erscheinen sie im Reiter. KantSites-Änderungen sind noch nicht committet.
+
+## Zentrale: Warnung bei unsicherem PHP (22.10.2026)
+
+**Anlass:** Kritische PHP-Lücke „php2shell“ (CVE-2026-109618/-109619, CVSS 9.2, Patches vom 21.10.2026: 8.2.35, 8.3.36, 8.4.27, 8.5.12). Umut: Warnung „bei sitesviewer einbauen, nicht in KantSites selbst“.
+
+**Erledigt:** Nur `zentrale/`, kein Eingriff ins CMS, keine Schemaänderung. `Bestand::PHP_SICHER` (erste sichere Fassung je Zweig) und `PHP_ALT_BIS` (8.1 und älter ohne Updates); `Bestand::phpLuecke()` liefert den Grund oder null. Unbekannte Angaben und neuere Zweige (8.6-Vorabfassungen) gelten nicht als unsicher. Übersicht: neue Kachel/Filter „PHP mit Sicherheitslücke“, rote Pille „PHP x.y.z unsicher“ in der Spalte Zustand, Suche findet auch die PHP-Fassung. Detailseite: Pille plus Hinweis, dass das Update beim Hoster liegt. Bei der nächsten PHP-Sicherheitsmeldung `PHP_SICHER` nachziehen.
+
+**Geprüft:** `php scripts/zentrale-check.php` grün (drei neue Prüfungen zur PHP-Regel). Lokal im Browser (Port 8115, drei Demo-Installationen mit 8.4.22, 8.4.27, 8.1.30): Kachel zählt 2, Filter zeigt genau die zwei, Detailseite mit Hinweis. Demo-Datenbank wieder gelöscht. Nicht geprüft: Mobilansicht, Live-Zentrale.
+
+**Bekannte Grenze:** Distributionen mit zurückportierten Patches (z. B. Debian/Ubuntu) melden weiter die alte Versionsnummer und erscheinen dann fälschlich als unsicher. Installationen vor 1.36.0 melden kein PHP.
+
+**Nächster Schritt:** Umut lädt `zentrale/app/` und `zentrale/public/` neu hoch (Paket `var/zentrale-upload.zip`, neu gebaut); `config.php` und `var/` auf dem Server bleiben. PHP bei allen Hostings auf 8.4.27 bringen.
+
 ## Symfony-Patchupdate, Release 1.36.1 (14.10.2026)
 
 **Anlass:** Monatlicher Sicherheitscheck (`reports/sicherheit-2026-10.md`, nicht in Git): keine Sicherheitslücken, aber Patch-Rückstand bei Symfony. Umut: „dann mach neueste symfony version dann kann ich den updater mal testen“.
@@ -8,6 +62,8 @@
 
 **Geprüft:** `composer audit` ohne Befund. PHPUnit 685 Tests grün unter PHP 8.4 und 8.2; unter 8.2 eine Warnung in `UpdaterTest::testTrackedEnvironmentFromAnOlderTagCannotReplaceInstallationSettings` (`file_get_contents` auf eine von `git checkout` entfernte `.env`, `Updater.php:468`), die mit der alten `composer.lock` genauso auftritt – vorbestehend. php-cs-fixer ohne Befund, `npm test` 41/41, `test:editor` grün (erster Lauf hing einmal beim Warten auf „Veröffentlicht“, zweiter Lauf vollständig grün), `test:browser` gegen 8080 grün (zwei Kontrastbefunde aus im Editor gesetzten Farben auf `/grundlagen`, Inhalt, nicht Code).
 
+**Release:** Tag `v1.36.1`, Releaseeintrag mit Zip, `.sha256` und `install.php`; anonymer Download stimmt mit der Prüfsumme überein (fe286f49…), `releases/latest` meldet v1.36.1.
+
 **Nächster Schritt:** Umut testet den Updater: eine Installation auf 1.36.0 per „System“ oder über die Zentrale auf 1.36.1 heben. Weitere Punkte aus dem Sicherheitscheck: HSTS auf den Kundenseiten einschalten (System → HSTS), PHP-Mindestfassung vor dem 31.12.2026 (Ende PHP 8.2) anheben.
 
 ## Zentrale: Suche, Filter und Seiten (14.10.2026)

migrations/Version20261104000100.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20261104000100 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Videos in der Mediathek: fuer den Video-Baustein und den Hintergrund einer Sektion.';
+    }
+
+    public function isTransactional(): bool
+    {
+        return false;
+    }
+
+    public function up(Schema $schema): void
+    {
+        // Eine eigene Tabelle wie bei den Dokumenten: jede Stelle, die ein Bild sucht, erwartet
+        // Varianten mit Breite und Hoehe.
+        $video = $schema->createTable('video');
+        $video->addColumn('id', 'string', ['length' => 32]);
+        $video->addColumn('title', 'string', ['length' => 160]);
+        $video->addColumn('mime', 'string', ['length' => 16]);
+        $video->addColumn('bytes', 'integer');
+        $video->addColumn('archived', 'boolean', ['default' => false]);
+        $video->addColumn('version', 'integer', ['default' => 1]);
+        $video->addColumn('created_at', 'datetime_immutable');
+        $video->setPrimaryKey(['id']);
+    }
+
+    public function down(Schema $schema): void
+    {
+        $schema->dropTable('video');
+    }
+}

package-lock.json

@@ -213,13 +213,13 @@
       }
     },
     "node_modules/@puppeteer/browsers": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.2.2.tgz",
-      "integrity": "sha512-q2BU4YfO9h/Wt7IcWPcggpOOqLk2Tbs1hDwolvKZrweRjy751OJBKMN9zO5bfD0pzU7X/tvKw/exQds4pM/LOg==",
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-3.2.6.tgz",
+      "integrity": "sha512-MJP29gVoHznmqmwhH1tlZqzfeQ3aylTpSSa6WKZXtkwYUH02i9imBmWGTyZrbnAou5paX78SE4jMAUqnEPf8ug==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "modern-tar": "^0.8.4",
+        "modern-tar": "^0.8.6",
         "yargs": "^18.0.0"
       },
       "bin": {
@@ -242,9 +242,9 @@
       }
     },
     "node_modules/@puppeteer/browsers/node_modules/ansi-regex": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.3.0.tgz",
-      "integrity": "sha512-WpDfL7NO6j7tH88IDBNVdUJxDh9nmCteAVW9dsep846XdwF4naCBK+/tGLX3KJgcpgMRXCFlTM2hKGoK9FsdrQ==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.5.0.tgz",
+      "integrity": "sha512-zhvbbbdt1kbw7EJ9OQoxmQcuaNR9P5kTj7e/YdmOSU10aHWbycofJxA6jKfoEy3vlLdctOF9ZHaxLtmSm998wQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -308,9 +308,9 @@
       "license": "MIT"
     },
     "node_modules/@puppeteer/browsers/node_modules/string-width": {
-      "version": "8.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.2.tgz",
-      "integrity": "sha512-GaPUh5gfdrYzqeVNZvUfT23vYYxXzKYidUcnMtJg/3rxRV63EFZy3k6xfKlmfeJD0176lnUV/Usr3XcwSvFzpg==",
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.3.0.tgz",
+      "integrity": "sha512-ZbmZM0JCihQN91dWnxoipT2KOEyHqEyfRXUyjuRhW8b/xnqPDoq4gWEVApTVa9db2wN8mmoikgFBbjh71+cGeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -377,9 +377,9 @@
       }
     },
     "node_modules/@puppeteer/browsers/node_modules/yargs": {
-      "version": "18.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.1.0.tgz",
-      "integrity": "sha512-2rAgRKu54VsHkqI0/tYkmluGXHD4KW7yZoycuqDQ15QOTnc2VVfy0nN/1eMhnQLO00A+dwtK20xuCnc1YGeUyg==",
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.2.0.tgz",
+      "integrity": "sha512-9OpKOLeaoNFecEp7P6iYbzze/5CqWoH7N3SMs/6y1XF4nMvFMspEGZzJ6uFi9MmQwXhyzqYoSEKO3tvA3Z/o2w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -608,14 +608,14 @@
       }
     },
     "node_modules/chromium-bidi": {
-      "version": "17.0.2",
-      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-17.0.2.tgz",
-      "integrity": "sha512-5v9GQFhTktFvotn/OFNJBmKLKRAb6n9r0bVCwf7sHgWc3/JryK0bj1nn93L3pHFrfgcsu6Be6EWsDi+1XHTGDg==",
+      "version": "157.0.8090-0",
+      "resolved": "https://registry.npmjs.org/chromium-bidi/-/chromium-bidi-157.0.8090-0.tgz",
+      "integrity": "sha512-KJw7IQgqXwxpJgJlEIPg5mr2ZoqA+jkTRtc5EABI7sUJ3bu3cpI7NuEBoj4Gn1AsF78CaT9So5WQWspK3/wYag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "mitt": "^3.0.1",
-        "zod": "^3.24.1"
+        "zod": "^4.6.5"
       },
       "engines": {
         "node": ">=20.19.0 <22.0.0 || >=22.12.0"
@@ -812,9 +812,9 @@
       }
     },
     "node_modules/get-east-asian-width": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
-      "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.7.0.tgz",
+      "integrity": "sha512-XjH1AECxf0giL2V1aU8vKyRR2ppRUb5c0EvT7zuJTokQ74bNo52zOtghqdWIqrhUD79fo3x0WfKZdOqxF6LG1Q==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1029,9 +1029,9 @@
       "license": "MIT"
     },
     "node_modules/modern-tar": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.8.5.tgz",
-      "integrity": "sha512-snEhs+6G5Tjd4I7tLCDOaoln2RgE0bD19RzEKgvgK2hZ5VKy3MpLhLTZ2fWpXSTg4K2cyPwp+VHATFJhxfnOeA==",
+      "version": "0.8.6",
+      "resolved": "https://registry.npmjs.org/modern-tar/-/modern-tar-0.8.6.tgz",
+      "integrity": "sha512-LYSks0tNVqbtez/9OB0YFP6qLRSqkdAxJWOQpVaR67lNTbj2zNLyYpowkRMia5lXLCZKzxwoxkxH2MbbBR2aEg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1100,34 +1100,34 @@
       }
     },
     "node_modules/puppeteer-core": {
-      "version": "25.10.0",
-      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.10.0.tgz",
-      "integrity": "sha512-Hy5eMQshOEMil4JUUx03h5pw1HYkYCso1RG/gcpPlFSd4cYPOcopxcXEAxpLPOkOPJb9LIJtwxuj66bSdvknFg==",
+      "version": "25.16.0",
+      "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-25.16.0.tgz",
+      "integrity": "sha512-VA5Pf54N8shfopNkZZXCdiiwfnnY8ZJYAMqFQRhlH5mGUhfwf53Ar770GPtdpTDLUqvQeYpIBtC9/G2Jij2IJw==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@puppeteer/browsers": "3.2.2",
-        "chromium-bidi": "17.0.2",
-        "devtools-protocol": "0.0.1666840",
-        "typed-query-selector": "^2.12.2",
-        "webdriver-bidi-protocol": "0.4.3",
-        "ws": "^8.21.3"
+        "@puppeteer/browsers": "3.2.6",
+        "chromium-bidi": "157.0.8090-0",
+        "devtools-protocol": "0.0.1704951",
+        "typed-query-selector": "^2.12.3",
+        "webdriver-bidi-protocol": "1.0.1",
+        "ws": "^8.22.0"
       },
       "engines": {
         "node": ">=22.12.0"
       }
     },
     "node_modules/puppeteer-core/node_modules/devtools-protocol": {
-      "version": "0.0.1666840",
-      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1666840.tgz",
-      "integrity": "sha512-gCcO42XCHKEs7Ag0S7aGYsnJ7hlgrO3qderYqeiY0Eqk+0GFfuvT13IA0hHreJTa2KCdDVyGMeOhdMNmrrTjVg==",
+      "version": "0.0.1704951",
+      "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1704951.tgz",
+      "integrity": "sha512-GQhQOs9u/Mvm1zMtJIH872JS4AskuZdUSsPNPk4ChahtWAUqgz6atEtIsMt+nO7MqF1Ic4HxII/k8Cu36JivNg==",
       "dev": true,
       "license": "BSD-3-Clause"
     },
     "node_modules/puppeteer-core/node_modules/ws": {
-      "version": "8.21.3",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
-      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "version": "8.22.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.22.1.tgz",
+      "integrity": "sha512-oyL6OPYme/CmiFvNuGzeoxCJ4nOrZE2O1FwM9MWM1AsGri6nLXB2pg+lNA8aLeXMSav0J6eIVS1j6vUPzUtK9g==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -1285,9 +1285,9 @@
       }
     },
     "node_modules/typed-query-selector": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.2.tgz",
-      "integrity": "sha512-EOPFbyIub4ngnEdqi2yOcNeDLaX/0jcE1JoAXQDDMIthap7FoN795lc/SHfIq2d416VufXpM8z/lD+WRm2gfOQ==",
+      "version": "2.12.3",
+      "resolved": "https://registry.npmjs.org/typed-query-selector/-/typed-query-selector-2.12.3.tgz",
+      "integrity": "sha512-/dtuMZyutHLlrxWhhC1uib00ELUr2dZ8C9B8YzZYsJmeE3V56OxRblrSM2UaF142pcMtak7ehZ6+poWGeehNIg==",
       "dev": true,
       "license": "MIT"
     },
@@ -1306,9 +1306,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/webdriver-bidi-protocol": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.4.3.tgz",
-      "integrity": "sha512-uuN0goWfxP22B7J/uAgBpOYNPttC+XVseYE+rSY5+rQ+YBeVz/VORw8WbmLVcqW78zNg5A4qnjNXYUWR3il2ig==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-1.0.1.tgz",
+      "integrity": "sha512-WXWs/aXF2a6Al1Z2/V/7Gp2oPZOAAmHjJOTmv4KCXRJ122IMj3tSSMc6a4q3K4QOmhQbse/Ahr+oTVJOU2dUiw==",
       "dev": true,
       "license": "Apache-2.0"
     },
@@ -1412,9 +1412,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.25.76",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "version": "4.6.7",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.6.7.tgz",
+      "integrity": "sha512-g8W2D2kU6a8untc053fX1uVBKzM7yqAxW/3zwk83+6RyF2+SKOuV+c0wBDhUwzV1PaGapmZH+rmcUzPf+3CGwg==",
       "dev": true,
       "license": "MIT",
       "funding": {

public/assets/design-panel.js

@@ -513,7 +513,7 @@ export function createDesignPanel({ schema, onChange, onSavePreset, getBlock, ge
     });
     panel.append(searchLabel, search, found);
 
-    const priority = ['image', 'gallery', 'logos'].includes(block.type) ? ['image', 'size', 'spacing'] : isContainer(block) ? ['layout', 'size', 'spacing', 'background'] : ['spacer', 'divider', 'embed'].includes(block.type) ? ['size', 'spacing'] : ['text', 'size', 'spacing'];
+    const priority = ['image', 'gallery', 'logos'].includes(block.type) ? ['image', 'size', 'spacing'] : isContainer(block) ? ['layout', 'size', 'spacing', 'background'] : ['spacer', 'divider', 'embed', 'video'].includes(block.type) ? ['size', 'spacing'] : ['text', 'size', 'spacing'];
     const orderedGroups = [...new Set([...priority, ...Object.keys(GROUPS)])];
     for (const group of orderedGroups) {
       const groupLabel = GROUPS[group];

public/assets/editor-model.js

@@ -1,5 +1,5 @@
-export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', postnav: 'Beitragsnavigation', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt', icon: 'Symbol', progress: 'Fortschritt', slider: 'Slider', legal: 'Rechtszeile', social: 'Soziale Profile', html: 'Eigenes HTML', language: 'Sprachwahl' };
-export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', button: '↗', gallery: '▦', postlist: '☷', postnav: '⇄', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', legal: '§', embed: '⬓', icon: '◆', progress: '▰', slider: '⇄', social: '⚭', html: '</>', language: '文' };
+export const labels = { section: 'Sektion', row: 'Zeile', column: 'Spalte', heading: 'Überschrift', text: 'Text', image: 'Bild', video: 'Video', button: 'Button', gallery: 'Galerie', postlist: 'Beitragsliste', postnav: 'Beitragsnavigation', iconcard: 'Symbolkarte', stat: 'Kennzahl', quote: 'Kundenstimme', logos: 'Logoleiste', cta: 'Aufruf-Band', contact: 'Kontaktdaten', divider: 'Trennlinie', spacer: 'Abstand', accordion: 'Akkordeon', accordionitem: 'Akkordeon-Eintrag', tabs: 'Tabs', tabitem: 'Tab', form: 'Formular', breadcrumb: 'Brotkrumen', menu: 'Navigation', partialref: 'Verknüpfte Sektion', embed: 'Externer Inhalt', icon: 'Symbol', progress: 'Fortschritt', slider: 'Slider', legal: 'Rechtszeile', social: 'Soziale Profile', html: 'Eigenes HTML', language: 'Sprachwahl' };
+export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H', text: 'T', image: '▧', video: '▶', button: '↗', gallery: '▦', postlist: '☷', postnav: '⇄', iconcard: '◈', stat: '№', quote: '❝', logos: '⬚', cta: '◉', contact: '✆', divider: '—', spacer: '⇳', accordion: '⌵', accordionitem: '·', tabs: '▭', tabitem: '▫', form: '✉', breadcrumb: '⟩', menu: '☰', partialref: '⧉', legal: '§', embed: '⬓', icon: '◆', progress: '▰', slider: '⇄', social: '⚭', html: '</>', language: '文' };
 // A namespaced type belongs to a plugin this installation may not have. Such blocks stay in the
 // document, stay selectable and movable, but the editor never edits or fills them.
 /**
@@ -9,7 +9,7 @@ export const icons = { section: '▣', row: '☰', column: '▥', heading: 'H',
  */
 export const CATEGORIES = [
   { name: 'Aufbau', hint: 'Sektion → Zeile → Spalte. Der Inhalt kommt in die Spalte.', types: ['section', 'row', 'column'] },
-  { name: 'Inhalt', types: ['heading', 'text', 'image', 'button', 'icon', 'divider', 'spacer'] },
+  { name: 'Inhalt', types: ['heading', 'text', 'image', 'video', 'button', 'icon', 'divider', 'spacer'] },
   { name: 'Bausteine', types: ['iconcard', 'stat', 'quote', 'cta', 'contact', 'social', 'logos', 'progress'] },
   { name: 'Gruppen', types: ['gallery', 'accordion', 'accordionitem', 'tabs', 'tabitem', 'slider'] },
   { name: 'Seite und Daten', types: ['postlist', 'postnav', 'breadcrumb', 'menu', 'language', 'form', 'legal', 'partialref', 'embed', 'html'] },
@@ -132,6 +132,8 @@ export function createBlock(type) {
   if (type === 'language') block.props = { display: 'code' };
   // Leer eingefuegt: nichts steht auf der Seite, bis jemand Code eintraegt.
   if (type === 'html') block.props = { html: '' };
+  // Leer eingefuegt wie „Eigenes HTML“: auf der Website steht nichts, bis ein Video gewaehlt ist.
+  if (type === 'video') block.props = { src: '', mode: 'player', title: '' };
   if (type === 'iconcard') block.props = { icon: 'check', title: 'Deine Leistung', text: 'Beschreibe hier kurz, worum es geht.', href: '' };
   if (type === 'stat') block.props = { value: '15+', label: 'Jahre Erfahrung' };
   if (type === 'quote') block.props = { text: 'Ein Satz, den eine Kundin oder ein Kunde über dich gesagt hat.', author: 'Name', role: '', rating: 5 };
@@ -197,6 +199,7 @@ export function upgradeForType(document, type) {
   if (type === 'postnav') upgradeDocument(document, 18);
   if (type === 'legal') upgradeDocument(document, 19);
   if (type === 'html') upgradeDocument(document, 24);
+  if (type === 'video') upgradeDocument(document, 28);
   if (type === 'language') upgradeDocument(document, 27);
   if (['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'].includes(type)) upgradeDocument(document, 6);
   if (type === 'tabs' || type === 'tabitem') upgradeDocument(document, 7);
@@ -348,7 +351,7 @@ export const devices = { desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobil' }
 // blieb bei 12 stehen, während Bausteine schon v13 bis v15 verlangten: in einem aktuellen Dokument
 // liess sich dann gar nichts mehr einfügen, und ein Symbol, ein Slider oder ein externer Inhalt
 // nirgends. Eine Zahl, an einer Stelle.
-export const SCHEMA_VERSION = 27;
+export const SCHEMA_VERSION = 28;
 
 export const VISIBILITY = { all: 'Auf allen Geräten', desktop: 'Nur Desktop', tablet: 'Nur Tablet', mobile: 'Nur Mobil', 'hide-desktop': 'Auf Desktop ausblenden', 'hide-tablet': 'Auf Tablet ausblenden', 'hide-mobile': 'Auf Mobil ausblenden', hidden: 'Überall ausblenden' };
 
@@ -692,7 +695,7 @@ export function relevantProperty(block, key, property) {
   if (property.group === 'menu') return block.type === 'menu';
   if (property.group === 'icon') return block.type === 'button' && block.props?.icon !== 'none';
   if (property.group === 'image') return ['image', 'gallery', 'logos', 'postlist'].includes(block.type);
-  if (property.group === 'text' || key === 'textShadow') return !['image', 'gallery', 'logos', 'spacer', 'divider', 'embed'].includes(block.type);
+  if (property.group === 'text' || key === 'textShadow') return !['image', 'video', 'gallery', 'logos', 'spacer', 'divider', 'embed'].includes(block.type);
   if (key === 'columnWidths') return block.type === 'row';
   if (['flexDirection', 'flexWrap', 'justifyContent', 'alignItems', 'gridColumns', 'gap', 'rowGap', 'columnGap'].includes(key)) return container || ['button', 'menu', 'form', 'postlist', 'contact', 'social'].includes(block.type);
   return true;

public/assets/editor.js

@@ -1,5 +1,5 @@
 import { EditorHistory, labels, blockLabel, blockIcon, isPluginBlock, setStyle, effectiveStyle, locate, clone, isContainer, canContain, insertBlock, insertBlockAt, insertionTarget, moveBlockTo, duplicateBlock, moveBlock, devices, effectiveDesign, setDesign, blockPath, insertPreset, insertRow, insertRowAt, setEffect, insertMedia, upgradeDocument, CATEGORIES, ROW_COLUMNS, whyNot, dropList } from './editor-model.js';
-import { openMedia, openDocuments, createMediaPreview } from './media.js';
+import { openMedia, openDocuments, openVideos, createMediaPreview } from './media.js';
 import { openPageDialog } from './page-picker.js';
 import { createDesignPanel } from './design-panel.js';
 import { renderButtonControls, setButtonDesign } from './button-design.js';
@@ -549,6 +549,13 @@ function renderContent(block, panel) {
     field('Höhe (px)', 'height', block.props.height, { number: true, help: 'Zwischen 150 und 1200.' });
     field('Hinweis im Platzhalter', 'hint', block.props.hint || '', { multiline: true, help: 'Leer lassen für den Standardtext.' });
   }
+  if (block.type === 'video') {
+    videoChoice(panel, block, 'src', 'Video', 'MP4 mit H.264 spielt jeder Browser ab.');
+    videoChoice(panel, block, 'srcWebm', 'Zweitformat WebM (optional)', 'Meist kleiner als das MP4. Browser, die es können, nehmen es zuerst.', 'video/webm');
+    posterChoice(panel, block);
+    field('Verhalten', 'mode', block.props.mode || 'player', { choices: { player: 'Spieler mit Steuerung', loop: 'Schleife ohne Ton' }, help: 'Die Schleife startet von selbst, sobald das Video zu sehen ist, und läuft nur stumm. Wer „Bewegung reduzieren“ eingestellt hat, sieht das Standbild.' });
+    field('Titel', 'title', block.props.title || '', { maxLength: 160, help: 'Worum es im Video geht. Screenreader lesen das vor. Bei einer rein dekorativen Schleife leer lassen.' });
+  }
   if (block.type === 'html') {
     // Rohes Markup. Dieselbe Rolle wie beim eigenen Skript, deshalb dieselbe Anzeige: sichtbar
     // fuer alle, beschreibbar nur fuer Administratoren - und der Server weist es ohnehin ab.
@@ -671,6 +678,8 @@ function renderContent(block, panel) {
     panel.append(images);
   }
   if (block.type === 'section') {
+    videoChoice(panel, block, 'backgroundVideo', 'Hintergrundvideo', 'Läuft stumm in der Schleife hinter dem Inhalt. Das Hintergrundbild unter Design bleibt das Standbild, bis das Video läuft, und für alle, die keine Bewegung möchten. Eine Überlagerung liegt nicht über dem Video.');
+    videoChoice(panel, block, 'backgroundVideoWebm', 'Zweitformat WebM (optional)', 'Meist kleiner als das MP4. Browser, die es können, nehmen es zuerst.', 'video/webm');
     field('Farbwelt', 'tone', block.layout?.tone || 'paper', { layout: true, choices: { paper: 'Hell · Papier', mint: 'Hellgrün · Akzent', ink: 'Dunkel · Tinte' } });
     field('Inhaltsbreite', 'width', block.layout?.width || 'normal', { layout: true, choices: { normal: 'Websitebreite (aus dem Theme)', narrow: 'Schmal (800 px)', wide: 'Breit (1600 px)', full: 'Randlos (volle Breite)' }, help: 'Randlos nutzt die gesamte Sektion. Text und Überschriften füllen ihren Container; eine eigene Begrenzung stellst du unter Design → Größe ein.' });
   }
@@ -866,6 +875,51 @@ function renderPluginFields(block, panel, plugin, field) {
   }
 }
 
+/** Ein Videofeld im Eigenschaftenfeld. Im Dokument steht die Adresse der Datei. */
+function videoChoice(panel, block, key, labelText, helpText, only = '') {
+  const value = block.props?.[key] || '';
+  const wrap = document.createElement('div'); wrap.className = 'plugin-media-field';
+  const label = document.createElement('p'); label.className = 'field-label'; label.textContent = labelText; wrap.append(label);
+  const set = src => {
+    history.change(doc => {
+      upgradeDocument(doc, 28);
+      const current = locate(doc.blocks, block.id)?.block;
+      if (!current) return;
+      current.props ??= {};
+      if (src) current.props[key] = src; else delete current.props[key];
+    });
+    renderProperties(); changed();
+  };
+  if (value) { const name = document.createElement('code'); name.textContent = value; wrap.append(name); }
+  const pick = document.createElement('button'); pick.type = 'button'; pick.className = 'secondary'; pick.textContent = value ? 'Anderes Video wählen' : 'Video wählen oder hochladen';
+  pick.addEventListener('click', () => openVideos({ only, onChoose: item => set(item.src) }));
+  wrap.append(pick);
+  if (value) { const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'text-button danger-text'; remove.textContent = 'Video entfernen'; remove.addEventListener('click', () => set('')); wrap.append(remove); }
+  const help = document.createElement('p'); help.className = 'field-help'; help.textContent = helpText; wrap.append(help);
+  panel.append(wrap);
+}
+
+/** Das Standbild eines Videos: ein Bild der Mediathek, in einer Breite, die für ein Video reicht. */
+function posterChoice(panel, block) {
+  const value = block.props?.poster || '';
+  const wrap = document.createElement('div'); wrap.className = 'plugin-media-field';
+  const label = document.createElement('p'); label.className = 'field-label'; label.textContent = 'Standbild (optional)'; wrap.append(label);
+  const preview = createMediaPreview({ src: value }); wrap.append(preview.element);
+  const set = src => {
+    history.change(doc => {
+      const current = locate(doc.blocks, block.id)?.block;
+      if (!current) return;
+      if (src) current.props.poster = src; else delete current.props.poster;
+    });
+    renderProperties(); changed();
+  };
+  const pick = document.createElement('button'); pick.type = 'button'; pick.className = 'secondary'; pick.textContent = value ? 'Anderes Bild wählen' : 'Bild wählen';
+  pick.addEventListener('click', () => openMedia({ needsAlt: false, onChoose: ([item]) => { if (item) set((item.variants.find(variant => variant.width >= 1600) ?? item.variants.at(-1)).src); } }));
+  wrap.append(pick);
+  if (value) { const remove = document.createElement('button'); remove.type = 'button'; remove.className = 'text-button danger-text'; remove.textContent = 'Bild entfernen'; remove.addEventListener('click', () => set('')); wrap.append(remove); }
+  panel.append(wrap);
+}
+
 function chooseMedia(multiple) {
   const target = selected;
   openMedia({ multiple, onChoose: items => {

public/assets/library-previews.js

@@ -58,6 +58,7 @@ export const PREVIEWS = {
   form: '<rect x="2.5" y="2" width="19" height="3.6" rx="1.2"/><rect x="2.5" y="6.8" width="19" height="3.6" rx="1.2"/><rect x="2.5" y="11.6" width="8" height="3.4" rx="1.2" fill="currentColor" stroke="none"/>',
   legal: `${bar(2, 4, 20, 1.6)}${bar(2, 7.4, 16, 1.6)}${bar(2, 10.8, 11, 1.6)}`,
   partialref: '<rect x="2.5" y="4.5" width="13" height="9" rx="1.5"/><path d="M6.5 4.5V2h13v9h-2.5"/>',
+  video: '<rect x="2" y="2.5" width="20" height="11" rx="1.5"/><path d="M10 5.4l5 2.6-5 2.6z"/>',
   embed: '<rect x="2" y="2.5" width="20" height="11" rx="1.5"/><path d="M10.2 5.6l4.6 2.4-4.6 2.4z" fill="currentColor" stroke="none"/>',
 };
 

public/assets/media-drop.js

@@ -9,7 +9,7 @@ const zone = document.querySelector('[data-dropzone]');
 const input = zone?.querySelector('input[type="file"]');
 const chosen = document.querySelector('[data-chosen]');
 if (zone && input && chosen) {
-  const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];
+  const ACCEPTED = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf', 'video/mp4', 'video/webm'];
 
   const describe = (files, ignored = 0) => {
     if (!files.length) {

public/assets/media.js

@@ -206,4 +206,69 @@ export function openDocuments({ onChoose } = {}) {
   }).catch(err => { $('#document-status').textContent = ''; error(err.message); });
 }
 
+/**
+ * Ein Video aus der Mediathek wählen - oder eines hochladen und gleich wählen.
+ *
+ * Wie bei den PDFs ein eigener, schmaler Dialog. Mit only: 'video/webm' bietet er nur dieses Format
+ * an, für das Zweitformat neben dem MP4.
+ */
+export function openVideos({ onChoose, only = '' } = {}) {
+  const opener = document.activeElement;
+  const dialog = element('dialog', '', 'media-dialog document-dialog');
+  dialog.setAttribute('aria-labelledby', 'video-dialog-title');
+  dialog.innerHTML = `<div class="media-heading"><div><p class="eyebrow">VIDEOS</p><h2 id="video-dialog-title">Video wählen</h2></div><button class="secondary" id="video-close">Schließen</button></div>
+    <p class="panel-hint">MP4 (H.264) oder WebM bis 64 MB. Das Video wird unverändert abgelegt und ist über seine Adresse öffentlich erreichbar. Kleine Dateien laden schneller – ein Hintergrund sollte nur wenige MB haben.</p>
+    <div class="media-tools"><div><label for="video-search">Videos suchen</label><input id="video-search" type="search" placeholder="Titel"></div><div><label for="video-upload">Video hochladen</label><input id="video-upload" type="file" accept="video/mp4,video/webm,.mp4,.webm" disabled></div></div>
+    <p id="video-status" role="status" aria-live="polite">Wird geladen …</p><p id="video-error" class="media-error" role="alert" hidden></p>
+    <div id="video-list" class="document-list" role="group" aria-label="Video auswählen"></div>
+    <div class="media-footer"><span></span><button id="video-insert" class="primary" disabled>Video übernehmen</button></div>`;
+  document.body.append(dialog);
+  const $ = selector => dialog.querySelector(selector);
+  let items = [], chosen = null, token;
+  const error = message => { $('#video-error').textContent = message; $('#video-error').hidden = !message; };
+  const size = bytes => `${(bytes / 1048576).toLocaleString('de', { maximumFractionDigits: 1, minimumFractionDigits: 1 })} MB`;
+  const base = document.querySelector('meta[name="admin-base"]').content + '/api/videos';
+  const fits = item => !only || item.mime === only;
+  function render() {
+    const query = $('#video-search').value.toLocaleLowerCase('de');
+    const visible = items.filter(item => fits(item) && item.title.toLocaleLowerCase('de').includes(query));
+    $('#video-list').replaceChildren();
+    for (const item of visible) {
+      const card = element('button', '', 'document-card'); card.type = 'button';
+      card.setAttribute('aria-pressed', String(chosen?.id === item.id));
+      card.append(element('span', item.mime === 'video/webm' ? 'WEBM' : 'MP4', 'document-badge'), element('strong', item.title), element('span', size(item.bytes)));
+      card.addEventListener('click', () => { chosen = item; render(); card.focus(); });
+      card.addEventListener('dblclick', () => { chosen = item; $('#video-insert').click(); });
+      $('#video-list').append(card);
+    }
+    if (!visible.length) $('#video-list').append(element('p', items.some(fits) ? 'Kein Video mit diesem Titel.' : 'Noch keine passenden Videos. Lade oben eines hoch.', 'muted'));
+    $('#video-status').textContent = `${items.filter(fits).length} Videos${chosen ? ` · gewählt: ${chosen.title}` : ''}`;
+    $('#video-insert').disabled = !chosen;
+  }
+  $('#video-search').addEventListener('input', render);
+  $('#video-close').addEventListener('click', () => dialog.close());
+  dialog.addEventListener('close', () => { dialog.remove(); if (opener?.isConnected) opener.focus(); });
+  $('#video-upload').addEventListener('change', async () => {
+    const file = $('#video-upload').files[0]; if (!file) return;
+    error('');
+    if (file.size > 64 * 1024 * 1024) { error(`${file.name}: größer als 64 MB`); $('#video-upload').value = ''; return; }
+    $('#video-status').textContent = `Wird hochgeladen: ${file.name}`;
+    try {
+      const form = new FormData(); form.append('file', file);
+      const response = await fetch(base + '/upload', { method: 'POST', headers: { 'X-CSRF-Token': token }, body: form });
+      if (response.redirected) throw new Error('Sitzung abgelaufen. Bitte erneut anmelden.');
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(data.error || `Upload fehlgeschlagen (${response.status}).`);
+      items.unshift(data.item); chosen = fits(data.item) ? data.item : null;
+    } catch (err) { error(`${file.name}: ${err.message || 'Verbindung unterbrochen'}`); }
+    $('#video-upload').value = ''; render();
+  });
+  $('#video-insert').addEventListener('click', () => { if (chosen) { onChoose?.(chosen); dialog.close(); } });
+  dialog.showModal();
+  fetch(base, { credentials: 'same-origin' }).then(async response => {
+    if (!response.ok || response.redirected) throw new Error('Videos konnten nicht geladen werden. Bitte neu anmelden.');
+    const data = await response.json(); items = data.items; token = data.csrfToken; $('#video-upload').disabled = false; render();
+  }).catch(err => { $('#video-status').textContent = ''; error(err.message); });
+}
+
 document.querySelector('#open-media-library')?.addEventListener('click', () => openMedia());

public/assets/preview.css

@@ -23,3 +23,5 @@
 .editor-add-content{min-height:0;margin-top:12px;padding:10px;border-width:1px;background:#f3f8f4}
 .block-accordion.editor-container>.editor-add-content{margin-top:16px}
 @media(max-width:767px){.editor-empty{padding:16px 10px}.editor-empty button{min-height:44px}}
+/* Die Vorschau läuft ohne Skript; dann blendet Chrome bei jedem Video die Steuerung ein. */
+.section-video::-webkit-media-controls{display:none!important}

public/assets/site.css

@@ -241,6 +241,16 @@ body.consent-open{padding-bottom:320px}
 .embed-provider{margin:0 0 16px;font-size:13px;color:var(--muted)}
 /* Eigenes HTML: nur so viel Regel, dass fremdes Markup die Spalte nicht sprengt. Alles
    Weitere bestimmt der Code selbst - das ist der Zweck des Bausteins. */
+.block-video{position:relative;margin:0;max-width:100%}
+.video-media{display:block;width:100%;height:auto;border-radius:10px}
+.has-video{position:relative;overflow:hidden}
+.section-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
+.has-video>.section-inner{position:relative;z-index:1}
+.video-toggle{position:absolute;right:16px;bottom:16px;z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(10,20,35,.72);color:#fff;font:14px/1 system-ui,sans-serif;cursor:pointer}
+.video-toggle::before{content:"❚❚"}
+.video-toggle.is-paused::before{content:"▶"}
+.video-toggle:focus-visible{outline:3px solid #fff;outline-offset:2px}
+.video-toggle[hidden]{display:none}
 .block-html{max-width:100%}
 .block-html img,.block-html video,.block-html table{max-width:100%}
 .block-html table{border-collapse:collapse}

public/assets/translate.js

@@ -26,6 +26,7 @@ export const FIELDS = {
   icon: [{ prop: 'label', label: 'Beschriftung', max: 120 }],
   progress: [{ prop: 'label', label: 'Beschriftung', max: 120 }],
   embed: [{ prop: 'title', label: 'Titel', max: 160 }, { prop: 'hint', label: 'Hinweis', max: 300, multiline: true }],
+  video: [{ prop: 'title', label: 'Titel', max: 160 }],
 };
 
 /** Felder der Seite selbst. `seoTitle` hat kein Gegenstück im Dokument der Hauptsprache. */

public/assets/video.js

@@ -0,0 +1,36 @@
+/*
+ * Schleifenvideos: im Hintergrund einer Sektion oder im Video-Baustein.
+ *
+ * Abgespielt wird erst von hier aus, nicht mit autoplay im HTML. So lädt die Seite zuerst ihren
+ * Inhalt, das Video folgt danach (preload="none"), und es läuft nur, solange es zu sehen ist.
+ * Wer „Bewegung reduzieren“ eingestellt hat oder Daten sparen will, bekommt das Standbild und kann
+ * das Video selbst starten. Der Knopf gehört dazu: Bewegung, die länger als fünf Sekunden läuft,
+ * muss sich anhalten lassen (WCAG 2.2.2). Ohne Skript bleibt das Standbild.
+ */
+const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+const saving = navigator.connection?.saveData === true;
+
+for (const video of document.querySelectorAll('[data-video-loop]')) {
+  const toggle = video.parentElement.querySelector(':scope > .video-toggle');
+  // Ein data-video-loop aus „Eigenes HTML“ hat keinen Knopf; ohne ihn bleibt es beim Standbild.
+  if (!toggle) continue;
+  let wanted = !reduced.matches && !saving;
+  let visible = false;
+  const paint = () => {
+    toggle.classList.toggle('is-paused', !wanted);
+    toggle.setAttribute('aria-label', wanted ? toggle.dataset.pause : toggle.dataset.play);
+  };
+  const sync = () => {
+    if (!wanted || !visible) { video.pause(); return; }
+    video.play().catch(error => {
+      // Ein Anhalten mitten im Starten ist kein Fehler. Verweigert der Browser das Abspielen,
+      // etwa im Stromsparmodus, zeigt der Knopf die Wahrheit.
+      if (error.name === 'NotAllowedError') { wanted = false; paint(); }
+    });
+  };
+  toggle.hidden = false;
+  toggle.addEventListener('click', () => { wanted = !wanted; paint(); sync(); });
+  reduced.addEventListener('change', () => { if (reduced.matches) { wanted = false; paint(); sync(); } });
+  new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; sync(); }).observe(video);
+  paint();
+}

scripts/zentrale-check.php

@@ -105,5 +105,37 @@ $umzug->melden();
 $neu = $pdo->query('SELECT domain, domain_vorher FROM installation')->fetch();
 $pruefe('www.kunde-zwei.de' === $neu['domain'] && 'kunde-eins.de' === $neu['domain_vorher'], 'Domainwechsel ist sichtbar');
 
+// PHP-Fassungen mit bekannter Lücke fallen auf; gepatchte, unbekannte und Vorabfassungen nicht.
+$pruefe(null !== Zentrale\Bestand::phpLuecke('8.4.22') && null !== Zentrale\Bestand::phpLuecke('8.1.30'), 'Ungepatchtes und veraltetes PHP gilt als unsicher');
+$pruefe(null === Zentrale\Bestand::phpLuecke('8.4.27') && null === Zentrale\Bestand::phpLuecke('8.6.0RC4') && null === Zentrale\Bestand::phpLuecke(''), 'Gepatchtes, neueres und unbekanntes PHP gilt nicht als unsicher');
+$pruefe(array_key_exists('php_luecke', $bestand->alle(null)[0] ?? []), 'Die Übersicht kennt den PHP-Zustand');
+
+// KantTresor (ADR 124): eigener Pfad, gleiches Verfahren, nie ein Auftrag. Die Gegenseite ist
+// Python (controlplane/zentrale.py in KantArchiv); hier wird sie mit denselben Feldern nachgestellt.
+$tresorId = bin2hex(random_bytes(16));
+$tresorSchluessel = bin2hex(random_bytes(32));
+$tresorMelden = static function (array $daten, ?string $schluessel = null) use ($api, $tresorSchluessel): array {
+    $body = (string) json_encode($daten, JSON_UNESCAPED_SLASHES);
+
+    return $api->meldenTresor($body, hash_hmac('sha256', $body, $schluessel ?? $tresorSchluessel), '198.51.100.4');
+};
+$tresorDaten = ['id' => $tresorId, 'adresse' => 'https://archiv.kunde-drei.de', 'fassung' => '1.82.0', 'laufzeit' => 'Python 3.12.7 · Django 5.2.8', 'datenbank' => 'postgresql', 'mandanten' => 3, 'stoerungen' => ['Objektspeicher'], 'speicher' => 93];
+$antwort = $tresorMelden([...$tresorDaten, 'schluessel' => $tresorSchluessel]);
+$pruefe(200 === $antwort['status'] && hash_equals(hash_hmac('sha256', $antwort['body'], $tresorSchluessel), (string) $antwort['signatur']), 'KantTresor-Meldung wird angenommen und unterschrieben beantwortet');
+$pruefe(!str_contains($antwort['body'], 'auftrag'), 'KantTresor bekommt nie einen Auftrag');
+$tresorZeile = $bestand->eine($tresorId, '1.82.0');
+$pruefe('kanttresor' === ($tresorZeile['produkt'] ?? null) && 3 === (int) $tresorZeile['mandanten'] && 'Objektspeicher' === $tresorZeile['stoerungen'], 'Mandanten und Störungen stehen in der Zentrale');
+$pruefe(true === $tresorZeile['gestoert'] && true === $tresorZeile['speicher_knapp'], 'Gestörter Dienst und knapper Speicher fallen auf');
+$pruefe(false === $tresorZeile['kann_update'] && null !== $bestand->beauftragen($tresorId, '1.83.0'), 'Für KantTresor lässt sich kein Update beauftragen');
+$pruefe(1 === count($bestand->alle(null, 'kanttresor')) && [] === array_filter($bestand->alle(null), static fn (array $i): bool => $i['id'] === $tresorId), 'KantSites- und KantTresor-Liste bleiben getrennt');
+$pruefe(200 === $tresorMelden([...$tresorDaten, 'stoerungen' => [], 'speicher' => 41])['status'] && false === $bestand->eine($tresorId, null)['gestoert'], 'Folgemeldung ohne Schlüssel, Störung behoben');
+$pruefe(403 === $tresorMelden($tresorDaten, str_repeat('0', 64))['status'], 'KantTresor-Meldung mit falscher Unterschrift wird abgewiesen');
+$pruefe(409 === $tresorMelden([...$tresorDaten, 'id' => bin2hex(random_bytes(16))])['status'], 'Unbekannte KantTresor-Kennung ohne Schlüssel bekommt 409');
+$kantsitesId = (string) $pdo->query("SELECT id FROM installation WHERE produkt = 'kantsites'")->fetchColumn();
+$kantsitesSchluessel = (string) $pdo->query("SELECT schluessel FROM installation WHERE produkt = 'kantsites'")->fetchColumn();
+$pruefe(403 === $tresorMelden([...$tresorDaten, 'id' => $kantsitesId], $kantsitesSchluessel)['status'], 'Eine KantSites-Kennung kann nicht als KantTresor melden');
+$tresorMelden([...$tresorDaten, 'id' => bin2hex(random_bytes(16)), 'schluessel' => $tresorSchluessel, 'fassung' => '1.83.1']);
+$pruefe('1.83.1' === $bestand->hoechsteFassung('kanttresor') && true === $bestand->eine($tresorId, '1.83.1')['veraltet'], 'Höchste gemeldete KantTresor-Fassung macht ältere zu veraltet');
+
 echo $fehler > 0 ? "\n{$fehler} Prüfung(en) fehlgeschlagen.\n" : "\nAlle Prüfungen bestanden.\n";
 exit($fehler > 0 ? 1 : 0);

src/Content/DocumentValidator.php

@@ -43,8 +43,10 @@ final class DocumentValidator
     public const V24_TYPES = ['html'];
     /** Schema v27 (ADR 111): die Sprachwahl, gefüllt aus den Sprachen, in denen die Seite vorliegt. */
     public const V27_TYPES = ['language'];
+    /** Schema v28: ein eigenes Video aus der Mediathek. */
+    public const V28_TYPES = ['video'];
     /** Die aktuelle Fassung des Dokumentschemas - dieselbe Zahl wie SCHEMA_VERSION in editor-model.js. */
-    public const SCHEMA_VERSION = 27;
+    public const SCHEMA_VERSION = 28;
 
     /**
      * @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
@@ -155,7 +157,7 @@ final class DocumentValidator
         // page: a deactivated plugin must never make stored content unreadable. Nothing from
         // props is rendered for such a block, so unvalidated values never reach the output.
         $plugin = $schemaVersion >= 4 && is_string($type) && 1 === preg_match('/^[a-z][a-z0-9]{1,30}\.[a-z][a-z0-9-]{1,40}$/D', $type);
-        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || ($schemaVersion >= 23 && in_array($type, self::V23_TYPES, true)) || ($schemaVersion >= 24 && in_array($type, self::V24_TYPES, true)) || ($schemaVersion >= 27 && in_array($type, self::V27_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
+        $this->require(in_array($type, ['section', 'row', 'column', 'heading', 'text', 'image', 'button'], true) || ($schemaVersion >= 3 && 'gallery' === $type) || ($schemaVersion >= 5 && 'postlist' === $type) || ($schemaVersion >= 6 && in_array($type, self::V6_TYPES, true)) || ($schemaVersion >= 28 && in_array($type, self::V28_TYPES, true)) || ($schemaVersion >= 7 && in_array($type, self::V7_TYPES, true)) || ($schemaVersion >= 8 && in_array($type, self::V8_TYPES, true)) || ($schemaVersion >= 9 && in_array($type, self::V9_TYPES, true)) || ($schemaVersion >= 11 && in_array($type, self::V11_TYPES, true)) || ($schemaVersion >= 14 && in_array($type, self::V14_TYPES, true)) || ($schemaVersion >= 15 && in_array($type, self::V15_TYPES, true)) || ($schemaVersion >= 18 && in_array($type, self::V18_TYPES, true)) || ($schemaVersion >= 19 && in_array($type, self::V19_TYPES, true)) || ($schemaVersion >= 23 && in_array($type, self::V23_TYPES, true)) || ($schemaVersion >= 24 && in_array($type, self::V24_TYPES, true)) || ($schemaVersion >= 27 && in_array($type, self::V27_TYPES, true)) || $plugin, 'Unknown block type. Preserve source until its plugin is available.');
         // An accordion entry only ever renders inside an accordion; at the top level or anywhere
         // else it would produce a details element without its group.
         $this->require('accordionitem' !== $type || 'accordion' === $parentType, 'An accordion entry belongs into an accordion.');
@@ -468,6 +470,22 @@ final class DocumentValidator
             $this->require(null === parse_url($url, PHP_URL_PORT) && null === parse_url($url, PHP_URL_USER), 'Die Adresse darf keinen Port und keine Zugangsdaten enthalten.');
             $this->require(is_int($props['height'] ?? null) && $props['height'] >= 150 && $props['height'] <= 1200, 'Die Höhe liegt zwischen 150 und 1200 Pixeln.');
         }
+        if ('video' === $type) {
+            // Nur eigene Dateien: die Richtlinie der Seite erlaubt Medien von der eigenen Adresse,
+            // und ein fremdes Video wäre ohnehin ein Fall für „Externer Inhalt“ mit Einwilligung.
+            $this->videoPath($props['src'] ?? '');
+            $this->videoPath($props['srcWebm'] ?? '');
+            if ('' !== ($props['poster'] ?? '')) {
+                $this->url($props['poster']);
+            }
+            $this->text($props['title'] ?? '', 160, true);
+            $this->require(in_array($props['mode'] ?? 'player', ['player', 'loop'], true), 'Ein Video ist ein Spieler oder eine Schleife.');
+        }
+        if ('section' === $type && (isset($props['backgroundVideo']) || isset($props['backgroundVideoWebm']))) {
+            $this->require($schemaVersion >= 28, 'Ein Hintergrundvideo braucht Schema v28.');
+            $this->videoPath($props['backgroundVideo'] ?? '');
+            $this->videoPath($props['backgroundVideoWebm'] ?? '');
+        }
         if ('html' === $type) {
             // Eigenes HTML geht unveraendert auf die Seite. Geprueft wird es hier, damit ein
             // unbrauchbarer Wert beim Speichern eine Meldung bekommt statt beim Ausliefern
@@ -567,6 +585,11 @@ final class DocumentValidator
         $this->require(is_string($value) && strlen($value) <= $max && ($emptyAllowed || '' !== trim($value)), 'Missing or oversized text.');
     }
 
+    private function videoPath(mixed $path): void
+    {
+        $this->require('' === $path || (is_string($path) && 1 === preg_match(VideoLibrary::PATH, $path)), 'Ein Video kommt aus der Mediathek.');
+    }
+
     private function url(mixed $url): void
     {
         $this->require(is_string($url) && strlen($url) <= 2048, 'Invalid URL.');

src/Content/Translations.php

@@ -47,6 +47,7 @@ final class Translations
         'icon' => ['label'],
         'progress' => ['label'],
         'embed' => ['title', 'hint'],
+        'video' => ['title'],
     ];
 
     /** Felder der Seite selbst und ihre Höchstlänge. */

src/Content/VideoLibrary.php

@@ -0,0 +1,148 @@
+<?php
+
+namespace App\Content;
+
+use App\Domain\StaleWrite;
+use Doctrine\DBAL\Connection;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+
+/**
+ * Videos neben den Bildern und PDFs der Mediathek.
+ *
+ * Wie ein PDF wird ein Video nicht umgerechnet, sondern so ausgeliefert, wie es kam: Auf dem
+ * Hosting gibt es kein ffmpeg, und PHP könnte das in der Laufzeit einer Anfrage auch nicht. Deshalb
+ * die Prüfung am Dateianfang statt an der Endung und beim Ausliefern Kopfzeilen, die den Browser
+ * nichts anderes darin sehen lassen als ein Video.
+ *
+ * Die Dateien liegen im Medienordner, als <id>.mp4 oder <id>.webm - so gehen sie mit jeder
+ * Sicherung und jedem Website-Paket mit.
+ */
+final class VideoLibrary
+{
+    /** Ein Hintergrund oder ein kurzer Film. Für Längeres ist ein Videodienst der bessere Weg. */
+    public const MAX_BYTES = 64 * 1024 * 1024;
+
+    /** Die Adresse eines Videos, so steht sie im Dokument. */
+    public const PATH = '#^/media/[a-f0-9]{32}\.(?:mp4|webm)$#D';
+
+    private const EXTENSIONS = ['video/mp4' => 'mp4', 'video/webm' => 'webm'];
+
+    public function __construct(private Connection $db, private string $directory)
+    {
+    }
+
+    /** @return list<array<string, mixed>> neueste zuerst */
+    public function list(bool $withArchived = true): array
+    {
+        return array_map($this->present(...), $this->db->fetchAllAssociative(
+            'SELECT * FROM video'.($withArchived ? '' : ' WHERE archived = 0').' ORDER BY created_at DESC, id DESC',
+        ));
+    }
+
+    public function find(string $id): ?array
+    {
+        if (!preg_match('/^[a-f0-9]{32}$/D', $id)) {
+            return null;
+        }
+        $row = $this->db->fetchAssociative('SELECT * FROM video WHERE id = ?', [$id]);
+
+        return $row ? $this->present($row) : null;
+    }
+
+    /** Soll diese Datei als Video behandelt werden? Der Inhalt entscheidet, die Endung ist Rückfall. */
+    public function claims(UploadedFile $file): bool
+    {
+        return null !== $this->mimeOf($file->getPathname())
+            || str_starts_with((string) $file->getMimeType(), 'video/')
+            || in_array(strtolower($file->getClientOriginalExtension()), ['mp4', 'm4v', 'webm', 'mov'], true);
+    }
+
+    public function upload(UploadedFile $file): array
+    {
+        if (!$file->isValid() || $file->getSize() > self::MAX_BYTES) {
+            throw new \InvalidArgumentException('Upload fehlgeschlagen. Maximal 64 MB pro Video; das PHP-Hosting kann ein kleineres Limit setzen.');
+        }
+        $mime = $this->mimeOf($file->getPathname());
+        if (null === $mime) {
+            throw new \InvalidArgumentException('Das ist kein abspielbares Video. Bitte eine MP4- oder WebM-Datei wählen; MOV spielen nicht alle Browser ab.');
+        }
+        if (!is_dir($this->directory) && !mkdir($this->directory, 0775, true) && !is_dir($this->directory)) {
+            throw new \RuntimeException('Medienordner ist nicht beschreibbar.');
+        }
+        $id = bin2hex(random_bytes(16));
+        $path = $this->path($id, self::EXTENSIONS[$mime]);
+        if (!@copy($file->getPathname(), $path) || !is_file($path)) {
+            throw new \RuntimeException('Das Video konnte nicht gespeichert werden.');
+        }
+        try {
+            $name = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
+            $title = mb_strcut(preg_replace('/[\x00-\x1F\x7F]/u', '', $name) ?: 'Video', 0, 160, 'UTF-8');
+            $row = ['id' => $id, 'title' => $title, 'mime' => $mime, 'bytes' => (int) filesize($path), 'archived' => 0, 'version' => 1, 'created_at' => gmdate('Y-m-d H:i:s')];
+            $this->db->insert('video', $row);
+        } catch (\Throwable $error) {
+            unlink($path);
+            throw $error;
+        }
+
+        return $this->present($row);
+    }
+
+    public function update(string $id, array $data): array
+    {
+        if (!is_string($data['title'] ?? null) || '' === trim($data['title']) || strlen($data['title']) > 160 || !is_bool($data['archived'] ?? null) || !is_int($data['version'] ?? null)) {
+            throw new \InvalidArgumentException('Titel (max. 160 Bytes) und Version prüfen.');
+        }
+        $count = $this->db->executeStatement('UPDATE video SET title = ?, archived = ?, version = version + 1 WHERE id = ? AND version = ?', [$data['title'], (int) $data['archived'], $id, $data['version']]);
+        if (1 !== $count) {
+            throw new StaleWrite();
+        }
+
+        return $this->find($id) ?? throw new StaleWrite();
+    }
+
+    /** Die Datei eines Videos, oder null. Archivierte werden weiter ausgeliefert, wie Bilder. */
+    public function file(string $id, string $extension): ?string
+    {
+        $item = $this->find($id);
+        if (null === $item || $extension !== self::EXTENSIONS[$item['mime']]) {
+            return null;
+        }
+        $path = $this->path($id, $extension);
+
+        return is_file($path) ? $path : null;
+    }
+
+    /**
+     * Der Typ nach den ersten Bytes. MP4 trägt ab Byte 4 das Kästchen „ftyp“, WebM beginnt mit dem
+     * EBML-Kopf und nennt seinen Dokumenttyp gleich danach. MOV hat auch „ftyp“, aber die Marke
+     * „qt“ - das spielen nicht alle Browser ab, also wird es abgewiesen statt still zu scheitern.
+     */
+    private function mimeOf(string $path): ?string
+    {
+        $head = (string) file_get_contents($path, false, null, 0, 4096);
+        if ('ftyp' === substr($head, 4, 4) && 'qt  ' !== substr($head, 8, 4)) {
+            return 'video/mp4';
+        }
+
+        return str_starts_with($head, "\x1A\x45\xDF\xA3") && str_contains($head, 'webm') ? 'video/webm' : null;
+    }
+
+    private function path(string $id, string $extension): string
+    {
+        return $this->directory.'/'.$id.'.'.$extension;
+    }
+
+    private function present(array $row): array
+    {
+        return [
+            'id' => $row['id'],
+            'title' => $row['title'],
+            'mime' => $row['mime'],
+            'bytes' => (int) $row['bytes'],
+            'archived' => (bool) $row['archived'],
+            'version' => (int) $row['version'],
+            'created_at' => $row['created_at'],
+            'src' => '/media/'.$row['id'].'.'.self::EXTENSIONS[$row['mime']],
+        ];
+    }
+}

src/Controller/MediaController.php

@@ -5,6 +5,7 @@ namespace App\Controller;
 use App\Content\DocumentLibrary;
 use App\Content\MediaLibrary;
 use App\Content\SiteSettings;
+use App\Content\VideoLibrary;
 use App\Domain\StaleWrite;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\BinaryFileResponse;
@@ -17,7 +18,7 @@ use Symfony\Component\Security\Csrf\CsrfTokenManagerInterface;
 
 final class MediaController extends AbstractController
 {
-    public function __construct(private MediaLibrary $media, private CsrfTokenManagerInterface $csrf, private SiteSettings $siteSettings, private DocumentLibrary $documents)
+    public function __construct(private MediaLibrary $media, private CsrfTokenManagerInterface $csrf, private SiteSettings $siteSettings, private DocumentLibrary $documents, private VideoLibrary $videos)
     {
     }
 
@@ -29,7 +30,7 @@ final class MediaController extends AbstractController
         $archived = $request->query->getBoolean('archiv');
         $query = mb_substr(trim($request->query->getString('q')), 0, 160);
         $library = $this->media->page($request->query->getInt('seite', 1), $archived, query: $query);
-        $view = ['library' => $library, 'archived' => $archived, 'query' => $query, 'documents' => $this->documents->list($archived)];
+        $view = ['library' => $library, 'archived' => $archived, 'query' => $query, 'documents' => $this->documents->list($archived), 'videos' => $this->videos->list($archived)];
         if ($request->isXmlHttpRequest()) {
             return $this->json([
                 'html' => $this->renderView('admin/media-results.html.twig', $view),
@@ -57,7 +58,11 @@ final class MediaController extends AbstractController
             try {
                 // Bilder und PDFs gehen durch dasselbe Feld. Welche Art es ist, entscheidet der
                 // Inhalt der Datei; die Endung zaehlt nur, wenn der Inhalt nichts sagt.
-                $this->isPdf($file) ? $this->documents->upload($file) : $this->media->upload($file);
+                match (true) {
+                    $this->isPdf($file) => $this->documents->upload($file),
+                    $this->videos->claims($file) => $this->videos->upload($file),
+                    default => $this->media->upload($file),
+                };
                 ++$done;
             } catch (\InvalidArgumentException $error) {
                 return $this->back($request, sprintf('%s (%s)%s', $error->getMessage(), $file->getClientOriginalName(), $done > 0 ? sprintf(' %d Datei(en) davor wurden hochgeladen.', $done) : ''));
@@ -120,6 +125,31 @@ final class MediaController extends AbstractController
         return $this->back($request, 'Die Angaben zum Dokument wurden gespeichert.', 'success');
     }
 
+    #[Route('/%kant.admin_path%/media/video/{id}', name: 'admin_video_save', requirements: ['id' => '[a-f0-9]{32}'], methods: ['POST'])]
+    public function formUpdateVideo(Request $request, string $id): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+        if (!$this->isCsrfTokenValid('media-form', $request->request->getString('_csrf_token'))) {
+            return $this->back($request, 'Deine Sitzung ist abgelaufen. Bitte melde dich erneut an.');
+        }
+        if (!$this->videos->find($id)) {
+            throw $this->createNotFoundException();
+        }
+        try {
+            $this->videos->update($id, [
+                'title' => $request->request->getString('title'),
+                'archived' => $request->request->getBoolean('archived'),
+                'version' => $request->request->getInt('version'),
+            ]);
+        } catch (StaleWrite) {
+            return $this->back($request, 'Das Video wurde inzwischen anderswo geändert. Lade die Seite neu und trage die Angaben erneut ein.');
+        } catch (\InvalidArgumentException $error) {
+            return $this->back($request, $error->getMessage());
+        }
+
+        return $this->back($request, 'Die Angaben zum Video wurden gespeichert.', 'success');
+    }
+
     private function isPdf(UploadedFile $file): bool
     {
         $mime = $file->getMimeType();
@@ -195,6 +225,36 @@ final class MediaController extends AbstractController
         }
     }
 
+    /** Die Videos fuer die Auswahl im Editor. */
+    #[Route('/%kant.admin_path%/api/videos', methods: ['GET'])]
+    public function listVideos(): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+
+        return $this->json(['items' => $this->videos->list(false), 'csrfToken' => $this->csrf->getToken('media')->getValue()]);
+    }
+
+    #[Route('/%kant.admin_path%/api/videos/upload', methods: ['POST'])]
+    public function uploadVideo(Request $request): Response
+    {
+        $this->denyAccessUnlessGranted('ROLE_EDITOR');
+        if (!$this->isCsrfTokenValid('media', $request->headers->get('X-CSRF-Token'))) {
+            return $this->json(['error' => 'Sitzung abgelaufen. Bitte erneut anmelden.'], 403);
+        }
+        try {
+            $file = $request->files->get('file');
+            if (!$file instanceof UploadedFile) {
+                throw new \InvalidArgumentException('Keine Datei empfangen. Bitte das PHP-Uploadlimit und die Dateigröße prüfen.');
+            }
+
+            return $this->json(['item' => $this->videos->upload($file)], 201);
+        } catch (\InvalidArgumentException $error) {
+            return $this->json(['error' => $error->getMessage()], 422);
+        } catch (\RuntimeException) {
+            return $this->json(['error' => 'Das Video konnte nicht gespeichert werden. Schreibrechte des Medienordners prüfen.'], 503);
+        }
+    }
+
     #[Route('/%kant.admin_path%/api/media/{id}', requirements: ['id' => '[a-f0-9]{32}'], methods: ['GET'])]
     public function read(string $id): Response
     {
@@ -324,6 +384,20 @@ final class MediaController extends AbstractController
         return new BinaryFileResponse($path, headers: ['Content-Type' => 'image/webp', 'X-Content-Type-Options' => 'nosniff', 'Cache-Control' => 'public, max-age=31536000, immutable', 'Content-Security-Policy' => "default-src 'none'"]);
     }
 
+    /**
+     * Ein Video, so wie es hochgeladen wurde.
+     *
+     * BinaryFileResponse beantwortet Range-Anfragen; ohne sie lässt Safari ein Video gar nicht
+     * abspielen. Die Datei ändert sich nie, ihre Adresse ist an die Kennung gebunden.
+     */
+    #[Route('/media/{id}.{extension}', name: 'video_serve', requirements: ['id' => '[a-f0-9]{32}', 'extension' => 'mp4|webm'], methods: ['GET'])]
+    public function serveVideo(string $id, string $extension): Response
+    {
+        $path = $this->videos->file($id, $extension) ?? throw $this->createNotFoundException();
+
+        return new BinaryFileResponse($path, headers: ['Content-Type' => 'video/'.$extension, 'X-Content-Type-Options' => 'nosniff', 'Cache-Control' => 'public, max-age=31536000, immutable', 'Content-Security-Policy' => "default-src 'none'"]);
+    }
+
     /**
      * Ein PDF, so wie es hochgeladen wurde.
      *

src/Controller/PageController.php

@@ -313,6 +313,7 @@ final class PageController extends AbstractController
         $documents = [$page['document'], ...array_values($areas), ...array_values($sections)];
         $needsSlider = (bool) array_filter($documents, fn (array $doc): bool => $this->hasType($doc, 'slider'));
         $needsMotion = (bool) array_filter($documents, fn (array $doc): bool => $this->hasEntrance($doc));
+        $needsVideo = (bool) array_filter($documents, fn (array $doc): bool => $this->hasLoopVideo($doc['blocks'] ?? []));
         // Tabs und vergroesserbare Bilder koennen auch im Kopf, im Fuss oder in einer verknuepften
         // Sektion stehen - das Skript und die Richtlinie dafuer richten sich nach allen Dokumenten.
         $needsTabs = (bool) array_filter($documents, fn (array $doc): bool => $this->hasType($doc, 'tabs'));
@@ -404,6 +405,7 @@ final class PageController extends AbstractController
             // Ein Slider mit automatischem Weiterblättern ist der zweite Baustein, der
             // dafür ein Skript braucht - nach demselben Muster wie die Tabs.
             'needsSlider' => $needsSlider,
+            'needsVideo' => $needsVideo,
             'needsMotion' => $needsMotion,
             'needsScrolled' => $needsScrolled,
             // Ein Bild, das sich vergroessern laesst, ist ohne Skript ein Verweis auf die
@@ -442,7 +444,7 @@ final class PageController extends AbstractController
         // Die Pruefung braucht ein Skript von Cloudflare und einen Rahmen dafuer. Beides wird nur
         // dort erlaubt, wo tatsaechlich ein Formular steht - nicht auf jeder Seite der Website.
         $mitTurnstile = $this->turnstile->isActive() && (bool) array_filter($documents, fn (array $doc): bool => $this->hasType($doc, 'form'));
-        $wantsScript = ($mitTurnstile || $needsTabs || $needsFormScript || [] !== $pluginAssets['scripts'] || [] !== $areaScripts || $needsSlider || $needsMotion || $needsScrolled || $needsZoom || $needsDocument || $needsConsent || [] !== $this->code->scriptsOf($page['document']));
+        $wantsScript = ($mitTurnstile || $needsTabs || $needsFormScript || [] !== $pluginAssets['scripts'] || [] !== $areaScripts || $needsSlider || $needsVideo || $needsMotion || $needsScrolled || $needsZoom || $needsDocument || $needsConsent || [] !== $this->code->scriptsOf($page['document']));
         $frames = $embeds['hosts'];
         if ($mitTurnstile) {
             $frames[] = 'challenges.cloudflare.com';
@@ -860,6 +862,21 @@ final class PageController extends AbstractController
         return $walk($document['blocks'] ?? []);
     }
 
+    /** Schleifenvideos brauchen video.js: es startet sie und gibt ihnen den Knopf zum Anhalten. */
+    private function hasLoopVideo(array $blocks): bool
+    {
+        foreach ($blocks as $block) {
+            $props = $block['props'] ?? [];
+            $loop = 'video' === ($block['type'] ?? null) && 'loop' === ($props['mode'] ?? null) && '' !== ($props['src'] ?? '');
+            $background = 'section' === ($block['type'] ?? null) && ('' !== ($props['backgroundVideo'] ?? '') || '' !== ($props['backgroundVideoWebm'] ?? ''));
+            if ($loop || $background || $this->hasLoopVideo($block['children'] ?? [])) {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
     private function hasType(array $document, string $type): bool
     {
         $found = false;

src/Ops/SitePackage.php

@@ -29,13 +29,13 @@ final class SitePackage
     public const MEDIA = 'medien/';
 
     /** Was ersetzt wird, in der Reihenfolge des Einfügens (revision gehört zu page). */
-    public const CONTENT_TABLES = ['page', 'revision', 'partial', 'menu', 'media', 'document', 'form', 'redirect', 'term', 'page_term', 'page_translation'];
+    public const CONTENT_TABLES = ['page', 'revision', 'partial', 'menu', 'media', 'document', 'video', 'form', 'redirect', 'term', 'page_term', 'page_translation'];
 
     /** Einstellungen dieser Installation, die ein Paket nie überschreibt: Zugangsdaten zu Diensten. */
     public const KEEP_SETTINGS = ['turnstile', 'turnstileSiteKey', 'turnstileSecret'];
 
     /** Dateinamen im Medienordner: Bildvarianten, PDFs, erzeugte Seitensymbole. Sonst nichts. */
-    public const MEDIA_NAME = '/^(?:[a-f0-9]{32}(?:-\d{1,5})?\.(?:webp|pdf)|favicon-\d{1,4}\.png)$/D';
+    public const MEDIA_NAME = '/^(?:[a-f0-9]{32}(?:-\d{1,5})?\.(?:webp|pdf|mp4|webm)|favicon-\d{1,4}\.png)$/D';
 
     private const MAX_FILES = 5000;
     private const MAX_FILE_BYTES = 64 * 1024 * 1024;
@@ -322,6 +322,8 @@ final class SitePackage
                 }
             }
         }
+        // Pakete von vor Schema v28 kennen die Tabelle noch nicht; sie sind trotzdem vollständig.
+        $tables['video'] ??= [];
         foreach (self::CONTENT_TABLES as $table) {
             if (!isset($tables[$table])) {
                 throw new InvalidPage(sprintf('Im Paket fehlt die Tabelle „%s“.', $table));

src/Twig/LanguageExtension.php

@@ -31,6 +31,9 @@ final class LanguageExtension extends AbstractExtension
             'Bildergalerie' => 'Image gallery',
             'Bild' => 'Image',
             'vergrößern' => 'enlarge',
+            'Video' => 'Video',
+            'Video anhalten' => 'Pause video',
+            'Video abspielen' => 'Play video',
             'Ansehen' => 'View',
             'Weiterlesen' => 'Read more',
             'Weitere Beiträge' => 'More posts',
@@ -131,6 +134,9 @@ final class LanguageExtension extends AbstractExtension
             'Bildergalerie' => 'Resim galerisi',
             'Bild' => 'Resim',
             'vergrößern' => 'büyüt',
+            'Video' => 'Video',
+            'Video anhalten' => 'Videoyu durdur',
+            'Video abspielen' => 'Videoyu oynat',
             'Ansehen' => 'İncele',
             'Weitere Beiträge' => 'Diğer yazılar',
             'Vorheriger Beitrag' => 'Önceki yazı',

templates/admin/media.html.twig

@@ -3,7 +3,7 @@
 {% block title %}Mediathek{% endblock %}
 {% block scripts %}<script type="module" src="/assets/media-drop.js?v={{ kant_version() }}"></script><script type="module" src="/assets/live-search.js?v={{ kant_version() }}"></script>{% endblock %}
 {% block heading %}Mediathek{% endblock %}
-{% block lead %}Alle Bilder und PDFs, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus. PDFs bleiben, wie sie sind, und lassen sich in jedem Linkziel wählen.{% endblock %}
+{% block lead %}Alle Bilder, PDFs und Videos, neueste zuerst. Beim Hochladen wird jedes Bild in WebP umgewandelt und in mehreren Breiten abgelegt; die Seite liefert dann die passende aus. PDFs und Videos bleiben, wie sie sind. PDFs lassen sich in jedem Linkziel wählen, Videos im Video-Baustein und als Hintergrund einer Sektion.{% endblock %}
 {% block content %}
 
 {% if is_granted('ROLE_EDITOR') %}
@@ -19,13 +19,13 @@
     <div class="dropzone" data-dropzone>
         <label class="dropzone-label" for="files">
             <span class="dropzone-icon" aria-hidden="true">▩</span>
-            <strong>Bilder oder PDFs hierher ziehen</strong>
+            <strong>Bilder, PDFs oder Videos hierher ziehen</strong>
             <span class="dropzone-hint">oder klicken, um Dateien zu wählen</span>
         </label>
-        <input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp,application/pdf,.pdf" multiple class="dropzone-input">
+        <input id="files" name="files[]" type="file" accept="image/jpeg,image/png,image/webp,application/pdf,.pdf,video/mp4,video/webm,.mp4,.webm" multiple class="dropzone-input">
     </div>
     <p class="dropzone-chosen" data-chosen role="status">Noch keine Datei gewählt.</p>
-    <p class="field-help">JPEG, PNG oder WebP bis 8 MB je Bild, PDF bis 20 MB. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen. Hochgeladene Dateien sind über ihre Adresse öffentlich – nichts Vertrauliches hochladen.</p>
+    <p class="field-help">JPEG, PNG oder WebP bis 8 MB je Bild, PDF bis 20 MB, MP4 oder WebM bis 64 MB. Mehrere Dateien sind möglich; das Hosting kann ein kleineres Limit setzen. Hochgeladene Dateien sind über ihre Adresse öffentlich – nichts Vertrauliches hochladen.</p>
     <button class="primary" type="submit">Hochladen</button>
 </form>
 {% endif %}
@@ -39,6 +39,50 @@
 {% include 'admin/search-feedback.html.twig' %}
 <div id="list-results" class="stack" role="region" aria-label="Suchergebnisse" tabindex="-1">{% include 'admin/media-results.html.twig' %}</div>
 
+<section class="stack" aria-labelledby="videos-heading">
+    <div class="section-head">
+        <h2 id="videos-heading">Videos <span class="count">{{ videos|length }}</span></h2>
+    </div>
+    {% if videos is empty %}
+    <div class="empty">
+        <h3>Keine Videos in der Mediathek.</h3>
+        <p>{{ is_granted('ROLE_EDITOR') ? 'Lade oben ein MP4 oder WebM hoch. Danach lässt es sich im Video-Baustein oder als Hintergrund einer Sektion wählen.' : 'Ein Redakteur kann Videos hochladen.' }}</p>
+    </div>
+    {% else %}
+    <div class="rows">
+        {% for item in videos %}
+        <article class="row row-stack">
+            <div class="row-line">
+                <span class="row-icon row-icon-text" aria-hidden="true">{{ item.mime == 'video/webm' ? 'WEBM' : 'MP4' }}</span>
+                <div class="row-main">
+                    <h3><a href="{{ item.src }}" target="_blank" rel="noopener">{{ item.title }}</a></h3>
+                    <p class="muted">{{ (item.bytes / 1048576)|number_format(1, ',') }} MB · <code>{{ item.src }}</code>{% if item.archived %} · archiviert{% endif %}</p>
+                </div>
+            </div>
+            {% if is_granted('ROLE_EDITOR') %}
+            <details class="sheet">
+                <summary aria-label="Angaben zu {{ item.title }}">Angaben</summary>
+                <div class="sheet-body">
+                    <form action="{{ path('admin_video_save', {id: item.id}) }}" method="post">
+                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('media-form') }}">
+                        <input type="hidden" name="version" value="{{ item.version }}">
+                        <input type="hidden" name="seite" value="{{ library.page }}"><input type="hidden" name="q" value="{{ query }}">
+                        <input type="hidden" name="archiv" value="{{ archived ? '1' : '' }}">
+                        <label for="video-title-{{ item.id }}">Titel</label>
+                        <input id="video-title-{{ item.id }}" name="title" maxlength="160" required value="{{ item.title }}">
+                        <label class="check-label" for="video-archived-{{ item.id }}"><input id="video-archived-{{ item.id }}" name="archived" type="checkbox" value="1"{{ item.archived ? ' checked' : '' }}> Archiviert</label>
+                        <p class="field-help">Archivierte Videos erscheinen nicht mehr in der Auswahl, bleiben aber erreichbar – eine Seite, die das Video zeigt, verliert es nicht.</p>
+                        <button class="primary" type="submit">Angaben speichern</button>
+                    </form>
+                </div>
+            </details>
+            {% endif %}
+        </article>
+        {% endfor %}
+    </div>
+    {% endif %}
+</section>
+
 {# Die PDFs stehen unter den Bildern und ohne Suche: es sind wenige, und ein Titel reicht, um
    eines wiederzufinden. Der Schalter für das Archiv oben gilt auch hier. #}
 <section class="stack" aria-labelledby="documents-heading">

templates/blocks/block.html.twig

@@ -8,11 +8,16 @@
 {% for key, value in layout.effects|default({}) %}{% set designClasses = designClasses ~ ' fx-' ~ key ~ '-' ~ value %}{% endfor %}
 {% if type in ['section', 'row', 'column'] %}
     {% set tag = type == 'section' ? 'section' : 'div' %}
-    <{{ tag }} id="{{ block.id }}" class="block-{{ type }} tone-{{ layout.tone|default('paper') }} width-{{ layout.width|default('normal') }}{{ designClasses }}{{ block.anchor|default('') ? ' has-anchor' : '' }}">
+    {% set backgroundVideo = type == 'section' ? props.backgroundVideo|default('') : '' %}
+    {% set backgroundWebm = type == 'section' ? props.backgroundVideoWebm|default('') : '' %}
+    <{{ tag }} id="{{ block.id }}" class="block-{{ type }} tone-{{ layout.tone|default('paper') }} width-{{ layout.width|default('normal') }}{{ designClasses }}{{ block.anchor|default('') ? ' has-anchor' : '' }}{{ backgroundVideo or backgroundWebm ? ' has-video' : '' }}">
         {% if block.anchor|default('') %}<span id="{{ block.anchor }}" class="block-anchor" aria-hidden="true"></span>{% endif %}
+        {% if backgroundVideo or backgroundWebm %}{# Dekoration: Die Sektion behält ihr Hintergrundbild, es bleibt stehen, bis das Video läuft. #}
+        <video class="section-video" muted loop playsinline preload="{{ editing|default(false) ? 'metadata' : 'none' }}" aria-hidden="true" tabindex="-1"{{ editing|default(false) ? '' : ' data-video-loop' }}>{% if backgroundWebm %}<source src="{{ backgroundWebm }}" type="video/webm">{% endif %}{% if backgroundVideo %}<source src="{{ backgroundVideo }}" type="{{ backgroundVideo ends with '.webm' ? 'video/webm' : 'video/mp4' }}">{% endif %}</video>{% endif %}
         {% if type == 'section' %}<div class="shell section-inner">{% endif %}
         {% for child in block.children|default([]) %}{% include 'blocks/block.html.twig' with {block: child, editing: editing|default(false), postLists: postLists|default({}), forms: forms|default({}), breadcrumbs: breadcrumbs|default([]), navigation: navigation|default({}), sections: sections|default({}), richText: richText|default(false), richHeadings: richHeadings|default(false), neighbours: neighbours|default({}), eagerImage: eagerImage|default(null), inHeader: inHeader|default(false)} only %}{% endfor %}
         {% if type == 'section' %}</div>{% endif %}
+        {% if (backgroundVideo or backgroundWebm) and not editing|default(false) %}{% include 'blocks/video-toggle.html.twig' only %}{% endif %}
     </{{ tag }}>
 {% elseif type == 'heading' %}
     <h{{ props.level }} id="{{ block.id }}" class="{{ designClasses|trim }}">{% if richHeadings|default(false) %}{{ props.text|raw }}{% else %}{{ props.text }}{% endif %}</h{{ props.level }}>
@@ -271,6 +276,17 @@
     </div>
     {% endif %}
     {% endif %}
+{% elseif type == 'video' %}
+    {% set source = props.src|default('') %}
+    {% if source == '' %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Video: unter Inhalt ein Video wählen.</p>{% endif %}
+    {% else %}
+    {% set looping = props.mode|default('player') == 'loop' %}
+    <figure id="{{ block.id }}" class="block-video{{ designClasses }}">
+        <video class="video-media"{% if looping %} muted loop playsinline preload="{{ editing|default(false) ? 'metadata' : 'none' }}"{{ editing|default(false) ? '' : ' data-video-loop' }}{% else %} controls playsinline preload="metadata"{% endif %}{% if props.poster|default('') %} poster="{{ props.poster }}"{% endif %}{% if props.title|default('') %} aria-label="{{ props.title }}"{% elseif looping %} aria-hidden="true"{% else %} aria-label="{{ 'Video'|kant_t }}"{% endif %}>{% if props.srcWebm|default('') %}<source src="{{ props.srcWebm }}" type="video/webm">{% endif %}<source src="{{ source }}" type="{{ source ends with '.webm' ? 'video/webm' : 'video/mp4' }}"></video>
+        {% if looping and not editing|default(false) %}{% include 'blocks/video-toggle.html.twig' only %}{% endif %}
+    </figure>
+    {% endif %}
 {% elseif type == 'html' %}
     {# Markup des Betreibers, unveraendert. Geprueft wurde es beim Speichern (CustomCode::checkHtml),
        setzen darf es nur ein Administrator - deshalb steht hier `raw` und keine Filterung. #}

templates/blocks/video-toggle.html.twig

@@ -0,0 +1,2 @@
+{# Sichtbar erst durch video.js - ohne Skript läuft auch nichts, das anzuhalten wäre. #}
+<button class="video-toggle" type="button" hidden aria-label="{{ 'Video anhalten'|kant_t }}" data-pause="{{ 'Video anhalten'|kant_t }}" data-play="{{ 'Video abspielen'|kant_t }}"></button>

templates/page.html.twig

@@ -67,6 +67,7 @@
     {% if needsTabs|default(false) %}<script src="/assets/tabs.js?v={{ kant_version() }}" defer></script>{% endif %}
     {% if needsFormScript|default(false) and not editing|default(false) %}<script src="/assets/form-steps.js?v={{ kant_version() }}" defer></script>{% endif %}
     {% if needsSlider|default(false) %}<script type="module" src="/assets/slider.js?v={{ kant_version() }}"></script>{% endif %}
+    {% if needsVideo|default(false) and not editing|default(false) %}<script type="module" src="/assets/video.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsMotion|default(false) %}<script type="module" src="/assets/motion.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsScrolled|default(false) %}<script type="module" src="/assets/scrolled.js?v={{ kant_version() }}"></script>{% endif %}
     {% if needsZoom|default(false) or needsDocument|default(false) %}<script src="/assets/lightbox.js?v={{ kant_version() }}" defer></script>{% endif %}

tests/CmsTest.php

@@ -24,6 +24,7 @@ use App\Content\StyleCompiler;
 use App\Content\StyleSchema;
 use App\Content\Theme;
 use App\Content\Turnstile;
+use App\Content\VideoLibrary;
 use App\Domain\InvalidDocument;
 use App\Domain\InvalidMenu;
 use App\Domain\InvalidPage;
@@ -1399,6 +1400,95 @@ final class CmsTest extends TestCase
         self::assertStringContainsString('<script src="/assets/lightbox.js?v=', $html);
     }
 
+    public function testAVideoFromTheLibraryPlaysAsBlockAndAsSectionBackground(): void
+    {
+        // Umut: „Baust du video embedding gleich ein" - der Hero von kant-it.de soll ein Video
+        // bekommen, ohne dass dafür Dateien von Hand auf den Server müssen.
+        $videos = new VideoLibrary($this->db, $this->path.'-media');
+        $file = tempnam(sys_get_temp_dir(), 'kant-video-');
+        try {
+            file_put_contents($file, '<html><script>alert(1)</script></html>');
+            try {
+                $videos->upload(new UploadedFile($file, 'film.mp4', test: true));
+                self::fail('Eine Datei, die kein Video ist, darf nicht als Video durchgehen.');
+            } catch (\InvalidArgumentException) {
+            }
+            file_put_contents($file, "\0\0\0\x14ftypqt  \0\0\0\0qt  ".str_repeat("\0", 64));
+            try {
+                $videos->upload(new UploadedFile($file, 'film.mov', test: true));
+                self::fail('MOV spielen nicht alle Browser ab und wird deshalb abgewiesen.');
+            } catch (\InvalidArgumentException) {
+            }
+            self::assertSame(0, (int) $this->db->fetchOne('SELECT COUNT(*) FROM video'));
+
+            file_put_contents($file, "\0\0\0\x18ftypmp42\0\0\0\0mp42isom".str_repeat('x', 2000));
+            $item = $videos->upload(new UploadedFile($file, 'Hero Loop.mp4', test: true));
+            file_put_contents($file, "\x1A\x45\xDF\xA3\x9F\x42\x86\x81\x01\x42\x82\x84webm".str_repeat('y', 2000));
+            $webm = $videos->upload(new UploadedFile($file, 'hero.bin', test: true));
+        } finally {
+            @unlink($file);
+        }
+        self::assertSame('Hero Loop', $item['title']);
+        self::assertSame('/media/'.$item['id'].'.mp4', $item['src']);
+        self::assertSame('/media/'.$webm['id'].'.webm', $webm['src']);
+
+        $antwort = $this->request($item['src']);
+        self::assertSame(200, $antwort->getStatusCode());
+        self::assertSame('video/mp4', $antwort->headers->get('Content-Type'));
+        self::assertSame('nosniff', $antwort->headers->get('X-Content-Type-Options'));
+        self::assertSame("default-src 'none'", $antwort->headers->get('Content-Security-Policy'));
+        self::assertSame('bytes', $antwort->headers->get('Accept-Ranges'));
+        // Dieselbe Kennung unter der falschen Endung gibt es nicht.
+        self::assertSame(404, $this->request('/media/'.$item['id'].'.webm')->getStatusCode());
+        self::assertSame(404, $this->request('/media/'.str_repeat('a', 32).'.mp4')->getStatusCode());
+
+        $document = DemoContent::starter('Startseite');
+        $document['schemaVersion'] = DocumentValidator::SCHEMA_VERSION;
+        $document['blocks'][0]['props'] = ['backgroundVideo' => $item['src'], 'backgroundVideoWebm' => $webm['src']];
+        $document['blocks'][] = ['id' => 'film', 'type' => 'video', 'props' => ['src' => $item['src'], 'mode' => 'player', 'title' => 'Unser Betrieb', 'poster' => '/media/'.str_repeat('b', 32).'/1600']];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $document, 0), 1);
+        $seite = $this->request('/');
+        $html = $seite->getContent();
+        self::assertStringContainsString('has-video', $html);
+        self::assertMatchesRegularExpression('#<video class="section-video"[^>]* muted loop playsinline preload="none"[^>]*data-video-loop#', $html);
+        // Das WebM steht zuerst: der Browser nimmt die erste Quelle, die er abspielen kann.
+        self::assertLessThan(strpos($html, 'src="'.$item['src'].'"'), strpos($html, 'src="'.$webm['src'].'"'));
+        self::assertStringContainsString('class="video-toggle"', $html);
+        self::assertStringContainsString('aria-label="Unser Betrieb"', $html);
+        self::assertMatchesRegularExpression('#<video class="video-media" controls playsinline preload="metadata" poster=#', $html);
+        self::assertStringContainsString('<script type="module" src="/assets/video.js?v=', $html);
+        self::assertStringContainsString("script-src 'self'", (string) $seite->headers->get('Content-Security-Policy'));
+
+        // Ein Spieler allein braucht kein Skript: die Seite bleibt bei script-src 'none'.
+        $spieler = DemoContent::starter('Startseite');
+        $spieler['schemaVersion'] = DocumentValidator::SCHEMA_VERSION;
+        $spieler['blocks'][] = ['id' => 'film', 'type' => 'video', 'props' => ['src' => $item['src'], 'mode' => 'player', 'title' => '']];
+        $version = $this->pages->findForEditor('page-1')['version'];
+        $this->pages->publish('page-1', $this->pages->saveDraft('page-1', $spieler, $version), $version + 1);
+        $ohne = $this->request('/');
+        self::assertStringNotContainsString('video.js', $ohne->getContent());
+        self::assertStringContainsString("script-src 'none'", (string) $ohne->headers->get('Content-Security-Policy'));
+
+        // Fremde Adressen, zu altes Schema und unbekannte Betriebsarten weist das Dokument ab.
+        $pruefer = new DocumentValidator();
+        foreach ([
+            ['video', ['src' => 'https://example.com/film.mp4'], DocumentValidator::SCHEMA_VERSION],
+            ['video', ['src' => '/media/../secret.mp4'], DocumentValidator::SCHEMA_VERSION],
+            ['video', ['src' => $item['src'], 'mode' => 'autoplay'], DocumentValidator::SCHEMA_VERSION],
+            ['video', ['src' => $item['src']], 27],
+        ] as [$type, $props, $schema]) {
+            $falsch = DemoContent::starter('Startseite');
+            $falsch['schemaVersion'] = $schema;
+            $falsch['blocks'][] = ['id' => 'film', 'type' => $type, 'props' => $props];
+            try {
+                $pruefer->validate($falsch);
+                self::fail('Abgewiesen werden muss: '.json_encode($props));
+            } catch (InvalidDocument) {
+                $this->addToAssertionCount(1);
+            }
+        }
+    }
+
     public function testAPdfFromTheLibraryIsALinkTargetAndOpensInTheViewer(): void
     {
         // Umut: „PDFs hochladen und als Button verlinken - und ein Inline-PDF-Viewer wie das

tests/TestSchema.php

@@ -24,6 +24,7 @@ use DoctrineMigrations\Version20260916000100;
 use DoctrineMigrations\Version20260917000100;
 use DoctrineMigrations\Version20261009000100;
 use DoctrineMigrations\Version20261012000100;
+use DoctrineMigrations\Version20261104000100;
 use Psr\Log\NullLogger;
 
 /**
@@ -59,6 +60,7 @@ final class TestSchema
             Version20260917000100::class,
             Version20261009000100::class,
             Version20261012000100::class,
+            Version20261104000100::class,
         ] as $migration) {
             (new $migration($db, new NullLogger()))->up($schema);
         }

zentrale/README.md

@@ -61,6 +61,27 @@ Einschränkungen:
   Besucher oder Cron-Aufruf das Update ab. So lange zeigt sie die Wartungsseite.
 - Ein abgeholter Auftrag ohne Ergebnis nach 2 Stunden erscheint als „keine Rückmeldung“.
 
+## KantTresor
+
+Der Reiter **KantTresor** (`/kanttresor`) zeigt die KantTresor-Instanzen. Ab KantTresor
+**1.82.0** meldet sich jede Instanz alle 15 Minuten über den beat-Task
+`controlplane.zentrale_melden` an `POST /api/kanttresor/melden` – gleiches Verfahren wie
+KantSites (Schlüssel bei der ersten Meldung, danach HMAC-Unterschrift in beide Richtungen).
+
+Übertragen werden: Adresse, Fassung, Python/Django, Datenbank, Anzahl aktiver Mandanten,
+Namen gestörter Dienste und belegter Speicher in Prozent. Keine Mandantennamen, Dokumente
+oder Zugangsdaten.
+
+Unterschiede zu KantSites:
+
+- **Kein Update von hier.** Die Zentrale gibt KantTresor nie einen Auftrag; aktualisiert wird
+  auf dem Server mit `./update.sh`.
+- „Aktuell“ und „veraltet“ richten sich nach der **höchsten gemeldeten Fassung** – die
+  KantArchiv-Releaseseite ist nicht öffentlich.
+- Statt der PHP-Kachel gibt es **„Dienst gestört oder Speicher knapp“** (ab 90 % belegt).
+- Abschalten pro Instanz: `ZENTRALE_URL=aus` in `.env.prod`. Instanzen mit
+  `DJANGO_DEBUG=True` oder nur lokaler Adresse melden nie.
+
 ## Fremde Installationen erkennen
 
 Jede Installation, der in der Detailansicht kein Kunde zugeordnet ist, steht als

zentrale/app/Ansicht.php

@@ -9,7 +9,8 @@ namespace Zentrale;
  */
 final class Ansicht
 {
-    public function __construct(private string $csrf)
+    /** @param string $pfad die Übersicht, auf die adresse() zeigt (KantSites oder KantTresor) */
+    public function __construct(private string $csrf, private string $pfad = '/')
     {
     }
 
@@ -43,7 +44,7 @@ final class Ansicht
     {
         $werte = array_filter($werte, static fn (mixed $wert): bool => null !== $wert && '' !== $wert && 1 !== $wert);
 
-        return '/'.([] === $werte ? '' : '?'.http_build_query($werte));
+        return $this->pfad.([] === $werte ? '' : '?'.http_build_query($werte));
     }
 
     /** Ein Zeitpunkt in deutscher Ortszeit. */

zentrale/app/Anwendung.php

@@ -37,8 +37,8 @@ final class Anwendung
             return;
         }
 
-        if ('/api/melden' === $pfad) {
-            $this->api($methode);
+        if ('/api/melden' === $pfad || '/api/kanttresor/melden' === $pfad) {
+            $this->api($methode, '/api/melden' === $pfad ? 'kantsites' : 'kanttresor');
 
             return;
         }
@@ -77,7 +77,8 @@ final class Anwendung
         $bestand = new Bestand($this->db);
 
         match (true) {
-            '/' === $pfad && 'GET' === $methode => $this->uebersicht($bestand, $fassungen),
+            '/' === $pfad && 'GET' === $methode => $this->uebersicht($bestand, $fassungen->neueste(), 'kantsites'),
+            '/kanttresor' === $pfad && 'GET' === $methode => $this->uebersicht($bestand, $this->tresorNeueste($bestand), 'kanttresor'),
             '/installation' === $pfad && 'GET' === $methode => $this->detail($bestand, $fassungen),
             '/auftrag' === $pfad && 'POST' === $methode => $this->auftrag($bestand, $fassungen),
             '/auftrag/alle' === $pfad && 'POST' === $methode => $this->alleAuftraege($bestand, $fassungen),
@@ -90,7 +91,7 @@ final class Anwendung
         };
     }
 
-    private function api(string $methode): void
+    private function api(string $methode, string $produkt): void
     {
         header('Content-Type: application/json; charset=UTF-8');
         if ('POST' !== $methode) {
@@ -100,7 +101,8 @@ final class Anwendung
 
             return;
         }
-        $antwort = (new Api($this->db))->melden(
+        $api = new Api($this->db);
+        $antwort = ('kanttresor' === $produkt ? $api->meldenTresor(...) : $api->melden(...))(
             (string) file_get_contents('php://input', false, null, 0, 16385),
             (string) ($_SERVER['HTTP_X_KANTSITES_SIGNATUR'] ?? ''),
             (string) ($_SERVER['REMOTE_ADDR'] ?? ''),
@@ -112,10 +114,23 @@ final class Anwendung
         echo $antwort['body'];
     }
 
-    private function uebersicht(Bestand $bestand, Fassungen $fassungen): void
+    /**
+     * KantTresor hat keine öffentliche Releaseseite; die höchste gemeldete Fassung gilt als neueste.
+     *
+     * @return array{version: string}|null
+     */
+    private function tresorNeueste(Bestand $bestand): ?array
     {
-        $neueste = $fassungen->neueste();
-        $alle = $bestand->alle($neueste['version'] ?? null);
+        $hoechste = $bestand->hoechsteFassung('kanttresor');
+
+        return null === $hoechste ? null : ['version' => $hoechste];
+    }
+
+    /** @param array{version: string}|null $neueste */
+    private function uebersicht(Bestand $bestand, ?array $neueste, string $produkt): void
+    {
+        $tresor = 'kanttresor' === $produkt;
+        $alle = $bestand->alle($neueste['version'] ?? null, $produkt);
 
         // Die Zähler oben sind zugleich die Filter; sie zählen immer den ganzen Bestand.
         $filter = [
@@ -124,6 +139,11 @@ final class Anwendung
             'still' => static fn (array $i): bool => $i['still'],
             'unbekannt' => static fn (array $i): bool => $i['unbekannt'],
         ];
+        if ($tresor) {
+            $filter['gestoert'] = static fn (array $i): bool => $i['gestoert'];
+        } else {
+            $filter['php'] = static fn (array $i): bool => null !== $i['php_luecke'];
+        }
         $zahlen = ['alle' => count($alle)];
         foreach ($filter as $name => $passt) {
             $zahlen[$name] = count(array_filter($alle, $passt));
@@ -141,7 +161,7 @@ final class Anwendung
             if ('' === $suche) {
                 return true;
             }
-            foreach (['domain', 'domain_vorher', 'adresse', 'notiz', 'fassung', 'ip'] as $feld) {
+            foreach (['domain', 'domain_vorher', 'adresse', 'notiz', 'fassung', 'php', 'laufzeit', 'stoerungen', 'ip'] as $feld) {
                 if (null !== $i[$feld] && false !== mb_stripos((string) $i[$feld], $suche)) {
                     return true;
                 }
@@ -154,17 +174,20 @@ final class Anwendung
         $seiten = max(1, (int) ceil(count($treffer) / $proSeite));
         $seite = min($seiten, max(1, (int) ($_GET['seite'] ?? 1)));
 
-        $namen = ['aktuell' => 'aktuell', 'veraltet' => 'veraltet', 'still' => 'ohne Meldung seit 48 h', 'unbekannt' => 'ohne Kundenzuordnung'];
+        $namen = ['aktuell' => 'aktuell', 'veraltet' => 'veraltet', 'still' => 'ohne Meldung seit 48 h', 'unbekannt' => 'ohne Kundenzuordnung', 'php' => 'PHP mit Sicherheitslücke', 'gestoert' => 'Dienst gestört oder Speicher knapp'];
         $von = [] === $treffer ? 0 : ($seite - 1) * $proSeite + 1;
         $bis = min(count($treffer), $seite * $proSeite);
-        $trefferText = [] === $treffer ? 'Keine Treffer.' : sprintf('%d–%d von %d %s', $von, $bis, count($treffer), 1 === count($treffer) ? 'Installation' : 'Installationen')
+        $einheit = $tresor ? (1 === count($treffer) ? 'Instanz' : 'Instanzen') : (1 === count($treffer) ? 'Installation' : 'Installationen');
+        $trefferText = [] === $treffer ? 'Keine Treffer.' : sprintf('%d–%d von %d %s', $von, $bis, count($treffer), $einheit)
             .(null !== $gewaehlt ? ' · Filter: '.$namen[$gewaehlt] : '')
             .('' !== $suche ? ' · Suche: „'.$suche.'“' : '');
 
         // Die Live-Suche holt nur die Liste; ohne JavaScript kommt die ganze Seite.
         $teil = 'liste' === ($_GET['teil'] ?? null);
         $this->zeigen($teil ? '_liste' : 'uebersicht', [
-            'titel' => 'Installationen',
+            'titel' => $tresor ? 'KantTresor' : 'Installationen',
+            'produkt' => $produkt,
+            'pfad' => $tresor ? '/kanttresor' : '/',
             'trefferText' => $trefferText,
             'neueste' => $neueste,
             'installationen' => array_slice($treffer, ($seite - 1) * $proSeite, $proSeite),
@@ -175,20 +198,22 @@ final class Anwendung
             'seiten' => $seiten,
             'zahlen' => $zahlen,
             // Verstummte bleiben außen vor: Sie holen den Auftrag womöglich nie ab. Wartende haben schon einen.
-            'aktualisierbar' => array_values(array_filter($alle, static fn (array $i): bool => $i['kann_update'] && !$i['still'] && 'wartet' !== ($i['auftrag_zustand']['art'] ?? null))),
+            'aktualisierbar' => $tresor ? [] : array_values(array_filter($alle, static fn (array $i): bool => $i['kann_update'] && !$i['still'] && 'wartet' !== ($i['auftrag_zustand']['art'] ?? null))),
         ], true, $teil);
     }
 
     private function detail(Bestand $bestand, Fassungen $fassungen): void
     {
-        $neueste = $fassungen->neueste();
-        $eine = $bestand->eine((string) ($_GET['id'] ?? ''), $neueste['version'] ?? null);
+        $id = (string) ($_GET['id'] ?? '');
+        $produkt = $bestand->produkt($id);
+        $neueste = 'kanttresor' === $produkt ? $this->tresorNeueste($bestand) : $fassungen->neueste();
+        $eine = $bestand->eine($id, $neueste['version'] ?? null);
         if (null === $eine) {
             $this->nichtGefunden();
 
             return;
         }
-        $this->zeigen('installation', ['titel' => $eine['domain'], 'i' => $eine, 'neueste' => $neueste]);
+        $this->zeigen('installation', ['titel' => $eine['domain'], 'i' => $eine, 'neueste' => $neueste, 'produkt' => $eine['produkt']]);
     }
 
     private function auftrag(Bestand $bestand, Fassungen $fassungen): void
@@ -243,9 +268,10 @@ final class Anwendung
 
             return;
         }
+        $produkt = $bestand->produkt($id);
         $bestand->entfernen($id);
         $this->hinweis('Eintrag entfernt. Meldet sich die Installation wieder, erscheint sie neu.', 'ok');
-        $this->weiter('/');
+        $this->weiter('kanttresor' === $produkt ? '/kanttresor' : '/');
     }
 
     private function fassungNeu(Fassungen $fassungen): void
@@ -372,20 +398,21 @@ final class Anwendung
     private function zeigen(string $vorlage, array $daten, bool $angemeldet = true, bool $ohneRahmen = false): void
     {
         header('Content-Type: text/html; charset=UTF-8');
+        $v = new Ansicht((string) ($_SESSION['csrf'] ?? ''), (string) ($daten['pfad'] ?? '/'));
         if ($ohneRahmen) {
-            echo (new Ansicht((string) ($_SESSION['csrf'] ?? '')))->vorlage($this->wurzel.'/app/vorlagen/'.$vorlage.'.php', $daten);
+            echo $v->vorlage($this->wurzel.'/app/vorlagen/'.$vorlage.'.php', $daten);
 
             return;
         }
         $hinweis = $_SESSION['hinweis'] ?? null;
         unset($_SESSION['hinweis']);
-        $v = new Ansicht((string) ($_SESSION['csrf'] ?? ''));
         $inhalt = $v->vorlage($this->wurzel.'/app/vorlagen/'.$vorlage.'.php', $daten);
         echo $v->vorlage($this->wurzel.'/app/vorlagen/rahmen.php', [
             'titel' => $daten['titel'] ?? 'Zentrale',
             'inhalt' => $inhalt,
             'hinweis' => $hinweis,
             'konto' => $angemeldet ? ($_SESSION['konto'] ?? null) : null,
+            'produkt' => $daten['produkt'] ?? null,
         ]);
     }
 }

zentrale/app/Api.php

@@ -11,6 +11,10 @@ namespace Zentrale;
  * Schlüssel mit; danach muss jede Meldung damit unterschrieben sein (HMAC-SHA256 über den
  * Rohtext, Kopfzeile X-KantSites-Signatur). Jede Antwort ist ebenso unterschrieben, damit die
  * Installation nur Aufträge von hier annimmt.
+ *
+ * POST /api/kanttresor/melden nimmt auf dieselbe Weise die Meldung einer KantTresor-Instanz an
+ * (ADR 124) - mit eigenen Angaben und nie mit einem Auftrag: KantTresor wird auf dem Server
+ * mit ./update.sh aktualisiert.
  */
 final class Api
 {
@@ -36,36 +40,17 @@ final class Api
         if (is_string($pruef)) {
             return $this->fehler(400, $pruef);
         }
-        $signatur = strtolower(trim($signatur));
-
-        $gespeichert = $this->db->prepare('SELECT * FROM installation WHERE id = ?');
-        $gespeichert->execute([$daten['id']]);
-        $installation = $gespeichert->fetch() ?: null;
-        $mitgebracht = is_string($daten['schluessel'] ?? null) && 1 === preg_match('/^[a-f0-9]{64}$/D', $daten['schluessel']) ? $daten['schluessel'] : null;
-
-        if (null === $installation) {
-            if (null === $mitgebracht) {
-                // Die Installation hält sich für angemeldet, hier ist sie unbekannt: Sie schickt
-                // daraufhin ihren Schlüssel noch einmal.
-                return $this->fehler(409, 'Diese Installation ist hier nicht bekannt.');
-            }
-            $schluessel = $mitgebracht;
-        } else {
-            $schluessel = (string) $installation['schluessel'];
-            if (null !== $mitgebracht && !hash_equals($schluessel, $mitgebracht)) {
-                return $this->fehler(403, 'Diese Kennung gehört zu einer anderen Installation.');
-            }
-        }
-        if (!hash_equals(hash_hmac('sha256', $body, $schluessel), $signatur)) {
-            return $this->fehler(403, 'Die Unterschrift stimmt nicht.');
+        $anmeldung = $this->anmeldung($daten, $body, $signatur, 'kantsites');
+        if (isset($anmeldung['status'])) {
+            return $anmeldung;
         }
+        ['installation' => $installation, 'schluessel' => $schluessel] = $anmeldung;
 
         $jetzt = Datenbank::jetzt();
-        $domain = strtolower((string) parse_url($daten['adresse'], PHP_URL_HOST));
         $update = is_array($daten['update'] ?? null) ? $daten['update'] : [];
         $werte = [
             'adresse' => $daten['adresse'],
-            'domain' => $domain,
+            'domain' => strtolower((string) parse_url($daten['adresse'], PHP_URL_HOST)),
             'fassung' => $daten['fassung'],
             'php' => mb_substr((string) ($daten['php'] ?? ''), 0, 20),
             'datenbank' => mb_substr((string) ($daten['datenbank'] ?? ''), 0, 20),
@@ -80,18 +65,7 @@ final class Api
 
         $this->db->beginTransaction();
         try {
-            if (null === $installation) {
-                $sql = 'INSERT INTO installation (id, schluessel, erste_meldung, '.implode(', ', array_keys($werte)).') VALUES (?, ?, ?, '.implode(', ', array_fill(0, count($werte), '?')).')';
-                $this->db->prepare($sql)->execute([$daten['id'], $schluessel, $jetzt, ...array_values($werte)]);
-            } else {
-                // Meldet sich dieselbe Kennung unter einer anderen Domain, wurde die Installation
-                // kopiert oder umgezogen. Beides will man sehen.
-                if ($installation['domain'] !== $domain) {
-                    $werte['domain_vorher'] = $installation['domain'];
-                }
-                $sql = 'UPDATE installation SET '.implode(', ', array_map(static fn (string $spalte): string => $spalte.' = ?', array_keys($werte))).' WHERE id = ?';
-                $this->db->prepare($sql)->execute([...array_values($werte), $daten['id']]);
-            }
+            $this->speichern($daten['id'], $schluessel, $installation, $werte);
 
             $ergebnis = $daten['auftrag'] ?? null;
             if (is_array($ergebnis) && is_int($ergebnis['id'] ?? null) && is_bool($ergebnis['ok'] ?? null)) {
@@ -117,6 +91,113 @@ final class Api
         return ['status' => 200, 'body' => $antwort, 'signatur' => hash_hmac('sha256', $antwort, $schluessel)];
     }
 
+    /**
+     * Die Meldung einer KantTresor-Instanz: Stand, Mandantenzahl, gestörte Dienste, Speicher.
+     * Die Antwort enthält nie einen Auftrag.
+     *
+     * @return array{status: int, body: string, signatur: ?string}
+     */
+    public function meldenTresor(string $body, string $signatur, string $ip): array
+    {
+        if (strlen($body) > self::GROESSTE_MELDUNG) {
+            return $this->fehler(413, 'Die Meldung ist zu groß.');
+        }
+        $daten = json_decode($body, true);
+        if (!is_array($daten)) {
+            return $this->fehler(400, 'Die Meldung ist kein JSON.');
+        }
+        $pruef = $this->pruefen($daten);
+        if (is_string($pruef)) {
+            return $this->fehler(400, $pruef);
+        }
+        $anmeldung = $this->anmeldung($daten, $body, $signatur, 'kanttresor');
+        if (isset($anmeldung['status'])) {
+            return $anmeldung;
+        }
+        ['installation' => $installation, 'schluessel' => $schluessel] = $anmeldung;
+
+        $stoerungen = is_array($daten['stoerungen'] ?? null) ? array_slice(array_values(array_filter($daten['stoerungen'], 'is_string')), 0, 10) : [];
+        $mandanten = $daten['mandanten'] ?? null;
+        $speicher = $daten['speicher'] ?? null;
+        $werte = [
+            'produkt' => 'kanttresor',
+            'adresse' => $daten['adresse'],
+            'domain' => strtolower((string) parse_url($daten['adresse'], PHP_URL_HOST)),
+            'fassung' => $daten['fassung'],
+            'laufzeit' => mb_substr((string) ($daten['laufzeit'] ?? ''), 0, 60),
+            'datenbank' => mb_substr((string) ($daten['datenbank'] ?? ''), 0, 20),
+            'mandanten' => is_int($mandanten) && $mandanten >= 0 && $mandanten <= 100000 ? $mandanten : null,
+            'stoerungen' => mb_substr(implode(', ', array_map(static fn (string $s): string => mb_substr(trim($s), 0, 60), $stoerungen)), 0, 300),
+            'speicher' => is_int($speicher) && $speicher >= 0 && $speicher <= 100 ? $speicher : null,
+            'ip' => mb_substr($ip, 0, 45),
+            'letzte_meldung' => Datenbank::jetzt(),
+        ];
+        $this->speichern($daten['id'], $schluessel, $installation, $werte);
+
+        $antwort = '{"ok":true}';
+
+        return ['status' => 200, 'body' => $antwort, 'signatur' => hash_hmac('sha256', $antwort, $schluessel)];
+    }
+
+    /**
+     * Wer meldet sich? Beim ersten Kontakt mit Schlüssel, danach nur mit gültiger Unterschrift.
+     *
+     * @param array<string, mixed> $daten
+     *
+     * @return array{installation: ?array<string, mixed>, schluessel: string}|array{status: int, body: string, signatur: null}
+     */
+    private function anmeldung(array $daten, string $body, string $signatur, string $produkt): array
+    {
+        $signatur = strtolower(trim($signatur));
+        $gespeichert = $this->db->prepare('SELECT * FROM installation WHERE id = ?');
+        $gespeichert->execute([$daten['id']]);
+        $installation = $gespeichert->fetch() ?: null;
+        $mitgebracht = is_string($daten['schluessel'] ?? null) && 1 === preg_match('/^[a-f0-9]{64}$/D', $daten['schluessel']) ? $daten['schluessel'] : null;
+
+        if (null === $installation) {
+            if (null === $mitgebracht) {
+                // Die Installation hält sich für angemeldet, hier ist sie unbekannt: Sie schickt
+                // daraufhin ihren Schlüssel noch einmal.
+                return $this->fehler(409, 'Diese Installation ist hier nicht bekannt.');
+            }
+            $schluessel = $mitgebracht;
+        } else {
+            $schluessel = (string) $installation['schluessel'];
+            if (null !== $mitgebracht && !hash_equals($schluessel, $mitgebracht)) {
+                return $this->fehler(403, 'Diese Kennung gehört zu einer anderen Installation.');
+            }
+        }
+        if (!hash_equals(hash_hmac('sha256', $body, $schluessel), $signatur)) {
+            return $this->fehler(403, 'Die Unterschrift stimmt nicht.');
+        }
+        if (null !== $installation && $produkt !== $installation['produkt']) {
+            return $this->fehler(403, 'Diese Kennung gehört zu einem anderen Produkt.');
+        }
+
+        return ['installation' => $installation, 'schluessel' => $schluessel];
+    }
+
+    /**
+     * @param array<string, mixed>|null $installation
+     * @param array<string, mixed>      $werte        mit letzte_meldung
+     */
+    private function speichern(string $id, string $schluessel, ?array $installation, array $werte): void
+    {
+        if (null === $installation) {
+            $sql = 'INSERT INTO installation (id, schluessel, erste_meldung, '.implode(', ', array_keys($werte)).') VALUES (?, ?, ?, '.implode(', ', array_fill(0, count($werte), '?')).')';
+            $this->db->prepare($sql)->execute([$id, $schluessel, $werte['letzte_meldung'], ...array_values($werte)]);
+
+            return;
+        }
+        // Meldet sich dieselbe Kennung unter einer anderen Domain, wurde die Installation
+        // kopiert oder umgezogen. Beides will man sehen.
+        if ($installation['domain'] !== $werte['domain']) {
+            $werte['domain_vorher'] = $installation['domain'];
+        }
+        $sql = 'UPDATE installation SET '.implode(', ', array_map(static fn (string $spalte): string => $spalte.' = ?', array_keys($werte))).' WHERE id = ?';
+        $this->db->prepare($sql)->execute([...array_values($werte), $id]);
+    }
+
     /** @param array<string, mixed> $daten */
     private function pruefen(array $daten): ?string
     {

zentrale/app/Bestand.php

@@ -15,14 +15,31 @@ final class Bestand
     /** Ein abgeholter Auftrag ohne Ergebnis nach so vielen Stunden: keine Rückmeldung. */
     public const AUFTRAG_STUNDEN = 2;
 
+    /**
+     * Erste PHP-Fassung je Zweig ohne bekannte kritische Lücke (zuletzt php2shell,
+     * CVE-2026-109618/-109619, 21.10.2026). Bei der nächsten PHP-Sicherheitsmeldung hier nachziehen.
+     */
+    public const PHP_SICHER = ['8.2' => '8.2.35', '8.3' => '8.3.36', '8.4' => '8.4.27', '8.5' => '8.5.12'];
+
+    /** Bis hierher gibt es keine Sicherheitsupdates mehr. */
+    public const PHP_ALT_BIS = '8.1';
+
     public function __construct(private \PDO $db)
     {
     }
 
+    /** Ab so viel Prozent belegtem Speicher gilt eine KantTresor-Instanz als knapp. */
+    public const SPEICHER_KNAPP = 90;
+
+    /** Die Produkte, die sich melden, mit ihrer Übersicht. */
+    public const PRODUKTE = ['kantsites' => 'KantSites', 'kanttresor' => 'KantTresor'];
+
     /** @return list<array<string, mixed>> */
-    public function alle(?string $neueste): array
+    public function alle(?string $neueste, string $produkt = 'kantsites'): array
     {
-        $zeilen = $this->db->query('SELECT * FROM installation ORDER BY domain, erste_meldung')->fetchAll();
+        $abfrage = $this->db->prepare('SELECT * FROM installation WHERE produkt = ? ORDER BY domain, erste_meldung');
+        $abfrage->execute([$produkt]);
+        $zeilen = $abfrage->fetchAll();
         // Natürlich sortiert und ohne www: kunde-2 vor kunde-10, www.ebsolar.de bei e.
         usort($zeilen, static fn (array $a, array $b): int => strnatcasecmp(preg_replace('/^www\./', '', (string) $a['domain']), preg_replace('/^www\./', '', (string) $b['domain'])));
         $auftraege = [];
@@ -33,6 +50,34 @@ final class Bestand
         return array_map(fn (array $zeile): array => $this->anreichern($zeile, $auftraege[$zeile['id']] ?? null, $neueste), $zeilen);
     }
 
+    /**
+     * KantTresor hat keine öffentliche Releaseseite: Als neueste Fassung gilt die höchste, die
+     * eine Instanz meldet. Wer dahinter liegt, ist veraltet.
+     */
+    public function hoechsteFassung(string $produkt): ?string
+    {
+        $abfrage = $this->db->prepare("SELECT fassung FROM installation WHERE produkt = ? AND fassung <> 'unbekannt'");
+        $abfrage->execute([$produkt]);
+        $hoechste = null;
+        foreach ($abfrage->fetchAll(\PDO::FETCH_COLUMN) as $fassung) {
+            if (null === $hoechste || version_compare((string) $fassung, $hoechste, '>')) {
+                $hoechste = (string) $fassung;
+            }
+        }
+
+        return $hoechste;
+    }
+
+    /** Zu welchem Produkt gehört diese Kennung? */
+    public function produkt(string $id): ?string
+    {
+        $abfrage = $this->db->prepare('SELECT produkt FROM installation WHERE id = ?');
+        $abfrage->execute([$id]);
+        $produkt = $abfrage->fetchColumn();
+
+        return false === $produkt ? null : (string) $produkt;
+    }
+
     /** @return array<string, mixed>|null */
     public function eine(string $id, ?string $neueste): ?array
     {
@@ -108,7 +153,10 @@ final class Bestand
         // Ein wartender Auftrag lässt sich noch ändern; ein abgeholter läuft.
         $laeuft = 'laeuft' === ($zustand['art'] ?? null);
 
+        $tresor = 'kanttresor' === $zeile['produkt'];
+
         $grund = match (true) {
+            $tresor => 'KantTresor wird auf dem Server mit ./update.sh aktualisiert, nicht von hier.',
             null === $neueste => 'Die neueste Fassung ist gerade nicht bekannt.',
             !$veraltet => 'Diese Installation ist auf dem neuesten Stand.',
             'git' === $zeile['art'] => 'Eine Git-Arbeitskopie wird über Git aktualisiert, nicht aus der Ferne.',
@@ -126,9 +174,34 @@ final class Bestand
             'auftrag_zustand' => $zustand,
             'kann_update' => '' === $grund,
             'kein_update_grund' => $grund,
+            'php_luecke' => $tresor ? null : self::phpLuecke((string) $zeile['php']),
+            'speicher_knapp' => null !== $zeile['speicher'] && (int) $zeile['speicher'] >= self::SPEICHER_KNAPP,
+            'gestoert' => '' !== (string) $zeile['stoerungen'] || (null !== $zeile['speicher'] && (int) $zeile['speicher'] >= self::SPEICHER_KNAPP),
         ];
     }
 
+    /**
+     * Warum die gemeldete PHP-Fassung als unsicher gilt, oder null. Unbekannte und neuere
+     * Zweige (etwa 8.6-Vorabfassungen) gelten nicht als unsicher.
+     */
+    public static function phpLuecke(string $php): ?string
+    {
+        if (1 !== preg_match('/^(\d+)\.(\d+)\.(\d+)/', $php, $teile)) {
+            return null;
+        }
+        $zweig = $teile[1].'.'.$teile[2];
+        $fassung = $zweig.'.'.$teile[3];
+        if (version_compare($zweig, self::PHP_ALT_BIS, '<=')) {
+            return sprintf('PHP %s bekommt keine Sicherheitsupdates mehr – auf PHP %s umstellen.', $zweig, self::PHP_SICHER['8.4']);
+        }
+        $sicher = self::PHP_SICHER[$zweig] ?? null;
+        if (null !== $sicher && version_compare($fassung, $sicher, '<')) {
+            return sprintf('PHP %s hat eine bekannte kritische Sicherheitslücke – mindestens %s nötig.', $fassung, $sicher);
+        }
+
+        return null;
+    }
+
     /**
      * @param array<string, mixed> $auftrag
      *

zentrale/app/Datenbank.php

@@ -47,6 +47,15 @@ final class Datenbank
             )',
             'CREATE INDEX auftrag_installation ON auftrag (installation, id)',
         ],
+        // KantTresor meldet sich ebenfalls (ADR 124). Bestehende Zeilen sind KantSites.
+        2 => [
+            'ALTER TABLE installation ADD COLUMN produkt TEXT NOT NULL DEFAULT \'kantsites\'',
+            'ALTER TABLE installation ADD COLUMN laufzeit TEXT NOT NULL DEFAULT \'\'',
+            'ALTER TABLE installation ADD COLUMN mandanten INTEGER',
+            'ALTER TABLE installation ADD COLUMN stoerungen TEXT NOT NULL DEFAULT \'\'',
+            'ALTER TABLE installation ADD COLUMN speicher INTEGER',
+            'CREATE INDEX installation_produkt ON installation (produkt)',
+        ],
     ];
 
     public static function oeffnen(string $datei): \PDO

zentrale/app/vorlagen/_liste.php

@@ -1,14 +1,46 @@
 <?php /** @var Zentrale\Ansicht $v */ ?>
 <div id="liste" tabindex="-1" data-treffer="<?= $v->e($trefferText) ?>">
+<?php $tresor = 'kanttresor' === $produkt; ?>
 <?php if (0 === $zahlen['alle']) { ?>
   <div class="karte leer">
     <h2>Noch keine Meldung</h2>
-    <p>Sobald eine KantSites-Installation ab Fassung 1.36.0 läuft, meldet sie sich hier – spätestens 15 Minuten nach dem ersten Besuch oder Cron-Aufruf.</p>
+    <?php if ($tresor) { ?>
+      <p>Sobald eine KantTresor-Instanz ab Fassung 1.82.0 läuft, meldet sie sich hier – alle 15 Minuten über den Hintergrunddienst (beat).</p>
+    <?php } else { ?>
+      <p>Sobald eine KantSites-Installation ab Fassung 1.36.0 läuft, meldet sie sich hier – spätestens 15 Minuten nach dem ersten Besuch oder Cron-Aufruf.</p>
+    <?php } ?>
   </div>
 <?php } elseif (0 === $treffer) { ?>
   <div class="karte leer">
     <h2>Nichts gefunden</h2>
-    <p>Keine Installation passt zu Suche und Filter. <a href="/">Alle anzeigen</a></p>
+    <p>Keine <?= $tresor ? 'Instanz' : 'Installation' ?> passt zu Suche und Filter. <a href="<?= $v->e($pfad) ?>">Alle anzeigen</a></p>
+  </div>
+<?php } elseif ($tresor) { ?>
+  <div class="tabelle-rahmen">
+  <table class="tabelle">
+    <caption class="unsichtbar">Gemeldete KantTresor-Instanzen, Seite <?= $seite ?> von <?= $seiten ?></caption>
+    <thead>
+      <tr><th scope="col">Domain</th><th scope="col">Kunde</th><th scope="col">Fassung</th><th scope="col">Mandanten</th><th scope="col">Speicher</th><th scope="col">Letzte Meldung</th><th scope="col">Zustand</th></tr>
+    </thead>
+    <tbody>
+    <?php foreach ($installationen as $i) { ?>
+      <tr>
+        <th scope="row" data-label="Domain"><a href="/installation?id=<?= $v->e(rawurlencode($i['id'])) ?>"><?= $v->e($i['domain']) ?></a>
+          <?php if (null !== $i['domain_vorher']) { ?><span class="klein">vorher <?= $v->e($i['domain_vorher']) ?></span><?php } ?></th>
+        <td data-label="Kunde"><?= $i['unbekannt'] ? '<span class="marke-fremd">Unbekannt</span>' : $v->e($i['notiz']) ?></td>
+        <td data-label="Fassung"><span class="fassung <?= $i['veraltet'] ? 'f-alt' : 'f-ok' ?>"><?= $v->e($i['fassung']) ?></span></td>
+        <td data-label="Mandanten"><?= $v->e($i['mandanten'] ?? '–') ?></td>
+        <td data-label="Speicher"><?php if (null === $i['speicher']) { ?>–<?php } else { ?><span class="<?= $i['speicher_knapp'] ? 'knapp' : '' ?>"><?= (int) $i['speicher'] ?> % belegt</span><?php } ?></td>
+        <td data-label="Letzte Meldung"><span class="<?= $i['still'] ? 'still' : '' ?>"><?= $v->e($v->vor($i['alter'])) ?></span></td>
+        <td data-label="Zustand">
+          <?php if ('' !== (string) $i['stoerungen']) { ?><span class="pille p-fehler">Gestört: <?= $v->e($i['stoerungen']) ?></span> <?php } ?>
+          <?php if ($i['speicher_knapp']) { ?><span class="pille p-warn">Speicher knapp</span> <?php } ?>
+          <?php if (!$i['gestoert']) { ?><span class="pille p-ok">Alle Dienste laufen</span><?php } ?>
+        </td>
+      </tr>
+    <?php } ?>
+    </tbody>
+  </table>
   </div>
 <?php } else { ?>
   <div class="tabelle-rahmen">
@@ -26,8 +58,9 @@
         <td data-label="Fassung"><span class="fassung <?= $i['veraltet'] ? 'f-alt' : 'f-ok' ?>"><?= $v->e($i['fassung']) ?></span><?php if ('git' === $i['art']) { ?> <span class="klein">Git</span><?php } ?></td>
         <td data-label="Letzte Meldung"><span class="<?= $i['still'] ? 'still' : '' ?>"><?= $v->e($v->vor($i['alter'])) ?></span></td>
         <td data-label="Zustand">
+          <?php if (null !== $i['php_luecke']) { ?><span class="pille p-fehler" title="<?= $v->e($i['php_luecke']) ?>">PHP <?= $v->e($i['php']) ?> unsicher</span> <?php } ?>
           <?php if ($i['wartung']) { ?><span class="pille p-warn">Wartung</span> <?php } ?>
-          <?php if (null !== $i['auftrag_zustand']) { ?><span class="pille p-<?= $v->e($i['auftrag_zustand']['art']) ?>"><?= $v->e($i['auftrag_zustand']['text']) ?></span><?php } elseif (!$i['wartung']) { ?><span class="klein">–</span><?php } ?>
+          <?php if (null !== $i['auftrag_zustand']) { ?><span class="pille p-<?= $v->e($i['auftrag_zustand']['art']) ?>"><?= $v->e($i['auftrag_zustand']['text']) ?></span><?php } elseif (!$i['wartung'] && null === $i['php_luecke']) { ?><span class="klein">–</span><?php } ?>
         </td>
         <td class="aktion">
           <?php if ($i['kann_update'] && null !== $neueste && 'wartet' !== ($i['auftrag_zustand']['art'] ?? null)) { ?>
@@ -43,7 +76,8 @@
     </tbody>
   </table>
   </div>
-  <?php if ($seiten > 1) { ?>
+<?php } ?>
+  <?php if ($treffer > 0 && $seiten > 1) { ?>
     <nav class="seiten" aria-label="Seiten">
       <?php $basis = ['q' => $suche, 'filter' => $filter]; ?>
       <?php if ($seite > 1) { ?><a class="knopf knopf-leise" href="<?= $v->e($v->adresse([...$basis, 'seite' => $seite - 1])) ?>" rel="prev">← Zurück</a><?php } ?>
@@ -62,5 +96,4 @@
       <?php if ($seite < $seiten) { ?><a class="knopf knopf-leise" href="<?= $v->e($v->adresse([...$basis, 'seite' => $seite + 1])) ?>" rel="next">Weiter →</a><?php } ?>
     </nav>
   <?php } ?>
-<?php } ?>
 </div>

zentrale/app/vorlagen/installation.php

@@ -1,11 +1,37 @@
 <?php /** @var Zentrale\Ansicht $v */ ?>
-<p class="zurueck"><a href="/">← Alle Installationen</a></p>
+<?php $tresor = 'kanttresor' === $i['produkt']; ?>
+<p class="zurueck"><?php if ($tresor) { ?><a href="/kanttresor">← Alle KantTresor-Instanzen</a><?php } else { ?><a href="/">← Alle Installationen</a><?php } ?></p>
 <div class="titelzeile">
   <h1><?= $v->e($i['domain']) ?></h1>
   <?php if ($i['unbekannt']) { ?><span class="marke-fremd">Unbekannt</span><?php } ?>
 </div>
 
 <div class="raster">
+<?php if ($tresor) { ?>
+  <section class="karte" aria-labelledby="t-stand">
+    <h2 id="t-stand">Stand</h2>
+    <dl class="fakten">
+      <dt>Adresse</dt><dd><a href="<?= $v->e($i['adresse']) ?>" rel="noopener noreferrer"><?= $v->e($i['adresse']) ?></a></dd>
+      <?php if (null !== $i['domain_vorher']) { ?><dt>Vorher gemeldet als</dt><dd><?= $v->e($i['domain_vorher']) ?></dd><?php } ?>
+      <dt>Fassung</dt><dd><span class="fassung <?= $i['veraltet'] ? 'f-alt' : 'f-ok' ?>"><?= $v->e($i['fassung']) ?></span><?= $i['veraltet'] && null !== $neueste ? ' – höchste gemeldete ist '.$v->e($neueste['version']) : '' ?></dd>
+      <dt>Laufzeit</dt><dd><?= $v->e($i['laufzeit'] ?: '–') ?></dd>
+      <dt>Datenbank</dt><dd><?= $v->e($i['datenbank'] ?: '–') ?></dd>
+      <dt>Mandanten</dt><dd><?= $v->e($i['mandanten'] ?? '–') ?></dd>
+      <dt>Letzte Meldung</dt><dd><?= $v->e($v->zeit($i['letzte_meldung'])) ?> (<?= $v->e($v->vor($i['alter'])) ?>)<?= $i['still'] ? ' – <strong>seit über 48 Stunden still</strong>' : '' ?></dd>
+      <dt>Erste Meldung</dt><dd><?= $v->e($v->zeit($i['erste_meldung'])) ?></dd>
+      <dt>IP-Adresse</dt><dd><?= $v->e($i['ip'] ?: '–') ?></dd>
+    </dl>
+  </section>
+
+  <section class="karte" aria-labelledby="t-betrieb">
+    <h2 id="t-betrieb">Betrieb</h2>
+    <dl class="fakten">
+      <dt>Dienste</dt><dd><?php if ('' !== (string) $i['stoerungen']) { ?><span class="pille p-fehler">Gestört: <?= $v->e($i['stoerungen']) ?></span><?php } else { ?><span class="pille p-ok">Alle Dienste laufen</span><?php } ?></dd>
+      <dt>Speicher</dt><dd><?php if (null === $i['speicher']) { ?>–<?php } else { ?><span class="<?= $i['speicher_knapp'] ? 'knapp' : '' ?>"><?= (int) $i['speicher'] ?> % belegt</span><?= $i['speicher_knapp'] ? ' – <strong>knapp</strong>' : '' ?><?php } ?></dd>
+    </dl>
+    <p class="klein abstand">Stand der letzten Meldung. Aktualisiert wird KantTresor auf dem Server mit <code>./update.sh</code>, nicht von hier.</p>
+  </section>
+<?php } else { ?>
   <section class="karte" aria-labelledby="t-stand">
     <h2 id="t-stand">Stand</h2>
     <dl class="fakten">
@@ -13,7 +39,8 @@
       <?php if (null !== $i['domain_vorher']) { ?><dt>Vorher gemeldet als</dt><dd><?= $v->e($i['domain_vorher']) ?></dd><?php } ?>
       <dt>Fassung</dt><dd><span class="fassung <?= $i['veraltet'] ? 'f-alt' : 'f-ok' ?>"><?= $v->e($i['fassung']) ?></span><?= $i['veraltet'] && null !== $neueste ? ' – neueste ist '.$v->e($neueste['version']) : '' ?></dd>
       <dt>Aktualisiert über</dt><dd><?= 'git' === $i['art'] ? 'Git-Arbeitskopie' : 'Releasearchiv' ?></dd>
-      <dt>PHP</dt><dd><?= $v->e($i['php'] ?: '–') ?></dd>
+      <dt>PHP</dt><dd><?php if (null !== $i['php_luecke']) { ?><span class="pille p-fehler"><?= $v->e($i['php']) ?> unsicher</span>
+        <span class="klein block"><?= $v->e($i['php_luecke']) ?> Das Update macht der Hoster bzw. das Hosting-Panel, nicht KantSites.</span><?php } else { ?><?= $v->e($i['php'] ?: '–') ?><?php } ?></dd>
       <dt>Datenbank</dt><dd><?= $v->e($i['datenbank'] ?: '–') ?></dd>
       <dt>Wartungsseite</dt><dd><?= $i['wartung'] ? 'an' : 'aus' ?></dd>
       <dt>Letzte Meldung</dt><dd><?= $v->e($v->zeit($i['letzte_meldung'])) ?> (<?= $v->e($v->vor($i['alter'])) ?>)<?= $i['still'] ? ' – <strong>seit über 48 Stunden still</strong>' : '' ?></dd>
@@ -51,6 +78,7 @@
       </form>
     <?php } ?>
   </section>
+<?php } ?>
 
   <section class="karte" aria-labelledby="t-kunde">
     <h2 id="t-kunde">Kunde</h2>
@@ -65,6 +93,7 @@
   </section>
 </div>
 
+<?php if (!$tresor) { ?>
 <section class="karte" aria-labelledby="t-verlauf">
   <h2 id="t-verlauf">Aufträge</h2>
   <?php if ([] === $i['verlauf']) { ?>
@@ -87,6 +116,7 @@
     </div>
   <?php } ?>
 </section>
+<?php } ?>
 
 <details class="karte gefahr">
   <summary>Eintrag entfernen</summary>

zentrale/app/vorlagen/rahmen.php

@@ -6,8 +6,8 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow">
 <title><?= $v->e($titel) ?> · KantSites Zentrale</title>
-<link rel="stylesheet" href="/app.css?v=3">
-<script src="/app.js?v=1" defer></script>
+<link rel="stylesheet" href="/app.css?v=4">
+<script src="/app.js?v=2" defer></script>
 <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%23173f6b'/%3E%3Cpath d='M9 8v16M9 16l9-8M12.5 13l7 11' stroke='%23fff' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E">
 </head>
 <body>
@@ -24,6 +24,15 @@
     <?php } ?>
   </div>
 </header>
+<?php if (null !== $konto) { ?>
+  <nav class="reiter" aria-label="Produkte">
+    <ul class="reiter-innen">
+      <?php foreach (['kantsites' => ['/', 'KantSites'], 'kanttresor' => ['/kanttresor', 'KantTresor']] as $name => [$ziel, $text]) { ?>
+        <li><a href="<?= $ziel ?>"<?= $produkt === $name ? ' aria-current="page"' : '' ?>><?= $text ?></a></li>
+      <?php } ?>
+    </ul>
+  </nav>
+<?php } ?>
 <main id="inhalt" class="seite" tabindex="-1">
   <?php if (null !== $hinweis) { ?>
     <p class="hinweis hinweis-<?= $v->e($hinweis['art']) ?>" role="<?= 'fehler' === $hinweis['art'] ? 'alert' : 'status' ?>"><?= $v->e($hinweis['text']) ?></p>

zentrale/app/vorlagen/uebersicht.php

@@ -1,11 +1,16 @@
 <?php /** @var Zentrale\Ansicht $v */ ?>
+<?php $tresor = 'kanttresor' === $produkt; ?>
 <div class="titelzeile">
-  <h1>Installationen</h1>
-  <form method="post" action="/fassung" class="neueste">
-    <?= $v->csrf() ?>
-    <span>Neueste Fassung: <strong><?= null === $neueste ? 'unbekannt' : $v->e($neueste['version']) ?></strong></span>
-    <button type="submit" class="knopf knopf-leise">Neu abfragen</button>
-  </form>
+  <h1><?= $tresor ? 'KantTresor-Instanzen' : 'Installationen' ?></h1>
+  <?php if ($tresor) { ?>
+    <p class="neueste">Höchste gemeldete Fassung: <strong><?= null === $neueste ? 'unbekannt' : $v->e($neueste['version']) ?></strong></p>
+  <?php } else { ?>
+    <form method="post" action="/fassung" class="neueste">
+      <?= $v->csrf() ?>
+      <span>Neueste Fassung: <strong><?= null === $neueste ? 'unbekannt' : $v->e($neueste['version']) ?></strong></span>
+      <button type="submit" class="knopf knopf-leise">Neu abfragen</button>
+    </form>
+  <?php } ?>
 </div>
 
 <?php
@@ -16,6 +21,11 @@ $kacheln = [
     'still' => ['z-still', 'ohne Meldung seit 48 h', $zahlen['still']],
     'unbekannt' => ['z-fremd', 'ohne Kundenzuordnung', $zahlen['unbekannt']],
 ];
+if ($tresor) {
+    $kacheln['gestoert'] = ['z-fremd', 'Dienst gestört oder Speicher knapp', $zahlen['gestoert']];
+} else {
+    $kacheln['php'] = ['z-fremd', 'PHP mit Sicherheitslücke', $zahlen['php']];
+}
 ?>
 <nav aria-label="Nach Zustand filtern">
   <ul class="zahlen">
@@ -39,13 +49,13 @@ $kacheln = [
 <?php } ?>
 
 <?php if ($zahlen['alle'] > 0) { ?>
-  <form method="get" action="/" class="suche" role="search">
+  <form method="get" action="<?= $v->e($pfad) ?>" class="suche" role="search">
     <?php if (null !== $filter) { ?><input type="hidden" name="filter" value="<?= $v->e($filter) ?>"><?php } ?>
     <label for="q">Suchen</label>
     <div class="suche-zeile">
-      <input id="q" name="q" type="search" value="<?= $v->e($suche) ?>" placeholder="Domain, Kunde, Fassung oder IP" autocomplete="off" aria-describedby="treffer" aria-controls="liste">
+      <input id="q" name="q" type="search" value="<?= $v->e($suche) ?>" placeholder="<?= $tresor ? 'Domain, Kunde, Fassung, Störung oder IP' : 'Domain, Kunde, Fassung, PHP oder IP' ?>" autocomplete="off" aria-describedby="treffer" aria-controls="liste">
       <button type="submit" class="knopf">Suchen</button>
-      <a class="knopf knopf-leise zuruecksetzen" href="/"<?= '' === $suche && null === $filter ? ' hidden' : '' ?>>Zurücksetzen</a>
+      <a class="knopf knopf-leise zuruecksetzen" href="<?= $v->e($pfad) ?>"<?= '' === $suche && null === $filter ? ' hidden' : '' ?>>Zurücksetzen</a>
     </div>
     <p class="klein" id="treffer" role="status"><?= $v->e($trefferText) ?></p>
   </form>

zentrale/public/app.css

@@ -181,3 +181,10 @@ input[type="text"]:focus-visible, input[type="password"]:focus-visible { border-
 
 #liste:focus { outline: none; }
 #liste[aria-busy="true"] { opacity: .6; transition: opacity .15s; }
+
+.reiter { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
+.reiter-innen { max-width: 1180px; margin: 0 auto; padding: 0 16px; list-style: none; display: flex; gap: 4px; overflow-x: auto; }
+.reiter a { display: block; padding: 12px 14px 10px; color: var(--leise); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
+.reiter a:hover { color: var(--marke); }
+.reiter a[aria-current="page"] { color: var(--marke); border-bottom-color: var(--marke); }
+.knapp { color: var(--warn); font-weight: 600; }

zentrale/public/app.js

@@ -98,7 +98,7 @@
     feld.value = '';
     const filter = filterFeld();
     if (filter) filter.remove();
-    laden(new URL('/', location.href), 'push');
+    laden(new URL(form.action, location.href), 'push');
     feld.focus();
   });