body, html{
	min-width: 680px;
	height: 100%;
	margin: 0px;
	padding: 0px;
	background-color: rgb(254,255,222);
	scroll-behavior: smooth;
}

button{
	cursor: pointer;
}

a{
	color: rgb(221, 0, 0);
}

input{
	font-size: 50px;
}
.buttonTakt{
	width: 5%;
	height: 50px;
	font-size: 30px;
}

.grid-box{
	background-color: rgb(254,255,222);
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 200px auto 1fr 50px;
	grid-template-areas: "header header header header" 
						 "menu menu menu menu" 
						 "content content content content" 
						 "footer footer footer footer";
}

.box1{
	grid-area: header;
	display: flex;
	background-image: url("../_Bilder/Hintergrund_Header.png");
	background-repeat: repeat-x;
	justify-content: space-between;
	width: 100%;
	background-color: black;
}

.box2{
	grid-area: menu;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 10px;
}

.box3{
	grid-area: content;
	background-color: rgb(221, 255, 188);
	margin: 30px;
	padding: 10px;
	box-shadow: 4px 4px 4px rgb(100,100,100);
	font-family: Calibri Light;
	color: rgb(82, 115, 77);
	font-size: 25px;
	text-align: justify;
}

.box4{
	grid-area:footer;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	color: rgb(254, 255, 222);
	background-color: rgb(82, 115, 77);
	justify-content: center;
	align-items: center;
}


.Themenbereiche{
	width: 200px;
	height: 100px;
	margin: 5px;
	font-size: 25px;
	background-color: rgb(82, 115, 77);
	border-color: rgb(100,100,100);
	color: rgb(254,255,222);
	box-shadow: 4px 4px 4px rgb(100,100,100);
}


.Startseite{
	width: 200px;
	height: 100px;
	margin: 5px;
	font-size: 25px;
	background-color: rgb(254,255,222);
	border-color: rgb(100,100,100);
	color: rgb(82, 115, 77);
	box-shadow: 4px 4px 4px rgb(100,100,100);
}

.Materialien{
	width: 200px;
	height: 100px;
	margin: 5px;
	font-size: 25px;
	background-color: rgb(220,220,220);
	border-color: rgb(254,255,222);
	color: rgb(82, 115, 77);
	box-shadow: 4px 4px 4px rgb(100,100,100);
}

/* Schriften */
.hervorheben{
	font-family: Calibri;
	font-weight: bold;
	font-size: 30px;
}

.hervorheben2{
	color: rgb(100,100,100);
	font-family: Lucida Calligraphy;
	font-size: 40px;
	font-weight: bold;
}

.hervorheben3{
	font-family: Calibri;
	font-weight: bold;
	font-size: 25px;
}

.hervorhebenTB{
	color: rgb(82, 115, 77);
	font-family: Calibri;
	font-size: 80px;
	font-weight: bold;
	font-style: italic;
}

.hervorheben4{
	font-family: Calibri;
	font-weight: bold;
	font-size: 25px;
	background-color: rgb(220,220,220);
}
#Kopfzitat{
	margin: 40px;
	color: rgb(254,255,222);
	font-size: 25px;
	font-family: Calibri Light;
	font-style: italic;
	font-weight: bold;
}

.info{
	color: rgb(100,100,100);
	font-family: Lucida Calligraphy;
	font-size: 60px;
	font-weight: bold;
}
#Kopfzitat2{
	font-weight: lighter;
}

a{
	text-decoration: none;
	text-borderline: none;
}

td{
	color: rgb(254,255,222);
}

.tab{
	border-collapse: collapse;	
}
.tab_1{
	color: rgb(100, 100, 100);
	padding: 10px;
}

.tab_2{
	color: rgb(50, 50, 50);
	background-color: rgb(250, 250, 250);
	padding: 10px;
	font-weight: bold;
}

@media only screen and (max-width: 900px){
	#Kopfzitat {font-size: 20px;}
}
@media only screen and (max-width: 700px){
	#Kopfzitat {font-size: 15px;}
}
@media only screen and (max-width: 590px){
	#Kopfzitat {font-size: 10px;}
	body, html {width: 590px;}
}