.translate-y-5 {
  transform: translateY(5px);
}

.image-container {
  display: flex; /* Erlaubt ein flexibles Box-Layout */
  flex-wrap: wrap; /* Erlaubt das Umfließen der Elemente auf die nächste Zeile */
  justify-content: flex-start; /* Startet die Anordnung der Elemente am Anfang des Containers */
  align-items: flex-start; /* Ausrichtung der Elemente am Anfang der Querachse */
  padding: 10px; /* Abstand zwischen den Inhalten des Containers und dessen Rand */
}

.image-container span {
  flex-flow: row;
  display: flex;
  width: fit-content;
  height: fit-content;
}

.image-container span img {
  max-height: 150px; /* Maximale Höhe der Bilder */
  width: auto; /* Die Breite der Bilder passt sich automatisch an die Höhe an */
  cursor: pointer;
  margin: 10px;
}
// .image-container fa-icon {
//     top: 0; /* Positioniert das Icon am oberen Rand des Bildes */
//     right: 0; /* Positioniert das Icon am rechten Rand des Bildes */
//     color: #fff; /* Weiße Farbe für das Icon */
//     background-color: rgba(0,0,0,0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
//     padding: 5px; /* Ein wenig Platz um das Icon */
//     cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
//   }

.image-wrap {
  position: relative; /* Ermöglicht die absolute Positionierung des Icons bezogen auf diesen Container */
  display: inline-block; /* Erlaubt die Inline-Anordnung, falls mehrere Bilder vorhanden sind */
}

/* Stil für das Bild */
.image-wrap img {
  max-height: 150px;
  width: auto;
  display: block; /* Verhindert unerwünschten Abstand unter dem Bild */
}

/* Stil für das FontAwesome Icon */
.image-wrap fa-icon {
  position: absolute;
  top: 15px; /* Positioniert das Icon am oberen Rand des Bildes */
  right: 15px; /* Positioniert das Icon am rechten Rand des Bildes */
  color: #fff; /* Weiße Farbe für das Icon */
  background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Sichtbarkeit */
  padding: 5px; /* Ein wenig Platz um das Icon */
  cursor: pointer; /* Verwandelt den Cursor in eine Hand, um Interaktivität anzudeuten */
  border-radius: 8px; /* Optional: Abrunden der linken unteren Ecke für ästhetische Zwecke */
}

// -------------------------------

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  padding: 16px;
}

.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  background-color: #f0f0f0;
  border-radius: 8px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.grid-item:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.image-box {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  opacity: 0.3;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.grid-container.cdk-drop-list-dragging .grid-item:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}