body {background-color:#C496D6;
	display:flex;
	flex-direction:row;
	justify-content:center;}

#Matte {
	width:1280px;
	font-size:20px;
	color:white;
	font-family:Book Antiqua;
	margin-top:20px;}

#Mutter {background-color:#593493;
		width:1280px;
		padding:30px;
		margin:50px;
		border-style:solid;
		border-width:50px;
		border-color:white;
		display: grid;
		grid-template-columns: 65% 35%;
		grid-template-rows: 185px 80px 100px 100px 100px 100px;
}

#Mutter4	{background-color:#593493;
		width:1280px;
		padding:30px;
		margin:50px;
		border-style:solid;
		border-width:50px;
		border-color:white;
		display: grid;
		grid-template-columns: 65% 35%;
		grid-template-rows: 185px 80px 100px 100px 100px 100px;}

#Mutter2{background-color:#593493;
		width:1280px;
		padding:30px;
		margin:50px;
		border-style:solid;
		border-width:50px;
		border-color:white;
		display: grid;
		grid-template-columns: 65% 35%;
		grid-template-rows: 185px 80px 100px 100px 100px 100px;
		}

#Mutter3{background-color:#593493;
		width:1280px;
		padding:30px;
		margin:50px;
		border-style:solid;
		border-width:50px;
		border-color:white;
		display: grid;
		grid-template-columns: 65% 35%;
		grid-template-rows: 185px 80px 100px 100px 100px 150px;}

#Mutter5{background-color:#593493;
		width:1280px;
		padding:30px;
		margin:50px;
		border-style:solid;
		border-width:50px;
		border-color:white;
		display: grid;
		grid-template-columns: 65% 35%;
		grid-template-rows: 185px 80px 100px 100px 100px 100px;}


#Bereich1 {grid-area:1/1/2/2;
		}
#Bereich2 {grid-area:2/1/3/2;}
#Bereich3 {grid-area:3/1/4/2;}
#Bereich4 {grid-area:4/1/5/2;}
#Bereich5 {grid-area:5/1/6/2;}
#Bereich6 {grid-area:1/2/6/3;}
#Bereich7 {grid-area:6/1/7/2;}
#Bereich8 {grid-area:6/2/7/3;}

#Impressum {display:flex;
			flex-direction:row;
			justify-content:start;}

#Impressum2 {display:flex;
			flex-direction:row;
			justify-content:start;}

#Be1 {grid-area:1/1/2/2;}
#Be2 {grid-area:2/1/3/2;}
#Be3 {grid-area:3/1/4/2;}
#Be4 {grid-area:4/1/5/2;}
#Be5 {grid-area:5/1/6/2;}
#Be6 {grid-area:1/2/6/3;}
#Be7 {grid-area:6/1/7/2;}
#Be8 {grid-area:6/2/7/3;}

#Berei1 {grid-area:1/1/2/2;}
#Berei2 {grid-area:2/1/3/2;}
#Berei3 {grid-area:3/1/4/2;}
#Berei4 {grid-area:4/1/5/2;}
#Berei5 {grid-area:5/1/6/2;}
#Berei6 {grid-area:1/2/6/3;}

#Bild {width:200px;}



#Reihe0 { grid-area:1/1/2/3; padding:20px;}
#Reihe1 {grid-area:2/1/2/2;padding:20px;}
#Reihe8 {grid-area:3/2/2/3;padding:20px;
display:flex;
		flex-direction:row;
		justify-content:space-around;}




.UE {font-size:44px;
	color:white;}

.UE2 {font-size:32px;
	color:white;}


.N	{font-size:28px;
	color:white;
	font-family:Book Antiqua;
	line-height:150%;
	margin-top:20px;}

.T	{font-size:28px;
	color:white;
	font-family:Book Antiqua;
	line-height:150%;
	margin-top:20px;}

a { text-decoration:none;}

.N:hover {color:#f7c684;}

.Sprechblase {font-size:28px;
		color:#593493;
		font-family:Book Antiqua;
		background-color:white;
		padding:15px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		display:flex;
		flex-direction:row;
		justify-content:space-around;}

.link {color:white;
	background-color:#C496D6;
	padding:10px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	width:200px;
	font-family:Book Antiqua;

	}
.link2 {font-size:20px; color:#d1ccbe; font-family:Book Antiqua; }

.link3 {color:#C496D6;
	background-color:white;
	padding:10px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	width:200px;
	font-family:Book Antiqua;}


.link:hover{color:#C496D6;
	background-color:white;
	padding:10px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	width:200px;}

#Zurueck {display:flex;
	flex-direction:row;
	justify-content:right;}


#Puzzel {display:flex;
	flex-direction:row;
	justify-content:center;
	width:1280px;
	}


#Big {background-color:#593493;
	align-items:flex-start;
	width:1280px;
	justify-content:space-around;
	padding:20px;
	border-style:solid;
	border-width:20px;
	border-color:white;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 100px 150px 150px 150px);
	}

	#Big2 {background-color:#593493;
	width:1280px;
	justify-content:space-around;
	padding:20px;
	border-style:solid;
	border-width:20px;
	border-color:white;
	}


#Zeile1 {Padding:20px;
	justify-content:center;}

#Zeile2 {display:flex;
	flex-direction:row;
	justify-content:center;}
#Zeile3 {display:flex;
	flex-direction:row;
	Padding-top:20px;
	justify-content:space-around;}

#Zeile4 {display:flex;
	flex-direction:column;
}

#Zeile4_1 {
	display:flex;
	justify-content:flex-end;
	width:300px;}





@media only screen and (max-width:950px)
{	#Bild { width:180px;
			display:flex;
	 		flex-direction:column;}
	#Reihe0{padding:15px;}
	#Reihe1{padding:15px;}


	 .N{font-size:22px;
	 }
	  .T{font-size:22px;
	 }
	 .Sprechblase{font-size:20px;
			display:flex;
	 flex-direction:column;}
	 .link2 {font-size:18px;}

	#Formular {color:red;}

	#Be6 {width:200px;}
	#Impressum {grid-area:8/2/8/1}
	#Impressum2 {grid-area:4/2/5/1}
	#Bereich8 {grid-area:7/2/7/2;}
	#Bereich7 {width:170%;}
	#Berei7 {width:170%;}
	#Zeile3 {flex-direction:column;
			justify-content:center;}
	#Formular4 {width:400px;
			max-width:800px;}
	#Big {max-width:900px;}

	#Mutter {border-width:18px;
		grid-template-columns: 50% 45%;
		grid-template-rows: 200px 50px 90px 90px 90px 90px ;
		margin:20px;padding:10px;}

	#Mudda {border-width:18px;
		grid-template-columns: 50% 45%;
			grid-template-rows: 150px 50px 90px 90px 90px 90px ;
		margin:20px;padding:10px;}

	#Mutter2 {border-width:18px;
		grid-template-columns: 50% 45%;
		grid-template-rows: 150px 50px 90px 90px 90px 90px ;
		margin:20px;padding:10px;}

	#Mutter3 {border-width:18px;
	grid-template-columns: 50% 45%;
	grid-template-rows: 150px 50px 90px 90px 90px 90px ;
	margin:20px;padding:10px;}


	#Mutter4 {border-width:18px;
	grid-template-columns: 60% 40%;
	grid-template-rows: 150px 50px 90px 90px 90px 90px ;
	margin:20px;padding:10px;}

	#Mutter5 {border-width:18px;
	grid-template-columns: 50% 50%;
	grid-template-rows: 200px 50px 90px 90px 90px 90px ;
	margin:20px;padding:10px;}
}

@media only screen and (max-width:650px)

{	#Impressum {grid-area:8/2/8/2}
	#Impressum2 {grid-area:5/3/5/1}
	#Berei6 {width:100%;}

	#Text {display:none;}
	#Bild {width:180px;}
	.link {font-size:14px;width:130px;}
	.link:hover {width:130px;}
	.Sprechblase{font-size:20px; padding:15px;
			display:flex;
	 		flex-direction:column;}
	#Reihe0 { grid-area:1/1/2/2; padding:10px;}
	#Reihe1 {grid-area:2/1/3/2;padding:10px;}

	#Reihe8 {grid-area:3/1/3/2;}

	#Bereich8 {grid-area:7/2/7/1; }

	#Be8 {grid-area:7/2/7/1;}
	#Be1 {grid-area:2/1/2/3;max-width:350px;}
	#Be4 {grid-area:5/2/5/4;}
	#Be6 {grid-area:1/4/5/1; width:200px; margin-bottom:5px;}

	#Bereich6 {grid-area:1/2/6/3;}
	.N{font-size:18px;}
	.T {font-size:18px;}
	.link2 {font-size:14px;justify-content:right;}
	#Formular4 {width:100px;
		max-width:200px;}
	#Mutter {border-width:15px;
	grid-template-columns: 60% 40%;
	grid-template-rows: 160px 100px 70px 70px 80px 80px ;
	margin:10px;}

	#Mudda {border-width:15px;
	grid-template-columns: 45% 65%;
	grid-template-rows: 200px 100px 70px 70px 80px 80px ;
	margin:10px;}

	#Mutter2{border-width:15px;
	grid-template-columns: 45% 65%;
	grid-template-rows: 200px 100px 70px 80px 80px 80px ;
	margin:10px;}

	#Mutter3{border-width:15px;
	grid-template-columns: 45% 65%;
	grid-template-rows: 280px 70px 70px 80px 80px 80px ;
	margin:10px;}

	#Mutter4{border-width:15px;
	grid-template-columns: 50% 50%;
	grid-template-rows: 400px 100x 70px 80px 80px 80px ;
	margin:10px;}

	#Mutter5{border-width:15px;
	grid-template-columns: 45% 65%;
	grid-template-rows: 300px 30px 70px 80px 80px 80px ;
	margin:10px;}

	#Berei7 {width:180%;}
	#Bereich7 {width:230%;}
	#Big {grid-template-columns: 100%;
		grid-template-rows: 100px 150px 150px 150px 150px 150px );}