/* Hallmark · route: custom · structure: portal masthead + stat/quick-pick first screen + hybrid card/table comparison
 * idea: "every fact is a labelled chip, nothing is ranked" · design v3 (2026-10-10, Clef study docs/DESIGN-BRIEF.md)
 * paper: oklch(99.3% 0.003 250) · brand: navy oklch(26% 0.06 258) · action: orange oklch(73% 0.17 58), CTA only
 * display: Schibsted Grotesk · body: Public Sans (both SIL OFL, self-hosted)
 */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces and text */
  --color-paper: oklch(99.3% 0.003 250);
  --color-paper-2: oklch(97.2% 0.006 250);
  --color-paper-3: oklch(94.6% 0.011 252);
  --color-ink: oklch(22% 0.03 258);
  --color-ink-2: oklch(34% 0.028 258);
  --color-muted: oklch(47% 0.02 258);
  --color-rule: oklch(89.5% 0.01 255);
  --color-rule-strong: oklch(79% 0.016 255);

  /* Brand (navy) */
  --color-navy: oklch(26% 0.06 258);
  --color-navy-2: oklch(31% 0.068 258);
  --color-navy-3: oklch(38% 0.075 258);
  --color-on-navy: oklch(97% 0.008 250);
  --color-on-navy-muted: oklch(83% 0.03 250);
  --color-on-navy-rule: oklch(42% 0.06 258);

  /* Links, action, focus */
  --color-link: oklch(46% 0.16 258);
  --color-link-hover: oklch(38% 0.15 258);
  --color-cta: oklch(73% 0.17 58);
  --color-cta-hover: oklch(68% 0.18 52);
  --color-cta-active: oklch(64% 0.18 48);
  --color-cta-ink: oklch(20% 0.03 258);
  --color-focus: oklch(52% 0.2 258);
  --color-focus-on-navy: oklch(80% 0.15 62);

  /* Factual signal chips (attributes, never ratings) */
  --chip-neutral-bg: oklch(96.5% 0.006 250);
  --chip-neutral-ink: oklch(34% 0.028 258);
  --chip-form-bg: oklch(94.5% 0.022 258);
  --chip-form-ink: oklch(34% 0.09 258);
  --chip-med-bg: oklch(95% 0.035 200);
  --chip-med-ink: oklch(37% 0.08 212);
  --chip-latex-bg: oklch(95.5% 0.06 88);
  --chip-latex-ink: oklch(41% 0.1 62);
  --chip-age-bg: oklch(95.2% 0.03 305);
  --chip-age-ink: oklch(41% 0.13 305);
  --chip-scent-bg: oklch(95% 0.045 150);
  --chip-scent-ink: oklch(39% 0.1 152);
  --chip-own-ink: oklch(22% 0.03 258);
  --chip-own-rule: oklch(55% 0.03 258);

  /* Strip illustration swatches (product colour as stated by maker/retailer) */
  --swatch-clear: oklch(97.5% 0.012 225);
  --swatch-clear-edge: oklch(66% 0.05 230);
  --swatch-beige: oklch(85% 0.05 68);
  --swatch-beige-edge: oklch(60% 0.07 60);
  --swatch-white: oklch(99% 0.002 250);
  --swatch-white-edge: oklch(68% 0.016 255);
  --swatch-unknown: oklch(96.5% 0.006 250);
  --swatch-unknown-edge: oklch(62% 0.015 255);
  --swatch-print-1: oklch(70% 0.15 28);
  --swatch-print-2: oklch(84% 0.13 95);
  --swatch-print-3: oklch(60% 0.12 235);
  --swatch-print-4: oklch(97% 0.02 95);
  --swatch-spring: oklch(48% 0.03 258);
  --swatch-spring-soft: oklch(70% 0.02 258);

  /* Notices */
  --color-notice-bg: oklch(96.4% 0.04 88);
  --color-notice-rule: oklch(85% 0.075 84);
  --color-notice-ink: oklch(30% 0.05 70);
  --color-alert: oklch(52% 0.19 27);
  --color-alert-bg: oklch(97% 0.018 25);
  --color-alert-ink: oklch(42% 0.16 27);
  --color-info-bg: oklch(96.6% 0.016 245);
  --color-info-rule: oklch(84% 0.05 250);

  /* Type */
  --font-display: "Schibsted Grotesk", "Arial Narrow", ui-sans-serif, sans-serif;
  --font-body: "Public Sans", "Segoe UI", ui-sans-serif, sans-serif;
  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.3125rem;
  --text-xl: clamp(1.375rem, 1.12rem + 0.8vw, 1.75rem);
  --text-h1: clamp(1.75rem, 1.25rem + 1.55vw, 2.375rem);
  --text-stat: clamp(1.625rem, 1.35rem + 0.8vw, 2rem);
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* Space (4 pt) */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --gutter: 1rem;
  --page-max: 80rem;

  /* Shape, depth, motion */
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999rem;
  --rule-thin: 1px;
  --rule-bold: 2px;
  --shadow-whisper: 0 1px 2px oklch(22% 0.03 258 / 0.07), 0 4px 14px oklch(22% 0.03 258 / 0.05);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;

  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
}

@media (min-width: 40rem) { :root { --gutter: 1.5rem; } }
@media (min-width: 64rem) { :root { --gutter: 2rem; } }

/* Site styles v3. Tokens live in tokens.css (concatenated before this file by build.mjs). */
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 4rem; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  color: var(--color-ink);
  line-height: var(--leading-tight);
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
  hyphens: manual;
}
p, ul, ol, dl, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
strong, b { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: absolute; left: var(--space-md); top: -10rem; z-index: var(--z-sticky);
  background: var(--color-paper); color: var(--color-ink); padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:focus { top: var(--space-xs); }
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }

.icon {
  width: 1.25rem; height: 1.25rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.icon--sm { width: 1rem; height: 1rem; }

/* Citations: small, quiet, always present ([n] is part of the link text) */
.citations { font-size: var(--text-2xs); line-height: 0; vertical-align: super; font-family: var(--font-body); font-weight: 600; white-space: nowrap; }
.citations a { color: var(--color-muted); text-decoration: none; padding-inline: 0.05em; }
.citations a:hover { color: var(--color-link); text-decoration: underline; }

/* ---------- Owner disclosure bar ---------- */
.owner-bar {
  background: var(--color-notice-bg);
  border-bottom: var(--rule-thin) solid var(--color-notice-rule);
  color: var(--color-notice-ink);
  font-size: 0.8125rem;
  line-height: 1.45;
}
.owner-bar__inner { display: flex; gap: var(--space-xs); align-items: flex-start; padding-block: var(--space-xs); }
.owner-bar__inner .icon { margin-top: 0.1rem; width: 1.05rem; height: 1.05rem; }
.owner-bar a { color: var(--color-notice-ink); font-weight: 700; }

/* ---------- Masthead + topic tabs ---------- */
.masthead { background: var(--color-navy); color: var(--color-on-navy); }
.masthead :focus-visible, .tabs :focus-visible { outline-color: var(--color-focus-on-navy); }
.masthead__row { display: flex; align-items: center; gap: var(--space-md); min-height: 3.5rem; }
.brand {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  color: var(--color-on-navy); text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em;
}
.brand:hover { color: var(--color-on-navy); text-decoration: none; }
.brand__mark {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: var(--color-on-navy);
}
.brand__mark svg { width: 1.6rem; height: auto; fill: var(--color-navy); stroke: none; color: var(--color-on-navy); }
.brand__light { color: var(--color-on-navy-muted); font-weight: 600; }
.masthead__claim { color: var(--color-on-navy-muted); font-size: var(--text-sm); display: none; border-left: var(--rule-thin) solid var(--color-on-navy-rule); padding-left: var(--space-md); }
.masthead__util { margin-left: auto; display: none; gap: var(--space-lg); font-size: var(--text-sm); }
.masthead__util a { color: var(--color-on-navy); text-decoration: none; display: inline-flex; gap: var(--space-2xs); align-items: center; white-space: nowrap; }
.masthead__util a:hover { text-decoration: underline; }

.menu { margin-left: auto; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: 2.5rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm);
  border: var(--rule-thin) solid var(--color-on-navy-rule); color: var(--color-on-navy);
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--color-navy-3); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-xs)); z-index: var(--z-dropdown);
  width: min(20rem, calc(100vw - 2 * var(--gutter)));
  background: var(--color-paper); color: var(--color-ink);
  border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md);
  box-shadow: var(--shadow-whisper); padding: var(--space-sm) var(--space-md) var(--space-md);
  max-height: 70dvh; overflow-y: auto;
}
.menu__group { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); color: var(--color-muted); margin-top: var(--space-sm); }
.menu__panel ul { list-style: none; }
.menu__panel a { display: block; padding-block: var(--space-2xs); color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); }
.menu__panel a:hover { color: var(--color-link); text-decoration: underline; }

.tabs {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--color-navy-2);
  border-top: var(--rule-thin) solid var(--color-on-navy-rule);
}
.tabs__list {
  display: flex; list-style: none; gap: var(--space-2xs);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  mask-image: linear-gradient(to right, var(--color-ink) 88%, transparent);
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__list li { scroll-snap-align: start; }
.tabs__list a {
  display: block; white-space: nowrap; color: var(--color-on-navy); text-decoration: none;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  padding: 0.7rem var(--space-sm) 0.6rem; border-bottom: 3px solid transparent;
}
.tabs__list a:hover { background: var(--color-navy-3); color: var(--color-on-navy); }
.tabs__list a[aria-current] { border-bottom-color: var(--color-cta); }

@media (max-width: 23.99rem) {
  .brand { font-size: 1rem; gap: 0.4rem; }
  .brand__mark { width: 1.75rem; height: 1.75rem; }
  .menu > summary { padding-inline: var(--space-xs); }
  .menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 48rem) {
  .menu { display: none; }
  .masthead__util { display: inline-flex; }
}
@media (min-width: 64rem) { .tabs__list { mask-image: none; } }
@media (min-width: 80rem) { .masthead__claim { display: block; } }
@media (min-width: 40rem) { .owner-bar { font-size: var(--text-sm); } }

/* ---------- Shared building blocks ---------- */
.meta-line {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); align-items: center;
  font-size: var(--text-sm); color: var(--color-muted);
}
.meta-line .icon { width: 1rem; height: 1rem; }
.meta-line span { display: inline-flex; align-items: center; gap: var(--space-2xs); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 2.75rem; padding: 0 var(--space-md);
  border-radius: var(--radius-sm); border: var(--rule-thin) solid transparent;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.btn .icon { width: 1.1rem; height: 1.1rem; stroke-width: 2.2; }
.btn--cta { background: var(--color-cta); color: var(--color-cta-ink); }
.btn--cta:hover { background: var(--color-cta-hover); color: var(--color-cta-ink); text-decoration: none; }
.btn--cta:active { background: var(--color-cta-active); }
.btn--ghost { background: var(--color-paper); color: var(--color-navy); border-color: var(--color-rule-strong); }
.btn--ghost:hover { border-color: var(--color-navy); color: var(--color-navy); text-decoration: none; background: var(--color-paper-2); }
.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; font-size: var(--text-sm); padding-inline: var(--space-sm); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.12rem 0.5rem; border-radius: var(--radius-pill);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; line-height: 1.4;
  background: var(--chip-neutral-bg); color: var(--chip-neutral-ink);
  border: var(--rule-thin) solid transparent;
}
.chip--form { background: var(--chip-form-bg); color: var(--chip-form-ink); }
.chip--med { background: var(--chip-med-bg); color: var(--chip-med-ink); }
.chip--latex { background: var(--chip-latex-bg); color: var(--chip-latex-ink); }
.chip--age { background: var(--chip-age-bg); color: var(--chip-age-ink); }
.chip--scent { background: var(--chip-scent-bg); color: var(--chip-scent-ink); }
.chip--own { background: var(--color-paper); color: var(--chip-own-ink); border-color: var(--chip-own-rule); }
.chip--color { background: var(--color-paper); border-color: var(--color-rule); }
.swatch { width: 0.7rem; height: 0.7rem; border-radius: var(--radius-pill); border: var(--rule-thin) solid var(--swatch-unknown-edge); flex: none; }
.swatch--clear { background: var(--swatch-clear); border-color: var(--swatch-clear-edge); }
.swatch--beige { background: var(--swatch-beige); border-color: var(--swatch-beige-edge); }
.swatch--white { background: var(--swatch-white); border-color: var(--swatch-white-edge); }
.swatch--print { background: conic-gradient(var(--swatch-print-1) 0 33%, var(--swatch-print-2) 0 66%, var(--swatch-print-3) 0); border-color: var(--swatch-print-3); }
.swatch--unknown { background: var(--swatch-unknown); border-style: dashed; }

.section { padding-block: var(--space-xl); }
.section + .section { border-top: var(--rule-thin) solid var(--color-rule); }
.section--tint { background: var(--color-paper-2); }
.section--tint + .section, .section + .section--tint { border-top: 0; }
.section__head { display: grid; gap: var(--space-xs); max-width: 48rem; margin-bottom: var(--space-lg); }
.section__head h2 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.012em; }
.section__head p { color: var(--color-ink-2); }
.section__lead { font-weight: 700; color: var(--color-ink); }

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  white-space: nowrap; text-decoration: none; color: var(--color-link);
}
.text-link .icon { width: 1rem; height: 1rem; stroke-width: 2.2; transition: transform var(--dur-micro) var(--ease-out); }
.text-link:hover { text-decoration: underline; }
.text-link:hover .icon { transform: translateX(2px); }

.note { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; max-width: 62rem; }
.note + .note { margin-top: var(--space-xs); }

/* ---------- Home: first screen ---------- */
.intro { display: grid; gap: var(--space-lg); padding-block: var(--space-lg) var(--space-xl); }
.intro__main { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.intro h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.018em; max-width: 34ch; }
.lede { font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); color: var(--color-ink-2); max-width: 62ch; line-height: 1.5; }

.stats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.stat {
  display: grid; gap: 0.1rem; align-content: start;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
  border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper);
}
.stat__value { font-variant-numeric: lining-nums; font-family: var(--font-display); font-weight: 800; font-size: var(--text-stat); line-height: 1; color: var(--color-navy); letter-spacing: -0.02em; }
.stat__label { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.3; }
.stat__sub { font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink-2);
  padding-block: var(--space-sm); border-block: var(--rule-thin) solid var(--color-rule);
}
.byline__who { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; color: var(--color-ink); }
.byline__avatar {
  width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--color-navy);
  display: grid; place-items: center; flex: none;
}
.byline__avatar svg { width: 1.4rem; fill: var(--color-on-navy); color: var(--color-navy); }
.byline__item { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.byline__item .icon { width: 1rem; height: 1rem; color: var(--color-muted); }
.byline a { font-weight: 700; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }

.quickpick {
  border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-lg);
  background: var(--color-paper); overflow: hidden; align-self: start; min-width: 0;
}
.quickpick__head { background: var(--color-navy); color: var(--color-on-navy); padding: var(--space-sm) var(--space-md); }
.quickpick__head h2 { color: var(--color-on-navy); font-size: var(--text-lg); font-weight: 800; }
.quickpick__head p { color: var(--color-on-navy-muted); font-size: var(--text-sm); }
.quickpick__list { list-style: none; }
.quickpick__list li + li { border-top: var(--rule-thin) solid var(--color-rule); }
.pick {
  display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm);
  padding: 0.55rem var(--space-md); color: var(--color-ink); text-decoration: none;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.pick:hover { background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; }
.pick__icon { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--chip-form-bg); color: var(--color-navy); display: grid; place-items: center; }
.pick__text { display: grid; min-width: 0; }
.pick__need { font-family: var(--font-display); font-weight: 700; font-size: 0.975rem; line-height: 1.25; }
.pick__hint { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.35; }
.pick__need, .pick__hint { overflow-wrap: anywhere; }
.pick__go { color: var(--color-link); }
.pick__go .icon { stroke-width: 2.4; width: 1.1rem; height: 1.1rem; transition: transform var(--dur-micro) var(--ease-out); }
.pick:hover .pick__go .icon { transform: translateX(2px); }
.quickpick__foot { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-thin) solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }

@media (min-width: 60rem) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(0, 24.5rem); gap: var(--space-xl); }
}

/* Key points */
.keypoints {
  background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-lg); padding: var(--space-md) var(--space-md) var(--space-lg);
}
.keypoints h2 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-sm); display: flex; align-items: center; gap: var(--space-xs); }
.keypoints h2 .icon { color: var(--color-navy); }
.keypoints ul { list-style: none; display: grid; gap: var(--space-sm) var(--space-xl); }
.keypoints li { position: relative; padding-left: 1.25rem; font-size: 0.9688rem; line-height: 1.5; }
.keypoints li::before {
  content: ""; position: absolute; left: 0; top: 0.55em; width: 0.5rem; height: 0.5rem;
  border-radius: var(--radius-xs); background: var(--color-navy);
}
@media (min-width: 52rem) {
  .keypoints { padding: var(--space-lg) var(--space-xl) var(--space-lg); }
  .keypoints ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Product comparison ---------- */
.compare__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.compare__meta span { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.compare__meta .icon { width: 1rem; height: 1rem; color: var(--color-navy); }

.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-sm);
  background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md);
}
@media (max-width: 39.99rem) {
  .filters { display: grid; grid-template-columns: auto auto; justify-content: space-between; }
  .filters .filters__list { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-md)); padding-inline: var(--space-md); }
  .filters .filters__list::-webkit-scrollbar { display: none; }
  .filters .filters__count { margin-left: 0; justify-self: end; }
}
.filters__label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); }
.filters__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }
.filter {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0 var(--space-sm);
  border-radius: var(--radius-pill); border: var(--rule-thin) solid var(--color-rule-strong);
  background: var(--color-paper); color: var(--color-ink); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.filter:hover { border-color: var(--color-navy); }
.filter[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-navy); }
.filter__n { font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; }
.filter[aria-pressed="true"] .filter__n { color: var(--color-on-navy-muted); }
.filters__count { margin-left: auto; font-size: var(--text-sm); color: var(--color-ink-2); font-weight: 700; white-space: nowrap; }
.legend { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-md); display: flex; gap: var(--space-2xs); align-items: center; }
.legend .icon { width: 0.95rem; height: 0.95rem; }

.products { list-style: none; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.product { display: flex; min-width: 0; }
.product__card {
  display: flex; flex-direction: column; width: 100%;
  border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper);
  overflow: hidden; transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.product__card:hover { border-color: var(--color-rule-strong); box-shadow: var(--shadow-whisper); }
.product__media {
  position: relative; background: var(--color-paper-2); border-bottom: var(--rule-thin) solid var(--color-rule);
  display: grid; place-items: center; padding: var(--space-md) var(--space-md) var(--space-lg);
}
.product__media figcaption {
  position: absolute; left: var(--space-xs); bottom: var(--space-2xs);
  font-size: var(--text-2xs); color: var(--color-muted); line-height: 1.3;
}
.product__body { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-md) var(--space-md); flex: 1; }
.product__name { font-size: var(--text-base); font-weight: 700; line-height: var(--leading-snug); letter-spacing: -0.005em; }
.product__maker { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.facts { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); line-height: 1.4; }
.facts div { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--space-xs); }
.facts dt { color: var(--color-muted); }
.facts dd { margin: 0; color: var(--color-ink); }
.facts .na { color: var(--color-muted); font-style: normal; }
.product__cta { margin-top: auto; display: grid; gap: var(--space-2xs); }
.product__cta .btn { font-size: var(--text-sm); padding-inline: var(--space-sm); }
.product__cta small { font-size: var(--text-2xs); color: var(--color-muted); text-align: center; }

@media (max-width: 39.99rem) {
  .product__card { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-xs) var(--space-sm); padding: var(--space-sm); align-content: start; }
  .product__body { display: contents; }
  .product__media { grid-column: 1; grid-row: 1 / span 2; align-self: start; border: 0; border-radius: var(--radius-sm); padding: var(--space-xs); }
  .product__media figcaption { position: static; text-align: center; margin-top: var(--space-2xs); }
  .product__name, .product__card .chips { grid-column: 2; }
  .product__card .facts, .product__cta { grid-column: 1 / -1; }
  .product__cta { margin-top: var(--space-2xs); }
}
.strip-illus { width: min(100%, 11rem); height: auto; overflow: visible; }
.strip-illus { fill: var(--strip-fill, var(--swatch-unknown)); stroke: var(--strip-edge, var(--swatch-unknown-edge)); color: var(--strip-spring, var(--swatch-spring)); }
.strip--clear { --strip-fill: var(--swatch-clear); --strip-edge: var(--swatch-clear-edge); --strip-spring: var(--swatch-spring); }
.strip--beige { --strip-fill: var(--swatch-beige); --strip-edge: var(--swatch-beige-edge); --strip-spring: var(--swatch-spring-soft); }
.strip--white { --strip-fill: var(--swatch-white); --strip-edge: var(--swatch-white-edge); --strip-spring: var(--swatch-spring-soft); }
.strip--print { --strip-fill: url(#pat-print); --strip-edge: var(--swatch-print-3); --strip-spring: var(--swatch-spring-soft); }
.strip--unknown { --strip-fill: var(--swatch-unknown); --strip-edge: var(--swatch-unknown-edge); --strip-spring: var(--swatch-spring-soft); stroke-dasharray: 5 4; }
.pat-1 { fill: var(--swatch-print-1); }
.pat-2 { fill: var(--swatch-print-2); }
.pat-3 { fill: var(--swatch-print-3); }
.pat-4 { fill: var(--swatch-print-4); }

/* Detail table (hybrid: cards above, complete facts below) */
.detail { margin-top: var(--space-xl); }
.detail__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); }
.detail__head h3 { font-size: var(--text-lg); font-weight: 800; }
.detail__head p { font-size: var(--text-sm); color: var(--color-muted); }
.table-scroll {
  overflow-x: auto; border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); scrollbar-width: thin;
}
.data-table { width: 100%; min-width: 56rem; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: 1.45; }
.data-table caption { text-align: left; padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 700; color: var(--color-ink-2); border-bottom: var(--rule-thin) solid var(--color-rule); }
.data-table td { font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-thin) solid var(--color-rule); }
.data-table thead th {
  background: var(--color-paper-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs);
  color: var(--color-ink-2); white-space: nowrap; position: sticky; top: 0;
}
.data-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); background: var(--color-paper); min-width: 13rem; }
.data-table tbody tr:nth-child(even) td, .data-table tbody tr:nth-child(even) th { background: var(--color-paper-2); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table th:first-child { position: sticky; left: 0; z-index: var(--z-raised); border-right: var(--rule-thin) solid var(--color-rule); }
.data-table thead th:first-child { z-index: calc(var(--z-raised) + 1); }
.data-table .own-tag { display: inline-block; margin-top: var(--space-2xs); }
@media (max-width: 39.99rem) { .data-table tbody th { min-width: 9.5rem; font-size: var(--text-xs); } .data-table { min-width: 48rem; } }
.swipe-hint { display: none; font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-xs); }
@media (max-width: 59.99rem) { .swipe-hint { display: block; } }
.detail > summary { list-style: none; cursor: pointer; }
.detail > summary::-webkit-details-marker { display: none; }
.detail__toggle { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: var(--color-link); white-space: nowrap; }
.detail__toggle .icon { width: 1rem; height: 1rem; stroke-width: 2.2; transform: rotate(90deg); transition: transform var(--dur-micro) var(--ease-out); }
.detail:not([open]) .detail__toggle .icon { transform: none; }
.detail[open] .detail__closed { display: none; }
.detail:not([open]) .detail__opened { display: none; }
.data-table .na { color: var(--color-muted); }
.table-note { margin-top: var(--space-sm); }

.explain { list-style: none; display: grid; gap: var(--space-sm); margin-top: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.explain li { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); border: var(--rule-thin) solid var(--color-rule); font-size: var(--text-sm); line-height: 1.5; }
.explain strong { display: block; font-family: var(--font-display); font-size: var(--text-base); margin-bottom: var(--space-2xs); }

/* ---------- Bauformen ---------- */
.forms { list-style: none; display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); }
.form {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr auto; gap: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper);
  padding: 0 0 var(--space-md); overflow: hidden; min-width: 0;
}
.form > *:not(.form__media) { margin-inline: var(--space-md); }
.form__media { background: var(--color-paper-2); border-bottom: var(--rule-thin) solid var(--color-rule); display: grid; place-items: center; padding: var(--space-xs); }
.form__media img { width: auto; height: 6.5rem; }
@media (min-width: 40rem) { .form__media img { height: 8.5rem; } }
.form .text-link { font-size: var(--text-sm); }
.form h3 { font-size: var(--text-md); font-weight: 800; }
.form__type { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-xs)); }
.form__facts { display: grid; gap: 0; align-content: start; font-size: var(--text-sm); border-block: var(--rule-thin) solid var(--color-rule); }
.form__facts div { padding-block: var(--space-xs); display: grid; gap: var(--space-3xs); align-content: start; }
.form__facts div + div { border-top: var(--rule-thin) dashed var(--color-rule); }
.form__facts dt { color: var(--color-muted); font-size: var(--text-xs); font-family: var(--font-display); font-weight: 600; }
.form__facts dd { margin: 0; line-height: 1.4; }
.yn { display: inline-block; min-width: 2.4rem; text-align: center; padding: 0 0.4rem; margin-right: 0.3rem; border-radius: var(--radius-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); line-height: 1.5; }
.yn--yes { background: var(--color-navy); color: var(--color-on-navy); }
.yn--no { background: var(--color-paper); color: var(--color-ink-2); border: var(--rule-thin) solid var(--color-rule-strong); }
.yn--part { background: var(--chip-form-bg); color: var(--chip-form-ink); }
.form__note { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
@media (min-width: 40rem) { .forms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) {
  .forms { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form { grid-template-rows: subgrid; grid-row: span 6; }
}
.after-note { margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }

/* ---------- Evidence + red flag ---------- */
.evidence { list-style: none; display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.evidence li { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); background: var(--color-paper); display: grid; gap: var(--space-xs); align-content: start; }
.evidence h3 { font-size: var(--text-md); font-weight: 800; }
.evidence p { font-size: 0.9375rem; line-height: 1.5; color: var(--color-ink-2); }
.status { justify-self: start; }

.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md); padding: var(--space-md); margin-top: var(--space-lg);
}
.callout__icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-pill); display: grid; place-items: center; }
.callout__icon .icon { width: 1.35rem; height: 1.35rem; stroke-width: 2; }
.callout__body { display: grid; gap: var(--space-2xs); min-width: 0; }
.callout__label { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); }
.callout__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); line-height: var(--leading-snug); color: var(--color-ink); }
.callout__text { font-size: 0.9688rem; line-height: 1.55; }
.callout--alert { background: var(--color-alert-bg); border: var(--rule-bold) solid var(--color-alert); }
.callout--alert .callout__icon { background: var(--color-alert); color: var(--color-paper); }
.callout--alert .callout__label { color: var(--color-alert-ink); }
.callout--info { background: var(--color-info-bg); border: var(--rule-thin) solid var(--color-info-rule); }
.callout--info .callout__icon { background: var(--color-paper); color: var(--color-link); border: var(--rule-thin) solid var(--color-info-rule); }
.callout--info .callout__label { color: var(--color-link); }
.callout--own { background: var(--color-paper); border: var(--rule-thin) solid var(--color-rule-strong); }
.callout--own .callout__icon { background: var(--color-paper-3); color: var(--color-ink); }
.callout--own .callout__label { color: var(--color-ink-2); }

/* ---------- Own brand (Resty) ---------- */
.own { display: grid; gap: var(--space-lg); }
.own__text { display: grid; gap: var(--space-sm); font-size: 0.9688rem; color: var(--color-ink-2); }
.own__list { list-style: none; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.own__item { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--space-sm); align-items: center; padding: var(--space-xs); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.own__item img { width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--color-paper-2); border-radius: var(--radius-sm); }
.own__item p { font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.3; }
.own__item > div { display: grid; gap: var(--space-2xs); justify-items: start; min-width: 0; }
.own__link { grid-column: 1 / -1; justify-self: start; }
.own__item .chip { margin-block: var(--space-3xs); }
.own__text { max-width: 62rem; }

/* ---------- Topics ---------- */
.topics { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
.topics__group { display: grid; gap: var(--space-xs); }
.topics__group h3 { font-size: var(--text-sm); font-weight: 800; color: var(--color-ink-2); padding-bottom: var(--space-xs); border-bottom: var(--rule-bold) solid var(--color-navy); }
.topics__group ul { list-style: none; display: grid; }
.topic {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-xs); align-items: center;
  padding: var(--space-xs) 0; border-bottom: var(--rule-thin) solid var(--color-rule); text-decoration: none; color: var(--color-ink);
}
.topic strong { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; color: var(--color-link); }
.topic span { grid-column: 1; font-size: var(--text-sm); color: var(--color-muted); line-height: 1.35; }
.topic .icon { grid-row: 1 / span 2; grid-column: 2; color: var(--color-rule-strong); width: 1rem; height: 1rem; }
.topic:hover strong { text-decoration: underline; }
.topic:hover .icon { color: var(--color-link); }
.topics__stack { display: grid; gap: var(--space-lg); }

/* ---------- Sources ---------- */
.sources { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.sources > summary { cursor: pointer; padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; gap: var(--space-xs); }
.sources > summary .icon { color: var(--color-navy); }
.sources[open] > summary { border-bottom: var(--rule-thin) solid var(--color-rule); }
.source-list { padding: var(--space-sm) var(--space-md) var(--space-md) 2.75rem; font-size: var(--text-sm); display: grid; gap: var(--space-xs); columns: auto; }
.source-list li { padding-left: var(--space-2xs); line-height: 1.45; overflow-wrap: anywhere; }
.source-meta { display: block; font-size: var(--text-xs); color: var(--color-muted); font-family: var(--font-display); font-weight: 600; }

/* ---------- Footer ---------- */
.footer { background: var(--color-navy); color: var(--color-on-navy-muted); margin-top: var(--space-2xl); font-size: var(--text-sm); }
.footer a { color: var(--color-on-navy); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--color-on-navy); }
.footer :focus-visible { outline-color: var(--color-focus-on-navy); }
.footer__grid { display: grid; gap: var(--space-lg) var(--space-xl); padding-block: var(--space-xl) var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.footer__brand { max-width: 36rem; }
.footer__brand { display: grid; gap: var(--space-sm); align-content: start; }
.footer__brand p { line-height: 1.5; }
.footer__col h2 { color: var(--color-on-navy); font-size: var(--text-sm); font-weight: 800; margin-bottom: var(--space-xs); }
.footer__col ul { list-style: none; display: grid; gap: var(--space-2xs); }
.footer__meta { border-top: var(--rule-thin) solid var(--color-on-navy-rule); padding-block: var(--space-md) var(--space-lg); display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); }
@media (min-width: 40rem) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__brand { grid-column: 1 / -1; } }
@media (min-width: 60rem) { .footer__grid { grid-template-columns: repeat(4, max-content); justify-content: space-between; } }
@media (min-width: 84rem) { .footer__grid { grid-template-columns: minmax(0, 22rem) repeat(4, max-content); } .footer__brand { grid-column: auto; } }

/* ---------- Article page ---------- */
.crumbs { padding-top: var(--space-md); font-size: var(--text-sm); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2xs); white-space: nowrap; color: var(--color-muted); }
.crumbs li + li::before { content: "›"; color: var(--color-rule-strong); }
.crumbs a { color: var(--color-ink-2); }

.article-head { display: grid; gap: var(--space-lg); padding-block: var(--space-md) var(--space-lg); }
.article-head__main { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.article-head h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.018em; }
.trust { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); color: var(--color-ink-2); }
.trust li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.trust .icon { width: 1rem; height: 1rem; color: var(--color-navy); stroke-width: 2.4; }

.factbox { border: var(--rule-thin) solid var(--color-rule-strong); border-radius: var(--radius-lg); overflow: hidden; align-self: start; background: var(--color-paper); }
.factbox__head { background: var(--color-navy); color: var(--color-on-navy); padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); }
.factbox__grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.factbox__grid li { padding: var(--space-sm) var(--space-md); display: grid; gap: 0.1rem; border-bottom: var(--rule-thin) solid var(--color-rule); }
.factbox__grid li:nth-child(odd) { border-right: var(--rule-thin) solid var(--color-rule); }
.factbox__foot { padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-xs); }
.factbox__foot p { font-size: var(--text-xs); color: var(--color-muted); }
@media (min-width: 60rem) { .article-head { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: var(--space-xl); } }

.article-grid { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); }
.article-body { min-width: 0; display: grid; gap: var(--space-lg); align-content: start; }
.article-body > section { display: grid; gap: var(--space-md); }
.article-body h2 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.012em; padding-top: var(--space-md); border-top: var(--rule-bold) solid var(--color-navy); }
.article-body h3 { font-size: var(--text-md); font-weight: 800; margin-top: var(--space-xs); }
.article-body .keypoints h2 { border-top: 0; padding-top: 0; font-size: var(--text-lg); }
@media (max-width: 79.99rem) { .article-body .keypoints ul { grid-template-columns: minmax(0, 1fr); } }
.prose { display: grid; gap: var(--space-sm); max-width: 44rem; }
.prose p { line-height: 1.6; }
.article-aside { display: none; }
@media (min-width: 64rem) {
  .article-grid { grid-template-columns: minmax(0, 1fr) 18rem; }
  .article-aside { display: block; }
  .toc-mobile { display: none; }
}
.toc { position: sticky; top: 3.75rem; display: grid; gap: var(--space-md); }
.toc__box { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm) 0 var(--space-xs); background: var(--color-paper); }
.toc__title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm); padding: 0 var(--space-md) var(--space-xs); display: flex; align-items: center; gap: var(--space-xs); }
.toc ol { list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc__box a {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: var(--space-2xs);
  padding: 0.4rem var(--space-md); font-size: var(--text-sm); line-height: 1.35; color: var(--color-ink-2); text-decoration: none;
  border-left: 3px solid transparent;
}
.toc__box a::before { content: counter(toc); color: var(--color-muted); font-family: var(--font-display); font-weight: 700; }
.toc__box a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.toc__box a[aria-current] { border-left-color: var(--color-cta); color: var(--color-ink); font-weight: 700; background: var(--color-paper-2); }
.toc__cta { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: var(--space-xs); background: var(--color-paper-2); }
.toc__cta p { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; }
.toc__cta strong { font-family: var(--font-display); font-size: var(--text-base); color: var(--color-ink); }

.toc-mobile { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); }
.toc-mobile > summary { cursor: pointer; padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 700; display: flex; align-items: center; gap: var(--space-xs); }
.toc-mobile ol { padding: 0 var(--space-md) var(--space-sm) 2.25rem; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }

.minis { list-style: none; display: grid; gap: var(--space-sm); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-sm);
  border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm); background: var(--color-paper);
}
.mini__media { background: var(--color-paper-2); border-radius: var(--radius-sm); display: grid; place-items: center; padding: var(--space-xs); align-self: start; aspect-ratio: 1; }
.mini__media .strip-illus { width: 100%; }
.mini__body { display: grid; gap: var(--space-xs); min-width: 0; align-content: start; }
.mini__name { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.3; }
.mini__facts { font-size: var(--text-sm); color: var(--color-ink-2); }

.channels { list-style: none; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.channels li { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); display: grid; gap: var(--space-xs); align-content: start; font-size: var(--text-sm); line-height: 1.5; background: var(--color-paper); }
.channels strong { font-family: var(--font-display); font-size: var(--text-base); }
.channels .chip, .evidence .chip { justify-self: start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Site integration: article prose, shared content components, legal pages
   ===================================================================== */

/* Article head: hero photo in the right column when a page has no fact box */
.head-figure { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-paper-2); align-self: start; }
.head-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.head-figure--contain img { object-fit: contain; padding: var(--space-md); }
.head-figure figcaption { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); border-top: var(--rule-thin) solid var(--color-rule); background: var(--color-paper); }
@media (max-width: 59.99rem) { .head-figure { max-width: 32rem; } .head-figure img { aspect-ratio: 16 / 9; } }
.factbox__grid .stat { border: 0; border-radius: 0; background: transparent; padding: var(--space-sm) var(--space-md); }
.factbox__grid li:nth-last-child(-n + 2):nth-child(odd), .factbox__grid li:last-child { border-bottom: 0; }

/* Prose: flat page markup (h2/h3/p/ul + components) inside the article body */
.prose { max-width: none; display: block; }
.prose > * + * { margin-top: var(--space-md); }
.prose > p, .prose > ul, .prose > ol, .prose > h3, .prose > h4, .prose > .table-note, .prose > .note { max-width: 46rem; }
.prose p, .prose li { line-height: 1.62; }
.prose > ul:not([class]), .prose > ol:not([class]), .prose .callout ul:not([class]), .prose .callout ol:not([class]), .faq ul, .faq ol { padding-left: 1.25rem; }
.prose > ul:not([class]) li + li, .prose > ol:not([class]) li + li { margin-top: var(--space-2xs); }
.prose ul:not([class]) li::marker { color: var(--color-navy-3); }
.prose > h2 {
  font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.012em;
  margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-bold) solid var(--color-navy);
  scroll-margin-top: 3.75rem;
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { font-size: var(--text-md); font-weight: 800; margin-top: var(--space-lg); }
.prose > h2 + *, .prose > h3 + * { margin-top: var(--space-sm); }
.prose a:not(.btn):not(.text-link) { overflow-wrap: anywhere; }
.article-body { gap: var(--space-xl); }
.article-body > .keypoints { margin: 0; }

/* Tables (component) */
.table-scroll:focus-visible { outline-offset: 0; }
.table-scroll .data-table { min-width: 40rem; }
.table-scroll .data-table--compact { min-width: 30rem; }
.data-table caption { caption-side: top; }
.table-note { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.5; }
.prose > .table-scroll + .table-note { margin-top: var(--space-xs); }
@media (max-width: 39.99rem) { .table-scroll .data-table { min-width: 34rem; } .table-scroll .data-table--compact { min-width: 0; } }

/* Callout tones from the content components */
.callout { margin-top: 0; }
.prose > .callout, .section .callout { margin-top: var(--space-lg); }
.callout__text > * + * { margin-top: var(--space-xs); }
.callout--doctor { background: var(--color-alert-bg); border: var(--rule-bold) solid var(--color-alert); }
.callout--doctor .callout__icon { background: var(--color-alert); color: var(--color-paper); }
.callout--doctor .callout__label { color: var(--color-alert-ink); }
.callout--warn { background: var(--color-notice-bg); border: var(--rule-thin) solid var(--color-notice-rule); }
.callout--warn .callout__icon { background: var(--color-paper); color: var(--color-notice-ink); border: var(--rule-thin) solid var(--color-notice-rule); }
.callout--warn .callout__label { color: var(--color-notice-ink); }
@media (max-width: 23.99rem) { .callout { grid-template-columns: minmax(0, 1fr); } }

/* Figures */
.figure { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); overflow: hidden; background: var(--color-paper-2); max-width: 46rem; }
.figure img { width: 100%; }
.figure--contain img { width: auto; max-height: 15rem; margin-inline: auto; padding: var(--space-md); }
.figure--portrait { max-width: 26rem; }
.figure figcaption { padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.45; background: var(--color-paper); border-top: var(--rule-thin) solid var(--color-rule); }
.figure-credit { color: var(--color-muted); font-size: var(--text-xs); }
.figure-row { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.figure-row .figure { max-width: none; }

/* Steps */
.step-list { list-style: none; counter-reset: none; display: grid; gap: var(--space-sm); max-width: 46rem; padding: 0; }
.step-list li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-sm); align-items: start; padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.step-index { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-on-navy); font-family: var(--font-display); font-weight: 800; }
.step-list strong { font-family: var(--font-display); display: block; line-height: 1.3; margin-top: 0.35rem; }
.step-list p { font-size: 0.9688rem; color: var(--color-ink-2); margin-top: var(--space-2xs); }

/* Fact grid (label + explanation) */
.fact-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin: 0; }
.fact-grid > div { border: var(--rule-thin) solid var(--color-rule); border-left: 3px solid var(--color-navy); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.fact-grid dt { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); margin-bottom: var(--space-2xs); }
.fact-grid dd { margin: 0; font-size: 0.9688rem; line-height: 1.55; color: var(--color-ink-2); }

/* Pros / cons */
.pros-cons { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pros-cons > div { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); background: var(--color-paper); }
.pros-cons > div:first-child { border-top: 3px solid var(--chip-scent-ink); }
.pros-cons > div:last-child { border-top: 3px solid var(--chip-latex-ink); }
.pros-cons-title { font-family: var(--font-display); font-weight: 800; margin-bottom: var(--space-xs); }
.pros-cons ul { padding-left: 1.1rem; display: grid; gap: var(--space-2xs); font-size: 0.9688rem; }

/* Product cards from content pages (same visual language as the home comparison) */
.products { padding: 0; }
.products > * { display: flex; min-width: 0; }
.product__card--own { border-color: var(--chip-own-rule); }
.product__media img { width: auto; max-height: 9rem; }
.product__media--photo { padding: 0; }
.product__media--photo img { width: 100%; max-height: none; aspect-ratio: 16 / 10; object-fit: cover; }
.product__type { font-size: var(--text-sm); color: var(--color-muted); margin-top: calc(-1 * var(--space-xs)); }
.product__note { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.5; }
.facts--wide div { grid-template-columns: 8.5rem minmax(0, 1fr); }
@media (max-width: 39.99rem) {
  .product__type, .product__note { grid-column: 1 / -1; }
  .product__media--photo img { aspect-ratio: 1; }
  .facts--wide div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Mini product cards used on retailer and comparison pages */
.minis { padding: 0; }
.mini--own { border-color: var(--chip-own-rule); }
.mini__media img { width: 100%; height: 100%; object-fit: contain; }
.mini .btn { justify-self: start; }

/* FAQ */
.faq-section h2, .related h2, .sources-title { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.012em; margin-bottom: var(--space-md); }
.faq { display: grid; gap: var(--space-xs); }
.faq details { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper); }
.faq summary {
  cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center;
  padding: var(--space-sm) var(--space-md); font-family: var(--font-display); font-weight: 700; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.35rem; line-height: 1; color: var(--color-navy); font-weight: 600; }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { border-bottom: var(--rule-thin) solid var(--color-rule); }
.faq summary:hover { background: var(--color-paper-2); }
.faq details > div { padding: var(--space-sm) var(--space-md) var(--space-md); display: grid; gap: var(--space-xs); font-size: 0.9688rem; line-height: 1.6; color: var(--color-ink-2); max-width: 50rem; }

/* Related pages */
.next { list-style: none; display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding: 0; }
.next a {
  height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink); text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out);
}
.next a:hover { border-color: var(--color-navy); box-shadow: var(--shadow-whisper); color: var(--color-ink); text-decoration: none; }
.next strong { font-family: var(--font-display); font-weight: 800; line-height: 1.3; color: var(--color-link); }
.next span { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.45; }
.next .text-link { font-size: var(--text-sm); }

/* About this article */
.about-box { border: var(--rule-thin) solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); padding: var(--space-md); display: grid; gap: var(--space-xs); font-size: var(--text-sm); line-height: 1.55; color: var(--color-ink-2); }
.about-box-title { font-family: var(--font-display); font-weight: 800; font-size: var(--text-base); color: var(--color-ink); display: flex; gap: var(--space-xs); align-items: center; }
.about-box-title .icon { color: var(--color-navy); }
.about-box-note { font-size: var(--text-xs); color: var(--color-muted); }
.source-list { list-style: decimal; }
.sources .caption { padding: 0 var(--space-md) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }

/* Home helpers */
.section .wrap > .callout { max-width: 62rem; }
.section__head--wide { max-width: 62rem; }
.prose-block { display: grid; gap: var(--space-sm); max-width: 50rem; color: var(--color-ink-2); }
.prose-block p { line-height: 1.6; }
.prose-block ul { padding-left: 1.2rem; display: grid; gap: var(--space-xs); }
.channels a { font-weight: 700; }
.stat__value--word { font-size: var(--text-lg); line-height: 1.2; }

/* Legal and simple pages */
.legal { max-width: 46rem; padding-block: var(--space-lg) var(--space-xl); }
.legal h1 { font-size: var(--text-h1); font-weight: 800; letter-spacing: -0.018em; margin-bottom: var(--space-md); }
.legal h2 { font-size: var(--text-lg); font-weight: 800; margin-top: var(--space-xl); padding-top: var(--space-sm); border-top: var(--rule-thin) solid var(--color-rule); }
.legal h3 { font-size: var(--text-md); font-weight: 700; margin-top: var(--space-lg); }
.legal > * + * { margin-top: var(--space-sm); }
.legal ul, .legal ol { padding-left: 1.25rem; }
address { font-style: normal; }
.legal p, .legal li { line-height: 1.6; }
.action { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-md); border-radius: var(--radius-sm); background: var(--color-cta); color: var(--color-cta-ink); font-family: var(--font-display); font-weight: 700; text-decoration: none; }
.action:hover { background: var(--color-cta-hover); color: var(--color-cta-ink); text-decoration: none; }

@media print {
  .owner-bar { border: 1px solid; }
  .masthead, .tabs, .article-aside, .toc-mobile, .footer, .filters, .menu { display: none !important; }
  .detail:not([open]) > :not(summary) { display: block; }
}
.page-tail { display: grid; gap: var(--space-xl); padding-top: var(--space-xl); }
.page-tail:empty { display: none; }
.article-body > .faq-section, .article-body > .related, .article-body > #quellen, .article-body > .about-box { margin-top: 0; }
@media (max-width: 63.99rem) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.prose, .article-body > * { min-width: 0; }
.product__cta .btn { padding-inline: var(--space-sm); }
@media (max-width: 59.99rem) {
  .head-figure--contain img { aspect-ratio: auto; max-height: 13rem; width: auto; margin-inline: auto; }
}
@media (max-width: 39.99rem) { .product__media figcaption { display: none; } }
.mini__body { grid-template-columns: minmax(0, 1fr); }
.mini__name, .mini__facts, .chip { overflow-wrap: anywhere; }
@media (max-width: 29.99rem) {
  .mini { grid-template-columns: 3.75rem minmax(0, 1fr); gap: var(--space-xs); }
  .mini .btn { white-space: normal; text-align: center; justify-self: stretch; padding-inline: var(--space-xs); }
}
.product__cta .btn, .factbox .btn { white-space: normal; text-align: center; }
.crumbs li:last-child { white-space: normal; min-width: 0; }
.mini .btn { white-space: normal; text-align: center; max-width: 100%; }