@font-face {
    font-family: 'rangetregular';
    src: url('font/ranget-webfont.eot');
    src: url('font/ranget-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/ranget-webfont.woff2') format('woff2'),
         url('font/ranget-webfont.woff') format('woff'),
         url('font/ranget-webfont.ttf') format('truetype'),
         url('font/ranget-webfont.svg#rangetregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'allerbold';
    src: url('font/aller-webfont.eot');
    src: url('font/aller-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/aller-webfont.woff2') format('woff2'),
         url('font/aller-webfont.woff') format('woff'),
         url('font/aller-webfont.svg#allerbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'aller_lightregular';
    src: url('font/aller_lt-webfont.eot');
    src: url('font/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/aller_lt-webfont.woff2') format('woff2'),
         url('font/aller_lt-webfont.woff') format('woff'),
         url('font/aller_lt-webfont.svg#aller_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rangetregular';
       src: url('font/allura-regular-webfont.eot');
    src: url('font/allura-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/allura-regular-webfont.woff2') format('woff2'),
         url('font/allura-regular-webfont.woff') format('woff'),
         url('font/allura-regular-webfont.svg#alluraregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


html
{
	font-family: 'aller_lightregular';   
margin:0;
padding:0;
height:100%;
	
}

.background
{
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 0;
	overflow: hidden;
}
#mitte{
    
    width: 900px;
	
	align-content: center;

}

.banner {
    /* flex: 1; */
    display: flex;
    min-width: 100px;
    width: auto;
    margin: 10px;
    max-width: 200px;
  
    text-decoration: none;
}
.sponsor {
    width: 100%;
    border: 1px solid hsl(0deg 0% 0%);
}

/*Gallery Styles*/
  .imggal { 
	max-width: 100%;
    height: 200px;
    width: 300px;
    object-fit: cover;

}
  .imggal2 { 
	max-width: 100%;
    height: 300px;
    width: 400px;
    object-fit: cover;

}
.galerietitel{font-weight: bold;}
.galerietext{font-style: italic;font-size: 0.6em;}
.mittetext{
	margin-left:1em;
	margin-top:1em;
	}

#imitte {
	width: 100%;
	max-width: 100%;
	max-height: 100%; 
}


#gruen{
	background-color: #bfbfbf;
	border-bottom: 1px solid #363636;
	border-top: 1px solid #363636;}
#weiss{background-color: #ffffff;  }


.hidenormal
	{
		display: none;
	}
 .oben
{      
	display: table;
  width: 100%;
  height: 30em;}


.titel
{
   font-family: 'rangetregular';
	display: table-cell;
  	vertical-align: middle;
    text-decoration: none;
	font-size: 2em;
	text-align: center;
	letter-spacing: 0.07em;
    color: #ffffff;
    line-height: 30px;
	text-shadow: 0 0 10px #444;

}
.titel2
{
    
	font-family: 'rangetregular';
    text-decoration: none;
	font-size: 1.6em;
	text-align: center;
    color: #ffffff;
    line-height: 50px;
	letter-spacing: 0.07em;
	text-shadow: 0 0 10px #444;
	


}
.titel3
{
    
	font-family: 'rangetregular';
    text-decoration: none;
	font-size: 3em;
	text-align: center;
    color: #bfbfbf;
    
	letter-spacing: 0.07em;
	
	


}
.titelhome
{
    
	font-family: 'rangetregular';
    text-decoration: none;
	font-size: 0.6em;
	text-align: center;
    color: #ffffff;
   
	


}

#galerie{align-content: center;
	padding: 3px;
	
	float: left;
	}
#grahmen{align: center; background-color: #ffffff; width: 1000px; }





.h1
{
 	font-family: 'rangetregular';
	text-decoration: none;
	font-size: 2.5em;
	color: #363636;
	line-height: 50px;
 	letter-spacing: 0.07em;
}

.h2
{
   font-family: 'rangetregular';
   text-decoration: none;
	font-size: 2em;
    letter-spacing: 0.07em;
    line-height: 23px;
	
	
}
.h3
{
   font-family: 'rangetregular';
    text-decoration: none;
	 font-size: 2em;
    color: #363636;
    letter-spacing: 0.07em;
    line-height: 23px;

}
.h4,
#weiss h1,
#gruen h1
{
  font-family: 'rangetregular';
    text-decoration: none;
	 font-size: 2em;
    color: #363636;
    letter-spacing: 0.07em;
    line-height: 23px;
	font-weight: normal;

}
.img {
 
   width:300px;
   height:300px;
   overflow:hidden;
	border: 1px solid #bfbfbf;
	
	
}

.img1 {
 
   width:200px;
   height:auto;
   overflow:hidden;
	/*border-radius: 100%;*/
	border: 1px solid #363636;
}
.img2 {
 border: 1px solid #363636;
   width:200px;
   height:auto;
   overflow:hidden;
	/*border-radius: 100%;*/
	margin-top: 1em;
	margin-bottom: 1em;

	
}
.img3 {
 border: 1px solid #363636;
   width:300px;
   border-radius: 100%;
	height:auto;
   overflow:hidden;

}
.img4 {
 
   width:300px;
   height:auto;
   overflow:hidden;
	border: 1px solid #363636;
	margin-top: 1em;
	margin-bottom: 1em;
	object-fit: cover;
}
.gruentext{color: #363636; }

.content
{
   
	
	font-size: 0.8em;
    color: #363636;
    line-height: 18px;
    letter-spacing: 0.0px;

}

.contentbold
{
	font-family: 'allerbold';

}
.contenta
{
   
	
	color: #363636;
   

}
.contenta:hover
{
  
    color: #363636;
   
}

.menue
{
	font-family: 'rangetregular';
    text-decoration: none;
	font-size:1.5em;	
    color: #363636;
    letter-spacing: 0.07em;
    line-height: 30px;

}
.menueaktiv
{
  	font-family: 'rangetregular';
    text-decoration: none;
	font-size:1.5em;
 	letter-spacing: 0.07em;	
    color: #ffffff;
	border-bottom:1px solid #fffffff;
}


.menue:hover
{
    text-decoration: none;
    color: #ffffff;
	border-bottom:1px solid #ffffff;

}
.menue2
{
	font-family: 'rangetregular';
    text-decoration: none;
	font-size:1.5em;
	letter-spacing: 0.07em;
    color: #363636;	
	background: #bfbfbf;
	border-bottom:1px solid #363636;
	
}
.menue2aktiv
{
    text-decoration: none;
    color: #ffffff;
	background: #bfbfbf;
	border-bottom:1px solid #363636;

}


.menue2:hover
{
    text-decoration: none;
    color: #363636;
	background: #bfbfbf;
}


.adress
{
    font-size:0.8em;
    color: #363636;
    line-height: 1.2em;
	letter-spacing: 0.00em;
	
}
.adresslink
{
    color: #363636;	
}
.adresslink:hover
{
    color: #363636;
		
}


a 
{
	text-decoration:none;
	color: #363636;
}

a:hover 
{
	text-decoration:none;
	color:#363636;
}

#logobild{
    
    left: 5%;
align-content: center;
/*position: fixed;*/
z-index: 30;
top: 7px;

}
.logo
{
		width: 150px;
 		height: auto;
	}
	

.navclosed,
.menuetoggle
{
	display:none;
	background-color: transparent;
    border: none;
}

.navopen
{
	position:absolute; 
	z-index:100; 
	left:0px; 
	top:26px; 
	background-color:#363636; 
	border: 1px solid #bfbfbf; 
}


#trans{
	height:843px;
	width:100%; max-width:100%;
}


produkt .center
{
	margin:auto;
	display:flex;
	padding-bottom: 0.1em;
	
}

produkt .col
{
	width: 25%;
	padding: 1em;
	margin-right: 0.1em;
}

produkt .col2
{
	width: 25%;
	border-color: #45484c;
	border-width: 1px;
	letter-spacing: 0em;
	padding: 1em;	
	margin-left:1em;
}
produkt .col3
{
	width: 25%;
	border-color: #45484c;
	border-width: 1px;
	letter-spacing: 0em;
	padding: 1em;
	
}

produkt .col4
{
	width: 50%;
	border-color: #45484c;
	border-width: 1px;
	letter-spacing: 0em;
	padding: 1em;
	
}

@media(min-width:2000px)
{#trans{
	height:1054px;
	width:100%; max-width:100%;
}}
@media(min-width:2250px)
{#trans{
	height:1186px;
	width:100%; max-width:100%;
}}
@media(min-width:2500px)
{#trans{
	height:1318px;
	width:100%; max-width:100%;
}}
@media(min-width:2750px)
{#trans{
	height:1581px;
	width:100%; max-width:100%;
}}
@media(min-width:2800px)
{#trans{
	height:1712px;
	width:100%; max-width:100%;
}}

@media(max-width:800px)
{
	#logobild
	{
		text-align:center;
		position: static !important;
		    left: 0%;
align-content: center;


top: 0px;
	}
	
	#logobild a
	{
		padding-bottom: 1em;
    	display: block;
	}
#trans
	{
	height:300px;
	width:100%; max-width:100%;
	}
	
.img1, 
.img2, 
.img3,
.img4,
.img5,
.img{
	
	width: 100%;
	height: auto;
}

	.imggal {
			max-width: 100%;
		height: auto;
		width: 100%;
	}

	.imggal2 {
			max-width: 100%;
		height: auto;
		width: 100%;
	}
	
produkt .center
	{
		display:block;
	}
	
produkt .col
	{
		width: auto;
		margin-bottom: 1em;
	}
produkt .col2
	{
		width: auto;
		margin-bottom: 1em;
		margin-left:0em;
	}
produkt .col3
	{
		width: auto;
		margin-bottom: 1em;
		margin-left:0em;
	}	
	produkt .col4
	{
		width: auto;
		margin-bottom: 1em;
		margin-left:0em;
	}

.oben{ 	
	display: table;
  	width: 100%;
  	height: 10em;}


.hidemobile
	{
		display: none;
	}
.hidenormal
	{
		display: block;
	}

#mitte
	{
		position:static;
		height:auto;
		width:auto;
		padding:1em;
	}

.adresslink,
.adresslink:hover
	{
		line-height: 1.4em;
	}
	
	
body
	{
		margin:0px;
	}

#menuebox
	{
		display:none;
	}
	
#menuebox.menueopen
	{
		display:block;
		
	}
	
.menue
	  {
		display:block;
		background: #bfbfbf;
		border-color:  #363636;
		line-height: 35px;
		color: #363636;
		padding-top:3px;
		padding-bottom:0px;
		padding-left:23px;
		border-bottom:1px solid #363636;
		
	  }
	
.menueaktiv
	{
	 	display:block;
		color: #ffffff;
		background-color: #bfbfbf;
		border-bottom:1px solid #363636;
		padding-left:23px;
	} 
	
.menue:hover
	{
		color: #ffffff;
		background-color: #bfbfbf;
		border-bottom:1px solid #363636;
	}
	

.menue2
	{
		padding-left:28px;
		line-height: 35px;
		color: #363636;
		background-color: #bfbfbf;
		border-bottom:1px solid #363636;
		border-top:0px;
		border-left: 0px;
		border-right: 0px;
		padding-bottom: 0px;

	}
	
.menue2:hover
	{
		color: #363636;
		background-color: #bfbfbf;
	}
	
.menue2aktiv
	{
		
		color: #ffffff;
		background-color: #bfbfbf;
	
	}
	
.menuetoggle
	{
		display: inline;
	
	}
	
 table,tbody,tr,td 
	{
    	display: block;
    	width: 100%;
    	overflow: hidden;
	
	}
	
.navclosed,
.navopen
	{
		display:block;
		position:static;
		width:auto; 
		background-color:#bfbfbf; 
		border: none;	
	}
	
.logo
	{
		text-align: center;
		width: 50%;
 		height: auto;
	}

	
.content
	{
	
	}
	
.tdleer
	{
		
		line-height: 0px;
	}
.adress

	{
	   margin:1em;
	}

	

	
.burger
	{
	width: 50px;
	margin-left:20px;
	}
#galerie {
			
		width:auto; 
float: none;
		margin-bottom: 1em;
		margin-left:0em;
}
	
	#grahmen{width: 100%; }
.banner {
  width: auto;
		margin-bottom: 1em;
		margin-left:0em;
  
  
}
		
}



/* --------- COOKIE HINWEIS -----------------*/
#cookiedingsbums a {color: #ffffff; text-decoration:underline;} /*Link im text*/

#cookiedingsbums a:hover {text-decoration:underline;color:#777c83;}  /*Link im text hover*/

#cookiedingsbums div {padding:10px; padding-right:50px;}

 
 #cookiedingsbums { 
   outline: 1px solid #ffffff; /*Strich über Hintergrund*/
   text-align:left;  
   background: #45484c; /*Hintergrundfarbe gesamt*/
	 color: #ffffff;
   position:fixed;
   bottom:0px; 
   z-index:10000; 
   width:100%; 
  font-size: 1.1em;
line-height: 1.5em;
	left: 0px;
	 height: 200px;
}

#cookiedingsbumsCloser {
   color: #45484c;
   font: 1.1em;
   position: absolute;
   right: 50px;
   text-decoration: none;
   text-shadow: 0 2px 0 #fff;
  bottom: 20px;
   cursor:pointer;
   border-top:1px solid #45484c; 
   border-left:1px solid #45484c; 
   border-bottom:1px solid #45484c; 
   border-right:1px solid #45484c; 
   padding:4px;
line-height: 20px;
   background: #ffffff; /* Old browsers */
   
 }

#cookiedingsbumsCloser:hover {color: #45484c; border-bottom:2px solid #45484c; border-right:2px solid #45484c; 
border-top:2px solid #45484c; border-left:2px solid #45484c;}
@media (max-width: 800px) {#cookiedingsbumsCloser {
	
	right: 10px;}}