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
2026-06-20 20:49:46 +02:00
parent a3d64e7d91
commit adf142b18e
18 changed files with 190 additions and 82 deletions
--- a/public/assets/css/base.css
+++ b/public/assets/css/base.css
@@ -59,9 +59,6 @@ h4 { font-size: 1.625rem; }
 h5,
 h6 { font-size: var(--fs-600); }

-p {
-    max-width: 70ch;
-}

 a {
    color: inherit;
--- a/public/assets/css/components.css
+++ b/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);
 }

--- a/public/assets/css/layout.css
+++ b/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) {
--- a/public/assets/css/tokens.css
+++ b/public/assets/css/tokens.css
@@ -16,6 +16,8 @@
    --clr-text:          #ffffff;
    --clr-text-muted:    #b3b3b3;            /* 7.7:1 auf --clr-bg */
    --clr-text-faint:    #8c8c8c;            /* 4.5:1 auf --clr-bg (AA) */
+    --clr-sepia-bg:      #f3efe4;            /* Timeline-Museumsrahmen (Foto-Mount) */
+    --clr-sepia-text:    #3a372f;            /* Timeline-Text auf hellem Sepia-Grund */
    --clr-glass-bg:      rgb(255 255 255 / 0.11);
    --clr-glass-border:  rgb(255 255 255 / 0.22);
    --clr-glass-border-strong: rgb(255 255 255 / 0.4); /* Formularfelder: ≥3:1 Kontrast (WCAG 1.4.11) */