/* NEU: neue Produktseite (Berggut_ProductPage), nur im Handle bgp_product_view geladen.
   Teil A2: nur eigene bgp-Klassen; jede Regel setzt die Eigenschaften, die Theme-Element-Regeln sonst
   mitbringen (Ränder, Schatten, Schrift, Großschreibung). Fremdklassen nur aus der Ausnahmeliste
   (Wächter dev/tests/js/berggut/productpage-isolation.test.js).
   Farben: Seite #f7f5f2, Karten weiß, Rot #d20f23, Knopf gelb #ffd766, Text #222, gedämpft #4a463f/#6b665f. */

body.bgp-product .main.container { background: #f7f5f2; }
body.bgp-product .bgp { font-size: 17px; line-height: 1.45; color: #222; }
body.bgp-product .bgp-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
body.bgp-product .bgp .bgp-h2 { margin: 0 0 14px; padding: 0; border: 0; font-family: inherit; font-size: 26px; line-height: 1.2; font-weight: 600; color: #222; text-transform: none; letter-spacing: 0; }
body.bgp-product .bgp-ext { min-width: 0; }
/* Tastaturfokus: Magento setzt *:focus { outline: 0 }, deshalb sichtbarer Ring nur fuer Tastaturbedienung */
body.bgp-product .bgp button:focus-visible,
body.bgp-product .bgp input:focus-visible,
body.bgp-product .bgp select:focus-visible,
body.bgp-product .bgp textarea:focus-visible,
body.bgp-product .bgp a:focus-visible,
body.bgp-product .bgp summary:focus-visible,
body.bgp-product .bgp [tabindex]:focus-visible { outline: 2px solid #222222; outline-offset: 2px; }

/* Oberer Bereich */
body.bgp-product .bgp-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
body.bgp-product .bgp-media { position: relative; min-width: 0; }
body.bgp-product .bgp-badge { position: absolute; z-index: 5; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef5fb; color: #1d4f7a; font-size: 14px; font-weight: 600; line-height: 1.3; }
body.bgp-product .bgp-badge .bgp-icon { width: 16px; height: 16px; }
body.bgp-product .bgp-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
body.bgp-product .bgp .bgp-title { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 29px; line-height: 1.1; font-weight: 600; color: #222; text-transform: none; letter-spacing: 0; }

/* Galerie */
body.bgp-product .bgp-gallery { position: relative; }
body.bgp-product .bgp-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 1px solid #efebe6; border-radius: 14px; background: #fff; }
body.bgp-product .bgp-gallery__track::-webkit-scrollbar { display: none; }
body.bgp-product .bgp .bgp-gallery__slide { flex: 0 0 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; box-shadow: none; scroll-snap-align: start; cursor: zoom-in; }
body.bgp-product .bgp-gallery__img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
body.bgp-product .bgp-gallery__dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
body.bgp-product .bgp-gallery__dot { width: 6px; height: 6px; border-radius: 3px; background: #d6d1ca; }
body.bgp-product .bgp-gallery__dot--on { width: 20px; background: #d20f23; }
body.bgp-product .bgp-gallery__thumbs { display: none; gap: 10px; padding-top: 12px; overflow-x: auto; }
body.bgp-product .bgp .bgp-gallery__thumb { flex: 0 0 72px; width: 72px; height: 72px; margin: 0; padding: 0; border: 1px solid #e6e2dc; border-radius: 10px; background: #fff; box-shadow: none; overflow: hidden; cursor: pointer; }
body.bgp-product .bgp .bgp-gallery__thumb--on { border: 2px solid #222; }
body.bgp-product .bgp-gallery__thumb-img { display: block; width: 100%; height: 100%; object-fit: contain; }
body.bgp-product .bgp-gallery__dialog { width: min(92vw, 1100px); max-height: 92vh; padding: 0; border: 0; border-radius: 14px; background: #fff; }
body.bgp-product .bgp-gallery__dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
body.bgp-product .bgp-gallery__large { display: block; width: 100%; max-height: 92vh; object-fit: contain; }
body.bgp-product .bgp .bgp-gallery__close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); color: #222; font-size: 28px; line-height: 1; cursor: pointer; }

/* Hersteller-Pille */
body.bgp-product .bgp-brand { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; color: #4a463f; text-decoration: none; font-size: 15px; }
body.bgp-product .bgp-brand__logo { height: 24px; width: auto; max-width: 160px; }
body.bgp-product .bgp-brand__name { font-weight: 600; color: #222; }

/* Bewertungszeile */
body.bgp-product .bgp-rating { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: #222; text-decoration: none; font-size: 15px; }
body.bgp-product .bgp-stars { position: relative; display: inline-block; color: #d6d1ca; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
body.bgp-product .bgp-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: #e09a12; }
body.bgp-product .bgp-rating__value { font-weight: 600; }
body.bgp-product .bgp-rating__count { color: #6b665f; text-decoration: underline; }

/* Kurzbeschreibung, Weiterlesen */
body.bgp-product .bgp-overview__text { color: #4a463f; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.bgp-product .bgp-overview__text p { margin: 0 0 8px; }
body.bgp-product .bgp-clamp--short .bgp-overview__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
body.bgp-product .bgp-clamp--open .bgp-overview__text { display: block; -webkit-line-clamp: unset; overflow: visible; }
body.bgp-product .bgp-clamp--tall [data-bgp-clamp-text] { max-height: 420px; overflow: hidden; position: relative; }
body.bgp-product .bgp-clamp--tall [data-bgp-clamp-text]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); }
body.bgp-product .bgp-clamp--tall.bgp-clamp--open [data-bgp-clamp-text],
body.bgp-product .bgp-clamp--tall.bgp-clamp--short [data-bgp-clamp-text] { max-height: none; }
body.bgp-product .bgp-clamp--tall.bgp-clamp--open [data-bgp-clamp-text]::after,
body.bgp-product .bgp-clamp--tall.bgp-clamp--short [data-bgp-clamp-text]::after { display: none; }
body.bgp-product .bgp .bgp-more { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; color: #b00d1d; font: inherit; font-weight: 600; text-transform: none; cursor: pointer; }
body.bgp-product .bgp .bgp-more[hidden] { display: none; }

/* Kaufbox */
body.bgp-product .bgp-buybox { padding: 16px; border-radius: 16px; background: #fff; }
body.bgp-product .bgp-buy { display: flex; flex-direction: column; gap: 10px; }
body.bgp-product .bgp-buy__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.bgp-product .bgp-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.4; }
body.bgp-product .bgp-pill--ok { background: #e9f5ea; color: #2e7d32; }
body.bgp-product .bgp-pill--off { background: #f1eeea; color: #6b665f; }
body.bgp-product .bgp-pill--low { background: #fdecee; color: #b00d1d; }
body.bgp-product .bgp-buy__sku { padding: 3px 10px; border: 1px solid #e6e2dc; border-radius: 6px; color: #6b665f; font-size: 14px; }
body.bgp-product .bgp-price { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
body.bgp-product .bgp-price__value { font-size: 34px; font-weight: 600; line-height: 1.1; color: #222; }
body.bgp-product .bgp-price__old { color: #6b665f; font-size: 18px; }
body.bgp-product .bgp .bgp-price__tax,
body.bgp-product .bgp .bgp-price__base { margin: 0; font-size: 15px; line-height: 1.4; color: #6b665f; }
body.bgp-product .bgp-price__tax a { color: #6b665f; text-decoration: underline; }
body.bgp-product .bgp-form { margin-top: 6px; }
body.bgp-product .bgp-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
body.bgp-product .bgp-qty { display: flex; align-items: center; border: 1px solid #d6d6d6; border-radius: 10px; background: #fff; }
body.bgp-product .bgp-qty__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.bgp-product .bgp .bgp-qty__btn { width: 44px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; color: #222; font-size: 22px; font-weight: 400; line-height: 1; cursor: pointer; }
body.bgp-product .bgp .bgp-qty__input { width: 44px; height: 52px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #222; font: inherit; font-size: 18px; font-weight: 600; text-align: center; -moz-appearance: textfield; }
body.bgp-product .bgp .bgp-qty__input::-webkit-outer-spin-button,
body.bgp-product .bgp .bgp-qty__input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
body.bgp-product .bgp .bgp-cart .bgp-cart__btn { flex: 1 1 200px; height: 52px; margin: 0; padding: 0 18px; border: 0; border-radius: 10px; background: #ffd766; box-shadow: none; text-shadow: none; color: #000; font: inherit; font-size: 19px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0; cursor: pointer; }
body.bgp-product .bgp .bgp-cart .bgp-cart__btn:hover { background: #f5c842; }
body.bgp-product .bgp .bgp-cart .bgp-cart__btn[disabled] { opacity: 0.6; cursor: default; }
body.bgp-product .bgp-ext--express { margin-top: 10px; }
body.bgp-product .bgp-ext--buy { margin-top: 6px; font-size: 15px; }

/* Versandhinweis */
body.bgp-product .bgp-ship { margin-top: 12px; padding: 12px; border-radius: 12px; background: #f3efe9; font-size: 15px; }
body.bgp-product .bgp-ship[hidden] { display: none; }
body.bgp-product .bgp .bgp-ship__text { margin: 0 0 8px; }
body.bgp-product .bgp-ship__text--free { display: none; }
body.bgp-product .bgp-ship--free .bgp-ship__text--free { display: block; font-weight: 600; color: #1f6b33; }
body.bgp-product .bgp-ship--free .bgp-ship__text--open { display: none; }
body.bgp-product .bgp-ship__track { height: 6px; border-radius: 3px; background: #e6e2dc; }
body.bgp-product .bgp-ship__bar { display: block; height: 6px; width: 0; border-radius: 3px; background: #e07b00; }
body.bgp-product .bgp-ship--free .bgp-ship__bar { width: 100%; background: #2e7d32; }

/* Details und Fragen: mobil Details vor FAQ */
body.bgp-product .bgp-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: 28px; }
body.bgp-product .bgp-acc { border: 1px solid #e6e2dc; border-radius: 16px; overflow: hidden; background: #fff; }
body.bgp-product .bgp-acc__item + .bgp-acc__item { border-top: 1px solid #e6e2dc; }
body.bgp-product .bgp-acc__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 56px; padding: 0 16px; list-style: none; cursor: pointer; }
body.bgp-product .bgp-acc__head::-webkit-details-marker { display: none; }
body.bgp-product .bgp .bgp-acc__title { margin: 0; padding: 0; font-family: inherit; font-size: 21px; font-weight: 600; color: #222; text-transform: none; letter-spacing: 0; }
body.bgp-product details[open] > summary .bgp-acc__chev { transform: rotate(180deg); }
body.bgp-product .bgp-acc__body { padding: 0 16px 16px; font-size: 16px; color: #4a463f; }
body.bgp-product .bgp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 12px; }
body.bgp-product .bgp-facts dt { color: #6b665f; font-weight: 400; }
body.bgp-product .bgp-facts dd { margin: 0; }
body.bgp-product .bgp-nutrition table { width: 100%; border-collapse: collapse; }
body.bgp-product .bgp-nutrition td { padding: 6px 0; border-top: 1px solid #efebe6; }
body.bgp-product .bgp-nutrition td + td { text-align: right; }
body.bgp-product .bgp-faq__list { border-radius: 16px; background: #fff; overflow: hidden; }
body.bgp-product .bgp-faq__item + .bgp-faq__item { border-top: 1px solid #e6e2dc; }
body.bgp-product .bgp-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 6px 16px; list-style: none; cursor: pointer; }
body.bgp-product .bgp-faq__q::-webkit-details-marker { display: none; }
body.bgp-product .bgp .bgp-faq__title { margin: 0; padding: 0; font-family: inherit; font-size: 18px; line-height: 1.3; font-weight: 600; color: #222; text-transform: none; letter-spacing: 0; }
body.bgp-product .bgp-faq__a { padding: 0 16px 16px; color: #4a463f; }
body.bgp-product .bgp-faq__more { font-weight: 600; }
body.bgp-product .bgp-faq__ask { margin-top: 14px; }
/* NEU (Paket 6a): volle Antworten mit Absaetzen, Listen und Links */
body.bgp-product .bgp-faq__text p { margin: 0 0 10px; }
body.bgp-product .bgp-faq__text p:last-child { margin-bottom: 0; }
body.bgp-product .bgp-faq__text ul, body.bgp-product .bgp-faq__text ol { margin: 0 0 10px; padding-left: 22px; }
body.bgp-product .bgp-faq__text ul { list-style: disc; }
body.bgp-product .bgp-faq__text ol { list-style: decimal; }
body.bgp-product .bgp-faq__text li { margin: 0 0 4px; }
body.bgp-product .bgp-faq__text a { color: inherit; text-decoration: underline; }
body.bgp-product .bgp-faq__text strong, body.bgp-product .bgp-faq__text b { font-weight: 600; }

/* Bewertungen, Zusatzbereiche */
body.bgp-product .bgp-extras { margin-top: 28px; }
body.bgp-product .bgp-reviews { margin-top: 32px; }

/* Kacheln (verwandte Artikel, Dazu passt auch) */
body.bgp-product .bgp-related { margin-top: 32px; }
body.bgp-product .bgp-tiles ~ .bgp-tiles { margin-top: 32px; }
body.bgp-product .bgp .bgp-tiles__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
body.bgp-product .bgp .bgp-tiles .bgp-tile { display: flex; flex-direction: column; gap: 4px; width: auto; min-width: 0; margin: 0; padding: 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: none; vertical-align: top; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__img { display: block; margin: 0 0 6px; padding: 0; }
body.bgp-product .bgp-tile__pic { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: #fff; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__name { display: block; margin: 0; padding: 0; color: #222; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; word-break: normal; overflow-wrap: anywhere; }
body.bgp-product .bgp-tile__price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
body.bgp-product .bgp-tile__value { font-size: 18px; font-weight: 600; color: #222; }
body.bgp-product .bgp-tile__old { color: #6b665f; font-size: 15px; }
body.bgp-product .bgp .bgp-tile__base,
body.bgp-product .bgp .bgp-tile__tax { margin: 0; font-size: 13px; line-height: 1.35; color: #6b665f; }
body.bgp-product .bgp-tile__tax a { color: #6b665f; text-decoration: underline; }
body.bgp-product .bgp-tile__form { margin-top: auto; padding-top: 8px; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__btn { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0 12px; border: 0; border-radius: 10px; background: #ffd766; box-shadow: none; text-shadow: none; color: #000; font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; text-transform: none; text-decoration: none; letter-spacing: 0; cursor: pointer; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__btn:hover { background: #f5c842; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__form .bgp-tile__btn { margin-top: 0; }
body.bgp-product .bgp .bgp-tiles .bgp-tile__btn--view { margin-top: auto; background: #fff; border: 1px solid #222; }
body.bgp-product .bgp-tile__off { margin-top: auto; padding-top: 8px; color: #6b665f; font-size: 15px; }

/* Kaufleiste Handy */
body.bgp-product .bgp-sticky { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 10px 15px; background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); }
body.bgp-product .bgp-sticky[hidden] { display: none; }
body.bgp-product .bgp-sticky__info { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
body.bgp-product .bgp-sticky__name { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.bgp-product .bgp-sticky__price { font-size: 19px; font-weight: 600; }
body.bgp-product .bgp-sticky__note { margin-top: 2px; color: #5f574f; font-size: 12px; line-height: 1.3; }
body.bgp-product .bgp-sticky__note:empty { display: none; }
body.bgp-product .bgp .bgp-btn { height: 48px; margin: 0; padding: 0 18px; border: 0; border-radius: 10px; background: #ffd766; box-shadow: none; text-shadow: none; color: #000; font: inherit; font-size: 17px; font-weight: 600; line-height: 1; text-transform: none; cursor: pointer; }

/* Kaufleiste sichtbar: Seitenende nicht verdecken */
@media (max-width: 767px) {
    body.bgp-product.bgp-sticky-on { padding-bottom: 80px; }
}

/* ab Tablet: mehr Kacheln */
@media (min-width: 640px) {
    body.bgp-product .bgp .bgp-tiles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Desktop: zwei Spalten erst ab 992 px (darunter ist .main.container volle Breite bzw. 750 px) */
@media (min-width: 992px) {
    body.bgp-product .bgp-top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
    body.bgp-product .bgp .bgp-title { font-size: 38px; }
    body.bgp-product .bgp-gallery__dots { display: none; }
    body.bgp-product .bgp-gallery__thumbs { display: flex; }
    body.bgp-product .bgp-columns { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); grid-template-areas: "faq details"; gap: 36px; margin-top: 48px; }
    body.bgp-product .bgp-columns__details { grid-area: details; }
    body.bgp-product .bgp-columns__faq { grid-area: faq; }
    body.bgp-product .bgp-columns--single { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    body.bgp-product .bgp-columns--single > div { grid-area: auto; }
    body.bgp-product .bgp .bgp-faq__title { font-size: 19px; }
    body.bgp-product .bgp-faq__q { padding: 6px 20px; }
    body.bgp-product .bgp-faq__a { padding: 0 20px 18px; }
    body.bgp-product .bgp .bgp-h2 { font-size: 30px; }
    body.bgp-product .bgp .bgp-tiles__list { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
}

/* NEU (Teil B): Produzenten-Karte */
body.bgp-product .bgp-producer { display: flex; flex-direction: column; margin: 28px 0 24px; padding: 0; border: 0; border-radius: 16px; overflow: hidden; color: #222222; box-shadow: none; }
body.bgp-product .bgp-producer--light { color: #ffffff; }
body.bgp-product .bgp-producer__media { position: relative; margin: 0; background: rgba(0, 0, 0, 0.06); }
body.bgp-product .bgp-producer__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0; padding: 0; outline-offset: -3px; }
body.bgp-product .bgp-producer__track::-webkit-scrollbar { display: none; }
body.bgp-product .bgp-producer__slide { flex: 0 0 100%; margin: 0; padding: 0; scroll-snap-align: start; aspect-ratio: 3 / 2; }
body.bgp-product .bgp-producer__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 0; }
body.bgp-product .bgp-producer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #222222; font-size: 24px; font-weight: 400; line-height: 40px; text-align: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); }
body.bgp-product .bgp-producer__nav--prev { left: 12px; }
body.bgp-product .bgp-producer__nav--next { right: 12px; }
body.bgp-product .bgp-producer__dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; }
body.bgp-product .bgp-producer__dot { width: 10px; height: 10px; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.6); cursor: pointer; box-shadow: none; }
body.bgp-product .bgp-producer__dot--on { background: #ffffff; }
body.bgp-product .bgp-producer__body { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 24px 20px; }
body.bgp-product .bgp-producer__kicker { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
body.bgp-product .bgp-producer__logo { display: block; width: auto; max-width: 200px; max-height: 64px; margin: 0; border: 0; }
body.bgp-product .bgp-producer__title { margin: 0; font-family: inherit; text-transform: none; letter-spacing: 0; color: inherit; font-size: 26px; font-weight: 600; line-height: 1.2; }
body.bgp-product .bgp-producer__text { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; }
body.bgp-product .bgp-producer__text p { margin: 0 0 10px; color: inherit; }
body.bgp-product .bgp-producer__text a, body.bgp-product .bgp-producer__link { color: inherit; text-decoration: underline; }
body.bgp-product .bgp-producer__features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
body.bgp-product .bgp-producer__feature { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
body.bgp-product .bgp-producer__value { font-size: 28px; font-weight: 600; line-height: 1.1; }
body.bgp-product .bgp-producer__label { font-size: 14px; font-weight: 400; line-height: 1.3; }
body.bgp-product .bgp-producer__link { align-self: flex-start; margin-top: 4px; font-size: 16px; font-weight: 600; }
body.bgp-product .bgp-brand__place { font-weight: 400; }
@media (max-width: 479px) {
    body.bgp-product .bgp-producer__features { grid-template-columns: 1fr; }
}
@media (min-width: 992px) {
    body.bgp-product .bgp-producer { flex-direction: row; min-height: 380px; margin-top: 48px; }
    body.bgp-product .bgp-producer__media { flex: 0 0 45%; }
    body.bgp-product .bgp-producer__track, body.bgp-product .bgp-producer__slide { height: 100%; }
    body.bgp-product .bgp-producer__slide { aspect-ratio: auto; }
    body.bgp-product .bgp-producer__body { flex: 1 1 auto; justify-content: center; padding: 40px; }
    body.bgp-product .bgp-producer--noimg .bgp-producer__body { padding: 40px 48px; }
}

/* NEU (Teil C): Varianten-Kacheln */
body.bgp-product .bgp-variants { margin: 0 0 20px; padding: 0; border: 0; }
body.bgp-product .bgp-variants__title { margin: 0 0 10px; font-family: inherit; text-transform: none; letter-spacing: 0; color: #222222; font-size: 18px; font-weight: 600; line-height: 1.3; }
body.bgp-product .bgp-variants__subtitle { margin: 14px 0 8px; font-family: inherit; text-transform: none; letter-spacing: 0; color: #222222; font-size: 15px; font-weight: 600; line-height: 1.3; }
body.bgp-product .bgp-variants__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
body.bgp-product .bgp-variants__options { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.bgp-product .bgp-variants__item { margin: 0; padding: 0; }
body.bgp-product .bgp-variant, body.bgp-product .bgp-variant-option { position: relative; display: flex; flex-direction: column; gap: 2px; height: 100%; box-sizing: border-box; margin: 0; padding: 10px 12px; border: 1px solid #e3ddd4; border-radius: 10px; background: #ffffff; color: #222222; text-decoration: none; box-shadow: none; }
body.bgp-product .bgp-variant:hover, body.bgp-product .bgp-variant-option:hover { border-color: #b9ad9c; color: #222222; text-decoration: none; }
body.bgp-product .bgp-variant--current, body.bgp-product .bgp-variant-option--current { border: 2px solid #222222; padding: 9px 11px; }
body.bgp-product .bgp-variant--soldout, body.bgp-product .bgp-variant-option--soldout { background: #f2efea; color: #5f574f; }
body.bgp-product .bgp-variant--soldout .bgp-variant__unit, body.bgp-product .bgp-variant-option--soldout .bgp-variant-option__unit { opacity: 1; }
body.bgp-product .bgp-variant:focus-visible, body.bgp-product .bgp-variant-option:focus-visible { outline: 2px solid #222222; outline-offset: 2px; }
body.bgp-product .bgp-variant__img { display: block; width: 100%; height: auto; max-width: none; margin: 0 0 6px; border: 0; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: contain; background: #ffffff; }
body.bgp-product .bgp-variant__label, body.bgp-product .bgp-variant-option__label { font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto; }
body.bgp-product .bgp-variant__price, body.bgp-product .bgp-variant-option__price { font-size: 14px; font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
body.bgp-product .bgp-variant__unit, body.bgp-product .bgp-variant-option__unit { font-size: 12px; font-weight: 400; line-height: 1.3; opacity: 0.75; }
body.bgp-product .bgp-variant__badge { align-self: flex-start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: #e7f3e9; color: #1f6b33; font-size: 12px; font-weight: 600; line-height: 1.4; }
@media (min-width: 768px) {
    body.bgp-product .bgp-variant__img { aspect-ratio: 1 / 1; object-fit: cover; }
}
@media (min-width: 992px) {
    body.bgp-product .bgp-variants__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Fokusring auf heller Schrift (dunkle Produzenten-Karte): heller Ring fuer die Bedienelemente */
body.bgp-product .bgp-producer--light a:focus-visible,
body.bgp-product .bgp-producer--light [tabindex]:focus-visible { outline-color: #ffffff; }
body.bgp-product .bgp-producer__nav:focus-visible, body.bgp-product .bgp-producer__dot:focus-visible { outline: 2px solid #222222; box-shadow: 0 0 0 4px #ffffff; }
/* Spuren liegen in Behaeltern mit overflow: hidden, der Ring muss innen sitzen */
body.bgp-product .bgp .bgp-producer__track:focus-visible, body.bgp-product .bgp .bgp-gallery__track:focus-visible { outline-offset: -3px; }
body.bgp-product .bgp-producer--light .bgp-producer__track:focus-visible { outline-color: #ffffff; }