:root {
  --bg: #fdfbf7; /* helles Creme (Papier) */
  --surface: #ffffff;
  --surface-2: #f4efe7;
  --text: #1c1917; /* Tinte */
  --muted: #6b625b;
  --line: #ddd4c7; /* Haarlinie */
  --line-strong: #1c1917; /* kräftige Linie (Kopf, Tabellenkopf) */
  --font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Archivo', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --accent: #7d4f86; /* Pflaume (preisdip); Logo-Dip #a26aa9 ist für Text auf Creme zu hell */
  --accent-ink: #ffffff;
  --accent-soft: #efe5f0;
  --good: #15803d;
  --good-soft: #e3f5e8;
  --warn: #a16207;
  --warn-soft: #fbf1d9;
  --bad: #9f1239; /* Weinrot */
  --shadow: none;
  --radius: 2px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141110;
    --surface: #1c1816;
    --surface-2: #25201d;
    --text: #ede6e1;
    --muted: #a89d96;
    --line: #3a322d;
    --line-strong: #ede6e1;
    --accent: #cfa3d6;
    --accent-ink: #25132a;
    --accent-soft: #2b2030;
    --good: #4ade80;
    --good-soft: #143222;
    --warn: #facc15;
    --warn-soft: #3a3110;
    --bad: #fb7185;
    --shadow: none;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

.muted {
  color: var(--muted);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand h1 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -0.01em;
}
.brand p {
  margin: 0;
  font-size: 13px;
}
.brand--link {
  color: inherit;
  text-decoration: none;
}
.brand__logo,
.brand__img {
  display: block;
  flex-shrink: 0;
}
.brand__logo img,
.brand__img {
  width: 40px;
  height: 40px;
}
.wordmark {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.wordmark span {
  color: var(--accent);
}
.crumb {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.crumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.crumb a.wordmark {
  color: var(--text);
}
.crumb a:hover {
  text-decoration: underline;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

/* Buttons & inputs */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.06s ease, background 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, black);
}
.btn--ghost {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover {
  background: var(--surface-2);
}
.btn[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.input {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 0;
}
.input:focus-visible,
.btn:focus-visible,
.seg button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hero */
.hero {
  margin: 20px 0 8px;
  padding: 18px 20px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.hero__label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.hero__price {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero__price small {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
}
.hero__name {
  font-weight: 600;
}

/* Laden ohne Layoutverschiebung (CLS): Bestpreis-Kasten, Statuszeile und Tabellenzeilen halten ihren Platz schon im
   HTML frei – app.js füllt sie nur noch, Filter, Tabelle und häufige Fragen springen nicht nach unten.
   Bestpreis: Text links, Knopf rechts, auch mit Gutscheincode (der volle-Breite-Knopf brach sonst unter den Text, und
   der Kasten war je nach Angebot 130 oder 230 px hoch); schmal untereinander. Mindesthöhe = übliche Höhe mit Inhalt. */
.hero > div {
  flex: 1 1 320px;
  min-width: 0;
}
.hero > .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 210px;
}
.hero {
  min-height: 158px;
}
/* Ohne Bestpreis (Sortierung nach Gesamtpreis bzw. Rabatt, keine Treffer): ganz weg – display: flex überstimmt sonst
   das hidden-Attribut, und der alte Inhalt blieb stehen */
.hero[hidden] {
  display: none;
}
.hero[aria-busy='true'] .hero__price,
.hero[aria-busy='true'] .hero__name {
  color: var(--muted);
}
.hero[aria-busy='true'] > .btn {
  visibility: hidden;
}
.pagehead #status {
  min-height: 1.55em;
}
#rows[aria-busy='true'] {
  min-height: 100vh;
}
@media (min-width: 641px) and (max-width: 900px) {
  .hero {
    min-height: 182px;
  }
}
@media (max-width: 640px) {
  .hero > .btn {
    flex: 1 1 100%;
  }
  .hero {
    min-height: 262px;
  }
  .pagehead #status {
    min-height: 4.65em;
  }
}

/* Toolbar: Suche, Sortierung, Filter */
.toolbar {
  margin: 18px 0 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  gap: 12px;
}
.toolbar__top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  transition: border-color 0.15s, background 0.15s;
}
.search:focus-within {
  border-color: var(--accent);
  background: var(--surface);
}
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
}
.sort {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 4px 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 13px;
  color: var(--muted);
}
.sort select {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  padding: 6px 4px;
  cursor: pointer;
}
.toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.toolbar__sep {
  width: 1px;
  height: 22px;
  background: var(--line);
  margin: 0 2px;
}
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
}
.seg button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
}
.seg button[aria-checked='true'] {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}
/* Auswahl als Chip: „Menge  beliebig ▾“ */
.chip-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
}
.chip-select::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.chip-select__label {
  color: var(--muted);
}
.chip-select__value {
  font-weight: 600;
  color: var(--text);
}
/* Das echte Auswahlfeld liegt unsichtbar über dem ganzen Chip: Klick auf Label, Wert oder Pfeil öffnet die Liste */
.chip-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font: inherit;
  appearance: none;
  border: 0;
}
.chip-select select:focus-visible {
  outline: none;
}
.chip-select:focus-within {
  border-color: var(--accent);
}
.chip-select.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.chip-select.is-active .chip-select__value {
  color: var(--accent);
}
/* Mehrfachauswahl als Chip mit aufklappbarer Checkbox-Liste */
.chip-multi {
  position: relative;
}
.chip-multi__toggle {
  font: inherit;
  font-size: 13px;
  color: var(--text);
}
.chip-multi__toggle[aria-expanded='true'] {
  border-color: var(--accent);
}
.chip-multi__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 190px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.14);
}
.chip-multi__title {
  padding: 4px 8px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.chip-multi__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
.chip-multi__option:hover {
  background: var(--surface-2);
}
.chip-multi__option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

/* Kippschalter */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch__track {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--line);
  transition: background 0.15s;
  flex-shrink: 0;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.15s;
}
.switch input:checked + .switch__track {
  background: var(--accent);
}
.switch input:checked + .switch__track::after {
  transform: translateX(14px);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.reset {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
}
.reset:hover {
  text-decoration: underline;
}

/* Table */
.table {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.row {
  display: grid;
  /* #, Produkt, Packung, Kilopreis, Portion, Protein, Verdicker, Gutschein, Button */
  grid-template-columns: 30px minmax(160px, 1.4fr) 112px 118px 92px 96px 132px minmax(124px, 1fr) 160px;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
}
.row--head {
  border-top: 0;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding-top: 10px;
  padding-bottom: 10px;
}
.row.is-top {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.rank {
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.is-top .rank {
  color: var(--accent);
}
.prod__brand {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.prod__name {
  font-weight: 650;
}
.prod__maker {
  display: inline-block;
  margin-right: 2px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  vertical-align: 1px;
}
.prod__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.badge--Konzentrat {
  background: #eef2ff;
  color: #3730a3;
  border-color: #e0e7ff;
}
.badge--Isolat {
  background: #fdf2f8;
  color: #9d174d;
  border-color: #fce7f3;
}
.badge--Clear {
  background: #ecfeff;
  color: #155e75;
  border-color: #cffafe;
}
@media (prefers-color-scheme: dark) {
  .badge--Konzentrat {
    background: #1e1b4b;
    color: #c7d2fe;
    border-color: #312e81;
  }
  .badge--Isolat {
    background: #3b0a24;
    color: #fbcfe8;
    border-color: #831843;
  }
  .badge--Clear {
    background: #083344;
    color: #a5f3fc;
    border-color: #155e75;
  }
}
.badge--Creapure {
  background: #fff7ed;
  color: #9a3412;
  border-color: #ffedd5;
}
.badge--Normal {
  background: #f1f5f9;
  color: #334155;
  border-color: #e2e8f0;
}
@media (prefers-color-scheme: dark) {
  .badge--Creapure {
    background: #3b1d0b;
    color: #fed7aa;
    border-color: #7c2d12;
  }
  .badge--Normal {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
  }
}
.badge--leucine {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
@media (prefers-color-scheme: dark) {
  .badge--leucine {
    background: #3b2a06;
    color: #fde68a;
    border-color: #78350f;
  }
}
.badge--Vegan {
  background: #f0fdf4;
  color: #166534;
  border-color: #dcfce7;
}
.badge--Vegetarisch {
  background: #f7fee7;
  color: #3f6212;
  border-color: #ecfccb;
}
@media (prefers-color-scheme: dark) {
  .badge--Vegan {
    background: #052e16;
    color: #bbf7d0;
    border-color: #14532d;
  }
  .badge--Vegetarisch {
    background: #1a2e05;
    color: #d9f99d;
    border-color: #365314;
  }
}
/* Kreatin: eine Spalte weniger (kein Protein/Verdicker, dafür Portionspreis) */
body[data-category='kreatin'] .row {
  grid-template-columns: 30px minmax(220px, 1.8fr) 112px 112px 112px minmax(140px, 1fr) 160px;
}
@media (max-width: 900px) {
  body[data-category='kreatin'] .row,
  body[data-category='omega-3'] .row,
  body[data-category='vitamin-d3-k2'] .row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    prot prot'
      '.    code code'
      '.    cta  cta';
  }
  body[data-category='kreatin'] .row > :nth-child(6),
  body[data-category='omega-3'] .row > :nth-child(6),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(6) {
    grid-area: code;
  }
  body[data-category='kreatin'] .row > :nth-child(7),
  body[data-category='omega-3'] .row > :nth-child(7),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(7) {
    grid-area: cta;
  }
}
/* Kreatin: Portionspreis */
.portion strong {
  font-size: 16px;
}
.portion .protein__price {
  display: block;
}
.badge--new {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.badge--tier {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
}
.badge--pack {
  background: var(--surface-2);
  color: var(--text);
}
.badge--pack-unknown {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
}
.prod__flavors {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}
.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

.price {
  font-weight: 600;
}
.strike {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-decoration: line-through;
}
.perkg {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.perkg small {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.code__chip {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  cursor: copy;
}
.code__plus {
  font-weight: 700;
  color: var(--accent);
  margin: 0 -2px;
}
.code__info {
  font-size: 12px;
  font-weight: 600;
}
.code__info--verified {
  color: var(--good);
}
.code__info--accepted,
.code__info--unverified {
  color: var(--warn);
}
.code__none {
  color: var(--muted);
  font-size: 13px;
}
.auto {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--good);
  font-weight: 600;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.cta__hint {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.cta .more {
  text-align: center;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.cta .more:hover {
  color: var(--text);
}

.sizes {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.sizes a {
  color: inherit;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.sizes a:hover {
  border-color: var(--accent);
}

.row.is-error {
  opacity: 0.55;
}

.empty {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
}

.foot {
  font-size: 13px;
  margin: 24px 0 48px;
  max-width: 820px;
}

.ship {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.gift {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.gift--inline {
  display: inline;
}
.ship--free {
  color: var(--good);
  font-weight: 600;
}
.protein {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.protein__pct {
  font-weight: 700;
  white-space: nowrap;
}
/* Proteinbalken als <progress> (ohne Inline-Styles, passt zur Content-Security-Policy) */
.protein__bar {
  display: block;
  width: 64px;
  height: 5px;
  border: 0;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.protein__bar::-webkit-progress-bar {
  background: var(--surface-2);
  border-radius: 99px;
}
.protein__bar::-webkit-progress-value {
  background: var(--accent);
  border-radius: 99px;
}
.protein__bar::-moz-progress-bar {
  background: var(--accent);
  border-radius: 99px;
}
.protein__price {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.qty {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.qty-note {
  margin: -4px 0 10px;
  font-size: 13px;
  min-height: 1em;
}
.cta__cart {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  color: var(--accent);
  text-decoration: none;
}
.cta__cart:hover {
  text-decoration: underline;
}

.mlabel {
  display: none;
}
.thick {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.thick--no {
  color: var(--good);
}
.thick--unknown {
  color: var(--muted);
  font-weight: 500;
}
.thick__via {
  color: var(--muted);
  font-weight: 600;
  margin-left: 1px;
}
.thick__tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
}

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  background: var(--text);
  color: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: calc(100vw - 32px);
}
.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Mobil: Karten statt Tabelle */
@media (max-width: 900px) {
  .row--head {
    display: none;
  }
  .row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    prot prot'
      '.    thick thick'
      '.    code code'
      '.    cta  cta';
    gap: 8px 12px;
    padding: 16px;
  }
  .row > :nth-child(1) {
    grid-area: rank;
  }
  .row > :nth-child(2) {
    grid-area: prod;
  }
  .row > :nth-child(3) {
    grid-area: pack;
    text-align: left;
  }
  .row > :nth-child(4) {
    grid-area: kg;
  }
  .row > :nth-child(5) {
    grid-area: prot;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  .row > :nth-child(5) .protein {
    flex-direction: row;
    align-items: center;
  }
  .row > :nth-child(5) .protein__price {
    margin-top: 0;
  }
  .row > :nth-child(6) {
    grid-area: thick;
  }
  .row > :nth-child(7) {
    grid-area: code;
  }
  .row > :nth-child(8) {
    grid-area: cta;
  }
  .toolbar__sep {
    display: none;
  }
  .mlabel {
    display: inline;
    font-size: 12px;
    color: var(--muted);
  }
  .reset {
    margin-left: 0;
  }
  .sizes {
    grid-column: 2 / -1;
  }
  .top .btn {
    padding: 8px 10px;
  }
  .brand p {
    font-size: 12px;
  }
}

/* Kontaktformular (/kontakt) */
.fb {
  max-width: 720px;
  margin: 24px 0 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.fb[hidden] {
  display: none;
}
.fb__group {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
}
.fb__group[hidden] {
  display: none;
}
.fb__legend,
.fb__label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 0;
}
.fb__kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.fb__kind {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 14px 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
}
.fb__kind input {
  position: absolute;
  left: 14px;
  top: 16px;
  accent-color: var(--accent);
}
.fb__kind:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fb__kind:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.fb__kind-title {
  font-weight: 700;
}
.fb__kind-text {
  font-size: 13px;
  color: var(--muted);
}
.fb__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fb__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.fb__chip[hidden] {
  display: none;
}
.fb__chip input {
  accent-color: var(--accent);
}
.fb__chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.fb__input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.fb__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-color: transparent;
}
textarea.fb__input {
  resize: vertical;
  min-height: 120px;
}
.fb__hint {
  font-size: 13px;
  margin: 6px 0 0;
}
.fb__hint:empty {
  display: none;
}
.fb__error {
  color: var(--bad);
  font-weight: 600;
  margin: 0 0 12px;
}
.fb__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.fb__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.foot__links a {
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 640px) {
  .fb {
    padding: 16px;
  }
}

/* Impressum & Datenschutz */
.legal {
  max-width: 760px;
  margin: 24px 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px 24px 20px;
  line-height: 1.6;
}
.legal h2 {
  font-size: 17px;
  margin: 22px 0 6px;
}
.legal a,
.fb__hint a {
  color: var(--accent);
}
/* Platzhalter, die vor dem Livegang ersetzt werden müssen */
.todo {
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 4px;
  padding: 0 4px;
  font-weight: 600;
}

/* Ratgeber / häufige Fragen unter den Vergleichen (auch für Suchmaschinen) */
.guide {
  max-width: 820px;
  margin: 32px 0 8px;
}
.guide h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
.guide h3 {
  font-size: 15px;
  margin: 18px 0 4px;
}
.guide p {
  margin: 0;
  line-height: 1.6;
  color: var(--muted);
}
.guide .seo-summary {
  margin-bottom: 8px;
}

/* Verdicker nur in einzelnen Sorten */
.thick__tag--some {
  opacity: 0.75;
}
.thick small {
  display: block;
  font-size: 11px;
}

/* Laktase-Hinweis */
.badge--lactase {
  background: var(--good-soft);
  color: var(--good);
  border-color: transparent;
}
.badge--mhd {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}
/* MHD laut Shop schon vorbei: bleibt im Vergleich, aber deutlich markiert */
.badge--mhd-expired {
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  color: var(--bad);
}
.badge--gift {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

/* Produktseiten */
.prod__link {
  color: inherit;
  text-decoration: none;
}
.prod__link:hover {
  color: var(--accent);
  text-decoration: underline;
}
.pp__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 18px 0;
}
.pp__facts div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 14px;
}
.pp__facts dt {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pp__facts dd {
  margin: 4px 0 0;
  font-weight: 600;
}
.pp__scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pp__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.pp__table th,
.pp__table td {
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.pp__table thead th {
  border-top: 0;
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.pp__table .num {
  text-align: right;
  white-space: nowrap;
}
.pp__table tr.is-best td {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}
.pp__table .small,
.pp__links + .small,
p.small {
  font-size: 12px;
}
.pp__links {
  columns: 2 260px;
  padding-left: 18px;
  line-height: 1.8;
}
.pp__links a {
  color: var(--accent);
}
@media (max-width: 700px) {
  .pp__table thead {
    display: none;
  }
  .pp__table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 12px 14px;
    border-top: 1px solid var(--line);
  }
  .pp__table td {
    padding: 0;
    border: 0;
  }
  .pp__table td:nth-child(5),
  .pp__table td:nth-child(6) {
    grid-column: 1 / -1;
  }
}

/* Versionsnummer rechts oben */
.top__inner {
  position: relative;
}
.app-version {
  margin-left: auto;
  align-self: flex-start;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.8;
  white-space: nowrap;
}

.badge--flavor {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}

/* Zurück-Button unter dem Kopf */
.backbar {
  margin: 14px 0 -4px;
}
.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.back:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Statusseite (/status) */
.st__facts {
  margin-bottom: 16px;
}
.st__table td {
  font-size: 13px;
}
.st__table details {
  margin-top: 4px;
}
.st__table summary {
  cursor: pointer;
  color: var(--muted);
}
.st__table ul {
  margin: 4px 0 0;
  padding-left: 16px;
  max-width: 420px;
  word-break: break-word;
}
.st__badge--ok {
  background: var(--good-soft);
  color: var(--good);
  border-color: transparent;
}
.st__badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}
.st__badge--bad {
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  color: var(--bad);
  border-color: transparent;
}
.st__badge--new {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}
.st__late {
  color: var(--bad);
  font-weight: 600;
}
.st__overall {
  margin: 18px 0 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.st__overall-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-bottom: 8px;
}
.st__overall .st__bar {
  width: 100%;
  height: 10px;
}
.st__progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.st__bar {
  display: block;
  width: 110px;
  height: 6px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.st__bar > span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--accent);
  /* gleitet zwischen zwei Aktualisierungen (1 s) zum neuen Stand */
  transition: width 0.9s linear;
}
.st__wait {
  margin-top: 2px;
  color: var(--warn);
  font-weight: 600;
}
/* Zeilen eines laufenden Abrufs behalten ihre Höhe, auch leer (sonst springen die Karten im Sekundentakt); lange
   Texte werden gekürzt statt umzubrechen */
.st__progress ~ .st__eta,
.st__progress ~ .st__current,
.st__progress ~ .st__wait {
  line-height: 1.5;
  min-height: 1.5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st__current {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.st__table tr.is-running td {
  background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
}

/* Statistikseite (/statistik) */
.sx__facts {
  margin: 18px 0 16px;
}
.sx__box {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 0;
}
.sx__box h2 {
  margin: 0 0 10px;
  font-size: 15px;
}
.sx__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 16px;
}
.sx__ranges {
  font-size: 13px;
}
.sx__ranges a {
  color: var(--accent);
}
.sx__chart {
  display: block;
  width: 100%;
  height: auto;
}
.sx__chart .sx__views {
  fill: var(--accent-soft);
}
.sx__chart .sx__visitors {
  fill: var(--accent);
}
.sx__chart .sx__grid {
  stroke: var(--line);
  stroke-width: 1;
}
.sx__chart .sx__label {
  fill: var(--muted);
  font-size: 10px;
}
.sx__key {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 2px 0 8px;
  border-radius: 2px;
  vertical-align: -1px;
}
.sx__key--views {
  margin-left: 0;
  background: var(--accent-soft);
}
.sx__key--visitors {
  background: var(--accent);
}
.sx__grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 16px;
}
.sx__table {
  width: 100%;
  border-collapse: collapse;
}
.sx__table td {
  padding: 6px 4px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  word-break: break-word;
  vertical-align: top;
}
.sx__table td.num {
  white-space: nowrap;
  width: 1%;
  padding-left: 12px;
}
.sx__table tr:first-child td {
  border-top: 0;
}
.sx__table a {
  color: var(--accent);
}
.sx__login {
  max-width: 380px;
  padding-top: 12vh;
}
.sx__login form {
  display: grid;
  gap: 10px;
}
.sx__login h1 {
  margin: 0;
  font-size: 20px;
}
.sx__login p {
  margin: 0;
}
.sx__login label {
  font-size: 13px;
  font-weight: 600;
}
.sx__login input[type='password'] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.sx__login input[type='password']:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sx__error {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
}
.sx__logout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 32px;
}
.sx__logout button {
  cursor: pointer;
  font: inherit;
}
/* Admin-Navigation oben rechts auf der Statistik (Changelog, Version) */
.sx__adminnav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* =====================================================================================================================
   Design „Preisliste“ (2026): Papier, Tinte, Pflaume. Haarlinien statt Karten, eckige Formen, eigene Schriften
   (Archivo für Titel, IBM Plex Sans für Text, IBM Plex Mono für Preise). Liegt bewusst als eigene Ebene über den
   Grundregeln oben.
   ===================================================================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/font-archivo.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('/font-plex-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/font-plex-mono-600.woff2') format('woff2');
}

body {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.55;
}
h1,
h2,
h3 {
  font-family: var(--font-display);
}
.num,
.price,
.perkg,
.strike,
.qty,
.rank,
.hero__price,
.app-version {
  font-family: var(--font-mono);
}

/* Kopf: schlanke Leiste mit Navigation */
.top {
  position: static;
  background: var(--bg);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line-strong);
}
.top__inner {
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}
.brand--link {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand__img {
  width: 34px;
  height: 34px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.topnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  font-weight: 500;
}
.topnav a {
  color: var(--text);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.topnav a:hover,
.topnav a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
/* Safari nimmt die Strichstärke sonst nicht in innere Elemente mit: „Vitamin“ in „Vitamin D3/K2“ war dünner
   unterstrichen als „D3/K2“ */
.topnav a * {
  text-decoration-thickness: inherit;
}
.topnav__muted,
.topnav a.topnav__muted {
  color: var(--muted);
}
.app-version {
  font-size: 12px;
}
/* Versteckter Zugang zur Administration: Die Versionsnummer ist ein Link auf /admin, sieht aber aus wie vorher der
   Text (gedämpft, ohne Unterstreichung, auch nicht beim Darüberfahren – gilt auch in der Navigationsleiste) */
a.app-version,
.topnav a.app-version,
.topnav a.app-version:hover {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}
/* Proteinriegel: Einheit unter dem Preis (schmale Spalte), Sortenspanne darf umbrechen */
body[data-category='riegel'] .perkg small {
  display: block;
}
/* Proteinriegel: zusätzliche Spalte „kcal je Proteinriegel“ – #, Produkt, Packung, Preis, Protein je Riegel, Protein,
   kcal, Kollagen, Gutschein, Button */
@media (min-width: 1280px) {
  body[data-category='riegel'] .row {
    grid-template-columns: 30px minmax(150px, 1.3fr) 100px 112px 92px 96px 76px 88px minmax(120px, 1fr) 136px;
    gap: 10px;
  }
}
/* Mittlere Breiten: Spalten enger; reicht der Platz nicht, lässt sich die Tabelle seitlich scrollen */
@media (min-width: 901px) and (max-width: 1279px) {
  body[data-category='riegel'] .row {
    grid-template-columns: 24px minmax(116px, 1fr) 100px 100px 76px 80px 68px 84px minmax(90px, 0.8fr) 132px;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  body[data-category='riegel'] .table {
    overflow-x: auto;
  }
}
.kcal strong {
  font-size: 16px;
}
/* Einheit unter der Zahl wie beim Preis je Proteinriegel (schmale Spalte), am Handy in derselben Zeile */
.kcal small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
@media (max-width: 900px) {
  .kcal small {
    display: inline;
    margin-left: 4px;
  }
}
body[data-category='riegel'] .portion__sub {
  white-space: normal;
}
/* Handy: fünf Vergleiche in einer Zeile – „Vitamin“ entfällt, engere Abstände und etwas kleinere Schrift */
@media (max-width: 480px) {
  .topnav {
    gap: 4px 12px;
    font-size: 14px;
  }
  .topnav__long {
    display: none;
  }
}

/* Seitentitel unter dem Kopf */
.pagehead {
  padding: 24px 0 18px;
}
.pagehead h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
}
.pagehead__suffix {
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}
.pagehead__meta {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 13px;
}
.pagehead .crumb {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-weight: 400;
}
.pagehead .crumb a {
  font-weight: 600;
  letter-spacing: 0;
}
.back {
  border-radius: var(--radius);
}

/* Kopfleiste mit sechs und mehr Vergleichen (alle Seiten): Die Navigation bricht nie um. Passt sie nicht neben das Logo,
   steht sie in einer eigenen Zeile darunter, und ist sie auch dafür zu breit, lässt sie sich waagrecht scrollen (mit
   sieben Vergleichen unter 770 px). Am Handy reicht die Zeile bis an den Bildschirmrand, mit Verlauf an den Kanten als
   Hinweis, dass es weitergeht; liegt der Link der aktuellen Seite außerhalb, holen Browser mit scroll-initial-target
   ihn beim Laden rechts vor den Verlauf (die übrigen beginnen links). */
.topnav {
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar {
  display: none;
}
.topnav a {
  flex: none;
  white-space: nowrap;
}
/* Fokusrahmen nach innen, sonst schneidet die scrollbare Leiste ihn ab */
.topnav a:focus-visible {
  outline-offset: -2px;
}
@media (max-width: 800px) {
  .topnav {
    flex: 1 1 100%;
    margin: -8px -16px 0;
    padding: 0 32px 0 16px;
    scroll-padding-inline: 16px 32px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 32px), transparent);
  }
  .topnav a[aria-current='page'] {
    scroll-initial-target: nearest;
    scroll-snap-align: end;
  }
}

/* Startseite (Aufbau 2026-10, für sechs und mehr Vergleiche): Motto und Einleitung, darunter EIN Kassenbon
   „Tiefstpreise“ über die ganze Breite mit einem Feld je Vergleich – Tiefstpreis, Angebot, Kurzbeschreibung und Anzahl,
   das ganze Feld führt zum Vergleich. Der Bon wächst in die Breite statt in die Höhe: am Handy ein Feld je Zeile, ab
   720 px zwei, ab 1100 px drei; eine unvollständige letzte Zeile füllt sich auf. */
.landing {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
  padding: 32px 0 28px;
}
/* Überschrift der Seite (h1, beschreibend für Suchmaschinen und Screenreader) als ruhige Zeile über dem Motto; das
   Motto „Buy the dip.“ ist groß und prägend, aber keine Überschrift */
.landing__eyebrow {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}
.landing__motto {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 11vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.landing__lead {
  max-width: 540px;
  margin: 4px 0 0;
  font-size: 17px;
}
/* Rechner: Motto links, Einleitung rechts auf seiner Grundlinie – keine leere Fläche neben dem Motto */
@media (min-width: 900px) {
  .landing {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    align-items: last baseline;
    column-gap: clamp(40px, 6vw, 88px);
    padding: 52px 0 40px;
  }
  .landing__eyebrow {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
  .landing__lead {
    margin: 0;
    font-size: 18px;
  }
}

/* Bon: Papier mit gezackter Abrisskante oben und unten (Maske); der Schatten liegt am Wrapper, weil die Maske ihn am
   Bon selbst abschneiden würde */
.receipt-wrap {
  margin: 0 0 12px;
  filter: drop-shadow(0 1px 1px rgba(28, 25, 23, 0.08)) drop-shadow(0 10px 18px rgba(28, 25, 23, 0.1));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .receipt-wrap {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
  }
}
:root[data-theme='dark'] .receipt-wrap {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.receipt {
  --tooth: 7px;
  padding: calc(18px + var(--tooth)) 20px calc(16px + var(--tooth));
  background: var(--surface);
  line-height: 1.5;
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x;
}
.receipt__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.receipt__head h2 {
  margin: 0;
  font: inherit;
  font-weight: 600;
}
.receipt__time {
  color: var(--muted);
}
/* Felder: Abstand zum Nachbarn als Innenabstand (die Liste ragt um diesen Betrag nach außen, der Text bleibt bündig mit
   dem Kopf); die gestrichelte Linie über jedem Feld ist so breit wie sein Text, die der ersten Zeile schneidet die Liste
   ab */
.receipt__list {
  --gutter: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 calc(-1 * var(--gutter));
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.cat {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: -1px;
  padding: 18px var(--gutter);
}
.cat::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px dashed var(--line);
}
@media (hover: hover) {
  .cat:hover {
    background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface));
  }
  .cat:hover .cat__name {
    color: var(--accent);
  }
  .cat:hover .cat__cta {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.cat__name {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  hyphens: manual;
}
.cat__name a {
  color: inherit;
  text-decoration: none;
}
/* Das ganze Feld ist klickbar; der Link selbst heißt nur wie der Vergleich („Whey Protein“) */
.cat__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}
@supports selector(:has(a)) {
  .cat__name a:focus-visible {
    outline: none;
  }
  .cat:has(a:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
  }
}
.cat__desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}
.receipt__price {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent);
  white-space: nowrap;
}
.receipt__price small {
  margin-left: 2px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}
/* Angebot: Produkt hervorgehoben, dahinter Shop, Portion, MHD-Ware und Code */
.receipt__note {
  margin: 2px 0 0;
  line-height: 1.5;
  color: var(--muted);
}
.receipt__note strong {
  font-weight: 600;
  color: var(--text);
}
.cat__stats {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.cat__count {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cat__cta {
  flex: none;
  font-weight: 600;
  color: var(--accent);
}
.receipt__foot {
  margin: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  text-align: center;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* Sehr schmale Handys (unter 360 px): Anzahl und „Zum Vergleich“ untereinander statt abgeschnitten */
@media (max-width: 359px) {
  .cat__stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}
/* Ab zwei Feldern je Zeile: Zeilen der Felder als Subgrid – Preise, Angebote und Anzahl stehen nebeneinander auf einer
   Höhe, auch wenn die Kurzbeschreibungen verschieden lang sind */
@media (min-width: 720px) {
  .receipt {
    padding-left: 28px;
    padding-right: 28px;
  }
  .receipt__list {
    --gutter: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cat {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    padding-top: 22px;
    padding-bottom: 20px;
  }
  .cat__name {
    font-size: clamp(22px, 2.2vw, 30px);
  }
  .receipt__price {
    font-size: 26px;
  }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .cat:nth-child(2n + 1):last-child {
    grid-column: 1 / -1;
  }
}
/* Drei Felder je Zeile (sechs Spalten, je Feld zwei); bleiben in der letzten Zeile zwei übrig, teilen sie sich die
   Breite, bleibt eins übrig, werden die letzten vier zu 2 + 2 */
@media (min-width: 1100px) {
  .receipt__list {
    --gutter: 24px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .cat {
    grid-column: span 2;
  }
  .cat:nth-child(3n + 1):nth-last-child(2),
  .cat:nth-child(3n + 1):nth-last-child(2) + .cat,
  .cat:nth-child(3n + 1):nth-last-child(4),
  .cat:nth-child(3n + 1):nth-last-child(4) ~ .cat {
    grid-column: span 3;
  }
  .cat:only-child {
    grid-column: 1 / -1;
  }
}

/* So rechnet preisdip */
.howto {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 44px 0 56px;
}
.howto__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.howto h2 {
  margin: 12px 0 6px;
  font-size: 22px;
  font-weight: 700;
}
.howto p {
  margin: 0;
}
@media (max-width: 760px) {
  .howto {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

/* Buttons und Eingaben: eckig, Tinte; mit Gutscheincode in Pflaume */
.btn {
  border-radius: var(--radius);
  min-height: 44px;
}
.btn--primary {
  background: var(--text);
  color: var(--bg);
}
.btn--primary:hover {
  background: color-mix(in srgb, var(--text) 82%, var(--bg));
}
.btn--code {
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--code:hover {
  background: color-mix(in srgb, var(--accent) 85%, black);
}
.btn__sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}
.btn--ghost,
.input,
.sort,
.chip-select,
.chip-multi__toggle,
.chip-multi__panel {
  border-radius: var(--radius);
}

/* Bestpreis oben: wie ein Bon */
.hero {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 0;
}
.hero__label {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero__price {
  font-weight: 600;
  color: var(--accent);
}

/* Filterleiste: keine Karte, Linien oben und unten */
.toolbar {
  margin: 8px 0 0;
  padding: 14px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.search {
  height: 44px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.search:focus-within {
  background: none;
  border-bottom-color: var(--accent);
}
.sort {
  background: var(--surface);
}
.seg {
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  /* Whey hat fünf Typen: auf schmalen Handys umbrechen statt die Seite seitlich scrollen zu lassen */
  flex-wrap: wrap;
  max-width: 100%;
}
.seg button {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
}
.seg button[aria-checked='true'] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  box-shadow: none;
}
@media (max-width: 520px) {
  /* „Alle · Konzentrat · Isolat · Hydrolysat · Clear“ passt so auch auf 360 px breiten Handys in eine Zeile */
  .seg button {
    padding: 6px 8px;
  }
}
@media (max-width: 370px) {
  .seg button {
    padding: 6px 6px;
  }
}

/* Vergleichsliste: Preisliste mit Haarlinien statt Karten */
.table {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.row--head {
  background: none;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.row {
  border-top: 1px solid var(--line);
}
.row.is-top {
  background: none;
}
.rank {
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}
.is-top .rank,
.is-top .perkg {
  color: var(--accent);
}
.prod__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.prod__link {
  color: inherit;
}
.stamp {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 7px;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 2px;
  transform: rotate(-3deg);
}
.perkg {
  font-weight: 600;
}
.badge {
  border-radius: var(--radius);
}
.code__chip {
  font-family: var(--font-mono);
  border-radius: var(--radius);
}
@media (max-width: 900px) {
  .row {
    padding: 18px 0;
  }
}

/* Produktseiten */
.pp__scroll {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.pp__table thead th {
  background: none;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.pp__table tr.is-best td {
  background: none;
}
.pp__table tr.is-best td:first-child strong {
  color: var(--accent);
}

/* Fußzeile */
.foot {
  max-width: none;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
}

/* Whey: Spalte „Portion“ (5. Kind) → am Handy eigene Zeile unter Packung/Kilopreis */
@media (max-width: 900px) {
  body[data-category='whey'] .row,
  body[data-category='riegel'] .row {
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    port port'
      '.    prot prot'
      '.    thick thick'
      '.    code code'
      '.    cta  cta';
  }
  body[data-category='whey'] .row > :nth-child(5),
  body[data-category='riegel'] .row > :nth-child(5) {
    grid-area: port;
    display: block;
    text-align: left;
  }
  body[data-category='whey'] .row > :nth-child(6),
  body[data-category='riegel'] .row > :nth-child(6) {
    grid-area: prot;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  body[data-category='whey'] .row > :nth-child(6) .protein,
  body[data-category='riegel'] .row > :nth-child(6) .protein {
    flex-direction: row;
    align-items: center;
  }
  body[data-category='whey'] .row > :nth-child(6) .protein__price,
  body[data-category='riegel'] .row > :nth-child(6) .protein__price {
    margin-top: 0;
  }
  body[data-category='whey'] .row > :nth-child(7),
  body[data-category='riegel'] .row > :nth-child(7) {
    grid-area: thick;
  }
  body[data-category='whey'] .row > :nth-child(8),
  body[data-category='riegel'] .row > :nth-child(8) {
    grid-area: code;
  }
  body[data-category='whey'] .row > :nth-child(9),
  body[data-category='riegel'] .row > :nth-child(9) {
    grid-area: cta;
  }
  /* Proteinriegel: 7. Spalte kcal (eigene Zeile), Kollagen, Gutschein und Button rücken eins nach hinten */
  body[data-category='riegel'] .row {
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    port port'
      '.    prot prot'
      '.    kcal kcal'
      '.    thick thick'
      '.    code code'
      '.    cta  cta';
  }
  body[data-category='riegel'] .row > :nth-child(7) {
    grid-area: kcal;
    text-align: left;
  }
  body[data-category='riegel'] .row > :nth-child(8) {
    grid-area: thick;
  }
  body[data-category='riegel'] .row > :nth-child(9) {
    grid-area: code;
  }
  body[data-category='riegel'] .row > :nth-child(10) {
    grid-area: cta;
  }
}
/* Lange Spaltenköpfe („Verdickungsmittel“) dürfen getrennt werden */
.row--head span {
  hyphens: auto;
  overflow-wrap: break-word;
}
.pagehead__note {
  max-width: 720px;
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--muted);
}
@media (min-width: 761px) and (max-width: 1000px) {
  .howto {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tabellenkopf: eine gemeinsame Grundlinie, keine Linie darüber; Hinweis darüber mit Luft */
.row--head {
  border-top: 0;
  align-items: end;
  padding-top: 8px;
  padding-bottom: 10px;
  line-height: 1.35;
}
.row--head span {
  hyphens: manual;
}
.qty-note {
  margin: 16px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

/* Button mit Gutscheincode: zwei zentrierte Zeilen, Code in der Preisschrift, lange Codes brechen um */
.btn--code {
  width: 100%;
  padding: 7px 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  gap: 3px;
}
.btn--code .btn__sub {
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 12px;
}
.btn--code .btn__sub svg {
  flex: none;
}
.btn__code {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

/* Rohstoffpreise im Seitenkopf: eine dezente Zeile in der Preisschrift */
.raw {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
}
.raw__label {
  color: var(--text);
}
.raw__item strong {
  font-weight: 600;
  color: var(--text);
}
.raw__detail {
  font-size: 11.5px;
}
.raw__meta {
  flex-basis: 100%;
  font-size: 11.5px;
}
.raw__meta a {
  color: inherit;
}
.st__h2 {
  margin: 32px 0 4px;
  font-size: 20px;
}

/* Kleine Texte: Plex Mono wirkt unter 13 px pixelig – Hinweise, Etiketten und Spaltenköpfe in Plex Sans (mit
   gleich breiten Ziffern) und etwas größer; die Monospace-Schrift bleibt den großen Preisen und Codes vorbehalten. */
.raw,
.raw__meta,
.pagehead__meta,
.hero__label,
.row--head,
.pp__table thead th,
.stamp,
.qty,
.strike,
.ship,
.mlabel,
.protein__price,
.gift,
.app-version,
.receipt__note,
.receipt__foot,
.cat__stats,
.landing__eyebrow {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.raw {
  font-size: 13.5px;
  gap: 2px 10px;
}
.raw__item strong {
  font-family: var(--font-mono);
  font-size: 13.5px;
}
.raw__detail,
.raw__meta {
  font-size: 13px;
}
.pagehead__meta,
.row--head,
.pp__table thead th,
.qty,
.strike,
.ship,
.mlabel,
.protein__price,
.gift,
.receipt__note,
.receipt__foot,
.app-version {
  font-size: 13px;
}
.hero__label,
.stamp {
  font-size: 12.5px;
  letter-spacing: 0.03em;
}
.btn__code {
  font-size: 13px;
}
.perkg small {
  font-family: var(--font-sans);
  font-size: 13px;
}

/* Mittlere Breiten (Tablet quer, kleine Laptops): Whey-Spalten enger, damit die Tabelle nicht abgeschnitten wird;
   reicht der Platz trotzdem nicht, lässt sich die Tabelle seitlich scrollen statt abzuschneiden */
@media (min-width: 901px) and (max-width: 1199px) {
  body[data-category='whey'] .row {
    grid-template-columns: 24px minmax(124px, 1fr) 108px 108px 80px 84px 112px minmax(96px, 0.8fr) 136px;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  body[data-category='kreatin'] .row {
    grid-template-columns: 28px minmax(170px, 1.6fr) 104px 108px 104px minmax(120px, 1fr) 140px;
    gap: 10px;
  }
  .table {
    overflow-x: auto;
  }
}

.raw__more {
  color: var(--muted);
  font-size: 13px;
}
.raw__more:hover {
  color: var(--accent);
}
/* Feedback: vier Arten als 2 × 2 statt 3 + 1 */
.fb__kinds {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 520px) {
  .fb__kinds {
    grid-template-columns: 1fr;
  }
}

/* Omega-3: Einheit unter dem Kilopreis (Preis gilt je kg EPA+DHA, nicht je kg Öl) */
.perkg__unit {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}
.badge--ratio {
  font-variant-numeric: tabular-nums;
}

/* Ausgeblendeter Vergleich: Hinweis nur für den angemeldeten Betreiber */
.hidden-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px dashed var(--warn);
  font-size: 14px;
}

/* Newsletter-Rabatt: kein kopierbarer Code, nur Hinweis */
.code__chip--newsletter {
  cursor: help;
  border-style: dotted;
}

/* „Nach oben“-Knopf: dezent unten rechts, erst sichtbar, wenn die Filterleiste aus dem Bild ist */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.to-top[hidden] {
  display: none;
}
.to-top:hover,
.to-top:focus-visible {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}

/* Schalter in der Filterleiste: eigene Zeile, auf breiten Bildschirmen ohne Umbruch nebeneinander */
.toolbar__switches {
  display: flex;
  flex-basis: 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 20px;
}
.toolbar__switches .switch {
  white-space: nowrap;
}
@media (max-width: 1100px) {
  .toolbar__switches {
    flex-wrap: wrap;
  }
}

/* Omega-3: Portionsangabe unter dem Preis – jede Zeile für sich ohne Umbruch */
.perkg__unit > span {
  display: block;
  white-space: nowrap;
}


/* Spaltenköpfe einheitlich in Plex Sans (auch die rechtsbündigen Zahlenspalten, die sonst Plex Mono erben) */
.row--head > span {
  font-family: var(--font-sans);
}
.perkg__unit {
  font-family: var(--font-sans);
}

/* Produktspalte: Angaben als Elemente mit Abstand (ohne Trennpunkte) */
.prod__meta {
  gap: 4px 10px;
}
.meta__amount {
  color: var(--muted);
}

/* Spalte „Portion“: Preis fett, darunter Mengenzeilen – in allen Vergleichen gleich */
.portion__sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}


/* Omega-3: wie Whey – Packung, Portion, Grammpreis (je g Öl), EPA+DHA-Anteil, Zusatzstoffe, Gutschein, Button;
   Vitamin D3/K2: Packung, Portion, D3-Anteil, K2-Anteil, Zusatzstoffe, Gutschein, Button;
   Ashwagandha und Melatonin: Packung, Portion, Wirkstoff-Anteil, Zusatzstoffe, Gutschein, Button (8 Spalten, weiter unten) */
body[data-category='omega-3'] .row,
body[data-category='vitamin-d3-k2'] .row {
  /* Summe der Mindestbreiten samt Abständen ≤ Inhaltsbreite (1.148 px), sonst schneidet die Tabelle den Button ab */
  grid-template-columns: 30px minmax(150px, 1.3fr) 104px 120px 88px 100px 120px minmax(110px, 1fr) 150px;
}
@media (min-width: 901px) and (max-width: 1199px) {
  body[data-category='omega-3'] .row,
  body[data-category='vitamin-d3-k2'] .row {
    grid-template-columns: 22px minmax(96px, 1fr) 92px 100px 72px 84px 96px minmax(80px, 0.8fr) 132px;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
  /* Reicht der Platz trotzdem nicht (lange Wörter), lässt sich die Tabelle seitlich scrollen statt abzuschneiden */
  body[data-category='omega-3'] .table,
  body[data-category='vitamin-d3-k2'] .table,
  body[data-category='ashwagandha'] .table,
  body[data-category='melatonin'] .table {
    overflow-x: auto;
  }
}
@media (max-width: 900px) {
  body[data-category='omega-3'] .row,
  body[data-category='vitamin-d3-k2'] .row,
  body[data-category='ashwagandha'] .row,
  body[data-category='melatonin'] .row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    port port'
      '.    prot prot'
      '.    extr extr'
      '.    code code'
      '.    cta  cta';
  }
  body[data-category='omega-3'] .row > :nth-child(5),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(5),
  body[data-category='ashwagandha'] .row > :nth-child(5),
  body[data-category='melatonin'] .row > :nth-child(5) {
    grid-area: port;
    display: block;
    text-align: left;
  }
  body[data-category='omega-3'] .row > :nth-child(6),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(6),
  body[data-category='ashwagandha'] .row > :nth-child(6),
  body[data-category='melatonin'] .row > :nth-child(6) {
    grid-area: prot;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }
  body[data-category='omega-3'] .row > :nth-child(6) .protein,
  body[data-category='vitamin-d3-k2'] .row > :nth-child(6) .protein,
  body[data-category='ashwagandha'] .row > :nth-child(6) .protein,
  body[data-category='melatonin'] .row > :nth-child(6) .protein {
    flex-direction: row;
    align-items: center;
  }
  body[data-category='omega-3'] .row > :nth-child(7),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(7),
  body[data-category='ashwagandha'] .row > :nth-child(7),
  body[data-category='melatonin'] .row > :nth-child(7) {
    grid-area: extr;
  }
  body[data-category='omega-3'] .row > :nth-child(8),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(8),
  body[data-category='ashwagandha'] .row > :nth-child(8),
  body[data-category='melatonin'] .row > :nth-child(8) {
    grid-area: code;
  }
  body[data-category='omega-3'] .row > :nth-child(9),
  body[data-category='vitamin-d3-k2'] .row > :nth-child(9),
  body[data-category='ashwagandha'] .row > :nth-child(9),
  body[data-category='melatonin'] .row > :nth-child(9) {
    grid-area: cta;
  }
}

/* Statusseite: Lichtschimmer läuft über aktive Balken (laufende Shops; Gesamtbalken, solange abgerufen wird) */
.st__bar > span {
  position: relative;
  overflow: hidden;
}
.st__bar[data-est='shop'] > span::after,
main[data-busy='1'] .st__overall .st__bar > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: st-shimmer 1.6s ease-in-out infinite;
  /* Phase aus der Uhrzeit (public/status.js), damit der Schimmer beim sekündlichen Nachladen nicht neu startet */
  animation-delay: var(--shimmer-delay, 0ms);
}
@keyframes st-shimmer {
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .st__bar > span::after {
    animation: none;
    display: none;
  }
}

/* Statusseite, Aufbau 2026-10: Zusammenfassung, Spuren (laufend + als Nächstes), Aufmerksamkeit, alle Shops */
.st__headline {
  font-size: 17px;
}
.st__headline--ok {
  color: var(--good);
}
.st__headline--warn {
  color: var(--warn);
}
.st__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
  margin: 14px 0 0;
}
.st__kpis dt {
  font-size: 12px;
  color: var(--muted);
}
.st__kpis dd {
  margin: 2px 0 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
}
.st__kpis dd .small {
  font-size: 12px;
  font-weight: 400;
}
.st__lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.st__lane {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.st__lane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
  margin-bottom: 8px;
}
.st__lane-head h2 {
  margin: 0;
  font-size: 15px;
}
.st__job {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.st__job .st__bar {
  flex: 1;
  width: auto;
}
.st__job .st__current {
  max-width: none;
}
.st__next {
  margin: 0;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.st__badge--next {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
  border: 1px dashed var(--accent);
}
.st__table tr.is-next td {
  background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
}
.st__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
}
.st__card {
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
}
.st__card p {
  margin: 4px 0;
}
.st__card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
}
.st__card details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
}
.st__card ul {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 13px;
  word-break: break-word;
}

/* Changelog (/changelog, nur angemeldet) */
.cl {
  max-width: 820px;
  padding-bottom: 48px;
}
.cl__version {
  margin: 32px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 18px;
}
.cl p {
  margin: 6px 0;
}
.cl__list {
  margin: 4px 0 10px;
  padding-left: 20px;
}
.cl__list li {
  margin: 4px 0;
}

/* Vitamin D3/K2: sichtbare Eingrenzungen über dem Vergleich */
.rules {
  margin: 12px 0 4px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: 14px;
}
.rules__title {
  margin: 0 0 6px;
  font-weight: 700;
}
.rules__list {
  margin: 0;
  padding-left: 18px;
}
.rules__list li + li {
  margin-top: 3px;
}
.rules__note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* Multipack-Angebot eines Shops (z. B. „2 × 180 Kapseln – 5 % sparen“) */
.badge--multipack {
  background: var(--good-soft);
  color: var(--good);
  border-color: transparent;
}

/* Spalte „Zusatzstoffe“ (Omega-3, Vitamin D3/K2, Ashwagandha, Melatonin): weitere Wirkstoffe und Antioxidationsmittel – neutral, keine Wertung */
.extras {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
}
.extras__tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
}

/* „Code funktioniert nicht?“: sehr dezent unter dem Code */
.code__report {
  display: block;
  margin-top: 3px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--muted) 40%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  text-align: left;
}
.code__report:hover {
  color: var(--text);
}
.code__report:disabled,
.code__report--done {
  text-decoration: none;
  cursor: default;
}
/* Produktseiten: Link ausblenden, solange das Eingabefeld darunter offen ist (display: block überstimmt sonst hidden) */
.code__report[hidden] {
  display: none;
}
/* „Nicht mehr verfügbar?“: unten rechts in der Angebotszeile bzw. unter „Zum Shop“ (Produktseiten) */
.code__report--offer {
  align-self: flex-end;
  margin-left: auto;
  text-align: right;
}
/* „Besseren Code vorschlagen“: kleines Eingabefeld unter dem Code */
.suggest {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  max-width: 240px;
}
/* In der schmalen Gutschein-Spalte am Rechner rutscht „Senden“ unter das Feld, mobil stehen beide nebeneinander */
.suggest__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.suggest__input {
  /* Breite 0 und wachsen: Ein Eingabefeld bringt sonst seine Standardbreite mit und ragt über die schmale Spalte */
  flex: 1 1 96px;
  width: 0;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
}
.suggest__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.suggest__send {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.suggest__send:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.suggest__send:disabled {
  opacity: 0.6;
  cursor: default;
}
.suggest__nk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.suggest__msg {
  font-size: 11px;
  color: var(--warn);
}
.suggest__msg:empty {
  display: none;
}
.suggest__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.suggest .suggest__cancel {
  margin-top: 0;
}
@media (max-width: 900px) {
  /* Unter 16 px vergrößert iOS die Seite beim Tippen ins Feld */
  .suggest__input {
    font-size: 16px;
  }
}
/* Admin: vorgeschlagene Codes freigeben bzw. sperren (Status- und Aufgaben-Tab) */
.adm-act {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 2px 8px;
  vertical-align: middle;
}
.adm-act__btn {
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
}
.adm-act__btn--bad:hover {
  border-color: var(--bad);
  color: var(--bad);
}

/* Statusseite: mögliche neue Produkte je Shop */
.st__disc {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.st__disc summary {
  cursor: pointer;
}
.st__disc ul {
  margin: 6px 0 4px;
  padding-left: 18px;
  font-size: 13px;
}

/* Aufgabenliste (/aufgaben) */
.sx__tasks {
  color: var(--accent);
  font-weight: 700;
}
.tk__toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.tk__toc a {
  font-size: 13px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
}
.tk__count {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}
.tk__group--done .tk__count {
  color: var(--muted);
}
.tk__list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.6;
}
.tk__list a {
  color: inherit;
}

/* Preisverlauf auf Produktseiten (lib/pages.js): Linie als gestrecktes Inline-SVG, Beschriftung und Punkte als HTML */
.pv {
  max-width: 820px;
  margin: 32px 0 8px;
}
.pv h2 {
  font-size: 20px;
  margin: 0 0 8px;
}
.pv__summary {
  margin: 0 0 14px;
}
.pv__note {
  margin: 12px 0 0;
}
.pv__chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  margin-bottom: 8px;
}
.pv__y {
  position: relative;
  min-width: 52px;
  font: 12px/1 var(--font-mono);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pv__y span {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
}
.pv__plot {
  position: relative;
  height: 160px;
  border-bottom: 1px solid var(--line-strong);
}
.pv__plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pv__area {
  fill: var(--accent-soft);
  opacity: 0.7;
}
.pv__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pv__grid {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.pv__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
.pv__dot--low {
  background: var(--good);
}
.pv__x {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font: 12px/1 var(--font-mono);
  color: var(--muted);
}

/* ---------- Datenstatus (neu): Ampel, Kennzahlen, Spuren, Shops nach Dringlichkeit ---------- */
.sx-verdict {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 8px 0 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left-width: 6px;
  background: var(--surface);
}
.sx-verdict--ok {
  border-left-color: var(--good);
  background: var(--good-soft);
}
.sx-verdict--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.sx-verdict--bad {
  border-left-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--surface));
}
.sx-verdict__light {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--good);
}
.sx-verdict--warn .sx-verdict__light {
  background: var(--warn);
}
.sx-verdict--bad .sx-verdict__light {
  background: var(--bad);
}
.sx-verdict__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
}
.sx-verdict__text {
  margin: 4px 0 0;
}

.sx-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.sx-kpi {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.sx-kpi--ok {
  border-top-color: var(--good);
}
.sx-kpi--warn {
  border-top-color: var(--warn);
}
.sx-kpi--bad {
  border-top-color: var(--bad);
}
.sx-kpi dt {
  color: var(--muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sx-kpi dd {
  margin: 2px 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.sx-kpi .small {
  overflow-wrap: anywhere;
}
/* Erklärung „Im Soll“ direkt unter den Kennzahlen */
.sx-kpis__note {
  margin: -8px 0 18px;
}

.sx-todo {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px dashed var(--line);
}
.sx-todo--open {
  border: 1px solid var(--warn);
  background: var(--warn-soft);
}
.sx-todo h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.sx-todo ul {
  margin: 6px 0 0;
  padding-left: 20px;
}
.sx-todo p {
  margin: 0;
}

.sx-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.sx-lane {
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}
.sx-lane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.sx-lane__head h2 {
  margin: 0;
  font-size: 1rem;
}
.sx-lane p {
  margin: 6px 0 0;
}
.sx-lane__backlog {
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.sx-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}
.sx-dot {
  display: inline-block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--good);
}
.sx-dot--warn {
  background: var(--warn);
}
.sx-dot--bad {
  background: var(--bad);
}
.sx-dot--new {
  background: var(--muted);
}
.sx-dot--run {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.sx-shops {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.sx-shop {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
/* Links auf der Datenstatusseite wie auf der übrigen Website (Pflaume, unterstrichen) statt Browser-Blau; :where hält
   die Regel schwach, eigene Link-Stile (Knöpfe, Kopfzeile) gehen vor */
:where(.sx) a {
  color: var(--accent);
}
.sx-shop .sx-dot {
  margin-top: 6px;
}
.sx-shop__main {
  flex: 1;
  min-width: 0;
}
.sx-shop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}
.sx-shop__age {
  margin-left: auto;
}
.sx-shop__sys {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.sx-fresh {
  height: 5px;
  margin: 5px 0 4px;
  background: var(--surface-2);
}
.sx-fresh > span {
  display: block;
  height: 100%;
  background: var(--good);
}
.sx-fresh--warn > span {
  background: var(--warn);
}
.sx-fresh--bad > span {
  background: var(--bad);
}
.sx-fresh--new > span {
  background: var(--muted);
}
.sx-shop details {
  margin-top: 4px;
}

.sx-fold {
  border-top: 1px solid var(--line);
}
.sx-fold:last-of-type {
  border-bottom: 1px solid var(--line);
}
.sx-fold > summary {
  padding: 10px 2px;
  cursor: pointer;
  font-weight: 600;
}
.sx-fold__body {
  padding: 0 2px 14px;
}

@media (max-width: 760px) {
  .sx-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sx-lanes {
    grid-template-columns: minmax(0, 1fr);
  }
  .sx-verdict__title {
    font-size: 1.2rem;
  }
  .sx-kpi dd {
    font-size: 1.25rem;
  }
  .sx-shop__age {
    margin-left: 0;
    width: 100%;
  }
}

/* ---------- Administration (/admin): gemeinsamer Kopf mit Tabs ---------- */
.adm-top {
  padding-bottom: 0;
}
.adm-crumb {
  margin: 0;
  font-size: 1.05rem;
}
.adm-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-actions form {
  margin: 0;
}
.adm-tabs {
  display: flex;
  gap: 2px;
  margin-top: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.adm-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 8px;
  border: 1px solid transparent;
  border-bottom: 0;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.adm-tabs a:hover {
  color: var(--text);
}
.adm-tabs a[aria-current='page'] {
  border-color: var(--line);
  background: var(--bg);
  color: var(--text);
  margin-bottom: -1px;
  box-shadow: inset 0 3px 0 var(--accent);
}
.adm-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--good);
}
.adm-dot--warn {
  background: var(--warn);
}
.adm-dot--bad {
  background: var(--bad);
}
.adm-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  line-height: 20px;
  text-align: center;
}
.adm-head {
  margin: 18px 0 10px;
}
.adm-head h1 {
  margin: 0;
}
.adm-head p {
  margin: 4px 0 0;
}
@media (max-width: 760px) {
  .adm-top .top__inner {
    flex-wrap: nowrap;
    align-items: center;
  }
  .adm-actions .app-version {
    display: none;
  }
  .adm-tabs {
    gap: 0;
  }
  .adm-tabs a {
    gap: 4px;
    padding: 8px 6px 7px;
    font-size: 0.86rem;
  }
}

/* Ashwagandha und Melatonin: #, Produkt, Packung, Portion, Wirkstoff-Anteil, Zusatzstoffe, Gutschein, Button (ohne
   Spalte Tagesdosis – die Verzehrempfehlung steht auf der Produktseite) */
body[data-category='ashwagandha'] .row,
body[data-category='melatonin'] .row {
  grid-template-columns: 30px minmax(170px, 1.4fr) 112px 124px 104px 120px minmax(124px, 1fr) 160px;
}
@media (min-width: 901px) and (max-width: 1199px) {
  body[data-category='ashwagandha'] .row,
  body[data-category='melatonin'] .row {
    grid-template-columns: 24px minmax(110px, 1fr) 96px 104px 84px 96px minmax(88px, 0.8fr) 132px;
    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 900px) {
  body[data-category='ashwagandha'] .row,
  body[data-category='melatonin'] .row {
    grid-template-columns: 28px 1fr auto;
    grid-template-areas:
      'rank prod prod'
      '.    pack kg'
      '.    port port'
      '.    extr extr'
      '.    code code'
      '.    cta  cta';
  }
  body[data-category='ashwagandha'] .row > :nth-child(6),
  body[data-category='melatonin'] .row > :nth-child(6) {
    grid-area: extr;
    display: block;
  }
  body[data-category='ashwagandha'] .row > :nth-child(7),
  body[data-category='melatonin'] .row > :nth-child(7) {
    grid-area: code;
  }
  body[data-category='ashwagandha'] .row > :nth-child(8),
  body[data-category='melatonin'] .row > :nth-child(8) {
    grid-area: cta;
  }
}