/* =====================================================================
   BongoBong — Rasta Design · bb--Komponenten-Schicht
   Ziel: templates/Sweet/themes/sweet/bb-rasta.css   (löst bb-hiphop.css ab)
   Tokens: --bb-* aus sweet.css (kompiliert aus sass/_variables.scss).
   Namespace-Regel (THEME-MAP §5): alles Eigene unter bb-, BEM mit __.
   Vendor-Anker nur die live verifizierten: .productbox-Kette, .ribbon,
   .wishlist, #jtl-nav-wrapper, ul.nav-icons, #footer, #copyright,
   body[data-page="18"] (Home).
   ===================================================================== */

/* ---------- Utilities ---------- */
.bb-stripe { height: 6px; background: var(--bb-stripe); }
.bb-stripe--thin { height: 3px; }
.bb-kicker {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--bb-muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.bb-kicker::before { content: ""; width: 26px; height: 5px; border-radius: 2px; flex: none; background: var(--bb-stripe); }
.bb-disp {
  font-family: var(--bb-font-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.04; margin: 0;
}
.bb-mark { display: inline-block; padding: .01em .14em; margin-inline: -.04em; border-radius: .14em; transform: rotate(-1.4deg); }
.bb-mark--g { background: var(--bb-g); color: var(--bb-bg); }
.bb-mark--y { background: var(--bb-y); color: var(--bb-ink); }
.bb-mark--r { background: var(--bb-r); color: var(--bb-bg); }
.bb-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.bb-section { padding-block: clamp(56px, 7vw, 88px); }
.bb-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; flex-wrap: wrap; }
.bb-section-head h2 { font-size: clamp(30px, 4.4vw, 52px); }
.bb-section-head .bb-link {
  font-family: var(--bb-font-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  border-bottom: 2px solid var(--bb-y); padding-bottom: 3px; white-space: nowrap; text-decoration: none; color: inherit;
}
.bb-section-head .bb-link:hover { color: var(--bb-g); border-color: var(--bb-g); }

/* ---------- Buttons (Pill + Mono, Dummy .btn) ---------- */
.btn, .bb-btn {
  font-family: var(--bb-font-mono); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 999px;
}
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; padding: 15px 24px; border: 0; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .2s ease, color .2s ease;
}
.bb-btn--ink { background: var(--bb-ink); color: var(--bb-bg); }
.bb-btn--ink:hover { background: var(--bb-g); color: #fff; }
.bb-btn--gold { background: var(--bb-y); color: var(--bb-ink); }
.bb-btn--gold:hover { transform: translateY(-1px); }
.bb-btn--ghost { border: 1.5px solid var(--bb-line); color: var(--bb-ink); background: none; }
.bb-btn--ghost:hover { border-color: var(--bb-ink); }

/* ---------- Gold-Marquee (Topbar, Block layout-header-branding-top-bar) ---------- */
.bb-marquee { background: var(--bb-y); color: var(--bb-ink); overflow: hidden; white-space: nowrap; }
.bb-marquee__track { display: inline-flex; animation: bb-marq 28s linear infinite; }
.bb-marquee__seq { display: inline-flex; }
.bb-marquee__seq span {
  font-family: var(--bb-font-mono); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 9px 0;
}
.bb-marquee__seq span::after { content: "★"; margin-inline: 22px; opacity: .45; }
@keyframes bb-marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bb-marquee__track { animation: none; } }

/* ---------- Header-Anker (verifiziert: #jtl-nav-wrapper, ul.nav-icons) ---------- */
#jtl-nav-wrapper .nav-link { font-family: var(--bb-font-mono); text-transform: uppercase; letter-spacing: .05em; }
ul.nav-icons .badge { background: var(--bb-r); color: #fff; font-family: var(--bb-font-mono); }
/* FlexNav (.bb-fn-*) wird separat in plugins/bb_frontend/frontend/css/flexnav.css umgestellt. */

/* ---------- Produktkachel (.productbox-Kette, Werte = Dummy .rcard) ---------- */
.productbox.productbox-column {
  position: relative; background: var(--bb-surface);
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  padding: 12px; display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.productbox.productbox-column:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); }
.productbox .productbox-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* v4: NICHT auf .square scopen — im OPC-Kontext fehlt die Klasse. Plus
   Remake-Transform-Gotcha neutralisieren (img.first/.second werden mit
   translate(-50%,-50%) zentriert; ohne top/left-Reset hängt das Bild
   135px außerhalb der Kachel — dokumentiertes v2.10-Rezept). */
.productbox .productbox-image {
  border-radius: var(--bb-radius-sm); overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 12px;
  background: #fff; /* Owner: reinweißer Kasten statt beige — Produkt hebt sich klar ab */
}
.productbox .productbox-image .inner,
.productbox .productbox-image picture {
  display: flex; width: 100%; height: 100%; position: static;
}
.productbox .productbox-image img {
  width: 100%; height: 100%; object-fit: contain; padding: 0; /* Owner: randlos — längste Seite bis Container-Rand */
  position: static !important; transform: none !important;
  transition: none !important; inset: auto !important;
}
.productbox .productbox-image img.second,
.productbox .productbox-image.second-wrapper,
.productbox .productbox-onhover { display: none !important; }
.productbox .productbox-ribbon.ribbon,
.productbox .ribbon {
  font-family: var(--bb-font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px; transform: rotate(-2deg);
}
.productbox .wishlist.badge {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92); /* Fallback für Browser ohne color-mix */
  background: color-mix(in oklab, var(--bb-surface), transparent 8%);
  border: 1px solid var(--bb-line); display: grid; place-items: center; transition: .18s;
}
.productbox .wishlist.badge:hover { transform: scale(1.08); }
.productbox .wishlist.badge.on, .productbox .wishlist.badge.active { background: var(--bb-r); color: #fff; border-color: transparent; }
.productbox .manufacturer {
  font-family: var(--bb-font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--bb-muted);
}
.productbox .productbox-title a {
  font-size: 14.5px; line-height: 1.3; font-weight: 600; color: inherit; text-decoration: none;
}
.productbox .productbox-price { font-family: var(--bb-font-mono); font-weight: 700; font-size: 17px; color: var(--bb-ink); }
.productbox .bb-card__pricerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.productbox .bb-card__add.basket-details-add-to-cart {
  width: 42px; height: 42px; border-radius: 50%; background: var(--bb-ink); color: var(--bb-bg);
  display: grid; place-items: center; flex: none; border: 0; padding: 0; transition: .18s;
}
.productbox .bb-card__add.basket-details-add-to-cart:hover { background: var(--bb-g); color: #fff; }

/* ---------- Home-Sektionen (body[data-page="18"], Markup: Sweet/layout/index.tpl) ---------- */
.bb-hero .bb-wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bb-hero h1 { font-size: clamp(44px, 7vw, 92px); line-height: .98; }
.bb-hero__sub { max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--bb-ink-2); margin: 22px 0 28px; }
.bb-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.bb-hero__facts { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 36px; }
.bb-hero__facts .n { font-family: var(--bb-font-mono); font-weight: 700; font-size: 22px; }
.bb-hero__facts .l { font-family: var(--bb-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-muted); }
.bb-hero__frame { border-radius: var(--bb-radius-lg); overflow: hidden; border: 1.5px solid var(--bb-line); }
.bb-hero__frame img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) { .bb-hero .bb-wrap { grid-template-columns: 1fr; } }

.bb-usp { border-block: 1px solid var(--bb-line); background: var(--bb-bg-2); }
.bb-usp .bb-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-block: 22px; }
.bb-usp__item { display: flex; align-items: center; gap: 12px; }
.bb-usp__ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; }
.bb-usp__item:nth-child(3n+1) .bb-usp__ring { background: var(--bb-g); }
.bb-usp__item:nth-child(3n+2) .bb-usp__ring { background: var(--bb-y); color: var(--bb-ink); }
.bb-usp__item:nth-child(3n)   .bb-usp__ring { background: var(--bb-r); }
.bb-usp__item strong { display: block; font-size: 14px; }
.bb-usp__item span { font-size: 12.5px; color: var(--bb-muted); }
@media (max-width: 900px) { .bb-usp .bb-wrap { grid-template-columns: 1fr 1fr; } }

.bb-cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bb-cat { border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; background: var(--bb-surface); text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
.bb-cat:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow); }
.bb-cat__media { display: block; aspect-ratio: 16 / 10; background: var(--bb-bg-2); }
.bb-cat__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-cat__meta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.bb-cat__idx { font-family: var(--bb-font-mono); font-weight: 700; color: var(--bb-muted); }
.bb-cat strong { display: block; font-size: 16px; }
.bb-cat small { color: var(--bb-muted); }
@media (max-width: 820px) { .bb-cats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 360px) { .bb-cats__grid { grid-template-columns: 1fr; } }

.bb-manifesto__panel { background: #12351f; color: #f2f0e4; border-radius: var(--bb-radius-lg); overflow: hidden; position: relative; }
.bb-manifesto__panel::before { content: ""; display: block; height: 6px; background: var(--bb-stripe); }
.bb-manifesto__inner { padding: clamp(44px, 6vw, 76px) clamp(26px, 5vw, 64px); position: relative; z-index: 2; }
.bb-manifesto__inner .bb-kicker { color: rgba(242, 240, 228, .65); }
.bb-manifesto__inner h2 {
  color: #f2f0e4;
  font-size: clamp(30px, 4.6vw, 60px);
  max-width: 20ch;
}
.bb-manifesto__inner p { max-width: 500px; color: rgba(242, 240, 228, .78); margin: 22px 0 30px; }
.bb-manifesto__stats { display: flex; gap: clamp(20px, 4vw, 56px); margin-top: 38px; padding-top: 26px; border-top: 1px solid rgba(242, 240, 228, .16); flex-wrap: wrap; }
.bb-manifesto__stats .n { font-family: var(--bb-font-mono); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); color: var(--bb-y); }
.bb-manifesto__stats .l { font-family: var(--bb-font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 240, 228, .6); margin-top: 4px; }
.bb-manifesto__deco { position: absolute; right: -50px; bottom: -90px; font-family: var(--bb-font-disp); font-size: 330px; color: rgba(242, 240, 228, .045); line-height: 1; z-index: 1; pointer-events: none; user-select: none; }

.bb-brands__wall { display: flex; flex-wrap: wrap; gap: 12px; }
.bb-brands__wall a {
  flex: 1 1 calc(16.66% - 12px); min-width: 132px; border: 1.5px solid var(--bb-line); border-radius: 999px;
  padding: 18px 14px; display: grid; place-items: center; font-family: var(--bb-font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; color: var(--bb-ink-2);
  transition: .2s; background: var(--bb-surface); text-decoration: none;
}
.bb-brands__wall a:hover { color: var(--bb-ink); border-color: var(--bb-ink); transform: translateY(-3px) rotate(-.5deg); }

.bb-newsletter__frame { border-radius: var(--bb-radius-lg); padding: 5px; background: var(--bb-stripe); }
.bb-newsletter__inner {
  background: var(--bb-surface); border-radius: calc(var(--bb-radius-lg) - 4px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: clamp(32px, 5vw, 56px);
}
.bb-newsletter__inner h2 { font-size: clamp(26px, 3.5vw, 42px); }
.bb-newsletter__inner p { color: var(--bb-ink-2); margin: 12px 0 0; }
.bb-newsletter__fine { font-size: 12px; color: var(--bb-muted); }
@media (max-width: 760px) { .bb-newsletter__inner { grid-template-columns: 1fr; } }

/* ---------- Footer (Remake #footer/#copyright, Boxen aus DB) ---------- */
/* Roast-M11: Rasta-Streifen direkt AM Footer (::before) statt tpl-Override —
   das frühere footer.tpl entfällt damit komplett (weniger aktive Overrides). */
#footer { position: relative; }
/* Streifen absolut an die Oberkante — sonst schiebt das footer-padding-top (48px)
   den statischen ::before-Block in die dunkle Flaeche hinein (Fix 2026-07-19). */
#footer::before { content: ""; display: block; height: 6px; background: var(--bb-stripe);
  position: absolute; top: 0; left: 0; right: 0; }
#footer { background: var(--bb-ink); color: rgba(253, 252, 247, .68); }
#footer a { color: rgba(253, 252, 247, .68); }
#footer a:hover { color: #fdfcf7; }
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer .h5 {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #fdfcf7;
}
/* Pflicht-Widerrufslink (Par. 356a BGB) freistellen: der fixe Scroll-Top-Button
   und die Consent-Bubble sitzen unten links und ueberlappten den Link (Fix 2026-07-19). */
#footer .withdrawal-link-wrapper { padding-left: 58px; }
#footer .withdrawal-link-wrapper a { color: rgba(253, 252, 247, .82); }
#footer .withdrawal-link-wrapper a:hover { color: #fdfcf7; }

#copyright { background: var(--bb-ink); color: rgba(253, 252, 247, .5); border-top: 1px solid rgba(253, 252, 247, .14); }

/* ---------- OPC-Produkt-Rails (taProductFeed, .opc-ProductStream) ----------
   Kacheln kommen über productlist/item_box.tpl (isOPC, class='thumbnail') —
   bereits gestylt. Hier nur Rhythmus + Sektionskopf für den OPC-Baustein
   „Freier eigener Inhalt“ (Markup-Snippet: theme/README.md §OPC). */
body[data-page="18"] .opc-ProductStream { margin-bottom: clamp(40px, 5vw, 64px); }
/* Safety-Net (V14): bildlose Produkte auf der Home ausblenden (wie bb-hiphop;
   inkl. lazysizes data-src, solange src noch Platzhalter ist) */
body[data-page="18"] .productbox:has(img[src*="keinBild"]),
body[data-page="18"] .productbox:has(img[data-src*="keinBild"]) { display: none; }
.bb-opc-head { max-width: 1280px; margin: clamp(48px, 6vw, 72px) auto 32px; padding-inline: clamp(16px, 4vw, 40px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bb-opc-head h2 { font-size: clamp(30px, 4.4vw, 52px); }
/* Slick-Pfeile der Slider-Variante (mobil erzwungen) auf Ink/Grün */
.opc-product-slider .slick-arrow { background: var(--bb-ink); color: var(--bb-bg); border-radius: 50%; }
.opc-product-slider .slick-arrow:hover { background: var(--bb-g); }

/* =====================================================================
   2b: Globale Komponenten (Coverage-Review 2026-07-14, Findings F1–F14;
   Selektoren am Repo-Mirror verifiziert — docs/design/rasta-coverage-review.md)
   ===================================================================== */

/* F1 — EIN CTA-Schema: Primary = Ink, Hover Grün (Login, Warenkorb,
   Checkout-Einstieg #cart-checkout-btn, Filter — überall gleich) */
.btn-primary {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background: var(--bb-g); border-color: var(--bb-g); color: #fff;
}

/* F2/F8 — Sekundär-/Outline-Buttons als Ghost („Zum Artikel", „Jetzt
   registrieren", Subkategorie-Pills). Ausnahme: Mengen-Stepper bleiben flächig. */
.btn-secondary, .btn-outline-secondary, .btn-outline-primary {
  background: none; border: 1.5px solid var(--bb-line); color: var(--bb-ink);
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.show > .btn-outline-secondary.dropdown-toggle,
.show > .btn-outline-primary.dropdown-toggle {
  background: none; border-color: var(--bb-ink); color: var(--bb-ink);
  box-shadow: none;
}
.form-counter .btn-secondary, .form-counter .btn-secondary:hover {
  border: 0; background: var(--bb-bg-2); color: var(--bb-ink);
}

/* F5 — Produkt-Slider überall (PDP „Ähnliche", Basket, mobile OPC-Rails,
   Boxen tplscope=box, X-Selling-Modal tplscope=half — Roast-M5):
   Karten-Look + Flex-/Höhen-Kette (Roast-M6) für item_slider-Kacheln.
   Wrapper: .carousel.slick-type-{product|box|half} (snippets/product_slider.tpl) */
.carousel.slick-type-product .productbox,
.carousel.slick-type-box .productbox,
.carousel.slick-type-half .productbox {
  position: relative; background: var(--bb-surface);
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  padding: 12px; height: 100%;
  display: flex; flex-direction: column;
}
.carousel.slick-type-product .productbox .productbox-inner,
.carousel.slick-type-box .productbox .productbox-inner,
.carousel.slick-type-half .productbox .productbox-inner {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.carousel.slick-type-product .productbox .product-box,
.carousel.slick-type-box .productbox .product-box,
.carousel.slick-type-half .productbox .product-box {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.carousel.slick-type-product .productbox .item-slider-price,
.carousel.slick-type-box .productbox .item-slider-price,
.carousel.slick-type-half .productbox .item-slider-price {
  margin-top: auto; padding-top: 8px;
}
.slick-arrow { background: var(--bb-ink); border-radius: 50%; }
.slick-arrow:hover, .slick-arrow:focus { background: var(--bb-g); }
.slick-arrow::before { color: var(--bb-bg); opacity: 1; }

/* F6 — Warenkorb Modal-Sidebar (cart_type=modal-sidebar, #cartModal) */
#cartModal .modal-content { background: var(--bb-bg); border: 0; border-radius: 0; }
#cartModal .modal-header, #cartModal .modal-footer { border-color: var(--bb-line); }
#cartModal .modal-header .modal-title {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .1em; font-size: 15px;
}
#cartModal table.dropdown-cart-items td,
#cartModal table.dropdown-cart-items th { border-color: var(--bb-line-2); }
#cartModal .cart-items-name a { font-weight: 600; text-decoration: none; }

/* F7 — Kategorien-Baum (linke PLP-Sidebar, boxes/box_categories.tpl) */
.box-categories .box-normal-link {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink);
}
.box-categories .nav-panel .nav-link { font-size: 14px; }
.box-categories .nav-panel .nav-link:hover,
.box-categories .nav-panel .nav-link.active { color: var(--bb-g); }

/* F8 — Unterkategorie-Karten (productlist/header.tpl .sub-categories) */
.subcategories-image { border-radius: var(--bb-radius-sm); }

/* F9 — Kachel: Flex-Kette durchreichen (margin-top:auto der Preiszeile
   wirkt sonst nicht) + Lieferzeit-Zeile einordnen */
.productbox-column .productbox-inner > .row { flex: 1 1 auto; }
.productbox-column .productbox-inner > .row > [class*="col"] {
  display: flex; flex-direction: column; min-width: 0;
}
.productbox-column form.form-basket, .productbox-column .product-box {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
.productbox .item-delivery-status {
  font-family: var(--bb-font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-muted); margin-top: 6px;
}

/* F11 — Consent-Banner: Hierarchie (nur „Alle akzeptieren" gefüllt) */
.consent-btn {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .05em; border-radius: 999px;
}
#consent-banner-btn-all {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
}
#consent-banner-btn-all:hover { background: var(--bb-g); border-color: var(--bb-g); color: #fff; }

/* F12 — Breadcrumb (Owner 2026-07-21: Space Mono + uppercase + .06em zog die
   Zeile unnoetig in die Breite. Jetzt Grotesk mit engem Tracking; die Hierarchie
   traegt stattdessen der groessere Abstand zwischen den Ebenen.) */
#breadcrumb .breadcrumb-item, #breadcrumb .breadcrumb-item a {
  font-family: var(--bb-font-body); font-size: 12.5px; letter-spacing: 0;
  text-transform: none; text-decoration: none; font-weight: 500;
}
/* Ebenen-Rhythmus: Luft um den Chevron statt Luft zwischen den Buchstaben */
#breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 13px; }
#breadcrumb .breadcrumb-item::before { padding-right: 13px; opacity: .42; }
/* Aktuelle Seite ruhiger als die anklickbaren Ebenen */
#breadcrumb .breadcrumb-item:last-child { color: var(--bb-muted-text); font-weight: 400; }
@media (max-width: 767.98px) {
  #breadcrumb .breadcrumb-item, #breadcrumb .breadcrumb-item a { font-size: 12px; }
  #breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 9px; }
  #breadcrumb .breadcrumb-item::before { padding-right: 9px; }
}

/* F13 — Tabs (PDP Beschreibung/Bewertungen) */
.nav-tabs .nav-link {
  font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .06em; color: var(--bb-ink-2);
}
.nav-tabs .nav-link.active { color: var(--bb-ink); border-bottom: 3px solid var(--bb-g); }

/* F14 — USP mobil einspaltig */
@media (max-width: 480px) { .bb-usp .bb-wrap { grid-template-columns: 1fr; } }

/* ---------- PLP: Filter + Toolbar (verifizierte Anker, THEME-MAP §4) ---------- */
.productlist-filter-list .filter-label,
.box-filter-characteristics .box-title, .box[class*="box-filter"] .box-title {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bb-ink);
}
.snippets-filter-list-item, .btn-filter-box {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; border: 1.5px solid var(--bb-line); border-radius: 999px;
}
.snippets-filter-list-item:hover, .btn-filter-box:hover { border-color: var(--bb-ink); }
.pagination .page-link { font-family: var(--bb-font-mono); border-radius: 999px; margin-inline: 3px; border-color: var(--bb-line); color: var(--bb-ink); }
.pagination .page-item.active .page-link { background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg); }

/* ---------- PDP: Kaufbox + Preis (verifizierte Anker) ---------- */
.price_wrapper .price { font-family: var(--bb-font-mono); font-weight: 700; }
.price_wrapper .price_label { font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-muted); }
.product-buy #add-to-cart, .product-buy .btn-primary {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
  border-radius: 999px; font-family: var(--bb-font-mono); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.product-buy #add-to-cart:hover, .product-buy .btn-primary:hover { background: var(--bb-g); border-color: var(--bb-g); color: #fff; }
#quantity-grp.form-counter .btn, #quantity-grp.form-counter .form-control,
#quantity-grp.form-counter .input-group-text { background: var(--bb-bg-2); border-color: transparent; font-family: var(--bb-font-mono); }
#quantity-grp.form-counter { border: 1.5px solid var(--bb-line); border-radius: 999px; overflow: hidden; }

/* =====================================================================
   2c: Ideen-Runde (Codex-Sparring 2026-07-14) — A11y/Kontrast + Mobile
   ===================================================================== */

/* I4 — AA-Kontrast: kleiner Text auf muted-text; kleine farbige Flächen
   (Ribbons, Hover-Zustände mit weißem Text) auf Action-Varianten.
   Große Deko-Flächen (bb-mark, USP-Ringe, Streifen) bleiben Original. */
.bb-kicker { color: var(--bb-muted-text); }
.productbox .manufacturer { color: var(--bb-muted-text); }
.bb-cat small { color: var(--bb-muted-text); }
.bb-hero__facts .l, .bb-usp__item span { color: var(--bb-muted-text); }
.ribbon-3, .ribbon-8 { background: var(--bb-g-action); color: #fff; }
.ribbon-2, .ribbon-10 { background: var(--bb-r-action); color: #fff; }
.productbox .ribbon::before { display: none; } /* Fahnen-Ecke passt nicht zur Pill */
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active { background: var(--bb-g-action); border-color: var(--bb-g-action); }
.bb-btn--ink:hover { background: var(--bb-g-action); }
.productbox .bb-card__add.basket-details-add-to-cart:hover { background: var(--bb-g-action); }
.slick-arrow:hover, .slick-arrow:focus { background: var(--bb-g-action); }

/* I8 — Fokus sichtbar (Tokens setzen box-shadow:none) + Touchziele >= 44px */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bb-ink); outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--bb-y) !important;
}
.productbox .wishlist.badge { width: 44px; height: 44px; }
.productbox .bb-card__add.basket-details-add-to-cart { width: 44px; height: 44px; }
.slick-arrow { min-width: 44px; min-height: 44px; }

/* I6 — Mobile: schneller zum ersten Produkt (kompaktere Sektionen) */
@media (max-width: 600px) {
  .bb-section { padding-block: 40px; }
  .bb-cat__media { aspect-ratio: 4 / 3; }
  .bb-cat__meta { padding: 10px 12px; }
  .bb-hero__facts { display: none; }
}

/* =====================================================================
   2d: Owner-Entscheid I3 — Kachel-Kaufzeile: Mengen-Stepper + Icon-Add
   ===================================================================== */
.bb-card__pricerow { flex-wrap: wrap; row-gap: 8px; }
.bb-card__buy { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.productbox .bb-card__qty.form-counter {
  width: auto; flex-wrap: nowrap; align-items: stretch;
  border: 1.5px solid var(--bb-line); border-radius: 999px;
  background: var(--bb-bg-2); overflow: hidden; height: 40px;
}
.productbox .bb-card__qty .btn,
.productbox .bb-card__qty .btn-secondary,
.productbox .bb-card__qty .btn-secondary:hover,
.productbox .bb-card__qty .btn-secondary:focus {
  border: 0; background: none; color: var(--bb-ink);
  width: 30px; height: 100%; padding: 0;
  display: grid; place-items: center; font-size: 11px; box-shadow: none;
}
.productbox .bb-card__qty input.quantity {
  flex: 0 0 32px; width: 32px; height: 100%; border: 0; background: none;
  text-align: center; font-family: var(--bb-font-mono); font-weight: 700;
  font-size: 13px; padding: 0; appearance: textfield; -moz-appearance: textfield;
}
.productbox .bb-card__qty input.quantity::-webkit-outer-spin-button,
.productbox .bb-card__qty input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bb-cart-ico { width: 21px; height: 21px; transform: rotate(-6deg); transition: transform .18s ease; }
.productbox .bb-card__add:hover .bb-cart-ico { transform: rotate(0deg) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .bb-cart-ico { transition: none; } }

/* =====================================================================
   Cutover-Übergang (Roast-B1-Brücke)
   ===================================================================== */
/* Kontaktleiste auf der Home ausblenden — bewusste Design-Entscheidung
   (wie Alt-Design/Dummy; auf Unterseiten bleibt sie sichtbar). */
body[data-page="18"] > .contact-bar-wrapper { display: none !important; }

/* =====================================================================
   2e: Live-QA-Hotfixes (Cutover-Abend 2026-07-14)
   ===================================================================== */
/* Slick-Pfeile: Vendor setzt background:transparent mit höherer Spezifität
   (_carousel.scss:345) — hier mit gleicher Tiefe + späterer Ladung gewinnen */
.carousel .slick-arrow, .slick-slider-other .slick-arrow { background: var(--bb-ink); }
.carousel .slick-arrow:hover, .slick-slider-other .slick-arrow:hover { background: var(--bb-g-action); }
.carousel .slick-prev::before, .carousel .slick-next::before,
.slick-slider-other .slick-prev::before, .slick-slider-other .slick-next::before {
  color: var(--bb-bg); opacity: 1;
}
/* Warenkorb-/Modal-Stepper: nicht umbrechen, kompakt */
.basket .form-counter, #cartModal .form-counter {
  display: inline-flex; flex-wrap: nowrap; width: auto; max-width: 140px;
}
.basket .form-counter .btn, #cartModal .form-counter .btn { width: 34px; padding: 0; }
.basket .form-counter input.quantity, #cartModal .form-counter input.quantity {
  flex: 0 0 44px; width: 44px; text-align: center;
}

/* (TEMP-OPC-BRIDGE entfernt 2026-07-15 — OPC-Rebuild kPage=8 ist publiziert.)
   OPC-Sektionsköpfe liegen im boxed FlexContainer → dessen .container
   liefert Breite/Padding, bb-opc-head nicht doppelt einrücken: */
.opc-Container .bb-opc-head { max-width: none; padding-inline: 0; }

/* =====================================================================
   3: Kategorieseiten (PLP) — Rasta-Ausbau (2026-07-15)
   Flächen: PLP-Kopf, Subkategorie-Carousel (productlist/header.tpl,
   Setting subcategories_type=slider → .content-cats-small.slick-type-
   category, Slides = .sub-categories via rows:0), Sidebar-Boxen
   (#sidepanel_left, box_categories + box_filter_*), Ratgeber-Sektion
   (.bb-catdesc aus Sweet/productlist/footer.tpl, category_desc=B).
   Vendor-Fakten: .slick-track=flex (Eq-Height), .slick-slide bekommt
   padding 0 15px als Gutter (_carousel.scss:168) — Karte deshalb als
   Inset-::before, nicht als Border am Slide selbst.
   ===================================================================== */

/* --- 3.1 PLP-Kopf: H1 im Display-Schnitt + Rasta-Stripe ---
   DOM-Anker ist #result-wrapper (der productlist-header-Smarty-Block
   erzeugt KEINE eigene Wrapper-Klasse — live verifiziert). */
#result-wrapper .title { margin: 4px 0 18px; }
#result-wrapper .title h1 {
  font-family: var(--bb-font-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.05; margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
}
#result-wrapper .title h1::before {
  content: ""; display: block; width: 26px; height: 5px; border-radius: 2px;
  background: var(--bb-stripe); margin-bottom: 10px;
}
/* Top-Beschreibung (Fallback T / Merkmalwert-Seiten): ruhiger Lead */
#result-wrapper .desc { color: var(--bb-ink-2); line-height: 1.6; max-width: 75ch; margin-bottom: 24px; }
img.productlist-header-description-image { border-radius: var(--bb-radius); margin-bottom: 16px; }

/* --- 3.2 Subkategorie-Karten (Carousel + rows-Fallback) ---
   Kompakt (Owner: ~50% kleiner, mehr sichtbar). Slidezahl steuert die JS in
   Sweet/layout/header.tpl; hier die visuelle Verdichtung der einzelnen Kachel. */
.content-cats-small { margin-bottom: 20px; }
.content-cats-small .sub-categories { position: relative; padding: 5px 5px; }
.content-cats-small .sub-categories::before {
  content: ""; position: absolute; inset: 2px 3px; z-index: 0;
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.content-cats-small .sub-categories > * { position: relative; z-index: 1; }
.content-cats-small .sub-categories:hover { transform: translateY(-3px); }
.content-cats-small .sub-categories { transition: transform .2s ease; }
.content-cats-small .sub-categories:hover::before { border-color: var(--bb-g); box-shadow: var(--bb-shadow); }
@media (prefers-reduced-motion: reduce) { .content-cats-small .sub-categories { transition: none; } }
.content-cats-small .subcategories-image {
  border-radius: var(--bb-radius-sm); overflow: hidden; margin-bottom: 5px;
  aspect-ratio: 1 / 1;
  background: transparent; /* Owner 1.1: graue Kachel weg -> Logo schwebt transparent */
}
.content-cats-small .subcategories-image picture,
.content-cats-small .subcategories-image .inner { display: flex; width: 100%; height: 100%; }
.content-cats-small .subcategories-image img {
  width: 100%; height: 100%; object-fit: contain; padding: 4%;
}
.content-cats-small .caption { margin-bottom: 2px; }
.content-cats-small .caption a {
  color: inherit; text-decoration: none;
  font-size: 10px; font-weight: 700; line-height: 1.15;
  /* A11Y-2026-09-07 (b) — vorher `display: block`. — target-size: Link war 10 px × 1.15 = 11,5 px hoch (Grinder-PLP
     Desktop 1350, Tiefcheck 06.09.). 24 px = WCAG-2.2-Minimum; flex-zentriert, damit der
     Text in der Kachel an derselben Stelle bleibt (Kachel selbst waechst um ~12 px). */
  display: flex; align-items: center; justify-content: center; min-height: 24px;
}
.content-cats-small .sub-categories:hover .caption a { color: var(--bb-g-action); }
.content-cats-small .item_desc { font-size: 12.5px; color: var(--bb-muted-text); margin-bottom: 6px; }
/* Level-2-Linkliste: als Mono-Detail, im Carousel ausgeblendet (Links
   stehen weiter in FlexNav + Sidebar-Baum; DOM bleibt crawlbar) */
.content-cats-small .caption-wrapper hr { border-color: var(--bb-line-2); margin: 10px 0 8px; }
.content-cats-small .caption-wrapper ul { padding-left: 0; list-style: none; margin-bottom: 0; }
.content-cats-small .caption-wrapper ul a { color: var(--bb-ink-2); text-decoration: none; font-size: 13px; line-height: 1.7; }
.content-cats-small .caption-wrapper ul a:hover { color: var(--bb-g-action); }
/* !important nötig: hr/ul/desc tragen d-md-block (display:block !important) */
.content-cats-small.slick-type-category .caption-wrapper hr,
.content-cats-small.slick-type-category .caption-wrapper ul,
.content-cats-small.slick-type-category .item_desc { display: none !important; }
/* Carousel: Luft für Hover-Schatten, Pfeile im Rasta-Look erben global */
.content-cats-small.slick-type-category .slick-list { padding-block: 6px; }
.content-cats-small.slick-type-category .sub-categories { height: auto; }
/* Owner 1.5: unterbefülltes Carousel zentrieren. Slick rechnet die Track-Breite
   aus slideWidth×count; ist der Track schmaler als .slick-list, zentrieren die
   Auto-Margins ihn (sonst 0). Slicks translate3d bleibt unangetastet. */
.content-cats-small.slick-type-category .slick-track { margin-inline: auto; }
/* Owner: Abstand zwischen den Kategoriesymbolen = 15% der Kachelbreite. Symbol auf
   85% + zentriert -> je 7.5% Luft pro Seite -> Gap = 15% der Kachel/Slide-Breite,
   responsiv ueber alle Breakpoints. */
.content-cats-small.slick-type-category .subcategories-image { width: 85%; margin-inline: auto; }
/* Anti-FOUC (Reveal-Gating) — Messung: das Carousel durchläuft beim Laden mehrere
   sichtbare Zustände (Pre-Init-Sprawl große Kacheln -> Slick-Init -> bbCatArrows-
   Reconfig auf kleine Kacheln). Das war der „Reload". Fix: das Carousel AB DEM
   ERSTEN PAINT verbergen (nicht erst ab .slick-initialized — die Basis-Regel
   .carousel:not(.slick-initialized).slick-smooth-loading greift zu spät/async) und
   die Höhe reservieren; erst wenn die FINALE Config sitzt (.bb-cat-ready per JS)
   EINMAL sanft einblenden. bb-rasta.css ist render-blocking -> gilt vor First Paint.
   Fail-open: header.tpl setzt .bb-cat-ready auch per Timeout; <noscript> zeigt es bei
   deaktiviertem JS. Bilder bleiben lazy (Codex: kein LCP/Bandbreiten-Regress). */
/* D65-F4 (2026-08-16): `max-height` war hier der Fehler — eine Kappe ist keine
   Reservierung. Gemessen auf der mobilen PLP lief der Container durch
   200 → 145 → 200 → 175 px: die Kappe regiert, solange der Inhalt hoeher ist
   (200); sobald Slick die Slide-Breiten setzt, faellt der Inhalt DARUNTER und
   der Kasten folgt ihm (145); Track und Clones heben ihn wieder darueber (200);
   beim Reveal faellt die Kappe ganz (175). Drei Spruenge, die alles unterhalb
   mitnehmen — CLS 0,0418 mobil / 0,0095 Desktop, lastabhaengig, weil die
   mittleren beiden bei schneller Maschine in einem Frame verrechnet werden.
   Eine FESTE Hoehe kann keiner dieser Zustaende unterschreiten oder ueberschreiten;
   der Kasten steht vom ersten Paint bis zum Reveal still.
   ⚠ Die Zahlen sind gemessen, nicht gewaehlt (`outputs/d65-f4-plp-slider-2026-08-16/`):
   die Kachel ist quadratisch (Bild), ihre Breite = Slider-Breite / slidesToShow,
   und `respondTo:'slider'` (jtl.evo.js:352) laesst die Endhoehe deshalb ueber die
   Viewportleiter OSZILLIEREN (768:172 · 900:153 · 992:176 — dort erscheint die
   Sidebar und verschmaelert den Slider — · 1200:159 · 1440:168). Exakt geht also
   nicht; 152/168 sind die Modalwerte der Stichprobe (16 Kategorien je Profil,
   mobil 129/140/152, Desktop 169 in 14 von 16). Rest ist EIN Sprung von
   hoechstens ~24 px statt kumuliert ~140 px.
   ⚠ NICHT `min-height` und nicht zusaetzlich nach dem Reveal festhalten: das
   waere eine Designaenderung (kuerzere Namen bekaemen Weissraum). Waehrend des
   Gatings ist die Flaeche unsichtbar, nach dem Reveal gilt wieder die echte
   Inhaltshoehe — diese Regel aendert am fertigen Bild nichts. */
.content-cats-small.slick-type-category:not(.bb-cat-ready) {
  opacity: 0; visibility: hidden; pointer-events: none;
  height: 152px; overflow: hidden;
  transition: none !important;
}
@media (min-width: 768px) {
  .content-cats-small.slick-type-category:not(.bb-cat-ready) { height: 168px; }
}
/* Reveal = sofortiges Erscheinen in finaler Form. transition:none !important MUSS,
   weil das Basis-Theme eine 0.2s-opacity-Transition auf .carousel/.slick-* legt —
   die friert in gedrosselten/Hintergrund-Tabs ein und ließe das Carousel dann auf
   opacity 0 hängen (unsichtbar). Ohne Transition greift opacity:1 deterministisch. */
.content-cats-small.slick-type-category.bb-cat-ready {
  opacity: 1; visibility: visible; pointer-events: auto;
  max-height: none; overflow: visible;
  transition: none !important;
}
@media (max-width: 600px) {
  .content-cats-small .sub-categories { padding: 6px 6px; }
  .content-cats-small .sub-categories::before { inset: 2px 3px; }
}

/* --- 3.3 Sidebar (seitliches Menü): Boxen als Rasta-Karten --- */
#sidepanel_left .box {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); padding: 16px 16px 12px; margin-bottom: 16px;
}
#sidepanel_left .box hr.box-filter-hr { display: none; }
#sidepanel_left .box .box-normal-link,
#sidepanel_left .box .btn-filter-box { color: var(--bb-ink); text-decoration: none; }
.box-categories .box-normal-link::before {
  content: ""; display: block; width: 26px; height: 5px; border-radius: 2px;
  background: var(--bb-stripe); margin-bottom: 8px;
}
.box-categories .nav-panel { margin-top: 0; } /* 8px→0: Baum 0.5rem nach oben (3.3b) */
.box-categories .nav-panel .nav-link {
  padding: 6px 0; color: var(--bb-ink-2); font-size: 14px; border-radius: 0;
}
.box-categories .nav-panel .nav-link a { color: inherit; text-decoration: none; }
.box-categories .nav-panel .nav-link:hover,
.box-categories .nav-panel .nav-link:hover a { color: var(--bb-g-action); }
.box-categories .nav-panel .nav-item.active > .nav-link,
.box-categories .nav-panel .nav-item.active > .nav-link a,
.box-categories .nav-panel .nav-link.active { color: var(--bb-g-action); font-weight: 700; }
/* Unterebenen: eingerückt an feiner Linie */
.box-categories .nav-panel .snippets-categories-collapse .nav {
  border-left: 2px solid var(--bb-line-2); margin-left: 2px; padding-left: 12px;
}
.box-categories .nav-panel .snippets-categories-nav-link-child { font-size: 13.5px; }
.box-categories .nav-panel .dropdown-toggle::after { color: var(--bb-muted); }

/* --- 3.3b Sidebar-Kategoriesymbole (WAWI-Kategoriebilder,
       Markup: Sweet/snippets/categories_recursive.tpl) --- */
.box-categories .nav-panel .nav-link { display: flex; align-items: center; }
.box-categories .nav-panel .bb-cat-entry {
  display: flex; align-items: center; gap: 9px;
  flex: 1 1 auto; min-width: 0;
}
.box-categories .nav-panel .bb-cat-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.box-categories .nav-panel .bb-cat-icon {
  width: 24px; height: 24px; flex: 0 0 auto;
  display: block; object-fit: contain;
}
.box-categories .nav-panel .bb-cat-icon--fallback {
  border: 1.5px solid var(--bb-line-2); border-radius: 50%;
  background: var(--bb-surface);
}
/* Oberkategorien: Symbole +25 % (24 -> 30px), Schrift +25 % zur Sub-Ebene
   (13.5 -> 17px); Baum sitzt 0.5rem höher via .nav-panel-Margin (siehe 3.3) */
.box-categories .nav-panel .nav-link.bb-cat-top { font-size: 17px; }
.box-categories .nav-panel .bb-cat-top .bb-cat-icon { width: 30px; height: 30px; }
.box-categories .nav-panel .dropdown-toggle::after { margin-left: auto; flex: 0 0 auto; }
/* Hover-Lift nur auf Oberkategorien, nur auf echten Hover-Geräten */
@media (hover: hover) and (pointer: fine) {
  .box-categories .nav-panel .bb-cat-top .bb-cat-icon { transition: transform .18s ease; }
  .box-categories .nav-panel .bb-cat-top:hover .bb-cat-icon { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .box-categories .nav-panel .bb-cat-top .bb-cat-icon { transition: none; }
  .box-categories .nav-panel .bb-cat-top:hover .bb-cat-icon { transform: none; }
}

/* --- 3.4 Ratgeber-Sektion (.bb-catdesc, Markup: Sweet/productlist/footer.tpl) --- */
.bb-catdesc {
  margin: clamp(40px, 6vw, 64px) 0 12px;
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-lg); overflow: hidden;
}
.bb-catdesc::before { content: ""; display: block; height: 6px; background: var(--bb-stripe); }
.bb-catdesc__head { padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px) 0; }
.bb-catdesc__head h2 { font-size: clamp(24px, 3vw, 38px); margin: 10px 0 0; }
.bb-catdesc__body {
  padding: 14px clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px);
  color: var(--bb-ink-2); line-height: 1.65; font-size: 15px;
}
@media (min-width: 992px) {
  .bb-catdesc__body {
    column-count: 2; column-gap: clamp(36px, 4vw, 64px);
    column-rule: 1px solid var(--bb-line-2);
  }
}
.bb-catdesc__body > :first-child { margin-top: 0; }
.bb-catdesc__body > p:first-child { font-size: 16.5px; color: var(--bb-ink); }
.bb-catdesc__body h2, .bb-catdesc__body h3, .bb-catdesc__body h4 {
  font-size: 17px; font-weight: 800; margin: 1.3em 0 .5em;
  break-after: avoid; break-inside: avoid;
}
.bb-catdesc__body a { color: var(--bb-g-action); text-decoration: underline; text-underline-offset: 2px; }
.bb-catdesc__body a:hover { color: var(--bb-ink); }
.bb-catdesc__body img { max-width: 100%; height: auto; border-radius: var(--bb-radius-sm); }
.bb-catdesc__body ul, .bb-catdesc__body ol { padding-left: 1.2em; }
.bb-catdesc__body li { break-inside: avoid; }

/* --- 3.5 Politur v2: H1-Chip „inkl. Unterkategorien" (Unterbaum aktiv) --- */
.bb-cat-chip {
  display: inline-block; vertical-align: middle; margin-left: 12px;
  font-family: var(--bb-font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--bb-ink); background: color-mix(in oklab, var(--bb-g) 18%, #fff);
  border: 1.5px solid var(--bb-g); border-radius: 999px; padding: 4px 11px;
  transform: translateY(-4px);
}
@media (max-width: 600px) { .bb-cat-chip { display: block; margin: 8px 0 0; transform: none; } }

/* --- 3.6 Politur v2: Subkategorie-Bild-Fallback --- */
/* Erstes Artikelbild des Astes: identische Passform wie eigene Subkat-Bilder */
.content-cats-small .subcategories-image .bb-subcat-fallimg {
  width: 100%; height: 100%; object-fit: contain; padding: 7%; display: block;
}
/* Letzter Fallback: gebrandete Rasta-Kachel mit Initiale */
.content-cats-small .subcategories-image .bb-subcat-ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--bb-font-disp); font-size: clamp(38px, 8vw, 64px); line-height: 1;
  color: var(--bb-ink-2); text-transform: uppercase; /* Owner 1.1: nicht farbig -> Initiale dunkel */
  background: transparent;
}

/* =====================================================================
   4: PLP-/Kachel-Feinschliff (Owner-Auftrag 2026-07-16)
   Anker live verifiziert (Playwright /Grinder, Desktop+Mobile):
   #product-list .product-wrapper=col-lg-3 · .productbox-images.list-gallery
   (.first-/.second-wrapper) · .ribbon-7=Ausverkauft · .item-delivery-status ·
   .content-cats-small .sub-categories(::before=Außenkarte) · .productlist-page-nav
   (Toolbar). Vendor-Bildswap (_productlist.scss): .list-gallery:hover →
   img.first opacity0 / img.second opacity1 (gestapelt).
   Rollback: diesen Block löschen + Cache-Buster zurück.
   ===================================================================== */

/* --- 4.1 (P1) Produktkacheln exakt gleich hoch ---
   Bootstrap-Spalte streckt bereits (align-items:stretch), aber die Box füllte
   sie nicht und der Titel war mal 1-, mal 2-zeilig. Box auf volle Spaltenhöhe,
   Titel reserviert 2 Zeilen → Preiszeile (margin-top:auto) fluchtet bündig. */
#product-list > .product-wrapper { display: flex; flex-direction: column; }
#product-list > .product-wrapper > .productbox.productbox-column { flex: 1 1 auto; height: auto; }
.productbox-column .productbox-title { min-height: 2.55em; }

/* --- 4.2 (P2) Lieferzeit-Zeile unter dem Artikel entfernen (nur Listing) --- */
.productbox .item-delivery-status { display: none; }

/* --- 4.3 (P6) Ausverkauft (ribbon-7): Bild farblos + Text gedämpft ---
   Dämpfung auf den gemeinsamen Bildcontainer legen, nicht auf img.first/
   img.second: Sonst überschreibt die höhere Spezifität den Hover-Swap und
   macht beide gestapelten Bilder gleichzeitig sichtbar. */
.productbox:has(.ribbon.ribbon-7) .productbox-image:not(.first-wrapper):not(.second-wrapper),
.productbox.is-not-orderable .productbox-image:not(.first-wrapper):not(.second-wrapper) {
  filter: grayscale(1); opacity: .5;
}
.productbox:has(.ribbon.ribbon-7) .productbox-title a,
.productbox:has(.ribbon.ribbon-7) .manufacturer,
.productbox:has(.ribbon.ribbon-7) .productbox-price,
.productbox.is-not-orderable .productbox-title a,
.productbox.is-not-orderable .manufacturer,
.productbox.is-not-orderable .productbox-price { opacity: .7; }
/* A11Y-2026-09-07 (c) — Kontrast (Lighthouse color-contrast, Gewicht 7): Titel/Preis stehen
   auf --bb-ink #17150e; bei opacity .55 ueber #fdfcf7 ergibt das #7e7d77 = 4,02:1 (ueber
   #fff 4,06:1) < 4,5:1. Bei .7 -> #5c5a54 = 6,71:1 (ueber #fff 6,78:1, ueber #f5f2e7
   6,44:1). BEIDE Selektorpfade (:has(.ribbon-7) und .is-not-orderable) tragen den Wert,
   sonst gewinnt der unveraenderte spezifischere Pfad. Karte bleibt sichtbar gedaempft
   (gewollte Sichtdifferenz: Ausverkauft-Text etwas kraeftiger). */

/* --- 4.3b (T-A1) Nicht kaufbar als eigener Zustand ---
   `.is-not-orderable` kommt aus `$Artikel->inWarenkorbLegbar` (Sweet-Child
   item_box.tpl) und ist damit unabhängig davon, welches Werbe-Ribbon die
   Prioritätsschleife in Artikel.php:3691 gerade gewinnt. Die ribbon-7-Regeln
   darüber bleiben absichtlich stehen: additiv, kein Regress am Ist-Zustand.
   Deckt zusätzlich die 938 Artikel ohne Preis ab, die gar kein Ribbon tragen.
   Bewusst KEIN zusätzliches Text-Badge: „Ausverkauft" (Ribbon) bzw.
   „Preis auf Anfrage" (Preiszeile) stehen bereits sichtbar auf der Kachel. */
.productbox .ribbon.ribbon-7 { background: #7a7365; color: #fff; }

/* --- 4.4 (P8) Mouseover zeigt Zweitbild statt Weiß ---
   Bisher: .second-wrapper hart display:none + img position:static → Vendor-Hover
   blendet img.first auf 0, das Zweitbild fehlt → Weiß. Jetzt: beide Wrapper im
   selben Kasten stapeln, Zweitbild sichtbar, Fade zulassen. Einzelbild-Artikel
   tragen KEIN .first (Markup-Bedingung Bilder[1]) → kein Fade, bleiben sichtbar. */
.productbox .inner-image-wrapper > .productbox-image { position: relative; }
.productbox .productbox-image .productbox-images.list-gallery {
  position: relative; width: 100%; height: 100%;
}
.productbox .productbox-image.second-wrapper,
.productbox .productbox-image img.second { display: block !important; }
/* Beide Wrapper exakt übereinander stapeln + transparent (nicht den weißen
   Tile-Grund erben); Höhe kommt aus dem aspect-ratio-Kasten der Zelle. */
.productbox .productbox-image.first-wrapper,
.productbox .productbox-image.second-wrapper {
  position: absolute !important; inset: 0; margin: 0; width: 100%; height: 100%;
  background: transparent !important;
}
.productbox .productbox-image.second-wrapper { z-index: 1; }
.productbox .productbox-image.first-wrapper { z-index: 0; }
/* Inhalt des Zweitbild-Wrappers zwingen, den Wrapper exakt zu füllen — sonst
   rutscht .inner/picture/img ~197px nach unten aus dem overflow:hidden-Kasten
   (live diagnostiziert: Wrapper y140, aber .inner y337 → geklippt = Weiß). */
.productbox .productbox-image.second-wrapper .inner,
.productbox .productbox-image.second-wrapper picture,
.productbox .productbox-image.second-wrapper img.second {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
}
.productbox .productbox-image img.first,
.productbox .productbox-image img.second { transition: opacity .28s ease !important; }

/* PERF-5 (2026-07-28): AA-Kontrast und sichere Hersteller-Klickfläche.
   Der scoped Farbwechsel vermeidet globale Token-/Theme-Nebenwirkungen. */
.bb-usp__item > div > span,
.bb-cat__idx { color: var(--bb-ink-2); }
.productbox .manufacturer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.productbox .price-note .value,
.productbox .price_label { color: var(--bb-ink-2) !important; }

/* --- 4.5 (P4) Kategoriename unter dem Symbol zentrieren --- */
.content-cats-small .caption { text-align: center; }

/* --- 4.6 (P5) Äußere Kachel (zweite Umrandung) entfernen — nur Bild-Kachel bleibt --- */
.content-cats-small .sub-categories::before { display: none; }
.content-cats-small .sub-categories { padding: 0; }
.content-cats-small .sub-categories:hover { transform: translateY(-2px); }
.content-cats-small .sub-categories:hover .subcategories-image { box-shadow: var(--bb-shadow); }

/* --- 4.7 (P7) Toolbar über/unter dem Listing als EINE Rasta-Leiste ---
   Markup (verifiziert): .productlist-page-nav (Bootstrap-Row) → .displayoptions
   (Filter/Sortierung/Anzahl/Layout) · .productlist-item-info (Trefferzahl) ·
   .productlist-pagination (Seiten-Dropdown, inline gerendert). HR-Trenner raus,
   Bar als gerahmte Karte, Trefferzahl rechtsbündig in Mono. */
hr.productlist-page-nav-top, hr.productlist-page-nav-bottom { display: none; }
.productlist-page-nav {
  align-items: center; gap: 10px 14px;
  padding: 11px 16px; margin: 0 0 20px;
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius);
}
.productlist-page-nav.productlist-page-nav:last-of-type { margin: 24px 0 0; }
.productlist-page-nav .displayoptions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.productlist-page-nav .productlist-item-info {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-muted-text);
  margin-left: auto; border: 0 !important; padding-block: 0 !important; white-space: nowrap;
}
.productlist-page-nav .productlist-pagination { flex: 0 0 auto; }
.productlist-page-nav .btn, .productlist-page-nav .dropdown-toggle { border-radius: 999px; }
.navbar-pagination .pagination { margin: 0; flex-wrap: wrap; }

/* --- 4.8 (Owner Runde 2) Kopfzeile: H1 LINKS + Top-Toolbar (Sortierung/Anzahl/
   Pagination) RECHTS auf EINER Zeile; Carousel steht darunter. Struktur baut
   Sweet/layout/header.tpl (.bb-plp-headrow). Toolbar auf 65% (Owner: −35%) via
   zoom = echter Footprint, passt so rechtsbündig in die Zeile. --- */
.bb-plp-headrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: nowrap; margin-bottom: 16px;
}
.bb-plp-headrow > .title { margin: 0; flex: 0 0 auto; }
.bb-plp-headrow > .productlist-page-nav {
  margin: 0 !important; flex: 0 1 auto; min-width: 0; zoom: .65;
}
@media (max-width: 991.98px) {
  .bb-plp-headrow { display: block; }              /* mobil wieder gestapelt */
  .bb-plp-headrow > .productlist-page-nav { zoom: 1; margin: 0 0 20px !important; }
}

/* =====================================================================
   5: PLP-Kategorienleiste ein-/ausklappen + Spalten-Reflow (Owner-Auftrag P3, 2026-07-16)
   Standard = 3 Produktspalten (Sidebar sichtbar); eingeklappt = 4 Spalten +
   Content auf voller Breite. Zustand: html.bb-plp-collapsed (localStorage
   'bb-plp-cat', früh im <head> gesetzt → kein Flash). Toggle-Button per JS in die
   Toolbar injiziert (Sweet/layout/header.tpl). Nur Desktop (lg+); mobil bleibt 2-up.
   Anker live verifiziert: #sidepanel_left(col-lg-3) · .main(col-lg-9) ·
   .row.justify-content-lg-end · #product-list > .product-wrapper(col-lg-3).
   Rollback: diesen Block + das PLP-Toggle-<script> in header.tpl entfernen.
   ===================================================================== */
.bb-cat-toggle { display: none; } /* mobil/Default aus — nur Desktop unten an */

@media (min-width: 992px) {
  /* Weiche Übergänge (Sidebar zu / Content auf / Kacheln 3↔4) */
  #sidepanel_left { transition: max-width .35s ease, flex-basis .35s ease, opacity .25s ease, padding .35s ease; }
  .row.justify-content-lg-end > .main { transition: max-width .35s ease, flex-basis .35s ease, padding .35s ease; }
  #product-list > .product-wrapper { transition: max-width .3s ease, flex-basis .3s ease; }

  /* Standard: 3 statt 4 Spalten (Sidebar sichtbar) */
  #product-list > .product-wrapper { flex: 0 0 33.333%; max-width: 33.333%; }

  /* Eingeklappt: Sidebar auf 0, Content voll, 4 Spalten */
  .bb-plp-collapsed #sidepanel_left {
    flex: 0 0 0 !important; max-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    opacity: 0; overflow: hidden; pointer-events: none;
  }
  .bb-plp-collapsed .row.justify-content-lg-end > .main {
    flex: 0 0 100% !important; max-width: 100% !important;
    /* Eingeklappt sitzt der Reiter an der Content-Linkskante (left:0). Hier links
       Platz reservieren, sonst rutschen H1/Carousel/breite Elemente unter den
       Reiter (Positionskonflikt). */
    padding-left: 54px !important;
  }
  .bb-plp-collapsed #product-list > .product-wrapper {
    flex: 0 0 25%; max-width: 25%;
  }

  /* Toggle-Button (Owner Runde 3, Codex-verifiziert): vertikaler Karteireiter GENAU
     an der rechten Aussenkante der Kategorienmenü-Box. Verankert an der ROW
     (.bb-plp-row, kollabiert NICHT); left = Box-Rechtkante (Einzug 12px + fixe
     Box-Breite 260px = 272px), ragt in den 48px-Gutter. Saubere Stacking-Ebenen
     (isolation:isolate; Sidebar z1, Reiter z2) → nie hinter dem Menü. Eingeklappt:
     left:0 (Content-Linkskante). writing-mode + rotate(180) = Leserichtung u→o. */
  /* ⚠ `isolation: isolate` steht hier NICHT mehr allein: Kapitel 13b nimmt es
     zurueck, solange der Filter-Drawer offen ist. Die private Ebene sperrte
     sonst den Drawer ein (N28). Wer hier etwas aendert, misst 13b mit. */
  .bb-plp-row { position: relative; overflow: visible; isolation: isolate; --bb-menu-edge: calc(12px + 260px); }
  .bb-plp-row > #sidepanel_left { position: relative; z-index: 1; }
  .bb-cat-toggle {
    position: absolute; z-index: 2; top: 12px; left: var(--bb-menu-edge);
    display: inline-flex; align-items: center; gap: 7px;
    writing-mode: vertical-rl; transform: rotate(180deg);
    padding: 12px 8px; margin: 0;
    /* Hintergrund-Orientierung: der Button traegt transform:rotate(180deg) (fuer die
       Leserichtung) -> border-radius/border werden visuell GESPIEGELT. Daher hier
       links runden + border-right:0 -> NACH der Rotation: rechts/aussen gerundet,
       box-Seite (links) flush/randlos -> Reiter „klebt" sauber an der Box. */
    border: 1.5px solid var(--bb-line); border-right: 0; border-radius: 9px 0 0 9px;
    background: var(--bb-surface); color: var(--bb-ink); cursor: pointer;
    box-shadow: -4px 6px 16px -12px rgba(23, 21, 14, .5);
    font-family: var(--bb-font-mono); font-size: 10px; font-weight: 700; line-height: 1;
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .bb-plp-collapsed .bb-cat-toggle { left: 0; }
  .bb-cat-toggle:hover { color: var(--bb-g-action); border-color: var(--bb-ink); }
  .bb-cat-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--bb-g) 35%, transparent); outline-offset: 2px; }
  .bb-cat-toggle__ico { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s ease; }
  .bb-plp-collapsed .bb-cat-toggle__ico { transform: scaleX(-1); }
}

/* =====================================================================
   6: Adaptive Desktop-Shell (Owner-Auftrag 2026-07-16)
   Profil: 1440 px halten bis 1800 px Viewport, danach 80 vw, absolute
   Obergrenze 2400 px. Unter 1440 px bleibt der kompilierte Sweet-Stand
   unverändert. Nur verifizierte AUSSENCONTAINER werden adressiert — keine
   pauschale .container-Regel, damit Modals, Formulare und OPC-Innencontainer
   nicht versehentlich aufgezogen werden.
   Aktivierung: html[data-bb-layout="wide-1440-80-2400"] aus header.tpl.
   ===================================================================== */

@media (min-width: 1440px) {
  html[data-bb-layout="wide-1440-80-2400"] {
    --bb-layout-shell: min(2400px, max(1440px, 80vw));
    --bb-layout-safe: 1440px;
  }

  html[data-bb-layout="wide-1440-80-2400"] :is(
    #header-top-bar > .container,
    #header-top-bar > .container-fluid-xl,
    #jtl-nav-wrapper > .hide-navbar.container,
    #jtl-nav-wrapper > .hide-navbar.container-fluid-xl,
    #jtl-nav-wrapper > .navbar-wrapper > .container,
    #jtl-nav-wrapper > .navbar-wrapper > .container-fluid-xl,
    .breadcrumb-wrapper > .container,
    .breadcrumb-wrapper > .container-fluid-xl,
    #content-wrapper.container,
    #content-wrapper.container-fluid-xl,
    #content > .container,
    #content > .container-fluid-xl,
    #result-wrapper > .container,
    #alert-list.container,
    .bb-wrap,
    .bb-opc-head,
    .contact-bar-wrapper > .container-fluid-xl,
    #footer > .container-fluid-xl,
    #copyright > .container-fluid-xl,
    .last-seen > .container-fluid-xl
  ) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: min(100%, var(--bb-layout-shell)) !important;
    margin-inline: auto !important;
  }

  /* Betreiber-/Transaktionsflächen behalten trotz breiter Außenshell eine
     ergonomische Arbeitsbreite. Warenkorbzeilen selbst dürfen die Shell nutzen. */
  html[data-bb-layout="wide-1440-80-2400"] :is(
    #account,
    #checkout,
    .register-steps,
    .account-password,
    .review-form
  ) {
    width: 100%;
    max-width: var(--bb-layout-safe);
    margin-inline: auto;
  }

  /* PLP: Filter-/Kategorienleiste bleibt 320 px statt proportional bis 600 px
     mitzuwachsen; der Ergebnisbereich nimmt den Rest der Shell ein. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] #sidepanel_left {
    flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 320px !important;
    max-width: 320px !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] .row.justify-content-lg-end > .main {
    flex-grow: 1 !important; flex-shrink: 1 !important; flex-basis: calc(100% - 320px) !important;
    max-width: calc(100% - 320px) !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] #sidepanel_left {
    flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 0 !important; max-width: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] .row.justify-content-lg-end > .main {
    flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 100% !important; max-width: 100% !important;
  }
}

@media (min-width: 1800px) {
  /* PDP: Kaufspalte wächst nur bis 640 px; Galerie nutzt den gewonnenen Raum.
     Scope auf #result-wrapper schließt Quickview-/Modal-Markup aus. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="1"] #result-wrapper #product-offer > .product-info {
    flex: 0 0 min(41.666667%, 640px) !important;
    max-width: min(41.666667%, 640px) !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="1"] #result-wrapper #product-offer > .product-gallery {
    flex: 1 1 0 !important;
    max-width: calc(100% - min(41.666667%, 640px)) !important;
  }
}

@media (min-width: 1920px) {
  /* Home: 5 statt 4 Karten. PLP: 4 mit Sidebar / 5 ohne Sidebar. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="18"] .opc-ProductStream > .product-wrapper {
    flex: 0 0 20% !important; max-width: 20% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 25% !important; max-width: 25% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 20% !important; max-width: 20% !important;
  }
}

@media (min-width: 2400px) {
  /* Shell=1920 px: 6 Home-Karten, 5/6 PLP-Karten und die sechs festen
     Kategorie-/acht Marken-Kacheln nutzen den zusätzlichen Raum ohne XXL-Karten. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="18"] .opc-ProductStream > .product-wrapper {
    flex: 0 0 16.666667% !important; max-width: 16.666667% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 20% !important; max-width: 20% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 16.666667% !important; max-width: 16.666667% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] .bb-cats__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  html[data-bb-layout="wide-1440-80-2400"] .bb-brands__wall a {
    flex: 1 1 calc(12.5% - 12px); min-width: 0;
  }
}

@media (min-width: 2700px) {
  /* Die Shell wächst zwischen 1920 und 2400 px weiter: Kartenanzahl folgt,
     damit Produktkacheln nicht erneut über ca. 320 px hinauslaufen. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="18"] .opc-ProductStream > .product-wrapper {
    flex: 0 0 14.285714% !important; max-width: 14.285714% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 16.666667% !important; max-width: 16.666667% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 14.285714% !important; max-width: 14.285714% !important;
  }
}

@media (min-width: 3000px) {
  /* Am 2400-px-Cap: 8 Home-Karten, 7/8 PLP-Karten. */
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="18"] .opc-ProductStream > .product-wrapper {
    flex: 0 0 12.5% !important; max-width: 12.5% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"] body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 14.285714% !important; max-width: 14.285714% !important;
  }
  html[data-bb-layout="wide-1440-80-2400"].bb-plp-collapsed body[data-page="2"] #product-list > .product-wrapper {
    flex: 0 0 12.5% !important; max-width: 12.5% !important;
  }
}

/* =====================================================================
   7: PDP — Produktdetailseite (Plan docs/plans/2026-07-18-pdp-redesign-plan.md)
   Vendor-Anker (live/Repo verifiziert): body[data-page="1"], #result-wrapper,
   #product-offer > .product-gallery|.product-info, .product-info-inner,
   #image_wrapper/#gallery/#gallery_preview, .product-offer, .price_wrapper,
   .product-buy/#add-to-cart/#quantity-grp, .variations, .product-actions,
   .delivery-status, .tab-navigation/.nav-tabs, .desc, .recommendations.
   Eigenes Markup: .bb-pdp__* (Sweet/productdetails/details|basket.tpl),
   .bb-buybar (JS in Sweet/layout/header.tpl). Kapitel 6 übernimmt ab 1800px.
   ===================================================================== */

/* --- 7.1 Layout: 58/42-Split ab xl + sticky Kaufspalte --- */
@media (min-width: 1200px) {
  body[data-page="1"] #result-wrapper #product-offer > .product-gallery {
    flex: 0 0 58.333333%; max-width: 58.333333%;
  }
  body[data-page="1"] #result-wrapper #product-offer > .product-info {
    flex: 0 0 41.666667%; max-width: 41.666667%;
  }
}
/* Balance-Konzept 2026-07-19 (Codex R2-B): KEIN Sticky im Offer-Grid mehr —
   bei ausgeglichenen Spalten nutzlos, dynamisches Wachstum (Variationen/
   Kurztext-Toggle) macht es riskant. Mobile Buy-Bar bleibt (7.12). */

/* Media-Stage: Hauptbild höhenbegrenzt statt content-hoch — die Galerie
   gewinnt natürliche Höhe, ohne die Kaufspalten-Höhe zu erzwingen. */
@media (min-width: 992px) {
  body[data-page="1"] #gallery .js-gallery-images { height: clamp(460px, 52vh, 620px); }
  body[data-page="1"] #gallery .js-gallery-images .inner {
    display: flex; align-items: center; justify-content: center; height: 100%;
  }
  body[data-page="1"] #gallery .js-gallery-images img {
    max-height: 100%; width: auto; object-fit: contain;
  }
}

/* --- 7.2 Galerie: Cream-Kachel + Radial-Glow, Thumbs, Zoom --- */
body[data-page="1"] #result-wrapper #image_wrapper {
  position: relative; background: var(--bb-surface);
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius-lg);
  padding: clamp(12px, 2vw, 24px);
}
body[data-page="1"] #gallery .js-gallery-images .inner {
  background: radial-gradient(62% 56% at 50% 44%, #ffffff 0%, var(--bb-surface) 82%);
  border-radius: var(--bb-radius-sm); overflow: hidden;
}
/* FOUC-Wache (Memory slick-carousel-fouc-base-transition): Basis-Theme legt
   eine 0.2s-opacity-Transition auf .carousel — in gedrosselten Tabs friert die
   Galerie sonst bei opacity 0 ein. Reveal ohne Transition = sofort sichtbar. */
#gallery.carousel, #gallery_preview.carousel { transition: none !important; }
body[data-page="1"] #gallery_preview .square-image {
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius-sm);
  overflow: hidden; background: #fff; cursor: pointer; transition: border-color .15s ease;
}
body[data-page="1"] #gallery_preview .slick-current .square-image,
body[data-page="1"] #gallery_preview .square-image:hover { border-color: var(--bb-g-action); }
/* Hover-Zoom (nur echte Pointer; Origin setzt bbPdp-JS per mousemove).
   WICHTIG: separates scale-Property statt transform — der Vendor zentriert
   das Galeriebild selbst per transform:translate(-50%,-50%). */
@media (hover: hover) and (pointer: fine) {
  body[data-page="1"] #gallery .js-gallery-images { cursor: zoom-in; }
  body[data-page="1"] #gallery .js-gallery-images img { transition: scale .25s ease; }
  body[data-page="1"] #gallery .js-gallery-images.bb-zoom-on img { scale: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="1"] #gallery .js-gallery-images img { transition: none; }
  body[data-page="1"] #gallery .js-gallery-images.bb-zoom-on img { scale: none; }
}

/* --- 7.3 Kaufspalte: Marke, Poster-H1, Rating, Kurzbeschreibung --- */
.bb-pdp__brand { margin-bottom: 2px; }
.bb-pdp__brand a, .bb-pdp__brand span {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bb-muted-text); text-decoration: none;
}
.bb-pdp__brand a:hover { color: var(--bb-g-action); }
.bb-pdp__mark {
  display: block; width: 46px; height: 6px; border-radius: 3px;
  background: var(--bb-stripe); margin: 4px 0 10px;
}
h1.bb-pdp__title {
  font-family: var(--bb-font-body, inherit); font-weight: 800;
  font-size: clamp(1.55rem, 2.4vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.01em; margin: 0 0 8px;
}
body[data-page="1"] .product-info .rating-wrapper,
body[data-page="1"] .product-info .rating-wrapper a {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .04em;
  text-decoration: none; color: var(--bb-ink-2);
}
body[data-page="1"] .product-info .shortdesc {
  font-size: 15.5px; line-height: 1.6; color: var(--bb-ink-2); max-width: 60ch;
}
/* Rasta-Hairline über dem Angebotsblock (Preis/Kaufzeile) */
body[data-page="1"] .product-info .product-offer { position: relative; padding-top: 14px; margin-top: 10px; }
body[data-page="1"] .product-info .product-offer::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 4px;
  border-radius: 2px; background: var(--bb-stripe);
}

/* --- 7.4 Preis groß (Mono), Grundpreis/MwSt ruhig --- */
body[data-page="1"] .product-offer .price_wrapper .price.large {
  font-size: clamp(1.7rem, 2.4vw, 2.25rem); letter-spacing: -.01em; line-height: 1.1;
}
body[data-page="1"] .product-offer .price-note,
body[data-page="1"] .product-offer .vat_info,
body[data-page="1"] .product-offer .base-price {
  font-size: 12.5px; color: var(--bb-muted-text);
}

/* --- 7.5 Variationen: Radio-Werte als Rasta-Chips, Selects als Pills --- */
body[data-page="1"] .variations dt,
body[data-page="1"] .variations .font-weight-bold {
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bb-ink);
}
body[data-page="1"] .variations .custom-control.custom-radio {
  display: inline-block; padding: 0; margin: 0 8px 8px 0;
}
body[data-page="1"] .variations .custom-radio .custom-control-input {
  position: absolute; opacity: 0; pointer-events: none;
}
body[data-page="1"] .variations .custom-radio .custom-control-label {
  display: inline-block; border: 1.5px solid var(--bb-line); border-radius: 999px;
  padding: 9px 16px; min-height: 40px; cursor: pointer;
  font-family: var(--bb-font-mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bb-ink); background: var(--bb-surface);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
body[data-page="1"] .variations .custom-radio .custom-control-label::before,
body[data-page="1"] .variations .custom-radio .custom-control-label::after { display: none; }
body[data-page="1"] .variations .custom-radio .custom-control-label:hover { border-color: var(--bb-ink); }
body[data-page="1"] .variations .custom-radio .custom-control-input:checked ~ .custom-control-label {
  background: var(--bb-ink); border-color: var(--bb-ink); color: var(--bb-bg);
}
body[data-page="1"] .variations .custom-radio .custom-control-input:focus-visible ~ .custom-control-label {
  outline: 3px solid var(--bb-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--bb-y);
}
body[data-page="1"] .variations select.custom-select,
body[data-page="1"] .variations .bootstrap-select .dropdown-toggle {
  border: 1.5px solid var(--bb-line); border-radius: 999px;
  font-family: var(--bb-font-mono); font-size: 13px; background-color: var(--bb-surface);
}

/* --- 7.6 Kaufzeile: Pill-Stepper + CTA (Markup: Sweet/productdetails/basket.tpl) --- */
body[data-page="1"] .product-buy .basket-form-inline { align-items: stretch; }
.bb-pdp__qtycol #quantity-grp.form-counter {
  height: 54px; flex-wrap: nowrap; align-items: stretch; background: var(--bb-bg-2);
}
.bb-pdp__qtycol #quantity-grp.form-counter .btn { min-width: 40px; }
.bb-pdp__qtycol #quantity-grp.form-counter input.quantity {
  font-weight: 700; text-align: center; min-width: 0; padding: 0;
  font-size: 15px; height: auto; align-self: stretch;
}
.bb-pdp__ctacol .btn-primary {
  min-height: 54px; font-size: 13.5px; display: flex; align-items: center; justify-content: center;
}
.bb-pdp__ctacol .btn-basket-check { display: inline-flex; align-items: center; gap: 10px; }
/* !important + static: Vendor positioniert SVGs im Kauf-Button absolut in
   voller Breite (Erfolgs-Häkchen-Mechanik) — unser Inline-Cart braucht Maß. */
#add-to-cart .btn .bb-cart-ico {
  position: static !important; width: 22px !important; height: 22px !important; flex: none;
}
/* Add-to-Cart-Mikroanimation: Cart „fährt los" (JS setzt .bb-cta-fly) */
.bb-cta-fly .bb-cart-ico { animation: bb-cart-go .8s ease; }
@keyframes bb-cart-go {
  0%   { transform: translateX(0) rotate(-6deg); opacity: 1; }
  45%  { transform: translateX(64px) rotate(3deg); opacity: 0; }
  50%  { transform: translateX(-64px) rotate(-9deg); opacity: 0; }
  100% { transform: translateX(0) rotate(-6deg); opacity: 1; }
}
/* Warenkorb-Badge-Bump nach Ajax-Add (JS setzt .bb-bump bei Zähler-Änderung).
   Live-Anker: span.fa-sup neben i.fa-shopping-cart (kein .badge im Header). */
ul.nav-icons .badge.bb-bump,
.fa-sup.bb-bump { display: inline-block; animation: bb-badge-bump .5s ease; }
@keyframes bb-badge-bump { 35% { transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) {
  .bb-cta-fly .bb-cart-ico, ul.nav-icons .badge.bb-bump { animation: none; }
}

/* --- 7.7 Liefermodul kompakt + Rasta-Bestandsmeter (details.tpl-Override).
   Meter rendert NUR bei echter Knappheit (Bestand 1-19, mid/low). --- */
.bb-pdp__delivery { margin-top: 10px; }
body[data-page="1"] .bb-pdp__delivery .delivery-status,
body[data-page="1"] .bb-pdp__delivery .delivery-status .status {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase;
}
body[data-page="1"] .bb-pdp__delivery .delivery-status ul {
  display: flex; flex-wrap: wrap; gap: 2px 16px; margin-bottom: 0;
}
.bb-pdp__meter {
  height: 6px; max-width: 300px; border-radius: 3px; overflow: hidden;
  background: var(--bb-bg-2); margin: 8px 0 0;
}
.bb-pdp__meterbar { display: block; height: 100%; border-radius: 3px; }
.bb-pdp__meter--mid .bb-pdp__meterbar { width: 55%; background: linear-gradient(90deg, var(--bb-g-action), var(--bb-y)); }
.bb-pdp__meter--low .bb-pdp__meterbar { width: 22%; background: linear-gradient(90deg, var(--bb-y), var(--bb-r-action)); }

/* --- 7.7b Kurztext collapsed nach dem Liefermodul („Mehr lesen"-Toggle
   nur bei echtem Overflow, JS bbPdpShort; ohne Kurztext kein Markup) --- */
.bb-pdp__short { margin-top: 16px; }
.bb-pdp__short-body {
  position: relative; overflow: hidden; font-size: 15px; line-height: 1.6;
  color: var(--bb-ink-2); max-width: 60ch;
}
.bb-pdp__short:not(.bb-open) .bb-pdp__short-body { max-height: 6.4em; }
.bb-pdp__short.bb-clamp:not(.bb-open) .bb-pdp__short-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em;
  background: linear-gradient(to bottom, rgba(253, 252, 247, 0), var(--bb-bg));
}
.bb-pdp__short-toggle {
  margin-top: 6px; border: 0; background: none; padding: 0 0 2px; cursor: pointer;
  font-family: var(--bb-font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bb-g-action);
  border-bottom: 2px solid var(--bb-y);
}
.bb-pdp__short-toggle:hover { color: var(--bb-ink); }

/* --- 7.7c SKU-Mono-Microline unter den Actions --- */
.bb-pdp__sku {
  margin-top: 10px; font-family: var(--bb-font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bb-muted-text);
}

/* --- 7.8 Trust-Band (1× Capture, 2 Instanzen: Desktop unter der Galerie
   als 4-up-Markenband, mobil 2×2 nach dem Liefermodul — Codex R2-A) --- */
.bb-pdp__trustwrap { margin-top: 16px; }
@media (min-width: 992px) {
  .bb-pdp__trustwrap .bb-pdp__trust { grid-template-columns: repeat(4, 1fr); }
}
.bb-pdp__trust {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px;
  margin: 0; padding: 16px 18px;
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  background: var(--bb-surface);
}
.bb-pdp__trustitem { display: flex; align-items: center; gap: 11px; min-width: 0; }
.bb-pdp__trustitem svg { width: 22px; height: 22px; flex: none; }
.bb-pdp__trustitem:nth-child(4n+1) svg { color: var(--bb-g-action); }
.bb-pdp__trustitem:nth-child(4n+2) svg { color: var(--bb-ink); }
.bb-pdp__trustitem:nth-child(4n+3) svg { color: var(--bb-r-action); }
.bb-pdp__trustitem:nth-child(4n+4) svg { color: var(--bb-g-action); }
.bb-pdp__trustitem strong { display: block; font-size: 13px; line-height: 1.25; }
.bb-pdp__trustitem span {
  font-family: var(--bb-font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bb-muted-text);
}

/* --- 7.9 Sekundär-Actions als Icon-Chips (Vendor-Markup .product-actions) --- */
body[data-page="1"] .product-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
body[data-page="1"] .product-actions .btn {
  border: 1.5px solid var(--bb-line); border-radius: 999px; background: none;
  font-family: var(--bb-font-mono); font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-ink-2); padding: 9px 14px; min-height: 40px;
}
body[data-page="1"] .product-actions .btn:hover {
  border-color: var(--bb-ink); color: var(--bb-ink); background: none;
}

/* --- 7.10 Tabs: Rasta-Underline (löst F13-Grünlinie auf der PDP ab) --- */
body[data-page="1"] .tab-navigation { margin-top: clamp(28px, 4vw, 52px); }
body[data-page="1"] .nav-tabs { border-bottom: 1.5px solid var(--bb-line); gap: 4px; }
body[data-page="1"] .nav-tabs .nav-link {
  font-size: 13px; font-weight: 700; padding: 12px 16px; border: 0; position: relative;
}
body[data-page="1"] .nav-tabs .nav-link.active { border-bottom: 0; background: none; }
body[data-page="1"] .nav-tabs .nav-link.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px;
  height: 4px; border-radius: 2px; background: var(--bb-stripe);
}
body[data-page="1"] .tab-content .desc { font-size: 16px; line-height: 1.65; max-width: 72ch; }
body[data-page="1"] .tab-content table td, body[data-page="1"] .tab-content table th {
  border-color: var(--bb-line-2);
}
body[data-page="1"] .tab-content table th, body[data-page="1"] .tab-content table td:first-child {
  font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}

/* --- 7.11 Rails („Ähnliche Artikel", X-Selling): Poster-Kopf, Karten via F5 --- */
body[data-page="1"] .recommendations h2,
body[data-page="1"] .recommendations .h2,
body[data-page="1"] .recommendations .slider-title {
  font-family: var(--bb-font-disp); font-weight: 400; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(26px, 3.2vw, 40px);
}

/* --- 7.12 Mobile (<992px): Rhythmus + Sticky-Bottom-Buy-Bar --- */
.bb-buybar { display: none; }
@media (max-width: 991.98px) {
  body[data-page="1"] #result-wrapper #image_wrapper { padding: 10px; border-radius: var(--bb-radius); }
  h1.bb-pdp__title { font-size: clamp(1.35rem, 5.6vw, 1.7rem); }
  .bb-pdp__trust { gap: 10px 12px; padding: 12px 14px; }
  .bb-pdp__trustitem strong { font-size: 12px; }
  .bb-buybar {
    /* z 1040: über Consent-Bubble/Design-Labor-Widget; padding-left lässt dem
       Consent-Fingerprint unten links Platz. */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)) 74px;
    background: var(--bb-surface); border-top: 1.5px solid var(--bb-line);
    box-shadow: 0 -8px 24px rgba(23, 21, 14, .10);
    transform: translateY(110%); transition: transform .25s ease;
  }
  .bb-buybar.bb-on { transform: none; }
  body.bb-buybar-on { padding-bottom: 78px; }
  .bb-buybar__price {
    font-family: var(--bb-font-mono); font-weight: 700; font-size: 17px; white-space: nowrap;
  }
  .bb-buybar__btn {
    flex: 1; min-height: 48px; border: 0; border-radius: 999px;
    background: var(--bb-ink); color: var(--bb-bg); cursor: pointer;
    font-family: var(--bb-font-mono); font-weight: 700; font-size: 12.5px;
    letter-spacing: .07em; text-transform: uppercase;
    display: flex; align-items: center; justify-content: center; gap: 10px;
  }
  .bb-buybar__btn:active, .bb-buybar__btn:hover { background: var(--bb-g-action); color: #fff; }
  .bb-buybar__btn .bb-cart-ico { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bb-buybar { transition: none; } }

/* =====================================================================
   8: Content-/Systemseiten (Plan docs/plans/2026-07-19-content-pages-styling-plan.md,
   6-Agent-Audit 23 Seiten). Anker live verifiziert: .index-heading-wrapper,
   .well/.well-sm (in KEINEM Stylesheet definiert!), .link-content,
   .page-shipping, .alert-info/.alert-danger, #account/#login_form/
   .register-wrapper/.register-steps/.account-password, .portlet-faq,
   #newsletter-subscribe/-unsubscribe, .themy.card (Hersteller),
   .card.sitemap-group, #page-not-found. Templates: Sweet/page/404.tpl (neu),
   Sweet/productlist/header.tpl v3 (Such-H1 in .title).
   ===================================================================== */

/* --- 8.1 Poster-Kopf generisch: alle Systemseiten-H1s bekommen die
   Rasta-Akzentmarke + kräftige Typo (gleiche DNA wie PDP-H1) --- */
.index-heading-wrapper h1, #account h1, h1.basket-heading,
#content div.title.h2, .bb-404__title,
#content > .container > h1, #content > h1 {
  font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.12;
  letter-spacing: -.01em; position: relative; padding-top: 16px;
  margin: 14px 0 20px;
}
.index-heading-wrapper h1::before, #account h1::before, h1.basket-heading::before,
#content div.title.h2::before, .bb-404__title::before,
#content > .container > h1::before, #content > h1::before {
  content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 6px;
  border-radius: 3px; background: var(--bb-stripe);
}
/* Zentrierte Köpfe (Konto): Akzentmarke mittig statt links außen */
#account h1::before { left: 50%; transform: translateX(-50%); }

/* --- 8.2 CMS-/Rechtstext-Karten: .well ist nirgends definiert → Cream-Karte;
   .link-content (Impressum/Zahlung) gleiches Muster + Lese-Typo --- */
#content .well, #content .container.link-content {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); padding: clamp(18px, 3vw, 30px);
  margin-bottom: 28px;
}
#content .well .container { padding: 0; }
#content .well p, #content .link-content p { max-width: 72ch; line-height: 1.65; }
#content .well h2, #content .link-content h2,
#content .well h3, #content .link-content h3 {
  font-weight: 800; font-size: 1.1rem; margin: 1.4em 0 .5em;
}
/* --- N93 Fließtext-Links im CMS-Inhalt sichtbar machen (2026-09-11) ---------
   Befund: die globale Regel `a { color:#17150e; text-decoration:none }` gilt
   shopweit — richtig für Navigation, Kacheln und Buttons, aber im Fließtext
   trägt damit JEDER Link exakt die Absatzfarbe und keine Unterstreichung.
   Im Browser gemessen: 210 Fließtext-Links über neun Ratgeber-Seiten, davon
   210 farbgleich und nicht unterstrichen — also 210 gesetzte interne Links,
   die niemand als Link erkennt.

   ⚠ Die globale `a`-Regel wird NICHT angefasst; sie trägt Navigation und
   Buttons. Stattdessen greift diese Regel nur in `.link-content` und nur an
   Links, die in einem Absatz oder Listenpunkt stehen. Reichweite am Live-Shop
   nachgemessen (zehn CMS-Seiten): 136 Treffer, alle ohne Klasse, 0 mit
   Bild/Icon im Link — kein Button, keine Karte, kein Bildlink.

   ⚠ Die Farbe ist NICHT --bb-g / --primary (#178a41): gerechnet erreicht die
   Markenfarbe auf dem weißen Kartengrund (--bb-surface: #fff) nur 4,42:1 und
   verfehlt AA für normalen Text. #15803d erreicht 5,02:1 gegen Weiß und
   3,64:1 gegen den Fließtext (#17150e) — beide Schwellen erfüllt. Die
   Unterstreichung kommt dazu, damit die Erkennbarkeit nicht allein an der
   Farbe hängt (WCAG 1.4.1). -------------------------------------------------- */
#content .link-content p a[href]:not(.btn),
#content .link-content li a[href]:not(.btn) {
  color: #15803d;
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .18em;
}
#content .link-content p a[href]:not(.btn):hover,
#content .link-content li a[href]:not(.btn):hover,
#content .link-content p a[href]:not(.btn):focus-visible,
#content .link-content li a[href]:not(.btn):focus-visible {
  color: #0f5d2b;
  text-decoration-thickness: .12em;
}

/* Versand-Systemtext („erst mit Warenkorb") als Hinweis-Karte statt Fließtext */
#content .container.page-shipping {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-left: 6px solid var(--bb-y); border-radius: var(--bb-radius-sm);
  padding: 16px 20px; max-width: 720px; color: var(--bb-ink-2);
}

/* --- 8.3 Alerts in Rasta-Tönen (leerer Warenkorb, 0-Treffer-Suche,
   Passwort-vergessen, Cart-Modal) statt Bootstrap-Blau/Rot --- */
#content .alert-info, #cartModal .alert-info {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-left: 6px solid var(--bb-y); border-radius: var(--bb-radius-sm);
  color: var(--bb-ink-2);
}
#content .alert-danger {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-left: 6px solid var(--bb-r-action); border-radius: var(--bb-radius-sm);
  color: var(--bb-ink);
}
#content .alert-danger .fas { color: var(--bb-r-action); margin-right: 8px; }

/* --- 8.4 Konto-Trio: Login / Registrierung / Passwort-vergessen als Karten --- */
#login_form, #account .register-wrapper, #content .register-steps,
#content .account-password {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); padding: clamp(18px, 3vw, 28px);
  margin-bottom: 20px;
}
#account .register-wrapper { border-style: dashed; }
#content .register-steps .h3, #account .h3, #content .account-password .h3 {
  font-family: var(--bb-font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bb-ink);
}
/* Registrierung: H1 trägt Vendor-seitig class="h2" — wieder auf H1-Format heben */
#content .register-steps h1.h2, form[name="register"] h1.h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

/* --- 8.5 Kontakt: FAQ-Akkordeon + Formular als Panels; OPC-Titel als Poster --- */
#content .portlet-faq .card {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius-sm); overflow: hidden; margin-bottom: 10px;
}
#content .portlet-faq .card-header {
  background: none; border: 0; font-weight: 700; font-size: 14.5px;
  padding: 14px 16px; cursor: pointer;
}
#content .portlet-faq .card-header:hover { color: var(--bb-g-action); }
#content .portlet-faq .card-body { padding: 0 16px 16px; color: var(--bb-ink-2); }

/* --- 8.6 Newsletter-Seite: Anmelden = primäre Karte, Abmelden zurückgestuft --- */
#newsletter-subscribe, #newsletter-unsubscribe {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); padding: clamp(18px, 3vw, 28px);
  margin-bottom: 20px;
}
#newsletter-unsubscribe { border-style: dashed; opacity: .85; }
#newsletter-subscribe .h3, #newsletter-unsubscribe .h3 {
  font-family: var(--bb-font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
#newsletter-subscribe .newsletter-subscribe-consent {
  font-size: 12px; color: var(--bb-muted-text); max-width: 60ch;
}
/* Footer-Newsletter-Widget: Input dunkel/Mono statt Bootstrap-Weiß */
#footer .newsletter-footer .form-control, #footer input#newsletter_email {
  background: rgba(253, 252, 247, .08); border: 1.5px solid rgba(253, 252, 247, .25);
  color: #fdfcf7; border-radius: 999px 0 0 999px;
  font-family: var(--bb-font-mono); font-size: 13px;
}
#footer .newsletter-footer .form-control::placeholder { color: rgba(253, 252, 247, .45); }
#footer .newsletter-footer .btn-primary { border-radius: 0 999px 999px 0; }
#footer .newsletter-footer .info, #footer .info { font-size: 11.5px; opacity: .65; }

/* --- 8.7 Hersteller-Übersicht: A-Z-Leiste + Markenkarten --- */
#content .productlist-filter-list .nav {
  flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
  gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
}
@media (min-width: 992px) {
  #content .productlist-filter-list .nav { flex-wrap: wrap; overflow: visible; justify-content: center; }
}
#content .themy.card {
  background: #fff; border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
#content .themy.card:hover { transform: translateY(-3px); box-shadow: var(--bb-shadow); }
#content .themy.card .btn-outline-primary { border: 0; border-top: 1.5px solid var(--bb-line); border-radius: 0; }
/* keinBild-GIF verstecken → gebrandeter Stern-Platzhalter statt gebrochenem Bild */
#content .themy.card img[src*="keinBild"] { display: none; }
#content .themy.card .square-image:has(img[src*="keinBild"])::before {
  content: "★"; display: grid; place-items: center; width: 100%; aspect-ratio: 1/1;
  font-size: 40px; color: var(--bb-line);
}

/* --- 8.8 Sitemap + 404: Cards als Mono-Panels, Leerspalten weg, Recovery --- */
#content .card.sitemap-group {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); overflow: hidden; margin-bottom: 20px;
}
#content .card.sitemap-group .card-header {
  background: none; border-bottom: 1.5px solid var(--bb-line);
  font-family: var(--bb-font-mono); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
#content .card.sitemap-group a { text-decoration: none; color: var(--bb-ink-2); }
#content .card.sitemap-group a:hover { color: var(--bb-g-action); }
#content .sitemap-wrapper-linkgroup [class*="col"]:has(> ul.nav:empty) { display: none; }
.bb-404 { max-width: 720px; margin: 8px auto 36px; text-align: center; }
.bb-404__title { display: inline-block; text-align: left; }
.bb-404__sub { color: var(--bb-ink-2); max-width: 52ch; margin: 0 auto 20px; }
.bb-404__search { display: flex; gap: 0; max-width: 460px; margin: 0 auto 14px; }
.bb-404__input {
  flex: 1; min-width: 0; border: 1.5px solid var(--bb-line); border-right: 0;
  border-radius: 999px 0 0 999px; padding: 12px 18px; background: var(--bb-surface);
  font-family: var(--bb-font-mono); font-size: 14px;
}
.bb-404__btn { border-radius: 0 999px 999px 0; }
.bb-404__home {
  font-family: var(--bb-font-mono); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bb-ink); text-decoration: none;
  border-bottom: 2px solid var(--bb-y); padding-bottom: 2px;
}
.bb-404__home:hover { color: var(--bb-g-action); border-color: var(--bb-g-action); }
#page-not-found .alert-danger { max-width: 720px; margin-inline: auto; }

/* =====================================================================
   Kapitel 9 — Checkout / Warenkorb / Bestellabschluss  (bb-rasta v37)
   Scope: body.is-checkout (data-page 11) · body[data-page="3"] (Warenkorb)
          · body[data-page="33"] (Bestellabschluss).
   Ziel (Owner 2026-07-23): richtig geil, übersichtlich, gut lesbar, schnell.
   Additive Schicht auf Remake-Markup — kein Template-Override nötig.
   Feld-Autovervollständigung ist NATIV vorhanden (autocomplete-Tokens +
   twitter-typeahead PLZ/Ort/Straße) — hier nur poliert, nicht neu gebaut.
   ===================================================================== */

body.is-checkout,
body[data-page="3"],
body[data-page="33"] {
  --co-field-bg: #f5f2e7;
  --co-field-bg-focus: #fffdf7;
  --co-field-border: rgba(23, 21, 14, .20);
  background: var(--bb-bg);
}

/* ---------- 9.0 Seitenrahmen ---------- */
#checkout,
body[data-page="3"] #result-wrapper > .container,
body[data-page="33"] .order-completed {
  max-width: 1180px;
  margin-inline: auto;
}
body.is-checkout #checkout { padding-top: 8px; padding-bottom: 56px; }

/* ---------- 9.1 Typografie: lesbar statt Mono ---------- */
/* Checkout-Überschriften aus Space Mono in die Body-Schrift holen. */
body.is-checkout #checkout h1,
body.is-checkout #checkout h2,
body.is-checkout #checkout h3,
body.is-checkout #checkout .h1,
body.is-checkout #checkout .h2,
body.is-checkout #checkout .h3,
body[data-page="33"] .order-completed h1,
body[data-page="33"] .order-completed h2,
body[data-page="33"] .order-completed .h3,
body[data-page="3"] #result-wrapper h1,
body[data-page="3"] #result-wrapper h2 {
  font-family: var(--bb-font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--bb-ink);
  line-height: 1.12;
}
body.is-checkout #checkout .h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 6px; }

/* Card-/Sektions-Header (z. B. "Ich bin bereits Kunde") */
body.is-checkout #checkout .card-header,
body.is-checkout #checkout .cardheader {
  font-family: var(--bb-font-body);
  font-weight: 700; font-size: 15px; letter-spacing: 0;
  text-transform: none; color: var(--bb-ink);
}

/* Kleiner Rasta-Kicker vor der Hauptüberschrift je Step (dekorativ) */
body.is-checkout #checkout .checkout-register-form > .register-form-account::before { content: none; }

/* ---------- 9.2 Fortschritts-Stepper ---------- */
body.is-checkout #checkout .checkout-steps {
  position: relative;
  margin: 6px 0 34px;
  padding: 4px 0 0;
}
body.is-checkout #checkout .checkout-steps .step { position: relative; text-align: center; }
body.is-checkout #checkout .checkout-steps .step .step-content,
body.is-checkout #checkout .checkout-steps .step > a { width: 100%; }
/* Verbindungslinie zwischen den Punkten */
body.is-checkout #checkout .checkout-steps .step .step-content::before {
  content: ""; position: absolute; top: 18px; left: 50%; width: 100%;
  height: 3px; background: var(--bb-line); z-index: 0;
}
body.is-checkout #checkout .checkout-steps .step:last-child .step-content::before { display: none; }
body.is-checkout #checkout .checkout-steps .step .step-content {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-align: center; position: relative; z-index: 1;
}
/* Punkt/Badge */
body.is-checkout #checkout .checkout-steps .badge,
body.is-checkout #checkout .checkout-steps .badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--bb-font-mono); font-weight: 700; font-size: 15px;
  background: var(--bb-surface); color: var(--bb-muted);
  border: 3px solid var(--bb-line); box-shadow: none; padding: 0;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
/* aktueller + erledigte Schritte */
body.is-checkout #checkout .checkout-steps .step.step-active .badge,
body.is-checkout #checkout .checkout-steps .step.step-active .badge-count {
  background: var(--bb-g); color: #fff; border-color: var(--bb-g);
  transform: scale(1.06);
}
body.is-checkout #checkout .checkout-steps .step.step-active ~ .step .badge-count { color: var(--bb-muted); }
/* erledigte Schritte (Badge enthaelt Haken): gruener Punkt + gruene Linie davor */
body.is-checkout #checkout .checkout-steps .badge:has(.fa-check),
body.is-checkout #checkout .checkout-steps .badge-count:has(.fa-check) {
  background: var(--bb-g); color: #fff; border-color: var(--bb-g);
}
body.is-checkout #checkout .checkout-steps .step:has(.fa-check) .step-content::before {
  background: var(--bb-g);
}
body.is-checkout #checkout .checkout-steps .step:has(.fa-check) .step-text { color: var(--bb-ink); }
/* erledigt = grüner Haken, Linie gefüllt */
body.is-checkout #checkout .checkout-steps .step .badge .fa-check { font-size: 14px; }
body.is-checkout #checkout .checkout-steps .step-text {
  font-family: var(--bb-font-body); font-weight: 600; font-size: 14px;
  color: var(--bb-muted); letter-spacing: 0;
}
body.is-checkout #checkout .checkout-steps .step.step-active .step-text { color: var(--bb-ink); font-weight: 700; }
/* Links im Stepper nicht unterstreichen */
body.is-checkout #checkout .checkout-steps a { text-decoration: none; }

/* ---------- 9.3 Karten / Sektionen ---------- */
body.is-checkout #checkout .card,
body[data-page="33"] .order-completed .card {
  background: var(--bb-surface);
  border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius);
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
body.is-checkout #checkout .card-header,
body.is-checkout #checkout .cardheader {
  background: transparent; border-bottom: 1.5px solid var(--bb-line);
  padding: 16px 20px;
}
body.is-checkout #checkout .card-body,
body.is-checkout #checkout .cardbody { padding: 20px; }
/* "Neues Kundenkonto"/"Lieferadresse entspricht…" grüne Checkzeilen */
body.is-checkout #checkout .fa-check-circle,
body.is-checkout #checkout .fa-circle-check { color: var(--bb-g); }
/* horizontale Trenner dezenter */
body.is-checkout #checkout hr { border-color: var(--bb-line); opacity: .8; margin: 26px 0; }

/* ---------- 9.4 Formularfelder ---------- */
body.is-checkout #checkout .form-group,
body[data-page="33"] .form-group { margin-bottom: 18px; }

body.is-checkout #checkout .form-control,
body.is-checkout #checkout .custom-select,
body[data-page="33"] .form-control {
  min-height: 54px;
  background: var(--co-field-bg);
  border: 1.5px solid var(--co-field-border);
  border-radius: 14px;
  font-family: var(--bb-font-body); font-size: 16px; color: var(--bb-ink);
  padding: 14px 16px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  box-shadow: none;
}
body.is-checkout #checkout textarea.form-control { min-height: 96px; }
/* Fokus = grüner Ring, heller Grund */
body.is-checkout #checkout .form-control:focus,
body.is-checkout #checkout .custom-select:focus {
  background: var(--co-field-bg-focus);
  border-color: var(--bb-g);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-g) 22%, transparent);
  outline: none;
}
/* Label über dem Feld (flex-column-reverse) — lesbar, hebt bei Fokus grün */
body.is-checkout #checkout .col-form-label,
body[data-page="33"] .col-form-label {
  font-family: var(--bb-font-body); font-weight: 600; font-size: 13px;
  color: var(--bb-muted); letter-spacing: .01em; margin-bottom: 5px; padding-top: 0;
  transition: color .16s ease;
}
body.is-checkout #checkout .form-group:focus-within .col-form-label { color: var(--bb-g); }
/* Pflichtfeld-Stern */
body.is-checkout #checkout .col-form-label .required,
body.is-checkout #checkout label .required { color: var(--bb-r); }

/* Autofill: Chrome-Blau raus, Cream rein */
body.is-checkout #checkout input:-webkit-autofill,
body.is-checkout #checkout input:-webkit-autofill:hover,
body.is-checkout #checkout input:-webkit-autofill:focus,
body[data-page="33"] input:-webkit-autofill {
  -webkit-text-fill-color: var(--bb-ink);
  -webkit-box-shadow: 0 0 0 100px var(--co-field-bg) inset;
  box-shadow: 0 0 0 100px var(--co-field-bg) inset;
  caret-color: var(--bb-ink);
  border-color: var(--bb-line);
}
body.is-checkout #checkout .form-control:focus:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--co-field-bg-focus) inset, 0 0 0 3px color-mix(in srgb, var(--bb-g) 22%, transparent);
}

/* Fehlerzustand */
body.is-checkout #checkout .has-error .form-control,
body.is-checkout #checkout .form-control.is-invalid,
body.is-checkout #checkout .is-invalid .form-control {
  border-color: var(--bb-r);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bb-r) 16%, transparent);
}
body.is-checkout #checkout .form-error-msg,
body.is-checkout #checkout .invalid-feedback {
  color: var(--bb-r); font-family: var(--bb-font-body); font-size: 13px;
  font-weight: 600; margin-top: 6px; display: flex; align-items: center; gap: 6px;
}
/* Erfolgs-Häkchen an validen Feldern */
body.is-checkout #checkout .form-control.is-valid { border-color: color-mix(in srgb, var(--bb-g) 60%, var(--bb-line)); }

/* Custom-Select-Pfeil */
body.is-checkout #checkout .custom-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px;
}

/* ---------- 9.4b Typeahead-Dropdown (PLZ/Ort/Straße) ---------- */
body.is-checkout #checkout .twitter-typeahead { width: 100%; display: block !important; }
body.is-checkout #checkout .tt-menu {
  width: 100%; margin-top: 6px; padding: 6px;
  background: #fff; border: 1.5px solid var(--bb-line);
  border-radius: 14px; box-shadow: var(--bb-shadow, 0 12px 32px rgba(0,0,0,.12));
  z-index: 1050;
}
body.is-checkout #checkout .tt-suggestion,
body.is-checkout #checkout .tt-menu .tt-suggestion {
  padding: 10px 12px; border-radius: 9px; font-family: var(--bb-font-body);
  font-size: 15px; color: var(--bb-ink); cursor: pointer;
}
body.is-checkout #checkout .tt-suggestion:hover,
body.is-checkout #checkout .tt-suggestion.tt-cursor {
  background: color-mix(in srgb, var(--bb-g) 14%, #fff); color: var(--bb-ink);
}
body.is-checkout #checkout .tt-hint { color: var(--bb-muted); opacity: .55; }

/* ---------- 9.5 Buttons ---------- */
/* Primär-CTA: pill, dunkel → grün, klarer Lift; Schrift lesbar groß */
body.is-checkout #checkout .btn-primary,
body[data-page="3"] #result-wrapper .btn-primary,
body[data-page="33"] .order-completed .btn-primary {
  background: var(--bb-ink); border: 0; color: #fff;
  border-radius: 999px; font-family: var(--bb-font-mono); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; font-size: 14px;
  padding: 16px 28px; min-height: 56px;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
body.is-checkout #checkout .btn-primary:hover,
body[data-page="33"] .btn-primary:hover {
  background: var(--bb-g); color: #fff; transform: translateY(-2px);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--bb-g) 30%, transparent);
}
body.is-checkout #checkout .btn-primary:active { transform: translateY(0); }
/* Submit-once Spinner-Zustand nicht ausblenden */
body.is-checkout #checkout .checkout-button-row { margin-top: 10px; align-items: center; }
body.is-checkout #checkout .checkout-button-row-submit .btn { width: 100%; }
/* Sekundärlinks (Passwort vergessen etc.) lesbar */
body.is-checkout #checkout .btn-link,
body.is-checkout #checkout a.forgot-password {
  font-family: var(--bb-font-mono); font-weight: 700; letter-spacing: .04em;
  color: var(--bb-ink); text-decoration: none; border-bottom: 2px solid var(--bb-y);
  border-radius: 0; padding: 0 0 2px;
}
body.is-checkout #checkout .btn-link:hover { color: var(--bb-g); border-color: var(--bb-g); }
/* Ghost-/Sekundär-Button */
body.is-checkout #checkout .btn-outline-primary,
body.is-checkout #checkout .btn-secondary {
  border-radius: 999px; border: 1.5px solid var(--bb-line); background: #fff;
  color: var(--bb-ink); font-family: var(--bb-font-mono); text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; min-height: 52px;
}
body.is-checkout #checkout .btn-outline-primary:hover,
body.is-checkout #checkout .btn-secondary:hover { border-color: var(--bb-ink); background: #fff; }

/* Checkbox/Radio-Akzent grün */
body.is-checkout #checkout input[type="checkbox"],
body.is-checkout #checkout input[type="radio"] { accent-color: var(--bb-g); width: 18px; height: 18px; }

/* ---------- 9.6 Zusammenfassung / Adress-Kacheln (Step "Bestätigung") ---------- */
body.is-checkout #checkout .checkout-summary,
body.is-checkout #checkout .card-summary,
body.is-checkout #checkout .order-summary {
  position: sticky; top: 16px;
}
body.is-checkout #checkout .cart-total,
body.is-checkout #checkout .checkout-total {
  font-family: var(--bb-font-body); font-weight: 800; color: var(--bb-ink);
}
body.is-checkout #checkout .cart-total .cart-total-price,
body.is-checkout #checkout .grand-total { font-size: 22px; }
/* Adresskacheln in der Zusammenfassung */
body.is-checkout #checkout .address-box,
body.is-checkout #checkout .checkout-address {
  border: 1.5px solid var(--bb-line); border-radius: var(--bb-radius);
  padding: 16px 18px; background: var(--bb-surface);
}
/* Versand-/Zahlartkacheln als anklickbare Karten */
body.is-checkout #checkout .shipping-method,
body.is-checkout #checkout .payment-method,
body.is-checkout #checkout .paymentmethod {
  border: 1.5px solid var(--bb-line); border-radius: 14px; padding: 14px 16px;
  margin-bottom: 10px; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
  cursor: pointer;
}
body.is-checkout #checkout .shipping-method:hover,
body.is-checkout #checkout .payment-method:hover { border-color: color-mix(in srgb, var(--bb-g) 55%, var(--bb-line)); }
body.is-checkout #checkout .shipping-method.active,
body.is-checkout #checkout .payment-method.active,
body.is-checkout #checkout label.active {
  border-color: var(--bb-g); background: color-mix(in srgb, var(--bb-g) 8%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bb-g) 30%, transparent);
}

/* ---------- 9.7 Warenkorb (data-page 3) ---------- */
body[data-page="3"] .cart-item,
body[data-page="3"] .warenkorbpos {
  border-bottom: 1.5px solid var(--bb-line); padding: 16px 0;
}
body[data-page="3"] .cart-item img,
body[data-page="3"] .warenkorbpos img { border-radius: 12px; background: #fff; }
/* Mengen-Stepper */
body[data-page="3"] .quantity,
body[data-page="3"] .input-group.qty {
  border: 1.5px solid var(--bb-line); border-radius: 999px; overflow: hidden; background: #fff;
}
body[data-page="3"] .quantity .btn,
body[data-page="3"] .qty .btn { border: 0; background: transparent; color: var(--bb-ink); }
body[data-page="3"] .quantity input { border: 0; background: transparent; text-align: center; min-height: 44px; }
/* Summenbox */
body[data-page="3"] .cart-summary,
body[data-page="3"] .basket-total {
  background: var(--bb-surface); border: 1.5px solid var(--bb-line);
  border-radius: var(--bb-radius); padding: 20px; position: sticky; top: 16px;
}
body[data-page="3"] .cart-summary .grand-total,
body[data-page="3"] .basket-total .total { font-family: var(--bb-font-body); font-weight: 800; font-size: 22px; color: var(--bb-ink); }
/* Gutschein-Feld + Fortschritt zur Freigrenze */
body[data-page="3"] .coupon-input .form-control { min-height: 50px; border-radius: 12px; }
body[data-page="3"] .progress { height: 8px; border-radius: 999px; background: var(--bb-line); }
body[data-page="3"] .progress-bar { background: var(--bb-g); border-radius: 999px; }

/* ---------- 9.8 Bestellabschluss (data-page 33) ---------- */
body[data-page="33"] .order-completed { padding-top: 8px; }
body[data-page="33"] .order-completed > .container > h1,
body[data-page="33"] .container h1 {
  font-family: var(--bb-font-body); font-weight: 800; color: var(--bb-ink);
}
/* Erfolgs-Hero mit grünem Häkchen */
body[data-page="33"] .order-completed .alert-success,
body[data-page="33"] .order-completed .success {
  border: 0; border-radius: var(--bb-radius);
  background: color-mix(in srgb, var(--bb-g) 10%, #fff);
  color: var(--bb-ink); border-left: 6px solid var(--bb-g); padding: 20px 22px;
}

/* ---------- 9.9 Mobile ---------- */
@media (max-width: 767.98px) {
  body.is-checkout #checkout { padding-bottom: 40px; }
  body.is-checkout #checkout .checkout-steps .step-text { font-size: 12px; }
  body.is-checkout #checkout .checkout-steps .badge,
  body.is-checkout #checkout .checkout-steps .badge-count { width: 34px; height: 34px; font-size: 14px; }
  body.is-checkout #checkout .form-control { font-size: 16px; } /* iOS-Zoom vermeiden */
  body.is-checkout #checkout .checkout-summary,
  body.is-checkout #checkout .order-summary,
  body[data-page="3"] .cart-summary { position: static; }
  body.is-checkout #checkout .btn-primary { min-height: 54px; }
}

/* ---------- 10. Ratgeber-Footer-Zeile (F-41-Sichtbarkeit) ---------- */
#footer .bb-ratgeber-footer { border-top: 1px solid rgba(253, 252, 247, .12); margin-top: 18px; padding-top: 14px; }
#footer .bb-ratgeber-nav { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
#footer .bb-ratgeber-nav-title { font-family: var(--bb-font-body); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; opacity: .85; margin-right: 8px; }
/* A11Y-2026-09-07 (a) — Ziel-Groesse (WCAG 2.5.8 / Lighthouse target-size, Gewicht 7,
   fiel auf Home/PLP/PDP/Suche mobil): der Link war 13 px × 1.5 + 2×2 px Padding =
   23,5 px hoch (Tiefcheck 06.09.). Mobil 44 px (Bedienbarkeitsentscheidung, nicht
   WCAG-Minimum 24 px), Desktop 32 px; `gap: 4px` haelt benachbarte Ziele auseinander.
   Text bleibt 13 px / opacity .8 — nur die Trefferflaeche waechst (Footer wird mobil
   hoeher: gewollte Sichtdifferenz, Visual-Tor FAIL im Footer erwartet). */
#footer .bb-ratgeber-nav-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
#footer .bb-ratgeber-nav-list .nav-link {
  padding: 2px 10px; font-size: 13px; opacity: .8;
  display: inline-flex; align-items: center; min-height: 32px;
}
@media (max-width: 991.98px) {
  #footer .bb-ratgeber-nav-list .nav-link { min-height: 44px; }
}
#footer .bb-ratgeber-nav-list .nav-link:hover { opacity: 1; text-decoration: underline; }

/* PLP-Ratgeber-Ausgang (unter dem Kategorietext) */
.bb-catdesc .bb-ratgeber-plp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bb-line); }
.bb-catdesc .bb-ratgeber-plp__label { font-family: var(--bb-font-body); font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--bb-ink); opacity: .75; }
.bb-catdesc .bb-ratgeber-plp__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bb-catdesc .bb-ratgeber-plp__list a { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 11. Warenkorb: C50 Versandkostenermittlung (2026-08-09) ----------
   Quelle des Defekts (im Browser belegt): sweet_crit setzt
   `[data-toggle="collapse"]:not(.navbar-toggler):not(.filter-toggler)` auf
   nowrap - Spezifitaet 0-3-0 durch die :not()-Kette. Der Trigger lief bei
   390 px 266-279 px ueber den card-header hinaus (beide Profile). Darum hier
   0-4-1 ueber die Markup-Klassen statt !important. */
button.btn.btn-link.btn-block[data-target="#calculator-form"] {
    white-space: normal;
    text-align: left;
}

/* ---------- 12. N10: Produkt-Slider-Platzhalter, Division durch 0 (2026-08-09) ----------
   Befund (im Browser belegt, mobiler UA): das mobile Dokument rendert die beiden
   OPC-Rails als `.opc-product-slider > .slick-slider-other > .row.slick-lazy
   .slick-type-product` mit inline `--display-count-sm:0;--display-count-md:0;
   --display-count-lg:4;--display-count-xl:4` (OPC-Portlet taProductFeed,
   data-display-counts="0,0,4,4"). Der Vor-Init-Platzhalter aus
   `Remake/themes/base/sass/components/_carousel.scss` rechnet
   `width/min-width: calc(100% / var(--display-count-sm))` -> Division durch 0
   -> `min-width: 3.40282e+38%`, von Chromium auf 2^25 = 33.554.432 px geklemmt.
   `productbox-image { aspect-ratio: 1/1 }` uebersetzt das in dieselbe Hoehe,
   also 33.554.432 px Dokumenthoehe.
   Selbstverriegelung: `generateSlickSlider()` in `Remake/js/jtl.evo.js` beobachtet
   `.slick-lazy` mit `threshold: 0.1` — 10 % von 33,5 Mio px passen in kein
   Viewport, deshalb wird Slick auf der mobilen Startseite NIE initialisiert und
   `:not(.slick-initialized)` bleibt dauerhaft wahr.
   Desktop ist nicht betroffen: dort rendert das Dokument stattdessen
   `opc-ProductStream-gallery` (kein Slick), und ab 1300 px greift ohnehin
   `--display-count-xl: 4`.

   Fix: identische Selektoren und identische Formel, nur der Divisor wird gegen
   0 abgesichert (`max(1, ...)`). bb-rasta.css laedt NACH sweet_crit.css, die
   Spezifitaet ist gleich (0-4-0 bzw. 0-5-0), also gewinnt diese Fassung.
   Jeder gueltige Wert >= 1 bleibt unveraendert — der Fix ist im Gesundfall inert.
   Die var()-Fallbacks spiegeln die Sweet-Defaults (sm 2 / md 3 / lg 4 / xl 5,
   mit Sidebar lg 3 / xl 4). Slicks JS-Seite ist bereits robust
   (`parseInt(x) || default` in `initSlick`), nur die CSS-Seite war es nicht.
   Reihenfolge der Media-Queries = Reihenfolge der Quelle, damit die Kaskade je
   Breakpoint exakt gleich aufloest. */
@media (max-width: 767.98px) {
    .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-sm, 2)));
        min-width: calc(100% / max(1, var(--display-count-sm, 2)));
    }
}
@media (min-width: 768px) {
    .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-md, 3)));
        min-width: calc(100% / max(1, var(--display-count-md, 3)));
    }
}
@media (min-width: 992px) {
    .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-lg, 4)));
        min-width: calc(100% / max(1, var(--display-count-lg, 4)));
    }
    .has-left-sidebar .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-lg, 3)));
        min-width: calc(100% / max(1, var(--display-count-lg, 3)));
    }
}
@media (min-width: 1300px) {
    .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-xl, 5)));
        min-width: calc(100% / max(1, var(--display-count-xl, 5)));
    }
    .has-left-sidebar .carousel:not(.slick-initialized).slick-type-product .product-wrapper {
        width: calc(100% / max(1, var(--display-count-xl, 4)));
        min-width: calc(100% / max(1, var(--display-count-xl, 4)));
    }
}

/* =====================================================================
   10: Sprungmarken / Skip-Links  (A11Y-02, WCAG 2.4.1 Level A, 2026-08-13)

   Befund: alle drei Sprungmarken liegen korrekt auf DOM-Position 0/1/2 der
   fokussierbaren Elemente, sind aber per Tastatur nicht erreichbar und
   werden auch bei Fokus nicht sichtbar. Die ersten drei echten Tab-Anschläge
   landen auf Logo, Suchfeld, Suchen-Button.
   Beleg: outputs/a11y-audit-2026-08-13/raw/probe-raw.json .skipDiag —
   `height 54px · width 235.188px · visibility visible ·
    transform matrix(0,0,0,0,0,0) → Rect 0x0`, und Rect bleibt 0x0 nach
   `.focus()`.

   Ursache, an der ausgelieferten Kaskade nachgelesen (nicht am SCSS):
   `_base.scss:116` versteckt den Link mit `transform: scale(0)` und hat eine
   `:focus`-Gegenregel — die steht auch so in `sweet_crit.css`. Nur: dieses
   Blatt kommt async (preload+onload). Was beim ersten Paint gilt, ist der
   Inline-Lock `bb-prepaint.css`, und der enthält AUSSCHLIESSLICH die
   Grundregel:
       .btn-skip-to{…transform:scale(0)…}
   ohne die `:focus`-Zeile. Grund ist derselbe strukturelle blinde Fleck, der
   in Sweet/layout/header.tpl für N8 beschrieben ist: der Generator behält
   Regeln, deren Selektor eine SICHTBARE FLÄCHE trifft — ein auf Null
   skaliertes Element hat keine, sein `:focus`-Zustand erst recht nicht.
   Genau in dem Fenster tabbt aber jeder Tastaturnutzer, der eine frische
   Seite öffnet.

   Fix: die etablierte visually-hidden-Technik statt `scale(0)`. Ein
   1x1-Ausschnitt bleibt ein gerendertes Element mit Fläche und damit in der
   Tab-Reihenfolge und im Accessibility-Baum; `scale(0)`, `display:none` und
   `visibility:hidden` nehmen es dort heraus. Deshalb 1px und nicht 0.

   Warum diese Datei und nicht sweet_crit.css / bb-prepaint.css:
   `bb-rasta.css` ist ein BLOCKIERENDES `<link>` und steht in der
   Dokumentreihenfolge hinter dem `<style id="criticalCSS">` (Inline-Lock)
   UND hinter dem `sweet_crit.css`-Preload (Sweet/layout/header.tpl). Bei
   gleicher Spezifität gewinnt die spätere Regel — die Sprungmarken sind
   damit ab dem ERSTEN Paint richtig, nicht erst wenn das async-Blatt
   eintrifft. `bb-prepaint.css` ist generiert (build_prepaint_lock.py) und
   wird bewusst nicht von Hand angefasst; `sweet_crit.css` ist
   Vendor-kompiliert.

   `transition: none` ist Absicht: der Vendor blendet über 200 ms ein, eine
   Messung unmittelbar nach `.focus()` sieht dann noch die Nullfläche. Ohne
   Übergang ist der fokussierte Zustand im selben Frame vollständig da — für
   den Nutzer wie für die Nachmessung.

   Kontrast: Text `--bb-ink` (#17150E) auf `--bb-surface` (#FFFFFF) = 16,9:1;
   der grüne Rahmen ist Nicht-Text (Soll 3:1, #178A41 auf Weiß = 4,42:1).
   Der Rahmen ist nicht der einzige Träger — Fläche, Position und der globale
   Fokus-Outline kommen dazu.
   ===================================================================== */
.btn-skip-to {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  transform: none;
  transition: none;
}

.btn-skip-to:focus,
.btn-skip-to:focus-visible {
  top: 12px;
  left: 12px;
  z-index: 1080;
  width: auto;
  height: auto;
  padding: .75rem 1.25rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  background: var(--bb-surface, #ffffff);
  border: 3px solid var(--bb-g, #178a41);
  border-radius: var(--bb-radius, 16px);
  color: var(--bb-ink, #17150e);
  font-family: var(--bb-font-mono, "Space Mono", ui-monospace, monospace);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transform: none;
  box-shadow: 0 8px 24px -8px rgba(23, 21, 14, .45);
}

/* Sprungziel der Hauptnavigation (Sweet/layout/header_categories.tpl).
   `tabindex="-1"` macht den Mount programmatisch fokussierbar; der
   Fokus-Outline darauf wäre eine rahmenlose Fläche über die ganze
   Navigationsbreite und ist ohne Informationswert — der Sprung ist am
   folgenden Tab-Anschlag erkennbar, der im Menü landet. */
#mainNavigation:focus {
  outline: none;
}

/* =====================================================================
   Kapitel 11 · N24 / A11Y-04..07 — Kontraste (WCAG 1.4.3, Level AA)
   ---------------------------------------------------------------------
   Ausgangslage, über die Grundgesamtheit gemessen (2026-08-14,
   `scripts/checks/n24_a11y_readback.py`, 8 Seitentypen × 2 UA):
   **118 Textknoten unter Soll** von 3.670 — und sie gehen restlos auf
   zehn Regeln zurück, nicht auf 118 Stellen.

   ⚠ Nicht der Weg des Prüfberichts („die Grün-Variable absenken").
   `--bb-g` ist zugleich Markenfläche: Kacheln, Rahmen, Bänder. Als
   Nicht-Text gilt dort Soll 3:1, und 4,42:1 erfüllt das. Wer den Token
   absenkt, repariert den Text und repaint die Marke.

   Stattdessen eine Achse, die das Theme schon kennt und die hier nur
   zu Ende gezogen wird:
     --bb-g / --bb-r          Marke als **Fläche**   (Soll 3:1)
     --bb-g-action / -r-action Marke als **aktive Fläche**, weiße Schrift drauf
     --bb-g-ink / --bb-r-ink   Marke als **Text**     (Soll 4,5:1)

   Belegt vor dem Deploy: derselbe Sweep mit der Kandidatendatei gegen
   die **echte Live-Kette** dazugeladen ergab 118 → **0**, ohne einen
   einzigen neuen Ausfall, Gegenprobe grün
   (`outputs/n24-a11y-2026-08-14/probelauf-kandidat.json`).
   ===================================================================== */
:root {
  --bb-g-ink: #0f6b31;   /* 6,63 / 6,45 / 5,92 / 5,11 auf Weiß / bg / bg-2 / Beige */
  --bb-r-ink: #b8301f;   /* 6,03 auf Weiß · hält auch bei 0,9 Deckkraft 4,99:1    */
}

/* 11.1 · Grün als Text.
   --bb-g-action (#147a3b) reicht auf Weiß, fällt auf Beige aber auf 4,18 —
   und genau dort sitzt der Seiten-Umschalter der Listen-Toolbar. Darum ein
   eigenes Textgrün statt der vorhandenen Aktionsfarbe. */
.productlist-pagination .btn.js-pagination-ajax,
.productlist-page-nav .btn.js-pagination-ajax,
.delivery-status .status-2,
.signal_image .status-2,
.sweet .delivery-status .status-2,
.sweet .signal_image .status-2 { color: var(--bb-g-ink); }

/* 11.2 · Warenkorb-Zähler: weiß auf --bb-r = 4,48:1. Fehlbetrag 0,02 — aber
   in allen 16 Läufen, weil der Zähler im Kopf jeder Seite steht.
   ⚠ Die gewinnende Regel ist `.sweet .fa-sup` (sweet_crit.css, 0-2-0), nicht
   `.fa-sup`; ein Einzelklassen-Override bleibt wirkungslos. Live nachgesehen,
   nicht aus der Datei geraten. */
ul.nav-icons .badge,
.sweet .fa-sup { background-color: var(--bb-r-action); }

/* 11.3 · Die Pflichtfeld-Markierung war weiß auf weiß — 1,00:1. Sie ist nicht
   blass gewesen, sie war unsichtbar (sweet_crit.css setzt `color:#ffffff` für
   `.required-star` und für das `::after` der Label-Slide-Formulare). Betrifft
   zugleich 3.3.2.
   ⚠ Nicht --bb-r-action: an einer Stelle wird der Stern mit 0,9 Deckkraft
   gezeichnet, dort fällt #c93625 auf 4,38:1 zurück — gemessen, nicht vermutet. */
.required-info .required-star,
.label-slide input[required] + .col-form-label::after,
.label-slide textarea[required] + .col-form-label::after,
.label-slide select[required] + .col-form-label::after { color: var(--bb-r-ink); }

/* 11.4 · Beschriftungen und Hinweistexte standen auf --bb-muted (#8b8471) =
   3,63–3,73:1. --bb-muted-text (#756f5f) existiert im Theme genau dafür und
   wurde hier nur nicht verwendet.
   ⚠ `!important` ist kein Stilmittel, sondern Pflicht: die Quelle
   (`sweet_crit.css .text-muted,…{color:#8b8471!important}`) trägt es selbst. */
.label-slide .form-group .col-form-label,
.optional,
.text-muted,
.text-muted p { color: var(--bb-muted-text) !important; }

/* 11.5 · Fehlertexte der Formular-Nachrüstung (A11Y-10, Kapitel 12 in
   header.tpl). Bootstraps `.invalid-feedback` ist `display:none`, solange kein
   `.is-invalid`-Geschwister danebensteht — die nachgerüsteten Knoten brauchen
   deshalb eine eigene Sichtbarkeit. */
.bb-form-error {
  display: block;
  margin-top: .3rem;
  font-size: .875rem;
  color: var(--bb-r-ink);
}
.bb-form-alert {
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1.5px solid var(--bb-r-ink);
  border-radius: var(--bb-radius-sm, 9px);
  color: var(--bb-r-ink);
  font-size: .9375rem;
}
.bb-form-alert:empty { display: none; }

/* ---------- 13. PLP mobil: der Filter-Drawer sitzt in einer Stapelfalle
   (2026-08-14) ----------
   Befund, im Browser gemessen (mobiler UA, 390x844, /Grinder):

   `#collapseFilter` traegt `position: fixed; z-index: 1050` — und das ist
   wertlos. Er haengt in `.productlist-page-nav-header-m`, und die ist laut
   sweet_crit.css unter 768 px `position: sticky; z-index: 3`. Sticky oeffnet
   einen Stapelkontext, also zaehlt im Wurzelstapel die **3**, nicht die 1050.
   Der Drawer liegt damit unter allem, was root-seitig hoeher steht:

     #jtl-nav-wrapper   sticky, z 1020, Unterkante 146 px   (der Header)
     .bb-fn-m-burger    im Header, z auto                   (KATEGORIEN)
     #consent-banner
     .bb-fn-m--open::before / .bb-fn-m-veil   z 1060 / 1061 (Menue-Schleier)

   Die zweite Haelfte ist die Geometrie: der Drawer beginnt bei `top: 3.75rem`
   = 52,5 px, der Header endet aber erst bei 146 px. Seine eigene Kopfzeile
   („Filter und Sortierung") samt Schliessen-X liegt also 93,5 px tief unter
   dem Header. Gemessen: ein Tipp auf dieses X trifft `a.nav-link` und
   NAVIGIERT WEG; danebengetippt trifft man den Burger, das Menue geht auf und
   legt seinen Schleier (z 1060, rgba(8,8,6,.55), dazu der Veil als
   Klickfaenger) ueber den ganzen Drawer. Das ist der Zustand, in dem der
   Drawer abgedunkelt dasteht und nichts mehr annimmt.

   Fix, beides nur im mobilen Bereich:
   1. Die Stapelkiste steigt auf 1040, solange der Drawer offen ist — ueber
      den Header (1020), unter Consent (1050), FlexNav-Schleier (1060) und
      Sidecart/Age (1090/1100). Der z-Vertrag aus flexnav.css bleibt gueltig,
      und der Backdrop (z 1000) liegt weiterhin IN derselben Kiste, also
      weiter unter dem Drawer und ueber der Toolbar. `.collapsing` haengt mit
      drin, sonst faellt die Kiste waehrend der Oeffnungsanimation zurueck.
   2. Der Drawer nimmt die volle Hoehe. `3.75rem` war die Annahme eines
      60-px-Headers; der Header ist 146 px hoch. Statt die Zahl nachzupflegen
      faellt die Abhaengigkeit weg — die Kopfzeile des Drawers steht damit
      immer frei.

   Spezifitaet bewusst ueber `:has()` (1-2-0 gegen 0-1-0) bzw. die zweite
   Markup-Klasse (1-2-0 gegen 1-1-0): der Fix haengt so nicht an der
   Ladereihenfolge — sweet_crit steht auch als Inline-Block im <head>.
   `.js-collapse-filter` statt `.show` als Traeger, weil Bootstrap beim
   Umschalten `.collapse`/`.show` austauscht, diese Klasse aber bleibt.

   KORREKTUR 2026-08-14, zweite Messung: hier stand, oberhalb von 768 px sei
   „keine Falle" und der Rest ein „zweiter Defekt mit anderer Ursache". Beides
   war falsch, und der Fehler steckte im Ablesen. `kisteZ = auto` wurde als
   „keine Kiste" gelesen — `auto` heisst bei `isolation: isolate` aber sehr
   wohl Kiste, nur eben eine, die auf Wurzelebene 0 malt. Es ist DIESELBE
   Falle, nur ein anderer Traeger; siehe 13b. Gemessen mit
   `scripts/checks/plp_drawer_stapel.py`. */
@media (max-width: 767.98px) {
  /* 1045, nicht 1040: im DESKTOP-Dokument (UA-Weiche, „Desktop-Website
     anfordern") ist `#collapseFilter` kein Collapse-Drawer, sondern ein
     Bootstrap-Modal mit eigenem `.modal-backdrop` — und der liegt mit z 1040
     als Kind von <body> im Wurzelstapel. 1040 gegen 1040 ist Gleichstand, und
     den gewinnt das spaetere Element im DOM, also der Backdrop: gemessen
     0 von 12 Rasterpunkten, Helligkeit 59. Mit 1045 sind es 12 von 12.
     Weiterhin unter Consent (1050), FlexNav-Schleier (1060), Sidecart/Age
     (1090/1100) — der z-Vertrag aus flexnav.css bleibt gueltig. */
  .productlist-page-nav-header-m:has(#collapseFilter.show),
  .productlist-page-nav-header-m:has(#collapseFilter.collapsing) {
    z-index: 1045;
  }

  #collapseFilter.productlist-filter.js-collapse-filter {
    top: 0;
    height: 100%;
  }
}

/* ---------- 13b. Dieselbe Falle ab 992 px — Traeger ist `isolation: isolate`
   (N28, gemessen 2026-08-14) ----------
   Ab 992 px traegt `.bb-plp-row` (Kapitel 5, die Sidebar/Content-ROW)
   `isolation: isolate`. Das war Absicht: Sidebar z1 und Kategorien-Reiter z2
   sollten eine private Ebene bekommen. Der Nebeneffekt ist eine Stapelkiste
   mit z-index `auto` — sie malt auf Wurzelebene 0, und alles in ihr malt mit
   ihr. `#collapseFilter` haengt darin und verliert deshalb trotz seiner 1050
   gegen jeden Wurzelnachbarn mit hoeherem z. Gemessen auf /HEADSHOP/Grinder:

     mobiles Dokument, 1024 + 1280 px   3 von 12 Punkten vom Header
                                        (#jtl-nav-wrapper, z 1020) genommen,
                                        das Schliessen-X traf `a.nav-link`
     Desktop-Dokument, 1024–1360 px     12 von 12 Punkten vom `.modal-backdrop`
                                        (z 1040) genommen, Helligkeit 64 statt
                                        190 — der gemeldete „Schatten-Modus",
                                        und zwar auf JEDEM Desktop, nicht nur
                                        im Tablet-Bereich

   Fix wie in Kapitel 13: die Kiste verschwindet genau so lange, wie der
   Drawer offen ist. Der Reiter braucht seine private Ebene nur im
   Ruhezustand — steht das Overlay offen, verdeckt es ihn ohnehin zu Recht.
   Nachgemessen im Ruhezustand, 1024/1280/1360/1500 px: Reiter z2 ueber
   Sidebar z1, vorher wie nachher unveraendert obenauf.

   Warum nicht die Kiste anheben statt sie aufzuloesen: eine hochgezogene
   Kiste nimmt den GESAMTEN PLP-Inhalt mit nach oben, damit auch ueber den
   Modal-Backdrop — die Abdunklung der Seite waere weg. Und warum nicht
   `isolation` einfach streichen: dann verliert der Reiter seine Ebene auch
   im Ruhezustand, ohne Not.

   Faellt `:has()` aus (alter Browser), kippt die Regel in `isolation: auto` —
   also in den funktionierenden Drawer ohne private Reiter-Ebene. Der Ausfall
   zeigt bewusst in die harmlose Richtung.

   Abnahme: `python scripts/checks/plp_drawer_stapel.py --ua beide`
   Rollback = diesen Block loeschen. */
@media (min-width: 992px) {
  .bb-plp-row { isolation: auto; }
  .bb-plp-row:not(:has(#collapseFilter.show)):not(:has(#collapseFilter.collapsing)) {
    isolation: isolate;
  }
}

/* ===================================================================
   A11Y-2026-09-07 — Barrierefreiheits-Paket (Review 07.09. §2 #18–24, §6 M2;
   Owner-Entscheid 07.09.: Paket komplett, Optik sonst unveraendert).
   Belege: outputs/a11y-paket-2026-09-07/BAU.md. Rollback = diesen Block
   loeschen + (a)(b)(c) oben zuruecknehmen + bb-blocking.min.css neu bauen.
   =================================================================== */

/* (d) Lieferzeit-Kontrast (PDP-Liefermodul, axe/Lighthouse color-contrast):
   sweet_crit.css setzt `.estimated-delivery{color:#8b8471}` (= --bb-muted) — auf
   --bb-bg #fdfcf7 sind das 3,63:1 (auf #fff 3,73:1) < 4,5:1. --bb-muted-text
   #756f5f ist der Theme-Token genau fuer kleinen Text: 4,87:1 auf #fdfcf7, 5,01:1
   auf #fff. Das Liefermodul (.bb-pdp__delivery, Kap. 7.7) hat keinen eigenen
   Hintergrund, es steht auf dem Seitengrund. Gezielte Regel statt Token-Umbau
   (Owner: Millimeter). `.a2` (Lageranzeige-Status, span um den Lieferzeit-Text)
   explizit mit, damit kein Status-Pfad den Wert wieder aufhellt.
   Kaskade: sweet_crit.css steht im Dokument VOR bb-blocking.min.css (Preload-
   Link Z. ~526 vs. Z. ~673 in header.tpl) — gleiche Spezifitaet, spaeteres Blatt
   gewinnt, deshalb ohne !important. Der Hover-Pfad
   `.estimated-delivery:hover .estimated-delivery-info{color:#178a41}` (0,3,0)
   bleibt staerker als `.estimated-delivery .a2` (0,2,0) — Link-Hover unveraendert.
   Gewollte Sichtdifferenz: Lieferzeit-Text ein wenig dunkler (#8b8471 -> #756f5f). */
.estimated-delivery,
.estimated-delivery .a2 { color: var(--bb-muted-text); }

/* (e) PDP-Accordion (mobil / Einstellung accordion): Kopfzeile ist jetzt
   <h2 class="card-header"><button type="button" data-toggle="collapse" aria-expanded>
   statt <div class="card-header" aria-expanded="1"> (Sweet-Override
   productdetails/tabs.tpl; Lighthouse aria-allowed-attr, aria-valid-attr-value,
   heading-order — zusammen 30 Punkte auf der mobilen PDP).
   Ziel: pixelgleich zum bisherigen div. Was das h2 mitbringt und hier
   zurueckgesetzt wird: Space-Mono-Stapel, font-size 1.625rem, font-weight 700,
   line-height 1.2, font-stretch 85 %, Ueberschriftenfarbe, margin — alles auf
   inherit/0, damit das h2 typografisch exakt das bisherige div ist. Im normalen
   Accordion (#tabAccordion) gewinnt danach wie bisher die Id-Regel
   `#tabAccordion>.card .card-header{font-size:1.1em;font-weight:700}` (1,2,0 >
   0,3,1; sweet_crit.css <= 991.98 px, bb-prepaint.css inline unscoped); im
   Quickview (#tabAccordion-quickview, Remake `?quickView=1`) greift diese
   Id-Regel NICHT — dort erbte das div die Karten-Typografie, und genau das
   liefert `inherit` (Review 07.09. Codex #2 / Fable Q1). Das Bootstrap-Padding
   (.75rem 1rem) wandert vom h2 auf den Button, damit die GANZE Kopfzeile
   klickbar bleibt (Trefferflaeche wie vorher beim div). */
.accordion > .card > h2.card-header {
  padding: 0; margin: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit; font-stretch: inherit;
  line-height: inherit; color: inherit;
}
.accordion > .card > h2.card-header > button {
  /* Flex wie die Vendor-Regel `[data-toggle="collapse"]:not(.navbar-toggler):not(.filter-toggler)
     {display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap}` (0,3,0),
     die vorher am div griff — diese Regel (0,3,3) gewinnt und darf sie nicht auf `block`
     zurueckdrehen, sonst rutscht der Themycons-Chevron (`::after` ) hinter den Text
     statt an den rechten Rand (Nachweis 07.09., chevron.json). */
  display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;
  width: 100%; margin: 0; padding: .75rem 1rem;
  border: 0; border-radius: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
/* Der geoeffnete Kopf war ueber `@media (max-width:1299.98px){#tabAccordion>.card
   .card-header[aria-expanded="true"]{background:#f5f2e7}}` (sweet_crit.css, NUR
   bis 1299.98 px; bb-prepaint.css traegt diese Regel nicht) eingefaerbt —
   aria-expanded pflegt Bootstrap-Collapse jetzt am Button, also den Zustand ueber
   :has() an den Kopf zurueckspiegeln: gleicher Wert #f5f2e7 (= --bb-bg-2), gleiche
   Media-Bedingung, gleicher Geltungsbereich (#tabAccordion, NICHT der Quickview —
   dessen Koepfe waren nie eingefaerbt; Review 07.09. Codex #3). Spezifitaet
   (1,3,1) schlaegt `.accordion>.card .card-header:hover{background:transparent}`
   (0,4,0) wie vorher die Vendor-Regel (1,3,0). :has() ist im Theme bereits
   Grundlage (Ausverkauft, PLP-Reiter); ohne :has() bleibt der offene Kopf nur
   unmarkiert. */
@media (max-width: 1299.98px) {
  #tabAccordion > .card > .card-header:has(> button[aria-expanded="true"]) { background-color: #f5f2e7; }
}
/* Fokus: die globale I8-Regel (outline --bb-ink, offset 2px, box-shadow --bb-y)
   liegt AUSSERHALB des Buttons und wird von `.accordion>.card{overflow:hidden}`
   abgeschnitten — deshalb dieselbe Zweifarb-Markierung nach innen gelegt:
   Ring --bb-ink, innen Band --bb-y. */
.accordion > .card > h2.card-header > button:focus-visible {
  outline: 3px solid var(--bb-ink); outline-offset: -3px;
  box-shadow: inset 0 0 0 6px var(--bb-y) !important;
}

/* N25 (2026-09-08): Wertzahl im Kopf der mobilen Filtergruppen.
   Der Kopf ist im Remake-Theme bereits display:flex mit justify-content:space-between
   und einem ::after-Caret als zweitem Flex-Kind; live gemessen (390 px, echter
   iPhone-UA) bleiben rechts der Beschriftung 190-249 px frei und keine Beschriftung
   ist abgeschnitten - die Zahl kostet also keine Zeilenhoehe.
   `margin-left:auto` schluckt genau diesen Freiraum, damit die Zahl am Caret klebt,
   statt von space-between in die Mitte gezogen zu werden (auto-Margins gehen
   justify-content vor). `flex:none` haelt sie unverkleinert, wenn eine lange
   Beschriftung umbricht.
   ⚠ `color` ist PFLICHT. `badge-outline-secondary` malt seinen Text in der
   Rahmenfarbe (#e9e2ca): im Gruppenkopf gemessen 1,3:1 gegen Weiss, also
   unlesbar und ein WCAG-Verstoss. Die Wert-Badges daneben sehen richtig aus,
   weil sie ihre Tinte vom umgebenden `a.filter-item` erben (gemessen 18,26:1) -
   der Gruppenkopf gibt sie nicht weiter. `--bb-muted-text` (#756f5f) ist der
   bereits abgenommene A11y-Token (Lieferzeit), misst gegen Weiss 5,0:1,
   besteht damit AA fuer kleinen Text und bleibt optisch zweite Stimme.
   Markup: templates/Sweet/snippets/filter/mobile.tpl (Sweet-Override, kein Core-Edit).
   Rollback: diesen Block loeschen und bb-blocking.min.css neu bauen. */
#collapseFilter .productlist-filter-accordion > li > a > .bb-fltr-count {
  margin-left: auto; margin-right: .5rem; flex: none; align-self: center;
  color: var(--bb-muted-text);
}

/* =====================================================================
   N80 — Bedienbarkeit unter 390 px (2026-09-08)

   Gemessen an /BONGSHOP mit echtem mobilem UA. `.bb-card__buy` braucht eine
   FESTE Breite von 144 px (Stepper 92 + gap 8 + Icon-Add 44); die Kachel
   bietet aber nur:

       Viewport   Kachel   Platz in der Zeile   .bb-card__buy   ragt heraus
        320 px     136          110 px             144 px          +34
        360 px     156          130 px             144 px          +14
        375 px     163          137 px             144 px           +6
        390 px     171          145 px             144 px           -1  (passt)

   Es ist also kein reines 320-px-Problem: auf jedem 360er-Geraet ragt die
   Kaufzeile schon heute 14 px aus ihrer Kachel, nur eben noch nicht ueber den
   Viewport — deshalb hat es kein Ueberlauf-Detektor gemeldet.

   ⛔ NICHT der Vorschlag aus PLAN.md (`flex: 0 1 auto; min-width: 0` allein).
   Er beseitigt den Ueberlauf, aber die Kinder des Steppers haben feste Breiten
   (30 + 32 + 30) und `.bb-card__qty.form-counter` traegt `overflow: hidden` —
   gemessen clippt der Stepper dann 34 px bei 320, 14 bei 360, 7 bei 375. Der
   Nutzer saehe abgeschnittene Bedienelemente, und kein Detektor faende es mehr.
   Das ist kein Fix, das ist ein Versteck.

   Stattdessen darf die Kaufzeile umbrechen: der Icon-Add rutscht unter den
   Stepper. Kostet 48 px Hoehe je Kachel, aber nur unterhalb von 390 px — ab
   390 aendert sich NICHTS, der Owner-Look aus I3 bleibt unberuehrt.
   Trefflaechen bleiben unveraendert (kleinste Kante 40 px, vorher wie nachher).
   ===================================================================== */
@media (max-width: 389.98px) {
  .bb-card__buy {
    flex: 0 1 auto; min-width: 0;
    flex-wrap: wrap; justify-content: flex-end; row-gap: 8px;
  }

  /* Warenkorb: `Remake/themes/base/sass/_basket.scss:186` setzt
     `.cart-items-delete-button { white-space: nowrap }`. Bei 320 px blaeht das
     das Dokument auf 335 px auf (gemessen mit geseedetem Warenkorb). Core wird
     nicht editiert, hier ueberschrieben — gleiche Spezifitaet, spaetere
     Position: bb-blocking.min.css steht im Dokument NACH sweet.css,plugin_css.
     Der Knopf wird dadurch zweizeilig (31 -> 49 px hoch), die Trefflaeche
     waechst also. */
  .cart-items-delete .cart-items-delete-button { white-space: normal; }
}

/* =====================================================================
   N110 (2026-09-13) — Sichtbarkeit und Bedienung (seo-ops Visual-Audit 11.09.:
   V-01, V-02, V-05, V-06, V-07; Owner-Entscheid 48 vom 13.09.).
   Messwerte, Screenshots und Readback: outputs/n110-sichtbarkeit-2026-09-13/LOG.md.
   Rollback = diesen Block loeschen, die drei Template-Stellen zuruecknehmen
   (layout/header.tpl bbPdpBuybar + bbHdrH, layout/footer.tpl Cookie-Link,
   productlist/footer.tpl Intro-Dedupe) und bb-blocking.min.css neu bauen.
   ===================================================================== */

/* (a) V-07 Verfuegbarkeitszeile der PDP: sweet_crit.css setzt `.status-0` weiss
   (#fff auf --bb-bg #fdfcf7 = 1,03:1, "Momentan nicht verfuegbar" war unsichtbar)
   und `.sweet .status-1` #eab00e (1,91:1, "Knapper Lagerbestand"). Text braucht
   Tinte, keine Flaechenfarbe (Kap. 11): --bb-r-ink 5,87:1, neu --bb-y-ink #7d5200
   6,64:1 auf #fdfcf7 (6,09:1 auf bg-2, 6,82:1 auf Weiss). Spezifitaet 0,3,0 wie
   die .sweet-Regel, spaeteres Blatt gewinnt; status-2 (gruen) steht in 11.1. */
:root { --bb-y-ink: #7d5200; }
.delivery-status .status-0, .signal_image .status-0,
.sweet .delivery-status .status-0, .sweet .signal_image .status-0 { color: var(--bb-r-ink); }
.delivery-status .status-1, .signal_image .status-1,
.sweet .delivery-status .status-1, .sweet .signal_image .status-1 { color: var(--bb-y-ink); }

/* (b) V-01 Filter-/Sortierleiste mobil: sweet_crit.css macht `.productlist-page-nav-
   header-m` unter 768 px sticky (top 3.75rem, z 3) — ihr Containing Block ist aber
   die von header.tpl gebaute `.bb-plp-headrow` (195 px hoch): sie klebt also nur
   ~100 px lang und stand bei 2.500 px Scroll 2.200 px ueber dem Sichtfenster
   (13.09., 375x812, Pixel-7-UA, drei Kategorien). `display: contents` nimmt den
   Wrapper aus dem Layout, der Containing Block ist #result-wrapper (9.464 px);
   `top` ist die echte Headerhoehe (header.tpl setzt --bb-hdr-h aus #jtl-nav-wrapper,
   gemessen 111 px — 3.75rem = 52,5 px lag UNTER dem Header). Nach dem Umbau bei
   800/2.500/5.000 px Scroll: Leiste bei top 111 direkt unter dem Header, der
   Filter-Drawer oeffnet von dort (Kap. 13 unveraendert). Ab 768 px bleibt alles. */
@media (max-width: 767.98px) {
  .bb-plp-headrow { display: contents; }
  .productlist-page-nav-header-m { top: var(--bb-hdr-h, 111px); }
}

/* (c) V-02 Subkategorie-Chips: einzelne lange Woerter (ALUMINIUMGRINDER,
   HOLZGRINDER) brachen nicht um und liefen aus der Pille in die Nachbarkachel
   (4 von 24 Chips auf /HEADSHOP/Grinder mobil). Silbentrennung (html lang="de")
   plus Notumbruch; Kachel und Beschriftung duerfen schmaler als ihr Inhalt werden. */
.content-cats-small .caption a { overflow-wrap: anywhere; hyphens: auto; text-align: center; padding-inline: 4px; }
.content-cats-small .sub-categories, .content-cats-small .caption { min-width: 0; }

/* (d) V-06 Consent-Fingerabdruck `#consent-settings-btn` (JTL, fixed unten links,
   35x35 px) ueberdeckte mobil Badge, Ueberschrift und Produktkachel. Unter 992 px
   verborgen; den Weg zu den Datenschutz-Einstellungen traegt der Footer-Link
   (layout/footer.tpl, `.bb-cookie-settings`) — er klickt den JTL-Knopf per JS,
   dessen Handler feuert auch bei display:none (13.09. gemessen: Modal `active show`).
   Desktop unveraendert. Die 74 px, die die Buy-Bar dem Knopf freihielt (Kap. 7.12),
   entfallen mobil damit ebenfalls. */
@media (max-width: 991.98px) {
  #consent-settings-btn { display: none !important; }
  .bb-buybar { padding-left: 14px; }
}
.bb-cookie-settings {
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.bb-cookie-settings:hover, .bb-cookie-settings:focus-visible { color: var(--bb-g-action); }


/* N117 (2026-09-13) — Alternativen-Block auf ausverkauften PDPs (productdetails/details.tpl, Block
   include-stock): nur wenn Lageranzeige->nStatus = 0 und lieferbare aehnliche Artikel vorhanden sind.
   Beleg outputs/n117-alternativen-2026-09-13/LOG.md. Rollback: diesen Abschnitt entfernen, Bundle neu bauen. */
.bb-pdp__alt { margin-top: 14px; padding: 12px 14px; border: 1.5px solid var(--bb-line); border-radius: 14px; background: var(--bb-surface, #fff); }
.bb-pdp__alt-title { font-family: var(--bb-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--bb-ink-2); margin: 0 0 8px; }
.bb-pdp__alt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bb-pdp__alt-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bb-ink); }
.bb-pdp__alt-link:hover .bb-pdp__alt-name, .bb-pdp__alt-link:focus-visible .bb-pdp__alt-name { text-decoration: underline; }
.bb-pdp__alt-img { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; background: var(--bb-bg-2); flex: 0 0 56px; }
.bb-pdp__alt-body { display: grid; gap: 2px; min-width: 0; }
.bb-pdp__alt-name { font-size: 14px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bb-pdp__alt-price { font-family: var(--bb-font-mono); font-size: 13px; font-weight: 700; }
@media (min-width: 768px) {
  .bb-pdp__alt-list { grid-template-columns: repeat(3, 1fr); }
  .bb-pdp__alt-link { flex-direction: column; align-items: flex-start; }
  .bb-pdp__alt-img { width: 100%; height: 96px; flex-basis: auto; }
}