@charset "utf-8";
/* CSS Document */

body {
margin: 0px;
padding: 0px;
background-color: rgb(131,144,133);
/* background-color: rgb(95,41,39); */
overflow-x: hidden;
overflow-y: scroll;
}

  
/*
.section {
        background-color: rgba(102,102,102,0);
        border-radius: 2em;
        position: absolute;
		width: 80%;
		height: 90%;
        top: 50%;
        left: 75%;
		padding: 2em;
        margin-right: -80%;
        transform: translate(-80%, -50%);
		 }
*/

.container0 {
	float: right;
	width: 80%;
	margin: 0em;
	padding: 0em;
	border-style: none;
}

.container01 {
	float: right;
	width: 20%;
	margin: 0em;
	padding: 0em;
	border-style: none;
}

.container02 {
	float: right;
	width: 40%;
	margin: 0em;
	padding: 0em;
	border-style: none;
}

.container03 {
	float: right;
	width: 40%;
	margin: 0em;
	padding-top: 0em;
	border-style: none;
}

.container1 {
	clear: both;
	float: left;
	margin: 0em;
	padding-left: 0em;
	width: 10%;
	border-width: thin;
	border-style: none;
}

.container2 {
	float: left;
	width: 20%;
	margin: 0em;
	padding-right: 3em;	
}

.container3 {
	float: left;
	margin: 0em;
	padding: 0em;
	width: 60%;
	border-width: thin;
	border-style: none;
}

.container2-3 {
	float: left;
	margin: 0em;
	padding: 0em;
	width: 80%;
	border-width: thin;
	border-style: none;
}





a:link {
    text-decoration: none;
	color: #d2f0d2; 
	font-weight: 500;
}

a:visited {
    text-decoration: none;
	color: #d2f0d2;
}

a:hover {
    text-decoration: none;
	color: #183d18; 
}

a:active {
    text-decoration: none;
}



.text {
   	display: inline; 
	margin: 0em;
	padding: 0em;
	font-family: "Noto Sans", "Century", sans-serif;
	font-size: 1em;
	font-weight: 600;
	font-variation-settings: "wdth" 100;
	color: rgb(255,255,255);
}

.text-spalten {
	font-family: "Noto Sans", "Century", sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	column-count: 2;
	column-gap: 2vw;
	text-align: justify;
	margin: 0em;
	padding: 0em;
	color: rgb(220,220,220);
}

.text-small {
font-family: "Noto Sans", "Century", sans-serif;
 font-size: 0.8em;
 font-weight: 300;
 line-height:150%;
 padding-bottom: 3px;
 color: rgb(255,255,255);
}

.text-small-fett {
	font-family: "Noto Sans", "Century", sans-serif;
	 font-weight: 500;
	 line-height:150%;
	 padding-bottom: 3px;
	 color: rgb(255,255,255);
	}

.text-sub {
font-family: "Noto Sans", "Century", sans-serif;
 font-size: 0.65em;
 font-weight: 400;
 color: rgb(230,230,230);
}

.text-big {
font-family: "Noto serif", "Century", sans-serif;
 font-size: 1.8em;
 line-height: 150%;
 padding-bottom: 3px;
 color: rgb(204,204,204);
}


.text-menu {
	display: inline;
   	font-family: "Noto Sans", "Century Gothic", "Century", sans-serif;
	font-size: 0.75em;
	/*padding-bottom: 3px;*/
	color: rgb(51,51,51);
}

div.img {
	margin: 0em;
	height: 100%;
	width: 100%;
	}
	
.container-p {
	float: left;
	margin: 0.2em;
	padding: 0.2em;
	width: 18%;
	border: solid thin rgb(95,41,39);
	
	}
	
.container-pp {
	float: left;
	margin: 0.2em;
	padding: 0.2em;
	width: 25%;
	border: solid thin #FF9900;
	
	}

.container-pp {
	float: left;
	margin: 0.2em;
	padding: 0em;
	width: 34%;
	border: solid thin;
	}
	
.container-ppp {
	float: left;
	margin: 0.4em 0.4em;
	padding: 0.1em;
	width: 22%;
	border: solid thin rgb(95,41,39);
	}

	.container-pppp {
		float: left;
		margin: 1em 0em;
		padding: 0em;
		width: 33%;
		}

.sidepanel  {
	width: 0;
	position: absolute;
	z-index: 1;
	height: 610px;
	top: 0px;
	left: 0px;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 30px;
  }
		  
	.sidepanel a {
  	display: block;
	padding: 2px 16px;
  	transition: 0.3s;
  	}
		  
	.sidepanel a:hover {
		color: #f1f1f1;
 	 }
		  
	.sidepanel .closebtn {
		position: absolute;
		top: 0;
		right: 8px;
		font-size: 36px;
		color: white;
	  }
		  
	.openbtn {
	position: absolute;
	top: 0;
	left: 8px;
	font-size: 20px;
	cursor: pointer;
	background-color: #111;
	color: white;
	padding: 10px 15px;
	border: none;
	  }
		  
	.openbtn:hover {
	background-color:#444;
	  }
		

.box {
background: #b4b4b4;
width: 8em; 
height: 0.8em;
margin: 0px;
padding: 7px;
border-radius: 4px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.box:hover {
background: #cccccc;
width: 10em;

} 
	
.box-aktiv {
background: #9d9276;
width: 10em; 
height: 0.8em;
margin: 0px;
padding: 7px;
border-radius: 4px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}

.box-aktiv:hover {
/*	background: #60490c;*/
	width: 10em; 
	}


	@media only screen and (max-width: 900px) {
		.container1 {
			clear: both;
			float: left;
			margin: 0em;
			padding-left: 0em;
			width: 0%;
			border-width: thin;
			border-style: none;
		}
		
		.container2 {
			float: left;
			width: 90%;
			margin: 0em;
			padding-left: 2em;	
		}
		
		.container3 {
			float: left;
			margin: 0em;
			padding-left: 2em;
			width: 90%;
			border-width: thin;
			border-style: none;
		}
		
		.container2-3 {
			float: left;
			margin: 0em;
			padding-left: 2em;
			width: 90%;
			border-width: thin;
			border-style: none;
		}
	}

	@media only screen and (max-width: 500px) {
		.container1 {
			clear: both;
			float: left;
			margin: 0em;
			padding-left: 0em;
			width: 0%;
			border-width: thin;
			border-style: none;
		}
		
		.container2 {
			float: left;
			width: 100%;
			margin: 0em;
			padding-left: 1em;
		}
		
		.container3 {
			float: left;
			margin: 0em;
			padding-left: 1em;
			width: 100%;
			border-width: thin;
			border-style: none;
		}
		
		.container2-3 {
			float: left;
			margin: 0em;
			padding-left: 1em;
			width: 100%;
			border-width: thin;
			border-style: none;
		}

	}

	@media only screen and (orientation: portrait) {

		.container1 {
			clear: both;
			float: left;
			margin: 0em;
			padding-left: 0em;
			width: 0%;
			border-width: thin;
			border-style: none;
		}
		
		.container2 {
			float: left;
			width: 100%;
			margin: 0em;
			padding-left: 1em;
		}
		
		.container3 {
			float: left;
			margin: 0em;
			padding-left: 1em;
			width: 100%;
			border-width: thin;
			border-style: none;
		}
		
		.container2-3 {
			float: left;
			margin: 0em;
			padding-left: 1em;
			width: 100%;
			border-width: thin;
			border-style: none;
		}

		.text {
			font-size: 3em;
		}
		
		.text-spalten {
			font-size: 2em;
			column-count: 1;
		}
		
		.text-small {
		 font-size: 2em;
		}
		
		.text-sub {
		 font-size: 1em;
		 font-weight: 400;
		}
		
		.text-big {
		 font-size: 3em;
		}
		
		
		.text-menu {
			font-size: 2em;
		}

/* Sidepanel mit Inhalt für Mobile Portrait */

.sidepanel  {
	width: 0;
	position: absolute;
	z-index: 1;
	height: 1280px;
	top: 0px;
	left: 0px;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 30px;
  }
		  
	.sidepanel a {
  	display: block;
	padding: 2px 16px;
  	transition: 0.3s;
  	}
		  
	.sidepanel a:hover {
		color: #f1f1f1;
 	 }
		  
	.sidepanel .closebtn {
		position: absolute;
		top: 0;
		right: 8px;
		font-size: 72px;
		color: white;
	  }
		  
	.openbtn {
	position: absolute;
	top: 0;
	left: 8px;
	font-size: 40px;
	cursor: pointer;
	background-color: #111;
	color: white;
	padding: 10px 15px;
	border: none;
	  }
		  
	.openbtn:hover {
	background-color:#444;
	  }
		

.box {
background: #b4b4b4;
width: 24em; 
height: 2.4em;
margin: 0px;
padding: 16px;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.box:hover {
background: #cccccc;
width: 28em;

} 
	
.box-aktiv {
background: #9d9276;
width: 28em; 
height: 2.4em;
margin: 0px;
padding: 16px;
border-radius: 10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}

.box-aktiv:hover {
/*	background: #60490c;*/
	width: 28em; 
	}


	}