@CHARSET "UTF-8";
/**
 * DP3.1 - CSS-Angaben für das Menü.
 */ 
@media screen, projection {

	/* Navigation */
	#dp-navigation <<* { text-align: center; margin-top: var(largespacing); padding-top: var(largespacing); border-top: 1px solid #fff; }
		> ul <<* {}
			li <<* { display: inline; }
				a { white-space: nowrap; padding: 0 var(smallspacing); display: inline-block; font-size: 14px; }
			>>
			> li.active > a, > li:hover > a{ text-decoration: underline; }
		>>
	>>
	
	#dp-sitemap <<* { }
		> ul <<* {  }
			> li <<* {  }
				a { display: inline-block; font-size: 14px; padding: 2px var(defaultspacing) 2px 0; }
				> a{ text-transform: uppercase; display: block; border-bottom: 1px solid #fff; padding-bottom: var(minspacing); margin-bottom: var(minspacing); }
			>>
			li.active > a, a:hover{ text-decoration: underline; }
		>>
	>>
	
	#mobilemenu <<* {}
		li{ font-weight: var(fontweightbold); }
		.is-subitem{ padding-left: 1em; background: rgba(255,255,255,.75); font-style: italic; font-weight: var(fontweightregular); }
		.active{ background: var(brandprimary); color: #fff; }
	>>
	
	.mobilemenuwrapper { height: 40px; margin: 21px -var(defaultspacing) 0 220px; background: var(brandprimary); position: relative; }
	.mobilemenuwrapper:before{ background-image: url(../images/menu-red-left.png); left: 0; width: 6px; height: 40px; position: absolute; top: 0; z-index: 2; content: ""; background-repeat: no-repeat; background-position: center top; }
	.mobileMenuBtn <<* { position: absolute; display: block; right: var(defaultspacing); width: 30px; height: 30px; top: 50%; -webkit-transform: translate(0,-50%); transform: translate(0,-50%); }
		span, span:before, span:after{ display: block; width: 30px; position: absolute; height: 4px; left: 0; background: #fff; -webkit-border-radius: 2px; border-radius: 2px; -webkit-transition: all .25s; transition: all .25s; }
		span{ top: 50%; margin-top: -2px; }
		span:before, span:after{ content: ""; }
		span:before{ bottom: 10px; }
		span:after{ top: 10px; }
	>>
	.mm-opened <<* {  }
		.mobileMenuBtn <<* { }
			span{ background: transparent; }
			span:before{ -webkit-transform: rotate(-45deg); -webkit-transform-origin: top right; transform: rotate(-45deg); transform-origin: top right; }
			span:after{ -webkit-transform: rotate(45deg); -webkit-transform-origin: bottom right; transform: rotate(45deg); transform-origin: bottom right; }
		>>
	>>

	#dp-mainmenu { display: none; }
	#mm-blocker{ z-index: 9999!important; }
}

@media all and (min-width: 25em){ /*400px*/
}

@media all and (min-width: 45em){ /*720px*/
}

@media all and (min-width: 60em){ /*960px*/
}

@media all and (min-width: 70em){ /*1120px*/ 
	#dp-sitemap <<* { }
		> ul <<* { display: flex; flex-wrap: wrap; }
			> li <<* { flex-grow: 1; float: left; }
			>>
		>>
	>>
	.mobilemenuwrapper{ display: none; } 
	#dp-mainmenu <<* { display: block; margin: 21px 0 0 220px; }
		/* Menu (=>Alle Ebenen) */
		ul.menu <<* { }
			li <<* { position: relative; }
				a { display: block; color: #fff; }
				a, a:before, a:after{ -webkit-transition: none; transition: none; }
			>>
			> li.active > a, > li:hover > a{ text-decoration: none; }
		>>
	
		/* Submenu (=>Alle Unterebenen) */
		ul.submenu <<* { display: none; }
			li <<* { }
				a { display: block; }
			>>
			> li.active > a, > li:hover > a{  }
		>>
		li:hover > ul.submenu{ display: block; }
		
		/* Menu Oberebene */
		ul.menu <<* { display: flex; }
			> li <<* { flex-grow: 1; float: left; }
				> a { position: relative; height: 40px; text-align: center; padding: .5em; font-weight: var(fontweightbold); line-height: 1em; background: var(brandsecondary); }
				> a:before,
				> a:after{ width: 6px; height: 40px; position: absolute; top: 0; z-index: 2; content: ""; background-repeat: no-repeat; background-position: center top; }
				> a:before{ background-image: url(../images/menu-grey-left.png); left: 0; }
				> a:after{ background-image: url(../images/menu-grey-right.png); right: 0; }
			>>
			> li.active > a, > li:hover > a{ background: var(brandprimary); }
			> li.active > a:before,
			> li:hover > a:before{ background-image: url(../images/menu-red-left.png); }
			> li.active > a:after,
			> li:hover > a:after{ background-image: url(../images/menu-red-right.png); }
		>>
		
		/* Submenu 1. Unterebene */
		ul.menuDepth1 <<* { position: absolute; top: 100%; left: 0; padding-top: 6px; }
			> li <<* {  }
				> a { background: var(brandprimary); background: rgba(228,5,24,.9);
				padding: var(minspacing) var(mediumspacing); width: 350px; }
			>>
			> li:first-child a{ padding-top: var(mediumspacing); }
			> li:last-child a{ padding-bottom: var(mediumspacing); }
			> li.active > a, > li:hover > a{ text-decoration: underline; }
		>>
		ul.menuDepth1:before,
		ul.menuDepth1:after{ position: absolute; top: 0; height: 100%; width: 56px; content: ""; display: block; }
		ul.menuDepth1:before{ right: 100%; background: url(../images/submenu-left.png) right 6px no-repeat; }
		ul.menuDepth1:after{ left: 100%; background: url(../images/submenu-right.png) left 6px no-repeat; }
		
		/* Submenu 1. Unterebene */
		ul.menuDepth2 <<* { }
			> li <<* { }
				> a { }
			>>
			> li.active > a, > li:hover > a{  }
		>>
	>>
}