Release 1.21.1

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

README.md

@@ -4,6 +4,10 @@ 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`.
 
+## Bildecken unter Design (ab 1.21.0)
+
+Wie stark die Ecken der Bilder gerundet sind, steht jetzt unter **Design → Bildecken** und gilt für die ganze Website – Bilder, Galerien, Logoleisten und Beitragslisten. Vorgabe ist `12px` wie bisher, `0px` macht sie eckig. Ein einzelnes Bild lässt sich davon abweichend einstellen: im Editor beim ausgewählten Bild unter **Design → Bild → Bildecken**, dort auch je Gerät und je Ecke. Vorher stand die Rundung fest im Stylesheet und war in keinem Feld zu finden.
+
 ## Kaufmännisches Und und Zeilenumbrüche bleiben, wie sie sind (ab 1.20.1)
 
 **Behoben.** Ein Text ohne Auszeichnung wurde beim Speichern doppelt kodiert: aus `&` wurde `&amp;`, beim nächsten Speichern `&amp;amp;` – irgendwann stand die Entity sichtbar auf der Seite. Ebenso wuchsen Zeilenumbrüche: jedes zweite Speichern machte aus einem `<br>` zwei. Beides ist behoben, und wiederholtes Speichern ändert einen Text jetzt nicht mehr. Was bereits falsch gespeichert ist, räumt `php bin/console cms:repair:entities` auf: ohne Option zeigt er nur, was sich ändern würde, mit `--schreiben` wendet er es an. Angefasst werden die veröffentlichte Fassung und der Entwurf jeder Seite sowie die Bereiche; ältere Fassungen bleiben Historie.

VERSION

@@ -1 +1 @@
-1.20.2
+1.21.1

docs/STATUS.md

@@ -1,5 +1,29 @@
 # Projektstatus
 
+## Startseite nach der Installation: eine Baustellenseite statt einer Anleitung (16.09.2026)
+
+**Anlass:** Umut: „Kannst du bitte für die Erstseite bzw. nach der Installation eine schöne Erstseite erstellen – Under Construction oder so, ohne Details mit ‚melde dich an‘ usw. Am besten auch noch Logo von KantSites: ‚Hier entsteht eine neue Webpräsenz mit KantSites‘.“
+
+**Was los war.** `DemoContent::starterPage()` lieferte zwei Abschnitte mit Arbeitsanweisungen an die Betreiberin oder den Betreiber: „Melde dich an, öffne sie im Editor …“ und „Die nächsten Schritte“ mit Design, Menüs und Einstellungen. Das stand auf der einzigen Seite, die bis zum ersten Bearbeiten **öffentlich** erreichbar ist – gelesen hat es also der Besucher, nicht der Betreiber. Für den stehen dieselben Schritte längst auf dem letzten Installerbildschirm (`templates/install/done.html.twig`) und in der Verwaltung.
+
+**Neu.** Eine Baustellenseite, die genau das sagt und sonst nichts: das KantSites-Zeichen (`public/assets/kantsites-logo.svg`, dieselbe Form wie das Favicon), die Kleinzeile „In Arbeit“ in der Akzentfarbe, als einzige H1 der Name der Website, darunter „Hier entsteht eine neue Webpräsenz.“, ein kurzer Trennstrich und die Zeile „Erstellt mit KantSites“. Der Abschnitt ist ein Flex-Container mit `min-height: 70vh` und einem Verlauf von `@paper` nach `@mint`, stellt den Inhalt also mittig auf den Bildschirm; die Farben sind Palettenverweise und folgen jedem Designwechsel. Alles sind gewöhnliche Bausteine mit gewöhnlichen Stilwerten – im Editor also vollständig änder- und löschbar. Die Seitenbeschreibung ist jetzt ein echter Satz statt „NOCH AUSZUFÜLLEN“, damit eine frisch installierte Website in Suchergebnissen nicht mit einem Platzhalter steht.
+
+**Unverändert:** Kopf- und Fußbereich, die beiden Rechtsseiten als Gerüst mit markierten Pflichtangaben, Menüs.
+
+**Geprüft:** `tests/InstallFlowTest.php` (Installation über die sechs Bildschirme, danach liefert `/` die neue Seite), `php vendor/bin/phpunit` 579 von 579. Im Browser angesehen: eine frisch migrierte Datenbank mit dem Inhalt einer Neuinstallation, Desktop und 375 px.
+
+## Fassung 1.21.0: Bildecken gehören dem Designbereich (16.09.2026)
+
+**Anlass:** Umut zum Hero-Bild von DEEG: „Das sollte abgerundet sein, aber wurde von irgendwo gemacht, und die Ecken sehen komisch aus. Es gibt auch im Editor gar nicht Bildecken abrunden, oder?“
+
+**Was los war.** `.block-image{border-radius:12px}` stand fest in `enhancements.css` – jedes Bild jeder Installation war gerundet, ohne dass ein Feld das gesagt hätte. Auf DEEG (eine durchgehend eckige Vorlage) fiel es auf, weil über dem gerundeten Bild eckige Elemente liegen: der dunkle Verlauf, das Schild, die blaue Aufruf-Fläche. An den Ecken schaute deshalb die eckige Fläche aus der Rundung heraus.
+
+**Behoben.** Die Ecken sind jetzt eine Einstellung unter **Design → Bildecken** (`theme.base.imageRadius`, geprüft wie die Inhaltsbreite, ausgegeben als `--k-image-radius`). Vorgabe bleibt `12px`, damit bestehende Websites gleich aussehen; `0px` macht alle Bilder eckig. Für ein einzelnes Bild gab es die Einstellung schon immer – im Editor unter **Design → Bild → Bildecken** (`imageRadius` im Stilschema, für Bild, Galerie, Logoleiste und Beitragsliste); sie überschreibt den Wert der Website.
+
+**DEEG:** `imageRadius` auf `0px`, im Aufbauskript und in der Installation. Das Hero-Bild ist damit eckig wie die Vorlage, und die Ecken stimmen wieder.
+
+**Geprüft:** neuer Test in `tests/CmsTest.php`: Vorgabe ist `12px`, eine Seite mit Bild trägt `--k-image-radius:12px`, nach dem Speichern von `0px` trägt sie `--k-image-radius:0px`, und „rund“ wird abgewiesen wie jede andere Nicht-Größenangabe.
+
 ## Fassung 1.20.1: das kaufmännische Und, das bei jedem Speichern wuchs (16.09.2026)
 
 **Anlass:** Umut: „Beim Startseitenbild wird der Text & umgewandelt, aber in der Ansicht nach dem Speichern wird & daraus.“

public/assets/enhancements.css

@@ -1,4 +1,4 @@
-.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:12px}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
+.block-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-block:24px}.block-gallery>.block-image{min-width:0;margin:0}.block-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}.block-image figcaption{font-size:14px;line-height:1.5;padding:12px 0;color:inherit}.fx-shadow-none{box-shadow:none}.fx-shadow-soft{box-shadow:0 8px 24px #142e251f}.fx-shadow-strong{box-shadow:0 16px 40px #142e2540}.block-image{border-radius:var(--k-image-radius,12px)}.block-image img{border-radius:inherit}.block-gallery:empty{min-height:32px}.fx-hover-zoom{overflow:hidden}.fx-hover-zoom img{transform-origin:center}.tone-ink figure{color:var(--paper)}
 @media(max-width:1024px){.block-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
 @media(max-width:767px){.block-gallery{grid-template-columns:minmax(0,1fr);gap:16px}}
 .fx-hover-lift,.fx-hover-zoom img{transition:transform .25s ease}.fx-hover-lift:hover,.fx-hover-lift:focus-within{transform:translateY(-4px)}.fx-hover-zoom:hover img,.fx-hover-zoom:focus-within img{transform:scale(1.035)}

public/assets/kantsites-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128"><rect width="128" height="128" rx="32" fill="#182d2b"/><path d="M36 28h16v42l26-28h22L68 76l34 28H78L52 82v22H36z" fill="#e5f0b6"/></svg>

scripts/seed-immobilien-deeg.php

@@ -283,7 +283,7 @@ $theme->save(
         ['key' => 'body', 'name' => 'Fließtext', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 600, 700], 'fallback' => 'sans-serif'],
         ['key' => 'heading', 'name' => 'Überschriften', 'family' => 'Arial', 'source' => 'system', 'weights' => [400, 700], 'fallback' => 'sans-serif'],
     ],
-    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'backgroundColor' => '@papier', 'linkColor' => '@anthrazit', 'containerWidth' => '1320px', 'headingScale' => 1.25, 'linkUnderline' => false],
+    ['fontFamily' => 'body', 'headingFontFamily' => 'heading', 'fontSize' => '16px', 'lineHeight' => 1.6, 'color' => '@anthrazit', 'backgroundColor' => '@papier', 'linkColor' => '@anthrazit', 'containerWidth' => '1320px', 'headingScale' => 1.25, 'linkUnderline' => false, 'imageRadius' => '0px'],
     ['shape' => 'square', 'appearance' => 'solid', 'size' => 'normal', 'fontFamily' => 'inherit', 'fontSize' => 14, 'fontWeight' => 600, 'letterSpacing' => 0, 'textTransform' => 'none', 'backgroundColor' => '@blau-tief', 'color' => '@papier', 'hoverBackgroundColor' => '@blau-dunkel', 'hoverColor' => '@papier'],
 );
 echo "Farben, Schriften und Buttons gesetzt\n";

src/Content/DemoContent.php

@@ -122,34 +122,75 @@ final class DemoContent
         ];
     }
 
-    /**
-     * The header and footer a fresh installation starts with. They are ordinary block documents:
-     * everything in them can be changed, moved or removed in the editor. No main heading, because
-     * every page brings its own.
-     *
-     * @return array<string, array{name: string, document: array}>
-     */
     /**
      * The start page of a fresh installation - not demo content.
      *
-     * Short on purpose. Somebody who has just installed should find a page they can edit, not a
-     * brochure about the CMS they have to delete first. Exactly one H1, as every page requires.
+     * A website that is already reachable but not yet written needs a page that says exactly that:
+     * the name of the site, the notice that something is being built here, and nothing else. No
+     * instructions for the owner - those stand on the last screen of the installer and in the
+     * admin area, not on a page every visitor sees. Exactly one H1, as every page requires.
      */
     public static function starterPage(string $siteName): array
     {
         return [
-            'schemaVersion' => 16,
+            'schemaVersion' => 24,
             'title' => $siteName,
-            'description' => 'NOCH AUSZUFÜLLEN: ein Satz darüber, was es hier gibt. Er erscheint in Suchergebnissen.',
+            'description' => 'Hier entsteht eine neue Webpräsenz. Diese Seite wird gerade eingerichtet.',
             'blocks' => [
-                self::section('start-hero', [
-                    self::heading('start-heading', $siteName, 1),
-                    self::text('start-intro', 'Diese Seite ist der Anfang. Melde dich an, öffne sie im Editor und ersetze diesen Text durch deinen eigenen.'),
-                ], 'mint'),
-                self::section('start-body', [
-                    self::heading('start-next-heading', 'Die nächsten Schritte', 2),
-                    self::text('start-next', "Impressum und Datenschutzerklärung sind bereits angelegt und müssen noch ausgefüllt werden – die Pflichtangaben sind darin markiert.\n\nUnter „Design“ legst du Farben, Schriften und die Breite fest, unter „Menüs“ die Navigation, unter „Einstellungen“ den Namen und die Angaben zum Unternehmen."),
-                ], 'paper', 'narrow'),
+                [
+                    'id' => 'start-hero',
+                    'type' => 'section',
+                    'layout' => ['tone' => 'mint', 'width' => 'narrow'],
+                    'style' => [
+                        // Eine Seite ohne Inhalt: der Abschnitt füllt den Bildschirm und stellt das
+                        // Wenige, das dasteht, in die Mitte, statt es oben in eine Ecke zu setzen.
+                        'desktop' => [
+                            'display' => 'flex', 'alignItems' => 'center', 'justifyContent' => 'center',
+                            'minHeight' => '70vh', 'textAlign' => 'center',
+                            'padding' => ['top' => '96px', 'bottom' => '96px'],
+                            'gradientFrom' => '@paper', 'gradientTo' => '@mint', 'gradientAngle' => 165,
+                        ],
+                        'mobile' => ['minHeight' => 'auto', 'padding' => ['top' => '64px', 'bottom' => '64px']],
+                    ],
+                    'children' => [
+                        [
+                            'id' => 'start-logo',
+                            'type' => 'image',
+                            'props' => ['src' => '/assets/kantsites-logo.svg', 'alt' => 'KantSites', 'decorative' => false, 'width' => 128, 'height' => 128],
+                            'style' => ['desktop' => ['maxWidth' => '86px', 'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '30px']]],
+                        ],
+                        [
+                            'id' => 'start-label',
+                            'type' => 'text',
+                            'props' => ['text' => 'In Arbeit'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '13px', 'fontWeight' => '700', 'letterSpacing' => '2px',
+                                'textTransform' => 'uppercase', 'color' => '@accent', 'margin' => ['bottom' => '16px'],
+                            ]],
+                        ],
+                        self::heading('start-heading', $siteName, 1),
+                        [
+                            'id' => 'start-intro',
+                            'type' => 'text',
+                            'props' => ['text' => 'Hier entsteht eine neue Webpräsenz.'],
+                            'style' => ['desktop' => [
+                                'fontSize' => '21px', 'maxWidth' => '38ch',
+                                'margin' => ['left' => 'auto', 'right' => 'auto', 'bottom' => '0px'],
+                            ]],
+                        ],
+                        [
+                            'id' => 'start-rule',
+                            'type' => 'divider',
+                            'style' => ['desktop' => ['width' => '72px', 'margin' => ['top' => '40px', 'right' => 'auto', 'bottom' => '22px', 'left' => 'auto']]],
+                        ],
+                        [
+                            'id' => 'start-note',
+                            'type' => 'text',
+                            'props' => ['text' => 'Erstellt mit KantSites'],
+                            'style' => ['desktop' => ['fontSize' => '14px', 'letterSpacing' => '0.4px', 'margin' => ['bottom' => '0px']]],
+                        ],
+                    ],
+                ],
             ],
         ];
     }
@@ -164,6 +205,13 @@ final class DemoContent
         return $areas;
     }
 
+    /**
+     * The header and footer a fresh installation starts with. They are ordinary block documents:
+     * everything in them can be changed, moved or removed in the editor. No main heading, because
+     * every page brings its own.
+     *
+     * @return array<string, array{name: string, document: array}>
+     */
     public static function areas(): array
     {
         $row = static fn (string $id, array $children): array => [

src/Content/Theme.php

@@ -68,6 +68,10 @@ final class Theme
             'linkColor' => '@link',
             'containerWidth' => '1240px',
             'headingScale' => 1.25,
+            // Die Ecken jedes Bildes auf der Website. Stand bis 1.20.2 fest im Stylesheet -
+            // sichtbar gerundet, aber in keinem Feld zu finden. 12px bleibt die Vorgabe,
+            // damit bestehende Websites gleich aussehen; 0px macht Bilder eckig.
+            'imageRadius' => '12px',
             // Unterstrichene Links im Fließtext. An, weil ein Link, den nur die Farbe verrät,
             // für Menschen mit Farbsehschwäche kein Link ist. Wer eine ruhigere Seite will,
             // schaltet es hier ab - dann bleibt der Unterstrich beim Überfahren.
@@ -229,7 +233,7 @@ final class Theme
             }
             $base[$field] = $value;
         }
-        foreach (['fontSize', 'containerWidth'] as $field) {
+        foreach (['fontSize', 'containerWidth', 'imageRadius'] as $field) {
             $value = trim((string) ($input[$field] ?? $base[$field]));
             if (1 !== preg_match(StyleSchema::LENGTH, $value)) {
                 throw new InvalidPage(sprintf('„%s“ ist keine Größenangabe wie 18px oder 70rem.', $value));
@@ -338,6 +342,7 @@ final class Theme
         }
         $base = $theme['base'];
         $variables[] = sprintf('--k-container:%s', $base['containerWidth']);
+        $variables[] = sprintf('--k-image-radius:%s', $base['imageRadius']);
 
         $colour = static fn (string $v): string => str_starts_with($v, '@') ? sprintf('var(--k-%s)', substr($v, 1)) : $v;
 

templates/admin/theme.html.twig

@@ -162,6 +162,11 @@
                         <input id="base-scale" name="base[headingScale]" type="number" step="0.01" min="1" max="2" value="{{ theme.base.headingScale }}">
                         <p class="field-help">1,25 ergibt eine ruhige Staffelung, 1,5 eine sehr kontrastreiche.</p>
                     </div>
+                    <div>
+                        <label for="base-image-radius">Bildecken</label>
+                        <input id="base-image-radius" name="base[imageRadius]" value="{{ theme.base.imageRadius }}" placeholder="12px">
+                        <p class="field-help">Gilt für jedes Bild auf der Website – auch in Galerien, Logoleisten und Beitragslisten. <code>0px</code> macht sie eckig. Ein einzelnes Bild lässt sich im Editor unter <strong>Design → Bild → Bildecken</strong> abweichend einstellen.</p>
+                    </div>
                     <div>
                         <label for="base-container">Inhaltsbreite</label>
                         <input id="base-container" name="base[containerWidth]" value="{{ theme.base.containerWidth }}" placeholder="1240px">

tests/CmsTest.php

@@ -3111,6 +3111,34 @@ final class CmsTest extends TestCase
         $code->assertScriptsUnchanged($added, $before);
     }
 
+    public function testImageCornersComeFromTheDesignAreaAndCanBeSquare(): void
+    {
+        // Die Ecken jedes Bildes standen fest im Stylesheet: sichtbar gerundet, in keinem Feld
+        // zu finden, nur durch einen eigenen Wert am Block loszuwerden. Jetzt gehoeren sie dem
+        // Designbereich - mit derselben Vorgabe wie vorher, damit sich nichts veraendert.
+        $theme = $this->themes->load();
+        self::assertSame('12px', $theme['base']['imageRadius'], 'Die Vorgabe bleibt, was vorher im Stylesheet stand.');
+
+        $document = DemoContent::starter('Mit Bild');
+        $document['blocks'][0]['children'][] = ['id' => 'bild', 'type' => 'image', 'props' => ['src' => '/assets/image-placeholder.svg', 'alt' => 'Platzhalter', 'decorative' => false, 'width' => 1000, 'height' => 600]];
+        $id = $this->publishedPage('ecken', 'Ecken');
+        $stand = $this->pages->findForEditor($id);
+        $this->pages->publish($id, $this->pages->saveDraft($id, $document, $stand['version']), $this->pages->findForEditor($id)['version']);
+
+        self::assertStringContainsString('--k-image-radius:12px', $this->request('/ecken')->getContent());
+
+        // Eckig, wie es eine Vorlage ohne Rundungen braucht.
+        $this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => '0px']);
+        self::assertStringContainsString('--k-image-radius:0px', $this->request('/ecken')->getContent());
+
+        // Und was keine Groessenangabe ist, wird abgewiesen - wie bei der Inhaltsbreite.
+        try {
+            $this->themes->save($theme['colors'], $theme['fonts'], [...$theme['base'], 'imageRadius' => 'rund']);
+            self::fail('„rund“ ist keine Groessenangabe.');
+        } catch (InvalidPage) {
+        }
+    }
+
     public function testSavingTextTwiceKeepsAmpersandsAndLineBreaksAsTheyAre(): void
     {
         // Umut: „Beim Startseitenbild wird & umgewandelt, aber nach dem Speichern steht &

tests/InstallFlowTest.php

@@ -98,7 +98,7 @@ final class InstallFlowTest extends TestCase
         $home = $this->request('/');
         self::assertSame(200, $home->getStatusCode());
         self::assertStringContainsString('Beispiel GmbH', $home->getContent());
-        self::assertStringContainsString('Diese Seite ist der Anfang.', $home->getContent());
+        self::assertStringContainsString('Hier entsteht eine neue Webpräsenz.', $home->getContent());
         // The public page is still a public page: no script, and the header carries the name.
         self::assertStringContainsString("script-src 'none'", (string) $home->headers->get('Content-Security-Policy'));
         self::assertSame(200, $this->request('/impressum')->getStatusCode());