/* PROBLEM - Glacier Blue Dawn */
        .problem-section { background: transparent; }
        .problem-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); }
        .problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; margin-bottom: 60px; }
        .problem-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        /* Dual Orb System für Cards */
        .problem-card::before { 
            content: ''; 
            position: absolute; 
            width: 120px; height: 120px;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.2;
            background: radial-gradient(circle, var(--warm-orb) 0%, transparent 70%);
            top: -40px; right: -30px;
            transition: all 0.4s;
            pointer-events: none;
        }
        .problem-card::after { 
            content: ''; 
            position: absolute; 
            width: 100px; height: 100px;
            border-radius: 50%;
            filter: blur(35px);
            opacity: 0.15;
            background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
            bottom: -30px; left: -20px;
            transition: all 0.4s;
            pointer-events: none;
        }
        .problem-card:hover {
            transform: translateY(-8px);
            border-color: rgba(212, 184, 150, 0.2);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .problem-card:hover::before { opacity: 0.35; transform: scale(1.1); }
        .problem-card:hover::after { opacity: 0.25; transform: scale(1.1); }
        .problem-icon { font-size: 48px; margin-bottom: 24px; display: block; position: relative; z-index: 1; }
        .problem-title { font-size: 1.5rem; margin-bottom: 16px; position: relative; z-index: 1; }
        .problem-list { list-style: none; position: relative; z-index: 1; }
        .problem-list li { padding-left: 28px; margin-bottom: 12px; position: relative; color: var(--gray); }
        .problem-list li::before { content: '✗'; position: absolute; left: 0; color: var(--warm-orb); font-weight: bold; }
        .problem-result { margin-top: 20px; padding: 16px; border-radius: 12px; background: rgba(212, 184, 150, 0.1); border: 1px solid rgba(212, 184, 150, 0.2); font-weight: 600; color: var(--warm-orb); position: relative; z-index: 1; }
        
        /* COMPARISON */
        .comparison-box {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 24px;
            padding: 40px;
            border: 2px solid rgba(26, 143, 184, 0.2);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
            position: relative;
        }
        
        .comparison-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(26, 143, 184, 0.6) 50%, 
                transparent 100%);
        }
        .comparison-title { text-align: center; font-size: 1.5rem; margin-bottom: 32px; }
        .comparison-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
        .comparison-column h4 { font-size: 1.25rem; margin-bottom: 20px; text-align: center; }
        .comparison-column ul { list-style: none; }
        .comparison-column li { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .comparison-arrow { font-size: 2rem; color: var(--primary); font-weight: bold; }
        
        /* CLIPTRICK */
        .cliptrick-section { background: transparent; }
        .cliptrick-logo-header { text-align: center; margin-bottom: 60px; }
        
        /* Modernisiertes ClipTrick Badge - inspiriert von btn-shiny */
        .cliptrick-logo-container { 
            --gradient-angle: 0deg;
            display: inline-flex; 
            align-items: center; 
            gap: 16px; 
            padding: 20px 40px; 
            background: linear-gradient(var(--dark-card), var(--dark-card)) padding-box,
                conic-gradient(from calc(var(--gradient-angle)), transparent 0%, #1A8FB8 5%, #9ED2EA 10%, #F1F1F2 15%, #9ED2EA 20%, #1A8FB8 30%, transparent 40%, transparent 100%) border-box;
            border: 2px solid transparent;
            border-radius: 80px;
            animation: border-spin 3s linear infinite, float 4s ease-in-out infinite;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 8px 40px rgba(26, 143, 184, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .cliptrick-logo-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(158, 210, 234, 0.2), transparent);
            animation: shimmer-sweep 3s ease-in-out infinite;
        }
        @keyframes shimmer-sweep {
            0% { left: -100%; }
            50%, 100% { left: 100%; }
        }
        /* Firefox Fallback */
        @supports not (background: conic-gradient(from var(--gradient-angle), red, blue)) {
            .cliptrick-logo-container {
                background: linear-gradient(var(--dark-card), var(--dark-card)) padding-box,
                    linear-gradient(135deg, #1A8FB8, #9ED2EA, #F1F1F2, #9ED2EA, #1A8FB8) border-box;
            }
        }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .cliptrick-logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; box-shadow: 0 8px 32px rgba(26, 143, 184, 0.4); }
        .cliptrick-logo-text { font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .cliptrick-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; margin-bottom: 20px; }
        .step-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            padding: 40px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .step-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 20px 20px 0 0; }
        .step-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(26, 143, 184, 0.3);
            box-shadow: 
                0 20px 60px rgba(26, 143, 184, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .step-number { display: inline-flex; width: 48px; height: 48px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 12px; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; margin-bottom: 24px; color: white; }
        .step-title { font-size: 1.5rem; margin-bottom: 16px; }
        .step-description { color: var(--gray-light); margin-bottom: 20px; }
        .step-features { list-style: none; }
        .step-features li { padding-left: 28px; margin-bottom: 12px; position: relative; }
        .step-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; }
        .step-time { display: inline-block; background: rgba(26, 143, 184, 0.2); padding: 6px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--primary); margin-top: 16px; }
        
        /* v271: Glow Fade Animation */
        .cliptrick-steps .step-card {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.7s ease, background 0.4s ease, border-color 0.4s ease;
        }
        .cliptrick-steps .step-card:nth-child(1) { transition-delay: 0s; }
        .cliptrick-steps .step-card:nth-child(2) { transition-delay: 0.15s; }
        .cliptrick-steps .step-card:nth-child(3) { transition-delay: 0.3s; }
        .cliptrick-steps.revealed .step-card {
            opacity: 1;
            transform: translateY(0);
            animation: glowFade 1.5s ease forwards;
        }
        .cliptrick-steps.revealed .step-card:nth-child(1) { animation-delay: 0s; }
        .cliptrick-steps.revealed .step-card:nth-child(2) { animation-delay: 0.15s; }
        .cliptrick-steps.revealed .step-card:nth-child(3) { animation-delay: 0.3s; }
        @keyframes glowFade {
            0% {
                box-shadow: 0 0 60px rgba(26, 143, 184, 0.5), 0 8px 32px rgba(0, 0, 0, 0.3);
            }
            100% {
                box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            }
        }
        
        /* v321: Mobile Carousel für Step-Cards */
        .steps-carousel-nav {
            display: none; /* Desktop: versteckt */
        }
        /* v328: Fokus-Dots auf Desktop verstecken */
        .step-card-dots {
            display: none;
        }
        
        @media (max-width: 1024px) {
            /* v325: Strike-Text auf Tablet ausblenden */
            .s12-inline { display: none; }
            
            /* v321-v326: Carousel Container - zentriert mit max-width */
            .cliptrick-steps {
                display: flex;
                overflow: hidden;
                gap: 0;
                margin: 0 auto;
                position: relative;
                max-width: 700px;
            }
            /* v327/v328: Apple-Design - asymmetrisch, linksbündig, kräftig */
            .cliptrick-steps .step-card {
                min-width: 100%;
                max-width: 100%;
                width: 100%;
                flex-shrink: 0;
                transition: transform 0.4s ease;
                opacity: 1;
                padding: 40px 36px 48px 36px;
                box-sizing: border-box;
                overflow: hidden;
                text-align: left;
            }
            /* v327: Nummer als Statement-Element links */
            .cliptrick-steps .step-card .step-number {
                width: 60px;
                height: 60px;
                font-size: 1.85rem;
                margin: 0 0 28px 0;
            }
            /* v328: Titel noch größer */
            .cliptrick-steps .step-card .step-title {
                font-size: 2.1rem;
                font-weight: 700;
                color: var(--white);
                margin-bottom: 16px;
                letter-spacing: -0.02em;
            }
            /* v328: Description größer */
            .cliptrick-steps .step-card .step-description {
                font-size: 1.25rem;
                font-weight: 500;
                color: var(--gray-light);
                margin-bottom: 28px;
            }
            /* v328: Liste größer */
            .cliptrick-steps .step-card .step-features {
                display: block;
            }
            .cliptrick-steps .step-card .step-features li {
                font-size: 1.2rem;
                font-weight: 500;
                padding-left: 34px;
                margin-bottom: 16px;
                color: var(--gray-light);
            }
            .cliptrick-steps .step-card .step-features li::before {
                font-size: 1.2rem;
            }
            /* v328: Fokus-Dots */
            .step-card-dots {
                display: flex;
                gap: 18px;
                align-items: center;
                justify-content: center;
                margin-top: 36px;
                padding-top: 28px;
                border-top: 1px solid rgba(255,255,255,0.06);
            }
            .step-card-dot {
                width: 12px;
                height: 12px;
                background: var(--primary);
                border-radius: 50%;
                opacity: 0.25;
            }
            .step-card-dot:nth-child(2) {
                width: 16px;
                height: 16px;
                opacity: 0.5;
            }
            .step-card-dot:nth-child(3) {
                width: 22px;
                height: 22px;
                opacity: 1;
                box-shadow: 0 0 20px var(--primary), 0 0 40px rgba(26, 143, 184, 0.3);
            }
            .cliptrick-steps.revealed .step-card {
                animation: none;
                opacity: 1;
                transform: none;
            }
            
            /* v321: Navigation */
            .steps-carousel-nav {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 20px;
                margin-top: 24px;
            }
            .steps-nav-btn {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: rgba(26, 143, 184, 0.15);
                border: 1px solid rgba(26, 143, 184, 0.3);
                color: var(--primary);
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s ease;
            }
            .steps-nav-btn:hover, .steps-nav-btn:active {
                background: rgba(26, 143, 184, 0.3);
                border-color: var(--primary);
            }
            
            /* v321: Dots */
            .steps-dots {
                display: flex;
                gap: 12px;
            }
            .steps-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.2);
                border: none;
                cursor: pointer;
                transition: all 0.3s ease;
            }
            .steps-dot.active {
                background: var(--primary);
                transform: scale(1.2);
            }
            .steps-dot:hover {
                background: rgba(26, 143, 184, 0.5);
            }
        }
        
        /* v338: Mobile Hierarchie-Fix - step-title unter section-title (2rem) */
        @media (max-width: 768px) {
            .cliptrick-steps .step-card {
                padding: 36px 32px 40px 32px;
            }
            .cliptrick-steps .step-card .step-number {
                width: 52px;
                height: 52px;
                font-size: 1.6rem;
                margin: 0 0 24px 0;
            }
            .cliptrick-steps .step-card .step-title {
                font-size: 1.65rem;
            }
            .cliptrick-steps .step-card .step-description {
                font-size: 1.1rem;
                margin-bottom: 24px;
            }
            .cliptrick-steps .step-card .step-features li {
                font-size: 1.05rem;
                margin-bottom: 14px;
            }
        }
        
        .feature-box {
            background: rgba(26, 143, 184, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(26, 143, 184, 0.2);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 
                0 15px 50px rgba(26, 143, 184, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .feature-box h3 { margin-bottom: 24px; text-align: center; }
        .feature-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
        .feature-list li { padding: 16px 20px; background: rgba(255,255,255,0.05); border-radius: 12px; border-left: 4px solid var(--primary); }
        
        /* GUARANTEE SECTION */
        .guarantee-section { background: transparent; padding: 80px 0; }
        
        /* SHOWCASE */
        .showcase-section { background: transparent; }
        .showcase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
        .showcase-concept {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 24px;
            padding: 40px;
            border: 1px solid rgba(26, 143, 184, 0.3);
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .showcase-concept::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 20px 20px 0 0; }
        .showcase-label { display: inline-block; background: rgba(26, 143, 184, 0.2); padding: 8px 20px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 24px; }
        .concept-text { background: rgba(0,0,0,0.3); border-radius: 12px; padding: 24px; font-family: 'Courier New', monospace; font-size: 14px; line-height: 1.8; max-height: 500px; overflow-y: auto; border: 1px solid rgba(26, 143, 184, 0.2); }
        .concept-text::-webkit-scrollbar { width: 8px; }
        .concept-text::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
        .concept-text::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
        .concept-scene { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .concept-scene:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .scene-title { color: var(--primary); font-weight: 700; margin-bottom: 8px; }
        
        /* === SPOT KONZEPT STYLES === */
        .spot-header-inline {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
            flex-wrap: wrap;
        }
        .spot-number-badge {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            font-weight: 800;
            color: white;
            flex-shrink: 0;
        }
        .spot-title-group {
            margin-bottom: 24px;
        }
        .spot-title-group h3 {
            font-size: 1.5rem;
            margin-bottom: 4px;
            color: var(--white);
        }
        .spot-meta {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
            color: var(--gray);
        }
        .spot-meta span {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .spot-meta strong {
            color: var(--primary);
        }
        
        /* Hook Box */
        .spot-hook {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.12) 0%, rgba(26, 143, 184, 0.04) 100%);
            border-left: 4px solid var(--primary);
            border-radius: 0 16px 16px 0;
            padding: 24px 28px;
            margin-bottom: 28px;
            position: relative;
            overflow: hidden;
        }
        .spot-hook::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 120px;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(212, 184, 150, 0.08) 100%);
            border-radius: 0 16px 16px 0;
            pointer-events: none;
        }
        .spot-hook-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 10px;
        }
        .spot-hook-text {
            font-size: 1rem;
            font-weight: 400;
            color: var(--white);
            font-style: italic;
            line-height: 1.7;
        }
        
        /* Journey Flow */
        .spot-journey {
            margin-bottom: 28px;
            padding: 20px 0;
            border-top: 1px solid rgba(158, 210, 234, 0.1);
            border-bottom: 1px solid rgba(158, 210, 234, 0.1);
        }
        .spot-journey-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 16px;
        }
        .journey-flow {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .journey-step {
            flex: 1;
            text-align: center;
            padding: 12px 8px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 10px;
            border: 1px solid rgba(26, 143, 184, 0.15);
            transition: all 0.3s ease;
        }
        .journey-step:hover {
            background: rgba(26, 143, 184, 0.1);
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        .journey-emotion {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--white);
        }
        .journey-arrow {
            font-size: 1.25rem;
            color: var(--primary);
            flex-shrink: 0;
        }
        
        /* Scenes */
        .spot-scenes-label {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--primary);
            margin-bottom: 16px;
        }
        .spot-scene {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .spot-scene:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .spot-scene-time {
            width: 56px;
            flex-shrink: 0;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--primary);
            padding-top: 2px;
        }
        .spot-scene-content {
            flex: 1;
        }
        .spot-scene-visual {
            font-size: 0.9rem;
            color: var(--white);
            margin-bottom: 6px;
            line-height: 1.6;
        }
        .spot-scene-audio {
            font-size: 0.8rem;
            font-style: italic;
            color: var(--secondary);
            opacity: 0.9;
        }
        
        /* Mobile Journey */
        @media (max-width: 768px) {
            .journey-flow {
                flex-direction: column;
                gap: 12px;
            }
            .journey-step {
                width: 100%;
                padding: 14px 16px;
            }
            .journey-arrow {
                transform: rotate(90deg);
            }
            .spot-header-inline {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }
            .spot-scene {
                flex-direction: column;
                gap: 8px;
            }
            .spot-scene-time {
                width: auto;
                padding-bottom: 4px;
                border-bottom: 1px solid rgba(26, 143, 184, 0.2);
            }
        }
        .showcase-result { position: sticky; top: 100px; }
        .result-video-container { background: linear-gradient(135deg, rgba(26, 143, 184, 0.1) 0%, rgba(158, 210, 234, 0.1) 100%); border-radius: 20px; padding: 4px; border: 2px solid rgba(26, 143, 184, 0.3); }
        .result-video-wrapper { background: var(--dark-card); border-radius: 16px; overflow: hidden; aspect-ratio: 16/9; }
        .result-video-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1A1A1A 0%, #121820 50%, #1A1A1A 100%); display: flex; align-items: center; justify-content: center; }
        .result-play-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white; box-shadow: 0 10px 40px rgba(26, 143, 184, 0.4); }
        .result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
        .result-stat { text-align: center; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 12px; }
        .result-stat-number { font-size: 1.75rem; font-weight: 900; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 4px; }
        .result-stat-label { font-size: 0.875rem; color: var(--gray); }
        
        /* SOCIAL ENGINE */
        .social-engine-section { background: transparent; position: relative; overflow: hidden; }
        .social-engine-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; background: radial-gradient(circle, rgba(26, 143, 184, 0.1) 0%, transparent 70%); transform: translate(-50%, -50%); animation: pulse-glow 4s ease-in-out infinite; }
        @keyframes pulse-glow { 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); } }
        .engine-header { text-align: center; margin-bottom: 80px; position: relative; z-index: 2; }
        .engine-icon { font-size: 64px; margin-bottom: 24px; display: block; animation: rotate-slow 10s linear infinite; }
        @keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .engine-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
        .engine-features {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border-radius: 24px;
            padding: 40px;
            border: 1px solid rgba(26, 143, 184, 0.3);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .engine-features h3 { margin-bottom: 32px; font-size: 1.75rem; }
        .capability-list { list-style: none; }
        .capability-item { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
        .capability-item:last-child { border-bottom: none; }
        .capability-item:hover { padding-left: 12px; }
        .capability-title { font-weight: 700; color: var(--white); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
        .capability-icon { color: var(--primary); font-size: 20px; }
        .capability-description { color: var(--gray-light); font-size: 0.95rem; }
        .engine-showcase { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
        .social-video-card { background: linear-gradient(135deg, rgba(26, 143, 184, 0.1) 0%, rgba(158, 210, 234, 0.1) 100%); border-radius: 16px; padding: 3px; transition: all 0.4s; }
        .social-video-card:hover { transform: translateY(-8px); box-shadow: 0 20px 60px rgba(26, 143, 184, 0.3); }
        .social-video-wrapper { background: var(--dark-card); border-radius: 13px; overflow: hidden; aspect-ratio: 9/16; position: relative; }
        .social-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 13px; }
        .social-video-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1A1A1A 0%, #121820 25%, #3D2544 50%, #121820 75%, #1A1A1A 100%); background-size: 200% 200%; animation: gradientMove 4s ease infinite; display: flex; align-items: center; justify-content: center; }
        .social-play-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; box-shadow: 0 8px 32px rgba(26, 143, 184, 0.4); }
        .social-video-label { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(0,0,0,0.8); backdrop-filter: blur(10px); padding: 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--white); text-align: center; z-index: 10; pointer-events: none; }
        .engine-cta { text-align: center; margin-top: 60px; position: relative; z-index: 2; }
        .engine-cta p { font-size: 1.25rem; margin-bottom: 32px; }
        
        /* ========================================
           FUNNEL KONFIGURATOR STYLES
           ======================================== */
        .funnel-section { 
            background: transparent; 
            position: relative;
            overflow: hidden;
            padding: 100px 0;
        }
        
        /* ========================================
           v118: PREMIUM VOLLBILD APP-MODUS
           Großzügig, selbstbewusst, hochwertig
           ======================================== */
        
        /* === VOLLBILD CONTAINER === */
        .funnel-fullscreen-app {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, 
                #08080a 0%, 
                #0c0c0f 40%,
                #0a0a0d 100%);
            z-index: 10000;
            flex-direction: column;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        
        .funnel-fullscreen-app.active {
            display: flex;
            opacity: 1;
        }
        
        body.app-mode-active {
            overflow: hidden;
        }
        
        /* === APP HEADER (15% oben) === */
        .app-header {
            flex-shrink: 0;
            padding: 30px 50px 25px;
            background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, transparent 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        
        /* Titel groß und zentral */
        .app-header-title {
            text-align: center;
            margin-bottom: 28px;
        }
        
        .app-header-title h2 {
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--white);
            margin: 0 0 6px 0;
            letter-spacing: 0.02em;
        }
        
        .app-header-title p {
            font-size: 0.95rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* Progress Bar - GROSS und PROMINENT */
        .app-progress-container {
            width: 100%;
            max-width: 750px;
            padding: 0;
        }
        
        .app-progress-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin-bottom: 10px;
        }
        
        /* Progress Linie im Hintergrund */
        .app-progress-bar::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 25px;
            right: 25px;
            height: 3px;
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-50%);
            border-radius: 2px;
            z-index: 0;
        }
        
        .app-progress-line {
            position: absolute;
            top: 50%;
            left: 25px;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            transform: translateY(-50%);
            border-radius: 2px;
            z-index: 1;
            transition: width 0.5s ease;
        }
        
        /* Progress Steps - GROSSE Kreise */
        .app-progress-step {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(20, 20, 25, 0.9);
            border: 2px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 700;
            color: var(--gray);
            position: relative;
            z-index: 2;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .app-progress-step:hover {
            border-color: rgba(26, 143, 184, 0.5);
            background: rgba(26, 143, 184, 0.1);
        }
        
        .app-progress-step.active {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-color: transparent;
            color: white;
            box-shadow: 
                0 0 0 4px rgba(26, 143, 184, 0.2),
                0 4px 20px rgba(26, 143, 184, 0.4);
        }
        
        .app-progress-step.completed {
            background: rgba(26, 143, 184, 0.2);
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Progress Labels - IMMER SICHTBAR */
        .app-progress-labels {
            display: flex;
            justify-content: space-between;
            padding: 0 2px;
        }
        
        .app-progress-label {
            width: 46px;
            text-align: center;
            font-size: 0.75rem;
            color: var(--gray);
            transition: color 0.3s ease;
        }
        
        .app-progress-label.active {
            color: var(--primary);
            font-weight: 600;
        }
        
        .app-progress-label.completed {
            color: var(--gray-light);
        }
        
        /* Navigation Buttons im Header */
        .app-nav-buttons {
            position: absolute;
            top: 30px;
            left: 50px;
            right: 50px;
            display: flex;
            justify-content: space-between;
            pointer-events: none;
        }
        
        .app-nav-buttons > * {
            pointer-events: auto;
        }
        
        .app-back-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 12px;
            color: var(--gray-light);
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.25s ease;
        }
        
        .app-back-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: var(--white);
        }
        
        .app-back-btn.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        .app-close-btn {
            --gradient-angle: 0deg;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(var(--dark-card), var(--dark-card)) padding-box,
                conic-gradient(
                    from var(--gradient-angle),
                    transparent 0%,
                    #1A8FB8 10%,
                    #9ED2EA 20%,
                    #F1F1F2 30%,
                    #9ED2EA 40%,
                    #1A8FB8 50%,
                    transparent 60%,
                    transparent 100%
                ) border-box;
            border: 2px solid transparent;
            color: var(--gray-light);
            font-size: 1.3rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.25s ease;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            animation: border-spin-close 3s linear infinite;
        }

        @keyframes border-spin-close {
            to { --gradient-angle: 360deg; }
        }

        .app-close-btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(-45deg, transparent, rgba(26, 143, 184, 0.3), rgba(158, 210, 234, 0.2), transparent);
            opacity: 0.5;
            animation: shimmer-close 2.5s linear infinite;
            pointer-events: none;
            border-radius: inherit;
        }

        @keyframes shimmer-close {
            0% { transform: translateX(-100%) rotate(0deg); }
            100% { transform: translateX(100%) rotate(0deg); }
        }

        .app-close-btn:hover {
            background: linear-gradient(rgba(255, 80, 80, 0.15), rgba(255, 80, 80, 0.15)) padding-box,
                conic-gradient(
                    from var(--gradient-angle),
                    transparent 0%,
                    #ff6b6b 10%,
                    #ff8a8a 20%,
                    #ffaaaa 30%,
                    #ff8a8a 40%,
                    #ff6b6b 50%,
                    transparent 60%,
                    transparent 100%
                ) border-box;
            color: #ff6b6b;
        }
        
        /* === APP CONTENT (70% mitte) === */
        .app-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start; /* v197: war center - verhinderte Scroll nach oben */
            padding: 20px 60px 80px;
            
            scrollbar-width: thin;
            scrollbar-color: rgba(26, 143, 184, 0.3) transparent;
        }
        
        .app-content::-webkit-scrollbar {
            width: 6px;
        }
        
        .app-content::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .app-content::-webkit-scrollbar-thumb {
            background: rgba(26, 143, 184, 0.3);
            border-radius: 3px;
        }
        
        /* Content Wrapper */
        .app-content-inner {
            width: 100%;
            max-width: 1000px;
            margin: auto 0; /* v197: Vertikale Zentrierung bei kurzem Content */
        }
        
        /* === TYPOGRAPHY IM APP-MODUS === */
        .app-content .funnel-question {
            text-align: center;
            font-size: 2.4rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 40px;
            letter-spacing: -0.02em;
        }
        
        .app-content .funnel-subquestion {
            text-align: center;
            font-size: 1.1rem;
            color: var(--gray);
            margin: -24px 0 40px 0;
        }
        
        /* === CARDS - GROSS UND PREMIUM === */
        .app-content .funnel-problem-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 950px;
            margin: 0 auto;
        }
        
        .app-content .funnel-options-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .app-content .camera-type-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 0 auto 24px;
        }
        
        .app-content .camera-tech-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px;
            max-width: 750px;
            margin: 0 auto 20px;
        }
        
        /* Premium Card Styling */
        .app-content .funnel-entry-card,
        .app-content .funnel-problem-card,
        .app-content .funnel-option-card,
        .app-content .camera-type-card,
        .app-content .camera-location-card,
        .app-content .camera-delivery-card {
            min-height: 220px;
            padding: 36px 28px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.025);
            border: 2px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        .app-content .funnel-entry-card:hover,
        .app-content .funnel-problem-card:hover,
        .app-content .funnel-option-card:hover,
        .app-content .camera-type-card:hover,
        .app-content .camera-location-card:hover,
        .app-content .camera-delivery-card:hover {
            border-color: rgba(26, 143, 184, 0.4);
            background: rgba(26, 143, 184, 0.05);
            transform: translateY(-6px);
            box-shadow: 
                0 20px 50px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(26, 143, 184, 0.1);
        }
        
        .app-content .funnel-entry-card.selected,
        .app-content .funnel-problem-card.selected,
        .app-content .funnel-option-card.selected,
        .app-content .camera-type-card.selected,
        .app-content .camera-location-card.selected,
        .app-content .camera-delivery-card.selected {
            border-color: var(--primary);
            background: rgba(26, 143, 184, 0.1);
            box-shadow: 
                0 0 0 4px rgba(26, 143, 184, 0.15),
                0 20px 50px rgba(26, 143, 184, 0.2);
        }
        
        /* Card Icons - GROSS */
        .app-content .funnel-problem-icon,
        .app-content .funnel-option-icon {
            font-size: 3.5rem;
            margin-bottom: 20px;
            line-height: 1;
        }
        
        /* Card Titel */
        .app-content .funnel-problem-title,
        .app-content .funnel-option-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 8px;
        }
        
        /* Card Beschreibung */
        .app-content .funnel-problem-desc,
        .app-content .funnel-option-desc {
            font-size: 0.95rem;
            color: var(--gray);
            line-height: 1.4;
        }
        
        /* Preis-Hints in Cards */
        .app-content .funnel-price-hint {
            font-size: 0.85rem;
        }
        
        /* Zeit-Labels (Express, Standard, etc.) */
        .app-content .funnel-option-card .funnel-option-title + span,
        .app-content .funnel-option-subtitle {
            font-size: 1.1rem;
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        /* === SLIDER BEREICHE === */
        .app-content .camera-duration-slider-container,
        .app-content .camera-km-container {
            max-width: 650px;
            margin: 0 auto;
        }
        
        .app-content .camera-duration-value {
            font-size: 4.5rem;
        }
        
        .app-content .camera-duration-unit {
            font-size: 1.8rem;
        }
        
        /* === RESULT SCREEN === */
        .app-content .camera-result-container,
        .app-content .funnel-result-card {
            max-width: 700px;
            margin: 0 auto;
        }
        
        .app-content .camera-result-price {
            font-size: 4rem;
        }
        
        /* === APP FOOTER (15% unten, nur Desktop) === */
        .app-footer {
            flex-shrink: 0;
            padding: 20px 50px;
            background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .app-footer-info {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .app-footer-info span {
            color: var(--gray-light);
        }
        
        /* === MOBILE VERSION === */
        @media (max-width: 900px) {
            .app-content .funnel-problem-grid,
            .app-content .funnel-options-grid,
            .app-content .camera-type-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .app-content .funnel-entry-card,
            .app-content .funnel-problem-card,
            .app-content .funnel-option-card,
            .app-content .camera-type-card {
                min-height: 180px;
                padding: 28px 22px;
            }
            
            .app-content .funnel-problem-icon,
            .app-content .funnel-option-icon {
                font-size: 2.8rem;
            }
        }
        
        @media (max-width: 768px) {
            /* v335: Header mit deutlich mehr Abstand */
            .app-header {
                padding: 20px 16px 24px;
            }
            
            /* v339: Abstand nach oben für Platz unter Nav-Buttons */
            .app-header-title {
                margin-top: 50px;
                margin-bottom: 20px;
            }
            
            .app-header-title h2 {
                font-size: 1.1rem;
            }
            
            .app-header-title p {
                font-size: 0.8rem;
                margin-top: 4px;
            }
            
            /* Nav Buttons - mehr Abstand nach oben */
            .app-nav-buttons {
                top: 20px;
                left: 16px;
                right: 16px;
            }
            
            .app-back-btn {
                padding: 10px 16px;
                font-size: 0.8rem;
            }
            
            .app-close-btn {
                width: 36px;
                height: 36px;
            }
            
            /* v335: Progress mit mehr Abstand */
            .app-progress-container {
                padding: 0 16px;
                margin-bottom: 20px;
            }
            
            .app-progress-step {
                width: 32px;
                height: 32px;
                font-size: 0.8rem;
            }
            
            .app-progress-label {
                display: none;
            }
            
            /* v335: Content - mehr padding oben */
            .app-content {
                padding: 24px 20px 24px;
                justify-content: flex-start;
            }
            
            .app-content-inner {
                margin: 0;
            }
            
            .app-content .funnel-question {
                font-size: 1.4rem;
                margin-bottom: 20px;
            }
            
            .app-content .funnel-subquestion {
                font-size: 0.9rem;
                margin-bottom: 16px;
            }
            
            /* Cards */
            .app-content .funnel-problem-grid,
            .app-content .funnel-options-grid,
            .app-content .camera-type-grid,
            .app-content .camera-tech-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            /* v333: Tech-Cards kompakter */
            .app-content .camera-tech-card {
                padding: 14px 16px;
            }
            
            .app-content .funnel-entry-card,
            .app-content .funnel-problem-card,
            .app-content .funnel-option-card,
            .app-content .camera-type-card,
            .app-content .camera-location-card,
            .app-content .camera-delivery-card {
                min-height: auto;
                padding: 16px 18px;
                flex-direction: row;
                justify-content: flex-start;
                text-align: left;
                gap: 16px;
            }
            
            .app-content .funnel-problem-icon,
            .app-content .funnel-option-icon {
                font-size: 2rem;
                margin-bottom: 0;
                flex-shrink: 0;
            }
            
            .app-content .funnel-problem-title,
            .app-content .funnel-option-title {
                font-size: 1rem;
                margin-bottom: 2px;
            }
            
            .app-content .funnel-problem-desc,
            .app-content .funnel-option-desc {
                font-size: 0.8rem;
                display: none;
            }
            
            /* v333: Option-Value (Zeiten wie "7-10 Tage") */
            .app-content .funnel-option-value {
                font-size: 0.85rem;
                margin-bottom: 0;
            }
            
            /* v333: Tempo-Hints (+25% Aufpreis, -10% sparen) */
            .app-content .tempo-hint {
                font-size: 0.65rem;
                padding: 3px 8px;
                position: static;
                margin-left: auto;
            }
            
            /* v333: Slider-Styles für Mobile */
            .app-content .funnel-slider-container {
                padding: 12px 16px;
            }
            
            .app-content .funnel-slider-display {
                margin-bottom: 12px;
            }
            
            .app-content .slider-value-number {
                font-size: 3rem;
            }
            
            .app-content .funnel-slider-info {
                margin-top: 12px;
                padding: 14px 16px;
            }
            
            /* v333: Kamera-Slider kompakter */
            .app-content .camera-duration-slider-container {
                padding: 16px;
            }
            
            .app-content .camera-duration-value {
                font-size: 3.5rem;
            }
            
            .app-content .camera-duration-unit {
                font-size: 1.4rem;
            }
            
            /* Footer ausblenden auf Mobile */
            .app-footer {
                display: none;
            }
        }
        
        /* Animation beim Öffnen */
        @keyframes appFadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        
        .funnel-fullscreen-app.active {
            animation: appFadeIn 0.4s ease-out;
        }
        .funnel-section .section-header {
            margin-bottom: 36px;
        }
        .funnel-section .section-badge {
            margin-bottom: 12px;
        }
        .funnel-section .section-title {
            font-size: clamp(2.5rem, 6vw, 4rem);
            margin-bottom: 12px;
            font-weight: 800;
        }
        .funnel-section .section-subtitle {
            font-size: 1.3rem;
            margin-bottom: 0;
            color: var(--gray);
        }
        .funnel-section::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1200px;
            height: 1200px;
            background: radial-gradient(circle, rgba(26, 143, 184, 0.1) 0%, transparent 60%);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        
        /* Funnel Question (Screen-Fragen) - v114: noch kompakter */
        .funnel-question {
            text-align: center;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 32px;
            letter-spacing: -0.02em;
        }
        
        /* Funnel Progress Bar - GROSS */
        .funnel-progress-container {
            background: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border-radius: 20px;
            padding: 24px 32px 18px;
            margin-bottom: 24px;
            border: 1px solid rgba(26, 143, 184, 0.15);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }
        .funnel-progress-wrapper { max-width: 700px; margin: 0 auto; }
        .funnel-progress-bar {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 8px;
        }
        .funnel-progress-bar::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(26, 143, 184, 0.15);
            transform: translateY(-50%);
            z-index: 0;
        }
        .funnel-progress-line {
            position: absolute;
            top: 50%;
            left: 0;
            height: 2px;
            width: 0%;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            transform: translateY(-50%);
            transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
            z-index: 1;
            box-shadow: 0 0 15px rgba(26, 143, 184, 0.4);
        }
        .funnel-progress-step {
            position: relative;
            z-index: 2;
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: rgba(26, 26, 26, 0.9);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(26, 143, 184, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--gray);
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            cursor: pointer;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }
        .funnel-progress-step:hover { transform: scale(1.08); }
        .funnel-progress-step.completed:hover { border-color: var(--secondary); }
        .funnel-progress-step.active {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-color: var(--primary);
            color: white;
            box-shadow: 0 8px 28px rgba(26, 143, 184, 0.5), 0 0 0 5px rgba(26, 143, 184, 0.15);
            transform: scale(1.15);
        }
        .funnel-progress-step.completed {
            background: var(--primary);
            border-color: var(--primary);
            color: white;
            box-shadow: 0 4px 16px rgba(26, 143, 184, 0.4);
        }
        .funnel-progress-labels { display: flex; justify-content: space-between; margin-top: 12px; }
        .funnel-progress-label {
            font-size: 0.8rem;
            color: var(--gray);
            font-weight: 600;
            text-align: center;
            width: 52px;
            letter-spacing: 0.02em;
        }
        .funnel-progress-label.active { color: var(--primary); font-weight: 700; }
        
        /* v119: 6-Step Progress Labels für Social Media */
        .funnel-labels-6 .funnel-progress-label {
            width: 70px;
        }
        .funnel-progress-6 .funnel-progress-step {
            width: 38px;
            height: 38px;
            font-size: 0.9rem;
        }
        
        /* Funnel Back Button - IMMER Platz reservieren für konsistentes Layout */
        .funnel-back-button {
            display: inline-flex;
            visibility: hidden;
            opacity: 0;
            align-items: center;
            gap: 8px;
            background: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(26, 143, 184, 0.2);
            color: var(--gray-light);
            padding: 12px 24px;
            border-radius: 12px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            margin-bottom: 24px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
        }
        .funnel-back-button.visible { 
            visibility: visible;
            opacity: 1;
        }
        .funnel-back-button.visible:hover {
            background: rgba(26, 143, 184, 0.15);
            border-color: var(--primary);
            transform: translateX(-4px);
        }
        
        /* Funnel Content Area */
        .funnel-content-area { position: relative; min-height: 280px; }
        
        /* Funnel Screen */
        .funnel-screen {
            display: none;
            animation: funnelFadeIn 0.5s cubic-bezier(0.65, 0, 0.35, 1);
        }
        .funnel-screen.active { display: block; }
        @keyframes funnelFadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Problem Cards Grid */
        .funnel-problem-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;
            max-width: 1100px;
            margin: 0 auto;
        }
        
        /* v93: 3-Spalten Grid für Screen 0 (Einstieg) */
        .funnel-problem-grid:has(.funnel-entry-card) {
            grid-template-columns: repeat(3, 1fr);
            max-width: 900px;
        }
        
        .funnel-problem-card,
        .funnel-entry-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 36px 24px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
            position: relative;
        }
        .funnel-problem-card:hover,
        .funnel-entry-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.25), 0 0 0 1px rgba(26, 143, 184, 0.2);
        }
        .funnel-problem-card.selected,
        .funnel-entry-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        .funnel-problem-icon { font-size: 3rem; margin-bottom: 18px; display: block; }
        .funnel-problem-title { font-size: 1.25rem; margin-bottom: 10px; color: var(--white); font-weight: 700; }
        .funnel-problem-desc { color: var(--gray-light); font-size: 1rem; margin: 0; line-height: 1.5; }
        
        /* v63: Fix für schwarzen Strich/Caret beim Klicken */
        .funnel-style-card,
        .funnel-problem-card,
        .funnel-entry-card,
        .funnel-option-card,
        .funnel-extra-card {
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            caret-color: transparent;
        }
        
        /* Video Type Grid - ENTFERNT (nicht mehr verwendet) */
        
        /* Budget Grid */
        .funnel-budget-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }
        .funnel-budget-option {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 40px 32px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        .funnel-budget-option:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.2);
        }
        .funnel-budget-option.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.3), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        .funnel-budget-icon { font-size: 2.5rem; margin-bottom: 16px; display: block; }
        .funnel-budget-title { font-size: 1.25rem; margin-bottom: 8px; color: var(--white); }
        .funnel-budget-range {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }
        .funnel-budget-desc { color: var(--gray); font-size: 0.9rem; margin: 0; }
        
        /* Result Container */
        .funnel-result-container {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
            border-radius: 24px;
            padding: 48px;
            border: 1px solid rgba(26, 143, 184, 0.2);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }
        .funnel-result-icon { font-size: 4rem; margin-bottom: 16px; display: block; }
        .funnel-result-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
        }
        .funnel-result-title {
            font-size: clamp(2rem, 5vw, 3rem);
            margin-bottom: 16px;
            letter-spacing: -0.02em;
        }
        .funnel-result-price {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }
        .funnel-result-timeline {
            font-size: 1.1rem;
            color: var(--gray);
            font-weight: 600;
            margin-bottom: 24px;
        }
        .funnel-result-desc {
            font-size: 1.15rem;
            color: var(--gray-light);
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .funnel-result-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            text-align: left;
            margin-bottom: 40px;
            padding: 32px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 16px;
        }
        .funnel-result-column h4 {
            font-size: 1.1rem;
            margin-bottom: 16px;
            color: var(--white);
        }
        .funnel-result-column ul { list-style: none; padding: 0; margin: 0; }
        .funnel-result-column li {
            padding: 8px 0;
            padding-left: 24px;
            position: relative;
            color: var(--gray-light);
            font-size: 0.95rem;
        }
        .funnel-result-column li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
        }
        .funnel-result-cta {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 12px;
            margin-bottom: 24px;
        }
        
        /* Funnel Result Notes */
        .funnel-result-notes {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 12px;
            padding: 20px 24px;
            margin-bottom: 24px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .funnel-note {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.9rem;
            color: var(--gray-light);
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .funnel-note:last-child {
            border-bottom: none;
        }
        .funnel-note-icon {
            font-size: 1.1rem;
            width: 24px;
            text-align: center;
        }
        
        /* Funnel Copy Feedback */
        .funnel-copy-feedback {
            display: none;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(46, 204, 113, 0.1) 100%);
            border: 1px solid rgba(46, 204, 113, 0.4);
            color: #2ecc71;
            padding: 12px 24px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 20px;
            animation: fadeInOut 2s ease-in-out;
        }
        .funnel-copy-feedback.show {
            display: inline-block;
        }
        @keyframes fadeInOut {
            0% { opacity: 0; transform: translateY(-10px); }
            20% { opacity: 1; transform: translateY(0); }
            80% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-10px); }
        }
        
        /* Funnel Restart Link */
        .funnel-restart-link {
            background: none;
            border: none;
            color: var(--gray);
            font-size: 0.9rem;
            cursor: pointer;
            padding: 12px 20px;
            transition: color 0.3s;
            font-family: inherit;
        }
        .funnel-restart-link:hover {
            color: var(--primary);
        }
        
        /* B2B Hinweis */
        .funnel-b2b-note {
            font-size: 0.8rem;
            color: var(--gray);
            margin-top: 24px;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }
        
        /* v65: Rechtlicher Hinweis */
        .funnel-legal-note {
            font-size: 0.75rem;
            color: var(--gray);
            margin-top: 12px;
            font-style: italic;
            opacity: 0.8;
        }
        
        /* 7-Step Progress Bar */
        .funnel-progress-7 {
            max-width: 800px;
        }
        .funnel-progress-7 .funnel-progress-step {
            width: 40px;
            height: 40px;
            font-size: 0.85rem;
        }
        .funnel-labels-7 .funnel-progress-label {
            width: 40px;
            font-size: 0.75rem;
        }
        
        /* v235: 9-Step Progress Bar (Screen 2 entfällt) */
        .funnel-progress-9 {
            max-width: 850px;
        }
        .funnel-progress-9 .funnel-progress-step {
            width: 34px;
            height: 34px;
            font-size: 0.8rem;
        }
        .funnel-labels-9 .funnel-progress-label {
            width: 34px;
            font-size: 0.8rem;
        }
        
        /* 2-Spalten Grid für Screen 7 */
        .funnel-2col {
            grid-template-columns: repeat(2, 1fr) !important;
            max-width: 700px !important;
        }
        
        /* v93: 2-Spalten Grid zentriert für Screen 1a/1b */
        .funnel-2col-center {
            grid-template-columns: repeat(2, 1fr) !important;
            max-width: 700px !important;
            margin: 0 auto;
        }
        
        /* v96: Kameramann-Flow Styles - v108: kompakter */
        .camera-type-grid {
            max-width: 850px;
            gap: 12px !important;
        }
        
        .camera-type-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            padding: 20px 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .camera-type-card:hover {
            transform: translateY(-4px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 16px 48px rgba(26, 143, 184, 0.25);
        }
        
        .camera-type-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        
        .camera-type-card .funnel-option-icon {
            font-size: 2rem;
            margin-bottom: 8px;
        }
        
        .camera-type-card .funnel-option-title {
            font-size: 1rem;
            margin-bottom: 4px;
        }
        
        .camera-type-card .funnel-option-desc {
            font-size: 0.8rem;
        }
        
        /* ========================================
           v99: NEUER Kameramann Dauer-Slider
           Kombiniert: 2h-8h stundengenau, dann halbtageweise
           v100: Layout kompakter für bessere Sichtbarkeit
           v101: Unbenutztes CSS entfernt
           ======================================== */
        
        .camera-duration-slider-container {
            max-width: 620px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Große Anzeige - v108: kompakter */
        .camera-duration-display {
            text-align: center;
            margin-bottom: 10px;
        }
        
        .camera-duration-value {
            font-size: 3.2rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
        }
        
        .camera-duration-unit {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--gray-light);
            margin-left: 6px;
        }
        
        .camera-duration-label {
            display: block;
            font-size: 0.9rem;
            color: var(--gray);
            margin-top: 2px;
        }
        
        /* Slider Wrapper */
        .camera-duration-slider-wrapper {
            position: relative;
            height: 44px;
            display: flex;
            align-items: center;
            margin-bottom: 2px;
        }
        
        /* Der eigentliche Slider */
        .camera-duration-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            outline: none;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        
        /* Thumb - WebKit */
        .camera-duration-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #1A8FB8, #2CB5E8);
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 20px rgba(26, 143, 184, 0.7), 0 0 0 4px rgba(26, 143, 184, 0.3);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .camera-duration-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 6px 28px rgba(26, 143, 184, 0.8), 0 0 0 6px rgba(26, 143, 184, 0.4);
        }
        
        /* Thumb - Firefox */
        .camera-duration-slider::-moz-range-thumb {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #1A8FB8, #2CB5E8);
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid rgba(255, 255, 255, 0.9);
            box-shadow: 0 4px 20px rgba(26, 143, 184, 0.7);
        }
        
        /* Track Fill */
        .camera-duration-track-fill {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 10px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 5px;
            pointer-events: none;
            z-index: 1;
            transition: width 0.1s ease;
        }
        
        /* Ticks */
        .camera-duration-ticks {
            display: flex;
            justify-content: space-between;
            padding: 0 8px;
            margin-bottom: 16px;
        }
        
        .camera-tick {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            padding: 4px 6px;
            border-radius: 4px;
            transition: all 0.2s;
            text-align: center;
            min-width: 28px;
        }
        
        .camera-tick:hover {
            color: var(--primary);
            background: rgba(26, 143, 184, 0.1);
        }
        
        .camera-tick.active {
            color: var(--primary);
            font-weight: 700;
            background: rgba(26, 143, 184, 0.15);
        }
        
        .camera-tick.separator {
            position: relative;
        }
        
        .camera-tick.separator::before {
            content: '';
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 20px;
            background: rgba(26, 143, 184, 0.3);
        }
        
        /* Preis-Box - v108: kompakter */
        .camera-duration-price-box {
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 14px 18px;
            margin-bottom: 10px;
            text-align: center;
        }
        
        .camera-duration-price-main {
            margin-bottom: 6px;
        }
        
        .camera-duration-price {
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--white);
        }
        
        .camera-duration-price-detail {
            color: var(--gray);
            font-size: 0.8rem;
            margin-bottom: 8px;
            line-height: 1.3;
        }
        
        .camera-duration-savings {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.1));
            border: 1px solid rgba(76, 175, 80, 0.3);
            padding: 6px 14px;
            border-radius: 20px;
        }
        
        .savings-icon {
            font-size: 0.95rem;
        }
        
        .savings-text {
            color: #81C784;
            font-size: 0.85rem;
        }
        
        .savings-text strong {
            color: #4CAF50;
            font-weight: 700;
        }
        
        .savings-badge {
            background: #4CAF50;
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 700;
        }
        
        /* Bestätigen-Box - v108: kompakter */
        .camera-duration-confirm {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15), rgba(26, 143, 184, 0.08));
            border: 2px solid rgba(26, 143, 184, 0.4);
            border-radius: 12px;
            padding: 12px 24px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .camera-duration-confirm:hover {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.25), rgba(26, 143, 184, 0.15));
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        /* v100: Pulse-Animation für Weiter-Button */
        .camera-duration-confirm.pulse {
            animation: cameraPulseAttention 0.6s ease-out;
        }
        
        @keyframes cameraPulseAttention {
            0% { transform: scale(1); border-color: rgba(26, 143, 184, 0.4); }
            50% { transform: scale(1.02); border-color: var(--primary); box-shadow: 0 0 20px rgba(26, 143, 184, 0.4); }
            100% { transform: scale(1); border-color: rgba(26, 143, 184, 0.4); }
        }
        
        .confirm-text {
            font-size: 1rem;
            color: var(--white);
        }
        
        .confirm-text strong {
            color: var(--primary);
        }
        
        .confirm-arrow {
            font-size: 1.1rem;
            color: var(--primary);
            transition: transform 0.3s ease;
        }
        
        .camera-duration-confirm:hover .confirm-arrow {
            transform: translateX(6px);
        }
        
        @media (max-width: 600px) {
            .camera-duration-value {
                font-size: 3.2rem;
            }
            .camera-duration-unit {
                font-size: 1.4rem;
            }
            .camera-tick {
                font-size: 0.75rem;
                padding: 4px 4px;
                min-width: 22px;
            }
            .camera-duration-price {
                font-size: 2.2rem;
            }
            .camera-duration-price-box {
                padding: 18px;
            }
        }
        
        /* ========================================
           v102: Kameramann Screen K6 - Kilometer
           v107: Kompakter + näher an Timeline
           ======================================== */
        
        .camera-km-container {
            max-width: 620px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        .camera-km-quick {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .camera-km-btn {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 12px 8px;
            color: var(--white);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            line-height: 1.2;
        }
        
        .camera-km-btn span {
            display: block;
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--gray);
            margin-top: 3px;
        }
        
        .camera-km-btn:hover {
            border-color: rgba(26, 143, 184, 0.5);
            background: rgba(26, 143, 184, 0.1);
            transform: translateY(-2px);
        }
        
        .camera-km-btn.active {
            border-color: var(--primary);
            background: rgba(26, 143, 184, 0.15);
        }
        
        .camera-km-btn.active span {
            color: var(--primary);
        }
        
        .camera-km-slider-wrapper {
            margin-bottom: 12px;
        }
        
        .camera-km-display {
            text-align: center;
            margin-bottom: 8px;
        }
        
        .camera-km-value {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .camera-km-unit {
            font-size: 1.1rem;
            color: var(--gray-light);
            margin-left: 4px;
            font-weight: 600;
        }
        
        .camera-km-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
        
        .camera-km-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(26, 143, 184, 0.5);
        }
        
        .camera-km-slider::-moz-range-thumb {
            width: 26px;
            height: 26px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            cursor: pointer;
            border: none;
        }
        
        .camera-km-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .camera-km-cost {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 12px;
            padding: 14px 16px;
            text-align: center;
            margin-bottom: 12px;
        }
        
        .km-cost-label {
            color: var(--gray-light);
            font-size: 0.9rem;
        }
        
        .km-cost-value {
            display: inline;
            font-size: 1.6rem;
            font-weight: 700;
            color: var(--white);
            margin-left: 8px;
        }
        
        .km-cost-detail {
            display: block;
            color: var(--gray);
            font-size: 0.8rem;
            margin-top: 4px;
        }
        
        .camera-km-confirm {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 14px;
            padding: 16px 32px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(26, 143, 184, 0.3);
        }
        
        .camera-km-confirm:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(26, 143, 184, 0.45);
        }
        
        .camera-km-confirm .confirm-text {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
        }
        
        @media (max-width: 500px) {
            .camera-km-quick {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        /* ========================================
           v102: Kameramann Screen K7 - Ergebnis
           v108: Kompakter für bessere Sichtbarkeit
           ======================================== */
        
        .camera-result-container {
            max-width: 580px;
            margin: 0 auto;
            padding: 0 15px;
        }
        
        .camera-result-header {
            text-align: center;
            margin-bottom: 14px;
        }
        
        .camera-result-badge {
            display: inline-block;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.2), rgba(26, 143, 184, 0.1));
            border: 1px solid rgba(26, 143, 184, 0.3);
            padding: 6px 16px;
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        .camera-result-price {
            font-size: 3rem;
            font-weight: 800;
            color: var(--white);
            line-height: 1;
        }
        
        .camera-result-subtitle {
            color: var(--gray);
            font-size: 0.85rem;
            margin-top: 4px;
        }
        
        .camera-result-breakdown {
            background: rgba(0, 0, 0, 0.25);
            border-radius: 12px;
            padding: 14px 16px;
            margin-bottom: 12px;
        }
        
        .camera-result-breakdown h4 {
            color: var(--white);
            font-size: 0.9rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        
        .camera-result-items {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .camera-result-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        
        .camera-result-item:last-child {
            border-bottom: none;
        }
        
        .camera-result-item .item-label {
            color: var(--gray-light);
            font-size: 0.85rem;
        }
        
        .camera-result-item .item-value {
            color: var(--white);
            font-weight: 600;
            font-size: 0.85rem;
        }
        
        .camera-result-item.total {
            border-top: 2px solid rgba(26, 143, 184, 0.3);
            padding-top: 10px;
            margin-top: 6px;
        }
        
        .camera-result-item.total .item-label {
            color: var(--white);
            font-weight: 700;
            font-size: 1rem;
        }
        
        .camera-result-item.total .item-value {
            color: var(--primary);
            font-weight: 800;
            font-size: 1.1rem;
        }
        
        .camera-result-savings {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(76, 175, 80, 0.08));
            border: 1px solid rgba(76, 175, 80, 0.3);
            padding: 10px 16px;
            border-radius: 10px;
            margin-bottom: 14px;
            color: #81C784;
            font-size: 0.9rem;
        }
        
        .camera-result-savings strong {
            color: #4CAF50;
        }
        
        .camera-result-actions {
            display: flex;
            gap: 16px;
            margin-bottom: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .camera-result-actions .btn {
            min-width: 180px;
        }
        
        .camera-result-note {
            text-align: center;
            color: var(--gray);
            font-size: 0.85rem;
        }
        
        @media (max-width: 500px) {
            .camera-result-price {
                font-size: 2.5rem;
            }
            .camera-result-actions {
                flex-direction: column;
                align-items: center;
            }
            .camera-result-actions .btn {
                width: 100%;
                max-width: 280px;
            }
        }
        
        /* v98: Kameramann Location Cards */
        .camera-location-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 32px 20px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .camera-location-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.25);
        }
        
        .camera-location-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        
        /* v98: Kameramann Technik-Auswahl 
           v114: Kompakter nach oben */
        .camera-tech-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            max-width: 700px;
            margin: 0 auto 12px;
        }
        
        .camera-tech-card {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            border: 2px solid rgba(255, 255, 255, 0.08);
            padding: 20px 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: block;
        }
        
        .camera-tech-card:hover {
            border-color: rgba(26, 143, 184, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(26, 143, 184, 0.15);
        }
        
        .camera-tech-card input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        .camera-tech-card:has(input:checked) {
            border-color: var(--primary);
            background: rgba(26, 143, 184, 0.1);
            box-shadow: 0 8px 24px rgba(26, 143, 184, 0.2);
        }
        
        .camera-tech-card:has(input:checked) .camera-tech-check {
            opacity: 1;
            transform: scale(1);
        }
        
        .camera-tech-content {
            display: flex;
            align-items: center;
            gap: 14px;
        }
        
        .camera-tech-icon {
            font-size: 1.8rem;
            width: 44px;
            text-align: center;
        }
        
        .camera-tech-info {
            flex: 1;
            text-align: left;
        }
        
        .camera-tech-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 4px;
        }
        
        .camera-tech-desc {
            font-size: 0.85rem;
            color: var(--gray);
            margin: 0;
            line-height: 1.3;
        }
        
        .camera-tech-price {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--primary);
            white-space: nowrap;
        }
        
        .camera-tech-check {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 50%;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: bold;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.3s ease;
        }
        
        .camera-tech-summary {
            text-align: center;
            padding: 14px 18px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            margin-bottom: 14px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        #cameraTechTotal {
            font-size: 1rem;
            color: var(--gray-light);
        }
        
        #cameraTechTotal strong {
            color: var(--primary);
        }
        
        .camera-tech-buttons {
            display: flex;
            gap: 14px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .camera-skip-btn {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: var(--gray-light);
            padding: 14px 28px;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .camera-skip-btn:hover {
            border-color: rgba(255, 255, 255, 0.4);
            color: var(--white);
        }
        
        .camera-confirm-btn {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border: none;
            color: white;
            padding: 14px 28px;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 24px rgba(26, 143, 184, 0.3);
        }
        
        .camera-confirm-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(26, 143, 184, 0.45);
        }
        
        /* v98: Kameramann Delivery Cards */
        .camera-delivery-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 36px 24px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        
        .camera-delivery-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.25);
        }
        
        .camera-delivery-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        
        @media (max-width: 600px) {
            .camera-tech-grid {
                grid-template-columns: 1fr;
            }
            .camera-tech-content {
                flex-wrap: wrap;
            }
            .camera-tech-price {
                width: 100%;
                text-align: right;
                margin-top: 8px;
            }
        }
        
        /* ========================================
           v103: Kameramann Progress Bar
           v107: Kompakter, näher an Content
           ======================================== */
        .camera-progress-container {
            max-width: 700px;
            margin: 0 auto 14px;
            padding: 12px 20px 8px;
            background: rgba(0, 0, 0, 0.25);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        
        .camera-progress-wrapper {
            position: relative;
        }
        
        .camera-progress-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            margin-bottom: 6px;
        }
        
        .camera-progress-line {
            position: absolute;
            top: 50%;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 2px;
            transform: translateY(-50%);
            transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
            z-index: 0;
        }
        
        .camera-progress-step {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            border: 2px solid rgba(255, 255, 255, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--gray);
            position: relative;
            z-index: 1;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            cursor: pointer;
        }
        
        .camera-progress-step:hover {
            border-color: rgba(26, 143, 184, 0.5);
            background: rgba(26, 143, 184, 0.1);
        }
        
        .camera-progress-step.active {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-color: transparent;
            color: white;
            box-shadow: 0 4px 16px rgba(26, 143, 184, 0.4);
        }
        
        .camera-progress-step.completed {
            background: var(--primary);
            border-color: transparent;
            color: white;
        }
        
        .camera-progress-labels {
            display: flex;
            justify-content: space-between;
        }
        
        .camera-progress-label {
            font-size: 0.75rem;
            color: var(--gray);
            text-align: center;
            width: 32px;
            white-space: nowrap;
            transition: color 0.3s ease;
        }
        
        .camera-progress-label.active {
            color: var(--primary);
            font-weight: 600;
        }
        
        .camera-progress-label.completed {
            color: var(--gray-light);
        }
        
        /* Funnel Hint Text */
        .funnel-hint {
            text-align: center;
            color: var(--gray);
            font-size: 0.9rem;
            margin-top: 1.5rem;
            opacity: 0.8;
        }
        
        /* Extras Grid (v62) */
        .funnel-extras-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            max-width: 700px;
            margin: 0 auto 2rem;
        }
        
        .funnel-extra-card {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 16px;
            border: 2px solid rgba(255, 255, 255, 0.08);
            padding: 1.25rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .funnel-extra-card:hover {
            border-color: rgba(26, 143, 184, 0.4);
            transform: translateY(-2px);
        }
        
        .funnel-extra-card input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }
        
        .funnel-extra-card input[type="checkbox"]:checked + .funnel-extra-content + .funnel-extra-check {
            opacity: 1;
            transform: scale(1);
        }
        
        .funnel-extra-card:has(input:checked) {
            border-color: var(--primary);
            background: rgba(26, 143, 184, 0.1);
        }
        
        .funnel-extra-content {
            flex: 1;
        }
        
        .funnel-extra-icon {
            font-size: 1.5rem;
            margin-bottom: 0.25rem;
        }
        
        .funnel-extra-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 0.25rem;
        }
        
        .funnel-extra-desc {
            font-size: 0.8rem;
            color: var(--gray);
            margin-bottom: 0.25rem;
        }
        
        .funnel-extra-price {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 600;
        }
        
        .funnel-extra-check {
            width: 28px;
            height: 28px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.3s ease;
        }
        
        .funnel-extras-actions {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        
        .funnel-extras-actions .btn {
            min-width: 180px;
        }
        
        /* v64: Subquestion Styling - v107: kompakter */
        /* v114: subquestion kompakter */
        .funnel-subquestion {
            text-align: center;
            color: var(--gray-light);
            font-size: 0.9rem;
            margin: -0.5rem 0 1rem;
            opacity: 0.9;
        }
        
        /* v64: Video-Count Grid für Social Media Pakete */
        .funnel-videocount-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .funnel-videocount-card {
            position: relative;
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 2rem 1.5rem;
            border: 2px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            text-align: center;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
            caret-color: transparent;
        }
        
        .funnel-videocount-card:hover {
            transform: translateY(-6px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.5);
            box-shadow: 0 20px 50px rgba(26, 143, 184, 0.2);
        }
        
        .funnel-videocount-card.selected {
            background: rgba(26, 143, 184, 0.15);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 3px rgba(26, 143, 184, 0.2);
        }
        
        .funnel-videocount-card.popular {
            border-color: rgba(26, 143, 184, 0.4);
        }
        
        .funnel-videocount-card.bestvalue {
            border-color: rgba(255, 193, 7, 0.4);
        }
        
        .videocount-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--primary) 0%, #2cb5e8 100%);
            color: white;
            padding: 4px 16px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        
        .funnel-videocount-card.bestvalue .videocount-badge {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
            color: #000;
        }
        
        .videocount-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--white);
            line-height: 1;
            margin-bottom: 0.25rem;
        }
        
        .videocount-label {
            font-size: 1.1rem;
            color: var(--gray-light);
            margin-bottom: 1rem;
        }
        
        .videocount-discount {
            display: inline-block;
            background: rgba(26, 143, 184, 0.2);
            color: var(--primary);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        
        .funnel-videocount-card.bestvalue .videocount-discount {
            background: rgba(255, 193, 7, 0.2);
            color: #ffc107;
        }
        
        .videocount-price {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 0.25rem;
        }
        
        .videocount-perunit {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        /* Style Cards Grid (mit Bildern) - v63: 3 Spalten */
        .funnel-style-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            max-width: 900px;
            margin: 0 auto;
        }
        .funnel-style-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            overflow: hidden;
        }
        .funnel-style-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.25);
        }
        .funnel-style-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        .funnel-style-image {
            aspect-ratio: 16/9;
            overflow: hidden;
        }
        .funnel-style-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15) 0%, rgba(26, 143, 184, 0.05) 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .placeholder-icon {
            font-size: 2.5rem;
        }
        .placeholder-text {
            font-size: 0.75rem;
            color: var(--gray);
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .funnel-style-content {
            padding: 16px;
            text-align: center;
        }
        .funnel-style-title {
            font-size: 1.1rem;
            margin-bottom: 6px;
            color: var(--white);
            font-weight: 600;
        }
        .funnel-style-desc {
            font-size: 0.9rem;
            color: var(--gray-light);
            margin: 0;
            line-height: 1.4;
        }
        
        /* Option Cards Grid (3 Spalten) - GROSS */
        .funnel-option-grid {
            display: grid;
            gap: 28px;
            max-width: 950px;
            margin: 0 auto;
        }
        .funnel-option-grid.funnel-3col {
            grid-template-columns: repeat(3, 1fr);
        }
        .funnel-option-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 36px 24px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        .funnel-option-card:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 60px rgba(26, 143, 184, 0.25);
        }
        .funnel-option-card.selected {
            background: rgba(26, 143, 184, 0.12);
            border-color: var(--primary);
            box-shadow: 0 12px 40px rgba(26, 143, 184, 0.35), 0 0 0 2px rgba(26, 143, 184, 0.3);
        }
        .funnel-option-icon {
            font-size: 2.8rem;
            margin-bottom: 16px;
            display: block;
        }
        .funnel-option-title {
            font-size: 1.3rem;
            margin-bottom: 8px;
            color: var(--white);
            font-weight: 700;
        }
        .funnel-option-value {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 10px;
        }
        .funnel-option-desc {
            font-size: 1rem;
            color: var(--gray-light);
            margin: 0;
            line-height: 1.5;
        }
        
        /* ========================================
           v72: FREMDSPRACHEN-SCREEN (Screen 9)
           HORIZONTALES Layout - Seite an Seite
           ======================================== */
        
        /* Subquestion für Screen 9 */
        .funnel-subquestion {
            font-size: 1rem;
            color: var(--gray-light);
            text-align: center;
            margin-bottom: 25px;
            line-height: 1.5;
        }
        
        /* v72: Horizontales Row-Layout */
        .language-row {
            display: flex;
            gap: 20px;
            justify-content: center;
            align-items: stretch;
            margin-bottom: 20px;
            min-height: 120px; /* Feste Mindesthöhe verhindert Springen */
        }
        
        /* Kasten 1: Anzahl Fremdsprachen */
        .language-count-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 25px 30px;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            flex: 0 0 auto;
            min-width: 200px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* v72 Fix: Anfangs nach rechts verschoben, dann zurück zur Mitte */
            transform: translateX(85px);
        }
        .language-count-card.shifted {
            transform: translateX(0);
        }
        .language-count-card:hover {
            border-color: rgba(26, 143, 184, 0.3);
        }
        .language-card-label {
            font-size: 0.95rem;
            color: var(--gray-light);
            margin-bottom: 15px;
            text-align: center;
        }
        .language-counter-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }
        .language-counter-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid var(--glass-border);
            background: var(--glass-bg);
            color: var(--primary);
            font-size: 1.5rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .language-counter-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(26, 143, 184, 0.4);
        }
        .language-counter-btn:active {
            transform: scale(0.95);
        }
        .language-counter-value {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--primary);
            min-width: 50px;
            text-align: center;
            text-shadow: 0 0 30px rgba(26, 143, 184, 0.4);
        }
        
        /* Kasten 2: Sprecher-Wahl (gleitet von rechts rein) */
        .speaker-choice-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-radius: 16px;
            padding: 25px 30px;
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            flex: 0 0 auto;
            min-width: 250px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* Animation: von rechts reingleiten */
            opacity: 0;
            transform: translateX(30px);
            max-width: 0;
            padding: 0;
            overflow: hidden;
        }
        .speaker-choice-card.visible {
            opacity: 1;
            transform: translateX(0);
            max-width: 320px;
            padding: 25px 30px;
        }
        .speaker-choice-card:hover {
            border-color: rgba(26, 143, 184, 0.3);
        }
        
        /* Slider Container */
        .speaker-slider-container {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 10px;
        }
        
        /* Slider Labels (links/rechts) */
        .speaker-slider-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            min-width: 65px;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0.5;
        }
        .speaker-slider-label.active {
            opacity: 1;
        }
        .speaker-slider-label.active .speaker-slider-icon {
            transform: scale(1.1);
        }
        .speaker-slider-label.active .speaker-slider-name {
            color: var(--primary);
        }
        .speaker-slider-label.active .speaker-slider-price {
            color: var(--primary);
            font-weight: 600;
        }
        .speaker-slider-icon {
            font-size: 1.6rem;
            transition: transform 0.3s ease;
        }
        .speaker-slider-name {
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--gray-light);
            transition: color 0.3s ease;
        }
        .speaker-slider-price {
            font-size: 0.75rem;
            color: var(--gray-light);
            transition: all 0.3s ease;
        }
        
        /* Der eigentliche Slider-Track */
        .speaker-slider-track {
            flex: 1;
            height: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            min-width: 50px;
        }
        .speaker-slider-fill {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--primary), #0D6A8A);
            border-radius: 5px;
            transition: width 0.35s ease;
        }
        .speaker-slider-fill.right {
            width: 100%;
        }
        .speaker-slider-thumb {
            position: absolute;
            top: 50%;
            left: 0%;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--primary), #0D6A8A);
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(26, 143, 184, 0.4);
            cursor: grab;
            transition: left 0.35s ease;
        }
        .speaker-slider-thumb.right {
            left: 100%;
        }
        
        /* Preis-Hinweis */
        .language-price-hint {
            font-size: 1rem;
            color: var(--gray-light);
            text-align: center;
            margin-bottom: 20px;
            min-height: 28px;
        }
        .language-price-hint .highlight {
            color: var(--primary);
            font-weight: 600;
        }
        
        /* Buttons */
        .funnel-language-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        /* Responsive: Mobile untereinander */
        @media (max-width: 600px) {
            .language-row {
                flex-direction: column;
                align-items: center;
            }
            .language-count-card,
            .speaker-choice-card {
                width: 100%;
                max-width: 320px;
            }
            /* v340: Mobile - keine Verschiebung */
            .language-count-card {
                transform: translateX(0);
            }
            .speaker-choice-card.visible {
                max-width: 320px;
                transform: translateY(0);
            }
            .speaker-choice-card {
                transform: translateY(-10px);
            }
            .funnel-language-buttons {
                flex-direction: column;
            }
            .funnel-language-buttons .btn {
                width: 100%;
            }
        }
        
        /* ========================================
           SLIDER STYLES (Screen 3) - OPTIMIERT
           ======================================== */
        .funnel-slider-container {
            max-width: 550px;
            margin: 0 auto;
            padding: 10px 20px;
        }
        .funnel-slider-display {
            text-align: center;
            margin-bottom: 16px;
        }
        .slider-value-number {
            font-size: 4rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1;
            display: inline;
            text-shadow: 0 0 50px rgba(26, 143, 184, 0.5);
        }
        .slider-value-unit {
            font-size: 1.2rem;
            color: var(--gray-light);
            margin-left: 8px;
            display: inline;
        }
        .funnel-slider-wrapper {
            position: relative;
            height: 50px;
            display: flex;
            align-items: center;
        }
        .funnel-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 12px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            outline: none;
            cursor: pointer;
            position: relative;
            z-index: 2;
        }
        .funnel-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 4px 20px rgba(26, 143, 184, 0.5), 0 0 0 3px rgba(26, 143, 184, 0.2);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .funnel-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
            box-shadow: 0 6px 28px rgba(26, 143, 184, 0.6), 0 0 0 5px rgba(26, 143, 184, 0.3);
        }
        .funnel-slider::-moz-range-thumb {
            width: 32px;
            height: 32px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 50%;
            cursor: pointer;
            border: none;
            box-shadow: 0 4px 20px rgba(26, 143, 184, 0.5);
        }
        .slider-track-fill {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 10px;
            background: linear-gradient(90deg, var(--primary), var(--primary-light));
            border-radius: 5px;
            pointer-events: none;
            z-index: 1;
        }
        .funnel-slider-ticks {
            display: flex;
            justify-content: space-between;
            margin-top: 8px;
            padding: 0 5px;
        }
        .slider-tick {
            font-size: 0.75rem;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            padding: 3px 6px;
            border-radius: 4px;
            transition: all 0.2s;
        }
        .slider-tick:hover {
            color: var(--primary);
            background: rgba(26, 143, 184, 0.1);
        }
        .slider-tick.active {
            color: var(--primary);
            font-weight: 600;
        }
        .funnel-slider-info {
            margin-top: 16px;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15), rgba(26, 143, 184, 0.08));
            border: 2px solid rgba(26, 143, 184, 0.3);
            border-radius: 14px;
            padding: 18px 24px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .funnel-slider-info:hover {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.25), rgba(26, 143, 184, 0.15));
            border-color: var(--primary);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(26, 143, 184, 0.3);
        }
        .slider-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .info-platform {
            color: var(--gray-light);
            font-size: 0.95rem;
        }
        .info-price {
            color: var(--primary);
            font-weight: 700;
            font-size: 1.4rem;
        }
        /* v67: Längenrabatt-Anzeige */
        .slider-length-discount {
            text-align: center;
            margin-top: 8px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.15), rgba(26, 143, 184, 0.15));
            border: 1px solid rgba(46, 204, 113, 0.3);
            border-radius: 20px;
            color: #2ecc71;
            font-size: 0.9rem;
            font-weight: 600;
            display: inline-block;
            animation: fadeInDiscount 0.3s ease;
        }
        @keyframes fadeInDiscount {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .slider-confirm-hint {
            text-align: center;
            margin-top: 10px;
            color: var(--primary);
            font-size: 0.95rem;
            font-weight: 600;
            opacity: 0.8;
            transition: all 0.3s ease;
        }
        .funnel-slider-info:hover .slider-confirm-hint {
            opacity: 1;
        }
        
        /* Pulse-Animation beim Loslassen des Sliders */
        @keyframes pulseAttention {
            0% { transform: scale(1); opacity: 0.8; }
            50% { transform: scale(1.15); opacity: 1; color: var(--white); text-shadow: 0 0 10px rgba(26, 143, 184, 0.5); }
            100% { transform: scale(1); opacity: 0.8; }
        }
        .slider-confirm-hint.pulse {
            animation: pulseAttention 0.6s ease-out;
        }
        
        /* Result Summary */
        .funnel-result-summary {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px 24px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 12px;
            padding: 16px 24px;
            margin-bottom: 32px;
            border: 1px solid rgba(255, 255, 255, 0.06);
        }
        .funnel-summary-item {
            font-size: 0.85rem;
            color: var(--gray-light);
        }
        .funnel-summary-item span {
            color: var(--gray);
        }
        .funnel-summary-item strong {
            color: var(--white);
        }
        
        /* ========================================
           V49 NEUE FEATURES - CSS
           ======================================== */
        
        /* A1: Echtzeit-Preisanzeige */
        .funnel-live-price {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(26, 143, 184, 0.95);
            backdrop-filter: blur(10px);
            padding: 12px 20px;
            border-radius: 12px;
            z-index: 1000;
            display: none;
            flex-direction: column;
            align-items: flex-end;
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            transition: all 0.3s ease;
            border: 1px solid rgba(255,255,255,0.2);
        }
        .funnel-live-price.visible { display: flex; }
        .funnel-live-price-label {
            font-size: 0.75rem;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .funnel-live-price-value {
            font-size: 1.4rem;
            font-weight: 700;
            color: #fff;
            transition: transform 0.3s ease;
        }
        .funnel-live-price-value.pulse {
            animation: pricePulse 0.4s ease;
        }
        @keyframes pricePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }
        
        /* A3: Hover-Previews / Mobile Info-Icon */
        .funnel-option-card,
        .funnel-problem-card,
        .funnel-style-card {
            position: relative;
        }
        .funnel-price-hint {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: rgba(0,0,0,0.9);
            color: #fff;
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.75rem;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 100;
            pointer-events: none;
            display: none; /* v77: Komplett ausgeblendet */
        }
        .funnel-price-hint::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 6px solid transparent;
            border-top-color: rgba(0,0,0,0.9);
            display: none; /* v77: Dreieck ausgeblendet */
        }
        /* v77: Tooltip-Hover komplett deaktiviert */
        /*
        .funnel-option-card:hover .funnel-price-hint,
        .funnel-problem-card:hover .funnel-price-hint,
        .funnel-style-card:hover .funnel-price-hint {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }
        */
        .funnel-info-icon {
            display: none;
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            background: rgba(26, 143, 184, 0.8);
            border-radius: 50%;
            font-size: 0.75rem;
            color: #fff;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        /* B1: Animierte Progress-Bar */
        .funnel-progress-line {
            transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .funnel-progress-step.completed {
            animation: stepComplete 0.4s ease;
        }
        @keyframes stepComplete {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.2); }
        }
        .funnel-progress-celebration {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 1.5rem;
            opacity: 0;
            pointer-events: none;
        }
        .funnel-progress-celebration.show {
            animation: celebrationPop 1s ease forwards;
        }
        @keyframes celebrationPop {
            0% { opacity: 0; transform: translateX(-50%) translateY(0) scale(0); }
            30% { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.2); }
            100% { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(1); }
        }
        
        /* B3: Zusammenfassung während Auswahl */
        /* C2: Smart Recommendations */
        .funnel-smart-tip {
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.15) 0%, rgba(26, 143, 184, 0.15) 100%);
            border: 1px solid rgba(46, 204, 113, 0.3);
            border-radius: 12px;
            padding: 12px 16px;
            margin-top: 16px;
            display: none;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.85rem;
            color: var(--ice);
            animation: tipSlideIn 0.4s ease;
        }
        .funnel-smart-tip.visible { display: flex; }
        .funnel-smart-tip-icon { font-size: 1.2rem; flex-shrink: 0; }
        @keyframes tipSlideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* D1: Warum dieser Preis? */
        .funnel-price-breakdown {
            display: none;
            background: rgba(0,0,0,0.4);
            border-radius: 12px;
            padding: 16px;
            margin-top: 16px;
            text-align: left;
        }
        .funnel-price-breakdown.visible { display: block; }
        .funnel-price-breakdown h5 {
            color: var(--ice);
            font-size: 0.9rem;
            margin-bottom: 12px;
        }
        .funnel-price-breakdown-item {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            font-size: 0.85rem;
        }
        .funnel-price-breakdown-item:last-child {
            border-bottom: none;
            font-weight: 700;
            color: var(--glacier);
            padding-top: 10px;
            margin-top: 6px;
            border-top: 2px solid var(--glacier);
        }
        .funnel-price-breakdown-label { color: var(--gray); }
        .funnel-price-breakdown-value { color: var(--white); }
        
        /* v165: Grüne Spar-Prozente im Preis-Breakdown */
        .funnel-price-breakdown-label .savings-percent {
            color: #2ecc71;
            font-weight: 600;
        }
        
        /* v165: Hinweise bei Tempo-Auswahl */
        .tempo-hint {
            display: block;
            margin-top: 8px;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        .tempo-hint.savings {
            background: rgba(46, 204, 113, 0.15);
            color: #2ecc71;
        }
        .tempo-hint.extra {
            background: rgba(231, 76, 60, 0.15);
            color: #e74c3c;
        }
        
        .funnel-why-price-btn {
            background: none;
            border: none;
            color: var(--glacier);
            font-size: 0.85rem;
            cursor: pointer;
            text-decoration: underline;
            margin-top: 16px;
            margin-bottom: 24px;
            padding: 0;
        }
        .funnel-why-price-btn:hover { color: var(--ice); }
        
        /* F2: Konfetti */
        .funnel-confetti {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 99999;
            overflow: hidden;
        }
        .confetti-piece {
            position: absolute;
            top: -10px;
            width: 10px;
            height: 10px;
            background: #1A8FB8;
        }
        @keyframes confetti-fall {
            0% {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
            }
            100% {
                opacity: 0;
                transform: translateY(100vh) rotate(720deg);
            }
        }
        
        /* v162: Style Card Wrapper für Demo-Links */
        .style-card-wrapper {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        /* v335: demo-link entfernt */

        /* v162: Video Demo Overlay */
        .demo-overlay {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            width: 90%;
            max-width: 800px;
            background: var(--dark-card);
            border-radius: 24px;
            border: 2px solid rgba(26, 143, 184, 0.4);
            box-shadow:
                0 40px 100px rgba(0, 0, 0, 0.8),
                0 0 60px rgba(26, 143, 184, 0.2);
            z-index: 100000;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: all 0.35s cubic-bezier(0.65, 0, 0.35, 1);
        }
        .demo-overlay.visible {
            opacity: 1;
            visibility: visible;
            transform: translate(-50%, -50%) scale(1);
        }
        .demo-overlay-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .demo-overlay-badge {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--secondary);
        }
        .demo-overlay-close {
            width: 32px;
            height: 32px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 8px;
            color: var(--gray);
            font-size: 1.1rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        .demo-overlay-close:hover {
            background: rgba(255, 255, 255, 0.15);
            color: var(--white);
        }
        .demo-overlay-video {
            aspect-ratio: 16/9;
            position: relative;
            background: linear-gradient(135deg, #080818 0%, #1a1a3e 100%);
        }
        .demo-overlay-video.social-content,
        .demo-overlay-video.social-vfx {
            aspect-ratio: 9/16;
            max-height: 50vh;
            margin: 0 auto;
        }
        .demo-overlay-video.ai-cinematic {
            background:
                radial-gradient(circle at 25% 35%, rgba(26, 143, 184, 0.5) 0%, transparent 35%),
                radial-gradient(circle at 75% 65%, rgba(158, 210, 234, 0.4) 0%, transparent 30%),
                linear-gradient(135deg, #080818 0%, #0a1525 50%, #1a1a3e 100%);
        }
        .demo-overlay-video.real-footage {
            background:
                radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
        }
        .demo-overlay-video.hybrid {
            background:
                linear-gradient(90deg, rgba(45, 45, 45, 1) 0%, rgba(45, 45, 45, 1) 47%, rgba(26, 143, 184, 0.25) 53%, rgba(10, 20, 40, 0.9) 100%),
                linear-gradient(135deg, #0f0f1a 0%, #1a2a3e 100%);
        }
        .demo-overlay-video.social-content {
            background:
                radial-gradient(circle at 50% 50%, rgba(158, 210, 234, 0.2) 0%, transparent 50%),
                linear-gradient(135deg, #1a1a2e 0%, #2a2a3e 100%);
        }
        .demo-overlay-video.social-vfx {
            background:
                radial-gradient(circle at 30% 30%, rgba(255, 200, 100, 0.3) 0%, transparent 30%),
                radial-gradient(circle at 70% 70%, rgba(26, 143, 184, 0.4) 0%, transparent 35%),
                linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 100%);
        }
        .demo-overlay-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            background: rgba(26, 143, 184, 0.95);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            color: var(--white);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 32px rgba(26, 143, 184, 0.5);
        }
        .demo-overlay-play:hover {
            transform: translate(-50%, -50%) scale(1.1);
        }
        .demo-overlay-info {
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }
        .demo-overlay-text h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 6px;
        }
        .demo-overlay-text p {
            color: var(--gray);
            font-size: 0.9rem;
            margin: 0;
        }
        .demo-overlay-select {
            background: linear-gradient(135deg, var(--primary), #0D6A8A);
            color: var(--white);
            border: none;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            white-space: nowrap;
        }
        .demo-overlay-select:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(26, 143, 184, 0.4);
        }
        .demo-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.8);
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
            z-index: 99998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .demo-backdrop.visible {
            opacity: 1;
            visibility: visible;
        }
        
        /* G2: Warnungen bei Konflikten */
        .funnel-warning {
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(241, 196, 15, 0.15) 100%);
            border: 1px solid rgba(231, 76, 60, 0.4);
            border-radius: 12px;
            padding: 14px 16px;
            margin-top: 16px;
            margin-bottom: 20px;
            display: none;
            align-items: flex-start;
            gap: 10px;
            font-size: 0.85rem;
            color: #f5b041;
        }
        .funnel-warning.visible { display: flex; }
        .funnel-warning-icon { font-size: 1.2rem; flex-shrink: 0; }
        .funnel-warning a {
            color: var(--glacier);
            text-decoration: underline;
        }
        
        /* Responsive Funnel */
        @media (max-width: 1024px) {
            /* v331: Timeline komplett ausblenden auf Tablet/Mobile */
            .funnel-progress-container,
            .camera-progress-container {
                display: none;
            }
            
            /* v331: Alle Karten-Grids auf 1 Spalte */
            .funnel-problem-grid,
            .funnel-problem-grid:has(.funnel-entry-card),
            .funnel-2col-center,
            .funnel-option-grid.funnel-3col,
            .funnel-option-grid.funnel-2col,
            .funnel-budget-grid,
            .funnel-style-grid,
            .camera-type-grid,
            .funnel-extras-grid,
            .camera-tech-grid {
                grid-template-columns: 1fr !important;
                max-width: 480px !important;
                margin: 0 auto;
                gap: 12px !important;
            }
            
            /* v331: Beschreibungen ausblenden für kompaktere Darstellung */
            .funnel-problem-desc,
            .funnel-option-desc,
            .camera-type-card .funnel-option-desc {
                display: none;
            }
            
            /* v331: Kompaktere Karten - ALLE Karten-Typen */
            .funnel-problem-card,
            .funnel-entry-card,
            .funnel-option-card,
            .camera-type-card,
            .funnel-extra-card,
            .camera-location-card,
            .camera-delivery-card,
            .camera-tech-card {
                padding: 18px 16px;
            }
            
            /* v331: Icons kleiner */
            .funnel-problem-icon,
            .funnel-option-icon,
            .camera-type-card .funnel-option-icon {
                font-size: 1.75rem;
                margin-bottom: 8px;
            }
            
            /* v331: Titel kompakter */
            .funnel-problem-title,
            .funnel-option-title,
            .camera-type-card .funnel-option-title {
                font-size: 1rem;
                margin-bottom: 4px;
            }
            
            /* v331: Werte (Zeiten, Preise) sichtbar und kompakt */
            .funnel-option-value {
                font-size: 0.9rem;
                margin-bottom: 0;
            }
            
            /* v331: Tempo-Hints kompakter */
            .tempo-hint {
                font-size: 0.7rem;
                padding: 3px 8px;
                margin-top: 6px;
            }
            
            /* v331: Price-Hint kompakter */
            .funnel-price-hint {
                font-size: 0.65rem;
                padding: 3px 8px;
            }
            
            /* v331: Subquestion ausblenden */
            .funnel-subquestion {
                display: none;
            }
            
            /* v331: Frage kompakter */
            .funnel-question {
                font-size: 1.25rem;
                margin-bottom: 20px;
            }
            
            /* v331: Back-Button kompakter */
            .funnel-back-button {
                margin-bottom: 16px;
                padding: 10px 18px;
                font-size: 0.85rem;
            }
            
            /* v331: Content-Area weniger min-height */
            .funnel-content-area {
                min-height: auto;
            }
            
            /* v331: Section-Header kompakter */
            .funnel-section .section-header {
                margin-bottom: 20px;
            }
        }
        @media (max-width: 768px) {
            .funnel-section { padding: 80px 0; }
            .funnel-progress-7 .funnel-progress-step { width: 36px; height: 36px; font-size: 0.85rem; }
            .funnel-labels-7 .funnel-progress-label { width: 36px; font-size: 0.75rem; }
            .funnel-progress-9 .funnel-progress-step { width: 30px; height: 30px; font-size: 0.75rem; }
            .funnel-labels-9 .funnel-progress-label { width: 30px; font-size: 0.75rem; }
            .funnel-extras-grid { grid-template-columns: 1fr; }
            .funnel-extras-actions { flex-direction: column; }
            .funnel-extras-actions .btn { width: 100%; }
            .funnel-2col { grid-template-columns: 1fr !important; }
            /* v64: Mobile für Video-Count */
            .funnel-videocount-grid { grid-template-columns: 1fr; gap: 16px; }
            .funnel-videocount-card { padding: 1.5rem 1rem; }
            .videocount-number { font-size: 2.5rem; }
            .videocount-price { font-size: 1.5rem; }
            .funnel-subquestion { display: none; }
            .funnel-progress-step { width: 36px; height: 36px; font-size: 0.85rem; }
            .funnel-progress-label { display: none; }
            .funnel-progress-container { padding: 18px 20px 14px; margin-bottom: 28px; }
            /* v331: Grids bleiben bei 1 Spalte (von 1024px übernommen) */
            .funnel-problem-grid { grid-template-columns: 1fr !important; gap: 16px; }
            .funnel-budget-grid { grid-template-columns: 1fr !important; }
            .funnel-style-grid { grid-template-columns: 1fr !important; gap: 16px; }
            .funnel-option-grid.funnel-3col { grid-template-columns: 1fr !important; gap: 12px; }
            .funnel-result-details { grid-template-columns: 1fr; }
            .funnel-result-summary { flex-direction: column; gap: 10px; }
            .funnel-result-container { padding: 32px 24px; }
            .funnel-result-cta { flex-direction: column; }
            .funnel-result-cta .btn { width: 100%; text-align: center; }
            .funnel-section .section-title { font-size: 1.8rem; margin-bottom: 10px; }
            .funnel-section .section-subtitle { font-size: 1.1rem; }
            .funnel-section .section-header { margin-bottom: 16px; }
            /* v331: Content-Area min-height entfernt */
            .funnel-content-area { min-height: auto; }
            .funnel-question { font-size: 1.2rem; margin-bottom: 16px; }
            
            /* V49 Mobile Features */
            /* A1: Live Price anpassen */
            .funnel-live-price {
                top: auto;
                bottom: 70px;
                right: 10px;
                padding: 10px 14px;
            }
            .funnel-live-price-value { font-size: 1.2rem; }
            
            /* A3: Info-Icon statt Hover */
            .funnel-price-hint { display: none !important; }
            .funnel-info-icon { display: flex; }
            
            /* E2: Mobile Touch-Targets - GROSS */
            .funnel-option-card,
            .funnel-problem-card,
            .funnel-style-card {
                min-height: auto;
                padding: 18px 14px;
            }
            .funnel-option-icon, .funnel-problem-icon { font-size: 1.75rem; margin-bottom: 8px; }
            .funnel-option-title, .funnel-problem-title { font-size: 1rem; font-weight: 600; }
            /* v331: Beschreibungen bleiben ausgeblendet (von 1024px) */
            .funnel-option-desc, .funnel-problem-desc { display: none !important; }
            .funnel-option-value { font-size: 0.95rem; margin-bottom: 5px; }
            
            /* Slider Mobile */
            .funnel-slider-container { padding: 12px 20px; }
            .funnel-slider-display { margin-bottom: 16px; }
            .slider-value-number { font-size: 3rem; }
            .slider-value-unit { font-size: 1rem; }
            .funnel-slider-info { margin-top: 16px; padding: 16px 18px; }
            .info-price { font-size: 1.2rem; }
            .slider-confirm-hint { font-size: 0.9rem; margin-top: 10px; }
            
            /* Swipe-Indikator */
            .funnel-swipe-hint {
                text-align: center;
                font-size: 0.8rem;
                color: var(--gray);
                margin-top: 14px;
            }
        }
        
        /* PROZESS FLIP CARDS */
        .prozess-section { background: transparent; padding: 100px 0; }
        .flip-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            perspective: 1000px;
            margin-bottom: 48px;
        }
        .flip-container { height: 200px; }
        .flip-card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        .flip-container:hover .flip-card { transform: rotateY(180deg); }
        .flip-front, .flip-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        .flip-front {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            transition: border-color 0.3s ease;
        }
        .flip-container:hover .flip-front { border-color: rgba(26, 143, 184, 0.4); }
        .flip-back {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.25) 0%, rgba(158, 210, 234, 0.15) 100%);
            border: 1px solid rgba(26, 143, 184, 0.5);
            transform: rotateY(180deg);
            text-align: center;
            overflow: hidden;
        }
        
        /* Flash-Effekt beim Umdrehen */
        .flip-back::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 80%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), rgba(158,210,234,0.3), rgba(255,255,255,0.2), transparent);
            transform: skewX(-20deg);
            pointer-events: none;
            opacity: 0;
        }
        .flip-container:hover .flip-back::before {
            animation: flashOnce 0.8s ease-out forwards;
            animation-delay: 0.2s;
        }
        @keyframes flashOnce {
            0% { left: -100%; opacity: 1; }
            100% { left: 150%; opacity: 0; }
        }
        
        /* Glow-Puls am Rand */
        .flip-back::after {
            content: '';
            position: absolute;
            top: -2px; left: -2px; right: -2px; bottom: -2px;
            border-radius: 18px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            z-index: -1;
            opacity: 0;
            pointer-events: none;
        }
        .flip-container:hover .flip-back::after {
            animation: glowPulse 0.6s ease-out forwards;
            animation-delay: 0.1s;
        }
        @keyframes glowPulse {
            0% { opacity: 0.6; }
            100% { opacity: 0; }
        }
        
        .flip-icon { font-size: 2.25rem; margin-bottom: 16px; }
        .flip-name { font-size: 1.1rem; font-weight: 700; color: var(--white); margin-bottom: 6px; }
        .flip-day { 
            font-size: 0.75rem; 
            color: var(--primary); 
            font-weight: 700;
            background: rgba(26, 143, 184, 0.15);
            padding: 4px 12px;
            border-radius: 12px;
        }
        .flip-back-title { 
            font-size: 0.75rem; 
            font-weight: 700; 
            color: var(--secondary); 
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 16px; 
        }
        .flip-back-list {
            list-style: none;
            font-size: 1rem;
            color: var(--gray-light);
            line-height: 2.0;
        }
        .flip-back-list li:first-child {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 5px;
        }
        .flip-back-list li::before {
            content: '✓ ';
            color: var(--primary);
            font-weight: bold;
        }
        .flip-back-list li:first-child::before {
            content: '★ ';
            color: var(--secondary);
        }
        .prozess-result {
            display: flex;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
        }
        .prozess-result-box {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15) 0%, rgba(158, 210, 234, 0.08) 100%);
            border: 1px solid rgba(26, 143, 184, 0.3);
            border-radius: 20px;
            padding: 24px 48px;
            text-align: center;
        }
        .prozess-result-number {
            font-size: 2.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1.2;
            margin-bottom: 8px;
        }
        .prozess-result-label { font-size: 0.9rem; color: var(--gray); }
        .prozess-result-compare {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 20px;
            padding: 24px 32px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .prozess-result-compare-text { font-size: 0.95rem; color: var(--gray-light); }
        .prozess-result-compare-text strong { color: var(--white); }
        
        /* Mobile Touch Support */
        @media (hover: none) {
            .flip-container:active .flip-card { transform: rotateY(180deg); }
        }
        @media (max-width: 900px) {
            .flip-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 500px) {
            .flip-grid { grid-template-columns: 1fr; }
            .flip-container { height: 180px; }
        }
        
        /* ================================================
           STAGGER BLUR-IN ANIMATION - Prozess-Karten
           ================================================ */
        .stagger-blur-item {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
            filter: blur(8px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out, filter 0.6s ease-out;
        }
        
        .stagger-blur-item.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
        
        /* Gestaffelte Verzögerung für Karten */
        .stagger-blur-item:nth-child(1) { transition-delay: 0s; }
        .stagger-blur-item:nth-child(2) { transition-delay: 0.15s; }
        .stagger-blur-item:nth-child(3) { transition-delay: 0.3s; }
        .stagger-blur-item:nth-child(4) { transition-delay: 0.45s; }
        
        /* Gestaffelte Verzögerung für Result-Boxen */
        .prozess-result .stagger-blur-item:nth-child(1) { transition-delay: 0.6s; }
        .prozess-result .stagger-blur-item:nth-child(2) { transition-delay: 0.75s; }
        
        /* Mobile Anpassungen für Stagger-Timing */
        @media (max-width: 900px) {
            .stagger-blur-item:nth-child(3) { transition-delay: 0.15s; }
            .stagger-blur-item:nth-child(4) { transition-delay: 0.3s; }
            .prozess-result .stagger-blur-item:nth-child(1) { transition-delay: 0.45s; }
            .prozess-result .stagger-blur-item:nth-child(2) { transition-delay: 0.6s; }
        }
        
        @media (max-width: 500px) {
            .stagger-blur-item:nth-child(1) { transition-delay: 0s; }
            .stagger-blur-item:nth-child(2) { transition-delay: 0.1s; }
            .stagger-blur-item:nth-child(3) { transition-delay: 0.2s; }
            .stagger-blur-item:nth-child(4) { transition-delay: 0.3s; }
            .prozess-result .stagger-blur-item:nth-child(1) { transition-delay: 0.4s; }
            .prozess-result .stagger-blur-item:nth-child(2) { transition-delay: 0.5s; }
        }
        
        /* Gestaffelte Verzögerung für Social-Video-Grid */
        .social-video-grid .stagger-blur-item:nth-child(1) { transition-delay: 0s; }
        .social-video-grid .stagger-blur-item:nth-child(2) { transition-delay: 0.15s; }
        .social-video-grid .stagger-blur-item:nth-child(3) { transition-delay: 0.3s; }
        .social-video-grid .stagger-blur-item:nth-child(4) { transition-delay: 0.45s; }
        
        @media (max-width: 900px) {
            .social-video-grid .stagger-blur-item:nth-child(3) { transition-delay: 0.15s; }
            .social-video-grid .stagger-blur-item:nth-child(4) { transition-delay: 0.3s; }
        }
        
        /* Safari Fallback - falls blur nicht unterstützt wird */
        @supports not (filter: blur(8px)) {
            .stagger-blur-item {
                filter: none;
            }
        }
        
        /* ================================================
           SOCIAL MEDIA SHOWCASE - Spectacular Module
           ================================================ */
        .social-showcase-section {
            position: relative;
            padding: 80px 0 140px 0;
            overflow: hidden;
        }
        
        .social-showcase-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 2;
        }
        
        .social-showcase-title {
            font-size: clamp(2.5rem, 6vw, 4rem);
            font-weight: 900;
            line-height: 1.1;
            margin-bottom: 20px;
            color: var(--white);
        }
        
        .social-showcase-title .gradient-highlight {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 4px 20px rgba(26, 143, 184, 0.3));
        }
        
        .social-showcase-subtitle {
            font-size: 1.2rem;
            color: var(--gray);
            margin: 0 auto;
            white-space: nowrap;
        }
        
        @media (max-width: 900px) {
            .social-showcase-subtitle {
                font-size: 1rem;
            }
        }
        
        @media (max-width: 650px) {
            .social-showcase-subtitle {
                font-size: 0.85rem;
            }
        }
        
        @media (max-width: 500px) {
            .social-showcase-subtitle {
                font-size: 0.75rem;
            }
        }
        
        /* Video Grid - Spectacular Layout */
        .social-video-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }
        
        .social-video-card {
            position: relative;
            aspect-ratio: 9/16;
            border-radius: 24px;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }
        
        .social-video-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                180deg,
                transparent 0%,
                transparent 50%,
                rgba(0, 0, 0, 0.8) 100%
            );
            z-index: 2;
            opacity: 0.7;
            transition: opacity 0.4s;
            pointer-events: none;
        }
        
        .social-video-card:hover {
            transform: translateY(-12px) scale(1.02);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 
                0 30px 60px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(26, 143, 184, 0.15);
        }
        
        .social-video-card:hover::before {
            opacity: 0.5;
        }
        
        /* iframe innerhalb der Cards */
        .social-video-card iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            z-index: 1;
        }
        
        /* Placeholder Animation */
        .social-video-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(
                135deg,
                rgba(26, 143, 184, 0.1) 0%,
                rgba(13, 17, 23, 0.9) 50%,
                rgba(212, 184, 150, 0.08) 100%
            );
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }
        
        .social-video-placeholder::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(255, 255, 255, 0.03),
                transparent
            );
            animation: shimmerEffect 3s infinite;
        }
        
        @keyframes shimmerEffect {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .social-play-icon {
            width: 70px;
            height: 70px;
            background: rgba(26, 143, 184, 0.2);
            border: 2px solid rgba(26, 143, 184, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: var(--primary);
            transition: all 0.4s;
            backdrop-filter: blur(10px);
            z-index: 3;
        }
        
        .social-video-card:hover .social-play-icon {
            background: rgba(26, 143, 184, 0.4);
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(26, 143, 184, 0.4);
        }
        
        /* Video Info Overlay */
        .social-video-info {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 24px 20px;
            z-index: 3;
        }
        
        .social-video-tag {
            display: inline-block;
            background: rgba(26, 143, 184, 0.2);
            border: 1px solid rgba(26, 143, 184, 0.3);
            color: var(--secondary);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        
        .social-video-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 4px;
        }
        
        .social-video-meta {
            font-size: 0.8rem;
            color: var(--gray);
        }
        
        /* Showreel Section (Querformat) */
        .showreel-section {
            max-width: 900px;
            margin: 100px auto 0 auto;
        }
        .section-label {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--secondary);
            margin-bottom: 20px;
        }
        .video-wrapper {
            background: linear-gradient(145deg, rgba(32, 42, 55, 0.6) 0%, rgba(24, 32, 44, 0.7) 100%);
            border: 1px solid rgba(158, 210, 234, 0.15);
            border-radius: 16px;
            padding: 16px;
            position: relative;
        }
        .video-wrapper::before {
            content: '';
            position: absolute;
            top: 0;
            left: 15%;
            right: 15%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(158, 210, 234, 0.4), transparent);
        }
        .video-wrapper iframe {
            width: 100%;
            aspect-ratio: 16/9;
            border-radius: 8px;
            display: block;
        }
        @media (max-width: 768px) {
            .section-label {
                font-size: 16px;
            }
        }
        
        /* Bottom CTA */
        .social-showcase-cta {
            text-align: center;
            margin-top: 60px;
            position: relative;
            z-index: 2;
        }
        
        .social-showcase-cta p {
            color: var(--gray);
            font-size: 1rem;
            margin-bottom: 20px;
        }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .social-video-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }
        
        @media (max-width: 600px) {
            .social-video-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }
            .social-showcase-section {
                padding: 100px 0;
            }
            .social-video-card {
                border-radius: 16px;
            }
            .social-play-icon {
                width: 50px;
                height: 50px;
                font-size: 18px;
            }
            .social-video-info {
                padding: 16px 12px;
            }
            .social-video-title {
                font-size: 0.85rem;
            }
        }
        
        /* CASES */
        .cases-section { background: transparent; }
        .cases-subtitle { text-align: center; font-size: 1.25rem; color: var(--gray); margin-bottom: 60px; }
        .cases-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px; }
        .case-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.4s;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }
        .case-card:hover {
            transform: translateY(-8px);
            border-color: rgba(26, 143, 184, 0.3);
            box-shadow: 
                0 20px 60px rgba(26, 143, 184, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }
        .case-header { background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); padding: 24px; }
        .case-company { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 8px; }
        .case-type { font-size: 0.95rem; color: rgba(255,255,255,0.9); }
        .case-body { padding: 32px; }
        .case-section { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .case-section:last-of-type { border-bottom: none; }
        .case-section-title { font-weight: 700; color: var(--primary); margin-bottom: 8px; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .case-section-content { color: var(--gray-light); font-size: 0.95rem; }
        .case-result { background: rgba(26, 143, 184, 0.1); padding: 20px; border-radius: 12px; text-align: center; border: 1px solid rgba(26, 143, 184, 0.3); }
        .case-result-number { display: block; font-size: 2.5rem; font-weight: 900; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; line-height: 1; }
        
        /* FINAL CTA */
        .final-cta { background: transparent; text-align: center; }
        .final-cta::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%); }
        .final-cta h2 { margin-bottom: 24px; }
        .final-cta > p { font-size: 1.25rem; margin-bottom: 48px; }
        .cta-buttons { display: flex; justify-content: center; gap: 24px; margin-bottom: 60px; flex-wrap: wrap; }
        .contact-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; max-width: 1000px; margin: 0 auto; }
        .contact-option {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 20px;
            padding: 32px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: all 0.3s;
        }
        .contact-option:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(26, 143, 184, 0.3);
            transform: translateY(-4px);
        }
        .contact-option h3 { font-size: 1.5rem; margin-bottom: 16px; }
        .contact-option p { margin-bottom: 0; }
        
        /* === FAQ SECTION - FLOATING CARDS === */
        .faq-section {
            background: transparent;
            padding: 100px 0;
            position: relative;
        }
        .faq-accordion {
            display: flex;
            flex-direction: column;
            gap: 12px;
            max-width: 900px;
            margin: 0 auto;
        }
        .faq-item {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.04) 0%, rgba(158, 210, 234, 0.02) 100%);
            border: 1px solid transparent;
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            position: relative;
        }
        .faq-item::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15) 0%, rgba(158, 210, 234, 0.08) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .faq-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(26, 143, 184, 0.12);
        }
        .faq-item.active {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.08) 0%, rgba(158, 210, 234, 0.04) 100%);
        }
        .faq-item.active::before {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        }
        .faq-question {
            width: 100%;
            padding: 20px 24px;
            background: transparent;
            border: none;
            color: var(--gray-light);
            font-family: 'Inter', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            transition: color 0.3s ease;
        }
        .faq-question:hover { color: #ffffff; }
        .faq-item.active .faq-question { color: #ffffff; }
        .faq-icon {
            width: 32px;
            height: 32px;
            border: 2px solid var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        .faq-item.active .faq-icon {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            border-color: transparent;
        }
        .faq-icon::before,
        .faq-icon::after {
            content: '';
            position: absolute;
            background: var(--primary);
            transition: all 0.3s ease;
        }
        .faq-icon::before { width: 12px; height: 2px; }
        .faq-icon::after { width: 2px; height: 12px; }
        .faq-item.active .faq-icon::before,
        .faq-item.active .faq-icon::after { background: white; }
        .faq-item.active .faq-icon::after {
            height: 0;
            opacity: 0;
            visibility: hidden;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .faq-item.active .faq-answer { max-height: 1500px; } /* v346: erhöht für lange FAQ-Inhalte */
        .faq-answer-inner { padding: 0 24px 20px 24px; }
        .faq-short {
            color: var(--gray-light);
            font-size: 0.95rem;
            line-height: 1.7;
            padding: 16px;
            padding-left: 20px;
            background: rgba(26, 143, 184, 0.08);
            border-radius: 10px;
            margin-bottom: 12px;
            position: relative;
            overflow: hidden;
        }
        .faq-short::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8px;
            bottom: 8px;
            width: 3px;
            background: var(--primary);
            border-radius: 0 3px 3px 0;
        }
        .faq-details-toggle {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            background: transparent;
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            color: var(--gray);
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .faq-details-toggle:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        .faq-details-toggle.active {
            background: rgba(26, 143, 184, 0.1);
            border-color: var(--primary);
            color: var(--primary);
        }
        .faq-details-toggle svg {
            width: 14px;
            height: 14px;
            transition: transform 0.3s ease;
        }
        .faq-details-toggle.active svg { transform: rotate(180deg); }
        .faq-long {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
        }
        .faq-long.active { max-height: 1500px; } /* v345/v346: erhöht für lange FAQ-Inhalte */
        .faq-long-inner {
            padding-top: 16px;
            color: var(--gray);
            font-size: 0.9rem;
            line-height: 1.8;
        }
        .faq-long-inner ul {
            margin: 12px 0;
            padding-left: 20px;
        }
        .faq-long-inner li { margin-bottom: 8px; }
        .faq-long-inner strong { color: var(--gray-light); }
        
        @media (max-width: 768px) {
            .faq-section { padding: 60px 0; }
            .faq-accordion { gap: 10px; }
            .faq-item { border-radius: 12px; }
            .faq-item::before { border-radius: 12px; }
            .faq-question {
                padding: 16px 18px;
                font-size: 0.95rem;
                gap: 14px;
            }
            .faq-icon { width: 28px; height: 28px; }
            .faq-icon::before { width: 10px; }
            .faq-icon::after { height: 10px; }
            .faq-answer-inner { padding: 0 18px 16px 18px; }
            .faq-short { padding: 12px; font-size: 0.9rem; }
            .faq-item:hover { transform: translateY(-2px); }
        }
        @media (max-width: 480px) {
            .faq-question { padding: 14px 16px; font-size: 0.9rem; }
            .faq-answer-inner { padding: 0 16px 14px 16px; }
            .faq-details-toggle { font-size: 0.8rem; padding: 6px 12px; }
        }
        
        /* FOOTER */
        footer {
            background: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 60px 0 30px;
        }
        .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 40px; }
        .footer-section h3 { font-size: 1.25rem; margin-bottom: 20px; }
        .footer-section p { color: var(--gray); font-size: 0.95rem; }
        .footer-section ul { list-style: none; }
        .footer-section ul li { margin-bottom: 12px; }
        .footer-section ul li a { color: var(--gray); text-decoration: none; transition: color 0.3s; }
        .footer-section ul li a:hover { color: var(--primary); }
        .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); }
        .footer-bottom p { color: var(--gray); font-size: 0.875rem; margin-bottom: 0; }
        
        /* v255: EQUIPMENT SECTION - Redesign */
        .equipment-section {
            padding: 120px 0;
            position: relative;
        }
        .equipment-inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .equipment-header {
            margin-bottom: 40px;
        }
        .equipment-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 24px;
        }
        .equipment-new-tag {
            background: linear-gradient(135deg, var(--warm-orb), #E6B82D);
            color: #000;
            padding: 5px 14px;
            border-radius: 6px;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 4px 15px rgba(201, 162, 39, 0.4);
        }
        .equipment-device {
            color: var(--gray);
            font-size: 0.9rem;
            font-weight: 500;
        }
        .equipment-title {
            font-size: clamp(1.8rem, 4vw, 2.5rem);
            margin-bottom: 16px;
            line-height: 1.2;
        }
        .equipment-title span {
            background: linear-gradient(135deg, var(--primary), #5BC0DE);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .equipment-subtitle {
            color: var(--gray-light);
            font-size: 1.1rem;
            max-width: 650px;
            margin: 0 auto 50px;
            line-height: 1.7;
        }
        .equipment-video-container {
            position: relative;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        .equipment-video-frame {
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.15) 0%, rgba(201, 162, 39, 0.1) 100%);
            border-radius: 20px;
            padding: 4px;
            box-shadow: 
                0 25px 80px rgba(0, 0, 0, 0.4),
                0 10px 40px rgba(26, 143, 184, 0.15);
            transition: all 0.4s ease;
        }
        .equipment-video-frame:hover {
            transform: translateY(-8px);
            box-shadow: 
                0 35px 100px rgba(0, 0, 0, 0.5),
                0 15px 60px rgba(26, 143, 184, 0.25);
        }
        .equipment-video-inner {
            background: var(--dark-card);
            border-radius: 16px;
            overflow: hidden;
            aspect-ratio: 16/9;
            position: relative;
        }
        .equipment-video-inner video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .equipment-features {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 14px;
        }
        .equipment-feature {
            background: rgba(255, 255, 255, 0.04);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 0.9rem;
            color: var(--gray-light);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .equipment-feature::before {
            content: '✓';
            color: var(--primary);
            font-weight: 700;
        }
        .equipment-feature:hover {
            background: rgba(26, 143, 184, 0.1);
            border-color: rgba(26, 143, 184, 0.3);
            transform: translateY(-2px);
        }
        
        /* RESPONSIVE */
        @media (max-width: 1024px) {
            .hero-grid, .showcase-grid, .engine-grid { grid-template-columns: 1fr; }
            .hero-text { padding-right: 0; text-align: center; margin-top: 40px; }
            .hero-cta { justify-content: center; }
            /* v359: Stats auf Tablet ausblenden (Portrait-Überlappung) */
            .hero-stats { display: none; }
            .hero-video-container { transform: none; }
            .hero-video-container:hover { transform: translateY(-8px); }
            /* v312: Portrait bleibt sichtbar auf Tablet */
            .showcase-result { position: static; }
            .service-grid { grid-template-columns: 1fr; }
            .equipment-inner { padding: 0 10px; }
            .equipment-feature { padding: 10px 18px; font-size: 0.85rem; }
        }
        @media (max-width: 768px) {
            .nav-menu { display: none; }
            section { padding: 80px 0; }
            .statement-section { padding: 80px 0; }
            
            /* v364: Zeitdruck-Statement asymmetrisches Padding für gleiche Abstände */
            .statement-section-zeitdruck { padding: 50px 0 100px 0; }
            
            /* v322: Overflow hidden für Carousel */
            #leistungen {
                overflow-x: hidden;
            }
            #leistungen .container {
                overflow: hidden;
            }
            
            /* v309: Mobile Hero Komplettumbau */
            /* v310: Headline-Position, Stats/Strike ausblenden, Portrait zeigen */
            /* v311: Portrait-Ebenen, größer, Leistungen-Header ausblenden */
            .hero { padding-top: 80px; }
            .hero-grid {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }
            .hero-mobile-headline {
                display: block;
                order: 1;
                margin-top: 2.5rem;
                margin-bottom: 1rem;
                position: relative;
                z-index: 1;
            }
            .hero-mobile-headline .hero-mobile-title {
                text-align: left;
            }
            .hero-video-area {
                order: 2;
                width: 100%;
                position: relative;
                margin-top: calc(clamp(2.5rem, 12vw, 3.5rem) - 1px);
            }
            .hero-text {
                order: 3;
            }
            /* Name + Jobtitle ausblenden (steht im Header) */
            .hero-title { display: none; }
            .hero-jobtitle { display: none; }
            /* Slogan-Anpassung */
            .hero-slogan {
                font-size: 1.75rem;
                margin-bottom: 1.5rem;
            }
            /* v317: Zeilenumbruch auf Mobile sichtbar */
            .mobile-break { display: inline; }
            /* v311: Portrait - HINTER Video, VOR Headline */
            /* v313: Portrait responsive größer, Position angepasst */
            .hero-portrait {
                display: block;
                position: absolute;
                top: clamp(-110px, -26vw, -80px);
                right: -5px;
                width: clamp(184px, 48vw, 224px);
                height: auto;
                z-index: 2;
                opacity: 0.95;
                filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5));
            }
            .hero-video-container {
                transform: none;
                margin: 0 auto;
                max-width: 100%;
                position: relative;
                z-index: 5;
            }
            /* v355: Hero-Button kleiner auf Mobile */
            .hero-cta .btn-shiny {
                padding: 13px 11px;
            }
            
            .impact-section { display: none; }
            /* v310: Stats ausblenden */
            .hero-stats { display: none; }
            /* v310: Strike-Text ausblenden */
            .s12-inline { display: none; }
            /* v311: Leistungen-Untertitel ausblenden, Titel bleibt */
            .cliptrick-section .section-subtitle { display: none; }
            .cliptrick-section .section-header { margin-bottom: 40px; }
            /* v318/v319: Abstand zu Arbeitsproben reduzieren */
            .cliptrick-section { padding-bottom: 30px; }
            .comparison-grid { grid-template-columns: 1fr; }
            .comparison-arrow { transform: rotate(90deg); }
            .services-tabs { flex-direction: column; }
            .tab-btn { width: 100%; }
            .service-header { flex-direction: column; }
            .service-price { text-align: left; }
            .engine-showcase { grid-template-columns: 1fr; }
            .cta-buttons { flex-direction: column; }
            .btn { width: 100%; }
        }
        
        /* ========================================
           UNTERSCHIED-MODUL (Variante B)
           ======================================== */
        /* ========================================
           INTEGRIERTER UNTERSCHIED-BEREICH
           ======================================== */
        .cliptrick-unterschied {
            margin-top: 60px;
            padding-top: 60px;
            text-align: center;
            position: relative;
        }
        .cliptrick-unterschied::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
        }
        .unterschied-label {
            display: inline-block;
            background: rgba(26, 143, 184, 0.1);
            border: 1px solid rgba(26, 143, 184, 0.25);
            color: var(--primary);
            padding: 6px 18px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-bottom: 28px;
        }
        .unterschied-old {
            font-size: 1.1rem;
            color: var(--gray);
            text-decoration: line-through;
            text-decoration-color: #E53E3E;
            text-decoration-thickness: 2px;
            margin-bottom: 12px;
            opacity: 0.8;
        }
        .unterschied-new {
            font-size: 1.35rem;
            color: var(--white);
            font-weight: 700;
            margin-bottom: 40px;
        }
        .unterschied-new span {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .unterschied-stats {
            display: flex;
            justify-content: center;
            gap: 48px;
            flex-wrap: wrap;
        }
        .unterschied-stat {
            text-align: center;
            padding: 20px 24px;
            background: rgba(255,255,255,0.02);
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,0.06);
            transition: all 0.3s ease;
        }
        .unterschied-stat:hover {
            background: rgba(26, 143, 184, 0.08);
            border-color: rgba(26, 143, 184, 0.3);
            transform: translateY(-4px);
        }
        .unterschied-stat-value {
            font-size: 2.25rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            margin-bottom: 8px;
        }
        .unterschied-stat-label {
            font-size: 0.85rem;
            color: var(--gray);
        }
        @media (max-width: 768px) {
            .cliptrick-unterschied {
                margin-top: 40px;
                padding-top: 40px;
            }
            .unterschied-stats {
                gap: 20px;
            }
            .unterschied-stat {
                padding: 16px 20px;
                min-width: 100px;
            }
            .unterschied-stat-value {
                font-size: 1.75rem;
            }
            .unterschied-old {
                font-size: 0.95rem;
            }
            .unterschied-new {
                font-size: 1.15rem;
            }
        }
        
        /* ================================================
           EQUIPMENT SECTION
           ================================================ */
        .equipment-section {
            padding: 100px 0;
            background: transparent;
        }
        .equipment-section .section-header {
            text-align: center;
            margin-bottom: 60px;
        }
        .equipment-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }
        .equipment-card {
            background: linear-gradient(145deg, rgba(32, 42, 55, 0.6) 0%, rgba(24, 32, 44, 0.7) 100%);
            border: 1px solid rgba(158, 210, 234, 0.15);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
        }
        .equipment-card:hover {
            transform: translateY(-8px);
            border-color: rgba(26, 143, 184, 0.4);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        .equipment-icon {
            font-size: 3rem;
            margin-bottom: 20px;
        }
        .equipment-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 20px;
        }
        .equipment-list {
            list-style: none;
            text-align: left;
            font-size: 0.9rem;
            color: var(--gray-light);
        }
        .equipment-list li {
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        .equipment-list li:last-child {
            border-bottom: none;
        }
        @media (max-width: 1024px) {
            .equipment-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        @media (max-width: 600px) {
            .equipment-grid {
                grid-template-columns: 1fr;
            }
            .equipment-card {
                padding: 24px;
            }
        }
        
        /* ================================================
           COMBINED CTA + TRUST SECTION (Variante D)
           ================================================ */
        /* === STATEMENT SECTION === */
        .statement-section {
            padding: 140px 0;
            text-align: center;
        }
        
        .statement-text {
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            color: var(--white);
            line-height: 1.0;
            letter-spacing: -0.03em;
            max-width: 900px;
            margin: 0 auto;
        }
        
        .statement-text span {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* === ZOOM-REVEAL ANIMATION === */
        .zoom-reveal {
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .zoom-reveal.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        /* v113: Späte Version - triggert erst wenn Element weiter im Viewport ist */
        .zoom-reveal-late {
            opacity: 0;
            transform: scale(0.92);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .zoom-reveal-late.visible {
            opacity: 1;
            transform: scale(1);
        }
        
        .combined-cta-trust {
            position: relative;
            padding: 120px 0 80px 0;
        }
        
        .combined-cta-trust::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(26, 143, 184, 0.06) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .combined-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
        }
        
        .combined-cta {
            text-align: center;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 32px 32px 0 0;
            padding: 56px 48px 44px;
            position: relative;
            overflow: hidden;
            border-bottom: none;
        }
        
        .combined-cta::before {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 250px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
        }
        
        .combined-cta::after {
            content: '';
            position: absolute;
            top: 0; left: 50%;
            transform: translateX(-50%);
            width: 140px; height: 90px;
            background: radial-gradient(ellipse, rgba(26, 143, 184, 0.15) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .combined-cta h2 {
            font-size: clamp(1.6rem, 3.5vw, 2.4rem);
            font-weight: 800;
            color: var(--white);
            margin-bottom: 14px;
            position: relative;
            z-index: 1;
        }
        
        .combined-cta > p {
            font-size: 1.05rem;
            color: var(--gray);
            margin-bottom: 32px;
        }
        
        .combined-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }
        
        .combined-contacts {
            display: flex;
            justify-content: center;
            gap: 40px;
            flex-wrap: wrap;
        }
        
        .combined-contact { text-align: center; }
        .combined-contact h3 {
            font-size: 1.2rem;
            margin-bottom: 4px;
            color: var(--white);
        }
        .combined-contact p {
            font-size: 0.8rem;
            color: var(--gray);
            margin: 0;
        }
        
        /* v74: Ansprechpartner mit Foto */
        .combined-ansprechpartner {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-top: 32px;
            padding-top: 28px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 10;
        }
        .ansprechpartner-foto {
            flex-shrink: 0;
            position: relative;
            overflow: visible;
            z-index: 10;
        }
        .ansprechpartner-foto:hover {
            z-index: 100;
        }
        /* v292: Großes Foto, bei Hover noch größer, blauer Strich unten (verschwindet bei Hover) */
        .foto-placeholder {
            width: 180px;
            height: 180px;
            border-radius: 0;
            background: transparent;
            border: none;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            overflow: visible;
            cursor: pointer;
            box-shadow: none;
            position: relative;
            z-index: 1;
            margin-top: -30px;
        }
        .foto-placeholder::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 3px;
            background: linear-gradient(90deg, transparent 0%, var(--primary) 20%, var(--primary) 80%, transparent 100%);
            border-radius: 2px;
            box-shadow: 0 0 10px rgba(26, 143, 184, 0.5);
            transition: opacity 0.3s ease;
        }
        .foto-placeholder:hover::after {
            opacity: 0;
        }
        .foto-placeholder:hover {
            z-index: 100;
        }
        .foto-placeholder img {
            width: 100%;
            height: auto;
            object-fit: contain;
            filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.5));
            position: relative;
            bottom: 3px;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
            transform-origin: bottom center;
        }
        .foto-placeholder:hover img {
            transform: scale(1.5);
            filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.6));
        }
        /* v289: Telefonnummer-Tooltip bei Hover - sitzt auf dem blauen Strich */
        .foto-telefon {
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            color: white;
            padding: 10px 20px;
            border-radius: 25px;
            font-size: 1rem;
            font-weight: 700;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 6px 20px rgba(26, 143, 184, 0.5);
            z-index: 101;
        }
        .foto-placeholder:hover + .foto-telefon,
        .ansprechpartner-foto:hover .foto-telefon {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .foto-icon {
            font-size: 3rem;
            opacity: 0.5;
        }
        .ansprechpartner-info {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        .ansprechpartner-label {
            font-size: 0.75rem;
            color: var(--gray);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        .ansprechpartner-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--white);
        }
        .ansprechpartner-rolle {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        /* Trust als Fundament */
        .combined-trust {
            background: linear-gradient(180deg, rgba(26, 143, 184, 0.08) 0%, rgba(26, 143, 184, 0.03) 100%);
            border: 1px solid rgba(26, 143, 184, 0.15);
            border-top: 1px solid rgba(26, 143, 184, 0.25);
            border-radius: 0 0 32px 32px;
            padding: 28px 48px 36px;
            text-align: center;
        }
        
        .combined-google {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 24px;
        }
        
        .combined-stars {
            font-size: 1.4rem; /* v200: vergrößert von 1.1rem */
            letter-spacing: 2px;
            background: linear-gradient(180deg, #D4AF37 0%, #F4E4BA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .combined-score {
            font-size: 1.5rem; /* v200: vergrößert von 1.1rem */
            font-weight: 700;
            color: var(--white);
        }
        
        .combined-source {
            font-size: 0.95rem; /* v200: vergrößert von 0.8rem */
            color: var(--gray);
        }
        
        .combined-label {
            font-size: 0.9rem;
            color: var(--gray-light);
            margin-bottom: 14px;
            font-weight: 500;
        }
        
        .combined-clients {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px 0;
            max-width: 1100px;
            margin: 0 auto;
        }
        
        .combined-client {
            font-size: 0.8rem;
            color: var(--gray);
            font-weight: 400;
        }
        
        .combined-sep {
            color: rgba(26, 143, 184, 0.3);
            font-size: 0.8rem;
            margin: 0 8px;
        }
        
        @media (max-width: 768px) {
            .combined-cta-trust {
                padding: 80px 0 60px 0;
            }
            .combined-cta {
                padding: 40px 24px 36px;
            }
            .combined-trust {
                padding: 24px 20px 32px;
            }
            .combined-contacts {
                flex-direction: column;
                gap: 20px;
            }
            .combined-ansprechpartner {
                flex-direction: column;
                text-align: center;
                gap: 15px;
            }
            .ansprechpartner-info {
                align-items: center;
            }
            .combined-google {
                flex-direction: column;
                gap: 8px;
            }
            .combined-clients {
                gap: 5px 0;
            }
            .combined-client {
                font-size: 0.75rem;
            }
            .combined-sep {
                margin: 0 6px;
            }
        }
        
        /* ================================================
           S12: Inline Strike mit Skew + Gradient
           ================================================ */
        .s12-inline {
            text-align: center;
            margin-top: 28px;
            margin-bottom: 20px;
            font-size: 1.05rem;
            color: var(--gray);
            letter-spacing: 0.02em;
        }
        
        .s12-inline .strike {
            display: inline-block;
            position: relative;
            transform: skewX(-6deg);
            font-weight: 500;
            opacity: 0.8;
        }
        
        .s12-inline .strike::after {
            content: '';
            position: absolute;
            left: -2px;
            right: -2px;
            top: 50%;
            height: 2px;
            background: linear-gradient(90deg, var(--red, #E53E3E), var(--primary));
            transform: translateY(-50%);
        }
        
        .s12-inline .divider {
            margin: 0 20px;
            opacity: 0.3;
        }
        
        @media (max-width: 768px) {
            .s12-inline { font-size: 0.9rem; }
            .s12-inline .divider { margin: 0 12px; }
        }
        
        /* ================================================
           IMPACT STATEMENT SECTION
           ================================================ */
        .impact-section {
            position: relative;
            padding: 100px 0 200px;
            overflow: hidden;
        }
        
        .impact-content {
            position: relative;
            z-index: 2;
            text-align: center;
        }
        
        .impact-title {
            font-size: clamp(2.5rem, 7vw, 5rem);
            font-weight: 900;
            line-height: 1.0;
            letter-spacing: -0.03em;
            margin-bottom: 1.5rem;
            color: var(--white);
        }
        
        .impact-title .highlight {
            display: block;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 4px 20px rgba(26, 143, 184, 0.4));
        }
        
        .impact-subtitle {
            font-size: 1.15rem;
            color: var(--gray);
            margin: 0 auto;
            line-height: 1.7;
            white-space: nowrap;
        }
        
        @media (max-width: 768px) {
            .impact-section {
                padding: 80px 0;
            }
            .impact-title {
                font-size: clamp(2rem, 8vw, 3rem);
            }
            .impact-subtitle {
                font-size: 0.85rem;
                white-space: nowrap;
            }
        }
        
        @media (max-width: 480px) {
            .impact-subtitle {
                font-size: 0.75rem;
            }
        }
        
        /* ================================================
           v176: CHAT-FENSTER MIT GLOW-EFFEKT
           ================================================ */
        
        .chat-section {
            margin-top: 48px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .chat-section-header {
            text-align: center;
            margin-bottom: 24px;
        }
        
        .chat-section-header h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 6px;
        }
        
        .chat-section-header p {
            color: var(--gray);
            font-size: 0.85rem;
            margin: 0;
        }
        
        /* Chat Container mit Glow */
        .chat-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
            border-radius: 20px;
            padding: 3px;
            background: linear-gradient(
                var(--gradient-angle, 0deg),
                var(--primary) 0%,
                var(--secondary) 25%,
                var(--warm-orb) 50%,
                var(--secondary) 75%,
                var(--primary) 100%
            );
            animation: chatGlowRotate 4s linear infinite;
            box-shadow: 
                0 0 30px rgba(26, 143, 184, 0.3),
                0 0 60px rgba(26, 143, 184, 0.15);
        }
        
        @keyframes chatGlowRotate {
            0% { --gradient-angle: 0deg; }
            100% { --gradient-angle: 360deg; }
        }
        
        .chat-window {
            background: linear-gradient(180deg, #0D1117 0%, #0A0A0A 100%);
            border-radius: 18px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            height: 300px;
        }
        
        /* Chat Header */
        .chat-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 18px;
            background: rgba(26, 143, 184, 0.1);
            border-bottom: 1px solid rgba(26, 143, 184, 0.2);
        }
        
        .chat-header-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .chat-avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--white);
        }
        
        .chat-header-text h4 {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--white);
            margin: 0;
        }
        
        /* DSGVO Badge */
        .chat-dsgvo-badge {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.75rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 5px;
            white-space: nowrap;
        }
        
        .chat-dsgvo-badge::before {
            content: '🔒';
            font-size: 0.85rem;
        }
        
        /* Chat Messages Area */
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .chat-messages::-webkit-scrollbar {
            width: 4px;
        }
        
        .chat-messages::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(26, 143, 184, 0.3);
            border-radius: 2px;
        }
        
        /* Message Bubbles */
        .chat-msg {
            max-width: 85%;
            animation: msgSlideIn 0.3s ease;
        }
        
        @keyframes msgSlideIn {
            from { 
                opacity: 0; 
                transform: translateY(10px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }
        
        .chat-msg-bot {
            align-self: flex-start;
        }
        
        .chat-msg-user {
            align-self: flex-end;
        }
        
        .chat-msg-bubble {
            padding: 12px 16px;
            border-radius: 16px;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .chat-msg-bot .chat-msg-bubble {
            background: rgba(26, 143, 184, 0.15);
            border: 1px solid rgba(26, 143, 184, 0.25);
            border-radius: 16px 16px 16px 4px;
            color: var(--gray-light);
        }
        
        .chat-msg-user .chat-msg-bubble {
            background: linear-gradient(135deg, var(--primary) 0%, #0D6A8A 100%);
            border-radius: 16px 16px 4px 16px;
            color: var(--white);
        }
        
        /* Typing Indicator */
        .chat-typing {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 12px 16px;
            background: rgba(26, 143, 184, 0.15);
            border: 1px solid rgba(26, 143, 184, 0.25);
            border-radius: 16px 16px 16px 4px;
            width: fit-content;
        }
        
        .chat-typing-dot {
            width: 8px;
            height: 8px;
            background: var(--primary);
            border-radius: 50%;
            animation: typingBounce 1.4s ease infinite;
        }
        
        .chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
        .chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typingBounce {
            0%, 60%, 100% { transform: translateY(0); }
            30% { transform: translateY(-6px); }
        }
        
        /* Quick Reply Buttons */
        .chat-quick-replies {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 8px;
            animation: msgSlideIn 0.3s ease;
        }
        
        .chat-quick-btn {
            padding: 10px 18px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(26, 143, 184, 0.3);
            border-radius: 20px;
            color: var(--white);
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .chat-quick-btn:hover {
            background: rgba(26, 143, 184, 0.2);
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        .chat-quick-btn:active {
            transform: translateY(0);
        }
        
        /* Chat Input Area */
        .chat-input-area {
            padding: 14px 18px;
            background: rgba(0, 0, 0, 0.3);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            gap: 10px;
            align-items: flex-end;
        }
        
        .chat-input-wrapper {
            flex: 1;
            position: relative;
        }
        
        .chat-input {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 12px 18px;
            font-family: inherit;
            font-size: 0.9rem;
            color: var(--white);
            resize: none;
            min-height: 44px;
            max-height: 100px;
            transition: all 0.2s ease;
        }
        
        .chat-input:focus {
            outline: none;
            border-color: var(--primary);
            background: rgba(26, 143, 184, 0.08);
        }
        
        .chat-input::placeholder {
            color: #6B7280;
        }
        
        .chat-input:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .chat-send-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, #0D6A8A 100%);
            border: none;
            color: var(--white);
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        
        .chat-send-btn:hover:not(:disabled) {
            transform: scale(1.08);
            box-shadow: 0 4px 15px rgba(26, 143, 184, 0.4);
        }
        
        .chat-send-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        
        /* DSGVO Checkbox im Chat */
        .chat-dsgvo {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            margin-top: 8px;
            animation: msgSlideIn 0.3s ease;
        }
        
        .chat-dsgvo-checkbox {
            appearance: none;
            width: 20px;
            height: 20px;
            min-width: 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            margin-top: 1px;
        }
        
        .chat-dsgvo-checkbox:checked {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        .chat-dsgvo-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 1px;
            width: 5px;
            height: 10px;
            border: solid var(--white);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }
        
        .chat-dsgvo-label {
            font-size: 0.75rem;
            color: var(--gray);
            line-height: 1.4;
        }
        
        .chat-dsgvo-label a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .chat-dsgvo-label a:hover {
            text-decoration: underline;
        }
        
        /* Success State */
        .chat-success {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding: 40px 20px;
            text-align: center;
        }
        
        .chat-success-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: var(--white);
            margin-bottom: 20px;
            animation: successPop 0.5s ease;
        }
        
        @keyframes successPop {
            0% { transform: scale(0); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .chat-success h4 {
            font-size: 1.2rem;
            color: var(--white);
            margin-bottom: 8px;
        }
        
        .chat-success p {
            color: var(--gray);
            font-size: 0.85rem;
            margin: 0;
        }
        
        /* Honeypot */
        .hp-field {
            position: absolute;
            left: -9999px;
            top: -9999px;
            opacity: 0;
            pointer-events: none;
            height: 0;
            width: 0;
        }
        
        @media (max-width: 768px) {
            .chat-section {
                margin-top: 36px;
                padding-top: 32px;
            }
            .chat-container {
                max-width: 100%;
            }
            .chat-window {
                height: 450px;
                border-radius: 16px;
            }
        }
        
        /* ================================================
           GOOGLE REVIEWS - Fade Rotation
           ================================================ */
        .reviews-section {
            margin: 24px 0 0;
        }
        
        .reviews-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
        }
        
        .review-slot {
            position: relative;
            min-height: 180px;
        }
        
        .review-card {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            background: transparent;
            border-radius: 12px;
            padding: 20px;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity 0.6s ease, transform 0.6s ease;
            pointer-events: none;
        }
        
        .review-card.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        
        .reviews-divider {
            margin: 40px 0 20px;
            padding-top: 20px;
            border-top: 1px solid rgba(26, 143, 184, 0.1);
        }
        
        .review-header {
            text-align: center;
            margin-bottom: 10px;
        }
        
        .review-avatar {
            display: none;
        }
        
        .review-meta {
            flex: 1;
            min-width: 0;
        }
        
        .review-name {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--white);
        }
        
        .review-date {
            display: none;
        }
        
        .review-stars {
            font-size: 0.85rem;
            letter-spacing: 1px;
            background: linear-gradient(180deg, #D4AF37 0%, #F4E4BA 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            text-align: center;
        }
        
        .review-text {
            font-size: 0.8rem;
            line-height: 1.55;
            color: var(--gray-light);
            display: -webkit-box;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: center;
        }
        
        @media (max-width: 1024px) {
            .reviews-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .review-slot:nth-child(3) {
                display: none;
            }
        }
        
        @media (max-width: 640px) {
            .reviews-grid {
                grid-template-columns: 1fr;
            }
            .review-slot:nth-child(2),
            .review-slot:nth-child(3) {
                display: none;
            }
            .review-slot {
                min-height: 160px;
            }
        }

        /* ============================================
           CLIPTRICK KONZEPT-ENGINE MODULE v240
           ============================================ */
        .cliptrick-section {
            padding: 60px 0 160px 0;
            background: transparent;
            position: relative;
            z-index: 1;
        }
        
        .cliptrick-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            padding: 0 24px;
            text-align: center;
        }
        
        .cliptrick-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1.25rem;
            background: rgba(26, 143, 184, 0.1);
            border: 1px solid rgba(26, 143, 184, 0.2);
            border-radius: 100px;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 1.5rem;
        }
        
        .cliptrick-badge-dot {
            width: 8px; height: 8px;
            background: var(--primary);
            border-radius: 50%;
            animation: cliptrick-dot-pulse 2s ease-in-out infinite;
        }
        
        @keyframes cliptrick-dot-pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        
        .cliptrick-headline {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: 1.25rem;
        }
        
        .cliptrick-headline-highlight {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .cliptrick-intro {
            font-size: 1.25rem;
            color: var(--gray);
            margin-bottom: 3.5rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .cliptrick-intro-highlight { color: var(--gray-light); font-weight: 500; }
        
        .cliptrick-tagline {
            text-align: center;
            padding-top: 0.75rem;
        }
        
        .cliptrick-tagline-text { font-size: 1.5rem; font-weight: 600; color: var(--white); }
        .cliptrick-tagline-highlight { color: var(--primary); }

        @keyframes cliptrick-cursor-blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .cliptrick-outer-frame {
            border: 2px solid rgba(26, 143, 184, 0.3);
            border-radius: 32px;
            padding: 5px;
            background: linear-gradient(135deg, rgba(26, 143, 184, 0.1), transparent, rgba(158, 210, 234, 0.1));
            margin-bottom: 1rem;
            max-width: 1250px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .cliptrick-grid {
            display: grid;
            grid-template-columns: 1fr 70px 210px 70px 1fr;
            gap: 0;
            background: rgba(10, 10, 10, 0.95);
            border-radius: 28px;
            overflow: hidden;
            align-items: center;
        }
        
        .cliptrick-panel {
            padding: 3rem 2.5rem;
            min-height: 380px;
            display: flex;
            flex-direction: column;
        }
        
        .cliptrick-panel-center {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            background: rgba(26, 143, 184, 0.03);
            padding: 2rem;
            position: relative;
            overflow: visible;
        }
        
        .cliptrick-panel-right {
            position: relative;
            overflow: visible;
        }
        
        /* AI Punktwolke - Floating Dots */
        .cliptrick-ai-dots {
            position: absolute;
            top: 0;
            left: -30px;
            right: -30px;
            bottom: 0;
            pointer-events: none;
            z-index: 0;
        }
        
        .cliptrick-ai-dot {
            position: absolute;
            width: 5px;
            height: 5px;
            background: var(--primary);
            border-radius: 50%;
            opacity: 0;
            animation: cliptrick-dot-float 8s ease-in-out infinite;
        }
        
        .cliptrick-ai-dot:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
        .cliptrick-ai-dot:nth-child(2) { top: 60%; left: 85%; animation-delay: 1s; }
        .cliptrick-ai-dot:nth-child(3) { top: 80%; left: 25%; animation-delay: 2s; }
        .cliptrick-ai-dot:nth-child(4) { top: 30%; left: 70%; animation-delay: 0.5s; }
        .cliptrick-ai-dot:nth-child(5) { top: 50%; left: 5%; animation-delay: 1.5s; }
        .cliptrick-ai-dot:nth-child(6) { top: 15%; left: 90%; animation-delay: 2.5s; }
        .cliptrick-ai-dot:nth-child(7) { top: 70%; left: 50%; animation-delay: 3s; }
        .cliptrick-ai-dot:nth-child(8) { top: 40%; left: 30%; animation-delay: 0.8s; }
        
        @keyframes cliptrick-dot-float {
            0%, 100% { opacity: 0; transform: translateY(0) scale(1); }
            20% { opacity: 0.4; }
            50% { opacity: 0.6; transform: translateY(-10px) scale(1.3); }
            80% { opacity: 0.4; }
        }
        
        .cliptrick-label {
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.15em;
            margin-bottom: 1.25rem;
            font-weight: 600;
            position: relative;
            z-index: 10;
        }
        
        /* Question Stack - überlagerte Questions die wechseln */
        .cliptrick-question-stack {
            position: relative;
            min-height: 140px;
            flex: 1;
            display: flex;
            align-items: center;
        }
        
        .cliptrick-question {
            position: absolute;
            font-size: 1.2rem;
            color: var(--white);
            line-height: 1.6;
            font-style: italic;
            opacity: 0;
            text-align: left;
            animation: cliptrick-question-seq 24s ease-in-out infinite;
        }
        
        .cliptrick-question:nth-child(1) { animation-delay: 0s; }
        .cliptrick-question:nth-child(2) { animation-delay: 8s; }
        .cliptrick-question:nth-child(3) { animation-delay: 16s; }
        
        /* 24s total, je 8s pro Briefing - kein Überlappen */
        @keyframes cliptrick-question-seq {
            0% { opacity: 0; transform: translateY(10px); }
            2% { opacity: 1; transform: translateY(0); }
            30% { opacity: 1; transform: translateY(0); }
            33% { opacity: 0; transform: translateY(-5px); }
            100% { opacity: 0; }
        }
        
        .cliptrick-cursor {
            display: inline-block;
            width: 2px;
            height: 1.1em;
            background: var(--primary);
            margin-left: 4px;
            animation: cliptrick-cursor-blink 1s infinite;
            vertical-align: middle;
        }
        
        /* Connector mit horizontaler Linie und wanderndem Pulse */
        .cliptrick-connector {
            height: 2px;
            background: rgba(26, 143, 184, 0.2);
            position: relative;
        }
        
        .cliptrick-connector-pulse {
            position: absolute;
            width: 14px; 
            height: 14px;
            background: var(--secondary);
            border-radius: 50%;
            top: -6px;
            left: 0;
            box-shadow: 0 0 15px var(--primary), 0 0 30px var(--primary);
            opacity: 0;
            animation: cliptrick-pulse-left 8s ease-in-out infinite;
        }
        
        /* Linker Connector - Pulse wandert nach rechts */
        @keyframes cliptrick-pulse-left {
            0%, 8% { left: 0; opacity: 0; }
            10% { opacity: 1; }
            20% { left: calc(100% - 14px); opacity: 1; }
            22%, 100% { left: calc(100% - 14px); opacity: 0; }
        }
        
        /* Rechter Connector - Pulse startet später (nach Module-Scan) */
        .cliptrick-grid > *:nth-child(4) .cliptrick-connector-pulse {
            animation: cliptrick-pulse-right 8s ease-in-out infinite;
        }
        
        @keyframes cliptrick-pulse-right {
            0%, 58% { left: 0; opacity: 0; }
            60% { opacity: 1; }
            68% { left: calc(100% - 14px); opacity: 1; }
            70%, 100% { left: calc(100% - 14px); opacity: 0; }
        }
        
        /* Module Stack */
        .cliptrick-module-stack {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            width: 100%;
            position: relative;
            z-index: 10;
        }
        
        .cliptrick-module {
            padding: 0.6rem 0.9rem;
            background: rgba(26, 143, 184, 0.1);
            border: 1px solid rgba(26, 143, 184, 0.2);
            border-radius: 8px;
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--secondary);
            text-align: center;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0;
            transform: translateY(-5px);
            position: relative;
            z-index: 10;
        }
        
        .cliptrick-module:nth-child(2) { animation: cliptrick-module-glow-1 8s ease-out infinite; }
        .cliptrick-module:nth-child(3) { animation: cliptrick-module-glow-2 8s ease-out infinite; }
        .cliptrick-module:nth-child(4) { animation: cliptrick-module-glow-3 8s ease-out infinite; }
        .cliptrick-module:nth-child(5) { animation: cliptrick-module-glow-4 8s ease-out infinite; }
        
        /* Modul 1 (Hook) - erscheint bei 20%, Scan trifft bei 40% */
        @keyframes cliptrick-module-glow-1 {
            0%, 19% { opacity: 0; transform: translateY(-5px); box-shadow: none; border-color: rgba(26, 143, 184, 0.2); }
            20% { opacity: 1; transform: translateY(0); box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            28% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            39% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            40% { box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            48% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            49%, 92% { opacity: 1; box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            96%, 100% { opacity: 0; box-shadow: none; }
        }
        
        /* Modul 2 (Psychologie) - erscheint bei 25%, Scan trifft bei 45% */
        @keyframes cliptrick-module-glow-2 {
            0%, 24% { opacity: 0; transform: translateY(-5px); box-shadow: none; border-color: rgba(26, 143, 184, 0.2); }
            25% { opacity: 1; transform: translateY(0); box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            33% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            44% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            45% { box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            53% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            54%, 92% { opacity: 1; box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            96%, 100% { opacity: 0; box-shadow: none; }
        }
        
        /* Modul 3 (Storytelling) - erscheint bei 30%, Scan trifft bei 50% */
        @keyframes cliptrick-module-glow-3 {
            0%, 29% { opacity: 0; transform: translateY(-5px); box-shadow: none; border-color: rgba(26, 143, 184, 0.2); }
            30% { opacity: 1; transform: translateY(0); box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            38% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            49% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            50% { box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            58% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            59%, 92% { opacity: 1; box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            96%, 100% { opacity: 0; box-shadow: none; }
        }
        
        /* Modul 4 (Plattform) - erscheint bei 35%, Scan trifft bei 55% */
        @keyframes cliptrick-module-glow-4 {
            0%, 34% { opacity: 0; transform: translateY(-5px); box-shadow: none; border-color: rgba(26, 143, 184, 0.2); }
            35% { opacity: 1; transform: translateY(0); box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            43% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            54% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            55% { box-shadow: 0 0 30px rgba(26, 143, 184, 0.9), 0 0 60px rgba(26, 143, 184, 0.5); border-color: var(--secondary); }
            63% { box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            64%, 92% { opacity: 1; box-shadow: 0 0 8px rgba(26, 143, 184, 0.2); border-color: rgba(26, 143, 184, 0.3); }
            96%, 100% { opacity: 0; box-shadow: none; }
        }
        
        /* Vertikaler Scan-Effekt über Module */
        .cliptrick-module-scan {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(158, 210, 234, 0.8), var(--secondary), rgba(158, 210, 234, 0.8), transparent);
            border-radius: 2px;
            box-shadow: 0 0 15px var(--primary), 0 0 30px rgba(26, 143, 184, 0.5);
            opacity: 0;
            z-index: 20;
            animation: cliptrick-module-scan-down 8s linear infinite;
        }
        
        @keyframes cliptrick-module-scan-down {
            0%, 17% { top: 0; opacity: 0; }
            18% { top: 0; opacity: 1; }
            35% { top: 100%; opacity: 1; }
            36%, 100% { top: 100%; opacity: 0; }
        }
        
        /* Concept List - Output */
        .cliptrick-concept-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.85rem;
            flex: 1;
            justify-content: center;
            position: relative;
            z-index: 10;
        }
        
        .cliptrick-concept {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            padding: 0.85rem 1.1rem;
            background: rgba(26, 143, 184, 0.08);
            border: 1px solid rgba(26, 143, 184, 0.15);
            border-radius: 12px;
            opacity: 0;
            transform: translateX(10px);
            animation: cliptrick-concept-seq 8s ease-out infinite;
        }
        
        .cliptrick-concept:nth-child(1) { animation-delay: 0s; }
        .cliptrick-concept:nth-child(2) { animation-delay: 0.4s; }
        .cliptrick-concept:nth-child(3) { animation-delay: 0.8s; }
        
        @keyframes cliptrick-concept-seq {
            0%, 70% { opacity: 0; transform: translateX(10px); }
            74% { opacity: 1; transform: translateX(0); box-shadow: 0 0 15px rgba(52, 211, 153, 0.3); }
            78%, 92% { opacity: 1; transform: translateX(0); box-shadow: none; }
            96%, 100% { opacity: 0; transform: translateX(10px); }
        }
        
        .cliptrick-concept-check {
            width: 28px; height: 28px;
            background: #34D399;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            color: var(--dark);
            flex-shrink: 0;
        }
        
        .cliptrick-concept-text { font-size: 1.1rem; color: var(--white); font-weight: 500; }

        /* ClipTrick Responsive */
        @media (max-width: 900px) {
            /* v320: Outer-Frame overflow hidden */
            .cliptrick-outer-frame {
                overflow: hidden;
            }
            .cliptrick-grid {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto auto auto;
            }
            /* v320: AI-Dots auf Panel begrenzen (nicht -30px rausragen) */
            .cliptrick-ai-dots {
                left: 0;
                right: 0;
            }
            /* v320: Panels mit overflow hidden */
            .cliptrick-panel {
                min-height: auto;
                padding: 1rem;
                overflow: hidden;
            }
            /* v319: Connectoren kürzer */
            .cliptrick-connector {
                width: 2px;
                height: 25px;
                margin: 0 auto;
            }
            .cliptrick-connector-pulse {
                top: 0;
                left: -6px;
                animation: cliptrick-pulse-vertical 8s ease-in-out infinite;
            }
            @keyframes cliptrick-pulse-vertical {
                0%, 8% { top: 0; opacity: 0; }
                10% { opacity: 1; }
                20% { top: calc(100% - 14px); opacity: 1; }
                22%, 100% { top: calc(100% - 14px); opacity: 0; }
            }
            /* v318: Zweiter Connector startet verzögert (nach Module-Scan) */
            .cliptrick-grid > *:nth-child(4) .cliptrick-connector-pulse {
                animation: cliptrick-pulse-vertical-delayed 8s ease-in-out infinite;
            }
            @keyframes cliptrick-pulse-vertical-delayed {
                0%, 58% { top: 0; opacity: 0; }
                60% { opacity: 1; }
                68% { top: calc(100% - 14px); opacity: 1; }
                70%, 100% { top: calc(100% - 14px); opacity: 0; }
            }
            /* v320: Question-Stack - Questions zentrieren */
            .cliptrick-question-stack {
                min-height: 60px;
                justify-content: center;
            }
            .cliptrick-question {
                left: 0;
                right: 0;
                text-align: center;
                font-size: 0.95rem;
            }
            /* v319: Module-Stack kompakter */
            .cliptrick-module-stack {
                gap: 0.4rem;
            }
            .cliptrick-module {
                padding: 0.5rem 0.75rem;
                font-size: 0.8rem;
            }
            /* v319: Concept-Liste kompakter */
            .cliptrick-concept-list {
                gap: 0.4rem;
            }
            .cliptrick-concept {
                padding: 0.5rem 0.75rem;
            }
            .cliptrick-concept-text {
                font-size: 0.95rem;
            }
        }
        
        @media (max-width: 600px) {
            /* v319: Kompakteres Padding */
            .cliptrick-section {
                padding: 30px 0 60px 0;
            }
            .cliptrick-headline {
                font-size: 1.75rem;
            }
            .cliptrick-intro {
                font-size: 1rem;
            }
            .cliptrick-tagline-text {
                font-size: 1.15rem;
            }
            /* v319: Outer-Frame kompakter */
            .cliptrick-outer-frame {
                padding: 1rem;
            }
        }