/**
 * 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;
    }

        /* Hero benefits: premium stacked layout on mobile */
        .hero-benefits {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
            width: 100%;
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
            padding: 8px 0;
        }

        .hero-benefit {
            width: 100%;
            justify-content: flex-start;
            gap: 10px;
            font-size: 15px;
            line-height: 1.4;
            white-space: normal;
        }

        .hero-benefit svg {
            width: 18px;
            height: 18px;
            flex-shrink: 0;
        }
}

/* =====================================================
   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(--admin-input-border, var(--color-card-border)) !important;
        border-radius: var(--radius-md) !important;
        font-family: inherit !important;
        background: var(--admin-input-bg, var(--color-surface-base)) !important;
        color: var(--admin-input-text, var(--color-text-primary)) !important;
        transition: border-color 0.2s ease !important;
        -webkit-appearance: none !important; /* Remove iOS default styling */
        appearance: none !important;
    }
    
    /* 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 - DESKTOP LIMITS
   ===================================================== */

/* Desktop: Trust Icon auf 32px begrenzen */
@media (min-width: 769px) {
    .qualification-section {
        padding: calc(var(--spacing-3xl) + var(--spacing-xl)) 0;
        background: linear-gradient(180deg,
            rgba(75, 160, 255, 0.04) 0%,
            transparent 55%,
            rgba(75, 160, 255, 0.02) 100%);
    }

    /* Buttons: prevent text clipping on mobile */
    .btn,
    .btn-lg,
    .btn-primary,
    .btn-secondary {
        white-space: normal !important;
        line-height: 1.25 !important;
        height: auto !important;
        min-height: 44px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        text-align: center;
        overflow: visible;
        text-overflow: unset;
    }

    .qualification-content {
        max-width: 920px;
        margin: 0 auto;
        padding: calc(var(--spacing-3xl) + var(--spacing-2xl)) calc(var(--spacing-3xl) + var(--spacing-2xl)) calc(var(--spacing-3xl) + var(--spacing-lg));
        border-radius: 22px;
        background: rgba(6, 18, 36, 0.65);
        border: 1px solid rgba(75, 160, 255, 0.18);
        box-shadow: 0 18px 40px rgba(3, 10, 20, 0.25);
    }

    .qualification-headline {
        font-size: clamp(28px, 3vw, 36px);
        margin-bottom: var(--spacing-xl);
    }

    .qualification-trust-marker {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        border-radius: 999px;
        background: rgba(75, 160, 255, 0.08);
        border: 1px solid rgba(75, 160, 255, 0.2);
        margin-bottom: var(--spacing-2xl);
        font-size: 15px;
    }

    .trust-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        padding: 6px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .trust-icon svg {
        width: 100% !important;
        height: 100% !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }

    .qualification-body {
        font-size: 16px;
        line-height: 1.8;
    }

    .qualification-intro {
        font-size: 16px;
        margin-bottom: var(--spacing-lg);
    }
}

@media (min-width: 769px) {
    [data-theme="light"] .qualification-content {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(30, 93, 184, 0.18);
        box-shadow: 0 18px 40px rgba(22, 43, 80, 0.12);
    }

    [data-theme="light"] .qualification-trust-marker {
        background: rgba(30, 93, 184, 0.08);
        border-color: rgba(30, 93, 184, 0.2);
    }
}

/* Light Theme Contrast Fixes (global) */
[data-theme="light"] .trust-bar-content {
    background: rgba(30, 93, 184, 0.06) !important;
    border-color: rgba(30, 93, 184, 0.2) !important;
}

[data-theme="light"] .trust-item {
    color: var(--color-text-primary) !important;
}

[data-theme="light"] .trust-separator {
    color: rgba(30, 93, 184, 0.45) !important;
}

[data-theme="light"] .trust-icon-dot {
    background: var(--color-primary-base) !important;
    box-shadow: 0 0 8px rgba(30, 93, 184, 0.5) !important;
}

[data-theme="light"] .qualification-content {
    color: var(--color-text-primary) !important;
}

[data-theme="light"] .qualification-headline {
    color: var(--color-text-primary) !important;
}

[data-theme="light"] .qualification-body,
[data-theme="light"] .qualification-intro,
[data-theme="light"] .qualification-detail {
    color: var(--color-text-secondary) !important;
}

[data-theme="light"] .qualification-trust-marker {
    background: rgba(30, 93, 184, 0.08) !important;
    border: 1px solid rgba(30, 93, 184, 0.18) !important;
}

[data-theme="light"] .qualification-trust-marker .trust-text {
    color: var(--color-text-primary) !important;
}

[data-theme="light"] .qualification-trust-marker .trust-icon {
    background: rgba(30, 93, 184, 0.15) !important;
    color: var(--color-primary-base) !important;
}

/* =====================================================
   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;
    }
    
    [data-theme="light"] .footer-simple a {
        color: #0F172A !important;
        font-size: 12px;
        text-decoration: none;
        transition: color 0.2s ease;
        padding: 4px 6px;
        white-space: nowrap;
        line-height: 1.4;
        font-weight: 500 !important;
    }
    
    [data-theme="dark"] .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);
    }
    
    [data-theme="light"] .footer-divider {
        color: #0F172A !important;
        opacity: 0.85 !important;
        font-size: 10px;
        padding: 0 4px;
        user-select: none;
    }
    
    [data-theme="dark"] .footer-divider {
        color: var(--color-text-light);
        opacity: 0.4;
        font-size: 10px;
        padding: 0 4px;
        user-select: none;
    }
    
    [data-theme="light"] .footer-cookie-btn {
        background: rgba(30, 93, 184, 0.04) !important;
        border: 1px solid rgba(30, 93, 184, 0.1) !important;
        color: #0F172A !important;
        font-size: 12px;
        font-family: inherit;
        cursor: pointer;
        padding: 4px 6px;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
        white-space: nowrap;
        -webkit-appearance: none;
        appearance: none;
        border-radius: 4px;
        font-weight: 500 !important;
    }
    
    [data-theme="dark"] .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;
    }

    /* Hero CTA: stack buttons to avoid clipping */
    .hero-cta {
        flex-direction: column;
        width: 100%;
        gap: var(--space-sm);
    }

    .hero-cta .btn {
        width: 100% !important;
    }
    
    /* 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;
    }
}

/* =====================================================
   TRUST BAR - PREMIUM OVERRIDES (LAST LOADED)
   ===================================================== */

.trust-bar-minimal {
    text-align: center;
}

.trust-bar-content {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.75rem !important;
    padding: 0.85rem 2.25rem !important;
    background: linear-gradient(135deg, rgba(11, 26, 48, 0.85) 0%, rgba(8, 18, 34, 0.9) 100%) !important;
    border: 1px solid rgba(75, 160, 255, 0.18) !important;
    border-radius: 999px !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 18px 40px rgba(3, 10, 20, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    margin: 0 auto;
    max-width: 960px;
    width: fit-content;
}

.trust-bar-content:hover {
    background: linear-gradient(135deg, rgba(13, 34, 64, 0.9) 0%, rgba(9, 22, 42, 0.92) 100%) !important;
    border-color: rgba(75, 160, 255, 0.3) !important;
    box-shadow: 0 22px 48px rgba(3, 10, 20, 0.4), 0 0 30px rgba(75, 160, 255, 0.12) !important;
}

.trust-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.trust-separator {
    color: rgba(75, 160, 255, 0.35) !important;
    font-size: 0.95rem !important;
    opacity: 0.6;
    margin: 0 0.35rem;
}

[data-theme="light"] .trust-bar-content {
    background: linear-gradient(135deg, rgba(241, 247, 255, 0.95) 0%, rgba(232, 241, 252, 0.95) 100%) !important;
    border-color: rgba(30, 93, 184, 0.2) !important;
    box-shadow: 0 14px 30px rgba(22, 43, 80, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

[data-theme="light"] .trust-bar-content:hover {
    background: linear-gradient(135deg, rgba(232, 241, 252, 0.98) 0%, rgba(224, 236, 250, 0.98) 100%) !important;
    border-color: rgba(30, 93, 184, 0.3) !important;
    box-shadow: 0 18px 36px rgba(22, 43, 80, 0.12), 0 0 18px rgba(30, 93, 184, 0.08) !important;
}

@media (max-width: 768px) {
    .trust-bar-content {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-sm) !important;
        padding: var(--space-md) !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px !important;
        text-align: center;
    }

    .trust-separator {
        display: none !important;
    }

    .trust-item {
        font-size: var(--font-size-xs) !important;
        justify-content: center !important;
        white-space: normal;
    }
}

/* =====================================================
   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 */
    }
}