/* Navigation Component - following Universal Principles */
/* Basis-Styles für das existierende Menu-System */
ul#css3menu,
ul#css3menu ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Hauptmenü anpassen */
ul#css3menu {
background-color: white;
border: none;
border-radius: 0;
display: flex;
font-size: 1rem;
padding: 0;
position: relative;
z-index: 999;
align-items: center;
gap: var(--space-sm);
}
/* Menüpunkte */
ul#css3menu li {
display: inline-block;
float: none;
font-size: 1rem;
position: relative;
white-space: nowrap;
}
/* Links im Hauptmenü anpassen */
ul#css3menu a {
background: none;
border: none;
color: var(--reflection-black);
display: block;
font: var(--font-weight-medium) var(--font-size-md) var(--font-sans);
padding: 0.5rem 0.75rem;
text-align: left;
text-shadow: none;
vertical-align: middle;
text-decoration: none;
border-radius: var(--radius-sm);
transition: all var(--transition-fast);
}
/* Hover-Effekte für Hauptmenü */
ul#css3menu li:hover > a,
ul#css3menu li:focus-within > a {
background-color: var(--faint-gray);
color: var(--primary-color);
text-shadow: none;
}
/* Untermenüs */
ul#css3menu ul {
background-color: white;
border: 1px solid var(--light-gray);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
display: none;
left: 0;
min-width: 200px;
padding: 0.5rem 0;
position: absolute;
top: 100%;
}
/* Untermenü anzeigen */
ul#css3menu li:hover > ul,
ul#css3menu li:focus-within > ul {
display: block;
}
/* Links in Untermenüs */
ul#css3menu ul a {
background-color: transparent;
border: none;
color: var(--reflection-black);
font-size: var(--font-size-sm);
padding: 0.5rem 1rem;
text-shadow: none;
}
ul#css3menu ul a:hover {
background-color: var(--faint-gray);
color: var(--primary-color);
}
/* Dropdown-Pfeil für Menüpunkte mit Untermenüs */
ul#css3menu li.has-dropdown > a::after {
content: '▼';
font-size: 0.7em;
margin-left: 0.5em;
display: inline-block;
transition: transform 0.3s ease;
}
ul#css3menu li.has-dropdown:hover > a::after {
transform: rotate(180deg);
}
/* Hamburger Menu Button - Separates Element */
.hamburger-button {
display: none;
cursor: pointer;
width: 30px;
height: 24px;
padding: 0;
margin: 0;
background: none;
border: none;
position: relative;
}
/* Die drei Striche */
.hamburger-line {
position: absolute;
left: 0;
width: 30px;
height: 3px;
background-color: var(--reflection-black);
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger-line:nth-child(1) {
top: 0;
}
.hamburger-line:nth-child(2) {
top: 10px;
}
.hamburger-line:nth-child(3) {
bottom: 0;
}
/* Animation für aktiven Zustand */
.hamburger-button.active .hamburger-line:nth-child(1) {
top: 10px;
transform: rotate(45deg);
}
.hamburger-button.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger-button.active .hamburger-line:nth-child(3) {
bottom: 11px;
transform: rotate(-45deg);
}
/* Mobile Styles - ab 1100px /
@media screen and (max-width: 1100px) {
/ Hamburger anzeigen */
.hamburger-button {
display: block;
}
/* Menu Container - WICHTIG: Rechts positioniert /
ul#css3menu {
position: fixed;
top: 70px;
right: -100%; / Start position: außerhalb rechts /
width: 90%;
max-width: 400px;
height: calc(100vh - 70px);
background: white;
flex-direction: column;
align-items: stretch;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); / Schatten nach links /
padding: var(--space-lg) var(--space-md);
overflow-y: auto;
transition: right 0.3s ease; / Animation von rechts */
z-index: 1000;
}
/* Menü öffnen - von rechts reinschieben */
ul#css3menu.open {
right: 0;
}
/* Navigation Container bleibt sichtbar /
.header-component__nav {
display: block; / Nicht display: none */
position: static;
flex-grow: 0;
}
.header-component__hamburger-container {
display: block;
}
.header-component__container {
grid-template-columns: auto 1fr auto;
}
.header-component__right {
gap: calc(var(--space-md) * 0.75);
}
/* Mobile Menu Items immer sichtbar wenn im Mobile-Modus */
ul#css3menu li {
display: block !important;
width: 100%;
margin-bottom: var(--space-sm);
}
ul#css3menu a {
padding: var(--space-sm) var(--space-md);
font-size: var(--font-size-lg);
}
/* Mobile Submenus /
ul#css3menu ul {
display: none; / Submenus initial versteckt */
position: static;
box-shadow: none;
border: none;
background-color: var(--faint-gray);
margin-top: var(--space-sm);
border-radius: var(--radius-sm);
}
/* Submenu anzeigen bei Klick (nicht Hover auf Mobile) */
ul#css3menu li.has-dropdown.active > ul {
display: block;
}
ul#css3menu ul a {
padding-left: var(--space-xl);
}
/* Overlay */
.menu-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.menu-overlay.show {
display: block;
}
}
/* Kleinere Screens */
@media (max-width: 480px) {
.header-component {
min-height: 60px;
}
.header-component__photo {
width: 45px;
height: 45px;
}
.header-component__right {
gap: var(--space-sm);
}
.lang-switch {
padding: calc(var(--space-xs) * 0.75) var(--space-sm);
font-size: calc(var(--font-size-sm) * 0.9);
}
ul#css3menu {
width: 100%;
max-width: none;
right: -100%;
}
ul#css3menu.open {
right: 0;
}
}