From adf142b18ebb2a61a6f315785d8ad84ca3fa8779 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sat, 20 Jun 2026 20:49:46 +0200
Subject: [PATCH] Feinschliff: Navigation, Hero-Center, Personen-Karten &
 Tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 app/components/cta.php             |  2 +-
 app/components/jsonld.php          |  5 ++
 app/components/nav.php             |  2 +-
 app/components/person-card.php     |  9 +++-
 app/components/person-grid.php     |  4 +-
 app/pages/home.php                 |  1 +
 app/pages/verein.php               | 31 +++---------
 data/club.json                     |  4 ++
 data/historie.json                 |  7 ++-
 data/home.json                     | 17 +------
 data/navigation.json               |  9 ++--
 data/verein.json                   | 16 +++++-
 public/assets/css/base.css         |  3 --
 public/assets/css/components.css   | 78 ++++++++++++++++++++++++------
 public/assets/css/layout.css       | 78 ++++++++++++++++++++++++------
 public/assets/css/tokens.css       |  2 +
 public/assets/icons/link-45deg.svg |  2 +
 public/assets/icons/robot.svg      |  2 +
 18 files changed, 190 insertions(+), 82 deletions(-)
 create mode 100644 public/assets/icons/link-45deg.svg
 create mode 100644 public/assets/icons/robot.svg

diff --git a/app/components/cta.php b/app/components/cta.php
index 0cfe7d3..0776456 100644
--- 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>
diff --git a/app/components/jsonld.php b/app/components/jsonld.php
index 278b027..92503bc 100644
--- 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 = [
diff --git a/app/components/nav.php b/app/components/nav.php
index e4d5e4e..83c03d2 100644
--- 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; ?>
diff --git a/app/components/person-card.php b/app/components/person-card.php
index 7cbc6a9..ddc932b 100644
--- 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) ?>">
diff --git a/app/components/person-grid.php b/app/components/person-grid.php
index f3e7582..5566c1e 100644
--- 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]); ?>
diff --git a/app/pages/home.php b/app/pages/home.php
index 3d5b3ce..3b72f0f 100644
--- 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']]);
diff --git a/app/pages/verein.php b/app/pages/verein.php
index f22f5b9..2449c23 100644
--- 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'] ?? []]);
diff --git a/data/club.json b/data/club.json
index 0cff863..066b2cc 100644
--- 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": {
diff --git a/data/historie.json b/data/historie.json
index a0d53ac..ee30e75 100644
--- 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" }
     }
   ]
 }
diff --git a/data/home.json b/data/home.json
index 450099a..7b3fe1e 100644
--- 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"
     },
diff --git a/data/navigation.json b/data/navigation.json
index 5c61bc6..b319011 100644
--- 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": [
diff --git a/data/verein.json b/data/verein.json
index b7e9c84..672db76 100644
--- 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.",
diff --git a/public/assets/css/base.css b/public/assets/css/base.css
index 95a4030..fa82d73 100644
--- 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;
diff --git a/public/assets/css/components.css b/public/assets/css/components.css
index 90cd536..97d0cd8 100644
--- 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);
 }
 
diff --git a/public/assets/css/layout.css b/public/assets/css/layout.css
index d7e9f0d..4726d95 100644
--- 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) {
diff --git a/public/assets/css/tokens.css b/public/assets/css/tokens.css
index 9a67aea..e180e6f 100644
--- 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) */
diff --git a/public/assets/icons/link-45deg.svg b/public/assets/icons/link-45deg.svg
new file mode 100644
index 0000000..9574c37
--- /dev/null
+++ 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>
diff --git a/public/assets/icons/robot.svg b/public/assets/icons/robot.svg
new file mode 100644
index 0000000..f59b589
--- /dev/null
+++ 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>