@font-face {
    font-family: 'GeogrotesqueCyr-Medium';
    src: url('/slider/GeogrotesqueCyr-Medium.woff2') format('woff2'),
         url('/slider/GeogrotesqueCyr-Medium.woff') format('woff'),
         url('/slider/GeogrotesqueCyr-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root { 
    --ge-red: #e30613; 
    --ge-grey: rgba(68, 68, 68, 0.8); 
    --bg-dark: #121212;
    --font-main: Geogrotesque Md, "Geogrotesque Md", "GeogrotesqueCyr-Medium", sans-serif;
    --anim-speed: 1.1s;
}

/* SLIDER CORE (STRICT 2:1) */
.slider-container {
    position: relative; width: 100%; max-width: 850px;
    aspect-ratio: 2 / 1; 
    background: #000; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    font-family: Geogrotesque Md, "Geogrotesque Md", "GeogrotesqueCyr-Medium", sans-serif !important;
    container-type: inline-size;
    -webkit-font-smoothing: antialiased;
    margin-bottom: 2rem; /* Added spacing below the slider */
}

.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; background: #000; }
.slide.active { opacity: 1; z-index: 2; }

/* Transitions */
.transition-none .slide { transition: none; }
.transition-mix .slide { transition: opacity 0.8s ease-in-out; }
.transition-blur .slide { transition: opacity 0.8s ease-in-out, filter 0.8s ease-in-out; filter: blur(20px); }
.transition-blur .slide.active { filter: blur(0); }

.transition-flash .slide { transition: opacity 0s 0.2s; }
.slider-container.transition-flash::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%; 
    background: white; z-index: 10; pointer-events: none; opacity: 0;
}
.slider-container.transition-flash.is-flashing::after {
    animation: flashAnim 0.4s ease-out;
}
@keyframes flashAnim {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.transition-zoom .slide { transition: opacity 0.8s ease-in-out, transform 0.8s ease-out; transform: scale(1.1); }
.transition-zoom .slide.active { transform: scale(1); }

.transition-slideup .slide { transition: opacity 0.8s ease-out, transform 0.8s ease-out; transform: translateY(50px); }
.transition-slideup .slide.active { transform: translateY(0); }

.transition-glitch .slide { transition: opacity 0.6s step-end; }
.slider-container.transition-glitch.is-flashing::after {
    content: ''; position: absolute; top:0; left:0; width:100%; height:100%;
    background: rgba(227, 6, 19, 0.4); mix-blend-mode: color-dodge;
    z-index: 10; pointer-events: none; animation: glitchAnim 0.3s;
}
@keyframes glitchAnim {
    0% { transform: translateX(-10px); opacity: 1; }
    50% { transform: translateX(10px); opacity: 0.8; }
    100% { transform: translateX(0); opacity: 0; }
}

.media-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
.media-layer img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

.vimeo-wrapper { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; overflow: hidden; z-index: 2;
    opacity: 0; transition: opacity 0.6s ease-in; 
}
.vimeo-wrapper iframe { 
    position: absolute; top: 50%; left: 50%; 
    width: 100%; height: 112.5%; 
    transform: translate(-50%, -50%); border: none; background: transparent;
}
.vimeo-loaded { opacity: 1 !important; }

/* RIBBON ANIMATIONS */
.ribbon-overlay { position: absolute; z-index: 10; pointer-events: none; display: flex; flex-direction: column; width: 100%; pointer-events: none; }
.ribbon { 
    color: #fff; text-transform: uppercase; font-family: Geogrotesque Md, "Geogrotesque Md", "GeogrotesqueCyr-Medium", sans-serif !important; 
    white-space: normal !important; max-width: 85% !important; width: fit-content; line-height: 1.15; box-sizing: border-box; flex-wrap: wrap; word-wrap: break-word; 
    display: flex; align-items: center;
    opacity: 0; 
}
.ribbon-red { background: var(--ge-red); font-weight: 500; font-size: clamp(calc(1rem * var(--mob-scale, 1)), calc(4cqw * var(--mob-scale, 1)), calc(2.3rem * var(--mob-scale, 1))); }
.ribbon-gray { background: var(--ge-grey); font-weight: 400; font-size: clamp(calc(0.6rem * var(--mob-scale, 1)), calc(2cqw * var(--mob-scale, 1)), calc(1.1rem * var(--mob-scale, 1))); backdrop-filter: blur(5px); }

@keyframes ribbonInLeft {
    0% { opacity: 0; transform: translateX(-80px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes ribbonInRight {
    0% { opacity: 0; transform: translateX(80px); }
    100% { opacity: 1; transform: translateX(0); }
}

.slide.active .ribbon-red {
    animation: ribbonInLeft var(--anim-speed) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
}
.slide.active .ribbon-gray {
    animation: ribbonInLeft var(--anim-speed) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
}

/* Layout 2: Slide from right */
.layout-2 .slide.active .ribbon-red,
.layout-2 .slide.active .ribbon-gray { animation-name: ribbonInRight; }

/* Positions */
.layout-1 .ribbon-overlay { bottom: 12%; left: -5%; width: 110%; transform: rotate(-7deg); }
.layout-1 .ribbon-red { padding: 14px 40px 6px 80px; }
.layout-1 .ribbon-gray { padding: 8px 30px 4px 100px; }

.layout-2 .ribbon-overlay { bottom: 20%; right: 7%; align-items: flex-end; transform: rotate(-5deg); }
.layout-2 .ribbon-red { padding: 12px 20px 6px 20px; }
.layout-2 .ribbon-gray { padding: 7px 12px 4px 12px; margin-top: 3px; }

.layout-3 .ribbon-overlay { top: 10%; left: 0; align-items: flex-start; }
.layout-3 .ribbon-red { padding: 14px 30px 8px 30px; border-left: 10px solid #fff; }
.layout-3 .ribbon-gray { margin-top: 10px; margin-left: 20px; padding: 7px 15px 5px 15px; background: #000; border: 1px solid #444; }

.layout-4 .ribbon-overlay { top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(20deg); align-items: center; }
.layout-4 .ribbon-red { padding: 20px 40px; font-size: clamp(calc(1.2rem * var(--mob-scale, 1)), calc(5cqw * var(--mob-scale, 1)), calc(3rem * var(--mob-scale, 1))); }
.layout-4 .ribbon-gray { margin-top: -5px; padding: 8px 20px; background: rgba(0,0,0,0.7); }

/* Layout 5: Cinematic */
.layout-5 .ribbon-overlay { bottom: 10%; left: 50%; transform: translateX(-50%); align-items: center; }
.layout-5 .ribbon-red { padding: 8px 30px; font-size: clamp(calc(0.9rem * var(--mob-scale, 1)), calc(2.5cqw * var(--mob-scale, 1)), calc(1.5rem * var(--mob-scale, 1))); letter-spacing: 3px; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid var(--ge-red); color: #fff; }
.layout-5 .ribbon-gray { margin-top: 10px; padding: 5px 20px; background: rgba(0,0,0,0.3); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: clamp(calc(0.7rem * var(--mob-scale, 1)), calc(2cqw * var(--mob-scale, 1)), calc(1rem * var(--mob-scale, 1))); letter-spacing: 2px; color: #fff; }

/* Layout 6: Avantgarde */
.layout-6 .ribbon-overlay { top: 0; left: 0; height: 100%; width: 35%; background: rgba(0,0,0,0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); align-items: flex-start; justify-content: center; padding: 40px; transform: none; box-sizing: border-box; border-right: 3px solid var(--ge-red); }
.layout-6 .ribbon-red { padding: 0; background: transparent; font-size: clamp(calc(1.2rem * var(--mob-scale, 1)), calc(3cqw * var(--mob-scale, 1)), calc(2.5rem * var(--mob-scale, 1))); white-space: normal; line-height: 1.1; display: block; }
.layout-6 .ribbon-gray { padding: 0; background: transparent; margin-top: 20px; white-space: normal; line-height: 1.4; color: #aaa; font-size: clamp(calc(0.8rem * var(--mob-scale, 1)), calc(1.5cqw * var(--mob-scale, 1)), calc(1rem * var(--mob-scale, 1))); display: block; }
.layout-6 .slide.active .ribbon-red { animation: ribbonInLeft 1s ease forwards; animation-delay: 0.1s; }
.layout-6 .slide.active .ribbon-gray { animation: ribbonInLeft 1s ease forwards; animation-delay: 0.3s; }

/* Layout 7: Retro */
.layout-7 .ribbon-overlay { top: 20%; left: 10%; align-items: flex-start; }
.layout-7 .ribbon-red { padding: 15px 30px; background: #fff; color: #000; font-size: clamp(calc(1.5rem * var(--mob-scale, 1)), calc(5cqw * var(--mob-scale, 1)), calc(3.5rem * var(--mob-scale, 1))); mix-blend-mode: screen; transform: rotate(-3deg); z-index: 1; position: relative; }
.layout-7 .ribbon-gray { padding: 10px 25px; background: var(--ge-red); color: #fff; font-size: clamp(calc(1rem * var(--mob-scale, 1)), calc(3cqw * var(--mob-scale, 1)), calc(2rem * var(--mob-scale, 1))); margin-top: -15px; margin-left: 30px; transform: rotate(2deg); z-index: 2; position: relative; }


/* Layout 8: Split Screen (Editorial) */
/* Layout 8: Animated Ticker */
        .layout-8 .ribbon-overlay {
            position: absolute;
            bottom: 12%;
            left: -10cqw;
            width: 120cqw;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 30px;
            transform: rotate(-2deg);
            background: rgba(0,0,0,0.7);
            padding: 15px 0;
            overflow: hidden;
            white-space: nowrap;
            z-index: 10;
        }
        .layout-8 .slide.active .ribbon-red, .layout-8 .slide.active .ribbon-gray {
            opacity: 1 !important;
            background: transparent !important;
            padding: 0 !important;
            margin: 0 !important;
            position: relative;
            animation: tickerAnim 15s linear infinite;
        }
        .layout-8 .ribbon-red {
            color: var(--ge-red) !important;
            font-size: clamp(calc(1.8rem * var(--mob-scale, 1)), calc(5cqw * var(--mob-scale, 1)), calc(3.5rem * var(--mob-scale, 1))) !important;
            text-transform: uppercase;
            font-weight: 800;
            letter-spacing: 2px;
        }
        .layout-8 .ribbon-gray {
            color: #fff !important;
            font-size: clamp(calc(1.5rem * var(--mob-scale, 1)), calc(4cqw * var(--mob-scale, 1)), calc(3rem * var(--mob-scale, 1))) !important;
            font-weight: normal;
            font-style: italic;
        }
        @keyframes tickerAnim {
            0% { transform: translateX(100cqw); }
            100% { transform: translateX(-100cqw); }
        }

                /* Navigation */
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.4); font-size: 2.5rem; cursor: pointer; z-index: 30; padding: 20px; transition: 0.3s; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.nav-btn:hover, .nav-btn:active, .is-swiping .nav-btn { color: rgba(255, 255, 255, 1); text-shadow: 0 2px 10px rgba(0,0,0,0.8); }

@media (hover: hover) and (pointer: fine) {
    .nav-btn {
        color: rgba(255, 255, 255, 1);
        opacity: 0;
        animation: desktopArrowIntro 3s forwards;
        transition: opacity 0.3s;
    }
    @keyframes desktopArrowIntro {
        0%, 80% { opacity: 0.4; }
        100% { opacity: 0; }
    }
    .slider-container:hover .nav-btn { opacity: 0.4 !important; }
    .slider-container .nav-btn:hover { opacity: 1 !important; }
}

.prev { left: 0; } .next { right: 0; }
.slide-link { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 25; }

/* Lang handling */
[data-lang-content] { display: none; }
.lang-de [data-lang-content="de"] { display: block; }
.lang-en [data-lang-content="en"] { display: block; }
    
@media (max-width: 600px) {
    .slider-container { --mob-scale: 1.3; }
    .top-bar-slider { gap: 10px; flex-wrap: wrap; justify-content: center; }
    .nav-btn { padding: 15px; font-size: 1.3rem; }
    .ribbon-red { padding: 10px 18px 5px 18px !important; }
    .ribbon-gray { padding: 5px 12px 3px 12px !important; }
    .layout-1 .ribbon-red { padding-left: 35px !important; }
    .layout-1 .ribbon-gray { padding-left: 45px !important; }
    
    .layout-6 .ribbon-overlay { padding: 15px !important; width: 45%; }
    .layout-6 .ribbon-red { padding: 0 !important; }
    .layout-6 .ribbon-gray { padding: 0 !important; margin-top: 10px; }
}

        @media (max-width: 767px) { .slider-container:not(.editing-mode) {
                width: 100vw !important;
                max-width: 100vw !important;
                position: relative;
                left: 50%;
                margin-left: -50vw;
                margin-top: 20px;
            }
        }