/* Variablen */
:root {
	/* Farben: Blau */
	--color-blue-dark: #074a81;
	--color-blue-main: #1970b7;
	--color-blue-light: #299fff;
	/* Farben: Orange */
	--color-orange-dark: #b23d1d;
	--color-orange-medium: #f1b346;
	--color-orange-light: #fbe1aa;
	/* Farben: Grau */
	--color-grey-dark: #404040;
	--color-grey-medium: #8d8d8d;
	--color-grey-light: #d1d1d1;
}

/* Fonts: Überschriften */
@font-face {
	font-family: 'headline';
	src: url('/webfonts/exo/exo-black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'headline';
	src: url('/webfonts/exo/exo-light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
}

/* Fonts: Fließtext */
@font-face {
	font-family: 'body';
	src: url('/webfonts/exo/exo-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'body';
	src: url('/webfonts/exo/exo-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

/* Common */
body {
	position: relative;
	font-family: "body";
	font-weight: 400;
	font-size: 18px;
}

strong {
	font-weight: 700;
}

p {
	/*text-align: justify;*/
}

img {
	width: 100%;
}

/* Links */
a, a:hover, a:focus, .button, .button:hover {
	font-weight: 600;
	transition: all 0.3s ease;
	text-decoration: none;
}

/* Headlines */
h1, h2, h3 {
	font-family: "headline";
	font-weight: 900;
	line-height: 1;
	hyphens: manual;
	-webkit-hyphens: manual;
}

h1 span.alt, h2 span.alt, h3 span.alt {
	font-weight: 300;
}

h1 span.style1 {
	color: var(--color-blue-light);
}
h1 span.style2 {
	color: var(--color-grey-light);
}
h1 span.style3 {
	color: var(--color-blue-light);
}

h1 {
	font-size: 64px;
}

h2 {
	font-size: 40px;
}

h3 {
	font-size: 36px;
}

/* Loader */
#app {
	overflow: hidden;
}

/* Loader */
#app > .loader {
	height: 100vh;
	font-size: 64px;
	text-align: center;
	background-size: cover;
	color: #ffffff;
	transition: all 1s;
}

#app > .loader img {
	margin-bottom: 50px;
}

.modal-content {
	backdrop-filter: blur(25px) saturate(2);
	-webkit-backdrop-filter: blur(25px) saturate(2);
	background: #074a8180;
	color: #ffffff
}

/* Misc */
#blazor-error-ui {
	display: none;
}