Vereinshistorie-Seite: kompakter Hero, interaktive Museums-Timeline (Scroll-Reveal, Jahres-Sprungnav), Originalbilder unverändert

routes.php enthält auch die fussball-Route (User-WIP, Seite existiert)

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

app/components/timeline.php

@@ -0,0 +1,57 @@
+<?php
+
+declare(strict_types=1);
+
+/**
+ * Interaktive Vereins-Timeline (Museums-Look). Props:
+ *   $events array — Stationen aus data/historie.json (year, text, image{src,width,height,alt})
+ * Bilder werden bewusst in ORIGINALGRÖSSE eingebunden (keine Varianten) —
+ * historisches Material bleibt unangetastet.
+ * timeline.js ergänzt Scroll-Reveal + aktive Jahres-Navigation; ohne JS ist
+ * alles sichtbar (Initial-Versteckt-Zustand nur unter .js-reveal).
+ */
+
+// Anker je Jahr — Duplikate (2x 1972) bekommen einen Suffix, die Jahres-Nav
+// führt auf das jeweils erste Vorkommen.
+$seen = [];
+$prepared = [];
+foreach ($events as $event) {
+    $slug = 'jahr-' . strtolower(preg_replace('/[^a-zA-Z0-9]+/', '-', $event['year']));
+    $first = !isset($seen[$slug]);
+    $seen[$slug] = ($seen[$slug] ?? 0) + 1;
+    $prepared[] = $event + [
+        'id'  => $first ? $slug : $slug . '-' . $seen[$slug],
+        'nav' => $slug,
+    ];
+}
+?>
+        <section class="section timeline-section" data-timeline>
+            <div class="container">
+                <nav class="timeline-nav" aria-label="Zeitsprünge">
+                    <ol class="timeline-nav__list">
+<?php foreach ($prepared as $event): ?>
+<?php if ($event['id'] === $event['nav']): ?>
+                        <li><a href="#<?= e($event['nav']) ?>"><?= e($event['year']) ?></a></li>
+<?php endif; ?>
+<?php endforeach; ?>
+                    </ol>
+                </nav>
+                <ol class="timeline">
+<?php foreach ($prepared as $i => $event): ?>
+                    <li class="timeline__event" id="<?= e($event['id']) ?>" data-nav="<?= e($event['nav']) ?>">
+                        <span class="timeline__marker" aria-hidden="true"></span>
+                        <article class="timeline__card">
+                            <h2 class="timeline__year"><?= e($event['year']) ?></h2>
+                            <figure class="timeline__figure">
+                                <img src="<?= e(asset($event['image']['src'])) ?>"
+                                    alt="<?= e($event['image']['alt']) ?>"
+                                    width="<?= e($event['image']['width']) ?>" height="<?= e($event['image']['height']) ?>"
+                                    loading="<?= $i === 0 ? 'eager' : 'lazy' ?>" decoding="async">
+                                <figcaption class="timeline__text"><?= e($event['text']) ?></figcaption>
+                            </figure>
+                        </article>
+                    </li>
+<?php endforeach; ?>
+                </ol>
+            </div>
+        </section>