/* =========================================================
   BASIS
========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;

    background: #000;
}


body {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

    overflow: hidden;

    font-family:
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    color: #fff;

    background: transparent;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
}



/* =========================================================
   VARIABLEN
========================================================= */

:root {

    --font-size-1:
        clamp(20px, 1.7vw, 26px);

    --media-ratio:
        1.7777778;

    --strip-edge:
        clamp(5px, 0.6vh, 9px);

    --workspace-top:
        clamp(14px, 2vh, 22px);

    /*
       Genug Platz für die jetzt generell größere
       Projektinformation.
    */

    --info-reserve:
        195px;

    --page-background-image:
        url("../assets/images/background_feature.jpg");

}



/* =========================================================
   HINTERGRUND
========================================================= */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    background-image:

        var(--page-background-image),

        linear-gradient(
            125deg,
            #050505 0%,
            #020202 48%,
            #000 100%
        );

    background-size:
        cover,
        cover;

    background-position:
        center,
        center;

    background-repeat:
        no-repeat;
}


body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:
        rgba(0, 0, 0, 0.36);
}



/* =========================================================
   SEITE
========================================================= */

.page {

    width: 100vw;

    min-height: 100vh;
    min-height: 100svh;

    background:
        transparent;
}



/* =========================================================
   HEADER
========================================================= */

.header {

    position: relative;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    width: 100%;

    height: 9vh;

    min-height: 66px;

    padding:
        0
        3vw;

    background:
        transparent;
}



/* =========================================================
   HEADER BRAND
========================================================= */

.header-brand {

    justify-self: start;

    display: flex;

    align-items: baseline;

    gap:
        clamp(9px, 0.9vw, 15px);

    color: #fff;

    text-decoration: none;

    white-space: nowrap;
}


.brand-name {

    font-size:
        var(--font-size-1);

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.005em;
}


.brand-profession {

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.09em;

    color:
        rgba(255, 255, 255, 0.88);
}



/* =========================================================
   HEADER MITTE
========================================================= */

.header-section {

    justify-self: center;

    font-size:
        var(--font-size-1);

    font-weight: 300;

    line-height: 1;

    letter-spacing: 0.015em;

    white-space: nowrap;
}



/* =========================================================
   HEADER RECHTS
========================================================= */

.main-navigation {

    justify-self: end;

    display: flex;

    align-items: baseline;

    gap:
        clamp(20px, 2vw, 32px);
}


.main-navigation a {

    color:
        rgba(255, 255, 255, 0.84);

    text-decoration: none;

    font-size: 14px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.035em;

    transition:
        color 0.25s ease;
}


.main-navigation a:hover {

    color: #fff;
}



/* =========================================================
   ARBEITSFLÄCHE
========================================================= */

.workspace {

    display: grid;

    grid-template-columns:

        clamp(105px, 8.5vw, 150px)

        minmax(0, 1fr);

    grid-template-rows:

        auto
        auto
        1fr;

    grid-template-areas:

        "strip stage"
        ". information"
        ". remainder";

    align-content: start;

    column-gap:
        clamp(28px, 3.5vw, 65px);

    padding:

        var(--workspace-top)
        3vw
        2.5vh
        3vw;

    min-height:
        calc(91vh);

    background:
        transparent;
}



/* =========================================================
   PROJEKTSTREIFEN
========================================================= */

.strip-shell {

    grid-area:
        strip;

    display: grid;

    grid-template-rows:
        auto
        minmax(0, 1fr);

    row-gap: 7px;

    position: relative;

    width: 100%;
    height: 100%;

    min-height: 0;

    overflow: hidden;
}



/* =========================================================
   PROJECTS
========================================================= */

.projects-label {

    padding-left: 1px;

    font-size: 13px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.07em;

    color:
        rgba(255, 255, 255, 0.76);
}



/* =========================================================
   TRACK
========================================================= */

.strip-track {

    position: relative;

    min-height: 0;

    overflow: hidden;
}



/* =========================================================
   FILMSTRIP
========================================================= */

.filmstrip {

    position: absolute;

    left: 0;
    right: 0;

    top:
        var(--strip-edge);

    bottom:
        var(--strip-edge);

    display: flex;

    flex-direction: column;

    gap:
        clamp(6px, 0.5vw, 9px);

    overflow-x: hidden;
    overflow-y: auto;

    padding:
        29px
        0;

    scrollbar-width: none;

    -ms-overflow-style: none;

    -webkit-overflow-scrolling: touch;
}


.filmstrip::-webkit-scrollbar {

    display: none;
}



/* =========================================================
   THUMBNAILS
========================================================= */

.project-thumb {

    position: relative;

    flex:
        0
        0
        auto;

    width: 100%;

    aspect-ratio:
        16 / 9;

    margin: 0;
    padding: 0;

    border: 0;

    overflow: hidden;

    background:
        rgba(0, 0, 0, 0.60);

    cursor: pointer;

    filter:
        grayscale(50%)
        brightness(80%);

    transition:
        filter 0.35s ease;
}


.project-thumb img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    pointer-events: none;
}


.project-thumb:hover,
.project-thumb.active {

    filter:
        grayscale(0%)
        brightness(100%);
}


.project-thumb.active::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.9);
}



/* =========================================================
   SCROLLPFEILE
========================================================= */

.strip-arrow {

    position: absolute;

    left: 0;

    width: 100%;
    height: 28px;

    z-index: 20;

    padding: 0;

    border: 0;

    color:
        rgba(255, 255, 255, 0.55);

    background:
        rgba(0, 0, 0, 0.64);

    font-family:
        "Avenir Next",
        Avenir,
        sans-serif;

    font-size: 16px;

    font-weight: 200;

    cursor: pointer;
}


.strip-arrow:hover {

    color: #fff;

    background:
        rgba(0, 0, 0, 0.82);
}


.strip-arrow-up {

    top:
        var(--strip-edge);
}


.strip-arrow-down {

    bottom:
        var(--strip-edge);
}



/* =========================================================
   FILMBEREICH
========================================================= */

.project-stage {

    grid-area:
        stage;

    position: relative;

    width: 100%;

    aspect-ratio:
        var(--media-ratio);

    max-height:

        max(
            240px,

            calc(
                100svh
                - 9vh
                - var(--workspace-top)
                - var(--info-reserve)
                - 2.5vh
            )
        );

    min-width: 0;

    overflow: hidden;

    background:
        transparent;
}



/* =========================================================
   MEDIA LAYER
========================================================= */

.media-layer {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 1;

    transition:
        opacity 1s ease;

    background:
        transparent;
}


.media-layer.is-faded {

    opacity: 0;
}



/* =========================================================
   VIDEO / STILL
========================================================= */

.project-media {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    object-position:
        center center;

    background:
        transparent;
}


.project-still {

    z-index: 1;

    opacity: 1;

    transition:
        opacity 0.3s ease;
}


.project-still.hidden-media {

    opacity: 0;
}


.project-video {

    z-index: 2;

    opacity: 0;
}


.project-video.visible {

    opacity: 1;
}



/* =========================================================
   SOUND
========================================================= */

.sound-toggle {

    position: absolute;

    right: 15px;
    bottom: 14px;

    z-index: 30;

    padding:
        8px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    color:
        rgba(255, 255, 255, 0.82);

    background:
        rgba(0, 0, 0, 0.43);

    font-family:
        "Avenir Next",
        Avenir,
        "Helvetica Neue",
        sans-serif;

    font-size: 14px;

    font-weight: 400;

    letter-spacing: 0.045em;

    cursor: pointer;
}


.sound-toggle:hover {

    color: #fff;

    background:
        rgba(0, 0, 0, 0.65);
}


.hidden-control {

    opacity: 0;

    pointer-events: none;
}



/* =========================================================
   INFORMATION
========================================================= */

.project-information {

    grid-area:
        information;

    display: grid;

    grid-template-columns:

        minmax(0, 1fr)

        auto

        minmax(150px, 0.45fr);

    column-gap:
        clamp(20px, 2.3vw, 40px);

    align-items: start;

    min-height: 170px;

    padding-top: 14px;

    color: #fff;
}



/* =========================================================
   LINKER INFOBLOCK
========================================================= */

.project-info-left {

    justify-self: start;

    text-align: left;

    max-width: 760px;
}



/* =========================================================
   TITEL

   Jetzt identisch auf Desktop und Tablet.
========================================================= */

.project-title {

    margin-bottom: 10px;

    font-size: 22px;

    font-weight: 300;

    line-height: 1.2;

    letter-spacing: 0.01em;
}



/* =========================================================
   INFOTEXT

   Ebenfalls identisch auf Desktop und Tablet.
   Dadurch kein Sprung mehr bei 1400px.
========================================================= */

.project-meta {

    font-size: 16px;

    font-weight: 400;

    line-height: 1.52;

    color:
        rgba(255, 255, 255, 0.90);
}


.project-meta-line {

    min-height:
        1.52em;
}



/* =========================================================
   COUNTER
========================================================= */

.project-counter {

    justify-self: center;

    padding-top: 4px;

    font-size: 11px;

    font-weight: 300;

    letter-spacing: 0.08em;

    color:
        rgba(255, 255, 255, 0.52);
}



/* =========================================================
   RECHTS NUR LINKS
========================================================= */

.project-links {

    justify-self: end;

    text-align: right;

    padding-top: 3px;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.5;
}


.project-links a {

    display: block;

    color:
        rgba(255, 255, 255, 0.88);

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.28);

    margin-bottom: 8px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;
}


.project-links a:hover {

    color: #fff;

    border-color:
        rgba(255, 255, 255, 0.9);
}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {


    body {

        overflow-y: auto;
        overflow-x: hidden;
    }



    .header {

        height: 11vh;

        min-height: 72px;

        padding:
            0
            5vw;
    }


    .header-brand {

        display: block;
    }


    .brand-name {

        font-size: 17px;
    }


    .brand-profession {

        display: block;

        margin-top: 3px;

        font-size: 10px;

        font-weight: 400;
    }


    .header-section {

        font-size: 15px;
    }


    .main-navigation {

        gap: 10px;
    }


    .main-navigation a {

        font-size: 10px;

        font-weight: 400;
    }



    /* =====================================================
       WORKSPACE
    ====================================================== */

    .workspace {

        min-height: 0;

        grid-template-columns:
            1fr;

        grid-template-rows:

            auto
            13vh
            auto;

        grid-template-areas:

            "stage"
            "strip"
            "information";

        row-gap: 14px;

        padding:

            2vh
            5vw
            8vh
            5vw;
    }



    .project-stage {

        width: 100%;

        max-height: none;

        aspect-ratio:
            var(--media-ratio);
    }



    /* =====================================================
       PROJECT STRIP
    ====================================================== */

    .strip-shell {

        width: 100%;
        height: 100%;

        grid-template-rows:
            16px
            minmax(0, 1fr);

        row-gap: 5px;
    }


    .projects-label {

        font-size: 11px;

        font-weight: 400;
    }


    .filmstrip {

        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        flex-direction: row;

        width: 100%;
        height: 100%;

        gap: 7px;

        padding:
            0
            29px;

        overflow-x: auto;
        overflow-y: hidden;
    }


    .project-thumb {

        width: auto;
        height: 100%;

        aspect-ratio:
            16 / 9;
    }



    /* =====================================================
       MOBILE PFEILE
    ====================================================== */

    .strip-arrow {

        top: 0;
        bottom: auto;

        width: 30px;
        height: 100%;
    }


    .strip-arrow-up {

        left: 0;

        font-size: 0;
    }


    .strip-arrow-up::after {

        content: "‹";

        font-size: 24px;
    }


    .strip-arrow-down {

        left: auto;
        right: 0;

        font-size: 0;
    }


    .strip-arrow-down::after {

        content: "›";

        font-size: 24px;
    }



    /* =====================================================
       INFO MOBILE
    ====================================================== */

    .project-information {

        grid-template-columns:
            1fr
            auto;

        grid-template-areas:

            "left counter"
            "links links";

        row-gap: 14px;

        min-height: 0;

        padding-top: 0;
    }


    .project-info-left {

        grid-area: left;
    }


    .project-counter {

        grid-area: counter;

        font-size: 10px;
    }


    .project-links {

        grid-area: links;

        justify-self: start;

        text-align: left;

        font-size: 14px;
    }


    .project-title {

        font-size: 19px;

        margin-bottom: 9px;
    }


    .project-meta {

        font-size: 14px;

        line-height: 1.5;
    }


    .sound-toggle {

        padding:
            6px
            9px;

        font-size: 12px;
    }

}



/* =========================================================
   HANDYS QUER
========================================================= */

@media
    (max-height: 600px)
    and
    (max-width: 1000px) {


    body {

        overflow-y: auto;

        overflow-x: hidden;
    }


    .page {

        min-height:
            100svh;
    }


    .header {

        height: 70px;

        min-height: 70px;

        padding:
            0
            4vw;
    }


    .brand-name {

        font-size: 18px;
    }


    .brand-profession {

        font-size: 10px;
    }


    .header-section {

        font-size: 16px;
    }


    .main-navigation {

        gap: 14px;
    }


    .main-navigation a {

        font-size: 11px;
    }



    .workspace {

        min-height: 0;

        grid-template-columns:
            1fr;

        grid-template-rows:

            auto
            100px
            auto;

        grid-template-areas:

            "stage"
            "strip"
            "information";

        row-gap: 14px;

        padding:

            12px
            4vw
            55px
            4vw;
    }


    .project-stage {

        width: 100%;

        max-height: none;

        aspect-ratio:
            var(--media-ratio);
    }


    .strip-shell {

        width: 100%;
        height: 100%;

        grid-template-rows:
            16px
            minmax(0, 1fr);

        row-gap: 5px;
    }


    .projects-label {

        font-size: 11px;
    }


    .filmstrip {

        position: relative;

        top: auto;
        bottom: auto;
        left: auto;
        right: auto;

        flex-direction: row;

        width: 100%;
        height: 100%;

        gap: 7px;

        padding:
            0
            29px;

        overflow-x: auto;
        overflow-y: hidden;
    }


    .project-thumb {

        width: auto;
        height: 100%;

        aspect-ratio:
            16 / 9;
    }


    .strip-arrow {

        top: 0;
        bottom: auto;

        width: 30px;
        height: 100%;
    }


    .strip-arrow-up {

        left: 0;

        font-size: 0;
    }


    .strip-arrow-up::after {

        content: "‹";

        font-size: 24px;
    }


    .strip-arrow-down {

        left: auto;
        right: 0;

        font-size: 0;
    }


    .strip-arrow-down::after {

        content: "›";

        font-size: 24px;
    }


    .project-information {

        grid-template-columns:
            1fr
            auto;

        grid-template-areas:

            "left counter"
            "links links";

        row-gap: 12px;

        min-height: 0;

        padding-top: 0;
    }


    .project-info-left {

        grid-area: left;
    }


    .project-counter {

        grid-area: counter;

        font-size: 10px;
    }


    .project-links {

        grid-area: links;

        justify-self: start;

        text-align: left;

        font-size: 14px;
    }


    .project-title {

        font-size: 19px;
    }


    .project-meta {

        font-size: 14px;

        line-height: 1.5;
    }

}