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>
This commit is contained in:
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user