#dot-grid-bg {
    position: absolute;
    top: 10vw;
    bottom: 10vw;
    left: 10vw;
    right: 10vw;
    --cols: calc(round(6 + 15 * ((100vw - 500px) / 1180)));
    /* bei 500px sind es 6 Spalten, bei 1680px sind es 21 Spalten */
    background-image: url('/images/dot.svg');
    background-repeat: repeat;
    pointer-events: none;
    z-index: -9999 !important;
}

#content {
    margin: 150px 200px 0 200px;
    /* top, right, bottom, left */
}

.headline {
    font-family: 'Doto_Rounded-Black', system-ui, Arial, sans-serif;
    font-size: 25px;
    max-width: 100%;
    margin-top: 100px;
}

/* Orange highlight for headline parts */
.headline .highlight {
    color: #FF4000;
}

.text-body {
    font-family: 'NeueHaasDisplayRoman', system-ui, Arial, sans-serif;
    font-size: 13px;
    line-height: 17px;
    margin-top: 20px;
    color: #000000;
    column-gap: 40px;
    text-align: justify;
}

#text1 {
    width: calc(66.67% - 13.33px);
    /* 2/3 width minus 1/3 the column gap */
    columns: 2;
}

#text2 {
    width: 100%;
    columns: 3;
}

@media (max-width: 1300px) {
    #text1 {
        width: 100%;
    }

    #text2 {
        columns: 2;
    }
}

@media (max-width: 1000px) {
    #content {
        margin: 10vw 10vw 0 10vw;
        /* top, right, bottom, left */
    }

    .headline {
        margin-top: 15vw;
    }

    #text1 {
        columns: 1;
    }

    #text2 {
        columns: 1;
    }
}

@media (max-width: 500px) {
    #content {
        margin: 0 5vw 0 5vw;
        /* top, right, bottom, left */
    }
}