@font-face {
  font-display: swap; 
  font-family: 'Noto Serif';
  font-style: normal;
  src: url('../schrift/noto-serif.woff2') format('woff2');
}
@font-face {
  font-display: swap; 
  font-family: 'Train One';
  font-style: normal;
  src: url('../schrift/train-one.woff2') format('woff2');
}
* {
	font-family: 'Noto Serif', sans-serif;
	font-size: 16px;
	}
body {
	margin: 0;
	/* background-color: #3c829c; */
	background-color: #3d829d;
	}
h1 {
	font-family: 'Noto Serif', sans-serif;
	font-size: 180%;
	color: #152a4b;
	font-weight: 600;
	margin: 0;
}
h2 {
	font-family: 'Train One', 'Noto Serif', sans-serif;
	font-size: 500%;
	color: #ffffff;
	font-weight: 100;
	margin: 5% 0 5% 0;
}
h3 {
	font-family: 'Noto Serif', sans-serif;
	font-size: 180%;
	color: #152a4b;
	font-weight: 100;
	margin: 0;
}
#kopf {
	padding: 10px 0 0 0; 
	text-align: center;
	color: #152a4b;
	background-color: #f78f4b;
	height: 80px;
	
	position: fixed;
	top: 0;
	left: 0;
	right: 0;	
	z-index: 901;
	}
#kopf img {
	padding: 10px 0 0 0;
	}
#kopf img {
	width: 30px;
	}	
#kopf a, #fuss a {
	padding: 5px;
	text-decoration: none;
	font-family: 'Noto Serif', sans-serif;
	font-weight: 600;
	color: #152a4b;
	}
#kopf a.mark {
	border-style: solid; 
	border-width: 1px;
	}
#fuss {
	padding: 10px 0 0 0; 
	text-align: center;
	color: #152a4b;
	background-color: #f78f4b;
	height: 80px;

	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	
	font-family: 'Noto Serif', sans-serif;
	font-weight: 200;
	z-index: 900;	
	}
#fuss a.mark {
	border-style: solid; 
	border-width: 1px 1px 0 1px;
	}
#text {
	margin: auto;
	position: absolute;
	top: 12%; 
	left: 0; 
	right: 0;
}
/*
#indiemitte {
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
	z-index: 100;
	}
*/	
#inhalt {
	text-align: center; 
	background-color: #3d829d; 
	}
#inhalt.hintergrund {
	background-image: url("../grafik/hx3y2.jpg");
	background-size: 100%;
	background-repeat: repeat;
	z-index: 100;	
	}
/*	
#inhalt.hintergrund {
	background-image: url("../grafik/hx3y2.jpg");
	background-size: 100%;
	background-repeat: repeat;
	position: fixed;	
	width: 100%;
	height: 100%;
	z-index: 100;	
	}	
*/	
/*	
#multibild {
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;	
	
	display: grid; 
	grid-template-columns: 1fr 1fr;
}
*/
#multibild img {
	width: 500px;
	height: 500px;
}
#multibild img.randw {
	margin: 15px;
	border: 1px;
	border-style: solid;
	border-color: white;
	}
#multibild img.rands {
	margin: 15px;
	border: 1px;
	border-style: solid;
	border-color: black;
	}	
#einzelbild {
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;	
	
	display: grid; 
	grid-template-columns: 1fr;
}	
#einzelbild img {
	width: 500px;
	height: 500px;
	margin: 15px;
	border: 1px;
	border-style: solid;
	border-color: white;	
}
#copy {
	font-size: 70%;
}
/*
#multibild { 
	display: grid; 
	grid-template-columns: 1fr;
	margin: 15% auto 15% auto;
	}
*/	
#impressum {
	background-image: url("../grafik/hx3y2.jpg");
	background-size: 100%;
	background-repeat: repeat;
	position: fixed;	
	width: 100%;
	height: 100%;
	z-index: 100;
	text-align: center;
	}
#impressum h2 {
	font-size: 280%;
	margin: 10px 0 5px 0;
}
#impressum p {
	font-size: 18px;
	margin: 5px 15% 8px 15%;	
}	
#datenschutz {
	background-image: url("../grafik/hx3y2.jpg");
	background-size: 100%;
	background-repeat: repeat;
	
	width: 100%;
	height: 100%;
	text-align: center;
	}
#datenschutz h2 {
	font-size: 280%;
	margin: 10px 0 5px 0;
}
#datenschutz h4 {
	font-family: 'Noto Serif', sans-serif;
	font-size: 160%;
	font-weight: 100;
	margin: 30px 0 10px 0;
	color: #152a4b;
}
#datenschutz p {
	font-size: 18px;
	margin: 5px 15% 8px 15%;	
}
/*
@media (min-width: 60em)
{
	#multibild { 
		grid-template-columns: 1fr 1fr;
		}
}
*/
/* mobil 600, tables 768, notebook 992, display 1200 */
@media ( ( 400px <= width ) and (orientation: portrait) ) {
		#inhalt.hintergrund {
			background-image: url("../grafik/hx3y1.jpg");
			position: fixed;	
			width: 100%;
			height: 100%;
		}
		#indiemitte {
			position: fixed;
			inset: 0;
			width: fit-content;
			height: fit-content;
			margin: auto;
			z-index: 100;
			}		
		#inhalt {
			margin: 20% auto 20% auto;
		}		
		#kopf, #fuss {
			height: 150px;
			}		
		#kopf a, #fuss a {
			font-size: 300%;
		}	
		#kopf img {
			width: 60px;
		}
		#copy {
			font-size: 200%;
		}
		#text {
			margin: auto;
		}
		#multibild {
			grid-template-columns: 1fr;		
		}
		#multibild img {
			width: 90%;
			height: auto;
		}		
		#impressum {
			margin: 20% 0 0 0 ;
		}
		#datenschutz {
			margin: 10% 0 0 0 ;
		}		
		h1 {
			font-size: 300%;
			font-weight: 600;
			margin: 1% 10% 1% 10%;
		}
		h2 {
			font-size: 500%;
			font-weight: 100;
			margin: 5% 5% 5% 5%;
		}
		h3 {
			font-size: 300%;
			font-weight: 100;
			margin: 1% 10% 1% 10%;
		}		
	}

@media ( ( 500px < width <=600px ) and (orientation: landscape) ) {
		#inhalt {
			background-image: url("../grafik/hx1y1.jpg");
		}
		#kopf a {
			font-size: 300%;
		}		
		#text {
			margin: 10% auto;
		}		
		h1 {
			font-size: 160%;
			font-weight: 600;
		}
		h2 {
			font-size: 300%;
			font-weight: 100;
		}
		h3 {
			font-size: 110%;
			font-weight: 100;
		}
		#multibild {
			grid-template-columns: 1fr;		
		}
		#multibild img {
			width: 700px;
			height: 700px;
		}			
	}
@media (( width <= 500px  ) and (orientation: landscape)) {
		#inhalt {
			background-image: url("../grafik/hx2y3.jpg");
		}
		#kopf a {
			font-size: 180%;
		}
		#text {
			margin: 15% auto;
		}		
		h1 {
			font-size: 160%;
			font-weight: 600;
		}
		h2 {
			font-size: 280%;
			font-weight: 100;
		}
		h3 {
			font-size: 18px;
			font-weight: 100;
		}
		#multibild {
			grid-template-columns: 1fr;		
		}
		#multibild img {
			width: 700px;
			height: 700px;
		}			
	}
@media (( height <= 500px  ) and (orientation: landscape)) {
		#inhalt {
			margin: 110px auto;
		}
		#indiemitte {
			margin: 120px auto;
		}		
		#kopf, #fuss {
			height: 80px;
			}		
		#kopf a, #fuss a {
			font-size: 180%;
		}
		#text {
			margin: 80px auto;
		}		
		h1 {
			font-size: 160%;
			font-weight: 600;
			margin: 1% 10% 1% 10%;
		}
		h2 {
			font-size: 350%;
			font-weight: 100;
			margin: 5% 5% 5% 5%;
		}
		h3 {
			font-size: 160%;
			font-weight: 100;
			margin: 1% 10% 1% 10%;
		}
		#multibild {
			grid-template-columns: 1fr;		
		}
		#multibild img {
			width: 90%;
			height: auto;
		}		
	}
@media (( height > 600px ) and (orientation: landscape)) {
		#multibild {
			position: fixed;
			inset: 0;
			width: fit-content;
			height: fit-content;
			margin: auto;	
			
			display: grid; 
			grid-template-columns: 1fr 1fr;
		}
		#indiemitte {
			position: fixed;
			inset: 0;
			width: fit-content;
			height: fit-content;
			margin: auto;
			z-index: 100;
			}
		#inhalt.hintergrund {
			background-image: url("../grafik/hx3y2.jpg");
			background-size: 100%;
			background-repeat: repeat;
			position: fixed;	
			width: 100%;
			height: 100%;
			z-index: 100;	
			}			
	}