:root {
	/* Grundfarben */
	
	--color-primary: #111111;
	--color-secondary: #aaaaaa;
	--color-gray-light: #eee;
	--color-gray-medium: #ccc;
	/* Section-Farben */
	
	--color-part-1-bg: #0f0f0f;
	--color-part-1-text: #cccccc;
	--color-part-2-bg: #aaaaaa;
	--color-part-3-bg: #222266;
	--color-part-3-text: #cccccc;
	--color-part-4-bg: #00000f;
	--color-part-4-text: #33cc00;
}

html,
body {
	margin: 0;
	padding: 0;
	position: relative;
	font-family: sans-serif;
	scroll-snap-type: y mandatory;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		scroll-padding: 0;
		scrollbar-color: var(--color-primary) var(--color-secondary);
		scrollbar-width: auto;
	}
	section {
		scroll-snap-align: start;
		scroll-margin: 0;
	}
}


@media screen {
	html {
		scrollbar-color: var(--color-primary) var(--color-secondary);
		scrollbar-width: auto;
	}
	html::-webkit-scrollbar {
		width: 14px;
	}
	html::-webkit-scrollbar-thumb {
		background-color: var(--color-primary);
		border-radius: 14px;
		border: 3px solid var(--color-secondary);
	}
	html::-webkit-scrollbar-track {
		background: var(--color-secondary);
	}
	section {
		/*background: #fff;*/
		min-height: 100vh;
	}
	/* Back to Top Button */
	
	#backToTop {
		position: fixed;
		bottom: 1vw;
		right: 1vw;
		font-size: 2.5em;
		aspect-ratio: 1 / 1;
		border: none;
		background: var(--color-secondary);
		color: var(--color-primary);
		border: thin solid var(--color-primary);
		border-radius: .1em;
		cursor: pointer;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
		z-index: 1000;
	}
	#backToTop.visible {
		opacity: 1;
		pointer-events: auto;
	}
	#backToTop.visible:hover {
		background: var(--color-primary);
		color: var(--color-secondary);
	}
}

section {
	padding: 1em;
}

img {
	max-width: 100%;
}

.logo {
	float: left;
	margin-inline-start: 1em;
	width: 20em;
	max-width: 50%;
	animation: linear reveal both;
	animation-timeline: view();
	animation-range: entry 25% cover 50%;
}

@keyframes reveal {
	from {
		opacity: 0;
		clip-path: inset(45% 20% 45% 20%);
	}
	to {
		opacity: 1;
		clip-path: inset(0);
	}
}

.clear {
	clear: right;
}

h1,
h2,
h3,
h5 {
	font-family: Arial;
}

.Hinweis {
  font-size: 0.8em;
}
.Kontakt {
  font-size: 0.8em;
}

section > * {
	max-width: 40em;
	margin: 0.5em auto;
}

section h2 {
	font-size: 3em;
	text-align: center;
	margin-top: 2rem;
	-webkit-backface-visibility: hidden;
}

section h3 {
	font-size: 1.2em;
	text-align: center;
	margin-top: 2rem;
	-webkit-backface-visibility: hidden;
}

section h5 {
	font-size: 1.1em;
	text-align: center;
	margin-top: 2rem;
	-webkit-backface-visibility: hidden;
}

/* Section-Farben */

#part_1 {
	background: var(--color-part-1-bg);
	color: var(--color-part-1-text);
}

#part_2 {
	background: var(--color-part-2-bg);
}

#part_3 {
	background: var(--color-part-3-bg);
	color: var(--color-part-3-text);
}

#part_4 {
	background: var(--color-part-4-bg);
	color: var(--color-part-4-text);
}

#part_5 {
	background: var(--color-part-5-bg);
}


/* Wide windows */

@media screen and (width > 37em) {
	section {
		padding: 1em;
	}
	section h2 {
		font-size: 3em;
	}
	section h3 {
		font-size: 2em;
	}
	section p {
		text-align: justify;
	}
}

@media print {
	nav,
	#backToTop {
		display: none;
	}
	::scroll-button(*) {
		display: none;
	}
	* {
		color: black !important;
		background: none !important;
	}
	section {
		break-inside: avoid;
	}
	@page {
		margin: 10pt 20pt 30pt 60pt;
	}
}