*,
*:before,
*:after {
  box-sizing: border-box;
}




.accordion {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.accordion-item {
  position: relative;
  margin-bottom:10px;
}




.accordion-item.active .heading {
  color: #006600;
}
.accordion-item.active .icon {
  transform:rotate(90deg);
 width:30px; height:30px;
}
.accordion-item.active .icon:before {
  background: #006600;
}
.accordion-item.active .icon:after {
  width: 0;
}
.accordion-item .heading {
	display: block;
	text-decoration: none;
	cursor:pointer;
	position: relative;

	transition: 1s ease-in-out;
}

.accordion-item .title {position:relative; padding:0px; font-size:24px; margin-left:-10px;}


@media (min-width: 40rem) {
  .accordion-item .heading {
    font-size: 1.2rem;
	padding: 10px;
  }
  .accordion {padding:12px;}
}
.accordion-item .heading:hover {
  color: #cbc8b3;
}
.accordion-item .heading:hover .icon:before, .accordion-item .heading:hover .icon:after {
  background: #cbc8b3;
}
.accordion-item .icon {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
 background-image:url('pfeil_links.svg');
 width:30px; height:30px;
transition: transform .8s ease-in-out;  
}
.accordion-item .icon:before, .accordion-item .icon:after {
  content: '';


  position: absolute;
  left: 50%;
  top: 50%;
  transition: 1s ease-in-out;

}
.accordion-item .icon:after {
  -webkit-transform: translate(-50%, -50%) rotate(90deg);
          transform: translate(-50%, -50%) rotate(90deg);
  z-index: -1;
}
.accordion-item .content {
  display: none; border-bottom: 1px solid #d2d7da;
}
.accordion-item .content p {
  margin-top: 0; margin-bottom:10px; width:100%;
}
@media (min-width: 40rem) {
  .accordion-item .content {
  }
}