@charset "utf-8";

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


html, body {
	margin:0;
	padding:0;
	text-align:center;
	color: #333333; background: #FFFFFF;
	font-family: 'PT Sans', sans-serif;
	height: 101%;
	font-size: 16px; line-height: 150%;
}


div, img, area, textarea, input {
	outline: none;
}
H1, H2 {font-weight: normal; margin: 0; padding: 0; line-height: 120%;}
H1 { background: url('images/strich.png') no-repeat left bottom;  padding-bottom: 25px; margin-bottom: 25px; color: #00476B;}
H2 { background: url('images/strich2.png') no-repeat left bottom;  padding-bottom: 15px; margin-bottom: 25px; color: #00476B;}

A {	color: #346FB5; text-decoration: none;}
A:hover {	color: #000000;}

UL, LI{ padding: 0; margin: 0}
UL LI {margin-left: 15px;}

input[type='text'], textarea { margin: 0;  margin-bottom: 5px; width: 98%; padding: 5px 1%;}

.blau {color: #00476B; }
.grau { color: #D9DADA}
.backgrau{background: #D9DADA;}

.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}

.pagewidth {
	width:  100%; text-align:left; margin-left:auto; margin-right:auto; display: block; position: relative;}


#logo { position: relative;width: 100%; text-align:center; margin: 5px 0; }
#logo IMG { width: 96%; max-width: 250px;}
#headertext {color: #777777; text-align: center;}
#flaggen IMG {padding: 5px; width: 40px;}


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

#but_menue {width: 50px; padding: 10px; margin-left: auto; margin-right: auto; cursor: pointer;}
#but_menue IMG {width: 100%; height: auto;}


NAV {  text-align: center; display: none; padding: 5px;}
NAV UL, NAV LI {	
	margin: 0; 
	padding: 0; 
	list-style-type: none;
}

NAV UL LI A {font-size: 20px; text-transform:uppercase; display: block; padding: 10px 0 ; margin: 5px 0; color: #CCCCCC; background: #346FB5}

NAV LI A:hover,   NAV LI A.aktiv {color: #FFFFFF}

NAV li ul  {display: none;}
NAV li li a {font-size: 15px; display: block; background: #548FD5}
NAV li li a.aktiv{ color: #FFFFFF }	
	

.einspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.einspalter .spalte1 {width: 100%; display: block;}

.zweispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.zweispalter .spalte1 {width: 100%; display: block;}
.zweispalter .spalte2 {width: 100%; display: block;}
.zweispalter .spalte1gross {width: 100%; display: block;}
.zweispalter .spalte2klein {width: 100%; display: block;}
.zweispalter .spalte1klein {width: 100%; display: block;}
.zweispalter .spalte2gross {width: 100%; display: block;}

.dreispalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.dreispalter .spalte1 {width: 100%; display: block;}
.dreispalter .spalte2 {width: 100%; display: block;}
.dreispalter .spalte3 {width: 100%; display: block;}

.vierspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.vierspalter .spalte1 {width: 100%; display: block;}
.vierspalter .spalte2 {width: 100%; display: block;}
.vierspalter .spalte3 {width: 100%; display: block;}
.vierspalter .spalte4 {width: 100%; display: block;}

.fuenfspalter {width: 96%; margin: 0 2%; padding: 0; position:relative; display: block;}
.fuenfspalter .spalte1 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte2 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte3 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte4 {width: 50%; display: block; float: left;}
.fuenfspalter .spalte5 {width: 50%; display: block; float: left;}

.galerie1 {  display: flex; -ms-flexbox: flex; flex-wrap: wrap;  -ms-flexwrap: wrap; justify-content: space-between}
.galerie1 .galeriespalte { position: relative; cursor: pointer; transform: scale(1); transition-property: transform; transition-duration: 1s}
.galerie1 .galeriespalte:hover {transform: scale(1.1); }


footer {display: block; background: #346FB5; color: #FFFFFF; padding: 25px 0 }
footer A {color: #FFFFFF;}


.scrollTop{ display: none; bottom:15px; right: 15px; color:#fff; cursor:pointer; outline:0;  position:fixed; margin-left: 70px; z-index:1000; text-align:center; }
.scrollTop IMG { transition: 0.8s;}
.scrollTop:hover IMG { width: 60px; margin-right: -10px; margin-top: -10px;}

#produktuebersicht {font-size: 120%;}


#icons {position: fixed; right: 0; top: 200px; z-index: 10000}
#icons IMG { width: 50px; height: auto; }


/* #########################################################################################  */
		
		
.clearfix {
	display: block;
	clear: both;
}




/* Tabletts */
@media only screen and (min-width: 660px) {

	.pagewidth { max-width: 660px; }
		

		
	
		#but_menue {display: none;}

		header {line-height: 100%; }
		NAV {display: block; margin: 25px 0 0 0; padding: 0;}
		nav ul{ list-style-type:none; margin:0; padding:0; display: inline-block}
		nav li { float:left; padding:0; margin:0; }
		NAV UL LI A { display:block; text-align:center;  text-decoration:none;  font-size: 18px; padding: 0 15px 0px 15px ; color: #999999; background: none; line-height:100%;}
		NAV UL LI A:hover, NAV UL LI A.aktiv {color: #346FB5}
		
		nav ul ul {  position:absolute; z-index:999; overflow:hidden; border-top: none; background: #D9DADA; padding: 0px 0;  padding-top:5px; margin-left: 15px;}
		nav UL li li { clear: both;  display: block; text-align: left; padding: 0; margin: 0; color: #FFFFFF; width: 100%;}
		NAV UL LI LI A { text-align:left; font-size: 15px;  padding: 5px 10px 5px 10px; margin: 5px 0; color: #666666}
		NAV UL LI LI:hover {background: #346FB5;}
		NAV UL LI LI:hover A {color: #FFFFFF;}
				
		.einspalter {display: block; position: relative;}
		.einspalter .spalte1 {}
		
		.zweispalter {display: block; position: relative;}
		.zweispalter .spalte1 {width:48%; margin-right: 2%; float: left; display:inline;}
		.zweispalter .spalte2 {width:48%; margin-left: 2%; float: left; display:inline;}			

		.dreispalter {display: block; position: relative;}
		.dreispalter .spalte1 {width:30.6%; margin-right: 2%; float: left; display:inline;}
		.dreispalter .spalte2 {width:30.6%; margin-left: 2%;margin-right: 2%; float: left; display:inline;}
		.dreispalter .spalte3 {width:30.6%; margin-left: 2%; float: left; display:inline;}	

		.vierspalter {display: block; position: relative;}
		.vierspalter .spalte1 {width: 48%; margin-right: 2%; float: left; display:inline;}
		.vierspalter .spalte2 {width: 48%; margin-left: 2%;float: left; display:inline;}
		.vierspalter .spalte3 {width: 48%; margin-right: 2% ;float: left; display:inline; clear: both;}
		.vierspalter .spalte4 {width: 48%; margin-left: 2%;float: left; display:inline;}

		.fuenfspalter {display: block; position: relative;}
		.fuenfspalter .spalte1 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte2 {width: 34%; display: block; float: left;}
		.fuenfspalter .spalte3 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte4 {width: 33%; display: block; float: left;}
		.fuenfspalter .spalte5 {width: 34%; display: block; float: left;}
		
		footer {font-size: 14px;}
		footer .spalte2 {text-align: center;}
		footer .spalte3 {text-align: right;}
		
		.galerie1 .galeriespalte {  width: 33%;}
	
}

/* Mittlere Gr��e */
@media only screen and (min-width: 960px)  {

	.pagewidth { max-width: 960px; }
	
		html, body {font-size: 18px;}	

	#logo {width: 25%; float: left; margin: 10px 0;}	
	#menueheader {width: 75%; float: left; text-align: right;}
	#headertext {font-size: 20px; padding-top: 15px; text-align: right;}
	#flaggen {width: 100px; float: right;}
	#flaggen IMG { width: 30px; padding: 0px;}

	NAV {text-align: right; margin-right: -20px; margin-top: 50px;}
	NAV UL LI A {font-size: 22px; padding: 10px 20px; margin: 5px 0 0 0 ; }
	NAV UL LI LI A { font-size: 17px; }
	
	.zweispalter .spalte1gross {width:68%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2klein {width:28%; margin-left: 2%; float: left; display:inline;}		
	.zweispalter .spalte1klein{width:28%; margin-right: 2%; float: left; display:inline;}
	.zweispalter .spalte2gross {width:64%; margin-left: 2%; float: left; display:inline;}	

		.vierspalter {display: block; position: relative;}
		.vierspalter .spalte1 {width: 23%; margin-right: 2%; float: left; display:inline;}
		.vierspalter .spalte2 {width: 23%; margin-left: 1%; margin-right: 1%;float: left; display:inline;}
		.vierspalter .spalte3 {width: 23%;  margin-left: 1%; margin-right: 1%;display:inline; clear: inherit;}
		.vierspalter .spalte4 {width: 23%; margin-left: 2%;float: left; display:inline;}
		
		
		.fuenfspalter .spalte1 {width: 20%; display: block; float: left;}
		.fuenfspalter .spalte2 {width: 20%; display: block; float: left;}
		.fuenfspalter .spalte3 {width: 20%; display: block; float: left;}
		.fuenfspalter .spalte4 {width: 20%; display: block; float: left;}
		.fuenfspalter .spalte5 {width: 20%; display: block; float: left;}	
	
		
	#teaser {display: block;}

	footer {font-size: 16px;}
		
		.galerie1 .galeriespalte {  width: 25%;}

	
}

/* Gro�e Monitore */
@media only screen and (min-width: 1280px)  {

	.pagewidth { max-width: 1280px; }
	
		html, body {font-size: 20px;}		
	

	NAV {margin-right: -20px; margin-top: 57px;}
	NAV UL LI A {font-size: 22px; padding: 10px 30px; margin: 5px 0; }
	NAV UL LI LI A { font-size: 19px; }
	
	.galerie1 .galeriespalte {  width: 16.5%;}
	
	footer {font-size: 18px;}
	
}