/* ===================================
   MOBILE BAR & HEADER FIXES - KRITISCH
   Diese Regeln haben höchste Priorität!
   =================================== */

/* MOBILE BAR - ABSOLUTE FIXES */
@media (max-width: 768px) {
    /* Body Padding für Mobile Bar */
    body {
        padding-bottom: 90px !important;
        margin-bottom: 0 !important;
    }
    
    /* Mobile Bar - MUSS am unteren Rand sein! */
    .mobile-bar,
    div.mobile-bar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 998 !important;
        padding: 0.75rem var(--space-sm) !important;
        background: var(--white) !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
        border-top: 2px solid var(--primary-orange) !important;
        transform: none !important;
        margin: 0 !important;
    }
    
    /* Mobile Bar Grid */
    .mobile-bar-grid {
        gap: 0.5rem !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
    }
    
    /* Buttons in der Mobile Bar */
    .mobile-bar-grid .btn {
        font-size: 0.875rem !important;
        padding: 0.75rem var(--space-sm) !important;
        min-height: 44px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* Icons in Mobile Bar */
    .mobile-bar-grid .btn i {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Text in Mobile Bar */
    .mobile-bar-grid .btn span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* HEADER FIXES - Mobile */
@media (max-width: 968px) {
    /* Header muss oben fixiert sein */
    .header,
    header.header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: var(--white) !important;
        border-bottom: 1px solid var(--gray-200) !important;
        box-shadow: var(--shadow-sm) !important;
    }
    
    /* Header Content Layout */
    .header-content {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: var(--space-sm) !important;
        width: 100% !important;
        height: 66px !important;
        min-height: 66px !important;
        max-height: 66px !important;
        overflow: hidden !important;
    }
    
    /* Logo muss links sein */
    .logo {
        display: flex !important;
        align-items: center !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    /* Mobile Menu Button - MUSS rechts sein */
    .mobile-menu-btn,
    button.mobile-menu-btn {
        position: relative !important;
        z-index: 1001 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        color: var(--gray-700) !important;
        padding: var(--space-sm) !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Desktop Navigation verstecken */
    .nav-desktop {
        display: none !important;
    }
}

/* Extra kleine Screens */
@media (max-width: 380px) {
    .mobile-bar {
        padding: 0.625rem 0.5rem !important;
    }
    
    .mobile-bar-grid .btn {
        font-size: 0.8125rem !important;
        padding: 0.625rem 0.5rem !important;
        min-height: 42px !important;
    }
    
    .mobile-bar-grid .btn i {
        width: 16px !important;
        height: 16px !important;
    }
}

/* MOBILE NAVIGATION - Fixes */
@media (max-width: 968px) {
    .mobile-nav {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 320px !important;
        max-width: 320px !important;
        min-width: 320px !important;
        height: 100vh !important;
        background: var(--white) !important;
        box-shadow: var(--shadow-2xl) !important;
        padding: 5rem var(--space-md) var(--space-md) !important;
        overflow-y: auto !important;
        transition: right 0.3s ease !important;
        z-index: 1000 !important;
    }
    
    .mobile-nav.active {
        right: 0 !important;
    }
    
    .mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999 !important;
        display: none !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    .mobile-overlay.active {
        display: block !important;
        opacity: 1 !important;
    }
}

/* DEBUG entfernt - Mobile Bar funktioniert jetzt korrekt */