.beschreibung {
    position: absolute;
    display: block;
    right: 342px;
    top: 460px;
    width: 350px;
    margin: 0;
}


.circleblue {
    width: 30px;
    height: 30px;
    background: blue;
    border-radius: 50%;
    position: absolute;
    right: 655px;
    top: 420px;
}

.circlerot {
 width: 30px;
 height: 30px;
 background: red;
 border-radius: 50%;
 position: absolute;
 right: 600px;
 top: 420px;
}

.circlepink {
    width: 30px;
    height: 30px;
    background: rgb(255, 0, 140);
    border-radius: 50%;
    position: absolute;
    right: 550px;
    top: 420px;
}

.circlegelb-hell {
    width: 30px;
    height: 30px;
    background: rgb(240, 229, 99);
    border-radius: 50%;
    position: absolute;
    right: 585px;
    top: 420px;
}

.circlebraun {
    width: 30px;
    height: 30px;
    background: rgb(203, 132, 33);
    border-radius: 50%;
    position: absolute;
    right: 620px;
    top: 420px;
}


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

    body .circlerot {
        right: 400px;
        
    }

    .circleblue {
        right: 455px;
    }

    .circlebraun {
        right: 420px;
    }

    .circlegelb-hell {
        right: 385px;
    }

    .circlepink {
        right: 350px;
    }

}


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

    body .circlerot {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 1120px;
        margin: 0px 0px 0px -105px;
    }


    body .circleblue {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 1120px;
        margin: 0px 0px 0px -155px;
    }

    body .circlebraun {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 1120px;
        margin: 0px 0px 0px -120px;
    }


    body .circlegelb-hell {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 1120px;
        margin: 0px 0px 0px -85px;
    }


    body .circlepink {
        display: block;
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        top: 1120px;
        margin: 0px 0px 0px -50px;
    }

    body .beschreibung {
        display: block;
        position: absolute;
        left: 50%;
        width: 350px;
        transform: translate(-50%);
        top: 1165px;
        margin-bottom: 25px;
        padding-bottom: 25px;
    }

}

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

    body .circlerot {
        top: 1090px;
    }


    body .circleblue {
        top: 1090px;
    }

    body .beschreibung {
        top: 1135px;
    }

    body .circlebraun {
        top: 1090px;
    }

    body .circlegelb-hell {
        top: 1090px;
    }

    body .circlepink {
        top: 1090px;
    }

}

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

    body .circlerot {
        top: 1065px;
    }


    body .circleblue {
        top: 1065px;
    }

    body .beschreibung {
        top: 1110px;
    }


    body .circlebraun {
        top: 1065px;
    }

    body .circlegelb-hell {
        top: 1065px;
    }

    body .circlepink {
        top: 1065px;
    }

}

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

    body .circlerot {
        top: 1040px;
    }


    body .circleblue {
        top: 1040px;
    }

    body .beschreibung {
        top: 1085px;
    }


    body .circlebraun {
        top: 1040px;
    }

    body .circlegelb-hell {
        top: 1040px;
    }

    body .circlepink {
        top: 1040px;
    }

}