@media all and (min-width: 40em) and (max-width: 50em) {
	[class*=colgroup] .col {
		float:left;
		width:47.5%;
	}*/ 

	[class*=colgroup] .col:nth-of-type(2n+1),
	.colspan-2+.col {
		clear:left;
		margin-left:0
	}

	.colgroup-1 .col {
		width:100%;
		float:none;
		margin-left:0
	}

	.colgroup-3 .colspan-2,
	.colgroup-3 .colspan-2+.col,
	.colgroup-3 .col.primary,
	.colgroup-3 .col.secondary {
		width:100%;
		float:none;
		margin-left:0
	}

	.colgroup-3 .col.secondary { margin:2em 0 0 0 }
}

@media all and (min-width: 50em) {
	body {  }
	[class*=colgroup] .col {
	margin-left:5%;
   
	float:left
	}

	.colgroup-2 .col { width:50%}
	.colgroup-2 .col:nth-of-type(2n+1) {
		clear:left;
		margin-left:0
	}

}

.grau {
  background-color: #e8e8e8;
    color: #333; 
    padding: 0.5em;
    
}

.tab {
  margin-top: -1em;
  position: relative;
  width: 100%;
  color: #000;
  overflow: hidden;
}
input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
label {
    padding-left: 0.5em;
  position: relative;
  display: block;
  font-weight: normal;
    margin-top: 1em;
  line-height: 3;
  cursor: pointer;
 background-color: #dadada; 
  color: #666;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0em;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 330em;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: "+";
}
input[type=radio] + label::after {
  content: "\25BC";
}
input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}


/*details[open] {
  background: #ccc;
  margin-bottom: 1em;

}*/

<style>
details {
	background-color: yellow;
}
details details {
	background-color: limegreen;
	margin-left: 1em;
}
</style>

#akkordeon:not(:target) .inhalt,
#akkordeon:not(:target) .hide,
#akkordeon:target .show {display: none;}
#akkordeon:target .inhalt {display: block;}

.inhalt {
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
padding: 20px 20px 1px;
margin: 0px 0px 10px;
}

.show,
.hide {
padding:10px;
background: rgb(254, 164, 0);
box-shadow:none!important;
color:#fff;
font-weight:bold;
}

.show:hover,
.hide:hover {
background: rgb(255, 214, 118);
color:#fff!important;
transition:0.2s all ease-in-out!important;
}