/* Nav */

	#nav {
		-moz-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-webkit-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		-ms-transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		transition: background-color 0.2s ease, border-top-left-radius 0.2s ease, border-top-right-radius 0.2s ease, padding 0.2s ease;
		background-color: #ffffff;
		color: #fdfdfd;
		position: absolute;
		width: 64em;
		max-width: calc(100% - 4em);
		padding: 1em;
		background-color: #58406e;
		border-top-left-radius: 0.em;
		border-top-right-radius: 0.em;
		cursor: default;
		text-align: center;
	}

		#nav input, #nav select, #nav textarea {
			color: #f1ebeb;
		}

		#nav a:hover {
			color: #ffffff;
		}

		#nav strong, #nav b {
			color: #636363;
		}

		#nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
			color: #636363;
		}

		#nav blockquote {
			border-left-color: #dddddd;
		}

		#nav code {
			background: rgba(222, 222, 222, 0.25);
			border-color: #dddddd;
		}

		#nav hr {
			border-bottom-color: #dddddd;
		}

		#nav + #main {
			padding-top: 4.25em;
		}

		#nav ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			#nav ul li {
				-moz-transition: margin 0.2s ease;
				-webkit-transition: margin 0.2s ease;
				-ms-transition: margin 0.2s ease;
				transition: margin 0.2s ease;
				display: inline-block;
				margin: 0 0.35em;
				padding: 0;
				vertical-align: middle;
			}

				#nav ul li a {
					-moz-transition: font-size 0.2s ease;
					-webkit-transition: font-size 0.2s ease;
					-ms-transition: font-size 0.2s ease;
					transition: font-size 0.2s ease;
					display: inline-block;
					height: 2.25em;
					line-height: 2.25em;
					padding: 0 1.25em;
					border: 0;
					border-radius: 8px;
					box-shadow: inset 0 0 0 1px transparent;
				}

					#nav ul li a:hover {
						background-color: rgba(207, 171, 211, 0.25);
					}

					#nav ul li a.active {
						background-color: #2621347c;
						box-shadow: none;
					}

		#nav.alt {
			position: fixed;
			top: 0;
			padding: 0.5em 1em;
			background-color: rgba(var(--r), var(--g), var(--b), 0.95);
  			transition: background-color 0.3s ease;
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			z-index: 10000;
		}

			#nav.alt ul li {
				margin: 0 0.175em;
			}

				#nav.alt ul li a {
					font-size: 0.9em;
				}

@media screen and (max-width: 480px) {

	#nav {
	max-width: calc(100% - 2em);
				
	}

  #nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    padding: 0;
  }

  #nav ul li {
    width: calc(50% - 0.5em);
    margin: 0;
    text-align: center;
	font-size: 0.9em;
  }
}



@media screen and (max-width: 480px) {

		
			

		}

		@media screen and (max-width: 360px) {

			#nav {
				max-width: 100%;
			}

			#nav ul li {
				font-size: 0.8em;
  }

		}



/*  
############################
        
        Submenu

############################          
*/

/* Submenu (versteckt) */
#nav .submenu {
  position: absolute;
  top: 95%; 
  left: 5%;
  min-width: 220px;
  margin: 8px 0 0;
  padding: 8px;
  list-style: none;
  background: #6E4B93;
  border-radius: 8px;
  box-shadow: inset 0 0 0 0.04em white;
  border: 0.1em solid #6E4B93;
  display: hidden;       /* default: verborgen */
  z-index: 1000; 
  opacity: 0;
  transform: translateY(-3%);
  transition: opacity 0.4s, transform 0.5s;
	

}

#nav .main-nav > li { 
  position: relative;
}


/* Submenu Links */
#nav .submenu a {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-right: 1em;
  height: 40px;
  line-height: 1;
  font-size: 0.9em;
  padding: 10px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #eee;
  white-space: nowrap;
  transform: translateX(0%);
  transition: transform 0.1s;
  

}
#nav .submenu a:hover,
#nav .submenu a:focus {
  background: #8363A2;
  transform: translateX(3%);
}

/* Anzeigen bei Hover oder Tastaturfokus */
#nav .has-submenu:hover > .submenu,
#nav .has-submenu:focus-within > .submenu {
  display: block;
  opacity: 1;
  transform: translateY(0%);
}


#nav .submenu li {
  display: block;      /* jedes Item in eigener Zeile */
  width: 100%;
  gap: 10px;
 transform: translateY(-5%);
  transition: opacity 0.4s, transform 0.5s;
}

#nav .has-submenu:hover > .submenu li, 
#nav .has-submenu:focus-within > .submenu li {
  opacity: 1; transform: translateY(0); 
}

#nav .has-submenu > a::after {
  content: "▾";
  display: inline-block; /* WICHTIG */
  margin-left: 6px;
  font-size: 0.85em;
  opacity: 0.8;
  transform: rotate(0deg), translateY(0%);
	transition: transform 0.5s ease;
}

#nav .has-submenu > a {
	
}

#nav .has-submenu:hover > a, 
#nav .submenu a:hover ~ a::after  {
	background-color: #765B87;
}

#nav .has-submenu:hover > a::after {
  transform: translateY(5%);
}


@media (max-width: 720px) {
#nav .submenu {
  top: 95%; 
  left: -35%;
  min-width: 120px;

}
}

/*  
############################
        
       Lang Button

############################          
*/

#nav .main-nav .lang-switch {
position: absolute;
  right: 12px;         
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 12px;
  border-radius: 6px;

  color: #fff;
  text-decoration: none;

	
}
#nav .main-nav .lang-switch a {
  padding: 0px 10px;
}

#nav .main-nav .lang-switch i {
padding: 10px;
}

#nav .main-nav .lang-switch a:hover {
  background: #6f5290;
}


/* Responsive */
@media (max-width: 720px) {
#nav .main-nav .lang-switch {
visibility: hidden;

}
}