Header-Navigation: Logo links, Nav-Punkte zentriert (3-Spalten-Grid), CTAs rechts (Kontakt outline + Mitglied werden), responsiv: Burger + Overlay-CTAs unter 600px

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/components/header.php

@@ -6,6 +6,7 @@ declare(strict_types=1);
  * Seitenkopf mit Logo und Navigation. Props: $current (Slug).
  */
 $club = json_load('club');
+$nav = json_load('navigation');
 ?>
     <header class="site-header">
         <div class="container site-header__inner">
@@ -13,5 +14,12 @@ $club = json_load('club');
                 <img class="site-header__logo" src="<?= e(asset('img/logo.svg')) ?>" alt="" width="75" height="97">
             </a>
 <?php component('nav', ['current' => $current]); ?>
+<?php if (!empty($nav['ctas'])): ?>
+            <div class="site-header__actions">
+<?php foreach ($nav['ctas'] as $cta): ?>
+<?php component('cta', ['cta' => $cta]); ?>
+<?php endforeach; ?>
+            </div>
+<?php endif; ?>
         </div>
     </header>

app/components/nav.php

@@ -24,10 +24,10 @@ $href = static function (string $slug): string {
                         <a href="<?= e($href($item['slug'])) ?>"<?= $item['slug'] === $current ? ' aria-current="page"' : '' ?>><?= e($item['label']) ?></a>
                     </li>
 <?php endforeach; ?>
-<?php if (!empty($nav['cta'])): ?>
+<?php foreach ($nav['ctas'] ?? [] as $cta): ?>
-                    <li>
+                    <li class="site-nav__cta">
-                        <a class="btn" href="<?= e($href($nav['cta']['slug'])) ?>"><?= e($nav['cta']['label']) ?></a>
+<?php component('cta', ['cta' => $cta]); ?>
                     </li>
-<?php endif; ?>
+<?php endforeach; ?>
                 </ul>
             </nav>

data/navigation.json

@@ -6,10 +6,12 @@
     { "label": "Fußball", "slug": "fussball" },
     { "label": "Turnen", "slug": "turnen" },
     { "label": "Der Verein", "slug": "der-verein" },
-    { "label": "Matchcenter", "slug": "matchcenter" },
+    { "label": "Matchcenter", "slug": "matchcenter" }
-    { "label": "Kontakt", "slug": "kontakt" }
+  ],
+  "ctas": [
+    { "label": "Kontakt", "slug": "kontakt", "style": "outline" },
+    { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "primary" }
   ],
-  "cta": { "label": "Mitglied werden", "slug": "mitglied-werden" },
   "legal": [
     { "label": "Impressum", "slug": "impressum" },
     { "label": "Datenschutz", "slug": "datenschutz" }

public/assets/css/layout.css

@@ -26,18 +26,19 @@
     z-index: 10;
 }
 
+/* Desktop: Logo links | Nav exakt zentriert | CTAs rechts */
 .site-header__inner {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
     align-items: center;
-    justify-content: space-between;
     gap: 1.5rem;
     min-height: var(--header-h);
 }
 
 .site-header__brand {
+    justify-self: start;
     display: flex;
     align-items: center;
-    gap: 0.75rem;
     text-decoration: none;
     color: var(--clr-text);
 }
@@ -48,7 +49,18 @@
     filter: drop-shadow(var(--shadow));
 }
 
+.site-header__actions {
+    justify-self: end;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
 /* --- Navigation --- */
+.site-nav {
+    justify-self: center;
+}
+
 .site-nav__toggle {
     display: none;
 }
@@ -75,6 +87,24 @@
 }
 
 @media (max-width: 1249px) {
+    /* Mobile: Logo links, CTAs + Burger rechts */
+    .site-header__inner {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .site-header__actions {
+        order: 2;
+        margin-left: auto;
+        /* CTAs bleiben über dem Menü-Overlay sichtbar */
+        position: relative;
+        z-index: 30;
+    }
+
+    .site-nav {
+        order: 3;
+    }
+
     .site-nav__toggle {
         display: grid;
         place-items: center;
@@ -158,6 +188,33 @@
     }
 }
 
+/* CTAs im Overlay-Menü: nur auf schmalen Screens (dort fehlen sie im Header) */
+.site-nav__cta {
+    display: none;
+}
+
+@media (max-width: 600px) {
+    /* Schmale Screens: nur der primäre (letzte) CTA neben dem Burger */
+    .site-header__actions a:not(:last-child) {
+        display: none;
+    }
+
+    .site-header__actions .btn {
+        font-size: var(--fs-400);
+        padding: 8px 14px;
+    }
+
+    /* Im offenen Menü übernehmen die Overlay-CTAs */
+    .site-nav__cta {
+        display: block;
+        margin-top: 1rem;
+    }
+
+    body.nav-open .site-header__actions {
+        visibility: hidden;
+    }
+}
+
 /* --- Footer --- */
 .site-footer {
     margin-top: var(--space-section);

public/assets/css/utilities.css

@@ -4,6 +4,7 @@
 .btn {
     display: inline-block;
     padding: 10px 18px;
+    white-space: nowrap;
     background: var(--clr-accent);
     color: var(--clr-text);
     font-size: var(--fs-500);