/* 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}

/* Track + Slides: NATIVER horizontaler Scroll-Snap (kein Transform/Custom-Drag mehr). Auf Chrome-Mobil
   zuverlaessig - horizontal wischt die Galerie, vertikal scrollt die Seite; alles vom Browser gehandhabt.
   Scrollleiste versteckt. scroll-snap-stop:always = pro Wisch genau ein Bild. */
.rmd-gal-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.rmd-gal-track::-webkit-scrollbar{display:none}
.rmd-gal-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;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 filigran (Handoff 2b): nur Chevron, kein Hintergrund/Rahmen/Schatten, halbtransparent dunkel,
   Hover voll. Rand-Abstand = --space-4 (16px), konsistent mit den Dots. Am jeweiligen Ende ausgeblendet. */
.rmd-gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:56px;padding:0;border:none;background:transparent;box-shadow:none;color:rgba(13,16,18,.4);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s,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:hover:not(:disabled),.rmd-gal-nav:focus-visible{color:var(--color-headline)}
.rmd-gal-nav:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px;border-radius:var(--radius)}
.rmd-gal-nav svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;filter:none}
.rmd-gal-nav.prev{left:var(--space-4)}
.rmd-gal-nav.next{right:var(--space-4)}
.rmd-gal-nav:disabled{opacity:0;pointer-events:none}

/* Badges */
.rmd-gal-badge{position:absolute;top:14px;left:14px;background:var(--color-signal);color:var(--color-headline);font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.01em;padding:4px 9px;border-radius:999px;z-index:5}
.rmd-gal-badge.sale{left:auto;right:16px;background:var(--color-headline);color:#fff}
/* Marken-Badge auf der Galerie (Original-SIS-Logo bzw. ESD, per Code - Zeichen aus dem Bild entfernt).
   Sitzt IM ersten Slide (position:relative dort) und scrollt beim Weiterblaettern mit aus dem Bild - so
   nur am ersten Bild sichtbar. Oben rechts, wie das Original; bei Sale-Pille (auf der Stage) darunter. */
.rmd-gal-slide{position:relative}
/* Hoehere Spezifitaet noetig: .rmd-gal-slide img (Produktbild, width:100%) wuerde den Badge sonst auf
   volle Bildgroesse aufblasen. img.rmd-brandbadge--pdp (0,2,1) schlaegt .rmd-gal-slide img (0,1,1). */
.rmd-gal-slide img.rmd-brandbadge--pdp{position:absolute;top:14px;right:14px;width:52px;height:52px;object-fit:contain;z-index:6;pointer-events:none;user-select:none}
.rmd-gal-stage:has(.rmd-gal-badge.sale) .rmd-gal-slide img.rmd-brandbadge--pdp{top:56px}
@media(max-width:767px){.rmd-gal-slide img.rmd-brandbadge--pdp{width:44px;height:44px}}

/* 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)}

/* Freie Dots (Handoff 2b): UNTER dem Bild, zentriert - ohne Pille/Hintergrund. Inaktiv = kleiner Punkt,
   aktiv = breite Pille. Ruhezustand halbtransparent, beim Scrollen voll (.is-scrolling). Nur mobil
   sichtbar (ersetzen dort die Thumbnails). Abstand nach oben = --space-4 (16px). */
.rmd-gal-dots{display:none}
.rmd-gal-dots__track{display:flex;align-items:center;gap:6px}
.rmd-gal-dots button{width:auto;height:auto;flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;display:block;line-height:0}
.rmd-gal-dots button::before{content:"";display:block;width:5px;height:5px;border-radius:var(--radius-pill);background:rgba(13,16,18,.28);transition:width .22s ease,background .22s ease}
.rmd-gal-dots button.active::before{width:20px;background:rgba(13,16,18,.92)}
.rmd-gal-dots button:focus-visible{outline:2px solid var(--color-headline);outline-offset:3px;border-radius:var(--radius-pill)}
@media(max-width:767px){
  .rmd-gal-thumbs{display:none}
  /* Mobil keine Pfeile - Wischen + Dots reichen. */
  .rmd-gal-nav{display:none}
  /* UNTER dem Bild, zentriert (nicht als Overlay). Beim Scrollen voll, sonst dezent. */
  .rmd-gal-dots{display:flex;justify-content:center;margin:var(--space-4) auto 0;opacity:.6;transition:opacity .25s ease}
  .rmd-gal.is-scrolling .rmd-gal-dots{opacity:1}
}

/* ---- Farb-Pill auf dem Galeriebild (NUR mobil) ----
   Farbwahl direkt am Bild, weil die Variantenauswahl auf dem Handy weit unten liegt. Unten LINKS,
   Punkte VERTIKAL gestapelt. Auf Desktop ausgeblendet (dort steht die Auswahl neben dem Bild).
   JS: assets/js/single-product.js (rmdColorPill). */
.rmd-gal-swatchpill{display:none}
@media(max-width:767px){
  .rmd-gal-swatchpill{position:absolute;left:12px;bottom:12px;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--color-bg);border-radius:var(--radius-pill);padding:9px 7px;box-shadow:var(--shadow-lg)}
  /* Duenner grauer Rand auf ALLEN Punkten (border-box, damit 20px erhalten bleiben) - macht v.a. den
     WEISSEN Swatch auf dem weissen Pill-Grund sichtbar; bei dunklen Farben faellt er nicht auf. */
  .rmd-gal-swatchpill__dot{width:20px;height:20px;border-radius:50%;border:1px solid rgba(13,16,18,.22);box-sizing:border-box;padding:0;cursor:pointer;flex:none;transition:box-shadow .15s ease,transform .12s ease}
  .rmd-gal-swatchpill__dot.is-selected{box-shadow:0 0 0 1.5px var(--color-bg),0 0 0 3px var(--color-text)}
  .rmd-gal-swatchpill__dot:active{transform:scale(.92)}
  .rmd-gal-swatchpill__dot:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}
}
@media(prefers-reduced-motion:reduce){.rmd-gal-swatchpill__dot{transition:none}}

/* ---- 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). */
/* H1 Produktname fuehrt die Hierarchie: --fs-4xl 42/27, --fw-head 700/600. */
.rmd-summary .product_title,.rmd-summary h1.product_title{font-size:var(--fs-4xl);font-weight:var(--fw-head);letter-spacing:-.03em;line-height:1.1;margin:0 0 8px}
.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: generisches Styling liegt jetzt im skubox-Block (blocks.css, .rmd-skubox).
   Hier nur der PDP-Kontext-Override: 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%}

/* 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}
/* FOUC-Schutz: die native Varianten-Tabelle SOFORT a11y-verstecken, sobald JS an ist (Klasse html.rmd-js
   wird per Inline-Head-Script gesetzt, greift also schon beim ersten Paint) - so blitzen beim Laden keine
   Dropdowns mehr auf, bevor die Kacheln gebaut sind. Ohne JS (kein .rmd-js) bleiben die Dropdowns sichtbar.
   Sicherheitsnetz .rmd-var-fallback: falls die Kacheln nicht kommen (JS-Fehler/zu langsam), Dropdowns
   wieder einblenden, damit man immer waehlen kann. */
html.rmd-js .rmd-summary form.variations_form 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}
html.rmd-js .rmd-summary form.variations_form.rmd-var-fallback table.variations{position:static!important;width:100%;height:auto;margin:0 0 16px;clip:auto;overflow:visible}
.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}
/* Gewaehlter Wert wird NICHT mehr rechts neben dem Label angezeigt (Kundenwunsch): die aktive Kachel
   zeigt die Auswahl; so entsteht dort global nie ein Umbruch. */
.rmd-varopt__cur{display:none}
.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}

/* ===== Buy-Box Redesign (Handoff 4a): Fortschritts-Chips, Aufpreis-Zeile, Hinweiszeile ===== */
/* Fortschritts-Chips unter dem Preis: je Pflicht-Attribut ein Chip, bei Auswahl gruener Haken. */
.rmd-summary .rmd-steps{display:flex;gap:8px;margin:6px 0 18px}
.rmd-summary .rmd-step{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--color-surface);border-radius:12px;padding:8px 10px;transition:background .2s ease}
.rmd-summary .rmd-step.is-done{background:var(--color-success-bg)}
.rmd-summary .rmd-step__num{width:18px;height:18px;border-radius:50%;background:var(--color-headline);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--font-head);font-weight:700;font-size:10px;line-height:1}
.rmd-summary .rmd-step.is-done .rmd-step__num{background:var(--color-success);font-size:0;position:relative}
.rmd-summary .rmd-step.is-done .rmd-step__num::after{content:"";position:absolute;width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.rmd-summary .rmd-step__body{display:flex;flex-direction:column;min-width:0;gap:1px}
/* Variantenname FETT -> klare Abgrenzung zum gewaehlten Wert darunter. */
.rmd-summary .rmd-step__label{font-family:var(--font-head);font-size:12px;font-weight:700;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Gewaehlter Wert im Chip: leise, einzeilig mit Ellipsis; leer -> versteckt (Chip bleibt einzeilig). */
.rmd-summary .rmd-step__val{font-size:11px;line-height:1.2;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmd-summary .rmd-step__val:empty{display:none}
/* Options-Kacheln: Auswahl (Label) oben, direkt darunter der Wert - KEIN Trennstrich. "im Grundpreis"
   UND der Aufpreis sind gleich gedaempft (grau, leise). Aktiv = gefuellt statt Doppel-Rand. */
.rmd-tile:not(.rmd-tile--swatch){display:flex;flex-direction:column;gap:2px}
.rmd-tile:not(.rmd-tile--swatch) .rmd-tile__t{font-size:14px;font-weight:var(--fw-semibold)}
.rmd-tile__sub{font-size:13px;line-height:1.2;color:var(--color-text-muted);font-weight:var(--fw-regular)}
.rmd-tile.is-active{border-color:var(--color-headline);background:var(--color-surface);box-shadow:none}
/* Hinweiszeile "Bitte noch waehlen: ..." unter der Warenkorb-Zeile. */
.rmd-summary .rmd-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;font-size:13px;color:var(--color-text-muted)}
.rmd-summary .rmd-hint[hidden]{display:none}
.rmd-summary .rmd-hint svg{flex:none}

/* 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}
/* Ausgegraut bis vollstaendige Auswahl: pale-gelb + gedaempfter Text (Handoff), nicht nur Deckkraft.
   Enabled bleibt das Signal-Gelb aus woocommerce.css. Braucht !important + >=0-3-0 (schlaegt 0-2-1). */
.rmd-summary .single_add_to_cart_button.disabled,.rmd-summary .single_add_to_cart_button:disabled{background:#F7F3D8!important;color:#A9A582!important;opacity:1;box-shadow:none!important;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}
}




/* 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 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){
  /* Produkttitel-Groesse kommt aus --fs-4xl (mobil 27px) - kein Hardcode mehr. */
  .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}
  /* Produkttitel: Groesse via --fs-4xl (Token) - kein fixer Tablet-Wert mehr. */
  .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). */

/* Specs-Detail-CSS (.rmd-c-lightspecs* / .rmd-c-descspecs* / .rmd-tip*) liegt jetzt in
   assets/css/product-specs.css (geteilt mit dem Styleguide). Hier bleibt nur der PDP-Kontext-
   Ausreisser, den es dort NICHT geben soll. */
.rmd-product .rmd-cat-sec .rmd-c-section__title{
  font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:var(--fw-head);letter-spacing:-.02em;line-height:var(--lh-tight)}
/* Die FAQ-Panel-Headline war hier frueher auf --fs-5xl (56px) heruntergesetzt - dadurch sah die
   FAQ-Section auf der PDP anders aus als auf Kategorie-/Lichtwissen-/Anwendungsseiten (--fs-6xl,
   72px, so wie das Token es fuer die "Panel-Headline (FAQ)" vorgibt). Override entfernt -> EINE
   Groesse ueber alle Seiten. */

/* ===== Schienen-System-PLANER (.rmd-track--planner, Buy-Box bei Schienen-Systemen).
   Renderer inc/track-config.php, JS assets/js/track-config.js. ===== */
.rmd-track{margin-top:var(--space-6);background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-6)}
.rmd-track__head{margin-bottom:var(--space-5)}
.rmd-track__title{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-semibold);color:var(--color-headline);margin:var(--space-2) 0}
.rmd-track__hint{font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.5;color:var(--color-text-muted);margin:0}
.rmd-track__field-lbl{display:block;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline);margin:0 0 var(--space-3)}
.rmd-track__controls{display:flex;flex-direction:column;gap:var(--space-5);margin-bottom:var(--space-5)}
.rmd-track__dims{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.rmd-track__dim{display:flex;flex-direction:column;gap:5px;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-track__dim input{width:120px;height:44px;padding:0 14px;border:1.5px solid var(--color-field-border);border-radius:var(--radius-sm);font-family:var(--font-head);font-size:var(--fs-base);color:var(--color-headline);background:var(--color-bg)}
.rmd-track__dim input:focus{outline:none;border-color:var(--color-headline);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.rmd-track__shapes,.rmd-track__swatches{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.rmd-track__shape,.rmd-track__swatch{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:8px 15px;min-height:38px;border:1.5px solid var(--color-field-border);border-radius:var(--radius-pill);background:var(--color-bg);color:var(--color-text);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.rmd-track__shape:hover,.rmd-track__swatch:hover{border-color:var(--color-headline)}
.rmd-track__shape.is-active,.rmd-track__swatch.is-active{background:var(--color-headline);border-color:var(--color-headline);color:#fff}
.rmd-track__canvas{background:var(--color-bg);border-radius:var(--radius);padding:var(--space-4);margin-bottom:var(--space-3)}
.rmd-track__svg{width:100%;height:auto;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.rmd-track__outlet{cursor:grab}
.rmd-track__outlet:active{cursor:grabbing}
.rmd-track__dimtxt{font-family:var(--font-head);font-size:12px;font-weight:600;fill:var(--color-text-muted)}
.rmd-track__leglbl{font-family:var(--font-head);font-size:11.5px;font-weight:700;fill:var(--color-headline)}
.rmd-track__svglbl{font-family:var(--font-head);font-size:13px;font-weight:700;fill:var(--color-headline)}
.rmd-track__note{font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.5;color:var(--color-text);margin:0 0 var(--space-3);font-weight:var(--fw-medium)}
.rmd-track__hintbox{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--color-info-bg);border-radius:var(--radius-sm);margin-bottom:var(--space-5)}
.rmd-track__hintbox svg{width:20px;height:20px;flex:0 0 20px;stroke:var(--color-headline);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.rmd-track__hintbox p{font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.5;color:var(--color-text);margin:0}
.rmd-track__hintbox b{font-weight:var(--fw-semibold)}
/* Lichtberechnung (Lux-Gauge auf 90cm-Nutzebene) */
.rmd-track__light{background:var(--color-bg);border-radius:var(--radius);padding:var(--space-5);margin-bottom:var(--space-5)}
.rmd-track__light:empty{display:none}
.rmd-track__lighthead{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.rmd-track__lighthead .rmd-track__field-lbl{margin:0}
.rmd-track__lightchip{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:3px 12px;border-radius:var(--radius-pill);white-space:nowrap}
.rmd-track__lightchip--lo{background:var(--color-surface);color:var(--color-text-muted)}
.rmd-track__lightchip--ok{background:var(--color-signal-soft);color:var(--color-on-signal)}
.rmd-track__lightchip--good{background:var(--color-signal);color:var(--color-on-signal)}
.rmd-track__lightchip--hi{background:var(--color-headline);color:#fff}
.rmd-track__lightval{font-family:var(--font-head);font-size:var(--fs-base);color:var(--color-text);margin-bottom:var(--space-4)}
.rmd-track__lightval b{font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--color-headline)}
.rmd-track__lightval span{display:block;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--color-text-muted);margin-top:2px}
.rmd-track__gauge{position:relative;height:10px;border-radius:var(--radius-pill);background:linear-gradient(90deg,#E6E7E8 0%,#FFF89D 30%,#FFEA76 55%,#F0D94A 80%,#17191B 100%)}
.rmd-track__gaugefill{display:none}
.rmd-track__gaugemark{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--color-headline);transform:translate(-50%,-50%);box-shadow:var(--shadow-sm)}
.rmd-track__gaugescale{display:flex;justify-content:space-between;font-family:var(--font-head);font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:6px}
.rmd-track__lightnote{font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.5;color:var(--color-text-muted);margin-top:var(--space-3)}
.rmd-track__bomhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.rmd-track__bomhead .rmd-track__field-lbl{margin:0}
.rmd-track__reset{background:none;border:none;cursor:pointer;padding:0;font-family:var(--font-body);font-size:var(--fs-xs);color:var(--color-text-muted);text-decoration:underline}
.rmd-track__reset:hover{color:var(--color-text)}
.rmd-track__summary{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text-muted);margin:6px 0 var(--space-4)}
.rmd-track__bom{display:flex;flex-direction:column}
.rmd-track__bomrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-3);align-items:center;padding:var(--space-3) 0;border-top:1px solid var(--color-hairline)}
.rmd-track__bomrow:first-child{border-top:none}
.rmd-track__bominfo{min-width:0}
.rmd-track__bomname{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-headline);line-height:1.3}
.rmd-track__bommeta{font-family:var(--font-body);font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:2px}
.rmd-track__bomsku{font-family:var(--font-head);font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:2px;letter-spacing:.02em}
.rmd-track__bomsku b{color:var(--color-text);font-weight:var(--fw-semibold)}
.rmd-track__qty{display:inline-flex;align-items:center;border:1.5px solid var(--color-field-border);border-radius:var(--radius-pill);background:var(--color-bg);overflow:hidden}
.rmd-track__qty button{width:32px;height:34px;border:0;background:transparent;cursor:pointer;font-family:var(--font-head);font-size:var(--fs-md);color:var(--color-headline);display:flex;align-items:center;justify-content:center}
.rmd-track__qty button:hover{background:var(--color-surface)}
.rmd-track__qtyval{width:32px;text-align:center;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-text)}
.rmd-track__bomtotal{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-headline);white-space:nowrap;text-align:right;min-width:76px}
.rmd-track__more{background:none;border:none;cursor:pointer;padding:var(--space-3) 0 0;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.rmd-track__more:hover{color:var(--color-text)}
.rmd-track__foot{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-hairline)}
.rmd-track__sum{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.rmd-track__sum-lbl{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-track__sum-lbl small{display:block;font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--color-text-muted);margin-top:2px}
.rmd-track__sum strong{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:var(--fw-bold);letter-spacing:-.02em;color:var(--color-headline);white-space:nowrap}
.rmd-track__btn{width:100%;min-height:var(--btn-height-lg);border:none;border-radius:var(--radius-pill);cursor:pointer;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-base);background:var(--color-signal);color:var(--color-on-signal);box-shadow:var(--shadow-cta);transition:background .15s ease}
.rmd-track__btn:hover{background:var(--color-signal-hover)}
.rmd-track__msg{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-error);margin:var(--space-2) 0 0}

/* ===== Planer-Trigger in der Buy-Box (Schienen-Systeme). Die Produktseite bleibt Standard
   (Preis/Varianten/Warenkorb sichtbar); dieser Button oeffnet den Planer als Sidebar/Drawer.
   Optik/Hover = Dark-Button (wie .rmd-c-btn--dark: Text bleibt hell), Pfeil wandert rechts. ===== */
.rmd-track-cta{margin-top:var(--space-4)}
.rmd-track-open{display:flex;align-items:center;gap:var(--space-4);width:100%;text-align:left;cursor:pointer;
  padding:var(--space-4) var(--space-4);border:1.5px solid var(--btn-dark-bg);border-radius:var(--radius-card);
  background:var(--btn-dark-bg);color:var(--btn-dark-text);transition:background .15s ease,border-color .15s ease,transform .1s ease}
/* Woo/Kadence faerben <button> im .woocommerce-Kontext bei :focus/:active gelb (teils !important);
   nach dem Schliessen des Drawers kehrt der Fokus HIERHER zurueck (dialog.rmdOpener.focus()) -> Button
   wurde gelb. Farbe daher in ALLEN Zustaenden hart auf Dunkel pinnen (wie .rmd-c-testcta). Der einzige
   Signal-Traeger bleibt der Warenkorb-Button. */
.rmd-track-open,.rmd-track-open:focus,.rmd-track-open:active,.rmd-track-open:focus-visible{background:var(--btn-dark-bg)!important;color:var(--btn-dark-text)!important;border-color:var(--btn-dark-bg)!important}
.rmd-track-open:hover{background:var(--btn-dark-bg-hover)!important;border-color:var(--btn-dark-bg-hover)!important}
.rmd-track-open:active{transform:translateY(1px)}
.rmd-track-open:focus:not(:focus-visible){outline:none}
.rmd-track-open:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px}
.rmd-track-open__icon{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius);background:var(--color-signal);color:var(--color-on-signal)}
.rmd-track-open__icon svg{width:22px;height:22px}
.rmd-track-open__txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rmd-track-open__txt strong{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-base);line-height:1.2;color:var(--btn-dark-text)}
.rmd-track-open__txt small{font-family:var(--font-body);font-size:var(--fs-xs);line-height:1.35;color:rgba(255,255,255,.72)}
.rmd-track-open__arrow{flex:0 0 auto;color:rgba(255,255,255,.7)}
.rmd-track-open__arrow svg{width:20px;height:20px;display:block;transition:transform .18s ease}
.rmd-track-open:hover .rmd-track-open__arrow svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .rmd-track-open__arrow svg{transition:none}
  .rmd-track-open:hover .rmd-track-open__arrow svg{transform:none}
}

/* ===== Planer als Drawer/Sidebar (<dialog> via showModal). Desktop: rechts angedockt, volle Hoehe,
   breit genug fuer die Planung. Mobil (<=600px): Vollbild. Schliess-X oben, wie Lichtberatung/Test. */
.rmd-track-modal{position:fixed;inset:0 0 0 auto;margin:0;height:100dvh;max-height:100dvh;
  width:min(620px,100vw);max-width:100vw;padding:0;border:none;border-radius:0;
  background:var(--color-surface);color:var(--color-text);box-shadow:-24px 0 64px rgba(0,0,0,.28);
  overflow:auto;overscroll-behavior:contain}
.rmd-track-modal::backdrop{background:rgba(20,22,24,.55)}
.rmd-track-modal:not([open]){display:none}
.rmd-track-modal[open]{animation:rmd-track-drawer-in .28s cubic-bezier(.22,.61,.36,1)}
.rmd-track-modal[open]::backdrop{animation:rmd-track-drawer-fade .28s ease}
@keyframes rmd-track-drawer-in{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes rmd-track-drawer-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .rmd-track-modal[open]{animation:none}
  .rmd-track-modal[open]::backdrop{animation:none}
}
/* Schliess-X exakt wie im Consultation-Popup (.rmd-c-consultation__close): position:fixed am
   oberen rechten Drawer-/Viewport-Rand, bleibt beim Scrollen sichtbar. */
.rmd-track-modal__close{position:fixed;top:var(--space-4);right:var(--space-4);z-index:5;
  width:var(--space-10);height:var(--space-10);display:flex;align-items:center;justify-content:center;cursor:pointer;
  border:0;border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-headline)}
.rmd-track-modal__close .rmd-icon,.rmd-track-modal__close svg{width:var(--space-5);height:var(--space-5);stroke:currentColor;fill:none}
.rmd-track-modal__close:focus-visible{outline:thin solid var(--color-headline);outline-offset:var(--space-1)}
.rmd-track-modal__close:hover,.rmd-track-modal__close:focus,.rmd-track-modal__close:active{background:var(--color-border);color:var(--color-headline)}
/* Der Planer sitzt im Drawer - eigene Karte-Optik zuruecknehmen, grosszuegiges Padding (oben/unten/
   seitlich). HINWEIS: --space-7/--space-9 existieren NICHT (Scale: 1-6,8,10) - nur gueltige Tokens. */
.rmd-track-modal .rmd-track{margin-top:0;background:transparent;padding:var(--space-10) var(--space-8) var(--space-10)}
@media(max-width:600px){
  .rmd-track-modal .rmd-track{padding:var(--space-10) var(--space-5) var(--space-8)}
  .rmd-track-open{gap:var(--space-3);padding:var(--space-3)}
}
@media(max-width:480px){
  .rmd-track__dim input{width:100%}
  .rmd-track__dim{flex:1 1 130px}
  .rmd-track__bomtotal{min-width:64px}
}