/* rmd-kadence-child/assets/css/components.css
   Styling der Basis-Komponenten. NUR Tokens aus tokens.css - keine Roh-Werte, keine Magic Numbers.
   Breakpoints (dokumentiert, da CSS-Vars in @media nicht moeglich): Tablet 1024px, Mobile 767px. */

/* ===== Globale Basis (Design-System) ===== */
body{font-family:var(--font-body);color:var(--color-text);line-height:var(--lh-normal);background:var(--color-page)}
/* Fliesstext-Links: dunkelgrau statt Kadence-Blau. 'body a' (Spezifitaet 0,1,1) schlaegt Kadences
   'a'/'a:hover'; Chrome (Nav/Footer/Buttons) nutzt klassenbasierte Selektoren und bleibt unberuehrt. */
body a{color:var(--color-link)}
body a:hover,body a:focus{color:var(--color-link-hover)}

/* ===== Layout-Grundlagen ===== */
.rmd-container{max-width:var(--container);margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}
.rmd-container.is-wide{max-width:var(--container-wide)}
.rmd-container.is-narrow{max-width:var(--container-narrow)}

.rmd-c-section--bg-alt{background:var(--color-surface)}
.rmd-c-section--bg-dark{background:var(--color-text);color:var(--color-bg)}
.rmd-c-section--bg-dark h1,.rmd-c-section--bg-dark h2,.rmd-c-section--bg-dark h3{color:var(--color-bg)}
/* Sektions-Rhythmus (Bauregel 6): default = --space-section. Weissraum ist das Wertigkeits-
   Signal. 'sm' bleibt fuer Baender/Zwischenstuecke, die bewusst keine volle Sektion sind. */
.rmd-c-section--pad-default{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.rmd-c-section--pad-lg{padding-top:var(--space-section);padding-bottom:var(--space-section)}
.rmd-c-section--pad-sm{padding-top:var(--space-12);padding-bottom:var(--space-12)}

.rmd-c-eyebrow{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);display:inline-flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.rmd-c-eyebrow::before{content:"";width:var(--space-6);height:3px;background:var(--color-signal);border-radius:2px}

/* ===== Button =====
   Varianten: primary (gelb, DER eine Signal-Traeger) | ghost (Haarlinien-Rand statt schwarzem
   Kasten) | dark (dunkle Flaeche, Sekundaer-CTA) | text (Inline-Link mit gelbem Strich).
   'secondary' (schwarzer Rahmen) und 'neutral' (graue Flaeche) sind ersatzlos entfallen -
   siehe design-system.md, Bauregeln. */
.rmd-c-btn{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);height:var(--btn-height);padding:0 var(--space-6);border-radius:var(--radius-pill);border:1.5px solid transparent;box-sizing:border-box;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s,border-color .15s;line-height:1}
.rmd-c-btn svg,.rmd-c-btn .rmd-icon{width:16px;height:16px;stroke:currentColor;fill:none}
/* WICHTIG: jede :hover-Regel MUSS die Textfarbe mitsetzen. Sonst greift body a:hover
   (Spezifitaet 0-1-2) und faerbt den Button-Text grau (--color-link-hover) - beim dunklen
   Button weisser Text -> grau auf dunkel, der "schlimme" Hover. Variante:hover ist 0-2-0
   und schlaegt body a:hover. */
.rmd-c-btn--primary{background:var(--color-signal);color:var(--color-on-signal);box-shadow:var(--shadow-cta)}
.rmd-c-btn--primary:hover{background:var(--color-signal-hover);color:var(--color-on-signal)}
.rmd-c-btn--ghost{background:transparent;color:var(--color-headline);border-color:var(--color-hairline)}
.rmd-c-btn--ghost:hover{border-color:var(--color-headline);color:var(--color-headline);background:var(--color-surface)}
.rmd-c-btn--dark{background:var(--btn-dark-bg);color:var(--btn-dark-text)}
.rmd-c-btn--dark:hover{background:var(--btn-dark-bg-hover);color:var(--btn-dark-text)}
/* text: kein Button-Koerper, nur Label + gelber Strich darunter (Bauregel 4) */
.rmd-c-btn--text{height:auto;padding:0;border:none;border-radius:0;background:transparent;color:var(--color-headline);position:relative}
.rmd-c-btn--text::after{content:"";position:absolute;left:0;right:var(--space-6);bottom:-4px;height:3px;background:var(--color-signal);border-radius:2px;transition:right .18s}
/* Hover: Farbe halten (sonst greift body a:hover) + der gelbe Strich zieht bis unters Wortende */
.rmd-c-btn--text:hover{background:transparent;color:var(--color-headline)}
.rmd-c-btn--text:hover::after{right:0}
.rmd-c-btn[disabled],.rmd-c-btn.is-disabled{opacity:.4;pointer-events:none}
.rmd-c-btn:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px}
/* Ghost auf dunklem Panel: Haarlinie umdrehen, sonst ist der Rand unsichtbar */
.rmd-c-section--bg-dark .rmd-c-btn--ghost,.rmd-c-cta .rmd-c-btn--ghost,.rmd-c-faq .rmd-c-btn--ghost{border-color:var(--color-hairline-dark);color:var(--color-on-dark)}
.rmd-c-section--bg-dark .rmd-c-btn--ghost:hover,.rmd-c-cta .rmd-c-btn--ghost:hover,.rmd-c-faq .rmd-c-btn--ghost:hover{border-color:var(--color-on-dark);color:var(--color-on-dark);background:transparent}

/* Lade-Zustand fuer Warenkorb-Buttons (WC setzt .loading beim AJAX-Add; PDP via header.js).
   Text verschwindet, ein Spinner dreht - der Kunde sieht sofort, dass etwas passiert. */
.add_to_cart_button.loading,.single_add_to_cart_button.loading,.rmd-c-btn.loading{color:transparent!important;pointer-events:none;position:relative}
.add_to_cart_button.loading::after,.single_add_to_cart_button.loading::after,.rmd-c-btn.loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(13,16,18,.25);border-top-color:var(--color-on-signal);border-radius:var(--radius-pill);animation:rmd-spin .7s linear infinite}
@keyframes rmd-spin{to{transform:rotate(360deg)}}

/* ===== Icon: rohes Inline-SVG (Helper rmd_icon) - Groesse via font-size, Farbe via currentColor ===== */
.rmd-icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:0 0 auto}

/* ===== Icon (Bauregel 3) =====
   BREAKING: war eine gerahmte Kachel auf Signal-Soft (44px Container um das SVG). Ist jetzt eine
   Klasse AUF dem SVG - duenne Outline, keine Kachel, Farbe ueber currentColor. Wer die Kachel
   sucht: sie ist ersatzlos weg, das war der Punkt. rmd_icon() bleibt unveraendert. */
.rmd-c-icon{stroke:currentColor;fill:none;stroke-width:1.4;display:block;flex:0 0 auto;color:var(--color-headline)}
.rmd-c-icon--sm{width:20px;height:20px;flex-basis:20px}
.rmd-c-icon--md{width:26px;height:26px;flex-basis:26px}
.rmd-c-icon--lg{width:34px;height:34px;flex-basis:34px}

/* ===== Mark: gelbe Unterstreichung EINES Wortes in der Headline (Bauregel 4) =====
   Der einzige zulaessige Gelb-Einsatz in einer Headline. Liegt per z-index HINTER dem Text,
   nicht dahinter als Flaeche - das Wort bleibt schwarz und lesbar. */
.rmd-c-mark{position:relative;display:inline-block;z-index:0}
.rmd-c-mark::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.08em;height:.32em;background:var(--color-signal);border-radius:2px;z-index:-1}

/* ===== Badge ===== */
.rmd-c-badge{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);display:inline-block;line-height:1.4}
.rmd-c-badge--signal{background:var(--color-signal);color:var(--color-headline)}
.rmd-c-badge--dark{background:var(--color-headline);color:var(--color-bg)}
.rmd-c-badge--soft{background:var(--color-signal-soft);color:var(--color-on-signal)}
/* 'line' war ein umrandeter Badge - Rahmen raus, Flaeche rein (Bauregel 1). Name bleibt,
   damit keine Aufrufstelle bricht; 'quiet' ist der sprechende Alias fuer denselben Stil. */
.rmd-c-badge--line,.rmd-c-badge--quiet{background:var(--color-surface);color:var(--color-text-muted)}

/* ===== Rating ===== */
.rmd-c-rating{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3)}
.rmd-c-rating__stars{color:var(--color-star);font-size:var(--fs-md);letter-spacing:1px}
.rmd-c-rating__txt{font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-c-rating__txt b{color:var(--color-text)}

/* ===== USP-Liste ===== */
.rmd-c-usps{list-style:none;margin:0 0 var(--space-6);padding:0;max-width:480px;display:flex;flex-direction:column;gap:0}
.rmd-c-usps li{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);font-weight:var(--fw-regular);padding:var(--space-4) 0;border-top:1px solid var(--color-hairline)}
.rmd-c-usps li:last-child{border-bottom:1px solid var(--color-hairline)}
.rmd-c-usps__ico{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.rmd-c-usps__ico svg,.rmd-c-usps__ico .rmd-icon{width:18px;height:18px;stroke:var(--color-headline);stroke-width:2.2;fill:none}

/* ===== Card (Bauregel 1: Flaeche statt Rahmen) ===== */
.rmd-c-card{background:var(--color-surface);border-radius:var(--radius-card)}
.rmd-c-card--dark{background:var(--color-dark);color:var(--color-on-dark-muted)}
.rmd-c-card--dark h3,.rmd-c-card--dark h4{color:var(--color-on-dark)}
.rmd-c-card--pad-default{padding:var(--space-6)}
.rmd-c-card--pad-sm{padding:var(--space-4)}
.rmd-c-card--pad-lg{padding:var(--space-8)}
.rmd-c-card--shadow{box-shadow:var(--shadow-md)}

/* ===== Quote (Kundenstimme) =====
   Ein Kundenzitat ist eine AUSSAGE, kein Kleingedrucktes: gross in Montserrat 600, schwarz.
   Kein Kasten, kein gelber Balken links - der Autor traegt den kurzen gelben Strich. */
/* Kachel (Bauregel 1: Flaeche statt Rahmen). KEIN Strich links: der blockquote-Rand, den
   Kadence auf <blockquote> setzt, wird explizit genullt (0-2-0 schlaegt Kadences 0-1-1). */
.rmd-c-quote{max-width:620px;background:var(--color-surface);border:0;border-radius:var(--radius-card);padding:var(--space-8) var(--space-6);margin:0}
.rmd-c-quote__stars{color:var(--color-star);font-size:var(--fs-md);letter-spacing:2px;margin-bottom:var(--space-4)}
.rmd-c-quote .rmd-c-quote__text{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-semibold);line-height:var(--lh-snug);letter-spacing:-.01em;color:var(--color-headline);border:0;padding:0;margin:0 0 var(--space-5);quotes:none}
.rmd-c-quote__author{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text-muted);font-style:normal;display:flex;align-items:center;gap:var(--space-3)}
.rmd-c-quote__author::before{content:"";flex:0 0 20px;width:20px;height:2px;background:var(--color-signal);border-radius:2px}

/* ===== Section-Kopf (Eyebrow + H2 + Lead) - Typo gespreizt (Bauregel 5) ===== */
.rmd-c-section__head{max-width:660px;margin-bottom:var(--space-10)}
.rmd-c-section__title{font-family:var(--font-head);font-size:var(--fs-5xl);font-weight:var(--fw-head);color:var(--color-headline);letter-spacing:-.03em;line-height:1.05;margin:var(--space-5) 0 var(--space-5);max-width:14ch}
.rmd-c-section__lead{font-size:var(--fs-md);color:var(--color-text-muted);margin:0;max-width:52ch;line-height:1.7}

/* ===== CTA ===== */
.rmd-c-cta--center{text-align:center;max-width:var(--container-narrow);margin:0 auto}
.rmd-c-cta__eyebrow{display:inline-block;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.05em;text-transform:uppercase;background:var(--color-signal);color:var(--color-headline);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);margin-bottom:var(--space-4)}
/* Auf dem dunklen Panel: Headline weiss, Text gedaempft-hell (Kontrast AA) */
.rmd-c-cta__headline{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-5xl);color:var(--color-on-dark);letter-spacing:-.03em;line-height:1.12;margin:var(--space-5) auto var(--space-5);max-width:20ch}
.rmd-c-cta__text{font-size:var(--fs-md);color:var(--color-on-dark-muted);margin:0 auto var(--space-8);max-width:52ch;line-height:1.7}
.rmd-c-cta__btns{display:flex;gap:var(--space-3);flex-wrap:wrap}
.rmd-c-cta--center .rmd-c-cta__btns{justify-content:center}

/* ===== FAQ - dunkles Panel (Bauregel 8), Haarlinien statt Kaesten (Bauregel 2) =====
   Kein Kasten je Frage mehr: die Zeilen trennt eine Haarlinie. details/summary bleibt (nativ
   tastaturbedienbar, Antwort bleibt im DOM = SEO). */
/* ===== FAQ-Panel (dunkel): Fragen-Akkordeon links, optionales Kontakt-Panel rechts =====
   Spec rmd-c-faq.html (2026-07-24). Modifier --contact schaltet die zweite Spalte frei. */
.rmd-c-faq{background:var(--color-dark);border-radius:var(--radius-panel);overflow:hidden;max-width:none}
.rmd-c-faq--contact{display:grid;grid-template-columns:1.55fr 1fr}
.rmd-c-faq__main{padding:var(--space-16) var(--space-14)}
.rmd-c-faq__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-8);margin-bottom:var(--space-10)}
.rmd-c-faq__h{font-family:var(--font-head);font-size:var(--fs-6xl);font-weight:var(--fw-head);color:var(--color-on-dark);letter-spacing:-.045em;line-height:var(--lh-flat);min-width:0}
.rmd-c-faq__hint{background:var(--surface-on-dark);border-radius:var(--radius);padding:var(--space-3) var(--space-5);font-size:var(--fs-sm);color:var(--color-on-dark-muted);line-height:1.5;max-width:330px;flex:0 0 auto}
.rmd-c-faq__hint a{color:var(--color-on-dark);font-weight:var(--fw-medium);position:relative}
.rmd-c-faq__hint a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--color-signal);border-radius:2px}
.rmd-c-faq__row{border-bottom:1px solid var(--color-hairline-dark)}
.rmd-c-faq__row:first-of-type{border-top:1px solid var(--color-hairline-dark)}
.rmd-c-faq__q{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);padding:var(--space-6) 0;cursor:pointer;list-style:none;font-family:var(--font-head);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-on-dark);letter-spacing:-.01em;line-height:1.35;transition:opacity .15s}
.rmd-c-faq__q::-webkit-details-marker{display:none}
.rmd-c-faq__q:hover{opacity:.72}
.rmd-c-faq__q:focus{outline:none}
.rmd-c-faq__q:focus-visible{outline:2px solid var(--color-signal);outline-offset:4px;border-radius:6px}
.rmd-c-faq__pl{font-size:var(--fs-xl);color:var(--color-on-dark-muted);font-weight:300;line-height:1;flex:0 0 auto;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.rmd-c-faq__row[open] .rmd-c-faq__pl{transform:rotate(45deg);color:var(--color-signal)}
.rmd-c-faq__a{font-size:var(--fs-sm);color:var(--color-on-dark-muted);line-height:1.72;padding:0 var(--space-16) var(--space-6) 0;max-width:64ch}
.rmd-c-faq__side{background:var(--color-dark-2);padding:var(--space-16) var(--space-12)}
.rmd-c-faq__sh{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-8)}
.rmd-c-faq__st{font-family:var(--font-head);font-size:var(--fs-xl);color:var(--color-on-dark);margin-bottom:var(--space-2);max-width:14ch;line-height:var(--lh-tight)}
.rmd-c-faq__side p{font-size:var(--fs-sm);color:var(--color-on-dark-muted)}
.rmd-c-faq__team{display:flex;flex:0 0 auto;padding-top:var(--space-1)}
.rmd-c-faq__team span{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--color-dark-2);margin-left:-13px;background:var(--color-dark-social-hover);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.rmd-c-faq__team span:first-child{margin-left:0}
.rmd-c-faq__team img{width:100%;height:100%;object-fit:cover}
.rmd-c-faq__team .rmd-icon{width:19px;height:19px;color:var(--color-on-dark-muted);stroke-width:1.5}
.rmd-c-faq__on{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--color-online);border:2.5px solid var(--color-dark-2)}
.rmd-c-faq__f{display:flex;flex-direction:column;gap:var(--space-3)}
.rmd-c-faq__in{width:100%;background:var(--surface-on-dark);border:1.5px solid transparent;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--color-on-dark);outline:none;transition:.15s}
.rmd-c-faq__in::placeholder{color:var(--color-on-dark-muted)}
.rmd-c-faq__in:hover{background:var(--surface-on-dark-hover)}
.rmd-c-faq__in:focus{border-color:var(--color-signal);background:var(--surface-on-dark-hover)}
textarea.rmd-c-faq__in{min-height:118px;resize:vertical;line-height:var(--lh-normal)}
.rmd-c-faq__send{margin-top:var(--space-2);background:var(--color-signal);color:var(--color-on-signal);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);padding:var(--space-4) var(--space-6);border-radius:var(--radius-pill);align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;border:none;transition:background .15s}
.rmd-c-faq__send:hover{background:var(--color-signal-hover)}
.rmd-c-faq__send .rmd-icon{width:15px;height:15px;stroke-width:2.2;transition:transform .18s}
.rmd-c-faq__send:hover .rmd-icon{transform:translateX(3px)}
.rmd-c-faq__legal{font-size:var(--fs-xs);color:var(--color-on-dark-muted);line-height:1.5;margin-top:var(--space-4)}
.rmd-c-faq__legal a{color:var(--color-on-dark-muted);text-decoration:underline;text-underline-offset:2px}
@media(max-width:1000px){
.rmd-c-faq--contact{grid-template-columns:1fr}
.rmd-c-faq__main{padding:var(--space-10) var(--space-6) var(--space-8)}
.rmd-c-faq__side{padding:var(--space-8) var(--space-6) var(--space-10)}
.rmd-c-faq__h{font-size:var(--fs-4xl)}
.rmd-c-faq__top{margin-bottom:var(--space-6)}
.rmd-c-faq__a{padding-right:var(--space-8)}
}
@media(max-width:767px){
.rmd-c-faq__top{flex-direction:column;gap:var(--space-4)}
.rmd-c-faq__hint{max-width:none}
}

/* ===== Bild-Text-Spalten (cols, ersetzt imgtext) ===== */
.rmd-c-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.rmd-c-cols--img-right .rmd-c-cols__media{order:2}
.rmd-c-cols__media{border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface)}
.rmd-c-cols__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
.rmd-c-cols__headline{font-size:var(--fs-xl);margin:var(--space-2) 0 var(--space-3)}
.rmd-c-cols__text{font-size:var(--fs-base);color:var(--color-text-muted);margin:0;line-height:var(--lh-normal)}
.rmd-c-cols__points{list-style:none;margin:var(--space-6) 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.rmd-c-cols__points li{display:flex;gap:var(--space-3);align-items:center;font-size:var(--fs-sm);padding:var(--space-4) 0;border-top:1px solid var(--color-hairline)}
.rmd-c-cols__points li:last-child{border-bottom:1px solid var(--color-hairline)}
.rmd-c-cols__pico{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
.rmd-c-cols__pico .rmd-icon{width:18px;height:18px;color:var(--color-headline);stroke-width:2.2}
.rmd-c-cols__points b{font-family:var(--font-head);display:block}
.rmd-c-cols__points span span{color:var(--color-text-muted)}

/* ===== Galerie ===== */
.rmd-c-gallery__stage{position:relative;background:var(--color-surface);border-radius:var(--radius-panel);padding:var(--space-10);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.rmd-c-gallery__stage img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s ease,opacity .14s ease;will-change:transform}
.rmd-c-gallery__badge{position:absolute;top:var(--space-4);left:var(--space-4);background:var(--color-signal);color:var(--color-headline);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);z-index:3}
.rmd-c-gallery__badge.is-sale{left:auto;right:var(--space-4);background:var(--color-headline);color:var(--color-bg)}
.rmd-c-gallery__thumbs{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}
.rmd-c-gallery__thumbs button{width:74px;height:74px;padding:7px;background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center}
.rmd-c-gallery__thumbs button img{max-width:100%;max-height:100%;object-fit:contain}
.rmd-c-gallery__thumbs button:hover{border-color:var(--color-alu)}
.rmd-c-gallery__thumbs button.active{border-color:var(--color-headline);box-shadow:0 0 0 3px rgba(0,0,0,.06)}


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

/* ===== Responsive: Tablet (<=1024px) ===== */
@media(max-width:1024px){
  .rmd-c-cols{grid-template-columns:1fr;gap:var(--space-8)}
  .rmd-c-cols--img-right .rmd-c-cols__media{order:-1}
  .rmd-c-cta__headline{font-size:var(--fs-2xl)}
}
/* ===== Layout-Grid + Feature-Karten (Seiten-Komposition aus Bloecken) ===== */
.rmd-grid{display:grid;gap:var(--space-6)}
.rmd-grid--2{grid-template-columns:repeat(2,1fr)}
.rmd-grid--3{grid-template-columns:repeat(3,1fr)}
.rmd-grid--4{grid-template-columns:repeat(4,1fr)}
.rmd-grid h3{font-family:var(--font-head);font-size:var(--fs-xl);color:var(--color-headline);margin:0 0 var(--space-2)}
.rmd-grid p{color:var(--color-text);margin:0}
.rmd-feature{display:flex;flex-direction:column;gap:var(--space-3);text-align:left}
.rmd-feature .rmd-c-icon{width:34px;height:34px;color:var(--color-headline)}
.rmd-feature b{font-family:var(--font-head);font-size:var(--fs-md);color:var(--color-headline)}
.rmd-feature span{color:var(--color-text-muted);font-size:var(--fs-sm)}
@media(max-width:900px){.rmd-grid--3,.rmd-grid--4{grid-template-columns:repeat(2,1fr)}}

/* ===== Responsive: Mobile (<=767px) ===== */
@media(max-width:767px){
  .rmd-c-section--pad-default{padding-top:var(--space-10);padding-bottom:var(--space-10)}
  .rmd-c-btn{width:100%}
  .rmd-c-cta__btns .rmd-c-btn{width:auto}
  .rmd-c-cta{padding:var(--space-10) var(--space-5)}
  .rmd-c-cta::before{top:-90px;right:-80px;width:280px;height:280px}
  .rmd-grid--2,.rmd-grid--3,.rmd-grid--4{grid-template-columns:1fr}
}

/* ============================================================
   STUFE B - Content-Bloecke (alles Token-basiert)
   ============================================================ */

/* Key-Facts-Band (Icon + Wert + Label) */
.rmd-c-facts{display:grid;grid-template-columns:repeat(4,1fr);border-radius:var(--radius-panel);overflow:hidden;background:var(--color-surface)}
.rmd-c-facts__cell{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-5);background:var(--color-bg);border-radius:var(--radius);margin:var(--space-2)}
.rmd-c-facts__cell:last-child{border-right:none}
.rmd-c-facts__ico{flex:0 0 26px;width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.rmd-c-facts__ico .rmd-icon{width:26px;height:26px;color:var(--color-headline);stroke-width:1.4}
.rmd-c-facts__txt b{display:block;font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-bold);line-height:var(--lh-tight)}
.rmd-c-facts__txt span{font-size:var(--fs-sm);color:var(--color-text-muted)}

/* Problem-/Schmerzpunkt-Karten */
.rmd-c-problem{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rmd-c-problem__card{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-8) var(--space-6)}
.rmd-c-problem__tag{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-c-problem__title{font-size:var(--fs-md);margin:var(--space-2) 0}
.rmd-c-problem__text{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* Karten-Reihe (Mechanismus/Service) */
.rmd-c-cardrow{display:grid;gap:var(--space-4)}
.rmd-c-cardrow--3{grid-template-columns:repeat(3,1fr)}
.rmd-c-cardrow--4{grid-template-columns:repeat(4,1fr)}
.rmd-c-cardrow__card{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-8) var(--space-6)}
.rmd-c-cardrow__ico{display:flex;align-items:center;margin-bottom:var(--space-5)}
.rmd-c-cardrow__ico .rmd-icon{width:26px;height:26px;color:var(--color-headline);stroke-width:1.4}
.rmd-c-cardrow__title{font-size:var(--fs-base);margin:0 0 var(--space-1)}
.rmd-c-cardrow__text{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}


/* Beschreibung + Read-more (SEO-fest: bleibt im DOM) */
.rmd-c-desc{background:var(--color-surface);border-radius:var(--radius-panel);padding:var(--space-12);max-width:860px}
.rmd-c-desc__head{font-size:var(--fs-xl);margin:0 0 var(--space-3)}
.rmd-c-desc__intro,.rmd-c-desc__more-inner{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--color-text)}
.rmd-c-desc__intro p,.rmd-c-desc__more-inner p{margin:0 0 var(--space-3)}
.rmd-c-desc__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.rmd-c-desc__more.is-open{grid-template-rows:1fr}
.rmd-c-desc__more-inner{overflow:hidden}
.rmd-c-desc__toggle{background:none;border:none;cursor:pointer;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--color-headline);display:inline-flex;align-items:center;gap:var(--space-2);border-bottom:2px solid var(--color-signal);padding:0 0 3px;margin-top:var(--space-2)}
.rmd-c-desc__toggle .rmd-icon{width:14px;height:14px;transition:transform .2s}
.rmd-c-desc__toggle[aria-expanded="true"] .rmd-icon{transform:rotate(180deg)}
.rmd-c-desc__toggle:focus-visible{outline:2px solid var(--color-headline);outline-offset:3px}

/* Spec-Tabelle (langwert-fest) */
.rmd-c-specs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.rmd-c-specs__group{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.rmd-c-specs__title{font-family:var(--font-head);font-size:var(--fs-base);font-weight:var(--fw-bold);margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-signal);display:inline-block}
.rmd-c-specs dl{display:grid;grid-template-columns:minmax(120px,44%) 1fr;margin:0}
.rmd-c-specs dt{font-size:var(--fs-sm);color:var(--color-text-muted);padding:var(--space-2) 0;border-top:1px solid var(--color-hairline)}
.rmd-c-specs dd{font-size:var(--fs-sm);font-weight:var(--fw-medium);padding:var(--space-2) 0;margin:0;border-top:1px solid var(--color-hairline);overflow-wrap:anywhere}
.rmd-c-specs dl>dt:first-of-type,.rmd-c-specs dl>dd:first-of-type{border-top:none}
.rmd-c-specs__downloads{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.rmd-c-specs__dl{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);padding:var(--space-2) var(--space-4);border:1.5px solid var(--color-hairline);border-radius:var(--radius-pill);color:var(--color-headline)}
.rmd-c-specs__dl .rmd-icon{width:15px;height:15px}

/* Pfeil-Nav (Slider) */
.rmd-c-nav{position:absolute;top:38%;width:42px;height:42px;border-radius:var(--radius-pill);background:var(--color-bg);border:0;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2}
.rmd-c-nav .rmd-icon{width:18px;height:18px;color:var(--color-headline)}
.rmd-c-nav--prev{left:-8px}.rmd-c-nav--next{right:-8px}
.rmd-c-nav:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px}

/* Final-/Beratungs-CTA - dunkles Panel mit weichem Signal-Lichtschein (Bauregel 8). EIN Design fuer
   alle CTA-Kontexte (2026-07-24 vereinheitlicht: frueherer --glow-Modifier ins Basis-Panel gefaltet).
   Der Abschluss der Seite ist ein Anker, keine Karte. */
.rmd-c-cta{position:relative;overflow:hidden;background:var(--color-dark);border:0;border-radius:var(--radius-panel);padding:var(--space-14) var(--space-8);text-align:center}
.rmd-c-cta::before{content:"";position:absolute;top:-140px;right:-120px;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--color-signal) 22%, transparent) 0%, color-mix(in srgb, var(--color-signal) 7%, transparent) 45%, transparent 70%);pointer-events:none;z-index:0}
.rmd-c-cta>*{position:relative;z-index:1}
.rmd-c-cta--center{max-width:none}
.rmd-c-cta--center .rmd-c-cta__headline{max-width:18ch;margin-left:auto;margin-right:auto}
.rmd-c-cta--center .rmd-c-cta__text{max-width:680px;margin-left:auto;margin-right:auto}
.rmd-c-cta__badge{margin-bottom:var(--space-4)}
.rmd-c-cta__contact{font-size:var(--fs-sm);color:var(--color-on-dark-muted);margin:var(--space-6) 0 0}
.rmd-c-cta__contact b{color:var(--color-on-dark);font-family:var(--font-head)}
/* SEO-only: im DOM + fuer Screenreader vorhanden, visuell versteckt (Clip). Fuer crawlbare
   Kategorie-Beschreibung ohne sichtbaren "verlorenen" Block. Kein display:none (bleibt zugaenglich). */
.rmd-seo-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- trial: Test-/Probeangebot - helle Kachel, Text links + Bild rechts (eigener Block,
   aus cta herausgeloest). Bauregel 1 (Flaeche statt Rahmen), Bild als inset-Kachel. ---- */
.rmd-c-trial{background:var(--color-surface);border-radius:var(--radius-panel);padding:var(--space-12);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.rmd-c-trial__body{min-width:0}
.rmd-c-trial__body .rmd-c-eyebrow{margin-bottom:var(--space-4)}
.rmd-c-trial__headline{font-family:var(--font-head);font-weight:var(--fw-head);color:var(--color-headline);font-size:var(--fs-3xl);line-height:1.15;letter-spacing:-.02em;margin:0 0 var(--space-4)}
.rmd-c-trial__text{color:var(--color-text-muted);font-size:var(--fs-md);line-height:1.7;max-width:52ch;margin:0 0 var(--space-8)}
.rmd-c-trial__media{border-radius:var(--radius-card);overflow:hidden}
.rmd-c-trial__media img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media(max-width:900px){
  .rmd-c-trial{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8)}
  .rmd-c-trial__media{order:-1}
}

/* Stufe-B Responsive */
@media(max-width:1024px){
  .rmd-c-facts{grid-template-columns:repeat(2,1fr)}
  .rmd-c-facts__cell:nth-child(2n){border-right:none}
  .rmd-c-problem,.rmd-c-cardrow--3,.rmd-c-cardrow--4,.rmd-c-specs{grid-template-columns:1fr}
}
@media(max-width:767px){
  .rmd-c-facts{grid-template-columns:1fr}
  .rmd-c-facts__cell{border-right:none;border-bottom:1px solid var(--color-hairline)}
  .rmd-c-facts__cell:last-child{border-bottom:none}
}

/* ============================================================
   REDAKTION - Content-Bloecke fuer Beitraege/Seiten (Token-basiert)
   ============================================================ */

/* Bild-Helper (Fokus + Platzhalter) */
.rmd-img{display:block;max-width:100%;object-position:center}
.rmd-focus-top{object-position:top}.rmd-focus-bottom{object-position:bottom}
.rmd-focus-left{object-position:left}.rmd-focus-right{object-position:right}
.rmd-img--ph{width:100%;min-height:120px;display:flex;align-items:center;justify-content:center;background:var(--color-surface);color:var(--color-text-muted);font-family:var(--font-head);font-size:var(--fs-sm);text-align:center;padding:var(--space-4)}

/* Prose / Rich-Text */
.rmd-c-prose{max-width:var(--container-narrow);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--color-text)}
.rmd-c-prose>*+*{margin-top:var(--space-4)}
.rmd-c-prose h2{font-family:var(--font-head);font-size:var(--fs-2xl);font-weight:var(--fw-head);color:var(--color-headline);margin-top:var(--space-10);line-height:var(--lh-tight)}
.rmd-c-prose h3{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-head);color:var(--color-headline);margin-top:var(--space-8);line-height:var(--lh-snug)}
.rmd-c-prose a{color:var(--color-headline);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--color-signal)}
.rmd-c-prose a:hover{background:var(--color-signal-soft)}
.rmd-c-prose strong{font-weight:var(--fw-bold)}
.rmd-c-prose ul,.rmd-c-prose ol{padding-left:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2)}
.rmd-c-prose li::marker{color:var(--color-text-muted)}
.rmd-c-prose blockquote{border-left:4px solid var(--color-signal);padding-left:var(--space-5);font-size:var(--fs-lg);color:var(--color-text-muted)}
.rmd-c-prose img{width:100%;height:auto;border-radius:var(--radius-card)}

/* Lead */
.rmd-c-lead{max-width:var(--container-narrow);font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--color-text-muted)}


/* Callout */
.rmd-c-callout{max-width:var(--container-narrow);display:flex;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius);background:var(--color-surface);border-left:4px solid var(--color-border)}
.rmd-c-callout--tipp{background:var(--color-signal-soft);border-left-color:var(--color-signal)}
.rmd-c-callout--achtung{background:var(--color-error-bg);border-left-color:var(--color-error)}
.rmd-c-callout__ic{flex:0 0 24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--color-headline)}
.rmd-c-callout__ic .rmd-icon{width:20px;height:20px}
.rmd-c-callout__body b{font-family:var(--font-head);font-size:var(--fs-base);display:block;margin-bottom:2px}
.rmd-c-callout__body p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* Inhaltsverzeichnis */
.rmd-c-toc{max-width:520px;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6)}
.rmd-c-toc h4{font-family:var(--font-head);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);margin:0 0 var(--space-4)}
.rmd-c-toc ol{list-style:none;counter-reset:t;display:flex;flex-direction:column;gap:var(--space-2);margin:0;padding:0}
.rmd-c-toc li{counter-increment:t;display:flex;gap:var(--space-3);font-size:var(--fs-base)}
.rmd-c-toc li::before{content:counter(t);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-xs);color:var(--color-text-muted);background:var(--color-bg);width:22px;height:22px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;flex:0 0 22px;margin-top:2px}
.rmd-c-toc a{color:var(--color-text)}
.rmd-c-toc a:hover{text-decoration:underline;text-decoration-color:var(--color-signal);text-decoration-thickness:2px}

/* Steps */
.rmd-c-steps{max-width:760px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rmd-c-steps__s{display:grid;grid-template-columns:46px 1fr;gap:var(--space-5);padding:var(--space-5) 0;border-top:1px solid var(--color-hairline)}
.rmd-c-steps__s:first-child{border-top:none;padding-top:0}
.rmd-c-steps__n{width:46px;height:46px;border-radius:var(--radius-pill);background:var(--color-signal-soft);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-md);display:flex;align-items:center;justify-content:center}
.rmd-c-steps__c h4{font-size:var(--fs-md);margin:0 0 var(--space-1)}
.rmd-c-steps__c p{font-size:var(--fs-base);color:var(--color-text-muted);margin:0}

/* Takeaways */
.rmd-c-takeaways{max-width:var(--container-narrow);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6)}
.rmd-c-takeaways h4{font-size:var(--fs-md);margin:0 0 var(--space-4)}
.rmd-c-takeaways ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0}
.rmd-c-takeaways li{display:flex;gap:var(--space-3);font-size:var(--fs-base);align-items:flex-start}
.rmd-c-takeaways__i{flex:0 0 18px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;margin-top:3px}
.rmd-c-takeaways__i .rmd-icon{width:18px;height:18px;color:var(--color-headline);stroke-width:2.2}

/* Figure (inhaltsgebunden - kein Crop) */
.rmd-c-figure{max-width:820px;margin:0}
.rmd-c-figure__img{width:100%;height:auto;border-radius:var(--radius-card)}
.rmd-c-figure figcaption{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--color-text-muted);border-left:3px solid var(--color-signal);padding-left:var(--space-3)}

/* Before/After (formatgebunden 4:3) */
.rmd-c-beforeafter{max-width:820px;margin:0}
.rmd-c-beforeafter__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.rmd-c-beforeafter__item{position:relative;border-radius:var(--radius-card);overflow:hidden;aspect-ratio:4/3;background:var(--color-surface)}
.rmd-c-beforeafter__item .rmd-img,.rmd-c-beforeafter__item .rmd-img--ph{width:100%;height:100%;object-fit:cover}
.rmd-c-beforeafter__lbl{position:absolute;top:var(--space-3);left:var(--space-3);z-index:1;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--color-bg);color:var(--color-text)}
.rmd-c-beforeafter__item.is-after .rmd-c-beforeafter__lbl{background:var(--color-signal);color:var(--color-on-signal)}
.rmd-c-beforeafter figcaption{margin-top:var(--space-3);font-size:var(--fs-sm);color:var(--color-text-muted)}

/* Video (klick-to-load) */
.rmd-c-video{max-width:820px;position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--color-dark);aspect-ratio:16/9}
.rmd-c-video>.rmd-img,.rmd-c-video>.rmd-img--ph{width:100%;height:100%;object-fit:cover;opacity:.72}
.rmd-c-video__play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);cursor:pointer;background:transparent;border:0;width:100%}
.rmd-c-video__pbtn{width:64px;height:64px;border-radius:var(--radius-pill);background:var(--color-signal);display:flex;align-items:center;justify-content:center}
.rmd-c-video__pbtn svg{width:24px;height:24px;fill:var(--color-on-signal);margin-left:3px}
.rmd-c-video__hint{font-size:var(--fs-xs);color:var(--color-on-dark);background:rgba(0,0,0,.45);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill)}
.rmd-c-video__play:focus-visible{outline:3px solid var(--color-signal-hover);outline-offset:-4px}
.rmd-c-video__frame{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Author */
.rmd-c-author{max-width:var(--container-narrow);display:grid;grid-template-columns:72px 1fr;gap:var(--space-4);align-items:center;background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-5)}
.rmd-c-author__img{width:72px;height:72px;border-radius:var(--radius-pill);object-fit:cover}
.rmd-c-author__role{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.rmd-c-author__body h4{font-size:var(--fs-base);margin:3px 0 var(--space-1)}
.rmd-c-author__body p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* CTA-Banner (im Textfluss) */
.rmd-c-ctabanner{max-width:820px;display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6);flex-wrap:wrap}
.rmd-c-ctabanner h4{font-size:var(--fs-lg);margin:0 0 var(--space-1)}
.rmd-c-ctabanner p{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* Downloads */
.rmd-c-downloads{max-width:640px;display:flex;flex-direction:column;gap:var(--space-3)}
.rmd-c-downloads__item{display:flex;align-items:center;gap:var(--space-4);background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-4)}
.rmd-c-downloads__item:hover{border-color:var(--color-headline)}
.rmd-c-downloads__ic{flex:0 0 36px;height:36px;border-radius:var(--radius-sm);background:var(--color-surface);display:flex;align-items:center;justify-content:center;color:var(--color-headline)}
.rmd-c-downloads__ic .rmd-icon{width:18px;height:18px}
.rmd-c-downloads__t b{font-family:var(--font-head);font-size:var(--fs-base);display:block}
.rmd-c-downloads__t span{font-size:var(--fs-xs);color:var(--color-text-muted)}

/* Tabelle */
.rmd-c-table{max-width:820px;overflow-x:auto;border-radius:var(--radius-card)}
.rmd-c-table table{width:100%;border-collapse:collapse;min-width:520px}
.rmd-c-table th,.rmd-c-table td{text-align:left;padding:var(--space-4);font-size:var(--fs-sm);border-bottom:1px solid var(--color-hairline)}
.rmd-c-table thead th{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.03em;color:var(--color-text-muted);background:var(--color-surface)}
.rmd-c-table tbody tr:last-child td{border-bottom:none}
.rmd-c-table td:first-child{font-weight:var(--fw-medium);color:var(--color-headline)}

/* Verwandte Beitraege (formatgebunden 16:10) */
.rmd-c-related{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rmd-c-related__r{background:var(--color-surface);border-radius:var(--radius-card);overflow:hidden;display:block;transition:transform .2s}
.rmd-c-related__r:hover{transform:translateY(-3px)}
.rmd-c-related__r .rmd-img,.rmd-c-related__r .rmd-img--ph{width:100%;aspect-ratio:16/10;object-fit:cover}
.rmd-c-related__b{padding:var(--space-4)}
.rmd-c-related__meta{font-size:var(--fs-xs);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.rmd-c-related__b h4{font-size:var(--fs-base);line-height:var(--lh-snug);margin:0}

/* Divider */
.rmd-c-divider{max-width:var(--container-narrow);display:flex;align-items:center;gap:var(--space-4)}
.rmd-c-divider__l{flex:1;height:1px;background:var(--color-border)}
.rmd-c-divider__d{width:26px;height:4px;background:var(--color-signal);border-radius:2px}

@media(max-width:820px){
  .rmd-c-beforeafter__pair,.rmd-c-related{grid-template-columns:1fr}
  .rmd-c-ctabanner{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   SLIDER (generisch) + TILE (Produkt-/Inhalts-Kachel)
   Ein Slider ueberall: slides[] = fertige Karten, cols fuellt die Breite (2|3|4).
   ============================================================ */

/* Slider-Rahmen + Track */
.rmd-c-slider{position:relative}
.rmd-c-slider__track{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--space-1) 2px var(--space-3);scrollbar-width:thin}
.rmd-c-slider__track::-webkit-scrollbar{height:8px}
.rmd-c-slider__track::-webkit-scrollbar-thumb{background:var(--color-border-strong);border-radius:var(--radius-pill)}
.rmd-c-slider__slide{flex:0 0 auto;scroll-snap-align:start;display:flex}
.rmd-c-slider__slide>*{width:100%}
/* cols steuert die Fuellung: N Karten fuellen die Breite (Gap N-1 mal abgezogen) */
.rmd-c-slider--cols-4 .rmd-c-slider__slide{flex-basis:calc((100% - 3*var(--space-4)) / 4)}
.rmd-c-slider--cols-3 .rmd-c-slider__slide{flex-basis:calc((100% - 2*var(--space-4)) / 3)}
.rmd-c-slider--cols-2 .rmd-c-slider__slide{flex-basis:calc((100% - var(--space-4)) / 2)}
/* Mobil: gleiche Spezifitaet (0,2,0) wie oben + spaeter in der Quelle -> gewinnt ueber alle cols */
@media(max-width:900px){
  .rmd-c-slider--cols-2 .rmd-c-slider__slide,.rmd-c-slider--cols-3 .rmd-c-slider__slide,.rmd-c-slider--cols-4 .rmd-c-slider__slide{flex-basis:calc((100% - var(--space-4)) / 2)}
}
@media(max-width:560px){
  .rmd-c-slider--cols-2 .rmd-c-slider__slide,.rmd-c-slider--cols-3 .rmd-c-slider__slide,.rmd-c-slider--cols-4 .rmd-c-slider__slide{flex-basis:82%}
}

/* Tile: kontaktiertes Produktbild auf Weiss + Body (Eyebrow, Titel, Rating, Spec-Chips, Fusszeile).
   Kein Rahmen, kein Schatten (Bauregel 1) - die weisse Flaeche grenzt sich ueber den getoenten
   Section-Grund ab. Nur ein dezenter Hover-Lift. */
.rmd-c-tile{background:var(--color-bg);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;width:100%;transition:transform .2s}
.rmd-c-tile:hover{transform:translateY(-4px)}
/* Bestseller-Hervorhebung: dunkler Rahmen (inset, kein Layout-Shift) + schwarzes Badge. */
.rmd-c-tile--featured{box-shadow:inset 0 0 0 2px var(--color-headline)}
.rmd-c-tile--featured .rmd-c-tile__badge{background:var(--color-headline);color:var(--color-bg)}
/* Bild-Flaeche: feste Feldhoehe ueber min-height (KEIN aspect-ratio!), Freisteller bis 350px.
   object-fit:contain -> NIE anschneiden. WICHTIG: kein aspect-ratio - die Kombination
   aspect-ratio + min-height + overflow:hidden liess iOS-Safari auf schmalen 1-Spalten-Karten das
   breitenbegrenzte Quadratbild oben/unten abschneiden. min-height:390 > Bild(350)+Padding -> passt
   immer. Schmales Seiten-Padding; Badge/Feature-Marker liegen als Overlay in den oberen Ecken. */
.rmd-c-tile__thumb{position:relative;display:flex;align-items:center;justify-content:center;background:var(--color-bg);min-height:390px;padding:var(--space-3) var(--space-5);overflow:hidden}
.rmd-c-tile__thumb .rmd-c-tile__img,.rmd-c-tile__thumb img{width:auto;height:auto;max-width:100%;max-height:350px;object-fit:contain;display:block}
/* Overlay-Zeile: Badge links, Feature-Marker rechts */
.rmd-c-tile__top{position:absolute;top:var(--space-4);left:var(--space-4);right:var(--space-4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2)}
.rmd-c-tile__badge{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.08em;background:var(--color-signal);color:var(--color-on-signal);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill)}
/* Angebots-/Rabatt-Badge: Rot mit weisser Schrift (getrennt vom Signal-Gelb) */
.rmd-c-tile__badge--sale{background:var(--color-sale);color:var(--color-bg)}
.rmd-c-tile__feat{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-3);margin-left:auto}
.rmd-c-tile__feat svg,.rmd-c-tile__feat .rmd-icon{width:15px;height:15px;flex:0 0 15px}
/* Monochrome (Lucide) einfaerben; Brand-Icons (mehrfarbig) NICHT umfaerben */
.rmd-c-tile__feat svg:not(.rmd-icon--brand),.rmd-c-tile__feat .rmd-icon:not(.rmd-icon--brand){stroke:var(--color-headline);fill:none;stroke-width:1.6}
.rmd-c-tile__feat span{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold)}
.rmd-c-tile__body{padding:var(--space-3) var(--space-6) var(--space-6);display:flex;flex-direction:column;flex:1}
.rmd-c-tile__eyebrow{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);margin-bottom:var(--space-2)}
.rmd-c-tile__title{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-lg);letter-spacing:-.02em;line-height:1.15;color:var(--color-headline);text-decoration:none}
/* Titel-Praefix (z.B. "LED Praxisleuchte"): optisch ausgeblendet, aber im DOM/Link-Text erhalten
   (SEO + Screenreader lesen den vollen Produktnamen; sichtbar bleibt nur der unterscheidende Teil). */
.rmd-c-tile__titlepre{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Rating als Zeile unter dem Titel */
.rmd-c-tile__rate{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-3)}
.rmd-c-tile__stars{color:var(--color-star);font-size:var(--fs-xs);letter-spacing:1px}
/* Specs als Chips: Wert fett + optionales Label (entfaellt bei selbsterklaerendem Wert) */
.rmd-c-tile__chips{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-4) 0 var(--space-5)}
.rmd-c-tile__chip{background:var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--fs-xs);white-space:nowrap;line-height:1.3}
.rmd-c-tile__chip b{font-family:var(--font-head);font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--color-headline)}
.rmd-c-tile__chip span{color:var(--color-text-muted)}
/* Fusszeile: Trennlinie, dann Preis+CTA in einer Zeile, darunter optionale Mikro-Trust-Zeile */
.rmd-c-tile__foot{margin-top:auto;padding-top:var(--space-5);border-top:1px solid var(--color-hairline);display:flex;flex-direction:column;gap:var(--space-3)}
.rmd-c-tile__footrow{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3)}
.rmd-c-tile__trust{font-size:var(--fs-xs);color:var(--color-text-muted);line-height:1.3}
.rmd-c-tile__price{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.02em;line-height:1;color:var(--color-headline);white-space:nowrap}
.rmd-c-tile__price 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:var(--space-1);letter-spacing:0}
.rmd-c-tile__price .woocommerce-Price-amount{white-space:nowrap}
/* Angebot: Grundpreis durchgestrichen + gedaempft, Aktionspreis wie normaler Preis (Rabatt sagt das Badge) */
.rmd-c-tile__price del{margin-right:var(--space-2);font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--color-text-muted);text-decoration:line-through}
.rmd-c-tile__price ins{text-decoration:none;color:inherit}
.rmd-c-tile__cta{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-on-signal);display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);background:var(--color-signal);transition:background .15s;white-space:nowrap;text-decoration:none}
.rmd-c-tile__cta:hover{background:var(--color-signal-hover)}
.rmd-c-tile__cta svg,.rmd-c-tile__cta .rmd-icon{width:14px;height:14px;flex:0 0 14px;stroke:currentColor;fill:none;stroke-width:2.4}
.rmd-c-tile__foot .rmd-c-btn{flex:0 0 auto}

/* ============================================================
   MEDIA-BLOECKE (Home/Landing): imggrid, grid
   Nach den Bauregeln: Flaeche statt Rahmen, Karten-/Panel-Radius, Freisteller nie anschneiden.
   (mediatext entfernt - die Bild+Text-Kachel deckt jetzt die cta-Split-Variante ab.)
   ============================================================ */

/* Image-Gallerie: erstes Bild gross (2 Zeilen), Rest im Raster, Overlay-Zaehler auf dem letzten. */
.rmd-c-imggrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-3)}
.rmd-c-imggrid a{position:relative;border-radius:var(--radius-card);overflow:hidden;background:var(--color-surface)}
.rmd-c-imggrid a:first-child{grid-row:span 2}
.rmd-c-imggrid img{width:100%;height:100%;object-fit:cover;aspect-ratio:1;transition:transform .35s}
.rmd-c-imggrid a:first-child img{aspect-ratio:auto;min-height:240px}
.rmd-c-imggrid a:hover img{transform:scale(1.04)}
.rmd-c-imggrid__ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(13,16,18,.55);color:var(--color-on-dark);font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-bold)}

/* Produkt-Grid: Kategorie-Raster aus tile-Karten. Reiner Layout-Wrapper. */
.rmd-c-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}

@media(max-width:1024px){
  .rmd-c-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:767px){
  .rmd-c-imggrid{grid-template-columns:1fr 1fr}
  .rmd-c-grid{grid-template-columns:1fr}
}

/* ===== Kategoriekarte (cat-tile, Spec rmd-c-cat-tile.html 2026-07-23, ersetzt catcard) =====
   Ebene Kategorie: Bild 1:1 auf Surface (contain + 8% Innenabstand - Freisteller nie angeschnitten,
   Hover-Zoom), Name (min-height fuer gleiche Hoehen), Kurztext, Footer "Modelle ansehen" + runder
   Pfeil. BEWUSST kein Preis, keine Modellzahl, keine Test-Zeile. Beratungs-Karte gleiche Familie. */
.rmd-c-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rmd-c-cat-tile{background:var(--color-bg);border-radius:var(--radius-card);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;transition:transform .2s}
.rmd-c-cat-tile:hover{transform:translateY(-4px)}
.rmd-c-cat-tile__m{background:var(--color-bg);aspect-ratio:1;overflow:hidden;display:block}
.rmd-c-cat-tile__m img{width:100%;height:100%;object-fit:contain;padding:8%;display:block;transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.rmd-c-cat-tile:hover .rmd-c-cat-tile__m img{transform:scale(1.05)}
/* Icon-Platzhalter im Bildfeld (bildlose Kacheln, z.B. Anwendungsbereiche ohne Freisteller):
   ruhiges Outline-Icon auf Surface-Grau, Hover -> Headline-Farbe + leichter Zoom. */
.rmd-c-cat-tile__m--icon{background:var(--color-surface);display:flex;align-items:center;justify-content:center}
.rmd-c-cat-tile__m--icon .rmd-icon{width:80px;height:80px;color:var(--color-icon-quiet);transition:color .28s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.rmd-c-cat-tile:hover .rmd-c-cat-tile__m--icon .rmd-icon{color:var(--color-headline);transform:scale(1.06)}
.rmd-c-cat-tile__b{padding:var(--space-6);display:flex;flex-direction:column;flex:1}
.rmd-c-cat-tile__n{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-lg);letter-spacing:-.03em;line-height:var(--lh-tight);color:var(--color-headline);margin-bottom:var(--space-2);min-height:2.2em}
.rmd-c-cat-tile__t{font-size:var(--fs-sm);color:var(--color-text-muted);line-height:var(--lh-normal);margin-bottom:var(--space-5)}
.rmd-c-cat-tile__f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.rmd-c-cat-tile__l{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-text)}
.rmd-c-cat-tile__go{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--color-surface);display:flex;align-items:center;justify-content:center;flex:0 0 40px;transition:background .18s}
.rmd-c-cat-tile__go svg,.rmd-c-cat-tile__go .rmd-icon{width:15px;height:15px;stroke:var(--color-headline);fill:none;stroke-width:2.2;transition:transform .18s}
.rmd-c-cat-tile:hover .rmd-c-cat-tile__go{background:var(--color-signal)}
.rmd-c-cat-tile:hover .rmd-c-cat-tile__go svg,.rmd-c-cat-tile:hover .rmd-c-cat-tile__go .rmd-icon{transform:translateX(2px)}
.rmd-c-cat-tile:focus-visible{outline:2px solid var(--color-headline);outline-offset:3px}
/* ===== Beratungskachel (cat-help, Spec rmd-c-cat-help.html 2026-07-23, ersetzt cat-tile--help) =====
   Ebene Global - EINE Quelle, letzte Position im Kategorie-Raster. Dunkles Panel mit weichem
   Lichtschein oben rechts (pures CSS, kein Bild), Icon-Kreis, Haken-Punkteliste zwischen dunklen
   Haarlinien, Pill-CTA (der einzige Signal-Traeger der Kachel-Reihe). */
.rmd-c-cat-help{background:var(--color-dark);border-radius:var(--radius-card);padding:var(--space-8);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.rmd-c-cat-help::before{content:"";position:absolute;top:-90px;right:-90px;width:290px;height:290px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--color-signal) 24%, transparent) 0%, color-mix(in srgb, var(--color-signal) 8%, transparent) 45%, transparent 70%);pointer-events:none}
.rmd-c-cat-help__in{position:relative;z-index:1;display:flex;flex-direction:column}
.rmd-c-cat-help__ic{width:52px;height:52px;border-radius:var(--radius-pill);background:color-mix(in srgb, var(--color-on-dark) 7%, transparent);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-5);flex:0 0 auto}
/* Farbe via color/currentColor (das globale .rmd-icon-System setzt stroke:currentColor und
   kommt spaeter in der Kaskade - direktes stroke wuerde verlieren); Strichstaerke mit hoeherer
   Spezifitaet gegen die globale stroke-width:2. */
.rmd-c-cat-help__ic svg,.rmd-c-cat-help__ic .rmd-icon{width:26px;height:26px;color:var(--color-signal);stroke:var(--color-signal);fill:none}
.rmd-c-cat-help .rmd-c-cat-help__ic .rmd-icon{stroke-width:1.5}
.rmd-c-cat-help__h{color:var(--color-on-dark);font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-xl);letter-spacing:-.03em;line-height:var(--lh-tight);margin:0 0 var(--space-3)}
.rmd-c-cat-help__t{color:var(--color-on-dark-muted);font-size:var(--fs-sm);line-height:var(--lh-normal);margin:0 0 var(--space-6)}
.rmd-c-cat-help__pts{list-style:none;margin:0 0 var(--space-6);padding:0}
.rmd-c-cat-help__pts li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);color:var(--color-on-dark-muted);padding:var(--space-2) 0;border-top:1px solid var(--color-hairline-dark)}
.rmd-c-cat-help__pts li:last-child{border-bottom:1px solid var(--color-hairline-dark)}
.rmd-c-cat-help__pts svg,.rmd-c-cat-help__pts .rmd-icon{width:14px;height:14px;color:var(--color-signal);stroke:var(--color-signal);fill:none;flex:0 0 14px}
.rmd-c-cat-help .rmd-c-cat-help__pts .rmd-icon{stroke-width:2.4}
.rmd-c-cat-help__cta{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);background:var(--color-signal);color:var(--color-on-signal);padding:var(--space-3) var(--space-6);border-radius:var(--radius-pill);align-self:flex-start;text-decoration:none;transition:background .15s}
.rmd-c-cat-help__cta:hover{background:var(--color-signal-hover)}
.rmd-c-cat-help__cta:focus-visible{outline:2px solid var(--color-on-dark);outline-offset:3px}
.rmd-c-cat-help__cta svg,.rmd-c-cat-help__cta .rmd-icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .18s}
.rmd-c-cat-help__cta:hover svg,.rmd-c-cat-help__cta:hover .rmd-icon{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  .rmd-c-cat-tile,.rmd-c-cat-tile__m img,.rmd-c-cat-tile__go svg{transition:none}
}
@media(max-width:1000px){
  .rmd-c-cat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .rmd-c-cat-grid{grid-template-columns:1fr}
  .rmd-c-cat-tile__n{min-height:0}
  .rmd-c-cat-tile__b{padding:var(--space-5) var(--space-5) var(--space-6)}
  .rmd-c-cat-help{padding:var(--space-6) var(--space-5)}
  .rmd-c-cat-help::before{top:-70px;right:-70px;width:220px;height:220px}
}

/* ===== Buy-Box-Bausteine =====
   Aus inc/single-product.php herausgeloest (waren dort Inline-Markup + eigene Klassen).
   Werte 1:1 uebernommen, damit sich optisch nichts verschiebt. Tokenisiert wurde nur, wo der
   Wert IDENTISCH bleibt (999px -> --radius-pill, 700 -> --fw-bold, 14px -> --fs-sm).
   SCHULD (bewusst offen, waere sonst eine stille Design-Aenderung): 30px, 13.5px, 16.5px, 11px,
   92px, 22px, 9px, 18px haben keine Token-Entsprechung. Beim naechsten Buy-Box-Design angleichen. */
.rmd-c-pricebox{background:none;border:0;border-radius:0;padding:0;margin-bottom:var(--space-5);max-width:480px}
.rmd-c-pricebox__price{font-family:var(--font-head);font-size:var(--fs-4xl);font-weight:var(--fw-bold);letter-spacing:-.04em;line-height:1;color:var(--color-headline)}
.rmd-c-pricebox__price del{color:var(--color-text-muted);font-weight:var(--fw-medium);font-size:20px;margin-right:var(--space-2)}
.rmd-c-pricebox__price ins{text-decoration:none}
.rmd-c-pricebox__note{font-size:13.5px;color:var(--color-text-muted);margin-top:var(--space-1)}
.rmd-c-pricebox__note b{color:var(--color-text)}
.rmd-c-pricebox__sku{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.rmd-c-pricebox__sku[hidden]{display:none}
.rmd-c-pricebox__sku-val{color:var(--color-text);font-weight:var(--fw-medium)}
.rmd-c-pricebox__anchor{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-hairline);font-size:var(--fs-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2)}
.rmd-c-pricebox__anchor b{color:var(--color-text)}
.rmd-c-pricebox__anchor svg{width:16px;height:16px;flex:0 0 16px;stroke:var(--color-text-muted);fill:none}

/* Test-CTA - dunkel. Der gelbe CTA der Buy-Box ist der Warenkorb-Button; genau EIN Signal-
   Traeger pro Viewport (Eiserne Regel). Vorher waren beide gelb - siehe design-system.md. */
.rmd-c-testcta{font-family:var(--font-head);display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;height:var(--btn-height-lg);box-sizing:border-box;background:var(--btn-dark-bg);color:var(--btn-dark-text);border:1.5px solid transparent;font-size:var(--fs-base);font-weight:var(--fw-bold);padding:0 var(--space-6);border-radius:var(--radius-pill);cursor:pointer;margin-top:var(--space-2);text-decoration:none;box-shadow:var(--shadow-cta);transition:background .15s}
.rmd-c-testcta:hover{background:var(--btn-dark-bg-hover);color:var(--btn-dark-text)}
.rmd-c-testcta:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px}
.rmd-c-testcta svg{width:18px;height:18px;stroke:currentColor;fill:none;flex:0 0 auto}
.rmd-c-testcta__note{font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text-muted);text-align:center;margin:var(--space-2) 0 0}
.rmd-c-testcta__note a{color:var(--color-link);text-decoration:underline;text-underline-offset:2px}
.rmd-c-testcta__note a:hover{color:var(--color-link-hover)}

/* Karten-Liste: je Angabe eine weisse Zeile auf hellem Grund. */
.rmd-c-buymeta{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4);background:var(--color-surface);border-radius:var(--radius);padding:var(--space-2)}
.rmd-c-buymeta__row{display:flex;align-items:center;gap:var(--space-3);background:var(--color-bg);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--fs-sm);color:var(--color-text)}
.rmd-c-buymeta__row[hidden]{display:none}
.rmd-c-buymeta__row svg{width:18px;height:18px;flex:0 0 18px;stroke:var(--color-text);fill:none}
/* Der Lieferzeit-Platz nimmt das verschobene Germanized-Element auf - dessen eigene
   Abstaende/Groessen hier neutralisieren, damit die Zeile wie die anderen aussieht. */
.rmd-c-buymeta__slot .wc-gzd-additional-info{margin:0!important;padding:0!important;font-size:inherit!important;color:inherit!important}

/* Persona / Risk-Reversal: helle Kachel, Bild links + Text rechts. Bewusst kompakt gehalten
   (radius-card, space-6, straffe Textgroessen) - Bauregel 1: Flaeche statt Rahmen. */
.rmd-c-persona{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-6);margin-top:var(--space-5)}
.rmd-c-persona--media{display:grid;grid-template-columns:180px 1fr;gap:var(--space-6);align-items:stretch}
.rmd-c-persona__media{border-radius:var(--radius);overflow:hidden;min-height:150px}
.rmd-c-persona__media img{width:100%;height:100%;object-fit:cover;display:block}
.rmd-c-persona__body{align-self:center;min-width:0}
.rmd-c-persona .rmd-c-eyebrow{margin-bottom:var(--space-3)}
.rmd-c-persona__head{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-lg);letter-spacing:-.01em;line-height:1.25;color:var(--color-headline);margin:0 0 var(--space-2)}
.rmd-c-persona__text{font-size:var(--fs-base);color:var(--color-text-muted);line-height:1.6;margin:0}
.rmd-c-persona__text b{color:var(--color-text);font-weight:var(--fw-semibold)}
@media(max-width:640px){
  .rmd-c-persona--media{grid-template-columns:1fr}
  .rmd-c-persona__media{max-height:200px}
}

@media(max-width:767px){
  .rmd-c-pricebox__price{font-size:var(--fs-3xl)}
  /* USP-Text mobil feiner - haelt den Wert, den die PDP vor dem Kapseln hatte. */
  .rmd-c-usps li{font-size:var(--fs-sm)}
}

/* ===== rmd-c-scope: Lieferumfang + optionales Zubehoer (zwei Zonen, Haarlinie dazwischen) =====
   Flaeche statt Box (kein Rahmen), Haarlinie trennt, Icons ohne Kachel, kein Gelb (bleibt dem CTA).
   Werte aus Tokens; nichts aus der Design-Vorlage inline uebernommen. */
.rmd-c-scope{border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface);margin:0 0 var(--space-4)}

/* Zone "Dabei" */
.rmd-c-scope__in{padding:var(--space-5)}
.rmd-c-scope__t{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4)}
.rmd-c-scope__chk{width:16px;height:16px;border-radius:var(--radius-pill);background:var(--color-success);display:flex;align-items:center;justify-content:center;flex:0 0 16px}
.rmd-c-scope__chk .rmd-icon{width:9px;height:9px;stroke:var(--color-on-dark,#fff);color:var(--color-on-dark,#fff);stroke-width:3.4;fill:none}
.rmd-c-scope__lbl{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text)}
.rmd-c-scope__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rmd-c-scope__i{background:var(--color-bg);border-radius:var(--radius);padding:13px;display:flex;align-items:center;gap:11px}
.rmd-c-scope__i .rmd-icon{width:22px;height:22px;flex:0 0 22px;stroke:var(--color-headline);stroke-width:1.4;fill:none}
.rmd-c-scope__iimg{width:56px;height:56px;flex:0 0 56px;object-fit:contain}
.rmd-c-scope__i span{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1.25;color:var(--color-headline)}

/* Trenner */
.rmd-c-scope__sep{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5)}
.rmd-c-scope__sep::before,.rmd-c-scope__sep::after{content:"";flex:1;height:1px;background:var(--color-hairline)}
.rmd-c-scope__sep span{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted)}

/* Zone "Optional" */
.rmd-c-scope__opt{padding:var(--space-4) var(--space-5) var(--space-5)}
.rmd-c-scope__hint{font-size:var(--fs-sm);color:var(--color-text-muted);margin:0 0 var(--space-3);line-height:1.5}
.rmd-c-scope__o{display:flex;align-items:center;gap:var(--space-3);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius);padding:11px 13px;margin-bottom:var(--space-2);cursor:pointer;transition:border-color .15s;position:relative;min-width:0;box-sizing:border-box}
.rmd-c-scope__o:last-child{margin-bottom:0}
/* Hover: dezente Umrandung wie im Checkout (Fuellung wird NICHT geaendert). */
.rmd-c-scope__o:hover{border-color:var(--color-headline)}
/* Checkbox visuell versteckt (nicht display:none - bleibt fokussierbar) */
.rmd-c-scope__o input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.rmd-c-scope__o:focus-within{outline:2px solid var(--color-headline);outline-offset:2px}
.rmd-c-scope__box{width:18px;height:18px;border-radius:var(--radius-sm);border:1.5px solid var(--color-border-strong);flex:0 0 18px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
/* Haken: stroke MIT #fff-Fallback + zusaetzlich color (falls das Inline-stroke="currentColor" der
   SVG greift, wenn ein Token in einer alten tokens.css fehlt - sonst dunkler Haken auf schwarzem
   Kasten = unsichtbar; gleiche Fallen-Klasse wie --lh-flat, siehe design-system.md Kap. 9). */
.rmd-c-scope__box .rmd-icon{width:12px;height:12px;stroke:var(--color-on-dark,#fff);color:var(--color-on-dark,#fff);stroke-width:4;fill:none;opacity:0;transition:opacity .15s}
/* Checked-Zustand doppelt: .is-on (JS) UND natives input:checked (rein CSS) - der Haken erscheint
   damit auch, wenn das JS nicht laeuft oder .is-on ausbleibt. */
.rmd-c-scope__o.is-on .rmd-c-scope__box,
.rmd-c-scope__o input:checked~.rmd-c-scope__box{background:var(--color-headline);border-color:var(--color-headline)}
.rmd-c-scope__o.is-on .rmd-c-scope__box .rmd-icon,
.rmd-c-scope__o input:checked~.rmd-c-scope__box .rmd-icon{opacity:1}
.rmd-c-scope__img{width:64px;height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:center}
.rmd-c-scope__img img{width:100%;height:100%;object-fit:contain}
/* Name + Preis: Desktop nebeneinander (Preis rechts). */
.rmd-c-scope__body{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.rmd-c-scope__n{min-width:0;font-size:var(--fs-sm);line-height:1.3;color:var(--color-text)}
.rmd-c-scope__p{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-bold);white-space:nowrap;color:var(--color-headline)}
/* Nicht lieferbar */
.rmd-c-scope__o.is-out{opacity:.55;cursor:not-allowed}
.rmd-c-scope__o.is-out .rmd-c-scope__p{font-weight:var(--fw-medium);color:var(--color-text-muted)}
/* passt-zu-Kopplung: Zubehoer, das zur gewaehlten Ausfuehrung NICHT passt, wird ausgegraut +
   gesperrt (durchgestrichen) statt ausgeblendet - gleiche Sprache wie die Varianten-Kacheln (.is-off). */
.rmd-c-scope__o.is-off{opacity:.5;cursor:not-allowed;pointer-events:none}
.rmd-c-scope__o.is-off .rmd-c-scope__n{text-decoration:line-through;text-decoration-thickness:1px;color:var(--color-text-muted)}
/* Wartet auf Farbwahl (variables Zubehoer): dezent gedaempft, Hinweis "Farbe waehlen" statt Preis,
   kein einladender Hover (der Klick tut nichts, bis die Farbe steht). */
.rmd-c-scope__o.is-await{cursor:default}
.rmd-c-scope__o.is-await .rmd-c-scope__n{color:var(--color-text-muted)}
.rmd-c-scope__o.is-await:hover{border-color:var(--color-border)}
.rmd-c-scope__hint-color{font-family:var(--font-body);font-weight:var(--fw-regular);font-style:italic;color:var(--color-text-muted);white-space:nowrap}

@media(max-width:560px){
  .rmd-c-scope__grid{grid-template-columns:1fr}
  /* Option: Name + Preis stapeln (Preis unter dem Namen), damit ein langer Name nicht gegen
     den Preis quetscht. Bild etwas kleiner, damit der Text mehr Breite bekommt. */
  .rmd-c-scope__body{flex-direction:column;align-items:flex-start;gap:2px}
  .rmd-c-scope__img{width:52px;height:52px;flex:0 0 52px}
}

/* ============================================================
   KATEGORIESEITE (woocommerce/archive-product.php)
   Breadcrumb + Extra-Placeholder hier GLOBAL (auf der PDP liegen sie zusaetzlich in
   single-product.css; Werte identisch, dort gewinnt die spaeter geladene Datei).
   ============================================================ */
.rmd-breadcrumb{font-size:var(--fs-sm);color:var(--color-text-muted);padding:var(--space-6) 0 var(--space-4)}
.rmd-breadcrumb a{color:var(--color-text-muted);text-decoration:none}
.rmd-breadcrumb a:hover{color:var(--color-text)}

.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}

/* Pagination unter dem Produkt-Grid */
.rmd-cat__pagination{margin-top:var(--space-10);display:flex;justify-content:center}
.rmd-cat__pagination .page-numbers{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0}
.rmd-cat__pagination .page-numbers li{margin:0}
.rmd-cat__pagination .page-numbers a,.rmd-cat__pagination .page-numbers span{display:inline-flex;align-items:center;justify-content:center;min-width:var(--btn-height);height:var(--btn-height);padding:0 var(--space-3);border-radius:var(--radius-pill);font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-headline);text-decoration:none;background:var(--color-surface)}
.rmd-cat__pagination .page-numbers a:hover{background:var(--color-border)}
.rmd-cat__pagination .page-numbers .current{background:var(--color-signal);color:var(--color-on-signal)}
.rmd-cat__empty{text-align:center;color:var(--color-text-muted);padding:var(--space-10) 0}

/* Kategorie-Hero: links Text (mit Mehr/Weniger), rechts Banner-Bild */
.rmd-cat-hero{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
.rmd-cat-hero--solo{grid-template-columns:1fr;max-width:var(--container-narrow)}
.rmd-cat-hero__text{min-width:0}
.rmd-cat-hero__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-4xl);letter-spacing:-.02em;line-height:1.1;color:var(--color-headline);margin:var(--space-3) 0 var(--space-4)}
.rmd-cat-hero__desc{font-size:var(--fs-md);color:var(--color-text-muted);line-height:1.7}
.rmd-cat-hero__desc>*{margin:0 0 var(--space-3)}
.rmd-cat-hero__desc>*:last-child{margin-bottom:0}
.rmd-cat-hero__media{border-radius:var(--radius-card);overflow:hidden}
.rmd-cat-hero__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block}
/* Kacheln-Sektion der Ueberkategorie: Kopf bewusst KLEINER als der Seitentitel (H1 = fs-4xl),
   sonst wirkt "Welche Bauform brauchen Sie?" wie die Haupt-Ueberschrift (Vorlage: 30px). */
.rmd-cat-cards-sec .rmd-c-section__title,
.rmd-cat-sec .rmd-c-section__title{font-size:var(--fs-2xl);margin:0 0 var(--space-2);max-width:none}

/* ===== Landing-Hero (rmd-c-hero): Anwendungsbereiche + Ueberkategorie (Vorlage
   rmd-c-hero-anwendungsbereiche.html) - Eyebrow + grosse H1 (Signal-Mark) + Lead + zwei
   Buttons (btn-Block) + Schnellwahl-Chips. Sitzt in .rmd-cat-hero-sec (Aussenabstand).
   Buttons/Schrift/Farben aus dem Designsystem - Mockup-CSS gewinnt NICHT. */
.rmd-c-hero__top{max-width:var(--container-narrow)}
.rmd-c-hero__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-4xl);line-height:1.08;letter-spacing:-.02em;color:var(--color-headline);margin:var(--space-3) 0 var(--space-5)}
.rmd-c-hero__lead{font-size:var(--fs-md);line-height:1.7;color:var(--color-text-muted);margin:0;max-width:60ch}
.rmd-c-hero__lead strong{color:var(--color-text);font-weight:var(--fw-medium)}
.rmd-c-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.rmd-c-hero__chips{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.rmd-c-chip{position:relative;display:inline-flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-hairline);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-headline);text-decoration:none;overflow:hidden;transition:box-shadow .18s,transform .18s}
.rmd-c-chip::before{content:"";position:absolute;left:14px;top:50%;width:36px;height:36px;transform:translateY(-50%);border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,color-mix(in srgb,var(--color-signal) 85%,transparent) 0%,transparent 70%);transition:opacity .2s}
.rmd-c-chip:hover{box-shadow:inset 0 0 0 1px var(--color-border-strong);transform:translateY(-1px)}
.rmd-c-chip:hover::before{opacity:1}
.rmd-c-chip__ic{position:relative;display:flex;align-items:center;justify-content:center;color:var(--color-icon-quiet);transition:color .18s}
.rmd-c-chip__ic svg{width:20px;height:20px}
.rmd-c-chip:hover .rmd-c-chip__ic{color:var(--color-headline)}
.rmd-c-chip__l{position:relative}
.rmd-c-chip:focus-visible{outline:2px solid var(--color-headline);outline-offset:3px}
/* Sanfter, gestaffelter Auftritt - respektiert reduce-motion (unten abgeschaltet). */
.rmd-c-hero__top,.rmd-c-hero__actions,.rmd-c-hero__chips{opacity:0;transform:translateY(8px);animation:rmd-hero-in .5s ease forwards}
.rmd-c-hero__actions{animation-delay:.07s}
.rmd-c-hero__chips{animation-delay:.13s}
@keyframes rmd-hero-in{to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){.rmd-c-hero__title{font-size:var(--fs-3xl)}}
@media(max-width:640px){
  .rmd-c-hero__actions{flex-direction:column;align-items:stretch}
  .rmd-c-hero__chips{gap:var(--space-2)}
}
@media(prefers-reduced-motion:reduce){
  .rmd-c-hero__top,.rmd-c-hero__actions,.rmd-c-hero__chips{animation:none;opacity:1;transform:none}
  .rmd-c-chip,.rmd-c-chip::before{transition:none}
}

/* ===== Bauform-Picker (Ueberkategorie, Vorlage ueberkategorie-final.html) =====
   Weisses Panel mit Icon+Name je Unterkategorie, Haarlinien dazwischen. Hover/Fokus:
   "Licht geht an" - weicher gelber Lichtschein hinter dem Icon (radial, color-mix aus
   --color-signal), Icon hebt von icon-quiet auf headline. Kein Kasten, keine Fuellflaeche. */
.rmd-cat-hero + .rmd-c-picker{margin-top:var(--space-8)}
.rmd-c-picker{background:var(--color-bg);border-radius:var(--radius-panel);padding:var(--space-4) var(--space-3)}
.rmd-c-picker__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rmd-c-pick{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-3);position:relative;border-radius:var(--radius-lg);text-decoration:none}
.rmd-c-pick:not(:last-child)::before{content:"";position:absolute;right:0;top:var(--space-6);bottom:var(--space-6);width:1px;background:var(--color-hairline)}
.rmd-c-pick__ic{height:76px;display:flex;align-items:center;justify-content:center;color:var(--color-icon-quiet);position:relative;transition:color .28s ease}
.rmd-c-pick__ic svg{width:68px;height:68px;position:relative;z-index:1}
.rmd-c-pick__ic::after{content:"";position:absolute;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle, color-mix(in srgb, var(--color-signal) 95%, transparent) 0%, color-mix(in srgb, var(--color-signal) 45%, transparent) 42%, transparent 72%);transform:scale(.4);opacity:0;z-index:0;transition:transform .42s cubic-bezier(.2,.7,.3,1),opacity .34s ease}
.rmd-c-pick:hover .rmd-c-pick__ic::after,.rmd-c-pick:focus-visible .rmd-c-pick__ic::after{transform:scale(1);opacity:1}
.rmd-c-pick:hover .rmd-c-pick__ic,.rmd-c-pick:focus-visible .rmd-c-pick__ic{color:var(--color-headline)}
.rmd-c-pick__l b{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-bold);letter-spacing:-.01em;text-align:center;display:block;color:var(--color-text)}
.rmd-c-pick:focus-visible{outline:2px solid var(--color-headline);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  .rmd-c-pick__ic,.rmd-c-pick__ic::after{transition:none}
}
@media(max-width:767px){
  .rmd-c-picker__row{grid-template-columns:repeat(2,1fr)}
  .rmd-c-pick:not(:last-child)::before{display:none}
  .rmd-c-pick{padding:var(--space-5) var(--space-2);gap:var(--space-3)}
  .rmd-c-pick__ic{height:60px}
  .rmd-c-pick__ic svg{width:54px;height:54px}
  .rmd-c-pick__ic::after{width:84px;height:84px}
}
/* Enger fassen: Breadcrumb + Hero + Grid lesen als EINE Einheit statt drei Sektionen mit vollem
   Rhythmus. Oben liefert die Breadcrumb bereits Luft; unten sitzt das Produkt-Grid direkt am Hero
   (sonst summieren sich Hero-Unterkante + Grid-Oberkante zu doppeltem Sektions-Abstand). */
.rmd-cat-hero-sec.rmd-c-section--pad-default{padding-top:var(--space-8);padding-bottom:var(--space-10)}
/* Grid sitzt jetzt auf getoentem Grund (eigenes Band) -> moderater Innenabstand oben statt bündig. */
.rmd-cat-hero-sec + .rmd-c-section--pad-default{padding-top:var(--space-10)}

/* Mehr/Weniger (reines CSS, checkbox-hack): Beschreibung auf 3 Zeilen begrenzt, Label togglet */
.rmd-more__cb{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.rmd-more__body{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rmd-more__cb:checked ~ .rmd-more__body{display:block;-webkit-line-clamp:none;overflow:visible}
.rmd-more__btn{display:inline-flex;align-items:center;margin-top:var(--space-4);font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-headline);cursor:pointer;position:relative}
.rmd-more__btn::after{content:"Mehr anzeigen"}
.rmd-more__cb:checked ~ .rmd-more__btn::after{content:"Weniger anzeigen"}
.rmd-more__btn::before{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:var(--color-signal);border-radius:2px}
.rmd-more__cb:focus-visible ~ .rmd-more__btn{outline:2px solid var(--color-headline);outline-offset:3px}

@media(max-width:900px){
  .rmd-cat-hero{grid-template-columns:1fr;gap:var(--space-8)}
  .rmd-cat-hero__media{order:-1}
}
@media(max-width:767px){
  /* Banner randlos: aus dem Container-Padding ausbrechen -> volle Bildschirmbreite, keine Ecken */
  .rmd-cat-hero__media{margin-left:calc(-1 * var(--space-6));margin-right:calc(-1 * var(--space-6));border-radius:0}
  /* Abstand Breadcrumb -> Hero verringern */
  .rmd-cat-hero-sec.rmd-c-section--pad-default{padding-top:var(--space-4)}
  .rmd-breadcrumb{padding-bottom:var(--space-2)}
}

/* ===== Komponente: Gutschein-Feld - dezent einklappbar (EINE Quelle: Warenkorb + Kasse) =====
   Markup: template-parts/blocks/coupon.php. Default nur die Trigger-Zeile; Klick oeffnet das
   Feld (Toggle in blocks.js). Erfolgs-Zeile bei aktivem Gutschein. Aenderungen hier wirken
   ueberall, wo die Komponente genutzt wird (Warenkorb, Kasse, Styleguide). */
.rmd-coupon-wrap{width:100%;margin:0 0 var(--space-5)}

/* Trigger-Zeile (dezent): Tag-Icon + "Sie haben einen Aktionscode?" + Chevron.
   WICHTIG: Kadence gibt JEDEM <button> einen gelben Grund + Button-Chrome (Radius/Schatten/
   Min-Hoehe) - hier hart abschalten, damit es eine reine Textzeile bleibt (kein gelber Grund). */
.rmd-coupon-trigger{display:inline-flex;align-items:center;gap:var(--space-2);margin:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;cursor:pointer;font-family:var(--font-body);font-weight:var(--fw-regular);font-size:var(--fs-sm);color:var(--color-text-muted);transition:color .15s}
.rmd-coupon-trigger:hover{color:var(--color-text)}
.rmd-coupon-trigger .rmd-icon{flex:0 0 auto;width:15px;height:15px;color:currentColor}
.rmd-coupon-trigger u{text-decoration:none;font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--color-headline);position:relative}
.rmd-coupon-trigger u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--color-signal);border-radius:2px}
.rmd-coupon-trigger .rmd-icon:last-child{width:13px;height:13px;color:var(--color-text-muted);transition:transform .25s}
.rmd-coupon-collapse.is-open .rmd-coupon-trigger .rmd-icon:last-child{transform:rotate(180deg)}

/* Einklapp-Panel (grid-rows-Reveal, sauber animiert) */
.rmd-coupon-panel{display:grid;grid-template-rows:0fr;opacity:0;margin-top:0;transition:grid-template-rows .28s ease,opacity .2s,margin .28s}
.rmd-coupon-collapse.is-open .rmd-coupon-panel{grid-template-rows:1fr;opacity:1;margin-top:var(--space-3)}
.rmd-coupon-panel__inner{overflow:hidden}

/* Feld: weisse Pill mit Rand, Tag-Icon, randloses Feld - und innen ein eigenstaendiger
   DUNKLER "Einlösen"-Button (klare Affordance statt schwebendem Text). Fokus: dunkler Rand
   + zarter Ring. Kein Gelb. */
.rmd-coupon{display:flex;align-items:center;gap:var(--space-2);background:var(--color-bg);border:1.5px solid var(--color-border);border-radius:var(--radius-pill);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);transition:border-color .15s,box-shadow .15s}
.rmd-coupon:focus-within{border-color:var(--color-headline);box-shadow:0 0 0 3px rgba(13,16,18,.06)}
.rmd-coupon .rmd-icon{flex:0 0 17px;width:17px;height:17px;color:var(--color-text-muted);margin:0}
/* NUR der aeussere Pill-Rand: Kadence gibt input[type=text] einen eigenen Rand/BG/Radius
   (spezifischer als .rmd-coupon__input) -> hart wegnehmen, sonst doppelte Umrandung. */
.rmd-coupon__input,
.rmd-coupon__input:focus,
.rmd-coupon__input:focus-visible{flex:1 1 auto;min-width:0;width:auto;border:0!important;outline:none!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:var(--space-2) 0;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-text);line-height:1.3}
.rmd-coupon__input::placeholder{color:var(--color-text-muted)}
.rmd-coupon__btn,
.rmd-coupon__btn:focus,
.rmd-coupon__btn:active{flex:0 0 auto;height:38px;min-height:0;border:0!important;box-shadow:none!important;background:var(--btn-dark-bg)!important;border-radius:var(--radius-pill)!important;padding:0 var(--space-5);font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--btn-dark-text)!important;white-space:nowrap;cursor:pointer;transition:background .15s,transform .08s}
.rmd-coupon__btn:hover{background:var(--btn-dark-bg-hover)!important}
.rmd-coupon__btn:active{transform:scale(.97)}
.rmd-coupon-wrap.is-loading .rmd-coupon{opacity:.55;pointer-events:none}
.rmd-coupon__msg{margin-top:var(--space-2);font-size:var(--fs-xs);line-height:var(--lh-snug)}
.rmd-coupon__msg:empty{display:none}
.rmd-coupon__msg ul,.rmd-coupon__msg p{list-style:none;margin:0;padding:0}
.rmd-coupon__msg .woocommerce-error{color:var(--color-error)}
.rmd-coupon__msg .woocommerce-message{color:var(--color-success)}

/* Eingeloest: Erfolgs-Zeile mit Entfernen */
.rmd-coupon-applied{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--color-surface);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-3) var(--space-3) var(--space-4);margin:0 0 var(--space-2)}
.rmd-coupon-applied__l{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);min-width:0}
.rmd-coupon-applied__ok{flex:0 0 20px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--color-success);display:flex;align-items:center;justify-content:center}
.rmd-coupon-applied__ok .rmd-icon{width:11px;height:11px;color:var(--color-on-dark)}
.rmd-coupon-applied__l b{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--color-headline)}
.rmd-coupon-applied__l span{color:var(--color-text-muted)}
.rmd-coupon-applied__x{flex:0 0 26px;width:26px;height:26px;border:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important;border-radius:var(--radius-pill)!important;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;color:var(--color-text-muted)}
.rmd-coupon-applied__x:hover{background:var(--color-hairline)!important}
.rmd-coupon-applied__x .rmd-icon{width:12px;height:12px;color:currentColor}

/* ===== Ueber-uns / Vertrauensseiten ===== */
.rmd-c-about-hero{padding:var(--space-section) 0}
.rmd-c-about-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-12);align-items:center}
.rmd-c-about-hero__copy{min-width:0}
.rmd-c-about-hero__title{font-family:var(--font-head);font-size:var(--fs-5xl);font-weight:var(--fw-head);line-height:var(--lh-flat);letter-spacing:-.04em;color:var(--color-headline);max-width:14ch;margin:var(--space-4) 0 var(--space-6)}
.rmd-c-about-hero__lead{font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--color-text-muted);max-width:58ch;margin:0}
.rmd-c-about-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.rmd-c-about-hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);margin:var(--space-8) 0 0;padding:var(--space-5) 0 0;border-top:thin solid var(--color-hairline)}
.rmd-c-about-hero__trust li{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-c-about-hero__trust .rmd-icon{width:var(--space-4);height:var(--space-4);color:var(--color-headline)}
.rmd-c-about-hero__visual{position:relative;min-width:0}
.rmd-c-about-hero__figure{position:relative;overflow:hidden;border-radius:var(--radius-panel);margin:0;background:var(--color-surface)}
.rmd-c-about-hero__figure .rmd-c-about-hero__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.rmd-c-about-hero__caption{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-12) var(--space-6) var(--space-6);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--color-dark) 88%,transparent));color:var(--color-on-dark)}
.rmd-c-about-hero__caption strong{font-family:var(--font-head);font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--color-on-dark)}
.rmd-c-about-hero__status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-on-dark-muted)}
.rmd-c-about-hero__status i{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-online)}
.rmd-c-about-hero__badge{position:absolute;top:var(--space-6);left:calc(var(--space-6) * -1);display:flex;align-items:center;gap:var(--space-3);max-width:24ch;padding:var(--space-4) var(--space-5);border-radius:var(--radius-card);background:var(--color-signal);color:var(--color-on-signal);box-shadow:var(--shadow-md)}
.rmd-c-about-hero__badge strong{font-family:var(--font-head);font-size:var(--fs-2xl);line-height:var(--lh-flat)}
.rmd-c-about-hero__badge span{font-size:var(--fs-xs);line-height:var(--lh-snug)}

.rmd-c-facts--1{grid-template-columns:1fr}
.rmd-c-facts--2{grid-template-columns:repeat(2,1fr)}
.rmd-c-facts--3{grid-template-columns:repeat(3,1fr)}

.rmd-c-media-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:calc(var(--space-20) * 2);gap:var(--space-4)}
.rmd-c-media-grid__item{position:relative;overflow:hidden;border-radius:var(--radius-card);margin:0;background:var(--color-surface)}
.rmd-c-media-grid__item--featured{grid-column:span 2;grid-row:span 2}
.rmd-c-media-grid__item--wide{grid-column:span 2}
.rmd-c-media-grid__item .rmd-img{display:block;width:100%;height:100%;object-fit:cover}
.rmd-c-media-grid__item figcaption{position:absolute;inset:auto 0 0;padding:var(--space-8) var(--space-4) var(--space-4);background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--color-dark) 84%,transparent));font-size:var(--fs-sm);color:var(--color-on-dark)}

.rmd-c-story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.rmd-c-story-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.rmd-c-story-card{display:flex;min-width:0;background:var(--color-bg);border-radius:var(--radius-card);overflow:hidden}
.rmd-c-story-card__link{display:flex;flex-direction:column;width:100%;color:var(--color-text);text-decoration:none}
.rmd-c-story-card__link:hover{color:var(--color-text)}
.rmd-c-story-card__media{display:block;overflow:hidden;background:var(--color-surface);aspect-ratio:16/10}
.rmd-c-story-card__media .rmd-img{display:block;width:100%;height:100%;object-fit:cover}
.rmd-c-story-card__body{display:flex;flex-direction:column;flex:1;padding:var(--space-6)}
.rmd-c-story-card__eyebrow{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);margin-bottom:var(--space-3)}
.rmd-c-story-card__title{font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-head);line-height:var(--lh-snug);letter-spacing:-.02em;color:var(--color-headline)}
.rmd-c-story-card__text{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--color-text-muted);margin-top:var(--space-3)}
.rmd-c-story-card__cta{display:flex;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-6);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--color-headline)}
.rmd-c-story-card__cta .rmd-icon{width:var(--space-4);height:var(--space-4)}
.rmd-c-story-grid+.rmd-c-quote{margin-top:var(--space-8)}
.rmd-c-quote--wide{max-width:none}

/* Beratungsdialog: gebaut und im Styleguide abnehmbar, auf echten Seiten noch nicht gerendert. */
.rmd-c-consultation-demo{display:flex;align-items:center;justify-content:center;min-height:calc(var(--space-20) * 2);padding:var(--space-8);border-radius:var(--radius-card);background:var(--color-surface)}
.rmd-c-consultation{width:min(94vw,calc(var(--container-narrow) + var(--space-20) * 3));max-height:92vh;padding:0;border:0;border-radius:var(--radius-panel);background:var(--color-bg);color:var(--color-text);box-shadow:var(--shadow-lg);overflow:auto}
.rmd-c-consultation::backdrop{background:color-mix(in srgb,var(--color-dark) 68%,transparent)}
.rmd-c-consultation__close{position:absolute;top:var(--space-4);right:var(--space-4);z-index:3;width:var(--space-10);height:var(--space-10);display:flex;align-items:center;justify-content:center;border:0;border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-headline);cursor:pointer}
.rmd-c-consultation__close .rmd-icon{width:var(--space-5);height:var(--space-5)}
.rmd-c-consultation__close:focus-visible{outline:thin solid var(--color-headline);outline-offset:var(--space-1)}
.rmd-c-consultation__shell{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);min-height:min(72vh,var(--container-narrow))}
.rmd-c-consultation__intro{display:flex;flex-direction:column;padding:var(--space-12);background:linear-gradient(180deg,var(--color-surface),color-mix(in srgb,var(--color-surface) 82%,var(--color-hairline)))}
.rmd-c-consultation__intro h2{font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:var(--fw-head);line-height:var(--lh-tight);letter-spacing:-.03em;color:var(--color-headline);margin:var(--space-4) 0 var(--space-5)}
.rmd-c-consultation__intro>p{font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--color-text-muted);margin:0}
.rmd-c-consultation__trust{display:flex;align-items:flex-start;gap:var(--space-3);margin-top:auto;padding-top:var(--space-8);border-top:thin solid var(--color-hairline);font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-c-consultation__trust .rmd-icon{width:var(--space-5);height:var(--space-5);flex:0 0 var(--space-5)}
/* Test-Modus: Produkt-Kachel in der Intro-Spalte (zeigt dem Kunden, was er testet) */
.rmd-c-consultation__product{display:flex;align-items:center;gap:var(--space-4);margin-top:var(--space-6);padding:var(--space-4);border-radius:var(--radius);background:var(--color-bg);border:thin solid var(--color-hairline)}
.rmd-c-consultation__product img{width:var(--space-16);height:var(--space-16);flex:0 0 var(--space-16);object-fit:contain;border-radius:var(--radius-sm,8px);background:var(--color-surface)}
.rmd-c-consultation__product>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.rmd-c-consultation__product-label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted)}
.rmd-c-consultation__product strong{font-family:var(--font-head);font-size:var(--fs-base);font-weight:var(--fw-semibold);line-height:var(--lh-snug,1.25);color:var(--color-headline)}
.rmd-c-consultation__product-meta{font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-c-consultation__form{display:flex;flex-direction:column;padding:var(--space-10) var(--space-12)}
.rmd-c-consultation__progress{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:0 0 var(--space-8);padding:0}
.rmd-c-consultation__progress li{display:flex;align-items:center;gap:var(--space-2);padding-bottom:var(--space-3);border-bottom:thin solid var(--color-hairline);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text-muted)}
.rmd-c-consultation__progress li.is-active{border-color:var(--color-headline);color:var(--color-headline)}
.rmd-c-consultation__progress b{width:var(--space-8);height:var(--space-8);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);background:var(--color-surface);font-size:var(--fs-xs)}
.rmd-c-consultation__progress li.is-active b{background:var(--color-dark);color:var(--color-on-dark)}
.rmd-c-consultation__step{min-width:0;margin:0;padding:0;border:0}
.rmd-c-consultation__step legend{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-head);line-height:var(--lh-snug);color:var(--color-headline);margin-bottom:var(--space-5)}
.rmd-c-consultation__options{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--space-3);margin-bottom:var(--space-6)}
.rmd-c-consultation__options label{display:flex;cursor:pointer}
.rmd-c-consultation__options input{position:absolute;opacity:0;pointer-events:none}
.rmd-c-consultation__options span{display:flex;align-items:center;width:100%;min-height:var(--field-height);padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:var(--color-surface);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-text)}
.rmd-c-consultation__options input:checked+span{background:var(--color-dark);color:var(--color-on-dark)}
.rmd-c-consultation__options input:focus-visible+span{outline:thin solid var(--color-headline);outline-offset:var(--space-1)}
.rmd-c-consultation__fieldrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}
.rmd-c-consultation__fieldrow:last-of-type{margin-bottom:0}
.rmd-c-consultation__fieldrow--zip{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr) minmax(0,1fr)}
.rmd-c-consultation__form .rmd-field{margin-bottom:var(--space-4)}
.rmd-c-consultation__form .rmd-field:last-child{margin-bottom:0}
.rmd-c-consultation__fieldrow .rmd-field{margin-bottom:0}
.rmd-c-consultation__consent{align-items:flex-start;margin-top:var(--space-2)}
.rmd-c-consultation__actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:auto;padding-top:var(--space-6);border-top:thin solid var(--color-hairline)}
.rmd-c-consultation__success{padding:var(--space-16);text-align:center}
.rmd-c-consultation__successicon{display:flex;align-items:center;justify-content:center;width:var(--space-14);height:var(--space-14);margin:0 auto var(--space-5);border-radius:var(--radius-pill);background:var(--color-success-bg);color:var(--color-success-ink)}
.rmd-c-consultation__successicon .rmd-icon{width:var(--space-6);height:var(--space-6)}
.rmd-c-consultation__success h2{font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:var(--fw-head);line-height:var(--lh-tight);letter-spacing:-.03em;color:var(--color-headline);max-width:20ch;margin:var(--space-4) auto}
.rmd-c-consultation__success p{font-size:var(--fs-base);color:var(--color-text-muted);max-width:52ch;margin:0 auto var(--space-8)}

@media(max-width:1024px){
  .rmd-c-about-hero__grid{grid-template-columns:1fr;gap:var(--space-8)}
  .rmd-c-about-hero__copy{order:1}
  .rmd-c-about-hero__visual{order:2}
  .rmd-c-facts--3{grid-template-columns:repeat(2,1fr)}
  .rmd-c-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rmd-c-story-grid,.rmd-c-story-grid--2{grid-template-columns:1fr}
  .rmd-c-consultation__shell{grid-template-columns:1fr}
  .rmd-c-consultation__intro{padding:var(--space-8)}
  .rmd-c-consultation__trust{margin-top:var(--space-6)}
}
@media(max-width:767px){
  .rmd-c-about-hero__title{margin-top:var(--space-3)}
  .rmd-c-about-hero__actions{flex-direction:column}
  .rmd-c-about-hero__badge{top:var(--space-4);left:var(--space-4)}
  .rmd-c-about-hero__trust{flex-direction:column}
  .rmd-c-facts--2,.rmd-c-facts--3{grid-template-columns:1fr}
  .rmd-c-media-grid{grid-auto-rows:calc(var(--space-20) + var(--space-12))}
  .rmd-c-media-grid__item--featured{grid-column:span 2}
  .rmd-c-consultation{width:94vw;max-height:94vh;border-radius:var(--radius-card)}
  .rmd-c-consultation__intro,.rmd-c-consultation__form{padding:var(--space-6)}
  .rmd-c-consultation__intro{padding-top:var(--space-12)}
  .rmd-c-consultation__progress span{display:none}
  .rmd-c-consultation__options,.rmd-c-consultation__fieldrow{grid-template-columns:1fr}
  .rmd-c-consultation__fieldrow--zip{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .rmd-c-consultation__fieldrow--zip .rmd-field:last-child{grid-column:1 / -1}
  .rmd-c-consultation__actions{flex-direction:column-reverse}
}

/* ========================================================================
   ICON-SYSTEM (Lucide) - ZWEISTUFIGE Strichstaerke (bewusst am Dateiende,
   ueberschreibt die uneinheitlichen Block-Strichstaerken):
   - klein / inline (< ~20px: Button-Pfeile, Chip-Haken, Mengen +/-) = 2.0
     (1.5 waere auf 16px optisch ~1px und wirkt auf gelbem Button blass)
   - gross (>= 26px: Icon-Block md/lg/xl, Facts/Cardrow/Feature) = 1.5
   Brand-Icons (mehrfarbig, .rmd-icon--brand) sind ausgenommen: eigene Farben.
   ======================================================================== */
.rmd-icon:not(.rmd-icon--brand){fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rmd-icon.rmd-c-icon--md,.rmd-icon.rmd-c-icon--lg,.rmd-icon.rmd-c-icon--xl,
.rmd-c-icon:not(.rmd-icon--brand),
.rmd-c-facts__ico .rmd-icon,.rmd-c-cardrow__ico .rmd-icon,.rmd-feature .rmd-icon{stroke-width:1.5}
/* Brand-Icons: KEINE fill/stroke-Regel - sie tragen ihre eigenen Farben (fill="none" am <svg>,
   eigene fills/strokes an den Pfaden). Ein Reset waere falsch (fill:initial = Schwarz -> deckt zu). */
/* Groessen-Klassen (Helper rmd_icon($name,'sm|md|lg|xl')) */
.rmd-c-icon--sm{width:20px;height:20px;flex-basis:20px}
.rmd-c-icon--md{width:26px;height:26px;flex-basis:26px}
.rmd-c-icon--lg{width:34px;height:34px;flex-basis:34px}
.rmd-c-icon--xl{width:44px;height:44px;flex-basis:44px}