/* Report-Frontend – an den creativestyle-Styleguide angelehnt, strikt auf DS-Tokens (ADR 0004). */
:root {
    --r-bg: var(--background, #fff);
    --r-ink: var(--foreground, #1a1b1f);
    --r-muted-fg: var(--muted-foreground, #6a6a6a);
    --r-red: var(--brand-red, #d81316);
    --r-surface: var(--muted, #f3f3f3);
    --r-primary: var(--primary, #1a1b1f);
    --r-on-primary: var(--primary-foreground, #fff);
    /* Tiefes Schwarz für dunkle FLÄCHEN (Hero, Bänder, Footer) — derselbe Ton wie
       der Landing-Auftritt, damit die Marke ein Schwarz hat. Bewusst ein eigenes
       Token statt `--r-primary` umzufärben: das färbt auch Buttons, aktive
       Nav-Pillen und Hover-Zustände, die auf Weiß sitzen und dort niemand mit dem
       Hero vergleicht. */
    --r-ink-deep: #0e0f12;
    --r-hair: color-mix(in srgb, var(--foreground, #1a1b1f) 12%, transparent);
    --r-hair-strong: color-mix(in srgb, var(--foreground, #1a1b1f) 22%, transparent);
    --score-2: #0d8a4a;
    --score-1: #e2a32c;
    --score-0: #cf5b54;
    /* Lesbare SCHRIFT-Varianten der Ampel. Die Flächenfarben oben sind für
       Flächen kalibriert; als Text auf Weiß sind Grün und Gelb zu hell, und auf
       der gelben Fläche braucht es umgekehrt ein sehr dunkles Braun. Getrennte
       Tokens, damit niemand die Flächenfarbe als Textfarbe zweckentfremdet. */
    --score-2-fg: #0a6e3b;      /* grüne Schrift auf hellem Grund */
    --score-1-fg: #8a5a05;      /* gelbe Schrift auf hellem Grund */
    --score-1-ink: #3a2a00;     /* Schrift AUF der gelben Fläche */
    --score-0-fg: #a30f11;      /* rote Schrift auf hellem Grund (auch Formularfehler) */
    --score-0-ondark: #ffb4ad;  /* rote Schrift auf dunklem Grund */
    /* Redaktionelle Innovations-/Gold-Notiz (Admin-Hinweis im Report-Look).
       Bewusst nicht --r-innovation: das ist die Hervorhebungsfarbe der
       öffentlichen Innovationen, nicht die einer Notiz. */
    --r-gold: #b8860b;
    --r-gold-fg: #8a6d00;
    /* Auf DUNKLEM Grund (Hero, Bänder, Lightbox). --r-muted-fg ist für hellen
       Grund kalibriert und fällt dort durch. */
    --r-ondark-strong: #f4f4f5; /* Text mit voller Präsenz */
    --r-ondark-lead: #dcdcdc;   /* Lead-/Fließtext */
    --r-ondark-muted: #d4d4d8;  /* Metazeile, Zähler */
    --r-surface-dark: #191b1f;  /* Platzhalter-/Medienfläche auf Dunkel */
    /* Hervorhebung „Innovation" (Enum Hervorhebung::INNOVATIV): die dritte
       Qualitätsmarkierung neben Positiv (grün) und Negativ (rot). Braucht eine
       eigene Farbe, weil sie orthogonal zur Ampel liegt — ein Innovationsfund
       kann bei jedem Score stehen. Nur dafür; nie als Link- oder CTA-Farbe. */
    --r-innovation: #4f46e5;
    /* CTA-Grün: hebt den Conversion-Pfad („Shop im Test") von der schwarz/roten
       Corporate-Palette ab. Basiert auf dem DS-Grün (score-2), leicht kräftiger. */
    --r-cta: #12a457;
    --r-cta-hover: #0d8a4a;
    --container: 1200px;
    /* Die Radien-Skala steht global in app.css (--radius-*) — sie gilt auch für
       Navigation, Landing und Admin. */
}

/* Nur für Screenreader — für Aussagen, die visuell in Balken oder Farbe stecken. */
.r-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Seitenrand aller Report-Sektionen.
   FALLSTRICK: Kombiniert ein Element .r-wrap mit einer eigenen Klasse, die
   `padding` als SHORTHAND setzt (`padding: 54px 0`), überschreibt dieses das
   horizontale Padding hier — der Inhalt klebt dann am Rand. In der eigenen
   Klasse deshalb entweder das horizontale Padding mitsetzen (`54px 24px`) oder
   nur `padding-block` nutzen. */
.r-wrap { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .r-wrap { padding: 0 18px; } }

/* Sticky Kopf: Marken-Zeile + prominente Sektions-Navigation */
.r-topbar { position: sticky; top: 0; z-index: 50; background: var(--r-bg); border-bottom: 1px solid var(--r-hair); box-shadow: 0 12px 30px -26px rgba(10,10,10,.45); }
.r-nav { border-bottom: 1px solid var(--r-hair); }
.r-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.r-brand { display: flex; align-items: center; gap: 12px; }
.r-brand img { height: 24px; width: auto; display: block; }
.r-brand .r-divider { width: 1px; height: 22px; background: var(--r-hair-strong); }
.r-brand .r-sub, .r-nav .r-sub { font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--r-muted-fg); }

/* Hero */
.r-hero { padding: 60px 0 36px; }

/* Magazin-Hero */
.r-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 30px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .03em; }
.r-kick-lead { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; font-weight: 700; letter-spacing: .1em; color: var(--r-muted-fg); }
.r-kick-lead .r-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--r-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--r-red) 20%, transparent); }
.r-pill-meta { border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); padding: 7px 14px; color: var(--r-muted-fg); white-space: nowrap; }
.r-pill-meta strong { color: var(--r-ink); font-weight: 700; }

.r-h1.r-hero-h1 { font-size: clamp(38px, 5.6vw, 84px); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; margin: 0 0 26px; max-width: none; text-wrap: balance; }
/* Hero-Marker: einzelnes Schlüsselwort -> inline-block mit leichter Schräglage
   (wie Design-System .cs-mark). Funktioniert sauber, weil nur ein Wort markiert wird. */
.r-h1 .cs-mark, .r-hero-h1 .cs-mark { display: inline-block; transform: rotate(-1.4deg); background: var(--r-red); color: #fff; padding: .02em .14em; border-radius: var(--radius-hair); }

/* Einheitliche Haupt­überschrift (H1) der inhaltlichen Report-Unterseiten:
   eine Größe für Übersicht, Ergebnisse, So testen wir, Innovationen
   Erkenntnisse und Shoptest. Ausnahmen bleiben der Gate-Hero (.r-h1.r-hero-h1)
   und der datengetriebene Anbieter-Name (.r-anb-name). */
.r-page-h1 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; margin: 0 0 16px; text-wrap: balance; }
.r-page-h1 .cs-mark { display: inline-block; transform: rotate(-1.4deg); background: var(--r-red); color: #fff; padding: .02em .14em; border-radius: var(--radius-hair); }

.r-hero-cols { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 40px; }
.r-hero-cols .r-lead { max-width: 52ch; margin: 0; }
.r-byline { display: inline-flex; align-items: center; gap: 12px; }
.r-byline-av { width: 42px; height: 42px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--r-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.r-byline-1 { font-size: 13.5px; color: var(--r-ink); }
.r-byline-2 { font-size: 12.5px; color: var(--r-muted-fg); margin-top: 2px; }

/* Befund-Karten: klickbare KPI-Einstiege (Label führt, Balken gibt Kontext) */
.r-kpis { display: grid; grid-template-columns: repeat(4, 1fr); margin: 44px 0 8px; border-top: 1px solid var(--r-hair-strong); }
@media (max-width: 900px) { .r-kpis { grid-template-columns: repeat(2, 1fr); } }
.r-kpi { display: flex; flex-direction: column; padding: 22px 22px 20px; border-right: 1px solid var(--r-hair); text-decoration: none; color: inherit; transition: background .15s; }
.r-kpi:last-child { border-right: 0; }
@media (max-width: 900px) { .r-kpi:nth-child(2) { border-right: 0; } }
.r-kpi:hover, .r-kpi:focus-visible { background: var(--r-surface); }
.r-kpi-k { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: var(--r-ink); margin-bottom: 12px; }
.r-kpi-k .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--r-muted-fg); margin-right: 7px; }
.r-kpi-num { font-size: clamp(40px, 4.4vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--r-red); }
.r-kpi-num span { font-size: .42em; font-weight: 700; margin-left: 3px; }
.r-kpi-bar { height: 6px; border-radius: var(--radius-pill); background: var(--r-hair); overflow: hidden; margin: 12px 0 14px; }
/* Balkenfarbe folgt dem Wert (Ampel), nicht der Marke: gut=grün, mittel=gelb, schwach=rot.
   Gleicher Maßstab wie Kapitel-Karten (≥70 / ≥50 / sonst). */
.r-kpi-bar span { display: block; height: 100%; background: var(--score-1); border-radius: var(--radius-pill); }
.r-kpi-bar span.hi { background: var(--score-2); }
.r-kpi-bar span.mid { background: var(--score-1); }
.r-kpi-bar span.lo { background: var(--score-0); }
.r-kpi-d { font-size: 14px; line-height: 1.5; color: var(--r-ink); margin: 0 0 16px; }
html { scroll-behavior: smooth; }
#matrix { scroll-margin-top: 128px; }
.cs-eyebrow, .r-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--r-muted-fg); margin: 0 0 22px; }
.r-eyebrow .r-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--r-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--r-red) 20%, transparent); }
.r-h1 { font-size: clamp(42px, 6vw, 82px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; margin: 0 0 22px; max-width: 16ch; }
.r-lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 60ch; color: var(--r-muted-fg); margin: 0; }
.r-meta { font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 12.5px; color: var(--r-muted-fg); margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; }
.r-meta .r-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--score-2); }

/* Buttons (DS-Primary mit Slide-up-Hover) */
.r-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; height: 48px; padding: 0 26px; border-radius: var(--radius-ctrl); border: 2px solid var(--r-primary); background: var(--r-primary); color: var(--r-on-primary); font-weight: 700; text-decoration: none; cursor: pointer; transition: color .3s; }
.r-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--r-bg); transform: translateY(100%); transition: transform .3s ease-out; }
.r-btn:hover { color: var(--r-primary); }
.r-btn:hover::before { transform: translateY(0); }

/* Linkrollen im öffentlichen Report: Aufgabe bestimmt die Darstellung.
   Pfeile stehen im Markup separat als .r-link-arrow, damit Abstand, Bewegung
   und Screenreader-Ausgabe überall gleich bleiben. */
.r-link-inline { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--r-red) 45%, transparent); text-underline-offset: .15em; transition: color .15s, text-decoration-color .15s; }
.r-link-inline:hover, .r-link-inline:focus-visible { color: var(--r-red); text-decoration-color: var(--r-red); }
.r-link-more, .r-link-cue { display: inline-flex; align-items: baseline; gap: .38em; width: fit-content; max-width: 100%; padding-bottom: 1px; border-bottom: 2px solid color-mix(in srgb, var(--r-red) 35%, transparent); color: var(--r-ink); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; transition: color .15s, border-color .15s; }
.r-link-more:hover, .r-link-more:focus-visible { color: var(--r-red); border-bottom-color: var(--r-red); }
.r-link-cue { margin-top: auto; }
.r-link-arrow { display: inline-block; flex: 0 0 auto; transition: transform .15s ease-out; }
.r-link-more:hover .r-link-arrow, .r-link-more:focus-visible .r-link-arrow,
.r-kpi:hover .r-link-arrow, .r-kpi:focus-visible .r-link-arrow,
.r-finding:hover .r-link-arrow, .r-finding:focus-visible .r-link-arrow { transform: translateX(4px); }
.r-kpi:hover .r-link-cue, .r-kpi:focus-visible .r-link-cue,
.r-finding:hover .r-link-cue, .r-finding:focus-visible .r-link-cue { color: var(--r-red); border-bottom-color: var(--r-red); }
.r-link-external { white-space: nowrap; }

/* Der Preflight entfernt Browser-Linkstile. Deshalb erhält jeder Link im
   Report-Inhalt und -Footer einen expliziten, konsistenten Tastaturfokus. */
[data-controller="report"] a:focus-visible,
.r-footer a:focus-visible,
.r-footer button:focus-visible { outline: 2px solid var(--r-red); outline-offset: 3px; }

/* Stat-Karten */
.r-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 40px 0 8px; }
@media (max-width: 900px) { .r-stats { grid-template-columns: repeat(2, 1fr); } }
.r-stat { background: var(--r-surface); border-radius: var(--radius-md); padding: 24px; }
.r-stat .num { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.r-stat .num.red { color: var(--r-red); }
.r-stat .lbl { font-size: 13px; color: var(--r-muted-fg); margin-top: 10px; line-height: 1.4; }

/* Badges (DS-Pill) */
.r-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; white-space: nowrap; }
.r-badge.her { background: var(--r-surface); color: var(--r-ink); }
.r-badge.gh { background: color-mix(in srgb, var(--r-red) 12%, transparent); color: var(--r-red); }

/* Sektions-Navigation (prominent, im Sticky-Topbar) */
.r-secnav-inner { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-height: 62px; padding: 10px 0; }
.r-secnav-title { font-weight: 800; font-size: 14.5px; color: var(--r-ink); letter-spacing: -.01em; margin-right: auto; }
.r-secnav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.r-navlink { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 600; color: var(--r-muted-fg); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.r-navlink .tn { font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 11px; letter-spacing: .06em; opacity: .7; }
.r-navlink:hover { background: var(--r-surface); color: var(--r-ink); }
.r-navlink[aria-current="page"] { background: var(--r-primary); color: var(--r-on-primary); }
.r-navlink[aria-current="page"] .tn { opacity: .55; }

/* Mobile: Nav als horizontales Scrollband statt mehrzeiligem Wrap (sticky Topbar bleibt flach) */
@media (max-width: 860px) {
    .r-secnav-inner { flex-wrap: nowrap; gap: 10px; min-height: 54px; }
    .r-secnav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .r-secnav-links::-webkit-scrollbar { display: none; }
    .r-navlink { padding: 8px 13px; font-size: 13.5px; flex: 0 0 auto; }
    .r-navlink .tn { display: none; }
    .r-nav-cta { padding: 8px 14px; font-size: 12.5px; flex: 0 0 auto; }
}

.r-section { padding: 44px 0 72px; }
.r-section[hidden] { display: none; }
.r-section h2 { font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -.03em; line-height: 1.06; font-weight: 800; margin: 0 0 10px; }
.r-section .r-sub2 { color: var(--r-muted-fg); margin: 0 0 30px; max-width: 72ch; font-size: 16px; line-height: 1.55; }

/* Matrix – Herzstück */
.r-matrix-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.r-matrix-head h2 { margin-bottom: 8px; }
/* Volle Breite: die Matrix ist direktes Kind der (randlosen) Sektion -> 100% ohne 100vw/Scrollbar-Versatz.
   Kein internes Vertikal-Scrollen: alle Zeilen werden gezeigt; nur horizontal scrollt die Box bei Bedarf. */
.r-matrix-wrap { overflow-x: auto; margin-inline: clamp(12px, 3vw, 28px); background: var(--r-bg); border-top: 1px solid var(--r-hair); border-bottom: 1px solid var(--r-hair); box-shadow: 0 30px 70px -50px rgba(10,10,10,.28); }

/* Collapse: standardmäßig nur erste 15 Zeilen sichtbar (vor JS via CSS, danach JS-gesteuert) */
.r-matrix.r-precollapse tbody tr:nth-child(n+16) { display: none; }
/* -178px = 132px Fade + 46px tfoot-Höhe: Fade liegt über den Datenzeilen, die Reifegrad-Zeile bleibt darunter sichtbar. */
.r-matrix-more { position: relative; margin-top: -178px; margin-inline: clamp(12px, 3vw, 28px); height: 132px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 16px; background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--r-bg) 70%, transparent) 45%, var(--r-bg) 88%); pointer-events: none; z-index: 6; }
.r-matrix-more[hidden] { display: none; }
.r-more-btn { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); background: var(--r-bg); color: var(--r-ink); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(10,10,10,.35); transition: background .2s, color .2s, border-color .2s; }
.r-more-btn:hover { background: var(--r-primary); color: var(--r-on-primary); border-color: var(--r-primary); }
.r-more-chevron { font-size: 13px; transform: translateY(1px); }

/* Beleg: klickbare Zelle + Modal */
.r-cell { transition: transform .12s, box-shadow .12s; }
.r-cell-btn { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; display: inline-flex; line-height: 0; border-radius: var(--radius-pill); }
.r-cell-btn:focus-visible { outline: 2px solid var(--r-ink); outline-offset: 2px; }
.r-cell-btn:hover .r-cell { transform: scale(1.18); box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-ink) 14%, transparent); }

.r-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.r-modal[hidden] { display: none; }
.r-modal-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--foreground, #1a1b1f) 55%, transparent); backdrop-filter: blur(2px); }
.r-modal-box { position: relative; z-index: 1; width: 760px; max-width: 100%; max-height: 88vh; overflow: auto; background: var(--r-bg); border-radius: var(--radius-lg); box-shadow: 0 40px 90px -30px rgba(10,10,10,.6); padding: 26px 26px 28px; }
.r-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 1px solid var(--r-hair); border-radius: var(--radius-pill); background: var(--r-bg); color: var(--r-muted-fg); font-size: 15px; cursor: pointer; line-height: 1; }
.r-modal-close:hover { color: var(--r-ink); border-color: var(--r-hair-strong); }

.r-beleg-loading { color: var(--r-muted-fg); padding: 30px 0; text-align: center; }
.r-beleg-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-right: 34px; }
.r-beleg-co { font-size: 19px; font-weight: 800; color: var(--r-ink); letter-spacing: -.01em; }
.r-beleg-crit { font-size: 13.5px; color: var(--r-muted-fg); margin-top: 3px; }
.r-beleg-head .r-cell { width: 30px; height: 30px; font-size: 15px; flex: 0 0 auto; }
.r-beleg-meta { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--r-muted-fg); margin: 16px 0 14px; }
.r-beleg-meta .r-dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--score-2); }
.r-beleg-note { font-size: 15px; line-height: 1.55; color: var(--r-ink); background: var(--r-surface); border-radius: var(--radius-md); padding: 14px 16px; }
.r-beleg-note.muted { color: var(--r-muted-fg); font-style: italic; }
.r-beleg-shot { margin: 16px 0 0; }
.r-beleg-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--r-hair); display: block; cursor: zoom-in; }

/* Beleg-Galerie (Leitbild + weitere Belege) */
.r-beleg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.r-beleg-thumb { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--r-hair); cursor: zoom-in; display: block; }

/* Vollbild-Lightbox für den Beleg-Screenshot (mit Caption + Durchblättern) */
.r-lightbox { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(8,8,10,.86); cursor: zoom-out; }
.r-lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: default; }
.r-lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); cursor: default; }
.r-lb-cap { color: var(--r-ondark-strong); font-size: 14px; text-align: center; max-width: 70ch; }

/* Redaktions-Sprung ins Admin (#136) — nur für ROLE_REDAKTION gerendert. */
.r-lb-edit { color: var(--r-ondark-strong); font-size: 13px; font-weight: 600; text-decoration: none; border: 1px solid color-mix(in srgb, var(--r-ondark-strong) 45%, transparent); border-radius: var(--radius-pill); padding: 6px 14px; }
.r-lb-edit:hover { border-color: var(--r-ondark-strong); }
.r-shot-edit { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--r-red); text-decoration: none; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); padding: 5px 12px; }
.r-shot-edit:hover { border-color: var(--r-red); }
.r-lb-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.r-lb-nav:hover { background: rgba(255,255,255,.28); }
.r-lb-nav.prev { left: 18px; }
.r-lb-nav.next { right: 18px; }
.r-lb-count { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--r-ondark-muted); font-size: 13px; }
.r-beleg-shot figcaption { font-size: 12.5px; color: var(--r-muted-fg); margin-top: 8px; }
.r-beleg-ph { display: flex; align-items: center; justify-content: center; height: 200px; border: 1px dashed var(--r-hair-strong); border-radius: var(--radius-md); color: var(--r-muted-fg); font-size: 14px; background: var(--r-surface); }

/* Filter-Toolbar (bündig zur Matrixbreite, als zusammenhängende Werkzeugleiste) */
.r-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-inline: clamp(12px, 3vw, 28px); margin-bottom: 12px; padding: 13px 16px; background: var(--r-surface); border: 1px solid var(--r-hair); border-radius: var(--radius-md); }
.r-fgroup { display: flex; align-items: center; gap: 11px; }
.r-flabel { font-size: 11.5px; font-weight: 700; color: var(--r-muted-fg); text-transform: uppercase; letter-spacing: .07em; }

/* Segmented-Control (Typ) */
.r-seg { display: inline-flex; padding: 3px; background: var(--r-bg); border: 1px solid var(--r-hair); border-radius: var(--radius-pill); }
.r-seg-btn { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--r-muted-fg); padding: 7px 16px; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s, color .15s; }
.r-seg-btn:hover { color: var(--r-ink); }
.r-seg-btn[aria-pressed="true"] { background: var(--r-primary); color: var(--r-on-primary); }

/* Gestyltes Select (Sub-Branche) mit eigenem Chevron */
.r-selectwrap { position: relative; display: inline-flex; }
.r-selectwrap::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--r-muted-fg); border-bottom: 2px solid var(--r-muted-fg); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.r-select { height: 44px; border: 1px solid var(--r-hair); border-radius: var(--radius-ctrl); padding: 0 40px 0 14px; font: inherit; font-size: 16px; background: var(--r-bg); color: var(--r-ink); outline: none; cursor: pointer; min-width: 210px; appearance: none; -webkit-appearance: none; }
.r-select:hover { border-color: var(--r-hair-strong); }
.r-select:focus { border-color: var(--r-ink); }

/* Zähler-Chip + Zurücksetzen */
.r-toolbar-end { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.r-count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--r-muted-fg); }
.r-count::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--score-2); }
.r-count.is-filtered::before { background: var(--r-red); }
.r-count strong { color: var(--r-ink); font-weight: 800; }
.r-reset { border: 0; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--r-red); cursor: pointer; padding: 6px 11px; border-radius: var(--radius-sm); }
.r-reset:hover { background: color-mix(in srgb, var(--r-red) 10%, transparent); }
.r-reset[hidden] { display: none; }
table.r-matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.r-matrix th, .r-matrix td { padding: 6px 7px; text-align: center; white-space: nowrap; }

/* Kopf: Kapitel-Gruppen + Codes */
.r-matrix thead .chgroup th { position: sticky; top: 0; z-index: 3; background: var(--r-surface); font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--r-ink); font-weight: 700; padding: 9px 7px; border-bottom: 1px solid var(--r-hair); }
/* Vertikale Spaltenköpfe: volles Label in Spaltenbreite + dezenter Code-Präfix, Kopfband ~184px */
.r-matrix thead .codes th { position: sticky; top: 33px; z-index: 3; background: var(--r-bg); height: 170px; padding: 8px 0 8px; vertical-align: bottom; border-bottom: 1px solid var(--r-hair-strong); }
.r-matrix thead .codes th .rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin: 0 auto; }
.r-matrix thead .codes th .rot > span { font-size: 15.5px; line-height: 32px; font-weight: 600; color: var(--r-ink); }
/* position bewusst NICHT auf relative setzen: würde das sticky/top:33px der
   Basisregel überschreiben und den Kopf 33px über die erste Zeile schieben. */
.r-matrix thead .codes th.r-rothead { cursor: help; }

/* Hover-Popover mit der Bewertungsrubrik (Position per JS, viewport-sicher) */
.r-pop { display: none; position: fixed; width: 320px; max-width: 86vw; z-index: 100; background: var(--r-bg); border: 1px solid var(--r-hair-strong); border-radius: var(--radius-lg); box-shadow: 0 24px 60px -22px rgba(10,10,10,.4); padding: 16px 18px; text-align: left; white-space: normal; cursor: default; }
.r-pop-code { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--r-muted-fg); }
.r-pop-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 3px 0 10px; line-height: 1.25; }
.r-pop-desc { font-size: 13px; color: var(--r-muted-fg); margin: 0 0 14px; line-height: 1.5; }
.r-pop-scale { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.r-pop-scale li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--r-ink); }
.r-pop-dot { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.r-pop-dot.s2 { background: var(--score-2); }
.r-pop-dot.s1 { background: var(--score-1); color: var(--score-1-ink); }
.r-pop-dot.s0 { background: var(--score-0); }
.r-matrix thead th.r-shop, .r-matrix thead th.r-pccell { z-index: 5; background: var(--r-surface); vertical-align: bottom; padding-bottom: 10px; }

.r-matrix .ch-start { border-left: 1px solid var(--r-hair); }
.r-matrix .chg { background: color-mix(in srgb, var(--foreground) 3.5%, transparent); }
.r-matrix tbody td { border-bottom: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent); }
.r-matrix tbody tr:hover td { background: color-mix(in srgb, var(--brand-red) 5%, transparent); }
.r-matrix tbody tr:hover td.chg { background: color-mix(in srgb, var(--brand-red) 8%, transparent); }

/* Erste Spalte: Rang + Name + Badge */
.r-matrix .r-shop { position: sticky; left: 0; background: var(--r-bg); text-align: left; min-width: 232px; z-index: 2; border-right: 1px solid var(--r-hair); padding-left: 24px; }
.r-matrix tbody tr:hover .r-shop { background: color-mix(in srgb, var(--brand-red) 5%, transparent); }
.r-shop-inner { display: flex; align-items: center; gap: 12px; }
.r-rank-no { font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); font-size: 13px; font-weight: 700; color: var(--r-muted-fg); width: 22px; text-align: right; flex-shrink: 0; }
.r-rank-no.top { color: var(--r-red); }
.r-shop .nm { font-weight: 700; font-size: 15px; color: var(--r-ink); }
.r-shop-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.r-shop-link:hover, .r-shop-link:focus-visible { color: var(--r-red); border-bottom-color: color-mix(in srgb, var(--r-red) 45%, transparent); }
.r-shop .mt { font-size: 12px; color: var(--r-muted-fg); margin-top: 3px; display: flex; gap: 6px; align-items: center; }

/* Zellen */
/* Ampel-Kreise (gedämpft) mit Ziffer 0/1/2 im Kreis */
.r-cell { width: 22px; height: 22px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; line-height: 1; color: #fff; transition: transform .12s ease; }
.r-cell:hover { transform: scale(1.18); }
.r-cell.s2 { background: var(--score-2); }
.r-cell.s1 { background: var(--score-1); color: var(--score-1-ink); }
.r-cell.s0 { background: var(--score-0); }
.r-matrix td.na { color: color-mix(in srgb, var(--foreground) 20%, transparent); font-size: 13px; }

/* %-Spalte: sticky rechts + farbiger Chip */
.r-matrix .r-pccell { position: sticky; right: 0; background: var(--r-bg); border-left: 1px solid var(--r-hair); z-index: 2; padding-right: 24px; }
.r-matrix tbody tr:hover .r-pccell { background: color-mix(in srgb, var(--brand-red) 5%, transparent); }
.r-scorebox { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.r-scorebox .pts { font-weight: 800; font-size: 15px; white-space: nowrap; letter-spacing: -.01em; }
.r-scorebox .pts small { color: var(--r-muted-fg); font-weight: 600; }
/* Zusammenfassungs-Fußzeile: Markt-Reifegrad je Kriterium */
.r-matrix tfoot .r-foot td, .r-matrix tfoot .r-foot th { border-top: 2px solid var(--r-hair-strong); background: var(--r-surface); padding-top: 11px; padding-bottom: 11px; position: relative; z-index: 7; }
.r-matrix tfoot th.r-shop { text-align: left; font-weight: 800; font-size: 13px; color: var(--r-ink); }
.r-matrix tfoot .r-pccell { background: var(--r-surface); }
.r-foot-na { color: var(--r-muted-fg); }

.r-pctchip { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-weight: 700; font-size: 12px; background: var(--r-surface); color: var(--r-ink); }
.r-pctchip.hi { background: var(--foreground); color: var(--background); }
.r-pctchip.mid { background: color-mix(in srgb, var(--foreground) 13%, transparent); color: var(--r-ink); }
.r-pctchip.lo { background: transparent; color: var(--r-muted-fg); box-shadow: inset 0 0 0 1px var(--r-hair); }

/* Legende */
.r-legend { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--r-muted-fg); flex-wrap: wrap; }
.r-legend .k { display: inline-flex; align-items: center; gap: 7px; }
.r-legend .sw { width: 13px; height: 13px; border-radius: var(--radius-pill); display: inline-block; }

/* Ranking */
.r-rankgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .r-rankgrid { grid-template-columns: 1fr; } }
.r-rankcard { background: var(--r-surface); border-radius: var(--radius-lg); padding: 26px; }
.r-rankcard h3 { font-size: 18px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
table.r-rank { width: 100%; border-collapse: collapse; }
.r-rank td, .r-rank th { padding: 10px 6px; border-bottom: 1px solid var(--r-hair); text-align: left; font-size: 14px; }
.r-rank tr:last-child td { border-bottom: 0; }
.r-rank th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--r-muted-fg); font-weight: 600; }
.r-rank .pos { color: var(--r-muted-fg); font-family: var(--font-sans, 'Outfit', ui-sans-serif, sans-serif); width: 26px; }
.r-rank .nm { font-weight: 600; }
.r-rank .pct { text-align: right; font-weight: 800; }
.r-bar { height: 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--foreground) 9%, transparent); overflow: hidden; margin-top: 5px; }
/* Score-Balken (Podium/Ranking): Farbe folgt dem Wert (Ampel), nicht der Marke. */
.r-bar > span { display: block; height: 100%; background: var(--score-1); }
.r-bar > span.hi { background: var(--score-2); }
.r-bar > span.mid { background: var(--score-1); }
.r-bar > span.lo { background: var(--score-0); }
.r-combined-note { background: var(--r-surface); border-radius: var(--radius-md); padding: 16px 18px; font-size: 13.5px; color: var(--r-muted-fg); margin-bottom: 22px; line-height: 1.5; }

/* Kapitel */
.r-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.r-pill { border: 1px solid var(--r-hair); background: var(--r-bg); border-radius: var(--radius-pill); padding: 9px 15px; cursor: pointer; font: inherit; font-size: 13px; color: var(--r-ink); transition: background .2s, color .2s, border-color .2s; }
.r-pill:hover { background: var(--r-surface); }
.r-pill[aria-selected="true"] { background: var(--r-primary); color: var(--r-on-primary); border-color: var(--r-primary); }
.r-chpane[hidden] { display: none; }

/* Kapitel-Kopf */
.r-ch-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 0; }
.r-ch-head h3 { margin: 0; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.r-ch-score { font-size: 14px; color: var(--r-muted-fg); }
.r-ch-score strong { color: var(--r-ink); font-size: 19px; font-weight: 800; margin-left: 4px; }

/* Benchmark: Kachel-Raster (farbcodiert nach Reifegrad) */
.r-bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 20px 0 36px; }
.r-bench-tile { padding: 14px 14px 12px; border-radius: var(--radius-md); border: 1px solid var(--r-hair); background: var(--r-surface); }
.r-bench-pct { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--r-ink); }
.r-bench-pct span { font-size: .46em; font-weight: 700; margin-left: 2px; }
.r-bench-lbl { font-size: 12px; color: var(--r-muted-fg); margin-top: 9px; line-height: 1.32; }
.r-bench-lbl .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; opacity: .7; margin-right: 3px; }
.r-bench-tile.hi { border-color: color-mix(in srgb, var(--score-2) 45%, var(--r-hair)); }
.r-bench-tile.hi .r-bench-pct { color: var(--score-2); }
.r-bench-tile.mid .r-bench-pct { color: var(--score-1); }
.r-bench-tile.lo { border-color: color-mix(in srgb, var(--r-red) 40%, var(--r-hair)); }
.r-bench-tile.lo .r-bench-pct { color: var(--r-red); }

/* Hero-Beispiel: vollbreiter Screenshot */
/* Deep Dives */
.r-dd { border-top: 1px solid var(--r-hair); padding: 30px 0; max-width: 74ch; }
.r-dd h3 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; margin: 0 0 12px; }
.r-dd p { margin: 0; color: var(--r-muted-fg); font-size: 16.5px; line-height: 1.65; }

/* ===== Erkenntnisse (Magazin-Layout) ===== */
/* Stat-Band unter dem Ausgabe-Kopf */
/* Sektions-Kicker mit Linie */
.r-skicker { display: flex; align-items: center; gap: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted-fg); font-weight: 600; margin: 0 0 8px; }
.r-skicker::after { content: ""; flex: 1; height: 1px; background: var(--r-hair); }

/* ===== Erkenntnisse: dunkler Hero =====
   Bewusste Ausnahme zum hellen Report-Look — die Presse-/Autoritätsseite
   (STYLEGUIDE.md „Dunkler Hero"). Darunter gilt wieder der helle Look. */
.r-hero--dark { background: var(--r-ink-deep); color: var(--r-on-primary); padding: 64px 0 56px; }
.r-dhero { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: end; }
@media (max-width: 980px) { .r-dhero { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
/* Skala des Landing-Heros (74px / 900), nicht die des Gates (84px / 800): die
   Erkenntnisse sind der zweite dunkle Auftritt der Marke, beide sollen gleich
   groß wirken. Ohne diesen Deckel wäre die Headline hier größer und leichter
   als auf der Startseite. */
.r-hero--dark .r-h1 { color: var(--r-on-primary); max-width: 24ch; font-size: clamp(38px, 5.6vw, 74px); line-height: 1.02; letter-spacing: -.045em; font-weight: 900; }
.r-dhero-badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .12); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(255 255 255 / .82); margin-bottom: 24px; }
.r-dhero-badge .r-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--r-red); }
.r-dhero-lead { margin: 0 0 26px; max-width: 54ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--r-ondark-lead); text-wrap: pretty; }
.r-dhero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: rgb(255 255 255 / .74); }
.r-dhero-meta strong { color: var(--r-on-primary); font-weight: 800; }
.r-dhero-meta .p { width: 4px; height: 4px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .38); }

/* Prüf-Panel: die schwächsten Kriterien, Werte live aus dem Report. */
.r-probe { border: 1px solid rgb(255 255 255 / .18); border-radius: var(--radius-md); background: rgb(255 255 255 / .05); overflow: hidden; }
.r-probe-kopf { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-bottom: 1px solid rgb(255 255 255 / .14); font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgb(255 255 255 / .66); }
.r-probe-kopf .r-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--r-red); }
.r-probe-liste { list-style: none; margin: 0; padding: 4px 16px 8px; }
.r-probe-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgb(255 255 255 / .1); }
.r-probe-liste li:last-child { border-bottom: 0; }
.r-probe-liste .l { font-size: 13.5px; font-weight: 600; color: var(--r-ondark-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-probe-liste .v { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 118px; height: 26px; }
.r-probe-liste .skel { position: absolute; right: 0; width: 96px; height: 10px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .18); }
.r-probe-liste .res { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 7px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--score-0) 26%, transparent); font-size: 13px; font-weight: 700; color: var(--score-0-ondark); white-space: nowrap; }
.r-probe-liste .res .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--score-0); color: #fff; }
.r-probe-fuss { position: relative; display: flex; align-items: center; height: 54px; padding: 0 16px; background: rgb(255 255 255 / .05); border-top: 1px solid rgb(255 255 255 / .14); overflow: hidden; }
.r-probe-fuss svg { width: 100%; height: 34px; display: block; }
.r-probe-fuss line { stroke: rgb(255 255 255 / .18); stroke-width: 1; }
.r-probe-fuss .trace { stroke: var(--r-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.r-probe-fuss .alarm { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--score-0); color: #fff; }

/* Animation: Skeleton -> Befund, EKG-Linie, Alarm. Rein dekorativ und deshalb
   komplett hinter `prefers-reduced-motion` — ohne Bewegung steht sofort der
   Endzustand (Befund sichtbar, Linie gezeichnet). */
@media (prefers-reduced-motion: no-preference) {
    .r-probe-liste .skel { animation: r-skel 8s linear infinite; animation-delay: calc(var(--i) * .42s); }
    .r-probe-liste .res { opacity: 0; animation: r-res 8s ease-out infinite; animation-delay: calc(var(--i) * .42s); }
    .r-probe-fuss .trace { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: r-trace 8s linear infinite; }
    .r-probe-fuss .alarm { opacity: 0; animation: r-alarm 8s linear infinite; }
}
@keyframes r-skel { 0%, 34% { opacity: 1 } 42%, 100% { opacity: 0 } }
@keyframes r-res { 0%, 36% { opacity: 0; transform: translateY(3px) } 46%, 94% { opacity: 1; transform: none } 100% { opacity: 0; transform: translateY(3px) } }
@keyframes r-trace { 0% { stroke-dashoffset: 1000 } 62%, 100% { stroke-dashoffset: 0 } }
@keyframes r-alarm { 0%, 58% { opacity: 0 } 62% { opacity: 1 } 70% { opacity: .35 } 76% { opacity: 1 } 84% { opacity: .35 } 92% { opacity: 1 } 100% { opacity: 0 } }

/* ===== Erkenntnisse: Kachelraster + aufklappbares Panel =====
   Die Mechanik ist CSS-only über `:target` (siehe _erkenntnis.html.twig): das
   Panel liegt im DOM direkt nach seiner Kachel, spannt die volle Rasterbreite
   und wird nur sichtbar, wenn die URL auf seine id zeigt. `dense` füllt die
   Lücke, die es in der Kachelreihe hinterlässt, mit den folgenden Kacheln. */
.r-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; grid-auto-flow: row dense; align-items: start; }
@media (max-width: 980px) { .r-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .r-kacheln { grid-template-columns: minmax(0, 1fr); } }
.r-kacheln-hint { margin: 22px 0 0; font-size: 13px; color: var(--r-muted-fg); }
.r-weiter { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--r-hair); }

/* Abschnittskopf: Titel links, „Ansicht schließen" rechts — der Knopf erscheint
   nur, wenn ein Panel offen ist. `:has()` erledigt das ohne JavaScript. */
.r-kacheln-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 22px; scroll-margin-top: 110px; }
.r-kacheln-kopf h2 { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.r-kacheln-zu { display: none; align-items: center; border: 1px solid var(--r-hair); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--r-muted-fg); text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.r-kacheln-zu:hover, .r-kacheln-zu:focus-visible { background: var(--r-surface); border-color: var(--r-hair-strong); color: var(--r-ink); }
.r-section:has(.r-panel:target) .r-kacheln-zu { display: inline-flex; }

/* Alt-Anker der ursprünglichen Thesen: unsichtbar, aber anspringbar.
   `position: absolute` nimmt ihn aus dem Grid-Fluss — als normales Kind würde
   jeder Alias eine Rasterzelle belegen und die Kacheln verschieben. */
.r-anchor-alias { position: absolute; width: 1px; height: 1px; scroll-margin-top: 130px; }

.r-kachel { display: flex; flex-direction: column; gap: 14px; padding: 0 0 20px; border: 1px solid var(--r-hair); border-radius: var(--radius-md); background: var(--r-bg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color .16s, box-shadow .16s; }
.r-kachel:hover, .r-kachel:focus-visible { border-color: var(--r-hair-strong); box-shadow: 0 6px 20px rgba(26,27,31,.07); }
.r-kachel-bild { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--r-surface); border-bottom: 1px solid var(--r-hair); overflow: hidden; }
.r-kachel-bild img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; }
/* Hochgeladenes Motiv: vollständig zeigen statt anschneiden — eine Zeichnung
   verliert ihre Aussage, wenn der markierte Befund aus dem Bild läuft. */
.r-kachel-bild img.motiv { object-fit: contain; object-position: center; }
.r-kachel-bild .ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-kachel-meta { display: flex; align-items: center; gap: 9px; padding: 2px 20px 0; min-width: 0; }
.r-kachel-meta .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--r-red); }
.r-kachel-meta .s { width: 14px; height: 1px; background: var(--r-hair-strong); flex: none; }
.r-kachel-meta .t { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-kachel-meta .c { flex: none; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--r-surface); color: var(--r-muted-fg); }
.r-kachel:hover .c { background: var(--r-primary); color: var(--r-on-primary); }
.r-kachel-meta .c svg { transition: transform .18s ease; }
/* Die Kachel, deren Panel offen ist: hervorgehoben, Chevron gedreht. Das Panel
   folgt seiner Kachel direkt im DOM — `:has(+ …)` findet sie deshalb, ohne dass
   JavaScript einen Zustand pflegen muss. */
.r-kachel:has(+ .r-panel:target) { border-color: var(--r-primary); background: var(--r-surface); }
.r-kachel:has(+ .r-panel:target) .c { background: var(--r-primary); color: var(--r-on-primary); }
.r-kachel:has(+ .r-panel:target) .c svg { transform: rotate(180deg); }
/* `min-height` über zwei Zeilen: so sitzen Teaser und Meta über die ganze Reihe
   auf einer Linie, auch wenn eine Headline kürzer ist (wie im Entwurf). */
.r-kachel-h { margin: 0; padding: 0 20px; min-height: 2.44em; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.22; font-weight: 800; letter-spacing: -.02em; text-wrap: pretty; }
.r-kachel-teaser { margin: auto 0 0; padding: 0 20px; font-size: 14.5px; line-height: 1.5; color: var(--r-muted-fg); text-wrap: pretty; }

/* Panel: nur sichtbar, wenn die URL darauf zeigt. */
.r-panel { display: none; }
.r-panel:target { display: block; grid-column: 1 / -1; border: 1px solid var(--r-primary); border-radius: var(--radius-lg); padding: 34px 32px 36px; scroll-margin-top: 120px; }
.r-panel-kopf { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px solid var(--r-hair); }
.r-panel-titel { min-width: 0; }
.r-panel-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.r-panel-kicker .e { color: var(--r-red); }
.r-panel-kicker .s { width: 16px; height: 1px; background: var(--r-hair-strong); }
.r-panel-kicker .t { color: var(--r-muted-fg); }
.r-panel-titel h3 { margin: 0; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.035em; max-width: 28ch; text-wrap: balance; }
.r-panel-nav { display: inline-flex; gap: 8px; flex: none; }
.r-panel-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--r-hair); border-radius: var(--radius-sm); background: var(--r-bg); color: var(--r-ink); font-size: 15px; text-decoration: none; transition: background .15s, border-color .15s; }
.r-panel-nav-btn:hover, .r-panel-nav-btn:focus-visible { background: var(--r-surface); border-color: var(--r-hair-strong); }
.r-panel-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px 48px; align-items: start; }
@media (max-width: 900px) { .r-panel-zwei { grid-template-columns: minmax(0, 1fr); } }
.r-panel-intro { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--r-muted-fg); max-width: 52ch; text-wrap: pretty; }
.r-panel-intro strong { color: var(--r-ink); font-weight: 600; }
.r-panel-aside { display: grid; gap: 18px; }

/* Kennzahl-Balken im Panel: große Zahl links, Label + Balken rechts. */
.r-kz-kopf { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted-fg); padding-bottom: 16px; border-bottom: 1px solid var(--r-hair); }
.r-kz-liste { display: grid; gap: 22px; margin-top: 20px; max-width: 460px; }
.r-kz { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 20px; align-items: center; }
.r-kz-wert { font-size: clamp(26px, 2.6vw, 34px); line-height: 1; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-kz-wert .e { font-size: .6em; font-weight: 700; margin-left: .12em; }
.r-kz-wert.hi { color: var(--score-2); }
.r-kz-wert.mid { color: var(--score-1); }
.r-kz-wert.lo { color: var(--score-0); }
.r-kz-label { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--r-muted-fg); margin-bottom: 9px; }
.r-kz-track { position: relative; height: 12px; border-radius: var(--radius-pill); background: var(--r-surface); overflow: hidden; }
.r-kz-fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--r-ink); min-width: 3px; }
.r-kz-fill.hi { background: var(--score-2); }
.r-kz-fill.mid { background: var(--score-1); }
.r-kz-fill.lo { background: var(--score-0); }
.r-kz.akzent .r-kz-label { color: var(--r-ink); }

/* Fremdstatistik + Quick Win in der rechten Spalte. Der Quick Win trägt
   bewusst KEIN CTA-Grün: grün gehört dem Conversion-Pfad, sonst konkurriert
   ein Redaktionshinweis mit „Shop-Test anfragen" (STYLEGUIDE.md „Buttons/CTAs"). */
.r-stat { background: var(--r-surface); border-radius: var(--radius-md); padding: 24px 26px; }
.r-stat-num { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; font-weight: 800; letter-spacing: -.035em; margin-bottom: 10px; }
.r-stat-txt { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.r-stat-q { margin: 0; font-size: 12.5px; color: var(--r-muted-fg); }
.r-stat-warn { margin: 10px 0 0; font-size: 12.5px; font-weight: 700; color: var(--score-0); }
/* Quick Win in Score-2-Grün — dem „so geht's"-Grün der Ampel, NICHT dem
   CTA-Grün `--r-cta`. So bleibt der Conversion-Pfad farblich eigenständig,
   obwohl der Quick Win wie im Entwurf grün ist. */
.r-qw { display: flex; align-items: flex-start; gap: 11px; border: 1px solid var(--r-hair); border-left: 3px solid var(--score-2); border-radius: var(--radius-md); padding: 15px 17px; }
.r-qw-icon { flex: none; margin-top: 1px; color: var(--score-2); display: inline-flex; }
.r-qw-k { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--score-2); margin-bottom: 4px; }
.r-qw p { margin: 0; font-size: 14.5px; line-height: 1.55; }

/* Belegte Fälle als Reiter — ohne JavaScript: je Fall ein Radio direkt vor
   seinem Block, deshalb reicht eine generische Regel. */
.r-faelle { margin-top: 34px; }
.r-fall-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.r-fall-tab { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--r-hair); border-radius: var(--radius-sm); padding: 9px 15px; font-size: 13.5px; font-weight: 700; color: var(--r-muted-fg); background: var(--r-bg); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.r-fall-tab:hover { border-color: var(--r-hair-strong); color: var(--r-ink); }
.r-fall-tab svg { flex: none; }
.r-fall-tab--negativ svg { color: var(--score-0); }
.r-fall-tab--positiv svg { color: var(--score-2); }
.r-fall-tab--innovativ svg { color: var(--r-innovation); }
.r-fall-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.r-fall { display: none; }
.r-fall-radio:checked + .r-fall { display: block; }
/* Aktiver Reiter: die Radios stehen in Dokumentreihenfolge vor den Beschriftungen
   nicht zur Verfügung, deshalb über die Position im Körper gespiegelt. Max. drei
   Rollen, also drei Regeln — generisch, ohne id-Bezug. */
.r-fall-koerper { position: relative; }
/* Aktiver Reiter in der Rollenfarbe gefüllt (wie im Entwurf). `--rolle` hängt an
   der Rollen-Klasse, die drei `:has()`-Regeln schalten nur den Aktiv-Zustand.
   Die Farbe kommt aus der Ampel bzw. --r-innovation, nie aus dem Marken-Rot. */
.r-fall-tab--negativ { --rolle: var(--score-0); }
.r-fall-tab--positiv { --rolle: var(--score-2); }
.r-fall-tab--innovativ { --rolle: var(--r-innovation); }
.r-fall-tab svg { color: var(--rolle); }
.r-faelle:has(.r-fall-radio:nth-of-type(1):checked) .r-fall-tab:nth-child(1),
.r-faelle:has(.r-fall-radio:nth-of-type(2):checked) .r-fall-tab:nth-child(2),
.r-faelle:has(.r-fall-radio:nth-of-type(3):checked) .r-fall-tab:nth-child(3) { background: var(--rolle); border-color: var(--rolle); color: #fff; }
.r-faelle:has(.r-fall-radio:nth-of-type(1):checked) .r-fall-tab:nth-child(1) svg,
.r-faelle:has(.r-fall-radio:nth-of-type(2):checked) .r-fall-tab:nth-child(2) svg,
.r-faelle:has(.r-fall-radio:nth-of-type(3):checked) .r-fall-tab:nth-child(3) svg { color: currentColor; }
.r-fall-radio:focus-visible + .r-fall { outline: 2px solid var(--r-red); outline-offset: 4px; }

.r-quotebar { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

/* Shop-Test-Band am Seitenende (aus dem Entwurf). Dunkler Kasten, Knopf grün —
   Conversion-Pfad (STYLEGUIDE.md „CTA immer Grün"), nicht rot wie im Entwurf. */
/* Luft ober- und unterhalb: der Kasten soll klar auf Weiß stehen und nicht an
   den vorigen Abschnitt stoßen. */
.r-shopband { padding: 8px 0 84px; }
.r-shopband-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 44px; align-items: center; background: var(--r-ink-deep); color: var(--r-on-primary); border-radius: var(--radius-lg); padding: 48px 46px; }
.r-shopband-box h2 { margin: 0 0 12px; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; max-width: 24ch; text-wrap: balance; }
.r-shopband-box p { margin: 0; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; color: var(--r-ondark-lead); max-width: 52ch; text-wrap: pretty; }
/* Knopf in einer Flex-Zeile: `flex: 0 0 auto` + `nowrap` sind Pflicht. Ohne sie
   schrumpft er bei mittlerer Breite unter seine Textbreite, der Text bricht um
   und quillt aus dem festen Pill (der Breiten-Sweep findet genau das). */
.r-shopband-box .r-cta-btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 780px) {
    .r-shopband-box { grid-template-columns: minmax(0, 1fr); padding: 32px 26px; }
}
.r-copyq { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); background: var(--r-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--r-ink); padding: 8px 16px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.r-copyq:hover { background: var(--r-primary); color: var(--r-on-primary); border-color: var(--r-primary); }
.r-copyq.copied { background: var(--score-2); border-color: var(--score-2); color: #fff; }

.r-pullquote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--r-red); }
.r-pullquote p { margin: 0 0 10px; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.35; font-weight: 700; letter-spacing: -.02em; color: var(--r-ink); }
.r-pullquote cite { font-style: normal; font-size: 12.5px; color: var(--r-muted-fg); }

/* Belegter Fall: Browser-Rahmen mit echtem Screenshot, darunter Shop und
   Begründung (Reihenfolge wie im Entwurf: erst den Befund sehen, dann lesen,
   wer es ist). Der Rahmen trägt die Rollenfarbe — Ampel bzw. --r-innovation,
   nie das Marken-Rot (STYLEGUIDE.md „Ampel != Marke"). */
.r-gold { grid-column: 1 / -1; margin-top: 30px; --rolle: var(--score-2); }
.r-fall .r-gold { margin-top: 0; }
.r-gold--negativ { --rolle: var(--score-0); }
.r-gold--positiv { --rolle: var(--score-2); }
.r-gold--innovativ { --rolle: var(--r-innovation); }
.r-gold .r-browser { border: 2px solid var(--rolle); }
.r-gold-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; margin-top: 16px; }
.r-gold-wer { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.r-gold-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-pill); background: var(--rolle); color: #fff; }
.r-gold-shop { font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.r-gold-chip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; padding: 5px 11px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--rolle) 40%, transparent); color: var(--rolle); font-weight: 700; }
.r-gold-chip.full { border-color: color-mix(in srgb, var(--score-2) 40%, transparent); color: var(--score-2); }
.r-gold-warum { grid-column: 1; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--r-muted-fg); max-width: 64ch; }
.r-gold-warum b { color: var(--r-ink); }
.r-gold-links { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.r-vollbild { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--r-hair); border-radius: var(--radius-sm); background: var(--r-bg); font: inherit; font-size: 13px; font-weight: 600; color: var(--r-muted-fg); padding: 7px 13px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.r-vollbild:hover, .r-vollbild:focus-visible { background: var(--r-surface); border-color: var(--r-hair-strong); color: var(--r-ink); }
@media (max-width: 700px) {
    .r-gold-fuss { grid-template-columns: minmax(0, 1fr); }
    .r-gold-links { grid-column: 1; grid-row: auto; align-items: flex-start; }
}
.r-browser { border: 1px solid var(--r-hair); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 34px 70px -46px rgba(10,10,10,.4); background: var(--r-bg); }
.r-browser .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--r-surface); border-bottom: 1px solid var(--r-hair); }
.r-browser .dots { display: inline-flex; gap: 5px; }
.r-browser .dots i { width: 10px; height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--foreground, #1a1b1f) 18%, transparent); }
.r-browser .url { flex: 1; max-width: 380px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--r-muted-fg); background: var(--r-bg); border: 1px solid var(--r-hair); border-radius: var(--radius-sm); padding: 5px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-browser img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; cursor: zoom-in; }
.r-browser iframe { width: 100%; display: block; aspect-ratio: 16 / 9; border: 0; background: var(--r-ink); }
.r-browser .ph { display: grid; place-items: center; aspect-ratio: 16 / 6; color: var(--r-muted-fg); font-size: 14px; background: var(--r-surface); }

/* Randnotiz: Mini-Kennzahlen */
.r-minirow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 820px) { .r-minirow { grid-template-columns: 1fr; } }
.r-minicard { border: 1px solid var(--r-hair); border-radius: var(--radius-md); padding: 20px 20px 18px; }
.r-minicard .mn { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--r-red); }
.r-minicard .mn small { font-size: .5em; font-weight: 700; }
.r-minicard .ml { font-size: 14.5px; font-weight: 800; margin-top: 9px; }
.r-minicard .ms { font-size: 12.5px; color: var(--r-muted-fg); margin-top: 4px; line-height: 1.45; }

/* Markt-Kontext auf der Startseite: PoC-Inhalt im Standardcontainer des
   Reports. Die Namen sind nur zum Schutz der übrigen Report-Komponenten
   vor Seiteneffekten gekapselt. */
.r-poc-market { padding: clamp(40px, 6vw, 72px) 0; }
.r-poc-skicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--r-muted-fg); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.r-poc-skicker .r-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--r-red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--r-red) 20%, transparent); }
.r-poc-sub2 { max-width: 68ch; margin: 0 0 34px; color: var(--r-muted-fg); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.6; }
.r-poc-scale-card { display: grid; grid-template-columns: 1.9fr auto; align-items: center; gap: clamp(20px, 3.5vw, 44px); margin-bottom: 26px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--r-hair); border-radius: var(--radius-md); background: var(--r-bg); box-shadow: 0 30px 70px -55px color-mix(in srgb, var(--r-ink) 40%, transparent); }
.r-poc-scale-bars { min-width: 0; }
.r-poc-scale-row { margin-bottom: 20px; }
.r-poc-scale-row:last-child { margin-bottom: 0; }
.r-poc-scale-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.r-poc-scale-name { font-size: 14px; font-weight: 700; white-space: nowrap; }
.r-poc-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.r-poc-tag--her { background: var(--r-surface); color: var(--r-ink); }
.r-poc-tag--gh { background: var(--r-surface); color: var(--r-ink); }
.r-poc-scale-val { color: var(--r-ink); font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.r-poc-scale-val span { color: var(--r-muted-fg); font-size: .68em; font-weight: 700; }
.r-poc-scale-track { height: 16px; overflow: hidden; border-radius: var(--radius-pill); background: var(--r-hair); }
.r-poc-scale-track span { display: block; height: 100%; border-radius: inherit; }
.r-poc-scale-fill--a { background: var(--r-red); }
.r-poc-scale-fill--b { background: color-mix(in srgb, var(--r-red) 80%, var(--r-bg)); }
.r-poc-scale-total { min-width: 190px; padding-left: clamp(0px, 2vw, 20px); border-left: 1px solid var(--r-hair); text-align: right; }
.r-poc-scale-total-title { margin-bottom: 8px; color: var(--r-muted-fg); font-size: 12.5px; }
.r-poc-scale-total-number { color: var(--r-ink); font-size: clamp(40px, 5vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.r-poc-scale-total-number span { margin-left: 3px; font-size: .42em; font-weight: 700; }
.r-poc-scale-total-description { margin-top: 10px; color: var(--r-muted-fg); font-size: 12px; line-height: 1.45; }
.r-poc-scale-foot { grid-column: 1 / -1; margin: 6px 0 0; color: var(--r-muted-fg); font-size: 12.5px; line-height: 1.5; }
.r-poc-chart-card { margin: 0 0 26px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--r-hair); border-radius: var(--radius-md); background: var(--r-bg); box-shadow: 0 30px 70px -55px color-mix(in srgb, var(--r-ink) 40%, transparent); }
.r-poc-chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px 24px; margin-bottom: 30px; }
.r-poc-chart-title { margin: 0; color: var(--r-ink); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.r-poc-chart-title small { display: block; margin-top: 4px; color: var(--r-muted-fg); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.r-poc-chart-legend { display: inline-flex; align-items: center; gap: 8px; color: var(--r-muted-fg); font-size: 12.5px; }
.r-poc-chart-legend i { width: 18px; height: 3px; border-radius: var(--radius-pill); background: var(--score-2); }
.r-poc-area-chart { display: block; width: 100%; height: auto; overflow: visible; }
.r-poc-area-fill { fill: color-mix(in srgb, var(--score-2) 12%, transparent); }
.r-poc-area-line { fill: none; stroke: var(--score-2); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.r-poc-area-axis { stroke: var(--r-hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.r-poc-area-dot { fill: var(--score-2); stroke: var(--r-bg); stroke-width: 3; }
.r-poc-chart-value { fill: var(--r-ink); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.r-poc-chart-value--end { fill: var(--r-ink); }
.r-poc-chart-unit { fill: var(--r-muted-fg); font-size: 13px; font-weight: 700; }
.r-poc-chart-yoy { fill: var(--score-2); font-size: 13.5px; font-weight: 700; }
.r-poc-chart-year { fill: var(--r-muted-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; }
.r-poc-chart-foot { margin: 20px 0 0; color: var(--r-muted-fg); font-size: 12.5px; line-height: 1.5; }
.r-poc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.r-poc-tile { display: flex; flex-direction: column; padding: 24px 22px 20px; border: 1px solid var(--r-hair); border-radius: var(--radius-md); background: var(--r-bg); }
.r-poc-tile-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--r-ink); font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.r-poc-tile-kicker span { color: var(--r-muted-fg); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; }
.r-poc-tile-value { color: var(--r-ink); font-size: clamp(42px, 5vw, 56px); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.r-poc-tile-value span { margin-left: 2px; font-size: .4em; font-weight: 700; }
.r-poc-tile p { margin: 14px 0 16px; color: var(--r-ink); font-size: 14px; line-height: 1.5; }
.r-poc-source { margin-top: auto; color: var(--r-muted-fg); font-size: 11.5px; }
.r-poc-mini { display: flex; align-items: flex-end; gap: 8px; height: 46px; margin: 16px 0 4px; }
.r-poc-mini > div { position: relative; width: 26px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--r-hair-strong); }
.r-poc-mini > .r-poc-mini-current { background: var(--r-red); }
.r-poc-mini small { position: absolute; top: -18px; left: 50%; color: var(--r-muted-fg); font-size: 11px; font-weight: 700; transform: translateX(-50%); }
.r-poc-mini .r-poc-mini-current small { color: var(--r-red); }
.r-poc-mini .r-poc-mini-label { align-self: flex-end; width: auto; margin-left: 2px; background: transparent; color: var(--r-muted-fg); font-size: 11px; }
.r-poc-delta { display: flex; width: fit-content; align-items: center; gap: 5px; margin: 14px 0 8px; color: var(--score-2); font-size: 13px; font-weight: 700; }
.r-poc-meter { height: 12px; overflow: hidden; margin: 16px 0 6px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--score-2) 18%, var(--r-bg)); }
.r-poc-meter span { display: block; height: 100%; border-radius: inherit; background: var(--score-0); }
.r-poc-meter-label { display: flex; justify-content: space-between; color: var(--r-muted-fg); font-size: 11.5px; }
.r-poc-tie-in { margin-top: 26px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--r-surface); color: var(--r-ink); font-size: 14px; line-height: 1.55; }
.r-poc-tie-in strong { color: var(--r-red); }

@media (max-width: 860px) { .r-poc-tiles { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
    .r-poc-scale-card { grid-template-columns: 1fr; }
    .r-poc-scale-total { padding-top: 18px; padding-left: 0; border-top: 1px solid var(--r-hair); border-left: 0; text-align: left; }
}

/* Erkenntnisse-Vorschau: Zwei Fakten liefern Wert, der Vorhang bewahrt die
   restliche Tiefe für die ausführliche, belegte Seite. */
.r-insight-teaser { border-top: 1px solid var(--r-hair); }
.r-insight-teaser h2 { max-width: 21ch; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; }
.r-insight-stack { position: relative; }
.r-insight-teaser-item { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 20px clamp(24px, 4vw, 52px); align-items: start; padding: 32px 0; border-bottom: 1px solid var(--r-hair); }
.r-insight-teaser-item:first-child { padding-top: 8px; }
.r-insight-number { margin-bottom: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-insight-teaser-item h3 { max-width: 26ch; margin: 0 0 12px; font-size: clamp(22px, 2.7vw, 32px); font-weight: 800; line-height: 1.12; letter-spacing: -.03em; }
.r-insight-teaser-item h3 .r-hl { padding: .01em .14em; border-radius: var(--radius-hair); background: color-mix(in srgb, var(--r-red) 15%, transparent); color: var(--r-ink); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.r-insight-teaser-item p { max-width: 66ch; margin: 0; font-size: 15px; line-height: 1.6; color: var(--r-muted-fg); }
.r-insight-metric-card { padding: 18px 20px; border-radius: var(--radius-md); background: var(--r-surface); }
.r-insight-metric-card > b { display: block; margin-bottom: 14px; font-size: 12.5px; font-weight: 800; line-height: 1.3; color: var(--r-ink); }
.r-insight-meter { margin-bottom: 13px; }
.r-insight-meter:last-child { margin-bottom: 0; }
.r-insight-meter > span { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 12.5px; line-height: 1.35; color: var(--r-muted-fg); }
.r-insight-meter i { font-style: normal; }
.r-insight-meter strong { flex: 0 0 auto; font-weight: 800; color: var(--r-ink); font-variant-numeric: tabular-nums; }
.r-insight-meter em { display: block; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--r-hair); }
.r-insight-meter em i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: color-mix(in srgb, var(--r-ink) 55%, var(--r-bg)); }
.r-insight-meter--accent strong { color: var(--r-red); }
.r-insight-meter--accent em i { background: var(--r-red); }
.r-insight-quote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--r-red); }
.r-insight-quote p { font-size: 18px; font-weight: 800; line-height: 1.4; letter-spacing: -.02em; color: var(--r-ink); }
.r-insight-quote cite { display: block; margin-top: 9px; font-size: 12.5px; font-style: normal; line-height: 1.4; color: var(--r-muted-fg); }
.r-insight-teaser--continued { padding-top: 24px; }
@media (max-width: 900px) {
    .r-insight-teaser-item { grid-template-columns: 1fr; gap: 16px; }
    .r-insight-aside { max-width: 520px; }
}

/* Trustline: Redaktion + Beleg-Versprechen */
.r-trust { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 34px; margin-top: 26px; }
.r-avatars { display: inline-flex; }
.r-avatars span { width: 38px; height: 38px; border-radius: var(--radius-pill); background: var(--r-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12.5px; border: 2px solid var(--r-bg); overflow: hidden; }
.r-avatars span img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-avatars span + span { margin-left: -10px; }
.r-byline-2 a { color: inherit; text-decoration: none; font-weight: 600; }
.r-byline-2 a:hover { color: var(--r-red); }
.r-trust-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--score-2); }

/* Sektionskopf mit Weiterlese-Link rechts */
.r-sechead { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 14px; }
.r-sechead h2 { margin: 6px 0 0; }
.r-sechead .r-link-more { margin-bottom: 6px; }

/* Drei Muster: Anriss-Karten in die Erkenntnisse */
.r-findings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
@media (max-width: 900px) { .r-findings { grid-template-columns: 1fr; } }
.r-finding { display: flex; flex-direction: column; padding: 24px 24px 20px; border: 1px solid var(--r-hair); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.r-finding:hover, .r-finding:focus-visible { border-color: var(--r-ink); box-shadow: 0 24px 50px -40px rgba(10,10,10,.4); }
.r-finding .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); margin-bottom: 10px; }
.r-finding h3 { font-size: 19px; line-height: 1.2; letter-spacing: -.02em; font-weight: 800; margin: 0 0 10px; }
.r-finding p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--r-muted-fg); }
.r-finding p strong { color: var(--r-ink); }

/* Kapitel-Heatmap */
/* Spaltenzahl folgt der Kapitelanzahl (6/7) statt fest 6 */
.r-chapgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 980px) { .r-chapgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .r-chapgrid { grid-template-columns: repeat(2, 1fr); } }
.r-chap { display: block; padding: 16px 16px 14px; border: 1px solid var(--r-hair); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.r-chap:hover, .r-chap:focus-visible { background: var(--r-surface); }
.r-chap .ck { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--r-muted-fg); }
.r-chap .cn { font-size: 13px; font-weight: 700; margin-top: 4px; min-height: 2.6em; line-height: 1.3; }
.r-chap .cp { font-size: 28px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 4px; }
.r-chap .cp small { font-size: .5em; font-weight: 700; }
.r-chap .cbar { height: 5px; border-radius: var(--radius-hair); background: color-mix(in srgb, var(--foreground, #1a1b1f) 8%, transparent); overflow: hidden; margin-top: 10px; }
.r-chap .cbar span { display: block; height: 100%; border-radius: var(--radius-hair); background: var(--r-ink); }
.r-chap.hi { border-color: color-mix(in srgb, var(--score-2) 45%, var(--r-hair)); }
.r-chap.hi .cp { color: var(--score-2); }
.r-chap.hi .cbar span { background: var(--score-2); }
.r-chap.mid .cp { color: var(--r-ink); }
.r-chap.mid .cbar span { background: var(--score-1); }
.r-chap.lo { border-color: color-mix(in srgb, var(--r-red) 40%, var(--r-hair)); }
.r-chap.lo .cp { color: var(--r-red); }
.r-chap.lo .cbar span { background: var(--r-red); }
.r-chap-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
.r-chap-cta .note { font-size: 12.5px; color: var(--r-muted-fg); }

/* Quick Wins */
.r-qw { background: var(--r-surface); }
.r-qw-list { border-top: 1px solid var(--r-hair-strong); margin-top: 10px; }
.r-qw-row { display: grid; grid-template-columns: 90px minmax(0, .8fr) minmax(0, 1.2fr) 130px; gap: 10px 26px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--r-hair); }
@media (max-width: 900px) { .r-qw-row { grid-template-columns: 70px 1fr; } .r-qw-row .why { grid-column: 2; } .r-qw-row .stat { grid-column: 2; } }
.r-qw-row .pct { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--r-red); font-variant-numeric: tabular-nums; }
.r-qw-row .crit .t { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.r-qw-row .crit .k { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--r-muted-fg); margin-top: 3px; }
.r-qw-row .why { font-size: 13.5px; line-height: 1.5; color: var(--r-muted-fg); }
.r-qw-row .stat { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--r-ink); text-align: right; white-space: nowrap; }
.r-qw-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.r-qw-foot .s { font-size: 12.5px; color: var(--r-muted-fg); }

/* CTA mit Ablauf-Schritten */
.r-cta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 30px 70px; align-items: center; }
@media (max-width: 900px) { .r-cta-grid { grid-template-columns: 1fr; } }
.r-ctasteps { display: flex; flex-direction: column; gap: 14px; }
.r-ctasteps .st { display: flex; gap: 16px; padding: 15px 18px; background: color-mix(in srgb, var(--r-on-primary) 6%, transparent); border: 1px solid color-mix(in srgb, var(--r-on-primary) 14%, transparent); border-radius: var(--radius-md); }
.r-ctasteps .n { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--r-on-primary) 55%, transparent); }
.r-ctasteps .t b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.r-ctasteps .t span { font-size: 12.5px; line-height: 1.45; color: color-mix(in srgb, var(--r-on-primary) 62%, transparent); }

/* Shop-Test anfragen: Lead-Formular */
.r-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 34px 70px; align-items: start; }
@media (max-width: 900px) { .r-form-grid { grid-template-columns: 1fr; } }
.r-ctasteps.light .st { background: var(--r-surface); border-color: var(--r-hair); }
.r-ctasteps.light .n { color: var(--r-muted-fg); }
.r-ctasteps.light .t span { color: var(--r-muted-fg); }
.r-form-note { margin-top: 18px; font-size: 13px; color: var(--score-2); font-weight: 600; }
.r-form-card { border: 1px solid var(--r-hair-strong); border-radius: var(--radius-lg); padding: 30px 32px 32px; box-shadow: 0 34px 70px -50px rgba(10,10,10,.35); }
.r-form-card label { display: block; font-size: 13px; font-weight: 700; color: var(--r-ink); margin-bottom: 16px; }
.r-form-card input[type="text"], .r-form-card input[type="email"] { display: block; width: 100%; height: 48px; margin-top: 6px; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-ctrl); padding: 0 14px; font: inherit; font-size: 16px; font-weight: 400; background: var(--r-bg); color: var(--r-ink); outline: none; }
.r-form-card input:focus { border-color: var(--r-ink); }
.r-form-card .r-select { margin-top: 6px; height: 48px; font-weight: 400; min-width: 0; }
.r-form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .r-form-row2 { grid-template-columns: 1fr; } }
.r-form-check { display: flex !important; gap: 11px; align-items: flex-start; font-weight: 400 !important; font-size: 12.5px !important; color: var(--r-muted-fg) !important; line-height: 1.5; margin: 4px 0 20px !important; cursor: pointer; }
.r-form-check input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--r-red); flex: 0 0 auto; }
.r-form-errors { background: color-mix(in srgb, var(--r-red) 8%, var(--r-bg)); border: 1px solid color-mix(in srgb, var(--r-red) 35%, transparent); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 20px; }
.r-form-errors p { margin: 0; font-size: 13.5px; color: var(--score-0-fg); font-weight: 600; }
.r-form-errors p + p { margin-top: 6px; }
.r-form-success { text-align: center; padding: 26px 10px 16px; }
.r-form-success .ic { width: 56px; height: 56px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--score-2) 14%, transparent); color: var(--score-2); font-size: 26px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.r-form-success h2 { font-size: 24px; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; margin: 0 0 10px; }
.r-form-success p { font-size: 14.5px; line-height: 1.55; color: var(--r-muted-fg); margin: 0; }

/* So testen wir: die Methode in vier Schritten */
.r-method { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px; }
@media (max-width: 980px) { .r-method { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .r-method { grid-template-columns: 1fr; } }
.r-mstep { border: 1px solid var(--r-hair); border-radius: var(--radius-md); padding: 20px 20px 18px; }
.r-mstep .n { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-pill); background: var(--r-primary); color: var(--r-on-primary); font-weight: 800; font-size: 13.5px; margin-bottom: 12px; }
.r-mstep .t { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 6px; }
.r-mstep p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--r-muted-fg); }

/* Wer den Report macht: pro Unternehmen ein Block — Desktop zweispaltig
   (Firma links, Köpfe rechts in der sonst leeren Fläche), Mobile gestapelt. */
.r-groups { display: grid; gap: 14px; margin-top: 8px; }
.r-orggroup { border: 1px solid var(--r-hair); border-radius: var(--radius-lg); padding: 26px 28px; }
.r-orglogo { height: 34px; margin-bottom: 14px; }
.r-orglogo img { height: 100%; width: auto; max-width: 200px; object-fit: contain; display: block; }
.r-orgrole { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--r-muted-fg); margin-bottom: 8px; }
.r-orggroup p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--r-muted-fg); }
.r-orglink { display: inline-flex; }

/* Köpfe eines Unternehmens: großes Porträt + Name darunter */
.r-orggroup-people { display: flex; flex-wrap: wrap; gap: 24px 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--r-hair); }
.r-person { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.r-team-av { flex: 0 0 auto; width: 104px; height: 104px; border-radius: var(--radius-pill); background: var(--r-red); color: #fff; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.r-team-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-person .nm { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }

@media (min-width: 901px) {
    .r-orggroup { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; align-items: center; }
    .r-orggroup-people { margin-top: 0; padding-top: 0; border-top: 0; justify-content: center; }
}

/* Medienpartner: zwei Karten nebeneinander, je Logo + ein Satz + Link.
   Flacher als der Herausgeber-Block: keine Köpfe, keine zweite Spalte. */
.r-medien { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
@media (max-width: 720px) { .r-medien { grid-template-columns: 1fr; } }
.r-medienkarte { border: 1px solid var(--r-hair); border-radius: var(--radius-lg); padding: 26px 28px; }
.r-medienkarte p { margin: 0 0 16px; font-size: 16px; line-height: 1.55; color: var(--r-muted-fg); }
/* Beide Partner-Logos sind sehr breite Wortmarken — Höhe begrenzt die Fläche,
   die Breitenschranke fängt die extremen Seitenverhältnisse ab. */
.r-medienlogo { height: 30px; margin-bottom: 18px; }
.r-medienlogo img { height: 100%; width: auto; max-width: min(100%, 260px); object-fit: contain; object-position: left center; display: block; }

/* Kriterienkatalog (So testen wir): horizontales Karussell der Kapitel.
   Scroll-Snap + minimale Prev/Next-Buttons (carousel_controller.js), damit
   auch ohne funktionierenden Maus-Swipe geblättert werden kann. Full-bleed:
   die Reihe läuft über den zentrierten Container hinaus bis zum Rand, damit
   auf Desktop keine Karte am Container-Rand abgeschnitten wird. align-items:
   start + min-height -> gleiche Default-Höhe, ohne dass ein aufgeklapptes
   <details> die Nachbarkarten streckt. */
.r-kathead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.r-katnav { display: flex; gap: 8px; flex: 0 0 auto; padding-bottom: 4px; }
.is-static .r-katnav { display: none; }
.r-katnav-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--r-hair-strong); background: var(--r-bg); color: var(--r-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; }
.r-katnav-btn:hover:not(:disabled) { background: var(--r-surface); border-color: var(--r-ink); }
.r-katnav-btn:disabled { opacity: .32; cursor: default; }
.r-katnav-btn svg { width: 18px; height: 18px; display: block; }
@media (max-width: 640px) { .r-katnav { display: none; } }

.r-katalog {
    --edge: max(24px, calc((100% - var(--container)) / 2 + 24px));
    display: flex;
    align-items: start;
    gap: 20px;
    margin-top: 20px;
    padding: 0 var(--edge) 6px;
    scroll-padding-left: var(--edge);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
@media (max-width: 640px) { .r-katalog { --edge: 18px; } }
.r-katalog::-webkit-scrollbar { display: none; }
.r-katcard {
    flex: 0 0 clamp(280px, 80vw, 340px);
    scroll-snap-align: start;
    min-height: 420px;
    border: 1px solid var(--r-hair);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--r-bg);
}
.r-katteaser { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--r-surface-dark); }
@media (max-width: 560px) { .r-katteaser { aspect-ratio: 2 / 1; } }
.r-katbody { padding: 16px 18px 18px; }
.r-katnr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-katcard h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 8px 0 12px; }
.r-katcard ul { margin: 0; padding: 0; list-style: none; }
.r-katcard li { font-size: 13.5px; line-height: 1.5; color: var(--r-muted-fg); padding-left: 18px; position: relative; margin-bottom: 5px; }
.r-katcard li:last-child { margin-bottom: 0; }
.r-katcard li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--r-red); }
/* Fold: "+N weitere Kriterien" via natives <details> */
.r-katmore { margin-top: 12px; }
.r-katmore > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--r-red); padding: 2px 0; }
.r-katmore > summary::-webkit-details-marker { display: none; }
/* Nur aufklappen: einmal geöffnet, verschwindet der Umschalter (kein Einklappen).
   Aufgeklappt schließt die Liste bündig an die sichtbaren Kriterien an (gleicher
   Zeilenabstand), statt einen zusätzlichen Absatz zu erzeugen. */
.r-katmore[open] > summary { display: none; }
.r-katmore > ul { margin-top: 0; }
.r-katmore[open] { margin-top: 5px; }

/* Kriterium mit Bewertungsrubrik: dezenter Trigger für das Hover/Tap-Popover.
   Auffindbarkeit bewusst zurückhaltend (gepunktete Linie + cursor:help); auf
   Touch primär über Tap/Fokus. */
.r-katcard li.r-katkrit { cursor: help; }
.r-katcard li.r-katkrit .lbl {
    border-bottom: 1px dotted color-mix(in srgb, var(--r-muted-fg) 55%, transparent);
}
.r-katcard li.r-katkrit:hover .lbl,
.r-katcard li.r-katkrit:focus-visible .lbl {
    color: var(--r-ink);
    border-bottom-color: var(--r-red);
}
.r-katcard li.r-katkrit:focus { outline: none; }
.r-katcard li.r-katkrit:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--r-red) 55%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ---- Bewertungs-Popover (Katalog) --------------------------------------
   Eigenständiges Design (nicht der generische .r-pop-Look): Kopf mit Code +
   Kriterium, darunter die Prüffrage, dann die 0/1/2-Skala als klar getrennte
   Zeilen — je mit Punkte-Badge, Status und Begründung in der Score-Farbe.
   Basis-.r-pop liefert nur noch das Plumbing (display none/block, position:
   fixed via report#showPop); Aussehen komplett hier überschrieben. */
.r-katpop {
    width: min(360px, 92vw);
    padding: 17px 17px 16px;
    border: 1px solid var(--r-hair-strong);
    border-radius: var(--radius-lg);
    background: var(--r-bg);
    box-shadow: 0 24px 60px -22px rgba(10, 10, 10, .45);
    /* Nie höher als der Viewport: lange Rubriken auf kleinen Handys sonst unten
       abgeschnitten (showPop klemmt die Position, kappt aber nicht die Höhe).
       Überlauf scrollt dann innerhalb des Layers. */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
/* Listen-Stil des .r-katcard hier abschalten (kein Aufzählungspunkt/Einzug). */
.r-katpop ul, .r-katpop li { margin: 0; padding: 0; list-style: none; }
.r-katpop li::before { display: none; }

.r-katpop-head { display: flex; align-items: baseline; gap: 8px; }
.r-katpop-code {
    flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--r-muted-fg);
}
.r-katpop-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--r-ink); }
/* Prüffrage: klar von Kopf und Skala abgesetzt, damit sie nicht anklebt. */
.r-katpop-q {
    margin: 11px 0 15px; font-size: 12.5px; line-height: 1.55; color: var(--r-muted-fg);
}

/* Trennlinie über der Skala löst sie optisch vom Kopf/der Prüffrage. Ohne
   Prüffrage sitzt der Abstand am Kopf, mit Prüffrage an dieser. */
.r-katpop-scale {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--r-hair);
}
.r-katpop-q + .r-katpop-scale { margin-top: 0; }
.r-katpop-scale > li {
    display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start;
    padding: 10px 12px; border-radius: var(--radius-ctrl);
    border-left: 3px solid var(--sc);
    background: color-mix(in srgb, var(--sc) 8%, var(--r-bg));
}
.r-katpop-scale > li.s2 { --sc: var(--score-2); }
.r-katpop-scale > li.s1 { --sc: var(--score-1); }
.r-katpop-scale > li.s0 { --sc: var(--score-0); }
.r-katpop-badge {
    align-self: start; white-space: nowrap; font-size: 11px; font-weight: 700;
    letter-spacing: .01em; color: #fff; background: var(--sc);
    padding: 3px 8px; border-radius: var(--radius-pill);
}
.r-katpop-scale > li.s1 .r-katpop-badge { color: var(--score-1-ink); }
.r-katpop-def { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-top: 1px; }
.r-katpop-def .st {
    font-size: 12.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    color: color-mix(in srgb, var(--sc) 72%, var(--r-ink));
}
.r-katpop-def .tx { font-size: 12.5px; line-height: 1.5; color: var(--r-muted-fg); }

/* FAQ (So testen wir): natives Accordion via <details> */
.r-faqlist { max-width: 820px; border-top: 1px solid var(--r-hair); }
.r-faqitem { border-bottom: 1px solid var(--r-hair); }
.r-faqitem > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 4px; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; color: var(--r-ink); }
.r-faqitem > summary::-webkit-details-marker { display: none; }
.r-faqitem > summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; font-weight: 400; color: var(--r-muted-fg); line-height: 1; }
.r-faqitem[open] > summary::after { content: "\2212"; }
.r-faqitem > summary:hover { color: var(--r-red); }
.r-faqbody { padding: 0 4px 18px; }
.r-faqbody p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--r-muted-fg); max-width: 72ch; }

/* Presse-Block */
.r-press { border: 1px solid var(--r-hair-strong); border-radius: var(--radius-lg); padding: 34px 36px 30px; }
.r-press h2 { font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; line-height: 1.08; font-weight: 800; margin: 0 0 14px; }
.r-press p { font-size: 15px; line-height: 1.6; color: var(--r-muted-fg); max-width: 78ch; margin: 0 0 12px; }
.r-press p strong { color: var(--r-ink); }

/* Innovationen */
.r-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
/* Scroll-Reveal: Balken wachsen animiert auf ihren Zielwert (JS setzt width 0 -> Ziel) */
.r-anim-bar { transition: width .9s cubic-bezier(.22, .61, .36, 1); }

/* Grüne Conversion-CTAs: dezente Tiefe über Farbverlauf, 1px Kante und Schatten. */
.r-nav-cta, .r-cta-btn { border-radius: var(--radius-cta); background: linear-gradient(to bottom, color-mix(in srgb, var(--r-cta) 95%, #fff), var(--r-cta) 58%, color-mix(in srgb, var(--r-cta) 96%, #000)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.18); }
.r-nav-cta:hover, .r-cta-btn:hover { background: linear-gradient(to bottom, color-mix(in srgb, var(--r-cta-hover) 95%, #fff), var(--r-cta-hover) 58%, color-mix(in srgb, var(--r-cta-hover) 96%, #000)); }
.r-nav-cta:focus-visible, .r-cta-btn:focus-visible { outline: 2px solid var(--r-ink); outline-offset: 3px; }

/* Nav-CTA: persistenter Einstieg in den Shop-Test (rechts in der Sektions-Nav) */
.r-nav-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s; }
.r-nav-cta-ic { flex: 0 0 auto; }

/* Einheitliche CTA-Identität für den Shop-Test-Pfad: grüner Button + Lupe.
   Gleiches Aussehen wie .r-nav-cta, nur größer für Standalone-Platzierung
   (Hero/CTA-Band). Bewusst NICHT .r-btn, damit neutrale Buttons neutral bleiben. */
.r-cta-btn { display: inline-flex; align-items: center; gap: 9px; padding: 13px 24px; border: 0; color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s; }
.r-cta-btn svg { flex: 0 0 auto; }

/* Ergebnisse: Typ-Tabs (Großhändler | Hersteller) */
/* Typ-Umschalter (Segmented Control): bewusst als Schalter erkennbar — Verb-
   Label, gemeinsame Schiene, Radio-Indikatoren, Zähl-Badges. Die früheren
   Info-Kacheln wurden nicht als umschaltbar erkannt (#35); ihre Kennzahlen
   stehen jetzt im Listenkopf (.r-erg-panehead). Klebt beim Scrollen unter der
   Site-Nav (64px), damit sichtbar bleibt, welche Wertung man gerade sieht —
   die negativen Margins gleichen das .r-wrap-Padding aus, damit der klebende
   Balken volle Breite deckt. */
.r-erg-switch { position: sticky; top: 64px; z-index: 40; margin: 30px -24px 0; padding: 12px 24px 14px; background: color-mix(in srgb, var(--r-bg) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--r-hair); scroll-margin-top: 70px; }
@media (max-width: 640px) { .r-erg-switch { margin: 30px -18px 0; padding: 12px 18px 14px; } }
.r-erg-switch-label { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); margin-bottom: 8px; }
.r-erg-seg { display: flex; gap: 4px; padding: 4px; max-width: 560px; border: 1.5px solid var(--r-hair-strong); border-radius: var(--radius-pill); background: var(--r-surface); }
.r-erg-seg-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 12px; border: none; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--r-ink); cursor: pointer; transition: background .15s, color .15s; }
.r-erg-seg-btn:hover { background: color-mix(in srgb, var(--r-ink) 7%, transparent); }
.r-erg-seg-btn[aria-selected="true"] { background: var(--r-primary); color: var(--r-on-primary); }
.r-erg-seg-btn .dot { width: 17px; height: 17px; border-radius: 50%; border: 2px solid currentColor; position: relative; flex: 0 0 auto; opacity: .75; }
.r-erg-seg-btn[aria-selected="true"] .dot { opacity: 1; }
.r-erg-seg-btn[aria-selected="true"] .dot::after { content: ''; position: absolute; inset: 2.5px; border-radius: 50%; background: currentColor; }
.r-erg-seg-btn .n { font-size: 13px; font-weight: 700; padding: 1px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, currentColor 13%, transparent); }
@media (max-width: 400px) { .r-erg-seg-btn { font-size: 15px; gap: 7px; padding: 11px 8px; } }
/* Listenkopf je Wertung: benennt die sichtbare Liste (Orientierung nach dem
   Umschalten) und trägt Ø Reifegrad + Spitze */
.r-erg-panehead { margin: 26px 0 2px; }
.r-erg-panehead h3 { margin: 0; font-size: 20px; letter-spacing: -.02em; line-height: 1.15; font-weight: 800; }
.r-erg-panehead p { margin: 4px 0 0; font-size: 14px; color: var(--r-muted-fg); }
.r-erg-panehead p b { color: var(--r-ink); }
/* Querverweis am Listenende: fängt Scroller ab, die den Umschalter oben nie
   benutzt haben — schaltet die Wertung um und springt zurück zum Listenanfang */
.r-erg-cross { display: block; width: 100%; margin-top: 18px; padding: 18px 20px; text-align: center; border: 1.5px dashed var(--r-hair-strong); border-radius: var(--radius-lg); background: var(--r-surface); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.r-erg-cross:hover { border-color: var(--r-cta); background: color-mix(in srgb, var(--r-cta) 6%, var(--r-surface)); }
.r-erg-cross .done { display: block; font-size: 14px; color: var(--r-muted-fg); }
.r-erg-cross .go { display: block; margin-top: 4px; font-size: 17px; font-weight: 800; color: var(--r-cta); }

/* Ergebnisse: kompakte Matrix (Rang | Anbieter | Kapitel-Reifegrade | Gesamt) */
.r-erg-wrap { margin-top: 22px; border: 1px solid var(--r-hair); border-radius: var(--radius-lg); overflow-x: auto; box-shadow: 0 30px 60px -48px rgba(10,10,10,.35); }
table.r-erg { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; table-layout: fixed; }
/* Spaltenbreiten (fixed): Rang/Anbieter/Gesamt fest, die sechs Kapitel-Spalten teilen sich den Rest gleichmäßig. */
.r-erg thead th.c-rank { width: 56px; }
.r-erg thead th.c-name { width: 240px; }
.r-erg thead th.c-total { width: 92px; }
.r-erg thead th.c-kap { white-space: normal; }
.r-erg thead th { background: var(--r-surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); font-weight: 600; text-align: center; padding: 12px 10px; border-bottom: 1px solid var(--r-hair-strong); white-space: nowrap; }
.r-erg thead th.c-rank, .r-erg thead th.c-name { text-align: left; }
.r-erg thead th .kk { display: block; font-size: 10px; opacity: .65; text-transform: none; letter-spacing: .04em; margin-top: 2px; }
.r-erg tbody td { padding: 11px 10px; border-bottom: 1px solid var(--r-hair); text-align: center; font-variant-numeric: tabular-nums; }
.r-erg tbody tr:last-child td { border-bottom: 0; }
.r-erg tbody tr:hover td { background: color-mix(in srgb, var(--brand-red, #d81316) 4%, transparent); }
.r-erg td.c-rank { width: 56px; text-align: left; padding-left: 20px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--r-muted-fg); }
.r-erg td.c-name { text-align: left; min-width: 210px; }
/* Sticky Spalten: Rang+Anbieter links, Gesamt rechts — beim horizontalen Scrollen (Mobile) bleibt die Orientierung */
.r-erg th.c-rank, .r-erg td.c-rank { position: sticky; left: 0; z-index: 2; background: var(--r-bg); }
.r-erg th.c-name, .r-erg td.c-name { position: sticky; left: 56px; z-index: 2; background: var(--r-bg); border-right: 1px solid var(--r-hair); }
.r-erg th.c-total, .r-erg td.c-total { position: sticky; right: 0; z-index: 2; background: var(--r-bg); border-left: 1px solid var(--r-hair); }
.r-erg thead th.c-rank, .r-erg thead th.c-name, .r-erg thead th.c-total { background: var(--r-surface); z-index: 3; }
.r-erg tbody tr:hover td.c-rank, .r-erg tbody tr:hover td.c-name, .r-erg tbody tr:hover td.c-total { background: color-mix(in srgb, var(--brand-red, #d81316) 4%, var(--r-bg)); }
.r-erg td.c-name .r-shop-link { font-weight: 700; font-size: 14.5px; }
.r-erg td.c-name .sub { display: block; font-size: 11.5px; color: var(--r-muted-fg); margin-top: 1px; }
.r-erg td.c-total { font-weight: 800; font-size: 15px; padding-right: 20px; }
/* Kapitel-Zellen: Ampel-Tints (wie PoC) — grün stark, neutral ausbaufähig, rot kritisch.
   Als Link: Drilldown ins Kapitel des Anbieterprofils. */
.r-erg-cell { display: inline-block; min-width: 42px; padding: 4px 8px; border-radius: var(--radius-sm); font-weight: 600; font-size: 13px; text-decoration: none; transition: box-shadow .12s, transform .12s; }
a.r-erg-cell:hover, a.r-erg-cell:focus-visible { transform: scale(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--foreground, #1a1b1f) 25%, transparent); }
.r-erg-cell.hi { background: color-mix(in srgb, var(--score-2) 12%, transparent); color: var(--score-2-fg); }
.r-erg-cell.mid { background: color-mix(in srgb, var(--foreground, #1a1b1f) 6%, transparent); color: var(--r-ink); }
.r-erg-cell.lo { background: color-mix(in srgb, var(--r-red) 9%, transparent); color: var(--score-0-fg); }
.r-erg-note { margin: 16px 0 0; font-size: 13px; color: var(--r-muted-fg); max-width: 90ch; line-height: 1.55; }
.r-erg-note strong { color: var(--r-ink); }
.r-shop-ext { font-size: 12px; color: var(--r-muted-fg); text-decoration: none; padding: 2px 5px; border-radius: var(--radius-cta); }
.r-shop-ext:hover, .r-shop-ext:focus-visible { color: var(--r-red); background: color-mix(in srgb, var(--r-red) 8%, transparent); }

/* Mobile: die breite Kapitel-Matrix als lesbare Karten statt horizontal
   gequetschter Tabelle. Grund: die sticky Rang/Anbieter/Gesamt-Spalten füllen
   auf schmalen Screens fast die ganze Viewport-Breite, sodass die Kapitel-
   spalten nur als abgeschnittener Rest sichtbar sind. Ab 641px unverändert. */
@media (max-width: 640px) {
    /* Legende: Titel auf eigener Zeile, damit die drei Schwellen als eine
       kompakte Gruppe umbrechen statt einzeln auszufransen */
    .r-legend { row-gap: 8px; column-gap: 12px; }
    .r-legend > span:first-child { flex-basis: 100%; }

    .r-erg-wrap { overflow-x: visible; border: 0; border-radius: 0; box-shadow: none; }
    table.r-erg { min-width: 0; width: 100%; display: block; font-size: 14px; }
    .r-erg thead { display: none; }
    .r-erg tbody { display: block; }
    /* Karte als Grid mit einer Spalte je Kapitel (--kap-n kommt aus dem
       Template, Reports haben 7 oder 8 Kapitel): Zeile 1 = Kartenkopf
       (Rang | Name | Gesamt), Zeile 2 = die Kapitel-Chips, dadurch in allen
       Karten spaltengenau ausgerichtet. Ein Flex-Container mit order trägt
       hier nicht: in die erste Flex-Zeile rücken so viele Kapitel-Chips,
       wie Platz ist, und quetschen den Anbieternamen zusammen. */
    .r-erg tbody tr {
        display: grid;
        grid-template-columns: repeat(var(--kap-n, 7), minmax(0, 1fr));
        column-gap: 6px; row-gap: 12px; align-items: baseline;
        border: 1px solid var(--r-hair-strong); border-radius: var(--radius-lg);
        padding: 14px 16px 14px; margin-bottom: 12px;
    }
    /* sticky/Tabellen-Zellen auf normalen Fluss zurücksetzen. Die Selektoren
       mit Spaltenklasse sind nötig: der Reset muss Desktop-Regeln wie
       `.r-erg td.c-rank { width; padding-left }` (Spezifität 0,2,1) schlagen,
       sonst leaken Breite/Padding/Borders in die Karten — Gesamt rutscht aus
       dem Kartenkopf, verirrte Haarlinien neben Name und Gesamt. */
    .r-erg tbody td,
    .r-erg tbody td.c-rank,
    .r-erg tbody td.c-name,
    .r-erg tbody td.c-total,
    .r-erg tbody tr:hover td {
        position: static; display: block; padding: 0; border: 0;
        text-align: left; background: none; width: auto; min-width: 0;
    }
    /* Kartenkopf (Grid-Zeile 1): Rang-Badge · Anbieter · Gesamt rechts */
    .r-erg tbody td.c-rank {
        grid-row: 1; grid-column: 1;
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 12px; font-weight: 700; color: var(--r-muted-fg);
    }
    .r-erg td.c-rank::before { content: "#"; opacity: .55; }
    .r-erg tbody td.c-name { grid-row: 1; grid-column: 2 / -3; }
    .r-erg td.c-name .r-shop-link { font-size: 16px; }
    .r-erg tbody td.c-total {
        grid-row: 1; grid-column: -3 / -1; text-align: right;
        font-weight: 800; font-size: 16px;
    }
    .r-erg td.c-total::before {
        content: "Gesamt"; display: block; font-size: 10px; font-weight: 600;
        letter-spacing: .04em; text-transform: uppercase; color: var(--r-muted-fg);
    }
    /* Gesamt-Ampel im Kartenkopf — Schwellen wie in der Kapitel-Legende */
    .r-erg tbody td.c-total.hi { color: var(--score-2-fg); }
    .r-erg tbody td.c-total.lo { color: var(--score-0-fg); }
    /* Kapitelwerte (Grid-Zeile 2): eine Zelle je Kapitel, automatisch in die
       Spalten 1..n verteilt */
    .r-erg tbody td.c-kap {
        grid-row: 2; display: flex; flex-direction: column;
        align-items: center; gap: 4px;
    }
    .r-erg td.c-kap::before {
        content: attr(data-kap); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 10px; letter-spacing: .04em; color: var(--r-muted-fg);
    }
    .r-erg td.c-kap .r-erg-cell {
        min-width: 0; width: 100%; max-width: 52px; padding: 4px 0; text-align: center;
    }
}

/* ============================================================
   Anbieterprofil (#155)
   Kopf (Urteil + Einordnung) · Steuerleiste · Kapitel-Akkordeon · Kriterium.
   Vergleichsgröße ist überall der Schnitt der eigenen Typ-Kohorte; er
   erscheint als schwarze Marke im Balken, nie als zweite Zahlenreihe.
   ============================================================ */
.r-crumb { padding: 4px 0 0; font-size: 13px; color: var(--r-muted-fg); }
.r-crumb a { text-decoration: none; font-weight: 600; color: inherit; }
.r-crumb a:hover, .r-crumb a:focus-visible { color: var(--r-red); }
.r-crumb .sep { margin: 0 8px; opacity: .5; }
.r-crumb strong { color: var(--r-ink); }

/* --- Kopf ------------------------------------------------------------- */
.r-anb-top { padding-bottom: 0; }
.r-anb-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px 56px; align-items: start; margin-top: 20px; }
@media (max-width: 980px) { .r-anb-hero { grid-template-columns: minmax(0, 1fr); } }

.r-anb-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.r-anb-badge svg { flex: 0 0 auto; }
.r-anb-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--r-surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); white-space: nowrap; }
.r-anb-badge.soft { background: transparent; border: 1px solid var(--r-hair); }
.r-anb-visit { margin-left: auto; font-size: 13px; }
@media (max-width: 560px) { .r-anb-visit { margin-left: 0; } }

.r-anb-name { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.04em; font-weight: 800; margin: 16px 0 0; }

/* Kernaussagen: drei Zeilen, die das Urteil tragen (kuratiert oder abgeleitet). */
.r-anb-takeaways { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 62ch; }
.r-anb-takeaways li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; }
.r-anb-takeaways .ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; }
.r-anb-takeaways .tx { padding-top: 2px; }
.r-anb-takeaways .positiv .ic { background: color-mix(in srgb, var(--score-2) 12%, transparent); color: var(--score-2); }
.r-anb-takeaways .negativ .ic { background: color-mix(in srgb, var(--score-0) 14%, transparent); color: var(--score-0); }
.r-anb-takeaways .innovativ .ic { background: color-mix(in srgb, var(--r-innovation) 11%, transparent); color: var(--r-innovation); }

.r-anb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 30px; background: var(--r-hair); border: 1px solid var(--r-hair); border-radius: var(--radius-md); overflow: hidden; }
@media (max-width: 560px) { .r-anb-facts { grid-template-columns: minmax(0, 1fr); } }
.r-anb-facts > div { background: var(--r-bg); padding: 16px 18px; }
.r-anb-facts .fl svg { flex: 0 0 auto; }
.r-anb-facts .fl { display: flex; align-items: center; gap: 7px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-anb-facts .fv { display: block; margin-top: 7px; font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.r-anb-facts .fv .u { font-size: 15px; font-weight: 700; color: var(--r-muted-fg); }

.r-anb-card { border: 1px solid var(--r-hair); border-radius: var(--radius-md); padding: 24px; background: var(--r-bg); box-shadow: 0 18px 40px -34px rgba(10,10,10,.5); }
.r-anb-card .cl { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-anb-card .cv { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.r-anb-card .cv b { font-size: 60px; line-height: .9; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.r-anb-card .cv .u { font-size: 22px; font-weight: 700; color: var(--r-muted-fg); }
.r-anb-card .cn { display: flex; align-items: flex-start; gap: 9px; margin: 13px 0 15px; font-size: 12.5px; line-height: 1.45; color: var(--r-muted-fg); }
.r-anb-card .cn .mark { flex: 0 0 auto; width: 2px; height: 13px; margin-top: 3px; background: var(--r-ink); }
.r-anb-card .cc { list-style: none; margin: 0; padding: 15px 0 0; border-top: 1px solid var(--r-hair); display: flex; flex-direction: column; gap: 9px; }
.r-anb-card .cc li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--r-muted-fg); }
.r-anb-card .cc b { margin-left: auto; font-size: 14px; color: var(--r-ink); font-variant-numeric: tabular-nums; }
.r-anb-card .cc .d { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: 0 0 auto; }
.r-anb-card .cc .d.s2 { background: var(--score-2); }
.r-anb-card .cc .d.s1 { background: var(--score-1); }
.r-anb-card .cc .d.s0 { background: var(--score-0); }

/* --- Balken mit Marktmarke + Delta ------------------------------------ */
.r-anb-bar { position: relative; display: block; height: 10px; border-radius: var(--radius-pill); background: var(--r-surface); }
.r-anb-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--r-ink); }
.r-anb-bar.hi i { background: var(--score-2); }
.r-anb-bar.mid i { background: var(--score-1); }
.r-anb-bar.lo i { background: var(--score-0); }
.r-anb-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--r-ink); }
/* Der i-Kreis sitzt rechts neben dem Balken (Vorlage): ohne ihn ist nicht zu
   erkennen, dass hinter der Marke zwei Zahlen stecken. */
.r-anb-bar.has-hint { margin-right: 22px; }
.r-anb-barhint { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 15px; height: 15px; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); color: var(--r-muted-fg); font-size: 9px; font-weight: 800; }
.r-anb-bar { cursor: help; }
.r-anb-bartip { position: absolute; left: 50%; bottom: calc(100% + 11px); transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; gap: 7px; padding: 11px 13px; border-radius: var(--radius-md); background: var(--r-primary); color: var(--r-on-primary); box-shadow: 0 20px 44px -26px rgba(10,10,10,.65); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .14s ease; }
.r-anb-bartip .tr { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 12.5px; }
.r-anb-bartip .k { display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--r-on-primary) 72%, transparent); }
.r-anb-bartip b { font-weight: 700; font-variant-numeric: tabular-nums; }
.r-anb-bartip .sw { width: 9px; height: 9px; border-radius: var(--radius-pill); background: currentColor; }
.r-anb-bartip .mk { width: 2px; height: 11px; background: var(--r-on-primary); }
/* Der Punkt trägt die Ampelfarbe des Balkens, damit Tooltip und Fläche
   zusammengehören. */
.r-anb-bar.hi .r-anb-bartip .sw { background: var(--score-2); }
.r-anb-bar.mid .r-anb-bartip .sw { background: var(--score-1); }
.r-anb-bar.lo .r-anb-bartip .sw { background: var(--score-0); }
/* Pfeil zum Balken hin. */
.r-anb-bartip::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 9px; height: 9px; background: var(--r-primary); transform: translateX(-50%) rotate(45deg); }
.r-anb-bar:hover .r-anb-bartip, .r-anb-chap-head:focus-visible .r-anb-bartip { opacity: 1; visibility: visible; }

.r-anb-delta { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-anb-delta.up { background: color-mix(in srgb, var(--score-2) 12%, transparent); color: var(--score-2); }
.r-anb-delta.down { background: color-mix(in srgb, var(--score-0) 14%, transparent); color: var(--score-0); }
.r-anb-delta.even { background: var(--r-surface); color: var(--r-muted-fg); }

/* --- Steuerleiste ----------------------------------------------------- */
.r-anb-tools { position: sticky; top: 64px; z-index: 30; margin-top: 42px; background: color-mix(in srgb, var(--r-bg) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--r-hair); border-bottom: 1px solid var(--r-hair); }
.r-anb-tools .r-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 10px 12px; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
.r-anb-toolslabel { margin-right: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-anb-viewswitch { display: flex; border: 1px solid var(--r-hair); border-radius: var(--radius-md); overflow: hidden; }
.r-anb-viewswitch button, .r-anb-toggleall { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 700; padding: 8px 13px; color: var(--r-muted-fg); background: var(--r-bg); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.r-anb-viewswitch button { border: 0; }
.r-anb-viewswitch button + button { border-left: 1px solid var(--r-hair); }
.r-anb-viewswitch button:hover, .r-anb-toggleall:hover { color: var(--r-ink); }
.r-anb-viewswitch button[aria-pressed="true"] { background: var(--r-primary); color: var(--r-on-primary); }
.r-anb-toggleall { border: 1px solid var(--r-hair); border-radius: var(--radius-md); }
.r-anb-toggleall:hover { border-color: var(--r-hair-strong); }
/* Unter 900px liegt der Beleg ohnehin in voller Breite — der Umschalter hätte
   keine Wirkung mehr und verschwindet. */
@media (max-width: 900px) { .r-anb-viewswitch { display: none; } }

/* --- Kapitel-Akkordeon ------------------------------------------------ */
.r-anb-main { padding-top: 34px; }
.r-anb-chap { border: 1px solid var(--r-hair); border-radius: var(--radius-md); background: var(--r-bg); scroll-margin-top: 128px; }
.r-anb-chap + .r-anb-chap { margin-top: 14px; }
.r-anb-chap-head { display: grid; grid-template-columns: 46px minmax(0, 1fr) 200px 104px 26px; align-items: center; gap: 18px; padding: 20px 22px; cursor: pointer; list-style: none; }
.r-anb-chap-head::-webkit-details-marker { display: none; }
.r-anb-chap-head:hover { background: color-mix(in srgb, var(--r-surface) 50%, transparent); }
.r-anb-chap[open] .r-anb-chap-head { border-bottom: 1px solid var(--r-hair); }
.r-anb-chap-head .num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-anb-chap-head .ttl { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.r-anb-chap-head .nm { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.r-anb-chap-head .dots { display: flex; flex-wrap: wrap; gap: 3px; }
.r-anb-chap-head .dots i { display: block; width: 14px; height: 5px; border-radius: var(--radius-pill); }
.r-anb-chap-head .dots i.s2 { background: var(--score-2); }
.r-anb-chap-head .dots i.s1 { background: var(--score-1); }
.r-anb-chap-head .dots i.s0 { background: var(--score-0); }
.r-anb-chap-head .val { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.r-anb-chap-head .val b { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.r-anb-chap-head .val b.hi { color: var(--score-2); }
.r-anb-chap-head .val b.lo { color: var(--score-0); }
.r-anb-chap-head .chev { justify-self: end; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--r-surface); color: var(--r-muted-fg); transition: transform .18s ease; }
.r-anb-chap[open] .r-anb-chap-head .chev { transform: rotate(180deg); }
@media (max-width: 900px) {
    .r-anb-chap-head { grid-template-columns: 44px minmax(0, 1fr) 92px 26px; gap: 14px; }
    .r-anb-chap-head .r-anb-bar { display: none; }
}
@media (max-width: 560px) {
    .r-anb-chap-head { grid-template-columns: minmax(0, 1fr) auto 26px; gap: 8px 12px; padding: 16px 14px; }
    .r-anb-chap-head .num { grid-column: 1 / -1; }
    .r-anb-chap-head .nm { font-size: 18px; }
}

/* --- Kriterium -------------------------------------------------------- */
.r-anb-crit { display: grid; grid-template-columns: 46px minmax(0, 1fr) 236px; gap: 24px; padding: 24px 22px; border-bottom: 1px solid var(--r-hair); }
.r-anb-crit:last-child { border-bottom: 0; }
@media (max-width: 900px) { .r-anb-crit { grid-template-columns: 46px minmax(0, 1fr); } }
@media (max-width: 560px) { .r-anb-crit { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 20px 14px; } }

.r-anb-verdict { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.r-anb-verdict .tile { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-md); font-size: 19px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.r-anb-verdict .word { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: center; line-height: 1.3; }
.r-anb-crit.s2 .tile { background: var(--score-2); }
.r-anb-crit.s2 .word { color: var(--score-2); }
.r-anb-crit.s1 .tile { background: var(--score-1); color: var(--score-1-ink); }
.r-anb-crit.s1 .word { color: var(--score-1-fg); }
.r-anb-crit.s0 .tile { background: var(--score-0); }
.r-anb-crit.s0 .word { color: var(--score-0); }

.r-anb-body { min-width: 0; }
.r-anb-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.r-autobadge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--r-surface); border: 1px solid var(--r-hair); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--r-muted-fg); vertical-align: 2px; white-space: nowrap; cursor: help; }
/* Block statt Flex: bei langen Testfragen soll das ⓘ direkt hinter dem letzten
   Wort stehen, nicht in einer eigenen Zeile darunter hängen. */
.r-anb-q { position: relative; margin-bottom: 13px; font-size: 13.5px; line-height: 1.55; color: var(--r-muted-fg); max-width: 62ch; }
.r-anb-info { display: inline-flex; vertical-align: -3px; margin-left: 6px; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 1px solid var(--r-hair-strong); border-radius: var(--radius-pill); background: var(--r-bg); color: var(--r-muted-fg); font: inherit; font-size: 11px; font-weight: 800; cursor: help; }
.r-anb-info:hover, .r-anb-info[aria-expanded="true"] { border-color: var(--r-ink); color: var(--r-ink); }
.r-anb-tip { position: absolute; left: 0; top: calc(100% + 9px); z-index: 20; display: flex; flex-direction: column; gap: 9px; width: 360px; max-width: min(360px, 78vw); padding: 15px 17px; border-radius: var(--radius-md); background: var(--r-primary); color: var(--r-on-primary); box-shadow: 0 20px 44px -26px rgba(10,10,10,.65); animation: r-anb-in .14s ease; }
.r-anb-tip[hidden] { display: none; }
/* Bewusst ohne uppercase: „Bewertungsmaßstab" würde zu BEWERTUNGSMASSSTAB —
   orthografisch richtig, aber mit drei S nicht lesbar. */
.r-anb-tip .tl { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: color-mix(in srgb, var(--r-on-primary) 60%, transparent); }
.r-anb-tip .tr { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.45; }
.r-anb-tip .tp { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 800; color: #fff; }
.r-anb-tip .tp.s2 { background: var(--score-2); }
.r-anb-tip .tp.s1 { background: var(--score-1); color: var(--score-1-ink); }
.r-anb-tip .tp.s0 { background: var(--score-0); }

.r-anb-lead { margin: 0; font-size: 15.5px; line-height: 1.55; max-width: 58ch; text-wrap: pretty; }
.r-anb-rest { margin: 8px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--r-muted-fg); max-width: 60ch; text-wrap: pretty; animation: r-anb-in .14s ease; }
.r-anb-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700; color: var(--r-muted-fg); cursor: pointer; }
.r-anb-more:hover { color: var(--r-red); }
.r-anb-more .mc { display: inline-flex; transition: transform .18s ease; }
.r-anb-more[aria-expanded="true"] .mc { transform: rotate(180deg); }

.r-anb-award { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 11px; align-items: start; margin-top: 15px; padding: 12px 15px; border-left: 3px solid; border-radius: var(--radius-sm); }
.r-anb-award .ai { display: flex; margin-top: 2px; }
.r-anb-award .ab { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r-anb-award .al { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.r-anb-award .at { font-size: 14px; line-height: 1.5; color: var(--r-ink); }
.r-anb-award.positiv { border-color: var(--score-2); background: color-mix(in srgb, var(--score-2) 7%, transparent); }
.r-anb-award.positiv .al { color: var(--score-2); }
.r-anb-award.negativ { border-color: var(--score-0); background: color-mix(in srgb, var(--score-0) 7%, transparent); }
.r-anb-award.negativ .al { color: var(--score-0); }
.r-anb-award.innovativ { border-color: var(--r-innovation); background: color-mix(in srgb, var(--r-innovation) 6%, transparent); }
.r-anb-award.innovativ .al { color: var(--r-innovation); }

/* Beleg: kompakt in der Randspalte, „groß" über die volle Textbreite. Ein
   Markup, zwei Layouts — der Umschalter kippt nur das Raster. */
.r-anb-beleg { min-width: 0; }
.r-anb-shot { position: relative; margin: 0; }
/* Browser-Rahmen um den Beleg: Kopfzeile mit drei Punkten und angedeuteter
   Adresszeile, Fußzeile als Hinweis aufs Vollbild. */
.r-anb-shot .frame { display: block; border: 1px solid var(--r-hair); border-radius: var(--radius-md); overflow: hidden; background: var(--r-surface); }
.r-anb-shot .frame:hover { border-color: var(--r-hair-strong); }
.r-anb-shot .chrome { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: var(--r-bg); border-bottom: 1px solid var(--r-hair); }
.r-anb-shot .chrome i { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--r-hair-strong); flex: 0 0 auto; }
.r-anb-shot .chrome .url { flex: 1; height: 8px; margin-left: 6px; border-radius: var(--radius-pill); background: var(--r-surface); }
.r-anb-shot .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--r-bg); border-top: 1px solid var(--r-hair); font-size: 12px; font-weight: 600; color: var(--r-muted-fg); }
/* Belege sind oft Vollseiten-Screenshots. Kompakt zeigt deshalb nur den Kopf
   des Bildes in fester Höhe — sonst bestimmt ein einzelner langer Screenshot
   die Zeilenhöhe des ganzen Kriteriums. Vollbild bleibt einen Klick entfernt. */
.r-anb-shot .frame img { display: block; width: 100%; max-height: 230px; object-fit: cover; object-position: top; cursor: zoom-in; }
.r-anb-main.view-large .r-anb-shot .frame img { max-height: none; object-fit: contain; }
.r-anb-shot figcaption { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--r-muted-fg); }
.r-anb-shot .thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.r-anb-shot .thumbs img { display: block; width: 64px; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--r-hair); border-radius: var(--radius-sm); cursor: zoom-in; }
/* Messkarten laufen über die Textbreite (siehe _anb_kriterium): Gauge links,
   Chips als Wolke daneben — flach statt als Säule, und die Textspalte bleibt
   nicht leer. */
.r-anb-crit.breit { grid-template-columns: 46px minmax(0, 1fr); }
.r-anb-crit.breit { row-gap: 16px; }
.r-anb-crit.breit .r-anb-beleg { grid-column: 2 / -1; }
.r-anb-beleg .r-crit-auto { margin: 0; align-items: flex-start; gap: 18px; }
.r-anb-beleg .r-gauge-info { min-width: 0; flex: 1; }
/* Auf schmalen Breiten stapelt die Karte: neben dem Gauge bleiben sonst ~200px
   für die Chips, und „1,6 s bis zum größten Inhalt" bricht auf vier Zeilen. */
@media (max-width: 620px) { .r-anb-beleg .r-crit-auto { flex-direction: column; align-items: stretch; gap: 14px; } }

@media (max-width: 900px) { .r-anb-beleg { grid-column: 2 / -1; } }
/* Auf dem Handy ist die Textspalte selbst schon schmal — der Beleg nimmt
   die volle Breite, statt sich hinter der Score-Kachel einzurücken. */
/* Höhere Spezifität als .r-anb-crit.breit .r-anb-beleg — sonst bliebe die
   Karte auf dem Handy hinter der Score-Kachel eingerückt. */
@media (max-width: 560px) { .r-anb-crit .r-anb-beleg, .r-anb-crit.breit .r-anb-beleg { grid-column: 1 / -1; } }
.r-anb-main.view-large .r-anb-crit { grid-template-columns: 46px minmax(0, 1fr); }
.r-anb-main.view-large .r-anb-beleg { grid-column: 2 / -1; }
.r-anb-main.view-large .r-anb-shot .thumbs img { width: 110px; }

@keyframes r-anb-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .r-anb-tip, .r-anb-rest { animation: none; }
    .r-anb-chap-head .chev, .r-anb-more .mc, .r-anb-bartip { transition: none; }
}

/* Test-Video im Profil (ADR 0013) */
.r-crit-video { padding: 20px 0 6px; }
.r-crit-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--r-hair); border-radius: var(--radius-md); display: block; background: #000; }

/* Automatisierte Tests (K7): Lighthouse-Gauge als Beleg statt Screenshot.
   Ring steht per CSS auf dem Endwert (--gauge-off); das JS setzt ihn auf 0
   zurück und animiert beim Reinscrollen — ohne JS/bei reduced motion bleibt
   der Endzustand sichtbar. Umfang: 2π·52 ≈ 326.7. */
.r-crit-auto { display: flex; align-items: center; gap: 18px; margin: 12px 0 0; padding: 14px 16px; background: var(--r-surface); border-radius: var(--radius-md); flex-wrap: wrap; }
.r-gauge { position: relative; width: 96px; height: 96px; flex: 0 0 auto; }
/* Kompakt-Variante im Kriteriums-Block: Messwert ist Beleg, nicht Hauptscore */
.r-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 0 0 auto; }
.r-gauge.sm { width: 64px; height: 64px; }
.r-gauge.sm .num { font-size: 19px; }
.r-gauge-cap { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--r-muted-fg); cursor: help; }
.r-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.r-gauge circle { fill: none; stroke-width: 8; }
.r-gauge .track { stroke: color-mix(in srgb, currentColor 14%, transparent); }
.r-gauge .ring { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: var(--gauge-off, 326.7); }
.r-gauge .ring.r-anim-gauge { transition: stroke-dashoffset 1.1s cubic-bezier(.2,.7,.2,1); }
.r-gauge .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 27px; letter-spacing: -.02em; color: currentColor; font-variant-numeric: tabular-nums; }
.r-gauge.hi { color: var(--score-2); }
.r-gauge.mid { color: var(--score-1); }
.r-gauge.lo { color: var(--score-0); }
.r-gauge-info { flex: 1; min-width: 240px; }
.r-gauge-info .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.r-gauge-info .chips + .chips { margin-top: 8px; }
.r-gauge-info .chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 11px; border-radius: var(--radius-pill); background: var(--r-bg); border: 1px solid var(--r-hair); font-size: 12px; color: var(--r-muted-fg); }
.r-gauge-info .chip b { color: var(--r-ink); font-size: 13px; font-variant-numeric: tabular-nums; }
/* Check-Chips (Security 7.3): ✓/✗-Zustand in Ampellogik; .soft = nicht score-relevant */
.r-gauge-info .chip.ok { border-color: color-mix(in srgb, var(--score-2) 35%, transparent); }
.r-gauge-info .chip.ok b { color: var(--score-2); }
.r-gauge-info .chip.bad { border-color: color-mix(in srgb, var(--score-0) 40%, transparent); }
.r-gauge-info .chip.bad b { color: var(--score-0); }
.r-gauge-info .chip.soft { opacity: .82; }
.r-gauge-info .findslabel { display: block; margin: 12px 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-gauge-info .finds { margin: 4px 0 0; padding-left: 15px; list-style: disc; font-size: 12.5px; color: var(--r-muted-fg); line-height: 1.5; }
.r-gauge-info .finds li { margin-bottom: 3px; }
.r-gauge-info .src { margin-top: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--r-muted-fg); opacity: .8; }

/* CTA-Band (dunkel) — der Leadgen-Moment am Seitenende */
.r-ctaband { margin-top: 72px; background: var(--r-ink-deep); color: var(--r-on-primary); padding: 56px 0 60px; }
.r-ctaband .kicker { display: flex; align-items: center; gap: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--r-on-primary) 55%, transparent); font-weight: 600; }
.r-ctaband .kicker::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--r-on-primary) 16%, transparent); }
.r-ctaband h2 { font-size: clamp(25px, 2.8vw, 42px); letter-spacing: -.03em; line-height: 1.05; font-weight: 800; margin: 18px 0 12px; max-width: 26ch; }
.r-ctaband p { color: color-mix(in srgb, var(--r-on-primary) 70%, transparent); font-size: 16px; max-width: 60ch; margin: 0 0 24px; }
.r-btn.ondark { border-color: var(--r-on-primary); background: var(--r-on-primary); color: var(--r-primary); }
.r-btn.ondark::before { background: var(--r-red); }
.r-btn.ondark:hover { color: #fff; border-color: var(--r-red); }
/* Der Content liegt im Report-Controller-Wrapper, der Footer ist dessen
   Geschwisterelement. Deshalb funktioniert ein Nachbarselektor zwischen CTA
   und Footer nicht; bei Seiten mit dunklem CTA-Band darf kein weißer Steg
   dazwischen entstehen. */
div[data-controller="report"]:has(.r-ctaband) + .r-footer { margin-top: 0; }

/* Übersicht: Teaser-Reihe in die Rubriken */
.r-teaserrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
@media (max-width: 820px) { .r-teaserrow { grid-template-columns: 1fr; } }
.r-teaser { display: block; padding: 18px 20px; border: 1px solid var(--r-hair); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.r-teaser:hover, .r-teaser:focus-visible { border-color: var(--r-primary); background: var(--r-surface); }
.r-teaser strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 4px; }
.r-teaser span { font-size: 13px; color: var(--r-muted-fg); line-height: 1.45; }

/* Pre-Launch-Gate (serverseitig, ADR 0003): Anonyme bekommen nur gate.html.twig.
   Hinter der Karte liegt eine geblurrte Report-Attrappe mit Fantasiewerten —
   echte Daten werden serverseitig gar nicht ausgeliefert. Nav bleibt scharf &
   bedienbar; die Attrappe ist weder klick- noch markierbar. */
/* overflow-x: clip (nicht hidden) — hidden würde die sticky Gate-Karte brechen. */
.r-gated { position: relative; overflow-x: clip; }
.r-gated .r-gate-decoy { filter: blur(9px) saturate(.85); pointer-events: none; user-select: none; min-height: 70vh; }
.r-preview-gated { margin-top: -52px; }
.r-preview-gated .r-gate-decoy { padding-top: 52px; }
.r-gate { position: absolute; inset: 0; z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: clamp(60px, 14vh, 160px) 24px 60px; background: linear-gradient(180deg, color-mix(in srgb, var(--r-bg) 35%, transparent), color-mix(in srgb, var(--r-bg) 82%, transparent) 45%, color-mix(in srgb, var(--r-bg) 96%, transparent)); }
.r-gate-card { position: sticky; top: 170px; max-width: 560px; background: var(--r-bg); border: 1px solid var(--r-hair-strong); border-radius: var(--radius-lg); padding: 36px 38px 34px; box-shadow: 0 50px 110px -40px rgba(10,10,10,.5); text-align: left; }
.r-gate-kicker { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--r-muted-fg); font-weight: 600; margin-bottom: 14px; }
.r-gate-card h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; margin: 0 0 12px; }
.r-gate-card h2 b { color: var(--r-red); }
.r-gate-card p { font-size: 15px; line-height: 1.6; color: var(--r-muted-fg); margin: 0 0 22px; }
.r-gate-card p strong { color: var(--r-ink); }
.r-gate-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* Footer */
.r-footer { background: var(--r-ink-deep); color: color-mix(in srgb, #fff 78%, transparent); margin-top: 48px; }
.r-footer .r-wrap { padding-top: 48px; padding-bottom: 48px; }
.r-footer img { height: 28px; margin-bottom: 14px; }
.r-footer strong { color: #fff; }

/* Rechtliche Links (Partial _legal_footer_links) */
.r-footer .legal-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 6px; margin-top: 20px; font-size: 13px; }
.r-footer .legal-links a,
.r-footer .legal-links button { color: color-mix(in srgb, #fff 78%, transparent); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; line-height: inherit; cursor: pointer; }
.r-footer .legal-links a:hover,
.r-footer .legal-links button:hover { color: #fff; }
.r-footer .legal-links > * + *::before { content: "·"; margin-right: 14px; color: color-mix(in srgb, #fff 42%, transparent); }

/* Report-Bereichsnavigation im Footer (Partial _footer_nav) — macht die Links
   auch mobil ohne Burger erreichbar. Dunkler Kontext. */
.r-footer .footer-nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 6px; margin-top: 24px; }
.r-footer .footer-nav-link { padding: 6px 12px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: color-mix(in srgb, #fff 78%, transparent); text-decoration: none; transition: background .15s, color .15s; }
.r-footer .footer-nav-link:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; }
.r-footer .footer-nav-link[aria-current="page"] { background: #fff; color: var(--r-primary); }

/* Beleg-Video (ADR 0013) */
.r-beleg-video { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; margin: 16px 0 0; border: 1px solid var(--r-hair); }
.r-beleg-video iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (prefers-reduced-motion: reduce) {
    .r-link-arrow { transition: none; }
    .r-link-more:hover .r-link-arrow, .r-link-more:focus-visible .r-link-arrow,
    .r-kpi:hover .r-link-arrow, .r-kpi:focus-visible .r-link-arrow,
    .r-finding:hover .r-link-arrow, .r-finding:focus-visible .r-link-arrow { transform: none; }
}

/* ===========================================================================
   Innovationen (ADR 0020) — die Außenschau
   ---------------------------------------------------------------------------
   Kachelraster, Panel-Mechanik und Panel-Kopf kommen unverändert von den
   Erkenntnissen (.r-kacheln / .r-kachel / .r-panel weiter oben). Hier steht nur,
   was diese Seite zusätzlich braucht: die Markt-Balken im dunklen Hero, die
   Filterleiste und der Panel-Innenraum.
   =========================================================================== */

/* ---- Markt-Balken im dunklen Hero („Wo der Vorsprung liegt") ----
   Zweite Panel-Variante in derselben .r-probe-Hülle. Der eigene Markt (.heimat)
   trägt die Ampel, die übrigen bleiben neutral hell — der Kontrast IST die
   Aussage. Ampel aus --score-*, nie Marken-Rot: „wir liegen zurück" ist eine
   Bewertung (Styleguide, „Ampel ≠ Marke"). */
.r-probe-kopf .r-dot--gut { background: var(--score-2); }
.r-mkt { list-style: none; margin: 0; padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 16px; }
.r-mkt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.r-mkt .l { font-size: 13.5px; font-weight: 600; color: var(--r-ondark-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-mkt .n { font-size: 12.5px; color: var(--r-ondark-muted); text-align: right; white-space: nowrap; }
.r-mkt .track { grid-column: 1 / -1; height: 9px; border-radius: var(--radius-pill); background: rgb(255 255 255 / .12); overflow: hidden; }
.r-mkt .fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--r-ondark-lead); }
.r-mkt .heimat .fill { background: var(--score-0); }
.r-mkt .heimat .l { color: #fff; }
.r-mkt-fuss { margin: 0; padding: 0 16px 14px; font-size: 12px; line-height: 1.5; color: var(--r-ondark-muted); }
/* EKG-Fuß in der Aussage „draußen läuft es": grün statt Alarm-Rot. */
.r-probe-fuss--gut .trace { stroke: var(--score-2); }
.r-probe-fuss--gut .alarm { background: var(--score-2); }

/* ---- Filterleiste: CSS-only über verstecktes Radio ----
   Die Radios liegen als erste Kinder von .r-inno-filter; die Pillen sind ihre
   Labels. Gefiltert wird über die Markt-NUMMER (data-markt), nicht den Namen:
   Regionen sind Freitext, und CSS kann keine zwei Attributwerte vergleichen.

   Deshalb steht unten ein Block je Nummer. Acht reichen für jeden realistischen
   Report (aktuell vier Märkte); eine neunte Region bekäme eine Filter-Pille, die
   nichts ausblendet — sichtbar, aber harmlos. */
.r-inno-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; }
.r-inno-filter > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.r-inno-filter .pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.r-inno-filter .r-pill { cursor: pointer; user-select: none; }
.r-inno-filter .r-pill .z { font-variant-numeric: tabular-nums; color: var(--r-muted-fg); font-size: 12px; margin-left: 3px; }
.r-inno-filter .zaehler { font-size: 13px; color: var(--r-muted-fg); }
/* Sichtbarer Fokus, obwohl das Radio unsichtbar ist — Hover darf nie der
   einzige Hinweis auf Interaktivität sein (Styleguide). */
.r-inno-filter > input:focus-visible + .pillen .r-pill,
.r-inno-filter > input:focus-visible ~ .pillen label[for$="alle"] { outline: 2px solid var(--r-red); outline-offset: 2px; }
/* Aktive Pille */
#markt-alle:checked ~ .pillen label[for="markt-alle"],
#markt-1:checked ~ .pillen label[for="markt-1"],
#markt-2:checked ~ .pillen label[for="markt-2"],
#markt-3:checked ~ .pillen label[for="markt-3"],
#markt-4:checked ~ .pillen label[for="markt-4"],
#markt-5:checked ~ .pillen label[for="markt-5"],
#markt-6:checked ~ .pillen label[for="markt-6"],
#markt-7:checked ~ .pillen label[for="markt-7"],
#markt-8:checked ~ .pillen label[for="markt-8"] { background: var(--r-primary); border-color: var(--r-primary); color: var(--r-on-primary); }
#markt-alle:checked ~ .pillen label[for="markt-alle"] .z,
#markt-1:checked ~ .pillen label[for="markt-1"] .z,
#markt-2:checked ~ .pillen label[for="markt-2"] .z,
#markt-3:checked ~ .pillen label[for="markt-3"] .z,
#markt-4:checked ~ .pillen label[for="markt-4"] .z,
#markt-5:checked ~ .pillen label[for="markt-5"] .z,
#markt-6:checked ~ .pillen label[for="markt-6"] .z,
#markt-7:checked ~ .pillen label[for="markt-7"] .z,
#markt-8:checked ~ .pillen label[for="markt-8"] .z { color: color-mix(in srgb, var(--r-on-primary) 70%, transparent); }
/* Zähler: alle Varianten sind gerendert, sichtbar ist die zur Auswahl. */
.r-inno-filter .zaehler > span { display: none; }
#markt-alle:checked ~ .zaehler .z-alle,
#markt-1:checked ~ .zaehler .z-1,
#markt-2:checked ~ .zaehler .z-2,
#markt-3:checked ~ .zaehler .z-3,
#markt-4:checked ~ .zaehler .z-4,
#markt-5:checked ~ .zaehler .z-5,
#markt-6:checked ~ .zaehler .z-6,
#markt-7:checked ~ .zaehler .z-7,
#markt-8:checked ~ .zaehler .z-8 { display: inline; }
/* Nicht passende Kacheln UND ihre Panels ausblenden — sonst bliebe ein offenes
   Panel stehen, dessen Kachel gerade weggefiltert wurde. */
.r-inno-filter:has(#markt-1:checked) ~ .r-kacheln > [data-markt]:not([data-markt="1"]),
.r-inno-filter:has(#markt-2:checked) ~ .r-kacheln > [data-markt]:not([data-markt="2"]),
.r-inno-filter:has(#markt-3:checked) ~ .r-kacheln > [data-markt]:not([data-markt="3"]),
.r-inno-filter:has(#markt-4:checked) ~ .r-kacheln > [data-markt]:not([data-markt="4"]),
.r-inno-filter:has(#markt-5:checked) ~ .r-kacheln > [data-markt]:not([data-markt="5"]),
.r-inno-filter:has(#markt-6:checked) ~ .r-kacheln > [data-markt]:not([data-markt="6"]),
.r-inno-filter:has(#markt-7:checked) ~ .r-kacheln > [data-markt]:not([data-markt="7"]),
.r-inno-filter:has(#markt-8:checked) ~ .r-kacheln > [data-markt]:not([data-markt="8"]) { display: none; }

/* ---- Region-Pille auf Kachel und im Panel-Kicker ---- */
.r-inno-region { flex: none; display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 3px 10px; background: var(--r-primary); color: var(--r-on-primary); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---- Panel-Innenraum ---- */
.r-inno-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .r-inno-body { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
.r-inno-intro { margin: 0 0 26px; font-size: 17px; line-height: 1.6; color: var(--r-muted-fg); max-width: 52ch; text-wrap: pretty; }
.r-inno-h { display: block; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--r-muted-fg); }
.r-inno-schritte { list-style: none; margin: 16px 0 0; padding: 0; max-width: 56ch; }
.r-inno-schritte li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 16px; align-items: start; padding: 15px 0; border-top: 1px solid var(--r-hair); }
.r-inno-schritte .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--r-primary); color: var(--r-on-primary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.r-inno-schritte .t { font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }
.r-inno-seite { display: flex; flex-direction: column; gap: 16px; }
.r-inno-vorreiter { border-radius: var(--radius-md); background: var(--r-surface); padding: 22px 24px; }
.r-inno-vorreiter .n { margin: 10px 0 0; font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; }
.r-inno-notiz { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--r-muted-fg); text-wrap: pretty; }
/* Lücke: Ampel über --rolle, vom Renderer gesetzt (score-0/1/2). */
.r-inno-luecke { border: 1px solid var(--r-hair); border-radius: var(--radius-md); padding: 19px 22px; }
.r-inno-luecke .k { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.r-inno-luecke .v { font-size: 15px; font-weight: 800; color: var(--rolle-fg); white-space: nowrap; }
.r-inno-luecke .track { height: 10px; border-radius: var(--radius-pill); background: var(--r-surface); overflow: hidden; }
.r-inno-luecke .fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--rolle); }
/* „+N" auf dem Leitbild, wenn die Galerie mehrere Belege trägt. */
.r-inno-more { position: absolute; right: 12px; bottom: 12px; background: rgba(8,8,10,.74); color: #fff; font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-pill); pointer-events: none; }
.r-inno-beleg { margin-top: 34px; }
.r-inno-beleg .r-browser { margin-top: 14px; }

/* ---- „Warum wir über den Tellerrand schauen" ----
   Helle Fläche, bewusst KEIN zweites dunkles Band: die Seite hat den dunklen
   Hero oben und das Shop-Band unten — eine dritte dunkle Fläche liest sich als
   kaputter Block (Styleguide). */
.r-tellerrand { background: var(--r-surface); margin-top: 56px; }
.r-tellerrand-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .r-tellerrand-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.r-tellerrand h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; font-weight: 800; letter-spacing: -.03em; max-width: 22ch; text-wrap: balance; }
.r-tellerrand p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--r-muted-fg); max-width: 54ch; text-wrap: pretty; }
.r-takeaways { margin: 0; }
.r-takeaways > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 17px 0; border-top: 1px solid var(--r-hair-strong); }
/* Marken-Rot als Akzent an einer Zahl — keine Bewertung, deshalb zulässig. */
.r-takeaways dt { font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: var(--r-red); font-variant-numeric: tabular-nums; }
.r-takeaways dd { margin: 0; font-size: 15.5px; line-height: 1.55; text-wrap: pretty; }