/*********/
/* Config */
/*********/

:root {
	--red: #cb171f;
}

/*********/
/* RESET */
/*********/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
em, i {
	font-style: italic;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

ins {
	background-color: #ff9;
	color: #000;
	text-decoration: none;
}

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: 700;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

input, select {
	vertical-align: middle;
}

body {
	font: 13px/1.231 sans-serif;
}

pre, code, kbd, samp {
	font-family: monospace, sans-serif;
}

a:hover, a:active {
	outline: none;
}

ul, ol {
	margin-left: 2em;
}

ol {
	list-style-type: decimal;
}

nav ul, nav li {
	margin: 0;
	list-style: none;
	list-style-image: none;
}

small {
	font-size: 85%;
}

.small {
	font-size: 85%;
}

strong, th {
	font-weight: 700;
}

td {
	vertical-align: top;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
}

sup {
	top:-.5em;
}

sub {
	bottom:-.25em;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
	padding: 15px;
}

textarea {
	overflow: auto;
}

.ie6 legend, .ie7 legend {
	margin-left:-7px;
}

input[type="radio"] {
	vertical-align: text-bottom;
}

input[type="checkbox"] {
	vertical-align: bottom;
}

.ie7 input[type="checkbox"] {
	vertical-align: baseline;
}

.ie6 input {
	vertical-align: text-bottom;
}

label, input[type="button"], input[type="submit"], input[type="image"], button {
	cursor: pointer;
}

button, input, select, textarea {
	margin: 0;
}

input:valid, textarea:valid {
}

input:invalid, textarea:invalid {
	border-radius: 1px;
	-moz-box-shadow: 0 0 5px red;
	-webkit-box-shadow: 0 0 5px red;
	box-shadow: 0 0 5px red;
}

.no-boxshadow input:invalid, .no-boxshadow textarea:invalid {
	background-color: #f0dddd;
}

::-moz-selection {
	background: var(--red);
	color: #fff;
	text-shadow: none;
}

::selection {
	background: var(--red);
	color: #fff;
	text-shadow: none;
}

button {
	width: auto;
	overflow: visible;
}

.ie7 img {
	-ms-interpolation-mode: bicubic;
}

body, select, input, textarea {
	color: #444;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

a, a:active, a:visited {
	color: #607890;
}

a:hover {
	color: #036;
}

input:required, input:invalid {
	box-shadow: none;
}

* {
	text-size-adjust: none;
}

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hide {
	display: none;
}

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

/********/
/* MAIN */
/********/

@font-face {
	font-family: 'OstrichSansMedium';
	src: url(../fonts/ostrich-regular-webfont.eot);
	src: url(../fonts/ostrich-regular-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/ostrich-regular-webfont.woff) format("woff"), url(../fonts/ostrich-regular-webfont.ttf) format("truetype"), url(../fonts/ostrich-regular-webfont.svg#OstrichSansMedium) format("svg");
	font-weight: 400;
	font-style: normal;
}

* {
	-webkit-text-size-adjust: none;
}

a, a:active, a:visited, a:hover {
	color: var(--red);
}

.eml,
.ph,
a.top,
a[target="_blank"] {
	--size: 1.1rem;
	&:before,
	&:after {
		width: var(--size);
		height: var(--size);
		display: inline-block;
		background-size: calc(var(--size) - 4px) calc(var(--size) - 4px);
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	display: inline-flex;
}
a.top {
	float: right;
}

a[target="_blank"]:after {
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cb171f"><path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z" /></svg>');
	background-size: calc(var(--size) - 5px) calc(var(--size) - 5px);
}
.eml:before {
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" /></svg>');
}
.ph:before {
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" /></svg>');
}
.top:before {
	--size: 1.1rem !important;
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23cb171f"><path d="M19,3H5A2,2 0 0,0 3,5V19C3,20.11 3.9,21 5,21H19C20.11,21 21,20.11 21,19V5A2,2 0 0,0 19,3M19,19H5V5H19V19M16.59,15.71L12,11.12L7.41,15.71L6,14.29L12,8.29L18,14.29L16.59,15.71Z" /></svg>');
}

a:hover {
	text-decoration: none;
}

html {
	overflow: hidden;
	height: 100vh;
}

body {
	font-size: 1em;
	margin: 0;
	overflow: scroll;
	height: 100vh;
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
}

main, main + section {
	scroll-snap-align: start;
}

body, main {
	min-height: 100vh;
	font-family: 'Open Sans', sans-serif;
}

main {
	background: linear-gradient(
		#22262B,
		#31363E calc(100% - 4px),
		var(--red) calc(100% - 4px),
		var(--red) 100%
	);

	--size: 245px;
	--padding: 35px;

	> h1 {
		padding-top: 40px;
		font-family: 'Oswald',sans-serif;
		color: white;
		line-height: calc(var(--padding) - var(--border));
		font-size: 1.3rem;
	}

	.bg {
		background-image: url(../img/main.png);
		background-position: 50% 50%;
		background-size: 450px;
		@media (max-width: 450px) {
			background-size: 100%;
		}
		background-repeat: no-repeat;

		width: 100%;
		padding-top: var(--padding);
		height: calc(var(--size) - (2 * var(--padding)));
	}

	.qr {

		--triangle: 7px;
		--border: 5px;
		--radius: 11px;

		width: calc(var(--size) - (2 * var(--border)));
		height: calc(var(--size) - (2 * var(--border)));
		padding-bottom: var(--padding);
		&, * {
			border-radius: calc(var(--radius) / 2 + 1px);
		}
		background-color: white;
		position: relative;
		z-index: 1;

		&::before {
			content: "";
			position: absolute;
			top: calc(-1 * var(--border));
			left: calc(-1 * var(--border));
			background-color: var(--red);
			border-radius: var(--radius);
			width: var(--size);
			height: calc(var(--size) + var(--padding));
			z-index: -1;
			filter: drop-shadow(0 0 10px rgba(0,0,0,0.16));
		}

		&::after {
			content: "";
			position: absolute;
			bottom: var(--padding);
			left: calc(50% - var(--triangle));
			width: 0;
			height: 0;
			-webkit-transform:rotate(360deg);
			border-style: solid;
			border-width: 0 var(--triangle) var(--triangle) var(--triangle);
			border-color: transparent transparent var(--red) transparent;
		}

		img {
			width: 100%;
			height: 100%;
		}

		span, h1 {
			font-family: 'Oswald',sans-serif;
			color: white;
			line-height: calc(var(--padding) - var(--border));
			font-size: 1.1rem;
		}
	}

	header {
		position: absolute;
		right: 10px;
		top: 10px;

		a {
			--bg-width: 16px;
			--bg-height: 11px;

			display: block;
			width: var(--bg-width);
			height: var(--bg-height);

			background-size: var(--bg-width) var(--bg-height);
			background-position: 50% 50%;
			background-repeat: no-repeat;

			border-radius: 2px;

			&.de {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="600" viewBox="0 0 5 3"><rect width="5" height="3" y="0" x="0" fill="%23000"/><rect width="5" height="2" y="1" x="0" fill="%23D00"/><rect width="5" height="1" y="2" x="0" fill="%23FFCE00"/></svg>');
			}

			&.de.active {
				display:none;
			}

			&.en {
				background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 30" width="1000" height="600"><clipPath id="t"><path d="M25,15h25v15zv15h-25zh-25v-15zv-15h25z"/></clipPath><path d="M0,0v30h50v-30z" fill="%23012169"/><path d="M0,0 50,30M50,0 0,30" stroke="%23fff" stroke-width="6"/><path d="M0,0 50,30M50,0 0,30" clip-path="url(%23t)" stroke="%23C8102E" stroke-width="4"/><path d="M-1 11h22v-12h8v12h22v8h-22v12h-8v-12h-22z" fill="%23C8102E" stroke="%23FFF" stroke-width="2"/></svg>');
			}

			&.en.active {
				display:none;
			}

		}
	}

	footer {
		font-size: .95rem;

		a, a:active, a:visited, a:hover {
			font-family: 'Oswald',sans-serif;
			color: white;
			margin: 0 10px;
		}
		.mbr {
			color: white;
		}
		padding-top: 0;
	}
}

section {
	h2 {
		font-family: 'Oswald',sans-serif;
		font-size: 1.5rem;
		text-transform: uppercase;
		padding-bottom: 10px;

		~ h2 {
			margin-top: 20px;
		}
	}
	h3 {
		font-family: 'Oswald',sans-serif;
		font-size: 1.2rem;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	h4 {
		font-family: 'Oswald',sans-serif;
		font-size: 1.2rem;
		padding-bottom: 10px;
	}
	h5 {
		font-family: 'Oswald',sans-serif;
		font-size: 1rem;
		padding-bottom: 10px;
	}
	h3, h4, h5 {
		text-align: left;
	}
	p {
		padding: 0 0 10px 0;
		text-align: justify;

		&.center {
			text-align: center;
		}
		b {
			font-weight: 600;
		}

		&.l {
			text-align: left !important;
		}
	}

	ul, li, p {
		&, * {
			font-family: 'Roboto', 'Open Sans', sans-serif;
			font-weight: 300;
			font-size: .85rem;
			line-height: 1.1rem;
		}
	}

	ul, li {
		text-align: left;
		padding: 0;
	}
	li {
		padding: 5px 0;
	}
	ul:has(+ p) {
		margin-bottom: 10px;
	}

	@media (max-width: 992px) {
		h3:has(+ .m),
		.m {
			.mbr {
				opacity: 0;
				display: block;
				overflow: hidden;
				height: 0;
			}
			flex-direction: column;
			align-items: center;
			text-align: center;
		}
	}

	padding: 20px 10%;
	text-align: center;

	max-width: 768px;
	margin: 0 auto;
}

.flex .mbr {
	padding-left: 5px;
	padding-right: 5px;
}

.source {
	text-align: center;
	font-size: .75rem;
	font-weight: 300;
	padding-bottom: 30px;
}