/* Das Grid-System */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
  gap: 30px;
  margin-top: 40px;
}

/* Bild-Container (Stapeln der Bilder via Positionierung) */
.card-image-wrapper {
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 2.5px;
  overflow: hidden;
  background-color: #f5f5f5;
  margin-bottom: 15px;

  /* Wichtig: Ermöglicht das absolute Positionieren der Bilder darin */
  position: relative;
}

/* Gemeinsame Regeln für beide Bilder */
.card-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Weicher Übergang */
  transition:
    opacity 0.4s ease,
    transform 0.5s ease;

  /* Positioniert beide Bilder genau übereinander */
  position: absolute;
  top: 0;
  left: 0;
}

/* Das Standardbild: ist immer sichtbar */
.primary-img {
  opacity: 1;
  z-index: 2; /* Liegt oben auf */
}

/* Das Hover-Bild: ist standardmäßig unsichtbar */
.secondary-img {
  opacity: 0;
  z-index: 1; /* Liegt darunter */
}

/* --- DIE HOVER-LOGIK --- */

/* Wenn über die Produkt-Karte gehovert wird... */

/* ...wird das primäre Bild unsichtbar... */
.product-card:hover .primary-img {
  opacity: 0;
  transform: scale(1.05);
}

/* ...und das sekundäre Bild wird sichtbar. */
.product-card:hover .secondary-img {
  opacity: 1;
  transform: scale(1.05);
}

/* Optional: Dezenten Zoom-Effekt auf das Hover-Bild anwenden */
.product-card:hover .secondary-img {
  transform: scale(1.03);
}

/* Info-Bereich */
.product-card h3 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.product-card .price {
  font-weight: 500;
  font-size: 1rem;
}

/* BREAKPOINTS (Anpassung an dein System) */
@media (max-width: 1020px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten auf kleinen Laptops */
  }
}

@media (max-width: 820px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten auf Tablets */
  }
}

@media (max-width: 550px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten auch auf Smartphones */
    gap: 24px 12px;
  }

  .product-card h3 {
    font-size: 0.95rem;
    line-height: 1.25;
  }

  .product-card .price {
    font-size: 0.9rem;
  }
}

/* Hinweis, solange keine Produkte im Shop sind */
.shop-maintenance {
  grid-column: 1 / -1;
  max-width: 600px;
}