<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  @for(trait of traits; let index = $index; track trait){
  <div class="example-box" (click)="openDetailsPanel(index)" cdkDrag>
    <!-- Eventuell Symbol für den Ursprung des Traits -->
    <div class="trait-name">{{ trait.name }}</div>
    <br />

    <p>{{ trait.shortDescription }}</p>
  </div>
  }@empty{
  <div
    style="
      text-align: center;
      margin-top: 2rem;
      font-size: 1.25rem;
      font-weight: 500;
    "
  >
    Noch keine Eigenschaft hinzugefügt
  </div>
  }
</div>
