
.accordion
{
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  overflow: hidden;
}
.accordion input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion label {
  position: relative;
  display: block;
  margin-top: 10px;
  padding-left: 10px;
  padding-right: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
	border-radius: 10px;
	border: 1px solid #aaa;
/*	border-bottom: 1px solid #979797;*/
  font-weight: bold;
  line-height:1.5em;
  cursor: pointer;
}

.accordion .tab-content {
  max-height: 0;
  overflow: hidden;
  background: #fff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.accordion .tab-content div {
 padding: 10px;
}
.accordion input:checked ~ .tab-content {
  max-height: 100em;
}
.accordion input:checked ~ label {
  background: #fff;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border:1px solid rgba(255, 0, 0, 0);
	border-bottom: 1px solid #979797;
	transition: all .35s;
}
/* Icon */
.accordion 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;
}
.accordion input[type=checkbox] + label::after {
  content: "+";
}
.accordion input[type=radio] + label::after {
  content: "\25BC";
}
.accordion input[type=checkbox]:checked + label::after {
  transform: rotate(135deg);
}
.accordion input[type=radio]:checked + label::after {
  transform: rotateX(135deg);
}


.spalten {
	width:100%;
	display:flex;
	float: left;
}
.spalte1 {
	width:33%;
	display: inline-block;
	align-content: flex-start;
	padding-left:5px;
	padding-right:5px;
}
.spalte2 {
	width:33%;
	display: inline-block;
	align-content: flex-start;
	border-left:2px solid #989898;
	padding-left:5px;
	padding-right:5px;
}
.spalte2 div {
	width:100%;
	align-content: flex-start;
}
.spalte3 {
	width:33%;
	display: inline-block;
	align-content: flex-start;
	border-left:2px solid #989898;
	padding-left:5px;
	padding-right:5px;
}
.spalte3 div {
	width:100%;
	align-content: flex-start;
}

.radiogroup {
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
}

.radiogroup .radio-container {
    position: relative;
    height:  90px;
    width:  70px;
    margin-right: 10px;
    margin-bottom: 10px;
}

.radiogroup .radio-button {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      margin: 0;
      cursor: pointer;
}

.radiogroup .radio-icon {
		width: 60px;
		height: 60px;
		margin-top:5px;
		margin-bottom:5px;
}

.radiogroup .radio-button:checked + .radio-tile {
		color: #000000;
		border: 1px solid #989898;
		background-image: linear-gradient(to bottom, #D3D3D3, #9D9D9D);
		background-image: -webkit-linear-gradient(to bottom, #D3D3D3, #9D9D9D);
		background-image: -moz-linear-gradient(to bottom, #D3D3D3, #9D9D9D);
		background-color:#ffffff;
}

.radiogroup .radio-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: top;
	width: 100%;
	height: 100%;
	border: 1px solid #cccccc;
	border-radius: 8px;
	padding: 2px;
	transition: transform 300ms ease;
}

.radiogroup .radio-button:checked + .radio-tile .radio-label {
		color: #000000;
}

.radiogroup .radio-label {
	font-family:"Ubuntu-Condensed";
	font-size: 0.8em;
	font-weight:normal;
	color: #505050;
}

.radiogroup .text-label {
	height:100%;
	padding:5px;
	text-align:center;
}
.radiogroup .text-label div {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 840px) {
	.spalte1 {
		width:40%;
	}
	.spalte2 {
		width:40%;
	}
	.spalte3 {
		width:20%;
	}
}
@media (max-width: 650px) {
	.radiogroup .radio-container {
		height: 80px;
		width: 60px;
	}
	.radiogroup .radio-icon {
		width: 50px;
		height: 50px;
	}
	.radiogroup .radio-label {
		font-size: 0.75em;
	}
}
@media (max-width: 570px) {
	.radiogroup .radio-container {
		height:  70px;
		width:  50px;
	}
	.radiogroup .radio-icon {
		width: 40px;
		height: 40px;
	}
	.radiogroup .radio-label {
		font-size: 0.65em;
	}
}
@media (max-width: 520px) {
	.radiogroup .radio-container {
		height: 60px;
		width: 40px;
	}
	.radiogroup .radio-icon {
		margin-top:2px;
		width: 35px;
		height: 35px;
	}
	.radiogroup .radio-label {
		font-size: 0.65em;
	}
}
@media (max-width: 350px) {
	.spalte2 {
		padding-left:2px;
		padding-right:2px;
	}
	.spalte3 {
		padding-left:2px;
		padding-right:2px;
	}
}



table.formular {
	width:90%;
	border-width:0;
	border-spacing:0;
}
table.formular tr td {
	vertical-align:baseline;
	padding: 2px;
}
table.formular tr td:first-child {
	text-align:right;
}


.formular input[type="text"],

.formular textarea {
 	width: 100%;
 	padding: 12px;
	font-size: 1em;
 	border-radius: 6px;
	border: 1px solid #979797;
 	resize: none;
}

.formular select {
 	width: calc(100% + 24px + 2px);
 	margin: 0;
	font: 16px "Ubuntu", Helvetica, Arial, sans-serif;
	font-size: 1em;
	color: #4c4e4f;
 	border-radius: 10px;
	border: 1px solid #979797;
 	resize: none;
}

.formular textarea {
 	height: 160px;
}



