:root {
	--darkblue: #506ba0;
	--lightblue: #506ba022;
	--redframe: #F00;
	--schrift: #FFF;
	--overBtnbgc: #506ba0;
	--overBtnc: #FFF;
	--bgcDef: #AAA;
	--bgcNav: #CCC;
	--bgcDefBar: #AAA;
	--bgcNavBar: #CCC;
	--dnBtn: #FFF;
}


.menu * {
	margin: 0;
	padding: 0px;
}

.menu,
.menu ul,
.menu li {
    pointer-events: auto;            			/* empfängt Hover */
    background: rgba(255,255,255,0.01); 	/* unsichtbare Blockerfläche */
    position: relative;              			/* für z-index / Hover */
    z-index: 10;                   			/* über anderen Elementen */
}


/* Overlay, das alles blockiert */
.menu.open::before {
    content: "";
    background: transparent;
    pointer-events: auto;
    z-index: 9;
}

.menu.open {
    position: relative;
    z-index: 10;
}

/*-- Hauptmenü --*/ 
.menu {
	float: left;
	width: 15%;
	font-family: Verdana;
	font-size: 14px;
	font-weight: normal;
	padding: 1px;
	padding-left: 5px;
	border-radius: 10px;
}

/*-- Format Submenu --*/ 
.menu ul {
	float: left;
	line-height: 1.6;
	list-style-type: none;	
	background-color: var(--darkblue);
	padding-left: 3px;
	padding-right: 13px;
	border-radius: 10px;
}

.OptionText {
	padding-left: 5px;
	margin-left: 5px;
}

.HasSubMenu {
	text-align: right;
	padding-right: 2px;
}

.bgrLeft {
	text-align: left;
}
	
.menu li {
	position: relative;
	width: 98%;
	margin-left: 5px;
}


.menuopt {
	display: flex;
	justify-content: space-between;
	width: 120%;
	white-space: nowrap;	
	background-color: var(--darkblue);
	color:  var(--schrift);
	padding: 4px;
	padding-left: 3px;
	border-radius: 5px;
	/*transition-delay: 0.5s;*/
}

.menuopt:hover {
	background-color: var(--schrift);
	color: var(--darkblue);
	cursor: pointer;
}

/* 2-te Ebene: Menu unsichtbar */
.menu ul ul {
	position: absolute;
	top: 30px;
	z-index: 2;
	display: none;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

/* Submenu zeigen bei hover */
.menu ul li:hover ul {
	display: block;
	animation: FadeIn 1s;
}

/* 3. Ebene unsichtbar */ 
.menu ul li:hover ul ul { 
	display: none; 
	animation: FadeOut .6s;
}

/* 3. Ebene bei hover auf 2-ter Ebene zeigen */ 
.menu ul ul li:hover ul {
	display: block; 
	position: absolute;
	top: 0; 
	left: 100%;
	animation: FadeIn .6s;
}

/* 3. Ebene unsichtbar */
.menu ul ul ul {
	position: absolute;
	display: none;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}


/* 4. Ebene unsichtbar */ 
.menu ul ul li:hover ul ul { 
	animation: FadeOut .6s;
	display: none; 
}

/* 3. Ebene sichtbar bei hover */
.menu ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block;
}

/* 4. Ebene bei hover zeigen */ 
.menu ul ul ul li:hover ul { 
	animation: FadeIn .6s;
	display: block; 
	position: absolute;
	top: 0; 
	left: 100%;
}


/* 4-te Ebene unsichtbar */
.menu ul ul ul ul {
	position: absolute;
	display: none;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

/* 5. Ebene unsichtbar */ 
.menu ul ul ul li:hover ul ul { 
	animation: FadeOut .6s;
	display: none; 
}

/* 4. Ebene sichtbar bei hover der dritten */
.menu ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block;
}

/* 5. Ebene sichtbar bei hover der vierten */ 
.menu ul ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block; 
	position: absolute;
	top: 0; 
	left: 100%;
}

/* 5-te Ebene */
.menu ul ul ul ul ul {
	position: absolute;
	display: none;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.menu ul ul ul ul li:hover ul ul { 
	animation: FadeOut .6s;
	display: none; 
}

.menu ul ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block;
}

.menu ul ul ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block; 
	position: absolute;
	top: 0; 
	left: 100%;
}

/* 6-te Ebene: */
.menu ul ul ul ul ul ul {
	position: absolute;
	display: none;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

.menu ul ul ul ul ul li:hover ul ul { 
	animation: FadeOut .6s;
	display: none; 
}

.menu ul ul ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block;
}

.menu ul ul ul ul ul ul li:hover ul {
	animation: FadeIn .6s;
	display: block; 
	position: absolute;
	top: 0; 
	left: 100%;
}


/* -- Actions im ALT-Key-Menu --*/
#MenuActions {
	background-color: var(--darkblue);
	color: var(--schrift);
	padding: 5px;
	border: 1px solid #AAA;
	z-index: 4;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

#MenuActions > a {
	background-color: var(--schrift);
	color: var(--darkblue);
}

#MenuActions > a:hover {
	background-color: var(--darkblue);
	color: var(--schrift);
}