.akkordeon {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-top: 20px;

  input {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }

  .akkordeon__title {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;

    span {
      font-size: 20px !important;
      font-weight: 700;

      color: var(--e-global-color-accent);
    }

    .akkordeon__icon svg {
      transform: rotate(90deg);
      transition: transform 0.3s ease-in-out;
      path {
        stroke: var(--e-global-color-accent);
      }
    }
  }

  .akkordeon__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
  }

  input:checked {
    + .akkordeon__title {
      .akkordeon__icon svg {
        transform: rotate(-90deg);
      }
    }

    & ~ .akkordeon__content {
      max-height: 1000px; /* Arbitrary large value to allow expansion */
      transition: max-height 0.3s ease-in-out;
    }
  }
}