/* product.css */

body {
  margin: 0;
  color: #006c78;
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
  background-color: #fffbed;
}

/* Wrapper für alle Produkte */
.products-wrapper {
  display: flex;
  flex-wrap: wrap;           /* Automatisches Umbrechen in neue Zeilen */
  justify-content: center;   /* Zentrieren der Zeilen */
  gap: 20px;                 /* Abstand zwischen Produkten */
  max-width: 1200px;          /* Gesamtbreite für zwei Produkte zusammen */
  margin: 40px auto;         /* Zentrieren auf der Seite */
  padding: 0 10px;
  box-sizing: border-box;
}

/* Einzelnes Produkt */
.product-card {
  flex: 0 0 calc(50% - 10px); /* immer zwei pro Zeile */
  background-color: #fff1d4;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(177,148,105,0.95);
  box-sizing: border-box;
  padding: 15px;
  transition: transform 0.2s ease-in-out;
}

.product-card:hover {
  transform: translateY(-4px);
}

/* Produktbild */
.product-gallery-main img {
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
}

/* Thumbnails & Slider-Pfeile (auskommentiert) */
/*
.product-gallery-thumbs {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.product-gallery-thumbs img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
  border: 2px solid transparent;
}
.product-gallery-thumbs img.active {
  border-color: #006c78;
}
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: rgba(0,108,120,0.8);
  background-color: rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.slider-arrow:hover {
  background-color: rgba(0,108,120,0.8);
  color: #fff;
}
.slider-prev { left: 5px; }
.slider-next { right: 5px; }
*/

/* Titel */
.product-title {
  font-size: 1.4em;
  font-weight: bold;
  margin: 10px 0;
  color: #006c78;
}

/* Beschreibung */
.product-description {
  font-size: 1em;
  margin-bottom: 10px;
}

/* Einklappbare Details */
details summary {
  cursor: pointer;
  font-weight: bold;
  color: #004a54;
  margin-bottom: 5px;
}

/* Preis-Tabelle */
.product-pricing table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.product-pricing th,
.product-pricing td {
  border: 1px solid #ffe2bc;
  background-color: #ffe2bc;
  padding: 6px;
  text-align: center;
}

.product-pricing th {
  background-color: #ffd4a3;
}

/* Button */
.product-button {
  text-align: center;
  margin-top: 10px;
}

.product-button img {
  width: 80%;
  border-radius: 4px;
  cursor: pointer;
}

/* Mobile Ansicht */
@media (max-width: 780px) {
  .product-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}