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

@media screen, projection {
	#dp-navigation <<* { }
		ul{ display: flex; }
		li{ margin-left: 1rem; }
		a{ text-transform: uppercase; font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweightsemibold); }
		a:hover{ opacity: .666; }
		li.active > a{ text-decoration: underline; }
	>>
	
	#dp-navigationtop <<* { margin-right: 150px; }
		ul{ display: flex; }
		li{ margin-left: 2rem; }
		a{ color: #fff; text-transform: uppercase; font-size: .825rem; font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweightsemibold); }
		li.active, li:hover <<*  {}
			> a { color: var(--brandprimary); }
		>>
	>>

	#dp-mobilemenu <<* { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: #fff; margin: 0 !important; overflow: auto; }
		.mobilemenu-header { padding: 1rem 0; }
		.mobilemenu-logo { width: 75px; display: block; padding: 0; }
		.mobilemenu-close{ padding: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--brandprimary); color: var(--fontcolor); }
		.mobilemenu-close svg{ width: 1.25rem; height: 1.25rem; margin: 0; }
	>>
	
	#dp-mobilemenubtn <<* {
		display: inline-block; width: 30px; height: 25px; position: relative;
		margin: 1.5rem 0;
		-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(--fontcolor); 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; }
		>>
	>>

	#dp-mainmenu, #dp-mobilemenu <<* { display: none; width: 100%; background: #fff; }
		li{ position: relative; }
		a{ font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweightsemibold); }
		a, .append-submenu{ display: block; padding: var(--smallspacing) 1rem; }
		.append-submenu <<* { 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.menuDepth0  <<* { }
			> li <<* { border-top: 1px solid rgba(0,0,0,.15); }
				> a{ text-transform: uppercase; font-weight: var(--fontweightbold); 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); }
		>>
	>>

	body.mobilemenu-active <<* {}
		#dp-mobilemenu { display: block!important; opacity: 0; visibility: hidden; transform: translate(0,2rem); transition: all .5s; }
		&.mobilemenu-visible #dp-mobilemenu { opacity: 1; visibility: visible; transform: translate(0,0); }
	>>
	
	/* Alternativ Menu */
	#dp-overlaymenubtn <<* {
		display: inline-block; width: 36px; height: 26px; position: relative;
		margin: 1.5rem 0;
		-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: 3px; left: 0; background: #fff; border-radius: 1px; transition: all .25s; }
		span{ top: 50%; margin-top: -1px; }
		span:before, span:after{ content: ""; }
		span:before{ bottom: 9px; }
		span:after{ top: 9px; }
		&:hover <<* {}
			span:before{ bottom: 11px; }
			span:after{ top: 11px; }
		>>
	>>
	#dp-overlaymenu <<* { width: 100%; background: var(--lightgrey); padding: 3rem 0; opacity: 0; visibility: hidden; transform: translate(0,1rem); transition: opacity .5s; position: absolute; top: -100vh; left: -100vw; box-shadow: 0 0 3px 0 rgba(0,0,0,.05); }
		li{ position: relative; }
		a{ display: block; }
		.append-submenu { display: none !important; }

		/* Oberste Ebene */
		ul.menu <<* { display: inline-flex; flex-direction: column; }
			> li + li{ margin-top: 1rem; }
			> li <<* {  }
				> a{ display: flex; justify-content: space-between; color: var(--fontcolor); text-transform: uppercase; color: var(--headlinecolor); font-family: var(--headlinefontfamily); font-weight: var(--headlinefontweight); }
				> a .inline-arrow{ margin-left: 1.25rem; }
			>>
			> li.active, > li:hover, > li.dropdownOpen <<*  {}
				> a{ color: var(--linkcolor); }
			>>
		>>

		/* Alle Unterebenen */
		ul.submenu { display: none !important; }
	>>
	body.overlaymenu-active <<* {}
		#dp-overlaymenubtn <<* {}
			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-overlaymenu { opacity: 1; visibility: visible; transform: translate(0,0); top: 100%; left: 0; }
	>>
}

@media all and (min-width: var(--breakpoint-s)){
}

@media all and (min-width: var(--breakpoint-m)){
	/* Alternativ Menu */
	#dp-overlaymenubtn <<* { height: 40px; width: 42px; }
		span, span:before, span:after{ height: 4px; }
		span:before{ bottom: 12px; }
		span:after{ top: 12px; }
		&:hover <<* {}
			span:before{ bottom: 14px; }
			span:after{ top: 14px; }
		>>
	>>
	#dp-overlaymenu <<* { padding: 6rem 0; }
		/* Oberste Ebene */
		ul.menu <<* {  }
			> li + li{ margin-top: 2rem; }
			> li <<* {  }
				> a{ font-size: 2rem; }
			>>
		>>
	>>
}

@media all and (min-width: var(--breakpoint-xl)){
	#dp-mobilemenubtn, #dp-mobilemenu, body.mobilemenu-active #dp-mobilemenu{ display: none !important; }
	
	#dp-mainmenu <<* { display: block!important; width: auto; background: none; margin: 0; border: none; }
		/* Mobile menu resets */
		ul, li, .append-submenu{ border: none!important; }
		.append-submenu{ display: none !important; }
	
		/* Alle Menüebenen */
		ul.menu <<* { }
			li <<* { position: relative; }
				a { display: block; }
			>>
			li.active > a, li:hover > a{ text-decoration: none; }
		>>
	
		/* Alle Unterebenen */
		ul.submenu <<* {
			display: block; width: 280px; transform: translate(0, .5rem); box-shadow: 0 0 3px 0 rgba(0,0,0,.05); background: none!important;
			opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s; position: absolute; top: -100vh; left: -100vw; z-index: 5;
			box-shadow: 0 0 2px 0 rgba(0,0,0,.15);
		}
			li <<* {  }
				> a { transition: none; color: var(--fontcolor); font-weight: var(--fontweightbold); line-height: 1.25em; font-size: .875rem; padding: .825rem 1.25rem; }
			>>
			li:not(:last-child){ border-bottom: 1px solid var(--grey) !important; }
			> li.active, > li:hover, > li.dropdownOpen <<*  {}
				> a { color: var(--fontcolor); background: var(--linkhover); }
			>>
		>>
		
		/* Oberste Ebene */
		ul.menu <<* { margin: 0 -.875rem 0 0; }
			> li <<* { float: left; }
				> a { color: var(--fontcolor); line-height: 1rem; font-size: 1rem; padding: 1.5rem .875rem; }
			>>
			> li.active, > li:hover, > li.dropdownOpen <<*  { background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.333) 100%);  }
				> a { color: #fff; background: none; }
			>>
			> li.has-submenu <<* {}
			>>
		>>
		
		/* 1. Unterebene */
		ul.menuDepth1 <<* {  }
			> li <<* { }
				> a { background: rgba(255,255,255,.9)!important; }
			>>
			> li.active > a, > li:hover > a{ background-image: url(../images/menu_sub_hover.png), linear-gradient(0deg, var(--brandprimary) 0%, #f9c95d 100%) !important; background-position: right center !important; background-repeat: no-repeat !important; }
			>>
			
			/* 2. Unterebene */
			ul.menuDepth2 <<* { }
			> li <<* { }
			> a { background: var(--brandprimary)E6!important; }
			>>
			> li.active > a, > li:hover > a{ background-image: url(../images/menu_sub_hover.png), linear-gradient(270deg, var(--brandprimary) 0%, #fceac2 100%) !important; background-position: right center !important; background-repeat: no-repeat !important; }
		>>
		
		/* Allgemeiner Hover */
		li:hover, li.dropdownOpen <<* {  }
			> .append-submenu svg{ transform: rotate(0); }
			> ul{ opacity: 1; visibility: visible; }
			ul.submenu <<* { top: 100%; left: 0; transform: translate(0,0); }
				ul.submenu{ top: 0; left: 100%; transform: translate(0,0); }
			>>
		>>
		li.last:hover > ul.menuDepth1,
		li.last.dropdownOpen > ul.menuDepth1{ left: auto; right: 0; }
		li.last:hover > ul.menuDepth1 > li > ul.submenu,
		li.last.dropdownOpen > ul.menuDepth1 > li > ul.submenu{ left: auto; right: 100%; }
	>>
}

@media all and (min-width: var(--breakpoint-xxl)){

	#dp-mainmenu <<* {  }
		/* Oberste Ebene */
		ul.menu <<* { margin: 0 -1.5rem 0 0; }
			> li <<* {  }
				> a { font-size: 1.175rem; padding: 1.75rem 1.5rem; }
			>>
		>>
	>>
}