label {
	display: inline;
}

.custom_radio {
	display: none;
}

.custom_radio + label {
	-webkit-appearance: none;

	background-color: white;  /* Hintergrund un checked */  
	border-bottom: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	border-right: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	
	/* box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);  */
	box-shadow: -2px -2px 0 0  var(--colordarkgrey)  ;  /* optional Schatten  */

	padding: 0.6em;/* Groesse Checkbox */
	
	border-radius: 50px;
	border-radius: 0.9em;
	display: inline-block;
	position: relative;
	cursor:pointer;
}


.custom_radio:checked + label {
	/* color: #99a1a7; */
	/*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);*/

	background: rgb(0, 204, 0);   /* Farbe grün Button  checked */
	background: black; 
	/* border-bottom: 2px solid #D4D0C8; */  /* Ramen checked */

	}

.custom_radio + label:active, .custom_radio:checked + label:active {
	/*box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);*/
}


/* --------------------------------------------*/
.custom_radio_1  {
	-webkit-appearance: none;
	background-color: white;  /* Hintergrund un checked */  
	border-bottom: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	border-right: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	
	box-shadow: -2px -2px 0 0  var(--colordarkgrey)  ;  /* optional Schatten  */

	padding: 0.6em;/* Groesse Checkbox */
	border-radius: 0.9em;
	display: inline-block;
	position: relative;
}


.custom_radio_1_active {
	-webkit-appearance: none;
    background: rgb(0, 204, 0);   /* Farbe grün Button  checked */	
	background: black;   	
	border-bottom: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	border-right: 2px solid   var(--colormiddlegrey)   ; /* Ramen un checked */
	
	box-shadow: -2px -2px 0 0  var(--colordarkgrey)  ;  /* optional Schatten  */

	padding: 0.6em;/* Groesse Checkbox */
	border-radius: 0.9em;
	display: inline-block;
	position: relative;
	
	}
	
	
	
	
/* ----------------   Radio Button mit Icons  ---------------------  */

 /* Box Farbe */
.custom_radio_icon_1 label  {
	position: relative;
	color: #fff;
	background-color: white; 
	border: 2px solid #E8E5E1;
	
	text-align: center;

	display: block;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	/* image grey */
	-webkit-filter: grayscale(100%);   /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

 /* aktive Box Farbe */
 .custom_radio_icon_1 input:checked + label {
	border: 2px solid rgb(154, 205, 50 );
	background-color: rgb(212, 234, 168 ); 
	
	border: 2px solid black;
	background-color: rgb(255, 255, 144); /*yellow; */
	
	/* image farbig */
	-webkit-filter: grayscale(0%);   /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}


/* radio section */
.custom_radio_icon_1 input {
	display: none;
}
/* ----------------------------------- */

/* Box Farbe */
.custom_radio_icon_2 label  {
	position: relative;
	color: #fff;
	background-color: white; 
	/*border: 2px solid #E8E5E1;*/
	
	text-align: center;

	display: block;
	cursor: pointer;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	/* image grey */
	-webkit-filter: grayscale(100%);   /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}



 /* aktive Box Farbe */
 .custom_radio_icon_2 input:checked + label {
 
	/* border: 2px solid rgb(154, 205, 50 );
	background-color: rgb(212, 234, 168 ); 
	
	border: 2px solid black;
	background-color: rgb(255, 255, 144);*/  /*yellow; */
	
	/* image farbig */
	-webkit-filter: grayscale(0%);   /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

/* radio section */
.custom_radio_icon_2 input {
	display: none;
}



/* ------ ab hier nichts aendern  --------------  */
/* Box Groesse */
.box_icon { 
padding: 2px;
width: 40px;   
height: 40px;
/*border-radius: 50%;*/ /* Kreis */
}


/* COLUMNS */
.col {
  display: block;
  float:left;
  margin-left: 5px;   /* Abstand der Boxen */
}

.col:first-of-type { 
margin-left: 0; 
}

/* CLEARFIX */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
/* ----------------------------------------------------------------------------------*/