Vier Darstellungen fuer die Beitragsliste

Karten (Raster mit Bild oben), Liste (Bild links, Text rechts), Kompakt
(nur Titel und Datum) und Wechselseitig (Bild mal links, mal rechts).
Dieselben Daten, dasselbe Markup - nur eine Klasse wechselt.

Die erste Fassung von "Wechselseitig" war ein umgedrehter Flexkasten und
sah auch so aus. Jetzt sitzt das Bild in einer Karte mit Ecken, Schatten
und festem Verhaeltnis, der Text hat eine Nummer aus einem CSS-Zaehler,
eine begrenzte Zeilenlaenge und einen sichtbaren Verweis, und zwischen den
Reihen liegt eine feine Linie.

Zwei Details: die Karte ist das Listenelement, also zaehlt :nth-child auf
ihr - die erste Fassung wechselte deshalb gar nicht. Und die Umkehrung
laeuft ueber order statt row-reverse, damit auf dem Telefon sauber wieder
Bild ueber Text steht.

Geprueft: 399 Tests unter PHP 8.2 und 8.4, 18 JS-Tests, Editortest,
Browserpruefung, axe ohne Verstoss auf allen vier Darstellungen.

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

tests/CmsTest.php

@@ -718,6 +718,55 @@ final class CmsTest extends TestCase
         self::assertStringContainsString("'pointerdown', 'keydown', 'touchstart', 'wheel'", $skript);
     }
 
+    public function testTheSamePostsCanBeShownInThreeWays(): void
+    {
+        // Umut wollte auch für die Auflistung mehrere Darstellungen. Es sind dieselben Daten und
+        // dasselbe Markup - nur die Klasse wechselt, damit eine Darstellung nichts kostet außer
+        // ein paar Regeln CSS.
+        $this->publishedPost('projekt-eins', 'Projekt eins', '2026-02-01', ['Projekte'], []);
+
+        // Jeder Schritt hebt die Fassung um eins: erst das Speichern, dann das Veröffentlichen.
+        $version = 0;
+        foreach (['karten', 'liste', 'kompakt', 'wechsel'] as $art) {
+            $document = DemoContent::starter('Übersicht');
+            $document['schemaVersion'] = 18;
+            $document['blocks'][] = ['id' => 'liste', 'type' => 'postlist', 'props' => [
+                'count' => 4, 'category' => 'projekte', 'tag' => '', 'layout' => $art,
+            ]];
+            $revision = $this->pages->saveDraft('page-1', $document, $version);
+            $this->pages->publish('page-1', $revision, ++$version);
+            ++$version;
+
+            $html = $this->request('/')->getContent();
+            self::assertStringContainsString('post-list post-list-'.$art, $html, $art);
+            self::assertStringContainsString('Projekt eins', $html, $art);
+        }
+
+        // Wechselseitig kehrt jede zweite Zeile um - die Karte selbst ist das Listenelement,
+        // also zählt nth-child auf ihr und nicht eine Ebene tiefer.
+        $css = (string) file_get_contents(__DIR__.'/../public/assets/site.css');
+        self::assertStringContainsString('.post-list-wechsel .post-card:nth-child(even) .post-image{order:2}', $css);
+        // Und die Nummer kommt aus einem Zähler, nicht aus dem Inhalt: eine Liste, die auf Seite
+        // zwei wieder bei 01 beginnt, wäre falsch beschriftet, aber sie wäre ehrlich - der Inhalt
+        // weiß nicht, der wievielte Beitrag er ist.
+        self::assertStringContainsString('counter-increment:beitrag', $css);
+
+        // Die kompakte Darstellung lässt die Bilder ganz weg - sonst wäre sie nicht kompakt.
+        $document = DemoContent::starter('Übersicht');
+        $document['schemaVersion'] = 18;
+        $document['blocks'][] = ['id' => 'liste', 'type' => 'postlist', 'props' => ['count' => 4, 'category' => 'projekte', 'tag' => '', 'layout' => 'kompakt']];
+        $revision = $this->pages->saveDraft('page-1', $document, $version);
+        $this->pages->publish('page-1', $revision, ++$version);
+        self::assertStringNotContainsString('post-image', $this->request('/')->getContent());
+
+        // Und eine erfundene Darstellung wird abgewiesen, statt still auf etwas zurückzufallen.
+        $document = DemoContent::starter('Übersicht');
+        $document['schemaVersion'] = 18;
+        $document['blocks'][] = ['id' => 'liste', 'type' => 'postlist', 'props' => ['count' => 4, 'layout' => 'kacheln']];
+        $this->expectException(InvalidDocument::class);
+        (new DocumentValidator())->validate($document);
+    }
+
     public function testANewPostStartsFromOneOfThreeLayouts(): void
     {
         // Umut wollte mehrere Aufbauten zur Auswahl. Ein leeres Dokument ist für eine Seite