/*
#############################
 Konfigurator
#############################
*/

/* Anfrage */
#anfrage_form { margin-top: -340px; padding-bottom: 20px; }
#anfrage_form form { margin: 0px; padding: 0px; }

#anfrage_form .h3 {
         display: block;
         width: calc(100% - 40px);
         height: auto;
         margin: 0px 0px 20px 0px;
         padding: 10px 20px;

         font-size: 1.6em;
         font-weight: bold;
         text-align: center;
         color: var(--main-color);

         background: transparent;
}

#anfrage_form .h3 i {
         display: block;
         width: calc(100% - 40px);
         margin: 0px 0px 0px 0px;
         padding: 0px 20px;

         font-size: 0.7em;
         font-style: normal;
         font-weight: 200;
         text-align: center;
         color: var(--font-color-dark);
}

#anfrage_form div[class^="anfrage_step_"] { display: none; width: calc(100% - 0px); margin: 20px 0px; padding: 0px; border: 0px #DF0000 solid; }
#anfrage_form div[class^="anfrage_"].error { border: 2px #DF0000 solid; width: calc(100% - 4px); }
#anfrage_form div[class^="anfrage_step_"].show { display: block; }
#anfrage_form div[class^="anfrage_step_"].hide { display: none !important; }
#anfrage_form div[class^="anfrage_step_"] b { font-weight: 600; }

#anfrage_form div[class^="anfrage_step_"] .daten {
         display: block;
         width: calc(100% - 0px);
         margin: 0px 0px;
         padding: 20px 0px;
         background: transparent;

         font-size: 1.0em;
         color: var(--font-color);
         text-align: center;
}

#anfrage_form label { display: none; position: relative; width: 100%; }
#anfrage_form label.show { display: inline-block; height: 30px; float: left; }
#anfrage_form label.show.pad_top { padding: 10px 0px 0px 0px !important; }
#anfrage_form label.show u { display: inline-block; font-size: 0.7em; opacity: 0.5; text-decoration: none; font-style: italic; font-weight: normal; }

#anfrage_form input[type="radio"],
#anfrage_form input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; }
#anfrage_form input[type="radio"],
#anfrage_form input[type="checkbox"] { width:auto; float:left; margin-right: .75em; background:transparent; }
#anfrage_form input[type="radio"]:checked, #anfrage_form input[type="radio"]:not(:checked),
#anfrage_form input[type="checkbox"]:checked, #anfrage_form input[type="checkbox"]:not(:checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
#anfrage_form input[type="radio"] + label,
#anfrage_form input[type="checkbox"] + label { cursor: pointer;  margin-top: -5px; }
#anfrage_form input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before,
#anfrage_form input[type="checkbox"]:checked + label::before, input[type="checkbox"]:not(:checked) + label::before {
         content:' ';
         background: white;
         display:inline-block;
         border-radius: 40px;
         width: 36px;
         height: 36px;
         position: relative;
         top:-10px;
         /*left: calc(50% - 0px);*/
         border: 1px solid #DFDFDF;
}
#anfrage_form input[type="radio"]:hover + label::before,
#anfrage_form input[type="checkbox"]:hover + label::before { background: transparent url(../images/dot_focus.png) center center no-repeat; background-size: 101%; border: 1px solid transparent; }
#anfrage_form input[type="radio"]:checked  + label::before,
#anfrage_form input[type="checkbox"]:checked  + label::before { background: transparent url(../images/dot_hover.png) center center no-repeat; background-size: 101%; border: 1px solid transparent; }


#anfrage_form input[type="radio"] + label,
#anfrage_form input[type="checkbox"] + label {
         display: block;
         float: left;
         width: calc(100% / 4 - 40px - 20px - 4px);
         min-height: 120px;
         height: auto;

         background: #FFFFFF;

         margin: 20px 20px 20px 20px;
         padding: 20px 10px 10px 10px;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;
         -webkit-box-shadow: 0px 0px 40px 0px rgba(19, 37, 47, 0.25);
         -moz-box-shadow:    0px 0px 40px 0px rgba(19, 37, 47, 0.25);
         box-shadow:         0px 0px 40px 0px rgba(19, 37, 47, 0.25);
         text-align: center;
         transition: all 0.2s ease-in-out;
         transition-delay: 220ms;

         cursor: pointer;
         border: 2px #ffffff solid;
}
#anfrage_form input[type="radio"]:checked + label,
#anfrage_form input[type="checkbox"]:checked + label { background: var(--main-color-light); border: 2px var(--main-color) solid; }

#anfrage_form input[type="radio"]:hover + label,
#anfrage_form input[type="checkbox"]:hover + label { width: calc(100% / 4 - 20px - 20px - 4px); margin: 10px 10px 10px 10px; padding: 30px 10px 20px 10px; }

#anfrage_form input[type="radio"] + label i,
#anfrage_form input[type="checkbox"] + label i { display: block; width: calc(100% - 20px); height: auto; margin: -20px 0px 0px 10px; text-align: center; font-style: normal; }
#anfrage_form input[type="radio"] + label i .icon,
#anfrage_form input[type="checkbox"] + label i .icon { display: block; margin-top: 10px; text-align: center; }
#anfrage_form input[type="radio"] + label i .icon img,
#anfrage_form input[type="checkbox"] + label i .icon img { width: 190px; height: auto; }

#anfrage_form input[type="radio"] + label i .text,
#anfrage_form input[type="checkbox"] + label i .text { display: block; width: calc(100% - 0px); height: 120px; overflow: hidden; text-align: center; }
#anfrage_form input[type="radio"] + label i .text span,
#anfrage_form input[type="checkbox"] + label i .text span { display: block; height: 62px; overflow: hidden; padding: 0px 0px; color: var(--font-color-light); font-size: 0.8em;  border: 0px #DF0000 solid; }
#anfrage_form input[type="radio"] + label i .text b,
#anfrage_form input[type="checkbox"] + label i .text b { display: block; padding: 10px 0px 20px 0px; height: 30px; color: var(--font-color); font-size: 1.3em; }


/* Anpassungen  */
#anfrage_form div[class^="anfrage_step_2"] { padding: 0px 20px; width: calc(100% - 40px); }
#anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label { width: calc(100% / 5 - 20px - 20px - 4px); margin: 10px 10px 20px 10px; padding: 20px 10px 10px 10px; }
#anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"]:hover + label { width: calc(100% / 5 - 20px - 0px - 4px); margin: 0px 0px 0px 0px; padding: 30px 10px 20px 10px; }
#anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label i .text { height: 130px !important; }
#anfrage_form div[class^="anfrage_step_2"] span { height: 70px !important; text-transform: none; }
#anfrage_form div[class^="anfrage_step_2"] input[type="checkbox"] + label i .text b { font-size: 1.1em; }

#anfrage_form .anfrage_step_3  {
         display: none;
         width: calc(100% - 40px) !important;
         background: rgba(150,150,150,0.2) !important;
         margin: 0px 20px !important;
         padding: 10px 20px 20px 20px;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         color: #FFFFFF;
}
#anfrage_form .anfrage_step_3 .daten { padding: 0px 0px 20px 0px !important; }
#anfrage_form .anfrage_step_3 textarea { width: calc(100% - 60px); }

/*
#anfrage_form input[type="radio"] + label i,
#anfrage_form input[type="checkbox"] + label i { border: 1px #FF0000 solid; }
#anfrage_form input[type="radio"] + label i .text,
#anfrage_form input[type="checkbox"] + label i .text {  border: 1px #000000 solid; }
#anfrage_form input[type="radio"] + label i .text span,
#anfrage_form input[type="checkbox"] + label i .text span { border: 1px #DF0000 solid; }
#anfrage_form input[type="radio"] + label i .text b,
#anfrage_form input[type="checkbox"] + label i .text b { border: 1px #FFDF00 solid; }   */


#error_massage {
         display: block;
         width: calc(100% - 80px) !important;
         background: #DF0000 !important;

         margin: 20px 20px !important;
         padding: 10px 20px;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         text-align: center;
         color: #FFFFFF;
}
#error_massage.hide { display: none; }

#anfrage_form .anfrage_kontakt {
         display: none;
         width: calc(100% - 80px) !important;
         background: var(--font-color) !important;

         margin: 20px 20px !important;
         padding: 20px 20px;

         -webkit-border-radius: 20px;
         -moz-border-radius: 20px;
         border-radius: 20px;

         color: #FFFFFF;
}
#anfrage_form .anfrage_kontakt .bg { background: rgba(255,255,255,0.07); padding: 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin-bottom: 20px; }
#anfrage_form .anfrage_kontakt i { font-style: normal; color: #FFFFFF; }
#anfrage_form .anfrage_kontakt .l { width: calc(50% - 20px); float:left; }
#anfrage_form .anfrage_kontakt .r { width: calc(50% - 20px); float:right; }
#anfrage_form .anfrage_kontakt input { width: calc(100% - 160px - 20px); font-size: 1.2em; }
#anfrage_form .anfrage_kontakt select { width: calc(100% - 160px - 0px); font-size: 1.2em; }
#anfrage_form .anfrage_kontakt label.show { width: 140px; color: #FFFFFF !important; }
#anfrage_form .anfrage_kontakt hr { width: calc(100% - 20px - 0px); border-top: 3px dotted var(--font-color-light); }

#anfrage_form .anfrage_kontakt .datenschutz i, #anfrage_form .anfrage_kontakt .kontakt_ok i { width: calc(100% - 100px); min-height: 32px; display: inline-block; padding-top: 5px; vertical-align: middle; color: #FFFFFF;  }
#anfrage_form .anfrage_kontakt .datenschutz a:hover { color: #FFFFFF;  }

#anfrage_form .anfrage_kontakt input[type="submit"] { font-size: 1.4em; width: calc(100% - 0px - 20px); font-weight: bold; padding: 10px 20px; }



.anfrage_kontakt input[type="checkbox"] {
          display:none !important;
}
.anfrage_kontakt input[type="checkbox"] + label {
          width: 60px !important;
          height: 32px !important;
          min-height: 32px !important;
          border-radius: 30px;
          border: 0px solid #ddd !important;
          background-color: #EEE !important;
          display: inline-block;
          content: "";
          float: left;
          margin: 0px 25px 20px 0px !important;
          transition: background-color 0.5s linear;
          margin-top: 0px;
          padding: 0px !important;
}
.anfrage_kontakt input[type="checkbox"] > label { width: 60px !important; padding: 0px !important; margin: 0px 0px 0px 0px !important; }

.anfrage_kontakt input[type="checkbox"] + label:hover {
          cursor: pointer;
}
.anfrage_kontakt input[type="checkbox"] + label::before {
          width: 20px !important;
          height: 20px !important;
          border-radius: 20px !important;
          background-color: #fff !important;
          background-size: 101%;
          background-image: none !important;
          display: block;
          content: "";
          float: left;
          margin: 16px 0 0 10px;
          transition: margin 0.1s linear;
          box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
          border: 0px solid #27DEBE !important;

}
.anfrage_kontakt input[type="checkbox"]:checked+label{
          background-color: #27DEBE !important;
}
.anfrage_kontakt input[type="checkbox"]:checked+label::before {
          margin: 16px 0 0 32px;
}