/* inter-300 - latin */
@font-face {
    font-display : swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family  : "Inter";
    font-style   : normal;
    font-weight  : 300;
    src          : url("../fonts/inter-v13-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-700 - latin */
@font-face {
    font-display : swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family  : "Inter";
    font-style   : normal;
    font-weight  : 700;
    src          : url("../fonts/inter-v13-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-900 - latin */
@font-face {
    font-display : swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family  : "Inter";
    font-style   : normal;
    font-weight  : 900;
    src          : url("../fonts/inter-v13-latin-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    display     : flex;
    align-items : stretch;
    min-height  : 100vh;
    font-family : "Inter", sans-serif;
    font-weight : 300;
    font-size   : 16px;
    line-height : 1.375;
    color       : #fff;
}

.bg-image {
    height              : 100%;
    background-image    : url("../images/bg-kopfsprung.jpg");
    background-repeat   : no-repeat;
    background-size     : cover;
    background-position : center;
}

.left-side {
    display          : flex;
    justify-content  : center;
    padding-top      : 145px;
    padding-bottom   : 50px;
    background-color : rgba(0, 0, 0, 0.5);

    > div {
        display        : flex;
        flex-direction : column;
    }
}

.left-side-inner {
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    padding-left    : 24%;
    flex-grow       : 1;
}

.right-side img {
    display : none;
}

.text-wrapper {
    max-width     : 303px;
    margin-bottom : 35px;
}

.address-wrapper {
    font-size     : 22px;
    line-height   : 1.36;
    margin-bottom : 35px;
}

strong {
    font-weight : 900;
}

.linkedin-wrapper a {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    column-gap     : 10px;
    font-size      : 16px;
    font-weight    : 700;
}

.icon-linkedin {
    width  : 24px;
    height : 24px;
}

.quicklink {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    margin-top     : auto;
    column-gap     : 9px;
    width          : fit-content;
}

.logo {
    max-width     : 100%;
    width         : 350px;
    margin-bottom : 150px;
}

a {
    color           : #fff;
    text-decoration : none;
}

a:hover {
    color           : #fff;
    text-decoration : none;
}

@media screen and (max-width : 1399.98px) {
    .bg-image {
        height           : auto;
        background-image : none;
        padding-left     : 0;
        padding-right    : 0;
    }

    .left-side {
        justify-content  : center;
        background-color : #000;
        padding-top      : 100px;
        padding-bottom   : 100px;

        > div {
            margin-left : -95px;
        }
    }

    .right-side {
        display : none;
    }

    .right-side img {
        display : block;
    }

    .quicklink {
        margin-top : 50px;
    }

    .logo {
        margin-bottom : 100px;
    }
}

@media screen and (max-width : 575.98px) {
    .logo {
        margin-bottom : 100px;
    }

    .left-side {
        padding-top    : 100px;
        padding-bottom : 100px;

        > div {
            margin-left : 0;
        }
    }

    .left-side-inner {
        padding-left : unset;
        max-width    : 80vw;
    }

    .text-wrapper {
        max-width : 100%;
    }

    .quicklink {
        margin-top : 50px;
    }
}