.ladepunkte-container .content-wrapper {
    /*width: 100%;*/
    background-color: #93b1cc;
    position: relative;
}

.ladepunkte-container .row {
    background-color: #93b1cc;
}

.ladepunkte-container .ladesaeule {
    float: left;
    position: relative;
    text-align: center;
}

.ladepunkte-container .diagramm {
    width: 50%;
    float: right;
}

.ladepunkte-container #header,
.ladepunkte-container #update,
.ladepunkte-container #quelle {
    margin-left: 1.2rem;
    z-index: 100;
    padding-bottom: .2rem;
}

.ladepunkte-container #header {
    margin-top: 1.2rem;
}

.ladepunkte-container .circle {
    position: relative;
}

.ladepunkte-container #quelle {
    font-size: 0.8rem;
    color: #001e32;
    font-family: 'Roboto Condensed', sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-bottom: 0;
}

.ladepunkte-container #svg {
    max-width: 22rem;
}


/*small*/

@media(min-width: 0px) {
    .ladepunkte-container #svg {
        display: block;
        width: 100%;
        margin: auto;
        min-height: 22rem;
    }
    .ladepunkte-container #fullCircle {
        stroke: #002b45;
    }
    .ladepunkte-container #variableCircle {
        transform-origin: center;
        transform: rotate(-90deg);
        stroke: #5482ab;
    }
    .ladepunkte-container #circleText {
        text-anchor: middle;
        color: #ffffff;
        font-size: 1.8rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        position: absolute;
        width: 100%;
        top: 48%;
        text-align: center;
    }
    .ladepunkte-container #percent {
        font-size: 3.5rem;
        color: #002b45;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 35%;
    }
    .ladepunkte-container #ladesaeule {
        width: 100%;
    }
    .ladepunkte-container #ladesaeule_img {
        margin-left: 1%;
        align-self: center;
        height: 33.3rem;
    }
    .ladepunkte-container #textfeld {
        position: absolute;
        top: 16rem;
        color: #ffffff;
        font-size: 3rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        left: 6%;
        width: 54%;
        text-align: center;
    }
    .ladepunkte-container #header {
        width: 100%;
        font-size: 1.9rem;
        color: #001e32;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
    }
    .ladepunkte-container #update {
        font-size: 1.1rem;
        width: 100%;
        top: 0rem;
        color: #001e32;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 400;
    }
    .ladepunkte-container .lade-text {
        display: block;
        margin: auto auto;
        position: relative;
        width: fit-content;
    }
    .ladepunkte-container #ladepunkte {
        font-size: 1.6rem;
        color: #001e32;
        position: absolute;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        top: 10rem;
        left: 6%;
    }
    .ladepunkte-container .svgWrapper {
        display: block;
        margin: auto;
        justify-content: center;
        align-items: center;
    }
    .ladepunkte-container .circle {
        display: block;
        margin: auto auto;
        position: relative;
    }
    .ladepunkte-container #diagram {
        margin-bottom: 3rem;
    }
}

@media (min-width: 524px) {
    .ladepunkte-container #svg {
        width: 70%;
    }
}

@media(min-width: 992px) {
    .ladepunkte-container #svg {
        display: block;
        margin: auto;
        width: 100%;
    }
    .ladepunkte-container .svgWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .ladepunkte-container #fullCircle {
        fill: none;
        stroke: #002b45;
    }
    .ladepunkte-container #variableCircle {
        transform-origin: center;
        transform: rotate(-90deg);
        stroke: #5482ab;
    }
    .ladepunkte-container #circleText {
        text-anchor: middle;
        color: #ffffff;
        font-size: 1.8rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        position: absolute;
        width: 100%;
        top: 50%;
        text-align: center;
    }
    .ladepunkte-container #percent {
        font-size: 3.5rem;
        color: #002b45;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        position: absolute;
        width: 100%;
        text-align: center;
        top: 35%;
    }
    .ladepunkte-container #ladesaeule_img {
        margin-left: 10%;
        height: 33.3rem;
        margin-top: 1.7rem;
    }
    .ladepunkte-container #textfeld {
        position: absolute;
        color: #ffffff;
        font-size: 3rem;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        top: 18rem;
        left: calc(10% + 1rem);
    }
    .ladepunkte-container #header {
        width: 85%;
        font-size: 1.9rem;
        top: 0rem;
        color: #001e32;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        margin-top: 1rem;
    }
    .ladepunkte-container #update {
        font-size: 1.1rem;
        width: 100%;
        top: 0rem;
        color: #001e32;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 400;
    }
    .ladepunkte-container #ladepunkte {
        font-size: 1.6rem;
        color: #001e32;
        position: absolute;
        font-family: 'Roboto Condensed', sans-serif;
        font-style: normal;
        font-weight: 700;
        top: 11.5rem;
        left: calc(10% + 1rem);
    }
    .ladepunkte-container .lade-text {
        display: block;
        margin: auto auto;
        position: relative;
        width: fit-content;
    }
    .ladepunkte-container .circle {
        display: block;
        margin: auto auto;
        position: relative;
    }
    .ladepunkte-container #diagram {
        padding-top: 15%;
    }
}