/** INDEX **/
html { overflow-y: scroll;}

#not-usable { text-align: center;}
    
#not-usable>div.hinweis {}

@media (max-width:768px and orientation: portrait) {
    #not-usable {display: block;}
    /*#ks {display: none;}*/
}

@media (orientation: landscape) {
    #not-usable {display: none;}
    /*#ks {display:block}*/
}

header {
    box-shadow: 2px 2px 16px 0px #ddd;
    height: 130px;
}

#logo {
    width: 250px;
    margin: 25px;
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    background: rgba(255,255,255,0.8);
    line-height: 35px;
    font-size: 14px;
    z-index: 3;
}

h1 {font-size: 35px; line-height: normal}
h3 {font-size: 24px!important; line-height: normal}
#ks-angebot h3 {font-size: 25px!important; line-height: normal}
h6 {color: #333;font-size: 15px; line-height: normal}
p {font-size: 15px; color: #333; line-height: normal}
.schritte p {font-size: 25px}
form {width: 100%;}
form label.form-label-erreichbar {display: inline!important;}


@media (min-width: 768px) {
    h1 {font-size: 45px; line-height: normal}
    h3 {font-size: 32px!important; line-height: normal}
    #ks-angebot h3 {font-size: 32px!important; line-height: normal}
    h6 {color: #333;font-size: 25px; line-height: normal}
    p {font-size: 25px; color: #333; line-height: normal}
    .schritte p {font-size: 25px}
}

small {
    color: oklch(42% 0.13 254);
    display: block;
    font-size: 20px;
}

.mb-30 {margin-bottom: 30px}
.mb-60 {margin-bottom: 60px}
.mt-30 {margin-top: 30px}
.mt-60 {margin-top: 60px}

.pb-30 {padding-bottom: 30px}
.pb-60 {padding-bottom: 60px}
.pt-30 {padding-top: 30px}
.pt-60 {padding-top: 60px}

.text-wrapper {
    vertical-align: middle;
    display: table-cell;
}

.text-wrapper h2 {color: oklch(66% 0.16 245)!important;}

.text-wrapper strong {
    color: oklch(42% 0.13 254);
    display: block;
}

.text-wrapper-down {
    display: table-cell;
    vertical-align: bottom;
    float: none;
}

#wuerfel2-bg {
    top: -90px;
    position: relative;
    left: 100px;
    z-index: 1;
}

@media(min-width: 992px) {
    #wuerfel2-fg {
        position: relative;
        top: -260px;
        margin-bottom: -180px;
        z-index: 2;
    }
}

#visual-img {
    border-bottom: 3px solid oklch(66% 0.16 245);
}

.p-30 {padding: 30px;}

.ks-btn {
    padding: 30px 50px;
    font-size: 22px;
}


/** ANGEBOT **/

/*section {
    border: 1px solid oklch(42% 0.13 254);
    padding: 20px;    
}*/

div[id^="lg-"], section[class^="lg-"], section#ks-7, section#ks-8, section#ks-9 {opacity:0; display:none}

h3 {margin-bottom: 30px}
section#ks-1-1 {display:block;opacity:1}
#modal-bg {background: rgba(0,0,0,0.7); position: fixed; top:0; left: 0; z-index:1; width: 100vw; height:100%; display: flex; justify-content: center; align-items: center}
#modal-wrapper {position: relative; z-index: 2; background: #fff; width: 30vw; min-width: 375px; max-width: 95vw; height: 30vh; min-height: 375px; max-height: 90vh; margin: auto; padding: 20px; box-shadow: 5px 5px 40px -10px #000}

#ks_wrapper { /*#ks_wrapper */
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 80px;
    margin-top: auto;
    height: auto;
    min-height: 400px;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid oklch(42% 0.13 254);
}

section#kds-7 { border: none;}
.ks-border, .ks-auch {
    margin-bottom: 80px;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid oklch(42% 0.13 254);
}

#ks_wrapper .row {height: auto;}

#ks_wrapper input[type="text"], #ks_wrapper select {
    width: 390px;
    max-width: 90vw;
}

#ks_wrapper input.strasse { width: 99%;}
#ks_wrapper input.plz { width: 99%;}
#ks_wrapper input.ort { width: 99%;}
#ks_wrapper input.anzahl { width: 150px; text-align: right;}
#ks_wrapper select.anzahl { width: 150px; padding:10px; border-color: #ccc; color: oklch(66% 0.16 245); margin-bottom: 20px; text-align: right}
#ks_wrapper select.anzahl option {text-align: right;}

section {text-align: center}

@media (max-width: 767px) {#ks_wrapper {
        width: 75vw;        
    }
    .form-cell {max-width: 245px;}
    #ks_wrapper input[type="text"], #ks-wrapper select {
        max-width: 100%;
    }    
}

.form-erreichbar {width: 50px; float:left; clear: both}

.form-anrede {
    padding: 10px;
    color: oklch(66% 0.16 245);
    margin-bottom: 10px;
    border-color: #ccc;
}

#nachricht-counter {float: right; margin-bottom: 30px}

.ks-alert, #modal-bg {display:none}

.text-left {text-align:left!important;}

.inklusive {
    color: oklch(66% 0.16 245);
    font-size: 13px;
    line-height: 4em;
}
.leistungen {margin: 10px 20px}

.cta-kombi {width: 100%; text-align: right}

.ks-submit, .ks-cancel {vertical-align: unset;}
.ks-cancel, .ks-prev {border: 1px solid #ddd}

/*.col-sm-12 {width: 100%!important}
.col-sm-4 {width: 24%!important; margin-right: 1%}
.col-sm-8 {width: 74%!important; margin-right: 1%} */

.label-wrapper {}

.label-img {max-width: 100%; display: inline; cursor: pointer}

.nonlabel-img {max-width: 50%; display: inline}

@media (min-width: 768px) {
    .leistungen img.nonlabel-img { max-height: 50px;}

    .col-md-k2 {
        float: left;
        width: 20%;
        padding-right: 10px;
        padding-left: 10px;
    }

}

@media (max-width: 767px) {
    .leistungen .nonlabel-img {max-width: 100px; max-height: 100px;}

    .row.leistungen {margin-left: 0;}

    .col-md-k2 {height: 170px;}
}

@media (min-width: 1024px) {
    .col-md-k2 { width: 14%; }
}

.leistungen .img-icon {text-align: center}

.row.leistungen {margin-bottom: 40px;}

.anzahl {margin-top: 61px;}
.row.bisher div, .row.energie div, .row.heizung div {min-height: 150px;text-align:center}
.row.bisher div label, .row.energie div label, .row.heizung div label {display: table-cell;vertical-align: middle;float: none;width: 1%; margin:auto; height: 180px;}
.row.bisher .label-wrapper, .row.energie .label-wrapper {height: 150px; width: 80%; margin: auto; text-align: center}
.row.heizung .label-wrapper {height: 150px; width: 75%; margin: auto; text-align: center}

@media(max-width: 767px) {
    .anzahl {margin-top: 28px;}
    .row.bisher div {height: 250px;text-align:center}
    .row.energie div {height: 175px;text-align:center}
    .row.heizung div {height: 250px;text-align:center}

    .row.energie .label-wrapper {height: 100px; width: 80%; margin: auto; text-align: center}

    .row.bisher div label {height: 120px; display: table-cell;vertical-align:middle;float:none}
    .row.energie div label {height: 166px; display: table-cell;vertical-align:bottom;float:none}
    .row.heizung div label {height: 200px; display: table-cell;vertical-align:middle;float:none}
    
    .row.bisher div label img {max-height: 120px;}
    .row.energie div label img {max-height: 120px;}
    .row.heizung div label img {max-height: 120px;}
}

#zentralheizung {
    cursor: help;
}
#zentralheizung-info {
    display: none;
    opacity: 0.7;
    height: 223px;
    background-image: url(i/zentralheizung.png);
    background-repeat: no-repeat;
    background-position: bottom;
    padding-top: 142px;
    margin-bottom: -2px;
}

#zentralheizung-info p {
    background: rgba(255,255,255,1);
    width: 75%;
    font-weight: bold;
    color: #000;
    display: inline-block;
}

.einwilligungen [type=checkbox] {float: left;width: auto;margin-right: 20px;}

/** img @ radio/checkbox **/

.fa-check-circle-o {color: green}
.fa-times-circle-o {color: red}

.fa-label {font-size: 32px;}
label [type=radio], label [type=checkbox] { position: absolute; opacity: 0; width: 46%; height: 100%; z-index:2;cursor: pointer;}
[type=radio] + img, [type=checkbox] + img { cursor: pointer; opacity: 0.2; filter: grayscale(100%);cursor: pointer;}
[type=radio]:checked + img, [type=checkbox]:checked + img { opacity: 1; filter: grayscale(0%);cursor: pointer;}
[type=radio] + .fa-label, [type=checkbox] + .fa-label { cursor: pointer; color: #d5d5d5;cursor: pointer;}

[type=radio]:checked + .fa-label.fa-check-circle-o, [type=checkbox]:checked + .fa-label.fa-check-circle-o { color: green;cursor: pointer;}
[type=radio]:checked + .fa-label.fa-times-circle-o, [type=checkbox]:checked + .fa-label.fa-times-circle-o { color: red;cursor: pointer;}

i.ks-selected { 
    opacity: 0;
    display: none;
    font-size: 24px;
    color: green;
    top: 1px;
    right: 20%;
    position: absolute;
    z-index: 10;  
}

@media(max-width: 767px) {
.energie i.ks-selected { 
    top: 65px;
}
.energie label [type=checkbox] { height: 70%;}
}

i.ks-selected.active { opacity: 1; display: inline;}


/** Slider Checkbox **/
.cta-text {float: left; margin-left: 60px;}
.switch { position: relative; display: inline-block; width: 100%;}
.switch input { opacity: 0; width: 0; height: 0;}
.switch .ksslider { position: absolute; cursor: pointer; top: 0; left: 0; width:50px; height: 25px; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 12px;}
.switch .ksslider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 7px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 12px;}
input:checked + .ksslider { background-color: oklch(66% 0.16 245);}
input:focus + .ksslider { box-shadow: 0 0 1px oklch(66% 0.16 245);}
input:checked + .ksslider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px);}
.switch .ksslider.round { border-radius: 34px;}
.switch .ksslider.round:before { border-radius: 50%;}


/** Fortschritt **/
.ks-fortschritt {    
    height: 4px!important;
    width: 70%;
    border: 1px solid #ccc;
    display: inline-block;
}
.ks-fortschritt {background-color: #eee}

.ks-fortschritt > .ks-step {
    height: 2px;
    width: 20%;
    float: left;
    background-color: oklch(66% 0.16 245);
}

section[id$="-2"] .ks-fortschritt > div:nth-child(n+2) {background-color: #eee;}
section[id$="-3"] .ks-fortschritt > div:nth-child(n+3) {background-color: #eee;}
section[id$="-4"] .ks-fortschritt > div:nth-child(n+4) {background-color: #eee;}
section[id$="-5"] .ks-fortschritt > div:nth-child(n+5) {background-color: #eee;}

/* PLZ-Lookup */
#a_sBE {
    border-radius: 6px;
    border: 1px solid #bbb;
    padding: 5px;
    width: 300px;
    display: none;
    text-align: left;
    white-space: nowrap;
    background-color: #deeaf8;
    position: absolute;
    left: inherit;
    z-index: 1111;
    cursor: default;
}

.validate-error {
    border: 1px solid #f00;
    padding: 10px;
    clear: left;
    text-align: center;
    margin-top: 20px;
}