/* 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-section--pad-xl{padding-top:calc(var(--space-section) + var(--space-8));padding-bottom:calc(var(--space-section) + var(--space-8))} .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;transition:transform .18s ease} /* Globales Button-Design: das (Pfeil-)Icon wandert beim Hover nach rechts. Gilt fuer jeden .rmd-c-btn mit Icon - der btn-Block setzt den Pfeil automatisch (ausser Warenkorb, s. btn.php). */ .rmd-c-btn:hover svg,.rmd-c-btn:hover .rmd-icon{transform:translateX(3px)} @media(prefers-reduced-motion:reduce){.rmd-c-btn svg,.rmd-c-btn .rmd-icon{transition:none}.rmd-c-btn:hover svg,.rmd-c-btn:hover .rmd-icon{transform: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)} /* secondary: weisse Flaeche, schwarzer Rand, schwarze Schrift (klare Sekundaer-Aktion neben dem gelben Primaer-CTA). Hover invertiert (schwarze Flaeche, weisse Schrift). */ .rmd-c-btn--secondary{background:var(--color-bg);color:var(--color-headline);border-color:var(--color-headline)} .rmd-c-btn--secondary:hover{background:var(--color-headline);color:var(--color-bg);border-color:var(--color-headline)} /* 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)} /* Rating als Link zur Reviews-Section (PDP): klickbar, aber KEINE Unterstreichung/Farbaenderung (Kundenwunsch). */ .rmd-c-rating--link,.rmd-c-rating--link:hover,.rmd-c-rating--link:focus{text-decoration:none;color:inherit;cursor:pointer} .rmd-c-rating--link:focus-visible{outline:2px solid var(--color-signal);outline-offset:3px;border-radius:4px} /* Reviews-Section: Sticky-Header-Offset fuer den Anker + kompaktere Abstaende (Kundenwunsch: weniger White-Space nach oben/unten). Statt der grossen Sektions-Padding (112px) hier 40px, und die direkt folgende Section (Extra-Content) bekommt oben ebenfalls nur 40px. */ .rmd-c-reviews-anchor{scroll-margin-top:calc(var(--rmd-header-h,72px) + var(--space-6));padding-top:var(--space-10);padding-bottom:var(--space-16)} .rmd-c-reviews-anchor + .rmd-c-section{padding-top:var(--space-10)} /* Mobil bleibt der Abstand nach unten kompakter (nur Desktop soll luftiger zum Extra-Content sein). */ @media(max-width:767px){.rmd-c-reviews-anchor{padding-bottom:var(--space-10)}} /* ===== 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
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;flex-direction:column;align-items:flex-start;gap:var(--space-4);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)} .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:none} .rmd-c-faq__hint a{color:var(--color-on-dark);font-weight:var(--fw-medium);position:relative} /* Hover: Schrift MUSS hell bleiben. Die globale Regel `body a:hover{color:--color-link-hover}` (dunkel, fuer helle Flaechen) faerbt den Link sonst auf dem dunklen Panel dunkel -> unsichtbar. Hier zurueck auf Signal-Gelb (die gelbe Unterstreichung wird zur ganzen Schrift). */ .rmd-c-faq__hint a:hover,.rmd-c-faq__hint a:focus{color:var(--color-signal)} .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-6) var(--space-6) 0;max-width:none} /* Helle/hintergrundlose Variante (--plain): FAQ als loser Inline-Block im Beitragsfluss (kein dunkles Panel). Dunkler Text auf hellem Grund, kompaktere Masse, helle Hairlines. */ .rmd-c-faq--plain{background:transparent;border-radius:0;overflow:visible} .rmd-c-faq--plain .rmd-c-faq__main{padding:0} .rmd-c-faq--plain .rmd-c-faq__top{margin-bottom:var(--space-6)} .rmd-c-faq--plain .rmd-c-faq__h{color:var(--color-headline);font-size:var(--fs-2xl)} .rmd-c-faq--plain .rmd-c-faq__row,.rmd-c-faq--plain .rmd-c-faq__row:first-of-type{border-color:var(--color-hairline)} .rmd-c-faq--plain .rmd-c-faq__q{color:var(--color-headline)} .rmd-c-faq--plain .rmd-c-faq__pl{color:var(--color-text-muted)} .rmd-c-faq--plain .rmd-c-faq__row[open] .rmd-c-faq__pl{color:var(--color-signal)} .rmd-c-faq--plain .rmd-c-faq__a{color:var(--color-text);font-size:var(--fs-base);line-height:1.6} .rmd-c-faq--plain .rmd-c-faq__q:focus-visible{outline-color:var(--color-headline)} /* Mehrabschnittige FAQ-Antworten (Absaetze, Listen, Fett) sauber setzen. */ .rmd-c-faq__a > :first-child{margin-top:0} .rmd-c-faq__a > :last-child{margin-bottom:0} .rmd-c-faq__a p{margin:0 0 var(--space-3)} .rmd-c-faq__a ul,.rmd-c-faq__a ol{margin:var(--space-3) 0;padding-left:var(--space-5)} .rmd-c-faq__a li{margin:0 0 var(--space-1)} .rmd-c-faq__a strong{color:var(--color-on-dark)} /* Tabelle in FAQ-Antworten (z.B. Dioptrien/Vergroesserung) - dunkles Panel, zarte Trennlinien. */ .rmd-c-faq__a table{width:100%;border-collapse:collapse;margin:var(--space-4) 0;font-size:var(--fs-sm)} .rmd-c-faq__a th,.rmd-c-faq__a td{text-align:left;padding:var(--space-2) var(--space-5) var(--space-2) 0;border-bottom:1px solid var(--color-hairline-dark)} .rmd-c-faq__a th{color:var(--color-on-dark);font-family:var(--font-head);font-weight:var(--fw-semibold)} .rmd-c-faq__side{background:var(--color-dark-2);padding:var(--space-16) var(--space-12)} .rmd-c-faq__sh{display:flex;flex-direction:column;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);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} .rmd-c-faq__team span{width:42px;height:42px;border-radius:50%;border:2.5px solid var(--color-on-dark);margin-left:-13px;background:var(--color-dark-social-hover);display:flex;align-items:center;justify-content:center;overflow:visible;position:relative} .rmd-c-faq__team span:first-child{margin-left:0} .rmd-c-faq__team img{width:100%;height:100%;object-fit:cover;border-radius:50%} .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)} /* Felder einheitlich mit den anderen Formularen (Pill-Form wie Checkout/Basis, 1.5px-Rand, gleiche Polsterung). Bewusst WEISS mit schwarzer Schrift, auch auf dem dunklen Panel - und sie bleiben bei Hover/Fokus weiss. WICHTIG (Kadence-Formular-Falle): an den Formular-Container .rmd-c-faq__f binden. Kadence stylt input[type=text|email|...] global inkl. border-radius:3px mit Spezifitaet (0,1,1) und schlaegt sonst die einzelne Klasse .rmd-c-faq__in (0,1,0) - dann bekamen Text-/E-Mail-Felder Kadences 3px, waehrend select/textarea unseren Radius trugen (drei verschiedene Rundungen!). .rmd-c-faq__f .rmd-c-faq__in = (0,2,0) gewinnt und vereinheitlicht alle Feldtypen. */ .rmd-c-faq__f .rmd-c-faq__in{width:100%;background:var(--color-bg);border:1.5px solid var(--color-field-border);border-radius:var(--radius-pill);padding:var(--space-3) var(--space-4);font-size:var(--fs-base);color:var(--color-text);outline:none;box-shadow:none;transition:border-color .15s ease,box-shadow .15s ease} .rmd-c-faq__f .rmd-c-faq__in::placeholder{color:var(--color-text-muted)} .rmd-c-faq__f .rmd-c-faq__in:hover{border-color:var(--color-headline)} /* Fokus: Feld bleibt WEISS, nur dunklerer Rand + dezenter Ring - KEIN Grau, KEIN Signal-Gelb. */ .rmd-c-faq__f .rmd-c-faq__in:focus{border-color:var(--color-headline);background:var(--color-bg);box-shadow:0 0 0 3px rgba(0,0,0,.06)} /* Kommentarfeld/Textarea: kein Pill (saehe bei Mehrzeilern seltsam aus), sondern radius-lg wie das Standard-Textarea in Checkout/Basis-Formularen. */ .rmd-c-faq__f textarea.rmd-c-faq__in{min-height:118px;resize:vertical;line-height:var(--lh-normal);border-radius:var(--radius-lg)} .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} /* Hover hell halten (sonst zieht `body a:hover` den Link ins Dunkle -> unsichtbar auf dem Panel). */ .rmd-c-faq__legal a:hover,.rmd-c-faq__legal a:focus{color:var(--color-on-dark)} /* FAQ-Formular GLOBAL (Honeypot + Datenschutz-Checkbox + Statusmeldung). Muss auch dort greifen, wo das Formular ausserhalb der Support-Seiten steht (Produkt-/Kategorieseiten) - support.css laedt dort NICHT. Der Honeypot MUSS versteckt sein, sonst fuellt Browser-Autofill ihn und die Anfrage wird still verworfen. */ .rmd-c-faq__hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .rmd-c-faq__check{display:flex;gap:var(--space-2);align-items:flex-start;font-size:var(--fs-xs);line-height:1.5;color:var(--color-on-dark);margin-bottom:var(--space-3)} .rmd-c-faq__check input{margin-top:3px;flex:0 0 auto;accent-color:var(--color-signal)} .rmd-c-faq__check a{color:var(--color-on-dark);text-decoration:underline;text-underline-offset:2px} .rmd-c-faq__check a:hover,.rmd-c-faq__check a:focus{color:var(--color-on-dark)} .rmd-c-faq__msg{margin:var(--space-3) 0 0;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm)} .rmd-c-faq__msg.is-ok{color:var(--color-online)} .rmd-c-faq__msg.is-err{color:var(--color-sale)} .rmd-c-faq__send.is-loading{opacity:.6;pointer-events:none} @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)} } @media(max-width:767px){ .rmd-c-faq__hint{max-width:none} } /* ===== Bild-Text-Spalten (cols, ersetzt imgtext) ===== */ /* Mehrere cols-Reihen (Kategorie-Extra-Content) vertikal gestapelt mit Luft dazwischen. */ .rmd-extra-rows{display:grid;gap:var(--space-16)} /* Extra-Content-Bilder im Querformat 770x450 (Upload-Format des Kunden) - nicht auf 4:3 beschneiden. Bild UND Platzhalter-Box auf dasselbe Verhaeltnis. */ .rmd-extra-rows .rmd-c-cols__media img{aspect-ratio:77/45} .rmd-extra-rows .rmd-c-cols__media--ph{aspect-ratio:77/45} .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{position:relative;margin:0;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__cap{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-cols__cap strong{font-family:var(--font-head);font-size:var(--fs-lg);line-height:var(--lh-snug);color:var(--color-on-dark)} .rmd-c-cols__status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--fs-xs);color:var(--color-on-dark-muted)} .rmd-c-cols__status i{width:var(--space-2);height:var(--space-2);border-radius:var(--radius-pill);background:var(--color-online)} /* Platzhalter-Bildbox (kein Bild gesetzt): gestreift, mit Icon + Beschriftung. */ .rmd-c-cols__media--ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/11;background:repeating-linear-gradient(45deg,var(--color-surface) 0,var(--color-surface) 14px,var(--color-bg) 14px,var(--color-bg) 28px)} .rmd-c-cols__ph{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4);text-align:center;color:var(--color-text-muted)} .rmd-c-cols__ph .rmd-icon{width:32px;height:32px} .rmd-c-cols__phcap{font-size:var(--fs-sm)} /* ===== Isolux-Diagramme (aufklappbare Karten, 2-spaltig) ===== */ .rmd-c-isolux__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start} .rmd-c-isolux__card{background:var(--color-bg);border:1px solid var(--color-hairline);border-radius:var(--radius-card);overflow:hidden} .rmd-c-isolux__sum{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);cursor:pointer;list-style:none;font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);color:var(--color-headline);transition:background .15s} .rmd-c-isolux__sum::-webkit-details-marker{display:none} .rmd-c-isolux__sum:hover{background:var(--color-surface)} .rmd-c-isolux__card[open] .rmd-c-isolux__sum{border-bottom:1px solid var(--color-hairline)} .rmd-c-isolux__pl{position:relative;flex:0 0 15px;width:15px;height:15px} .rmd-c-isolux__pl::before,.rmd-c-isolux__pl::after{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:var(--color-headline);transform:translateY(-50%);border-radius:2px} .rmd-c-isolux__pl::after{transform:translateY(-50%) rotate(90deg);transition:transform .2s} .rmd-c-isolux__card[open] .rmd-c-isolux__pl::after{transform:translateY(-50%) rotate(0)} .rmd-c-isolux__body{padding:var(--space-5)} .rmd-c-isolux__img{width:100%;height:auto;display:block} .rmd-c-isolux__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;color:var(--color-text-muted);font-size:var(--fs-sm);text-align:center;padding:var(--space-4);border-radius:var(--radius);background:repeating-linear-gradient(45deg,var(--color-surface) 0,var(--color-surface) 14px,var(--color-bg) 14px,var(--color-bg) 28px)} @media(max-width:767px){.rmd-c-isolux__grid{grid-template-columns:1fr}} .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-section--pad-xl{padding-top:var(--space-14);padding-bottom:var(--space-14)} .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)} /* Karten-Variante (style=cards): Icon oben, Wert fett, Beschreibung darunter - vertikale Karten auf hellem Grund (Vorlage: Anwendungsbereich-Screenshot). Nur Layout; Basis-Grid/Spalten bleiben. */ .rmd-c-facts--cards{background:transparent;border-radius:0;overflow:visible;gap:var(--space-4)} /* border:0 hebt die Haarlinie auf, die die Band-Variante auf Handy-Breite als border-bottom setzt (sonst harter Strich unter den Karten). */ .rmd-c-facts--cards .rmd-c-facts__cell{flex-direction:column;align-items:flex-start;gap:var(--space-3);margin:0;padding:var(--space-6);background:var(--color-surface);border:0;border-radius:var(--radius-card)} .rmd-c-facts--cards .rmd-c-facts__ico{margin-bottom:var(--space-1)} .rmd-c-facts--cards .rmd-c-facts__txt{display:flex;flex-direction:column;gap:var(--space-2)} /* Heading der Karten (Beleuchtungsstärke etc.): Montserrat 800, 16px/24px, Textfarbe (lt. Vorgabe). */ .rmd-c-facts--cards .rmd-c-facts__txt b{font-family:var(--font-head);font-weight:800;font-size:var(--fs-base);line-height:24px;color:var(--color-text)} .rmd-c-facts--cards .rmd-c-facts__txt span{line-height:1.5} /* ===== Kennzahlen-Panel (Stil dark|light, Vorlage Zahlen-2b "Hero-Zahl"): grosse Hero-Zahl links, uebrige Kennzahlen im 2er-Raster rechts. Farben ueber lokale Variablen -> --light = weisse Variante. ===== */ .rmd-c-facts-dark{--_bg:var(--color-dark);--_line:var(--color-hairline-dark);--_head:#fff;--_muted:var(--color-on-dark-muted);position:relative;overflow:hidden;background:var(--_bg);border-radius:var(--radius-panel);padding:var(--space-20)} .rmd-c-facts-dark--light{--_bg:var(--color-bg);--_line:var(--color-hairline);--_head:var(--color-headline);--_muted:var(--color-text-muted);border:1px solid var(--color-hairline);box-shadow:var(--shadow-md)} .rmd-c-facts-dark__glow{position:absolute;top:-220px;right:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--color-signal) 14%,transparent) 0%,transparent 62%);pointer-events:none;opacity:0;transition:opacity 1.4s ease-out} .rmd-c-facts-dark.is-on .rmd-c-facts-dark__glow{opacity:1} .rmd-c-facts-dark__inner{position:relative} .rmd-c-facts-dark__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.14em;text-transform:uppercase;color:var(--_muted)} .rmd-c-facts-dark__eyebrow::before{content:"";width:28px;height:2px;background:var(--color-signal)} .rmd-c-facts-dark__head{display:grid;grid-template-columns:minmax(0,440px) 1fr;column-gap:var(--space-20);align-items:end;margin-top:var(--space-4)} .rmd-c-facts-dark__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-5xl);letter-spacing:-.03em;line-height:1.05;color:var(--_head);margin:0;text-wrap:balance} .rmd-c-facts-dark__lead{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;color:var(--_muted);margin:0;text-wrap:pretty} .rmd-c-facts-dark__body{display:grid;grid-template-columns:minmax(0,440px) 1fr;column-gap:var(--space-20);align-items:stretch;margin-top:var(--space-16)} .rmd-c-facts-dark__stat{border-top:1px solid var(--_line);padding-top:var(--space-5)} .rmd-c-facts-dark__stat--hero{padding-top:var(--space-6);display:flex;flex-direction:column;justify-content:space-between} .rmd-c-facts-dark__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-14);row-gap:var(--space-10);align-content:space-between} .rmd-c-facts-dark__num{display:block;font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-xl);letter-spacing:-.03em;line-height:1.1;color:var(--_head);margin:0;font-variant-numeric:tabular-nums} .rmd-c-facts-dark__stat--hero .rmd-c-facts-dark__num{font-size:var(--fs-6xl);line-height:1.02} .rmd-c-facts-dark__label{display:block;font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.5;color:var(--_muted);margin:var(--space-3) 0 0} .rmd-c-facts-dark__stat--hero .rmd-c-facts-dark__label{font-size:var(--fs-base);margin-top:var(--space-4)} @media(max-width:1024px){ .rmd-c-facts-dark{padding:var(--space-16) var(--space-10)} .rmd-c-facts-dark__head,.rmd-c-facts-dark__body{grid-template-columns:1fr;row-gap:var(--space-8)} .rmd-c-facts-dark__body{margin-top:var(--space-10)} } @media(max-width:767px){ .rmd-c-facts-dark{padding:var(--space-12) var(--space-6)} .rmd-c-facts-dark__grid{grid-template-columns:1fr;row-gap:var(--space-8)} .rmd-c-facts-dark__label{margin-top:var(--space-4)} /* Mobile: Kennzahlen-Panel ueber die volle Breite (Container-Polster raus, Ecken buendig). */ .rmd-facts-sec .rmd-container{padding-left:0;padding-right:0} .rmd-facts-sec .rmd-c-facts-dark{border-radius:0} } @media(prefers-reduced-motion:reduce){.rmd-c-facts-dark__glow{transition:none}} /* 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)} /* Kennzahl-Karte: graue Pille mit dem Oberbegriff oben (statt Icon), darunter der Wert als Ueberschrift. Weisse Pille auf grauer Karte - sie soll ruhig wirken, nicht als zweiter Titel. Der Wert bekommt Ueberschriftgroesse und bleibt in EINER Zeile (nowrap): ein Umbruch mitten in "2.800-3.300 Lux" wuerde die Karte zerreissen. */ .rmd-c-cardrow__badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--color-text-muted);background:var(--color-bg);box-shadow:inset 0 0 0 1px var(--color-hairline);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-5)} /* Kopfzeile Icon + Pille nebeneinander: die Abstaende der Einzelteile werden hier neutralisiert, den Abstand nach unten setzt die Zeile selbst - sonst addieren sich zwei margins. */ .rmd-c-cardrow__head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-5)} .rmd-c-cardrow__head .rmd-c-cardrow__ico,.rmd-c-cardrow__head .rmd-c-cardrow__badge{margin-bottom:0} .rmd-c-cardrow__head .rmd-c-cardrow__ico .rmd-icon{width:22px;height:22px} /* Icon IN der Pille: klein und in der Textfarbe der Pille - es soll den Begriff begleiten, nicht mit ihm konkurrieren. */ .rmd-c-cardrow__badge .rmd-c-cardrow__ico{margin:0} .rmd-c-cardrow__badge .rmd-icon{width:15px;height:15px;color:currentColor;stroke-width:1.6;flex:0 0 auto} .rmd-c-cardrow__card--stat .rmd-c-cardrow__title{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.02em;white-space:nowrap;margin:0 0 var(--space-3)} .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)} /* KEIN Hover-Effekt: globale Woo/Kadence-Button-Styles pinnen sonst einen gelben Hintergrund an. */ .rmd-c-desc__toggle:hover,.rmd-c-desc__toggle:focus,.rmd-c-desc__toggle:active{background:none!important;box-shadow:none!important;color:var(--color-headline)!important} .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)} /* ---- Rich-CTA (Haendler-Panel): linksbuendig, Personen-Karte rechts, Kennzahlen-Band unten ---- */ .rmd-c-cta--rich{text-align:left} .rmd-c-cta--rich .rmd-c-cta__headline{max-width:none;margin-left:0;margin-right:0} .rmd-c-cta--rich .rmd-c-cta__text{max-width:54ch;margin-left:0;margin-right:0} .rmd-c-cta--rich .rmd-c-cta__btns{justify-content:flex-start;align-items:center} .rmd-c-cta__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-12);align-items:center} .rmd-c-cta__contact--inline{margin:0;font-size:var(--fs-sm);color:var(--color-on-dark-muted)} /* Personen-Karte im Haendler-Panel: Foto GROSS oben, Name/Rolle darunter (nicht daneben). */ .rmd-c-cta__person{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)} .rmd-c-cta__avatar{flex:0 0 auto;width:150px;height:150px;border-radius:var(--radius-pill);overflow:hidden;background:var(--color-dark-2)} .rmd-c-cta__avatar img{width:100%;height:100%;object-fit:cover;display:block} .rmd-c-cta__who{display:flex;flex-direction:column;gap:2px} .rmd-c-cta__who strong{font-family:var(--font-head);font-size:var(--fs-md);color:var(--color-on-dark);line-height:1.25} .rmd-c-cta__who span{font-size:var(--fs-sm);color:var(--color-on-dark-muted);line-height:1.4} .rmd-c-cta__facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--space-10);padding-top:var(--space-8);border-top:1px solid var(--color-hairline-dark)} .rmd-c-cta__fact{padding:0 var(--space-6);border-left:1px solid var(--color-hairline-dark)} .rmd-c-cta__fact:first-child{padding-left:0;border-left:0} .rmd-c-cta__fact strong{display:block;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-3xl);color:var(--color-on-dark);letter-spacing:-.02em;line-height:1.1} .rmd-c-cta__fact span{display:block;font-size:var(--fs-sm);color:var(--color-on-dark-muted);margin-top:var(--space-2)} /* Rich-CTA mit nummerierten Schritten rechts (Haendler-Panel, Vorlage Screenshot). */ .rmd-c-cta__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column} .rmd-c-cta__step{display:flex;align-items:flex-start;gap:var(--space-4);padding:var(--space-5) 0;border-top:1px solid var(--color-hairline-dark)} .rmd-c-cta__step:first-child{border-top:0;padding-top:0} .rmd-c-cta__stepnum{flex:0 0 auto;width:42px;height:42px;border-radius:var(--radius-pill);background:var(--color-signal);color:var(--color-on-signal);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-cta__stepbody{display:flex;flex-direction:column;gap:var(--space-1)} .rmd-c-cta__stepbody strong{font-family:var(--font-head);font-size:var(--fs-md);color:var(--color-on-dark);line-height:1.3} .rmd-c-cta__stepbody span{font-size:var(--fs-sm);color:var(--color-on-dark-muted);line-height:1.55} @media(min-width:901px){.rmd-c-cta--steps .rmd-c-cta__top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} /* ===== Mediaband (Vorlage Fertigung-2a): dunkles horizontales Bild-Scrollband mit Zaehler, Pfeilen und Fortschrittsleiste. Band full-bleed, Kopf/Track im Container. ===== */ .rmd-c-mediaband{background:var(--color-dark);background-image:radial-gradient(640px 420px at 88% -5%,rgba(255,234,118,.10),transparent 60%);padding:var(--space-section) 0;overflow:hidden} .rmd-c-mediaband__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-10);align-items:end;margin-bottom:var(--space-12)} .rmd-c-mediaband__eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.12em;text-transform:uppercase;color:var(--color-on-dark-muted)} .rmd-c-mediaband__eyebrow::before{content:"";width:28px;height:3px;background:var(--color-signal);border-radius:2px;flex:0 0 auto} .rmd-c-mediaband__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-3xl);letter-spacing:-.03em;line-height:1.05;color:var(--color-on-dark);margin:var(--space-5) 0 0;text-wrap:balance} .rmd-c-mediaband__lead{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;color:var(--color-on-dark-muted);margin:var(--space-5) 0 0;max-width:560px;text-wrap:pretty} .rmd-c-mediaband__nav{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4)} .rmd-c-mediaband__arrows{display:flex;gap:var(--space-3)} .rmd-c-mediaband__arrow{width:48px;height:48px;border-radius:var(--radius-pill);border:1px solid var(--color-hairline-dark);background:transparent;color:var(--color-on-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease} .rmd-c-mediaband__arrow:hover{background:var(--color-signal);border-color:var(--color-signal);color:var(--color-dark)} .rmd-c-mediaband__arrow:focus-visible{outline:2px solid var(--color-signal);outline-offset:2px} .rmd-c-mediaband__arrow .rmd-icon{width:20px;height:20px;stroke:currentColor} .rmd-c-mediaband__clip{overflow:hidden} /* scroll-padding-left MUSS die padding-left-Formel spiegeln: sonst frisst der Mandatory-Snap (@media hover:none, mobil) die linke Polsterung und rueckt die erste Karte auf 0 - das Bild klebte dann am Rand, waehrend Titel/Text bei space-6 stehen. Mit scroll-padding richtet der Snap die Karten an derselben Kante wie der Container aus (Desktop full-bleed + Mobile space-6). */ .rmd-c-mediaband__band{display:flex;gap:var(--space-6);overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-left:max(var(--space-6),calc((100vw - var(--container)) / 2 + var(--space-6)));padding:0 max(var(--space-6),calc((100vw - var(--container)) / 2 + var(--space-6))) var(--space-6);scrollbar-width:none} .rmd-c-mediaband__band::-webkit-scrollbar{display:none} .rmd-c-mediaband__card{flex:none;width:min(420px,78vw);scroll-snap-align:start;scroll-snap-stop:always;margin:0} /* Touch-Geraete (Handy/Tablet): festes Snap -> genau eine Karte pro Wisch. Desktop bleibt proximity (damit die Pfeil-Animation weich bleibt). */ @media (hover: none){.rmd-c-mediaband__band{scroll-snap-type:x mandatory}} .rmd-c-mediaband__sq{aspect-ratio:1;border-radius:var(--radius-card);overflow:hidden;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-family:var(--font-body);font-size:var(--fs-sm);color:var(--color-on-dark-muted)} .rmd-c-mediaband__sq img{width:100%;height:100%;object-fit:cover;display:block} .rmd-c-mediaband__cap{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-hairline-dark);display:flex;align-items:baseline;gap:var(--space-3)} .rmd-c-mediaband__cap b{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-on-dark-muted)} .rmd-c-mediaband__cap span{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-base);color:var(--color-on-dark)} /* Pfeile: Desktop im Kopf (--head); das zweite Set (--under, mobil unter den Bildern) ist auf Desktop ausgeblendet. Fruehere Fortschrittsleiste (.rmd-c-mediaband__track/__trackline/__bar, gelbe Linie) bewusst entfernt. */ .rmd-c-mediaband__nav--under{display:none} @media(max-width:1024px){ .rmd-c-mediaband{padding:var(--space-14) 0} .rmd-c-mediaband__head{grid-template-columns:1fr;gap:var(--space-6);margin-bottom:var(--space-8)} /* Mobil: Kopf-Pfeile aus, stattdessen zentriert UNTER den Bildern (wie die uebrigen Slider). */ .rmd-c-mediaband__nav--head{display:none} .rmd-c-mediaband__nav--under{display:flex;flex-direction:row;justify-content:center;margin-top:var(--space-6)} .rmd-c-mediaband__card{width:min(280px,78vw)} } /* Handy: Anschnitt der zweiten Karte EXAKT wie beim Kundenstimmen-Slider (rmd-c-slider, ebenfalls ab 640px): Karte 82% der sichtbaren Breite (statt fix 280px gedeckelt - das schnitt die zweite Karte auf groesseren Handys staerker an) + gleicher Gap (space-5). Gleiche Container-Polsterung (space-6) haben beide bereits -> identischer Peek. */ @media(max-width:640px){ .rmd-c-mediaband__band{gap:var(--space-5)} .rmd-c-mediaband__card{width:82%} } /* ===== Prozess-Linie (Vorlage Lichtloesung-Prozess-1a): Kopf (Titel links, Lead rechts) + Schritte in einer Reihe an gemeinsamer Haarlinie mit gelben Markern. ===== */ .rmd-c-process{background:var(--color-page);padding:var(--space-section) 0} .rmd-c-process__head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--space-16);align-items:end;margin-bottom:var(--space-16)} .rmd-c-process__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-3xl);letter-spacing:-.03em;line-height:1.05;color:var(--color-headline);margin:var(--space-5) 0 0;text-wrap:balance} .rmd-c-process__lead{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;color:var(--color-text-muted);margin:0;max-width:460px;text-wrap:pretty} .rmd-c-process__steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--space-14);border-top:1px solid var(--color-hairline)} .rmd-c-process__step{position:relative;padding-top:var(--space-8)} .rmd-c-process__step::before{content:"";position:absolute;top:-2px;left:0;width:var(--space-6);height:3px;background:var(--color-signal);border-radius:2px} .rmd-c-process__num{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)} .rmd-c-process__steptitle{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-lg);letter-spacing:-.01em;color:var(--color-headline);margin:0 0 var(--space-3)} .rmd-c-process__steptext{font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.55;color:var(--color-text-muted);margin:0;text-wrap:pretty} @media(max-width:1024px){ .rmd-c-process{padding:var(--space-14) 0} .rmd-c-process__head{grid-template-columns:1fr;gap:var(--space-6);margin-bottom:var(--space-10)} .rmd-c-process__steps{grid-template-columns:1fr;gap:0;border-top:none} .rmd-c-process__step{border-top:1px solid var(--color-hairline);padding:var(--space-8) 0} } /* ===== Vision/Mission Editorial-Zickzack (Vorlage Vision-Mission-3b): Titel + Zeilen mit Bild/Text im Wechsel, Bilder in Graustufen -> Hover volle Farbe. ===== */ .rmd-c-vm{background:var(--color-page);padding:var(--space-section) 0} .rmd-c-vm__title{font-family:var(--font-head);font-weight:var(--fw-head);font-size:var(--fs-3xl);letter-spacing:-.03em;line-height:1.05;color:var(--color-headline);margin:var(--space-5) 0 var(--space-4);max-width:820px;text-wrap:balance} .rmd-c-vm__subtitle{font-family:var(--font-body);font-size:var(--fs-md);line-height:1.55;color:var(--color-text-muted);margin:0 0 var(--space-10);max-width:640px;text-wrap:pretty} .rmd-c-vm__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-16);align-items:center;padding:var(--space-10) 0} .rmd-c-vm__row--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);padding-bottom:0} .rmd-c-vm__media{aspect-ratio:4/3;border-radius:var(--radius-card);overflow:hidden;margin:0;background:var(--color-surface)} .rmd-c-vm__media img{width:100%;height:100%;object-fit:cover;display:block} .rmd-c-vm__body .rmd-c-eyebrow{margin-bottom:var(--space-4)} .rmd-c-vm__heading{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-2xl);letter-spacing:-.02em;line-height:1.15;color:var(--color-headline);margin:0 0 var(--space-4);text-wrap:balance} .rmd-c-vm__text{font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;color:var(--color-text-muted);margin:0 0 var(--space-6);max-width:460px;text-wrap:pretty} @media(max-width:1024px){ .rmd-c-vm{padding:var(--space-14) 0} .rmd-c-vm__row,.rmd-c-vm__row--flip{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-10) 0} .rmd-c-vm__row--flip{padding-bottom:0} .rmd-c-vm__row--flip .rmd-c-vm__media{order:-1} .rmd-c-vm__heading{font-size:var(--fs-xl)} } @media(max-width:900px){ .rmd-c-cta__top{grid-template-columns:1fr;gap:var(--space-8)} .rmd-c-cta__facts{grid-template-columns:repeat(2,1fr);row-gap:var(--space-8)} .rmd-c-cta__fact,.rmd-c-cta__fact:first-child{padding-left:0;border-left:0} } /* 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). ============================================================ */ /* Globaler Slider (Block slider.php): Zähler oben rechts, Scroll-Snap-Track (cols pro Ansicht), zentrierte Pfeil-Buttons darunter, Scrollbar versteckt. Ein Design für PDP-Upsells, Produktgruppen der „Leuchten für"-Seite u.a. Nav/Zähler = blocks.js ([data-slider]). */ .rmd-c-slider{display:flex;flex-direction:column;gap:var(--space-5);min-width:0} .rmd-c-slider__track{display:flex;align-items:flex-start;gap:var(--space-5);overflow-x:auto;overflow-y:visible;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;scroll-behavior:smooth} .rmd-c-slider__track::-webkit-scrollbar{display:none} .rmd-c-slider__slide{min-width:0;scroll-snap-align:start} .rmd-c-slider__slide>*{width:100%} /* cols = Karten pro Ansicht (Gap N-1 mal abgezogen) */ .rmd-c-slider--cols-2 .rmd-c-slider__slide{flex:0 0 calc((100% - var(--space-5)) / 2)} .rmd-c-slider--cols-3 .rmd-c-slider__slide{flex:0 0 calc((100% - 2 * var(--space-5)) / 3)} .rmd-c-slider--cols-4 .rmd-c-slider__slide{flex:0 0 calc((100% - 3 * var(--space-5)) / 4)} /* Variante peek: cols Karten voll + ein Drittel der naechsten. Sonst endet eine volle Reihe buendig am Rand und sieht aus wie alles, was es gibt. Breite w: 100% = cols*w + cols*gap + w/3. */ .rmd-c-slider--peek.rmd-c-slider--cols-2 .rmd-c-slider__slide{flex:0 0 calc((100% - 2 * var(--space-5)) * 3 / 7)} .rmd-c-slider--peek.rmd-c-slider--cols-3 .rmd-c-slider__slide{flex:0 0 calc((100% - 3 * var(--space-5)) * 3 / 10)} .rmd-c-slider--peek.rmd-c-slider--cols-4 .rmd-c-slider__slide{flex:0 0 calc((100% - 4 * var(--space-5)) * 3 / 13)} .rmd-c-slider__nav{display:flex;gap:10px;justify-content:center} .rmd-c-slider__navbtn{width:44px;height:44px;border-radius:var(--radius-pill);border:1px solid var(--color-hairline);background:var(--color-bg);box-shadow:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s} .rmd-c-slider__navbtn .rmd-icon{width:18px;height:18px;color:var(--color-headline)} .rmd-c-slider__navbtn:hover{background:var(--color-surface)!important} /* Woo/Kadence faerben