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

	/* Root-Element wird formatiert */
	html {
		--szt-headbg: #fff;
		--szt-mainbg: rgb(199, 211, 237);
		--szt-footbg: rgb(56, 76, 127);
		--szt-headfc: #000;
		--szt-specfc: rgb(150, 0, 0);
		--szt-footfc: #fff;
		--szt-linefc: rgb(60, 60, 70);
	}

}

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

	/* Root-Element wird formatiert */
	html {
		--szt-headbg: #fff;
		--szt-mainbg: rgb(199, 211, 237);
		--szt-footbg: rgb(56, 76, 127);
		--szt-headfc: #000;
		--szt-specfc: rgb(150, 0, 0);
		--szt-footfc: #fff;
		--szt-linefc: rgb(60, 60, 70);
	}

}

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

	body {
		font-family: "SZT-Web", "Times", "Times New Roman", serif;
		line-height: 150%;
		padding: 0;
		margin: 0;
		color: var(--szt-headfc);
		background-color: var(--szt-headbg);
		text-align: center;
		font-size: calc(.5rem + 1vw);
	}

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

	header > div {
		display: grid;
		grid-auto-flow: column;
		column-gap: calc(.5rem + 1vw);
		line-height: 150%;
	}

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

	header .szt_logo {
		align-self: center;
		justify-self: end;
	}

	header .szt_title {
    	align-self: center;
    	justify-self: start;
		font-weight: 700;
		font-size: calc(1rem + 2vw);
		text-transform: uppercase;
		letter-spacing: calc(.1rem + .2vw);
		line-height: 125%;
		text-align: left;
	}

	main {
		padding: calc(1.5rem + 3vw);
		background-color: var(--szt-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 p {
		padding-top: 0;
		padding-bottom: calc(1rem + 2vw);
		margin: 0;
		line-height: 150%;
	}

	main p i {
		color: var(--szt-specfc);
	}

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

	main a {
		color: var(--szt-footbg);
	}

	.szt_foot {
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: calc(.1rem + .2vw);
	}

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

	footer a {
		color: var(--szt-mainbg);
	}

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

}

/* Formatierungen für kleinere Displays */
@media screen and (max-width: 800px) {
	
	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;
	}

	header > div {
		grid-auto-flow: row;
		row-gap: calc(.5rem + 1vw);
	}

	header .szt_logo,
	header .szt_title {
		justify-self: center;
		text-align: center;
	}

}