Add an own-HTML block, and build the DEEG offers page on the embed block

Umut asked for a block that takes custom HTML, and for an iframe on a new DEEG offers page. Only one of those was missing. New core block "Eigenes HTML" (document schema v24): one property, the markup, up to 20.000 characters, written to the page unchanged. Changing it is reserved for administrators and compared against what is stored - on saving, on saving an area, and on restoring an older revision - exactly like an own script. <script> and <iframe> are refused with the way to the right place instead of being swallowed by the content security policy: scripts belong in the script field, frames in the "Externer Inhalt" block, because only that one asks for consent and puts the host into frame-src (ADR 106). DEEG: /angebote existed as a draft with placeholder text. It is now built like the legal pages - small caps line, large light heading, lead on the tinted band - with the IS24 result list below it and a line pointing to the portal and to the contact form. Navigation and the offers band on the home page point there. The consent question is switched on, so the frame loads only after the visitor agrees, and both the banner and the placeholder carry the site's own shapes and colours. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-16 08:27:43 +02:00
1 parent 6b1aa50d02
commit 59a40157a4
@@ -4,6 +4,12 @@ Selbst betreibbares Block-CMS für PHP-Webhosting mit visuellem Editor nach dem

 Die übernommenen Originaldokumente sind `AGENTS.md` und `ENTWICKLUNGSPLAN.md`. Den tatsächlichen Stand enthält `docs/STATUS.md`, Entscheidungen und Datenmodell stehen in `docs/ARCHITECTURE.md`.

+## Eigenes HTML und eingebettete Seiten (ab 1.20.0)
+
+Der Baustein **Eigenes HTML** (Werkzeugkasten, Gruppe „Seite und Daten“) nimmt Markup auf, das unverändert auf der Seite landet – eigene Tabellen, fremde Widgets, Auszeichnungen, die es als Baustein nicht gibt. Ändern darf ihn nur ein **Administrator**, genau wie das Feld „Eigenes Skript“; für alle anderen ist er sichtbar und schreibgeschützt, und der Server weist eine Änderung ohnehin ab. Zwei Tags nimmt er nicht an: `<script>` gehört unter „Erweitert“ in „Eigenes Skript“, und ein `<iframe>` in den Baustein **Externer Inhalt** – nur der fragt vorher um Einwilligung und trägt den Anbieter in die Sicherheitsrichtlinie ein (ADR 106).
+
+Am eingebetteten Rahmen lässt sich alles gestalten, was dieser Website gehört: Höhe als Eigenschaft, Abstände, Breite, Rand und Ecken über Design-Tokens und freie Stile, dazu eigenes CSS am Block (`& iframe{…}`) und für den Platzhalter vor der Einwilligung (`&.embed-blocked`, `& .embed-title`, `& .consent-button`). **Was im Rahmen steht, gehört dem Anbieter** – daran kommt kein CSS dieser Website heran, das trennt der Browser zwischen zwei Herkünften. Den Einwilligungsbalken selbst gestaltet man unter **Einstellungen** (Form und vier Farben).
+
 ## Adresse mit oder ohne www, Rollen wie versprochen, Gesamtprüfung (ab 1.17.0)

 **Eine Adresse.** `SITE_ORIGIN` in `.env` entscheidet, ob die Website mit oder ohne `www` heißt; die andere Schreibweise leitet die Anwendung selbst mit 301 dorthin um (auch die Verwaltung), ein fremder Host bleibt erreichbar. `php bin/console cms:site:origin https://www.meine-firma.de` prüft und schreibt die Einstellung, der Bildschirm „System“ zeigt sie und warnt, wenn die Verwaltung gerade unter einer anderen Adresse läuft. Der www-Block in `public/.htaccess` ist weg.
@@ -2,6 +2,18 @@

 Stand: 15.09.2026. Arbeitstitel KantSites; Produktname offen.

+## ADR 106 – „Eigenes HTML“ als Baustein, und warum der Rahmen trotzdem „Externer Inhalt“ bleibt (16.09.2026)
+
+Umut: „Als Baustein im Editor, dass man individuelles HTML einfügen kann. Z. B. möchte ich eine neue Angebotsseite bei DEEG, da soll ein iframe rein.“ Das sind zwei Wünsche, und nur einer davon fehlte.
+
+**Den Rahmen gab es schon.** Der Baustein `embed` („Externer Inhalt“, Schema v14) bettet eine fremde Seite ein: Adresse, Titel, Anbieter, Höhe – und davor die Einwilligungsfrage. Vor der Einwilligung wird nichts geladen, kein Bild und keine Anfrage; erst danach kommt der Host in `frame-src` der Sicherheitsrichtlinie. Ein `<iframe>`, das jemand als rohes Markup einfügt, hätte beides nicht: keine Frage, und der Browser lädt es gar nicht erst, weil `frame-src` den Host nicht kennt. Deshalb ist `<iframe>` im HTML-Baustein eine Fehlermeldung mit dem Weg zum richtigen Baustein – nicht etwas, das man einfügen kann und das dann schweigend nichts tut. Dasselbe gilt für `<script>`: das Feld „Eigenes Skript“ unter „Erweitert“ liefert es als eigene Datei aus, inline würde die Richtlinie es ohnehin blockieren.
+
+**Der Baustein (Schema v24).** `html` mit einer einzigen Eigenschaft: das Markup, bis 20.000 Zeichen, unverändert ausgegeben. Es gibt keine Filterliste – wer ihn setzen darf, ist die eigentliche Antwort, und die ist dieselbe wie beim eigenen Skript: **nur ein Administrator**. Geprüft wird wie dort gegen den gespeicherten Stand (`CustomCode::assertHtmlUnchanged()`), in beiden Controllern und auch beim Zurückholen einer alten Fassung – ein Redakteur kann eine Seite mit HTML also weiter bearbeiten, ohne das HTML anfassen zu können. Im Editor ist das Feld für ihn sichtbar und schreibgeschützt, wie das Skriptfeld.
+
+**Warum keine Filterung wie bei Rich Text.** Genau die Fälle, für die man den Baustein nimmt – ein fremdes Widget, eine eigene Tabelle, eine Auszeichnung, die es als Baustein nicht gibt – fallen durch jede Whitelist. Ein gefilterter HTML-Baustein hätte den Wunsch nicht erfüllt, sondern nur verschoben.
+
+**Folgen.** `README.md` nennt den Baustein und seine Rolle. Nicht gebaut: eine Vorschau, die fremde Skripte ausführt (die Editorvorschau führt keine aus, das bleibt so), und eine Ausnahme von der Administratorregel für einzelne Seiten.
+
 ## ADR 105 – Designpakete in Plugins zurückgenommen: das Design gehört der Website (16.09.2026)

 Umut hatte auf der DEEG-Installation „Nachtblau“ eingeschaltet und wieder ausgeschaltet – und die Farben blieben. Die Ursache war nicht der Schalter (`activate()`/`deactivate()` fassen das Design nie an), sondern der zweite Knopf daneben: „Designpaket übernehmen“ schrieb die Palette des Plugins über `Theme::save()` endgültig in die Website. Technisch war das gewollt (ADR 103: ein Import, damit sich das Ergebnis unter Design weiter anpassen lässt und beim Ausschalten nichts verlorengeht) – in der Bedienung war es eine Falle: eine Aktion, die die gesamte Palette ersetzt, ohne Rückfrage und ohne Weg zurück, auf einem Bildschirm, wo daneben ein Schalter sitzt, den man gefahrlos umlegen kann.
@@ -1,5 +1,21 @@
 # Projektstatus

+## Baustein „Eigenes HTML“, DEEG-Angebotsseite (16.09.2026)
+
+**Anlass:** Umut: „Als Baustein im Editor, dass man individuelles HTML einfügen kann … z. B. eine neue Angebotsseite bei DEEG, da soll ein iframe rein, im gleichen Stil wie das Impressum.“
+
+**Gebaut.** Neuer Kernbaustein `html` („Eigenes HTML“, Dokumentschema **v24**): eine Eigenschaft, das Markup bis 20.000 Zeichen, unverändert ausgegeben. `CustomCode::checkHtml()` weist `<script>` und `<iframe>` mit dem Weg zum richtigen Ort ab; `CustomCode::assertHtmlUnchanged()` hält Änderungen auf die Administratorrolle fest – in `EditorController` (Speichern und Zurückholen einer Fassung) und in `PartialController`, wie beim eigenen Skript. Im Editor: Eintrag in der Gruppe „Seite und Daten“, mehrzeiliges Feld, schreibgeschützt ohne Administratorrolle. In `site.css` nur so viel Regel, dass fremdes Markup die Spalte nicht sprengt.
+
+**Nicht gebaut, weil vorhanden:** der iframe. Der Baustein „Externer Inhalt“ (v14) macht das seit Langem – mit Einwilligung davor und dem Host in `frame-src`. Begründung in ADR 106.
+
+**DEEG.** Die Seite `/angebote` gab es schon (im Editor angelegt, Starterabschnitt plus Rahmen mit Platzhaltertexten „test“). Sie ist jetzt im Stil der Rechtsseiten aufgebaut: Kleinzeile, große leichte Überschrift „Unsere Angebote“, Vorspann auf heller Fläche, darunter die IS24-Ergebnisliste (Portal 16200281, Höhe 1000) und eine Hinweiszeile zum Portal und zum Kontakt. „Immobilien“ in der Navigation und der Knopf im Angebote-Band der Startseite zeigen auf `/angebote` statt auf die alte Website. Aufbau per Skript: `scripts/add-immobilien-deeg-angebote.php`.
+
+**Einwilligung und Gestaltung (DEEG).** Die Gruppe „Externe Inhalte“ ist eingeschaltet (`consentBanner`, `consentGroups`), der Balken trägt die Farben der Website (eckig, Logo-Blau als Akzent, Papier als Fläche). Vor der Zustimmung steht der Platzhalter, und der trägt über eigenes CSS am Block denselben Zuschnitt wie die Vorlage: eckiger Rahmen auf heller Fläche, linksbündig, blauer Knopf. **Gestaltbar ist der Rahmen, nicht sein Inhalt** – Abstände, Breite, Rand, Ecken und Höhe gehören dieser Website, die Darstellung der Liste gehört ImmobilienScout24; an fremdes Dokument im iframe kommt kein CSS heran, das trennt der Browser. Im Browser geprüft: Platzhalter, Zustimmung, geladene Liste.
+
+**Nicht mehr offen:** Die Einwilligungsfrage war auf dieser Installation aus (`consentBanner` false, keine Gruppen). Das ist erledigt: Umut hat die Einwilligung eingeschaltet, ein fremder Rahmen lädt jetzt erst nach der Zustimmung.
+
+**Geprüft:** `phpunit` 574 Tests grün, `npm test` 35 (neu: der Baustein startet leer, steht im Werkzeugkasten, hebt das Dokument auf v24). `npm run test:editor` um den ganzen Weg erweitert und bestanden: Baustein aus dem Werkzeugkasten einfügen, Markup eintippen, in der Vorschau sehen, veröffentlichen, auf der Website Zeichen für Zeichen wiederfinden – und `<script>` wie `<iframe>` werden mit ihrer Meldung abgewiesen (422, Meldung in der Leiste über dem Editor), ohne die veröffentlichte Seite anzufassen. Zwei neue PHP-Tests: Markup erscheint unverändert auf der veröffentlichten Seite und `<script>`, `<iframe>` sowie Schema v23 werden abgewiesen; HTML-Änderungen werden gegen den gespeicherten Stand geprüft.
+
 ## Fassung 1.19.0 veröffentlicht (16.09.2026)

 **Anlass:** Umut: „Ja committe das bitte und push mit neuem Release.“ Die Rücknahme der Designpakete geht als 1.19.0 heraus.
@@ -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' };
-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: '⚭' };
+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' };
+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: '</>' };
 // 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.
 /**
@@ -12,7 +12,7 @@ export const CATEGORIES = [
  { name: 'Inhalt', types: ['heading', 'text', 'image', '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', 'form', 'legal', 'partialref', 'embed'] },
+  { name: 'Seite und Daten', types: ['postlist', 'postnav', 'breadcrumb', 'menu', 'form', 'legal', 'partialref', 'embed', 'html'] },
 ];

 /** How many columns a row can be added with. */
@@ -128,6 +128,8 @@ export function createBlock(type) {
  if (type === 'postlist') block.props = { count: 3, category: '', tag: '', layout: 'karten' };
  if (type === 'postnav') block.props = { previousLabel: 'Vorheriger Beitrag', nextLabel: 'Nächster Beitrag' };
  if (type === 'legal') block.props = { label: 'Rechtliches' };
+  // Leer eingefuegt: nichts steht auf der Seite, bis jemand Code eintraegt.
+  if (type === 'html') block.props = { html: '' };
  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 };
@@ -160,6 +162,7 @@ export function upgradeForType(document, type) {
  if (type === 'postlist') upgradeDocument(document, 18);
  if (type === 'postnav') upgradeDocument(document, 18);
  if (type === 'legal') upgradeDocument(document, 19);
+  if (type === 'html') upgradeDocument(document, 24);
  if (['iconcard', 'stat', 'quote', 'logos', 'cta', 'contact', 'divider', 'spacer', 'accordion', 'accordionitem'].includes(type)) upgradeDocument(document, 6);
  if (type === 'tabs' || type === 'tabitem') upgradeDocument(document, 7);
  if (type === 'form') upgradeDocument(document, 8);
@@ -310,7 +313,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 = 23;
+export const SCHEMA_VERSION = 24;

 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' };

@@ -460,6 +460,29 @@ 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 === '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.
+    const label = document.createElement('label'); label.htmlFor = 'own-html'; label.textContent = 'HTML';
+    const input = document.createElement('textarea');
+    input.id = 'own-html'; input.rows = 10; input.spellcheck = false; input.className = 'own-code';
+    input.value = block.props?.html ?? '';
+    input.readOnly = !mayScript;
+    input.addEventListener('change', () => {
+      history.change(doc => {
+        upgradeDocument(doc, 24);
+        const current = locate(doc.blocks, block.id)?.block;
+        if (!current) return;
+        current.props = { ...current.props, html: input.value };
+      });
+      changed();
+    });
+    const note = document.createElement('p'); note.className = 'field-help';
+    note.innerHTML = mayScript
+      ? 'Markup, das unverändert auf der Seite landet – eigene Tabellen, fremde Widgets, Auszeichnungen, die es als Baustein nicht gibt. <strong>&lt;script&gt;</strong> gehört unter „Erweitert“ in das Feld „Eigenes Skript“, ein <strong>&lt;iframe&gt;</strong> in den Baustein „Externer Inhalt“ – nur der fragt vorher um Einwilligung. Die Vorschau zeigt das HTML so, wie die Seite es zeigt.'
+      : 'Eigenes HTML kann nur ein Administrator ändern, weil es unverändert auf der veröffentlichten Seite landet. Der Inhalt ist hier nur zu sehen.';
+    panel.append(label, input, note);
+  }
  if (block.type === 'form') field('Adresse des Formulars', 'form', block.props.form, { help: 'Die Adresse aus der Formularverwaltung, zum Beispiel kontakt. Felder, Empfänger und Einwilligungstext werden dort gepflegt, nicht hier.' });
  if (block.type === 'tabitem') field('Titel', 'title', block.props.title, { maxLength: 160, help: 'Beschriftung des Tabs. In der Vorschau sind alle Tabs untereinander sichtbar, weil die Vorschau kein JavaScript ausführt.' });
  if (block.type === 'accordion') {
@@ -234,6 +234,11 @@ body.consent-open{padding-bottom:320px}
 .embed-title{margin:0 0 8px;font-weight:600}
 .embed-hint{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--muted)}
 .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-html{max-width:100%}
+.block-html img,.block-html video,.block-html table{max-width:100%}
+.block-html table{border-collapse:collapse}

 /* Header and footer hold block documents of their own (ADR 026). They are therefore ordinary
   block containers - as flex containers they shrank the section inside them until a single word
@@ -0,0 +1,177 @@
+<?php
+
+/**
+ * Legt auf der bestehenden DEEG-Installation die Seite „Angebote“ an und verweist von der
+ * Navigation und vom Angebote-Band der Startseite dorthin.
+ *
+ * Die Seite zeigt die Ergebnisliste des DEEG-Portals bei ImmobilienScout24 als eingebetteten
+ * Rahmen – Baustein „Externer Inhalt“, nicht eigenes HTML: nur er fragt vorher um Einwilligung
+ * und trägt den Anbieter in die Sicherheitsrichtlinie der Seite ein. Kopfabschnitt, Schriftgrößen
+ * und Farben sind dieselben wie bei Impressum und Datenschutz (siehe seed-immobilien-deeg.php).
+ *
+ * Läuft nur gegen die DEEG-Datenbank und nur, solange es die Seite noch nicht gibt.
+ */
+require dirname(__DIR__).'/config/bootstrap.php';
+
+use App\Content\DocumentValidator;
+use App\Content\MediaLibrary;
+use App\Content\MenuRepository;
+use App\Content\PageRepository;
+use App\Content\SiteSettings;
+use App\Infrastructure\ConnectionFactory;
+
+$root = dirname(__DIR__);
+$url = str_replace('%kernel.project_dir%', str_replace('\\', '/', $root), (string) $_SERVER['DATABASE_URL']);
+if (!str_contains($url, 'immobilien-deeg')) {
+    fwrite(STDERR, "Sicherung: DATABASE_URL muss auf die DEEG-Datenbank zeigen.\n");
+    exit(1);
+}
+$db = ConnectionFactory::create($url);
+$media = new MediaLibrary($db, str_replace('%kernel.project_dir%', $root, (string) $_SERVER['MEDIA_DIRECTORY']));
+$settings = new SiteSettings($db, $media);
+$pages = new PageRepository($db, new DocumentValidator(), $settings);
+$menus = new MenuRepository($db, $settings);
+
+// Die Seite war im Editor schon angelegt (Starterabschnitt plus Rahmen mit Platzhaltertexten).
+// Sie wird überschrieben, nicht verdoppelt; der bisherige Stand bleibt als Fassung erhalten und
+// lässt sich im Editor unter „Fassungen“ zurückholen.
+$vorhanden = $db->fetchOne('SELECT id FROM page WHERE path = ?', ['angebote']);
+
+$SCHEMA = 24;
+$portal = 'https://portal.immobilienscout24.de/ergebnisliste/16200281';
+$nurUnten = static fn (string $w): array => ['top' => '0px', 'right' => '0px', 'bottom' => $w, 'left' => '0px'];
+
+// Der Kopf wie auf Impressum und Datenschutz: helle Fläche, Kleinzeile, große leichte Überschrift.
+$kopf = ['id' => 'angebote-kopf', 'type' => 'section', 'children' => [
+    ['id' => 'angebote-label', 'type' => 'text', 'props' => ['text' => 'AKTUELLE OBJEKTE'], 'style' => [
+        'desktop' => ['fontSize' => '12px', 'fontWeight' => '700', 'letterSpacing' => '0.14em', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'margin' => ['bottom' => '25px']],
+        'mobile' => ['fontSize' => '11px', 'margin' => ['bottom' => '18px']],
+    ], 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']]],
+    ['id' => 'angebote-h1', 'type' => 'heading', 'props' => ['text' => 'Unsere Angebote', 'level' => 1], 'style' => [
+        'desktop' => ['fontWeight' => '400', 'fontSize' => '56px', 'lineHeight' => 1.1, 'letterSpacing' => '-0.05em', 'margin' => ['bottom' => '22px']],
+        'tablet' => ['fontSize' => '44px'],
+        'mobile' => ['fontSize' => '38px', 'margin' => ['bottom' => '16px']],
+    ], 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
+    ['id' => 'angebote-vorspann', 'type' => 'text', 'props' => ['text' => 'Wohnungen, Häuser und Grundstücke aus unserem Bestand in Freudenstadt und Umgebung. Die Liste wird laufend aktualisiert – sehen Sie sich um und sprechen Sie uns an.'], 'style' => [
+        'desktop' => ['maxWidth' => '640px', 'fontSize' => '18px', 'lineHeight' => 1.7, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+        'mobile' => ['fontSize' => '16px'],
+    ], 'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'medium']]],
+], 'style' => [
+    'desktop' => ['backgroundColor' => '@hell', 'borderWidth' => $nurUnten('1px'), 'borderStyle' => 'solid', 'borderColor' => '@linie-hell', 'padding' => ['top' => '84px', 'bottom' => '72px']],
+    'tablet' => ['padding' => ['top' => '64px', 'bottom' => '56px']],
+    'mobile' => ['padding' => ['top' => '48px', 'bottom' => '40px']],
+]];
+
+// Die Liste selbst. Der Rahmen bleibt hoch genug, dass mehrere Objekte ohne Scrollen im Rahmen
+// sichtbar sind; darunter der Weg zum Portal für alle, die lieber dort suchen.
+$hinweisText = 'Nichts Passendes dabei? <a href="'.$portal.'" target="_blank" rel="noopener">Alle Objekte direkt bei ImmobilienScout24 ansehen ↗</a> oder <a href="/#kontakt">sprechen Sie uns an</a> – wir kennen den Markt vor Ort und wissen oft von Objekten, bevor sie inseriert sind.';
+$liste = ['id' => 'angebote-liste', 'type' => 'section', 'children' => [
+    ['id' => 'angebote-rahmen', 'type' => 'embed', 'props' => [
+        'group' => 'external',
+        'title' => 'Aktuelle Immobilienangebote der Deeg Hausverwaltung und Immobilien GmbH bei ImmobilienScout24',
+        'provider' => 'ImmobilienScout24',
+        'url' => $portal,
+        'hint' => 'Die Angebotsliste wird von ImmobilienScout24 geladen. Dabei erfährt der Anbieter Ihre IP-Adresse und welche Seite Sie ansehen.',
+        'height' => 1000,
+    ], 'style' => ['desktop' => ['margin' => ['bottom' => '26px']]], 'layout' => ['effects' => ['entrance' => 'fade', 'delay' => 'none']],
+        // Der Rahmen selbst und der Platzhalter davor tragen den Zuschnitt der Vorlage: eckig,
+        // helle Fläche, Logo-Blau auf dem Knopf. Was IM Rahmen steht, gehört ImmobilienScout24 -
+        // daran kommt kein CSS dieser Website heran, und das ist keine Einstellung, sondern die
+        // Trennung zwischen zwei Herkünften im Browser.
+        'css' => "& iframe{border:1px solid #dbe1e3;border-radius:0;background:#f5fafd}
+&.embed-blocked{border:1px solid #dbe1e3;border-radius:0;background:#f5fafd;padding:56px 24px;text-align:left}
+& .embed-title{font-size:20px;font-weight:700;color:#343a40;margin-bottom:12px}
+& .embed-hint{max-width:640px;font-size:15px;line-height:1.7;color:#58666d}
+& .embed-provider{font-size:13px;color:#66747b}
+& .consent-button{border-radius:0;background:#0076b6;border-color:#0076b6;color:#fff;flex:0 0 auto;padding:16px 24px}
+& .consent-button:hover{background:#006aa3;border-color:#006aa3}",
+    ],
+    ['id' => 'angebote-hinweis', 'type' => 'text', 'props' => ['text' => $hinweisText], 'style' => [
+        'desktop' => ['maxWidth' => '760px', 'fontSize' => '16px', 'lineHeight' => 1.7, 'color' => '@text', 'margin' => ['bottom' => '0px']],
+    ], 'css' => "& a{color:#006aa3;text-decoration:underline;text-underline-offset:3px}\n& a:hover{color:#343a40}",
+        'layout' => ['effects' => ['entrance' => 'rise', 'delay' => 'short']]],
+], 'style' => [
+    'desktop' => ['padding' => ['top' => '72px', 'bottom' => '108px']],
+    'tablet' => ['padding' => ['top' => '56px', 'bottom' => '80px']],
+    'mobile' => ['padding' => ['top' => '40px', 'bottom' => '65px']],
+]];
+
+$dokumentAngebote = [
+    'schemaVersion' => $SCHEMA,
+    'title' => 'Angebote',
+    'description' => 'Aktuelle Wohnungen, Häuser und Grundstücke der Deeg Hausverwaltung und Immobilien GmbH in Freudenstadt und Umgebung.',
+    'blocks' => [$kopf, $liste],
+];
+if (false !== $vorhanden) {
+    $id = (string) $vorhanden;
+    $revision = $pages->saveDraft($id, $dokumentAngebote, (int) $pages->findForEditor($id)['version']);
+    $pages->publish($id, $revision, (int) $pages->findForEditor($id)['version']);
+    echo "Seite überarbeitet und veröffentlicht: /angebote\n";
+} else {
+    $id = $pages->createPage('angebote', null, 'page', $dokumentAngebote);
+    $seite = $db->fetchAssociative('SELECT draft_revision_id, version FROM page WHERE id = ?', [$id]);
+    $pages->publish($id, $seite['draft_revision_id'], (int) $seite['version']);
+    echo "Seite angelegt und veröffentlicht: /angebote\n";
+}
+$db->executeStatement('UPDATE page SET seo_title = ? WHERE id = ?', ['Aktuelle Angebote | Deeg Hausverwaltung und Immobilien GmbH', $id]);
+
+// „Immobilien“ in der Navigation zeigte auf den Sprungpunkt der Startseite; jetzt gibt es die
+// Seite, auf die dieser Abschnitt ohnehin nur verwiesen hat.
+$header = $menus->all()['header'];
+$eintraege = [];
+foreach ($header['items'] as $eintrag) {
+    if ('Immobilien' === $eintrag['label']) {
+        $eintrag['pageId'] = $id;
+        $eintrag['anchor'] = '';
+    }
+    $eintraege[] = $eintrag;
+}
+$menus->save('header', $header['name'], $eintraege, (int) $header['version']);
+echo "Navigation: „Immobilien“ zeigt auf /angebote\n";
+
+// Und der Knopf im Angebote-Band der Startseite, der bisher auf die alte Website führte.
+$home = $db->fetchAssociative('SELECT id FROM page WHERE path = ?', ['home']);
+$dokument = $pages->findForEditor($home['id'])['document'];
+$getroffen = 0;
+$walk = function (array &$blocks) use (&$walk, &$getroffen): void {
+    foreach ($blocks as &$block) {
+        // Der Knopf im Angebote-Band ist ein Textbaustein mit eigenem CSS, kein Button-Baustein -
+        // deshalb wird die Adresse im Text ersetzt, nicht in den Eigenschaften.
+        foreach (['href', 'text'] as $feld) {
+            $wert = (string) ($block['props'][$feld] ?? '');
+            if ('' !== $wert && str_contains($wert, 'immobiliendeeg.de/immobilien')) {
+                $block['props'][$feld] = str_replace(['https://www.immobiliendeeg.de/immobilien/', 'https://www.immobiliendeeg.de/immobilien'], '/angebote', $wert);
+                unset($block['props']['newTab']);
+                ++$getroffen;
+            }
+        }
+        if (isset($block['children']) && is_array($block['children'])) {
+            $walk($block['children']);
+        }
+    }
+};
+$walk($dokument['blocks']);
+if ($getroffen > 0) {
+    $stand = $pages->findForEditor($home['id']);
+    $revision = $pages->saveDraft($home['id'], $dokument, $stand['version']);
+    $pages->publish($home['id'], $revision, $pages->findForEditor($home['id'])['version']);
+}
+echo "Startseite: $getroffen Knopf/Knöpfe zeigen jetzt auf /angebote\n";
+
+// Ein fremder Rahmen ohne Einwilligung lädt beim Seitenaufruf mit und gibt dabei IP-Adresse und
+// Seite an den Anbieter weiter. Mit der Gruppe „Externe Inhalte“ steht davor der Platzhalter, und
+// erst der Knopf lädt die Liste. Der Balken trägt die Farben der Website.
+$aktuell = $settings->load();
+$settings->save([
+    ...$aktuell,
+    // Gespeichert als Liste, erwartet als Textfeld - wie es der Einstellungsbildschirm schickt.
+    'sameAs' => implode("\n", $aktuell['sameAs']),
+    'consentBanner' => true,
+    'consentGroups' => ['external'],
+    'consentShape' => 'eckig',
+    'consentAccent' => '@blau-tief',
+    'consentAccentInk' => '@papier',
+    'consentColor' => '@papier',
+    'consentInk' => '@anthrazit',
+]);
+echo "Einwilligung eingeschaltet: Gruppe „Externe Inhalte“, Balken eckig in Logo-Blau\n";
@@ -940,6 +940,48 @@ try {
  await page.locator('.notice.ok').waitFor();
  checks.push({ name: 'plugin switched on, block inserted from the toolbox, schema panel, assets on the public page, switched off keeps the block', passed: true });

+  // --- Der Baustein „Eigenes HTML“ (ADR 106) -------------------------------------------------
+  // Markup des Betreibers, unveraendert bis auf die oeffentliche Seite. Geprueft wird der Weg,
+  // den ein Administrator geht: einfuegen, eintippen, Vorschau, veroeffentlichen - und dass
+  // <script> und <iframe> mit einer Meldung abgewiesen werden statt still zu verschwinden.
+  await page.goto(origin + '/admin/pages/test-home');
+  await treeSelect('headline');
+  await addFromLibrary('[data-add="html"]');
+  await page.locator('#properties-title').filter({ hasText: 'Eigenes HTML' }).waitFor();
+  await page.getByLabel('HTML', { exact: true }).fill('<table class="preise"><tbody><tr><td>Miete</td><td>ab 8 &euro;/m&sup2;</td></tr></tbody></table>');
+  // Erst der Fokuswechsel schickt den Wert ins Dokument; die Vorschau folgt kurz darauf.
+  await page.locator('#preview-status').click();
+  await page.waitForFunction(() => Boolean(document.querySelector('#preview').contentDocument.querySelector('.block-html table.preise')), null, { timeout: 20000 });
+  await page.locator('#save').click();
+  await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  await page.locator('#publish').click(); await page.locator('#confirm-publish').click();
+  await page.locator('#save-status').filter({ hasText: 'Veröffentlicht' }).waitFor();
+  {
+    const html = await (await page.request.get(origin + '/')).text();
+    assert.match(html, /class="block-html"><table class="preise">/, 'Eigenes HTML unverändert auf der Website');
+    // Der Baustein selbst bringt kein Skript auf die Seite - die Tabelle steht da, wie sie
+    // eingegeben wurde, und sonst nichts. (Dass eine Seite ohne Skript weiterhin
+    // script-src 'none' sendet, prüft CmsTest; hier trägt das Plugin von vorhin schon eines bei.)
+    assert.equal(html.includes('<table class="preise"><tbody><tr><td>Miete</td>'), true, 'Markup Zeichen für Zeichen');
+  }
+  for (const [markup, meldung] of [
+    ['<script>alert(1)</script>', /Eigenes HTML führt keine Skripte aus/],
+    ['<iframe src="https://example.com"></iframe>', /Externer Inhalt/],
+  ]) {
+    await page.getByLabel('HTML', { exact: true }).fill(markup);
+    await page.locator('#preview-status').click();
+    await page.locator('#save').click();
+    // Abgewiesen wird schon die Vorschau, und das Speichern meldet es in der Leiste über dem
+    // Editor - die Seite bleibt, wie sie veröffentlicht ist.
+    await page.locator('#message').filter({ hasText: meldung }).waitFor();
+  }
+  await page.getByLabel('HTML', { exact: true }).fill('<p class="notiz">Wieder gut.</p>');
+  await page.locator('#preview-status').click();
+  await page.locator('#save').click();
+  await page.locator('#save-status').filter({ hasText: 'Entwurf gespeichert' }).waitFor();
+  await page.screenshot({ path: 'reports/editor/own-html.png', fullPage: true });
+  checks.push({ name: 'own HTML block: inserted, previewed, published unchanged, script and iframe refused', passed: true });
+
  // Every management screen, not just the page list: they carry tables, disclosures and now the
  // media grid, and none of that was ever checked automatically before.
  for (const [name, path] of [
@@ -5,15 +5,23 @@ namespace App\Content;
 use App\Domain\InvalidDocument;

 /**
- * Own CSS and own script per element (document schema v13).
+ * Own CSS and own script per element (document schema v13), and the raw HTML of the „Eigenes
+ * HTML“ block (schema v24).
 *
- * The two are not comparable in what they can do, so they are not treated alike.
+ * The three are not comparable in what they can do, so they are not treated alike.
 *
 * **CSS** is parsed and written out again by this class, scoped to the block. A declaration list
 * and nested rules starting with `&` are accepted; anything else is refused. Because the output is
 * re-serialised, a stray `}` cannot escape the block, and `@import` or a `javascript:` URL never
 * gets through. Everyone with the editor role may use it.
 *
+ * **HTML** is markup that goes onto the page unchanged. It cannot be made harmless either - it
+ * can load images from anywhere and point a form at a foreign address - so it follows the same
+ * rule as a script: administrators only, checked against what is already stored. Two tags are
+ * refused rather than silently swallowed by the content security policy: `<script>`, which
+ * belongs in the script field, and `<iframe>`, which belongs in the „Externer Inhalt“ block,
+ * because only that one asks for consent and puts the host into `frame-src`.
+ *
 * **Script** is arbitrary JavaScript on the published site. There is no way to make that harmless:
 * whoever may set it can run code in the browser of every visitor and every administrator. It is
 * therefore reserved for administrators, checked on the way in by comparing against what is
@@ -24,6 +32,7 @@ final class CustomCode
 {
    public const MAX_CSS = 4000;
    public const MAX_SCRIPT = 8000;
+    public const MAX_HTML = 20000;

    public static function supports(mixed $schemaVersion): bool
    {
@@ -62,6 +71,66 @@ final class CustomCode
        return $script;
    }

+    /**
+     * Checks the markup of an „Eigenes HTML“ block and returns it unchanged.
+     *
+     * @throws InvalidDocument
+     */
+    public function checkHtml(string $html): string
+    {
+        if (mb_strlen($html) > self::MAX_HTML) {
+            throw new InvalidDocument(sprintf('Eigenes HTML ist auf %d Zeichen begrenzt.', self::MAX_HTML));
+        }
+        // Beide Tags wuerden von der Sicherheitsrichtlinie der Seite ohnehin nicht ausgefuehrt
+        // bzw. nicht geladen. Eine Meldung mit dem richtigen Weg ist besser als ein Baustein,
+        // der etwas annimmt und nachher nichts tut.
+        if (1 === preg_match('/<\s*script/i', $html)) {
+            throw new InvalidDocument('Eigenes HTML führt keine Skripte aus. Dafür gibt es unter „Erweitert“ das Feld „Eigenes Skript“.');
+        }
+        if (1 === preg_match('/<\s*iframe/i', $html)) {
+            throw new InvalidDocument('Für einen eingebetteten Rahmen gibt es den Baustein „Externer Inhalt“: nur er fragt vorher um Einwilligung und trägt den Anbieter in die Sicherheitsrichtlinie ein.');
+        }
+
+        return $html;
+    }
+
+    /**
+     * The raw HTML of every „Eigenes HTML“ block, keyed by block ID.
+     *
+     * @return array<string, string>
+     */
+    public function htmlOf(array $document): array
+    {
+        $found = [];
+        $walk = function (array $blocks) use (&$walk, &$found): void {
+            foreach ($blocks as $block) {
+                if ('html' === ($block['type'] ?? '') && is_string($block['props']['html'] ?? null) && is_string($block['id'] ?? null)) {
+                    $found[$block['id']] = $block['props']['html'];
+                }
+                $walk($block['children'] ?? []);
+            }
+        };
+        $walk($document['blocks'] ?? []);
+
+        return $found;
+    }
+
+    /**
+     * Refuses a write that would add, change or remove raw HTML without the administrator role.
+     *
+     * @throws InvalidDocument
+     */
+    public function assertHtmlUnchanged(array $incoming, array $stored): void
+    {
+        $before = $this->htmlOf($stored);
+        $after = $this->htmlOf($incoming);
+        ksort($before);
+        ksort($after);
+        if ($before !== $after) {
+            throw new InvalidDocument('Eigenes HTML darf nur von einem Administrator geändert werden. Die übrigen Änderungen wurden nicht gespeichert.');
+        }
+    }
+
    /**
     * Turns own CSS into rules scoped to one block.
     *
@@ -38,8 +38,9 @@ final class DocumentValidator
    public const V15_TYPES = ['icon', 'progress', 'slider'];
    /** Schema v23: die sozialen Profile aus den Einstellungen, als Symbolreihe an jeder Stelle. */
    public const V23_TYPES = ['social'];
+    public const V24_TYPES = ['html'];
    /** Die aktuelle Fassung des Dokumentschemas - dieselbe Zahl wie SCHEMA_VERSION in editor-model.js. */
-    public const SCHEMA_VERSION = 23;
+    public const SCHEMA_VERSION = 24;

    /**
     * @param bool $requireHeading A page needs exactly one main heading. A header, a footer or a
@@ -98,7 +99,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)) || $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 >= 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)) || $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.');
@@ -389,6 +390,14 @@ 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 ('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
+            // stillschweigend zu verschwinden. Wer es setzen darf, ist eine Frage der Rolle und
+            // wird im Controller beantwortet - wie beim eigenen Skript.
+            $this->require(is_string($props['html'] ?? null), 'Eigenes HTML ist Text.');
+            $this->code->checkHtml($props['html']);
+        }
        if ('form' === $type) {
            // Only the address is content. Fields, recipient and consent text stay in the database,
            // so a stored document can never redirect a submission or change what is asked.
@@ -292,6 +292,7 @@ final class EditorController extends AbstractController
            // ueber den Umweg einer alten Fassung.
            if (!$this->isGranted('ROLE_ADMIN')) {
                $this->code->assertScriptsUnchanged($this->pages->revisionDocument($id, $revision), $this->pages->findForEditor($id)['document']);
+                $this->code->assertHtmlUnchanged($this->pages->revisionDocument($id, $revision), $this->pages->findForEditor($id)['document']);
            }
            $this->pages->restoreRevision($id, $revision, $request->request->getInt('expectedVersion', -1));
        } catch (InvalidPage|StaleWrite $e) {
@@ -488,6 +489,7 @@ final class EditorController extends AbstractController
                }
                if (!$this->isGranted('ROLE_ADMIN')) {
                    $this->code->assertScriptsUnchanged($body['document'], $page['document']);
+                    $this->code->assertHtmlUnchanged($body['document'], $page['document']);
                }
                $page['draft_revision_id'] = $this->pages->saveDraft($id, $body['document'], $body['expectedVersion']);
                // Die gespeicherte Fassung, nicht die geschickte: Rich Text wird beim Speichern
@@ -145,6 +145,7 @@ final class PartialController extends AbstractController
            }
            if (!$this->isGranted('ROLE_ADMIN')) {
                $this->code->assertScriptsUnchanged($document, $partial['document']);
+                $this->code->assertHtmlUnchanged($document, $partial['document']);
            }
            $this->partials->save($id, $document, $body['expectedVersion']);
            // Die gespeicherte Fassung zurueck - bereinigter Rich Text steht sofort im Editor.
@@ -255,6 +255,14 @@
    </div>
    {% endif %}
    {% 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. #}
+    {% if props.html|default('')|trim == '' %}
+    {% if editing|default(false) %}<p id="{{ block.id }}" class="block-unavailable{{ designClasses }}" role="note">Eigenes HTML: unter Inhalt den Code einfügen.</p>{% endif %}
+    {% else %}
+    <div id="{{ block.id }}" class="block-html{{ designClasses }}">{{ props.html|raw }}</div>
+    {% endif %}
 {% elseif type == 'postlist' %}
    <div id="{{ block.id }}" class="block-postlist{{ designClasses }}">
        {% set feed = postLists[block.id]|default([]) %}
@@ -3111,6 +3111,79 @@ final class CmsTest extends TestCase
        $code->assertScriptsUnchanged($added, $before);
    }

+    public function testOwnHtmlReachesThePageUnchangedAndRefusesScriptAndFrame(): void
+    {
+        // Der Baustein „Eigenes HTML“ (Schema v24): Markup des Betreibers, unverändert auf der
+        // Seite. Zwei Tags nimmt er nicht an, weil die Sicherheitsrichtlinie sie ohnehin nicht
+        // ausführt bzw. nicht lädt - dafür gibt es das Skriptfeld und den Baustein „Externer
+        // Inhalt“.
+        $id = $this->publishedPage('angebote', 'Angebote');
+        $document = $this->pages->findForEditor($id)['document'];
+        $document['schemaVersion'] = 24;
+        $document['blocks'][0]['children'][] = ['id' => 'roh', 'type' => 'html', 'props' => ['html' => '<table class="preise"><tr><td>Miete</td><td>ab 8 €/m²</td></tr></table>']];
+        $revision = $this->pages->saveDraft($id, $document, $this->pages->findForEditor($id)['version']);
+        $this->pages->publish($id, $revision, $this->pages->findForEditor($id)['version']);
+
+        $html = $this->request('/angebote')->getContent();
+        self::assertStringContainsString('<div id="roh" class="block-html">', $html);
+        // Unverändert heißt unverändert: keine Entschärfung, keine Umschrift.
+        self::assertStringContainsString('<table class="preise"><tr><td>Miete</td><td>ab 8 €/m²</td></tr></table>', $html);
+
+        foreach ([
+            '<script>alert(1)</script>' => 'Skript',
+            '<iframe src="https://example.com"></iframe>' => 'Rahmen',
+            '< script >alert(1)</script>' => 'Skript mit Leerzeichen',
+        ] as $markup => $fall) {
+            $attempt = $document;
+            $attempt['blocks'][0]['children'][2]['props']['html'] = $markup;
+            try {
+                $this->pages->saveDraft($id, $attempt, $this->pages->findForEditor($id)['version']);
+                self::fail(sprintf('%s hätte abgewiesen werden müssen.', $fall));
+            } catch (InvalidDocument) {
+            }
+        }
+
+        // Vor v24 gibt es den Baustein nicht.
+        $alt = $document;
+        $alt['schemaVersion'] = 23;
+        try {
+            $this->pages->saveDraft($id, $alt, $this->pages->findForEditor($id)['version']);
+            self::fail('Eigenes HTML vor Schema v24 hätte abgewiesen werden müssen.');
+        } catch (InvalidDocument) {
+        }
+    }
+
+    public function testOwnHtmlChangesAreComparedAgainstWhatIsStored(): void
+    {
+        // Dieselbe Rolle wie beim eigenen Skript: ändern darf es nur ein Administrator, und
+        // geprüft wird gegen den gespeicherten Stand - ein Redakteur kann die Seite also weiter
+        // speichern, ohne das HTML anfassen zu können.
+        $code = new CustomCode();
+        $stored = DemoContent::starter('Mit HTML');
+        $stored['schemaVersion'] = 24;
+        $stored['blocks'][0]['children'][] = ['id' => 'roh', 'type' => 'html', 'props' => ['html' => '<p>Original</p>']];
+
+        $unchanged = $stored;
+        $unchanged['title'] = 'Anderer Titel';
+        $code->assertHtmlUnchanged($unchanged, $stored);
+
+        foreach (['geändert' => '<p>Fremd</p>', 'geleert' => ''] as $fall => $markup) {
+            $attempt = $stored;
+            $attempt['blocks'][0]['children'][2]['props']['html'] = $markup;
+            try {
+                $code->assertHtmlUnchanged($attempt, $stored);
+                self::fail(sprintf('HTML %s: hätte abgewiesen werden müssen.', $fall));
+            } catch (InvalidDocument) {
+            }
+        }
+
+        // Und neu hinzufügen ebenso wenig.
+        $ohne = DemoContent::starter('Ohne HTML');
+        $ohne['schemaVersion'] = 24;
+        $this->expectException(InvalidDocument::class);
+        $code->assertHtmlUnchanged($stored, $ohne);
+    }
+
    /** Turns on the consent question and publishes a privacy page it can point to. */
    private function askConsent(array $groups = ['external']): void
    {
@@ -102,6 +102,17 @@ test('v1 to v2 migration preserves all content and IDs, is idempotent and reject
  assert.equal(original.schemaVersion, 1);
 });

+test('the own-HTML block starts empty, is offered in the toolbox and lifts the document to v24', () => {
+  // Eingefuegt wird er leer: bis jemand Code eintraegt, steht nichts auf der Seite.
+  const history = new EditorHistory(fixture());
+  const gruppe = CATEGORIES.find(category => category.types.includes('html'));
+  assert.equal(gruppe?.name, 'Seite und Daten');
+  assert.equal(blockLabels.html, 'Eigenes HTML');
+  const id = history.change(doc => insertBlock(doc, 'html', 's1'));
+  assert.equal(locate(history.document.blocks, id).block.props.html, '');
+  assert.equal(history.document.schemaVersion, 24);
+});
+
 test('responsive inheritance, reset, migration undo, and reload preserve distinct device values', () => {
  const history = new EditorHistory(fixture());
  history.change(doc => setDesign(doc, 'h1', 'desktop', 'fontSize', 'hero'));