/* ===== MOBILE OPTIMIERUNGEN FÜR ENGLISCHE LANDING PAGES ===== */
/* Füge diesen Code VOR dem schließenden </style> Tag ein */

@media (max-width: 1224px) {
    /* Padding stark reduzieren */
    .px-20 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Phone Frame responsive */
    .phone-frame {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        aspect-ratio: 375 / 812;
        padding: 12px !important;
        border-width: 8px !important;
    }
    
    /* Stats kleiner */
    .stats-number {
        font-size: 2rem !important;
    }
    
    .stats-divider {
        display: none !important;
    }
    
    /* Icons kleiner */
    .solution-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .feature-icon {
        width: 40px !important;
        height: 40px !important;
    }
    
    /* Grid zu single column */
    .grid {
        grid-template-columns: 1fr !important;
    }
    
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-2,
    .lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Bilder responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Text kleiner */
    h1, .text-6xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2, .text-4xl {
        font-size: 1.5rem !important;
    }
    
    .text-3xl {
        font-size: 1.25rem !important;
    }
    
    .text-2xl {
        font-size: 1.125rem !important;
    }
    
    /* Buttons anpassen */
    .px-8, .px-10 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Container padding */
    .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}