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

div[id^="be_rechner_"] {
         display: block;
         width: 100%;

         background: #ff5a00;
         text-align: center;

         -webkit-border-radius: 0px;
         -moz-border-radius: 0px;
         border-radius: 0px;
}

div[id^="be_rechner_"] .h3 {
         display: block;
         width: calc(100% - 60px);
         height: auto;
         margin: 0px 0px;
         padding: 12px 30px 8px 30px;

         border-bottom: 1px rgba(0,0,0,0.2) solid;
         -webkit-box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25);
         box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25);

         font-size: 1.6em;
         text-align: center;
         color: #FFFFFF !important;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;

         background: transparent;
}

div[id^="be_rechner_"] .h3 span {
         display: inline-block;

         padding: 5px 20px 5px 20px;
         margin: 0px 0px 0px 0px;

         text-transform: uppercase;
         font-size: 1.0em;
         font-weight: 700;
         color: #FFFFFF;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.25);

         border: 0px #ff5a00 solid;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
}

div[id^="be_rechner_"] .h3 span b {
         display: inline-block;
         height: 24px;
         width: 28px;
         padding: 2px 2px 4px 2px;
         margin: 0px 10px 0px -10px;

         background: #FFFFFF;

         font-size: 0.9em;
         line-height: 1.1em;
         color: #000000;
         text-shadow: 0px 0px 0px #FFFFFF;

         -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
}
div[id^="be_rechner_"] .h3 span div[id^="anzeige_bestellung_"] { display: inline; padding: 0px 5px; color: #FFFFFF; font-weight: bold; }

div[id^="be_rechner_"] .h3 .frage {
         display: none;
         font-size: 0.5em;
         margin-top: -5px;
         text-align: center;
}

div[id^="be_rechner_"] div[class^="abfrage_"] { display: none; width: calc(100% - 0px); }
div[id^="be_rechner_"] div[class^="abfrage_"].error { border: 2px #DF0000 solid; }
div[id^="be_rechner_"] div[class^="abfrage_"].show { display: block; }
div[id^="be_rechner_"] div[class^="abfrage_"].hide { display: none !important; }
div[id^="be_rechner_"] div[class^="abfrage_"] b { font-weight: 600; }

div[id^="be_rechner_"] div[class^="abfrage_"] .daten {
         display: block;
         border-top: 1px rgba(255,255,255,0.15) solid;
         width: calc(100% - 40px);
         margin: 0px 0px;
         padding: 20px 20px;
         background: transparent;

         font-size: 1.1em;
         color: #FFFFFF;
         text-align: center;
         text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}
#be_rechner_startseite div[class^="abfrage_"] .daten { width: calc(100% - 200px); max-width: calc(100% - 200px); padding: 20px 100px; }

div[id^="be_rechner_"] div[class^="abfrage_"] .daten div[id^="hinweis_"] { color: #FFFFFF; text-align: center; }
div[id^="be_rechner_"] div[class^="abfrage_"] .daten div[id^="hinweis_"] b { display: inline-block; color: #FFFFFF; text-align: center; }
div[id^="be_rechner_"] div[class^="abfrage_"] .daten div[id^="hinweis_"] b .icon { display: inline-block; margin-top: 2px; }

div[id^="be_rechner_"] form { margin: 0px; }
div[id^="be_rechner_"] input[type="button"], div[id^="be_rechner_"] input[type="submit"], div[id^="be_rechner_"] .form_footer .form_kontakt a {
         background: #EFEFEF;
         margin: 15px 0px 0px 0px;
         padding: 8px 15px;
         min-width: 80px;

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

         border: 0px;
         -webkit-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
         -moz-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);
         box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.75);

         cursor: pointer;
         transition: opacity 0.5s;

         color: #000000;
         font-weight: normal;
         text-align: center;
         text-shadow: rgba(255,255,255,0.2) 1px 1px 0px;
}

div[id^="be_rechner_"] input[type="button"]:hover { opacity: 1.0; background: #FFFFFF; }
div[id^="be_rechner_"] input[type="button"][name="back"] { display: none; float: left; background: #F0F0F0; opacity: 0.8; padding-left: 40px; background-image: url(../images/arrow_l_hover.png); background-position: left center; background-repeat: no-repeat; background-size: 28px; }
div[id^="be_rechner_"] input[type="button"][name="back"]:hover { opacity: 0.9; background-image: url(../images/arrow_l.png); }
div[id^="be_rechner_"] input[type="button"][name="next"] { display: none; float: right; font-size: 1.0em; margin: 10px auto 5px auto; padding-right: 40px; background-image: url(../images/arrow_r_hover.png); background-position: right center; background-repeat: no-repeat; background-size: 32px; }
div[id^="be_rechner_"] input[type="button"][name="next"]:hover { background-image: url(../images/arrow_r.png); }

div[id^="be_rechner_"] input[type="button"][name="start"] { display: inline-block; float: none; font-size: 1.1em; margin: 20px auto 5px auto; padding-right: 50px; background-image: url(../images/arrow_r_hover.png); background-position: right center; background-repeat: no-repeat; background-size: 32px; }
div[id^="be_rechner_"] input[type="button"][name="start"]:hover { background-image: url(../images/arrow_r.png); }

div[id^="be_rechner_"] input[type="button"]:disabled { opacity: 0.3; }

div[id^="be_rechner_"] label {
        display: none;
         position: relative;
         width: 100%;
}

div[id^="be_rechner_"] .rangeslider {
         float: left;
         width: calc(100% - 100px) !important;
}

div[id^="be_rechner_"] .range_bg {
         background: rgba(0,0,0,0.15);
         -webkit-box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25), 1px 1px 0px 0px rgba(255,255,255,0.25);
        -moz-box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25), 1px 1px 0px 0px rgba(255,255,255,0.25);
        box-shadow: inset 5px 5px 25px 0px rgba(0,0,0,0.25), 1px 1px 0px 0px rgba(255,255,255,0.25);

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

         height: 25px;

         margin: 10px 0px 10px 0px;
         padding: 20px 10px 15px 10px;

        position: relative;
}
div[id^="be_rechner_"] .range_bg:after {
        bottom: 100%;
        right: 10%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(177, 60, 16, 0);
        border-bottom-color: #b13c10;
        border-width: 10px;
        margin-left: -10px;
}

div[id^="be_rechner_"] output {
         float: right;
         width: 50px;
         background: #FFFFFF;
         padding: 6px 10px;
         margin-top: -10px;
         font-size: 1.2em;
         color: #000000;
         text-align: center;

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

         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

div[id^="be_rechner_"] input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border:none; border-radius: 0; font-size: 1em; }
div[id^="be_rechner_"] input[type="radio"] { width:auto; float:left; margin-right: .75em; background:transparent; }
div[id^="be_rechner_"] input[type="radio"]:checked, input[type="radio"]:not(:checked) { background: transparent; position: relative; visibility: hidden; margin:0; padding:0; }
div[id^="be_rechner_"] input[type="radio"] + label { cursor: pointer;  margin-top: -5px; }
div[id^="be_rechner_"] input[type="radio"]:checked + label::before, input[type="radio"]:not(:checked) + label::before { content:' '; display:inline-block; width: 20px; height:20px; position: relative; top:4px; border: 1px solid #bbb; background: white; margin-right: 1em; border-radius: 30px; -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.15), 0px 0px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.15), 0px 0px 10px 0px rgba(0,0,0,0.35); box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.15), 0px 0px 10px 0px rgba(0,0,0,0.35); }
div[id^="be_rechner_"] input[type="radio"]:hover + label::before { background: #DDDDDD url(../images/dot_focus.png) center center no-repeat; background-size: 100%; }
div[id^="be_rechner_"] input[type="radio"]:checked  + label::before { background: #FFFFFF url(../images/dot_hover.png) center center no-repeat; background-size: 100%; }


div[id^="be_rechner_"] input[type="radio"] + label { float: left; display: block; background: rgba(255,255,255,0.8); width: calc(33.333% - 40px); height: 180px; padding: 15px 10px 0px 10px; margin: 15px 10px 20px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); transition: 0.3s;  }
div[id^="be_rechner_"] input[type="radio"]:checked + label { background: rgba(255,255,255,1.0); width: calc(33.3333% - 40px); margin: 10px 10px 0px 10px; height: 180px; }

div[id^="be_rechner_"] input[type="radio"] + label i { display: block; width: calc(100% - 20px); height: 40px; margin: -20px 0px 0px 10px; border: 0px #000 solid; text-align: center; font-style: normal; }
div[id^="be_rechner_"] input[type="radio"] + label i .icon { display: inline-block; width: 40px; }
div[id^="be_rechner_"] input[type="radio"] + label i .text { display: block; width: calc(100% - 0px); overflow: hidden; text-align: center; }
div[id^="be_rechner_"] input[type="radio"] + label i .text span { display: block; width: calc(100% - 0px); margin: 10px 0px; overflow: hidden; text-align: center; font-size: 0.8em; line-height: 1.1em; }
div[id^="be_rechner_"] input[type="radio"] + label i .text u { display: inline-block; margin: 5px 0px; padding: 5px 10px; background: #ff5a00; color: #FFFFFF; text-align: center; font-size: 1.0em; line-height: 1.1em; text-decoration: none; }
div[id^="be_rechner_"] input[type="radio"]:checked + label::before,
div[id^="be_rechner_"] input[type="radio"]:not(:checked) + label::before { border-radius: 40px; width: 48px; height:48px; margin-right: 0px; position: relative; top:-30px; left: 0px; border: 0px solid #FFFFFF; }

div[id^="be_rechner_"] .banner_formate_auswahl, div[id^="be_rechner_"] .banner_formate_diver, div[id^="be_rechner_"] .banner_formate_bestellung {
         display: block;
         width: 100%;
}
div[id^="be_rechner_"] .banner_formate_diver { margin: 10px 0px; text-align: center; }

div[id^="be_rechner_"] .banner_formate_bestellung {
         display: none;
         width: calc(100% - 20px);
         padding: 10px;
         margin-top: 10px;

         background: rgba(0,0,0,0.1);
         -webkit-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.75);
         -moz-box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.75);
         box-shadow: inset 0px 10px 10px -10px rgba(0,0,0,0.75);

         -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
}

div[id^="be_rechner_"] .banner_formate_auswahl .item, div[id^="be_rechner_"] .banner_formate_bestellung .item {
         display: inline-block;
         float: left;
         cursor: pointer;

         background: #FFFFFF;
         padding: 3px 15px 5px 15px;
         margin: 2px 3px 5px 3px;
         font-size: 0.8em;
         color: #000000;
         text-align: center;

         border: 0px #FFFFFF solid;
         -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;

         -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
        transition: 0.5s;
}

div[id^="be_rechner_"] .banner_formate_auswahl .item[data-art] { display: none; }
div[id^="be_rechner_"] .banner_formate_auswahl .item.spezial { background: #000000; color: #FFFFFF; }
div[id^="be_rechner_"] .banner_formate_auswahl .item.spezial span { color: #000000; background: #FFFFFF; text-shadow: #FFFFFF 1px 1px 0px; }
div[id^="be_rechner_"] .banner_formate_auswahl .item.inactive { opacity: 0.5; cursor: default; }

div[id^="be_rechner_"] .banner_formate_bestellung .item { padding: 2px 10px 2px 5px; font-size: 0.9em;  }
div[id^="be_rechner_"] .banner_formate_auswahl .item .icon { margin-top: 0px; }

div[id^="be_rechner_"] .banner_formate_auswahl .item:hover { -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5), inset 0px 0px 10px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5), inset 0px 0px 10px 0px rgba(0,0,0,0.35); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5), inset 0px 0px 10px 0px rgba(0,0,0,0.35); }

div[id^="be_rechner_"] .banner_formate_auswahl .item span {
         display: block;
         width: calc(100% - 16px);
         height: 14px;
         padding: 2px 12px;
         margin: 2px 0px 2px -4px;

         color: #FFFFFF;
         text-align: center;
         font-size: 0.8em;
         text-shadow: #000000 1px 1px 0px;

         -webkit-box-shadow: inset 5px 5px 5px -5px rgba(0,0,0,0.75);
         -moz-box-shadow: inset 5px 5px 5px -5px rgba(0,0,0,0.75);
         box-shadow: inset 5px 5px 5px -5px rgba(0,0,0,0.75);
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         background: #4F4F4F;
}

div[id^="be_rechner_"] .banner_formate_bestellung .item .icon {
         display: inline-block;
         float: left;
         cursor: pointer;

         background-color: #7F7F7F;
         padding: 0px 0px 0px 0px;
         margin: 2px 5px 2px 3px;

         border: 2px #7F7F7F solid;
         -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;

        transition: 0.5s;
}
div[id^="be_rechner_"] .banner_formate_bestellung .item:hover .icon, div[id^="be_rechner_"] .banner_formate_bestellung .item .icon:hover { background-color: #ff5a00; border: 2px #ff5a00 solid; }


div[id^="be_rechner_"] .form_footer {
         display: block;
         width: calc(100% - 40px);
         min-height: 70px;
         background: transparent;

         border: 0px #BFBFBF solid;
         -webkit-box-shadow: inset 0px 50px 50px -20px rgba(0,0,0,0.25);
         -moz-box-shadow: inset 0px 50px 50px -20px rgba(0,0,0,0.25);
         box-shadow: inset 0px 50px 50px -20px rgba(0,0,0,0.25);

         font-size: 1.2em;
         color: #FFFFFF;
         text-align: center;
         text-shadow: rgba(0,0,0,0.2) 1px 1px;

         margin-bottom: 0px;
         padding: 10px 20px 5px 20px;

         -webkit-clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
         clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
}
div[id^="be_rechner_"] .form_footer .form_buttons, div[id^="be_rechner_"] .form_footer .form_kontakt {
         display: block;
         width: calc(100% - 20px);
         text-align: center;
         color: #FFFFFF;
         padding: 10px 10px 5px 10px;
}
div[id^="be_rechner_"] .form_footer .form_kontakt { display: none; }
div[id^="be_rechner_"] .form_footer .form_kontakt .button { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin-top: 20px; font-size: 1.2em; }
div[id^="be_rechner_"] .form_footer .form_kontakt .button:hover {  background-color: #FFFFFF; }


div[id^="be_rechner_"] .tooltip:after { left: 10%; right: 10%; padding: 5px 10px; min-width: 80px; }
div[id^="be_rechner_"] .tooltip:hover:after { bottom: 110%; }


#rechner_steps {
         position: relative;
         display: block;
         width: calc(100% - 0px);
         height: 4px;
         background: transparent;
         margin-top: 5px;
         margin-left: 0px;
}
#rechner_steps .step_bar {
         position: absolute;
         display: block;
         width: 0%;
         height: 4px;
         background: #93c76b;
         background: -moz-linear-gradient(left,  #93c76b 0%, #7bad55 100%);
         background: -webkit-linear-gradient(left,  #93c76b 0%,#7bad55 100%);
         background: linear-gradient(to right,  #93c76b 0%,#7bad55 100%);
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93c76b', endColorstr='#7bad55',GradientType=1 );
}


/* Anpassungen */
div[id^="be_rechner_"] .abfrage_0 b {
         display: block;
         text-align: center;
         font-weight: 600;
         font-size: 1.6em;
         margin-bottom: 15px;
}

/* Media Query */
@media (max-width: 1280px) {
         #be_rechner_startseite div[class^="abfrage_"] .daten { width: calc(100% - 100px); max-width: calc(100% - 100px); padding: 20px 50px; }
         div[id^="be_rechner_"] input[type="radio"] + label { padding: 15px 6px 0px 6px; margin: 15px 8px 20px 8px; }
         div[id^="be_rechner_"] .abfrage_0 b { font-size: 1.4em; }
         div[id^="be_rechner_"] .abfrage_0 .block {display: none; }
}
@media (max-width: 960px) {
         #be_rechner_startseite div[class^="abfrage_"] .daten { width: calc(100% - 80px); max-width: calc(100% - 100px); padding: 20px 40px; }
         /*div[id^="be_rechner_"] input[type="radio"] + label { float: left; width: calc(25% - 20px); height: 180px; padding: 15px 5px 0px 5px; margin: 15px 5px 20px 5px; }
         div[id^="be_rechner_"] input[type="radio"]:checked + label { width: calc(25% - 20px); margin: 10px 5px 0px 5px; height: 190px; } */
         div[id^="be_rechner_"] input[type="radio"] + label { float: left; width: calc(33.333% - 20px); height: 180px; padding: 15px 5px 0px 5px; margin: 15px 5px 20px 5px; }
         div[id^="be_rechner_"] input[type="radio"]:checked + label { width: calc(33.333% - 20px); margin: 10px 5px 0px 5px; height: 190px; }
         div[id^="be_rechner_"] .abfrage_0 b { font-size: 1.3em; }
}

@media (max-width: 900px) {
         div[id^="be_rechner_"] input[type="radio"] + label { float: left; width: calc(50% - 40px); height: 160px; padding: 15px 10px 0px 10px; margin: 10px 10px 20px 10px; }
         div[id^="be_rechner_"] input[type="radio"]:checked + label { width: calc(50% - 40px); margin: 10px 10px 20px 10px; height: 160px; }

         div[id^="be_rechner_"] .h3 { font-size: 1.3em; }
         div[id^="be_rechner_"] .h3 span b { height: 20px; width: 24px; padding: 2px 2px 4px 2px; margin: 0px 10px 0px -10px; font-size: 0.9em; line-height: 1.1em; }
}

@media (max-width: 680px) {
         div[id^="be_rechner_"] .h3 span b { display: none; }
         div[id^="be_rechner_"] input[type="radio"] + label { float: left; width: calc(50% - 20px); height: 150px; padding: 15px 5px 0px 5px; margin: 10px 5px 20px 5px; }
         div[id^="be_rechner_"] input[type="radio"]:checked + label { width: calc(50% - 20px); margin: 10px 5px 20px 5px; height: 150px; }
}