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>

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);