/* ==========================================================================
   Ladenburger Shop — Produktseite
   Vorlage für Sackware, Briketts und Anzünder. Wird nach shop.css geladen.
   Die Kaufbox nutzt die Bausteine des Konfigurators (.wahl, .posten,
   .gesamt, .knopf), damit Auswahl und Preis überall gleich aussehen.

   Inhalt
     1. Aufbau: Galerie links, Kaufbox rechts
     2. Galerie
     3. Kaufbox mit Mengenwahl
     4. Produktdaten und Vorteile
     5. „Passt dazu"
     6. Anpassungen für Tablet und Handy
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Aufbau
   -------------------------------------------------------------------------- */

.produkt-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}


/* --------------------------------------------------------------------------
   2. Galerie
   Großes Bild plus Leiste mit vier Vorschaubildern.
   -------------------------------------------------------------------------- */

.galerie-gross {
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--farbe-bild-grund);
}

.galerie-gross img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-leiste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.galerie-leiste button {
  overflow: hidden;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}

.galerie-leiste img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie-leiste button:hover {
  border-color: var(--farbe-rand);
}

/* Aktives Vorschaubild: Rahmen in Sortimentsfarbe, wie die gewählte Kachel */
.galerie-leiste button[aria-current="true"] {
  border-color: var(--sortiment);
}


/* --------------------------------------------------------------------------
   3. Kaufbox mit Mengenwahl
   Bleibt beim Scrollen sichtbar.
   -------------------------------------------------------------------------- */

.kaufbox {
  position: sticky;
  top: 1.5rem;
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.kaufbox .marke {
  margin-bottom: 0.6rem;
}

.kaufbox h1 {
  font-size: var(--schrift-h1-produkt);
  line-height: 1.15;
}

.kaufbox .kurz {
  margin: 0.4rem 0 1rem;
  font-size: var(--schrift-body);
}

.kaufbox .lieferort-bestaetigung {
  margin: 0 0 1.1rem;
}

.kaufbox .feld + .feld {
  margin-top: 1rem;
}

.kaufbox .wahl {
  grid-template-columns: 1fr 1fr;
}

.kaufbox .wahl label {
  padding: 0.55rem 0.8rem;
}

.kaufbox .knopf {
  margin-top: 1.1rem;
}

/* Mengenwahl: Minus, Zahl, Plus als ein zusammenhängendes Element */
.stepper {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.stepper button,
.stepper input {
  height: 44px;
  border: 1px solid var(--farbe-rand);
  background: var(--farbe-flaeche);
  color: var(--farbe-dunkel);
}

.stepper button {
  width: 44px;
  font-size: 20px;
  cursor: pointer;
}

.stepper button:first-child {
  border-radius: var(--radius) 0 0 var(--radius);
}

.stepper button:nth-of-type(2) {
  border-radius: 0 var(--radius) var(--radius) 0;
}

.stepper button:hover {
  background: var(--farbe-marke-hell);
}

/* Zahlfeld ohne Pfeile des Browsers, die Knöpfe übernehmen das */
.stepper input {
  width: 4rem;
  border-right: 0;
  border-left: 0;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}

.stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.stepper .einheit {
  align-self: center;
  margin-left: 0.75rem;
  color: var(--farbe-dunkel);
}

.preis-block {
  margin-top: 1.1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--farbe-rand);
}

.kaufbox .termin {
  margin: 0.75rem 0 0;
  color: var(--farbe-text-schwach);
  font-size: var(--schrift-klein);
}


/* --------------------------------------------------------------------------
   4. Produktdaten und Vorteile
   Zwei Karten nebeneinander: Datentabelle und Vorteilsliste.
   -------------------------------------------------------------------------- */

.details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--abstand-raster);
  margin-top: var(--abstand-sektion);
}

.details section {
  padding: 1.75rem 2rem;
  border-radius: var(--radius);
  background: var(--farbe-flaeche);
}

.details h2,
.passt-dazu h2 {
  margin-bottom: 1rem;
  font-size: var(--schrift-h3);
}

.daten {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--schrift-mittel);
}

.daten th,
.daten td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--farbe-rand);
  text-align: left;
  vertical-align: top;
}

.daten th {
  width: 45%;
  color: var(--farbe-text-schwach);
  font-weight: 400;
}

.daten td {
  color: var(--farbe-dunkel);
}

.punkte {
  margin: 0;
  padding: 0;
  font-size: var(--schrift-mittel);
  list-style: none;
}

.punkte li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.punkte b {
  color: var(--farbe-dunkel);
}


/* --------------------------------------------------------------------------
   5. „Passt dazu"
   Nutzt die Produktkarten aus shop.css, hier dreispaltig.
   -------------------------------------------------------------------------- */

.passt-dazu {
  padding: var(--abstand-sektion) 0;
}

.passt-dazu .produkt-raster {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* --------------------------------------------------------------------------
   6. Anpassungen für Tablet und Handy
   -------------------------------------------------------------------------- */

@media (max-width: 960px) {
  .produkt-kopf,
  .details {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .kaufbox {
    position: static;
    padding: 1.5rem;
  }

  .passt-dazu .produkt-raster {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .kaufbox h1 {
    font-size: 28px;
  }

  .details section {
    padding: 1.25rem;
  }
}