/* ===== Produkt-Detailwerte: Lichtwerte-Panel (dunkel) + Beschreibung/Technische-Daten +
   Attribut-Tooltip. GETEILTE Quelle fuer PDP UND Styleguide (Bloecke lightspecs + descspecs).
   Wird per inc/single-product.php auf Produktseiten UND per inc/design-system.php auf der
   Styleguide-Seite geladen - so rendern beide identisch (kein Drift). Frueher in single-product.css. */

/* ===== Beschreibung + Technische Daten (.rmd-c-descspecs, Referenz dev/rmd-desc-specs-5050.html):
   50/50-Raster; links Beschreibung (Eyebrow + Titel + Mehr-lesen), rechts vier Datengruppen als
   Haarlinien-Liste mit EINSPALTIGEN Zeilen (Label links, Wert rechts). Offene Gruppe = Flaeche
   (--color-surface, kein Rahmen). Renderer rmd_render_desc_specs() (inc/single-product.php). ===== */
.rmd-c-descspecs{margin-top:var(--space-section);margin-bottom:var(--space-section)}
.rmd-c-descspecs__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-20);align-items:start}

/* Links: Beschreibung. Eyebrow = Theme-Standard .rmd-c-eyebrow (Montserrat/Dash) - vom Body-Absatz
   AUSNEHMEN (sonst zieht .rmd-c-descspecs__desc p die Eyebrow-Schrift auf Roboto/16px). */
.rmd-c-descspecs__eyebrow{margin:0 0 var(--space-4);letter-spacing:.12em}
/* Sektions-H2 (eine Stufe unter der H1 Produktname): Ihre Lichtwerte, Produktbeschreibung,
   Service-Band. --fs-3xl 34/24, --fw-head 700/600. Ueber Klassen, nicht per Inline-Style.
   Nur die zwei dunklen Anker-Panels behalten die grosse Stufe --fs-5xl (56/36): FAQ hier,
   Test-CTA im CTA-Block. */
.rmd-c-lightspecs__title,.rmd-c-descspecs__title{
  font-family:var(--font-head);font-size:var(--fs-3xl);font-weight:var(--fw-head);letter-spacing:-.02em;line-height:var(--lh-tight)}
.rmd-c-descspecs__title{color:var(--color-headline);margin:0 0 var(--space-6)}
/* Fliesstext: Zeilenlaenge deckeln (60ch), aber 16px behalten (14px loest iOS-Auto-Zoom aus). */
.rmd-c-descspecs__desc p:not(.rmd-c-eyebrow){font-family:var(--font-body);font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--color-text-muted);margin:0 0 var(--space-4);max-width:60ch;text-wrap:pretty}
.rmd-c-descspecs__desc strong{color:var(--color-headline)}
/* Einheitliche Kuerzung: 4 Zeilen, dann "Mehr lesen" (lightspecs.js blendet den Button nur ein,
   wenn der Text die 4 Zeilen ueberschreitet). Absatz-Abstand im geklammerten Zustand raus, damit
   das Zeilen-Clamping ueber mehrere Absaetze sauber zaehlt. */
.rmd-c-descspecs__body{max-width:60ch}
.rmd-c-descspecs__body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.rmd-c-descspecs__body.is-clamped p{margin-bottom:0}
.rmd-c-descspecs__more-btn{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;margin-top:var(--space-2);padding:6px 0;background:none;border:none;border-bottom:2px solid var(--color-signal);cursor:pointer;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
/* KEIN Hover-Effekt: globale Woo/Kadence-Button-Styles pinnen sonst einen gelben Hintergrund an. */
.rmd-c-descspecs__more-btn:hover,.rmd-c-descspecs__more-btn:focus,.rmd-c-descspecs__more-btn:active{background:none!important;box-shadow:none!important;color:var(--color-headline)!important}
.rmd-c-descspecs__more-btn .rmd-icon{width:16px;height:16px;stroke:currentColor;transition:transform .18s ease}
.rmd-c-descspecs__more-btn[aria-expanded="true"] .rmd-icon{transform:rotate(180deg)}
.rmd-c-descspecs__more-btn:focus-visible{outline:2px solid var(--color-headline);outline-offset:2px}

/* Rechts: Datengruppen - Titel links, rechts Anzahl-Meta + Plus (offen -> x). Offene Gruppe:
   Flaeche statt Rahmen; negativer Rand zieht die Flaeche etwas ueber die Spaltenbreite hinaus. */
.rmd-c-descspecs__acc{min-width:0;border-bottom:1px solid var(--color-hairline)}
/* Offene Gruppe ohne Fuellung - Hintergrund bleibt transparent (kein Grau, kein Weiss). */
.rmd-c-descspecs__group{border-top:1px solid var(--color-hairline)}
.rmd-c-descspecs__summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;min-height:44px;cursor:pointer;list-style:none;font-family:var(--font-head);font-size:var(--fs-md);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-c-descspecs__summary::-webkit-details-marker{display:none}
.rmd-c-descspecs__summary:hover{color:var(--color-text-muted)}
/* Kein gelber Fokus-Rahmen um die offene Gruppe: die globale .rmd-product summary:focus-visible-
   Regel (3px signal-hover) mit hoeherer Spezifitaet ueberschreiben - dezent, innenliegend. */
.rmd-product .rmd-c-descspecs__summary:focus-visible{outline:2px solid var(--color-headline);outline-offset:-2px}
.rmd-c-descspecs__summary-meta{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto;font-family:var(--font-body);font-size:13px;font-weight:var(--fw-regular);color:var(--color-text-muted)}
.rmd-c-descspecs__summary-meta .rmd-icon{width:20px;height:20px;stroke:var(--color-headline);transition:transform .18s ease}
.rmd-c-descspecs__group[open] .rmd-c-descspecs__summary-meta .rmd-icon{transform:rotate(45deg)}
/* Datenzeilen: Label links (bricht NIE um), Wert rechts (fuellt den Rest, umbrechbar). auto +
   minmax(0,1fr): das Attribut behaelt seine Zeile, der lange Wert bleibt in seiner Spalte rechts
   und laeuft nicht zu weit nach links zum Label. */
.rmd-c-descspecs__rows{margin:0;padding-bottom:var(--space-5)}
.rmd-c-descspecs__row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-10);align-items:baseline;padding:14px 0;border-top:1px solid var(--color-hairline)}
/* Attributname fuehrt (Montserrat 600, Headline), Wert ruhiger + kleiner (Roboto 14px). */
.rmd-c-descspecs__row dt{display:flex;align-items:center;font-family:var(--font-head);font-size:15px;line-height:1.4;font-weight:var(--fw-semibold);color:var(--color-headline);white-space:nowrap}
.rmd-c-descspecs__row dd{margin:0;font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.45;font-weight:var(--fw-regular);color:var(--color-text);text-align:right;overflow-wrap:break-word}
/* Mehrere Varianten-Werte: jede Variante auf eigener Zeile (ohne Trenn-Komma). */
.rmd-c-descspecs__row dd .rmd-acc-val__line{display:block}
.rmd-c-descspecs__row dd .rmd-acc-val__line+.rmd-acc-val__line{margin-top:3px}
.rmd-c-descspecs__row .rmd-acc__modes{display:grid;gap:6px}
.rmd-c-descspecs__row .rmd-acc__mode{display:flex;gap:var(--space-2);justify-content:flex-end}
.rmd-c-descspecs__row .rmd-acc__modelabel{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:var(--fw-regular);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted)}

/* Datei-Zeilen (Produktdownload) */
.rmd-c-descspecs__files{padding-bottom:var(--space-5)}
.rmd-c-descspecs__file{display:flex;align-items:center;gap:var(--space-4);padding:14px 0;min-height:48px;border-top:1px solid var(--color-hairline);text-decoration:none;color:inherit}
.rmd-c-descspecs__file>.rmd-icon:first-child{flex:0 0 auto;width:22px;height:22px;stroke:var(--color-headline)}
.rmd-c-descspecs__file>span{flex:1;min-width:0}
.rmd-c-descspecs__file .rmd-icon:last-child{flex:0 0 auto;width:18px;height:18px;stroke:var(--color-headline)}
.rmd-c-descspecs__file-n{display:block;font-family:var(--font-head);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--color-headline)}
.rmd-c-descspecs__file-m{display:block;font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:2px}
.rmd-c-descspecs__file:hover .rmd-c-descspecs__file-n{text-decoration:underline}

@media(max-width:1024px){
  .rmd-c-descspecs__grid{grid-template-columns:1fr;gap:var(--space-10)}
}
@media(max-width:767px){
  /* Sektions-H2 Groesse kommt aus --fs-3xl (mobil 24px) - kein Sonderwert. */
  .rmd-c-descspecs__summary{font-size:var(--fs-base)}
  .rmd-c-descspecs__summary-meta span{display:none}
  .rmd-c-descspecs__row{grid-template-columns:1fr;gap:2px}
  .rmd-c-descspecs__row dt{white-space:normal}
  .rmd-c-descspecs__row dd{text-align:left}
}

/* ===== Lichtwerte-Panel (dunkel, .rmd-c-lightspecs__* wie Referenz dev/rmd-lightspecs.html):
   Umschalt-Pills je Variantenachse + 4 Live-Kennzahlen (Lichtstrom/Beleuchtung/Leistung/
   Lichtausbeute). Werte + Achsen kommen serverseitig ins JSON (rmd_lightspecs_data), lightspecs.js
   schaltet. Typo auf PDP-Skala (nicht die grosse Standalone-Groesse). ===== */
/* Mehr Luft nach oben (zwischen Buy-Box/Galerie und "Ihre Lichtwerte"). */
.rmd-lightspecs{margin-top:var(--space-20);margin-bottom:var(--space-10)}
.rmd-c-lightspecs__panel{margin-bottom:var(--space-6);padding:var(--space-10);border-radius:var(--radius-panel);color:var(--color-on-dark-muted);
  background:radial-gradient(560px 300px at 100% 0%,rgba(255,234,118,.20),transparent 68%),var(--color-dark)}
/* Kopf JETZT IM Panel (auf dunkel): Eyebrow + Titel "Ihre Lichtwerte" leicht (light), Lead - wirkt
   harmonischer als die schwarze Ueberschrift ueber der schwarzen Box. */
.rmd-c-lightspecs__head{margin-bottom:var(--space-8)}
.rmd-c-lightspecs__eyebrow{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);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-lightspecs__eyebrow::before{content:"";width:24px;height:3px;background:var(--color-signal);flex:0 0 auto}
/* Groesse/Gewicht kommen aus der Sektions-H2-Regel oben (34/700); hier nur Farbe (auf dunkel). */
.rmd-c-lightspecs__title{color:var(--color-on-dark);margin:0}
.rmd-c-lightspecs__title mark{background:none;color:inherit;box-shadow:inset 0 -.18em 0 var(--color-signal)}
.rmd-c-lightspecs__lead{font-family:var(--font-body);font-size:var(--fs-md);line-height:var(--lh-normal);color:var(--color-on-dark-muted);margin:var(--space-5) 0 0;max-width:var(--container-narrow)}
/* Umschalter - Luft NACH UNTEN (Kundenwunsch); oben reicht der Kopf-Abstand. Der Block rendert nur,
   wenn es Varianten gibt, also greift das Padding automatisch nur "sofern es Varianten gibt". */
.rmd-c-lightspecs__controls{display:flex;gap:var(--space-10);flex-wrap:wrap;margin-bottom:var(--space-8);padding:0 0 var(--space-6)}
.rmd-c-lightspecs__ctl-label{margin:0 0 var(--space-3);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)}
.rmd-c-lightspecs__pills{display:flex;gap:var(--space-2);flex-wrap:wrap}
.rmd-c-lightspecs__pill{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-sm);line-height:1;padding:12px 18px;min-height:44px;border:none;border-radius:var(--radius-pill);cursor:pointer;background:var(--surface-on-dark);color:var(--color-on-dark);transition:background .15s ease,color .15s ease}
/* Hover: Schrift bleibt WEISS (nicht schwarz - sonst auf dunklem Hover unsichtbar); globale
   Button-Hover-Styles ueberschreiben sonst die Farbe. Gedrueckte (gelbe) Pill behaelt dunkle Schrift. */
.rmd-c-lightspecs__pill:hover{background:var(--surface-on-dark-hover);color:var(--color-on-dark)!important}
.rmd-c-lightspecs__pill[aria-pressed="true"]{background:var(--color-signal);color:var(--color-on-signal)}
.rmd-c-lightspecs__pill[aria-pressed="true"]:hover{background:var(--color-signal-hover);color:var(--color-on-signal)!important}
.rmd-c-lightspecs__pill:focus-visible{outline:2px solid var(--color-signal);outline-offset:2px}
/* Kennzahlen */
.rmd-c-lightspecs__figures{display:flex}
.rmd-c-lightspecs__fig{flex:1 1 0;min-width:0;padding:0 var(--space-8)}
.rmd-c-lightspecs__fig:first-child{padding-left:0}
.rmd-c-lightspecs__fig+.rmd-c-lightspecs__fig{border-left:1px solid var(--color-hairline-dark)}
/* Zahl + Einheit getrennt (Markup ist bereits zweigeteilt): Zahl 38/26px 700 -.03em, Einheit
   16/13px 600 in Signal-Gelb, 8px Abstand (gap space-2), an der Grundlinie ausgerichtet. */
.rmd-c-lightspecs__fig-val{display:flex;align-items:baseline;gap:var(--space-2);margin:0;font-family:var(--font-head);font-weight:var(--fw-bold);letter-spacing:-.03em;line-height:1.05;color:var(--color-on-dark);white-space:nowrap}
.rmd-c-lightspecs__fig-num{font-size:38px}
.rmd-c-lightspecs__fig-unit{font-family:var(--font-head);font-size:var(--fs-base);font-weight:var(--fw-semibold);letter-spacing:0;color:var(--color-signal)}
.rmd-c-lightspecs__fig-lbl{margin:var(--space-3) 0 0;font-family:var(--font-body);font-size:var(--fs-sm);line-height:1.35;color:var(--color-on-dark-muted)}
.rmd-c-lightspecs__panel-note{margin:var(--space-8) 0 0;padding-top:var(--space-5);border-top:1px solid var(--color-hairline-dark);font-size:var(--fs-sm);line-height:1.5;color:var(--color-on-dark-muted)}
@media(max-width:900px){
  .rmd-c-lightspecs__panel{padding:var(--space-8)}
  .rmd-c-lightspecs__controls{gap:var(--space-8)}
  .rmd-c-lightspecs__fig{padding:0 var(--space-5)}
}
@media(max-width:767px){
  /* Mobil full-bleed: das dunkle Panel ueber die volle Viewport-Breite ziehen (aus dem Container-
     Padding ausbrechen), ohne Radius. calc(50% - 50vw) = unabhaengig vom Container-Padding. */
  .rmd-c-lightspecs__panel{padding:var(--space-10) var(--space-6);border-radius:0;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  .rmd-c-lightspecs__controls{gap:var(--space-6);margin-bottom:var(--space-6);padding:0 0 var(--space-4)}
  .rmd-c-lightspecs__figures{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6) var(--space-5)}
  .rmd-c-lightspecs__fig,.rmd-c-lightspecs__fig:first-child{padding:0}
  .rmd-c-lightspecs__fig+.rmd-c-lightspecs__fig{border-left:none}
  .rmd-c-lightspecs__fig-val{white-space:normal}
  .rmd-c-lightspecs__fig-num{font-size:26px}
  .rmd-c-lightspecs__fig-unit{font-size:13px}
  .rmd-c-lightspecs__panel-note{margin-top:var(--space-6)}
}

/* ===== Attribut-Info-Tooltip (Hover am Attributnamen / an der Kennzahl-Bezeichnung).
   Reines CSS: Icon + dunkles Popup ueber dem Icon, erscheint bei :hover und :focus-visible
   (Tastatur/Touch). Renderer rmd_spec_tip_html() (inc/single-product.php). ===== */
.rmd-tip{position:relative;display:inline-flex;align-items:center;margin-left:6px;color:var(--color-icon-quiet);cursor:help;flex:0 0 auto}
.rmd-tip .rmd-icon{width:14px;height:14px;stroke:currentColor}
.rmd-tip:hover,.rmd-tip:focus-visible{color:var(--color-headline);outline:none}
.rmd-tip__pop{position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:max-content;max-width:260px;
  background:var(--color-dark);border:1px solid var(--color-hairline-dark);color:var(--color-on-dark);
  font-family:var(--font-body);font-size:13px;font-weight:var(--fw-regular);line-height:1.5;letter-spacing:0;
  text-transform:none;text-align:left;white-space:normal;padding:12px 14px;border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .15s ease,transform .15s ease}
.rmd-tip__pop::after{content:"";position:absolute;top:100%;left:13px;border:6px solid transparent;border-top-color:var(--color-dark)}
.rmd-tip:hover .rmd-tip__pop,.rmd-tip:focus .rmd-tip__pop,.rmd-tip:focus-visible .rmd-tip__pop{opacity:1;transform:translateY(0)}
/* Im dunklen Panel: Icon hell, Popup bleibt dunkel (mit Rand sichtbar). */
.rmd-c-lightspecs__fig-lbl .rmd-tip{color:var(--color-on-dark-muted)}
.rmd-c-lightspecs__fig-lbl .rmd-tip:hover,.rmd-c-lightspecs__fig-lbl .rmd-tip:focus-visible{color:var(--color-on-dark)}
@media(max-width:767px){
  /* Mobil (Tap): Popup als fixierte Leiste am unteren Rand - kann so NIE ausserhalb des Layouts
     landen, egal wo das Icon steht. Pfeil entfaellt. */
  .rmd-tip__pop{position:fixed;left:16px;right:16px;bottom:16px;top:auto;width:auto;max-width:none;transform:translateY(8px)}
  .rmd-tip__pop::after{display:none}
}