/* Browser-Kompatibilitätsverbesserungen für VELOCITY Intelligence */

/* CSS Custom Properties Fallbacks für ältere Browser */
:root {
    /* Backup für IE11 und ältere Browser */
    --fallback-bg: #0f1419;
    --fallback-text: #f9fafb;
    --fallback-gold: #c9a961;
}

/* Flexbox-Fallbacks für IE */
.hero-grid, .services-grid, .stats-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Grid-Fallbacks für ältere Browser */
@supports not (display: grid) {
    .hero-grid {
        display: flex;
        flex-direction: column;
    }
    
    .services-grid {
        display: flex;
        flex-wrap: wrap;
    }
    
    .services-grid > * {
        flex: 1 1 300px;
        margin: 10px;
    }
}

/* Backdrop-filter Fallbacks */
.nav {
    background: rgba(15, 20, 25, 0.95); /* Fallback */
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
    .nav {
        background: rgba(15, 20, 25, 0.8);
        -webkit-backdrop-filter: blur(20px);
        backdrop-filter: blur(20px);
    }
}

/* Clip-path Fallbacks */
.logo-icon {
    background: linear-gradient(135deg, #c9a961 0%, #ffd700 50%, #c9a961 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
}

/* Für Browser ohne background-clip: text Support */
@supports not (-webkit-background-clip: text) {
    .logo-icon {
        color: #c9a961;
        -webkit-text-fill-color: initial;
    }
}

/* Transform-Fallbacks für ältere Browser */
.stat-item {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.stat-item:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* Smooth Scrolling Fallback */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Safari-spezifische Fixes */
@supports (-webkit-appearance: none) {
    .button, .cta-primary, .cta-secondary {
        -webkit-appearance: none;
        -webkit-border-radius: 8px;
    }
    
    /* Safari input fixes */
    input, textarea {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* Firefox-spezifische Fixes */
@-moz-document url-prefix() {
    .logo-icon {
        background: -moz-linear-gradient(135deg, #c9a961 0%, #ffd700 50%, #c9a961 100%);
    }
}

/* Mobile Safari fixes */
@supports (-webkit-touch-callout: none) {
    /* iOS Safari */
    body {
        -webkit-overflow-scrolling: touch;
    }
    
    .hero {
        min-height: -webkit-fill-available;
        min-height: stretch;
    }
    
    /* Fix für 100vh Problem in Mobile Safari */
    .hero, .warroom-section {
        min-height: calc(100vh - env(safe-area-inset-bottom));
        min-height: calc(100vh - constant(safe-area-inset-bottom));
    }
}

/* Position: sticky Fallbacks */
@supports not (position: sticky) {
    .nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .hero {
        padding-top: 80px; /* Nav height compensation */
    }
}

/* Custom Scrollbar für bessere Browser-Kompatibilität */
/* Webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: var(--gold, #c9a961);
    border-radius: 4px;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #c9a961 rgba(255, 255, 255, 0.1);
}

/* Animation Fallbacks für Browser mit reduzierter Animation */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* IE11 spezifische Fixes */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE11 Grid Fallback */
    .hero-grid {
        display: -ms-flexbox;
        -ms-flex-direction: column;
    }
    
    .services-grid {
        display: -ms-flexbox;
        -ms-flex-wrap: wrap;
    }
    
    /* IE11 Variable Fallbacks */
    body {
        background: #0f1419;
        color: #f9fafb;
        font-family: 'Inter', sans-serif;
    }
    
    .logo-icon {
        color: #c9a961;
    }
}