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

* {
    box-sizing: border-box;
}


html,
body {

    margin:
        0;


    padding:
        0;


    width:
        100%;


    height:
        100%;


    background:
        #000;
}



/* =========================================================
   BODY + HINTERGRUND

   Background_about.jpg bleibt links verankert.
========================================================= */

body {

    overflow:
        hidden;


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


    color:
        #fff;


    -webkit-font-smoothing:
        antialiased;


    background-image:

        linear-gradient(
            rgba(0, 0, 0, 0.16),
            rgba(0, 0, 0, 0.16)
        ),

        url("../assets/about/Background_about.jpg");


    background-size:
        cover;


    background-position:
        left center;


    background-repeat:
        no-repeat;


    background-attachment:
        fixed;
}



/* =========================================================
   GRÖSSEN
========================================================= */

:root {

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


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

}



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

.page {

    width:
        100vw;


    height:
        100vh;


    height:
        100svh;


    overflow:
        hidden;


    background:
        transparent;
}



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

.header {

    position:
        relative;


    z-index:
        20;


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



/* =========================================================
   DESKTOP LAYOUT
========================================================= */

.about-layout {

    width:
        100%;


    height:
        calc(100svh - 9vh);


    display:
        grid;


    grid-template-columns:

        minmax(0, 0.92fr)

        minmax(500px, 1.08fr);


    gap:
        clamp(38px, 4.4vw, 80px);


    padding:

        clamp(15px, 1.7vh, 24px)

        3vw

        2.7vh

        3vw;
}



/* =========================================================
   LINKER BEREICH
========================================================= */

.profile-panel {

    position:
        relative;


    min-width:
        0;


    min-height:
        0;


    overflow:
        hidden;
}



/* =========================================================
   TEXT LINKS
========================================================= */

.profile-copy {

    position:
        relative;


    z-index:
        5;


    width:
        min(74%, 560px);


    height:
        100%;


    margin-left:
        auto;


    padding-top:
        clamp(8px, 1vh, 14px);


    padding-right:
        clamp(4px, 0.7vw, 12px);


    text-align:
        right;
}



/* =========================================================
   NAME
========================================================= */

.profile-name {

    font-size:
        clamp(22px, 1.65vw, 27px);


    font-weight:
        300;


    line-height:
        1.1;


    letter-spacing:
        0.01em;
}



/* =========================================================
   POSITION / LOCATION / EXPERIENCE
========================================================= */

.profile-role,
.profile-location,
.profile-experience {

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


    font-weight:
        300;


    line-height:
        1.5;
}


.profile-role {

    margin-top:
        8px;


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


.profile-location {

    margin-top:
        10px;


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


.profile-experience {

    margin-top:
        4px;


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



/* =========================================================
   NORTH KOREA

   Darf niemals zwischen North und Korea umbrechen.
========================================================= */

.no-break {

    white-space:
        nowrap;
}



/* =========================================================
   FILMOGRAPHY
========================================================= */

.filmography-row {

    display:
        flex;


    justify-content:
        flex-end;


    align-items:
        center;


    gap:
        11px;


    margin-top:
        clamp(18px, 2.6vh, 30px);
}


.filmography-label {

    font-size:
        clamp(11px, 0.8vw, 13px);


    font-weight:
        300;


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


.crew-link {

    display:
        block;


    height:
        clamp(24px, 2vw, 31px);


    opacity:
        0.88;


    transition:
        opacity 0.25s ease;
}


.crew-link:hover {

    opacity:
        1;
}


.crew-link img {

    display:
        block;


    width:
        auto;


    height:
        100%;


    object-fit:
        contain;
}



/* =========================================================
   BIO
========================================================= */

.bio-lines {

    margin-top:
        clamp(26px, 3.2vh, 38px);


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


    font-weight:
        300;


    line-height:
        1.48;


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


.bio-item {

    margin-bottom:
        clamp(13px, 1.55vh, 19px);
}


.bio-item:last-child {

    margin-bottom:
        0;
}



/* =========================================================
   CONTACT
========================================================= */

.contact-block {

    position:
        absolute;


    z-index:
        6;


    right:
        clamp(4px, 0.7vw, 12px);


    bottom:
        clamp(10px, 2vh, 28px);


    text-align:
        right;
}


.contact-label {

    margin-bottom:
        10px;


    font-size:
        clamp(11px, 0.8vw, 13px);


    font-weight:
        300;


    letter-spacing:
        0.12em;


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


.email-link {

    color:
        #fff;


    text-decoration:
        none;


    font-size:
        clamp(14px, 1vw, 16px);


    font-weight:
        300;


    transition:
        opacity 0.25s ease;
}


.email-link:hover {

    opacity:
        0.65;
}



/* =========================================================
   SOCIAL LOGOS
========================================================= */

.social-logos {

    display:
        flex;


    justify-content:
        flex-end;


    align-items:
        center;


    gap:
        clamp(28px, 4vw, 65px);


    margin-top:
        clamp(28px, 4vh, 48px);
}


.social-logos a {

    display:
        flex;


    align-items:
        center;


    justify-content:
        center;


    opacity:
        0.84;


    transition:

        opacity 0.25s ease,

        transform 0.25s ease;
}


.social-logos a:hover {

    opacity:
        1;


    transform:
        translateY(-2px);
}


.social-logo {

    display:
        block;


    width:
        auto;


    object-fit:
        contain;
}


.social-logo-instagram {

    height:
        clamp(30px, 2.7vw, 42px);
}


.social-logo-bvk {

    height:
        clamp(31px, 2.8vw, 43px);


    max-width:
        88px;
}


.social-logo-linkedin {

    height:
        clamp(30px, 2.7vw, 42px);
}



/* =========================================================
   NEWS PANEL
========================================================= */

.recent-panel {

    position:
        relative;


    display:
        flex;


    flex-direction:
        column;


    min-width:
        0;


    min-height:
        0;


    padding:

        clamp(14px, 1.5vw, 22px)

        clamp(16px, 1.7vw, 27px)

        clamp(15px, 1.6vw, 24px);


    background:
        rgba(38, 38, 38, 0.78);


    border:
        1px solid
        rgba(255, 255, 255, 0.035);
}



/* =========================================================
   NEWS KOPF
========================================================= */

.recent-topbar {

    position:
        relative;


    display:
        flex;


    align-items:
        center;


    min-height:
        34px;


    margin-bottom:
        clamp(10px, 1.3vh, 16px);
}


.recent-heading {

    font-size:
        clamp(17px, 1.2vw, 22px);


    font-weight:
        300;


    letter-spacing:
        0.13em;


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



/* =========================================================
   OBERE PFEILE
========================================================= */

.recent-top-arrows {

    position:
        absolute;


    left:
        50%;


    top:
        50%;


    transform:
        translate(-50%, -50%);


    display:
        flex;


    align-items:
        center;


    gap:
        11px;
}


.recent-arrow-top {

    width:
        36px;


    height:
        30px;


    padding:
        0;


    border:
        0;


    background:
        transparent;


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


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


    font-size:
        28px;


    font-weight:
        200;


    line-height:
        1;


    cursor:
        pointer;


    transition:
        color 0.25s ease;
}


.recent-arrow-top:hover {

    color:
        #fff;
}



/* =========================================================
   NEWS CONTENT
========================================================= */

.recent-content {

    flex:
        1
        1
        auto;


    min-height:
        0;


    display:
        flex;


    flex-direction:
        column;


    opacity:
        1;


    transition:
        opacity 0.42s ease;
}


.recent-content.is-faded {

    opacity:
        0;
}



/* =========================================================
   NEWS BILD
========================================================= */

.recent-image-wrap {

    position:
        relative;


    width:
        100%;


    flex:
        1
        1
        auto;


    min-height:
        240px;


    max-height:
        57vh;


    overflow:
        hidden;


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


.recent-image {

    width:
        100%;


    height:
        100%;


    display:
        block;


    object-fit:
        contain;


    object-position:
        center;


    background:
        transparent;
}



/* =========================================================
   PFEILE AUF DEM BILD
========================================================= */

.recent-arrow {

    position:
        absolute;


    z-index:
        15;


    top:
        50%;


    transform:
        translateY(-50%);


    width:
        clamp(38px, 3.2vw, 52px);


    height:
        clamp(65px, 6vw, 90px);


    padding:
        0;


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


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


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


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


    font-size:
        clamp(35px, 3vw, 48px);


    font-weight:
        200;


    cursor:
        pointer;


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


.recent-arrow:hover {

    color:
        #fff;


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


.recent-arrow-left {

    left:
        8px;
}


.recent-arrow-right {

    right:
        8px;
}



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

.recent-meta-row {

    display:
        flex;


    justify-content:
        space-between;


    align-items:
        baseline;


    gap:
        20px;


    margin-top:
        12px;
}


.recent-date,
.recent-counter {

    font-size:
        clamp(11px, 0.8vw, 13px);


    font-weight:
        300;


    letter-spacing:
        0.04em;


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



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

.recent-title {

    margin-top:
        8px;


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


    font-weight:
        300;


    line-height:
        1.15;
}



/* =========================================================
   NEWS TEXT
========================================================= */

.recent-text {

    margin-top:
        7px;


    max-width:
        660px;


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


    font-weight:
        300;


    line-height:
        1.48;


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



/* =========================================================
   KLEINERE LAPTOPS
========================================================= */

@media (max-width: 1050px) {


    .about-layout {

        grid-template-columns:

            minmax(0, 0.88fr)

            minmax(440px, 1.12fr);


        gap:
            30px;
    }


    .profile-copy {

        width:
            80%;
    }


    .bio-lines,
    .profile-role,
    .profile-location,
    .profile-experience {

        font-size:
            12px;
    }

}



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

@media (max-width: 700px) {


    html,
    body {

        height:
            auto;
    }


    body {

        overflow-x:
            hidden;


        overflow-y:
            auto;


        background-attachment:
            scroll;
    }


    .page {

        height:
            auto;


        min-height:
            100svh;


        overflow:
            visible;
    }



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

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



    /* =====================================================
       STACK
    ====================================================== */

    .about-layout {

        display:
            block;


        height:
            auto;


        padding:

            3vh
            5vw
            8vh;
    }



    /* =====================================================
       PROFILE
    ====================================================== */

    .profile-panel {

        min-height:
            760px;


        overflow:
            hidden;
    }


    .profile-copy {

        width:
            100%;


        margin:
            0;


        padding:
            0;


        text-align:
            right;
    }


    .profile-name {

        font-size:
            23px;
    }


    .profile-role,
    .profile-location,
    .profile-experience,
    .bio-lines {

        font-size:
            13px;
    }


    .filmography-row {

        margin-top:
            23px;
    }


    .bio-lines {

        margin-top:
            30px;
    }


    .bio-item {

        margin-bottom:
            13px;
    }



    /* =====================================================
       CONTACT
    ====================================================== */

    .contact-block {

        right:
            0;


        bottom:
            18px;
    }


    .social-logos {

        gap:
            35px;


        margin-top:
            31px;
    }



    /* =====================================================
       NEWS
    ====================================================== */

    .recent-panel {

        margin-top:
            38px;


        padding:
            16px;
    }


    .recent-heading {

        font-size:
            16px;
    }


    .recent-top-arrows {

        left:
            58%;
    }


    .recent-image-wrap {

        height:
            57vw;


        min-height:
            0;


        max-height:
            none;


        flex:
            none;
    }


    .recent-title {

        font-size:
            19px;
    }


    .recent-text {

        font-size:
            13px;
    }


    .recent-arrow {

        width:
            38px;


        height:
            62px;


        font-size:
            34px;
    }

}