/**
 * @author Jonas Zieher, Valentin Alisch <hallo@valentinalisch.de>
 * @version 1.0
 *
 * Koeber_La View: Startseite
 */

.view-startseite {
	/*background: var( --off_white );*/
	overflow: initial;
	transition: background 0.5s ease-in-out;
}

.view-startseite:not( .loader--finished ) {
	background: var( --off_white );
	overflow: initial;
}

.view-startseite main,
.view-startseite #journal,
.view-startseite footer#footer {
	background: var( --off_white );
	position: relative;
	z-index: 50;
}

/*.view-startseite main#startseite {
	margin-bottom: calc( var( --header_height ) * -1 );
}*/

.view-startseite footer#footer {
	margin-top: 0;
}

.view-startseite .intro {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	.view-startseite .intro .image,
	.view-startseite .intro video {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		height: 100vh;
	}



.view-startseite #startseite__loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 100;

	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --off_white );
	opacity: 1;
	pointer-events: all;

	transition: opacity 0.5s ease-in-out;
}

.view-startseite.loader--finished #startseite__loader {
	opacity: 0;
	pointer-events: none;
}

	.view-startseite #startseite__loader_video {
		--width: 15vh;

		width: var( --width );
		height: calc( var( --width ) * 1.0666666667 );
		margin-top: calc( var( --width ) * 0.2166666667 );
		margin-left: calc( var( --width ) * -0.08333333333 );
		mix-blend-mode: darken;
	}

	@media ( min-aspect-ratio: 16/10 ) {
		.view-startseite #startseite__loader_video {
			--width: 9.25vw;
		}
	}

		.view-startseite #startseite__loader_video video {
			-webkit-transform: rotate( 3deg );
			-moz-transform: rotate( 3deg );
			transform: rotate( 3deg );
		}



.view-startseite #startseite__intro {
	position: relative;
	z-index: 40;
	/*display: flex;
	justify-content: center;*/
	overflow: hidden;
	cursor: pointer;
}

	.view-startseite #startseite__intro-push {
		height: 100vh;
		width: 100%;
	}

	.view-startseite #startseite__intro_image {
		min-width: 100vw;
		height: 100vh;
		display: flex;
		position: fixed;
		top: 0;
	}

	/*@supports ( -webkit-touch-callout: none ) {
		.view-startseite #startseite__intro-push,
		.view-startseite #startseite__intro_image {
			height: -webkit-fill-available;
		}
	}*/

		.view-startseite #startseite__intro #startseite__intro_image svg {
			width: 100%;
			height: 100%;
		}

			.view-startseite #startseite__intro #startseite__intro_image svg path {
				fill: var( --off_white );
			}