/* Variablen */
:root {
	/* Farben: Rot */
	--color-red-light: #ff7d7a;
	--color-red-main: #cc4c49;
	--color-red-dark: #872f2d;
	/* Farben: Grau */
	--color-grey-ultralight: #e2e2e2;
	--color-grey-light: #a8a7a7;
	--color-grey-main: #333333;
	--color-grey-dark: #1d1d1b;
	/* Farben: Blau */
	--color-blue-light: #3f00f3;
	--color-blue-medium: #2e02ab;
	--color-blue-dark: #1a0064;
	/* Farben: Sonstige */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-success: #22ff00;
	--color-warning: #ffc700;
	--color-error: #ff0000;
	/* Werte */
	--value-header-height: 122px;
}

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

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

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

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

/* Common */

html {
	font-size: 85%;
}

body {
	position: relative;
	font-family: "body", serif;
	font-weight: 400;
	font-size: 1.125rem;
}

strong {
	font-weight: 700;
}

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

small {
	font-family: "headline", serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.75rem;
	display: block;
}

img {
	width: 100%;
}

hr {
	border: 1px solid;
	color: var(--color-red-main);
	opacity: 1;
}

/* Links */

a, a:hover, a:focus, .panel .index a, button, .dropdown-item {
	font-weight: 600;
	transition: all 0.3s ease;
	text-decoration: none;
}

a:not(.button):not(.no-hover) {
	display: inline-block;
	text-decoration: none;
}

a:not(.button):not(.no-hover)::after {
	content: '';
	display: block;
	width: 0;
	transition: width .3s;
	height: 2px;
}

a:not(.button):hover::after {
	width: 100% !important;
	transition: width .1s !important;
}

/* Headlines */

h1, h2, h3, h4, h5 {
	font-family: "headline", serif;
	font-weight: 900;
	line-height: 1;
	hyphens: manual;
	-webkit-hyphens: manual;
}

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

h1 span.style1, h2 span.style1, h3 span.style1, h4 span.style1, h5 span.style1 {
	color: var(--color-red-main);
}
h1 span.style2, h2 span.style2, h3 span.style2, h4 span.style2, h5 span.style2 {
	color: var(--color-blue-light);
}

h1 {
	font-size: 2.75rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

/* Loader */

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

#app > .apploader {
	height: 100vh;
}

#app > .apploader img {
	animation: apploader 2s ease forwards;
}

.modal-content {
	background-color: var(--color-red-main);
	color: var(--color-white);
}

.no-text-wrap {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block !important;
}

/* Misc */

#blazor-error-ui {
	display: none;
}