feat: add Chronik block support and implement timeline display

Added a new Chronik block feature with PHP templates to render the timeline design, updated blueprint files to define Chronik-specific fields, and migrated related content into structured formats. Introduced a visually structured timeline with left/right alignment support for chronological events.

site/blueprints/pages/blockpage.yml

@@ -15,4 +15,26 @@ fields:
         fields:
           fen:
             type: text
-            label: FEN-Position
+            label: FEN-Position
+      - type: chronik
+        label: Chronik
+        fields:
+          kind:
+            label: Art der Chronik
+            type: radio
+            options:
+              left: Links
+              right: Rechts
+            default: left
+          year:
+            label: Zeitraum
+            type: text
+          summary:
+            label: Zusammenfassung
+            type: textarea
+          description:
+            label: Beschreibung
+            type: textarea
+          image:
+            label: Bild
+            type: files

site/snippets/blocks/chronik.php

@@ -0,0 +1,52 @@
+<div class="flex flex-row w-full">
+    <!-- left col -->
+    <div class="w-2/5 px-2 py-10">
+        <?php if ($block->kind() == "left"): ?>
+            <div class="text-gray-600">
+                <div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-right">
+                    <?php if ($block->image()->isNotEmpty()): ?>
+                        <img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
+                    <?php endif ?>
+                    <div class="text-gray-600 py-4">
+                        <div class="text-3xl font-bold"><?= $block->year() ?></div>
+                    </div>
+                    <div class="text-sf_grau-700 font-bold py-2">
+                        <p><?= $block->summary() ?></p>
+                    </div>
+                    <div class="text-gray-600">
+                        <p><?= $block->description() ?></p>
+                    </div>
+                </div>
+            </div>
+        <?php endif ?>
+    </div>
+    <!--line column-->
+    <div class="w-1/5  flex justify-center">
+        <div class="relative flex h-full w-1 bg-sf_gelb-500 items-center justify-center">
+            <div class="absolute flex flex-col justify-center h-24 w-24 rounded-full border-4 border-sf_gelb-500 leading-none text-center z-10 bg-white font-thin">
+                <div><?= $block->year() ?></div>
+            </div>
+        </div>
+    </div>
+    <!--right column-->
+    <div class="w-2/5 px-2 py-10 ">
+        <?php if ($block->kind() == "right"): ?>
+            <div class="text-gray-600">
+                <div class="flex flex-col w-full rounded-lg shadow bg-white px-4 py-5 text-left">
+                    <?php if ($block->image()->isNotEmpty()): ?>
+                        <img class="pb-2" src="<?= $block->image()->toFile()->url() ?>" alt="">
+                    <?php endif ?>
+                    <div class="text-gray-600 py-4">
+                        <div class="text-3xl font-bold"><?= $block->year() ?></div>
+                    </div>
+                    <div class="text-sf_grau-700 font-bold py-2">
+                        <p><?= $block->summary() ?></p>
+                    </div>
+                    <div class="text-gray-600">
+                        <p><?= $block->description() ?></p>
+                    </div>
+                </div>
+            </div>
+        <?php endif ?>
+    </div>
+</div>