*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

img,
picture {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    all: unset;
    box-sizing: border-box;
    &:focus-visible {
        outline: revert;
    }
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
}

/* Custom Properties */

:root {
    font-size: 62.5%;
    --clr-1: black;
    --clr-2: rgb(255, 255, 255);
    --clr-3: #626365;
    --font-size-xxs: 1rem;
    /* --font-size-xs: 1.3rem; */
    --font-size-xs: clamp(0.95rem, 0.6333rem + 0.5333vw, 1.1rem);
    --font-size-s: 1.7rem;
    --font-size-m: 2.25rem;
    --font-size-xl: 5rem;
    --gap-1: 1rem;
    --padding-1: 2rem;
}

@media screen and (width < 700px) {
    :root {
        --font-size-xxs: 0.8rem;
        /* --font-size-xs: 0.8rem; */
        --font-size-s: 1.5rem;
        --font-size-m: 1.8rem;
        --font-size-xl: 2rem;
    }
}

/* Fonts */

@font-face {
    font-family: "Time";
    src: url(/assets/fonts/Times_Now_Regular.otf);
}

.font-style-xsmall {
    font-family: "Helvetica Neue";
    font-size: var(--font-size-xs);
}

.font-style-small {
    font-family: "Helvetica Neue";
    font-size: var(--font-size-s);
}

.font-style-medium {
    font-family: "Helvetica Neue";
    font-size: var(--font-size-m);
    letter-spacing: -0.02rem;
    line-height: 110%;
}

.font-style-large {
    font-family: "Time";
    font-size: var(--font-size-xl);
    line-height: 120%;
}

strong {
    font-weight: inherit;
    font-size: var(--font-size-xxs);
    text-transform: uppercase;
}

/* General Styling */

html {
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

body {
    background-color: var(--clr-2);
    font-family: "Helvetica Neue";
}

.main {
    position: relative;
    z-index: 10;
}

a:hover,
.plus_icon:hover {
    cursor: pointer;
}


/* Header */

.header {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100%;
    font-size: 4rem;
    top: 1rem;
}

#logo_graphic {
    width: 50vw;
}
@media screen and (width < 600px) {
    #logo_graphic {
        width: 90vw;
    }
}

/* Features Section */

/* Landing */

.landing_section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.1s linear;
    /* z-index: 100;
    pointer-events: none; */
}

/* Grid */

#grid {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    margin-top: 100vh;
    gap: var(--gap-1);
}

.grid_item {
    width: 70vw;
    display: grid;
    grid-template-rows: max-content 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
}

@media screen and (width < 700px) {
    .grid_item {
        width: 95vw;
    }
}

.grid_item.active {
    grid-template-rows: max-content 1fr;
}

.grid_item-top {
    position: relative;
    aspect-ratio: 16/9;
}

.grid_item-top > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.grid_item-top img:not(.plus_icon img, .award_preview img) {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

    .overlay_content {
        z-index: 40;
        position: absolute;
    }

    .overlay_content > div {
        color: var(--clr-2);
    }

    /* Overlay Row 1 */
    .overlay_content > div:nth-child(1) {
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: absolute;
        padding-inline: calc(var(--gap-1) * 2);
        top: 50%;
        transform: translateY(-50%);
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .overlay_content > div:nth-child(1).disappear {
        transform: translateY(-55px);
        opacity: 0;
    }

        /* Overlay Title */
        .overlay_content > div:nth-child(1) > div:nth-child(1) {
            font-family: "Time";
            flex: 2;
        }
        /* Overlay Kurzinfos */
        .overlay_content > div:nth-child(1) > div:nth-child(2) {
            flex: 1;
            display: flex;
            justify-content: end;
            align-items: center;
            column-gap: var(--gap-1);
            text-transform: uppercase;
            flex-wrap: wrap;
            height: max-content;
            align-self: center;
        }

        @media screen and (width < 700px) {

            .overlay_content > div:nth-child(1) {
                padding-inline: var(--gap-1);
            }

            .overlay_content > div:nth-child(1) > div:nth-child(1) {
                flex: 2;
            }
            .overlay_content > div:nth-child(1) > div:nth-child(2) {
                flex: 3;
            }
        }

.main_image {
    z-index: 30;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}
.overlay_image {
    z-index: 20;
}
.main_image.invisible {
    opacity: 0;
}

/* Overlay Row 2 */
.overlay_content > div:nth-child(2) {
    width: 100%;
    display: flex;
    align-items: end;
    justify-content: space-between;
    position: absolute;
    top: 100%;
    transform: translateY(-100%);
    padding: calc(var(--gap-1) * 2);
}

    @media screen and (width < 700px) {
        .overlay_content > div:nth-child(2) {
            padding: var(--gap-1);
        }
    }

.award_preview {
    width: 7vw;
    opacity: 1;
    transition: opacity 0.4s ease-in-out;
}

.award_preview.disappear {
    opacity: 0;
}

.plus_icon {
    transform: translateY(0);
    transition: transform 0.4s ease-in-out;
}

#plus_svg {
    fill: var(--clr-2);
    transition: fill 0.4s ease-in-out;
    height: 2.2rem;
}

.plus_icon.slideDown {
    transform: translateY(6rem);
}

    @media screen and (width < 700px) {
        #plus_svg {
            height: 1.4rem;
        }
        .plus_icon.slideDown {
            transform: translateY(3.7rem);
        }
    }

.plus_icon.slideDown #plus_svg {
    fill: var(--clr-1);
}

.plus_icon.slideDown #plus_svg .plus-horizontal {
    opacity: 0;
}

.grid_item-bottom {
    overflow: hidden;
}

.grid_item-bottom-wrapper {
    margin-top: 2rem;
    padding: calc(var(--gap-1) * 2);
    color: var(--clr-3);
}

@media screen and (width < 700px) {
    .grid_item-bottom-wrapper {
        padding: var(--gap-1);
    }
}

.grid_item-bottom-wrapper > div {
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.4s ease-in-out;
}
.grid_item-bottom-wrapper > div.appear {
    transform: translateY(0);
    opacity: 1;
}

.grid_item-bottom-wrapper > div:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    /* @media screen and (width < 700px) {
        .grid_item-bottom-wrapper > div:nth-child(1) {
            flex-direction: column;
        }
    } */

    .grid_item-bottom-wrapper > div:nth-child(1) h2 {
        font-family: "Time";
        flex: 2;
    }
    .grid_item-bottom-wrapper > div:nth-child(1) div {
        display: flex;
        justify-content: end;
        align-items: center;
        flex-wrap: wrap;
        column-gap: var(--gap-1);
        text-transform: uppercase;
        flex: 1;
    }

    @media screen and (width < 700px) {
        .grid_item-bottom-wrapper > div:nth-child(1) h2 {
            flex: 2;
        }
        .grid_item-bottom-wrapper > div:nth-child(1) div {
            flex: 3;
        }
    }

.grid_item-bottom-wrapper > div:nth-child(2) {
    text-align: center;
    margin-block: 3.5rem;
}

    .grid_item-bottom-wrapper > div:nth-child(2) p:not(:last-child) {
        margin-bottom: 1rem;
    }

.grid_item-bottom-wrapper > div:nth-child(3) {
    display: flex;
}
    .grid_item-bottom-wrapper > div:nth-child(3) > div {
        flex: 1;
    }
    .grid_item-bottom-wrapper > div:nth-child(3) p:not(:last-child) {
        margin-bottom: 0.6rem;
    }

.grid_item-bottom-wrapper > div:nth-child(4) {
    /* border-top: 1px solid var(--clr-3); */
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
}

.grid_item-bottom-wrapper > div:nth-child(4) > div > span {
    background-color: red;
}

.grid_item-bottom-wrapper > div:nth-child(4) img{
    padding-block: 1rem;
    height: 5vw;
    min-height: 6rem;
}

/* Contact */

.contact {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--clr-3);
}

.contact_wrapper {
    width: 55vw;
    margin-top: -10rem;
}

    @media screen and (width < 700px) {
        .contact_wrapper {
            width: 80vw;
        }
    }

.contact_wrapper > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
}

    /* @media screen and (width < 700px) {
        .contact_wrapper > div:first-child {
            flex-direction: column;
        }
    } */

.contact_wrapper > div:first-child > div:last-child {
    text-transform: uppercase;
}


.contact_wrapper > div:last-child {
    text-align: center;
}


.contact_wrapper > div:last-child p {
    margin-bottom: 2rem;
}