/* 
 * iFrame-optimiertes Booking-System CSS
 * Für Mobile-responsive Darstellung in iFrames
 */

/* KRITISCH: Verhindere horizontales Scrollen */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Basis-Optimierungen für alle Bildschirme */
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
}

/* Alle Elemente: Border-Box und max-width */
*, *::before, *::after {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

/* iFrame-spezifische Optimierungen */
body.iframe-mode {
    min-height: auto !important;
    background: transparent !important;
}

body.iframe-mode .booking-progress {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0 !important;
    margin-bottom: 0.75rem !important;
}

body.iframe-mode .hero-title {
    font-size: 1.8rem !important;
}

body.iframe-mode .hero-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1rem !important;
}

body.iframe-mode .hero-features {
    display: none !important;
}

body.iframe-mode .locations-container,
body.iframe-mode .container > .card,
body.iframe-mode .container > div:not(.booking-progress):not(.hero-section) {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
}

body.iframe-mode .step-indicator {
    padding: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Mobile-Optimierungen (unter 768px) */
@media (max-width: 768px) {
    html, body {
        min-height: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .hero-section,
    .booking-progress {
        padding: 1.5rem 0 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-title,
    h1 {
        font-size: 1.6rem !important;
    }
    
    .hero-subtitle,
    h2 {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-features {
        gap: 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .feature-item {
        font-size: 0.9rem !important;
    }
    
    .feature-item i {
        font-size: 1.2rem !important;
    }
    
    .locations-container,
    .card,
    .target-group-card,
    .course-card {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .section-title,
    h3 {
        font-size: 1.3rem !important;
    }
    
    .section-subtitle,
    h4 {
        font-size: 0.95rem !important;
        margin-bottom: 1rem !important;
    }
    
    .location-card {
        padding: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    .location-title,
    .target-group-title,
    .course-title {
        font-size: 1.2rem !important;
    }
    
    .location-info,
    .course-info {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }
    
    .info-item {
        padding: 0.6rem !important;
        font-size: 0.85rem !important;
    }
    
    .step-indicator {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .step-title {
        font-size: 1.1rem !important;
        margin-bottom: 1rem !important;
    }
    
    .progress-steps,
    .steps {
        gap: 0.5rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0.5rem !important;
    }
    
    .step {
        min-width: 90px !important;
    }
    
    .step-number {
        width: 35px !important;
        height: 35px !important;
        font-size: 0.9rem !important;
        margin-right: 0.3rem !important;
    }
    
    .step-label {
        font-size: 0.7rem !important;
    }
    
    .btn,
    .btn-location,
    .btn-primary,
    .btn-success {
        padding: 0.7rem 1.2rem !important;
        font-size: 0.95rem !important;
    }
    
    .form-control,
    .form-select {
        font-size: 0.95rem !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem !important;
    }
}

/* Extra kleine Bildschirme (unter 480px) - typisch für iFrame auf Mobile */
@media (max-width: 480px) {
    html, body {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
    
    .col, [class*="col-"] {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    
    .hero-section,
    .booking-progress {
        padding: 1rem 0 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .hero-title,
    h1 {
        font-size: 1.4rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .hero-subtitle,
    h2 {
        font-size: 0.9rem !important;
    }
    
    .hero-features {
        display: none !important;
    }
    
    .section-title,
    h3 {
        font-size: 1.2rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .section-subtitle,
    h4 {
        font-size: 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .location-card,
    .target-group-card,
    .course-card,
    .card {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border-radius: 10px !important;
    }
    
    .location-title,
    .target-group-title,
    .course-title {
        font-size: 1.1rem !important;
    }
    
    .info-item {
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .step-indicator {
        display: none !important; /* Verstecke auf sehr kleinen Bildschirmen */
    }
    
    .btn,
    .btn-location,
    .btn-primary,
    .btn-success {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
        width: 100% !important;
    }
    
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .btn {
        margin-bottom: 0.5rem !important;
    }
}

/* Smooth Scrolling für iFrame-Navigation */
html {
    scroll-behavior: smooth;
}

/* Verhindere horizontales Scrollen - WICHTIG! */
body, .container, .container-fluid, .row, div, section {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Container speziell für iFrame */
.container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Row-Elemente (Bootstrap) */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Hero-Section speziell */
.hero-section {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
}

/* Hero-Features nicht zu breit */
.hero-features {
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* Optimiere Bilder für Mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Touch-freundliche Buttons */
button, a, .btn {
    min-height: 44px;
    min-width: 44px;
}

/* Optimiere Formulare für Mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important; /* Verhindert Auto-Zoom auf iOS */
    }
}