/*Einbettung Schriften*/
@font-face
	{ 	
		font-family: 'Producer';
		src:	url('./fonts/Producer_Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		font-display: swap; /*erst Standardschrift laden, dann gegen "Producer" getauscht*/
	}

/*---------------------------------------*/

/*Formatierung Body*/
body
	{
	max-width: 80em;
	background-color: #FFFFF0;
	margin: 0 auto;
	}

/*---------------------------------------*/

/*Formatierung der Kopfzeile*/
#kopfzeile
	{
	max-width: 80em;
	width: 100vw;
	}
*
	{
	box-sizing: content-box;
	margin: 0;
	padding: 0;
	}
.kopfzeile_slider
	{
	overflow: hidden;
	}
.kopfzeile_slider_alle_slides
	{
	width: 600%;
	height: 60vh;
	position: relative;
	animation: 30s slideranimation infinite;
	}
@keyframes slideranimation
	{
	0%	{left: 0;}
	15%	{left: 0;}
	20%	{left: -100%;}
	35%	{left: -100%;}
	40%	{left: -200%;}
	55%	{left: -200%;}
	60%	{left: -300%;}
	75%	{left: -300%;}
	80%	{left: -400%;}
	95%	{left: -400%;}
	100%	{left: -500%;}
	}
.kopfzeile_slider_alle_slides figure
	{
	position: relative;
	float: left;
	}
.kopfzeile_slider_alle_slides figure img
	{
	max-width: 80em;
	width: 100vw;
	height: 60vh;
	object-fit: cover;
	}
figcaption
	{
	position: absolute;
	top: calc(50vh - 1.8em);
	left: 3vw;
	font-family: 'Producer';
	font-size: 1.8em;
	font-weight: bold;
	color: white;
	text-shadow: 	0.05em 0.05em 0.05em black,
			0.05em -0.05em 0.05em black,
			-0.05em 0.05em 0.05em black,
			-0.05em -0.05em 0.05em black;
	}

/*---------------------------------------*/

/*Formatierung horizontale Navigation*/
#schnellnavi
	{
	background-color: #FFFFF0;
	margin: 0 auto; /* Zentrierung im Browserfenster*/
	max-width: 80em;
	height: 2em;
	position: sticky;
	top: 0.25em;
	}
#schnellnavi ul
	{
	display: grid;
	grid-template-columns:calc(9.5% - 0.1em) calc(27% - 0.2em) calc(27% - 0.2em) calc(27% - 0.2em) calc(9.5% - 0.1em);
	gap: 0.2em;
	box-sizing: border-box;
	}
#schnellnavi li
	{
	background-color: #D0D0D0;
	list-style-type: none;
	font-family: 'Producer';
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	max-height: 2em;
	}
#schnellnavi a
	{
	padding:0.25em;
	display: block;
	}
#schnellnavi a:link
	{
	text-decoration: none;
	color: #000000;
	}
#schnellnavi a:visited
	{
	text-decoration: none;
	color: #000000;
	}
#schnellnavi a:hover
	{
	background-color: #C0C0C0;
	}

/*Formatierung Homebutton*/
label.homebutton
	{
	display: block;
	background: #595959;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	border-radius: 0.2em; 
	}
.dach
	{
	position: absolute;
	display: block;
	left: 0.2em;
	top: -0.3em;
	width: 0;
	height: 0;
	background: transparent;
	border-top: 0.5em solid transparent;
	border-bottom: 0.5em solid #FFFFFF;
	border-right: 0.5em solid transparent;
	border-left: 0.5em solid transparent;
	}
.haus
	{
	position: absolute;
	display: block;
	top: 0.7em;
	left: 0.2em;
	width: 1em;
	height: 0.5em;
	background: #FFFFFF;
	}

/*Formatierung "Hamburgermenü" für Dropdownnavigation*/
label.hamburg
	{
	display: block;
	background: #595959;
	width: 1.4em;
	height: 1.4em;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.25em; /*selber Abstand von oben wie "#schnellnavi a" mit padding*/
	border-radius: 0.2em; 
	}
input#hamburg
	{
	display:none;
	}
.line
	{
	position: absolute;
	left:0.2em;
	height: 0.2em;
	width: 1.0em;
	background: #FFFFFF;
	border-radius: 0.1em;
	display: block;
	transition: 0.5s;
	transform-origin: center;
	}
.line:nth-child(1)
	{
	top: 0.2em;
	}
.line:nth-child(2)
	{
	top: 0.6em;
	}
.line:nth-child(3)
	{
	top: 1.0em;
	}
#hamburg:checked + .hamburg .line:nth-child(1)
	{
	transform: translateY(0.4em) rotate(-45deg);
	}
#hamburg:checked + .hamburg .line:nth-child(2)
	{
	opacity:0;
	}
#hamburg:checked + .hamburg .line:nth-child(3)
	{
	transform: translateY(-0.4em) rotate(45deg);
	}

/*Formatierung Dropdown Navigation*/
#navi
	{
	height: auto;
	max-height:0;
	overflow: hidden;
	transition: all 0.5s;
	}
#navi ul, ol, li, dl, dt, dd
	{
	display: block;
	padding: 0;
	margin: 0;
	}
#navi li
	{
	display: block;
	}
#hamburg:checked + .hamburg  + #navi
	{
	max-height: calc(100vh - 2em); /*Anzeigehöhe ist Fensterhöhe, abzüglich Navigationsleiste */
	height:1000vh;
	max-width: 80em;
	float: right;
	text-algin: center;
	overflow: hidden;
	}

/*---------------------------------------*/

/*Formatierung der Fusszeile*/
#fusszeile
	{
	display: block;
	background-color: #FFFFF0;
	margin: 0 auto; /* Zentrierung im Browserfenster*/
	max-width: 80em;
	}
#fusszeile ul
	{
	margin: 0.2em;
	}
#fusszeile li
	{
	background-color: #D0D0D0;
	list-style-type: none;
	font-family: 'Producer';
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	}
#fusszeile a
	{
	display: block;
	}
#fusszeile a:link
	{
	text-decoration: none;
	color: #000000;
	}
#fusszeile a:visited
	{
	text-decoration: none;
	color: #000000;
	}
#fusszeile a:hover
	{
	background-color: #C0C0C0;
	}

/*---------------------------------------*/

/*Formatierung der Inhalt*/
#inhalt
	{
	background-color: #FFFFF0;
	max-width: 80em;
	font-family: Bahnschrift Light, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	margin-top: 0.5em;
	}
#inhalt ul
	{
	padding-left: 1.2em;
	}
#inhalt li
	{
	display: list-item;
	list-style-type: circle;
	}
#inhalt details
	{
	padding-left: 0.6em;
	}
#inhalt summary
	{
	padding-top: 0.3em;
	font-family: 'Producer';
	font-size: 1.1em;
	font-weight: bold;
	}
#inhalt del
	{
	text-decoration-color: black;
	text-decoration-thickness: 0.15em;
	}
#inhalt td
	{
	vertical-align: top;
	}
#inhalt tr
	{
	padding-top: 0.2em;
	}

/*---------------------------------------*/

/*Formatierung Überschriften*/
h1
	{
	font-family: 'Producer';
	font-size: 1.9em;
	}
h2
	{
	font-family: 'Producer';
	font-size: 1.4em;
	padding-top: 0.3em;
	}
h3
	{
	font-family: 'Producer';
	font-size: 1.2em;
	padding-top: 0.3em;
	}
h4
	{
	font-family: 'Producer';
	font-size: 0.9em;
	padding-top: 0.3em;
	}

/*---------------------------------------*/

/*Formatierung Absatz*/
p
	{
	padding-bottom: 0.4em;
	}

/*---------------------------------------*/

/*Druckaufbereitung*/

@media print
	{
	#kopfzeile
		{
		display: none;
		}
	#schnellnavi
		{
		display: none;
		}
	#fusszeile a
		{
		display: none;
		}
	#inhalt
		{
		background-color: #FFFFFF;
		}
	body
		{
		background-color: #FFFFFF;
		}
	}