html, body, input, textarea, button, select, ul, ol, li, h1, h2, h3, a, p, hr, figure, iframe {
	background-color: transparent;
	border: 0;
	color: inherit;
	list-style: none;
	margin: 0;
	outline: none;
	padding: 0;
	text-decoration: none;
}

@font-face {
	font-family: 'Meta Pro Black';
	src: url('fonts/MetaPro-Black.eot');
	src: url('fonts/MetaPro-Black.eot?#iefix') format('embedded-opentype'),
			 url('fonts/MetaPro-Black.woff2') format('woff2'),
			 url('fonts/MetaPro-Black.woff') format('woff'),
			 url('fonts/MetaPro-Black.ttf') format('truetype'),
			 url('fonts/MetaPro-Black.svg#MetaPro-Black') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Meta Pro Book';
	src: url('fonts/MetaPro-Book.eot');
	src: url('fonts/MetaPro-Book.eot?#iefix') format('embedded-opentype'),
			 url('fonts/MetaPro-Book.woff2') format('woff2'),
			 url('fonts/MetaPro-Book.woff') format('woff'),
			 url('fonts/MetaPro-Book.ttf') format('truetype'),
			 url('fonts/MetaPro-Book.svg#MetaPro-Book') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-csp: rgb(200, 0, 140);
	--font-size: calc(1.1rem + 0.7vw);
	--font-size-h2: calc(1.2rem + 2vw);
	--font-size-slogan: calc( var(--font-size) * 1.3);
	--font-size-name: calc( var(--font-size) * 2.3);
	--lh-factor: 1.4;
}

/*! reset */

* {	box-sizing: border-box; }

body {
	align-items: center;
	font-family: 'Meta Pro Book';
	display: flex;
	flex-direction: row;
	place-items: center;
	width: 100vw;
	height: 100vh;
}

.left,
.right {
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 50vw;
}

.left {
	background-image: url(/src/img/portrait-martin-iten.jpeg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: end;
	position: fixed;
	padding: 40px 40px;
}

.right {
	position: absolute;
	left: 50vw;
}

.card {
	padding: 80px 50px;
}

/* - - -  P - - - */

h2 {
	font-family: 'Meta Pro Black';
	font-size: var(--font-size-h2);
	margin-bottom: 30px;
}

p {
	font-size: var(--font-size);
	line-height: calc(var(--font-size) * var(--lh-factor));
	margin-bottom: 40px;
	hyphens: auto;
}

p:last-child {
	margin-bottom: 0;
}

.bg-csp {
	color: white;
	background-color: var(--color-csp);
}

.color-csp {
	color: var(--color-csp);
}

.slogan {
	color: white;
	font-size: var(--font-size-slogan);
	line-height: calc( var(--font-size-slogan) * var(--lh-factor));
	text-shadow: 1px 1px 5px black;
}

.name-wrapper {
	background-color: var(--color-csp);
	display: inline-flex;
	padding: 10px 20px;
	width: fit-content;
}

.name-inner {
	justify-content: center;
	display: flex;
	color: white;
	font-family: 'Meta Pro Black';
	font-size: var(--font-size-name);
	line-height: unset;
	margin-bottom: calc( var(--font-size-name) * -0.2 );
}

.unterschrift {
	display: block;
	margin-top: -40px;
	margin-bottom: -30px;
	margin-left: -20px;
	max-height: 100px;
}

figure {
	width: 100%;
	margin-bottom: 40px;
}

figure img {
	border-radius: 4px;
	width: 100%;
	height: 400px;
	object-fit: cover;
	object-position: center;
	display: block;
}

figure figcaption {
	display: block;
	margin-top: 20px;
}

.iframe-wrapper iframe {
	width: 100%;
	display: block;
	aspect-ratio: 16 / 9;
}

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

	body {
		flex-direction: column;
	}

	.left {
		min-height: 100vh;
	}

	.left,
	.right {
		padding: 40px 0px;
		position: relative;
		left: auto;
		gap: 20px;
		width: 100vw;
	}

}

@media only screen and (max-width : 340px) {
	:root {
		--font-size: calc(1rem + 0.7vw);
	}
}