menu {
  padding: 0;
  margin: 0;
	overflow-y: auto;
}

menu ul {
	list-style-type: none;
}

menu ul li {
	margin-right: 6px;
  background-color: var(--darkblue);
  color: var(--schrift);
}

menu ul li:hover {
	cursor: pointer;
  background-color: var(--schrift);
  color: var(--darkblue);
}

/* Entferne den Scrollbalken für WebKit-Browser (Chrome, Safari) */
menu::-webkit-scrollbar, .submenu::-webkit-scrollbar{
  display: none;
}
menu, .submenu {
  scrollbar-width: none; /* Firefox-spezifisch */
}
menu, .submenu {
  -ms-overflow-style: none; /* IE und Edge */
}


/* Stil für Untermenüs */
menu .submenu {
	max-height: 0;
  background-color: var(--darkblue);
  padding-left: 6px;
}

menu #mainMenu {
	margin-left: 6px;
	padding: 3px;	
}

menu .submenu li {
	margin-top: 3px;
}

menu .submenu.open {
	border: 2px var(--schrift) solid;
	max-height: 1500px;
	overflow: hidden;
	transition: max-height 3s ease-out;
}

menu li:has(> ul.submenu.open) {
  background-color: var(--schrift);
  color: var(--darkblue);
}

menu .submenu.close {
	border: 2px var(--schrift) solid;
	max-height: 0;
	overflow: hidden;
	transition: max-height 2s ease-out;
}