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>

public/assets/css/components.css

@@ -289,6 +289,184 @@
     color: var(--clr-text-muted);
 }
 
+/* === timeline (Vereinshistorie, Museums-Look) === */
+.timeline-intro {
+    max-width: 60ch;
+    margin-inline: auto;
+    padding-block: 2.5rem 0;
+    text-align: center;
+    color: var(--clr-text-muted);
+}
+
+/* Sprung-Navigation: Jahres-Pills, klebt beim Scrollen oben */
+.timeline-nav {
+    position: sticky;
+    top: 1rem;
+    z-index: 5;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 3rem;
+}
+
+.timeline-nav__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.4rem;
+    padding: 0.4rem;
+    background: rgb(10 10 10 / 0.82);
+    border: 1px solid var(--clr-glass-border);
+    border-radius: 999px;
+    backdrop-filter: blur(6px);
+}
+
+.timeline-nav a {
+    display: inline-block;
+    padding: 0.35em 1em;
+    font-family: var(--ff-heading);
+    font-size: var(--fs-500);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: var(--clr-text-muted);
+    border-radius: 999px;
+    transition: color var(--transition), background var(--transition);
+}
+
+.timeline-nav a:hover {
+    color: var(--clr-text);
+}
+
+.timeline-nav a.is-active {
+    color: var(--clr-text);
+    background: var(--clr-accent);
+}
+
+/* Mittellinie + Stationen */
+.timeline {
+    position: relative;
+    display: grid;
+    gap: 4.5rem;
+    padding-block: 1rem 2rem;
+}
+
+.timeline::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 2px;
+    transform: translateX(-50%);
+    background: linear-gradient(180deg,
+        transparent,
+        rgb(var(--clr-accent-rgb) / 0.55) 6%,
+        rgb(var(--clr-accent-rgb) / 0.55) 94%,
+        transparent);
+}
+
+.timeline__event {
+    position: relative;
+    width: calc(50% - 3.5rem);
+}
+
+.timeline__event:nth-child(even) {
+    margin-left: auto;
+}
+
+.timeline__marker {
+    position: absolute;
+    top: 0.6rem;
+    left: calc(100% + 3.5rem);
+    width: 16px;
+    height: 16px;
+    transform: translateX(-50%);
+    background: var(--clr-accent);
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px rgb(var(--clr-accent-rgb) / 0.25), 0 0 18px rgb(var(--clr-accent-rgb) / 0.5);
+}
+
+.timeline__event:nth-child(even) .timeline__marker {
+    left: -3.5rem;
+}
+
+.timeline__year {
+    font-size: var(--fs-900);
+    color: var(--clr-accent);
+    text-shadow: 0 2px 18px rgb(0 0 0 / 0.5);
+    margin-bottom: 1rem;
+}
+
+.timeline__event:nth-child(odd) .timeline__year {
+    text-align: right;
+}
+
+/* Museums-Rahmen: Foto wie ein aufgezogener Print, leicht gedreht */
+.timeline__figure {
+    margin: 0;
+    padding: 0.9rem 0.9rem 1.1rem;
+    background: #f3efe4;
+    border-radius: 3px;
+    box-shadow: 0 12px 35px rgb(0 0 0 / 0.5);
+    transform: rotate(-1.2deg);
+    transition: transform var(--transition);
+}
+
+.timeline__event:nth-child(even) .timeline__figure {
+    transform: rotate(1.2deg);
+}
+
+.timeline__event:hover .timeline__figure {
+    transform: rotate(0deg) scale(1.02);
+}
+
+.timeline__figure img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+
+.timeline__text {
+    padding-top: 0.9rem;
+    font-size: var(--fs-500);
+    line-height: 1.45;
+    color: #3a372f;
+}
+
+/* Scroll-Reveal nur mit JS (js-reveal), sonst alles sichtbar */
+.js-reveal .timeline__event {
+    opacity: 0;
+    translate: 0 28px;
+    transition: opacity 600ms ease, translate 600ms ease;
+}
+
+.js-reveal .timeline__event.is-visible {
+    opacity: 1;
+    translate: 0 0;
+}
+
+@media (max-width: 768px) {
+    .timeline::before {
+        left: 8px;
+    }
+
+    .timeline__event,
+    .timeline__event:nth-child(even) {
+        width: auto;
+        margin-left: 0;
+        padding-left: 2.5rem;
+    }
+
+    .timeline__marker,
+    .timeline__event:nth-child(even) .timeline__marker {
+        left: 8px;
+    }
+
+    .timeline__event:nth-child(odd) .timeline__year {
+        text-align: left;
+    }
+}
+
 /* === partners === */
 .partners > .container {
     text-align: center;

public/assets/js/timeline.js

@@ -0,0 +1,52 @@
+/* Timeline: Scroll-Reveal der Stationen + aktive Jahres-Navigation.
+   Progressive Enhancement — ohne JS ist alles sichtbar (js-reveal-Scope). */
+(function () {
+    'use strict';
+
+    var section = document.querySelector('[data-timeline]');
+    if (!section) {
+        return;
+    }
+
+    var events = section.querySelectorAll('.timeline__event');
+    var navLinks = section.querySelectorAll('.timeline-nav a');
+
+    if (!('IntersectionObserver' in window)) {
+        return;
+    }
+
+    section.classList.add('js-reveal');
+
+    var reveal = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('is-visible');
+                reveal.unobserve(entry.target);
+            }
+        });
+    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
+
+    // Aktives Jahr in der Sprung-Navigation markieren.
+    var spy = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+            if (!entry.isIntersecting) {
+                return;
+            }
+            var target = '#' + entry.target.getAttribute('data-nav');
+            navLinks.forEach(function (link) {
+                var active = link.getAttribute('href') === target;
+                link.classList.toggle('is-active', active);
+                if (active) {
+                    link.setAttribute('aria-current', 'true');
+                } else {
+                    link.removeAttribute('aria-current');
+                }
+            });
+        });
+    }, { rootMargin: '-35% 0px -55% 0px' });
+
+    events.forEach(function (event) {
+        reveal.observe(event);
+        spy.observe(event);
+    });
+})();