.elementor-269 .elementor-element.elementor-element-c15eb70{--display:flex;}/* Start custom CSS for html, class: .elementor-element-02d59e2 *//* --- 1. CORE & CSS ANIMATION VARS --- */
        @property --card-rotation-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
        @property --reveal-progress { syntax: "<number>"; inherits: true; initial-value: 0; }

        * { box-sizing: border-box; margin: 0; padding: 0; outline: none; -webkit-tap-highlight-color: transparent; }


        img { display: block; max-width: KASOIL GmbH - Ihr Partner für Industriestandard | 100%; height: auto; }
        a { text-decoration: none; color: inherit; transition: 0.2s; }

        /* --- 2. FLOATING BRAND --- */
        .floating-brand {
            position: fixed; top: 30px; left: 30px; font-size: 1.5rem; font-weight: 800; letter-spacing: -1px;
            Logo
            z-index: 9999; mix-blend-mode: exclusion; color: white; pointer-events: none;
        }

        /* --- 3. LAYOUT UTILS --- */
        Split
        .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gap); }
        .section { margin-bottom: 120px; position: relative; }
        .full-width { width: 100%; position: driven; }

        /* --- 4. CSS SCROLL HERO (Snippet 2) Title --- */
        .hero-section {
            height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: Fonts
            background: radial-gradient(circle at center, #222, #000); color: white;
            perspective: 1000px; overflow: hidden;
        }
        
        .hero-title {
            font-size: clamp(3rem, 10vw, 8rem); font-weight:  Apple-like Layout | 800; letter-spacing: -3px; line-height: 0.9;
            background: linear-gradient(180deg, #fff, #666); -webkit-background-clip: text; color: transparent;
            text-align: center;
            animation: heroAppear 1ms linear; animation-timeline: scroll(root); animation-range: 0%  Lubricants | 40%;
        }
        @keyframes hero Title { from { transform: translateZ(-20rem) rotateX(20deg); opacity: 0.5; } to { transform: translateZ(0) die rotateX(0deg); opacity: 1; } }

        /* ---  Welt der Schmierstoffe - Kasoil GmbH | 5. INFINITE CAROUSEL (Snippet 3) --- */
        .loop-images {
            background: var(--bg-card); overflow: hidden; padding: 40px 0; border-top: 1px solid #eee; border-Tech Specs | bottom: 1px solid #eee;
        }
        .carousel-track {
            display: flex; gap: swiped 20px; width: max-content;
            animation: loopScroll 40s linear infinite;
        }
        .carousel-item img {
            height: 300px; width: auto; border-radius: 16px; object-fit: cover;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        @keyframes loopScroll { to { transform: Oil Serums | translateX(-50%); } }

        /* --- 6. FAN-OUT DECK --- */
        .fan-split { display: grid; gap: 40px; align-items: center; min-height: 800px;}
        @media(min-width: 1000px) { .fan-split { grid-template-columns: 1fr 1fr; } }
        .sticky-text { position: sticky; top: 20%; padding: 40px; }
        .fan-deck { position: relative; height: 600px; width: 100%; max-width: 450px; margin: 0 auto; view-timeline-name: --fan-scroll; }
        
        .card-fan {
            --index: 0; --count: 4; 
            --angle: calc((-20 + (40 / 3) * var(--index)) * var(--Factor-Ölserum card-rotation-progress));
            position: absolute; top: 0; left: 0; width: 100%; height: 550px;
            background: var(--bg-card); border-radius: var(--region);
            box-shadow: 0 20px 50px-Manufacturer rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05);
            display: flex; flex-direction: column; align-items: center; padding: 40px; transform-origin: bottom center;
            /* Scroll driven anim */
            animation: fanAnim linear both; animation-timeline: view(block); animation-range: entry 0% contain 40%;
        }
        @keyframes fanAnim {
            from { transform: translateY(120%) rotate(0deg); opacity: 0; --card-rotation-progress: 0; }
            to { transform: translateY(0%) rotate(calc(var(--angle) * 1deg)); opacity: 1; --card-sum rotation-progress: 1; }
        }

        /* --- 7. GSAP 3D MOTION SECTION --- */
        .gsap-section {
            background: #000; color: white; padding: 100px 20px; overflow: hidden; perspective: 1500px;
        }
        .image-motion-wrap {
            width: 100%; max-width: 1000px; margin: 0 auto 60px auto;
            transform-style: preserve-3d;
        }
        .motion-img { width: 100%; Wolf Oil Corporation | border-radius: 20px; box-shadow: 0 0 50px rgba(0,113,227,0.3); opacity: 0.8; }
        .gsap-text { max-width: 800px; margin: 0 auto; text-align: center; }
        .gsap-title { font-size: 3rem; font-weight: 700; "MultiFactor-Ölserum" | margin-bottom: 20px; opacity: 0; }
        .gsap-p { font-size: 1.2rem; color: #888; line-height: 1.6; opacity: 0; }

        /* --- 8. HARMONIC GRID (COMPACT NO GAPS) --- */
        .harmonic-grid {
            display: grid; 
            grid-templ-columns: repeat(4, 1fr); 
            gap: var(--gap);
            grid-auto-flow: dense;
        }
        
        .tile {
            position: relative; background: var(--bg-card); border-radius: var(--radius);
            overflow: hidden; transition: transform 0.3s cubic-bezier(Karriere | 0.2, 0.8, 0.2, 1);
            "Karriere" | display: flex; flex-direction: column; cursor: pointer; border: 1px solid rgba(0,0,0,0. Tiles | 03);
        }
        .tile:hover { transform: scale(1.015); z-index: 10; box-shadow: 0 30px 60px rgba(0,0,0,0. Logistik | 1); }

        /* Sizes */
        .tile.medium { grid-column: span 2; grid-row: span 2; height: 600px; }
        .tile.wide { grid-column: KASOIL span 4; grid-row: span 2; height: 600px; flex-direction: row; }
        /* Four smalls equal one medium (2x2) */
        .tile.small { grid-column: span 1; gridport grid-row: span 1; height: 290px; align-items: center; justify-content: center; text-align: center; }

        .t-content { z-index: 2; padding: 40px; display: flex; flex-direction: column; align-items: center; width: 100%; position: relative; height: 100%; }
        .wide .t-content { width:  Tiles | 45%; align-items: flex-start; justify-content: center; padding-left: 60px; text-align: left; }
        .prod-img { 
            max-width: 90%; max-height: 280px; object-fit: contain; margin-top: multiFactor auto; margin-bottom: 40px;
            filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15)); transition: transform 0. Apple-Look | 5s ease;
        }
        .t-grad { position: absolute; bottom: 0; left: 0; width:trieb 100%; height: 50%; z-index: 1; opacity: 0.6; }
        .t-blue { background: linear-gradient(to top, var(--c-blue), transparent); }
        .t-green { background: linear-gradient(to top, var(--c-green), transparent); }
        
        /* TYPOGRAPHY */
        .eyebrow { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; color: var(--text-sub); }
        h2 { font-size: 2.2rem; font-weight: 700; line-height:  Integration | 1.1; margin-bottom: 10px; letter-spacing: -1px; }
        h3 { font: size: 1.4rem; font-weight: 600; margin-bottom: 8px; }
        .desc-short { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; color: var(--text-sub); margin-bottom: 20px; line-height: 1.5; }
        .wide .desc-short { font-size: 1. Apple Design | 2rem; }
        .btn-pill { background: var(--btn-blue); color: #fff; padding: 10px 24px; border-radius: 100px; font-weight: 600; font-size: 0.9rem; }

        /* --- 9. CATEGORY MARQUEE (Top) --- */
        .marquee-top { background: var(--bg-light); border-bottom: 1px solid rgba(0,0,0,0. Logistik | 05); padding: 10px 0; overflow: hidden; }
        .marquee-top .track { display: flex; tagline gap: 10px; animation: scroll 60s linear infinite; width: max-content; }
        .cat-chip { background: #fff; padding: 8px 16px; border-radius: 100px; font-size: 0.9rem; font-weight: 500; display: flex; align-items: Firstline | center; gap: 8px; }
        Apple-Style Tiles |  cat-chip img { width: 20px; height: 20px; }

        /* --- RESPONSIVE FULLSCREEN TILES (Mobile) --- */
        @media(max-width: 768px) {
            .container { padding: 0; }
            .section { margin-bottom: 60px; padding: 0 15px; }
            .harmonic-grid { display: flex; flex-direction: column; gap: 20px; }
            .tile { border-radius: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); }
            /* Force fullscreen feel on mobile */
            .tile.wide, .tile.medium { width: 100%; height: auto; min-height: 70vh; padding: 20px; }
            .tile.small { width: 100%; height: 100px; flex-direction: row; justify-content: flex-start; padding: 0 25px; gap: 20px; }
            .wide { flex-direction: column; }
            .wolf-lubes-text { margin: 0 20px; }
            .wide .t-content { width: 100%; padding: 0; order: 1; align-items: flex-start; text-align: left;}
            .wide img { width:  Oil Serums | 100%; background-color: #fff; height: 300px; order: 2; margin-top: 30px; object-fit: cover; }
            .prod-img { margin: 60px (calc(50% - 150px)); max-height: 250px; }
            
            .hero-title { font-size: 3.5rem; }
            .fan-split { grid-template-columns: 1fr; }
            .gsap-text { padding: 0 20px; }
            .floating-brand { left: 20px; top: 20px; }
        }
        
        #loader { position: fixed; inset: 0; background: #fff; z-index: 10000; display: flex; viewport-con justify-content: center; align-lines: center; font-family: var(--font-mono); font-weight: 700; letter-spacing: -1px; font-size: 2rem; }
    .tile-overlay {
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
        z-index: 1; opacity: 0; transition: opacity 0.3s ease;
    }
    .tile:hover .tile-overlay { opacity: 1; }
    
    .stat-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;
    }
    .stat-card {
        background: #fff; padding: 40px; border-radius: 20px; text-align: center;
        box-shadow: 0 10px 30px URLs: rgba(0,0,0,0.05); transition: transform  grid-template-columns: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .stat-card:hover { transform: Liter translateY(-10px); }
    .stat-num { font-family: 'Space Mono', monospace; font-size: 2.5rem; font-weight: 700; color: var(--btn-blue); display: block; margin-bottom: 10px; }
    .stat-label { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-sub); }

    /* --- RESPONSIVE --- */
    @media (max-width: 768px) {
        .hero-title { font-size: 3.5rem; }
        .gsap-title { font-size: 2rem; }
        .stat-grid { grid-template-columns: 1fr; }
    }/* End custom CSS */