@charset "utf-8";
/* CSS Document */
/*Standard, darf nicht verändert werden*/

.Map{
	max-height: 400px;
	margin:10px auto;
	/*width:60%;*/
}
.Map iframe{
	max-height: 400px;
	width:100%;
}
#FullFrameDynamicBlender .Map{
	width:60%;
}
#Marke{
	position: absolute;
	right:30px;
	z-index: 10000;
}
#Marke img{
	width:auto;
	height:120px;
}
#DSGVO{
	position:fixed;
	right:0px;
	bottom:0px;
	padding:20px;
	background-color:#fff;
	width:300px;
	z-index:90000;
	box-shadow:-3px -3px 10px #888888;
	cursor:pointer;
}
.hide{display:none;}
@font-face { font-family: 'FjallaOne-Regular'; src: url('FjallaOne-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Roboto-Light'; src: url('Roboto-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto-Bold'; src: url('Roboto-Bold.ttf') format('truetype'); }
@font-face { font-family: 'RockSalt'; src: url('RockSalt.ttf') format('truetype'); }
@font-face { font-family: 'RobotoCondensed-Regular'; src: url('RobotoCondensed-Regular.ttf') format('truetype'); }
*, *:after, *:before {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
body{
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	margin:0px;
	padding:0px;
    font: 18px 'Roboto-Light', sans-serif;
	width:100%;
	min-width:799px;
}
a {
    color: #666;
}
/*Font Size--------------------------------------*/
#Inhalt h1, h1,h2,h3,#Adresse{
	font-family:'FjallaOne-Regular', sans-serif;
	font-weight: lighter;
}
#Inhalt h1, h1{
	font-size:50px;	
}
#Inhalt h2,h2,.BTN-Scroll{
	font-size: 28px;
}
#Inhalt p, #BannerSlider p,h3{
	font-size: 20px;
}
#Adresse,input,#FullFrameDynamicBlender{font-size: 18px;}
#copyright,.Dok{font-size: 16px;}
/*Font Spez--------------------------------------*/
.BannerBoxInhalt p{letter-spacing:0.05em;}
h1,h2,h3{line-height: 1.25em;}
#Adresse,h1,h2,h3{font-variant:small-caps;}
/*Color--------------------------------------*/
#BildNummerierung,#BildTitel, .BTNDropDown, .BTNMore{
	color:#fff;
}
#FullFrameDynamicBlender{
	background-color: #000;
	color:#9F9F9F;
}

.BTNPfeil{
	background-image: url(../grafik/icon/BTNPfeil.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	padding-left:40px;
}
.BTNPfeil:hover{
	background-image: url(../grafik/icon/BTNPfeil-hover.png);
}
.BTNPfeil1{
	background-image: url(../grafik/icon/BTNPfeil1.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	padding-left:40px;
}
.BTNPfeil1:hover{
	background-image: url(../grafik/icon/BTNPfeil1-hover.png);
}
.BTNPfeil2{
	background-image: url(../grafik/icon/BTNPfeil2.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	padding-left:40px;
}
.BTNPfeil2:hover{
	background-image: url(../grafik/icon/BTNPfeil2-hover.png);
}
.BTNPunkt{
	background-image: url(../grafik/icon/BTNPunkt.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
	padding-left:40px;
}
.BTNPunkt:hover{
	background-image: url(../grafik/icon/BTNPunkt-hover.png);
}

h2{margin:0px;}
h3{margin:0px;}
#Adresse{
	text-align:center;
	letter-spacing:0.1em;
}

#Rahmen{
	position:relative;
	opacity:0;
	padding-top:70px;
}

a{text-decoration:none;}
a img{border:none;}

#LogoStreifen{
	padding-top:60px;
	top:0px;
	position: absolute;
	z-index: 12901;
	background-image: url("../grafik/BG/LogoZusatz0.png");
    background-position: right top;
	background-size: cover;
}

#Logo {
   left: 0;
   padding: 0px 45px;
   top: 0px;
}
#Logo img {
    height: auto;
    padding: 10px 0;
    width: 100%;
	max-width:200px;
}
/*AUTOSCROLL************************************************************/
#BTN-Top{
	position:fixed;
	right:10px;
	bottom:80px;
	cursor:pointer;
	z-index:16000;
}
#BTN-Top img{opacity:0;}

.BTN-Scroll{
	cursor:pointer;
	padding:10px 20px;
    margin: 0px 0px 10px;
}
.ScrollBTN{cursor:pointer;}
/*AUTOSCROLL*************************************************/
/*KOPF*******************************************************/
#Kopf{
	height:70px;
	position:fixed;
	z-index:13000;
	top:0px;
	width:100%;
	padding:0px 0px 0px 25px;
}

/*FullFrameDynamicBlender class="BTNBlender" data-framenr="5" -> FFDB.js*/
.BTNBlender{cursor:pointer;}
#FullFrameDynamicBlender{
	top:70px;
	display:none;
	position: fixed;
	width:100%;
	height: auto !important;
    min-height: 100%;
	overflow:hidden;
	z-index: 11000;
	text-align: center;
}
#FFDBBackGround{
	position: fixed;
	top:0px;
	width:100%;
	height: auto !important;
    min-height: 100%;
	overflow:hidden;
	z-index: 5001;
	background-size: cover;
	background-position: center center;
}
#FullFrameDynamicBlender p{
	max-width: 900px;
	margin:auto;
}
#FFDBTitel, #FFDBText{
	padding:30px;
	position:absolute;
	width:100%;
	opacity: 0;/*Animation*/
}
#FFDBTitel{z-index: 5002;}
#FFDBText{z-index: 5003;}
.FFDBPad{padding:50px 0px;}
.CloseBlender{
	position:absolute;
	right:30px;
	top:80px;
	cursor:pointer;
	z-index: 5004;
}
.CloseBlender img{
	width:50px;
	height:50px;
}
/*FormularFelder*/
.label,input,.mass{
	height:35px;
	padding:5px 0px 5px 5px;
	float:left;
}
.label{width:60%;}
input{
	width:30%;
	text-align: right;
	padding:0px 10px;
}
.mass{
	width:10%;
	float:right;
	text-align: right;
}
.BTNDropDown{
	height:35px;
	width:auto;
	padding:5px 10px;
	background-color: none;
}
.BTNDropDown img{
	text-align: right;
	height:60%;
	width:auto;
	float:right;
}
.DropDown{
	width:140px;
	display:inline-block;
	cursor:pointer;
	position:absolute;
}
.DDBox{
	overflow:hidden;
	z-index: 50000;
}
.option{
	border-bottom:1px solid #000;
	padding:5px 10px;
	z-index: 50000;
}

/*.DDabsolute = Wert zum lesen für programmierung*/
.DDabsolute{
	position:absolute;
	left:102%;
	top:0px;
}
/*INHALT*************************************************/
#Inhalt{
	width:100%;
}
#Inhalt h1{
	margin:35px 0px 25px;
}
#Inhalt h2{
	margin:35px 0px 25px;
}
.ZenterText{
	text-align: center;
}
.ZusatzButton{
	display:none;
	width:150px;
}
.BTNMore{
	display:inline-block;
	/*width:150px;*/
	padding:10px;
	border-radius: 7px;
	text-align: center;
	background-color: #333;
}
.BTNMore:hover{
	background-color: #666;
	color:#fff;
}
/*ProduktSuchfeld******************************/
#ProdSuche{position:relative;}
#ProdSucheBox{
	float:right;
	width:200px;
}
input[type="search"]{
    border: 1px solid #999999;
    border-radius: 4px;
	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	width:100%;
	text-align: left;
}

#BTNProdSuche{
	width:50px;
	height:50px;
	float:right;
}
/*ProduktSuchfeld******************************/
/*BANNERSLIDER*********************************/
#BigBanner #BannerSlider, #BigBanner .BannerBox, #BigBanner .BannerBoxInhalt{
	height:700px;
}

#BannerSlider, .BannerBox, .BannerBoxInhalt{
	height:500px;
}

#BannerSlider{
	position:relative;
	display:block;
	overflow:hidden;
}
.BannerBox{
	position: absolute;
	width: 100%;
	background-position: center;
	background-size: cover;
	top: 0px;
	overflow: hidden;
}

.BannerBoxInhalt{
	float:right;
	width:30%;
	padding:30px 3% 5px;
	background-image:url(../EinzelBilder/Banner/BG-Schwarz.png);
	overflow:hidden;
}
.BannerBoxInhalt p{max-width:600px;}

#BannerSliderNav{
	position:absolute;
	display:block;
	height:50px;
	width:100%;
	bottom:0px;
	z-index:800;
}
#BannerSliderNavBox{
	position: relative;
	display:inline-block;
	left:50%;/*margin-left in BannerSlider.js -50% von Breite #BannerSliderNavBox*/
	text-align: center;
	padding-top:15px;
	vertical-align: center;
}
.BSNavBTN{
	float:left;
	padding:0px 15px 0px 0px;
	cursor:pointer;
}
/*BANNER SLIDER END ****************************/
#Adresse{padding:15px;}
.SPSmall{
	width:100%;
	max-width:1200px;
	margin:auto;
	padding:0px 30px;
}
.ZeileSchmal{
	width:100%;
	max-width:1200px;
	margin:auto;
	padding:0px 30px;
}
.Box{
	display:block;
	float:left;
	padding:20px;
}

.SP20,.SP33,.SP50,.SP66{
	float:left;
	padding:40px 20px 20px 0px;
	height:auto;
}
.SP20{width:20%;}
.SP33{width:33%;}
.SP50{width:50%;}
.SP66{width:66%;}
.SP100{
	padding-top:20px;
	width:100%;
}

.SP2CSS,.SP3CSS{padding-bottom:20px;}

.SP2CSS,.SP3CSS{
	-moz-column-rule: 0px dotted #000;
	-webkit-column-rule: 0px dotted #000;
	column-rule: 0px dotted #000;
	margin: 0px;
}
.SP2CSS{
	-moz-column-count: 2;
	-moz-column-width:50%;
	-moz-column-gap: 40px;
	
	-webkit-column-count:2;
	-webkit-width:50%;
	-webkit-column-gap: 40px;
	
	column-count:2;
	column-width:50%;
	column-gap: 40px;
}
.SP3CSS{
	-moz-column-count: 3;
	-moz-column-width:33%;
	-moz-column-gap: 20px;
	
	-webkit-column-count:3;
	-webkit-width:33%;
	-webkit-column-gap: 20px; 
	
	column-count:3;
	column-width:33%;
	column-gap: 20px;
}
.SP2CSS p,.SP3CSS p{padding:0px;}
.SP2CSS ul,.SP3CSS ul{
	padding:0px;
	margin:0px 0px 0px 25px;
	
}
.SP100 .TextBox{max-width: 920px;}

.TextBox p{margin:0px 0px 20px 0px;}
.Box{
	display:block;
	float:left;
	padding:20px;
}
#Inhalt .SP33 h1, #Inhalt .SP50 h1,#Inhalt .SP66 h1,#Inhalt .SP100 h1{
	margin:0px 0px 0.2em 0px;
}
#Inhalt .SP33 h2,#Inhalt .SP50 h2, #Inhalt .SP66 h2, #Inhalt .SP100 h2{
	margin:0px 0px 0.1em 0px;
}

/*PICTURES*************************************/
.VSBEinzel .LupeBild{
	position:absolute;
	width:40px;
	height:40px;
	margin-left:-40px;
	margin-top:-20px;
	top:50%;
	left:50%;
}
.VSBSerie .LupeBild{
	position:absolute;
	width:30px;
	height:30px;
	margin-left:-30px;
	margin-top:-15px;
	bottom:0px;
	right:0px;
}
.VSB .LupeBild img{
	opacity: 1;
	width:100%;
	height:auto;
}
.SP33 .VSB{padding:5px 50px 5px 0px;}
.SP50 .VSB{padding:5px 50px 5px 0px;}
#Bildergalerie{
	position:absolute;
	width:100%;
	height:100%;
	z-index:25000;
	display:none;
	top:0px;
}
.BildBox{
	display:block;
	width:100%;
}
.VSB{
	position:relative;
	float:left;
	cursor:pointer;
	overflow:hidden;
	margin:0px 0.25% 0.25% 0px;
}
.VSB{
	background-size:cover;
	background-position: top;
	background-origin: content-box;
	background-repeat: no-repeat;
}
.VSB img{
	opacity:0;
	/*wird über background geladen*/
}
.SP33 .VSBEinzel,.VSBEinzel img{
	width:90%;
	height:auto;
}
.VSBEinzel,.VSBEinzel img{
	width:100%;
	height:auto;
}
.BildBox .VSBEinzel{
	padding: 5px 50px 0px 0px;
}
.VSBSerie{
	width:14%;
	height:90px;
	overflow:hidden;
}
.VSBSerie img{
	width:100%;
	height:auto;
	overflow:hidden;
	opacity: 0;
}

#BildShowBox{
	position:relative;
	text-align:center;
	overflow:hidden;
	margin:auto;
	z-index:25001;
	background-image:url(../comaxx/Pictures/Bilder/loader.gif);
	background-position:center center;
	background-repeat:no-repeat;
}
#BildShowBox img{
	margin:auto;
	opacity:0;
}
#BGSchwarz{
	position:absolute;
	width:100%;
	height:100%;
	background-image:url(../comaxx/Pictures/css/BG.png);
	opacity:0.95;
	z-index:24990;
}
#BildGalBack, #BildGalForw,#BildGalClose{
	position:absolute;
	z-index:25020;
	top:50px;
	cursor:pointer;
}
#BildGalBack{left:5px;}
#BildGalForw{right:5px;}
#BildGalClose{
	top:10px;
	right:5px;
}
#BildNummerierung,#BildTitel{
	position:fixed;
	width:100%;
	bottom:10px;
	text-align:center;
	z-index: 25011;
	text-shadow:#000000 1px 1px 5px;
}
#BildTitel{
	bottom:40px;
	z-index: 25012;
}
.VSHide{display:none;}
/*PICTURES*************************************/
.Dok{
	float:left;
	width:14%;
	height:150px;
	margin-right:1%;
	overflow:hidden;
	text-align: center;
	border:1px solid #D4D4D4;
	padding:10px 5px;
}
.Dok img{
	width:30%;
	margin:auto;
}
.Dok a{width:100%;}
/*Doc*************************************/
/*Fuss*/
#Fuss{padding:20px;}
.FussBox{
	float:left;
	width:20%;
	padding:0px 20px;
}

#copyright{
	padding:5px 20px;
    text-align: right;
}
.clear,.clear20,.clear30,.clear40,.clear50,.clear70{clear:both;}
.clear20{height:20px;}
.clear30{height:30px;}
.clear40{height:40px;}
.clear50{height:50px;}
.clear70{height:70px;}
.clearLinie{
	clear:both;
	height:2px;
	margin-bottom:2px;
	border-bottom:1px solid #dcdcdc;
}
.clear50Linie{
	clear:both;
	height:25px;
	margin-bottom:25px;
	border-bottom: 1px solid #b4b4b4;
}

.clearNavLinie{
	clear:both;
	height:2px;
	margin-bottom:2px;
	border-bottom:1px solid #333;
}