.greenbg{background-color:#c5dcc7;box-sizing:border-box; padding:30px; padding-top:0px;}
.greenbgcontent{padding-top:35px;padding-bottom:35px;color:#fff;
background: #3a794f; /* Old browsers */
background: -moz-linear-gradient(left, #3a794f 0%, #7ca689 50%, #3a794f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3a794f 0%,#7ca689 50%,#3a794f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3a794f 0%,#7ca689 50%,#3a794f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.greenbg .cb{text-align:left;}
.greenbg .cb:first-of-type{padding-left:30px;}
.greenbg .cb.centertablet{padding-right:0px;}
.greenbg .cb input[type=text],label{padding:8px; color:#3a794f; font-size:inherit; background-color:#fff;margin-bottom:10px;display:inline-block;position:relative;box-sizing:border-box;}
.greenbg .cb input[type=text]{ width:100%;}
.greenbg .cb label#dsgvolabel{background-color:transparent; color:#fff;margin-left:42px;margin-right: 0px;}

.greenbg .cb div.abox{display:block; text-align:right;}

input[type="checkbox"],
input[type="radio"] {
    display: none;
}
label span {
    background: #fff;
    width: 37px;
    height: 100%;
    display: inline-block;
    box-sizing:border-box;
    /* 
    Die Positionierung kann je nach Einsatzgebiet abweichen.
    Ich möchte hier sichergehen das die Checkbox / Radiobutton immer links oben am Textanfang steht,
    falls wir einen mehrzeiligen Text haben, wie es z.B. bei "AGB´s akzeptieren" üblich ist.
    Dies könnt ihr aber auch anders lösen.
    */
    position: absolute;
    top: 0px;
    right: -42px;
    
    /* Ein Transition Effekt für den Hover - Checked Status. Dadurch wirkt es etwas animiert. */
    transition: all .2s linear;
}
label {
    position: relative;
    margin-right: 60px;
}
input[type="checkbox"]:checked + span,
input[type="radio"]:checked + span{
    background-color: #3a794f; border:7px solid #fff;
}

.greenbg .cb label#dsgvolabel span{right: auto; left:-42px;}