/* =========================================================
   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;
}



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

:root {

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


    --font-size-2:
        clamp(12px, 1vw, 15px);


    --media-ratio:
        1.7777778;


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


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


    --info-reserve:
        165px;


    --page-background-image:
        url("../assets/images/background_commercial.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.34);
}



/* =========================================================
   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 LINKS
========================================================= */

.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:
        var(--font-size-2);


    font-weight:
        300;


    line-height:
        1;


    letter-spacing:
        0.09em;


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



/* =========================================================
   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.72);


    text-decoration:
        none;


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


    font-weight:
        300;


    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;
}



/* =========================================================
   PROJEKTSPALTE
========================================================= */

.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:
        clamp(11px, 0.82vw, 13px);


    font-weight:
        300;


    line-height:
        1;


    letter-spacing:
        0.07em;


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



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

.strip-track {

    position:
        relative;


    min-height:
        0;


    overflow:
        hidden;
}



/* =========================================================
   STILLSTREIFEN
========================================================= */

.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);
}



/* =========================================================
   STILL-PFEILE
========================================================= */

.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;


    transition:
        color 0.25s ease,
        background 0.25s ease;
}



.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);
}



/* =========================================================
   MEDIENFLÄCHE
========================================================= */

.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;
}



/* =========================================================
   PROJEKT-FADE
========================================================= */

.media-layer {

    position:
        absolute;


    inset:
        0;


    width:
        100%;


    height:
        100%;


    opacity:
        1;


    transition:
        opacity 1s ease;


    background:
        transparent;
}



.media-layer.is-faded {

    opacity:
        0;
}



/* =========================================================
   MEDIEN
========================================================= */

.project-media {

    position:
        absolute;


    inset:
        0;


    width:
        100%;


    height:
        100%;


    display:
        block;


    object-fit:
        contain;


    object-position:
        center
        center;


    background:
        transparent;
}



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

.project-still {

    z-index:
        1;


    opacity:
        1;


    transition:
        opacity 0.3s ease;
}



.project-still.hidden-media {

    opacity:
        0;
}



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

.project-video {

    z-index:
        2;


    opacity:
        0;
}



.project-video.visible {

    opacity:
        1;
}



/* =========================================================
   SLIDESHOW
========================================================= */

.slideshow {

    position:
        absolute;


    inset:
        0;


    z-index:
        3;


    background:
        transparent;


    opacity:
        0;


    pointer-events:
        none;
}



.slideshow.visible {

    opacity:
        1;
}



/* =========================================================
   FOTO
========================================================= */

.slide-image {

    position:
        absolute;


    inset:
        0;


    width:
        100%;


    height:
        100%;


    object-fit:
        contain;


    object-position:
        center
        center;


    opacity:
        0;


    transition:
        opacity 1s ease;


    background:
        transparent;
}



.slide-image.active {

    opacity:
        1;
}



/* =========================================================
   FOTO-PFEILE
========================================================= */

.slide-arrow {

    position:
        absolute;


    top:
        50%;


    z-index:
        20;


    transform:
        translateY(-50%);


    width:
        42px;


    height:
        70px;


    padding:
        0;


    border:
        0;


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


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


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


    font-size:
        36px;


    font-weight:
        200;


    cursor:
        pointer;


    transition:
        opacity 0.25s ease,
        color 0.25s ease,
        background 0.25s ease;
}



.slide-arrow:hover {

    color:
        #fff;


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



.slide-arrow-left {

    left:
        10px;
}



.slide-arrow-right {

    right:
        10px;
}



/* =========================================================
   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:
        13px;


    font-weight:
        300;


    letter-spacing:
        0.045em;


    cursor:
        pointer;


    transition:
        color 0.25s ease,
        background 0.25s ease,
        opacity 0.25s ease;
}



.sound-toggle:hover {

    color:
        #fff;


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



.hidden-control {

    opacity:
        0;


    pointer-events:
        none;
}



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

   LINKS:
   alle normalen Informationen

   MITTE:
   Counter

   RECHTS:
   ausschließlich externe Links
========================================================= */

.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:
        150px;


    padding-top:
        14px;


    color:
        #fff;
}



/* =========================================================
   INFO LINKS
========================================================= */

.project-info-left {

    justify-self:
        start;


    text-align:
        left;


    max-width:
        800px;
}



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

.project-title {

    margin-bottom:
        8px;


    font-size:
        clamp(18px, 1.35vw, 22px);


    font-weight:
        300;


    line-height:
        1.2;


    letter-spacing:
        0.01em;
}



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

.project-meta {

    font-size:
        clamp(13px, 0.95vw, 15px);


    font-weight:
        300;


    line-height:
        1.5;


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



.project-meta-line {

    min-height:
        1.5em;
}



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

.project-counter {

    justify-self:
        center;


    padding-top:
        4px;


    font-size:
        clamp(10px, 0.7vw, 11px);


    font-weight:
        300;


    letter-spacing:
        0.08em;


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



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

.project-links {

    justify-self:
        end;


    text-align:
        right;


    padding-top:
        3px;


    font-size:
        clamp(12px, 0.86vw, 14px);


    font-weight:
        300;


    line-height:
        1.5;
}



.project-links a {

    display:
        block;


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


    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.90);
}



/* =========================================================
   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:
            9px;
    }



    .header-section {

        font-size:
            15px;
    }



    .main-navigation {

        gap:
            10px;
    }



    .main-navigation a {

        font-size:
            9px;
    }



    /* =====================================================
       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
            6vh
            5vw;
    }



    .project-stage {

        width:
            100%;


        max-height:
            none;


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



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

    .strip-shell {

        width:
            100%;


        height:
            100%;


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


        row-gap:
            5px;
    }



    .projects-label {

        font-size:
            10px;
    }



    /* =====================================================
       HORIZONTALER STILLSTREIFEN
    ====================================================== */

    .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 STILL-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;
    }



    .project-links {

        grid-area:
            links;


        justify-self:
            start;


        text-align:
            left;
    }



    .project-title {

        font-size:
            17px;
    }



    .project-meta {

        font-size:
            12px;
    }



    .slide-arrow {

        width:
            34px;


        height:
            55px;


        font-size:
            30px;
    }



    .sound-toggle {

        padding:
            6px
            9px;


        font-size:
            11px;
    }

}