/* Mobile-First Responsive Design für VELOCITY Intelligence */

/* =========================
   1. BASE MOBILE STYLES (0-479px)
   ========================= */

/* Extra Small Mobile Devices */
@media (max-width: 479px) {
    :root {
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.5rem;
        --space-xl: 2rem;
    }
    
    .hero-container {
        padding: 0 var(--space-sm);
    }
    
    .hero-headline {
        font-size: 1.5rem;
        line-height: 1.3;
    }
    
    .headline-large {
        font-size: 2rem;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .price-amount {
        font-size: 2rem;
    }
    
    .cta-primary,
    .cta-secondary {
        width: 100%;
        padding: var(--space-md);
        font-size: 0.9rem;
    }
}

/* =========================
   2. STANDARD MOBILE (480-767px)
   ========================= */

@media (min-width: 480px) and (max-width: 767px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .dashboard-container {
        max-width: 100%;
        margin: var(--space-lg) 0;
    }
    
    .stats-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        text-align: center;
    }
    
    .service-card {
        margin-bottom: var(--space-lg);
    }
    
    .price-display {
        text-align: center;
        margin: var(--space-md) 0;
    }
    
    /* Navigation für mobile */
    .nav-status {
        display: none;
    }
    
    .nav-container {
        padding: 0 var(--space-md);
    }
    
    .logo-text {
        font-size: 1.5rem;
    }
    
    .logo-sub {
        display: none;
    }
}

/* =========================
   3. TABLET PORTRAIT (768-1023px)
   ========================= */

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        align-items: start;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .service-card.nuclear {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .dashboard-container {
        max-width: 90%;
    }
    
    .threat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .nav-actions {
        gap: var(--space-md);
    }
}

/* =========================
   4. TABLET LANDSCAPE / SMALL DESKTOP (1024-1199px)
   ========================= */

@media (min-width: 1024px) and (max-width: 1199px) {
    .hero-container,
    .services-container {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0 var(--space-lg);
    }
    
    .hero-grid {
        grid-template-columns: 1.2fr 0.8fr;
        gap: var(--space-2xl);
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-xl);
    }
    
    .threat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-lg);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }
}

/* =========================
   5. DESKTOP (1200-1439px)
   ========================= */

@media (min-width: 1200px) and (max-width: 1439px) {
    .hero-container,
    .services-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--space-xl);
    }
    
    .threat-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-lg);
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-2xl);
    }
}

/* =========================
   6. LARGE DESKTOP (1440px+)
   ========================= */

@media (min-width: 1440px) {
    .hero-container,
    .services-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 var(--space-2xl);
    }
    
    .hero-grid {
        grid-template-columns: 1.3fr 0.7fr;
        gap: var(--space-3xl);
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3xl);
    }
}

/* =========================
   7. ULTRA-WIDE SCREENS (1920px+)
   ========================= */

@media (min-width: 1920px) {
    .hero-container,
    .services-container {
        max-width: 1600px;
        padding: 0 var(--space-3xl);
    }
}

/* =========================
   8. TOUCH DEVICES
   ========================= */

@media (hover: none) and (pointer: coarse) {
    /* Entferne Hover-Effekte auf Touch-Geräten */
    .stat-item:hover,
    .service-card:hover,
    .metric-card:hover,
    .testimonial-card:hover {
        transform: none !important;
    }
    
    /* Vergrößere Touch-Targets */
    .cta-primary,
    .cta-secondary,
    .service-cta,
    .whatsapp-button {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-md) var(--space-lg);
    }
    
    /* Vereinfache Animationen für Touch */
    * {
        animation-duration: 0.3s !important;
    }
}

/* =========================
   9. HIGH DPI DISPLAYS
   ========================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimierungen für Retina/High-DPI Displays */
    .logo-icon {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    canvas {
        image-rendering: pixelated;
    }
}

/* =========================
   10. LANDSCAPE ORIENTATION (Mobile)
   ========================= */

@media (max-width: 1023px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
        padding: var(--space-md) 0;
    }
    
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
        align-items: center;
    }
    
    .dashboard-container {
        max-height: 60vh;
        overflow-y: auto;
    }
    
    /* Navigation kompakter machen */
    .nav {
        padding: var(--space-sm) 0;
    }
    
    .logo-text {
        font-size: 1.2rem;
    }
    
    .nav-status {
        display: none;
    }
}

/* =========================
   11. PORTRAIT ORIENTATION (Tablet)
   ========================= */

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .services-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
        margin: 0 auto;
    }
}

/* =========================
   12. ACCESSIBILITY & REDUCED MOTION
   ========================= */

@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;
    }
    
    .matrix-canvas,
    .data-flow-canvas {
        display: none;
    }
}

/* =========================
   13. DARK MODE SUPPORT
   ========================= */

@media (prefers-color-scheme: dark) {
    /* Bereits im dunklen Design, aber verstärke Kontraste */
    :root {
        --text-primary: #ffffff;
        --text-secondary: #e5e7eb;
        --surface: rgba(255, 255, 255, 0.06);
    }
}

/* =========================
   14. PRINT STYLES
   ========================= */

@media print {
    .nav,
    .whatsapp-widget,
    .loading-overlay,
    canvas,
    .matrix-canvas,
    .data-flow-canvas {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero,
    .services,
    .testimonials-section {
        page-break-inside: avoid;
        page-break-after: always;
    }
}

/* =========================
   15. SPECIFIC DEVICE FIXES
   ========================= */

/* iPhone 12/13/14 Safe Areas */
@media (max-width: 428px) and (-webkit-device-pixel-ratio: 3) {
    .hero,
    .nav {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    .nav {
        padding-top: env(safe-area-inset-top);
    }
    
    .footer-section {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Samsung Galaxy Fold */
@media (max-width: 280px) {
    .hero-headline {
        font-size: 1.2rem;
    }
    
    .headline-large {
        font-size: 1.5rem;
    }
    
    .cta-primary,
    .cta-secondary {
        font-size: 0.8rem;
        padding: var(--space-sm);
    }
    
    .services-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* iPad Pro 12.9" */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }
    
    .dashboard-container {
        max-width: 80%;
        margin: var(--space-xl) auto;
    }
}