/**
 * iPhone 14 & Modern Smartphones - Enterprise Mobile Optimization
 * Mobile-First Approach: 390px baseline (iPhone 14)
 * 
 * Viewport Breakpoints:
 * - 320px: Kleine alte Phones
 * - 375px: iPhone SE, older models
 * - 390px: iPhone 14/15 (BASELINE)
 * - 410px: Pixel 6/7
 * - 480px: Larger phones, tablets starting
 * - 768px: Tablets
 * - 1200px: Desktop
 */

/* =====================================================
   MOBILE BASELINE (iPhone 14: 390px)
   ===================================================== */

/* Root Font Sizing für Mobile */
@media (max-width: 768px) {
    :root {
        /* Font Sizes - optimiert für Mobile */
        --font-size-xs: 12px;
        --font-size-sm: 13px;
        --font-size-base: 15px;
        --font-size-lg: 17px;
        --font-size-xl: 19px;
        --font-size-2xl: 22px;
        --font-size-3xl: 26px;
        
        /* Spacing - optimiert für Touch */
        --spacing-xs: 6px;
        --spacing-sm: 8px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 20px;
        --spacing-2xl: 28px;
        --spacing-3xl: 36px;
        
        /* Touch-friendly Sizes */
        --touch-min-height: 44px;
        --touch-min-width: 44px;
    }
}

/* =====================================================
   CONTACT FORM - MOBILE OPTIMIZATION
   ===================================================== */

@media (max-width: 768px) {
    .section {
        padding: var(--spacing-2xl) var(--spacing-md) !important;
    }
    
    /* Form Layout - Single Column on Mobile */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-xl) !important;
    }
    
    /* Form Container */
    .card {
        padding: var(--spacing-lg) !important;
        border-radius: var(--radius-md);
    }
    
    /* Form Groups */
    .form-group {
        margin-bottom: var(--spacing-lg) !important;
    }
    
    /* Form Labels */
    .form-label {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-xs);
        display: block;
        font-weight: 500;
    }
    
    /* Input Fields - Touch-optimized */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        width: 100% !important;
        padding: 12px var(--spacing-sm) !important; /* 44px min height on mobile */
        font-size: 16px !important; /* Prevents iOS zoom on input focus */
        border: 1px solid var(--color-card-border) !important;
        border-radius: var(--radius-md) !important;
        font-family: inherit;
        background: var(--color-surface-base);
        color: var(--color-text-primary);
        transition: border-color 0.2s ease;
        -webkit-appearance: none; /* Remove iOS default styling */
        appearance: none;
    }
    
    /* Input Focus States */
    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        outline: none;
        border-color: var(--color-primary-base);
        box-shadow: 0 0 0 3px rgba(75, 160, 255, 0.1);
    }
    
    /* Textarea */
    textarea {
        resize: vertical;
        min-height: 120px !important;
        line-height: 1.5;
        font-size: 16px !important;
    }
    
    /* Submit Button - Full Width on Mobile */
    .btn {
        width: 100% !important;
        padding: 14px var(--spacing-md) !important;
        min-height: var(--touch-min-height);
        font-size: var(--font-size-base);
        border-radius: var(--radius-md);
        border: none;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.2s ease;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    
    /* Checkbox/Toggle auf Mobile */
    .checkbox-label {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-sm);
        cursor: pointer;
        font-size: var(--font-size-sm);
        line-height: 1.4;
    }
    
    .checkbox-label input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        margin-top: 2px;
        cursor: pointer;
        accent-color: var(--color-primary-base);
        -webkit-appearance: none;
        appearance: none;
        border: 2px solid var(--color-card-border);
        border-radius: 4px;
        background: var(--color-surface-base);
        transition: all 0.2s ease;
    }
    
    .checkbox-label input[type="checkbox"]:checked {
        background: var(--color-primary-base);
        border-color: var(--color-primary-base);
    }
    
    .checkbox-label input[type="checkbox"]:focus {
        box-shadow: 0 0 0 3px rgba(75, 160, 255, 0.2);
    }
    
    /* Toggle Switch */
    .toggle-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        cursor: pointer;
    }
    
    .toggle-input {
        display: none;
    }
    
    .toggle-slider {
        width: 50px;
        height: 28px;
        background: var(--color-card-border);
        border-radius: 14px;
        position: relative;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .toggle-slider::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 24px;
        background: white;
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: all 0.3s ease;
    }
    
    .toggle-input:checked + .toggle-slider {
        background: var(--color-primary-base);
    }
    
    .toggle-input:checked + .toggle-slider::after {
        left: 24px;
    }
    
    .toggle-text {
        font-size: var(--font-size-sm);
        font-weight: 500;
    }
    
    /* Form Headings */
    .form-group h2,
    .form-group h3 {
        font-size: var(--font-size-xl);
        margin-bottom: var(--spacing-lg);
        line-height: 1.3;
    }
}

/* =====================================================
   IHK QUALIFICATION SECTION - MOBILE
   ===================================================== */

@media (max-width: 768px) {
    .qualification-section {
        padding: var(--spacing-2xl) 0 !important;
    }
    
    .qualification-section::before {
        display: none; /* Hide decorative line on mobile for performance */
    }
    
    .qualification-content {
        padding: 0 var(--spacing-md) !important;
    }
    
    .qualification-headline {
        font-size: clamp(20px, 5vw, 26px);
        margin-bottom: var(--spacing-lg) !important;
        line-height: 1.25;
    }
    
    .qualification-trust-marker {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-bottom: var(--spacing-lg) !important;
        padding: 8px 12px !important;
        background: rgba(75, 160, 255, 0.06);
        border-radius: 100px;
        font-size: 13px;
        line-height: 1.4;
    }
    
    .trust-icon {
        width: 28px;
        height: 28px;
        padding: 4px;
        background: rgba(75, 160, 255, 0.15);
        border-radius: 50%;
        color: var(--color-primary-glow);
        flex-shrink: 0;
    }
    
    .trust-text {
        font-weight: 500;
        color: var(--color-text-primary);
        word-break: break-word;
        flex: 1 1 100%;
        min-width: 0;
    }
    
    .trust-meta {
        color: var(--color-text-secondary);
        font-size: 12px;
        padding-left: 8px;
        border-left: 1px solid rgba(75, 160, 255, 0.2);
        flex: 1 1 auto;
    }
    
    .qualification-body {
        font-size: 15px;
        line-height: 1.6;
    }
    
    .qualification-intro {
        font-size: 15px;
        margin-bottom: var(--spacing-md) !important;
        color: var(--color-text-primary);
        font-weight: 500;
    }
    
    .qualification-detail {
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-text-secondary);
        margin: 0;
    }
}

/* =====================================================
   FOOTER - MOBILE OPTIMIZATION
   ===================================================== */

@media (max-width: 768px) {
    .footer {
        padding: var(--spacing-xl) var(--spacing-md) !important;
    }
    
    .footer-simple {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px !important;
        flex-wrap: wrap;
        flex-direction: row;
        min-height: auto;
    }
    
    .footer-simple a {
        color: var(--color-text-light);
        font-size: 12px;
        text-decoration: none;
        transition: color 0.2s ease;
        padding: 4px 6px;
        white-space: nowrap;
        line-height: 1.4;
    }
    
    .footer-simple a:active {
        color: var(--color-primary-glow);
    }
    
    .footer-divider {
        color: var(--color-text-light);
        opacity: 0.4;
        font-size: 10px;
        padding: 0 4px;
        user-select: none;
    }
    
    .footer-cookie-btn {
        background: none;
        border: none;
        color: var(--color-text-light);
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        padding: 4px 6px;
        transition: color 0.2s ease;
        white-space: nowrap;
        -webkit-appearance: none;
        appearance: none;
    }
    
    .footer-cookie-btn:active {
        color: var(--color-primary-glow);
    }
}

/* =====================================================
   EXTRA SMALL PHONES (320px - 375px)
   ===================================================== */

@media (max-width: 375px) {
    :root {
        --font-size-xs: 11px;
        --font-size-sm: 12px;
        --font-size-base: 14px;
        --font-size-lg: 16px;
        --font-size-xl: 18px;
        --font-size-2xl: 20px;
        
        --spacing-xs: 4px;
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --spacing-lg: 14px;
        --spacing-xl: 18px;
    }
    
    .section {
        padding: var(--spacing-xl) var(--spacing-md) !important;
    }
    
    .grid.grid-cols-2 {
        gap: var(--spacing-lg) !important;
    }
    
    .qualification-headline {
        font-size: clamp(18px, 5vw, 22px);
        margin-bottom: var(--spacing-md) !important;
    }
    
    .form-label {
        font-size: var(--font-size-xs);
    }
    
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea {
        padding: 10px var(--spacing-sm) !important;
        font-size: 14px !important;
    }
    
    .btn {
        padding: 12px var(--spacing-sm) !important;
        font-size: var(--font-size-sm);
    }
}

/* =====================================================
   MEDIUM PHONES (410px - 480px)
   ===================================================== */

@media (min-width: 391px) and (max-width: 480px) {
    /* Slightly larger comfortable spacing */
    .section {
        padding: var(--spacing-2xl) var(--spacing-md) !important;
    }
    
    .qualification-headline {
        font-size: clamp(22px, 5vw, 28px);
    }
}

/* =====================================================
   ACCESSIBILITY & TOUCH OPTIMIZATION
   ===================================================== */

@media (max-width: 768px) {
    /* Ensure all clickable elements meet 44x44px touch target */
    a, button, input[type="submit"], input[type="button"], input[type="checkbox"], label {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Prevent iOS zoom on form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important;
    }
    
    /* Smooth scrolling for better UX */
    html {
        scroll-behavior: smooth;
    }
    
    /* Reduce motion for animations */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Dark mode adjustments for mobile */
    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] input[type="email"],
    [data-theme="dark"] input[type="tel"],
    [data-theme="dark"] textarea {
        background: rgba(255, 255, 255, 0.05);
        color: #ffffff;
    }
    
    [data-theme="light"] input[type="text"],
    [data-theme="light"] input[type="email"],
    [data-theme="light"] input[type="tel"],
    [data-theme="light"] textarea {
        background: #ffffff;
        color: #000000;
    }
}

/* =====================================================
   PERFORMANCE OPTIMIZATIONS
   ===================================================== */

@media (max-width: 768px) {
    /* Reduce GPU/CPU intensive operations on mobile */
    * {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Remove box-shadows on mobile for performance */
    .card {
        box-shadow: none !important;
        border: 1px solid var(--color-card-border);
    }
    
    /* Optimize transform animations */
    .btn {
        will-change: auto; /* Remove will-change for non-animated elements */
    }
}