/* rmd-kadence-child/assets/css/single-product.css
   Styling der nativen Single-Product-Summary (Galerie, Buy-Box, Trust-Band). Laedt nur auf is_product(). */

.rmd-product{font-family:var(--font-body);color:var(--color-text);line-height:1.55}
.rmd-product .rmd-wrap{max-width:var(--container);margin:0 auto;padding:0 24px}
/* Heading-Grundstil der PDP - NUR fuer "nackte" Ueberschriften, NICHT fuer Komponenten-Headings.
   Ohne das :not() faerbt .rmd-product h2 (0-1-1) die Block-eigene Headline (z.B. .rmd-c-cta__headline,
   0-1-0) schwarz - auf einem dunklen Panel unsichtbar. Bloecke tragen ihren eigenen Stil (Bauregel);
   diese Reset-Regel darf nicht in sie hineinbluten. */
.rmd-product h1:not([class*="rmd-c-"]),
.rmd-product h2:not([class*="rmd-c-"]),
.rmd-product h3:not([class*="rmd-c-"]){font-family:var(--font-head);color:var(--color-headline);letter-spacing:-.01em;font-weight:700}

/* Breadcrumb */
.rmd-breadcrumb{font-size:13px;color:var(--color-text-muted);padding:26px 0 20px}
.rmd-breadcrumb a{color:var(--color-text-muted);text-decoration:none}
.rmd-breadcrumb a:hover{color:var(--color-text)}

/* Oberer Bereich: Galerie | Buy-Box.
   minmax(0,1fr) statt 1fr: verhindert, dass die inhaltsreiche Buy-Box (Button/Tabelle) der
   Galerie-Spalte Breite stiehlt - so nutzen BEIDE Spalten exakt die halbe Breite. */
.rmd-product-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;padding-bottom:20px}
/* WooCommerce/Kadence-Default (.summary{float:right;width:48%} bzw. .images{width:48%}) im Grid neutralisieren,
   sonst schrumpft die Buy-Box auf 48% ihrer Zelle und rechts bleibt Leerraum. */
.rmd-product-top .rmd-gallery-col,.rmd-product-top .rmd-summary{width:auto!important;max-width:none!important;float:none!important;margin:0!important;padding:0!important}

/* ---- Galerie-Slider (Vanilla JS: Pfeile + Wischen, kein Slider-Lib) ---- */
/* Sticky: Offset unter den sticky Header, sonst wird die Galerie oben abgeschnitten */
.rmd-gallery-col{position:sticky;top:96px;min-width:0}
.rmd-gal{width:100%}
.rmd-gal:focus{outline:none}
.rmd-gal:focus-visible{outline:3px solid var(--color-signal-hover);outline-offset:3px;border-radius:var(--radius)}

/* Buehne = Slider-Fenster (ohne Rand, ohne Schatten) */
.rmd-gal-stage{position:relative;overflow:hidden;background:var(--color-bg);border:none;box-shadow:none;border-radius:var(--radius);aspect-ratio:1/1;cursor:grab}
.rmd-gal.is-dragging .rmd-gal-stage{cursor:grabbing}

/* Track + Slides - Bild fuellt den Container (kein Padding) */
.rmd-gal-track{display:flex;height:100%;will-change:transform;touch-action:pan-y}
.rmd-gal-slide{flex:0 0 100%;display:flex;align-items:center;justify-content:center;padding:0}
.rmd-gal-slide img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none}

/* Pfeile - NUR Chevron: kein Hintergrund/Rahmen/Schatten in KEINEM Zustand, groesser */
.rmd-gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:60px;height:60px;padding:0;border:none;background:transparent;box-shadow:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s,opacity .18s}
.rmd-gal-nav:hover,.rmd-gal-nav:focus,.rmd-gal-nav:active,.rmd-gal-nav:focus-visible{background:transparent;border:none;box-shadow:none;outline:none}
.rmd-gal-nav svg{width:46px;height:46px;stroke:var(--color-headline);stroke-width:1.3;fill:none;filter:drop-shadow(0 1px 4px rgba(255,255,255,.95))}
.rmd-gal-nav.prev{left:0}
.rmd-gal-nav.next{right:0}
.rmd-gal-nav:hover:not(:disabled){transform:translateY(-50%) scale(1.12)}
.rmd-gal-nav:disabled{opacity:0;pointer-events:none}

/* Badges */
.rmd-gal-badge{position:absolute;top:16px;left:16px;background:var(--color-signal);color:var(--color-headline);font-family:var(--font-head);font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px;z-index:5}
.rmd-gal-badge.sale{left:auto;right:16px;background:var(--color-headline);color:#fff}

/* Thumbnails - genau eine Reihe, max 4 sichtbar, Rest scrollt/slidet */
.rmd-gal-thumbs{display:flex;gap:12px;margin-top:14px;flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.rmd-gal-thumbs::-webkit-scrollbar{display:none}
.rmd-gal-thumbs button{flex:0 0 calc((100% - 36px) / 4);aspect-ratio:1;padding:0;overflow:hidden;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:14px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.rmd-gal-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.rmd-gal-thumbs button:hover{border-color:var(--color-alu)}
.rmd-gal-thumbs button.active{border-color:var(--color-headline);box-shadow:0 0 0 3px rgba(0,0,0,.06)}

/* Slider-Punkte: nur mobil sichtbar (ersetzen dort die Thumbnails). Fenster aus max. 5 Punkten:
   .rmd-gal-dots = Viewport (overflow hidden, Breite per JS), __track scrollt. Jeder Button ist
   ein 24px-Tap-Ziel (DOT_SLOT im JS) mit kleinem Punkt darin. */
.rmd-gal-dots{display:none}
.rmd-gal-dots__track{display:flex}
.rmd-gal-dots button{width:24px;height:24px;flex:0 0 24px;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* Inaktiv: kleiner gefuellter Punkt. Aktiv: groesserer hohler Ring (Outline). */
.rmd-gal-dots button::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-border-strong);border:1.5px solid transparent;box-sizing:border-box;transition:width .15s,height .15s,background .15s,border-color .15s,transform .15s}
.rmd-gal-dots button.active::before{width:12px;height:12px;background:transparent;border-color:var(--color-headline)}
/* Rand-Punkte des Fensters kleiner (Hinweis: es gibt noch mehr Bilder). */
.rmd-gal-dots button.is-sm::before{transform:scale(.55)}
.rmd-gal-dots button:focus-visible{outline:2px solid var(--color-headline);outline-offset:1px;border-radius:var(--radius-pill)}
@media(max-width:767px){
  .rmd-gal-thumbs{display:none}
  .rmd-gal-dots{display:block;overflow:hidden;margin:14px auto 0}
  .rmd-gal-dots__track{transition:transform .2s ease}
}

/* ---- Buy-Box ---- */
.rmd-summary{font-size:16px;min-width:0}  /* min-width:0 wie .rmd-gallery-col: Grid-Items haben
   sonst min-width:auto und koennen ihre Spalte von innen sprengen. */
/* Bewertung: kommt aus dem rating-Baustein (.rmd-c-rating, blocks.css) - hier kein eigenes Markup.
   Steht UNTER dem Titel und dicht dran (kleiner Titel-Abstand nach unten). */
.rmd-summary .product_title,.rmd-summary h1.product_title{font-size:33px;line-height:1.14;margin:0 0 4px}
.rmd-summary .rmd-c-rating{margin-bottom:18px}
.rmd-benefit{font-size:16.5px;color:var(--color-text-muted);margin:0 0 22px}

/* Art.-Nr.-Kasten (Art.-Nr. + Lieferzeit) unter der Variantenauswahl bzw. oben im Kaufbereich.
   Zwei Zellen nebeneinander, mit Trenner; jede Zelle Label oben, Wert darunter. */
.rmd-skubox{display:flex;align-items:stretch;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:0;margin:0 0 16px;font-size:var(--fs-sm);overflow:hidden}
.rmd-skubox[hidden]{display:none}
.rmd-skubox__item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;padding:10px 15px}
.rmd-skubox__item[hidden]{display:none}
/* Trenner nur, wenn BEIDE Zellen sichtbar sind (sonst haengt bei einer Zelle ein Strich rum). */
.rmd-skubox__item:not([hidden])+.rmd-skubox__item:not([hidden]){border-left:1px solid var(--color-border)}
.rmd-skubox__label{color:var(--color-text-muted);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em}
.rmd-skubox__val{font-family:var(--font-head);font-weight:var(--fw-semibold);color:var(--color-headline);letter-spacing:.02em}
/* Platzhalter "nach Auswahl sichtbar" (variabel, vor der Auswahl). Struktur/Labels bleiben,
   nur der WERT wird durch den Platzhalter ersetzt: im await-Zustand Platzhalter zeigen und
   echten Wert/Lieferzeit-Slot verstecken; sonst umgekehrt. */
.rmd-skubox__await{color:var(--color-text-muted);font-style:italic}
.rmd-skubox:not(.rmd-skubox--await) .rmd-skubox__await{display:none}
.rmd-skubox--await .rmd-skubox__val,
.rmd-skubox--await .rmd-skubox__slot{display:none}
/* Das verschobene Germanized-Element in der Lieferzeit-Zelle wie einen Wert aussehen lassen.
   Germanized bringt sein eigenes "Lieferzeit:"-Label mit - das wuerde neben unserem Label
   doppelt stehen. Wir blenden es aus (Label auf font-size:0) und zeigen nur den Wert
   (.delivery-time-data). Faellt das Label mal weg, bleibt der Wert trotzdem sichtbar. */
.rmd-skubox__slot .wc-gzd-additional-info,
.rmd-skubox__slot .delivery-time-inner{margin:0!important;padding:0!important;font-size:0!important;color:var(--color-headline)!important;font-family:var(--font-head)}
.rmd-skubox__slot .delivery-time-data{font-size:var(--fs-sm)!important;font-weight:var(--fw-semibold)}
/* Im flex-Formular (simples Produkt) volle Zeile, damit der Kasten nicht in die Menge+Button-Zeile rutscht. */
.rmd-summary form.cart:not(.variations_form) .rmd-skubox{flex:1 0 100%}
/* Mobil: gestapelt statt links/rechts, kleinere Schrift, Trenner oben statt links. */
@media(max-width:767px){
  .rmd-skubox{flex-direction:column}
  .rmd-skubox__item{padding:8px 13px;gap:1px}
  .rmd-skubox__label{font-size:10px}
  .rmd-skubox__val,.rmd-skubox__await,.rmd-skubox__slot .delivery-time-data{font-size:13px!important}
  .rmd-skubox__item:not([hidden])+.rmd-skubox__item:not([hidden]){border-left:0;border-top:1px solid var(--color-border)}
}

/* Germanized Steuer-/Versand-Hinweis nur EINMAL (in der Pricebox), das Duplikat oben ausblenden */
/* Germanized Steuer-/Versand-Hinweis nur EINMAL: den oberen (nahe Titel/Preis) ausblenden,
   unsere .note in der Preisbox ist die Quelle. Lieferzeit (delivery-time-info) bleibt sichtbar.
   Auf .single-product gescopt, damit der obere Treffer auch ausserhalb von .rmd-summary erwischt wird. */
.single-product .wc-gzd-additional-info.tax-info,
.single-product .wc-gzd-additional-info.shipping-costs-info,
.single-product .wc-gzd-additional-info.price-unit{display:none!important}

/* Native Variations-/Add-to-Cart-Form nur stylen.
   margin-bottom mit !important: WooCommerce-Basis setzt .woocommerce div.product form.cart
   {margin-bottom:2em} (0-3-2) und schlaegt unsere 0-2-1-Regel - das waren 32px Luft zwischen
   Warenkorb-Button und Test-CTA (Desktop wie Mobile). Der gewuenschte kleine Abstand kommt
   allein aus .rmd-c-testcta{margin-top} (8px). */
.rmd-summary form.cart{margin-bottom:0!important}
.rmd-summary table.variations{width:100%;margin-bottom:14px;border-collapse:collapse}
.rmd-summary table.variations th{font-family:var(--font-head);font-weight:600;font-size:14px;text-align:left;padding:8px 12px 8px 0;color:var(--color-headline);vertical-align:middle}
.rmd-summary table.variations td{padding:8px 0}
.rmd-summary table.variations select{width:100%;padding:13px 18px;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:15px;background:#fff}
.rmd-summary .reset_variations{font-size:13px;color:var(--color-text-muted);display:inline-block;margin-top:6px}
.rmd-summary .woocommerce-variation-price .price{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--color-headline);margin-bottom:10px;display:block}
/* Variable Produkte: WooCommerce-Varianten-Box komplett ausblenden - kein zweiter Preis,
   keine Luecke. Der Preis wird stattdessen oben in der Pricebox aktualisiert (single-product.js). */
.rmd-summary table.variations{margin-bottom:16px}
.rmd-summary .single_variation_wrap{width:100%;margin:0}
.rmd-summary .woocommerce-variation.single_variation{display:none!important}
.rmd-summary .woocommerce-variation-add-to-cart{margin:0;padding:0}

/* Varianten-Kacheln (nur wenn JS aktiv -> .rmd-var-enhanced; sonst native Dropdowns als Fallback) */
.rmd-summary form.rmd-var-enhanced table.variations{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.rmd-varopts{margin:0 0 8px}
.rmd-varopt{border:0;padding:0;margin:0 0 18px;min-width:0}
.rmd-varopt__lab{font-family:var(--font-head);font-size:14px;font-weight:600;color:var(--color-headline);margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px var(--space-2);width:100%;padding:0}
.rmd-varopt__cur{color:var(--color-text-muted);font-weight:500}
.rmd-varopt__tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rmd-tile{position:relative;border:1.5px solid var(--color-border);border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .15s,box-shadow .15s;background:#fff;display:block}
.rmd-tile input{position:absolute;opacity:0;width:0;height:0}
.rmd-tile__t{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:var(--lh-flat,1.05);color:var(--color-headline)}
/* Hover + Auswahl wie bei den Zubehoer-Zeilen (scope): dunkler Rahmen (--color-headline).
   Ausgewaehlt zusaetzlich ein Innen-Ring, damit "gewaehlt" klar staerker liest als "gehovert". */
.rmd-tile:hover{border-color:var(--color-headline)}
.rmd-tile.is-active{border-color:var(--color-headline);box-shadow:inset 0 0 0 1px var(--color-headline)}
.rmd-tile input:focus-visible~.rmd-tile__t{outline:2px solid var(--color-signal-hover);outline-offset:4px}
/* Nicht kombinierbarer Wert (per JS): ausgegraut + durchgestrichen + gesperrt, damit sofort klar
   ist, dass er in der aktuellen Auswahl nicht waehlbar ist - statt eines Klicks, der ins Leere laeuft. */
.rmd-tile--off{opacity:.5;cursor:not-allowed;background:var(--color-surface)}
.rmd-tile--off:hover{border-color:var(--color-border)}
.rmd-tile--off .rmd-tile__t{text-decoration:line-through;text-decoration-thickness:1px;color:var(--color-text-muted)}
/* Farb-Swatch-Kacheln (nur Farb-Attribute mit hinterlegtem Hex; sonst Text-Kachel) */
.rmd-varopt--color .rmd-varopt__tiles{display:flex;flex-wrap:wrap;gap:10px}
.rmd-tile--swatch{display:inline-flex;align-items:center;gap:9px;width:auto;padding:7px 15px 7px 7px;border-radius:var(--radius-pill)}
.rmd-tile__sw{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(0,0,0,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.rmd-tile--swatch .rmd-tile__t{font-family:var(--font-body);font-weight:var(--fw-medium);font-size:14px}
/* Reset ist ein <button> -> Kadence gibt ihm blaue Fokus-/Aktiv-Flaeche; hart ueberschreiben */
.rmd-varreset,.rmd-varreset:hover,.rmd-varreset:focus,.rmd-varreset:active,.rmd-varreset:focus-visible{background:none!important;border:none!important;box-shadow:none!important;outline:none}
.rmd-varreset{padding:0;margin-top:2px;font-size:13px;color:var(--color-link);text-decoration:underline;cursor:pointer;font-family:var(--font-body)}
.rmd-varreset:hover,.rmd-varreset:focus{color:var(--color-link-hover)}
.rmd-varreset:focus-visible{text-decoration-thickness:2px}
/* Handy: Kacheln packen nach Platz statt 1 fixe Spalte - kurze Werte (z.B. "30cm") sitzen 2-3 pro
   Zeile statt jeweils volle Bildschirmbreite (weniger Scrollen). auto-FILL (nicht auto-fit): ein
   einzelner Rest-Wert behaelt Kachelbreite statt sich voll zu strecken. min(100%,8rem) kappt lange
   Werte sauber (kein Ueberlauf, sehr lange Werte bekommen eine eigene Zeile). Farb-Swatches bleiben
   unberuehrt (flex-wrap ueberschreibt display:grid). */
@media(max-width:520px){
  .rmd-varopt__tiles{grid-template-columns:repeat(auto-fill,minmax(min(100%,8rem),1fr))}
  /* Umbrueche in laengeren Werten reduzieren: kleinere Schrift (--fs-xs 12px), schmaleres
     Seiten-Padding + engere Laufweite = mehr Textbreite pro Kachel, ohne die Tap-Hoehe zu opfern
     (13px oben/unten bleiben). NUR Text-Kacheln - Farb-Swatches (eigene Groesse/Padding) bleiben. */
  .rmd-tile:not(.rmd-tile--swatch){padding:13px 10px}
  .rmd-tile:not(.rmd-tile--swatch) .rmd-tile__t{font-size:var(--fs-xs);letter-spacing:-.01em}
}
/* Mengen-Stepper: native .quantity wird per JS zur -/+ Pill-Gruppe (rmd-qty-enh); ohne JS bleibt das Feld */
.rmd-summary .quantity{margin:0}
.rmd-summary .quantity input.qty{width:64px;height:var(--btn-height-lg);box-sizing:border-box;padding:0 8px;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);text-align:center;font-size:16px}
.rmd-summary .quantity.rmd-qty-enh{display:inline-flex;align-items:center;border:1.5px solid var(--color-border);border-radius:var(--radius-pill);overflow:hidden;height:var(--btn-height-lg)}
.rmd-summary .quantity.rmd-qty-enh input.qty{width:40px;height:100%;border:none;border-radius:0;padding:0;text-align:center;font-family:var(--font-head);font-weight:700;background:transparent;-moz-appearance:textfield}
.rmd-summary .quantity.rmd-qty-enh input.qty::-webkit-outer-spin-button,.rmd-summary .quantity.rmd-qty-enh input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn{width:var(--btn-height-lg);height:100%;border:0;background:transparent;box-shadow:none;cursor:pointer;font-family:var(--font-head);font-size:var(--fs-lg);line-height:1;color:var(--color-headline);display:flex;align-items:center;justify-content:center;transition:background .12s}
.rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn:hover{background:var(--color-surface);color:var(--color-headline)}
.rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn:focus,.rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn:active{background:transparent;box-shadow:none;outline:none}
.rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn:focus-visible{outline:2px solid var(--color-headline);outline-offset:-3px}
/* Lieferumfang + Zubehoer stehen jetzt im scope-Block (blocks.css: .rmd-c-scope). Die frueheren
   .rmd-included / .rmd-addons-Styles sind entfallen. Im simplen (Flex-)Formular braucht der Block
   eine eigene volle Zeile, sonst rutscht er in die Menge+Button-Zeile. */
.rmd-summary form.cart:not(.variations_form) .rmd-c-scope{flex:1 0 100%}
/* Mobil: die graue Scope-Karte aus dem 24px-Wrap ausbrechen (bis an den Bildschirmrand). Der Inhalt
   innen behaelt sein Padding und wird dadurch so breit wie die Karte vorher war - weniger gequetscht
   (Container-im-Container). -24px = exakt das Wrap-Seiten-Padding, also kein Ueberlauf/H-Scroll. */
@media(max-width:767px){
  .rmd-summary .rmd-c-scope{margin-left:-24px;margin-right:-24px;border-radius:0}
}

/* NUR die Menge+Button-Zeile ist Flex: bei simplen Produkten form.cart selbst, bei variablen
   die .woocommerce-variation-add-to-cart. form.cart.variations_form (enthaelt die Varianten-
   Kacheln) bleibt Block, sonst quetscht es Varianten + Menge + Button in eine Zeile. */
/* width:100% erzwingen: sonst kann der Flex-Container (v.a. bei variablen Produkten in
   .single_variation_wrap) auf Inhaltsbreite schrumpfen - dann hat der Button keinen freien
   Platz zum Fuellen und schliesst rechts nicht ab (genau der Bug). */
.rmd-summary form.cart:not(.variations_form),
.rmd-summary .woocommerce-variation-add-to-cart{display:flex!important;flex-wrap:wrap;align-items:center!important;gap:12px;width:100%!important;max-width:none!important;box-sizing:border-box!important}
/* Layout-Props mit !important, sonst ueberstimmt Kadence Breite/Hoehe. Fuellt die Zeile neben der Menge, gleiche Hoehe.
   FARBE kommt bewusst NICHT von hier: woocommerce.css faerbt .woocommerce button.button gelb
   (Spezifitaet 0-2-1) und schlaegt diese Regel (0-2-0) - beide !important. Der Warenkorb ist
   DER gelbe CTA der Buy-Box, der Test-CTA daneben ist dunkel. Hier nur Layout/Groesse, wo es
   keinen Konkurrenten gibt (height, flex, ...). */
.rmd-summary .single_add_to_cart_button{font-family:var(--font-head)!important;border:1.5px solid transparent!important;font-size:var(--fs-base)!important;font-weight:var(--fw-bold)!important;box-sizing:border-box!important;height:var(--btn-height-lg)!important;min-height:var(--btn-height-lg)!important;padding:0 var(--space-6)!important;line-height:1!important;border-radius:var(--radius-pill)!important;cursor:pointer;box-shadow:var(--shadow-cta);flex:1 1 0!important;width:auto!important;max-width:none!important;min-width:0!important;margin:0!important;float:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:var(--space-2)!important;white-space:nowrap!important}
.rmd-summary .single_add_to_cart_button.disabled,.rmd-summary .single_add_to_cart_button:disabled{opacity:.45;cursor:not-allowed}
/* Preis im Warenkorb-Button (per JS gesetzt): Trenner + Betrag, bricht nie um */
.rmd-summary .single_add_to_cart_button .rmd-atc-price{font-weight:var(--fw-bold);white-space:nowrap}
.rmd-summary .single_add_to_cart_button .rmd-atc-price::before{content:"-";margin-right:var(--space-2);opacity:.55}
/* Spinner-Kontrast: der Button ist gelb -> dunkler Spinner. */
.rmd-summary .single_add_to_cart_button.loading::after{border-color:rgba(13,16,18,.25);border-top-color:var(--color-on-signal)}
.rmd-summary p.stock{font-size:13.5px;color:var(--color-text-muted);margin:6px 0}
/* "Vorraetig" (WC in-stock) ausblenden - die echte Lieferzeit (Germanized 1-2 Wochen) ist die Quelle.
   Ausverkauft-Hinweis (.out-of-stock) bleibt sichtbar. */
.single-product .rmd-summary p.stock.in-stock,
.single-product .rmd-summary p.stock.available-on-backorder{display:none}


/* Varianten-Bereich buendig links (kein Einzug) - schliesst mit Titel/Preisbox ab */
.rmd-summary .rmd-varopts,
.rmd-summary .rmd-varopt,
.rmd-summary .rmd-varopt__tiles,
.rmd-summary .single_variation_wrap,
.rmd-summary form.cart{margin-left:0;padding-left:0;border:0}

/* Mobil (Vorlage: Shopify-Stil): Menge kompakt links, Warenkorb-Button fuellt den Rest bis zur
   Kante MIT Preis, Test-CTA volle Breite darunter. Alle 52px hoch. */
@media(max-width:767px){
  .rmd-summary form.cart:not(.variations_form),
  .rmd-summary .woocommerce-variation-add-to-cart{flex-wrap:nowrap!important;gap:10px!important}
  /* scope-Block im selben Formular (simples Produkt): volle Zeile, darunter Menge+Button. */
  .rmd-summary form.cart:not(.variations_form):has(.rmd-c-scope){flex-wrap:wrap!important}

  /* Mengen-Stepper: kompakt (ca. 90px), deutlich schmaler als der Button. */
  .rmd-summary .quantity,
  .rmd-summary .quantity.rmd-qty-enh{flex:0 0 auto!important;width:auto!important;height:var(--btn-height-sm)!important}
  .rmd-summary .quantity.rmd-qty-enh .rmd-qty-btn{width:32px!important;font-size:var(--fs-md)!important}
  .rmd-summary .quantity.rmd-qty-enh input.qty{width:26px!important;font-size:var(--fs-sm)!important}
  .rmd-summary .quantity input.qty{width:52px!important;height:var(--btn-height-sm)!important}

  /* Warenkorb-Button fuellt bis zur Kante (flex-basis:0, unabhaengig von der Textbreite).
     Preis bleibt sichtbar - der Platz reicht auf gaengigen Handys (>= 360px). */
  .rmd-summary form.cart:not(.variations_form) .single_add_to_cart_button,
  .rmd-summary .woocommerce-variation-add-to-cart .single_add_to_cart_button{
    flex:1 1 0!important;width:auto!important;
    height:var(--btn-height-sm)!important;min-height:var(--btn-height-sm)!important;
    font-size:var(--fs-sm)!important;padding:0 var(--space-3)!important}

  /* Test-CTA volle Breite darunter. Schatten gezaehmt (auf Schwarz liest --shadow-cta viel
     kraeftiger als auf Gelb - sonst wirkt der Test-CTA breiter). */
  .rmd-c-testcta{height:var(--btn-height-sm)!important;font-size:var(--fs-sm)!important;box-shadow:var(--shadow-sm)!important}
}
/* Mobil: Preis im Warenkorb-Button ausblenden. Neben der Mengen-Box bleibt zu wenig Breite -
   "In den Warenkorb - 1.959,00 EUR" liefe sonst ueber den Button (und Umbruch ist unerwuenscht).
   Der Preis steht ohnehin prominent oben in der Pricebox. Button zeigt mobil nur "In den Warenkorb". */
@media(max-width:767px){
  .rmd-summary .single_add_to_cart_button .rmd-atc-price{display:none!important}
}



/* Trust-Band (4 Kennzahlen) */
.rmd-trustband{background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);margin-top:48px}
.rmd-trustband .rmd-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:32px 24px}
.rmd-trustband .item{text-align:center}
.rmd-trustband .num{font-family:var(--font-head);font-size:25px;font-weight:700;color:var(--color-headline)}
.rmd-trustband .lbl{font-size:13.5px;color:var(--color-text-muted);margin-top:3px}

/* After-Summary: Beschreibung (links 50%) | Eigenschaften-Accordion (rechts 50%) */
.rmd-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;padding:48px 0}
.rmd-details__desc{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)}
.rmd-details__desc h2{font-family:var(--font-head);font-size:26px;font-weight:700;color:var(--color-headline);margin:0 0 16px}
.rmd-details__desc p{color:var(--color-text-muted);margin:0 0 12px;line-height:1.65}
.rmd-details__desc p:last-child{margin-bottom:0}
.rmd-details__specs .rmd-c-faq{max-width:none}
.rmd-details__specs .rmd-c-faq__item{border-radius:var(--radius)}
.rmd-details table.shop_attributes,.rmd-details table.woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:14px}
.rmd-details table.shop_attributes th{text-align:left;font-family:var(--font-head);font-weight:600;color:var(--color-headline);padding:8px 12px 8px 0;width:45%}
.rmd-details table.shop_attributes td{padding:8px 0;color:var(--color-text-muted)}
.rmd-details table.shop_attributes tr+tr th,.rmd-details table.shop_attributes tr+tr td{border-top:1px solid var(--color-border)}
.rmd-dl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rmd-dl a{color:var(--color-headline);font-weight:500;text-decoration:underline}

/* Extra-Content-Sektionen (Kategorie-Content via bestehende Komponenten) */
.rmd-sec-head{max-width:640px;margin-bottom:var(--space-8)}
.rmd-sec-head h2{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:700;color:var(--color-headline);letter-spacing:-.01em;margin:0 0 12px}
.rmd-sec-head .lead{font-size:var(--fs-md);color:var(--color-text-muted);margin:0}
.rmd-svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.rmd-svc__ico{display:inline-flex;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--color-surface);align-items:center;justify-content:center;margin-bottom:var(--space-4)}
.rmd-svc__ico svg{width:21px;height:21px;stroke:var(--color-headline);fill:none}
.rmd-svc h4{font-family:var(--font-head);font-size:var(--fs-base);margin:0 0 6px;color:var(--color-headline)}
.rmd-svc p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}
@media(max-width:900px){.rmd-svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.rmd-svc-grid{grid-template-columns:1fr}}

/* Benefit-Karten (Zahl aus Attribut + Nutzen-Text) */
.rmd-bg3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rmd-bc__sub{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted)}
.rmd-bc__big{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:var(--fw-bold);color:var(--color-headline);margin:5px 0 2px;line-height:1.12}
.rmd-bc h4{font-family:var(--font-head);font-size:var(--fs-md);margin:12px 0 6px;color:var(--color-headline)}
.rmd-bc p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* Beschreibung (gerahmte Karte, nicht mehr verloren) */
.rmd-desc{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8);max-width:900px}
.rmd-desc p{color:var(--color-text-muted);margin:0 0 var(--space-3);line-height:1.7}
.rmd-desc p:last-child{margin-bottom:0}

/* Technische Daten in 4 Gruppen */
.rmd-specs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.rmd-spc{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.rmd-spc h4{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-head);color:var(--color-headline);margin:0 0 var(--space-4);padding-bottom:11px;border-bottom:2px solid var(--color-signal);display:inline-block}
.rmd-spc dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0}
.rmd-spc dt{font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-spc dd{font-size:var(--fs-sm);font-weight:var(--fw-medium);text-align:right;margin:0;color:var(--color-text)}

/* Datenblatt-Downloads */
.rmd-dls{display:flex;gap:12px;margin-top:var(--space-6);flex-wrap:wrap}
.rmd-dl-btn{display:inline-flex;align-items:center;gap:9px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:12px;padding:13px 18px;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-dl-btn:hover{border-color:var(--color-headline)}
.rmd-dl-btn svg{width:17px;height:17px;stroke:var(--color-headline);fill:none}

@media(max-width:900px){.rmd-bg3,.rmd-specs{grid-template-columns:1fr}}

/* Mobil feinere Buy-Box-Typo (diese Werte sind hartcodiert, nicht token-basiert) */
@media(max-width:767px){
  .rmd-summary .product_title,.rmd-summary h1.product_title{font-size:22px}
  .rmd-benefit{font-size:14.5px}
}

/* Reviews (Platzhalter, spaeter Wiser Review) */
.rmd-ph-flag{background:var(--color-signal-soft);border-left:3px solid var(--color-signal);padding:6px 12px;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-headline);display:inline-block;border-radius:0 6px 6px 0;margin-bottom:var(--space-6)}
.rmd-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rmd-rev__stars{color:var(--color-star);font-size:var(--fs-md);margin-bottom:9px;letter-spacing:1px}
.rmd-rev p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0 0 12px;line-height:1.6}
.rmd-rev__who{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-rev__who span{font-family:var(--font-body);font-weight:var(--fw-regular);color:var(--color-text-muted)}

/* Related Products (native, ueber woocommerce.css-Loop gestylt) */
.rmd-related{padding-top:var(--space-16);padding-bottom:var(--space-8)}
.rmd-related .related.products>h2,.rmd-related h2{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:700;color:var(--color-headline);letter-spacing:-.01em;margin:0 0 var(--space-6)}

@media(max-width:900px){.rmd-revs{grid-template-columns:1fr}}

/* Fokus-Sichtbarkeit (A11y) */
.rmd-product a:focus-visible,.rmd-product button:focus-visible,.rmd-product summary:focus-visible{outline:3px solid var(--color-signal-hover);outline-offset:2px}

/* Responsive */
@media(max-width:900px){
  /* minmax(0,1fr), NICHT 1fr: "1fr" ist die Kurzform von minmax(AUTO,1fr) - die Spalte duerfte
     dann nie schmaler werden als der min-content ihres breitesten Kindes. Ein nowrap-Preis oder
     ein langes Wort in der Buy-Box zieht damit die ganze Spalte ueber den Bildschirmrand, und
     ALLES darin laeuft mit raus. Die Desktop-Regel (Zeile 16) macht es schon richtig. */
  .rmd-product-top{grid-template-columns:minmax(0,1fr);gap:32px}
  .rmd-gallery-col{position:static}
  .rmd-summary .product_title{font-size:27px}
  .rmd-trustband .rmd-wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .rmd-details{grid-template-columns:1fr;gap:24px;padding:32px 0}
}

/* ===== Extra-Content-Platzhalter (einheitliche PDP-Zone) ===== */
.rmd-extra-ph{border:2px dashed var(--color-border-strong);border-radius:var(--radius-lg);padding:var(--space-12) var(--space-8);text-align:center;background:var(--color-surface)}
.rmd-extra-ph__tag{display:inline-block;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);background:var(--color-signal-soft);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);margin-bottom:var(--space-4)}
.rmd-extra-ph h3{font-family:var(--font-head);font-size:var(--fs-xl);color:var(--color-headline);margin:0 0 var(--space-2)}
.rmd-extra-ph p{font-size:var(--fs-base);color:var(--color-text-muted);max-width:var(--container-narrow);margin:0 auto}

/* Befestigungen/Zubehoer nutzen jetzt die generischen Bloecke slider + tile (assets/css/blocks.css). */