.faq{
  max-width: 60rem;           
  margin: 4rem auto;         
  padding-top: 2rem;
  border-top: 1px solid #444; 
}


.faq h3{
  font-family: inherit;     
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 1.75rem;
}


.faq details{
  background: #fff;      
  
  border-radius: 6px;
  margin-bottom: 1rem;
  overflow: hidden;          
  transition: background .25s ease;
}


.faq summary{
  cursor: pointer;
  list-style: none;          
  position: relative;
  padding: 1.125rem 1rem 1.125rem 3rem;
  font-size: 1rem;
  font-weight: 500;
  color: #000;
  user-select: none;
}


.faq summary::-webkit-details-marker{ display:none; }


.faq summary::before{
  content: '';
  position:absolute;
  left: 1.25rem;
  top: 50%;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-50%) rotate(-45deg);
  transition: transform .25s ease;
}


.faq details[open] summary::before{
  transform: translateY(-50%) rotate(45deg);
}
.faq details[open]{
  background: #CDF7AD;
}


.faq p{
  margin: 0 0 1.25rem;
  padding: 0 1rem 0 3rem;     
  font-size: .95rem;
  line-height: 1.6;
  color: #000;
}


.faq details[open] summary ~{
  animation: fadeSlide .25s ease-in-out;
}
@keyframes fadeSlide{
  from{opacity:0; transform: translateY(-4px);}
  to{opacity:1; transform: translateY(0);}
} 

.faq details[open] summary {
  color: #000;            /* Frage schwarz */
}
.faq details[open] p{
  color: #000;            /* Antwort schwarz */
}

.faq details[open] summary::before {
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
}