*{margin:0;padding:0;box-sizing:border-box}

:root{
    color-scheme:dark;
    --red:#e50914;
    --red2:#ff1e2d;
    --bg:#050505;
    --bg2:#0a0a0a;
    --text:#eee;
    --muted:#777;
    --line:rgba(255,255,255,.11);
    --panel:#0c0c0c;
    --header-bg:rgba(3,3,3,.92);
    --soft-text:#666;
    --faint-text:#555;
    --grid:rgba(255,255,255,.035); 
    --image-bg:#111
}

html[data-theme="light"]{
    color-scheme:light;
    --bg:#f0f0f0;
    --bg2:#fff;
    --text:#111;
    --muted:#5f5f5f;
    --line:rgba(0,0,0,.13);
    --panel:#fafafa;
    --header-bg:rgba(255,255,255,.94);
    --soft-text:#555;
    --faint-text:#666;
    --grid:rgba(0,0,0,.045);
    --image-bg:#ddd
}

html,body{
    min-height:100%;
    scroll-behavior:smooth
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    transition:background .35s,color .35s
}

body:before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:20;
    opacity:.035;
    background:repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.8) 0,
        rgba(255,255,255,.8) 1px,
        transparent 1px,
        transparent 4px
    )
}

a{color:inherit}

.index-shell{
    position:relative;
    z-index:1;
    min-height:100vh
}

/* HEADER */

.index-header{
    height:82px;
    display:flex;
    align-items:center;
    padding:0 34px;
    border-bottom:1px solid rgba(229,9,20,.55);
    background:var(--header-bg);
    position:relative;
    z-index:100
}

html[data-theme="light"] .index-header{
    background:rgba(255,255,255,.94);
    border-bottom-color:rgba(0,0,0,.13)
}

.index-brand{
    text-decoration:none;
    width:140px;
    line-height:1
}

.brand-main{
    display:block;
    font-size:22px;
    font-weight:300;
    letter-spacing:8px;
    color:#f4f4f4
}

.brand-sub{
    display:block;
    margin-top:7px;
    color:var(--red);
    font-size:9px;
    font-weight:800;
    letter-spacing:7px
}

html[data-theme="light"] .brand-main{
    color:#111
}

.index-header-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:18px;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px
}

.index-lang,
.index-theme{
    display:flex;
    align-items:center;
    gap:7px
}

.index-lang a{
    color:var(--soft-text);
    text-decoration:none
}

.index-lang a.active,
.index-lang a:hover{
    color:var(--red2)
}

.index-theme{
    color:var(--soft-text)
}

.index-theme button{
    border:0;
    background:none;
    color:var(--soft-text);
    font:800 9px Arial;
    letter-spacing:2px;
    cursor:pointer
}

.index-theme button.active,
.index-theme button:hover{
    color:var(--red2)
}

/* MENU */

.index-menu{
    position:relative
}

.index-menu>button{
    min-height:36px;
    padding:0 14px;
    border:1px solid rgba(229,9,20,.38);
    background:rgba(229,9,20,.035);
    color:var(--muted);
    font:800 9px Arial;
    letter-spacing:2px;
    cursor:pointer
}

.index-menu>button span{
    color:var(--red);
    font-size:13px;
    margin-left:5px
}

.index-menu>button:hover,
.index-menu.open>button{
    border-color:rgba(229,9,20,.75);
    color:#fff;
    background:rgba(229,9,20,.09)
}

.index-menu-pop{
    position:absolute;
    right:0;
    top:calc(100% + 9px);
    width:210px;
    padding:7px;
    background:rgba(5,5,5,.98);
    border:1px solid rgba(229,9,20,.35);
    border-top:2px solid var(--red);
    box-shadow:0 20px 50px rgba(0,0,0,.65);
    opacity:0;
    visibility:hidden;
    transform:translateY(-7px);
    transition:.2s;
    z-index:120
}

.index-menu-pop.open{
    opacity:1;
    visibility:visible;
    transform:none
}

.index-menu-pop a{
    display:flex;
    align-items:center;
    min-height:40px;
    padding:0 12px;
    text-decoration:none;
    color:var(--muted);
    font:800 9px Arial;
    letter-spacing:1.8px
}

.index-menu-pop a:hover{
    background:rgba(229,9,20,.1);
    color:#fff
}

.index-menu-pop .menu-login{
    margin-top:5px;
    border-top:1px solid rgba(255,255,255,.09);
    color:#fff
}

html[data-theme="light"] .index-menu-pop{
    background:#fff;
    border-color:rgba(201,0,11,.35)
}

html[data-theme="light"] .index-menu-pop a{
    color:var(--faint-text)
}

html[data-theme="light"] .index-menu-pop a:hover{
    color:#111;
    background:rgba(201,0,11,.06)
}

/* HERO */

.index-hero{
    min-height:650px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(circle at 78% 48%,rgba(229,9,20,.18),transparent 29%),
        linear-gradient(
            135deg,
            var(--bg) 0%,
            var(--bg2) 62%,
            #080808 100%
        )
}

.hero-grid{
    position:absolute;
    inset:0;
    opacity:.34;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:80px 80px;
    mask-image:linear-gradient(90deg,black,transparent 85%)
}

.index-hero:before{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    right:-150px;
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(229,9,20,.22);
    border-radius:50%;
    box-shadow:
        0 0 0 80px rgba(229,9,20,.025),
        0 0 0 160px rgba(229,9,20,.012)
}

.hero-copy{
    position:relative;
    z-index:2;
    width:min(1000px,calc(100% - 160px));
    margin-left:8vw;
    padding:75px 0
}

.hero-kicker,
.section-kicker{
    color:var(--red);
    font-size:9px;
    font-weight:800;
    letter-spacing:3px
}

.hero-wordmark{
    margin-top:30px;
    color:rgba(255,255,255,.035);
    font-size:clamp(100px,19vw,290px);
    font-weight:900;
    letter-spacing:-.07em;
    line-height:.72;
    position:absolute;
    left:-18px;
    top:115px;
    pointer-events:none;
    white-space:nowrap
}

.hero-title{
    position:relative;
    margin-top:44px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(45px,6.7vw,92px);
    line-height:.92;
    letter-spacing:-2px;
    max-width:850px
}

.hero-rule{
    width:70px;
    height:2px;
    background:var(--red);
    box-shadow:0 0 14px var(--red);
    margin:30px 0 18px
}

.hero-copy p{
    max-width:570px;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
    letter-spacing:.35px
}

.hero-actions{
    display:flex;
    gap:10px;
    margin-top:31px
}

.hero-action{
    display:flex;
    align-items:center;
    gap:17px;
    min-height:48px;
    padding:0 17px;
    border:1px solid var(--line);
    text-decoration:none;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
    background:rgba(255,255,255,.025);
    transition:.2s
}

.hero-action span{
    color:var(--red);
    font-size:8px
}

.hero-action b{
    font-size:15px;
    font-weight:400
}

.hero-action:hover{
    border-color:rgba(229,9,20,.65);
    background:rgba(229,9,20,.08);
    transform:translateY(-2px)
}

.hero-action-primary{
    border-color:rgba(229,9,20,.5)
}

.hero-side{
    position:absolute;
    right:44px;
    top:0;
    height:100%;
    width:90px;
    display:flex;
    align-items:center;
    justify-content:center
}

.vertical-label{
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:var(--faint-text);
    font-size:7px;
    font-weight:800;
    letter-spacing:3px
}

.hero-number{
    position:absolute;
    bottom:27px;
    right:0;
    color:var(--red);
    font-size:10px;
    font-weight:800;
    letter-spacing:2px
}

.hero-corner{
    position:absolute;
    right:40px;
    bottom:30px;
    color:var(--faint-text);
    font-size:7px;
    letter-spacing:2px
}

/* FEATURED FILM */

.featured,
.film-index,
.about-teaser{
    width:min(1200px,calc(100% - 70px));
    margin:0 auto
}

.featured{
    padding:78px 0 0
}

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px
}

.section-head h2{
    margin-top:8px;
    font:400 27px Georgia,"Times New Roman",serif
}

.section-link{
    color:var(--muted);
    text-decoration:none;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
    border-bottom:1px solid rgba(229,9,20,.45);
    padding-bottom:7px
}

.section-link span{
    color:var(--red);
    font-size:13px;
    margin-left:6px
}

/* RUIN DRIVE - HELLIGKEIT KORRIGIERT */

.featured-film{
    height:min(62vw,590px);
    min-height:350px;
    position:relative;
    display:block;
    overflow:hidden;
    background:var(--image-bg);
    text-decoration:none
}

.featured-film img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:brightness(1);
    transition:transform .8s,filter .5s
}

.featured-film:hover img{
    transform:scale(1.025);
    filter:brightness(1.05)
}

.featured-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.18),transparent 60%),
        linear-gradient(0deg,rgba(0,0,0,.22),transparent 50%)
}

.featured-meta{
    position:absolute;
    top:25px;
    left:27px;
    display:flex;
    gap:20px;
    color:#bbb;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px
}

.featured-meta span:first-child{
    color:var(--red2)
}

.featured-name{
    position:absolute;
    left:27px;
    bottom:23px;
    font-size:clamp(48px,8vw,105px);
    font-weight:900;
    letter-spacing:-4px;
    line-height:.82
}

.featured-name em{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400
}

.featured-arrow{
    position:absolute;
    right:28px;
    bottom:23px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.25);
    font-size:25px
}

.featured-film:hover .featured-arrow{
    border-color:var(--red);
    color:var(--red)
}

/* FILM INDEX */

.film-index{
    padding:85px 0
}

.section-head.compact{
    margin-bottom:24px
}

.film-count{
    color:var(--soft-text);
    border:1px solid var(--line);
    padding:8px 10px;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px
}

.film-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px
}

.film-card{
    text-decoration:none;
    min-width:0
}

.film-card-image{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--image-bg);
    border:1px solid var(--line)
}

.film-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:brightness(.67) grayscale(.12);
    transition:.5s
}

.film-card:hover img{
    transform:scale(1.04);
    filter:brightness(.82) grayscale(0)
}

.film-card-no{
    position:absolute;
    top:10px;
    left:10px;
    color:#fff;
    font-size:8px;
    font-weight:800;
    letter-spacing:1px;
    background:rgba(0,0,0,.55);
    padding:6px
}

.film-card-arrow{
    position:absolute;
    right:10px;
    top:10px;
    width:27px;
    height:27px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.25);
    color:#fff;
    font-size:13px
}

.film-card:hover .film-card-arrow{
    border-color:var(--red);
    color:var(--red)
}

.film-card-meta{
    display:flex;
    justify-content:space-between;
    margin-top:9px;
    color:var(--soft-text);
    font-size:7px;
    font-weight:800;
    letter-spacing:1.5px
}

.film-card-meta span:first-child{
    color:var(--red)
}

.film-card h3{
    margin-top:6px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px
}

.film-card:hover h3{
    color:var(--red2)
}

/* ABOUT */

.about-teaser{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    min-height:460px;
    margin-bottom:90px;
    border:1px solid var(--line);
    background:var(--panel)
}

.about-teaser-photo{
    position:relative;
    overflow:hidden;
    min-height:460px
}

.about-teaser-photo:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        transparent 45%,
        rgba(0,0,0,.6)
    )
}

.about-teaser-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 25%;
    filter:grayscale(1) contrast(1.05);
    transition:.6s
}

.about-teaser:hover img{
    transform:scale(1.02)
}

.about-teaser-photo span{
    position:absolute;
    left:18px;
    bottom:17px;
    z-index:2;
    color:#fff;
    font-size:7px;
    font-weight:800;
    letter-spacing:2px;
    border-left:2px solid var(--red);
    padding-left:9px
}

.about-teaser-copy{
    padding:54px 48px;
    display:flex;
    flex-direction:column;
    justify-content:center
}

.about-teaser-copy h2{
    margin-top:14px;
    font:400 clamp(45px,5vw,74px) Georgia,"Times New Roman",serif;
    line-height:.9
}

.about-role{
    margin-top:17px;
    color:var(--red);
    font-size:8px;
    font-weight:800;
    letter-spacing:2px
}

.about-teaser-copy p{
    margin-top:25px;
    color:var(--muted);
    font-size:12px;
    line-height:1.9;
    max-width:430px
}

.about-teaser-link{
    display:inline-flex;
    align-items:center;
    gap:15px;
    margin-top:29px;
    width:max-content;
    text-decoration:none;
    font-size:8px;
    font-weight:800;
    letter-spacing:2px;
    border-bottom:1px solid rgba(229,9,20,.5);
    padding-bottom:8px
}

.about-teaser-link span{
    color:var(--red);
    font-size:15px
}

/* FOOTER */

.index-footer{
    min-height:100px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 34px;
    color:var(--faint-text);
    font-size:7px;
    font-weight:800;
    letter-spacing:1.7px
}

.index-footer a{
    text-decoration:none;
    color:var(--muted)
}

.index-footer a:hover{
    color:var(--red)
}

/* LIGHT MODE */

html[data-theme="light"] .hero-wordmark{
    color:rgba(0,0,0,.035)
}

html[data-theme="light"] .featured-film img{
    filter:brightness(1)
}

html[data-theme="light"] .film-card-image img{
    filter:brightness(.78) grayscale(.08)
}

html[data-theme="light"] .about-teaser-photo img{
    filter:grayscale(1)
}

html[data-theme="light"] .index-theme button.active,
html[data-theme="light"] .index-theme button:hover{
    color:var(--red2)
}

html[data-theme="light"] .hero-grid{
    background-image:
        linear-gradient(var(--grid) 1px,transparent 1px),
        linear-gradient(90deg,var(--grid) 1px,transparent 1px)
}

/* NEWS */

.news-panel{
    width:min(1200px,calc(100% - 70px));
    margin:0 auto 85px;
    padding:48px 0 0;
    border-top:1px solid var(--line)
}

.news-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px
}

.news-head h2{
    margin-top:8px;
    font:400 clamp(42px,5vw,68px) Georgia,"Times New Roman",serif;
    line-height:.9
}

.news-label{
    color:var(--soft-text);
    font-size:8px;
    font-weight:800;
    letter-spacing:2px
}

.news-content{
    display:grid;
    grid-template-columns:.7fr 1.3fr;
    gap:28px;
    border:1px solid var(--line);
    background:var(--panel);
    padding:24px
}

.news-copy p{
    max-width:470px;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    white-space:pre-line;
}

 

.news-placeholder-label{
    color:var(--red);
    font-size:8px;
    font-weight:800;
    letter-spacing:2px
}

.news-images{
    display:block;
    width:100%;
}

.news-image-placeholder{
    min-height:270px;
    position:relative;
    display:flex;
    align-items:flex-end;
    padding:14px;
    background:var(--image-bg);
    border:1px solid var(--line);
    overflow:hidden
}

.news-image-placeholder:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(229,9,20,.07) 46%,
            transparent 47%
        ),
        linear-gradient(
            90deg,
            transparent 49.5%,
            rgba(255,255,255,.04) 50%,
            transparent 50.5%
        ),
        linear-gradient(
            0deg,
            transparent 49.5%,
            rgba(255,255,255,.04) 50%,
            transparent 50.5%
        )
}

.news-image-placeholder span{
    position:relative;
    z-index:1;
    color:var(--soft-text);
    font-size:7px;
    font-weight:800;
    letter-spacing:2px
}

html[data-theme="light"] .news-image-placeholder:before{
    background:
        linear-gradient(
            135deg,
            transparent 45%,
            rgba(201,0,11,.06) 46%,
            transparent 47%
        ),
        linear-gradient(
            90deg,
            transparent 49.5%,
            rgba(0,0,0,.05) 50%,
            transparent 50.5%
        ),
        linear-gradient(
            0deg,
            transparent 49.5%,
            rgba(0,0,0,.05) 50%,
            transparent 50.5%
        )
}


.news-feature-image{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    margin:0 auto;
    border:1px solid var(--line);
}



/* TABLET */

@media(max-width:900px){

    .hero-copy{
        margin-left:6vw;
        width:calc(100% - 150px)
    }

    .hero-side{
        right:22px
    }

    .gateway,
    .featured,
    .film-index,
    .about-teaser{
        width:min(calc(100% - 36px),700px)
    }

    .film-grid{
        grid-template-columns:repeat(2,1fr)
    }

    .about-teaser{
        grid-template-columns:1fr
    }

    .about-teaser-photo{
        min-height:390px
    }

    .about-teaser-copy{
        min-height:360px
    }

    .news-panel{
        width:min(calc(100% - 36px),700px)
    }

    .news-content{
        grid-template-columns:1fr
    }

    .news-images{
        grid-template-columns:repeat(3,1fr)
    }
}

/* MOBILE */

@media(max-width:650px){

    .index-header{
        height:72px;
        padding:0 15px
    }

    .brand-main{
        font-size:17px;
        letter-spacing:5px
    }

    .brand-sub{
        font-size:7px;
        letter-spacing:5px
    }

    .index-header-right{
        gap:7px
    }

    .index-lang,
    .index-theme{
        display:flex;
        align-items:center;
        font-size:8px;
        white-space:nowrap
    }

    .index-lang{
        gap:4px
    }

    .index-theme{
        gap:3px
    }

    .index-theme button{
        font-size:8px;
        letter-spacing:1px;
        padding:0
    }

    .index-hero{
        min-height:650px
    }

    .hero-copy{
        width:calc(100% - 80px);
        margin-left:24px;
        padding-top:55px
    }

    .hero-wordmark{
        font-size:82px;
        top:110px
    }

    .hero-title{
        margin-top:60px;
        font-size:43px
    }

    .hero-side{
        display:none
    }

    .hero-corner{
        right:18px
    }

    .gateway{
        grid-template-columns:1fr
    }

    .gateway-card{
        min-height:205px
    }

    .gateway-card+.gateway-card{
        border-left:0
    }

    .gateway-bottom strong{
        font-size:35px
    }

    .featured,
    .film-index,
    .about-teaser{
        width:calc(100% - 24px)
    }

    .featured{
        padding-top:55px
    }

    .featured-film{
        height:390px
    }

    .featured-name{
        font-size:50px;
        letter-spacing:-2px
    }

    .film-index{
        padding:60px 0
    }

    .film-grid{
        gap:10px
    }

    .film-card h3{
        font-size:11px
    }

    .about-teaser{
        margin-bottom:50px
    }

    .about-teaser-photo{
        min-height:330px
    }

    .about-teaser-copy{
        padding:38px 25px
    }

    .about-teaser-copy h2{
        font-size:52px
    }

    .index-footer{
        padding:22px 15px;
        display:grid;
        gap:12px;
        text-align:center
    }

    .index-footer a{
        justify-self:center
    }

    .news-panel{
        width:calc(100% - 24px);
        margin-bottom:55px;
        padding-top:45px
    }

    .news-head{
        align-items:flex-start;
        flex-direction:column
    }

    .news-content{
        padding:14px
    }

    .news-copy{
        min-height:190px
    }
    
 
    

    .news-images{
        gap:8px
    }

    .news-image-placeholder{
        min-height:150px;
        padding:9px
    }
}

/* SMALL MOBILE */

@media(max-width:380px){

    .film-grid{
        grid-template-columns:1fr
    }

    .hero-title{
        font-size:38px
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch
    }

    .hero-action{
        justify-content:space-between
    }

    .news-images{
        grid-template-columns:1fr
    }

    .news-image-placeholder{
        min-height:180px
    }
}