/* Layout block comparison_table. Source: docs/design/referenz/04-bausteine.html. */
.cmp-h { font-size: 18px; font-weight: 800; margin-bottom: 12px; scroll-margin-top: 80px; }
.cmp-scroll { position: relative; overflow-x: auto; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); scrollbar-width: thin; }
.cmp table { border-collapse: separate; border-spacing: 0; min-width: 520px; width: 100%; font-size: 14px; }
.cmp th,
.cmp td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cmp thead th { font-family: var(--f-display); font-weight: 800; font-size: 16px; vertical-align: bottom; border-bottom: 2px solid var(--ink); }
.cmp tbody th { font-weight: 600; font-size: 12px; color: var(--ink-2); position: sticky; left: calc(var(--gut) * -1); background: var(--bg); z-index: 1; width: 110px; min-width: 110px; box-shadow: 6px 0 8px -6px rgba(38, 33, 27, .15); }
.cmp thead th:first-child { position: sticky; left: calc(var(--gut) * -1); background: var(--bg); z-index: 1; }
.cmp .pick { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); }
.cmp thead .pick { border-top: 3px solid var(--brand); }
.pick-badge { display: block; font-family: var(--f-body); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 4px; }
.cmp-img { display: block; width: 88px; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--surface); margin-bottom: 8px; border: 1px solid var(--line); }
.cmp-img img { width: 100%; height: 100%; object-fit: cover; }
.cmp .n { font-variant-numeric: tabular-nums; }
.cmp .yes,
.cmp .no { display: inline-flex; align-items: center; gap: 6px; }
.cmp .yes::before { content: "✓"; color: var(--pos); font-weight: 800; }
.cmp .no { color: var(--ink-3); }
.cmp .no::before { content: "–"; font-weight: 800; }
.cmp .price-row td { font-family: var(--f-display); font-weight: 800; font-size: 16px; }
.cmp .price-row .price-ext { font-family: var(--f-body); font-weight: 600; font-size: 13px; }
.cmp .btn-row td { border-bottom: 0; }
.cmp .btn-s { font-size: 13px; padding: 8px 12px; }
.cmp .btn-ghost-s { font-size: 13px; padding: 6px 10px; border-color: var(--ink); color: var(--ink); background: transparent; }
.cmp-note { font-size: 11px; color: var(--ink-3); margin-top: 6px; }

@container page (min-width: 900px) {
  .cmp-scroll { margin-inline: 0; padding-inline: 0; }
  .cmp table { min-width: 0; }
  .cmp tbody th,
  .cmp thead th:first-child { left: 0; }
  .cmp-img { width: 112px; }
}