/* Formatierungen im hellen Bildschirmmodus */
@media screen and (prefers-color-scheme: light) {

	/* Root-Element wird formatiert */
	html {
		--abp-headbg: #fff;
		--abp-mainbg: rgb(230, 230, 230);
		--abp-footbg: rgb(115, 115, 115);
		--abp-headfc: #000;
		--abp-specfc: rgb(150, 0, 0);
		--abp-footfc: #fff;
		--abp-linefc: rgb(60, 60, 70);
	}

}

/* Formatierungen im dunklen Bildschirmmodus */
@media screen and (prefers-color-scheme: dark) {

	/* Root-Element wird formatiert */
	html {
		--abp-headbg: #fff;
		--abp-mainbg: rgb(230, 230, 230);
		--abp-footbg: rgb(115, 115, 115);
		--abp-headfc: #000;
		--abp-specfc: rgb(150, 0, 0);
		--abp-footfc: #fff;
		--abp-linefc: rgb(60, 60, 70);
	}

}

/* Formatierungen für alle Bildschirmansichten */
@media screen {

	body {
		font-family: ABP-Web, Arial, Helvetica, sans-serif;
		line-height: 150%;
		padding: 0;
		margin: 0;
		color: var(--abp-headfc);
		background-color: var(--abp-headbg);
		text-align: center;
		font-size: calc(.5rem + 1vw);
	}

	header {
		padding: calc(1.5rem + 3vw);
		margin: 0;
		border-bottom: 2px solid var(--abp-linefc);
	}

	header img {
		width: calc(10rem + 20vw);
		border: 0;
		margin: 0;
		padding: 0;
	}

	main {
		padding: calc(1.5rem + 3vw);
		background-color: var(--abp-mainbg);
	}

	main h1 {
		font-size: calc(1rem + 2vw);
		margin: 0;
		padding-top: 0;
		padding-bottom: calc(1.5rem + 3vw);
		line-height: 150%;
	}

	main h2 {
		font-size: calc(.75rem + 1.5vw);
		margin: 0;
		padding-top: 0;
		padding-bottom: calc(1rem + 2vw);
		line-height: 150%;
	}

	main table {
		font-family: ABP-Web, Arial, Helvetica, sans-serif;
		padding: 0;
		margin: 0 auto 0;
		text-align: center;
		width: 80%;
	}

	main th {
		font-size: calc(.75rem + 1.5vw);
		padding: 0 0 calc(1rem + 2vw) 0;
		color: var(--abp-specfc);
	}

	main td {
		font-size: calc(.5rem + 1vw);
		vertical-align: top;
		width: 50%;
		line-height: 150%;
		padding: 0;
	}

	main td img {
		padding-top: 0;
		padding-bottom: calc(1rem + 2vw);
		width: calc(5rem + 10vw);
	}

	main td p {
		padding-bottom: calc(1.5rem + 3vw);
	}

	main p {
		padding-top: 0;
		padding-bottom: calc(1rem + 2vw);
		margin: 0;
		line-height: 150%;
	}

	main p b {
		color: var(--abp-specfc);
	}

	main > p:last-child {
		padding-bottom: 0;
	}

	main a {
		color: var(--abp-headfc);
	}

	footer {
		padding: calc(1.5rem + 3vw);
		border-top: 2px solid var(--abp-linefc);
		background-color: var(--abp-footbg);
		color: var(--abp-footfc);
		display: grid;
		grid-auto-flow: column;
		font-size: calc(.5rem + 1vw);
	}

	footer a {
		color: var(--abp-footfc);
	}

	.trenner {
		border-top: 2px solid var(--abp-linefc);
		padding-top: calc(1rem + 2vw);
	}

}

/* Formatierungen für kleinere Displays */
@media screen and (max-width: 800px) {
	
	main table {
		width: 100%;
	}

	footer {
		grid-template-columns: 50% 50%;
		grid-auto-flow: unset;
		grid-row-gap: 1rem;
	}

	footer div:first-child {
		grid-column-start: 1;
		grid-column-end: 3;
	}

	header, main, footer {
		padding: 2rem 1rem;
	}

}