@charset "utf-8";
/* CSS Document */
  
/* Randabstand fuer Main  * * * * * * * * */   
.wrapper_mobilrand {  
    max-width: 100%;
	padding: 20px 25px 20px 25px;
	margin: auto;  
}
/* separate class zum hinzufügen zu wrappern mit brakepoint_rand schmaler * * * * * * * * */   
.boxrand {  
  	padding: 0px 25px ;
} 
 .boxrand_02 {
   	padding: 15px 25px;	    
     
}
/* KEIN RANDABSTAND HINZUFÜGEN  * * * * * * * * */
.mainformat {
	width: 100%;
    margin: auto;
}
    
/*  Randabstände der Boxen innerhalb */	
 .wrapper_inhalt_komplett, .wrapper_mobilrand, .mobilrand, .wrapper_flexrand,  .flexwrapper_2, .flexwrapper_OzwA_2er, .flexwrapper_ungl_2er,

.inhalt_2_A, .inhalt_2_B, .inhalt_2_Au, .inhalt_2_Bu, .inhalt_2_Ao, .inhalt_2_Bo, .inhalt_3_A, .inhalt_3_B, .inhalt_3_C, .inhalt_4_A, .inhalt_4_B, .inhalt_4_C, .inhalt_4_D, .inhalt_ungl_2_A, .inhalt_ungl_2_B, .inhalt_OzwA_2_A, .inhalt_OzwA_2_B,

.schatten_box, .schatten_A, .schatten_B, .rahmen_A, .rahmen_B, 

.rand_A, .rand_B,  

.randinnen_mobilrand, .mobilrand, .randinnen_box_A, .randinnen_box_B, .padding_rand_innerhalb   {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 

 /*  INHALTSboxen Gemeinsame AUSRICHTUNG - Textrichtung innerhalb der Box */	
.inhalt_2_A, .inhalt_2_B, .inhalt_2_Au, .inhalt_2_Bu, .inhalt_2_Ao, .inhalt_2_Bo, .inhalt_3_A, .inhalt_3_B, .inhalt_3_C, .inhalt_4_A, .inhalt_4_B, .inhalt_4_C, .inhalt_4_D, .inhalt_ungl_2_A, .inhalt_ungl_2_B, .inhalt_OzwA_2_A, .inhalt_OzwA_2_B  {
  flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 1;
    flex: 1;
}  
  
    

/* Eigenschaften der flexwrapper 2 3 4 ----------*/	       
  .flexwrapper_2, .flexwrapper_OzwA_2er, .flexwrapper_ungl_2er, .flexwrapper_3, .flexwrapper_4  {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
}  
.flexwrapper_2, .flexwrapper_OzwA_2er, .flexwrapper_ungl_2er {
    flex-basis: calc(100%/2);
} 
.flexwrapper_3 {
    flex-basis: calc(100%/3);
}
.flexwrapper_4 {
	 flex-basis: calc(100%/4);
} 

/*  Aufteilung der flexwrapper zugehörigen Inhaltsboxen --------------------------------------*/

/*  ZWEIer ohne ZWISCHENABSTAND   ---*/	
.inhalt_OzwA_2_A, .inhalt_2_Au, .inhalt_2_Ao   {
   flex-basis: 50%;
     order: 1;
}
.inhalt_OzwA_2_B, .inhalt_2_Bu, .inhalt_2_Bo   {
     flex-basis: 50%;
     order: 2;   
} 

/*  ZWEIer mit ZWISCHENABSTAND ----------------------------*/	       
.inhalt_2_A, .inhalt_2_B {
    flex-basis: 48%;
	} 
 .inhalt_2_A {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt_2_B {
     order: 2;
     margin: 1% 0 1% 1%;
	}

/*  ZWEIer UNGLEICH mit ZWISCHENABSTAND-----------------------*/	       
 .inhalt_ungl_2_A {
     flex-basis: 44%;
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt_ungl_2_B {
    flex-basis: 52%;
     order: 2;
     margin: 1% 0 1% 1%;
	}
   
/*  DREIer mit ZWISCHENABSTAND -----------------*/   
.inhalt_3_A, .inhalt_3_B, .inhalt_3_C {
    flex-basis: 30%;
	} 
 .inhalt_3_A {
     order: 1;
     margin: 1% 1% 1% 0;
	}
.inhalt_3_B {
     order: 2;
    margin: 1% 1% 1% 1%;
	}
.inhalt_3_C {
     order: 3;
    margin: 1% 0 1% 1%;
	}
    
/*  VIERer mit ZWISCHENABSTAND ------------------- */    
.inhalt_4_A, .inhalt_4_B, .inhalt_4_C, .inhalt_4_D {
    flex-basis: 23.5%;
	} 
 .inhalt_4_A {
     order: 1;
      margin: 1% 1% 1% 0;
	}
.inhalt_4_B {
     order: 2;
    margin: 1% 1% 1% 1%;
	}
.inhalt_4_C {
     order: 3;
    margin: 1% 1% 1% 1%;
	}
  .inhalt_4_D {
     order: 4;
     margin: 1% 0 1% 1%;
	} 

/*  Zusätzliche Eigenschaften die den Boxen zugeordnet werden können  ------------------- */  

.schatten_A {
    box-shadow: 5px 5px 10px #888;
     border:0px solid #686868;
    background: #FFFFFF;
	} 
.randinnen_A {
    padding: 15px 15px;  
}
.randinnen_B {
    padding: 10px 10px;  
}
.randinnen_C {
    padding: 40px 0px 40px 0px;  
}


.rahmen_A {
     border:1px solid #000000;
}
.rahmen_B {
     border:1px solid #0017F2;
}
.textfarbe_A {
    color: #FFFFFF;
}
.hintergrundf_A {
    background-color: #DFFE00;
}
.hintergrundf_B {
    background-color: #7F817E;
}
.hintergrundf_C {
    background-color: #FFFFFF;
}
.hintergrundf_D {
    background-color: #FA55F2;
}
.hintergrundf_E {
    background-color: #F9234F;
}
/*  Schrift in der Höhe mittig ausrichten - geht nur wenn Elternelement - Bsp. also die Box inhalt_2_1_oR -  FESTE Höhe hat  -----------------------*/
.schrift_oR_01 {
display: table-cell;
vertical-align: middle;
    
}     

    
/*  VIERER Boxen bei MEDIA 1000 -------------------------*/
@media screen and (max-width: 1200px) 
{	   
.inhalt_4_A, .inhalt_4_B, .inhalt_4_C  {
    flex-basis: 32%;
	} 
.inhalt_4_A {
    margin: 1% 1% 1% 0;
	} 
.inhalt_4_B {
    margin: 1%  1% 1% 1%;
	} 
.inhalt_4_C {
    margin: 1% 0% 1% 0;
	}
.inhalt_4_D {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}    
} 




    
    
/*  VIERER Boxen bei MEDIA 1000 -------------------------*/
@media screen and (max-width: 1000px) 
{
  
 /*  Gemeinsame Eigenschaften -----------------*/	   
.inhalt_4_A, .inhalt_4_B, .inhalt_4_C, .inhalt_4_D {
    flex-basis: 48%;
	} 
.inhalt_4_A {
    margin: 1% 1% 1% 0;
	} 
.inhalt_4_B {
    margin: 1%  0 1% 1%;
	} 
.inhalt_4_C {
    margin: 1% 1% 1% 0;
	}
.inhalt_4_D {
     margin: 1%  0 1% 1%;
	}    
} 
    
    
@media screen and (max-width: 1000px) 

{  
 .wrapper_mobilrand {
   	padding: 20px 15px 20px 15px;	    
}
.boxrand {
   	padding: 0px 15px 0px 15px;	    
}  
.boxrand_02 {
   	padding: 15px;	    
}      
    
.inhalt_OzwA_2_A, .inhalt_2_Ao {
     flex-basis: 100%;
     order: 2;
     margin:  0 ;
	}
.inhalt_OzwA_2_B, .inhalt_2_Bo  {
    flex-basis: 100%;
     order: 1;
     margin:  0;
	}          
      

      /*  DREIER Boxen bei MEDIA 800 -------------------------*/ 
.inhalt_3_A  {
    flex-basis: 48%;
    margin: 1% 1% 1% 0;
	}
.inhalt_3_B {
    flex-basis: 48%;
    margin: 1% 0 1% 1%;
	}
.inhalt_3_C {
    flex-basis: 100%;
    margin: 1% 0 1% 0;
	}  
    
   /*  VIERER Boxen bei MEDIA 800 -------------------------*/ 

  .inhalt_4_A, .inhalt_4_B  {
    flex-basis: 48%;
	} 
.inhalt_4_A {
    margin: 1% 1% 1% 0;
	} 
.inhalt_4_B {
    margin: 1%  0 1% 1%;
	} 
.inhalt_4_C {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}
.inhalt_4_D {
     flex-basis: 100%;
     margin: 1%  0 1% 0%;
	}   

/*  UNGLEICHE Boxen bei MEDIA 800 -------------------------*/ 
.inhalt_ungl_2_A {
     flex-basis: 100%;
     order: 1;
     margin: 1% 0 1% 0;
	}
.inhalt_ungl_2_B {
    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) 
{
	
.inhalt_2_A, .inhalt_2_B, .inhalt_ungl_2_A, .inhalt_ungl_2_B, .inhalt_2_Ao, .inhalt_2_Bo, .inhalt_2_Au, .inhalt_2_Bu {
    flex-basis: 100%;
   margin: 1% 0 1% 0;
	} 
.inhalt_ungl_2_A, .inhalt_2_Ao {
     order: 2;
	}
.inhalt_ungl_2_B, .inhalt_2_Bo {
     order: 1;
	}    


/*  DREIER Boxen bei MEDIA 600 -------------------------*/   
.inhalt_3_A,.inhalt_3_B, .inhalt_3_C {
    flex-basis: 100%;
    margin: 1% 0;
	} 

/*  VIERER Boxen bei MEDIA 600 -------------------------*/ 
.inhalt_4_A, .inhalt_4_B, .inhalt_4_C, .inhalt_4_D {
    flex-basis: 100%;
    margin: 1% 0 1% 0;
	}


}