.wrapper {
    display: flex;
    justify-content: center;
}
.kreis {
    width: 577px;
    height: 577px;
    /*border: 1px solid black;*/
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;


}

.imageelement img {
    width: 100%;
}

.imageelement.nr0 img {
    width: 100%;
    max-width: 540px;
}

.kreis > div {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;

    justify-content: center;
    align-items: center;
    display: none;
    width: 100%;
    height: 100%;
}



.innerkreis {

    border: 0px solid black;
    width: 305px !important;
    height: 305px !important;
    border-radius: 500px;
    background-color: #fff;
    z-index: 5;
    background: url("../images/icon-mitte-v2.png");

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 40% 79%;
    display: flex !important;
}

.textwrapper {
    display: none;
    justify-content: center;
    align-items: center;
    background: white;
    width: 305px !important;
    height: 305px !important;
    max-width: 305px !important;
    max-height: 305px !important;
    border-radius: 500px;

    overflow: hidden;
}

.modal-type {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #f6f6f6;
    min-height: 600px;
    margin-top: 20px;
}

.modalwrapper {
    position: absolute;
    display: none;
    width: 100%;
    background: #f6f6f6;
    height: 100%;
    z-index: 5;
    top: -20px;
}

.modalwrapper.display {
    display: block;
}

.modalitem {
    display: none;
}

.modalitem.display {
    display: inline-flex;
}

.kreismodal {
    width: 570px;
    height: 570px;
    border-width: 7px;
    border-radius: 50%;
    border-style: solid;
    text-align: center;
    padding: 100px;
    padding-top: 160px;

}
.step1 {
    border-color: #e2061e ;
}
.step2 {
    border-color: #d6a207 ;
}
.step3 {
    border-color: #249437 ;
}
.step4 {
    border-color: #c11628 ;
}
.step5 {
    border-color: #e6301c ;
}
.step6 {
    border-color: #00a7d7 ;
}
.step7 {
    border-color: #fbb800 ;
}
.step8 {
    border-color: #931831 ;
}
.step9 {
    border-color: #Ec640F ;
}
.step10 {
    border-color: #dd0979 ;
}
.step11 {
    border-color: #f59c0e ;
}
.step12 {
    border-color: #d28d0d ;
}
.step13 {
    border-color: #497635 ;
}
.step14 {
    border-color: #0076b8 ;
}
.step15 {
    border-color: #3ea635 ;
}
.step16 {
    border-color: #074c84 ;
}
.step17 {
    border-color: #1e3263 ;
}

.text {
    padding: 50px;
    text-align: center;
}

.display {
    display: flex !important;
}

.close {
    position: absolute;
    right: 0;
}

.arrow_left {
    position: absolute;
    top: 50%;
    left: 10%;
}

.active {
    display: none;
}

.arrow_left:hover .normal {
    display: none;
}
.arrow_left:hover .active {
    display: block;
}

.arrow_right {
    position: absolute;
    top: 50%;
    right: 10%;
}

.arrow_right:hover .normal {
    display: none;
}
.arrow_right:hover .active {
    display: block;
}

.modaltext {
    font-size: 14px;
    line-height: 18px;
    font-family: Arial;
}
.headline {
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    min-height: 60px;
}

.icon {
    height: 50px;
}

@media (max-width: 480px) {



    .kreis {
        width: 345px;
        height: 345px;
    }

    .modal-type {
        min-height: 400px;
    }

    .imageelement img {
        width: 100%;
    }

    .innerkreis {
        width: 160px !important;
        height: 160px !important;
    }
    .textwrapper {
        width: 160px !important;
        height: 160px !important;
        max-width: 160px !important;
        max-height: 160px !important;

    }
    .text {
        padding: 25px;
    }

    .kreismodal {
        width: 345px;
        height: 345px;
        padding: 50px;
        padding-top: 20px;
    }
    .arrow_left {
        top: 107%;
        left: 30%;
    }
    .arrow_right {
        top: 107%;
        right: 30%;
    }
}