@font-face { /* Icons, benutzt wird nur das mit den drei Strichen, für die mobile version. "Burgermenü"-Symbol */
	font-family: 'Icon' ;
	src: url('../style/ionicons/ionicons.woff') ;
}

.Icon { 
	font-family: Icon ; 
	font-size: 1.3em ;
	color: #ffffff ;
}


#Hauptnav {
	display: flex ;
	box-shadow: 0px 7px 10px #909090 ;
	background-image: linear-gradient( to bottom right, #99999999 0%, #00000099 100% ) ;
	color: #cccccc ;
	font-family: Calibri, Helvetica, sans-serif ;
	font-size: 1.5rem ;
	font-weight: bold ;
	text-align: center ;
}


nav-menu , menu-head , menu-body , nav-menu a {
	display: block ;
	box-sizing: border-box ;
	background-image: linear-gradient( to bottom right, #999999aa 0%, #000000aa 100% ) ;
	color: #cccccc ;
	z-index: 1000 ;
}

.menu-first{
	border-radius: 0 0 0 1em ;
}
.menu-last{
	border-radius: 0 0 1em 0 ;
}

menu-body { 
	max-height: 0 ; 
	overflow: hidden ;
	transition: max-height 1s ease ;
}

#Hauptnav a {
	text-decoration: none ;
}

#Hauptnav a:hover {
	color: #ffffff ;
	background-image: linear-gradient( to bottom right, #800080aa 0%, #008000aa 100% ) ;
	color: #808080;
}

#Hauptnav a:active {
	transform: translate( 0px , 2px ) ;
}
	
nav-menu:hover menu-body { 
	max-height: 16em ; 
}
	

/* SMARTPHONE-Ansicht ----------------------------------------------------------------------- */

@media screen and ( min-width: 320px ) and ( max-width: 1131px)	{

	#Hauptnav {
		flex-direction: column ;
		left: 0 ;
		right: 0 ;
		top: 0 ;
		max-height: 2rem ;
		overflow: hidden ; 
		border-radius: 0 0 1em 1em ;
		transition: max-height 1s ease ;
	}
	
	#Hauptnav:hover {
		max-height: 50em ;
	}
	
	.menu-first{
		border-radius: 0 ;
	}
	.menu-last{
		border-radius: 0 ;
	}

	menu-body { 
		width: 90% ;
		margin: 0 auto ;
	}

	.Phone { display: block ; }

}

/* PC-Ansicht ----------------------------------------------------------------------- */

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

	#Hauptnav {
		flex-direction: row ; 
		justify-content: center ;
		/*border: solid 1px #000000 ;*/
		height: 2rem ;
		border-radius: 0 0 1em 1em ;
	}
	
	.menu-first{
		& menu-body {
			float: right ;	
		}
	}
		
	nav-menu {
		width: 8.2em ;
	}
	
	.menu-first menu-body, .menu-last menu-body{
		width: 7em ;
	}

	menu-head {
		height: 2rem ;
	}

	.Phone { display: none ; }

}