* { margin: 0; padding: 0; box-sizing: border-box; }
        html {
            scroll-behavior: smooth;
            color-scheme: dark;
            scroll-padding-top: 80px; /* Prevent auto-scroll past nav */
        }

        :root{
            --bg: #0a0a0a;
            --text: #ffffff;
            --text-2: #e5e5e5;
            --text-3: #d4d4d4;
            --text-4: #a3a3a3;
            --brand-red: #dc2626;
            --brand-orange: #fb923c;
            --brand-green: #22c55e;
            --brand-red-light: #ef4444;
            --card-bg: rgba(255,255,255,0.02);
            --card-border: rgba(255,255,255,0.08);

            /* Design System Tokens */
            --container-width: 1400px;
            --container-wide: 1600px;
            --section-spacing: 120px;
            --container-padding: 60px;
            --radius-card: 20px;
            --radius-ui: 12px;
            --font-base: 18px;
            /* Spacing Scale (8px grid) */
            --space-4: 4px;
            --space-8: 8px;
            --space-12: 12px;
            --space-16: 16px;
            --space-24: 24px;
            --space-32: 32px;
            --space-40: 40px;
            --space-48: 48px;
            --space-64: 64px;
            --space-80: 80px;
            --space-96: 96px;
            --space-120: 120px;

            /* Typography Tokens */
            --text-display: clamp(56px, 8vw, 96px);
            --text-h1: clamp(48px, 6vw, 80px);
            --text-h2: clamp(36px, 4vw, 56px);
            --text-h3: 24px;
            --text-lead: clamp(18px, 2vw, 22px);
            --text-body: 18px;
            --text-small: 14px;
            --line-height-base: 1.6;
            --line-height-tight: 1.2;
        }

        @media (max-width: 768px) {
            :root {
                --section-spacing: 80px;
                --container-padding: 24px;
                --text-body: 16px;
            }
        }
        @property --g1x { syntax: '<percentage>'; inherits: false; initial-value: 20%; }
        @property --g1y { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
        @property --g2x { syntax: '<percentage>'; inherits: false; initial-value: 80%; }
        @property --g2y { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
        @property --g3x { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
        @property --g3y { syntax: '<percentage>'; inherits: false; initial-value: 10%; }
        @property --g1r { syntax: '<length>'; inherits: false; initial-value: 800px; }
        @property --g2r { syntax: '<length>'; inherits: false; initial-value: 900px; }
        @property --g3r { syntax: '<length>'; inherits: false; initial-value: 1200px; }
        
        body {
            font-family: 'Inter', -apple-system, sans-serif;
            background: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            overflow-y: auto !important; /* CRITICAL: allow vertical scroll for sticky */
        }
        
        /* Navigation Wrapper */
        .nav-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            pointer-events: none;
        }

        /* Unsichtbarer Hover-Trigger am oberen Rand */
        .nav-hover-trigger {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100px;
            pointer-events: auto;
        }

        /* Navigation */
        nav {
            position: relative;
            width: 100%;
            background: transparent;
            transform: translateY(-100%);
            transition: transform 0.35s ease;
            pointer-events: auto;
        }

        /* Backdrop und Hintergrund nur für sichtbaren Bereich */
        nav::before {
            content: '';
            position: absolute;
            top: -200px;
            left: 0;
            right: 0;
            height: calc(100% + 200px);
            background: rgba(10, 10, 10, 0.3);
            backdrop-filter: blur(16px);
            -webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 60px), transparent 100%);
            mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 60px), transparent 100%);
            z-index: -1;
            transition: backdrop-filter 0.3s ease;
        }

        /* Stärkerer Blur bei Hover */
        .nav-wrapper:hover nav::before,
        nav:focus-within::before {
            backdrop-filter: blur(20px);
        }

        nav.nav-visible-on-top::before {
            backdrop-filter: blur(18px);
        }

        /* Header erscheint bei Hover über den Wrapper */
        .nav-wrapper:hover nav,
        nav:focus-within {
            transform: translateY(0);
        }

        /* Header sichtbar wenn ganz oben auf der Seite */
        nav.nav-visible-on-top {
            transform: translateY(0);
        }
        
        .nav-container {
            max-width: var(--container-width);
            margin: 0 auto;
            padding: 20px var(--container-padding);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo-nav {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .nav-logo-img {
            height: 26px;
            width: auto;
            display: block;
        }
        
        .nav-links {
            display: flex;
            gap: 40px;
            list-style: none;
        }
        
        .nav-links a {
            color: #e5e5e5;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s;
            position: relative;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.6);
        }
        
        .nav-links a:hover {
            color: var(--brand-red);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--brand-red), var(--brand-orange));
            transition: width 0.3s;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .cta-button {
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
            color: #fff;
            padding: 12px 28px;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 800;
            letter-spacing: .02em;
            transition: transform .2s ease, box-shadow .3s ease, filter .2s ease;
            box-shadow: 0 6px 22px rgba(220, 38, 38, 0.35);
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(220, 38, 38, 0.45);
            filter: saturate(1.05);
        }
        .cta-button:focus-visible{ outline: 2px solid rgba(245,158,11,.8); outline-offset: 3px; }
        
        /* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            overflow: visible; /* allow hero shapes to overlap next section */
            padding-top: 80px;
            /* animated gradient centers */
            --g1x: 20%; --g1y: 50%;
            --g2x: 80%; --g2y: 50%;
            --g3x: 50%; --g3y: 10%;
            --g1r: 800px; --g2r: 900px; --g3r: 1200px;
            animation: glowShift 18s ease-in-out infinite alternate;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: none; /* replaced by .glow-layer elements */
        }

        /* GPU-accelerated glow elements - FIXED position stays in background */
        .glow-layer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 200vh; /* Extend down for continuous glow */
            z-index: 0;
            pointer-events: none;
            opacity: 1; /* Will be controlled by JavaScript based on scroll */
            transition: opacity 0.6s ease; /* Smooth transition when scrolling */
        }
        .glow {
            position: absolute;
            width: 95vmax; height: 95vmax;
            border-radius: 50%;
            opacity: .28; /* restored original intensity */
            will-change: transform, opacity, filter;
            mix-blend-mode: screen;
            transform: translate3d(0,0,0) scale(1);
            filter: blur(90px) hue-rotate(0deg) saturate(120%);
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .glow.js-ctrl{ animation: none !important; }
        /* Fünf Glows – alle bleiben im Rot/Orange/Amber-Bereich, schnellere, weichere Bewegung */
        .glow.g1{ background: radial-gradient(closest-side, rgba(220,38,38,0.88), rgba(220,38,38,0.34) 45%, rgba(220,38,38,0) 70%); top: 6%; left: -22%; animation-name: floatA, hueCycleSmall, pulse; animation-duration: 18s, 16s, 9s; animation-delay: 0s, 0s, 0s; }
        .glow.g2{ background: radial-gradient(closest-side, rgba(251,146,60,0.72), rgba(251,146,60,0.26) 45%, rgba(251,146,60,0) 70%); bottom: -8%; right: -18%; animation-name: floatB, hueCycleSmall, pulse; animation-duration: 20s, 18s, 10s; animation-delay: 0.5s, 1s, 0s; }
        .glow.g3{ background: radial-gradient(closest-side, rgba(239,68,68,0.70), rgba(239,68,68,0.26) 45%, rgba(239,68,68,0) 70%); top: -18%; right: 4%; animation-name: floatC, hueCycleSmall, pulse; animation-duration: 22s, 18s, 11s; animation-delay: 1s, 1.5s, 0s; }
        .glow.g4{ background: radial-gradient(closest-side, rgba(234,88,12,0.62), rgba(234,88,12,0.22) 45%, rgba(234,88,12,0) 70%); bottom: -20%; left: -8%; animation-name: floatD, hueCycleSmall, pulse; animation-duration: 24s, 20s, 12s; animation-delay: .8s, 2s, 0s; }
        .glow.g5{ background: radial-gradient(closest-side, rgba(245,158,11,0.55), rgba(245,158,11,0.20) 45%, rgba(245,158,11,0) 70%); top: 26%; left: 28%; animation-name: floatE, hueCycleSmall, pulse; animation-duration: 26s, 22s, 12s; animation-delay: 1.2s, 2.5s, 0s; }

        /* Größer/kleiner und Opacity bewusst, ohne Flackern */
        @keyframes pulse { 0% { transform: translate3d(0,0,0) scale(0.92); opacity:.24; } 50% { transform: translate3d(0,0,0) scale(1.08); opacity:.30; } 100% { transform: translate3d(0,0,0) scale(1.00); opacity:.27; } }
        /* Hue-Animation eng begrenzt auf Rot→Orange (0–28deg), als Alternate für nahtlose Schleife */
        @keyframes hueCycleSmall { 0% { filter: blur(90px) hue-rotate(0deg) saturate(122%);} 100% { filter: blur(96px) hue-rotate(28deg) saturate(125%);} }
        /* Deutlichere Drift mit größerer Amplitude und weicher Kurve */
        @keyframes floatA { 0% { transform: translate3d(-12%, 2%, 0) scale(1.02);} 50% { transform: translate3d(6%, -8%, 0) scale(1.10);} 100% { transform: translate3d(-6%, 6%, 0) scale(1.00);} }
        @keyframes floatB { 0% { transform: translate3d(10%, 6%, 0) scale(1.00);} 50% { transform: translate3d(-10%, -4%, 0) scale(1.08);} 100% { transform: translate3d(4%, 8%, 0) scale(1.02);} }
        @keyframes floatC { 0% { transform: translate3d(4%, -12%, 0) scale(1.06);} 50% { transform: translate3d(-6%, 10%, 0) scale(0.98);} 100% { transform: translate3d(10%, -4%, 0) scale(1.04);} }
        @keyframes floatD { 0% { transform: translate3d(-8%, 10%, 0) scale(1.02);} 50% { transform: translate3d(10%, -10%, 0) scale(1.10);} 100% { transform: translate3d(-2%, 4%, 0) scale(1.00);} }
        @keyframes floatE { 0% { transform: translate3d(0%, 0%, 0) scale(0.96);} 50% { transform: translate3d(4%, -4%, 0) scale(1.08);} 100% { transform: translate3d(-4%, 4%, 0) scale(1.00);} }

        /* Noise overlay element placeholder, replaced via JS with real noise */
        .hero-noise{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.035; mix-blend-mode:overlay; background-size:128px 128px; background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 2px); }

        /* HERO: Platzhalter-Fläche für Halbkreis‑Video oben rechts */
        .hero-video-placeholder{
            position: absolute;
            top: calc(-1 * var(--d) / 3); /* um ~ein Drittel nach oben versetzt */
            right: 0;
            /* Durchmesser steuern über Variable (soll in Partner fallen) */
            --d: 160vh;
            width: calc(var(--d) / 2); /* R */
            height: var(--d);          /* 2R */
            border-radius: 100% 0 0 100% / 50% 0 0 50%; /* sauberer Halbkreis */
            overflow: hidden;          /* Clip Pseudo sauber an Rundung */
            z-index: 2;                /* über Glows/Noise, unter Text */
            pointer-events: none;      /* blockiert nichts */
            background: none;
            /* Alpha-Fade direkt auf den Container → wirkt auf Video-Inhalt */
            -webkit-mask-image: radial-gradient(farthest-side at 100% 50%,
                rgba(0,0,0,1) 4%,
                rgba(0,0,0,0.98) 20%,
                rgba(0,0,0,0.60) 70%,
                rgba(0,0,0,0.10) 96%,
                rgba(0,0,0,0.0) 100%);
            mask-image: radial-gradient(farthest-side at 100% 50%,
                rgba(0,0,0,1) 4%,
                rgba(0,0,0,0.98) 20%,
                rgba(0,0,0,0.60) 70%,
                rgba(0,0,0,0.10) 96%,
                rgba(0,0,0,0.0) 100%);
        }
        .hero-video-placeholder video{
            position: absolute; inset: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            transform: translateZ(0);
            filter: saturate(1.1) contrast(1.02);
        }
        @media (max-width: 1280px){ .hero-video-placeholder{ --d: 130vh; } }
        @media (max-width: 1024px){ .hero-video-placeholder{ --d: 100vh; } }

        
        
        @keyframes glowShift {
            0% { --g1x: 20%; --g1y: 50%; --g2x: 80%; --g2y: 50%; --g3x: 50%; --g3y: 10%; }
            50% { --g1x: 24%; --g1y: 46%; --g2x: 76%; --g2y: 54%; --g3x: 52%; --g3y: 12%; }
            100% { --g1x: 20%; --g1y: 50%; --g2x: 80%; --g2y: 50%; --g3x: 50%; --g3y: 10%; }
        }
        
        .hero-content {
            text-align: left;
            z-index: 4;
            max-width: 1200px;
            padding: 0 60px 0 100px;
            margin-left: 0;
            animation: fadeInUp 1s ease;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .hero-title {
            font-size: var(--text-display);
            font-weight: 900;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 24px;
            letter-spacing: -3px;
        }
        
        .hero-main-text {
            font-size: clamp(36px, 5.5vw, 72px);
            color: #ffffff;
            font-weight: 300;
            line-height: 1.3;
            max-width: 1200px;
            margin: 0;
            text-align: left;
        }

        .hero-line {
            display: block !important;
            white-space: nowrap !important;
        }

        .highlight-orange {
            color: #ff6b3d;
            font-weight: 600;
        }
        
        .hero-cta {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 50px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
            color: #fff;
            padding: 16px 36px;
            border-radius: var(--radius-ui);
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                        box-shadow 0.3s ease,
                        background 0.3s ease;
            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.3);
            display: inline-block;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 35px rgba(220, 38, 38, 0.4);
            background: linear-gradient(135deg, var(--brand-red-light) 0%, var(--brand-red) 100%);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            padding: 16px 36px;
            border-radius: var(--radius-ui);
            text-decoration: none;
            font-weight: 600;
            font-size: 18px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(220, 38, 38, 0.5);
        }
        
        /* Sections */
        section {
            padding: var(--section-spacing) var(--container-padding);
            max-width: var(--container-width);
            margin: 0 auto;
            scroll-margin-top: var(--space-80); /* Align with html scroll-padding */
            position: relative;
            z-index: 1;
            background: transparent; /* Let glow show through */
        }
        /* Ensure contact wizard is above any sticky section overlays */
        #contact { position: relative; z-index: 1000; isolation: isolate; }

        /* Make hero full-bleed: remove centered max-width gutters */
        .hero {
            max-width: none;
            width: 100%;
            margin: 0;
            padding-left: 0;
            padding-right: 0;
        }
        
        .section-header {
            text-align: center;
            margin-bottom: var(--space-80);
        }
        
        .section-title {
            font-size: var(--text-h2);
            font-weight: 700;
            margin-bottom: var(--space-16);
            background: linear-gradient(135deg, #fff 0%, #a3a3a3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .section-subtitle {
            font-size: 20px;
            color: var(--text-4);
        }

        /* Wizard (Contact) */
        /* KONTAKTFORMULAR - PREMIUM DESIGN */
        #contact {
            background: transparent;
            padding: var(--section-spacing) 0;
            position: relative;
        }

        #contact .section-header {
            margin-bottom: 80px;
        }

        #contact .section-title {
            font-size: clamp(40px, 6vw, 64px);
            font-weight: 700;
            letter-spacing: -0.03em;
            background: none;
            -webkit-background-clip: unset;
            -webkit-text-fill-color: unset;
            background-clip: unset;
            color: #fff;
        }

        #contact .section-subtitle {
            font-size: clamp(16px, 2vw, 20px);
            color: rgba(255,255,255,0.5);
            font-weight: 400;
        }

        .wizard{
            max-width: 680px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* Minimalist Progress */
        .wiz-progress{
            position: relative;
            margin: 0 auto 60px;
            text-align: center;
        }

        .wiz-progress .dots{
            display: inline-flex;
            gap: 8px;
            align-items: center;
            padding: 6px 12px;
            background: rgba(255,255,255,0.04);
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,0.06);
        }

        .wiz-progress .dots i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            position: relative;
            transition: all 0.3s ease;
            font-style: normal;
        }

        .wiz-progress .dots i::before,
        .wiz-progress .dots i::after {
            display: none;
        }

        .wiz-progress .dots i.active {
            background: var(--brand-red);
            width: 24px;
            border-radius: 100px;
        }

        .wiz-progress .dots i.completed {
            background: rgba(220,38,38,0.4);
        }

        .wiz-progress .bar{
            display: none;
        }

        /* Viewport */
        .wiz-viewport{
            position: relative;
            overflow: visible;
            min-height: 500px;
            margin: 0 auto;
            padding: 0;
        }

        /* Steps */
        .wiz-step{
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
            display: flex;
            flex-direction: column;
            gap: 40px;
            pointer-events: none;
            padding: 0;
        }
        .wiz-step.is-active{
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Titles */
        .wiz-title{
            font-size: clamp(32px, 5vw, 48px);
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.03em;
            margin: 0 0 8px 0;
            line-height: 1.15;
        }
        .wiz-sub{
            color: rgba(255,255,255,0.5);
            margin: 0 0 16px 0;
            font-size: clamp(16px, 2vw, 18px);
            font-weight: 400;
            line-height: 1.5;
        }

        /* Chips - Premium Cards */
        .chip-grid{
            display: flex;
            flex-direction: column;
            gap: 10px;
            /* zusätzlicher Abschlussabstand zum Navigationsbereich */
            margin-bottom: var(--space-32);
        }
        /* Step 0 (Intent): etwas mehr Abstand zur Navigation */
        .wiz-step[data-step="0"] .chip-grid{ margin-bottom: var(--space-48); }
        .chip{
            padding: 20px 24px;
            border-radius: 14px;
            border: 2px solid rgba(255,255,255,0.06);
            background: rgba(255,255,255,0.02);
            color: #fff;
            font-weight: 600;
            font-size: 17px;
            letter-spacing: -0.01em;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            text-align: left;
        }
        .chip:hover{
            border-color: rgba(255,255,255,0.12);
            background: rgba(255,255,255,0.04);
            transform: translateX(4px);
        }
        .chip.is-on{
            background: rgba(220,38,38,0.1);
            border-color: var(--brand-red);
            color: #fff;
        }
        .chip.is-on::before {
            content: '✓';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            font-weight: 700;
            color: var(--brand-red);
        }
        .chip-grid.multi .chip.is-on{
            background: rgba(251,146,60,0.1);
            border-color: var(--brand-orange);
        }
        .chip-grid.multi .chip.is-on::before {
            color: var(--brand-orange);
        }

        /* Grid */
        .grid-two{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
            margin-top: 8px;
        }
        .grid-two .form-mini input{
            width: 100%;
            box-sizing: border-box;
        }

        /* Contact Grid Layout */
        .contact-wrapper {
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 40px;
            display: grid;
            grid-template-columns: 1.7fr 0.7fr; /* Formular noch breiter, Karte schiebt nach rechts */
            gap: 100px; /* Abstand deutlich erhöht */
            align-items: start;
        }

        /* Adjust Wizard for Grid Context */
        .wizard {
            max-width: 100%;
            margin: 0;
            padding: 0;
        }
        
        /* Founder Card */
        .founder-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            overflow: hidden;
            position: sticky;
            top: 120px;
            transition: all 0.3s ease;
            max-width: 380px; /* Breite begrenzt für kompakte Optik */
            margin-left: auto; /* Rechtsbündig im Grid-Container */
        }

        .founder-card:hover {
            border-color: rgba(255, 255, 255, 0.15);
            box-shadow: 0 20px 40px rgba(0,0,0,0.25);
            transform: translateY(-4px);
        }

        .founder-image {
            width: 100%;
            height: 320px; /* Höhe reduziert */
            position: relative;
            background: #111;
        }

        .founder-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 15%; /* Fokus etwas weiter nach oben, um Gesicht zu zeigen */
            display: block;
        }
        
        /* Add a subtle gradient overlay at bottom of image for text readability transition */
        .founder-image::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 100px;
            background: linear-gradient(to top, rgba(255,255,255,0.03) 0%, transparent 100%);
        }

        .founder-content {
            padding: 24px 28px; /* Padding reduziert */
        }

        .founder-role {
            font-size: 11px; /* Kleiner */
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--brand-red);
            margin-bottom: 8px;
        }

        .founder-name {
            font-size: 26px; /* Von 32px auf 26px reduziert */
            font-weight: 800;
            color: #fff;
            margin: 0 0 16px 0;
            line-height: 1.1;
        }

        .founder-divider {
            width: 40px; /* Kürzer */
            height: 2px;
            background: rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }

        .founder-headline {
            font-size: 20px; /* Von 17px auf 20px */
            font-weight: 600;
            color: #fff;
            margin-bottom: 8px;
        }

        .founder-bio {
            font-size: 17px; /* Von 14.5px auf 17px */
            line-height: 1.6;
            color: #a3a3a3;
            margin-bottom: 24px;
        }

        .founder-contact-info .fc-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #d4d4d4;
            font-weight: 500;
            font-size: 13.5px; /* Etwas kleiner */
        }
        .founder-contact-info a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s;
        }
        .founder-contact-info a:hover {
            color: var(--brand-red);
        }

        /* Minimalist Progress - Left Align Override */
        .wiz-progress {
            margin: 0 0 60px 0; /* Remove auto margin */
            text-align: left;   /* Align dots left */
        }
        .wiz-progress .dots {
            padding: 6px 0; /* Remove horizontal padding/border if we want cleaner look */
            background: transparent;
            border: none;
        }

        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .contact-wrapper {
                grid-template-columns: 1fr;
                gap: 60px;
            }
            .founder-card {
                position: static; /* No sticky on mobile */
                max-width: 600px;
                margin: 0 auto;
                order: -1; /* Show founder BEFORE form on tablet/mobile? Or after? User requested Right -> usually below. 
                              But mobile UX pattern: Context first. Let's keep it below (default order) or above. 
                              Current code keeps default order (below). */
            }
            .section-header[style] {
                text-align: center !important; 
                padding: 0 24px !important;
            }
            .wiz-progress { text-align: center; margin: 0 auto 40px; }
            .wiz-progress .dots { 
                padding: 6px 12px; 
                background: rgba(255,255,255,0.04); 
                border: 1px solid rgba(255,255,255,0.06); 
                display: inline-flex;
            }
        }
        @media (max-width: 768px) {
             .contact-wrapper { padding: 0 20px; }
             .founder-image { height: 300px; }
        }

        /* Budget Slider */
        .budget{
            padding: 24px 0 0 0;
            margin-bottom: 0;
        }
        .budget input[type=range]{
            width: 100%;
            -webkit-appearance: none;
            background: transparent;
            cursor: pointer;
            height: 40px;
        }
        .budget input[type=range]::-webkit-slider-runnable-track{
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }
        .budget input[type=range]::-moz-range-track{
            height: 4px;
            background: rgba(255,255,255,0.08);
            border-radius: 999px;
        }
        .budget input[type=range]::-webkit-slider-thumb{
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-top: -8px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            border: none;
            cursor: grab;
            transition: all 0.2s ease;
        }
        .budget input[type=range]::-webkit-slider-thumb:hover{
            transform: scale(1.1);
        }
        .budget input[type=range]::-webkit-slider-thumb:active{
            cursor: grabbing;
            transform: scale(0.95);
        }
        .budget-output{
            margin-top: 24px;
            margin-bottom: 0;
            color: #fff;
            font-weight: 700;
            letter-spacing: -0.02em;
            font-size: 44px;
            text-align: left;
        }

        /* Form Inputs */
        .form-mini{
            display: grid;
            gap: 0;
        }
        .form-mini label {
            color: rgba(255,255,255,0.5);
            font-weight: 500;
            font-size: 15px;
            letter-spacing: 0;
            margin-bottom: 12px;
        }
        .form-mini input{
            background: transparent;
            border: none;
            border-bottom: 2px solid rgba(255,255,255,0.1);
            color: #fff;
            padding: 14px 0;
            border-radius: 0;
            height: auto;
            line-height: 1.5;
            font-size: 18px;
            transition: all 0.2s ease;
            margin-bottom: 28px;
        }
        .form-mini input:focus {
            outline: none;
            border-bottom-color: var(--brand-red);
            background: transparent;
        }
        .form-mini input::placeholder {
            color: rgba(255,255,255,0.25);
        }
        .form-mini input.invalid{
            border-bottom-color: var(--brand-red-light);
            animation: shake 0.4s ease;
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-8px); }
            75% { transform: translateX(8px); }
        }

        /* Textarea als Kachel */
        #wiz-note {
            width: 100%;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            color: #fff;
            padding: 24px;
            resize: none;
            flex: 1; /* Füllt den gesamten verfügbaren Platz im Flex-Container aus */
            font-size: 24px; /* Deutlich größere Schrift */
            font-weight: 500;
            transition: all 0.2s ease;
            font-family: inherit;
            line-height: 1.4;
            margin-bottom: 0;
            display: block;
        }

        /* Sicherstellen, dass der Step den Platz bereitstellt */
        .wiz-step[data-step="1"] {
            height: 100%;
        }

        #wiz-note:focus {
            outline: none;
            border-color: var(--brand-red); /* Roter Rahmen bei Fokus */
            background: rgba(255, 255, 255, 0.06); /* Etwas heller bei Fokus */
            box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1); /* Subtiler Glow */
        }

        #wiz-note::placeholder {
            color: rgba(255, 255, 255, 0.25);
        }

        /* Summary & Errors */
        .summary{
            margin-top: 20px;
            margin-bottom: 0;
            color: rgba(255,255,255,0.5);
            font-size: 15px;
            line-height: 1.7;
        }
        .form-error{
            margin-top: 12px;
            margin-bottom: 0;
            color: #fda4af;
            font-weight: 500;
            font-size: 15px;
        }

        /* Navigation Buttons */
        .wiz-nav{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-64);
            gap: 16px;
            padding-bottom: 20px;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .wiz-btn{
            padding: 0;
            border: none;
            background: transparent;
            color: rgba(255,255,255,0.4);
            font-weight: 600;
            letter-spacing: 0;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 16px;
        }
        .wiz-btn:hover:not(:disabled) {
            color: rgba(255,255,255,0.7);
        }
        .wiz-btn.next{
            background: var(--brand-red);
            color: #fff;
            padding: 16px 36px;
            border-radius: 12px;
            font-size: 17px;
            font-weight: 600;
            margin-left: auto;
        }
        .wiz-btn.next:hover:not(:disabled) {
            background: var(--brand-red-light);
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(220,38,38,0.3);
        }
        .wiz-btn:disabled{
            opacity: 0.2;
            cursor: not-allowed;
        }

        /* Responsive */
        @media (max-width: 768px){
            #contact {
                padding: 80px 0;
            }
            .wizard {
                padding: 0 16px;
            }
            /* reduzierte Endabstände der Auswahlchips auf kleineren Screens */
            .chip-grid{ margin-bottom: var(--space-24); }
            .wiz-viewport {
                min-height: 500px;
            }
            .wiz-title {
                font-size: 28px;
                margin-bottom: 6px;
            }
            .wiz-sub {
                font-size: 16px;
                margin-bottom: 12px;
            }
            .wiz-step {
                gap: 24px;
            }
            .grid-two{
                grid-template-columns: 1fr;
                gap: 0;
            }
            .chip {
                font-size: 16px;
                padding: 18px 20px;
            }
            .form-mini input,
            #wiz-note {
                font-size: 17px;
                padding: 12px 0;
                margin-bottom: 28px;
            }
            .budget-output {
                font-size: 36px;
                margin-top: 20px;
            }
            .wiz-nav {
                margin-top: var(--space-40);
            }
            .wiz-btn.next {
                padding: 14px 32px;
                font-size: 16px;
            }
        }
        
        /* Services Grid */
        .services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        
        .service-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 40px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 0.4s ease,
                        background 0.2s ease,
                        border-color 0.2s ease;
        }

        /* Dynamic glow that follows cursor (confined to card) */
        .service-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(220, 38, 38, 0.14),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 0;
        }

        /* Liquid morphing border effect */
        .service-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(
                var(--border-angle, 0deg),
                rgba(220, 38, 38, 0.85),
                rgba(251, 146, 60, 0.85),
                rgba(239, 68, 68, 0.85),
                rgba(220, 38, 38, 0.85)
            );
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 1;
        }

        .service-card:hover::before { opacity: 1; }
        .service-card:hover::after { opacity: 1; animation: borderRotate 3s linear infinite; }

        @keyframes borderRotate { 0% { --border-angle: 0deg; } 100% { --border-angle: 360deg; } }
        @property --border-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
        
        .service-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: transparent;
            box-shadow:
                0 20px 60px rgba(220, 38, 38, 0.28),
                0 0 80px rgba(220, 38, 38, 0.14);
        }

        /* JS will handle transforms - prevent CSS transform conflicts */
        .service-card.js-active,
        .service-card.js-active.fade-in,
        .service-card.js-active.fade-in.visible {
            transition: box-shadow 0.4s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.6s ease !important;
            /* JS will set transform via inline style, don't override it with CSS */
        }

        /* Disable CSS hover transform when JS is active */
        .service-card.js-active:hover,
        .service-card.js-active.fade-in:hover,
        .service-card.js-active.fade-in.visible:hover {
            /* JS will handle all transforms */
        }
        
        /* Icon stays static - no animation */
        .service-icon { font-size: 48px; margin-bottom: 24px; display: block; }

        /* Ensure content renders above glow/border pseudo-elements */
        .service-card > * { position: relative; z-index: 2; }
        
        .service-card h3 {
            font-size: 24px;
            margin-bottom: 12px;
            color: #fff;
        }
        
        .service-card p {
            color: #a3a3a3;
            line-height: 1.7;
        }
        
        /* Portfolio */
        .portfolio-scroller { position: relative; padding: var(--space-16) 0 var(--space-24); }
        /* Enforce standard section padding for portfolio (override inline style in HTML) */
        #portfolio { padding-top: var(--section-spacing) !important; margin-top: 0 !important; }
        .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent); }
        .marquee .track { display: flex; flex-wrap: nowrap; gap: 18px; align-items: center; width: max-content; }
        /* slower for better viewing */
        .marquee-top .track { animation: scrollLeft 55s linear infinite; }
        /* bigger tiles (+~33%) */
        .tile { width: 240px; height: 160px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; display: grid; place-items: center; color: var(--text-3); font-size: 32px; }
        .tile img{ width:100%; height:100%; object-fit: cover; border-radius: 14px; display:block; }
        /* CTA: schmaler, weißer Streifen mit Kanten-Fade wie die Marquees */
        .marquee-cta-wrap { position: relative; margin: var(--space-24) 0; height: 64px; }
        .cta-stripe {
            position: relative; height: 64px; display:flex; align-items:center; justify-content:center;
            /* derselbe horizontale Fade wie Marquees */
            mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            /* fix layout height; visual growth via transform only */
        }
        .cta-stripe::before{
            content: '';
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(1);
            height: 52px; border-radius: 0;
            background: #ffffff; /* reiner weißer Kern */
            transition: transform .25s ease;
        }
        .cta-stripe::after{
            content: '';
            position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%) scaleY(1);
            height: 64px; border-radius: 0;
            /* nur oben/unten leicht abdunkeln, keine harte Kante */
            background: linear-gradient(180deg, rgba(0,0,0,0.24) 0%, rgba(0,0,0,0.10) 14%, rgba(0,0,0,0.0) 36%, rgba(0,0,0,0.0) 64%, rgba(0,0,0,0.10) 86%, rgba(0,0,0,0.24) 100%);
            filter: blur(6px);
            pointer-events: none;
            transition: transform .25s ease, filter .25s ease;
        }
        .marquee-cta-wrap:hover .cta-stripe::before{ transform: translateY(-50%) scaleY(1.2); }
        .marquee-cta-wrap:hover .cta-stripe::after{ transform: translateY(-50%) scaleY(1.2); filter: blur(7px); }
        .marquee-cta { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display:inline-block; padding: 2px 16px; z-index: 3; text-decoration:none; font-weight:900; letter-spacing:.10em; text-transform:uppercase; color: var(--bg); font-size: 18px; }
        .marquee-cta span{ color: var(--bg); -webkit-text-fill-color: var(--bg); background: none; }
        @keyframes scrollLeft { from { transform: translateX(-50%); } to { transform: translateX(0); } }
        
        /* Removed Prozess styles */
        
        /* Why VARIAD Section (Bento Grid Layout) */
        /* Warum-Kunden-Grid – exakt nach deinem Standalone-File, scoped unter #why-variad */
        #why-variad{ padding: var(--section-spacing) 0; position: relative; max-width: none; width: 100%; margin: 0; }
        #why-variad .wrap{ width:min(var(--container-width), 100%); margin: 0 auto; padding: 0 var(--container-padding); }
        
        /* Stats row */
        #why-variad .stats-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 32px; }
        #why-variad .stat-card{ position:relative; background: var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-card); padding:24px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; min-height:110px; }
        #why-variad .stat-card::after{ content:''; position:absolute; inset:-2px; border-radius:var(--radius-card); padding:2px; background:linear-gradient(135deg, rgba(220,38,38,.85), rgba(251,146,60,.85)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.0; transition:opacity .25s ease; pointer-events:none; }
        #why-variad .stat-card:hover::after{ opacity:1; }
        #why-variad .stat-number{ font-weight:900; background: linear-gradient(135deg, var(--brand-red), var(--brand-orange)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; font-size: 52px; line-height:1.1; letter-spacing: -0.02em; }
        #why-variad .stat-label{ color: var(--text-3); margin-top: 12px; font-size: 18px; font-weight: 500; }
        #why-variad .stat-hint{ color: var(--text-4); font-size:14px; margin-top: 4px; }
        
        /* Bento Grid */
        #why-variad .grid{ display:grid; grid-template-columns:2fr 1fr; gap:24px; align-items:stretch; }
        #why-variad .col{ display:grid; gap:24px; }
        #why-variad .card{ background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.07); border-radius:18px; box-shadow:0 18px 50px rgba(0,0,0,.55); overflow:hidden; }
        #why-variad .card-inner{ padding:32px 36px; }
        #why-variad .kicker{ font-size:20px; font-weight:700; color:#fff; margin:0 0 8px; letter-spacing: 0.01em; }
        #why-variad .desc{ margin:0; color:var(--text-3); font-size:18px; line-height:1.6; max-width:55ch; }

        /* Editorial Card - Eine große Kachel mit Editorial-Inhalt */
        #why-variad .editorial-card{
            min-height: 540px;
            background: radial-gradient(1080px 380px at 70% 30%, rgba(255,90,42,.11), transparent 60%),
                        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
        }

        #why-variad .editorial-card .card-inner{
            padding: 44px 48px 44px;
            display: flex;
            flex-direction: column;
            min-height: 496px;
        }

        #why-variad .editorial-headline{
            font-size: 48px;
            line-height: 1.15;
            font-weight: 700;
            color: #fff;
            margin: 0 0 32px;
            letter-spacing: -0.03em;
        }

        #why-variad .editorial-subtitle{
            font-size: 20px;
            line-height: 1.6;
            color: rgba(255,255,255,0.5);
            margin: 0 0 var(--space-48);
            font-weight: 400;
            max-width: 620px;
        }

        #why-variad .editorial-intro{
            margin: 0 0 var(--space-48);
        }

        #why-variad .editorial-intro p{
            font-size: 20px;
            line-height: 1.7;
            color: rgba(255,255,255,0.78);
            margin: 0 0 20px;
            max-width: 580px;
        }

        #why-variad .editorial-intro p:last-child{
            margin-bottom: 0;
        }

        /* Separator vor Principles */
        #why-variad .principles-separator{
            height: 1px;
            background: linear-gradient(90deg,
                rgba(255,90,42,0.15) 0%,
                rgba(255,90,42,0.25) 50%,
                rgba(255,90,42,0.15) 100%);
            margin: 0 0 52px;
        }

        /* Principles Grid - Clean Typography Only */
        #why-variad .principles-grid{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 52px;
            margin: 0 0 auto;
            padding-bottom: 16px;
        }

        #why-variad .principle{
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        #why-variad .principle.visible{
            opacity: 1;
            transform: translateY(0);
        }

        #why-variad .principle[data-step="1"].visible{
            transition-delay: 0.1s;
        }

        #why-variad .principle[data-step="2"].visible{
            transition-delay: 0.2s;
        }

        #why-variad .principle[data-step="3"].visible{
            transition-delay: 0.3s;
        }

        #why-variad .principle-title{
            font-size: 24px;
            font-weight: 700;
            color: #fff;
            margin: 0 0 14px;
            letter-spacing: -0.02em;
        }

        #why-variad .principle-desc{
            font-size: 17px;
            line-height: 1.7;
            color: rgba(255,255,255,0.65);
            margin: 0;
        }

        /* CTA ganz unten */
        #why-variad .editorial-cta-v2{
            display: inline-block;
            font-size: 16px;
            color: #000;
            background: #fff;
            padding: 14px 28px;
            border-radius: var(--radius-ui);
            font-weight: 700;
            text-decoration: none;
            margin-top: 40px !important; /* Force space */
            transition: all 0.3s ease;
            text-align: center;
            width: fit-content;
        }

        #why-variad .editorial-cta-v2:hover{
            background: var(--text-2);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(255,255,255,0.1);
        }

        /* Right Column Cards - Dezenter */
        #why-variad .col:has(.editorial-card) ~ .col .card{
            opacity: 0.88;
        }

        #why-variad .col:has(.editorial-card) ~ .col .dot{
            opacity: 0.7;
        }

        #why-variad .col:has(.editorial-card) ~ .col .dot.show{
            opacity: 0.88;
        }

        /* Responsive */
        @media (max-width: 1200px){
            #why-variad .editorial-card .card-inner{
                padding: 36px 36px 36px;
                min-height: 480px;
            }

            #why-variad .editorial-headline{
                font-size: 34px;
                margin-bottom: 24px;
            }

            #why-variad .editorial-subtitle{
                font-size: 16px;
                margin-bottom: 40px;
            }

            #why-variad .editorial-intro{
                margin-bottom: 40px;
            }

            #why-variad .principles-separator{
                margin-bottom: 36px;
            }

            #why-variad .principles-grid{
                grid-template-columns: 1fr;
                gap: 36px;
                padding-bottom: 40px;
            }

            #why-variad .editorial-cta-v2{
                font-size: 16px;
            }
        }

        /* Dots (zentriert + animiert) */
        #why-variad .dots{ min-height:360px; display:flex; flex-direction:column; }
        #why-variad .dot-area{ flex:1; padding:16px 0 24px; display:flex; align-items:center; justify-content:center; }
        #why-variad .dot-grid{ display:grid; grid-template-columns: repeat(10, 17px); grid-auto-rows:17px; gap:17px; }
        #why-variad .dot{ display:block; width:17px; height:17px; border-radius:50%; background:#ff5a2a; box-shadow:0 0 0 1px rgba(0,0,0,.35) inset; opacity:0; transform: scale(.6); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1.3); }
        #why-variad .dot.show{ opacity:1; transform: scale(1); }

        /* Project management (Checkliste mit animiertem Haken) */
        #why-variad .pm .steps{ padding:12px 24px 24px; display:grid; gap:14px; }
        #why-variad .pm .step{ height:52px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); display:flex; align-items:center; padding:0 16px; gap:14px; transform: scale(1); will-change: transform; }
        #why-variad .pm .check{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,90,42,.9); box-shadow:0 10px 20px rgba(255,90,42,.1); display:grid; place-items:center; color:#fff; transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease; }
        #why-variad .pm .check::after{ content:'✓'; font-weight:800; font-size:14px; opacity:0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
        #why-variad .pm .label{ color:#dedede; font-weight:600; letter-spacing:.02em; font-size: 18px; }
        #why-variad .pm .step.done .check{ background:#ff5a2a; border-color:#ff5a2a; box-shadow:0 8px 18px rgba(255,90,42,.25); animation: tick-pop .48s cubic-bezier(.2,.7,.2,1.1); }
        #why-variad .pm .step.done .check::after{ opacity:1; transform: scale(1); }
        #why-variad .pm .step.done .label{ color:#ffffff; }
        @keyframes tick-pop { 0%{ transform: scale(1); } 40%{ transform: scale(1.08);} 70%{ transform: scale(.995);} 100%{ transform: scale(1);} }
        /* Verspielter, subtiler Burst jeder Zeile */
        #why-variad .pm .step.burst{ animation: card-burst .6s cubic-bezier(.2,.7,.2,1.1); }
        @keyframes card-burst { 0%{ transform: scale(1); } 35%{ transform: scale(1.04);} 70%{ transform: scale(.995);} 100%{ transform: scale(1);} }
        @media (prefers-reduced-motion: reduce){
          #why-variad .dot, #why-variad .pm .check{ transition: none !important; transform: none !important; }
        }

        /* Brand */
        #why-variad .brand .row{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:20px; padding: 22px 24px 24px; }
        #why-variad .accent{ color:#ff5a2a; font-weight:650; }
        #why-variad .mock{ min-height:288px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background: radial-gradient(840px 312px at 30% 10%, rgba(255,255,255,.06), transparent 60%), #151515; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }

        /* Responsive */
        @media (max-width: 860px){
          #why-variad .title{ font-size:36px; }
          #why-variad .grid{ grid-template-columns:1fr; }
          #why-variad .brand .row{ grid-template-columns:1fr; }
          #why-variad .dot-area{ justify-content:flex-start; }
        }


        /* Contact */
        #contact {
            padding: var(--section-spacing) 0;
        }

        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
        }
        
        .contact-info h3 {
            font-size: 32px;
            margin-bottom: 24px;
        }
        
        .contact-info p {
            color: #a3a3a3;
            line-height: 1.8;
            margin-bottom: 32px;
        }
        
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            transition: all 0.3s;
        }
        
        .contact-item:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(220, 38, 38, 0.3);
        }
        
        .contact-icon {
            font-size: 24px;
        }
        
        .contact-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .form-group label {
            color: #d4d4d4;
            font-weight: 500;
        }
        
        .form-group input,
        .form-group textarea {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 14px 18px;
            color: #fff;
            font-family: inherit;
            font-size: 16px;
            transition: all 0.3s;
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: rgba(220, 38, 38, 0.5);
            background: rgba(255, 255, 255, 0.08);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 150px;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%);
            color: #fff;
            padding: 16px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
        }
        
        /* Pricing */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }
        .pricing-grid.two { grid-template-columns: repeat(2, 1fr); }
        .pricing-grid.four { grid-template-columns: repeat(4, 1fr); }
        .price-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 20px;
            padding: 28px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transform-style: preserve-3d;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                        box-shadow 0.4s ease,
                        background 0.2s ease,
                        border-color 0.2s ease;
        }

        /* Dynamic glow that follows cursor (same as service-card) */
        .price-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(
                600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                /* match service-card red glow */
                rgba(220, 38, 38, 0.14),
                transparent 40%
            );
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 0;
        }

        /* Liquid morphing border effect */
        .price-card::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: 20px;
            padding: 2px;
            background: linear-gradient(
                var(--border-angle, 0deg),
                /* match service-card red/orange ring */
                rgba(220, 38, 38, 0.85),
                rgba(251, 146, 60, 0.85),
                rgba(239, 68, 68, 0.85),
                rgba(220, 38, 38, 0.85)
            );
            -webkit-mask:
                linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 1;
        }

        .price-card:hover::before { opacity: 1; }
        .price-card:hover::after { opacity: 1; animation: borderRotate 3s linear infinite; }

        .price-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: transparent;
            /* match service-card red/orange shadow */
            box-shadow:
                0 20px 60px rgba(220, 38, 38, 0.28),
                0 0 80px rgba(220, 38, 38, 0.14);
        }

        /* JS will handle transforms - prevent CSS transform conflicts */
        .price-card.js-active,
        .price-card.js-active.fade-in,
        .price-card.js-active.fade-in.visible {
            transition: box-shadow 0.4s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.6s ease !important;
        }

        /* Disable CSS hover transform when JS is active */
        .price-card.js-active:hover,
        .price-card.js-active.fade-in:hover,
        .price-card.js-active.fade-in.visible:hover {
            /* JS will handle all transforms */
        }
        /* Ensure content renders above glow/border pseudo-elements */
        .price-card > * { position: relative; z-index: 2; }

        .price-card .plan {
            font-size: 18px;
            color: var(--text-2);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: .08em;
        }
        .price-card .price {
            font-size: 32px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16px;
        }
        .price-card ul { list-style: none; color: var(--text-4); display: grid; gap: 10px; margin: 16px 0 0; }
        .price-card ul li::before { content: '✓'; margin-right: 8px; color: var(--brand-green); }

        /* NEW PRICING PACKAGES - Full Width Left/Right Layout */
        .pricing-grid-new {
            max-width: 1600px;
            margin: 80px auto 0;
            padding: 0 40px;
        }

        .price-package {
            margin-bottom: 150px;
            max-width: 1300px;
            display: flex;
            gap: 100px;
            align-items: center;
        }

        /* Fine-tuned gaps per package (1: SMM, 2: Ads, 3: Content) */
        .pricing-grid-new > .price-package:nth-of-type(1) { gap: 120px; }
        .pricing-grid-new > .price-package:nth-of-type(2) { gap: 150px; }
        .pricing-grid-new > .price-package:nth-of-type(3) { gap: 140px; }

        .price-package.package-left {
            margin-left: 0;
            margin-right: auto;
            flex-direction: row;
        }

        .price-package.package-right {
            margin-left: auto;
            margin-right: 0;
            text-align: right;
            flex-direction: row-reverse;
        }

        .package-content {
            flex: 1;
        }

        .package-header {
            margin-bottom: 24px;
        }

        .package-icon {
            width: 450px;
            height: 450px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .package-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Keep mobile/tablet tidy */
        @media (max-width: 1024px) {
            .pricing-grid-new .price-package { gap: 48px; }
            .pricing-grid-new .package-left .package-icon img[src$="Iphone.svg"],
            .pricing-grid-new .package-right .package-icon img[src$="Advertising.svg"],
            .pricing-grid-new .package-left .package-icon img[src$="Content.svg"] {
                transform: none !important;
            }
        }

        /* Rote Färbung für Iphone und Advertising Icons */
        .package-icon.icon-phone img,
        .package-icon.icon-ads img {
            filter: brightness(0) saturate(100%) invert(23%) sepia(87%) saturate(3529%) hue-rotate(347deg) brightness(92%) contrast(93%);
        }

        /* Explicit per‑SVG offsets so the icons rücken weiter weg vom Text
           (greift direkt auf die gelieferten Dateien) */
        .pricing-grid-new .package-left .package-icon img[src$="Iphone.svg"] { transform: translateX(40px) !important; }
        .pricing-grid-new .package-right .package-icon img[src$="Advertising.svg"] { transform: translateX(-60px) !important; }
        .pricing-grid-new .package-left .package-icon img[src$="Content.svg"] { transform: translateX(70px) !important; }

        .package-number {
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--brand-red);
            margin-bottom: 12px;
        }

        .package-title {
            font-size: clamp(32px, 4vw, 48px);
            font-weight: 900;
            color: var(--text);
            margin-bottom: 16px;
            line-height: 1.1;
        }

        .package-price {
            font-size: clamp(18px, 2vw, 24px);
            font-weight: 700;
            color: var(--brand-red);
            margin-bottom: 24px;
        }

        .package-description {
            font-size: 15px;
            line-height: 1.7;
            color: var(--text-3);
            margin-bottom: 28px;
        }

        .package-features {
            list-style: none;
            margin-bottom: 32px;
        }

        .package-features li {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-3);
            margin-bottom: 12px;
            padding-left: 24px;
            position: relative;
        }

        .package-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--brand-red);
            font-weight: 700;
        }

        .package-right .package-features li {
            padding-left: 0;
            padding-right: 24px;
        }

        .package-right .package-features li::before {
            left: auto;
            right: 0;
        }

        .btn-package {
            display: inline-block;
            padding: 14px 28px;
            background: var(--brand-red);
            color: #fff;
            text-decoration: none;
            border-radius: 8px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        .btn-package:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(220, 38, 38, 0.4);
        }

        /* Footer */
        footer {
            background: rgba(255, 255, 255, 0.02);
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            padding: 60px 60px 30px;
        }
        
        .footer-content {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr; /* Brand + 3 Spalten */
            gap: 60px;
            margin-bottom: 40px;
        }
        
        .footer-brand h3 {
            font-size: 32px;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16px;
        }

        .footer-logo-img {
            height: 32px;
            width: auto;
            margin-bottom: 16px;
            display: block;
        }
        
        .footer-brand p {
            color: #a3a3a3;
            line-height: 1.7;
        }
        
        .footer-section h4 {
            margin-bottom: 20px;
            color: #fff;
        }
        
        .footer-section ul {
            list-style: none;
        }
        
        .footer-section ul li {
            margin-bottom: 12px;
        }
        
        .footer-section ul li a {
            color: #a3a3a3;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-section ul li a:hover {
            color: var(--brand-red);
        }
        
        .footer-bottom {
            max-width: 1400px;
            margin: 0 auto;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
            color: #a3a3a3;
        }

        /* SMM showcase - Sticky Section mit Content Slides */
        #smm {
            position: relative;
            /* Maximal verlängert, damit Slide 5 lang stehen bleibt */
            min-height: 600vh;
            background: transparent;
            padding: 120px 0 0;
        }
        #smm .showcase {
            position: sticky;
            top: 6vh;
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            z-index: 30; /* über nachfolgenden Sektionen (z.B. #smm-stats) */
            pointer-events: none; /* verhindert, dass sie spätere Sektionen blockiert */
        }
        #smm .section-header {
            text-align: center;
            padding: 0 20px;
            z-index: 10;
        }
        #smm .phone-wrap{ position:relative; width:min(360px, 80vw); z-index: 10; }
        #smm .phone{ position:relative; width:100%; aspect-ratio: 9/19.5; border-radius: 34px; border:1px solid var(--card-border); background: #0d0d0d; box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow:hidden; }
        #smm .phone::before{ content:''; position:absolute; inset:0; border-radius: 34px; padding:1px; background: linear-gradient(135deg, rgba(251,146,60,0.5), rgba(251,146,60,0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35; filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.6)) drop-shadow(0 0 16px rgba(251, 146, 60, 0.3)) drop-shadow(0 0 24px rgba(251, 146, 60, 0.2)); }
        #smm .screen{ position:absolute; inset:10px; border-radius: 26px; overflow:hidden; background: radial-gradient(120% 120% at 70% -20%, rgba(251,146,60,0.16), rgba(239,68,68,0.10) 40%, transparent 70%); }
        /* Emoji-Layer über die gesamte showcase */
        #smm .emoji-layer{ position:absolute; inset:0; pointer-events:none; overflow:visible; z-index:5; }
        #smm .emoji{ position:absolute; will-change: transform, opacity; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
        /* Message Bubbles */
        #smm .msg-layer{ position:absolute; inset:0; pointer-events:none; z-index:6; }

        /* Content Slides: Alternierende Einblendung des Textes */
        #smm .content-slides{ position:absolute; inset:0; pointer-events:none; z-index:40; }
        #smm .content-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start; padding:0 80px; opacity:0; transition:opacity .6s ease; }
        #smm .content-slide.active{ opacity:1; }
        #smm .content-slide .slide-text{ position:absolute; top:50%; transform: translateY(-50%); opacity:0; transition: opacity .6s ease, transform .6s ease; max-width:none; }
#smm .content-slide.active .slide-text{ opacity:1; }

        /* Text 1, 3, 5: von RECHTS nach links */
        #smm .content-slides > .content-slide:nth-child(1) .slide-text,
        #smm .content-slides > .content-slide:nth-child(3) .slide-text,
        #smm .content-slides > .content-slide:nth-child(5) .slide-text {
            transform: translateY(-50%) translateX(24px);
        }
        #smm .content-slides > .content-slide:nth-child(1).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(3).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(5).active .slide-text {
            transform: translateY(-50%) translateX(0);
        }

        /* Text 2, 4: von LINKS nach rechts */
        #smm .content-slides > .content-slide:nth-child(2) .slide-text,
        #smm .content-slides > .content-slide:nth-child(4) .slide-text {
            transform: translateY(-50%) translateX(-24px);
        }
        #smm .content-slides > .content-slide:nth-child(2).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(4).active .slide-text {
            transform: translateY(-50%) translateX(0);
        }
        /* Alternation auch ohne JS: nth-child sichert links/rechts */
        #smm .content-slides > .content-slide:nth-child(odd)  .slide-text{ right: clamp(140px, 14vw, 360px); left:auto;  width: clamp(420px, 32vw, 560px); }
        #smm .content-slides > .content-slide:nth-child(even) .slide-text{ left:  clamp(140px, 14vw, 360px); right:auto; width: clamp(420px, 32vw, 560px); }
        /* Falls Klassen gesetzt sind, haben diese Vorrang */
        #smm .content-slide.dir-left  .slide-text{ left:  clamp(140px, 14vw, 360px); right:auto; width: clamp(420px, 32vw, 560px); }
        #smm .content-slide.dir-right .slide-text{ right: clamp(140px, 14vw, 360px); left:auto;  width: clamp(420px, 32vw, 560px); }
        #smm .content-slide.active .slide-text{ opacity:1; }

        /* Text 1, 3, 5 (LINKS positioniert): von RECHTS nach links = startet rechts (+40px) */
        #smm .content-slides > .content-slide:nth-child(1) .slide-text,
        #smm .content-slides > .content-slide:nth-child(3) .slide-text,
        #smm .content-slides > .content-slide:nth-child(5) .slide-text {
            transform: translate(40px, -50%);
        }
        #smm .content-slides > .content-slide:nth-child(1).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(3).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(5).active .slide-text {
            transform: translate(0, -50%);
        }

        /* Text 2, 4 (RECHTS positioniert): von LINKS nach rechts = startet links (-40px) */
        #smm .content-slides > .content-slide:nth-child(2) .slide-text,
        #smm .content-slides > .content-slide:nth-child(4) .slide-text {
            transform: translate(-40px, -50%);
        }
        #smm .content-slides > .content-slide:nth-child(2).active .slide-text,
        #smm .content-slides > .content-slide:nth-child(4).active .slide-text {
            transform: translate(0, -50%);
        }

        /* Text Base Position */
        #smm .content-slide .slide-text{
            position: absolute;
            top: 50%;
            width: clamp(420px, 32vw, 620px);
            z-index: 41;
            text-align: left;
        }

        /* Feste, deutlichere Offsets – sichtbar rechts/links der Handyzone */
        /* Links: mehr nach rechts verschoben */
        #smm .content-slide.dir-left .slide-text {
            left: clamp(280px, 24vw, 480px);
            right: auto;
            width: clamp(480px, 36vw, 640px);
        }

        /* Rechts: noch weiter nach rechts verschoben (weg vom Handy) */
        #smm .content-slide.dir-right .slide-text {
            left: calc(50% + 300px);
            right: auto;
            width: clamp(480px, 36vw, 640px);
        }

        /* Schwarze Wolke hinter dem Text */
        #smm .slide-text::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 115%;
            height: 100%;
            background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0.92) 0%,
                rgba(0, 0, 0, 0.75) 30%,
                rgba(0, 0, 0, 0.35) 50%,
                transparent 70%
            );
            filter: blur(50px);
            -webkit-filter: blur(50px);
            z-index: -1;
            pointer-events: none;
        }

        /* Text Styling */
        #smm .slide-text p {
            font-size: clamp(20px, 2.2vw, 32px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: .005em;
            color: #fff;
            text-shadow:
                0 6px 40px rgba(0,0,0,1),
                0 3px 20px rgba(0,0,0,0.95),
                0 2px 8px rgba(0,0,0,0.9);
            position: relative;
            z-index: 1;
            margin: 0;
        }

        #smm .msg{ position:absolute; display:inline-block; max-width: 42vw; padding: 8px 12px; border-radius: 18px; color:#fff; font-weight:800; letter-spacing:.01em; white-space:nowrap; will-change: transform, opacity; box-shadow: 0 6px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(1px); }
        #smm .msg.v1{ background: linear-gradient(180deg, rgba(59,130,246,.85), rgba(37,99,235,.85)); }
        #smm .msg.v2{ background: linear-gradient(180deg, rgba(16,185,129,.85), rgba(5,150,105,.85)); }
        #smm .msg.v3{ background: linear-gradient(180deg, rgba(168,85,247,.85), rgba(124,58,237,.85)); }
        #smm .msg.v4{ background: linear-gradient(180deg, rgba(236,72,153,.85), rgba(219,39,119,.85)); }
        #smm .msg.v5{ background: linear-gradient(180deg, rgba(245,158,11,.9), rgba(217,119,6,.9)); }
        /* Messages/Emojis: weiche Kursanpassung via --sx/--sy (im JS gesetzt) */
        @keyframes msgPopFloat {
          0%   { transform: translate(calc(0px + var(--sx,0px)), calc(0px + var(--sy,0px))) scale(1); opacity: 1 }
          100% { transform: translate(calc(var(--dx,0px) + var(--sx,0px)), calc(var(--dy,0px) + var(--sy,0px) - var(--rise,80px))) scale(1); opacity: 0 }
        }
        @keyframes popFloat {
          0%   { transform: translate(calc(0px + var(--sx,0px)), calc(0px + var(--sy,0px))) scale(1); opacity: 1 }
          50%  { opacity: 0.6 }
          75%  { opacity: 0.2 }
          100% { transform: translate(calc(var(--dx,0px) + var(--sx,0px)), calc(var(--dy,0px) + var(--sy,0px) - var(--rise,80px))) scale(0.95); opacity: 0 }
        }
        #smm .overlay{ position:absolute; left:0; right:0; bottom:10px; display:grid; place-items:center; gap:4px; pointer-events:none; }
        #smm .overlay .o-title{ font-weight:800; letter-spacing:.02em; color:#fff; text-shadow: 0 6px 26px rgba(0,0,0,0.6); }
        #smm .overlay .o-sub{ font-size:12px; color:rgba(255,255,255,0.75); }
        #smm .feed{ position:absolute; inset:0; overflow:hidden; padding:12px; }
        #smm .tape{ position:absolute; left:0; right:0; display:flex; flex-direction:column; gap: 12px; padding: 0; }
        #smm .tape.t1{ top:0; animation: feedUp 38s linear infinite; }
        #smm .tape.t2{ top:100%; animation: feedUp 38s linear infinite; }
        #smm .card{ height: 76px; border-radius: 14px; background: rgba(255,255,255,0.04); border:1px solid var(--card-border); display:grid; place-items:center; text-align:center; }
        #smm .card.big{ height: 116px; }
        #smm .card .label{ font-weight:900; letter-spacing:.015em; color:#fff; text-transform:uppercase; line-height:0.9; font-size:28px; -webkit-font-smoothing: antialiased; text-rendering:optimizeLegibility; }
        #smm .card.big .label{ font-size:28px; }
        @keyframes feedUp { from { transform: translateY(0);} to { transform: translateY(-100%);} }
        #smm .ring{ position:absolute; inset:-16px; border-radius:42px; pointer-events:none; }
        #smm .ring::before{ content:''; position:absolute; inset:0; border-radius:42px; padding:3px; background: conic-gradient(from 0deg, var(--brand-red), var(--brand-orange), var(--brand-red-light), var(--brand-red)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35; filter: blur(.2px); }

        /* Creative mini tiles */
        /* smm creative tiles removed */

        /* smm cta removed */

        /* Before/After Cases – two mockups with center copy */
        

        /* Ads section */
        #ads .ad-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        #ads .ad-card { background: var(--card-bg); border:1px solid var(--card-border); border-radius: var(--radius-card); padding: 24px; transition: transform .3s ease, background .3s ease, border-color .3s ease; }
        #ads .ad-card:hover { transform: translateY(-6px); background: rgba(255,255,255,0.05); border-color: rgba(220,38,38,0.28); }
        #ads .ad-card h3 { margin-bottom: 8px; }
        #ads .ad-card p { color: var(--text-4); line-height: 1.7; }
        #ads .ad-foot { margin-top: 18px; display:flex; gap:16px; align-items:center; justify-content:center; color: var(--text-4); }
        @media (max-width: 1024px){ #ads .ad-grid { grid-template-columns: 1fr; } #ads .ad-foot { flex-direction: column; } }

        /* Warum Meta Ads? – cleanup: removed old buzzword explain styles */

        /* Meta Ads Intro Text */
        .meta-ads-intro {
            max-width: 920px;
            margin: 80px auto 60px;
            padding: 0 40px;
            text-align: center;
        }

        .meta-ads-intro p {
            font-size: 17px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.85);
            font-weight: 400;
        }

        /* Meta Ads Impact Simulator - COMPACT LAYOUT */
        .ads-simulator {
            max-width: 1400px; /* roomy but centered container */
            margin: 40px auto;
            padding: 0 20px;
        }

        /* Mini headline above the calculator */
        .ads-mini-head {
            text-align: center;
            font-weight: 900;
            font-size: clamp(14px, 1.4vw, 18px);
            letter-spacing: .01em;
            margin: 10px auto 8px;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* NEW: Simulator Grid - Slider left, Metrics right */
        .simulator-grid {
            display: grid;
            /* Center the whole pair (slider + metrics) */
            grid-template-columns: auto auto;
            justify-content: center;
            gap: 72px; /* tighter spacing to metrics */
            align-items: center;
        }

        /* Budget Control - Compact & Left Aligned */
        .budget-control {
            text-align: center;
            /* Fixed visual width to keep slider long while the whole pair remains centered */
            width: clamp(640px, 58vw, 880px);
            margin: 0 auto;
        }

        .budget-value {
            font-size: 44px;
            font-weight: 900;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            letter-spacing: -0.02em;
        }

        /* Rocket Slider Wrapper - Kompakter */
        .rocket-slider-wrapper {
            position: relative;
            width: 100%;
            margin: 22px 0; /* a bit more room for larger slider */
        }

        .budget-slider {
            -webkit-appearance: none;
            width: 100%;
            height: 12px; /* thicker track */
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            outline: none;
            position: relative;
            z-index: 2;
        }

        /* Rocket Trail */
        .rocket-trail {
            position: absolute;
            top: 50%;
            left: 0;
            height: 12px; /* thicker trail */
            background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.4) 50%, rgba(251, 146, 60, 0.6) 100%);
            width: 100%;
            transform: translateY(-50%) scaleX(0);
            transform-origin: left center;
            will-change: transform;
            pointer-events: none;
            border-radius: 12px;
            z-index: 1;
        }

        /* Rocket as Slider Thumb - Kleiner */
        .budget-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 48px; /* bigger star */
            height: 48px;
            cursor: pointer;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2L15 8L21 9L16.5 14L18 20L12 17L6 20L7.5 14L3 9L9 8L12 2Z" fill="%23dc2626"/><path d="M12 2L15 8L21 9L16.5 14L18 20L12 17L6 20L7.5 14L3 9L9 8L12 2Z" fill="url(%23grad1)"/><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23dc2626"/><stop offset="100%" style="stop-color:%23fb923c"/></linearGradient></defs></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            filter: drop-shadow(0 3px 10px rgba(220, 38, 38, 0.5));
            transition: transform 0.2s ease;
        }

        .budget-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

        .budget-slider::-moz-range-thumb {
            width: 48px; /* bigger star */
            height: 48px;
            cursor: pointer;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 2L15 8L21 9L16.5 14L18 20L12 17L6 20L7.5 14L3 9L9 8L12 2Z" fill="%23dc2626"/></svg>');
            background-size: contain;
            background-repeat: no-repeat;
            border: none;
            filter: drop-shadow(0 3px 10px rgba(220, 38, 38, 0.5));
        }

        .budget-label {
            color: var(--text-3);
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            margin-top: 14px;
        }

        .budget-range {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            color: var(--text-4);
            font-size: 12px;
        }

        /* Impact Metrics - 2x2 Grid rechts neben Slider */
        .impact-metrics-grow {
            display: grid;
            /* Shrink-to-content so left (Reichweite) sits closer to right (Impressionen) */
            grid-template-columns: max-content max-content;
            grid-template-rows: auto auto;
            gap: 18px 22px; /* compact gap between the two columns */
            justify-items: start;
            align-items: center;
            width: max-content; /* keep the cluster tight, not stretched */
        }

        .metric-grow {
            text-align: left;
            transition: all 0.4s ease;
        }

        .metric-number {
            font-weight: 900;
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
            font-size: 28px;
            /* Fixe Breite + tabellarische Ziffern, damit Nachbarn nicht verschoben werden */
            font-variant-numeric: tabular-nums;
            font-feature-settings: 'tnum' 1;
            /* Immer scharfes Rendering */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            display: inline-block;
            text-align: left;
            line-height: 1.1;
            text-rendering: geometricPrecision;
        }

        .metric-label {
            color: var(--text-3);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        /* Why Ads: ULTRA-SIMPLE sticky section - OVERRIDE ALL GLOBAL SECTION RULES */
        #why-ads {
            /* Reset ALL section defaults that could block sticky */
            padding: 0 !important;
            margin: -20vh 0 !important; /* 20% weniger Abstand */
            max-width: none !important;
            width: 100% !important;
            position: relative !important;
            z-index: 2 !important;

            /* Sticky setup: tall container */
            height: 300vh; /* Slower scroll */
            background: transparent !important; /* Let glow show through */
            overflow: visible !important; /* CRITICAL: no overflow hidden */
        }

        #why-ads .pin {
            /* THIS is the sticky element */
            position: -webkit-sticky !important; /* Safari */
            position: sticky !important;
            top: 0 !important;
            height: 100vh;
            width: 100%;

            /* Centering */
            display: flex;
            align-items: center;
            justify-content: center;

            /* Visual - transparent to let glow through */
            background: transparent !important;

            /* DEBUG: uncomment to see sticky working */
            /* border: 5px solid red; */
            /* box-shadow: 0 0 0 2px yellow; */
        }

        #why-ads .content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 0 40px;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
        }
        #why-ads .lead { color: var(--text-3); line-height: 1.8; margin: 14px auto 0; max-width: 860px; font-size: 20px; }
        #why-ads .points { display: grid; gap: 10px; margin: 26px auto 0; max-width: 900px; }
        #why-ads .points li { list-style: none; font-weight: 700; font-size: 28px; color: #fff; letter-spacing: .01em; }
        #why-ads .points li span { display: block; margin-top: 4px; color: var(--text-3); font-weight: 500; font-size: 18px; }
        #why-ads .chart { position: absolute; inset: 0; pointer-events: none; opacity: .65; z-index: 1; }
        #why-ads svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scaleY(var(--rise, .5)); transform-origin: center bottom; width: min(92vw, 1200px); height: auto; }
        #why-ads .grid { display: none; } /* Grid lines removed */
        /* SVG FILTER GLOW - Professioneller Ansatz */
        #why-ads .line {
            fill: none;
            stroke: url(#grad-why);
            stroke-width: 5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: var(--plen, 2000);
            stroke-dashoffset: calc(var(--plen, 2000) * (1 - var(--draw, 0)));
            filter: url(#glow);
        }

        #why-ads .endpoint {
            fill: url(#grad-why);
            filter: url(#glow);
        }

        /* Why-Ads title responsive */
        .why-ads-title { font-size: clamp(32px, 5vw, 64px); line-height: 1.1; margin: 0; }

        /* Tighten spacing after pinned section */
        #ads-pro { padding-top: 40px; }

        /* Note Footer */
        .ads-note {
            text-align: center;
            margin-top: 60px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
        }

        .ads-note p {
            color: var(--text-4);
            font-size: 14px;
        }

        /* Responsive */
        @media (max-width: 1440px) {
            .simulator-grid { grid-template-columns: auto auto; justify-content:center; gap: 64px; }
        }

        @media (max-width: 1280px) { .simulator-grid { grid-template-columns: auto auto; gap: 60px; } }

        @media (max-width: 1024px) {
            .meta-ads-intro {
                margin: 60px auto 50px;
                padding: 0 30px;
            }
            .meta-ads-intro p {
                font-size: 16px;
            }
            .simulator-grid { grid-template-columns: auto auto; gap: 56px; justify-content:center; }
            .budget-control { width: clamp(560px, 64vw, 760px); }
            .budget-value {
                font-size: 40px;
            }
            .metric-number {
                font-size: 26px;
            }
            .impact-metrics-grow { gap: 18px 20px; grid-template-columns: max-content max-content; width: max-content; }
        }

        @media (max-width: 768px) {
            .meta-ads-intro {
                margin: 50px auto 40px;
                padding: 0 24px;
            }
            .meta-ads-intro p {
                font-size: 15px;
                line-height: 1.6;
            }
            /* Mobile: Stack vertically */
            .simulator-grid {
                grid-template-columns: 1fr;
                gap: 48px;
            }
            .budget-value {
                font-size: 36px;
                margin-bottom: 16px;
            }
            .budget-label {
                font-size: 12px;
                margin-top: 12px;
            }
            .budget-range {
                font-size: 11px;
            }
            .metric-number {
                font-size: 24px;
            }
            .metric-label {
                font-size: 10px;
            }
            .impact-metrics-grow {
                gap: 16px 18px;
                justify-items: center;
            }
            .metric-grow {
                text-align: center;
            }
            .metric-number {
                text-align: center;
            }
        }

        /* Editorial Showcase (fresh concept) */
        #editorial { position:relative; padding-top: 0 !important; padding-bottom: 0 !important; }
        #editorial .ed-sticky-wrap{ position: relative; height: 300vh; }
        #editorial .ed-sticky{ position: sticky; top: 0; padding: 0; background: transparent; z-index: 10; display: flex; align-items: center; min-height: 100vh; }
        #editorial .ed-grid{ display:grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px; align-items: center; width: 100%; }
        @media (max-width: 1024px){ 
            #editorial .ed-sticky-wrap{ height: auto; }
            #editorial .ed-sticky{ position: static; padding: 24px 0 0; }
            #editorial .ed-grid{ grid-template-columns: 1fr; min-height: auto; }
        }
        #editorial .ed-head{ margin-bottom: var(--space-24); }
        #editorial .ed-head .section-title{ font-size: clamp(34px,5vw,48px); margin-bottom: 12px; text-align: left; background: none; -webkit-text-fill-color: #fff; }
        #editorial .ed-head .section-subtitle{ text-align: left; font-size: 16px; }
        #editorial .ed-copy{ position: relative; min-height: 640px; }
        #editorial .ed-pane{
            position: absolute;
            top: var(--pane-top, 120px);
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transform: translateY(20px) scale(0.97);
            /* FADE-OUT: Schnell raus (200ms) */
            transition: opacity 0.2s ease-out,
                        transform 0.2s ease-out;
            pointer-events: none;
        }
        #editorial .ed-pane.is-active{
            opacity: 1;
            transform: translateY(0) scale(1);
            /* FADE-IN: Verzögert (210ms delay = 30% kürzer) + smooth (400ms) */
            /* Erscheint NACH den Karten (Karten: 380ms) */
            transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.21s,
                        transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.21s;
            pointer-events: auto;
        }
        #editorial .ed-pane .kicker{ color: var(--text-3); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
        #editorial .ed-pane h3{ font-size: 36px; margin-bottom: 12px; }
        #editorial .ed-pane .price{ color: var(--text-3); font-size: 18px; margin: 8px 0 16px; }
        #editorial .ed-pane p{ color: var(--text-4); line-height: 1.8; font-size: 20px; }
        #editorial .ed-pane ul{ margin: 16px 0 0; padding-left: 1.2em; color: var(--text-3); font-size: 18px; }
        #editorial .ed-pane li{ margin: 8px 0; }

        /* CTA Layer - absolut positioniert unter allen Panes */
        #editorial .ed-cta-layer{
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            pointer-events: none;
            /* KEIN parent opacity/transform! */
        }
        #editorial .ed-cta-btn{
            display: none; /* Hidden by default */
            padding: 14px 28px;
            background: linear-gradient(135deg, var(--brand-red-light), var(--brand-red));
            color: #fff;
            text-decoration: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.01em;
            pointer-events: auto;
            /* KEINE Transitions */
            transition: none !important;
        }
        #editorial .ed-cta-btn.active{
            display: inline-block; /* Show only active */
        }
        #editorial .ed-cta-btn:hover{
            opacity: 0.9;
            background: linear-gradient(135deg, var(--brand-red), #b91c1c);
        }
        #editorial .ed-cta-btn:active{
            opacity: 0.8;
        }

        /* Coverflow */
        .cf{ position:relative; height: 420px; perspective: 1000px; }
        @media (max-width: 640px){ .cf{ height: 340px; } }
        .cf-stage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events: none; transform: translateX(56px); }
        .cf-card{ position:absolute; width: 280px; height: 380px; border-radius: 16px; background: linear-gradient(135deg, #181818, #0f0f0f); border:1px solid var(--card-border); box-shadow: 0 30px 70px rgba(0,0,0,0.45); overflow:hidden; transition: transform .38s cubic-bezier(0.22,1,0.36,1), filter .38s cubic-bezier(0.22,1,0.36,1), opacity .3s ease, box-shadow .38s ease; will-change: transform, filter, opacity; }
        /* Keep cards visible throughout sticky; no exit fade */
        .cf-card::after{ content: attr(data-label); position:absolute; left:12px; bottom:12px; font-size: 14px; color:#ddd; letter-spacing:.02em; opacity:.9; z-index: 2; pointer-events: none; }
        /* label positions per card */
        .cf-card.smm::after{ left:50%; bottom:12px; top:auto; transform: translateX(-50%); text-align:center; }
        .cf-card.advertising::after{ left:auto; right:12px; bottom:12px; text-align:right; }
        /* hover glow via shadows only (no ring to avoid artifacts) */
        .cf-card.active{ box-shadow: 0 36px 80px rgba(239,68,68,0.22), 0 0 0 2px rgba(239,68,68,0.40), 0 0 36px rgba(251,146,60,0.22); }
        .cf-card .ph{ position:absolute; inset:0; background: radial-gradient(120% 120% at 60% -10%, rgba(251,146,60,0.14), transparent 60%), linear-gradient(135deg, #171717, #101010); }
        .cf-card .art{ position:absolute; inset:0; width:100%; height:100%; object-fit: cover; border-radius: 16px; opacity:.95; }
        .cf-card.content .ph{ background: linear-gradient(135deg, #141414, #0f0f0f); }
        .cf-card.smm .ph{ background: radial-gradient(160% 120% at 50% -10%, rgba(239,68,68,0.10), transparent 60%), linear-gradient(135deg, #121212, #0f0f0f); }
        .cf-card.advertising .ph{ background: repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 6px, transparent 6px 12px), linear-gradient(135deg, #141414, #0e0e0e); }
        .cf-glow{ display:none; }
        .cf-ctrl{ display:none; }
        .cf-btn{ display:none; }

        /* Neighbor reveal helpers (smooth but subtle) */
        #partners, #services { will-change: transform, opacity; transition: transform .35s cubic-bezier(0.22,1,0.36,1), opacity .35s ease; }
        
        #editorial .ed-head{ margin-bottom: var(--space-24); }
        
        /* Metric ticker */
        .mt{ margin-top: 18px; display: none; gap:22px; color:#fff; justify-content:flex-start; flex-wrap:wrap; }
        .mt .k{ background: rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:12px; padding:10px 14px; }
        .mt .n{ font-weight:800; font-size: 22px; }
        .mt .l{ color: var(--text-4); font-size: 12px; }

        

        /* Unified Showcase (all concepts in one block) */
        #unified { position: relative; }
        #unified .grid { display:grid; grid-template-columns: 1fr; gap: 40px; }
        @media (min-width: 1024px){ #unified .grid { grid-template-columns: 1.1fr 0.9fr; } }

        /* A) Triptych Switcher */
        #unified .tri { background: rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius: 18px; padding: 18px; }
        #unified .tri-tabs { display:flex; gap:10px; justify-content:center; margin-bottom:12px; flex-wrap:wrap; }
        #unified .tri-tab { padding:8px 14px; border-radius:999px; border:1px solid var(--card-border); background: rgba(255,255,255,0.04); color: var(--text-3); cursor:pointer; transition:.2s; user-select:none; }
        #unified .tri-tab[aria-selected="true"]{ color:#fff; background: rgba(255,255,255,0.08); border-color: rgba(220,38,38,0.35); }
        #unified .tri-stage { display:grid; grid-template-columns: 1fr; gap:14px; align-items:center; justify-items:center; }
        #unified .tri-copy { text-align:center; color: var(--text-4); }
        #unified .u-phone { position:relative; width:min(420px, 86vw); aspect-ratio: 9/19.5; border-radius: 34px; border:1px solid var(--card-border); background: #0d0d0d; box-shadow: 0 30px 80px rgba(0,0,0,0.45); overflow:hidden; filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.4)) drop-shadow(0 0 16px rgba(251, 146, 60, 0.2)); }
        #unified .u-phone::before{ content:''; position:absolute; inset:0; border-radius: 34px; padding:1px; background: linear-gradient(135deg, rgba(251,146,60,0.5), rgba(251,146,60,0.25)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.28; }
        #unified .u-phone::after{ content:''; position:absolute; top:10px; left:50%; transform:translateX(-50%); width:120px; height:32px; background:#000; border-radius:20px; z-index:100; }
        #unified .u-screen{ position:absolute; inset:10px; border-radius: 26px; overflow:hidden; background: radial-gradient(120% 120% at 70% -20%, rgba(251,146,60,0.12), rgba(239,68,68,0.08) 40%, transparent 70%); }
        #unified .u-feed{ position:absolute; inset:0; overflow:hidden; }
        #unified .u-tape{ position:absolute; left:0; right:0; display:flex; flex-direction:column; gap: 12px; padding: 12px; }
        #unified .u-tape.t1{ top:0; animation: uFeedUp 32s linear infinite; }
        #unified .u-tape.t2{ top:100%; animation: uFeedUp 32s linear infinite; }
        #unified .u-card{ height: 88px; border-radius: 14px; background: rgba(255,255,255,0.05); border:1px solid var(--card-border); }
        #unified .u-card.big{ height: 150px; }
        @keyframes uFeedUp { from { transform: translateY(0);} to { transform: translateY(-100%);} }
        #unified .u-photo-grid{ position:absolute; inset:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
        #unified .u-ph{ border-radius:12px; background: linear-gradient(135deg, #1a1a1a, #111); border:1px solid var(--card-border); }
        #unified .u-ad{ position:absolute; inset:16px; border-radius:14px; background: rgba(255,255,255,0.04); border:1px dashed rgba(220,38,38,0.45); display:grid; place-items:center; color:#fff; letter-spacing:.02em; }

        /* B) Storyboard Strip */
        #unified .strip { background: rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius: 18px; padding: 14px; overflow:hidden; }
        #unified .strip-track{ display:flex; gap:12px; will-change: transform; animation: stripPan 28s linear infinite; }
        @keyframes stripPan { from { transform: translateX(0);} to { transform: translateX(-50%);} }
        #unified .panel{ flex:0 0 220px; aspect-ratio: 16/10; border-radius: 14px; background: linear-gradient(135deg, #151515, #0f0f0f); border:1px solid var(--card-border); }
        #unified .panel.big{ flex-basis: 300px; }

        /* C) Unified Pipeline Canvas */
        #unified .pipe { position:relative; background: rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius: 18px; padding: 22px; overflow:hidden; }
        #unified .lines{ position:relative; height:120px; }
        #unified .lane{ position:absolute; left:4%; right:30%; height:2px; background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(251,146,60,0.35)); top:24px; }
        #unified .lane:nth-child(2){ top:60px; }
        #unified .lane:nth-child(3){ top:96px; }
        #unified .node{ position:absolute; width:8px; height:8px; border-radius:50%; background: #fff; top:-3px; box-shadow: 0 0 12px rgba(239,68,68,0.55); transform: translateX(0); opacity:.0; }
        #unified .lane .node.hit{ opacity:1; }
        #unified .result{ position:absolute; right:4%; top:18px; bottom:18px; width:28%; border-radius:14px; border:1px solid var(--card-border); background: rgba(255,255,255,0.04); display:grid; place-items:center; text-align:center; padding:12px; color:#fff; }

        /* D) Collage Showcase */
        #unified .collage { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        #unified .c-item{ aspect-ratio: 4/3; border-radius:14px; background: linear-gradient(135deg, #181818, #0f0f0f); border:1px solid var(--card-border); }
        #unified .c-item:nth-child(1), #unified .c-item:nth-child(4){ background: radial-gradient(800px 400px at 70% 20%, rgba(251,146,60,0.16), transparent 60%), linear-gradient(135deg, #161616, #0e0e0e); }

        /* Partners marquee (right-to-left) */
        #partners .marquee {
            position: relative;
            overflow: hidden;
            margin-top: 40px;
            mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
        }
        #partners .track {
            display: flex;
            gap: 80px;
            width: max-content;
            align-items: center;
            animation: brandsLeft 20s linear infinite;
        }
        #partners .logo-img {
            height: 80px;
            width: auto;
            max-width: 200px;
            object-fit: contain;
            filter: grayscale(1) brightness(0.7);
            transition: filter 0.3s ease;
        }
        #partners .logo-img:hover {
            filter: grayscale(0) brightness(1);
        }
        
        /* Spezifische Anpassung für das Hoch2-Logo, da es optisch größer wirkt */
        #partners .logo-img[src*="Hoch2"] {
            height: 50px; /* Kleiner als die Standard-80px */
            margin: 15px 0; /* Vertikal zentrieren durch Margin */
        }

        @keyframes brandsLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        /* Responsive tweaks for new sections */
        @media (max-width: 1024px) {
            #smm .cap-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            #smm .cap-grid { grid-template-columns: 1fr; }
        }

        /* Scroll animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Service cards: stronger entrance + stagger */
        .service-card.fade-in {
            opacity: 0;
            transform: translateY(50px) scale(0.96);
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
        }
        .service-card.fade-in.visible {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        /* Stagger per card */
        .services-grid .service-card:nth-child(1) { transition-delay: 0s; }
        .services-grid .service-card:nth-child(2) { transition-delay: .06s; }
        .services-grid .service-card:nth-child(3) { transition-delay: .12s; }
        .services-grid .service-card:nth-child(4) { transition-delay: .18s; }
        .services-grid .service-card:nth-child(5) { transition-delay: .24s; }
        .services-grid .service-card:nth-child(6) { transition-delay: .30s; }
        
        /* Responsive */
        @media (max-width: 1024px) {
            .services-grid { grid-template-columns: repeat(2, 1fr); }
            .pricing-grid { grid-template-columns: repeat(2, 1fr); }
            .contact-container { grid-template-columns: 1fr; }
            .footer-content { grid-template-columns: 1fr 1fr; }
        }
        
        @media (max-width: 768px) {
            .hero-title { font-size: 56px; }
            .section-title { font-size: 40px; }
            .services-grid, .footer-content, .pricing-grid { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            /* Padding handled by CSS variables */
            .tile { width: 150px; height: 100px; }
        }

        /* Respect reduced motion preferences */
        @media (prefers-reduced-motion: reduce) {
            .hero { animation: none; }
            .glow { animation: none !important; }
            .hero-noise { opacity: 0.02; }
            .fade-in { transition: none; transform: none; opacity: 1; }
        }

        /* FINAL OVERRIDE: Fixe Positionierung der SMM-Textblöcke links/rechts */
        #smm .content-slide .slide-text{ left:auto !important; right:auto !important; }
        /* 1,3,5 = links (weiter nach LINKS – raus aus der Handyzone) */
        #smm .content-slides > .content-slide:nth-child(1) .slide-text,
        #smm .content-slides > .content-slide:nth-child(3) .slide-text,
        #smm .content-slides > .content-slide:nth-child(5) .slide-text{
            left: auto !important;
            /* Setze die rechte Kante in Abstand zur Handy-Mitte (50% + half phone + gap) */
            right: calc(50% + 230px) !important; /* Gleiches Spacing wie rechts */
            width: clamp(430px, 30vw, 560px) !important;
        }
        /* 2,4 = rechts (weiter nach rechts – weg vom Handy) */
        #smm .content-slides > .content-slide:nth-child(2) .slide-text,
        #smm .content-slides > .content-slide:nth-child(4) .slide-text{
            left: calc(50% + 230px) !important; /* Gleicher Abstand wie links (vorher 380px)! */
            width: clamp(430px, 30vw, 560px) !important; /* Gleiche Breite wie links */
        }

        /* ====================================
           CAMERA VIEWFINDER INTERFACE
           Professional Photo & Video Production
           ==================================== */
        #content-production {
            position: relative;
            min-height: 600vh;
            background: transparent;
            padding: var(--section-spacing) 0 15vh;
        }

        .camera-viewfinder {
            position: sticky;
            top: 10vh;
            height: 85vh;
            max-width: 1600px;
            margin: 0 auto;
            padding: 0 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        /* Header */
        .camera-header {
            text-align: center;
            margin-bottom: 50px;
            padding: 0 20px;
            opacity: 0;
            animation: fadeIn 0.8s ease 0.2s forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        .camera-header .eyebrow {
            font-size: 12px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--brand-orange);
            font-weight: 700;
            margin-bottom: 12px;
        }

        .camera-header h2 {
            font-size: clamp(28px, 4.5vw, 48px);
            font-weight: 900;
            background: linear-gradient(135deg, #fff 0%, var(--text-2) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            letter-spacing: -0.02em;
        }

        .camera-header p {
            font-size: 16px;
            color: var(--text-3);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* Camera Body Wrapper - optimale Größe */
        .camera-body-wrapper {
            position: relative;
            width: 100%;
            max-width: 1150px;
            margin: 0 auto;
            aspect-ratio: 3000 / 2170;
        }

        /* Einfaches Camera Frame SVG - liegt ÜBER dem Screen wie ein Rahmen */
        .camera-wireframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.4))
                    drop-shadow(0 0 16px rgba(220, 38, 38, 0.2));
        }

        .cam-outline {
            stroke: var(--brand-red);
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .cam-button {
            stroke: rgba(220, 38, 38, 0.7);
            stroke-width: 1.5;
            fill: none;
        }

        .cam-shutter {
            stroke: var(--brand-red);
            stroke-width: 1.5;
            fill: rgba(220, 38, 38, 0.15);
        }

        /* Camera Screen - liegt HINTER dem Wireframe */
        .camera-screen {
            position: absolute;
            --cp-grow-percent: 0.010;           /* ~1.0% größer */
            --cp-corner-adjust: -1px;           /* leicht weniger Rundung */
            --cp-radius-base-pct: 0.05;         /* 5% Basisradius statt 6% */
            --cp-radius-inset-factor: 0.45;     /* Einfluss des Stroke-Insets auf Radius */
            /* Position/Größe werden per JS in Pixeln gesetzt (BBox des SVG-Displays) */
            aspect-ratio: 16 / 9;
            background: #000;
            border: 3px solid rgba(255,255,255,0.08);
            border-radius: 6%; /* 6% Eckenradius wie Vorgabe */
            overflow: hidden;
            box-shadow:
                0 30px 80px rgba(0,0,0,0.6),
                inset 0 0 0 1px rgba(255,255,255,0.03);
            z-index: 1;
            /* DEBUG: Temporäre Hilfslinien */
            /* outline: 2px dashed lime; outline-offset: -2px; */
        }

        /* Video Background */
        .camera-video-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.3;
            filter: blur(1px) grayscale(0.5);
            z-index: 1;
        }

        /* Dark Overlay */
        .camera-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 50%, rgba(0,0,0,0.4), rgba(0,0,0,0.8) 80%);
            z-index: 2;
        }

        /* Camera Grid (Rule of Thirds) */
        .camera-grid {
            position: absolute;
            inset: 0;
            pointer-events: none;
            opacity: 0.12;
            z-index: 3;
        }

        .camera-grid::before,
        .camera-grid::after {
            content: '';
            position: absolute;
            background: rgba(255,255,255,0.4);
        }

        .camera-grid::before {
            left: 33.33%;
            top: 0;
            bottom: 0;
            width: 1px;
            box-shadow: calc(33.33% * 2) 0 0 rgba(255,255,255,0.4);
        }

        .camera-grid::after {
            top: 33.33%;
            left: 0;
            right: 0;
            height: 1px;
            box-shadow: 0 calc(33.33% * 2) 0 rgba(255,255,255,0.4);
        }

        /* Production Cards Container */
        .production-cards {
            position: absolute;
            inset: 0;
            z-index: 5;
        }

        /* Individual Production Card (Fullscreen) */
        .production-card {
            position: absolute;
            inset: 0;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
                        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }

        .production-card.active {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        /* Card Content Overlay */
        .card-content {
            position: absolute;
            top: 8%;
            left: 50%;
            transform: translateX(-50%);
            text-align: center;
            max-width: 700px;
            width: calc(100% - 80px);
            padding: 30px 50px;
            background: transparent;
            backdrop-filter: none;
            border-radius: 0;
            border: none;
            z-index: 10;
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .card-content .step-number {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            color: var(--brand-orange);
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: 2.5px;
            text-shadow: 0 0 20px rgba(251, 146, 60, 0.6);
        }

        .card-content .step-title {
            font-size: clamp(32px, 5vw, 52px);
            font-weight: 700;
            color: #fff;
            margin: 0 0 16px;
            letter-spacing: -0.01em;
            text-shadow: 0 4px 20px rgba(0,0,0,0.8);
        }

        .card-content .step-desc {
            font-size: clamp(18px, 2.2vw, 24px);
            line-height: 1.65;
            color: var(--text-2);
            margin: 0;
            text-shadow: 0 2px 10px rgba(0,0,0,0.8);
        }

        /* Production Step Indicators (horizontal row) - OUTSIDE camera screen */
        .production-steps {
            display: none;
            gap: 12px;
            justify-content: center;
            margin-top: 30px;
            z-index: 25;
        }

        .step-indicator {
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            font-family: 'Courier New', monospace;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

        .step-indicator.active {
            background: rgba(251, 146, 60, 0.15);
            border-color: rgba(251, 146, 60, 0.4);
            color: var(--brand-orange);
            box-shadow: 0 0 20px rgba(251, 146, 60, 0.3);
        }

        /* Camera Settings HUD (Bottom Left) - includes F-Stop */
        .camera-settings {
            position: absolute;
            bottom: 30px;
            left: 30px;
            display: flex;
            gap: 16px;
            z-index: 20;
        }

        .setting-item {
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px);
            padding: 8px 14px;
            border-radius: 6px;
            border: 1px solid rgba(255,255,255,0.1);
            min-width: 80px;
        }

        .setting-label {
            font-size: 9px;
            color: rgba(255,255,255,0.5);
            margin-bottom: 3px;
            font-weight: 600;
            letter-spacing: 0.8px;
        }

        .setting-value {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            font-weight: 700;
            color: var(--brand-orange);
        }

        /* Camera Settings (Bottom) */
        .camera-settings {
            position: absolute;
            bottom: 30px;
            left: 30px;
            display: flex;
            gap: 18px;
            z-index: 20;
        }

        .setting-item {
            background: rgba(0,0,0,0.8);
            border: 1px solid rgba(251, 146, 60, 0.3);
            border-radius: 6px;
            padding: 8px 16px;
            backdrop-filter: blur(10px);
            min-width: 85px;
        }

        .setting-label {
            font-size: 9px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-4);
            margin-bottom: 3px;
        }

        .setting-value {
            font-family: 'Courier New', monospace;
            font-size: 13px;
            font-weight: 700;
            color: var(--brand-orange);
        }

        /* Mobile Responsive */
        @media (max-width: 1024px) {
            .camera-body-wrapper {
                max-width: 95vw;
            }

            .camera-screen {
                /* Maintain proportions on mobile */
                left: 14.6%;
                top: 42.0%;
                width: 52.4%;
                height: 46.2%;
            }

            .card-content {
                padding: 30px 40px;
                top: 10%;
                bottom: auto;
            }

            .card-content .step-title {
                font-size: clamp(28px, 4vw, 40px);
            }

            .card-content .step-desc {
                font-size: clamp(14px, 1.8vw, 18px);
            }

            .production-steps {
                margin-top: 20px;
                gap: 10px;
            }

            .step-indicator {
                padding: 10px 18px;
                font-size: 10px;
            }
        }

        @media (max-width: 768px) {
            #content-production {
                min-height: auto;
                padding: 60px 0;
            }

            .camera-viewfinder {
                position: static;
                height: auto;
                padding: 0 20px;
            }

            .camera-body-wrapper {
                max-width: 100%;
            }

            .camera-screen {
                /* Keep realistic positioning on small screens */
                left: 14.6%;
                top: 42.0%;
                width: 52.4%;
                height: 46.2%;
            }

            .production-steps {
                margin-top: 15px;
                gap: 8px;
            }

            .step-indicator {
                padding: 10px 16px;
                font-size: 10px;
            }

            .card-content {
                padding: 25px 30px;
                top: 10%;
                bottom: auto;
                width: calc(100% - 40px);
            }

            .camera-settings {
                bottom: 20px;
                left: 20px;
                gap: 8px;
                flex-wrap: wrap;
            }

            .setting-item {
                padding: 8px 12px;
            }

            .setting-value {
                font-size: 14px;
            }
        }

        /* Reduced Motion */
        @media (prefers-reduced-motion: reduce) {
            .production-card {
                transition: none !important;
                animation: none !important;
            }
        }

        /* --- VARIAD CUSTOM COOKIE BANNER (Total Replacement) --- */
        
        /* 1. Permanent Hide Native Klaro Notice Leiste */
        .klaro .cookie-notice, 
        .klaro .cn-notice {
            display: none !important;
        }

        /* Powered by (Verschoben nach Rechts) */
        .klaro .cm-powered-by {
            display: block !important;
            padding: 10px 0 !important;
            margin-left: 15px !important;
            opacity: 0.3 !important;
            transition: opacity 0.2s ease !important;
        }
        .klaro .cm-powered-by:hover { opacity: 0.6 !important; }
        .klaro .cm-powered-by a {
            color: #fff !important;
            font-size: 10px !important;
            text-decoration: none !important;
        }
        /* Sicherstellen, dass das Modal (Einstellungsfenster) sichtbar sein darf */
        .klaro .cookie-modal,
        .klaro .cm-modal {
            display: block !important;
        }

        /* --- KLARO MODAL DESIGN (VARIAD STYLE REFINED) --- */
        .klaro .cookie-modal {
            background-color: rgba(0, 0, 0, 0.8) !important;
            backdrop-filter: blur(12px) !important;
            -webkit-backdrop-filter: blur(12px) !important;
            font-family: 'Inter', sans-serif !important;
        }

        .klaro .cm-modal {
            background-color: #000000 !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 24px !important;
            box-shadow: 0 30px 80px rgba(0,0,0,0.9) !important;
            max-width: 550px !important;
            overflow: hidden !important;
            font-family: 'Inter', sans-serif !important;
        }

        .klaro .cm-header {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            padding: 30px !important;
        }

        .klaro .cm-header h1 {
            color: #fff !important;
            font-size: 24px !important;
            font-weight: 800 !important;
            margin: 0 !important;
        }

        .klaro .cm-body {
            padding: 20px 30px !important;
            background: transparent !important;
        }

        .klaro .cm-service {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            padding: 20px 0 !important;
        }

        .klaro .cm-service-title {
            color: #fff !important;
            font-weight: 700 !important;
            font-size: 17px !important;
        }

        .klaro .cm-service-description {
            color: #a3a3a3 !important;
            font-size: 14.5px !important;
            line-height: 1.6 !important;
            margin-top: 5px !important;
        }

        /* Toggle / Schalter */
        .klaro .switch .slider {
            background-color: #222 !important;
        }

        .klaro .switch input:checked + .slider {
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%) !important;
        }
        
        /* Häkchen Farbe (falls Checkbox) */
        .klaro input[type="checkbox"]:checked {
            accent-color: var(--brand-red) !important;
        }

        /* Modal Buttons (Footer) - ABSOLUTE SYMMETRY */
        .klaro .cm-footer {
            border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
            padding: 25px 30px !important;
            background: #000 !important;
            display: flex !important;
            flex-direction: row !important;
            justify-content: flex-end !important;
            gap: 15px !important;
        }

        /* Verstecke den 'Alle akzeptieren' Button permanent */
        .klaro .cm-btn.cm-btn-accept-all,
        .klaro .cm-btn.cm-btn-success:not(.cm-btn-accept) {
            display: none !important;
        }

        /* BEIDE BUTTONS EXAKT GLEICH STYLEN - FORCE EQUALITY */
        .klaro .cm-btn.cm-btn-info,
        .klaro .cm-btn.cm-btn-accept,
        .klaro .cm-btn.cm-btn-decline,
        .klaro .cm-btn.cm-btn-danger,
        .klaro .cm-footer .cm-btn {
            /* Form & Maße */
            height: 48px !important;
            min-width: 150px !important;
            border-radius: 10px !important;
            padding: 0 25px !important;
            
            /* Typografie (Zwingend 14px für beide!) */
            font-family: 'Inter', sans-serif !important;
            font-size: 14px !important;
            line-height: 1 !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            
            /* Rahmen & Hintergrund */
            background-color: transparent !important;
            border: 1px solid #ffffff !important;
            box-shadow: none !important;
            
            /* Verhalten */
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            transition: all 0.2s ease !important;
            flex-shrink: 0 !important;
        }

        /* Hover Effekt (auch für beide gleich) */
        .klaro .cm-btn.cm-btn-info:hover,
        .klaro .cm-btn.cm-btn-accept:hover,
        .klaro .cm-btn.cm-btn-decline:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
            border-color: #ffffff !important;
            color: #ffffff !important;
        }

        /* 2. Custom Banner Design */
        #variad-cookie-banner {
            display: none; /* Controlled by JS */
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            width: 100% !important;
            background-color: #000000 !important;
            /* Kompakterer Schatten */
            box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.8) !important;
            padding: 20px 6% 40px 6% !important; /* 20px oben, 40px unten */
            z-index: 2147483647 !important;
            box-sizing: border-box !important;
            border-top: none !important;
        }

        /* Der weiche Verlauf (Outfade) - Noch kürzer */
        #variad-cookie-banner::before {
            content: "" !important;
            position: absolute !important;
            top: -40px !important; /* Nur noch 40px Übergang */
            left: 0 !important;
            right: 0 !important;
            height: 40px !important;
            background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,1) 100%) !important;
            pointer-events: none !important;
        }

        #variad-cookie-banner.is-visible {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
        }

        /* Text Side */
        #variad-cookie-banner .text-side {
            flex: 1 !important;
            padding-right: 60px !important;
        }

        #variad-cookie-banner .text-side p {
            color: #ffffff !important;
            font-size: clamp(24px, 3.5vw, 40px) !important;
            font-weight: 800 !important;
            line-height: 1.1 !important;
            margin: 0 !important;
            letter-spacing: -0.02em !important;
        }

        /* Action Side (Stack) */
        #variad-cookie-banner .action-side {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            gap: 15px !important;
            min-width: 320px !important;
        }

        /* Accept Button (Primary) */
        .v-btn-accept {
            background: linear-gradient(135deg, var(--brand-red) 0%, var(--brand-red-light) 100%) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 12px !important;
            padding: 20px 50px !important;
            font-size: 20px !important;
            font-weight: 800 !important;
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4) !important;
            cursor: pointer !important;
            width: 100% !important;
            text-align: center !important;
            transition: transform 0.2s ease !important;
        }

        /* Decline Button (Outline) - Schmaler, volle Breite, dezente Schrift */
        .v-btn-decline {
            background-color: #000000 !important;
            color: #ffffff !important;
            border: 1px solid #ffffff !important; /* Nur noch 1px dick */
            box-shadow: inset 0 0 0 1px #ffffff !important; /* Nur noch 1px dick */
            border-radius: 12px !important;
            padding: 8px 40px !important; /* Deutlich schmaler in der Höhe */
            font-size: 14px !important; /* Kleinere Schrift */
            font-weight: 500 !important; /* Nicht fett */
            text-transform: uppercase !important;
            letter-spacing: 1px !important;
            cursor: pointer !important;
            width: 100% !important; /* Bleibt lang (volle Breite) */
            text-align: center !important;
            box-sizing: border-box !important;
            transition: all 0.2s ease !important;
            text-decoration: none !important;
            outline: none !important;
        }

        .v-btn-accept:hover, .v-btn-decline:hover {
            transform: translateY(-3px) !important;
        }
        
        .v-btn-decline:hover {
            background-color: rgba(255,255,255,0.1) !important;
        }

        /* Settings Link (Linksbündig unter dem Text) */
        #v-open-settings {
            display: inline-block !important;
            color: rgba(255, 255, 255, 0.5) !important;
            font-size: 16px !important;
            font-weight: 600 !important;
            text-decoration: underline !important;
            text-underline-offset: 4px !important;
            cursor: pointer !important;
            margin-top: 15px !important;
            transition: color 0.2s ease !important;
        }

        #v-open-settings:hover {
            color: #ffffff !important;
        }

        /* Mobile */
        @media (max-width: 900px) {
            #variad-cookie-banner.is-visible {
                flex-direction: column !important;
                padding: 40px 30px !important;
                gap: 30px !important;
                text-align: center !important;
            }
            #variad-cookie-banner .text-side {
                padding-right: 0 !important;
            }
            #variad-cookie-banner .text-side p {
                font-size: 28px !important;
            }
            #variad-cookie-banner .action-side {
                width: 100% !important;
                align-items: center !important;
            }
        }