/* Variablen */
:root {
	/* Farben: Rot */
	--color-red-light: #ef7d84;
	--color-red-main: #e31e24;
	--color-red-dark: #9e080d;
	/* Farben: Blau */
	--color-blue-light: #7ccbec;
	--color-blue-main: #00a0e3;
	--color-blue-dark: #006691;
    /* Farben: Grau */
    --color-grey-ultralight: #e2e2e2;
    --color-grey-light: #a8a7a7;
    --color-grey-main: #1d1d1b;

    /* Einheitlicher Eckenradius: Bilder und Boxen groß, Buttons und Felder klein */
    --radius: 12px;
    --radius-sm: 6px;
    --color-grey-dark: #1d1d1b;
	/* Farben: Sonstige */
	--color-black: #000000;
	--color-white: #ffffff;
	/* Leicht abgesenktes Weiß – nur im Dark-Mode für Schrift verwendet */
	--color-white-dimmed: #e6e6e6;
	--color-success: #22ff00;
	--color-warning: #ffc700;
	--color-error: #ff0000;
	--color-brand-whatsapp: #25d366;
	/* Werte */
	/* Logo- und Headerhöhe wachsen mit dem Viewport – Überschreibungen
	   pro Breakpoint stehen in style.responsive.css */
	--value-header-logo-height: 40px;
	--value-header-height: 62px;
}

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

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

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

@font-face {
	font-family: 'body';
	src: url('/webfonts/oxygen/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;
}

/* 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;
}

/* Schriftgröße per Schalter im Header (Barrierefreiheit): alle Größen
   hängen an rem, deshalb reicht die Skalierung der Wurzel. */
html {
	--fs-scale: 1;
	font-size: calc(100% * var(--fs-scale));
}
html[data-fontsize="l"] { --fs-scale: 1.125; }
html[data-fontsize="xl"] { --fs-scale: 1.25; }

.button {
	border-radius: var(--radius-sm);
}