/* Case-study components (Sprint 9, 10, 12): the LevelKraft SEO case study (#seo-fallstudie) and the
   Body & Care results (#ergebnis). Linked only from those two pages (scripts/pages/40-work.mjs, after
   work.css). Markup: scripts/pages/lib-work/seo.mjs, results.mjs. Sprint 12: the tiles are rx-panel /
   rx-grid (assets/css/rexity.css); this file keeps the case study's own pieces. Micro labels >= 12 px,
   main font. The bar and line charts' own rules are in work-charts.css (inlined in the section). */

.rx-seo-body { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 992px) { .rx-seo-body { gap: 64px; } }
.rx-seo-body > .rx-grid + .rx-grid { margin-top: -32px; }
.rx-seo-dateline { color: var(--rxw-muted); font-size: 0.875rem; line-height: 1.5; }
.rx-seo-block { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.rx-seo-h3 { max-width: 34ch; margin: 0; color: var(--rxw-ink); font: 500 var(--rx-fs-h3) / 1.2 var(--font-families--primary); letter-spacing: -0.015em; }
.rx-seo-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--rxw-muted); font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
.rx-seo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rxw-accent); }
.rx-seo-p { max-width: var(--rx-measure); color: var(--rxw-muted); font-size: 1rem; line-height: 1.6; }

/* KPI panels: a coloured top edge per figure */
#main .rx-seo-kpi { position: relative; gap: 6px; overflow: hidden; }
.rx-seo-kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #4d8ef0; }
.rx-seo-kpi--2::before { background: #2bb48f; }
.rx-seo-kpi--3::before { background: var(--rxw-accent); }
.rx-seo-kpi__value { color: var(--rxw-ink); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
.rx-seo-kpi__label { color: var(--rxw-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; }
.rx-seo-kpi__note { color: var(--rxw-muted); font-size: 0.875rem; line-height: 1.45; }

/* Ausgangslage / Unser Hebel, Body & Care's three cards */
#main .rx-seo-context__item { gap: 10px; border-left: 3px solid var(--rxw-accent); }
.rx-seo-context__title { margin: 0; color: var(--rxw-ink); font: 600 1.0625rem / 1.3 var(--font-families--primary); }

/* Body & Care: one results section (Sprint 12b, C N-11) — production's points, then the figures
   under an H3; KPI and text cards share the plain panel style (no coloured edges) */
.rx-res .rx-wticks { margin-bottom: var(--rx-space-head); }
.rx-res .rx-seo-kpi::before { content: none; }
#main .rx-res .rx-seo-context__item { border-left: 1px solid var(--rx-line); }
.rx-res .rx-seo-context__title { font-size: var(--rx-fs-card); line-height: 1.3; }

/* the four numbered changes */
.rx-seo-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 992px) { .rx-seo-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
#main .rx-seo-step { flex-direction: row; align-items: flex-start; gap: 16px; }
@media (max-width: 767px) { #main .rx-seo-step { flex-direction: column; gap: 8px; } }
.rx-seo-step__num { flex: none; color: var(--rxw-accent); font-size: 1.375rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rx-seo-step__title { margin: 0 0 4px; color: var(--rxw-ink); font: 600 1.0625rem / 1.3 var(--font-families--primary); }
.rx-seo-step__text { color: var(--rxw-muted); font-size: 0.9375rem; line-height: 1.5; }

/* bar charts (page views, MRR): a list for the eye; screen readers get the hidden table */
.rx-seo-chart { width: 100%; margin: 0; padding: 20px 16px 12px; border: 1px solid var(--rxw-line); border-radius: var(--rx-radius); background: var(--rxw-surface); }
@media (min-width: 768px) { .rx-seo-chart { padding: 28px 28px 16px; } }
.rx-seo-chart__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 16px; color: var(--rxw-ink); text-align: left; }
.rx-seo-chart__title { font-size: 1rem; font-weight: 600; line-height: 1.3; }
.rx-seo-chart__note { color: var(--rxw-muted); font-size: 0.8125rem; }
/* plot: bars between 1.5 rem (room for the value above the tallest bar) and 1.75 rem (month labels) */
.rx-seo-chart__plot { position: relative; height: 14rem; margin-left: 2.5rem; }
@media (min-width: 768px) { .rx-seo-chart__plot { height: 18rem; margin-left: 3rem; } }
.rx-seo-chart__grid { position: absolute; inset: 1.5rem 0 1.75rem; }
.rx-seo-chart__grid span { position: absolute; right: 0; bottom: var(--g); left: 0; height: 0; border-top: 1px dashed var(--rxw-line); }
.rx-seo-chart__grid b { position: absolute; right: calc(100% + 0.4rem); top: -0.45rem; color: var(--rxw-muted); font-size: 0.75rem; font-weight: 400; line-height: 0.9rem; white-space: nowrap; }
.rx-seo-bars { position: absolute; inset: 0; display: flex; gap: 3%; margin: 0; padding: 0 0 0 3%; list-style: none; }
.rx-seo-bar { position: relative; flex: 1; min-width: 0; }
.rx-seo-bar__col { position: absolute; inset: 1.5rem 0 1.75rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.rx-seo-bar__fill {
  display: block;
  flex: none;
  width: 100%;
  height: var(--h);
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, 0.32);
  transform-origin: bottom;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i) * 90ms);
}
/* the value sits on top of its bar (the column stacks from the bottom) */
.rx-seo-bar__val {
  display: block;
  flex: none;
  padding-bottom: 0.3rem;
  color: var(--rxw-ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s calc(var(--i) * 90ms + 0.5s);
}
@media (min-width: 768px) { .rx-seo-bar__val { font-size: 0.8125rem; } }
.rx-seo-bar__lbl { position: absolute; bottom: 0; left: 50%; color: var(--rxw-muted); font-size: 0.75rem; line-height: 1.5rem; white-space: nowrap; transform: translateX(-50%); }
.rx-seo-chart.is-pending .rx-seo-bar__fill { transform: scaleY(0); }
.rx-seo-chart.is-pending .rx-seo-bar__val { opacity: 0; }
.rx-seo-chart.is-pending.is-in .rx-seo-bar__fill { transform: none; }
.rx-seo-chart.is-pending.is-in .rx-seo-bar__val { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rx-seo-bar__fill, .rx-seo-bar__val { transition: none; }
  .rx-seo-chart.is-pending .rx-seo-bar__fill { transform: none; }
  .rx-seo-chart.is-pending .rx-seo-bar__val { opacity: 1; }
}

/* KPI table: a table from 768 px; below, every row is a stacked figure panel (A-27, P-44) */
.rx-seo-table-wrap { width: 100%; }
.rx-seo-table { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.45; }
.rx-seo-table caption { padding-bottom: 10px; color: var(--rxw-muted); font-size: 0.875rem; text-align: left; caption-side: top; }
.rx-seo-table th, .rx-seo-table td { padding: 14px 16px; border-bottom: 1px solid var(--rxw-line); text-align: left; vertical-align: top; hyphens: manual; overflow-wrap: normal; }
.rx-seo-table th:first-child { padding-left: 0; }
.rx-seo-table thead th { color: var(--rxw-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.rx-seo-table tbody th { color: var(--rxw-ink); font-weight: 600; }
.rx-seo-table__x { color: var(--rxw-accent); font-weight: 600; }
.rx-seo-table__lbl { display: none; }
@media (max-width: 767px) {
  .rx-seo-table, .rx-seo-table tbody, .rx-seo-table tr, .rx-seo-table th, .rx-seo-table td { display: block; }
  .rx-seo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rx-seo-table caption { display: block; }
  .rx-seo-table tbody { display: grid; gap: 12px; }
  .rx-seo-table tr { padding: 16px 20px; border: 1px solid var(--rxw-line); border-radius: var(--rx-radius-s); background: color-mix(in srgb, var(--rxw-ink) 4%, var(--rxw-surface)); }
  .rx-seo-table th, .rx-seo-table td { padding: 0; border: 0; }
  .rx-seo-table tbody th { margin-bottom: 10px; font-size: 1.0625rem; line-height: 1.3; }
  .rx-seo-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--rxw-line); }
  .rx-seo-table__lbl { display: block; color: var(--rxw-muted); font-size: 0.8125rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.02em; }
  .rx-seo-table__val { overflow-wrap: break-word; }
}

/* flow Google → content → exercise → sign-up (same look as the service pages' flow) */
.rx-wflow { display: flex; flex-direction: column; align-items: stretch; gap: 1.6rem; width: 100%; margin: 0; padding: 20px 16px; border: 1px solid var(--rxw-line); border-radius: var(--rx-radius); background: var(--rxw-surface); list-style: none; }
.rx-wflow__node { position: relative; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: var(--rx-radius-s); background: var(--_theme---background-color--primary, #1d1d1d); font-size: 0.9375rem; font-weight: 600; line-height: 1.3; text-align: center; }
.rx-wflow__node:last-child { border-color: var(--rxw-accent); background: var(--rxw-accent); color: var(--rx-on-accent, #1d1d1d); }
.rx-wflow__node + .rx-wflow__node::before { content: ""; position: absolute; top: -1.4rem; left: 50%; width: 2px; height: 1rem; margin-left: -1px; background: rgba(255, 255, 255, 0.3); }
.rx-wflow__node + .rx-wflow__node::after { content: ""; position: absolute; top: -0.45rem; left: 50%; margin-left: -5px; border-top: 6px solid rgba(255, 255, 255, 0.3); border-right: 5px solid transparent; border-left: 5px solid transparent; }
@media (min-width: 768px) {
  .rx-wflow { flex-direction: row; align-items: center; gap: 2rem; padding: 24px; }
  .rx-wflow__node { flex: 1 1 0; min-width: 0; }
  .rx-wflow__node + .rx-wflow__node::before { top: 50%; left: -1.7rem; width: 1.3rem; height: 2px; margin: -1px 0 0; }
  .rx-wflow__node + .rx-wflow__node::after { top: 50%; left: -0.45rem; margin: -5px 0 0; border-top: 5px solid transparent; border-right: 0; border-bottom: 5px solid transparent; border-left: 6px solid rgba(255, 255, 255, 0.3); }
}

/* "Was wir für Ihr Portal tun" */
#main .rx-seo-offer { display: grid; gap: 16px; }
@media (min-width: 992px) { #main .rx-seo-offer { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 40px; } }
.rx-seo-offer__title { margin: 0; color: var(--rxw-ink); font: 500 var(--rx-fs-h3) / 1.2 var(--font-families--primary); letter-spacing: -0.015em; }
.rx-seo-offer__body { display: flex; flex-direction: column; gap: 20px; }

/* disclaimer, sources, date, PDF */
.rx-seo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; width: 100%; padding-top: 16px; border-top: 1px solid var(--rxw-line); }
.rx-seo-foot__text { flex: 1 1 26rem; max-width: 46rem; }
.rx-seo-foot__text p { margin: 0 0 6px; color: var(--rxw-muted); font-size: 0.8125rem; line-height: 1.55; }
.rx-seo-pdf { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 18px 8px 12px; border: 1px solid var(--rxw-line); border-radius: var(--rx-radius-s); background: var(--rxw-surface); color: var(--rxw-ink); text-decoration: none; transition: border-color 0.4s var(--rx-ease); }
.rx-seo-pdf:hover { border-color: var(--rxw-accent); }
.rx-seo-pdf__icon { position: relative; flex: none; width: 1.6rem; height: 2rem; border-radius: 3px; background: #e5484d; }
.rx-seo-pdf__icon::after { content: "PDF"; position: absolute; right: 0; bottom: 0.3rem; left: 0; color: #fff; font: 700 0.5rem / 1 var(--font-families--primary); text-align: center; }
.rx-seo-pdf__text { display: flex; flex-direction: column; }
.rx-seo-pdf__label { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; }
.rx-seo-pdf__meta { color: var(--rxw-muted); font-size: 0.75rem; line-height: 1.3; }

/* Sprint 12b (verify-a N-15): each bar button gets a >= 44 px wide hit area (the visual bar stays as is) */
.rx-seo-bar__btn::after { content: ""; position: absolute; inset: 0 -8px; }
/* on phones the bars sit shoulder to shoulder so each one's own slot is >= 44 px wide; the visual
   gap moves into the column inset, so the chart looks the same */
@media (max-width: 479px) {
  .rx-seo-bars { gap: 0; padding-left: 0; }
  .rx-seo-bar__col { inset: 1.5rem 3px 1.75rem; }
  .rx-seo-bar__btn::after { inset: 0; }
}