:root {
	--gutter: 5vw;
	--spacing: 20px;

	--logo-height: 128px;
	--col-base: 8.33%;

	--ease: cubic-bezier(0.84, 0.01, 0.16, 0.99); /* custom */
	--ease-out: cubic-bezier(0.08, 0.795, 0, 1); /* custom */

	--color-fond-light: #eef4f2;
	--color-fond-medium: #d3e5df;
	--color-fond-dark: #b1cac2;
	--color-accent: #64d5b3;
	--color-spot-light: #5c827a;
	--color-spot-medium: #35494a;
	--color-gold: #f0c19a;
}

/*
*/

button {
	cursor: pointer;
	font-size: 1.8rem;
	color: color-mix(in srgb, var(--color-fore) 50%, transparent);
	padding: 0.5em 0.75em;
	background-color: transparent;
	border-radius: 10px;
	border: 2px solid color-mix(in srgb, var(--color-fore) 30%, transparent);

	transition: all 0.2s ease-in-out;
}

button:hover {
		color: color-mix(in srgb, var(--color-fore) 100%, transparent);
		border: 2px solid color-mix(in srgb, var(--color-fore) 50%, transparent);
	}

main {
	width: 100vw;
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
	padding: 0 var(--gutter);
}

.col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.col.span-1 {
		grid-column: span 1;
	}

.col.span-2 {
		grid-column: span 2;
	}

.col.span-3 {
		grid-column: span 32;
	}

@font-face {
	font-family: "basiercircle";
	font-weight: bold;

	src: url("../fonts/basiercircle-bold-webfont.ttf");
}

@font-face {
	font-family: "basiercircle";
	font-weight: medium;

	src: url("../fonts/basiercircle-medium-webfont.ttf");
}

@font-face {
	font-family: "basiercircle";
	font-weight: regular;

	src: url("../fonts/basiercircle-regular-webfont.ttf");
}

@font-face {
	font-family: "PPSupplySans";
	font-weight: regular;

	src: url("../fonts/PPSupplySans-Regular.ttf");
}

html {
	font-size: 62.5%;
}

@media screen and (max-width: 639px) {

html {
		font-size: 55%
}
	}

body {
	font-size: 2rem;
	font-family: "basiercircle", sans-serif;
}

@supports (font-variation-settings: normal) {
	body {
	}
}

hr {
	border: none;
	margin-top: var(--gutter);
}

h1 {
	font-family: "PPSupplySans", sans-serif;
	line-height: 0.8em;
	font-size: 15vw;
	font-weight: 300;
	text-align: center;
}

h2 {
	font-family: "PPSupplySans", sans-serif;
	font-weight: 300;
	font-size: 3.4rem;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
	text-transform: uppercase;
}

h3 {
	font-family: "basiercircle", sans-serif;
	font-weight: 500;
	font-size: 2.2rem;
	letter-spacing: 0.02em;
	margin-bottom: 0.5em;
}

a {
	text-decoration: none;
	color: var(--color-fore);

	font-weight: 400;
	-webkit-tap-highlight-color: transparent;
}

a:hover {
		color: var(--color-fore);
	}

a:visited {
		color: var(--color-fore);
	}

ul li a {
}

p {
	font-family: "basiercircle", sans-serif;
	font-weight: 300;
	font-size: 2rem;
	line-height: 1.6em;
	margin-bottom: 0.75em;
}

@media screen and (max-width: 781px) {

p {
		hyphens: auto
}
	}

p strong {
		font-variation-settings: "wght" 640;
	}

p.center {
		text-align: center;
	}

p.fineprint {
		font-size: 1.6rem;
	}

figure.quote blockquote p {
			font-family: "PPSupplySans", sans-serif;
			font-size: 4vw;
			line-height: 1.2em;
			text-transform: uppercase;
			text-align: center;
		}

@media screen and (max-width: 781px) {

figure.quote blockquote p {
				font-size: 12vw;
				line-height: 1em
		}
			}

@media screen and (max-width: 781px) {

figure.quote {
		padding: 0 var(--gutter)
}
	}

figure.quote p.source {
		text-align: right;
		font-family: "PPSupplySans", sans-serif;
		font-size: 2rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

@media screen and (max-width: 781px) {

figure.quote p.source {
			text-align: center
	}
		}

.center {
	text-align: center;
	align-self: center;
}

.center h1, .center h2, .center h3, .center p, .center a {
		margin-left: auto;
		margin-right: auto;
	}

.flex-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.maxwidth, p, .support {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.dont-break-out {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;

	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;

	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.center-block {
	display: block;
	text-align: center;
}

.content ul {
	list-style-type: none;
}

.content ul li {
		border-top: 1px solid color-mix(in srgb, var(--color-fore) 30%, transparent);
		text-align: left;
	}

.content ul li:last-child {
			border-bottom: 1px solid color-mix(in srgb, var(--color-fore) 30%, transparent);
		}

.content ul li {
		padding: 0.5em 0;
}

#introContainer {
	position: relative;
	width: 100%;

	perspective: 1000px;
	transform-origin: 50% 20%;

	border-radius: 12px;

	overflow: hidden;
}

@media screen and (max-width: 781px) {

#introContainer {
		border-radius: 4px
}
	}

video#introVideo {
	width: 100%;
	height: auto;
	display: block;
	background: transparent;

	transform-origin: 50% 50%;
}

#flightContainer {
	max-width: 100%;

	perspective: 1000px;
	transform-origin: 50% 20%;

	border-radius: 12px;

	overflow: hidden;

	opacity: 0;
}

@media screen and (max-width: 781px) {

#flightContainer {
		height: 400px;
		border-radius: 4px
		/*aspect-ratio: 1/1;*/
}
	}

video#flightVideo {
	width: 100%;
	height: auto;
	display: block;
	background: #000;

	transform-origin: 50% 50%;
}

@media screen and (max-width: 781px) {

video#flightVideo {
		obkect-fit: cover;
		object-position: center right;
		width: 100%;
		height: 100%
}
	}

video {
	object-fit: cover;
	display: block;
}

header {
	z-index: 300;
	width: 100%;
	height: var(--logo-height);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	padding: var(--gutter);
}

@media screen and (max-width: 639px) {

#header-desktop {
		display: none
}
	}

#header-mobile {
	display: none;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	width: auto;
	max-width: 100vw;
	--logo-height: 100px;
	height: 90dvh;

	align-items: center;
	justify-content: flex-start;
	flex-direction: column;

	z-index: 1200;
}

@media screen and (max-width: 639px) {

#header-mobile {
		display: flex
}
	}

#header-placeholder {
	height: var(--logo-height);
	width: var(--logo-height);
	border: 1px solid red;
}

#burger {
	display: none;
}

#burger span {
		width: 28px;
		height: 28px;

		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;

		font-size: 0;
	}

#burger .icon-burger {
		display: block;
		background-image: url(../icons/icon-burger.svg);
	}

#burger .icon-close {
		display: none;
		background-image: url(../icons/icon-close.svg);
	}

#burger.expanded .icon-burger {
			display: none;
		}

#burger.expanded .icon-close {
			display: block;
		}

@media screen and (max-width: 639px) {

#burger {
		width: 64px;
		height: 64px;
		display: flex;
		align-items: center;
		justify-content: center;

		opacity: 0;

		position: absolute;
		z-index: 200;
		top: var(--gutter);
		right: var(--gutter)
}
	}

#main-logo {
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 0;
	background-color: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(10px);

	border-radius: 8px;

	overflow: hidden;
	white-space: nowrap; /* Keeps nav items from wrapping during expansion */
	width: var(--logo-height);
	height: var(--logo-height);
	padding: 16px;
}

#main-logo a {
		width: 63%;
		height: 100%;
		display: block;
		background-image: url(../img/mplaza-logo.svg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
	}

@media screen and (max-width: 781px) {

#main-logo {
		flex-shrink: 0;
		border-radius: 4px;
		order: 1
}
	}

#main-nav {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	z-index: 8000;

	display: flex;
	align-items: center;
	justify-content: center;
}

#main-nav ul#nav-items {
		display: flex;
		justify-content: center;
		align-items: center;

		margin: 0 auto;
		gap: 4vw;

		list-style-type: none;
	}

/* Initial State: Stacked in the center */

#main-nav ul#nav-items.is-stacked {
		display: grid;
		place-items: center;
		justify-content: center;
	}

/* Keeps the grid cell centered */

#main-nav ul#nav-items.is-stacked li {
			grid-area: 1 / 1; /* Every box sits in the exact same spot */
		}

#main-nav li.nav-item a {
			pointer-events: none;

			font-family: "basiercircle", sans-serif;
			font-weight: 300;
			font-size: 1.8rem;
			display: block;
			width: 100%;
			color: var(--color-spot-light);
		}

#main-nav li.center-dummmy {
		opacity: 0 !important;
	}

@media screen and (max-width: 781px) {

#main-nav li.center-dummmy {
			display: none
	}
		}

@media screen and (max-width: 781px) {

#main-nav {
		order: 2;
		position: relative;
		top: unset;
		left: unset;

		width: 100%;
		height: 0;

		transform: none;
		overflow: hidden;

		background-color: rgba(255, 255, 255, 1);

		border-radius: 0 0 4px 4px
}

		#main-nav ul#nav-items.is-stacked {
			display: flex;
			flex-direction: column;
			gap: 8vw;

			justify-content: center;
		} /* Keeps the grid cell centered */

			#main-nav ul#nav-items.is-stacked li a {
				font-family: "PPSupplySans", sans-serif;

				font-size: 6vw;
				text-transform: uppercase;
				letter-spacing: 0.1em;
				font-weight: 300;
				text-align: center;
			}
	}

footer {
    --color-fore: #7d7d9b;
    --color-back: #dedede;
}

.support {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.support p {
        margin: 0;
    }

@media screen and (max-width: 781px) {

.support {
        flex-direction: column
}
        .support p {
            text-align: center;
        }
    }

.legal-nav {
    text-align: center;
}

.legal-nav a {
        font-size: 1.6rem;
    }

/**/

#pixel-to-watch {
	position: absolute;
	top: var(--logo-height);
	height: 100px;
	width: 20px;
}

@media screen and (max-width: 781px) {

#pixel-to-watch {
		top: 20px;
		height: 100vh
		/*border: 1px solid red; */
}
	}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	background-color: var(--color-back);
	color: var(--color-fore);

	text-align: center;
}

@media screen and (max-width: 781px) {

#elevator {
		position: fixed;
		top: 90dvh;
		left: 50%;
		transform: translateX(-50%);

		width: 32px;
		height: 32px;

		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;

		font-size: 0;

		background-image: url(../icons/icon-scroll.svg)
}
	}

#section-1 {
	padding-top: var(--logo-height);
	min-height: 60vh;
	--color-back: var(--color-fond-medium);
	--color-fore: var(--color-spot-medium);
}

@media screen and (max-width: 781px) {

#section-1 {
		padding-top: 0;
		min-height: 100vh
}

		#section-1 .content {
			width: 100%;
			height: 100%;

			height: 100vh;
			overflow: hidden;

			padding-bottom: 5vh;

			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

#section-1 #headline {
		max-width: 100vw;
	}

#section-2 {
	padding: 24px;
	--color-back: var(--color-fond-medium);
	--color-fore: var(--color-spot-medium);

	background-image: linear-gradient(180deg, var(--color-fond-medium) 70%, var(--color-fond-dark) 70%);
}

#section-2 .content {
		width: 100%;
	}

@media screen and (max-width: 781px) {

#section-2 {
		padding: 10px;
		padding-top: 0
}
	}

#section-3 {
	min-height: 60vh;
	--color-back: var(--color-fond-dark);
	--color-fore: var(--color-spot-medium);
}

#section-3 .content {
		padding: var(--gutter);
	}

#section-4 {
	min-height: 80vh;
	--color-back: var(--color-spot-medium);
	--color-fore: var(--color-gold);
}

#section-4 .content {
		padding: var(--gutter);
	}

#headline h1 {
		font-family: "PPSupplySans", sans-serif;
		line-height: 0.8em;
		font-size: 15vw;
		font-weight: 300;
		text-align: center;
		margin-bottom: 0.1em;
	}

@media screen and (max-width: 781px) {

#headline h1 {
			font-size: 25vw
	}
		}

#headline h2 {
		margin-bottom: 40px;
	}

@media screen and (max-width: 781px) {

#headline h2 {
			font-size: 20px;
			margin-bottom: 0;

			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center
	}

			#headline h2 br {
				display: none;
			}
		}

@media screen and (max-width: 781px) {

#headline #split {
			margin: 0;
			margin-bottom: 20px
	}
		}

#headline #split .char {
			cursor: pointer;
		}

#headline #split .char.even {
			border-radius: 8px;
			line-height: 70%;
			opacity: 0;

			background-size: cover;
			background-position: center;
			width: 0;
		}

@media screen and (max-width: 781px) {

#headline #split .char.even {
				border-radius: 4px
		}
			}

#headline #split .char2 {
			background-image: url("../img/Innenhof.png");
		}

#headline #split .char4 {
			background-image: url("../img/Aussen_toelzerstrasse.jpg");
		}

#headline #split .char7 {
			background-image: url("../img/Business-Restaurant_KI_v02-2048x1152.jpg");
		}

#headline #split .char9 {
			background-image: url("../img/hivan-arvizu-soyhivan-MAnhvw0nDDY-unsplash.jpg");
		}

#headline #split .char11 {
			background-image: url("../img/thisisengineering-h6gCRTCxM7o-unsplash.jpg");
			background-position: 90% 50% !important;
		}

#headline #split .char14 {
			background-image: url("../img/priscilla-du-preez-nF8xhLMmg0c-unsplash.jpg");
		}

#headline #split .char16 {
			background-image: url("../img/julia-solonina-YCj4q9AArtk-unsplash.jpg");
			background-position: 90% 50% !important;
		}

#headline #split .char18 {
			background-image: url("../img/sandra-grunewald-EoTaEMulwCg-unsplash.jpg");
			background-position: 20% 50% !important;
		}

/**/

* {
	margin: 0;
	box-sizing: border-box;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;

	align-items: center;
	justify-content: center;

	min-height: 100vh;

	background-color: var(--color-fond-medium);
}