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

body {
	--background-color: var( --white );
	--background-off-color: var( --off-white );
	--shadow-color: rgba( 0, 0, 0, 0.25 );
	--shadow-color--darker: rgba( 0, 0, 0, 0.35 );



	/* ---------- */
	--mood-blur: 3em;
	--mood-filter: blur( var( --mood-blur ) ) saturate( 1.5 );
	--mood-background: transparent;

	--preview-filter: saturate( 1.25 ) contrast( 1.25 );
	--preview-background: rgba( 255, 255, 255, 0.4 );

	--glass-filter: none;
	--glass-color: var( --background-color );
	--glass-background: var( --text-color );

	--glass-color: var( --text-color );
	--glass-background: var( --background-color );

	--header-filter: blur( calc( var( --mood-blur ) * 0.5 ) );
	--header-background: rgba( 0, 0, 0, 0.1 );
	--slider-background: rgba( 0, 0, 0, 0.2 );

	--overlay-filter: var( --header-filter );
	--overlay-background: var( --header-background );

	--content-width: 100vw;
	--max-content-width: 1750px;



	/* ---------- */
	--h-sp: 20px;
	--v-sp: calc( var( --one-line--regular ) * 0.8 );

	--section-sp: calc( var( --v-sp ) * 7 );
	--content-section-sp: calc( var( --v-sp ) * 3 );
	--main-sp: calc( var( --v-sp ) * 5 );
	--col-sp: calc( var( --one-line ) * 1 );
	--nav-sp: calc( var( --box-vertical-padding ) * 0.25 ); 

	--caption-sp: var( --v-sp );

	--grid-vertical-spacing: 0px;
	--grid-horizontal-spacing: var( --h-sp );

	--border-width: 1px;
	--border-radius: 1.035em; 
	--box-shadow: 0px calc( var( --v-sp ) * 0.1 ) calc( var( --v-sp ) * 0.25 ) var( --shadow-color );

	--box-sp: 0px;
	--box-border-radius--default: 0;
	--box-border-radius--floating: calc( var( --v-sp ) * 0.25 );
	--box-vertical-padding: max( var( --component-sp ), calc( var( --h-sp ) * 0.5 ) );
	--box-horizontal-padding: max( var( --component-sp ), calc( var( --h-sp ) * 0.5 ) );

	--cc-vertical-padding: max( var( --component-sp ), calc( var( --h-sp ) * 0.5 ) );
	--cc-horizontal-padding: max( var( --component-sp ), calc( var( --h-sp ) * 0.5 ) );

	--series-aspect: calc( 3 / 2 );



	/* ---------- */
	display: flex;
	flex-direction: column;
	background-color: var( --background-color );
}

* {
	--component-sp: calc( var( --one-line ) * 1 );
}



.is-dark-mode,
.style--eclat {
	--background-color: rgb( 35, 35, 35 );
	--background-off-color: rgb( 48, 48, 48 );
	--shadow-color: rgba( 0, 0, 0, 0.6 );
	--shadow-color--darker: rgba( 0, 0, 0, 0.7 );
	--shadow-color--darkest: rgba( 0, 0, 0, 0.8 );

	/* ---------- */
	--mood-filter: blur( var( --mood-blur ) ) saturate( 1.75 ) brightness( 0.8 );
	--preview-filter: saturate( 1.5 ) contrast( 0.75 );
	--preview-background: rgba( 0, 0, 0, 0.2 );

	--header-background: rgba( 0, 0, 0, 0.25 );
	--overlay-background: rgba( 0, 0, 0, 0.5 );

	--box-shadow: 0px calc( var( --v-sp ) * 0.08 ) calc( var( --v-sp ) * 0.25 ) var( --shadow-color--darkest );
}



.style--eclat,
.material,
.linked-content[data-type="konzert"],
.linked-content[data-type="aktuell"] {
	--box-sp: calc( var( --box-vertical-padding ) * 0.5 );
	--box-border-radius--default: 1em;
}



.style--nvs {
	--grayscale-transition-duration: 1s;
	--grayscale-transition-easing: cubic-bezier( 0.16, 1, 0.3, 1 );
}



main {
	padding: 0 var( --h-sp );
	overflow: hidden;
}

section:not( :last-child ),
.section:not( :last-child ) {
	margin-bottom: var( --section-sp );
}



#helper {
	position: absolute;
	top: 0;
	left: 0;

	pointer-events: none;
	opacity: 0;
}



.title {}



.intro:not( :first-child ),
.boarding-step__message:not( :first-child ) {
	margin-top: var( --v-sp );
}

.intro:not( :last-child ) {
	margin-bottom: var( --content-section-sp );
}



.content:not( :first-child ),

.boarding-step__input:not( :first-child ),
.boarding-step__button:not( :first-child ) {
	margin-top: calc( var( --v-sp ) * 2 );
}



.component {
	position: relative;
	z-index: 10;
}

.component.media-stack {
	z-index: 5;
}

.component.button {
	margin-left: 50%;
	transform: translateX( -50% );
}

.component:not( .tr ):not( .is-boxed ):not( :last-child ) {
	margin-bottom: var( --component-sp );
}

*:not( .tr ) + .component.tr,
*:not( .headline ) + .component.logo-stack.display-boxes,
/**:not( .headline ) + .linked-content,*/
*:not( .is-boxed ):not( .headline ) + .component.is-boxed,

.component.tr + *:not( .tr ),
.component.is-boxed + *:not( .is-boxed ),
.component.image + * {
	margin-top: calc( var( --component-sp ) * 2 );
}



.mood {
	z-index: 10;
	overflow: hidden;
}

.mood::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;

	-webkit-backdrop-filter: var( --mood-filter );
	backdrop-filter: var( --mood-filter );
	background: var( --mood-background );
}

.is-ready .mood::after {
	transition: all 1s cubic-bezier( 0.16, 1, 0.3, 1 );
}

	.mood > img {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.style--nvs .mood:not( #concert__mood ):not( #news__mood ) > img,
	.style--nvs .concert__preview > img {
		-webkit-filter: grayscale( 1 );
		-moz-filter: grayscale( 1 );
		filter: grayscale( 1 );
	}

	.style--nvs .concert__preview > img,
	.style--nvs article.news .mood > img,
	.style--nvs article.media .mood > img {
		transition: -webkit-filter var( --grayscale-transition-duration ) var( --grayscale-transition-easing ),
					-moz-filter var( --grayscale-transition-duration ) var( --grayscale-transition-easing ),
					filter var( --grayscale-transition-duration ) var( --grayscale-transition-easing )
					;
	}

	.style--nvs article.news:hover .mood > img,
	.style--nvs article.news:active .mood > img,
	.style--nvs article.media:hover .mood > img,
	.style--nvs article.media:active .mood > img,
	.style--nvs article.concert:hover .concert__preview > img,
	.style--nvs article.concert:active .concert__preview > img {
		-webkit-filter: none !important;
		-moz-filter: none !important;
		filter: none !important;
	}



/* ---------- sd ---------- */
@media ( min-width: 500px ) {

	body {
		--content-width: 83.33333vw;

		--h-sp: 25px;

		--section-sp: calc( var( --v-sp ) * 9 );
		--content-section-sp: calc( var( --v-sp ) * 3.25 );
	}
}



/* ---------- md ---------- */
@media ( min-width: 700px ) {
	
	body {
		--content-width: 100vw;

		--h-sp: 30px;

		--section-sp: calc( var( --v-sp ) * 10 );
		--content-section-sp: calc( var( --v-sp ) * 3.5 );
	}
}



/* ---------- ml ----------- */
@media ( min-width: 1000px ) {
	
	body {
		--h-sp: 35px;

		--section-sp: calc( var( --v-sp ) * 11 );
		--content-section-sp: calc( var( --v-sp ) * 3.75 );
	}
}



/* ---------- lg ----------- */
@media ( min-width: 1200px ) {

	body {
		--h-sp: 40px;

		--section-sp: calc( var( --v-sp ) * 12 );
		--content-section-sp: calc( var( --v-sp ) * 4 );
	}
}



/* ---------- ll ----------- */
@media ( min-width: 1500px ) {
	
}



/* ---------- xl ----------- */
@media ( min-width: 1800px ) {
	
}

@media ( min-width: 1820px ) {

	body {
		--content-width: 1820px;
	}
}