details {
    width: 100%;
    margin: 0 auto ;
    background: var(--hellgrau);
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
  }
  
summary {
    padding: 10px;
    display: block;
    background: var(--grau);
    padding-left: 25px;
    position: relative;
    cursor: pointer;
    height: 35px;
  }
  
summary:before {
    content: '';
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent transparent var(--mint);
    position: absolute;
    top: 10px;
    left: 10px;
    transform: rotate(0);
    transform-origin: .2rem 50%;
    transition: .25s transform ease;
  }
  
details[open] > summary:before {
    transform: rotate(90deg);
  }
details summary::-webkit-details-marker {
    display:none;
  }
  
/* Responsive layout */
@media screen and (max-width: 1150px) {
    details {
        width: 95%;
        margin-bottom: 7px;
      }
      summary {
        padding: 7px 25px 0px;
        height: 29px;
      }
      summary:before {
        top: 7px;
      }
}