/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 4.6.6
 *
 * Mdj Component: Header
 */

#header {
	height: calc( var( --header-height, 0px ) );
	margin-bottom: var( --main-sp );
	text-align: center;
	
	z-index: 1000;
	pointer-events: none;
}

#header-inner {
	margin: 0 calc( var( --h-sp ) * -0.5 + var( --box-sp ) * 0.5 );
} 



#header__branding {
	--background-color: transparent;

	padding: var( --v-sp ) var( --v-sp );
}

.is-ready #header__branding {
	transition: opacity 0.25s linear;
}

body.has-overlay #header__branding {
	opacity: 0;
}

	#header__branding a {
		pointer-events: all;
	}

	body.has-overlay #header__branding a {
		pointer-events: none;
	}

#header__branding-inner {
	margin: 0;
}



#header__context-navigation {}

	#header__context-navigation.is-hidden .drop-down .drop-down-inner {
		width: 0px;
	}

	#header__context-navigation.is-hidden .drop-down .drop-down__indicator {
		opacity: 0;
	}



/* ------------------------- */
/* ---------- */
#header-overlay {
	--transition-duration: 0.4s; 
	--transition-easing: cubic-bezier( 0.87, 0, 0.13, 1 );

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;

	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	scrollbar-width: none;

	z-index: 1000;
	pointer-events: none;
}

#header-overlay::-webkit-scrollbar {
	display: none;
}

#header-overlay.is-active {
	--transition-duration: 0.8s;
	--transition-easing: cubic-bezier( 0.16, 1, 0.3, 1 );

	pointer-events: all;
	background: var( --header-background );
	-webkit-backdrop-filter: var( --header-filter );
	backdrop-filter: var( --header-filter );
}

#header-overlay-inner {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var( --v-sp ) var( --v-sp );
}

.is-ready #header-overlay {
	transition: all var( --transition-duration ) var( --transition-easing );
}

#header-overlay:not( .is-active ) {
	transition-delay: calc( var( --transition-duration ) * 0.125 );
}



/* ---------- */
#control-center {
	--font-color: var( --glass-color );
	--background-color: var( --glass-background );
	--box-vertical-padding: var( --cc-vertical-padding );
	--box-horizontal-padding: var( --cc-horizontal-padding );

	background: var( --background-color );
	color: var( --font-color );

	border-radius: var( --overlay-radius );
	width: calc( 100vw - var( --v-sp ) * 2 );
	margin: 0;
	max-height: 200vh; /*var( --header-overlay-max-height, 200vh );*/
}

.is-ready #control-center {
	transition: all var( --transition-duration ) var( --transition-easing );
}

#header-overlay:not( .is-active ) #control-center {
	border-radius: 0.5em;
	width: var( --header-width );
	max-height: calc( var( --header-height ) - var( --v-sp ) );
	transition-delay: calc( var( --transition-duration ) * 0.2 ); 
}

body.has-overlay #control-center {
	width: calc( var( --header-height ) - var( --v-sp ) ) !important;
}

	#control-center > *:last-child:not( #header__meta-navigation ) {
		margin-bottom: calc( var( --col-sp ) * 3 );
	}



#header__meta-navigation {
	--background-color: transparent;

	display: inline-block;
	margin: calc( var( --box-vertical-padding ) * -1 ) calc( var( --box-horizontal-padding ) * -1 ) 0;

	position: -webkit-sticky;
	position: -moz-sticky;
	position: sticky;
	top: var( --v-sp );
	z-index: 20;
}

body.is-loading #header__meta-navigation .icon--default,
body.is-loading #header__meta-navigation .icon--close,

body.has-overlay #header__meta-navigation .icon--default,

body:not( .is-loading ) #header__meta-navigation .icon--loading,
body:not( .has-overlay ) #header-overlay:not( .is-active ) #header__meta-navigation .icon--close,
#header-overlay.is-active #header__meta-navigation .icon--default {
	display: none;
}

body.has-overlay #header__meta-navigation .lang-item,
body.has-overlay #header__meta-navigation .menu-item:not( #header__meta-navigation__toggle ) {
	opacity: 0;
	pointer-events: none !important;

	max-width: 0;
	margin: 0;
}

	#header__meta-navigation .menu {
		margin: calc( var( --box-horizontal-padding ) * -0.5 );
		flex-wrap: nowrap;
	}

		#header__meta-navigation .menu .menu-item,
		#header__meta-navigation .menu .lang-item {
			--line-height: 1;

			pointer-events: all;
			line-height: 1;
			max-width: var( --header-width );
		}

		.is-ready #header__meta-navigation .menu .menu-item,
		.is-ready #header__meta-navigation .menu .lang-item {
			transition: opacity var( --transition-duration ) var( --transition-easing ), 
						max-width var( --transition-duration ) var( --transition-easing ),
						margin var( --transition-duration ) var( --transition-easing )
						;
		}

		body.is-ready:not( .has-overlay ) #header__meta-navigation .menu .menu-item,
		body.is-ready:not( .has-overlay ) #header__meta-navigation .menu .lang-item {
			transition: opacity var( --transition-duration ) var( --transition-easing ) calc( var( --transition-duration ) * 0.5 ), 
						max-width var( --transition-duration ) var( --transition-easing )calc( var( --transition-duration ) * 0.25 ),
						margin var( --transition-duration ) var( --transition-easing )calc( var( --transition-duration ) * 0.25 )
						;
		}

		#header__meta-navigation .menu .lang-item {
			display: flex;
		}

		#header__meta-navigation .menu .lang-item + .lang-item::before {
			content: '/';
			display: inline-block;
			margin: calc( var( --box-horizontal-padding ) * 0.5 ) 0.125em;
			pointer-events: none;
		}

			#header__meta-navigation .menu .menu-item a,
			#header__meta-navigation .menu .lang-item a {
				display: block;
				padding: calc( var( --box-horizontal-padding ) * 0.5 );
			}

			/*#header__meta-navigation .menu .lang-item:not( :last-child ) a {
				padding-right: 0;
			}*/

			#header__meta-navigation .menu .lang-item + .lang-item a {
				padding-left: 0;
			}



#header__meta-navigation__portal-button {
	/*margin: calc( var( --box-horizontal-padding ) * -0.5 );*/
	margin-left: 0.3em;
	background: var( --highlight-color );
	border-radius: calc( var( --font-size--regular ) * 0.25 );
}

#header__meta-navigation__portal-button:not( :last-child ) {
	margin-right: 0.3em;
}

	#header__meta-navigation__portal-button > a {
		display: flex !important;
		height: 100%;
		align-items: center;
	}



#header-overlay__branding {
	position: relative;
	z-index: 10;
}

#header-overlay__branding:not( :first-child ) {
	margin-top: calc( var( --header-height ) * -1 + var( --box-vertical-padding ) + var( --v-sp ) );
}



#header-overlay__portal-button:not( :first-child ) {
	margin-top: calc( var( --col-sp ) * 2 );
}

	#header-overlay__portal-button .button {
		--button-background: var( --highlight-color );
	}



#header-overlay__navigations {
	display: flex;
	/*flex-wrap: wrap;*/
	justify-content: center;

	margin-left: calc( var( --h-sp) * -0.5 );
	margin-right: calc( var( --h-sp ) * -0.5 );
}

#header-overlay__navigations:not( :first-child ) {
	margin-top: calc( var( --col-sp ) * 3 );
}

	#header-overlay__navigations > nav {
		text-align: left;
		margin-left: calc( var( --h-sp ) * 0.5 );
		margin-right: calc( var( --h-sp ) * 0.5 );
	}

	#header-overlay__navigations .menu-item a {
		display: block;
		line-height: 1;
		padding: calc( var( --font-size--regular ) * 0.25 ) 0;
	}



#header-overlay__calendar {
	margin: calc( var( --col-sp ) * 4 ) auto 0;
	max-width: 50em;
}

	#header-overlay__calendar .headline {
		margin-bottom: var( --col-sp );
	}

	#header-overlay__calendar .concert {
		margin-left: 0;
		margin-right: 0;
	}



#header-overlay:not( .is-active ) #header-overlay__branding,
#header-overlay:not( .is-active ) #header-overlay__portal-button,
#header-overlay:not( .is-active ) #header-overlay__navigations,
#header-overlay:not( .is-active ) #header-overlay__calendar {
	opacity: 0;
}

#header-overlay:not( .is-active ) #header-overlay__navigations,
#header-overlay:not( .is-active ) #header-overlay__portal-button,
#header-overlay:not( .is-active ) #header-overlay__calendar {
	margin-top: var( --col-sp );
}

.is-ready #header-overlay__branding,
.is-ready #header-overlay__navigations,
.is-ready #header-overlay__portal-button,
.is-ready #header-overlay__calendar {
	transition: opacity var( --transition-duration ) var( --transition-easing ),
				margin-top var( --transition-duration ) var( --transition-easing )
				;
}

#header-overlay.is-active #header-overlay__branding,
#header-overlay.is-active #header-overlay__navigations,
#header-overlay.is-active #header-overlay__portal-button,
#header-overlay.is-active #header-overlay__calendar {
	transition-delay: calc( var( --transition-duration ) * 0.125 );   
}



/* ---------- */
#header-overlay__notifications {
	margin-top: auto;

	position: -webkit-sticky;
	position: -moz-sticky;
	position: sticky;
	z-index: 20;
	bottom: 0;
}



/* ------------------------- */
@media ( max-width: 999px ) {

	#header-overlay__navigations {
		flex-direction: column;
		align-items: center;
	}

		#header-overlay__navigations .menu-item:not( :first-child ) {
			display: none;
		}

		#header-overlay__navigations .menu-item a {
			padding: calc( var( --font-size--regular ) * 0.5 ) 0;
		}
}