/* CRITICAL MOBILE FIX - Override für responsive Navigation */

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Brand text responsive */
.nav-brand-short {
    display: none;
}

.nav-brand-full {
    display: inline;
}

/* Mobile Navigation Fix */
@media (max-width: 767px) {
    .header {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
    }
    
    .nav-container {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 1rem !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .nav-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    .nav-brand-full {
        display: none !important;
    }
    
    .nav-brand-short {
        display: inline !important;
        font-weight: bold !important;
        color: var(--color-secondary) !important;
    }
    
    .nav-brand-text {
        white-space: nowrap !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    .nav-toggle {
        flex: 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
        margin-left: 1rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--color-secondary) !important;
        border: none !important;
        border-radius: 8px !important;
        z-index: 1003 !important;
        position: relative !important;
    }
    
    .nav-toggle-icon {
        background-color: var(--color-primary) !important;
    }
    
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        background-color: var(--color-primary) !important;
    }
    
    .nav-menu {
        display: none !important;
    }
    
    .nav-menu.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(10, 10, 15, 0.98) !important;
        z-index: 1002 !important;
        padding: 100px 2rem 2rem 2rem !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 2rem !important;
    }
    
    .nav-menu.active .nav-item {
        width: 100% !important;
        text-align: center !important;
    }
    
    .nav-menu.active .nav-link {
        display: block !important;
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.5rem !important;
        color: var(--color-secondary) !important;
        text-decoration: none !important;
        border-bottom: 1px solid var(--color-border) !important;
    }
    
    .nav-menu.active .nav-donate-btn {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1.2rem !important;
        background: var(--color-secondary) !important;
        color: var(--color-primary) !important;
        border: none !important;
        border-radius: 8px !important;
        margin-top: 1rem !important;
    }
    
    /* Language selector in mobile menu */
    .nav-menu.active .language-selector {
        width: 100% !important;
        text-align: center !important;
    }
    
    .nav-menu.active .lang-toggle {
        background: var(--color-border) !important;
        color: var(--color-text) !important;
        padding: 0.5rem 1rem !important;
        border: none !important;
        border-radius: 8px !important;
    }
}

/* For larger phones and tablets */
@media (min-width: 768px) {
    .nav-toggle {
        display: none !important;
    }
    
    .nav-menu {
        display: flex !important;
        position: static !important;
        background: none !important;
        padding: 0 !important;
        height: auto !important;
        width: auto !important;
    }
}