/* PRODUKTSEITE (produkt.js) - Bauer C.
   Umbau nach Felix' PDF (28.10.2026): grosse Bilder Vorder-/Rueckseite mit
   Zoom, Set + Nummer, Sprache, Zustand mit Erklaerung, Preis, Lieferzeit,
   Versandhinweis, "Ähnliche Karten aus diesem Set" (SPEC §7.3).
   Das Fundament legt hier nur den Stil seines Platzhalters an. */

.produkt-platzhalter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
/* Galerie wie im alten Kartenfenster (.detail-gallery/.detail-main/
   .detail-thumbs aus styles.css). Im Fenster gab dessen Hoehe dem Bild das
   Mass; auf der Seite bekommt es eine eigene. */
.produkt-bild.detail-gallery { border-radius: var(--radius); }
.produkt-bild .detail-main { flex: none; height: clamp(360px, 62vh, 640px); }
@media (max-width: 640px) {
  .produkt-bild.detail-gallery { padding: 16px 12px 12px; }
  .produkt-bild .detail-main { height: min(56vh, 460px); }
}
.produkt-set { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.produkt-preis { margin: 12px 0 16px; font-size: 30px; font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.produkt-korb {
  min-height: 48px; padding: 0 24px; border: none; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700; color: var(--navy); background: var(--gold);
}
.produkt-korb.drin { color: #fff; background: var(--ok); }
/* Rueckmeldung wie am Kachel-Knopf (knopfPop; Keyframes aus styles.css). */
.produkt-korb.pop { animation: knopf-pop .35s cubic-bezier(.3,.7,.4,1); }
.produkt-korb.pop-raus { animation: knopf-raus .25s ease-out; }
.produkt-korb:disabled { opacity: .5; cursor: not-allowed; }
.produkt-korb:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 640px) {
  .produkt-platzhalter { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}