/* ============================================================
 * NOVAchild custom.css — GENERIERT aus css/custom/ (build-custom.sh)
 * NICHT direkt editieren: Modul in css/custom/ aendern, dann
 * `sh css/build-custom.sh` ausfuehren und BEIDES committen.
 * Workflow + Regeln: css/README-CSS.md
 * ============================================================ */


/* ============================================================
 * 1. ALLGEMEIN / TYPOGRAPHY / GLOBAL
 * ============================================================ */

body {
  font: normal 0.85em/1.3 Verdana,Helvetica,Arial,sans-serif !important;
}

html, body {
  overflow-x: hidden;
}

#content-wrapper {
  padding-top: 8px !important;
}


/* ============================================================
 * 2. HEADER / NAVIGATION / TOPBAR
 * ============================================================ */

#header-top-bar {
  display: inherit !important;
  z-index: 1000 !important;
}

#header-top-bar .container-fluid.d-lg-flex.flex-row-reverse {
  padding: 0 !important;
}

#jtl-nav-wrapper {
  height: 96px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 991.98px) {
  header .navbar-brand img {
    max-width: 30vw !important;
    height: revert-layer;
    margin: -6px 19px;
  }
}


/* ===== IP-Topbar (oben schwarz mit Custom-Text) ===== */

.ip-topbar-container {
  background-color: black;
  color: white;
  font-size: 14px;
  flex: 0 0 100%;
  max-width: 100%;
}

.ip-topbar-text {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding-right: 10px;
  align-items: center;
  min-height: 45px;
}

.ip-topbar-text-one {
  flex: 0 0 230px;
}

.ip-topbar-text-two {
  flex: 1 0 auto;
  text-align: center;
  justify-content: center;
  display: flex;
}

.ip-topbar-text-three a {
  color: white !important;
  text-decoration: underline !important;
}

@media only screen and (max-width: 700px) {
  .ip-topbar-text-one { display: none !important; }
}

@media only screen and (max-width: 1180px) {
  .ip-topbar-text-three { display: none !important; }
}

@media only screen and (max-width: 600px) {
  span.ip-topbar-txt-two {
    font-size: 12px;
    word-break: break-all;
    display: block;
    width: 100%;
  }
  span.ip-topbar-txt-two {
    font-size: 10px !important;
  }
}


/* ============================================================
 * 3. SUCHFELD (Header + Mobile)
 * ============================================================ */

input#search-header,
input#search-header-mobile-top {
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: #F8F8F8;
  color: #181819;
  background-color: #F8F8F8 !important;
}

button.btn.btn-secondary {
  border-top-right-radius: 20px !important;
  border-bottom-right-radius: 20px !important;
  border-color: #F8F8F8;
  background-color: #F8F8F8;
  color: #181819;
  box-shadow: none;
}

#search .form-control:focus {
  box-shadow: none;
}

input.form-control.ac_input.tt-hint {
  background: none !important;
}


/* ============================================================
 * 4. NAVIGATION — Abverkauf-Menüpunkt (Desktop: roter SALE-Pill)
 * ============================================================
 * 25.08.2026: Der alte Block hier stylte a[title="SALE"] — rot blinkend in
 * Reinrot #ff0000 mit hartkodiertem " -50%". Er war seit der Wawi-Umbenennung
 * der Kategorie TOT (0 Treffer im Live-HTML) und brandfremd -> entfernt.
 * Der echte Menüpunkt heißt heute "Abverkauf" (.dh-abv-nav, aus
 * categories_mega.tpl) und bekommt statt Text+Rähmchen einen gefüllten
 * Marken-Pill: SALE-Gefühl ohne Geblinke. Chip invertiert (weiß auf Rot).
 * Doppel-ID-Kette nötig wie beim Mobil-Block: #jtl-nav-wrapper
 * #mainNavigation ... .nav-link setzt die Menüfarbe mit !important. */
@media (min-width: 992px) {
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav {
    display: flex;
    align-items: center;
  }
  /* !important-Kette noetig: spaetere Module (u. a. 16-header-search-drawer)
     setzen background/border-radius auf nav-links ebenfalls mit Doppel-ID —
     bei gleicher Spezifitaet gewinnt sonst das spaetere Modul (25.08. am
     Live-Element gemessen: bg transparent, radius 9px statt Pill). */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--brand-primary, var(--brand-primary)) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 7px 12px 7px 16px !important;
    margin: 0 0 6px 10px !important;
    line-height: 1 !important;
    box-shadow: 0 1px 4px rgba(var(--brand-primary-rgb), 0.28) !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav > .nav-link:hover,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav > .nav-link:focus-visible {
    background: var(--brand-primary-dark, var(--brand-primary-dark)) !important;
    color: #fff !important;
    box-shadow: 0 3px 9px rgba(var(--brand-primary-rgb), 0.35) !important;
    transform: translateY(-1px);
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav > .nav-link:focus-visible {
    outline: 2px solid var(--brand-primary, var(--brand-primary));
    outline-offset: 2px;
  }
  /* Chip invertiert: weiß auf Rot — dauerhaft, nicht erst beim Hover */
  #jtl-nav-wrapper #mainNavigation .dh-abv-nav .dh-abv-nav__pct {
    background: #fff;
    color: var(--brand-primary, var(--brand-primary));
    border-color: #fff;
  }
}

/* ============================================================
 * 5. BREADCRUMB
 * ============================================================ */

.breadcrumb-item.breadcrumb-backtolist {
  display: inherit !important;
}

.breadcrumb-item.breadcrumb-backtolist::before {
  display: none !important;
  content: none !important;
}

.breadcrumb-wrapper {
  margin-bottom: 5px !important;
}



/* ============================================================
 * ABVERKAUF IN DER NAVIGATION — minimal, aber unübersehbar:
 * roter Menüpunkt + Hairline-Prozent-Chip (Live-Wert aus der DB).
 * Rendert nur bei aktiven Sonderpreisen (selbstabschaltend).
 * ============================================================ */

/* Desktop: Das Label folgt BEWUSST dem normalen Nav-Verhalten (dunkel,
   Hover rot wie alle Punkte) — ein dauerhaft rotes Label kollidierte mit der
   Hover-Sprache des Menues: kein Feedback beim Überfahren, und neben einem
   gehoverten Nachbarn sah es identisch aus (13.08. gemessen, User-Feedback).
   Die Prominenz traegt der CHIP; beim Hover invertiert er als Rueckmeldung. */
.dh-abv-nav .nav-link {
  font-weight: 700;
}
.dh-abv-nav__pct {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-primary, var(--brand-primary));
  background: transparent;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
/* Chip-Fuellung beim Hover nur MOBIL (dort ist der Punkt eine Tint-Zeile).
   Am Desktop ist der Pill dauerhaft gefuellt, der Chip dauerhaft invertiert —
   die Doppel-ID-Regeln in Abschnitt 4 uebersteuern das hier. */
@media (max-width: 991.98px) {
  .dh-abv-nav .nav-link:hover .dh-abv-nav__pct,
  .dh-abv-nav .nav-link:focus-visible .dh-abv-nav__pct {
    background: var(--brand-primary, var(--brand-primary));
    color: #fff;
    border-color: var(--brand-primary, var(--brand-primary));
  }
}

/* Mobil (Burger-Collapse): eigene, klar hervorgehobene Zeile — roter Tint,
   rotes Label, gefuellter Chip rechtsbuendig. Die ID-Kette ist noetig, weil
   die eigene Modul-01-Regel #jtl-nav-wrapper ... !important die Farbe setzt. */
@media (max-width: 991.98px) {
  #jtl-nav-wrapper .navbar-nav > .nav-item.dh-abv-nav {
    background: #fbe9e7;
  }
  /* Doppel-ID noetig: #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item >
     .nav-link !important setzt die Menuefarbe — zwei IDs schlagen eine
     (CDP-gemessen 13.08., zweiter Anlauf). */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-abv-nav > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item.dh-abv-nav > .nav-link {
    color: var(--brand-primary, var(--brand-primary)) !important;
    font-weight: 700;
  }
  .dh-abv-nav .nav-link > span {
    display: flex !important;
    align-items: center;
  }
  .dh-abv-nav .dh-abv-nav__pct {
    margin-left: auto;
    background: var(--brand-primary, var(--brand-primary));
    color: #fff;
    border-color: var(--brand-primary, var(--brand-primary));
  }
}

.dh-abv-nav-mobile { border-bottom: 1px solid #eee; }
.dh-abv-nav-mobile__link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fdf2f1;
  color: var(--brand-primary, var(--brand-primary)) !important;
  font-weight: 700;
  text-decoration: none;
}
.dh-abv-nav-mobile__bolt { flex: 0 0 auto; }
.dh-abv-nav-mobile__text { flex: 1 1 auto; }
.dh-abv-nav-mobile .dh-abv-nav__pct { margin-left: auto; }
/* ============================================================
 * 6. PRODUCT LIST / KATEGORIE-SEITE
 * ============================================================ */

.text-clamp-2 {
  display: block !important;
  font-size: 14px;
  text-decoration: none;
  padding-top: 3px;
}

:is(#product-list, .opc-ProductStream) .price.productbox-price {
  color: var(--brand-primary) !important;
}

.productbox-title {
  min-height: 69px !important;
}

:is(#product-list, .opc-ProductStream) .product-wrapper {
  margin-bottom: 5rem;
}

.productlist-variation-rating {
  font-size: 12px;
  color: var(--brand-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.gallery, .list {
  align-items: flex-start !important;
}

.item-slider-price .suggested-price.value.text-nowrap-util {
  display: none;
}

.ribbon-1 {
  background-color: #121212;
  color: white;
}


/* ===== Kategorie-Bilder mit Hover-Zoom ===== */

.cat-image {
  overflow: hidden;
  border-radius: 13px;
}

.cat-image img {
  transition: transform 0.5s ease;
  transform-origin: center;
  display: block;
  width: 100%;
  height: auto;
}

.cat-image img:hover {
  transform: scale(1.3);
}


/* ============================================================
 * 7. PRODUCT DETAILS — PREIS / RATING / SCHEMA
 * ============================================================ */

.rating {
  color: #ffa41c !important;
}

.suggested-price {
  text-decoration: line-through;
}

.price.h1 {
  color: #d50000 !important;
  font-weight: 700;
}

.yousave {
  background-color: #db2727;
  color: white !important;
  padding: 4px 13px;
  border-radius: 3px;
  font-size: 11px;
}

#product-offer .product-info .product-offer > .row {
  margin-bottom: 0 !important;
}

#product-offer .product-info .product-offer {
  margin-bottom: 1px !important;
}

#product-offer .product-info .shortdesc {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

#product-offer .price_wrapper {
  margin: 17px 1px !important;
  display: flex;
  justify-content: left;
  align-items: center;
  flex-wrap: wrap;
}

.price_wrapper {
  margin-bottom: 2px !important;
}

.price_wrapper .price {
  display: inherit;
  font-weight: 400 !important;
}

.price_wrapper > * {
  margin: 0 2px;
}

.shippingtaxinfo {
  letter-spacing: 0px;
  font-size: 11px;
}

.price-note .shipment {
  color: #1c871e;
  font-weight: bold;
  letter-spacing: 0px;
}

.discount {
  border: 1px solid #4b8424;
  background-color: #d0f0d0;
  padding: 5px;
  width: fit-content;
  border-radius: 6px;
}

.product-attributes .badge.badge-primary {
  background-color: #fff0;
  color: black;
}

.product-title.h2 {
  font-weight: bold;
}

.shortdesc ul {
  padding: 0 !important;
  padding-top: 12px;
}

/* info-essential: Mehrfach-Definitionen — letzte gewinnt (display: inherit) */
.info-essential.list-unstyled {
  display: none;
  margin: 0 !important;
  font-size: 12px;
  opacity: 0.4;
  display: inherit !important;
}

.footnote-reference,
.footnote-vat {
  display: none;
}


/* ===== Bild-Galerie / Slider ===== */

#image_wrapper {
  margin-bottom: 25px !important;
}

#image_wrapper #gallery {
  margin-bottom: 7px !important;
}

.slick-track a {
  text-decoration: none;
}

.slick-dots li {
  display: none !important;
}

.product-detail-image-preview-bar .slick-arrow {
  width: 44px !important;
  min-width: 44px !important;
  height: 66px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.product-detail-image-preview-bar .slick-arrow::after {
  color: var(--color-text, #111827) !important;
  font-family: "Font Awesome 5 Free" !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.js-slider-wrapper .js-slider-items .js-slider-item {
  width: inherit !important;
  min-width: calc(100%/9) !important;
}

@media (max-width: 768px) {
  .product-detail-image-preview-bar .product-thumbnails-wrapper {
    display: block !important;
  }
  .product-detail-image-preview-bar .product-thumbnails {
    display: flex !important;
    overflow-x: auto;
  }
  .product-detail-image-preview-bar .square.square-image {
    flex: 0 0 auto;
    width: 80px;
    margin-right: 10px;
  }
}


/* ===== Variationen / Swatches ===== */

.swatches-image img {
  padding: 0rem !important;
}

.swatches-image {
  border: 1px solid black !important;
  border-radius: 50% !important;
}

.swatches-image.active {
  border: 2px solid var(--brand-primary) !important;
}

.swatches-text {
  padding: 0.625rem 6px !important;
  border-radius: 5px;
  border: 1px solid #525252;
}

.swatches-text.active {
  border: 1px solid #090909 !important;
  background-color: var(--brand-primary) !important;
  font-weight: 500 !important;
  color: white !important;
}

.variation.swatches.swatches-text:hover {
  background-color: #d7d5d5;
}

.row.variations.switch-variations {
  border: 1px solid #0000002e;
  background-color: #eae8e81a;
  padding: 12px 6px;
  border-radius: 7px;
  margin: 0px auto;
}

.alert.choose-variations.alert-info {
  width: fit-content;
  background-color: white;
  font-weight: bold;
  letter-spacing: -1px;
}


/* ===== Stock / Lagerbestand ===== */

.row.stock-information.stock-information-p.no-gutters {
  border: none !important;
  padding: 0px !important;
}

.delivery-status .status,
.delivery-status .status-1,
.signal_image .status-1 {
  color: #1C871E !important;
}

.delivery-status .status {
  color: #2a952a !important;
}


/* ===== Free-Shipping-Label ===== */

.col.col-12.freeshippinglabel {
  color: #2a952a;
}


/* ============================================================
 * 8. CUSTOM COMPONENTS — rothler-eigene Bausteine
 * ============================================================ */

/* ===== Liebenauch Tag ===== */

.liebenauch {
  display: flex;
  align-items: center;
  background-color: #f6f4ec;
  color: black;
  margin-top: 5px;
  margin-bottom: 5px;
  width: fit-content;
  padding: 8px 11px;
  border-radius: 10px;
}

.text_liebenauch {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  padding-left: 10px;
  letter-spacing: 0px;
}


/* ===== Trust-Image (Trust-Section) ===== */

.trust-image {
  width: 35px;
  height: 35px;
}


/* ===== Item-Status / Currentcards (gruener Punkt mit Pulse) ===== */

.item-status-currentcards {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #333;
  margin: 16px 1px;
}

.green-icon-currentcards {
  width: 12px;
  height: 12px;
  background-color: #008000;
  border-radius: 50%;
  margin-right: 5px;
  box-shadow: 0 0 11px #008000;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}


/* ===== Raumgroesse-Box ===== */

.raumgroesse {
  background-color: #fffff4;
  width: fit-content;
  padding: 5px;
  margin: 8px 0px;
  border: 0.5px #d2d2d2 solid;
}

.wleistung {
  font-weight: bold;
  font-size: 18px;
}


/* ===== Gewerbe-Hinweis (div-gtewhl) ===== */

.div-gtewhl {
  background-color: #f7faf8;
  padding: 14px;
  text-align: center;
  margin: 21px 0px;
}

span.spangtwhl {
  color: #7fd37f;
  font-weight: 600;
}


/* ===== Coupon-Copy-Box ===== */

.copycoupon {
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 10px 20px;
  color: var(--brand-primary);
  margin-top: 15px;
  border: 1px solid var(--brand-primary);
}

.discount-text1 {
  margin-right: 10px;
}

.copy-button1 {
  background: var(--brand-primary);
  color: white;
  display: flex;
  align-items: center;
  padding: 9px 15px;
  border: none;
}

.copy-icon2 {
  margin-left: 5px;
}


/* ===== Checkout-Container (Trust-Section) ===== */

.checkout-container {
  padding: 16px 1px;
}

.checkout-list {
  padding: 0;
}

.checkout-item {
  list-style: none;
  margin-bottom: 5px;
  font-size: 11px;
}

.checkout-icon {
  font-size: 1.3em;
  margin-right: 1px;
  width: 25px;
}


/* ===== Abholung-Neuss-Image ===== */

.product-thumbnails.abholung-neuss-image {
  margin: 28px 0px;
}


/* ============================================================
 * 9. WARENKORB / BASKET
 * ============================================================ */

.basket .basket-items {
  margin-bottom: 2px !important;
}

.cart-items-body .cart-items-name {
  text-decoration: none;
}

.rt-basket-delivery {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: #0a7c66;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.rt-basket-delivery__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 999px;
  background: #0a7c66;
  box-shadow: 0 0 0 3px rgba(10, 124, 102, 0.11);
}

.rt-basket-delivery strong {
  color: var(--color-text, #0f172a);
  font-weight: 700;
}

.rt-basket-delivery--planned {
  color: var(--color-text-muted, #4b5563);
}

.rt-basket-delivery--planned .rt-basket-delivery__dot {
  background: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.11);
}

.row.basket-summary-notice.basket-summary-top {
  display: none;
}

#alert-list .alert[data-key="orderAmountStock"] {
  display: none !important;
}

#cart-continue-button-top {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#cart-checkout-btn,
#cart-checkout-btn2 {
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0 19px 25px -17px #021f3f4d !important;
}

a#cart-checkout-btn2 {
  width: 100%;
  margin-bottom: 27px;
}

@media screen and (max-width: 767px) {
  a#cart-checkout-btn2 {
    font-size: 20px;
  }
}


/* ===== Cart Edit Panels ===== */

#panel-edit-comment,
#panel-edit-coupon {
  display: none;
}


/* ===== Mini-Cart Dropdown ===== */

.dropdown-body .cart-dropdown-total-item {
  display: none;
}


/* ============================================================
 * 10. CHECKOUT
 * ============================================================ */

#checkout .h1 {
  font-weight: bold;
}

#checkout .btn-primary {
  height: 66px;
  box-shadow: 0 19px 25px -17px #021f3f4d !important;
  border-radius: 6px;
}

.nav.stepper.checkout-steps {
  margin-bottom: 14px !important;
}

.col.checkout-warenkorb {
  margin-top: 19px;
  height: fit-content;
  background-color: #f9f9f969;
  padding: 13px;
  border-radius: 2px;
  border: 1px solid #e4e4e470;
}

.col.checkout-warenkorb .basket-summary-total {
  font-size: 1.3rem;
  color: black;
}

.image-checkout-1 img {
  border-radius: 8px;
  border: 1px solid #d9d9d9;
}

.image-checkout-qty {
  position: absolute;
  top: -5px;
  right: 11px;
  background-color: #00000094;
  color: white;
  padding: 3px 7px;
  border-radius: 50%;
  font-weight: 600;
}

#shipping-method .small.text-muted-util {
  display: none;
}


/* ===== Zahlungsoptionen (Plugin-IDs) ===== */

#kPlugin_76_paypalkreditkarte,
#kPlugin_79_klarnasliceit,
#kPlugin_79_klarnapaynow,
#kPlugin_79_klarnapaylater,
#kPlugin_79_oneklarna,
#za_ueberweisung_jtl,
#za_barzahlung_jtl,
#za_ppc_sofort,
#za_ppc_giropay,
#za_ppc_sepa,
#za_ppc_paylater,
#za_ppc_paypal,
#kPlugin_1_rechnungskaufmitratepay,
#kPlugin_1_paypalkreditkarte,
#kPlugin_5_oneklarna {
  border: 1px solid #c4c4c457;
  background-color: #f0f0f036;
  padding: 8px;
  border-radius: 3px;
}

.checkout-shipping-form-options.form-group > div {
  border: 1px solid #c4c4c4;
  background-color: #f0f0f03d;
  border-radius: 8px;
  padding: 25px 29px;
}


/* ===== Register-Form ===== */

#form-register .row.register-form-account {
  display: none;
}

#form-register div.h3 {
  font-size: 1.7rem;
}

#form-register .form-control {
  padding: 0.4rem 1.4rem !important;
  border-radius: 5px;
  border: 1px solid #00000021;
}

#form-register .form-control:focus-visible {
  border: 2px solid black;
}

#customer {
  padding-bottom: 29px;
}


/* ============================================================
 * 11. FOOTER
 * ============================================================ */

#footer {
  padding: 0;
}

#copyright {
  display: none;
}

.treibtunsan .col {
  padding: 0;
}


/* ============================================================
 * 12. BLOG / NEWS
 * ============================================================ */

.newsbox.blog-preview {
  padding: 0 !important;
}

.newsbox-headline {
  text-decoration: none;
}

.newsbox-footer {
  display: none;
}

.blog-overview .blog-overview-preview .blog-overview-preview-item {
  margin-bottom: 1rem !important;
}

#newsContent .blog-overview-preview-item {
  border: 1px solid #d8d8d8;
  margin: 1px auto;
  margin-bottom: 1px;
  padding: 6px 53px;
  border-radius: 8px;
}


/* ============================================================
 * 13. FORM CONTROLS / DROPDOWNS
 * ============================================================ */

.form-row > .col,
.form-row > [class*="col-"] {
  padding-right: 2px !important;
  padding-left: 2px !important;
}

.bootstrap-select.custom-select button.dropdown-toggle,
.bootstrap-select.custom-select button:not(.navbar-toggler)[data-toggle="collapse"] {
  border-radius: 11px;
}

.btn.dropdown-toggle.bs-placeholder.btn-light {
  border-radius: 11px;
  opacity: 0.5;
}

.dropdown-menu.show {
  font-size: 11px;
  border-radius: 12px;
}

.filter-option {
  font-size: 11px;
}

.dropdown-toggle[aria-expanded="true"]::after,
:not(.navbar-toggler)[data-toggle="collapse"][aria-expanded="true"]::after {
  display: none;
}

.box-filter-characteristics .filter-search-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
}

.btn-animated .btn-outline-primary:hover {
  color: white;
}


/* ============================================================
 * 14. REVIEW / BEWERTUNGEN
 * ============================================================ */

.review .col.col-auto.text-center-util {
  padding: 0;
}

.card-body {
  padding: 9px;
}

.card.card-gray {
  margin-top: 11px;
}


/* ============================================================
 * 15. COOKIE-CONSENT-BANNER
 * ============================================================ */

/* "Alle akzeptieren" — DOMINANTE Primär-CTA: groß, gefüllt Brand, zieht den Klick */
#consent-banner-btn-all {
  background: var(--brand-primary) !important;
  color: #fff !important;
  border: 1px solid var(--brand-primary) !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  padding: 15px 22px !important;
  letter-spacing: .2px !important;
  box-shadow: 0 6px 18px rgba(var(--brand-primary-rgb), .30) !important;
}
#consent-banner-btn-all:hover { background: var(--brand-primary-dark, #6f0807) !important; border-color: var(--brand-primary-dark, #6f0807) !important; }

/* "Konfigurieren" + "Ablehnen" — sichtbar, aber klar SEKUNDÄR (gedämpft, kleiner).
   RECHTLICH: Ablehnen ist vorhanden & 1 Klick = gleich leicht erreichbar. */
#consent-banner-btn-settings,
#consent-banner-btn-close {
  background: transparent !important;
  color: var(--color-text-soft, #98a2b3) !important;
  border: 1px solid #e4e7ec !important;
  border-radius: 9px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  max-width: 320px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#consent-banner-btn-settings:hover,
#consent-banner-btn-close:hover {
  background: var(--color-surface-soft, #f9fafb) !important;
  color: var(--color-text-muted, #475467) !important;
  border-color: #d0d5dd !important;
}

/* Ablehnen (3. Button) sichtbar lassen — war versteckt (rechtlich heikel) */
.consent-btn-helper div:nth-of-type(3) { display: block !important; }

/* schwebenden Settings-Cog ausgeblendet lassen */
#consent-settings-btn { display: none !important; }

/* === BACKDROP + ZENTRIERTER MODAL ===
   Seite abdunkeln -> Banner unübersehbar, Fokus auf die rote CTA.
   Nur solange der Banner offen ist (.active OHNE .mini). Nach der Wahl
   setzt die Consent-JS .mini -> Backdrop & Modal-Zentrierung fallen weg. */
#consent-manager.active:not(.mini) {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 16px !important;
  background: rgba(16, 24, 40, .55) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1100 !important;
  overflow-y: auto !important;
}
#consent-manager.active:not(.mini) #consent-banner {
  max-width: 560px !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35) !important;
  max-height: 92vh !important;
  overflow-y: auto !important;
}
/* Modal-Innenlayout: Text oben, Buttons gestapelt darunter (Accept dominant oben) */
#consent-manager.active:not(.mini) .consent-banner-body {
  flex-direction: column-reverse !important;
}
/* Fingerabdruck-Icon: dekorativ + absolut positioniert -> überlappte im schmalen
   Modal den Text (und static brach den Paint). Im Modal ausblenden, Titel führt. */
#consent-manager.active:not(.mini) .consent-banner-icon {
  display: none !important;
}


/* ============================================================
 * 16. MODALS / OVERLAYS
 * ============================================================ */

.modal-backdrop {
  z-index: 999 !important;
}


/* ============================================================
 * 17. ROTHLER-PRICE v8 — Balanced (visuell + dezent)
 * Pill mit hellem bg, kein Gradient/Shadow, Icons subtil
 * ============================================================ */

.price_wrapper {
  text-align: left !important;
  display: block !important;
  margin: 14px 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.rothler-price-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  margin-top: 4px;
}

/* === Save-Zeile === */
.rothler-save-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  line-height: 1.3;
}

.rothler-uvp {
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
}

.rothler-uvp s {
  text-decoration: line-through;
  text-decoration-color: var(--color-text-soft, #9ca3af);
  text-decoration-thickness: 1.5px;
  color: var(--color-text-soft, #6b7280);
}

/* Pill: helles bg, dunklerer Text, klare Border — kein Gradient */
.rothler-pill {
  display: inline-flex;
  align-items: center;
  background: #fef2f2;
  color: #991b1b;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #fecaca;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

.rothler-save-amt {
  color: var(--color-text-muted, #4b5563);
}

.rothler-save-amt strong {
  font-weight: 700;
  color: var(--color-text, #1f2937);
}

/* === Hauptpreis: Burgund, dezent === */
.price_wrapper .price.h1 {
  font-size: 2.25rem !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  color: #991b1b !important;
  letter-spacing: -1.2px !important;
  margin: 4px 0 4px 0 !important;
  display: block !important;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
}

/* === Trust === */
.rothler-trust {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--color-text-muted, #4b5563);
  margin-top: 4px;
}

.rothler-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.rothler-trust-item svg {
  flex-shrink: 0;
  stroke: var(--color-text-soft, #9ca3af);
}



/* === Mobile === */
@media (max-width: 768px) {
  .price_wrapper .price.h1 {
    font-size: 1.85rem !important;
    letter-spacing: -1px !important;
  }
  .rothler-save-row {
    font-size: 12.5px;
    gap: 8px;
  }
  .rothler-pill {
    font-size: 12px;
    padding: 2px 9px;
  }
  .rothler-trust {
    gap: 12px;
    font-size: 12.5px;
  }
}

@media (max-width: 480px) {
  .price_wrapper .price.h1 {
    font-size: 1.65rem !important;
  }
}

/* JTL-Standards ausblenden */
.price_wrapper > .suggested-price,
.price_wrapper > .yousave,
.price_wrapper .price-note > .suggested-price,
.price_wrapper .price-note > .yousave,
.price_wrapper .vat_info,
.price-note .vat_info {
  display: none !important;
}


/* ============================================================
 * 18. ATC + QUANTITY — Premium Conversion
 * - ATC etwas hoeher fuer mehr Praesenz
 * - Quantity schmaler (28%), ATC breiter (72%)
 * - Subtle premium shadow + smooth hover-lift
 * ============================================================ */

/* Spalten-Breiten: ATC dominant */
#add-to-cart > .row > .col-sm-12:first-child,
#add-to-cart > .row > .col-12.col-sm-12:first-child {
  flex: 0 0 28% !important;
  max-width: 28% !important;
  padding-right: 6px;
}

#add-to-cart > .row > .col-sm-12:nth-child(2),
#add-to-cart > .row > .col-12.col-sm-12:nth-child(2) {
  flex: 0 0 72% !important;
  max-width: 72% !important;
  padding-left: 6px;
}

@media (max-width: 575px) {
  #add-to-cart > .row > .col-sm-12:first-child,
  #add-to-cart > .row > .col-sm-12:nth-child(2),
  #add-to-cart > .row > .col-12.col-sm-12:first-child,
  #add-to-cart > .row > .col-12.col-sm-12:nth-child(2) {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
  }
}

/* Quantity: gleiche Hoehe, klares Styling */
#quantity-grp {
  height: 64px !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--color-line, #e5e7eb);
}

#quantity-grp .btn,
#quantity-grp .input-group-text,
#quantity-grp input {
  height: 64px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: 0 !important;
  background: white !important;
}

#quantity-grp input.quantity {
  text-align: center !important;
  color: var(--color-text, #1f2937) !important;
  font-size: 18px !important;
}

#quantity-grp .btn:hover {
  background: var(--color-surface-soft, #f3f4f6) !important;
  color: var(--color-text, #1f2937) !important;
}

#quantity-grp .btn:active {
  background: var(--color-line, #e5e7eb) !important;
}

#quantity-grp .input-group-text.unit {
  color: var(--color-text-soft, #9ca3af) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* === ATC-BUTTON: Premium, prominent === */
#add-to-cart .btn-primary {
  height: 64px !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: 0.3px !important;
  border-radius: 10px !important;
  box-shadow:
    0 10px 24px -10px rgba(var(--brand-primary-rgb), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  text-transform: none !important;
}

#add-to-cart .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px -10px rgba(var(--brand-primary-rgb), 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#add-to-cart .btn-primary:active {
  transform: translateY(0);
  box-shadow:
    0 6px 14px -6px rgba(var(--brand-primary-rgb), 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#add-to-cart .btn-primary .btn-basket-check {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

#add-to-cart .btn-primary .btn-basket-check span {
  display: inline-flex !important;
  align-items: center;
}

#add-to-cart .btn-primary .fas.fa-shopping-cart {
  font-size: 19px !important;
  opacity: 0.95;
}

@media (max-width: 575px) {
  #add-to-cart .btn-primary {
    font-size: 16px !important;
  }
  #quantity-grp,
  #add-to-cart .btn-primary {
    height: 58px !important;
  }
  #quantity-grp .btn,
  #quantity-grp input {
    height: 58px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #add-to-cart .btn-primary {
    transition: none !important;
  }
  #add-to-cart .btn-primary:hover {
    transform: none;
  }
}

/* ============================================================
 * 19. TRUST-SECTION PDP — Vertical Stack
 * - Icon OBEN, Text DRUNTER → schmal, 4 in 1 Zeile
 * - Texte komplett ohne ellipsis
 * - Mobile bleibt 2x2 horizontal
 * ============================================================ */

.rothler-trust-section {
  margin: 18px 0 8px;
  padding: 16px 0 0;
  border-top: 1px solid #f1f5f9;
}

.rothler-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
}

/* Vertical-Stack: Icon oben, Text mittig drunter */
.rothler-trust-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 10px;
  background: transparent;
  transition: background 0.18s ease, transform 0.18s ease;
  min-width: 0;
}

.rothler-trust-card:hover {
  background: #f0f7ff;
  transform: translateY(-1px);
}

.rothler-trust-iconwrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: var(--brand-primary);
  flex-shrink: 0;
  transition: background 0.18s ease;
}

.rothler-trust-card:hover .rothler-trust-iconwrap {
  background: #dbeafe;
}

.rothler-trust-iconwrap svg {
  width: 20px;
  height: 20px;
}

.rothler-trust-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.rothler-trust-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text, #1f2937);
  display: block;
  margin-bottom: 2px;
  letter-spacing: -0.1px;
}

.rothler-trust-text span {
  font-size: 11px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
}

/* Mobile: Stack 2 Spalten */
@media (max-width: 576px) {
  .rothler-trust-section {
    margin: 14px 0;
    padding-top: 12px;
  }
  .rothler-trust-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .rothler-trust-card {
    padding: 10px 6px;
  }
  .rothler-trust-iconwrap {
    width: 34px;
    height: 34px;
  }
  .rothler-trust-iconwrap svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rothler-trust-card {
    transition: none;
  }
  .rothler-trust-card:hover {
    transform: none;
  }
}

/* === Fix: Kostenloser Versand match Verfuegbar (konsistent JTL-Style) === */
.rothler-trust-ship {
  color: #1c871e !important;
  font-weight: 500 !important;
}
.rothler-trust-ship svg {
  stroke: #1c871e !important;
}

/* ============================================================
 * 20. PRODUCTLIST-BOX — UVP + Spacing Polish (TODO 6 polish)
 * ============================================================ */

/* UVP-struck oben in Box (kleinformat) */
.rothler-box-uvp {
  font-size: 12px;
  color: var(--color-text-soft, #9ca3af);
  margin-bottom: -2px;
  line-height: 1.2;
}
.rothler-box-uvp-strike {
  text-decoration: line-through;
  text-decoration-color: #cbd5e1;
}

/* 'Ab' Label + Preis auf einer Linie statt 2 */
.productbox-price.price,
.price.productbox-price {
  display: inline-block !important;
}

.price_label.pricestarting,
.price_label.nowonly {
  display: inline-block !important;
  margin-right: 4px;
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
  vertical-align: baseline;
}

/* Preis-Wrapper in Box — kompakter */
.product-wrapper :is(.productbox-offer, .item-slider-price) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 576px) {
  .rothler-box-uvp {
    font-size: 11px;
  }
  .price_label.pricestarting {
    font-size: 12px;
  }
}

/* ============================================================
 * 20. PRODUCTLIST-BOX — Layout + Spacing (TODO 6 final)
 * Variations + Sterne + Bewertungs-Anzahl
 * 'Ab' + Preis auf einer Linie
 * ============================================================ */

/* Rating-Wrap: Sterne + Anzahl inline */
.rothler-rating-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rothler-rating-count {
  font-size: 11px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
}

/* productlist-variation-rating: Grid Variations links, Rating rechts */
.productlist-variation-rating {
  font-size: 12px;
  color: var(--brand-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
}

/* 'Ab' + Preis inline statt 2 Zeilen */
.productbox-price.price,
.price.productbox-price {
  display: inline-block !important;
}

.price_label.pricestarting,
.price_label.nowonly {
  display: inline-block !important;
  margin-right: 4px;
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
  vertical-align: baseline;
}

/* Preis-Block in product-wrapper kompakter */
.product-wrapper :is(.productbox-offer, .item-slider-price) {
  margin-top: 4px;
}

/* Mobile */
@media (max-width: 576px) {
  .productlist-variation-rating {
    font-size: 11px;
  }
  .rothler-rating-count {
    font-size: 10px;
  }
  .price_label.pricestarting {
    font-size: 12px;
  }
}

/* ============================================================
 * 20. PRODUCTLIST-BOX — Layout + Spacing final
 * ============================================================ */

/* Variations + Rating Zeile: kompakt */
.productlist-variation-rating {
  font-size: 12px;
  color: var(--brand-primary);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
}

/* Sterne + Bewertungs-Anzahl inline */
.rothler-rating-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rothler-rating-count {
  font-size: 11px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
}

/* 'Ab' + Preis auf einer Linie, kompakt */
.product-wrapper :is(.productbox-offer, .item-slider-price) {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Slider-Karte: Preiszeile mittig wie der Rest der Kachel.
   Sterne, Titel und Lagerzeile stehen zentriert; die Preiszeile ist ein
   Flex-Container, dort entscheidet align-items — nicht text-align. Die Regel
   direkt darueber setzt `baseline` und laesst den Preis links kleben.
   MUSS deshalb NACH ihr stehen und gleich spezifisch sein (.product-wrapper
   davor) — ein blosses `.item-slider-price` verliert die Kaskade (12.08.2026
   im Browser nachgemessen).
   .productbox-offer der Kategorieseite bleibt bewusst unberuehrt: dort steht
   die Kachel im Raster und ist durchgehend linksbuendig. */
.product-wrapper .item-slider-price {
  align-items: center;
}

.price_label.pricestarting,
.price_label.nowonly {
  display: inline-block !important;
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
  margin: 0 !important;
}

.productbox-price.price,
.price.productbox-price {
  display: inline-block !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

/* Karten-Title kompakter */
.productbox-title {
  min-height: 52px !important;
  margin-bottom: 4px !important;
}

.product-wrapper {
  margin-bottom: 2.5rem !important;
}

@media (max-width: 576px) {
  .productlist-variation-rating {
    font-size: 11px;
  }
  .rothler-rating-count {
    font-size: 10px;
  }
  .price_label.pricestarting {
    font-size: 12px;
  }
  .productbox-price.price {
    font-size: 1rem !important;
  }
}

/* ============================================================
 * 21. CHECKOUT wk=1 — Login-Box minimieren + Layout (TODO 7)
 * Login-Box kompakt + dezent, Form prominent
 * ============================================================ */

/* Login-Box als minimal Toggle-Card */
.checkout-existing-customer,
[id*="existing-customer"],
.checkout-registrierung ~ .col,
.checkout-warenkorb ~ .checkout-existing-customer {
  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 10px;
  padding: 14px 16px !important;
  margin-bottom: 14px;
}

.checkout-existing-customer .h2,
.checkout-existing-customer h2,
.checkout-existing-customer .heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  color: var(--color-text-muted, #374151) !important;
}

.checkout-existing-customer .form-control,
.checkout-existing-customer input[type="email"],
.checkout-existing-customer input[type="password"] {
  font-size: 13px !important;
  padding: 8px 12px !important;
  height: auto !important;
}

.checkout-existing-customer .btn,
.checkout-existing-customer button[type="submit"] {
  font-size: 13px !important;
  padding: 8px 16px !important;
  font-weight: 600 !important;
}

.checkout-existing-customer .form-group {
  margin-bottom: 8px !important;
}

/* Mini-Cart (checkout-warenkorb) bleibt prominent rechts */
.col.checkout-warenkorb {
  position: sticky;
  top: 20px;
}

/* Mobile: Login-Box voll kompakt */
@media (max-width: 768px) {
  .checkout-existing-customer {
    padding: 12px 14px !important;
  }
}

/* ============================================================
 * 22. CHECKOUT step0 wk=1 — Production-Style Layout
 * Express Checkout oben + 2 Spalten + Login-Toggle unten
 * ============================================================ */

/* Container — Mini-Cart sticky rechts */
.rothler-checkout-row {
  position: relative;
}

.rothler-checkout-cart-col {
  position: relative;
}

@media (min-width: 992px) {
  .rothler-checkout-cart-col > * {
    position: sticky;
    top: 20px;
  }
}

/* Express Checkout Block */
.rothler-express-block {
  text-align: center;
  margin: 0 0 24px 0;
}

.rothler-express-label {
  font-size: 14px;
  color: var(--color-text-soft, #6b7280);
  margin-bottom: 12px;
  font-weight: 500;
}

.rothler-express-buttons-slot {
  min-height: 50px;
  margin-bottom: 18px;
}

.rothler-express-buttons-slot:empty {
  min-height: 0;
}

/* ODER-Trenner */
.rothler-or-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--color-text-soft, #9ca3af);
}

.rothler-or-divider hr {
  flex: 1;
  border: none;
  height: 1px;
  background: var(--color-line, #e5e7eb);
  margin: 0 16px;
}

.rothler-or-divider span {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-text-soft, #9ca3af);
}

/* Login-Toggle unten — sehr minimal */
.rothler-login-section {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line, #e5e7eb);
}

.rothler-login-toggle-bar {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
}

.rothler-login-toggle-text {
  margin-right: 6px;
}

.rothler-login-toggle-link {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
}

.rothler-login-toggle-link:hover {
  text-decoration: underline;
}

.rothler-login-collapse {
  margin-top: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Mini-Cart Wrapper visuell aufwerten */
.rothler-mini-cart {
  background: #ffffff;
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 0;
}

.rothler-cart-total {
  background: #ffffff;
  border: 1px solid var(--color-line, #e5e7eb);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 14px 16px;
  font-size: 16px;
  margin: 0;
}

.rothler-cart-total .total-sum {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #111827);
}

/* Mobile: Cart oben */
@media (max-width: 991px) {
  .rothler-checkout-cart-col {
    order: -1;
    margin-bottom: 20px;
  }
  .rothler-express-buttons-slot {
    margin-bottom: 14px;
  }
}

/* ============================================================
 * 23. CHECKOUT wk=1 — MAXIMUM POLISH PASS
 * Premium Cards, klare Hierarchie, Mobile-First, Conversion-Optimiert
 * ============================================================ */

/* ─── A) Page-Background fuer Checkout-Kontext ─────────────── */
body.bestellvorgang,
body[class*="checkout"] {
  background: #f5f7fa;
}

/* Trustbar oben — Sichere Bezahlung + Trustpilot kompakt */
.checkout-topbar,
.layout-header-checkouttopbar {
  background: #ffffff;
  border-bottom: 1px solid var(--color-line, #e5e7eb);
  padding: 10px 0;
}

/* ─── B) Step-Indicator (1-2-3) aufgewertet ────────────────── */
.checkout-steps .nav-link,
ul.nav.nav-tabs .nav-link {
  font-size: 14px;
  font-weight: 600;
}

/* ─── C) Express Checkout Block ─────────────────────────────── */
.rothler-express-block {
  text-align: center;
  margin: 0 0 28px 0;
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.rothler-express-label {
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
  margin-bottom: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.rothler-express-buttons-slot {
  min-height: 50px;
  margin-bottom: 0;
}

.rothler-express-buttons-slot:empty {
  display: none;
}

/* Wenn slot leer ist, Block ganz verstecken */
.rothler-express-block:has(.rothler-express-buttons-slot:empty) {
  display: none;
}

/* Fallback fuer Browser ohne :has() (via JS class) */
.rothler-express-block.is-empty {
  display: none !important;
}

.rothler-or-divider {
  display: flex;
  align-items: center;
  margin: 18px 0 0 0;
  color: var(--color-text-soft, #9ca3af);
}

.rothler-or-divider hr {
  flex: 1;
  border: none;
  height: 1px;
  background: var(--color-line, #e5e7eb);
  margin: 0 14px;
}

.rothler-or-divider span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--color-text-soft, #9ca3af);
}

/* ─── D) Form-Sections als Cards ────────────────────────────── */
/* Wrapper-Card fuer das gesamte Form */
.checkout-register-form {
  background: #ffffff;
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Heading "Rechnungs- und Lieferadresse" — H1 */
.checkout-register-form .h1,
.checkout-register-form h1,
.inc-billing-address-form > h1,
.checkout-register-form > .h2:first-child {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-text, #111827) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

/* Pflichtfelder-Hinweis */
.checkout-register-form p,
.inc-billing-address-form p {
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
  margin-bottom: 24px;
}

/* Section-Titles (Name, Rechnungsadresse, Kontaktdaten) */
.checkout-register-form .h2,
.checkout-register-form fieldset > legend,
.checkout-register-form fieldset > .h2,
.checkout-register-form fieldset > .h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--color-text, #111827) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 24px 0 14px 0 !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--color-surface-soft, #f3f4f6) !important;
}

.checkout-register-form fieldset:first-of-type > .h2:first-child,
.checkout-register-form fieldset:first-of-type > .h3:first-child {
  margin-top: 0 !important;
}

/* ─── E) Form-Inputs Premium-Styling ────────────────────────── */
.checkout-register-form .form-control,
.checkout-register-form input[type="text"],
.checkout-register-form input[type="email"],
.checkout-register-form input[type="tel"],
.checkout-register-form input[type="password"],
.checkout-register-form select {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--color-text, #111827) !important;
  height: auto !important;
  min-height: 46px !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

.checkout-register-form .form-control:focus,
.checkout-register-form input:focus,
.checkout-register-form select:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12) !important;
  outline: none !important;
}

/* Float-Labels */
.checkout-register-form .form-group {
  margin-bottom: 14px !important;
}

.checkout-register-form .form-label-group,
.checkout-register-form .form-floating {
  position: relative;
}

.checkout-register-form .form-label-group label,
.checkout-register-form .form-floating label,
.checkout-register-form label {
  font-size: 13px !important;
  color: var(--color-text-soft, #6b7280) !important;
  font-weight: 500 !important;
}

/* Checkbox "Lieferadresse entspricht..." sichtbarer */
.checkout-register-form .form-check,
.checkout-register-form .control-toggle {
  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 20px 0;
}

.checkout-register-form .form-check label,
.checkout-register-form .control-toggle label {
  font-size: 14px !important;
  color: var(--color-text-muted, #374151) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  cursor: pointer;
}

/* ─── F) Submit-Button "Weiter zur Zahlung" ─────────────────── */
.checkout-button-row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--color-surface-soft, #f3f4f6);
}

.checkout-register-form-buttons-privacy {
  text-align: center;
  font-size: 12px;
  color: var(--color-text-soft, #6b7280);
  margin-bottom: 14px;
}

.checkout-register-form-buttons-privacy a {
  color: var(--brand-primary) !important;
  text-decoration: underline;
}

.checkout-button-row-submit .btn,
.checkout-button-row-submit button[type="submit"] {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 16px 24px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.25) !important;
  transition: background-color 0.15s !important, border-color 0.15s !important, color 0.15s !important, box-shadow 0.15s !important, transform 0.15s !important, opacity 0.15s !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

.checkout-button-row-submit .btn::after {
  content: " →";
  margin-left: 4px;
}

.checkout-button-row-submit .btn:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  box-shadow: 0 6px 20px rgba(var(--brand-primary-rgb), 0.35) !important;
  transform: translateY(-1px);
}

/* ─── G) Login-Toggle (ganz unten, minimal) ─────────────────── */
.rothler-login-section {
  margin-top: 28px;
  padding: 18px 24px;
  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 10px;
}

.rothler-login-toggle-bar {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-soft, #6b7280);
}

.rothler-login-toggle-text {
  margin-right: 6px;
}

.rothler-login-toggle-link {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

.rothler-login-toggle-link:hover {
  text-decoration: underline !important;
}

.rothler-login-collapse {
  margin-top: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── H) Mini-Cart Premium-Card ─────────────────────────────── */
.rothler-checkout-cart-col {
  position: relative;
}

@media (min-width: 992px) {
  .rothler-checkout-cart-col > * {
    position: sticky;
    top: 16px;
  }
  .rothler-mini-cart + * {
    position: relative;
  }
}

.rothler-mini-cart {
  background: #ffffff;
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 12px 12px 0 0;
  padding: 20px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Mini-Cart Items kompakter + sauberer */
.rothler-mini-cart .cart-items-body,
.rothler-mini-cart .row.cart-items-body {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-surface-soft, #f3f4f6);
  margin: 0;
}

.rothler-mini-cart .cart-items-body:last-child {
  border-bottom: none;
}

.rothler-mini-cart .cart-items-image {
  padding-right: 12px;
}

.rothler-mini-cart .image-checkout-1 {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-soft, #f9fafb);
}

.rothler-mini-cart .image-checkout-qty {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.rothler-mini-cart .cart-items-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted, #374151);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rothler-mini-cart .cart-items-price,
.rothler-mini-cart .price-col {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #111827);
  text-align: right;
}

/* Gesamtsumme — sticky Footer der Karte */
.rothler-cart-total,
.basket-summary-total {
  background: #ffffff !important;
  border: 1px solid var(--color-line, #e5e7eb) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  padding: 18px 20px !important;
  margin: 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

.rothler-cart-total .price_label {
  font-size: 15px;
  color: var(--color-text-soft, #6b7280);
  font-weight: 500;
}

.rothler-cart-total .total-sum,
.basket-summary-total .total-sum {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--color-text, #111827) !important;
}

/* ─── I) Mobile-Optimierungen ───────────────────────────────── */
@media (max-width: 991px) {
  /* Cart oben */
  .rothler-checkout-cart-col {
    order: -1;
    margin-bottom: 20px;
  }

  /* Form-Card mit weniger Padding */
  .checkout-register-form {
    padding: 18px 16px;
    border-radius: 10px;
  }

  .checkout-register-form .h1,
  .checkout-register-form h1 {
    font-size: 18px !important;
  }

  /* Submit-Button sticky am unteren Rand auf Mobile */
  .checkout-button-row {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 12px 0;
    margin: 20px -16px -18px -16px;
    padding: 16px;
    border-top: 1px solid var(--color-line, #e5e7eb);
    box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
    z-index: 10;
  }

  .checkout-button-row-submit .btn {
    font-size: 15px !important;
    padding: 14px 20px !important;
  }

  /* Express-Block kompakter */
  .rothler-express-block {
    padding: 16px;
    margin-bottom: 20px;
  }

  /* Mini-Cart: max-height + scrollbar */
  .rothler-mini-cart {
    max-height: 320px;
    overflow-y: auto;
    padding: 14px;
  }

  .rothler-cart-total {
    padding: 14px !important;
  }

  .rothler-cart-total .total-sum {
    font-size: 20px !important;
  }
}

/* ─── J) Lieferadresse-Section: konditional show ───────────── */
#select-shipping-address {
  margin-top: 14px;
  padding: 18px;
  background: var(--color-surface-soft, #f9fafb);
  border: 1px solid var(--color-line, #e5e7eb);
  border-radius: 10px;
}

#select-shipping-address .h2,
#select-shipping-address .h3 {
  font-size: 15px !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}

/* "Neue Lieferadresse erstellen" weniger sperrig */
#select-shipping-address legend,
#select-shipping-address > div > .h2,
#select-shipping-address > div > .h3 {
  text-transform: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* ─── K) Trustbar oben kompakt anzeigen ─────────────────────── */
.layout-header-checkouttopbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 10px 16px;
}

@media (max-width: 768px) {
  .layout-header-checkouttopbar {
    gap: 12px;
    font-size: 12px;
  }
}

/* ============================================================
 * 24. CHECKOUT POLISH V2 — User-Feedback Round 2
 * 1. Header minimal (Trust raus)
 * 2. Form-Section-Labels ueber Inputs (kein overlap)
 * 3. Mini-Cart smarter, minimaler Frame
 * 4. Quantity-Badge sauberer
 * ============================================================ */

/* ─── 24.1) MINIMALER CHECKOUT-HEADER ───────────────────────── */
/* Trust + Trustpilot raus aus dem Checkout-Header */
body.bestellvorgang .layout-header-checkouttopbar,
body[class*="checkout"] .layout-header-checkouttopbar,
.checkout-topbar .trust-bar,
.checkout-topbar .trustpilot,
.checkout-topbar [class*="trust"],
.layout-header-checkouttopbar [class*="trustpilot"],
.layout-header-checkouttopbar [class*="trust"] {
  display: none !important;
}

/* Header-Topbar nur Logo zentriert + dezente SSL-Note */
body.bestellvorgang header,
body[class*="checkout"] header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-line, #e5e7eb) !important;
  box-shadow: none !important;
}

body.bestellvorgang header .navbar,
body[class*="checkout"] header .navbar {
  padding: 12px 0 !important;
}

/* "Sichere Bezahlung" Label nur klein + dezent rechts */
.checkout-topbar .secure-payment,
.checkout-topbar .sichere-bezahlung {
  font-size: 12px;
  color: var(--color-text-soft, #6b7280);
}

/* ─── 24.2) FORM-SECTIONS — Labels OBEN statt LINKS ─────────── */
/* JTL nutzt {row} mit {col cols=12 md=3} fuer Section-Headings.
   Wir zwingen sie auf full-width + Padding-Reset */

.checkout-register-form .row > [class*="col-"] .h2,
.checkout-register-form .row > [class*="col-"] .h3,
.inc-billing-address-form .row > [class*="col-"] .h2,
.inc-billing-address-form .row > [class*="col-"] .h3 {
  margin-top: 28px !important;
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--color-surface-soft, #f3f4f6) !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  color: var(--color-text-soft, #6b7280) !important;
  font-weight: 700 !important;
}

/* Section-Heading-Spalten auf 100% Breite zwingen */
.checkout-register-form .row .col-12.col-md-3,
.checkout-register-form .row .col-12.col-md-4,
.checkout-register-form .row [class*="col-"]:has(.h2),
.checkout-register-form .row [class*="col-"]:has(.h3),
.inc-billing-address-form .row [class*="col-"]:has(.h2),
.inc-billing-address-form .row [class*="col-"]:has(.h3) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding-bottom: 0 !important;
}

/* Inputs-Spalte daneben (col-md-9 oder col-md-8) auch full-width */
.checkout-register-form .row .col-12.col-md-9,
.checkout-register-form .row .col-12.col-md-8,
.inc-billing-address-form .row .col-12.col-md-9,
.inc-billing-address-form .row .col-12.col-md-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Heading erste in Form ohne Top-Margin */
.checkout-register-form .row:first-of-type .h2,
.checkout-register-form .row:first-of-type .h3,
.inc-billing-address-form .row:first-of-type .h2,
.inc-billing-address-form .row:first-of-type .h3 {
  margin-top: 0 !important;
}

/* Spezielle Form-Sections (Name, Rechnungsadresse etc.) — saubere Card-Optik */
.checkout-register-form fieldset {
  margin-bottom: 0;
  border: none;
  padding: 0;
}

/* "Neue Lieferadresse erstellen" Heading kompakt */
#select-shipping-address h1,
#select-shipping-address .h1,
#select-shipping-address h2:first-child,
#select-shipping-address .h2:first-child {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-text, #111827) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 14px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* ─── 24.3) MINI-CART V2 — Smarter, minimaler ───────────────── */
.rothler-checkout-cart-col {
  position: relative;
  z-index: 1;
}

@media (min-width: 992px) {
  .rothler-checkout-cart-col {
    align-self: flex-start;
    position: sticky;
    top: 16px;
    height: fit-content;
  }
}

/* Mini-Cart Outer-Wrapper — minimaler Frame */
.rothler-mini-cart {
  background: #ffffff !important;
  border: 1px solid var(--color-surface-soft, #f3f4f6) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 8px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Item-Card pro Position — alternierender BG */
.rothler-mini-cart .cart-items-body,
.rothler-mini-cart .row.cart-items-body {
  padding: 12px !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  margin: 0 0 4px 0 !important;
  background: transparent;
  transition: background 0.15s;
}

.rothler-mini-cart .cart-items-body:hover {
  background: var(--color-surface-soft, #f9fafb);
}

.rothler-mini-cart .cart-items-body:last-child {
  margin-bottom: 0 !important;
}

/* Bild-Container */
.rothler-mini-cart .cart-items-image {
  padding-right: 12px !important;
  flex: 0 0 70px !important;
  max-width: 70px !important;
}

.rothler-mini-cart .image-checkout-1 {
  position: relative;
  border-radius: 6px;
  overflow: visible;
  background: var(--color-surface-soft, #f9fafb);
  aspect-ratio: 1;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-surface-soft, #f3f4f6);
}

.rothler-mini-cart .image-checkout-1 img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

/* Quantity-Badge — Outline-Style ueber Amazon-Style */
.rothler-mini-cart .image-checkout-qty {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  background: var(--color-text, #111827) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 2px #ffffff !important;
  line-height: 1 !important;
}

/* Item-Name + Preis Layout */
.rothler-mini-cart .cart-items-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-muted, #374151) !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

.rothler-mini-cart .cart-items-price,
.rothler-mini-cart .price-col {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-text, #111827) !important;
  text-align: right !important;
  white-space: nowrap !important;
  padding-top: 2px !important;
}

/* Gesamtsumme — separate Card unten */
.rothler-cart-total,
.basket-summary-total {
  background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-soft, #fafbfc) 100%) !important;
  border: 1px solid var(--color-surface-soft, #f3f4f6) !important;
  border-top: 1px solid var(--color-line, #e5e7eb) !important;
  border-radius: 0 0 12px 12px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.rothler-cart-total .col,
.rothler-cart-total [class*="col-"],
.basket-summary-total .col,
.basket-summary-total [class*="col-"] {
  padding: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.rothler-cart-total .price_label,
.basket-summary-total .price_label {
  font-size: 13px !important;
  color: var(--color-text-soft, #6b7280) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.rothler-cart-total .total-sum,
.basket-summary-total .total-sum {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--color-text, #111827) !important;
  display: block !important;
  text-align: right !important;
}

/* ─── 24.4) MOBILE V2 ───────────────────────────────────────── */
@media (max-width: 991px) {
  /* Cart oben — kleiner Card auf Mobile */
  .rothler-checkout-cart-col {
    margin-bottom: 20px;
    position: relative !important;
    top: auto !important;
  }

  /* Cart kollabierbar auf Mobile: max-height + scroll */
  .rothler-mini-cart {
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 6px !important;
  }

  /* Items kompakter */
  .rothler-mini-cart .cart-items-body {
    padding: 10px 8px !important;
  }

  .rothler-mini-cart .cart-items-image {
    flex: 0 0 56px !important;
    max-width: 56px !important;
  }

  .rothler-mini-cart .image-checkout-1 {
    width: 48px;
    height: 48px;
  }

  .rothler-mini-cart .cart-items-name {
    font-size: 12px !important;
  }

  /* Section-Headings auf Mobile noch saubrer */
  .checkout-register-form .row > [class*="col-"] .h2,
  .checkout-register-form .row > [class*="col-"] .h3,
  .inc-billing-address-form .row > [class*="col-"] .h2,
  .inc-billing-address-form .row > [class*="col-"] .h3 {
    margin-top: 20px !important;
    font-size: 13px !important;
  }

  /* Header-Topbar mobile: nur Logo */
  body.bestellvorgang header .navbar,
  body[class*="checkout"] header .navbar {
    padding: 8px 12px !important;
  }
}

/* ─── 24.5) STICKY-FIXES ────────────────────────────────────── */
/* Eltern-Container darf kein overflow:hidden haben damit sticky funktioniert */
.row.rothler-checkout-row,
.row#register-customer {
  overflow: visible !important;
  align-items: flex-start !important;
}

main,
.main-content,
.content-wrapper {
  overflow: visible !important;
}

/* ============================================================
 * 25. CHECKOUT V3 — Mobile-Fix + Modern Step-Indicator
 * ============================================================ */

/* ─── 25.1) HEADER MOBILE — Trust-Items definitiv weg ──────── */

/* Alle Trustpilot/Trust-Elemente im Header weg */
body.bestellvorgang .header_top_bar,
body.bestellvorgang .header-top-bar,
body.bestellvorgang .topbar,
body.bestellvorgang .top-bar,
body.bestellvorgang [class*="topbar"],
body[class*="checkout"] .header_top_bar,
body[class*="checkout"] .header-top-bar,
body[class*="checkout"] .topbar,
body[class*="checkout"] [class*="topbar"],
body[class*="bestellvorgang"] [class*="trustpilot"],
body[class*="bestellvorgang"] [class*="trustbox"],
body[class*="bestellvorgang"] iframe[src*="trustpilot"],
body[class*="checkout"] [class*="trustpilot"],
body[class*="checkout"] [class*="trustbox"],
body[class*="checkout"] iframe[src*="trustpilot"] {
  display: none !important;
}

/* Header generell minimal im Checkout */
body.bestellvorgang header,
body[class*="checkout"] header,
body[class*="bestellvorgang"] header {
  background: #ffffff !important;
  border-bottom: 1px solid var(--color-line, #e5e7eb) !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.bestellvorgang header > *,
body[class*="checkout"] header > *,
body[class*="bestellvorgang"] header > * {
  background: transparent !important;
}

/* Logo zentrieren auf Mobile, links auf Desktop */
body.bestellvorgang header .navbar-brand,
body[class*="checkout"] header .navbar-brand,
body[class*="bestellvorgang"] header .navbar-brand {
  margin: 0 auto;
  padding: 10px 0;
}

body.bestellvorgang header .navbar-brand img,
body[class*="checkout"] header .navbar-brand img,
body[class*="bestellvorgang"] header .navbar-brand img {
  max-height: 36px;
  width: auto;
}

@media (max-width: 768px) {
  body.bestellvorgang header .navbar-brand img,
  body[class*="checkout"] header .navbar-brand img,
  body[class*="bestellvorgang"] header .navbar-brand img {
    max-height: 30px;
  }
}

/* Skip-Link verstecken (visuell, aber accessible) */
.sr-only-focusable,
a[href="#main"],
a.skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.sr-only-focusable:focus,
a[href="#main"]:focus,
a.skip-link:focus {
  position: fixed !important;
  top: 8px !important;
  left: 8px !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 14px !important;
  clip: auto !important;
  z-index: 9999 !important;
  background: var(--color-text, #111827) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
}

/* ─── 25.2) MODERN STEP-INDICATOR (Stripe-Style) ────────────── */

/* JTL nutzt ul.nav.nav-tabs fuer Steps. Wir gestalten neu. */
.checkout-steps,
.bestellvorgang-steps,
ul.checkout-steps,
ul.bestellvorgang-tabs,
ul.nav.nav-tabs.checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  padding: 24px 16px !important;
  margin: 0 0 24px 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--color-line, #e5e7eb) !important;
  border-radius: 12px !important;
  border-bottom: 1px solid var(--color-line, #e5e7eb) !important;
  position: relative;
  gap: 8px;
}

/* Verbindungslinie zwischen Steps */
.checkout-steps::before,
ul.checkout-steps::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 60px;
  right: 60px;
  height: 2px;
  background: var(--color-line, #e5e7eb);
  z-index: 0;
}

.checkout-steps li,
ul.checkout-steps li,
.bestellvorgang-steps li {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  z-index: 1;
  background: #ffffff;
  padding: 0 12px !important;
}

/* Step-Number-Circle */
.checkout-steps li a,
.checkout-steps li .nav-link,
.checkout-steps li span,
.bestellvorgang-steps li a,
.bestellvorgang-steps li .nav-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-soft, #6b7280) !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Step-Number ist normalerweise in einem Pseudo-Element oder ::before */
.checkout-steps li .nav-link::before,
.checkout-steps li > span::before,
.checkout-steps li > a::before,
.bestellvorgang-steps li > .nav-link::before,
.bestellvorgang-steps li > a::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-line, #e5e7eb);
  color: var(--color-text-soft, #6b7280);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px var(--color-line, #e5e7eb);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s, opacity 0.2s;
}

.checkout-steps,
.bestellvorgang-steps,
ul.checkout-steps {
  counter-reset: step-counter;
}

/* Active Step */
.checkout-steps li.active .nav-link::before,
.checkout-steps li.active > a::before,
.checkout-steps li.active > span::before,
.bestellvorgang-steps li.active > .nav-link::before,
.bestellvorgang-steps li.active > a::before {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0 6px rgba(var(--brand-primary-rgb),0.12) !important;
}

.checkout-steps li.active .nav-link,
.checkout-steps li.active > a,
.checkout-steps li.active > span,
.bestellvorgang-steps li.active > .nav-link,
.bestellvorgang-steps li.active > a {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

/* Completed Step (Haekchen statt Nummer wenn possible) */
.checkout-steps li.completed .nav-link::before,
.checkout-steps li.completed > a::before,
.bestellvorgang-steps li.completed > a::before {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  content: "✓" !important;
}

.checkout-steps li.completed .nav-link,
.checkout-steps li.completed > a,
.bestellvorgang-steps li.completed > a {
  color: var(--color-text-muted, #374151) !important;
}

/* Mobile: kompakter, Labels nur unter aktivem Step */
@media (max-width: 768px) {
  .checkout-steps,
  ul.checkout-steps,
  .bestellvorgang-steps {
    padding: 16px 8px !important;
    gap: 4px;
  }

  .checkout-steps::before {
    left: 40px;
    right: 40px;
  }

  .checkout-steps li .nav-link::before,
  .checkout-steps li > a::before,
  .checkout-steps li > span::before {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* Labels nur fuer aktiven Step zeigen auf mobile */
  .checkout-steps li:not(.active) .nav-link,
  .checkout-steps li:not(.active) > a,
  .checkout-steps li:not(.active) > span {
    font-size: 0 !important;
  }

  .checkout-steps li:not(.active) .nav-link::before,
  .checkout-steps li:not(.active) > a::before {
    /* Bleibt sichtbar */
    font-size: 13px !important;
  }
}

/* Wenn JTL keine eigenen Klassen nutzt, Fallback ueber Position */
.checkout-steps li:first-child {
  margin-left: 0;
}

.checkout-steps li:last-child {
  margin-right: 0;
}

/* ─── 25.3) FORM-INPUT-ERROR-STYLING ────────────────────────── */
/* Damit unsere DE-Validierung gut aussieht */

.checkout-register-form .form-control:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #fecaca !important;
}

.checkout-register-form .form-control.is-invalid,
.checkout-register-form .form-control:invalid:not(:placeholder-shown).touched {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important;
}

.checkout-register-form .invalid-feedback,
.checkout-register-form .error-message,
.checkout-register-form .field-error {
  color: #dc2626 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  display: block !important;
}

.checkout-register-form .invalid-feedback::before,
.checkout-register-form .error-message::before {
  content: "⚠ ";
  margin-right: 4px;
}

/* ============================================================
 * 26. CHECKOUT V4 — Step-Indicator Modern (echte Klassen)
 * Markup: nav.stepper.checkout-steps > col.step.step-active.step-current
 *   > .step-content > .badge.badge-pill > .badge-count + .step-text + .step-check
 * ============================================================ */

/* Container — moderne Card */
nav.stepper.checkout-steps,
.checkout-steps {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  padding: 22px 24px !important;
  margin: 0 0 24px 0 !important;
  background: #ffffff !important;
  border: 1px solid var(--color-line, #e5e7eb) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  position: relative !important;
}

/* Verbindungslinie (background) */
nav.stepper.checkout-steps::before,
.checkout-steps::before {
  content: "";
  position: absolute;
  top: calc(22px + 18px);
  left: 80px;
  right: 80px;
  height: 2px;
  background: var(--color-line, #e5e7eb);
  z-index: 0;
}

/* Step-Item */
nav.stepper.checkout-steps .step,
.checkout-steps .step {
  flex: 1 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1;
  display: flex !important;
  justify-content: center !important;
}

nav.stepper.checkout-steps .step a,
.checkout-steps .step a {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  width: 100% !important;
}

/* Step-Content (Badge + Text) */
.checkout-steps .step .step-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 12px !important;
  background: #ffffff !important;
  text-align: center !important;
}

/* Badge (Nummer-Kreis) — DEFAULT inactive */
.checkout-steps .step .badge,
.checkout-steps .step .badge-pill {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--color-line, #e5e7eb) !important;
  color: var(--color-text-soft, #6b7280) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 2px var(--color-line, #e5e7eb) !important;
  transition: background-color 0.2s !important, border-color 0.2s !important, color 0.2s !important, box-shadow 0.2s !important, transform 0.2s !important, opacity 0.2s !important;
  line-height: 1 !important;
}

.checkout-steps .step .badge-count {
  display: block;
  line-height: 1;
}

/* Step-Text Label */
.checkout-steps .step .step-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-text-soft, #6b7280) !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: inline-block !important;
}

/* === ACTIVE STEP (aktuell drauf) === */
.checkout-steps .step.step-current .badge,
.checkout-steps .step.step-current .badge-pill {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--brand-primary), 0 0 0 6px rgba(var(--brand-primary-rgb),0.15) !important;
}

.checkout-steps .step.step-current .step-text {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

/* === COMPLETED STEPS (vor dem aktuellen) === */
.checkout-steps .step.step-active:not(.step-current) .badge,
.checkout-steps .step.step-active:not(.step-current) .badge-pill {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--brand-primary) !important;
}

.checkout-steps .step.step-active:not(.step-current) .step-text {
  color: var(--color-text-muted, #374151) !important;
}

/* Haekchen wenn step completed */
.checkout-steps .step .step-check {
  display: none !important;
}

.checkout-steps .step.step-active:not(.step-current) .badge {
  position: relative;
}

/* Hide das eigentliche Number-Badge und zeige Haekchen */
.checkout-steps .step.step-active:not(.step-current) .badge-count {
  display: none !important;
}

.checkout-steps .step.step-active:not(.step-current) .badge::before {
  content: "✓";
  font-size: 18px;
  font-weight: 700;
  display: block;
}

/* === MOBILE OPTIMIERUNG === */
@media (max-width: 768px) {
  nav.stepper.checkout-steps,
  .checkout-steps {
    padding: 16px 12px !important;
    margin-bottom: 16px !important;
    gap: 0 !important;
  }

  nav.stepper.checkout-steps::before,
  .checkout-steps::before {
    top: calc(16px + 16px);
    left: 50px;
    right: 50px;
  }

  .checkout-steps .step .step-content {
    gap: 6px !important;
    padding: 0 6px !important;
  }

  .checkout-steps .step .badge,
  .checkout-steps .step .badge-pill {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 13px !important;
  }

  /* Step-Text auf Mobile: NUR fuer aktuellen Step sichtbar (d-none d-md-inline-block ist Standard) */
  .checkout-steps .step:not(.step-current) .step-text {
    font-size: 0 !important;
    display: none !important;
  }

  .checkout-steps .step.step-current .step-text {
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-block !important;
  }
}

/* === Trustbar im Header NULL Bytes => komplett weg === */
.layout-header .secure-checkout-topbar,
header .secure-checkout-topbar,
[class*="secure-checkout-topbar"] {
  display: none !important;
}

/* Header Bestellvorgang: nur Logo */
body[class*="bestellvorgang"] header .container-fluid,
body[class*="bestellvorgang"] header .navbar {
  min-height: 60px !important;
}

/* Warenkorb/header brand pass: ROTHLER logo darf sichtbarer sein. */
body[data-page="3"] #jtl-nav-wrapper .navbar-brand img[src*="rothler-logo.svg"],
body[data-page="3"] header .navbar-brand img[src*="rothler-logo.svg"] {
  width: 214px !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

@media (max-width: 991.98px) {
  body[data-page="3"] #jtl-nav-wrapper .navbar-brand img[src*="rothler-logo.svg"],
  body[data-page="3"] header .navbar-brand img[src*="rothler-logo.svg"] {
    width: min(44vw, 174px) !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
  }
}

@media (max-width: 575.98px) {
body[data-page="3"] #jtl-nav-wrapper .navbar-brand img[src*="rothler-logo.svg"],
body[data-page="3"] header .navbar-brand img[src*="rothler-logo.svg"] {
    width: min(46vw, 166px) !important;
  }
}

/* === ROTHLER typography foundation: consistent, readable ecommerce scale. === */
:root {
  --rt-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --rt-type-text: var(--color-text, #111827);
  --rt-type-muted: var(--color-text-muted, #4b5563);
  --rt-type-soft: var(--color-text-soft, #6b7280);
  --rt-type-faint: #8a94a6;
  --rt-type-brand: var(--brand-primary);
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body,
body.is-nova {
  color: var(--rt-type-text) !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

button,
input,
select,
textarea,
.btn,
.form-control,
.dropdown-menu {
  font-family: var(--rt-font-sans) !important;
  letter-spacing: 0 !important;
}

h1,
.h1 {
  color: var(--rt-type-text) !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 32px !important;
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

h2,
.h2 {
  color: var(--rt-type-text) !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

h3,
.h3 {
  color: var(--rt-type-text) !important;
  font-family: var(--rt-font-sans) !important;
  font-size: 20px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

p,
li,
.productbox-title,
.productbox-title a,
.cart-items-name,
.cart-items-name a,
.rt-basket,
.rt-basket a,
.small,
small {
  font-family: var(--rt-font-sans) !important;
  letter-spacing: 0 !important;
}

p,
li {
  color: inherit;
  line-height: 1.5;
}

.small,
small,
.text-muted,
.text-muted-util,
.breadcrumb,
.breadcrumb a {
  color: var(--rt-type-soft) !important;
}

a {
  text-underline-offset: 3px;
}

a:hover {
  color: var(--brand-primary-dark);
}

/* Slider-Pfeile ausnehmen: Slick rendert sie als
   <button type="button" class="slick-prev slick-arrow">Previous</button>.
   NOVA blendet den Knopftext ueber `.slick-arrow { font-size: 0 }` aus und
   zeigt stattdessen ein Chevron via ::after. Ohne diese Ausnahme gewinnt die
   Regel hier (!important) — dann stehen graue Kaesten mit den Woertern
   "Previous"/"Next" mitten auf den Produktbildern (Startseite, 11 Karussells,
   gemessen 11.08.2026). Fuer die PDP-Galerie existierte dafuer schon ein
   Einzelpflaster (`#gallery .slick-arrow`) — das ist damit der Regelfall. */
.btn:not(.slick-arrow),
button[type="submit"]:not(.slick-arrow),
button[type="button"]:not(.slick-arrow) {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
select,
textarea {
  color: var(--rt-type-text) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--rt-type-soft) !important;
  opacity: 1 !important;
}

label,
.form-label,
.col-form-label {
  color: var(--rt-type-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767.98px) {
  body,
  body.is-nova {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  h1,
  .h1 {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }

  h2,
  .h2 {
    font-size: 22px !important;
  }

  .form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* CTA contrast: darker brand action blue keeps ROTHLER look and passes AA. */
.btn-primary,
a.btn-primary,
button.btn-primary,
#add-to-cart .btn-primary,
#cart-checkout-btn,
#cart-checkout-btn2 {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
#add-to-cart .btn-primary:hover,
#cart-checkout-btn:hover,
#cart-checkout-btn2:hover {
  background-color: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #ffffff !important;
}

/* ============================================================
 * 31. PRODUCTLIST UX — stable category cards and calm controls
 * ============================================================ */

#content > h1 {
  max-width: 860px;
  margin-bottom: 12px !important;
}

#content > h1 + p,
#content > h1 + .desc,
#content > h1 + .category-description {
  max-width: 980px;
  color: #2f3948;
  font-size: 17px;
  line-height: 1.55;
}

.productlist-page-nav-top {
  margin-top: 30px;
  margin-bottom: 16px;
  border-color: #e6edf5;
}

.productlist-page-nav-bottom {
  margin-top: 16px;
  margin-bottom: 26px;
  border-color: #e6edf5;
}

.productlist-page-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.productlist-page-nav .displayoptions {
  flex: 0 1 auto;
  max-width: none;
}

.productlist-page-nav .displayoptions > .btn-group,
.productlist-page-nav .displayoptions > div,
.productlist-page-nav .filter-type-FilterItemSort,
.productlist-page-nav .filter-type-FilterItemLimits {
  margin-right: 8px;
  margin-bottom: 0;
}

.productlist-page-nav .btn,
#result-options .btn {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid #d5e0eb !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--color-text-muted, #4b5563) !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.15;
}

.productlist-page-nav .btn:hover,
.productlist-page-nav .show > .btn,
#result-options .btn:hover {
  border-color: var(--brand-tint-strong) !important;
  background: #f7fbff !important;
  color: var(--brand-primary-dark) !important;
}

.productlist-item-info {
  margin-left: auto;
  color: #596678;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0;
  white-space: nowrap;
}

:is(#product-list, .opc-ProductStream).layout-gallery {
  row-gap: 38px;
}

:is(#product-list, .opc-ProductStream) .product-wrapper {
  margin-bottom: 44px !important;
}

:is(#product-list, .opc-ProductStream) .productbox.productbox-hover {
  height: 100%;
}

:is(#product-list, .opc-ProductStream) .productbox.productbox-hover:hover,
:is(#product-list, .opc-ProductStream) .productbox.productbox-hover:focus,
:is(#product-list, .opc-ProductStream) .productbox.productbox-hover.focus {
  z-index: 2 !important;
}

:is(#product-list, .opc-ProductStream) .productbox.productbox-hover .productbox-inner {
  min-height: 100%;
  padding: 0 0 12px;
}

:is(#product-list, .opc-ProductStream) .productbox.productbox-hover .productbox-inner::before {
  display: block;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  border: 0 !important;
  border-radius: 14px;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 768px) {
  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover:hover .productbox-inner::before,
  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover:focus .productbox-inner::before,
  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover.focus .productbox-inner::before {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    box-shadow: none !important;
  }
}

:is(#product-list, .opc-ProductStream) .productbox-images {
  overflow: hidden;
  border-radius: 10px;
  background: #f6f8fb;
  box-shadow: inset 0 0 0 1px rgba(205, 216, 228, 0.72);
  transition: box-shadow 180ms ease, transform 180ms ease;
}

:is(#product-list, .opc-ProductStream) .productbox-image img {
  transition: transform 180ms ease, opacity 180ms ease;
  transform-origin: center;
}

/* Show the second product-gallery image on hover, without touching NOVA's image centering transform. */
:is(#product-list, .opc-ProductStream) .list-gallery .first-wrapper,
:is(#product-list, .opc-ProductStream) .list-gallery .second-wrapper,
:is(#product-list, .opc-ProductStream) .list-gallery img.first,
:is(#product-list, .opc-ProductStream) .list-gallery img.second {
  transition: opacity 180ms ease;
}

:is(#product-list, .opc-ProductStream) .list-gallery .second-wrapper {
  pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
  :is(#product-list, .opc-ProductStream) .list-gallery:hover img.first {
    opacity: 0 !important;
  }

  :is(#product-list, .opc-ProductStream) .list-gallery:hover img.second {
    opacity: 1 !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover:hover .productbox-images {
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.34), 0 10px 26px rgba(17, 24, 39, 0.08);
    transform: translateY(-1px);
  }
}

:is(#product-list, .opc-ProductStream) .productbox-ribbon.ribbon {
  top: 12px !important;
  left: 12px !important;
  min-height: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.92) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

:is(#product-list, .opc-ProductStream) .productbox-inner > .row > .col-12:last-child {
  display: flex;
  flex-direction: column;
}

:is(#product-list, .opc-ProductStream) .productbox-title {
  order: 2;
  min-height: 52px !important;
  margin: 7px 0 0 !important;
}

:is(#product-list, .opc-ProductStream) .productbox-title .text-clamp-2 {
  display: -webkit-box !important;
  min-height: auto;
  padding-top: 0;
  overflow: hidden;
  color: var(--rt-type-text) !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

:is(#product-list, .opc-ProductStream) .productbox-title a:hover,
:is(#product-list, .opc-ProductStream) .productbox.productbox-hover:hover .productbox-title a {
  color: var(--brand-primary-dark) !important;
  text-decoration: none;
}

:is(#product-list, .opc-ProductStream) .productlist-variation-rating {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  margin: 9px 0 0 !important;
  gap: 8px;
  color: var(--brand-primary-dark);
  font-size: 12px;
  line-height: 1.25;
}

:is(#product-list, .opc-ProductStream) .rt-productlist-variation {
  order: 2;
  min-width: 0;
}

:is(#product-list, .opc-ProductStream) .rt-productlist-variation span {
  display: inline-flex;
  align-items: center;
  min-height: 19px;
  padding: 1px 0;
  color: var(--brand-primary-dark);
  font-weight: 700;
  white-space: nowrap;
}

:is(#product-list, .opc-ProductStream) .rothler-rating-wrap {
  order: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: max-content;
  white-space: nowrap;
}

:is(#product-list, .opc-ProductStream) .rothler-rating-count {
  color: #697486;
  font-size: 12px;
  font-weight: 650;
}

:is(#product-list, .opc-ProductStream) .product-wrapper :is(.productbox-offer, .item-slider-price) {
  order: 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
  min-height: 0;
  line-height: 1.12;
}

:is(#product-list, .opc-ProductStream) .product-wrapper :is(.productbox-offer, .item-slider-price) .price_wrapper {
  display: flex !important;
  align-items: baseline;
  gap: 5px;
  margin: 0 !important;
  line-height: 1.12;
}

:is(#product-list, .opc-ProductStream) .product-wrapper :is(.productbox-offer, .item-slider-price) .price-note {
  display: none !important;
}

:is(#product-list, .opc-ProductStream) .price_label.pricestarting,
:is(#product-list, .opc-ProductStream) .price_label.nowonly {
  color: var(--color-text-soft, #6b7280) !important;
  font-size: 12.5px;
  font-weight: 650;
}

:is(#product-list, .opc-ProductStream) .productbox-price.price,
:is(#product-list, .opc-ProductStream) .price.productbox-price {
  color: var(--brand-primary-dark) !important;
  font-size: 19px !important;
  font-weight: 780 !important;
  line-height: 1.12 !important;
}

:is(#product-list, .opc-ProductStream) .rt-productlist-delivery {
  order: 4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
  color: #337c64;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

:is(#product-list, .opc-ProductStream) .rt-productlist-delivery__dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #2f8f6b;
  box-shadow: 0 0 0 4px rgba(47, 143, 107, 0.12);
}

:is(#product-list, .opc-ProductStream) .rt-productlist-delivery__sep,
:is(#product-list, .opc-ProductStream) .rt-productlist-delivery__time {
  color: #43806b;
  font-weight: 650;
}

@media (max-width: 991.98px) {
  .productlist-page-nav {
    align-items: stretch;
    justify-content: flex-start;
  }

  .productlist-page-nav .displayoptions {
    width: 100%;
  }

  .productlist-item-info {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  #content > h1 {
    margin-bottom: 10px !important;
    font-size: 28px !important;
  }

  #content > h1 + p,
  #content > h1 + .desc,
  #content > h1 + .category-description {
    font-size: 15px;
    line-height: 1.5;
  }

  .productlist-page-nav-top {
    margin-top: 22px;
  }

  .productlist-page-nav {
    gap: 10px;
  }

  .productlist-page-nav .displayoptions > .btn-group,
  .productlist-page-nav .displayoptions > div,
  .productlist-page-nav .filter-type-FilterItemSort,
  .productlist-page-nav .filter-type-FilterItemLimits {
    margin-right: 6px;
    margin-bottom: 8px;
  }

  .productlist-page-nav .btn,
  #result-options .btn {
    min-height: 42px;
    padding-right: 13px;
    padding-left: 13px;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  :is(#product-list, .opc-ProductStream).layout-gallery {
    row-gap: 30px;
    margin-right: -7px;
    margin-left: -7px;
  }

  :is(#product-list, .opc-ProductStream) .product-wrapper {
    margin-bottom: 32px !important;
    padding-right: 7px;
    padding-left: 7px;
  }

  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover .productbox-inner::before {
    display: none;
  }

  :is(#product-list, .opc-ProductStream) .productbox-images {
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(205, 216, 228, 0.72);
  }

  :is(#product-list, .opc-ProductStream) .productbox-ribbon.ribbon {
    top: 8px !important;
    left: 8px !important;
    padding: 5px 8px;
    font-size: 9.5px;
  }

  :is(#product-list, .opc-ProductStream) .productbox-title {
    min-height: 55px !important;
    margin-top: 6px !important;
  }

  :is(#product-list, .opc-ProductStream) .productbox-title .text-clamp-2 {
    font-size: 13.7px;
    font-weight: 700;
    line-height: 1.32;
    -webkit-line-clamp: 3;
  }

  :is(#product-list, .opc-ProductStream) .productlist-variation-rating {
    flex-direction: column;
    align-items: flex-start;
    min-height: 38px;
    gap: 2px;
    margin: 8px 0 0 !important;
    font-size: 11.5px;
  }

  :is(#product-list, .opc-ProductStream) .rothler-rating-wrap {
    justify-content: flex-start;
  }

  :is(#product-list, .opc-ProductStream) .product-wrapper :is(.productbox-offer, .item-slider-price) {
    margin-top: 5px;
  }

  :is(#product-list, .opc-ProductStream) .productbox-price.price,
  :is(#product-list, .opc-ProductStream) .price.productbox-price {
    font-size: 16.5px !important;
  }

  :is(#product-list, .opc-ProductStream) .rt-productlist-delivery {
    margin-top: 4px;
    font-size: 11.5px;
  }
}

/* ============================================================
 * 28. PDP ABOVE FOLD v1
 * Ruhigere Kaufzone, klare Hierarchie, kompakter Trust.
 * ============================================================ */

#product-offer.product-detail {
  --rt-pdp-blue: var(--brand-primary);
  --rt-pdp-blue-dark: var(--brand-primary-dark);
  --rt-pdp-ink: var(--color-text, #111827);
  --rt-pdp-muted: var(--color-text-soft, #667085);
  --rt-pdp-line: #dbe5ef;
  --rt-pdp-soft: #f6f9fc;
  align-items: flex-start !important;
}

#product-offer .product-info-inner {
  color: var(--rt-pdp-ink);
}

#product-offer .product-headline {
  margin-bottom: 9px;
}

#product-offer .product-title.h2 {
  margin: 0 !important;
  color: var(--rt-pdp-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: clamp(25px, 2.1vw, 34px);
  font-weight: 780;
  line-height: 1.13;
  letter-spacing: 0;
}

#product-offer .rating-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 0 0 10px;
  color: #5f6b7a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

#product-offer .rating-wrapper a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4d5a6b;
  text-decoration: none;
}

#product-offer .rating-wrapper a:hover {
  color: var(--rt-pdp-blue);
}

#product-offer .rating-wrapper .rating {
  display: inline-flex;
  gap: 2px;
  color: #f5b62d !important;
  font-size: 14px;
}

#product-offer .liebenauch {
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 6px 9px;
  gap: 8px;
  border: 1px solid #ece7d8;
  border-radius: 999px;
  background: #fbf8ef;
  color: var(--color-text, #1f2937);
}

#product-offer .trust-image {
  width: 30px;
  height: 30px;
  border-radius: 999px;
}

#product-offer .text_liebenauch {
  padding-left: 0;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.2;
  white-space: normal;
}

#product-offer .info-essential.list-unstyled {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 8px 0 0 !important;
  color: #8a94a3;
  font-size: 12.5px;
  font-weight: 600;
  opacity: 1;
}

#product-offer .info-essential li {
  margin: 0;
}

#product-offer .shortdesc {
  margin: 17px 0 16px !important;
  padding: 14px 16px;
  border: 1px solid #e5edf5;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
}

#product-offer .shortdesc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#product-offer .shortdesc li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: #273548;
  font-size: 14px;
  font-weight: 520;
  line-height: 1.34;
}

#product-offer .shortdesc li img {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

#product-offer .shortdesc strong {
  font-weight: 760;
  color: var(--color-text, #101828);
}

#product-offer .row.variations.switch-variations {
  margin: 0 0 14px !important;
  padding: 14px 14px 4px;
  border: 1px solid #dce7f2;
  border-radius: 14px;
  background: #ffffff;
}

#product-offer .switch-variations dl,
#product-offer .switch-variations dd {
  margin-bottom: 0;
}

#product-offer .variation-wrapper {
  margin-bottom: 10px;
}

#product-offer .variation-wrapper dt {
  margin-bottom: 6px;
  color: var(--color-text-muted, #344054);
  font-size: 13.5px;
  font-weight: 760;
  line-height: 1.25;
}

#product-offer .variation-wrapper .bootstrap-select {
  width: 100% !important;
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 42px 8px 14px;
  border: 1px solid #d8e4f0 !important;
  border-radius: 11px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7l4 4 4-4' fill='none' stroke='%23475467' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  background-size: 18px 18px !important;
  box-shadow: none !important;
  color: var(--color-text, #111827);
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle.bs-placeholder {
  opacity: 1 !important;
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle:hover,
#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle:focus,
#product-offer .variation-wrapper .bootstrap-select.show > .dropdown-toggle {
  border-color: var(--brand-tint-strong) !important;
  background-color: #fbfdff !important;
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), 0.08) !important;
}

#product-offer .variation-wrapper .bootstrap-select.show > .dropdown-toggle {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 11l4-4 4 4' fill='none' stroke='%23475467' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
}

#product-offer .variation-wrapper .bootstrap-select .filter-option {
  position: static;
  display: flex;
  align-items: center;
  height: auto;
  min-height: 30px;
  padding: 0;
  font-size: 15px !important;
  line-height: inherit !important;
}

#product-offer .variation-wrapper .bootstrap-select .filter-option-inner,
#product-offer .variation-wrapper .bootstrap-select .filter-option-inner-inner {
  display: block;
  width: 100%;
  min-width: 0;
}

#product-offer .variation-wrapper .bootstrap-select .filter-option-inner-inner {
  overflow: hidden;
  color: var(--color-text-muted, #344054);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px !important;
  font-weight: 700;
}

#product-offer .variation-wrapper .bootstrap-select .bs-placeholder .filter-option-inner-inner {
  color: var(--color-text-soft, #98a2b3);
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-menu {
  max-height: none !important;
  margin-top: 5px;
  padding: 5px;
  border: 1px solid #dde8f2;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
  overflow: visible !important;
  z-index: 1060;
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-menu > .inner {
  max-height: min(44vh, 310px) !important;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-menu.inner {
  position: static !important;
  display: block;
  float: none;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-menu.inner > li {
  margin: 0 0 2px;
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-menu.inner > li:last-child {
  margin-bottom: 0;
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-item {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--color-text-muted, #344054);
  font-size: 14px !important;
  font-weight: 650;
  line-height: 1.28;
  white-space: normal;
}

#product-offer .variation-wrapper .bootstrap-select .check-mark {
  display: none !important;
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-item .text {
  display: block;
  width: 100%;
  min-width: 0;
}

#product-offer .variation-wrapper .rt-variation-option {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  width: 100%;
  min-width: 0;
}

#product-offer .variation-wrapper .rt-variation-option__main {
  min-width: 0;
  color: var(--color-text-muted, #344054);
}

#product-offer .variation-wrapper .rt-variation-option__badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
  white-space: normal;
}

#product-offer .variation-wrapper .rt-variation-option__badge--hint {
  border: 1px solid #d4e5f6;
  background: #f3f8fd;
  color: var(--brand-primary-dark);
}

#product-offer .variation-wrapper .rt-variation-option__badge--stock {
  border: 1px solid #ead7b8;
  background: #fff8ed;
  color: #8a5a12;
}

#product-offer .variation-wrapper .dropdown-item.rt-variation-choice--limited .rt-variation-option__main,
#product-offer .variation-wrapper .dropdown-item.rt-variation-choice--stock .rt-variation-option__main {
  color: var(--color-text-soft, #667085);
}

#product-offer .variation-wrapper .dropdown-item.rt-variation-choice--limited:hover .rt-variation-option__badge--hint,
#product-offer .variation-wrapper .dropdown-item.rt-variation-choice--limited:focus .rt-variation-option__badge--hint {
  border-color: var(--brand-tint);
  background: #eaf4ff;
  color: var(--brand-primary-dark);
}

#product-offer .variation-wrapper .badge-not-available.rt-variation-option__badge--dynamic {
  margin-left: 8px;
  border: 1px solid #d4e5f6 !important;
  background: #f3f8fd !important;
  color: var(--brand-primary-dark) !important;
  vertical-align: middle;
}

#product-offer .variation-wrapper .filter-option-inner-inner .rt-variation-option__badge--dynamic {
  margin-left: 8px;
  transform: translateY(-1px);
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-item:hover,
#product-offer .variation-wrapper .bootstrap-select .dropdown-item:focus {
  background: #f2f8ff;
  color: var(--color-text, #0f172a);
}

#product-offer .variation-wrapper .bootstrap-select .dropdown-item.active,
#product-offer .variation-wrapper .bootstrap-select .dropdown-item.selected {
  background: #e9f4ff;
  color: var(--brand-primary);
  font-weight: 760;
}

#product-offer .variation-wrapper .bootstrap-select .badge-not-available {
  margin-left: 6px;
  font-size: 11px;
  vertical-align: middle;
}

#product-offer .swatches-text {
  min-height: 42px;
  padding: 9px 13px !important;
  border: 1px solid #d9e4ee !important;
  border-radius: 9px !important;
  background: #ffffff;
  color: var(--color-text, #1f2937);
  font-size: 14px;
  font-weight: 650;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

#product-offer .swatches-text:hover {
  border-color: var(--brand-tint) !important;
  background: #f7fbff !important;
}

#product-offer .swatches-text.active {
  border-color: var(--rt-pdp-blue) !important;
  background: #eff7ff !important;
  color: var(--rt-pdp-blue-dark) !important;
}

#product-offer .product-offer > .row {
  margin-right: 0;
  margin-left: 0;
}

#product-offer .product-offer > .row > .col {
  padding-right: 0;
  padding-left: 0;
}

#product-offer .price_wrapper {
  margin: 0 0 12px !important;
}

#product-offer .price_wrapper .price.h1 {
  margin: 0 !important;
  color: var(--color-text, #0f172a) !important;
  font-size: clamp(31px, 2.7vw, 43px) !important;
  font-weight: 820 !important;
  line-height: 1.02 !important;
  letter-spacing: 0 !important;
}

#product-offer .price_label.pricestarting {
  color: var(--color-text-soft, #6b7280);
  font-size: 15px;
  font-weight: 700;
}

#product-offer .rothler-price-block {
  gap: 7px;
  margin-top: 7px;
}

#product-offer .rothler-save-row {
  gap: 8px;
  color: var(--color-text-muted, #475467);
  font-size: 13px;
}

#product-offer .rothler-pill {
  border-color: #fecaca;
  border-radius: 999px;
  background: #fff1f1;
  color: #a31616;
}

#product-offer .rothler-trust {
  gap: 12px;
  margin-top: 0;
  color: #5f6b7a;
  font-size: 12.5px;
}

#product-offer .stock-information.stock-information-p {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}

#product-offer .delivery-status ul {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
}

#product-offer .delivery-status .status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #247b5b !important;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.25;
}

#product-offer .delivery-status .status-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e4f6ed;
  color: #247b5b;
  font-size: 10px;
}

#product-offer .rt-product-delivery-time__inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid #d7efe3;
  border-radius: 10px;
  background: #f3fbf7;
  color: #28614d;
  font-size: 13px;
  line-height: 1.25;
}

#product-offer .rt-product-delivery-time__label,
#product-offer .rt-product-delivery-time__hint {
  color: #58736a;
  font-weight: 600;
}

#product-offer .rt-product-delivery-time__value {
  color: #236e52;
  font-weight: 820;
}

#product-offer .alert.choose-variations.alert-info {
  width: 100%;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  background: #eff6ff;
  color: var(--brand-primary-dark);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
}

#product-offer #add-to-cart {
  margin-top: 5px;
}

#product-offer #add-to-cart > .row {
  margin-right: -5px;
  margin-left: -5px;
}

#product-offer #add-to-cart > .row > [class*="col"] {
  padding-right: 5px;
  padding-left: 5px;
}

#product-offer .rt-pdp-payment-strip {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid #e5edf5;
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

#product-offer .rt-pdp-payment-strip picture,
#product-offer .rt-pdp-payment-strip img {
  display: block;
}

#product-offer .rt-pdp-payment-strip img {
  width: 100%;
  max-height: 45px;
  object-fit: contain;
  object-position: left center;
}

#product-offer .rothler-trust-section {
  margin: 13px 0 0;
  padding: 12px 0 0;
}

#product-offer .rothler-trust-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#product-offer .rothler-trust-card {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e4edf6;
  border-radius: 11px;
  background: #ffffff;
}

#product-offer .rothler-trust-iconwrap {
  width: 34px;
  height: 34px;
}

#product-offer .rothler-trust-iconwrap svg {
  width: 18px;
  height: 18px;
}

#product-offer .rothler-trust-text {
  align-items: flex-start;
}

#product-offer .rothler-trust-text strong {
  font-size: 12.5px;
}

#product-offer .rothler-trust-text span {
  font-size: 11.5px;
}

#product-offer #image_wrapper {
  margin-bottom: 18px !important;
}

#product-offer #gallery_wrapper,
#product-offer #gallery .square-image,
#product-offer #gallery .inner,
#product-offer #gallery img {
  border-radius: 13px;
}

#product-offer #gallery .inner {
  background: var(--color-surface-soft, #f8fafc);
}

#product-offer .product-detail-image-preview-bar .square.square-image {
  border-radius: 8px;
}

@media (min-width: 992px) {
  #content-wrapper:not(.has-fluid) {
    padding-top: 18px !important;
  }

  #product-offer.product-detail {
    max-width: 1320px;
    margin: 0 auto 34px !important;
  }

  #product-offer > .product-gallery {
    flex: 0 0 56% !important;
    max-width: 56% !important;
    padding-right: 30px;
  }

  #product-offer > .product-info {
    flex: 0 0 44% !important;
    max-width: 44% !important;
    padding-left: 22px;
  }

  #product-offer .product-info-inner {
    position: sticky;
    top: 108px;
    padding: 22px;
    border: 1px solid #e3ebf3;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 60px -46px rgba(15, 23, 42, 0.45);
  }
}

@media (min-width: 1200px) {
  #product-offer > .product-gallery {
    flex-basis: 58% !important;
    max-width: 58% !important;
  }

  #product-offer > .product-info {
    flex-basis: 42% !important;
    max-width: 42% !important;
  }
}

@media (max-width: 991.98px) {
  #product-offer.product-detail {
    margin-top: 0 !important;
  }

  #product-offer > .product-gallery,
  #product-offer > .product-info {
    padding-right: 12px;
    padding-left: 12px;
  }

  #product-offer .product-info-inner {
    padding-top: 4px;
  }

  #product-offer .product-title.h2 {
    font-size: 25px;
  }

  #product-offer .shortdesc {
    padding: 13px;
  }

  #product-offer .shortdesc ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #product-offer .row.variations.switch-variations {
    padding: 13px 13px 3px;
  }
}

@media (max-width: 575.98px) {
  #product-offer .rating-wrapper {
    gap: 8px;
    font-size: 13px;
  }

  #product-offer .liebenauch {
    border-radius: 12px;
  }

  #product-offer .text_liebenauch {
    font-size: 12.5px;
  }

  #product-offer .price_wrapper .price.h1 {
    font-size: 30px !important;
  }

  #product-offer .rt-pdp-payment-strip img {
    max-height: 37px;
    object-position: center;
  }

  #product-offer .rothler-trust-grid {
    grid-template-columns: 1fr 1fr;
  }

#product-offer .rothler-trust-card {
    padding: 9px 8px;
  }
}

/* Step 2 polish: benefits must stay readable in the buy panel. */
#product-offer .shortdesc ul {
  grid-template-columns: 1fr;
  gap: 7px;
}

#product-offer .shortdesc li {
  display: block;
  position: relative;
  padding-left: 27px;
}

#product-offer .shortdesc li img {
  display: none !important;
}

#product-offer .shortdesc li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-tint);
  border-radius: 999px;
  color: var(--brand-primary);
  background: #eff7ff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* 29. PDP MOBILE PURCHASE FLOW v1 */
.rt-pdp-mobile-cta {
  display: none;
}

@media (max-width: 767.98px) {
  #product-offer.product-detail {
    padding-bottom: calc(98px + env(safe-area-inset-bottom));
  }

  #product-offer > .product-gallery,
  #product-offer > .product-info {
    padding-right: 10px;
    padding-left: 10px;
  }

  #product-offer .product-detail-image-preview-bar .product-thumbnails {
    gap: 8px;
    padding-bottom: 4px;
  }

  #product-offer .product-detail-image-preview-bar .square.square-image {
    width: 68px;
    margin-right: 0;
  }

  #product-offer .product-title.h2 {
    margin-bottom: 10px;
    font-size: 23px;
    line-height: 1.16;
  }

  #product-offer .rating-wrapper {
    margin-bottom: 7px;
  }

  #product-offer .liebenauch {
    width: 100%;
    padding: 8px 9px;
  }

  #product-offer .shortdesc {
    margin: 11px 0 12px !important;
    padding: 12px;
  }

  #product-offer .shortdesc li {
    font-size: 13.5px;
    line-height: 1.34;
  }

  #product-offer .row.variations.switch-variations {
    margin-bottom: 12px;
    padding: 12px 11px 2px;
    border-radius: 13px;
  }

  #product-offer .variation-wrapper {
    margin-bottom: 9px;
  }

  #product-offer .variation-wrapper dt {
    margin-bottom: 5px;
    font-size: 13px;
  }

  #product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle {
    min-height: 46px;
    padding: 8px 40px 8px 13px;
    border-radius: 10px !important;
    font-size: 14.5px !important;
  }

  #product-offer .variation-wrapper .bootstrap-select .filter-option-inner-inner {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #product-offer .variation-wrapper .bootstrap-select > .dropdown-menu > .inner {
    max-height: min(42vh, 300px) !important;
  }

  #product-offer .variation-wrapper .bootstrap-select > .dropdown-menu {
    max-height: none !important;
    padding: 7px;
    border-radius: 12px;
    overflow: visible !important;
  }

  #product-offer .variation-wrapper .bootstrap-select .dropdown-item {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13.5px !important;
  }

  #product-offer .variation-wrapper .rt-variation-option {
    gap: 4px 7px;
  }

  #product-offer .variation-wrapper .rt-variation-option__badge {
    min-height: 19px;
    padding: 2px 6px;
    font-size: 10.5px;
  }

  #product-offer .price_wrapper {
    margin: 12px 0 8px !important;
  }

  #product-offer .price_wrapper .price.h1 {
    font-size: 32px !important;
    line-height: 1;
  }

  #product-offer .rt-product-delivery-time,
  #product-offer .delivery-status {
    margin-bottom: 10px;
  }

  #product-offer #add-to-cart {
    margin-top: 9px;
  }

  #product-offer #add-to-cart .btn-primary,
  #product-offer #quantity-grp {
    min-height: 56px;
    height: 56px;
    border-radius: 12px;
  }

  #product-offer #quantity-grp {
    overflow: hidden;
  }

  #product-offer .rt-pdp-payment-strip {
    margin-top: 10px;
    padding: 8px 10px;
  }

  #product-offer .rothler-trust-section {
    margin-top: 10px;
    padding-top: 10px;
  }

  #product-offer .rothler-trust-card {
    min-height: 58px;
  }

  .rt-pdp-mobile-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1035;
    display: block;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(210, 224, 238, 0.92);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -18px 42px -34px rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .rt-pdp-mobile-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(142px, 46%);
    gap: 10px;
    align-items: center;
    max-width: 540px;
    margin: 0 auto;
  }

  .rt-pdp-mobile-cta__summary {
    min-width: 0;
  }

  .rt-pdp-mobile-cta__label,
  .rt-pdp-mobile-cta__note {
    display: block;
    color: var(--color-text-soft, #667085);
    font-size: 11px;
    font-weight: 680;
    line-height: 1.2;
  }

  .rt-pdp-mobile-cta__price {
    display: block;
    margin: 1px 0;
    color: var(--color-text, #101828);
    font-size: 20px;
    font-weight: 860;
    line-height: 1.05;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .rt-pdp-mobile-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    background: var(--brand-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 820;
    line-height: 1.1;
    letter-spacing: 0;
    box-shadow: 0 16px 28px -21px rgba(var(--brand-primary-rgb), 0.95);
  }

  .rt-pdp-mobile-cta__button:active {
    transform: translateY(1px);
  }

  .rt-pdp-mobile-cta__button:disabled {
    background: var(--brand-tint-strong);
    box-shadow: none;
  }
}

@media (max-width: 374.98px) {
  .rt-pdp-mobile-cta__inner {
    grid-template-columns: 1fr;
  }

  .rt-pdp-mobile-cta__button {
    min-height: 50px;
  }
}

/* 30. PDP BELOW FOLD DECISION SECTION v4 */
.rt-pdp-decision {
  margin: 18px 0 26px;
  color: var(--color-text, #111827);
}

.rt-pdp-decision__inner {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 22px;
  border: 1px solid #e2ebf4;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 54px -52px rgba(15, 23, 42, 0.28);
}

.rt-pdp-decision__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 16px;
}

.rt-pdp-decision__eyebrow {
  display: inline-flex;
  margin-bottom: 7px;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.rt-pdp-decision h2 {
  margin: 0 0 8px;
  color: var(--color-text, #111827);
  font-size: 28px;
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: 0;
  max-width: 920px;
}

.rt-pdp-decision__header p,
.rt-pdp-decision__card p {
  max-width: 860px;
  margin: 0;
  color: var(--color-text-soft, #667085);
  font-size: 15px;
  line-height: 1.58;
}

.rt-pdp-decision__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 390px;
}

.rt-pdp-decision__trust span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d7e8f8;
  border-radius: 999px;
  background: #f5faff;
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
}

.rt-pdp-decision__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
  gap: 14px;
  align-items: stretch;
}

.rt-pdp-decision__card {
  padding: 18px;
  border: 1px solid #e4edf6;
  border-radius: 16px;
  background: #fbfdff;
}

.rt-pdp-decision__card--lead {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  padding: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
}

.rt-pdp-decision__card--facts {
  grid-column: auto;
}

.rt-pdp-decision__card--service {
  background: #f7fbff;
}

.rt-pdp-decision__card--faq {
  grid-column: 1 / -1;
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.rt-pdp-decision h3 {
  margin: 0 0 8px;
  color: var(--color-text, #111827);
  font-size: 18px;
  font-weight: 840;
  line-height: 1.22;
  letter-spacing: 0;
}

.rt-pdp-decision__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-tint);
  border-radius: 14px;
  background: #eff7ff;
  color: var(--brand-primary);
}

.rt-pdp-decision__icon svg {
  width: 22px;
  height: 22px;
}

.rt-pdp-decision__checks,
.rt-pdp-decision__service {
  display: grid;
  gap: 10px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.rt-pdp-decision__checks li,
.rt-pdp-decision__service li {
  position: relative;
  padding-left: 25px;
  color: var(--color-text-muted, #344054);
  font-size: 14px;
  font-weight: 690;
  line-height: 1.4;
}

.rt-pdp-decision__checks li::before,
.rt-pdp-decision__service li::before {
  content: "\2713";
  position: absolute;
  top: 1px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #e9f7ef;
  color: #1f8a58;
  font-size: 10px;
  font-weight: 900;
}

.rt-pdp-decision__facts {
  display: grid;
  gap: 0;
  margin: 5px 0 0;
}

.rt-pdp-decision__facts div {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision__facts div:last-child {
  border-bottom: 0;
}

.rt-pdp-decision__facts dt {
  color: var(--color-text-soft, #667085);
  font-size: 13px;
  font-weight: 720;
}

.rt-pdp-decision__facts dd {
  margin: 0;
  color: var(--color-text, #111827);
  font-size: 14px;
  font-weight: 780;
  text-align: right;
  word-break: normal;
}

.rt-pdp-decision__service li {
  display: grid;
  grid-template-columns: minmax(90px, 0.75fr) minmax(0, 1.25fr);
  gap: 10px;
  padding-top: 2px;
}

.rt-pdp-decision__service strong {
  color: var(--color-text, #111827);
}

.rt-pdp-decision__service span {
  color: var(--color-text-soft, #667085);
  font-weight: 620;
}

.rt-pdp-decision__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.rt-pdp-decision__docs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid #cfe4f8;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--brand-primary);
  font-size: 13px;
  font-weight: 780;
  text-decoration: none;
}

.rt-pdp-decision__card--faq h3 {
  padding: 18px 18px 5px;
}

.rt-pdp-decision details {
  border-top: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  color: var(--color-text, #111827);
  font-size: 15px;
  font-weight: 790;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.rt-pdp-decision summary::-webkit-details-marker {
  display: none;
}

.rt-pdp-decision summary::after {
  content: "+";
  color: var(--brand-primary);
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
}

.rt-pdp-decision details[open] summary::after {
  content: "-";
}

.rt-pdp-decision details p {
  padding: 0 18px 16px;
  font-size: 14px;
}

@media (max-width: 991.98px) {
  .rt-pdp-decision {
    margin-top: 10px;
  }

  .rt-pdp-decision__inner {
    width: calc(100% - 20px);
    padding: 16px;
    border-radius: 16px;
  }

  .rt-pdp-decision__header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rt-pdp-decision__trust {
    justify-content: flex-start;
    max-width: none;
  }

  .rt-pdp-decision__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rt-pdp-decision h2 {
    font-size: 24px;
  }

  .rt-pdp-decision__card--faq {
    grid-column: auto;
  }

  .rt-pdp-decision__card--lead {
    grid-column: auto;
  }

  .rt-pdp-decision__card--facts {
    grid-column: auto;
  }

  .rt-pdp-decision__facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .rt-pdp-decision {
    margin-bottom: 20px;
  }

  .rt-pdp-decision__inner {
    width: calc(100% - 18px);
    padding: 13px;
  }

  .rt-pdp-decision__header {
    margin-bottom: 12px;
  }

  .rt-pdp-decision__trust {
    gap: 6px;
  }

  .rt-pdp-decision__trust span {
    min-height: 28px;
    padding: 0 9px;
    font-size: 11px;
  }

  .rt-pdp-decision__header p,
  .rt-pdp-decision__card p {
    font-size: 14px;
  }

  .rt-pdp-decision__card {
    padding: 14px;
    border-radius: 14px;
  }

  .rt-pdp-decision__card--lead {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .rt-pdp-decision__facts div,
  .rt-pdp-decision__service li {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .rt-pdp-decision__facts dd {
    text-align: left;
  }

  .rt-pdp-decision__card--faq h3 {
    padding: 15px 14px 3px;
  }

  .rt-pdp-decision summary {
    padding: 13px 14px;
  }

  .rt-pdp-decision details p {
    padding: 0 14px 14px;
  }
}

/* ============================================================
 * 31. PDP PURCHASE SECTION v2 — clear sale hierarchy + mobile CTA
 * ============================================================ */

body #product-offer .price_wrapper {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 16px 0 12px !important;
  padding: 0 !important;
  text-align: left !important;
}

body #product-offer .rothler-price-block {
  display: contents;
}

body #product-offer .rothler-sale-row {
  order: 1;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin: 0 0 5px;
  color: var(--color-text-soft, #667085);
  font-size: 17px;
  line-height: 1.2;
}

body #product-offer .rothler-uvp {
  color: var(--color-text-soft, #667085);
  font-weight: 560;
}

body #product-offer .rothler-uvp s {
  color: var(--color-text-soft, #667085);
  text-decoration-color: var(--color-text-soft, #667085);
  text-decoration-thickness: 2px;
}

body #product-offer .rothler-discount-pill {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 5px 13px;
  border: 1px solid #d92d20;
  border-radius: 8px;
  background: #d92d20;
  color: #fff;
  font-size: 16px;
  font-weight: 820;
  line-height: 1;
  white-space: nowrap;
}

body #product-offer .price_wrapper .price.h1 {
  order: 2;
  margin: 0 !important;
  color: var(--color-text, #0f172a) !important;
  font-size: clamp(42px, 4.2vw, 60px) !important;
  font-weight: 850 !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

body #product-offer .price_wrapper:has(.rothler-sale-row) .price.h1 {
  color: #d41111 !important;
}

body #product-offer .rothler-savings-row {
  order: 3;
  margin-top: 8px;
  color: var(--color-text-muted, #475467);
  font-size: 16px;
  font-weight: 560;
  line-height: 1.3;
}

body #product-offer .rothler-savings-row strong {
  color: #182230;
  font-weight: 820;
}

body #product-offer .rothler-price-benefits {
  order: 4;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
  color: var(--color-text-muted, #475467);
  font-size: 15px;
  font-weight: 620;
  line-height: 1.25;
}

body #product-offer .rothler-price-benefit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body #product-offer .rothler-price-benefit svg {
  flex: 0 0 auto;
  color: var(--color-text-soft, #98a2b3);
}

body #product-offer .rothler-price-benefit--ship {
  color: #15803d;
  font-weight: 720;
}

body #product-offer .rothler-price-benefit--ship svg {
  color: #15803d;
}

body #product-offer .stock-information.stock-information-p {
  margin: 0 0 15px !important;
}

body #product-offer .delivery-status ul {
  gap: 6px;
}

body #product-offer .delivery-status .status {
  color: #247b5b !important;
  font-size: 17px;
  font-weight: 820;
}

body #product-offer .delivery-status .status-icon {
  width: 25px;
  height: 25px;
  background: #e4f6ed;
  color: #247b5b;
  font-size: 12px;
}

body #product-offer .rt-product-delivery-time__inner {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2f6f58;
  font-size: 15px;
}

body #product-offer .rt-product-delivery-time__label,
body #product-offer .rt-product-delivery-time__hint {
  color: #5f6f69;
  font-weight: 620;
}

body #product-offer .rt-product-delivery-time__value {
  color: #247b5b;
  font-weight: 830;
}

body #product-offer #add-to-cart {
  margin-top: 14px;
}

body #product-offer #add-to-cart > .row {
  align-items: stretch;
}

body #product-offer #quantity-grp,
body #product-offer #add-to-cart .btn-primary {
  min-height: 64px;
  height: 64px !important;
  border-radius: 14px !important;
}

body #product-offer #quantity-grp {
  border: 1px solid var(--color-line, #d9e3ee);
  background: #fff;
}

body #product-offer #quantity-grp .btn,
body #product-offer #quantity-grp input,
body #product-offer #quantity-grp .input-group-text {
  min-height: 62px;
  height: 62px !important;
}

body #product-offer #quantity-grp input.quantity {
  color: var(--color-text, #101828) !important;
  font-size: 21px !important;
  font-weight: 760 !important;
}

body #product-offer #quantity-grp .btn {
  color: var(--color-text-muted, #475467) !important;
  font-size: 18px !important;
}

body #product-offer #quantity-grp .input-group-text.unit {
  color: var(--color-text-soft, #98a2b3) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
}

body #product-offer #add-to-cart .btn-primary {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 820 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 16px 28px -18px rgba(var(--brand-primary-rgb), 0.85) !important;
}

body #product-offer #add-to-cart .btn-primary:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  transform: translateY(-1px);
}

body #product-offer #add-to-cart .btn-primary .btn-basket-check {
  gap: 12px;
}

@media (max-width: 767.98px) {
  body #product-offer .price_wrapper {
    margin: 13px 0 10px !important;
  }

  body #product-offer .rothler-sale-row {
    gap: 8px;
    margin-bottom: 4px;
    font-size: 15px;
  }

  body #product-offer .rothler-discount-pill {
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 14px;
  }

  body #product-offer .price_wrapper .price.h1 {
    font-size: clamp(39px, 11vw, 50px) !important;
    line-height: 1 !important;
  }

  body #product-offer .rothler-savings-row {
    margin-top: 7px;
    font-size: 15px;
  }

  body #product-offer .rothler-price-benefits {
    gap: 7px 12px;
    margin-top: 7px;
    font-size: 14px;
  }

  body #product-offer .delivery-status .status {
    font-size: 18px;
  }

  body #product-offer .rt-product-delivery-time__inner {
    font-size: 15px;
    line-height: 1.35;
  }

  body #product-offer #add-to-cart {
    margin-top: 13px;
  }

  body #product-offer #add-to-cart > .row {
    flex-wrap: nowrap;
    gap: 10px;
    margin-right: 0;
    margin-left: 0;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 43% !important;
    max-width: 43% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #product-offer #quantity-grp,
  body #product-offer #add-to-cart .btn-primary {
    min-height: 62px;
    height: 62px !important;
    border-radius: 13px !important;
  }

  body #product-offer #quantity-grp .btn,
  body #product-offer #quantity-grp input,
  body #product-offer #quantity-grp .input-group-text {
    min-height: 60px;
    height: 60px !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 18px !important;
  }

  body #product-offer #add-to-cart .btn-primary .btn-basket-check {
    gap: 9px;
  }
}

@media (max-width: 380px) {
  body #product-offer .rothler-price-benefits {
    display: grid;
    gap: 6px;
  }

  body #product-offer #add-to-cart > .row {
    gap: 8px;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex-basis: 40% !important;
    max-width: 40% !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 16px !important;
  }
}

/* ============================================================
 * 32. PDP BUYBOX BALANCE v1 — price scale, CTA ratio, sticky sale
 * ============================================================ */

@media (min-width: 992px) {
  body #product-offer .product-info {
    font-size: 15px;
  }

  body #product-offer .product-title.h2 {
    margin-bottom: 10px;
    font-size: clamp(28px, 2.35vw, 38px) !important;
    line-height: 1.12 !important;
  }

  body #product-offer .rating-wrapper {
    margin-bottom: 10px;
    font-size: 15px;
  }

  body #product-offer .liebenauch {
    margin-bottom: 13px;
    padding: 8px 10px;
  }

  body #product-offer .text_liebenauch {
    font-size: 13.5px !important;
    line-height: 1.25;
  }

  body #product-offer .price_wrapper {
    margin: 13px 0 10px !important;
  }

  body #product-offer .rothler-sale-row {
    gap: 9px;
    margin-bottom: 4px;
    font-size: 15px;
  }

  body #product-offer .rothler-discount-pill {
    min-height: 28px;
    padding: 4px 11px;
    border-radius: 8px;
    font-size: 14px;
  }

  body #product-offer .price_wrapper .price.h1 {
    font-size: clamp(44px, 3.05vw, 54px) !important;
    line-height: 0.98 !important;
  }

  body #product-offer .rothler-savings-row {
    margin-top: 6px;
    font-size: 14.5px;
  }

  body #product-offer .rothler-price-benefits {
    gap: 8px 13px;
    margin-top: 7px;
    font-size: 13.5px;
  }

  body #product-offer .delivery-status .status {
    font-size: 15px;
  }

  body #product-offer .rt-product-delivery-time__inner {
    font-size: 13.5px;
    line-height: 1.35;
  }

  body #product-offer #add-to-cart {
    margin-top: 13px;
  }

  body #product-offer #add-to-cart > .row {
    flex-wrap: nowrap;
    gap: 12px;
    margin-right: 0;
    margin-left: 0;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 32% !important;
    max-width: 32% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body #product-offer #quantity-grp,
  body #product-offer #add-to-cart .btn-primary {
    min-height: 60px;
    height: 60px !important;
    border-radius: 14px !important;
  }

  body #product-offer #quantity-grp .btn,
  body #product-offer #quantity-grp input,
  body #product-offer #quantity-grp .input-group-text {
    min-height: 58px;
    height: 58px !important;
  }

  body #product-offer #quantity-grp input.quantity {
    font-size: 18px !important;
  }

  body #product-offer #quantity-grp .btn {
    font-size: 16px !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 17px !important;
    line-height: 1.05 !important;
    white-space: nowrap;
  }

  body #product-offer #add-to-cart .btn-primary .btn-basket-check {
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  body #product-offer #add-to-cart .btn-primary .fa-shopping-cart {
    font-size: 17px !important;
  }
}

@media (max-width: 767.98px) {
  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 39% !important;
    max-width: 39% !important;
  }

  body #product-offer #add-to-cart > .row {
    gap: 9px;
  }

  body #product-offer #quantity-grp,
  body #product-offer #add-to-cart .btn-primary {
    min-height: 60px;
    height: 60px !important;
  }

  body #product-offer #quantity-grp .btn,
  body #product-offer #quantity-grp input,
  body #product-offer #quantity-grp .input-group-text {
    min-height: 58px;
    height: 58px !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 16.5px !important;
    line-height: 1.05 !important;
  }

  body #product-offer #add-to-cart .btn-primary .btn-basket-check {
    gap: 7px;
    flex-wrap: nowrap;
  }

  body #product-offer #add-to-cart .btn-primary .fa-shopping-cart {
    font-size: 17px !important;
  }

  .rt-pdp-mobile-cta {
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom));
  }

  .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(148px, 43%);
    gap: 9px;
  }

  .rt-pdp-mobile-cta__sale {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-bottom: 2px;
    color: var(--color-text-soft, #667085);
    font-size: 10.5px;
    font-weight: 720;
    line-height: 1.1;
    white-space: nowrap;
  }

  .rt-pdp-mobile-cta__uvp {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rt-pdp-mobile-cta__uvp s {
    text-decoration-thickness: 1.5px;
  }

  .rt-pdp-mobile-cta__discount {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary);
    font-size: 10.5px;
    font-weight: 820;
    line-height: 1.1;
  }

  .rt-pdp-mobile-cta__price {
    margin: 0;
    font-size: 23px;
    line-height: 1;
  }

  .rt-pdp-mobile-cta__price--sale {
    color: #d41111;
  }

  .rt-pdp-mobile-cta__note {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.15;
    white-space: nowrap;
  }

  .rt-pdp-mobile-cta__button {
    min-height: 56px;
    padding: 0 12px;
    font-size: 15.5px !important;
    line-height: 1.05;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(136px, 42%);
  }

  .rt-pdp-mobile-cta__price {
    font-size: 21px;
  }

  .rt-pdp-mobile-cta__button {
    min-height: 54px;
    font-size: 14.5px !important;
  }
}

/* ============================================================
 * 33. PDP QUANTITY + CTA WIDTH FIX v1
 * ============================================================ */

body #product-offer #quantity-grp {
  display: grid !important;
  grid-template-columns: 46px minmax(42px, 1fr) 34px 46px;
  align-items: stretch !important;
  overflow: hidden;
}

body #product-offer #quantity-grp .input-group-prepend,
body #product-offer #quantity-grp .input-group-append {
  display: contents !important;
}

body #product-offer #quantity-grp .input-group-prepend .btn,
body #product-offer #quantity-grp .input-group-append .btn,
body #product-offer #quantity-grp input.quantity,
body #product-offer #quantity-grp .input-group-text.unit {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body #product-offer #quantity-grp .input-group-prepend .btn {
  grid-column: 1;
}

body #product-offer #quantity-grp input.quantity {
  grid-column: 2;
  padding: 0 !important;
  text-align: center;
}

body #product-offer #quantity-grp .input-group-text.unit {
  grid-column: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  background: transparent !important;
}

body #product-offer #quantity-grp .input-group-append .btn {
  grid-column: 4;
}

body #product-offer #quantity-grp .btn .fas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 992px) {
  body #product-offer #add-to-cart > .row {
    gap: 14px;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 38% !important;
    max-width: 38% !important;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 16.5px !important;
  }
}

@media (max-width: 767.98px) {
  body #product-offer #add-to-cart > .row {
    gap: 10px;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }

  body #product-offer #quantity-grp {
    grid-template-columns: 44px minmax(38px, 1fr) 30px 44px;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 16px !important;
  }
}

/* ============================================================
 * 34. PDP DECISION SECTION v6 — compact technical guidance
 * ============================================================ */

.rt-pdp-decision {
  margin: 22px 0 28px;
  color: var(--color-text, #111827);
}

.rt-pdp-decision__inner {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto;
  padding: 0;
  border: 1px solid #e5edf5;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: none;
  overflow: hidden;
}

.rt-pdp-decision__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, auto);
  gap: 18px;
  align-items: start;
  margin: 0;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--color-line, #edf2f7);
  background:
    linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0.045), transparent 42%),
    #ffffff;
}

.rt-pdp-decision__eyebrow {
  display: inline-flex;
  margin: 0 0 6px;
  color: var(--brand-primary);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rt-pdp-decision h2 {
  max-width: 760px;
  margin: 0 0 6px;
  color: var(--color-text, #101828);
  font-size: clamp(21px, 1.72vw, 27px);
  font-weight: 760;
  line-height: 1.13;
  letter-spacing: 0;
}

.rt-pdp-decision__header p,
.rt-pdp-decision__card p {
  max-width: 900px;
  margin: 0;
  color: var(--color-text-soft, #667085);
  font-size: 13.5px;
  line-height: 1.48;
}

.rt-pdp-decision__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: start;
  gap: 6px;
  max-width: 320px;
}

.rt-pdp-decision__trust span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb), 0.045);
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
}

.rt-pdp-decision__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 0;
  align-items: stretch;
}

.rt-pdp-decision__card {
  min-width: 0;
  padding: 18px 22px;
  border: 0;
  border-radius: 0;
  background: #ffffff;
}

.rt-pdp-decision__card--lead {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(260px, 1.04fr);
  gap: 18px;
  border-right: 1px solid var(--color-line, #edf2f7);
  border-bottom: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision__card--service {
  grid-column: 2;
  grid-row: span 2;
  border-left: 0;
  background:
    linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.035), transparent 58%),
    #fbfcfd;
}

.rt-pdp-decision__card--facts {
  grid-column: 1;
  border-right: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision__card--faq {
  grid-column: 1 / -1;
  padding: 0;
  border-top: 1px solid var(--color-line, #edf2f7);
  background: #ffffff;
}

.rt-pdp-decision h3 {
  margin: 0 0 7px;
  color: var(--color-text, #101828);
  font-size: 16.5px;
  font-weight: 760;
  line-height: 1.22;
  letter-spacing: 0;
}

.rt-pdp-decision__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}

.rt-pdp-decision__card-head p {
  max-width: 390px;
  margin: 0;
  color: #7b8493;
  font-size: 12.5px;
  line-height: 1.35;
  text-align: right;
}

.rt-pdp-decision__checks,
.rt-pdp-decision__service {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rt-pdp-decision__checks {
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
}

.rt-pdp-decision__checks li {
  position: relative;
  min-width: 0;
  padding: 8px 0 8px 22px;
  border: 0;
  border-bottom: 1px solid var(--color-line, #edf2f7);
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted, #344054);
  font-size: 13px;
  font-weight: 690;
  line-height: 1.35;
}

.rt-pdp-decision__checks li:last-child {
  border-bottom: 0;
}

.rt-pdp-decision__checks li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--brand-primary);
  box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), 0.08);
}

.rt-pdp-decision__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
}

.rt-pdp-decision__facts div {
  display: grid;
  grid-template-columns: minmax(100px, 0.82fr) minmax(0, 1.18fr);
  gap: 12px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision__facts dt {
  min-width: 0;
  color: var(--color-text-soft, #667085);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.rt-pdp-decision__facts dd {
  min-width: 0;
  margin: 0;
  color: var(--color-text, #101828);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.35;
  text-align: left;
  overflow-wrap: anywhere;
}

.rt-pdp-decision__service {
  gap: 8px;
  margin-top: 10px;
}

.rt-pdp-decision__service li {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  min-width: 0;
  padding: 10px 10px 10px 27px;
  border: 1px solid var(--color-line, #edf2f7);
  border-radius: 10px;
  background: #ffffff;
}

.rt-pdp-decision__service li::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--brand-primary);
  box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), 0.08);
}

.rt-pdp-decision__service strong {
  color: var(--color-text, #101828);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.rt-pdp-decision__service span {
  color: var(--color-text-soft, #667085);
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.3;
}

.rt-pdp-decision__docs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.rt-pdp-decision__docs a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--brand-primary-rgb), 0.045);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
}

.rt-pdp-decision__card--faq h3 {
  padding: 15px 22px 1px;
}

.rt-pdp-decision details {
  border-top: 1px solid var(--color-line, #edf2f7);
}

.rt-pdp-decision summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  color: var(--color-text, #101828);
  font-size: 13.5px;
  font-weight: 740;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.rt-pdp-decision summary::-webkit-details-marker {
  display: none;
}

.rt-pdp-decision summary::after {
  content: "+";
  color: var(--brand-primary);
  font-size: 18px;
  font-weight: 760;
  line-height: 1;
}

.rt-pdp-decision details[open] summary::after {
  content: "-";
}

.rt-pdp-decision details p {
  max-width: 900px;
  padding: 0 22px 14px;
  color: var(--color-text-soft, #667085);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .rt-pdp-decision {
    margin: 18px 0 24px;
  }

  .rt-pdp-decision__inner {
    width: calc(100% - 20px);
    border-radius: 14px;
  }

  .rt-pdp-decision__header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }

  .rt-pdp-decision__trust {
    justify-content: flex-start;
    max-width: none;
  }

  .rt-pdp-decision__grid {
    grid-template-columns: 1fr;
  }

  .rt-pdp-decision__card,
  .rt-pdp-decision__card--lead,
  .rt-pdp-decision__card--facts,
  .rt-pdp-decision__card--service {
    grid-column: auto;
    grid-row: auto;
    border-right: 0;
    border-left: 0;
  }

  .rt-pdp-decision__card--lead {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rt-pdp-decision__card--service {
    border-top: 1px solid var(--color-line, #edf2f7);
  }

  .rt-pdp-decision__facts {
    grid-template-columns: 1fr;
  }

  .rt-pdp-decision__card-head {
    display: block;
  }

  .rt-pdp-decision__card-head p {
    margin-top: 2px;
    text-align: left;
  }
}

@media (max-width: 575.98px) {
  .rt-pdp-decision__inner {
    width: calc(100% - 18px);
  }

  .rt-pdp-decision__header,
  .rt-pdp-decision__card {
    padding: 14px;
  }

  .rt-pdp-decision h2 {
    font-size: 19px;
    line-height: 1.16;
  }

  .rt-pdp-decision__header p,
  .rt-pdp-decision__card p,
  .rt-pdp-decision__card-head p {
    font-size: 13px;
    line-height: 1.45;
  }

  .rt-pdp-decision__trust span {
    min-height: 24px;
    padding: 0 8px;
    font-size: 10.5px;
  }

  .rt-pdp-decision__facts div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 7px 0;
  }

  .rt-pdp-decision__card--faq h3 {
    padding: 14px 14px 1px;
  }

  .rt-pdp-decision summary {
    padding: 12px 14px;
    font-size: 13px;
  }

  .rt-pdp-decision details p {
    padding: 0 14px 13px;
    font-size: 13px;
  }
}

/* PDP decision redesign: new compact information architecture. */
.rt-pdp-decision--redesign {
  margin: 20px 0 28px;
}

.rt-pdp-decision--redesign .rt-pdp-decision__inner {
  width: min(1280px, calc(100% - 32px));
  border: 1px solid #e7edf4;
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.rt-pdp-decision--redesign .rt-pdp-decision__mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr);
  gap: 18px;
  align-items: end;
  padding: 18px 22px;
  border-bottom: 1px solid var(--color-surface-soft, #eef2f6);
  background:
    linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0.075), rgba(var(--brand-primary-rgb), 0) 34%),
    linear-gradient(180deg, #fff 0%, #fdfefe 100%);
}

.rt-pdp-decision--redesign .rt-pdp-decision__eyebrow {
  margin-bottom: 7px;
  padding-left: 11px;
  border-left: 3px solid var(--brand-primary);
  color: var(--brand-primary);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.rt-pdp-decision--redesign h2 {
  max-width: 780px;
  margin: 0 0 6px;
  color: var(--color-text, #101828);
  font-size: clamp(20px, 1.55vw, 25px);
  font-weight: 740;
  line-height: 1.13;
}

.rt-pdp-decision--redesign .rt-pdp-decision__header p,
.rt-pdp-decision--redesign .rt-pdp-decision__mast p,
.rt-pdp-decision--redesign .rt-pdp-decision__card p {
  color: var(--color-text-soft, #667085);
  font-size: 13px;
  line-height: 1.45;
}

.rt-pdp-decision--redesign .rt-pdp-decision__trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  justify-items: stretch;
  max-width: none;
}

.rt-pdp-decision--redesign .rt-pdp-decision__trust span {
  min-height: 28px;
  justify-content: center;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.16);
  border-radius: 8px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 760;
}

.rt-pdp-decision--redesign .rt-pdp-decision__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.46fr) minmax(280px, 0.54fr);
  grid-template-areas:
    "lead service"
    "facts service"
    "faq faq";
  gap: 0;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card {
  padding: 18px 22px;
  background: #fff;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--lead {
  grid-area: lead;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 0.88fr);
  gap: 18px;
  border-right: 1px solid var(--color-surface-soft, #eef2f6);
  border-bottom: 1px solid var(--color-surface-soft, #eef2f6);
}

.rt-pdp-decision--redesign .rt-pdp-decision__lead-copy {
  display: grid;
  align-content: start;
}

.rt-pdp-decision--redesign h3 {
  margin: 0 0 6px;
  color: var(--color-text, #101828);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.2;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks-panel {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid rgba(var(--brand-primary-rgb), 0.12);
  border-radius: 12px;
  background: rgba(var(--brand-primary-rgb), 0.035);
}

.rt-pdp-decision--redesign .rt-pdp-decision__mini-title {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-primary);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks {
  gap: 0;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks li {
  padding: 7px 0 7px 20px;
  border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.09);
  color: var(--color-text-muted, #344054);
  font-size: 12.7px;
  font-weight: 680;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks li::before {
  top: 13px;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.09);
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--facts {
  grid-area: facts;
  border-right: 1px solid var(--color-surface-soft, #eef2f6);
}

.rt-pdp-decision--redesign .rt-pdp-decision__card-head {
  margin-bottom: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-surface-soft, #eef2f6);
}

.rt-pdp-decision--redesign .rt-pdp-decision__card-head p {
  color: #7b8493;
  font-size: 12px;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts div {
  grid-template-columns: minmax(92px, 0.75fr) minmax(0, 1.25fr);
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-surface-soft, #eef2f6);
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts dt {
  color: #7b8493;
  font-size: 11.8px;
  font-weight: 700;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts dd {
  color: var(--color-text, #101828);
  font-size: 12.8px;
  font-weight: 760;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--service {
  grid-area: service;
  border: 0;
  background:
    linear-gradient(180deg, rgba(var(--brand-primary-rgb), 0.045), rgba(var(--brand-primary-rgb), 0) 44%),
    #fbfcfd;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service {
  gap: 8px;
  margin-top: 10px;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service li {
  min-height: 60px;
  padding: 11px 12px 10px 30px;
  border: 1px solid var(--color-line, #edf2f7);
  border-radius: 12px;
  background: #fff;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service li::before {
  top: 16px;
  left: 13px;
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  box-shadow: 0 0 0 5px rgba(var(--brand-primary-rgb), 0.08);
}

.rt-pdp-decision--redesign .rt-pdp-decision__service strong {
  font-size: 12.8px;
  font-weight: 770;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service span {
  font-size: 12.2px;
  line-height: 1.3;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--faq {
  grid-area: faq;
  border-top: 1px solid var(--color-surface-soft, #eef2f6);
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--faq h3 {
  padding: 14px 22px 0;
}

.rt-pdp-decision--redesign summary {
  padding: 11px 22px;
  font-size: 13.2px;
  font-weight: 740;
}

.rt-pdp-decision--redesign details p {
  padding: 0 22px 13px;
  font-size: 12.8px;
}

@media (max-width: 991.98px) {
  .rt-pdp-decision--redesign .rt-pdp-decision__mast,
  .rt-pdp-decision--redesign .rt-pdp-decision__grid,
  .rt-pdp-decision--redesign .rt-pdp-decision__card--lead {
    grid-template-columns: 1fr;
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__grid {
    grid-template-areas:
      "lead"
      "facts"
      "service"
      "faq";
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__card--lead,
  .rt-pdp-decision--redesign .rt-pdp-decision__card--facts {
    border-right: 0;
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__trust {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .rt-pdp-decision--redesign .rt-pdp-decision__inner {
    width: calc(100% - 18px);
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__mast,
  .rt-pdp-decision--redesign .rt-pdp-decision__card {
    padding: 14px;
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__trust,
  .rt-pdp-decision--redesign .rt-pdp-decision__facts {
    grid-template-columns: 1fr;
  }

  .rt-pdp-decision--redesign .rt-pdp-decision__facts div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ============================================================
 * 35. PDP PRICE SCALE v1 — calmer premium price hierarchy
 * ============================================================ */

@media (min-width: 992px) {
  body #product-offer .price_wrapper .price.h1 {
    font-size: clamp(39px, 2.55vw, 48px) !important;
    line-height: 1 !important;
  }

  body #product-offer .rothler-sale-row {
    margin-bottom: 3px;
    font-size: 14.5px;
  }

  body #product-offer .rothler-savings-row {
    margin-top: 5px;
    font-size: 14px;
  }
}

@media (max-width: 767.98px) {
  body #product-offer .price_wrapper .price.h1 {
    font-size: clamp(36px, 9.4vw, 44px) !important;
    line-height: 1.02 !important;
  }

  body #product-offer .rothler-sale-row {
    font-size: 14px;
  }

  body #product-offer .rothler-savings-row {
    font-size: 14px;
  }
}

/* ============================================================
 * 36. PDP MOBILE STEP 1 — calmer above-fold + stronger thumb CTA
 * ============================================================ */

@media (max-width: 767.98px) {
  body #product-offer > .product-gallery,
  body #product-offer > .product-info {
    padding-right: 10px;
    padding-left: 10px;
  }

  body #product-offer .product-title.h2 {
    margin-bottom: 8px;
    font-size: 21.5px !important;
    line-height: 1.18 !important;
  }

  body #product-offer .rating-wrapper {
    margin-bottom: 6px;
  }

  body #product-offer .liebenauch {
    padding: 7px 9px;
    border-radius: 11px;
  }

  body #product-offer .text_liebenauch {
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  body #product-offer .shortdesc {
    margin: 10px 0 11px !important;
    padding: 11px;
    border-radius: 13px;
  }

  body #product-offer .shortdesc li {
    font-size: 13.25px;
    line-height: 1.32;
  }

  body #product-offer .row.variations.switch-variations {
    margin-bottom: 10px;
    padding: 11px 10px 1px;
    border-radius: 13px;
  }

  body #product-offer .variation-wrapper {
    margin-bottom: 8px;
  }

  body #product-offer .variation-wrapper dt {
    margin-bottom: 4px;
    font-size: 12.75px;
    line-height: 1.25;
  }

  body #product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle {
    min-height: 44px;
    padding: 7px 39px 7px 12px;
    font-size: 14px !important;
  }

  body #product-offer .price_wrapper {
    margin: 9px 0 7px !important;
  }

  body #product-offer .rothler-sale-row {
    gap: 7px;
    margin-bottom: 3px;
    font-size: 13px;
    line-height: 1.2;
  }

  body #product-offer .rothler-discount-pill {
    min-height: 25px;
    padding: 3px 9px;
    border-radius: 7px;
    font-size: 13px;
  }

  body #product-offer .price_wrapper .price.h1 {
    font-size: clamp(34px, 9.3vw, 40px) !important;
    line-height: 1 !important;
  }

  body #product-offer .rothler-savings-row {
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.25;
  }

  body #product-offer .rothler-price-benefits {
    gap: 6px 10px;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.22;
  }

  body #product-offer .stock-information.stock-information-p {
    margin-bottom: 11px !important;
  }

  body #product-offer .delivery-status .status {
    font-size: 15.5px;
    line-height: 1.2;
  }

  body #product-offer .delivery-status .status-icon {
    width: 23px;
    height: 23px;
    font-size: 11px;
  }

  body #product-offer .rt-product-delivery-time__inner {
    font-size: 13.75px;
    line-height: 1.3;
  }

  body #product-offer #add-to-cart {
    margin-top: 11px;
  }

  body #product-offer #add-to-cart > .row {
    gap: 9px;
  }

  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 36% !important;
    max-width: 36% !important;
  }

  body #product-offer #quantity-grp,
  body #product-offer #add-to-cart .btn-primary {
    min-height: 58px;
    height: 58px !important;
    border-radius: 13px !important;
  }

  body #product-offer #quantity-grp .btn,
  body #product-offer #quantity-grp input,
  body #product-offer #quantity-grp .input-group-text {
    min-height: 56px;
    height: 56px !important;
  }

  body #product-offer #quantity-grp {
    grid-template-columns: 40px minmax(32px, 1fr) 28px 40px;
  }

  body #product-offer #quantity-grp input.quantity {
    font-size: 18px !important;
  }

  body #product-offer #quantity-grp .btn {
    font-size: 15.5px !important;
  }

  body #product-offer #add-to-cart .btn-primary {
    font-size: 16px !important;
    line-height: 1.05 !important;
  }

  body #product-offer .rt-pdp-payment-strip {
    margin-top: 9px;
    padding: 8px 9px;
  }

  body #product-offer .rothler-trust-section {
    margin-top: 9px;
    padding-top: 9px;
  }

  body #product-offer .rothler-trust-grid {
    gap: 7px;
  }

  body #product-offer .rothler-trust-card {
    min-height: 52px;
    gap: 7px;
    padding: 8px;
    border-radius: 10px;
  }

  body #product-offer .rothler-trust-iconwrap {
    width: 30px;
    height: 30px;
  }

  body #product-offer .rothler-trust-iconwrap svg {
    width: 16px;
    height: 16px;
  }

  body #product-offer .rothler-trust-text strong {
    font-size: 12.5px;
    line-height: 1.16;
  }

  body #product-offer .rothler-trust-text span {
    font-size: 11.5px;
    line-height: 1.18;
  }

  .rt-pdp-mobile-cta {
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
  }

  .rt-pdp-mobile-cta.rt-pdp-mobile-cta--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Chat-Knopf weicht der Kaufleiste aus.
     BEFUND 23.08.2026 (Audit): #chatbot-widget sitzt fixiert bei bottom:16px
     mit z-index 9999, die Kaufleiste bei z-index 1035 — der Chat liegt also
     zwangslaeufig darueber. Ueber neun Tastpunkte gemessen waren 40 % der
     Kaufknopf-Flaeche verdeckt (die rechten 30-40 %, dort wo "...korb" steht),
     reproduzierbar auf allen geprueften Seiten und bei 375 und 390 px Breite.
     Passend dazu die Klickdaten: der Chat bekam auf Produktseiten 55 Klicks
     gegen 114 auf der Kaufleiste — fuer ein Chat-Widget ein unmoegliches
     Verhaeltnis. Mein eigener P8-Waechter hatte das uebersehen, weil er nur
     den MITTELPUNKT des Knopfes geprueft hat.

     Loesung: der Chat wandert ueber die Leiste, statt sie zu ueberdecken —
     er bleibt erreichbar. Nur solange die Leiste sichtbar ist (Klasse
     --visible), danach faellt er von selbst zurueck.
     82px = Leistenhoehe ohne Geraete-Rand (52 Knopf + 2x7 Polster + 16 Abstand);
     env() ergaenzt den Rand, den die Leiste selbst schon einrechnet.
     Ohne :has-Unterstuetzung bleibt alles wie bisher — reine Verbesserung. */
  body:has(.rt-pdp-mobile-cta--visible) #chatbot-widget {
    bottom: calc(82px + env(safe-area-inset-bottom));
    transition: bottom .18s ease;
  }

  .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(145px, 42%);
    gap: 8px;
  }

  .rt-pdp-mobile-cta__sale {
    margin-bottom: 1px;
    font-size: 10px;
  }

  .rt-pdp-mobile-cta__discount {
    padding: 2px 5px;
    font-size: 10px;
  }

  .rt-pdp-mobile-cta__price {
    font-size: 20px;
    line-height: 1;
  }

  .rt-pdp-mobile-cta__note {
    margin-top: 1px;
    font-size: 10px;
  }

  .rt-pdp-mobile-cta__button {
    min-height: 52px;
    border-radius: 12px;
    font-size: 14.5px !important;
  }
}

@media (max-width: 380px) {
  body #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex-basis: 34% !important;
    max-width: 34% !important;
  }

  body #product-offer .price_wrapper .price.h1 {
    font-size: 33px !important;
  }

  .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) 134px;
  }
}

/* ============================================================
 * 37. PDP MOBILE BREADCRUMB STEP 1 — compact product breadcrumb
 * ============================================================ */

@media (max-width: 767.98px) {
  body[data-page="1"] .breadcrumb-container {
    padding-right: 16px !important;
    padding-left: 16px !important;
    padding-bottom: 0 !important;
  }

  body[data-page="1"] .breadcrumb-wrapper {
    width: 100%;
    margin: 3px 0 5px !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="1"] .breadcrumb-wrapper > .col-auto {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body[data-page="1"] .breadcrumb-wrapper .navigation-arrows {
    display: none !important;
  }

  body[data-page="1"] #breadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    min-height: 22px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    background: transparent;
    border: 0;
    box-shadow: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="1"] #breadcrumb .breadcrumb::-webkit-scrollbar {
    display: none;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    max-width: none;
    padding: 0 !important;
    color: var(--color-text-soft, #667085) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.25;
    white-space: nowrap;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    padding: 0 !important;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist::before,
  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist .breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    max-width: 100%;
    padding: 0 2px;
    color: var(--color-text-soft, #667085) !important;
    text-decoration: none;
    font-size: 13.5px !important;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist .breadcrumb-link::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist .breadcrumb-link::after {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item .breadcrumb-link,
  body[data-page="1"] #breadcrumb .breadcrumb-item span {
    display: inline-flex;
    align-items: center;
    max-width: none;
    overflow: visible;
    color: inherit !important;
    text-overflow: clip;
    white-space: nowrap;
  }
}

/* ============================================================
 * 38. PDP MOBILE GALLERY STEP 2 — compact modern image rail
 * ============================================================ */

@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer > .product-gallery {
    margin-top: 0 !important;
    margin-bottom: 8px;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  body[data-page="1"] #product-offer #image_wrapper {
    margin-bottom: 8px !important;
  }

  body[data-page="1"] #product-offer #image_wrapper .gallery-with-action-main {
    margin-right: 0;
    margin-left: 0;
  }

  body[data-page="1"] #product-offer #gallery_wrapper {
    margin-bottom: 7px;
  }

  body[data-page="1"] #product-offer #gallery .slick-dots,
  body[data-page="1"] #product-offer #gallery .initial-slick-dots {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body[data-page="1"] #product-offer #gallery,
  body[data-page="1"] #product-offer #gallery .slick-list,
  body[data-page="1"] #product-offer #gallery .slick-track,
  body[data-page="1"] #product-offer #gallery .slick-slide,
  body[data-page="1"] #product-offer #gallery .square.square-image,
  body[data-page="1"] #product-offer #gallery .inner {
    height: clamp(330px, calc(100vw - 32px), 430px) !important;
    min-height: 0 !important;
  }

  body[data-page="1"] #product-offer #gallery .slick-track {
    align-items: center;
  }

  body[data-page="1"] #product-offer #gallery .square.square-image {
    display: block !important;
    overflow: hidden;
    background: var(--color-surface-soft, #f8fafc);
    border: 1px solid var(--color-line, #edf2f7);
    border-radius: 14px;
  }

  body[data-page="1"] #product-offer #gallery .square.square-image::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #product-offer #gallery .inner {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--color-surface-soft, #f8fafc);
    border-radius: 14px;
  }

  body[data-page="1"] #product-offer #gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body[data-page="1"] #product-offer .product-detail-image-preview-bar {
    flex: 0 0 100%;
    max-width: 100%;
    min-height: 0;
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
  }

  body[data-page="1"] #product-offer #gallery_preview_wrapper {
    height: auto;
    width: 100%;
  }

  body[data-page="1"] #product-offer #gallery_preview {
    display: flex !important;
    align-items: center;
    min-height: 68px;
    width: 100%;
    overflow: hidden;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-list {
    flex: 1 1 auto;
    height: 68px !important;
    margin: 0;
    overflow: hidden;
    border-radius: 10px;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-track {
    display: flex !important;
    align-items: center;
    height: 68px !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-slide {
    height: 68px !important;
    padding: 0 4px;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-slide > div {
    border: 0 !important;
    outline: 0 !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image {
    width: clamp(58px, 15.5vw, 68px) !important;
    height: clamp(58px, 15.5vw, 68px) !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-line, #d6e4f1) !important;
    border-radius: 10px;
    outline: 0 !important;
    box-shadow: none !important;
    transition: border-color 160ms ease, opacity 160ms ease;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image .inner {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-current .square.square-image {
    border-color: var(--brand-primary) !important;
    box-shadow: none !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-arrow {
    display: none !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-arrow::before {
    display: none !important;
    content: none !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-arrow::after {
    position: static;
    color: var(--brand-primary) !important;
    text-indent: 0;
    font-family: "Font Awesome 5 Free" !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-prev::after {
    content: "\f053";
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-next::after {
    content: "\f054";
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-disabled {
    opacity: 0.38;
  }
}

/* ============================================================
 * PDP gallery performance + UX polish
 * ============================================================ */

body[data-page="1"] #product-offer #gallery_wrapper {
  contain: layout paint;
}

body[data-page="1"] #product-offer #gallery .rt-gallery-main-image,
body[data-page="1"] #product-offer #gallery_preview .rt-gallery-thumb-image {
  display: block;
  max-width: 100%;
}

body[data-page="1"] #product-offer #gallery_preview .slick-slide,
body[data-page="1"] #product-offer .carousel-thumbnails .slick-slide {
  padding: 0 4px !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
}

body[data-page="1"] #product-offer #gallery_preview .slick-slide > div {
  display: flex;
  justify-content: center;
  border: none !important;
}

body[data-page="1"] #product-offer #gallery_preview .square.square-image {
  width: clamp(72px, 6.8vw, 92px) !important;
  height: clamp(72px, 6.8vw, 92px) !important;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

body[data-page="1"] #product-offer #gallery .slick-arrow {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(219, 231, 243, 0.95);
  box-shadow: 0 14px 34px -24px rgba(15, 23, 42, 0.45);
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

body[data-page="1"] #product-offer #gallery .slick-arrow:hover {
  background: #fff;
  border-color: var(--brand-tint);
  transform: translateY(-1px);
}

body[data-page="1"] #product-offer #gallery_preview .slick-slide {
  cursor: pointer;
}

body[data-page="1"] #product-offer #gallery_preview .rt-gallery-thumb-slide {
  opacity: 0.74;
}

body[data-page="1"] #product-offer #gallery_preview .slick-current .rt-gallery-thumb-slide,
body[data-page="1"] #product-offer #gallery_preview .rt-thumb-active .rt-gallery-thumb-slide,
body[data-page="1"] #product-offer #gallery_preview .rt-gallery-thumb-slide:hover {
  opacity: 1;
}

@media (min-width: 768px) {
  body[data-page="1"] #product-offer #gallery .square.square-image,
  body[data-page="1"] #product-offer #gallery .inner {
    background: var(--color-surface-soft, #f8fafc);
  }

  body[data-page="1"] #product-offer #gallery_preview_wrapper {
    margin-top: 14px;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image {
    border: 1px solid var(--color-line, #dbe7f3) !important;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: none !important;
    transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-current .square.square-image {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12) !important;
  }

  body[data-page="1"] #product-offer #gallery_preview .rt-thumb-active .square.square-image {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12) !important;
  }
}

@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer #gallery_wrapper {
    margin-bottom: 8px !important;
  }

  body[data-page="1"] #product-offer #gallery .slick-list {
    touch-action: pan-y pinch-zoom;
  }

  body[data-page="1"] #product-offer #gallery .square.square-image {
    box-shadow: none !important;
  }

  body[data-page="1"] #product-offer #gallery_preview_wrapper {
    padding-inline: 0;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-list {
    scrollbar-width: none;
  }

  body[data-page="1"] #product-offer #gallery_preview .slick-list::-webkit-scrollbar {
    display: none;
  }

  body[data-page="1"] #product-offer #gallery_preview .square.square-image {
    width: clamp(60px, 17vw, 72px) !important;
    height: clamp(60px, 17vw, 72px) !important;
    scroll-snap-align: center;
  }
}

body[data-page="1"] #product-offer #gallery_preview.carousel-thumbnails .slick-slide,
body[data-page="1"] #product-offer .carousel-thumbnails .slick-slide {
  padding: 0 4px !important;
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ============================================================
 * 39. PDP MOBILE STEP 2 — calmer product head
 * ============================================================ */

@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer > .product-info {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body[data-page="1"] #product-offer .product-info-inner {
    padding-top: 0 !important;
  }

  body[data-page="1"] #product-offer .product-headline {
    margin-bottom: 5px !important;
  }

  body[data-page="1"] #product-offer .product-title.h2 {
    margin-bottom: 7px !important;
    color: var(--color-text, #111827) !important;
    font-size: clamp(20px, 5.45vw, 22px) !important;
    font-weight: 780 !important;
    line-height: 1.14 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  body[data-page="1"] #product-offer .rating-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px 8px !important;
    margin: 0 0 9px !important;
    color: var(--color-text-muted, #4b5563) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
  }

  body[data-page="1"] #product-offer .rating-wrapper > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-height: 22px;
    color: var(--color-text-muted, #4b5563) !important;
    text-decoration: none !important;
    white-space: nowrap;
  }

  body[data-page="1"] #product-offer .rating-wrapper .rating {
    display: inline-flex !important;
    gap: 1px !important;
    color: #f5b223 !important;
    font-size: 15px !important;
    line-height: 1 !important;
  }

  body[data-page="1"] #product-offer .liebenauch {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px;
    margin: 0 !important;
    padding: 5px 9px !important;
    gap: 8px !important;
    border: 1px solid #efe4cc !important;
    border-radius: 12px !important;
    background: #fffaf0 !important;
    color: var(--color-text, #111827) !important;
    box-shadow: none !important;
  }

  body[data-page="1"] #product-offer .trust-image {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  body[data-page="1"] #product-offer .text_liebenauch {
    display: block !important;
    min-width: 0;
    padding-left: 0 !important;
    overflow: hidden;
    color: var(--color-text, #111827) !important;
    font-size: 12.6px !important;
    font-weight: 650 !important;
    line-height: 1.16 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-page="1"] #product-offer .text_liebenauch strong {
    font-weight: 820 !important;
  }
}

@media (max-width: 374.98px) {
  body[data-page="1"] #product-offer .product-title.h2 {
    font-size: 20px !important;
  }

  body[data-page="1"] #product-offer .text_liebenauch {
    font-size: 12.2px !important;
  }
}

/* ============================================================
 * 40. PDP MOBILE STEP 3 — calmer purchase zone + robust quantity
 * ============================================================ */

@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer .price_wrapper {
    margin: 10px 0 8px !important;
  }

  body[data-page="1"] #product-offer .rothler-sale-row {
    gap: 7px !important;
    margin-bottom: 3px !important;
    font-size: 12.75px !important;
    line-height: 1.2 !important;
  }

  body[data-page="1"] #product-offer .rothler-discount-pill {
    min-height: 24px !important;
    padding: 3px 8px !important;
    border-radius: 7px !important;
    font-size: 12.5px !important;
    font-weight: 820 !important;
  }

  body[data-page="1"] #product-offer .price_wrapper .price.h1 {
    font-size: clamp(30px, 8.7vw, 34px) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  body[data-page="1"] #product-offer .rothler-savings-row {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.22 !important;
  }

  body[data-page="1"] #product-offer .rothler-price-benefits {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 7px 12px !important;
    margin-top: 6px !important;
    font-size: 12.75px !important;
    line-height: 1.2 !important;
  }

  body[data-page="1"] #product-offer .rothler-price-benefit {
    gap: 5px !important;
    white-space: nowrap;
  }

  body[data-page="1"] #product-offer .stock-information.stock-information-p {
    margin-bottom: 10px !important;
  }

  body[data-page="1"] #product-offer .delivery-status ul {
    gap: 5px !important;
  }

  body[data-page="1"] #product-offer .delivery-status .status {
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  body[data-page="1"] #product-offer .delivery-status .status-icon {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
  }

  body[data-page="1"] #product-offer .rt-product-delivery-time__inner {
    font-size: 13.25px !important;
    line-height: 1.25 !important;
  }

  body[data-page="1"] #product-offer #add-to-cart {
    margin-top: 11px !important;
  }

  body[data-page="1"] #product-offer #add-to-cart > .row {
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  body[data-page="1"] #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex: 0 0 31% !important;
    max-width: 31% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-page="1"] #product-offer #add-to-cart > .row > [class*="col"]:nth-child(2) {
    flex: 1 1 auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body[data-page="1"] #product-offer #quantity-grp {
    display: grid !important;
    grid-template-columns: 36px minmax(28px, 1fr) 36px !important;
    align-items: stretch !important;
    min-height: 56px !important;
    height: 56px !important;
    border: 1px solid var(--color-line, #d9e3ee) !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .input-group-prepend,
  body[data-page="1"] #product-offer #quantity-grp .input-group-append {
    display: contents !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .input-group-text.unit {
    display: none !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .input-group-prepend .btn,
  body[data-page="1"] #product-offer #quantity-grp .input-group-append .btn,
  body[data-page="1"] #product-offer #quantity-grp input.quantity {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    height: 54px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .input-group-prepend .btn {
    grid-column: 1 !important;
  }

  body[data-page="1"] #product-offer #quantity-grp input.quantity {
    grid-column: 2 !important;
    padding: 0 !important;
    color: var(--color-text, #101828) !important;
    font-size: 17px !important;
    font-weight: 780 !important;
    text-align: center !important;
    appearance: textfield;
    -moz-appearance: textfield;
  }

  body[data-page="1"] #product-offer #quantity-grp input.quantity::-webkit-outer-spin-button,
  body[data-page="1"] #product-offer #quantity-grp input.quantity::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
  }

  body[data-page="1"] #product-offer #quantity-grp .input-group-append .btn {
    grid-column: 3 !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-text-muted, #344054) !important;
    font-size: 15px !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .btn:hover,
  body[data-page="1"] #product-offer #quantity-grp .btn:focus {
    background: #f5f9fc !important;
  }

  body[data-page="1"] #product-offer #quantity-grp .btn .fas {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px;
    height: 18px;
    line-height: 1 !important;
  }

  body[data-page="1"] #product-offer #add-to-cart .btn-primary {
    min-height: 56px !important;
    height: 56px !important;
    border-radius: 12px !important;
    font-size: 15.25px !important;
    font-weight: 830 !important;
    line-height: 1.08 !important;
    white-space: nowrap !important;
    box-shadow: 0 15px 25px -19px rgba(var(--brand-primary-rgb), 0.9) !important;
  }

  body[data-page="1"] #product-offer #add-to-cart .btn-primary .btn-basket-check {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    white-space: nowrap !important;
  }

  body[data-page="1"] #product-offer #add-to-cart .btn-primary .fas.fa-shopping-cart {
    flex: 0 0 auto;
    font-size: 16px !important;
  }

  body[data-page="1"] #product-offer .rt-pdp-payment-strip {
    margin-top: 9px !important;
    padding: 8px 9px !important;
    border-radius: 11px !important;
  }

  body[data-page="1"] .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 41%) !important;
    gap: 8px !important;
  }

  body[data-page="1"] .rt-pdp-mobile-cta__price {
    font-size: 19px !important;
  }

  body[data-page="1"] .rt-pdp-mobile-cta__button {
    min-height: 51px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 374.98px) {
  body[data-page="1"] #product-offer #add-to-cart > .row {
    gap: 7px !important;
  }

  body[data-page="1"] #product-offer #add-to-cart > .row > [class*="col"]:first-child {
    flex-basis: 30% !important;
    max-width: 30% !important;
  }

  body[data-page="1"] #product-offer #quantity-grp {
    grid-template-columns: 33px minmax(26px, 1fr) 33px !important;
  }

  body[data-page="1"] #product-offer #add-to-cart .btn-primary {
    font-size: 14.25px !important;
  }
}

/* ============================================================
 * 32. PDP MOBILE TRUST + REVIEWS v1
 * Ruhiger Bereich unter der Kaufzone und hochwertigere Bewertungen
 * ============================================================ */

body[data-page="1"] #tab-votes .reviews {
  color: var(--color-text, #101828);
}

body[data-page="1"] #reviews-overview {
  margin: 8px 0 20px !important;
  border: 1px solid var(--color-line, #dfeaf6);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 42px -34px rgba(16, 24, 40, 0.34);
  overflow: hidden;
}

body[data-page="1"] #reviews-overview > [class*="col"] {
  padding: 0 !important;
}

body[data-page="1"] #reviews-overview .card,
body[data-page="1"] #reviews-overview .card-gray {
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-page="1"] #reviews-overview .card-body {
  padding: 18px !important;
}

body[data-page="1"] #reviews-overview .subheadline {
  margin-bottom: 7px;
  color: var(--color-text, #111827);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.25;
  letter-spacing: 0;
}

body[data-page="1"] #reviews-overview .rating {
  color: #f5b51b;
  letter-spacing: 1px;
}

body[data-page="1"] #reviews-overview .btn-link.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0;
  color: var(--color-text, #111827);
  font-weight: 760;
  text-decoration: none;
}

body[data-page="1"] #reviews-overview .dropdown-menu {
  border: 1px solid var(--color-line, #dfeaf6);
  border-radius: 16px;
  box-shadow: 0 24px 52px -34px rgba(16, 24, 40, 0.42);
}

body[data-page="1"] #reviews-overview .dropdown-menu.min-w-lg {
  min-width: min(100%, 32rem);
}

body[data-page="1"] #reviews-overview .dropdown-body {
  padding: 12px;
}

body[data-page="1"] #reviews-overview .dropdown-body .progress {
  height: 16px;
  border-radius: 999px;
  background: var(--color-line, #edf2f7);
  overflow: hidden;
}

body[data-page="1"] #reviews-overview .dropdown-body .progress-bar {
  border-radius: 999px;
  background: var(--brand-primary);
}

body[data-page="1"] #reviews-list {
  margin-top: 4px;
}

body[data-page="1"] #reviews-list .verified-purchase-notice {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid var(--color-line, #dce9f6);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--color-text-muted, #344054);
  font-size: 13px;
  font-weight: 720;
  box-shadow: none;
}

body[data-page="1"] #reviews-list .pagination-wrapper {
  margin: 8px 0 14px !important;
  padding: 11px 12px;
  border: 1px solid var(--color-line, #e2edf7);
  border-radius: 14px;
  background: #fbfdff;
}

body[data-page="1"] #reviews-list .pagination {
  margin-bottom: 0;
}

body[data-page="1"] #reviews-list .page-link {
  min-width: 34px;
  min-height: 34px;
  border-color: var(--color-line, #dfeaf6);
  color: var(--color-text-muted, #344054);
  font-weight: 720;
}

body[data-page="1"] #reviews-list .page-link.active,
body[data-page="1"] #reviews-list .page-item.active .page-link {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #ffffff;
}

body[data-page="1"] #tab-votes .card.review {
  margin: 0 0 12px !important;
  border: 1px solid var(--color-line, #dfeaf6);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 38px -34px rgba(16, 24, 40, 0.45);
  overflow: hidden;
}

body[data-page="1"] #tab-votes .card.review .card-body {
  padding: 16px !important;
}

body[data-page="1"] #tab-votes .card.review .row {
  margin-right: 0;
  margin-left: 0;
}

body[data-page="1"] #tab-votes .card.review .text-center-util {
  padding: 0 0 8px !important;
  text-align: left !important;
}

body[data-page="1"] #tab-votes .card.review .rating {
  color: #f5b51b;
  letter-spacing: 1px;
}

body[data-page="1"] #tab-votes .card.review blockquote {
  margin: 0;
}

body[data-page="1"] #tab-votes .card.review .subheadline {
  display: block;
  margin-bottom: 7px;
  color: var(--color-text, #111827);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.26;
  letter-spacing: 0;
}

body[data-page="1"] #tab-votes .card.review p {
  margin-bottom: 10px;
  color: var(--color-text-muted, #475467);
  font-size: 14px;
  line-height: 1.48;
}

body[data-page="1"] #tab-votes .card.review .blockquote-footer {
  margin-top: 0;
  color: var(--color-text-soft, #667085);
  font-size: 12.5px;
  font-weight: 620;
}

@media (max-width: 767.98px) {
  html body[data-page="1"],
  body[data-page="1"] #content-wrapper {
    max-width: 100%;
    overflow-x: hidden;
  }

  body[data-page="1"] #product-offer.product-detail {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
  }

  body[data-page="1"] #product-offer .rt-pdp-payment-strip {
    margin-top: 9px !important;
    padding: 7px 9px !important;
    border-color: var(--color-line, #dfeaf6) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
  }

  body[data-page="1"] #product-offer .rt-pdp-payment-strip img {
    max-height: 38px !important;
    object-position: center center !important;
  }

  body[data-page="1"] #product-offer .rothler-trust-section {
    margin: 9px 0 0 !important;
    padding: 0 !important;
  }

  body[data-page="1"] #product-offer .rothler-trust-grid {
    gap: 7px !important;
    align-items: stretch;
  }

  body[data-page="1"] #product-offer .rothler-trust-card {
    min-width: 0;
    min-height: 54px !important;
    padding: 8px 9px !important;
    gap: 7px !important;
    border-color: var(--color-line, #dfeaf6) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body[data-page="1"] #product-offer .rothler-trust-iconwrap {
    flex: 0 0 30px;
    width: 30px !important;
    height: 30px !important;
    border-radius: 10px !important;
  }

  body[data-page="1"] #product-offer .rothler-trust-iconwrap svg {
    width: 16px !important;
    height: 16px !important;
  }

  body[data-page="1"] #product-offer .rothler-trust-text {
    min-width: 0;
  }

  body[data-page="1"] #product-offer .rothler-trust-text strong {
    font-size: 11.5px !important;
    line-height: 1.14 !important;
    overflow-wrap: normal;
    hyphens: auto;
  }

  body[data-page="1"] #product-offer .rothler-trust-text span {
    font-size: 10.5px !important;
    line-height: 1.16 !important;
  }

  body[data-page="1"] .rt-pdp-decision {
    margin-top: 18px !important;
  }
}

@media (max-width: 575.98px) {
  body[data-page="1"] #tab-votes {
    padding-right: 10px;
    padding-left: 10px;
  }

  body[data-page="1"] #reviews-overview {
    margin: 2px 0 16px !important;
    border-radius: 16px;
    overflow: visible;
  }

  body[data-page="1"] #reviews-overview > [class*="col"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #e7eff7;
  }

  body[data-page="1"] #reviews-overview > .order-1 {
    order: 0 !important;
  }

  body[data-page="1"] #reviews-overview > .order-0 {
    order: 1 !important;
  }

  body[data-page="1"] #reviews-overview > [class*="col"]:last-child {
    border-bottom: 0;
  }

  body[data-page="1"] #reviews-overview .card-body {
    padding: 15px !important;
  }

  body[data-page="1"] #reviews-overview .dropdown {
    position: static;
  }

  body[data-page="1"] #reviews-overview .btn-link.dropdown-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  body[data-page="1"] #reviews-overview .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 11px !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-menu:not(.show) {
    display: none !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-menu.show {
    display: block !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-body {
    padding: 0 !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-body .row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 36px;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-body .row:last-child {
    margin-bottom: 0 !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-body [class*="col"] {
    flex: initial !important;
    max-width: none !important;
    padding: 0 !important;
  }

  body[data-page="1"] #reviews-overview .dropdown-body a {
    color: var(--color-text-muted, #475467);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.15;
    text-decoration: none;
  }

  body[data-page="1"] #reviews-overview .dropdown-body .progress {
    height: 14px;
  }

  body[data-page="1"] #reviews-overview .dropdown-body .row > [class*="col"]:last-child {
    color: var(--color-text-muted, #475467);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-align: right;
  }

  body[data-page="1"] #reviews-list .pagination-wrapper {
    display: none !important;
  }

  body[data-page="1"] #reviews-list .pagination-wrapper > [class*="col"] {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  body[data-page="1"] #tab-votes .card.review {
    border-radius: 15px;
  }

  body[data-page="1"] #tab-votes .card.review .card-body {
    padding: 14px !important;
  }

  body[data-page="1"] #tab-votes .card.review .row[itemprop="review"] {
    display: block;
  }

  body[data-page="1"] #tab-votes .card.review .col {
    padding-right: 0;
    padding-left: 0;
  }
}
/* DH Hero section (NOVAchild) */
.dh-home-hero-2026 {
  position: relative;
  z-index: 1;
  overflow: hidden;
  min-height: 680px;
  padding: 0;
  background: #fff;
  border-top: 0;
  border-bottom: 0;
}

.dh-home-hero-2026::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 56%;
  background-image: radial-gradient(rgba(20,20,20,.14) 1.3px, transparent 1.5px);
  background-size: 20px 20px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 30%, transparent 62%);
          mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.5) 30%, transparent 62%);
  z-index: 0;
  pointer-events: none;
}

.dh-home-hero-2026__inner {
  width: 100%;
  min-height: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  align-items: stretch;
  gap: 0;
}

.dh-home-hero-2026__copy {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  max-width: none;
  align-self: center;
  justify-self: end;
  padding: 72px 72px 72px 24px;
}

.dh-home-hero-2026__eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--brand-primary);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
}

.dh-home-hero-2026__eyebrow span {
  display: inline-flex;
  align-items: center;
}

.dh-home-hero-2026__eyebrow span + span::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  margin-right: 8px;
  background: rgba(var(--brand-primary-rgb), 0.42);
}

.dh-home-hero-2026 h1 {
  max-width: 760px;
  margin: 0;
  color: #241817;
  font-size: 3.35rem;
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: 0;
}

.dh-home-hero-2026__lead {
  max-width: 650px;
  margin: 20px 0 0;
  color: rgba(36, 24, 23, 0.76);
  font-size: 1.08rem;
  line-height: 1.72;
}

.dh-home-hero-2026__quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.dh-home-hero-2026__quicklinks a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px 0 14px;
  border-radius: 999px;
  color: rgba(36, 24, 23, 0.86) !important;
  background: linear-gradient(180deg, #fff 0%, #fbf8f6 100%);
  border: 1px solid rgba(66, 13, 10, 0.12);
  box-shadow: 0 12px 28px rgba(36, 24, 23, 0.06);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none !important;
  transition: color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.dh-home-hero-2026__quicklinks a::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 9px;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), 0.28);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.06);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.dh-home-hero-2026__quicklinks a:hover,
.dh-home-hero-2026__quicklinks a:focus {
  color: var(--brand-primary) !important;
  border-color: rgba(var(--brand-primary-rgb), 0.3);
  box-shadow: 0 16px 34px rgba(var(--brand-primary-rgb), 0.1);
  transform: translateY(-1px);
}

.dh-home-hero-2026__quicklinks a:hover::before,
.dh-home-hero-2026__quicklinks a:focus::before {
  background: var(--brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.1);
}

.dh-home-hero-2026__visual {
  --dh-hero-overlap: clamp(180px, 13vw, 300px);
  position: relative;
  z-index: 0;
  min-height: 680px;
  height: 100%;
  width: calc(100% + var(--dh-hero-overlap));
  margin-left: calc(var(--dh-hero-overlap) * -1);
  overflow: hidden;
  isolation: isolate;
}

.dh-home-hero-2026__picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.54) 26%, rgba(0, 0, 0, 0.92) 43%, #000 54%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.54) 26%, rgba(0, 0, 0, 0.92) 43%, #000 54%);
}

.dh-home-hero-2026__atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.dh-home-hero-2026__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 0;
  background:
    linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 13%, rgba(255, 255, 255, 0.66) 30%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, rgba(36, 24, 23, 0) 74%, rgba(36, 24, 23, 0.1) 100%);
  pointer-events: none;
}

.dh-home-hero-2026__uspbar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0 clamp(24px, 5vw, 88px);
  list-style: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.07) 100%),
    var(--brand-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 -1px 0 rgba(66, 13, 10, 0.05);
}

.dh-home-hero-2026__uspbar li {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 7px 14px;
  color: #fff;
  font-size: clamp(0.76rem, 0.82vw, 0.86rem);
  font-weight: 900;
  line-height: 1.18;
  text-align: left;
}

.dh-home-hero-2026__uspicon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.dh-home-hero-2026__uspicon svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1299.98px) {
.dh-home-hero-2026__inner {
    grid-template-columns: minmax(0, 51%) minmax(0, 49%);
  }
.dh-home-hero-2026 h1 {
    font-size: 2.78rem;
  }
.dh-home-hero-2026__visual {
    min-height: 620px;
  }
}

@media (max-width: 991.98px) {
.dh-home-hero-2026 {
    min-height: 0;
    padding: 0;
  }
.dh-home-hero-2026__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }
.dh-home-hero-2026__copy {
    width: 100%;
    max-width: 760px;
    justify-self: center;
    padding: 30px 16px 28px;
  }
.dh-home-hero-2026 h1 {
    font-size: 2.45rem;
    line-height: 1.06;
  }
.dh-home-hero-2026__lead {
    font-size: 1rem;
  }
.dh-home-hero-2026__visual {
    min-height: 440px;
    height: 440px;
    width: 100%;
    margin-left: 0;
  }
.dh-home-hero-2026__picture {
    -webkit-mask-image: none;
    mask-image: none;
  }
.dh-home-hero-2026__visual::after {
    background: linear-gradient(180deg, rgba(251, 250, 248, 0.16) 0%, rgba(251, 250, 248, 0) 26%);
  }
.dh-home-hero-2026__uspbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px;
  }
.dh-home-hero-2026__uspbar li {
    min-height: 52px;
    justify-content: flex-start;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
.dh-home-hero-2026__uspbar li:nth-child(-n+2) {
    border-top: 0;
  }
}

@media (max-width: 575.98px) {
.dh-home-hero-2026 {
    padding: 0;
  }
.dh-home-hero-2026__eyebrow {
    margin-bottom: 14px;
    font-size: 0.72rem;
  }
.dh-home-hero-2026__eyebrow span + span::before {
    width: 20px;
  }
.dh-home-hero-2026 h1 {
    font-size: 2rem;
    line-height: 1.08;
  }
.dh-home-hero-2026__lead {
    margin-top: 15px;
    line-height: 1.58;
  }
.dh-home-hero-2026__quicklinks {
    margin-top: 16px;
  }
.dh-home-hero-2026__quicklinks a {
    min-height: 32px;
    font-size: 0.78rem;
  }
.dh-home-hero-2026__visual {
    min-height: 340px;
    height: 340px;
  }
.dh-home-hero-2026__atmosphere {
    object-position: 58% center;
  }
.dh-home-hero-2026__uspbar {
    grid-template-columns: 1fr;
    padding: 0;
  }
.dh-home-hero-2026__uspbar li,
  .dh-home-hero-2026__uspbar li:nth-child(odd) {
    min-height: 48px;
    padding: 10px 18px;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
.dh-home-hero-2026__uspbar li:first-child {
    border-top: 0;
  }
.dh-home-hero-2026__uspicon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
  }
}

/* ===== DH top bar — koyu ust bar var(--brand-topbar-bg) ===== */
#header-top-bar {
    background: var(--brand-topbar-bg) !important;
    display: flex !important;
    align-items: center;
}
#header-top-bar > .container-fluid { flex: 1 1 auto; min-width: 0; }
#header-top-bar .topbar-main .nav-link {
    color: #fff !important;
    opacity: .92;
    font-weight: 500;
    font-size: 13px;
    padding-top: .4rem;
    padding-bottom: .4rem;
}
#header-top-bar .topbar-main .nav-link:hover { opacity: 1; text-decoration: underline; }
#header-top-bar .topbar-main.nav-dividers > .nav-item + .nav-item > .nav-link {
    border-left: 1px solid rgba(255,255,255,.28);
    margin-left: .35rem;
    padding-left: .9rem;
}
/* sol promo */
.dh-topbar-promo {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    padding: 7px 0 7px 18px;
}
.dh-topbar-promo strong { font-weight: 700; }
.dh-topbar-promo__item--rating { display: inline-flex; align-items: center; gap: 6px; }
.dh-topbar-promo__stars { color: #ffce3a; letter-spacing: 1px; font-size: 12px; }
.dh-topbar-promo__sep { width: 1px; height: 13px; background: rgba(255,255,255,.32); display: inline-block; }
@media (max-width: 991.98px) { .dh-topbar-promo { display: none; } }

/* top bar — rothler display:inherit override (en son, kesin kazanir) */
#header-top-bar { display: flex !important; align-items: center !important; background: var(--brand-topbar-bg) !important; }
/* top bar düzen: promo sol, utility linkler sağ */
#header-top-bar .dh-topbar-promo { order: -1 !important; margin-right: auto !important; }
/* top bar: promo sol uc, linkler sag uc */
#header-top-bar > .container-fluid.d-lg-flex { justify-content: space-between !important; align-items: center !important; width: 100%; }

/* === top bar: gri divider gizle (beyaz kalsin), lottie, newsletter CTA === */
#header-top-bar .topbar-main.nav-dividers .nav-item:not(:last-child)::after { display: none !important; }
#header-top-bar .topbar-main.nav-dividers > .nav-item + .nav-item > .nav-link {
    border-left: 1px solid rgba(255,255,255,.35) !important;
}
/* lottie */
.dh-topbar-lottie { width: 22px; height: 22px; display: inline-block; vertical-align: middle; margin-left: 5px; }
/* Mobile: Haupt-Header bleibt sticky; die Promo-Top-Bar scrollt beim Runterscrollen weg
   (schlanker Sticky-Header, mehr Platz). -webkit-sticky sichert iOS-Safari ab. Die
   PDP-Subnav folgt automatisch der neuen Header-Unterkante (pdp-subnav-spy.js, pro Frame). */
@media (max-width: 991.98px) {
  /* Haupt-Header sticky mit NEGATIVEM top (= Top-Bar-Hoehe 34px): beim Runterscrollen
     schiebt sich die Promo-Top-Bar NATIV aus dem Bild, die Nav-Leiste bleibt oben kleben.
     Rein nativer Scroll -> butterweich; KEIN JS, KEINE max-height-Animation -> kein Rattern.
     Die PDP-Subnav folgt automatisch der Nav-Unterkante (pdp-subnav-spy misst sie). */
  #jtl-nav-wrapper { position: -webkit-sticky !important; position: sticky !important; top: -34px !important; }
}
.dh-topbar-promo__item--spez { display: inline-flex; align-items: center; }
/* newsletter CTA (5% Rabatt) */
.dh-topbar-newsletter {
    color: #fff !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 999px;
    line-height: 1.4;
    transition: background .15s ease, color .15s ease;
}
.dh-topbar-newsletter:hover { background: #fff; color: var(--brand-primary) !important; }
.dh-topbar-newsletter strong { font-weight: 700; }

/* newsletter: badge DEGIL, digerleri gibi duz; lottie ile birlikte */
.dh-topbar-newsletter {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    gap: 5px !important;
}
.dh-topbar-newsletter:hover { background: transparent !important; color: #fff !important; text-decoration: underline !important; }

/* === top bar düzen KESIN: promo SOL, utility linkler SAG === */
#header-top-bar > .container-fluid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
}
#header-top-bar > .container-fluid > .dh-topbar-promo { order: 1 !important; }
#header-top-bar > .container-fluid > ul.topbar-main { order: 2 !important; margin-left: auto !important; flex: 0 0 auto !important; }

/* anasayfa: hero ile header arasindaki bosluk (content-wrapper pt:18px) kaldir */
#content-wrapper:has(.dh-home-hero-2026) { padding-top: 0 !important; }

/* ========================================================================
   ANA MENU + MEGA MENU — tema kirmizisi (var(--brand-primary)) + modern panel
   ======================================================================== */

/* --- (A) Menu elemanlari: gold (#f8bf00) -> tema kirmizisi --- */
.navbar-nav > .nav-item > .nav-link:hover,
.navbar-nav > .nav-item > .nav-link:focus,
.navbar-nav > .nav-item.show > .nav-link,
.navbar-nav > .nav-item.active > .nav-link,
.navbar-nav > .nav-item > .nav-link.active {
    color: var(--brand-primary) !important;
}
/* aktif/hover alt cizgi (gold bar) -> kirmizi */
.navbar-nav .nav-link::after,
.navbar-nav .nav-link::before {
    border-color: var(--brand-primary) !important;
}
/* ust menude hover'da da alt cizgi animasyonla gelsin */
.navbar-nav > .nav-item > .nav-link:hover::after,
.navbar-nav > .nav-item.show > .nav-link::after,
.navbar-nav > .nav-item.show > .nav-link::before {
    width: 100% !important;
}

/* --- (B) Mega menu paneli: modern --- */
.navbar-nav > .nav-item > .dropdown-menu {
    border: 0 !important;
    border-top: 3px solid var(--brand-primary) !important;
    border-radius: 0 0 14px 14px !important;
    box-shadow: 0 26px 50px -18px rgba(17,17,17,.24), 0 2px 6px rgba(17,17,17,.06) !important;
    overflow: hidden;
    margin-top: 0 !important;
}
.navbar-nav > .nav-item > .dropdown-menu .dropdown-body {
    padding: 24px 0 28px !important;
}
/* sutunlar: 9 col tek satira sigmaz -> duzenli responsive grid */
.subcategory-wrapper .row.nav {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)) !important;
    gap: 4px 12px !important;
    margin: 0 !important;
}
.subcategory-wrapper .nav-item-lg-m,
.subcategory-wrapper .col.nav-item-lg-m {
    max-width: none !important;
    flex: initial !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* her kategori -> gorsel karti (resim ust, baslik alt) */
.subcategory-wrapper .nav-item-lg-m > a.d-block {
    display: block !important;
    padding: 10px 10px 14px !important;
    border-radius: 12px !important;
    color: #2b2b2b !important;
    text-align: center;
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background-color .18s ease, color .18s ease, box-shadow .22s ease, transform .18s ease, border-color .18s ease;
}
.subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-image,
.subcategory-wrapper .nav-item-lg-m > a.d-block img {
    display: block !important;
    width: 100% !important;
    height: 138px !important;
    object-fit: cover !important;
    border-radius: 9px !important;
    margin: 0 0 11px !important;
    background: #f5f5f6;
    transition: transform .28s ease;
}
.subcategory-wrapper .nav-item-lg-m > a.d-block .nav-mobile-heading,
.subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-text,
.subcategory-wrapper .nav-item-lg-m > a.d-block strong {
    display: block !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: inherit !important;
    margin: 0 !important;
    letter-spacing: 0 !important;
}
.subcategory-wrapper .nav-item-lg-m > a.d-block:hover {
    background: #fbeceb !important;
    color: var(--brand-primary) !important;
    border-color: #f1d2d0 !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 22px -10px rgba(var(--brand-primary-rgb),.28);
}
.subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-image,
.subcategory-wrapper .nav-item-lg-m > a.d-block:hover img {
    transform: scale(1.05);
}

/* ========================================================================
   HEADER yeniden duzen + sari hover'lari tema kirmizisina cevirme
   ======================================================================== */

/* --- (A) Duzen: logo -> menu -> (saga yasli) arama + hesap + sepet --- */
@media (min-width: 992px) {
    #jtl-nav-wrapper {
        background: var(--brand-primary) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        min-height: 92px !important;
        column-gap: 0;
        row-gap: 0;
        box-shadow: 0 12px 24px -22px rgba(var(--brand-topbar-rgb), .55);
    }
    #jtl-nav-wrapper > .container-fluid {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        background: transparent !important;
    }
    #jtl-nav-wrapper .hide-navbar {
        order: 1 !important;
        padding: 0 92px !important;
    }
    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        order: 2 !important;
        padding: 0 92px 8px !important;
    }
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        min-height: 58px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        column-gap: 18px !important;
        margin: 0 !important;
    }
    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar.justify-content-start {
        display: flex !important;
        min-height: 24px !important;
        height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
    #jtl-nav-wrapper > .container-fluid,
    #jtl-nav-wrapper .navbar {
        background: transparent !important;
    }
    #jtl-nav-wrapper .nav-logo-wrapper,
    #jtl-nav-wrapper .toggler-logo-wrapper,
    #jtl-nav-wrapper .logo-wrapper,
    #jtl-nav-wrapper .navbar-brand {
        background: transparent !important;
    }
    /* siralama */
    #jtl-nav-wrapper .nav-logo-wrapper   { order: 1 !important; flex: 0 0 auto !important; }
    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
    }
    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        display: block !important;
        width: 200px !important;
        max-width: 200px !important;
        height: auto !important;
        max-height: 46px !important;
        object-fit: contain !important;
    }
    #jtl-nav-wrapper .dh-header-trust-icons-wrapper { order: 2 !important; flex: 0 0 auto !important; align-items: center !important; padding-left: 0 !important; padding-right: 0 !important; }
    /* arama: menuden kalan boslugu doldurur (tek esnek oge) */
    #jtl-nav-wrapper .main-search-wrapper{
        order: 3 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(470px, 34vw) !important;
        min-width: 330px !important;
        max-width: 470px !important;
        margin: 0 !important;
        z-index: 2;
    }
    #jtl-nav-wrapper .nav-icons-wrapper  { order: 4 !important; flex: 0 0 auto !important; margin-left: auto !important; }
    #jtl-nav-wrapper .navbar-collapse    { order: initial !important; flex: 0 1 auto !important; width: auto !important; }
    #jtl-nav-wrapper #mainNavigation.navbar-collapse {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: center !important;
    }

    /* menu yatay scroll'a dusmesin: arrow'lari gizle, tasmayi serbest birak */
    #jtl-nav-wrapper .nav-scrollbar         { overflow: visible !important; width: auto !important; min-height: 0 !important; height: auto !important; }
    #jtl-nav-wrapper .nav-mobile-body       { min-height: 0 !important; height: auto !important; }
    #jtl-nav-wrapper .nav-scrollbar-inner   { overflow: visible !important; flex-wrap: nowrap !important; min-height: 0 !important; height: auto !important; align-items: center !important; align-self: center !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
    #jtl-nav-wrapper .nav-scrollbar-arrow   { display: none !important; }
    /* arama input'u sarmalayicisini doldursun */
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper .nav-item:first-child { width: 100% !important; flex: 1 1 auto !important; }

    #jtl-nav-wrapper .dh-header-trust-icons {
        display: block;
        width: 122px;
        max-width: 122px;
        height: auto;
        max-height: 36px;
        object-fit: contain;
        pointer-events: none;
        user-select: none;
    }

    /* Koyu kirmizi normal header: logo, menu ve ikonlar beyaz tona doner. */
    #jtl-nav-wrapper .navbar-brand img {
        filter: none !important;
    }
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus,
    #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link,
    #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link,
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.active,
    #jtl-nav-wrapper .nav-icons-wrapper > .nav-item > .nav-link,
    #jtl-nav-wrapper .nav-icons-wrapper .nav-link,
    #jtl-nav-wrapper .cart-icon-dropdown .cart-price,
    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price,
    #jtl-nav-wrapper .cart-icon-dropdown .price,
    #jtl-nav-wrapper .account-icon-dropdown > .nav-link,
    #jtl-nav-wrapper .form-icon-trigger-label {
        color: rgba(255,255,255,.92) !important;
    }
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
    #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link,
    #jtl-nav-wrapper .nav-icons-wrapper .nav-link:hover {
        color: #fff !important;
    }
    #jtl-nav-wrapper .navbar-nav .nav-link::after,
    #jtl-nav-wrapper .navbar-nav .nav-link::before {
        border-color: #fff !important;
    }
    #jtl-nav-wrapper .nav-icons-wrapper svg,
    #jtl-nav-wrapper .nav-icons-wrapper .svg-inline--fa,
    #jtl-nav-wrapper .account-icon-dropdown svg,
    #jtl-nav-wrapper .cart-icon-dropdown svg {
        color: rgba(255,255,255,.9) !important;
        fill: rgba(255,255,255,.9) !important;
    }
    #jtl-nav-wrapper .nav-icons-wrapper .nav-link:hover svg,
    #jtl-nav-wrapper .nav-icons-wrapper .nav-link:hover .svg-inline--fa,
    #jtl-nav-wrapper .account-icon-dropdown > .nav-link:hover svg,
    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link:hover svg {
        color: #fff !important;
        fill: #fff !important;
    }
    #jtl-nav-wrapper .main-search-wrapper input#search-header,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        background-color: #fff !important;
        border-color: #fff !important;
        color: #181819 !important;
        height: 42px !important;
        min-height: 42px !important;
        font-size: 15px !important;
    }
    #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
    }
    #jtl-nav-wrapper .navbar-nav .nav-link::after,
    #jtl-nav-wrapper .navbar-nav .nav-link::before {
        border-width: 0 0 2px 0 !important;
        bottom: 0 !important;
    }
    #jtl-nav-wrapper .navbar-nav > .nav-item:has(> .dh-sale-link),
    #jtl-nav-wrapper .navbar-nav > .nav-item.dh-sale-nav-hidden,
    #jtl-nav-wrapper .dh-sale-link {
        display: none !important;
    }
}

/* Mobile PDP breadcrumb: reduce the vertical gap before the product image. */
@media (max-width: 767.98px) {
    body[data-page="1"] .breadcrumb-container {
        padding-bottom: 0 !important;
    }

    body[data-page="1"] .breadcrumb-wrapper {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body[data-page="1"] #product-offer.product-detail {
        margin-top: -14px !important;
    }
}

@media (min-width: 992px) and (max-width: 1320px) {
    #jtl-nav-wrapper .hide-navbar {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        padding-left: 64px !important;
        padding-right: 64px !important;
    }
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        column-gap: 14px !important;
    }
    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: 180px !important;
        max-width: 180px !important;
    }
    #jtl-nav-wrapper .dh-header-trust-icons {
        width: 108px;
        max-width: 108px;
    }
    #jtl-nav-wrapper .main-search-wrapper {
        width: min(410px, 32vw) !important;
        min-width: 290px !important;
        max-width: 410px !important;
    }
}

/* --- (B) Sari (#f8bf00) hover -> tema kirmizisi (var(--brand-primary)) --- */
a:hover,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
header a:not(.dropdown-item):not(.btn):hover,
.nav-icons-wrapper .nav-link:hover,
.account-icon-dropdown > .nav-link:hover,
.cart-icon-dropdown > .nav-link:hover,
.form-icon-trigger-label:hover,
.btn-link:hover,
.page-link:hover {
    color: var(--brand-primary) !important;
}
/* ikon svg/fill hover */
.nav-icons-wrapper .nav-link:hover svg,
.nav-icons-wrapper .nav-link:hover .svg-inline--fa,
header a:hover svg {
    color: var(--brand-primary) !important;
    fill: var(--brand-primary) !important;
}
/* ust bar (kirmizi zemin) linkleri kirmizi olmasin -> beyaz kalsin */
#header-top-bar a:not(.dropdown-item):not(.btn):hover {
    color: #fff !important;
    text-decoration: underline;
}

/* ========================================================================
   HERO sol kolon — yeni tasarim (badge, baslik, kartlar, CTA, proof)
   ======================================================================== */
.dh-home-hero-2026__copy { text-align: left; }

/* badge pill */
.dh-hero2__badge {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 9px 16px; margin: 0 0 26px;
    border: 1px solid #e7e7ea; border-radius: 999px; background: #fff;
    box-shadow: 0 1px 2px rgba(17,17,17,.04);
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.dh-hero2__badge-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary); flex: 0 0 auto;
    box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb),.45);
    animation: dh-hero2-badge-pulse 2s ease-out infinite;
}
@keyframes dh-hero2-badge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb),.45); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--brand-primary-rgb),0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb),0); }
}
@media (prefers-reduced-motion: reduce) {
    .dh-hero2__badge-dot { animation: none; }
}
.dh-hero2__badge-strong { color: var(--brand-primary); font-weight: 700; }
.dh-hero2__badge-sep { width: 1px; height: 13px; background: #d9d9dd; }
.dh-hero2__badge-muted { color: #6f757e; font-weight: 600; } /* AA 4.64 statt 3.26 */

/* baslik */
.dh-home-hero-2026 h1.dh-hero2__title {
    margin: 0 !important;
    font-weight: 400 !important;
    line-height: 1.07 !important;
    letter-spacing: -.02em !important;
    font-size: clamp(33px, 3.8vw, 57px) !important;
    color: var(--color-text, #15171a) !important;
}
.dh-hero2__title-strong { display: block; font-weight: 800; color: var(--color-text, #15171a); }
.dh-hero2__title-light  { display: block; font-weight: 400; color: #2a2d31; }
.dh-hero2__dot { color: var(--brand-primary); }

/* kirmizi cizgi */
.dh-hero2__rule { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--brand-primary); margin: 24px 0 0; }

/* lead */
.dh-home-hero-2026 .dh-hero2__lead {
    margin: 22px 0 28px !important;
    max-width: 47ch; color: #5b6066 !important;
    font-size: 16.5px !important; line-height: 1.7 !important; font-weight: 400 !important;
}

/* kategori kartlari */
.dh-hero2__cats { display: flex; flex-wrap: wrap; gap: 13px; margin: 0 0 30px; }
.dh-hero2__cat {
    flex: 1 1 120px; min-width: 0;
    display: flex; align-items: center; gap: 11px;
    padding: 13px 16px; border: 1px solid #e7e7ea; border-radius: 14px; background: #fff;
    text-decoration: none; color: #23262a; font-weight: 600; font-size: 13.5px; line-height: 1.18;
    box-shadow: 0 1px 2px rgba(17,17,17,.03);
    transition: border-color .18s, box-shadow .2s, transform .18s, color .18s;
}
.dh-hero2__cat:hover { border-color: #f0cfcd; box-shadow: 0 10px 22px -12px rgba(var(--brand-primary-rgb),.30); transform: translateY(-2px); color: var(--brand-primary); text-decoration: none; }
.dh-hero2__cat-ico { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 10px; background: #fbeceb; color: var(--brand-primary); flex: 0 0 auto; }
.dh-hero2__cat-ico svg { width: 20px; height: 20px; }
.dh-hero2__cat-label { min-width: 0; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }

/* CTA satiri */
.dh-hero2__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 20px 24px; }
.dh-hero2__btn {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 15px 28px; border-radius: 999px; background: var(--brand-primary); color: #fff;
    font-weight: 700; font-size: 15.5px; text-decoration: none;
    box-shadow: 0 14px 26px -12px rgba(var(--brand-primary-rgb),.5);
    transition: background .18s, transform .18s, box-shadow .2s;
}
.dh-hero2__btn:hover { background: var(--brand-primary-dark); transform: translateY(-2px); color: #fff; text-decoration: none; box-shadow: 0 18px 30px -12px rgba(var(--brand-primary-rgb),.55); }
.dh-hero2__btn-arrow { width: 19px; height: 19px; flex: 0 0 auto; }
.dh-hero2__advice {
    align-self: center; color: #23262a; font-weight: 600; font-size: 14.5px;
    text-decoration: none; border-bottom: 2px solid #d9b3b1; padding-bottom: 2px;
    transition: color .18s, border-color .18s;
}
.dh-hero2__advice:hover { color: var(--brand-primary); border-color: var(--brand-primary); text-decoration: none; }

/* sosyal kanit: avatar + yildiz */
.dh-hero2__proof { display: flex; align-items: center; gap: 12px; }
.dh-hero2__avatars { display: inline-flex; }
.dh-hero2__avatar {
    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff;
    margin-left: -10px; box-shadow: 0 1px 3px rgba(0,0,0,.20);
    object-fit: cover; background: #ececed; display: block;
}
.dh-hero2__avatar:first-child { margin-left: 0; }
.dh-hero2__proof-text { display: flex; flex-direction: column; line-height: 1.18; }
.dh-hero2__stars { color: var(--brand-primary); font-size: 14px; letter-spacing: 2px; }
.dh-hero2__proof-meta { font-size: 13px; color: #5b6066; }
.dh-hero2__proof-meta strong { color: #1a1d21; font-weight: 700; }

@media (max-width: 575px) {
    .dh-hero2__cat { flex: 1 1 140px; }
    .dh-hero2__cta { gap: 16px; }
}

/* (entfernt 19.07.2026: die alten OPC-Startseiten-Bloecke existieren seit
   der neuen OPC-Seite "Homepage Neu" nicht mehr — Verstecke-Hacks obsolet) */

/* --- urun karti: ustu cizili orijinal fiyat (UVP/Streichpreis) — fiyatin ustunde, tema kirmizisi --- */
.rt-productlist-uvp {
    margin: 0 0 1px;
    font-size: 13px;
    line-height: 1.15;
    color: var(--brand-primary);
    font-weight: 600;
}
.rt-productlist-uvp s { text-decoration: line-through; color: var(--brand-primary); }

/* --- urun karti ribbon (AUF LAGER) sol alt yesil fold kosesini kaldir --- */
.productbox-ribbon.ribbon::before,
.productbox-ribbon.ribbon::after { display: none !important; content: none !important; }

/* --- urun karti: ana satis fiyati siyah --- */
.productbox .price.productbox-price,
.productbox .price.productbox-price span,
.productbox .price.productbox-price a { color: var(--color-text, #15171a) !important; }

/* --- urun karti: varyasyon bilgisi tema kirmizisi --- */
.rt-productlist-variation,
.rt-productlist-variation span { color: var(--brand-primary) !important; }

/* ========================================================================
   PDP Welle 1 #1 — CTA alti Kaufrisiko / Trust-Zeile (Figma Booster 15)
   ======================================================================== */
.rt-pdp-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;
    margin: 14px 0 12px;
    padding: 0;
}
.rt-pdp-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.25;
    font-weight: 600;
    color: #2b2e33;
}
.rt-pdp-trust__item svg {
    width: 17px;
    height: 17px;
    color: var(--brand-primary);
    flex: 0 0 auto;
}
@media (max-width: 575px) {
    .rt-pdp-trust { gap: 8px 14px; }
    .rt-pdp-trust__item { font-size: 12.5px; }
}

/* ========================================================================
   PDP Buybox — Design-Heizungen Mockup Layer (rechte Kaufbox)
   ======================================================================== */
#product-offer .product-info-inner {
    padding: 28px 30px 24px;
    border: 1px solid var(--color-line, #e9eaee);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 46px -34px rgba(15, 23, 42, .28);
}

#product-offer .dh-pdp-series-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 13px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #fbeceb;
    color: var(--brand-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

#product-offer .product-title.h2 {
    max-width: 13.8em;
    font-size: clamp(30px, 2.35vw, 40px);
    line-height: 1.12;
    font-weight: 820;
    color: #070b16;
}

#product-offer .rating-wrapper {
    margin-top: 14px;
    margin-bottom: 14px;
}

#product-offer .rating-wrapper .rating {
    color: #ffb21f !important;
    font-size: 17px;
}

#product-offer .liebenauch {
    margin: 0 0 22px;
    padding: 7px 12px 7px 8px;
    border: 1px solid var(--color-line, #eef0f3);
    background: #f5f6f7;
    box-shadow: none;
}

#product-offer .shortdesc {
    margin: 18px 0 24px !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#product-offer .shortdesc ul {
    grid-template-columns: 1fr;
    gap: 17px;
}

#product-offer .shortdesc li {
    gap: 14px;
    color: var(--color-text, #101828);
    font-size: 15px;
    line-height: 1.35;
}

#product-offer .shortdesc li img {
    width: 22px;
    height: 22px;
    margin-top: 0;
    filter: drop-shadow(0 2px 5px rgba(var(--brand-primary-rgb), .14));
}

#product-offer .shortdesc strong {
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    color: var(--color-text, #111827);
}

/* Preiszeile: Verkaufspreis + roter Spar-Pill + UVP in einer ruhigen Zeile. */
#product-offer .price_wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 26px 0 12px !important;
}

#product-offer .price_wrapper .price.h1 {
    order: 1;
    color: #070b16 !important;
    font-size: clamp(34px, 2.8vw, 46px) !important;
    line-height: .98 !important;
}

#product-offer .rothler-price-block {
    order: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

#product-offer .rothler-sale-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#product-offer .rothler-discount-pill {
    order: 1;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 8px 18px -12px rgba(var(--brand-primary-rgb), .7);
    font-size: 14px;
    font-weight: 800;
}

#product-offer .rothler-uvp {
    order: 2;
    color: #6f7680;
    font-size: 15px;
    font-weight: 600;
}

#product-offer .rothler-uvp s {
    color: #6f7680;
    text-decoration-thickness: 1.5px;
}

#product-offer .rothler-savings-row {
    display: none;
}

#product-offer .rothler-price-benefits {
    order: 3;
    width: 100%;
    margin-top: 2px;
    color: #777f89;
    font-size: 13px;
}

/* Verfuegbarkeit: mockup-nah, aber echte JTL-Texte bleiben erhalten. */
#product-offer .stock-information.stock-information-p {
    margin: 18px 0 18px !important;
}

#product-offer .delivery-status {
    padding: 14px 16px;
    border: 1px solid #cfe7d8;
    border-radius: 14px;
    background: linear-gradient(180deg, #f3fbf6 0%, #eff8f2 100%);
}

#product-offer .delivery-status ul {
    gap: 8px;
}

#product-offer .delivery-status li {
    display: flex;
    align-items: center;
}

#product-offer .rt-product-delivery-time__inner {
    padding: 0;
    border: 0;
    background: transparent;
    color: #1c6b4b;
}

#product-offer .delivery-status .status,
#product-offer .rt-product-delivery-time__label,
#product-offer .rt-product-delivery-time__value,
#product-offer .rt-product-delivery-time__hint {
    color: #1c6b4b !important;
}

#product-offer .delivery-status .status-icon {
    background: #2e9e6b;
    color: #fff;
}

/* Varianten: pillartige Auswahl, aktiver Zustand rot wie im Mockup. */
#product-offer .row.variations.switch-variations {
    padding: 0;
    border: 0;
    background: transparent;
}

#product-offer .variation-wrapper dt {
    margin-bottom: 9px;
    color: var(--color-text, #111827);
    font-size: 15px;
}

#product-offer .swatches-text {
    min-height: 44px;
    padding: 11px 17px !important;
    border-color: var(--color-line, #dde1e7) !important;
    border-radius: 8px !important;
    background: #fff;
    color: var(--color-text-muted, #374151);
    font-size: 14px;
    font-weight: 700;
}

#product-offer .swatches-text:hover {
    border-color: #e2aaa8 !important;
    background: #fff8f8 !important;
}

#product-offer .swatches-text.active {
    border-color: var(--brand-primary) !important;
    background: #fff7f7 !important;
    color: var(--brand-primary) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .18);
}

#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle:hover,
#product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle:focus,
#product-offer .variation-wrapper .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--brand-primary) !important;
    background-color: #fffafa !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .08) !important;
}

/* CTA: roter Warenkorb + weisser Jetzt-kaufen Button darunter. */
#product-offer #add-to-cart .basket-form-inline {
    align-items: stretch;
}

#product-offer #quantity-grp.choose_quantity {
    min-height: 56px;
    border: 1px solid var(--color-line, #e1e5ea);
    border-radius: 8px;
    overflow: hidden;
}

#product-offer #add-to-cart .btn-primary {
    min-height: 56px;
    border-radius: 8px;
    background: #b90000;
    border-color: #b90000;
    box-shadow: 0 12px 24px -16px rgba(185, 0, 0, .6);
}

#product-offer #add-to-cart .btn-primary:hover,
#product-offer #add-to-cart .btn-primary:focus {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}

#product-offer .dh-pdp-buy-now {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin: 14px 0 14px;
    border: 1px solid var(--color-line, #dde1e7);
    border-radius: 8px;
    background: #fff;
    color: var(--color-text, #111827);
    font-size: 16px;
    font-weight: 760;
    text-decoration: none;
}

#product-offer .dh-pdp-buy-now:hover,
#product-offer .dh-pdp-buy-now:focus {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .08);
}

#product-offer .rt-pdp-payment-strip {
    margin-top: 4px;
    padding: 4px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#product-offer .rt-pdp-payment-strip img {
    max-height: 38px;
    object-position: center;
}

#product-offer .rothler-trust-section {
    margin-top: 14px;
    padding-top: 0;
}

#product-offer .rothler-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

#product-offer .rothler-trust-card {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 5px;
    border: 0;
    background: transparent;
    text-align: center;
}

#product-offer .rothler-trust-iconwrap {
    width: 24px;
    height: 24px;
    background: transparent;
    color: var(--color-text-soft, #6b7280);
}

#product-offer .rothler-trust-text {
    align-items: center;
}

#product-offer .rothler-trust-text strong {
    font-size: 11px;
    line-height: 1.15;
    color: var(--color-text-muted, #374151);
}

#product-offer .rothler-trust-text span {
    display: none;
}

/* Reihenfolge wie Mockup:
   Benefits -> Preis/Availability -> Varianten -> Menge/Warenkorb. */
#product-offer .product-info .product-offer {
    display: flex;
    flex-direction: column;
}

#product-offer .product-info .product-offer > .row:has(.price_wrapper) {
    order: 10;
}

#product-offer .product-info .product-offer > .row.variations.switch-variations {
    order: 20;
}

#product-offer .product-info .product-offer > #add-to-cart,
#product-offer .product-info .product-offer > .rt-pdp-payment-strip,
#product-offer .product-info .product-offer > .rothler-trust-section,
#product-offer .product-info .product-offer > .dh-pdp-buy-now {
    order: 30;
}

#product-offer .price_wrapper .price_label.pricestarting {
    display: none;
}

/* Detail fiyat markup'i artik price.tpl tarafindan direkt mockup sirasi ile render edilir. */
#product-offer .dh-pdp-price-wrapper {
    display: block;
    margin: 28px 0 18px !important;
}

#product-offer .dh-pdp-price-line {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    max-width: 100%;
}

#product-offer .dh-pdp-current-price {
    order: 1 !important;
    flex: 0 0 auto;
    margin: 0 !important;
    color: #070b16 !important;
    font-size: 36px !important;
    font-weight: 840 !important;
    line-height: .92 !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap;
}

#product-offer .dh-pdp-save-pill {
    order: 2;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    background: var(--brand-primary);
    color: #fff;
    box-shadow: 0 9px 20px -12px rgba(var(--brand-primary-rgb), .85);
    font-size: 14px;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
}

#product-offer .dh-pdp-old-price {
    order: 3;
    color: var(--color-text-soft, #8b93a1);
    font-size: 18px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

#product-offer .dh-pdp-old-price s {
    color: var(--color-text-soft, #8b93a1);
    text-decoration-color: #6f7682;
    text-decoration-thickness: 2px;
}

#product-offer .dh-pdp-taxline {
    margin-top: 10px;
    color: var(--color-text-soft, #9aa0aa);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

/* Eski #product-offer .price_wrapper .price.h1 order kurali yeni markup'a sizmasin. */
#product-offer .dh-pdp-price-line > .dh-pdp-current-price.price.h1 {
    order: 1 !important;
}

@media (max-width: 991px) {
    #product-offer .product-info-inner {
        padding: 22px 18px;
        border-radius: 18px;
    }
    #product-offer .rothler-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* PDP Availability card: referans mockup yesil kutu + progress bar. */
#product-offer .stock-information.stock-information-p {
    width: 100%;
    margin: 18px 0 20px !important;
    padding: 0 !important;
    border: 0 !important;
}

#product-offer .delivery-status.dh-pdp-stock-card {
    width: 100%;
    padding: 21px 22px 20px !important;
    border: 1px solid #dcefe2 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #f7fcf8 0%, #f2faf4 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 16px 34px -30px rgba(40, 96, 61, .35);
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 11px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item {
    display: grid !important;
    grid-template-columns: 27px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    min-height: 26px;
    margin: 0 !important;
    color: #172033 !important;
    font-size: 16px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item strong {
    min-width: 0;
    color: inherit;
    font: inherit;
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item--primary {
    color: #34783d !important;
    font-size: 17px !important;
    font-weight: 840 !important;
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item--muted .dh-pdp-stock-check {
    background: #e5f5e9;
    color: #5cae66;
    box-shadow: inset 0 0 0 1px rgba(83, 161, 92, .22), 0 0 0 4px rgba(76, 166, 88, .08);
}

#product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 999px;
    background: #4f9f50;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(79, 159, 80, .12);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

#product-offer .dh-pdp-stock-progress {
    margin-top: 27px;
}

#product-offer .dh-pdp-stock-progress__text {
    margin-bottom: 13px;
    color: #202635;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}

#product-offer .dh-pdp-stock-progress__track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e8e8ef;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, .08);
}

#product-offer .dh-pdp-stock-progress__fill {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b50908 0%, #d01816 100%);
    box-shadow: 0 0 0 1px rgba(var(--brand-primary-rgb), .14), 0 5px 12px rgba(var(--brand-primary-rgb), .28);
}

#product-offer .dh-pdp-stock-progress__labels {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
    color: #6f7683;
    font-size: 15px;
    font-weight: 780;
    line-height: 1;
}

#product-offer .dh-pdp-stock-progress__labels span:nth-child(2) {
    text-align: center;
}

#product-offer .dh-pdp-stock-progress__labels span:nth-child(3) {
    text-align: right;
}

@media (max-width: 575px) {
    #product-offer .delivery-status.dh-pdp-stock-card {
        padding: 18px 16px !important;
        border-radius: 14px !important;
    }

    #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item {
        grid-template-columns: 24px minmax(0, 1fr);
        column-gap: 10px;
        font-size: 14.5px !important;
    }

    #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item--primary {
        font-size: 15.5px !important;
    }

    #product-offer .dh-pdp-stock-progress__text,
    #product-offer .dh-pdp-stock-progress__labels {
        font-size: 13.5px;
    }
}

/* PDP Variants + CTA: referans mockup alt satin alma bolgesi. */
#product-offer .row.variations.switch-variations {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

#product-offer .switch-variations dl,
#product-offer .switch-variations dd.form-group {
    margin: 0 !important;
}

#product-offer .variation-wrapper {
    margin: 0 0 20px !important;
}

#product-offer .variation-wrapper:last-child {
    margin-bottom: 0 !important;
}

#product-offer .variation-wrapper dt {
    margin-bottom: 10px !important;
    color: var(--color-text, #101828) !important;
    font-size: 16px !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
}

#product-offer .dh-pdp-radio-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

#product-offer .dh-pdp-radio-option {
    display: inline-flex;
    max-width: 100%;
}

#product-offer .dh-pdp-radio-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

#product-offer .dh-pdp-radio-pill {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 45px;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 19px;
    border: 1px solid var(--color-line, #d9dee7);
    border-radius: 7px;
    background: #fff;
    color: var(--color-text-muted, #4b5563);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
    cursor: pointer;
    font-size: 15px;
    font-weight: 740;
    line-height: 1.15;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, color .15s ease, background .15s ease;
}

#product-offer .dh-pdp-radio-pill::before,
#product-offer .dh-pdp-radio-pill::after {
    display: none !important;
    content: none !important;
}

#product-offer .dh-pdp-radio-pill:hover {
    border-color: var(--brand-accent);
    color: var(--brand-primary);
}

#product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
#product-offer .dh-pdp-radio-pill.is-active {
    border-color: var(--brand-accent);
    background: #fff;
    color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .22), 0 6px 14px -12px rgba(var(--brand-primary-rgb), .7);
}

#product-offer .dh-pdp-radio-input:focus-visible + .dh-pdp-radio-pill {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .14);
}

#product-offer .dh-pdp-radio-pill__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* §45 Watt an Groessen-Pills: zweizeilige Pill (Groesse + dezente Watt-Zeile),
   nur wenn das Template eine eindeutige Watt fuer den Wert liefert
   (dh_variation_pills.tpl). Ohne :has-Support degradiert es zu einzeilig
   mit Watt daneben — akzeptabel. */
#product-offer .dh-pdp-radio-pill:has(.dh-pdp-radio-pill__watt) {
    flex-direction: column;
    gap: 3px;
    padding-top: 7px;
    padding-bottom: 7px;
}

/* 23.08.2026: bewusst zurueckgenommen. Die Wattzahl steht bei den Wasser-
   Modellen in BEIDEN Groessengruppen (Baubreite und Bauhoehe) — rechnerisch
   richtig, weil beide Optionen auf denselben Artikel zeigen, optisch aber
   doppelt. Sie soll lesbar bleiben, aber der Groesse eindeutig untergeordnet
   sein: leichter, kleiner, blasser. Das Wort "Watt" kuerzt das Template auf
   "W" (mit geschuetztem Leerzeichen, damit "519 W" nicht umbricht). */
#product-offer .dh-pdp-radio-pill__watt {
    display: block;
    color: var(--color-text-soft, #7b8494);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .01em;
    white-space: nowrap;
}

#product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill .dh-pdp-radio-pill__watt,
#product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__watt {
    color: rgba(var(--brand-primary-rgb), .58);
}

#product-offer #add-to-cart {
    margin-top: 0 !important;
}

#product-offer #add-to-cart .basket-form-inline {
    display: grid !important;
    grid-template-columns: 136px minmax(0, 1fr);
    align-items: stretch !important;
    gap: 14px !important;
    margin: 0 !important;
}

#product-offer #add-to-cart .basket-form-inline > [class*="col"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex: initial !important;
}

#product-offer #quantity-grp.choose_quantity,
#product-offer #add-to-cart .btn-primary {
    min-height: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
}

#product-offer #quantity-grp.choose_quantity {
    display: grid !important;
    grid-template-columns: 42px minmax(34px, 1fr) 42px;
    border: 1px solid var(--color-line, #dbe1ea) !important;
    background: #fff !important;
}

#product-offer #quantity-grp.choose_quantity:has(.unit) {
    grid-template-columns: 40px minmax(32px, 1fr) 28px 40px;
}

#product-offer #quantity-grp .input-group-prepend,
#product-offer #quantity-grp .input-group-append {
    display: contents !important;
}

#product-offer #quantity-grp .input-group-prepend .btn {
    grid-column: 1;
}

#product-offer #quantity-grp input.quantity {
    grid-column: 2;
}

#product-offer #quantity-grp:not(:has(.unit)) .input-group-append .btn {
    grid-column: 3;
}

#product-offer #quantity-grp:has(.unit) .input-group-text.unit {
    grid-column: 3;
}

#product-offer #quantity-grp:has(.unit) .input-group-append .btn {
    grid-column: 4;
}

#product-offer #quantity-grp .btn,
#product-offer #quantity-grp input,
#product-offer #quantity-grp .input-group-text {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: 58px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#product-offer #quantity-grp input.quantity {
    padding: 0 !important;
    color: var(--color-text, #101828) !important;
    font-size: 19px !important;
    font-weight: 760 !important;
    text-align: center !important;
}

#product-offer #quantity-grp .btn {
    color: var(--color-text-muted, #475467) !important;
    font-size: 17px !important;
}

#product-offer #quantity-grp .btn:hover,
#product-offer #quantity-grp .btn:focus {
    background: var(--color-surface-soft, #f7f8fa) !important;
    color: var(--brand-primary) !important;
}

#product-offer #add-to-cart .btn-primary {
    background: #a90000 !important;
    border-color: #a90000 !important;
    color: #fff !important;
    box-shadow: 0 14px 24px -18px rgba(var(--brand-primary-rgb), .8) !important;
    font-size: 18px !important;
    font-weight: 820 !important;
    letter-spacing: 0 !important;
}

#product-offer #add-to-cart .btn-primary .btn-basket-check {
    display: inline-flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 13px;
}

#product-offer #add-to-cart .btn-primary .fas.fa-shopping-cart {
    font-size: 20px !important;
}

#product-offer .dh-pdp-buy-now {
    min-height: 58px !important;
    margin: 14px 0 14px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

@media (max-width: 575px) {
    #product-offer #add-to-cart .basket-form-inline {
        grid-template-columns: 124px minmax(0, 1fr);
        gap: 10px !important;
    }

    #product-offer .dh-pdp-radio-pill {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13.5px;
    }

    #product-offer #add-to-cart .btn-primary {
        font-size: 15px !important;
    }
}

/* PDP CTA specificity lock: eski body #product-offer kurallari kazanmasin. */
body #product-offer #add-to-cart {
    margin-top: 0 !important;
}

body #product-offer #add-to-cart .basket-form-inline {
    display: grid !important;
    grid-template-columns: 136px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body #product-offer #add-to-cart .basket-form-inline > [class*="col"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex: initial !important;
}

body #product-offer #quantity-grp.choose_quantity,
body #product-offer #add-to-cart .btn-primary {
    min-height: 60px !important;
    height: 60px !important;
    border-radius: 8px !important;
}

body #product-offer #quantity-grp.choose_quantity {
    grid-template-columns: 46px minmax(40px, 1fr) 46px !important;
}

body #product-offer #quantity-grp.choose_quantity:has(.unit) {
    grid-template-columns: 40px minmax(32px, 1fr) 28px 40px !important;
}

body #product-offer #quantity-grp .btn,
body #product-offer #quantity-grp input,
body #product-offer #quantity-grp .input-group-text {
    min-height: 58px !important;
    height: 58px !important;
}

body #product-offer #add-to-cart .btn-primary {
    background: #a90000 !important;
    border-color: #a90000 !important;
    box-shadow: 0 14px 24px -18px rgba(var(--brand-primary-rgb), .8) !important;
    font-size: 18px !important;
}

body #product-offer #add-to-cart .btn-primary .btn-basket-check {
    flex-direction: row-reverse !important;
    gap: 13px !important;
}

body #product-offer .dh-pdp-buy-now {
    min-height: 58px !important;
    margin: 14px 0 14px !important;
    border-radius: 8px !important;
}

@media (max-width: 575px) {
    body #product-offer #add-to-cart .basket-form-inline {
        grid-template-columns: 142px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body #product-offer #add-to-cart .btn-primary {
        font-size: 15px !important;
    }
}

/* PDP desktop width: sag satin alma karti varyasyon/CTA icin daha genis nefes alsin. */
@media (min-width: 992px) {
    body #content .container:has(> form#buy_form),
    body #content .container:has(> form[id^="buy_form"]) {
        max-width: 1460px !important;
    }

    body #product-offer.product-detail {
        max-width: 1460px !important;
        width: 100%;
    }

    body #product-offer > .product-gallery {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        padding-right: 28px !important;
    }

    body #product-offer > .product-info {
        flex: 0 0 52% !important;
        max-width: 52% !important;
        padding-left: 18px !important;
    }

    body #product-offer .product-info-inner {
        width: 100% !important;
        max-width: none !important;
        padding-right: 34px !important;
        padding-left: 34px !important;
    }

    body #product-offer #add-to-cart .basket-form-inline {
        grid-template-columns: 152px minmax(0, 1fr) !important;
    }
}

@media (min-width: 1400px) {
    body #content .container:has(> form#buy_form),
    body #content .container:has(> form[id^="buy_form"]) {
        max-width: 1580px !important;
    }

    body #product-offer.product-detail {
        max-width: 1580px !important;
    }

    body #product-offer > .product-gallery {
        flex-basis: 46% !important;
        max-width: 46% !important;
    }

    body #product-offer > .product-info {
        flex-basis: 54% !important;
        max-width: 54% !important;
    }

    body #product-offer .product-info-inner {
        padding-right: 38px !important;
        padding-left: 38px !important;
    }
}

/* PDP right buybox rebuild: briefing-konform, ruhig, update-safe im Child. */
body #product-offer.product-detail {
    --dh-pdp-red: var(--brand-primary);
    --dh-pdp-red-dark: var(--brand-primary-deep);
    --dh-pdp-ink: var(--color-text, #111827);
    --dh-pdp-muted: var(--color-text-soft, #6b7280);
    --dh-pdp-line: #e3e7ee;
    --dh-pdp-soft: var(--color-surface-soft, #f7f8fa);
    --dh-pdp-green: #2f7d46;
}

body #product-offer .product-info-inner {
    border: 1px solid var(--dh-pdp-line) !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--dh-pdp-ink) !important;
}

body #product-offer .product-headline {
    margin: 0 0 12px !important;
}

body #product-offer .dh-pdp-series-pill {
    min-height: 22px !important;
    margin: 0 0 10px !important;
    padding: 4px 9px !important;
    border: 1px solid #f0d7d6 !important;
    border-radius: 999px !important;
    background: #fff7f7 !important;
    color: var(--dh-pdp-red) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 750 !important;
}

body #product-offer .product-title.h2 {
    max-width: none !important;
    margin: 0 !important;
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(28px, 2.05vw, 36px) !important;
    font-weight: 820 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
}

body #product-offer .rating-wrapper {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 13px 0 12px !important;
}

body #product-offer .rating-wrapper a,
body #product-offer .rating-wrapper {
    color: var(--color-text-muted, #374151) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

body #product-offer .rating-wrapper .rating {
    color: #f5a400 !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

body #product-offer .liebenauch {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    margin: 0 0 18px !important;
    padding: 6px 11px 6px 6px !important;
    border: 1px solid #edf0f4 !important;
    border-radius: 999px !important;
    background: #f8fafb !important;
    box-shadow: none !important;
}

body #product-offer .trust-image {
    width: 33px !important;
    height: 33px !important;
}

body #product-offer .text_liebenauch {
    color: var(--color-text-muted, #374151) !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}

body #product-offer .text_liebenauch strong {
    color: var(--dh-pdp-ink) !important;
    font-weight: 820 !important;
}

body #product-offer .info-essential.list-unstyled,
body #product-offer .freeshippinglabel {
    display: none !important;
}

body #product-offer .shortdesc {
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .shortdesc ul {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 13px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #product-offer .shortdesc li {
    display: grid !important;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: start;
    gap: 12px !important;
    min-width: 0;
    color: var(--color-text-muted, #4b5563) !important;
    font-size: 14.5px !important;
    line-height: 1.36 !important;
}

body #product-offer .shortdesc li img {
    width: 23px !important;
    height: 23px !important;
    margin-top: 1px !important;
    filter: none !important;
}

body #product-offer .shortdesc strong {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--dh-pdp-ink) !important;
    font-size: 14.8px !important;
    font-weight: 820 !important;
    line-height: 1.28 !important;
}

body #product-offer .product-info .product-offer {
    display: flex !important;
    flex-direction: column !important;
}

body #product-offer .product-info .product-offer > .row.variations.switch-variations {
    order: 10 !important;
}

body #product-offer .product-info .product-offer > .row:has(.dh-pdp-price-wrapper),
body #product-offer .product-info .product-offer > .row:has(.price_wrapper) {
    order: 20 !important;
}

body #product-offer .product-info .product-offer > #add-to-cart {
    order: 30 !important;
}

body #product-offer .product-info .product-offer > .dh-pdp-buy-now,
body #product-offer .product-info .product-offer > .rt-pdp-payment-strip,
body #product-offer .product-info .product-offer > .rothler-trust-section {
    order: 40 !important;
}

body #product-offer .row.variations.switch-variations {
    margin: 0 0 22px !important;
    padding: 0 0 22px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--dh-pdp-line) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body #product-offer .variation-wrapper {
    margin: 0 0 18px !important;
}

body #product-offer .variation-wrapper:last-child {
    margin-bottom: 0 !important;
}

body #product-offer .variation-wrapper dt {
    display: flex !important;
    align-items: baseline;
    gap: 7px;
    margin: 0 0 10px !important;
    color: var(--dh-pdp-ink) !important;
    font-size: 15.5px !important;
    font-weight: 820 !important;
    line-height: 1.2 !important;
}

body #product-offer .variation-wrapper dt .swatches-selected {
    color: #168236 !important;
    font-weight: 820 !important;
}

body #product-offer .dh-pdp-radio-options,
body #product-offer .swatches.textswatches,
body #product-offer .swatches.TEXTSWATCHES,
body #product-offer .form-row.swatches {
    gap: 10px !important;
}

body #product-offer .dh-pdp-radio-pill,
body #product-offer .swatches-text {
    min-height: 44px !important;
    padding: 0 17px !important;
    border: 1px solid var(--color-line, #dfe4ec) !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--color-text-muted, #4b5563) !important;
    font-size: 14.5px !important;
    font-weight: 740 !important;
    line-height: 1.15 !important;
}

body #product-offer .dh-pdp-radio-pill:hover,
body #product-offer .swatches-text:hover {
    border-color: #c84b48 !important;
    background: #fffafa !important;
    color: var(--dh-pdp-red) !important;
}

body #product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-radio-pill.is-active,
body #product-offer .swatches-text.active {
    border-color: var(--dh-pdp-red) !important;
    background: #fff8f8 !important;
    color: var(--dh-pdp-red) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .18) !important;
}

body #product-offer .variation-wrapper .bootstrap-select > .dropdown-toggle {
    min-height: 46px !important;
    border-color: var(--color-line, #dfe4ec) !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: var(--color-text-muted, #374151) !important;
}

body #product-offer .dh-pdp-price-wrapper {
    margin: 0 0 16px !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-price-line {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px 13px !important;
}

body #product-offer .dh-pdp-current-price {
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(34px, 2.2vw, 42px) !important;
    font-weight: 850 !important;
    line-height: .98 !important;
}

body #product-offer .dh-pdp-save-pill {
    min-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 6px !important;
    background: var(--dh-pdp-red) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 820 !important;
}

body #product-offer .dh-pdp-old-price {
    color: var(--color-text-soft, #8b93a1) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

body #product-offer .dh-pdp-taxline {
    margin-top: 8px !important;
    color: var(--color-text-soft, #8b93a1) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

body #product-offer .stock-information.stock-information-p {
    margin: 14px 0 22px !important;
    padding: 0 !important;
    border: 0 !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card {
    padding: 17px 18px !important;
    border: 1px solid #d9eadf !important;
    border-radius: 12px !important;
    background: #f7fbf8 !important;
    box-shadow: none !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-list {
    gap: 9px !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item {
    grid-template-columns: 23px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    min-height: 24px !important;
    color: var(--color-text, #1f2937) !important;
    font-size: 14.5px !important;
    font-weight: 720 !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item--primary {
    color: var(--dh-pdp-green) !important;
    font-size: 15px !important;
    font-weight: 830 !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-check {
    width: 20px !important;
    height: 20px !important;
    background: #4c9a57 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 11px !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-item--muted .dh-pdp-stock-check {
    background: #dcefe2 !important;
    color: #4c9a57 !important;
}

body #product-offer .dh-pdp-stock-progress {
    margin-top: 18px !important;
}

body #product-offer .dh-pdp-stock-progress__text {
    margin-bottom: 10px !important;
    color: var(--color-text-muted, #374151) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

body #product-offer .dh-pdp-stock-progress__track {
    height: 7px !important;
    background: #e6e8ee !important;
}

body #product-offer .dh-pdp-stock-progress__fill {
    background: var(--dh-pdp-red) !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-stock-progress__labels {
    margin-top: 9px !important;
    color: #737b88 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

body #product-offer #add-to-cart {
    margin: 0 !important;
}

body #product-offer #add-to-cart .basket-form-inline {
    grid-template-columns: 142px minmax(0, 1fr) !important;
    gap: 12px !important;
}

body #product-offer #quantity-grp.choose_quantity,
body #product-offer #add-to-cart .btn-primary {
    min-height: 56px !important;
    height: 56px !important;
    border-radius: 9px !important;
}

body #product-offer #quantity-grp.choose_quantity {
    border: 1px solid var(--color-line, #dfe4ec) !important;
    background: #fff !important;
}

body #product-offer #quantity-grp .btn,
body #product-offer #quantity-grp input,
body #product-offer #quantity-grp .input-group-text {
    min-height: 54px !important;
    height: 54px !important;
}

body #product-offer #quantity-grp input.quantity {
    color: var(--dh-pdp-ink) !important;
    font-size: 18px !important;
    font-weight: 780 !important;
}

body #product-offer #quantity-grp .btn {
    color: var(--color-text-muted, #4b5563) !important;
    font-size: 16px !important;
}

body #product-offer #add-to-cart .btn-primary {
    border-color: var(--dh-pdp-red) !important;
    background: var(--dh-pdp-red) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 820 !important;
}

body #product-offer #add-to-cart .btn-primary:hover,
body #product-offer #add-to-cart .btn-primary:focus {
    border-color: var(--dh-pdp-red-dark) !important;
    background: var(--dh-pdp-red-dark) !important;
    transform: none !important;
}

body #product-offer .dh-pdp-buy-now {
    min-height: 52px !important;
    margin: 12px 0 12px !important;
    border: 1px solid var(--color-line, #dfe4ec) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: var(--dh-pdp-ink) !important;
    font-size: 15.5px !important;
    font-weight: 780 !important;
}

body #product-offer .dh-pdp-buy-now:hover,
body #product-offer .dh-pdp-buy-now:focus {
    border-color: var(--dh-pdp-red) !important;
    color: var(--dh-pdp-red) !important;
    box-shadow: none !important;
}

body #product-offer .rt-pdp-payment-strip {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px !important;
    margin: 3px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .rt-pdp-payment-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 0 8px;
    border: 1px solid #e4e7ec;
    border-radius: 6px;
    background: #fff;
    color: var(--color-text-muted, #344054);
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

body #product-offer .rt-pdp-payment-chip--visa { color: #1a4da1; }
body #product-offer .rt-pdp-payment-chip--mastercard { color: #b65014; }
body #product-offer .rt-pdp-payment-chip--paypal { color: #005ea6; }
body #product-offer .rt-pdp-payment-chip--klarna { color: #8b254c; background: #fff4f8; }
body #product-offer .rt-pdp-payment-chip--apple { color: var(--color-text, #111827); }
body #product-offer .rt-pdp-payment-chip--google { color: #2d6cdf; }

body #product-offer .rothler-trust-section {
    margin: 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--dh-pdp-line) !important;
}

/* PDP payment strip: tek gorsel, eski chip badge yok. */
body #product-offer .rt-pdp-payment-strip {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 12px 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .rt-pdp-payment-strip .rt-pdp-payment-image,
body #product-offer .rt-pdp-payment-strip img.rt-pdp-payment-image {
    display: block !important;
    width: min(100%, 460px) !important;
    height: auto !important;
    max-height: 66px !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* PDP variation notice: modern, temiz secim uyarisi. */
body #product-offer .dh-pdp-buybox .alert.choose-variations.dh-pdp-variation-notice {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    width: 100% !important;
    margin: 2px 0 14px !important;
    padding: 13px 15px !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 12px !important;
    background:
        linear-gradient(90deg, rgba(var(--brand-primary-rgb), .055) 0, rgba(var(--brand-primary-rgb), 0) 118px),
        #fff !important;
    color: #151d2c !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-variation-notice__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--brand-primary-rgb), .18);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff 0%, #fff8f8 100%);
}

body #product-offer .dh-pdp-variation-notice__icon::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 7px;
    border-bottom: 2px solid var(--dh-pdp-red);
    border-left: 2px solid var(--dh-pdp-red);
    border-radius: 1px;
    background: transparent;
    transform: translateY(-1px) rotate(-45deg);
}

body #product-offer .dh-pdp-variation-notice__icon::after {
    content: none;
    display: none;
}

body #product-offer .dh-pdp-variation-notice__content {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body #product-offer .dh-pdp-variation-notice__label {
    color: var(--dh-pdp-red);
    font-size: 11px;
    font-weight: 780;
    line-height: 1.15;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body #product-offer .dh-pdp-variation-notice__text {
    color: #182132;
    font-size: 13.8px;
    font-weight: 720;
    line-height: 1.3;
}

@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buybox .alert.choose-variations.dh-pdp-variation-notice {
        grid-template-columns: 30px minmax(0, 1fr);
        column-gap: 10px;
        padding: 12px !important;
    }

    body #product-offer .dh-pdp-variation-notice__icon {
        width: 30px;
        height: 30px;
    }
}

body #product-offer .rothler-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body #product-offer .rothler-trust-card {
    display: grid !important;
    justify-items: center;
    gap: 6px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center;
}

body #product-offer .rothler-trust-iconwrap {
    width: 25px !important;
    height: 25px !important;
    color: var(--color-text-soft, #6b7280) !important;
}

body #product-offer .rothler-trust-iconwrap svg {
    width: 21px !important;
    height: 21px !important;
}

body #product-offer .rothler-trust-text strong {
    color: var(--color-text-muted, #4b5563) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
}

body #product-offer .rothler-trust-text span {
    display: none !important;
}

@media (min-width: 992px) {
    body #product-offer .product-info-inner {
        position: sticky !important;
        top: 104px !important;
        padding: 30px 34px 26px !important;
    }
}

@media (max-width: 991.98px) {
    body #product-offer .product-info-inner {
        padding: 22px 16px 20px !important;
        border-radius: 14px !important;
    }

    body #product-offer .product-title.h2 {
        font-size: 25px !important;
    }

    body #product-offer .shortdesc li {
        font-size: 13.5px !important;
    }

    body #product-offer .shortdesc strong {
        font-size: 13.8px !important;
    }

    body #product-offer #add-to-cart .basket-form-inline {
        grid-template-columns: 124px minmax(0, 1fr) !important;
        gap: 10px !important;
    }

    body #product-offer .rothler-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 10px !important;
    }
}

@media (max-width: 575px) {
    body #product-offer #add-to-cart .basket-form-inline {
        grid-template-columns: 1fr !important;
    }

    body #product-offer #quantity-grp.choose_quantity {
        max-width: 148px;
    }

    body #product-offer .dh-pdp-price-line {
        gap: 8px 10px !important;
    }
}

/* PDP custom right-side DOM: default NOVA info flow tamamen child markup ile degisti. */
body #product-offer .dh-pdp-buybox {
    display: block !important;
}

body #product-offer .dh-pdp-buybox__head {
    margin: 0 0 16px !important;
}

body #product-offer .dh-pdp-buybox__title {
    margin: 0 !important;
}

body #product-offer .dh-pdp-buybox__rating a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
}

body #product-offer .dh-pdp-buybox__rating-text {
    color: var(--color-text-muted, #4b5563);
    font-size: 14px;
    font-weight: 650;
}

body #product-offer .dh-pdp-buybox__benefits {
    margin-bottom: 24px !important;
}

body #product-offer .dh-pdp-buybox__offer {
    display: block !important;
}

body #product-offer .dh-pdp-buybox__section {
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants {
    margin-bottom: 22px !important;
    padding-bottom: 22px !important;
    border-bottom: 1px solid var(--dh-pdp-line) !important;
}

body #product-offer .dh-pdp-buybox__section--price {
    margin-bottom: 14px !important;
}

body #product-offer .dh-pdp-buybox__section--availability {
    margin-bottom: 20px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase {
    margin-top: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--availability .stock-information {
    margin: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--availability .warehouse,
body #product-offer .dh-pdp-buybox__section--availability #product-warehouse {
    margin-top: 10px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .row.variations.switch-variations {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart {
    margin-top: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-section {
    margin-top: 14px !important;
}

body #product-offer .dh-pdp-buybox .alert.choose-variations {
    margin: 0 0 12px !important;
    border-color: #ead7b8 !important;
    border-radius: 10px !important;
    background: #fffaf2 !important;
    color: #7a4b0b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

body #product-offer .dh-pdp-buybox .start-configuration {
    min-height: 52px;
    border-radius: 9px;
    background: #fff;
    color: var(--dh-pdp-red);
    border: 1px solid var(--color-line, #dfe4ec);
    font-weight: 800;
}

body #product-offer .dh-pdp-buybox .start-configuration:hover,
body #product-offer .dh-pdp-buybox .start-configuration:focus {
    border-color: var(--dh-pdp-red);
    background: #fff8f8;
    color: var(--dh-pdp-red);
}

@media (min-width: 992px) {
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
        grid-template-columns: 142px minmax(0, 1fr) !important;
    }
}

@media (max-width: 575px) {
    body #product-offer .dh-pdp-buybox__section--variants {
        margin-bottom: 18px !important;
        padding-bottom: 18px !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
        grid-template-columns: 1fr !important;
    }
}

/* PDP final right column polish: narrower stage + custom benefit board. */
@media (min-width: 992px) {
    body #content .container:has(> form#buy_form),
    body #content .container:has(> form[id^="buy_form"]) {
        max-width: 1420px !important;
        padding-right: 24px !important;
        padding-left: 24px !important;
    }

    body #product-offer.product-detail {
        max-width: 1420px !important;
    }

    body #product-offer > .product-gallery {
        flex-basis: 47% !important;
        max-width: 47% !important;
        padding-right: 24px !important;
    }

    body #product-offer > .product-info {
        flex-basis: 53% !important;
        max-width: 53% !important;
        padding-left: 16px !important;
    }

    body #product-offer .product-info-inner.dh-pdp-buybox {
        padding: 28px 30px 24px !important;
    }
}

@media (min-width: 1400px) {
    body #content .container:has(> form#buy_form),
    body #content .container:has(> form[id^="buy_form"]),
    body #product-offer.product-detail {
        max-width: 1480px !important;
    }

    body #product-offer .product-info-inner.dh-pdp-buybox {
        padding-right: 32px !important;
        padding-left: 32px !important;
    }
}

body #product-offer .dh-pdp-buybox__benefits {
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .dh-pdp-benefits__surface {
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid #e4e8ef !important;
    border-radius: 14px !important;
    background: #fbfcfd !important;
}

body #product-offer .dh-pdp-benefits__surface::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--dh-pdp-red);
}

body #product-offer .dh-pdp-benefits__label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 12px !important;
    padding: 0 9px;
    border-radius: 7px;
    background: var(--dh-pdp-red);
    color: #fff;
    font-size: 12px;
    font-weight: 840;
    line-height: 1;
}

body #product-offer .dh-pdp-benefits__content table,
body #product-offer .dh-pdp-benefits__content tbody {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-collapse: separate !important;
}

body #product-offer .dh-pdp-benefits__content tbody {
    counter-reset: dhPdpFeature;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px !important;
}

body #product-offer .dh-pdp-benefits__content tr,
body #product-offer .dh-pdp-benefits__content li {
    counter-increment: dhPdpFeature;
    position: relative;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
    min-width: 0;
    min-height: 76px;
    margin: 0 !important;
    padding: 10px 11px 10px 12px !important;
    border: 1px solid var(--color-line, #e8edf3) !important;
    border-radius: 10px !important;
    background: #fff !important;
}

body #product-offer .dh-pdp-benefits__content tr::after,
body #product-offer .dh-pdp-benefits__content li::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #ead0cf;
}

body #product-offer .dh-pdp-benefits__content td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: top !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    width: 34px !important;
    height: auto !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child img,
body #product-offer .dh-pdp-benefits__content li > img {
    display: none !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child::before,
body #product-offer .dh-pdp-benefits__content li::before {
    content: counter(dhPdpFeature, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ecd1d0;
    border-radius: 8px;
    background: #fff5f4;
    color: var(--dh-pdp-red);
    font-size: 11px;
    font-weight: 860;
    line-height: 1;
}

body #product-offer .dh-pdp-benefits__content td:first-child::after {
    content: none !important;
    display: none !important;
}

body #product-offer .dh-pdp-benefits__content td:nth-child(2) {
    min-width: 0;
    padding-right: 8px !important;
}

body #product-offer .dh-pdp-benefits__content strong,
body #product-offer .dh-pdp-benefits__content strong[style] {
    display: block !important;
    margin: 0 0 3px !important;
    color: var(--dh-pdp-ink) !important;
    font-size: 13.9px !important;
    font-weight: 840 !important;
    line-height: 1.18 !important;
}

body #product-offer .dh-pdp-benefits__content span,
body #product-offer .dh-pdp-benefits__content span[style],
body #product-offer .dh-pdp-benefits__content a {
    color: #5f6673 !important;
    font-size: 12.8px !important;
    font-weight: 560 !important;
    line-height: 1.28 !important;
}

body #product-offer .dh-pdp-benefits__content a {
    color: var(--dh-pdp-red) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

body #product-offer .dh-pdp-benefits__content ul {
    counter-reset: dhPdpFeature;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body #product-offer .dh-pdp-buybox__section--variants {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
    margin-bottom: 13px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt {
    margin-bottom: 8px !important;
    font-size: 14.5px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text {
    min-height: 39px !important;
    padding: 0 14px !important;
    font-size: 13.5px !important;
}

body #product-offer .dh-pdp-buybox__section--price {
    margin-bottom: 12px !important;
}

body #product-offer .dh-pdp-current-price {
    font-size: clamp(31px, 2vw, 38px) !important;
}

body #product-offer .dh-pdp-buybox__section--availability {
    margin-bottom: 16px !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card {
    padding: 14px 16px !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card .dh-pdp-stock-list {
    gap: 7px !important;
}

body #product-offer .dh-pdp-stock-progress {
    margin-top: 14px !important;
}

@media (max-width: 1199.98px) {
    body #product-offer .dh-pdp-benefits__content tbody,
    body #product-offer .dh-pdp-benefits__content ul {
        grid-template-columns: 1fr !important;
    }
}

/* PDP breadcrumb: ürün görseli grid'iyle aynı hizada, çizgisiz. */
@media (min-width: 992px) {
    body[data-page="1"] .breadcrumb-container {
        max-width: 1420px !important;
        padding-right: 24px !important;
        padding-left: 50px !important;
    }

    body[data-page="1"] .breadcrumb-wrapper {
        margin-top: 0 !important;
        margin-bottom: 4px !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body[data-page="1"] #breadcrumb.breadcrumb {
        border: 0 !important;
        box-shadow: none !important;
    }
}

@media (min-width: 1400px) {
    body[data-page="1"] .breadcrumb-container {
        max-width: 1480px !important;
    }
}

/* PDP header refinement: no redundant benefits label, calmer title weight. */
body #product-offer .dh-pdp-benefits__label {
    display: none !important;
}

body #product-offer .product-title.h2,
body #product-offer .dh-pdp-buybox__title {
    font-size: clamp(22px, 1.55vw, 28px) !important;
    font-weight: 690 !important;
    line-height: 1.16 !important;
}

@media (max-width: 575.98px) {
    body #product-offer .product-title.h2,
    body #product-offer .dh-pdp-buybox__title {
        font-size: clamp(21px, 6.2vw, 25px) !important;
    }
}

/* PDP payment static imagegen assets: compact white payment cards. */
body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons {
    display: grid !important;
    grid-template-columns: 1.04fr .58fr 1.06fr .82fr 1.12fr .96fr !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: clamp(7px, 1.05vw, 14px) !important;
    row-gap: 16px !important;
    width: 100% !important;
    margin: 18px 0 4px !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--color-surface-soft, #eef1f5) !important;   /* nur Hairline statt grauer Fläche */
    border-radius: 0 !important;
    background: transparent !important;
}

body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    justify-self: center !important;
    width: 100% !important;
    height: 42px !important;
    max-width: none !important;
    max-height: none !important;
    padding: 7px 10px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    transform: none !important;
    border: 1px solid #dfe4eb !important;
    border-radius: 7px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
    background: #fff !important;
}

/* Original-Marken-SVGs (echte Logos, korrekte Seitenverhaeltnisse) -> einheitliche
   Hoehe via object-fit:contain; keine per-Brand-Hacks mehr noetig.
   Rechnung (Lucide-Receipt, monochrom) leicht getoent. */
body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon {
    object-fit: contain !important;
    padding: 9px 12px !important;
}
body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon--rechnung {
    padding: 7px 12px !important;
}

body #product-offer .rt-pdp-payment-static-icons .rothler-trust-section {
    grid-column: 1 / -1 !important;
    order: 10 !important;
    width: 100% !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .rt-pdp-payment-static-icons .rothler-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: center !important;
}

body #product-offer .rt-pdp-payment-static-icons .rothler-trust-card {
    justify-content: center !important;
    min-height: 22px !important;
    padding: 0 4px !important;
}

@media (max-width: 575.98px) {
    body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons {
        grid-template-columns: 1.02fr .56fr 1fr .76fr 1.08fr .9fr !important;
        column-gap: 4px !important;
        row-gap: 7px !important;
        margin: 12px 0 14px !important;
        padding: 7px 6px !important;
    }

    body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon {
        height: 34px !important;
        padding: 5px 6px !important;
        border-radius: 6px !important;
    }

    body #product-offer .rt-pdp-payment-static-icons .rothler-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px 8px !important;
    }
}

/* PDP: remove generated series badge before rating. */
body #product-offer .dh-pdp-series-pill {
    display: none !important;
}

@media (max-width: 575px) {
    body #product-offer .dh-pdp-benefits__surface {
        padding: 12px !important;
    }

    body #product-offer .dh-pdp-benefits__content tr,
    body #product-offer .dh-pdp-benefits__content li {
        min-height: 0;
    }
}

/* PDP clean pass: daha sessiz, daha premium benefits listesi. */
body #product-offer .product-title.h2,
body #product-offer .dh-pdp-buybox__title {
    font-weight: 690 !important;
}

body #product-offer .dh-pdp-buybox__head {
    margin-bottom: 20px !important;
}

body #product-offer .dh-pdp-benefits__surface {
    overflow: visible !important;
    padding: 15px 0 14px !important;
    border: 0 !important;
    border-top: 1px solid var(--color-line, #e7ebf1) !important;
    border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
    border-radius: 0 !important;
    background: #fff !important;
}

body #product-offer .dh-pdp-benefits__surface::before {
    display: none !important;
}

body #product-offer .dh-pdp-benefits__label {
    min-height: 0 !important;
    margin: 0 0 11px !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--dh-pdp-red) !important;
    font-size: 12.5px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
}

body #product-offer .dh-pdp-benefits__content tbody,
body #product-offer .dh-pdp-benefits__content ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 28px !important;
}

body #product-offer .dh-pdp-benefits__content tr,
body #product-offer .dh-pdp-benefits__content li {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 10px 0 11px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
    border-radius: 0 !important;
    background: transparent !important;
}

body #product-offer .dh-pdp-benefits__content tr:nth-last-child(-n+2),
body #product-offer .dh-pdp-benefits__content li:nth-last-child(-n+2) {
    border-bottom: 0 !important;
}

body #product-offer .dh-pdp-benefits__content tr::after,
body #product-offer .dh-pdp-benefits__content li::after {
    display: none !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child {
    width: 18px !important;
    justify-content: flex-start !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child::before,
body #product-offer .dh-pdp-benefits__content li::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: 7px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--dh-pdp-red) !important;
}

body #product-offer .dh-pdp-benefits__content td:nth-child(2) {
    padding-right: 0 !important;
}

body #product-offer .dh-pdp-benefits__content strong,
body #product-offer .dh-pdp-benefits__content strong[style] {
    margin-bottom: 2px !important;
    color: #18202e !important;
    font-size: 14.2px !important;
    font-weight: 730 !important;
    line-height: 1.22 !important;
}

body #product-offer .dh-pdp-benefits__content span,
body #product-offer .dh-pdp-benefits__content span[style],
body #product-offer .dh-pdp-benefits__content a {
    color: #687180 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.34 !important;
}

body #product-offer .dh-pdp-benefits__content a {
    color: var(--dh-pdp-red) !important;
    text-decoration-thickness: 1px !important;
}

@media (max-width: 1199.98px) {
    body #product-offer .dh-pdp-benefits__content tbody,
    body #product-offer .dh-pdp-benefits__content ul {
        grid-template-columns: 1fr !important;
    }

    body #product-offer .dh-pdp-benefits__content tr:nth-last-child(2),
    body #product-offer .dh-pdp-benefits__content li:nth-last-child(2) {
        border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
    }
}

body #product-offer .dh-pdp-benefit--lottie td:first-child::before,
body #product-offer .dh-pdp-benefit--lottie::before {
    display: none !important;
}

body #product-offer .dh-pdp-benefit-lottie {
    display: block;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    pointer-events: none;
}

/* PDP variant selector clean redesign: benefits ile ayni sol hiza. */
body #product-offer .dh-pdp-buybox__section--variants {
    margin: 0 0 18px !important;
    padding: 16px 0 17px !important;
    border-top: 1px solid var(--color-line, #e7ebf1) !important;
    border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
}

body #product-offer .dh-pdp-buybox__section--variants .row.variations,
body #product-offer .dh-pdp-buybox__section--variants .row.variations.switch-variations,
body #product-offer .dh-pdp-buybox__section--variants .row.variations.simple-variations {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .dh-pdp-buybox__section--variants .row.variations > [class*="col"],
body #product-offer .dh-pdp-buybox__section--variants .row.variations > .col {
    width: 100% !important;
    max-width: none !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants dl,
body #product-offer .dh-pdp-buybox__section--variants dd.form-group,
body #product-offer .dh-pdp-buybox__section--variants dd {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
    display: block !important;
    margin: 0 !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper:first-child {
    padding-top: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper:last-child {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt {
    display: block !important;
    margin: 0 0 8px !important;
    color: #18202e !important;
    font-size: 14.2px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt .swatches-selected {
    display: block !important;
    margin-top: 3px;
    color: var(--dh-pdp-red) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options,
body #product-offer .dh-pdp-buybox__section--variants .swatches.textswatches,
body #product-offer .dh-pdp-buybox__section--variants .swatches.TEXTSWATCHES,
body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-option,
body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches > [class*="col"] {
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 92px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    border: 1px solid #dde3eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #4d5664 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill::before,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill::after,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text::before,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text::after {
    display: none !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill:hover,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text:hover {
    border-color: #c7b2b1 !important;
    background: #fffafa !important;
    color: var(--dh-pdp-red) !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-active,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text.active {
    border-color: var(--dh-pdp-red) !important;
    background: #fff7f7 !important;
    color: var(--dh-pdp-red) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .08) !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:focus-visible + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text:focus-visible {
    outline: 2px solid rgba(var(--brand-primary-rgb), .22) !important;
    outline-offset: 2px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper .bootstrap-select,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper .bootstrap-select > .dropdown-toggle {
    width: 100% !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper .bootstrap-select > .dropdown-toggle {
    min-height: 38px !important;
    border: 1px solid #dde3eb !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #4d5664 !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
        padding: 12px 0 !important;
    }

    body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
    body #product-offer .dh-pdp-buybox__section--variants .swatches-text {
        min-width: 82px !important;
    }
}

/* PDP: rating altindaki ekstra cizgi/golge hissini kaldir. */
body #product-offer .dh-pdp-benefits__surface {
    border-top: 0 !important;
    box-shadow: none !important;
}

/* PDP real logistics card: mock progress yok, sadece gercek JTL/Wawi verisi. */
body #product-offer .dh-pdp-buybox__section--availability {
    margin: 0 0 18px !important;
}

body #product-offer .stock-information.stock-information-p {
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card {
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--color-line, #e7ebf1) !important;
    border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-stock-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

body #product-offer .dh-pdp-stock-card__eyebrow {
    color: var(--dh-pdp-red);
    font-size: 12.5px;
    font-weight: 720;
    line-height: 1.2;
}

body #product-offer .dh-pdp-stock-card__head strong {
    color: #667080;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.2;
    text-align: right;
}

body #product-offer .dh-pdp-logistics-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-logistics-item {
    position: relative;
    min-width: 0;
    padding: 0 18px 0 17px;
    border-left: 1px solid #edf0f4;
}

body #product-offer .dh-pdp-logistics-item:first-child {
    padding-left: 0;
    border-left: 0;
}

body #product-offer .dh-pdp-logistics-item::before {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: #35a45a;
}

body #product-offer .dh-pdp-logistics-item dt {
    margin: 0 0 4px !important;
    color: #7a8493;
    font-size: 11.5px;
    font-weight: 680;
    line-height: 1.2;
}

body #product-offer .dh-pdp-logistics-item dd {
    margin: 0 !important;
    color: #172033;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.24;
}

body #product-offer .dh-pdp-stock-list,
body #product-offer .dh-pdp-stock-progress {
    display: none !important;
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-stock-card__head {
        display: block;
    }

    body #product-offer .dh-pdp-stock-card__head strong {
        display: block;
        margin-top: 4px;
        text-align: left;
    }

    body #product-offer .dh-pdp-logistics-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body #product-offer .dh-pdp-logistics-item,
    body #product-offer .dh-pdp-logistics-item:first-child {
        padding: 0 0 0 15px;
        border-left: 1px solid #edf0f4;
    }

    body #product-offer .dh-pdp-logistics-item::before {
        position: absolute;
        top: 4px;
        left: -4px;
        margin: 0;
    }
}

/* PDP: rating ile Produktvorteile arasinda hic ayirici kalmasin. */
body #product-offer .dh-pdp-buybox__head,
body #product-offer .dh-pdp-buybox__rating,
body #product-offer .rating-wrapper,
body #product-offer .dh-pdp-buybox__benefits,
body #product-offer .dh-pdp-benefits__surface {
    border: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-benefits__surface {
    padding-top: 8px !important;
}

/* PDP logistics: compact two-line status band without clipped values. */
body #product-offer .delivery-status.dh-pdp-stock-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 8px !important;
    position: relative;
    overflow: visible;
    padding: 10px 0 12px !important;
    border: 0 !important;
    border-top: 1px solid #e7ebf0 !important;
    border-bottom: 1px solid #e7ebf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body #product-offer .delivery-status.dh-pdp-stock-card::before {
    content: none !important;
    display: none !important;
}

body #product-offer .dh-pdp-stock-card__head {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0;
    margin: 0 !important;
}

body #product-offer .dh-pdp-stock-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    background: transparent;
    color: var(--dh-pdp-red);
    font-size: 12.8px;
    font-weight: 760;
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
}

body #product-offer .dh-pdp-stock-card__eyebrow::before {
    content: none !important;
    display: none !important;
}

body #product-offer .dh-pdp-stock-card__head strong {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #8a94a3;
    font-size: 10.8px;
    font-weight: 620;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

body #product-offer .dh-pdp-logistics-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-logistics-item,
body #product-offer .dh-pdp-logistics-item:first-child {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 2px;
    align-items: start;
    min-height: 0;
    padding: 8px 10px !important;
    border: 1px solid #edf1f5 !important;
    border-radius: 8px;
    background: #fff;
}

body #product-offer .dh-pdp-logistics-item:first-child {
    border-left: 1px solid #edf1f5 !important;
}

body #product-offer .dh-pdp-logistics-item::before {
    content: "";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 9px;
    height: 9px;
    margin: 4px 0 0;
    border: 0;
    border-radius: 50%;
    background: var(--dh-pdp-red);
    box-shadow: none;
}

body #product-offer .dh-pdp-logistics-item--delivery::before {
    background: #87909d !important;
}

body #product-offer .dh-pdp-logistics-item--shipping::before {
    background: #2f9854 !important;
}

body #product-offer .dh-pdp-logistics-item dt {
    grid-column: 2;
    grid-row: 1;
    margin: 0 !important;
    color: #747f8e;
    font-size: 11.2px;
    font-weight: 690;
    line-height: 1.2;
    white-space: nowrap;
}

body #product-offer .dh-pdp-logistics-item dd {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: 100%;
    margin: 0 !important;
    color: #121a2a;
    font-size: 12.6px;
    font-weight: 740;
    line-height: 1.25;
    text-align: left;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

@media (max-width: 767.98px) {
    body #product-offer .delivery-status.dh-pdp-stock-card {
        row-gap: 8px !important;
        padding: 10px 0 12px !important;
    }

    body #product-offer .dh-pdp-stock-card__head {
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    body #product-offer .dh-pdp-stock-card__head strong {
        text-align: right;
    }

    body #product-offer .dh-pdp-logistics-list {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    body #product-offer .dh-pdp-logistics-item,
    body #product-offer .dh-pdp-logistics-item:first-child {
        grid-template-columns: 12px minmax(0, 1fr);
        column-gap: 8px;
        padding: 8px 10px !important;
        border: 1px solid #edf1f5 !important;
    }

    body #product-offer .dh-pdp-logistics-item::before {
        grid-row: 1;
        width: 8px;
        height: 8px;
    }

    body #product-offer .dh-pdp-logistics-item dd {
        grid-row: 2;
        justify-self: start;
        text-align: left;
    }
}

/* PDP buy-now CTA: flat kirmizi, efektsiz. */
body #product-offer .dh-pdp-buybox .dh-pdp-buy-now,
body #product-offer .dh-pdp-buy-now.btn {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 12px 0 14px !important;
    padding: 0 22px !important;
    border: 1px solid var(--dh-pdp-red) !important;
    border-radius: 10px !important;
    background: var(--dh-pdp-red) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    transform: none !important;
    overflow: hidden;
}

body #product-offer .dh-pdp-buy-now::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: -35%;
    bottom: -35%;
    left: 0;
    width: 42%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .34) 48%,
        rgba(255, 255, 255, 0) 72%
    );
    opacity: 0;
    pointer-events: none;
    transform: translateX(-170%) skewX(-18deg);
}

body #product-offer .dh-pdp-buy-now.is-shimmering::after {
    animation: dhPdpBuyNowShimmer 920ms ease-out 120ms 1;
}

body #product-offer .dh-pdp-buy-now > * {
    position: relative;
    z-index: 1;
}

body #product-offer .dh-pdp-buy-now__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 1;
}

body #product-offer .dh-pdp-buy-now__text {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-size: 15.8px;
    font-weight: 790;
    line-height: 1;
}

body #product-offer .dh-pdp-buy-now:hover,
body #product-offer .dh-pdp-buy-now:focus {
    border-color: var(--dh-pdp-red-dark) !important;
    background: var(--dh-pdp-red-dark) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
}

body #product-offer .dh-pdp-buy-now:hover .dh-pdp-buy-now__icon,
body #product-offer .dh-pdp-buy-now:focus .dh-pdp-buy-now__icon {
    background: transparent;
    border-color: transparent;
}

body #product-offer .dh-pdp-buy-now:disabled,
body #product-offer .dh-pdp-buy-now.disabled {
    opacity: .72;
    cursor: not-allowed;
}

@keyframes dhPdpBuyNowShimmer {
    0% {
        opacity: 0;
        transform: translateX(-170%) skewX(-18deg);
    }

    18% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(260%) skewX(-18deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body #product-offer .dh-pdp-buy-now.is-shimmering::after {
        animation: none !important;
    }
}

@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buy-now.btn {
        min-height: 54px !important;
        padding: 0 18px !important;
    }

    body #product-offer .dh-pdp-buy-now__icon {
        width: 26px;
        height: 26px;
    }
}

/* PDP trust row: Jetzt-kaufen ustunde ikon yerine yesil pulse dot. */
body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-section {
    margin: 10px 0 12px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-card {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-width: 0;
    min-height: 24px;
    padding: 2px 6px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-dot {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-top: 0;
    border-radius: 50%;
    background: #2f9854;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-dot::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: rgba(47, 152, 84, .18);
    animation: dhPdpTrustPulse 1.8s ease-out infinite;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-text {
    display: block !important;
    min-width: 0;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-text strong {
    display: block !important;
    overflow-wrap: anywhere;
    color: #3f4754 !important;
    font-size: 11.7px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-text span,
body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-iconwrap {
    display: none !important;
}

@keyframes dhPdpTrustPulse {
    0% {
        opacity: .9;
        transform: scale(.65);
    }

    70% {
        opacity: 0;
        transform: scale(1.7);
    }

    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-dot::after {
        animation: none !important;
    }
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px 10px !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-card {
        justify-content: flex-start !important;
        padding: 2px 0 0 !important;
    }
}

/* PDP head: Serie badge + Bewertung ayni satirda, daha az radiuslu badge. */
body #product-offer .dh-pdp-buybox__meta-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 9px 10px !important;
    margin: 0 0 18px !important;
    min-width: 0;
}

body #product-offer .dh-pdp-buybox__meta-row .dh-pdp-series-pill {
    min-height: 26px !important;
    margin: 0 !important;
    padding: 4px 11px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
}

body #product-offer .dh-pdp-buybox__meta-row .rating-wrapper,
body #product-offer .dh-pdp-buybox__meta-row .dh-pdp-buybox__rating {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    gap: 8px !important;
}

body #product-offer .dh-pdp-buybox__meta-row .rating-wrapper > a,
body #product-offer .dh-pdp-buybox__meta-row .dh-pdp-buybox__rating > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body #product-offer .dh-pdp-buybox__meta-row .rating {
    font-size: 15px !important;
}

/* Social-Proof in der Meta-Row: Desktop rechts neben den Bewertungen (füllt den Rest).
   Mobile wird in der @media-Regel auf gestapelt (oben) umgestellt. */
body #product-offer .dh-pdp-buybox__meta-row .dh-social-proof {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body #product-offer .dh-pdp-inline-logistics {
    display: inline-flex;
    align-items: center;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    gap: 10px;
    width: auto;
    min-width: 0;
    margin-left: 2px;
    overflow: visible;
    color: #2f9b46;
    font-size: 12.7px;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
}

body #product-offer .dh-pdp-inline-logistics__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 5px;
    min-width: 0;
    max-width: none;
    overflow: visible;
    white-space: nowrap;
}

body #product-offer .dh-pdp-inline-logistics__item span {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
}

body #product-offer .dh-pdp-inline-logistics__item i {
    flex: 0 0 15px;
    width: 16px;
    color: #2f9b46;
    font-size: 14px;
    line-height: 1;
    text-align: center;
}

body #product-offer .dh-pdp-buybox__section--availability {
    display: none !important;
}

@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buybox__meta-row {
        gap: 7px 8px !important;
        margin-bottom: 14px !important;
    }

    body #product-offer .dh-pdp-buybox__meta-row .dh-pdp-series-pill {
        min-height: 24px !important;
        border-radius: 7px !important;
        font-size: 12.5px !important;
    }

    body #product-offer .dh-pdp-buybox__meta-row .rating {
        font-size: 14px !important;
    }

    body #product-offer .dh-pdp-inline-logistics {
        flex-basis: auto;
        margin-left: 0;
        font-size: 11.5px;
    }

    body #product-offer .dh-pdp-inline-logistics__item {
        white-space: nowrap;
    }
}

/* PDP price directly under title: UVP -> saving badge -> sale price. */
body #product-offer .dh-pdp-buybox__price-under-title {
    margin: 14px 0 22px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-wrapper {
    margin: 0 !important;
    padding: 0 !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px 9px !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-old-price {
    order: 1 !important;
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(17px, 1.2vw, 22px) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-old-price s {
    color: inherit !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0 !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-save-pill {
    order: 2 !important;
    min-height: 24px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: var(--dh-pdp-red) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price {
    order: 3 !important;
    margin: 0 !important;
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(18px, 1.35vw, 24px) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-taxline {
    order: 4 !important;
    margin: 0 !important;
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(13px, .95vw, 16px) !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap;
}

body #product-offer .dh-pdp-buybox__mobile-logistics {
    display: none !important;
}

body #product-offer .dh-pdp-buybox__section--price {
    display: none !important;
}

@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buybox__price-under-title {
        margin: 14px 0 20px !important;
        padding-bottom: 16px !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line {
        gap: 7px 9px !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-save-pill {
        min-height: 28px !important;
        padding: 0 12px !important;
        border-radius: 10px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__price-under-title {
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
        border-bottom: 0 !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics {
        display: block !important;
        margin: 0 0 13px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        color: #2f9b46 !important;
        font-size: 13.3px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        white-space: normal !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics__item {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 7px !important;
        white-space: normal !important;
        text-align: left !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics__item span {
        display: inline !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics__item i {
        flex: 0 0 auto !important;
        width: auto !important;
        color: #2f9b46 !important;
        font-size: 14px !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase > .dh-pdp-inline-logistics {
        display: none !important;
    }
}

/* PDP price compact row: old price -> discount badge -> sale price -> tax note. */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line {
    max-width: 100% !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price .price-note,
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price small {
    font-size: inherit !important;
}

/* .dh-pdp-price-spec: Klassen-Anker seit GSC-Fix 07/2026 (itemprop="priceSpecification"
   wurde aus dem Header-Span entfernt — Microdata liegt jetzt im Offer-Scope). */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price [itemprop="priceSpecification"],
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price .dh-pdp-price-spec {
    display: inline !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* PDP purchase final: CTA, trust row, payment icons, then logistics. */
body #product-offer .dh-pdp-buybox__section--purchase {
    display: flex !important;
    flex-direction: column !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rothler-trust-section {
    order: 4 !important;
    margin: 0 0 18px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart {
    order: 1 !important;
    margin: 0 0 16px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics {
    order: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    color: #2f9b46 !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    transform: none !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics__item {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 1 auto !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics__item span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics__item i {
    flex: 0 0 auto !important;
    width: auto !important;
    color: #2f9b46 !important;
    font-size: 14px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics + .rothler-trust-section {
    margin-top: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-buy-now {
    order: 3 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 0 20px !important;
    border: 1px solid var(--dh-pdp-red) !important;
    border-radius: 10px !important;
    background: var(--dh-pdp-red) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-buy-now__icon,
body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-buy-now__text {
    color: #fff !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip {
    order: 5 !important;
    margin-bottom: 12px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-section {
    grid-column: 1 / -1 !important;
    order: 10 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline > [class*="col"] {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    flex: initial !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp.choose_quantity {
    display: grid !important;
    grid-template-columns: 38px 42px 38px !important;
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
    min-height: 58px !important;
    height: 58px !important;
    border: 1px solid var(--color-line, #dfe4ec) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .input-group-prepend,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .input-group-append {
    display: contents !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .input-group-text.unit {
    display: none !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .input-group-prepend .btn {
    grid-column: 1 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity {
    grid-column: 2 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .input-group-append .btn {
    grid-column: 3 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--dh-pdp-ink) !important;
    line-height: 1 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn {
    font-size: 15px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity {
    appearance: textfield !important;
    font-size: 17px !important;
    font-weight: 760 !important;
    text-align: center !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity::-webkit-outer-spin-button,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity::-webkit-inner-spin-button {
    appearance: none !important;
    margin: 0 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:hover,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:focus {
    background: #fff8f8 !important;
    color: var(--dh-pdp-red) !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    border: 1px solid var(--dh-pdp-red) !important;
    border-radius: 10px !important;
    background: var(--dh-pdp-red) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .btn-primary .btn-basket-check {
    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
}

body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .btn-primary .fas.fa-shopping-cart {
    font-size: 18px !important;
}

@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp.choose_quantity {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: minmax(44px, 1fr) minmax(48px, 1fr) minmax(44px, 1fr) !important;
    }
}

/* PDP compact benefits: same clean design, much less vertical space. */
body #product-offer .dh-pdp-buybox__benefits {
    margin: 0 0 8px !important;
}

body #product-offer .dh-pdp-benefits__surface {
    padding: 2px 0 5px !important;
}

body #product-offer .dh-pdp-benefits__label {
    margin: 0 0 7px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

body #product-offer .dh-pdp-benefits__content tbody,
body #product-offer .dh-pdp-benefits__content ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 18px !important;
}

body #product-offer .dh-pdp-benefits__content tr,
body #product-offer .dh-pdp-benefits__content li {
    grid-template-columns: 13px minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 3px 0 4px !important;
    min-height: 0 !important;
    border-bottom-color: var(--color-surface-soft, #eef1f5) !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child {
    width: 13px !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child::before,
body #product-offer .dh-pdp-benefits__content li::before {
    width: 6px !important;
    height: 6px !important;
    margin-top: 5px !important;
}

body #product-offer .dh-pdp-benefit-lottie {
    display: none !important;
}

body #product-offer .dh-pdp-benefit--lottie td:first-child::before,
body #product-offer .dh-pdp-benefit--lottie::before {
    content: "" !important;
    display: inline-flex !important;
    width: 6px !important;
    height: 6px !important;
    margin-top: 5px !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--dh-pdp-red) !important;
}

body #product-offer .dh-pdp-benefits__content strong,
body #product-offer .dh-pdp-benefits__content strong[style] {
    margin: 0 0 1px !important;
    font-size: 12.2px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}

body #product-offer .dh-pdp-benefits__content span,
body #product-offer .dh-pdp-benefits__content span[style],
body #product-offer .dh-pdp-benefits__content a {
    font-size: 11.3px !important;
    font-weight: 500 !important;
    line-height: 1.12 !important;
}

body #product-offer .dh-pdp-buybox__section--variants {
    margin-top: 0 !important;
    padding-top: 11px !important;
}

/* PDP variants: eski yapıyı koru, ama satırları kompakt hale getir. */
body #product-offer .dh-pdp-buybox__section--variants {
    margin-bottom: 13px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
    align-items: start;
    padding: 10px 0 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt {
    align-self: center;
    margin: 0 !important;
    font-size: 13.4px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt .swatches-selected {
    display: none !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dd,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dd.form-group {
    min-width: 0 !important;
    grid-column: 1;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options,
body #product-offer .dh-pdp-buybox__section--variants .swatches.textswatches,
body #product-offer .dh-pdp-buybox__section--variants .swatches.TEXTSWATCHES,
body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches {
    gap: 7px !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text {
    min-width: 84px !important;
    /* 44px statt 32px: Touch-Target-Minimum (WIG §48) — primaeres Kauf-Control */
    min-height: 44px !important;
    padding: 0 12px !important;
    border-radius: 7px !important;
    font-size: 12.8px !important;
    font-weight: 640 !important;
}

body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper .bootstrap-select > .dropdown-toggle {
    min-height: 44px !important; /* Touch-Target (WIG §48) */
    font-size: 12.8px !important;
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
        grid-template-columns: 1fr;
        row-gap: 7px;
        padding: 9px 0 !important;
    }

    body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dd,
    body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dd.form-group {
        grid-column: 1;
    }
}

@media (max-width: 1199.98px) {
    body #product-offer .dh-pdp-benefits__content tbody,
    body #product-offer .dh-pdp-benefits__content ul {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    body #product-offer .dh-pdp-benefits__content tbody,
    body #product-offer .dh-pdp-benefits__content ul {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 14px !important;
    }
}

/* PDP payment trust row: dot yerine duz yesil tik. */
body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-dot {
    display: inline-grid !important;
    place-items: center !important;
    width: 12px !important;
    height: 12px !important;
    flex: 0 0 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #2f9854 !important;
}

body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-dot::before {
    content: "\2713";
    position: relative;
    z-index: 1;
    display: block;
    color: #2f9854;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-dot::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* PDP decision/details area: flatter, denser, theme-aligned information panel. */
.rt-pdp-decision--redesign {
    margin: 24px 0 26px !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__inner {
    width: min(1320px, calc(100% - 40px)) !important;
    border: 1px solid #e3e8ef !important;
    border-radius: 7px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__mast {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px) !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 16px 20px 15px 25px !important;
    border-bottom: 1px solid var(--color-line, #e8edf3) !important;
    background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), 0.055), #fff 36%) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__mast::before {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    top: 17px !important;
    bottom: 17px !important;
    width: 3px !important;
    border-radius: 0 !important;
    background: var(--brand-primary) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__eyebrow {
    margin: 0 0 5px !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--brand-primary) !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
}

.rt-pdp-decision--redesign h2 {
    max-width: 860px !important;
    margin: 0 0 5px !important;
    color: var(--color-text, #111827) !important;
    font-size: clamp(19px, 1.45vw, 24px) !important;
    font-weight: 720 !important;
    line-height: 1.11 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__mast p,
.rt-pdp-decision--redesign .rt-pdp-decision__card p {
    margin: 0 !important;
    color: #687386 !important;
    font-size: 12.5px !important;
    line-height: 1.38 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__trust {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
    align-self: stretch !important;
    align-content: center !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__trust span {
    min-height: 25px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.18) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: var(--brand-primary) !important;
    font-size: 10.8px !important;
    font-weight: 730 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.5fr) !important;
    grid-template-areas:
        "lead service"
        "facts service"
        "faq faq" !important;
    gap: 0 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card {
    padding: 16px 20px !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--lead {
    grid-area: lead !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(270px, 0.82fr) !important;
    gap: 16px !important;
    border-right: 1px solid var(--color-line, #e8edf3) !important;
    border-bottom: 1px solid var(--color-line, #e8edf3) !important;
}

.rt-pdp-decision--redesign h3 {
    margin: 0 0 5px !important;
    color: var(--color-text, #111827) !important;
    font-size: 15.3px !important;
    font-weight: 720 !important;
    line-height: 1.16 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks-panel {
    padding: 10px 12px !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.14) !important;
    border-radius: 5px !important;
    background: rgba(var(--brand-primary-rgb), 0.028) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__mini-title {
    margin: 0 0 5px !important;
    color: var(--brand-primary) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks li {
    padding: 6px 0 6px 16px !important;
    border-bottom: 1px solid rgba(var(--brand-primary-rgb), 0.09) !important;
    color: #3f4858 !important;
    font-size: 12px !important;
    font-weight: 660 !important;
    line-height: 1.22 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__checks li::before {
    top: 11px !important;
    left: 0 !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--brand-primary) !important;
    box-shadow: none !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--service {
    grid-area: service !important;
    border: 0 !important;
    background: var(--color-surface-soft, #f8fafc) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--service h3 {
    margin-bottom: 12px !important;
    color: var(--color-text, #111827) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service {
    display: grid !important;
    gap: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #e3e8ef !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service li {
    min-height: 0 !important;
    padding: 10px 0 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #e3e8ef !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service li::before {
    top: 15px !important;
    left: 0 !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--brand-primary) !important;
    box-shadow: none !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service strong {
    display: block !important;
    margin: 0 0 2px !important;
    color: var(--color-text, #111827) !important;
    font-size: 12.4px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__service span {
    color: #697386 !important;
    font-size: 11.8px !important;
    font-weight: 590 !important;
    line-height: 1.22 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--facts {
    grid-area: facts !important;
    border-right: 1px solid var(--color-line, #e8edf3) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card-head {
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(220px, 1fr) !important;
    gap: 16px !important;
    align-items: end !important;
    margin: 0 0 8px !important;
    padding: 0 0 8px !important;
    border-bottom: 1px solid var(--color-line, #e8edf3) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card-head p {
    justify-self: end !important;
    max-width: 420px !important;
    color: #7a8494 !important;
    font-size: 11.8px !important;
    text-align: right !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 26px !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts div {
    display: grid !important;
    grid-template-columns: minmax(92px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 12px !important;
    padding: 7px 0 !important;
    border-bottom: 1px solid #edf1f5 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts dt {
    color: #717b8c !important;
    font-size: 11.4px !important;
    font-weight: 680 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__facts dd {
    color: var(--color-text, #111827) !important;
    font-size: 12.2px !important;
    font-weight: 700 !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--faq {
    grid-area: faq !important;
    padding: 0 !important;
    border-top: 1px solid var(--color-line, #e8edf3) !important;
}

.rt-pdp-decision--redesign .rt-pdp-decision__card--faq h3 {
    margin: 0 !important;
    padding: 13px 20px !important;
    border-bottom: 1px solid #edf1f5 !important;
    font-size: 15px !important;
}

.rt-pdp-decision--redesign summary {
    padding: 11px 20px !important;
    border-bottom: 1px solid #edf1f5 !important;
    color: var(--color-text, #111827) !important;
    font-size: 12.8px !important;
    font-weight: 700 !important;
}

.rt-pdp-decision--redesign details p {
    padding: 0 20px 12px !important;
    color: #687386 !important;
    font-size: 12px !important;
}

@media (max-width: 991.98px) {
    .rt-pdp-decision--redesign .rt-pdp-decision__mast,
    .rt-pdp-decision--redesign .rt-pdp-decision__grid,
    .rt-pdp-decision--redesign .rt-pdp-decision__card--lead {
        grid-template-columns: 1fr !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__grid {
        grid-template-areas:
            "lead"
            "facts"
            "service"
            "faq" !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__card--lead,
    .rt-pdp-decision--redesign .rt-pdp-decision__card--facts {
        border-right: 0 !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__trust {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    .rt-pdp-decision--redesign {
        margin-top: 18px !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__inner {
        width: calc(100% - 20px) !important;
        border-radius: 6px !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__mast,
    .rt-pdp-decision--redesign .rt-pdp-decision__card {
        padding: 14px !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__mast {
        padding-left: 20px !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__mast::before {
        left: 10px !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__trust,
    .rt-pdp-decision--redesign .rt-pdp-decision__facts,
    .rt-pdp-decision--redesign .rt-pdp-decision__card-head {
        grid-template-columns: 1fr !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__card-head p {
        justify-self: start !important;
        text-align: left !important;
    }

    .rt-pdp-decision--redesign .rt-pdp-decision__facts div {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
}

/* Mobile topbar: show only centered newsletter promo in the dark strip. */
@media (max-width: 991.98px) {
    #header-top-bar {
        min-height: 34px !important;
        padding: 0 !important;
        background: var(--brand-topbar-bg) !important;
    }

    #header-top-bar > .container-fluid,
    #header-top-bar > .container-fluid.d-lg-flex {
        display: flex !important;
        width: 100% !important;
        min-height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 12px !important;
    }

    #header-top-bar ul.topbar-main,
    #header-top-bar .topbar-main {
        display: none !important;
    }

    #header-top-bar .dh-topbar-promo {
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        order: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        color: #fff !important;
        white-space: nowrap !important;
    }

    #header-top-bar .dh-topbar-promo > :not(.dh-topbar-newsletter) {
        display: none !important;
    }

    #header-top-bar .dh-topbar-newsletter {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: 100% !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff !important;
        font-size: clamp(12px, 3.4vw, 13.5px) !important;
        font-weight: 520 !important;
        line-height: 1 !important;
        text-align: center !important;
        text-decoration: none !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    #header-top-bar .dh-topbar-newsletter strong {
        color: #fff !important;
        font-weight: 780 !important;
    }

    #header-top-bar .dh-topbar-lottie {
        flex: 0 0 20px !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 6px 0 0 !important;
    }
}

/* Mobile header skeleton: menu/logo/trust/icons row, search row below. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper {
        background: var(--brand-primary) !important;
        box-shadow: 0 10px 18px -16px rgba(var(--brand-topbar-rgb), 0.55) !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding: 8px 12px 10px !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-areas:
            "brand trust icons"
            "search search search" !important;
        gap: 7px 9px !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        grid-area: brand !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-width: 0 !important;
        width: 100% !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        display: inline-flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 2px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #fff !important;
        align-items: center !important;
        justify-content: center !important;
        flex-direction: column !important;
        gap: 2px !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper #burger-menu::after {
        content: "Menu" !important;
        display: block !important;
        color: rgba(255, 255, 255, 0.86) !important;
        font-size: 9.5px !important;
        font-weight: 560 !important;
        line-height: 1 !important;
    }

    #jtl-nav-wrapper .navbar-toggler-icon {
        width: 22px !important;
        height: 16px !important;
        filter: invert(1) brightness(2) !important;
    }

    #jtl-nav-wrapper .logo-wrapper,
    #jtl-nav-wrapper .navbar-brand {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        display: block !important;
        width: clamp(122px, 34vw, 168px) !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 38px !important;
        object-fit: contain !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        grid-area: trust !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        display: block !important;
        width: clamp(64px, 17vw, 92px) !important;
        max-width: 92px !important;
        height: auto !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper {
        grid-area: icons !important;
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #jtl-nav-wrapper .nav-icons,
    #jtl-nav-wrapper #shop-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-item,
    #jtl-nav-wrapper .nav-icons-wrapper .nav-link {
        margin: 0 !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link {
        display: inline-flex !important;
        width: 30px !important;
        min-width: 30px !important;
        height: 34px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link svg,
    #jtl-nav-wrapper .nav-icons-wrapper .svg-inline--fa,
    #jtl-nav-wrapper .nav-icons-wrapper i {
        color: #fff !important;
        fill: #fff !important;
        font-size: 17px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-price,
    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price,
    #jtl-nav-wrapper .cart-icon-dropdown .price {
        color: #fff !important;
        font-size: 11.5px !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        grid-area: search !important;
        width: min(100%, 520px) !important;
        max-width: 520px !important;
        min-width: 0 !important;
        justify-self: center !important;
        margin: 1px auto 0 !important;
        padding: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .nav-item,
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper form,
    #jtl-nav-wrapper .main-search-wrapper .form-icon,
    #jtl-nav-wrapper .main-search-wrapper .input-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper input#search-header,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        height: 38px !important;
        min-height: 38px !important;
        border-color: #fff !important;
        background: #fff !important;
        color: var(--color-text, #101828) !important;
        font-size: 14px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper input#search-header {
        border-radius: 999px 0 0 999px !important;
        padding-left: 16px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        width: 46px !important;
        border-radius: 0 999px 999px 0 !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        background: var(--brand-primary) !important;
        padding: 0 12px 7px !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar {
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand icons"
            "trust trust"
            "search search" !important;
        gap: 6px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: 82px !important;
        max-height: 25px !important;
    }
}

/* Mobile header repair: keep logo/search visible and prevent NOVA's mobile icon mode. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        grid-template-columns: minmax(164px, 1fr) auto auto !important;
        gap: 6px 7px !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper,
    #jtl-nav-wrapper .toggler-logo-wrapper,
    #jtl-nav-wrapper #logo,
    #jtl-nav-wrapper .logo-wrapper,
    #jtl-nav-wrapper .navbar-brand {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        flex-wrap: nowrap !important;
        width: auto !important;
        max-width: 100% !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 38px !important;
    }

    #jtl-nav-wrapper .navbar-toggler-icon {
        position: relative !important;
        width: 22px !important;
        height: 15px !important;
        background: none !important;
        filter: none !important;
    }

    #jtl-nav-wrapper .navbar-toggler-icon::before {
        content: "" !important;
        position: absolute !important;
        left: 2px !important;
        right: 2px !important;
        top: 1px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: 0 6px 0 #fff, 0 12px 0 #fff !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: clamp(96px, 28vw, 136px) !important;
        max-width: 136px !important;
        max-height: 32px !important;
        flex: 0 1 auto !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        flex: 0 0 auto !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(54px, 15vw, 78px) !important;
        max-width: 78px !important;
        max-height: 24px !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link {
        width: 27px !important;
        min-width: 27px !important;
        height: 32px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: min(100%, 480px) !important;
        max-width: 480px !important;
        margin: 4px auto 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .search-wrapper-dropdown {
        display: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper #search,
    #jtl-nav-wrapper .main-search-wrapper .nav-item,
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper form,
    #jtl-nav-wrapper .main-search-wrapper .form-icon {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper input#search-header {
        display: block !important;
        flex: 1 1 auto !important;
        width: 1% !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        display: inline-flex !important;
        flex: 0 0 44px !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand icons"
            "trust trust"
            "search search" !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        justify-self: center !important;
    }
}

/* Mobile header final layout: stable row + full search, no NOVA dropdown-search ghost. */
@media (max-width: 991.98px) {
    #header-top-bar {
        display: flex !important;
        min-height: 34px !important;
        overflow: hidden !important;
        background: var(--brand-topbar-bg) !important;
    }

    #jtl-nav-wrapper {
        display: block !important;
        overflow: visible !important;
        background: var(--brand-primary) !important;
        box-shadow: 0 8px 16px -14px rgba(var(--brand-topbar-rgb), 0.55) !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 7px 10px 8px !important;
        overflow: visible !important;
        background: var(--brand-primary) !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        display: flex !important;
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 5px 6px !important;
        overflow: visible !important;
        transform: none !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        display: flex !important;
        order: 1 !important;
        flex: 1 1 150px !important;
        width: auto !important;
        max-width: calc(100% - 132px) !important;
        min-width: 138px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        display: inline-flex !important;
        flex: 0 0 31px !important;
        width: 31px !important;
        min-width: 31px !important;
        height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper #burger-menu::after {
        content: "Menu" !important;
        display: block !important;
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
    }

    #jtl-nav-wrapper .navbar-toggler-icon {
        position: relative !important;
        display: block !important;
        width: 19px !important;
        height: 14px !important;
        margin: 0 !important;
        background: none !important;
        filter: none !important;
    }

    #jtl-nav-wrapper .navbar-toggler-icon::before {
        content: "" !important;
        position: absolute !important;
        left: 1px !important;
        right: 1px !important;
        top: 1px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: 0 6px 0 #fff, 0 12px 0 #fff !important;
    }

    #jtl-nav-wrapper #logo,
    #jtl-nav-wrapper .logo-wrapper,
    #jtl-nav-wrapper .navbar-brand {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        display: block !important;
        width: clamp(104px, 30vw, 132px) !important;
        max-width: 132px !important;
        height: auto !important;
        max-height: 31px !important;
        flex: 0 1 auto !important;
        object-fit: contain !important;
        object-position: left center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        display: flex !important;
        order: 2 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 auto 0 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        display: block !important;
        width: clamp(52px, 14vw, 68px) !important;
        max-width: 68px !important;
        height: auto !important;
        max-height: 22px !important;
        object-fit: contain !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper {
        display: flex !important;
        order: 3 !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .nav-icons,
    #jtl-nav-wrapper #shop-nav {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2px !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link {
        display: inline-flex !important;
        width: 25px !important;
        min-width: 25px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link svg,
    #jtl-nav-wrapper .nav-icons-wrapper .svg-inline--fa,
    #jtl-nav-wrapper .nav-icons-wrapper i {
        color: #fff !important;
        fill: #fff !important;
        font-size: 15px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-price,
    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price,
    #jtl-nav-wrapper .cart-icon-dropdown .price,
    #jtl-nav-wrapper .cart-icon-dropdown .badge {
        display: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        display: block !important;
        order: 4 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 2px 0 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .search-wrapper-dropdown,
    #jtl-nav-wrapper .main-search-wrapper #mobile-search-dropdown,
    #jtl-nav-wrapper .main-search-wrapper .dropdown-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper #search,
    #jtl-nav-wrapper .main-search-wrapper .nav-item,
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper form,
    #jtl-nav-wrapper .main-search-wrapper .form-icon,
    #jtl-nav-wrapper .main-search-wrapper .input-group {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .input-group {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        overflow: hidden !important;
        border-radius: 16px !important;
        background: #fff !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .twitter-typeahead {
        display: block !important;
        flex: 1 1 auto !important;
        width: 1% !important;
        min-width: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .input-group-append {
        display: flex !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper input#search-header {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 0 !important;
        border-radius: 16px 0 0 16px !important;
        color: var(--color-text, #101828) !important;
        background: #fff !important;
        font-size: 13.5px !important;
        line-height: 34px !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        display: inline-flex !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 16px 16px 0 !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--color-text, #101828) !important;
        background: #fff !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .fa-search,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary i,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary svg {
        color: var(--color-text, #101828) !important;
        fill: var(--color-text, #101828) !important;
        font-size: 15px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .form-clear {
        display: none !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        display: none !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        gap: 4px !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        flex-basis: 136px !important;
        min-width: 126px !important;
        max-width: calc(100% - 116px) !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        flex-basis: 29px !important;
        width: 29px !important;
        min-width: 29px !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(92px, 29vw, 116px) !important;
        max-width: 116px !important;
        max-height: 28px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(45px, 13vw, 56px) !important;
        max-width: 56px !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link {
        width: 23px !important;
        min-width: 23px !important;
    }
}

/* Mobile header correction: one clean top row, no text/ghost dot on burger. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding: 7px 10px 7px !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        column-gap: 6px !important;
        row-gap: 5px !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 0 1 clamp(146px, 43vw, 174px) !important;
        max-width: clamp(146px, 43vw, 174px) !important;
        min-width: 0 !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        width: auto !important;
        gap: 6px !important;
        align-items: center !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #jtl-nav-wrapper #burger-menu::after {
        content: none !important;
        display: none !important;
    }

    #jtl-nav-wrapper #burger-menu .navbar-toggler-icon {
        display: none !important;
    }

    #jtl-nav-wrapper #burger-menu::before {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: #fff !important;
        box-shadow: 0 6px 0 #fff, 0 12px 0 #fff !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(108px, 31vw, 142px) !important;
        max-width: 142px !important;
        max-height: 30px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(50px, 13.5vw, 64px) !important;
        max-width: 64px !important;
        max-height: 22px !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    #jtl-nav-wrapper .language-dropdown,
    #jtl-nav-wrapper .currency-dropdown {
        display: none !important;
    }

    #jtl-nav-wrapper .nav-icons,
    #jtl-nav-wrapper #shop-nav {
        gap: 5px !important;
        align-items: center !important;
    }

    #jtl-nav-wrapper .account-icon-dropdown > .nav-link,
    #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown .nav-link {
        width: 24px !important;
        min-width: 24px !important;
        height: 28px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link {
        display: inline-flex !important;
        width: auto !important;
        min-width: 56px !important;
        height: 28px !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price {
        display: inline-block !important;
        max-width: 42px !important;
        margin-left: 1px !important;
        color: #fff !important;
        font-size: 11.5px !important;
        font-weight: 650 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .fa-sup,
    #jtl-nav-wrapper .cart-icon-dropdown .badge {
        display: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        margin-top: 3px !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .nav-logo-wrapper {
        flex-basis: clamp(128px, 42vw, 150px) !important;
        max-width: clamp(128px, 42vw, 150px) !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(96px, 30vw, 118px) !important;
        max-width: 118px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(44px, 13vw, 52px) !important;
        max-width: 52px !important;
    }

    #jtl-nav-wrapper .nav-icons,
    #jtl-nav-wrapper #shop-nav {
        gap: 3px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link {
        min-width: 51px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price {
        max-width: 38px !important;
        font-size: 10.8px !important;
    }
}

/* Mobile header skeleton v2: red utility row, search in a separate white band. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper {
        background: #fff !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding: 6px 9px 0 !important;
        background: var(--brand-primary) !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        column-gap: 5px !important;
        row-gap: 0 !important;
        align-items: center !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 0 1 clamp(176px, 47vw, 210px) !important;
        max-width: clamp(176px, 47vw, 210px) !important;
        min-width: 0 !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper {
        gap: 7px !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        flex: 0 0 24px !important;
        width: 24px !important;
        min-width: 24px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    #jtl-nav-wrapper #burger-menu::before {
        width: 20px !important;
        height: 2px !important;
        box-shadow: 0 6px 0 #fff, 0 12px 0 #fff !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(136px, 38vw, 172px) !important;
        max-width: 172px !important;
        max-height: 32px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        flex: 0 0 auto !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(47px, 12vw, 60px) !important;
        max-width: 60px !important;
        max-height: 21px !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper {
        margin-left: auto !important;
    }

    #jtl-nav-wrapper .nav-icons,
    #jtl-nav-wrapper #shop-nav {
        gap: 3px !important;
    }

    #jtl-nav-wrapper .account-icon-dropdown > .nav-link,
    #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown .nav-link {
        width: 22px !important;
        min-width: 22px !important;
        height: 28px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link {
        min-width: 48px !important;
        height: 28px !important;
        gap: 3px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price {
        max-width: 35px !important;
        font-size: 10.8px !important;
    }

    #jtl-nav-wrapper .nav-icons-wrapper .nav-link svg,
    #jtl-nav-wrapper .nav-icons-wrapper .svg-inline--fa,
    #jtl-nav-wrapper .nav-icons-wrapper i {
        font-size: 14px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        flex: 0 0 calc(100% + 18px) !important;
        width: calc(100% + 18px) !important;
        max-width: none !important;
        margin: 6px -9px 0 !important;
        padding: 6px 9px 7px !important;
        background: #fff !important;
        border-bottom: 0 !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .input-group {
        max-width: 100% !important;
        height: 33px !important;
        border: 1px solid #d8dee6 !important;
        border-radius: 11px !important;
        overflow: hidden !important;
        background: #fff !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .main-search-wrapper .input-group-append {
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
    }

    #jtl-nav-wrapper .main-search-wrapper input#search-header {
        height: 31px !important;
        min-height: 31px !important;
        padding: 0 10px !important;
        border-radius: 0 !important;
        font-size: 13px !important;
        line-height: 31px !important;
        text-align: center !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
        height: 31px !important;
        min-height: 31px !important;
        border-radius: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .fa-search,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary i,
    #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary svg {
        font-size: 14px !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .nav-logo-wrapper {
        flex-basis: clamp(151px, 47vw, 176px) !important;
        max-width: clamp(151px, 47vw, 176px) !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(118px, 36vw, 145px) !important;
        max-width: 145px !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        width: clamp(40px, 11vw, 48px) !important;
        max-width: 48px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown > .nav-link {
        min-width: 43px !important;
    }

    #jtl-nav-wrapper .cart-icon-dropdown .cart-icon-dropdown-price {
        max-width: 30px !important;
        font-size: 10px !important;
    }
}

/* Mobile logo alignment: prevent SVG clipping and center the hamburger with the brand. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding-top: 8px !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        min-height: 43px !important;
        align-items: center !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper {
        flex: 0 1 clamp(184px, 49vw, 218px) !important;
        max-width: clamp(184px, 49vw, 218px) !important;
        align-self: center !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .toggler-logo-wrapper,
    #jtl-nav-wrapper #logo,
    #jtl-nav-wrapper .logo-wrapper,
    #jtl-nav-wrapper .navbar-brand {
        height: 38px !important;
        min-height: 38px !important;
        align-items: center !important;
        overflow: visible !important;
        line-height: 0 !important;
    }

    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        height: 38px !important;
        min-height: 38px !important;
        align-self: center !important;
    }

    #jtl-nav-wrapper #burger-menu .navbar-toggler-icon {
        display: none !important;
    }

    #jtl-nav-wrapper #burger-menu::before {
        width: 22px !important;
        height: 16px !important;
        border-radius: 0 !important;
        background:
            linear-gradient(#fff, #fff) left 1px / 22px 2px no-repeat,
            linear-gradient(#fff, #fff) left 7px / 22px 2px no-repeat,
            linear-gradient(#fff, #fff) left 13px / 22px 2px no-repeat !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        display: block !important;
        width: clamp(118px, 39vw, 160px) !important;
        height: auto !important;
        max-width: 160px !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: left center !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons-wrapper,
    #jtl-nav-wrapper .nav-icons-wrapper {
        align-self: center !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .nav-logo-wrapper {
        flex-basis: clamp(154px, 48vw, 184px) !important;
        max-width: clamp(154px, 48vw, 184px) !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper .navbar-brand img,
    #jtl-nav-wrapper .nav-logo-wrapper #shop-logo {
        width: clamp(112px, 37vw, 138px) !important;
        height: auto !important;
        max-width: 138px !important;
    }
}

/* Mobile PDP: logistics belongs below the price, not in the purchase footer. */
@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__mobile-logistics {
        display: block !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics .dh-pdp-inline-logistics__item {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase .dh-pdp-inline-logistics {
        display: none !important;
    }
}

/* Mobile header: make trust rosettes more visible without increasing row height. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .dh-header-trust-icons-wrapper {
        overflow: visible !important;
    }

    #jtl-nav-wrapper .dh-header-trust-icons {
        transform: scale(1.18) !important;
        transform-origin: center center !important;
    }
}

@media (max-width: 374.98px) {
    #jtl-nav-wrapper .dh-header-trust-icons {
        transform: scale(1.12) !important;
    }
}

/* Mobile PDP gallery: trim the gap below thumbnails and prevent clipped thumb bottoms. */
@media (max-width: 767.98px) {
    body[data-page="1"] #product-offer > .product-gallery {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    body[data-page="1"] #product-offer > .product-info {
        margin-top: -16px !important;
        padding-top: 0 !important;
    }

    body[data-page="1"] #product-offer #image_wrapper,
    body[data-page="1"] #product-offer #gallery_wrapper {
        margin-bottom: 5px !important;
        padding-bottom: 0 !important;
    }

    body[data-page="1"] #product-offer .product-detail-image-preview-bar,
    body[data-page="1"] #product-offer #gallery_preview_wrapper,
    body[data-page="1"] #product-offer #gallery_preview {
        margin-bottom: 0 !important;
        padding-bottom: 6px !important;
        overflow: visible !important;
    }

    body[data-page="1"] #product-offer #gallery_preview .slick-list,
    body[data-page="1"] #product-offer #gallery_preview .slick-track,
    body[data-page="1"] #product-offer #gallery_preview .slick-slide {
        height: 78px !important;
        overflow: visible !important;
    }

    body[data-page="1"] #product-offer #gallery_preview .slick-slide > div,
    body[data-page="1"] #product-offer #gallery_preview .square.square-image,
    body[data-page="1"] #product-offer #gallery_preview .square.square-image .inner {
        overflow: visible !important;
    }

    body[data-page="1"] #product-offer #gallery_preview .square.square-image {
        margin-bottom: 4px !important;
    }
}

/* Mobile PDP gallery: keep the selected thumbnail image inside its border. */
@media (max-width: 767.98px) {
    body[data-page="1"] #product-offer #gallery_preview .square.square-image {
        box-sizing: border-box !important;
        padding: 2px !important;
        overflow: hidden !important;
        background: #fff !important;
        border-color: var(--color-line, #d6e4f1) !important;
    }

    body[data-page="1"] #product-offer #gallery_preview .slick-current .square.square-image,
    body[data-page="1"] #product-offer #gallery_preview .rt-thumb-active .square.square-image {
        border-color: var(--brand-primary) !important;
    }

    body[data-page="1"] #product-offer #gallery_preview .square.square-image .inner,
    body[data-page="1"] #product-offer #gallery_preview .square.square-image img {
        display: block !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }
}

/* Mobile PDP price: discount badge above, price details in one compact row below. */
@media (max-width: 575.98px) {
    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 7px 9px !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-save-pill {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin-bottom: 1px !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-old-price {
        order: 2 !important;
        flex: 0 0 auto !important;
        font-size: clamp(18px, 5.2vw, 21px) !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price {
        order: 3 !important;
        flex: 0 0 auto !important;
        font-size: clamp(22px, 6.4vw, 27px) !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-taxline {
        order: 4 !important;
        flex: 0 0 auto !important;
        align-self: center !important;
        margin: 0 !important;
        font-size: clamp(15px, 4.4vw, 17px) !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line::before {
        content: "" !important;
        order: 2 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 0 !important;
    }
}

/* Mobile PDP: put benefits above the price/logistics block. */
@media (max-width: 767.98px) {
    body #product-offer .product-info-inner.dh-pdp-buybox {
        display: flex !important;
        flex-direction: column !important;
    }

    body #product-offer .dh-pdp-buybox__head {
        display: contents !important;
    }

    body #product-offer .dh-pdp-buybox__meta-row {
        order: 1 !important;
    }

    body #product-offer .dh-pdp-buybox__title {
        order: 2 !important;
    }

    body #product-offer .dh-kb {
        order: 3 !important;          /* Mobile-Position erhalten (zwischen Titel und Preis) */
        margin: 10px 0 !important;
    }

    body #product-offer .dh-pdp-buybox__price-under-title {
        order: 4 !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        border-bottom: 0 !important;
    }

    body #product-offer .dh-pdp-buybox__mobile-logistics {
        order: 5 !important;
        margin: 0 0 13px !important;
        padding: 0 0 12px !important;
        border-bottom: 1px solid var(--color-line, #e7ebf1) !important;
    }

    body #product-offer .dh-pdp-buybox__offer {
        order: 6 !important;
    }

    /* Social-Proof Mobile: in der Meta-Row gestapelt -> ganz oben (unter Galerie),
       Rating darunter. Kein fragiler JS-Move mehr. */
    body #product-offer .dh-pdp-buybox__meta-row {
        flex-direction: column !important;
        align-items: stretch !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    body #product-offer .dh-pdp-buybox__meta-row .dh-social-proof {
        order: -1 !important;
        margin: 0 0 12px !important;
        flex: 0 0 auto !important;
    }
    body #product-offer .dh-pdp-buybox__meta-row .rating-wrapper,
    body #product-offer .dh-pdp-buybox__meta-row .dh-pdp-buybox__rating {
        order: 0 !important;
    }
}

/* PDP/header polish 20260613-tb149: mobile menu, mobile cleanup, desktop shipping note. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper #burger-menu,
    #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
        position: relative !important;
        z-index: 50 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        appearance: none !important;
        border: 0 !important;
        background: transparent !important;
    }

    #jtl-nav-wrapper #burger-menu::before,
    #jtl-nav-wrapper #burger-menu::after,
    #jtl-nav-wrapper #burger-menu .navbar-toggler-icon {
        pointer-events: none !important;
    }

    #jtl-nav-wrapper .nav-logo-wrapper,
    #jtl-nav-wrapper .dh-header-trust-icons-wrapper,
    #jtl-nav-wrapper .nav-icons-wrapper {
        position: relative !important;
        z-index: 2 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    body[data-page="1"] .breadcrumb-wrapper,
    body[data-page="1"] #breadcrumb,
    body[data-page="1"] .breadcrumb,
    body[data-page="1"] .breadcrumb-nav,
    body[data-page="1"] .breadcrumb-container {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    body[data-page="1"] #product-offer {
        margin-top: 8px !important;
    }
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-shipping-note {
    order: 5 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 2px !important;
    color: var(--brand-accent) !important;
    font-size: clamp(12px, .9vw, 14px) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-shipping-note i {
    color: #F5A400 !important;
    font-size: .95em !important;
    line-height: 1 !important;
}

/* Kostenloser-Versand Lottie: bir kez oynar (loop yok -> son frame'de sabit).
   Layout ayak izi kucuk (30px) kalir; gorsel transform:scale ile buyutulur,
   boylece metni/komsulari itmez (transform akisi etkilemez). */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-shipping-note .dh-free-ship-lottie {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    margin: -10px 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -8px !important;
    transform: scale(2.1) !important;
    transform-origin: center !important;
    pointer-events: none !important;
}

body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-shipping-note span {
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-shipping-note {
        display: none !important;
    }
}

@media (min-width: 768px) {
    body #product-offer .dh-pdp-buybox__mobile-logistics {
        display: none !important;
    }

    body #product-offer .dh-pdp-buybox__section--purchase > .dh-pdp-inline-logistics .dh-pdp-inline-logistics__item:not(.dh-pdp-inline-logistics__item--delivery) {
        display: none !important;
    }
}

body #product-offer .dh-pdp-benefits__content strong,
body #product-offer .dh-pdp-benefits__content strong[style] {
    font-size: 13.1px !important;
    line-height: 1.1 !important;
}

body #product-offer .dh-pdp-benefits__content span,
body #product-offer .dh-pdp-benefits__content span[style],
body #product-offer .dh-pdp-benefits__content a {
    font-size: 12.1px !important;
    line-height: 1.14 !important;
}

body #product-offer .dh-pdp-benefits__content tr,
body #product-offer .dh-pdp-benefits__content li {
    padding-top: 4px !important;
    padding-bottom: 5px !important;
}

body #product-offer .dh-pdp-benefits__content td:first-child::before,
body #product-offer .dh-pdp-benefits__content li::before,
body #product-offer .dh-pdp-benefit--lottie td:first-child::before,
body #product-offer .dh-pdp-benefit--lottie::before {
    width: 7px !important;
    height: 7px !important;
}

/* Ruhige Buybox: nur MAUS-Fokus (:focus) unterdruecken — :focus-visible
   (Tastatur) bleibt sichtbar, siehe §48 weiter unten (WIG-Review Paket 1:
   vorher war die Varianten-Auswahl per Tastatur komplett unsichtbar). */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill:focus,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text:focus,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper a:focus,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper button:focus,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:focus + .dh-pdp-radio-pill {
    outline: 0 !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-active,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text.active,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text.selected {
    border-color: var(--dh-pdp-red) !important;
    color: var(--dh-pdp-red) !important;
    background: rgba(var(--brand-primary-rgb), .035) !important;
    outline: 0 !important;
    box-shadow: none !important;
}

body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill *,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text * {
    outline: 0 !important;
    box-shadow: none !important;
}

/* §48 PDP-Kaufstrecke A11y/Touch (WIG-Review Paket 1):
   (1) Tastatur-Fokus SICHTBAR — nur :focus-visible, Maus-Klick bleibt ruhig.
   Muss NACH den Kill-/Checked-Bloecken stehen (gleiche Spezifitaet, Source-
   Order gewinnt), sonst frisst deren outline:0 !important den Ring. */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:focus-visible + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill:focus-visible,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text:focus-visible,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper a:focus-visible,
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper button:focus-visible {
    outline: 2px solid var(--dh-pdp-red, var(--brand-primary)) !important;
    outline-offset: 2px !important;
}

/* (2) Touch: kein Doppeltipp-Zoom-Delay, kein grauer Tap-Blitz auf den
   Kauf-Controls (Pills, Swatches, Mengen-Stepper, Kauf-Button). */
body #product-offer .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .swatches-text,
body #product-offer #quantity-grp .btn,
body #product-offer #add-to-cart .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Nicht kombinierbare (is-limited) / nicht lagernde (is-stockout) Größen: ruhig gedämpft
   statt rotem "nicht verfügbar"-Alarm. Bleiben klickbar (führen zur gültigen Kombination),
   sind aber klar untergeordnet. Rot ist ausschließlich dem Kauf-Button vorbehalten. */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-stockout,
body #product-offer .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-pill.is-stockout {
    color: #9aa1ac !important;
    border-color: #e8eaee !important;
    background: var(--color-surface-soft, #fafbfc) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-limited:hover,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-stockout:hover,
body #product-offer .dh-pdp-radio-pill.is-limited:hover,
body #product-offer .dh-pdp-radio-pill.is-stockout:hover {
    color: var(--color-text-soft, #6b7280) !important;
    border-color: #cfd4dc !important;
    background: #fff !important;
}
/* Ruhige Hinweiszeile unter der Größen-Achse (ersetzt das rote Pro-Pill-Badge) */
#product-offer .dh-pdp-variant-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 9px 0 0;
    color: var(--color-text-soft, #8b93a1);
    font-size: 12.5px;
    line-height: 1.4;
}
#product-offer .dh-pdp-variant-hint svg { width: 14px; height: 14px; flex: none; color: #b0b6bf; }
/* Sicherheitsnetz gegen rotes "nicht verfügbar"-Flackern: ein roh von JTL (auch per AJAX)
   nachgeliefertes Danger-Badge im Variantenbereich wird nie rot gezeigt. Das footer-JS
   wandelt echte Hinweise ohnehin in .rt-variation-option__badge--hint um (nicht betroffen). */
#product-offer .variation-wrapper .badge.badge-not-available,
#product-offer .dh-pdp-radio-pill .badge-not-available {
    display: none !important;
}

/* Bestpreisgarantie-Badge unter der Galerie (nur Desktop; Sichtbarkeit via d-none d-lg-block
   am umschliessenden col). Bewusst dezent: kein Farb-Fill, feiner Rahmen, kleines Marken-Icon. */
.product-gallery .dh-pdp-bpg {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 14px 0 2px;
    padding: 11px 14px;
    border: 1px solid var(--color-line, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.product-gallery .dh-pdp-bpg:hover {
    border-color: #d4d8de;
    box-shadow: 0 6px 18px -13px rgba(16, 24, 40, .3);
}
.product-gallery .dh-pdp-bpg:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
.product-gallery .dh-pdp-bpg__ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--brand-primary-rgb), .08);
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-gallery .dh-pdp-bpg__ic svg { width: 19px; height: 19px; }
.product-gallery .dh-pdp-bpg__txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; text-align: left; }
.product-gallery .dh-pdp-bpg__t {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text, #1f2937);
}
.product-gallery .dh-pdp-bpg__s { display: block; font-size: 12.5px; color: var(--color-text-soft, #6b7280); }
.product-gallery .dh-pdp-bpg__arr {
    flex: none;
    width: 18px;
    height: 18px;
    color: #b0b6bf;
    transition: transform .15s ease, color .15s ease;
}
.product-gallery .dh-pdp-bpg:hover .dh-pdp-bpg__arr { transform: translateX(2px); color: var(--brand-primary); }

/* Mobile cleanup 20260613-tb150: remove the hidden search lane and the PDP card border. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper {
        min-height: 0 !important;
        background: var(--brand-primary) !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        background: var(--brand-primary) !important;
        box-shadow: none !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        row-gap: 0 !important;
    }

    #jtl-nav-wrapper .main-search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper *,
    #jtl-nav-wrapper .search-wrapper-dropdown,
    #jtl-nav-wrapper #mobile-search-dropdown,
    #jtl-nav-wrapper #search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    body[data-page="1"] #product-offer {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

@media (max-width: 767.98px) {
    body[data-page="1"] #product-offer > .product-info,
    body[data-page="1"] #product-offer .product-info-inner,
    body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox,
    body[data-page="1"] #product-offer .dh-pdp-buybox {
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}

/* Mobile header search removal 20260613-tb151: remove the whole lane, not only the input. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper .main-search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper.nav-right,
    #jtl-nav-wrapper .main-search-wrapper[class*="col"] {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding-bottom: 7px !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        row-gap: 0 !important;
    }
}

/* Mobile header spacer fix 20260614-tb154: closed search/category rows must not leave a red band. */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 8px 10px !important;
        overflow: visible !important;
        background: var(--brand-primary) !important;
    }

    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
        align-content: center !important;
        row-gap: 0 !important;
        overflow: visible !important;
    }

    #jtl-nav-wrapper .main-search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper.nav-right,
    #jtl-nav-wrapper .main-search-wrapper[class*="col"],
    #jtl-nav-wrapper .main-search-wrapper > *,
    #jtl-nav-wrapper .search-wrapper-dropdown,
    #jtl-nav-wrapper #mobile-search-dropdown,
    #jtl-nav-wrapper #search {
        display: none !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: hidden !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar):not(:has(#mainNavigation.show)) {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar):has(#mainNavigation.show) {
        display: block !important;
        height: auto !important;
        max-height: calc(100vh - 96px) !important;
        padding: 0 !important;
        overflow: auto !important;
        background: #fff !important;
    }
}

/* Mobile header FINAL 20260614-tb155: kill the leftover empty red search band.
   Earlier blocks (grid "search" row + "Mobile header repair") re-reserved/re-showed
   the removed search input. This is the last block in the file, so it wins source-order.
   We collapse the navbar grid to a single row and fully remove the search wrapper. */
@media (max-width: 991.98px) {
    /* Tek satir: search alani grid'den tamamen cikar, band kalmaz. */
    #jtl-nav-wrapper .hide-navbar > .navbar.row {
        grid-template-columns: minmax(0, 1fr) auto auto !important;
        grid-template-rows: auto !important;
        grid-template-areas: "brand trust icons" !important;
        row-gap: 0 !important;
    }

    /* Logo barini kompakt tut, alttaki bosluk minimum olsun. */
    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        padding: 8px 12px !important;
    }

    /* Search wrapper'i ve ic #search katmanini gercekten yok et.
       .main-search-wrapper #search selector'u 13685'le ayni specificity,
       sonra geldigi icin kazanir. */
    #jtl-nav-wrapper .main-search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper #search,
    #jtl-nav-wrapper .main-search-wrapper .nav-item,
    #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
    #jtl-nav-wrapper .main-search-wrapper form,
    #jtl-nav-wrapper .main-search-wrapper .form-icon,
    #jtl-nav-wrapper .main-search-wrapper .input-group {
        display: none !important;
        grid-area: unset !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        visibility: hidden !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

    /* KOK NEDEN: #jtl-nav-wrapper'in kendisi kirmizi (13359) ve flex/blok bir kap.
       Logo satirinin altinda kapali kalan kategori container'i (#mainNavigation'i saran
       .container-fluid) kirmizi bg + padding tasidigi icin BOS KIRMIZI BAND olusuyor.
       Onceki commit bunu :has() ile gizlemeye calismis; :has() override/destek sorununda
       band kaliyor. Cozum :has()'siz: wrapper'i seffaf yap, sadece logo barini kirmizi birak,
       kapali mega-nav'i 0 yukseklige indir. Acik menu (#mainNavigation.show) etkilenmez. */
    #jtl-nav-wrapper {
        background: transparent !important;
        /* Temel kural (satir 42) height:96px !important veriyor; mobilde icerik ~64px,
           kalan ~32px bos kalip seffaf wrapper'da acik gri body zemini = gri serit.
           Wrapper'i icerige sigdir. */
        height: auto !important;
        min-height: 0 !important;
    }

    #jtl-nav-wrapper > .hide-navbar,
    #jtl-nav-wrapper > .container-fluid.hide-navbar {
        background: var(--brand-primary) !important;
    }

    /* Kategori container'i: kapaliyken hicbir kutu/yukseklik/kirmizi tasimasin. */
    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
        background: transparent !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar {
        min-height: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    /* Kapali mega-nav yer kaplamasin (Bootstrap zaten display:none yapar; emniyet kemeri). */
    #jtl-nav-wrapper #mainNavigation:not(.show) {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Acik mega-nav okunur kalsin: beyaz zemin kendi uzerinde. */
    #jtl-nav-wrapper #mainNavigation.show {
        background: #fff !important;
    }
}

/* PDP mobil 20260614-tb158: odeme/trust karti ile Produktberatung (decision) bolumu
   arasindaki dikey bosluk fazlaydi (payment-strip alt margin ~14px + decision ust margin
   18px + kart paddingleri). ~10px'e indir. */
@media (max-width: 991.98px) {
    body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons {
        margin-bottom: 2px !important;
    }
    body .rt-pdp-decision {
        margin-top: 8px !important;
        margin-bottom: 16px !important;
    }
}


/* ============================================================
 * ABVERKAUF (Wawi-Sonderpreis) — Zeile am Preis, Hinweis, Pillen-Marker
 * Farbwelt = Sale-System §44 (Ink + Amber), Rot bleibt dem CTA vorbehalten.
 * Rendert nur, wenn die gewaehlte bzw. eine Geschwister-Variante einen
 * aktiven Sonderpreis hat (dh_pdp_abverkauf.tpl / Pillen-Marker).
 * ============================================================ */

/* Zustand A: gewaehlte Variante IST der Deal.
   Rot statt Ink (User-Feedback 13.08.), Brand-Token statt Hexwert. */
.dh-abv-line {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  width: fit-content;
  max-width: 100%;
  background: var(--brand-primary, var(--brand-primary));
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.35;
}
.dh-abv-line__label {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dh-abv-line__sub { color: rgba(255, 255, 255, 0.88); }

/* Zustand B: Deal liegt an einer anderen Groesse — dezenter Wegweiser */
.dh-abv-hint {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  background: #fdf2f1;
  border: 1px solid #f0cfcc;
  color: var(--color-text, #16181d);
  border-radius: 8px;
  padding: 5px 10px;
  margin-bottom: 8px;
  font-size: 12.5px;
  line-height: 1.4;
}
.dh-abv-hint__bolt { flex: 0 0 auto; }
.dh-abv-hint__pct {
  font-weight: 800;
  white-space: nowrap;
  color: var(--brand-primary, var(--brand-primary));
}

/* Pillen-Marker: bewusst minimal — kleiner roter Text ohne Kapsel
   (User-Feedback 13.08.: Kapseln an den Buttons waren zu viel).
   Rendert nur an NICHT gewaehlten Pillen, deren Klick zum Deal fuehrt. */
.dh-pdp-radio-pill__abv {
  display: inline-block;
  color: var(--brand-primary, var(--brand-primary));
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  margin-left: 5px;
  white-space: nowrap;
}

/* Abverkauf-Teaser auf jeder PDP: schlanke Linkkarte zur /Sonderangebote-
   Liste. Desktop unter der Galerie (d-none d-md-flex), mobil unter dem
   Kaufen-Bereich (d-md-none). Prozentwert live aus der DB. */
.dh-abv-teaser {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  background: #fdf2f1;
  border: 1px solid #f0cfcc;
  border-radius: 10px;
  color: var(--color-text, #16181d);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
/* Mobil: Der Kauf-Bereich ist ein Flex-Container mit order-Schema
   (#add-to-cart order:1, payment-strip order:5). Ohne eigenen Wert (0)
   rutschte der Teaser VOR den Kaufen-Block — gemessen am Live-DOM.
   order:2 = direkt UNTER dem In-den-Warenkorb-Bereich, ueber den Icons. */
.dh-abv-teaser.d-md-none {
  order: 2;
}

.dh-abv-teaser:hover,
.dh-abv-teaser:focus-visible {
  color: var(--color-text, #16181d);
  text-decoration: none;
  border-color: var(--brand-primary, var(--brand-primary));
}
.dh-abv-teaser__bolt {
  flex: 0 0 auto;
  color: var(--brand-primary, var(--brand-primary));
}
.dh-abv-teaser__text { flex: 1 1 auto; }
.dh-abv-teaser__text strong { color: var(--brand-primary, var(--brand-primary)); }
.dh-abv-teaser__pfeil {
  flex: 0 0 auto;
  color: var(--brand-primary, var(--brand-primary));
  font-weight: 700;
  transition: transform 0.15s ease;
}
.dh-abv-teaser:hover .dh-abv-teaser__pfeil { transform: translateX(3px); }
/* ============================================================
 * PDP reco slider kartlari ("Kunden kauften auch" / "Ähnliche Artikel")
 * 20260614-tb161: ana sayfa kart goruntusunun birebir ayni dili.
 * - Sol-ust "AUF LAGER" badge (ribbon, item_slider child include eder)
 * - Baslik SOLA hizali (ortali degil)
 * - Guncel satis fiyati SIYAH, cizik UVP kirmizi (global)
 * - Fiyat altinda yesil pulse-dot + "Auf Lager" lieferinfo (child markup)
 * Sadece PDP sliderlari (body[data-page="1"]).
 * ============================================================ */
/* Kart icerigini sola hizala (NOVA wrapper text-center-util'i ezer). */
body[data-page="1"] .slick-slider-other .product-wrapper-product {
    text-align: left !important;
}

/* Gorsel yuzeyi: yuvarlatilmis, hafif zemin + ic border, hover'da yukselme. */
body[data-page="1"] .slick-slider-other .item-slider.productbox-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #f6f8fb;
    box-shadow: inset 0 0 0 1px rgba(205, 216, 228, 0.72);
    transition: box-shadow 180ms ease, transform 180ms ease;
}
body[data-page="1"] .slick-slider-other .item-slider .product-image,
body[data-page="1"] .slick-slider-other .item-slider img {
    transition: transform 180ms ease, opacity 180ms ease;
    transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
    body[data-page="1"] .slick-slider-other a:hover .item-slider.productbox-image {
        box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), 0.34), 0 10px 26px rgba(17, 24, 39, 0.08);
        transform: translateY(-1px);
    }
}

/* Sol-ust badge ("AUF LAGER" customBadge) — ana sayfa ribbon stiliyle ayni. */
body[data-page="1"] .slick-slider-other .item-slider .productbox-ribbon.ribbon {
    position: absolute;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    min-height: 0;
    margin: 0;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.92) !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    z-index: 3;
}

/* Baslik: ana sayfa tipografisi, 3 satir clamp, SOLA hizali. */
body[data-page="1"] .slick-slider-other .item-slider-desc {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 9px 0 0 !important;
    min-height: 52px;
    color: var(--rt-type-text) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.32 !important;
    text-align: left !important;
    text-decoration: none;
}
body[data-page="1"] .slick-slider-other a:hover .item-slider-desc,
body[data-page="1"] .slick-slider-other a:hover .item-slider-desc span {
    color: var(--brand-primary-dark) !important;
}

/* Fiyat: guncel fiyat SIYAH, sola hizali; cizik UVP global kirmizi. */
body[data-page="1"] .slick-slider-other .item-slider-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 6px;
    line-height: 1.12;
}
body[data-page="1"] .slick-slider-other .item-slider-price .price_wrapper {
    display: flex !important;
    align-items: baseline;
    gap: 5px;
    margin: 0 !important;
    line-height: 1.12;
}
body[data-page="1"] .slick-slider-other .item-slider-price .price-note {
    display: none !important;
}
body[data-page="1"] .slick-slider-other .item-slider-price .productbox-price.price,
body[data-page="1"] .slick-slider-other .item-slider-price .price.productbox-price {
    color: var(--rt-type-text) !important;
    font-size: 22px !important;
    font-weight: 820 !important;
    line-height: 1.1 !important;
}
body[data-page="1"] .slick-slider-other .price_label.pricestarting,
body[data-page="1"] .slick-slider-other .price_label.nowonly {
    color: var(--color-text-soft, #6b7280) !important;
    font-size: 12.5px;
    font-weight: 650;
}

/* Lieferinfo: yesil pulse-dot + "Auf Lager" — ana sayfa ile ayni. */
body[data-page="1"] .slick-slider-other .rt-productlist-delivery {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 5px;
    color: #337c64;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.3;
    text-align: left;
}
body[data-page="1"] .slick-slider-other .rt-productlist-delivery__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2f8f6b;
    box-shadow: 0 0 0 4px rgba(47, 143, 107, 0.12);
}
body[data-page="1"] .slick-slider-other .rt-productlist-delivery__sep,
body[data-page="1"] .slick-slider-other .rt-productlist-delivery__time {
    color: #43806b;
    font-weight: 650;
}

/* ============================================================
 * PDP variant badge bosluklari 20260614-tb167
 * Desktop'ta opsiyon badge'leri (Baubreite/Bauhöhe/Bestelloption) arasi
 * bosluk fazlaydi: gap 7-10px + pill min-width 84px (kisa badge'ler dolgudan
 * genis durup birbirinden uzak gorunuyordu). Gap'i sik, min-width'i icerige
 * gore daralt. Sadece desktop; en son blok oldugu icin onceki kurallari ezer.
 * ============================================================ */
@media (min-width: 768px) {
    body #product-offer .dh-pdp-radio-options,
    body #product-offer .swatches.textswatches,
    body #product-offer .swatches.TEXTSWATCHES,
    body #product-offer .form-row.swatches,
    body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options,
    body #product-offer .dh-pdp-buybox__section--variants .swatches.textswatches,
    body #product-offer .dh-pdp-buybox__section--variants .swatches.TEXTSWATCHES,
    body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches {
        gap: 6px !important;
    }

    body #product-offer .dh-pdp-radio-pill,
    body #product-offer .swatches-text,
    body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
    body #product-offer .dh-pdp-buybox__section--variants .swatches-text {
        min-width: 56px !important;
        padding: 0 13px !important;
    }
}

/* ============================================================
 * PDP variant badge bosluklari — GERCEK NEDEN 20260614-tb168
 * Baubreite/Bauhöhe 'imgswatches' + .js-slider-item ile render oluyor ve
 * satir 430'daki .js-slider-item { min-width: calc(100%/9) } kurali her badge
 * kolonunu satirin 1/9'una zorluyordu -> icerik dar olsa da kolonlar genis
 * kalip badge'ler birbirinden uzak duruyordu. Buybox variants icinde kolonlari
 * icerige gore daralt; gap (tb167, 6px) gercek araligi belirlesin.
 * ============================================================ */
body #product-offer .dh-pdp-buybox__section--variants .js-slider-item,
body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches > .col,
body #product-offer .dh-pdp-buybox__section--variants .form-row.swatches > [class*="col"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* tb169: Variant badge'leri artik tek tip pill (dh_variation_pills.tpl) ile
   render oluyor; IMGSWATCHES icin kalan slider oklari gereksiz -> gizle. */
body #product-offer .dh-pdp-buybox__section--variants .js-btn-slider-btns {
    display: none !important;
}

/* ============================================================
 * PDP Bewertungen (Reviews) redesign 20260614-tb171
 * Iskelet: ortalama+yildiz+count + yildiz bar dagilimi + temiz yorum kartlari
 * (avatar + isim + Verifizierter Kauf + yildiz + baslik + metin).
 * Tema dili, clean, kutu-icinde-kutu/border yok. Gold yildiz.
 * (Kriter slider'lari JTL'de veri olmadigi icin yok.)
 * ============================================================ */

/* --- Cevredeki NOVA kutularini sadelestir (border/box kaldir) --- */
.reviews .card,
.reviews .card.review,
.reviews .card.review > .card-body,
.reviews .reviews-mosthelpful,
.reviews .reviews-mosthelpful > .card-body,
.reviews #reviews-overview .card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Zusammenfassung: solda skor, sagda barlar --- */
.reviews .dh-reviews-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 40px;
    padding: 2px 0 22px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5);
}
.reviews .dh-reviews-summary__score {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 170px;
}
.reviews .dh-reviews-summary__avg {
    color: var(--color-text, #111827);
    font-size: 42px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: -0.02em;
}
.reviews .dh-reviews-summary__stars .rating { color: #f5a623; font-size: 19px; letter-spacing: 1px; }
.reviews .dh-reviews-summary__stars .rating .far { color: #d7dce3; }
.reviews .dh-reviews-summary__count { color: var(--color-text-soft, #667085); font-size: 13px; }

.reviews .dh-reviews-summary__bars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 540px;
}
.reviews .dh-reviews-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}
.reviews .dh-reviews-bar__label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    width: 34px;
    color: var(--color-text-muted, #475467);
    font-size: 13px;
    font-weight: 650;
}
.reviews .dh-reviews-bar__label .fa-star { color: #f5a623; font-size: 11px; }
.reviews .dh-reviews-bar__track {
    flex: 1 1 auto;
    height: 9px;
    border-radius: 999px;
    background: var(--color-surface-soft, #eef1f5);
    overflow: hidden;
}
.reviews .dh-reviews-bar__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #f5a623;
    transition: width .3s ease;
}
.reviews .dh-reviews-bar:hover .dh-reviews-bar__fill { background: #e0941a; }
.reviews .dh-reviews-bar__count { width: 30px; text-align: right; color: var(--color-text-soft, #667085); font-size: 12.5px; }

/* --- "Artikel bewerten" alani: sade --- */
.reviews #article_rating .subheadline { color: var(--color-text, #111827); font-weight: 720; margin-bottom: 8px; }
.reviews #article_rating .btn {
    border-radius: 9px !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
}
.reviews #article_rating .btn:hover { background: var(--brand-primary) !important; color: #fff !important; }

/* "Wie funktionieren Bewertungen?" pill + verteilungstext */
.reviews .verified-purchase-notice {
    border-radius: 999px !important;
    border-color: #e4e9f0 !important;
    color: var(--color-text-muted, #475467) !important;
    font-weight: 650 !important;
}

/* --- Tekil yorum karti --- */
.reviews .dh-review {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5);
}
.reviews .dh-review:last-child { border-bottom: 0; }

.reviews .dh-review__author {
    flex: 0 0 138px;
    width: 138px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.reviews .dh-review__avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 3px;
    border-radius: 50%;
    background: #fdf2e9;
    color: #b07b53;
}
.reviews .dh-review__check {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2f8f4e;
    border: 2px solid #fff;
}
.reviews .dh-review__name { color: var(--color-text, #1f2937); font-size: 13.5px; font-weight: 750; line-height: 1.2; }
.reviews .dh-review__verified { color: #2f8f4e; font-size: 11.5px; font-weight: 600; }

.reviews .dh-review__content { flex: 1 1 auto; min-width: 0; }
.reviews .dh-review__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 6px;
}
.reviews .dh-review__stars .rating { color: #f5a623; font-size: 14px; letter-spacing: .5px; }
.reviews .dh-review__stars .rating .far { color: #d7dce3; }
.reviews .dh-review__title { color: var(--color-text, #111827); font-size: 16px; font-weight: 780; line-height: 1.2; }
.reviews .dh-review__text { margin: 0 0 8px; color: var(--color-text-muted, #475467); font-size: 14.5px; line-height: 1.62; }
.reviews .dh-review__date { color: #6b7382; font-size: 12px; } /* AA 4.77 statt 2.58 */
.reviews .dh-review__reply {
    margin-top: 12px;
    padding: 10px 14px;
    border-left: 3px solid var(--brand-primary);
    background: #faf7f7;
    border-radius: 0 8px 8px 0;
}
.reviews .dh-review__reply-author { display: block; color: var(--brand-primary); font-size: 12.5px; font-weight: 700; margin-bottom: 3px; }
.reviews .dh-review__reply p { margin: 0; color: var(--color-text-muted, #475467); font-size: 14px; line-height: 1.55; }

/* Mobil: avatar/isim ustte, icerik altta */
@media (max-width: 575.98px) {
    .reviews .dh-review { flex-direction: column; gap: 8px; }
    .reviews .dh-review__author {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: 100%;
        flex-basis: auto;
    }
    .reviews .dh-review__avatar { margin-bottom: 0; }
    .reviews .dh-reviews-summary__avg { font-size: 36px; }
}

/* tb172: Eski review-box stillerini ez (onceki agent 7807/7903'te
   #reviews-overview ve .pagination-wrapper'a border+bg+shadow vermis ->
   "border icinde border" kutular). Hedef tasarimda bu kutular YOK. */
body[data-page="1"] #reviews-overview {
    margin: 0 0 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
body[data-page="1"] #reviews-overview > [class*="col"] { padding: 0 !important; }

body[data-page="1"] #reviews-list .pagination-wrapper {
    margin: 6px 0 10px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
body[data-page="1"] #reviews-list {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* tb173: Bewertungen pagination kontrolleri tema diline.
   Sayfa numaralari temiz pill, aktif = tema kirmizisi (sari cizgi yok),
   per-page ve sort dropdownlari clean themed input. */
body[data-page="1"] #reviews-list .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
}
body[data-page="1"] #reviews-list .page-item { margin: 0 !important; }
body[data-page="1"] #reviews-list .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 9px !important;
    border: 1px solid #e4e9f0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--color-text-muted, #475467) !important;
    font-size: 14px;
    font-weight: 700;
    box-shadow: none !important;
}
body[data-page="1"] #reviews-list .page-link:hover {
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary) !important;
    background: #fff7f7 !important;
}
body[data-page="1"] #reviews-list .page-item.active .page-link,
body[data-page="1"] #reviews-list .page-link.active {
    border-color: var(--brand-primary) !important;
    background: var(--brand-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
}
/* aktif sayfadaki sari alt cizgiyi / pseudo isaretciyi kaldir */
body[data-page="1"] #reviews-list .page-link::after,
body[data-page="1"] #reviews-list .page-link::before,
body[data-page="1"] #reviews-list .page-item.active .page-link::after {
    display: none !important;
}
body[data-page="1"] #reviews-list .page-text { color: var(--color-text-soft, #98a2b3) !important; }

/* per-page ("10") + sort ("Datum aufsteigend") dropdownlari */
body[data-page="1"] #reviews-list .pagination-selects { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-page="1"] #reviews-list .pagination-selects .custom-select,
body[data-page="1"] #reviews-list .pagination-selects-entries,
body[data-page="1"] #reviews-list .pagination-selects-sort {
    height: 38px !important;
    border: 1px solid #e4e9f0 !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    color: var(--color-text-muted, #344054) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 34px 0 12px !important;
    box-shadow: none !important;
}
body[data-page="1"] #reviews-list .pagination-selects .custom-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12) !important;
}
/* "Einträge 1 - 10 von 311" etiketi */
body[data-page="1"] #reviews-list .pagination-entries,
body[data-page="1"] #reviews-list .pagination-wrapper .font-weight-bold-util {
    color: var(--color-text-muted, #475467) !important;
    font-weight: 700 !important;
}

/* ============================================================
 * Social Proof unter dem Preis (Booster 7) 20260614-tb174
 * Avatare (CDN) + Namen, Theme-Stil (wie Auswahl-Hinweis), klickbar.
 * ============================================================ */
body #product-offer .dh-social-proof {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 12px 0 4px;
    padding: 10px 14px;
    border: 1px solid #e8edf2;
    border-radius: 12px;
    background:
        linear-gradient(90deg, rgba(var(--brand-primary-rgb), .05) 0, rgba(var(--brand-primary-rgb), 0) 140px),
        #fff;
    color: #151d2c;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
body #product-offer .dh-social-proof:hover {
    border-color: #d8c4c3;
    box-shadow: 0 8px 20px -14px rgba(var(--brand-primary-rgb), .35);
    transform: translateY(-1px);
}
body #product-offer .dh-social-proof__avatars {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
}
body #product-offer .dh-social-proof__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .18);
    background: #f0f2f5;
}
body #product-offer .dh-social-proof__avatar:not(:first-child) { margin-left: -13px; }
body #product-offer .dh-social-proof__text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.32;
    color: var(--color-text-muted, #475467);
}
body #product-offer .dh-social-proof__text strong { color: #151d2c; font-weight: 760; }
body #product-offer .dh-social-proof__arrow {
    flex: 0 0 auto;
    color: var(--brand-primary);
    font-size: 17px;
    font-weight: 700;
    transition: transform .15s ease;
}
body #product-offer .dh-social-proof:hover .dh-social-proof__arrow { transform: translateX(3px); }

@media (max-width: 575.98px) {
    body #product-offer .dh-social-proof { gap: 10px; padding: 9px 12px; }
    body #product-offer .dh-social-proof__avatar { width: 32px; height: 32px; }
    body #product-offer .dh-social-proof__text { font-size: 12.8px; }
}

/* ============================================================
 * Mobil PDP duzenlemeleri 20260614-tb175
 * 1) Inline-Logistics "Kostenloser Versand": desktoptaki gibi lottie + var(--brand-accent)
 * 2) Sterne ueber der Galerie, Social-Proof ueber dem Titel (JS tasir, CSS konumlar)
 * ============================================================ */
@media (max-width: 991.98px) {
    /* 1) Kostenloser Versand (inline-logistics) -> lottie + amber metin */
    body #product-offer .dh-pdp-inline-logistics__item--shipping,
    body #product-offer .dh-pdp-inline-logistics__item--shipping span {
        color: var(--brand-accent) !important;
        font-weight: 700 !important;
    }
    body #product-offer .dh-pdp-inline-logistics .dh-free-ship-lottie--inline {
        flex: 0 0 auto !important;
        width: 26px !important;
        height: 26px !important;
        margin: -8px 1px -8px -3px !important;
        transform: scale(1.9) !important;
        transform-origin: center !important;
        position: relative !important;
        top: -1px !important;
        pointer-events: none !important;
    }

    /* 2) Sterne ueber die Galerie (JS verschiebt; .col-12 -> Galerie box-model;
       yatay padding galeri ile ayni (10px) -> hizali, ekrana yapismaz) */
    body #product-offer .dh-meta--above-gallery {
        order: -1 !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 0 0 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* badge/title ile ayni hiza: col(10px) + product-info-inner(16px) = 26px */
        padding-left: 26px !important;
        padding-right: 26px !important;
    }

    /* 3) Social-Proof ueber dem Titel: Abstand sauber halten */
    body #product-offer .dh-pdp-buybox__head .dh-social-proof {
        margin: 0 0 12px !important;
    }
}

/* tb179: Mobil thumbnail-bar'i alttaki baslik/badge ile hizala.
   Galeri kolonu 10px; baslik .product-info-inner ile 26px inset.
   Thumbnail bar'a 16px yatay padding -> 10+16 = 26px, hizali. */
@media (max-width: 991.98px) {
    body[data-page="1"] #product-offer .product-detail-image-preview-bar {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ========================================================================
   NOVA Gold (#f8bf00 = NOVA $primary) -> zentrales Token --brand-highlight
   Erbt von NOVA; zentral steuerbar in css/brand.css. Betrifft:
   Warenkorb-Zähler (.fa-sup), aktive Checkbox/Radio, Hinweis-Badges, Focus-Ring.
   ======================================================================== */
.fa-sup,
.cart-icon-dropdown-icon .fa-sup,
.badge-primary,
.badge-pill.badge-primary {
    background-color: var(--brand-highlight) !important;
}
.badge-primary,
.badge-pill.badge-primary {
    color: var(--brand-on-highlight) !important;
}
.badge-outline-primary {
    border-color: var(--brand-highlight) !important;
    color: var(--brand-highlight) !important;
}
.badge-circle:hover,
.badge-circle:focus {
    background-color: var(--brand-highlight) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--brand-highlight) !important;
    border-color: var(--brand-highlight) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 0 0.2rem rgba(var(--brand-highlight-rgb), .25) !important;
}

/* Funktionale Gelb-Zustände (NOVA $primary) -> Brand-Rot statt Gold:
   Formular-Focus und aktive Listeneinträge sollen die Markenfarbe tragen. */
.form-control:focus,
.custom-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), .18);
}
.list-group-item.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

/* Tab-Navigation: aktiver/hover Unterstrich + Bootstrap nav-tabs aktiv -> Brand-Rot */
.tab-navigation .nav-link::after,
.tab-navigation .nav-link::before {
    border-color: var(--brand-primary) !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active:hover,
.nav-tabs .nav-link.active:focus {
    border-color: var(--brand-primary) !important;
}
/* Sidebar/Panel aktiver Navigationspunkt */
aside .nav-panel > .nav > .active > .nav-link {
    border-bottom-color: var(--brand-primary) !important;
}

/* ========================================================================
   VOLLSTÄNDIGER SWEEP: ALLE NOVA-Gold (#F8BF00 = NOVA $primary) -> Brand-Rot
   Auto-generiert aus NOVA/themes/clear/clear.css. Deckt Buttons, Forms,
   Tabs, Slider, Badges, Modals, Footer, Focus-Glows usw. ab.
   Zentral steuerbar über css/brand.css (var(--brand-primary)).
   ======================================================================== */
.fa-sup, .badge-primary, .badge-pill.badge-primary { color: #fff !important; }
#footer a:not(.btn):hover { color: var(--brand-primary) !important; }
#image_wrapper #gallery .slick-arrow:hover { background-color: var(--brand-primary) !important; }
#image_wrapper.fullscreen .product-detail-image-topbar #image_fullscreen_close:hover { background-color: var(--brand-primary) !important; }
#rmaStickyPositions.loadingAJAX::after, #rmaStickyPositions.loadingAJAX::before { border-color: var(--brand-primary) var(--brand-primary) transparent transparent !important; }
#rmaStickyPositions.loadingAJAX::after, #rmaStickyPositions.loadingAJAX::before { border: 8px solid var(--brand-primary) !important; }
.account-head-data .account-head-data-credit { border: 1px solid var(--brand-primary) !important; }
.badge-check { border: 2px solid var(--brand-primary) !important; }
.badge-check .badge-circle { background-color: var(--brand-primary) !important; }
.badge-check .badge-circle { border-color: var(--brand-primary) !important; }
.badge-circle-1.on-list { background-color: var(--brand-primary) !important; }
.badge-circle-1.on-list { border: 1px solid var(--brand-primary) !important; }
.badge-circle:hover, .badge-circle:focus { background-color: var(--brand-primary) !important; }
.badge-circle:hover, .badge-circle:focus { border-color: var(--brand-primary) !important; }
.badge-outline-primary { border-color: var(--brand-primary) !important; }
.badge-outline-primary { color: var(--brand-primary) !important; }
.badge-primary { background-color: var(--brand-primary) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.bootstrap-select.custom-select button.dropdown-toggle:focus, .bootstrap-select.custom-select button[data-toggle=collapse]:focus:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.bootstrap-select.custom-select.show button.dropdown-toggle, .bootstrap-select.custom-select.show button[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.box_login .register .fa { color: var(--brand-primary) !important; }
.btn-animated .btn-outline-primary::after { background-color: var(--brand-primary) !important; }
.btn-animated .btn-outline-primary:hover { border-color: var(--brand-primary) !important; }
.btn-animated .btn-outline-primary:hover::after { background: var(--brand-primary) !important; }
.btn-animated .btn-primary:hover { background-color: var(--brand-primary) !important; }
.btn-animated .btn-primary:hover { border-color: var(--brand-primary) !important; }
.btn-icon-primary:hover { border-color: var(--brand-primary) !important; }
.btn-icon-primary:hover { color: var(--brand-primary) !important; }
.btn-icon-primary:not(:disabled):not(.disabled):active, .btn-icon-primary:not(:disabled):not(.disabled).active, .show > .btn-icon-primary.dropdown-toggle, .show > .btn-icon-primary[data-toggle=collapse]:not(.navbar-toggler) { background-color: var(--brand-primary) !important; }
.btn-icon-primary:not(:disabled):not(.disabled):active, .btn-icon-primary:not(:disabled):not(.disabled).active, .show > .btn-icon-primary.dropdown-toggle, .show > .btn-icon-primary[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.btn-icon-secondary:not(:disabled):not(.disabled):active, .btn-icon-secondary:not(:disabled):not(.disabled).active, .show > .btn-icon-secondary.dropdown-toggle, .show > .btn-icon-secondary[data-toggle=collapse]:not(.navbar-toggler) { background-color: var(--brand-primary) !important; }
.btn-icon-secondary:not(:disabled):not(.disabled):active, .btn-icon-secondary:not(:disabled):not(.disabled).active, .show > .btn-icon-secondary.dropdown-toggle, .show > .btn-icon-secondary[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.btn-link:hover { color: var(--brand-primary) !important; }
.btn-outline-primary { border-color: var(--brand-primary) !important; }
.btn-outline-primary { color: var(--brand-primary) !important; }
.btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--brand-primary) !important; }
.btn-outline-primary:hover { background-color: var(--brand-primary) !important; }
.btn-outline-primary:hover { border-color: var(--brand-primary) !important; }
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .show > .btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler) { background-color: var(--brand-primary) !important; }
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle, .show > .btn-outline-primary[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.btn-primary { background-color: var(--brand-primary) !important; }
.btn-primary { border-color: var(--brand-primary) !important; }
.btn-primary.disabled, .btn-primary:disabled { background-color: var(--brand-primary) !important; }
.btn-primary.disabled, .btn-primary:disabled { border-color: var(--brand-primary) !important; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) { background-color: var(--brand-primary) !important; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary) !important; }
.carousel-thumbnails .slick-slide.slick-current { border: 1px solid var(--brand-primary) !important; }
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item .badge-circle { background-color: var(--brand-primary) !important; }
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item .badge-circle { border-color: var(--brand-primary) !important; }
.checkout-steps .step-check { color: var(--brand-primary) !important; }
.consent-modal-close:hover, .consent-modal-close:focus { color: var(--brand-primary) !important; }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--brand-primary) !important; }
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { border-color: var(--brand-primary) !important; }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand-primary) !important; }
.custom-control-input:checked ~ .custom-control-label::before { border-color: var(--brand-primary) !important; }
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--brand-primary) !important; }
.custom-file-input:focus ~ .custom-file-label { border-color: var(--brand-primary) !important; }
.custom-range::-moz-range-thumb { background-color: var(--brand-primary) !important; }
.custom-range::-ms-thumb { background-color: var(--brand-primary) !important; }
.custom-range::-webkit-slider-thumb { background-color: var(--brand-primary) !important; }
.custom-select:focus { border-color: var(--brand-primary) !important; }
.fa-sup { background-color: var(--brand-primary) !important; }
.filter-item.active .filter-img, .filter-item:active .filter-img { border: 3px solid var(--brand-primary) !important; }
.filter-search-wrapper.input-group-selected .input-group-text, .filter-search-wrapper.input-group-selected .filter-search { border-color: var(--brand-primary) !important; }
.form-control:focus { border-color: var(--brand-primary) !important; }
.form-control:focus + .input-group-append .input-group-text { border-color: var(--brand-primary) !important; }
.form-icon-trigger-label:hover { color: var(--brand-primary) !important; }
.jqcloud-word a:hover { color: var(--brand-primary) !important; }
.list-group-item.active { background-color: var(--brand-primary) !important; }
.list-group-item.active { border-color: var(--brand-primary) !important; }
.modal-header .close:focus { background: var(--brand-primary) !important; }
.modal-header .close:hover { background-color: var(--brand-primary) !important; }
.noUi-horizontal .noUi-connect { background: var(--brand-primary) !important; }
.noUi-horizontal .noUi-handle { background: var(--brand-primary) !important; }
.page-link:hover { color: var(--brand-primary) !important; }
.productlist-filter-categories > .nav-item > .nav-link::before { border-color: var(--brand-primary) !important; }
.progress-bar { background-color: var(--brand-primary) !important; }
.slick-arrow:hover { background-color: var(--brand-primary) !important; }
.stepper .step-active .step-content::after { background: var(--brand-primary) !important; }
.stepper .step-current .step-content::after { background: var(--brand-primary) !important; }
.swatches-image.active { border: 1px solid var(--brand-primary) !important; }
.swatches-text.active { border: 1px solid var(--brand-primary) !important; }
.tab-navigation .nav-link::after { border-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary) !important; }
a.give-consent-preview:focus-visible { color: var(--brand-primary) !important; }
aside .nav-panel > .nav > .active > .nav-link { border-bottom: 0.375rem solid var(--brand-primary) !important; }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.5) !important; }
.btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-outline-primary.dropdown-toggle:focus, .show > .btn-outline-primary[data-toggle=collapse]:focus:not(.navbar-toggler) { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.5) !important; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.btn:not(:disabled):not(.disabled):active:focus, .btn:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25), inset 0 3px 5px rgba(0, 0, 0, 0.125) !important; }
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(var(--brand-primary-rgb), 0.5) !important; }
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before { background-color: rgba(var(--brand-primary-rgb), 0.5) !important; }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-file-input:focus ~ .custom-file-label { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(var(--brand-primary-rgb), 0.5) !important; }
.custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-range:focus::-ms-thumb { box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-select:focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before { background-color: rgba(var(--brand-primary-rgb), 0.5) !important; }
.form-control:focus { box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
.noUi-horizontal .noUi-handle { box-shadow: 0px 0px 0px 5px rgba(var(--brand-primary-rgb), 0.5) !important; }
.page-link:focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25) !important; }
a.badge-outline-primary:focus, a.badge-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.5) !important; }
a.badge-primary:focus, a.badge-primary.focus { box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.5) !important; }
/* NOVA Bootstrap CSS-Var --primary (Gelb) -> Brand-Rot, falls irgendwo via var(--primary) genutzt */
:root { --primary: var(--brand-primary); }

/* ========================================================================
   NOVA Gold-FAMILIE (lighten/darken von $primary) -> Brand-Rot
   #ffda5f (Focus), #c59800/#d2a200/#ffcc22 (Button-Hover-Gold),
   #d5a80b/#d9a700/#f2bf0d (Ribbons). Auto-generiert aus clear.css.
   ======================================================================== */
#cfg-container .custom-control:focus > label { outline: 2px solid var(--brand-primary) !important; }
#cfg-container .custom-control:focus-within > label { outline: 2px solid var(--brand-primary) !important; }
.btn-primary:focus, .btn-primary.focus { background-color: var(--brand-primary-dark) !important; }
.btn-primary:focus, .btn-primary.focus { border-color: var(--brand-primary-dark) !important; }
.btn-primary:hover { background-color: var(--brand-primary-dark) !important; }
.btn-primary:hover { border-color: var(--brand-primary-dark) !important; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) { background-color: var(--brand-primary-dark) !important; }
.cfg-group .cfg-swatch:checked ~ .custom-control-label .config-item { outline-color: var(--brand-primary) !important; }
.consent-switch .consent-input:focus + .consent-label::before { outline: 2px solid var(--brand-primary) !important; }
.file-drop-zone.clickable:focus { border: 2px solid var(--brand-primary) !important; }
.file-preview .btn-file:focus-visible { outline: 2px solid var(--brand-primary) !important; }
.file-preview .fileinput-remove:focus-visible { outline: 2px solid var(--brand-primary) !important; }
.opc-Video .btn-link:focus { color: var(--brand-primary) !important; }
.opc-Video .video-transcript.focus { border: 2px solid var(--brand-primary) !important; }
.productbox.productbox-hover:focus-visible .productbox-inner::before, .productbox.productbox-hover:focus-within .productbox-inner::before { outline: 2px solid var(--brand-primary) !important; }
.ribbon-1 { background-color: var(--brand-primary) !important; }
.ribbon-1::before { border-right-color: var(--brand-primary) !important; }
.ribbon-custom.bg-primary { border-right-color: var(--brand-primary) !important; }
.swatches-image.focus, .swatches-text.focus { outline: 2px solid var(--brand-primary) !important; }
:focus-visible { outline: 2px solid var(--brand-primary) !important; }
a.badge-outline-primary:hover, a.badge-outline-primary:focus { background-color: var(--brand-primary-dark) !important; }
a.badge-primary:hover, a.badge-primary:focus { background-color: var(--brand-primary-dark) !important; }
button.bg-primary:focus { background-color: var(--brand-primary-dark) !important; }

/* Focus-Box am Produktkärtchen entfernen (border none, wie gewünscht);
   interaktive Controls behalten einen barrierefreien roten Focus. */
.productbox.productbox-hover:focus-visible .productbox-inner::before,
.productbox.productbox-hover:focus-within .productbox-inner::before { outline: none !important; }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle, .show > .btn-primary[data-toggle=collapse]:not(.navbar-toggler) { border-color: var(--brand-primary-dark) !important; }
.table-primary tbody + tbody { border-color: var(--brand-primary) !important; }

/* ========================================================================
   NOVA KRITISCHE Inline-CSS (clear_crit.css) Gold -> Brand-Rot
   Diese Regeln werden inline im <head> geladen (u.a. Pagination-Unterstrich
   .page-item.active .page-link::after) und waren im ersten Sweep übersehen.
   ======================================================================== */
#header-top-bar a:not(.dropdown-item):not(.btn):hover,header a:not(.dropdown-item):not(.btn):hover { color:var(--brand-primary) !important; }
.box_login .register .fa { color:var(--brand-primary) !important; }
.btn-pause:focus,.btn-pause:focus-within { outline:2px solid var(--brand-primary) !important; }
.btn-skip-to { border:3px solid var(--brand-primary) !important; }
.jqcloud-word a:hover { color:var(--brand-primary) !important; }
.jqcloud-word.w5 { color:var(--brand-primary) !important; }
.nav-pills .nav-link.active,.nav-pills .show>.nav-link { background-color:var(--brand-primary) !important; }
.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link { border-color:var(--brand-primary) !important; }
.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus { color:var(--brand-primary) !important; }
.page-item.active .page-link::after,.page-item.active .page-text::after { border-bottom:4px solid var(--brand-primary) !important; }
.slick-slide a:hover,.slick-slide a:focus { color:var(--brand-primary) !important; }
:root { --primary: var(--brand-primary) !important; }
a:hover { color:var(--brand-primary) !important; }
aside .nav-panel>.nav>.active>.nav-link { border-bottom:.375rem solid var(--brand-primary) !important; }
header .navbar-nav>.nav-item>.nav-link::before { border-color:var(--brand-primary) !important; }

/* ========================================================================
   SUB-HEADER / KATEGORIE-MEGAMENÜ — Profi-Politur (Desktop >=992px)
   Behebt: schiefe/linksbündige Menüzeile (mr-auto-Konflikt), abgeschnittene
   Labels (NOVA ellipsis), ruckartiges Öffnen. NOVA-Markup unangetastet.
   ======================================================================== */
@media (min-width: 992px) {
  /* 1) Menüzeile sauber mittig (mr-auto + align-self:flex-start auflösen) */
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar.justify-content-start { justify-content: center !important; }
  #jtl-nav-wrapper #mainNavigation.navbar-collapse { flex: 1 1 auto !important; justify-content: center !important; }
  #jtl-nav-wrapper .nav-scrollbar { display: flex !important; justify-content: center !important; width: 100% !important; }
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar-inner {
    margin: 0 auto !important;
    align-self: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    column-gap: 2px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 2) Top-Level-Labels NIE abschneiden (NOVA-Ellipsis aushebeln) */
  #jtl-nav-wrapper .nav-scrollbar-item .nav-mobile-heading,
  #jtl-nav-wrapper .nav-scrollbar-item .text-truncate,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link > span {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    max-width: none !important;
    padding-right: 0 !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 7px 14px !important;
    border-radius: 9px !important;
    transition: color .16s ease, background-color .16s ease !important;
  }
  /* dezenter Hover-/Aktiv-Teppich hinter dem Label — klares Premium-Ziel */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link {
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
  }

  /* 3) Mega-Menü: ruhige Fläche + sanfte Einblendung statt Sprung */
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu {
    left: 0 !important; right: 0 !important; width: 100% !important;
    margin-top: 0 !important;
    border: 0 !important;
    border-top: 3px solid var(--brand-primary) !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 30px 60px -24px rgba(17,17,17,.28), 0 2px 8px rgba(17,17,17,.06) !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show {
    animation: dhMegaIn .2s ease both;
  }
  /* Inhalt mittig auf Seitenbreite, ruhiges Karten-Grid */
  #jtl-nav-wrapper .dropdown-full .dropdown-body { padding: 26px 0 30px !important; }
  #jtl-nav-wrapper .dropdown-full .dropdown-body > .container.subcategory-wrapper {
    max-width: 1280px !important; margin: 0 auto !important; padding: 0 56px !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .row.nav {
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)) !important;
    gap: 6px 14px !important;
    justify-content: center !important;
  }
}
@keyframes dhMegaIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ========================================================================
   KATEGORIE-MEGAMENÜ — modern / minimal / premium (Desktop >=992px)
   Fix: Kartentitel liefen über (meine Top-Level-Regel hatte sie miterwischt).
   Hier sauber gescopet + Karten neu: 4:3-Bild, 2-zeiliger zentrierter Titel,
   ruhiges Grid, sanfter Hover (Bild-Zoom + Lift + roter Titel).
   ======================================================================== */
@media (min-width: 992px) {
  /* ruhiges, mittiges Grid */
  #jtl-nav-wrapper .subcategory-wrapper .row.nav {
    grid-template-columns: repeat(auto-fill, minmax(166px, 1fr)) !important;
    gap: 8px 10px !important;
    justify-content: center !important;
  }
  /* Karte */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block {
    display: block !important;
    overflow: hidden !important;                 /* klippt den Bild-Zoom sauber */
    padding: 8px 8px 12px !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform .2s ease, background-color .2s ease, box-shadow .25s ease, border-color .2s ease !important;
  }
  /* Bild: einheitliches 4:3, dezenter Rahmen */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-image,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    border-radius: 11px !important;
    margin: 0 0 10px !important;
    background: #f4f4f5 !important;
    border: 1px solid #ededef !important;
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
  }
  /* Titel: zentriert, max. 2 Zeilen, NIE überlaufen, gleiche Kartenhöhe */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .text-truncate,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .nav-mobile-heading,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .submenu-headline-text,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block strong {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;          /* lange Komposita (Wohnraumheizkörper) umbrechen statt Ellipsis */
    word-break: normal !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 2px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: -.1px !important;
    color: var(--color-text, #20242b) !important;
    min-height: 2.64em !important;
  }
  /* Hover */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover {
    background: #faf2f2 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 28px -16px rgba(var(--brand-primary-rgb), .34) !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-image,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover img {
    transform: scale(1.07) !important;
    border-color: transparent !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .text-truncate,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .nav-mobile-heading,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-text,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover strong {
    color: var(--brand-primary) !important;
  }
}

/* ========================================================================
   SUB-HEADER POLITUR v2 — Profi (Desktop >=992px)
   Behebt: Caret/Unterstrich-Doppelmissbrauch von ::after (Ruck + Pfeil weg).
   ::after = NUR Caret (dreht beim Öffnen), ::before = zentrierter scaleX-
   Unterstrich (kein Layout-Shift). Karten-Hover: minimal + roter Ring.
   ======================================================================== */
@media (min-width: 992px) {
  /* nav-link stabil, konstante Größe (kein "Text wird kleiner") */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link {
    position: relative !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    padding: 8px 15px !important;
    color: rgba(255,255,255,.9) !important;
    transition: color .18s ease !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link { color: #fff !important; }

  /* ::after = NUR Caret (dropdown), dreht beim Öffnen, NIE Unterstrich */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover::after {
    content: '\f078' !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: static !important;
    display: inline-block !important;
    width: auto !important; height: auto !important;
    border: 0 !important; background: none !important;
    margin-left: 8px !important;
    font-size: .58em !important;
    opacity: .8 !important;
    transform: translateY(1px) !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after {
    transform: translateY(1px) rotate(180deg) !important;
    opacity: 1 !important;
  }
  /* Nicht-Dropdown: kein ::after-Balken */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle)::after { content: none !important; display: none !important; }

  /* ::before = zentrierter Unterstrich, scaleX (kein Layout-Shift) */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::before,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover::before,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link::before {
    content: '' !important;
    position: absolute !important;
    left: 15px !important; right: 15px !important; bottom: 2px !important; top: auto !important;
    width: auto !important; height: 2px !important;
    border: 0 !important; background: #fff !important; border-radius: 2px !important;
    transform: scaleX(0) !important; transform-origin: center !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover::before,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link::before,
  #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link::before {
    transform: scaleX(1) !important;
  }

  /* ---- Karten-Hover neu: minimal, roter Ring ums Bild, sanfter Zoom ---- */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover {
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover img,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-image {
    transform: scale(1.045) !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 2px var(--brand-primary) !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .text-truncate,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .nav-mobile-heading,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-text,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover strong {
    color: var(--brand-primary) !important;
  }
}

/* ========================================================================
   HEADER v3 — Desktop-Pill-Suche + Mobile Slide-in-Drawer (Profi-Redesign)
   ======================================================================== */

/* ---------- A) DESKTOP: Suchfeld als modernes Pill (>=992px) ---------- */
@media (min-width: 992px) {
  #jtl-nav-wrapper .main-search-wrapper {
    width: min(430px, 33vw) !important;
    min-width: 300px !important;
    max-width: 430px !important;
  }
  #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
  #jtl-nav-wrapper .main-search-wrapper .form-icon,
  #jtl-nav-wrapper .main-search-wrapper .input-group {
    border-radius: 999px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.06) !important;
  }
  #jtl-nav-wrapper .main-search-wrapper input#search-header,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
    height: 40px !important; min-height: 40px !important;
    border: 0 !important; background: #fff !important; box-shadow: none !important;
    font-size: 14px !important;
  }
  #jtl-nav-wrapper .main-search-wrapper input#search-header {
    border-radius: 999px 0 0 999px !important;
    padding: 0 8px 0 20px !important;
    color: var(--color-text, #20242b) !important;
  }
  #jtl-nav-wrapper .main-search-wrapper input#search-header::placeholder { color: var(--color-text-soft, #9aa0aa) !important; }
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
    border-radius: 0 999px 999px 0 !important;
    width: 48px !important; flex: 0 0 48px !important;
    padding: 0 !important;
  }
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .fa-search,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .svg-inline--fa,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary svg {
    color: var(--brand-primary) !important; font-size: 15px !important;
  }
}

/* ---------- B) MOBILE: echtes Slide-in-Drawer von links (<992px) ---------- */
@media (max-width: 991.98px) {
  /* Container NICHT mehr toggeln/verstecken -> Drawer ist fixed Kind */
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar),
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar):not(:has(#mainNavigation.show)),
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar):has(#mainNavigation.show) {
    display: block !important;
    position: static !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
    padding: 0 !important; margin: 0 !important;
  }
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar {
    display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; background: transparent !important;
  }

  /* Drawer-Panel */
  #jtl-nav-wrapper #mainNavigation,
  #jtl-nav-wrapper #mainNavigation:not(.show) {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: min(88vw, 380px) !important;
    height: 100% !important; max-height: 100% !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 0 28px !important;
    background: #fff !important;
    transform: translateX(-100%) !important;
    transition: transform .34s cubic-bezier(.4,0,.2,1) !important;
    z-index: 1050 !important;
    overflow-y: auto !important; overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 14px 0 44px -14px rgba(0,0,0,.4) !important;
    display: block !important; visibility: visible !important; opacity: 1 !important; border: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation.show { transform: translateX(0) !important; }

  /* innere Container linearisieren, horizontale Scroll-Pfeile weg */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-arrow { display: none !important; }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner,
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body,
  #jtl-nav-wrapper #mainNavigation .navbar-nav {
    display: block !important; overflow: visible !important; width: 100% !important;
    height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  }

  /* Drawer-Kopf "Menü" */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    padding: 16px 18px !important; border-bottom: 1px solid #eee !important; margin: 0 !important; background: #fff !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .nav-offcanvas-title {
    font-size: 17px !important; font-weight: 700 !important; color: #1a1a1a !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-hr { display: none !important; }

  /* Kategorie-Zeilen */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    min-height: 54px !important; padding: 14px 20px !important; margin: 0 !important;
    font-size: 15.5px !important; font-weight: 600 !important; color: var(--color-text, #1c1f24) !important;
    border-bottom: 1px solid #f0f0f1 !important; background: #fff !important; text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link:hover,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link:active,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link {
    background: #faf2f2 !important; color: var(--brand-primary) !important;
  }
  /* Labels NIE abschneiden */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link .nav-mobile-heading,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link .text-truncate,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link > span {
    overflow: visible !important; text-overflow: clip !important; white-space: normal !important;
    padding-right: 8px !important; max-width: none !important; flex: 1 1 auto !important;
  }
  /* sauberer Chevron rechts, dreht beim Öffnen */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link.dropdown-toggle::after {
    content: '\f054' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    font-size: 12px !important; color: #b9bcc2 !important; margin: 0 !important; border: 0 !important;
    position: static !important; width: auto !important; height: auto !important; flex: 0 0 auto !important;
    transition: transform .25s ease, color .2s ease !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link.dropdown-toggle::after {
    transform: rotate(90deg) !important; color: var(--brand-primary) !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link::before { display: none !important; }

  /* Submenü dezent */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item .dropdown-menu {
    background: #fafafb !important; border: 0 !important; box-shadow: none !important;
    border-bottom: 1px solid #f0f0f1 !important; border-radius: 0 !important; padding: 4px 0 8px !important; margin: 0 !important;
  }
}

/* ---------- Backdrop + Scroll-Lock (per JS getoggelt) ---------- */
.dh-nav-backdrop {
  position: fixed !important; inset: 0 !important;
  background: rgba(12,14,20,.5) !important;
  opacity: 0 !important; visibility: hidden !important;
  transition: opacity .32s ease !important; z-index: 1045 !important;
}
body.dh-drawer-open .dh-nav-backdrop { opacity: 1 !important; visibility: visible !important; }
body.dh-drawer-open { overflow: hidden !important; }

/* ========================================================================
   HEADER v4 FIX — Such-Pill greift sicher (Container) + Drawer nicht mehr grau
   ======================================================================== */

/* ---- A) DESKTOP-SUCHE: .input-group = Pill, Input/Button fluten flush ---- */
@media (min-width: 992px) {
  #jtl-nav-wrapper .main-search-wrapper #search,
  #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
  #jtl-nav-wrapper .main-search-wrapper form { background: transparent !important; box-shadow: none !important; border: 0 !important; }

  #jtl-nav-wrapper .main-search-wrapper .input-group {
    display: flex !important; align-items: stretch !important;
    height: 42px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 20px -10px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.06) !important;
  }
  #jtl-nav-wrapper .main-search-wrapper .input-group > input,
  #jtl-nav-wrapper .main-search-wrapper input[name="qs"],
  #jtl-nav-wrapper .main-search-wrapper input.ac_input,
  #jtl-nav-wrapper .main-search-wrapper input#search-header {
    height: 42px !important; min-height: 42px !important;
    flex: 1 1 auto !important; width: 1% !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
    background: #fff !important; color: var(--color-text, #20242b) !important;
    padding: 0 8px 0 22px !important; font-size: 14.5px !important;
  }
  #jtl-nav-wrapper .main-search-wrapper input[name="qs"]::placeholder { color: var(--color-text-soft, #9aa0aa) !important; }
  #jtl-nav-wrapper .main-search-wrapper .input-group-append { margin: 0 !important; display: flex !important; }
  #jtl-nav-wrapper .main-search-wrapper .input-group-append button,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
    height: 42px !important; min-height: 42px !important;
    width: 52px !important; flex: 0 0 52px !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
    background: #fff !important; padding: 0 !important; margin: 0 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .fa-search,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary svg,
  #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary i {
    color: var(--brand-primary) !important; font-size: 16px !important;
  }
}

/* ---- B) DRAWER: deckend weiß, etwas breiter (Backdrop liegt jetzt korrekt) ---- */
@media (max-width: 991.98px) {
  #jtl-nav-wrapper #mainNavigation,
  #jtl-nav-wrapper #mainNavigation:not(.show) {
    width: min(90vw, 420px) !important;
    background: #fff !important; opacity: 1 !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner,
  #jtl-nav-wrapper #mainNavigation .navbar-nav {
    background: #fff !important;
  }
  /* Backdrop sitzt jetzt als Geschwister im Header-Context -> sicher unter dem Drawer */
  #jtl-nav-wrapper .dh-nav-backdrop { z-index: 1045 !important; }
  #jtl-nav-wrapper #mainNavigation { z-index: 1050 !important; }
}

/* ========================================================================
   MOBILE-DRAWER v2 — sauberer Header (X-Close) + Unterkategorien als Liste
   ======================================================================== */
@media (max-width: 991.98px) {
  /* ---- Drawer-Header: Titel links, sauberes X rechts (grauen Blob killen) ---- */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header {
    display: block !important; padding: 14px 16px !important; border-bottom: 1px solid #eee !important; background: #fff !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .row {
    display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-name { order: 1 !important; margin: 0 !important; padding: 0 !important; }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-toggler { order: 2 !important; padding: 0 !important; flex: 0 0 auto !important; }
  #jtl-nav-wrapper #mainNavigation .nav-offcanvas-title { font-size: 17px !important; font-weight: 700 !important; color: #1a1a1a !important; }
  #jtl-nav-wrapper #mainNavigation a[data-menu-back] {
    color: #1a1a1a !important; font-weight: 700 !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; text-decoration: none !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-hr { display: none !important; }
  /* Close-Toggler -> sauberes X */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler {
    width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler-icon {
    width: auto !important; height: auto !important; min-width: 0 !important; background: none !important; background-image: none !important; filter: none !important; box-shadow: none !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler-icon::before {
    content: '\f00d' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    font-size: 21px !important; color: var(--color-text, #20242b) !important; box-shadow: none !important; width: auto !important; height: auto !important; background: none !important; position: static !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler-icon::after { content: none !important; display: none !important; }

  /* ---- Unterkategorien: kompakte Liste statt Riesen-Bildkarten ---- */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper { padding: 0 !important; max-width: none !important; }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .row.nav {
    display: block !important; margin: 0 !important; gap: 0 !important; grid-template-columns: none !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .col.nav-item-lg-m {
    width: 100% !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block {
    display: flex !important; align-items: center !important; gap: 14px !important;
    min-height: 60px !important; padding: 9px 20px !important; margin: 0 !important;
    border-bottom: 1px solid #f0f0f1 !important; border-radius: 0 !important;
    background: #fff !important; text-align: left !important; box-shadow: none !important; transform: none !important; overflow: visible !important;
  }
  /* Thumbnail klein (46px) */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block picture {
    flex: 0 0 46px !important; width: 46px !important; height: 46px !important; display: block !important; line-height: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-image,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block img {
    width: 46px !important; height: 46px !important; min-width: 46px !important; max-width: 46px !important; flex: 0 0 46px !important;
    aspect-ratio: 1 !important; object-fit: cover !important; border-radius: 10px !important; margin: 0 !important;
    border: 1px solid #ededef !important; background: #f4f4f5 !important; transform: none !important; box-shadow: none !important;
  }
  /* Titel links, einzeilig, normale Größe */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block .text-truncate,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-text {
    display: block !important; -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    flex: 1 1 auto !important; text-align: left !important; min-height: 0 !important; padding: 0 !important;
    font-size: 15px !important; font-weight: 600 !important; color: var(--color-text, #1c1f24) !important; line-height: 1.3 !important; margin: 0 !important;
  }
  /* "Kategorie anzeigen" Top-Link als Abschnitts-Header */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:first-child > a.d-block {
    min-height: 46px !important; padding: 12px 20px !important; background: #faf7f7 !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block .nav-mobile-heading {
    font-size: 12.5px !important; font-weight: 700 !important; text-transform: uppercase !important;
    letter-spacing: .05em !important; color: var(--brand-primary) !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  }
  /* Hover */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block:hover { background: #faf2f2 !important; }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .text-truncate,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-text { color: var(--brand-primary) !important; }
}

/* ===== MOBILE-DRAWER-HEADER FIX v2: Titel links / X rechts, sauberes Icon ===== */
@media (max-width: 991.98px) {
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .row {
    display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; margin: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-name {
    order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header-toggler {
    order: 2 !important; flex: 0 0 auto !important; width: auto !important; max-width: none !important; padding: 0 !important;
  }
  /* "Zurück" NUR wenn aktiv (d-none nicht ueberschreiben) */
  #jtl-nav-wrapper #mainNavigation a[data-menu-back].d-none { display: none !important; }
  #jtl-nav-wrapper #mainNavigation a[data-menu-back]:not(.d-none) {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
  }
  /* Close: Blob/Plus-Icon-Span ausblenden, sauberes X auf den Button */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler {
    width: 40px !important; height: 40px !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; position: relative !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler .navbar-toggler-icon { display: none !important; }
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler::before {
    content: '\f00d' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    font-size: 21px !important; line-height: 1 !important; color: var(--color-text, #20242b) !important;
  }
}

/* ========================================================================
   DESKTOP-SUCHE v5 — minimal & sauber, Twitter-Typeahead-tauglich (>=992px)
   Ursache alt: .twitter-typeahead war inline-block -> Input flutete nicht.
   ======================================================================== */
@media (min-width: 992px) {
  /* Verschachtelte Wrapper neutralisieren */
  #jtl-nav-wrapper .main-search-wrapper #search,
  #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
  #jtl-nav-wrapper .main-search-wrapper form,
  #jtl-nav-wrapper .main-search-wrapper .form-icon {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; width: 100% !important;
  }
  /* Pill-Container: minimal = duenner Rahmen + Hauch Schatten */
  #jtl-nav-wrapper .main-search-wrapper .input-group {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    height: 40px !important; width: 100% !important;
    background: #fff !important;
    border: 1px solid #e6e7ea !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  /* DER FIX: Typeahead-Wrapper muss fluten (war inline-block) */
  #jtl-nav-wrapper .main-search-wrapper .twitter-typeahead {
    display: flex !important; align-items: center !important;
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 100% !important; position: relative !important;
  }
  /* beide Inputs (tt-input + Ghost tt-hint) */
  #jtl-nav-wrapper .main-search-wrapper .input-group input,
  #jtl-nav-wrapper .main-search-wrapper input.ac_input,
  #jtl-nav-wrapper .main-search-wrapper input#search-header {
    height: 38px !important; width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important;
    border: 0 !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important;
    background: transparent !important; color: var(--color-text, #20242b) !important;
    padding: 0 6px 0 20px !important; font-size: 14.5px !important; line-height: 38px !important;
  }
  #jtl-nav-wrapper .main-search-wrapper input::placeholder { color: var(--color-text-soft, #9aa0aa) !important; opacity: 1 !important; }
  #jtl-nav-wrapper .main-search-wrapper .tt-hint { color: #c4c8cf !important; }
  /* Lupe-Button flush rechts, rot, randlos */
  #jtl-nav-wrapper .main-search-wrapper .input-group-append { display: flex !important; align-items: center !important; margin: 0 !important; height: 100% !important; }
  #jtl-nav-wrapper .main-search-wrapper .input-group-append button,
  #jtl-nav-wrapper .main-search-wrapper button.btn-secondary {
    height: 40px !important; width: 46px !important; flex: 0 0 46px !important;
    border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important;
  }
  #jtl-nav-wrapper .main-search-wrapper button.btn-secondary .fa-search,
  #jtl-nav-wrapper .main-search-wrapper button.btn-secondary svg,
  #jtl-nav-wrapper .main-search-wrapper button.btn-secondary i {
    color: var(--brand-primary) !important; font-size: 15px !important;
  }
  /* Fokus: dezenter roter Ring statt wuchtig */
  #jtl-nav-wrapper .main-search-wrapper .input-group:focus-within {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12) !important;
  }
  /* Typeahead-Vorschlagsliste sauber */
  #jtl-nav-wrapper .main-search-wrapper .tt-menu {
    margin-top: 8px !important; background: #fff !important; border: 1px solid #eee !important;
    border-radius: 14px !important; overflow: hidden !important;
    box-shadow: 0 18px 40px -16px rgba(0,0,0,.25) !important;
  }
}

/* ========================================================================
   HEADER MINI-CART DROPDOWN — sauber, einheitlich, klare CTA-Hierarchie
   ======================================================================== */
#cart-dropdown-container.cart-dropdown {
  border: 0 !important; border-radius: 16px !important;
  box-shadow: 0 26px 60px -22px rgba(17,17,17,.32), 0 2px 8px rgba(17,17,17,.06) !important;
  padding: 0 !important; min-width: 384px !important; max-width: 430px !important;
  overflow: hidden !important; margin-top: 10px !important; background: #fff !important;
}
/* Items-Tabelle */
#cart-dropdown-container .table-responsive { padding: 4px 0 0 !important; }
#cart-dropdown-container .dropdown-cart-items { margin: 0 !important; width: 100% !important; }
#cart-dropdown-container .dropdown-cart-items tbody tr { border-bottom: 1px solid #f1f1f2 !important; }
#cart-dropdown-container .dropdown-cart-items tbody tr:last-child { border-bottom: 0 !important; }
#cart-dropdown-container .dropdown-cart-items td { padding: 13px 18px !important; vertical-align: middle !important; border: 0 !important; }
#cart-dropdown-container .dropdown-cart-items td:last-child { text-align: right !important; font-weight: 700 !important; color: var(--color-text, #1c1f24) !important; white-space: nowrap !important; font-size: 14px !important; }
#cart-dropdown-container .dropdown-cart-items td .row { align-items: center !important; flex-wrap: nowrap !important; margin: 0 !important; gap: 12px !important; }
#cart-dropdown-container .dropdown-cart-items td .row > [class*="col"] { padding: 0 !important; }
/* Thumbnail */
#cart-dropdown-container .img-sm,
#cart-dropdown-container .dropdown-cart-items img {
  width: 54px !important; height: 54px !important; min-width: 54px !important; object-fit: cover !important;
  border-radius: 10px !important; border: 1px solid #ededef !important; background: #f5f5f6 !important;
}
/* Produktname */
#cart-dropdown-container .dropdown-cart-items a,
#cart-dropdown-container .dropdown-cart-items .cart-items-name {
  color: var(--color-text, #1c1f24) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.35 !important; text-decoration: none !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
#cart-dropdown-container .dropdown-cart-items a:hover { color: var(--brand-primary) !important; }
/* Body: Summen + Buttons */
#cart-dropdown-container .dropdown-body { padding: 14px 18px 18px !important; background: #fafafb !important; border-top: 1px solid #eeeef0 !important; }
#cart-dropdown-container .dropdown-body ul { margin: 0 0 14px !important; padding: 0 !important; }
#cart-dropdown-container .dropdown-body li,
#cart-dropdown-container .cart-dropdown-total-item {
  display: flex !important; justify-content: space-between !important; align-items: baseline !important;
  font-size: 12.5px !important; color: var(--color-text-soft, #6b7280) !important; padding: 3px 0 !important; list-style: none !important;
}
#cart-dropdown-container .dropdown-body li.font-weight-bold-util {
  font-size: 16px !important; font-weight: 700 !important; color: var(--color-text, #1c1f24) !important;
  margin-top: 7px !important; padding-top: 11px !important; border-top: 1px solid #e8e8ea !important;
}
#cart-dropdown-container .cart-dropdown-total-item-price { font-weight: 700 !important; color: var(--color-text, #1c1f24) !important; }
#cart-dropdown-container .dropdown-body li.font-weight-bold-util .cart-dropdown-total-item-price { color: var(--brand-primary) !important; }
/* Buttons: gleiche Groesse, klare Hierarchie */
#cart-dropdown-container .cart-dropdown-buttons { display: flex !important; gap: 10px !important; margin: 0 !important; }
#cart-dropdown-container .cart-dropdown-buttons > [class*="col"] { padding: 0 !important; flex: 1 1 0 !important; max-width: none !important; width: auto !important; }
#cart-dropdown-container .cart-dropdown-buttons .btn {
  width: 100% !important; height: 46px !important; border-radius: 11px !important; font-size: 13.5px !important; font-weight: 700 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; white-space: normal !important;
  line-height: 1.2 !important; box-shadow: none !important; padding: 6px 10px !important; transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
/* PRIMÄR = Sicher zur Kasse (Checkout) -> gefuellt rot */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next,
#cart-dropdown-container .cart-dropdown-buttons .btn-outline-primary {
  background: var(--brand-primary) !important; border: 1px solid var(--brand-primary) !important; color: #fff !important;
}
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover,
#cart-dropdown-container .cart-dropdown-buttons .btn-outline-primary:hover {
  background: var(--brand-primary-dark) !important; border-color: var(--brand-primary-dark) !important; color: #fff !important;
}
/* SEKUNDÄR = Zum Warenkorb -> dezenter Outline */
#cart-dropdown-container .cart-dropdown-buttons .btn-primary {
  background: #fff !important; border: 1px solid #d9dbe0 !important; color: var(--color-text, #20242b) !important;
}
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:hover {
  background: #fff !important; border-color: var(--brand-primary) !important; color: var(--brand-primary) !important;
}
/* §46 PayPal-Express im Mini-Cart (Audit C1, echte Ursache):
   Das PayPal-Plugin injiziert seine Express-Buttons (Direkt zu PayPal /
   Spaeter Bezahlen) als col-12-Container DIREKT in .cart-dropdown-buttons.
   Unser display:flex + flex:1 auf allen [class*=col]-Kindern quetschte
   dann 3-4 Elemente in EINE Reihe (Buttons ~109px, Text umbricht, PayPal
   laeuft rechts aus dem Dropdown). Fix: Zeile darf umbrechen, die PayPal-
   Container erzwingen volle Breite -> eigene Reihe UNTER den Buttons. */
#cart-dropdown-container .cart-dropdown-buttons {
    flex-wrap: wrap !important;
}
#cart-dropdown-container .cart-dropdown-buttons > [id^="ppc-paypal-button-custom-"],
#cart-dropdown-container .cart-dropdown-buttons > [id^="paypal-button-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px 0 0 !important;
}
#cart-dropdown-container [id^="ppc-"][id$="-horizontal-container"] {
    display: flex !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
#cart-dropdown-container .ppc-standalone-buttons {
    flex: 1 1 0 !important;
    max-width: none !important;
    padding: 0 !important;
}

/* §47 NOVA-Element-Falle: NOVAs Kern-CSS (theme_crit.css) setzt
   header { position:relative; z-index:1020 } auf JEDES <header>-ELEMENT —
   gedacht nur fuer den Seiten-Header. Unsere semantischen Content-Header
   (Warenkorb-Ueberschrift .rt-basket__header, PDP .dh-pdp-buybox__head,
   Checkout-Sektionen) bekamen damit denselben z-index wie die Navigation
   und malten sich UEBER Nav-Dropdowns (Mini-Cart verdeckt, Audit C1-Folge).
   Fuer alle header ausser dem Seiten-Header zuruecksetzen. */
header:not(#jtl-nav-wrapper) {
    z-index: auto;
}

/* Empty-State */
#cart-dropdown-container .cart-dropdown-empty {
  display: block !important; text-align: center !important; padding: 30px 22px !important;
  color: var(--color-text-soft, #6b7280) !important; font-size: 14px !important; white-space: normal !important; text-decoration: none !important;
}
#cart-dropdown-container .cart-dropdown-empty:hover { color: var(--brand-primary) !important; background: transparent !important; }
/* Versand-Hinweis */
#cart-dropdown-container .dropdown-body hr { margin: 13px 0 !important; border: 0 !important; border-top: 1px solid #ececee !important; }
#cart-dropdown-container .cart-dropdown-shipping-notice { font-size: 12px !important; color: var(--color-text-soft, #6b7280) !important; }
#cart-dropdown-container .cart-dropdown-shipping-notice .fa-truck { color: var(--brand-primary) !important; }

/* ========================================================================
   HEADER-FARBSTRATEGIE (Option B) + schlanke rotierende Topbar
   ======================================================================== */

/* ---- A) TOPBAR: rotierende Nachricht (Bewertung / Versand / Newsletter) ---- */
#header-top-bar .dh-topbar-rotator {
  position: relative; display: flex !important; align-items: center;
  height: 22px; min-width: 380px; color: #fff; font-size: 13px; white-space: nowrap;
  order: -1 !important; margin-right: auto !important;
}
#header-top-bar .dh-topbar-msg {
  position: absolute; left: 0; top: 0; height: 22px;
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.92); text-decoration: none;
  opacity: 0; animation: dhTopRotate 13.5s infinite;
}
#header-top-bar .dh-topbar-msg strong { color: #fff; font-weight: 700; }
/* Kontrast-Fix: NOVA-Parent faerbt Topbar-Links #525252 (grau auf schwarz) -> hell erzwingen */
#header-top-bar a.dh-topbar-msg,
#header-top-bar a.dh-topbar-msg--c,
#header-top-bar .dh-topbar-msg { color: rgba(255,255,255,.95) !important; }
#header-top-bar .dh-topbar-msg--b { animation-delay: 4.5s; }
#header-top-bar .dh-topbar-msg--c { animation-delay: 9s; }
#header-top-bar .dh-topbar-stars { color: #ffce3a; letter-spacing: 1px; font-size: 12px; }
#header-top-bar .dh-topbar-check { color: #4ade80; font-weight: 900; }
#header-top-bar .dh-topbar-lottie { width: 20px; height: 20px; }
#header-top-bar .dh-topbar-msg--c:hover strong { text-decoration: underline; }
@keyframes dhTopRotate { 0%,4%{opacity:0} 8%,28%{opacity:1} 32%,100%{opacity:0} }
@media (max-width: 991.98px) {
  #header-top-bar .dh-topbar-rotator { min-width: 0; width: 100%; justify-content: center; margin: 0 !important; padding: 0 8px !important; }
  #header-top-bar .dh-topbar-msg { left: 50%; transform: translateX(-50%); justify-content: center; max-width: 100%; }
  #header-top-bar .dh-topbar-msg { font-size: 12.5px !important; }
}

/* ---- B) OPTION B: Menü-Leiste WEISS, Main bleibt rot (Desktop) ---- */
@media (min-width: 992px) {
  /* Menü-Reihe weiss mit dezenter Tiefe; Main-Reihe (.hide-navbar) bleibt rot */
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
    background: #fff !important;
    box-shadow: 0 8px 18px -14px rgba(17,17,17,.28) !important;
    border-top: 1px solid rgba(0,0,0,.04) !important;
  }
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar,
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) .nav-scrollbar,
  #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) .nav-scrollbar-inner { background: transparent !important; }

  /* Top-Level-Links: dunkel statt weiss, rot bei hover/aktiv */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
    color: var(--color-text, #1c1f24) !important; background: transparent !important;
  }
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link {
    color: var(--brand-primary) !important; background: transparent !important;
  }
  /* Unterstrich-Indikator: ROT (war weiss) */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::before { background: var(--brand-primary) !important; }
  /* die alte border-color:weiss Regel der Pseudos neutralisieren */
  #jtl-nav-wrapper .navbar-nav .nav-link::after,
  #jtl-nav-wrapper .navbar-nav .nav-link::before { border-color: var(--brand-primary) !important; }
  /* Caret: dezent grau, rot beim Oeffnen */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after { color: var(--color-text-soft, #9aa0aa) !important; }
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after { color: var(--brand-primary) !important; }
}

/* ========================================================================
   MEGA-MENÜ FEINSCHLIFF — Animation (Stagger von links), Abstände, Baymard
   ======================================================================== */
@media (min-width: 992px) {
  /* Menüleiste: etwas mehr Luft zwischen Items */
  #jtl-nav-wrapper .navbar-nav.nav-scrollbar-inner { column-gap: 6px !important; }
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link { padding: 9px 16px !important; font-size: 15px !important; letter-spacing: -.1px !important; }

  /* Panel & Grid harmonisieren */
  #jtl-nav-wrapper .dropdown-full .dropdown-body { padding: 22px 0 26px !important; }
  #jtl-nav-wrapper .dropdown-full .dropdown-body > .container.subcategory-wrapper { max-width: 1180px !important; padding: 0 40px !important; margin: 0 auto !important; }
  #jtl-nav-wrapper .subcategory-wrapper .row.nav {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 4px 16px !important; justify-content: center !important;
  }
  /* Karte: Abstände + Typo */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block { padding: 10px 10px 14px !important; border-radius: 14px !important; }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block img,
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-image {
    aspect-ratio: 4 / 3 !important; height: auto !important; border-radius: 12px !important; margin-bottom: 12px !important; border: 1px solid #ececee !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block .text-truncate {
    font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: -.1px !important; color: var(--color-text, #20242b) !important;
    line-height: 1.35 !important; min-height: 2.7em !important; padding: 0 2px !important;
  }

  /* Entrance: Karten staffeln von links nach rechts */
  #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show .subcategory-wrapper .nav-item-lg-m {
    animation: dhCardIn .42s cubic-bezier(.2,.75,.25,1) both;
  }
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(1){animation-delay:.02s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(2){animation-delay:.05s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(3){animation-delay:.08s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(4){animation-delay:.11s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(5){animation-delay:.14s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(6){animation-delay:.17s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(7){animation-delay:.20s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(8){animation-delay:.23s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(9){animation-delay:.26s}
  #jtl-nav-wrapper .dropdown-menu.show .nav-item-lg-m:nth-child(n+10){animation-delay:.29s}

  /* Baymard: "Alle <Kategorie> anzeigen ->" als Voll-Breite-CTA unten */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none {
    display: block !important; order: 99 !important; grid-column: 1 / -1 !important;
    margin: 10px 8px 0 !important; border-top: 1px solid #eef0f1 !important; padding-top: 14px !important; animation: none !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    min-height: 0 !important; padding: 4px 2px !important; background: transparent !important; box-shadow: none !important; transform: none !important; border: 0 !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none .nav-mobile-heading {
    font-size: 14px !important; font-weight: 700 !important; color: var(--brand-primary) !important; text-transform: none !important; letter-spacing: 0 !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block::after {
    content: '\f061' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; font-size: 11px !important; color: var(--brand-primary) !important;
    transition: transform .2s ease !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block:hover::after { transform: translateX(3px) !important; }
}
@keyframes dhCardIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  #jtl-nav-wrapper .dropdown-menu.show .subcategory-wrapper .nav-item-lg-m { animation: none !important; }
}

/* ========================================================================
   MARKEN-TYPOGRAFIE — Manrope (Display) + IBM Plex Sans (Body), markenweit
   ======================================================================== */
/* zentrale System-Font-Variable auf Body-Schrift umbiegen (greift überall) */
:root { --rt-font-sans: var(--font-body) !important; }
/* Body + Formularfelder -> IBM Plex Sans */
body { font-family: var(--font-body) !important; }
input, select, textarea, .form-control, .ac_input, .selectpicker,
.dropdown-menu, .btn-link, .breadcrumb, .nav-link {
  font-family: var(--font-body) !important;
}
/* Überschriften + Navigation + Buttons -> Manrope (Display) */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.product-title, .product-title.h2,
.dh-hero2__title, .dh-pdp-buybox__title, .rt-pdp-decision h2, .rt-pdp-decision h3,
.dh-home-hero-2026 h1, .dh-home-hero-2026 h2,
#jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
.btn, button.btn, a.btn,
.cart-dropdown-buttons .btn, .dh-pdp-buybox .btn, #add-to-cart .btn {
  font-family: var(--font-display) !important;
}
/* Logo-Wortmarke (falls Text) + Topbar-Strong dezent Display */
#header-top-bar .dh-topbar-msg strong { font-family: var(--font-display) !important; }

/* ===== HEADER-FEINSCHLIFF: Topbar-Padding, Trust-Icons weg, View-All-Pfeil ===== */
/* 1) Topbar-Inhalt nicht am Rand kleben -> Ausrichtung wie Main-Header */
@media (min-width: 992px) {
  #header-top-bar .container-fluid.d-lg-flex.flex-row-reverse,
  #header-top-bar .container-fluid.d-lg-flex,
  #header-top-bar > .container-fluid {
    padding-left: 92px !important; padding-right: 92px !important;
  }
}
@media (min-width: 992px) and (max-width: 1320px) {
  #header-top-bar .container-fluid.d-lg-flex.flex-row-reverse,
  #header-top-bar .container-fluid.d-lg-flex,
  #header-top-bar > .container-fluid {
    padding-left: 64px !important; padding-right: 64px !important;
  }
}
/* 3) Gold-Coin-Trust-Icons sicher entfernt (Template raus + CSS-Sicherung) */
.dh-header-trust-icons-wrapper,
.dh-header-trust-icons { display: none !important; }

/* 2) Mega-Menü "… anzeigen ->" Pfeil vertikal exakt mittig */
@media (min-width: 992px) {
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block {
    align-items: center !important; line-height: 1 !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none .nav-mobile-heading {
    display: inline-flex !important; align-items: center !important; line-height: 1 !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block::after {
    display: inline-flex !important; align-items: center !important; align-self: center !important;
    line-height: 1 !important; position: relative !important; top: -1px !important;
  }
}

/* ===== MENÜ-FIX: kein Hover-Versatz + View-All-Pfeil exakt mittig ===== */
@media (min-width: 992px) {
  /* Padding/Größe in ALLEN States identisch -> kein Breiten-Reflow beim Hover */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link {
    padding: 9px 16px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    letter-spacing: -.1px !important;
  }

  /* View-All "… anzeigen ->" : tight flex, Pfeil-Glyph sauber zentriert */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block {
    display: inline-flex !important; align-items: center !important; gap: 9px !important;
    line-height: 1 !important; min-height: 0 !important; padding: 6px 2px !important;
  }
  /* Selektor MIT a.d-block -> schlaegt die Tile-Label-Regel (…nav-item-lg-m a.d-block .nav-mobile-heading);
     sonst erbt die View-All-Headline min-height:2.64em + line-clamp:2 -> reserviert 2 Zeilen,
     Text steht oben, Pfeil zentriert zur Box -> sitzt zu tief. Hier: EINE Zeile, hugging. */
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none a.d-block .nav-mobile-heading {
    display: inline-flex !important; align-items: center !important;
    line-height: 1 !important; padding: 0 !important; margin: 0 !important;
    min-height: 0 !important; -webkit-line-clamp: unset !important;
  }
  #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block::after {
    content: '\2192' !important;                    /* Unicode-Pfeil in Textschrift -> gleiche Baseline wie Text */
    font-family: var(--font-display), sans-serif !important;
    font-weight: 700 !important; font-size: 16px !important; color: var(--brand-primary) !important;
    display: inline-flex !important; align-items: center !important; align-self: center !important;
    line-height: 1 !important; position: static !important; top: auto !important; transform: none !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   MOBILE-MENÜ POLITUR (additiv, sicher) — [v: menumob2]
   NUR Defizit-Fixes. Fasst NOVAs Slide-Panel NICHT an (kein .dropdown-menu/
   .row.nav/Container-Eingriff -> Subkategorie-Slide bleibt intakt).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* 1) Top-Level: <li>-Padding (NOVA-Theme) killen -> tighte, konsistente Zeilen */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-body .navbar-nav > li.nav-scrollbar-item {
    padding: 0 !important; margin: 0 !important; min-height: 0 !important; border: 0 !important;
  }

  /* 2) SALE zuverlässig ausblenden (Spezifität sicher) */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.dh-sale-nav-hidden,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item .dh-sale-link { display: none !important; }

  /* 3) Top-Level-Chevron kräftiger + sauber rechts */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link.dropdown-toggle::after {
    font-size: 13px !important; color: var(--color-text-soft, #8a8f97) !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link.dropdown-toggle::after {
    color: var(--brand-primary) !important;
  }

  /* 4) Subkategorie-Zeilen: rechter Chevron als Tap-Affordance (nur echte Kategorien) */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block {
    justify-content: flex-start !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block::after {
    content: '\f054' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    font-size: 12px !important; color: #c2c5cc !important;
    flex: 0 0 auto !important; margin-left: auto !important; padding-left: 8px !important;
    border: 0 !important; position: static !important; transform: none !important;
    display: inline-flex !important; align-items: center !important; align-self: center !important;
  }
  /* Label vertikal sauber zentriert, max 2 Zeilen, kein Überlauf */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block .text-truncate,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block .submenu-headline-text {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    overflow: hidden !important; overflow-wrap: anywhere !important; white-space: normal !important;
    font-size: 14.5px !important; line-height: 1.28 !important; letter-spacing: -.1px !important;
  }

  /* 5) "Alle … anzeigen" Top-Zeile: klare Primär-Zeile + Pfeil (statt blasser Balken) */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:first-child > a.d-block {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
    min-height: 52px !important; padding: 0 20px !important;
    background: var(--brand-tint-soft, #fbf1f1) !important;
    border-bottom: 1px solid #f3dede !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none .nav-mobile-heading,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:first-child > a.d-block .nav-mobile-heading {
    display: inline-flex !important; align-items: center !important; flex: 0 1 auto !important; min-height: 0 !important;
    font-family: var(--font-display), sans-serif !important;
    font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .04em !important; text-transform: uppercase !important;
    line-height: 1 !important; color: var(--brand-primary) !important; white-space: normal !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block::after {
    content: '\2192' !important; font-family: var(--font-display), sans-serif !important;
    font-weight: 700 !important; font-size: 15px !important; color: var(--brand-primary) !important;
    display: inline-flex !important; align-items: center !important; line-height: 1 !important;
    position: static !important; transform: none !important; margin-left: 4px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-SUCHE — Such-Icon + Slide-down-Panel  [v: msearch1]
   Wiederherstellung der auf Mobile entfernten Suche (Baymard: Top-Priorität).
   Desktop bleibt die Pill-Suche; Toggle nur < 992px.
   ════════════════════════════════════════════════════════════════════════ */

/* Toggle-Icon standardmäßig aus (Desktop nutzt die Pill) */
.dh-msearch-toggle-li { display: none !important; }
#dh-msearch-panel { display: none !important; }

@media (max-width: 991.98px) {

  /* ---- Such-Icon in der Header-Icon-Leiste (weiß auf rotem Header) ---- */
  #jtl-nav-wrapper ul.nav-icons > li.dh-msearch-toggle-li {
    display: flex !important; align-items: center !important; justify-content: center !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
  }
  #jtl-nav-wrapper .dh-msearch-toggle {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important; background: transparent !important;
    color: #fff !important; border-radius: 12px !important; cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important; transition: background-color .15s ease !important;
  }
  #jtl-nav-wrapper .dh-msearch-toggle i { font-size: 18px !important; line-height: 1 !important; color: #fff !important; }
  #jtl-nav-wrapper .dh-msearch-toggle:active,
  body.dh-msearch-open #jtl-nav-wrapper .dh-msearch-toggle { background: rgba(255,255,255,.16) !important; }

  /* ---- Slide-down-Panel: schließt sauber unter dem Header auf ---- */
  #dh-msearch-panel {
    display: block !important;
    overflow: hidden !important;
    max-height: 0 !important; opacity: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid #ededf0 !important;
    box-shadow: 0 14px 24px -18px rgba(12,14,20,.5) !important;
    transition: max-height .28s cubic-bezier(.2,.7,.2,1), opacity .2s ease !important;
    width: 100% !important;
  }
  body.dh-msearch-open #dh-msearch-panel { max-height: 88px !important; opacity: 1 !important; }

  #dh-msearch-panel .dh-msearch-form {
    display: flex !important; align-items: center !important; gap: 8px !important;
    height: 46px !important;                          /* minimaler */
    width: 100% !important; max-width: 520px !important; margin: 10px auto !important; /* schmaler + zentriert */
    padding: 0 6px 0 14px !important;
    background: #f4f4f6 !important; border: 1px solid #e6e6ea !important; border-radius: 999px !important;
    transition: border-color .15s ease, background-color .15s ease !important;
  }
  #dh-msearch-panel .dh-msearch-form:focus-within {
    background: #fff !important; border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .12) !important;
  }
  #dh-msearch-panel .dh-msearch-ico { display: inline-flex !important; align-items: center !important; color: var(--brand-primary) !important; font-size: 15px !important; flex: 0 0 auto !important; }
  /* WICHTIG: twitter-typeahead (Autocomplete-JS des Shops) umschließt den Input in
     <div.twitter-typeahead> -> DIESER Wrapper ist das Flex-Kind. Muss wachsen, sonst
     bleibt das Feld content-breit (175px) und X klebt mittig. */
  #dh-msearch-panel .twitter-typeahead {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important;
    display: flex !important; align-items: center !important; position: relative !important;
  }
  #dh-msearch-panel .dh-msearch-input,
  #dh-msearch-panel .twitter-typeahead .tt-input,
  #dh-msearch-panel .twitter-typeahead .tt-hint {
    flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 46px !important;
    border: 0 !important; outline: none !important; background: transparent !important; box-shadow: none !important;
    font-family: var(--font-body), sans-serif !important; font-size: 16px !important; /* 16px = kein iOS-Zoom */
    color: var(--color-text, #20242b) !important; padding: 0 !important; margin: 0 !important;
  }
  #dh-msearch-panel .twitter-typeahead .tt-hint { color: #c4c8cf !important; }
  #dh-msearch-panel .dh-msearch-input::placeholder,
  #dh-msearch-panel .tt-input::placeholder { color: var(--color-text-soft, #9aa0aa) !important; opacity: 1 !important; }
  #dh-msearch-panel .dh-msearch-input::-webkit-search-cancel-button { -webkit-appearance: none !important; }
  /* Autocomplete-Dropdown unter dem Feld */
  #dh-msearch-panel .tt-menu {
    position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 8px) !important;
    background: #fff !important; border: 1px solid #ececef !important; border-radius: 14px !important;
    box-shadow: 0 18px 40px -16px rgba(12,14,20,.4) !important; padding: 6px !important; z-index: 50 !important;
    max-height: 60vh !important; overflow-y: auto !important;
  }
  #dh-msearch-panel .dh-msearch-close {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important; flex: 0 0 auto !important;
    border: 0 !important; background: transparent !important; color: var(--color-text-soft, #8a8f97) !important; cursor: pointer !important;
    border-radius: 50% !important; padding: 0 !important;
  }
  #dh-msearch-panel .dh-msearch-close:active { background: #ececee !important; }
  #dh-msearch-panel .dh-msearch-close i { font-size: 16px !important; }

  /* ---- Burger: Touch-Target auf 44×44px (WCAG AA) ---- */
  /* ID #burger-menu nötig: schlägt die NOVA-ID-Regel (min 24x38) per Spezifität */
  #jtl-nav-wrapper #burger-menu.burger-menu-wrapper.navbar-toggler,
  #jtl-nav-wrapper button#burger-menu.navbar-toggler,
  #jtl-nav-wrapper .burger-menu-wrapper.navbar-toggler {
    min-width: 44px !important; min-height: 44px !important;
    width: 44px !important; height: 44px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   HEADER/MENÜ POLISH — feinere Typo + Rhythmus + Frosted-Drawer  [v: polish1]
   refined/luxury-minimal: ausbalancierte Abstände, leichtere Manrope-Gewichte.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- DESKTOP: Menü-Streifen vertikal ausbalancieren + Typo feiner ---- */
@media (min-width: 992px) {
  /* Streifen hatte padding 0/8 -> Text 9px oben / 17px unten. Symmetrisch -> 13/13, Höhe bleibt. */
  #jtl-nav-wrapper > .container-fluid.menu-center-center {
    padding-top: 4px !important; padding-bottom: 4px !important;
  }
  /* Menü-Labels in echtem Manrope 400 (war 400 deklariert, aber nur 500+ geladen -> faux-schwer) */
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link {
    font-weight: 400 !important; letter-spacing: 0 !important;
  }
  /* aktives Item darf eine Spur kräftiger sein (Hierarchie), aber nicht fett */
  #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link { font-weight: 500 !important; }
}

/* ---- MOBILE: ruhig & minimal — kein Frosted, keine Farbflächen ---- */
@media (max-width: 991.98px) {
  /* Drawer: klares solides Weiß, KEIN Blur/Transparenz (Frosted entfernt) */
  #jtl-nav-wrapper #mainNavigation.navbar-collapse,
  #jtl-nav-wrapper #mainNavigation.show,
  #jtl-nav-wrapper #mainNavigation:not(.show) {
    background: #fff !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }

  /* Typo dünner: Top-Level + Subkategorie auf Manrope 500 (war 600) */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link {
    font-weight: 500 !important; letter-spacing: -.1px !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block .text-truncate,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block .submenu-headline-text,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block strong {
    font-weight: 500 !important;
  }
  /* "Menü"-Titel eine Spur leichter (700 -> 600) */
  #jtl-nav-wrapper #mainNavigation .nav-mobile-header .nav-offcanvas-title { font-weight: 600 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-MENÜ — MINIMAL / RUHIG (final)  [v: minimal1]
   Entfernt: Thumbnails, Farb-Banner, Marken-Tints, Schatten, Transforms.
   Übrig: solides Weiß, Hairlines, dünne Manrope 500, leise graue Chevrons.
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ---- Top-Level: ruhiger neutraler Tap, leiser Chevron (kein Marken-Rot) ---- */
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link:hover,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link:active,
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link {
    background: #f7f7f8 !important; color: var(--color-text, #1c1f24) !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link.dropdown-toggle::after {
    color: #cfd2d8 !important; font-size: 12px !important;
  }
  #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link.dropdown-toggle::after {
    color: #cfd2d8 !important; transform: rotate(90deg) !important;
  }

  /* ---- Subkategorie: KEINE Thumbnails -> reine, ruhige Textliste ---- */
  /* Kleine, saubere Kategorie-Thumbnails (40px), vertikal zentriert */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block picture {
    display: block !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; line-height: 0 !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block img,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block .submenu-headline-image {
    display: block !important; flex: 0 0 40px !important;
    width: 40px !important; height: 40px !important; min-width: 40px !important; max-width: 40px !important;
    aspect-ratio: 1 !important; object-fit: cover !important; border-radius: 8px !important;
    margin: 0 !important; background: #f4f4f5 !important; border: 1px solid #ededf0 !important;
    box-shadow: none !important; transform: none !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block {
    min-height: 60px !important; padding: 8px 20px !important; gap: 14px !important;
    align-items: center !important;
    background: #fff !important; box-shadow: none !important; transform: none !important;
  }
  /* Hairline am Label ausgerichtet (20 Pad + 40 Thumb + 14 Gap = 74px) */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block::before {
    left: 74px !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block:hover,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block:active {
    background: #f7f7f8 !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) > a.d-block::after {
    color: #cfd2d8 !important; font-size: 12px !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block .text-truncate,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block .submenu-headline-text,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:not(.d-lg-none) a.d-block strong {
    color: var(--color-text, #1c1f24) !important; font-size: 15px !important; font-weight: 500 !important;
  }

  /* ---- "Alle anzeigen": leiser Text-Link statt Farb-Banner ---- */
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block,
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m:first-child.d-lg-none > a.d-block {
    background: #fff !important; border-bottom: 1px solid #f0f0f1 !important;
    min-height: 46px !important; padding: 0 20px !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block .nav-mobile-heading {
    color: var(--color-text-soft, #8a8f97) !important; font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: .08em !important; text-transform: uppercase !important;
  }
  #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.d-lg-none > a.d-block::after {
    color: #cfd2d8 !important; font-size: 13px !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUKTKARTE / RASTER — MINIMAL & CLEAN (P1)  [v: plp1]
   Ruhiger: 1 Farb-Akzent (Preis), 2-Zeilen-Titel, neutrales Bild-BG,
   weicher neutraler Hover. Passend zur Header-/Menü-Designsprache.
   ════════════════════════════════════════════════════════════════════════ */

/* Rhythmus etwas ruhiger */
:is(#product-list, .opc-ProductStream).layout-gallery { row-gap: 28px !important; }
:is(#product-list, .opc-ProductStream) .product-wrapper { margin-bottom: 30px !important; }

/* Bild: neutrales Hellgrau, weiche Rundung, hauchdünner neutraler Rahmen (kein kühles Blau) */
:is(#product-list, .opc-ProductStream) .productbox-images {
  background: #f6f7f8 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .05) !important;
}
/* Hover: ruhiger neutraler Lift statt rotem Rahmen */
@media (hover: hover) and (pointer: fine) {
  :is(#product-list, .opc-ProductStream) .productbox.productbox-hover:hover .productbox-images {
    box-shadow: inset 0 0 0 1px rgba(17, 24, 39, .06), 0 12px 28px -14px rgba(17, 24, 39, .18) !important;
    transform: translateY(-2px) !important;
  }
}

/* Titel: 3 Zeilen (mehr Info), aber ruhiger (600) */
:is(#product-list, .opc-ProductStream) .productbox-title { min-height: 56px !important; margin-top: 10px !important; }
:is(#product-list, .opc-ProductStream) .productbox-title .text-clamp-2 {
  -webkit-line-clamp: 3 !important;
  font-weight: 600 !important; font-size: 14.5px !important; line-height: 1.3 !important;
  color: var(--color-text, #20242b) !important;
}

/* "+X Variationen": muted Neutralgrau statt Marken-Rot (Preis bleibt der Akzent) */
:is(#product-list, .opc-ProductStream) .productlist-variation-rating { color: var(--color-text-soft, #8a8f97) !important; }
:is(#product-list, .opc-ProductStream) .rt-productlist-variation span {
  color: var(--color-text-soft, #8a8f97) !important; font-weight: 500 !important;
}

/* Preis: DER eine Akzent — klar, eine Spur leichter */
:is(#product-list, .opc-ProductStream) .price.productbox-price,
:is(#product-list, .opc-ProductStream) .productbox-price.price {
  color: var(--brand-primary) !important; font-size: 19px !important; font-weight: 700 !important;
}

/* Ribbon dezenter */
:is(#product-list, .opc-ProductStream) .productbox-ribbon.ribbon {
  background: rgba(17, 24, 39, .88) !important; font-weight: 700 !important; letter-spacing: .04em !important;
}
/* "Auf Lager"-Badge (ribbon-8) ausblenden — doppelt zum grünen Lieferstatus.
   Aktions-/Status-Badges bleiben: Sonderangebot/Neu/Top/Bestseller, "Ausverkauft" (ribbon-7). */
:is(#product-list, .opc-ProductStream) .productbox-ribbon.ribbon-8 { display: none !important; }

/* Lieferstatus eine Spur ruhiger (bleibt grün = Trust) */
:is(#product-list, .opc-ProductStream) .rt-productlist-delivery { font-weight: 600 !important; }

@media (max-width: 991.98px) {
  :is(#product-list, .opc-ProductStream).layout-gallery { row-gap: 22px !important; }
  :is(#product-list, .opc-ProductStream) .product-wrapper { margin-bottom: 22px !important; }
  :is(#product-list, .opc-ProductStream) .productbox-title { min-height: 52px !important; margin-top: 8px !important; }
  :is(#product-list, .opc-ProductStream) .productbox-title .text-clamp-2 {
    -webkit-line-clamp: 3 !important; font-size: 13.5px !important; font-weight: 600 !important;
  }
  :is(#product-list, .opc-ProductStream) .price.productbox-price,
  :is(#product-list, .opc-ProductStream) .productbox-price.price { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUKTLISTE — TOOLBAR ENTSCHLACKT (Phase 2)  [v: plp2]
   Listen-/Galerie-Toggle weg (auch serverseitig via Template), "Artikel pro
   Seite" raus -> Toolbar = Filter + Sortierung + Trefferzahl.
   ════════════════════════════════════════════════════════════════════════ */

/* Listen-/Galerie-Umschalter ausblenden (Template leert ihn serverseitig;
   CSS greift zusaetzlich sofort & fuer evtl. gecachte Seiten) */
.productlist-page-nav #ed_list,
.productlist-page-nav #ed_gallery,
.productlist-page-nav .btn-option.ed { display: none !important; }
.productlist-page-nav .btn-group:has(> .btn-option.ed) { display: none !important; }

/* "Artikel pro Seite" entfernen (low-value; Pagination genügt) */
.productlist-page-nav .filter-type-FilterItemLimits { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   PRODUKTLISTE — SUBKATEGORIE-EINSTIEGE (Phase 3)  [v: plp3]
   Konsistente Bild-Frames, moderne minimal-Karte, Mobile als 2-spaltiges
   Kachel-Raster (statt nackter Textlinks). CSS-only, update-safe.
   ════════════════════════════════════════════════════════════════════════ */

.content-cats-small { margin: 4px 0 10px !important; }
.content-cats-small > [class*="col"] { margin-bottom: 24px !important; }
.content-cats-small .sub-categories { height: 100%; }
.content-cats-small .sub-categories > a { display: block !important; text-decoration: none !important; }

/* Bild: einheitliches 4:3, cover, neutraler heller BG, weiche Rundung.
   display:block !important blendet das Bild auch auf Mobile ein (ueberschreibt d-none) */
.content-cats-small .subcategories-image {
  display: block !important;
  width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important;
  overflow: hidden !important; border-radius: 14px !important; margin: 0 !important;
  background: #f6f7f8 !important; border: 1px solid #ececef !important;
}
.content-cats-small .subcategories-image picture { display: block !important; width: 100% !important; height: 100% !important; }
.content-cats-small .subcategories-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}

/* Label: zentriert, ruhiges Manrope 500 */
.content-cats-small .caption { margin-top: 10px !important; text-align: center !important; }
.content-cats-small .caption a {
  font-family: var(--font-display), sans-serif !important;
  font-size: 14.5px !important; font-weight: 500 !important; letter-spacing: -.1px !important;
  color: var(--color-text, #20242b) !important; text-decoration: none !important;
}

/* Hover (Desktop): sanfter Lift + minimaler Zoom + brand-roter Labeltext */
@media (hover: hover) and (pointer: fine) {
  .content-cats-small .sub-categories > a:hover .subcategories-image {
    border-color: #e2e2e6 !important; box-shadow: 0 14px 30px -16px rgba(17, 24, 39, .2) !important;
  }
  .content-cats-small .sub-categories > a:hover .subcategories-image img { transform: scale(1.05) !important; }
  .content-cats-small .sub-categories > a:hover .caption a { color: var(--brand-primary) !important; }
}

/* Mobile: 2-spaltiges Kachel-Raster (statt full-width Textlinks) */
@media (max-width: 767.98px) {
  .content-cats-small { margin-right: -7px !important; margin-left: -7px !important; }
  .content-cats-small > [class*="col"] {
    flex: 0 0 50% !important; max-width: 50% !important;
    padding-right: 7px !important; padding-left: 7px !important; margin-bottom: 16px !important;
  }
  .content-cats-small .subcategories-image { border-radius: 12px !important; }
  .content-cats-small .caption { margin-top: 8px !important; }
  .content-cats-small .caption a { font-size: 13px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PRODUKTLISTE — KATEGORIE-SIDEBAR MODERN (Phase 4)  [v: plp4]
   Linke Kategorie-Navigation: roter 6px-Balken raus, aktiver Eintrag als
   brand-getöntes Pill, ruhige Manrope-Zeilen, dezente Chevrons, saubere
   Subkategorien. CSS-only, scoped auf .box-categories (Desktop/Tablet).
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Container ruhig */
  .sidepanel-left .box-categories {
    border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 0 26px !important;
  }
  .box-categories hr { display: none !important; }

  /* Headline "Kategorien" */
  .box-categories .productlist-filter-headline {
    font-family: var(--font-display), sans-serif !important;
    font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important;
    letter-spacing: .08em !important; color: var(--color-text-soft, #8a8f97) !important;
    padding: 0 12px 10px !important; margin: 0 !important; border: 0 !important;
  }

  /* Listen-Reset */
  .box-categories .nav-panel ul.nav.flex-column { margin: 0 !important; padding: 0 !important; list-style: none !important; }
  .box-categories .nav-item { border: 0 !important; margin: 0 !important; background: transparent !important; }

  /* Top-Level-Zeile (span.dropdown-toggle ODER a.nav-link) */
  .box-categories .nav-panel > ul.nav.flex-column > li.nav-item > .nav-link {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 8px !important; padding: 9px 12px !important; margin: 1px 0 !important;
    border: 0 !important; border-bottom: 0 !important; border-radius: 10px !important;
    font-family: var(--font-display), sans-serif !important; font-size: 14.5px !important; font-weight: 500 !important;
    color: var(--color-text, #1c1f24) !important; text-decoration: none !important; cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  /* <a> NUR Textbreite (nicht die Zeile füllen) -> große Toggle-Fläche rechts daneben.
     Sonst landet jeder Klick auf dem Link (Navigation) und der Collapse lässt sich kaum zuklappen. */
  .box-categories .nav-link.dropdown-toggle > a {
    flex: 0 1 auto !important; min-width: 0 !important; color: inherit !important; text-decoration: none !important; font: inherit !important;
  }
  .box-categories .nav-panel > ul.nav.flex-column > li.nav-item > .nav-link:hover { background: #f7f7f8 !important; color: var(--brand-primary) !important; }
  .box-categories .nav-link.dropdown-toggle:hover > a { color: var(--brand-primary) !important; }

  /* Aktiver Top-Level: brand-getöntes Pill statt 6px-Balken */
  .box-categories .nav-item.active > .nav-link {
    background: var(--brand-tint-soft, #fbf1f1) !important; color: var(--brand-primary) !important;
    font-weight: 600 !important; border-bottom: 0 !important;
  }
  .box-categories .nav-item.active > .nav-link > a { color: var(--brand-primary) !important; }

  /* Chevron rechts: größere, klar treffbare Toggle-Klickzone (padding vergrößert die Hit-Box) */
  .box-categories .nav-link.dropdown-toggle::after {
    content: '\f078' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    font-size: 11px !important; color: var(--color-text-soft, #9aa0aa) !important; border: 0 !important; margin: 0 0 0 8px !important;
    padding: 6px 4px 6px 18px !important; flex: 0 0 auto !important;
    transition: transform .2s ease, color .2s ease !important;
  }
  /* der gesamte Bereich rechts vom Text togglet (span = data-toggle=collapse); Cursor signalisiert es */
  .box-categories .nav-link.dropdown-toggle { cursor: pointer !important; }
  /* WICHTIG: globale Regel (Z.963) blendet Icon beim Öffnen aus -> hier sichtbar halten + drehen */
  .box-categories .nav-link.dropdown-toggle[aria-expanded="true"]::after {
    display: block !important; transform: rotate(180deg) !important; color: var(--brand-primary) !important;
  }

  /* Subkategorien: eingerückt, leicht, sauber (keine Trennlinien) */
  .box-categories .snippets-categories-collapse { background: transparent !important; }
  .box-categories .collapse .nav.flex-column { padding: 2px 0 8px !important; }
  .box-categories .snippets-categories-nav-link-child {
    display: block !important; padding: 7px 12px 7px 22px !important; margin: 0 !important;
    border: 0 !important; border-radius: 8px !important;
    font-family: var(--font-body), sans-serif !important; font-size: 13.5px !important; font-weight: 400 !important;
    color: var(--color-text-soft, #6b7280) !important; text-decoration: none !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  .box-categories .snippets-categories-nav-link-child:hover { background: #f7f7f8 !important; color: var(--brand-primary) !important; }
  .box-categories .nav-item.active > .snippets-categories-nav-link-child,
  .box-categories .snippets-categories-nav-link-child.active { color: var(--brand-primary) !important; font-weight: 500 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PLP FIX — Toggle-Icons beim Öffnen sichtbar halten  [v: plp4c]
   Globale Regel (Z.963) blendet ::after-Icons bei aria-expanded=true aus.
   Das ließ den Sort-Caret verschwinden -> Button schrumpfte/zuckte.
   ════════════════════════════════════════════════════════════════════════ */
.productlist-page-nav .filter-type-FilterItemSort .dropdown-toggle[aria-expanded="true"]::after,
.productlist-page-nav .filter-type-FilterItemSort.show .dropdown-toggle::after {
  display: inline-block !important;            /* Caret bleibt -> Button-Breite stabil, kein Zucken */
  transform: rotate(180deg) !important;         /* dreht beim Öffnen */
}

/* ════════════════════════════════════════════════════════════════════════
   LIEFERZEIT — "In X bei dir zuhause" (server + JS identisch, stabil)  [v: deliv3]
   ════════════════════════════════════════════════════════════════════════ */
.dh-pdp-inline-logistics__item--delivery { color: #2f7d61 !important; }
.dh-pdp-inline-logistics__delivery-text { color: #1f6b4f !important; font-weight: 600 !important; }

/* ════════════════════════════════════════════════════════════════════════
   PREIS-WRAPPER 2-ZEILEN + SOCIAL-PROOF STATISCH  [v: price1]
   Baymard: absoluten (€) + relativen (%) Rabatt zusammen zeigen, Strichpreis,
   größerer/fetterer Verkaufspreis, alles nah am Preis.
   Zeile 1: UVP (rot, größer) + Spar-Pill "Du sparst X % (Y €)"
   Zeile 2: Preis (dominant) + inkl. MwSt. + Kostenloser Versand
   ════════════════════════════════════════════════════════════════════════ */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-line--2row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;   /* linksbündig */
    flex-wrap: nowrap !important;
    gap: 10px !important;
    text-align: left !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row {
    display: flex !important;
    align-items: center !important;       /* kleine Texte vertikal auf Preis-Mitte */
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* DOM-Reihenfolge gewinnt — alte order:1–5 in jeder Zeile neutralisieren */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row > * {
    order: 0 !important;
}

/* — Zeile 1: UVP rot + etwas größer — */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--top .dh-pdp-old-price {
    color: var(--dh-pdp-red) !important;
    font-size: clamp(19px, 1.35vw, 25px) !important;
    font-weight: 760 !important;
    line-height: 1 !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--top .dh-pdp-old-price s {
    color: inherit !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 0 !important;
}
/* Spar-Pill (% + €) — bleibt rote Pille, vertikal an größerer UVP ausgerichtet */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--top .dh-pdp-save-pill {
    min-height: 26px !important;
    background: rgba(var(--brand-primary-rgb), 0.10) !important;
    color: var(--brand-primary) !important;
    box-shadow: none !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

/* — Zeile 2: Preis dominant + MwSt. + Versand — */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--bottom .dh-pdp-current-price {
    color: var(--dh-pdp-ink) !important;
    font-size: clamp(26px, 2.1vw, 34px) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--bottom .dh-pdp-taxline {
    color: var(--color-text-soft, #6b7280) !important;
    font-size: clamp(13px, .95vw, 15px) !important;
    font-weight: 600 !important;
}

/* — Social-Proof: statisch (nicht klickbar, kein Hover, kein Pfeil) — */
body #product-offer .dh-social-proof--static {
    cursor: default !important;
    pointer-events: none !important;
    transition: none !important;
}
body #product-offer .dh-social-proof--static:hover {
    border-color: #e8edf2 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* ── SKU klein & dezent über dem Titel (minimaler Platz) ────────────────── */
body #product-offer .dh-pdp-buybox__head .dh-pdp-buybox__sku {
    margin: 0 0 2px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .02em !important;
    color: #6b7382 !important; /* AA 4.77 statt 2.58 */
}
/* Mobil: Head ist display:contents + CSS-order -> SKU mit order:1 (wie Rating)
   landet via DOM-Reihenfolge direkt über dem Titel (rating, SKU, Titel). */
@media (max-width: 767.98px) {
    body #product-offer .dh-pdp-buybox__sku {
        order: 1 !important;
        margin: 6px 0 2px !important;
    }
}

/* ── Verfügbarkeit + Lieferzeit unter dem Preis (2 Zeilen) ── */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics {
    margin: 12px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--color-surface-soft, #eef1f5) !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Zeile 1: Auf Lager / Abholung (lokaler Trust) */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics__item--stock {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--color-text-muted, #344054) !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics__item--stock > span:last-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-stockdot {
    flex: 0 0 auto !important;
    width: 8px !important;
    height: 8px !important;
    margin-top: 4px !important;
    border-radius: 50% !important;
    background: #2f9b46 !important;
    box-shadow: 0 0 0 3px rgba(47, 155, 70, .15) !important;
}
/* "Lieferbar" (lange Lieferzeit) -> ruhiger blauer Punkt: positiv/„auf dem Weg",
   nicht alarmierend (kein Orange), kein falsches Grün/„auf Lager". */
body #product-offer .dh-pdp-inline-logistics__item--stock.is-backorder .dh-pdp-stockdot {
    background: #2f6fd8 !important;
    box-shadow: 0 0 0 3px rgba(47, 111, 216, .15) !important;
}
/* Zeile 2: Lieferzeit dunkel (kein Grün), Zeitfenster fett, bricht sauber um */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics__item--delivery {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    color: var(--color-text-muted, #344054) !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics__item--delivery i {
    flex: 0 0 auto !important;
    margin-top: 3px !important;
    color: var(--color-text-soft, #98a2b3) !important;
    font-size: 15px !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics__delivery-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    color: var(--color-text-muted, #344054) !important;
    font-weight: 500 !important;
}
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-delivery-time {
    font-weight: 760 !important;
    color: #0f1729 !important;
}

/* ── Social-Proof schlanker (nimmt weniger Platz) ── */
body #product-offer .dh-social-proof--static {
    margin: 10px 0 0 !important;
    padding: 7px 12px !important;
    gap: 10px !important;
    border-radius: 10px !important;
}
body #product-offer .dh-social-proof--static .dh-social-proof__avatar {
    width: 30px !important;
    height: 30px !important;
}
body #product-offer .dh-social-proof--static .dh-social-proof__avatar:not(:first-child) {
    margin-left: -11px !important;
}
body #product-offer .dh-social-proof--static .dh-social-proof__text {
    font-size: 12.6px !important;
    line-height: 1.3 !important;
}

/* ── Trust-USPs: 3 Punkte mit eigenen Icons in dezenten Badges (modern, ruhig) ── */
body #product-offer .rothler-trust-row {
    list-style: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px 26px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
body #product-offer .rothler-trust-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    white-space: nowrap !important;
}
body #product-offer .rothler-trust-badge {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #f4f6f8 !important;
    color: var(--brand-primary) !important;
}
body #product-offer .rothler-trust-badge svg {
    width: 17px !important;
    height: 17px !important;
}
body #product-offer .rothler-trust-label {
    font-size: 13px !important;
    font-weight: 650 !important;
    color: var(--color-text, #1f2937) !important;
    letter-spacing: -0.1px !important;
}
@media (max-width: 575.98px) {
    body #product-offer .rothler-trust-row { gap: 11px 18px !important; }
    body #product-offer .rothler-trust-badge { width: 27px !important; height: 27px !important; }
    body #product-offer .rothler-trust-badge svg { width: 15px !important; height: 15px !important; }
    body #product-offer .rothler-trust-label { font-size: 12.5px !important; }
}

/* === Item 2: Payment-Icons + Trust = EIN straffer Block (statt zwei) === */
/* Strip enger an den ATC + kleinerer Spalt zwischen Icon-Reihe und Trust-Zeile */
body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons {
    margin: 12px 0 4px !important;
    padding: 12px 0 0 !important;
    row-gap: 9px !important;
}
/* Payment-Icons OHNE Karten-Umrandung -> nur die Logos, flach & ruhig */
body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
}
body #product-offer .dh-pdp-buybox__section--purchase .rt-pdp-payment-strip.rt-pdp-payment-static-icons .rothler-trust-section {
    margin-top: 0 !important;
}
/* Trust-Icons: brand-rot, OHNE graue Kreis-Badge -> minimal & kompakt */
body #product-offer .rothler-trust-badge {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    color: var(--brand-primary) !important;
}
body #product-offer .rothler-trust-badge svg { width: 16px !important; height: 16px !important; stroke: var(--brand-primary) !important; color: var(--brand-primary) !important; }
body #product-offer .rothler-trust-label { font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: -0.1px !important; }
body #product-offer .rothler-trust-item { gap: 6px !important; }
body #product-offer .rothler-trust-row { gap: 6px 18px !important; }

@media (max-width: 575.98px) {
    /* Payment-Logos mobil kompakter (kleiner + enger) */
    body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons { column-gap: 5px !important; }
    body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon { height: 30px !important; padding: 1px 3px !important; }
    /* Trust: 3 Spalten (Icon über Label); 1-Wort-Labels -> eine Zeile, keine Waise */
    body #product-offer .rothler-trust-row {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px 4px !important;
        justify-items: center !important;
    }
    body #product-offer .rothler-trust-item {
        flex-direction: column !important;
        gap: 4px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
    body #product-offer .rothler-trust-badge svg { width: 17px !important; height: 17px !important; }
    body #product-offer .rothler-trust-label { font-size: 11px !important; line-height: 1.1 !important; }
}

/* ── "ab" vor dem Preis (Vaterartikel mit Preisspanne) ── */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-current-price .dh-pdp-price-from {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text-soft, #6b7280) !important;
    letter-spacing: 0 !important;
    margin-right: 1px !important;
}

/* ════════════════════════════════════════════════════════════════════════
   QTY-STEPPER — sauberer Rebuild (autoritativ am Dateiende, gewinnt über alle
   früheren widersprüchlichen Regeln).
   Prinzip gegen Clipping UND unsaubere Ecken:
     overflow:hidden (runde Ecken intakt) + Box-Breite == Summe der Spalten
     (48 + 1fr-Mitte + 48), sodass NICHTS überläuft -> kein Abschneiden.
   Buttons füllen ihre Zelle, Icon zentriert -> Platz ums "+" und "−".  [v: pdp9]
   ════════════════════════════════════════════════════════════════════════ */
body #product-offer #add-to-cart .basket-form-inline,
body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
    grid-template-columns: 144px minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: stretch !important;
}
body #product-offer #quantity-grp.choose_quantity,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp.choose_quantity {
    display: grid !important;
    /* Mitte minmax(0,1fr) absorbiert die Restbreite (Box minus 1px Rand je Seite)
       -> Spalten überlaufen NIE die Box -> kein Clipping, runde Ecken sauber. */
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
    width: 144px !important;
    min-width: 144px !important;
    max-width: 144px !important;
    overflow: hidden !important;                 /* saubere runde Ecken */
    border: 1px solid var(--color-line, #dfe4ec) !important;
    border-radius: 10px !important;
    background: #fff !important;
}
/* Buttons: füllen die Zelle, Icon mittig -> rundum Platz; sauberes Weiß */
body #product-offer #quantity-grp .btn,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    color: var(--color-text, #1f2937) !important;
    border: 0 !important;
}
body #product-offer #quantity-grp .btn:hover,
body #product-offer #quantity-grp .btn:focus,
body #product-offer #quantity-grp .btn:active,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:hover,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:focus,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:active {
    background: #f5f6f8 !important;               /* dezent grau statt rosa Rest */
    color: var(--dh-pdp-red, var(--brand-primary)) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* WIG §48: Tastatur-Fokus am Mengen-Stepper sichtbar (war = Hover, nicht
   unterscheidbar). Nach dem outline:none-Block -> Source-Order gewinnt. */
body #product-offer #quantity-grp .btn:focus-visible,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn:focus-visible {
    outline: 2px solid var(--dh-pdp-red, var(--brand-primary)) !important;
    outline-offset: 1px !important;
}
body #product-offer #quantity-grp input.quantity,
body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity {
    width: 100% !important;
    min-width: 0 !important;
    background: #fff !important;
    border: 0 !important;
    text-align: center !important;
}

/* Mobil: Qty + ATC gestapelt, beide VOLLE BREITE; Qty etwas schmaler (niedriger).
   display:block killt jedes konkurrierende Grid -> Spalten stapeln voll breit. */
@media (max-width: 767.98px) {
    body #product-offer #add-to-cart .basket-form-inline,
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline {
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
    }
    body #product-offer #add-to-cart .basket-form-inline > [class*="col"],
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline > [class*="col"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 16px !important;
        padding: 0 !important;
    }
    /* überschreibt die spezifische 31%-Regel (Z.7637) -> Spalten voll breit */
    body[data-page="1"] #product-offer #add-to-cart > .row > [class*="col"]:first-child,
    body[data-page="1"] #product-offer #add-to-cart > .row > [class*="col"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body #product-offer #add-to-cart .basket-form-inline > [class*="col"]:last-child,
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .basket-form-inline > [class*="col"]:last-child {
        margin-bottom: 0 !important;
    }
    body #product-offer #quantity-grp.choose_quantity,
    body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp.choose_quantity {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 50px !important;
        min-height: 50px !important;
        grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    }
    body #product-offer #quantity-grp .btn,
    body #product-offer #quantity-grp input.quantity,
    body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp .btn,
    body #product-offer .dh-pdp-buybox__section--purchase #quantity-grp input.quantity {
        height: 50px !important;
        min-height: 50px !important;
    }
    body #product-offer #add-to-cart .btn-primary,
    body #product-offer .dh-pdp-buybox__section--purchase #add-to-cart .btn-primary {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   KURZBESCHREIBUNG als Cards (.dh-kb) — Wawi liefert: ul > li > strong + span
   Minimales Icon kommt aus CSS (kein <img> noetig). MOBILE-FIRST + kompakt.
   Basis = Mobile (1 Spalte, eng); ab 768px -> 2 Spalten.  [v: pdp17]
   ════════════════════════════════════════════════════════════════════════ */
body #product-offer .dh-kb {
    margin: 6px 0 8px !important;
    /* NOVA base.scss: `main section{padding:2rem 0}` / @992px `4rem 0` greift auf
       diese <section> -> 32-64px Leerraum oben/unten. Hier kompakt ueberschreiben. */
    padding: 0 !important;
}
body #product-offer .dh-kb ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 5px !important;
}
body #product-offer .dh-kb li {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 8px !important;
    align-items: start !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    border: 1px solid var(--color-surface-soft, #eef1f5) !important;
    border-radius: 8px !important;
    background: #fff !important;
    list-style: none !important;
}
body #product-offer .dh-kb li::before {
    content: "" !important;
    grid-row: 1 / 3 !important;
    width: 13px !important;
    height: 13px !important;
    margin-top: 2px !important;
    background-color: var(--brand-primary) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
}
body #product-offer .dh-kb li strong {
    grid-column: 2 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--color-text, #1f2937) !important;
}
body #product-offer .dh-kb li span {
    grid-column: 2 !important;
    margin-top: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
    color: var(--color-text-soft, #667085) !important;
}
/* ab Tablet/Desktop: 2 Spalten, etwas mehr Luft */
@media (min-width: 768px) {
    body #product-offer .dh-kb {
        margin: 8px 0 10px !important;
        padding: 0 !important;
    }
    body #product-offer .dh-kb ul {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }
    body #product-offer .dh-kb li {
        padding: 7px 11px !important;
    }
    body #product-offer .dh-kb li strong { font-size: 13.5px !important; }
    body #product-offer .dh-kb li span { font-size: 12px !important; }
    /* Ungerade Anzahl Karten: letzte Karte über beide Spalten -> keine Waise (gilt für 3 oder 5) */
    body #product-offer .dh-kb li:last-child:nth-child(odd) { grid-column: 1 / -1 !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   PDP-INFOBEREICH unter der Buybox — saubere Sektionen (.dh-pdp-info).
   Sticky-Sprungnav + Sektionen (Heizleistung, Technische Daten, FAQ).  [v: pdp18]
   Mobile-first.
   ════════════════════════════════════════════════════════════════════════ */
body #product-offer .dh-pdp-info,
body .dh-pdp-info {
    /* an dieselbe zentrierte Container-Achse wie die Buybox (#product-offer) binden:
       border-box max-width 1480 + padding 24 => linke Kante deckt sich bei jeder Breite
       (gemessen: 1280px l=24, 1680px l=124). Vorher full-bleed -> "Text ohne Struktur". */
    /* zentrierte, lesbare Inhaltsbreite (nicht so breit wie die Buybox -> kein
       "halbierter" Fließtext mit leerer rechter Hälfte). */
    max-width: 1120px !important;
    margin: 8px auto 30px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}
@media (min-width: 992px) {
    body #product-offer .dh-pdp-info,
    body .dh-pdp-info { padding: 0 24px !important; }
}
/* STICKY-FIX: NOVA setzt overflow-x:hidden auf body/#content-wrapper (Off-Canvas) -> Scroll-Container,
   bricht position:sticky. #content-wrapper -> clip (Subnav klebt). body NICHT clippen: iOS-Safari
   bricht sonst die Sticky des Headers (direktes Kind von body) -> Header verschwindet beim Scrollen
   auf der PDP. body nur sperren, wenn der Off-Canvas-Drawer offen ist (kein Horizontal-Overflow). */
body[data-page="1"] #content-wrapper { overflow-x: clip !important; }
body[data-page="1"]:not(.dh-drawer-open) { overflow-x: visible !important; }
/* Sticky-Sprungnav — Wrapper dockt unter dem fixen Header an (Header ~64px mobil / ~110px desktop).
   Wrapper scrollt NICHT (für fixen Pfeil-Hinweis); der innere __scroll scrollt horizontal. */
body .dh-pdp-info .dh-pdp-subnav {
    position: sticky !important;
    /* top = ECHTE Header-Hoehe, live per JS gemessen (--dh-sticky-top, pdp-subnav-spy.js).
       Fallback 98px (mobil) / 147px (desktop, s.u.), falls JS nicht laeuft. So klebt die
       Subnav immer buendig unter dem Header — unabhaengig von Topbar-Umbruch/Promo/iOS. */
    top: var(--dh-sticky-top, 98px) !important;
    z-index: 6 !important;
    margin: 0 0 22px !important;
    padding: 9px 0 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
}
body .dh-pdp-info .dh-pdp-subnav__scroll {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 2px !important;
}
body .dh-pdp-info .dh-pdp-subnav__scroll::-webkit-scrollbar { display: none !important; }
body .dh-pdp-info .dh-pdp-subnav a { scroll-snap-align: start !important; }
/* Mobil: deutlicher Scroll-Hinweis (Fade + animierter Chevron) am rechten Rand —
   signalisiert klar "horizontal wischbar". Fade breiter + dezenter Wisch-Nudge. */
@media (max-width: 768px) {
    body .dh-pdp-info .dh-pdp-subnav { position: sticky !important; }
    body .dh-pdp-info .dh-pdp-subnav::after {
        content: "\203A" !important;
        position: absolute !important;
        right: 0 !important;
        top: 9px !important;
        bottom: 10px !important;
        width: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 8px !important;
        background: linear-gradient(to right, rgba(255,255,255,0), #fff 62%) !important;
        color: var(--brand-primary) !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        pointer-events: none !important;
        animation: dhSubnavNudge 1.9s ease-in-out infinite !important;
    }
}
@keyframes dhSubnavNudge {
    0%, 60%, 100% { transform: translateX(0); }
    78% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    body .dh-pdp-info .dh-pdp-subnav::after { animation: none !important; }
}
body .dh-pdp-info .dh-pdp-subnav a {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 7px 15px !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-text-muted, #475467) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .15s ease, color .15s ease !important;
}
body .dh-pdp-info .dh-pdp-subnav a:hover {
    background: #f5f6f8 !important;
    color: var(--brand-primary) !important;
}
/* Aktiver Abschnitt (per Scrollspy-JS gesetzt) — klare Orientierung */
body .dh-pdp-info .dh-pdp-subnav a.is-active {
    background: rgba(var(--brand-primary-rgb), 0.08) !important;
    color: var(--brand-primary) !important;
}
body .dh-pdp-info .dh-pdp-subnav a:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 1px !important;
}
/* Sektion — Trennung über feine Haarlinien + gleichmäßiger Rhythmus (keine Karten) */
body .dh-pdp-info .dh-pdp-section {
    margin: 0 !important;
    padding: 34px 0 !important;
    border-top: 1px solid #ececec !important;
    /* = Header + Subnav (live: --dh-sticky-stack) -> Sprungziel landet unter der Subnav */
    scroll-margin-top: var(--dh-sticky-stack, 156px) !important;
}
/* erste Sektion direkt nach der Sprungnav: keine Doppellinie */
body .dh-pdp-info .dh-pdp-subnav + .dh-pdp-section {
    border-top: 0 !important;
    padding-top: 6px !important;
}
@media (min-width: 992px) {
    body .dh-pdp-info .dh-pdp-section { padding: 44px 0 !important; scroll-margin-top: var(--dh-sticky-stack, 206px) !important; }
    /* Desktop-Fallback (Header ~148px); live ersetzt durch --dh-sticky-top */
    body .dh-pdp-info .dh-pdp-subnav { top: var(--dh-sticky-top, 147px) !important; }
}
body .dh-pdp-info .dh-pdp-section__title {
    margin: 0 0 14px !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
    font-weight: 700 !important;
    color: var(--color-text, #101828) !important;
    line-height: 1.2 !important;
}
/* Technische Daten — Spec-Liste */
body .dh-pdp-info .dh-pdp-specs {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
}
/* Zeile: Label links (gedämpft) · Wert rechtsbündig (kräftig) — wie ein Datenblatt */
body .dh-pdp-info .dh-pdp-specs > div {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 9px 0 !important;
    border-top: 1px solid #f1f3f6 !important;
}
body .dh-pdp-info .dh-pdp-specs dt {
    margin: 0 !important;
    flex: 0 0 auto !important;
    color: var(--color-text-soft, #667085) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
}
body .dh-pdp-info .dh-pdp-specs dd {
    margin: 0 !important;
    text-align: right !important;
    color: var(--color-text, #1f2937) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}
/* Watt-Rechner (Heizleistung -> Raumgröße) */
body .dh-pdp-info .dh-pdp-watt {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 15px 17px !important;
    border: 1px solid var(--color-surface-soft, #eef1f5) !important;
    border-radius: 14px !important;
    background: #fff !important;
}
body .dh-pdp-info .dh-pdp-watt__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #fdf1f0 !important;
    color: var(--brand-primary) !important;
}
body .dh-pdp-info .dh-pdp-watt__icon svg { width: 23px !important; height: 23px !important; }
body .dh-pdp-info .dh-pdp-watt__body { min-width: 0 !important; }
body .dh-pdp-info .dh-pdp-watt__big {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: var(--color-text, #101828) !important;
    line-height: 1.2 !important;
}
body .dh-pdp-info .dh-pdp-watt__sub {
    margin-top: 3px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    color: var(--color-text-soft, #667085) !important;
}
body .dh-pdp-info .dh-pdp-watt--hint .dh-pdp-watt__icon { background: #f4f6f8 !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-pdp-watt--hint .dh-pdp-watt__big { font-size: 16px !important; color: var(--color-text-muted, #344054) !important; }
body .dh-pdp-info .dh-pdp-watt__note {
    margin: 10px 2px 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--color-text-soft, #667085) !important;
}
/* FAQ-Accordion */
body .dh-pdp-info .dh-pdp-faq__item {
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
}
body .dh-pdp-info .dh-pdp-faq__item summary {
    list-style: none !important;
    cursor: pointer !important;
    padding: 14px 30px 14px 2px !important;
    position: relative !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--color-text, #1f2937) !important;
}
body .dh-pdp-info .dh-pdp-faq__item summary::-webkit-details-marker { display: none !important; }
body .dh-pdp-info .dh-pdp-faq__item summary::after {
    content: "+" !important;
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: var(--brand-primary) !important;
}
body .dh-pdp-info .dh-pdp-faq__item[open] summary::after { content: "–" !important; }
body .dh-pdp-info .dh-pdp-faq__answer {
    padding: 0 2px 16px !important;
}
body .dh-pdp-info .dh-pdp-faq__answer p {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--color-text-muted, #475467) !important;
}
/* erste Zeile ohne obere Linie (keine Doppellinie unter dem Gruppentitel) */
body .dh-pdp-info .dh-pdp-specs > div:first-child { border-top: 0 !important; }
/* Desktop: Spec-Liste 2-spaltig */
@media (min-width: 768px) {
    body .dh-pdp-info .dh-pdp-specs {
        grid-template-columns: 1fr 1fr !important;
        column-gap: 48px !important;
    }
    /* obere Zeile = Items 1 (links) + 2 (rechts) -> beide ohne obere Linie */
    body .dh-pdp-info .dh-pdp-specs > div:nth-child(2) { border-top: 0 !important; }
}

/* ── Produktbeschreibung (Wawi-cBeschreibung, entmüllt + typografisch sauber) [pdp22] ──
   Fließtext auf ~68ch Lesebreite gekappt; nur Whitelist-Tags h2/h3/p/strong/em/ul/li/a. */
body .dh-pdp-info .dh-pdp-desc { max-width: 68ch !important; }
body .dh-pdp-info .dh-pdp-desc > *:first-child { margin-top: 0 !important; }
body .dh-pdp-info .dh-pdp-desc h2,
body .dh-pdp-info .dh-pdp-desc h3 {
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text, #1f2937) !important;
    line-height: 1.35 !important;
    margin: 26px 0 7px !important;
}
body .dh-pdp-info .dh-pdp-desc h3 { font-size: 14.5px !important; }
/* h2/h3 wrappen teils zusätzlich <strong> -> kein Doppel-Fett */
body .dh-pdp-info .dh-pdp-desc h2 strong,
body .dh-pdp-info .dh-pdp-desc h3 strong { font-weight: inherit !important; }
body .dh-pdp-info .dh-pdp-desc p {
    margin: 0 0 12px !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: var(--color-text-muted, #475467) !important;
}
body .dh-pdp-info .dh-pdp-desc strong { color: var(--color-text, #1f2937) !important; font-weight: 700 !important; }
body .dh-pdp-info .dh-pdp-desc a {
    color: var(--brand-primary) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    font-weight: 600 !important;
}
body .dh-pdp-info .dh-pdp-desc ul,
body .dh-pdp-info .dh-pdp-desc ol {
    margin: 0 0 14px !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 8px !important;
}
body .dh-pdp-info .dh-pdp-desc li {
    position: relative !important;
    padding-left: 24px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    color: var(--color-text-muted, #475467) !important;
}
body .dh-pdp-info .dh-pdp-desc li::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 8px !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--brand-primary) !important;
}

/* ── Beschreibung 2-spaltig: Fließtext links + sticky Faktenkarte rechts [pdp23] ──
   Behebt den "halbierten" Eindruck: füllt die rechte Hälfte mit echtem Nutzen. */
body .dh-pdp-info .dh-pdp-beschreibung-grid { display: flex !important; flex-direction: column !important; }
body .dh-pdp-info .dh-pdp-beschreibung-grid .dh-pdp-desc { max-width: none !important; }
/* Mobil: Faktenkarte als TL;DR nach oben */
@media (max-width: 899px) {
    body .dh-pdp-info .dh-pdp-beschreibung-grid .dh-pdp-glance { order: -1 !important; margin: 22px 0 32px !important; }
}
@media (min-width: 900px) {
    body .dh-pdp-info .dh-pdp-beschreibung-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 320px !important;
        column-gap: 48px !important;
        align-items: start !important;
    }
    body .dh-pdp-info .dh-pdp-beschreibung-grid .dh-pdp-glance {
        position: sticky !important;
        top: 210px !important;
    }
}
/* Betriebsart-Schema (§2.2): 3 Modi, unterstützte hervorgehoben, andere gedimmt.
   Heller PDP-Grund -> aktiv = Brand-Rot-Akzent, inaktiv = .55 Opacity. */
body .dh-pdp-info .dh-pdp-modes {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    margin: 18px 0 0 !important;
}
/* P2: nur unterstützte Modi -> count-basierte Spalten (1/2 sauber, kein leeres 3er-Grid).
   Mobile (<576px) bleibt 1-spaltig via Basis-Regel. */
@media (min-width: 576px) {
    body .dh-pdp-info .dh-pdp-modes.dh-pdp-modes--1 { grid-template-columns: minmax(0, 380px) !important; }
    body .dh-pdp-info .dh-pdp-modes.dh-pdp-modes--2 { grid-template-columns: repeat(2, 1fr) !important; }
}
body .dh-pdp-info .dh-pdp-modes__item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;
    padding: 13px 14px !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 12px !important;
    background: #fff !important;
    opacity: 0.55 !important;
}
body .dh-pdp-info .dh-pdp-modes__item.is-on {
    opacity: 1 !important;
    border-color: rgba(var(--brand-primary-rgb), 0.45) !important;
    background: rgba(var(--brand-primary-rgb), 0.04) !important;
}
body .dh-pdp-info .dh-pdp-modes__ic { flex: 0 0 auto !important; color: var(--color-text-soft, #98a2b3) !important; margin-top: 1px !important; }
body .dh-pdp-info .dh-pdp-modes__item.is-on .dh-pdp-modes__ic { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-modes__tx { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
body .dh-pdp-info .dh-pdp-modes__tx strong {
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 13.5px !important; font-weight: 700 !important; color: var(--color-text, #101828) !important; line-height: 1.2 !important;
}
body .dh-pdp-info .dh-pdp-modes__tx span { font-size: 12px !important; color: var(--color-text-soft, #667085) !important; line-height: 1.4 !important; margin-top: 3px !important; }
@media (max-width: 720px) {
    body .dh-pdp-info .dh-pdp-modes { grid-template-columns: 1fr !important; gap: 8px !important; }
    body .dh-pdp-info .dh-pdp-modes__item { padding: 11px 13px !important; }
}

/* Heizstab-Hinweis (§2.1): hervorgehobene Info-Box "Heizstab & Aufbau". */
body .dh-pdp-info .dh-pdp-note {
    margin: 18px 0 0 !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.22) !important;
    border-left: 3px solid var(--brand-primary) !important;
    border-radius: 12px !important;
    background: rgba(var(--brand-primary-rgb), 0.03) !important;
}
body .dh-pdp-info .dh-pdp-note__h {
    display: flex !important; align-items: center !important; gap: 9px !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 15px !important; font-weight: 700 !important; color: var(--color-text, #101828) !important; margin: 0 0 8px !important;
}
body .dh-pdp-info .dh-pdp-note__ic { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-note__lead { margin: 0 0 10px !important; font-size: 14px !important; color: var(--color-text-muted, #344054) !important; line-height: 1.55 !important; }
body .dh-pdp-info .dh-pdp-note__lead strong { color: var(--color-text, #101828) !important; }
body .dh-pdp-info .dh-pdp-note__steps { margin: 0 0 8px !important; padding-left: 20px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
body .dh-pdp-info .dh-pdp-note__steps li { font-size: 13.5px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.5 !important; }
body .dh-pdp-info .dh-pdp-note__hint { margin: 0 !important; font-size: 12.5px !important; color: var(--color-text-soft, #667085) !important; font-style: italic !important; }

/* Heizstab-Vergleich (§2.6): Essential vs. Smart — ruhige, scanbare Vergleichstabelle. */
body .dh-pdp-info .dh-pdp-cmp__intro {
    margin: 0 0 14px !important;
    font-size: 14px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.6 !important;
}
body .dh-pdp-info .dh-pdp-cmp {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 12px !important;
}
body .dh-pdp-info .dh-pdp-cmp__table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13.5px !important;
    min-width: 460px !important;
}
body .dh-pdp-info .dh-pdp-cmp__table th,
body .dh-pdp-info .dh-pdp-cmp__table td {
    text-align: left !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid var(--color-line, #eef0f3) !important;
    vertical-align: top !important;
    line-height: 1.45 !important;
}
body .dh-pdp-info .dh-pdp-cmp__table thead th {
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 13px !important; font-weight: 700 !important; color: var(--color-text, #101828) !important;
    background: var(--color-surface-soft, #f7f8fa) !important;
    border-bottom: 1px solid var(--color-line, #e7eaee) !important;
    white-space: nowrap !important;
}
body .dh-pdp-info .dh-pdp-cmp__table thead th:nth-child(3) { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-cmp__table tbody td:first-child { color: var(--color-text-muted, #344054) !important; font-weight: 600 !important; }
body .dh-pdp-info .dh-pdp-cmp__table tbody td { color: var(--color-text-muted, #475467) !important; }
body .dh-pdp-info .dh-pdp-cmp__table td.is-yes { color: #1f8a5b !important; font-weight: 600 !important; }
body .dh-pdp-info .dh-pdp-cmp__table td.is-no { color: var(--color-text-soft, #98a2b3) !important; }
body .dh-pdp-info .dh-pdp-cmp__table tbody tr:last-child td { border-bottom: 0 !important; }
/* Vergleichstabelle MOBIL: kein Horizontal-Scroll mehr -> kompakt einpassen.
   Side-by-side (Essential vs Smart) bleibt erhalten; min-width raus, feste Spalten,
   kleinere Schrift/Padding, Text bricht um. */
@media (max-width: 575.98px) {
    body .dh-pdp-info .dh-pdp-cmp { overflow-x: visible !important; }
    body .dh-pdp-info .dh-pdp-cmp__table { min-width: 0 !important; table-layout: fixed !important; font-size: 12px !important; }
    body .dh-pdp-info .dh-pdp-cmp__table th,
    body .dh-pdp-info .dh-pdp-cmp__table td { padding: 8px 7px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; }
    body .dh-pdp-info .dh-pdp-cmp__table th:first-child,
    body .dh-pdp-info .dh-pdp-cmp__table td:first-child { width: 44% !important; }
    body .dh-pdp-info .dh-pdp-cmp__table th:nth-child(2),
    body .dh-pdp-info .dh-pdp-cmp__table td:nth-child(2),
    body .dh-pdp-info .dh-pdp-cmp__table th:nth-child(3),
    body .dh-pdp-info .dh-pdp-cmp__table td:nth-child(3) { width: 28% !important; }
    body .dh-pdp-info .dh-pdp-cmp__table thead th { white-space: normal !important; }
}
body .dh-pdp-info .dh-pdp-cmp__prog {
    margin: 12px 0 0 !important;
    font-size: 13px !important; color: var(--color-text-soft, #667085) !important; line-height: 1.6 !important;
}
body .dh-pdp-info .dh-pdp-cmp__prog strong { color: var(--color-text-muted, #344054) !important; }
body .dh-pdp-info .dh-pdp-cmp__dl {
    display: flex !important; flex-wrap: wrap !important; gap: 10px !important; margin: 14px 0 0 !important;
}
body .dh-pdp-info .dh-pdp-cmp__dl .dh-pdp-dl { margin: 0 !important; flex: 1 1 240px !important; }

/* Jump-Link "Unterschied Essential/Smart" — sitzt bei der Heizstab-Variation in der Buybox
   (außerhalb .dh-pdp-info), per JS eingefügt. Scrollt zur Vergleichstabelle. */
a.dh-hs-jump {
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
    margin-top: 10px !important;
    font-size: 11.5px !important; font-weight: 500 !important;
    color: #6a7280 !important; /* AA 4.85 statt 3.78 */
    text-decoration: none !important;
    border-bottom: 1px dotted #e0e4ea !important; padding-bottom: 1px !important;
    cursor: pointer !important; line-height: 1.3 !important;
    transition: color .15s ease, border-color .15s ease !important;
}
a.dh-hs-jump:hover { color: var(--brand-primary) !important; border-bottom-color: rgba(var(--brand-primary-rgb), .45) !important; }
a.dh-hs-jump .dh-hs-jump__arr {
    font-size: 11px !important; line-height: 1 !important;
    transition: transform .18s ease !important;
}
a.dh-hs-jump:hover .dh-hs-jump__arr { transform: translateY(2px) !important; }

/* ── Befüllung & Heizstab-Montage (Variation „Thermoflüssigkeit") ──────────────
   3 Optionen-Karten (gewählte hervorgehoben), Montage-Schritte, DIY-Akkordeon. */
body .dh-pdp-info .dh-pdp-befuell__intro { margin: 0 0 16px !important; font-size: 14px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.6 !important; }
body .dh-pdp-info .dh-pdp-befuell {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; margin: 0 !important;
}
body .dh-pdp-info .dh-pdp-befuell__card {
    display: flex !important; flex-direction: column !important; gap: 7px !important;
    padding: 14px 15px !important; border: 1px solid var(--color-line, #e7eaee) !important; border-radius: 12px !important; background: #fff !important;
    transition: border-color .15s ease, background .15s ease !important;
}
body .dh-pdp-info .dh-pdp-befuell__card.is-on {
    border-color: rgba(var(--brand-primary-rgb), .45) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--brand-primary-rgb), .30) !important;
    background: rgba(var(--brand-primary-rgb), .03) !important;
}
body .dh-pdp-info .dh-pdp-befuell__tag {
    font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: var(--color-text, #101828) !important; line-height: 1.25 !important;
}
body .dh-pdp-info .dh-pdp-befuell__card.is-on .dh-pdp-befuell__tag { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-befuell__card p { margin: 0 !important; font-size: 12.5px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.5 !important; }
@media (max-width: 720px) { body .dh-pdp-info .dh-pdp-befuell { grid-template-columns: 1fr !important; } }

body .dh-pdp-info .dh-pdp-befuell__mount { margin: 20px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid var(--color-line, #eef0f3) !important; }
body .dh-pdp-info .dh-pdp-befuell__h { font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-text, #101828) !important; margin: 0 0 8px !important; }
body .dh-pdp-info .dh-pdp-befuell__lead { margin: 0 0 10px !important; font-size: 14px !important; color: var(--color-text-muted, #344054) !important; line-height: 1.55 !important; }
body .dh-pdp-info .dh-pdp-befuell__steps { margin: 0 0 10px !important; padding-left: 20px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
body .dh-pdp-info .dh-pdp-befuell__steps li { font-size: 13.5px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.5 !important; }
body .dh-pdp-info .dh-pdp-befuell__hint { margin: 0 !important; font-size: 12.5px !important; color: var(--color-text-soft, #667085) !important; line-height: 1.5 !important; }
body .dh-pdp-info .dh-pdp-befuell__hint em { font-style: normal !important; font-weight: 600 !important; color: var(--color-text-muted, #344054) !important; }

/* Anschluss-Faktenliste (Wassermodelle): ruhige Punkte mit Brand-Marker. */
body .dh-pdp-info .dh-pdp-anschluss__facts {
    margin: 0 0 4px !important; padding: 0 !important; list-style: none !important;
    display: flex !important; flex-direction: column !important; gap: 9px !important;
}
body .dh-pdp-info .dh-pdp-anschluss__facts li {
    position: relative !important; padding-left: 22px !important;
    font-size: 13.5px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.5 !important;
}
body .dh-pdp-info .dh-pdp-anschluss__facts li::before {
    content: "" !important; position: absolute !important; left: 2px !important; top: 7px !important;
    width: 7px !important; height: 7px !important; border-radius: 50% !important;
    background: rgba(var(--brand-primary-rgb), .55) !important;
}
body .dh-pdp-info .dh-pdp-anschluss__facts li strong { color: var(--color-text, #101828) !important; }

body .dh-pdp-info .dh-pdp-diy { margin: 18px 0 0 !important; border: 1px solid var(--color-line, #e7eaee) !important; border-radius: 12px !important; background: #fff !important; overflow: hidden !important; }
body .dh-pdp-info .dh-pdp-diy summary {
    display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    padding: 13px 16px !important; cursor: pointer !important; list-style: none !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-text, #101828) !important;
}
body .dh-pdp-info .dh-pdp-diy summary::-webkit-details-marker { display: none !important; }
body .dh-pdp-info .dh-pdp-diy summary:hover { background: var(--color-surface-soft, #fafbfc) !important; }
body .dh-pdp-info .dh-pdp-diy__chev {
    flex: 0 0 auto !important; width: 9px !important; height: 9px !important;
    border-right: 2px solid var(--color-text-soft, #98a2b3) !important; border-bottom: 2px solid var(--color-text-soft, #98a2b3) !important;
    transform: rotate(45deg) !important; transition: transform .2s ease !important; margin-bottom: 3px !important;
}
body .dh-pdp-info .dh-pdp-diy[open] .dh-pdp-diy__chev { transform: rotate(-135deg) !important; margin: 3px 0 0 !important; }
body .dh-pdp-info .dh-pdp-diy__body { padding: 0 16px 16px !important; }
body .dh-pdp-info .dh-pdp-diy__mix { margin: 4px 0 12px !important; font-size: 13.5px !important; color: var(--color-text-muted, #344054) !important; line-height: 1.55 !important; }
body .dh-pdp-info .dh-pdp-diy__steps { margin: 0 0 12px !important; padding-left: 20px !important; display: flex !important; flex-direction: column !important; gap: 7px !important; }
body .dh-pdp-info .dh-pdp-diy__steps li { font-size: 13.5px !important; color: var(--color-text-muted, #475467) !important; line-height: 1.5 !important; }
body .dh-pdp-info .dh-pdp-diy__foot { margin: 0 !important; font-size: 12.5px !important; color: var(--color-text-soft, #667085) !important; font-style: italic !important; line-height: 1.55 !important; }

/* Warn-Variante der Hinweis-Box (Bernstein statt Brand-Rot) — „nie trocken einschalten". */
body .dh-pdp-info .dh-pdp-note--warn {
    margin: 0 0 14px !important;
    border-color: rgba(217, 119, 6, .30) !important; border-left-color: #d97706 !important;
    background: rgba(217, 119, 6, .06) !important;
}
body .dh-pdp-info .dh-pdp-note--warn .dh-pdp-note__lead { margin: 0 !important; }
body .dh-pdp-info .dh-pdp-note--warn .dh-pdp-note__lead strong { color: #92400e !important; }

/* Reaktive Helfer-Zeile unter der „Thermoflüssigkeit"-Variation (Buybox, außerhalb .dh-pdp-info). */
.dh-pdp-varhelp { margin-top: 10px !important; }
.dh-pdp-varhelp .dh-pdp-varhelp__t { display: block !important; font-size: 11px !important; color: #586273 !important; line-height: 1.5 !important; margin-bottom: 2px !important; }
.dh-pdp-varhelp .dh-hs-jump { margin-top: 4px !important; }

/* Live-m²-Badge am Größe-Selektor (Buybox, per JS eingefügt, außerhalb .dh-pdp-info).
   Aktualisiert sich sofort beim Größenwechsel — Quelle: Heiztabelle (konsistent zur Glance). */
.dh-pdp-sizem2 {
    grid-column: 1 / -1 !important; justify-self: start !important;
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    margin-top: 11px !important; padding: 7px 12px !important; white-space: nowrap !important;
    background: rgba(var(--brand-primary-rgb), .06) !important;
    border: 1px solid rgba(var(--brand-primary-rgb), .18) !important;
    border-radius: 9px !important;
    font-size: 13px !important; color: var(--color-text-muted, #344054) !important; line-height: 1.3 !important;
}
.dh-pdp-sizem2 svg { color: var(--brand-primary) !important; flex: 0 0 auto !important; }
.dh-pdp-sizem2 strong { color: var(--brand-primary) !important; font-weight: 700 !important; }

/* "Auf einen Blick"-Faktenkarte — die wichtigsten Kaufkriterien kompakt & scanbar.
   Aufgewertet: Akzent-Titel mit Bullet, klarere Zeilen, ruhige Karte (Restraint). */
body .dh-pdp-info .dh-pdp-glance {
    margin: 22px 0 0 !important;
    padding: 16px 18px 6px !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(16,24,40,.02) !important;
}
@media (min-width: 900px) {
    body .dh-pdp-info .dh-pdp-glance { margin: 0 !important; }
}
body .dh-pdp-info .dh-pdp-glance__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 6px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--color-surface-soft, #eef1f5) !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-text, #101828) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
}
body .dh-pdp-info .dh-pdp-glance__title::before {
    content: "" !important;
    width: 7px !important;
    height: 7px !important;
    border-radius: 50% !important;
    background: var(--brand-primary) !important;
    flex: 0 0 auto !important;
}
body .dh-pdp-info .dh-pdp-glance__row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 11px 0 !important;
    border-top: 1px solid #f1f3f6 !important;
}
body .dh-pdp-info .dh-pdp-glance__row:first-of-type { border-top: 0 !important; }
body .dh-pdp-info .dh-pdp-glance__k {
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-soft, #667085) !important;
}
body .dh-pdp-info .dh-pdp-glance__v {
    text-align: right !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--color-text, #1f2937) !important;
}

/* ── Technische Daten gruppiert (Abmessungen · Anschluss · Material · Leistung · …) [pdp23] ── */
body .dh-pdp-info .dh-pdp-specgroup { margin: 0 0 22px !important; }
body .dh-pdp-info .dh-pdp-specgroup:last-child { margin-bottom: 0 !important; }
body .dh-pdp-info .dh-pdp-specgroup__title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 4px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e7ebf0 !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--color-text-muted, #344054) !important;
}
body .dh-pdp-info .dh-pdp-specgroup__title::before {
    content: "" !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--brand-primary) !important;
    flex: 0 0 auto !important;
}

/* ── Lieferung & Montage: 3 Service-Punkte + Download-Liste [pdp27] ── */
body .dh-pdp-info .dh-pdp-service {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
}
@media (min-width: 700px) {
    body .dh-pdp-info .dh-pdp-service { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; }
}
body .dh-pdp-info .dh-pdp-service__item { display: flex !important; align-items: flex-start !important; gap: 13px !important; }
body .dh-pdp-info .dh-pdp-service__icon {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #fdf1f0 !important;
    color: var(--brand-primary) !important;
    font-size: 16px !important;
}
body .dh-pdp-info .dh-pdp-service__h {
    margin: 1px 0 3px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: var(--color-text, #1f2937) !important;
    line-height: 1.25 !important;
}
body .dh-pdp-info .dh-pdp-service__t { font-size: 13px !important; line-height: 1.5 !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-pdp-service__t a { color: var(--brand-primary) !important; text-decoration: underline !important; font-weight: 600 !important; }

/* Downloads (PDFs als saubere Liste) */
body .dh-pdp-info .dh-pdp-downloads { margin-top: 26px !important; padding-top: 22px !important; border-top: 1px solid #ececec !important; }
body .dh-pdp-info .dh-pdp-downloads__title {
    margin: 0 0 12px !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    color: var(--color-text-soft, #667085) !important;
}
body .dh-pdp-info .dh-pdp-downloads__list { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
@media (min-width: 700px) {
    body .dh-pdp-info .dh-pdp-downloads__list { grid-template-columns: 1fr 1fr !important; gap: 8px 20px !important; }
}
body .dh-pdp-info .dh-pdp-dl {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 11px !important;
    background: #fff !important;
    text-decoration: none !important;
    transition: border-color .15s, background .15s !important;
}
body .dh-pdp-info .dh-pdp-dl:hover { border-color: var(--brand-primary) !important; background: #fdf7f7 !important; }
body .dh-pdp-info .dh-pdp-dl__ico {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    background: #fdecec !important;
    color: #c0392b !important;
    font-size: 16px !important;
}
body .dh-pdp-info .dh-pdp-dl__name { flex: 1 1 auto !important; min-width: 0 !important; font-size: 13.5px !important; font-weight: 600 !important; color: var(--color-text, #1f2937) !important; line-height: 1.3 !important; }
body .dh-pdp-info .dh-pdp-dl__arrow { flex: 0 0 auto !important; color: var(--color-text-soft, #667085) !important; font-size: 14px !important; }
body .dh-pdp-info .dh-pdp-dl:hover .dh-pdp-dl__arrow { color: var(--brand-primary) !important; }

/* ── Google-Geschäftsbewertungen + Kundenprojekt-Fotos [pdp29] ── */
body .dh-pdp-info .dh-google__head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    padding: 16px 18px !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 14px !important;
    background: var(--color-surface-soft, #fafbfc) !important;
}
body .dh-pdp-info .dh-google__logo { flex: 0 0 auto !important; display: inline-flex !important; }
body .dh-pdp-info .dh-google__meta { flex: 1 1 auto !important; min-width: 0 !important; }
body .dh-pdp-info .dh-google__top { display: flex !important; align-items: center !important; gap: 9px !important; }
body .dh-pdp-info .dh-google__num { font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--color-text, #1f2937) !important; line-height: 1 !important; }
body .dh-pdp-info .dh-google__stars { position: relative !important; display: inline-block !important; font-size: 17px !important; line-height: 1 !important; color: #dadce0 !important; letter-spacing: 1px !important; }
body .dh-pdp-info .dh-google__stars::before { content: "\2605\2605\2605\2605\2605" !important; }
body .dh-pdp-info .dh-google__stars > span { position: absolute !important; left: 0 !important; top: 0 !important; overflow: hidden !important; white-space: nowrap !important; color: #fbbc04 !important; }
body .dh-pdp-info .dh-google__stars > span::before { content: "\2605\2605\2605\2605\2605" !important; }
body .dh-pdp-info .dh-google__count { margin-top: 3px !important; font-size: 13px !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-google__cta {
    flex: 0 0 auto !important;
    padding: 9px 16px !important;
    border: 1px solid #d6dae0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-text, #1f2937) !important;
    text-decoration: none !important;
    transition: border-color .15s, color .15s !important;
}
body .dh-pdp-info .dh-google__cta:hover { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }

body .dh-pdp-info .dh-google__gallery { margin-top: 18px !important; }
body .dh-pdp-info .dh-google__gallery-head { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 11px !important; }
body .dh-pdp-info .dh-google__gallery-title { font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-text, #1f2937) !important; }
body .dh-pdp-info .dh-google__gallery-note { font-size: 12px !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-google__strip {
    display: flex !important;
    gap: 10px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    scroll-snap-type: x proximity !important;
}
body .dh-pdp-info .dh-google__strip::-webkit-scrollbar { display: none !important; }
body .dh-pdp-info .dh-google__photo {
    flex: 0 0 auto !important;
    display: block !important;
    width: 168px !important;
    height: 224px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #f1f3f5 !important;
    scroll-snap-align: start !important;
    border: 1px solid #eceff2 !important;
}
body .dh-pdp-info .dh-google__photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .35s ease !important; }
body .dh-pdp-info .dh-google__photo:hover img { transform: scale(1.04) !important; }
@media (min-width: 768px) {
    body .dh-pdp-info .dh-google__photo { width: 190px !important; height: 248px !important; }
}

/* Kundenstimmen-Karten (kuratierte Google-Reviewtexte) */
body .dh-pdp-info .dh-grev-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 16px 0 4px !important;
}
@media (min-width: 640px) { body .dh-pdp-info .dh-grev-list { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } }
@media (min-width: 1000px) { body .dh-pdp-info .dh-grev-list { grid-template-columns: 1fr 1fr 1fr !important; } }
body .dh-pdp-info .dh-grev {
    padding: 15px 17px !important;
    border: 1px solid var(--color-line, #e7eaee) !important;
    border-radius: 13px !important;
    background: #fff !important;
}
body .dh-pdp-info .dh-grev__head { display: flex !important; align-items: center !important; gap: 11px !important; margin-bottom: 9px !important; }
body .dh-pdp-info .dh-grev__avatar {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #fdf1f0 !important;
    color: var(--brand-primary) !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
body .dh-pdp-info .dh-grev__id { flex: 1 1 auto !important; min-width: 0 !important; }
body .dh-pdp-info .dh-grev__name { display: block !important; font-size: 14px !important; font-weight: 700 !important; color: var(--color-text, #1f2937) !important; line-height: 1.2 !important; }
body .dh-pdp-info .dh-grev__meta { display: flex !important; align-items: center !important; gap: 7px !important; margin-top: 3px !important; font-size: 12px !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-google__stars--sm { font-size: 13px !important; }
body .dh-pdp-info .dh-grev__src { flex: 0 0 auto !important; display: inline-flex !important; opacity: .9 !important; }
body .dh-pdp-info .dh-grev__text { margin: 0 !important; font-size: 13.5px !important; line-height: 1.6 !important; color: var(--color-text-muted, #475467) !important; }

/* ── JTL-Produktbewertungen (artikelspezifisch, getrennt von Google) [pdp32] ── */
body .dh-pdp-info .dh-prodrev { margin-top: 26px !important; padding-top: 22px !important; border-top: 1px solid #ececec !important; }
body .dh-pdp-info .dh-prodrev__label {
    margin: 0 0 13px !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--color-text, #1f2937) !important;
}
body .dh-pdp-info .dh-prodrev__summary { display: flex !important; align-items: center !important; gap: 11px !important; margin-bottom: 16px !important; }
body .dh-pdp-info .dh-prodrev__avg { font-family: var(--font-display, "Manrope"), sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: var(--color-text, #1f2937) !important; line-height: 1 !important; }
body .dh-pdp-info .dh-prodrev__count { font-size: 13px !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-prodrev__list { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-bottom: 16px !important; }
@media (min-width: 768px) { body .dh-pdp-info .dh-prodrev__list { grid-template-columns: 1fr 1fr !important; gap: 14px !important; } }
body .dh-pdp-info .dh-prodrev__empty { margin: 0 0 14px !important; font-size: 14px !important; line-height: 1.6 !important; color: var(--color-text-soft, #667085) !important; max-width: 60ch !important; }
body .dh-pdp-info .dh-prodrev__cta {
    display: inline-flex !important;
    align-items: center !important;
    padding: 9px 17px !important;
    border: 1px solid #d6dae0 !important;
    border-radius: 9px !important;
    background: #fff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--color-text, #1f2937) !important;
    text-decoration: none !important;
    transition: border-color .15s, color .15s !important;
}
body .dh-pdp-info .dh-prodrev__cta:hover { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; }

/* ── "Mehr lesen" fuer die lange Beschreibung (per JS aktiviert) [pdp33] ── */
body .dh-pdp-info .dh-pdp-desc.dh-desc-clamp {
    max-height: 360px !important;
    overflow: hidden !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent) !important;
    mask-image: linear-gradient(to bottom, #000 72%, transparent) !important;
}
@media (min-width: 900px) {
    body .dh-pdp-info .dh-pdp-desc.dh-desc-clamp { max-height: 520px !important; }
}
body .dh-pdp-info .dh-pdp-desc.dh-desc-clamp.dh-desc-open {
    max-height: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}
body .dh-pdp-info .dh-desc-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 13px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    color: var(--brand-primary) !important;
    font-family: var(--font-body, inherit) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}
body .dh-pdp-info .dh-desc-more::after {
    content: "\25BE" !important;
    font-size: 12px !important;
    text-decoration: none !important;
    transition: transform .2s ease !important;
}
body .dh-pdp-info .dh-desc-more[aria-expanded="true"]::after { transform: rotate(180deg) !important; }

/* ── A11y: sichtbare Tastatur-Fokus-States + Reduced-Motion [pdp34] ── */
body .dh-pdp-info a:focus-visible,
body .dh-pdp-info button:focus-visible,
body .dh-pdp-info summary:focus-visible,
body .dh-pdp-info .dh-pdp-faq__item summary:focus-visible {
    outline: 2px solid var(--brand-primary) !important;
    outline-offset: 2px !important;
    border-radius: 6px !important;
}
@media (prefers-reduced-motion: reduce) {
    body .dh-pdp-info .dh-google__photo img,
    body .dh-pdp-info .dh-pdp-dl,
    body .dh-pdp-info .dh-google__cta,
    body .dh-pdp-info .dh-prodrev__cta,
    body .dh-pdp-info .dh-desc-more::after { transition: none !important; }
    body .dh-pdp-info .dh-google__photo:hover img { transform: none !important; }
}

/* ── Heizleistungs-Tabelle pro Modell (.dh-pdp-heat) [v: pdp20] ── */
body .dh-pdp-info .dh-pdp-heat__badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 13px !important;
    padding: 8px 13px !important;
    border-radius: 10px !important;
    background: #eefaf1 !important;
    color: #1a7a44 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}
body .dh-pdp-info .dh-pdp-heat__badge i { color: #2f9b46 !important; font-size: 15px !important; }
/* Elektrisch/Heizstab-Variante: warm getönt statt grün (kein Wärmepumpe-Kontext) */
body .dh-pdp-info .dh-pdp-heat__badge--power {
    background: rgba(var(--brand-primary-rgb), 0.07) !important;
    color: var(--brand-primary) !important;
}
body .dh-pdp-info .dh-pdp-heat__badge--power i { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-heat__scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
body .dh-pdp-info .dh-pdp-heat {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 13.5px !important;
    min-width: 320px !important;
}
body .dh-pdp-info .dh-pdp-heat thead th {
    text-align: left !important;
    padding: 9px 12px !important;
    border-bottom: 2px solid var(--color-surface-soft, #eef1f5) !important;
    color: var(--color-text-muted, #475467) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}
body .dh-pdp-info .dh-pdp-heat thead th span {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--color-text-soft, #667085) !important;
    margin-top: 1px !important;
}
body .dh-pdp-info .dh-pdp-heat tbody td {
    padding: 9px 12px !important;
    border-bottom: 1px solid #f2f4f7 !important;
    color: var(--color-text-muted, #344054) !important;
    white-space: nowrap !important;
}
body .dh-pdp-info .dh-pdp-heat tbody td strong { font-weight: 700 !important; color: var(--color-text, #1f2937) !important; }
body .dh-pdp-info .dh-pdp-heat tbody td span {
    display: block !important;
    font-size: 12px !important;
    color: var(--color-text-soft, #667085) !important;
    margin-top: 1px !important;
}
body .dh-pdp-info .dh-pdp-heat tbody tr.is-current {
    background: #fdf1f0 !important;
    box-shadow: inset 3px 0 0 var(--brand-primary) !important;
}
body .dh-pdp-info .dh-pdp-heat tbody tr.is-current td { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-heat tbody tr.is-current td:first-child { font-weight: 700 !important; }
body .dh-pdp-info .dh-pdp-heat tbody tr.is-current td strong { color: var(--brand-primary) !important; }
body .dh-pdp-info .dh-pdp-heat tbody tr.is-current td span { color: #ad4c48 !important; } /* AA 4.87 statt 4.46 */

/* ── Dual-Watt: beratende Zwei-Regime-Darstellung (Wawi-Merkmale) ── */
body .dh-pdp-info .dh-heatdual {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 0 14px !important;
}
body .dh-pdp-info .dh-heatdual__col {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 14px 16px !important;
    border: 1px solid var(--color-surface-soft, #eef1f5) !important;
    border-radius: 12px !important;
    background: #fbfcfd !important;
}
body .dh-pdp-info .dh-heatdual__col--hp {
    border-color: #d3efdc !important;
    background: #f4fbf6 !important;
}
body .dh-pdp-info .dh-heatdual__tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    text-transform: uppercase !important;
    color: var(--color-text-soft, #667085) !important;
}
body .dh-pdp-info .dh-heatdual__col--hp .dh-heatdual__tag { color: #1a7a44 !important; }
body .dh-pdp-info .dh-heatdual__col--hp .dh-heatdual__tag i { color: #2f9b46 !important; }
body .dh-pdp-info .dh-heatdual__temp { font-size: 12.5px !important; color: var(--color-text-soft, #667085) !important; }
body .dh-pdp-info .dh-heatdual__watt {
    margin-top: 4px !important;
    font-family: var(--font-display, inherit) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    color: var(--color-text, #1f2937) !important;
}
body .dh-pdp-info .dh-heatdual__col--hp .dh-heatdual__watt { color: #15703c !important; }
body .dh-pdp-info .dh-heatdual__room { font-size: 13.5px !important; color: var(--color-text-muted, #475467) !important; }

/* Beratungs-Box: Erläuterung + Tipp */
body .dh-pdp-info .dh-pdp-advice {
    padding: 11px 14px !important;
    border-radius: 10px !important;
    background: var(--color-surface-soft, #f7f8fa) !important;
    border: 1px solid var(--color-surface-soft, #eef1f5) !important;
}
body .dh-pdp-info .dh-pdp-advice__title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-text, #1f2937) !important;
    margin: 0 0 4px !important;
}
body .dh-pdp-info .dh-pdp-advice p {
    margin: 0 0 8px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--color-text-muted, #475467) !important;
}
body .dh-pdp-info .dh-pdp-advice p:last-child { margin-bottom: 0 !important; }
body .dh-pdp-info .dh-pdp-advice__tip {
    display: flex !important;
    align-items: flex-start !important;
    gap: 7px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--color-surface-soft, #eef1f5) !important;
    color: var(--color-text-muted, #344054) !important;
    font-size: 13px !important;
}
body .dh-pdp-info .dh-pdp-advice__tip i { color: var(--brand-primary) !important; margin-top: 2px !important; }
@media (min-width: 640px) {
    body .dh-pdp-info .dh-heatdual { grid-template-columns: 1fr 1fr !important; }
}

/* ── Topbar full-width: dunkler Balken edge-to-edge, Inhalt im zentrierten Container [pdp35] ──
   Behebt den "abgeschnittenen" Topbar-Look (Balken war nur ~895px zentriert auf dem roten Header). */
@media (min-width: 992px) {
    body #header-top-bar.topbar-wrapper { width: 100% !important; max-width: none !important; }
    body #header-top-bar.topbar-wrapper > .container,
    body #header-top-bar.topbar-wrapper > .container-fluid {
        max-width: 1320px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
 * 4X. PDP PAYPAL EXPRESS BUTTONS — sauber unter dem ATC-Button
 *    Das Plugin (jtl_paypal_commerce) injiziert seine Button-/Messaging-
 *    Container als zusätzliche .row in #add-to-cart. Problem: die generischen
 *    Buybox-Grid-Regeln (#add-to-cart > .row > col:first-child { max-width:43% }
 *    auf Mobile) quetschten den PayPal-Container auf 43 % Breite → wirkte
 *    "unangebracht". Fix: volle Breite + klarer Abstand unter der primären CTA.
 *    KEIN DOM-Verschieben (update-/AJAX-sicher) — nur Layout auf den stabilen
 *    Plugin-Container-IDs.
 * ============================================================ */

/* 1) Container-Cols auf volle Breite zwingen (override 43%-Mobile-Squish + bootstrap-offsets) */
body #product-offer #add-to-cart > .row > #paypal-button-productDetails-container,
body #product-offer #add-to-cart > .row > #ppc-paypal-button-custom-productDetails-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 2) Klarer Abstand unter dem ATC-Button für die sichtbare PayPal-Reihe.
      :has() trifft nur die Row mit dem sichtbaren Container (die d-none-Custom-Row
      bleibt ohne Phantom-Abstand). */
body #product-offer #add-to-cart > .row:has(> #paypal-button-productDetails-container) {
  margin-top: 14px !important;
}

/* 3) Negative Bootstrap-Margins der SDK-internen .row neutralisieren (sonst
      seitlicher Overflow / Versatz innerhalb der Buybox-Spalte). */
body #product-offer #paypal-button-productDetails-container .ppc-ecs-horizontal-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* 4) Mobile-first: etwas kompakterer Abstand, voller Platz, kein Quetschen.
      Bottom-Luft, damit die sticky Mobile-CTA nicht direkt anschließt. */
@media (max-width: 767.98px) {
  body #product-offer #add-to-cart > .row:has(> #paypal-button-productDetails-container) {
    margin-top: 12px !important;
  }
  body #product-offer #add-to-cart > .row > #paypal-button-productDetails-container {
    margin-bottom: 2px !important;
  }
}

/* ============================================================
 * 4Y. FOOTER (dunkel, mobile-first) — eigener Footer, ersetzt
 *     komplett den JTL-Standard-Footer (Markup: custom/dh_footer.tpl).
 *     Flaeche = Topbar-Navy (--brand-topbar-bg) -> Klammer oben/unten.
 *     Akzent = aufgehelltes Brand-Rot (--dh-ft-red, AA-tauglich auf Dunkel),
 *     CTA = --brand-primary. Google-Sterne bleiben Google-Gold (#fbbc04).
 *     Mobile-first: Basis = Mobil (Spalten als Akkordeon), ab 768px
 *     statisches Grid. Im Checkout ausgeblendet.
 * ============================================================ */
#footer.dh-ft {
  --dh-ft-red: var(--brand-primary, var(--brand-primary)); /* Brand-Rot aus brand.css-Token — folgt Rebrand automatisch */
  --dh-ft-focus: #e0463f;          /* nur Tastatur-Fokus-Ring, heller fuer Sichtbarkeit */
  --dh-ft-line: rgba(255, 255, 255, 0.13);
  padding: 0;
  background: var(--brand-topbar-bg, #020713);
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body, "IBM Plex Sans"), system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
body.is-checkout #footer.dh-ft { display: none; }
.dh-ft a { text-decoration: none; }
/* WICHTIG: NOVA setzt #footer a { color: #525252 } mit ID-Spezifitaet — das schlaegt
   ALLE .dh-ft-Klassen und faerbt saemtliche Footer-Links dunkelgrau/unleserlich.
   Hier mit gleichstarkem #footer.dh-ft-Prefix die korrekten hellen Linkfarben zurueckholen. */
#footer.dh-ft a { color: inherit; }
#footer.dh-ft .dh-ft__col-list li a { color: rgba(255, 255, 255, 0.84); }
#footer.dh-ft .dh-ft__seo-links a { color: rgba(255, 255, 255, 0.84); }
#footer.dh-ft .dh-ft__legal-nav a { color: rgba(255, 255, 255, 0.85); }
#footer.dh-ft .dh-ft__vat a { color: rgba(255, 255, 255, 0.8); }
#footer.dh-ft .dh-ft__social a { color: rgba(255, 255, 255, 0.85); }
#footer.dh-ft .dh-ft__contact-cta { color: #fff; }
#footer.dh-ft .dh-ft__col-list li a:hover,
#footer.dh-ft .dh-ft__seo-links a:hover,
#footer.dh-ft .dh-ft__legal-nav a:hover,
#footer.dh-ft .dh-ft__social a:hover { color: #fff; }
.dh-ft__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* WICHTIG: nur horizontal paddern. padding-SHORTHAND (padding:0 24px) wuerde
   oben/unten auf 0 setzen — und da Baender (.dh-ft__trust-grid, __main, __pay-in …)
   die Klasse .dh-ft__in mittragen, killt eine spaeter definierte .dh-ft__in-Regel
   (@1024) deren vertikales Padding via Source-Order. Longhand verhindert das. */
.dh-ft__in { max-width: 1500px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* --- 1) Trust / USP --- */
.dh-ft__trust { background: #0a1322; border-bottom: 1px solid var(--dh-ft-line); padding-top: 36px; padding-bottom: 36px; }
.dh-ft__trust-grid {
  list-style: none; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px;
}
.dh-ft__usp { display: flex; align-items: center; gap: 13px; min-width: 0; }
.dh-ft__usp-ic svg { width: 24px; height: 24px; }
.dh-ft__usp-ic {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.dh-ft__usp-tx { display: flex; flex-direction: column; min-width: 0; }
.dh-ft__usp-tx strong {
  font-family: var(--font-display, "Manrope"), sans-serif;
  font-weight: 600; font-size: 14px; line-height: 1.25; color: #fff;
}
.dh-ft__usp-tx span { font-size: 12.5px; color: rgba(255, 255, 255, 0.8); margin-top: 3px; }

/* --- 2) Newsletter --- */
.dh-ft__news { border-bottom: 1px solid var(--dh-ft-line); }
.dh-ft__news-in { display: flex; flex-direction: column; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.dh-ft__news-kicker {
  font-family: var(--font-display, "Manrope"), sans-serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55); font-weight: 700;
}
.dh-ft__news-title {
  display: block; font-family: var(--font-display, "Manrope"), sans-serif;
  font-size: 20px; font-weight: 700; color: #fff; margin: 5px 0 3px;
}
.dh-ft__news-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.dh-ft__news-formwrap { width: 100%; }
.dh-ft__news-row { display: flex; gap: 8px; }
.dh-ft__news-row input {
  flex: 1; min-width: 0; height: 48px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.06);
  color: #fff; padding: 0 14px; font-size: 15px; font-family: inherit;
}
.dh-ft__news-row input::placeholder { color: rgba(255, 255, 255, 0.5); }
.dh-ft__news-row input:focus {
  outline: none; border-color: var(--dh-ft-focus);
  box-shadow: 0 0 0 3px rgba(224, 70, 61, 0.25);
}
.dh-ft__news-btn {
  flex: 0 0 auto; height: 48px; padding: 0 22px; border: 0; border-radius: 10px;
  background: var(--brand-primary, var(--brand-primary)); color: #fff; font-weight: 700; font-size: 14.5px;
  font-family: var(--font-display, "Manrope"), sans-serif; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease;
}
.dh-ft__news-btn:hover { background: #b3140f; }
.dh-ft__news-captcha { margin-top: 4px; }
.dh-ft__news-captcha:empty { display: none; }

/* --- 3) Hauptbereich: Marke + Google + Spalten --- */
.dh-ft__main { display: flex; flex-direction: column; gap: 26px; padding-top: 38px; }
.dh-ft__logo { display: inline-block; }
.dh-ft__logo img { height: 46px; width: auto; max-width: 240px; display: block; }
.dh-ft__tag { margin: 18px 0 20px; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); line-height: 1.7; max-width: 440px; }
.dh-ft__contact { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dh-ft__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, 0.86); }
.dh-ft__contact-ic { flex: 0 0 auto; display: inline-flex; color: rgba(255, 255, 255, 0.55); margin-top: 1px; }
.dh-ft__contact-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  padding: 13px 22px; border-radius: 10px;
  background: var(--dh-ft-red); border: 0; color: #fff;
  font-family: var(--font-display, "Manrope"), sans-serif; font-size: 14px; font-weight: 700;
  transition: background 0.15s ease;
}
/* Kontrast-Fix: .dh-ft a{color:inherit} (0,1,1) wuerde den Button-Text auf rosa
   (geerbtes .82-Weiss) ziehen -> hier hoehere Spezifitaet erzwingt reines Weiss. */
.dh-ft a.dh-ft__contact-cta,
.dh-ft a.dh-ft__contact-cta:hover { color: #fff; }
.dh-ft__contact-cta svg { color: #fff; flex: 0 0 auto; }
.dh-ft__contact-cta:hover { background: var(--brand-primary-dark, var(--brand-primary-dark)); }

/* Google-Aggregat (echte Werte; Sterne bleiben Google-Gold) */
.dh-ft__google {
  display: block; max-width: 320px; padding: 15px 17px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--dh-ft-line);
  transition: border-color 0.15s ease;
}
.dh-ft__google:hover { border-color: rgba(255, 255, 255, 0.24); }
.dh-ft__google-top {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display, "Manrope"), sans-serif; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.88);
}
.dh-ft__google-chk { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: rgba(255, 255, 255, 0.72); font-size: 11px; font-weight: 600; }
.dh-ft__google-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; }
.dh-ft__google-num { font-family: var(--font-display, "Manrope"), sans-serif; font-size: 28px; font-weight: 700; color: #fff; line-height: 1; }
.dh-ft__stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; color: rgba(255, 255, 255, 0.22); letter-spacing: 2px; }
.dh-ft__stars::before { content: "\2605\2605\2605\2605\2605"; }
.dh-ft__stars > span { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #fbbc04; }
.dh-ft__stars > span::before { content: "\2605\2605\2605\2605\2605"; }
.dh-ft__google-sub { font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.dh-ft__google-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 11px;
  font-size: 12.5px; font-weight: 600; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 8px 13px;
}
.dh-ft__google:hover .dh-ft__google-cta { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* Spalten (mobil = Akkordeon) */
.dh-ft__cols { display: flex; flex-direction: column; margin-top: 4px; }
.dh-ft__col { border-top: 1px solid var(--dh-ft-line); }
.dh-ft__col-h {
  all: unset; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 2px; cursor: pointer;
  font-family: var(--font-display, "Manrope"), sans-serif; font-weight: 700;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff;
}
.dh-ft__col-h:focus-visible { outline: 2px solid var(--dh-ft-focus); outline-offset: 2px; }
.dh-ft__col-chev { display: inline-flex; color: rgba(255, 255, 255, 0.72); transition: transform 0.25s ease; }
.dh-ft__col.is-open .dh-ft__col-chev { transform: rotate(180deg); }
.dh-ft__col-bar { display: none; }
.dh-ft__col-list { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.dh-ft__col.is-open .dh-ft__col-list { max-height: 440px; }
.dh-ft__col-list li a { display: block; padding: 11px 2px; font-size: 14px; color: rgba(255, 255, 255, 0.84); }
.dh-ft__col-list li:last-child a { padding-bottom: 16px; }
.dh-ft__col-list li a:hover { color: #fff; }

/* --- SEO: Beliebte Kategorien --- */
.dh-ft__seo { border-top: 1px solid var(--dh-ft-line); }
.dh-ft__seo-in { padding-top: 24px; padding-bottom: 24px; }
.dh-ft__seo-title {
  display: block; font-family: var(--font-display, "Manrope"), sans-serif;
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin-bottom: 14px;
}
.dh-ft__seo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 11px 24px; }
.dh-ft__seo-links a { font-size: 13.5px; color: rgba(255, 255, 255, 0.84); transition: color 0.15s ease; }
.dh-ft__seo-links a:hover { color: #fff; }

/* --- 4) Zahlung + Versand + Social --- */
.dh-ft__pay { border-top: 1px solid var(--dh-ft-line); }
.dh-ft__pay-in { display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 26px; padding-bottom: 26px; }
.dh-ft__paygroups { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 18px 26px; }
.dh-ft__paygroup { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.dh-ft__pay-lbl { font-family: var(--font-display, "Manrope"), sans-serif; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); }
.dh-ft__methods { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 16px; background: #fff; border-radius: 10px; padding: 9px 16px; }
.dh-ft__pic { height: 22px; width: auto; display: block; flex: 0 0 auto; }
.dh-ft__pic--line { height: 21px; opacity: 0.78; }
.dh-ft__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.dh-ft__social a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.dh-ft__social a:hover { border-color: var(--dh-ft-red); background: var(--dh-ft-red); color: #fff; }
/* Social-Icon beim Hover: Glyph MUSS weiss bleiben. Das globale Theme faerbt Footer-Link-Hover
   auf Markenrot -> das FA-Icon wurde rot auf rotem Kreis = unsichtbar (leerer roter Kreis).
   Scoped-Override (hohe Spezifitaet + !important) erzwingt Weiss auf dem roten Kreis. */
#footer.dh-ft .dh-ft__social a:hover,
#footer.dh-ft .dh-ft__social a:hover span { color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* --- 5) Rechts-Bar --- */
.dh-ft__legal { background: #0a1322; border-top: 1px solid var(--dh-ft-line); }
.dh-ft__legal-in { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; padding-bottom: 22px; text-align: center; }
.dh-ft__legal-left { display: flex; flex-direction: column; gap: 6px; }
.dh-ft__copy { font-size: 13px; color: rgba(255, 255, 255, 0.88); }
.dh-ft__vat { font-size: 12px; color: rgba(255, 255, 255, 0.66); }
.dh-ft__vat a { color: rgba(255, 255, 255, 0.8); text-decoration: underline; }
.dh-ft__legal-nav { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; }
.dh-ft__legal-nav a { font-size: 13px; color: rgba(255, 255, 255, 0.85); }
.dh-ft__legal-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Widerruf-Button (§ 356a BGB, ab 19.06.2026): minimal, aber optisch HERVORGEHOBEN —
   hebt sich klar von den Pflichtlinks (Impressum/AGB) ab; AA-Kontrast (weisser Rand +
   fetter weisser Text auf Dunkel). #footer.dh-ft-Prefix schlaegt NOVAs #footer a. */
#footer.dh-ft .dh-ft__widerruf {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--font-display, "Manrope"), sans-serif; font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#footer.dh-ft .dh-ft__widerruf:hover { border-color: #fff; background: rgba(255, 255, 255, 0.12); color: #fff; }
.dh-ft__widerruf:focus-visible { outline: 2px solid var(--dh-ft-focus); outline-offset: 2px; }
.dh-ft__widerruf svg { flex: 0 0 auto; }

/* === Tablet ab 768px === */
@media (min-width: 768px) {
  .dh-ft__in { padding-left: 36px; padding-right: 36px; }
  .dh-ft__trust { padding-top: 56px; padding-bottom: 56px; }
  .dh-ft__trust-grid { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .dh-ft__usp { gap: 15px; padding-left: 34px; border-left: 1px solid rgba(255, 255, 255, 0.12); }
  .dh-ft__usp:first-child { padding-left: 0; border-left: 0; }
  .dh-ft__usp-tx strong { font-size: 14.5px; }

  .dh-ft__news-in { flex-direction: row; align-items: center; gap: 32px; padding-top: 30px; padding-bottom: 30px; }
  .dh-ft__news-copy { flex: 1; }
  .dh-ft__news-formwrap { width: 420px; flex: 0 0 auto; }

  .dh-ft__main { flex-direction: row; gap: 52px; align-items: flex-start; padding-top: 48px; padding-bottom: 6px; }
  .dh-ft__brand { flex: 0 0 310px; max-width: 310px; }
  .dh-ft__cols { flex: 1; margin-top: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
  .dh-ft__col { border-top: 0; }
  .dh-ft__col-h { display: block; width: auto; padding: 0; cursor: default; margin-bottom: 16px; }
  .dh-ft__col-chev { display: none; }
  .dh-ft__col-bar { display: none; }
  .dh-ft__col-list { max-height: none; overflow: visible; display: flex; flex-direction: column; gap: 3px; }
  .dh-ft__col-list li a { padding: 7px 0; font-size: 14px; }
  .dh-ft__col-list li:last-child a { padding-bottom: 7px; }

  .dh-ft__seo-in { padding-top: 26px; padding-bottom: 26px; }

  .dh-ft__pay-in { flex-direction: row; justify-content: space-between; align-items: center; gap: 26px; padding-top: 26px; padding-bottom: 26px; }
  .dh-ft__paygroups { justify-content: flex-start; gap: 30px; }
  .dh-ft__paygroup { align-items: flex-start; }

  .dh-ft__legal-in { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; text-align: left; }
  .dh-ft__legal-left { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 18px; }
  .dh-ft__legal-nav { justify-content: flex-end; gap: 10px 22px; }
}

/* === Desktop ab 1024px === */
@media (min-width: 1024px) {
  .dh-ft__in { padding-left: 48px; padding-right: 48px; }
  .dh-ft__main { gap: 72px; padding-top: 58px; }
  .dh-ft__brand { flex-basis: 350px; max-width: 350px; }
  .dh-ft__cols { gap: 40px; }
}

/* ============================================================
 * 4Z. BEWERTUNGEN-SEKTION — Fotos zuerst -> Google -> JTL, klar getrennt
 *    Die native JTL-Bewertung (reviews.tpl) wurde vom Boden-Tab in die
 *    Sprungnav-Sektion #dh-bewertungen geholt. Saubere Trennlinien zwischen
 *    den drei Blöcken; Col-Padding der nativen {col cols=12} zurückgesetzt.
 * ============================================================ */
/* Fotos sitzen jetzt zuoberst (direkt unter der H2) */
body .dh-pdp-info .dh-google__gallery { margin-top: 2px !important; }
/* Google-Aggregat trennt sich sauber von den Fotos darüber */
body .dh-pdp-info .dh-google__head {
    margin-top: 24px !important;
    padding-top: 22px !important;
    border-top: 1px solid #ececec !important;
}
/* JTL-Produktbewertung: eigener, deutlich abgesetzter Block */
body .dh-pdp-info .dh-jtlrev {
    margin-top: 30px !important;
    padding-top: 26px !important;
    border-top: 2px solid #f0f2f5 !important;
}
body .dh-pdp-info .dh-jtlrev__anchor {
    display: block !important;
    height: 0 !important;
    scroll-margin-top: 160px !important;
}
body .dh-pdp-info .dh-jtlrev__label {
    margin: 0 0 16px !important;
    font-family: var(--font-display, "Manrope"), sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--color-text, #1f2937) !important;
}
/* native reviews.tpl nutzt {col cols=12} ohne umgebende .row -> seitliches
   Padding/Negativ-Margins neutralisieren, sonst Versatz in der Sektion */
body .dh-pdp-info .dh-jtlrev > .col-12,
body .dh-pdp-info .dh-jtlrev [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
body .dh-pdp-info .dh-jtlrev .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
 * 5A. ÜBERBLICK ohne Produktbeschreibung — "Auf einen Blick" solo
 *    (Glance-Card jetzt entkoppelt: zeigt sich auch ohne lange Beschreibung)
 * ============================================================ */
body .dh-pdp-info .dh-pdp-beschreibung-grid--solo {
    display: block !important;
}
body .dh-pdp-info .dh-pdp-beschreibung-grid--solo .dh-pdp-glance {
    max-width: 540px !important;
    margin: 0 !important;
    position: static !important;
}
@media (max-width: 899px) {
    body .dh-pdp-info .dh-pdp-beschreibung-grid--solo .dh-pdp-glance {
        max-width: none !important;
        order: 0 !important;
    }
}

/* ============================================================
 * 5B. SOMMER-PROMO (Code via brand_config.tpl) — Topbar / PDP / Warenkorb
 *    Zentral geschaltet via $dhPromoActive. Läuft per Datum automatisch aus.
 * ============================================================ */
/* Topbar: 4. rotierende Botschaft -> 4-fach-Rotation (18s), gleiche Keyframes */
#header-top-bar .dh-topbar-rotator--promo .dh-topbar-msg { animation-duration: 18s !important; }
#header-top-bar .dh-topbar-rotator--promo .dh-topbar-msg--b { animation-delay: 4.5s !important; }
#header-top-bar .dh-topbar-rotator--promo .dh-topbar-msg--c { animation-delay: 9s !important; }
#header-top-bar .dh-topbar-rotator--promo .dh-topbar-msg--d { animation-delay: 13.5s !important; }
/* 25.08.2026 Markenglut: Amber raus aus der Aktions-Sprache — auf dem dunklen
   Topbar-Grund tragen Weiss und der weisse Badge die Botschaft (wie §44).
   Die goldenen BEWERTUNGS-Sterne bleiben golden: das ist Rating-Sprache. */
#header-top-bar .dh-topbar-promo-msg strong { color: #fff !important; }
#header-top-bar .dh-topbar-sun { color: #fff; }

/* PDP: dezente Promo-Zeile unter dem Preis (am Entscheidungspunkt) */
body #product-offer .dh-pdp-promo-line {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 9px 0 0 !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    background: #f4f5f7 !important;
    color: #3a4353 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    flex-wrap: wrap !important;
}
body #product-offer .dh-pdp-promo-line strong { font-weight: 800 !important; }
body #product-offer .dh-pdp-promo-sun { color: #f5a623 !important; flex: 0 0 auto !important; }
/* Code als neutraler Outline-Chip -> "kopierbar"-Optik ohne Rot (Rot ist dem CTA vorbehalten) */
body #product-offer .dh-pdp-promo-line .dh-pdp-promo-code {
    padding: 1px 7px !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: var(--color-text-muted, #344054) !important;
    border: 1px dashed #c2c8d0 !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
}
/* Dringlichkeit: Deadline abgesetzt + kräftig */
body #product-offer .dh-pdp-promo-line .dh-pdp-promo-deadline {
    font-weight: 800 !important;
    white-space: nowrap !important;
}
body #product-offer .dh-pdp-promo-line .dh-pdp-promo-deadline::before {
    content: "\00b7";
    margin: 0 5px 0 1px;
    opacity: .5;
}

/* Warenkorb: Promo-Erinnerung + Code zum Kopieren (kein Auto-Anwenden) */
.rt-summary-promo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 11px 14px;
    border: 1px dashed rgba(var(--brand-primary-rgb), 0.45);
    border-radius: 12px;
    background: rgba(var(--brand-primary-rgb), 0.06);
    color: var(--color-text, #1f2937);
}
.rt-summary-promo__txt { font-size: 13.5px; line-height: 1.35; }
.rt-summary-promo__txt strong { color: var(--brand-primary); font-weight: 800; }
.rt-summary-promo__sun { color: #f5a623; }

/* Kopier-Button: zeigt den Code + Kopieren-Aktion, der Kunde fügt ihn selbst ein */
.rt-summary-promo__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.4);
    border-radius: 9px;
    background: #fff;
    color: var(--brand-primary);
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}
.rt-summary-promo__copy:hover { background: rgba(var(--brand-primary-rgb), 0.07); border-color: var(--brand-primary); }
.rt-summary-promo__copy:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.rt-summary-promo__code {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
}
.rt-summary-promo__ico { display: inline-flex; position: relative; width: 15px; height: 15px; }
.rt-summary-promo__ico svg { position: absolute; inset: 0; transition: opacity .15s ease; }
.rt-summary-promo__ico-done { opacity: 0; color: #15803d; }
.rt-summary-promo__label { font-size: 12.5px; font-weight: 700; }
.rt-summary-promo__copy.is-copied { border-color: #15803d; color: #15803d; background: rgba(21, 128, 61, 0.06); }
.rt-summary-promo__copy.is-copied .rt-summary-promo__ico-copy { opacity: 0; }
.rt-summary-promo__copy.is-copied .rt-summary-promo__ico-done { opacity: 1; }

@media (max-width: 480px) {
    .rt-summary-promo { flex-direction: column; align-items: stretch; gap: 9px; }
    .rt-summary-promo__copy { justify-content: center; }
}

/* === PDP Mobile-Buybox: Mengen-Zaehler volle Zeilenbreite (wie der ATC-Button) + Abstand ===
   Zaehler soll die GANZE Zeile sein (nicht abgeschnitten), genauso breit wie der ATC-Button
   darunter, mit klarem vertikalem Abstand (vorher klebte er ohne Luecke direkt darueber).
   .choose_quantity erhoeht die Spezifitaet ueber die bestehenden #quantity-grp-Regeln. */
@media (max-width: 575.98px) {
    body[data-page="1"] #product-offer #quantity-grp.choose_quantity {
        width: 100% !important;
        max-width: none !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        min-height: 50px !important;
        height: 50px !important;
        margin-bottom: 14px !important; /* Abstand zur ATC-Zeile */
    }
    body[data-page="1"] #product-offer #quantity-grp.choose_quantity .input-group-prepend .btn,
    body[data-page="1"] #product-offer #quantity-grp.choose_quantity .input-group-append .btn,
    body[data-page="1"] #product-offer #quantity-grp.choose_quantity input.quantity {
        min-height: 48px !important;
        height: 48px !important;
    }
}

/* "Variante auswaehlen" (Sticky-CTA, Vaterartikel) scrollt hoch zur Auswahl und hebt
   die Variationen kurz hervor, damit klar ist, wo gewaehlt wird. Subtiler Outline-Puls. */
.dh-variations-flash { animation: dhVarFlash 1.3s ease; border-radius: 12px; }
@keyframes dhVarFlash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb, 147, 10, 8), 0); }
    30%  { box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb, 147, 10, 8), 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb, 147, 10, 8), 0); }
}

/* 31. PDP VARIANTENWECHSEL — KEIN SCROLL-SPRUNG
   Beim Variantenwechsel ersetzt NOVA #result-wrapper komplett (loadContent ->
   $wrapper.replaceWith). Firefox/Gecko reagiert darauf mit Scroll-Anchoring und
   springt sichtbar (gemessen +417px nach unten); Chromium kompensiert korrekt,
   echtes Safari kennt overflow-anchor gar nicht. overflow-anchor:none auf dem
   ausgetauschten Bereich unterbindet das Gecko-Anchoring -> Seite bleibt exakt
   stehen. Auf Chrome harmlos (kein Reflow durch quadratische 760x760-Bilder),
   auf Safari ein No-op. Verifiziert auf echter Firefox-Engine: 0px. */
#result-wrapper,
#product-offer {
    overflow-anchor: none;
}

/* 32. RATGEBER/BLOG — Lesbarkeit, Inhaltsverzeichnis, TL;DR (mobile-first)
   Greift auf den Artikel-Body (.blog-details-content, NOVA blog/details.tpl) +
   die zwei Content-Boxen .dh-rg-tldr (Das Wichtigste in Kürze) und .dh-rg-toc
   (Inhaltsverzeichnis). Marken-Tokens, ruhige Lesetypografie, mobil zuerst. */
.blog-details-content {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
}
.blog-details-content p {
    line-height: 1.75;
    margin-bottom: 1.1rem;
    font-size: 1.0625rem;
}
.blog-details-content h2 {
    margin-top: 2.4rem;
    margin-bottom: .9rem;
    line-height: 1.25;
    scroll-margin-top: 88px; /* Sprungmarken nicht unter den Sticky-Header */
}
.blog-details-content h3 {
    margin-top: 1.6rem;
    margin-bottom: .55rem;
    scroll-margin-top: 88px;
}
.blog-details-content ul,
.blog-details-content ol {
    margin-bottom: 1.1rem;
    padding-left: 1.25rem;
}
.blog-details-content li {
    margin-bottom: .45rem;
    line-height: 1.65;
}
.blog-details-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.3rem;
    font-size: .98rem;
}
.blog-details-content th,
.blog-details-content td {
    border: 1px solid #e4e7ec;
    padding: .55rem .7rem;
    text-align: left;
    vertical-align: top;
}
.blog-details-content thead th {
    background: #f7f7f5;
    font-weight: 700;
}

/* "Das Wichtigste in Kürze" */
.dh-rg-tldr {
    background: #f7f7f5;
    border-left: 4px solid var(--brand-primary, var(--brand-primary));
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}
.dh-rg-tldr__title {
    margin: 0 0 .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--brand-primary, var(--brand-primary));
}
.dh-rg-tldr ul { margin: 0; padding-left: 1.1rem; }
.dh-rg-tldr li { margin-bottom: .4rem; line-height: 1.6; }

/* Inhaltsverzeichnis */
.dh-rg-toc {
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 0 0 2rem;
    background: #fff;
}
.dh-rg-toc__title {
    margin: 0 0 .6rem;
    font-weight: 700;
    font-size: 1rem;
}
.dh-rg-toc ul { margin: 0; padding: 0; list-style: none; }
.dh-rg-toc li {
    position: relative;
    margin-bottom: .42rem;
    padding-left: 1.2rem;
    line-height: 1.5;
}
.dh-rg-toc li::before {
    content: "\2192"; /* → */
    position: absolute;
    left: 0;
    color: var(--brand-primary, var(--brand-primary));
    font-weight: 700;
}
.dh-rg-toc a {
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.dh-rg-toc a:hover,
.dh-rg-toc a:focus {
    color: var(--brand-primary, var(--brand-primary));
    border-bottom-color: currentColor;
}

@media (max-width: 600px) {
    .blog-details-content p { font-size: 1rem; line-height: 1.7; }
    .blog-details-content h2 { margin-top: 2rem; font-size: 1.35rem; }
    .dh-rg-tldr,
    .dh-rg-toc { padding: .85rem 1rem; }
    /* Vergleichstabelle mobil horizontal scrollbar statt gequetscht */
    .blog-details-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}

/* 33. RATGEBER — Sektionsfotos (.dh-rg-figure) + Produkt-Grid (.dh-rg-products)
   Zurückhaltend: dünne Rahmen, ruhige Hover (Rahmen/Text in Markenrot, kein
   Schatten/Lift), ganze Karte klickbar. Marken-Tokens wie §32. Mobil zuerst. */
.dh-rg-figure {
    margin: 1.8rem auto;
    max-width: 440px;
    text-align: center;
}
.dh-rg-figure--wide { max-width: 560px; }
.dh-rg-figure a { display: block; }
.dh-rg-figure img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #ececec;
    background: #f7f7f5;
}
.dh-rg-figure figcaption {
    margin-top: .55rem;
    font-size: .85rem;
    line-height: 1.45;
    color: #6b6b6b;
}

/* Produkt-Grid */
.dh-rg-products { margin: 1.4rem 0 2rem; }
.dh-rg-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}
.dh-rg-product {
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e7ec;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.dh-rg-product:hover,
.dh-rg-product:focus-visible { border-color: var(--brand-primary, var(--brand-primary)); }
.dh-rg-product__img {
    display: block;
    background: #f7f7f5;
    aspect-ratio: 1 / 1;
}
.dh-rg-product__img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: .5rem;
}
.dh-rg-product__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .7rem .8rem .8rem;
    flex: 1;
}
.dh-rg-product__name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dh-rg-product:hover .dh-rg-product__name { color: var(--brand-primary, var(--brand-primary)); }
.dh-rg-product__meta {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}
.dh-rg-product__price {
    font-weight: 700;
    font-size: 1rem;
    color: var(--brand-primary, var(--brand-primary));
}
.dh-rg-product__cta {
    font-size: .82rem;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}
.dh-rg-product:hover .dh-rg-product__cta { color: var(--brand-primary, var(--brand-primary)); }

@media (min-width: 768px) {
    .dh-rg-products__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
}
@media (max-width: 600px) {
    .dh-rg-figure,
    .dh-rg-figure--wide { max-width: 100%; }
}

/* 34. OPC/CMS-SEITEN — Modern Premium Corporate Design (.dh-cms-*), MOBILE-FIRST
   Wiederverwendbares Muster für ALLE CMS-/OPC-Seiten. Warm, luftig, weiche Radien,
   Icon-Kacheln (SVG, kein Emoji), dunkles Trust-Band, Spec-Listen, dezente Motion.
   Marken-Tokens (Manrope/IBM Plex Sans, var(--brand-primary) Rot, var(--brand-accent) Gold, #020713 Navy). */
.dh-cms-page {
    --cms-ink: var(--color-text, #16181d); --cms-muted: #5b6572; --cms-line: #ece7e1;
    --cms-gold: var(--brand-accent, var(--brand-accent)); --cms-red: var(--brand-primary, var(--brand-primary));
    --cms-navy: var(--brand-topbar-bg, #020713); --cms-tint: var(--brand-tint-soft, rgba(var(--brand-primary-rgb),.08));
    --r: 16px;
    max-width: 1080px; margin: 0 auto; padding: 2px 16px 52px; color: var(--cms-ink);
    font-family: var(--font-body); font-size: 1.04rem; line-height: 1.7;
}
.dh-cms-page h1, .dh-cms-page h2, .dh-cms-page h3 { font-family: var(--font-display); color: var(--cms-ink); letter-spacing: -.015em; }
.dh-cms-page a { color: var(--cms-red); }
.dh-cms-page svg { flex: none; }

.dh-cms-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cms-red); }
.dh-cms-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--cms-gold); }

.dh-cms-hero { padding: 6px 0 4px; }
.dh-cms-hero h1 { margin: .65rem 0 .5rem; font-size: clamp(2.1rem, 7vw, 3.1rem); line-height: 1.04; font-weight: 800; }
.dh-cms-lead { margin: 0; max-width: 60ch; font-size: 1.1rem; color: var(--cms-muted); }

/* Trust-Band (dunkel, gerundet) */
.dh-cms-trust { display: grid; grid-template-columns: 1fr; background: var(--cms-navy); border-radius: var(--r); overflow: hidden; margin: 1.6rem 0 0; }
.dh-cms-trust__item { display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; color: #fff; border-top: 1px solid rgba(255,255,255,.09); }
.dh-cms-trust__item:first-child { border-top: 0; }
.dh-cms-trust__ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.07); color: var(--cms-gold); }
.dh-cms-trust__ico svg { width: 23px; height: 23px; }
.dh-cms-trust__t { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.dh-cms-trust__s { display: block; font-size: .83rem; color: rgba(255,255,255,.62); font-weight: 400; }

/* Sektion */
.dh-cms-section { margin-top: 2.6rem; }
.dh-cms-section__head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.1rem; }
.dh-cms-section__num { font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: #956d34; letter-spacing: .06em; } /* tieferes Gold: WCAG-AA auf Weiss (4.65) statt 2.6 */
.dh-cms-section h2 { margin: 0; font-size: clamp(1.55rem, 5vw, 2rem); font-weight: 800; }

/* Karten-Grid (mobile-first: 1 Spalte) */
.dh-cms-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dh-cms-card { background: #fff; border: 1px solid var(--cms-line); border-radius: var(--r); padding: 1.4rem 1.45rem; transition: border-color .2s ease, box-shadow .2s ease; }
.dh-cms-card:hover, .dh-cms-card:focus-within { border-color: var(--cms-gold); box-shadow: 0 6px 22px rgba(20,24,29,.05); }
.dh-cms-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--cms-tint); color: var(--cms-red); margin-bottom: .9rem; }
.dh-cms-ic svg { width: 24px; height: 24px; }
.dh-cms-card h3 { margin: 0 0 .5rem; font-size: 1.18rem; font-weight: 800; }
.dh-cms-card p { margin: 0 0 .6rem; } .dh-cms-card p:last-child { margin: 0; }
.dh-cms-card ul { margin: .3rem 0 0; padding-left: 1.15rem; } .dh-cms-card li { margin-bottom: .35rem; }

/* Spec-Liste */
.dh-cms-spec { margin: .3rem 0 0; }
.dh-cms-spec > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--cms-line); }
.dh-cms-spec > div:last-child { border-bottom: 0; }
.dh-cms-spec dt { margin: 0; color: var(--cms-muted); font-size: .96rem; }
.dh-cms-spec dd { margin: 0; font-weight: 700; font-family: var(--font-display); text-align: right; }
.dh-cms-note { margin: .75rem 0 0; padding: .6rem .85rem; background: var(--cms-tint); border-radius: 10px; font-size: .92rem; }

/* Selbstabholung + CTA */
.dh-cms-address { margin: .6rem 0 0; font-style: normal; line-height: 1.6; }
.dh-cms-address strong { display: block; font-family: var(--font-display); }
/* color !important + -webkit-text-fill-color: schlägt die Theme-Regel
   `header a:not(.dropdown-item):not(.btn){color:#525252}` (0,2,2), die sonst
   den CTA-Text grau färbt, sobald der Button in einem <header>-Hero liegt. */
.dh-cms-page a.dh-cms-cta { display: inline-flex; align-items: center; gap: .55rem; margin-top: .7rem; padding: .85rem 1.5rem; background: var(--cms-red); color: #fff !important; -webkit-text-fill-color: #fff; border-radius: 12px; font-family: var(--font-display); font-weight: 700; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.dh-cms-page a.dh-cms-cta:hover, .dh-cms-page a.dh-cms-cta:focus { background: var(--brand-primary-dark, var(--brand-primary-dark)); color: #fff !important; -webkit-text-fill-color: #fff; transform: translateY(-1px); }
.dh-cms-cta svg { width: 18px; height: 18px; }

/* Schritte */
.dh-cms-steps { list-style: none; counter-reset: dhc; margin: 0; padding: 0; display: grid; gap: 14px; }
.dh-cms-steps > li { counter-increment: dhc; display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; background: #fff; border: 1px solid var(--cms-line); border-radius: var(--r); padding: 1.3rem 1.4rem; }
.dh-cms-steps > li::before { content: counter(dhc, decimal-leading-zero); width: 46px; height: 46px; border-radius: 13px; background: var(--cms-red); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1rem; display: grid; place-items: center; }
.dh-cms-steps h3 { margin: 0 0 .35rem; font-size: 1.12rem; font-weight: 800; }
.dh-cms-steps p, .dh-cms-steps ul { margin: 0; } .dh-cms-steps ul { padding-left: 1.15rem; margin-top: .3rem; } .dh-cms-steps li li { margin-bottom: .3rem; }

.dh-cms-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--cms-line); font-size: .92rem; color: var(--cms-muted); }

/* Tablet/Desktop */
@media (min-width: 760px) {
    .dh-cms-trust { grid-template-columns: repeat(3, 1fr); }
    .dh-cms-trust__item { border-top: 0; border-left: 1px solid rgba(255,255,255,.09); }
    .dh-cms-trust__item:first-child { border-left: 0; }
    .dh-cms-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .dh-cms-grid--2 { grid-template-columns: 1.5fr 1fr; }
}

/* Dezente Motion beim Laden */
@media (prefers-reduced-motion: no-preference) {
    .dh-cms-card, .dh-cms-steps > li { animation: dhcUp .5s ease both; }
    .dh-cms-grid > *:nth-child(2) { animation-delay: .06s; }
    .dh-cms-grid > *:nth-child(3) { animation-delay: .12s; }
    @keyframes dhcUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* 35. HILFE & KONTAKT — Self-Service-Hilfecenter v2 (.dh-help-*), baut auf §34 auf.
   Chat-Composer (Anliegen wie Nachricht) -> Live-FAQ direkt darunter -> Gate -> Vynform.
   Kleine, dezente Google-Sterne (kein öffentlicher Link). Mobile-first. */
.dh-help-page .dh-cms-hero { text-align: center; }
.dh-help-page .dh-cms-hero .dh-cms-eyebrow { justify-content: center; }
.dh-help-page .dh-cms-lead { margin-left: auto; margin-right: auto; }

/* Kleine Sterne-Zeile (dezent) — seit 17.08.2026 ein Link auf das Google-Profil */
.dh-help-rating { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; margin: .8rem auto 0; font-size: .9rem; color: var(--cms-muted); }
.dh-help-rating b { color: var(--cms-ink); font-family: var(--font-display); }
/* Klickdaten 17.08.: die Zeile wurde in einer Sitzung 4x angeklickt, war aber
   kein Link. Jetzt fuehrt sie zum Google-Profil — erkennbar als Link, ohne die
   ruhige Optik zu sprengen (Unterstreichung erst beim Hover). */
.dh-help-rating__link { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.dh-help-rating__link:hover { color: var(--cms-ink); text-decoration: underline; text-underline-offset: 3px; }
.dh-help-rating__link:focus-visible { outline: 2px solid var(--cms-red); outline-offset: 3px; border-radius: 6px; }
.dh-help-stars { position: relative; display: inline-block; font-size: 1rem; letter-spacing: 1px; line-height: 1; font-family: Arial, sans-serif; }
.dh-help-stars::before { content: "★★★★★"; color: var(--cms-line); }
.dh-help-stars::after { content: "★★★★★"; color: #f5b301; position: absolute; left: 0; top: 0; width: var(--p, 84%); overflow: hidden; white-space: nowrap; }

/* Chat-Composer */
.dh-help-composer { display: flex; align-items: flex-end; gap: .5rem; max-width: 680px; margin: 1.5rem auto .3rem; background: #fff; border: 1.5px solid var(--cms-line); border-radius: 18px; padding: .45rem .45rem .45rem 1.15rem; transition: border-color .18s ease, box-shadow .18s ease; }
.dh-help-composer:focus-within { border-color: var(--cms-red); box-shadow: 0 10px 30px rgba(20,24,29,.08); }
.dh-help-composer__input { flex: 1; border: 0 !important; outline: none !important; box-shadow: none !important; resize: none; background: none; font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; color: var(--cms-ink); padding: .6rem 0; min-height: 2.75rem; max-height: 140px; overflow-y: hidden; }
.dh-help-page .dh-help-composer__input:focus,
.dh-help-page .dh-help-composer__input:focus-visible { border: 0 !important; outline: none !important; box-shadow: none !important; }
.dh-help-composer__send { flex: none; width: 46px; height: 46px; border: 0; border-radius: 13px; background: var(--cms-red); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.dh-help-composer__send:hover { background: var(--brand-primary-dark, var(--brand-primary-dark)); transform: translateY(-1px); }
.dh-help-composer__send svg { width: 20px; height: 20px; }
.dh-help-hint { min-height: 1.1rem; text-align: center; font-size: .86rem; color: var(--cms-muted); margin: .1rem 0 1.4rem; }

/* FAQ */
.dh-faq-cat { margin: 1.8rem 0 0; }
.dh-faq-cat__title { display: flex; align-items: center; gap: .55rem; margin: 0 0 .7rem; font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; color: var(--cms-ink); }
.dh-faq-cat__title span { font-size: .78rem; font-weight: 700; color: var(--cms-gold); }
.dh-faq { border: 1px solid var(--cms-line); border-radius: 12px; background: #fff; margin: 8px 0; overflow: hidden; }
.dh-faq.is-open { border-color: var(--cms-gold); }
.dh-faq__q { width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; background: none; border: 0; cursor: pointer; text-align: left; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--cms-ink); }
.dh-faq__q:hover { background: #fbfaf9; }
.dh-faq__q:focus-visible { outline: 2px solid var(--cms-red); outline-offset: -3px; border-radius: 12px; }
.dh-faq__ico { width: 18px; height: 18px; flex: none; color: var(--cms-muted); transition: transform .2s ease; }
.dh-faq.is-open .dh-faq__ico { transform: rotate(180deg); color: var(--cms-red); }
.dh-faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.dh-faq__a > div { overflow: hidden; }
.dh-faq.is-open .dh-faq__a { grid-template-rows: 1fr; }
.dh-faq__a p { margin: 0 1.1rem 1rem; color: var(--cms-muted); line-height: 1.65; font-size: .96rem; }
.dh-faq__a a { color: var(--cms-red); }
.dh-faq.is-hidden, .dh-faq-cat.is-hidden { display: none; }
.dh-faq.is-hit { box-shadow: 0 0 0 3px var(--cms-tint); }

.dh-help-noresult { text-align: center; padding: 1.3rem; margin: 1.2rem 0; border: 1px dashed var(--cms-line); border-radius: 14px; color: var(--cms-muted); }

/* Gate — sauber & freundlich */
.dh-help-contact { max-width: 680px; margin: 2.6rem auto 0; }
.dh-help-contact__gate { text-align: center; padding: 1.8rem 1.4rem; border: 1px solid var(--cms-line); border-radius: 18px; background: #faf8f6; }
.dh-help-contact__gate h3 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--cms-ink); }
.dh-help-contact__gate p { margin: 0 0 1.1rem; color: var(--cms-muted); font-size: .96rem; }
.dh-help-contact__btn { display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.6rem; background: var(--cms-red); color: #fff; border: 0; border-radius: 13px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.dh-help-contact__btn:hover { background: var(--brand-primary-dark, var(--brand-primary-dark)); transform: translateY(-1px); }
.dh-help-contact__btn svg { width: 18px; height: 18px; }
.dh-help-form { margin: 1.6rem auto 0; }
.dh-help-form h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; margin: 0 0 1rem; text-align: center; }

/* 36. MONTAGE-/INSTALLATIONS-LANDINGPAGE NRW (.dh-mnt-*), baut auf §34 auf.
   Lokale Service-Landingpage: Heizkoerper-Montage + Bad/Wasser/Gas-Installation,
   E-Mail-Anfrage-Formular (mailto-Composer), Einsatzgebiet-Chips, native FAQ. */
.dh-mnt-hero .dh-cms-cta { margin-top: 1.15rem; }

/* Anfrage-Formular */
.dh-mnt-formwrap { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.dh-mnt-form { margin: 0; display: grid; gap: 14px; background: #fff; border: 1px solid var(--cms-line); border-radius: var(--r); padding: 1.5rem 1.5rem 1.6rem; }
.dh-mnt-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
.dh-mnt-field { display: flex; flex-direction: column; }
.dh-mnt-field label { font-family: var(--font-display); font-weight: 700; font-size: .86rem; margin-bottom: .4rem; color: var(--cms-ink); }
.dh-mnt-field .req { color: var(--cms-red); }
.dh-mnt-field input, .dh-mnt-field select, .dh-mnt-field textarea {
    width: 100%; box-sizing: border-box; padding: .8rem .95rem; border: 1.5px solid var(--cms-line);
    border-radius: 12px; font-family: var(--font-body); font-size: 1rem; color: var(--cms-ink);
    background: #fff; -webkit-appearance: none; appearance: none; }
.dh-mnt-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6572' stroke-width='2.4' 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 .95rem center; background-size: 12px; padding-right: 2.4rem; }
.dh-mnt-field input:focus, .dh-mnt-field select:focus, .dh-mnt-field textarea:focus {
    outline: none; border-color: var(--cms-red); box-shadow: 0 0 0 3px var(--cms-tint); }
.dh-mnt-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.dh-mnt-submit { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; margin-top: .1rem;
    padding: .95rem 1.5rem; background: var(--cms-red); color: #fff; border: 0; border-radius: 12px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; cursor: pointer;
    transition: background .2s ease, transform .2s ease; }
.dh-mnt-submit:hover, .dh-mnt-submit:focus { background: var(--brand-primary-dark, var(--brand-primary-dark)); transform: translateY(-1px); }
.dh-mnt-submit svg { width: 18px; height: 18px; }
.dh-mnt-formnote { margin: .15rem 0 0; font-size: .84rem; color: var(--cms-muted); line-height: 1.5; }
.dh-mnt-sent { margin: .2rem 0 0; padding: .75rem .9rem; background: var(--cms-tint); border-radius: 10px; font-size: .92rem; color: var(--cms-ink); }
.dh-mnt-alt { margin: .9rem 0 0; font-size: .95rem; color: rgba(255,255,255,.72); }
.dh-mnt-aside { background: var(--cms-navy); color: #fff; border-radius: var(--r); padding: 1.5rem 1.5rem 1.6rem; }
/* Aside liegt auf Navy -> Überschrift/Link müssen die Theme-Farben (dunkle
   Heading-Farbe var(--color-text, #111827), rotes .dh-cms-page a) mit !important überstimmen. */
.dh-mnt-aside h3 { color: #fff !important; -webkit-text-fill-color: #fff; margin: 0 0 .8rem; font-size: 1.12rem; font-weight: 800; }
.dh-mnt-aside a { color: var(--cms-gold) !important; -webkit-text-fill-color: var(--cms-gold); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.dh-mnt-aside a:hover, .dh-mnt-aside a:focus { color: #e4c79f !important; -webkit-text-fill-color: #e4c79f; }
.dh-mnt-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.dh-mnt-aside li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: start; font-size: .96rem; color: rgba(255,255,255,.82); line-height: 1.45; }
.dh-mnt-aside li svg { width: 20px; height: 20px; color: var(--cms-gold); margin-top: .12rem; }

/* Einsatzgebiet-Chips */
.dh-mnt-regions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.dh-mnt-regions span { padding: .42rem .9rem; border: 1px solid var(--cms-line); border-radius: 999px; font-size: .9rem; color: var(--cms-muted); background: #fff; }

/* FAQ — native <details>, kein JS */
.dh-mnt-faq { display: grid; gap: 10px; margin-top: .3rem; }
.dh-mnt-faq details { background: #fff; border: 1px solid var(--cms-line); border-radius: 14px; padding: 0 1.2rem; transition: border-color .2s ease; }
.dh-mnt-faq details[open] { border-color: var(--cms-gold); }
.dh-mnt-faq summary { list-style: none; cursor: pointer; padding: 1.05rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--cms-ink); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.dh-mnt-faq summary::-webkit-details-marker { display: none; }
.dh-mnt-faq summary::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--cms-red); border-bottom: 2px solid var(--cms-red); transform: rotate(45deg); transition: transform .2s ease; flex: none; margin-right: .25rem; }
.dh-mnt-faq details[open] summary::after { transform: rotate(-135deg); }
.dh-mnt-faq details > p { margin: -.15rem 0 1.15rem; color: var(--cms-muted); line-height: 1.65; }

@media (min-width: 620px) { .dh-mnt-row--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { .dh-mnt-formwrap { grid-template-columns: 1.4fr 1fr; gap: 24px; } }

/* 37. WIR ÜBER UNS — Landingpage mit echten Fotos (.dh-about-*), baut auf §34 auf.
   Portrait-Fotos (EXIF-orientiert) in gerundeten Frames via object-fit:cover;
   Hero-Split, alternierende Bild/Text-Reihen, Team-Block, Foto-Galerie. */
.dh-about-figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--cms-tint); border: 1px solid var(--cms-line); }
.dh-about-figure img { display: block; width: 100%; height: 100%; object-fit: cover; image-orientation: from-image; }
.dh-about-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.2rem .95rem; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: .95rem; line-height: 1.3; background: linear-gradient(to top, rgba(2,7,19,.78), rgba(2,7,19,0)); }
.dh-about-cap span { display: block; font-family: var(--font-body); font-weight: 400; font-size: .82rem; color: rgba(255,255,255,.8); margin-top: .15rem; }

/* Hero-Split (Text + Bild) */
.dh-about-hero { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; padding-top: 4px; }
.dh-about-hero__media { aspect-ratio: 3 / 2; }
@media (min-width: 880px) {
    .dh-about-hero { grid-template-columns: 1.02fr .98fr; gap: 44px; }
    .dh-about-hero__media { aspect-ratio: 4 / 5; box-shadow: 0 30px 64px rgba(20,24,29,.16); }
}

/* Alternierende Bild/Text-Reihen */
.dh-about-split { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
.dh-about-split__media { aspect-ratio: 3 / 2; }
.dh-about-split__body h2 { margin: 0 0 .5rem; }
@media (min-width: 840px) {
    .dh-about-split { grid-template-columns: 1fr 1fr; gap: 44px; }
    .dh-about-split__media { aspect-ratio: 4 / 5; }
    .dh-about-split--rev .dh-about-split__media { order: 2; }
}

/* Werte-Karten mit Zahl */
.dh-about-values { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .dh-about-values { grid-template-columns: repeat(3, 1fr); } }

/* Foto-Galerie */
.dh-about-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dh-about-gallery .dh-about-figure { aspect-ratio: 3 / 4; }
@media (min-width: 760px) { .dh-about-gallery { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Abschluss-CTA-Band (dunkel) */
.dh-about-final { margin-top: 2.8rem; background: var(--cms-navy); border-radius: var(--r); padding: 2.2rem 1.6rem; text-align: center; color: #fff; }
.dh-about-final h2 { color: #fff !important; -webkit-text-fill-color: #fff; margin: 0 0 .5rem; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; }
.dh-about-final p { max-width: 54ch; margin: 0 auto 1.3rem; color: rgba(255,255,255,.8); }
.dh-about-final__cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.dh-about-page a.dh-about-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 12px; font-family: var(--font-display); font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.dh-about-page a.dh-about-btn--primary { background: var(--cms-red); color: #fff !important; -webkit-text-fill-color: #fff; }
.dh-about-page a.dh-about-btn--primary:hover { background: var(--brand-primary-dark, var(--brand-primary-dark)); transform: translateY(-1px); }
.dh-about-page a.dh-about-btn--ghost { background: rgba(255,255,255,.08); color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,.22); }
.dh-about-page a.dh-about-btn--ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }
.dh-about-page a.dh-about-btn svg { width: 18px; height: 18px; flex: none; } /* sonst rendert das inline-SVG in Default-Größe = Riesen-Pfeil */

/* 38. BESTPREISGARANTIE (.dh-bpg-page) — nutzt §34 (Hero/Trust/Cards/Steps),
   §36 (Formular .dh-mnt-*, FAQ) und §37 (.dh-about-final). Neu nur: CTA-Band-
   Buttons unter .dh-bpg-page + Bedingungen-Checkliste. */
.dh-bpg-page a.dh-about-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 12px; font-family: var(--font-display); font-weight: 700; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.dh-bpg-page a.dh-about-btn svg { width: 18px; height: 18px; flex: none; }
.dh-bpg-page a.dh-about-btn--primary { background: var(--cms-red); color: #fff !important; -webkit-text-fill-color: #fff; }
.dh-bpg-page a.dh-about-btn--primary:hover { background: var(--brand-primary-dark, var(--brand-primary-dark)); transform: translateY(-1px); }
.dh-bpg-page a.dh-about-btn--ghost { background: rgba(255,255,255,.08); color: #fff !important; -webkit-text-fill-color: #fff; border: 1px solid rgba(255,255,255,.22); }
.dh-bpg-page a.dh-about-btn--ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-1px); }

/* Bedingungen-Checkliste (grün = gilt, gedämpft = ausgeschlossen) */
.dh-bpg-check { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: 12px; }
.dh-bpg-check li { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; background: #fff; border: 1px solid var(--cms-line); border-radius: 12px; padding: .95rem 1.1rem; }
.dh-bpg-check li svg { width: 22px; height: 22px; margin-top: .1rem; color: var(--brand-success, #007665); flex: none; }
.dh-bpg-check li.is-excl { background: var(--cms-tint); border-color: transparent; }
.dh-bpg-check li.is-excl svg { color: var(--cms-muted); }
.dh-bpg-check strong { font-family: var(--font-display); }

/* 39. RATGEBER / BLOG-ÜBERSICHT (.dh-rt-*) — Karten-Redesign + Übersicht-Politur.
   Nutzt Marken-Tokens mit Fallbacks (Seite hat KEINEN .dh-cms-page-Wrapper). */
/* Richtung B — Minimal / Zeilen-Index. Volle Breite, feine Haarlinien, kleines
   Thumbnail links, Gold-Label, ganze Zeile klickbar via Titel-::after. */
.dh-rt-row { position: relative; display: grid; grid-template-columns: 132px minmax(0,1fr) 28px; gap: clamp(20px,3.4vw,44px); align-items: start; padding: clamp(22px,3vw,30px) 0; border-top: 1px solid var(--cms-line, #ece7e1); transition: padding-left .3s cubic-bezier(.22,.61,.36,1); }
.dh-rt-row:first-child { border-top: 0; }
.dh-rt-row::before { content: ""; position: absolute; left: -4px; top: 0; bottom: -1px; width: 2px; background: var(--brand-primary, var(--brand-primary)); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.dh-rt-row:hover::before, .dh-rt-row:focus-within::before { transform: scaleY(1); }
.dh-rt-row:hover, .dh-rt-row:focus-within { padding-left: 14px; }
.dh-rt-row__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--brand-tint-soft, #f6efe9); border-radius: 3px; }
.dh-rt-row__media picture { display: block; width: 100%; height: 100%; }
.dh-rt-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.dh-rt-row:hover .dh-rt-row__media img { transform: scale(1.05); }
.dh-rt-row__body { min-width: 0; padding-top: 2px; }
.dh-rt-row__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 11px; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #956d34; } /* tieferes Gold = WCAG-AA (4.65) auf Weiss */
.dh-rt-row__meta time { color: inherit; }
.dh-rt-row__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--cms-line, #d8cfc6); flex: none; }
.dh-rt-row__title { margin: 0 0 9px; font-family: var(--font-display, 'Manrope', sans-serif); font-size: clamp(18px,2vw,23px); line-height: 1.28; font-weight: 700; letter-spacing: -.012em; color: var(--cms-ink, var(--color-text, #16181d)); }
.dh-rt-row__title a { color: inherit; text-decoration: none; }
.dh-rt-row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ganze Zeile klickbar */
.dh-rt-row:hover .dh-rt-row__title a { color: var(--brand-primary, var(--brand-primary)); }
.dh-rt-row__exc { margin: 0; font-size: 15px; line-height: 1.62; color: var(--cms-muted, #5b6572); max-width: 64ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dh-rt-row__arrow { align-self: center; justify-self: end; color: var(--cms-muted, #5b6572); transition: transform .35s cubic-bezier(.22,.61,.36,1), color .25s ease; }
.dh-rt-row:hover .dh-rt-row__arrow { color: var(--brand-primary, var(--brand-primary)); transform: translateX(5px); }
.dh-rt-row__arrow svg { display: block; width: 22px; height: 22px; }
@media (max-width: 640px) {
    .dh-rt-row { grid-template-columns: 92px minmax(0,1fr); gap: 16px; padding: 20px 0; }
    .dh-rt-row__arrow { display: none; }
    .dh-rt-row:hover, .dh-rt-row:focus-within { padding-left: 10px; }
    .dh-rt-row__media { aspect-ratio: 1 / 1; }
    .dh-rt-row__title { font-size: 17px; }
    .dh-rt-row__exc { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
    .dh-rt-row, .dh-rt-row::before, .dh-rt-row__media img, .dh-rt-row__title a, .dh-rt-row__arrow { transition: none; }
}

/* Übersicht-Layout: Zeilen-Liste über volle Breite (kein 3-Spalten-Grid) */
.blog-overview .blog-overview-preview { row-gap: 0; }
.blog-overview .blog-overview-preview-item { flex: 0 0 100%; max-width: 100%; display: block; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; background: transparent !important; } /* Theme-Karten-Box entfernen -> reine Zeilen-Liste */
.blog-overview-hr { border-color: var(--cms-line, #ece7e1); opacity: 1; margin: 1.1rem 0 1.8rem; }
/* Filter-Selects im Marken-Look */
#frm_filter .custom-select, #frm_filter select.custom-select {
    border: 1.5px solid var(--cms-line, #ece7e1) !important; border-radius: 12px !important;
    font-family: var(--font-body, sans-serif) !important; color: var(--cms-ink, var(--color-text, #16181d)) !important;
    height: auto !important; padding: .72rem 2.2rem .72rem 1rem !important; background-color: #fff !important; }
#frm_filter .custom-select:focus { border-color: var(--brand-primary, var(--brand-primary)) !important; box-shadow: 0 0 0 3px var(--brand-tint-soft, rgba(var(--brand-primary-rgb),.08)) !important; }
/* Pagination Marken-Akzent */
.blog-overview .pagination .page-item.active .page-link,
.blog-overview .pagination .page-link.active { background: var(--brand-primary, var(--brand-primary)) !important; border-color: var(--brand-primary, var(--brand-primary)) !important; color: #fff !important; }
.blog-overview .pagination .page-link { color: var(--cms-ink, var(--color-text, #16181d)); border-radius: 10px; }
/* SEO-Intro (kommt aus dem Link-Content) */
.dh-rt-intro { max-width: 72ch; margin: .2rem 0 .4rem; color: var(--cms-muted, #5b6572); font-size: 1.06rem; line-height: 1.7; }
.dh-rt-intro a { color: var(--brand-primary, var(--brand-primary)); font-weight: 600; }
/* Artikel-Byline (E-E-A-T): sichtbare Redaktion + Datum + Ratgeber-Link, ruhig gehalten */
.dh-rt-byline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--cms-muted, #5b6572); font-size: 13.5px; }
.dh-rt-byline__author { display: inline-flex; align-items: center; gap: 6px; }
.dh-rt-byline__author svg { width: 15px; height: 15px; flex: none; color: #956d34; }
.dh-rt-byline__sep { color: var(--cms-line, #d8cfc6); }
.dh-rt-byline__date { color: inherit; }
.dh-rt-byline__section { color: #956d34; font-weight: 600; text-decoration: none; }
.dh-rt-byline__section:hover { color: var(--brand-primary, var(--brand-primary)); }


/* ============================================================
 * §40 RATGEBER-THEMEN-INDEX (.dh-rt-hub) — 02.08.2026
 *    Liegt unter der paginierten Artikel-Liste auf Seite 1 und
 *    verlinkt ALLE aktiven Ratgeber direkt (die Paginierung
 *    kanonisiert Seite 2-5 weg -> 32 Artikel waren fuer Google
 *    ohne Hub-Link). Ruhige Liste statt Kachel-Wand: der Index
 *    ist ein Navigations-, kein Werbeelement.
 * ============================================================ */
.dh-rt-hub {
  margin: 44px 0 8px;
  padding-top: 28px;
  border-top: 1px solid #e6e3df;
}
.dh-rt-hub__title {
  /* Das Theme setzt "h2, .h2 { font-size: 24px !important }" (h3 analog).
     Eigenschaften, die man selbst nicht deklariert, kann man nicht
     ueberschreiben — deshalb hier bewusst ebenfalls !important. */
  font-size: 21px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.dh-rt-hub__lead {
  color: #63686e;
  font-size: 14px;
  margin: 0 0 18px;
}

/* Sprungnavigation */
.dh-rt-hub__jump {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
}
.dh-rt-hub__jump a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid #e2dfdb;
  border-radius: 999px;
  font-size: 13px;
  color: #34383d;
  text-decoration: none;
  background: #fff;
  transition: border-color 140ms ease, color 140ms ease;
}
.dh-rt-hub__jump a:hover,
.dh-rt-hub__jump a:focus-visible {
  border-color: var(--brand-primary, var(--brand-primary));
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: none;
}

/* Cluster */
.dh-rt-hub__cluster { margin: 0 0 30px; scroll-margin-top: 96px; }
.dh-rt-hub__h {
  font-size: 16px !important;
  font-weight: 700;
  margin: 0 0 2px;
  padding-left: 11px;
  border-left: 3px solid var(--brand-primary, var(--brand-primary));
  line-height: 1.3;
}
.dh-rt-hub__claim {
  color: #63686e;
  font-size: 13.5px;
  margin: 0 0 10px;
  padding-left: 14px;
}

/* Artikel-Liste: zweispaltig ab Tablet, ruhige Zeilen */
.dh-rt-hub__list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  columns: 1;
}
@media (min-width: 768px) { .dh-rt-hub__list { columns: 2; column-gap: 34px; } }
.dh-rt-hub__item {
  break-inside: avoid;
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.45;
}
.dh-rt-hub__item a {
  /* inline-block + Innenabstand: einzeilige Titel waren 19px hoch und lagen
     damit unter der WCAG-2.5.8-AA-Grenze von 24px. Der Aussenabstand des
     Eintrags wurde im Gegenzug von 7 auf 4px reduziert -> gleicher Rhythmus. */
  display: inline-block;
  padding: 3px 0;
  color: #26292d;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.dh-rt-hub__item a:hover,
.dh-rt-hub__item a:focus-visible {
  color: var(--brand-primary, var(--brand-primary));
  border-bottom-color: currentColor;
  text-decoration: none;
}
.dh-rt-hub__item.is-hub a { font-weight: 600; }
.dh-rt-hub__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #f3efe9;
  color: #7a5a1e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  vertical-align: 1px;
}

/* Cluster-Abschluss: Weg in den Shop */
.dh-rt-hub__shop {
  margin: 0 0 0 14px;
  padding-top: 4px;
  font-size: 13px;
  color: #63686e;
}
.dh-rt-hub__shop-lbl { color: #8a8f95; margin-right: 4px; }
.dh-rt-hub__shop a {
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: none;
  font-weight: 600;
}
.dh-rt-hub__shop a:hover,
.dh-rt-hub__shop a:focus-visible { text-decoration: underline; }

@media (max-width: 575.98px) {
  .dh-rt-hub { margin-top: 32px; padding-top: 22px; }
  .dh-rt-hub__title { font-size: 19px !important; }
  .dh-rt-hub__jump { margin-bottom: 20px; }
}

/* ============================================================
 * §41 KURATIERTE QUERVERWEISE — 02.08.2026
 *    (a) .dh-rt-more  Weiterlesen-Kasten am Ende eines Ratgebers
 *    (b) .dh-kat-rt   Ratgeber-Teaser unter der Produktliste
 *    Messung vom 02.08.: nur 114 interne Links im Fliesstext
 *    aller 42 Artikel, 10 Artikel ganz ohne; 17 von 23
 *    Kategorien verlinkten keinen einzigen Ratgeber.
 *    Gleiche ruhige Sprache wie §40 — Textlisten, keine Kacheln,
 *    kein Rahmen, keine Farbflaeche.
 * ============================================================ */

/* (a) Weiterlesen am Artikelende ---------------------------- */
.dh-rt-more {
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid #e6e3df;
}
.dh-rt-more__title {
  font-size: 18px !important;   /* s. Hinweis bei .dh-rt-hub__title */
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.dh-rt-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dh-rt-more__item {
  margin: 0 0 13px;
  padding-left: 11px;
  border-left: 3px solid #ece8e3;
  line-height: 1.45;
}
.dh-rt-more__item:last-child { margin-bottom: 0; }
.dh-rt-more__link {
  display: block;
  padding: 2px 0;          /* 21.8px Zeilenhoehe -> 25.8px: WCAG 2.5.8 AA */
  font-size: 15px;
  font-weight: 600;
  color: #26292d;
  text-decoration: none;
}
.dh-rt-more__link:hover,
.dh-rt-more__link:focus-visible {
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: underline;
}
.dh-rt-more__why {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  color: #63686e;
}

.dh-rt-more__shop {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: #63686e;
}
.dh-rt-more__shop-lbl { color: #8a8f95; margin-right: 4px; }
.dh-rt-more__shop a {
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: none;
  font-weight: 600;
}
.dh-rt-more__shop a:hover,
.dh-rt-more__shop a:focus-visible { text-decoration: underline; }

/* (b) Ratgeber-Teaser unter der Produktliste ---------------- */
.dh-kat-rt {
  margin: 34px 0 4px;
  padding-top: 24px;
  border-top: 1px solid #e6e3df;
}
.dh-kat-rt__title {
  font-size: 18px !important;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.dh-kat-rt__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}
@media (min-width: 768px) {
  .dh-kat-rt__list { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
.dh-kat-rt__item {
  padding-left: 11px;
  border-left: 3px solid #ece8e3;
  line-height: 1.45;
}
.dh-kat-rt__link {
  display: block;
  padding: 2px 0;          /* s. .dh-rt-more__link */
  font-size: 15px;
  font-weight: 600;
  color: #26292d;
  text-decoration: none;
}
.dh-kat-rt__link:hover,
.dh-kat-rt__link:focus-visible {
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: underline;
}
.dh-kat-rt__why {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  color: #63686e;
}
.dh-kat-rt__all { margin: 16px 0 0; font-size: 13.5px; }
.dh-kat-rt__all a {
  color: var(--brand-primary, var(--brand-primary));
  text-decoration: none;
  font-weight: 600;
}
.dh-kat-rt__all a:hover,
.dh-kat-rt__all a:focus-visible { text-decoration: underline; }

@media (max-width: 575.98px) {
  .dh-rt-more { margin-top: 30px; padding-top: 20px; }
  .dh-kat-rt  { margin-top: 26px; padding-top: 20px; }
  .dh-rt-more__title, .dh-kat-rt__title { font-size: 17px !important; }
}

/* ===========================================================================
   B2B-Seite: wiederholbare Handlungsaufforderung, Partnerstufen-Tabelle,
   Kennzahlen und die fehlenden Formularbausteine.
   ANLASS 24.08.2026: Die Seite hatte auf 1.539 Woertern genau ZWEI
   CTA-Elemente — beide Sprungmarken zum Formular ganz unten — und 11
   Abschnitte mit 22 Zwischenueberschriften. Wer nach Abschnitt 3 ueberzeugt
   ist, findet keinen Weg zum Handeln.
   Es bleibt bei EINER primaeren CTA-Hierarchie (Gewerbekonto anfragen); das
   Band wiederholt sie nur an den Stellen, an denen die Entscheidung faellt.
   Die drei dh-mnt-Bausteine gehoeren zum Formular-Umbau vom 24.08. und hatten
   bis jetzt keinen Stil.
   ======================================================================== */

/* --- wiederholbares CTA-Band ------------------------------------------- */
.dh-cms-page .dh-cms-ctaband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  margin: 30px 0;
  padding: 22px 26px;
  border: 1px solid var(--cms-line, #e6e2dc);
  border-radius: 16px;
  background: var(--cms-tint, #faf8f5);
}
/* Steht das Band am Ende eines Abschnitts, addieren sich sein Aussenabstand und
   der des Abschnitts zu einer Luecke von rund 200 px (am 24.08. im Screenshot
   gemessen). Der Abschnitt bringt den Abstand schon mit. */
.dh-cms-page .dh-cms-section > .dh-cms-ctaband:last-child { margin-bottom: 0; }
.dh-cms-page .dh-cms-ctaband__txt {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
}
.dh-cms-page .dh-cms-ctaband__sub {
  display: block;
  margin-top: 3px;
  color: var(--cms-muted, #6b6560);
  font-family: inherit;
  font-size: .87rem;
  font-weight: 400;
}
.dh-cms-page .dh-cms-ctaband .dh-cms-cta { margin-top: 0; flex: 0 0 auto; }
.dh-cms-page .dh-cms-ctaband__alt {
  flex: 0 0 auto;
  color: var(--cms-muted, #6b6560);
  font-size: .87rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 575.98px) {
  .dh-cms-page .dh-cms-ctaband { padding: 18px; }
  /* Auf dem Handy soll der Knopf die volle Breite tragen — ein halbbreiter
     Knopf neben Text ist mit dem Daumen schlecht zu treffen. */
  .dh-cms-page .dh-cms-ctaband .dh-cms-cta { width: 100%; justify-content: center; }
}

/* --- Partnerstufen-Tabelle -------------------------------------------- */
.dh-cms-page .dh-cms-tablewrap { margin: 18px 0 6px; overflow-x: auto; }
.dh-cms-page .dh-cms-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: .95rem;
}
.dh-cms-page .dh-cms-table th,
.dh-cms-page .dh-cms-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cms-line, #e6e2dc);
  text-align: left;
  vertical-align: top;
}
.dh-cms-page .dh-cms-table thead th {
  border-bottom-width: 2px;
  font-family: var(--font-display);
  font-size: .88rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dh-cms-page .dh-cms-table tbody th {
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.dh-cms-page .dh-cms-table tbody tr:last-child th,
.dh-cms-page .dh-cms-table tbody tr:last-child td { border-bottom: 0; }

/* --- Kennzahlen-Zeile -------------------------------------------------- */
.dh-cms-page .dh-cms-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 20px 0 4px;
}
.dh-cms-page .dh-cms-facts__i {
  padding: 14px 16px;
  border: 1px solid var(--cms-line, #e6e2dc);
  border-radius: 14px;
  background: #fff;
}
.dh-cms-page .dh-cms-facts__n {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dh-cms-page .dh-cms-facts__l {
  display: block;
  margin-top: 3px;
  color: var(--cms-muted, #6b6560);
  font-size: .85rem;
  line-height: 1.3;
}

/* --- Formularbausteine (Umbau 24.08.) ---------------------------------- */
.dh-cms-page .dh-mnt-formgroup {
  margin: 22px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--cms-line, #e6e2dc);
  color: var(--cms-muted, #6b6560);
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.dh-cms-page .dh-mnt-form .dh-mnt-formgroup:first-child { margin-top: 0; }
.dh-cms-page .dh-mnt-opt {
  color: var(--cms-muted, #6b6560);
  font-size: .8em;
  font-weight: 400;
}
.dh-cms-page .dh-mnt-field--check { display: flex; align-items: center; }
.dh-cms-page .dh-mnt-field--check label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* Trefferflaeche: das ganze Label schaltet die Auswahl, nicht nur das
     14-px-Kaestchen (Touch-Ziel mindestens 44 px hoch). */
  min-height: 44px;
  margin: 0;
  padding: 8px 0;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}
.dh-cms-page .dh-mnt-field--check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  padding: 0;
  /* Die Basis-Feldregel (.dh-mnt-field input) setzt appearance:none plus
     Padding und 12px-Radius — fuer Textfelder richtig, fuer die Checkbox
     fatal: der Browser zeichnet dann NIE einen Haken, uebrig bleibt ein
     grosser leerer Kreis (Screenshot des Betreibers, 25.08.2026). Native
     Optik zurueckholen; accent-color faerbt den Haken markenrot. */
  -webkit-appearance: auto;
  appearance: auto;
  border-radius: 0;
  accent-color: var(--cms-red);
}
/* ============================================================================
   §40 KATEGORIE-ENGAGEMENT (Keyword-Map Runde 2): Watt-Rechner, Schnellauswahl-
   Chips, Betriebsarten-Vergleich, Google-Reviews-Band, Mini-TOC. Ruhig gehalten,
   nur Brand-Töne. JS: js/dh-cat-tools.js
   ========================================================================== */
/* Chips: EINE Zeile, mobil horizontal scrollbar (kein Umbruch, kein Label) */
.dh-quick-chips { display: flex; flex-wrap: nowrap; gap: 7px; margin: 10px 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.dh-quick-chips::-webkit-scrollbar { display: none; }
.dh-quick-chips__label { display: none; }
.dh-quick-chips a { flex: none; display: inline-flex; align-items: center; min-height: 33px; padding: 4px 13px; border: 1px solid var(--color-line, #d9dee7); border-radius: 999px; background: #fff; color: var(--color-text-muted, #374151) !important; font-size: 13px; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: border-color .15s ease, color .15s ease; }
.dh-quick-chips a:hover { border-color: var(--brand-primary, var(--brand-primary)); color: var(--brand-primary, var(--brand-primary)) !important; }
@media (min-width: 992px) { .dh-quick-chips { flex-wrap: wrap; overflow: visible; } }

/* Watt-Rechner: aufklappbare Ein-Zeilen-Leiste (details/summary, mobil zu, Desktop auto-offen via JS) */
.dh-watt-calc { margin: 8px 0 4px; padding: 0; border: 1px solid var(--color-line, #e5e7eb); border-radius: 10px; background: var(--color-surface-soft, #fafbfc); max-width: 640px; }
.dh-watt-calc summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 13px; cursor: pointer; list-style: none; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 14px; font-weight: 700; color: var(--color-text, #16181d); }
.dh-watt-calc summary::-webkit-details-marker { display: none; }
.dh-watt-calc summary svg { width: 16px; height: 16px; flex: none; color: var(--brand-primary, var(--brand-primary)); }
.dh-watt-calc__go { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--brand-primary, var(--brand-primary)); white-space: nowrap; }
.dh-watt-calc__go::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .18s ease; margin-top: -3px; }
.dh-watt-calc[open] .dh-watt-calc__go::after { transform: rotate(-135deg); margin-top: 3px; }
.dh-watt-calc__body { padding: 1px 13px 12px; }
.dh-watt-calc__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dh-watt-calc__qm { width: 92px; min-height: 42px; padding: 6px 10px; border: 1px solid var(--color-line, #d9dee7); border-radius: 8px; font-size: 15px; background: #fff; }
.dh-watt-calc__daemmung { min-height: 42px; padding: 6px 9px; border: 1px solid var(--color-line, #d9dee7); border-radius: 8px; font-size: 13.5px; background: #fff; max-width: 100%; }
.dh-watt-calc__qm:focus, .dh-watt-calc__daemmung:focus { outline: 2px solid rgba(var(--brand-primary-rgb), .35); outline-offset: 1px; }
.dh-watt-calc__result { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text, #16181d); }
.dh-watt-calc__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-soft, #8b93a1); }

.dh-compare-table { width: 100%; overflow-x: auto; margin: 14px 0; }
.dh-compare-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.dh-compare-table th, .dh-compare-table td { padding: 9px 12px; border: 1px solid var(--color-line, #e5e7eb); text-align: left; vertical-align: top; }
.dh-compare-table thead th { background: #f4f5f7; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 13.5px; }
.dh-compare-table td:first-child { font-weight: 600; color: var(--color-text-muted, #374151); background: var(--color-surface-soft, #fafbfc); }
.dh-compare-table a { color: var(--brand-primary, var(--brand-primary)); font-weight: 600; }

.dh-cat-toc { margin: 10px 0 2px; font-size: 13px; line-height: 1.9; color: var(--color-text-soft, #6b7280); }
/* Mobil: TOC ausblenden — 8 Sprungmarken = 3-4 Zeilen vor den Produkten */
@media (max-width: 991.98px) { .dh-cat-toc { display: none; } }
.dh-cat-toc__label { font-weight: 600; color: var(--color-text-soft, #8b93a1); }
.dh-cat-toc a { color: var(--color-text-muted, #374151) !important; text-decoration: none; border-bottom: 1px dotted #c2c8d0; }
.dh-cat-toc a:hover { color: var(--brand-primary, var(--brand-primary)) !important; border-bottom-color: currentColor; }
.dh-cat-toc__sep { margin: 0 7px; color: #d0d5dc; }

.dh-cat-reviews { margin: 26px 0 8px; padding: 18px 18px 14px; border: 1px solid var(--color-line, #e5e7eb); border-radius: 14px; background: #fff; }
.dh-cat-reviews__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.dh-cat-reviews__stars { color: #fbbc04; font-size: 15px; letter-spacing: 1px; }
.dh-cat-reviews__agg { font-size: 13.5px; color: var(--color-text-muted, #374151); }
.dh-cat-reviews__agg strong { font-family: var(--font-display, 'Manrope', sans-serif); }
.dh-cat-reviews__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.dh-cat-reviews__item { padding: 11px 13px; border: 1px solid var(--color-line, #eef0f3); border-radius: 10px; background: var(--color-surface-soft, #fafbfc); font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted, #374151); }
.dh-cat-reviews__meta { display: block; margin-top: 7px; font-size: 12px; color: var(--color-text-soft, #8b93a1); }
@media (max-width: 767.98px) { .dh-cat-reviews__grid { grid-template-columns: 1fr; } .dh-cat-reviews__item:nth-child(n+3) { display: none; } }

/* ============================================================================
   §41 SIDEBAR-VEREINHEITLICHUNG (User-Feedback): Kategorien- und Filter-Sidebar
   auf EINE Typo-Linie (Manrope-Headings, IBM-Plex-Items, Ink statt NOVA-Grau) +
   Desktop-Feinschliff Watt-Rechner (Toggle-Pill -> dezenter Chevron).
   ========================================================================== */
/* Filter-Headings (Merkmal-Boxen): Brand-Display statt btn-link-Grau */
.btn-filter-box.dropdown-toggle {
    display: flex !important; align-items: center; justify-content: space-between;
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 15px !important; font-weight: 700 !important;
    color: var(--color-text, #16181d) !important; text-decoration: none !important;
    padding: 13px 2px !important; text-align: left;
}
.btn-filter-box.dropdown-toggle:hover, .btn-filter-box.dropdown-toggle:focus { color: var(--brand-primary, var(--brand-primary)) !important; text-decoration: none !important; box-shadow: none !important; }
.btn-filter-box.dropdown-toggle::after { margin-left: auto; border-top-color: #9aa1ac; }
/* Filter-Items: IBM Plex Sans, Ink-Töne, ruhiger Hover */
.box-filter-characteristics .filter-item, .box-filter-characteristics .filter-item a,
.box-filter-pricerange .filter-item, .box-filter-pricerange .filter-item a,
.box-filter-availability .filter-item a, .box-filter-search .filter-item a {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif) !important;
    font-size: 14px !important; color: var(--color-text-muted, #374151) !important; text-decoration: none !important;
}
.box-filter-characteristics .filter-item a:hover, .box-filter-pricerange .filter-item a:hover { color: var(--brand-primary, var(--brand-primary)) !important; }
.box-filter-characteristics .filter-item { padding: 3px 0; }
.box-filter-hr { border-color: var(--color-line, #eef0f3) !important; margin: 2px 0 !important; }
/* Kategorien-Sidebar: gleiche Schriftfamilie wie Rest der Site (statt Montserrat) */
.categories-recursive-link, .snippets-categories-nav-link-child, .snippets-categories .nav-link {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif) !important;
}
.categories-recursive-link { font-weight: 600 !important; color: var(--color-text, #16181d) !important; }
.snippets-categories-nav-link-child { font-size: 14px !important; color: var(--color-text-muted, #374151) !important; }
.snippets-categories-nav-link-child:hover { color: var(--brand-primary, var(--brand-primary)) !important; }

/* Watt-Rechner Desktop: auto-offen -> Toggle-Text weg, nur dezenter Chevron */
@media (min-width: 992px) {
    .dh-watt-calc__go { font-size: 0; gap: 0; }
    .dh-watt-calc summary { font-size: 15px; }
    .dh-watt-calc__body { padding-bottom: 14px; }
}
/* TOC: ruhiger und kompakter */
.dh-cat-toc { font-size: 12.5px; line-height: 1.8; color: var(--color-text-soft, #8b93a1); }
.dh-cat-toc a { color: var(--color-text-muted, #4b5563) !important; }

/* ============================================================================
   §41b SICHTBARER FEINSCHLIFF (User-Feedback Runde 2):
   (1) Watt-Rechner Desktop = EINE schlanke Tool-Zeile (kein Accordion-Look):
       summary versteckt, Body-Titel + Felder + Ergebnis in einer Reihe.
   (2) Merkmal-Filter-Listen komplett durchgestylt (Checkbox-Zeilen, Zähler).
   ========================================================================== */
/* --- Rechner: Desktop-Einzeiler --- */
.dh-watt-calc__body-title { display: none; }
@media (min-width: 992px) {
    /* Box schmiegt sich an den Inhalt (kein leerer Vollbreiten-Balken); wächst mit dem Ergebnis */
    .dh-watt-calc { width: fit-content; max-width: 100%; background: #fff; border-radius: 14px; padding: 0 6px; }
    /* Leerzustand: Pill-Form — eine Linie mit den Chips darüber */
    .dh-watt-calc:has(.dh-watt-calc__result[hidden]) { border-radius: 999px; }
    .dh-watt-calc__qm, .dh-watt-calc__daemmung { border-radius: 999px; padding-left: 14px; padding-right: 12px; }
    .dh-watt-calc summary { display: none; }
    .dh-watt-calc__body { display: flex; align-items: center; gap: 14px; padding: 8px 14px; }
    .dh-watt-calc__body-title { display: inline-flex; align-items: center; gap: 8px; flex: none; font-family: var(--font-display, 'Manrope', sans-serif); font-size: 14.5px; font-weight: 700; color: var(--color-text, #16181d); }
    .dh-watt-calc__body-title svg { width: 16px; height: 16px; flex: none; color: var(--brand-primary, var(--brand-primary)); }
    .dh-watt-calc__row { flex: none; gap: 8px; }
    .dh-watt-calc__qm { width: 86px; min-height: 40px; }
    .dh-watt-calc__daemmung { min-height: 40px; }
    .dh-watt-calc__result { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.4; }
    .dh-watt-calc__result[hidden] { display: none; }
    .dh-watt-calc__hint { display: none; }
}
/* --- Filter-Listen: saubere Zeilen statt Roh-Optik --- */
.box-filter-characteristics { font-family: var(--font-body, 'IBM Plex Sans', sans-serif); }
.box-filter-characteristics .filter-item { display: block; text-decoration: none !important; }
.box-filter-characteristics .filter-item .box-link-wrapper { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; transition: background .12s ease; }
.box-filter-characteristics .filter-item:hover .box-link-wrapper { background: #f7f3f2; }
.box-filter-characteristics .snippets-filter-item-icon-right { font-size: 14px; color: #c9cfd7; flex: none; transition: color .12s ease; }
.box-filter-characteristics .filter-item:hover .snippets-filter-item-icon-right { color: var(--brand-primary, var(--brand-primary)); }
.box-filter-characteristics .filter-item-value { font-size: 14px !important; color: var(--color-text-muted, #374151) !important; line-height: 1.35; }
.box-filter-characteristics .filter-item:hover .filter-item-value { color: var(--brand-primary, var(--brand-primary)) !important; }
.box-filter-characteristics .filter-item .badge { margin-left: auto; flex: none; background: none !important; border: 0 !important; padding: 0 !important; color: #9aa1ac !important; font-size: 12px !important; font-weight: 600 !important; }
.box-filter-characteristics .filter-search-wrapper { padding-top: 2px; }

/* ============================================================================
   §42 SIDEBAR-REDESIGN (User-Feedback Runde 3): Filter muss als FILTER lesbar
   sein, nicht als zweite Navigation. Zwei klar getrennte Sektionen
   ("Kategorien" / "Filter"-Header mit Icon), Gruppen als ruhige Accordion-
   Zeilen mit Chevron, Checkbox-Affordanz auf allen Werten, Counts subtil.
   JS-Gegenstueck: js/dh-sidebar.js (Header-Injektion, Farbe zuerst,
   erste 2 Gruppen default-offen).
   ========================================================================== */
/* --- Sektions-Header: ein Muster fuer beide Bloecke --- */
#sidepanel_left .productlist-filter-headline {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 16px !important; font-weight: 700 !important;
    letter-spacing: 0 !important; text-transform: none !important;
    color: var(--color-text, #16181d) !important; margin-bottom: 4px; padding: 0 2px;
}
.dh-flt-head {
    display: flex; align-items: center; gap: 9px;
    margin: 26px 0 2px; padding: 20px 2px 0;
    border-top: 1px solid #e7e9ee;
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 16px; font-weight: 700; color: var(--color-text, #16181d);
}
.dh-flt-head svg { width: 17px; height: 17px; flex: none; color: var(--brand-primary, var(--brand-primary)); }
/* Mobil sind die Merkmal-Boxen d-none (Filter laeuft dort ueber die Toolbar) -> Header mit ausblenden */
@media (max-width: 991.98px) { .dh-flt-head { display: none; } }

/* --- Kategorien-Block: ruhige Nav-Zeilen --- */
#sidepanel_left .box-categories .nav-link { padding: 7px 2px; }
#sidepanel_left .box-categories .nav-link.dropdown-toggle a { font-size: 14.5px; font-weight: 600; color: var(--color-text, #16181d); }
#sidepanel_left .box-categories .snippets-categories-nav-link-child { padding: 5px 2px 5px 14px; }

/* --- Filtergruppen: Accordion-Zeilen mit klarer Trennung --- */
#sidepanel_left .box-filter-characteristics { border-bottom: 1px solid var(--color-line, #eef0f3); }
#sidepanel_left .box-filter-hr, #sidepanel_left .box-normal-hr { display: none; }
#sidepanel_left .btn-filter-box.dropdown-toggle {
    font-size: 14px !important; font-weight: 600 !important; padding: 12px 2px !important;
}
/* Caret -> FA-Chevron (gleiche Optik wie Kategorien-Nav), dreht beim Oeffnen.
   Border-Trick kollidiert mit NOVAs eigenem ::after-Styling -> FA-Glyph mit !important. */
#sidepanel_left .btn-filter-box.dropdown-toggle::after {
    content: "\f107" !important;
    font-family: "Font Awesome 5 Free"; font-weight: 900;
    font-size: 13px; line-height: 1; color: #9aa1ac;
    display: inline-block; border: 0 !important; width: auto; height: auto;
    margin: 0 3px 0 auto; flex: none;
    transform: none !important; transition: transform .15s ease;
}
#sidepanel_left .btn-filter-box.dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg) !important; }
#sidepanel_left .box-filter-characteristics .filter-search-wrapper { padding-bottom: 10px; }

/* --- Checkbox-Affordanz: einheitliches Kaestchen (ersetzt FA-Glyph, wird
       per JS auch auf Werte ohne Icon gesetzt, z. B. Farbe) --- */
#sidepanel_left .dh-flt-cb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex: none;
    border: 1.5px solid #c9cfd7; border-radius: 4px; background: #fff;
    transition: border-color .12s ease, background .12s ease;
}
#sidepanel_left .dh-flt-cb::before { content: "" !important; }
#sidepanel_left .filter-item:hover .dh-flt-cb { border-color: var(--brand-primary, var(--brand-primary)); }
#sidepanel_left .dh-flt-cb--on, #sidepanel_left .filter-item.active .dh-flt-cb {
    background: var(--brand-primary, var(--brand-primary)); border-color: var(--brand-primary, var(--brand-primary));
}
#sidepanel_left .dh-flt-cb--on::before, #sidepanel_left .filter-item.active .dh-flt-cb::before {
    content: "" !important; display: block; width: 9px; height: 5px;
    border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(0, -1px);
}

/* --- "Alle anzeigen": leiser Textlink mit +/- Indikator --- */
#sidepanel_left .snippets-filter-show-all { padding: 0 0 10px; }
#sidepanel_left .snippets-filter-show-all .btn-link {
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif) !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--color-text-soft, #6b7280) !important; padding: 2px 8px !important;
    text-decoration: none !important;
}
#sidepanel_left .snippets-filter-show-all .btn-link:hover { color: var(--brand-primary, var(--brand-primary)) !important; }
#sidepanel_left .snippets-filter-show-all .btn-link::before { content: "+ "; }
#sidepanel_left .snippets-filter-show-all .btn-link[aria-expanded="true"]::before { content: "\2212\00a0"; }

/* ============================================================================
   §43 MOBILE SUBKATEGORIE-PILLS (User-Feedback): Die 2-spaltigen Bild-Kacheln
   (plp3) fressen mobil ~3 Bildschirmhoehen vor dem ersten Produkt. Mobil
   werden die Unterkategorien zu runden Text-Pills im Wrap-Layout (1-2 Zeilen,
   kein Slider) — gleiche Formsprache wie Schnellauswahl-Chips und Rechner.
   Desktop/Tablet (>=768px) behaelt die Bild-Kacheln. JS-Gegenstueck in
   dh-sidebar.js kuerzt redundante Eltern-Praefixe (voller Name in title/aria).
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Grid -> 2-spaltige Mini-Karten; plp3-Spalten/Margins aufheben */
    .content-cats-small {
        display: flex !important; flex-wrap: wrap !important; gap: 8px !important;
        margin: 2px 0 16px !important;
    }
    .content-cats-small > [class*="col"] {
        flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important;
        padding: 0 !important; margin: 0 !important;
    }

    /* Mini-Karte: rundes Kategoriebild links, Name rechts (max. 2 Zeilen).
       Gefuellt hellgrau — unterscheidet Kategorien von den Outline-Chips. */
    .content-cats-small .sub-categories {
        display: flex !important; flex-direction: row !important; align-items: center !important;
        gap: 10px !important; height: 100% !important;
        background: #f2f3f6 !important; border-radius: 14px !important; padding: 6px !important;
    }
    .content-cats-small .sub-categories > a { flex: none !important; }
    .content-cats-small .subcategories-image {
        display: block !important;
        width: 46px !important; height: 46px !important; aspect-ratio: 1 / 1 !important;
        border-radius: 10px !important; overflow: hidden !important;
        margin: 0 !important; border: 0 !important; background: #fff !important;
    }
    .content-cats-small .sub-categories > div { flex: 1 1 auto !important; min-width: 0 !important; }
    .content-cats-small .caption { margin: 0 !important; text-align: left !important; }
    .content-cats-small .caption a {
        display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
        overflow: hidden !important; padding: 0 4px 0 0 !important; border: 0 !important;
        background: transparent !important;
        font-family: var(--font-body, 'IBM Plex Sans', sans-serif) !important;
        font-size: 12px !important; line-height: 1.3 !important; font-weight: 600 !important;
        letter-spacing: 0 !important; color: #23272f !important;
        white-space: normal !important; word-break: normal !important;
        overflow-wrap: anywhere !important; hyphens: auto !important; -webkit-hyphens: auto !important;
    }
    .content-cats-small .sub-categories:active .caption a { color: var(--brand-primary, var(--brand-primary)) !important; }

    /* --- Die ganze Karte ist das Ziel, nicht nur die Schrift -----------------
       ANLASS (Klickdaten 02.09.2026): die Kachel SIEHT aus wie ein Ziel, ist
       aber keines. Der graue Grund ist ein <div>; klickbar sind nur zwei Anker
       darin. Gemessen bei 360/390/414 px: Karte 58 px hoch, Textlink nur 31 px —
       unter den 44 px, die CLAUDE.md fordert. Ein Tipp in die Kartenecke traf
       gar keinen Link; im Kachelblock lagen 46 Fehlklicks.

       Warum ueber die Schrift und nicht ueber das Bild: der Textlink bekommt
       mit 1.451 zu 820 Klicks fast doppelt so viele wie der Bildlink — die
       Leute zielen auf den Namen.

       Die Flaeche deckt auch den Bildlink ab. Das ist unschaedlich und gewollt:
       beide Anker zeigen auf DIESELBE URL (geprueft), fuer den Nutzer aendert
       sich also nur, dass er trifft. Nebeneffekt: die Klickzahlen verteilen
       sich nicht mehr auf zwei Anker, die Messung wird eindeutig.

       Markup und Ziele bleiben unangetastet; nur mobil. -------------------- */
    .content-cats-small .sub-categories { position: relative !important; }
    .content-cats-small .caption a::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    /* Label "Kategorien" (JS-injiziert) — nur mobil sichtbar */
    .dh-subcat-label {
        display: block;
        margin: 14px 0 8px;
        font-family: var(--font-display, 'Manrope', sans-serif);
        font-size: 11px; font-weight: 700; letter-spacing: .09em;
        text-transform: uppercase; color: #9aa1ac;
    }
}

/* §43: "Kategorien"-Label nur mobil (Desktop hat die Bild-Kacheln) */
@media (min-width: 768px) { .dh-subcat-label { display: none; } }

/* ============================================================================
   §44 SALE-SYSTEM (brand_config §8): eine Optik für alle Aktions-Stellen.
   ----------------------------------------------------------------------------
   NEU 25.08.2026 „Markenglut" (Betreiber: Ink+Amber „sieht grottenschlecht
   aus, muss fliessen"): Die Aktionsfläche ist jetzt ein tiefrotes Glut-Feld
   aus der Markenfamilie — derselbe Faden wie Header, Kaufknopf, Abverkaufs-
   Pill und Abverkaufs-Zeile am Preis (die stand seit 13.08. schon auf Rot;
   das Gelb-Schwarz war der letzte Fremdkörper). Zwei Farben, Punkt:
   Markenrot + Weiß. Badge und Code-Knopf sind INVERTIERTE weiße Chips wie
   beim Abverkauf-Menüpunkt; der gestrichelte Geist-Rahmen ist raus.
   Kontrast Weiß↔var(--brand-primary) = 9,2:1 (AAA). Keine neuen Animationen (Zurück-
   haltung), Tiefe kommt aus Verlauf + weicher roter Schattenkante.
   Varianten: --home (Section), --category (Band), --pdp (Karte).
   JS-Hooks unverändert: data-dh-promo-copy / data-dh-sale-end / is-copied.
   ========================================================================== */
/* --- Topbar: Solo-Sale statt Rotation (dunkler Topbar-Grund bleibt) --- */
#header-top-bar .dh-topbar-solo { position: relative; }
#header-top-bar .dh-topbar-solo .dh-topbar-msg {
    animation: none !important; opacity: 1 !important; position: static !important;
    transform: none !important; left: auto !important;
    display: inline-flex; align-items: center; gap: 8px;
    color: #fff; text-decoration: none;
}
#header-top-bar .dh-topbar-sale-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    background: #fff; color: var(--brand-primary, var(--brand-primary));
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 11px; font-weight: 800; letter-spacing: .06em;
}
#header-top-bar .dh-topbar-sale-ico { font-size: 12px; }
#header-top-bar .dh-topbar-sale-claim strong { color: #fff; }
#header-top-bar .dh-topbar-sale-code { color: #fff; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#header-top-bar .dh-topbar-sale-count { opacity: .85; font-variant-numeric: tabular-nums; }
#header-top-bar a.dh-topbar-sale:hover .dh-topbar-sale-claim { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767.98px) {
    /* mobil: nur die Kernbotschaft, zentriert — Badge+Countdown brauchen zu viel Breite */
    #header-top-bar .dh-topbar-sale-count, #header-top-bar .dh-topbar-sale-badge { display: none; }
    #header-top-bar .dh-topbar-solo { display: flex; justify-content: center; }
    #header-top-bar .dh-topbar-sale { max-width: 100%; overflow: hidden; white-space: nowrap; }
    #header-top-bar .dh-topbar-sale-claim::before { content: "\2600\00a0"; color: #fff; }
}

/* --- Banner-Grundgerüst (alle Varianten): das Glut-Feld --- */
.dh-sale { margin: 0 0 16px; }
.dh-sale__inner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    background: linear-gradient(135deg, #a30d0a 0%, var(--brand-primary, var(--brand-primary)) 45%, #6f0705 100%);
    color: #fff;
    border-radius: 14px; padding: 12px 16px;
    box-shadow: 0 10px 26px -14px rgba(var(--brand-primary-rgb), .55);
}
.dh-sale__badge {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    padding: 4px 12px; border-radius: 999px;
    background: #fff; color: var(--brand-primary, var(--brand-primary)) !important;
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 12px; font-weight: 800; letter-spacing: .07em;
    text-decoration: none !important;
}
.dh-sale__ico { font-size: 13px; }
.dh-sale__claim {
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 16px; font-weight: 700; line-height: 1.25;
    color: #fff;
}
.dh-sale__claim strong { color: #fff; }
.dh-sale__claim-sub {
    display: block;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
    font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .78); margin-top: 1px;
}
.dh-sale__code {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 7px 14px; border: 0; border-radius: 999px;
    background: #fff; color: var(--brand-primary, var(--brand-primary)); cursor: pointer;
    font-family: var(--font-body, 'IBM Plex Sans', sans-serif); font-size: 13px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    transition: transform .12s ease, box-shadow .12s ease;
}
.dh-sale__code:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); }
.dh-sale__code:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dh-sale__code-label { color: rgba(var(--brand-primary-rgb), .72); font-weight: 600; }
.dh-sale__code-value {
    color: var(--brand-primary, var(--brand-primary));
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-weight: 800; letter-spacing: .06em;
}
.dh-sale__code-copy { color: var(--brand-primary, var(--brand-primary)); }
.dh-sale__code-done { display: none; color: var(--brand-primary, var(--brand-primary)); }
.dh-sale__code.is-copied .dh-sale__code-copy { display: none; }
.dh-sale__code.is-copied .dh-sale__code-done { display: inline; }
.dh-sale__code.is-copied { box-shadow: inset 0 0 0 2px var(--brand-primary, var(--brand-primary)), 0 1px 3px rgba(0, 0, 0, .18); }
.dh-sale__count {
    flex: none; font-size: 13px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums;
}
.dh-sale__count-value { color: #fff; }
.dh-sale__cta {
    display: inline-flex; align-items: center; margin-left: auto; flex: none;
    padding: 8px 16px; border-radius: 999px;
    background: #fff; color: var(--brand-primary, var(--brand-primary)) !important;
    font-family: var(--font-display, 'Manrope', sans-serif);
    font-size: 13.5px; font-weight: 800;
    text-decoration: none !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dh-sale__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }

/* --- Variante: Startseiten-Section --- */
.dh-sale--home { margin: 14px 0 22px; }
.dh-sale--home .dh-sale__inner { padding: 18px 22px; border-radius: 18px; gap: 12px 18px; }
.dh-sale--home .dh-sale__claim { font-size: 21px; }
@media (min-width: 992px) {
    .dh-sale--home .dh-sale__claim { font-size: 24px; }
}

/* --- Variante: Kategorie-Band (schlank) --- */
.dh-sale--category { margin: 2px 0 18px; }
.dh-sale--category .dh-sale__inner { padding: 9px 14px; border-radius: 12px; }
.dh-sale--category .dh-sale__claim { font-size: 14.5px; }
.dh-sale--category .dh-sale__cta { padding: 6px 13px; font-size: 12.5px; }
@media (max-width: 767.98px) {
    .dh-sale--category .dh-sale__count, .dh-sale--category .dh-sale__cta { display: none; }
}

/* --- Kategorie-Band MOBIL: eine Zeile, Pille, der Code ist die Aktion ---------
   ANLASS (30.08.2026, Klickdaten): auf 390x844 lag das erste Produkt der
   Kategorieseite bei 1023 px — der Bildschirm endet bei 844. Man sah kein
   einziges Produkt ohne zu scrollen. Das Band brauchte davon ~110 px, weil
   Badge + Claim + Code im flex-wrap auf DREI Zeilen umbrachen.

   Haltung: die Botschaft steht bereits in der Topbar ("Zusaetzlich -10 % auf
   alles · Code SOMMER26"). Das Einzige, was dieses Band exklusiv kann, ist den
   Code mit EINEM Tipp kopierbar zu machen. Also wird der Code zur Hauptsache
   und der Claim zum Label — kein zweiter Aushang derselben Nachricht.

   Rein per CSS: Markup und JS-Haken (data-dh-promo-copy, .is-copied,
   __code-copy/__code-done) bleiben unangetastet, Desktop und die Varianten
   home/pdp ebenfalls. ------------------------------------------------------ */
@media (max-width: 767.98px) {
    .dh-sale--category { margin: 2px 0 12px; }

    /* Badge weg: "SOMMER-SALE" steht schon in der Topbar, das rote Feld sagt es
       ohnehin. Erst diese ~100 px machen die eine Zeile ueberhaupt moeglich. */
    .dh-sale--category .dh-sale__badge { display: none; }

    /* Pille statt Kasten — auf einer schlanken Zeile ruhiger als ein Rechteck. */
    .dh-sale--category .dh-sale__inner {
        flex-wrap: nowrap;
        gap: 10px;
        padding: 6px 6px 6px 15px;
        border-radius: 999px;
        box-shadow: 0 4px 14px -8px rgba(var(--brand-primary-rgb, 147, 10, 8), .5);
    }

    /* Der Claim darf schrumpfen und notfalls kuerzen — er ist das Label.
       min-width:0 ist noetig, sonst ignoriert ein Flex-Kind das Kuerzen. */
    .dh-sale--category .dh-sale__claim {
        min-width: 0;
        flex: 1 1 auto;
        font-size: 13.5px;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Die Aktion schrumpft NIE. */
    .dh-sale--category .dh-sale__code {
        position: relative;
        flex: none;
        gap: 6px;
        padding: 6px 12px;
        font-size: 13px;
    }
    /* "Code" weg: der Chip zeigt den Wert plus Kopier-Symbol, das genuegt.
       Fuer Screenreader bleibt das aria-label am Knopf vollstaendig. */
    .dh-sale--category .dh-sale__code-label { display: none; }

    /* Touch-Target: der Chip ist optisch flach (~28-30 px), die tastbare Flaeche
       aber fest 44 px hoch. Bewusst mit fester Hoehe statt negativem inset —
       inset haengt an der Chip-Hoehe und fiel bei kleinerer Schrift auf 42 px
       zurueck (gemessen am 30.08.). So gilt die Regel unabhaengig davon. */
    .dh-sale--category .dh-sale__code::after {
        content: "";
        position: absolute;
        left: -6px; right: -6px;
        top: 50%; transform: translateY(-50%);
        height: 44px;
    }
}

/* Schmale Geraete: das Angebot darf NIE abgeschnitten werden.
   Gemessen am 30.08.: bei 375, 360 und 320 px kuerzte der Claim mitten in
   "Zusaetzlich -10 %" — ausgerechnet die Zahl fiel weg. Also kleiner setzen
   statt kuerzen. 390 px (iPhone 12-15) traegt den vollen Satz bereits. */
@media (max-width: 389.98px) {
    .dh-sale--category .dh-sale__inner { gap: 7px; padding-left: 10px; }
    .dh-sale--category .dh-sale__claim { font-size: 12.5px; }
    .dh-sale--category .dh-sale__code { padding: 5px 10px; font-size: 12.5px; gap: 5px; }
}
/* Letzte Reserve auf sehr schmalen Geraeten (iPhone SE 1. Gen): das
   Kopier-Symbol weicht dem Text. Die Rueckmeldung bleibt — nach dem Tippen
   erscheint der Haken (__code-done) — und das aria-label des Knopfes nennt
   weiterhin die vollstaendige Aktion. */
@media (max-width: 339.98px) {
    .dh-sale--category .dh-sale__code-copy { display: none; }
    .dh-sale--category .dh-sale__claim { font-size: 12px; }
}

/* --- Variante: PDP-Karte unter der Galerie --- */
.dh-sale--pdp { margin: 14px 0 0; }
.dh-sale--pdp .dh-sale__inner { padding: 11px 14px; border-radius: 12px; }
.dh-sale--pdp .dh-sale__claim { font-size: 14.5px; }
.dh-sale--pdp .dh-sale__cta { display: none; } /* auf der PDP zählt der Warenkorb-CTA */

/* --- Theme black (Black Friday): dunkle Glut, gleiche Chip-Sprache --- */
.dh-sale--black .dh-sale__inner {
    background: linear-gradient(135deg, #1a1c22 0%, #0b0c0f 60%);
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .6);
}
.dh-sale--black .dh-sale__badge, .dh-sale--black .dh-sale__cta { background: #fff; color: #0b0c0f !important; }
.dh-sale--black .dh-sale__code-label,
.dh-sale--black .dh-sale__code-value,
.dh-sale--black .dh-sale__code-copy,
.dh-sale--black .dh-sale__code-done { color: #0b0c0f; }
.dh-sale--black .dh-sale__code.is-copied { box-shadow: inset 0 0 0 2px #0b0c0f, 0 1px 3px rgba(0, 0, 0, .3); }

/* ============================================================
 * /Sonderangebote — Kopfbereich (dh_abverkauf_header.tpl),
 * sitzt DIREKT UNTER der H1 (productlist-header-heading append).
 * Lead + Stichpunkte, Badge in Brand-Rot (User-Feedback 13.08.),
 * mobil-first: grosse Zeilenhoehe, keine Einzuege noetig.
 * ============================================================ */
.dh-abv-head {
  margin: 10px 0 18px;
  padding: 14px 16px;
  background: #fdf2f1;
  border: 1px solid #f0cfcc;
  border-radius: 12px;
  max-width: 860px;
}
.dh-abv-head__lead {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text, #16181d);
}
.dh-abv-head__badge {
  display: inline-block;
  background: var(--brand-primary, var(--brand-primary));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: baseline;
  white-space: nowrap;
}
.dh-abv-head__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.dh-abv-head__list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted, #374151);
}
.dh-abv-head__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-primary, var(--brand-primary));
  font-weight: 800;
}
@media (max-width: 576px) {
  .dh-abv-head { padding: 12px 12px; }
  .dh-abv-head__badge { display: block; width: fit-content; margin: 0 0 6px; }
}
/* ============================================================
 * §45 UI-POLISH (User-Feedback 14.07.2026)
 *    Galerie-Preview-Pfeile: der globale Gold->Brand-Sweep
 *    (.slick-arrow:hover in Modul 15) machte den 44x66-Pfeil der
 *    Thumbnail-Leiste zum vollen Brand-Block. Hier: ruhiger,
 *    neutraler Hover (Grau-Fläche, Pfeil bleibt dunkel).
 * ============================================================ */
.product-detail-image-preview-bar .slick-arrow:hover {
  background-color: var(--color-surface-soft, #f3f4f6) !important;
  border-radius: 10px !important;
}
.product-detail-image-preview-bar .slick-arrow:hover::after {
  color: var(--color-text, #111827) !important;
}


/* ============================================================
 * 6) PDP-Hauptgalerie-Pfeile: versteckten Slick-Text WIRKLICH verstecken.
 *    Bug 26.07.2026: #gallery .slick-prev/.slick-next zeigten "Previous"/
 *    "Next" als sichtbaren Text (Button erbte font-size 15px/Farbe schwarz),
 *    v. a. im Zoom auffaellig. Muster 1:1 vom funktionierenden Thumbnail-
 *    Pfeil (#gallery_preview): font-size 0 + transparent + overflow hidden;
 *    das Chevron ist ein eigenstaendiges ::after (Font Awesome, feste px) —
 *    braucht aber EIGENE Farbe, da es sonst transparent erbt. Im Modul-15-
 *    Brand-Hover (background brand-primary) Icon weiss (Kontrast/A11y). */
#gallery .slick-arrow {
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden;
}
#gallery .slick-arrow::after {
  color: var(--color-text, #111827) !important;
}
#image_wrapper #gallery .slick-arrow:hover::after {
  color: #fff !important;
}

/* ============================================================
 * §46 PDP-BREADCRUMB AUF MOBIL WIEDER SICHTBAR (02.08.2026)
 *    Modul 14 blendet unter 992px den kompletten Breadcrumb aus
 *    (display:none auf wrapper/#breadcrumb/.breadcrumb/-container).
 *    Seit dem Breadcrumb-SEO-Fix zeigt er die richtige Kategorie und
 *    traegt das BreadcrumbList-Schema — mobile-first indexiert Google
 *    genau diese Fassung, deshalb muss er sichtbar sein.
 *    Anspruch des Users: SEHR kompakt, kaum Platzverbrauch.
 *    Der "Zurueck zur Liste"-Pfeil bleibt ausgeblendet (doppelte
 *    Funktion zum Browser-Zurueck, kostet nur Platz).
 *
 *    NACHGEBESSERT 02.08.2026 — die erste Fassung sah eng und kaputt aus.
 *    Gemessen auf 320/360/390/414px an drei Pfadlaengen, 12 von 12 Faellen
 *    fehlerhaft: die Leiste stand ohne Seitenrand hart am Displayrand
 *    (links 0px, waehrend der Seiteninhalt 16px hat) und war rechts
 *    abgeschnitten (12 bis 151px), weil sie horizontal scrollte — auf Touch
 *    findet das niemand.
 *    Jetzt: UMBRUCH statt Scrollen (nie mehr abgeschnitten), 16px Seitenrand
 *    wie der uebrige Inhalt, 12px statt 11px, und der ARTIKELNAME faellt
 *    weg — er steht als H1 direkt darunter, in der Leiste war er reine
 *    Wiederholung und fuellte allein eine ganze Zeile.
 *    Ergebnis: 29px hoch bei kurzen Pfaden (eine Zeile), 45px beim laengsten
 *    Pfad "Startseite > Heizkoerper Zubehoer > Thermofluessigkeit fuer
 *    Heizkoerper" (zwei Zeilen). Links 24px hoch = WCAG 2.5.8 AA.
 *
 *    Das BreadcrumbList-Schema bleibt vollstaendig im Markup; ausgeblendet
 *    ist nur der letzte Eintrag, also die aktuelle Seite selbst — den stellt
 *    Google im SERP-Breadcrumb ohnehin nicht dar, und auf Desktop ist er da.
 * ============================================================ */
@media (max-width: 991.98px) {
  body[data-page="1"] .breadcrumb-container,
  body[data-page="1"] .breadcrumb-wrapper,
  body[data-page="1"] #breadcrumb {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body[data-page="1"] .breadcrumb-wrapper > .col-auto {
    max-width: 100% !important;
    flex: 0 1 100% !important;
    padding: 0 !important;
  }

  /* Die Leiste selbst: bricht um statt zu scrollen, mit Seitenrand wie der
     uebrige Inhalt (gemessen: Kategorie-H1 sitzt auf Mobil bei 16px). */
  body[data-page="1"] #breadcrumb .breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0;
    row-gap: 0;
    margin: 0 !important;
    /* height/min-height muessen explizit zurueck: Modul 14 setzt height:0 !important
       auf .breadcrumb — nicht deklarierte Eigenschaften erbt meine Regel NICHT,
       der Text lief sonst aus seinem Container heraus (gemessen: 6px statt 19px). */
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 16px 6px !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    font-size: 12px;
    line-height: 1.35;
    max-width: none;
  }

  body[data-page="1"] #breadcrumb .breadcrumb-item a,
  body[data-page="1"] #breadcrumb .breadcrumb-item span {
    font-size: 12px;
    color: #6b7076;
    text-decoration: none;
    white-space: normal;
  }

  /* Trefferflaeche: 12px x 1.35 = 16px waeren zu wenig, 4px oben/unten -> 24px. */
  body[data-page="1"] #breadcrumb .breadcrumb-item a { padding: 4px 0; }

  /* Artikelname raus: er steht als H1 direkt darunter. In der Leiste fuellte
     er allein eine ganze Zeile, ohne eine einzige neue Information. */
  body[data-page="1"] #breadcrumb .breadcrumb-item.active,
  body[data-page="1"] #breadcrumb .breadcrumb-item.last {
    display: none !important;
  }

  /* Zurueck-zur-Liste-Pfeil: Platz sparen, Browser-Zurueck genuegt. */
  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-backtolist,
  body[data-page="1"] #breadcrumb .breadcrumb-item.breadcrumb-arrow {
    display: none !important;
  }

  /* Trenner dezent und schmal. */
  body[data-page="1"] #breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    color: #c3c7cc;
    padding: 0 5px;
    font-size: 12px;
  }

  /* Produkt-Blaetterpfeile bleiben aus (Platz). */
  body[data-page="1"] .breadcrumb-wrapper .navigation-arrows { display: none !important; }
}
/* ============================================================
 * §46 STARTSEITE 2026 (OPC "Homepage Neu") — v2
 *    Sektionen leben in Container-Portlets (Bootstrap .container
 *    = saubere Breite). Foto-Kacheln, dunkles Trust-Band,
 *    Ratgeber-Karten mit Bild. Klassen dh-hm-*.
 * ============================================================ */

/* --- Hero-Selbst-Gate: OPC-Hero da => Template-Hero aus --- */
body[data-page="18"]:has(.dh-hero--opc) .dh-home-hero-2026:not(.dh-hero--opc) {
    display: none !important;
}

/* --- Sektions-Rhythmus (custom-class am Container-Portlet) --- */
.dh-hm-block { margin-top: 64px; }
@media (max-width: 767.98px) { .dh-hm-block { margin-top: 44px; } }

/* --- Sektions-Kopf --- */
.dh-hm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.dh-hm-head__copy { max-width: 760px; }
.dh-hm-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 11px; border: 1px solid rgba(var(--brand-primary-rgb), .22);
    border-radius: 999px; background: rgba(var(--brand-primary-rgb), .05);
    color: var(--brand-primary); font-size: 12px; font-weight: 750; letter-spacing: .02em;
}
.dh-hm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary); }
.dh-hm-head h2 { margin: 12px 0 6px; font-size: clamp(23px, 2.6vw, 32px); line-height: 1.12; color: var(--color-text, #111827); letter-spacing: -.01em; }
.dh-hm-head p { margin: 0; color: var(--color-text-muted, #4b5563); font-size: 15.5px; line-height: 1.55; }
.dh-hm-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 10px 18px; border: 1.5px solid #d6dee8; border-radius: 999px;
    color: var(--color-text, #111827); font-weight: 750; font-size: 14px; text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.dh-hm-more::after { content: "\2192"; }
.dh-hm-more:hover, .dh-hm-more:focus-visible {
    border-color: var(--brand-primary); color: var(--brand-primary);
    background: rgba(var(--brand-primary-rgb), .04); text-decoration: none;
}
@media (max-width: 575.98px) { .dh-hm-head { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* --- Kategorie-Kacheln MIT FOTO --- */
.dh-hm-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 1200px) { .dh-hm-cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .dh-hm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-hm-cat {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: var(--color-text, #111827);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dh-hm-cat:hover, .dh-hm-cat:focus-visible {
    border-color: rgba(var(--brand-primary-rgb), .5);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
    transform: translateY(-3px);
    color: var(--color-text, #111827); text-decoration: none;
}
.dh-hm-cat__img { aspect-ratio: 4 / 3.4; overflow: hidden; background: #f4f6f8; }
.dh-hm-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dh-hm-cat:hover .dh-hm-cat__img img { transform: scale(1.045); }
.dh-hm-cat__body { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 13px; }
.dh-hm-cat__label { display: block; font-weight: 750; font-size: 14px; line-height: 1.25; }
.dh-hm-cat__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--color-text-soft, #6b7280); font-weight: 400; }
.dh-hm-cat__arrow { flex: 0 0 auto; color: #9aa4b2; font-size: 16px; transition: color .15s ease, transform .15s ease; }
.dh-hm-cat:hover .dh-hm-cat__arrow { color: var(--brand-primary); transform: translateX(3px); }
.dh-hm-cat__flag {
    position: absolute; top: 10px; left: 10px; z-index: 1;
    padding: 4px 10px; border-radius: 999px;
    background: var(--brand-primary); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
}

/* --- Dunkles Trust-Band (full-bleed, Corporate wie Footer) --- */
.dh-hm-dark { margin-top: 72px; padding: 60px 16px 56px; background: var(--color-text, #15171a); }
@media (max-width: 767.98px) { .dh-hm-dark { margin-top: 48px; padding: 44px 16px 40px; } }
.dh-hm-dark__in { max-width: 1290px; margin: 0 auto; }
.dh-hm-dark .dh-hm-badge { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff; }
.dh-hm-dark .dh-hm-badge::before { background: var(--brand-primary); }
.dh-hm-dark h2 { margin: 12px 0 26px; color: #fff; font-size: clamp(23px, 2.6vw, 32px); line-height: 1.12; letter-spacing: -.01em; }
.dh-hm-dark__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 991.98px) { .dh-hm-dark__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dh-hm-dark__item {
    display: flex; flex-direction: column; gap: 9px;
    padding: 20px 18px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    background: rgba(255,255,255,.035);
}
.dh-hm-dark__ico { display: inline-flex; width: 34px; height: 34px; color: #fff; opacity: .92; }
.dh-hm-dark__ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.dh-hm-dark__item strong { color: #fff; font-size: 15.5px; }
.dh-hm-dark__item span { color: #b9bec7; font-size: 13.5px; line-height: 1.55; }
.dh-hm-dark__item a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.dh-hm-dark__item a:hover { color: #fff; opacity: .85; }
.dh-hm-greview {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
    margin-top: 16px; padding: 18px 20px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035);
}
.dh-hm-greview__left { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: #fff; font-size: 15px; }
.dh-hm-greview__left strong { font-size: 16px; }
.dh-hm-greview__left small { color: #b9bec7; font-size: 13.5px; }
.dh-hm-greview__stars { display: inline-flex; gap: 3px; }
.dh-hm-greview__stars span {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    background: #f4bd38; color: #fff; font-size: 11.5px; font-weight: 900;
    box-shadow: inset 0 -1px 0 rgba(120, 83, 0, .18);
}
.dh-hm-greview__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 999px;
    background: #fff; color: var(--color-text, #15171a); font-weight: 750; font-size: 14px; text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dh-hm-greview__btn::after { content: "\2192"; }
.dh-hm-greview__btn:hover, .dh-hm-greview__btn:focus-visible {
    color: var(--color-text, #15171a); text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* --- Ratgeber-Karten MIT BILD --- */
.dh-hm-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 767.98px) { .dh-hm-guides { grid-template-columns: 1fr; } }
.dh-hm-guide {
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: var(--color-text, #111827);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.dh-hm-guide:hover, .dh-hm-guide:focus-visible {
    border-color: rgba(var(--brand-primary-rgb), .5);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
    transform: translateY(-3px);
    color: var(--color-text, #111827); text-decoration: none;
}
.dh-hm-guide__img { aspect-ratio: 16 / 9.5; overflow: hidden; background: #f4f6f8; }
.dh-hm-guide__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.dh-hm-guide:hover .dh-hm-guide__img img { transform: scale(1.04); }
.dh-hm-guide__body { display: flex; flex-direction: column; gap: 7px; padding: 18px 18px 20px; }
.dh-hm-guide__tag { font-size: 12px; font-weight: 750; color: var(--brand-primary); letter-spacing: .03em; text-transform: uppercase; }
.dh-hm-guide strong { font-size: 17px; line-height: 1.3; }
.dh-hm-guide p { margin: 0; font-size: 14px; color: var(--color-text-muted, #4b5563); line-height: 1.55; }
.dh-hm-guide__cta { margin-top: 6px; font-size: 14px; font-weight: 750; color: var(--brand-primary); }
.dh-hm-guide__cta::after { content: " \2192"; }

/* --- SEO-/Info-Block (2-spaltig) --- */
.dh-hm-seo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 991.98px) { .dh-hm-seo { grid-template-columns: 1fr; } }
.dh-hm-seo h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 12px; color: var(--color-text, #111827); letter-spacing: -.01em; }
.dh-hm-seo p { color: var(--color-text-muted, #4b5563); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.dh-hm-seo p a { color: var(--brand-primary); font-weight: 650; text-decoration: none; }
.dh-hm-seo p a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dh-hm-seo__aside { padding: 22px; background: var(--color-surface-soft, #f7f8fa); border: 1px solid #e8ecf1; border-radius: 16px; }
.dh-hm-seo__aside strong { display: block; margin-bottom: 12px; font-size: 14.5px; color: var(--color-text, #111827); }
.dh-hm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dh-hm-chips a {
    display: inline-flex; padding: 7px 14px;
    background: #fff; border: 1px solid #dde3ea; border-radius: 999px;
    color: var(--color-text, #111827); font-size: 13px; font-weight: 650; text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.dh-hm-chips a:hover, .dh-hm-chips a:focus-visible {
    border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none;
}

/* --- Feinschliff Produktkarten auf der Startseite --- */
body[data-page="18"] .dh-hm-block .productbox { border-radius: 12px; }

/* --- v4: mehrere SEO-Content-Blöcke --- */
.dh-hm-info3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 767.98px) { .dh-hm-info3 { grid-template-columns: 1fr; } }
.dh-hm-info3__card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px 20px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px;
}
.dh-hm-info3__card h3 { margin: 0; font-size: 17px; color: var(--color-text, #111827); line-height: 1.3; }
.dh-hm-info3__kicker { font-size: 12px; font-weight: 750; color: var(--brand-primary); letter-spacing: .03em; text-transform: uppercase; }
.dh-hm-info3__card p { margin: 0; font-size: 14px; color: var(--color-text-muted, #4b5563); line-height: 1.6; }
.dh-hm-info3__card a.dh-hm-info3__link { margin-top: auto; padding-top: 8px; font-size: 14px; font-weight: 750; color: var(--brand-primary); text-decoration: none; }
.dh-hm-info3__link::after { content: " \2192"; }
.dh-hm-info3__link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--brand-primary-dark); }

.dh-hm-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 767.98px) { .dh-hm-faq { grid-template-columns: 1fr; } }
.dh-hm-faq__item { padding: 20px; background: var(--color-surface-soft, #f7f8fa); border: 1px solid #e8ecf1; border-radius: 16px; }
.dh-hm-faq__item h3 { margin: 0 0 8px; font-size: 15.5px; color: var(--color-text, #111827); line-height: 1.35; }
.dh-hm-faq__item p { margin: 0; font-size: 14px; color: var(--color-text-muted, #4b5563); line-height: 1.6; }
.dh-hm-faq__item a { color: var(--brand-primary); font-weight: 650; text-decoration: none; }
.dh-hm-faq__item a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dh-hm-about { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 991.98px) { .dh-hm-about { grid-template-columns: 1fr; } }
.dh-hm-about h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 12px; color: var(--color-text, #111827); letter-spacing: -.01em; }
.dh-hm-about p { color: var(--color-text-muted, #4b5563); font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.dh-hm-about a { color: var(--brand-primary); font-weight: 650; text-decoration: none; }
.dh-hm-about a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dh-hm-about__facts { display: grid; gap: 10px; padding: 22px; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; }
.dh-hm-about__fact { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-surface-soft, #eef1f5); }
.dh-hm-about__fact:last-child { border-bottom: 0; }
.dh-hm-about__fact strong { flex: 0 0 auto; min-width: 92px; font-size: 18px; color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.dh-hm-about__fact span { font-size: 13.5px; color: var(--color-text-muted, #4b5563); line-height: 1.45; }
/* ============================================================
 * §47 A11Y PHASE 1 — Kontrast-Fixes (Audit 19.07.2026)
 *    Ursache K1/K2: Modul 15 setzt GLOBAL `a:hover{color:brand !important}`
 *    (Gold->Rot-Sweep). Auf hellen Flaechen ok (8,7:1), auf dunklen
 *    Flaechen unlesbar (Footer-CTA 1,2:1). Dieses Modul laedt NACH 15
 *    und uebersteuert den Sweep fuer alle dunklen Kontexte.
 * ============================================================ */

/* --- Footer (dunkel, #020713): Hover IMMER hell --- */
#footer.dh-ft a:hover,
.dh-ft a:hover {
    color: #fff !important;
}
.dh-ft__cols a:hover,
.dh-ft__seo-links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* CTA-Button: Weiss auf abgedunkeltem Rot (7,7:1) — bg-Regel existiert in Modul 18 */

/* --- Schwarze Topbar: Hover hell statt Brand-Rot-auf-Schwarz.
       Der Sweep existiert auch als hochspezifische Regel
       `#header-top-bar a:not(.dropdown-item):not(.btn):hover` (!important)
       — gleiche Spezifitaet hier, dieses Modul laedt spaeter => gewinnt. *---*/
#header-top-bar a:hover,
#header-top-bar a:not(.dropdown-item):not(.btn):hover {
    color: #fff !important;
}

/* --- Startseiten-Trust-Band (dunkel): Kaskaden-sichere Textfarben --- */
.dh-hm-dark h2 { color: #fff !important; }
.dh-hm-dark a:hover { color: #fff !important; }
.dh-hm-greview__btn:hover { color: var(--color-text, #15171a) !important; } /* weisser Button behaelt dunklen Text */
.dh-hm-dark small,
.dh-hm-greview__left small { color: #c9cfd8 !important; }

/* ============================================================
 * §47b A11Y PHASE 2 — PLP-/Karten-Kontraste auf AA (axe-Daten 19.07.)
 * ============================================================ */
.dh-cat-toc__label { color: #5b6472 !important; }                       /* 3,09 -> 6,3 */
:is(#product-list, .opc-ProductStream, .productbox) .productlist-variation-rating {
    color: #5b6472 !important;                                          /* 3,25 -> 6,3; :is(#id)-Spezifitaet gegen Modul 08 */
}
:is(#product-list, .opc-ProductStream, .productbox) .rt-productlist-variation,
:is(#product-list, .opc-ProductStream, .productbox) .rt-productlist-variation span {
    color: var(--brand-primary) !important;                             /* Modul 17 graute den inneren SPAN (var(--color-text-soft, #8a8f97), 3,25:1);
                                                                           Design-Absicht Brand-Rot = 8,7:1 wiederhergestellt */
}
.dh-cat-reviews__meta { color: #57606e !important; }                    /* 2,98 -> ~6 auf var(--color-surface-soft, #fafbfc) */
:is(#sidebar, #result-wrapper, body) .badge.badge-outline-secondary {
    color: #5b6472 !important;                                          /* Filter-Badges 2,6 -> 6,3 */
}
:is(#product-list, .opc-ProductStream, .slick-slider-other) .rt-productlist-delivery__sep,
:is(#product-list, .opc-ProductStream, .slick-slider-other) .rt-productlist-delivery__time {
    color: #2f6b57 !important;                                          /* 4,31 -> 5,9 (auch auf #f5f7fa) */
}

/* ============================================================
 * §47c A11Y PHASE 3 — Touch-Targets >=44px (Hit-Area via
 *    padding + negative margin: Optik/Layout unveraendert)
 * ============================================================ */
#header .nav-link-custom,
#header .navbar-nav .nav-link { padding-top: 10px; padding-bottom: 10px; }
.breadcrumb-item a { display: inline-block; padding-block: 12px; margin-block: -12px; }
.dh-sale__code { padding-block: 12px; margin-block: -8px; }
.dh-hero2__advice { display: inline-block; padding-block: 10px; margin-block: -10px; }
.dh-hm-info3__link, .dh-hm-guide__cta { padding-block: 8px; margin-bottom: -8px; }
.productbox .shipinfo2 { display: inline-block; padding-block: 8px; margin-block: -8px; }
.productbox a.rating { display: inline-flex; align-items: center; min-height: 32px; }

/* ============================================================
 * §47d A11Y PHASE 5 — prefers-reduced-motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}
/* ==========================================================================
   AdaReviews an die Marke angleichen
   --------------------------------------------------------------------------
   Das Plugin bringt bewusst eine shop-unabhaengige Schwarz-Weiss-Basis mit,
   damit es in jedem Shop gleich aussieht. Die EINE Stelle, an der es sich
   dem Haus anpasst, ist die Sternefarbe — hier auf exakt die Toene gelegt,
   die die bisherige Bewertungsanzeige verwendet hat (#f5a623 gefuellt,
   #d7dce3 leer, gemessen in 18-footer-reviews-promo.css bzw. der alten
   .dh-reviews-Anzeige).

   Die Variablen muessen auf ALLEN vier Wurzeln des Plugins stehen: Der
   Tab-Ersatzblock sitzt im Theme-Markup und die Lightbox haengt am Body,
   beide liegen ausserhalb von .adarev.
   ========================================================================== */
.adarev,
.adarev-tabinfo,
.adarev-lightbox,
.adarev-dialog {
    --adarev-stern: #f5a623;
    --adarev-stern-leer: #d7dce3;
}
/* ============================================================================
   §46 AUSSTATTUNGS-OPTIONEN MIT AUFPREIS (Klickdaten-Phase 2, 16.08.2026)
----------------------------------------------------------------------------
   BEFUND (rplay 13.-16.08., nur engaged): An den Ausstattungs-Gruppen brachen
   73-93 % ab — Multiblock-Thermostat 210 von 225 Kontakten, Heizstab ESSENTIAL
   im Schnitt 147 s Verweildauer. Ursache: der Aufpreis stand NIRGENDS und die
   langen Optionsnamen quetschten sich in halbbreite Pillen.

   LOESUNG: Ausstattungs-Gruppen (alles ausser Groesse/Hoehe/Breite) rendern als
   ZEILEN — links der Name, rechts der Preis, wie eine Preisliste. Groessen
   bleiben unveraendert Pillen mit Watt (User-Entscheidung 16.08.: kein Preis an
   Groessen, sonst drei Angaben pro Pille).

   Markup: dh_pdp_variation_pills.tpl setzt .dh-pdp-radio-options--rows an den
   Container; Preis/Sperrgrund kommen als __aufpreis / __limit.
   ========================================================================= */

#product-offer .dh-pdp-radio-options--rows {
  flex-direction: column;
  gap: 8px;
}

#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-option {
  display: block;
  width: 100%;
}

/* Zeile: Name links, Preis rechts. Die Pille selbst bleibt das Bedienelement —
   nur Fluss und Ausrichtung aendern sich, Rahmen/Fokus/Aktiv-Zustand erbt
   alles aus §45 (14-pdp-buybox-layer.css). */
#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  text-align: left;
}

/* :has-Regel aus §45 greift auch hier — in Zeilen soll die Pille aber NICHT
   in den Spaltenfluss kippen. */
#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill:has(.dh-pdp-radio-pill__watt) {
  flex-direction: row;
}

#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
}

/* Aufpreis rechts: tabellarische Ziffern, damit mehrere Zeilen sauber
   untereinander stehen. */
#product-offer .dh-pdp-radio-pill__aufpreis {
  flex: 0 0 auto;
  color: var(--color-text, #1f2937);
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#product-offer .dh-pdp-radio-pill__aufpreis--incl {
  color: var(--color-text-soft, #6b7280);
  font-size: 12px;
  font-weight: 620;
}

#product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill .dh-pdp-radio-pill__aufpreis,
#product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__aufpreis {
  color: rgba(var(--brand-primary-rgb), .82);
}

/* Sperrgrund an der Pille ("nur mit 30 cm"). Vorher steckte er nur im
   title-Attribut — auf dem Handy also unsichtbar. */
#product-offer .dh-pdp-radio-pill__limit {
  display: block;
  width: 100%;
  margin-top: 3px;
  color: var(--color-text-soft, #6b7280);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
}

#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill__limit {
  width: auto;
  margin-top: 0;
  white-space: normal;
  text-align: right;
}

/* Gesperrte Pille: der Grund darf nicht mit ausgegraut werden, sonst ist er
   unleserlich — er ist die Erklaerung fuer die Sperre. */
#product-offer .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__limit {
  color: var(--color-text-muted, #4b5563);
}

@media (max-width: 575.98px) {
  #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill {
    min-height: 46px;
    padding: 9px 12px;
  }

  #product-offer .dh-pdp-radio-pill__aufpreis {
    font-size: 12.5px;
  }
}

/* ============================================================================
   §46b MOBILE REIHENFOLGE + KOMPAKTE MENGE (Klickdaten-Phase 2b, 16.08.2026)
----------------------------------------------------------------------------
   BEFUND: Die Buybox ist mobil 1.734 px hoch, die durchschnittliche
   Scrolltiefe auf Produktseiten aber nur 17 % — die Auswahl lag damit fuer die
   meisten Besucher unterhalb des je Gesehenen. 289 px davon sind die
   Wawi-Kurzbeschreibung (.dh-kb, 6 Vorteils-Karten), die zwischen Preis und
   Auswahl steht.

   LOESUNG: reine Reihenfolge per CSS-order — die Kurzbeschreibung wandert
   mobil UNTER den Kaufbereich. Kein Inhalt wird versteckt, die Wawi bleibt
   unberuehrt, und es findet KEIN DOM-Move statt (ein DOM-Move ueber Container
   hatte hier schon den Lazy-Observer der Avatare zerlegt und beim
   Variantenwechsel Dopplungen erzeugt, s. dh-pdp-mobile-reorder.js).

   ANSCHLUSS AN DAS BESTEHENDE SCHEMA (14-pdp-buybox-layer.css ~5555):
   __head ist mobil display:contents, seine Kinder liegen also im Flex-Fluss:
     1 meta-row · 2 title · 3 dh-kb · 4 price · 5 mobile-logistics · 6 offer
   dh-kb wandert deshalb auf 7 — NICHT die anderen umnummerieren. Alle dortigen
   Regeln tragen !important, ein order ohne !important verpufft (am 16.08. live
   gemessen: dh-kb 3, offer 6 -> Reihenfolge unveraendert).
   ========================================================================= */
@media (max-width: 767.98px) {
  body #product-offer .dh-kb {
    order: 7 !important;
    margin: 22px 0 0 !important;
  }
}

/* BEWUSST NICHT UMGESETZT — kompakter Mengen-Stepper (Phase-2b-Idee 16.08.):
   Menge und Kaufbutton in eine Zeile zu setzen haette ~60 px gespart, aber
   17-brand-typography.css (~973) stapelt sie mobil ABSICHTLICH ueber die volle
   Breite ("Qty + ATC gestapelt, beide VOLLE BREITE", display:block !important).
   Der Kaufbutton waere bei 375 px von 323 auf ~209 px geschrumpft — und die
   Klickdaten zeigen an "In den Warenkorb" KEIN Problem (keine Dead-/Rage-Clicks).
   Eine begruendete frueherer Entscheidung wird deshalb nicht still gekippt; die
   angestrebten Pixel bringt bereits die order-Umstellung oben (Auswahl 220 px
   hoeher: 1.290 -> 1.070 px). Wieder aufgreifen nur mit A/B-Beleg. */
/* ============================================================================
   §47 PRODUKTBILD-LIGHTBOX MIT ZOOM (Klickdaten-Phase 3, 16.08.2026)
----------------------------------------------------------------------------
   BEFUND (rplay 13.-16.08., nur engaged): Das Produktbild ist der
   meistgeklickte TOTE Bereich im ganzen Shop — 354 Dead-Clicks (262 mobil,
   82 Desktop, 10 Tablet), dazu ~130 Dead-Clicks INNERHALB des alten
   Bild-Modals. Auf dem Desktop reagierte der Klick per NOVA-Design ueberhaupt
   nicht, mobil oeffnete eine Liste derselben Bilder ohne Zoom.

   Markup/Verhalten: js/dh-pdp-lightbox.js (Overlay wird dort erzeugt), Lupe im
   Template (productdetails/image.tpl, .dh-gallery-zoom).
   Zurueckhaltung mit Absicht: schwarzes Overlay, weisse Bedienelemente, keine
   Effekte — die Ware soll wirken, nicht die Huelle.
   ========================================================================= */

/* --- Lupe an der Galerie ------------------------------------------------- */
#gallery_wrapper {
  position: relative;
}

.dh-gallery-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-text, #1f2937);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.dh-gallery-zoom svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.dh-gallery-zoom:hover {
  border-color: rgba(var(--brand-primary-rgb), 0.35);
  color: var(--brand-primary, var(--brand-primary));
}

.dh-gallery-zoom:focus-visible {
  outline: 2px solid var(--brand-primary, var(--brand-primary));
  outline-offset: 2px;
}

/* Auf schmalen Telefonen nur das Symbol — Text kostet dort zu viel Bildflaeche */
@media (max-width: 575.98px) {
  .dh-gallery-zoom {
    right: 8px;
    bottom: 8px;
    min-height: 34px;
    padding: 8px;
  }

  .dh-gallery-zoom span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --- Overlay ------------------------------------------------------------- */
body.dh-lb-offen {
  overflow: hidden;
}

/* Chat-Knopf (#chatbot-widget, z-index 9999, fixiert unten rechts — am Live-DOM
   ermittelt) liegt sonst UEBER der Miniaturleiste und verdeckt das letzte Bild.
   Nur solange die Bildansicht offen ist; faellt der Selektor beim Widget-Update
   weg, aendert sich nichts Weiteres. */
body.dh-lb-offen #chatbot-widget {
  display: none !important;
}

.dh-lb {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  /* DECKEND, nicht 94 %: bei Teiltransparenz blieben Kopfzeile, Breadcrumb und
     Produkttitel als Geisterbild lesbar (16.08. an den Pixeln gemessen). Bei
     einem Shop fuer Design-Heizkoerper muss die Ware wirken — nicht die Huelle. */
  background: #0b0e13;
  overscroll-behavior: contain;
  /* KEIN touch-action:none hier! Der Browser bildet die Schnittmenge ueber die
     ganze Vorfahrenkette — ein "none" am Overlay macht auch die Miniaturleiste
     unwischbar (User-Test 16.08.: "man kann unten nicht sliden"). Die Geste
     wird nur DORT unterdrueckt, wo wir sie selbst rechnen: an der Buehne. */
}

/* Spalte: Buehne oben (nimmt den Platz), Fuss mit Zaehler + Miniaturleiste
   unten. Vorher stand das Bild mittig und der schwarze Rand blieb ungenutzt —
   die anderen Bilder waren nur ueber Wischen erreichbar (User-Test 16.08.). */
.dh-lb.is-open {
  display: flex;
  flex-direction: column;
  /* stretch ist PFLICHT: mit dem geerbten align-items:center (aus dem frueheren
     mittigen Layout) bekam der Fuss shrink-to-fit-Breite — 560 px in einem
     375-px-Fenster. Die Leiste lief damit AUS dem Bildschirm statt intern zu
     scrollen, also gab es nichts zu wischen (16.08. an den Boxen gemessen). */
  align-items: stretch;
  justify-content: flex-start;
}

.dh-lb__stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  cursor: zoom-in;
  /* Hier — und nur hier — gehoeren die Gesten uns (Pinch, Wischen, Ziehen).
     Ohne das zoomt und scrollt iOS die ganze Seite mit. */
  touch-action: none;
}

.dh-lb__stage.is-zoomed {
  cursor: grab;
}

.dh-lb__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  /* Sanftes Einblenden beim Bildwechsel. Nachbarn sind vorgeladen, deshalb ist
     das im Normalfall unsichtbar — auf langsamer Verbindung gibt es Rueckmeldung
     statt eines Sprungs. */
  opacity: 1;
  transition: opacity 140ms ease-out;
}

.dh-lb__img.is-loading {
  opacity: 0.25;
}

.dh-lb--static .dh-lb__img {
  transition: none;
}

/* Ladeanzeige nur, wenn es wirklich dauert (JS setzt die Klasse ab 180 ms) */
.dh-lb__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: dhLbSpin 0.8s linear infinite;
}

.dh-lb__stage.is-waiting .dh-lb__spinner {
  opacity: 1;
}

@keyframes dhLbSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dh-lb__spinner { animation: none; }
}

/* --- Fuss: Zaehler + Miniaturleiste ------------------------------------- */
.dh-lb__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}

.dh-lb__thumbs {
  display: flex;
  gap: 8px;
  /* volle Fussbreite (nicht shrink-to-fit), damit der Inhalt INNEN ueberlaeuft
     und gewischt werden kann */
  width: 100%;
  min-width: 0;
  /* Wenige Bilder mittig, viele ab links: "safe center" faellt bei Ueberlauf
     automatisch auf start zurueck (sonst waere der Anfang abgeschnitten).
     Aeltere Browser behalten die erste Zeile. */
  justify-content: flex-start;
  justify-content: safe center;
  padding: 2px 2px 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  /* pan-x erlaubt das Wischen; wirkt nur, weil der Vorfahre kein none traegt */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;   /* Schwung auf iOS */
}

.dh-lb__thumbs::-webkit-scrollbar {
  height: 4px;
}

.dh-lb__thumbs::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.28);
}

.dh-lb__thumb {
  flex: 0 0 auto;
  width: 68px;
  height: 68px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  scroll-snap-align: center;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity 140ms ease-out, border-color 140ms ease-out;
}

.dh-lb__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dh-lb__thumb:hover {
  opacity: 0.85;
}

.dh-lb__thumb.is-active {
  opacity: 1;
  border-color: #fff;
}

.dh-lb__thumb:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Beim Zoomen stoert die Leiste — sie tritt zurueck, bleibt aber erreichbar. */
.dh-lb.is-zoomed .dh-lb__thumbs {
  opacity: 0.35;
}

.dh-lb--static .dh-lb__thumb,
.dh-lb--static .dh-lb__thumbs {
  transition: none;
}

.dh-lb--single .dh-lb__thumbs {
  display: none;
}

/* --- Bedienelemente ------------------------------------------------------ */
.dh-lb__close,
.dh-lb__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.dh-lb__close svg,
.dh-lb__nav svg {
  width: 22px;
  height: 22px;
}

.dh-lb__close:hover,
.dh-lb__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dh-lb__close:focus-visible,
.dh-lb__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dh-lb__close {
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
}

.dh-lb__nav--prev {
  top: 50%;
  left: calc(12px + env(safe-area-inset-left));
  transform: translateY(-50%);
}

.dh-lb__nav--next {
  top: 50%;
  right: calc(12px + env(safe-area-inset-right));
  transform: translateY(-50%);
}

/* Ein Bild: keine Blaetterknoepfe */
.dh-lb--single .dh-lb__nav {
  display: none;
}

/* Zaehler sitzt jetzt im Fuss (Flex-Kind), nicht mehr absolut ueber dem Bild */
.dh-lb__counter {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.dh-lb--single .dh-lb__counter {
  display: none;
}

@media (max-width: 767.98px) {
  .dh-lb__nav {
    width: 42px;
    height: 42px;
  }

  .dh-lb__nav--prev {
    left: calc(6px + env(safe-area-inset-left));
  }

  .dh-lb__nav--next {
    right: calc(6px + env(safe-area-inset-right));
  }

  .dh-lb__thumb {
    width: 60px;
    height: 60px;
  }

  .dh-lb__foot {
    gap: 7px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }
}

/* Desktop: groessere Miniaturen, mehr Luft */
@media (min-width: 992px) {
  .dh-lb__thumb {
    width: 84px;
    height: 84px;
  }

  .dh-lb__foot {
    gap: 10px;
    padding: 12px 16px 18px;
  }
}

/* --------------------------------------------------------------------------
   §47b KUNDENFOTOS-ZEILE IN DER BILDANSICHT (17.08.2026)
   Wunsch des Betreibers: in der Galerie kompakt zeigen, dass es zu diesem
   Vaterartikel echte Kundenfotos gibt — Klick fuehrt zum Foto-Karussell der
   Bewertungen ("so sieht das bei Kunden aus").

   Bildsprache absichtlich wie beim vorhandenen Social-Proof auf der PDP
   ("Katja, Regina und +309 andere"): ueberlappende runde Miniaturen. Eine
   Zeile, kein zweiter Block — die Bildansicht bleibt eine Bildansicht.
   Inhalt kommt aus dem Plugin-Markup (#adarev-gal), s. dh-pdp-lightbox.js.
   ----------------------------------------------------------------------- */
.dh-lb__revrow {
  display: flex;
  justify-content: center;
  width: 100%;
}

.dh-lb__revrow[hidden] {
  display: none;
}

.dh-lb__rev {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.dh-lb__rev:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.16);
}

.dh-lb__rev:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.dh-lb__rev > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: 0.75;
}

.dh-lb__rev-avas {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Leicht ueberlappende FOTO-KACHELN, keine Kreise: Kundenfotos von Heizkoerpern
   sind hochkant: ein runder Ausschnitt beschneidet sie so eng, dass man nicht
   mehr erkennt, dass es Fotos sind (17.08. am Screenshot gesehen — die Kreise
   wirkten wie abstrakte Streifen). Genau das soll die Zeile aber zeigen.
   Kacheln mit wenig Ueberlappung lesen sich als Stapel echter Bilder. */
.dh-lb__rev-ava {
  width: 34px;
  height: 34px;
  border: 2px solid #0b0e13;   /* trennt die Kacheln optisch voneinander */
  border-radius: 7px;
  overflow: hidden;
  background: #22262e;
}

.dh-lb__rev-ava + .dh-lb__rev-ava {
  margin-left: -7px;
}

.dh-lb__rev-ava img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dh-lb__rev-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.dh-lb__rev-txt strong {
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dh-lb__rev-txt span {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

/* Beim Zoomen tritt die Zeile zurueck wie die Produktleiste */
.dh-lb.is-zoomed .dh-lb__revrow {
  opacity: 0.35;
}

@media (max-width: 575.98px) {
  .dh-lb__rev {
    gap: 8px;
    padding: 6px 10px 6px 8px;
  }

  .dh-lb__rev-ava {
    width: 30px;
    height: 30px;
    border-radius: 6px;
  }

  .dh-lb__rev-ava + .dh-lb__rev-ava {
    margin-left: -6px;
  }

  .dh-lb__rev-txt strong { font-size: 12.5px; }
  .dh-lb__rev-txt span   { font-size: 11px; }
}

/* Kurze Hervorhebung des Sprungziels (Foto-Karussell der Bewertungen) */
.dh-rev-flash {
  animation: dhRevFlash 1.4s ease;
  border-radius: 12px;
}

@keyframes dhRevFlash {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0); }
  18%  { box-shadow: 0 0 0 4px rgba(var(--brand-primary-rgb), 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .dh-rev-flash { animation: none; }
}

/* --------------------------------------------------------------------------
   §47c KUNDENFOTO-BAND AUF DER PRODUKTSEITE (17.08.2026)
   Ersetzt das Social-Proof-Band mit gekauften Avataren, WENN es zu diesem
   Vaterartikel echte Kundenfotos gibt (dh_pdp_customer_photos.tpl).
   Geometrie bewusst 1:1 vom alten Band uebernommen (15-pdp-polish-token-sweep
   .css ~484), damit die Rating-Zeile ihr Layout behaelt — nur die Bilder sind
   groesser (Wunsch 17.08.) und echte Fotos statt Kreise.
   ----------------------------------------------------------------------- */
body #product-offer .dh-cusphoto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0 4px;
  padding: 10px 14px;
  border: 1px solid #e8edf2;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(var(--brand-primary-rgb), .05) 0, rgba(var(--brand-primary-rgb), 0) 160px),
    #fff;
  color: #151d2c;
  text-decoration: none !important;
  cursor: pointer;
}

body #product-offer .dh-cusphoto:hover {
  border-color: rgba(var(--brand-primary-rgb), .3);
}

body #product-offer .dh-cusphoto:focus-visible {
  outline: 2px solid var(--brand-primary, var(--brand-primary));
  outline-offset: 2px;
}

body #product-offer .dh-cusphoto__pics {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Foto-Kacheln, leicht ueberlappend — deutlich groesser als die alten
   36-px-Avatare, damit man das Motiv erkennt. */
body #product-offer .dh-cusphoto__pic {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 9px;
  overflow: hidden;
  background: var(--color-surface-soft, #eef2f6);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

body #product-offer .dh-cusphoto__pic + .dh-cusphoto__pic {
  margin-left: -10px;
}

/* Hoechstens DREI Kacheln. Gemessen 17.08.: das Band sitzt in der schmalen
   Bewertungszeile (385 px auf dem Desktop) — fuenf 56-px-Kacheln liessen dem
   Text 73 px und er brach auf vier Zeilen um. */
body #product-offer .dh-cusphoto__pic:nth-child(n + 4) {
  display: none;
}

body #product-offer .dh-cusphoto__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body #product-offer .dh-cusphoto__txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.25;
}

body #product-offer .dh-cusphoto__txt strong {
  font-size: 14px;
  font-weight: 800;
}

body #product-offer .dh-cusphoto__txt span {
  font-size: 12.5px;
  font-weight: 600;
  color: #5b6675;
  white-space: nowrap;          /* Unterzeile nie umbrechen */
  overflow: hidden;
  text-overflow: ellipsis;
}

body #product-offer .dh-cusphoto__txt strong {
  text-wrap: balance;           /* zwei gleich lange Zeilen statt Waisenwort */
}

body #product-offer .dh-cusphoto__arr {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--brand-primary, var(--brand-primary));
}

@media (min-width: 992px) {
  body #product-offer .dh-cusphoto__pic {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 575.98px) {
  body #product-offer .dh-cusphoto {
    gap: 10px;
    padding: 9px 12px;
  }

  body #product-offer .dh-cusphoto__pic {
    width: 44px;
    height: 44px;
  }

  body #product-offer .dh-cusphoto__txt strong { font-size: 13.2px; }
  body #product-offer .dh-cusphoto__txt span   { font-size: 11.8px; }
}

/* Sprungziel kurz hervorheben (auch bei Ankersprung ohne JS sichtbar) */
#adarev-gal:target,
#adarev-bewertungen:target {
  scroll-margin-top: 96px;
}
/* ============================================================================
   §RH-1 VARIATIONEN ALS CHIPS + KACHELN (rothler, 08.09.2026, Mobil-Massnahme 3)
   ----------------------------------------------------------------------------
   Grundlage: MOBILMASSNAHMENDHRH20260907 + Baymard (Buttons statt Dropdown).
   Markup: dh_pdp_variation_pills.tpl (auch fuer Wawi-Typ SELECTBOX), Werte mit
   Doppelpunkt kommen aus variation_value.tpl als .rh-var-main / .rh-var-sub.
   Masse: Chips >= 44 px (Apple HIG), Kacheln 56-60 px, Abstand 8 px, Schrift 16 px.
   Gewaehlt = vollflaechig Blau 600 (--brand-primary, 5,6:1 auf Weiss), nicht nur Rahmen.
   Nicht verfuegbar = durchgestrichen + Grau, KEIN Klick-Dialog.
   Alle Farben aus css/brand.css. Selektoren wie §45/§46 (#product-offer), damit die
   Regeln die DH-Basis ueberschreiben, ohne sie zu loeschen.
   ========================================================================= */

/* --- Chips (Groessen-Gruppen: Baugroesse (B x H), Groesse, Hoehe, Breite) --- */
#product-offer .dh-pdp-radio-options {
  gap: 8px;
}
#product-offer .dh-pdp-radio-pill {
  min-height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--color-line, #ebebeb);
  border-radius: 10px;
  color: var(--color-text, #0a1628);
  font-size: 16px;
  font-weight: 600;
  box-shadow: none;
}
#product-offer .dh-pdp-radio-pill:hover {
  border-color: var(--brand-accent, #147bcb);
  color: var(--brand-primary, #116bb0);
}
#product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
#product-offer .dh-pdp-radio-pill.is-active {
  border-color: var(--brand-primary, #116bb0);
  background: var(--brand-primary, #116bb0);
  color: var(--brand-on-primary, #fff);
  box-shadow: none;
}
#product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill .dh-pdp-radio-pill__watt,
#product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__watt,
#product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__aufpreis,
#product-offer .dh-pdp-radio-pill.is-active .rh-var-sub {
  color: rgba(255, 255, 255, .82);
}
#product-offer .dh-pdp-radio-input:focus-visible + .dh-pdp-radio-pill {
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), .28);
}

/* --- Nicht verfuegbar: vorab sichtbar, kein Sackgassen-Dialog --- */
#product-offer .dh-pdp-radio-pill.is-limited,
#product-offer .dh-pdp-radio-pill.is-stockout {
  color: var(--color-text-soft, #707070);
  border-style: dashed;
  background: var(--color-surface-soft, #f5f7fa);
}
#product-offer .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__text > :first-child,
#product-offer .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__text > :first-child,
#product-offer .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__text:not(:has(*)) {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* --- Kacheln (alle Nicht-Groessen-Gruppen: Betriebsart/Zubehoer, Farbe-Oberflaeche, Anschluss-Set) --- */
#product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill {
  min-height: 56px;
  padding: 8px 14px;
  border-radius: 12px;
}
#product-offer .rh-var-main,
#product-offer .rh-var-sub {
  display: block;
  line-height: 1.25;
}
#product-offer .rh-var-main {
  font-size: 16px;
  font-weight: 700;
}
#product-offer .rh-var-sub {
  margin-top: 2px;
  color: var(--color-text-muted, #525252);
  font-size: 13px;
  font-weight: 500;
}
/* Farb-Kacheln ("Weiss - Glatt RAL9016"): zweispaltig ab 400 px Breite, sonst untereinander */
@media (min-width: 400px) {
  #product-offer .dh-pdp-radio-options--rows.rh-var-cols2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Mobil: viele Groessen als eine horizontal scrollbare Zeile (Baymard/Everlane) --- */
@media (max-width: 767.98px) {
  #product-offer .dh-pdp-radio-options--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-right: -16px;
    padding-right: 16px;
  }
  #product-offer .dh-pdp-radio-options--scroll::-webkit-scrollbar { display: none; }
  #product-offer .dh-pdp-radio-options--scroll .dh-pdp-radio-option {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill {
    min-height: 56px;
  }
  /* Gruppen-Label: 16 px, 8 px Abstand zur Zeile */
  #product-offer .variation-wrapper dt {
    font-size: 16px !important;
    margin-bottom: 8px !important;
  }
  #product-offer .variation-wrapper {
    margin: 0 0 14px !important;
  }
}

/* --- Durchsetzung gegen DH-!important-Regeln (14-pdp-buybox-layer §5765 ff.):
   gleiche Spezifitaet (body #product-offer .dh-pdp-buybox__section--variants) + !important --- */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill,
body #product-offer .dh-pdp-radio-pill {
  min-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 10px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--color-text, #0a1628) !important;
  background: #fff !important;
  border-color: var(--color-line, #ebebeb) !important;
  box-shadow: none !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill:hover,
body #product-offer .dh-pdp-radio-pill:hover {
  border-color: var(--brand-accent, #147bcb) !important;
  color: var(--brand-primary, #116bb0) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-active,
body #product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill,
body #product-offer .dh-pdp-radio-pill.is-active {
  background: var(--brand-primary, #116bb0) !important;
  border-color: var(--brand-primary, #116bb0) !important;
  color: #fff !important;
}
body #product-offer .dh-pdp-radio-pill.is-active .rh-var-sub,
body #product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__aufpreis,
body #product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__watt,
body #product-offer .dh-pdp-radio-pill.is-active .dh-pdp-radio-pill__limit {
  color: rgba(255, 255, 255, .85) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-pill,
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill {
  min-height: 56px !important;
  padding: 8px 14px !important;
  border-radius: 12px !important;
}
/* Nicht verfuegbar (is-limited / is-stockout): gedaempft, gestrichelt, Grund als eigene Zeile darunter */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-stockout,
body #product-offer .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-pill.is-stockout {
  color: var(--color-text-soft, #707070) !important;
  border-style: dashed !important;
  border-color: #cfd4dc !important;
  background: var(--color-surface-soft, #f5f7fa) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
body #product-offer .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__text,
body #product-offer .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__text {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
body #product-offer .dh-pdp-radio-pill__limit {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}
/* Chips: Text einzeilig, Kacheln: zweizeilig links */
body #product-offer .dh-pdp-radio-options:not(.dh-pdp-radio-options--rows) .dh-pdp-radio-pill__text {
  white-space: nowrap;
}
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill__text {
  text-align: left;
}
/* Mobil: 16 px Grundschrift + Formularfelder (kein iOS-Auto-Zoom) */
@media (max-width: 767.98px) {
  body { font-size: 16px !important; }
  #product-offer input, #product-offer select, #product-offer textarea, #product-offer .form-control { font-size: 16px !important; }
}

/* ============================================================================
   §RH-2 VARIATIONS-PANEL + STICKY-LEISTE (08.09.2026, User-Feedback: "Flaeche
   nicht erkennbar, sieht aus wie DH, Sticky zeigt keine Auswahl")
   Panel = Blau-50-Flaeche mit Blau-200-Rand: die Auswahl ist als EIN Bereich
   lesbar, Chips liegen weiss darauf, gewaehlt Blau 600. Gruppen-Labels als
   kleine Eyebrows in Blau 700. Sticky: Preis + gewaehlte Variante (tippbar),
   Button Blau 600, 52 px.
   ========================================================================= */
body #product-offer .dh-pdp-buybox__section--variants {
  margin: 0 0 16px !important;
  padding: 12px 14px 14px !important;
  border: 1px solid var(--blue-200, #bcdcf5) !important;
  border-radius: 14px !important;
  background: var(--blue-50, #f2f8fd) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper {
  margin: 0 0 12px !important;
}
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper:last-child {
  margin-bottom: 0 !important;
}
body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt {
  margin: 0 0 6px !important;
  color: var(--blue-700, #0e548b) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:not(:checked) + .dh-pdp-radio-pill:not(.is-active):not(.is-limited):not(.is-stockout) {
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 1px 2px rgba(10, 22, 40, .08) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:not(:checked) + .dh-pdp-radio-pill:not(.is-active):hover {
  border-color: var(--brand-accent, #147bcb) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-active {
  box-shadow: 0 4px 12px -4px rgba(var(--brand-primary-rgb), .55) !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-stockout {
  background: transparent !important;
  border-color: var(--blue-200, #bcdcf5) !important;
}

/* --- Sticky-Leiste --- */
@media (max-width: 767.98px) {
  .rt-pdp-mobile-cta {
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    border-top: 1px solid var(--blue-200, #bcdcf5) !important;
    box-shadow: 0 -8px 24px -12px rgba(10, 22, 40, .35) !important;
  }
  .rt-pdp-mobile-cta__inner {
    grid-template-columns: minmax(0, 1fr) minmax(158px, 46%) !important;
    gap: 10px !important;
    align-items: center !important;
  }
  .rt-pdp-mobile-cta__summary { min-width: 0; }
  .rt-pdp-mobile-cta__label { display: none !important; }
  .rt-pdp-mobile-cta__price {
    color: var(--color-text, #0a1628) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
  }
  .rt-pdp-mobile-cta__note {
    color: var(--color-text-soft, #707070) !important;
    font-size: 11px !important;
  }
  .rt-pdp-mobile-cta__variant {
    display: block;
    max-width: 100%;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-primary, #116bb0);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rt-pdp-mobile-cta__variant::after { content: ' ›'; }
  .rt-pdp-mobile-cta__variant[hidden] { display: none; }
  .rt-pdp-mobile-cta__button,
  .rt-pdp-mobile-cta__button--choose {
    min-height: 52px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--brand-primary, #116bb0) !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(var(--brand-primary-rgb), .7) !important;
  }
  .rt-pdp-mobile-cta__button:active { background: var(--brand-primary-dark, #0e548b) !important; }
  .rt-pdp-mobile-cta__button--choose { background: var(--blue-900, #072a46) !important; }
}

/* Erst-Klick-Zustand (:checked vor dem AJAX-Fragment): sofort Blau, nie weiss-auf-weiss */
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill:not(.is-limited):not(.is-stockout),
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.is-active:not(.is-limited):not(.is-stockout) {
  background: var(--brand-primary, #116bb0) !important;
  border-color: var(--brand-primary, #116bb0) !important;
  color: #fff !important;
}

/* --- A4: Bild an der Kachel (Farbe = Kind-Artikelfoto, Betriebsart = Freisteller) --- */
body #product-offer .dh-pdp-radio-options--rows .rh-var-option--thumb .dh-pdp-radio-pill {
  padding-left: 8px !important;
  gap: 10px !important;
}
/* Bild-Wrapper: 56 px, Farbe = Artikelfoto herangezoomt (Heizkoerper statt Raum), Betriebsart = Zubehoer-Komposition (contain) */
body #product-offer .rh-var-thumbwrap {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-line, #ebebeb);
  display: block;
}
body #product-offer .rh-var-thumb { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; background: #fff; }
body #product-offer .rh-var-thumbwrap--zoom .rh-var-thumb { transform: scale(1.9); transform-origin: 50% 46%; }
body #product-offer .rh-var-thumbwrap--ba .rh-var-thumb { object-fit: contain; padding: 2px; }
body #product-offer .dh-pdp-radio-pill.is-active .rh-var-thumbwrap {
  border-color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
}

/* QA 9: gesperrter Chip (mit Sperrgrund) nimmt die volle Zeile, statt das 2-Spalten-Raster zu brechen */
body #product-offer .dh-pdp-radio-options:not(.dh-pdp-radio-options--rows) .dh-pdp-radio-option:has(.is-limited),
body #product-offer .dh-pdp-radio-options:not(.dh-pdp-radio-options--rows) .dh-pdp-radio-option:has(.is-stockout) {
  flex: 1 1 100% !important;
  width: 100% !important;
}
body #product-offer .dh-pdp-radio-options:not(.dh-pdp-radio-options--rows) .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-options:not(.dh-pdp-radio-options--rows) .dh-pdp-radio-pill.is-stockout {
  width: 100% !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  min-height: 44px !important;
}

/* Desktop/Tablet: Kacheln (Farbe/Betriebsart) zweispaltig -> Panel ~40 % kuerzer, Button frueher im Bild (QA 12) */
@media (min-width: 768px) {
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options.dh-pdp-radio-options--rows,
  body #product-offer .dh-pdp-radio-options.dh-pdp-radio-options--rows {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-option,
  body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-option { display: block !important; width: 100% !important; max-width: none !important; }
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-pill,
  body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill { min-height: 52px !important; width: 100% !important; }
}

/* Gesperrte KACHEL (rows-Modus): Foto links, Text + Grund rechts - nicht als Spalte stapeln */
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-stockout {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
}
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__limit,
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__limit {
  flex-basis: 100% !important;
  padding-left: 58px !important;
}

/* Gesperrter Groessen-Chip: Grundzeile darf den Chip-Text nicht ueberlagern (mobil sichtbar gewesen) */
body #product-offer .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-pill.is-stockout { display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; align-items: center !important; row-gap: 2px !important; column-gap: 10px !important; }
body #product-offer .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__limit,
body #product-offer .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__limit { position: static !important; flex: 1 1 100% !important; white-space: normal !important; margin: 0 !important; }

/* --- Mobil kompakt (08.09. abends): Farbe + Betriebsart als 2-spaltige Kacheln (44-px-Bild, Text darf umbrechen),
       gesperrte Kacheln nehmen die volle Zeile. Ziel: Auswahlbereich 1.009 -> ~650 px, Button frueher erreichbar. --- */
@media (max-width: 767.98px) {
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options.dh-pdp-radio-options--rows {
    display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important;
  }
  /* Farbe: 2 Spalten (Zeile 1 Farbe, Zeile 2 Oberflaeche); Betriebsart: 1 Spalte, 60 px */
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options.rh-var-group--color { grid-template-columns: 1fr 1fr !important; }
  body #product-offer .dh-pdp-radio-options--rows .rh-var-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  /* Abstaende Bild -> Kurzfakten -> Auswahl enger, Titel max. 2 Zeilen */
  body[data-page="1"] #product-offer .product-thumbnails-wrapper { margin-bottom: 4px !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh-facts-wrap { margin: 0 0 8px !important; }
  body[data-page="1"] #product-offer .dh-pdp-buybox__section--variants { margin-top: 4px !important; }
  body[data-page="1"] #product-offer h1.dh-pdp-buybox__title, body[data-page="1"] #product-offer h1.product-title {
    display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
    font-size: 19px !important; line-height: 1.2 !important; max-height: 2.4em !important;
  }
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-option { width: auto !important; min-width: 0 !important; }
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-option:has(.is-limited),
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options--rows .dh-pdp-radio-option:has(.is-stockout) { grid-column: 1 / -1 !important; }
  body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill { min-height: 60px !important; padding: 6px 8px 6px 6px !important; gap: 8px !important; height: auto !important; }
  body #product-offer .dh-pdp-radio-options--rows .rh-var-thumbwrap { flex-basis: 44px !important; width: 44px !important; height: 44px !important; border-radius: 8px !important; }
  body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill__text { white-space: normal !important; font-size: 14px !important; line-height: 1.15 !important; min-width: 0; }
  body #product-offer .dh-pdp-radio-options--rows .rh-var-main { font-size: 14px !important; line-height: 1.15 !important; }
  body #product-offer .dh-pdp-radio-options--rows .rh-var-sub { font-size: 11px !important; line-height: 1.15 !important; letter-spacing: -.01em; }
  body #product-offer .rh-var-group--color .dh-pdp-radio-pill { padding-right: 4px !important; }
}
/* ============================================================================
   §RH-3 MOBIL-HEADER (rothler, 08.09.2026) — Burger/Suche/Konto/Warenkorb
   Befund: Burger + Suche standen auf color #fff (DH-Erbe, roter Header) -> auf
   dem hellen rothler-Header unsichtbar. Jetzt: alle Header-Icons Blau 900,
   24 px, Tastflaeche 44 px, eine Linie mit dem Logo (Logo 30 px hoch).
   Warenkorb-Badge Blau 600 / weiss.
   ========================================================================= */
@media (max-width: 991.98px) {
  body #jtl-nav-wrapper,
  body #jtl-nav-wrapper .navbar,
  body header.rt-opc-header {
    background: #fff !important;
  }
  body #jtl-nav-wrapper .burger-menu-wrapper,
  body #jtl-nav-wrapper .navbar-toggler,
  body #jtl-nav-wrapper .dh-msearch-toggle,
  body #jtl-nav-wrapper .nav-icons .nav-link,
  body #jtl-nav-wrapper .nav-icons a,
  body #jtl-nav-wrapper .nav-icons button,
  body #jtl-nav-wrapper .nav-icons i,
  body #jtl-nav-wrapper .nav-icons svg {
    color: var(--blue-900, #072a46) !important;
    fill: var(--blue-900, #072a46) !important;
    opacity: 1 !important;
  }
  body #jtl-nav-wrapper .burger-menu-wrapper,
  body #jtl-nav-wrapper .navbar-toggler,
  body #jtl-nav-wrapper .dh-msearch-toggle,
  body #jtl-nav-wrapper .nav-icons .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  body #jtl-nav-wrapper .nav-icons i,
  body #jtl-nav-wrapper .dh-msearch-toggle i {
    font-size: 22px !important;
    line-height: 1 !important;
  }
  /* Burger: drei Balken in Blau 900, 22 px breit */
  body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon,
  body #jtl-nav-wrapper .navbar-toggler-icon {
    width: 22px !important;
    height: 2px !important;
    background: var(--blue-900, #072a46) !important;
    background-image: none !important;
    border-radius: 2px !important;
    position: relative !important;
    display: block !important;
  }
  body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::before,
  body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::after,
  body #jtl-nav-wrapper .navbar-toggler-icon::before,
  body #jtl-nav-wrapper .navbar-toggler-icon::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--blue-900, #072a46) !important;
    border-radius: 2px !important;
    display: block !important;
  }
  body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::before,
  body #jtl-nav-wrapper .navbar-toggler-icon::before { top: -7px !important; transform: none !important; }
  body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::after,
  body #jtl-nav-wrapper .navbar-toggler-icon::after  { top: 7px !important; transform: none !important; }
  /* DH zeichnet einen eigenen Burger per Pseudo-Element am Button -> aus */
  body #jtl-nav-wrapper #burger-menu::before,
  body #jtl-nav-wrapper #burger-menu::after,
  body #jtl-nav-wrapper .burger-menu-wrapper::before,
  body #jtl-nav-wrapper .burger-menu-wrapper::after { content: none !important; display: none !important; }
  /* Offen: Mittelbalken weg, Aussenbalken zum X */
  body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon { background: transparent !important; }
  body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::before { top: 0 !important; transform: rotate(45deg) !important; }
  body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::after  { top: 0 !important; transform: rotate(-45deg) !important; }
  /* Logo: 30 px hoch, auf einer Linie mit den Icons */
  body #jtl-nav-wrapper .navbar-brand img,
  body #jtl-nav-wrapper #shop-logo {
    height: 30px !important;
    width: auto !important;
    max-width: 150px !important;
  }
  body #jtl-nav-wrapper .toggler-logo-wrapper,
  body #jtl-nav-wrapper .logo-wrapper,
  body #jtl-nav-wrapper .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
  }
  /* Warenkorb-Zaehler */
  body #jtl-nav-wrapper .nav-icons .badge,
  body #jtl-nav-wrapper .nav-icons .cart-count {
    background: var(--brand-primary, #116bb0) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 14px !important;
    border-radius: 9px !important;
    padding: 0 4px !important;
  }
  body #jtl-nav-wrapper .nav-icons .cart-dropdown-label,
  body #jtl-nav-wrapper .nav-icons .cart-price,
  body #jtl-nav-wrapper .nav-icons .dropdown-toggle::after {
    display: none !important;
  }
}
/* ============================================================================
   §RH-4 PDP MOBIL: KAUFBEREICH IM ERSTEN BILDSCHIRM (rothler, 08.09.2026, Massnahme 1)
   ----------------------------------------------------------------------------
   Befund (390x844): Galerie 466 px oben, Titel erst bei 633, Preis 713, Auswahl 879,
   Button 1840 -> Scroll-Median 20 %. Ziel-Reihenfolge mobil:
     1 Sterne  2 Titel  3 Preis  4 Bild (kompakt, 230 px)  5 Lieferzeile  6 Auswahl+Button  7 Kurzbeschreibung
   Technik: die beiden Bootstrap-Spalten (Galerie / Info) und die Buybox-Wrapper werden mobil
   auf display:contents gesetzt, alle Bloecke werden Flex-Items der Zeile (#product-offer.row)
   und bekommen order. KEIN DOM-Move (DH-Lehre: bricht Lazy-Observer/AJAX-Reload).
   Desktop (>= 768 px) unveraendert.
   ========================================================================= */
@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer.row.product-detail {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    margin: 0 !important;
    padding: 0 12px !important;
  }
  body[data-page="1"] #product-offer > .col.product-gallery,
  body[data-page="1"] #product-offer > .col.product-info,
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox,
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head {
    display: contents !important;
  }
  /* Grundwert: alles, was wir nicht explizit einsortieren, kommt hinter den Kaufbereich */
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > *,
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > *,
  body[data-page="1"] #product-offer > .col.product-gallery > * {
    order: 8 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__meta-row { order: 1 !important; margin: 6px 0 2px !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__sku,
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-buybox__sku { order: 2 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > h1.dh-pdp-buybox__title { order: 2 !important; margin: 0 0 6px !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__price-under-title { order: 3 !important; margin: 0 0 10px !important; }
  body[data-page="1"] #product-offer > .col.product-gallery > #image_wrapper { order: 4 !important; margin: 0 0 10px !important; }
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-buybox__mobile-logistics,
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-inline-logistics { order: 5 !important; }
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .product-offer.dh-pdp-buybox__offer { order: 6 !important; }
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-kb { order: 7 !important; }

  /* Titel: 20 px, max. 2 Zeilen */
  body[data-page="1"] #product-offer h1.dh-pdp-buybox__title {
    font-size: 20px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
  }
  /* Galerie kompakt: 230 px hoch, Bild eingepasst, Miniaturen 56 px */
  body[data-page="1"] #product-offer #gallery,
  body[data-page="1"] #product-offer #gallery .slick-list,
  body[data-page="1"] #product-offer #gallery .slick-track,
  body[data-page="1"] #product-offer #gallery .slick-slide,
  body[data-page="1"] #product-offer #gallery .square.square-image,
  body[data-page="1"] #product-offer #gallery .inner {
    height: 230px !important;
    min-height: 0 !important;
  }
  body[data-page="1"] #product-offer #gallery .square.square-image {
    border-radius: 12px !important;
    background: #fff !important;
    border: 1px solid var(--color-line, #ebebeb) !important;
  }
  body[data-page="1"] #product-offer #gallery .rt-gallery-main-image {
    max-height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
  }
  body[data-page="1"] #product-offer #gallery_preview .square.square-image {
    width: 56px !important;
    height: 56px !important;
  }
  body[data-page="1"] #product-offer .product-thumbnails-wrapper {
    margin-top: 6px !important;
  }
  body[data-page="1"] #product-offer #gallery_wrapper,
  body[data-page="1"] #product-offer .gallery-with-action-main > .col {
    min-height: 0 !important;
    height: auto !important;
  }
  /* Zoom-Knopf unten rechts im 230-px-Bild */
  body[data-page="1"] #product-offer .dh-gallery-zoom {
    bottom: 10px !important;
    right: 10px !important;
    top: auto !important;
  }
}
/* §RH-5 WARENKORB (rothler, 08.09.2026): UVP je Position, durchgestrichen + Ersparnis-Badge */
.rh-cart-uvp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  line-height: 1.2;
}
.rh-cart-uvp__preis {
  color: var(--color-text-soft, #707070);
  font-size: 13px;
  font-weight: 500;
}
.rh-cart-uvp__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--blue-100, #e0effa);
  color: var(--blue-700, #0e548b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
@media (max-width: 767.98px) {
  .cart-items-price.price-col { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
  .cart-items-price.price-col .rh-cart-uvp { flex-basis: 100%; order: -1; }
}
/* Mobil: UVP-Zeile rechtsbuendig ueber dem Preis, nicht in die Mengen-Spalte gequetscht */
@media (max-width: 767.98px) {
  .cart-items-price.price-col { flex: 1 1 auto !important; min-width: 150px !important; justify-content: flex-end !important; text-align: right !important; }
  .cart-items-price.price-col .rh-cart-uvp { justify-content: flex-end; white-space: nowrap; }
  .rh-cart-uvp__preis { font-size: 12px; }
}
/* ============================================================================
   §RH-6 QA-BEFUNDE 08.09.2026 (frontend-qa, PDP mobil+desktop)
   1 Desktop-Header: Konto-Icon + Warenkorb-Betrag weiss auf weiss (DH-Erbe)
   2 USP-Kacheln (.dh-kb) aus der Wawi-Beschreibung: doppeltes Icon, zerrissenes Grid
   3 Sticky-Leiste verdeckt Footer-Ende
   4 Off-Canvas-Schatten am linken Rand (geschlossen)
   5 Thumbs laufen ueber die Bildkarte
   7/8 Sticky: Variantenzeile abgeschnitten, UVP 10 px
   10 H1 zu hart geclampt  11 alter Preis in Primaerblau
   ========================================================================= */
/* 1 */
body #jtl-nav-wrapper .account-icon-dropdown > .nav-link,
body #jtl-nav-wrapper .account-icon-dropdown > .nav-link i,
body #jtl-nav-wrapper .cart-icon-dropdown > .nav-link,
body #jtl-nav-wrapper .cart-icon-dropdown > .nav-link i,
body #jtl-nav-wrapper .cart-icon-dropdown-price,
body #jtl-nav-wrapper .nav-icons .nav-link,
body #jtl-nav-wrapper .nav-icons .nav-link i {
  color: var(--blue-900, #072a46) !important;
  opacity: 1 !important;
}
/* 2: Wawi-USP-Liste — ein Haken, Text in einer Zeile, kein Grid */
body .dh-kb ul, body .dh-kb ol { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
body .dh-kb li {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 4px !important;
  grid-template-columns: none !important;
  padding: 10px 12px 10px 34px !important;
  position: relative !important;
  border: 1px solid var(--color-line, #ebebeb) !important;
  border-radius: 10px !important;
  background: #fff !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}
body .dh-kb li img { display: none !important; }
body .dh-kb li::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 12px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--brand-primary, #116bb0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/9px no-repeat !important;
  display: block !important;
}
body .dh-kb li strong, body .dh-kb li b { display: inline !important; font-weight: 700 !important; }
body .dh-kb li br { display: none !important; }
@media (max-width: 575.98px) { body .dh-kb ul, body .dh-kb ol { grid-template-columns: 1fr !important; } }
/* 3 */
@media (max-width: 767.98px) {
  body:has(.rt-pdp-mobile-cta--visible) { padding-bottom: 96px !important; }
  /* 4 */
  #mainNavigation:not(.show) { box-shadow: none !important; }
  /* 5: Miniaturen innerhalb der Bildkarte, keine halben Klone am Rand */
  body[data-page="1"] #product-offer .product-thumbnails-wrapper { overflow: hidden !important; padding: 0 2px !important; }
  body[data-page="1"] #product-offer .gallery-with-action-main > .col { padding: 0 !important; }
  body[data-page="1"] #product-offer #gallery .rt-gallery-main-image { width: 100% !important; height: 100% !important; object-fit: contain !important; }
  /* 7/8 */
  .rt-pdp-mobile-cta__variant { white-space: normal !important; font-size: 12px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rt-pdp-mobile-cta__sale, .rt-pdp-mobile-cta__uvp, .rt-pdp-mobile-cta__discount { font-size: 12px !important; }
  /* 10 */
  body[data-page="1"] #product-offer h1.dh-pdp-buybox__title { font-size: 19px !important; -webkit-line-clamp: 3; }
}
/* 11 */
body #product-offer .dh-pdp-old-price, body #product-offer .price_wrapper .old-price, body #product-offer del { color: var(--color-text-soft, #707070) !important; font-weight: 600 !important; }

/* --- Nachzug 08.09. (Regel-Audit): staerkere DH-Selektoren ueberstimmen --- */
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-row--top .dh-pdp-old-price,
body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-old-price,
body #product-offer .dh-pdp-old-price,
body #product-offer .dh-pdp-old-price s,
body #product-offer .dh-pdp-old-price del {
  color: var(--color-text-soft, #707070) !important;
  font-weight: 600 !important;
}
body #jtl-nav-wrapper .nav-icons .cart-icon-dropdown .cart-icon-dropdown-price,
body #jtl-nav-wrapper .nav-icons .cart-icon-dropdown .cart-price {
  color: var(--blue-900, #072a46) !important;
}
@media (max-width: 991.98px) {
  /* QA 6: unsichtbarer Betrag machte das Cart-li 59 px breit -> Icons ungleich verteilt */
  body #jtl-nav-wrapper .nav-icons .cart-icon-dropdown .cart-icon-dropdown-price,
  body #jtl-nav-wrapper .nav-icons .cart-icon-dropdown .cart-price { display: none !important; }
  body #jtl-nav-wrapper .nav-icons > li { width: 44px !important; margin: 0 !important; }
  body #jtl-nav-wrapper .nav-icons { gap: 2px !important; margin-right: 0 !important; }
}
body #product-offer .product-info-inner .dh-kb li,
body #product-offer .dh-kb li {
  display: flex !important;
  grid-template-columns: none !important;
}
body #product-offer .product-info-inner .dh-kb ul,
body #product-offer .dh-kb ul {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 575.98px) { body #product-offer .product-info-inner .dh-kb ul, body #product-offer .dh-kb ul { grid-template-columns: 1fr !important; } }
body #product-offer .product-info-inner .dh-kb li,
body #product-offer .dh-kb li {
  padding: 10px 12px 10px 34px !important;
  position: relative !important;
  align-items: baseline !important;
  gap: 0 4px !important;
}
/* ============================================================================
   §RH-7 STARTSEITE (rothler, 08.09.2026) — Hero · Trust · Kachelwand · Bestseller · Warum · Ratgeber
   Tokens aus brand.css. Signatur: Kachelwand ragt 48 px in den Hero (Desktop), mobil 2 Spalten 4:5.
   Alle Tastflaechen >= 44 px, Schrift >= 14 px, Kontraste >= 4,5:1 (weiss auf Blau-950-Scrim).
   ========================================================================= */
.rh-eyebrow { margin: 0 0 8px; color: var(--blue-700, #0e548b); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
body .rh-hero .rh-eyebrow--light { color: rgba(255,255,255,.85) !important; }
.rh-h2 { margin: 0 0 16px; color: var(--color-text, #0a1628); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.rh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 12px; font-size: 16px; font-weight: 700; text-decoration: none !important; transition: transform .15s ease, background .15s ease; }
.rh-btn--primary { background: var(--brand-primary, #116bb0); color: #fff !important; box-shadow: 0 10px 24px -12px rgba(var(--brand-primary-rgb), .9); }
.rh-btn--primary:hover { background: var(--brand-primary-dark, #0e548b); transform: translateY(-1px); }
.rh-btn--ghost { background: rgba(255,255,255,.14); color: #fff !important; border: 1.5px solid rgba(255,255,255,.55); backdrop-filter: blur(4px); }
.rh-btn--ghost:hover { background: rgba(255,255,255,.24); }
.rh-stars { color: #f5a623; letter-spacing: .04em; }
.rh-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 4px; color: var(--brand-primary, #116bb0); font-weight: 700; }

/* --- Hero --- */
.rh-hero { position: relative; overflow: hidden; width: 100vw; margin: 0 0 0 calc(50% - 50vw); min-height: 560px; display: flex; align-items: center; background: var(--blue-950, #04192a); }
.rh-hero__media, .rh-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.rh-hero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,25,42,.92) 0%, rgba(4,25,42,.78) 38%, rgba(4,25,42,.25) 70%, rgba(4,25,42,.05) 100%); }
.rh-hero__in { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 72px 12px 112px; color: #fff; }
body:has(.rh-hero) #content-wrapper { padding-top: 0 !important; }
body:has(.rh-hero) #content { padding-top: 0 !important; }
body .rh-hero .rh-hero__title, body .rh-hero h1.rh-hero__title { max-width: 640px; margin: 0 0 16px; color: #fff !important; text-shadow: 0 2px 18px rgba(4,25,42,.45); font-size: clamp(30px, 4.2vw, 52px) !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.06; }
body .rh-hero .rh-hero__sub { max-width: 560px; margin: 0 0 24px; color: rgba(255,255,255,.92) !important; text-shadow: 0 1px 10px rgba(4,25,42,.4); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.5; }
.rh-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.rh-hero__proof { margin: 16px 0 0; color: rgba(255,255,255,.88); font-size: 14px; }
.rh-hero__proof strong { color: #fff; }

/* --- Trust --- */
.rh-trust { position: relative; z-index: 2; max-width: 1200px; margin: -56px auto 0; padding: 0 12px; }
.rh-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.rh-trust__list li { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; min-height: 72px; padding: 12px 16px; background: #fff; border: 1px solid var(--blue-200, #bcdcf5); border-radius: 16px; box-shadow: 0 12px 30px -18px rgba(4,25,42,.45); }
.rh-trust__ic { grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--blue-50, #f2f8fd); color: var(--brand-primary, #116bb0); }
.rh-trust__ic svg { width: 22px; height: 22px; }
.rh-trust__list strong { color: var(--color-text, #0a1628); font-size: 15px; line-height: 1.2; }
.rh-trust__list small { color: var(--color-text-muted, #525252); font-size: 12.5px; }

/* --- Kachelwand --- */
.rh-wall { max-width: 1200px; margin: 48px auto 0; padding: 0 12px; }
.rh-best, .rh-why, .rh-news { max-width: 1200px; margin: 48px auto 0 !important; padding: 0 12px !important; }
.rh-wall__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.rh-tile { display: block; position: relative; overflow: hidden; border-radius: 16px; background: var(--blue-50, #f2f8fd); text-decoration: none !important; aspect-ratio: 4 / 5; box-shadow: 0 1px 2px rgba(10,22,40,.06); transition: transform .18s ease, box-shadow .18s ease; }
.rh-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(4,25,42,.55); }
.rh-tile__media, .rh-tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rh-tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,42,0) 28%, rgba(4,25,42,.6) 55%, rgba(4,25,42,.94) 100%); }
.rh-tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; color: #fff; text-shadow: 0 1px 8px rgba(4,25,42,.6); }
.rh-tile__name { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; hyphens: auto; }
.rh-tile__count { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.82); }
.rh-wall__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rh-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1.5px solid var(--blue-200, #bcdcf5); background: #fff; color: var(--color-text, #0a1628); font-size: 15px; font-weight: 600; text-decoration: none !important; }
.rh-chip:hover { border-color: var(--brand-primary, #116bb0); color: var(--brand-primary, #116bb0); }
.rh-chip--sale { border-color: var(--brand-sale, #d32f2f); color: var(--brand-sale, #d32f2f); }

/* --- Bestseller --- */
.rh-best__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rh-card__rev { display: none; }
.rh-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-line, #ebebeb); border-radius: 16px; background: #fff; text-decoration: none !important; color: var(--color-text, #0a1628); transition: box-shadow .18s ease; }
.rh-card:hover { box-shadow: 0 14px 28px -18px rgba(4,25,42,.5); }
.rh-card__media { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px; background: var(--color-surface-soft, #f5f7fa); }
.rh-card__media img { width: 100%; height: 100%; object-fit: contain; }
.rh-card__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.3; min-height: 2.6em; }
.rh-card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rh-card__price { font-size: 18px; font-weight: 800; }
.rh-card__rev { color: var(--color-text-muted, #525252); font-size: 12.5px; }

/* --- Warum --- */
.rh-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rh-why__item { padding: 20px; border-radius: 16px; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-200, #bcdcf5); }
.rh-why__item strong { display: block; margin-bottom: 6px; color: var(--blue-900, #072a46); font-size: 17px; }
.rh-why__item p { margin: 0; color: var(--color-text-muted, #525252); font-size: 15px; line-height: 1.5; }

/* --- Ratgeber --- */
.rh-news__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rh-news__card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--color-line, #ebebeb); border-radius: 16px; background: #fff; text-decoration: none !important; color: var(--color-text, #0a1628); }
.rh-news__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: var(--color-surface-soft, #f5f7fa); }
.rh-news__media img { width: 100%; height: 100%; object-fit: cover; }
.rh-news__title { font-size: 15px; font-weight: 700; line-height: 1.3; }
.rh-news__more { color: var(--brand-primary, #116bb0); font-weight: 700; font-size: 14px; }

/* --- Responsive --- */
@media (max-width: 991.98px) {
  .rh-wall__grid { grid-template-columns: repeat(3, 1fr); }
  .rh-best__row { grid-template-columns: repeat(3, 1fr); }
  .rh-trust__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .rh-hero { min-height: 520px; }
  .rh-hero__media img { object-position: 50% 40%; }
  .rh-hero__scrim { background: linear-gradient(180deg, rgba(4,25,42,.15) 0%, rgba(4,25,42,.55) 45%, rgba(4,25,42,.92) 100%); }
  .rh-hero__in { padding: 200px 12px 84px; }
  body .rh-hero .rh-hero__title, body .rh-hero h1.rh-hero__title { font-size: 30px !important; }
  .rh-hero__sub { font-size: 16px; }
  .rh-btn { flex: 1 1 100%; min-height: 52px; }
  .rh-trust { margin-top: -44px; padding: 0 12px; }
  .rh-trust__list li { min-height: 64px; padding: 12px; grid-template-columns: 36px 1fr; column-gap: 12px; }
  .rh-trust__list strong { font-size: 14px; white-space: nowrap; }
  .rh-trust__list small { font-size: 12px; }
  .rh-wall { margin-top: 40px; }
  .rh-best, .rh-why, .rh-news { margin-top: 40px !important; }
  .rh-news { margin-bottom: 8px !important; }
  .rh-wall__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rh-tile__name { font-size: 15px; }
    .rh-best__row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; margin-right: -12px; padding-right: 12px; scrollbar-width: none; }
  .rh-best__row::-webkit-scrollbar { display: none; }
  .rh-card { flex: 0 0 62%; scroll-snap-align: start; }
  .rh-why__grid { grid-template-columns: 1fr; gap: 10px; }
  .rh-news__row { grid-template-columns: 1fr; gap: 10px; }
  .rh-news__card { flex-direction: row; align-items: center; }
  .rh-news__media { flex: 0 0 96px; aspect-ratio: 1 / 1; }
  .rh-news__title { font-size: 14px; }
}

/* ============================================================================
   §RH-7b STARTSEITE v2 (08.09.2026): Split-Hero, zwei Welten, Showroom, SEO/FAQ
   ========================================================================= */
.rh-hero--split { width: 100vw; margin-left: calc(50% - 50vw); min-height: 0; background: var(--blue-50, #f2f8fd); align-items: stretch; }
.rh-hero--split .rh-hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 48px 12px 48px; color: var(--color-text, #0a1628); }
.rh-hero--split .rh-hero__copy { padding-right: 8px; }
.rh-hero--split .rh-eyebrow { color: var(--blue-700, #0e548b); }
body .rh-hero--split .rh-hero__title, body .rh-hero--split h1.rh-hero__title { color: var(--color-text, #0a1628) !important; text-shadow: none; font-size: clamp(30px, 3.6vw, 46px) !important; letter-spacing: -.02em; line-height: 1.08; max-width: none; }
.rh-hero__title-accent { color: var(--brand-primary, #116bb0); display: block; }
body .rh-hero--split .rh-hero__sub { color: var(--color-text-muted, #525252) !important; text-shadow: none; font-size: 17px; max-width: 560px; }
.rh-hero--split .rh-hero__proof { color: var(--color-text-muted, #525252); }
.rh-hero--split .rh-hero__proof strong { color: var(--color-text, #0a1628); }
.rh-btn--secondary { background: #fff; color: var(--brand-primary, #116bb0) !important; border: 1.5px solid var(--blue-200, #bcdcf5); }
.rh-btn--secondary:hover { border-color: var(--brand-primary, #116bb0); background: var(--blue-50, #f2f8fd); }
.rh-hero__visual { position: relative; }
.rh-hero__visual picture, .rh-hero__visual img { display: block; width: 100%; height: auto; border-radius: 20px; object-fit: cover; aspect-ratio: 16 / 10; box-shadow: 0 30px 60px -30px rgba(4,25,42,.55); }
.rh-hero__chip { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--color-text, #0a1628); font-size: 13px; font-weight: 700; box-shadow: 0 8px 20px -10px rgba(4,25,42,.5); backdrop-filter: blur(6px); }
.rh-hero__chip-ic { width: 10px; height: 10px; border-radius: 50%; background: var(--status-success, #1c871e); box-shadow: 0 0 0 4px rgba(28,135,30,.18); }
.rh-hero--split ~ .rh-trust { margin-top: -28px; }
/* Welten */
.rh-worlds { max-width: 1200px; margin: 48px auto 0; padding: 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rh-world { position: relative; display: block; min-height: 380px; overflow: hidden; border-radius: 20px; background: var(--blue-950, #04192a); text-decoration: none !important; color: #fff; }
.rh-world__media, .rh-world__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform .5s ease; }
.rh-world:hover .rh-world__media img { transform: scale(1.04); }
.rh-world__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,42,.35) 0%, rgba(4,25,42,.65) 40%, rgba(4,25,42,.86) 65%, rgba(4,25,42,.97) 100%); }
.rh-world__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.rh-world__body .rh-eyebrow { margin: 0; color: rgba(255,255,255,.9); }
.rh-world__title { font-size: 24px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: #fff; text-shadow: 0 1px 10px rgba(4,25,42,.6); }
.rh-world__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-world__chips span { padding: 6px 12px; border-radius: 999px; background: rgba(4,25,42,.55); border: 1px solid rgba(255,255,255,.35); font-size: 13px; font-weight: 600; color: #fff; }
.rh-world__cta { margin-top: 4px; font-weight: 700; color: #fff; }
/* Kachelwand: mehr Kacheln -> 5 Spalten Desktop */
.rh-wall__grid { grid-template-columns: repeat(5, 1fr); }
/* Warum mit Showroom-Bild */
.rh-why__grid--media { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 32px; }
.rh-why__media img { width: 100%; height: auto; border-radius: 20px; object-fit: cover; aspect-ratio: 3 / 2; box-shadow: 0 24px 50px -30px rgba(4,25,42,.5); }
.rh-why__list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rh-why__list li { display: grid; gap: 2px; padding-left: 28px; position: relative; }
.rh-why__list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-primary, #116bb0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat; }
.rh-why__list strong { color: var(--color-text, #0a1628); font-size: 16px; }
.rh-why__list span { color: var(--color-text-muted, #525252); font-size: 15px; line-height: 1.5; }
/* SEO + FAQ */
.rh-seo { background: var(--blue-50, #f2f8fd); width: 100vw; margin: 48px 0 0 calc(50% - 50vw); padding: 48px 0; }
.rh-faq__h { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--color-text, #0a1628); }
.rh-seo__in { max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.rh-seo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
.rh-seo__cols p { margin: 0; color: var(--color-text-muted, #525252); font-size: 15.5px; line-height: 1.6; }
.rh-seo__cols a { color: var(--brand-primary, #116bb0); font-weight: 600; }
.rh-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rh-faq__item { background: #fff; border: 1px solid var(--blue-200, #bcdcf5); border-radius: 14px; padding: 0 16px; }
.rh-faq__item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; font-weight: 700; color: var(--color-text, #0a1628); }
.rh-faq__item summary::-webkit-details-marker { display: none; }
.rh-faq__item summary::after { content: "+"; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-100, #e0effa); color: var(--blue-700, #0e548b); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.rh-faq__item[open] summary::after { content: "–"; }
.rh-faq__item p { margin: 0 0 14px; color: var(--color-text-muted, #525252); font-size: 15px; line-height: 1.55; }
@media (max-width: 991.98px) { .rh-wall__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767.98px) {
  .rh-hero--split { background: #fff; padding-top: 0 !important; }
  .rh-hero--split .rh-hero__in { grid-template-columns: 1fr; gap: 16px; padding: 0 0 24px; }
  .rh-hero--split .rh-hero__visual { order: -1; }
  .rh-hero__visual picture, .rh-hero__visual img { border-radius: 0 0 20px 20px; aspect-ratio: 3 / 2; object-position: 50% 50%; }
  .rh-hero__chip { left: 12px; bottom: 12px; font-size: 12px; }
  .rh-hero--split .rh-hero__copy { padding: 4px 12px 0; }
  body .rh-hero--split .rh-hero__title, body .rh-hero--split h1.rh-hero__title { font-size: 28px !important; }
  body .rh-hero--split .rh-hero__sub { font-size: 16px; }
  .rh-hero--split ~ .rh-trust { margin-top: 24px; }
  .rh-trust__list { gap: 12px; }
  .rh-world__chips span:nth-child(n+5) { display: none; }
  .rh-worlds { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; }
  /* Mobil: Bild oben (3:2), Text auf Blau 950 darunter – kein Text mehr ueber dem Heizkoerper */
  .rh-world { min-height: 0; display: flex; flex-direction: column; }
  .rh-world__media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .rh-world__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-position: 50% 50%; }
  .rh-world__media::after { background: linear-gradient(180deg, rgba(4,25,42,0) 60%, rgba(4,25,42,.9) 100%); }
  .rh-world__body { position: relative; left: auto; right: auto; bottom: auto; padding: 16px 16px 20px; gap: 8px; }
  .rh-world__chips span { background: rgba(255,255,255,.10); }
  .rh-world__title { font-size: 20px; }
  .rh-wall__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .rh-tile { aspect-ratio: 1 / 1; }
  .rh-why__grid--media { grid-template-columns: 1fr; gap: 16px; }
  .rh-seo { padding: 32px 0; margin-top: 40px; }
  .rh-seo__cols { grid-template-columns: 1fr; gap: 12px; }
  .rh-faq { grid-template-columns: 1fr; }
}

/* Footer-Tastflaechen (QA 12) */
.dh-ft__seo-links a { min-height: 44px !important; }
.dh-ft__contact-txt span a { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 0; }

/* --- Shoppable Hotspots auf dem Hero-Foto (verkaufsorientiert, 08.09.2026) --- */
.rh-hero__visual { overflow: visible; }
.rh-hot { position: absolute; left: var(--xd, 50%); top: var(--yd, 50%); display: flex; align-items: center; gap: 10px; transform: translate(-22px, -22px); text-decoration: none !important; color: var(--color-text, #0a1628); z-index: 2; }
.rh-hot--left { flex-direction: row-reverse; transform: translate(calc(-100% + 22px), -22px); }
.rh-hot__dot { position: relative; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; }
.rh-hot__dot::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--brand-primary, #116bb0), 0 4px 12px rgba(4,25,42,.35); }
.rh-hot__dot::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); animation: rh-pulse 2.2s ease-out infinite; }
@keyframes rh-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rh-hot__dot::after { animation: none; opacity: .6; } }
.rh-hot__label { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.95); box-shadow: 0 10px 24px -12px rgba(4,25,42,.55); backdrop-filter: blur(6px); white-space: nowrap; line-height: 1.2; transition: transform .18s ease, box-shadow .18s ease; }
.rh-hot__name { font-size: 12px; font-weight: 600; color: var(--color-text-muted, #525252); }
.rh-hot__price { font-size: 15px; font-weight: 800; color: var(--brand-primary, #116bb0); }
.rh-hot:hover .rh-hot__label, .rh-hot:focus-visible .rh-hot__label { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(4,25,42,.6); }
.rh-hot:focus-visible { outline: 3px solid var(--focus-ring, #147bcb); outline-offset: 2px; border-radius: 999px; }
/* Mobil + Tablet (< 992): Punkte bleiben auf den Produkten, die Preise stehen als Chip-Zeile unter dem Bild (kein Ueberlappen) */
.rh-hot-row { display: none; }
@media (max-width: 991.98px) {
  .rh-hot { gap: 0; transform: translate(-22px, -22px); }
  .rh-hot--left { flex-direction: row; transform: translate(-22px, -22px); }
  .rh-hot__label { display: none; }
}
@media (max-width: 767.98px) {
  .rh-hot { left: var(--xm, 50%); top: var(--ym, 50%); }
}
@media (max-width: 991.98px) {
  .rh-hot-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
  .rh-hot-row__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-200, #bfe0f7); color: var(--color-text, #0a1628); font-size: 13px; font-weight: 600; text-decoration: none !important; }
  .rh-hot-row__chip b { color: var(--brand-primary, #116bb0); font-weight: 800; }
  .rh-hot-row__chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-primary, #116bb0); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand-primary, #116bb0); }
}

/* Kacheln mobil: Name 14 px, damit „Wohnraumheizkörper" in 177 px passt */
@media (max-width: 767.98px) {
  .rh-tile__body { padding: 12px; }
  .rh-tile__name { font-size: 14px; }
}
/* ============================================================================
   §RH-8 FOOTER (rothler, 08.09.2026) — E-Commerce-Footer auf Brand-Tokens
   Baender: Trust + Rechtliches = Blau 950, Hauptbereich = Blau 900 (--bg-brand).
   Marke: weisses Vollogo mit Claim, Kontaktkarte (Telefon/Mail/Adresse) + CTA.
   Spalten: Eyebrow-Ueberschriften Blau 200, Links 15 px / 40 px Zeilen, mobil Akkordeon 52 px.
   Zahlung/Versand: weisse Pills. Social: 44-px-Kreise. Alle Farben aus brand.css.
   ========================================================================= */
.dh-ft { background: var(--bg-brand, #072a46) !important; color: rgba(255,255,255,.86) !important; --dh-ft-line: rgba(255,255,255,.12); }
.dh-ft a { color: rgba(255,255,255,.86); }
.dh-ft a:hover { color: #fff; }
.dh-ft__in { max-width: 1200px !important; padding-left: 12px !important; padding-right: 12px !important; }
/* Trust-Band */
.dh-ft__trust { background: var(--blue-950, #04192a) !important; border-bottom: 1px solid var(--dh-ft-line) !important; padding: 28px 0 !important; }
.dh-ft__trust-grid { gap: 12px !important; }
.dh-ft__usp { padding: 4px 0 !important; border: 0 !important; }
.dh-ft__usp-ic { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(var(--brand-primary-rgb), .22); color: var(--blue-300, #7dbff2) !important; }
.dh-ft__usp-tx strong { color: #fff !important; font-size: 15px !important; }
.dh-ft__usp-tx span { color: rgba(255,255,255,.72) !important; font-size: 13px !important; }
/* Marke + Kontakt */
.dh-ft__main { padding: 44px 0 36px !important; gap: 32px !important; }
.dh-ft__logo img { width: 240px !important; height: auto !important; max-width: 100% !important; }
.dh-ft__tag { color: rgba(255,255,255,.78) !important; font-size: 15px !important; line-height: 1.55 !important; max-width: 380px; }
.dh-ft__contact { display: flex !important; flex-direction: column; gap: 10px !important; margin: 4px 0 18px !important; padding: 0 !important; list-style: none !important; }
.dh-ft__contact li { display: flex !important; align-items: flex-start !important; gap: 10px !important; color: rgba(255,255,255,.86) !important; font-size: 15px !important; line-height: 1.4 !important; }
.dh-ft__contact-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--blue-300, #7dbff2) !important; }
.dh-ft__contact-link { color: #fff !important; text-decoration: none !important; min-height: 24px; display: inline-flex; align-items: center; }
.dh-ft__contact-link--tel { font-size: 18px !important; font-weight: 800 !important; letter-spacing: .01em; }
.dh-ft__contact-link:hover { text-decoration: underline !important; }
.dh-ft__contact-cta { display: inline-flex !important; align-items: center; gap: 8px; min-height: 48px !important; padding: 0 20px !important; border-radius: 12px !important; background: var(--brand-primary, #116bb0) !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; text-decoration: none !important; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.dh-ft__contact-cta:hover { background: var(--brand-primary-hover, #0e548b) !important; }
/* Link-Spalten */
.dh-ft__col-h { color: var(--blue-200, #bcdcf5) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .1em !important; text-transform: uppercase !important; }
.dh-ft__col-list a { display: inline-flex !important; align-items: center; min-height: 36px !important; color: rgba(255,255,255,.84) !important; font-size: 15px !important; text-decoration: none !important; }
.dh-ft__col-list a:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
/* Beliebte Kategorien */
.dh-ft__seo { border-top: 1px solid var(--dh-ft-line) !important; }
.dh-ft__seo-title { color: var(--blue-200, #bcdcf5) !important; font-size: 12px !important; letter-spacing: .1em !important; }
.dh-ft__seo-links a { color: rgba(255,255,255,.72) !important; font-size: 14px !important; min-height: 32px; display: inline-flex; align-items: center; }
.dh-ft__seo-links a:hover { color: #fff !important; }
/* Zahlung / Versand / Social */
.dh-ft__pay { border-top: 1px solid var(--dh-ft-line) !important; }
.dh-ft__pay-lbl { color: var(--blue-200, #bcdcf5) !important; font-size: 12px !important; letter-spacing: .1em !important; text-transform: uppercase; }
.dh-ft__methods { background: #fff !important; border-radius: 12px !important; padding: 10px 16px !important; gap: 16px !important; min-height: 44px; }
.dh-ft__social a { width: 44px !important; height: 44px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.04); color: #fff !important; }
.dh-ft__social a:hover { background: var(--brand-primary, #116bb0) !important; border-color: var(--brand-primary, #116bb0) !important; }
/* Rechtliches */
.dh-ft__legal { background: var(--blue-950, #04192a) !important; border-top: 1px solid var(--dh-ft-line) !important; }
.dh-ft__copy, .dh-ft__vat { color: rgba(255,255,255,.66) !important; font-size: 13px !important; }
.dh-ft__vat a { color: rgba(255,255,255,.86) !important; }
.dh-ft__legal-nav a { color: rgba(255,255,255,.8) !important; font-size: 14px !important; min-height: 40px; display: inline-flex; align-items: center; }
.dh-ft__legal-nav a:hover { color: #fff !important; }
.dh-ft__widerruf { border: 1px solid rgba(255,255,255,.28) !important; color: #fff !important; border-radius: 10px !important; min-height: 44px !important; }
@media (max-width: 767.98px) {
  .dh-ft__trust { padding: 20px 0 !important; }
  .dh-ft__trust-grid { grid-template-columns: 1fr 1fr !important; gap: 8px 12px !important; }
  .dh-ft__usp-ic { width: 36px; height: 36px; }
  .dh-ft__usp-tx strong { font-size: 14px !important; }
  .dh-ft__usp-tx span { font-size: 12px !important; }
  .dh-ft__main { padding: 32px 12px 24px !important; gap: 24px !important; }
  .dh-ft__logo img { width: 220px !important; }
  .dh-ft__col-h { min-height: 52px !important; font-size: 13px !important; color: #fff !important; }
  .dh-ft__col-list a { min-height: 44px !important; }
  .dh-ft__methods { width: 100%; justify-content: center; }
  .dh-ft__legal-nav { justify-content: center; }
}
/* Kontaktkarte: Telefon gross, Zeiten + Showroom als zweizeilige Eintraege */
.dh-ft__contact-txt { display: flex; flex-direction: column; gap: 1px; }
.dh-ft__contact-txt strong { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3; }
.dh-ft__contact-txt span { color: rgba(255,255,255,.72) !important; font-size: 13px !important; }
.dh-ft__contact-txt span a { color: var(--blue-300, #7dbff2) !important; font-weight: 600; text-decoration: none !important; }
.dh-ft__contact-txt span a:hover { color: #fff !important; text-decoration: underline !important; }
.dh-ft__contact li:first-child { margin-bottom: 2px; }

/* QA 08.09.: Tablet 768–991 — vier Spalten passen nicht neben die Markenspalte (4. Spalte lag ausserhalb) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dh-ft__main { flex-direction: column !important; padding-left: 24px !important; padding-right: 24px !important; }
  .dh-ft__cols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px 24px !important; width: 100% !important; max-width: none !important; flex: 1 1 auto !important; }
  .dh-ft__seo, .dh-ft__legal, .dh-ft__pay, .dh-ft__usp { padding-left: 24px !important; padding-right: 24px !important; }
}
/* Tastflaechen Kontakt (Telefon, Anfahrt) mobil 44 px */
@media (max-width: 767.98px) {
  .dh-ft__contact-link--tel, .dh-ft__contact-txt span a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
  .dh-ft__contact-txt { gap: 0; }
}
/* ============================================================================
   §RH-11 PDP: KURZFAKTEN UNTER DEM PREIS + KAUFARGUMENTE AM BUTTON (rothler, 08.09.2026)
   Farben ausschliesslich aus css/brand.css (Blau-Skala, Text-Tokens).
   ========================================================================= */

/* --- Kurzfakten: Desktop 2 Spalten, Schluessel klein, Wert kraeftig --- */
body #product-offer .rh-facts-wrap, body #product-offer section.rh-facts-wrap { margin: 12px 0 0 !important; padding: 0 !important; }
body #product-offer .rh-facts {
  list-style: none; margin: 0; padding: 12px 16px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px;
  background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-200, #bfe0f7); border-radius: 12px;
}
body #product-offer .rh-facts__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body #product-offer .rh-facts__k { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-soft, #666666); }
body #product-offer .rh-facts__v { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--color-text, #0a1628); overflow-wrap: anywhere; }

/* --- Kaufargumente: 3 Zeilen, Haken in Blau 600, kein Link --- */
/* Kaufbereich ist flex mit order (#add-to-cart 1, Zahlarten 5) -> Argumente direkt unter dem Button-Block */
body #product-offer .dh-pdp-buybox__section--purchase > .rh-buyargs { order: 2; }
body #product-offer .rh-buyargs {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
body #product-offer .rh-buyargs__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; line-height: 20px; color: var(--color-text-muted, #525252);
}
body #product-offer .rh-buyargs__item strong { font-weight: 700; color: var(--color-text, #0a1628); }
body #product-offer .rh-buyargs__ico {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue-100, #e0f0fb); color: var(--brand-primary, #116bb0);
}
body #product-offer .rh-buyargs__ico svg { width: 12px; height: 12px; }

/* --- Mobil: Fakten als scrollbare Chip-Zeile (36 px), Reihenfolge nach dem Bild --- */
@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh-facts-wrap { order: 5 !important; margin: 0 0 10px !important; }
  body #product-offer .rh-facts {
    display: flex; flex-wrap: nowrap; gap: 8px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; background: transparent; border: 0; border-radius: 0;
    margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px;
  }
  body #product-offer .rh-facts::-webkit-scrollbar { display: none; }
  body #product-offer .rh-facts__item {
    flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px;
    min-height: 36px; padding: 0 12px; border-radius: 999px;
    background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-200, #bfe0f7);
  }
  body #product-offer .rh-facts__k { font-size: 12px; text-transform: none; letter-spacing: 0; }
  body #product-offer .rh-facts__k::after { content: ":"; }
  body #product-offer .rh-facts__v { font-size: 14px; line-height: 20px; white-space: nowrap; }
  body #product-offer .rh-buyargs { margin-top: 0; gap: 8px; }
  body #product-offer .rh-buyargs__item { min-height: 24px; font-size: 14px; }
}
/* ============================================================================
   §RH-13 HEADER DREIZEILIG wie DH (rothler, 08.09.2026) — Template-Einstellung
   header.menu_single_row = Y (Menue in eigener Zeile). Farben aus css/brand.css:
     Zeile 1  Topbar    Blau 950  (USP links, Kopf-Links rechts: Ratgeber · Hilfe und Kontakt · B2B)
     Zeile 2  Hauptzeile WEISS    (Logo, Suche mittig, Konto + Warenkorb in Blau 900)
     Zeile 3  Menuezeile BLAU 600 (Kategorien in Weiss, Hover heller, Unterstrich Weiss)
   Mobil (< 992 px) bleibt Modul 27 (weisser Kopf, Burger Blau 900).
   ========================================================================= */
@media (min-width: 992px) {
  /* Topbar */
  body #header-top-bar { background: var(--blue-950, #04192a) !important; }
  body #header-top-bar .topbar-main .nav-link,
  body #header-top-bar .topbar-main .nav-link:hover { color: rgba(255,255,255,.92) !important; font-size: 13px !important; }
  body #header-top-bar .topbar-main .nav-link:hover { text-decoration: underline !important; }

  /* Hauptzeile weiss */
  body #jtl-nav-wrapper { background: #fff !important; box-shadow: 0 10px 24px -20px rgba(4,25,42,.45) !important; }
  body #jtl-nav-wrapper .hide-navbar { background: #fff !important; }
  body #jtl-nav-wrapper .hide-navbar > .navbar.row { min-height: 64px !important; }
  body #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper .nav-link,
  body #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper > .nav-item > .nav-link,
  body #jtl-nav-wrapper .hide-navbar .account-icon-dropdown > .nav-link,
  body #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .cart-icon-dropdown-price,
  body #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link,
  body #jtl-nav-wrapper .hide-navbar .form-icon-trigger-label { color: var(--blue-900, #072a46) !important; }
  body #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper .nav-link:hover,
  body #jtl-nav-wrapper .hide-navbar .account-icon-dropdown > .nav-link:hover,
  body #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .nav-link:hover { color: var(--brand-primary, #116bb0) !important; }
  body #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper .badge,
  body #jtl-nav-wrapper .hide-navbar .cart-icon-dropdown .badge { background: var(--brand-primary, #116bb0) !important; color: #fff !important; }
  /* Suchfeld: seit 09.09.2026 komplett in Modul 40 (rh-suche) */

  /* Menuezeile blau, Texte weiss */
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) {
    background: var(--brand-primary, #116bb0) !important; box-shadow: none !important; border-top: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important;
  }
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar.justify-content-start { min-height: 46px !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.active {
    color: #fff !important; background: transparent !important; padding: 13px 16px !important; font-size: 15px !important; font-weight: 500 !important; border-radius: 0 !important;
  }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus-visible,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link { color: #fff !important; background: rgba(255,255,255,.14) !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link { font-weight: 700 !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::before { background: #fff !important; }
  body #jtl-nav-wrapper .navbar-nav .nav-link::after,
  body #jtl-nav-wrapper .navbar-nav .nav-link::before { border-color: #fff !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after { color: rgba(255,255,255,.8) !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus-visible { outline: 2px solid #fff !important; outline-offset: -4px !important; }
}

/* Mobil (< 992 px): zweizeiliges Markup (.hide-navbar) bringt DH-Blau mit -> Kopf weiss, Burger/Icons Blau 900 */
@media (max-width: 991.98px) {
  body #jtl-nav-wrapper,
  body #jtl-nav-wrapper > .container-fluid,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar > .navbar,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar > .navbar.row { background: #fff !important; box-shadow: 0 8px 18px -16px rgba(4,25,42,.35) !important; }
  body #jtl-nav-wrapper > .container-fluid.hide-navbar #burger-menu .navbar-toggler-icon,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar #burger-menu .navbar-toggler-icon::before,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar #burger-menu .navbar-toggler-icon::after,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .navbar-toggler .navbar-toggler-icon,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .navbar-toggler .navbar-toggler-icon::before,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .navbar-toggler .navbar-toggler-icon::after { background: var(--blue-900, #072a46) !important; background-image: none !important; }
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .nav-icons .nav-link,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .nav-icons .nav-link i,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .nav-icons .nav-link span,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .dh-msearch-toggle,
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .dh-msearch-toggle i { color: var(--blue-900, #072a46) !important; fill: var(--blue-900, #072a46) !important; }
  body #jtl-nav-wrapper > .container-fluid.hide-navbar .cart-icon-dropdown-price { display: none !important; }
}
/* ============================================================================
   §RH-14 STARTSEITE MOBIL (rothler, 08.09.2026) — „Schaufenster" statt gestapelter Desktop
   Befund 390x844: Seite 8.660 px, Hero = kleines Bild + Textwand (CTA erst bei 716 px),
   zwei 500-px-Welten-Karten, 15 Kacheln = 1.680 px, Footer 1.925 px.
   Ziel: Hero als Vollbild-Schaufenster mit Original-Heizkoerper, Text UEBER dem Foto auf Blau-950-Verlauf,
   zwei CTAs in einer Zeile, Vorteile als Scroll-Strip, Kategorien als zwei Scrollzeilen (Bad / Heizung),
   Welten-Karten mobil aus (Hero + Zeilen decken sie ab). Desktop (>= 768) unveraendert.
   Farben nur aus css/brand.css.
   ========================================================================= */

/* Kurzformen nur mobil */
.rh-pf-short { display: none; }
.rh-seo__details > summary { display: none; }

/* Sticky-Header auf der Startseite (data-page 18): gleicher Fix wie PDP (17-brand-typography) — body darf kein Scroll-Container sein */
body[data-page="18"] #content-wrapper { overflow-x: clip !important; }
body[data-page="18"]:not(.dh-drawer-open) { overflow-x: visible !important; }

/* Kachelwand-Gruppen: auf Desktop/Tablet unsichtbar (ein Raster wie bisher) */
@media (min-width: 768px) {
  .rh-wall__group, .rh-wall__tiles { display: contents; }
  .rh-wall__head { display: none; }
}

@media (max-width: 767.98px) {
  /* ---------- Hero: Foto 4:5 volle Breite, Text unten im Bild ---------- */
  body .rh-hero--split, body section.rh-hero.rh-hero--split { background: var(--blue-950, #04192a) !important; min-height: 0 !important; padding: 0 !important; margin-bottom: 0 !important; }
  body .rh-hero--split .rh-hero__in { display: block; padding: 0; }
  body .rh-hero--split .rh-hero__visual { position: relative; }
  body .rh-hero__visual picture, body .rh-hero__visual img { border-radius: 0; aspect-ratio: 4 / 5; object-position: 50% 50%; box-shadow: none; }
  body .rh-hero__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,25,42,0) 36%, rgba(4,25,42,.62) 54%, rgba(4,25,42,.9) 72%, rgba(4,25,42,.98) 100%); pointer-events: none; }
  body .rh-hero--split .rh-hero__copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 16px 20px; color: #fff; }
  body .rh-hero--split .rh-eyebrow { display: none; }
  body .rh-hero--split .rh-hero__title, body .rh-hero--split h1.rh-hero__title, body .rh-hero--split h1.rh-hero__title .rh-hero__t1 { font-size: 26px !important; line-height: 1.12 !important; letter-spacing: -.02em; margin: 0 0 14px; color: #fff !important; text-shadow: 0 1px 12px rgba(4,25,42,.45); }
  body .rh-hero--split h1.rh-hero__title .rh-hero__title-accent { color: var(--blue-300, #7dbff2) !important; }
  body .rh-hero--split .rh-hero__sub { display: none; }
  body .rh-hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
  body .rh-hero__cta .rh-btn { min-height: 48px; padding: 0 12px; font-size: 15px; border-radius: 12px; box-shadow: none; }
  body .rh-hero__cta .rh-btn--primary, body .rh-hero__cta a.rh-btn.rh-btn--primary { background: #fff !important; color: var(--brand-primary, #116bb0) !important; }
  body .rh-hero__cta .rh-btn--secondary, body .rh-hero__cta a.rh-btn.rh-btn--secondary { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.75) !important; }
  body .rh-hero__proof, body .rh-hero--split p.rh-hero__proof { margin: 0; font-size: 12px; line-height: 1.4; color: rgba(255,255,255,.85) !important; }
  body .rh-hero__proof strong { color: #fff !important; }
  body .rh-btn__x, body .rh-pf-long { display: none; }
  body .rh-pf-short { display: inline; }
  body .rh-hero__proof .rh-stars { color: #f5b301; }
  /* Hotspot: Punkt auf dem Heizkoerper, kompaktes Label rechts daneben; Chipzeile unter dem Bild entfaellt */
  body .rh-hot { left: var(--xm, 50%); top: var(--ym, 40%); gap: 8px; transform: translate(-22px, -22px); z-index: 4; }
  body .rh-hot__label { display: flex; padding: 6px 10px; border-radius: 10px; white-space: normal; max-width: calc(52vw - 42px); }
  body .rh-hot__name { font-size: 11px; white-space: normal; }
  body .rh-hot__price { font-size: 14px; }
  body .rh-hot-row { display: none; }

  /* ---------- Vorteile: ein Scroll-Strip statt 2x2-Karten ---------- */
  body .rh-hero--split ~ .rh-trust { margin-top: 12px; }
  body .rh-trust__list { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0 12px 4px; margin: 0 -12px; }
  body .rh-trust__list::-webkit-scrollbar { display: none; }
  body .rh-trust__list, body .rh-wall__tiles, body .rh-best__row { scroll-padding-inline-start: 12px; }
  body .rh-trust__list li:nth-child(4) { display: none; }
  body .rh-trust__list li { flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--blue-200, #bfe0f7); box-shadow: none; }
  body .rh-trust__ic { width: 26px; height: 26px; border-radius: 50%; }
  body .rh-trust__ic svg { width: 15px; height: 15px; }
  body .rh-trust__list strong { font-size: 13px; white-space: nowrap; }
  body .rh-trust__list small { display: none; }

  /* ---------- Welten-Karten mobil aus ---------- */
  body .rh-worlds { display: none; }

  /* ---------- Kategorien: zwei Scrollzeilen mit Kopf ---------- */
  body .rh-wall { margin-top: 28px; }
  body .rh-wall > .rh-eyebrow, body .rh-wall > .rh-h2 { display: none; }
  body .rh-wall__grid { display: block; }
  body .rh-wall__group + .rh-wall__group { margin-top: 20px; }
  body .rh-wall__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
  body .rh-wall__h3, body h3.rh-wall__h3 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: -.01em; color: var(--color-text, #0a1628) !important; }
  body .rh-wall__more { display: inline-flex; align-items: center; min-height: 44px; margin: -6px -8px -6px 0; padding: 0 8px; font-size: 14px; font-weight: 700; color: var(--brand-primary, #116bb0); text-decoration: none !important; }
  body .rh-wall__tiles { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 4px; }
  body .rh-wall__tiles::-webkit-scrollbar { display: none; }
  body .rh-wall__tiles .rh-tile { flex: 0 0 148px; width: 148px; aspect-ratio: 1 / 1; scroll-snap-align: start; border-radius: 14px; }
  body .rh-tile__body { padding: 10px; }
  body .rh-tile__name { font-size: 13px; }
  body .rh-tile__count { font-size: 12px; margin-top: 2px; }
  body .rh-wall__chips { display: none; }

  /* ---------- Bestseller: Karten kompakter, 1,7 Karten sichtbar ---------- */
  body .rh-best { margin-top: 32px; }
  body .rh-best__row { gap: 10px; }
  body .rh-card { flex: 0 0 clamp(200px, 52vw, 232px); }
  body .rh-card__name { font-size: 14px; }

  /* ---------- Warum / Ratgeber / SEO: engere Rhythmen ---------- */
  body .rh-wall { margin-top: 24px !important; }
  body .rh-best, body .rh-why, body .rh-news, body .rh-seo { margin-top: 40px !important; }
  body .rh-h2 { font-size: 22px; }
  /* Ratgeber: „Lesen ›" einzeilig, 44 px */
  body .rh-news__more { flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
  /* Fokus im dunklen Hero sichtbar */
  body .rh-hero__cta .rh-btn:focus-visible, body .rh-hot:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }
  /* SEO-Text: ruhiger (keine fette Link-Suppe), Textteil eingeklappt, FAQ bleibt offen */
  body .rh-seo__cols a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 3px; }
  body .rh-seo__details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--brand-primary, #116bb0); cursor: pointer; list-style: none; }
  body .rh-seo__details > summary::-webkit-details-marker { display: none; }
  body .rh-seo__details > summary::after { content: "+"; font-size: 20px; line-height: 1; }
  body .rh-seo__details[open] > summary::after { content: "–"; }
  /* Footer: „Beliebte Kategorien" mobil weg (doppelt zu Akkordeon + Kategoriezeilen) */
  body .dh-ft__seo { display: none !important; }
}

/* Schmale Handys (<= 374 px): Logo kleiner, damit es nicht am Such-Icon klebt */
@media (max-width: 374.98px) {
  html body #jtl-nav-wrapper .toggler-logo-wrapper .logo-wrapper .navbar-brand img#shop-logo,
  html body #jtl-nav-wrapper .navbar-brand img#shop-logo, html body #jtl-nav-wrapper .navbar-brand img { max-width: 108px !important; width: auto !important; height: 30px !important; }
}
/* ============================================================================
   §RH-15 PDP POLITUR nach QA5 (rothler, 08.09.2026) — laedt nach allen anderen Modulen.
   ========================================================================= */
/* Raster/Abstaende: Chips 8 px, gesperrte Kacheln gleiche Hoehe, Hinweis links */
body #product-offer .dh-pdp-radio-options { gap: 8px !important; }
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-limited,
body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill.is-stockout { padding-top: 8px !important; padding-bottom: 8px !important; }
body #product-offer .dh-pdp-radio-pill.is-limited .dh-pdp-radio-pill__limit,
body #product-offer .dh-pdp-radio-pill.is-stockout .dh-pdp-radio-pill__limit { text-align: left !important; justify-content: flex-start !important; }
/* Sofortiges Tipp-Feedback (130 ms ohne Rueckmeldung gemessen) */
body #product-offer .dh-pdp-radio-pill:active { background: var(--blue-100, #e0effa) !important; border-color: var(--brand-primary, #116bb0) !important; }
/* Aktive Kachel: Unterzeile kontrastreicher */
body #product-offer .dh-pdp-radio-pill.is-active .rh-var-sub { color: rgba(255,255,255,.92) !important; }
/* Farb-Thumb: Zoom 1,6 (Retina-Schaerfe bei 200-px-Quelle) */
body #product-offer .rh-var-thumbwrap--zoom .rh-var-thumb { transform: scale(1.6); }
/* Worttrennung in Kacheln: keine Trennung mitten im Wort */
body #product-offer .rh-var-main, body #product-offer .dh-pdp-radio-pill__text { overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
/* Touch: kein haengendes Hover-Blau auf nicht gewaehlten Kacheln */
@media (hover: none) {
  body #product-offer .dh-pdp-radio-input:not(:checked) + .dh-pdp-radio-pill:not(.is-active):not(.is-limited):not(.is-stockout),
  body #product-offer .dh-pdp-radio-input:not(:checked) + .dh-pdp-radio-pill:not(.is-active):not(.is-limited):not(.is-stockout):hover {
    color: var(--color-text, #0a1628) !important; background: #fff !important; border-color: var(--color-line, #ebebeb) !important;
  }
}
/* Titel: 18 px, max. 3 Zeilen (Farbe + Groesse bleiben sichtbar) — eine Regel statt zwei konkurrierender */
body[data-page="1"] #product-offer h1.dh-pdp-buybox__title, body[data-page="1"] #product-offer h1.product-title {
  font-size: 18px !important; line-height: 1.25 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; max-height: 3.75em !important;
}
/* PayPal-Ratenbanner unter den Button (Kaufbereich ist flex mit order) */
body #product-offer .dh-pdp-buybox__section--purchase > #ppc-productDetails-instalment-banner { order: 3 !important; margin-top: 12px !important; }

@media (max-width: 767.98px) {
  /* Farbkacheln: 2 Spalten nur wenn >= 148 px Platz (360 px -> 1 Spalte), engerer Innenabstand */
  body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-options.rh-var-group--color { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important; }
  body #product-offer .rh-var-group--color .dh-pdp-radio-pill { gap: 6px !important; padding-left: 4px !important; padding-right: 4px !important; }
  /* Sticky-Leiste: Variantenzeile 12 px einzeilig (07-checkout setzt 15 px auf button[type=button]) */
  body .rt-pdp-mobile-cta button.rt-pdp-mobile-cta__variant[type="button"], body .rt-pdp-mobile-cta .rt-pdp-mobile-cta__variant { font-size: 12px !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
  body:has(.rt-pdp-mobile-cta--visible) { padding-bottom: 96px !important; }
  /* SKU-Zeile mobil aus (steht in den Kurzfakten/Details) */
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__sku { display: none !important; }
  /* Kurzfakten: Scroll-Hinweis rechts (Fade) */
  body #product-offer .rh-facts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  /* Rhythmus 8/12/16 */
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > h1.dh-pdp-buybox__title { margin-bottom: 8px !important; }
  body[data-page="1"] #product-offer > .col.product-gallery > #image_wrapper { margin-bottom: 8px !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh-facts-wrap { margin-bottom: 12px !important; }
  body[data-page="1"] #product-offer .dh-pdp-buybox__section--variants { margin-bottom: 16px !important; }
}
@media (min-width: 768px) {
  /* Desktop: USP-Boxen (.dh-kb) unter den Kaufbereich, Thumbs 44 px -> Button rueckt ~350 px hoch */
  body #product-offer .product-info-inner.dh-pdp-buybox { display: flex !important; flex-direction: column !important; }
  body #product-offer .product-info-inner.dh-pdp-buybox > .dh-kb { order: 9 !important; margin-top: 24px !important; }
  body #product-offer .rh-var-thumbwrap { flex-basis: 44px !important; width: 44px !important; height: 44px !important; }
  body #product-offer .dh-pdp-radio-options--rows .dh-pdp-radio-pill { min-height: 60px !important; }
}
/* ============================================================================
   §RH-14 HEADER-MENUE DESKTOP POLITUR (rothler, 09.09.2026) — Feedback Enes:
   „Hover usw. sieht nicht gut aus". Vorher: Hover = dunkler Kasten PLUS weisser
   Strich (zwei konkurrierende Signale, Kasten in voller Zeilenhoehe), Megamenue
   mit DH-Rot-Hover, 4:3-Zuschnitt der quadratischen Kategoriebilder, sehr hoch.
   Jetzt: ein Signal — weisser Unterstrich, der weich aufzieht; aktiver Punkt fett
   mit Strich; Megamenue auf Seitenbreite (1320) mit quadratischen, unbeschnittenen
   Bildern, blauem Hover (Blau 50/600) und sanfter Einblendung.
   Startseite (data-page 18) hat eigene Kopfzeilen in home-v2.css — die Menuezeile
   und das Megamenue sind dort NICHT gesondert gestylt, diese Regeln gelten also
   auf allen Seiten. Farben aus css/brand.css.
   ========================================================================= */
@media (min-width: 992px) {
  /* --- Menuezeile: auf Seitenbreite, ruhige Abstaende --------------------- */
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) { padding-left: 0 !important; padding-right: 0 !important; }
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) > .navbar.justify-content-start {
    max-width: 1320px !important; width: calc(100% - 64px) !important; margin: 0 auto !important;
    padding-left: 0 !important; padding-right: 0 !important; min-height: 50px !important;
    justify-content: flex-start !important;
  }
  /* Hauptzeile (Logo / Suche / Icons) auf dasselbe 1320-Raster wie Menue und Megamenue (seit 10.09.2026 auch auf der Startseite) */
  body #jtl-nav-wrapper .hide-navbar > .navbar.row {
    max-width: 1320px !important; width: calc(100% - 64px) !important; margin-left: auto !important; margin-right: auto !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
  body #jtl-nav-wrapper .hide-navbar { padding-left: 0 !important; padding-right: 0 !important; }
  body #jtl-nav-wrapper .hide-navbar .nav-logo-wrapper { padding-left: 0 !important; }
  body #jtl-nav-wrapper .hide-navbar .nav-icons-wrapper { padding-right: 0 !important; }
  /* Erster Menuepunkt buendig zum Raster: Versatz am UL, nicht am Link (ein Link-Margin wuerde beim Hover von der :hover-Regel ueberschrieben -> Zeile springt) */
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) .navbar-nav { margin-left: -14px !important; }
  body #jtl-nav-wrapper .hide-navbar .navbar-brand { margin-left: 0 !important; padding-left: 0 !important; }
  body #jtl-nav-wrapper .navbar-nav { gap: 2px !important; }
  body #jtl-nav-wrapper #mainNavigation,
  body #jtl-nav-wrapper #mainNavigation .nav-mobile-body,
  body #jtl-nav-wrapper #mainNavigation .nav-mobile-body > .navbar-nav,
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) .navbar-collapse,
  body #jtl-nav-wrapper > .container-fluid:not(.hide-navbar) .navbar-nav { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; justify-content: flex-start !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item { margin: 0 !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.active,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus {
    position: relative !important; display: inline-flex !important; align-items: center !important; gap: 6px !important;
    min-height: 50px !important; padding: 0 14px !important; margin: 0 !important;
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .1px !important;
    transition: color .18s ease !important;
  }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link { color: #fff !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.active { font-weight: 700 !important; }

  /* 10.09.2026: Startseiten-Ausnahme entfernt. home-v2.css wird nicht mehr geladen, die Startseite nutzt den normalen Header. */

  /* Unterstrich (NOVA-::before) neu: 3 px, zieht von links auf, ein einziges Hover-Signal */
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::before {
    content: "" !important; position: absolute !important; left: 14px !important; right: 14px !important; bottom: 0 !important; top: auto !important;
    width: auto !important; height: 3px !important; border: 0 !important; border-radius: 3px 3px 0 0 !important;
    background: #fff !important; transform: scaleX(0) !important; transform-origin: left center !important;
    transition: transform .22s cubic-bezier(.2,.7,.2,1) !important; opacity: 1 !important;
  }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:hover::before,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus-visible::before,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link::before,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.active > .nav-link::before,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.active::before { transform: scaleX(1) !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link:focus-visible { outline: 2px solid #fff !important; outline-offset: -6px !important; border-radius: 6px !important; }

  /* Pfeil bei Dropdown-Punkten: Font-Awesome-Chevron (wie DH-Modul 16, dort mit #mainNavigation-Spezifitaet), weiss, dreht beim Oeffnen */
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link.dropdown-toggle::after,
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link.dropdown-toggle::after {
    content: '\f078' !important; font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important;
    position: static !important; display: inline-block !important; width: auto !important; height: auto !important;
    border: 0 !important; background: none !important; margin: 0 0 0 2px !important; font-size: 9px !important; line-height: 1 !important;
    color: rgba(255,255,255,.85) !important; opacity: 1 !important; transform: translateY(1px) !important;
    transition: transform .25s cubic-bezier(.2,.7,.2,1) !important;
  }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.show > .nav-link.dropdown-toggle::after,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle::after { transform: translateY(1px) rotate(180deg) !important; color: #fff !important; }

  /* --- Megamenue: Panel ---------------------------------------------------- */
  body #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu {
    left: 0 !important; right: 0 !important; width: 100% !important; margin-top: 0 !important; padding: 0 !important;
    border: 0 !important; border-top: 0 !important; border-radius: 0 0 18px 18px !important; background: #fff !important;
    box-shadow: 0 34px 60px -30px rgba(4,25,42,.45), 0 1px 0 rgba(4,25,42,.06) !important;
  }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show { animation: rhMegaIn .22s cubic-bezier(.2,.7,.2,1) both !important; }
  body #jtl-nav-wrapper .dropdown-full .dropdown-body { padding: 26px 0 26px !important; }
  body #jtl-nav-wrapper .dropdown-full .dropdown-body > .container.subcategory-wrapper {
    max-width: 1320px !important; width: calc(100% - 64px) !important; margin: 0 auto !important; padding: 0 !important;
  }
  body #jtl-nav-wrapper .subcategory-wrapper .row.nav {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)) !important;
    gap: 10px 14px !important; justify-content: start !important; margin: 0 !important;
  }

  /* Karte: quadratisches Bild (Kategoriebilder sind 600x600 -> kein Zuschnitt), Titel Blau 900 */
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block {
    display: block !important; overflow: hidden !important; padding: 8px 8px 12px !important;
    border-radius: 14px !important; border: 1px solid transparent !important; background: transparent !important;
    text-align: center !important; text-decoration: none !important;
    transition: transform .2s ease, background-color .2s ease, box-shadow .25s ease, border-color .2s ease !important;
  }
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block .submenu-headline-image,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block img {
    display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important;
    object-fit: contain !important; border-radius: 12px !important; margin: 0 0 10px !important;
    background: var(--blue-50, #f2f8fd) !important; border: 1px solid var(--blue-100, #e0effa) !important;
    transition: transform .35s cubic-bezier(.2,.7,.2,1) !important;
  }
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .text-truncate,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .nav-mobile-heading,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block .submenu-headline-text,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m a.d-block strong {
    font-size: 14px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: 0 !important;
    color: var(--blue-900, #072a46) !important; transition: color .18s ease !important;
  }
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:focus-visible {
    background: var(--blue-50, #f2f8fd) !important; border-color: var(--blue-200, #bcdcf5) !important;
    transform: translateY(-2px) !important; box-shadow: 0 14px 24px -16px rgba(17,107,176,.45) !important; outline: none !important;
  }
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover img,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-image { transform: scale(1.04) !important; border-color: var(--blue-200, #bcdcf5) !important; }
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .text-truncate,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .nav-mobile-heading,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover .submenu-headline-text,
  body #jtl-nav-wrapper .subcategory-wrapper .nav-item-lg-m > a.d-block:hover strong { color: var(--brand-primary, #116bb0) !important; }

  /* „Kategorie anzeigen"-Zeile unten: blauer Link statt grauer Trennlinie */
  body #jtl-nav-wrapper .dropdown-full .dropdown-body .dh-mega-showall,
  body #jtl-nav-wrapper .dropdown-full .dropdown-body .mega-showall,
  body #jtl-nav-wrapper .dropdown-full .dropdown-body > .container.subcategory-wrapper > a.d-block:last-child { color: var(--brand-primary, #116bb0) !important; font-weight: 700 !important; }
}
@keyframes rhMegaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body #jtl-nav-wrapper .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show { animation: none !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link::before { transition: none !important; }
}
/* ============================================================================
   §RH-15 KATEGORIESEITE: UNTERKATEGORIEN ALS RUNDE CHIPS (rothler, 09.09.2026)
   Feedback Enes: Kacheln so gross, dass man die ersten Produkte weder am
   Desktop noch mobil sieht; Referenz = runde Icon-Chips in einer Reihe.
   Vorher (DH-Module 17/19): Desktop 4 Karten/Zeile mit 4:3-Bild + Beschreibung
   (2 Zeilen = ~700 px), mobil 2-spaltige Mini-Karten (7 Stueck = ~520 px).
   Jetzt: eine Reihe runder Bilder (Desktop 96 px, mobil 62 px) mit Namen darunter,
   ohne Beschreibungstext; mobil 4 pro Zeile, alles sichtbar, kein Wischen (Enes 09.09.). Kategoriebilder
   sind 400x400 -> rund ausgeschnitten ohne Verzerrung. Ganze Chip-Flaeche ist
   klickbar (Caption-Overlay, Idee aus Modul 19). Farben aus css/brand.css.
   Markup bleibt NOVA productlist/header.tpl ({row class="content-cats-small"}).
   ========================================================================= */
body #content .content-cats-small,
body .content-cats-small {
  display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important;
  gap: 6px 22px !important; margin: 2px 0 10px !important; padding: 0 !important;
}
body .content-cats-small > [class*="col"] {
  flex: 0 0 auto !important; width: auto !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
}
body .content-cats-small .sub-categories {
  position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 8px !important; width: 104px !important; height: auto !important; padding: 4px 0 6px !important;
  background: transparent !important; border-radius: 16px !important;
}
body .content-cats-small .sub-categories > a { display: block !important; flex: none !important; text-decoration: none !important; }
body .content-cats-small .subcategories-image {
  display: block !important; width: 96px !important; height: 96px !important; aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important; overflow: hidden !important; margin: 0 !important;
  background: var(--blue-50, #f2f8fd) !important; border: 1px solid var(--blue-100, #e0effa) !important;
  box-shadow: 0 0 0 0 rgba(17,107,176,0) !important;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease !important;
}
body .content-cats-small .subcategories-image picture { display: block !important; width: 100% !important; height: 100% !important; }
body .content-cats-small .subcategories-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1) !important;
}
body .content-cats-small .sub-categories > div { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; }
body .content-cats-small .caption { margin: 0 !important; text-align: center !important; }
body .content-cats-small .caption a {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  padding: 0 2px !important; border: 0 !important; background: transparent !important;
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif) !important; font-size: 13px !important; line-height: 1.25 !important;
  font-weight: 600 !important; letter-spacing: 0 !important; color: var(--blue-900, #072a46) !important;
  white-space: normal !important; overflow-wrap: anywhere !important; hyphens: auto !important; text-decoration: none !important;
  transition: color .18s ease !important;
}
/* ganze Chip-Flaeche klickbar (beide Anker zeigen auf dieselbe URL) */
body .content-cats-small .caption a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
body .content-cats-small .item_desc { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  body .content-cats-small .sub-categories:hover .subcategories-image {
    border-color: var(--brand-primary, #116bb0) !important;
    box-shadow: 0 0 0 3px rgba(17,107,176,.18), 0 12px 22px -14px rgba(17,107,176,.5) !important;
    transform: translateY(-2px) !important;
  }
  body .content-cats-small .sub-categories:hover .subcategories-image img { transform: scale(1.06) !important; }
  body .content-cats-small .sub-categories:hover .caption a { color: var(--brand-primary, #116bb0) !important; }
}
body .content-cats-small .sub-categories:focus-within .subcategories-image { box-shadow: 0 0 0 3px var(--focus-ring, #ffbf47) !important; }
body .content-cats-small .sub-categories:active .subcategories-image { transform: scale(.97) !important; }

/* Mobil: alles auf einen Blick — 4 Chips pro Zeile (bis 7 Kategorien = 2 Zeilen), kein Wischen */
@media (max-width: 767.98px) {
  body #content .content-cats-small,
  body .content-cats-small {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px 8px !important; margin: 0 0 6px !important; padding: 0 !important; overflow: visible !important;
  }
  body .content-cats-small > [class*="col"] { width: auto !important; min-width: 0 !important; }
  body .content-cats-small .sub-categories { width: 100% !important; gap: 5px !important; padding: 2px 0 2px !important; border-radius: 12px !important; }
  body .content-cats-small .subcategories-image { width: 62px !important; height: 62px !important; }
  body .content-cats-small .caption a { font-size: 12px !important; line-height: 1.2 !important; hyphens: auto !important; overflow-wrap: normal !important; word-break: normal !important; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; padding: 0 !important; }
  body .content-cats-small .caption a::after { border-radius: 12px; }
  body .dh-subcat-label { margin: 10px 0 6px !important; }
}
@media (min-width: 480px) and (max-width: 767.98px) {
  body #content .content-cats-small,
  body .content-cats-small { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body .content-cats-small .subcategories-image { width: 72px !important; height: 72px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .content-cats-small .subcategories-image, body .content-cats-small .subcategories-image img { transition: none !important; }
}
/* ============================================================================
   §RH-16 SUCHE: MINIMALES FELD, LIVE-VORSCHAU (DESKTOP + MOBIL), ERGEBNISSEITE
   (rothler, 09.09.2026) — Feedback Enes: Suchfeld minimaler, moderner, professioneller;
   beim Tippen („magnet") sofort alle passenden Produkte; mobil genauso einfach; die
   Ergebnisseite („Suche nach: hi", leerer Alert + Formular) professionell.
   Daten: Plugin ada_livesuche (IO rhLiveSearch). Verhalten: js/rh-livesearch.js.
   Desktop-Feld: weisse Pille 44 px, 1 px Rand Blau 100, graue Lupe links, Fokus =
   Rand Blau 600 (kein Glow), Loeschkreuz und ein 32-px-Knopf rechts, der erst mit
   Eingabe blau gefuellt wird. Panel: Kategorien-Chips, Produktzeilen (Bild, Name mit
   blauer Trefferstelle, Artikelnummer, Lieferbar, Preis), Link zur Suchseite.
   Mobil: DHs Slide-down-Feld bleibt, Treffer als fixes Overlay darunter.
   Ergebnisseite: Eyebrow + Begriff + Anzahl; Leerzustand als Karte mit Suchfeld,
   beliebten Kategorien und Kontakt. JTL-Typeahead-Menue wird versteckt.
   Farben aus css/brand.css.
   ========================================================================= */

/* ---------- Desktop-Feld (>= 992 px) -------------------------------------- */
@media (min-width: 992px) {
  body #jtl-nav-wrapper .main-search-wrapper { max-width: 560px !important; }
  body #jtl-nav-wrapper .main-search-wrapper .search-wrapper,
  body #jtl-nav-wrapper .main-search-wrapper #search,
  body #jtl-nav-wrapper .main-search-wrapper .form-icon { position: relative !important; overflow: visible !important; }
  body #jtl-nav-wrapper .main-search-wrapper .input-group {
    position: relative !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important;
    height: 44px !important; padding: 0 6px 0 0 !important; border-radius: 999px !important;
    background: #fff !important; border: 1px solid var(--blue-100, #e0effa) !important; box-shadow: none !important;
    transition: border-color .15s ease !important;
  }
  /* graue Lupe links (dekorativ) */
  body #jtl-nav-wrapper .main-search-wrapper .input-group::before {
    content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; z-index: 2; pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f5b68' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.8-3.8'/></svg>") center/contain no-repeat;
    transition: opacity .15s ease;
  }
  body #jtl-nav-wrapper .main-search-wrapper .input-group:focus-within,
  body #jtl-nav-wrapper .main-search-wrapper .rh-ls-host.is-open .input-group { border-color: var(--brand-primary, #116bb0) !important; box-shadow: none !important; }
  body #jtl-nav-wrapper .main-search-wrapper .twitter-typeahead { flex: 1 1 auto !important; min-width: 0 !important; display: block !important; }
  body #jtl-nav-wrapper .hide-navbar #search .form-control,
  body #jtl-nav-wrapper .main-search-wrapper #search input.form-control,
  body #jtl-nav-wrapper .main-search-wrapper .input-group > input,
  body #jtl-nav-wrapper .main-search-wrapper input[name="qs"],
  body #jtl-nav-wrapper .main-search-wrapper #search input#search-header,
  body #jtl-nav-wrapper .main-search-wrapper #search input.tt-hint {
    height: 42px !important; padding: 0 40px 0 42px !important; margin: 0 !important; width: 100% !important;
    border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important;
    font-size: 15px !important; font-weight: 500 !important; color: var(--color-text, #0a1628) !important; letter-spacing: 0 !important;
  }
  body #jtl-nav-wrapper .main-search-wrapper input#search-header::placeholder { color: #5b6672 !important; font-weight: 400 !important; }
  body #jtl-nav-wrapper .hide-navbar #search .form-control:focus,
  body #jtl-nav-wrapper .main-search-wrapper #search input#search-header:focus { outline: none !important; border-color: transparent !important; box-shadow: none !important; background: transparent !important; }
  /* Loeschen-Kreuz links vom Knopf */
  body #jtl-nav-wrapper .main-search-wrapper .form-clear {
    position: absolute !important; right: 44px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 24px !important; height: 24px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
    color: #4f5b68 !important; font-size: 12px !important; cursor: pointer !important; background: transparent !important; z-index: 3 !important;
  }
  body #jtl-nav-wrapper .main-search-wrapper .form-clear:hover { background: var(--blue-50, #f2f8fd) !important; color: var(--blue-900, #072a46) !important; }
  body #jtl-nav-wrapper .main-search-wrapper .form-clear.d-none { display: none !important; }
  /* Knopf: leise (blaue Lupe), mit Eingabe blau gefuellt */
  body #jtl-nav-wrapper .main-search-wrapper .input-group-append { margin: 0 !important; display: flex !important; flex: 0 0 auto !important; }
  body #jtl-nav-wrapper .hide-navbar #search .input-group-append .btn,
  body #jtl-nav-wrapper .hide-navbar #search .btn.btn-secondary,
  body #jtl-nav-wrapper .main-search-wrapper .input-group-append button,
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary {
    width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; flex: 0 0 32px !important; max-width: 32px !important; line-height: 1 !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--brand-primary, #116bb0) !important;
    display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  body #jtl-nav-wrapper .hide-navbar #search .input-group.has-value .btn.btn-secondary,
  body #jtl-nav-wrapper .hide-navbar #search .btn.btn-secondary:hover,
  body #jtl-nav-wrapper .main-search-wrapper .input-group.has-value button.btn.btn-secondary,
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary:hover { background: var(--brand-primary, #116bb0) !important; color: #fff !important; }
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary:focus-visible { outline: 2px solid var(--focus-ring, #ffbf47) !important; outline-offset: 2px !important; }
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary .fa-search,
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary svg,
  body #jtl-nav-wrapper .main-search-wrapper button.btn.btn-secondary i { color: inherit !important; fill: currentColor !important; font-size: 13px !important; }
  body #jtl-nav-wrapper .main-search-wrapper .tt-menu { display: none !important; }
  /* Desktop-Panel haengt am Feld */
  body #jtl-nav-wrapper .rh-ls--desktop { position: absolute !important; left: 0 !important; top: calc(100% + 8px) !important; width: max(100%, 620px) !important; max-height: min(72vh, 680px) !important; overflow: auto !important; }
}

/* ---------- Panel (beide Modi) ------------------------------------------- */
body .rh-ls {
  z-index: 1060; background: #fff; border-radius: 16px; border: 1px solid var(--blue-100, #e0effa);
  box-shadow: 0 30px 60px -28px rgba(4,25,42,.45), 0 4px 14px -8px rgba(4,25,42,.18);
  padding: 4px 0 0; text-align: left; animation: rhLsIn .18s cubic-bezier(.2,.7,.2,1) both;
}
body .rh-ls[hidden] { display: none !important; }
@keyframes rhLsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body .rh-ls::before { content: ""; position: sticky; top: 0; display: block; height: 2px; width: 0; background: var(--brand-primary, #116bb0); opacity: 0; }
body .rh-ls.is-loading::before { opacity: 1; animation: rhLsBar .9s ease-in-out infinite; }
@keyframes rhLsBar { 0% { width: 0; margin-left: 0; } 60% { width: 60%; margin-left: 20%; } 100% { width: 0; margin-left: 100%; } }
body .rh-ls__sec { padding: 6px 8px; }
body .rh-ls__sec + .rh-ls__sec { border-top: 1px solid var(--blue-50, #f2f8fd); }
body .rh-ls__lab { display: block; margin: 2px 0 6px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4f5b68; }
body .rh-ls__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px 4px; }
body .rh-ls__chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px;
  background: var(--blue-50, #f2f8fd); color: var(--blue-900, #072a46); font-size: 13px; font-weight: 700; text-decoration: none !important;
  border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease;
}
body .rh-ls__chip:hover, body .rh-ls__chip.is-active { background: var(--blue-100, #e0effa); border-color: var(--blue-200, #bcdcf5); color: var(--blue-900, #072a46); }
body .rh-ls__row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 12px; text-decoration: none !important; color: var(--color-text, #0a1628); transition: background-color .12s ease; }
body .rh-ls__row:hover, body .rh-ls__row.is-active { background: var(--blue-50, #f2f8fd); }
body .rh-ls__pic { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); display: grid; place-items: center; }
body .rh-ls__pic img { width: 100%; height: 100%; object-fit: contain; display: block; }
body .rh-ls__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
body .rh-ls__name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--blue-900, #072a46); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body .rh-ls mark { background: transparent; color: var(--brand-primary, #116bb0); font-weight: 800; padding: 0; }
body .rh-ls__meta { font-size: 12px; color: #4f5b68; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .rh-ls__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #136a18; margin: 0 4px 1px 0; }
body .rh-ls__price { flex: 0 0 auto; font-size: 14px; font-weight: 800; color: var(--color-text, #0a1628); font-variant-numeric: tabular-nums; white-space: nowrap; }
body .rh-ls__all {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding: 12px 18px; border-top: 1px solid var(--blue-50, #f2f8fd);
  background: #fff; color: var(--brand-primary, #116bb0); font-size: 14px; font-weight: 800; text-decoration: none !important; transition: background-color .12s ease;
  position: sticky; bottom: 0;
}
body .rh-ls__all:hover, body .rh-ls__all.is-active { background: var(--blue-50, #f2f8fd); }
body .rh-ls__all kbd { margin-left: auto; font: 700 11px/1 system-ui, sans-serif; color: #4f5b68; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); border-radius: 6px; padding: 4px 6px; }
body .rh-ls__empty { padding: 18px 18px 20px; font-size: 14px; color: #4f5b68; line-height: 1.45; }
body .rh-ls__empty b { display: block; color: var(--blue-900, #072a46); margin-bottom: 2px; }

/* ---------- Mobil (< 992 px): Overlay unter dem Header ------------------- */
@media (max-width: 991.98px) {
  body .rh-ls--mobile { position: fixed; left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid var(--blue-100, #e0effa); box-shadow: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 0 env(safe-area-inset-bottom); z-index: 1019; animation: none; }
  body .rh-ls--mobile .rh-ls__sec { padding: 8px 10px; }
  body .rh-ls--mobile .rh-ls__row { padding: 8px 6px; gap: 12px; }
  body .rh-ls--mobile .rh-ls__pic { flex-basis: 56px; width: 56px; height: 56px; }
  body .rh-ls--mobile .rh-ls__name { font-size: 14px; }
  body .rh-ls--mobile .rh-ls__price { font-size: 13.5px; }
  body .rh-ls--mobile .rh-ls__all { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 20px -14px rgba(4,25,42,.35); }
  body .rh-ls--mobile .rh-ls__all kbd { display: none; }
  body.rh-ls-open { overflow: hidden !important; }
  /* DHs Feld: weiss, ruhiger Rand, Sie-Form kommt aus dem JS */
  body #dh-msearch-panel .dh-msearch-form { background: #fff !important; border: 1px solid var(--blue-100, #e0effa) !important; }
  body #dh-msearch-panel .dh-msearch-form:focus-within { border-color: var(--brand-primary, #116bb0) !important; box-shadow: none !important; }
  body #dh-msearch-panel .dh-msearch-ico { color: #4f5b68 !important; }
  body #dh-msearch-panel .tt-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body .rh-ls { animation: none !important; }
  body .rh-ls.is-loading::before { animation: none !important; width: 100% !important; }
}

/* ---------- Suchergebnisseite --------------------------------------------- */
body.rh-sr #result-wrapper .rh-sr__h1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 4px 0 14px !important; font-size: 28px !important; line-height: 1.15 !important; letter-spacing: -.02em; color: var(--color-text, #0a1628); }
body.rh-sr #result-wrapper .rh-sr__h1 small { flex-basis: 100%; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4f5b68; }
body.rh-sr #result-wrapper .rh-sr__h1 span { color: var(--blue-900, #072a46); }
body.rh-sr #result-wrapper .rh-sr__h1 em { font-style: normal; font-size: 14px; font-weight: 700; color: #4f5b68; }
body.rh-sr .rh-sr__empty { max-width: 640px; margin: 8px 0 32px; padding: 28px 28px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--blue-100, #e0effa); box-shadow: 0 20px 40px -30px rgba(4,25,42,.35); }
body.rh-sr .rh-sr__empty-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-50, #f2f8fd); color: var(--brand-primary, #116bb0); font-size: 22px; font-weight: 800; margin-bottom: 14px; }
body.rh-sr .rh-sr__empty h2 { font-size: 22px; line-height: 1.2; margin: 0 0 6px; color: var(--blue-900, #072a46); letter-spacing: -.01em; }
body.rh-sr .rh-sr__empty p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #4f5b68; }
body.rh-sr .rh-sr__form { display: flex; align-items: center; gap: 0; height: 48px; padding: 0 4px 0 18px; border-radius: 999px; border: 1px solid var(--blue-100, #e0effa); background: #fff; margin: 0 0 18px; }
body.rh-sr .rh-sr__form:focus-within { border-color: var(--brand-primary, #116bb0); }
body.rh-sr .rh-sr__form input { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; height: 44px !important; border: 0 !important; outline: 0 !important; background: transparent !important; font-size: 16px !important; color: var(--color-text, #0a1628) !important; box-shadow: none !important; padding: 0 !important; }
body.rh-sr .rh-sr__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
body.rh-sr .rh-sr__form button { flex: 0 0 auto; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--brand-primary, #116bb0); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; }
body.rh-sr .rh-sr__form button:hover { background: var(--blue-700, #0e548b); }
body.rh-sr .rh-sr__lab { display: block; margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4f5b68; }
body.rh-sr .rh-sr__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
body.rh-sr .rh-sr__chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--blue-50, #f2f8fd); color: var(--blue-900, #072a46); font-size: 14px; font-weight: 700; text-decoration: none !important; border: 1px solid transparent; }
body.rh-sr .rh-sr__chips a:hover { background: var(--blue-100, #e0effa); border-color: var(--blue-200, #bcdcf5); }
body.rh-sr .rh-sr__help { display: inline-block; font-size: 14px; font-weight: 700; color: var(--brand-primary, #116bb0); text-decoration: none !important; }
body.rh-sr .rh-sr__help:hover { text-decoration: underline !important; }
@media (max-width: 767.98px) {
  body.rh-sr #result-wrapper .rh-sr__h1 { font-size: 22px !important; }
  body.rh-sr .rh-sr__empty { padding: 20px 18px 18px; }
}
/* ============================================================================
   §RH-17 HEIZKOERPER-BERATER BEWERBEN (rothler, 09.09.2026) — Plan §14
   Drei Einstiege aus custom/components/rh_berater_promo.tpl:
   - Menuepunkt (Desktop-Menuezeile rechts als weisse Pille, im mobilen Drawer erster
     hervorgehobener Eintrag), Badge NEU in Blau 900
   - mobile Leiste ueber der Breadcrumb (Kategorie + Produktseite)
   - PDP-Banner (Desktop unter der Galerie, mobil unter dem Kaufen-Block)
   Farben aus css/brand.css. Kontrast: Blau 900 auf Blau 50 = 13:1, Weiss auf Blau 600 = 5:1.
   ========================================================================= */
.rh-berater-neu { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 6px; background: var(--blue-900, #072a46); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .08em; font-style: normal; line-height: 1; }
.rh-berater-ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.rh-berater-ico svg { width: 100%; height: 100%; }

/* Icon als Hintergrundbild (DH blendet <svg> in Drawer-Links aus) */
.rh-berater-ico { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23116bb0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='11' height='16' rx='2'/><path d='M6 8h5M6 12h5M6 16h5'/><path d='M15 13l2.5 2.5L22 11'/></svg>") center/contain no-repeat; }
.rh-berater-nav__arrow { display: none; }

/* --- Menuepunkt Desktop: weisse Pille rechts in der blauen Zeile ------------ */
@media (min-width: 992px) {
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav { margin-left: auto !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav > .nav-link.rh-berater-nav__link,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav > .nav-link.rh-berater-nav__link:hover,
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav.active > .nav-link.rh-berater-nav__link {
    display: inline-flex !important; align-items: center !important; gap: 8px !important;
    min-height: 36px !important; padding: 0 12px !important; margin: 7px 0 !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.35) !important;
    background: rgba(255,255,255,.08) !important; color: #fff !important; font-size: 13px !important; font-weight: 600 !important;
    box-shadow: none !important; transition: background-color .15s ease, transform .15s ease !important;
  }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav > .nav-link.rh-berater-nav__link:hover { background: rgba(255,255,255,.18) !important; transform: none !important; }
  body #jtl-nav-wrapper .navbar-nav > .nav-item.rh-berater-nav > .nav-link::before { display: none !important; }
}
@media (min-width: 992px) {
  .rh-berater-nav .rh-berater-neu { display: none; }
  .rh-berater-nav .rh-berater-ico { filter: brightness(0) invert(1); width: 16px; height: 16px; flex-basis: 16px; }
  .rh-berater-nav .rh-berater-nav__arrow { display: inline; font-size: 16px; margin-left: 2px; }
  .rh-berater-nav__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}
/* --- Menuepunkt im mobilen Drawer: erste Zeile, exakt im Raster der Kategorie-Zeilen
       (54 px hoch, 20 px Rand, gleiche Trennlinie), hervorgehoben durch Blau-50-Grund,
       fette Blau-900-Schrift, NEU-Badge und blauen Pfeil statt Chevron. ------------------ */
@media (max-width: 991.98px) {
  body #jtl-nav-wrapper #mainNavigation .nav-mobile-body > .navbar-nav { display: flex !important; flex-direction: column !important; }
  body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.rh-berater-nav { order: -1 !important; margin: 0 !important; }
  body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.rh-berater-nav > .nav-link.rh-berater-nav__link,
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav > .nav-link {
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important;
    min-height: 54px !important; padding: 14px 20px !important; margin: 0 !important; border-radius: 0 !important;
    background: var(--blue-50, #f2f8fd) !important; border-bottom: 1px solid var(--blue-100, #e0effa) !important; border-top: 0 !important;
    color: var(--blue-900, #072a46) !important; font-size: 15.5px !important; font-weight: 700 !important; text-decoration: none !important;
  }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav > .nav-link:active { background: var(--blue-100, #e0effa) !important; color: var(--blue-900, #072a46) !important; }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav > .nav-link > span { flex: 0 0 auto !important; padding-right: 0 !important; white-space: nowrap !important; }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav > .nav-link > .rh-berater-nav__text { flex: 1 1 auto !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav .rh-berater-ico,
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav .rh-berater-nav__arrow { display: none !important; }
  body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item.rh-berater-nav .rh-berater-neu { flex: 0 0 auto !important; margin: 0 !important; }
}

/* --- Mobile Leiste ueber der Breadcrumb ---------------------------------------- */
.rh-berater-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 9px 14px; border-radius: 12px; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); color: var(--blue-900, #072a46); text-decoration: none !important; font-size: 13.5px; line-height: 1.3; }
.rh-berater-bar__text { flex: 1 1 auto; min-width: 0; }
.rh-berater-bar__text b { font-weight: 800; }
.rh-berater-bar__arrow { flex: 0 0 auto; color: var(--brand-primary, #116bb0); font-weight: 800; font-size: 16px; }
.rh-berater-bar:active { background: var(--blue-100, #e0effa); }
@media (min-width: 992px) { .rh-berater-bar { display: none !important; } }

/* --- PDP-Banner ------------------------------------------------------------------ */
.rh-berater-pdp { display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "ico body" "btn btn"; gap: 12px 14px; align-items: center; margin: 16px 0 0; padding: 16px; border-radius: 16px; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); }
.rh-berater-pdp__ico { grid-area: ico; width: 64px; height: 48px; }
.rh-berater-pdp__ico svg { width: 100%; height: 100%; display: block; }
.rh-berater-pdp__body { grid-area: body; min-width: 0; text-align: left; }
.rh-berater-pdp__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary, #116bb0); }
.rh-berater-pdp__title { margin: 0 0 4px; font-size: 16px; font-weight: 800; line-height: 1.25; color: var(--blue-900, #072a46); letter-spacing: -.01em; }
.rh-berater-pdp__text { margin: 0; font-size: 13.5px; line-height: 1.45; color: #34404c; }
.rh-berater-pdp__btn { grid-area: btn; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px; background: var(--brand-primary, #116bb0); color: #fff !important; font-size: 14.5px; font-weight: 800; text-decoration: none !important; transition: background-color .15s ease, transform .15s ease; }
.rh-berater-pdp__btn:hover { background: var(--blue-700, #0e548b); color: #fff !important; transform: translateY(-1px); }
.rh-berater-pdp__btn:focus-visible { outline: 3px solid var(--focus-ring, #ffbf47); outline-offset: 2px; }
@media (min-width: 992px) {
  .rh-berater-pdp { grid-template-columns: 64px 1fr auto; grid-template-areas: "ico body btn"; padding: 18px 20px; }
  .rh-berater-pdp__btn { white-space: nowrap; }
}
@media (min-width: 992px) and (max-width: 1499.98px) {
  .rh-berater-pdp { grid-template-columns: 56px 1fr; grid-template-areas: "ico body" "btn btn"; }
}
@media (max-width: 991.98px) {
  /* DHs Mobil-Reihenfolge arbeitet mit order auf .row.product-detail (display:contents-Spalten): #image_wrapper = 4 -> Banner ebenfalls 4, DOM-Reihenfolge stellt ihn direkt dahinter */
  .rh-berater-pdp--galerie { display: none !important; }
  /* unter dem Warenkorb-Button, in dessen Spalte (basket.tpl) */
  .rh-berater-pdp--atc { margin: 12px 0 2px !important; padding: 14px !important; gap: 10px 12px; width: 100%; }
  .rh-berater-pdp__ico { width: 52px; height: 40px; }
  .rh-berater-pdp { grid-template-columns: 52px 1fr; }
  .rh-berater-pdp__title { font-size: 15.5px; }
  .rh-berater-pdp__text { font-size: 13px; }
  .rh-berater-pdp__btn { min-height: 46px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .rh-berater-pdp__btn, .rh-berater-nav__link { transition: none !important; transform: none !important; } }
/* ============================================================================
   §RH-18 TYPOGRAFIE SHOPWEIT (rothler, 09.09.2026) — Enes: Option 3 aus dem
   Schriftbild-Vergleich: Manrope (Display: Ueberschriften, Menue, Preise, Buttons)
   + IBM Plex Sans (Body: Fliesstext, Produkttitel, Formulare). Selbst gehostet
   (fonts/*.woff2, @font-face in css/brand.css), Tokens --font-display/--font-body.
   Groessenskala nach Baymard & Co.: Fliesstext 16 px / 1,55, Nebentext nie < 13,5 px,
   Preise gross mit tabellarischen Ziffern, Produkttitel 16 px / 600 in 2 Zeilen,
   Buttons 16 px / 700, Eingaben 16 px (kein iOS-Zoom), Ueberschriften Manrope 800
   mit −2 % Laufweite. Startseite (data-page 18, licodingdevai) bekommt nur die
   Schriftfamilie, nicht die Groessen. Vorher: System-Schrift, Preise in Montserrat.
   ========================================================================= */

/* --- Grundschrift ------------------------------------------------------------ */
html body { font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.55 !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
html body input, html body select, html body textarea, html body button { font-family: var(--font-body); }
html body .form-control, html body select.form-control, html body .custom-select { font-family: var(--font-body) !important; font-size: 16px !important; }

/* --- Ueberschriften (ausser Startseite) -------------------------------------- */
html body h1, html body h2, html body h3, html body h4, html body .h1, html body .h2, html body .h3, html body .h4,
html body .productlist-filter-headline, html body .box-normal-link, html body .dh-pdp-buybox__title {
  font-family: var(--font-display) !important; font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
html body:not([data-page="18"]) h1, html body:not([data-page="18"]) .h1, html body h1.rt-basket__title { font-size: 26px !important; font-weight: 800 !important; }
html body h1.rt-basket__title, html body .rt-basket__title, html body .rt-basket h2, html body .rt-basket h3 { font-family: var(--font-display) !important; }
html body:not([data-page="18"]) h2, html body:not([data-page="18"]) .h2 { font-size: 21px !important; font-weight: 800 !important; letter-spacing: -.015em; }
html body:not([data-page="18"]) h3, html body:not([data-page="18"]) .h3 { font-size: 18px !important; font-weight: 700 !important; letter-spacing: -.01em; line-height: 1.25; }
html body:not([data-page="18"]) h4, html body:not([data-page="18"]) .h4 { font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0; line-height: 1.3; }
@media (min-width: 992px) {
  html body:not([data-page="18"]) h1, html body:not([data-page="18"]) .h1 { font-size: 34px !important; line-height: 1.1; }
  html body:not([data-page="18"]) h2, html body:not([data-page="18"]) .h2 { font-size: 24px !important; }
  html body:not([data-page="18"]) h3, html body:not([data-page="18"]) .h3 { font-size: 19px !important; }
}
/* Suchergebnis-Titel (Modul 40) und Kategorie-Titel halten die Skala, Eyebrow bleibt klein */
html body.rh-sr #result-wrapper .rh-sr__h1 { font-size: 26px !important; }
@media (min-width: 992px) { html body.rh-sr #result-wrapper .rh-sr__h1 { font-size: 30px !important; } }
html body.rh-sr #result-wrapper .rh-sr__h1 small { font-family: var(--font-display); font-size: 12px !important; letter-spacing: .08em; }

/* --- Menue / Kopf ------------------------------------------------------------- */
html body #jtl-nav-wrapper .navbar-nav > .nav-item > .nav-link, html body #jtl-nav-wrapper .nav-link, html body #header-top-bar .nav-link,
html body #header-top-bar .dh-topbar-msg { font-family: var(--font-display) !important; }
html body #header-top-bar .dh-topbar-msg, html body #header-top-bar .nav-link { font-size: 13px !important; font-weight: 500 !important; }
html body #jtl-nav-wrapper .main-search-wrapper input#search-header { font-family: var(--font-body) !important; }
html body .breadcrumb, html body .breadcrumb a, html body .breadcrumb li, html body .breadcrumb-item { font-family: var(--font-body) !important; font-size: 13.5px !important; }

/* --- Produktlisten: Titel 16/600 in 2 Zeilen, Preis Manrope 800 -------------- */
html body .productbox-title, html body .productbox-title a, html body .productbox .title, html body .productbox .title a {
  font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: var(--color-text, #0a1628) !important;
}
html body .productbox .productbox-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .price, html body .price_wrapper, html body .price_wrapper .price, html body .productbox .price, html body .price.h1, html body .price-total, html body .cart-total, html body .basket-total,
html body .productbox .price_wrapper .price, html body .rt-basket-total, html body .dh-pdp-price, html body .dh-sticky-price, html body .rh-ls__price {
  font-family: var(--font-display) !important; font-weight: 800 !important; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
html body .productbox .price_wrapper .price, html body .productbox .price, html body :is(#product-list, .opc-ProductStream) .productbox .productbox-price.price { font-size: 18px !important; line-height: 1.1 !important; font-weight: 800 !important; }
@media (min-width: 992px) { html body .productbox .price_wrapper .price, html body .productbox .price, html body :is(#product-list, .opc-ProductStream) .productbox .productbox-price.price { font-size: 20px !important; } }
html body .productbox .price_wrapper .suggested-price, html body .productbox .price_wrapper .strike, html body .productbox s, html body .productbox del { font-family: var(--font-body) !important; font-weight: 500 !important; font-size: 13.5px !important; letter-spacing: 0; }
html body .productbox .stock, html body .productbox .delivery-status, html body .productbox .badge { font-family: var(--font-body) !important; font-size: 13.5px !important; }

/* --- Produktseite -------------------------------------------------------------- */
html body[data-page="1"] #product-offer h1.dh-pdp-buybox__title, html body[data-page="1"] #product-offer h1.product-title { font-family: var(--font-display) !important; font-size: 21px !important; font-weight: 800 !important; line-height: 1.18 !important; letter-spacing: -.02em !important; }
@media (min-width: 992px) { html body[data-page="1"] #product-offer h1.dh-pdp-buybox__title, html body[data-page="1"] #product-offer h1.product-title { font-size: 24px !important; } }
html body .price_wrapper .price.h1, html body #product-offer .price.h1 { font-size: 28px !important; line-height: 1 !important; }
@media (min-width: 992px) { html body .price_wrapper .price.h1, html body #product-offer .price.h1 { font-size: 30px !important; } }
html body .price_wrapper .suggested-price, html body .price_wrapper .vat_info, html body .price_wrapper .price-note, html body .price_wrapper .yousave { font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0; }
html body #product-offer .variation, html body #product-offer .rh-var-group .variation-name, html body #product-offer label { font-family: var(--font-body) !important; font-size: 15px !important; }
html body #product-offer .rh-facts b, html body .rh-facts .val { font-family: var(--font-display) !important; font-weight: 800; font-variant-numeric: tabular-nums; }

/* --- Buttons: Manrope 700, 16 px ------------------------------------------------ */
html body .btn, html body button.btn, html body a.btn, html body .cta, html body .btn-primary, html body .btn-secondary, html body .btn-outline-primary {
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -.005em;
}
html body .btn-sm, html body .btn.btn-sm { font-size: 14px !important; }
html body .rh-berater-pdp__btn, html body .rh-berater-nav__link, html body .rh-berater-bar, html body .rh-sr__form button, html body .rh-ls__all { font-family: var(--font-display) !important; }

/* --- Fliesstext, Nebentext, Fusszeile -------------------------------------------- */
html body #content p:not(.rhk *), html body .productlist-description, html body .desc, html body .category-description, html body .article-description, html body .tab-content p, html body .box p { font-size: 16px !important; line-height: 1.55 !important; }
html body small, html body .small, html body .text-muted-util, html body .form-text { font-size: 14px !important; }
html body footer, html body footer p, html body footer a, html body footer li, html body .footer-info { font-size: 15px !important; line-height: 1.5; }
html body footer h4, html body footer .footer-headline, html body footer .h4 { font-family: var(--font-display) !important; font-size: 14px !important; letter-spacing: .06em; text-transform: uppercase; }
html body .alert { font-size: 15px !important; }
html body .badge, html body .rh-berater-neu, html body .eyebrow { font-family: var(--font-display) !important; }

/* --- Warenkorb / Checkout ---------------------------------------------------------- */
html body[data-page="2"] .cart-table, html body .basket-item, html body #cart-table td, html body .rt-basket-item { font-size: 15px !important; }
html body .cart-total .price, html body .rt-basket-total .price, html body .basket-total .price { font-size: 24px !important; }

/* checkout-premium.css laedt NACH custom.css und setzt body:not(.is-checkout) .rt-* auf var(--rt-font-sans)
   (Token nirgends definiert -> erbt Body-Schrift). Token fuellen + Titel/Summen mit hoeherer Spezifitaet auf Manrope. */
html body { --rt-font-sans: var(--font-body); }
html body:not(.is-checkout) h1.rt-basket__title, html body:not(.is-checkout) .rt-basket__title, html body:not(.is-checkout) .rt-cart__title,
html body:not(.is-checkout) .rt-shop-section__title, html body:not(.is-checkout) .rt-form-card__title, html body:not(.is-checkout) .rt-basket__empty-title,
html body:not(.is-checkout) .rt-summary__total-value, html body:not(.is-checkout) .rt-cart__total-value,
html body.is-checkout h1, html body.is-checkout h2, html body.is-checkout .h1, html body.is-checkout .h2 { font-family: var(--font-display) !important; letter-spacing: -.02em !important; }
html body:not(.is-checkout) h1.rt-basket__title { font-size: 26px !important; font-weight: 800 !important; }
@media (min-width: 992px) { html body:not(.is-checkout) h1.rt-basket__title { font-size: 34px !important; } }

/* --- Untergrenze Nebentext 13 px (Messung 09.09.2026: Topbar 10 px, Kategorie-Label 11 px, Listen-Meta 12 px …) --- */
html body #header-top-bar .nav-link, html body #header-top-bar .navbar-nav .nav-item .nav-link, html body #header-top-bar a, html body #header-top-bar .dh-topbar-msg, html body #header-top-bar .dh-topbar-msg span { font-size: 13px !important; }
@media (max-width: 991px) { html body #header-top-bar .dh-topbar-msg, html body #header-top-bar .dh-topbar-msg span { font-size: 12.5px !important; } }
html body .rh-berater-nav__text { font-size: 13px !important; }
html body .dh-subcat-label, html body #content .dh-subcat-label { font-size: 13px !important; color: #3d4956 !important; letter-spacing: .06em; }
html body .productlist-item-info, html body #product-list .productlist-item-info { font-size: 13.5px !important; }
html body .productbox .rothler-rating-count, html body .productbox .rt-productlist-delivery__status, html body .productbox .rt-productlist-delivery, html body .productbox .rt-productlist-variation, html body .productbox .rt-productlist-variation span, html body .productbox .productbox-variations, html body .productbox .rh-var-count, html body .productbox .dh-variations-count, html body .productbox small { font-size: 13px !important; }
html body #product-offer .dh-pdp-buybox__sku, html body #product-offer .dh-pdp-save-pill, html body #product-offer .rh-facts__k, html body .rh-facts__k { font-size: 13px !important; }
html body .breadcrumb span, html body .breadcrumb-item span, html body .breadcrumb a span { font-size: 13.5px !important; }
html body footer .dh-ft__pay-lbl, html body .dh-ft__pay-lbl, html body footer .dh-ft__trust span, html body footer .dh-ft__usp span, html body footer .dh-ft__service span { font-size: 13px !important; }
html body.rh-sr #result-wrapper .rh-sr__h1 small { font-size: 13px !important; }
html body .productbox .ribbon, html body .ribbon { font-size: 11px !important; }
html body[data-page="1"] #product-offer .dh-pdp-buybox__head .dh-pdp-buybox__sku, html body[data-page="1"] #product-offer .dh-pdp-buybox__sku,
html body[data-page="1"] #product-offer .dh-pdp-price-row--top .dh-pdp-save-pill, html body[data-page="1"] #product-offer .dh-pdp-save-pill,
html body[data-page="1"] #product-offer .product-info-inner .js-btn-slider-wrapper, html body[data-page="1"] #product-offer .rh-var-group .js-btn-slider-wrapper { font-size: 13px !important; }
html body footer .dh-ft__seo-title, html body .dh-ft__seo-title { font-size: 13px !important; }
html body[data-page="1"] #product-offer .rothler-trust-label, html body .rothler-trust-label { font-size: 12.5px !important; letter-spacing: .04em; }
html body[data-page="1"] #product-offer .dh-pdp-radio-pill__limit { font-size: 13px !important; }
/* ============================================================================
   §RH-19 KATEGORIESEITE MOBIL — KOPF KOMPAKT (rothler, 09.09.2026, Enes)
   1) Konfigurator-Leiste unter den Unterkategorie-Chips (productlist/header.tpl)
   2) Beschreibung: 2 Zeilen, Rest ausgegraut, „Mehr anzeigen" (js/rh-kategorie.js)
   3) Filter-Knopf kompakt in EINER Zeile neben „Artikel 1 - 20 von 20" — NOVA
      verschachtelt Knopf und Collapse tief (.displayoptions > #improve_search >
      #result-options > .row > .col > button, Collapse als Geschwister); mit
      display:contents werden Knopf, Zähler und Collapse direkte Flex-Kinder.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* 1) Leiste */
  body #result-wrapper .rh-berater-bar-wrap--kat { margin: 4px 0 14px; }
  body #result-wrapper .rh-berater-bar-wrap--kat .rh-berater-bar { margin: 0; }

  /* 2) Beschreibung */
  body #result-wrapper .rh-desc { margin-bottom: 14px; }
  body #result-wrapper .rh-desc__text { position: relative; }
  body #result-wrapper .rh-desc.is-clamped .rh-desc__text { max-height: calc(2 * 1.55em); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.35) 100%); mask-image: linear-gradient(180deg, #000 45%, rgba(0,0,0,.35) 100%); }
  body #result-wrapper .rh-desc__text p:last-child { margin-bottom: 0; }
  body #result-wrapper .rh-desc__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 0; border: 0; background: none;
    color: var(--brand-primary, #116bb0); font-family: var(--font-display, inherit); font-size: 14px; font-weight: 700; cursor: pointer; }
  body #result-wrapper .rh-desc__more::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  body #result-wrapper .rh-desc.is-open .rh-desc__more::after { transform: translateY(2px) rotate(-135deg); }
  body #result-wrapper .rh-desc__more[hidden] { display: none; }

  /* 3) Filterzeile */
  body #result-wrapper .productlist-page-nav-header-m { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin: 0 0 12px !important; padding: 0 !important; }
  body #result-wrapper .productlist-page-nav-header-m .displayoptions,
  body #result-wrapper .productlist-page-nav-header-m #improve_search,
  body #result-wrapper .productlist-page-nav-header-m #result-options,
  body #result-wrapper .productlist-page-nav-header-m #result-options > .row,
  body #result-wrapper .productlist-page-nav-header-m .filter-collapsible-control { display: contents !important; }
  body #result-wrapper .productlist-page-nav-header-m .productlist-item-info { order: -1; flex: 1 1 auto; width: auto; max-width: none; padding: 0 !important; margin: 0 !important; border: 0 !important; font-size: 13.5px !important; font-weight: 700; color: var(--color-text, #0a1628); }
  body #result-wrapper .productlist-page-nav-header-m #js-filters { order: 0; flex: 0 0 auto; width: auto !important; display: inline-flex !important; align-items: center; gap: 7px; height: 36px; margin: 0 !important; padding: 0 14px !important;
    border: 1px solid var(--blue-100, #d6e6f5) !important; border-radius: 999px !important; background: #fff !important; color: var(--color-text, #0a1628) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap; box-shadow: none !important; }
  body #result-wrapper .productlist-page-nav-header-m #js-filters .fas { font-size: 13px; color: var(--brand-primary, #116bb0); }
  body #result-wrapper .productlist-page-nav-header-m #js-filters[aria-expanded="true"] { background: var(--blue-50, #f2f8fd) !important; border-color: var(--brand-primary, #116bb0) !important; }
  body #result-wrapper .productlist-page-nav-header-m #collapseFilter { order: 1; flex: 0 0 100%; width: 100%; }
  /* Tablet-/Modal-Variante: Filter + Sortierung als zwei kompakte Pillen rechts */
  body #result-wrapper .productlist-page-nav-header-m .filter-type-FilterItemSort { order: 0; flex: 0 0 auto; margin: 0 !important; }
  body #result-wrapper .productlist-page-nav-header-m .filter-type-FilterItemSort > .btn { height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; }
  body #result-wrapper .productlist-page-nav-header-m .productlist-pagination { order: 2; flex: 0 0 100%; }
}
/* H1 wird per JS aus dem Beschreibungstext vor den Block gezogen (mobil wie Desktop) */
body #result-wrapper .rh-desc > h1 { margin-bottom: 10px; }
body #result-wrapper .rh-desc__text > p:first-child { margin-top: 0; }
/* ============================================================================
   §RH-20 HEADER-ICONS PHOSPHOR (rothler, 09.09.2026) — Enes: Set 3 aus dem Icon-Vergleich.
   Suche, Konto, Warenkorb, Schliessen als Phosphor-Regular-SVG (MIT) per CSS-Maske auf den
   vorhandenen Font-Awesome-Elementen (kein Template-Eingriff, Farbe = currentColor).
   Quelle der SVGs: rothler-claude/icons/phosphor/. Burger: drei Balken, animiert zum X.
   Mobil: alle Tastflaechen 44 x 44, Glyphe 26 px, Abstand 2 px; Desktop: Glyphe 22 px.
   Spezifitaet html body #jtl-nav-wrapper … schlaegt Module 16/27/35.
   ========================================================================= */
html body #jtl-nav-wrapper .fas.fa-search, html body #jtl-nav-wrapper .fas.fa-user, html body #jtl-nav-wrapper .fas.fa-user-check,
html body #jtl-nav-wrapper .fas.fa-shopping-cart, html body #jtl-nav-wrapper .fas.fa-times, html body #jtl-nav-wrapper .fa.fa-search,
html body .dh-msearch-panel .fas.fa-search, html body .dh-msearch-panel .fas.fa-times {
  display: inline-block !important; width: 22px !important; height: 22px !important; font-size: 0 !important; line-height: 0 !important; vertical-align: middle !important;
  background-color: currentColor !important; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
}
html body #jtl-nav-wrapper .fas.fa-search::before, html body #jtl-nav-wrapper .fas.fa-user::before, html body #jtl-nav-wrapper .fas.fa-user-check::before,
html body #jtl-nav-wrapper .fas.fa-shopping-cart::before, html body #jtl-nav-wrapper .fas.fa-times::before, html body #jtl-nav-wrapper .fa.fa-search::before,
html body .dh-msearch-panel .fas.fa-search::before, html body .dh-msearch-panel .fas.fa-times::before { content: none !important; display: none !important; }
html body #jtl-nav-wrapper .fas.fa-search, html body #jtl-nav-wrapper .fa.fa-search, html body .dh-msearch-panel .fas.fa-search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E"); }
html body #jtl-nav-wrapper .fas.fa-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M230.92,212c-15.23-26.33-38.7-45.21-66.09-54.16a72,72,0,1,0-73.66,0C63.78,166.78,40.31,185.66,25.08,212a8,8,0,1,0,13.85,8c18.84-32.56,52.14-52,89.07-52s70.23,19.44,89.07,52a8,8,0,1,0,13.85-8ZM72,96a56,56,0,1,1,56,56A56.06,56.06,0,0,1,72,96Z'/%3E%3C/svg%3E"); }
html body #jtl-nav-wrapper .fas.fa-user-check { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17a8,8,0,0,0,12.25,10.3C50.25,181.19,77.91,168,108,168s57.75,13.19,77.87,37.15a8,8,0,0,0,12.25-10.3C183.18,177.07,164.6,164.44,144,157.68ZM56,100a52,52,0,1,1,52,52A52.06,52.06,0,0,1,56,100Zm197.66,33.66-32,32a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,11.32-11.32L216,148.69l26.34-26.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M144,157.68a68,68,0,1,0-71.9,0c-20.65,6.76-39.23,19.39-54.17,37.17a8,8,0,0,0,12.25,10.3C50.25,181.19,77.91,168,108,168s57.75,13.19,77.87,37.15a8,8,0,0,0,12.25-10.3C183.18,177.07,164.6,164.44,144,157.68ZM56,100a52,52,0,1,1,52,52A52.06,52.06,0,0,1,56,100Zm197.66,33.66-32,32a8,8,0,0,1-11.32,0l-16-16a8,8,0,0,1,11.32-11.32L216,148.69l26.34-26.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
html body #jtl-nav-wrapper .fas.fa-shopping-cart { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M104,216a16,16,0,1,1-16-16A16,16,0,0,1,104,216Zm88-16a16,16,0,1,0,16,16A16,16,0,0,0,192,200ZM239.71,74.14l-25.64,92.28A24.06,24.06,0,0,1,191,184H92.16A24.06,24.06,0,0,1,69,166.42L33.92,40H16a8,8,0,0,1,0-16H40a8,8,0,0,1,7.71,5.86L57.19,64H232a8,8,0,0,1,7.71,10.14ZM221.47,80H61.64l22.81,82.14A8,8,0,0,0,92.16,168H191a8,8,0,0,0,7.71-5.86Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M104,216a16,16,0,1,1-16-16A16,16,0,0,1,104,216Zm88-16a16,16,0,1,0,16,16A16,16,0,0,0,192,200ZM239.71,74.14l-25.64,92.28A24.06,24.06,0,0,1,191,184H92.16A24.06,24.06,0,0,1,69,166.42L33.92,40H16a8,8,0,0,1,0-16H40a8,8,0,0,1,7.71,5.86L57.19,64H232a8,8,0,0,1,7.71,10.14ZM221.47,80H61.64l22.81,82.14A8,8,0,0,0,92.16,168H191a8,8,0,0,0,7.71-5.86Z'/%3E%3C/svg%3E"); }
html body #jtl-nav-wrapper .fas.fa-times, html body .dh-msearch-panel .fas.fa-times { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); }
/* Warenkorb-Icon traegt in NOVA ein Leerzeichen als Inhalt + Preis-Span daneben */
html body #jtl-nav-wrapper .cart-icon-dropdown .nav-link { display: inline-flex !important; align-items: center !important; gap: 6px; }
html body #jtl-nav-wrapper .cart-icon-dropdown .nav-link .badge { position: absolute; top: 4px; right: 2px; }

/* --- Desktop: Konto + Warenkorb 22 px, Suchfeld-Lupe 18 px ---------------------------------------------------- */
@media (min-width: 992px) {
  html body #jtl-nav-wrapper .nav-icons .nav-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px; }
  html body #jtl-nav-wrapper .main-search-wrapper .fas.fa-search { width: 18px !important; height: 18px !important; }
}

/* --- Mobil: 44er Tastflaechen, Glyphe 26 px, Burger animiert, Drawer weich --------------------------------------- */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper .fas.fa-search, html body #jtl-nav-wrapper .fas.fa-user, html body #jtl-nav-wrapper .fas.fa-user-check, html body #jtl-nav-wrapper .fas.fa-shopping-cart { width: 26px !important; height: 26px !important; }
  html body #jtl-nav-wrapper .dh-msearch-toggle, html body #jtl-nav-wrapper .nav-icons .nav-link, html body #jtl-nav-wrapper .nav-link.nav-link-custom, html body #jtl-nav-wrapper .cart-icon-dropdown .nav-link {
    width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  html body #jtl-nav-wrapper .nav-icons { display: flex !important; align-items: center !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
  html body #jtl-nav-wrapper .nav-icons .nav-item, html body #jtl-nav-wrapper .nav-icons .dropdown { margin: 0 !important; padding: 0 !important; }
  html body #jtl-nav-wrapper .cart-icon-dropdown-price { display: none !important; }
  html body #jtl-nav-wrapper .cart-icon-dropdown .nav-link .badge { top: 5px; right: 3px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; font-size: 10.5px; border-radius: 999px; }

  /* Burger: drei Balken 22 x 2, Abstand 7 px, Uebergang zum X (Module 27 liefert Grundform ohne Animation) */
  html body #jtl-nav-wrapper #burger-menu { width: 44px !important; height: 44px !important; margin: 0 !important; }
  html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon { transition: background-color .18s ease !important; }
  html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::before, html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::after {
    transition: top .22s cubic-bezier(.4,0,.2,1) .18s, transform .24s cubic-bezier(.4,0,.2,1) !important;
  }
  html body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent !important; transition-delay: .1s !important; }
  html body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::before, html body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::after {
    transition: top .22s cubic-bezier(.4,0,.2,1), transform .26s cubic-bezier(.4,0,.2,1) .2s !important;
  }
  html body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::before { top: 0 !important; transform: rotate(45deg) !important; }
  html body #jtl-nav-wrapper #burger-menu[aria-expanded="true"] .navbar-toggler-icon::after { top: 0 !important; transform: rotate(-45deg) !important; }

  /* Schliessen-X im Drawer-Kopf: Phosphor statt Font Awesome, 44er Flaeche */
  html body #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler { width: 44px !important; height: 44px !important; }
  html body #jtl-nav-wrapper #mainNavigation .nav-mobile-header .navbar-toggler::before {
    content: "" !important; font-size: 0 !important; width: 26px !important; height: 26px !important; display: block !important;
    background-color: var(--blue-900, #072a46) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  /* Drawer: weiche Kurve + Schatten, Eintraege laufen gestaffelt ein */
  html body #jtl-nav-wrapper #mainNavigation { transition: transform .4s cubic-bezier(.22,.61,.36,1) !important; box-shadow: 0 0 40px rgba(4,25,42,.25); will-change: transform; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item > .nav-link { animation: rhDrawerIn .38s cubic-bezier(.22,.61,.36,1) both; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(1) > .nav-link { animation-delay: .06s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(2) > .nav-link { animation-delay: .10s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(3) > .nav-link { animation-delay: .14s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(4) > .nav-link { animation-delay: .18s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(5) > .nav-link { animation-delay: .22s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(6) > .nav-link { animation-delay: .26s; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item:nth-child(n+7) > .nav-link { animation-delay: .3s; }
  html body .modal-backdrop { transition: opacity .3s ease !important; }
}
@keyframes rhDrawerIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html body #jtl-nav-wrapper #mainNavigation { transition: none !important; }
  html body #jtl-nav-wrapper #mainNavigation.show .navbar-nav > .nav-item > .nav-link { animation: none !important; }
  html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon, html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::before, html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::after { transition: none !important; }
}
/* Konto-Link: Modul 13 setzt Breite 22 px mit (1,3,0) -> hier (1,5,3) */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown > .nav-link.nav-link-custom, html body #jtl-nav-wrapper .nav-icons-wrapper .cart-icon-dropdown > .nav-link,
  html body #jtl-nav-wrapper .nav-icons-wrapper > .nav-item > .nav-link { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; }
  html body #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown > .nav-link .fas.fa-user, html body #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown > .nav-link .fas.fa-user-check,
  html body #jtl-nav-wrapper .nav-icons-wrapper .cart-icon-dropdown > .nav-link .fas.fa-shopping-cart { width: 26px !important; min-width: 26px !important; height: 26px !important; }
}
@media (min-width: 992px) {
  html body #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown > .nav-link .fas.fa-user, html body #jtl-nav-wrapper .nav-icons-wrapper .account-icon-dropdown > .nav-link .fas.fa-user-check,
  html body #jtl-nav-wrapper .nav-icons-wrapper .cart-icon-dropdown > .nav-link .fas.fa-shopping-cart { width: 22px !important; min-width: 22px !important; height: 22px !important; }
}
/* DH zeichnet am ::before zusaetzliche weisse Balken per box-shadow (roter Header) -> lagen ueber dem Mittelbalken */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon, html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::before, html body #jtl-nav-wrapper #burger-menu .navbar-toggler-icon::after,
  html body #jtl-nav-wrapper .navbar-toggler .navbar-toggler-icon, html body #jtl-nav-wrapper .navbar-toggler .navbar-toggler-icon::before, html body #jtl-nav-wrapper .navbar-toggler .navbar-toggler-icon::after {
    box-shadow: none !important; outline: 0 !important; border: 0 !important; background-image: none !important; filter: none !important;
  }
}
/* ============================================================================
   §RH-21 MOBILES MENUE + KONTO-PANEL (rothler, 09.09.2026, Enes)
   1) Drawer: runde Kategoriebilder (40 / 36 px) vor Haupt- und Unterkategorien, Icon-Kreise fuer
      Textlinks (B2B, Ratgeber, Hilfe), Konfigurator-Icon im gleichen Kreis; Zeilen 60 px.
   2) Zweite Ebene beginnt direkt unter dem Kopf (NOVA setzte sie auf die Hoehe des li -> Leerfeld).
   3) Trust-Block am Ende: Sterne + vier Vorteile mit Phosphor-Icons.
   4) Konto-Dropdown mobil als Panel ueber die ganze Breite unter dem Header.
   ========================================================================= */
@media (max-width: 991.98px) {
  /* --- Zeilen --------------------------------------------------------------- */
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link {
    display: flex !important; align-items: center !important; gap: 12px !important; min-height: 60px !important; padding: 8px 16px !important; font-size: 16px !important;
  }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link .nav-mobile-heading { flex: 1 1 auto; min-width: 0; }
  html body #jtl-nav-wrapper #mainNavigation .rh-nav-thumb {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); display: block;
  }
  html body #jtl-nav-wrapper #mainNavigation .rh-nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html body #jtl-nav-wrapper #mainNavigation .rh-nav-thumb--sm { flex-basis: 36px; width: 36px; height: 36px; }
  /* Icon-Kreise fuer Textlinks (per URL) und den Konfigurator */
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link:not(.rh-has-thumb):not(.rh-berater-nav__link)::before,
  html body #jtl-nav-wrapper #mainNavigation .rh-berater-nav__link .rh-berater-ico {
    content: "" !important; display: block !important; flex: 0 0 40px; width: 40px !important; height: 40px !important; border-radius: 50%; background: var(--blue-50, #f2f8fd) !important; border: 1px solid var(--blue-100, #e0effa);
    -webkit-mask: none; mask: none; position: relative; box-sizing: border-box;
  }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link:not(.rh-has-thumb):not(.rh-berater-nav__link)::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20fill='%23072a46'%20d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") !important; background-size: 20px 20px !important; background-position: center !important; background-repeat: no-repeat !important;
  }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link[href*="b2b" i]:not(.rh-has-thumb)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20fill='%23072a46'%20d='M216,56H176V48a24,24,0,0,0-24-24H104A24,24,0,0,0,80,48v8H40A16,16,0,0,0,24,72V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V72A16,16,0,0,0,216,56ZM96,48a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96ZM216,72v41.61A184,184,0,0,1,128,136a184.07,184.07,0,0,1-88-22.38V72Zm0,128H40V131.64A200.19,200.19,0,0,0,128,152a200.25,200.25,0,0,0,88-20.37V200ZM104,112a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H112A8,8,0,0,1,104,112Z'/%3E%3C/svg%3E") !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link[href*="ratgeber" i]:not(.rh-has-thumb)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20fill='%23072a46'%20d='M232,48H160a40,40,0,0,0-32,16A40,40,0,0,0,96,48H24a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H96a24,24,0,0,1,24,24,8,8,0,0,0,16,0,24,24,0,0,1,24-24h72a8,8,0,0,0,8-8V56A8,8,0,0,0,232,48ZM96,192H32V64H96a24,24,0,0,1,24,24V200A39.81,39.81,0,0,0,96,192Zm128,0H160a39.81,39.81,0,0,0-24,8V88a24,24,0,0,1,24-24h64Z'/%3E%3C/svg%3E") !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link[href*="hilfe" i]:not(.rh-has-thumb)::before,
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-scrollbar-item > .nav-link[href*="kontakt" i]:not(.rh-has-thumb)::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20fill='%23072a46'%20d='M201.89,54.66A103.43,103.43,0,0,0,128.79,24H128A104,104,0,0,0,24,128v56a24,24,0,0,0,24,24H64a24,24,0,0,0,24-24V144a24,24,0,0,0-24-24H40.36A88.12,88.12,0,0,1,190.54,65.93,87.39,87.39,0,0,1,215.65,120H192a24,24,0,0,0-24,24v40a24,24,0,0,0,24,24h24a24,24,0,0,1-24,24H136a8,8,0,0,0,0,16h56a40,40,0,0,0,40-40V128A103.41,103.41,0,0,0,201.89,54.66ZM64,136a8,8,0,0,1,8,8v40a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V136Zm128,56a8,8,0,0,1-8-8V144a8,8,0,0,1,8-8h24v56Z'/%3E%3C/svg%3E") !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-berater-nav__link .rh-berater-ico { background-size: 20px 20px !important; background-position: center !important; background-repeat: no-repeat !important; }
  html body #jtl-nav-wrapper #mainNavigation .nav-scrollbar-item > .nav-link::before { display: block !important; }

  /* --- Zweite Ebene direkt unter dem Kopf ----------------------------------------- */
  html body #jtl-nav-wrapper #mainNavigation .nav-mobile-body { position: relative !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full { position: static !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show { top: 0 !important; margin-top: 0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 56px !important; padding: 6px 16px !important; font-size: 16px !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a > .text-truncate { flex: 1 1 auto; min-width: 0; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.dropdown > a.d-block { min-height: 52px !important; }

  /* --- Trust-Block ----------------------------------------------------------------- */
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust { list-style: none; margin: 8px 12px 24px; padding: 14px 14px 6px; border-radius: 14px; background: var(--blue-50, #f2f8fd); border: 1px solid var(--blue-100, #e0effa); }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid var(--blue-100, #e0effa); font-size: 13px; color: #3d4956; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__stars { display: inline-flex; gap: 1px; color: #f5a623; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__stars svg { width: 15px; height: 15px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__rating b { font-family: var(--font-display, inherit); font-size: 15px; color: var(--blue-900, #072a46); }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list li { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 0 8px; font-size: 12.5px; line-height: 1.3; color: #3d4956; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--brand-primary, #116bb0); margin-top: 1px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list b { display: block; font-weight: 700; color: var(--blue-900, #072a46); font-size: 13px; }

  /* --- Konto-Panel ----------------------------------------------------------------- */
  html body #jtl-nav-wrapper > .container-fluid, html body #jtl-nav-wrapper .navbar { position: relative; }
  html body #jtl-nav-wrapper .nav-icons-wrapper, html body #jtl-nav-wrapper .nav-icons, html body #jtl-nav-wrapper .account-icon-dropdown { position: static !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown > .dropdown-menu {
    position: absolute !important; left: 0 !important; right: 0 !important; top: 100% !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; transform: none !important;
    padding: 4px 16px 8px !important; border: 0 !important; border-top: 1px solid var(--blue-100, #e0effa) !important; border-radius: 0 0 18px 18px !important; background: #fff !important;
    box-shadow: 0 28px 40px -22px rgba(4,25,42,.4) !important; z-index: 1040 !important;
  }
  html body #jtl-nav-wrapper .account-icon-dropdown .dropdown-body { padding: 14px 0 6px !important; min-width: 0 !important; width: auto !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown legend { font-family: var(--font-display, inherit); font-size: 18px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--blue-900, #072a46); margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; line-height: 1.2; }
  html body #jtl-nav-wrapper .account-icon-dropdown .form-group { margin: 0 0 10px !important; width: 100% !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown .form-control { height: 48px !important; font-size: 16px !important; padding: 12px 14px !important; border-radius: 12px !important; border: 1px solid #cfd8e3 !important; width: 100% !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown .form-group label { font-size: 13px !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown #submit-btn { height: 48px !important; font-size: 16px !important; border-radius: 12px !important; margin-top: 4px !important; }
  html body #jtl-nav-wrapper .account-icon-dropdown .dropdown-body > a { display: block; margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--brand-primary, #116bb0); }
  html body #jtl-nav-wrapper .account-icon-dropdown .dropdown-footer { margin: 8px -16px -8px !important; padding: 14px 16px !important; background: var(--blue-50, #f2f8fd) !important; border-radius: 0 0 18px 18px !important; font-size: 14px !important; text-align: center; }
  html body #jtl-nav-wrapper .account-icon-dropdown .dropdown-footer a { font-weight: 700; color: var(--brand-primary, #116bb0); }
}

/* Nachtrag 1: Bilder im Drawer erzwingen (NOVA/DH blenden img im mobilen Menue aus), Textlinks linksbuendig,
   Konfigurator-Kreis gegen Modul 41, zweite Ebene fix unter dem Drawer-Kopf, Trust einspaltig */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-link .rh-nav-thumb, html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper a .rh-nav-thumb { display: block !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper a .rh-nav-thumb--sm { flex-basis: 36px !important; width: 36px !important; height: 36px !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .rh-nav-thumb img, html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .rh-nav-thumb img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link, html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a { justify-content: flex-start !important; text-align: left !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-item.rh-berater-nav .nav-link.rh-berater-nav__link { min-height: 60px !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-item.rh-berater-nav .nav-link.rh-berater-nav__link .rh-berater-ico { display: block !important; width: 40px !important; height: 40px !important; flex: 0 0 40px !important; margin: 0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list { grid-template-columns: 1fr; gap: 2px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list li { align-items: center; padding: 6px 0; font-size: 13px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list li span { display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list b { display: inline; font-size: 13.5px; }
  html body #jtl-nav-wrapper #mainNavigation .rh-dtrust__list svg { margin-top: 0; }
}
@keyframes rhL2In { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show { animation: none !important; } }

/* Nachtrag 2: NOVA gibt jedem li und der ul eine Transform (Containing Block) -> zweite Ebene lag auf Hoehe des li.
   Loesung: Transforms neutralisieren, zweite Ebene absolut ueber die erste legen (nav-mobile-body ist relativ),
   Scroll-Reset per js/rh-drawer.js. Bilder fuellen den Kreis absolut, Konfigurator-Kreis mit Phosphor-Icon. */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav, html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item { transform: none !important; will-change: auto !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full { position: static !important; }
  html body #jtl-nav-wrapper #mainNavigation .nav-mobile-body { position: relative !important; min-height: calc(100% - 79px); }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show {
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; min-height: 100% !important; height: auto !important; max-height: none !important;
    margin: 0 !important; padding-bottom: 24px !important; background: #fff !important; z-index: 6 !important; animation: rhL2In .26s cubic-bezier(.22,.61,.36,1) both;
  }
  html body #jtl-nav-wrapper #mainNavigation .rh-nav-thumb { position: relative !important; }
  html body #jtl-nav-wrapper #mainNavigation .rh-nav-thumb img { position: absolute !important; inset: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-item.rh-berater-nav .nav-link.rh-berater-nav__link { padding: 8px 16px !important; min-height: 60px !important; gap: 12px !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-item.rh-berater-nav .nav-link.rh-berater-nav__link .rh-berater-ico {
    background: var(--blue-50, #f2f8fd) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20256%20256'%3E%3Cpath%20fill='%23116bb0'%20d='M40,88H73a32,32,0,0,0,62,0h81a8,8,0,0,0,0-16H135a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16Zm64-24A16,16,0,1,1,88,80,16,16,0,0,1,104,64ZM216,168H199a32,32,0,0,0-62,0H40a8,8,0,0,0,0,16h97a32,32,0,0,0,62,0h17a8,8,0,0,0,0-16Zm-48,24a16,16,0,1,1,16-16A16,16,0,0,1,168,192Z'/%3E%3C/svg%3E") center / 22px 22px no-repeat !important; border: 1px solid var(--blue-100, #e0effa) !important;
  }
  html body #jtl-nav-wrapper #mainNavigation .rh-berater-nav__text { white-space: normal !important; font-size: 15.5px !important; line-height: 1.2 !important; flex: 1 1 auto; min-width: 0; }
  html body #jtl-nav-wrapper #mainNavigation .rh-berater-nav .rh-berater-neu { flex: 0 0 auto; }
}
/* Nachtrag 3: zweite Ebene ohne Leerraum oben, Bild-Achsen von Ebene 1 und 2 buendig (Mitte 37 px), Konfigurator-Text zweizeilig statt abgeschnitten */
@media (max-width: 991.98px) {
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.dropdown-full > .dropdown-menu.show > .dropdown-body { padding-top: 0 !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m > a { padding-left: 11px !important; }
  html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper .nav-item-lg-m.dropdown > a.d-block { padding-left: 16px !important; }
  html body #jtl-nav-wrapper #mainNavigation .navbar-nav .nav-item.rh-berater-nav .nav-link.rh-berater-nav__link .rh-berater-nav__text { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; font-size: 15.5px !important; line-height: 1.2 !important; }
}
@media (max-width: 991.98px) { html body #jtl-nav-wrapper #mainNavigation .subcategory-wrapper a .rh-nav-thumb--sm { margin-left: -3px !important; } }
/* ============================================================================
   §RH-22 FORMULARE STRIPE-STIL (rothler, 10.09.2026, Enes): Placeholder statt Label (js/rh-forms.js),
   Felder 48 px / 16 px / Radius 10, ruhige Rahmen, klare Hover-/Fokus-/Fehlerzustaende, Buttons mit
   weissem Text. Gilt fuer Formulare im Inhalt (Registrierung, Login, Konto, Kontakt) und das Konto-Panel
   im Header. Checkout bleibt bei checkout-premium.css.
   ========================================================================= */
:root { --rh-in-line: #cfd8e3; --rh-in-hover: #9fb0c3; --rh-in-focus: var(--brand-primary, #116bb0); --rh-in-ring: rgba(17,107,176,.16); --rh-in-err: #c8102e; --rh-in-err-ring: rgba(200,16,46,.14); }

/* --- Felder --------------------------------------------------------------------- */
html body:not(.is-checkout) #content form .form-control, html body #jtl-nav-wrapper .account-icon-dropdown .form-control {
  height: 48px !important; padding: 0 14px !important; font-size: 16px !important; line-height: 46px !important; color: var(--color-text, #0a1628) !important;
  background: #fff !important; border: 1px solid var(--rh-in-line) !important; border-radius: 10px !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease !important; -webkit-appearance: none; appearance: none;
}
html body:not(.is-checkout) #content form textarea.form-control { height: auto !important; min-height: 120px; padding: 12px 14px !important; line-height: 1.5 !important; }
html body:not(.is-checkout) #content form select.form-control, html body:not(.is-checkout) #content form .custom-select {
  padding-right: 40px !important; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23072a46' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 14px center / 16px 16px no-repeat !important;
}
html body:not(.is-checkout) #content form .form-control::placeholder, html body #jtl-nav-wrapper .account-icon-dropdown .form-control::placeholder { color: #6b7683 !important; opacity: 1 !important; font-weight: 400; }
html body:not(.is-checkout) #content form .form-control:hover, html body #jtl-nav-wrapper .account-icon-dropdown .form-control:hover { border-color: var(--rh-in-hover) !important; }
html body:not(.is-checkout) #content form .form-control:focus, html body #jtl-nav-wrapper .account-icon-dropdown .form-control:focus { border-color: var(--rh-in-focus) !important; box-shadow: 0 0 0 3px var(--rh-in-ring) !important; outline: 0 !important; }
html body:not(.is-checkout) #content form .form-control.is-invalid, html body:not(.is-checkout) #content form .was-validated .form-control:invalid { border-color: var(--rh-in-err) !important; background-image: none !important; }
html body:not(.is-checkout) #content form .form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--rh-in-err-ring) !important; }
html body:not(.is-checkout) #content form .form-control:disabled, html body:not(.is-checkout) #content form .form-control[readonly] { background: #f4f6f9 !important; color: #6b7683 !important; }
html body:not(.is-checkout) #content form .invalid-feedback { font-size: 13px; margin-top: 4px; color: var(--rh-in-err); }

/* --- Label versteckt (Placeholder traegt den Text), NOVA-Slide aus --------------- */
html body:not(.is-checkout) #content form .form-group.rh-ph, html body #jtl-nav-wrapper .account-icon-dropdown .form-group.rh-ph { position: relative; margin: 0 0 10px !important; padding: 0 !important; }
html body:not(.is-checkout) #content form .form-group.rh-ph label, html body #jtl-nav-wrapper .account-icon-dropdown .form-group.rh-ph label,
html body:not(.is-checkout) #content form .form-group.rh-ph .col-form-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; transform: none !important; }
html body:not(.is-checkout) #content form.label-slide .form-group.rh-ph .form-control { padding-top: 0 !important; padding-bottom: 0 !important; }

/* --- Paare nebeneinander ----------------------------------------------------------- */
html body:not(.is-checkout) #content form .rh-row { display: flex !important; flex-wrap: wrap !important; gap: 0 10px !important; margin: 0 !important; }
html body:not(.is-checkout) #content form .rh-row > * { flex: 1 1 100% !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
html body:not(.is-checkout) #content form .rh-row > .rh-half { flex: 1 1 calc(50% - 5px) !important; min-width: 0; }
html body:not(.is-checkout) #content form .rh-row > .rh-wide { flex: 2 1 0 !important; min-width: 0; }
html body:not(.is-checkout) #content form .rh-row > .rh-narrow { flex: 1 1 0 !important; min-width: 96px; }
html body:not(.is-checkout) #content form .rh-row > * > .form-group { margin-bottom: 10px !important; }

/* --- Abschnitte kompakt ---------------------------------------------------------------- */
html body:not(.is-checkout) #content form h2.h3, html body:not(.is-checkout) #content form legend, html body:not(.is-checkout) #content form .h3 {
  font-family: var(--font-display, inherit) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: #3d4956 !important; margin: 22px 0 10px !important; padding: 0 !important; border: 0 !important;
}
html body:not(.is-checkout) #content form > h2.h3:first-child, html body:not(.is-checkout) #content form .form-row:first-of-type h2.h3 { margin-top: 6px !important; }
html body:not(.is-checkout) #content form hr { margin: 8px 0 !important; border-color: #eef2f6 !important; }
html body:not(.is-checkout) #content .register-form ~ p, html body:not(.is-checkout) #content form p.text-muted-util, html body:not(.is-checkout) #content .mandatory-hint, html body[data-page="10"] #content > p, html body[data-page="10"] #content .required-info { font-size: 13px !important; color: #6b7683 !important; margin: 0 0 12px !important; }
html body[data-page="10"] #content h1 { margin-bottom: 8px !important; }

/* --- Checkboxen ---------------------------------------------------------------------------- */
html body:not(.is-checkout) #content form .custom-control-label { font-size: 15px; line-height: 1.4; padding-left: 4px; }
html body:not(.is-checkout) #content form .custom-control-input:checked ~ .custom-control-label::before { background: var(--brand-primary, #116bb0) !important; border-color: var(--brand-primary, #116bb0) !important; }
html body:not(.is-checkout) #content form .custom-control-label::before { border: 1.5px solid var(--rh-in-line) !important; border-radius: 6px !important; width: 20px; height: 20px; top: 1px; box-shadow: none !important; }
html body:not(.is-checkout) #content form .custom-control-label::after { width: 20px; height: 20px; top: 1px; }
html body:not(.is-checkout) #content form .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px var(--rh-in-ring) !important; }

/* --- Buttons: weisser Text, klare Zustaende --------------------------------------------------- */
html body:not(.is-checkout) #content form .btn-primary, html body #jtl-nav-wrapper .account-icon-dropdown .btn-primary, html body #jtl-nav-wrapper .account-icon-dropdown #submit-btn {
  color: #fff !important; background: var(--brand-primary, #116bb0) !important; border: 0 !important; height: 48px !important; padding: 0 20px !important; border-radius: 10px !important;
  font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0 !important; box-shadow: none !important; transition: background-color .15s ease, transform .1s ease !important;
}
html body:not(.is-checkout) #content form .btn-primary:hover, html body #jtl-nav-wrapper .account-icon-dropdown #submit-btn:hover { background: var(--blue-700, #0e548b) !important; color: #fff !important; }
html body:not(.is-checkout) #content form .btn-primary:active, html body #jtl-nav-wrapper .account-icon-dropdown #submit-btn:active { background: var(--blue-900, #072a46) !important; transform: translateY(1px); }
html body:not(.is-checkout) #content form .btn-primary:focus-visible, html body #jtl-nav-wrapper .account-icon-dropdown #submit-btn:focus-visible { outline: 0 !important; box-shadow: 0 0 0 3px var(--rh-in-ring), 0 0 0 1px var(--brand-primary, #116bb0) !important; }
html body:not(.is-checkout) #content form .btn-primary:disabled { background: #b9c6d6 !important; color: #fff !important; }
html body:not(.is-checkout) #content form .btn-outline-primary, html body:not(.is-checkout) #content form .btn-outline-secondary, html body:not(.is-checkout) #content form .btn-secondary {
  height: 48px !important; padding: 0 18px !important; border-radius: 10px !important; border: 1px solid var(--rh-in-line) !important; background: #fff !important; color: var(--blue-900, #072a46) !important; font-weight: 700 !important; box-shadow: none !important;
}
html body:not(.is-checkout) #content form .btn-outline-primary:hover, html body:not(.is-checkout) #content form .btn-outline-secondary:hover, html body:not(.is-checkout) #content form .btn-secondary:hover { border-color: var(--brand-primary, #116bb0) !important; background: var(--blue-50, #f2f8fd) !important; color: var(--blue-900, #072a46) !important; }
/* Konto-Panel: Feld-Abstand, Label-Rest aus Modul 45 aufheben */
html body #jtl-nav-wrapper .account-icon-dropdown .form-group { margin-bottom: 10px !important; }
html body #jtl-nav-wrapper .account-icon-dropdown .dropdown-body > a { font-weight: 600; }

/* Nachtrag: Abschnitte enger, Trennlinien dezent, Registrierung einspaltig (Stripe-Breite) */
html body:not(.is-checkout) #content form h2.h3, html body:not(.is-checkout) #content form legend, html body:not(.is-checkout) #content form .h3 { margin: 4px 0 8px !important; }
html body:not(.is-checkout) #content form .col-12 > hr, html body:not(.is-checkout) #content form hr { margin: 14px 0 6px !important; border-top: 1px solid #e8edf3 !important; }
html body:not(.is-checkout) #content form .row > .col-md-4, html body:not(.is-checkout) #content form .row > .col-md-8, html body:not(.is-checkout) #content form .row > .offset-4 { flex: 0 0 100% !important; max-width: 100% !important; margin-left: 0 !important; }
html body:not(.is-checkout) #content form .checkout-button-row { margin-top: 12px !important; padding-top: 14px !important; border-top: 1px solid #e8edf3 !important; }
html body:not(.is-checkout) #content form .checkout-button-row-submit { flex: 0 0 100% !important; max-width: 100% !important; }
@media (min-width: 992px) {
  html body:not(.is-checkout) #content form.register-form, html body:not(.is-checkout) #content form.label-slide { max-width: 680px; }
  html body:not(.is-checkout) #content form .checkout-button-row-submit .btn { max-width: 320px; }
}
/* Nachtrag 2: alle Zeilen ohne Bootstrap-Randversatz, Einzelfelder volle Breite, Checkbox-Text umbrechen */
html body:not(.is-checkout) #content form .form-row { margin-left: 0 !important; margin-right: 0 !important; }
html body:not(.is-checkout) #content form .form-row > [class*="col"] { padding-left: 0 !important; padding-right: 0 !important; }
html body:not(.is-checkout) #content form .form-row:not(.rh-row) > [class*="col"] { flex: 0 0 100% !important; max-width: 100% !important; }
html body:not(.is-checkout) #content form .row > [class*="col"] > .form-row:first-child { margin-top: 0 !important; }
html body:not(.is-checkout) #content form .custom-control-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
html body:not(.is-checkout) #content form .form-text, html body:not(.is-checkout) #content form small.form-text { font-size: 13px !important; color: #6b7683 !important; margin: -4px 0 10px !important; }
/* ============================================================================
   §RH-23 FOOTER UEBERALL (rothler, 10.09.2026, Enes): der Startseiten-Footer (rt_footer / footer-v2.css) gilt auf
   allen Seiten (rh_footer.tpl). Die mobilen Feinregeln aus home-mobile-v1.css waren auf data-page 18 begrenzt und
   stehen hier fuer alle Seiten; dazu die Bewertungszeile unter den Oeffnungszeiten.
   ========================================================================= */
@media (max-width: 767px) {
  html body #footer.rt-footer .rt-footer__in { width:calc(100% - 40px); }
  html body #footer.rt-footer .rt-footer__main { gap:26px; padding-block:28px; }
  html body #footer.rt-footer .rt-footer__brand { grid-template-columns:minmax(0,1fr); gap:0; }
  html body #footer.rt-footer .rt-footer__brand > * { grid-column:1; grid-row:auto; }
  html body #footer.rt-footer .rt-footer__logo img { width:142px; }
  html body #footer.rt-footer .rt-footer__tag { margin:12px 0 16px; font-size:13px; }
  html body #footer.rt-footer .rt-footer__phone { font-size:23px; min-height:36px; }
  html body #footer.rt-footer .rt-footer__hours { font-size:12px; margin-bottom:4px; }
  html body #footer.rt-footer .rt-footer__contact-link { font-size:13px; min-height:44px; }
  html body #footer.rt-footer .rt-footer__address { font-size:12px; margin-top:10px; }
  html body #footer.rt-footer .rt-footer__nav { gap:28px 20px; }
  html body #footer.rt-footer .rt-footer__group h2 { font-size:14px !important; margin-bottom:10px; }
  html body #footer.rt-footer .rt-footer__links { gap:0; }
  html body #footer.rt-footer .rt-footer__links a { font-size:13px; padding-block:7px; min-height:32px; }
  html body #footer.rt-footer .rt-footer__pay-in { gap:22px; padding-block:22px; }
  html body #footer.rt-footer .rt-footer__paygroups { width:100%; gap:22px; }
  html body #footer.rt-footer .rt-footer__pay-lbl { font-size:11px; }
  html body #footer.rt-footer .rt-footer__social a { width:40px; height:40px; font-size:16px; }
  html body #footer.rt-footer .rt-footer__legal-nav { gap:0 18px; }
  html body #footer.rt-footer .rt-footer__legal-nav a { padding-block:8px; font-size:11px; }
  html body #footer.rt-footer .rt-footer__widerruf { min-height:44px; font-size:12px; }
  html body #footer.rt-footer .rt-footer__copy { font-size:11px; }
  html body #footer.rt-footer .rt-footer__vat { font-size:10px; line-height:1.7; }
}
html body #footer.rt-footer .rh-ft-rating { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 2px 0 12px; font-size: 13px; color: var(--ft-muted, #5b6672); }
html body #footer.rt-footer .rh-ft-rating__stars { display: inline-flex; gap: 1px; color: #f5a623; line-height: 0; }
html body #footer.rt-footer .rh-ft-rating__stars svg { width: 15px; height: 15px; }
html body #footer.rt-footer .rh-ft-rating b { font-family: var(--font-display, inherit); font-weight: 800; font-size: 14px; color: var(--ft-ink, #0a1628); }
@media (min-width: 768px) { html body #footer.rt-footer .rt-footer__brand .rh-ft-rating { grid-column: 1 / -1; } }
/* Nachtrag: Typografie-Modul 42 (footer a 15 px) und Link-Unterstreichung der Unterseiten neutralisieren */
html body #footer.rt-footer a { text-decoration: none !important; }
html body #footer.rt-footer a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
html body #footer.rt-footer .rt-footer__phone { font-size: 19px !important; font-weight: 700 !important; font-family: var(--font-display, inherit) !important; }
html body #footer.rt-footer .rt-footer__contact-link { font-weight: 700 !important; }
@media (max-width: 767px) { html body #footer.rt-footer .rt-footer__phone { font-size: 22px !important; } }
/* ============================================================================
   §RH-24 B2B-LANDINGPAGE (rothler, 10.09.2026, Enes) — custom/pages/rh_b2b.tpl
   Ziel: Registrierung als Gewerbekunde oder Anruf beim Vertrieb. Ruhig, minimal, vertrauensbildend:
   weisser Grund, ein Blau, Manrope-Ueberschriften, Bilder aus custom/brand/b2b (kie.ai).
   Signatur: die 24-Stunden-Zusage (Uhr) zieht sich durch Hero, Karten, Schritte und Abschluss.
   ========================================================================= */
.rb2b { --rb-ink: #0a1628; --rb-muted: #4b5765; --rb-line: #e3e9f0; --rb-soft: #f4f7fb; --rb-blue: var(--brand-primary, #116bb0); --rb-deep: #0a3e66; --rb-night: #07203a; max-width: 1240px; margin: 0 auto; padding: 0 0 8px; color: var(--rb-ink); }
.rb2b .rb-ic { width: 26px; height: 26px; flex: 0 0 26px; color: var(--rb-blue); }
.rb2b .rb-star { width: 14px; height: 14px; color: #f5a623; }
.rb2b .rb-eyebrow { margin: 0 0 10px; font-family: var(--font-display, inherit); font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rb-blue); }
.rb2b .rb-h1 { margin: 0 0 16px; font-size: 32px !important; line-height: 1.08 !important; letter-spacing: -.025em; font-weight: 800 !important; }
.rb2b .rb-h2 { margin: 0 0 8px; font-size: 24px !important; line-height: 1.15 !important; letter-spacing: -.02em; font-weight: 800 !important; }
.rb2b h3 { margin: 0 0 6px; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.01em; line-height: 1.25 !important; }
.rb2b p { margin: 0; font-size: 15.5px !important; line-height: 1.55 !important; color: var(--rb-muted); }
.rb2b .rb-lead { font-size: 17px !important; color: var(--rb-ink); margin-bottom: 22px; max-width: 46ch; }
.rb2b .rb-sub { margin: 0 0 20px; max-width: 60ch; }
.rb2b .rb-sec { padding: 40px 0 0; }

/* --- Buttons --------------------------------------------------------------- */
.rb2b .rb-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.rb2b .rb-cta--center { justify-content: center; margin-top: 24px; }
.rb2b .rb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: 12px; font-family: var(--font-display, inherit); font-size: 16px; font-weight: 700; text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease, transform .1s ease; }
.rb2b .rb-btn__ic { width: 18px; height: 18px; flex: 0 0 18px; color: currentColor; }
.rb2b .rb-btn--primary { background: var(--rb-blue); color: #fff !important; }
.rb2b .rb-btn--primary:hover { background: var(--brand-primary-dark, #0e548b); }
.rb2b .rb-btn--primary:active { transform: translateY(1px); }
.rb2b .rb-btn--ghost { background: #fff; color: var(--rb-ink) !important; border: 1px solid #cfd8e3; }
.rb2b .rb-btn--ghost:hover { border-color: var(--rb-blue); background: var(--rb-soft); }
.rb2b .rb-btn--light { background: #fff; color: var(--rb-deep) !important; }
.rb2b .rb-btn--light:hover { background: #e9f2fb; }
.rb2b .rb-btn--ghost-light { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.4); }
.rb2b .rb-btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.rb2b .rb-btn:focus-visible { outline: 3px solid rgba(17,107,176,.35); outline-offset: 2px; }

/* --- Hero ------------------------------------------------------------------- */
.rb2b .rb-hero { display: grid; gap: 22px; padding-top: 6px; }
.rb2b .rb-hero__media { margin: 0; border-radius: 16px; overflow: hidden; background: var(--rb-soft); }
.rb2b .rb-hero__media img { display: block; width: 100%; height: auto; }
.rb2b .rb-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.rb2b .rb-facts li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--rb-muted); }
.rb2b .rb-facts .rb-ic { width: 22px; height: 22px; flex-basis: 22px; }
.rb2b .rb-facts b { color: var(--rb-ink); font-weight: 700; }
.rb2b .rb-stars { display: inline-flex; gap: 1px; flex: 0 0 auto; width: 22px; justify-content: center; }
.rb2b .rb-stars .rb-star { width: 20px; height: 20px; }

/* --- Zusagen ------------------------------------------------------------------ */
.rb2b .rb-grid { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.rb2b .rb-card { padding: 20px 18px; border: 1px solid var(--rb-line); border-radius: 14px; background: #fff; }
.rb2b .rb-card .rb-ic { margin-bottom: 12px; }
.rb2b .rb-card--accent { background: var(--rb-soft); border-color: #d6e6f5; }

/* --- Schritte ------------------------------------------------------------------- */
.rb2b .rb-steps__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: none; }
.rb2b .rb-steps__list li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px; background: var(--rb-soft); }
.rb2b .rb-steps__n { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: var(--rb-blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px; }

/* --- Segmente --------------------------------------------------------------------- */
.rb2b .rb-seg__grid { display: grid; gap: 14px; }
.rb2b .rb-seg__card { border: 1px solid var(--rb-line); border-radius: 16px; overflow: hidden; background: #fff; }
.rb2b .rb-seg__card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rb2b .rb-seg__body { padding: 18px 18px 20px; }
.rb2b .rb-seg__body ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.rb2b .rb-seg__body li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--rb-ink); line-height: 1.4; }
.rb2b .rb-seg__body li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--rb-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* --- Kontakt ----------------------------------------------------------------------- */
.rb2b .rb-contact__card { display: grid; gap: 22px; padding: 24px 20px; border-radius: 18px; background: var(--rb-soft); border: 1px solid #d6e6f5; }
.rb2b .rb-contact__tel { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 8px; font-family: var(--font-display, inherit); font-size: 26px; font-weight: 800; color: var(--rb-ink) !important; text-decoration: none !important; letter-spacing: -.01em; }
.rb2b .rb-contact__tel .rb-ic { width: 28px; height: 28px; flex-basis: 28px; }
.rb2b .rb-contact__meta { font-size: 14px !important; }
.rb2b .rb-contact__meta a { color: var(--rb-blue); font-weight: 600; }
.rb2b .rb-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; align-content: center; }
.rb2b .rb-contact__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--rb-ink); }
.rb2b .rb-contact__list .rb-ic { width: 22px; height: 22px; flex-basis: 22px; margin-top: 1px; }

/* --- FAQ ----------------------------------------------------------------------------- */
.rb2b .rb-faq__list { margin-top: 14px; border-top: 1px solid var(--rb-line); }
.rb2b details { border-bottom: 1px solid var(--rb-line); }
.rb2b summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; position: relative; font-family: var(--font-display, inherit); font-weight: 700; font-size: 16px; color: var(--rb-ink); }
.rb2b summary::-webkit-details-marker { display: none; }
.rb2b summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--rb-blue); border-bottom: 2px solid var(--rb-blue); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.rb2b details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.rb2b details p { padding: 0 0 16px; max-width: 70ch; }
.rb2b summary:focus-visible { outline: 3px solid rgba(17,107,176,.35); outline-offset: -3px; border-radius: 6px; }

/* --- Abschluss --------------------------------------------------------------------------- */
.rb2b .rb-final { margin: 44px -16px 0; padding: 36px 20px 30px; background: var(--rb-night); color: #fff; text-align: center; }
.rb2b .rb-final .rb-h2 { color: #fff; max-width: 22ch; margin: 0 auto; }
.rb2b .rb-final__more { margin: 22px 0 0; font-size: 13px !important; color: rgba(255,255,255,.7); }
.rb2b .rb-final__more a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* --- Tablet / Desktop ------------------------------------------------------------------------ */
@media (min-width: 640px) {
  .rb2b .rb-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .rb2b .rb-seg__grid { grid-template-columns: repeat(2, 1fr); }
  .rb2b .rb-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 22px; }
}
@media (min-width: 992px) {
  .rb2b .rb-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 40px; padding-top: 18px; }
  .rb2b .rb-h1 { font-size: 46px !important; }
  .rb2b .rb-h2 { font-size: 30px !important; }
  .rb2b .rb-sec { padding-top: 64px; }
  .rb2b .rb-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .rb2b .rb-steps__list { grid-template-columns: repeat(3, 1fr); }
  .rb2b .rb-steps__list li { flex-direction: column; gap: 12px; padding: 22px; }
  .rb2b .rb-seg__grid { grid-template-columns: repeat(4, 1fr); }
  .rb2b .rb-contact__card { grid-template-columns: 1.1fr 1fr; padding: 36px; gap: 40px; }
  .rb2b .rb-final { margin: 72px 0 0; padding: 56px 40px 44px; border-radius: 22px; }
  .rb2b .rb-final .rb-h2 { max-width: 28ch; }
}
@media (prefers-reduced-motion: reduce) { .rb2b .rb-btn, .rb2b summary::after { transition: none; } }
/* Nachtrag: alter OPC-Seiteninhalt (Geschwister-Div hinter #rb2b-page) bleibt im CMS, wird hier aber nicht gezeigt;
   Abschlussband weiss gegen Typografie-Modul; Hero mobil auf 4:3 beschnitten (Fotomotiv, kein Produktbild) */
/* (OPC-Inhalt der Seite am 10.09.2026 in der Test-DB geleert, Sicherung rothler-claude/backup-opc-b2b-kPage56-20260910.txt) */
html body .rb2b .rb-final .rb-h2, html body .rb2b .rb-final p { color: #fff !important; }
html body .rb2b .rb-final .rb-final__more { color: rgba(255,255,255,.72) !important; }
@media (max-width: 767px) { .rb2b .rb-hero__media img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 35%; } }
@media (max-width: 991.98px) { html body #content > #rb2b-page { margin-top: 4px; } }
html body .rb2b .rb-seg__card img { aspect-ratio: auto !important; height: 200px !important; width: 100% !important; object-fit: cover !important; object-position: center !important; }
@media (min-width: 992px) { html body .rb2b .rb-seg__card img { height: 190px !important; } }
/* ============================================================================
   §RH-25 KNOPF ZUM KONFIGURATOR AUF DER PRODUKTSEITE (rothler, 10.09.2026, Enes)
   Transparent unter dem Warenkorb-Knopf, damit er den Kauf nicht überstrahlt, aber sichtbar bleibt.
   Nimmt Farbe und Baugröße als Parameter mit (js/rh-pdp-konfigurator.js).
   ========================================================================= */
html body .rh-pdp-konf {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 10px 0 0; padding: 11px 16px; width: 100%;
  border: 1.5px solid var(--blue-100, #d6e6f5); border-radius: 12px; background: transparent;
  text-decoration: none !important; text-align: center; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
html body .rh-pdp-konf:hover { border-color: var(--brand-primary, #116bb0); background: var(--blue-50, #f2f8fd); }
html body .rh-pdp-konf:focus-visible { outline: 3px solid rgba(17,107,176,.35); outline-offset: 2px; }
html body .rh-pdp-konf__t {
  font-family: var(--font-display, inherit); font-weight: 700; font-size: 15.5px;
  color: var(--brand-primary, #116bb0); display: inline-flex; align-items: center; gap: 7px;
}
html body .rh-pdp-konf__t::after {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .rh-pdp-konf__s { font-size: 12.5px; color: var(--color-text-muted, #525252); line-height: 1.3; }
@media (min-width: 992px) { html body .rh-pdp-konf { max-width: 420px; } }
/* Der frühere Konfigurator-Banner direkt unter dem Warenkorb-Knopf entfällt, seit dort der schlanke
   Knopf steht. Der Banner unter der Galerie (Desktop) bleibt. */
html body[data-page="1"] .rh-berater-pdp--atc { display: none !important; }
/* ==========================================================================
   50 — Produktseite v3 (12.09.2026)
   Mockup 3 abgenommen: Farbpunkte auf dem Bild, Baugroessenliste mit Ankunfts-
   datum, "Betrieb & Zubehoer" ueber dem Warenkorb, dahinter der Ablauf aus
   Konfigurator v2. Verhalten: js/rh-pdp-v3.js · Plan: PLAN-PDP-V3-RH.md
   Spezifitaet: NOVA stylt die Variationspills mit .dh-pdp-radio-pill, deshalb
   stehen die Regeln hier mit body-Prefix bzw. doppelter Klasse.
   ========================================================================== */

/* ---------- 1. Baugroesse: eine Zeile je Groesse ----------
   Die Module 24/26/37 setzen die Pillen mit !important (min-height, padding,
   Rahmen, Aktiv-Farbe). Deshalb stehen die Regeln hier mit #product-offer und
   !important — sonst bleibt die alte Kachel stehen. */
body #product-offer .dh-pdp-radio-options.rh3-grliste {
  display: block !important;
  border: 1px solid #e3e9f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  gap: 0 !important;
}
body #product-offer .dh-pdp-radio-options.rh3-grliste .dh-pdp-radio-option {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:not(:checked) + .dh-pdp-radio-pill.rh3-gr:not(.is-active):not(.is-limited):not(.is-stockout),
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr,
body #product-offer .dh-pdp-radio-pill.rh3-gr {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: center;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--color-text, #0a1628) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
  text-align: left;
  transition: background-color .18s;
}
body #product-offer .dh-pdp-radio-options.rh3-grliste .dh-pdp-radio-option:last-child .rh3-gr { border-bottom: 0 !important; }
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr:hover,
body #product-offer .dh-pdp-radio-pill.rh3-gr:hover { background: #f8fbfe !important; border-color: #eef2f6 !important; color: var(--color-text, #0a1628) !important; }
body #product-offer .dh-pdp-radio-pill.rh3-gr .rh3-gr__rad {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c3ced9;
  background: #fff;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill.rh3-gr:not(.is-limited):not(.is-stockout),
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr.is-active:not(.is-limited):not(.is-stockout),
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-input:checked + .dh-pdp-radio-pill.rh3-gr,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr.is-active,
body #product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill.rh3-gr,
body #product-offer .dh-pdp-radio-pill.rh3-gr.is-active {
  background: rgba(var(--brand-primary-rgb), .06) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary) !important;
  color: var(--color-text, #0a1628) !important;
  border-color: #eef2f6 !important;
}
body #product-offer .dh-pdp-radio-input:checked + .dh-pdp-radio-pill.rh3-gr .rh3-gr__rad,
body #product-offer .dh-pdp-radio-pill.rh3-gr.is-active .rh3-gr__rad {
  border-color: var(--brand-primary) !important;
  background: var(--brand-primary) !important;
  box-shadow: inset 0 0 0 3.5px #fff !important;
}
body #product-offer .rh3-gr .rh3-gr__mid { min-width: 0; }
body #product-offer .rh3-gr .rh3-gr__mid b {
  display: block;
  font: 800 15px/1.25 var(--brand-font-display, inherit) !important;
  letter-spacing: -.01em;
  color: var(--color-text, #0a1628) !important;
}
body #product-offer .rh3-gr .rh3-gr__meta {
  display: block;
  margin-top: 2px;
  color: #5f6b77;
  font-size: 12px;
  line-height: 1.3;
}
body #product-offer .rh3-gr .rh3-gr__pr {
  text-align: right;
  white-space: nowrap;
  font: 800 15px/1.2 var(--brand-font-display, inherit);
  font-variant-numeric: tabular-nums;
}
body #product-offer .rh3-gr .rh3-gr__lz {
  display: block;
  margin-top: 2px;
  font: 600 11.5px/1.2 inherit;
  white-space: nowrap;
  color: var(--brand-success, #1c871e);
}
body #product-offer .rh3-gr .rh3-gr__lz.is-spaet { color: #8a6d1b; }
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr.is-limited,
body #product-offer .dh-pdp-buybox__section--variants .dh-pdp-radio-pill.rh3-gr.is-stockout,
body #product-offer .dh-pdp-radio-pill.rh3-gr--weg {
  display: grid !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #eef2f6 !important;
  border-radius: 0 !important;
  padding: 11px 12px !important;
  opacity: .55;
}
body #product-offer .dh-pdp-radio-pill.rh3-gr--weg .rh3-gr__mid b { text-decoration: line-through; }

/* ---------- 2. Farbe: Punkte auf dem Bild, Name als Zeile ---------- */
body .product-images.rh3-bildrahmen { position: relative; }
body .rh3-punkte {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 9px;
}
body .rh3-punkt {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .16), 0 1px 4px rgba(0, 0, 0, .2);
  transition: box-shadow .2s, transform .2s;
}
body .rh3-punkt:hover { transform: translateY(-1px); }
body .rh3-punkt.is-on { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px var(--brand-primary); }
body .rh3-punkt.is-weg { opacity: .4; }
body .rh3-punkt--weiss,
body .rh3-farbzeile__mini.rh3-punkt--weiss { background: radial-gradient(circle at 32% 26%, #fff 0 16%, #f7f7f4 32%, #e6e6e1 72%, #d2d2cc 100%); }
body .rh3-punkt--anthrazit,
body .rh3-farbzeile__mini.rh3-punkt--anthrazit { background: radial-gradient(circle at 32% 26%, #767c82 0 10%, #4a4f55 46%, #383c41 100%); }
body .rh3-punkt--schwarz,
body .rh3-farbzeile__mini.rh3-punkt--schwarz { background: radial-gradient(circle at 32% 26%, #707070 0 11%, #1e1e1e 46%, #0b0b0b 100%); }
/* Mobile Reihenfolge (Modul 28 setzt sie mit order und !important):
   dort stand Titel und Preis VOR dem Bild. Abgenommen ist: erst das Bild, dann
   Bewertungen, dann der Titel, darunter Farbzeile und Chips, dann der Preis.
   Deshalb werden hier genau diese order-Werte neu gesetzt -- gleiche Selektoren
   wie in Modul 28, das hier laedt spaeter. */
@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer > .col.product-gallery > #image_wrapper { order: 1 !important; margin: 0 0 8px !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__meta-row { order: 2 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__sku,
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-buybox__sku { order: 3 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > h1.dh-pdp-buybox__title { order: 3 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh3-farbzeile { order: 4 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh3-chips { order: 4 !important; }
  body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__price-under-title { order: 5 !important; }
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-buybox__mobile-logistics,
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .dh-pdp-inline-logistics { order: 6 !important; }
  body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > .product-offer.dh-pdp-buybox__offer { order: 7 !important; }
}
/* Desktop: die Buybox ist kein order-Container, hier reicht die Reihenfolge im DOM */
body .rh3-farbzeile,
body .rh3-chips { order: 4; }
body .rh3-farbzeile {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  color: #5f6b77;
  font-size: 13px;
}
body .rh3-farbzeile b { color: #0a1a2b; font-weight: 700; }
body .rh3-farbzeile__mini {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #c9d4de;
}
/* Die Wawi-Farbkacheln sind durch die Punkte auf dem Bild ersetzt. Sie bleiben im
   DOM (Tastatur, Screenreader, JTL-AJAX), werden aber nicht mehr doppelt gezeigt.
   Modul 26 setzt display mit !important, deshalb hier auch. */
body #product-offer .variation-wrapper.rh3-farbe-quelle .dh-pdp-radio-options {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
body #product-offer .variation-wrapper.rh3-farbe-quelle dt { display: none !important; }
body #product-offer .variation-wrapper.rh3-farbe-quelle { margin: 0 !important; padding: 0 !important; }
/* Dritte Wawi-Variation: stillgelegt, bis sie in der Wawi entfernt ist */
body #product-offer .variation-wrapper.rh3-weg,
body .variation-wrapper.rh3-weg { display: none !important; }

/* ---------- 3. Merkmal-Chips (Drehbarkeit & Co.) ---------- */
body .rh3-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}
body .rh3-chips { justify-content: flex-start; }
body #product-offer .rh3-chips button,
body .rh3-chips button {
  width: auto !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
  border: 0;
  border-radius: 7px;
  padding: 5px 9px;
  text-align: left;
  background: rgba(var(--brand-primary-rgb), .09);
  color: var(--brand-primary-dark, #0e548b);
  font: 700 12px/1.2 inherit;
  cursor: pointer;
}
body .rh3-chips button:hover { background: rgba(var(--brand-primary-rgb), .16); }

/* ---------- 4. Betrieb & Zubehoer: Knopf ueber dem Warenkorb ---------- */
body button.rh3-zub {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 11px 13px;
  border: 1.5px solid #c9d8e6;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
body button.rh3-zub.is-lockt {
  border-color: rgba(var(--brand-primary-rgb), .55);
  background: rgba(var(--brand-primary-rgb), .05);
}
body button.rh3-zub .rh3-zub__ico { display: flex; flex: 0 0 auto; }
body button.rh3-zub .rh3-zub__ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  margin-left: -7px;
  border: 1px solid #e3e9f0;
  border-radius: 4px;
  background: #fff;
}
body button.rh3-zub .rh3-zub__ico img:first-child { margin-left: 0; }
body button.rh3-zub,
body button.rh3-zub .rh3-zub__txt { text-align: left !important; }
body button.rh3-zub .rh3-zub__txt { flex: 1; min-width: 0; }
body button.rh3-zub .rh3-zub__txt b { display: block; font: 800 14px/1.25 inherit; }
body button.rh3-zub .rh3-zub__txt small {
  display: block;
  overflow: hidden;
  color: #5f6b77;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body button.rh3-zub .rh3-zub__proof {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(var(--brand-primary-rgb), .1);
  color: var(--brand-primary-dark, #0e548b);
  font: 800 11px/1.3 inherit;
}
body button.rh3-zub .rh3-zub__proof.is-ok { background: #e8f6ec; color: #15662c; }
body button.rh3-zub .rh3-zub__pf {
  margin-left: auto;
  color: var(--brand-primary);
  font: 800 20px/1 inherit;
}

/* ---------- 5. Kundenfotos dieses Modells ---------- */
body .rh3-kf {
  margin: 12px 0 0;
  padding: 10px 11px;
  border: 1px solid #e9eef3;
  border-radius: 11px;
  background: #fff;
}
body .rh3-kf__h {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5f6b77;
  font-size: 12px;
  white-space: nowrap;
}
body .rh3-kf__stars { color: #f5a524; letter-spacing: .5px; }
body .rh3-kf__h b { color: #0a1a2b; font: 800 13px/1.2 inherit; }
body .rh3-kf__h em { margin-left: auto; color: var(--brand-primary); font: 700 12px/1.2 inherit; font-style: normal; }
body .rh3-kf__s { display: flex; gap: 7px; margin-top: 9px; }
body .rh3-kf__s button {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  overflow: hidden;
  background: #f2f5f8;
  cursor: pointer;
  transition: transform .18s;
}
body .rh3-kf__s button:hover { transform: translateY(-2px); }
body .rh3-kf__s img { display: block; width: 100%; height: 100%; object-fit: cover; }
body .rh3-kf__ov {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(7, 42, 70, .56);
  color: #fff;
  font: 800 14px/1 inherit;
}

/* ---------- 6. Fragen ---------- */
body .rh3-faq { margin: 12px 0 0; }
body .rh3-faq__h { margin: 0 0 4px; font: 800 15px/1.3 inherit; }
body .rh3-fq { border-top: 1px solid #eef2f6; }
body .rh3-fq:first-of-type { border-top: 0; }
body .rh3-fq__b {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  background: none;
  font: 700 13.5px/1.35 inherit;
  text-align: left;
  cursor: pointer;
}
body .rh3-fq__b i { margin-left: auto; color: var(--brand-primary); font-size: 16px; font-style: normal; transition: transform .2s; }
body .rh3-fq.is-offen .rh3-fq__b i { transform: rotate(45deg); }
body .rh3-fq__a { height: 0; overflow: hidden; transition: height .24s cubic-bezier(.2, .8, .2, 1); }
body .rh3-fq__a > div { padding: 0 0 10px; }
body .rh3-fq__a p { margin: 0; color: #3d4956; font-size: 13px; line-height: 1.5; }
body .rh3-fq__a p + p { margin-top: 4px; color: #5f6b77; }
body .rh3-dreh { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
body .rh3-dreh figure { flex: 1; margin: 0; }
body .rh3-dreh svg { width: 100%; height: auto; border-radius: 8px; background: #f6f9fc; }
body .rh3-dreh figcaption { margin-top: 4px; color: #5f6b77; font-size: 11px; line-height: 1.3; }
body .rh3-dreh__pf { color: var(--brand-primary); font: 800 18px/1 inherit; }

/* ---------- 7. Konfigurationsseite ---------- */
html.rh3-offen, html.rh3-offen body { overflow: hidden; }
body .rh3-sheet {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: #f5f8fb;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  visibility: hidden;
}
body .rh3-sheet.is-offen { transform: none; visibility: visible; }
body .rh3-sheet__kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid #e3e9f0;
  background: #fff;
}
body .rh3-sheet__kopf b { font: 800 17px/1.2 inherit; }
body .rh3-sheet__wahl {
  padding: 4px 9px;
  border-radius: 7px;
  background: rgba(var(--brand-primary-rgb), .08);
  color: #3d4956;
  font: 700 12px/1.3 inherit;
}
body .rh3-sheet__x {
  margin-left: auto;
  border: 0;
  background: none;
  font: 800 20px/1 inherit;
  cursor: pointer;
}
body .rh3-sheet__in {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 13px 15px 16px;
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}
body .rh3-kk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  background: #fff;
}
body .rh3-kk__img { flex: 0 0 auto; width: 54px; height: 54px; border: 1px solid #eef2f6; border-radius: 9px; overflow: hidden; background: #f7fafd; }
body .rh3-kk__img img { width: 100%; height: 100%; object-fit: contain; }
body .rh3-kk__t { flex: 1; min-width: 0; }
body .rh3-kk__t b { display: block; font: 800 13.5px/1.3 inherit; }
body .rh3-kk__t small { display: block; color: #5f6b77; font-size: 11.5px; }
body .rh3-kk__p { white-space: nowrap; font: 800 15px/1.2 inherit; font-variant-numeric: tabular-nums; }
body .rh3-grp {
  padding: 12px;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  background: #fff;
}
body .rh3-grp__h { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
body .rh3-grp__n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font: 800 12px/22px inherit;
  text-align: center;
}
body .rh3-grp__t b { display: block; font: 800 14.5px/1.25 inherit; }
body .rh3-grp__t small { display: block; color: #5f6b77; font-size: 12px; }
body .rh3-radio {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 1.5px solid #c3ced9;
  background: #fff;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}
body .rh3-bw__c.is-on .rh3-radio,
body .rh3-zb.is-on .rh3-radio,
body .rh3-ohne.is-on .rh3-radio {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 3.5px #fff;
}
body .rh3-bw { display: grid; gap: 8px; }
body .rh3-bw__c {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid #dbe4ee;
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
}
body .rh3-bw__c.is-on { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .05); }
body .rh3-bw__ic {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(var(--brand-primary-rgb), .09);
  color: var(--brand-primary);
}
body .rh3-bw__c.is-on .rh3-bw__ic { background: var(--brand-primary); color: #fff; }
body .rh3-bw__ic svg { width: 19px; height: 19px; }
body .rh3-bw__t { flex: 1; min-width: 0; }
body .rh3-bw__t b { display: block; font: 800 14px/1.25 inherit; }
body .rh3-bw__t small { display: block; color: #5f6b77; font-size: 12px; }
body .rh3-vn { margin-top: 9px; padding-top: 8px; border-top: 1px solid #eef2f6; }
body .rh3-vn summary { color: var(--brand-primary); font: 700 12.5px/1.3 inherit; cursor: pointer; }
body .rh3-vn ul { margin: 6px 0 0; padding-left: 18px; }
body .rh3-vn li { margin-bottom: 3px; color: #3d4956; font-size: 12.5px; }
body .rh3-pro li::marker { content: "✓  "; color: #15662c; font-weight: 700; }
body .rh3-con li::marker { content: "–  "; color: #8a6d1b; font-weight: 700; }
body .rh3-zbs { display: grid; gap: 8px; }
body .rh3-zb {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  padding: 9px;
  border: 1.5px solid #dbe4ee;
  border-radius: 11px;
  background: #fff;
}
body .rh3-zb.is-on { border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .05); }
body .rh3-zb__img {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid #e6ecf3;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
body .rh3-zb__img img { width: 100%; height: 100%; object-fit: contain; }
body .rh3-zb__img em {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 0 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-style: normal;
}
body .rh3-zb__mid { min-width: 0; }
body .rh3-zb__pick {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
body .rh3-zb__t { flex: 1; min-width: 0; }
body .rh3-zb__t b { display: block; font: 800 13.5px/1.3 inherit; }
body .rh3-zb__t small { display: block; color: #5f6b77; font-size: 12px; }
body .rh3-zb__bd {
  display: inline-block;
  margin-bottom: 3px;
  padding: 1px 5px;
  border-radius: 4px;
  background: #e8f6ec;
  color: #15662c;
  font: 800 10.5px/1.4 inherit;
}
body .rh3-zb__p { white-space: nowrap; font: 800 13.5px/1.2 inherit; font-variant-numeric: tabular-nums; }
body .rh3-zb__more {
  margin-top: 5px;
  border: 0;
  background: none;
  padding: 0;
  color: var(--brand-primary);
  font: 700 12px/1.3 inherit;
  text-decoration: underline;
  cursor: pointer;
}
body .rh3-ohne {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px dashed #c9d8e6;
  border-radius: 10px;
  background: none;
  color: #3d4956;
  font: 600 12.5px/1.35 inherit;
  text-align: left;
  cursor: pointer;
}
body .rh3-ohne.is-on { border-style: solid; border-color: var(--brand-primary); background: rgba(var(--brand-primary-rgb), .05); }
body p.rh3-hint {
  display: flex;
  gap: 8px;
  margin: 9px 0 0;
  padding: 9px 10px;
  border: 1px solid #f0d58f;
  border-radius: 10px;
  background: #fff5dc;
  color: #654700;
  font: 600 12px/1.45 inherit;
}
body p.rh3-hint.is-gut { border-color: #bfe3ca; background: #e8f6ec; color: #15662c; }
body .rh3-pos { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 12.5px; }
body .rh3-pos__l { font-weight: 700; }
body .rh3-pos__l i { display: block; color: #8b96a1; font-size: 11.5px; font-style: normal; font-weight: 400; }
body .rh3-pos__r { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
body .rh3-pos__sum {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #eef2f6;
  font: 800 16px/1.2 inherit;
}
body .rh3-sheet__fuss {
  display: grid;
  gap: 7px;
  padding: 11px 15px calc(13px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #e3e9f0;
  background: #fff;
}
body .rh3-sheet__ok {
  border: 0;
  border-radius: 11px;
  padding: 14px;
  background: var(--brand-primary);
  color: #fff;
  font: 800 16px/1.2 inherit;
  cursor: pointer;
}
body .rh3-sheet__ok:disabled { opacity: .45; cursor: default; }
body .rh3-sheet__weg {
  border: 0;
  background: none;
  color: #5f6b77;
  font: 600 13px/1.3 inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- 8. Detailfenster und Lightbox ---------- */
body .rh3-dm {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: rgba(7, 35, 56, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
body .rh3-dm.is-offen { opacity: 1; pointer-events: auto; }
body .rh3-dm__k {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88%;
  max-width: 640px;
  margin: 0 auto;
  overflow-y: auto;
  padding: 14px 15px calc(18px + env(safe-area-inset-bottom, 0px));
  border-radius: 16px 16px 0 0;
  background: #fff;
  transform: translateY(16px);
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
body .rh3-dm.is-offen .rh3-dm__k { transform: none; }
body .rh3-dm__k h3 { margin: 0 30px 9px 0; font: 800 16px/1.3 inherit; }
body .rh3-dm__x { position: absolute; right: 12px; top: 12px; border: 0; background: none; font: 800 19px/1 inherit; cursor: pointer; }
body .rh3-dm__img {
  position: relative;
  display: block;
  width: 100%;
  height: 210px;
  padding: 0;
  border: 1px solid #e6ecf3;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  cursor: zoom-in;
}
body .rh3-dm__img img { width: 100%; height: 100%; object-fit: contain; }
body .rh3-dm__img span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .94);
  color: var(--brand-primary);
  font: 700 12px/1.3 inherit;
}
body .rh3-dm__row { display: flex; align-items: center; gap: 10px; margin: 11px 0 8px; }
body .rh3-dm__row b { font: 800 19px/1.2 inherit; }
body .rh3-dm__row small { color: var(--brand-success, #1c871e); font: 700 12px/1.3 inherit; }
body .rh3-dm__kurz { color: #3d4956; font-size: 13px; line-height: 1.5; }
body .rh3-dm__kurz ul { margin: 0; padding-left: 18px; }
body .rh3-dm__acts { display: flex; gap: 8px; margin-top: 12px; }
body .rh3-dm__w {
  flex: 1;
  border: 0;
  border-radius: 11px;
  padding: 12px;
  background: var(--brand-primary);
  color: #fff;
  font: 800 14px/1.2 inherit;
  text-align: center;
  cursor: pointer;
}
body .rh3-dm__w.is-ist { background: #e8f6ec; color: #15662c; }
body .rh3-dm__s {
  border: 1.5px solid #c9d8e6;
  border-radius: 11px;
  padding: 12px 13px;
  color: #0a1a2b;
  font: 800 14px/1.2 inherit;
  text-align: center;
  text-decoration: none;
}
body .rh3-dm__sku { margin: 9px 0 0; color: #8b96a1; font: 700 11px/1.3 inherit; letter-spacing: .04em; }
body .rh3-lb {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: 52px 18px 92px;
  background: #0b1620;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
body .rh3-lb.is-offen { opacity: 1; pointer-events: auto; }
body .rh3-lb img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
body .rh3-lb__x { position: absolute; right: 16px; top: 16px; z-index: 2; border: 0; background: none; color: #fff; font: 800 21px/1 inherit; cursor: pointer; }
body .rh3-lb__tt {
  position: absolute;
  left: 16px;
  right: 54px;
  top: 19px;
  overflow: hidden;
  color: #cfe0ef;
  font: 700 12.5px/1.3 inherit;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body .rh3-lb__n {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font: 800 20px/1 inherit;
  transform: translateY(-50%);
  cursor: pointer;
}
body .rh3-lb__n.is-l { left: 10px; }
body .rh3-lb__n.is-r { right: 10px; }
body .rh3-lb__cap { position: absolute; left: 16px; right: 16px; bottom: 16px; color: #e7eef5; }
body .rh3-lb__s { color: #f5a524; font-size: 13px; letter-spacing: .5px; }
body .rh3-lb__cap b { font: 800 13px/1.3 inherit; }
body .rh3-lb__cap small { display: block; color: #9db0c2; font-size: 11.5px; }
body .rh3-lb__cap p { margin: 4px 0 0; max-height: 58px; overflow: hidden; color: #cfe0ef; font-size: 12.5px; line-height: 1.45; }

/* ---------- 9. Zeile in der festen Kaufleiste ---------- */
body .rh3-sticky-wahl { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
body .rh3-sticky-wahl > span {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(var(--brand-primary-rgb), .08);
  color: #3d4956;
  font: 700 11px/1.5 inherit;
}
body button.rh3-sticky-zub {
  padding: 2px 7px;
  border: 1px dashed var(--brand-primary);
  border-radius: 6px;
  background: #fff;
  color: var(--brand-primary);
  font: 700 11px/1.5 inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  body .rh3-sheet,
  body .rh3-dm__k,
  body .rh3-fq__a,
  body .rh3-kf__s button,
  body .rh3-punkt { transition: none; }
}

@media (min-width: 768px) {
  body .rh3-sheet__kopf { padding: 15px 20px; }
  body .rh3-sheet__in { padding: 18px 20px 22px; }
  body .rh3-sheet__fuss { padding: 14px 20px 18px; }
  body .rh3-sheet__fuss > * { max-width: 640px; width: 100%; margin: 0 auto; }
}

/* ==========================================================================
   10. Produktgalerie und Lightbox (12.09.2026)
   Befund mobil 390x844: der Bildrahmen war auf 230 px Hoehe festgenagelt
   (Modul 28), unsere Produktfotos sind aber 1:1 -> das Bild schrumpfte auf
   230x230 und links und rechts standen 52 px weisse Balken. Die Miniaturleiste
   lief als slick-Karussell mit angeschnittenen Nachbarn an beiden Raendern.
   Jetzt: quadratischer Rahmen (volle Breite), eigene Miniaturleiste mit
   Scroll-Snap, und die Lightbox traegt die Schale aus Konfigurator v2.
   ========================================================================== */

/* --- Bildrahmen 1:1, Bild nie beschnitten --- */
@media (max-width: 767.98px) {
  body[data-page="1"] #product-offer #gallery,
  body[data-page="1"] #product-offer #gallery .slick-list,
  body[data-page="1"] #product-offer #gallery .slick-track,
  body[data-page="1"] #product-offer #gallery .slick-slide,
  body[data-page="1"] #product-offer #gallery .square.square-image,
  body[data-page="1"] #product-offer #gallery .inner {
    height: auto !important;
    min-height: 0 !important;
  }
  body[data-page="1"] #product-offer #gallery .square.square-image,
  body[data-page="1"] #product-offer #gallery .inner {
    aspect-ratio: 1 / 1;
    width: 100% !important;
  }
  body[data-page="1"] #product-offer #gallery .inner > picture,
  body[data-page="1"] #product-offer #gallery .inner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  /* Die slick-Miniaturen schneiden am Rand an; unsere eigene Leiste ersetzt sie. */
  body[data-page="1"] #product-offer .product-thumbnails-wrapper { display: none !important; }
}
body #product-offer #gallery .square.square-image { cursor: zoom-in; }

/* --- eigene Miniaturleiste: eine Reihe, Scroll-Snap, nichts angeschnitten --- */
body .rh3-thumbs {
  display: flex;
  gap: 8px;
  margin: 8px 0 0;
  padding: 2px 0 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
body .rh3-thumbs::-webkit-scrollbar { display: none; }
body .rh3-thumbs button {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1.5px solid #e3e9f0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  scroll-snap-align: center;
  cursor: pointer;
  transition: border-color .18s, transform .18s;
}
body .rh3-thumbs button:hover { transform: translateY(-2px); }
body .rh3-thumbs button[aria-current="true"] {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(var(--brand-primary-rgb), .22);
}
body .rh3-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* --- Farbpunkte: auf dem Bild, aber auf eigenem Grund statt auf dem Produkt --- */
body .rh3-punkte {
  left: 10px;
  bottom: 10px;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px -4px rgba(4, 25, 42, .3);
}
body .rh3-punkt { width: 30px; height: 30px; }
body .rh3-punkt.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-primary); }

/* --- Lightbox: Schale aus Konfigurator v2 --- */
body .dh-lb {
  background: rgba(4, 17, 30, .92) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
}
body .dh-lb__top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px;
}
body .dh-lb .dh-lb__counter {
  position: static !important;
  flex: 0 0 auto;
  min-width: 62px;
  margin: 0 !important;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font: 700 13px/1.2 inherit;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
body .dh-lb__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, .94);
  font: 700 14px/1.3 inherit;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
body .dh-lb .dh-lb__close {
  position: static !important;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff;
}
body .dh-lb .dh-lb__close:hover { background: rgba(255, 255, 255, .24) !important; }
body .dh-lb .dh-lb__img {
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .75);
}
body .dh-lb .dh-lb__nav {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12) !important;
  color: #fff;
}
body .dh-lb .dh-lb__nav:hover { background: rgba(255, 255, 255, .24) !important; }
body .dh-lb .dh-lb__thumbs {
  gap: 8px;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  overflow-x: auto;
  scrollbar-width: none;
}
body .dh-lb .dh-lb__thumbs::-webkit-scrollbar { display: none; }
body .dh-lb .dh-lb__thumbs > :first-child { margin-left: auto; }
body .dh-lb .dh-lb__thumbs > :last-child { margin-right: auto; }
body .dh-lb .dh-lb__thumb {
  flex: 0 0 62px;
  width: 62px;
  height: 62px;
  border: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  opacity: .5;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
body .dh-lb .dh-lb__thumb img { width: 100%; height: 100%; object-fit: contain; }
body .dh-lb .dh-lb__thumb:hover { opacity: .8; }
body .dh-lb .dh-lb__thumb[aria-current="true"],
body .dh-lb .dh-lb__thumb.is-active {
  opacity: 1;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(255, 255, 255, .22);
}
/* Mobil fuehrt Wischen, die Pfeile wuerden nur das Bild verdecken (wie in v2) */
@media (max-width: 767.98px) {
  body .dh-lb .dh-lb__nav { display: none !important; }
  body .dh-lb .dh-lb__thumb { flex-basis: 52px; width: 52px; height: 52px; border-radius: 10px; }
  body .dh-lb__title { font-size: 12.5px; }
  body .dh-lb .dh-lb__img { border-radius: 12px; }
}

/* Lupe zurueck auf das Bild: sie ist absolut zum Galerie-Wrapper positioniert und
   landete nach dem Einsetzen der eigenen Miniaturleiste auf einer Kachel.
   Anker ist jetzt der quadratische Bildrahmen. */
body #product-offer #gallery_wrapper { position: relative; }
body[data-page="1"] #product-offer .dh-gallery-zoom {
  position: absolute !important;
  right: 10px !important;
  bottom: 10px !important;
  top: auto !important;
  left: auto !important;
  z-index: 4;
}
/* Nur eine Miniaturleiste: die slick-Variante bleibt ueberall aus. */
body #product-offer .product-thumbnails-wrapper { display: none !important; }
/* Ende der Leiste weich auslaufen, damit das Scrollen erkennbar ist */
body .rh3-thumbs {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent 100%);
}
body .rh3-thumbs.is-ende {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Lightbox ueber die feste Kaufleiste: deren Text schien unten durch die
   Miniaturleiste. Und seitliches Luft, damit das Bild die Kante nicht beruehrt. */
body .dh-lb { z-index: 3000 !important; }
body.dh-lb-offen .rt-pdp-mobile-cta,
body.dh-lb-offen .rh-berater-pdp--atc { display: none !important; }
@media (max-width: 767.98px) {
  body .dh-lb .dh-lb__stage { padding-left: 12px !important; padding-right: 12px !important; }
}

/* ==========================================================================
   11. Galerie-Feinschliff (12.09.2026)
   Der Knopf "Vergroessern" neben der Miniaturleiste sah aus wie angeklebt und
   sagte nur, was das Bild ohnehin tut. Er ist weg; die Tastaturbedienung haengt
   jetzt am Bildrahmen selbst (js/rh-pdp-v3.js setzt role und tabindex).
   ========================================================================== */
body #product-offer .dh-gallery-zoom { display: none !important; }
body #product-offer #gallery .square.square-image:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Gezoomt gehoert der Bildschirm dem Bild: Kopfzeile und Miniaturen treten ab. */
body .dh-lb__top,
body .dh-lb .dh-lb__foot {
  transition: opacity .22s ease, transform .22s ease;
}
body .dh-lb.is-zoomed .dh-lb__top {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
body .dh-lb.is-zoomed .dh-lb__foot {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}
body .dh-lb.is-zoomed .dh-lb__img { border-radius: 6px; cursor: zoom-out; }

/* Einmaliger Bedienhinweis, unten in der Buehne */
body .dh-lb__hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(7, 24, 40, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #eaf3fb;
  font: 600 11.5px/1.3 inherit;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
body .dh-lb__hint.is-an { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 420px) {
  body .dh-lb__hint { font-size: 10.5px; padding: 7px 11px; }
}

/* Etwas moderner: weicher Rahmen, ruhiger Schatten, GPU-Ebene */
body .dh-lb .dh-lb__img {
  border-radius: 18px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), 0 2px 10px -4px rgba(0, 0, 0, .5);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body .dh-lb .dh-lb__stage { overscroll-behavior: contain; }

@media (prefers-reduced-motion: reduce) {
  body .dh-lb__top,
  body .dh-lb .dh-lb__foot,
  body .dh-lb__hint { transition: none; }
}

/* 14.09.2026 — Helle, reduzierte PDP und optionale Auswahl in Einzelschritten.
   Alle Regeln bleiben auf dieser Produktseite bzw. ihren eigenen Dialogen. */
html.rh-pdp3 { color-scheme: light; --brand-primary: #116bb0; --brand-primary-dark: #0e548b; }
html.rh-pdp3 body, html.rh-pdp3 #main-wrapper, html.rh-pdp3 #content-wrapper { background: #fff; color: #18232f; }
html.rh-pdp3 #product-offer .dh-pdp-buybox { border: 0; border-radius: 0; box-shadow: none; background: #fff; }
html.rh-pdp3 #product-offer .dh-pdp-buybox__title { font-size: clamp(24px, 2.1vw, 32px); line-height: 1.2; letter-spacing: -.025em; font-weight: 650; }
html.rh-pdp3 #product-offer .dh-pdp-buybox__sku { font-size: 11px; color: #65717d; }
html.rh-pdp3 #product-offer .dh-pdp-buybox__head { border: 0; padding-bottom: 12px; }
html.rh-pdp3 #product-offer .rh-facts,
html.rh-pdp3 #product-offer .rh-berater-promo,
html.rh-pdp3 #product-offer .rh-berater-pdp,
html.rh-pdp3 #product-offer .rh3-chips,
html.rh-pdp3 #product-offer .dh-pdp-social-proof { display: none !important; }
html.rh-pdp3 #product-offer .dh-pdp-buybox__section { border: 0; }
html.rh-pdp3 #product-offer .dh-pdp-buybox__price-under-title { margin-top: 16px; }
html.rh-pdp3 #product-offer .price { color: #18232f !important; }
html.rh-pdp3 #product-offer .dh-kb { margin: 6px 0 16px !important; padding: 0 !important; border: 0; background: #fff; box-shadow: none; }
html.rh-pdp3 #product-offer .rh3-benefits summary { display: block; cursor: pointer; color: #525f6c; font-size: 13px; padding: 10px 0; }
html.rh-pdp3 #product-offer .rh3-benefits summary::after { content: '+'; margin-left: 8px; }
html.rh-pdp3 #product-offer .rh3-benefits[open] summary::after { content: '−'; }
html.rh-pdp3 #product-offer .rh3-benefits:not([open]) > :not(summary) { display: none !important; }
html.rh-pdp3 #product-offer .variation-wrapper dt { display: flex; align-items: center; gap: 8px; color: #18232f; font-size: 15px; font-weight: 650; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
html.rh-pdp3 #product-offer .variation-wrapper dt small { font-size: 12px; color: #65717d; font-weight: 400; margin-left: auto; }
body .rh3-stepno { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid #dce3e8; border-radius: 50%; font: 500 11px/1 system-ui; color: #525f6c; background: #fff; vertical-align: middle; }
body .rh3-punkte { align-items: center; flex-wrap: wrap; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 10px 14px; gap: 12px; border-radius: 14px; background: rgba(255,255,255,.97); border: 1px solid #e6ebef; box-shadow: 0 4px 20px #18232f0a; }
body .rh3-color-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #65717d; }
body .rh3-color-label b { color: #18232f; font-weight: 600; }
body .rh3-punkt { width: 36px; height: 36px; position: relative; }
body .rh3-punkt::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
body .rh3-farbzeile { color: #65717d; font-size: 12px; }
html.rh-pdp3 #product-offer .rh3-gr .rh3-gr__mid b, html.rh-pdp3 #product-offer .rh3-gr .rh3-gr__pr { font-weight: 600 !important; }
html.rh-pdp3 #product-offer .rh3-gr .rh3-gr__lz { font-weight: 400; color: #525f6c; }
html.rh-pdp3 #product-offer .rh3-gr .rh3-gr__lz.is-spaet { color: #715616; }
body button.rh3-zub { margin: 16px 0 12px; border: 1px solid #dce3e8; border-radius: 12px; padding: 16px; box-shadow: none; background: #fff; text-align: left; }
body button.rh3-zub.is-lockt { background: #fff; border-color: #dce3e8; box-shadow: none; animation: none; }
body button.rh3-zub:hover { border-color: #116bb0; background: #fafcfe; box-shadow: none; transform: none; }
body .rh3-zub__ico { order: 2; margin-left: auto; width: 64px; flex: 0 0 64px; }
body .rh3-zub__ico img { width: 32px; height: 42px; object-fit: contain; }
body .rh3-zub__ico img:nth-child(n+3) { display: none; }
body .rh3-zub__txt { flex: 1; }
body .rh3-zub__txt b { font-weight: 650; font-size: 14px; }
body .rh3-zub__txt b em { font-size: 11px; font-style: normal; font-weight: 400; color: #65717d; }
body .rh3-zub__txt small { margin-top: 6px; font-size: 12px; }
body .rh3-zub__proof { color: #65717d; background: none; font-size: 11px; font-weight: 400; margin-top: 4px; }
body .rh3-zub__pf { order: 3; color: #65717d; }
body #rh3-total { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 16px; gap: 12px; font-size: 14px; }
body #rh3-total[hidden] { display: none; }
body #rh3-total small { display: block; font-size: 11px; color: #65717d; }
body #rh3-total > b { font-size: 22px; letter-spacing: -.02em; white-space: nowrap; }
html.rh-pdp3 #product-offer button[name="inWarenkorb"].btn-primary { background: #116bb0 !important; border-color: #116bb0 !important; color: #fff; box-shadow: none; min-height: 52px; border-radius: 10px; animation: none; }
html.rh-pdp3 #product-offer button[name="inWarenkorb"]::after { animation: none; }
html.rh-pdp3 body #rh-pdp-konf { display: block; max-width: none; border: 0; border-radius: 0; background: #fff; padding: 12px 0; margin: 0; text-align: center; box-shadow: none; }
html.rh-pdp3 body .rh-pdp-konf__t { font-size: 12px; font-weight: 500; color: #525f6c; text-decoration: underline; }
html.rh-pdp3 body .rh-pdp-konf__t::after, html.rh-pdp3 body .rh-pdp-konf__s { display: none; }
html.rh-pdp3 body .rh-buyargs { padding: 12px 0; margin: 0; gap: 7px; font-size: 12px; border-bottom: 1px solid #edf0f3; }
html.rh-pdp3 body .rt-pdp-payment-strip { margin: 12px 0 0; padding: 10px 0; border: 0; background: #fff; justify-content: center; gap: 14px; }
html.rh-pdp3 body .rt-pdp-payment-icon { max-width: 55px; height: 24px; object-fit: contain; }
html.rh-pdp3 body .rt-pdp-payment-icon--dhl { display: none; }
body #rh3-cart-error { border: 1px solid #eac6c6; border-radius: 8px; padding: 12px; color: #902626; background: #fff7f7; font-size: 13px; }
body .rh3-kf { margin: 28px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid #edf0f3; background: #fff; }
body .rh3-kf__h { flex-wrap: wrap; gap: 6px 10px; margin-bottom: 12px; }
body .rh3-kf__h b { font-size: 14px; font-weight: 600; }
body .rh3-kf__h > span { font-size: 11px; color: #65717d; margin-left: auto; }
body .rh3-kf__s { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
body .rh3-kf__s button { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 9px; border: 1px solid #edf0f3; background: #f7f8fa; overflow: hidden; position: relative; }
body .rh3-kf__s button img { width: 100%; height: calc(100% - 26px); object-fit: contain; }
body .rh3-kf__name { display: block; height: 26px; font-size: 10px; padding: 5px; color: #525f6c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #fff; }
body .rh3-kf__ov { background: #ffffffd9; color: #18232f; }
html.rh-pdp3 #rh3-faq { padding: 24px 0; margin: 20px 0; border-top: 1px solid #edf0f3; }
html.rh-pdp3 .dh-pdp-section { background: #fff; box-shadow: none; border-color: #edf0f3; }
html.rh-pdp3 .rt-pdp-mobile-cta { background: #fff; box-shadow: 0 -2px 16px #18232f08; border-top: 1px solid #edf0f3; }
html.rh-pdp3 .rt-pdp-mobile-cta__sale { display: none; }
html.rh-pdp3 .rt-pdp-mobile-cta__price { color: #18232f; }

/* Full-screen accessory flow: a light product panel, one decision, stable footer. */
body .rh3-sheet { z-index: 100010; background: #fff; color: #18232f; color-scheme: light; transform: translateY(16px); opacity: 0; transition: opacity .18s, transform .18s; font-family: system-ui, sans-serif; }
body .rh3-sheet.is-offen { opacity: 1; transform: none; }
body .rh3-sheet__kopf { min-height: 72px; padding: 12px 4vw; gap: 24px; border-bottom: 1px solid #edf0f3; font-size: 13px; color: #65717d; flex: 0 0 auto; }
body .rh3-sheet__brand { font-size: 20px; font-weight: 750; letter-spacing: .045em; color: #116bb0; }
body .rh3-sheet__x { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #525f6c; border: 1px solid #edf0f3; border-radius: 50%; font-size: 17px; background: #fff; }
body .rh3-sheet__layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); flex: 1; min-height: 0; width: 100%; max-width: 1320px; margin: 0 auto; }
body .rh3-sheet__product { padding: 40px; background: #f8f9fb; overflow: auto; }
body .rh3-sheet__product > img { width: 100%; height: min(34vh, 350px); object-fit: contain; mix-blend-mode: multiply; margin-bottom: 24px; }
body .rh3-sheet__product small { display: block; color: #65717d; font-size: 12px; margin: 10px 0; }
body .rh3-sheet__product b { font-weight: 600; display: block; font-size: 18px; line-height: 1.4; }
body .rh3-sheet__product p { font-size: 13px; color: #525f6c; margin: 8px 0; }
body .rh3-sheet__product strong { font-size: 20px; font-weight: 600; }
body .rh3-sheet__in { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 32px 40px 48px; background: #fff; }
body .rh3-flow-nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 32px; }
body .rh3-flow-nav button { border: 0; background: none; font-size: 11px; color: #525f6c; padding: 6px 0; min-height: 44px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
body .rh3-flow-nav button span { display: grid; place-items: center; height: 20px; width: 20px; background: #f1f3f6; border-radius: 50%; }
body .rh3-flow-nav button[aria-current] { color: #0e548b; font-weight: 600; }
body .rh3-flow-nav button[aria-current] span { background: #116bb0; color: #fff; }
body .rh3-flow-nav button:disabled { color: #65717d; cursor: default; }
body .rh3-flow-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: .025em; color: #65717d; margin: 0 0 12px; }
body .rh3-flow-content h2 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; font-weight: 650; letter-spacing: -.035em; margin: 0 0 14px; color: #18232f; }
body .rh3-flow-content h2:focus { outline: none; }
body .rh3-flow-sub { font-size: 14px; line-height: 1.6; color: #525f6c; margin: 0 0 28px; max-width: 580px; }
body .rh3-bw { display: grid; grid-template-columns: 1fr; gap: 12px; }
body .rh3-bw__c { min-height: 90px; padding: 20px; border-radius: 12px; border: 1px solid #dce3e8; background: #fff; display: flex; gap: 16px; align-items: center; }
body .rh3-bw__ic { background: #f4f7fa; color: #116bb0; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; }
body .rh3-bw__t b { font-size: 16px; font-weight: 600; }
body .rh3-bw__t small { font-size: 12px; font-weight: 400; color: #525f6c; margin-top: 4px; }
body .rh3-zbs { display: grid; gap: 12px; }
body .rh3-zb { display: grid; grid-template-columns: 88px minmax(0,1fr); padding: 16px; gap: 16px; border: 1px solid #dce3e8; border-radius: 12px; background: #fff; }
body .rh3-zb__img { width: 88px; height: 110px; border: 0; background: #fff; border-radius: 8px; }
body .rh3-zb__pick { min-height: 72px; padding: 0; gap: 10px; flex-wrap: wrap; color: #18232f; }
body .rh3-zb__t { flex: 1 1 calc(100% - 30px); }
body .rh3-zb__t b { font-size: 16px; line-height: 1.3; font-weight: 600; }
body .rh3-zb__t small { font-size: 12px; line-height: 1.5; margin-top: 4px; color: #525f6c; font-weight: 400; }
body .rh3-zb__p { order: 3; font-size: 14px; font-weight: 600; margin: 6px 0 0; }
body .rh3-zb__more { font-size: 11px; color: #525f6c; margin: 4px 0 0; min-height: 32px; }
body .rh3-bw__c.is-on, body .rh3-zb.is-on, body .rh3-ohne.is-on { background: #f7fbff; border-color: #116bb0; box-shadow: inset 0 0 0 1px #116bb0; }
body .rh3-radio { width: 18px; height: 18px; flex: 0 0 18px; }
body .rh3-ohne { min-height: 52px; border-style: solid; border-radius: 10px; padding: 14px; font-size: 12px; font-weight: 400; }
body .rh3-flow-note { background: #f8f9fb; border-radius: 8px; padding: 12px 14px; color: #525f6c; font-size: 12px; line-height: 1.6; margin: 16px 0 0; }
body .rh3-flow-help { border-top: 1px solid #edf0f3; padding-top: 16px; margin-top: 28px; font-size: 11px; line-height: 1.8; color: #65717d; }
body .rh3-flow-help a { color: #525f6c; text-decoration: underline; }
body .rh3-sheet__weg { color: #65717d; font-size: 11px; padding: 12px 0; min-height: 44px; }
body .rh3-sheet__fuss { display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 16px 4vw max(16px,env(safe-area-inset-bottom)); box-shadow: 0 -3px 20px #18232f05; flex: 0 0 auto; }
body .rh3-sheet__fuss > * { max-width: none; width: auto; margin: 0; }
body .rh3-sheet__back { background: #fff; color: #525f6c; border: 0; min-height: 48px; padding: 0 12px; margin-right: auto; font-size: 13px; cursor: pointer; }
body .rh3-sheet__sum { text-align: right; }
body .rh3-sheet__sum small { display: block; font-size: 10px; color: #65717d; }
body .rh3-sheet__sum b { display: block; font-size: 23px; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
body .rh3-sheet__ok { min-width: 180px; min-height: 50px; background: #116bb0; font-size: 14px; font-weight: 600; border-radius: 9px; }
body .rh3-sheet__ok:hover:not(:disabled) { background: #0e548b; }
body .rh3-review__row { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid #edf0f3; }
body .rh3-review__row img { width: 48px; height: 64px; object-fit: contain; }
body .rh3-review__row b { display: block; font-size: 13px; font-weight: 600; }
body .rh3-review__row small { display: block; color: #65717d; font-size: 11px; margin-top: 4px; }
body .rh3-review__row strong { font-size: 14px; font-weight: 600; white-space: nowrap; }
body .rh3-sheet :focus-visible, body .rh3-dm :focus-visible, body .rh3-lb :focus-visible, html.rh-pdp3 #product-offer button:focus-visible { outline: 3px solid #116bb0; outline-offset: 3px; }
body .rh3-dm { z-index: 100020; visibility: hidden; }
body .rh3-dm.is-offen { visibility: visible; }
body .rh3-lb { z-index: 100030; background: #f8f9fb; color: #18232f; visibility: hidden; }
body .rh3-lb.is-offen { visibility: visible; }
body .rh3-lb__x, body .rh3-lb__tt, body .rh3-lb__n, body .rh3-lb__cap, body .rh3-lb__cap small, body .rh3-lb__cap p { color: #18232f; }
body .rh3-lb__x, body .rh3-lb__n { min-width: 44px; min-height: 44px; background: #fff; border: 1px solid #dce3e8; }
body .rh3-lb__cap { background: #ffffffed; padding: 12px; border-radius: 10px; }
@media (min-width: 992px) {
  html.rh-pdp3 #product-offer .product-gallery { padding-right: 40px; }
  html.rh-pdp3 #product-offer .dh-pdp-buybox { padding: 0 0 0 8px; }
}
@media (max-width: 767.98px) {
  html.rh-pdp3 #product-offer header.dh-pdp-buybox__head > .rh-facts { display: none !important; }
  html.rh-pdp3 #product-offer .dh-kb { order: 9 !important; }
  html.rh-pdp3 #product-offer .rh3-kf { order: 10 !important; margin-top: 24px; }
  body .rh3-punkte { left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 10px; gap: 10px; }
  body .rh3-color-label { gap: 5px; font-size: 11px; }
  body .rh3-color-label .rh3-stepno { display: none; }
  body .rh3-color-label b { display: none; }
  body .rh3-sheet__kopf { min-height: 64px; padding: 10px 16px; gap: 16px; font-size: 11px; }
  body .rh3-sheet__brand { font-size: 17px; }
  body .rh3-sheet__layout { display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain; }
  body .rh3-sheet__product { display: flex; gap: 12px; align-items: center; padding: 12px 20px; overflow: visible; }
  body .rh3-sheet__product > img { width: 50px; height: 65px; margin: 0; }
  body .rh3-sheet__product > div { min-width: 0; }
  body .rh3-sheet__product b { font-size: 12px; }
  body .rh3-sheet__product small, body .rh3-sheet__product strong { display: none; }
  body .rh3-sheet__product p { font-size: 11px; margin: 3px 0 0; }
  body .rh3-sheet__in { padding: 16px 20px 32px; overflow: visible; flex: 1 0 auto; }
  body .rh3-flow-nav { margin-bottom: 20px; gap: 10px; }
  body .rh3-flow-nav button { font-size: 10px; }
  body .rh3-flow-nav button:disabled { display: none; }
  body .rh3-flow-content h2 { font-size: 26px; }
  body .rh3-flow-sub { font-size: 13px; margin-bottom: 20px; }
  body .rh3-bw__c { min-height: 82px; padding: 14px; gap: 12px; }
  body .rh3-bw__t b { font-size: 15px; }
  body .rh3-bw__t small { font-size: 11px; }
  body .rh3-zb { grid-template-columns: 64px minmax(0,1fr); padding: 12px; gap: 12px; }
  body .rh3-zb__img { width: 64px; height: 96px; }
  body .rh3-zb__t b { font-size: 15px; }
  body .rh3-sheet__fuss { gap: 12px; flex-wrap: wrap; padding: 12px 20px max(12px,env(safe-area-inset-bottom)); }
  body .rh3-sheet__back { padding: 0; min-height: 32px; font-size: 12px; }
  body .rh3-sheet__sum b { font-size: 21px; }
  body .rh3-sheet__ok { width: 100%; min-width: 0; min-height: 48px; }
  body .rh3-zub__ico { display: none; }
  body .rh3-kf__name { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  body .rh3-sheet, body .rh3-zb, body .rh3-bw__c { transition: none; }
}
/* Native product express buttons contain only the heater; the configured set
   is assembled first and paid through the existing basket checkout. */
html.rh3-has-accessories #paypal-button-productDetails-container,
html.rh3-has-accessories #ppc-paypal-button-custom-productDetails-wrapper,
html.rh3-has-accessories #ppc-productDetails-instalment-banner { display: none !important; }
html.rh-pdp3 .rt-pdp-payment-icon[hidden] { display: none !important; }
/* Match the specificity of legacy modules 14/26/28 for the actual NOVA markup. */
html.rh-pdp3 body #product-offer .product-info-inner.dh-pdp-buybox { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; }
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants { padding: 0 !important; background: #fff !important; border: 0 !important; border-radius: 0 !important; margin-top: 0 !important; }
html.rh-pdp3 body #product-offer .variation-wrapper dt { text-transform: none !important; font-size: 15px !important; letter-spacing: 0 !important; }
html.rh-pdp3 body #product-offer header.dh-pdp-buybox__head > .rh-facts-wrap { display: none !important; }
html.rh-pdp3 body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon[hidden] { display: none !important; }
html.rh-pdp3 body #product-offer .rt-pdp-payment-static-icons .rt-pdp-payment-icon { width: 55px !important; max-width: 55px !important; height: 26px !important; padding: 0 !important; }
html.rh-pdp3 body #product-offer .rt-pdp-payment-strip.rt-pdp-payment-static-icons { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 12px !important; padding: 14px 0 !important; }
html.rh-pdp3 body #product-offer .rt-pdp-payment-strip .rothler-trust-section { flex-basis: 100%; }
@media (min-width: 992px) {
  html.rh-pdp3 body #product-offer .product-info-inner.dh-pdp-buybox { padding: 0 8px 0 20px !important; }
}
html.rh3-media-offen, html.rh3-media-offen body { overflow: hidden; }
html.rh-pdp3 body[data-page="1"] #product-offer h1.dh-pdp-buybox__title { -webkit-line-clamp: unset !important; max-height: none !important; overflow: visible !important; }
/* 14.09.2026: Zubehör direkt in v2; native Kaufzeile und mobile Mengenwahl. */
html.rh-pdp3 body #product-offer a.rh3-config-link {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 76px 20px; align-items: center;
  gap: 12px; width: 100%; margin: 18px 0 16px; padding: 19px 18px;
  border: 1px solid #dce3e8; border-radius: 14px; background: #fff;
  color: #18232f; text-decoration: none; transition: border-color .16s ease, background .16s ease;
}
html.rh-pdp3 body #product-offer a.rh3-config-link:hover { border-color: #116bb0; background: #f8fbfe; }
html.rh-pdp3 body #product-offer a.rh3-config-link:focus-visible,
html.rh-pdp3 .rh3-purchase-sticky :focus-visible { outline: 3px solid #116bb0; outline-offset: 3px; }
html.rh-pdp3 .rh3-config-link__text { display: grid; gap: 5px; }
html.rh-pdp3 .rh3-config-link__text strong { font-size: 16px; line-height: 1.3; font-weight: 650; letter-spacing: -.015em; }
html.rh-pdp3 .rh3-config-link__text > span { color: #596773; font-size: 13px; line-height: 1.45; }
html.rh-pdp3 .rh3-config-link__text small { color: #116bb0; font-size: 12px; line-height: 1.4; }
html.rh-pdp3 .rh3-config-link__images { display: flex; gap: 4px; }
html.rh-pdp3 .rh3-config-link__images img { width: 36px; height: 50px; object-fit: contain; border-radius: 7px; border: 1px solid #edf0f3; background: #f8f9fa; }
html.rh-pdp3 .rh3-config-link__arrow { color: #116bb0; font-size: 23px; }
html.rh-pdp3 body #product-offer #add-to-cart { width: 100%; margin-top: 0; }
html.rh-pdp3 body #product-offer #add-to-cart > .rh3-purchase-row {
  display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
  gap: 12px !important; margin: 0 !important; width: 100% !important;
}
html.rh-pdp3 body #product-offer #add-to-cart > .rh3-purchase-row > .rh3-purchase-quantity {
  flex: 0 0 132px !important; max-width: 132px !important; width: 132px !important; margin: 0 !important; padding: 0 !important;
}
html.rh-pdp3 body #product-offer #add-to-cart > .rh3-purchase-row > .rh3-purchase-submit {
  flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
}
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp {
  display: grid !important; grid-template-columns: 40px minmax(0,1fr) 40px !important;
  width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 56px !important; min-height: 56px !important;
  border: 1px solid #dce3e8 !important; border-radius: 12px !important;
}
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .input-group-prepend,
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .input-group-append { display: contents !important; }
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .unit { display: none !important; }
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .btn,
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp input.quantity {
  width: 100% !important; min-width: 0 !important; height: 54px !important; min-height: 54px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: #fff !important; font-size: 16px !important; box-shadow: none !important;
}
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp input.quantity { grid-column: 2 !important; text-align: center; appearance: textfield; }
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .input-group-prepend .btn { grid-column: 1 !important; }
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp .input-group-append .btn { grid-column: 3 !important; }
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp input::-webkit-inner-spin-button,
html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp input::-webkit-outer-spin-button { appearance: none; margin: 0; }
html.rh-pdp3 body #product-offer #add-to-cart .rh3-purchase-submit button[name="inWarenkorb"] {
  display: flex !important; justify-content: center; align-items: center; width: 100% !important;
  min-height: 56px !important; height: 56px !important; margin: 0 !important;
  border-radius: 12px !important; font-size: 16px !important; font-weight: 650 !important;
}
@media (max-width: 767.98px) {
  html.rh-pdp3 body #product-offer a.rh3-config-link { grid-template-columns: 22px minmax(0,1fr) 16px; gap: 9px; padding: 16px 13px; }
  html.rh-pdp3 .rh3-config-link__text strong { font-size: 15px; }
  html.rh-pdp3 .rh3-config-link__images { display: none; }
  html.rh-pdp3 body #product-offer #add-to-cart > .rh3-purchase-row { gap: 9px !important; }
  html.rh-pdp3 body #product-offer #add-to-cart > .rh3-purchase-row > .rh3-purchase-quantity { flex-basis: 112px !important; width: 112px !important; max-width: 112px !important; }
  html.rh-pdp3 body #product-offer #add-to-cart #quantity-grp { grid-template-columns: 36px minmax(0,1fr) 36px !important; }
  html.rh-pdp3 body { padding-bottom: calc(var(--rh-purchase-height, 190px) + 16px) !important; }
  html.rh-pdp3 body .rh3-purchase-sticky { padding: 8px 14px calc(8px + env(safe-area-inset-bottom)) !important; background: #fff; border-top: 1px solid #e1e7ec; box-shadow: 0 -6px 26px #18232f0a; }
  html.rh-pdp3 body .rh3-purchase-sticky .rt-pdp-mobile-cta__inner { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 6px !important; max-width: 560px; margin: 0 auto; }
  html.rh-pdp3 .rh3-purchase-sticky .rt-pdp-mobile-cta__summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; align-items: center; min-width: 0; }
  html.rh-pdp3 body .rh3-purchase-sticky .rt-pdp-mobile-cta__price { font-size: 23px !important; line-height: 1.15 !important; letter-spacing: -.025em; }
  html.rh-pdp3 .rh3-sticky-pricing { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 0; min-width: 0; }
  html.rh-pdp3 .rh3-sticky-uvp { color: #667480; font-size: 10px; line-height: 1.3; font-weight: 400; white-space: nowrap; }
  html.rh-pdp3 .rh3-sticky-uvp[hidden] { display: none; }
  html.rh-pdp3 .rh3-sticky-shipping { color: #217343; font-size: 11px; font-weight: 650; }
  html.rh-pdp3 .rh3-purchase-sticky .rt-pdp-mobile-cta__note { grid-column: 2; grid-row: 1; justify-self: end; display: grid; gap: 1px; text-align: right; color: #596773; font-size: 10px !important; font-weight: 400 !important; line-height: 1.3 !important; margin: 0; white-space: nowrap; }
  html.rh-pdp3 .rh3-purchase-sticky .rt-pdp-mobile-cta__variant { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: flex !important; align-items: center; gap: 5px; min-width: 0; color: #435767; font-size: 11px; font-weight: 500; line-height: 1.4; padding: 2px 0 0; margin: 0; text-align: left; white-space: nowrap; }
  html.rh-pdp3 .rh3-purchase-sticky .rt-pdp-mobile-cta__variant[hidden] { display: none !important; }
  html.rh-pdp3 .rh3-purchase-sticky .rh3-sticky-dot { display: inline-block; flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid #bdcbd4; border-radius: 50%; }
  html.rh-pdp3 .rh3-purchase-sticky .rh3-sticky-description { white-space: nowrap; }
  html.rh-pdp3 .rh3-purchase-sticky .rt-pdp-mobile-cta__variant::after { display: none; }
  html.rh-pdp3 .rh3-sticky-actions { display: flex; align-items: stretch; gap: 10px; min-width: 0; }
  html.rh-pdp3 .rh3-sticky-quantity { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; flex: 0 0 120px; height: 48px; border: 1px solid #dce3e8; border-radius: 12px; overflow: hidden; }
  html.rh-pdp3 .rh3-sticky-quantity button,
  html.rh-pdp3 .rh3-sticky-quantity input { width: 100%; min-width: 0; padding: 0; border: 0; background: #fff; color: #18232f; text-align: center; font-family: inherit; font-size: 17px; font-weight: 600; border-radius: 0; }
  html.rh-pdp3 .rh3-sticky-quantity button { font: 400 21px/1 system-ui; cursor: pointer; }
  html.rh-pdp3 .rh3-sticky-quantity button:disabled { color: #adb5bd; cursor: default; }
  html.rh-pdp3 .rh3-sticky-quantity input { appearance: textfield; }
  html.rh-pdp3 .rh3-sticky-quantity input::-webkit-inner-spin-button,
  html.rh-pdp3 .rh3-sticky-quantity input::-webkit-outer-spin-button { appearance: none; margin: 0; }
  html.rh-pdp3 body[data-page="1"] .rh3-purchase-sticky .rt-pdp-mobile-cta__button { flex: 1; min-width: 0; height: 48px !important; min-height: 48px !important; padding: 8px; font-size: 15px !important; font-weight: 650; border-radius: 12px !important; }
  html.rh-pdp3 .rh3-sticky-config { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 36px; color: #116bb0; background: #f5f8fb; border: 1px solid #e6ecf1; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; }
  html.rh-pdp3 body:has(.rt-pdp-mobile-cta--visible) #chatbot-widget { bottom: calc(var(--rh-purchase-height, 190px) + 12px); }
}
@media (max-width: 359.98px) {
  html.rh-pdp3 body .rh3-purchase-sticky { padding-left: 10px !important; padding-right: 10px !important; }
  html.rh-pdp3 .rh3-sticky-quantity { flex-basis: 112px; grid-template-columns: 36px minmax(0,1fr) 36px; }
  html.rh-pdp3 body[data-page="1"] .rh3-purchase-sticky .rt-pdp-mobile-cta__button { font-size: 14px !important; }
  html.rh-pdp3 body #product-offer #add-to-cart .rh3-purchase-submit button[name="inWarenkorb"] { font-size: 14px !important; }
}
/* Breadcrumb am Artikelnamen; kein eigener Streifen zwischen Menü und Produktbild. */
html body .breadcrumb-container:not(:has(#breadcrumb)) { display: none !important; }
html body[data-page="1"] #content-wrapper { padding-top: 8px !important; }
html body[data-page="1"] #product-offer { margin-top: 0 !important; }
/* NOVAs unsichtbarer Default-Submit belegte eine zusätzliche 24-px-Zeile. */
html body[data-page="1"] #buy_form > .btn-hidden-default {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
  margin: -1px !important; border: 0 !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
html body #product-offer .rh-product-breadcrumb {
  display: block !important; min-width: 0; width: 100%;
  margin: 2px 0 5px !important; padding: 0 !important; border: 0;
}
html body #product-offer .rh-product-breadcrumb ol {
  display: flex !important; flex-wrap: nowrap; align-items: center;
  list-style: none; gap: 0; margin: 0; padding: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  font-size: 11px; line-height: 1.4; color: #65717d;
}
html body #product-offer .rh-product-breadcrumb li { display: inline-flex; align-items: center; flex: 0 0 auto; }
html body #product-offer .rh-product-breadcrumb li + li::before { content: '›'; padding: 0 7px; color: #8b959e; }
html body #product-offer .rh-product-breadcrumb a { display: inline-flex; align-items: center; min-height: 24px; padding: 0; color: #65717d; text-decoration: none; white-space: nowrap; }
html body #product-offer .rh-product-breadcrumb a:hover { color: #116bb0; text-decoration: underline; }
html body #product-offer .rh-product-breadcrumb a:focus-visible { outline: 2px solid #116bb0; outline-offset: -2px; }
@media (max-width: 767.98px) {
  html body[data-page="1"] #content-wrapper { padding-top: 4px !important; }
  html body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh-product-breadcrumb { order: 3 !important; margin: 0 0 2px !important; }
}
/* Mobil auf allen übrigen Seiten: eine schmale, bei langen Pfaden scrollbare Zeile. */
@media (max-width: 991.98px) {
  html body .breadcrumb-container { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 4px !important; }
  html body .breadcrumb-container:empty { display: none; }
  html body .breadcrumb-container .breadcrumb-wrapper { margin: 0 !important; padding: 0 !important; min-height: 0 !important; border: 0 !important; }
  html body .breadcrumb-container .breadcrumb-wrapper > .col-auto { flex: 0 1 100%; width: 100%; max-width: 100%; min-width: 0; padding: 0; }
  html body .breadcrumb-container #breadcrumb { margin: 0 !important; padding: 0 !important; min-width: 0; }
  html body .breadcrumb-container #breadcrumb .breadcrumb {
    display: flex !important; flex-wrap: nowrap !important; align-items: center;
    margin: 0 !important; padding: 0 !important; min-height: 24px !important;
    height: auto !important; background: transparent; border: 0 !important;
    overflow-x: auto; white-space: nowrap; scrollbar-width: thin; font-size: 11px;
  }
  html body .breadcrumb-container #breadcrumb .breadcrumb-item { display: inline-flex !important; align-items: center; flex: 0 0 auto; margin: 0; font-size: 11px; }
  html body .breadcrumb-container #breadcrumb .breadcrumb-item a,
  html body .breadcrumb-container #breadcrumb .breadcrumb-item span { font-size: 11px; line-height: 1.4; white-space: nowrap; color: #65717d; }
  html body .breadcrumb-container #breadcrumb .breadcrumb-item a { display: inline-flex; align-items: center; min-height: 24px; margin: 0; padding: 0; }
  html body .breadcrumb-container #breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: '›'; padding: 0 6px; font-size: 11px; color: #8b959e; }
  html body .breadcrumb-container #breadcrumb .breadcrumb-item.first::before { display: none; }
  html body .breadcrumb-container #breadcrumb .breadcrumb-arrow,
  html body .breadcrumb-container #breadcrumb .breadcrumb-backtolist,
  html body .breadcrumb-container .navigation-arrows { display: none !important; }
}
/* Product identity, purchase rhythm and supporting information share one spacing scale.
   Scoped to v3; native JTL variant inputs, prices and purchasing stay intact. */
html.rh-pdp3 body #product-offer header.dh-pdp-buybox__head {
  margin: 0 0 20px !important; padding: 0 !important; border: 0 !important;
}
html.rh-pdp3 body #product-offer .rh-product-breadcrumb { margin: 0 0 8px !important; }
html.rh-pdp3 body[data-page="1"] #product-offer h1.dh-pdp-buybox__title {
  margin: 0 !important; font-size: clamp(24px, 2vw, 30px) !important;
  line-height: 1.17 !important; letter-spacing: -.035em !important; font-weight: 700 !important;
}
html.rh-pdp3 body #product-offer .rh3-farbzeile { margin: 9px 0 0 !important; font-size: 13px; }
html.rh-pdp3 body #product-offer .dh-pdp-buybox__meta-row {
  display: flex !important; align-items: center !important; flex-wrap: wrap !important;
  flex-direction: row !important; justify-content: flex-start !important; gap: 6px 18px !important; margin: 10px 0 0 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__rating { margin: 0 !important; }
html.rh-pdp3 body #product-offer #jump-to-votes-tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 0; border: 0; background: transparent; color: #354452;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__rating-text {
  font-size: 12px !important; font-weight: 500 !important;
  text-decoration: underline; text-decoration-color: #ccd5dd; text-underline-offset: 3px;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__sku {
  display: inline !important; margin: 0 !important; color: #76818c !important;
  font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__price-under-title {
  margin: 16px 0 0 !important; padding: 16px 0 0 !important;
  border: 0 !important; border-top: 1px solid #edf0f3 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-price-wrapper { margin: 0 !important; padding: 0 !important; }
html.rh-pdp3 body #product-offer .dh-pdp-price-line { gap: 5px !important; margin: 0 !important; }
html.rh-pdp3 body #product-offer .dh-pdp-price-row--top { gap: 9px !important; margin: 0 !important; align-items: center !important; }
html.rh-pdp3 body #product-offer .dh-pdp-old-price,
html.rh-pdp3 body #product-offer .dh-pdp-old-price s {
  font-size: 15px !important; line-height: 1.35 !important; color: #75818c !important; font-weight: 400 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-save-pill {
  font-size: 11px !important; line-height: 1.4 !important; padding: 3px 7px !important;
  border-radius: 5px !important; background: #eef5fa !important; color: #176ca9 !important; font-weight: 600 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-price-row--bottom {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 14px !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-current-price,
html.rh-pdp3 body #product-offer .dh-pdp-current-price .dh-pdp-price-spec {
  font-size: 34px !important; line-height: 1.15 !important; letter-spacing: -.035em !important; font-weight: 750 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-taxline {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 3px !important;
  margin: 0 !important; color: #6b7783 !important; font-size: 11px !important; line-height: 1.4 !important;
}
html.rh-pdp3 body #product-offer .rh-pdp-free-shipping { color: #354b5b; font-size: 12px; font-weight: 550; }
html.rh-pdp3 body #product-offer .dh-pdp-price-logistics {
  margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  gap: 5px 14px !important; align-items: center !important; margin: 0 !important;
  padding: 11px 13px !important; border: 0 !important; border-radius: 9px !important; background: #f6f8fa !important;
  font-size: 12px !important; line-height: 1.5 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-inline-logistics__item { font-size: 12px !important; margin: 0 !important; }
html.rh-pdp3 body #product-offer .dh-pdp-inline-logistics__item--stock { color: #357449 !important; font-weight: 600 !important; }
/* Remove cumulative header/section/dl margins, rather than pulling controls upwards. */
html.rh-pdp3 body #product-offer .dh-pdp-buybox__offer,
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants .variations,
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants dl,
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper:not(.rh3-farbe-quelle) {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dt {
  margin: 0 0 10px !important; padding: 0 !important; line-height: 22px !important;
}
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper dd { margin: 0 !important; }
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--purchase { margin: 0 !important; padding: 0 !important; }
html.rh-pdp3 body #product-offer a.rh3-config-link { margin: 14px 0 !important; padding: 16px !important; border-radius: 12px; }
html.rh-pdp3 body #product-offer .rh3-gr .rh3-gr__lz { font-size: 11px !important; line-height: 1.3 !important; }
/* Benefits are content, not another decision or collapsed control. */
html.rh-pdp3 body #product-offer section.dh-kb.rh-pdp-benefits {
  order: 9 !important; margin: 24px 0 0 !important; padding: 22px 0 0 !important;
  border: 0 !important; border-top: 1px solid #e8edf1 !important; background: #fff !important;
}
html.rh-pdp3 body #product-offer .rh-pdp-benefits h2 {
  margin: 0 0 14px !important; font-size: 18px !important; line-height: 1.3 !important;
  letter-spacing: -.025em; color: #182b3c; font-weight: 650;
}
html.rh-pdp3 body #product-offer .rh-pdp-benefits ul {
  display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 13px 24px !important; margin: 0 !important; padding: 0 !important; list-style: none !important;
}
html.rh-pdp3 body #product-offer .rh-pdp-benefits ul li {
  display: block !important; position: relative; padding: 0 0 0 22px !important;
  margin: 0 !important; min-height: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: #52616e !important;
  font-size: 13px !important; line-height: 1.65 !important;
}
html.rh-pdp3 body #product-offer .rh-pdp-benefits ul li::before {
  content: '✓' !important; position: absolute !important; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important;
  background: none !important; color: #207bb5 !important; font-size: 14px !important;
}
html.rh-pdp3 body #product-offer .rh-pdp-benefits li strong { color: #26394a; font-weight: 600; }
/* A readable FAQ block with a calm introduction and consistently sized controls. */
html.rh-pdp3 body #rh3-faq {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px;
  margin: 40px 0 !important; padding: 32px !important; border: 1px solid #e8edf1 !important;
  border-radius: 16px; background: #f8fafb;
}
html.rh-pdp3 body #rh3-faq .rh3-faq__intro { align-self: start; background: transparent; box-shadow: none; }
html.rh-pdp3 body #rh3-faq .rh3-dreh { max-width: 400px; }
html.rh-pdp3 body #rh3-faq .rh3-fq.is-offen .rh3-fq__a { height: auto !important; }
html.rh-pdp3 body #rh3-faq .rh3-faq__eyebrow { color: #176ca9; font-size: 11px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
html.rh-pdp3 body #rh3-faq .rh3-faq__h { margin: 8px 0 12px; color: #182b3c; font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -.03em; }
html.rh-pdp3 body #rh3-faq .rh3-faq__intro > p { margin: 0; max-width: 290px; color: #64717d; font-size: 14px; line-height: 1.65; }
html.rh-pdp3 body #rh3-faq .rh3-faq__list { min-width: 0; display: grid; align-content: start; gap: 8px; }
html.rh-pdp3 body #rh3-faq .rh3-fq { min-width: 0; border: 1px solid #e5ebf0; background: #fff; border-radius: 10px; overflow: hidden; }
html.rh-pdp3 body #rh3-faq .rh3-fq.is-offen { border-color: #c7dce9; }
html.rh-pdp3 body #rh3-faq .rh3-fq__b { width: 100%; min-height: 58px; padding: 16px 18px; gap: 16px; color: #233747; font-size: 14px; line-height: 1.45; font-weight: 600; text-align: left; }
html.rh-pdp3 body #rh3-faq .rh3-fq__b:hover { background: #f5f9fc; }
html.rh-pdp3 body #rh3-faq .rh3-fq__b i { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: #eef5fa; font-size: 17px; font-weight: 400; }
html.rh-pdp3 body #rh3-faq .rh3-fq__a > div { padding: 0 18px 18px; }
html.rh-pdp3 body #rh3-faq .rh3-fq__a p { font-size: 13px; line-height: 1.7; color: #52616e; }
html.rh-pdp3 body #rh3-faq .rh3-fq__b:focus-visible,
html.rh-pdp3 body #product-offer #jump-to-votes-tab:focus-visible { outline: 2px solid #176ca9; outline-offset: -3px; }
@media (min-width: 992px) {
  html.rh-pdp3 body #product-offer .product-info-inner.dh-pdp-buybox { padding-top: 20px !important; }
}
@media (max-width: 991.98px) {
  html.rh-pdp3 body #product-offer .rh-pdp-benefits ul { grid-template-columns: minmax(0,1fr) !important; gap: 10px !important; }
  html.rh-pdp3 body #rh3-faq { gap: 24px; padding: 24px !important; }
}
@media (max-width: 767.98px) {
  html.rh-pdp3 body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .rh-product-breadcrumb { order: 2 !important; margin: 6px 0 !important; }
  html.rh-pdp3 body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__meta-row { order: 5 !important; margin: 7px 0 0 !important; }
  html.rh-pdp3 body[data-page="1"] #product-offer header.dh-pdp-buybox__head > .dh-pdp-buybox__price-under-title { order: 6 !important; margin: 12px 0 18px !important; padding-top: 12px !important; }
  html.rh-pdp3 body[data-page="1"] #product-offer h1.dh-pdp-buybox__title { font-size: 24px !important; line-height: 1.16 !important; }
  html.rh-pdp3 body #product-offer .dh-pdp-buybox__price-under-title .dh-pdp-price-logistics .dh-pdp-inline-logistics { padding: 10px 12px !important; }
  html.rh-pdp3 body #product-offer .dh-pdp-inline-logistics__item--delivery { font-size: 11px !important; }
  html.rh-pdp3 body #product-offer a.rh3-config-link { padding: 14px 12px !important; }
  html.rh-pdp3 body[data-page="1"] #product-offer .product-info-inner.dh-pdp-buybox > section.dh-kb.rh-pdp-benefits { order: 9 !important; margin-top: 20px !important; padding-top: 20px !important; }
  html.rh-pdp3 body #rh3-faq { grid-template-columns: minmax(0,1fr); gap: 20px; margin: 28px 0 !important; padding: 20px 16px !important; border-radius: 12px; }
  html.rh-pdp3 body #rh3-faq .rh3-faq__h { font-size: 23px; margin-bottom: 8px; }
  html.rh-pdp3 body #rh3-faq .rh3-fq__b { padding: 14px; font-size: 13px; min-height: 56px; }
  html.rh-pdp3 body #rh3-faq .rh3-fq__a > div { padding: 0 14px 16px; }
}
/* v3 has explicit color controls and one gallery. Never render NOVA's hover
   preview, even if a legacy mouseenter timer adds d-md-block after replacement. */
html.rh-pdp3 body .variation-image-preview { display: none !important; }
html.rh-pdp3 #result-wrapper { overflow-anchor: none; }
html.rh-pdp3.rh-variant-loading { overflow-anchor: none; scroll-behavior: auto !important; }
html.rh-pdp3.rh-variant-loading .rh3-punkte { cursor: progress; }
html.rh-pdp3 body #product-offer .dh-pdp-buybox__section--variants .variation-wrapper:not(.rh3-farbe-quelle) dt {
  display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px !important;
  min-height: 30px; margin-bottom: 12px !important; font-size: 18px !important; line-height: 1.3 !important;
}
html.rh-pdp3 body #product-offer .rh3-step-title { font-size: 18px; font-weight: 650; color: #1b3042; letter-spacing: -.02em; }
html.rh-pdp3 body #product-offer .variation-wrapper:not(.rh3-farbe-quelle) dt small { margin-left: auto; font-size: 12px; font-weight: 400; color: #687783; }
html.rh-pdp3 body #product-offer .variation-wrapper:not(.rh3-farbe-quelle) dt .rh3-stepno,
html.rh-pdp3 body #product-offer a.rh3-config-link > .rh3-stepno {
  width: 28px; height: 28px; flex-basis: 28px; font-size: 13px;
  border-color: #bdd6e9; color: #116bb0; background: #edf6fc;
}
html.rh-pdp3 body #product-offer a.rh3-config-link {
  grid-template-columns: 28px minmax(0,1fr) 76px 36px; gap: 12px;
  border: 1px solid #a6cbe5; background: #f2f8fc;
}
html.rh-pdp3 body #product-offer a.rh3-config-link:hover { background: #eaf4fb; border-color: #116bb0; }
html.rh-pdp3 body #product-offer .rh3-config-link__text strong { font-size: 18px; color: #144e78; }
html.rh-pdp3 body #product-offer .rh3-config-link__arrow {
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: #116bb0; color: #fff; font-size: 20px;
}
#rh-variant-feedback {
  position: fixed; right: 24px; bottom: 24px; z-index: 1050;
  max-width: min(440px, calc(100vw - 32px)); padding: 12px 16px;
  border: 1px solid #bdd6e9; border-radius: 10px; background: #f3f9fd;
  box-shadow: 0 4px 20px #18232f12; color: #214960; font-family: inherit; font-size: 13px; line-height: 1.5; font-weight: 500;
}
#rh-variant-feedback[hidden] { display: none !important; }
#rh-variant-feedback.is-error { color: #8e3429; background: #fff8f6; border-color: #ebc7c2; }
@media (max-width: 767.98px) {
  html.rh-pdp3 body #product-offer .rh3-step-title { font-size: 17px; }
  html.rh-pdp3 body #product-offer .variation-wrapper:not(.rh3-farbe-quelle) dt small { font-size: 11px; }
  html.rh-pdp3 body #product-offer a.rh3-config-link { grid-template-columns: 28px minmax(0,1fr) 32px; gap: 9px; }
  html.rh-pdp3 body #product-offer .rh3-config-link__text strong { font-size: 16px; }
  html.rh-pdp3 body #product-offer .rh3-config-link__arrow { width: 32px; height: 32px; }
  #rh-variant-feedback { right: 16px; bottom: calc(var(--rh-purchase-height, 190px) + 12px); }
}
/* Editorial product help: readable questions and a real route to the service team. */
html.rh-pdp3 body #rh3-faq,
body #dh-fragen.rh-product-faq {
  display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
  align-items: start; gap: 32px; margin: 32px 0 !important; padding: 28px !important;
  border: 1px solid #e4ebf1 !important; border-radius: 16px; background: #f8fafc;
}
body .rh-product-faq__intro { min-width: 0; }
body .rh-product-faq__intro > p,
html.rh-pdp3 body #rh3-faq .rh3-faq__model { font-size: 13px; line-height: 1.5; max-width: none; color: #526476; margin: 0 0 6px; }
html.rh-pdp3 body #rh3-faq .rh3-faq__variant { font-size: 12px; color: #526476; margin: 0; }
body .rh-product-faq__intro > h2,
html.rh-pdp3 body #rh3-faq .rh3-faq__h { font-size: 25px; line-height: 1.2; margin: 8px 0 12px; }
body .rh3-faq__eyebrow { color: #176ca9; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
body .rh-help { margin: 20px 0 0; padding: 20px; background: #fff; border: 1px solid #dae5ee; border-radius: 12px; color: #24394a; }
body .rh-help__icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; background: #eaf4fc; color: #126aae; }
body .rh-help__icon svg { width: 23px; height: 23px; }
body .rh-help h3 { margin: 0 0 8px !important; font-size: 17px !important; font-weight: 650; line-height: 1.3; }
body .rh-help p { margin: 0 0 14px !important; font-size: 13px !important; line-height: 1.55; color: #526476; }
body .rh-help a.rh-help__phone { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; min-height: 58px; border: 1px solid #c9dff0; border-radius: 8px; background: #eef6fc; color: #075e9d; text-decoration: none; }
body .rh-help__phone span { font-size: 12px; }
body .rh-help__phone strong { font-size: 21px; line-height: 1.2; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
body .rh-help__hours, body .rh-help__article { display: block; font-size: 11px; line-height: 1.5; margin-top: 8px; color: #526476; }
body a.rh-help__contact { display: inline-block; font-size: 12px; line-height: 1.5; padding: 10px 0; color: #075e9d; text-decoration: underline; text-underline-offset: 3px; }
body .rh-help__trust { display: grid; gap: 3px; padding-top: 12px; margin-top: 2px; border-top: 1px solid #e5ecf2; font-size: 12px; line-height: 1.5; }
body .rh-help__trust b { font-weight: 650; }
body .rh-help__trust span { color: #526476; }
body .rh-help__trust a { color: #075e9d; text-decoration: underline; text-underline-offset: 3px; padding-top: 4px; }
body .rh-help a:focus-visible { outline: 3px solid #176ca9; outline-offset: 3px; }
body #dh-fragen.rh-product-faq .dh-pdp-faq { display: grid; gap: 8px; min-width: 0; }
body #dh-fragen.rh-product-faq .dh-pdp-faq__item { background: #fff; border: 1px solid #e0e8ef; border-radius: 9px; overflow: hidden; margin: 0; }
body #dh-fragen.rh-product-faq summary,
html.rh-pdp3 body #rh3-faq .rh3-fq__b { min-height: 52px; padding: 14px 16px; font-size: 14px; line-height: 1.45; font-weight: 600; color: #253e52; cursor: pointer; }
body #dh-fragen.rh-product-faq .dh-pdp-faq__answer { padding: 0 16px 16px; }
body #dh-fragen.rh-product-faq .dh-pdp-faq__answer p { font-size: 13px; line-height: 1.7; margin: 0; color: #526476; }
@media(max-width:767.98px) {
  html.rh-pdp3 body #rh3-faq, body #dh-fragen.rh-product-faq { grid-template-columns: minmax(0,1fr); padding: 18px 12px !important; gap: 18px; margin: 24px 0 !important; border-radius: 12px; }
  html.rh-pdp3 body #rh3-faq .rh3-faq__h, body .rh-product-faq__intro > h2 { font-size: 22px; }
  body .rh-help { padding: 16px; margin-top: 16px; }
  body .rh-help__icon { float: left; margin: 0 10px 0 0; }
  body .rh-help h3 { min-height: 34px; display: flex; align-items: center; font-size: 16px !important; }
  body .rh-help__trust { grid-template-columns: 1fr; }
  html.rh-pdp3 body #rh3-faq .rh3-fq__b, body #dh-fragen.rh-product-faq summary { padding: 13px 12px; font-size: 13px; }
}