@charset "utf-8";
/* Navigation-Menue */

* {
	margin:0;
	padding:0;
	list-style:none;
	box-sizing:border-box;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}



nav {
	width:100%;
	height: 2.2vw;
	float:left;
	background: lightgrey;
	transition:height .2s ease-in-out;
	border-bottom: 2px solid white;
	border-top: 2px solid white;
	/*overflow:hidden;*/
	
	
}

nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
	
	
}
nav .submenu li { 
  display: block; 
  width: 15em;
  z-index: 1000;
}
 
/**     Show the submenu on hover, focus     **/
nav li:hover  .submenu,
nav li:active  .submenu, 
nav li:focus  .submenu { 
  visibility: visible;
  height: auto;
	
}

nav > ul {
	list-style: none;
	/*margin: 0;*/
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
	flex-basis: 100%;
		
}

nav li {
	/*margin: 0.5em;*/
	padding: 0;
	font-size: 1.2vw;
	flex: 1 1 0%;
	flex-basis: 100%;
	
		
}




nav a {
	display: block;
	/*padding: 0.4em;*/
	/*width: 15em;*/	
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	color: darkblue;
	/*background: linear-gradient(darkorange, red, darkorange);*/
	background-color: lightgrey;
	transition: all .25s ease-in;
}

nav li[aria-current] a {
	
/*	background-color: firebrick;
	color: gold;  */
}

nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
	color: white;
	background-color: grey;
}
/*     submenu navigation links      */

nav .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav .submenu li {
	display: inline-block;
	z-index: 1000;
	/* width: 15em; */
}
/**     Show the submenu on hover, focus     **/

nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
	visibility: visible;
	height: auto;
	
	
}

nav li:focus-within .submenu {
	visibility: visible;
	height: auto;
	
}



/* Hamburgermenue herausgleiten lassen */
.toggler {
   width: auto;
   height: auto;
	
}
  #button {
	/*background: grey;*/
	background: linear-gradient(200deg, grey, lightgrey, darkblue);  
 	display: block;
	position: relative;
	margin-top: 6%;
	margin-bottom: 6%;
 	margin-left: auto; margin-right: auto;
	padding: 0 0 0 2%;
	width: 8em;
	height: 4em;
	border-radius: 4px; 
	border: 2px solid white;
  }
  #effect {
    position: relative;    
    height: auto;
	margin-left: auto; margin-right: auto;  
    padding: 0.4em;
	
  }
#effectTypes{
	display: none;
	
}
  #effect h3 {
    margin: 0;
    padding: 0.4em;
    text-align: center;
  }
/* für kleine Bildschirme */
nav1 {
	width: auto;
	height: auto;
	float:left;
	border-bottom: 2px solid white;
	border-top: 2px solid white;
	/*overflow:hidden;*/
	
	
}

nav1 .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
	
	
}
nav1 .submenu li { 
  display: block; 
  
}
 
/**     Show the submenu on hover, focus     **/
nav1 li:hover  .submenu,
nav1 li:active  .submenu, 
nav1 li:focus  .submenu { 
  visibility: visible;
  height: auto;
	
}

/*nav1 > ul {
	list-style: none;
	/*margin: 0;
	padding: 0 10% 0 10%;
	display: flex;
	flex-direction: column;
	position: relative;
	text-align: center;
		
}*/

nav1 li {
	/*margin: 0.5em;*/
	padding: 0;
	font-size: 1.3em;
	flex: 1 1 0%;
	
	
		
}

nav1 a {
	display: block;
	text-decoration: none;
	font-weight: bold;
	text-align: center;
	color: white;
	transition: all .10s ease-in grey;
}
.submenu li a {
	color: darkblue;
}

nav1 li[aria-current] a {
	
/*	background-color: firebrick;
	color: gold;  */
}

nav1 a:focus,
nav1 a:hover,
nav1 li[aria-current] a:focus,
nav1 li[aria-current] a:hover {
	color: darkblue;
	
}
/*     submenu navigation links      */

nav1 .submenu {
	visibility: hidden;
	height: 0;
	z-index: 1000;
}

nav1 .submenu li {
	display: block;/*inline-block*/
	 width: auto; 
	
}
/**     Show the submenu on hover, focus     **/

nav1 li:hover .submenu,
nav1 li:active .submenu,
nav1 li:focus .submenu {
	visibility: visible;
	height: auto;
	
	
}

nav1 li:focus-within .submenu {
	visibility: visible;
	height: auto;
	
}