/* ==========================================
   Mobile & Responsive Fixes for /new-page/
   Ergänzt die vorhandenen Styles
========================================== */

/* Mobile Navigation Fixes */
@media (max-width: 768px) {
    /* Hamburger visible on mobile */
    .hamburger {
        display: flex !important;
        z-index: 1001;
    }
    
    /* Mobile menu styling */
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: var(--bg-secondary);
        width: 100%;
        text-align: center;
        transition: left 0.3s ease;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.2);
        padding: 2rem 0;
        z-index: 1000;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-item {
        margin: 1rem 0;
    }
    
    /* Prevent scroll when nav open */
    body.nav-open {
        overflow: hidden;
    }
    
    /* Hero Sections - Stack vertically */
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding: 2rem 1rem !important;
    }
    
    .hero-content {
        max-width: 100%;
        margin-bottom: 2rem;
    }
    
    .hero-image {
        width: 100%;
        max-width: 100%;
    }
    
    /* Hero titles smaller on mobile */
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    /* Buttons stack on mobile */
    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
    
    /* Service Grids - Single column */
    .services-grid,
    .services-grid-premium {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Problem Cards - Single column */
    .problems-grid,
    .about-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Stats Grid - 2 columns on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Process Steps - Vertical */
    .process-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Pricing Cards - Stack */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    /* Split-Screen - Vertical auf Mobile */
    .split-screen-container {
        flex-direction: column !important;
        gap: 3rem !important;
    }
    
    .transform-arrow {
        transform: rotate(90deg) !important;
    }
    
    /* Device Showcase - Kompakter */
    .device-showcase {
        height: 650px !important;
        transform: scale(0.9);
    }
    
    /* Roadmap - Vertikal */
    .roadmap-stations {
        flex-direction: column !important;
        gap: 3rem !important;
    }
    
    .timeline-path {
        width: 3px !important;
        height: 100% !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) !important;
    }
    
    .roadmap-station {
        max-width: 350px !important;
        margin: 0 auto !important;
    }
    
    /* Dashboard - Einspaltiges Grid */
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Kanban Board - Vertikal */
    .boards-wrapper {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .transform-arrow-kanban {
        transform: rotate(90deg) !important;
    }
    
    .kanban-board {
        max-width: 100% !important;
    }
    
    .columns-organized {
        grid-template-columns: 1fr !important;
    }
    
    /* Flowchart - Vertikal */
    .flows-wrapper {
        flex-direction: column !important;
        gap: 3rem !important;
    }
    
    .transform-arrow-flow i {
        transform: rotate(90deg);
    }
    
    .arrow-label {
        writing-mode: horizontal-tb !important;
        transform: rotate(0deg) !important;
    }
    
    .flow-diagram {
        max-width: 100% !important;
    }
    
    /* ROI Marker - Stack */
    .roi-marker {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .roi-content {
        text-align: center !important;
    }
    
    /* Kanban Metrics - Stack */
    .kanban-metrics {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .section-title {
        font-size: 1.75rem !important;
    }
    
    /* Stats in einzelner Spalte */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Device Showcase noch kleiner */
    .flutter-logo-box {
        width: 90px !important;
        height: 90px !important;
    }
    
    .flutter-logo-box i {
        font-size: 3rem !important;
    }
    
    .device-screen {
        transform: scale(0.85) !important;
    }
    
    /* Metric Cards kompakter */
    .metric-card {
        padding: 1rem !important;
    }
    
    /* Flow Labels kleiner */
    .flow-title {
        font-size: 1rem !important;
    }
}