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: #e6007d;
	--font-size: 1.8rem;
	--font-size-h1: calc( var(--font-size) + 0.5rem + 1.5vw );
	--font-size-h2: calc( var(--font-size) + 0.5rem + 0.8vw );
	--font-size-p: calc( var(--font-size) + 0.5rem + 1vw );
	--font-size-footer: calc( var(--font-size) - 0.5vw );
	--padding-screen-v: 80px;
	--padding-screen-h: 120px;
	--padding-mobile-v: 50px;
	--padding-mobile-h: 25px;
	--margin-p: 20px;
}

/*! 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;
	align-items: end;
	position: fixed;
	padding: var(--padding-screen-v);
	padding-bottom: 10%;
}

.left img {
	max-width: 300px;
}

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

.card {
	padding: var(--padding-screen-v) var(--padding-screen-h);
}

/* - - -  P - - - */

h1, h2 {
	font-family: 'Meta Pro Book';
	margin-bottom: calc( var(--padding-screen-v) * 0.5 );
	letter-spacing: -3px;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: calc( var(--font-size-h1) * 1 );
}

h2 {
	font-size: var(--font-size-h2);
	line-height: calc( var(--font-size-h2) * 1 )
}

p {
	font-size: var(--font-size);
	line-height: calc(var(--font-size) * 1.5);
	margin-bottom: var(--margin-p);
	hyphens: auto;
}

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

p a {
	border-bottom: 2px solid black;
	padding-bottom: 3px;
}

strong {
	font-family: 'Meta Pro Black';
	font-weight: 900;
}

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

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

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

figure {
	width: 100%;
	margin-top: calc( var(--margin-p) * 1.5 );
	margin-bottom: calc( var(--margin-p) * 1.5 );
}

figure img {
	border-radius: 4px;
	width: 100%;
	display: block;
}

figure figcaption {
	display: block;
	margin-top: var(--margin-p);
}

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

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--padding-mobile-v);
}

footer .logo-csp {
	text-align: right;
}

footer p {
	font-size: var(--font-size-footer);
	line-height: calc( var(--font-size-footer) * 1.25 );
}

footer a {
	border-bottom: 0;
}

.sprechblase {
	margin-bottom: var(--margin-p);
	width: 50%;
	min-width: 300px;
}

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

	:root {
		--font-size: 1.5rem;
	}

	body {
		flex-direction: column;
	}

	.left {
		min-height: 100vh;
		padding: calc( var(--padding-mobile-v) * 2 ) var(--padding-mobile-h);
	}

	.left,
	.right {
		position: relative;
		left: auto;
		width: 100vw;
	}

	h1, h2 {
		letter-spacing: -2px;
		margin-bottom: calc( var(--padding-mobile-v) * 0.5 );
	}

}

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

	.left {
		padding-bottom: 40%;
	}

	.left img {
		width: 60%;
	}

	.card {
		padding: var(--padding-mobile-v) var(--padding-mobile-h);
	}

	.sprechblase {
		width: 75%;
	}

	footer {
		display: grid;
		grid-template-columns: 1fr;
	}

	footer .logo-csp {
		text-align: left;
	}

}