/* ====================================
ULTIMATE HANDY REPARATUR FÜR KILOKUR
====================================
Behebt alle Text-Overflow Probleme auf Handys
Speziell für: 5 Säulen, 24kg in 12 Wochen Text
==================================== */

/* 1. GLOBAL TEXT OVERFLOW FIX */
@media (max-width: 480px) {
    /* Force all containers to respect viewport */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Container fixes */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow: hidden !important;
    }
    
    /* Hero section text fixes */
    .hero-bevel-title {
        font-size: 1.6rem !important;
        line-height: 1.2 !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .hero-bevel-sub {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* 5 Säulen Widget Positions */
    .float-widget.pillar-widget {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 90% !important;
        margin: 8px auto !important;
        min-width: unset !important;
        transform: none !important;
    }
    
    /* Tablet mockup resize */
    .tablet-mockup {
        width: 280px !important;
        height: 220px !important;
        border-radius: 20px !important;
        padding: 12px !important;
    }
    
    .tablet-app {
        min-width: 80px !important;
        padding: 8px 12px !important;
    }
    
    .tablet-app-icon { font-size: 1.2rem !important; }
    .tablet-app-label { font-size: 0.65rem !important; }
    .tablet-app-desc { font-size: 0.5rem !important; }
    
    /* Text overflow prevention */
    p, h1, h2, h3, h4, h5, h6, span, div {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    /* Specific element fixes */
    .hero-bevel-text {
        width: 100% !important;
        padding: 0 10px !important;
    }
    
    .hero-bevel-visual {
        min-height: 240px !important;
        margin-top: 15px !important;
    }
}

/* 2. EXTREME SMALL PHONES (under 360px) */
@media (max-width: 360px) {
    .hero-bevel-title {
        font-size: 1.4rem !important;
    }
    
    .hero-bevel-sub {
        font-size: 0.8rem !important;
    }
    
    .tablet-mockup {
        width: 240px !important;
        height: 180px !important;
    }
    
    .float-widget.pillar-widget {
        width: 95% !important;
        margin: 6px auto !important;
    }
}

/* 3. TEXT OVERFLOW EMERGENCY FIX */
.text-overflow-emergency {
    max-width: 100vw !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}