@media (max-width: 1106px) {
    .col-60,
    .col-60 img {
        width: 100%;
    }

    .bg-gruen,
    .bg-weiss {
        background: var(--gruentrans);
        font-size: 22px;
        color: var(--weiss);
        padding: 20px;
        width: 100%;
    }

    .bg-gruen,
    .bg-weiss a,
    .bg-weiss span {
        color: var(--weiss);
        text-shadow: 1px 1px var(--textschatten);
    }

    .bg-weiss {
        margin-top: 0;
        padding-top: 1px;
        padding-bottom: 45px;
    }

    .col-40 {
        width: 50%;
        float: none;
        margin: 0 auto;
        position: absolute;
    }

    .col-60 img {
        width: 100%;
    }

    img {
        object-position: 40% 40%;
        object-fit: cover;
        height: 100vh;
    }
}

@media (max-width: 900px) {
    .col-40 {
        width: 70%;
    }
}

@media (max-width: 630px) {
    .bg-gruen,
    .bg-weiss a,
    .bg-weiss span {
        font-size: 18px;
    }

    .bg-gruen,
    .bg-weiss {
        padding: 10px;
    }
}

@media (max-width: 550px) {
    .col-40 {
        width: 100%;
    }

    ul {
        padding-inline-start: 20px;
    }

    .col-60 img {
        width: 100%;
    }

    img {
        object-position: 40% 40%;
        object-fit: cover;
    }

    .bg-gruen {
        margin-top: 15vh;
    }

    .bg-gruen, .bg-weiss {
        width: auto;
    }
}

@media (max-width: 470px) {
    h1 {
        font-size: 32px;
        margin-top: 50px;
    }

    h2 {
        font-size: 24px;
    }

    .inhalt-us {
        width: 90%;
        max-width: none;
    }
}