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/app/components/cta.php
+++ b/app/components/cta.php
@@ -12,4 +12,4 @@ $class = 'btn'
       . ($style === 'outline' ? ' btn--outline' : '')
       . ($size === 'lg' ? ' btn--lg' : ($size === 'sm' ? ' btn--sm' : ''));
 ?>
-<a class="<?= e($class) ?>" href="<?= e(url($cta['slug'])) ?>"><?= e($cta['label']) ?></a>
+<a class="<?= e($class) ?>" href="<?= e(url($cta['slug'])) . (!empty($cta['hash']) ? '#' . e($cta['hash']) : '') ?>"><?= e($cta['label']) ?></a>
--- a/app/components/jsonld.php
+++ b/app/components/jsonld.php
@@ -32,6 +32,11 @@ $clubNode = [
        'addressCountry'  => $club['address']['country'],
    ],
    'sameAs'        => array_values(array_filter($club['social'])),
+    'geo'           => [
+        '@type'     => 'GeoCoordinates',
+        'latitude'  => $club['geo']['lat'],
+        'longitude' => $club['geo']['lng'],
+    ],
 ];

 $graph = [
--- a/app/components/nav.php
+++ b/app/components/nav.php
@@ -38,7 +38,7 @@ $href = static function (string $slug): string {
                        <button class="site-nav__sublink" type="button" aria-expanded="false" aria-controls="<?= e($submenuId) ?>"<?= $childActive ? ' data-current' : '' ?>><?= e($item['label']) ?><?= icon('chevron-down', 'site-nav__chevron') ?></button>
                        <ul class="site-nav__submenu" id="<?= e($submenuId) ?>">
 <?php foreach ($item['children'] as $child): ?>
-                            <li>
+                            <li<?= !empty($child['separator']) ? ' class="site-nav__submenu-sep"' : '' ?>>
                                <a href="<?= e($href($child['slug'])) ?>"<?= $child['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($child['label']) ?></a>
                            </li>
 <?php endforeach; ?>
--- a/app/components/person-card.php
+++ b/app/components/person-card.php
@@ -5,10 +5,17 @@ declare(strict_types=1);
 /**
 * Visitenkarte für eine Person. Props:
 *   $person array{department, name, phone?, email?, image?, whatsapp?}
+ *   $level  string — Überschriften-Ebene des department-Headings (Default 'h3').
+ *           Eingebettet (z. B. in position-card unter einem h3) auf 'h4' setzen,
+ *           damit die Heading-Outline nicht abflacht. Styling bleibt klassenbasiert.
 * Ohne image greift der Platzhalter-Avatar (img/persons/platzhalter.jpg).
 * Kontakt-Link: phone → tel:, sonst email → mailto:.
 * Optional zusätzlich WhatsApp (wa.me) bei phone + whatsapp=true (opt-in pro Person).
 */
+$level = $level ?? 'h3';
+if (!in_array($level, ['h2', 'h3', 'h4', 'h5'], true)) {
+    $level = 'h3';
+}
 $image = $person['image'] ?? null;
 $src = $image ?: 'img/persons/platzhalter.jpg';

@@ -35,7 +42,7 @@ $waHref = (!empty($person['whatsapp']) && !empty($person['phone']))
                                width="480" height="600" loading="lazy" decoding="async">
                        </div>
                        <div class="person-card__body">
-                            <h3 class="person-card__department"><?= e($person['department']) ?></h3>
+                            <<?= $level ?> class="person-card__department"><?= e($person['department']) ?></<?= $level ?>>
                            <p class="person-card__name"><?= e($person['name']) ?></p>
 <?php if ($contactHref !== null): ?>
                            <a class="person-card__contact" href="<?= e($contactHref) ?>">
--- a/app/components/person-grid.php
+++ b/app/components/person-grid.php
@@ -11,10 +11,12 @@ declare(strict_types=1);
 *   $intro       string — Intro-Text überschreiben (Default aus JSON; '' = ausblenden).
 *   $anchor      string — Sektions-ID (Default 'ansprechpartner').
 *   $tinted      bool   — aufgehelltes Vollbreite-Band (Default true).
+ *   $columns     int    — Spaltenanzahl auf Desktop (null = automatisch bis 5).
 */
 $data = json_load('ansprechpartner');
 $anchor = $anchor ?? 'ansprechpartner';
 $tinted = $tinted ?? true;
+$columns = $columns ?? null;
 $title = $title ?? $data['title'];
 $intro = $intro ?? ($data['intro'] ?? '');

@@ -42,7 +44,7 @@ if ($persons === []) {
 <?php if ($intro !== ''): ?>
                <p class="persons__intro"><?= e($intro) ?></p>
 <?php endif; ?>
-                <ul class="persons__grid">
+                <ul class="persons__grid<?= $columns ? ' persons__grid--cols-' . (int)$columns : '' ?>">
 <?php foreach ($persons as $person): ?>
                    <li>
 <?php component('person-card', ['person' => $person]); ?>
--- a/app/pages/home.php
+++ b/app/pages/home.php
@@ -30,5 +30,6 @@ component('partner-grid', ['intro' => $home['partners']]);
 // vollständige Turn-Disziplin-Liste lebt auf /ansprechpartner.
 component('person-grid', [
    'departments' => ['Herrenfußball', 'Damenfußball', 'Jugendfußball', 'Erwachsenenturnen'],
+    'columns'     => 3,
 ]);
 component('contact-form', ['intro' => $home['contact']]);
--- a/app/pages/verein.php
+++ b/app/pages/verein.php
@@ -3,16 +3,11 @@
 declare(strict_types=1);

 /**
- * Vereins-Übersichtsseite (Hub). Inhalt: data/verein.json + data/club.json.
- * Struktur: Hero → Eckdaten (key-facts) → Leitbild (split) → Abteilungs-Kacheln →
- * Gelände/Drohnenbild → CTA → FAQ.
+ * Vereins-Übersichtsseite (Hub). Inhalt: data/verein.json.
+ * Struktur: Hero → Abteilungs-Kacheln → Gelände → Leitbild → Historien-Teaser → FAQ.
 */
 $page = json_load('verein');

-$club = json_load('club');
-$addr = $club['address'] ?? [];
-$mapsQuery = rawurlencode(trim(($addr['venue'] ?? '') . ', ' . ($addr['street'] ?? '') . ', ' . ($addr['zip'] ?? '') . ' ' . ($addr['city'] ?? ''), ', '));
-
 // Zwei Abteilungs-Kacheln. Turnen verlinkt bereits auf /turnen (Seite folgt).
 $cards = [
    [
@@ -44,19 +39,16 @@ $meta = [

 component('hero', ['hero' => $page['hero']]);

-component('key-facts', ['facts' => $page['facts'] ?? [], 'anchor' => 'eckdaten']);
-
-component('section', ['section' => $page['about']]);
-
 component('team-cards', [
    'teams'        => $cards,
    'title'        => 'Unsere Abteilungen',
+    'title_hidden' => true,
    'intro'        => $page['abteilungen_intro'] ?? '',
    'intro_below'  => true,
    'anchor'       => 'abteilungen',
 ]);
 ?>
-        <section class="section facility" id="gelaende">
+        <section class="section section--tinted facility" id="gelaende">
            <div class="container">
                <h2><?= e($page['gelaende']['title']) ?></h2>
                <p class="facility__lead"><?= e($page['gelaende']['text']) ?></p>
@@ -66,19 +58,12 @@ component('team-cards', [
                    <figcaption class="facility__caption"><?= e($page['gelaende']['caption']) ?></figcaption>
 <?php endif; ?>
                </figure>
-                <p class="facility__actions">
-                    <a class="btn btn--outline" href="https://www.google.com/maps/search/?api=1&amp;query=<?= e($mapsQuery) ?>" target="_blank" rel="noopener">Route planen<span class="visually-hidden"> (öffnet Google Maps in neuem Tab)</span></a>
-                </p>
+
            </div>
        </section>
 <?php
-component('cta-band', ['band' => [
-    'title' => 'Werde Teil des TSV 08',
-    'text'  => 'Ob Fußball oder Turnen – komm unverbindlich vorbei oder schreib uns. Wir finden gemeinsam die passende Gruppe für dich.',
-    'ctas'  => [
-        ['label' => 'Mitglied werden', 'slug' => 'mitglied-werden', 'style' => 'primary'],
-        ['label' => 'Kontakt aufnehmen', 'slug' => '#kontakt', 'style' => 'outline'],
-    ],
-]]);
+component('section', ['section' => $page['about']]);
+
+component('section', ['section' => $page['historie_teaser']]);

 component('faq', ['faq' => $page['faq'] ?? []]);
--- a/data/club.json
+++ b/data/club.json
@@ -11,6 +11,10 @@
    "city": "Kulmbach",
    "country": "DE"
  },
+  "geo": {
+    "lat": 50.0950,
+    "lng": 11.4372
+  },
  "email": "info@tsv08kulmbach.de",
  "email_turnen": "turnabteilung.tsv08kulmbach@gmail.com",
  "board": {
--- a/data/historie.json
+++ b/data/historie.json
@@ -38,9 +38,14 @@
      "image": { "src": "img/historie/1972-fcbayern.png", "width": 519, "height": 322, "alt": "Spiel gegen den FC Bayern München vor fast 10.000 Zuschauern, 1972" }
    },
    {
-      "year": "Heute",
+      "year": "2024",
      "text": "Mitten im schönen Katzbachtal liegt nun seit vielen Jahren die Hans-Rausch-Sportanlage des TSV 1908 Kulmbach. Unsere Sportstätte besteht aus einem Großfeldrasenplatz, einem Kleinfeldrasenplatz und einem Hartplatz, der auch im Winter das Training zulässt. Die komplette Sportanlage ist mit Flutlicht ausgestattet.",
      "image": { "src": "img/historie/heute.jpg", "width": 519, "height": 360, "alt": "Die Hans-Rausch-Sportanlage im Katzbachtal heute" }
+    },
+    {
+      "year": "2025",
+      "text": "Eine Drohnenaufnahme aus dem Jahr 2025 zeigt die Hans-Rausch-Sportanlage von oben: Rasenplatz, Hartplatz, Turnhalle und Sportheim auf einem Blick – mitten im Katzbachtal in Kulmbach.",
+      "image": { "src": "img/pages/vereinsgelaende-1000.jpg", "width": 1000, "height": 563, "alt": "Drohnenaufnahme der Hans-Rausch-Sportanlage im Katzbachtal 2025" }
    }
  ]
 }
--- a/data/home.json
+++ b/data/home.json
@@ -1,6 +1,6 @@
 {
    "hero": {
-        "align": "bottom-left",
+        "align": "center",
        "title": "TSV 08 Kulmbach",
        "tagline": "Dein Verein für Fußball & Turnen in Kulmbach",
        "text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis Kulmbach aktiv zu werden! Wir sind stolz, dir auf unserer Website einen Eindruck geben zu können, was dich bei uns erwartet. Du willst selbst aktiv werden? Dann zögere nicht, uns zu kontaktieren.",
@@ -14,20 +14,7 @@
            "alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen"
        },
        "video": "video/hero.mp4",
-        "ctas": [
-            {
-                "label": "Jugendfußball",
-                "slug": "jugendfussball",
-                "style": "primary",
-                "size": "lg"
-            },
-            {
-                "label": "Mitglied werden",
-                "slug": "mitglied-werden",
-                "style": "outline",
-                "size": "lg"
-            }
-        ],
+        "ctas": [],
        "display": true,
        "kicker": "Seit 1908 im Katzbachtal"
    },
--- a/data/navigation.json
+++ b/data/navigation.json
@@ -9,8 +9,8 @@
        { "label": "1. Mannschaft", "slug": "fussball/erste-mannschaft" },
        { "label": "2. Mannschaft", "slug": "fussball/zweite-mannschaft" },
        { "label": "Damenmannschaft", "slug": "fussball/damen" },
-        { "label": "Matchcenter", "slug": "matchcenter" },
-        { "label": "Jugendfußball", "slug": "jugendfussball" }
+        { "label": "Jugendfußball", "slug": "jugendfussball" },
+        { "label": "Matchcenter", "slug": "matchcenter", "separator": true }
      ]
    },
    {
@@ -30,14 +30,15 @@
      "slug": "verein",
      "children": [
        { "label": "Übersicht", "slug": "verein" },
-        { "label": "Historie", "slug": "historie" },
        { "label": "Ansprechpartner", "slug": "ansprechpartner" },
-        { "label": "Sportheimbuchung", "slug": "sportheimbuchung" },
+        { "label": "Historie", "slug": "historie" },
+        { "label": "Sportheimbuchung", "slug": "sportheimbuchung", "separator": true },
        { "label": "Partner werden", "slug": "partner-werden" }
      ]
    }
  ],
  "ctas": [
+    { "label": "Mitmachen", "slug": "mitmachen", "style": "outline" },
    { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "primary" }
  ],
  "legal": [
--- a/data/verein.json
+++ b/data/verein.json
@@ -26,9 +26,23 @@
      "base": "img/pages/sportheim",
      "widths": [640, 1000],
      "alt": "Sportheim des TSV 08 Kulmbach mit Pokalen und Vereinswappen"
-    }
+    },
+    "cta": { "label": "Sportheim buchen", "slug": "sportheimbuchung", "style": "outline" }
  },
  "abteilungen_intro": "Zwei Abteilungen, ein Verein – wähle deinen Sport.",
+  "historie_teaser": {
+    "id": "historie",
+    "title": "Unsere Geschichte",
+    "text": "Wir sind seit über 100 Jahren dein Sportverein in der Kulmbacher Region. Erlebe unsere einzigartige Geschichte und die Entstehung der Hans-Rausch-Sportanlage.",
+    "flip": true,
+    "image": {
+      "src": "img/pages/vereinshistorie-519.jpg",
+      "width": 519,
+      "height": 347,
+      "alt": "Historische Aufnahme des TSV 08 Kulmbach"
+    },
+    "cta": { "label": "Zur Historie", "slug": "historie", "style": "outline" }
+  },
  "gelaende": {
    "title": "Unser Gelände im Katzbachtal",
    "text": "Mach dir einen Eindruck von unseren Gegebenheiten: Auf der Hans-Rausch-Sportanlage liegen Rasenplatz, Hartplatz, Turnhalle und Sportheim direkt beieinander – mitten im Katzbachtal in Kulmbach. Wir freuen uns, dich schon bald hier begrüßen zu dürfen.",
--- 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) */
--- a/public/assets/icons/link-45deg.svg
+++ b/public/assets/icons/link-45deg.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z"/>
+  <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z"/></svg>
--- a/public/assets/icons/robot.svg
+++ b/public/assets/icons/robot.svg
@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135"/>
+  <path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5"/></svg>