:root {
	/* Farben: Purpur */
	--purple-darker: #300c1f;
	--purple-dark: #981c60;
	--purple-main: #c92182;
	--purple-bright: #e6357f;
	/* Farben: Grau */
	--grey-darker: #111111;
	--grey-dark: #444444;
	--grey-main: #616160;
	--grey-bright: #c3c2c5;
	--grey-brighter: #e9ebf6;
	/* Farben: Türkis */
	--turquoise-dark: #014262;
	--turquoise-medium: 006c96;
	--turquoise-main: #009bec;
	--turquoise-bright: #4cb8f0;
	/* Farben: Pink */
	--pink-main: #ff00ff;
	/* Farben: Sonstige (ToDos) */

	/* Farben: Colorswitcher */
	--colorswitch-color1: var(--pink-main);
	--colorswitch-color2: var(--turquoise-main);
	/* Sonstige */
	--headerlogo-height: 65px;
	--nav-height: 60px;
	--nav-active-border-height: 3px;
}

body, h1 {
	position: relative;
	font-family: "primary";
	font-size: 16px;
}

body {
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	letter-spacing: -1px;
	font-weight: 700;
	line-height: 1.0;
}

.intro h1, h2, h3, h4, h5 {
	font-family: "secondary";
}

.intro h1 span, h2 span, h3 span, h4 span, h5 h4 span {
	font-weight: 400;
}

h1 {
	font-size: 0.75rem;
}

h2, .intro h1 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}  

strong, a {
	font-weight: 700;
}

p {
	line-height: 1.5em;
	text-align: justify;
}

a, a:hover, a:focus {
	cursor: url('/img/icon-select.png'), pointer;
	color: var(--purple-bright);
}

a, a:hover {
	transition: all 0.2s ease;
	text-decoration: none;
}

p a {
	font-family: "secondary";
	position: relative;
	display: inline-block;
	line-height: 1.2
}

p a:before {
	content: "";
	position: absolute;
	top: 100%;
	width: 100%;
	left: 0;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(130deg, var(--pink-main), var(--purple-main) 30%, var(--turquoise-main) 65%, var(--turquoise-dark) 85%)
}

p a:focus, p a:hover, main a:focus, main a:hover {
	color: var(--purple-main);
}

p a:focus:before, p a:hover:before {
	background: var(--purple-main);
}

img {
	width: 100%;
	/*image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;*/
}

#blazor-error-ui {
	display: none;
}

/* Fließtext */
@font-face {
	font-family: 'primary';
	src: url('/webfonts/cabin-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'primary';
	src: url('/webfonts/cabin-bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

/* Überschriften */
@font-face {
	font-family: 'secondary';
	src: url('/webfonts/myriadpro-cond.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'secondary';
	src: url('/webfonts/myriadpro-boldcond.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

/* Monospace */
@font-face {
	font-family: 'mono';
	src: url('/webfonts/vt323-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}
