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

/* Randabstand fuer Flexboxen  * * * * * * * * */   
.wrapper_flexrand {
    width: 100%;
    text-align: center;
	padding: 0px 15px 0px 15px;
	margin: auto;
} 
    
/*  Randabstände der Boxen innerhalb */	
.inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT,  .wrapper_flexrand {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 
   /*  Gemeinsame AUSRICHTUNG - Textrichtung innerhalb der Box */	
.inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT  {
  flex-direction: column;
}  
/*  Gemeinsame Eigenschaften der flexwrapper 2 3 4 ----------------------------*/	       
  .flexwrapper_2, .flexwrapper_3, .flexwrapper_4, .flexwrapper_2_angepasst {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}  
 /*  Gemeinsame Eigenschaften der INHALTSboxen ----------------------------*/	       
  .inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT, .inhalt2_1_ang, .inhalt2_2_ang  {
	display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1;
}        
    
    
/*  ZWEIer mit wrapper ----------------------------*/	       
  .flexwrapper_2 {
    flex-basis: calc(100%/2);
} 
.inhalt2_1, .inhalt2_2 {
    flex-basis: 48%;
    padding: 10px 10px;
	} 
 .inhalt2_1 {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2 {
     order: 2;
     margin: 1% 0 1% 1%;
	}

/*  ZWEIer mit wrapper ANGEPASST -----------------------*/	
.flexwrapper_2_angepasst {
    flex-basis: calc(100%/2);
} 
.inhalt2_1_ang, .inhalt2_2_ang  {
    padding: 10px 0px;
}
 .inhalt2_1_ang {
     flex-basis: 30%;
     order: 1;
     margin:  0;
	}
.inhalt2_2_ang {
    flex-basis: 70%;
     order: 2;
     margin:  0 ;
    justify-content: flex-end;
	}



/*  ZWEIer mit wrapper UNGLEICH -----------------------*/	       
  .flexwrapper_2_ungleichT {
    flex-basis: calc(100%/2);
} 
.inhalt2_1ungleichT, .inhalt2_2ungleichT  {
    padding: 10px 10px;
}
 .inhalt2_1ungleichT {
     flex-basis: 38%;
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2ungleichT {
    flex-basis: 58%;
     order: 2;
     margin: 1% 0 1% 1%;
	}
 
/*  DREIer mit wrapper -----------------*/   
.flexwrapper_3 {
    flex-basis: calc(100%/3);
} 
.inhalt3_1, .inhalt3_2, .inhalt3_3 {
    flex-basis: 30%;
    padding: 10px 10px;
	} 
 .inhalt3_1 {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt3_2 {
     order: 2;
    margin: 1% 1% 1% 1%;
	}
.inhalt3_3 {
     order: 3;
    margin: 1% 0 1% 1%;
	}
    
/*  VIERer mit wrapper ------------------- */   
.flexwrapper_4 {
	 flex-basis: calc(100%/4);
}  
.inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4 {
    padding: 10px 10px;
    flex-basis: 23.5%;
	} 
 .inhalt4_1 {
     order: 1;
      margin: 1% 1% 1% 0;
	}
.inhalt4_2 {
     order: 2;
    margin: 1% 1% 1% 1%;
	}
.inhalt4_3 {
     order: 3;
    margin: 1% 1% 1% 1%;
	}
  .inhalt4_4 {
     order: 3;
      margin: 1% 0 1% 1%;
	} 
    

 .schrift_stil_01 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: bold;
    font-size: 1.2em;
    color: #242424;
    letter-spacing: 1px;
    line-height: 120%;
	}   
    
    
/*  VIERER Boxen bei MEDIA 1000 -------------------------*/
@media screen and (max-width: 1050px) 
{
 /*  Gemeinsame Eigenschaften -----------------*/	   
.inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4 {
    flex-basis: 48%;
	} 
.inhalt4_1 {
    margin: 1% 1% 1% 0;
	} 
.inhalt4_2 {
    margin: 1%  0 1% 1%;
	} 
.inhalt4_3 {
    margin: 1% 1% 1% 0;
	}
.inhalt4_4 {
     margin: 1%  0 1% 1%;
	} 
   .inhalt2_1_ang {
     max-height: 70px;
     flex-basis: 40%;
     order: 2;
       justify-content: flex-end;
     
	}
.inhalt2_2_ang {
    flex-basis: 60%;
     order: 1;
    justify-content: flex-start;
    
	}    
    
} 
    
    /*  DREIER Boxen bei MEDIA 800 -------------------------*/ 
@media screen and (max-width: 800px) 
{
.inhalt3_1  {
    flex-basis: 48%;
    margin: 1% 1% 1% 0;
	}
.inhalt3_2 {
    flex-basis: 48%;
    margin: 1% 0 1% 1%;
	}
.inhalt3_3 {
    flex-basis: 100%;
    margin: 1% 0 1% 0;
	} 
    
  

}
    
/*  ZWEIER und DREIER und VIERER Boxen bei MEDIA 600 -------------------------*/  
 @media screen and (max-width: 600px) 
{
	
.inhalt2_1, .inhalt2_2 {
    flex-basis: 100%;
   margin: 1% 0 1% 0;
	} 

/*  DREIER Boxen bei MEDIA 600 -------------------------*/   
.inhalt3_1,.inhalt3_2, .inhalt3_3 {
    flex-basis: 100%;
    margin: 1% 0;
	} 

/*  VIERER Boxen bei MEDIA 600 -------------------------*/ 
.inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4 {
    flex-basis: 100%;
    margin: 1% 0 1% 0;
	}

/*  UNGLEICHE Boxen bei MEDIA 600 -------------------------*/ 
.inhalt2_1ungleichT {
     flex-basis: 100%;
     order: 2;
     margin: 1% 0 1% 0;
	}
.inhalt2_2ungleichT {
    flex-basis: 100%;
     order: 1;
     margin: 1% 0 1% 0;
	} 
  .inhalt3_3 {
    margin: 1% 0 0 1%;
	}  
    
    
    
}