diff --git a/app/components/header.php b/app/components/header.php
index 2ce4dc7..9805195 100644
--- a/app/components/header.php
+++ b/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');
?>
diff --git a/app/components/nav.php b/app/components/nav.php
index d7fc461..179ad3f 100644
--- a/app/components/nav.php
+++ b/app/components/nav.php
@@ -24,10 +24,10 @@ $href = static function (string $slug): string {
>= e($item['label']) ?>
-
-
- = e($nav['cta']['label']) ?>
+
+
+ $cta]); ?>
-
+
diff --git a/data/navigation.json b/data/navigation.json
index 2e458cf..175acfa 100644
--- a/data/navigation.json
+++ b/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": "Kontakt", "slug": "kontakt" }
+ { "label": "Matchcenter", "slug": "matchcenter" }
+ ],
+ "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" }
diff --git a/public/assets/css/layout.css b/public/assets/css/layout.css
index a2a3a98..1986175 100644
--- a/public/assets/css/layout.css
+++ b/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);
diff --git a/public/assets/css/utilities.css b/public/assets/css/utilities.css
index 98b2ad0..a05ff8d 100644
--- a/public/assets/css/utilities.css
+++ b/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);