/* rmd-kadence-child/assets/css/lichtwissen.css
   Redaktionelles Template fuer die "Licht fuer ..."-Seiten (Anwendungsbereich/Lichtwissen).
   V2 nach Vorlage "Zahntechniker Redesign" - gebaut MIT den Styleguide-Bausteinen: Buttons
   (.rmd-c-btn), Eyebrow (.rmd-c-eyebrow), FAQ (.rmd-c-faq), Versprechen-Karten (.rmd-c-cardrow),
   Breadcrumb (.rmd-breadcrumb), Icons via rmd_icon() - kommen aus blocks.css und werden hier NICHT
   dupliziert. Diese Datei stylt nur, was der Styleguide nicht hat: Split-Hero, Anforderungs-Leiste,
   Kapitel-Rhythmus, Lux-Dimmer, CRI-Demo, dunkles Beratungs-Panel, Kontakt-Streifen, Mobile-CTA.
   Alles unter .rmd-lw gescopt. NUR Tokens (Ausnahme: wenige layouttypische px wie Bildhoehen). */

.rmd-lw{color:var(--color-text);font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal)}
/* video wie img behandeln: die Bildfelder duerfen auch eine Videodatei enthalten. */
.rmd-lw img,.rmd-lw video{display:block;max-width:100%}
.rmd-lw :focus-visible{outline:3px solid var(--color-signal);outline-offset:3px;border-radius:var(--radius-sm)}
/* Boxung wie alle anderen Seiten (Site-Container). EIGENE Klasse statt .wrap - Kadence gibt dem
   Eltern-<main> ebenfalls .wrap und wuerde meine Boxung sonst aufziehen (volle Breite). */
.rmd-lw__in{max-width:var(--container);margin:0 auto;padding-left:var(--space-6);padding-right:var(--space-6)}
/* Sektions-Rhythmus: jeder direkte Block der Seite bekommt Weissraum (Breadcrumb kleiner). */
.rmd-lw__in>*{margin-bottom:var(--space-section)}
/* Breadcrumb OHNE Sonderabstand: er sitzt damit auf derselben Hoehe wie auf allen anderen Seiten
   (globales .rmd-breadcrumb-Padding aus blocks.css). Der frueher hier gesetzte Extra-Abstand hat
   die Seite - vor allem mobil - sichtbar nach unten geschoben. */
.rmd-lw__in>.rmd-breadcrumb{margin:0}
.rmd-lw__in>:last-child{margin-bottom:var(--space-16)}
/* Nach einem vollbreiten Band (graue Kundenstimmen-Sektion) muss der Abstand aktiv gesetzt werden -
   der Rhythmus oben wirkt nur INNERHALB einer Box, nicht ueber das ausbrechende Band hinweg. */
.rmd-lw__in--gap{margin-top:var(--space-section)}
/* :not([class]) - die generische Sektions-Ueberschrift darf NICHT in eingebettete Styleguide-
   Komponenten hineinregieren (z. B. .rmd-c-faq__h auf dunklem Panel wuerde sonst dunkel/klein). */
.rmd-lw h2:not([class]){font-family:var(--font-head);font-weight:var(--fw-head);letter-spacing:-.02em;line-height:var(--lh-tight);color:var(--color-headline);margin:0 0 var(--space-5);font-size:var(--fs-3xl)}
.rmd-lw-lead{font-size:var(--fs-md);color:var(--color-text-muted);line-height:1.7;margin:0 0 var(--space-8);max-width:60ch}
/* Eyebrow auf dunklen Panels aufhellen (Styleguide-Eyebrow ist fuer hellen Grund gedacht). */
/* Font zusaetzlich zur Farbe explizit erzwingen: auf dunklen Panels ueberschreibt sonst eine
   Theme-Regel die Eyebrow-Schrift (Montserrat 600). */
.rmd-lw .demo .rmd-c-eyebrow,.rmd-lw .dark-cta .rmd-c-eyebrow{color:var(--color-on-dark-muted);font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase}

/* Bild-Platzhalter (solange kein src gesetzt ist) */
.rmd-lw .ph{background:var(--color-surface);color:var(--color-text-muted);font-size:var(--fs-sm);display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--space-4);border-radius:var(--radius-panel);overflow:hidden}

/* ===== Hero: Split (Text links, Foto rechts mit schwebendem Badge) ===== */
.rmd-lw-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--space-20);align-items:center}
.rmd-lw-hero__col{min-width:0}
.rmd-lw-hero__h1{font-family:var(--font-head);font-size:var(--fs-5xl);font-weight:var(--fw-head);letter-spacing:-.03em;line-height:1.05;color:var(--color-headline);margin:var(--space-5) 0 var(--space-6)}
.rmd-lw-hero__lead{font-size:var(--fs-md);line-height:1.6;color:var(--color-text);margin:0 0 var(--space-8);max-width:52ch}
.rmd-lw-hero__actions{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-6)}
.rmd-lw-hero__rating{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-lw-hero__stars{color:var(--color-star);font-size:var(--fs-sm);letter-spacing:2px}
.rmd-lw-hero__media{position:relative}
.rmd-lw-hero__img{width:100%;height:540px;object-fit:cover;border-radius:var(--radius-panel)}
.rmd-lw-hero__badge{position:absolute;left:var(--space-6);bottom:var(--space-6);background:var(--color-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-md);padding:var(--space-4) var(--space-5)}
.rmd-lw-hero__badge b{display:block;font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--color-headline)}
.rmd-lw-hero__badge span{font-size:var(--fs-sm);color:var(--color-text-muted)}

/* ===== Anforderungs-Leiste (Werte, SEO-Kern) ===== */
.rmd-lw-anford__grid{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--color-hairline);border-bottom:1px solid var(--color-hairline)}
.rmd-lw-anford__cell{padding:var(--space-6) var(--space-5)}
.rmd-lw-anford__cell:first-child{padding-left:0}
.rmd-lw-anford__cell+.rmd-lw-anford__cell{border-left:1px solid var(--color-hairline)}
.rmd-lw-anford__v{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--color-headline);line-height:1.1}
.rmd-lw-anford__l{font-size:var(--fs-sm);line-height:1.4;color:var(--color-text-muted);margin-top:6px}
.rmd-lw-anford__note{font-size:var(--fs-sm);color:var(--color-text-muted);margin:var(--space-3) 0 0}

/* ===== Wissen: Kapitel-Rhythmus (Bild + Text alternierend) ===== */
.rmd-lw .know-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20);align-items:center}
/* min-width:0 - ohne das darf eine Rasterspalte nicht unter ihre Mindestbreite schrumpfen: ein
   breiterer Inhalt (z.B. laengerer Lux-Wert) zieht dann die ganze Sektion auf. */
.rmd-lw .know-row>*{min-width:0}
.rmd-lw .know-row--rev .know-row__media{order:-1}
/* Abschnitt ohne Bild und ohne Regler: eine Spalte. Die Zeilenlaenge bleibt begrenzt, sonst
   laufen die Absaetze ueber die volle Sektionsbreite und werden unlesbar. Die Haken-Liste darf
   zweispaltig umbrechen, damit die Reihe nicht unnoetig hoch wird. */
.rmd-lw .know-row--solo{grid-template-columns:minmax(0,1fr);gap:0}
.rmd-lw .know-row--solo h2,.rmd-lw .know-row--solo p{max-width:72ch}
@media(min-width:900px){
  .rmd-lw .know-row--solo .rmd-c-usps{display:block;columns:2;column-gap:var(--space-14)}
  .rmd-lw .know-row--solo .rmd-c-usps li{break-inside:avoid}
}
/* Die Medienspalte waechst mit dem Text. Vorher war das Bild fest 420px hoch und mittig gesetzt -
   bei langen Abschnitten (viel Text + Aufzaehlung) stand es dann verloren zwischen zwei grossen
   Leerflaechen, waehrend die Textspalte weit darueber hinauslief. Jetzt fuellt es die Zeilenhoehe;
   die Grenzen halten es im Rahmen: nie kleiner als vorher, nie schlanker als 640px. */
.rmd-lw .know-row__media{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.rmd-lw .know-row__img{width:100%;flex:1 1 auto;min-height:420px;max-height:640px;object-fit:cover;border-radius:var(--radius-panel);display:block}
/* Platzhalter (noch kein Bild gepflegt): Beschriftung mittig statt oben links. */
.rmd-lw .know-row__img.ph{display:flex}
/* Punkt-Liste NUR fuer einfache <ul> ohne .rmd-c-usps - sonst kollidiert der Punkt mit dem Haken
   der Styleguide-Checkliste (.rmd-c-usps bringt sein eigenes Haken-Icon mit). */
.rmd-lw .know-row ul:not(.rmd-c-usps){list-style:none;margin:0 0 var(--space-6);padding:0}
.rmd-lw .know-row ul:not(.rmd-c-usps) li{display:flex;align-items:baseline;gap:var(--space-3);padding:11px 0;border-top:1px solid var(--color-hairline);font-size:var(--fs-sm)}
.rmd-lw .know-row ul:not(.rmd-c-usps) li::before{content:"";width:5px;height:5px;border-radius:var(--radius-pill);background:var(--color-headline);flex:0 0 auto;transform:translateY(-3px)}
.rmd-lw .chap{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);letter-spacing:.08em;color:var(--color-text-muted);margin-bottom:var(--space-3);display:flex;align-items:center;gap:var(--space-3)}
.rmd-lw .chap b{color:var(--color-headline);font-size:var(--fs-sm)}
.rmd-lw .chap::after{content:"";flex:1;max-width:56px;height:1px;background:var(--color-hairline)}
/* WICHTIG: margin-bottom MUSS gesetzt sein - "margin:0 auto" allein wuerde den Sektions-Abstand
   (.rmd-lw__in>*) ueberschreiben und den Abstand zur naechsten Sektion auf 0 druecken. */
.rmd-lw .know-intro{max-width:760px;margin:0 auto var(--space-section);text-align:center;padding:var(--space-4) 0}
.rmd-lw .know-intro .rmd-c-eyebrow{margin-bottom:var(--space-4)}
.rmd-lw .know-intro h2{margin-bottom:var(--space-5)}
.rmd-lw .know-intro p{color:var(--color-text-muted);font-size:var(--fs-md);line-height:1.7;margin:0}
/* Sekundaer-Button unter einem Textblock braucht Luft nach oben (war zu dicht am Text). */
.rmd-lw .know-row .rmd-c-btn{margin-top:var(--space-6)}
.rmd-lw .know-row p+ul,.rmd-lw .know-row ul{margin-top:var(--space-5)}
/* Kapitel-Label (Lichtfaktor 01/05) etwas mehr Abstand zur Ueberschrift. */
.rmd-lw .chap{margin-bottom:var(--space-4)}

/* Die Regler-Karte (Baustein slidercard) bringt Bild, Wirkungs-Ebene und Regler selbst mit -
   hier steht nur noch, dass sie in der Medienspalte volle Breite bekommt. */
/* Die Regler-Karte waechst NICHT mit: sie hat ihre eigene Ordnung (Bild oben, Regler unten) und
   wuerde gestreckt auseinanderfallen. Sie bleibt bei ihrer Hoehe und sitzt mittig. */
.rmd-lw .know-row__media .rmd-c-slidercard{width:100%;flex:0 0 auto}

/* ===== Signature: interaktive Demo (dunkles Panel) =====
   Die HUELLE ist geteilt: Panel, Lichtschein, Kopf und Fussnote sehen bei jeder Demo gleich aus -
   nur die Buehne dazwischen unterscheidet sich (.cri__* = Farbwiedergabe-Vergleich,
   .strobe__* = Stroboskop). So kann keine der beiden optisch abdriften. */
.rmd-lw .demo{background:var(--color-dark);border-radius:var(--radius-panel);padding:var(--space-14) var(--space-14);position:relative;overflow:hidden}
/* Gelber Lichtschein oben rechts - Position wie auf allen dunklen Cards (.rmd-c-cta /
   .rmd-c-cat-help), aber bewusst DEZENTER: diese Seite hat zwei dunkle Sektionen kurz
   hintereinander (CRI-Demo + Beratungs-Panel), da wirkt der volle Schein zu laut.
   EINE Regel fuer beide Panels - kein zweiter Wert, der auseinanderlaufen kann. */
.rmd-lw .demo::before,.rmd-lw .dark-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) 12%, transparent) 0%, color-mix(in srgb, var(--color-signal) 4%, transparent) 45%, transparent 70%);pointer-events:none;z-index:0}
.rmd-lw .demo>*{position:relative;z-index:1}
.rmd-lw .demo__head{position:relative;max-width:640px;margin:0 auto var(--space-10);text-align:center}
.rmd-lw .demo__head h2{color:#FFF;margin-bottom:var(--space-3)}
.rmd-lw .demo__head p{color:var(--color-on-dark-muted);font-size:var(--fs-sm);margin:0}
/* Traegt die Demo einen ganzen Lichtfaktor, stehen mehrere Absaetze und eine Haken-Liste im
   Kopf. Mittig gesetzt liest das niemand - dann linksbuendig und breiter, Liste zweispaltig.
   Die Haken-Liste stammt aus dem Styleguide und ist fuer hellen Grund gebaut: Farben und
   Trennlinien hier auf dunkel umstellen. */
.rmd-lw .demo__head--lang{max-width:900px;text-align:left}
.rmd-lw .demo__head--lang p{margin:0 0 var(--space-4)}
.rmd-lw .demo__head--lang p:last-of-type{margin-bottom:0}
.rmd-lw .demo__usps{max-width:none;margin:var(--space-8) 0 0}
.rmd-lw .demo__usps li{color:var(--color-on-dark-muted);border-top-color:var(--color-hairline-dark)}
.rmd-lw .demo__usps li:last-child{border-bottom-color:var(--color-hairline-dark)}
.rmd-lw .demo__usps .rmd-c-usps__ico svg,.rmd-lw .demo__usps .rmd-c-usps__ico .rmd-icon{stroke:var(--color-signal)}
@media(min-width:900px){
  .rmd-lw .demo__usps{display:block;columns:2;column-gap:var(--space-14)}
  .rmd-lw .demo__usps li{break-inside:avoid}
}
/* Ueberschrift direkt ueber der Buehne: trennt den Faktor-Text vom Selbst-Ausprobieren. */
.rmd-lw .demo__sub{position:relative;max-width:900px;margin:var(--space-12) auto var(--space-8);text-align:left}
.rmd-lw .demo__subtitel{font-family:var(--font-head);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:#FFF;margin:0 0 var(--space-2)}
.rmd-lw .demo__subtext{font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--color-on-dark-muted);margin:0}
.rmd-lw .cri__stage{position:relative;max-width:820px;margin:0 auto;border-radius:var(--radius-card);overflow:hidden;background:var(--color-dark-2);--x:50%}
.rmd-lw .cri__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-3);padding:var(--space-14) var(--space-10) var(--space-16)}
.rmd-lw .cri__grid figure{margin:0;text-align:center}
.rmd-lw .cri__grid .sw{height:92px;border-radius:12px}
.rmd-lw .cri__grid figcaption{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.05em;color:var(--color-on-dark-muted);margin-top:10px}
.rmd-lw .cri__bad{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0);filter:saturate(.5) sepia(.28) brightness(.9)}
.rmd-lw .cri__handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#FFF;pointer-events:none}
.rmd-lw .cri__handle::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:var(--radius-pill);background:var(--color-signal);color:var(--color-on-signal);font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-md)}
.rmd-lw .cri__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.rmd-lw .cri__tag{position:absolute;bottom:18px;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.06em;color:var(--color-on-dark-muted);pointer-events:none}
.rmd-lw .cri__tag--l{left:var(--space-10)}
.rmd-lw .cri__tag--r{right:var(--space-10);color:#FFF}
.rmd-lw .demo__note{max-width:720px;margin:var(--space-6) auto 0;text-align:center;font-size:var(--fs-sm);color:var(--color-on-dark-muted);position:relative}

/* ----- Buehne: Stroboskop-Demo -----
   Zeigt, warum flimmerfreies Licht an Maschinen eine Sicherheitsfrage ist: unter flimmerndem Licht
   sieht man ein drehendes Rad nur in Momentaufnahmen. Treffen die Blitze immer dieselbe Speichen-
   stellung, wirkt das Rad stillstehend - obwohl es mit voller Drehzahl laeuft.
   Umgesetzt ueber die Zeitfunktion der Drehung bei ACHT gleichen Speichen: steps(8) springt je
   Schritt genau eine Speiche weiter, das Muster sieht danach identisch aus = Stillstand. steps(9)
   trifft knapp daneben, das Muster wandert langsam rueckwaerts = der Wagenrad-Effekt. linear =
   echte, sichtbare Drehung. Das Umschalten macht lichtwissen.js.
   ACHTUNG bei Aenderungen an Speichenzahl, Tempo oder Kontrast: eine schnell alternierende
   Speichenscheibe ist ein Flaechenflimmern und kann Beschwerden ausloesen (WCAG 2.3.1, kritisch
   sind ~3-25 Hz bei hohem Kontrast). Darum acht statt zwoelf Speichen, 2s pro Umdrehung statt 1,2s
   und ein gedaempfter Hell-Dunkel-Kontrast - und KEIN Zustand, der zwischen zwei Stellungen
   hin- und herspringt. */
.rmd-lw .strobe__stage{position:relative;max-width:820px;margin:0 auto;border-radius:var(--radius-card);background:var(--color-dark-2);padding:var(--space-14) var(--space-10);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);overflow:hidden}
/* Acht GLEICHE Speichen - eine markierte wuerde die Drehung verraten und die Taeuschung zerstoeren
   (an der echten Maschine gibt es diese Markierung ebenfalls nicht). */
.rmd-lw .strobe__wheel{position:relative;display:block;width:260px;height:260px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#C9CAC6 0deg 22deg,#2E3134 22deg 45deg);box-shadow:0 0 0 10px rgba(255,255,255,.04),0 18px 40px rgba(0,0,0,.45);animation:rmd-strobe-spin 2s linear infinite}
.rmd-lw .strobe__hub{position:absolute;inset:37%;border-radius:50%;background:var(--color-dark-2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
@keyframes rmd-strobe-spin{to{transform:rotate(360deg)}}
.rmd-lw .strobe__read{margin:0;text-align:center;font-size:var(--fs-xs);color:var(--color-on-dark-muted)}
.rmd-lw .strobe__read b{display:block;font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:-.02em;color:#FFF;font-variant-numeric:tabular-nums;margin-bottom:4px}
/* Regler unter der Buehne - Aufbau wie in der Regler-Karte, nur auf dunklem Grund. */
.rmd-lw .demo__panel{max-width:820px;margin:var(--space-8) auto 0}
.rmd-lw .demo__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4)}
.rmd-lw .demo__label{font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-dark-muted);min-width:0}
.rmd-lw .demo__hint{font-size:var(--fs-xs);color:var(--color-on-dark-muted);white-space:nowrap;flex:none}
.rmd-lw .demo__track{position:relative;margin-top:var(--space-4);height:24px}
.rmd-lw .demo__bar{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:8px;border-radius:var(--radius-pill);background:linear-gradient(to right,var(--color-signal) 0 var(--fill,0%),rgba(255,255,255,.16) var(--fill,0%) 100%);pointer-events:none}
/* Kadence stylt input[type=range] global (0,1,1) und schlaegt eine einzelne Klasse - der Regler
   haengt deshalb an der Spur (0,2,0) und setzt die Kadence-Werte ausdruecklich zurueck. Ohne das
   liegt ein weisser Input-Grund UEBER der Spur. Griff-Aussehen kommt aus blocks.css (.rmd-c-range). */
.rmd-lw .demo__track .rmd-c-range{-webkit-appearance:none;appearance:none;position:absolute;top:0;left:-12px;width:calc(100% + 24px);max-width:none;height:24px;margin:0;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;box-shadow:none;outline:none;cursor:pointer}
.rmd-lw .demo__track .rmd-c-range:focus{border-color:transparent;box-shadow:none}
.rmd-lw .demo__scale{display:flex;justify-content:space-between;gap:var(--space-4);margin-top:10px;font-size:var(--fs-xs);color:var(--color-on-dark-muted)}
.rmd-lw .demo__status{display:flex;align-items:center;gap:9px;margin:var(--space-5) 0 0;font-size:var(--fs-sm);color:#FFF}
.rmd-lw .demo__dot{width:8px;height:8px;border-radius:50%;background:var(--color-on-dark-muted);flex:0 0 auto;transition:background .15s ease}
.rmd-lw .demo__dot--low{background:var(--color-error)}
.rmd-lw .demo__dot--mid{background:var(--color-signal)}
.rmd-lw .demo__dot--ok{background:var(--color-success)}
/* Dauerbewegung abschalten, wenn das System es verlangt - der Statustext erklaert die Wirkung dann. */
@media (prefers-reduced-motion:reduce){
  .rmd-lw .strobe__wheel{animation:none}
  .rmd-lw .demo__dot{transition:none}
}

/* ----- Abdeckungs-Vergleich (Mikroprisma gegen Opal) -----
   Bringt seinen eigenen dunklen Grund mit: der Baustein laeuft an ZWEI Stellen - im dunklen
   Demo-Panel und als Karte in der hellen Abschnitts-Spalte - und muss an beiden gleich aussehen.
   Bedienung wie bei der Farbwiedergabe-Demo: unsichtbarer Regler ueber der ganzen Flaeche, --x ist
   die Trennkante. Links liegt der harte Prismenreflex UEBER dem weichen Opalschimmer; wo er
   weggeschnitten wird, bleibt Opal stehen. */
.rmd-lw .cover{margin:0}
/* Auch die gezeichnete Buehne begrenzen - sie lief sonst ueber die volle Panelbreite. */
.rmd-lw .cover__stage{position:relative;--x:50%;max-width:940px;margin-inline:auto;border-radius:var(--radius-card);background:var(--color-dark-2);overflow:hidden}
.rmd-lw .cover__svg{width:100%;height:auto;display:block}
.rmd-lw .cover__case{fill:#5A6066}
.rmd-lw .cover__face{fill:#20242A}
.rmd-lw .cover__idx{stroke:rgba(255,255,255,.55);stroke-width:3;stroke-linecap:round}
.rmd-lw .cover__hand{stroke:#EDEDE8;stroke-width:5;stroke-linecap:round}
.rmd-lw .cover__hand--min{stroke-width:4}
.rmd-lw .cover__pin{fill:var(--color-signal)}
/* Schmuck-Variante: gleiche Flaeche, nur in Gold - der Vergleich funktioniert identisch. */
/* Bildschirm-Variante: Gehaeuse, Anzeigeflaeche, Fuss und angedeutete Textzeilen. */
.rmd-lw .cover__screen{fill:#40464C}
.rmd-lw .cover__screenin{fill:#171A1D}
.rmd-lw .cover__stand{fill:#40464C}
.rmd-lw .cover__line2{fill:rgba(255,255,255,.30)}
.rmd-lw .cover__case--gold{fill:#8A6C33}
.rmd-lw .cover__face--gold{fill:#C39A4B}
.rmd-lw .cover__bevel{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3}
.rmd-lw .cover__stone{fill:#2E5E52}
/* --- Foto-Betriebsart: die Reflexe liegen auf einem echten Bild ---
   BEIDE Seiten zeigen denselben Lichtstrom, nur anders verteilt - das ist der ganze Unterschied
   zwischen den Abdeckungen. Darum haben beide Ebenen denselben Winkel: links ein schmales, helles
   Band (kleine Leuchtflaeche = hohe Leuchtdichte), rechts dasselbe Band viel breiter und viel
   schwaecher (grosse Flaeche = niedrige Leuchtdichte).
   BEWUSST KEIN flaechiger Schleier ueber die halbe Aufnahme: das ueberzeichnet den Effekt und
   sieht nach Effekthascherei aus. Ein Spiegelreflex ist ein oertlicher Glanz, kein Grauschleier.
   `screen` addiert Licht, statt das Bild zu ueberdecken. */
/* Die Foto-Buehne lief ueber die volle Panelbreite im Format 16:10 - bei 1.190 px Breite sind das
   fast 750 px Hoehe, die Sektion trug damit stark auf. Jetzt begrenzt (940 px) und flacher (16:9);
   der Ausschnitt bleibt mittig, weil das Motiv dort liegt. */
.rmd-lw .cover__stage--foto{position:relative;--x:50%;max-width:940px;margin-inline:auto}
/* Zwei-Foto-Vergleich: rechtes Bild als Grundlage, linkes bis zur Trennkante darueber. Gleiche
   Masse wie die einfache Foto-Buehne, damit die Sektion nicht auftraegt. */
.rmd-lw .cover__stage--duo{position:relative;--x:50%;max-width:940px;margin-inline:auto;border-radius:var(--radius-card);overflow:hidden;background:var(--color-dark-2)}
.rmd-lw .cover__stage--duo .cover__foto{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.rmd-lw .cover__links{position:absolute;inset:0;width:var(--x);overflow:hidden}
.rmd-lw .cover__links .cover__foto{position:absolute;top:0;left:0;height:100%;width:auto;min-width:100%;max-width:none}
.rmd-lw .cover__stage--duo .cover__tag{z-index:2}
.rmd-lw .cover__foto{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
/* Beide Reflexe sitzen RUND in der Bildmitte - dort, wo gearbeitet wird und wo die Leuchte
   tatsaechlich steht. Vorher lief ein diagonaler Streifen ueber das ganze Bild; das las sich eher
   wie ein Filter als wie eine Spiegelung.
   Rechts (immer sichtbar): die opalweisse Blende verteilt dieselbe Lichtmenge auf eine GROSSE,
   weiche Flaeche - kaum Kontrast, dafuer breit.
   Links (bis zur Trennkante): die Mikroprismenscheibe buendelt sie enger und heller. Gleiche
   Energie, andere Verteilung. Bewusst zurueckhaltend: der Reflex soll das Motiv aufhellen, nicht
   zudecken - zu viel Weiss sieht nachgestellt aus. */
.rmd-lw .cover__soft{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at 50% 46%,rgba(255,252,240,.11) 0%,rgba(255,251,236,.085) 34%,rgba(255,250,232,.045) 60%,transparent 86%)}
.rmd-lw .cover__glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;clip-path:inset(0 calc(100% - var(--x)) 0 0);background:radial-gradient(circle at 50% 46%,rgba(255,253,244,.34) 0%,rgba(255,252,240,.28) 15%,rgba(255,250,232,.15) 27%,rgba(255,250,232,.05) 35%,transparent 42%)}
/* Spielart `dunkel`: linke Haelfte abgedunkelt statt beschienen. Multiply mit einem hellen Grau
   statt Schwarz mit Deckkraft - das dimmt das Bild PROPORTIONAL, wie weniger Licht es taete:
   Helles wird dunkler, Dunkles bleibt dunkel, die Farben bleiben. Ein schwarzer Schleier legt sich
   dagegen flach darueber, nimmt den Kontrast und sieht nachgestellt aus. */
.rmd-lw .cover__dunkel{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 calc(100% - var(--x)) 0 0);background:#A6ABB0;mix-blend-mode:multiply}
.rmd-lw .cover__cut{position:absolute;top:0;bottom:0;left:var(--x);width:2px;background:#FFF;pointer-events:none}
.rmd-lw .cover__stage--foto .cover__tag{z-index:2}

.rmd-lw .cover__line{stroke:#FFF;stroke-width:2;transform:translateX(calc(var(--x) - 50%));transform-origin:center;transform-box:fill-box}
.rmd-lw .cover__handle{position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);width:40px;height:40px;border-radius:var(--radius-pill);background:var(--color-signal);color:var(--color-on-signal);box-shadow:var(--shadow-md);pointer-events:none;display:flex;align-items:center;justify-content:center;font-size:17px}
.rmd-lw .cover__handle::after{content:"\2194"}
/* Beschriftungen auf dunklem Chip statt frei auf dem Bild: auf einem Foto ist jeder Untergrund
   anders hell, freie Schrift war dort schlicht nicht lesbar. Der Chip nimmt dem Bild wenig und
   macht die Zuordnung eindeutig. */
.rmd-lw .cover__tag{position:absolute;bottom:14px;font-family:var(--font-head);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:.03em;color:#FFF;pointer-events:none;max-width:46%;background:rgba(18,20,22,.78);border-radius:var(--radius-pill);padding:7px 13px;line-height:1.25}
.rmd-lw .cover__tag--l{left:var(--space-6)}
.rmd-lw .cover__tag--r{right:var(--space-6);text-align:right}
.rmd-lw .cover__range{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none;opacity:0;cursor:ew-resize}
.rmd-lw .cover__range:focus{border-color:transparent;box-shadow:none}
/* Als Karte in der Abschnitts-Spalte: kurze Einordnung unter der Buehne. */
.rmd-lw .know-row__covernote{margin:var(--space-4) 0 0;font-size:var(--fs-sm);color:var(--color-text-muted)}
@media(max-width:767px){
  .rmd-lw .cover__tag{bottom:10px;font-size:11px;padding:6px 10px;max-width:44%}
  .rmd-lw .cover__tag--l{left:var(--space-4)}
  .rmd-lw .cover__tag--r{right:var(--space-4)}
  .rmd-lw .cover__handle{width:34px;height:34px;font-size:15px}
}

/* ----- Buehne: Schutzart (IP) -----
   Zwei gleiche Leuchten in derselben Umgebung. Der Regler faehrt die Belastung hoch; nur die offene
   setzt zu. --soil (0..1) steuert Schmutzschleier UND Lichtkegel gemeinsam - EIN Wert, damit
   Verschmutzung und Lichtverlust nicht auseinanderlaufen koennen. Gesetzt wird er vom JS. */
.rmd-lw .ip__stage{--soil:0;position:relative;max-width:820px;margin:0 auto;border-radius:var(--radius-card);background:var(--color-dark-2);padding:var(--space-12) var(--space-10) var(--space-10);overflow:hidden}
.rmd-lw .ip__env{margin:0 0 var(--space-8);text-align:center}
.rmd-lw .ip__env b{display:block;font-family:var(--font-head);font-size:var(--fs-lg);font-weight:var(--fw-bold);color:#FFF;letter-spacing:-.01em}
.rmd-lw .ip__env span{display:block;font-size:var(--fs-sm);color:var(--color-on-dark-muted);margin-top:4px}
.rmd-lw .ip__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8)}
/* min-width:0 - ohne das darf die Spalte nicht unter ihre Inhaltsbreite schrumpfen und die rechte
   Leuchte laeuft am Handy aus der Buehne (die schneidet sie dann ab). */
.rmd-lw .ip__lamp{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
/* Die geschuetzte Leuchte setzt NIE zu: sie stellt --soil fuer sich auf 0 zurueck. Damit gilt
   dieselbe Regel fuer beide, und Schmutz, Kegel und Lichtpfuetze koennen nicht auseinanderlaufen. */
.rmd-lw .ip__lamp--safe{--soil:0}
/* Leuchtengehaeuse: schlichter Balken - es geht um den Zustand, nicht um die Bauform. */
/* Alle drei Teile (Gehaeuse, Kegel, Lichtpfuetze) messen sich an der SPALTE, nicht an festen
   Pixeln - feste Breiten passen in eine halbe Handy-Breite nicht mehr hinein. Die Maxima halten
   die Groessenverhaeltnisse am Desktop, wo Platz genug ist. */
.rmd-lw .ip__body{position:relative;width:100%;max-width:210px;height:clamp(22px,6vw,30px);border-radius:9px;background:linear-gradient(#4A4E52,#33373A);box-shadow:0 6px 16px rgba(0,0,0,.4);overflow:hidden}
/* Schmutzschleier auf der Abdeckung - waechst mit der Belastung. */
.rmd-lw .ip__grime{position:absolute;inset:0;opacity:var(--soil);background:repeating-linear-gradient(115deg,rgba(150,132,96,.85) 0 7px,rgba(96,86,66,.7) 7px 13px);transition:opacity .18s ease}
/* Lichtkegel als weich auslaufender Verlauf statt als Dreieck mit harter Kante - ein Rand-Dreieck
   hat eine feste Farbe und sieht auf dunklem Grund nach grauem Keil aus, nicht nach Licht. */
.rmd-lw .ip__cone{width:100%;max-width:170px;height:clamp(84px,24vw,140px);margin-top:-2px;clip-path:polygon(36% 0,64% 0,100% 100%,0 100%);background:linear-gradient(to bottom,rgba(255,242,205,calc(.6 - var(--soil) * .46)),rgba(255,242,205,0));transition:background .18s ease}
/* Die Lichtpfuetze auf der Werkbank - hier wird der Verlust am deutlichsten sichtbar. */
.rmd-lw .ip__pool{width:100%;max-width:184px;height:clamp(13px,4vw,20px);margin-top:-8px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(255,242,205,calc(.55 - var(--soil) * .44)) 0%,rgba(255,242,205,0) 72%);transition:background .18s ease}
/* Werkbank-Kante: gibt dem Licht etwas, worauf es faellt. */
.rmd-lw .ip__pair::after{content:"";grid-column:1 / -1;height:1px;background:rgba(255,255,255,.14)}
.rmd-lw .ip__lamp figcaption{margin-top:var(--space-5);text-align:center;font-size:var(--fs-xs);color:var(--color-on-dark-muted)}
.rmd-lw .ip__lamp figcaption b{display:block;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:#FFF;margin-bottom:3px}
.rmd-lw .ip__lamp figcaption span{font-variant-numeric:tabular-nums}
/* Geforderte Schutzart - die Kernaussage der Buehne, darum abgesetzt. */
.rmd-lw .ip__need{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--space-3);margin:var(--space-10) 0 0;padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-sm);color:var(--color-on-dark-muted)}
.rmd-lw .ip__need b{font-family:var(--font-head);font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--color-signal);letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){
  .rmd-lw .ip__grime,.rmd-lw .ip__cone{transition:none}
}

/* ===== Sektions-Kopf (Eyebrow + H2 + Lead) - grosszuegig, damit es atmet ===== */
.rmd-lw-sec__head,.rmd-lw-promise__head{max-width:760px;margin-bottom:var(--space-12)}
.rmd-lw-fineprint{font-size:var(--fs-sm);color:var(--color-text-muted);margin:var(--space-6) 0 0}
/* Die Normen-Zeile unter den Anforderungs-Karten ist am Handy nur Ballast: sie nimmt dort drei bis
   vier Zeilen ein, bevor die eigentlichen Inhalte kommen. Die Normen selbst stehen weiter im
   Fliesstext der Abschnitte. */
@media(max-width:767px){.rmd-lw-fineprint{display:none}}
/* Kurzform der Normen fuer das Handy: eine ruhige Zeile ueber den Karten, kein Kasten. Am Desktop
   ueberfluessig - dort steht die vollstaendige Angabe als Fussnote unter den Karten. */
.rmd-lw-normen{display:none}
@media(max-width:767px){
  /* Linksbuendig wie Ueberschrift und Vorspann darueber, und dicht an den Vorspann geruckt: dessen
     Abstand nach unten faellt hier weg, sonst klaffen 32px zwischen Aussage und Beleg. */
  .rmd-lw-sec__head .rmd-lw-lead{margin-bottom:0}
  .rmd-lw-normen{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:var(--space-3) 0 0;
    font-size:var(--fs-xs);line-height:1.35;color:var(--color-text-muted);text-align:left}
  .rmd-lw-normen__ico{flex:0 0 15px;display:flex}
  .rmd-lw-normen__ico .rmd-icon{width:15px;height:15px;color:var(--color-icon-quiet);stroke-width:1.8}
  .rmd-lw-normen__txt{min-width:0}
}
/* Karten-Reihen auf dieser redaktionellen Seite luftiger als der globale Styleguide-Default. */
.rmd-lw .rmd-c-cardrow{gap:var(--space-6)}
.rmd-lw .rmd-c-cardrow__card{padding:var(--space-10) var(--space-8)}


/* Die Produktempfehlung ist der Baustein showcase - eigenes Layout-CSS braucht sie nicht.
   ABER: seit sie ohne Panel-Kasten auskommt, fehlt ihr dessen Innenabstand als Puffer. Sie bekommt
   deshalb mehr Luft als der Standard-Rhythmus (--space-section).
   WICHTIG: benachbarte Aussenabstaende fallen zusammen (margin collapsing) - ein Wert KLEINER als
   der Rhythmus haette gar nichts bewirkt. Darum Rhythmus + Zuschlag. */
.rmd-lw__in>.rmd-c-showcase--cards{margin-top:calc(var(--space-section) + var(--space-16));margin-bottom:calc(var(--space-section) + var(--space-16))}

/* ===== Referenzen: rotierende Stimmen ===== */
.rmd-lw .quote-panel{display:grid;grid-template-columns:1fr 420px;background:var(--color-surface);border-radius:var(--radius-panel);overflow:hidden}
.rmd-lw .quote-panel__body{padding:var(--space-14);display:flex;flex-direction:column;justify-content:center;min-height:340px}
.rmd-lw .quote-panel__stars{color:var(--color-star);font-size:var(--fs-base);letter-spacing:3px;margin-bottom:var(--space-5)}
.rmd-lw .quote{display:none}
.rmd-lw .quote.is-on{display:block}
.rmd-lw .quote p{font-size:var(--fs-md);line-height:1.6;margin:0 0 var(--space-6)}
.rmd-lw .quote .who{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-lw .quote .role{font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-lw .quote-dots{display:flex;gap:var(--space-2);margin-top:var(--space-6)}
.rmd-lw .quote-dots button{width:10px;height:10px;border-radius:var(--radius-pill);border:0;padding:0;background:var(--color-hairline);cursor:pointer}
.rmd-lw .quote-dots button[aria-current="true"]{background:var(--color-headline)}
.rmd-lw .quote-panel__img{width:100%;height:100%;object-fit:cover}

/* Bilder im globalen Slider-Baustein: Desktop drei nebeneinander, mobil eines mit Peek zum Wischen -
   dieselbe Mechanik wie die Produktgruppen auf den "Leuchten fuer"-Seiten.
   contain:paint kapselt den horizontalen Scroll: ohne das schlaegt er mobil auf Dokumentebene durch
   (Seite scrollt ueber den rechten Rand). overflow-x:clip reicht dafuer NICHT.
   Bilder quadratisch ueber aspect-ratio - die Kachel haelt ihren Platz schon vor dem Laden. */
.rmd-lw .sustain-slider{contain:paint}
.rmd-lw .sustain-slider__img{width:100%;aspect-ratio:1;height:auto;object-fit:cover;border-radius:var(--radius-card);display:block}

/* ===== Vorteile + Beratung: dunkles Panel ===== */
.rmd-lw .dark-cta{background:var(--color-dark);border-radius:var(--radius-panel);padding:var(--space-16) var(--space-14);position:relative;overflow:hidden}
.rmd-lw .dark-cta__in{position:relative;z-index:1}
.rmd-lw .dark-cta h2{color:#FFF;max-width:640px;margin:var(--space-4) 0 var(--space-10)}
/* Beratungs-Panel: drei nummerierte Schritte nebeneinander, darunter eine Fusszeile mit
   Team-Foto und Button. Die Vorteils-Zeile mit Icons ist entfallen - dieselben Punkte stehen
   als eigene Sektion direkt darunter. */
.rmd-lw .steps{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:var(--space-12)}
.rmd-lw .steps__i{border-top:1px solid var(--color-hairline-dark);padding:var(--space-6) var(--space-10) 0}
.rmd-lw .steps__i:first-child{padding-left:0}
.rmd-lw .steps__i+.steps__i{border-left:1px solid var(--color-hairline-dark)}
.rmd-lw .steps__kopf{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.rmd-lw .steps .n{width:32px;height:32px;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-sm);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rmd-lw .steps .t{font-family:var(--font-head);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:#FFF}
.rmd-lw .steps p{margin:0;font-size:var(--fs-sm);color:var(--color-on-dark-muted);line-height:var(--lh-normal)}
.rmd-lw .dark-cta__fuss{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);flex-wrap:wrap;border-top:1px solid var(--color-hairline-dark);padding-top:var(--space-8)}
.rmd-lw .dark-cta__team{display:flex;align-items:center;gap:var(--space-5);min-width:0}
.rmd-lw .dark-cta__foto{width:72px;height:72px;border-radius:var(--radius-pill);object-fit:cover;flex:0 0 auto;background:color-mix(in srgb,#FFFFFF 7%,transparent);display:block;box-shadow:0 0 0 1px var(--color-hairline-dark)}
.rmd-lw .dark-cta__name{font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:#FFF}
.rmd-lw .dark-cta__zitat{margin:2px 0 0;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--color-on-dark-muted);max-width:52ch}

/* ===== Kontakt: WhatsApp betont ===== */
.rmd-lw .contact-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);margin-bottom:var(--space-6)}
.rmd-lw .contact-strip>div{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-6)}
.rmd-lw .contact-strip .n{font-family:var(--font-head);font-size:var(--fs-base);font-weight:var(--fw-semibold);color:var(--color-headline);margin-bottom:6px}
.rmd-lw .contact-strip .v{font-size:var(--fs-sm);color:var(--color-text-muted)}
.rmd-lw .contact-strip .hint{font-size:var(--fs-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.rmd-lw .contact-strip .is-wa{background:var(--color-bg);box-shadow:var(--shadow-md)}
.rmd-lw .hours{text-align:center;font-size:var(--fs-sm);color:var(--color-text-muted);margin:0}

/* ===== Mobile Sticky-CTA ===== */

@media(prefers-reduced-motion:reduce){
  .rmd-lw *,.rmd-lw *::before,.rmd-lw *::after{animation:none!important;transition:none!important}
}

@media(max-width:1024px){
  .rmd-lw-hero,.rmd-lw .know-row,.rmd-lw .know-row--rev{grid-template-columns:1fr;gap:var(--space-8)}
  /* Drei Schritt-Spalten werden hier zu schmal - untereinander, Trennlinie oben statt seitlich. */
  .rmd-lw .steps{grid-template-columns:1fr}
  .rmd-lw .steps__i,.rmd-lw .steps__i:first-child{padding:var(--space-6) 0}
  .rmd-lw .steps__i+.steps__i{border-left:none}
  .rmd-lw-hero__media{order:-1}
  /* Am Handy steht das Bild IMMER oben - auch bei den nicht gespiegelten Reihen. Vorher richtete
     sich die Reihenfolge nach dem Desktop-Layout: mal Bild oben, mal Text oben. Beim Scrollen
     liest sich das wie zwei verschiedene Seiten. */
  .rmd-lw .know-row__media,.rmd-lw .know-row--rev .know-row__media{order:-1}
  .rmd-lw-anford__grid{grid-template-columns:repeat(3,1fr)}
  .rmd-lw-anford__cell:nth-child(-n+3){border-bottom:1px solid var(--color-hairline)}
  .rmd-lw-anford__cell:nth-child(3n+1){border-left:0;padding-left:0}
  .rmd-lw .quote-panel{grid-template-columns:1fr}
  .rmd-lw .quote-panel__img{height:260px}
  .rmd-lw .cri__grid{grid-template-columns:repeat(4,1fr)}
  .rmd-lw .cri__grid figure:nth-child(n+5){display:none}
}
@media(max-width:767px){
  .rmd-lw__in>.rmd-c-showcase--cards{margin-top:calc(var(--space-section) + var(--space-8));margin-bottom:calc(var(--space-section) + var(--space-8))}
  .rmd-lw h2:not([class]){font-size:var(--fs-2xl)}
  .rmd-lw-hero__h1{font-size:var(--fs-4xl)}
  /* Hero-Bild randlos ueber die volle Breite - wie die Abschnitts-Bilder und wie auf den
     "Leuchten fuer"-Seiten. Seitenverhaeltnis statt fester Hoehe, damit das Motiv bei jeder
     Geraetebreite dieselbe Anmutung hat. */
  .rmd-lw-hero__media{margin-left:calc(-1 * var(--space-6));margin-right:calc(-1 * var(--space-6))}
  .rmd-lw-hero__img,.rmd-lw-hero__img.ph{height:auto;aspect-ratio:3/2;border-radius:0}
  /* Einspaltig gibt es nichts mehr zu fuellen - feste Hoehe, Grenzen von oben zuruecknehmen. */
  /* Randlos ueber die volle Bildschirmbreite (gleiches Muster wie beim Extra-Content: negative
     Aussenabstaende in Hoehe des Seitenrands). Statt fester Hoehe ein Seitenverhaeltnis - bei
     voller Breite sah 220px wie ein Briefschlitz aus. Gilt fuer Bild, Video, Platzhalter UND die
     Regler-/Vergleichs-Karten: am Handy ist die Medienspalte durchgehend ein volles Band. */
  .rmd-lw .know-row__media{margin-left:calc(-1 * var(--space-6));margin-right:calc(-1 * var(--space-6))}
  .rmd-lw .know-row__img,.rmd-lw .know-row__img.ph{height:auto;aspect-ratio:3/2;min-height:0;max-height:none;border-radius:0}
  .rmd-lw .know-row__media .rmd-c-slidercard,.rmd-lw .know-row__media .cover__stage{border-radius:0}
  .rmd-lw .know-row__covernote{padding:0 var(--space-6)}
  .rmd-lw-anford__grid{grid-template-columns:1fr 1fr}
  .rmd-lw-anford__cell{padding:var(--space-4)}
  .rmd-lw-anford__cell:first-child,.rmd-lw-anford__cell:nth-child(odd){padding-left:0}
  .rmd-lw-anford__cell:nth-child(odd){border-left:0}
  .rmd-lw-anford__cell:nth-child(even){border-left:1px solid var(--color-hairline)}
  .rmd-lw-anford__cell:nth-child(-n+4){border-bottom:1px solid var(--color-hairline)}
  .rmd-lw .contact-strip{grid-template-columns:1fr}
  /* Hero-Badge (z.B. "CRI 97") mobil auf eine kompakte Pille reduziert: in voller Groesse deckt es
     das Bild fast zu. Die Erklaerzeile entfaellt hier bewusst - die Kernaussage ist der Wert, der
     Zusatz steht ohnehin im Fliesstext. */
  /* Kennzahl im Hero-Bild nur am Desktop. Am Handy lag sie auf einem randlosen Foto, verdeckte
     einen Teil des Motivs und zeigte ohnehin nur noch den Wert ohne Erklaerzeile - der Wert steht
     wenige Zeilen weiter unten in den Anforderungs-Karten, dort mit Zusammenhang. */
  .rmd-lw-hero__badge{display:none}
  /* Kacheln am Handy einspaltig - der cat-tile-Block macht das ab 640px selbst, hier gegen die
     erzwungenen 2 Spalten der Sektion. */
  /* Dunkle Panels laufen am Handy ueber die volle Breite. Der Inhalt sitzt dann direkt am
     Seitenrand - der zusaetzliche Innenabstand des Panels entfaellt, sonst steht der Text doppelt
     eingerueckt und die schmale Spalte wird noch schmaler. */
  .rmd-lw .demo,.rmd-lw .dark-cta{margin-left:calc(-1 * var(--space-6));margin-right:calc(-1 * var(--space-6));border-radius:0;padding:var(--space-12) var(--space-6)}
  .rmd-lw .demo__note{padding:0}
  .rmd-lw .demo__head--lang,.rmd-lw .demo__sub{max-width:none}
  .rmd-lw .demo__usps{display:flex;columns:auto}
  .rmd-lw .cri__grid{padding:var(--space-10) var(--space-5) var(--space-16);gap:10px}
  .rmd-lw .cri__grid .sw{height:64px}
  .rmd-lw .cri__tag--l{left:var(--space-5)}
  .rmd-lw .cri__tag--r{right:var(--space-5)}
  .rmd-lw .strobe__stage{padding:var(--space-10) var(--space-5)}
  .rmd-lw .strobe__wheel{width:200px;height:200px}
  /* Die Skalen-Enden brechen am Handy sonst ineinander. */
  .rmd-lw .demo__scale{font-size:11px}
  /* Beschriftung und Hinweis stehen am Handy UNTEREINANDER. Nebeneinander schoben sie sich
     ineinander: der Hinweis darf im Desktop-Layout nicht umbrechen (nowrap), und beide zusammen
     sind breiter als ein Handy - "BELASTUNG" lag dann mitten im Hinweistext. */
  .rmd-lw .demo__row{flex-wrap:wrap;gap:2px}
  .rmd-lw .demo__hint{flex:1 1 100%;white-space:normal}
  /* Mehrzeiliger Statustext: Punkt an die erste Zeile statt in die Mitte des Blocks. */
  .rmd-lw .demo__status{align-items:flex-start}
  .rmd-lw .demo__dot{margin-top:7px}
  /* Die beiden Leuchten bleiben NEBENEINANDER - der Vergleich ist der ganze Sinn der Buehne.
     Stattdessen schrumpfen Kegel und Abstand. */
  .rmd-lw .ip__stage{padding:var(--space-8) var(--space-5)}
  .rmd-lw .ip__pair{gap:var(--space-3)}
  .rmd-lw .ip__env{margin-bottom:var(--space-6)}
  .rmd-lw .ip__env b{font-size:var(--fs-md)}
  /* Beschriftungen: zwei Zeilen sind am Handy in Ordnung, Ueberlauf nicht. */
  .rmd-lw .ip__lamp figcaption{margin-top:var(--space-4);font-size:11px;overflow-wrap:anywhere}
  .rmd-lw .ip__lamp figcaption b{font-size:var(--fs-xs)}
  /* Untereinander gestapelt: align-items muss von baseline (Desktop-Zeile) auf center wechseln,
     sonst kleben die drei Teile am linken Rand statt mittig zu stehen. */
  .rmd-lw .ip__need{margin-top:var(--space-8);flex-direction:column;align-items:center;gap:6px;text-align:center}
}