/* CSS Document */

/* dosis-regular - latin */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/dosis-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Dosis Regular'), local('Dosis-Regular'),
       url('../fonts/dosis-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/dosis-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/dosis-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/dosis-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/dosis-v7-latin-regular.svg#Dosis') format('svg'); /* Legacy iOS */
}

/* courgette-regular - latin */
@font-face {
  font-family: 'Courgette';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/courgette-v5-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Courgette Regular'), local('Courgette-Regular'),
       url('../fonts/courgette-v5-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/courgette-v5-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/courgette-v5-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/courgette-v5-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/courgette-v5-latin-regular.svg#Courgette') format('svg'); /* Legacy iOS */
}

/* kalam-regular - latin */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kalam-v8-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Kalam'), local('Kalam-Regular'),
       url('../fonts/kalam-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kalam-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kalam-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kalam-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kalam-v8-latin-regular.svg#Kalam') format('svg'); /* Legacy iOS */
}


/*Menü bleibt oben hängen*/
.fixed  {position: fixed; top:0;}

body {
background: url(../images/background_wiese.jpg) no-repeat center center fixed;
background-color: rgba(56, 72, 63, 0.07);
background-size:cover;
-moz-background-size: cover;
}

header {
	margin-top: 30px;
	max-width:100%;
	font-size: 1.3em;
	font-family: arial;
	font-weight: bolder;
	text-align: center;
	padding-top:0.3em;
	border: 1px;
	border-style: solid;
	/*Hintergrund des Firmenkopfes mit Farbverlauf*/

background: rgb(255,255,255); /* Alte Browser */
	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(50%, rgba(237,237,237,1)), color-stop(100%, rgba(255,255,255,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,1) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(237,237,237,1) 50%, rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); /* IE6-9 */
}
/*Textschattierung der FR bi-foam...*/

header p {
	text-shadow: 8px 6px 15px #666666;
}

/*bi-foam wird grün und bekommt andere Größe*/

header span {
	color: rgb(51,150,51);/*	font-size:1.2em;*/
}

/*linkes bi-foam Logo im Kopf*/

img.logo1 {
	margin-left: 2em;
	float: left;
}

/*rechtes bi-foam Logo im Kopf*/

img.logo2 {
	margin-right: 2em;
	float: right;
}

/*Kopf ist beendet*/


/*********************************************************/
/* ******************  HAUPTINHALT ************************/
/********************************************************/

/*Wie sehen Links aus*/

a:link a:visited {
	text-decoration:none;
}
a:hover {
	font-weight: bold; 
}

/*Wie sehen Überschriften aus*/

h2 {
font-family: 'Dosis';
margin-top:1.2em;
/*font-family: dosis;*/
font-size:2.0em;
font-weight: bold;
color: rgb(63,63,63);	
	}

h3 {
margin-top:1.5em;
margin-bottom:1.5em;
font-family:Arial, Helvetica, sans-serif;
font-size:1.3em;
font-weight: bold;
color: rgb(51,150,51);	
	}

h4 {
margin-top:1.5em;
margin-bottom:1em;
font-family:Arial, Helvetica, sans-serif;
font-size:1.3em;
font-weight: bold;
color: rgb(121,121,121);	
	}
	
h5 {
margin-top:1em;
margin-bottom:-0.5em;
margin-left:1.2em;
font-family:Arial, Helvetica, sans-serif;
font-size:1.1em;
font-weight: bold;
color: rgb(51,150,51);	
	}
	
h6 {
margin-top:1em;
margin-bottom: -0.4em;
margin-left:3.0em;
font-family:Arial, Helvetica, sans-serif;
font-size:1.0em;
font-weight: bold;
text-decoration: underline;
color: rgb(51,150,51);	
	}


/*********************/
/* Anordnung von Bildern */
.bild_links {
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	padding: 5px;
	border:1px;
	border-color:black;
	border-style: inset;
	border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

.bild_links_v2 {
	float:left;
	margin-right:15px;
	margin-bottom:15px;
	padding: 0px;
	border:1px;
	border-color:black;
	border-style: solid;
	border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
}

.bild_rechts {
	float:right;
	margin-left:15px;
	margin-bottom:15px;
	border:0px;
	padding: 5px;
	border:1px;
	border-color:black;
	border-style: inset;
}

.bild_oben {
	margin-right:15px;
	margin-bottom:15px;
	padding: 5px;
	border:1px;
	border-color:black;
	border-style: inset;
	border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

/* Ende Anordnung von Bildern */
/******************************/

/* farbiger Hintergrund mit abgerundeten Ecken Anfang*/

.gruener_hintergrund {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#EBF3EC;
	margin-top: 30px;
	margin-bottom:30px;
	padding-left:30px;
	padding-right:5px;
	padding-top:5px;
	padding-bottom:20px;
	border-color: #666;
	border-width:thin;
	border-style:solid;
}

.roter_hintergrund {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#FBEEE3; 
	margin-top: 30px; 
	margin-bottom:30px; 
	padding-left:30px; 
	padding-right:5px; 
	padding-top:5px; 
	padding-bottom:20px;
	border-color: #666;
	border-width:thin;
	border-style:solid;
}

.grauer_hintergrund {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color:#EAEAEA;
	margin-top: 5px;
	margin-bottom:30px;
	padding-left:30px;
	padding-right:30px;
	padding-top:20px;
	padding-bottom:20px;
	border-color: #666;
	border-width:thin;
	border-style:solid;
}

/* farbiger Hintergrund mit abgerundeten Ecken Ende*/


/*Inhalte der Seite  als Blocksatz darstellen*/
.blocksatz {text-align: justify;}

/*BI-FOAM  grüner Slogan*/
.grün {color:#339633; font-weight: bold;}

/*Aufzählungspunkte grüne Haken*/
.aufz_haken {
list-style: url(../images/checkmark.png);	
	}
.aufz_haken_oh {list-style: none;}	
	
.tab_spalte_rechts {text-align:right; padding-right:10px;}
	
/*----------------------------------------------------------------------------------------*/
/* Hauptdatencontainer, wo alles untergebracht ist                        */
/* unterhalb von 960px wird die Breite als 100% eingestuft           */
/*----------------------------------------------------------------------------------------*/


.container {
	max-width: 960px;
	margin:0 auto;
}

/*Hintergrundfarbe waagerechte Hauptnavigation*/
/*Startseite ... Anlagenbau*/

.nav-bgr {
background:rgb(51, 150, 51);
	}

/*Klassenfestlegung für die Unterdrückung des Ausdrucks auf einen Drucker*/
/*Was diese Klasse erhält, wird nicht gedruckt*/

.printOnly {display:none;}

/*Linkes Menü - gesamter Bereich inklusive Links*/

#li_menue  a {
text-decoration:none;	
color: rgb(51,150,51);
font-family:Tahoma, Geneva, sans-serif;
font-size:0.85em;
	}

#li_menue  a:hover {
font-size:0.8em;
font-weight:bold;
	}

#li_menue  ul {
list-style:none;	
margin-left: 0;
padding-left:2em;
}

/*************************************************/
/* Absatzformatierungen der einzelnen Seiten, Hauptinhalte*/
/*************************************************/

/*Unterseite: produkte2.html*/

.produkte2_new-section1_desktop {
padding-top:15px;	
padding-right:40px;
padding-bottom:25px;
text-align:justify;
}

.produkte2_new-section1_desktop_überschrift {
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
font-weight: bold;
text-decoration:underline;
color: rgb(51,150,51);	
	}

/*Unterseite: produkte3.html*/

.produkte3_new-section1_desktop {
padding-top:15px;	
padding-right:35px;
padding-bottom:25px;
text-align:justify;
}

/*Unterseite: kontakt.html*/
.kontakt_td_ausr {text-align:left; padding-left:10px; padding-right:10px; }
.kontakt_table1_desktop {padding-top:0px;  padding-bottom:25px;}
.kontakt_bild_rechts {
	float:right;
	margin-right: 80px;
	margin-bottom:15px;
	border:0px;
	padding: 5px;
	border:1px;
	border-color:black;
	border-style: inset;
}

/*Unterseite: kontakt_for.html*/
.kontakt_for_nachricht {margin-left:85px;}
textarea {background-color: rgb(228,241,231); border:1px solid #505050; padding-top:5px; padding-left:5px;}

/*Unterseite: vertrieb1.html*/

.vertrieb1_new-section1_desktop {
padding-right:35px;
text-align:justify;
}

/*Unterseite info_sta.html*/

#karte {width: 640px; height: 400px;}

/*Unterseite preise2.html*/

.preise_tabelle td, th {
line-height: 2em;
padding-left: 10px;	
border-style: solid;	
border-color: #4E4E4E;
font-size:1.1em;
text-align:center;
	}

.preise_tabelle td.einzel1 {
background-color: #E2F5E2;	
}

.preise_tabelle td.einzel2 {
background-color: #FFF2E6;	
font-size: 0.9em;
text-align:left;
}


/*************************************************/
/* Ende der                                                                                            */
/* Absatzformatierungen der einzelnen Seiten, Hauptinhalte*/
/*************************************************/


/***********************/
/* link, linker Bereich, aktiv  */
/***********************/
.link_back_color {
	color: rgb(0,0,0);
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: rgb(51,150,51);
	border-bottom-color: rgb(51,150,51);
	}


/***********************/

/*Linker Bereich der Seite mit Mindesthöhe*/

.rahmen_links {
	min-height:900px;
	background: rgb(255,255,255);
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: rgb(0,0,0);
	background-image:url(../images/back_links.gif);
	background-repeat:repeat;
	background-size:100%;
	opacity:0.94;
	}

/*Rechter Bereich der Seite mit Mindesthöhe*/

.rahmen_rechts {
	min-height:900px;
	background: rgb(255,255,255);	
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: rgb(0,0,0);
	font-family:Tahoma, Geneva, sans-serif;
	font-size:0.8em;
	opacity:0.94;
	}

.rahmen_rechts a:link, a:visited {text-decoration:none; color:#339633; border-bottom:thin; border-bottom-style:dotted; border-color:#339633;} a:hover {font-weight:normal; color:#FF8550;}

/*Fussbereich der Seite */

.rahmen_footer {
	background: rgb(96,96,96);
	border-right-color: rgb(0,0,0);
	border-right-width: thin;
	border-right-style: solid;
	border-left-color: rgb(0,0,0);
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: rgb(0,0,0);
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: rgb(0,0,0);
	padding-top:2em;
	padding-bottom:2em;
	padding-right:2em;
	margin-bottom:50px;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:0.7em;
	color: rgb(255,255,255);
	text-align: right;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	}

.rahmen_footer_links {
text-align:left;
margin-left:3em;	
	}

/*Links im Fussbereich*/

.rahmen_footer a {
	text-decoration:none;
	color:#FFFFFF;
	font-weight: bold;
}

/*Impressum, Mindesthöhe, wo Schrift reinkommt*/

.impress {
line-height: 20px;	
	}

/*Optimierung der Seiten für den Druck */
@media print {
		#li_menue, nav {display:none;}
		header p {font-size:0.8em;}
		img.logo1 {width:110px; height:39px; margin-left:1em;}
		img.logo2 {width:110px; height:39px; margin-right:1em;}
		h1, h2, h3, h4 {page-break-after:avoid;}
		.printOnly {display:block; font-size:0.7em; font-weight:normal;}
		.pagebreak_print {page-break-after: always;}
		.print_none {display: none;}
}

/*bei einer Anzeigebreite unterhalb von 950px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/
@media screen and (max-width:950px) {
article, aside, section {
	width:100%;
}
header {
	font-size:1.2em;
}
/*
img {
	width:140px;
	height:50px;
}
*/
}

/*bei einer Anzeigebreite unterhalb von 830px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/
/* Umrechnung von em nach px = 16 */
 @media screen and (max-width:51.87em) {

article, aside {
	width:100%;
}
header {
	font-size:1.1em;
}
/*
img {
	width:140px;
	height:50px;
}
*/
}

/*bei einer Anzeigebreite unterhalb von 768px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/

/* ---------------------------------------------------------------------------------------------*/
/*                                       iPAD Format  hochkant                                           */
/* ---------------------------------------------------------------------------------------------*/

 @media screen and (max-width:48.75em) {
	 
article, aside {width:100%;}
header {	font-size:1em;}
img {	width:140px; height:50px;}
img.logo3 {width:12px; height:12px;}
img.logo4 {width:200px; height:150px;}
}

/* ---------------------------------------------------------------------------------------------*/
/*                                     ENDE      iPAD Format   hochkant                           */
/* ---------------------------------------------------------------------------------------------*/


/*bei einer Anzeigebreite unterhalb von 660px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/
 @media screen and (max-width:45em) {
article, aside {
	width:100%;
}
header {
	font-size:0.9em;
}

img {
	width:100px;
	height:36px;
}

}

/*bei einer Anzeigebreite unterhalb von 660px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!
Galaxy S6 hochkant*/
 @media screen and (max-width:45em) and (orientation: portrait) {

article, aside {
	width:100%;
}
header {
	font-size:0.9em;
}

img {
	width:100px;
	height:36px;
}

.logo1 {display:none;}
.logo2 {display:none;}
.logo_galaxy_portrait {float:none;}

#li_menue {display:none;}

}

/*bei einer Anzeigebreite unterhalb von 950px wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/
@media screen and (max-width:20em) {
article, aside {
	width:100%;
}
header {
	font-size:0.8em;
}

img {
	width:100px;
	height:36px;
}

}

/*bei einer Anzeigebreite unterhalb von 950px  und hochkant wird article und aside mit 100% angesehen, daraus folgt Darstellung untereinander!!*/
@media screen and (max-width:20em) and (orientation:portrait) {

article {
	width:100%;
	text-align:left;
}
aside {
	display:none;
}
header {
	font-size:0.9em;
}

img {
/*	display:none;*/
}

h2 {font-size:16px;}
h3, h4 {font-size:14px;}
p.blocksatz {text-align:left;}

}

* {
	webkit-box-sizing:border-box;
	moz-box-sizing:border-box;
	box-sizing:border-box;
}

img {
	max-width:100%;
	height:auto;
}

.row {
	width:100%;
	float:left;
}

.columns {
	float:left;
	padding-left:1em;
	padding-right:1em;
}

.columns_2 {
	float:left;
	padding-right:1em;
}

.fl_r {
	float:right;
}

.fl_l {
	float:left;
}


/*--------------------------------------------------------*/
/* zweispaltiges Raster für kleines Layout                */
/*--------------------------------------------------------*/

@media screen and (max-width:600px) {

/*.site-nav {
background:rgb(51, 150, 51);
	}
*/	

			.small-1 {
					width:50%;
			}
			.small-2 {
					width:100%;
			}
				
			.site-nav a {
					padding:0.6em;
					display:block;
					background:#339633;
					margin-bottom:1px;	
					color: white;
					text-decoration:none;
					font-weight:normal;
				}	
				
			.site-nav a:active, 
			.site-nav a:hover {
					outline:0;
					background:#444;
			}
}

@media screen and (max-width:600px)  {

/*nav slider*/

a.nav-show,
a.nav-hide {
	float: right;
	width:150px;
	background-color:#2D842D;
	font-weight: normal;
	text-align: center;
	border-left-width: thin;
	border-left-style: solid;
	border-left-color: rgb(255,255,255);
}
a.nav-hide {display:none;}

.nav-slider {display:none;}

#nav-open:target .nav-slider,
#nav-open:target a.nav-hide {display:block;}


#nav-open:target a.nav-show {display:none;}

}

/*--------------------------------------------------------*/
/*zwölfspaltiges Raster für großes Layout*/
/*--------------------------------------------------------*/

@media screen and (min-width:600px) {
		
			.large-1 {
					width:8.333333%;
			}
			.large-2 {
					width:16.666666%;
			}
			.large-3 {
					width:25%;
			}
			.large-4 {
					width:33.333333%;
			}
			.large-5 {
					width:41.666666%;
			}
			.large-6 {
					width:50%;
			}
			.large-7 {
					width:58.333333%;
			}
			.large-8 {
					width:66.666666%;
			}
			.large-9 {
					width:75%;
			}
			.large-10 {
					width:83.333333%;
			}
			.large-11 {
					width:91.666666%;
			}
			.large-12 {
					width:100%;
			}
			
			.site-nav {background-color:rgb(51, 150, 51); }

/*----------------------------------------------------------------------*/
/* MENÜ-AUSWAHLFLÄCHEN BREITE, HÖHE, ETC                                */
/*----------------------------------------------------------------------*/
			
			.site-nav a {
	float:left;
	padding-top:0.8em;
	padding-bottom:0.8em;
	padding-left:0.6em;
	padding-right:0.5em;
	background:rgb(51, 150, 51);
	/*	margin-bottom:1px;*/
					color: white;
	text-decoration:none;
	font-weight:bold;
	font-size:0.8em;
	border-top-color: white;
	border-right-color: white;
	border-bottom-color: white;
	border-left-color: white;
				}
			
			.site-nav a:hover {
	outline:0;
	background:#444;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
			}
			
			a.nav-show,
			a.nav-hide {display:none;}
		
}

.site-nav ul {
margin:0;
list-style:none;
padding:0;	
	}

img.zoom {
 transition: transform 0.8s;
 -moz-transition: transform 0.8s;
 -webkit-transition: transform 0.8s;
 -o-transition: transform 0.8s;
 -ms-transition: transform 0.8s;
}

img.zoom:hover {
 cursor: zoom-in;
 cursor: -moz-zoom-in;
 cursor: -webkit-zoom-in;
 transform: scale(4.0, 4.0);
 -moz-transform: scale(4.0, 4.0);
 -webkit-transform: scale(4.0, 4.0);
 -o-transform: scale(4.0, 4.0);
 -ms-transform: scale(4.0, 4.0);
}