* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	word-wrap: break-word;
}


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




a   {
     color: teal;
     text-decoration: none;
   }






body  {
      background-image:  url("bilder/blanko.jpg"); background-attachment: fixed;
	  background-repeat: no-repeat;
	  background-color: #abdfd2;
	  
	  font-family: Arial, Helvetica, sans-serif;
}



header, footer {
	    color: white;
		width: 100%;
		background-color:  ;
		border-radius: 25px;
		margin-top: 20px;
		margin-bottom: 10px;
		padding: 10px;
		overflow: auto;
		text-align: center;
}


header img  {
	    
		margin: 10px;
		border-radius: 50%;
		text-align: center;
}


header h1   {
	
	     font-size: 2em;
		 margin: 15px 15px 15px 120px;
		 text-align: center;
}


header h2  {
	
	    font-size: 1.3em;
		margin-left: 50%;
		color: red;
}


nav   { 
      padding: 10px;
	  
}



div {
	  font-size: 1em;
	  padding: 20px;
	  margin: 10px;
	  
}


#ele1  {
	   background-color: none;
	   flex: 1;
}


#ele2  {
	   background-color: none;
	   flex: 1;
}



#ele3  {
	   background-color: none;
	   flex: 1;
}





#container {
	     display: flex;
		 flex-wrap: wrap;
}







article  {
	     width: 95%;
		 padding: 10px;
		 font-family: "Snell Roundhand", "Comic Sans Ms"; cursive;
		 color: black;
              font-size: 1.2em;
             text-align: center;
		background-color: white;	 
             
}





aside  {
	   padding: 10px;
	   border-radius: 25px;
	  background-color: ;
	   
}

aside img  {
	    float: left;
		margin: 10px;
		border-radius: 50%;
		
}





/*.................................................... */










#hauptbereich  {
	        width: 100%;
			background-image: #F2FEFD;
			margin-top: 20px;
			margin-bottom: 20px;
			padding: 15px;
			border-radius: 25px;
}


nav li   {
          background-color: teal;
		  border-radius: 15px;
		  margin-top: 10px;
		  margin-bottom: 10px;
		  padding: 10px;
		  font-size: 1.3em;
		  list-style: none;
		  
		  text-decoration: none;
		  
}



nav a {
	    color: white;
		text-decoration: none;
		
		
}



nav  a:hover  {
	    color: red;
		
		
		
		
}


h1  {
	 margin-top: 30px;
	 padding-bottom: 20px;
	 text-align: center;
	 color: purple;
	 font-family: "Snell Roundhand", "Comic Sans Ms"; cursive;
	 letter-spacing: 2px;
	 text-align: center;
	 
}



p {
	margin-top: 10px;
	margin-bottom: 10px;
}
















input[type="checkbox"] {
    position: ;
    
   font-size: 1.2em;
   border: 1px solid silver;
   
   border-radius: 20px;
}



input[type="checkbox"] {
   content: '\a0'; /* nicht umbrechendes Leerzeichen */
   display: inline-block;
   width: 1.2em;
   height: 1.2em;
   margin-right: .2em;
   border-radius: .8em;
   background: silver;
   text-indent: .15em;
   line-height: .65;
}





/* Absende-Buttons*/

input[type="submit"] {
   font-size: 1em; padding: 2px 6px; 
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: white;
   border: 1px solid silver;
   background-color: green;
   border-radius: 20px;
}


input[type="reset"] {
   font-size: 1em; padding: 2px 6px; 
   font-family: Roboto, sans-serif;
   font-weight: 300;
   color: white;
   border: 1px solid silver;
   background-color: green;
   border-radius: 20px;
}






























.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.video-container-wrapper {
max-width: 100%;
width: 600px;
left: 0;
right:0;
margin:auto;
}



































figure  {
	
	margin: 30px;
}




footer {
	  min-height: 80px;
	  text-align: center;
	  padding-top: 20px;
	  color: honeydew;
	  
	  
}



@media only screen and (min-width: 600px)  {
	    nav li {
			  display: inline-block;
			  border-radius: 10px;
			  margin-right: 2%;
			  padding: 5px;
			  font-size: 1.1em;
			  
		}
		

article  {
	   width: 60%;
	   float: left;
}


aside  {
       width: 40%;
	   float: left;
}


#hauptbereich  {
	
	  overflow: auto;
}


@media only screen and (min-width: 768px)  {
	     #gesamt {
			  width: 100%;
			  margin: auto;
		 }
		 
		 
		 nav {
			 float: left;
			 width: 20%;
		 }
		 
		 
		 article  {
			 
			 width: 50%;
			 margin-top: 20px;
		 }
		 
		 
		 aside  {
			 width: 25%;
			 margin-top: 20px;
		 }
		 
		 
		 nav li {
			 display: block;
			 padding: 10px;
			 font-size: 1.3em;
		 }
		 
}