<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button
        class="accordion-button label label--headline"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseOne"
        aria-expanded="true"
        aria-controls="collapseOne"
      >
        Accordion Item
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button
        class="accordion-button label label--headline collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseTwo"
        aria-expanded="false"
        aria-controls="collapseTwo"
      >
        Accordion Item
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button
        class="accordion-button label label--headline collapsed"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#collapseThree"
        aria-expanded="false"
        aria-controls="collapseThree"
      >
        Accordion Item
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <p>
          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
          erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
          sanctus est Lorem ipsum dolor sit amet.
        </p>
      </div>
    </div>
  </div>
</div>

<script type="module" src="/dist/js/kampmann.umd.min.js"></script>

      

      @import 'bootstrap/scss/transitions.scss';
@import 'bootstrap/scss/accordion.scss';

.accordion {
  &-item {
    margin: 16px 0;
    border-radius: $border-radius;
    font-size: $font-size-lg;
    color: $primary;
    border: 1px solid $gray-dark;
    border-top: 1px solid $gray-dark !important;
  }

  &-button {
    border-radius: $border-radius;
    font-size: $font-size-xl;
    color: $primary;
    cursor: pointer;

    &:not(.collapsed) {
      background-color: transparent;
      box-shadow: none;
      color: $green;

      &::after {
        background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%230E2249' y='8' width='17' height='1' rx='.5' fill-rule='evenodd'/%3E%3C/svg%3E%0A");
        transform: none;
      }
    }

    &:focus {
      box-shadow: none;
    }

    &::after {
      background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.5 0a.5.5 0 0 1 .5.5V8h7.5a.5.5 0 1 1 0 1H9v7.5a.5.5 0 1 1-1 0V9H.5a.5.5 0 0 1 0-1H8V.5a.5.5 0 0 1 .5-.5Z' fill='%230E2249' fill-rule='evenodd'/%3E%3C/svg%3E");
    }
  }

  &-header {
    margin-top: 0;
  }

  &-body {
    padding-top: 0;

    & > *:first-child {
      margin-top: 0;
    }

    & > *:last-child {
      margin-bottom: 0;
    }
  }
}