/* Grundeinstellungen (müssen ganz oben stehen) */
	.flexnav { z-index:3; position:relative; margin:0px; padding:0px; background-color: #3A0B4D;  }
	
	/* Annimationen */
		@keyframes hoehe_on { 0% {max-height:0px; overflow:hidden } 100% { max-height:1000px; } }	
		@keyframes hoehe_off { 0% { max-height:500px; height:auto; width:auto; overflow:hidden } 100% { max-height:0px;height:auto; width:auto; overflow:hidden } }

		@keyframes einblenden { 0% {opacity:0} 100% {opacity:1} }
		@keyframes ausblenden { 0% {max-height:500px; overflow:visible;width:auto; opacity:1} 100% {overflow:visible; width:auto; max-height:500px; opacity:0} }

		@keyframes ein { 0% {max-height:0px; overflow:hidden; opacity:0 } 100% { max-height:1000px; opacity:1 } }
		@keyframes aus  { 0% { opacity:1 ;max-height:500px; height:auto; width:auto; overflow:hidden } 100% { opacity:0; max-height:0px; height:auto; width:auto; overflow:hidden } }	
		
		
			
						/* -------Optische Menügestalltung-------- */

/* Viewport Hochkant und quer 
	nav { position:relative; height:auto; background-color:transparent }*/
	 
	/* Schrift */
	.flexnav {max-height:0px; overflow:hidden; color:white; font-family:erasdemi; background-color: #2a0941;  }
	
	/* Links */
	.flexnav a { cursor:pointer }
	.flexnav a[href] { color:#BFFF38; text-decoration:none }
	
	/*alle Listenpunkte*/
	.flexnav li a { height:35px }
	.flexnav .aktiv_link a { border-top-left-radius:20px }
	.flexnav .aktiv_link { background-image:none;  }
	.flexnav .aktiv_link>ul { background-color:black }
	
	/* Hintergrund Links */
	.flexnav li a {color:inherit; height:35px; margin:1px 0 0 1px; border-top-left-radius:20px; font-size:17px; padding:10px; background-image:url(/images/Hintergrund/lavendelmuster.jpg);}
	
	/*alle div*/
	.flexnav div, .flexnav p {margin:0px; vertical-align:-10px }

	/* alle Navigationsbutton*/
	.flexnav .navicon,.menu-button { cursor:pointer; text-align:center; color:#84C300; background-color:green;  box-sizing: border-box }
	
	.flexnav .navicon{ padding-top: 15px; font-size:20px; width:40px; right:0px; top:1px; min-height: 55px}					
	.menu-button { position:absolute; height: 55px; font-size:20px; width:40px; top:35px; right:0px;  z-index:100}				

	/*Dieser Wert verhintert das Überschreiben des Navicon durch den Linktext. Er sollte hoeher sein als die Breite des Navicons*/
 	 .flexnav li .li-with-ul>a:first-child { padding-right:45px }
 	 
 	/* Art der Animation */ 
	.flexnav .show-ul { animation:ein 1s }
	.flexnav .down-ul { animation:aus 1s }
	
/* Viewpoint quer */  
	@media all and (min-width: 801px) {
		.menu-button { display:none }
		.flexnav {overflow:visible; left:120px; top:61px; background:transparent;  white-space:normal !important }
		.flexnav li {background-image:url(/images/Hintergrund/lavendelmuster.jpg)}
		/* Abstände aller Listenpunkte*/
		  .flexnav li { padding:0 10px 0 10px;  }
		  .flexnav .navicon { background-color:transparent; bottom:0px; padding-top:0px }
		  
		  /* Shape Hintergrund */	  
		  .flexnav ul li, .flexnav p, .flexnav div { background-image:url(/images/Hintergrund/lavendelmuster.jpg) }

		/* Stellt die Abstaende der navicons in der Menüleiste ein*/
		  .flexnav>li { height:25px; padding-bottom:5px; border-top-right-radius:20px; background-color: darkmagenta; margin-right: 5px; border-top:4px solid #9363a7; border-top-left-radius: 20px; }
		  .flexnav>li>a { height:inherit }
		  .flexnav>li>.navicon { margin:0 10px 0 10px }
		  .flexnav li a { font-size:16px; padding:0px; border:none; background-image:none; border-radius:10px}
		  
		/* Regelt den vertikalen Abstand des ersten Shapes*/
		  .flexnav>li>ul { border-top: 10px solid transparent }
		  
		/* Regelt die Höhenposition aller weiteren Shapes*/
		  .flexnav li ul ul { top:-14px }
		/* Regelt den Horizontalen Abstand  der folgenden Shapes*/
		  .flexnav li ul li ul { border-left: 10px solid transparent }
		  
		/* Runde Ecken und padding (oben unten) shape muß auf li gemacht werden da ul zwingend transparent sein muß*/
		  .flexnav ul li:first-child { border-top:15px solid transparent; border-top-left-radius:20px; border-top-right-radius:20px }
		  .flexnav ul li:last-child { border-bottom:15px solid transparent ; border-bottom-left-radius:20px; border-bottom-right-radius:20px }
		 /* .flexnav ul li:first-child .navicon { top:auto; bottom:5px }
		   unsichtbare Rundung weisser Streifen. Wert muss mindestens so gross sein wie die Rundung bei li*/
		  .flexnav ul {  border-radius:20px}
		 /*.flexnav .aktiv_link>ul { background-color:transparent}
		  Box Schatten */  
		  .flexnav ul .aktiv_link { padding: 0 5px 0 5px; display: table-cell; vertical-align: middle;}
		  .flexnav ul { box-shadow:  22px 24px 13px -5px rgba(0, 0, 0, 0.35) }  
		  
		 /* .flexnav ul .aktiv_link {  border-radius:10px; padding: 5px 5px 0px 5px; width: 100%; margin-right: 5px; box-sizing: border-box;  }*/
		  
	 	/* Art der Animation */ 
		.flexnav .show-ul { animation:einblenden 1s }
		.flexnav .down-ul { animation:ausblenden 1s }		  
	}

							/*----------Funktions-CSS---------*/
							
/*Dieser Abschnitt muss ganz unten stehen und ist zwingend für die Grundfunktion des Menüs erforderlich*/




/* Viewport Hochkant und quer */
	.flexnav {  padding:0px; overflow: hidden; visibility:visible }
	.flexnav li { list-style-type:none;}
	.flexnav li a { display: inline-block; width:100% }
	.flexnav .navicon { position:absolute; display:inline; cursor:pointer }
	.flexnav ul { visibility:visible; overflow:hidden; max-height:0px; width:0px; background-color:transparent}
	.flexnav .li-with-ul {/* height:auto;*/ display:block; position:relative }
	.flexnav .show-ul { max-height:1000px; overflow:inherit; height:auto; width:auto; visibility:visible }
	
/* Viewpoint quer */ 
	@media all and (min-width: 801px) {
	  .flexnav { position:absolute; overflow: visible }
	  .flexnav .navicon { bottom:0px}
	  .flexnav>li { float: left; overflow: visible; width:auto }	
	  .flexnav>li>a { width:auto }
	  .flexnav ul { position:absolute; white-space:nowrap; background-repeat:no-repeat; padding:0px; }
	  .flexnav>li>.navicon { position:relative }
	  
	/* Verhindert das Auslösen eines Javascript-Events beim Übergang in das nächste Shape*/
	  .flexnav li ul ul { left:0px }
	  
	/* plaziert die ul's rechts vom vorherigen*/
	  .flexnav li ul li ul { margin-left: 100% }
	  .flexnav .show-ul {  }
	}
	
	/* aktiviert Menü bei Hochkanstellung durch funktion navOnOff*/
	.navOn { max-height:2000px }
	
	
	
	
	.menue ul { visibility:visible; overflow:hidden; height:0px }
	.menue .navicon { cursor:pointer }
	.menue .li-with-ul { display:block }
	.menue .show-ul { overflow:visible; height:auto  }
	.menue .show-ul { animation:mnuEin 2s }
	.menue .down-ul { animation:mnuAus 1s; height:0px }
	@keyframes mnuEin { 0% {max-height:0px; opacity:0 } 100% { max-height:1000px; opacity:1 } }
	@keyframes mnuAus  { 0% { opacity:1; max-height:500px; height:auto } 40%{ opacity:1 } 100% { opacity:0; max-height:0px; height:auto } }
	
	.kltext>li *:first-child { display:inline }