/* =========================================================
   Produktseiten im neuen Aufbau (Auftrag F2, 2026-10-30)
   Geladen über `seitenCss: produkt` (Layout produkt.njk) zusammen mit css/neu.css (Farbwelt A).
   Nur Rollen-Tokens. Das Stylesheet style.css bleibt unberührt.
   ========================================================= */
body.seite-produkt { --rand: max(var(--gutter), calc((100vw - var(--container-wide)) / 2 + var(--gutter))); }

/* Brotkrumen als schmaler dunkler Streifen, passend zu Kopf und Bestellstrecke */
.seite-produkt .crumbs { max-width: none; margin: 0 0 24px; padding: 14px var(--rand); background: var(--s-buehne); color: var(--s-auf-buehne-2); }
.seite-produkt .crumbs a { color: var(--s-auf-buehne-2); }
.seite-produkt .crumbs a:hover { color: var(--s-auf-buehne); }

/* "Merken" als Zweitknopf mit Tiefe, gleich hoch wie "In den Warenkorb" */
.pd-aktionen { gap: 14px 16px; align-items: center; padding-bottom: 6px; }
.pd-aktionen .btn-merken {
  --hub: 4px;
  padding: 13px 22px 12px; font-family: var(--font-display); font-weight: 800; font-size: 15.5px; letter-spacing: .03em; line-height: 1.1;
  color: var(--knopf2-text);
}
.pd-aktionen .btn-merken svg { stroke: currentColor; }
.pd-aktionen .btn-merken:hover { color: var(--knopf2-text); }
.pd-aktionen .btn-merken.ist-gemerkt { color: var(--knopf2-text); }
.pd-aktionen .btn-merken.ist-gemerkt svg { fill: var(--s-akzent); stroke: var(--knopf2-text); }

/* Vorschaubilder: 16 px Abstand untereinander, 20 px Luft zu den Knöpfen */
.pd-gallery { gap: 16px; padding: 20px 0 0; }
.pd-gallery .pd-thumb { margin: 0; }