@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');
        
        @font-face {
            font-family: 'DatatypeLocal';
            src: url('../fonts/static/Datatype-Regular.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'DatatypeLocal';
            src: url('../fonts/static/Datatype-Medium.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --bg: #f4f2ed; 
            --fg: #000000;
            --orbital-gray: #888888;
            --slot-h: 40px; 
        }

        html.inverted { 
            --bg: #0b0d12; 
            --fg: #f4f2ed;
            background-color: #0b0d12 !important; 
        }

        html { 
            background-color: #f4f2ed !important; 
            min-height: 100%; width: 100%; overflow-x: hidden; overflow-y: auto;
            scrollbar-width: none; transition: background-color 5s cubic-bezier(0.19, 1, 0.22, 1);
        }
        html::-webkit-scrollbar { display: none; }
        
        html.lenis { height: auto; }
        .lenis.lenis-smooth { scroll-behavior: auto; }
        .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
        .lenis.lenis-stopped { overflow: hidden; }
        
        body { 
            margin: 0; padding: 0; width: 100%; min-height: 100vh; 
            user-select: none; touch-action: auto; cursor: none; 
            background-color: transparent !important; -webkit-tap-highlight-color: transparent; 
            display: flex; flex-direction: column;
        }

        #transition-shield {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--bg); z-index: 12000000; pointer-events: none; opacity: 1;
            transition: opacity 1.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        #ui-layer, #content-layer, .split-right, #main-footer { filter: url(#liquid-filter); }
        .ui-text-style { font-family: 'Outfit', sans-serif; color: var(--fg); transition: color 1.5s ease; }

        #edge-scanner {
            position: fixed; right: 40px; bottom: 40px; height: 250px; width: 120px;
            z-index: 9999999; cursor: pointer; opacity: 0; visibility: hidden;
            transition: opacity 0.8s ease, visibility 0.8s;
            mix-blend-mode: difference; color: #fff; pointer-events: auto;
        }
        #edge-scanner.visible { opacity: 1; visibility: visible; }
        .es-track { position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #fff; opacity: 0.3; }
        .es-fill { position: absolute; right: -1px; top: 0; width: 3px; height: 0%; background-color: #fff; transition: height 0.1s linear; }
        .es-data { position: absolute; right: 15px; top: 0%; transform: translateY(-50%); font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: #fff; transition: opacity 0.3s ease, transform 0.4s ease, top 0.1s linear; display: flex; align-items: baseline; gap: 2px; pointer-events: none; }
        .es-data::before { content: ''; position: absolute; right: -15px; top: 50%; width: 10px; height: 1px; background-color: #fff; }
        .es-value { font-weight: 600; width: 28px; text-align: right; display: inline-block; letter-spacing: 1px; }
        .es-sym { font-size: 10px; }
        .es-action { position: absolute; right: 0; top: 50%; width: 100%; transform: translateY(-50%) translateX(20px); font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600; color: #000; background-color: #fff; padding: 10px 0; text-align: center; letter-spacing: 2px; opacity: 0; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); white-space: nowrap; border: 1px solid #fff; pointer-events: none; }
        #edge-scanner:hover .es-data { opacity: 0; transform: translateY(-50%) translateX(-20px); }
        #edge-scanner:hover .es-action { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }

        #ui-layer { 
            position: fixed; top: 0; left: 0; z-index: 2000000; 
            width: 100%; padding: 30px; box-sizing: border-box; 
            display: flex; justify-content: space-between; align-items: flex-start;
            background-color: transparent !important; pointer-events: none; 
            transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
        }
        
        #logo-container, #nav-wrapper { pointer-events: auto; }

        .header-mask { height: var(--slot-h); overflow: hidden; position: relative; }
        .header-track { display: flex; flex-direction: column; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); will-change: transform; }
        .header-slot { height: var(--slot-h); display: flex; align-items: center; flex-shrink: 0; width: 100%; }
        .slot-right { justify-content: flex-end; }

        #logo-link { text-decoration: none !important; color: var(--fg) !important; border: none !important; outline: none !important; display: block; height: 100%; }
        
        .logo-text { 
            font-family: 'Outfit', sans-serif; 
            font-size: clamp(26px, 3.5vw, 32px); 
            font-weight: 600; letter-spacing: 1px; color: var(--fg); margin: 0; padding: 2px 0; line-height: 1; 
            text-decoration: none !important; border: none !important;
            display: inline-block;
            white-space: nowrap; 
            transition: color 0.5s ease;
        }

        #nav-wrapper { display: flex; align-items: center; justify-content: flex-end; min-width: 350px; }
        
        #desktop-menu { display: flex; flex-wrap: nowrap; white-space: nowrap; gap: 20px; list-style: none; margin: 0; padding: 0; align-items: center; }
        
        .nav-link {
            text-decoration: none; color: var(--fg); font-family: 'DatatypeLocal', 'Courier New', monospace;
            font-size: clamp(14.5px, 1.22vw, 19px); font-weight: 500; line-height: 1.22; letter-spacing: 0.015em; text-transform: uppercase; padding: 2px 10px;
            position: relative; display: inline-block; overflow: hidden; transition: color 0.5s ease !important;
        }
        .nav-link:hover { background: transparent !important; color: var(--fg) !important; }
        .nav-cta {
            background: var(--fg) !important;
            color: var(--bg) !important;
            padding-inline: 12px;
        }
        .nav-cta:hover {
            background: var(--fg) !important;
            color: var(--bg) !important;
        }
        .nav-link::after, .footer-link::after, .fs-link::after {
            content: "";
            position: absolute;
            left: -0.72em;
            top: 50%;
            width: 0.62em;
            height: 1.04em;
            background: currentColor;
            transform: translate3d(0, -50%, 0);
            opacity: 0;
            pointer-events: none;
        }
        .nav-link:hover::after, .footer-link:hover::after, .fs-link:hover::after {
            animation: navCursorSweep 0.78s steps(12, end) forwards, navCursorPulse 0.78s step-end infinite;
        }

        #burger-menu { width: 45px; height: 14px; display: flex !important; flex-direction: column; justify-content: space-between; align-items: flex-end; cursor: pointer; }
        .b-line { height: 2px; background-color: var(--fg); transition: width 0.4s ease, transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.5s ease; }
        .l1 { width: 100%; }
        .l2 { width: 50%; } 
        #burger-menu:hover .l2 { width: 100%; }

        #ui-layer.scrolled .header-track { transform: translateY(calc(var(--slot-h) * -1)); }

        #fullscreen-nav {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: var(--fg); z-index: 1999999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4vh;
            opacity: 0; pointer-events: none; transition: opacity 0.6s ease;
        }
        
        #ui-layer.menu-open + #fullscreen-nav { opacity: 1; pointer-events: auto; }
        #ui-layer.menu-open .logo-text, #ui-layer.menu-open .nav-link { color: var(--bg) !important; }
        #ui-layer.menu-open .b-line { background-color: var(--bg) !important; }
        
        #ui-layer.menu-open #burger-menu { justify-content: center; height: 2px; }
        #ui-layer.menu-open .l1 { transform: translateY(1px) rotate(45deg); width: 100%; }
        #ui-layer.menu-open .l2 { transform: translateY(-1px) rotate(-45deg); width: 100%; }

        .fs-link {
            font-family: 'DatatypeLocal', 'Courier New', monospace; font-size: clamp(40px, 8vw, 100px); font-weight: 500; color: var(--bg); 
            text-decoration: none; text-transform: uppercase; letter-spacing: 2px;
            position: relative; overflow: hidden; transform: rotateX(-90deg) translateY(50px); opacity: 0;
            transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.8s ease, color 0.3s ease;
        }
        #ui-layer.menu-open + #fullscreen-nav .fs-link { transform: rotateX(0deg) translateY(0px); opacity: 1; }
        #ui-layer.menu-open + #fullscreen-nav .fs-link:nth-child(1) { transition-delay: 0.1s; }
        #ui-layer.menu-open + #fullscreen-nav .fs-link:nth-child(2) { transition-delay: 0.2s; }
        #ui-layer.menu-open + #fullscreen-nav .fs-link:nth-child(3) { transition-delay: 0.3s; }
        #ui-layer.menu-open + #fullscreen-nav .fs-link:nth-child(4) { transition-delay: 0.4s; }
        .fs-link:hover { color: var(--orbital-gray); }
        .fs-cta {
            background: var(--bg);
            color: var(--fg);
            padding: 0.03em 0.12em;
        }
        .fs-cta:hover { color: var(--fg); }

        .lens-char-wrapper { display: inline-block; transform: translateZ(0); }
        .lens-char { display: inline-block; will-change: transform, opacity; backface-visibility: hidden; }

        #content-layer {
            position: relative;
            margin: 0 auto;
            padding: 0;
            width: clamp(320px, 98vw, 1600px);
            min-height: 100vh;
            min-height: 100svh;
            z-index: 500;
            pointer-events: auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-sizing: border-box;
        }
        
        .section-headline { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5em; margin-bottom: 30px; opacity: 0.4; display: block; }

        .about-text { position: relative; z-index: 2; font-family: 'Outfit', sans-serif; font-size: 100px; font-weight: 500; line-height: 1.1; color: var(--fg); letter-spacing: -0.04em; }

        .split-level { display: flex; width: 100vw; min-height: auto; align-items: center; background-color: transparent; padding: 0 0 clamp(220px, 24vh, 340px); position: relative; z-index: 500; }
        .split-left { width: 50vw; min-height: auto; position: relative; display: flex; justify-content: center; align-items: center; }
        
        .image-warp-container { 
            width: 70%; overflow: hidden; position: relative; background-color: var(--bg); 
            padding: 40px 40px 0 40px; box-sizing: border-box; display: flex; align-items: flex-end; 
            transition: background-color 5s cubic-bezier(0.19, 1, 0.22, 1); 
        }
        
        #real-about-image { 
            width: 100%; height: auto; display: block; margin-bottom: -5px; 
            filter: grayscale(1) brightness(4) url(#quantum-fracture);
            transform: perspective(1000px) scale(1.0) rotateX(15deg) rotateY(-10deg);
            will-change: filter, transform;
        }

        .split-right { 
            width: 50vw; padding: 0 25vw 0 1.5vw; display: flex; flex-direction: column; 
            justify-content: center; gap: 35px; perspective: 1000px; min-height: auto;
        }

        .experimental-text { 
            font-family: 'Outfit', sans-serif; font-size: clamp(16px, 1.2vw, 20px); font-weight: 400; 
            line-height: 1.6; color: var(--fg); margin: 0; 
            opacity: 0; transform: translateY(40px); filter: blur(10px); 
            transition: opacity 2.5s ease, transform 3.5s cubic-bezier(0.19, 1, 0.22, 1), filter 3.5s ease, color 2.0s ease; 
            hyphens: auto; -webkit-hyphens: auto; text-wrap: pretty; max-width: 42ch;
        }
        
        .experimental-text.assembled { opacity: 1; transform: translateY(0); filter: blur(0px); }
        .text-mute { opacity: 0.4; font-weight: 500; transition: opacity 1.5s ease, color 1.5s ease; }

        .split-right > *:nth-child(1) { transition-delay: 0.1s; } 
        .split-right > *:nth-child(2) { transition-delay: 0.3s; } 
        .split-right > *:nth-child(3) { transition-delay: 0.5s; } 
        .split-right > *:nth-child(4) { transition-delay: 0.7s; } 

        #cv-timeline-section {
            position: relative;
            width: 100vw;
            min-height: auto;
            background-color: transparent;
            color: var(--fg);
            z-index: 4000;
            padding: 0 0 clamp(245px, 30vh, 390px);
            margin-top: 0;
            transition: background-color 5s cubic-bezier(0.19, 1, 0.22, 1), color 5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .cv-grid {
            width: min(1530px, 74.4vw);
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(360px, 1fr) minmax(460px, 1.08fr);
            column-gap: clamp(130px, 13.2vw, 250px);
            align-items: start;
        }

        .cv-column {
            display: grid;
            grid-template-columns: 116px 1fr;
            column-gap: 70px;
            align-items: start;
        }

        .cv-number {
            font-size: 26px;
            line-height: 1;
            font-weight: 600;
            letter-spacing: -0.03em;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 1.1s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .cv-title {
            margin: 0 0 54px;
            font-size: 28px;
            line-height: 1;
            font-weight: 500;
            letter-spacing: -0.045em;
            opacity: 0;
            transform: translateY(14px);
            transition: opacity 1.1s cubic-bezier(0.19, 1, 0.22, 1), transform 1.4s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .cv-column.is-visible .cv-number,
        .cv-column.is-visible .cv-title {
            opacity: 1;
            transform: translateY(0);
        }

        .cv-list {
            display: grid;
            gap: 37px;
        }

        .cv-list.is-long {
            gap: 31px;
        }

        .entry {
            max-width: 520px;
            margin: 0;
            font-family: 'DatatypeLocal', 'Courier New', monospace;
            font-size: 18px;
            line-height: 1.22;
            font-weight: 500;
            letter-spacing: 0.015em;
            text-transform: uppercase;
            --type-row: 1.22em;
        }

        .entry .meta,
        .entry .place {
            display: block;
            color: color-mix(in srgb, var(--fg) 36%, transparent);
        }

        .entry .main {
            display: block;
            color: var(--fg);
        }

        .type-line {
            display: block;
            position: relative;
            white-space: normal;
            line-height: inherit;
        }

        .type-full {
            display: block;
            visibility: hidden;
            line-height: inherit;
        }

        .type-visible {
            position: absolute;
            inset: 0 auto auto 0;
            width: 100%;
            display: block;
            line-height: inherit;
            white-space: inherit;
            pointer-events: none;
        }

        .type-cursor {
            position: absolute;
            display: none;
            left: 0;
            top: 0;
            width: 0.62em;
            height: 1.04em;
            transform: translate(0.08em, 0.14em);
            background: currentColor;
            vertical-align: baseline;
            animation: cursorPulse 0.62s steps(1, end) infinite;
            pointer-events: none;
        }

        .type-line.is-typing .type-cursor,
        .type-line.is-done .type-cursor {
            display: inline-block;
        }

        .type-line.is-done .type-cursor {
            opacity: 0;
            animation: none;
        }

        @keyframes cursorPulse {
            0%, 48% { opacity: 1; }
            49%, 100% { opacity: 0; }
        }

        /* ============================================================== */
        /* --- GET IN TOUCH SECTION --- */
        /* ============================================================== */
        #get-in-touch-section {
            position: relative;
            width: 100vw;
            min-height: clamp(420px, 56vh, 660px);
            background-color: transparent;
            z-index: 50;
            overflow: hidden;
            display: grid;
            place-items: start center;
            padding: 0 0 clamp(160px, 19vh, 230px);
            box-sizing: border-box;
            transition: background-color 5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        #cta-shader-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
            display: block;
        }

        .cta-link {
            font-family: 'Outfit', sans-serif;
            text-decoration: none;
            color: var(--fg);
            width: max-content;
            height: auto;
            display: block;
            position: relative;
            z-index: 4;
            isolation: isolate;
            cursor: pointer;
            transition: color 1.5s ease;
        }

        .cta-core {
            position: relative;
            display: block;
            width: max-content;
            color: var(--fg);
            opacity: 0;
            pointer-events: none;
        }

        #get-in-touch-section.cta-edge-lensing .cta-core {
            opacity: 1;
        }

        #get-in-touch-section.cta-edge-lensing #cta-shader-canvas {
            opacity: 0;
        }

        .cta-line {
            display: block;
            white-space: nowrap;
        }

        .cta-line-a {
            font-size: 380px;
            font-weight: 500;
            line-height: 0.82;
            letter-spacing: -0.035em;
        }

        .footer-link { z-index: 10000000; pointer-events: auto; text-decoration: none; color: var(--fg); font-family: 'DatatypeLocal', 'Courier New', monospace; font-size: clamp(14px, 1.15vw, 18px); font-weight: 500; line-height: 1.22; letter-spacing: 0.015em; text-transform: uppercase; padding: 2px 10px; position: relative; display: inline-block; overflow: hidden; transition: color 0.5s ease !important; white-space: nowrap; }
        .footer-link:hover { background: transparent !important; color: var(--fg) !important; }

        @keyframes navCursorSweep {
            0% { left: -0.72em; opacity: 0; }
            10% { opacity: 1; }
            88% { opacity: 1; }
            100% { left: calc(100% + 0.2em); opacity: 0; }
        }

        @keyframes navCursorPulse {
            0%, 48% { opacity: 1; }
            49%, 100% { opacity: 0.36; }
        }

        #fullscreen-consent {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 8000000; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 30px;
            backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); background-color: rgba(244, 242, 237, 0.4);
            opacity: 0; transition: opacity 1.5s ease; pointer-events: auto;
        }
        html.inverted #fullscreen-consent { background-color: rgba(11, 13, 18, 0.5); }
        .fc-text { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 400; color: var(--fg); letter-spacing: 1px; text-transform: uppercase; text-align: center; }
        .fc-btn { cursor: pointer; font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: var(--fg); border: 1px solid var(--fg); padding: 8px 18px; display: inline-block; transition: background 0.3s ease, color 0s !important; text-transform: uppercase; }
        .fc-btn:hover { background: var(--fg) !important; color: var(--bg) !important; text-transform: uppercase; }

        #main-footer { width: 100vw; padding: 0 30px 30px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; position: relative; z-index: 2000000; background-color: transparent !important; transition: background-color 5s cubic-bezier(0.19, 1, 0.22, 1); opacity: 1 !important; }
        #contact-link-container, #instagram-link-container { pointer-events: auto; }

        #custom-cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; background-color: var(--fg); border-radius: 50%; pointer-events: none; z-index: 10000000; transform: translate(-50%, -50%); transition: background-color 0.3s; }
        
        .svg-filter-container { position: absolute; width: 0; height: 0; visibility: hidden; }

        @media (max-width: 768px) {
            #edge-scanner { display: none !important; }
            #content-layer {
                width: 100% !important;
                min-height: auto;
                padding: clamp(132px, 18svh, 168px) 8vw 82px !important;
                margin: 0 !important;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box !important;
            }
            .section-headline {
                font-size: 11px;
                letter-spacing: 0.26em;
                line-height: 1.45;
                margin-bottom: 24px;
                max-width: 100%;
                text-align: center;
            }
            .about-text {
                font-size: clamp(34px, 9.6vw, 46px);
                line-height: 1.08;
                letter-spacing: -0.035em;
            }
            #ui-layer { padding: 20px 25px !important; align-items: center !important; }
            #logo-container { flex-shrink: 1; min-width: 0; }
            .logo-text { font-size: clamp(22px, 6vw, 26px) !important; }
            #desktop-menu { display: none !important; }
            #nav-wrapper { min-width: 45px !important; width: 45px !important; flex-shrink: 0 !important; }
            #nav-wrapper .header-track { transform: none !important; } 
            #nav-wrapper .header-slot:nth-child(1) { display: none !important; } 
            #nav-wrapper .header-slot:nth-child(2) { display: flex !important; justify-content: flex-end; }
            
            #ui-layer.scrolled { background-color: rgba(244, 242, 237, 0.75) !important; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05); }
            html.inverted #ui-layer.scrolled { background-color: rgba(11, 13, 18, 0.75) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4); }
            
            .split-level { flex-direction: column; padding: 0 0 90px; }
            .split-left, .split-right { width: 100vw; height: auto; min-height: auto; box-sizing: border-box; }
            .split-left { height: auto; margin-bottom: 60px; } 
            .image-warp-container { width: 85%; margin: 0 auto; padding: 20px 20px 0 20px; } 
            .split-right { padding: 0 10vw; text-align: left; gap: 20px; } 
            
            #cv-timeline-section {
                min-height: auto;
                padding: 76px 0 70px;
            }
            .cv-grid {
                width: 100%;
                padding: 0 10vw;
                box-sizing: border-box;
                grid-template-columns: 1fr;
                row-gap: 76px;
            }
            .cv-column {
                grid-template-columns: 1fr;
                column-gap: 0;
            }
            .cv-number {
                margin-bottom: 26px;
                font-size: 24px;
            }
            .cv-title {
                margin-bottom: 44px;
                font-size: 27px;
            }
            .cv-list,
            .cv-list.is-long {
                gap: 30px;
            }
            .entry {
                max-width: 100%;
                font-size: 15.75px;
                line-height: 1.24;
            }
            
            #get-in-touch-section {
                min-height: 42vh;
                min-height: 42svh;
                padding: 84px 12px 28px;
            }
            .cta-link {
                width: max-content;
                max-width: calc(100vw - 24px);
                height: auto;
                display: grid;
                place-items: center;
                overflow: visible;
            }
            .cta-core { width: max-content; max-width: calc(100vw - 24px); text-align: center; }
            .cta-line { white-space: nowrap; }
            .cta-line-a {
                font-size: clamp(52px, 17vw, 74px);
                line-height: 0.88;
                letter-spacing: -0.008em;
            }
            
            #main-footer { flex-direction: column; gap: 30px; text-align: center; padding: 0 25px 30px; }
            #contact-link-container, #instagram-link-container { display: flex; justify-content: center; width: 100%; }
            #custom-cursor { display: none !important; }
            #fullscreen-consent { padding: 0 10vw; text-align: center; }
        }

        /* WebGL Overlay über allem für den Text Torsion Shader */
        #webgl-overlay {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: 7000; pointer-events: none;
        }