@CHARSET "UTF-8";
/**
 * Menüs
 */ 

#dp-footernav <<* {  }
	ul{  }
	li + li{ margin-top: .25rem; padding-top: .25rem; border-top: 1px solid rgba(255,255,255,.15); }
	a{ display: block; }
	a:hover{ opacity: .666; }
	li.active > a{ text-decoration: underline; }
>>

/* Mobile Menu */
#dp-mobilemenu <<* { display: none; background: #fff; }
	li{ position: relative; }
	a{ font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweightalt);  }
	a, .append-submenu{ display: block; padding: var(--smallspacing) 1rem; }
	.append-submenu <<* { pointer-events: none; display: none; position: absolute; top: 0; right: 0; width: 3rem; text-align: center; border-left: 1px solid rgba(0,0,0,.15); }
		svg{ vertical-align: middle; height: 1em; transform: rotate(0); transition: all .25s; display: inline-block; color: inherit; }
	>>
	li.has-submenu <<* {  }
		> .append-submenu{ display: block; }
	>>
	li.dropdownOpen <<* {  }
		> .append-submenu svg{ transform: rotate(180deg); }
		> ul{ display: block!important; }
	>>
	> ul <<* { border-bottom: 1px solid rgba(0,0,0,.15); }
		> li <<* { border-top: 1px solid rgba(0,0,0,.15); }
			> a{ text-transform: uppercase; color: var(--fontcolor); }
		>>
		> li.active > a, > li > a:active <<* {
			color: #fff; background: var(--linkcolor);
		}
			& + .append-submenu > svg{ color: #fff; }
		>>
	>>
	ul.submenu <<* { display: none; background: var(--lightgrey); }
		li <<* { border-top: 1px solid rgba(0,0,0,.1); font-size: .875em; }
			> a{ color: var(--fontcolor); }
		>>
		> li.active > a, > li > a:active <<* {
			color:var(--fontcolor); background: rgba(0,0,0,.1);
		}
			& + .append-submenu > svg{ color: var(--fontcolor); }
		>>
		ul.submenu{ background: rgba(0,0,0,.05); }
	>>
>>

/* Mobile Menu Button */
#dp-mobilemenubtn <<* {
	display: inline-block; width: 30px; height: 25px; position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-moz-tap-highlight-color: rgba(0, 0, 0, 0);
}
	span, span:before, span:after{ display: block; width: 100%; position: absolute; height: 2px; left: 0; background: var(--linkcolor); border-radius: 1px; transition: all .25s; }
	span{ top: 50%; margin-top: -1px; }
	span:before, span:after{ content: ""; }
	span:before{ bottom: 7px; }
	span:after{ top: 7px; }
	&:hover <<* {}
		span:before{ bottom: 10px; }
		span:after{ top: 10px; }
	>>
>>
body.mobilemenu-active <<* {}
	#dp-mobilemenubtn <<* {}
		span{ background: transparent; }
		span:before{ bottom: 0; transform: rotate(-45deg); transform-origin: 50% 50%; }
		span:after{ top: 0; transform: rotate(45deg); transform-origin: 50% 50%; }
	>>
	#dp-mobilemenu { display: block; }
>>

/* Desktop Menu */
.menu-wrapper{ display: none; background: var(--brandprimary) url(../images/contentbg-ally.png) center top no-repeat; background-size: cover; }
.menu-wrapper .navbar-button <<* { display: flex; color: #fff; padding: 5px; }
	svg{ width: 1rem; height: 1rem; }
	&:hover{ color: #fff; }
>>
#dp-mainmenu <<* { display: none; }
	li{ position: relative; }
	a{ display: block; font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweightalt);  }
	.append-submenu <<* { position: absolute; pointer-events: none; display: none; }
		svg{ height: 1em; width: 1em; color: inherit; transform: scale(.75); }
	>>
	
	/* Oberste Ebene */
	ul.menu <<* { display: flex; margin-left: 120px; gap: 2.25rem; }
		> li <<* {  }
			> a, > .append-submenu{ text-transform: uppercase; color: #fff; font-size: .925rem; padding: 1.25rem .25rem; line-height: 1rem; }
			> a::after{ background: transparent; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; transition: background .25s; }
		>>
		> li.active, > li:hover, > li.dropdownOpen <<*  {}
			> a, > .append-submenu{ color: #fff; }
			> a::after{ background: #fff; }
		>>
		> li.has-submenu <<* {}
			> a{ text-indent: 1.25rem; /*Platz für das Icon*/ }
			> .append-submenu{ display: flex; left: 0; top: 0; }
		>>
	>>

	/* Alle Unterebenen */
	ul.submenu <<* {
		display: block; width: 280px; background: var(--linkcolor)!important; box-shadow: 0 0 3px 0 rgba(0,0,0,.05);
		opacity: 0; visibility: hidden; transition: opacity .5s; position: absolute; top: -100vh; left: -100vw; z-index: 5;
	}
		li <<* {  }
			> a{ padding-right: 3rem; }
			> .append-submenu{ display: flex; right: 0; top: 0; transform: rotate(-90deg); margin-top: 3px; color: #fff; }
			> a, > .append-submenu{ color: #fff; line-height: 1.25em; font-size: .875rem; padding: .75rem 1.25rem; }
		>>
		> li.active, > li:hover, > li.dropdownOpen <<*  {}
			> a{ background: var(--linkhover); }
			> a, > .append-submenu svg{ color: #fff; }
		>>
	>>
	
	/* Allgemeiner Hover */
	li:hover, li.dropdownOpen <<* {  }
		> ul{ opacity: 1; visibility: visible; }
		ul.menuDepth1{ top: 100%; left: 0; }
		ul.menuDepth2{ top: 0; left: 100%; }
	>>
	li.last:hover > ul.menuDepth1,
	li.last.dropdownOpen > ul.menuDepth1{ left: auto; right: 0; }
	li.last:hover > ul.menuDepth1 ul.menuDepth2,
	li.last.dropdownOpen > ul.menuDepth1 ul.menuDepth2{ left: auto; right: 100%; }
>>

@media all and (min-width: var(--breakpoint-menu)){
	#dp-mobilemenubtn, #dp-mobilemenu{ display: none !important; }
	#dp-mainmenu{ display: block !important; }
	.menu-wrapper{ display: block !important; }
}