/* Alles was ab der kleinsten Stufe gilt grundsätzlich auch für die höheren Auflösungen */
/* Durch die steigende Größe des Bildschirmplatzes können weitere Elemente hinzukommen.*/

/*@media screen and (orientation: portrait), (orientation: landscape) and (max-height: px)
*/

  @media screen and (max-width: 320px)  
{
.menu_texthide
{
  	display: 				none;
}

.headercontactline
{
	display: 				none;
}	

.headercontact, .headercontact_short
{
	display: 				none;
}

}



/*--- Header-Bar ----------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/



header
{
	position: 				fixed;
	top: 					0;
	left: 					0;
	right: 					0;
	width: 					100%;
	height: 				50px;
	background-color: 		#fff;  /**/
	text-transform:			uppercase;
    box-shadow: 			0px 8px 6px -4px rgba(50, 50, 50, 0.8);
  	-moz-box-shadow:    	0px 8px 6px -4px rgba(50, 50, 50, 0.8);
  	-webkit-box-shadow: 	0px 8px 6px -4px rgba(50, 50, 50, 0.8);
	z-index: 				9999;
}

.headerbarinner
{
	position:				relative;
    margin-left: 			auto;
    margin-right: 			auto;
	width:					100%;
	height:					100%;
	max-width:				1250px;	
/*	background-color: 		#ccc; /**/
	float:					none;
	z-index: 				9999;	
}

.headerlogo 
{
	display: 				inline-block;
	background-image: 		url('/bilder/logo.svg');
    background-repeat: 		no-repeat;
	background-size: 		auto 65px;	
	margin-top:				0px;
	margin-left:			-30px;
	top:					28px;
	height:					35px;
	width:					100px;
	position: 				realtive;
	float:					left;
/* 	background-color:		#666;	/**/
}

.headermenubutton
    {
	display: 				inline-block;
	position: 				realtive;
	float:					right;	
	
/*	background-image: 		url('../../images/menu.svg');
    background-repeat: 		no-repeat;
	background-size: 		auto 35px; /**/
		
	margin-top:				12px;
	margin-bottom:			auto;	
	margin-right:			15px;
	height:					35px;
	width:					35px;
    }

.headercontactline
   {
	display: 				inline-block;
	position: 				realtive;
	float:					right;	
	margin-top:				13px;
	margin-bottom:			auto;	
	margin-right:			15px;
}	

.headercontact
{
	display: 				none;	
}

.headercontact_short
{
	display: 				inline-block;
	position: 				relative;
	color:					#ccc;
	margin-right: 			25px;
	top:					20px;  
	float:					right;		
}

.headercontactbutton
{
	display: 				inline-block;
	position: 				realtive;
	float:					right;	
	
/*	background-image: 		url('../../images/menu_kontakt.svg');
    background-repeat: 		no-repeat;
	background-size: 		auto 35px;
/**/		
	margin-top:				8px;
	margin-bottom:			auto;	
	margin-right:			2%;
	height:					35px;
	width:					35px;
}

.menu_texthide
{
  	display: 				inline-block;
}

.headerlanguage
{
	position:				absolute;
	top:					60px;
	height:					30px;
	width:					30px;
}

.de
{
	right:					25px;	
	background-image: 		url('../bilder/icon_de.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}
.en
{
	right:					65px;	
	background-image: 		url('../bilder/icon_en.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}
.fr
{
	right:					105px;	
	background-image: 		url('../bilder/icon_fr.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}




 @media screen and (min-width: 620px) and (min-height: 440px)
{

header
{
	height: 				80px;
}

.headerlogo 
{
	background-size: 		auto 75px;	
	margin-top:				5px;
	margin-left:			15px;
	top:					28px;
	height:					75px;
	width:					200px;
}

.headermenubutton
    {
	background-size: 		auto 36px;
	margin-top:				23px;
	margin-right:			40px;
	height:					36px;
	width:					36px;
    }


.headercontactline
   {
	display: 				inline-block;
	position: 				realtive;
	float:					right;	
	margin-top:				28px;
	margin-bottom:			auto;	
	margin-right:			20px;
}	

.headercontact
{
	display: 				inline-block;
	position: 				relative;
	color:					#3d3d3d;
	margin-right: 			25px;
	top:					35px;  
	float:					right;	
}

.headercontact_short
{
  	display: 				none;
}


.headercontact
{
	display: 				inline-block;	
}

.headercontactbutton
{
	display: 				none;	
}



.headerlanguage
{
	position:				absolute;
	top:					28px;
	height:					30px;
	width:					30px;
}

.de
{
	right:					140px;	
	background-image: 		url('../bilder/icon_de.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}

.en
{
	right:					180px;	
	background-image: 		url('../bilder/icon_en.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}

.fr
{
	right:					220px;	
	background-image: 		url('../bilder/icon_fr.png');
    background-repeat: 		no-repeat;
	background-size: 		auto 30px;	
}





}


/*--- Navigation-Bar ------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------------------------------------------------------------------------------------*/

nav
{
	display: 				inline-block; /**/
	position:				relative;
	float:					left;
	
    width: 					100%;
	height:					auto;	
    margin-top: 			10px;
    background-color: 		#fff;
  	text-align: 			left;
	box-shadow: 			0px 0px 3px 0px rgba(50, 50, 50, 0.6);	/**/

	z-index:				800;
/*	white-space:			nowrap;		/* Hide sub level, we will use this in transition */
	overflow:				hidden;		/**/
    opacity: 				1;   
  	visibility: 			visible;
	
	box-shadow: 			0px 8px 6px -4px rgba(50, 50, 50, 0.8);
  	-moz-box-shadow:    	0px 8px 6px -4px rgba(50, 50, 50, 0.8);
  	-webkit-box-shadow: 	0px 8px 6px -4px rgba(50, 50, 50, 0.8);
	
	transition: 			visibility 0.3s 0s, opacity 0.3s linear;
/*	   transition: opacity 10s ease-in-out;
   -moz-transition: opacity 10s ease-in-out;
   -webkit-transition: opacity 10s ease-in-out; /**/
}

nav ul
{
	position:				relative;
	float:					left; 
/*	background-color: 		#ccc; '/**/
}
 
nav li
{
	position:				relative;
	float:					none;
	list-style: 			none;
	text-transform:			uppercase;	
	text-align:				left;
	color:			 		#aaa;	/**/	
	height:					50px;
	border-bottom: 			0.125em solid #eee; /**/
/*	background-color: 		#ccc; '/**/
}

nav a 
{
	display:				inline-block;
	font:					normal 18px "Elektra";
	width:					100%;
	padding-top:			0px;
	height:					100%;
/*	padding-bottom:			10px;	
	padding-left:			20px;
	padding-right:			20px;		/**/
/*	background-color: 		#ccc; '/**/	
}

nav ul a:hover, active
{
	color: 					#eee;
	background-color: 		#900; /*#F93;/**/
}


.hide 
{
	visibility: 			hidden;
	opacity: 				0;
	transition: 			visibility 0s 0.3s, opacity 0.3s linear;
}


.menu_icon
{
	position:						relative;
	float:							left;	
	padding:						0px;
	padding-top:					10px;
	padding-left:					10px;
	width:							40px;		
}

.menu_icon img
{
	position:						relative;
	width:							38px;
	height:							28px;
	margin-left:					auto;
	margin-right:					auto;	
}

.menu_text
{
	position:						relative;
	float:							left;	
	width:							175px;
	padding-top:					15px;
	padding-left:					10px;	
}

 @media screen and (min-width: 620px) and (min-height: 440px)
{
	
nav li
{
	box-sizing: 					border-box;
	position:						relative;
	float:							left;
	list-style: 					none;
	text-transform:					uppercase;	
	text-align:						center;
	height:							90px;
	width:							50%;	
	border-bottom: 					0.125em solid #eee; /**/
	border-right: 					0.125em solid #eee;
}

nav a 
{
	display:						inline-block;
	width:							100%;
	height:							100%;
}

.menu_icon
{
	position:						relative;
	float:							left;	
	padding:						0px;
	padding-top:					15px;
	width:							100%;		
}	

.menu_text
{
	position:						relative;
	float:							left;	
	width:							100%;
	padding-top:					0px;
	padding-left:					0px;	
}

}
  

	

  @media screen and (min-width: 780px)
{
.menu_texthide
{
  	display: 				none;
}

nav li
{
	box-sizing: 					border-box;
	position:						relative;
	float:							left;
	height:							65px;
	width:							16.66%;	
	border:							none;
}

nav a 
{
	display:						inline-block;
	width:							100%;
	height:							100%;
}

.menu_icon
{
	position:						relative;
	float:							left;	
	padding:						0px;
	padding-top:					4px;
	width:							100%;		
}	

.menu_text
{
	position:						relative;
	float:							left;	
	width:							100%;
	padding-top:					0px;
	padding-left:					0px;	
}



}





  @media screen and (min-width: 920px)
{

nav a 
{
	display:				inline-block;
	font:					normal 18px "Elektra";
	height:					100%;
	width:					100%;
	padding: 				0px;
/*	padding-top:			10px;
	padding-bottom:			10px;	
	padding-left:			10px;
	padding-right:			10px;		
/*	background-color: 		#ccc; '/**/	
}

nav ul a:hover, active
{
	color: 					#eee;
	background-color: 		#900; /*#F93;/**/
}

.hide 
{
	visibility: 			hidden;
	opacity: 				0;
	transition: 			visibility 0s 0.3s, opacity 0.3s linear;
}
	
}
 
 
 
 
 @media screen and (min-width: 970px) 
 {
	

.menu_texthide
{
	display: 				inline-block;	
} 


}
	


.kursiv {
	font-style: italic;
}