/* ================================================================
   KRITISCHE MOBILE FIXES - FOTOART.AT
   ================================================================ */

/* PROBLEM 1: Grauer Hintergrund bei Sidebar auf mobilen Geräten */
/* LÖSUNG: Aggressive Hintergrundfarbe für alle Bildschirmgrößen */

/* Basis-Hintergrundfarbe für alle Elemente */
html, body {
    background-color: rgb(250, 243, 231) !important;
    background: rgb(250, 243, 231) !important;
    -webkit-background-color: rgb(250, 243, 231) !important;
    -moz-background-color: rgb(250, 243, 231) !important;
    -o-background-color: rgb(250, 243, 231) !important;
    -ms-background-color: rgb(250, 243, 231) !important;
}

/* Container komplett beige */
.container {
    background-color: rgb(250, 243, 231) !important;
    background: rgb(250, 243, 231) !important;
}

/* Sidebar - AGGRESSIVE BEIGE FARBE für alle Zustände */
.sidebar {
    background-color: rgb(250, 243, 231) !important;
    background: rgb(250, 243, 231) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -moz-backdrop-filter: none !important;
    -o-backdrop-filter: none !important;
    -ms-backdrop-filter: none !important;
}

/* Mobile Sidebar - Spezifische Regeln für alle mobilen Breakpoints */
@media (max-width: 768px) {
    .sidebar {
        background-color: rgb(250, 243, 231) !important;
        background: rgb(250, 243, 231) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    }
    
    .sidebar.active {
        background-color: rgb(250, 243, 231) !important;
        background: rgb(250, 243, 231) !important;
    }
    
    .sidebar.open {
        background-color: rgb(250, 243, 231) !important;
        background: rgb(250, 243, 231) !important;
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 480px) {
    .sidebar {
        background-color: rgb(250, 243, 231) !important;
        background: rgb(250, 243, 231) !important;
    }
}

/* PROBLEM 2: Cookie-Banner nicht gut bedienbar auf mobilen Geräten */
/* LÖSUNG: Optimierte Cookie-Banner für mobile Geräte */

.cookie-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 9999 !important;
    background-color: rgba(250, 243, 231, 0.98) !important;
    background: rgba(250, 243, 231, 0.98) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-top: 2px solid rgb(191, 151, 97) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1) !important;
    padding: 15px !important;
    box-sizing: border-box !important;
}

.cookie-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 100% !important;
}

.cookie-text {
    flex: 1 !important;
    margin-bottom: 10px !important;
}

.cookie-text h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    color: rgb(191, 151, 97) !important;
    font-weight: 600 !important;
}

.cookie-text p {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #333 !important;
    margin-bottom: 0 !important;
}

.cookie-text a {
    color: rgb(191, 151, 97) !important;
    text-decoration: underline !important;
}

.cookie-buttons {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.cookie-btn {
    flex: 1 !important;
    min-width: 120px !important;
    max-width: 150px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 2px solid rgb(191, 151, 97) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    
    /* Wichtig für mobile Touch-Geräte */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    
    /* Touch-friendly */
    min-height: 44px !important;
    touch-action: manipulation !important;
}

.cookie-btn-accept {
    background-color: rgb(191, 151, 97) !important;
    background: rgb(191, 151, 97) !important;
    color: white !important;
}

.cookie-btn-accept:hover,
.cookie-btn-accept:active,
.cookie-btn-accept:focus {
    background-color: rgb(160, 120, 75) !important;
    background: rgb(160, 120, 75) !important;
    transform: translateY(-1px) !important;
}

.cookie-btn-decline {
    background-color: transparent !important;
    background: transparent !important;
    color: rgb(191, 151, 97) !important;
}

.cookie-btn-decline:hover,
.cookie-btn-decline:active,
.cookie-btn-decline:focus {
    background-color: rgba(191, 151, 97, 0.1) !important;
    background: rgba(191, 151, 97, 0.1) !important;
    transform: translateY(-1px) !important;
}

/* Mobile-spezifische Cookie-Banner Optimierungen */
@media (max-width: 768px) {
    .cookie-banner {
        padding: 20px 15px !important;
        max-height: 350px !important;
        overflow-y: auto !important;
    }
    
    .cookie-content {
        gap: 18px !important;
    }
    
    .cookie-text h3 {
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }
    
    .cookie-text p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .cookie-buttons {
        gap: 15px !important;
        margin-top: 10px !important;
    }
    
    .cookie-btn {
        flex: 1 !important;
        min-width: 130px !important;
        max-width: 180px !important;
        padding: 15px 20px !important;
        font-size: 16px !important;
        min-height: 50px !important;
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 480px) {
    .cookie-banner {
        padding: 25px 20px !important;
        max-height: 400px !important;
        border-top: 3px solid rgb(191, 151, 97) !important;
    }
    
    .cookie-content {
        gap: 20px !important;
    }
    
    .cookie-text h3 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }
    
    .cookie-text p {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    
    .cookie-buttons {
        gap: 20px !important;
        margin-top: 15px !important;
        flex-direction: column !important;
    }
    
    .cookie-btn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 18px 25px !important;
        font-size: 18px !important;
        min-height: 55px !important;
        font-weight: 700 !important;
    }
}

/* PROBLEM 3: Mobile Menu Toggle Button */
/* LÖSUNG: Verbesserter Mobile Menu Button */

.mobile-menu-toggle {
    position: fixed !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 10001 !important;
    background-color: rgb(191, 151, 97) !important;
    background: rgb(191, 151, 97) !important;
    border: none !important;
    color: white !important;
    font-size: 20px !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    
    /* Touch-friendly */
    min-height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:active,
.mobile-menu-toggle:focus {
    background-color: rgb(160, 120, 75) !important;
    background: rgb(160, 120, 75) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Mobile Menu Toggle nur auf mobilen Geräten anzeigen */
@media (min-width: 769px) {
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* PROBLEM 4: Sidebar Overlay */
/* LÖSUNG: Verbesserter Overlay für mobile Sidebar */

.sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* PROBLEM 5: Viewport Meta Tag Fix */
/* LÖSUNG: JavaScript-basierte Viewport-Korrekturen */

/* Verhindert horizontales Scrollen auf mobilen Geräten */
html {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

body {
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

/* PROBLEM 6: Touch-Optimierung für mobile Geräte */
/* LÖSUNG: Verbessertes Touch-Verhalten */

/* Alle klickbaren Elemente touch-friendly machen */
a, button, .nav-item, .team-member-card, .team-button, .cta-button {
    -webkit-tap-highlight-color: rgba(191, 151, 97, 0.2) !important;
    tap-highlight-color: rgba(191, 151, 97, 0.2) !important;
    touch-action: manipulation !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

/* Text-Elemente sollten auswählbar bleiben */
p, h1, h2, h3, h4, h5, h6, span, li {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}

/* PROBLEM 7: Main Content Padding für mobile Geräte */
/* LÖSUNG: Responsive Main Content Padding */

@media (max-width: 768px) {
    .main-content {
        padding-top: 70px !important;
        width: 100% !important;
        margin-left: 0 !important;
        background-color: rgb(250, 243, 231) !important;
        background: rgb(250, 243, 231) !important;
    }
}

/* PROBLEM 8: iOS Safari spezifische Fixes */
/* LÖSUNG: iOS Safari Kompatibilität */

/* Fix für iOS Safari 100vh Problem */
@supports (-webkit-touch-callout: none) {
    .sidebar {
        height: -webkit-fill-available !important;
    }
}

/* Fix für iOS Safari Scrolling */
@supports (-webkit-overflow-scrolling: touch) {
    .sidebar {
        -webkit-overflow-scrolling: touch !important;
    }
    
    .cookie-banner {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* PROBLEM 9: Android Chrome spezifische Fixes */
/* LÖSUNG: Android Chrome Kompatibilität */

/* Fix für Android Chrome Viewport */
@media screen and (max-width: 768px) {
    .sidebar {
        height: 100dvh !important;
    }
}

/* PROBLEM 10: Debugging-Hilfen */
/* LÖSUNG: Visueller Debug-Modus (nur bei Bedarf aktivieren) */

/*
.debug-mode * {
    border: 1px solid red !important;
    background-color: rgba(255, 0, 0, 0.1) !important;
}

.debug-mode .sidebar {
    border: 3px solid green !important;
    background-color: rgba(0, 255, 0, 0.3) !important;
}

.debug-mode .cookie-banner {
    border: 3px solid blue !important;
    background-color: rgba(0, 0, 255, 0.3) !important;
}
*/

/* ================================================================
   WICHTIGE HINWEISE FÜR ENTWICKLER
   ================================================================
   
   1. Diese Datei sollte als LETZTE CSS-Datei geladen werden
   2. Alle Regeln verwenden !important für maximale Priorität
   3. Testen Sie nach Änderungen auf echten mobilen Geräten
   4. Viewport Meta Tag sollte korrekt gesetzt sein:
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   ================================================================ */