/* MOBILE HEADER FIXES - ZENTRALE CSS-DATEI */
/* Diese Datei überschreibt alle anderen CSS-Regeln für den mobilen Header */

@media (max-width: 768px) {
    /* Header Top - Logo nimmt volle Breite ein */
    .header-top {
        padding: 15px 0 !important;
    }
    
    .header-top-container {
        padding: 0 15px !important;
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    /* Logo - 100% Breite */
    .logo-area {
        width: 100% !important;
        text-align: center !important;
    }
    
    .main-logo {
        height: 60px !important;
        max-width: 100% !important;
        width: auto !important;
    }
    
    /* Auth + Language unter dem Logo */
    .header-top-right {
        width: 100% !important;
        justify-content: center !important;
        gap: 20px !important;
        flex-wrap: wrap !important;
    }
    
    .auth-area {
        display: flex !important;
        gap: 15px !important;
    }
    
    .auth-area a {
        font-size: 14px !important;
        padding: 8px 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        text-decoration: none !important;
        background: white !important;
        color: #333 !important;
    }
    
    /* Registrieren Button - grüne Farbe mit höherer Spezifität */
    .auth-area .register-link {
        background: rgb(76, 175, 80) !important;
        color: white !important;
        border: 1px solid rgb(76, 175, 80) !important;
    }
    
    .auth-area .register-link:hover {
        background: rgb(56, 155, 60) !important;
        color: white !important;
    }
    
    .language-area {
        position: relative !important;
    }
    
    /* Header Bottom - Service Button links, Burger rechts - HÖHER */
    .header-bottom {
        height: 70px !important;
        padding: 10px 0 !important;
    }
    
    .header-bottom-container {
        padding: 0 15px !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 70px !important;
    }
    
    /* Service Button nach links - SICHTBAR machen */
    .service-button-container {
        order: 1 !important;
        margin-left: 0 !important;
        margin-right: auto !important;
        display: block !important; /* Sicherstellen dass er sichtbar ist */
    }
    
    .service-button {
        padding: 12px 20px !important;
        font-size: 14px !important;
        margin: 8px 0 !important;
        background: rgb(76, 175, 80) !important;
        color: white !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
    
    .service-button:hover {
        background: rgb(56, 155, 60) !important;
        color: white !important;
    }
    
    /* Burger Menu rechts und VIEL größer */
    .mobile-menu-btn {
        display: flex !important;
        order: 2 !important;
        position: relative !important;
        right: 0 !important;
        gap: 6px !important; /* Mehr Abstand zwischen den Strichen */
        flex-direction: column !important;
        padding: 10px !important; /* Mehr Klickbereich */
    }
    
    .mobile-menu-btn span {
        width: 35px !important; /* Noch größer */
        height: 5px !important; /* Noch dicker */
        background: rgb(51, 51, 51) !important;
        transition: 0.3s !important;
        border-radius: 2px !important; /* Abgerundete Ecken */
    }
    
    /* Navigation Menu */
    .main-navigation {
        position: fixed !important;
        top: 180px !important; /* Angepasst wegen höherem Header */
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - 180px) !important;
        background: white !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-top: 30px !important;
        transition: left 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
        z-index: 999 !important;
    }
    
    .main-navigation.active {
        left: 0 !important;
    }
    
    .nav-item {
        width: 90% !important;
        text-align: center !important;
        margin: 5px 0 !important;
        border-radius: 6px !important;
    }
    
    .nav-button {
        font-size: 18px !important;
        padding: 15px 20px !important;
        width: 100% !important;
    }
    
    /* Service Button im Menu AUCH anzeigen */
    .main-navigation .nav-item.special {
        display: block !important;
    }
}