* {margin: 0;
  padding: 0;}
  
html {} 

body {font-size: 93.75%;
     background-image: url('background_d_2.png');
	 background-repeat: no-repeat;
	 background-size: 100%;
	 background-color: #000000;
	 }  /* font 15px */
	 
@font-face {font-family: dosis_light;
  src: url(font/Dosis-Light.otf);
}  	 

@font-face {font-family: dosis_semibold;
  src: url(font/Dosis-SemiBold.otf);
}  	 


@font-face {font-family: dosis_bold;
  src: url(font/Dosis-Bold.otf);
}

/* ANGABE REDUZIERT DIE BREITE DER CONTAINER */

.reihe {border: 0px solid yellow;
       }

.container {border: 0px solid blue;
		max-width: 100%;
		/*margin: auto;*/
		color: #ffffff;
		}
		
h1 {font-size: 2.3vw;
    font-family: dosis_bold;
   letter-spacing: 0.04em;
   line-height: 110%;
   padding: 0% 0% 2% 0%;}
   
h2 {font-size: 0.9vw;
font-family: dosis_bold;
padding: 0% 9% 0% 9%;
color: #aaaaaa;}   
	
p {font-size: 1.6vw;
   padding: 3% 0% 0% 0%;
   line-height: 120%;
   font-family: dosis_light;
   letter-spacing: 0.05em;}
   
.impressum_datenschutz {padding-top: 9%;
                       padding-bottom: 8%;}   
   
.impressum_datenschutz p {font-size: 0.9vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
			   color: #aaaaaa;
			   }   

.impressum_datenschutz ul{font-size: 0.9vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
               color: #aaaaaa;}	

.impressum_datenschutz a {text-decoration: none;
                        color: #264e80;
                        font-family: dosis_semibold;
                        }
   
.drittel_3 p{font-size: 1.3vw;
             line-height: 130%;} 
			 
.drittel_2 a {text-decoration: none;
			font-size: 1.2vw;
			font-family: dosis_semibold;
			line-height: 130%;
			color: #264e80;} 
			
.drittel_3 a{text-decoration: none;
          color: #264e80;
          font-family: dosis_semibold;
          font-size: 1.6vw;
          letter-spacing: 0.03em;}			
			
ul {font-size: 1.6vw;
line-height: 130%;
   padding: 0% 0% 0% 12%;
   font-family: dosis_light;
   letter-spacing: 0.05em;
   list-style-type: none;} 

/* GEDRITTELT */

.drittel_eins_und_zwei {border: 0px solid gray;
		  /*max-width: 65.5%;*/ /* 66,6 */
		  width: 61%;
		  display: inline-block;
		  }

.drittel_1 {border:0px solid green;
		  /*max-width: 49%;*/ /* 50 */
		  max-width: 50%;
		  display: inline-block;
		  padding: 10% 15% 0% 15%;
		  /*margin: 13% 0% 0% 15%;*/
		  }

.drittel_2 {border: 0px solid yellow;
		  /*max-width: 49%;*/ /* 50 */
		  max-width: 10%;
		  display: inline-block;
		  vertical-align: top;
		  padding: 90% 0% 5% 5%;
		  }

.drittel_3 {border: 0px solid red;
		  /*max-width: 32.75%;*/ /* 33,3 */
		  max-width: 30%;
		  display: inline-block;
		  vertical-align: top;
		  padding: 33% 0% 0% 6%;
		  }
		  


@media screen and (max-width: 640px) {
	
body{background-image: url('background_m_1.png');
	 background-repeat: no-repeat;
	 background-size: 100%;
	 background-color: #000000;
	 border: 0px solid red;}	

html {border: 0px solid red;
    }

.drittel_1 h1 {font-size: 3.9vw;
    padding: 0% 0% 5% 0%;}

.drittel_1 p {font-size: 3.5vw;
   padding: 3% 0% 0% 0%;
   line-height: 120%;
   font-family: dosis_light;
   letter-spacing: 0.05em;}
    
	
.drittel_1 ul {font-size: 3.5vw;
   line-height: 130%;
   padding: 0% 0% 0% 12%;
   font-family: dosis_light;
   letter-spacing: 0.05em;
   list-style-type: none;
   padding: 0% 0% 5% 0%;}	
	
.impressum_datenschutz h2 {font-size: 2.3vw;
font-family: dosis_bold;
color: #aaaaaa;
padding: 0% 9% 0% 9%;}	

.container .impressum_datenschutz {padding-top: 20%;}
	
.container .impressum_datenschutz p{font-size: 2.3vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
			   color: #aaaaaa;
			   } 	
			   
.impressum_datenschutz ul {font-size: 2.3vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
			   color: #aaaaaa;
			   } 			   
	
	
.drittel_2 a {font-size: 2.3vw;
            }

.container .drittel_3 p{font-size: 3vw;
             line-height: 130%;} 
		
		
.container .drittel_3 a{font-size: 3.7vw;}		

.drittel_eins_und_zwei {border: 0px solid gray;
		  width: 75%;
		 }

.drittel_1 {border: 0px solid green;
		  max-width: 90%;
		  display: block;
		  }

.drittel_2 {border: 0px solid yellow;
		  width: 100%;
		  height: 0;
		  padding: 80% 0% 15% 20%;}

.drittel_3 {border: 0px solid red;
		  width: 23%;
		  padding: 115% 0% 0% 0%;
		  margin-left: -29.5%;}
		  
}		  
		  
@media screen and (max-width: 840px) {

html {border: 0px solid blue;}		  
		  
h1 {font-size: 2.5vw;
padding: 0% 0% 5% 0%;}

	p {font-size: 2.1vw;
	padding: 0% 0% 5% 0%;}
	
h2 {font-size: 1.1vw;
font-family: dosis_bold;
padding: 0% 9% 0% 9%;
color: #aaaaaa;}

.impressum_datenschutz {padding-top: 13%;}	
	
.impressum_datenschutz p {font-size: 1.1vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
			   color: #aaaaaa;
			   } 	
			   
.impressum_datenschutz ul {font-size: 1.1vw;
               font-family: dosis_light;
			   padding: 0% 9% 1% 9%;
			   color: #aaaaaa;
			   } 			   
	
ul {font-size: 2.1vw;
  padding: 0% 0% 5% 0%;}	
	
.drittel_2 a {font-size: 1.8vw;
            }

.drittel_3 p {font-size: 1.8vw;
             line-height: 130%;}
			 
		.drittel_3 a {font-size: 2.2vw;}			 
			 
@media screen and (max-width: 440px) {

html {border: 0px solid red;}

.haelfte_1 {border: 1px solid green;
		  width: 100%;}

.haelfte_2 {border: 1px solid yellow;
		  width: 100%;}
		  
.goldenerschnitt_1_gross {border: 1px solid green;
		  max-width: 100%;}

.goldenerschnitt_1_klein {border: 1px solid yellow;
		  width: 100%;}	

.goldenerschnitt_2_klein {border: 1px solid green;
		  max-width: 100%;}

.goldenerschnitt_2_gross {border: 1px solid yellow;
		  width: 100%;}

.viertel_eins_und_zwei {border: 1px solid gray;
		  max-width: 100%;}

.viertel_1 {border: 1px solid green;
		  max-width: 100%;}

.viertel_2 {border: 1px solid yellow;
		  max-width: 100%;}
		  
.viertel_drei_und_vier {border: 1px solid gray;
		  max-width: 100%;}		  

.viertel_3 {border: 1px solid black;
		  max-width: 100%;}

.viertel_4 {border: 1px solid black;
		  max-width: 100%;}	

}		  
		  