/* Forms  © admotion*/





/* Styling Allgemein --------------------------------- */


.formError .formErrorContent { width: 100%;
    background: #d40000;
    color: #fff;
    width: auto;
    font-family: 'Open Sans';
    font-size: 12px;
    border: 0px solid #ddd;
    box-shadow: 0px 0px 0px #000;
    -moz-box-shadow: 0px 0px 0px #000;
    -webkit-box-shadow: 0px 0px 0px #000;
    padding: 4px 10px 4px 10px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;

}

.formError .formErrorArrowBottom {display: none; }
.formError .formErrorContent::before { content: '▲'; color: #d40000; position: absolute; top: -15px; }

#l { width: 32%; margin-right: 2%; float: left; }
#r { width: 66%; float: left; }


.bfQuickMode .bfRequired { vertical-align: top;
    background: none;
    font-size: 100%;
    font-weight: normal;
    border: none;
    padding: 0px 0px 0px 5px;
    margin: 0px;
    color: #8f8f8e;
    float: none;
}
.bfQuickMode legend {display: none; }

fieldset { border: 0px; padding: 0px; }

.bfQuickMode section.bfElemWrap {

    padding: 5px 0;
    margin: 0px 0px 0px 0px;
    position: relative;
    overflow: hidden;

}

.bfQuickMode .bfLabelLeft .bfElementGroup, .bfQuickMode .bfLabelRight .bfElementGroup, .bfQuickMode section.bfLabelLeft .bfElementGroupNoWrap { 
    width: 100%;
    float: left;
}

.bfQuickMode fieldset.bfInline section {
    padding: 0px;
    margin: 0px 0px 10px 0px;
}


.bfQuickMode .bfElementGroupNoWrap, .bfQuickMode .bfElementGroup {

    width: 100% !important;
    min-width: 10px !important;
    max-width: 100% !important;

}
.bfQuickMode textarea:hover, .bfQuickMode input[type="text"]:hover, .bfQuickMode input[type="password"]:hover, .bfQuickMode select:hover {

}
.bfQuickMode input[type="text"], .bfQuickMode textarea, .bfQuickMode .uneditable-input, .bfQuickMode input[type="text"]:hover, .bfQuickMode textarea:hover, .bfQuickMode .uneditable-input:hover, .bfQuickMode input[type="text"]:focus, .bfQuickMode textarea:focus, .bfQuickMode .uneditable-input:focus {

    width: inherit;
    max-width: none !important;
    min-width: 10px;

}

.bfQuickMode .bfNextButton, .bfQuickMode .bfSubmitButton, .bfQuickMode .bfCancelButton {
    float: left; background: #286ab7; width: 32%; padding: 10px 20px; color: #fff; font-size: 18px; font-weight: 700; transition: 0.2s; text-align: left; border: 0px; 
}
.bfNextButton:hover, .bfSubmitButton:hover, .bfCancelButton:hover { background: #fff; color: #286ab7; cursor: pointer; }

.bfQuickMode .bfPrevButton { color: #286ab7; font-size: 16px; font-weight: 400; text-align: left; border: 0px; background: transparent; position: absolute;left: 12px; margin-top: 80px; }
.bfQuickMode .bfPrevButton:hover { color: #000; cursor: pointer; }



.bfQuickMode input[type="radio"] {width: 20px !important; height: 20px !important; float: none !important; margin: 16px 6px 10px 8px !important; display: inline; 
    filter: brightness(0.8) contrast(1.5) hue-rotate(12deg) saturate(0.7) ;
    -webkit-filter: brightness(0.8) contrast(1.5) hue-rotate(12deg) saturate(0.7) ;
    -moz-filter: brightness(0.8) contrast(1.5) hue-rotate(12deg) saturate(0.7)  }


.bfQuickMode .bfLabelLeft .bfElementGroup label{ width: auto; float: none; margin: -1px 10px 0px 5px; display: inline; position: absolute; }

.bfClearfix { position: relative; }



textarea {
    width: 98% !important; box-sizing: border-box;
    margin: 0px !important;
    font-size: 16px; 
    padding: 10px 20px !important;
    text-align: left;    color: #8f8f8e; font-family: 'Open Sans', sans-serif;
    border: 0px solid #286ab7 !important;
}











/* Styling Masstöpfe --------------------------------- */

#r .bfGroupLabel { width: 200px !important; margin-top: 13px !important; margin-left: 5px !important;  }


#offerte_container input[type="text"] {
    width: 60% !important; box-sizing: border-box;
    float: left !important;
    margin: 0px !important;
    font-size: 16px; 
    padding: 10px 20px !important;
    border: 0px !important; 
    text-align: left;    color: #8f8f8e;
}

#l input {
    width: 60% !important; box-sizing: border-box;
    float: left !important;
    margin: 0px !important;
    font-size: 16px; 
    padding: 10px 20px !important;
    border: 0px !important; 
    text-align: center;    color: #8f8f8e;
}
#l label { box-sizing: border-box;
    width: 40% !important;
    float: left;
    margin: 0px 0px 0px 0px !important;
    padding: 8px 0px !important;

}
.bfQuickMode span.bfElemWrap {
    width: 100%;
    padding: 0px;
    margin: 0px 0px 10px 0px;
    position: relative;
    float: left;

}







/* Styling Farben --------------------------------- */

#farben .bfElemWrap, .bfElementGroupNoWrap {width: 100% !important; overflow: hidden; }

#farben input[type="radio"] { position: absolute; z-index: -1; left: -30px;  }



.checked { opacity: 1 !important; }
.checked::before { content: '✓' !important; font-size: 61px; color: #fff; float: right; margin-top: 25px; margin-right: 5px; }






/* Farbfelder Topf */
#bfGroupLabel65 { background: url(../images/Farben/balu_weiss.jpg); background-size: 100% 100%; }
#bfGroupLabel65::after { content: 'Weiss'; }
#bfGroupLabel65:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_1 { background: url(../images/Farben/balu_gold_bronze.jpg); background-size: 100% 100%;  }
#bfGroupLabel65_1::after { content: 'Gold'; }
#bfGroupLabel65_1:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_2 { background: url(../images/Farben/balu_schwarz.jpg); background-size: 100% 100%; }
#bfGroupLabel65_2::after { content: 'Schwarz'; }
#bfGroupLabel65_2:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_3 { background: url(../images/Farben/balu_grau.jpg); background-size: 100% 100%; }
#bfGroupLabel65_3::after { content: 'Grau'; }
#bfGroupLabel65_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_4 { background: url(../images/Farben/balu_eisenglimmer.jpg); background-size: 100% 100%; }
#bfGroupLabel65_4::after { content: 'Eisenglimmer'; }
#bfGroupLabel65_4:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_5 { background: url(../images/Farben/balu_antrazit.jpg); background-size: 100% 100%; }
#bfGroupLabel65_5::after { content: 'Anthrazit'; }
#bfGroupLabel65_5:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_6 { background: url(../images/Farben/balu_weinrot.jpg); background-size: 100% 100%; }
#bfGroupLabel65_6::after { content: 'Weinrot'; }
#bfGroupLabel65_6:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_7 { background: url(../images/Farben/balu_gruen.jpg); background-size: 100% 100%; }
#bfGroupLabel65_7::after { content: 'Grün'; }
#bfGroupLabel65_7:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65_8 { background: url(../images/Farben/balu_cortenstahl.jpg); background-size: 100% 100%; }
#bfGroupLabel65_8::after { content: 'Cortenstahl'; }
#bfGroupLabel65_8:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel65, #bfGroupLabel65_1, #bfGroupLabel65_3, #bfGroupLabel65_4, #bfGroupLabel65_6, #bfGroupLabel65_7 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 2% 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel65_2, #bfGroupLabel65_5, #bfGroupLabel65_8 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 0 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel65::after, #bfGroupLabel65_1::after, #bfGroupLabel65_2::after, #bfGroupLabel65_3::after, #bfGroupLabel65_4::after, #bfGroupLabel65_5::after, #bfGroupLabel65_6::after, #bfGroupLabel65_7::after, #bfGroupLabel65_8::after { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; box-sizing: border-box; font-size: 13px; }


/* Farbfelder Hochbeet */
#bfGroupLabel624 { background: url(../images/Farben/balu_weiss.jpg); background-size: 100% 100%; }
#bfGroupLabel624::after { content: 'Weiss'; }
#bfGroupLabel624:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_1 { background: url(../images/Farben/balu_gold_bronze.jpg); background-size: 100% 100%;  }
#bfGroupLabel624_1::after { content: 'Gold'; }
#bfGroupLabel624_1:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_2 { background: url(../images/Farben/balu_schwarz.jpg); background-size: 100% 100%; }
#bfGroupLabel624_2::after { content: 'Schwarz'; }
#bfGroupLabel624_2:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_3 { background: url(../images/Farben/balu_grau.jpg); background-size: 100% 100%; }
#bfGroupLabel624_3::after { content: 'Grau'; }
#bfGroupLabel624_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_4 { background: url(../images/Farben/balu_eisenglimmer.jpg); background-size: 100% 100%; }
#bfGroupLabel624_4::after { content: 'Eisenglimmer'; }
#bfGroupLabel624_4:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_5 { background: url(../images/Farben/balu_antrazit.jpg); background-size: 100% 100%; }
#bfGroupLabel624_5::after { content: 'Anthrazit'; }
#bfGroupLabel624_5:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_6 { background: url(../images/Farben/balu_weinrot.jpg); background-size: 100% 100%; }
#bfGroupLabel624_6::after { content: 'Weinrot'; }
#bfGroupLabel624_6:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_7 { background: url(../images/Farben/balu_gruen.jpg); background-size: 100% 100%; }
#bfGroupLabel624_7::after { content: 'Grün'; }
#bfGroupLabel624_7:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624_8 { background: url(../images/Farben/balu_cortenstahl.jpg); background-size: 100% 100%; }
#bfGroupLabel624_8::after { content: 'Cortenstahl'; }
#bfGroupLabel624_8:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel624, #bfGroupLabel624_1, #bfGroupLabel624_3, #bfGroupLabel624_4, #bfGroupLabel624_6, #bfGroupLabel624_7 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 2% 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel624_2, #bfGroupLabel624_5, #bfGroupLabel624_8 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 0 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel624::after, #bfGroupLabel624_1::after, #bfGroupLabel624_2::after, #bfGroupLabel624_3::after, #bfGroupLabel624_4::after, #bfGroupLabel624_5::after, #bfGroupLabel624_6::after, #bfGroupLabel624_7::after, #bfGroupLabel624_8::after { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; box-sizing: border-box; font-size: 13px; }



/* Farbfelder Holzlager */
#bfGroupLabel652 { background: url(../images/Farben/balu_weiss.jpg); background-size: 100% 100%; }
#bfGroupLabel652::after { content: 'Weiss'; }
#bfGroupLabel652:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_1 { background: url(../images/Farben/balu_gold_bronze.jpg); background-size: 100% 100%;  }
#bfGroupLabel652_1::after { content: 'Gold'; }
#bfGroupLabel652_1:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_2 { background: url(../images/Farben/balu_schwarz.jpg); background-size: 100% 100%; }
#bfGroupLabel652_2::after { content: 'Schwarz'; }
#bfGroupLabel652_2:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_3 { background: url(../images/Farben/balu_grau.jpg); background-size: 100% 100%; }
#bfGroupLabel652_3::after { content: 'Grau'; }
#bfGroupLabel652_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_4 { background: url(../images/Farben/balu_eisenglimmer.jpg); background-size: 100% 100%; }
#bfGroupLabel652_4::after { content: 'Eisenglimmer'; }
#bfGroupLabel652_4:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_5 { background: url(../images/Farben/balu_antrazit.jpg); background-size: 100% 100%; }
#bfGroupLabel652_5::after { content: 'Anthrazit'; }
#bfGroupLabel652_5:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_6 { background: url(../images/Farben/balu_weinrot.jpg); background-size: 100% 100%; }
#bfGroupLabel652_6::after { content: 'Weinrot'; }
#bfGroupLabel652_6:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_7 { background: url(../images/Farben/balu_gruen.jpg); background-size: 100% 100%; }
#bfGroupLabel652_7::after { content: 'Grün'; }
#bfGroupLabel652_7:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652_8 { background: url(../images/Farben/balu_cortenstahl.jpg); background-size: 100% 100%; }
#bfGroupLabel652_8::after { content: 'Cortenstahl'; }
#bfGroupLabel652_8:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


#bfGroupLabel652, #bfGroupLabel652_1, #bfGroupLabel652_3, #bfGroupLabel652_4, #bfGroupLabel652_6, #bfGroupLabel652_7 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 2% 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel652_2, #bfGroupLabel652_5, #bfGroupLabel652_8 { background-size: 100%; width: 32% !important; height: 100px; z-index: 999; float: left; margin: 0 0 15px 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel652::after, #bfGroupLabel652_1::after, #bfGroupLabel652_2::after, #bfGroupLabel652_3::after, #bfGroupLabel652_4::after, #bfGroupLabel652_5::after, #bfGroupLabel652_6::after, #bfGroupLabel652_7::after, #bfGroupLabel652_8::after { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; box-sizing: border-box; font-size: 13px; }










/* RAL */
#bfElemWrap353, #bfElemWrap632, #bfElemWrap660 {position: absolute; right: 0; width: 32%; padding: 0px; box-sizing: border-box; margin-top: 10px; }
#ff_elem353, #ff_elem632, #ff_elem660 { width: 100% !important; text-align: left; padding: 12px 8px !important; font-size: 16px;border: 0px !important; }

#ralinfo { position: absolute; right: 0; width: 100%; margin-top: 70px; font-size: 13px; line-height: normal; }

#farbinfo { float: left; width: 49%; }
#ral { float: right; width: 48%; }


a.phone { display: block; background: #fff url(../images/telefon.png) no-repeat 96% center; background-size: 22px 22px; padding: 10px; width: 32%; color: #286ab7; font-size: 18px; font-weight: 700; transition: 0.2s; box-sizing: border-box; text-align: left; position: absolute; margin-top: 10px; left: 34%; }
a.phone:hover { color: #fff; background: #286ab7 url(../images/telefon-weiss.png) no-repeat 96% center; background-size: 22px 22px; } 

a.mail { display: block; background: #fff url(../images/mail-blau.png) no-repeat 96% center; background-size: 32px 20px; padding: 10px; width: 32%; color: #286ab7; font-size: 18px; font-weight: 700; transition: 0.2s; box-sizing: border-box; text-align: left; position: absolute; margin-top: 10px; left: 34%; }
a.mail:hover { color: #fff; background: #286ab7 url(../images/mail.png) no-repeat 96% center; background-size: 32px 20px; } 










/*INFO PopUp Cortenstahl --------------------------------- */

#popupinfo { position: relative; }
#popup { position: absolute; right: 10px; color: #fff; top: 305px; font-size: 13px; line-height: normal; z-index: 999; }
#popuptext { display: none; position: absolute; right: -10px; }
#popup:hover #popuptext { display: block; background: #fff; padding: 20px; color: #8f8f8e; width: 320px;  }










/* Styling Zubehör --------------------------------- */

#bfElemWrap410, #bfElementGroupNoWrap410 {width: 100% !important; overflow: hidden; }

#bfElemWrap410.bfElemWrap.bfLabelLeft span#bfElementGroupNoWrap410.bfElementGroupNoWrap input[type="radio"] { position: absolute; z-index: -1; left: -30px;  }

#bfElementGroupNoWrap410 .bfQuickMode input[type="radio"] {width: 0px !important; margin: 0px !important; display: inline; height: 0px !important; padding: 0px !important; }


.checked { opacity: 1 !important; }
.checked::before { content: '✓' !important; font-size: 61px; color: #fff; float: right; margin-top: 25px; margin-right: 5px; z-index: 999; }




/* Zubehör Topf Felder */
#bfElementGroupNoWrap495 input[type="checkbox"]{ position: absolute; z-index: -1; left: -30px;  }
#bfElementGroupNoWrap495, #bfElemWrap495 { overflow: hidden; }


#bfGroupLabel495 { background: url(../images/TopfZubehoer/Rollen.jpg) no-repeat bottom center;}
#bfGroupLabel495::after { content: 'Rollen (je Rolle Fr. 25.–)'; }


#bfGroupLabel495_1 { background: url(../images/TopfZubehoer/Nivellierfuesse.jpg) no-repeat bottom center;}
#bfGroupLabel495_1::after { content: 'Nivellierfüsse'; }


#bfGroupLabel495_2 { background: url(../images/TopfZubehoer/Wasserstand-Rohr.jpg) no-repeat bottom center;}
#bfGroupLabel495_2::after { content: 'Wasserstand Rohr'; }


#bfGroupLabel495_3 { background: url(../images/TopfZubehoer/Bewaesserungskanal.jpg) no-repeat bottom center;}
#bfGroupLabel495_3::after { content: 'Bewässerungskanal'; }



#bfGroupLabel495,  #bfGroupLabel495_1, #bfGroupLabel495_2, #bfGroupLabel495_3 { background-size: 100%; width: 23% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel495::after, #bfGroupLabel495_1::after, #bfGroupLabel495_2::after, #bfGroupLabel495_3::after {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; font-size: 13px; box-sizing: border-box; }      

#bfGroupLabel495:hover::after, #bfGroupLabel495_1:hover::after, #bfGroupLabel495_2:hover::after, #bfGroupLabel495_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }




/* Zubehör Hochbeet Felder */
#bfElementGroupNoWrap633 input[type="checkbox"]{ position: absolute; z-index: -1; left: -30px;  }
#bfElementGroupNoWrap633, #bfElemWrap633 { overflow: hidden; }


#bfGroupLabel633 { background: url(../images/TopfZubehoer/Rollen.jpg) no-repeat bottom center;}
#bfGroupLabel633::after { content: 'Rollen (je Rolle Fr. 25.–)'; }


#bfGroupLabel633_1 { background: url(../images/TopfZubehoer/Nivellierfuesse.jpg) no-repeat bottom center;}
#bfGroupLabel633_1::after { content: 'Nivellierfüsse'; }


#bfGroupLabel633_2 { background: url(../images/TopfZubehoer/Wasserstand-Rohr.jpg) no-repeat bottom center;}
#bfGroupLabel633_2::after { content: 'Wasserstand Rohr'; }


#bfGroupLabel633_3 { background: url(../images/TopfZubehoer/Bewaesserungskanal.jpg) no-repeat bottom center;}
#bfGroupLabel633_3::after { content: 'Bewässerungskanal'; }



#bfGroupLabel633,  #bfGroupLabel633_1, #bfGroupLabel633_2, #bfGroupLabel633_3 { background-size: 100%; width: 23% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel633::after, #bfGroupLabel633_1::after, #bfGroupLabel633_2::after, #bfGroupLabel633_3::after {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; font-size: 13px; box-sizing: border-box; }      

#bfGroupLabel633:hover::after, #bfGroupLabel633_1:hover::after, #bfGroupLabel633_2:hover::after, #bfGroupLabel633_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


/* Zubehör Holzlager Felder */
#bfElementGroupNoWrap495 input[type="checkbox"]{ position: absolute; z-index: -1; left: -30px;  }
#bfElementGroupNoWrap495, #bfElemWrap495 { overflow: hidden; }


#bfGroupLabel495 { background: url(../images/TopfZubehoer/Rollen.jpg) no-repeat bottom center;}
#bfGroupLabel495::after { content: 'Rollen (je Rolle Fr. 25.–)'; }


#bfGroupLabel495_1 { background: url(../images/TopfZubehoer/Nivellierfuesse.jpg) no-repeat bottom center;}
#bfGroupLabel495_1::after { content: 'Nivellierfüsse'; }


#bfGroupLabel495_2 { background: url(../images/TopfZubehoer/Wasserstand-Rohr.jpg) no-repeat bottom center;}
#bfGroupLabel495_2::after { content: 'Wasserstand Rohr'; }


#bfGroupLabel495_3 { background: url(../images/TopfZubehoer/Bewaesserungskanal.jpg) no-repeat bottom center;}
#bfGroupLabel495_3::after { content: 'Bewässerungskanal'; }



#bfGroupLabel495,  #bfGroupLabel495_1, #bfGroupLabel495_2, #bfGroupLabel495_3 { background-size: 100%; width: 23% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel495::after, #bfGroupLabel495_1::after, #bfGroupLabel495_2::after, #bfGroupLabel495_3::after {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; font-size: 13px; box-sizing: border-box; }      

#bfGroupLabel495:hover::after, #bfGroupLabel495_1:hover::after, #bfGroupLabel495_2:hover::after, #bfGroupLabel495_3:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }


/* Zubehör Holzlager Felder */
#bfElementGroupNoWrap661 input[type="checkbox"]{ position: absolute; z-index: -1; left: -30px;  }
#bfElementGroupNoWrap661, #bfElemWrap661 { overflow: hidden; }


#bfGroupLabel661 { background: url(../images/TopfZubehoer/Nivellierfuesse.jpg) no-repeat bottom center;}
#bfGroupLabel661::after { content: 'Nivellierfüsse'; }




#bfGroupLabel661 { background-size: 100%; width: 23% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }

#bfGroupLabel661::after {position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); padding: 5px 8px; color: #fff; font-weight: 700; font-size: 13px; box-sizing: border-box; }      

#bfGroupLabel661:hover::after { opacity: 1; transition: 0.2s; cursor: pointer; background: #286ab7; }











/* Zusammenfassung */

#zusammenfassung { background: #fff; padding: 10px; }

#lieferungradio .bfGroupLabel { margin: 13px 10px 10px 7px !important; display: inline-block !important; }

#lieferadresse .bfQuickMode section.bfElemWrap { padding: 0x !important; }






@media(max-width:1200px){
    
#ralinfo { position: relative; right: 0; width: 100%; margin-top: 0px; font-size: 13px; line-height: normal; }
#ralinfo #l { display: none; }
#ralinfo #r { width: 100%; float: none; }

#farbinfo { float: none; width: 100%; margin-bottom: 20px; }
#ral { float: none; width: 100%; }
#bfElemWrap353, #bfElemWrap632, #bfElemWrap660 {position: relative; right: 0; width: 100%; padding: 0px; box-sizing: border-box; margin-top: 10px; }


a.phone { display: block; background: #fff url(../images/telefon.png) no-repeat 96% center; background-size: 22px 22px; padding: 10px; width: auto; color: #286ab7; font-size: 18px; font-weight: 700; transition: 0.2s; box-sizing: border-box; text-align: left; position: relative; margin-top: 10px; left: 0%; }
    
    
    /* Zubehör */
    #bfGroupLabel495,  #bfGroupLabel495_1, #bfGroupLabel495_2, #bfGroupLabel495_3 { background-size: 100%; width: 48% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }
        
    /* Zubehör */
    #bfGroupLabel633,  #bfGroupLabel633_1, #bfGroupLabel633_2, #bfGroupLabel633_3 { background-size: 100%; width: 48% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }
    
      /* Zubehör */
    #bfGroupLabel661 { background-size: 100%; width: 48% !important; height: 150px !important; z-index: 999; float: left; margin: 0 2% 2% 0 !important; position: relative; transition: 0.2s; }
    
    
}




@media(max-width:767px){
     
#l { width: 100%; margin-right: 0%; float: none; }
#r { width: 100%; float: none; }

    
    /* Fartben */
      
   #bfGroupLabel65, #bfGroupLabel65_2, #bfGroupLabel65_4, #bfGroupLabel65_6, #bfGroupLabel65_8 { background-size: 100%; width: 49% !important; opacity: 0.8;  margin: 0 2% 10px 0 !important; }

    #bfGroupLabel65_1, #bfGroupLabel65_3, #bfGroupLabel65_5, #bfGroupLabel65_7 { background-size: 100%; width: 49% !important; opacity: 0.8; margin: 0 0% 10px 0 !important; }     

    
   #bfGroupLabel624, #bfGroupLabel624_2, #bfGroupLabel624_4, #bfGroupLabel624_6, #bfGroupLabel624_8 { background-size: 100%; width: 49% !important; opacity: 0.8;  margin: 0 2% 10px 0 !important; }

    #bfGroupLabel624_1, #bfGroupLabel624_3, #bfGroupLabel624_5, #bfGroupLabel624_7 { background-size: 100%; width: 49% !important; opacity: 0.8; margin: 0 0% 10px 0 !important; }
    
    
   #bfGroupLabel652, #bfGroupLabel652_2, #bfGroupLabel652_4, #bfGroupLabel652_6, #bfGroupLabel652_8 { background-size: 100%; width: 49% !important; opacity: 0.8;  margin: 0 2% 10px 0 !important; }

    #bfGroupLabel652_1, #bfGroupLabel652_3, #bfGroupLabel652_5, #bfGroupLabel652_7 { background-size: 100%; width: 49% !important; opacity: 0.8; margin: 0 0% 10px 0 !important; }
    
    
    
    
/* --------- */

    
.bfQuickMode .bfLabelLeft label, .bfQuickMode .bfLabelRight label { min-width: 10px !important; max-width: none !important; }

    
    #popup { position: absolute; right: auto; left: 111px; top: 514px; }
    #popuptext { display: none; position: absolute; left: -111px; }
    #popup:hover #popuptext, #popup:active #popuptext, #popup:focus #popuptext { display: block; width: 320px;  }


}


@media(max-width:400px){
.bfQuickMode .bfNextButton, .bfQuickMode .bfSubmitButton, .bfQuickMode .bfCancelButton { width: 49%; }
    
    #r .bfGroupLabel { width: 140px !important; margin-top: 13px !important; margin-left: 5px !important;  }

    
}