/* Kundenbericht (report-render.js): Seiten im Format 16:9, Schrift skaliert mit der Berichtsbreite (cqi). */

.rp { container-type: inline-size; background: var(--bg); color: var(--text); font-family: var(--font); }
.rp-page {
  position: relative; display: flex; flex-direction: column; gap: 2.2cqi;
  aspect-ratio: 16 / 9; padding: 4.4cqi 7.4cqi 3cqi;
  border-bottom: 1px solid var(--line);
}

/* ───────────── Deckblatt: schlicht, immer dunkel (auch im Druck), ohne Muster ───────────── */
.rp-cover {
  display: grid; grid-template-rows: 1fr auto auto; gap: 2.6cqi;
  padding: 5.4cqi 7.4cqi 3cqi; background: #000; color: #fff; border-bottom: 0;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.rp-cover__main { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi; min-height: 0; }
.rp-cover--noimg .rp-cover__main { grid-template-columns: 1fr; }
.rp-cover__text { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; }
.rp-cover__logo { height: 5.5cqi; max-width: 20cqi; object-fit: contain; object-position: left center; margin-bottom: 3cqi; }
.rp-cover__eyebrow { font-size: max(10px, 1cqi); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--green); margin-bottom: 1.4cqi; }
.rp-cover__title { font-size: 5cqi; font-weight: 900; line-height: .98; letter-spacing: -.035em; text-transform: uppercase; color: #fff; }
.rp-cover__month { font-size: 1.7cqi; font-weight: 500; color: #d0d0d0; margin-top: 1.4cqi; }
.rp-cover__sub { font-size: 1.15cqi; line-height: 1.55; color: #a0a0a0; max-width: 42cqi; margin-top: 2cqi; }
.rp-cover__open { margin-top: 3cqi; font: inherit; font-size: max(11px, 1cqi); font-weight: 700; color: #fff; background: none; border: 1px solid rgba(255, 255, 255, .28); border-radius: .5cqi; padding: .9cqi 1.6cqi; cursor: pointer; }
.rp-cover__open:hover { border-color: #fff; }
.rp-cover__img { min-height: 0; border-radius: .6cqi; overflow: hidden; background: #0e1010; }
.rp-cover__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-cover__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .14); }
.rp-cover__stats > div { display: grid; gap: .6cqi; padding: 1.8cqi 2cqi 0 0; }
.rp-cover__stats > div + div { padding-left: 2cqi; border-left: 1px solid rgba(255, 255, 255, .14); }
.rp-cover__stats span { font-size: max(10px, .85cqi); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a0a0a0; }
.rp-cover__stats b { font-size: max(16px, 2.2cqi); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rp-cover__vioma { display: flex; align-items: center; gap: .8cqi; font-size: 1.4cqi; font-weight: 700; letter-spacing: -.02em; justify-self: end; }
.rp-cover__vioma img { width: 1.8cqi; height: 1.8cqi; }

.rp-btn {
  font: inherit; font-size: 1.3cqi; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; min-width: 15cqi; padding: 1.2cqi 2.6cqi;
  border-radius: 999px; border: 0; background: var(--green); color: #000; cursor: pointer; transition: background .15s;
}
.rp-btn:hover { background: #95d238; }
.rp-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.rp-btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--line-strong); font-size: 12px; min-width: 0; padding: 9px 18px; margin-top: 20px; }
.rp-btn--ghost:hover { background: var(--surface-3); }

/* ───────────── Inhaltsseiten ───────────── */
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqi; padding-bottom: 1.4cqi; border-bottom: 1px solid var(--line); }
.rp-eyebrow { font-size: max(10px, .9cqi); font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--accent-ink); }
.rp-title { font-size: max(20px, 2.8cqi); font-weight: 900; letter-spacing: -.035em; text-transform: uppercase; line-height: 1.05; margin-top: .5cqi; }
.rp-head__month { font-size: max(12px, 1.2cqi); font-weight: 600; color: var(--text-2); white-space: nowrap; }
.rp-sub { font-size: max(10px, .9cqi); margin: .4cqi 0 -1cqi; }
.rp-note { margin: -1cqi 0 0; font-size: max(12px, 1.05cqi); color: var(--text-2); }
.rp-muted { color: var(--text-3); font-weight: 500; }

.rp-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2cqi; }
.rp-kpi { display: flex; flex-direction: column; min-width: 0; padding: 1.6cqi 1.6cqi 1.4cqi; border-radius: 1.6cqi; background: #f3f3f1; border: 1px solid transparent; }
.theme-dark .rp-kpi { background: #151a11; border-color: rgba(255, 255, 255, .07); }
.rp-kpi__label { font-size: max(11px, .95cqi); font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-kpi__value { font-size: max(18px, 2.3cqi); font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 1.3cqi 0 .9cqi; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rp-delta { font-size: max(10px, .85cqi); font-weight: 700; white-space: nowrap; }
.rp-delta--good { color: var(--ok); }
.rp-delta--bad { color: var(--bad); }
.rp-delta--flat, .rp-delta--none { color: var(--text-3); }

.rp-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqi; }
.rp-chart { margin: 0; min-width: 0; }
.rp-chart figcaption { font-size: max(10px, .9cqi); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: .8cqi; }
.rp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-bar rect { fill: rgba(var(--c-rgb), .14); }
.rp-bar.is-on rect { fill: var(--green); }
.rp-bar:hover rect { fill: rgba(var(--c-rgb), .28); }
.rp-bar.is-on:hover rect { fill: #95d238; }
.rp-bar__m { font-size: 11px; font-weight: 600; fill: var(--text-3); }
.rp-bar.is-on .rp-bar__m { fill: var(--text); font-weight: 800; }
.rp-bar__v { font-size: 12px; font-weight: 800; fill: var(--text); }

.rp-table { width: 100%; border-collapse: collapse; font-size: max(12px, 1.02cqi); font-variant-numeric: tabular-nums; }
.rp-table th, .rp-table td { padding: .75cqi .9cqi; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.rp-table th[scope="row"], .rp-table th:first-child { text-align: left; font-weight: 600; white-space: normal; }
.rp-table thead th { font-size: max(10px, .8cqi); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.rp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--text-3); vertical-align: middle; }
.rp-dot--meta { background: var(--meta); }
.rp-dot--google { background: var(--google); }
.rp-dot--microsoft { background: var(--microsoft); }
.rp-dot--pinterest { background: var(--pinterest); }
.rp-dot--chatgpt { background: var(--chatgpt); }

.rp-assess { display: grid; grid-template-columns: 1.7fr 1fr; gap: 4cqi; flex: 1; }
.rp-assess__text { font-size: max(13px, 1.25cqi); line-height: 1.65; max-width: 62ch; }
.rp-assess__text p { margin: 0 0 1em; }
.rp-assess__people { display: flex; flex-direction: column; gap: 1.4cqi; }
.rp-person { display: flex; align-items: center; gap: 1.2cqi; }
.rp-person__img { position: relative; flex: none; width: max(40px, 4.4cqi); height: max(40px, 4.4cqi); border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: max(12px, 1.1cqi); }
.rp-person__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.rp-person__name { display: block; font-weight: 700; font-size: max(13px, 1.15cqi); }
.rp-person__role { display: block; font-size: max(11px, .9cqi); color: var(--text-2); }
.rp-address { margin-top: auto; font-size: max(11px, .85cqi); color: var(--text-3); }

.rp-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding-top: 1.2cqi;
  font-size: max(10px, .8cqi); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.rp-foot__brand { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: -.01em; font-size: max(12px, 1cqi); color: var(--text-2); }
.rp-foot__brand img { width: max(16px, 1.4cqi); height: max(16px, 1.4cqi); border-radius: 4px; }
.rp-foot__brand img, .rp-cover__vioma img { content: url("../../assets/logo-dark.png"); }   /* Bericht immer dunkel: Logo ohne Kachel */

/* ───────────── Menü ───────────── */
.rp-menu { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, .55); }
.rp-menu__panel { position: relative; width: min(420px, 100%); height: 100%; overflow-y: auto; padding: 56px 36px 36px; background: var(--surface); color: var(--text);
  display: flex; flex-direction: column; gap: 14px; animation: rp-in .25s var(--ease); }
@keyframes rp-in { from { transform: translateX(24px); opacity: 0; } }
.rp-menu__close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: none; color: var(--text-2); font-size: 26px; line-height: 1; cursor: pointer; }
.rp-menu__close:hover { background: var(--surface-3); color: var(--text); }
.rp-menu__nav { display: grid; margin-bottom: 18px; }
.rp-menu__nav a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: 15px; }
.rp-menu__nav a span { font-size: 11px; font-weight: 800; color: var(--accent-ink); letter-spacing: .1em; }
.rp-menu__nav a:hover { color: var(--accent-ink); }
.rp-menu__months { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: var(--text-2); cursor: pointer; }
.rp-chip:hover { color: var(--text); border-color: var(--text); }
.rp-chip.is-on { background: var(--text); color: var(--bg); border-color: var(--text); }
@media (prefers-reduced-motion: reduce) { .rp-menu__panel { animation: none; } }

/* ───────────── Schmal: untereinander statt 16:9 ───────────── */
@container (max-width: 760px) {
  .rp-page { aspect-ratio: auto; padding: 28px 20px; gap: 18px; }
  .rp-cover { padding: 28px 20px; gap: 24px; }
  .rp-cover__main { grid-template-columns: 1fr; gap: 20px; }
  .rp-cover__img { aspect-ratio: 16 / 10; }
  .rp-cover__logo { height: 44px; max-width: 180px; margin-bottom: 18px; }
  .rp-cover__eyebrow { font-size: 10px; }
  .rp-cover__title { font-size: 34px; }
  .rp-cover__month { font-size: 15px; }
  .rp-cover__sub { font-size: 13px; }
  .rp-cover__open { font-size: 12px; padding: 9px 14px; margin-top: 18px; }
  .rp-cover__stats { grid-template-columns: 1fr 1fr; }
  .rp-cover__stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rp-cover__stats b { font-size: 18px; }
  .rp-cover__vioma { font-size: 15px; gap: 8px; }
  .rp-cover__vioma img { width: 18px; height: 18px; }
  .rp-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rp-kpi { padding: 14px; border-radius: 16px; }
  .rp-kpi__value { margin: 10px 0 8px; }
  .rp-split, .rp-assess { grid-template-columns: 1fr; gap: 24px; }
  .rp-table { display: block; overflow-x: auto; }
  .rp-head { flex-wrap: wrap; }
  .rp-foot { flex-wrap: wrap; }
}

/* ───────────── Druck: jede Seite ein A4-Blatt quer ───────────── */
@media print {
  @page { size: A4 landscape; margin: 0; }
  .rp-page { aspect-ratio: auto; width: 297mm; height: 210mm; break-after: page; page-break-after: always; border: 0; }
  .rp-page:last-of-type { break-after: auto; }
  .rp-menu, .rp-btn { display: none !important; }
  .rp-kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Meta: Kampagnen nach Stufe (TF/MF/BF) */
.rp-table--stages .rp-stage > * { font-weight: 800; background: var(--surface-2, rgba(255, 255, 255, .04)); }
.rp-table--stages tr:not(.rp-stage) th[scope="row"] { padding-left: 2cqi; font-weight: 500; }
.rp-table--stages th, .rp-table--stages td { padding-top: .5cqi; padding-bottom: .5cqi; }
.rp-table--stages .rp-stage .rp-muted { font-weight: 500; }
/* Website und Google-Suche */
@container (min-width: 761px) { .rp-kpis--4 { grid-template-columns: repeat(4, 1fr); } }
.rp-path { max-width: 28cqi; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; font-weight: 500 !important; }
.rp-kpi__value--long { font-size: max(16px, 1.75cqi); }
.rp-split .rp-sub { margin-bottom: .8cqi; }

/* ───────────── Dashboard-Seiten (report-dash.js) ───────────── */
.rd-grid { display: grid; gap: 1.4cqi; min-height: 0; }
.rd-grid--exec { grid-template-columns: 1fr 1.45fr; align-items: stretch; }
.rd-grid--2 { grid-template-columns: 1fr 1fr; }
.rd-grid--map { grid-template-columns: 1.35fr 1fr; }
.rd-stack { display: flex; flex-direction: column; gap: 1.4cqi; min-width: 0; }
.rd-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqi; }
.rd-tiles .rp-kpi { padding: 1.3cqi 1.4cqi 1.1cqi; }
.rd-tiles .rp-kpi__value { font-size: max(16px, 2cqi); margin: 1cqi 0 .7cqi; }
.rd-card { min-width: 0; padding: 1.3cqi 1.6cqi; border-radius: 1.6cqi; background: #f3f3f1; border: 1px solid transparent; display: flex; flex-direction: column; }
.theme-dark .rd-card { background: #0f120c; border-color: rgba(255, 255, 255, .08); }
.rd-card__title { font-size: max(10px, .85cqi); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1cqi; }
.rd-card svg { display: block; width: 100%; height: auto; }
.rd-card--chart { justify-content: space-between; }
.rd-card .rp-table th, .rd-card .rp-table td { padding: .55cqi .8cqi; }

/* Säulen und Linie */
.rd-col rect { fill: rgba(var(--c-rgb), .14); }
.rd-col.is-on rect { fill: rgba(var(--c-rgb), .32); }
.rd-axis { font-size: 13px; fill: var(--text-3); font-weight: 600; }
.rd-line { fill: none; stroke: #82be28; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.rd-dot { fill: #82be28; }
.rd-dot.is-on { stroke: var(--bg); stroke-width: 2; }
.rd-val { font-size: 15px; font-weight: 800; fill: var(--text); }
.rd-legend { display: flex; gap: 1.6cqi; margin-top: .8cqi; font-size: max(10px, .85cqi); color: var(--text-2); font-weight: 600; }
.rd-legend span { display: inline-flex; align-items: center; gap: .5cqi; }
.rd-sw { display: inline-block; width: 1cqi; height: 1cqi; min-width: 9px; min-height: 9px; border-radius: 2px; }
.rd-sw--bar { background: rgba(var(--c-rgb), .32); }
.rd-sw--line { background: #82be28; border-radius: 50%; }

/* Ring */
.rd-donut { display: grid; grid-template-columns: minmax(0, 9cqi) 1fr; gap: 1.6cqi; align-items: center; }
.rd-donut__v { font-size: 17px; font-weight: 800; fill: var(--text); }
.rd-donut__l { font-size: 11px; font-weight: 600; fill: var(--text-3); }
.rd-legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55cqi; font-size: max(11px, .9cqi); }
.rd-legend-list li { display: grid; grid-template-columns: auto 1fr auto; gap: .7cqi; align-items: center; }
.rd-legend-list i { width: 1cqi; height: 1cqi; min-width: 9px; min-height: 9px; border-radius: 50%; }
.rd-legend-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.rd-legend-list b { font-variant-numeric: tabular-nums; }

/* Balken */
.rd-hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .8cqi; font-size: max(11px, .9cqi); }
.rd-hbars li { display: grid; grid-template-columns: minmax(0, 12cqi) 1fr auto; gap: 1cqi; align-items: center; }
.rd-hbars__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-weight: 600; }
.rd-hbars__bar { height: 1cqi; min-height: 8px; border-radius: 99px; background: rgba(var(--c-rgb), .07); overflow: hidden; }
.rd-hbars__bar i { display: block; height: 100%; border-radius: 99px; }
.rd-hbars__v { font-variant-numeric: tabular-nums; min-width: 4cqi; text-align: right; }

/* Trichter: schmale Balken, linksbündig */
.rd-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqi; }
.rd-funnel li { display: grid; grid-template-columns: minmax(0, 13cqi) 1fr 7cqi 4cqi; gap: 1.2cqi; align-items: center; }
.rd-funnel__l { font-size: max(11px, .9cqi); font-weight: 600; color: var(--text-2); }
.rd-funnel__track { height: .8cqi; min-height: 7px; background: rgba(var(--c-rgb), .06); border-radius: 2px; overflow: hidden; }
.rd-funnel__track i { display: block; height: 100%; background: rgba(var(--c-rgb), .38); border-radius: 2px; }
.rd-funnel__track i.is-last { background: #82be28; }
.rd-funnel__v { font-size: max(12px, 1.1cqi); font-variant-numeric: tabular-nums; text-align: right; }
.rd-funnel__rate { font-size: max(10px, .85cqi); font-weight: 700; color: var(--text-3); text-align: right; }

/* Karte */
.rd-card--map { padding-bottom: 1cqi; }
.rd-card .rd-map { height: 30cqi; width: auto; max-width: 100%; margin: 0 auto; }
.rd-map path { stroke: var(--bg); stroke-width: .6; }

@container (max-width: 760px) {
  .rd-grid--exec, .rd-grid--2, .rd-grid--map { grid-template-columns: 1fr; }
  .rd-donut { grid-template-columns: 120px 1fr; }
  .rd-hbars li { grid-template-columns: 110px 1fr auto; }
  .rd-card .rd-map { height: auto; width: 100%; }
}

/* ───────────── Ansicht zum Durchklicken: Menü links, eine Seite ───────────── */
.rp-app { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: start; min-height: 100%; }
.rp-side { position: sticky; top: 0; max-height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 22px 16px 22px 20px; border-right: 1px solid var(--line); }
.rp-side__brand { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; line-height: 1.25; }
.rp-side__brand img { width: 22px; height: 22px; flex: none; content: url("../../assets/logo-dark.png"); }
.rp-side__month { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 2px 0 14px 32px; }
.rp-side__nav { display: grid; gap: 1px; }
.rp-side__nav button { text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.rp-side__nav button:hover { background: rgba(var(--c-rgb), .06); color: var(--text); }
.rp-side__nav button.is-on { background: rgba(var(--c-rgb), .1); color: var(--text); font-weight: 800; }
.rp-side__label { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 6px 10px; }
.rp-side__months { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 6px; }
.rp-side__months .rp-chip { font-size: 11px; padding: 4px 9px; }
.rp-side__print { margin-top: 18px; text-align: left; font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.rp-side__print:hover { color: var(--text); border-color: var(--line-strong); }
.rp-stage { container-type: inline-size; min-width: 0; }
.rp-stage__bar { display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 12px 7.4cqi 0; font-size: 12px; color: var(--text-3); }
.rp-nav-btn { font: inherit; font-size: 12px; font-weight: 700; color: var(--text-2); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }
.rp-nav-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.rp-nav-btn:disabled { opacity: .35; cursor: default; }
.rp-stage__pos { font-variant-numeric: tabular-nums; }
.rp-app .rp-page { border-bottom: 0; }
.rp-app .rp-page:not(.is-active) { display: none; }   /* nur ausblenden: das Deckblatt hat ein eigenes Raster */
@container (max-width: 820px) {
  .rp-app { grid-template-columns: 1fr; }
  .rp-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; }
  .rp-side__nav { display: flex; overflow-x: auto; gap: 4px; }
  .rp-side__nav button { white-space: nowrap; }
  .rp-side__month { margin-bottom: 8px; }
}

/* ───────────── Ruhiger: kleine Radien, neutrale Flächen ───────────── */
.rp-kpi { border-radius: .5cqi; }
.theme-dark .rp-kpi { background: #0e1010; border-color: rgba(255, 255, 255, .08); }
.rd-card { border-radius: .5cqi; }
.theme-dark .rd-card { background: #0b0c0c; border-color: rgba(255, 255, 255, .08); }
.rd-hbars__bar, .rd-hbars__bar i { border-radius: 2px; }
.rd-hbars__bar { height: .7cqi; min-height: 6px; }
.rd-line { stroke-width: 2.2; }
.rd-col rect { rx: 1; }
.rd-share { display: inline-block; width: 7cqi; height: .6cqi; min-height: 5px; vertical-align: middle; background: rgba(var(--c-rgb), .08); border-radius: 2px; overflow: hidden; margin-right: .8cqi; }
.rd-share i { display: block; height: 100%; background: #82be28; }
.rd-share__v { font-variant-numeric: tabular-nums; }
.rd-td-share { white-space: nowrap; }
.rd-card + .rd-card { margin-top: 0; }

@media print {
  .rp-app { display: block; }
  .rp-side, .rp-stage__bar { display: none !important; }
  .rp-app .rp-page:not(.is-active) { display: flex !important; }
  .rp-app .rp-cover:not(.is-active) { display: grid !important; }
}
.rd-tiles .rp-delta { overflow: hidden; text-overflow: ellipsis; }

/* Executive Summary als Themenkarten (Aufbau wie Supermetrics-Vorlagen) */
.rd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid--bottom { grid-template-columns: 1.5fr 1fr; }
.rd-minis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqi; margin-bottom: 1cqi; }
.rd-mini { display: grid; gap: .35cqi; min-width: 0; }
.rd-mini span { font-size: max(10px, .8cqi); font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-mini b { font-size: max(14px, 1.55cqi); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-mini .rp-delta { font-size: max(9px, .72cqi); overflow: hidden; text-overflow: ellipsis; }
.rd-lines { margin-top: auto; }
.rd-grid-line { stroke: rgba(var(--c-rgb), .07); stroke-width: 1; }
.rd-card--mapsmall .rd-map { height: 12cqi; }
.rd-grid + .rd-grid { margin-top: 0; }
@container (max-width: 760px) { .rd-grid--3, .rd-grid--bottom { grid-template-columns: 1fr; } .rd-card--mapsmall .rd-map { height: auto; } }
.rd-mini b.is-long { font-size: max(12px, 1.25cqi); }
.rd-ell { max-width: 26cqi; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.rd-grid--3 .rd-card { padding-bottom: 1cqi; }
.rd-grid--3 .rd-legend { margin-top: .4cqi; }
.rp-page:has(.rd-grid), .rp-page:has(.rd-card) { gap: 1.5cqi; }

/* ───────────── Bericht als kleine Webseite (report-site.js) ───────────── */
.rs { container-type: inline-size; background: #000; color: var(--text); min-height: 100%; font-size: 14px; }
.rs-top { position: sticky; top: 0; z-index: 20; background: #000; border-bottom: 1px solid var(--line); }
.rs-top__in, .rs-nav__in, .rs-main, .rs-foot { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.rs-top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 12px; }
.rs-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rs-brand__logo { height: 36px; max-width: 140px; object-fit: contain; }
.rs-brand b { display: block; font-size: 20px; font-weight: 900; letter-spacing: -.02em; text-transform: uppercase; line-height: 1.1; }
.rs-eyebrow { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: 4px; }
.rs-top__right { display: flex; align-items: center; gap: 10px; }
.rs-month select, .rs-month--fix, .rs-btn { font: inherit; font-size: 13px; font-weight: 700; color: var(--text); background: #0e1010; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.rs-month--fix { display: inline-block; color: var(--text-2); }
.rs-live { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.rs-btn { cursor: pointer; color: var(--text-2); }
.rs-btn:hover, .rs-month select:hover { border-color: var(--line-strong); color: var(--text); }
.rs-nav__in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.rs-nav a { flex: none; padding: 12px 12px 11px; font-size: 13.5px; font-weight: 700; color: var(--text-2); text-decoration: none; border-bottom: 2px solid transparent; }
.rs-nav a:hover { color: var(--text); }
.rs-nav a.is-on { color: var(--text); border-bottom-color: var(--green); }
.rs-main { padding-top: 28px; padding-bottom: 40px; }
.rs-page { display: grid; gap: 18px; }
.rs-page:not(.is-active) { display: none; }
.rs-page__h h2 { font-size: 30px; font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; line-height: 1.05; }
.rs-kpis { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 10px; }
.rs-kpi { display: grid; gap: 6px; padding: 14px 16px; background: #0e1010; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; min-width: 0; }
.rs-kpi__l { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-kpi__v { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-kpi .rp-delta { font-size: 11px; }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.rs-grid--fazit { grid-template-columns: 2fr 1fr; }
.rs-box { padding: 18px 20px; background: #0b0c0c; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; min-width: 0; }
.rs-box__t { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin: 0 0 14px; }
.rs-box svg { display: block; width: 100%; height: auto; }
.rs-box--map .rd-map { max-height: 340px; width: 100%; }
.rs-tablewrap { overflow-x: auto; }
.rs-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.rs-table th, .rs-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.rs-table .rs-l { text-align: left; white-space: normal; font-weight: 600; }
.rs-table thead th { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.rs-table .rs-sum > *, .rs-table tfoot tr > * { font-weight: 800; border-bottom: 0; border-top: 1px solid var(--line-strong); }
.rs-empty { text-align: left !important; color: var(--text-3); }
.rs-muted { color: var(--text-3); font-weight: 500; }
.rs-path { display: inline-block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; font-weight: 500; }
.rs-text { font-size: 15px; line-height: 1.65; max-width: 70ch; }
.rs-text p + p { margin-top: 12px; }
.rs-person { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.rs-person__img { position: relative; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #1a1c1c; font-size: 13px; font-weight: 800; flex: none; }
.rs-person__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-person b { display: block; }
.rs-addr { margin-top: 12px; font-size: 12px; }
.rs-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; padding-top: 18px; padding-bottom: 28px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.rs-foot span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); }
.rs-foot img { width: 18px; height: 18px; content: url("../../assets/logo-dark.png"); }
.rs-foot__link { color: var(--text-3); text-decoration: none; }
.rs-foot__link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
@media print { .rs-foot__link { display: none; } }
.rs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@container (max-width: 1000px) { .rs-kpis { grid-template-columns: repeat(min(var(--cols, 4), 4), minmax(0, 1fr)); } }
@container (max-width: 700px) {
  .rs-top__in, .rs-nav__in, .rs-main, .rs-foot { padding-left: 16px; padding-right: 16px; }
  .rs-top__in { flex-wrap: wrap; }
  .rs-page__h h2 { font-size: 24px; }
  .rs-grid, .rs-grid--fazit { grid-template-columns: 1fr; }
  .rs-kpi__v { font-size: 19px; }
  .rs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .rs-top { position: static; }
  .rs-nav, .rs-top__right { display: none !important; }
  .rs-page:not(.is-active) { display: grid !important; }
  .rs-page { break-before: page; page-break-before: always; }
  .rs-page:first-child { break-before: auto; page-break-before: auto; }
  .rs, .rs-box, .rs-kpi { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Titelbild als Banner oben auf der Übersicht */
.rs-banner { border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 1; background: #0e1010; }
.rs-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
#rs-uebersicht .rs-banner { order: -1; }
@container (max-width: 700px) { .rs-banner { aspect-ratio: 16 / 7; } }
@media print { .rs-banner { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Google Ads: Top-Suchbegriffe */
.rs-term { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rs-term__rank { flex: none; min-width: 22px; height: 20px; padding: 0 5px; border-radius: 4px; display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 800; background: #1a1c1c; color: var(--text-2); }
.rs-table tbody tr:nth-child(-n+3) .rs-term__rank { background: #82be28; color: #000; }
.rs-term__t { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rs-term__clicks { position: relative; display: inline-block; min-width: 72px; padding-bottom: 6px; }
/* Tabelle passt immer in den Kasten: Suchbegriff-Spalte nimmt den Rest und kürzt (Tooltip), Zahlenspalten so breit wie nötig */
.rs-box--terms .rs-table th, .rs-box--terms .rs-table td { padding-left: 8px; padding-right: 8px; }
.rs-box--terms .rs-table thead th { white-space: normal; }
.rs-box--terms .rs-table .rs-l { width: 100%; max-width: 0; }
.rs-term__bar { position: absolute; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: #82be28; }
.rs-h__s { display: none; }
/* schmal: Impressionen, Klickrate, Ausgaben und Kosten je Conv. ausblenden (Spalten 3, 4, 5, 7) */
@container (max-width: 760px) {
  .rs-box--terms .rs-table tr > :is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(7)) { display: none; }
  .rs-term__clicks { min-width: 40px; }
  .rs-box--terms .rs-table { font-size: 12px; }
  .rs-box--terms .rs-term__rank { min-width: 18px; height: 18px; padding: 0 3px; font-size: 10px; }
  .rs-term { gap: 6px; }
  .rs-term__t { white-space: normal; overflow-wrap: anywhere; }
  .rs-box--terms .rs-h__l { display: none; }
  .rs-box--terms .rs-h__s { display: inline; }
  .rs-box--terms .rs-table th, .rs-box--terms .rs-table td { padding-left: 5px; padding-right: 5px; }
}
@media print { .rs-term__rank, .rs-term__bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Meta: Top-Anzeigen als Bildkarten */
/* Karten teilen sich die Zeilen (subgrid): Bild, Titel, Hauptwert und Werte stehen in jeder Karte auf gleicher Höhe */
.rs-ads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 12px; row-gap: 10px; }
.rs-ad { margin: 0 0 14px; display: grid; grid-template-columns: minmax(0, 1fr); grid-row: span 4; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; }
.rs-ad__img { position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #151717; }
.rs-ad__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rs-ad__rank { position: absolute; left: 8px; top: 8px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 4px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: #82be28; color: #000; }
.rs-ad figcaption { display: grid; gap: 2px; min-width: 0; }
.rs-ad figcaption b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; line-height: 1.35; }
.rs-ad figcaption .rs-muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ad__main { padding-top: 10px; border-top: 1px solid var(--line, #262828); }
.rs-ad__main { min-width: 0; }
.rs-ad__main p { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; min-width: 0; }
.rs-ad__main .rs-ad__split { margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--text-2); display: block; }
.rs-ad__main strong { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.rs-ad__main span { font-size: 12px; color: var(--text-3); }
.rs-ad dl { display: grid; gap: 5px; margin: 0; min-width: 0; }
/* Bezeichnung links, Wert rechts; reicht die Breite nicht, rutscht der Wert rechtsbündig in die nächste Zeile (nie über den Rand) */
.rs-ad dl div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 8px; row-gap: 1px; min-width: 0; }
.rs-ad dt { flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-ad dd { flex: none; max-width: 100%; margin: 0 0 0 auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 900px) { .rs-ads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 560px) { .rs-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .rs-ad__img { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* Kundenbericht ohne pulse-Roboter beim Laden (Seite für Kunden, Vorschau in berichte.html) */
#report > .loading::before, .rb-preview .loading::before { content: none; }

/* Berichtstext (Gesamttext vom Consultant freigegeben): Überblick oben, Empfehlungen im Fazit, Kennzeichnung klein */
.rs-box--summary .rs-text { max-width: 80ch; }
.rs-note, .rp-note { margin-top: 12px; font-size: 12px; color: var(--text-3); font-style: italic; }
.rs-recs { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.rs-recs li::marker { color: var(--accent-ink); font-weight: 800; }
.rs-stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.rp-recs { margin: .6em 0 1.2em; padding-left: 1.2em; display: grid; gap: .6em; }
.rp-recs li::marker { color: var(--accent-ink); }
.rp-assess__text .rp-eyebrow { margin-bottom: .4em; }
.rp-summary { max-width: 72ch; flex: 1; }
.rp-summary p { margin: 0 0 1em; }