* {margin: 0;
  padding: 0;}
  
html { background: url(fotos/hintergrund.jpg);} 

@font-face {font-family: Nimbus Regular; src:url(schriften/NimbusRomNo9L-Reg.otf);}
@font-face {font-family: Nimbus Medium; src:url(schriften/NimbusRomNo9L-Med.otf);}

body {font-size: 93.75%;
     }  /* font 15px */

a {font-family: Nimbus Regular;
  color: #ffcc99;
  font-size: 1.2em;
  line-height: 134%;
  letter-spacing: 0.5px;}
  
.contentbereich a:hover {color: #aaaaaa;}

.contentbereich a:visited {color: #aaaaaa;}

.drittel_3 a:hover {color: #aaaaaa;}

.drittel_3 a:visited {color: #aaaaaa;}

.seitenanfang_referenzen a:hover {color: #aaaaaa;}

.seitenanfang_referenzen a:visited {color: #aaaaaa;}  

.seitenanfang_ueberuns a:hover {color: #aaaaaa;}

.seitenanfang_ueberuns a:visited {color: #aaaaaa;}  
  
p {font-family: Nimbus Regular;
  color: #ffffff;
  font-size: 1.2em;
  line-height: 134%;
  text-align: left;
  letter-spacing: 0.5px;
  border: 0px solid green;}

h1 {font-family: Nimbus Regular;
  color: #ffffff;
  font-size: 1.5em;
  margin-bottom: 20px;
  letter-spacing: 1px;
  border: 0px solid yellow;}  

/* ANGABE REDUZIERT DIE BREITE DER CONTAINER */

.reihe {border: 0px solid red;}

.container {border: 0px solid blue;
		max-width: 960px;
		margin: auto;}
		
/* HEADER */

.drittel_eins_und_zwei {border: 0px solid gray;
		   width: 60.5%; /* 62.5% */
		  display: inline-block;
		  text-align: right;}

.drittel_1 {border: 0px solid green;}

.drittel_2 {border: 0px solid yellow;
		  max-width: 49%;
		  display: inline-block;
		  vertical-align: top;}
		  
.drittel_2 img{max-width: 100%;}		  

.drittel_3 {border: 0px solid white;
		   display: inline-block;
		   vertical-align: top;
		   float: right;}
		  
.drittel_3 a{padding: 0px 30px 0px 30px;
            font-family: Nimbus Regular;
		    font-size: 1em;}

a.utility {border-right: 1px solid #ffcc99;}			

.container_header {margin-top: 10px;}
				
/* SLOGAN */

.ganz_slogan {border: 0px solid blue;
      text-align: center;
	  padding: 50px 0px 80px 0px;
	  font-size: 2.7em;
	  color: #ffffff;
	  font-family: Nimbus Regular;}
		
/* ANIMATION */

.pc_animation {border: 0px solid green;
        background-image: url(animation/animation.gif);
		background-repeat: no-repeat;
		background-size: contain;
		padding-bottom: 24%;} /* 340 / 1400 = 0.24 */		
		
/* MENUE */

.drittel_eins_und_zwei_menue {border: 0px solid gray;
		   max-width: 69%;
		  display: inline-block;
		  margin-left: 3px;}

.drittel_1_menue {border: 1px solid #ffcc99;
		  max-width: 43%;
		  display: inline-block;
		  margin-right: 6%;
		  background-color: rgba(0, 0, 0, 0.4);
		  padding-top: 20px;}

.drittel_2_menue {border: 1px solid #ffcc99;
		  max-width: 43%;
		  display: inline-block;
		  vertical-align: top;
		  background-color: rgba(0, 0, 0, 0.4);
		  padding-top: 20px;}

.drittel_3_menue {border: 1px solid #ffcc99;
		  max-width: 29.7%;
		  display: inline-block;
		  vertical-align: top;
		  background-color: rgba(0, 0, 0, 0.4);
		  padding-top: 20px;}		

.container_menue {border: 0px solid blue;
		max-width: 960px;
		margin: auto;
		padding-top: 30px;}

.container_menue a {font-size: 1.5em;
                   margin: 20px 10px 10px 30px;
				   border: 0px solid red;
				   font-family: Nimbus Regular;}	

.container_menue a:hover {color: #aaaaaa;}
				   
.container_menue a:visited {color: #aaaaaa;}				   

.container_menue p {font-size: 1.2em;
                   padding: 10px 20px 40px 30px;
				   color: #ffffff;
				   font-family: Nimbus Regular;}				   
		
/* INHALT */
  
.haelfte_1_referenzen {border: 0px solid green;
		  width: 46.4%;
		  display: inline-block;
		  min-height: 440px;
		  padding: 30px 10px 0px 20px;}

.haelfte_1_referenzen p{font-family: Nimbus Regular;
                       border: 0px solid red;
					   font-size: 1.2em;}		  
		  
.haelfte_2_referenzen {border: 0px solid yellow;
		  width: 50%;
		  display: inline-block;
		  vertical-align: top;
		  background-image: url(fotos/gehaeuse_michelfeld.jpg);
		  background-repeat: no-repeat;
		  background-size: contain;
		  padding-bottom: 50%;}
		  
.container_referenzen {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;}	
		
.seitenanfang_referenzen {border: 0px solid red;}

.seitenanfang_referenzen a{font-family: Nimbus Regular;
                           font-size: 1em;
						   border: 0px solid blue;}
						  
.haelfte_1_ueberuns {border: 0px solid green;
		  width: 50%;
		  display: inline-block;
		  vertical-align: top;
		  background-image: url(fotos/Arbeitsbild_Gilbert.jpg);
		  background-repeat: no-repeat;
		  background-size: contain;
		  padding-bottom: 50.1%;}

.haelfte_2_ueberuns {border-bottom: 0px solid green;
		  width: 46%;
		  display: inline-block;
		  vertical-align: top;
		  min-height: 440px;
		  padding: 30px 10px 0px 20px;}
		  
.haelfte_2_ueberuns p{font-family: Nimbus Regular;
                       border: 0px solid red;
					   font-size: 1.2em;}

.container_ueberuns {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;}

.seitenanfang_ueberuns a{float: right;
                         position: relative; bottom: 9px; right: 6px;
						 font-family: Nimbus Regular;
						 font-size: 1em;}
						  
.haelfte_1_extras {border: 0px solid green;
		  width: 46.4%;
		  display: inline-block;
		  min-height: 440px;
		  padding: 30px 10px 0px 20px;}
		  
.haelfte_1_extras  p{font-family: Nimbus Regular;
                       border: 0px solid red;
					   font-size: 1.2em;}		  

.haelfte_2_extras {border: 0px solid green;
		  width: 50%;
		  display: inline-block;
		  vertical-align: top;
		  background-image: url(fotos/Produktbild.jpg);
		  background-repeat: no-repeat;
		  background-size: contain;
		  padding-bottom: 50%;}
		  
.seitenanfang_extras {margin-top: -1%;}	

.seitenanfang_extras a{font-family: Nimbus Regular;
                           font-size: 1em;
						   border: 0px solid blue;}	

.container_extras {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;}		  

/* KONTAKT */

.ganz_kontakt {border: 0px solid green;
          min-height: 440px;
      	  padding: 30px 10px 30px 20px;}
		  
.ganz_kontakt p {font-family: Nimbus Regular;
                       border: 0px solid red;
					   font-size: 1.2em;}

.ganz_kontakt p a {font-family: Nimbus Regular;
                       border: 0px solid red;
					   font-size: 1em;}					   
		  

.container_kontakt {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;}	

.ganz_kontakt .seitenanfang_kontakt a{float: right;
                                     position: relative; right: 0px;
									 font-family: Nimbus Regular;
									 font-size: 1em;}		


/* WOCHENINFORMATION */

.ganz_wocheninformation {border: 0px solid green;
          min-height: 440px;
      	  padding: 30px 10px 30px 20px;}

.container_wocheninformation {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;}	

.ganz_wocheninformation .seitenanfang_wocheninformation a{float: right;
                                     position: relative; right: 0px;
									 font-family: Nimbus Regular;
									 font-size: 1em;}		
					
.text_wocheninformation p{border: 0px solid green;
                         text-align: center;}
					
/* IMPRESSUM */

.ganz_impressum {border: 0px solid green;
          min-height: 440px;
      	  padding: 30px 10px 70px 20px;}

.container_impressum {border-bottom: 1px solid #ffcc99;
		max-width: 960px;
		margin: auto;
		margin-bottom: 20px;}

.ganz_impressum p{font-size: 1em;}

.ganz_impressum_justify p{ text-align: justify;}		
		
.ganz_impressum .seitenanfang_impressum a{float: right;
                                         position: relative; bottom: -40px;
										 font-family: Nimbus Regular; 
										 font-size: 1em;}

.ganz_impressum h1{font-size: 1em;}		


@media screen and (max-width: 1180px) {

html {border: 0px solid red;}

.drittel_2 a{border: 0px solid yellow;
            margin-left: 13%;
		  }

.drittel_3 {border: 0px solid green;
           margin-top: 14px;
		   width: 99%;
		   text-align: center;}

}

										 

@media screen and (max-width: 980px) {

html {border: 0px solid red;}	

/* LOGO */

.drittel_eins_und_zwei  {/*width: 63.5%;*/
                        border: 0px solid red;
						width: 100%;
						text-align: center;}

.drittel_2 img{width: 260px;}

.drittel_2 a{border: 0px solid yellow;
            	margin-left: 0%;}
				
.drittel_2 {border: 0px solid green;
           }	  

/* MENUE */

.container_menue {border: 0px solid red;
                 margin: auto;
				 padding: 30px 10px 0px 10px;}
				 
.drittel_3_menue {border: 1px solid #ffcc99;
		  width: 100%;}				 


/* REFERENZEN */

.container_referenzen {margin: 0px 15px 0px 15px;}

.haelfte_1_referenzen {width: 84%;
                      margin: -7% 0% 0% 5%;
					  border-bottom: 0px solid #ffcc99;}

.haelfte_2_referenzen {display: none;}
 
.seitenanfang_referenzen {float: right;}
 
/* UEBER UNS */

.container_ueberuns {margin: 0px 15px 0px 15px;}

.haelfte_2_ueberuns {width: 84%;
                     margin: 5% 0% 0% 5%;
					 border-bottom: 0px solid #ffcc99;}

.haelfte_1_ueberuns {display: none;}
 
.seitenanfang_ueberuns {float: right;}

/* EXTRAS */

.container_extras {margin: 0px 15px 0px 15px;}

.haelfte_1_extras {width: 84%;
                   margin: 0% 0% 4% 5%;
				   border-bottom: 0px solid #ffcc99;}

.haelfte_2_extras {display: none;}
 
.seitenanfang_extras {position: relative; top: 25px;
                      float: right;}		

/* KONTAKT */

.container_kontakt {margin: 0px 15px 0px 15px;}

.ganz_kontakt {width: 84%;
             margin: 5% 0% 0% 5%;
			 border-bottom: 0px solid #ffcc99;}

.seitenanfang_kontakt {float: right;
                margin-bottom: 10px;}				

/* WOCHENINFORMATION */

.container_wocheninformation {margin: 0px 15px 0px 15px;}

.ganz_wocheninformation {width: 84%;
             margin: 5% 0% 0% 5%;
			 border-bottom: 0px solid #ffcc99;}

.seitenanfang_wocheninformation {float: right;
                margin-bottom: 10px;}				
				
				
				
/* IMPRESSUM */

.container_impressum {margin: 0px 15px 40px 15px;}

.ganz_impressum {width: 84%;
                margin: 5% 0% 0% 5%;
				border-bottom: 0px solid #ffcc99;}
				
.seitenanfang_impressum {float: right;
                margin-bottom: 10px;}				
				
}
					   
@media screen and (max-width: 720px) {

html {border: 0px solid blue;}

/* HEADER */

.drittel_eins_und_zwei {border: 0px solid gray;
		  width: 99%;
		  text-align: center;}

.drittel_1 {border: 0px solid green;
		  }

.drittel_2 {border: 0px solid yellow;
		  width: 99%;
		  text-align: center;}

.drittel_3 {border: 0px solid white;
		  text-align: center;
		  margin: auto;
		  margin-top: 2%;
		  max-width: 99%;}
		  
a.utility {border-right: 0px solid #ffcc99;}			  
		  
/* ANIMATION */	

.pc_animation {visibility: hidden;}	

.tablet_animation {visibility: visible;
                   border: 0px solid green;
                   background-image: url(fotos/Gehaeuse_Sulpach.jpg);
		           background-repeat: no-repeat;
		           background-size: contain;
		           margin-bottom: -130%;
		           padding-bottom: 135%;}		  
		  
/* SLOGAN */

.ganz_slogan {font-size: 2.3em;
              border: 0px solid green;
              margin-top: 6%;}		  
		  

/* MENUE */

.drittel_eins_und_zwei_menue {
		   border: 0px solid red;
		   width: 70%;}

.drittel_1_menue {border: 1px solid #ffcc99;
		   max-width: 100%;
		   display: block;
		   vertical-align: top;
		   background-color: rgba(0, 0, 0, 0.4);
		   margin-bottom: 30px;
		   margin-right: 0%;}

.drittel_2_menue {border: 1px solid #ffcc99;
		  max-width: 100%;
		  display: block;
		  background-color: rgba(0, 0, 0, 0.4);
		  margin-bottom: 30px;}

.drittel_3_menue {border: 1px solid #ffcc99;
		  max-width: 69%;
		  background-color: rgba(0, 0, 0, 0.4);	
		  margin-bottom: 30px;}
		  
.container_menue {border: 0px solid green;
                 text-align: left;
                 margin-top: 30px;
                 margin-left: 22%;
                 width: 70%;}

/* INHALT */

.container_referenzen {padding-top: 50px;
                      margin: -150px 0px 0px 0px;
                      background: url(fotos/hintergrund.jpg)}

.container_ueberuns {margin: 0px 0px 0px 0px;
                     background: url(fotos/hintergrund.jpg);}
					 
.container_extras {margin: 0px 0px 0px 0px;}

.container_kontakt {margin: 0px 0px 0px 0px;}

.container_impressum {margin: 0px 0px 40px 0px;}					 

.haelfte_1_extras {width: 84%;
margin: 0% 5% 7% 5%;}

}

@media screen and (max-width: 490px) {

html {border: 0px solid yellow;}

/* Logo */

.drittel_2 img{width: 180px;}

.drittel_3 a{display: block;}

.drittel_3 {margin-top: 20px;
            margin-bottom: 20px;}
		   

/* SLOGAN */

.ganz_slogan {margin-left: 10px;}

/* ANIMATION */

.pc_animation {visibility: hidden;}	

.tablet_animation {visibility: hidden;}	

.phone_animation {visibility: visible;
         border: 0px solid blue;
         background-image: url(fotos/Gehaeuse_Sulpach_490.jpg);
	     width: 100%;}
	
/* MENUE */

.container_menue p {padding: 10px 20px 40px 20px;}

.container_menue a {margin: 20px 10px 10px 20px;}

/* INHALT */

.contentbereich {border: 0px solid green;
                 width: 90%;
                 margin: auto;}

.container_referenzen {margin-top: -80px;
                       background: none;}

.container_ueberuns {background: none;}					   

.seitenanfang_extras {position: relative; top: 12px;
                      float: right;}		
	  
}		  
@media screen and (max-width: 440px) {

html {border: 0px solid blue;}

/* Logo */

.drittel_2 img {width: 140px;}


/* HEADER */

.drittel_2 {border: 0px solid blue;
           margin-left: 0%;}
			
.drittel_3 {border: 0px solid green;
            width: 100%;
            margin: auto;
            text-align: center;
            padding: 20px 0px 20px 0px;
}
}

@media screen and (max-width: 380px) {

html {border: 0px solid blue;}

.drittel_3 a{display: block;}

.drittel_3 {margin-top: 20px;
            margin-bottom: 20px;}

}