/* ===== HEADER STYLES ===== */
.header, .main-header {
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0px;
    z-index: 100;
    height: var(--header-height); /* Feste Höhe definieren */
    min-height: var(--header-height); /* Mindesthöhe sicherstellen */
    display: flex;
    align-items: center; /* Zentriert den Inhalt vertikal */
}

/* Notification-Badge korrekt positionieren */
.nav-icon-container {
    position: relative;
    display: inline-block;
}

.notification-icon {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 1.5rem;
    margin-left: 20px;
    text-decoration: none;
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff4757;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Container-Anpassungen für konsistente Höhe */
.nav-container, .header-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 2rem; /* Vertikales Padding entfernen, da Header die Höhe kontrolliert */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-lg);
    width: 100%; /* Volle Breite nutzen */
    height: 100%; /* Container füllt den Header komplett aus */
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}



/* Formular-Container für Login/Logout */
.nav-auth-form {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Links und Buttons */
/* Navigation Link/Button Base Styles */
.nav-link,
.nav-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem; /* Added for better click target appearance */
  transition: 
    color 0.2s ease-in-out,
    background-color 0.2s ease-in-out,
    transform 0.2s ease-in-out; /* Smooth transitions */
}

/* Navigation Link Specific Styles */
.nav-link {
  color: var(--text);
  text-decoration: none; /* Ensure no underline by default */
}

.nav-link:hover,
.nav-link:focus-visible { /* Added focus state for accessibility */
  color: var(--secondary-color);
  background-color: var(--linku-transparent-15);
  transform: translateY(-1px);
  outline: none; /* Remove default focus outline in favor of our styling */
}

/* Navigation Button Specific Styles */
.nav-button {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-weight: 500; /* Slightly bolder text for buttons */
}

.nav-button:hover,
.nav-button:focus-visible {
  color: var(--secondary-color);/* Consider adding a darker primary variant */
  transform: translateY(-1px);
  outline: none;
}

/* Icon Styles (shared between links and buttons) */
.nav-icon,
.nav-link i {
  width: 1.25rem;
  height: 1.25rem;
  font-size: var(--text-md);
  display: inline-flex; /* Better icon alignment */
  align-items: center;
  justify-content: center;
}

/* Active State (consider adding if needed) */
.nav-link.active {
  color: var(--primary);
  font-weight: 500;
}

/* ===== LANGUAGE SWITCHER ===== */
.language-switcher {
    display: flex;
    gap: var(--space-sm);
    margin-left: var(--space-sm);
}

.language-dropdown {
    position: relative;
    display: inline-block;
}

.language-dropdown-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    transition: all var(--transition-normal);
}

.language-dropdown-btn:hover {
    background: var(--primary-dark);
}

.language-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: var(--primary);
    min-width: var(--dropdown-min-width);
    box-shadow: var(--dropdown-shadow);
    border-radius: var(--radius-sm);
    z-index: 1;
    overflow: hidden;
}

.language-dropdown-content form {
    display: flex;
    flex-direction: column;
}

.language-dropdown-content button {
    color: var(--white);
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    display: block;
    text-align: left;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.language-dropdown-content button:hover {
    background-color: var(--primary-dark);
}

.language-dropdown.active .language-dropdown-content {
    display: block;
}

/* ===== MOBILE HEADER OPTIMIERUNG ===== */


@media (max-width: 768px) {
    .header, .main-header {
        height: auto;
        min-height: var(--header-height);
        padding: var(--space-xs) 0;
    }

    .nav-container, .header-container {
        padding: 0 var(--space-md);
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .nav-content {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    /* Mobile Menu Button */
    .mobile-menu-btn {
        display: block;
        order: 2;
        font-size: 1.8rem;
        background: none;
        border: none;
        color: var(--primary);
        padding: var(--space-xs);
    }

.nav-actions {
    order: 3;
    flex: 0 0 auto; /* Nicht wachsen oder schrumpfen lassen */
    justify-content: flex-end;
    padding: 0; /* Padding entfernen oder konsistent halten */
    gap: var(--space-md);
    overflow-x: visible;
    height: 100%; /* Volle Höhe des Containers nutzen */
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    margin: 0; /* Margins entfernen */
}


    /* Notification Icon optimieren */
    .notification-icon {
        margin-left: var(--space-sm);
        font-size: 1.4rem;
    }

    .notification-badge {
        width: 16px;
        height: 16px;
        font-size: 0.7rem;
        top: -2px;
        right: -2px;
    }

    /* Login/Register Buttons */
    .nav-auth-form {
        gap: var(--space-sm);
    }

    .nav-button {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--text-sm);
    }

    /* Language Switcher ausblenden */
    .language-switcher {
        display: none;
    }
}


@media (max-width: 768px) {
    .header, .main-header {
        height: var(--header-height); /* Höhe beibehalten */
        min-height: var(--header-height);
        padding: 0 var(--space-md); /* Nur horizontales Padding */
    }

    .nav-container, .header-container {
        padding: 0 var(--space-md); /* Nur horizontales Padding */
    }
}

@media (max-width: 480px) {
    .header, .main-header {
        height: var(--header-height); /* Höhe beibehalten */
        min-height: var(--header-height);
    }
}


/* ===== LOGO STYLES ===== */
.nav-logo, .logo {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    white-space: nowrap;
    transition: opacity var(--transition-normal);
    /* Feste Größe für das Logo */
    width: auto; /* oder spezifische Pixelgröße wenn nötig */
    height: auto;
    min-width: unset; /* Entfernt die mobile min-width */
}

.logo-text {
    font-size: 2.6rem; /* Feste Größe */
    font-weight: 800;
    line-height: 1; /* Konsistente Zeilenhöhe */
    margin: 0; /* Reset margins */
}

.logo-subtext {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: -0.25rem;
    line-height: 1;
}

/* ===== MOBILE ANPASSUNGEN ===== */


@media (max-width: 768px) {
    /* Logo-Anpassungen - bleibt jetzt gleich */
    .nav-logo, .logo {
        order: 1;
        flex: 0 0 auto; /* Verhindert das Strecken/Schrumpfen */
        /* Entfernt min-width da wir feste Größe wollen */
    }

    /* Ursprüngliche Logo-Größe beibehalten */
    .logo-text {
        font-size: 2.6rem; /* Behält die Desktop-Größe bei */
    }

    .logo-subtext {
        font-size: 0.75rem; /* Behält die Desktop-Größe bei */
    }
}


@media (max-width: 480px) {
    /* Logo bleibt gleich - Subtext wird nicht mehr ausgeblendet */
    .logo-text {
        font-size: 2rem; /* Behält die Desktop-Größe bei */
    }
    
    .logo-subtext {
        display: block; /* Zeigt den Subtext immer an */
        font-size: 0.75rem;
    }

    .nav-link, .nav-button {
        padding: var(--space-xs) var(--space-xs);
        font-size: var(--text-xs); /* Kleinere Schrift */
    }

    /* Icon-Größen reduzieren */
    .nav-icon, .nav-link i {
        width: 0.5rem;
        height: 0.5rem;
        font-size: var(--text-xs);
    }

    /* Notification-Icon anpassen */
    .notification-icon {
        font-size: 0.9rem;
        margin-left: var(--space-xs);
    }

    .notification-badge {
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
        top: -1px;
        right: -1px;
    }

    /* Abstände zwischen Elementen verringern */
    .nav-actions {
        gap: var(--space-xs);
    }

    /* Buttons kompakter gestalten */
    .nav-button {
        padding: var(--space-xs) var(--space-sm);
    }

    /* Auth-Formular optimieren */
    .nav-auth-form {
        gap: var(--space-xs);
    }

}