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

* {
    box-sizing: border-box;
}


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

    width: 100%;
    height: 100%;

    background: #000;
}



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

body {

    overflow: hidden;

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

    color: #fff;

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

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

}



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



/* =========================================================
   DESKTOP + TABLET LAYOUT

   Kein 1400px-Typografie-Sprung mehr.
========================================================= */

.about-layout {

    width: 100%;

    height:
        calc(100svh - 9vh);

    display: grid;

    grid-template-columns:

        minmax(0, 0.92fr)

        minmax(420px, 1.08fr);

    gap:
        clamp(26px, 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(88%, 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(23px, 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: 15px;

    font-weight: 400;

    line-height: 1.5;
}


.profile-role {

    margin-top: 8px;

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


.profile-location {

    margin-top: 10px;

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


.profile-experience {

    margin-top: 4px;

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



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

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

    font-weight: 400;

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


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

    font-weight: 400;

    line-height: 1.5;

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


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

    font-weight: 400;

    letter-spacing: 0.12em;

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


.email-link {

    color: #fff;

    text-decoration: none;

    font-size: 16px;

    font-weight: 400;

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

    font-weight: 400;

    letter-spacing: 0.04em;

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



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

.recent-title {

    margin-top: 8px;

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

    font-weight: 300;

    line-height: 1.15;
}



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

.recent-text {

    margin-top: 7px;

    max-width: 660px;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.5;

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



/* =========================================================
   SCHMALERE TABLETS

   Nur Layoutanpassung.
   Keine Änderung der Schriftgrößen mehr.
========================================================= */

@media
    (min-width: 701px)
    and
    (max-width: 1050px) {


    .about-layout {

        grid-template-columns:

            minmax(0, 0.88fr)

            minmax(390px, 1.12fr);

        gap:
            clamp(20px, 2.5vw, 28px);
    }


    .profile-copy {

        width: 94%;
    }

}



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


    .header-section {

        font-size: 15px;
    }


    .main-navigation {

        gap: 10px;
    }


    .main-navigation a {

        font-size: 10px;
    }



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

        font-size: 15px;
    }


    .filmography-row {

        margin-top: 23px;
    }


    .filmography-label {

        font-size: 13px;
    }


    .bio-lines {

        margin-top: 30px;

        font-size: 15px;
    }


    .bio-item {

        margin-bottom: 13px;
    }



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

    .contact-block {

        right: 0;

        bottom: 18px;
    }


    .email-link {

        font-size: 15px;
    }


    .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-date,
    .recent-counter {

        font-size: 12px;
    }


    .recent-title {

        font-size: 19px;
    }


    .recent-text {

        font-size: 15px;
    }


    .recent-arrow {

        width: 38px;

        height: 62px;

        font-size: 34px;
    }

}



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

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


    html,
    body {

        height: auto;
    }


    body {

        overflow-x: hidden;

        overflow-y: auto;

        background-attachment: scroll;
    }


    .page {

        height: auto;

        min-height: 100svh;

        overflow: visible;
    }



    .header {

        height: 70px;

        min-height: 70px;

        padding:
            0
            4vw;
    }


    .header-brand {

        display: block;
    }


    .brand-name {

        font-size: 18px;
    }


    .brand-profession {

        display: block;

        margin-top: 3px;

        font-size: 10px;
    }


    .header-section {

        font-size: 16px;
    }


    .main-navigation {

        gap: 14px;
    }


    .main-navigation a {

        font-size: 11px;
    }



    .about-layout {

        display: block;

        height: auto;

        padding:

            20px
            4vw
            60px;
    }



    .profile-panel {

        min-height: 620px;

        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: 15px;

        line-height: 1.5;
    }


    .bio-lines {

        margin-top: 25px;
    }


    .bio-item {

        margin-bottom: 11px;
    }


    .filmography-row {

        margin-top: 20px;
    }


    .filmography-label {

        font-size: 13px;
    }



    .contact-block {

        right: 0;

        bottom: 15px;
    }


    .social-logos {

        margin-top: 24px;
    }



    .recent-panel {

        margin-top: 30px;

        padding: 16px;
    }


    .recent-image-wrap {

        height: 55vw;

        max-height: 480px;

        min-height: 0;

        flex: none;
    }


    .recent-date,
    .recent-counter {

        font-size: 12px;
    }


    .recent-text {

        font-size: 15px;
    }

}