@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	src: url('fonts/inter-v20-latin_latin-ext-200.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url('fonts/inter-v20-latin_latin-ext-900.woff2') format('woff2');
}
* {
	box-sizing: border-box;
}
:root {
	--color-schwarz: #000;
	--color-dunkelgrau: #202B33;
	--color-hellesblaugrau: #F2F6F8;
	--color-weiss: #fff;
	--color-neongelb: #e6fe12;
	--color-sturmgrau: #57586e;
	--color-mauvegrau: #8988a5;
	--color-silbergrau: #e8e8e8;
}
body {
	color: var(--color-dunkelgrau);
	background-color: var(--color-weiss);
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 200;
	line-height: 1.3;
}
main {
	margin: 0 auto;
	max-width: calc(1440px - 2rem);
	width: 100%;
	padding: 2rem;
}
h1, h2, h3 {
	color: var(--color-schwarz);
	margin: 0 0 1rem 0;
	line-height: 1.2;
}
h1 {
	font-size: 64px;
	font-weight: 900;
}
h2 {
	font-size: 48px;
	font-weight: 600;
}
h3 {
	font-size: 28px;
	font-weight: 600;
}
.intro,
.kerndaten,
.content {
	margin-bottom: 4rem;
}
.intro p {
	font-size: 20px;
	font-weight: 400;
}
.kerndaten {
	display: grid;
	grid-template-columns: 1fr 1fr;
}
.kerndaten dt {
	font-weight: 400;
	border-bottom: 1px solid var(--color-hellesblaugrau);
	padding: 1rem 0;
}
.kerndaten dd {
	border-bottom: 1px solid var(--color-hellesblaugrau);
	margin: 0;
	padding: 1rem 0;
}
.contentTabelle {
	width: 100%;
}
main {
	margin: 0 auto;
	max-width: calc(1440px - 2rem);
	width: 100%;
	padding: 2rem;
}
main a {
	color: var(--color-schwarz);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--color-neongelb);
}
main a:hover {
	background-color: var(--color-neongelb);
}
footer {
	background-color: var(--color-sturmgrau);
}
footer .inside {
	margin: 0 auto;
	max-width: calc(1440px - 2rem);
	width: 100%;
	padding: 3rem 2rem;
}
.footer__breadcrumb {
	color: var(--color-mauvegrau);
	margin-bottom: 2rem;
    border: 1px solid var(--color-mauvegrau);
    padding: 0.5rem;
    border-radius: 1rem;
}
.footer__breadcrumb a {
	color: var(--color-weiss);
	font-weight: 300;
	text-decoration: none;
}
.footer__breadcrumb a:hover {
	color: var(--color-neongelb);
	background-color: unset;
}
.footer__logo img {
	width: 142px;
}
#hinweis {
	border: 1px solid var(--color-mauvegrau);
	border-radius: 1rem;
	margin: 3rem 0;
	padding: 1.5rem;
	color: var(--color-mauvegrau);
}
#hinweis h2 {
	color: var(--color-mauvegrau);
	font-size: 28px;
	font-weight: 600;
}
#dashboard {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin: 3rem 0;
}
#dashboard a {
	text-decoration: none;
}
#dashboard .item {
	background-color: var(--color-neongelb);
	padding: 3rem;
	font-weight: 300;
	display: flex;
	flex-direction: column;
}
#dashboard .call2action {
	font-weight: 400;
	color: var(--color-neongelb);
	background-color: var(--color-schwarz);
	padding: 1rem;
	align-self: center;
	border-radius: 0.5rem;
}
@media (max-width: 1440px) {
	h1 {
		font-size: calc(32px + (64 - 32) * ((100vw - 320px) / (1440 - 320)));
	}
	h2 {
		font-size: calc(24px + (48 - 24) * ((100vw - 320px) / (1440 - 320)));
	}
	h3,
	#hinweis h2 {
		font-size: calc(18px + (28 - 18) * ((100vw - 320px) / (1440 - 320)));
	}
	.intro p {
		font-size: calc(18px + (20 - 18) * ((100vw - 320px) / (1440 - 320)));
	}
	.contentTabelle {
		font-size: calc(10px + (18 - 10) * ((100vw - 320px) / (1440 - 320)));
	}
}
@media (max-width: 768px) {
	#dashboard {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 480px) {
	#dashboard .item {
		padding: 2rem;
	}
}