Feinschliff: Navigation, Hero-Center, Personen-Karten & Tokens

Querschnitt-Verbesserungen ohne eigenes Feature:
- Navigation: Untermenü-Trenner (separator) + Mitmachen-Link, rote Akzent-Leiste
- Startseiten-Hero zentriert (align center, ohne Hero-CTAs); .hero--center-Styles
- person-card/person-grid: Kontakt-Layout, 3-Spalten-Raster (Startseite)
- jsonld: geo aus club.json; cta unterstützt #hash-Anker
- verein: hartcodierten Maps-Link/Inline-CTA entfernt, .facility zentriert
- tokens: Sepia-Farben für Timeline; base: globale p-max-width entfernt
- historie: Timeline um 2024/2025 ergänzt
- Icons link-45deg (Footer) und robot (meta) nachgereicht

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HGzc6GhWhmLJt1jC2q1SRZ

public/assets/css/components.css

@@ -91,6 +91,16 @@
     margin-inline: auto;
 }
 
+/* letter-spacing schiebt zentrierten Text optisch nach rechts (Spacing nach letztem Char).
+   text-indent gleich dem letter-spacing-Wert kompensiert das. */
+.hero--center .hero__tagline {
+    text-indent: 0.14em;
+}
+
+.hero--center.hero--display .hero__tagline {
+    text-indent: 0.1em;
+}
+
 .hero--center .hero__actions {
     justify-content: center;
 }
@@ -103,6 +113,13 @@
         linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.45) 55%, var(--clr-bg) 100%);
 }
 
+/* Center+Display: kein Seitenverlauf, nur zentrales Abdunkeln für Lesbarkeit */
+.hero--center.hero--display .hero__media::after {
+    background:
+        radial-gradient(ellipse 80% 60% at 50% 40%, rgb(10 10 10 / 0.5) 0%, transparent 100%),
+        linear-gradient(180deg, rgb(20 20 20 / 0.2) 0%, rgb(20 20 20 / 0.5) 55%, var(--clr-bg) 100%);
+}
+
 .hero__kicker {
     display: flex;
     align-items: center;
@@ -122,6 +139,19 @@
     border-radius: 2px;
 }
 
+/* Kicker zentriert: Text mittig, Akzentlinie beidseitig (— Text —) */
+.hero--center .hero__kicker {
+    justify-content: center;
+}
+
+.hero--center .hero__kicker::after {
+    content: '';
+    width: 3rem;
+    height: 4px;
+    background: var(--clr-accent);
+    border-radius: 2px;
+}
+
 .hero--display .hero__title {
     font-size: clamp(3.5rem, 2rem + 7.5vw, 7.5rem);
 }
@@ -287,13 +317,6 @@
     box-shadow: var(--shadow-card);
 }
 
-/* Mannschafts-„Über"-Sektion: ruhiges 4:3-Bild (nicht zu hoch), mit dem Text ausbalanciert. */
-#ueber .split__img {
-    aspect-ratio: 4 / 3;
-    object-fit: cover;
-    object-position: center top;
-}
-
 @media (max-width: 992px) {
     .split__inner {
         grid-template-columns: 1fr;
@@ -491,7 +514,7 @@
 .timeline__figure {
     margin: 0;
     padding: 0.9rem 0.9rem 1.1rem;
-    background: #f3efe4;
+    background: var(--clr-sepia-bg);
     border-radius: 3px;
     box-shadow: 0 12px 35px rgb(0 0 0 / 0.5);
     transform: rotate(-1.2deg);
@@ -516,7 +539,7 @@
     padding-top: 0.9rem;
     font-size: var(--fs-500);
     line-height: 1.45;
-    color: #3a372f;
+    color: var(--clr-sepia-text);
 }
 
 /* Scroll-Reveal nur mit JS (js-reveal), sonst alles sichtbar */
@@ -805,18 +828,36 @@
 
 /* Max. 5 pro Reihe; unvollständige Reihen zentrieren sich automatisch */
 .persons__grid {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
     gap: 1.25rem;
     margin-top: 2.25rem;
     text-align: left;
 }
 
-.persons__grid > li {
-    flex: 0 1 calc((100% - 5rem) / 5);
-    min-width: 170px;
-    max-width: 250px;
+/* Fixe Spaltenanzahl (z. B. 3 für 2×3-Layout auf der Startseite) */
+.persons__grid--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+}
+
+@media (max-width: 992px) {
+    .persons__grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (max-width: 768px) {
+    .persons__grid,
+    .persons__grid--cols-3 {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 500px) {
+    .persons__grid,
+    .persons__grid--cols-3 {
+        grid-template-columns: 1fr;
+    }
 }
 
 .person-card {
@@ -3492,9 +3533,14 @@
 }
 
 /* === facility (Gelände / Drohnen-Luftbild auf der Vereinsseite) === */
+.facility > .container {
+    text-align: center;
+}
+
 .facility__lead {
     max-width: 70ch;
     margin-top: 1rem;
+    margin-inline: auto;
     color: var(--clr-text-muted);
 }