/* Reports-Web-View — Indigo/Navy, gekoppelt an sa-foundation Tokens (light-dark). */
:root {
  --ma-900:        var(--c-ink);
  --ma-800:        var(--c-ink);
  --ma-700:        var(--c-graphite);
  --ma-600:        var(--c-graphite);
  --ma-500:        var(--c-slate);
  --ma-400:        var(--c-slate);
  --ma-200:        var(--c-ash);
  --ma-50:         var(--c-bone);
  --ma-negative:   var(--c-bordeaux);
  --ma-text:       var(--c-ink);
  --ma-alt-row:    var(--c-bone);
  --ma-border:     var(--c-divider);
  --ma-warm-grey:  var(--c-paper);
  --ma-pos-bg:     var(--c-accent-wash);
  --ma-pos-fg:     var(--c-ink);
  --ma-neg-bg:     var(--c-bordeaux-wash);
  --ma-neg-fg:     var(--c-bordeaux);
  --ma-font:       var(--font-body);
  --ma-mono:       var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.rw-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

[x-cloak] { display: none !important; }

/* Jargon-Glossar (Nav+Jargon Nacht-Build; N3.1/Epic #1612: Klick-Popover statt
   title-Tooltip). Report-Variante der Auszeichnung — Selektor ohne `abbr`,
   weil der Filter seit N3.1 ein <span role="button"> rendert. Die Annahme von
   damals („das title-Attribut traegt auch touch") hat sich in der Feedback-
   Runde nicht bestaetigt; Basis-Optik + Panel stehen in sa-app.css. */
.rw-gloss {
  text-decoration: underline dotted;
  text-decoration-color: var(--ma-400);
  text-underline-offset: 2px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.rw-dropdown {
  position: relative;
  display: inline-block;
}

.rw-dropdown__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  min-width: 260px;
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.12);
  padding: 0.25rem;
  z-index: 50;
  max-height: 360px;
  overflow-y: auto;
}

.rw-dropdown__item {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  color: var(--ma-text);
  text-decoration: none;
  font-size: 0.9rem;
  font-family: var(--ma-font);
}

.rw-dropdown__item:hover {
  background: var(--ma-50);
}

.rw-dropdown__item small {
  display: block;
  color: var(--ma-400);
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.rw-dropdown__item--all {
  border-top: 1px solid var(--ma-border);
  margin-top: 0.25rem;
  padding-top: 0.6rem;
  color: var(--ma-600);
  font-weight: 600;
}

.rw-tabs__nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--ma-border);
  margin-bottom: 1rem;
  overflow-x: auto;
}

.rw-tabs__btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-family: var(--ma-font);
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--ma-400);
  white-space: nowrap;
}

/* W5b (Audit #28): gedimmter Experten-Tab (Progressive Disclosure),
   z.B. Listing-SEO "Datenqualität" — sichtbar, aber bewusst zurückhaltend. */
.rw-tabs__btn--muted:not(.is-active) {
  opacity: 0.55;
  font-size: 0.85em;
}

.rw-tabs__btn.is-active {
  color: var(--p-tp);
  border-bottom-color: var(--p-violet);
  border-bottom-width: 2px;
  font-weight: 600;
}

.rw-tabs__btn:hover {
  background: var(--ma-50);
}

.rw-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.rw-kpi {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  padding: 1rem 1.1rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0; /* Grid-Item darf schrumpfen → Inhalt sprengt die Karte nicht */
  container-type: inline-size; /* erlaubt fluide KPI-Werte via cqi (s. sa-premium.css) */
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .25);
  transition: box-shadow 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rw-kpi:hover {
    box-shadow: 0 24px 50px -24px rgba(30, 43, 120, .35);
  }
}

.rw-kpi__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-tm);
  font-family: var(--ma-font);
  margin-bottom: 4px;
}

.rw-kpi__value {
  font-family: var(--ma-font);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--p-tp);
  font-variant-numeric: tabular-nums;
  /* Safety-Net: kein Wert ragt je aus seiner Karte (greift nur bei Overflow). */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rw-kpi__hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--p-tm);
  font-family: var(--ma-font);
  font-variant-numeric: tabular-nums;
}

/* Zeitraum-Caption pro KPI-Karte („jede zeitbezogene Kennzahl braucht
   klaren Zeitraum", Variante B) — kleine, gedämpfte Zeile wie der Hint. */
.rw-kpi__period {
  /* .6875rem = glatte 11px bei 16px Root. Codex-Nachpruefung 27.08.2026,
     BEFUND 3: die erste Runde hob nur .rw-th und die Label-Stufe, waehrend
     Zeitraum, Vorlaeufigkeitsmarker und Delta-Text derselben Karte darunter
     blieben. Eine Untergrenze, die auf halber Komponente endet, ist keine. */
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--p-tm);
  font-family: var(--ma-font);
  font-variant-numeric: tabular-nums;
}

/* Datenreife als eigener Kanal (R23c/R23e): der Marker sagt VORLÄUFIG, nicht
   ALT und nicht FEHLERHAFT. Formkanal ist die gestrichelte Unterlinie,
   dieselbe Strichelung wie beim Kopf-Chip (.dash-chain__partial) und beim
   vorläufigen Chart-Punkt - deshalb kein Warn-Ton, sondern der gedämpfte
   Sekundär-Ton der Hint-Zeile darüber. */
.rw-kpi__provisional {
  /* .6875rem = glatte 11px, siehe .rw-kpi__period (BEFUND 3). */
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--p-tm);
  font-family: var(--ma-font);
  text-decoration: underline dashed;
  text-underline-offset: 2px;
}

/* ── Main-KPIs: Block-Überschrift + Vergleichs-Chip (YoY/MoM) ── */
.rw-kpis__title {
  font-family: var(--ma-font);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--p-tm);
  margin: 0 0 0.6rem;
}

.rw-kpi__delta {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-family: var(--ma-font);
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  /* Default (flat/unbekannt): neutral grau. */
  color: var(--p-tm);
  background: rgba(22, 25, 58, .06);
}
.rw-kpi__delta--up {
  color: #1B7A4B;
  background: rgba(27, 122, 75, .12);
}
.rw-kpi__delta--down {
  color: #C0392B;
  background: rgba(192, 57, 43, .12);
}
.rw-kpi__delta-label {
  /* .6875rem = glatte 11px, siehe .rw-kpi__period (BEFUND 3). Vorher 10,24px. */
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Feste AA-konforme Farbe statt opacity:0.8 auf --p-tm (drückte den
     Kontrast auf hellem Grund unter WCAG-Minimum). */
  color: var(--p-ts);
}

/* ── Prism Chart-Grid: weiße Karten, gleiche Reihenhöhe (bündig), kein Orphan ── */
.rw-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.3rem;
  align-items: stretch;
}

/* Jeder Chart = pp-bezel-Optik: Outer-Shell + getönter Schatten */
.rw-chart {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 70px -30px rgba(30, 43, 120, .3);
  padding: 9px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Inner-Core (Bezel-Kern): trägt Titel + Canvas */
.rw-chart__inner {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(22, 25, 58, .15);
  background: #fff;
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rw-chart__title {
  font-family: var(--ma-font);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 0.7rem;
  color: var(--p-tp);
}

.rw-chart__canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 260px;
  min-height: 260px;
  cursor: zoom-in; /* Klick aufs Chart öffnet die Lightbox (JS: reports-web.js) */
}

/* Kein Positions-Heuristik-Block mehr: „einsamer Halb-Chart" wird SERVERSEITIG
   verhindert (``normalize_chart_widths`` in reports/web/viewmodels.py, aufgerufen
   in ``Tab.__post_init__``). Die alten Regeln ``:only-child`` /
   ``.rw-chart:last-child:nth-child(odd)`` zählten die Grid-POSITION statt der
   Karten-Breite und zogen darum bei ``[full, half, half]`` die falsche Karte
   auf volle Breite — der Halb-Chart daneben blieb allein stehen. */

/* ── Explizite Chart-Breite (ChartConfig.width) ──
   „half" = Standard-2-Spalten-Verhalten (Default, ändert keinen anderen
   Report). „full" = volle Reihen-Breite + spürbar mehr Höhe → genuine
   „large"-Charts (SWOT Bubble + Scatter). */
.rw-chart--full {
  grid-column: 1 / -1;
}
.rw-chart--full .rw-chart__canvas-wrap {
  height: 420px;
  min-height: 420px;
}
@media (max-width: 720px) {
  /* Stack: Half-Charts werden eh 1-spaltig (Grid unten), Full bleibt full. */
  .rw-chart--full .rw-chart__canvas-wrap {
    height: 320px;
    min-height: 320px;
  }
}
/* „core" (Grundstil S3, ASIN-Kern-Charts): keine Grid-Column-Regel nötig —
   die Karte lebt im eigenen 3-spaltigen ``.rw-core-charts``-Raster (unten)
   statt im 2-spaltigen ``.rw-charts``-Grid und belegt dort schlicht eine
   Zelle. Der Wert existiert nur, damit ``normalize_chart_widths`` (Half/Full-
   Pairing) diese drei Karten NICHT mit den Ads-Satelliten aus ``tab.charts``
   verpaart (siehe Kommentar in ``asin_analysis.py``). */

/* ── ASIN-Kern-Charts (Grundstil S3): Small-Multiples-Raster ──
   Drei kompakte Karten nebeneinander statt einer vollbreiten Karte mit
   Kennzahlen-Umschalt-Chips — die globale Bedien-Leiste (Darstellung/
   Zeitraum) steht darüber, siehe ``.rw-trendbar--core`` unten. */
.rw-core-group {
  margin-bottom: 1.3rem;
}
.rw-core-charts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
@media (max-width: 980px) {
  .rw-core-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rw-core-charts { grid-template-columns: 1fr; }
}

/* ── Chart-Kopf: Titel + Expand-Affordance (Task C) ── */
.rw-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.rw-chart__head .rw-chart__title {
  margin-bottom: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
}
/* Zeitraum-Caption am Chart-Kopf (Zeitraum-Klarheit) — Stil der KPI-Captions. */
.rw-chart__period {
  flex: 0 0 auto;
  padding-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--p-ts, #64748b);
  white-space: nowrap;
}

/* ── Value-Add-Verdikt: Klartext-Handlung(en) unter dem Chart (Daten → Aussage
   → Handlung). Farbcodiert nach Ton; getönte Callout-Zeile im Badge-Stil der
   App, kein violetter Akzentbalken. ── */
.rw-verdicts {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rw-verdict {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--p-tp, #0f172a);
  background: var(--p-surf, #f1f4fb);
}
.rw-verdict::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.36rem;
  border-radius: 50%;
  background: var(--p-tm, #64748b);
}
.rw-verdict--good { background: var(--p-ok-bg, #dcfce7); }
.rw-verdict--good::before { background: var(--p-ok, #16a34a); }
.rw-verdict--warn { background: var(--p-warn-bg, #fef3c7); }
.rw-verdict--warn::before { background: var(--p-warn, #f59e0b); }
.rw-verdict--bad { background: var(--p-dng-bg, #fee2e2); }
.rw-verdict--bad::before { background: var(--p-dng, #dc2626); }
.rw-verdict--info { background: var(--p-tint-10); }
.rw-verdict--info::before { background: var(--p-violet); }
.rw-chart__expand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--p-r-ico, 8px);
  background: transparent;
  color: var(--ma-400);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rw-chart__expand svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rw-chart__expand:hover {
  background: var(--p-surf, #EEF3FA);
  color: var(--p-violet, #7C3AED);
  border-color: var(--p-bd, rgba(22, 25, 58, .12));
}
.rw-chart__expand:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rw-chart__expand { transition: none; }
}

/* Stacking: schmale Viewports → Charts immer 1-spaltig. */
@media (max-width: 720px) {
  .rw-charts { grid-template-columns: 1fr; }
}

/* ── Chart-Lightbox (Task C, global für ALLE Reports) ──
   Weißes Plate auf dunklem Scrim, Prism-Radien, Violett-Akzente.
   DOM wird von reports-web.js erzeugt (Singleton). */
.rw-clb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(5, 8, 22, .58);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.rw-clb.is-open { opacity: 1; }
.rw-clb[hidden] { display: none; }
.rw-clb__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1100px, 96vw);
  height: min(80vh, 760px);
  background: #fff;
  border: 1px solid var(--p-bd, rgba(22, 25, 58, .12));
  border-radius: var(--p-r-card, 14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 40px 90px -30px rgba(8, 12, 40, .6);
  padding: 0.75rem;
  transform: translateY(8px) scale(.985);
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1);
}
.rw-clb.is-open .rw-clb__panel { transform: translateY(0) scale(1); }
.rw-clb__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem 0.6rem;
  border-bottom: 1px solid var(--p-div, rgba(22, 25, 58, .1));
}
.rw-clb__title {
  margin: 0;
  font-family: var(--ma-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--p-tp, var(--c-ink));
}
.rw-clb__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ma-400);
  background: transparent;
  border: none;
  border-radius: var(--p-r-ico, 8px);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.rw-clb__close:hover { background: var(--p-surf, #EEF3FA); color: var(--ma-800); }
.rw-clb__close:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }
.rw-clb__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  gap: 1.25rem;
}
.rw-clb__canvas-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.75rem 0.25rem 0.25rem;
}
@media (prefers-reduced-motion: reduce) {
  .rw-clb,
  .rw-clb__panel { transition: none; }
  .rw-clb__panel { transform: none; }
}

/* ── Grosse Fassung (Startseiten-Chart-Karten, SQ_DASHBOARD_DEEPDIVE) ──
   Dieselbe Lightbox, nur mit Seitenspalte (Erkenntnis + Eckwerte) und Fuss
   (Wertetabelle + Fussnoten). Report-Karten bekommen die Klasse nie und
   rendern zeichengleich wie vorher. */
.rw-clb__heading { min-width: 0; }
.rw-clb__sub {
  margin: 0.2rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ma-500, #5b5578);
}
.rw-clb__sub[hidden] { display: none; }
.rw-clb__side[hidden],
.rw-clb__foot[hidden] { display: none; }
.rw-clb__panel--rich {
  height: auto;
  max-height: min(90vh, 900px);
  overflow-y: auto;
  padding: 0.75rem 1rem 1rem;
}
.rw-clb__panel--rich .rw-clb__head {
  position: sticky;
  top: -0.75rem;
  z-index: 2;
  background: #fff;
}
.rw-clb__panel--rich .rw-clb__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  flex: 0 0 auto;
}
.rw-clb__panel--rich .rw-clb__canvas-wrap {
  height: clamp(260px, 46vh, 460px);
  flex: none;
}
.rw-clb__side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  padding-top: 0.75rem;
}
.rw-clb__insight {
  border: 1px solid var(--p-bd, rgba(22, 25, 58, .12));
  border-radius: var(--p-r-card, 14px);
  background: var(--p-surf, #f4f7fc);
  padding: 0.7rem 0.85rem;
}
.rw-clb__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ma-500, #5b5578);
}
.rw-clb__insight .dash-chartcard__say { margin: 0; }
.rw-clb__insight .rw-verdicts { margin-top: 0.5rem; }
.rw-clb__foot {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--p-div, rgba(22, 25, 58, .1));
}
.rw-clb__foot .chart-table { margin-top: 0; }
.rw-clb__foot .dash-chartcard__sources {
  margin: 0.5rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--ma-500, #5b5578);
}
/* Der Eckwert-Vorrat liegt server-gerendert in der Karte und ist dort nie zu
   sehen; sichtbar wird nur der Klon im Overlay. */
.dash-dd[hidden] { display: none; }
.dash-dd__context {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  color: var(--ma-500, #5b5578);
}
.rw-clb__side .dash-dd__context { display: none; }
.dash-dd__figs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.9rem;
  margin: 0;
}
.dash-dd__fig {
  min-width: 0;
  border-top: 1px solid var(--p-div, rgba(22, 25, 58, .1));
  padding-top: 0.4rem;
}
.dash-dd__fig-l {
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--ma-500, #5b5578);
}
.dash-dd__fig-v {
  margin: 0.1rem 0 0;
  font-size: 0.95rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--p-tp, var(--c-ink));
}
@media (max-width: 860px) {
  .rw-clb__panel--rich .rw-clb__body { grid-template-columns: minmax(0, 1fr); }
}

.rw-banner {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.rw-banner--info {
  background: var(--ma-50);
  border-left: 3px solid var(--ma-600);
}

.rw-filters {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.rw-filter {
  background: transparent;
  border: 1px solid var(--ma-border);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--ma-font);
}

/* Aktiver Filter-Chip trägt Markenlila (kanonischer Verlauf wie Buttons),
 * nicht das Chart-Blau — --p-blue bleibt den Daten-Serien vorbehalten. */
.rw-filter.is-active {
  background: var(--p-grad-violet);
  color: #fff;
  border-color: var(--p-violet);
}

/* On-dark-Scope (Design-Audit 2026-07-03): Tab-Leiste + Quadrant-Filter der
 * Report-Seite liegen auf dem dunklen Verlaufs-Grund — die .p-main-Slate-Töne
 * aus sa-premium.css gelten hellen Flächen und sind hier unsichtbar (~1.4:1).
 * Scope-Klasse statt globalem Override, damit helle Flächen unberührt bleiben. */
.rw-tabs--on-dark .rw-tabs__btn { color: rgba(255, 255, 255, 0.72); }
.rw-tabs--on-dark .rw-tabs__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.rw-tabs--on-dark .rw-tabs__btn.is-active { color: #fff; }
.rw-tabs--on-dark .rw-filter {
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.28);
}
.rw-tabs--on-dark .rw-filter:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.rw-tabs--on-dark .rw-filter:disabled {
  opacity: 0.45;
  cursor: default;
}
.rw-tabs--on-dark .rw-filter.is-active {
  background: var(--p-grad-violet);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* Anker-Chip zur KI-Empfehlung am Seitenende (rechts in der Tab-Leiste) —
 * macht den Handlungs-Einstieg above the fold sichtbar. */
.rw-tabs__reco-link {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.rw-tabs__reco-link:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* Mehrzeilen-KPI-Kachel (Quadranten-Zählung): Farbpunkt + Name + Zahl.
 * Zahl rechtsbündig in tabular-nums; „risk" = Risiko-Rot (nur Dog). */
.rw-kpi__rows {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.15rem 0;
}
.rw-kpi__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}
.rw-kpi__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.rw-kpi__row-label {
  color: var(--p-ts, #475569);
}
.rw-kpi__row-value {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rw-kpi__row--risk .rw-kpi__row-value {
  color: #B91C1C;
}

.rw-table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 30px 70px -30px rgba(30, 43, 120, .3);
  padding: 9px;
}

/* Inner-Core der Tabelle (Bezel-Kern) */
.rw-table-wrap > table {
  border-radius: 16px;
  border: 1px solid rgba(22, 25, 58, .15);
  overflow: hidden;
}

.rw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  font-family: var(--ma-font);
  font-variant-numeric: tabular-nums;
}

.rw-table th,
.rw-table td {
  border-bottom: 1px solid var(--p-div);
}

.rw-table th {
  padding: .5rem .6rem;
}

.rw-table td {
  padding: .55rem .6rem;
}

.rw-table tbody tr:hover {
  background: var(--ma-50);
}

/* Empty-State-Zeile (keine Daten im Tab) */
.rw-table__empty {
  padding: 1.6rem .6rem;
  text-align: center;
  color: var(--p-tm);
  font-style: italic;
}
.rw-table tbody tr:has(.rw-table__empty):hover { background: transparent; }

/* Lange Produktnamen kappen statt Tabelle in die Breite zu zwingen.
   Hover-Tooltip via title-Attribut wäre nice — kommt später. */
.rw-td--text {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Opt-in (Column(..., wrap=True)): Fliesstext-Spalten umbrechen statt kappen.
   Warum noetig: die Kappung oben nimmt der Zelle im Auto-Table-Layout ihre
   Mindestbreite. In breiten Tabellen (Wasted Spend „Suchbegriffe", 13 Spalten)
   verteilt der Browser die 100%-Breite deshalb so, dass die letzten Textspalten
   auf wenige Zeichen zusammenfallen ("Bid-Cap auf 0,38 EUR (Sc…"). Umbruch +
   Mindestbreite in ch machen den Text wieder vollstaendig lesbar; reicht die
   Breite nicht, scrollt der Wrapper horizontal (overflow-x: auto). Gilt nur
   fuer Spalten, die das Feld explizit setzen, jede andere Tabelle bleibt
   unveraendert. */
.rw-table td.rw-td--wrap {
  max-width: none;
  min-width: 16ch;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.rw-two-line {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.rw-two-line__primary {
  color: var(--p-tp, var(--ma-800));
  font-weight: 650;
}

.rw-two-line__secondary {
  margin-top: .15rem;
  color: var(--p-tm, var(--ma-400));
  font-size: .72rem;
}

.rw-table-details {
  display: grid;
  gap: .5rem;
  margin-top: .75rem;
}

.rw-table-detail {
  border: 1px solid var(--p-div);
  border-radius: 12px;
  background: var(--c-paper-raised, #fff);
}

.rw-table-detail__summary {
  padding: .7rem .9rem;
  color: var(--p-tp, var(--ma-800));
  font-weight: 700;
  cursor: pointer;
}

.rw-table-detail__rows {
  margin: 0;
  padding: 0 .9rem .8rem;
}

.rw-table-detail__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .35rem 0;
  border-top: 1px solid var(--p-div);
}

.rw-table-detail__row dt,
.rw-table-detail__row dd {
  margin: 0;
}

.rw-table-detail__row dd {
  color: var(--p-tm, var(--ma-500));
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rw-expand {
  display: grid;
  gap: .45rem;
  min-width: 18ch;
}

.rw-expand__button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--p-ts, var(--ma-700));
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.rw-expand__button:disabled {
  color: var(--p-tm, var(--ma-400));
  cursor: default;
}

.rw-expand__button:hover:not(:disabled) {
  color: var(--p-violet, var(--ma-700));
}

.rw-expand__details {
  display: grid;
  gap: .25rem;
  padding-left: .75rem;
  border-left: 2px solid var(--p-surf-violet-bd, var(--ma-200));
  color: var(--p-tm, var(--ma-600));
  font-size: .76rem;
}

.rw-expand__line {
  display: block;
}

/* Numerische Spalten dürfen NIE umbrechen — Prozente, Euro-Beträge etc.
   sind sonst unleserlich (z.B. "38,3\n%"). */
.rw-td--currency,
.rw-td--number,
.rw-td--percent,
.rw-td--pct_raw,
.rw-td--trend {
  white-space: nowrap;
}

.rw-th {
  /* Signature Navy→Violett-Slab-Verlauf in der Kopfzeile (--p-ai-grad-Stimmung), weißer Text, lesbar */
  background: var(--p-grad-slab);
  text-align: left;
  font-weight: 700;
  color: var(--c-paper-raised);
  position: sticky;
  top: 0;
  z-index: 1;
  /* Kleinste Stufe der Label-Skala (.rw-kpi__label, oben mitgehoben).
     Korrigiert 24.08.2026 (Codex-Befund 3 zu PR #1766): der erste Anlauf setzte
     .68rem, das sind bei 16px Root (sa-foundation.css) nur 10,88px und damit
     selbst unter der 11px-Grenze, die Sichtung F6 sichern sollte. .6875rem ist
     die kleinste rem-Angabe, die auf glatte 11px aufgeht.
     Reichweite: dieser Durchgang hebt NUR die vier Stellen aus F6 plus die
     Label-Stufe, auf die sie sich berufen. Die Design-Dateien tragen weitere
     Deklarationen unter 11px; sie brauchen eine Sichtpruefung und einen eigenen
     Durchgang, und den Wachdienst darueber baut der Ratschen-PR. */
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rw-th.is-sortable {
  cursor: pointer;
  user-select: none;
}

.rw-th.is-sortable:hover {
  background: var(--p-grad-slab);
  filter: brightness(.9);
}

.rw-th.is-sorted-asc::after { content: " ↑"; color: var(--p-lav); font-weight: 700; }
.rw-th.is-sorted-desc::after { content: " ↓"; color: var(--p-lav); font-weight: 700; }

.rw-th--right,
.rw-td--right { text-align: right; }
.rw-th--center,
.rw-td--center { text-align: center; }

.rw-zone {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.rw-zone--oos,
.rw-zone--red { color: #8f2438; background: #faebed; }
.rw-zone--yellow { color: #6b5200; background: #fff4cc; }
.rw-zone--green { color: #245b31; background: #e8f3ea; }
.rw-zone--no-sales,
.rw-zone--no-history { color: #4a4a6a; background: #eeedf4; }

/* ─── Zeitraum-Klarheit (Variante B) ──────────────────────────────────────
   „Bezug der Werte"-Leiste über jeder Tabelle + dezenter Marker-Punkt an
   Spalten, deren Zeitfenster vom Report-Zeitraum abweicht (TREND, BSR akt.).
   Stil an Prism/Premium angelehnt; KEIN lila Links-Balken. */
.rw-period-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  font-family: var(--ma-font);
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 14px;
  padding: 8px 14px;
  margin: 0 0 10px;
  font-size: .78rem;
  color: var(--p-tm, var(--ma-500));
}
.rw-period-legend__main {
  color: var(--p-ink, var(--ma-900));
  font-weight: 700;
}
.rw-period-legend__sep {
  width: 1px;
  height: 14px;
  background: rgba(22, 25, 58, .14);
}
.rw-period-legend__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rw-period-legend__key {
  font-weight: 700;
  color: var(--p-ink, var(--ma-900));
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rw-period-legend__tag {
  font-variant-numeric: tabular-nums;
  background: var(--ma-50, var(--c-bone));
  border: 1px solid rgba(22, 25, 58, .1);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--p-ink, var(--ma-900));
  white-space: nowrap;
}

/* Spaltenköpfe bleiben EINZEILIG (kompakt); der Marker ist nur ein kleiner
   Punkt, der Tooltip sitzt am ganzen <th> (title-Attribut). */
.rw-th--periodmark { cursor: help; }
.rw-th-periodmark {
  display: inline-block;
  margin-left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--p-lav, #b9a7ff);
  vertical-align: middle;
  opacity: .9;
}

/* Zahlenspalten stehen untereinander und werden per Alpine neu sortiert bzw.
   gefiltert — ohne tabular-nums wandert die Spalte bei jedem Wechsel (R22a-2).
   Die Liste deckt JEDEN numerischen ``Column.type`` aus ``_table.html`` ab;
   bis 20.08.2026 trugen nur ``currency`` und ``number`` die Eigenschaft, die
   Prozent-, Dezimal-, Trend- und BSR-Spalten liefen proportional. */
.rw-td--currency,
.rw-td--currency_precise,
.rw-td--number,
.rw-td--decimal,
.rw-td--percent,
.rw-td--pct_raw,
.rw-td--trend,
.rw-td--bsr,
.rw-td--target_form { font-variant-numeric: tabular-nums; }

.rw-abc {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
}

.rw-abc--a { background: var(--c-moss); color: var(--c-paper-raised); }
.rw-abc--b { background: var(--ma-600); color: var(--c-paper-raised); }
.rw-abc--c { background: var(--c-bordeaux); color: var(--c-paper-raised); }
.rw-abc--unknown { background: var(--ma-border); color: var(--ma-400); }

.rw-trend--up { color: var(--c-moss); }
.rw-trend--down { color: var(--c-bordeaux); }
.rw-trend--flat { color: var(--ma-400); }

/* SWOT-spezifisch: 4-Felder-Grid mit S/W/O/T-Listen, Score-Badges. */
.rw-swot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rw-swot {
  background: var(--p-card);
  border: 1px solid var(--p-bd);
  border-left: 4px solid var(--p-bd);
  padding: 0.9rem 1.1rem;
  border-radius: var(--p-r-card-sm);
  box-shadow: var(--p-sh-card);
}

.rw-swot h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ma-900);
}

.rw-swot ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.rw-swot li {
  padding: 0.2rem 0;
}

.rw-swot__empty {
  color: var(--ma-400);
  list-style: none;
}

/* Datenlücken-Caption unter dem SWOT-Grid (Platzhalter-Ehrlichkeit). */
.rw-swot-notes {
  list-style: none;
  margin: -0.75rem 0 1.5rem;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ma-400, var(--c-slate));
}

.rw-swot-notes li + li {
  margin-top: 0.35rem;
}

/* Rot NUR Risiko (Spec): Threats=rot, Weaknesses=amber (Audit-Fix 2026-06-10) */
.rw-swot--s { border-left-color: var(--p-ok); }
.rw-swot--w { border-left-color: var(--p-warn); }
.rw-swot--o { border-left-color: var(--p-blue); }
.rw-swot--t { border-left-color: var(--p-dng); }

/* Prioritäten — gerankte Aktionen (weiße Daten-Platten auf Lila-Grund). */
.rw-priority {
  margin-bottom: 1.5rem;
}

.rw-priority__title {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--ma-900);
}

.rw-priority__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rw-priority__card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--p-card);
  border: 1px solid var(--p-bd);
  border-left: 4px solid var(--p-bd);
  padding: 0.7rem 1rem;
  border-radius: var(--p-r-card-sm);
  box-shadow: var(--p-sh-card);
}

.rw-priority__card--w { border-left-color: var(--p-warn); }
.rw-priority__card--o { border-left-color: var(--p-blue); }
.rw-priority__card--t { border-left-color: var(--p-dng); }

.rw-priority__rank {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--ma-900);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
}

.rw-priority__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rw-priority__label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ma-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-priority__action {
  font-size: 0.8rem;
  color: var(--ma-400);
}

.rw-priority__impact {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ma-900);
  white-space: nowrap;
}

.rw-score {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums; /* Score-Spalte (swot_score), R22a-2 */
  text-align: center;
}

.rw-score--good { background: var(--c-moss); color: var(--c-paper-raised); }
.rw-score--mid { background: var(--ma-600); color: var(--c-paper-raised); }
.rw-score--bad { background: var(--c-bordeaux); color: var(--c-paper-raised); }
.rw-score--neutral { background: var(--ma-border); color: var(--ma-400); }

/* BCG-spezifisch: Quadrant-Badge + 4-Felder-Grid. */
.rw-bcg {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--c-paper-raised);
}

/* Prism — Quadrant-Badges identisch zur Chart-Legende. */
.rw-bcg--star { background: var(--p-blue); }
.rw-bcg--cash_cow { background: var(--p-violet); }
.rw-bcg--question_mark { background: var(--p-cyan); }
.rw-bcg--dog { background: var(--p-dng); }

.rw-bcg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.rw-bcg-cell {
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: var(--p-r-card);
  padding: 0.85rem 1rem;
}

.rw-bcg-cell__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.rw-bcg-cell__head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ma-900);
}

.rw-bcg-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
}

.rw-bcg-cell--star { border-top: 3px solid var(--p-blue); }
.rw-bcg-cell--cash_cow { border-top: 3px solid var(--p-violet); }
.rw-bcg-cell--question_mark { border-top: 3px solid var(--p-cyan); }
.rw-bcg-cell--dog { border-top: 3px solid var(--p-dng); }

/* Quadranten-Kennzahlen (GMS-Summe + %-Anteil) + Aktions-Text. */
.rw-bcg-cell__metrics {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 0.4rem;
}

.rw-bcg-metric {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.rw-bcg-metric__value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ma-900);
  font-variant-numeric: tabular-nums;
}

.rw-bcg-metric__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ma-400);
  font-family: var(--font-display);
}

.rw-bcg-cell__action {
  margin: 0 0 0.6rem;
  padding: 0.3rem 0.55rem;
  background: var(--ma-50);
  border-left: 2px solid var(--ma-600);
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--ma-text);
}

.rw-bcg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.4;
}

.rw-bcg-list li {
  display: flex;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed var(--ma-border);
}

.rw-bcg-list li:last-child { border-bottom: none; }

.rw-bcg-asin {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  flex: 0 0 auto;
  color: var(--ma-400);
}

.rw-bcg-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-bcg-empty {
  color: var(--ma-400);
  font-style: italic;
}

@media (max-width: 640px) {
  .rw-kpis { grid-template-columns: repeat(2, 1fr); }
  .rw-kpi__value { font-size: 1.4rem; }
  .rw-bcg-grid { grid-template-columns: 1fr; }
}

/* Campaign-Detail: Bool-Badge für Halo-Ja/Nein. */
.rw-bool {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.rw-bool--yes { background: var(--c-moss); color: var(--c-paper-raised); }
.rw-bool--no { background: transparent; color: var(--ma-400); }

/* Buy-Box-Gewinner heute (competitor_light P3): eigen vs. opaker Fremd-Seller. */
.rw-bb-winner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.rw-bb-winner__who {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
}

.rw-bb-winner--own .rw-bb-winner__who { background: var(--c-moss); color: var(--c-paper-raised); }
.rw-bb-winner--rival .rw-bb-winner__who { background: var(--ma-pos-bg); color: var(--ma-600); }

.rw-bb-winner__ful {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--ma-border);
  border-radius: 0.25rem;
  font-size: 0.66rem;
  color: var(--ma-500);
}

/* ── Overarching Account-Level Section (above tabs) ── */
.rw-top-section {
  position: relative;
  margin: 1rem 0 1.3rem;
  /* Prism-Executive-Slab: dunkler Navy→Indigo→Violett-Gradient (das dunkle
     AI-Insight-Panel aus dem Referenzbild), in beiden Themes dunkel. */
  background: var(--p-ai-grad);
  border-radius: var(--p-r-panel);
  box-shadow: var(--p-sh-panel);
  overflow: hidden;
}
/* kontrollierter Glow — genau 1× im Produkt (Board-Regel) */
.rw-top-section::before {
  content: "";
  position: absolute;
  right: 6%;
  top: -40%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--p-bviolet) 28%, transparent), transparent 60%);
  pointer-events: none;
}
.rw-top-kpis {
  position: relative;
  display: flex;
  gap: 1.75rem;
  padding: 1.4rem 1.6rem;
}
/* „Was hier einfließt" (N3.2): Fußzeile des Kopf-Bands, nicht Teil der
   KPI-Flex-Reihe. ``position: relative`` wie ``.rw-top-kpis`` — der
   dekorative Glow (.rw-top-section::before) liegt sonst darüber. Die
   Schriftfarbe ist gedämpftes Weiß: die Zeile erklärt, sie behauptet nicht,
   und darf den KPI-Werten die Aufmerksamkeit nicht streitig machen. */
.rw-scope-line {
  position: relative;
  margin: 0;
  padding: 0 1.6rem 1.2rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.rw-top-kpi {
  flex: 1;
  text-align: left;
  padding: 0.25rem 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 1.25rem;
}
.rw-top-kpi:last-child { border-right: none; }
.rw-top-kpi__label {
  display: block;
  font-family: var(--ma-font);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c2c7f5;
  margin-bottom: 6px;
}
.rw-top-kpi__value {
  display: block;
  font-family: var(--ma-font);
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #ffffff;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.rw-top-kpi__hint {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #aab1e8;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

/* Gleicher Kanal im dunklen Kopf-Band: gedämpftes Indigo wie der Hint darüber
   (nicht Weiß, nicht Warn-Amber), die Strichelung trägt die Aussage (R23c). */
.rw-top-kpi__provisional {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: #aab1e8;
  margin-top: 4px;
  text-decoration: underline dashed;
  text-underline-offset: 2px;
}

/* Trend-Chart auf weißer Daten-Platte im dunklen Header: die Chart.js-Defaults
   sind für weißen Grund getunt (dunkle Linien, helles Grid) → auf dem Lila-Slab
   waren Spend/Sales-Linien unsichtbar. Weiße Platte stellt den Kontrast her. */
.rw-top-trend {
  position: relative;
  margin: 0 1.2rem 1.2rem;
  padding: 0.9rem 1.1rem 0.7rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 18px 40px -26px rgba(8, 11, 40, .55);
}
/* Der Canvas braucht denselben gekapselten, hoehen-begrenzten Wrapper wie jede
   andere Chart-Flaeche (.rw-chart__canvas-wrap, .rw-clb__canvas-wrap) — er ist
   nicht Kosmetik, sondern die Abbruchbedingung von Chart.js:
   ``maintainAspectRatio: false`` setzt die Canvas-Hoehe auf die Content-Hoehe
   des Eltern-Elements. Lag der Canvas direkt in ``.rw-top-trend``, war dessen
   Hoehe die Summe aus Canvas UND der Wertetabelle daneben (R17i), also bei
   jedem ResizeObserver-Tick um die Tabellenhoehe groesser als zuvor: Canvas
   waechst → Container waechst → Canvas waechst. Die alte CSS-Hoehe am Canvas
   half nicht, weil Chart.js sie mit einem Inline-Style ueberschreibt. Der
   Wrapper hat eine feste Hoehe und keine Geschwister, damit hat die Gleichung
   einen Fixpunkt. */
.rw-top-trend__canvas-wrap {
  position: relative;
  height: 200px;
  min-height: 200px;
}
/* Mehrzeilige Kopf-Karte (ASIN-Vergleich): dieselbe Zeilen-Struktur wie in den
   weissen Tab-KPIs, aber auf dem dunklen Kopf-Slab — Label/Wert brauchen
   helle Farben, sonst steht dunkles Slate auf Navy (Kontrast < 4.5:1). */
.rw-top-kpi .rw-kpi__rows { margin-top: 2px; }
.rw-top-kpi .rw-kpi__row { font-size: 0.85rem; }
.rw-top-kpi .rw-kpi__row-label {
  color: rgba(255, 255, 255, 0.86);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-top-kpi .rw-kpi__row-value { color: #fff; }
@media (max-width: 640px) {
  .rw-top-kpis { flex-wrap: wrap; gap: 1rem; }
  .rw-top-kpi { flex: 1 0 45%; border-right: none; }
}

/* .rw-text--danger — used in inline report content */
.rw-text--danger { color: var(--c-bordeaux); font-weight: 600; }

/* Quick Wins — used in actions components */
.rw-quickwins {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rw-quickwin {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.82rem;
  background: var(--c-bone);
}
.rw-quickwin--scale { border-left: 3px solid var(--c-moss); }
.rw-quickwin--optimize { border-left: 3px solid var(--ma-600); }
.rw-quickwin--reduce { border-left: 3px solid var(--ma-200); }
.rw-quickwin--negate { border-left: 3px solid var(--c-bordeaux); }

/* ── Cannibalization: Verdict Tiles ── */
.rw-verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* Primary tile (KANNIBAL) spans full width */
.rw-verdict-tile--primary {
  grid-column: 1 / -1;
}

.rw-verdict-tile {
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-border, var(--c-divider));
  border-radius: var(--p-r-card-sm);
  padding: 1.25rem;
  border-top: 5px solid var(--ma-600, var(--c-graphite));
  border-left: 3px solid transparent;
}

.rw-verdict-tile--kannibal {
  border-top-color: var(--ma-negative, var(--c-bordeaux));
  border-left-color: var(--ma-negative, var(--c-bordeaux));
  background: var(--ma-neg-bg, var(--c-bordeaux-wash));
}
.rw-verdict-tile--moeglich {
  border-top-color: var(--ma-400, var(--c-slate));
  border-left-color: var(--ma-400, var(--c-slate));
  background: var(--ma-warm-grey, var(--c-paper));
}
.rw-verdict-tile--co_movement {
  border-top-color: var(--ma-800, var(--c-ink));
  border-left-color: var(--ma-800, var(--c-ink));
  background: var(--ma-pos-bg, var(--c-accent-wash));
}

.rw-verdict-tile__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--ma-border, var(--c-divider));
}

.rw-verdict-tile__count {
  font-family: var(--ma-font);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ma-900, var(--c-ink));
}

.rw-verdict-tile--kannibal .rw-verdict-tile__count { color: var(--ma-negative, var(--c-bordeaux)); }
.rw-verdict-tile--moeglich .rw-verdict-tile__count { color: var(--ma-400, var(--c-slate)); }
.rw-verdict-tile--co_movement .rw-verdict-tile__count { color: var(--ma-900, var(--c-ink)); }

.rw-verdict-tile__label {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ma-text, var(--c-ink));
  font-family: var(--ma-font);
}

.rw-verdict-tile__hint {
  flex-basis: 100%;
  font-size: 0.78rem;
  color: var(--ma-400, var(--c-slate));
  font-family: var(--ma-font);
}
.rw-verdict-tile--kannibal .rw-verdict-tile__hint {
  color: var(--ma-neg-fg, var(--c-bordeaux));
  font-weight: 600;
}

.rw-verdict-tile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  font-family: var(--ma-font);
}

.rw-verdict-tile__pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--ma-border, var(--c-divider));
}

.rw-verdict-tile__pair:last-child { border-bottom: none; }

.rw-verdict-tile__asin {
  font-family: var(--ma-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ma-800, var(--c-ink));
  font-size: 0.75rem;
  letter-spacing: 0.01em;
}

.rw-verdict-tile__arrow {
  color: var(--ma-400, var(--c-slate));
  font-size: 0.8rem;
}

.rw-verdict-tile__severity {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ma-600, var(--c-graphite));
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: var(--ma-50, var(--c-bone));
}
.rw-verdict-tile--kannibal .rw-verdict-tile__severity {
  color: var(--ma-neg-fg, var(--c-bordeaux));
  background: var(--ma-neg-bg, var(--c-bordeaux-wash));
}
.rw-verdict-tile--co_movement .rw-verdict-tile__severity {
  color: var(--ma-900, var(--c-ink));
  background: var(--ma-pos-bg, var(--c-accent-wash));
}

.rw-verdict-tile__trend {
  font-size: 0.68rem;
  font-weight: 600;
  font-family: var(--ma-font);
}
.rw-verdict-tile__trend--up { color: var(--ma-negative, var(--c-bordeaux)); }
.rw-verdict-tile__trend--down { color: var(--c-moss); }
.rw-verdict-tile__trend--flat { color: var(--ma-400, var(--c-slate)); }

.rw-verdict-tile__impact {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ma-800, var(--c-ink));
  font-family: var(--ma-font);
}
.rw-verdict-tile--kannibal .rw-verdict-tile__impact { color: var(--ma-negative, var(--c-bordeaux)); }

.rw-verdict-tile__empty {
  color: var(--ma-400, var(--c-slate));
  font-style: italic;
  padding: 0.5rem 0;
}

@media (max-width: 640px) {
  .rw-verdict-grid { grid-template-columns: 1fr; }
  .rw-verdict-tile--primary { grid-column: auto; }
}

/* ── Verdikt-zuerst Assertion-Header (Bildsprache Welle 3, Prinzip 1) ──
   Ersetzt "Kategorie-Titel + Prosa" durch eine Aussage mit Zahl+Zeitraum.
   Additiv: rendert nur, wenn der Adapter viewmodel.verdict_text liefert
   (aktuell Kannibalisierung/Deals/Wiederkehrende Kunden). Kein lila Balken
   links — der Status sitzt in der Badge, nicht an einem Rand. Farben 1:1
   aus dem freigegebenen Mockup (mockup-welle-a.html .badge-*). */
.rw-verdict-header {
  margin: 0 0 1.25rem;
  /* Bugfix (Screenshot-Verify dieser PR): ``.pp-paperhead::before`` (Paper-
     Kopf-Hintergrund, sa-premium.css) reicht mit ``inset: -400px …`` weit
     über seine eigene Box hinaus und trägt ``z-index: 1`` — ohne eigenen
     Stacking-Context malt das den Verdikt-Header (der davor im DOM steht,
     z-index: auto) komplett zu. Eigener Stacking-Context + höherer Index
     hebt ihn sichtbar darüber. */
  position: relative;
  z-index: 2;
}
.rw-verdict-header__title {
  margin: 0 0 0.35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--ma-font);
  font-size: 1.3rem;
  line-height: 1.35;
  font-weight: 700;
  text-wrap: balance;
}
/* Sitzt (wie die Tab-Leiste, siehe .rw-tabs--on-dark) direkt auf dem dunklen
   Verlaufs-Grund, VOR dem weißen Paperhead — helle statt dunkle Schrift
   (var(--ma-900)/var(--p-tp) verschwindet sonst dunkel-auf-dunkel). Zwei
   Klassen statt einer, damit die Regel ``.p-main h2 { color: var(--p-tp) }``
   (sa-prism.css) nicht per höherer Spezifität gewinnt. Bugfix im Rahmen des
   Screenshot-Verify dieser PR; .rw-soft dreht es für den Soft-Body-Draft
   zurück auf dunkle Schrift. */
.rw-verdict-header .rw-verdict-header__title {
  color: rgba(255, 255, 255, 0.92);
}
.rw-verdict-header__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--ma-font);
  white-space: nowrap;
}
.rw-verdict-header__badge--crit {
  background: #FEE2E2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
}
.rw-verdict-header__badge--warn {
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FCD34D;
}
.rw-verdict-header__badge--ok {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}
.rw-verdict-header__range {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6); /* on-dark, wie .rw-verdict-header__title — s. Kommentar dort */
  font-family: var(--ma-font);
  letter-spacing: 0.01em;
}
/* Neutraler Hinweis-Badge (kein Urteil): z.B. "Noch zu wenig Historie". */
.rw-verdict-header__badge--info {
  background: #EFF6FF;
  color: #1E40AF;
  border: 1px solid #93C5FD;
}
/* Erwartungs-Untertitel im Paper-Kopf (ViewModel.subtitle) — direkt unter
   dem H1, damit z.B. Benchmark v0 nicht als Konkurrenzvergleich gelesen wird. */
.pp-paperhead .rw-head-subtitle {
  margin: 2px 0 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: #50567e;
}
.pp-paperhead .rw-foundation-line {
  margin: 0 0 8px;
  max-width: 78rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #59627a;
  font-variant-numeric: tabular-nums;
}
.pp-paperhead .rw-foundation-line a {
  color: #4f46a5;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rw-verdict-header__subtexts {
  margin: 0.4rem 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.45;
}
.rw-verdict-header__subtexts p { margin: 0.18rem 0; }

.rw-text-link {
  color: var(--ma-700, #4f46a5);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rw-text-link[aria-disabled="true"] {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  pointer-events: none;
}

.rw-measurement-basis {
  margin: 1.5rem 0 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ma-border, #d9dce8);
  border-radius: var(--p-r-card, 12px);
  background: var(--c-paper-raised, #fff);
}
.rw-measurement-basis summary {
  cursor: pointer;
  color: var(--ma-800, #303451);
  font-weight: 700;
}
.rw-measurement-basis__rows {
  display: grid;
  gap: 0.45rem;
  margin: 0.8rem 0 0;
}
.rw-measurement-basis__row {
  display: grid;
  grid-template-columns: minmax(11rem, 0.35fr) 1fr;
  gap: 1rem;
  line-height: 1.4;
}
.rw-measurement-basis__row dt { color: var(--ma-500, #64748b); }
.rw-measurement-basis__row dd {
  margin: 0;
  color: var(--ma-800, #303451);
  font-variant-numeric: tabular-nums;
}

/* ── Cannibalization: Actions Box ── */
.rw-actions-box {
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-border, var(--c-divider));
  border-left: 4px solid var(--ma-600, var(--c-graphite));
  border-radius: var(--p-r-card);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.rw-actions-box__title {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ma-600, var(--c-graphite));
  font-family: var(--ma-font);
}
.rw-actions-box__sub {
  margin: -0.5rem 0 0.75rem;
  font-size: 0.78rem;
  color: var(--ma-400, var(--c-slate));
  font-family: var(--ma-font);
}
.rw-actions-box__sub a {
  color: inherit;
  text-decoration: underline;
}
.rw-actions-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rw-actions-box__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 6px;
  background: var(--ma-warm-grey, var(--c-paper));
  font-size: 0.82rem;
  font-family: var(--ma-font);
  color: var(--ma-text, var(--c-ink));
  line-height: 1.4;
}
.rw-actions-box__item--high {
  border-left: 3px solid var(--ma-negative, var(--c-bordeaux));
  background: var(--ma-neg-bg, var(--c-bordeaux-wash));
}
.rw-actions-box__item--medium {
  border-left: 3px solid var(--ma-600, var(--c-graphite));
}
.rw-actions-box__item--low {
  border-left: 3px solid var(--ma-200, var(--c-ash));
}
.rw-actions-box__badge {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  margin-top: 0.1rem;
}
.rw-actions-box__item--high .rw-actions-box__badge {
  background: var(--ma-negative, var(--c-bordeaux));
  color: var(--c-paper-raised);
}
.rw-actions-box__item--medium .rw-actions-box__badge {
  background: var(--ma-600, var(--c-graphite));
  color: var(--c-paper-raised);
}
.rw-actions-box__item--low .rw-actions-box__badge {
  background: var(--ma-200, var(--c-ash));
  color: var(--c-paper-raised);
}

/* ── KI-Empfehlung: lila-akzentuierter Block unter den Dashboards ── */
.rw-ai-reco {
  margin-top: 1.75rem;
  padding: 1.5rem 1.5rem 1.25rem;
  border-radius: var(--p-r-panel, 18px);
  border: 1px solid var(--p-tint-border);
  background:
    radial-gradient(120% 140% at 0% 0%, var(--p-tint-10), transparent 60%),
    var(--c-paper-raised);
  box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--p-violet) 50%, transparent);
}
/* v5: ruhige Variante für den "keine Befunde"-Leer-Zustand auf der
   ASIN-Detail-Seite — kein Lila (weder Verlauf noch Rahmen/Balken), damit
   "stabil" nicht wie ein weiterer Handlungs-Impuls aussieht. */
.rw-ai-reco--stable {
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-100, var(--c-ash));
  box-shadow: none;
}
.rw-ai-reco__stable {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--c-teal, #0D9488);
}
.rw-ai-reco__head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.rw-ai-reco__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  color: #fff;
  background: var(--p-grad, linear-gradient(135deg, #6D28D9, #7C3AED));
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--p-violet) 70%, transparent);
}
.rw-ai-reco__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ma-text, var(--c-ink));
  font-family: var(--ma-font);
}
.rw-ai-reco__sub {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--ma-400, var(--c-slate));
  font-family: var(--ma-font);
}
.rw-ai-reco__badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  color: var(--p-violet, #7C3AED);
  background: var(--p-tint-16);
  border: 1px solid var(--p-tint-border);
}
.rw-ai-reco__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.rw-ai-reco__item {
  display: flex;
  flex-wrap: wrap; /* Closed-Loop: Button-Zeile bricht als volle Zeile unter die Karte */
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  background: var(--ma-warm-grey, var(--c-paper));
  font-family: var(--ma-font);
}
/* Impact-Stufe als führendes Pill: Wort-Label + Füllgrad (Hoch=gefüllt,
   Mittel=getönt, Niedrig=Outline) — unterscheidbar auch bei Farbsehschwäche /
   in Graustufen (löst die 3-Violett-Ton-Schwäche ab). Trägt das Tier-Signal. */
.rw-ai-reco__impact {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  margin-top: 0.15rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid var(--p-violet, #7C3AED);
  color: var(--p-cpurple, #6D28D9);
}
.rw-ai-reco__impact--hoch {
  background: var(--p-violet, #7C3AED);
  border-color: var(--p-violet, #7C3AED);
  color: #fff;
}
.rw-ai-reco__impact--mittel { background: var(--p-tint-16); }
.rw-ai-reco__impact--niedrig { background: transparent; }
/* Meta-Zeile (Lever-Chip + Konfidenz-Wort). Konfidenz-Wort (sicher/plausibel/
   vorläufig) ist bewusst ANDERS als die Impact-Wörter (Hoch/Mittel/Niedrig). */
.rw-ai-reco__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rw-ai-reco__lever {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-cpurple, #6D28D9);
  background: var(--p-tint-10);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
/* Herkunfts-Chip (ASIN-Detailseite): aus welcher Analyse stammt der Befund. */
.rw-ai-reco__source {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ma-400, var(--c-slate));
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
/* Quell-Badge MIT Vertrauensgrad (Karten-Vertrag v1.0 §2/§3.2, 19.08.2026).
   Bewusst dieselbe Bauart wie der Herkunfts-Chip darüber (R1: eine Chip-
   Sprache in der Meta-Zeile, keine zweite) — nur der Vertrauensgrad hängt als
   eigenes, dunkleres Wort daran, weil er die Aussage der Karte qualifiziert
   und nicht bloß ihre Adresse nennt. Kontrast R8: Text auf der 5-%-Schwarz-
   Fläche liegt bei --p-ink über 12:1, der Chip-Ton --ma-400 (#5F5B6B-Ebene)
   bei ~5,9:1 — beide über AA-4.5:1 für Text. */
.rw-ai-reco__origin {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ma-400, var(--c-slate));
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
.rw-ai-reco__origin-trust {
  font-style: normal;
  font-weight: 600;
  color: var(--ma-text, var(--c-ink));
}
/* Datenstand je Karte (§3.7). Leise wie die Datengrundlage-Zeile darüber:
   die Karte soll ihr Alter sagen, nicht damit werben. */
.rw-ai-reco__stand {
  display: block;
  font-size: 0.68rem;
  color: var(--ma-400, var(--c-slate));
  margin-top: 0.15rem;
}
/* Klickbare ASINs in Reco-Prosa/Chips/Listen → ASIN-Detailseite. Dezente
   dotted-Underline, erbt die Textfarbe — stört den Lesefluss nicht. */
.rw-asin-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.rw-asin-link:hover {
  color: var(--p-cpurple, #6d28d9);
  text-decoration-style: solid;
}
/* Welle 1.3: lesbarer Produktname hinter dem B0-Code — gedämpft, kleiner,
   damit der Seller in Produkten statt in Codes liest, ohne die Zeile zu fluten. */
.rw-asin-name {
  color: var(--c-graphite, #6b7280);
  font-weight: 500;
  font-size: 0.92em;
}
/* Epic ASIN-Erkennbarkeit (28.08.2026): Zelle mit MEHREREN ASINs.
   Die Token umbrechen als Gruppe, damit ein ASIN-Code nie von seinem
   Extern-Zeichen getrennt in die naechste Zeile rutscht. */
.rw-asins {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}
.rw-asins__item {
  display: inline-flex;
  gap: 0.25rem;
  align-items: baseline;
  white-space: nowrap;
}
/* Klasse statt :not(:last-child): die Alpine-Geschwister im Markup bleiben
   DOM-Knoten, weshalb der Struktur-Selektor auch beim letzten Token griffe
   und ein Trennzeichen ins Leere haengte. */
.rw-asins__item--trenner::after {
  content: "\00b7";
  color: var(--ma-400, #9ca3af);
}
/* Der Rest-Zaehler ersetzt die frueher stumme Zeichen-Kappung bei 200:
   "was nicht gezeigt wird, wird gezaehlt" statt einer abgeschnittenen ASIN. */
.rw-asins__rest {
  color: var(--c-graphite, #6b7280);
  font-size: 0.92em;
  font-style: italic;
}
/* Epic ASIN-Erkennbarkeit (27.08.2026): externer Absprung (Amazon).
   Bewusst ein eigenes Zeichen statt nur einer Farbe -- der Unterschied
   "bleibt im Produkt" vs. "verlaesst das Produkt" darf nicht allein ueber
   Farbe laufen. */
.rw-asin-extern {
  color: var(--ma-400, #9ca3af);
  font-size: 0.85em;
  margin-left: 0.15rem;
}
.rw-two-line__primary--link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.rw-two-line__primary--link:hover {
  color: var(--p-cpurple, #6d28d9);
  text-decoration-style: solid;
}

/* Ebenen-Chip: zeigt Granularitäts-Ebene der Empfehlung (Keyword/Kampagne/ASIN/…) */
.rw-ai-reco__level {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ma-400, var(--c-slate));
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
/* Aufwand-Chip (RS12): Minuten/Stunden/Projekt — neutraler Meta-Chip wie __level. */
.rw-ai-reco__effort {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ma-400, var(--c-slate));
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
/* RS14 Reconciler: Stale-Banner, Konflikt-Frage, Gesundheits-Gate. */
.rw-ai-reco__stale {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--c-amber, #b7791f);
  background: rgba(183, 121, 31, 0.08);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
  margin-bottom: 0.15rem;
}
.rw-ai-reco__conflict {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ma-600, var(--c-ink));
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  padding: 0.15rem 0.4rem;
}
.rw-ai-reco__gatenote {
  display: block;
  font-size: 0.75rem;
  color: var(--c-bordeaux, #b43e5c);
}
/* RS06: Ziel-Bid-Zeile (Rechner oder Leitplanke). */
.rw-ai-reco__target {
  display: block;
  font-size: 0.75rem;
  color: var(--ma-600, var(--c-ink));
}
/* RS06: "Wenn du nichts tust"-Projektion - Verlust-Framing, bewusst sichtbar. */
.rw-ai-reco__donothing {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-bordeaux, #b43e5c);
}
/* RS05.1: „Neu/geringe Basis"-Badge im BCG-Quadranten-Grid. */
.rw-bcg-lowbase {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--ma-400, var(--c-slate));
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}
/* Quick-Win-Chip (RS12): reversibel + Minuten + solide Datenlage. */
.rw-ai-reco__quickwin {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-teal, #0d9488);
  background: rgba(13, 148, 136, 0.1);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
}
/* Startpunkt-Zeile (RS12): „Zuerst: B0… (−73,5 %)". */
.rw-ai-reco__first {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ma-600, var(--c-ink));
  margin: 0.1rem 0;
}
/* ⚠ irreversibler Schritt (RS11): Marker am Satz bzw. am Wo-Beat (Fangnetz). */
.rw-ai-reco__irrev {
  color: var(--c-bordeaux, #b43e5c);
  font-weight: 600;
}
/* Wirkung-Prüf-Hinweis der Quick-Win-Lane (RS12). */
.rw-ai-reco__verify {
  color: var(--ma-400, var(--c-slate));
  font-size: 0.72rem;
}
/* Datengrundlage-Zeile (RS08): Karten-Fuß, bewusst leise. */
.rw-ai-reco__basis {
  display: block;
  font-size: 0.68rem;
  color: var(--ma-400, var(--c-slate));
  margin-top: 0.15rem;
}
/* Akut/Beobachten-Split (RS12): akute Evidence-Chips heben sich ab. */
.rw-ai-reco__chip--akut {
  border-color: var(--c-bordeaux, #b43e5c);
}
.rw-ai-reco__severity {
  font-style: normal;
  font-weight: 700;
  color: var(--c-bordeaux, #b43e5c);
}
/* Vertrauens-Signal (RS08): kalibrierte Sprache, nicht mehr uppercase —
   „Vorläufig — dünne Datenbasis" soll wie ein Satzfragment lesbar sein. */
.rw-ai-reco__conf {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ma-400, var(--c-slate));
}
/* Kontrast-Audit 2026-07-03: 0.6rem-Schrift braucht volle AA-4.5:1 auf Weiß —
 * Teal/Amber-Defaults lagen bei ~3.5:1, daher dunklere Stufen derselben Hues. */
.rw-ai-reco__conf--hoch { color: #0F766E; }
.rw-ai-reco__conf--mittel { color: #8C5A10; }
.rw-ai-reco__conf--niedrig { color: var(--c-bordeaux, #B43E5C); }
/* Class A/B-Slot (v3-A1): „Fix" = konkrete Aktion, „Diagnose" = ehrliche Daten-
   Aktion. Gleich kräftig (kein Downgrade), nur andere Farbe/Wort. */
.rw-ai-reco__slot {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.14rem 0.5rem;
  color: #fff;
}
.rw-ai-reco__slot--fix { background: var(--p-violet, #7C3AED); }
.rw-ai-reco__slot--diag { background: var(--p-teal, #0D9488); }
/* „Warum"-Zeile (Signal, gedämpft) — klar getrennt von der Aktion (Titel). */
.rw-ai-reco__why {
  font-size: 0.82rem;
  color: var(--ma-400, var(--c-slate));
}
/* Vorbedingungs-Guardrail (konditionale Trigger) — als Warnung hervorgehoben. */
.rw-ai-reco__pre {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  /* Risiko-Rot, aber AA-fest auf Weiß (Audit 2026-07-03: Token lief auf
   * #DC2626 ≈ 4.2:1 bei 0.74rem) */
  color: #B91C1C;
  background: rgba(180, 62, 92, 0.07);
  border-radius: 7px;
  padding: 0.25rem 0.45rem;
}
/* „Wo handeln" (recommend-only → Anleitung statt Button). */
.rw-ai-reco__where {
  margin-top: 0.1rem;
  font-size: 0.74rem;
  color: var(--ma-400, var(--c-slate));
}
.rw-ai-reco__where strong { color: var(--ma-text, var(--c-ink)); }
/* N15: interne Ziele („SellerAuto > …") sind klickbar — Unterstreichung
   signalisiert den CTA, Farbe bleibt im Karten-Duktus (kein Link-Blau). */
.rw-ai-reco__where-link { text-decoration: underline; text-underline-offset: 2px; }
.rw-ai-reco__where-link,
.rw-ai-reco__where-link strong { color: var(--ma-text, var(--c-ink)); }
.rw-ai-reco__where-link:hover strong { color: var(--c-ink, #1A1A2E); }
/* Datenlücken-Karte nutzt weiterhin das führende Tag (statt Impact-Pill). */
.rw-ai-reco__tag {
  flex-shrink: 0;
  min-width: 84px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--p-cpurple, #6D28D9);
  margin-top: 0.15rem;
}
.rw-ai-reco__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.45;
  /* Lesbarkeits-Cap: ohne liefen die Fließtexte ~190 Zeichen pro Zeile. */
  max-width: 90ch;
  color: var(--ma-text, var(--c-ink));
}
.rw-ai-reco__head-line {
  font-weight: 700;
  color: var(--ma-text, var(--c-ink));
}
.rw-ai-reco__trigger {
  margin-top: 0.15rem;
  font-size: 0.72rem;
  color: var(--ma-400, var(--c-slate));
  font-style: italic;
}
.rw-ai-reco__note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--ma-400, var(--c-slate));
  font-family: var(--ma-font);
}
/* ASIN-Vergleich S4: „Was auffällt" + offene Empfehlungen teilen sich den
   EINEN Handlungs-Block (Bauplan) — diese Zwischenüberschrift trennt beide
   Listen, ohne eine zweite Box aufzumachen. */
.rw-ai-reco__subhead {
  margin: 0 0 0.55rem;
  font-family: var(--ma-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ma-400, var(--c-slate));
}
/* Der „Offene Empfehlungen"-Block ist seit Pfad 6 eine eigene Hülle um
   Überschrift + Karten (die id ist zugleich der Bereichs-Selektor des
   Zähl-Wächters). Abstände hängen deshalb an der Hülle, nicht mehr an der
   entfallenen Link-Listen-Klasse. */
.rw-openreco-block > .rw-ai-reco__subhead {
  margin-top: 0;
}
.rw-findings + .rw-openreco-block,
.rw-openreco-block + .rw-ai-reco__list {
  margin-top: 1.2rem;
}
/* Severity als Wort-Badge (nicht nur Farbe): auch in Graustufen und bei
   Farbsehschwäche lesbar — dieselbe Regel wie bei den Impact-Pills. Kein
   Violett hier: der EINE satte Anker der Seite ist der Verdikt-Header. */
.rw-findings__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  margin-top: 0.15rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1.5px solid currentcolor;
}
.rw-findings__badge--neg { color: var(--c-bordeaux, #B43E5C); }
/* ``crit`` ist das Wort, mit dem das ViewModel den Fund benennt
   (verdict_level ok/warn/crit); ``neg`` ist die aeltere Schreibweise
   desselben Zustands aus dem ASIN-Vergleich. Beide zeigen denselben Ton,
   damit ein Fund nicht je nach Analyse eine andere Farbe traegt. */
.rw-findings__badge--crit { color: var(--c-bordeaux, #B43E5C); }
.rw-findings__badge--warn { color: #8C5A10; }
.rw-findings__badge--ok { color: #0F766E; }
/* Linke Kante als zweiter, farbunabhängiger Severity-Kanal. */
.rw-findings__item {
  border-left: 3px solid var(--ma-100, var(--c-ash));
}
.rw-findings__item--neg { border-left-color: var(--c-bordeaux, #B43E5C); }
.rw-findings__item--crit { border-left-color: var(--c-bordeaux, #B43E5C); }
.rw-findings__item--warn { border-left-color: #C08A2E; }
.rw-findings__item--ok { border-left-color: #0F766E; }
/* Die Liste selbst trägt seit Pfad 6 ``rw-ai-reco__list`` und rendert dieselbe
   Karte wie jede andere Fläche (Karten-Vertrag §1); eigene Listen-, Link- und
   Meta-Regeln gibt es hier deshalb nicht mehr. */
/* v2: €-Impact-Badge */
.rw-ai-reco__eur {
  align-self: flex-start;
  margin-top: 0.3rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--p-cpurple, #6D28D9);
  background: var(--p-tint-10);
  border: 1px solid var(--p-tint-border);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}
/* §3.5: kein messbarer Effekt heißt „–", nie „0 €". Die Zeile trägt deshalb
   NICHT die violette Wert-Pille — ein Betrags-Chip ohne Betrag liest sich wie
   eine unterdrückte Zahl. Nur Rahmen, gedämpfte Schrift. MUSS nach der
   Basisregel .rw-ai-reco__eur stehen: gleiche Spezifität, die spätere Regel
   gewinnt (Review-Fund 19.08.). */
.rw-ai-reco__eur--none {
  color: var(--ma-400, var(--c-slate));
  background: transparent;
  border-color: var(--ma-200, rgba(0, 0, 0, 0.12));
  font-weight: 600;
}
/* RS03: Effekt ≠ Scope — Betroffen-Kontext grau hinter der Effekt-Zahl */
.rw-ai-reco__scope {
  font-weight: 400;
  color: var(--ma-400, var(--c-slate));
}
/* v2: Evidenz-Chips (geerdete Zahlen) */
.rw-ai-reco__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.35rem;
}
.rw-ai-reco__chip {
  font-size: 0.68rem;
  color: var(--ma-text, var(--c-ink));
  background: var(--ma-warm-grey, var(--c-paper));
  border: 1px solid var(--p-tint-border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
  font-variant-numeric: tabular-nums;
}
/* v2: Datenlücken-Karte (Confidence-Gate hat unterdrückt) */
.rw-ai-reco__item--gap {
  background: var(--ma-warm-grey, var(--c-paper));
  opacity: 0.92;
}
.rw-ai-reco__tag--gap {
  color: var(--ma-400, var(--c-slate));
}
/* Closed-Loop (N01): Erledigt/Verwerfen/Später als kleine Ghost-Buttons unter
   der Karte — bewusst leise (Sekundär-Aktion), Premium-Look bleibt. */
.rw-ai-reco__actions {
  flex-basis: 100%;
  display: flex;
  gap: 0.4rem;
  margin-top: 0.1rem;
}
.rw-ai-reco__action {
  appearance: none;
  cursor: pointer;
  font-family: var(--ma-font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ma-400, var(--c-slate));
  background: transparent;
  border: 1px solid rgba(26, 26, 46, .16);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rw-ai-reco__action:hover {
  color: var(--ma-text, var(--c-ink));
  border-color: rgba(26, 26, 46, .34);
  background: rgba(26, 26, 46, .04);
}
.rw-ai-reco__action:focus-visible {
  outline: 2px solid var(--p-violet, #7C3AED);
  outline-offset: 2px;
}
/* Bestätigungszeile nach Feedback (ersetzt die Karte via HTMX) */
.rw-ai-reco__item--done {
  align-items: center;
  color: var(--ma-400, var(--c-slate));
}
.rw-ai-reco__done-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--c-teal, #0D9488);
  background: rgba(13, 148, 136, .12);
}
.rw-ai-reco__done-text {
  font-size: 0.82rem;
}
/* Rückweg des Status-Klicks (Detailseite): schlichter Text-Knopf am Zeilenende. */
.rw-ai-reco__undo {
  appearance: none;
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--ma-font);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ma-400, #64748B);
  text-decoration: underline dotted;
  text-underline-offset: 0.15em;
  cursor: pointer;
}
.rw-ai-reco__undo:hover { color: var(--p-violet, #7C3AED); }
.rw-ai-reco__undo:focus-visible { outline: 2px solid var(--p-violet, #7C3AED); outline-offset: 2px; }
.rw-ai-reco__undo:disabled { opacity: 0.5; cursor: progress; }

/* ── Cannibalization: Correlation Matrix (Web) ── */
.rw-matrix-section { margin-bottom: 2rem; }
.rw-matrix-hint {
  font-size: 0.82rem;
  color: var(--ma-400, var(--c-slate));
  margin-bottom: 0.75rem;
}
/* Achsenbeschriftung: der gemeinsame Namensanfang wird gedimmt, nicht
   weggelassen. Sonst steht auf der Achse eine Sorte ohne ihre Ware. */
.rw-matrix__label-dim {
  color: var(--ma-400, var(--c-slate));
  font-weight: 400;
}
.rw-matrix-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.rw-matrix-legend__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ma-600, var(--c-graphite));
}
.rw-matrix-legend__item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--ma-800, var(--c-ink));
}
.rw-matrix-swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}
.rw-matrix-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.rw-matrix {
  display: inline-grid;
  gap: 2px;
  font-family: var(--ma-font);
}
.rw-matrix__label {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--ma-800, var(--c-ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 4px;
  display: flex;
  align-items: center;
}
.rw-matrix__label--row {
  justify-content: flex-end;
  text-align: right;
  max-width: 110px;
}
.rw-matrix__label--col {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-content: flex-start;
  max-height: 90px;
}
.rw-matrix__cell {
  width: 38px;
  height: 38px;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.rw-matrix__cell:hover {
  transform: scale(1.25);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(26,26,46,0.3);
}
.rw-matrix__cell--selected {
  outline: 3px solid var(--ma-900, var(--c-ink));
  outline-offset: 1px;
  transform: scale(1.15);
  z-index: 11;
}
.rw-matrix__cell--diagonal {
  background: var(--ma-50, var(--c-bone)) !important;
  cursor: default;
  color: transparent;
}
.rw-matrix__cell--diagonal:hover { transform: none; box-shadow: none; }

/* Detail Panel — border-radius overridden to var(--p-r-card-sm) in Prism block below */
.rw-matrix-detail {
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-border, var(--c-divider));
  border-left: 4px solid var(--ma-600, var(--c-graphite));
  padding: 1.25rem;
  margin-top: 0.75rem;
}
.rw-matrix-detail__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.rw-matrix-detail__asin {
  font-family: var(--ma-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  /* JetBrains Mono ist nur 400–600 geladen — 700 würde synthetisch fetten. */
  font-weight: 600;
  color: var(--ma-900, var(--c-ink));
}
.rw-matrix-detail__arrow { color: var(--ma-400, var(--c-slate)); }
.rw-matrix-detail__badge {
  margin-left: auto;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.rw-matrix-detail__badge--kannibal { background: var(--ma-neg-bg, var(--c-bordeaux-wash)); color: var(--ma-neg-fg, var(--c-bordeaux)); }
.rw-matrix-detail__badge--moeglich { background: var(--ma-50, var(--c-bone)); color: var(--ma-400, var(--c-slate)); }
.rw-matrix-detail__badge--co_movement { background: var(--ma-pos-bg, var(--c-accent-wash)); color: var(--ma-900, var(--c-ink)); }
.rw-matrix-detail__badge--neutral { background: var(--ma-warm-grey, var(--c-paper)); color: var(--ma-400, var(--c-slate)); }
.rw-matrix-detail__names {
  font-size: 0.82rem;
  color: var(--ma-400, var(--c-slate));
  margin-bottom: 0.75rem;
}
.rw-matrix-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.rw-matrix-detail__metric {
  background: var(--ma-warm-grey, var(--c-paper));
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
}
.rw-matrix-detail__mlabel {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ma-400, var(--c-slate));
  margin-bottom: 0.15rem;
}
.rw-matrix-detail__mval {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ma-900, var(--c-ink));
}
.rw-matrix-detail__action {
  background: var(--ma-50, var(--c-bone));
  border-left: 3px solid var(--ma-600, var(--c-graphite));
  border-radius: 6px;
  padding: 0.6rem 0.85rem;
  font-size: 0.82rem;
  color: var(--ma-800, var(--c-ink));
  line-height: 1.4;
}

/* ── Pillar-Cards (Listing-SEO Pillar-Scores Tab, PR-D) ─────────────── */
.rw-pillar-grid {
  display: grid;
  /* Codex MAJOR: minmax(min(100%, 360px), 1fr) verhindert overflow auf
     320px-Viewports innerhalb padded Containern. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.25rem;
}

.rw-pillar-card {
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.rw-pillar-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--ma-border);
}

.rw-pillar-card__title {
  margin: 0;
  font-size: 1rem;
  color: var(--ma-900);
}

.rw-pillar-card__meta {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.rw-pillar-card__score {
  font-weight: 600;
  font-size: 0.95rem;
}

.rw-pillar-card__score--na {
  color: var(--ma-500, var(--c-ash));
  font-weight: 400;
}

.rw-pillar-card__status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ma-700, var(--c-graphite));
}

.rw-pillar-card__status--data_unavailable {
  background: rgba(220, 38, 38, 0.1);
  color: var(--c-bordeaux);
}

.rw-pillar-card__status--partial {
  background: var(--c-accent-wash);
  color: var(--c-accent-deep);
}

.rw-pillar-card__reason {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--ma-600, var(--c-slate));
}

.rw-pillar-card__empty {
  margin: 0;
  color: var(--ma-500, var(--c-ash));
  font-size: 0.85rem;
}

.rw-pillar-submetric-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rw-pillar-submetric {
  display: grid;
  /* Codex MINOR: minmax(0, 1fr) sicherstellt dass ellipsis funktioniert
     (sonst overflowed grid-item). */
  grid-template-columns: minmax(0, 1fr) auto 100px;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
}

.rw-pillar-submetric--data_unavailable {
  opacity: 0.6;
}

.rw-pillar-submetric__key {
  color: var(--ma-800, var(--c-ink));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.rw-pillar-submetric__points--na {
  color: var(--ma-500, var(--c-ash));
}

.rw-pillar-submetric__status {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ma-500, var(--c-ash));
}

.rw-pillar-submetric__points {
  color: var(--ma-700, var(--c-graphite));
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
}

.rw-pillar-submetric__bar {
  display: block;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
}

.rw-pillar-submetric__bar-fill {
  display: block;
  height: 100%;
  /* Codex MINOR: kein fixed background-size — gradient skaliert mit bar-width,
     so dass full-bar tatsächlich grün ist. */
  background: linear-gradient(90deg, var(--c-bordeaux) 0%, var(--c-moss) 100%);
  transition: width 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .rw-pillar-submetric__bar-fill { transition: none; }
}

/* ── PR-H Strikethrough-Pricing Block ───────────────────────────────── */

.rw-pricing-block {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.75rem 0;
  font-size: 1.1rem;
}

.rw-price-current {
  color: var(--ma-text);
  font-weight: 600;
}

.rw-price-strikethrough {
  color: var(--ma-400);
  text-decoration: line-through;
  font-size: 0.95rem;
}

.rw-price-savings {
  color: var(--ma-neg-fg);
  background: var(--ma-neg-bg);
  padding: 0.1rem 0.4rem;
  border-radius: var(--p-r-badge);
  font-weight: 600;
  font-size: 0.85rem;
}

/* ── PR-I Konkurrenten-Comparison-Cards ─────────────────────────────── */

.rw-comp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.rw-comp-card {
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: 0.5rem;
  padding: 1rem;
}

.rw-comp-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rw-comp-card__title {
  margin: 0;
  font-size: 1rem;
}

.rw-comp-card__asin {
  color: var(--ma-400);
  font-weight: 400;
  font-family: var(--ma-mono, ui-monospace, monospace);
  font-size: 0.85rem;
  margin-left: 0.5rem;
}

.rw-comp-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--ma-pos-bg);
  color: var(--ma-pos-fg);
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.4rem;
}

.rw-comp-card__title-text {
  color: var(--ma-600);
  font-size: 0.9rem;
  margin: 0.25rem 0 0.75rem;
}

.rw-comp-diff-grid {
  width: 100%;
  font-size: 0.9rem;
  border-collapse: collapse;
}

.rw-comp-diff-grid th {
  text-align: left;
  color: var(--p-violet);
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  border-bottom: 1px solid var(--ma-border);
}

.rw-comp-diff-grid td {
  padding: 0.3rem 0.5rem;
}

/* Delta-Spalte der Vergleichstabelle: Zahlen untereinander, R22a-2. */
.rw-comp-diff-delta { font-variant-numeric: tabular-nums; }

.rw-comp-diff-row--green .rw-comp-diff-delta,
.rw-comp-diff-row--green .rw-comp-diff-status {
  color: var(--c-moss);
  font-weight: 600;
}

.rw-comp-diff-row--amber .rw-comp-diff-delta,
.rw-comp-diff-row--amber .rw-comp-diff-status {
  color: var(--c-accent-deep);
  font-weight: 600;
}

.rw-comp-diff-row--red .rw-comp-diff-delta,
.rw-comp-diff-row--red .rw-comp-diff-status {
  color: var(--ma-neg-fg);
  font-weight: 600;
}

.rw-comp-diff-row--neutral .rw-comp-diff-delta,
.rw-comp-diff-row--neutral .rw-comp-diff-status {
  color: var(--ma-400);
  font-style: italic;
}

/* Task 7: Ads-Fenster-Fußnote unter der ASIN-Pivot-Tabelle — erklärt "—"
   Zellen ausserhalb des ~93-Tage Ads-API-Retention-Fensters. */
.rw-table-footnote {
  margin: 0.3rem 0 0.75rem;
  font-size: 0.72rem;
  color: var(--ma-400, var(--c-slate));
  font-family: var(--ma-font);
}

/* PR-J2: Score-Diff Grid + Overall-Badge */
.rw-comp-grid-caption {
  text-align: left;
  caption-side: top;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ma-400);
  padding: 0.4rem 0.5rem 0.2rem;
}

.rw-comp-score-grid {
  margin-bottom: 0.5rem;
}

.rw-comp-overall {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
}

.rw-comp-overall__label {
  color: var(--ma-400);
  font-weight: 500;
}

.rw-comp-overall__vals {
  font-weight: 600;
}

.rw-comp-badge--warn {
  background: var(--ma-50);
  color: var(--c-accent-deep);
  border: 1px solid var(--c-accent-deep);
}

.rw-comp-badge--bs {
  background: var(--p-warn-bg);
  color: #B5730A;
}

.rw-comp-badge--ac {
  background: var(--p-ok-bg);
  color: #15803D;
}

.rw-comp-card__features {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.rw-comp-feature {
  font-size: 0.78rem;
  padding: 0.15rem 0.4rem;
  border-radius: var(--p-r-badge);
  background: var(--ma-50);
  color: var(--ma-text);
}

.rw-comp-feature--win {
  background: var(--ma-pos-bg);
  color: var(--ma-pos-fg);
}

.rw-comp-feature--lose {
  background: var(--ma-neg-bg);
  color: var(--ma-neg-fg);
}

/* ── PR-U1 Keyword-Gap Coverage-Tier-Cluster ────────────────────────── */

.rw-kwgap-clusters {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.rw-kwgap-tier {
  border: 1px solid var(--ma-border);
  border-radius: var(--p-r-card);
  padding: 0.75rem 1rem;
}

.rw-kwgap-tier--red { border-left: 4px solid var(--ma-neg-fg); }
.rw-kwgap-tier--amber { border-left: 4px solid var(--c-accent-deep); }
.rw-kwgap-tier--grey { border-left: 4px solid var(--ma-400); }

.rw-kwgap-tier__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.rw-kwgap-tier__label { margin: 0; font-size: 0.95rem; }
.rw-kwgap-tier__count { color: var(--ma-400); font-size: 0.85rem; font-weight: 600; }
.rw-kwgap-tier__hint { color: var(--ma-600); font-size: 0.8rem; }

.rw-kwgap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rw-kwgap-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background: var(--ma-50);
  color: var(--ma-text);
  padding: 0.2rem 0.5rem;
  border-radius: var(--p-r-badge);
  font-size: 0.85rem;
  /* Codex NIT: lange Keywords nicht überlaufen lassen */
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rw-kwgap-chip__meta { color: var(--ma-400); font-size: 0.72rem; }
.rw-kwgap-tier--red .rw-kwgap-chip { background: var(--ma-neg-bg); }

/* ── Produkt-Zelle (Thumbnail + Name + ASIN) ─────────────────────────── */
/* Ersetzt nackte ASIN-Codes in Top-100-Tabellen: Bild + Produktname (primär)
   + ASIN (sekundär/muted). Graceful Fallback ohne Bild/Name. */
.rw-td--product {
  /* Produkt-Spalte darf etwas breiter sein, Name kappt via ellipsis. */
  max-width: 340px;
}
.rw-product {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.rw-product--link { cursor: pointer; }
.rw-product--link:hover .rw-product__name {
  color: var(--ma-900);
  text-decoration: underline;
}
.rw-product__thumb {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--ma-50);
  border: 1px solid var(--ma-border);
}
.rw-product__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.rw-product__name {
  font-weight: 600;
  color: var(--ma-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-product__asin {
  font-family: var(--ma-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  color: var(--ma-400);
  letter-spacing: 0.02em;
}
.rw-product__prefix {
  color: var(--p-tm);
  font-weight: 400;
}
.rw-product__rest {
  color: var(--p-tp);
  font-weight: 600;
}

/* BSR „nicht erhoben": gedämpft + kursiv, damit es nicht wie ein echter
   (Top-)Rang gelesen wird. */
.rw-muted {
  color: var(--ma-400);
  font-style: italic;
  font-size: 0.8rem;
}

/* ── Loaded-ASINs-Indikator (nahe Header) ────────────────────────────── */
.rw-asin-loaded {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  color: var(--ma-400);
}
.rw-asin-loaded__toggle {
  background: transparent;
  border: 1px solid var(--ma-border);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  font-family: var(--ma-font);
  font-size: 0.78rem;
  color: var(--ma-600);
  cursor: pointer;
}
.rw-asin-loaded__toggle:hover { background: var(--ma-50); }
.rw-asin-loaded__count { font-weight: 700; color: var(--ma-800); }
.rw-asin-loaded__list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.85rem;
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: 8px;
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.2rem 1rem;
  font-size: 0.8rem;
}
.rw-asin-loaded__item {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  overflow: hidden;
}
.rw-asin-loaded__item-asin {
  font-family: var(--ma-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  color: var(--ma-400);
  flex: 0 0 auto;
}
.rw-asin-loaded__item-name {
  color: var(--ma-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Chart Empty-State (z.B. CVR-Daten nicht verfügbar) ──────────────── */
.rw-chart__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background: var(--p-surf);
  border: 1px dashed var(--p-bd); /* gestrichelt = intentionaler Platzhalter */
  border-radius: var(--p-r-card-sm);
}
.rw-chart__empty-ico {
  width: 54px;
  height: 54px;
  padding: 14px;
  box-sizing: border-box;
  stroke: var(--p-violet, #7C3AED);
  fill: none;
  stroke-width: 1.7;
  background: var(--p-tint-10);
  border-radius: 50%;
  margin-bottom: 0.15rem;
}
.rw-chart__empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--p-tp);
}
.rw-chart__empty-sub {
  margin: 0;
  font-size: 0.78rem;
  color: var(--p-tm);
  max-width: 32ch;
}

/* ── Prism: Labels in Geist, getrackte Mini-Caps ── */
.rw-kpi__label,
.rw-bcg-metric__label,
.rw-top-kpi__label,
.rw-insights-metric__label,
.rw-verdict-tile__label,
.rw-matrix-legend__label,
.rw-comp-overall__label {
  font-family: var(--ma-font);
  letter-spacing: 0.06em;
}

/* .rw-kpi__value/.rw-top-kpi__value font properties are already set in the base
   rules at lines 139–148 and 600–609 — no duplication needed here. */
.rw-td--number { font-family: var(--ma-font); font-variant-numeric: tabular-nums; }

/* Primär-KPI je Liste = Hero-Metrik ODER Identifier (ASIN-Code etc.); sie
   unterscheiden sich NUR in der Wert-Schriftgröße. Markierung kommt aus dem
   Template (.rw-kpi--hero default = erste Karte; .rw-kpi--ident explizit im
   Adapter) — kein :first-child-Selektor mehr. Hintergrund/Border/Label-Farben
   sind bereits Default auf .rw-kpi. SINGLE SOURCE für die font-size: sa-premium.css.
   Konsolidiert (Design v2 B3): der frühere blaue border-top war tot (vom
   border-Shorthand der P2-Wash-Regel .rw-kpi--hero/--ident überschrieben) →
   entfernt; der Schatten war eine Kopie des .rw-kpi-Karten-Defaults. Violette
   Fläche/Border liefert dieselbe P2-Wash-Regel (Block „P2 · Führender KPI"). */
.rw-kpis .rw-kpi--hero .rw-kpi__value { line-height: 1; }

/* Identifier-KPI (z.B. ASIN-Code): lesbar-kompakt, damit lange Codes nie aus
   der Karte ragen. Wert-Größe siehe sa-premium.css. */
.rw-kpis .rw-kpi--ident .rw-kpi__value {
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: normal;
}

/* ====================== PRISM-NORMALISIERUNG ======================
   EIN Schema für JEDE rw-Komponente über ALLE Analyse-Typen & Sub-Tabs:
   scharfe Borders, Prism-Radien (14/12/10/8), kein Pastell, KEINE Pills.
   Lädt zuletzt → gewinnt gegen die alten Midnight-Werte oben. */
/* Container-Cards → 14px, scharfer Border, weiß + Schatten */
.rw-insights-card, .rw-actions-box, .rw-pillar-card, .rw-comp-card,
.rw-asin-loaded__list, .rw-chart__empty {
  border-radius: var(--p-r-card); border: 1px solid var(--p-bd);
  background: var(--p-card); box-shadow: var(--p-sh-card);
}
.rw-comp-badge { border-radius: var(--p-r-badge); }

/* Exec-Slab ultra-realistisch: Grain gegen Banding + beleuchtete Tiefe (Mesh kommt aus --p-ai-grad) */
.rw-top-section { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--p-sh-panel); }
.rw-top-section::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rw-bcg-cell { border-radius: var(--p-r-card); border: 1px solid var(--p-bd); background: var(--p-card); box-shadow: var(--p-sh-card); }
/* Sub-Cards → 12px */
.rw-verdict-tile, .rw-matrix-detail {
  border-radius: var(--p-r-card-sm); border: 1px solid var(--p-bd);
}
/* Re-assert verdict-tile top/left accent widths (reset by the shorthand border above) */
.rw-verdict-tile { border-top-width: 5px; border-left-width: 3px; }
/* Soft-Inner → 10px, Prism-Surface */
.rw-banner, .rw-quickwin, .rw-actions-box__item,
.rw-matrix-detail__metric, .rw-matrix-detail__action, .rw-dropdown__item {
  border-radius: var(--p-r-ico);
}
.rw-quickwin { background: var(--p-surf); }
.rw-dropdown__menu { border-radius: var(--p-r-card-sm); border: 1px solid var(--p-bd); box-shadow: var(--p-sh-card); }
/* Status-Chips: keine Pills → scharfe Badge-Radien */
.rw-abc, .rw-score, .rw-bcg, .rw-bool, .rw-matrix-detail__badge { border-radius: var(--p-r-badge); }
.rw-filter, .rw-asin-loaded__toggle { border-radius: var(--p-r-btn); }
/* Card-/Section-Titel in Geist (kein Inter, PRODUCT.md-Regel) */
.rw-insights-card__title, .rw-actions-box__title, .rw-verdict-tile__title,
.rw-pillar-card__title, .rw-comp-card__title, .rw-matrix-detail__title,
.rw-chart__title, .rw-section-title {
  font-family: var(--ma-font); letter-spacing: -.01em;
}

/* ====================== PRISM MODAL UPGRADE (Report-erstellen-Dialog) ======================
   Macht den "Neuen <Report> starten"-Dialog Prism-sharp & perfekt bündig.
   Belebt die tote .sa-input-Klasse (einheitliche Feldhöhe über ALLE Typen inkl. number →
   behebt den type=number-Höhenbruch), definiert die Label-Achse, Gradient-CTA, Hairline-Body,
   Blau-Focus-Ring. Steht am Dateiende → gewinnt die Cascade gegen die früheren .rw-modal*-Regeln. */
.rw-modal {
  background: rgba(5, 8, 22, .55);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
}
.rw-modal__body {
  border-radius: var(--p-r-card-sm);
  border: 1px solid var(--p-bd);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--p-sh-panel);
  transition: transform 220ms cubic-bezier(.23, 1, .32, 1), opacity 220ms ease-out;
}
.rw-modal__head { padding: 1.1rem 1.25rem; border-bottom-color: var(--p-div); }
.rw-modal__head h2 {
  margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--c-ink);
}
.rw-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; margin: -4px -6px -4px 0; padding: 0;
  border-radius: var(--p-r-ico); font-size: 1.3rem; line-height: 1;
  color: var(--ma-400); background: transparent; border: none; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.rw-modal__close:hover { background: var(--p-surf); color: var(--ma-800); }
.rw-modal__close:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }
.rw-modal__form { gap: 1rem; padding: 1.25rem; }
.rw-modal__hint {
  margin: 0; padding: .6rem .75rem; background: var(--p-surf);
  border-radius: var(--p-r-ico); color: var(--ma-600); font-size: .78rem; line-height: 1.4;
}
.rw-modal__actions { margin: 0; padding-top: 1rem; border-top: 1px solid var(--p-div); }
.rw-modal__actions .sa-btn { height: 2.6rem; }
.rw-modal__form .sa-form__field { display: grid; gap: .375rem; }
.rw-modal__form .sa-form__field > span {
  font-family: var(--ma-font); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--p-tm);
}
/* Base .sa-input — standalone use (reports/list.html and beyond) */
.sa-input {
  display: block; width: 100%; box-sizing: border-box; height: 2.6rem; padding: 0 .8rem;
  font: inherit; font-family: var(--ma-font); color: var(--c-ink);
  background: var(--c-paper-raised); border: 1px solid var(--c-divider);
  border-radius: var(--p-r-input); outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
/* .sa-form__field label grid (used standalone too) */
.sa-form__field { display: grid; gap: .375rem; }
/* Welle 1.4: Hinweis statt Eingabefeld, wenn keine Credential verbunden ist */
.sa-form__hint { font-size: .85rem; color: var(--c-graphite, #6b7280); line-height: 1.4; }
.sa-form__hint a { color: var(--p-cpurple, #6D28D9); font-weight: 600; }
/* Credentials-Formular: ruhige, lesbar schmale Karte (App-Tokens, .p-panel) */
.cred-form-card { max-width: 760px; }
.cred-form-card .sa-form { max-width: none; }
.cred-form-card .sa-alert { margin-bottom: 1.1rem; }
/* Modal-specific overrides */
.rw-modal__form textarea.sa-input { height: auto; min-height: 5rem; padding: .6rem .8rem; resize: vertical; }
.rw-modal__form select.sa-input { appearance: none; }
.rw-modal__form input[type="number"].sa-input { appearance: textfield; }
.rw-modal__form .sa-input:focus { border-color: var(--p-focus); box-shadow: 0 0 0 3px var(--p-tint-16); }
.sa-input:focus { border-color: var(--p-focus); box-shadow: 0 0 0 3px var(--p-tint-16); }
.rw-modal__actions .sa-btn--primary {
  background: var(--p-grad-violet); border: none; color: #fff;
  border-radius: var(--p-r-btn); box-shadow: var(--p-sh-cta);
  transition: filter 140ms ease, transform 140ms ease;
}
.rw-modal__actions .sa-btn--primary:hover { filter: brightness(1.05); }
.rw-modal__actions .sa-btn--primary:active { transform: scale(.97); }
.rw-modal__actions .sa-btn--primary:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .rw-modal__body { transition: opacity 150ms ease; transform: none; }
}

/* KPI-Werte nie umbrechen → "258.756 €" bleibt auf einer Zeile (kein verwaister € im Slab) */
.rw-kpi__value, .rw-top-kpi__value { white-space: nowrap; }

/* „+ Neuer Report"-Trigger: war dunkel-auf-dunkel (Text unsichtbar) → Violett + weiß, lesbar */
.rw-actions .sa-btn--primary {
  background: var(--p-grad-violet); border: none; color: #fff;
  border-radius: var(--p-r-btn); box-shadow: var(--p-sh-cta);
  transition: filter 140ms ease, transform 140ms ease;
}
.rw-actions .sa-btn--primary:hover { filter: brightness(1.05); }
.rw-actions .sa-btn--primary:active { transform: scale(.97); }
.rw-actions .sa-btn--primary:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; }

/* ── Focus-visible catch-all for interactive Report controls ── */
.rw-tabs__btn:focus-visible,
.rw-filter:focus-visible,
.rw-expand__button:focus-visible,
.rw-th.is-sortable:focus-visible,
.rw-dropdown__item:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}

/* ====================== PREMIUM-DESIGN 2026-06 FINAL-OVERRIDES ======================
   TOTER FALLBACK: dieser Block gewinnt NICHT mehr — die später ladende WELLE-3-
   Glassy-Light-Ebene überschreibt Radius UND Schatten aller hier gelisteten Karten
   via --w3-glass-radius (16) / --w3-glass-sh. Diese Regeln greifen nur, falls die
   Glass-Ebene je entfernt wird.
   BCG/Verdict/Pillar/Actions auf pp-card-Optik. Design v2 B3: Radius als konsistenter
   Fallback auf 16 vereinheitlicht (Prism-Norm „card 16"; alle Selektoren sind Karten/
   Kacheln in Grids, keine Shell — die Verdict-Bühne lebt in _verdict_header.html).
   Die Schatten-Alphas (.18/.25) sind Legacy-Fallback-Werte, bewusst NICHT angeglichen —
   der kanonische Karten-Schatten ist --w3-glass-sh, nicht diese. */

/* BCG-Zellen: weiße Premium-Card */
.rw-bcg-cell {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .18);
}

/* Pillar-Cards: Premium-Card mit Hover-State */
.rw-pillar-card {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .25);
  transition: box-shadow 200ms var(--ease-out, cubic-bezier(.23,1,.32,1));
}
@media (hover: hover) and (pointer: fine) {
  .rw-pillar-card:hover {
    box-shadow: 0 24px 50px -24px rgba(30, 43, 120, .35);
  }
}

/* Verdict-Tiles: weiße Card (Risiko-Tile = leichter Rot-Wash) */
.rw-verdict-tile {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .18);
}
/* Re-assert accent-borders nach border-shorthand */
.rw-verdict-tile { border-top-width: 5px; border-left-width: 3px; }
.rw-verdict-tile--kannibal {
  background: var(--p-dng-bg, #FEE2E2);
  border-color: rgba(220, 38, 38, .2);
  box-shadow: none;
}
.rw-verdict-tile--co_movement {
  background: var(--p-surf, #EEF3FA);
}

/* Actions-Box: ruhige Outline-Karte (lila linker Akzent bleibt) */
.rw-actions-box {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .18);
}

/* Comp-Cards (Listing-SEO Konkurrenz): Premium-Card */
.rw-comp-card {
  background: #fff;
  border: 1px solid rgba(22, 25, 58, .09);
  border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgba(30, 43, 120, .18);
}

/* rw-kpi: Re-assert Card-Chrome-Radius 16 (gegen Normalisierungsblock, Design v2 B3) */
.rw-kpi {
  border-radius: 16px;
}

/* ── Monats-Range-Selektor (ASIN-Detail) ──
   Segmentierte Pillen über dem Chart-Grid. Aktiv = kanonisches Violett +
   weiß; inaktiv = Outline. Reuse der rw-filter-Tokens (radius/font). */
.rw-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}

/* Zeitraum-Control im Header (jede Analyse): Presets + Custom, Neuberechnung */
.rw-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
}
.rw-period__label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--p-tm);
}
.rw-period__group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.rw-period__btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(22, 25, 58, .18);
  background: #fff;
  color: var(--p-tp);
  cursor: pointer;
}
.rw-period__btn.is-active {
  background: var(--p-grad-violet, #4326A0);
  border-color: transparent;
  color: #fff;
}
.rw-period__input {
  font: inherit;
  font-size: 0.78rem;
  width: 78px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(22, 25, 58, .18);
}
.rw-period__hint {
  font-size: 0.72rem;
  color: var(--p-tm);
  font-style: italic;
}

/* Einheitliche Filter-Leiste (Granularität x Zeitfenster x Marktplatz) */
.rw-filterbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  margin: 0.6rem 0 0;
}
.rw-fb__group {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}
.rw-fb__custom {
  gap: 0.25rem;
}
.rw-fb__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--p-tm);
  margin-right: 0.1rem;
}
.rw-fb__btn {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid rgba(22, 25, 58, .18);
  background: #fff;
  color: var(--p-tp);
  cursor: pointer;
}
.rw-fb__btn:hover {
  border-color: var(--p-grad-violet, #4326A0);
}
.rw-fb__btn.is-active {
  background: var(--p-grad-violet, #4326A0);
  border-color: transparent;
  color: #fff;
}
.rw-fb__date {
  font: inherit;
  font-size: 0.76rem;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(22, 25, 58, .18);
}
.rw-fb__dash {
  color: var(--p-tm);
}
.rw-fb__select {
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(22, 25, 58, .18);
  background: #fff;
  color: var(--p-tp);
  cursor: pointer;
}

/* Marktplatz-Selektor im Header (Dropdown zwischen Report-Instanzen) */
.rw-mp-select {
  font: inherit;
  font-weight: 700;
  color: var(--p-tp, #16193a);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 1px 6px;
  cursor: pointer;
}
.rw-range__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ma-700, #475569);
  margin-right: 0.25rem;
}
.rw-range__btn {
  background: #fff;
  border: 1px solid var(--ma-border, #D4D4E8);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ma-700, #475569);
  cursor: pointer;
  font-family: var(--ma-font);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.rw-range__btn:hover {
  border-color: var(--p-violet, #7C3AED);
  color: var(--p-violet, #7C3AED);
}
.rw-range__btn.is-active {
  background: var(--p-grad-violet);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--p-sh-cta);
}
.rw-range__btn:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rw-range__btn { transition: none; }
}

/* ===================================================================== *
 * Repeat-Customer & Cross-Sell — sa-prism Panels                        *
 * GUARDRAILS: beobachtetes € = historisch (nicht inkrementell);         *
 * Cross-Sell = Ranked Bars (own=indigo / competitor=grau, kein Sankey); *
 * Posture-Karten = Ampel + Rationale OHNE €.                            *
 * ===================================================================== */

/* Der Sekundär-Strip (beobachtetes €) ist mit N2 entfallen — die Zahl steht im
   Kopf-Band, der Strip war ihre wortgleiche Kopie. Regeln entfernt statt
   verwaist stehen gelassen. */

/* Neu-vs-Wiederkehrend-Tabelle. */
.rw-rc-nvr { margin-bottom: 1.5rem; }
.rw-rc-nvr__title { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--p-ink, #1E293B); }
.rw-rc-nvr__table { width: 100%; border-collapse: collapse; }
.rw-rc-nvr__table th,
.rw-rc-nvr__table td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--p-bd);
  font-size: 0.85rem;
}
.rw-rc-nvr__table th { color: var(--p-ts, #475569); font-weight: 600; }
.rw-rc-nvr__empty { color: var(--p-ts, #64748B); font-style: italic; }
.rw-rc-nvr__num { text-align: right; font-variant-numeric: tabular-nums; }
.rw-rc-nvr__barcell { width: 46%; }
.rw-rc-nvr__bar {
  display: flex; height: 18px; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--p-div, #E3EAF5); background: var(--p-surf, #EEF3FA);
}
.rw-rc-nvr__ret { background: var(--p-ch-1, #4338CA); }
.rw-rc-nvr__new { background: var(--p-surf, #E2E8F0); border-left: 1px solid rgba(26, 26, 46, 0.12); }

/* SSR-Sparkline für den Repeat-Rate-Trend (kein JS nötig). */
.rw-rc-trend { margin-bottom: 1.5rem; }
.rw-rc-trend__title { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--p-ink, #1E293B); }
.rw-rc-trend__plot {
  background: var(--p-card, #fff); border: 1px solid var(--p-div, #E3EAF5);
  border-radius: 12px; padding: 0.85rem 1rem 0.6rem;
}
.rw-rc-trend__svg { display: block; width: 100%; height: 130px; }
.rw-rc-trend__labels {
  display: flex; justify-content: space-between; list-style: none;
  margin: 0.3rem 0 0; padding: 0; font-size: 0.72rem; color: var(--p-tm, #64748B);
}
.rw-rc-trend__legend {
  display: flex; align-items: center; gap: 1.1rem; margin-top: 0.5rem;
  font-size: 0.78rem; color: var(--p-ts, #475569); font-weight: 600;
}
.rw-rc-trend__legend i {
  display: inline-block; width: 14px; height: 4px; border-radius: 2px;
  margin-right: 0.4rem; vertical-align: middle;
}
.rw-rc-trend__legend small { color: var(--p-tm, #64748B); font-weight: 500; margin-left: auto; }

/* Lauter Empty-State (erfolgreicher Lauf, aber keine/suppressed BA-Daten). */
.rw-rc-empty {
  display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem; border-radius: 12px;
  background: var(--p-warn-bg, #FEF3C7); border: 1px solid var(--p-warn, #F59E0B);
}
.rw-rc-empty__ico {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  fill: none; stroke: var(--p-warn, #B45309); stroke-width: 2; stroke-linecap: round;
}
.rw-rc-empty__text { margin: 0; font-size: 0.85rem; line-height: 1.45; color: #7C5300; }

/* SSR-Ranked-Bars: Repeat-Anteil je ASIN (kein JS). */
.rw-rc-ranked { margin-bottom: 1.5rem; }
.rw-rc-ranked__title { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--p-ink, #1E293B); }
.rw-rc-ranked__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0; }
.rw-rc-ranked__label { width: 230px; flex: none; font-size: 0.8rem; line-height: 1.2; }
.rw-rc-ranked__label strong { color: var(--p-ink, #1E293B); }
.rw-rc-ranked__label small { display: block; color: var(--p-tm, #64748B); font-size: 0.72rem; }
.rw-rc-ranked__track {
  flex: 1; height: 14px; background: var(--p-surf, #EEF3FA);
  border-radius: 6px; overflow: hidden;
}
.rw-rc-ranked__track span { display: block; height: 100%; background: var(--p-ch-1, #4338CA); border-radius: 6px; }
.rw-rc-ranked__val { width: 138px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.85rem; }
.rw-rc-ranked__compare {
  margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--p-ts, #64748B);
}
/* „Naechster Schritt": EINE Handlungs-Bruecke am Bild, kein zweiter
   Handlungs-Block (B5). Deshalb bewusst eine ruhige Zeile in der
   Stuetz-Ebene (R15b, violet-50) statt einer Karte mit eigenem Chrome, und
   ohne Links-Balken (R5/R15e). */
.rw-rc-nextstep {
  margin: 0.75rem 0 0; padding: 0.6rem 0.85rem;
  border: 1px solid var(--p-surf-violet-bd); border-radius: var(--p-r-card);
  background: var(--p-surf-violet);
  font-size: 0.85rem; line-height: 1.5; color: var(--p-ink, #1E293B);
}
.rw-rc-nextstep__basis {
  display: block; margin-top: 0.25rem;
  font-size: 0.72rem; color: var(--p-ts, #64748B);
}

/* Richtungs-Chip (Pfeil + Delta) neben einer Kennzahl. Bauart und Begruendung
   wie im Dashboard-Ranking-Raster: die Richtung traegt das Pfeilzeichen plus
   der Vorlesetext, NIE die Farbe allein (R8). Der Chip ist deshalb im
   Normalfall neutral und faerbt nur RISIKO, nicht Richtung (R19d haelt die
   Ampelfarben fuer Status und Frische frei) — ein gruener Aufwaerts-Chip waere
   eine Statusaussage, die diese Zahl nicht treffen kann. */
.rw-trendchip {
  display: inline-flex; align-items: baseline; gap: 0.2rem;
  margin-left: 0.4rem; padding: 0.05rem 0.35rem;
  border: 1px solid var(--p-bd); border-radius: 999px;
  background: var(--p-bg-soft, #F9FAFC);
  color: var(--p-ts, #475569);
  font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rw-trendchip--risiko {
  border-color: var(--p-dng, #DC2626);
  color: var(--p-dng, #B91C1C);
  background: var(--p-dng-bg, #FEF2F2);
}

/* Advertising-Posture-Karten (Ampel + Rationale, KEIN €). */
.rw-rc-posture { margin-bottom: 1.5rem; }
.rw-rc-posture__title { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--p-ink, #1E293B); }
.rw-rc-posture__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.rw-rc-posture-card {
  padding: 0.85rem 1rem;
  border: 1px solid var(--p-bd);
  border-radius: var(--p-r-card);
  background: var(--p-card);
  box-shadow: var(--p-sh-card);
  border-left: 3px solid var(--p-bd);
}
.rw-rc-posture-card--green { border-left-color: var(--p-ok, #16A34A); }
.rw-rc-posture-card--amber { border-left-color: var(--p-warn, #F59E0B); }
.rw-rc-posture-card--red { border-left-color: var(--p-dng, #DC2626); }
.rw-rc-posture-card--grey { border-left-color: var(--p-bd); }
.rw-rc-posture-card__head { display: flex; align-items: center; gap: 0.5rem; }
.rw-rc-posture-card__light {
  width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--p-bd);
}
.rw-rc-posture-card__light--green { background: var(--p-ok, #16A34A); }
.rw-rc-posture-card__light--amber { background: var(--p-warn, #F59E0B); }
.rw-rc-posture-card__light--red { background: var(--p-dng, #DC2626); }
.rw-rc-posture-card__light--grey { background: var(--p-bd); }
.rw-rc-posture-card__asin { font-weight: 700; color: var(--p-ink, #1E293B); font-size: 0.85rem; }
.rw-rc-posture-card__verb {
  margin-left: auto; font-size: 0.75rem; font-weight: 600;
  color: var(--p-violet); text-transform: uppercase; letter-spacing: 0.02em;
}
.rw-rc-posture-card__name { margin: 0.35rem 0 0.25rem; font-size: 0.78rem; color: var(--p-ts, #64748B); }
.rw-rc-posture-card__rationale { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--p-ts, #475569); }
/* N6: die Werbe-Kennzahl der Karte. Bewusst OHNE eigene Signalfarbe: die Ampel
   links oben ist die einzige Farbaussage der Karte, ein zweiter Farbträger
   daneben würde zwei verschiedene Urteile suggerieren (DESIGN.md R11). */
.rw-rc-posture-card__ads { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--p-tp, #1e293b); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; }
.rw-rc-posture-card__acos { font-weight: 600; font-variant-numeric: tabular-nums; }
.rw-rc-posture__ads-reason { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--p-ts, #475569); }

/* Cross-Sell Ranked Bars (own=indigo / competitor=grau; KEIN Sankey). */
.rw-rc-xsell { margin-bottom: 1.5rem; }
.rw-rc-xsell__legend {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--p-ts, #475569); margin-bottom: 0.75rem;
}
.rw-rc-xsell__swatch { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; }
.rw-rc-xsell__swatch + .rw-rc-xsell__swatch { margin-left: 0.75rem; }
.rw-rc-xsell__anchor {
  margin-bottom: 0.85rem; padding: 0.75rem 1rem;
  border: 1px solid var(--p-bd); border-radius: var(--p-r-card);
  background: var(--p-card); box-shadow: var(--p-sh-card);
}
.rw-rc-xsell__anchor-title { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--p-ink, #1E293B); }
.rw-rc-xsell__bars { list-style: none; margin: 0; padding: 0; }
.rw-rc-xsell__bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) 3fr auto;
  align-items: center; gap: 0.6rem; padding: 0.2rem 0;
}
.rw-rc-xsell__bar-label { font-size: 0.78rem; color: var(--p-ink, #1E293B); }
.rw-rc-xsell__owner { font-size: 0.68rem; padding: 0 0.3rem; border-radius: 3px; }
.rw-rc-xsell__owner--own { color: var(--p-violet); }
.rw-rc-xsell__owner--competitor { color: var(--p-ts, #64748B); }
.rw-rc-xsell__bar-track {
  position: relative; height: 0.6rem; border-radius: 3px;
  background: var(--p-bg-soft, #F1F5F9); overflow: hidden;
}
.rw-rc-xsell__bar-fill { display: block; height: 100%; border-radius: 3px; }
.rw-rc-xsell__bar-val { font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--p-ts, #475569); }
.rw-rc-xsell__caveat {
  margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--p-ts, #64748B);
  border-left: 3px solid var(--p-warn, #F59E0B); padding-left: 0.6rem;
}
.rw-rc-xsell__empty { color: var(--p-ts, #64748B); font-style: italic; }

/* "Was wir NICHT zeigen können"-Panel. */
.rw-rc-cannot {
  margin-bottom: 1.5rem; padding: 0.85rem 1.1rem;
  border: 1px dashed var(--p-bd); border-radius: var(--p-r-card);
  background: var(--p-bg-soft, #F9FAFC);
}
.rw-rc-cannot__title { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--p-ink, #1E293B); }
.rw-rc-cannot__list { margin: 0; padding-left: 1.1rem; }
.rw-rc-cannot__item { font-size: 0.82rem; color: var(--p-ts, #475569); margin-bottom: 0.2rem; }

/* Schätzwert-Kennzeichnung für Gebühren-/Margen-Werte aus der P&L-Näherung
   (Standard-Gebührensätze, keine Amazon-Gebührenabrechnung). Ton wie die
   bestehenden KPI-Captions: leise, klein, nie alarmierend. */
.rw-est-badge {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--p-bd);
  border-radius: 999px;
  background: var(--p-bg-soft, #F9FAFC);
  color: var(--p-ts, #64748B);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
/* Sekundaerzeile neben einem Wert: die ASIN unter dem Produktnamen, das Delta
   in Klammern, die Herkunft einer Schwelle, ein Rueckfalltext wie "ohne
   Verteilung". Sie soll den Wert EINORDNEN, nicht mit ihm konkurrieren.

   Die Klasse wurde mit den Review-Analyse-Seiten eingefuehrt (#1241) und nie
   definiert: kein Selektor in einem der 18 Stylesheets, in keiner Fassung der
   Historie (git log -S). Ausgeliefert stand sie damit in vier Templates im DOM
   und tat nichts, und getroffen hat es genau die Zeilen, die einen Befund
   einordnen.

   Bewusst OHNE display und OHNE margin: die Klasse sitzt an <span> wie an <p>,
   und die Templates setzen ihre Abstaende bereits selbst. Ein display hier
   wuerde die Inline-Verwendung brechen. */
.rw-note {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--p-ts, #64748B);
}

.rw-est-caption {
  margin: 0.4rem 0 0.75rem;
  font-size: 0.72rem;
  color: var(--p-ts, #64748B);
  line-height: 1.4;
}
.rw-est-caption .rw-est-badge { margin-right: 0.35rem; }

@media (max-width: 720px) {
  .rw-rc-xsell__bar-row { grid-template-columns: 1fr; }
  .rw-rc-posture__grid { grid-template-columns: 1fr; }
}

/* „Wer bietet mit" — aufklappbare Wettbewerber-Liste je eigener ASIN (P5d). */
.rw-cl-offers { margin-top: 1.5rem; }
.rw-cl-offers__title { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--ma-800); }
.rw-cl-offer { margin-bottom: 0.5rem; }
.rw-cl-offer__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.75rem;
  background: var(--ma-warm-grey);
  border: 1px solid var(--ma-border);
  border-radius: var(--p-r-btn, 8px);
  font-family: var(--ma-font);
  font-size: 0.82rem;
  color: var(--ma-700, #3A3A5A);
  cursor: pointer;
  text-align: left;
}
.rw-cl-offer__toggle:hover { background: var(--ma-50); }
.rw-cl-offer__asin { font-weight: 700; color: var(--ma-800); }
.rw-cl-offer__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ma-500);
}
.rw-cl-offer__count { font-weight: 600; color: var(--ma-600); white-space: nowrap; }
.rw-cl-offer__chevron { color: var(--ma-400); }
.rw-cl-offer__panel {
  margin-top: 0.4rem;
  border: 1px solid var(--ma-border);
  border-radius: 8px;
  overflow: hidden;
}
.rw-cl-offer__table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.rw-cl-offer__table th {
  text-align: left;
  padding: 0.4rem 0.7rem;
  background: var(--ma-50);
  color: var(--ma-500);
  font-weight: 600;
  border-bottom: 1px solid var(--ma-border);
}
.rw-cl-offer__table td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--ma-border); color: var(--ma-700, #3A3A5A); }
.rw-cl-offer__table tr:last-child td { border-bottom: none; }
.rw-cl-offer__num { text-align: right; font-variant-numeric: tabular-nums; }
/* Buy-Box-Gewinner-Zeile: dezent (Bold + zarter Tönung + Badge) — KEIN lila Balken. */
.rw-cl-offer__row--winner td { background: var(--ma-pos-bg); font-weight: 600; }
.rw-cl-offer__row--own .rw-cl-offer__who { color: var(--ma-800); font-weight: 700; }
.rw-cl-offer__badge {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--c-moss);
  color: var(--c-paper-raised);
  font-size: 0.66rem;
  font-weight: 600;
}

/* =====================================================================   WELLE 3 — GLASSY LIGHT (V2), Stil-Upgrade Report-Web-Karten-Hüllen
   Freigegeben Nils+Patric 12.07.2026, gemergt via PR #694 (Glassy V2).
   Quelle: mockup-welle-a.html (.glass/.soft), Bildsprache-Konzept 2026-07-10,
   Entscheidung 4. CSS-only, additiv, lädt zuletzt → gewinnt die Kaskade.
   NUR Karten-Hüllen — nie Chart-Flächen, nie Tabellen-Inhalt.
   ========================================================================== */
/* --w3-glass-*-Tokens: Single Source ist sa-prism.css :root (Duplikat hier
   entfernt, 2026-07-12) — die Konsumenten darunter bleiben unverändert. */

/* Karten-Hüllen (Insights/Aktionen/Pillar/Comp/KPI/BCG): weiche gestaffelte
   Schatten statt harter Border, 16px-Radius, dezenter Frosted-Glass. */
.rw-insights-card, .rw-actions-box, .rw-pillar-card, .rw-comp-card,
.rw-kpi, .rw-bcg-cell {
  border-radius: var(--w3-glass-radius);
  border: 1px solid var(--w3-glass-bd);
  background: var(--w3-glass-bg);
  box-shadow: var(--w3-glass-sh);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .rw-insights-card, .rw-actions-box, .rw-pillar-card, .rw-comp-card,
  .rw-kpi, .rw-bcg-cell {
    backdrop-filter: blur(var(--w3-glass-blur));
    -webkit-backdrop-filter: blur(var(--w3-glass-blur));
  }
}
/* Fallback ohne backdrop-filter-Support: solide Fläche statt halbtransparent */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rw-insights-card, .rw-actions-box, .rw-pillar-card, .rw-comp-card,
  .rw-kpi, .rw-bcg-cell {
    background: #fff;
  }
}

/* Verdict-Tile: nur Radius+Schatten heben. Status-Varianten (kannibal =
   Rot-Wash mit box-shadow:none, co_movement = getönte Fläche) behalten ihre
   eigene Fläche — keine Glas-Überdeckung, sonst geht das Signal verloren. */
.rw-verdict-tile { border-radius: var(--w3-glass-radius); }
.rw-verdict-tile:not(.rw-verdict-tile--kannibal) { box-shadow: var(--w3-glass-sh); }
/* Re-assert Akzent-Randbreiten nach dem radius-Reset (bestehendes Muster) */
.rw-verdict-tile { border-top-width: 5px; border-left-width: 3px; }

/* Hover-Elevation nur auf den beiden Karten, die bereits als interaktiv
   markiert sind (rw-kpi enthält ASIN-Links, rw-pillar-card hatte schon einen
   Hover-Schatten) — nicht auf rein statischen Info-Karten. */
.rw-kpi, .rw-pillar-card {
  transition: transform 160ms var(--ease-out, ease-out), box-shadow 160ms var(--ease-out, ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rw-kpi:hover, .rw-pillar-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--w3-glass-sh-hover);
  }
}
.rw-kpi:active, .rw-pillar-card:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .rw-kpi, .rw-pillar-card { transition: opacity 160ms ease-out; }
  .rw-kpi:hover, .rw-pillar-card:hover, .rw-kpi:active, .rw-pillar-card:active { transform: none; }
}

/* Zahlenspalten-Klassen: tabular-nums für saubere Ausrichtung großer Zahlen
   in Verdict-/Pillar-/BCG-/Priority-/Reco-/Coverage-Karten. */
.rw-verdict-tile__count, .rw-verdict-tile__impact,
.rw-pillar-card__score, .rw-bcg-metric__value,
.rw-priority__impact, .rw-ai-reco__impact,
.rw-kwgap-tier__count,
.rw-cl-offer__count, .rw-asin-loaded__count {
  font-variant-numeric: tabular-nums;
}

/* Bugfix Sichtbarkeit (Nacht-Build 12.07.): Der Header sitzt auf der dunklen
 * Bühne VOR dem weißen Paperhead — .pp-paperhead::before (inset:-400px, z-index:1)
 * malt ihn sonst zu, und dunkle Schrift wäre dunkel-auf-dunkel unlesbar. */
.rw-verdict-header {
  position: relative;
  z-index: 2;
}
.rw-verdict-header .rw-verdict-header__title {
  color: #fff;
}
.rw-verdict-header .rw-verdict-header__range {
  color: rgba(255, 255, 255, 0.6);
}

/* ══════════════════════════════════════════════════════════════════════
   Welle 3 — Soft-Body Draft (Konzept-PR, Entscheidung Nils+Patric 12.07.2026)
   Additiv ab hier: Metapher-Icon-Slot (Verdikt-Header), SKUY-Avatar-Kopf
   (KI-Empfehlung) + heller Body-Draft, opt-in via ``?soft=1``.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Verdikt-Header: Metapher-Icon-Slot (Entscheidung 3) ──
   44px gerundetes Quadrat, helles Violett-Chip — identisch zum Mockup
   ``.metaph``. Rendert nur, wenn ``report_icons.verdict_icon`` ein SVG für
   den Report-Typ kennt (additiv, kein Icon = kein Slot). */
.rw-verdict-header__row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.rw-verdict-header__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--p-tint-10);
  color: var(--p-violet, #7C3AED);
}

/* ── KI-Empfehlung: SKUY-Avatar-Kopf (Entscheidung 3, Bildsprache Welle 3) ──
   Ersetzt den generischen Funken-Icon-Kopf NUR optisch — Inhalte/Links der
   Liste darunter bleiben unverändert. Avatar-Chip 40px, helles Violett
   (identisch ``.rava`` aus skuy-studio.html „Im Produkt"-Karte). */
.rw-skuy-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--p-tint-10);
}
.rw-skuy-avatar svg {
  width: 100%;
  height: 100%;
}
.rw-skuy-avatar svg {
  width: 100%;
  height: 100%;
}
.rw-ai-reco__head--skuy .rw-ai-reco__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rw-ai-reco__skuy-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ma-400, var(--c-slate));
}
.rw-ai-reco__stamp {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  color: var(--ma-400, var(--c-slate));
  background: var(--ma-warm-grey, var(--c-paper));
  border-radius: 6px;
  padding: 0.1rem 0.45rem;
  letter-spacing: 0.01em;
}

/* ── Soft-Body-Draft: heller Report-Body statt Lila-Verlauf+Sternenfeld ──
   Scope: ``.p-appshell.rw-soft`` (Klasse hängt view.html via
   ``appshell_class``-Block nur bei ``?soft=1`` an app_base.html an — ohne
   Query-Param unverändert). Ersetzt NUR die Bühnen-Fläche
   (sa-prism.css .p-appshell::before/::after); weiße Daten-Platten
   (.rw-kpi/.rw-chart/.p-panel) bleiben unverändert weiß. Ampel-/
   Statusfarben (Badges, Traffic-Lights) unangetastet. */
.p-appshell.rw-soft { background: var(--p-soft-bg, #F0F3FA); }
/* Rezept lebt als --p-soft-stage in sa-prism.css :root (Single Source,
   identisch konsumiert von .pp-soft in sa-premium.css). */
.p-appshell.rw-soft::before {
  background: var(--p-soft-stage);
}
/* Sternenfeld ist ein Dunkel-Grund-Effekt — auf der hellen Fläche unsichtbar
   und unnötig, daher aus statt umgefärbt. */
.p-appshell.rw-soft::after { display: none; }

/* Verdikt-Header sitzt (Bugfix oben, s. .rw-verdict-header__title) ebenso
   direkt auf dem dunklen Verlauf → auf der hellen Soft-Fläche zurück auf
   dunkle Schrift. */
.rw-soft .rw-verdict-header__title { color: var(--ma-900, #1E293B); }
.rw-soft .rw-verdict-header__range { color: var(--ma-400, #64748B); }

/* Tab-Leiste + Quadrant-Filter + Reco-Anker-Chip liegen im Standard-Look auf
   dem dunklen Verlauf (reports-web.css ".rw-tabs--on-dark", Design-Audit
   2026-07-03) — auf der hellen Soft-Fläche brauchen sie die dunklen
   Slate-Töne zurück, sonst verschwindet weißer Text auf hellem Grund. */
.rw-soft .rw-tabs--on-dark .rw-tabs__btn { color: var(--ma-400, #64748B); }
.rw-soft .rw-tabs--on-dark .rw-tabs__btn:hover {
  background: var(--ma-50, #F1F5F9);
  color: var(--ma-900, #1E293B);
}
.rw-soft .rw-tabs--on-dark .rw-tabs__btn.is-active { color: var(--p-tp, #0F172A); }
.rw-soft .rw-tabs--on-dark .rw-filter {
  color: var(--ma-600, #334155);
  border-color: var(--ma-border, #D9E1F0);
}
.rw-soft .rw-tabs--on-dark .rw-filter:hover {
  color: var(--ma-900, #1E293B);
  border-color: var(--ma-400, #64748B);
}
/* Kontrast-Fix am aktiven Chip (R8, gemessen am gerenderten DOM): die
   Soft-Regel `.rw-soft .rw-tabs--on-dark .rw-filter { color: var(--ma-600) }`
   (0,3,0) schlug `.rw-filter.is-active { color: #fff }` (0,2,0) — der aktive
   Chip stand mit Slate-Text #334155 auf dem violetten Verlauf (~2,1:1, unter
   AA). Hoehere Spezifitaet (0,4,0 statt 0,3,0) gewinnt unabhaengig von der
   Quellreihenfolge, richtige Farbe: weiss auf --p-grad-violet = 6,9:1.
   Gilt fuer JEDE Analyse mit Klassen-Chips (ABC, BCG, SWOT, Competitor-Light,
   Kampagnen-Detail), nicht nur ABC — es ist EIN Chip-Vokabular (R1). */
.rw-soft .rw-tabs--on-dark .rw-filter.is-active { color: #fff; }
.rw-soft .rw-tabs__reco-link {
  color: var(--p-violet, #7C3AED);
  border-color: var(--p-tint-border);
}
.rw-soft .rw-tabs__reco-link:hover {
  color: var(--p-cpurple, #6D28D9);
  border-color: color-mix(in srgb, var(--p-violet) 55%, transparent);
}

/* Soft-Clean-Kartenbehandlung (Mockup „V1 Soft Clean", Entscheidung 4):
   Borders raus, weiche gestaffelte Schatten, mehr Radius, mehr Weißraum.
   Karten selbst bleiben weiß (unverändert) — nur Rahmen/Schatten werden
   weicher, damit sie von der neuen hellen Fläche nicht mehr per Kontur,
   sondern per Schatten abgesetzt sind. */
.rw-soft .rw-kpi,
.rw-soft .rw-chart,
.rw-soft .p-panel {
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(20, 20, 60, .05), 0 10px 30px rgba(20, 20, 60, .07);
}
.rw-soft .rw-chart__inner { border-color: rgba(22, 25, 58, .06); }

/* Chart.js-Tick-/Grid-Farben (reports-web.js Chart.defaults) sind bereits
   auf helle Flächen abgestimmt (#64748B Tick, #E3EAF5 Grid — siehe
   Chart.defaults.color/borderColor) und liegen zudem innerhalb der weißen
   .rw-chart-Karte, nicht direkt auf der Bühne — daher hier UNVERÄNDERT
   lesbar, kein JS-Eingriff nötig. */

/* ── Welle 4 (feature/w4-icons-everywhere): Icon-Vokabular überall ──
   Additiv ans Dateiende, keine bestehenden Regeln angefasst. */

/* Analyse-Wechsler ("Andere Analysen ▾"): Glyph aus der Single Source
   (report_icons.verdict_icon) vor dem Analyse-Namen. Text bleibt der
   Accessible Name — die Glyphe ist im Template aria-hidden. */
.rw-dropdown__glyph {
  display: inline-flex;
  width: 18px;
  height: 18px;
  margin-right: 0.4rem;
  vertical-align: -4px;
  color: var(--p-violet, #7C3AED);
}
.rw-dropdown__glyph svg { width: 100%; height: 100%; }

/* Empty-State (R2/S1: Text bleibt Pflicht, Motiv nur Dekoration) — großes,
   dezentes Analyse-Motiv (Kachel-Art) neben Verb-Headline + der bereits
   bestehenden, adapter-generierten Notiz (unverändert, nur umgebaut). */
.rw-empty {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin: 0 0 16px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  color: #78350F;
  font-size: 0.95rem;
  line-height: 1.45;
  /* Bugfix Sichtbarkeit (gleiche Ursache wie .rw-verdict-header oben):
     .pp-paperhead::before (inset:-400px, z-index:1) malt sonst über jeden
     Inhalt VOR dem Paperhead im DOM — eigener Stacking-Context + höherer
     Index hebt die Notiz sichtbar darüber. */
  position: relative;
  z-index: 2;
}
.rw-empty__art {
  flex: none;
  width: 92px;
  height: auto;
  opacity: 0.5;
  filter: saturate(0.6);
}
.rw-empty__body { min-width: 0; }
.rw-empty__headline {
  margin: 0 0 0.3rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #78350F;
}
.rw-empty__text { margin: 0; }
@media (max-width: 560px) {
  .rw-empty { flex-direction: column; align-items: flex-start; }
  .rw-empty__art { width: 72px; }
}

/* ============================================================================
   WELLE 3 — FEINSCHLIFF SLICE 3 (G2+G3, 12.07.2026)
   Additiv ans Dateiende (S2) — gewinnt die Kaskade gegen die Blöcke oben.

   G2 · SKUY-Figur (reports/web/_skuy_figure.html): Zustands-Variante der
   Bildsprache-Figur für Empty-/Analyse-States. Ersetzt hier
   (reports/web/view.html .rw-empty) das bisherige generische Analyse-Motiv
   (``.rw-empty__art``, jetzt unbenutzt — bewusst nicht entfernt, S2: Cleanup
   erst im finalen Slice). Shared Default-Größe 72px, ``.skuy-figure--sm``
   verkleinert auf 48px (Dashboard-Empty-State). Nur eine dezente
   Einblendung (R9), keine Dauer-Animation. */
.skuy-figure {
  flex: none;
  width: 104px;
  height: 104px;
  animation: skuy-figure-in 220ms cubic-bezier(.23, 1, .32, 1);
}
.skuy-figure--sm { width: 76px; height: 76px; }
@keyframes skuy-figure-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .skuy-figure { animation: none; }
}

/* ============================================================================
   WELLE 3 — FEINSCHLIFF SLICE 5 (B, 12.07.2026)
   Analyse-Glyph (Single Source: report_icons.verdict_icon) im Report-Kopf-
   Eyebrow (reports/web/view.html .sa-eyebrow), analog .rw-dropdown__glyph.
   Kein explizites `color` — erbt die jeweils aktive Eyebrow-Farbe
   (currentColor), damit es in allen Bühnen-Varianten passt. */
.rw-eyebrow__glyph {
  display: inline-flex;
  width: 14px;
  height: 14px;
}
.rw-eyebrow__glyph svg { width: 100%; height: 100%; }

/* Start-Modal-Titel ("Neuen <Analyse> starten"): gleiche Glyphe, violetter
   Akzent statt currentColor (Modal-Titel ist dunkel/ink, Violett hebt sich
   dezent als Analyse-Signal ab). */
.rw-modal__glyph {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--p-violet, #7C3AED);
  vertical-align: -3px;
  margin-right: 0.35rem;
}
.rw-modal__glyph svg { width: 100%; height: 100%; }

/* ============================================================================
   FARBSWEEP 2026-07 — WELLE 3 · Report-Webview-Kern (Batch B)
   Kanonisches Violett zurück als *Akzent* über die geteilte reports-web.css →
   wirkt auf ALLE Analysen zugleich. Main-KPIs werden hervorgehoben:
     P1 = getönte Kopf-Kappe auf JEDER Main-KPI-Karte (.rw-kpi__label),
     P2 = Wash + violetter Ring auf dem führenden KPI je Strip
          (.rw-kpi--hero/--ident, im Template markiert — genau 1× je Strip).
   Zusätzlich zart getönt: Tab-Leisten-Ruhefläche, Chart-Titel-Kappe,
   Tabellen-Kopf + Zebra, Verdikt-Header-Platte.

   Leitplanken: nur Token-Tints aus den --p-surf-violet- und --p-tint-Sets (R11), KEIN
   linker Akzent-Balken (R5), Zeitraum-Captions unberührt (R6), Kontrast ≥4.5:1
   (R8 — Beschriftungen auf Tint von --p-tm auf --p-ts angehoben). Additiv ans
   Dateiende (S2) → gewinnt die Kaskade, auch gegen die .rw-soft-Overrides oben.
   Alle Flächen laufen über --p-surf-violet* → der globale @media-print-Block
   (sa-prism.css :root) degradiert sie auf Weiß; nur der rgba-Zebra-Tint braucht
   einen eigenen Print-Override. Dunkle Slabs (.rw-top-section/.rw-top-kpi) sind
   NICHT betroffen — die Regeln greifen ausschließlich auf die weißen
   .rw-kpi/.rw-chart/.rw-table-Flächen (Batch-C-Absicherung ist strukturell).
   ============================================================================ */

/* ── P1 · Getönte Kopf-Kappe für ALLE Main-KPI-Karten ──
   Die Label-Zone (immer erstes Kind, _tab.html) wird zur flächenbündigen
   getönten „Kappe"; Zahl + Zeitraum-Caption bleiben auf dem weißen Körper
   (max. Kontrast, R6). Negative Margins gegen das .rw-kpi-Padding (1rem 1.1rem),
   Radius 1px kleiner als die Karte (20px) → sitzt sauber im Rand. Label-Farbe
   von --p-tm auf --p-ts angehoben (R8: kleine Uppercase-Caps auf dem Tint sicher
   ≥4.5:1). KEIN border-left (R5). */
.rw-kpis .rw-kpi > .rw-kpi__label {
  margin: -1rem -1.1rem 0.6rem;
  padding: 0.5rem 1.1rem;
  background: var(--p-surf-violet);
  border-bottom: 1px solid var(--p-surf-violet-bd);
  border-radius: 19px 19px 0 0;
  color: var(--p-ts);
}

/* ── P2 · Führender KPI je Strip (.rw-kpi--hero / --ident) ──
   Ganzflächiger opaker Wash (violet-50) + einheitlich violetter 1px-Ring
   (border-Shorthand) — sichtbar auch im Soft-Body (gewinnt gegen .rw-soft
   .rw-kpi {border-color:transparent}). Die größere Zahl kommt bereits aus
   sa-premium.css. Genau EIN --hero/--ident je Strip (Template) → P2 nie doppelt.
   (Der frühere blaue border-top-Akzent wurde in B3 entfernt, s. Block
   „Primär-KPI je Liste = Hero-Metrik ODER Identifier".) */
.rw-kpis .rw-kpi--hero,
.rw-kpis .rw-kpi--ident {
  background: var(--p-surf-violet);
  border: 1px solid var(--p-surf-violet-bd);
}
/* Kopf des Primär-KPI eine Stufe kräftiger (violet-100) → Schichtung bleibt
   auf dem gewashten Körper sichtbar. */
.rw-kpis .rw-kpi--hero > .rw-kpi__label,
.rw-kpis .rw-kpi--ident > .rw-kpi__label {
  background: var(--p-surf-violet-2);
  border-bottom-color: var(--p-surf-violet-bd);
}
/* R8: auf dem vollflächigen Wash die Muted-Captions (Hint/Period) von --p-tm
   (#64748B fällt auf dem Tint knapp < 4.5:1) auf --p-ts anheben. */
.rw-kpis .rw-kpi--hero .rw-kpi__hint,
.rw-kpis .rw-kpi--hero .rw-kpi__period,
.rw-kpis .rw-kpi--hero .rw-kpi__provisional,
.rw-kpis .rw-kpi--ident .rw-kpi__hint,
.rw-kpis .rw-kpi--ident .rw-kpi__period,
.rw-kpis .rw-kpi--ident .rw-kpi__provisional {
  color: var(--p-ts);
}

/* ── Tab-Leiste: getönte Ruhefläche (nur Soft-Body = Default) ──
   Aktiver Tab-Unterstrich (--p-violet) + Hover bleiben unverändert. Im
   ?classic=1-Dunkel-Fallback bleibt die Leiste on-dark (kein Light-Tint auf
   Dunkel). */
.rw-soft .rw-tabs__nav {
  background: var(--p-surf-violet);
  border-radius: 10px 10px 0 0;
}

/* ── Chart-Kopf: getönte Titel-Kappe (flächenbündig im weißen Bezel-Kern) ──
   .rw-chart__inner hat overflow:hidden + radius 16px → die Kappe clippt sauber.
   Titel-Bottom-Margin wird in die Kappen-Padding aufgelöst. Kein Links-Balken. */
.rw-chart__head {
  margin: -1rem -1.1rem 0.9rem;
  padding: 0.5rem 1.1rem;
  background: var(--p-surf-violet);
  border-bottom: 1px solid var(--p-surf-violet-bd);
}
.rw-chart__head .rw-chart__title { margin-bottom: 0; }

/* ── Tabellen-Kopf getönt + zarter Zebra + violette Hover-Zeile ──
   thead-Text auf --p-ts (R8 auf dem Tint). .rw-table-wrap>table hat
   overflow:hidden+radius → Kopf clippt sauber. Zebra über :nth-of-type, da die
   Zeilen Alpine-`<template x-for>`-Geschwister sind. Zebra = rgba --p-tint-05
   (Hover-/Glow-Token) → eigener Print-Override (die surf-violet*-Tokens
   degradieren global). */
.rw-table thead th {
  background: var(--p-surf-violet);
  border-bottom: 1px solid var(--p-surf-violet-bd);
  color: var(--p-ts);
}
.rw-table tbody tr:nth-of-type(even) td {
  background: var(--p-tint-05);
}
.rw-table tbody tr:hover td {
  background: var(--p-surf-violet);
}

/* Print (S6): der rgba-Zebra-Tint degradiert nicht über den globalen
   Token-Override → hier explizit auf Weiß. (Kopf/Kappen/Platte laufen über
   --p-surf-violet* und degradieren bereits global.) */
@media print {
  .rw-table tbody tr:nth-of-type(even) td { background: #fff; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Main-KPI-Werte werden NIE abgeschnitten — auf JEDEM Viewport (Owner-Regel).
   Haupt-KPIs müssen sofort und vollständig lesbar sein. Die Basisregel oben
   (.rw-kpi__value: overflow:hidden + text-overflow:ellipsis, ~L167) plus
   „.rw-kpi__value { white-space: nowrap }" (~L2898) clippten zusammengesetzte
   Werte in schmalen Grid-Kacheln — z.B. Deal-Score „62/100 (Note C)" →
   „62/100 (Not…". Das passiert AUCH auf 1440px: die 5 Deal-KPI-Kacheln sind
   nur ~150–270px breit, und der fluide cqi-Deckel (sa-premium.css) bleibt bei
   diesen Breiten auf seinem Maximum (2.05rem) stehen → der lange Wert clippt.
   PR #773 löste das nur ≤640px; hier ziehen wir dieselbe Linie über ALLE
   Breiten. Der Wert darf umbrechen statt clippen (bricht sauber an der Lücke,
   z.B. „62/100" / „(Note C)"); overflow-wrap:break-word ist der Notausgang für
   einen extralangen Einzel-Token → sprengt nie die Karte / das Grid.
   Kurze Werte (z.B. „258.756 €") passen weiterhin einzeilig → bleiben einzeilig
   (white-space:normal bricht nur, wenn es nicht passt). Nur CSS, Schriftgrößen
   unverändert → Premium-Optik (getönte P1/P2-Köpfe, Farbsweep) unangetastet. */
.rw-kpis .rw-kpi__value {
  white-space: normal;         /* hebt das globale KPI-nowrap auf → Umbruch statt Clip */
  overflow: visible;           /* kein Clipping … */
  text-overflow: clip;         /* … also auch keine Ellipse */
  /* Nachtrag Klicktest 18.08. (F10): der Notausgang unten war für zusammen-
     gesetzte ZAHLEN gedacht, griff aber auch bei einem einzelnen langen Wort —
     das CID-Momentum-Wort „Verlangsamend“ brach mitten im Wort ohne Trennstrich
     um und las sich wie ein Tippfehler. hyphens:auto gibt dem Browser vorher
     echte deutsche Trennstellen (die Seite ist lang="de", LANGUAGE_CODE="de"),
     und overflow-wrap:break-word ist per Spezifikation der LETZTE Ausweg: es
     greift nur, wenn die Zeile sonst KEINE zulässige Bruchstelle hat. Damit
     bricht ein Wort mit Trennstrich, ein Wert mit Leerzeichen weiter an der
     Fuge („62/100“ / „(Note C)“) — und ein wirklich untrennbarer Token (ASIN,
     lange ID) sprengt trotzdem nie die Karte. */
  -webkit-hyphens: auto;       /* Safari kennt die Eigenschaft bis heute nur mit Prefix */
  hyphens: auto;               /* deutsche Trennung zuerst: „Verlang-samend“ statt „Verlangs|amend“ */
  overflow-wrap: break-word;   /* Notausgang: extralanger Einzel-Token bricht, sprengt nie die Karte */
}

/* Mobile-Feinschliff aus PR #773 (unverändert): Hero-Deckel auf schmalen
   Viewports leicht senken, damit zusammengesetzte Werte in ≤2 sauberen Zeilen
   umbrechen statt zerfranst über 3+. Selektor-Parität + .p-main-Anker wie in
   sa-premium.css; reports-web.css lädt zuletzt → gewinnt. Single Source der
   Desktop-Größen bleibt sa-premium.css. */
@media (max-width: 640px) {
  .p-main .rw-kpis .rw-kpi--hero .rw-kpi__value {
    font-size: clamp(1.2rem, 24cqi, 1.7rem);
  }
}

/* ── „Was sehe ich hier?" — aufklappbarer Ein-Satz-Erklärer im Paper-Kopf ──
   Inhalt kommt aus core/report_catalog.py (Kachel-desc + Fragen-Gruppe) —
   Single Source, kein eigenes Content-System (Nachtschicht PR-3). Natives
   <details>/<summary>: A11y + Tastatur gratis, kein JS-State. Nur Tint-Tokens
   (R11), Signalfarben bleiben Status vorbehalten (R5), KEIN violetter
   Links-Balken an der Karte. */
.rw-explain {
  margin: 2px 0 8px;
  max-width: 640px;
  font-family: var(--ma-font);
}
.rw-explain__summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--p-tint-border);
  background: var(--p-tint-10);
  color: var(--p-cpurple, #6D28D9);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none; /* Standard-Marker aus — der Chevron unten übernimmt */
  user-select: none;
}
.rw-explain__summary::-webkit-details-marker { display: none; }
.rw-explain__summary::after { content: "▾"; font-size: 0.7em; }
.rw-explain[open] .rw-explain__summary::after { content: "▴"; }
.rw-explain__summary:hover { background: var(--p-tint-16); }
/* Fokus-Ring wie die Fokus-Muster der Datei (p-focus + Tint-Glow). */
.rw-explain__summary:focus-visible {
  outline: 2px solid var(--p-focus, #7C3AED);
  outline-offset: 2px;
}
.rw-explain__text {
  margin: 0.5rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  background: var(--ma-warm-grey, var(--c-paper));
  border: 1px solid var(--ma-border, var(--c-divider));
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ma-700, var(--c-graphite));
}
.rw-explain__question {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--p-cpurple, #6D28D9);
}

/* ============================================================================
   R15 — VIOLETT-ANKER (2026-07-18, Nils · docs/DESIGN.md R15-Addendum)
   Genau EIN satter Violett-Anker pro Seite: die führende Top-KPI im dunklen
   Kopf-Slab (.rw-top-kpi--hero) wird zur gefüllten Marken-Violett-Karte. Alles
   andere bleibt Stütz-Ebene (violet-50/100 aus dem --p-surf-violet-Set, R11) —
   NIE eine zweite satte Fläche im Viewport (R15a/d). Die Tab-internen
   .rw-kpi--hero behalten bewusst nur ihren violetten Wash (kein satter Anker,
   sonst ein Anker je Tab). Additiv ans Dateiende (S2) → gewinnt die Kaskade.
   KEIN Links-Balken (R5), keine rohen rgba/#-Violetts (R11) — der Anker läuft
   ausschließlich über --p-anchor-grad (sa-prism.css :root).
   ============================================================================ */

/* ── Der Anker: führende Top-KPI wird satt violett ──
   Sitzt als eigenständige, gefüllte Karte im dunklen Kopf-Slab (.rw-top-section)
   und hebt sich als hellster Violett-Block gegen den Navy-Grund ab. Text weiß
   (Label/Hint/Period rgba(255,255,255,.78), Wert #fff → Kontrast ≥4.5:1). Der
   rechte Trenn-Strich entfällt (die Karte trägt ihren eigenen Rahmen/Radius).
   Nur diese eine Karte je Seite (Template markiert forloop.first, view.html). */
.rw-top-kpi--hero {
  background: var(--p-anchor-grad);
  border-right: none;
  border-radius: var(--p-r-card, 14px);
  padding: 0.85rem 1rem;
  box-shadow: 0 14px 30px -18px rgba(67, 38, 160, .55);
}
/* Caption-Deckkraft 0.92 (nicht 0.78): am hellen Gradient-Stop #7C3AED bringt
   0.78 nur ~4.09:1 (< R8/R15a-Minimum 4.5:1), 0.92 ~5.1:1. Wert-Text = #fff. */
.rw-top-kpi--hero .rw-top-kpi__label { color: rgba(255, 255, 255, 0.92); }
.rw-top-kpi--hero .rw-top-kpi__value { color: #fff; }
.rw-top-kpi--hero .rw-top-kpi__hint,
.rw-top-kpi--hero .rw-top-kpi__provisional,
.rw-top-kpi--hero .rw-kpi__period { color: rgba(255, 255, 255, 0.92); }
/* Fokus-Ring (falls der Wert je verlinkt wird) bleibt kanonisches Violett. */
.rw-top-kpi--hero:focus-within { outline: 2px solid var(--p-focus); outline-offset: 2px; }

/* ── Identifier-KPI (ASIN-Codes) bleibt auf Weiß lesbar (R15c) ──
   Der --ident-Fall trägt NUR den violetten Top-Akzent — KEIN Flächen-Wash wie
   --hero —, damit lange Codes maximalen Kontrast behalten. Überschreibt den
   gemeinsamen P2-Wash (:~3778) für --ident; der getönte Label-Kopf (P1) bleibt.
   Kein Links-Balken (R5). */
.rw-kpis .rw-kpi--ident {
  background: var(--p-card);
  border: 1px solid var(--p-bd);
  border-top: 3px solid var(--p-violet);
}

/* ── Sektions-/Hebel-Boxen: violet-50-Stützfläche (R15b) ──
   „Empfohlene Maßnahmen"/Insights-Kästen bekommen eine ruhige getönte Fläche
   statt Weiß (violet-50 = Ruhe-Ton, unbegrenzt). NUR Fläche + zarte Border,
   KEIN Links-Balken (R5). Nur im Soft-Body (Default): im ?classic=1-Fallback
   bekäme eine Karte auf potenziell dunklem Grund keinen Light-Tint (R11). */
.rw-soft .rw-actions-box,
.rw-soft .rw-insights-card {
  background: var(--p-surf-violet);
  border-color: var(--p-surf-violet-bd);
}

/* ── Tab-Hero als satter Anker (R15a-Fallback für Seiten ganz ohne Kopf-Anker) ──
   Greift NUR auf .rw-anchor-fallback (Template: kein top_kpis UND kein
   verdict_text) → dort gäbe es sonst keinen satten Anker. Die führende Tab-KPI
   (.rw-kpi--hero) wird vom violet-50-Wash (:3781) auf die satte --p-anchor-grad-
   Fläche gehoben, Text weiß (≥4.5:1). Nur der Hero, nie --ident (Codes bleiben
   auf Weiß lesbar, R15c). Schließt den Verdikt-Anker aus (der braucht
   verdict_text) → nie zwei satte Anker (R15a). Nur Soft-Body; höhere
   Spezifität (4–5 Klassen) gewinnt gegen die P2-Wash-Regeln. KEIN Links-Balken. */
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero {
  background: var(--p-anchor-grad);
  border-color: transparent;
  box-shadow: 0 14px 30px -18px rgba(67, 38, 160, 0.55);
}
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero > .rw-kpi__label {
  background: transparent;
  border-bottom-color: transparent;
  color: rgba(255, 255, 255, 0.92);
}
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero .rw-kpi__value,
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero .rw-kpi__value--link {
  color: #fff;
}
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero .rw-kpi__hint,
.rw-soft .rw-anchor-fallback .rw-kpis .rw-kpi--hero .rw-kpi__period {
  color: rgba(255, 255, 255, 0.92);
}

/* ── ASIN-Vergleich „Verlauf": Bedien-Leiste über dem Kern-Chart ───────────── */
/* Chips/Toggles teilen die Pillen-Optik des Zeitraum-Selektors (.rw-range__btn),
   liegen aber in mehreren Zeilen, weil hier drei Dimensionen umgeschaltet
   werden (Kennzahl · Darstellung · Zeitraum). */
.rw-trendbar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.rw-trendbar__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rw-trendbar__hint {
  font-size: 0.78rem;
  color: var(--ma-700, #475569);
}
/* Trenner in der „Darstellung"-Zeile: hält das VJ-Overlay (Slice 2b) sichtbar
   vom Absolut/Indexiert-Paar getrennt — sonst läse es sich als dritter Modus. */
.rw-trendbar__sep {
  width: 1px;
  align-self: stretch;
  min-height: 1.1rem;
  margin: 0 0.3rem;
  background: var(--ma-200, #e3eaf5);
}
/* ASIN-Detail „Verlauf — Kernkennzahlen" (Grundstil S3): dieselbe
   Pillen-Leiste, aber EINMAL über dem Small-Multiples-Raster (nicht mehr
   innerhalb einer einzelnen Chart-Karte wie in Slice 2a) — sie steuert alle
   drei Kern-Karten gleichzeitig. */
.rw-trendbar--core {
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}
/* Sparse-Fix: ehrliche Hinweiszeile, wenn die Zeitraum-Pillen mangels
   Historie leer sind (≤1 voller Monat) — dezenter als ein Verdikt-Callout,
   aber sichtbar genug, um „warum bewegt sich hier nichts" zu beantworten. */
.rw-trendbar__hint--sparse {
  margin: 0;
}
/* Zeitraum-Klarheit unter dem Verdikt: die Aussage bezieht sich auf das
   Gesamtfenster, nicht auf die gewählte Pille. Umbruchfähig (anders als die
   nowrap-Caption im Chart-Kopf), weil hier ein ganzer Satz steht. */
.rw-chart__period--footnote {
  margin: 0.4rem 0 0;
  padding-top: 0;
  white-space: normal;
}
/* Konzept B: ehrliche Auflösungs-Anzeige neben den Zeitraum-Pillen. */
.rw-trendbar__resolution {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #8a94a6;
  white-space: nowrap;
}
/* Deaktivierte Pille (30T ohne Tagesdaten, 3M/12M ohne Historie): sichtbar, aber inert. */
.rw-range__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Auflösungs-Override-Dropdown (erscheint erst ab ≥2 verfügbaren Auflösungen). */
.rw-range__select {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ma-700, #475569);
  background: #fff;
  border: 1px solid var(--ma-border, #D4D4E8);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-family: var(--ma-font);
}
.rw-range__select:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}
/* Screenreader-Only-Ziel für aria-describedby der deaktivierten Pillen. */
.rw-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.rw-trendbar__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.78rem;
  color: var(--ma-700, #475569);
}
.rw-trendbar__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rw-trendbar__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}

/* Konzept B — Stat-Kacheln. Aktiv = Voll-Signatur-Fläche (Variante B, Nils
   2026-07-27): vollflächig Signatur-Lila statt Border+Top-Balken. Überschreibt
   BEWUSST die Design-Sprint-Entscheidung „Lila-Linie" (22.07.). Weiterhin KEIN
   Links-Balken (R5). */
.rw-tiles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.rw-tile {
  flex: 1 1 120px;
  text-align: left;
  background: #fff;
  border: 1px solid #e9edf6;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, color 0.15s;
}
.rw-tile:hover {
  border-color: #c9c2ee;
}
/* Fokus-Ring — kanonisches Violett (--p-focus-Muster); auf der aktiven Lila-
   Fläche unten auf Weiß umgestellt, damit er sichtbar bleibt. */
.rw-tile:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
}
/* Aktive Kachel = vollflächig Signatur-Lila (Variante B, Nils 2026-07-27).
   --p-anchor-grad = linear-gradient(135deg,#6D28D9,#7C3AED), R11 Single Source.
   Border transparent (kein Layout-Shift ggü. inaktiv), KEIN Top-Balken mehr. */
.rw-tile.is-active {
  background: var(--p-anchor-grad);
  border-color: transparent;
  box-shadow: 0 6px 16px -8px rgba(67, 38, 160, 0.5);
}
/* Weißer Text auf Lila (R8/R15a, Werte wie .rw-top-kpi--hero): am hellen Stop
   #7C3AED (Worst Case) bringt Label .92 ~5.1:1, Wert #fff ~5.7:1 (am dunklen
   Stop #6D28D9 wären es ~7.1:1) — beide ≥4.5:1. */
.rw-tile.is-active .rw-tile__label {
  color: rgba(255, 255, 255, 0.92);
}
.rw-tile.is-active .rw-tile__value {
  color: #fff;
}
/* Delta-Töne auf Lila neu gemischt — je gegen den hellen Stop #7C3AED
   (Worst Case) auf ≥4.5:1 geprüft: gut #B9F6D8 (~4.68:1), schlecht #FFE4E6
   rose-100 (~4.75:1), neutral weiß-.85 (hell → unkritisch). Die Default-Töne
   (Grün/Rot auf Weiß) gelten weiter für inaktive Kacheln. */
.rw-tile.is-active .rw-tile__delta--good {
  color: #b9f6d8;
}
.rw-tile.is-active .rw-tile__delta--bad {
  color: #ffe4e6;
}
.rw-tile.is-active .rw-tile__delta--neutral {
  color: rgba(255, 255, 255, 0.85);
}
/* Hover auf der aktiven Kachel: Fläche bleibt (kein heller Hover-Border).
   Fokus-Ring weiß statt Violett — --p-focus (#7C3AED) verschwände auf Lila. */
.rw-tile.is-active:hover {
  border-color: transparent;
}
.rw-tile.is-active:focus-visible {
  outline-color: #fff;
}
/* transition:color auf den Kindern (nicht am .rw-tile-Parent — der vererbt sie
   nicht), damit der Textfarben-Wechsel beim Aktiv-Toggle weich mitfadet. */
.rw-tile__label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a94a6;
  transition: color 0.15s;
}
/* Wert + Delta der Kachelleiste: die Kacheln stehen nebeneinander und tauschen
   ihren Inhalt beim Umschalten — ohne tabular-nums rutschen die Nachbarn mit
   (R22a-2). */
.rw-tile__value {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.rw-tile__delta {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s;
}
.rw-tile__delta--good {
  color: #0e9f6e;
}
.rw-tile__delta--bad {
  color: #c45b6e;
}
.rw-tile__delta--neutral {
  color: #64748b;
}
.rw-tile--more {
  flex: 0 0 auto;
  color: #8a94a6;
  font-size: 12px;
}
.rw-tiles__caption {
  font-size: 11px;
  color: #8a94a6;
  margin: 0 0 10px;
}

/* ============================================================================
   R16 — DARK-VERDICT-BÜHNE (2026-07-20, Design-Sprache v2, Slice B1+B4a)
   Der Verdikt-Header wird zur EINEN dunklen Bühne pro Analyse (Landing-Look) und
   ERSETZT den R15-Anker. ~15 % Seitenhöhe (kompaktes Padding), darunter sofort
   die helle Arbeitsfläche. Kein lila Links-Balken (R5). Nur .rw-soft (Default);
   im ?classic=1-Fallback sitzt der Header ohnehin auf Dunkel.
   ============================================================================ */
.rw-soft .rw-verdict-header--stage {
  /* Navy-Bühne inkl. beider Glow-Radials aus dem zentralen Landing-Token
     (R11, Single Source): --p-ai-grad = 2 radiale Violett/Blau-Glows + Navy-
     Linear — identisch zur Marketing-Hero-Bühne, kein handkopierter Verlauf. */
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border: none;
  /* Bewusst 18px als Bühnen-Shell — von der 16px-Karten-Norm (B3) ausgenommen,
     da dies der eine satte Anker/die Bühne pro Seite ist (R16), keine Karte. */
  border-radius: 18px;
  background: var(--p-ai-grad);
  box-shadow: 0 20px 44px -26px rgba(10, 8, 40, 0.75);
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__row { align-items: center; }
.rw-soft .rw-verdict-header--stage .rw-verdict-header__main { flex: 1; min-width: 0; }
/* Eyebrow (Analyse-Name) klein, gedämpft-hell. */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--p-stage-ink-muted, #A9B0D4); /* AA auf Navy (Spec R16-Labels) */
  margin-bottom: 0.15rem;
}
/* Titel weiß (überschreibt .rw-soft .rw-verdict-header__title { dunkel } via 3 Klassen). */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__title { color: var(--p-stage-ink, #fff); }
/* Metapher-Icon transluzent-weiß statt violet-50-Chip (auf Dunkel unsichtbar). */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--p-stage-ink, #fff);
}
/* Zeitraum als Pflicht-Badge (R6). */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__range { margin: 0.3rem 0 0; }
.rw-soft .rw-verdict-header--stage .rw-verdict-header__range-badge {
  display: inline-block;
  padding: 0.14rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  color: var(--p-stage-ink-soft, #E4E1FA); /* AA auf Navy (Spec R16-Sprechzeile) */
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Skuy-Sprechzeile (R18): Figur + Ich-Text, Gold-Glow + Puls-Idle NUR hier. */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0;
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-figure {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-figure svg { width: 40px; height: 40px; position: relative; z-index: 1; }
.rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(252, 211, 77, 0.55), transparent 68%);
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-text {
  color: var(--p-stage-ink-soft, #E4E1FA);
  font-size: 0.86rem;
  line-height: 1.35;
}
/* Hero-KPI als Text-Gradient (aufgehellte Anker-Variante, R16). */
.rw-soft .rw-verdict-header--stage .rw-verdict-header__kpi {
  flex: none;
  text-align: right;
  margin-left: 0.9rem;
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__kpi-value {
  display: block;
  font-family: var(--ma-font);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--p-stage-ink-accent, #C4B5FD), #8B5CF6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--p-stage-ink-accent, #C4B5FD); /* Fallback ohne background-clip */
}
.rw-soft .rw-verdict-header--stage .rw-verdict-header__kpi-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--p-stage-ink-muted, #A9B0D4);
}
/* Gold-Puls-Idle (~6s) NUR auf der Bühne; reduced-motion deaktiviert (R9/R17). */
@media (prefers-reduced-motion: no-preference) {
  .rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-glow {
    animation: rw-skuy-gold-pulse 6s ease-in-out infinite;
  }
}
@keyframes rw-skuy-gold-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 0.95; transform: scale(1.12); }
}
/* ── Anker-Umlenkung: mit Bühne KEIN zweiter satter Anker (R15a/R16) ──
   Auf Seiten MIT Dark-Verdict-Bühne verliert die führende Top-KPI im dunklen
   Kopf-Slab ihre satte Violett-Füllung (die Bühne ist jetzt der Anker) und wird
   zur ruhigen transluzenten Karte auf dem Navy-Slab. Höhere Spezifität (3 Klassen)
   gewinnt gegen .rw-top-kpi--hero (:4055). Kein Links-Balken. */
.rw-soft .rw-has-verdict-stage .rw-top-kpi--hero {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}
/* Schmale Viewports: die Bühnen-Row bricht um → die Hero-KPI stackt unter die
   Hauptspalte (Verdikt + Skuy) statt rechts gequetscht zu werden. */
@media (max-width: 640px) {
  .rw-soft .rw-verdict-header--stage .rw-verdict-header__row { flex-wrap: wrap; }
  .rw-soft .rw-verdict-header--stage .rw-verdict-header__kpi {
    width: 100%;
    margin: 0.7rem 0 0;
    text-align: left;
  }
}

/* ============================================================================
   R16-MERGE — „Eine Bühne" (2026-07-29, Owner-Entscheidung Nils, Grundstil S1)
   ----------------------------------------------------------------------------
   view.html zieht top_kpis UNTER die Verdikt-Bühne, sobald beide vorhanden
   sind — vorher ein Dunkel-Hell-Dunkel-Sandwich (Bühne · weißer Titelstreifen ·
   zweites dunkles Slab). ``.rw-stage`` umschließt in diesem Fall BEIDE Blöcke
   und malt Fläche/Radius/Schatten EINMAL: die verschachtelten Kinder verlieren
   ihre eigene Fläche, sonst zwei unabhängige --p-ai-grad-Ursprünge (das Token
   rechnet Prozent-Stops relativ zur eigenen Box) mit sichtbarer Farb-Naht an
   der Grenze. Seiten mit nur EINEM der beiden Blöcke tragen KEINEN Wrapper
   (view.html) — sie behalten unverändert ihre eigene Fläche/Radius/Schatten,
   bleiben also unverändert der alleinige dunkle Block (R16 Fall b/c).
   ============================================================================ */
/* Bugfix Sichtbarkeit (Nachtlauf-Generalprobe 2026-08-02) — dieselbe Ursache
   wie bei ``.rw-verdict-header`` und der Warn-Notiz weiter oben: der
   Papier-Layer ``.pp-paperhead::before`` (sa-premium.css) reicht mit
   ``inset: -400px …`` 400px über den Paper-Kopf hinaus, und der Kopf ist ein
   Stacking-Context mit ``z-index: 1`` — das Papier deckt damit alles zu, was im
   DOM VOR ihm steht und keinen eigenen höheren Index trägt. Der Überhang ist
   gewollt (Seiten OHNE Bühne ziehen die helle Fläche bis unter die Topbar) und
   bleibt unangetastet; der Index gehört an die Ebene, die die Fläche malt.
   Seit dem R16-Merge ist das der Wrapper — die Kinder stehen auf
   ``background: none`` —, er trug aber nur ``position: relative``. Also lag die
   Bühne unter dem weißen Papier, während die Kind-Texte (``z-index: 2``) weiter
   darüber gemalt wurden: weiße Schrift auf weißem Papier auf ALLEN
   Analyse-Ansichten mit Verdikt + Kopf-KPIs.
   Unscoped (nicht ``.rw-soft``-gebunden), damit der ``?classic=1``-Fallback
   denselben Schutz hat; ``.rw-stage`` gibt es nur in reports/web/view.html,
   also kein Kollateral. Wächter:
   sellerauto/reports/tests/test_stage_paperhead_stacking.py */
.rw-stage {
  position: relative;
  z-index: 2;
}
.rw-soft .rw-stage {
  position: relative;
  margin: 0 0 1.5rem;
  border-radius: 18px;
  background: var(--p-ai-grad);
  box-shadow: 0 20px 44px -26px rgba(10, 8, 40, 0.75);
  overflow: hidden;
}
/* Kinder verlieren Fläche/Radius/Schatten/Außenabstand — nur der Wrapper
   malt die Bühne. Eigenes Innen-Padding bleibt (Lesbarkeits-Abstand). */
.rw-soft .rw-stage > .rw-verdict-header--stage,
.rw-soft .rw-stage > .rw-top-section {
  margin: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
/* Knapperes Innen-Polster als zwei eigenständige Karten übereinander +
   Hairline-Trenner (gleiche Deckkraft wie die Karten-Trennstriche in
   .rw-top-kpi, R16g-Konsistenz) markiert den Übergang Verdikt → KPI-Reihe. */
.rw-soft .rw-stage > .rw-verdict-header--stage { padding-bottom: 0.85rem; }
.rw-soft .rw-stage > .rw-top-section { border-top: 1px solid rgba(255, 255, 255, 0.10); }
/* Horizontale Flucht: Verdikt-Text und KPI-Karten beginnen an derselben Kante
   (vorher zwei eigenständige Karten mit leicht unterschiedlichem Innenabstand,
   1.35rem vs. 1.6rem — jetzt EIN Block, muss fluchten). */
.rw-soft .rw-stage > .rw-top-section .rw-top-kpis {
  padding-top: 0.9rem;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}
/* Die Scope-Zeile fluchtet mit den KPI-Karten darüber (N3.2). */
.rw-soft .rw-stage > .rw-top-section .rw-scope-line {
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}
/* .rw-top-section::before/::after (Glow/Grain) bleiben unverändert — rein
   dekorative Layer, kein zweites Flächen-Rendering. */

/* ── Reco-Digest-Ansage + Detail-Sprechblase (R18, Design v2 B4b) ──
   Ein Skuy-Kopf oben (Bestand rw-ai-reco__head--skuy) trägt die Sammelansage;
   Skuy erscheint pro Karte NUR im aufgeklappten Detail. Kein lila Links-Balken. */
.rw-ai-reco__say {
  margin: 0.5rem 0 0;
  color: var(--p-ts, #4B4B6A);
  font-size: 0.88rem;
  font-weight: 600;
}
.rw-reco-detail { margin-top: 0.5rem; }
.rw-reco-detail__toggle {
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--p-cpurple, #6D28D9);
  list-style: none;
}
.rw-reco-detail__toggle::-webkit-details-marker { display: none; }
/* Dezenter Hover (nativen Fokus-Ring nicht anfassen). */
.rw-reco-detail__toggle:hover { text-decoration: underline; }
.rw-reco-detail[open] .rw-reco-detail__toggle { margin-bottom: 0.4rem; }
.rw-reco-say {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}
.rw-reco-say__avatar { flex: none; width: 32px; height: 32px; }
.rw-reco-say__avatar svg { width: 32px; height: 32px; }
.rw-reco-say__bubble {
  position: relative;
  flex: 1 1 auto;
  padding: 0.6rem 0.75rem;
  border-radius: 12px;
  background: var(--p-surf-violet, #F5F3FF);
  border: 1px solid var(--p-surf-violet-bd, #DDD6FE);
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--p-tp, #0F172A);
}
/* Sprechblasen-Schwanz zeigt zum Avatar — clip-path-Dreieck, KEINE
   border-left-Optik (R5/R15e). */
.rw-reco-say__bubble::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 11px;
  width: 7px;
  height: 12px;
  background: var(--p-surf-violet, #F5F3FF);
  clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

/* ============================================================================
   LILA-ROLLOUT (2026-07-21, Nils) — dunkle Nacht-Boxen + dunkles KPI-Band auf
   allen Analysen. Additiv ans Dateiende (S2) → gewinnt die Kaskade bei
   Gleichstand. Nur .rw-soft (Default); der ?classic=1-Fallback sitzt ohnehin auf
   Dunkel. KEIN lila Links-Balken (R5/R15e), KEINE rohen #-Violetts (R11 — Flächen
   laufen über --p-ai-grad / --p-stage-ink* / color-mix). Text-Kontraste AA auf
   Navy über die zentralen --p-stage-ink*-Tokens (in sa-prism.css :root als
   AA-geprüft dokumentiert, R16e): #fff, soft #E4E1FA, muted #A9B0D4, accent
   #C4B5FD.
   ============================================================================ */

/* ── S6 · Skuy-/AI-Empfehlungs-Sektion als dunkle Nacht-Box (R18/R16-Habitat) ──
   Der Empfehlungs-Container wird zur Navy-Bühne wie die Dashboard-Nachtschicht
   (.nb-card--stage) — Skuy spricht hier das Sammel-Urteil. Die Empfehlungs-KARTEN
   (.rw-ai-reco__item / .rw-findings__item = helle #F8FAFF-Karten) bleiben bewusst
   HELL auf dem dunklen Grund (Nils-Entscheidung: lesbare Karten); Status-/Impact-/
   Signalfarben (R13) darin unangetastet. Der ruhige „läuft stabil"-Leerzustand
   (--stable) bleibt hell. */
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) {
  background: var(--p-ai-grad);
  border: 1px solid color-mix(in srgb, var(--p-bviolet) 26%, transparent);
  box-shadow: 0 20px 44px -26px rgba(10, 8, 40, 0.7);
}
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__title { color: var(--p-stage-ink, #fff); }
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__sub,
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__skuy-label,
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__note {
  color: var(--p-stage-ink-muted, #A9B0D4);
}
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__say,
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__subhead {
  color: var(--p-stage-ink-soft, #E4E1FA);
}
/* Skuy-Avatar-Chip + KI-Badge + Prüf-Stempel transluzent-hell statt Violett-Tint
   (auf Navy sonst kaum sichtbar). */
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-skuy-avatar { background: rgba(255, 255, 255, 0.06); }
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__badge {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--p-stage-ink-accent, #C4B5FD);
}
.rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) .rw-ai-reco__stamp {
  background: rgba(255, 255, 255, 0.08);
  color: var(--p-stage-ink-muted, #A9B0D4);
}
/* Die „Offene Empfehlungen"-Fläche brauchte hier eigene Regeln, solange sie
   eine Link-Liste direkt auf der Bühne war. Seit Pfad 6 rendert sie dieselben
   Karten wie der Block darunter und erbt deren Bühnen-Regeln. */

/* ── S3 · ASIN-Drilldown: Identifier-KPI (ASIN-Code) im dunklen Kopf-Band ──
   Die ASIN-Detail-Ansicht hebt ihre KPI-Reihe in das dunkle --p-ai-grad-Band
   (top_kpis, view.html) — das Listing-SEO-Muster. Die ident-Karte (ASIN-Code)
   trägt NICHT die satte Anker-Füllung (R15c: Codes maximal lesbar): transluzente
   Karte, weißer Text. Das dunkle Band selbst ist der Seiten-Anker (R16), kein
   zweiter satter Violett-Block. Überschreibt .rw-top-kpi--hero (:~4044) bei
   hero+ident am selben Element (spätere Quelle). Kein Links-Balken. */
.rw-top-kpi--ident {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--p-r-card, 14px);
  box-shadow: none;
}

/* ── S3b · Das Band trägt jetzt volle KPI-Reihen (7 Karten) statt 3-5 ──
   Bis hierher kamen nur kuratierte Kopf-Reihen ins Band (ABC/BCG/Competitor je
   5, Benchmark 3). Die ASIN-Detail-Reihe bringt 7 Karten mit (ASIN, GMS, CVR,
   TACoS, Organic, Sessions, BSR). Die Band-Row ist flex OHNE wrap und
   .rw-top-section hat overflow:hidden — Flex-Items haben per Default
   min-width:auto, schrumpfen also NICHT unter ihre min-content-Breite. Ohne die
   folgenden zwei Zeilen laufen die hinteren Karten (BSR) unter dem Clip heraus,
   sobald die Summe der min-content-Breiten die Band-Breite übersteigt (bei
   1.85rem-Werten wie „€ 1.234.567" ab ~1280px Viewport realistisch).
   ``flex: 1 1 140px`` + wrap spiegelt exakt das Raster, das der helle Tab-Strip
   vorher hatte (.rw-kpis: auto-fit, minmax(140px, 1fr)) — passt alles in eine
   Reihe, ändert sich nichts; sonst bricht sauber um statt zu clippen. */
.rw-top-kpis { flex-wrap: wrap; }
.rw-top-kpi {
  flex: 1 1 140px;
  min-width: 0;
  container-type: inline-size; /* erlaubt fluide Werte via cqi, wie .rw-kpi (:147) */
}

/* Der Identifier-Wert (ASIN-Code) hatte im hellen Tab-Strip eine eigene
   Größen-Anpassung (sa-premium.css: clamp(0.85rem, 13cqi, 1.5rem) per
   Container-Query) — die ist auf ``.rw-kpis`` gescoped und greift im Band NICHT
   mehr. Ohne Ersatz rendert „B0CXYZ1234" dort mit den vollen 1.85rem und sprengt
   die Karte. Gleiche Kurve wie im Strip, damit lange Codes lesbar bleiben. */
.rw-top-kpi--ident .rw-top-kpi__value {
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: normal;
  overflow-wrap: anywhere;
}
@supports (container-type: inline-size) {
  .rw-top-kpi--ident .rw-top-kpi__value { font-size: clamp(0.95rem, 13cqi, 1.5rem); }
}

/* =====================================================================
   Suchplatz — Keyword-Positionen (ASIN-Detail, unter den KPI-Gruppen)
   SSR-Tabelle + Inline-SVG-Sparkline (kein JS). Farben aus dem
   Midnight-Analyst-Token-Set; Δ-Chip nutzt dieselbe Up/Down-Semantik wie
   die KPI-Karten (grün = Position verbessert, rot = verschlechtert).
   ========================================================================== */
.rw-searchpos { margin: 1.5rem 0 0.5rem; }
.rw-searchpos__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.rw-searchpos__title { margin: 0; font-size: 0.95rem; color: var(--p-ink, var(--ma-800, #1E293B)); }
.rw-searchpos__caption { color: var(--p-tm, var(--ma-500)); font-size: 0.75rem; }
.rw-searchpos__scroll { overflow-x: auto; }
.rw-searchpos__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rw-searchpos__table th {
  text-align: left;
  padding: 0.4rem 0.7rem;
  background: var(--ma-50);
  color: var(--ma-500);
  font-weight: 600;
  border-bottom: 1px solid var(--ma-border);
  white-space: nowrap;
}
.rw-searchpos__table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--ma-border);
  color: var(--ma-700, #3A3A5A);
}
.rw-searchpos__table tr:last-child td { border-bottom: none; }
.rw-searchpos__kw {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rw-searchpos__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-searchpos__delta { font-weight: 600; }
.rw-searchpos__delta--up { color: #1B7A4B; }
.rw-searchpos__delta--down { color: #C0392B; }
.rw-searchpos__delta--flat,
.rw-searchpos__delta--none { color: var(--ma-500); }
.rw-searchpos__spark { width: 130px; }
.rw-searchpos__sparksvg {
  display: block;
  width: 120px;
  height: 26px;
  color: var(--p-ch-1, #4338CA);
}
.rw-searchpos__nospark { color: var(--ma-500); }
.rw-searchpos__more { margin: 0.55rem 0 0; font-size: 0.75rem; color: var(--p-tm, var(--ma-500)); }
.rw-searchpos__empty {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  color: var(--ma-500);
  font-size: 0.85rem;
}
.rw-searchpos__empty-dash { font-size: 1.1rem; font-weight: 600; color: var(--ma-700, #3A3A5A); }
.rw-searchpos__empty-note { font-style: italic; }

/* =====================================================================
   Maße & Größenklasse — Maße-Wächter-Block im ASIN-Deepdive (S4, Spec §8)
   Reine SSR-Sektion unterhalb der KPI-Gruppen, im Muster der Suchplatz-
   Sektion darüber. Kein lila Links-Balken (R5) — Signal ausschließlich über
   das Status-Badge in der Verdikt-Zeile. Alle Zahlen tabular-nums (R6).
   ========================================================================== */
.rw-masse { margin: 1.5rem 0 0.5rem; }
.rw-masse__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.rw-masse__title { margin: 0; font-size: 0.95rem; color: var(--p-ink, var(--ma-800, #1E293B)); }
.rw-masse__caption { color: var(--p-tm, var(--ma-500)); font-size: 0.75rem; }
.rw-masse__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.rw-masse__verdict-text { font-size: 0.88rem; color: var(--ma-700, #3A3A5A); }
.rw-masse__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.rw-masse__kpi {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--ma-border);
  border-radius: 12px;
  background: var(--ma-50);
}
.rw-masse__kpi-label { font-size: 0.72rem; color: var(--ma-500); }
.rw-masse__kpi-value {
  font-size: 1rem;
  font-weight: 650;
  color: var(--p-ink, var(--ma-800, #1E293B));
  font-variant-numeric: tabular-nums;
}
.rw-masse__kpi-period { font-size: 0.68rem; color: var(--ma-500); font-variant-numeric: tabular-nums; }
.rw-masse__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rw-masse__table-caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.35rem;
  font-size: 0.72rem;
  color: var(--ma-500);
}
.rw-masse__table th {
  text-align: left;
  padding: 0.4rem 0.7rem;
  background: var(--ma-50);
  color: var(--ma-500);
  font-weight: 600;
  border-bottom: 1px solid var(--ma-border);
  white-space: nowrap;
}
.rw-masse__table td {
  padding: 0.4rem 0.7rem;
  border-bottom: 1px solid var(--ma-border);
  color: var(--ma-700, #3A3A5A);
}
.rw-masse__table tbody th {
  background: transparent;
  color: var(--ma-700, #3A3A5A);
  font-weight: 500;
  white-space: normal;
}
.rw-masse__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rw-masse__note { margin: 0.4rem 0 0; font-size: 0.73rem; color: var(--p-tm, var(--ma-500)); }
.rw-masse__subtitle { margin: 1.1rem 0 0.45rem; font-size: 0.85rem; color: var(--p-ink, var(--ma-800, #1E293B)); }
.rw-masse__skus { list-style: none; margin: 0.7rem 0 0; padding: 0; }
.rw-masse__sku {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--ma-border);
  font-size: 0.78rem;
  color: var(--ma-700, #3A3A5A);
}
.rw-masse__sku:last-child { border-bottom: none; }
.rw-masse__sku--gone { color: var(--ma-500); }
.rw-masse__sku-code { font-weight: 650; }
.rw-masse__sku-seen { margin-left: auto; color: var(--ma-500); font-variant-numeric: tabular-nums; }
.rw-masse__action { margin: 0.8rem 0 0; font-size: 0.86rem; }
.rw-masse__teaser {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--ma-700, #3A3A5A);
}

/* ============================================================================
   K3 — Reco-Deep-Dive (L2) + L1-Stretched-Link
   ----------------------------------------------------------------------------
   Namensraum .rd-*. Genau EINE dunkle Fläche (die Bühne, sie erbt
   .rw-verdict-header--stage — kein zweiter Navy-Verlauf hier, R16a/R11);
   alles darunter bleibt helle Arbeitsfläche (R3). Kein lila Links-Balken
   (R5/R15e). Signalfarben bleiben dem Verdikt-Badge vorbehalten (R13) — der
   Meter und die Status-Buttons sind bewusst violett bzw. neutral.
   ========================================================================== */

/* ── L1: Reco-Karte wird zur Adresse (Stretched-Link wie die Analysen-Wand) ──
   Der Link trägt echten Text; sein ::after spannt sich über die Karte. Damit
   die schon vorhandenen Interaktionen (ASIN-Links im Titel, Closed-Loop-
   Buttons, „Wie Skuy das sieht") klickbar bleiben, liegt das ::after auf
   z-index 0 und die echten Interaktionen werden auf z-index 1 gehoben —
   genau ein zusätzlicher Tab-Stopp pro Karte. */
.rw-ai-reco__item { position: relative; }
.rw-ai-reco__deep {
  display: inline-block;
  margin-top: 0.2rem;
  font-family: var(--ma-font);
  font-size: 0.76rem;
  font-weight: 650;
  color: var(--p-violet, #7C3AED);
  text-decoration: none;
}
.rw-ai-reco__deep:hover,
.rw-ai-reco__deep:focus-visible { text-decoration: underline; }
.rw-ai-reco__deep::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
}
.rw-ai-reco__item:hover { background: var(--ma-50, #F5F5F7); }
/* Echte Interaktionen über das Overlay heben (der Deep-Link selbst nicht — er
   IST das Overlay). */
.rw-ai-reco__text a:not(.rw-ai-reco__deep),
.rw-ai-reco__actions,
.rw-reco-detail { position: relative; z-index: 1; }

/* ── L2: Seitengerüst ── */
.rd { font-family: var(--ma-font); }
.rd-ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
}
.rd-ctx__back {
  font-weight: 650;
  color: var(--p-violet, #7C3AED);
  text-decoration: none;
}
.rd-ctx__back:hover { text-decoration: underline; }
.rd-ctx__addr { color: var(--ma-400, #64748B); }

/* Bühne: erbt Fläche/Glow von .rw-verdict-header--stage, ergänzt nur Kicker,
   Titelgröße und die Kennzahl-Chips darunter. */
.rd-stage__kicker { margin: 0 0 0.35rem; }
/* Impact-Chip auf der Bühne: gleiche Pille wie auf der Analyse-Karte
   (rw-ai-reco__impact), gleicher Kontrast-Fix wie im Night-Briefing
   (sa-app.css .nb-card--stage) — Mittel/Niedrig sonst dunkel-auf-dunkel.
   --hoch bleibt aussen vor: satte Violett-Füllung mit weißem Text braucht
   keinen Override. */
.rd-stage .rw-ai-reco__impact:not(.rw-ai-reco__impact--hoch) { color: #DDD6FE; }
.rd-stage__h1 {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.rd-stage__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.85rem 0 0;
}
.rd-pchip {
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--p-stage-ink-soft, #E4E1FA);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.rd-pchip i { font-style: normal; color: var(--p-stage-ink-muted, #A9B0D4); }
.rd-pchip--warn { border-color: rgba(196, 181, 253, 0.45); }

.rd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.1rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .rd-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Beweisketten-Spine: nummerierte Stationen mit durchgehender Linie ── */
/* Zwei-Spalten-Grid statt absoluter Positionierung: Station-Nummer links,
   Karte rechts, Zeile für Zeile per Auto-Placement — die Spine bleibt auch
   dann bündig, wenn eine Station (z. B. der Verlauf) mangels Daten entfällt. */
.rd-chain {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: 0.7rem;
  row-gap: 1rem;
  align-items: start;
}
.rd-chain::before {
  content: "";
  position: absolute;
  left: calc(0.875rem - 1px);
  top: 1.75rem;
  bottom: 1.5rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.35), rgba(124, 58, 237, 0.08));
}
.rd-node {
  position: relative;
  grid-column: 1;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--p-violet, #7C3AED);
  color: var(--p-violet, #7C3AED);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rd-node--act { border-color: var(--ma-700, #3A3A5A); color: var(--ma-700, #3A3A5A); }
.rd-chain > .rd-card { grid-column: 2; }

.rd-card {
  padding: 0.95rem 1.05rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--ma-border, #E5E7EB);
  box-shadow: 0 10px 26px -22px rgba(15, 23, 42, 0.5);
}
.rd-card--tint { background: var(--p-tint-10, #F5F3FF); }
.rd-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.rd-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--ma-900, #1E293B);
}
.rd-card__period {
  font-size: 0.73rem;
  color: var(--ma-400, #64748B);
  font-variant-numeric: tabular-nums;
}
.rd-card__sub {
  margin: 0.45rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ma-700, #3A3A5A);
}
.rd-role {
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: var(--p-tint-10, #F5F3FF);
  color: var(--p-violet, #7C3AED);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rd-role--act { background: var(--ma-50, #F5F5F7); color: var(--ma-700, #3A3A5A); }

/* ── Beweis-Tabelle ── */
.rd-evtab {
  width: 100%;
  margin-top: 0.7rem;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.rd-evtab th {
  padding: 0.35rem 0.5rem;
  background: var(--p-tint-10, #F5F3FF);
  color: var(--ma-700, #3A3A5A);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.rd-evtab td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid var(--ma-border, #E5E7EB);
  vertical-align: top;
  color: var(--ma-700, #3A3A5A);
}
.rd-evtab tbody tr:last-child td { border-bottom: none; }
.rd-evtab .rd-n { text-align: right; }
.rd-evtab th.rd-n { text-align: right; }
.rd-ev__metric { display: block; font-weight: 650; color: var(--ma-900, #1E293B); }
.rd-ev__sev {
  margin-right: 0.3rem;
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--ma-400, #64748B);
  text-transform: uppercase;
}
.rd-ev__asin { font-size: 0.72rem; color: var(--ma-400, #64748B); }
.rd-ev__asin a { color: var(--p-violet, #7C3AED); }
.rd-v { font-weight: 700; color: var(--ma-900, #1E293B); font-variant-numeric: tabular-nums; }
.rd-v--miss { color: var(--ma-400, #64748B); font-weight: 500; }
/* Violett-Meter statt Signalrot (R13/R17f): Balken = Ist, Marke = Vergleich. */
.rd-meter {
  position: relative;
  display: block;
  width: 100%;
  max-width: 118px;
  height: 5px;
  margin: 0.28rem 0 0 auto;
  border-radius: 999px;
  background: var(--ma-200, #E2E8F0);
  overflow: visible;
}
.rd-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--rd-v, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, #A78BFA, #7C3AED);
}
.rd-meter__tgt {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--ma-700, #3A3A5A);
}
.rd-legend {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
  font-size: 0.72rem;
  color: var(--ma-400, #64748B);
}
.rd-legend__meter {
  display: inline-block;
  width: 26px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #A78BFA, #7C3AED);
}

/* ── Verlauf (R17) ── */
.rd-chart { margin-top: 0.7rem; }
.rd-chart svg { display: block; width: 100%; height: 190px; }
.rd-chart__axis {
  display: flex;
  justify-content: space-between;
  margin: 0.2rem 0 0;
  font-size: 0.68rem;
  color: #64748B; /* R17d: AA-geprüft auf hell */
  font-variant-numeric: tabular-nums;
}
.rd-chart__say {
  margin: 0.6rem 0 0;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ma-900, #1E293B);
}
.rd-chart__chip {
  display: inline-block;
  margin: 0.4rem 0 0;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  background: var(--p-tint-10, #F5F3FF);
  color: var(--p-violet, #7C3AED);
  font-size: 0.74rem;
  font-weight: 650;
}
.rd-chart__src { margin: 0.45rem 0 0; font-size: 0.7rem; color: var(--ma-400, #64748B); }

/* ── Handlung ── */
.rd-pre {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: var(--ma-50, #F5F5F7);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ma-700, #3A3A5A);
}
.rd-flow { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.rd-step {
  display: flex;
  gap: 0.65rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ma-border, #E5E7EB);
}
.rd-step:last-child { border-bottom: none; }
.rd-step__n {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--p-tint-10, #F5F3FF);
  color: var(--p-violet, #7C3AED);
  font-size: 0.72rem;
  font-weight: 800;
}
.rd-step__t { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--ma-900, #1E293B); }
.rd-step__warn {
  margin-right: 0.35rem;
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--ma-negative, #9B2C4A);
}
.rd-target,
.rd-where {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  color: var(--ma-700, #3A3A5A);
}
.rd-where a { color: var(--p-violet, #7C3AED); }

/* ── Rail ── */
.rd-rail { display: flex; flex-direction: column; gap: 1rem; }
.rd-rail__note {
  margin: 0.55rem 0 0;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ma-400, #64748B);
}
.rd-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  margin-top: 0.6rem;
}
.rd-st-btn {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.35rem;
  border-radius: 9px;
  border: 1px solid var(--ma-border, #E5E7EB);
  background: #fff;
  font-family: var(--ma-font);
  font-size: 0.74rem;
  font-weight: 650;
  color: var(--ma-700, #3A3A5A);
  text-align: left;
}
.rd-st-btn:hover { border-color: var(--p-violet, #7C3AED); color: var(--p-violet, #7C3AED); }
.rd-st-btn:disabled { opacity: 0.55; cursor: progress; }
.rd-st-btn small { font-size: 0.64rem; font-weight: 500; color: var(--ma-400, #64748B); }
.rd-status-live { margin-top: 0.5rem; }
.rd-status-open {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--ma-700, #3A3A5A);
}
.rd-status-open__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--p-violet, #7C3AED);
}
.rd-imp__val {
  margin: 0.5rem 0 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ma-900, #1E293B);
  font-variant-numeric: tabular-nums;
}
.rd-u { margin-left: 0.25rem; font-size: 0.8rem; font-weight: 650; color: var(--ma-400, #64748B); }
.rd-imp__basis { font-size: 0.72rem; color: var(--ma-400, #64748B); }
.rd-imp__list {
  margin: 0.55rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--ma-700, #3A3A5A);
}
.rd-imp__split {
  margin: 0.6rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--ma-border, #E5E7EB);
  font-size: 0.76rem;
  color: var(--ma-700, #3A3A5A);
}
.rd-why__rule {
  margin: 0.55rem 0 0;
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  background: var(--p-tint-10, #F5F3FF);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--ma-700, #3A3A5A);
}
.rd-why__tag {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-violet, #7C3AED);
}
/* „Warum jetzt"-Regel (K3/S6): der Setzkasten aus dem Mockup — WENN/DANN
   untereinander, Mono für die Bedingung, damit Metrik/Operator/Schwelle als
   Regel lesbar sind und nicht als Fließtext. Keine Signalfarbe (R13). */
.rd-rule {
  position: relative;
  margin-top: 0.75rem;
  padding: 0.7rem 0.8rem 0.68rem;
  border: 1px solid var(--p-surf-violet-bd, #DDD6FE);
  border-radius: 10px;
  background: #FFFFFF;
}
.rd-rule__tag {
  position: absolute;
  top: -8px;
  right: 10px;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--p-surf-violet-bd, #DDD6FE);
  border-radius: 5px;
  background: var(--p-surf-violet-2, #EDE9FE);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--p-cpurple, #6D28D9);
}
.rd-rule__line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 0.5rem;
  margin: 0;
  font-family: var(--ma-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.775rem;
  line-height: 1.7;
  color: #1E1B4B;
}
.rd-rule__line b { font-weight: 600; color: var(--p-cpurple, #6D28D9); }
.rd-rule__src {
  display: block;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--ma-border, #E5E7EB);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ma-700, #3A3A5A);
}
.rd-rule__src code {
  font-family: var(--ma-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.94em;
  color: var(--p-cpurple, #6D28D9);
}

.rd-l3 { display: flex; flex-direction: column; margin-top: 0.5rem; }
.rd-l3__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--ma-border, #E5E7EB);
  text-decoration: none;
  color: inherit;
}
.rd-l3__item:last-child { border-bottom: none; }
.rd-l3__item:hover .rd-l3__t { color: var(--p-violet, #7C3AED); }
.rd-l3__b { flex: 1; min-width: 0; }
.rd-l3__t { display: block; font-size: 0.8rem; font-weight: 650; color: var(--ma-900, #1E293B); }
.rd-l3__d { display: block; font-size: 0.7rem; color: var(--ma-400, #64748B); }
.rd-l3__arr { flex: none; color: var(--ma-400, #64748B); }

.rd-basis {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ma-400, #64748B);
}

/* ── Ablöse-Zustand (HTTP 404 mit Erklärung) ── */
.rd-gone { max-width: 640px; margin: 2rem auto; text-align: center; }
.rd-gone__h1 { margin: 0; font-size: 1.15rem; font-weight: 750; color: var(--ma-900, #1E293B); }
.rd-gone__text { margin: 0.7rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--ma-700, #3A3A5A); }
.rd-gone__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
}
.rd-gone__cta {
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--p-anchor-grad, linear-gradient(135deg, #6D28D9, #7C3AED));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 650;
  text-decoration: none;
}
.rd-gone__link { font-size: 0.8rem; color: var(--p-violet, #7C3AED); align-self: center; }

/* =====================================================================
   Zeitverlauf IN der KPI-Karte (Inline-SVG-Sparkline, SSR)
   ---------------------------------------------------------------------
   Eine Kennzahl als nackte Zahl sagt nicht, ob sie steigt, fällt oder steht.
   Ein eigener Chart je Kennzahl geht nicht (Bauplan B4: max. 8 Chart-Karten
   je Analyse) — also trägt die Karte ihren Verlauf selbst. Raster und Bauweise
   identisch zur Suchplatz-Sparkline oben (.rw-searchpos__sparksvg): 120x26,
   <polyline>, kein JS, Farbe über currentColor.

   Farbe = kanonisches Fokus-Violett (R17a), NIE eine Ampelfarbe: die Richtung
   einer Kurve ist keine Statusaussage (R5/R13/R19d). Kontrast der Linie auf
   Weiss 6,4:1, auf der Nacht-Bühne (Lavendel) 7,6:1 — beides über den 3:1 für
   grafische Elemente (R8).

   Zeitraum-Pflicht (R6): unter jeder Linie steht der Datums-Range GENAU DER
   Monate, die in ihr stecken — nicht der der Karte darüber.
   ========================================================================== */
.rw-kpi__spark {
  display: block;
  margin-top: 0.15rem;
}
.rw-kpi__sparksvg {
  display: block;
  width: 100%;
  max-width: 130px;
  height: 26px;
  color: var(--p-violet, #7C3AED);
}
.rw-kpi__spark-period,
.rw-kpi__spark-note {
  display: block;
  font-family: var(--ma-font);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--p-tm, #64748B);
  font-variant-numeric: tabular-nums;
}
/* Der ehrliche Ersatz für eine Linie, die es nicht geben kann (nicht gemessen
   ist keine 0). Kursiv, damit sie sich von einer echten Zeitraum-Caption
   unterscheidet. */
.rw-kpi__spark-note { font-style: italic; }

/* Auf dem Hero-/Ident-Wash (violet-50) dieselbe Anhebung wie Hint/Period:
   --p-tm fällt dort unter 4.5:1 (R8). */
.rw-kpis .rw-kpi--hero .rw-kpi__spark-period,
.rw-kpis .rw-kpi--hero .rw-kpi__spark-note,
.rw-kpis .rw-kpi--ident .rw-kpi__spark-period,
.rw-kpis .rw-kpi--ident .rw-kpi__spark-note {
  color: var(--p-ts);
}

/* Kopf-KPIs liegen auf der dunklen Bühne (R16): Violett #7C3AED erreicht auf
   Navy nur ~2,4:1 — dort trägt die Linie Lavendel, wie die aufgehellte
   Anker-Variante der Bühne (R16b). */
.rw-top-kpi .rw-kpi__sparksvg { color: var(--p-lav, #A78BFA); }
.rw-top-kpi .rw-kpi__spark-period,
.rw-top-kpi .rw-kpi__spark-note { color: #aab1e8; }
/* Auf dem satten Anker-Gradient (--p-anchor-grad) ist Lavendel wieder zu nah
   am Grund → Weiss, Captions auf derselben Deckkraft wie Hint/Period. */
.rw-top-kpi--hero .rw-kpi__sparksvg { color: rgba(255, 255, 255, 0.92); }
.rw-top-kpi--hero .rw-kpi__spark-period,
.rw-top-kpi--hero .rw-kpi__spark-note { color: rgba(255, 255, 255, 0.92); }

/* =====================================================================
   Analysen zu dieser ASIN — Multi-Layer-Hub-Karten (nur ASIN-Detailseite).
   Farben laufen über die Prism-Tokens (R22: keine Hex-Literale), nicht mehr
   über die Hex-Werte des Ursprungs-Slices vom 2026-07-10.
   ========================================================================== */
.rw-asin-analyses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.rw-asin-analyses__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--c-divider);
  background: var(--c-paper-raised);
  color: var(--ma-text, var(--c-ink));
  font-family: var(--ma-font);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rw-asin-analyses__card:hover {
  border-color: var(--c-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--c-accent-strong) 55%, transparent);
}
.rw-asin-analyses__go {
  color: var(--c-accent-strong);
  font-weight: 700;
  font-size: 1rem;
}

/* Deep-Link-Ziel: die fixierte .p-topbar (48px + 22px Abstand) darf die Zeile
   nicht verdecken. Greift für die Fragment-Navigation des Browsers (die den
   Anker sonst bündig auf top:0 setzt) genauso wie für unseren eigenen Sprung
   in reports-web.js. */
tr[id^="asin-"] { scroll-margin-top: 140px; }

/* Zweites Deep-Link-Ziel derselben Seite, gleicher Grund: der Sprung-Anker auf
   den Empfehlungs-Block. Ohne Versatz setzt die Fragment-Navigation die
   Ueberschrift buendig auf top:0 und damit unter die fixierte .p-topbar -- der
   Nutzer landet auf dem Block ohne seinen Kopf (Klicktest Runde 4, R4-27).

   Der Freiraum kommt aus dem Shell-Token (``--p-topbar-clear``, sa-prism.css)
   statt aus einer zweiten Pixelzahl (R11), damit die Kompaktstufe <=760px
   automatisch mitwirkt; die aelteren 140px der ASIN-Zeile bleiben unangetastet.
   Scroll-Weg erfindet der Versatz nicht: der Block steht am Seitenende, auf
   hohen Fenstern kappt der Browser den Sprung weiter am Dokumentende. */
#rw-ai-reco-title { scroll-margin-top: var(--p-topbar-clear, 92px); }

/* Ziel-Zeile nach Deep-Link kurz hervorheben */
tr.rw-row--flash > td { animation: rwRowFlash 2.2s ease-out 1; }
@keyframes rwRowFlash {
  0%, 15% { background: color-mix(in srgb, var(--c-accent-strong) 16%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-asin-analyses__card { transition: none; }
  .rw-asin-analyses__card:hover { transform: none; }
  tr.rw-row--flash > td { animation: none; }
}


/* Ein-Klick (B1 §11). Eine BASIS-Komponente, kein Reskin-Bauteil: die Zelle
   rendert fuer jeden Nutzer, mit Flag und ohne. Deshalb steht sie VOR dem
   Reskin-Abschnitt -- dort gehoerte jede Regel an `.p-reskin` gebunden, und
   ein Knopf, der ohne Flag unformatiert erscheint, waere kein Rollout-Schutz,
   sondern ein halbes Bauteil.

   Ohne eigene `font-size`: die Zelle erbt die Tabellenschrift, und eine eigene
   Groesse waere eine neue bewachte Stelle fuer die Schriftuntergrenze.
   Ausschliesslich Tokens, keine rohen Farbwerte: eine Farbe steht genau einmal,
   sonst zieht sie beim naechsten Ton-Wechsel nicht mit. */
.rw-ein-klick {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

/* #2786 Schritt 3: Checkbox und Knopf nebeneinander, derselbe Rahmen wie der
   Rest der Zelle -- keine eigene Schriftgroesse, keine rohe Farbe. */
.rw-ein-klick__aktion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* #3890: der Bestaetigungsschritt vor „Exact dazu". Untereinander, derselbe Rahmen
   wie die Zelle: keine eigene Schriftgroesse, keine rohe Farbe. */
.rw-ein-klick__dialog {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.rw-ein-klick__negativ-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ma-500);
  cursor: pointer;
}

.rw-ein-klick__go,
.rw-ein-klick__undo {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
}

.rw-ein-klick__go {
  background: var(--ma-900);
  border: 1px solid var(--ma-900);
  color: var(--ma-50);
}

.rw-ein-klick__undo {
  background: transparent;
  border: 1px solid var(--ma-border);
  color: var(--ma-900);
}

.rw-ein-klick__go:disabled,
.rw-ein-klick__undo:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rw-ein-klick__wait {
  color: var(--ma-500);
}

/* Grund und Klartext stehen untereinander, beide im Klartext. Die Farbe ordnet
   ein, sie ersetzt den Text nicht: eine Sammelmeldung waere der stille dritte
   Ausgang. */
.rw-ein-klick__detail {
  color: var(--ma-500);
}

.rw-ein-klick__done--wirkt {
  color: var(--c-moss);
}

/* "Offen" ist KEINE Warnung, sondern fehlendes Wissen: der PUT kann gewirkt
   haben. Gedaempft statt alarmfarben -- eine Warnfarbe behauptete, es sei etwas
   schiefgegangen. */
.rw-ein-klick__done--offen {
  color: var(--ma-500);
}

/* "Ungeklaert" (#4150): aufgegebene Nachklaerung. Aus demselben Grund gedaempft
   wie "offen", aber ohne Knopf: es wird nicht weiter nachgefragt. */
.rw-ein-klick__done--ungeklaert {
  color: var(--ma-500);
}

.rw-ein-klick__done--abgelehnt {
  color: var(--ma-negative);
}


/* Ziel und Maximum eines Exact-Keywords (Spec 9, PR 3b-5). Wie der Ein-Klick
   eine BASIS-Komponente: die Zelle rendert fuer jeden Nutzer mit dem Feature,
   mit Reskin-Flag und ohne. Deshalb steht sie VOR dem Reskin-Abschnitt.

   Ohne eigene ``font-size``: die Zelle erbt die Tabellenschrift. Ausschliesslich
   Tokens, keine rohen Farbwerte. Kein Links-Balken und kein ``::before``-Streifen
   (DESIGN.md R5/R15e) -- die Zelle ist ein Bedienelement, keine Betonung. */
.rw-target {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.rw-target__fields {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Das Wort steht AM Feld, nicht nur im Spaltenkopf: „Ziel / Max" nennt zwei
   Zahlen, und ohne Beschriftung muesste man raten, welches Feld welche ist.
   Es ist zugleich der zugaengliche Name des Eingabefeldes (R8) -- deshalb ein
   ``label`` um beides und kein danebenstehender Text. */
.rw-target__field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rw-target__tag {
  color: var(--ma-500);
  font-size: 0.75rem;
}

.rw-target__input {
  width: 4.5rem;
  padding: 2px 6px;
  border: 1px solid var(--ma-border);
  border-radius: 4px;
  background: var(--c-paper-raised);
  color: var(--ma-900);
  text-align: right;
  font-family: inherit;
  line-height: inherit;
  /* Die Groesse steht als LITERAL und nicht als ``inherit``, und die Kurzform
     ``font`` ist ganz raus: der Schriftgroessen-Riegel
     (``core/tests/test_css_min_font_size.py``) rechnet jede Groessen-Angabe in
     Pixel um, und was er nicht nachrechnen kann, zaehlt er als neue Stelle
     unter der Grenze. Der Wert ist derselbe, den ``.rw-table`` setzt, damit das
     Eingabefeld so gross bleibt wie die Zelle um es herum. Wer ihn dort
     aendert, aendert ihn hier mit. */
  font-size: 0.82rem;
  /* Formularfelder erben die Tabellenschrift nicht vollstaendig: die Browser
     setzen an ihnen eine eigene ``font``-Kurzform, und die stellt
     ``font-variant`` auf ``normal``. Ohne diese Zeile wanderten die Ziffern
     beim Tippen. */
  font-variant-numeric: tabular-nums;
}

.rw-target__input:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 1px;
}

.rw-target__save {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--ma-900);
  border: 1px solid var(--ma-900);
  color: var(--ma-50);
}

.rw-target__save:disabled,
.rw-target__input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Der Fehlertext ist der Satz des Dienstes, nicht eine Farbe statt eines
   Satzes: die Signalfarbe ordnet ein, sie ersetzt nichts (R5/R8). */
.rw-target__error {
  color: var(--ma-negative);
  text-align: right;
}

/* #3901: der Weg zum Kauf, wenn der Monatspreis der Regel am Guthaben scheitert. */
.rw-target__kauf {
  font-size: 0.75rem;
  text-align: right;
}

/* #3902: warum Ziel und Maximum hier nicht gespeichert werden koennen (die
   Zielpositions-Regel ist fuer dieses Konto noch nicht freigeschaltet). Der Satz
   steht neben den gesperrten Feldern, wie `.rw-gebot__gesperrt` neben dem
   fehlenden Gebotsknopf: gesperrt ohne Grund waere eine Sackgasse. */
.rw-target__gesperrt {
  color: var(--ma-500);
  font-size: 0.75rem;
  text-align: right;
}

.rw-target__read {
  white-space: nowrap;
}

.rw-target__sep {
  color: var(--ma-400);
  padding: 0 0.25rem;
}


/* Der Handgriff „Gebot aendern" (#3894). Er steht in DERSELBEN Zelle wie
   ``.rw-target`` und ist deshalb bewusst dessen Geschwister und keine eigene
   Formensprache: gleiche Abstaende, gleicher Feldschnitt, gleicher Knopf. Zwei
   Bedienelemente nebeneinander, die verschieden aussehen, lesen sich als zwei
   verschiedene Sachen, und hier ist es zweimal „an dieser Zeile etwas aendern".

   Wie ``.rw-target`` eine BASIS-Komponente: die Zelle rendert fuer jeden Nutzer
   mit dem Feature, mit Reskin-Flag und ohne. Deshalb steht sie VOR dem
   Reskin-Abschnitt und liest nur Bestands-Tokens (``--ma-*``, ``--c-*``),
   keine ``--v8-*``/``--sp-*``, die es nur unter ``.p-reskin`` gibt.

   Kein Links-Balken und kein ``::before``-Streifen (DESIGN.md R5/R15e): die
   Zelle ist ein Bedienelement, keine Betonung. */
.rw-gebot {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

/* Der geschlossene Zustand ist ein ruhiger Knopf und nicht der Speichern-Knopf
   daneben: dieser hier kostet einen Credit und schreibt zu Amazon, der andere
   speichert lokal. Gleiche Form, andere Fuellung, damit der teurere nicht
   versehentlich der bequemere ist. */
.rw-gebot__oeffnen {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-border);
  color: var(--ma-900);
}

.rw-gebot__dialog {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.rw-gebot__feld {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rw-gebot__tag {
  color: var(--ma-500);
  font-size: 0.75rem;
}

.rw-gebot__input {
  width: 4.5rem;
  padding: 2px 6px;
  border: 1px solid var(--ma-border);
  border-radius: 4px;
  background: var(--c-paper-raised);
  color: var(--ma-900);
  text-align: right;
  font-family: inherit;
  line-height: inherit;
  /* Groesse als LITERAL und keine ``font``-Kurzform, aus demselben Grund wie an
     ``.rw-target__input``: der Schriftgroessen-Riegel
     (``core/tests/test_css_min_font_size.py``) rechnet jede Angabe in Pixel um,
     und was er nicht nachrechnen kann, zaehlt er als Stelle unter der Grenze.
     Derselbe Wert wie dort, damit die beiden Felder in einer Zelle gleich gross
     sind. */
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.rw-gebot__input:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 1px;
}

.rw-gebot__vorschau {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--c-paper-raised);
  border: 1px solid var(--ma-border);
  color: var(--ma-900);
}

/* Die bestaetigte Vorschau: Zahlen und Knopf gehoeren zusammen und duerfen
   nicht umbrechen, sonst stuende „Uebernehmen" unter einer fremden Zeile. */
.rw-gebot__bestaetigen {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rw-gebot__zahlen {
  color: var(--ma-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Der einzige gefuellte Knopf des Bausteins, und genau er loest den Write und
   die Buchung aus. Die Fuellung ist die Auskunft „ab hier kostet es etwas". */
.rw-gebot__uebernehmen {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  font-weight: 600;
  background: var(--ma-900);
  border: 1px solid var(--ma-900);
  color: var(--ma-50);
}

.rw-gebot__schliessen {
  cursor: pointer;
  border-radius: 4px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ma-500);
  text-decoration: underline;
}

.rw-gebot__oeffnen:disabled,
.rw-gebot__vorschau:disabled,
.rw-gebot__uebernehmen:disabled,
.rw-gebot__schliessen:disabled,
.rw-gebot__input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Hinweis und Erfolg tragen den Satz des Dienstes; die Farbe ordnet ein, sie
   ersetzt nichts (R5/R8). Beide brechen um: der laengste Satz („Verbindung
   abgebrochen. Wir wissen nicht, ob es geaendert wurde.") passt in keine
   Tabellenspalte, und abgeschnitten waere er genau dann unlesbar, wenn er
   gebraucht wird. */
.rw-gebot__hinweis {
  color: var(--ma-negative);
  text-align: right;
}

.rw-gebot__erledigt {
  color: var(--ma-500);
  text-align: right;
}

/* Der Grund, warum es hier keinen Knopf gibt (Autopilot steuert die Kampagne
   oder die Zeile ist nicht adressierbar). Er steht STATT des Knopfs: ein
   ausgegrauter Knopf ohne Grund waere eine Sackgasse. */
.rw-gebot__gesperrt {
  color: var(--ma-500);
  text-align: right;
}

/* Kannibalisierung: Paar-Karten (Stufe 1, 12.09.2026). Eine BASIS-Komponente,
   kein Reskin-Bauteil: die Karten rendern fuer jeden Nutzer, mit Flag und
   ohne. Deshalb stehen sie wie `.rw-ein-klick` VOR dem Reskin-Abschnitt und
   lesen nur Bestands-Tokens (`--c-*`, `--radius-*`, `--ma-*`), keine
   `--v8-*`/`--sp-*`, die es nur unter `.p-reskin` gibt. */
.rw-pair-notice {
  margin: 0 0 12px;
  color: var(--ma-400, var(--c-slate));
  font-size: 0.8125rem;
}

.rw-pairs__title {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 4px 0 10px;
}

.rw-pairs__sub {
  font-weight: 400;
  color: var(--ma-400, var(--c-slate));
  font-size: 0.8125rem;
  margin-left: 8px;
}

.rw-pair {
  background: var(--c-paper-raised);
  border: 1px solid var(--c-divider);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  margin: 0 0 14px;
}

.rw-pair__names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.rw-pair__arrow {
  color: var(--ma-400, var(--c-slate));
}

.rw-pair__sub {
  margin: 4px 0 0;
  font-size: 0.8125rem;
  color: var(--ma-400, var(--c-slate));
}

.rw-pair__grund {
  margin-left: 6px;
}

.rw-pair__plain {
  background: var(--c-bone);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin: 12px 0;
}

.rw-pair__plain-label {
  display: block;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ma-400, var(--c-slate));
  margin-bottom: 4px;
}

.rw-pair__plain-satz {
  margin: 0 0 2px;
  font-size: 0.875rem;
}

.rw-pair__nums {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0 0 10px;
}

.rw-pair__num dt {
  font-size: 0.75rem;
  color: var(--ma-400, var(--c-slate));
}

.rw-pair__num dd {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.rw-pair__num--small dd {
  font-size: 0.875rem;
  font-weight: 500;
}

.rw-pair__num--pos dd {
  color: var(--c-moss);
}

.rw-pair__num--neg dd {
  color: var(--c-bordeaux);
}

.rw-pair__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0 0 8px;
}

.rw-pair__chip {
  border: 1px solid var(--c-divider);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  font-size: 0.78125rem;
}

.rw-pair__checks {
  font-size: 0.78125rem;
  color: var(--ma-400, var(--c-slate));
  margin: 0 0 10px;
}

.rw-pair__check {
  margin-left: 6px;
}

.rw-pair__check--ok::before {
  content: "\2713\00a0";
}

.rw-pair__check--flag::before {
  content: "!\00a0";
  color: var(--c-bordeaux);
}

.rw-pair__check--offen::before {
  content: "?\00a0";
}

.rw-pair__saison {
  margin-left: 10px;
}

.rw-pair__actions {
  margin: 0 0 8px;
  padding-left: 20px;
}

.rw-pair__action {
  margin: 0 0 4px;
  font-size: 0.875rem;
}

.rw-pair__action--primary {
  font-weight: 600;
}

.rw-pair__caveat {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ma-400, var(--c-slate));
}

.rw-pair__rules {
  margin-left: 8px;
  opacity: 0.7;
}

/* Monatswerte einer Paar-Karte (Spec 6.1 Punkt 3): aufklappbar, serverseitig. */
.rw-pair__monate {
  margin: 10px 0 0;
  font-size: 0.78125rem;
}

.rw-pair__monate > summary {
  cursor: pointer;
  color: var(--ma-400, var(--c-slate));
}

.rw-pair__table-wrap {
  overflow-x: auto;
}

.rw-pair__table {
  border-collapse: collapse;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.rw-pair__table caption {
  caption-side: top;
  text-align: left;
  color: var(--ma-400, var(--c-slate));
  padding-bottom: 4px;
}

.rw-pair__table th,
.rw-pair__table td {
  padding: 3px 10px;
  text-align: left;
  border-bottom: 1px solid var(--c-divider);
  white-space: nowrap;
}

.rw-pair__table .rw-pair__betrag {
  text-align: right;
}

.rw-pair__monat-zeile--nicht-gezahlt td {
  color: var(--ma-400, var(--c-slate));
}

/* ── Sammelaktion „Auswählen und pausieren" (#4029) ───────────────────────
 *
 * Die Leiste steht zwischen Filter-Chips und Tabelle: sie arbeitet auf der
 * gefilterten Auswahl, und der Chip „Aufräumen (N)" ist der Weg zu ihr.
 *
 * Keine Schrift unter 11px: `.72rem` sind 11.52px bei 16px-Wurzel, und das ist
 * die Untergrenze, die für die ganze Anwendung gilt. */
.rw-sammel {
  margin: .75rem 0 .5rem;
}

.rw-sammel__leiste {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.rw-sammel__zahl {
  font-size: .85rem;
  font-weight: 650;
  color: var(--p-tp, var(--ma-800));
}

.rw-sammel__preis {
  font-size: .78rem;
  color: var(--p-tm, var(--ma-400));
}

.rw-sammel__knopf {
  background: var(--p-grad-violet);
  color: #fff;
  border: 1px solid var(--p-violet);
  border-radius: 999px;
  padding: .35rem .95rem;
  font-size: .85rem;
  font-family: var(--ma-font);
  cursor: pointer;
}

/* Ein gesperrter Knopf sieht auch gesperrt aus. Ein Klick, der still nichts
 * tut, ist der schlechteste der möglichen Ausgänge. */
.rw-sammel__knopf:disabled {
  background: none;
  background-color: var(--ma-border);
  border-color: var(--ma-border);
  color: var(--p-tm, var(--ma-400));
  cursor: not-allowed;
}

.rw-sammel__abbruch {
  background: transparent;
  border: 1px solid var(--ma-border);
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .82rem;
  font-family: var(--ma-font);
  cursor: pointer;
}

.rw-sammel__dialog {
  margin-top: .75rem;
  padding: .85rem 1rem;
  border: 1px solid var(--ma-border);
  border-radius: .6rem;
  background: var(--ma-surface, #fff);
}

.rw-sammel__frage {
  margin: 0 0 .5rem;
  font-weight: 650;
  font-size: .92rem;
}

.rw-sammel__liste {
  margin: 0 0 .5rem;
  padding-left: 1.1rem;
  font-size: .82rem;
  max-height: 12rem;
  overflow-y: auto;
}

.rw-sammel__hinweis,
.rw-sammel__mangel,
.rw-sammel__meldung {
  margin: .35rem 0;
  font-size: .82rem;
}

.rw-sammel__mangel {
  color: var(--ma-negative, #c45b6e);
}

.rw-sammel__knoepfe {
  display: flex;
  gap: .5rem;
  margin-top: .65rem;
}

.rw-sammel__undo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .5rem;
  font-size: .82rem;
}

/* Der Haken in der Keyword-Zelle: er steht vor dem Wort, das er wählt. */
.rw-sammel-zelle {
  flex-direction: row;
  align-items: flex-start;
  gap: .5rem;
}

.rw-sammel-zelle .rw-two-line__texte {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rw-sammel-haken {
  margin-top: .2rem;
  flex: 0 0 auto;
}

.rw-sammel-all {
  margin-right: .4rem;
}

/* Der Grund, aus dem eine Zeile keinen Haken hat, steht an der Zeile. Er ist
 * kein Fehler, also trägt er keine Warnfarbe, sondern die der Nebenzeile. */
.rw-sammel-gesperrt {
  font-style: italic;
}

/* ============================================================================
   ANALYSEN-RESKIN v8 — Slice R1: Token-Ebene + Flaechen-Skin
   ----------------------------------------------------------------------------
   Owner-Entscheidung Nils, 08.08.2026 ("Analysen-Reskin", Spec-Runde 3).
   Flag: ``SQ_REPORTS_RESKIN`` (Default AUS, config/settings/base.py). Der View
   haengt bei aktivem Flag die Body-Klasse ``p-reskin`` an
   (reports/web/view.html), sonst steht sie nicht im Markup und KEINE einzige
   Regel dieses Blocks greift: ohne Flag rendert die Analyse-Seite
   zeichengleich wie vorher.

   Warum eine eigene Token-Ebene statt Umfaerben der Bestands-Tokens: die
   ``--p-*``/``--ma-*``-Tokens liegen in sa-prism.css und tragen ausser den
   Analysen auch Dashboard, Katalog, CDQ und Listing-Lab. Ein Reskin, der
   dort einsetzt, faerbt das halbe Produkt mit. Die ``--v8-*``-Ebene wird
   deshalb NUR unter ``.p-reskin`` definiert und NUR hier konsumiert (S2:
   additiv vor destruktiv, kein Bestandswert geaendert).

   Dieser Slice traegt das Fundament: Flaechen, Radius, Schatten, Abstands-
   Skala, Tabellenkopf, Pillen, Fokus-Ringe, Buehnen-Ton. Chart-Skin
   (Serienfarben, Endpunkte, Grid) und Typo-Leiter folgen in eigenen Slices.

   Abweichungen zu docs/DESIGN.md sind dort als Owner-Entscheidung vom
   08.08.2026 nachgetragen: R3 (Karten-Radius 14px unter dem Flag) und
   R16a (Buehnen-Verlauf ``--v8-stage-grad`` statt ``--p-ai-grad``).
   ============================================================================ */

/* === TOKENS START === */
.p-reskin {
  /* Flaechen und Text (Weiss zuerst, warme Temperatur) */
  --v8-plane:        #F6F5FA; /* Arbeitsflaeche der Seite */
  --v8-surface:      #FFFFFF; /* Karten, Tabellen, Tooltip */
  --v8-surface-2:    #FBFAFE; /* ruhige Zweitflaeche (Empty-State, Hover-Zelle) */
  --v8-line:         #E7E4F0; /* Karten-Border, Tabellenkopf-Trenner */
  --v8-line-soft:    #F1EEF8; /* Zeilen-Trenner, Raster-Fugen */
  --v8-line-strong:  #D6D1E6; /* Button-Border, gestrichelte Empty-State-Kante */
  --v8-ink:          #16121F; /* Ueberschriften, Werte */
  --v8-ink-2:        #3E3752; /* Fliesstext, Tabellenzelle */
  --v8-muted:        #5E5774; /* Labels, Captions, Achsen (6,8:1 auf Weiss) */

  /* Marke */
  --v8-brand:        #4326A0; /* Fokus-Serie, Links, Fokus-Ring, Eyebrow */
  --v8-brand-deep:   #2C1A6E; /* gefuellte aktive Pille, Primary-Button */
  --v8-brand-800:    #382186; /* Hover der gefuellten Flaechen */
  --v8-lav:          #F3EFFC; /* zarte Violett-Flaeche (Tabellenkopf, Chip) */
  --v8-lav-line:     #E3DBF6; /* Border auf zarter Violett-Flaeche */
  --v8-lav-hover:    #BDA9EE; /* Border beim Hover von Pille/Button/Select */
  --v8-hover-tint:   #FCFBFF; /* Hover-Flaeche Pille */
  --v8-hover-tint-2: #FDFCFF; /* Hover-Flaeche Button */
  --v8-row-hot:      #F6F2FE; /* markierte Tabellenzeile */
  --v8-row-hover:    #FAF8FE; /* ueberfahrene Tabellenzeile */
  --v8-gold:         #FCD34D; /* Skuy-Leuchtpunkt, ausschliesslich dort (R7/R11) */
  --v8-gold-deep:    #B98A05;

  /* Status (nur R13-Vokabular und Delta-Chips, nie dekorativ, nie Serienfarbe) */
  --v8-good:         #136B44;
  --v8-good-bg:      #E6F4ED;
  --v8-warn:         #7A5300;
  --v8-warn-bg:      #FFF3DC;
  --v8-neg:          #A81F1A;
  --v8-neg-bg:       #FCEBE9;
  --v8-neg-line:     #F3CFCB;
  --v8-flat-bg:      #F1EFF6;

  /* Chart-Serien (Skin-Anwendung folgt im Chart-Slice, Tokens stehen hier) */
  --v8-series-1:     #4326A0; /* Fokus-Serie, genau eine je Chart (10,4:1) */
  --v8-series-2:     #7C5DC7; /* Vergleich, Lavendel-Rolle (4,9:1) */
  --v8-series-3:     #8A82A3; /* Vergleich, Grau-Rolle (3,6:1) */
  --v8-series-area:  .09;     /* Deckkraft der Flaeche unter der Fokus-Linie */
  --v8-series-vj:    .55;     /* Deckkraft der Vorjahres-Linie */
  --v8-grid:         #F0EDF7;
  --v8-axis-break:   #B9B1CC;
  --v8-crosshair:    #A899CE;

  /* Buehne (das EINE dunkle Band der Seite, R16) */
  --v8-stage-grad:
    radial-gradient(900px 340px at 12% -30%, rgba(114, 73, 222, .55), transparent 62%),
    linear-gradient(122deg, #2A1A63 0%, #1E1440 46%, #120E22 100%);
  --v8-stage-shadow: 0 1px 2px rgba(22, 18, 31, .18), 0 22px 44px -30px rgba(26, 17, 64, .9);
  --v8-stage-ink:       #FFFFFF;
  --v8-stage-ink-soft:  #F1EDFA; /* Sprechzeile */
  --v8-stage-ink-lead:  #D4CDE8; /* Fliesstext */
  --v8-stage-ink-muted: #ABA3CD; /* Labels, Captions (Untergrenze AA) */
  --v8-stage-hair: rgba(255, 255, 255, .10);
  --v8-stage-fill: rgba(255, 255, 255, .09);
  --v8-stage-band: rgba(0, 0, 0, .16); /* Fuellung des angedockten KPI-Bands */
  --v8-stage-up:   #7BE0A8;
  --v8-stage-dn:   #FFA9A2;

  /* Form, Schatten, Bewegung */
  --v8-r-card: 14px;
  --v8-r-tile: 12px;
  --v8-r-btn:  10px;
  --v8-shadow:     0 1px 2px rgba(22, 18, 31, .05), 0 10px 28px -18px rgba(22, 18, 31, .22);
  --v8-shadow-pop: 0 2px 4px rgba(22, 18, 31, .06), 0 14px 32px -14px rgba(22, 18, 31, .4);
  --v8-ease: cubic-bezier(.22, 1, .36, 1);

  /* Abstands-Skala (14 Stufen, geschlossen). Jeder Abstand dieses Blocks ist
     0, 1px (Haarlinie) oder ein --sp-*. Keine Zwischenstufen. */
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  6px;
  --sp-4:  8px;
  --sp-5:  10px;
  --sp-6:  12px;
  --sp-7:  14px;
  --sp-8:  16px;
  --sp-9:  18px;
  --sp-10: 20px;
  --sp-11: 24px;
  --sp-12: 32px;
  --sp-13: 40px;
  --sp-tail: 80px;
}
/* === TOKENS ENDE === */

/* ── Arbeitsflaeche ──────────────────────────────────────────────────────────
   Der Soft-Body-Grund (.p-appshell.rw-soft, oben) wechselt vom kuehlen
   #F0F3FA auf die minimal warme v8-Ebene. Der Verlaufs-Layer darueber
   (::before) faellt weg: v8 ist eine ruhige Flaeche, die Tiefe machen die
   Karten-Schatten. Drei Klassen schlagen den Bestand (zwei Klassen). */
.p-reskin .p-appshell.rw-soft { background: var(--v8-plane); }
.p-reskin .p-appshell.rw-soft::before { background: none; }

/* ── Karten ──────────────────────────────────────────────────────────────────
   Weiss, 1px --v8-line, Radius 14px, --v8-shadow. Kein farbiger Rand, kein
   Links-Balken, kein Glass (R4/R5/R15e). Die Bezel-Optik (aeussere Schale mit
   9px Polster + eigener Innen-Kern-Border) faellt zusammen: EINE Kante statt
   zweier. Reine Flaechenfrage, kein DOM-Eingriff. */
.p-reskin .rw-chart,
.p-reskin .rw-table-wrap,
.p-reskin .rw-kpi,
.p-reskin .p-panel {
  background: var(--v8-surface);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r-card);
  box-shadow: var(--v8-shadow);
}
.p-reskin .rw-chart,
.p-reskin .rw-table-wrap { padding: 0; }
.p-reskin .rw-chart__inner {
  border: 0;
  border-radius: var(--v8-r-card);
  background: transparent;
  /* Karte innen 18/20 (Abstands-Zuordnung der Spec). */
  padding: var(--sp-9) var(--sp-10);
}
.p-reskin .rw-table-wrap > table {
  border: 0;
  border-radius: var(--v8-r-card);
}
/* Karte zu Karte 18, Sektion zu Sektion 32. */
.p-reskin .rw-charts {
  gap: var(--sp-9);
  margin-bottom: var(--sp-12);
}
.p-reskin .rw-table-wrap { margin-bottom: var(--sp-12); }

/* ── Chart-Karten-Kopf ───────────────────────────────────────────────────────
   Titel links, Zeitraum-Caption daneben, Vergroessern-Knopf rechts. Titel und
   rechte Meta sitzen auf der Grundlinie (nicht zentriert), Kopf zu Inhalt 12. */
.p-reskin .rw-chart__head {
  align-items: baseline;
  gap: var(--sp-8);
  /* Die getoente Titel-Kappe (oben, negative Margins auf das alte
     Innen-Polster gerechnet) faellt weg: v8 setzt den Kartenkopf auf die
     weisse Kartenflaeche, ohne zweite Flaeche und ohne Trennlinie. Die
     negativen Margins muessten sonst dem neuen 18/20-Polster nachgezogen
     werden und haetten damit dieselbe Kante zweimal beschrieben. */
  margin: 0 0 var(--sp-6);
  padding: 0;
  background: transparent;
  border-bottom: 0;
}
.p-reskin .rw-chart__head .rw-chart__title { margin-bottom: 0; }
.p-reskin .rw-chart__title { color: var(--v8-ink); }
.p-reskin .rw-chart__period { color: var(--v8-muted); }
.p-reskin .rw-chart__expand {
  width: 28px;
  height: 28px;
  border: 1px solid var(--v8-line-strong);
  border-radius: var(--v8-r-btn);
  background: var(--v8-surface);
  color: var(--v8-muted);
  transition: border-color 160ms var(--v8-ease), color 160ms var(--v8-ease);
}

/* ── Wertetabelle unter der Chart-Karte (R17i) ───────────────────────────────
   Dieselbe Sprache wie die Datentabellen, nur dichter: Zelle 6/10. Das
   Dreieck vor dem Summary traegt die Markenfarbe. */
.p-reskin .chart-table { margin-top: var(--sp-6); }
.p-reskin .chart-table__toggle { color: var(--v8-brand); }
.p-reskin .chart-table__scroll {
  margin-top: var(--sp-5);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r-btn);
}
.p-reskin .chart-table__cap { color: var(--v8-muted); }
.p-reskin .chart-table__tbl thead th {
  background: var(--v8-lav);
  color: var(--v8-muted);
  font-weight: 550;
  border-bottom: 1px solid var(--v8-line);
  padding: var(--sp-3) var(--sp-5);
}
.p-reskin .chart-table__tbl tbody th,
.p-reskin .chart-table__tbl tbody td {
  color: var(--v8-ink-2);
  padding: var(--sp-3) var(--sp-5);
}
.p-reskin .chart-table__tbl tbody tr + tr th,
.p-reskin .chart-table__tbl tbody tr + tr td { border-top: 1px solid var(--v8-line-soft); }

/* ── Datentabellen ───────────────────────────────────────────────────────────
   Lavendel-Kopf mit 1px-Unterkante, Zellen 8/10, Zeilentrenner in
   --v8-line-soft, letzte Zeile ohne Trenner. Der Wrapper behaelt sein
   overflow-x: auto (oben), Spaltenzahl und Reihenfolge bleiben unberuehrt. */
.p-reskin .rw-table th {
  background: var(--v8-lav);
  color: var(--v8-muted);
  font-weight: 550;
  border-bottom: 1px solid var(--v8-line);
  padding: var(--sp-4) var(--sp-5);
}
.p-reskin .rw-table td {
  color: var(--v8-ink-2);
  border-bottom: 1px solid var(--v8-line-soft);
  padding: var(--sp-4) var(--sp-5);
}
.p-reskin .rw-table tbody tr:last-child td { border-bottom: 0; }
.p-reskin .rw-table__empty { color: var(--v8-muted); }

/* ── Tab-Leiste und Filter-Pillen ────────────────────────────────────────────
   Buttons werden Pillen: Radius 999px, Polster 6/14, inaktiv gedaempft,
   aktiv gefuellt --v8-brand-deep mit weisser Schrift. Reihenfolge und Anzahl
   der Tabs bleiben unveraendert (nur Skin). */
.p-reskin .rw-tabs__nav,
.p-reskin .rw-soft .rw-tabs__nav {
  gap: var(--sp-3);
  /* Pillen brauchen keine getoente Ruheflaeche unter sich: die Leiste sitzt
     direkt auf der Arbeitsflaeche, die Zugehoerigkeit traegt die gefuellte
     aktive Pille. */
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--v8-line);
  margin-bottom: var(--sp-8);
  padding: 0 0 var(--sp-3);
}
.p-reskin .rw-tabs__btn,
.p-reskin .rw-soft .rw-tabs--on-dark .rw-tabs__btn {
  padding: var(--sp-3) var(--sp-7);
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--v8-muted);
  line-height: 1.4;
  white-space: nowrap;
}
.p-reskin .rw-tabs__btn.is-active,
.p-reskin .rw-soft .rw-tabs--on-dark .rw-tabs__btn.is-active {
  background: var(--v8-brand-deep);
  border-color: var(--v8-brand-deep);
  color: var(--v8-stage-ink);
  font-weight: 600;
}
.p-reskin .rw-filters { gap: var(--sp-3); }
.p-reskin .rw-filter,
.p-reskin .rw-soft .rw-tabs--on-dark .rw-filter {
  padding: var(--sp-3) var(--sp-7);
  border: 1px solid var(--v8-line-strong);
  border-radius: 999px;
  background: var(--v8-surface);
  color: var(--v8-ink-2);
  line-height: 1.4;
}
.p-reskin .rw-filter.is-active,
.p-reskin .rw-soft .rw-tabs--on-dark .rw-filter.is-active {
  background: var(--v8-brand-deep);
  border-color: var(--v8-brand-deep);
  color: var(--v8-stage-ink);
}

/* ── Empty-States ────────────────────────────────────────────────────────────
   Gestrichelte Kante = intentionaler Platzhalter (bleibt), Flaeche wird die
   ruhige Zweitflaeche, Radius --v8-r-tile, Polster 24. Der Pflichttext daneben
   bleibt wortgleich stehen (R2/S1). */
.p-reskin .rw-chart__empty {
  background: var(--v8-surface-2);
  border: 1px dashed var(--v8-line-strong);
  border-radius: var(--v8-r-tile);
  padding: var(--sp-11);
  gap: var(--sp-5);
}
.p-reskin .rw-chart__empty-ico {
  background: var(--v8-lav);
  stroke: var(--v8-brand);
}
.p-reskin .rw-chart__empty-title { color: var(--v8-ink); }
.p-reskin .rw-chart__empty-sub { color: var(--v8-muted); }

/* ── Verdikt-Buehne (R16/R16a) ───────────────────────────────────────────────
   Derselbe Slot, nur neu getont: der Navy-Verlauf bekommt seinen Radial-Glow
   aus --v8-stage-grad statt aus --p-ai-grad. Weiterhin GENAU EIN dunkles Band
   pro Seite, weiterhin Single Source in dieser Datei, kein Template-Fork.
   Radius folgt der Karten-Norm (14px), das angedockte KPI-Band (R16h) bleibt
   Teil desselben Blocks. */
.p-reskin .rw-soft .rw-verdict-header--stage,
.p-reskin .rw-soft .rw-stage {
  background: var(--v8-stage-grad);
  border-radius: var(--v8-r-card);
  box-shadow: var(--v8-stage-shadow);
  margin: 0 0 var(--sp-11);
}
/* Buehne innen 20/24/24, Eyebrow zu Verdikt 6, Verdikt zu Skuy-Zeile 12. */
.p-reskin .rw-soft .rw-verdict-header--stage { padding: var(--sp-10) var(--sp-11) var(--sp-11); }
.p-reskin .rw-soft .rw-stage > .rw-verdict-header--stage { padding-bottom: var(--sp-6); }
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__eyebrow {
  color: var(--v8-stage-ink-muted);
  margin-bottom: var(--sp-3);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__icon {
  background: var(--v8-stage-fill);
  color: var(--v8-stage-ink);
  border-radius: var(--v8-r-tile);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__range-badge {
  padding: var(--sp-2) var(--sp-6);
  background: var(--v8-stage-fill);
  border: 1px solid var(--v8-stage-hair);
  color: var(--v8-stage-ink-soft);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy {
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__skuy-text {
  color: var(--v8-stage-ink-soft);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__kpi-label {
  color: var(--v8-stage-ink-muted);
}
/* Hairline zwischen Verdikt und KPI-Band, KPI-Band innen 14/24/16. */
.p-reskin .rw-soft .rw-stage > .rw-top-section { border-top: 1px solid var(--v8-stage-hair); }
.p-reskin .rw-soft .rw-stage > .rw-top-section .rw-top-kpis {
  padding-top: var(--sp-7);
  padding-left: var(--sp-11);
  padding-right: var(--sp-11);
}
/* Scope-Zeile im v8-Band: gedämpfte Bühnen-Schrift, gleiche Flucht (N3.2). */
.p-reskin .rw-soft .rw-top-section .rw-scope-line {
  padding: 0 var(--sp-11) var(--sp-8);
  color: var(--v8-stage-ink-muted);
}

/* ── Fokus-Ringe ─────────────────────────────────────────────────────────────
   Jedes fokussierbare Element der Analyse-Seite: 2px --v8-brand mit 2px
   Offset. Auf der Buehne wechselt der Ring auf Weiss, sonst verschwaende er
   im Dunkeln (Kontrast-Regel der Spec). Nichts wird abgeschaltet. */
.p-reskin .rw-tabs__btn:focus-visible,
.p-reskin .rw-filter:focus-visible,
.p-reskin .rw-expand__button:focus-visible,
.p-reskin .rw-th.is-sortable:focus-visible,
.p-reskin .rw-dropdown__item:focus-visible,
.p-reskin .rw-chart__expand:focus-visible,
.p-reskin .chart-table__toggle:focus-visible {
  outline: 2px solid var(--v8-brand);
  outline-offset: 2px;
}
.p-reskin .rw-stage :focus-visible,
.p-reskin .rw-verdict-header--stage :focus-visible {
  outline: 2px solid var(--v8-stage-ink);
  outline-offset: 2px;
}

/* ── Hover, gekapselt ────────────────────────────────────────────────────────
   Alle :hover-Regeln dieses Blocks liegen in genau einem
   @media (hover: hover). Zeiger-Geraete ohne echten Hover bekommen keinen
   haengenden Zustand. :focus-visible steht bewusst ausserhalb. */
@media (hover: hover) {
  .p-reskin .rw-table tbody tr:hover { background: var(--v8-row-hover); }
  .p-reskin .rw-tabs__btn:hover,
  .p-reskin .rw-soft .rw-tabs--on-dark .rw-tabs__btn:hover {
    background: var(--v8-hover-tint);
    border-color: var(--v8-lav-hover);
    color: var(--v8-ink);
  }
  .p-reskin .rw-tabs__btn.is-active:hover,
  .p-reskin .rw-soft .rw-tabs--on-dark .rw-tabs__btn.is-active:hover {
    background: var(--v8-brand-800);
    border-color: var(--v8-brand-800);
    color: var(--v8-stage-ink);
  }
  .p-reskin .rw-filter:hover,
  .p-reskin .rw-soft .rw-tabs--on-dark .rw-filter:hover {
    background: var(--v8-hover-tint-2);
    border-color: var(--v8-lav-hover);
  }
  .p-reskin .rw-filter.is-active:hover,
  .p-reskin .rw-soft .rw-tabs--on-dark .rw-filter.is-active:hover {
    background: var(--v8-brand-800);
    border-color: var(--v8-brand-800);
    color: var(--v8-stage-ink);
  }
  .p-reskin .rw-expand__button:hover:not(:disabled) {
    color: var(--v8-brand);
  }
  .p-reskin .rw-chart__expand:hover {
    border-color: var(--v8-lav-hover);
    color: var(--v8-brand);
    background: var(--v8-hover-tint-2);
  }
  .p-reskin .chart-table__toggle:hover { color: var(--v8-brand-deep); }
}

/* Bewegung: der Bestand bremst bereits global (mehrere
   prefers-reduced-motion-Bloecke oben, u.a. fuer .rw-chart__expand). Die eine
   Transition dieses Blocks faellt hier mit ab. */
@media (prefers-reduced-motion: reduce) {
  .p-reskin .rw-chart__expand { transition: none; }
}

/* ============================================================================
   ANALYSEN-RESKIN v8 — Slice R4: Befunde aus dem S7-Sweep
   ----------------------------------------------------------------------------
   Sichtung aller 17 oeffenbaren Analyse-Detailseiten mit aktivem Flag
   (Screenshots je Tab, DOM-Zaehlung Flag-AN gegen Flag-AUS). Die Zaehlung war
   ueberall identisch (S3) — was blieb, sind reine Flaechen-Befunde: Stellen,
   an denen die Bestands-Optik unter dem Flag stehen blieb und damit zwei
   Farbwelten nebeneinander zeigte. Alles hier ist Skin, kein Struktur-Eingriff
   (S1): keine Sektion, keine Spalte, kein Bedienelement aendert sich.
   ============================================================================ */

/* ── B1 · Kopf-KPI-Band: Spalten statt Karten ────────────────────────────────
   Spec (reskin 2 · Kopf-KPI-Band): "Spalten durch 1px --v8-stage-hair
   getrennt, Fuellung rgba(0,0,0,.16), kein eigener Radius, kein Karten-Chrome
   je KPI". Der Bestand gab der fuehrenden Kachel eine eigene transluzente
   Karte (Radius + Rahmen, R16d) — im v8-Band liest sich das als Rangfolge, die
   inhaltlich nichts bedeutet, und es ist die einzige Kante im Band. Die
   Karte faellt weg, die Spalte behaelt ihren Hairline-Trenner wie die uebrigen.
   Der Wert bleibt der erste, das ist Reihenfolge genug. */
.p-reskin .rw-soft .rw-stage > .rw-top-section {
  background: var(--v8-stage-band);
}
/* Seiten OHNE Verdikt (Fall 3 in view.html) tragen das Band als alleinigen
   dunklen Block — dort ist es die Buehne und traegt deren Verlauf. */
.p-reskin .rw-soft .rw-top-section {
  background: var(--v8-stage-grad);
  border-radius: var(--v8-r-card);
  box-shadow: var(--v8-stage-shadow);
}
/* Der dekorative Glow-/Grain-Layer des Bestands-Slabs faellt weg: er setzt eine
   zweite Lichtquelle IN die Buehne, deren erste schon der Verlauf des Wrappers
   ist (sichtbare Naht an der Hairline). */
.p-reskin .rw-top-section::before,
.p-reskin .rw-top-section::after {
  background: none;
}
.p-reskin .rw-soft .rw-top-kpi {
  border-right: 1px solid var(--v8-stage-hair);
  padding-right: var(--sp-8);
}
.p-reskin .rw-soft .rw-top-kpi:last-child { border-right: none; }
.p-reskin .rw-soft .rw-top-kpi--hero,
.p-reskin .rw-soft .rw-has-verdict-stage .rw-top-kpi--hero {
  background: none;
  border: 0;
  border-right: 1px solid var(--v8-stage-hair);
  border-radius: 0;
  box-shadow: none;
  padding: var(--sp-1) var(--sp-8) var(--sp-1) 0;
}
.p-reskin .rw-soft .rw-top-kpi--hero:last-child { border-right: none; }
/* Eine Leiter statt zweier: Label und Fussnoten aller Spalten (auch der
   fuehrenden) auf --v8-stage-ink-muted, Wert auf --v8-stage-ink. */
.p-reskin .rw-soft .rw-top-kpi__label,
.p-reskin .rw-soft .rw-top-kpi--hero .rw-top-kpi__label {
  color: var(--v8-stage-ink-muted);
}
.p-reskin .rw-soft .rw-top-kpi__value,
.p-reskin .rw-soft .rw-top-kpi--hero .rw-top-kpi__value {
  color: var(--v8-stage-ink);
}
.p-reskin .rw-soft .rw-top-kpi__hint,
.p-reskin .rw-soft .rw-top-kpi__provisional,
.p-reskin .rw-soft .rw-top-kpi--hero .rw-top-kpi__hint,
.p-reskin .rw-soft .rw-top-kpi--hero .rw-top-kpi__provisional,
.p-reskin .rw-soft .rw-top-kpi--hero .rw-kpi__period {
  color: var(--v8-stage-ink-muted);
}

/* ── B2 · Verdikt-Zeilen unter der Chart-Karte: Farbe nur im Punkt ───────────
   Spec (reskin 2 · Chart-Karte): "Verdikt-Zeilen darunter als Text mit
   Signalfarbe nur im Punkt". Der Bestand legt die Signalfarbe als Flaeche
   unter die ganze Zeile (gruener/roter/bernsteinfarbener Wash). Auf Seiten mit
   vier bis sechs solcher Zeilen (CID, SWOT) traegt damit die Flaeche das
   Signal — genau die dekorative Signalfarbe, die R5/R17f verbieten. Fläche
   wird ruhig, der Punkt behaelt sein Wort. */
.p-reskin .rw-verdict {
  background: var(--v8-surface-2);
  border: 1px solid var(--v8-line);
  border-radius: var(--v8-r-btn);
  color: var(--v8-ink-2);
  padding: var(--sp-3) var(--sp-5);
}
.p-reskin .rw-verdict--good::before { background: var(--v8-good); }
.p-reskin .rw-verdict--warn::before { background: var(--v8-warn); }
.p-reskin .rw-verdict--bad::before { background: var(--v8-neg); }
.p-reskin .rw-verdict--info::before { background: var(--v8-brand); }

/* ── B3 · Bestands-Violett der Anker- und Wash-Flaechen auf v8 umlenken ──────
   Die fuehrende KPI-Karte einer Tab-Reihe (.rw-kpi--hero) und der Anker-Fall
   ohne Buehne laufen ueber --p-anchor-grad (#6D28D9→#7C3AED, sa-prism.css).
   Neben dem tieferen v8-Indigo (#2C1A6E→#4326A0) liest sich das als zweite
   Marke auf derselben Seite. Statt jede Regel zu kopieren wird der Token unter
   dem Flag umgelenkt (Single Source bleibt Single Source, R11) — dieselben
   Regeln, dieselbe Dosierung (R15a: genau EIN satter Anker), nur die v8-Farbe.
   Ebenso die Stuetz-Ebene (violet-50/100) auf das v8-Lavendel-Paar. */
.p-reskin .rw-soft {
  --p-anchor-grad: linear-gradient(135deg, var(--v8-brand-deep), var(--v8-brand));
  --p-surf-violet: var(--v8-lav);
  --p-surf-violet-2: var(--v8-lav-line);
  --p-surf-violet-bd: var(--v8-lav-line);
}

/* ── B4 · Skuy-Empfehlungsblock im Buehnen-Ton ───────────────────────────────
   Der Empfehlungs-Container ist seit dem Lila-Rollout (2026-07-21) eine dunkle
   Nacht-Box (--p-ai-grad, Navy). Unter dem Flag stand damit die alte Navy-Box
   unter der neuen warm-violetten Buehne: zwei Dunkeltoene, die sich nicht
   kennen. Er bekommt den Buehnen-Verlauf, den Buehnen-Schatten und das
   Karten-Radius der v8-Norm. Die Frage, ob eine Analyse-Seite ueberhaupt zwei
   dunkle Baender tragen darf (reskin-spec Verbot 8 gegen die Owner-
   Entscheidung vom 21.07.), bleibt bewusst offen — sie ist eine Entscheidung,
   kein Sweep-Befund. */
.p-reskin .rw-soft .rw-ai-reco:not(.rw-ai-reco--stable) {
  background: var(--v8-stage-grad);
  border: 1px solid var(--v8-stage-hair);
  border-radius: var(--v8-r-card);
  box-shadow: var(--v8-stage-shadow);
}

/* ── B5 · Hinweis-Baender (Aufbau-Notiz, Degradations-Notiz) ─────────────────
   Die Aufbau-Notiz stand auf rohen Bernstein-Hexwerten (#FEF3C7/#F59E0B), die
   Degradations-Notiz auf kuehlem Blau (#EFF6FF/#3B82F6) — beides Toene, die im
   v8-Satz nicht vorkommen; das Marken-Amber #F59E0B ist als Kante ohnehin
   unzulaessig (R19d). Aufbau bleibt Warn-Vokabular (R13), die neutrale
   Degradations-Notiz wird zur ruhigen Lavendel-Flaeche (kein Status, also
   keine Signalfarbe, R5). Der Inline-Style der Degradations-Notiz haengt am
   selben Flag (_info_notice.html), sonst gaebe es nichts zu ueberschreiben. */
.p-reskin .rw-empty {
  background: var(--v8-warn-bg);
  border: 1px solid color-mix(in srgb, var(--v8-warn) 34%, transparent);
  border-radius: var(--v8-r-tile);
  color: var(--v8-warn);
  padding: var(--sp-7) var(--sp-9);
}
.p-reskin .rw-empty__headline { color: var(--v8-warn); }
.p-reskin .rw-info-notice {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-7) var(--sp-9);
  border: 1px solid var(--v8-lav-line);
  border-radius: var(--v8-r-tile);
  background: var(--v8-lav);
  color: var(--v8-ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ── B6 · Die letzten kuehlen Blau-Flaechen ─────────────────────────────────
   Zwei Reste aus der Zeit vor der Temperatur-Entscheidung: der Tab-Hinweis
   (.rw-banner--info, z.B. Keyword-Empfehlung) und der neutrale Hinweis-Badge
   auf der Buehne (.rw-verdict-header__badge--info, z.B. ASIN-Vergleich).
   Der Tab-Hinweis trug zusaetzlich einen 3px-LINKS-BALKEN — genau die Form,
   die R5/R15e und Verbot 9 der Spec ausschliessen. Er wird zur Haarlinie wie
   die drei anderen Kanten; die Flaeche wird ruhiges Lavendel (ein Hinweis ist
   kein Status, also keine Signalfarbe, R13). */
.p-reskin .rw-banner {
  margin-bottom: var(--sp-8);
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--v8-r-tile);
}
.p-reskin .rw-banner--info {
  background: var(--v8-lav);
  border: 1px solid var(--v8-lav-line);
  color: var(--v8-ink-2);
}
.p-reskin .rw-soft .rw-verdict-header--stage .rw-verdict-header__badge--info {
  background: var(--v8-stage-fill);
  border: 1px solid var(--v8-stage-hair);
  color: var(--v8-stage-ink-soft);
}