/* ----------------------------------------------------------------- */
/* --------------------------- Variablen --------------------------- */
/* ----------------------------------------------------------------- */
:root {
	/* Abstände */
	--abstand_6: 0.625rem;
	--abstand_9: 0.9375rem;
	--abstand_12: 1.25rem;
	--abstand_15: 1.46875rem;
	--abstand_18: 1.875rem;
	--abstand_21: 2.125rem;
	--abstand_24: 2.4rem;
	--abstand_25: 2.5rem;
	--abstand_36: 3.75rem;
	--abstand_54: 5.3rem;
	--abstand_106: 10.6rem;
	
	/* Farben */
	--black: #3B3030;
	--green: #008542;
	--lightgreen: #3b9e68;
	--red: #E62E2C;
	--gray: #a4a4a4;
	--midgray: #c2c3c2;
	--lightgray: #f3f3f3;
	--sourceSansSemibold: Source Sans SemiBold, Arial, sans-serif;
	--sourceSansPro: Source Sans Pro, Arial, sans-serif;
	--hgbRegular: hagebau Beta Regular, Arial, sans-serif;
}


/* -------------------------------------------------------------------- */
/* --------------------------- Schriftarten --------------------------- */
/* -------------------------------------------------------------------- */
@font-face{font-family:"iconfont";src:url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.eot");src:url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.eot?#iefix") format("embedded-opentype"),url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.woff") format("woff"),url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.ttf") format("truetype"),url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.svg#iconfont") format("svg");font-weight:normal;font-style:normal}
@media screen and (-webkit-min-device-pixel-ratio: 0){@font-face{font-family:"iconfont";src:url("/fonts/iconfont_016c6000158d8b0ff8870bf2e21c1665.svg#iconfont") format("svg")} }


@font-face{
	font-family:'Source Sans Pro';
	src:url("./fonts/Source Sans Pro regular.eot");
	src:url("./fonts/Source Sans regular.eot?#iefix") format('embedded-opentype'),url("/fonts/Source Sans Pro regular.ttf") format('truetype');
	font-style:normal;
	font-weight:400;
	font-display:fallback;
}

@font-face {
	font-family:'Source Sans Pro';
	src:url("./fonts/Source Sans Pro 700.eot");
	src:url("./fonts/Source Sans Pro 700.eot?#iefix") format('embedded-opentype'),url("/fonts/Source Sans Pro 700.ttf") format('truetype');
	font-style:normal;
	font-weight:700;
	font-display:fallback;
}

@font-face {
    font-family: 'hagebau Beta Regular';
    src: url('fonts/hagebaubetatext-regular-webfont.woff2') format('woff2'),
         url('fonts/hagebaubetatext-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* ------------------------------------------------------------- */
/* -------------------- Schriftformatierung -------------------- */
/* ------------------------------------------------------------- */


h1, h2, h3, h4 {
	
	font-weight: bolder;
	margin-top:0;
}
h1 {
	font-size: 3.75rem;
	line-height: 4.25rem;
}
h2 {
	font-size: 2.25rem;
	line-height: 2.625rem;
}
h3 {
	font-size: 1.5rem;
	line-height: 2.125rem;
	margin-bottom: 0.9375rem;
}

b, strong {font-weight: bold;}

.iconfont {font-family: iconfont;}
.normal {font-weight: normal;}

.small {
	font-size: 80%;
	line-height: 20px;
}

.hgbRegular {
	font-family: hagebau Beta Regular, Arial, sans-serif;
}

::selection {
	background-color: #008542;
	color: #ffffff;
}


@media screen and (max-width: 1024px) {
	h1 {
		font-size: 2.1875rem;
		line-height: 2.5rem;
	}
	h2 {
		font-size: 1.5rem;
		line-height: 1.75rem;
	}
	h3 {
		font-size: 1.125rem;
		line-height: 1.3755rem;
	}
}

/* -------------------------------------------------- */
/* --------------------- INPUTS --------------------- */
/* -------------------------------------------------- */

input:not([type="checkbox"], [type="radio"]),
textarea,
select {
	font-size: inherit;
	font-family: inherit;
	font-weight: bolder;
	padding: 10px;
	max-width: 100%;
	outline:none;
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"], .shopCustBtn, .shopCustTb),
select:not(.shopCustSel), textarea:not(.shopCustTa) {
	background-color: #F4F3F3;
	border: medium none;
	border-top: 2px solid #CCE7D9;
	border-radius: 4px;
}

input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"]):focus,
textarea:focus,
select:focus {
	
	border-color: #008542;
}

input[type="submit"],
input[type="button"],
button,
label,
select {cursor:pointer;}

input[type="submit"]:not(.shopCustBtn),
input[type="button"]:not(.shopCustBtn),
button:not(.shopCustBtn) {
	background-image: linear-gradient(#008542, #006D29);
	box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
	border-radius: 4px;
	border: medium none;
	color: #FFF;
	padding: 10px 30px;
	font-family: inherit;
	font-size: inherit;
	font-weight: bolder;
	text-align: center;
}
input[type="submit"]:not(.shopCustBtn):hover,
input[type="button"]:not(.shopCustBtn):hover,
button:not(.shopCustBtn):hover {
	background-image: linear-gradient(#008040, #006527);
	box-shadow: 0px 2px rgba(0, 0, 0, 0.2);
}


/* -------------------------------------------------- */
/* -------------------- BUTTONS --------------------- */
/* -------------------------------------------------- */
.buttonGreen, .buttonRed {
	display: inline-block;
	font-weight: bolder;
	color: #fff !important;
	border-radius: 4px;
	box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
	font-size: 1.5rem;
	padding: 0.625rem 1.875rem;
	text-align: center;
}
.buttonGreen { background-image:linear-gradient(#008542, #006D29); }
.buttonRed { background-image:linear-gradient(#E23C30, #D52B1E); }

.buttonGreen:hover {
	background-image: linear-gradient(#008040, #006527);
	box-shadow: 0px 2px rgba(0, 0, 0, 0.2);
}

.buttonGreenNew {
	display: inline-block;
	font-weight: normal;
	background-color: #009d47;
	color: white !important;
	border-radius: 5px;
	padding: 5px 15px;
	border: none;
	line-height: 100%;
}
.buttonGreenNew:hover {background-color: #ccc;}

.buttonSmall {
	display: inline-block;
	font-weight: bolder;
	color: #fff !important;
	border-radius: 4px;
	box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
	padding: 0.3rem 0.9rem;
	text-align: center;
}
.buttonSmall { background-image:linear-gradient(#008542, #006D29); }


/* -------------------------------------------------------------------- */
/* ------------------------------ Farben ------------------------------ */
/* -------------------------------------------------------------------- */
.green, .gruen { color: var(--green); } .bg_green, .bg_gruen { background-color: var(--green); }
.red {color: var(--red); } .bg_red { background-color: var(--red); }
.blue {color: #3B5998; } .bg_blue { background-color:#3B5998; }
.white, .weiss {color: #fff; } .bg_white { background-color:#fff; }
.lightgreen {color: #CCE7D9; } .bg_lightgreen { background-color:#CCE7D9; }
.gray{ color:#353832; }.bg_gray{ background-color:#353832; }
.lightgray{ color:#EAEAEA; }.bg_lightgray{ background-color:#EAEAEA; }
.black {color: #3B3030; }.bg_black {background-color: #3B3030; }



/* -------------------------------------------------------------------- */
/* ----------------------------- Breiten ------------------------------ */
/* -------------------------------------------------------------------- */
.wide1, .col14, .col14-2-1, .wide2, .col24,.wide3, .col34,.wide4, .col44,
.col13, .col13-2-1, .col23, .col33, .col15, .col25, .col35, .col45, .col12, .col12-1-1, .col11 {
	display: inline-block; vertical-align: top; box-sizing:border-box /* neu oh230306 */}
.wide, .col44, .col33, .wide4, .col1, .col11 {width: 100%;}
.wide2, .col24, .col12, .col12-1-1 {width: 49.5%;}
.wide1, .col14 {width: 24.5%;}
.col15 {width: 19.5%;}
.col13, .col13-2-1 {width: 33%;}
.col25 {width: 39.5%;}
.col35 {width: 59.5%;}
.col45 {width: 79.5%;}
.col23 {width: 66%;}
.wide3, .col34, .col34-1 {width: 74.5%;}

video {max-width: 100%;}


/* Flex */
.col12flexAb9, .col13flexAb9, .col16flexAb18 {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

.col12flexAb9, .col13flexAb9 {
	gap: var(--abstand_9);
}

.col16flexAb18 {
	gap: var(--abstand_18);
}

.col12flexAb9 > * {
	width: calc(50% - var(--abstand_9) / 2);
}

.col13flexAb9 > * {
	width: calc(33.33% - var(--abstand_9) * 2 / 3);
}

.col16flexAb18 > * {
	width: calc(16.66% - var(--abstand_18) * 5 / 6);
}



@media (max-width: 1440px) {

}

@media (max-width: 1024px) {
	.col13-2-1, .col25, .col35, .col14-2-1 {width: 49%;} 
	.col15 {width: 24.5%}
	.col45 {width: 74.5%}
	.col12-1-1 {width:100%}
	.bigIncludeTo.col13{width:100%;}
	
	
	.col13flexAb9 > * {width: calc(50% - var(--abstand_9) / 2);}
	
	.col16flexAb18 > * {
		width: calc(20% - var(--abstand_18) * 4 / 5);
	}
}

@media (max-width: 900px) {
	.col16flexAb18 > * {
		width: calc(25% - var(--abstand_18) * 3 / 4);
	}
}

@media (max-width: 768px) {
	.col12-1-1, .col34-1 {width: 100%;}
	.col24, .col23, .wide3, .col34, .col12, .col13-2-1, .col14-2-1 {width: 100%;}
	.col14, .col13 {width: 100%;}
	
	.col12flexAb9 > * {width: 100%;}
}

@media (max-width: 600px) {
	.col14, .col13 {width: 100%;}
	
	.col13flexAb9 > * {width: 100%;}
	
	
	.col16flexAb18 {
		gap: var(--abstand_9);
	}
	
	.col16flexAb18 > * {
		width: calc(33.33% - var(--abstand_9) * 2 / 3);
	}
}

@media (max-width: 400px) {
	.col16flexAb18 > * {
		width: calc(50% - var(--abstand_9) / 2);
	}
}

/* -------------------------------------------------------------------- */
/* ----------------------------- Abstände ----------------------------- */
/* -------------------------------------------------------------------- */
/*
.tm {margin-top: ;} .bm {margin-bottom: ;}
.lm {margin-left: ;} .rm {margin-right: ;}
.hm {margin-left: ;margin-right: ;}
.vm {margin-top: ;margin-bottom: ;}
.tp {padding-top: ;} .bp {padding-bottom: ;}
.lp {padding-left: ;} .rp {padding-right: ;}
.hp {padding-left: ;padding-right: ;}
.vp {padding-top: ;padding-bottom: ;}
*/
.tm0 {margin-top: 0;} .bm0 {margin-bottom: 0;}
.lm0 {margin-left: 0;} .rm0 {margin-right: 0;}
.hm0 {margin-left: 0; margin-right: 0;}
.vm0 {margin-top: 0; margin-bottom: 0;}
.tp0 {padding-top: 0;} .bp0 {padding-bottom: 0;}
.lp0 {padding-left: 0;} .rp0 {padding-right: 0;}
.hp0 {padding-left: 0; padding-right: 0;}
.vp0 {padding-top: 0; padding-bottom: 0;}


.tm6 {margin-top: var(--abstand_6);} .bm6 {margin-bottom: var(--abstand_6);}
.lm6 {margin-left: var(--abstand_6);} .rm6 {margin-right: var(--abstand_6);}
.hm6 {margin-left: var(--abstand_6); margin-right: var(--abstand_6);}
.vm6 {margin-top: var(--abstand_6); margin-bottom: var(--abstand_6);}
.tp6 {padding-top: var(--abstand_6);} .bp6 {padding-bottom: var(--abstand_6);}
.lp6 {padding-left: var(--abstand_6);} .rp6 {padding-right: var(--abstand_6);}
.hp6 {padding-left: var(--abstand_6); padding-right: var(--abstand_6);}
.vp6 {padding-top: var(--abstand_6); padding-bottom: var(--abstand_6);}


.tm9 {margin-top: var(--abstand_9);} .bm9 {margin-bottom: var(--abstand_9);}
.lm9 {margin-left: var(--abstand_9);} .rm9 {margin-right: var(--abstand_9);}
.hm9 {margin-left: var(--abstand_9); margin-right: var(--abstand_9);}
.vm9 {margin-top: var(--abstand_9); margin-bottom: var(--abstand_9);}
.tp9 {padding-top: var(--abstand_9);} .bp9 {padding-bottom: var(--abstand_9);}
.lp9 {padding-left: var(--abstand_9);} .rp9 {padding-right: var(--abstand_9);}
.hp9 {padding-left: var(--abstand_9); padding-right: var(--abstand_9);}
.vp9 {padding-top: var(--abstand_9); padding-bottom: var(--abstand_9);}


.tm12 {margin-top: var(--abstand_12);} .bm12 {margin-bottom: var(--abstand_12);}
.lm12 {margin-left: var(--abstand_12);} .rm12 {margin-right: var(--abstand_12);}
.hm12 {margin-left: var(--abstand_12); margin-right: var(--abstand_12);}
.vm12 {margin-top: var(--abstand_12); margin-bottom: var(--abstand_12);}
.tp12 {padding-top: var(--abstand_12);} .bp12 {padding-bottom: var(--abstand_12);}
.lp12 {padding-left: var(--abstand_12);} .rp12 {padding-right: var(--abstand_12);}
.hp12 {padding-left: var(--abstand_12); padding-right: var(--abstand_12);}
.vp12 {padding-top: var(--abstand_12); padding-bottom: var(--abstand_12);}


.tm15 {margin-top: var(--abstand_15);} .bm15 {margin-bottom: var(--abstand_15);}
.lm15 {margin-left: var(--abstand_15);} .rm15 {margin-right: var(--abstand_15);}
.hm15 {margin-left: var(--abstand_15); margin-right: var(--abstand_15);}
.vm15 {margin-top: var(--abstand_15); margin-bottom: var(--abstand_15);}
.tp15 {padding-top: var(--abstand_15);} .bp15 {padding-bottom: var(--abstand_15);}
.lp15 {padding-left: var(--abstand_15);} .rp15 {padding-right: var(--abstand_15);}
.hp15 {padding-left: var(--abstand_15); padding-right: var(--abstand_15);}
.vp15 {padding-top: var(--abstand_15); padding-bottom: var(--abstand_15);}


.tm18 {margin-top: var(--abstand_18);} .bm18 {margin-bottom: var(--abstand_18);}
.lm18 {margin-left: var(--abstand_18);} .rm18 {margin-right: var(--abstand_18);}
.hm18 {margin-left: var(--abstand_18); margin-right: var(--abstand_18);}
.vm18 {margin-top: var(--abstand_18); margin-bottom: var(--abstand_18);}
.tp18 {padding-top: var(--abstand_18);} .bp18 {padding-bottom: var(--abstand_18);}
.lp18 {padding-left: var(--abstand_18);} .rp18 {padding-right: var(--abstand_18);}
.hp18 {padding-left: var(--abstand_18); padding-right:var(--abstand_18);}
.vp18 {padding-top: var(--abstand_18); padding-bottom: var(--abstand_18);}


.tm21 {margin-top: var(--abstand_21);} .bm21 {margin-bottom: var(--abstand_21);}
.lm21 {margin-left: var(--abstand_21);} .rm21 {margin-right: var(--abstand_21);}
.hm21 {margin-left: var(--abstand_21); margin-right: var(--abstand_21);}
.vm21 {margin-top: var(--abstand_21); margin-bottom: var(--abstand_21);}
.tp21 {padding-top: var(--abstand_21);} .bp21 {padding-bottom: var(--abstand_21);}
.lp21 {padding-left: var(--abstand_21);} .rp21 {padding-right: var(--abstand_21);}
.hp21 {padding-left: var(--abstand_21); padding-right: var(--abstand_21);}
.vp21 {padding-top: var(--abstand_21); padding-bottom: var(--abstand_21);}


.tm24 {margin-top: var(--abstand_24);} .bm24 {margin-bottom: var(--abstand_24);}
.lm24 {margin-left: var(--abstand_24);} .rm24 {margin-right: var(--abstand_24);}
.hm24 {margin-left: var(--abstand_24); margin-right:var(--abstand_24);}
.vm24 {margin-top: var(--abstand_24); margin-bottom: var(--abstand_24);}
.tp24 {padding-top: var(--abstand_24);} .bp24 {padding-bottom: var(--abstand_24);}
.lp24 {padding-left: var(--abstand_24);} .rp24 {padding-right: var(--abstand_24);}
.hp24 {padding-left: var(--abstand_24); padding-right: var(--abstand_24);}
.vp24 {padding-top: var(--abstand_24); padding-bottom: var(--abstand_24);}


.tm25 {margin-top: var(--abstand_25);} .bm25 {margin-bottom: var(--abstand_25);}
.lm25 {margin-left: var(--abstand_25);} .rm25 {margin-right: var(--abstand_25);}
.hm25 {margin-left: var(--abstand_25); margin-right: var(--abstand_25);}
.vm25 {margin-top: var(--abstand_25); margin-bottom: var(--abstand_25);}
.tp25 {padding-top: var(--abstand_25);} .bp25 {padding-bottom: var(--abstand_25);}
.lp25 {padding-left: var(--abstand_25);} .rp25 {padding-right: var(--abstand_25);}
.hp25 {padding-left: var(--abstand_25); padding-right: var(--abstand_25);}
.vp25 {padding-top: var(--abstand_25); padding-bottom: var(--abstand_25);}


.tm36 {margin-top: var(--abstand_36);} .bm36 {margin-bottom: var(--abstand_36);}
.lm36 {margin-left: var(--abstand_36);} .rm36 {margin-right: var(--abstand_36);}
.hm36 {margin-left: var(--abstand_36);margin-right: var(--abstand_36);}
.vm36 {margin-top: var(--abstand_36);margin-bottom: var(--abstand_36);}
.bm36-18 {margin-bottom: var(--abstand_36);}

.tp36 {padding-top: var(--abstand_36);} .bp36 {padding-bottom: var(--abstand_36);}
.lp36 {padding-left: var(--abstand_36);} .rp36 {padding-right: var(--abstand_36);}
.hp36 {padding-left: var(--abstand_36); padding-right: var(--abstand_36);}
.vp36 {padding-top: var(--abstand_36); padding-bottom: var(--abstand_36);}

.tm54 {margin-top: var(--abstand_54);} .bm54 {margin-bottom: var(--abstand_54);}
.lm54 {margin-left: var(--abstand_54);} .rm54 {margin-right: var(--abstand_54);}
.hm54 {margin-left: var(--abstand_54); margin-right: var(--abstand_54);}
.vm54 {margin-top: var(--abstand_54); margin-bottom: var(--abstand_54);}

.hp54 {padding-left: var(--abstand_54); padding-right: var(--abstand_54);}
.hp54-36-9 {padding-left: var(--abstand_54); padding-right: var(--abstand_54);}

.hp106 {padding-left: 5.3rem; padding-right: 5.3rem;}
.hp106-54-9 {padding-left: var(--abstand_106); padding-right: var(--abstand_106);}

.contentWrapper, #main > .bigIncludeTo {padding-left: var(--abstand_106); padding-right: var(--abstand_106);}
.contentWrapperL {padding-left: var(--abstand_106);} .contentWrapperR {padding-right: var(--abstand_106);}


@media screen and (max-width: 1440px) {
	.hp106-54-9{padding-left: 5.925rem; padding-right: 5rem;}
	.hp54-36-9 {padding-left: 3rem; padding-right: 3rem;}
	.contentWrapper, #main > .bigIncludeTo {padding-left: 6rem; padding-right: 6rem;}
	.contentWrapperL {padding-left: 6rem;} .contentWrapperR {padding-right: 6rem;}
}

@media (max-width: 1024px) {
	.ttm0 {margin-top: 0;} .tbm0 {margin-bottom: 0;}
	.tlm0 {margin-left: 0;} .trm0 {margin-right: 0;}
	.thm0 {margin-left: 0; margin-right: 0;}
	.tvm0 {margin-top: 0; margin-bottom: 0;}
	.ttp0 {padding-top: 0;} .tbp0 {padding-bottom: 0;}
	.tlp0 {padding-left: 0;} .trp0 {padding-right: 0;}
	.thp0 {padding-left: 0; padding-right: 0;}
	.tvp0 {padding-top: 0; padding-bottom: 0;}
	
	.bm36-18 {margin-bottom: var(--abstand_18);}
}

@media screen and (max-width: 768px) {
	.hp106-54-9, .hp54-36-9 {padding-left: 1rem; padding-right: 1rem;}
	.contentWrapper, #main > .bigIncludeTo {padding-left: 2rem; padding-right: 2rem;}
	.contentWrapperL {padding-left: 2rem;} .contentWrapperR {padding-right: 2rem;}
}

@media (max-width: 600px) {
	.mtm0 {margin-top: 0;} .mbm0 {margin-bottom: 0;}
	.mlm0 {margin-left: 0;} .mrm0 {margin-right: 0;}
	.mhm0 {margin-left: 0; margin-right: 0;}
	.mvm0 {margin-top: 0; margin-bottom: 0;}
	.mtp0 {padding-top: 0;} .mbp0 {padding-bottom: 0;}
	.mlp0 {padding-left: 0;} .mrp0 {padding-right: 0;}
	.mhp0 {padding-left: 0; padding-right: 0;}
	.mvp0 {padding-top: 0; padding-bottom: 0;}
}



/* -------------------------------------------------------------------- */
/* ---------------------------- Allgemein ----------------------------- */
/* -------------------------------------------------------------------- */
* {
	box-sizing: border-box;
	
}

body {
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: #3B3030;
	margin: 0;
	background-color: #e5e5e5;
	hyphens: auto;
	-moz-hyphens: auto;
}
html {
	font-size: 16px;
	color: #3B3030;
	line-height: 1; 
	font-family: "Source Sans Pro", Arial, sans-serif;
	scroll-behavior: smooth;
}
a{color:#008542; font-weight:bolder; text-decoration:none;}

img, video, iframe {max-width:100%;}

small {
 font-size: 80%;
}

#main{
	max-width: 1440px;
	margin: 0 auto;
	background-color: white;
}

@media screen and (max-width: 1024px) {
	body {
		font-size: 0.875rem;
		line-height: 1.25rem;
	}
	
	.footer_gray {padding-bottom: 80px !important;}
}


/*================================*/
/*	DISPLAY	*/
/*================================*/
.dib {display: inline-block;}
.block {display: block;}
.flex {display: flex; flex-wrap: wrap;}
.flex_nowrap{flex-wrap: nowrap;}
.none, .radio_none {display: none !important;}

.tableWrapper {
	overflow-x: auto;
	scrollbar-width: thin;
}

.text_lt {text-decoration: line-through;}
.text_underline {text-decoration: underline;}
.uppercase {text-transform: uppercase;}


.oScroll {overflow: scroll;}
.oHide {overflow: hidden;}
.oVisible {overflow: visible;}

.hr {text-align:right}
.hl {text-align:left}
.hc {text-align:center}
.vt {vertical-align:top}
.vb {vertical-align:bottom}
.vm {vertical-align:middle}

.float_left {float:left;}
.float_right {float:right;}
.float_clear {float:none;}

.absolute {position:absolute;}
.relative {position:relative;}
.fixed {position:fixed;}

.centerPos {
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
}


#main > .bigIncludeTo {
 display: flex;
 flex-wrap: wrap;
}

noindex {display: block;}

/* --- von at.hagebau.com Ende --- */

	/* colors */

	.green { color: #008542; }
	.white, a.white { color: #fff; }
	.black, a.black {color: #3B3030; }
	.red, a.red {color: #D52B1E; }
	.blue, a.blue {color: #3B5998; }
	.lightgreen {color: #CCE7D9; }

	.back_white { background-color: #fff;}
	.back_green { background-color: #008542; color: #fff;}
	.back_grey  {background-color: #353832; color: #fff; }
	.back_blue {background-color: #3B5998; color: #fff; }
	.back_lightgrey  {background-color: #F4F3F3; }
	.back_lightgreen {background-color: #CCE7D9; }
	.back_red {background-color: #D52B1E; color: #fff;}

	.round {box-sizing:border-box; border-radius: 4px; border: medium none;}
	.shadow {box-shadow: 0px 3px rgba(0, 0, 0, 0.2); outline: medium none;}
	.border_box { box-sizing: border-box;}


	/* borders hellgrün / dunkelgrün */
	/* bisherige Werte */
	.col_headline {border-bottom: 0.1875rem solid #CCE7D9; width: 100%; display: block;  }
	.border_top_green  { border-top: 3px solid #CCE7D9; }
	.border_bottom_green  { border-bottom: 3px solid #CCE7D9; }
	.border_small { border-width: 1px;}
	.list_firstline , .list_followline{ border-bottom: 1px solid #CCE7D9;
	padding-top: 0.9375rem; padding-bottom: 0.9375rem; padding-left: 0.9375rem;}
	.list_firstline  { border-top: 1px solid #CCE7D9; }

	/* neue Werte */
	.border_1 { border-width: 1px;}
	.border_3  { border-style: solid; border-width: 3px;}
	.border_bottom_3  {border-bottom-width: 3px; border-bottom-style: solid;} 
	.border_top_3 { border-top-width: 3px; }
	.border_bottom_1  {border-bottom-width: 1px;} 
	.border_top_1 { border-top-width: 1px; }

	.border_green  {border: 3px solid #CCE7D9;}
	.border_darkgreen { border-color: #008542; }
	.border_white { border-color: #fff; }

	.light_to_darkgreen:hover, .light_to_darkgreen:active  { border-color: #008542; color:  #008542; }
	.darkgreen_to_light:hover, .darkgreen_to_light:active  { border-color: #CCE7D9; color:  #CCE7D9; }
	.back_green .border_top_green, .back_green  .list_firstline, .back_green .list_followline 
	 {border-color: #329C67;}
	 
	 /* --- grüner button mit verlauf --- */
	 
	 a.bt_gru {
	  font-weight: bolder;
	  background-size: 100% auto;
	  box-sizing: border-box;
	  color: #FFF;
	  border-radius: 4px;
	  border: medium none;
	  box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
	  outline: medium none;
	  font-size: 1.5rem;
	  line-height: 2.125rem;
	  padding: 0.625rem 1.875rem;
	  text-decoration: none;
	  min-width: 50%;
	}
	.bt_gru, .bt_gru_cart {
	  background-image: linear-gradient(#008542, #006D29);
	}
	 
	 /* --- Ankernavigation --- */

		/* Ankernavigation */
		div#anker_closed { height: 42px; }
		div#ankernavigation.col_anker {padding-bottom: 0px; z-index: 2; /* Hauptmenü hat 3 */}

		div#anker_open ul li {list-style-type:none; padding-left: 0px !important;}

		@media screen and (max-width: 1024px) {
		div#anker_closed { height: 50px; }
		div#anker_closed label,
		span.aw84 { font-size: 120%; }
		/* div#anker_open span.aw84 { margin-left: 8px;margin-right: 6px; } */
		div#anker_closed label > span.iconfont { font-size: 150%; vertical-align: bottom;}
		div#anker_closed label > div.anker_arrow_2 span { font-size: 90%;}
		div#ankernavigation.col_anker {padding-left: 1.875rem; border-top: 1px solid #CCE7D9;}
		}
		@media screen and (min-width: 1025px) {
		div#anker_closed label,
		span.aw84 { font-size: 80%; }
		div#anker_closed label > span.iconfont {margin-right: 4px; font-size: 140%;}
		div#anker_closed label > span.iconfont.anker_arrow {margin-right: 0px; font-size: 111%;}
		div#anker_open span.iconfont {font-size: 90%;}
		div#anker_closed span.iconfont.tx120 {font-size: 27px; vertical-align: middle;}
		div#anker_open li.list_firstline, div#anker_open li.list_followline { padding-top: 0.4975rem; padding-bottom: 0.4975rem;  }
		div#anker_open li.list_followline:nth-last-of-type(1) {border-bottom: 0px;}
		div#ankernavigation.col_anker { NO_padding-top: 0.0000rem; min-height: 43px; }
		.border_hide_fullscreen { border: none;}
		div#ankernavigation{ background-color:  rgba(255, 255, 255, 0.94); }
		.hide_fullscreen {display:none;}
		}

		.aw84 {display: inline-block; width: 85%;}
		div#anker_open { max-height: 0px; -webkit-transition: max-height 0.5s; 
		-moz-transition: max-height 0.5s; transition: max-height 0.5s; box-sizing: border-box; overflow: hidden;}
		div#anker_open ul li a span.iconfont { font-size: 16px; }
		.anker_closed_text {display: none; width: 74.5%;}
		div.anker_arrow_2 span { display: block; height: 8px; width: 12px; margin: 0; padding-top: 5px; font-family: iconfont;}

		input[type="checkbox"]#chk_open_anker:checked~div div#anker_open {max-height: 600px; 
		 -webkit-transition: max-height 0.5s; -moz-transition: max-height 0.5s; transition: max-height 0.5s;}
		input[type="checkbox"]#chk_open_anker:checked~div.col_anker { border-bottom-width: 0px; }
		input[type="checkbox"]#chk_open_anker~div li { /* padding-left: 3.295rem; */}
		input[type="checkbox"]#chk_open_anker:checked~div span.anker_arrow {   
		-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg); 
		  -webkit-transition: rotate 0.5s; -moz-transition: rotate 0.5s; transition: rotate 0.5s;
		  }
		/* input[type="radio"]#rad_anker_00:checked~div span#anker_closed_00,  */
		/* input[type="radio"]#rad_anker_01:checked~div span#anker_closed_01, input[type="radio"]#rad_anker_02:checked~div span#anker_closed_02,  */
		/* input[type="radio"]#rad_anker_03:checked~div span#anker_closed_03, input[type="radio"]#rad_anker_04:checked~div span#anker_closed_04,  */
		/* input[type="radio"]#rad_anker_05:checked~div span#anker_closed_05, input[type="radio"]#rad_anker_06:checked~div span#anker_closed_06,  */
		/* input[type="radio"]#rad_anker_07:checked~div span#anker_closed_07, input[type="radio"]#rad_anker_08:checked~div span#anker_closed_08,  */
		/* input[type="radio"]#rad_anker_09:checked~div span#anker_closed_09 {display: inline-block;} */

		/* input[type="radio"]#rad_anker_01:checked~div a#anker_href_01, input[type="radio"]#rad_anker_02:checked~div a#anker_href_02, */
		/* input[type="radio"]#rad_anker_03:checked~div a#anker_href_03, input[type="radio"]#rad_anker_04:checked~div a#anker_href_04, */
		/* input[type="radio"]#rad_anker_05:checked~div a#anker_href_05, input[type="radio"]#rad_anker_06:checked~div a#anker_href_06, */
		/* input[type="radio"]#rad_anker_07:checked~div a#anker_href_07, input[type="radio"]#rad_anker_08:checked~div a#anker_href_08, */
		/* input[type="radio"]#rad_anker_09:checked~div a#anker_href_09 {color: #3B3030;} */

		@media screen and (max-width: 1024px) {
		.anker_closed_text {display: none; width: 90%;}
		.aw84 {display: inline-block; width: 88%;}
		input[type="checkbox"]#chk_open_anker~div li { padding-left: 2.4rem;}
		}
		@media screen and (max-width: 768px) {
		.anker_closed_text {display: none; width: 87%;}
		input[type="checkbox"]#chk_open_anker~div li { padding-left: 1.8rem;}
		div#ankernavigation.col_anker { padding-left: 0.925rem;}

		}
		@media screen and (max-width: 480px) {
		div#ankernavigation span.aw84 { font-size: 95%; }
		div#ankernavigation.col_anker { padding-left: 0.925rem; }
		.anker_closed_text {display: none; width: 80%;}
		div#ankernavigation .aw84 {display: inline-block; width: 82%;}
		input[type="checkbox"]#chk_open_anker~div li { padding-left: 0rem; }
		.link_space:hover { width: 0.7rem; }
		 .col4321 { width: 99.8%; }
		}

		@media screen and (max-width: 360px) { div#ankernavigation span.aw84 { width: 78%; } 
		.anker_closed_text {display: none; width: 78%;}
		}


	/* --- Ankernavigation Ende --- */
	
	/* --- Button Click Collect closebox --- */
	 a.bt_rt {
		font-weight: bolder; background-size: 100% auto;
		box-sizing: border-box; color: #FFF;
		border-radius: 4px; border: medium none;
		box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
		outline: medium none; line-height: 2.125rem;
		padding: 0.625rem 1.875rem; text-decoration: none;
		margin-left: 10px; margin-right: 10px; width: auto; display: block;
		text-align: center;
	}
	.bt_rt { background: linear-gradient(#008542, #006D29); }
	input[type="checkbox"]#check_close_box:checked~div#shop_box_grey,
	input[type="checkbox"]#check_close_box:checked~div#shop_box_grey_small {
		height: 0px; overflow: hidden; padding-top: 0; padding-bottom: 0;	 -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;
	}
	.bt_tx_close{
		font-size: 1.125rem;line-height: 1.75rem;
		cursor: pointer;font-style: normal;
		font-weight: bolder;
		}
	
	/* --- Button Click Collect closebox Ende --- */
	.show1440, .show1240, .show1024, .show900, .show768, .show600, .show360 {display:none;}
	

@media (max-width: 1440px) {
	.hide1440 {display: none;}
	.show1440 {display:block}
}

@media (max-width: 1240px) {
	.hide1440 {display: none;}
	.show1440 {display:block}
}

@media (max-width: 1024px) {
	.hide1024 {display: none;}
	.show1024 {display:block}
}

@media (max-width: 900px) {
	.hide1024 {display: none;}
	.show1024 {display:block}
}

@media (max-width: 768px) {
	.hide768 {display: none;}
	.show768 {display:block}
}

@media (max-width: 600px) {
	.hide600 {display: none;}
	.show600 {display:block}
}

@media (max-width: 360px) {
	.hide360 {display: none;}
	.show360 {display:block}
}
/* --- von at.hagebau.com Ende --- */


/* -------------------------------------------------------------------- */
/* ------------------------- standort - dropdown ---------------------- */
/* -------------------------------------------------------------------- */

label.list_firstline, label.list_followline {
cursor: pointer;
}

.acc_link {display: inline-block; text-align: left; width:84%;}
@media screen and (max-width: 1023px) {
.acc_link  {width:82%;}
}

input[name="group_chk_drop"] { display: none; }

input[name="group_chk_drop"]~div.dropDownListGrey {height: 0px; max-height: 0px; overflow:hidden}
input[name="group_chk_drop"]:checked~div.dropDownListGrey {height: auto; max-height: 1200px; overflow:hidden}

div.dropDownListGrey { transition: all 0.7s ease 0.1s; }

span.temp_pfeil_unten { display: none; }

.temp_pfeil_oben {display: none;font-family:iconfont;}
.temp_pfeil_unten {display: inline-block;font-family:iconfont;}

span.temp_pfeil_oben { display: inline-block;
-webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); transform: rotate(-180deg); 
-webkit-transition: all 0.5s ease 0.3s; -moz-transition: all 0.5s ease 0.3s; transition: all 0.5s ease 0.3s; }

input[name="group_chk_drop"]:checked~label div span.temp_pfeil_oben { 
-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); transform: rotate(0deg); 
-webkit-transition: all 0.5s ease 0.3s; -moz-transition: all 0.5s ease 0.3s; transition: all 0.5s ease 0.3s; }


div.dropDownListGrey ul li,
ul.auflistung li { list-style-type: none; 
border-bottom: #008542 1px solid; padding: 0.9375rem;}
div.dropDownListGrey ul li:nth-last-of-type(1),
ul.auflistung li:nth-last-of-type(1) { border-bottom: #fff 0px solid; }


/* --------------------- ende standort - dropdown ------------------- */

/*--------------------- start chat -------------------*/

@media screen and (max-width:1024px){
	#fc_frame{bottom:70px !important;z-index:998 !important;}
}

/*--------------------- ende chat -------------------*/


/*--------------------- start Menue -------------------*/

/* .mainMenueLvl2 a { */
  /* color: #008542; */
  /* font-weight: bold; */
  /* font-size: inherit; */
/* } */

/*--------------------- end Menue -------------------*/







/* -------------------------------------------------------------------- */
/* ------------------------------ Module ------------------------------ */
/* -------------------------------------------------------------------- */
/* - Hoverpfeil - */
/* In <a class="HoverPfeil"> Tag einen <span> mit dem Text geben damit Hoverpfeil funktioniert! */
.HoverPfeil > span::after{
	margin-left:10px;
	display:inline-block;
	transition:300ms ease-in-out;
	font-family:iconfont;
	content:'\f107';
}
.HoverPfeil:hover > span::after{margin-left:20px;}


@media screen and (max-width: 1024px) {
	.HoverPfeil{position: relative; padding-right:50px !important;}
	.HoverPfeil > span::after{
		position: absolute;
		margin:0;
		right:20px;
	}
	.HoverPfeil:hover > span::after{right:0;}
	.HoverPfeil > span{position:static;}
}
#mainLightframe{
	background-color:white;
	padding:20px;
}




/* -------------------------------------------------------------------- */
/* ---------------------------- Main Menue ---------------------------- */
/* -------------------------------------------------------------------- */
.mainMenueItemsLvl2Wrapper > li:first-of-type a {
	color: #008542;
	font-size: 1.125rem;
	font-weight: bolder;
}





/* -------------------------------------------------------------------- */
/* ------------------------------- Karte ------------------------------ */
/* -------------------------------------------------------------------- */
#map-box {z-index: 1;}

#map-box #start-btn {
	padding: 5px !important;
}

/* ------------------------------------------------------------------- */
/* ------------------------------ Anrede ----------------------------- */
/* ------------------------------------------------------------------- */
.per_du{display:inline !important;}
.per_sie{display:none;}



/* ----------------------------------------------------------------------------- */
/* ---------------------------- Kontakt Form Spalten --------------------------- */
/* ----------------------------------------------------------------------------- */
.formularColL, .formularColR {
	display: inline-block;
	vertical-align: top;
	margin-bottom: 0.9375rem;
}
.formularColL {width: 230px;}
.formularColR {width: calc(100% - 230px);}

@media (max-width: 600px) {
	.formularColL, .formularColR {width: 100%;}
	.formularColL {margin-bottom: 0;}
}



/* -------------------------------- */
/* ---------- Capcha Box ---------- */
/* -------------------------------- */
.formularCaptchaWrapper > div > aside, .formularCaptchaWrapper > div > input {
	display: inline-block;
	vertical-align: top;
}
.formularCaptchaWrapper > div > aside {width: 150px;}
.formularCaptchaWrapper > div > input {
	width: calc(100% - 150px);
	max-width: 200px;
}



/* ------------------------------------- */
/* ---------- Custom Checkbox ---------- */
/* ------------------------------------- */
.customChk {
	appearance: none;
	position: relative;
	width: 45px;
	height: 45px;
}
.customChk::before, .customChk::after {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}
.customChk::before {
	content: '';
	display: inline-block;
	border: 3px solid rgba(151, 145, 145, 0.6);
	border-radius: 4px;
}
.customChk::after {
	display: none;
	font-family: iconfont;
	content: '\f110';
	font-size: 2.4rem;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0;
	top: 0;
}
.customChk:checked::after {display: inline-flex;}


@media (max-width: 768px) {
	.customChk {
		width: 30px;
		height: 30px;
	}
}



/* --------------------------------------- */
/* ---------- Liste mit Pfeilen ---------- */
/* --------------------------------------- */
ul.listArrow {
	list-style: none;
	padding-left: 0;
}
ul.listArrow > li {
	padding-left: 20px;
	position: relative;
}
ul.listArrow > li::before {
	content: '\f107';
	font-family: iconfont;
	color: #008542;
	position: absolute;
	left: 0;
}



/* ------------------------------------ */
/* ---------- Link mit Pfeil ---------- */
/* ------------------------------------ */
.linkArrowBefore {
	padding-left: 40px;
	position: relative;
}
.linkArrowBefore::before {
	content: '\f107';
	font-family: iconfont;
	transform: rotate(180deg);
	position: absolute;
	left: 8px;
	top: -2px;
	transition: left 300ms;
}
.linkArrowBefore:hover::before {left: 0;}


.linkArrowAfter {
	padding-right: 40px;
	position: relative;
}
.linkArrowAfter::after {
	content: '\f107';
	font-family: iconfont;
	position: absolute;
	right: 8px;
	top: -2px;
	transition: right 300ms;
}
.linkArrowAfter:hover::after {right: 0;}


@media (max-width: 1024px) {
	.linkArrowBefore::before {top: -1px;}
	.linkArrowAfter::after {top: -1px;}
}








/* ---------------------------------------- */
/* ---------- Anker wegen Header ---------- */
/* ---------------------------------------- */
.ankerWegenHeader {
	position: relative;
	top: -91px;
}




/* ------------------------------------ */
/* ---------- Öffnungszeiten ---------- */
/* ------------------------------------ */
.oeffnungszeitenDate {
	display: inline-block;
	width: 90px;
}



/* ----------------------------------------- */
/* ---------- GallerySliderSlider ---------- */
/* ----------------------------------------- */
#contentAusgabeGalerieFrame #GalleryHeadline {
	display: none;
}

#contentAusgabeGalerieFrame #GallerySliderWrapper, #startseiteGalerieFrame #GallerySliderWrapper {
	width: 66.66%;
}

@media (max-width: 768px) {
	#contentAusgabeGalerieFrame #GallerySliderWrapper, #startseiteGalerieFrame #GallerySliderWrapper {
		width: 100%;
	}
}



/* --------------------------- */
/* ---------- Table ---------- */
/* --------------------------- */
table {
	border-collapse: collapse;
}



/* ---------------------------------------------------------- */
/* ---------- Kontakt Formular Custom Radio Select ---------- */
/* ---------------------------------------------------------- */
.contact_select{
	display:inline-block;
	width:100%;
	height:45px;
	position:relative;
	background-image:linear-gradient(to top, rgba(216, 216, 215, 0.6) 0%, transparent 100%);
	background-color:#f4f3f3;
	border-radius:3px;
}
.contact_select > * {
	font-weight: bolder;
	font-size: 1.5rem;
	line-height: 2.125rem;
}
#contact_SelectLabelOpen {width:100%; padding:5px 20px; display: block;}
.contact_select > #contact_dropdown {
	position:absolute;
	display:inline-block;
	width: 100%;
	top: 100%;
	background-color: #f4f3f3;
	box-shadow: 3px 3px 2px 2px rgba(59, 48, 48, 0.07);
	border-radius: 3px;
	left:0;
	padding-left:20px;
	display: none;
	z-index: 1;
}
.contact_select > #contact_dropdown > div > label{
	display:block;
	height:37px;
	padding:1.6px 1.6px 1.6px 8px;
}
.contact_select > #contact_dropdown > div > label:hover {
  color: #008542;
}
.contact_select input[type="radio"] {display:none;}

#contactChkSelectOpen {display: none;}
#contactChkSelectOpen:checked ~ form #contact_dropdown {
	display: block;
}

.contact_select::after{
	content:"\f100";
	position:absolute;
	font-family:'iconfont';
	right:20px;
	top:50%;
	transform:translateY(-50%);
	color:#008542;
	transition:300ms;
	pointer-events:none;
}
#contactChkSelectOpen:checked ~ form .contact_select::after
{transform:rotate(180deg) translateY(50%);}




/* ----------------------------------- */
/* ---------- iframeGalerie ---------- */
/* ----------------------------------- */
.iframeGalerie {
	border: none;
	width: 100%;
	height: 600px;
}



@media (max-width: 1440px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {}
@media (max-width: 600px) {}
@media (max-width: 360px) {}


/* ----------------------------------------------------------------------------- */
/* ------------------------------ Barrierefreiheit ----------------------------- */
/* ----------------------------------------------------------------------------- */

#accessability:checked ~ #main .buttonGreen, 
#accessability:checked ~ #main .buttonRed {
	 background-image: none !important;
	 box-shadow: none;
	 border-style: solid;
	 border-width: 1px;
}

#accessability:checked ~ footer * {
	color: #000000 !important;
    background-color: #ffffff!important;
	border-color: #000000;
}

#accessability:checked ~ #main #mainMenueItems li:hover,
#accessability:checked ~ #headerMainMenue #mainMenueWrapper #mainMenue #mainMenueItems > input:checked + li,
#accessability:checked ~ #main input:not([type="checkbox"], [type="radio"], [type="file"], [type="submit"], [type="button"]):focus, textarea:focus, select:focus {
	border-color: #000000 !important;
}

#accessability:checked ~ #main .searchButton,
#accessability:checked ~ #main #lblViewWarenkorb,
#accessability:checked ~ #main #lblViewLastSeen,
#accessability:checked ~ #main #sortimentTree ul a::before,
/*#accessability:checked ~ #main .shopSucheButton,
#accessability:checked ~ #main .merklisteAdd,
#accessability:checked ~ #main .merklisteRemove,
#accessability:checked ~ #main .noLoading,*/
#accessability:checked ~ #main #lblSortimentSeitenreiterOpen,
#accessability:checked ~ #main #lblSortimentSeitenreiterClose {
	filter: invert(1) contrast(1) grayscale(1);
}

#accessability:checked ~ #main .datenbankenBeitragLink::after,
#accessability:checked ~ #main .shopStartKategorieLink::after,
#accessability:checked ~ #main #sortimentTree ul a::before,
#accessability:checked ~ #main .DatenUndFaktenLabel::before,
#accessability:checked ~ #main .baustoffeFirmenAusgabe_L::before {
	color:#000000 !important;
}



/* ----------------------------------- */
/* ---------- accessability ---------- */
/* ----------------------------------- */
#accessability:checked ~ #main .buttonGreen,
#accessability:checked ~ #main .buttonRed,
#accessability:checked ~ #main button,
#accessability:checked ~ #main input[type="button"],
#accessability:checked ~ #main input[type="submit"] {
  background-image: none !important;
  box-shadow: none;
  border-style: solid;
  border-width: 1px;
}

#jubaAccessabilityChk:checked ~ #main .buttonGreen,
#jubaAccessabilityChk:checked ~ #main .buttonRed,
#jubaAccessabilityChk:checked ~ #main button,
#jubaAccessabilityChk:checked ~ #main input[type="button"],
#jubaAccessabilityChk:checked ~ #main input[type="submit"] {
  background-image: none !important;
  box-shadow: none;
  border-style: solid;
  border-width: 1px;
}