/* Safari Mobile Fix - Basierend auf Internet-Recherche */

/* 1. Position relative Fix für Safari */
html, body {
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Erlaube vertikales Scrollen */
    height: auto !important; /* Keine fixe Höhe */
    min-height: 100% !important;
}

/* 2. Hardware Acceleration für Safari */
body {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* 3. Wrapper-basierter Ansatz - Safari ignoriert overflow auf html/body */
.hero {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    position: relative !important;
}

/* 4. Entferne problematische clip-path Eigenschaften - ABER NICHT FÜR MENÜ */
*:not(.nav-menu):not(.nav-dropdown-menu) {
    -webkit-clip-path: none !important;
    clip-path: none !important;
}

/* 5. Safari-spezifische Fixes für Mobile */
@media (max-width: 768px) {
    /* WICHTIG: overflow-x hidden, aber overflow-y muss scroll bleiben! */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        position: relative !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling auf iOS */
    }
    
    /* Main Content Wrapper */
    body > * {
        overflow-x: hidden !important;
        position: relative !important;
    }
    
    /* Hero spezifisch */
    .hero {
        overflow: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Hero Content - Stelle sicher dass nichts abgeschnitten wird */
    .hero-content,
    .hero-text {
        overflow: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        position: relative !important;
    }
    
    /* Hero Title - Explizite Sichtbarkeit */
    .hero-title {
        position: relative !important;
        z-index: 100 !important;
        overflow: visible !important;
        white-space: normal !important;
        word-break: normal !important;
        text-overflow: clip !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin: 0 0 15px 0 !important;
        padding: 0 !important;
        
        /* Safari Text Rendering */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        text-rendering: optimizeLegibility !important;
    }
    
    .hero-subtitle {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
    }
    
    /* Navigation darf Hero nicht überdecken */
    .navbar {
        z-index: 1000 !important;
        position: fixed !important;
        top: 20px !important;
        height: auto !important;
    }
    
    /* Hero Padding anpassen für Navigation */
    .hero {
        padding-top: 95px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 40px !important;
    }
    
    /* Download Buttons Container */
    .hero-buttons,
    .download-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        justify-content: center !important;
        margin: 20px 0 !important;
    }
    
    /* App Store Buttons */
    .app-store-link,
    .app-store-btn {
        display: inline-block !important;
        max-width: 140px !important;
        height: auto !important;
    }
    
    .app-store-link img,
    .app-store-btn img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Container in Hero */
    .hero .container {
        overflow: visible !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Mobile Menu Fix - MUSS SICHTBAR SEIN */
@media (max-width: 768px) {
    /* Nav Menu muss über allem sein und sichtbar */
    .nav-menu.active,
    ul.nav-menu.active,
    #navMenu.active {
        z-index: 9999 !important;
        position: fixed !important;
        left: 20px !important; /* WICHTIG: Zurück in den Viewport */
        right: 20px !important;
        top: 70px !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: flex !important;
        pointer-events: auto !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        transform: none !important; /* Keine Transformationen */
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }
    
    /* Nav Toggle Button muss klickbar bleiben */
    .nav-toggle {
        z-index: 10000 !important;
        position: relative !important;
        pointer-events: auto !important;
    }
}

/* Extra kleine Bildschirme */
@media (max-width: 400px) {
    .hero-title {
        font-size: 22px !important;
    }
    
    .hero {
        padding-top: 95px !important;
    }
}

/* iPhone SE und ähnliche */
@media (max-width: 375px) {
    .hero-title {
        font-size: 20px !important;
    }
    
    .hero {
        padding-top: 90px !important;
    }
}