@charset "utf-8";
/* CSS Document */
 /* Randabstand fuer Flexboxen  * * * * * * * * */   
.wrapper_flexrand {
    width: 100%;
    text-align: center;
	padding: 20px 15px 20px 15px;
	margin: auto;
    background-color: #00B110;
} 
    
/*  Randabstände der Boxen innerhalb */	
.inhalt2_1_main, .inhalt2_2_main, .inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT, .inhalt2_1ungleichL, .inhalt2_2ungleichL, .wrapper_flexrand, .inhalt2_1_footer, .inhalt2_2_footer, .inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 
   /*  Gemeinsame AUSRICHTUNG - Textrichtung innerhalb der Box */	
.inhalt2_1_main, .inhalt2_2_main,.inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT, .inhalt2_1ungleichL, .inhalt2_2ungleichL, .inhalt2_1_footer, .inhalt2_2_footer, .inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten  {
  flex-direction: column;
}  
/*  Gemeinsame Eigenschaften der flexwrapper 2 3 4 ----------------------------*/	       
   .flexwrapper_2_main, .flexwrapper_2, .flexwrapper_3, .flexwrapper_4, .flexwrapper_2_ungleichT, .flexwrapper_2_ungleichL, .flexwrapper_2_footer, .flexwrapper_4_schatten {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color:#FFF;
}  
 /*  Gemeinsame Eigenschaften der INHALTSboxen ----------------------------*/	       
  .inhalt2_1_main, .inhalt2_2_main, .inhalt2_1, .inhalt2_2, .inhalt3_1, .inhalt3_2, .inhalt3_3, .inhalt4_1, .inhalt4_2, .inhalt4_3, .inhalt4_4, .inhalt2_1ungleichT, .inhalt2_2ungleichT, .inhalt2_1ungleichL, .inhalt2_2ungleichL, .inhalt2_1_schatten, .inhalt2_2_schatten, .inhalt2_1_footer, .inhalt2_2_footer, .inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten  {
	display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1;
    background-color:#FFF;
}        
    
    
/*  ZWEIer mit wrapper ----------------------------*/	       
  .flexwrapper_2 {
    flex-basis: calc(100%/2);
} 
.inhalt2_1, .inhalt2_2 {
    flex-basis: 48%;
    padding: 10px 15px;
	} 
 .inhalt2_1 {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2 {
     order: 2;
     margin: 1% 0 1% 1%;
	}

/*  ZWEIer mit wrapper für MAIN ----------------------------*/	       
  .flexwrapper_2_main {
    flex-basis: calc(100%/2);
} 
.inhalt2_1_main, .inhalt2_2_main {
    flex-basis: 48%;
    padding: 0px;
	} 
 .inhalt2_1_main {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2_main {
     order: 2;
     margin: 1% 0 1% 1%;
	}

/*  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%;
	}


/*  ZWEIer mit wrapper UNGLEICH Grosse links-----------------------*/	       
.flexwrapper_2_ungleichL {
    flex-basis: calc(100%/2);
} 
.inhalt2_1ungleichL, .inhalt2_2ungleichL  {
    padding: 10px 10px;
}
 .inhalt2_1ungleichL {
     flex-basis: 58%;
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2ungleichL {
    flex-basis: 38%;
     order: 2;
     margin: 1% 0 1% 1%;
	}



  
 /*  ZWEIer FOOTER mit wrapper ----------------------------*/	       
  .flexwrapper_2_footer {
    flex-basis: calc(100%/2);
}      
   .inhalt2_1_footer {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt2_2_footer {
     order: 2;
     margin: 1% 0 1% 1%;
    padding: 15px 15px 15px 20px; /*  ABSTAND für Text li  und re ----------------------------*/
	} 
/*  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: 4;
      margin: 1% 0 1% 1%;
	} 
/*  VIERer mit SCHATTEN ------------------- */   
     .flexwrapper_4_schatten {
    flex-basis: calc(100%/4);
}    

.inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten {
    flex-basis: 23.0%;
    box-shadow: 5px 5px 10px #888;
     border:0px solid #686868;
    background: #FFFFFF;
    padding: 10px 15px 10px 15px;
    margin: 1% 1% 1% 1%;
	} 
    
/*  VIERER Boxen bei MEDIA 1000 -------------------------*/
@media screen and (max-width: 1200px) 
{/*  Gemeinsame Eigenschaften -----------------*/	   
.inhalt4_1, .inhalt4_2, .inhalt4_3  {
    flex-basis: 32%;
	} 
.inhalt4_1 {
    margin: 1% 1% 1% 0;
	} 
.inhalt4_2 {
    margin: 1%  1% 1% 1%;
	} 
.inhalt4_3 {
    margin: 1% 0% 1% 0;
	}
.inhalt4_4 {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}    
} 




    
    
/*  VIERER Boxen bei MEDIA 1000 -------------------------*/
@media screen and (max-width: 1000px) 
{
    .inhalt2_1_footer, .inhalt2_2_footer {
    flex-basis: 100%;
	 margin: 0% 0 0% 0;
    } 
   .inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten {
    flex-basis: 48%;
    
	} 
 /*  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%;
	}    
} 
    
    /*  DREIER Boxen bei MEDIA 800 -------------------------*/ 
@media screen and (max-width: 800px) 
{
    .inhalt2_1_main, .inhalt2_2_main {
    max-width: 100%;
        flex-basis: 100%;
   margin: 0% 0 0% 0;
	} 
    
 .inhalt2_1_main {
     order: 1;
     margin: 0% 0% 0% 0;
	}
.inhalt2_2_main {
     order: 2;
     margin: 1% 0 1% 0%;
	} 
    
.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;
	}  
    
   /*  VIERER Boxen bei MEDIA 800 -------------------------*/ 

  .inhalt4_1, .inhalt4_2  {
    flex-basis: 48%;
	} 
    
.inhalt4_1 {
    margin: 1% 1% 1% 0;
	} 
.inhalt4_2 {
    margin: 1%  0 1% 1%;
	} 
.inhalt4_3 {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}
.inhalt4_4 {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}   

/*  UNGLEICHE Boxen bei MEDIA 800 -------------------------*/ 
.inhalt2_1ungleichT {
     flex-basis: 100%;
     order: 2;
     margin: 1% 0 1% 0;
	}
.inhalt2_2ungleichT {
    flex-basis: 100%;
     order: 1;
     margin: 1% 0 1% 0;
	} 
    /*  UNGLEICHE Boxen bei MEDIA 800 -------------------------*/ 
.inhalt2_1ungleichL {
     flex-basis: 100%;
     order: 1;
     margin: 1% 0 1% 0;
	}
.inhalt2_2ungleichL {
    flex-basis: 100%;
     order: 2;
     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;
	} 
    
.inhalt4_1_schatten, .inhalt4_2_schatten, .inhalt4_3_schatten, .inhalt4_4_schatten {
    flex-basis: 98%;
    
	}   

/*  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;
	}
    
 /*  UNGLEICHE Boxen bei MEDIA 600 -------------------------*/ 
.inhalt2_1ungleichL {
     flex-basis: 100%;
     order: 1;
     margin: 1% 0 1% 0;
	}
.inhalt2_2ungleichL {
    flex-basis: 100%;
     order: 2;
     margin: 1% 0 1% 0;
	}       
}