@font-face {
	font-family: 'Roboto';
	src: url('Roboto-Utalic.ttf');
}

@font-face {
	font-family: 'Oswald';
	src: url('Oswald.ttf');
}

@font-face {
	font-family: 'Staytrue';
	src: url('stytrue.otf') format('opentype');
}

@font-face {
	font-family: 'sansilk';
	src: url('sansilk.ttf');
}

body {
background-color:beige;
font-size: 1em;
}

.empfang {
	background-color:black;
	color: white;
	text-align:center;
	padding: 10px;
}

.empfang h1 {
	font-size: 2.7em;
	font-weight: bold;
	text-decoration:underline;
	font-family: "Oswald", sans-serif;
}

.abstand {
	margin-bottom: 20px;
}

.hauptmenu {
	border: 1px dashed;
	padding: 20px;
	background-image:url('hintergrundhauptmenu.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center-center;
}

.hauptmenu ol {
	list-style-type:none;
	padding:0;
	display:flex;
	justify-content:space-around;

}


.hauptmenu a {
	text-decoration:underline;
	font-size:1.2em;
	color:red;
	font-family: "Staytrue", sans-serif;
	font-weight:bold;
}

.fotocontainer {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
}

.fotocontainer img {
	max-width:100%;
	height:auto;
}

h2 {
font-style:italic;
text-decoration:underline;
}

table {
border:3px solid black;
margin-left: 15%;
margin-right:10%;
}

thead {
padding:8px;
font-weight:bold;
text-decoration:underline;
border: 1px dashed black;
color:red;
text-align:center;
}

td {
padding:8px;
border: 1px solid black;
text-align:center;
}

tr:nth-child(even) {
background-color:lightgray;
}

tr:nth-child(odd) {
background-color: white;
}

.tabellencontainer {
	display:flex;
	background-color:turquoise;
}

.linketabelle {
	width:50%;
	padding:20px;
	background-image: url('sonne.jpg');
	background-size: cover;
	background-repeat:no-repeat;
	background-position:center-center;
	text-align:center;
	border: 1px dashed black;
}

.rechtetabelle {
	width:50%;
	padding:20px;
	text-align:center;
	background-image: url('notepad.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center-center;
	border: 1px dashed black;
}

footer {
	background-color:black;
	color: yellow;
	text-align:center;
	padding:10px;
	font-size:2em;
}

@keyframes blink {
	0% {
		opacity:1;
	}
	100% {
		opacity:0;
	}
}

.disclaimer {
	animation: blink 1s infinite alternate;
}

.materialcontainer {
	display:flex;
	ackground-color:red;
}

.fotoha {
	width:50%;
	display:flex;
	justify-content:center;
	align-items: center;
	border: dashed 1px black;
}

.fotohazusatz {
	width:20%;
	display:flex;
	justify-content:center;
	align-items:center;
	border: dashed 1px black;
}

.menuleistefacher {
	width:50%;
	border: dashed 1px black;
	text-align:center;
}

.menuleistefacherzusatz {
	width:80%;
	border: dashed 1px black;
	text-align:center;
}

ul {
	list-style-type: none;
}


.uebungsliste {
	list-style-type: none;
	border: dashed 1px red;
	margin-bottom: 2.5em;
	display: flex;
	justify-content: space-around;
}

ul a {
	font-weight: bold;
	color: red;
	font-family: "Staytrue", sans-serif;
}

ul .uebungslink {
	font-weight: bold;
	color: red
	font-family: "Staytrue", sans-serif;
	font-size: 1.7em;
}

ul a:active {
color:skyblue;
}

.bildercontainer {
	width:100%;
	display:flex;
	justify-content:center;
}

.bildercontainer table {
	width:100%;
	border: 2px dashed red;
}

.galeriebild {
	display: flex;
	justify-content:center;
}

.regenbogenbild {
	border: 10px solid;
	border-image: linear-gradient(45deg, red, yellow, blue, green) 1;
	border-radius: 1opx;
}

.galeriesteuerung {
	display: flex;
	justify-content: center;
}

.galerieliste2 {
	widht: 100%;
	display: flex;
	justify-content: space-around;
	border: 2px dashed green;
}

.bildzelle {
	width:25%;
	border: 1px dashed black;
	margin:15px;
	padding:0;
}

.bildzelle img {
	width: 50%;
	height: auto;
	padding:0;	
}

.bildzelle a {
	color:red;
	text-decoration:underline;
	line-height:1.2;
	
}

h3 {
	text-align:center;
	font-weight:bold;
	text-decoration:underline;
	font-size:1.8em;
}

.regenbogenliste {
	background:linear-gradient(to bottom, violet, indigo, blue, green, red, orange, yellow);
	margin: 5px;
	padding: 10px;
}

.regenbogenliste ul {
	background-color:black;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:center;
	list-style-type:none;
}

.galerieliste li {
	margin:10px;
}

.bilderbuch {
	margin:0 auto;
	width: fit-content;
	text-align:center;
}	

.bilderbuchzeile {
	display:flex;
	text-align:center;
	justify-content:center;
	align-items:center;
}

.fixed {
	background-image: url('hintergrunf_plaene.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center-center;
	background-attachment: fixed;
}

.zeittafel {
	display: flex;
	justify-content: center;
	align-items: center;
}

.zeittefel table {
	border: 1px solid black;
}

.zeittafel table .KL {
	background-color:#ff66cc;
}

.zeittafel table .Pause {
	background-color:green;
}

.zeittafel table .Stunde {
	background-color:yellow;
}

.zeittafel table tr {
	font-size: 1.2em;
}

.stundenplan {
	display:flex;
	justify-content:center;
	align-items:center;
}

.stundenplan tr {
	font-size:1.2em;
}

.innen {
	border:none;
	margin: 0 auto;
}
	

@media (max-width: 768px) {

}


@media (max-width: 480px) {

	.empfang {
		background-color:blue;
	}

	.empfang h1 {
		font-size:1.8em;
		font-family: "Arial";
	}

	.hauptmenu ol {
		flex-wrap:wrap;
	}

	.hauptmenu ol li {
		margin: 10px;
	}

	.hauptmenu a {
		font-size:1.0em;
}