#beetplaner-outer {
    display: flex;
}
#beetplaner-outer #beetplaner .form-group.text-field input {
    text-align: center;
}
#beetplaner-outer #beetplaner .btn {
    display: block;
    font-size: 1.3rem;
    left: 0;
    margin: 0 auto;
    padding: .5em;
    position: relative;
    top: 0;
    width: 100%;

    transform: none;
}

#beetplaner-outer #beetplaner-image,
#beetplaner-outer #beetplaner-image-mobile {
    background: #79b51c;
    color: #fff;
    height: 100%;
    position: relative;
}

#beetplaner-outer #beetplaner-image .start-image,
#beetplaner-outer #beetplaner-image-mobile .start-image {
    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 13rem;
    height: 100%;
    width: 100%;
}
#beetplaner-outer #beetplaner-image .start-image {
    min-height: 15rem;
}
#beetplaner-outer #beetplaner-image .start-image.active,
#beetplaner-outer #beetplaner-image-mobile .start-image.active {
     display: block !important;
}
#beetplaner-outer #beetplaner-image .start-image.inactive,
#beetplaner-outer #beetplaner-image-mobile .start-image.inactive {
     display: none !important;
}

#beetplaner-outer #beetplaner-image .screen-sum {
    height: 100%;
    padding: 1.5rem 1.5rem 2rem;
}
#beetplaner-outer #beetplaner-image .screen-sum.active {
     display: block !important;
}
#beetplaner-outer #beetplaner-image .screen-sum.inactive {
     display: none !important;
}
#beetplaner-outer #beetplaner-image .screen-sum > div {
    align-items: center;
    display: none;
    height: 100%;
}
#beetplaner-outer #beetplaner-image .screen-sum > div.screen-mobile {
    display: flex;
}
#beetplaner-outer #beetplaner-image .screen-sum > div.screen-mobile svg {
    margin: 0 auto;
    max-width: 37rem;
}

#beetplaner-outer svg {
    height: auto;
    width: 100%;
}
#beetplaner-outer svg .st0 {
    fill: #79b51c;
}
#beetplaner-outer svg .st1 {
    fill: #ffffff;
}
#beetplaner-outer svg .st2 {
    font-family: 'Asap';
    font-weight: 500;
}
#beetplaner-outer svg .st3 {
    font-size: 10.7754px;
}

#beetplaner-outer svg .st5 {
    font-family: 'Asap';
    font-weight: 600;
}
#beetplaner-outer svg .st6 {
    font-family: 'Asap';
    font-weight: 400;
}
#beetplaner-outer svg .st7 {
    font-size: 6.2856px;
}
#beetplaner-outer svg .st9 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2;
}
#beetplaner-outer svg .st10 {
    enable-background: new;
}

#beetplaner-outer .sum-hochbeet svg .st3 {
    font-size: 14.2px;
}
#beetplaner-outer .sum-hochbeet svg .st7 {
    font-size: 6.2856px;
}

#beetplaner .customized-radio {
    display: block;
    padding-left: 2rem;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#beetplaner .customized-radio .checkmark {
    background-color: #EDEEEF;
    border: 1px solid #707070;
    border-radius: 50%;
    height: 1.5rem;
    left: 0;
    position: absolute;
    top: 0;
    width: 1.5rem;
}
#beetplaner .customized-radio .checkmark:after {
    background: #888;
    border-radius: 50%;
    content: '';
    display: none;
    height: 1rem;
    left: 0.25rem;
    margin: -1px 0 0 -1px;
    position: absolute;
    top: 0.25rem;
    width: 1rem;
}
#beetplaner .customized-radio input[type="radio"] {
    cursor: pointer;
    opacity: 0;
}
#beetplaner .customized-radio input[type="radio"]:checked ~ .checkmark:after {
    display: block;
}

#beetplaner-infos {
    display: none;
    margin: 0;
}
#beetplaner-infos > div.inactive {
    display: none !important;
}
#beetplaner-infos .wrapper-image {
    display: none;
}
#beetplaner-infos .wrapper-text .wrapper {
    align-content: center;
    align-items: center;
    background: #79B51c;
    display: flex;
    font-weight: 500;
    color: #fff;
    height: 100%;
    padding: 1rem;
    text-align: center;
}
#beetplaner-infos .wrapper-text .wrapper b,
#beetplaner-infos .wrapper-text .wrapper strong {
    font-weight: 600;
}
#beetplaner-infos .wrapper-text .wrapper p:last-child {
    margin-bottom: 0;
}


@media (min-width: 576px) and (max-width: 991px) {
    
    #beetplaner-outer #beetplaner fieldset:before,
    #beetplaner-outer #beetplaner fieldset:after,
    #beetplaner-outer #beetplaner .form-group.checkbox-field:before,
    #beetplaner-outer #beetplaner .form-group.checkbox-field:after {
        clear: both;
        content: '';
        display: block;
        float: none;
    }
    
}

@media (max-width: 991px) {
    #beetplaner-outer {
        flex-direction: column;
    }

    #beetplaner-outer #beetplaner-image .start-image.active,
    #beetplaner-outer #beetplaner-image .start-image.inactive {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #beetplaner-outer #beetplaner-image .screen-sum {
        padding: 1rem;
    }
    #beetplaner-outer #beetplaner-image .screen-sum > div.screen-mobile {
        display: none;
    }
    #beetplaner-outer #beetplaner-image .screen-sum > div.screen-tablet {
        display: flex;
    }
    
    #beetplaner-outer svg .st3 {
        font-size: 15px;
    }
    #beetplaner-outer svg .st7 {
        font-size: 8.75px;
    }
    #beetplaner-outer .sum-hochbeet svg .st3 {
        font-size: 14.3px;
    }
    #beetplaner-outer .sum-hochbeet svg .st7 {
        font-size: 9.0718px;
    }
}
@media (min-width: 992px) {
    #beetplaner-outer {
        flex-wrap: wrap;
    }
    #beetplaner-wrapper {
        padding-right: 0;
    }
    #beetplaner-image-wrapper {
        padding-left: 0;
    }

    #beetplaner-image-mobile {
        display: none !important;
    }

    #beetplaner-outer #beetplaner-image .screen-sum > div.screen-tablet {
        display: none;
    }
    #beetplaner-outer #beetplaner-image .screen-sum > div.screen-desktop {
        display: flex;
    }


    #beetplaner-outer svg .st3 {
        font-size: 20px;
    }
    #beetplaner-outer svg .st7 {
        font-size: 11.666px;
    }
    #beetplaner-outer .sum-hochbeet svg .st3 {
        font-size: 20px;
    }

    #beetplaner-infos > .row {
        display: flex;
    }
    #beetplaner-infos .wrapper-image {
        display: block;
        padding-right: 0;
    }
    #beetplaner-infos .wrapper-text {
        padding-left: 0;
    }
    #beetplaner-infos .wrapper-text .wrapper {
        text-align: left;
    }
    #beetplaner-infos {
        margin-top: 3rem;
    }
    #beetplaner-infos > div + div {
        margin-top: 1rem;
    }
}