.acc-titel {
  position: relative;
  background: #f5f5f5;
  padding: 20px;
  margin-bottom: 1px;
  color: #fff;
  transition: background .1s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.acc-titel:after {
    font-family: "Open Sans";
    font-weight: 100;
    content: '+';
    font-size: 1em;
    line-height: 1.4em;
    color: #4a4644;
    float: right;
    height: 20px;
    width: 20px;
    border: solid 1px #4a4644;
    border-radius: 50%;
    text-align: center;
    transition: all .4s cubic-bezier(0.5,0.2,0.3,1);
    position: absolute;
    right: 2%;
    top: 33%;
}

.acc:hover .acc-titel:after {
	color: #fff;
	border: solid 1px #fff;
}

.acc-titel:hover {
  z-index: 2;
 /* background: #99b5ad;*/
  color: #fff;
  cursor: pointer;
  transform: scale(1.01);
  box-shadow: 1px 3px 4px rgba(0,0,0,0.2);
	background: rgba(0,123,224,1);
background: -moz-linear-gradient(left, rgba(0,123,224,1) 0%, rgba(0,187,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,123,224,1)), color-stop(100%, rgba(0,187,255,1)));
background: -webkit-linear-gradient(left, rgba(0,123,224,1) 0%, rgba(0,187,255,1) 100%);
background: -o-linear-gradient(left, rgba(0,123,224,1) 0%, rgba(0,187,255,1) 100%);
background: -ms-linear-gradient(left, rgba(0,123,224,1) 0%, rgba(0,187,255,1) 100%);
background: linear-gradient(to right, rgba(0,123,224,1) 0%, rgba(0,187,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007be0', endColorstr='#00bbff', GradientType=1 );
}

.acc:hover .acc-titel h3 {
    color: #fff;
}

.acc .active {
  background: #99b5ad;
}

.acc .active:after {
    content:'+';
    transform: rotate(405deg);
    color: #fff;
    border: solid 1px #fff;
}

.acc-content {
  max-height: 0;
  opacity: 0;
  transform: translateY(5px);
  background: #eaeaea;
  padding: 0px 6%;
  margin-bottom: 1px;
  overflow: hidden;
  transition: max-height .4s ease, opacity .8s ease, transform .8s ease;
}