.grid-container {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto 100% auto 60% auto auto;
    grid-template-areas:
        "nav nav nav nav"
        "header header header header"
        "main main main main"
        "section1 section1 section2 section2"
        "section3 section3 section3 section3"
        "footer footer footer footer";
}

.grid-container header {
    grid-area: header;
    margin-top: 4rem;
    background-image: url("../../assets/images/bh_rechts.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.grid-container main {
    grid-area: main;
    position: absolute;
    top: 0;
    left: 10%;
    width: 30%;
    height: 100%;
    z-index: 1;
    color: #ffffff;
    display: flex;
    justify-content: center; 
    align-items: center;
}

.grid-container main .text-wrapper h1 {
    margin: 6rem 0 2rem 0;
    line-height: 5rem;
}

.grid-container main .text-wrapper p {
    margin-top: 2rem;
}

.grid-container .section1 {
    grid-area: section1;
    height: auto;
    background-image: url("../../assets/images/hg_neuro.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.grid-container .section2 {
    grid-area: section2;
    background-image: url("../../assets/images/hg_voice.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.grid-container .section3 {
    grid-area: section3;
    background-color: #c5d4d3;
}

.grid-container .section1 .section-text,
.grid-container .section2 .section-text  {
    width: 80%;
    margin: 1rem auto 0 auto;
    color: #ffffff;
}

/*.grid-container .section-text h2 {
    text-transform: uppercase;
}*/

.grid-container .section3 .section-text {
    width: 90%;
    margin: 1.5rem auto 1.5rem auto;
}

.grid-container .section1 .section-text a,
.grid-container .section2 .section-text a {
    color: #ffffff;
}

.grid-container .section3 .section-text a {
    color: #000000;
}

.grid-container .section3 .section-text h2 {
    font-size: 1.5rem;
}


@media screen and (max-width: 1024px) {

    .grid-container {
        height: 100vh;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 100% auto 60% 60% auto auto;
        /*grid-template-rows: auto 100% 50% 50% auto auto;*/
        grid-template-areas:
            "nav"
            "header"
            "main"
            "section1"
            "section2"
            "section3"
            "footer";
    }

    .grid-container header {
        grid-area: header;
        background-image: url("../../assets/images/bh_center.jpg");
        background-position: center;
    }

    .grid-container main {
        grid-area: main;
        position: static;
        width: 100%;
        /*max-width: 500px;*/
        z-index: 0;
        color: #000000;
        display: flex;
        justify-content: center; 
        align-items: center;
    }

    .grid-container main .text-wrapper {
        width: 80%;
        margin: 3rem 0 3rem 0;
    }

    .grid-container main .text-wrapper h1 {
        line-height: 4rem;
        margin: 0 0 2rem 0;
    }

    h2 {
        font-size: calc(2vw + 1.5rem);
    }

    .grid-container nav .logo-wrapper {
        position: static;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        margin: 0.5rem 0 0 0;
    }

    .grid-container nav ul {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 0 1.5rem;
        margin: 0.5rem 0 0.5rem 0;
    }
}