/* =====================================
   ITCH SUMMER RESPONSIVE
   Responsive Design für alle Geräte
   ===================================== */

/* Mobile First Approach */
@media (max-width: 480px) {
    /* Hero Section Mobile */
    .hero-section {
        padding: 3rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .hero-section p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Button Adjustments */
    .summer-button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Card Grid Mobile */
    .content-card {
        min-height: 350px !important;
    }
    
    .content-card img {
        height: 160px !important;
    }
    
    /* Tab Navigation Mobile */
    .tab-button {
        padding: 0.75rem 1rem !important;
        font-size: 0.85rem !important;
    }
    
    /* Search and Filter Mobile */
    .summer-input,
    select {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Stats Cards Mobile */
    .summer-stats-card {
        padding: 1rem !important;
        text-align: center !important;
    }
    
    .summer-stats-card h3 {
        font-size: 1.5rem !important;
    }
    
    /* Modal Mobile */
    .summer-modal-content {
        margin: 1rem !important;
        max-width: calc(100% - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
    }
    
    /* Performance Optimizations Mobile */
    .summer-particle.large,
    .summer-floater,
    .wave-particle,
    .interactive-particle {
        display: none !important;
    }
    
    /* Reduce Animation Complexity */
    .summer-card:hover {
        transform: translateY(-2px) !important;
    }
    
    .summer-button:hover {
        transform: scale(1.01) !important;
    }
}

/* Tablet Portrait */
@media (min-width: 481px) and (max-width: 768px) {
    /* Hero Section Tablet */
    .hero-section {
        padding: 4rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 3rem !important;
    }
    
    .hero-section p {
        font-size: 1.2rem !important;
    }
    
    /* Grid Adjustments */
    #content-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .content-card {
        min-height: 380px !important;
    }
    
    /* Tab and Filter Layout */
    .flex.flex-col.md\\:flex-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* Stats Grid Tablet */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Moderate Performance Optimization */
    .summer-particle.large {
        display: none !important;
    }
    
    .summer-floater:nth-child(even) {
        display: none !important;
    }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Hero Section */
    .hero-section h1 {
        font-size: 4rem !important;
    }
    
    /* Grid Layout */
    #content-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    /* Filter Controls */
    .flex.flex-col.md\\:flex-row {
        flex-direction: row !important;
        align-items: center !important;
    }
    
    /* Stats Layout */
    .grid.grid-cols-1.md\\:grid-cols-2.lg\\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Subtle Performance Optimization */
    .summer-particle:nth-child(4n) {
        display: none !important;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    /* Hero Section Desktop */
    .hero-section {
        padding: 5rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 5rem !important;
        line-height: 1.1 !important;
    }
    
    .hero-section p {
        font-size: 1.5rem !important;
    }
    
    /* Full Grid Layout */
    #content-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }
    
    .content-card {
        min-height: 420px !important;
    }
    
    /* Enhanced Hover Effects */
    .summer-card:hover {
        transform: translateY(-10px) scale(1.03) !important;
    }
    
    .summer-button:hover {
        transform: translateY(-3px) scale(1.05) !important;
    }
    
    /* Full Feature Set */
    .summer-particle,
    .summer-floater,
    .wave-particle,
    .interactive-particle {
        display: block !important;
    }
}

/* Large Desktop */
@media (min-width: 1440px) {
    /* Enhanced Spacing */
    .max-w-7xl {
        max-width: 90rem !important;
    }
    
    /* Larger Grid */
    #content-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 2.5rem !important;
    }
    
    /* Enhanced Typography */
    .hero-section h1 {
        font-size: 6rem !important;
    }
    
    .hero-section p {
        font-size: 1.75rem !important;
    }
    
    /* Enhanced Effects */
    .summer-card:hover {
        transform: translateY(-12px) scale(1.04) !important;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 
                    0 0 40px rgba(249, 115, 22, 0.3) !important;
    }
}

/* Ultra-Wide Desktop */
@media (min-width: 1920px) {
    #content-grid {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    .hero-section h1 {
        font-size: 7rem !important;
    }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper Text Rendering */
    .summer-gradient-text,
    .hero-section h1 {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Enhanced Shadows */
    .summer-card {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 
                    0 2px 6px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Crisp Borders */
    .summer-glass {
        border-width: 0.5px !important;
    }
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
    /* Larger Touch Targets */
    .summer-button,
    .tab-button {
        min-height: 48px !important;
        padding: 0.75rem 1.5rem !important;
    }
    
    /* Enhanced Hover for Touch */
    .content-card:hover,
    .content-card:focus {
        transform: translateY(-4px) scale(1.01) !important;
    }
    
    /* Simplified Interactions */
    .interactive-particle {
        display: none !important;
    }
}

/* Landscape Orientation */
@media (orientation: landscape) and (max-height: 600px) {
    /* Compact Hero */
    .hero-section {
        padding: 2rem 0 !important;
    }
    
    .hero-section h1 {
        font-size: 2.5rem !important;
    }
    
    .hero-section p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Reduced Vertical Spacing */
    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* Print Styles */
@media print {
    /* Hide Interactive Elements */
    .summer-button,
    .tab-button,
    button,
    .summer-particles,
    .itch-summer-waves,
    .interactive-particle {
        display: none !important;
    }
    
    /* Optimize for Print */
    .summer-card {
        break-inside: avoid !important;
        background: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
    }
    
    /* Remove Backgrounds */
    body,
    .hero-section,
    section {
        background: white !important;
        color: black !important;
    }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
    /* Disable Animations */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Static Effects */
    .summer-card:hover,
    .summer-button:hover {
        transform: none !important;
    }
    
    /* Focus Indicators */
    .summer-button:focus,
    .summer-input:focus,
    .tab-button:focus {
        outline: 3px solid var(--summer-coral) !important;
        outline-offset: 2px !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    /* Enhanced Contrast */
    .summer-card {
        border: 2px solid white !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    .summer-button {
        border: 2px solid white !important;
    }
    
    .summer-input {
        border: 2px solid white !important;
        background: black !important;
        color: white !important;
    }
}

/* Dark Mode Preference */
@media (prefers-color-scheme: dark) {
    /* Enhanced Dark Mode */
    .summer-glass {
        background: rgba(0, 0, 0, 0.4) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .summer-card {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}

/* Performance Mode for Weak Hardware */
@media (max-width: 768px) and (pointer: coarse) {
    /* Ultra Performance Mode */
    .summer-particle,
    .summer-floater,
    .wave-particle,
    .interactive-particle,
    .itch-seasonal-particle {
        display: none !important;
    }
    
    /* Simplified Effects */
    .summer-card::before,
    .summer-button::before,
    .summer-stats-card::before {
        display: none !important;
    }
    
    /* Reduce Blur Effects */
    .summer-glass {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
    
    /* Simplified Gradients */
    .summer-gradient-text {
        background: linear-gradient(45deg, var(--summer-coral), var(--summer-sand)) !important;
        background-size: 100% 100% !important;
        animation: none !important;
    }
}
