@layer components {
 .r4x-supporting-graphic { margin:var(--s4) 0; padding:var(--s4); border:1px solid var(--border); border-radius:var(--radius-card); background:var(--surface-muted); color:var(--text); min-width:0; }
 .r4x-supporting-graphic figcaption { font-weight:700; font-size:.875rem; margin-bottom:var(--s3); color:var(--text); }
 .r4x-supporting-graphic p { margin:var(--s2) 0 0; font-size:.8rem; color:var(--text-muted); }
 .r4x-supporting-graphic svg,.r4x-rule-graphic svg { display:block; width:100%; height:auto; overflow:visible; }
 .r4x-graphic-labels { display:flex; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s2); font-size:.8rem; line-height:1.5; color:var(--text-muted); }
 .r4x-graphic-labels > :last-child { text-align:right; }
 .r4x-policy-bars { display:grid; gap:var(--s5); }
 .r4x-policy-bar strong { display:block; margin-bottom:var(--s2); font-size:.875rem; }
 .r4x-policy-bar svg { max-height:var(--s7); }
 .r4x-supporting-graphic--compact svg { max-height:var(--s5); }
 .r4x-supporting-graphic .r4x-graphic-date { text-align:center; }
 .r4x-graphic-track { stroke:var(--border); }
 .r4x-graphic-base { fill:var(--border-soft); }
 .r4x-graphic-fill { fill:var(--accent-text); }
 .r4x-graphic-stroke { stroke:var(--accent-text); }
 .r4x-graphic-free { fill:var(--info); }
 .r4x-graphic-free-stroke { stroke:var(--info); }
 .r4x-graphic-mark { stroke:var(--text); }
 .r4x-rule-graphic { display:block; grid-column:1 / -1; width:100%; margin-top:var(--s2); }
 .r4x-rule-graphic svg { max-height:var(--s4); }
 .r4x-quota-ring { display:inline-flex; flex:0 0 auto; vertical-align:middle; width:var(--s5); height:var(--s5); margin-inline:var(--s2); }
 .r4x-quota-ring svg { display:block; width:100%; height:100%; }
.r4x-quota-mark { display:inline-flex; flex:0 0 auto; align-items:center; vertical-align:middle; }
.r4x-quota-mark > .r4x-quota-counter { margin-inline:var(--s2); }
 /* Paket P2: allowance counter (renderQuotaCounter); it takes the colour of its context and inside an action sits
    behind a thin divider. */
 .r4x-quota-counter { display:inline-flex; align-items:center; gap:var(--s1); font-size:.8125rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap; }
 .btn .r4x-quota-counter { margin-inline-start:var(--s1); padding-inline-start:var(--s2); border-inline-start:1px solid color-mix(in srgb,currentColor 30%,transparent); }
 .r4x-quota-counter svg { display:block; width:var(--s4); height:var(--s4); flex:none; }
 .r4x-quota-counter .r4x-graphic-track { stroke:color-mix(in srgb,currentColor 25%,transparent); }
 .r4x-quota-counter .r4x-graphic-stroke { stroke:currentColor; }
 .r4x-quota-counter.is-empty svg { stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
 /* Paket P: data graphics of the Web3 area (share ring, meter, change bars, range, rank share). */
 .r4x-graphic-tone-gold { --r4x-graphic-ink:var(--accent-text); }
 .r4x-graphic-tone-info { --r4x-graphic-ink:var(--info); }
 .r4x-graphic-tone-success { --r4x-graphic-ink:var(--success); }
 .r4x-graphic-tone-danger { --r4x-graphic-ink:var(--danger); }
 .r4x-graphic-tone-neutral { --r4x-graphic-ink:var(--text-muted); }
 :is(.r4x-share-ring,.r4x-meter) .r4x-graphic-stroke { stroke:var(--r4x-graphic-ink); }
 .r4x-meter .r4x-graphic-fill { fill:var(--r4x-graphic-ink); }
 .r4x-share-ring { display:grid; grid-template-columns:var(--s8) minmax(0,1fr); align-items:center; gap:var(--s3); margin:0; min-width:0; }
 .r4x-share-ring svg { display:block; width:var(--s8); height:var(--s8); }
 .r4x-share-ring figcaption { display:grid; gap:2px; min-width:0; }
 .r4x-share-ring figcaption strong { font-size:1.25rem; line-height:1.2; font-variant-numeric:tabular-nums; color:var(--text); }
 .r4x-share-ring figcaption span { color:var(--text-muted); font-size:.8125rem; line-height:1.35; }
 .r4x-share-ring figcaption small,.r4x-meter > small { color:var(--text-muted); font-size:.75rem; line-height:1.45; }
 :is(.r4x-meter,.r4x-range) { display:grid; gap:var(--s2); min-width:0; }
 :is(.r4x-meter,.r4x-range) svg { display:block; width:100%; height:var(--s3); overflow:visible; }
 .r4x-meter__head { display:flex; justify-content:space-between; align-items:baseline; gap:var(--s3); font-size:.8125rem; color:var(--text-muted); }
 .r4x-meter__head strong { color:var(--text); font-size:.9375rem; font-variant-numeric:tabular-nums; white-space:nowrap; }
 .r4x-range .r4x-graphic-labels { margin:0; font-size:.75rem; font-variant-numeric:tabular-nums; }
 .r4x-range__mark { stroke:var(--accent-text); vector-effect:non-scaling-stroke; }
 .r4x-change-bar .r4x-graphic-mark { stroke:var(--border); vector-effect:non-scaling-stroke; }
 .r4x-change-bars { display:grid; gap:var(--s2); }
 .r4x-change-bar { display:grid; grid-template-columns:minmax(4.5rem,auto) minmax(0,1fr) minmax(4.5rem,auto); align-items:center; gap:var(--s3); font-size:.8125rem; }
 .r4x-change-bar__label { color:var(--text-muted); }
 .r4x-change-bar svg { display:block; width:100%; height:var(--s3); overflow:visible; }
 .r4x-change-bar strong { text-align:right; font-variant-numeric:tabular-nums; }
 .r4x-change-bar.is-up :is(strong) { color:var(--success); }
 .r4x-change-bar.is-down :is(strong) { color:var(--danger); }
 .r4x-change-bar.is-up .r4x-change-bar__fill { fill:var(--success); }
 .r4x-change-bar.is-down .r4x-change-bar__fill { fill:var(--danger); }
 /* UI-043 sample view (sample-previews.mjs): dashed surface, lightly covered, always labelled "Beispielansicht". */
 .sample-preview { position:relative; margin:0; padding:var(--s4); border:1px dashed var(--border); border-radius:var(--radius-card); background:var(--surface-muted); overflow:hidden; min-width:0; }
 .sample-preview__mark { position:absolute; top:var(--s3); right:var(--s3); z-index:1; }
 .sample-preview__surface { display:grid; gap:var(--s3); filter:blur(.6px); opacity:.62; pointer-events:none; user-select:none; }
 .sample-preview::after { content:''; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,var(--surface-muted)); pointer-events:none; }
 .sample-preview__title { margin:0; padding-right:calc(var(--s8) * 2); color:var(--text-muted); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
 .sample-preview__rows { display:grid; gap:var(--s3); }
 .sample-preview__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s1) var(--s3); font-size:.8125rem; }
 .sample-preview__row small { color:var(--text-muted); font-size:.75rem; }
 .sample-preview__row b { font-variant-numeric:tabular-nums; }
 .sample-preview__bar { grid-column:1 / -1; display:block; width:100%; height:var(--s2); fill:var(--border); }
 .sample-preview__fill { fill:var(--accent-text); }
 .sample-preview__table { display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s3); font-size:.8125rem; }
 .sample-preview__table > span:nth-child(3n+1) { color:var(--text-muted); }
 .sample-preview__metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,6.5rem),1fr)); gap:var(--s2); }
 .sample-preview__metrics > span { display:grid; gap:2px; padding:var(--s3); border:1px solid var(--border); border-radius:var(--radius-control); background:var(--surface); }
 .sample-preview__metrics small,.sample-preview__share small { color:var(--text-muted); font-size:.75rem; }
 .sample-preview__metrics b { font-size:1.125rem; }
 .sample-preview__share { display:flex; align-items:center; gap:var(--s3); }
 .sample-preview__share > span { display:grid; gap:2px; }
 .sample-preview__ring { width:var(--s7); height:var(--s7); flex:none; stroke:var(--border); }
 .sample-preview__chapter { display:flex; align-items:center; gap:var(--s3); }
 .sample-preview__chapter > span:last-child { display:grid; gap:2px; }
 .sample-preview__chapter small { color:var(--text-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
 .sample-preview__step { display:grid; place-items:center; width:var(--s7); height:var(--s7); flex:none; border:1px solid var(--gold-border); border-radius:var(--radius-card); background:var(--gold-soft); color:var(--accent-text); font-weight:700; }
 .sample-preview__stroke { stroke:var(--accent-text); }
 @media (max-width:520px) { .sample-preview { display:grid; } .sample-preview__mark { position:static; justify-self:start; margin-bottom:var(--s2); } .sample-preview__title { padding-right:0; } }
 .r4x-rank-share { display:block; width:100%; height:var(--s3); }
 .r4x-rank-share svg { display:block; width:100%; height:100%; }
}