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/layout.css

@@ -60,7 +60,14 @@
 .site-header__actions {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
+    gap: 0.5rem;
+}
+
+/* Header-CTAs haben eine eigene, kompakte Größe (kein generisches sm/lg-Preset):
+   etwas dezentere Schrift als Standard-Buttons, engeres L/R-Padding. */
+.site-header__actions .btn {
+    font-size: var(--fs-400);
+    padding-inline: 0.9em;
 }
 
 /* --- Navigation --- */
@@ -149,24 +156,33 @@
     position: absolute;
     top: calc(100% + 0.4rem);
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-50%) scale(0.97);
+    transform-origin: top center;
     z-index: 25;
     display: grid;
-    gap: 0.35rem;
-    min-width: 13rem;
+    gap: 0.2rem;
+    min-width: 15rem;
     margin: 0;
-    padding: 0.6rem;
+    /* Mehr Luft links/rechts, damit die abgerundeten Hover-Pillen klar rauskommen. */
+    padding: 0.55rem 0.85rem;
     list-style: none;
-    background: var(--clr-bg-deep);
+    /* Glasiges, leicht transluzentes Panel mit Tiefe über der Hintergrund-Textur. */
+    background: rgb(20 20 20 / 0.96);
     border: 1px solid var(--clr-glass-border);
     border-radius: var(--radius-card);
     box-shadow: var(--shadow-card);
-    /* Clippt die Hover-Flächen sauber an den abgerundeten Ecken (kein Überstehen). */
-    overflow: hidden;
-    /* Sanftes Einblenden statt hartem display-Wechsel (animierbar). */
+    /* Sanftes Einblenden + leichtes Hochgleiten/Scale statt hartem display-Wechsel. */
     opacity: 0;
     visibility: hidden;
-    transition: opacity var(--transition), top var(--transition), visibility var(--transition);
+    transition: opacity var(--transition), top var(--transition),
+                transform var(--transition), visibility var(--transition);
+}
+
+@supports (backdrop-filter: blur(1px)) {
+    .site-nav__submenu {
+        background: rgb(20 20 20 / 0.82);
+        backdrop-filter: blur(14px) saturate(1.4);
+    }
 }
 
 .site-nav__item--has-submenu:hover > .site-nav__submenu,
@@ -174,29 +190,61 @@
 .site-nav__sublink[aria-expanded="true"] + .site-nav__submenu {
     opacity: 1;
     visibility: visible;
-    top: calc(100% + 0.75rem);
+    top: calc(100% + 0.7rem);
+    transform: translateX(-50%) scale(1);
 }
 
 .site-nav__list .site-nav__submenu a:not(.btn) {
+    position: relative;
     display: block;
-    padding: 0.6rem 0.85rem;
+    padding: 0.65rem 0.9rem 0.65rem 1rem;
     border-bottom: 0;
     border-radius: var(--radius-btn);
     font-size: var(--fs-500);
     line-height: 1.25;
     white-space: nowrap;
-    transition: background var(--transition), color var(--transition);
+    transition: background var(--transition), color var(--transition),
+                padding-left var(--transition);
+}
+
+/* Rote Akzent-Leiste links, die beim Hover/aktiver Seite reinwächst. */
+.site-nav__list .site-nav__submenu a:not(.btn)::before {
+    content: "";
+    position: absolute;
+    left: 0.4rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 0;
+    border-radius: 3px;
+    background: var(--clr-accent);
+    transition: height var(--transition);
 }
 
 .site-nav__list .site-nav__submenu a:not(.btn):hover,
 .site-nav__list .site-nav__submenu a:not(.btn):focus-visible {
     border-bottom: 0;
-    background: rgb(var(--clr-accent-rgb) / 0.16);
+    padding-left: 1.25rem;
+    background: rgb(var(--clr-accent-rgb) / 0.14);
+}
+
+.site-nav__list .site-nav__submenu a:not(.btn):hover::before,
+.site-nav__list .site-nav__submenu a:not(.btn):focus-visible::before,
+.site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"]::before {
+    height: 1.1em;
 }
 
 .site-nav__list .site-nav__submenu a:not(.btn)[aria-current="page"] {
     border-bottom: 0;
-    background: rgb(var(--clr-accent-rgb) / 0.24);
+    padding-left: 1.25rem;
+    background: rgb(var(--clr-accent-rgb) / 0.2);
+}
+
+/* Letzter Dropdown-Punkt mit optischer Trennung (hairline oben + etwas Abstand) */
+.site-nav__submenu-sep {
+    border-top: 1px solid var(--clr-glass-border);
+    margin-top: 0.35rem;
+    padding-top: 0.35rem;
 }
 
 @media (max-width: 1249px) {