/* The one stylesheet of the three comparison sites. The build copies this folder to /assets/ of every site, so the
   font addresses below are relative to this file. Each site sets its own accent through data-site on <html>;
   everything else is shared. Light only: the pages are read in daylight, on a phone, on the way to a trip or a shop. */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Names with letters outside western Europe (Turkish, Polish, Czech): loaded only by a page that has one. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #ffffff;
  --ink: #101820;
  --ink-2: #47525d;
  --field: #f2f3ef;
  --line: #d8dbd5;
  /* The accent is the yellow of airport signs: a travel eSIM is bought on the way to a gate. */
  --signal: #ffd500;
  --signal-deep: #f0c400;
  --yes: #0b6e45;
  --no: #a8261c;
  --radius: 4px;
  --gutter: 20px;
  --notch: 22px;
  color-scheme: light;
}

@media (min-width: 760px) {
  :root {
    --gutter: 32px;
    --notch: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
table {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  border-radius: 2px;
}

.wrap {
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: 5;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
}

.skip:focus {
  top: 12px;
}

/* Keeps a plan such as "10 GB für 30 Tage" on one line. */
.nb {
  white-space: nowrap;
}

.hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Head of the page: the name with the card mark, the way to the other destinations, the other language. */

.site-head {
  border-bottom: 1px solid var(--line);
}

.site-head__row {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 64px;
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 19px;
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1.2;
  text-decoration: none;
}

.site-name svg {
  flex: none;
  width: 22px;
  height: 28px;
}

.site-head nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-head nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.site-head nav a:hover {
  text-decoration: underline;
}

.site-head nav [aria-current] {
  font-weight: 700;
}

/* A phone has room for the name and the two languages; the way to all destinations is the path line below. */
@media (max-width: 599px) {
  .site-head__row {
    gap: 8px;
  }

  .site-name {
    font-size: 17px;
    white-space: nowrap;
  }

  .site-head__all {
    display: none;
  }

  .site-head nav a {
    padding: 0 8px;
    font-size: 14px;
  }
}

/* A site with one language has no language links, so the way to all products keeps its place on a phone; the name
   may break at its hyphen where the two do not fit on one line. */
@media (max-width: 599px) {
  .site-head--single .site-name {
    white-space: normal;
  }

  .site-head--single nav {
    flex: none;
  }

  .site-head--single .site-head__all {
    display: block;
  }
}

/* Top of a page: where it sits, what it is about (the destination, set like a sign), and how fresh it is. */

.crumbs {
  padding-top: 20px;
  color: var(--ink-2);
  font-size: 14px;
}

.crumbs li {
  display: inline;
}

.crumbs li + li::before {
  content: "/";
  margin: 0 8px;
  color: var(--line);
}

.hero {
  padding: 12px 0 28px;
}

.hero h1 {
  font-size: clamp(3rem, 10.5vw, 6.75rem);
  font-weight: 800;
  font-stretch: 68%;
  line-height: 0.94;
  letter-spacing: -0.012em;
  text-wrap: balance;
  hyphens: auto;
}

/* A page without breadcrumbs (start page, text pages) starts with the heading: it needs the air they give. */
main > .hero:first-child {
  padding-top: 28px;
}

/* Text pages: the heading names the page, it does not have to carry it. */
.hero:has(+ .prose) h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
}

.hero__state {
  max-width: 72ch;
  margin-top: 16px;
  color: var(--ink-2);
}

time {
  white-space: nowrap;
}

/* The answer: one sentence that can be quoted as it stands, on a field with the cut corner of a SIM card. */

.answer {
  padding: 28px var(--gutter) 28px;
  background: var(--signal);
  clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
  border-radius: var(--radius);
}

.answer {
  display: grid;
  gap: 28px 56px;
}

.answer__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.answer__text {
  max-width: 30ch;
  font-size: clamp(1.375rem, 3.4vw, 2.125rem);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.2;
  text-wrap: pretty;
}

.answer__text strong {
  font-weight: 800;
}

/* The details of the plan the sentence names, like the print on the card a SIM comes in. */
.answer__specs {
  font-size: 15px;
  line-height: 1.35;
}

.answer__specs div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid rgba(16, 24, 32, 0.3);
}

.answer__specs div:last-child {
  border-bottom: 1px solid rgba(16, 24, 32, 0.3);
}

.answer__specs dd {
  font-weight: 700;
  text-align: right;
}

@media (min-width: 760px) {
  .answer {
    padding: 40px 48px;
  }
}

@media (min-width: 900px) {
  .answer {
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
    align-items: end;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink {
  background: var(--ink);
  color: var(--paper);
}

.btn--ink:hover {
  background: #2a3642;
  border-color: #2a3642;
}

.btn--small {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
}

/* Sections share one rhythm: a rule, a heading set a little narrow, an optional line under it. */

.part {
  padding: 48px 0 0;
}

.part > h2,
.part__head h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.125rem);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.12;
  text-wrap: balance;
}

.part__note {
  max-width: 68ch;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
}

/* The cheapest plan per kind of trip: columns parted by rules, not boxes. */

.picks {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 20px;
  border-top: 2px solid var(--ink);
}

.pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px 20px 0;
  border-bottom: 1px solid var(--line);
}

.pick__for {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}

.pick__price {
  font-size: 30px;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.pick__plan {
  font-weight: 600;
  line-height: 1.35;
}

.pick__unit {
  color: var(--ink-2);
  font-size: 14px;
}

.pick a {
  align-self: flex-start;
  margin-top: 8px;
  padding: 6px 0;
  font-size: 15px;
  font-weight: 700;
}

/* Each pick shares its rows with its neighbours, so prices stay on one line across the row when a label wraps. */
@supports (grid-template-rows: subgrid) {
  .pick {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 4px;
  }

  .pick a {
    justify-self: start;
  }
}

/* Two by two on middle widths, so no pick is left alone on a second row. */
@media (min-width: 600px) {
  .picks {
    grid-template-columns: repeat(2, 1fr);
  }

  .pick {
    padding: 20px 24px 24px;
    border-left: 1px solid var(--line);
  }

  .pick:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 1100px) {
  .picks {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }

  .pick {
    border-bottom: 0;
  }

  .pick:nth-child(odd) {
    padding-left: 24px;
    border-left: 1px solid var(--line);
  }

  .pick:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

/* The table of offers. Wide screens get a real table; narrow ones get the same rows as stacked blocks, with the
   price where the thumb and the eye meet. The markup stays one table either way. */

.offers {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.offers caption {
  text-align: left;
}

.offers th,
.offers td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.offers thead th {
  padding-block: 10px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.offers .num {
  text-align: right;
  white-space: nowrap;
}

.offers tbody th {
  font-weight: 700;
}

.offers__rank {
  width: 36px;
  color: var(--ink-2);
  font-weight: 600;
}

.offers__seller {
  font-size: 16px;
  white-space: nowrap;
}

.offers__plan {
  font-weight: 600;
  white-space: nowrap;
}

.offers__price {
  font-size: 17px;
  font-weight: 750;
}

.offers small {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
}

/* The number the table is sorted by: marked on the first row like a line run over with a highlighter. */
.offers__lead {
  display: inline-block;
  margin: -3px -6px;
  padding: 3px 6px;
  background: var(--signal);
  border-radius: 2px;
  font-weight: 750;
}

/* A note under a marked number keeps clear of the mark, which reaches 3px below its line. */
.offers__lead + small {
  margin-top: 4px;
}

.offers__go {
  width: 1%;
  padding-right: 0;
  text-align: right;
}

.offers__go .btn {
  min-width: 152px;
}

/* "Allowed" is the rule and stays plain; only the exception carries colour. */
.yes {
  color: inherit;
}

.no {
  color: var(--no);
  font-weight: 600;
}

.unknown {
  color: var(--ink-2);
}

@media (max-width: 899px) {
  .offers thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .offers,
  .offers tbody {
    display: block;
  }

  .offers tr {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank seller price"
      "rank plan   unit"
      ".    net    day"
      ".    hot    chk"
      "go   go     go";
    gap: 2px 10px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }

  /* Plans without a data limit: the provider's own limit takes a line of its own. */
  .offers--unlimited tr {
    grid-template-areas:
      "rank seller price"
      "rank plan   unit"
      ".    fair   fair"
      ".    net    chk"
      ".    hot    hot"
      "go   go     go";
  }

  .offers tbody tr:first-child {
    border-top: 2px solid var(--ink);
  }

  .offers th,
  .offers td {
    padding: 0;
    border: 0;
  }

  .offers__rank {
    grid-area: rank;
    width: auto;
    padding-top: 1px;
  }

  .offers__seller {
    grid-area: seller;
    font-size: 17px;
  }

  .offers__plan {
    grid-area: plan;
    font-weight: 500;
  }

  .offers .offers__price {
    grid-area: price;
    font-size: 20px;
    line-height: 1.2;
  }

  .offers .offers__unit {
    grid-area: unit;
    align-self: start;
  }

  /* Network, hotspot, the price per day and the time of the check sit under the plan, each with its name in front
     (the head row that names them on a wide screen is not shown here). */
  .offers td[data-label] {
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 400;
  }

  .offers td[data-label]::before {
    content: attr(data-label) " ";
  }

  .offers td[data-label] > * {
    font-weight: 400;
  }

  .offers .offers__net {
    grid-area: net;
    margin-top: 8px;
    text-align: left;
  }

  .offers .offers__day {
    grid-area: day;
    margin-top: 8px;
  }

  .offers--unlimited .offers__net {
    margin-top: 0;
  }

  .offers .offers__fair {
    grid-area: fair;
    margin-top: 8px;
    white-space: normal;
  }

  .offers .offers__hot {
    grid-area: hot;
    text-align: left;
  }

  .offers .offers__chk {
    grid-area: chk;
    text-align: right;
  }

  .offers .offers__go {
    grid-area: go;
    width: auto;
    margin-top: 12px;
  }

  .offers__go .btn {
    width: 100%;
  }
}

/* "pro GB" behind the number: only where the head row that says it is not shown. */
@media (min-width: 900px) {
  .offers__per {
    display: none;
  }
}

/* From here the tables of all size groups share one set of column widths, so a column starts at the same place in
   every group. Narrower screens let each table size itself, where every pixel counts more than the line-up. */
@media (min-width: 1040px) {
  .offers {
    table-layout: fixed;
  }

  .offers thead th:nth-child(1) { width: 36px; }
  .offers thead th:nth-child(2) { width: 12.5%; }
  .offers thead th:nth-child(3) { width: 13%; }
  .offers thead th:nth-child(5) { width: 11.5%; }
  .offers thead th:nth-child(6) { width: 10%; }
  .offers thead th:nth-child(7),
  .offers thead th:nth-child(8),
  .offers thead th:nth-child(9) { width: 6.5%; }
  .offers thead th:nth-child(10) { width: 164px; }

  /* Unlimited plans: seller, days, the provider's limit (takes the rest), network, hotspot, price, per day, checked. */
  .offers--unlimited thead th:nth-child(3) { width: 8%; }
  .offers--unlimited thead th:nth-child(4) { width: auto; }
  .offers--unlimited thead th:nth-child(5) { width: 14%; }
  .offers--unlimited thead th:nth-child(6) { width: 11.5%; }
  .offers--unlimited thead th:nth-child(7) { width: 10%; }

  .offers__net,
  .offers__fair {
    overflow-wrap: anywhere;
  }
}

/* Lowest price over the last weeks, drawn as one line. */

.trend {
  margin-top: 20px;
}

/* Room on the left for the price labels and on the right for the dot; the drawing itself spans the plot. */
.trend__plot {
  padding: 0 8px 0 60px;
}

.trend__plot > svg {
  display: block;
  width: 100%;
  height: 226px;
  overflow: visible;
}

.trend text {
  fill: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.trend .trend__now {
  fill: var(--ink);
  font-weight: 700;
  /* A paper-coloured edge around the letters, so the line can pass behind the label. */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.trend figcaption {
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 14px;
}

/* Facts with their sources, two to a row where there is room. */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 48px;
  margin-top: 20px;
  border-top: 2px solid var(--ink);
}

.fact {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.fact h3,
.faq h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.fact p {
  max-width: 62ch;
  margin-top: 6px;
}

/* A fact is a sentence and the line that names its source; the next fact keeps its distance from that line. The
   space above the first sentence belongs to the list, not to the sentence, so two columns start on one line. */
.fact__items {
  margin-top: 6px;
}

.fact__item > p:first-child {
  margin-top: 0;
}

.fact__item + .fact__item {
  margin-top: 16px;
}

/* A topic with many facts takes the full width and sets them in two columns, instead of running down one half of
   the page beside an empty one. */
.fact--wide {
  grid-column: 1 / -1;
}

@media (min-width: 960px) {
  .fact--wide .fact__items {
    columns: 2;
    column-gap: 48px;
  }

  .fact--wide .fact__item {
    break-inside: avoid;
  }
}

.fact .source {
  color: var(--ink-2);
  font-size: 14px;
}

.faq {
  max-width: 72ch;
  margin-top: 20px;
  border-top: 2px solid var(--ink);
}

.faq > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.faq p {
  margin-top: 6px;
}

/* Other destinations: plain names on small plates. */

.plates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.plates a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  background: var(--field);
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.plates a:hover {
  background: var(--signal);
}

/* The table is split by data size. A row of links jumps to each group; the number behind a name is its row count. */

.sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.sizes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.sizes a span {
  color: var(--ink-2);
  font-weight: 400;
}

.sizes a:hover {
  background: var(--signal);
}

.group {
  padding-top: 36px;
  scroll-margin-top: 8px;
}

.group > h3 {
  font-size: 1.3125rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.2;
}

.group > p {
  max-width: 68ch;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
}

.group .offers {
  margin-top: 12px;
}

/* The cards table: price, shipping and the total it is sorted by, with short notes under the shop and the total.
   A phone shows shop and total first, price and shipping under them, then the price per booster and the check. */

.offers--cards .offers__seller small {
  white-space: normal;
}

@media (max-width: 899px) {
  .offers--cards tr {
    grid-template-areas:
      "rank seller price"
      "rank cost   ship"
      ".    unit   chk"
      "go   go     go";
  }

  .offers--cards .offers__cost {
    grid-area: cost;
    margin-top: 8px;
    text-align: left;
  }

  .offers--cards .offers__ship {
    grid-area: ship;
    margin-top: 8px;
  }

  .offers--cards .offers__unit {
    color: var(--ink-2);
    font-size: 14px;
    text-align: left;
  }

  .offers--cards .offers__unit:empty {
    display: none;
  }
}

/* One set of column widths for every stock group, as for the size groups: the shop takes the rest, and the price per
   booster (where the page has the column) and the check keep their place at the right. */
@media (min-width: 1040px) {
  .offers.offers--cards thead th {
    width: auto;
  }

  .offers.offers--cards thead th:first-child { width: 36px; }
  .offers.offers--cards thead th:nth-child(3),
  .offers.offers--cards thead th:nth-child(4) { width: 11%; }
  .offers.offers--cards thead th:nth-child(5) { width: 12%; }
  .offers.offers--cards thead th:nth-child(6):nth-last-child(3) { width: 10%; }
  .offers.offers--cards thead th:nth-last-child(2) { width: 8%; }
  .offers.offers--cards thead th:last-child { width: 164px; }
}

/* The protein tables: the product page sorts by the price per kilo, the question page by the price per 100 g of
   protein; that number takes the price class and the highlighter. Shop and product names, the notes under them and
   the column heads may wrap, so nine columns fit from 900px on. A phone shows the shop (or product) with its number
   first, the pack under it, then price and shipping, the total and the check, each with its label. */

.offers--protein small,
.offers--question small,
.offers--protein .offers__seller,
.offers--question .offers__seller {
  white-space: normal;
}

.offers--protein thead th,
.offers--question thead th {
  white-space: normal;
  vertical-align: bottom;
}

.offers--protein .offers__go .btn,
.offers--question .offers__go .btn {
  min-width: 112px;
}

@media (max-width: 899px) {
  .offers--protein tr {
    grid-template-areas:
      "rank seller price"
      ".    plan   plan"
      ".    cost   ship"
      ".    total  chk"
      "go   go     go";
  }

  .offers--question tr {
    grid-template-areas:
      "rank seller price"
      ".    plan   kilo"
      ".    shop   shop"
      ".    total  chk"
      "go   go     go";
  }

  /* The number in the price cell says what it is per, on a line of its own under it. */
  .offers--protein .offers__per,
  .offers--question .offers__per {
    display: block;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
  }

  .offers__lead + .offers__per {
    margin-top: 4px;
  }

  .offers--protein .offers__cost {
    grid-area: cost;
    margin-top: 8px;
    text-align: left;
  }

  .offers--protein .offers__ship {
    grid-area: ship;
    margin-top: 8px;
  }

  .offers--protein .offers__total,
  .offers--question .offers__total {
    grid-area: total;
    text-align: left;
  }

  .offers--question .offers__kilo {
    grid-area: kilo;
  }

  .offers--question .offers__shop {
    grid-area: shop;
    margin-top: 8px;
  }
}

@media (min-width: 1040px) {
  .offers.offers--protein thead th,
  .offers.offers--question thead th {
    width: auto;
  }

  .offers.offers--protein thead th:first-child,
  .offers.offers--question thead th:first-child { width: 36px; }
  .offers.offers--protein thead th:last-child,
  .offers.offers--question thead th:last-child { width: 124px; }

  /* Shop, pack, per kilo, price, shipping, total, checked: the shop takes the rest. */
  .offers.offers--protein thead th:nth-child(3) { width: 8%; }
  .offers.offers--protein thead th:nth-child(4) { width: 10%; }
  .offers.offers--protein thead th:nth-child(5) { width: 12%; }
  .offers.offers--protein thead th:nth-child(6) { width: 10%; }
  .offers.offers--protein thead th:nth-child(7) { width: 11%; }
  .offers.offers--protein thead th:nth-child(8) { width: 7%; }

  /* Product, per 100 g of protein, per kilo, pack, shop, total, checked: the product takes the rest. */
  .offers.offers--question thead th:nth-child(3) { width: 10%; }
  .offers.offers--question thead th:nth-child(4) { width: 9%; }
  .offers.offers--question thead th:nth-child(5) { width: 7%; }
  .offers.offers--question thead th:nth-child(6) { width: 15%; }
  .offers.offers--question thead th:nth-child(7) { width: 13%; }
  .offers.offers--question thead th:nth-child(8) { width: 7%; }
}

/* The ink tables. The cartridge page sorts by the total with delivery: it takes the price class and the highlighter,
   and the cost per page is the second number of every row. Shop names, the notes under them and the column heads may
   wrap, so ten columns fit from 900px on. A phone shows the shop with its total first, the make with the cost per
   page under it, then the yield, price and shipping and the check, each with its label. The family and printer
   pages have no position column: there a cartridge heads its block, and its second row (the name is there for
   screen readers only) joins the first, laid out the same way. */

.offers--ink small,
.offers--ink-match small,
.offers--ink .offers__seller,
.offers--ink-match .offers__seller {
  white-space: normal;
}

/* A shop name that is one long word and still too wide for its column breaks, and does not run under the next one. */
.offers--ink .offers__seller,
.offers--ink-match .offers__seller {
  overflow-wrap: break-word;
}

/* Written with .offers twice over so it also holds for the heads of number columns, which .offers .num keeps on
   one line: "Kosten pro Seite" is wider than its column and ran into the head beside it. */
.offers.offers--ink thead th,
.offers.offers--ink-match thead th {
  white-space: normal;
  vertical-align: bottom;
}

.offers--ink .offers__go .btn,
.offers--ink-match .offers__go .btn {
  min-width: 112px;
}

@media (max-width: 899px) {
  .offers--ink tr {
    grid-template-areas:
      "rank seller price"
      ".    plan   unit"
      ".    yield  yield"
      ".    cost   ship"
      ".    chk    chk"
      "go   go     go";
  }

  .offers--ink .offers__yield,
  .offers--ink-match .offers__yield {
    grid-area: yield;
    margin-top: 8px;
    text-align: left;
  }

  .offers--ink .offers__cost {
    grid-area: cost;
    text-align: left;
  }

  .offers--ink .offers__ship {
    grid-area: ship;
  }

  .offers--ink .offers__chk {
    text-align: left;
  }

  .offers--ink-match tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "seller seller"
      "plan   price"
      "yield  unit"
      "shop   cost"
      "go     go";
  }

  .offers--ink-match tr:has(> th > .hide) {
    grid-template-areas:
      "plan   price"
      "yield  unit"
      "shop   cost"
      "go     go";
  }

  .offers--ink-match tr:has(> th > .hide) > th {
    position: absolute;
  }

  .offers--ink-match .offers__seller {
    margin-bottom: 6px;
  }

  .offers--ink-match .offers__yield {
    margin-top: 6px;
  }

  .offers--ink-match .offers__unit {
    margin-top: 6px;
  }

  .offers--ink-match .offers__cost {
    grid-area: cost;
  }

  .offers--ink-match .offers__shop {
    grid-area: shop;
  }

  /* Each cartridge's block starts on the ink rule of its first row; the rows above it end without a hairline. */
  .offers--ink-match tbody tr:last-child {
    border-bottom: 0;
  }

  .offers--ink-match tbody:last-child tr:last-child {
    border-bottom: 1px solid var(--line);
  }
}

/* The two rows of one cartridge read as a pair: no hairline between them, less air. */
@media (min-width: 900px) {
  .offers--ink-match tbody tr:not(:last-child) > * {
    padding-bottom: 6px;
    border-bottom-color: transparent;
  }

  .offers--ink-match tbody tr + tr > * {
    padding-top: 6px;
  }
}

@media (min-width: 1040px) {
  .offers.offers--ink thead th,
  .offers.offers--ink-match thead th {
    width: auto;
  }

  .offers.offers--ink thead th:last-child,
  .offers.offers--ink-match thead th:last-child { width: 124px; }

  /* Shop, cartridge, yield, price, shipping, total, cost per page, checked: the shop takes the rest. */
  .offers.offers--ink thead th:first-child { width: 36px; }
  .offers.offers--ink thead th:nth-child(3) { width: 11%; }
  .offers.offers--ink thead th:nth-child(4) { width: 10%; }
  .offers.offers--ink thead th:nth-child(5),
  .offers.offers--ink thead th:nth-child(6) { width: 9%; }
  .offers.offers--ink thead th:nth-child(7) { width: 11%; }
  .offers.offers--ink thead th:nth-child(8) { width: 9%; }
  .offers.offers--ink thead th:nth-child(9) { width: 8%; }

  /* Cartridge, make, yield, price, total, cost per page, shop: the cartridge takes the rest. */
  .offers.offers--ink-match thead th:nth-child(2) { width: 13%; }
  .offers.offers--ink-match thead th:nth-child(3) { width: 11%; }
  .offers.offers--ink-match thead th:nth-child(4) { width: 10%; }
  .offers.offers--ink-match thead th:nth-child(5) { width: 12%; }
  .offers.offers--ink-match thead th:nth-child(6) { width: 10%; }
  .offers.offers--ink-match thead th:nth-child(7) { width: 14%; }
}

/* The cartridge page's table has ten columns. Between 1040px and the page's full width they do not fit at fixed
   shares: the shop's column, which takes the rest, fell to 104px and its names ran under the cartridge. There the
   table sizes its columns itself, as it does below 1040px. */
@media (min-width: 1040px) and (max-width: 1183px) {
  .offers.offers--ink {
    table-layout: auto;
  }

  .offers.offers--ink thead th:nth-child(n) {
    width: auto;
  }

  /* The total holds a bar that can shrink to nothing, so the column asks for its room: without it a long total
     ("103,39 zł") stood against the delivery beside it. */
  .offers.offers--ink thead th:nth-child(7) {
    width: 11%;
  }
}

/* At full width the table is always 1120px wide, so each share is a fixed number of pixels, set to hold the longest
   value of its column in either language. The shop takes the 182px that are left: a name of 18 letters
   ("Druckerzubehoer.de") needs 162px. */
@media (min-width: 1184px) {
  .offers.offers--ink thead th:nth-child(4) { width: 8.5%; }
  .offers.offers--ink thead th:nth-child(5) { width: 7.5%; }
  .offers.offers--ink thead th:nth-child(6) { width: 8.5%; }
  .offers.offers--ink thead th:nth-child(7) { width: 10%; }
  .offers.offers--ink thead th:nth-child(8) { width: 10%; }
}

/* The ink start page: each cartridge family is a heading row with its lowest price and its cartridges on a board
   under it; the printers sit on one board per brand, and on a phone a printer's price goes under its name. */

.series {
  margin-top: 28px;
}

.series + .series {
  margin-top: 40px;
}

.series h3 {
  font-size: inherit;
  font-weight: inherit;
}

.series__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 16px;
  padding-bottom: 10px;
  text-decoration: none;
}

.series__head .board__name {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
}

.series__head:hover .board__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.series .board {
  margin-top: 0;
}

.group .board--printers {
  margin-top: 12px;
}

@media (max-width: 599px) {
  .board--printers a {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The cheapest offer per pack size: a small plain table, four columns that fit a phone as they are. */

.bysize {
  width: 100%;
  max-width: 640px;
  margin-top: 20px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.bysize th,
.bysize td {
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.bysize th:last-child,
.bysize td:last-child {
  padding-right: 0;
}

.bysize thead th {
  padding-block: 10px;
  border-bottom: 2px solid var(--ink);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.bysize tbody th {
  font-weight: 700;
  white-space: nowrap;
}

.bysize .num {
  text-align: right;
  white-space: nowrap;
}

.bysize a {
  font-weight: 600;
}

/* The ink page's original against replacement: the make and the brand may wrap. */
.bysize--ink tbody th {
  white-space: normal;
}

/* On a phone each row of it becomes a block: the make on its own line, then the price with delivery and the cost
   of a page side by side, the shop under them, each with its name above it (the head row is not shown here). */
@media (max-width: 599px) {
  .bysize--ink,
  .bysize--ink tbody {
    display: block;
  }

  .bysize--ink thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .bysize--ink tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "make  make"
      "total unit"
      "shop  shop";
    gap: 8px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }

  .bysize--ink tbody tr:first-child {
    border-top: 2px solid var(--ink);
  }

  .bysize--ink th,
  .bysize--ink td {
    padding: 0;
    border: 0;
  }

  .bysize--ink tbody th {
    grid-area: make;
    font-size: 16px;
  }

  .bysize--ink td:nth-child(2) {
    grid-area: total;
  }

  .bysize--ink td:nth-child(3) {
    grid-area: unit;
  }

  .bysize--ink td:nth-child(4) {
    grid-area: shop;
  }

  .bysize--ink .num {
    text-align: left;
    white-space: normal;
  }

  .bysize--ink td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 400;
  }
}

/* The way from a question's answer to all offers of the product it names. */
.answer__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: -12px;
  font-weight: 600;
}

/* The product's own data: label and value in two quiet columns on hairlines, two pairs to a row where there is room. */

.specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
  margin-top: 20px;
  border-top: 2px solid var(--ink);
  line-height: 1.35;
}

.specs div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.specs dt {
  color: var(--ink-2);
  font-size: 15px;
}

.specs dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  .specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The start page: every destination on one board, like departures. Name left, lowest price right. */

.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 24px;
  border-top: 2px solid var(--ink);
}

/* The rule sits on the list item, and the link fills it: two rows side by side end on the same line. */
.board li {
  display: flex;
  border-bottom: 1px solid var(--line);
}

.board a {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: baseline;
  gap: 0 16px;
  padding: 14px 0 13px;
  text-decoration: none;
}

.board__name {
  font-size: 1.375rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.2;
}

.board a:hover .board__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.board__price {
  font-size: 1.125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.board__meta {
  grid-column: 1 / -1;
  color: var(--ink-2);
  font-size: 14px;
}

@media (min-width: 760px) {
  .board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }
}

/* A start page in groups (cards: one board per game): a quiet note under the state line, the jump list right under
   the hero, and each group's heading with its count beside it. */

.hero__note {
  max-width: 68ch;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 15px;
}

.hero + .sizes {
  margin-top: 0;
}

.part__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.part__count {
  color: var(--ink-2);
  font-size: 15px;
}

.part[id] {
  scroll-margin-top: 8px;
}

/* Running text of the pages without prices: how we compare, legal notice, privacy. */

.prose {
  max-width: 68ch;
  padding-bottom: 8px;
}

.prose h2 {
  margin-top: 36px;
  font-size: 1.375rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.2;
}

.prose p,
.prose ul,
.prose address {
  margin-top: 12px;
}

.prose ul {
  padding-left: 20px;
  list-style: disc;
}

.prose li + li {
  margin-top: 6px;
}

.prose address {
  font-style: normal;
}

.site-foot {
  margin-top: 72px;
  padding: 40px 0 48px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
}

.site-foot p {
  max-width: 70ch;
  color: #c9d0d6;
}

.site-foot p + p {
  margin-top: 8px;
}

.site-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin-top: 20px;
}

.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.site-foot__network {
  margin-top: 28px;
}

.site-foot__network p {
  color: var(--paper);
  font-weight: 700;
}

.site-foot__network ul {
  margin-top: 0;
}

.site-foot :focus-visible {
  outline-color: var(--signal);
}

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .plates a {
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  }
}

@media print {
  .site-head nav,
  .offers__go,
  .plates,
  .skip {
    display: none;
  }
}

/* ahk */

/* The trailer hitch site: a lime highlighter (the lead's total, the numbered dots and points) on a steel field. The
   answer box is a studio shot of a car's rear with the four things a retrofit is made of. */
html[data-site="ahk"] {
  --signal: #e3f53c;
  --signal-deep: #cfe21f;
  --steel: #86a3b8;
  --steel-pale: #dfe8ee;
  --steel-deep: #2f4f63;
}

/* One column that may shrink: a nested grid with a flexible track would otherwise ask for the full length of
   its longest line and push the field wider than a phone. */
.answer--scene {
  grid-template-columns: minmax(0, 1fr);
  background: var(--steel);
  gap: 28px 40px;
}

@media (min-width: 900px) {
  .answer--scene {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1.2fr);
    align-items: center;
  }
}

.answer--scene .answer__text {
  max-width: 26ch;
}

.answer--scene .answer__line {
  margin-top: -6px;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.45;
}

/* A button in the box wraps inside it rather than running out: "Zum Angebot bei ATI Autoteile Immler" is wider than
   the box on a phone. */
.answer--scene .btn {
  max-width: 100%;
  padding-block: 10px;
  white-space: normal;
}

/* The drawing: a car's rear end with the four things a retrofit is made of, framed like a studio shot. */
.scene {
  margin: 0;
  border: 2px solid var(--paper);
  border-radius: 14px;
  overflow: hidden;
}

.scene svg {
  display: block;
  width: 100%;
  height: auto;
}

.scene .thin { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scene .body { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.scene .glass { fill: #2b3f4e; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.scene .shine { fill: none; stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; stroke-linecap: round; }
.scene .tyre { fill: var(--ink); }
.scene .rim { fill: #eef2f5; stroke: var(--ink); stroke-width: 2; }
.scene .spoke { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.scene .xray { fill: none; stroke: var(--steel-deep); stroke-width: 2; stroke-dasharray: 6 5; stroke-linecap: round; stroke-linejoin: round; }
.scene .xfill { fill: rgba(47, 79, 99, 0.16); stroke: var(--steel-deep); stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; }
.scene .neck { fill: none; stroke: var(--ink); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.scene .ball { fill: var(--ink); }
.scene .socket { fill: var(--paper); stroke: var(--ink); stroke-width: 2.25; stroke-linejoin: round; }
.scene .lead { stroke: var(--ink); stroke-width: 1.5; }
.scene .dot { fill: var(--signal); stroke: var(--ink); stroke-width: 2; }
.scene .num { font-family: inherit; font-weight: 800; font-size: 17px; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.scene .lamp { fill: #d9482b; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }

/* The four points under the sentence: what the drawing numbers, each with today's lowest price. On a phone
   one point is one line with its price at the right; from 900px the four stand side by side. */
.points {
  grid-column: 1 / -1;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.point {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "n label price" "n meta price";
  column-gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(16, 24, 32, 0.3);
}

.point:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.point__n {
  grid-area: n;
  align-self: start;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.point__label {
  grid-area: label;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.point__price {
  grid-area: price;
  color: inherit;
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.1;
  text-align: right;
  text-decoration: none;
  white-space: nowrap;
}

.point__price--lead span {
  padding: 1px 6px;
  background: var(--signal);
  border-radius: 3px;
}

.point__price--none {
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 100%;
}

.point__meta {
  grid-area: meta;
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 900px) {
  .points {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 28px;
    padding-top: 22px;
  }

  .point {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "n label" "n price" "n meta";
    align-items: start;
    align-content: start;
    padding: 0;
    border-bottom: 0;
  }

  .point__n {
    margin-top: 1px;
  }

  .point__price {
    margin-top: 3px;
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    text-align: left;
  }

  .point__price--lead span {
    margin-left: -6px;
  }

  .point__price--none {
    margin-top: 8px;
    font-size: 1.0625rem;
  }

  .point__meta {
    margin-top: 6px;
  }
}

/* A model's generations in place of the four points: no number, the name as the label. */
.points--cars .point {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label price" "meta price";
}

@media (min-width: 900px) {
  .points--cars {
    row-gap: 22px;
  }

  .points--cars .point {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "price" "meta";
  }
}

/* The cost page's sentences after the first, under the box in the size of running text. */
.summary {
  max-width: 68ch;
  margin-top: 24px;
}

/* The dot at the end of the price trend takes the site's highlighter in place of the yellow it is drawn with. */
html[data-site="ahk"] .trend circle {
  fill: var(--signal);
}

/* The offers a seller reports as not available close their group under a heading of their own. */
.group__out {
  margin-top: 28px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.group__out + .offers {
  margin-top: 8px;
}

/* A model on the start page heads its generations, as an ink cartridge family does; its heading is a level lower
   there, as it sits under the make. */
.series h4 {
  font-size: inherit;
  font-weight: inherit;
}

/* The hitch tables. Every row carries the seller's own words on what the hitch fits: that column takes the room
   that is left and wraps, and so may the seller, the hitch, the work and the column heads. A generation page has
   three groups (hitches with and without a wiring kit, the work of the workshops); the model page lists the hitches
   by generation, the cost page the hitches fitted at a fixed price with their cars (its four prices by car have a
   table of their own, below). */

.offers--ahk small,
.offers--ahk-match small,
.offers--ahk-costwork small,
.offers--ahk .offers__seller,
.offers--ahk-match .offers__seller,
.offers--ahk-costwork .offers__seller,
.offers--ahk .offers__plan,
.offers--ahk-match .offers__plan,
.offers--ahk-costwork .offers__plan {
  white-space: normal;
}

.offers--ahk thead th,
.offers--ahk-match thead th,
.offers--ahk-costwork thead th {
  white-space: normal;
  vertical-align: bottom;
}

.offers__fit {
  overflow-wrap: break-word;
}

.offers--ahk .offers__go .btn,
.offers--ahk-match .offers__go .btn,
.offers--ahk-costwork .offers__go .btn {
  min-width: 112px;
}

/* A phone shows the seller with the total first and the hitch under it; then what the seller says it fits, on a line
   of its own with its name above it; then price, shipping and the check. A workshop's row has its place there instead
   of price and shipping. */
@media (max-width: 899px) {
  .offers--ahk tr {
    grid-template-areas:
      "rank seller price"
      ".    plan   price"
      ".    fit    fit"
      ".    cost   ship"
      ".    chk    chk"
      "go   go     go";
  }

  .offers--ahk-work tr {
    grid-template-areas:
      "rank seller price"
      ".    plan   price"
      ".    place  place"
      ".    fit    fit"
      ".    chk    chk"
      "go   go     go";
  }

  .offers--ahk .offers__fit,
  .offers--ahk-match .offers__fit,
  .offers--ahk-costwork .offers__fit {
    grid-area: fit;
    margin-top: 8px;
    color: var(--ink);
    font-size: 15px;
  }

  .offers--ahk .offers__fit::before,
  .offers--ahk-match .offers__fit::before,
  .offers--ahk-costwork .offers__fit::before {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-2);
    font-size: 14px;
  }

  .offers--ahk .offers__cost {
    grid-area: cost;
    margin-top: 8px;
    text-align: left;
  }

  .offers--ahk .offers__ship {
    grid-area: ship;
    margin-top: 8px;
  }

  .offers--ahk .offers__place,
  .offers--ahk-costwork .offers__place {
    grid-area: place;
    margin-top: 8px;
  }

  .offers--ahk .offers__chk {
    margin-top: 4px;
    text-align: left;
  }

  /* By car: the car heads its block, and its second row (the name is there for screen readers only) joins the first,
     as on the ink family page. */
  .offers--ahk-match tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "seller seller"
      "plan   price"
      "fit    fit"
      "shop   cost"
      "go     go";
  }

  .offers--ahk-match tr:has(> th > .hide) {
    grid-template-areas:
      "plan   price"
      "fit    fit"
      "shop   cost"
      "go     go";
  }

  .offers--ahk-match tr:has(> th > .hide) > th {
    position: absolute;
  }

  .offers--ahk-match .offers__seller {
    margin-bottom: 6px;
  }

  .offers--ahk-match .offers__cost {
    grid-area: cost;
    margin-top: 8px;
  }

  .offers--ahk-match .offers__shop {
    grid-area: shop;
    margin-top: 8px;
  }

  .offers--ahk-match tbody tr:last-child {
    border-bottom: 0;
  }

  .offers--ahk-match tbody:last-child tr:last-child {
    border-bottom: 1px solid var(--line);
  }

  /* The cost page's work: the workshop with its price, then the car it is for, the work and the place. */
  .offers--ahk-costwork tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "seller price"
      "car    car"
      "plan   plan"
      "place  place"
      "fit    fit"
      "go     go";
  }

  .offers--ahk-costwork .offers__car {
    grid-area: car;
    margin-top: 6px;
  }

  .offers--ahk-costwork .offers__plan {
    margin-top: 6px;
  }
}

/* The rows of one car read as a block: no hairline between them, less air. */
@media (min-width: 900px) {
  .offers--ahk-match tbody tr:not(:last-child) > * {
    padding-bottom: 6px;
    border-bottom-color: transparent;
  }

  .offers--ahk-match tbody tr + tr > * {
    padding-top: 6px;
  }
}

@media (min-width: 1040px) {
  .offers.offers--ahk thead th,
  .offers.offers--ahk-match thead th,
  .offers.offers--ahk-costwork thead th {
    width: auto;
  }

  .offers.offers--ahk thead th:last-child,
  .offers.offers--ahk-match thead th:last-child,
  .offers.offers--ahk-costwork thead th:last-child { width: 124px; }

  /* Seller, hitch, fit (takes the rest), price, shipping, total, checked. */
  .offers.offers--ahk thead th:first-child { width: 36px; }
  .offers.offers--ahk thead th:nth-child(2) { width: 13%; }
  .offers.offers--ahk thead th:nth-child(3) { width: 14%; }
  .offers.offers--ahk thead th:nth-child(5),
  .offers.offers--ahk thead th:nth-child(6) { width: 9%; }
  .offers.offers--ahk thead th:nth-child(7) { width: 12%; }
  .offers.offers--ahk thead th:nth-child(8) { width: 7%; }

  /* Workshop, work, place, fit (takes the rest), price, checked. The place has room for "Mönchengladbach". */
  .offers.offers--ahk-work thead th:nth-child(3) { width: 16%; }
  .offers.offers--ahk-work thead th:nth-child(4) { width: 14%; }
  .offers.offers--ahk-work thead th:nth-child(5) { width: auto; }
  .offers.offers--ahk-work thead th:nth-child(6) { width: 11%; }
  .offers.offers--ahk-work thead th:nth-child(7) { width: 7%; }
  .offers.offers--ahk-work thead th:nth-child(8) { width: 124px; }

  /* Car, hitch, fit (takes the rest), price, total, seller. */
  .offers.offers--ahk-match thead th:nth-child(1) { width: 13%; }
  .offers.offers--ahk-match thead th:nth-child(2) { width: 15%; }
  .offers.offers--ahk-match thead th:nth-child(4) { width: 9%; }
  .offers.offers--ahk-match thead th:nth-child(5) { width: 12%; }
  .offers.offers--ahk-match thead th:nth-child(6) { width: 14%; }

  /* Workshop, cars (a shared offer lists several), work, place, fit (takes the rest), price. The place has room for
     "Mönchengladbach". */
  .offers.offers--ahk-costwork thead th:nth-child(1) { width: 12%; }
  .offers.offers--ahk-costwork thead th:nth-child(2) { width: 16%; }
  .offers.offers--ahk-costwork thead th:nth-child(3) { width: 15%; }
  .offers.offers--ahk-costwork thead th:nth-child(4) { width: 14%; }
  .offers.offers--ahk-costwork thead th:nth-child(6) { width: 10%; }

  /* The car, then the four prices in equal columns. */
  .offers.offers--ahk-cars thead th { width: 18%; }
  .offers.offers--ahk-cars thead th:first-child { width: 28%; }
}

/* The cost page's prices by car, one row per car: the car, then the cheapest hitch without and with a wiring kit,
   the fitting and the coding, each with the seller under it as the link. Sixty rows and more, so the rows sit tight.
   On a phone each car is a card: its name as the head line, under it the four prices in two columns, each with its
   name above it. */
.offers--ahk-cars small,
.offers--ahk-cars .offers__seller {
  white-space: normal;
}

.offers--ahk-cars thead th {
  white-space: normal;
  vertical-align: bottom;
}

.offers--ahk-cars td {
  font-size: 17px;
  font-weight: 750;
}

.offers--ahk-cars small a {
  font-weight: 600;
}

@media (min-width: 900px) {
  .offers--ahk-cars tbody th,
  .offers--ahk-cars tbody td {
    padding-block: 9px;
  }
}

@media (max-width: 899px) {
  .offers--ahk-cars tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "seller  seller"
      "bare    wiring"
      "fitting coding";
    gap: 12px 16px;
  }

  .offers.offers--ahk-cars td {
    color: var(--ink);
    font-size: 17px;
    font-weight: 750;
    text-align: left;
    white-space: normal;
  }

  /* The phone's rule for a labelled cell sets its children in the light weight; the lead's highlighter keeps its own. */
  .offers--ahk-cars td[data-label] > .offers__lead {
    font-weight: 750;
  }

  .offers--ahk-cars .offers__bare {
    grid-area: bare;
  }

  .offers--ahk-cars .offers__wiring {
    grid-area: wiring;
  }

  .offers--ahk-cars .offers__fitting {
    grid-area: fitting;
  }

  .offers--ahk-cars .offers__coding {
    grid-area: coding;
  }

  .offers--ahk-cars td[data-label]::before {
    display: block;
    margin-bottom: 2px;
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 400;
  }
}

/* ink pictures */

/* The ink pages' drawings and bars: the answer box shows the lead's cartridge with the parcel it comes in and the
   pile of pages it prints, and four numbered points under both; a table row, a column of the cost chart and a start
   page entry show the cartridge small, dark for an original and light for any other make; a total has a bar for
   its price and its delivery. The drawings are inline SVG, so nothing is loaded for them. */

/* The sentence left, the drawing right, the four numbers under both. */
.answer--pic {
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 48px;
}

@media (min-width: 900px) {
  .answer--pic {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr);
    align-items: center;
  }
}

/* On a phone the drawing opens the box. The sentence stays first in the HTML. */
@media (max-width: 899px) {
  .answer--pic > figure {
    order: -1;
  }
}

.answer--pic .answer__text {
  max-width: 25ch;
}

.answer--pic .answer__line {
  max-width: 48ch;
  margin-top: -8px;
  font-size: 16px;
  line-height: 1.45;
}

.answer--pic .btn {
  max-width: 100%;
  white-space: normal;
}

.tag {
  display: inline-block;
  padding: 1px 6px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--ink {
  background: var(--ink);
  color: var(--paper);
}

/* The box is yellow already, so the numbers sit on white and the marked one is set in ink. */
.answer--pic .point__n,
.scene--ink .dot,
.scene--pic .dot {
  background: var(--paper);
  fill: var(--paper);
}

.answer--pic .point__price--lead span {
  background: var(--ink);
  color: var(--paper);
}

/* The scene: the cartridge, the parcel, the pile of pages it prints and one page. */
.scene--ink .o,
.scene--pic .o {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.scene--ink .sheet {
  fill: #ffffff;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.scene--ink .ream {
  fill: none;
  stroke: #9aa6b0;
  stroke-width: 1;
}

.scene--ink .print {
  fill: none;
  stroke: #8a96a0;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.scene--ink .gloss,
.scene--pic .gloss {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 4;
  stroke-linecap: round;
}

/* The family's number on the label; its size comes with the drawing, smaller for a longer number. */
.scene--ink .ink-no {
  font-family: inherit;
  font-stretch: 75%;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
}

.scene--ink .xl,
.scene--pic .xl {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

/* The scenes of the other sites (a box of boosters, a tub of protein, a phone with its eSIM) carry scene--pic and
   share the outline, the shine and the small label above. .no is the big number on a label, .mid a smaller one
   set on its middle, .inv either of them on a dark part. */
.scene--pic .no {
  font-family: inherit;
  font-size: 46px;
  font-stretch: 75%;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
}

.scene--pic .mid {
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.scene--pic .inv {
  fill: #ffffff;
}

/* The family and printer table: each cartridge with its picture and a bar for the price with delivery. */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 13px;
}

.legend i {
  display: inline-block;
  width: 22px;
  height: 10px;
  margin-right: 6px;
  background: var(--ink);
  border-radius: 2px;
  vertical-align: -1px;
}

.legend .legend__ship,
.bar__ship {
  background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 5px);
}

.how {
  max-width: 68ch;
  margin-top: 10px;
  color: var(--ink-2);
  font-size: 15px;
}

.how summary {
  width: fit-content;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.how p {
  margin-top: 6px;
}

.offers--ink-pics small,
.offers--ink-pics .offers__seller {
  white-space: normal;
}

/* With .offers twice over, so it also holds for the heads of number columns (see the ink tables above). */
.offers.offers--ink-pics thead th {
  white-space: normal;
  vertical-align: bottom;
}

.offers--ink-pics .offers__shop {
  overflow-wrap: break-word;
}

.offers--ink-pics .offers__go .btn {
  min-width: 112px;
}

.offers--ink-pics .offers__plan small {
  margin-top: 3px;
}

.offers__pic {
  width: 76px;
}

.thumb {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}

.thumb--drawn {
  background: var(--field);
  border-color: transparent;
}

/* The smaller thumb of the cartridge page's tables and the start page. */
.thumb--small {
  width: 44px;
  height: 44px;
  border-radius: 6px;
}

.total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
}

.total small {
  grid-column: 1 / -1;
}

.total__sum {
  min-width: 86px;
  font-size: 17px;
  font-weight: 750;
  text-align: right;
  white-space: nowrap;
}

.bar {
  display: flex;
  height: 14px;
  background: var(--field);
  border-radius: 2px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
}

.bar__price {
  width: var(--a);
  background: var(--ink);
}

.bar__ship {
  width: var(--b);
}

.total--lead .bar__price {
  background: var(--signal);
  box-shadow: inset 0 0 0 2px var(--ink);
}

/* The two rows of one cartridge read as a pair, as in the table before it had pictures. */
@media (min-width: 900px) {
  .offers--ink-pics tbody tr:not(:last-child) > * {
    padding-bottom: 6px;
    border-bottom-color: transparent;
  }

  .offers--ink-pics tbody tr + tr > * {
    padding-top: 6px;
  }

  .offers--ink-pics .offers__price,
  .offers--ink-pics thead th:nth-child(5) {
    padding-left: 20px;
    padding-right: 24px;
  }
}

@media (min-width: 1040px) {
  .offers.offers--ink-pics thead th { width: auto; }
  .offers.offers--ink-pics thead th:nth-child(1) { width: 15%; }
  .offers.offers--ink-pics thead th:nth-child(2) { width: 76px; }
  .offers.offers--ink-pics thead th:nth-child(3) { width: 12%; }
  .offers.offers--ink-pics thead th:nth-child(4) { width: 8%; }
  /* "Kosten pro Seite" on one line, and a shop name of 18 letters ("Druckerzubehoer.de"): the bar gives the room. */
  .offers.offers--ink-pics thead th:nth-child(6) { width: 10%; }
  .offers.offers--ink-pics thead th:nth-child(7) { width: 14%; }
  .offers.offers--ink-pics thead th:last-child { width: 124px; }
}

/* A phone shows the cartridge as the head line, the picture beside the make, yield and cost of a page, then the bar
   with the total across the row and the button. A pair's second row (its name is for screen readers only) joins
   the first. */
@media (max-width: 899px) {
  .offers--ink-pics tr {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "seller seller seller"
      "pic    plan   shop"
      "pic    yield  yield"
      "pic    unit   unit"
      "price  price  price"
      "go     go     go";
    gap: 2px 12px;
  }

  .offers--ink-pics tr:has(> th > .hide) {
    grid-template-areas:
      "pic    plan   shop"
      "pic    yield  yield"
      "pic    unit   unit"
      "price  price  price"
      "go     go     go";
  }

  .offers--ink-pics .offers__unit {
    margin-top: 0;
    text-align: left;
  }

  .offers--ink-pics .offers__lead {
    margin-right: 0;
  }

  .offers--ink-pics tr:has(> th > .hide) > th {
    position: absolute;
  }

  .offers--ink-pics .offers__seller {
    margin-bottom: 8px;
  }

  .offers--ink-pics .offers__pic {
    grid-area: pic;
    width: auto;
  }

  .offers--ink-pics .offers__yield {
    grid-area: yield;
    text-align: left;
  }

  .offers--ink-pics .offers__yield small {
    display: inline;
  }

  .offers--ink-pics .offers__shop {
    grid-area: shop;
    color: var(--ink-2);
    font-size: 14px;
    text-align: right;
  }

  .offers--ink-pics .offers__price {
    grid-area: price;
    margin-top: 12px;
  }

  .offers--ink-pics tbody tr:last-child {
    border-bottom: 0;
  }

  .offers--ink-pics tbody:last-child tr:last-child {
    border-bottom: 1px solid var(--line);
  }
}

/* The cartridge page: the small cartridge before the make, and under each total a thin bar as wide as its cell. */
.with-thumb {
  display: flex;
  align-items: center;
  gap: 12px;
}

.with-thumb > .thumb {
  flex: none;
}

@media (min-width: 1040px) {
  /* The make's column holds the thumb: it takes its room from the shop's. */
  .offers.offers--ink thead th:nth-child(3) { width: 17%; }
}

@media (max-width: 899px) {
  /* On a phone every row is a grid of its own: one width for all bars keeps them comparable. */
  .total--stack .bar {
    justify-self: end;
    width: 150px;
  }
}

.total--stack {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
  gap: 6px;
}

.total--stack .bar {
  justify-self: stretch;
  height: 8px;
}

/* The start page: a cartridge's thumb before its name, its price and note beside it. */
.board a:has(> .thumb) {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
}

.board a > .thumb {
  grid-row: 1 / span 2;
}

.board a:has(> .thumb) .board__meta {
  grid-column: 2 / -1;
}

/* A start page whose entries are products: the drawing a little larger than in a table. */
.board--pics a:has(> .thumb) {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}

.board--pics .thumb--small {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}

/* What one page costs: a column per cartridge, the lowest marked. */

.unit {
  display: grid;
  gap: 28px 56px;
  margin-top: 24px;
}

@media (min-width: 900px) {
  .unit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    align-items: end;
  }
}

.unit__say {
  max-width: 22ch;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-stretch: 92%;
  font-weight: 500;
  line-height: 1.2;
  text-wrap: pretty;
}

.unit__say strong {
  font-weight: 800;
}

.unit__say + .part__note {
  margin-top: 14px;
}

/* As many equal columns as there are cartridges: four on a page of four, three on a page of three. */
.cols {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 0 clamp(8px, 2vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.col {
  text-align: center;
}

.col__plot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 196px;
  border-bottom: 2px solid var(--ink);
}

.col__value {
  margin-bottom: 6px;
  font-size: clamp(1rem, 2.6vw, 1.375rem);
  font-stretch: 80%;
  font-weight: 800;
  white-space: nowrap;
}

.col__bar {
  width: min(100%, 76px);
  height: calc(var(--h) * 1.5px);
  background: var(--ink);
  border-radius: 3px 3px 0 0;
}

.col--lead .col__bar {
  background: var(--signal);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.col--lead .col__value span {
  padding: 1px 6px;
  background: var(--signal);
  border-radius: 2px;
}

.col__foot {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-top: 12px;
  font-size: 14px;
  line-height: 1.3;
}

.col__foot a {
  font-weight: 700;
}

.col__foot small {
  color: var(--ink-2);
  font-size: 13px;
}

/* A phone holds four columns side by side. With more, the chart scrolls sideways and the fifth shows cut off, so
   the labels keep their room instead of running into each other. The gigabyte chart has its own small type. */
@media (max-width: 599px) {
  .cols:not(.cols--gb) {
    grid-auto-columns: minmax(76px, 1fr);
    overflow-x: auto;
    padding-bottom: 10px;
  }
}

/* cards pictures */

/* The cards pages' drawings and bars: the answer box shows the product with the parcel it comes in, one pack and a
   shop's stack, and the lead's four points under both (the shared .answer--pic, .points and .scene--pic rules); a
   start page entry shows the product small (.thumb). Price, shipping and total of an offer are one cell: a bar for
   price and shipping against the page's highest total, the total beside it, the two amounts under it. */

/* From 900px the total's column holds the bar; below 1040px the table sizes itself, so the cell asks for the room. */
@media (min-width: 900px) {
  .offers--cards .total {
    min-width: 220px;
  }
}

/* Shop, total with its bar, price per booster where the page has it, check: the shop takes the rest. */
@media (min-width: 1040px) {
  .offers.offers--cards thead th:nth-child(3) { width: 36%; }
}

/* A long shop name ("Zu House of Cards and Games") breaks inside its button instead of pushing the table past the page. */
@media (min-width: 900px) {
  .offers--cards .offers__go .btn {
    max-width: 176px;
    padding-top: 6px;
    padding-bottom: 6px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
}

/* A phone shows the shop as the head line, then the bar with the total and how it adds up across the row, then the
   price per booster and the check. */
@media (max-width: 899px) {
  .offers--cards tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    unit   chk"
      "go   go     go";
  }

  .offers--cards .offers__price {
    margin-top: 8px;
  }

  .offers--cards .offers__unit {
    margin-top: 8px;
  }

  .offers--cards .offers__chk {
    margin-top: 8px;
  }
}

/* esim pictures */

/* The eSIM pages' drawings, bars and chart: the answer box shows the phone with the destination's code, the plan's
   volume and days and a mast, and the lead's four points under both (the shared .answer--pic, .points and
   .scene--pic rules); a start page entry shows a SIM card with the destination's code (.thumb). A price cell holds a bar against the
   highest price of its table and the price beside it; the chart of what a gigabyte costs is the ink pages' columns. */

/* What a provider charges in another currency stays right under the price, as it did before the bar. */
.offers--esim .total small {
  text-align: right;
}

/* From 900px the price's column holds the bar; below 1040px the table sizes itself, so the cell asks for room. */
@media (min-width: 900px) {
  .offers--esim .total {
    min-width: 150px;
  }
}

/* The price's column takes its room from the provider, the plan and the hotspot; the network keeps the rest. */
@media (min-width: 1040px) {
  .offers.offers--esim thead th:nth-child(2) { width: 11%; }
  .offers.offers--esim thead th:nth-child(3) { width: 11%; }
  .offers.offers--esim thead th:nth-child(5) { width: 9.5%; }
  .offers.offers--esim thead th:nth-child(6) { width: 17%; }

  /* Unlimited plans: provider, days, the provider's limit (takes the rest), network, hotspot, price, per day, checked. */
  .offers.offers--esim.offers--unlimited thead th:nth-child(3) { width: 8%; }
  .offers.offers--esim.offers--unlimited thead th:nth-child(5) { width: 12%; }
  .offers.offers--esim.offers--unlimited thead th:nth-child(6) { width: 9.5%; }
  .offers.offers--esim.offers--unlimited thead th:nth-child(7) { width: 16%; }
}

/* A phone shows the provider as the head line, the plan with its price per GB, then the bar with the price across
   the row, then network, hotspot, price per day and the check. */
@media (max-width: 899px) {
  .offers--esim tr {
    grid-template-areas:
      "rank seller seller"
      "rank plan   unit"
      ".    price  price"
      ".    net    day"
      ".    hot    chk"
      "go   go     go";
  }

  .offers--esim.offers--unlimited tr {
    grid-template-areas:
      "rank seller seller"
      "rank plan   unit"
      ".    price  price"
      ".    fair   fair"
      ".    net    chk"
      ".    hot    hot"
      "go   go     go";
  }

  .offers--esim .offers__price {
    margin-top: 8px;
  }
}

/* What a gigabyte costs: up to seven columns, one per data volume, the lowest marked. */
.cols--gb {
  max-width: 880px;
  margin-top: 24px;
}

/* Seven columns share a phone's width: smaller type and less air between them. */
@media (max-width: 599px) {
  .cols--gb {
    gap: 0 6px;
  }

  .cols--gb .col__value {
    font-size: 13px;
  }

  .cols--gb .col__foot {
    font-size: 12px;
  }

  .cols--gb .col__foot small {
    font-size: 11.5px;
  }
}

/* protein pictures */

/* The protein pages' drawings, bars and chart: the answer box shows the tub with its pack size and a bar for its
   protein share, a scoop, a one kilo weight and the parcel, and the lead's four points under both (the shared
   .answer--pic, .points and .scene--pic rules); a question page's row and a start page entry show the tub small
   (.thumb). The number a table sorts by (per kilo, or per 100 g of protein on a question page) holds a bar against
   the highest of its table and the number beside it; price, shipping and total are one cell, the total with how it
   adds up under it. The cheapest price per pack size is the ink pages' columns. */

/* From 900px the sorted number's column holds the bar; below 1040px the table sizes itself, so the cell asks for room. */
@media (min-width: 900px) {
  .offers--protein .total,
  .offers--question .total {
    min-width: 170px;
  }
}

@media (min-width: 1040px) {
  /* Shop, pack, per kilo with its bar, total, checked, button: the shop takes the rest. The seventh column is the
     button now, so it gets the button's width back. */
  .offers.offers--protein thead th:nth-child(4) { width: 30%; }
  .offers.offers--protein thead th:nth-child(5) { width: 15%; }
  .offers.offers--protein thead th:nth-child(6) { width: 8%; }
  .offers.offers--protein thead th:nth-child(7) { width: 124px; }

  /* Product with its tub, per 100 g of protein with its bar, per kilo, pack, shop, total, checked: the product
     takes the rest. */
  .offers.offers--question thead th:nth-child(3) { width: 18%; }
  .offers.offers--question thead th:nth-child(6) { width: 12%; }
  .offers.offers--question thead th:nth-child(7) { width: 13%; }
}

/* A phone shows the shop (or the product with its tub) as the head line, then the bar with its number across the
   row, then the pack (and on a question page the price per kilo and the shop), then the total and the check. */
@media (max-width: 899px) {
  .offers--protein tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    plan   plan"
      ".    total  chk"
      "go   go     go";
  }

  .offers--question tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    plan   kilo"
      ".    shop   shop"
      ".    total  chk"
      "go   go     go";
  }

  .offers--protein .offers__price,
  .offers--question .offers__price {
    margin-top: 8px;
  }

  .offers--protein .offers__plan,
  .offers--question .offers__plan {
    margin-top: 8px;
  }

  .offers--protein .offers__total {
    margin-top: 8px;
  }

  .offers--protein .offers__chk {
    margin-top: 8px;
  }
}

/* solar */

/* The solar pages: the answer box is a solar module, navy with a faint grid of cells, its text white and the lead's
   price, the marked point and the button in the yellow of the sun, set in ink. The drawing beside it is the balcony
   in daylight in its white frame (the shared .answer--pic, .points and .scene--pic rules). Each table row shows the
   offer small (.thumb): its modules, and its storage where the price holds one. A total has a bar for its price and
   its shipping; the columns of the price per Wp and per kWh are the ink pages' chart. */

.answer--solar {
  background-color: #14233b;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 46px 68px;
  background-position: -1px -1px;
  color: #ffffff;
}

.answer--solar .answer__text strong {
  padding: 0 6px;
  background: var(--signal);
  border-radius: 3px;
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.answer--solar .answer__line {
  color: #c9d6e4;
}

.answer--solar .btn--ink {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--ink);
}

.answer--solar .btn--ink:hover {
  border-color: #ffffff;
  background: #ffffff;
}

.answer--solar .answer__more {
  color: #ffffff;
}

.answer--solar :focus-visible {
  outline-color: var(--signal);
}

.answer--solar .unknown {
  color: #c9d6e4;
}

/* The points on the navy field: light rules, the numbers white as the dots in the drawing, the marked one yellow. */
.answer--solar .points {
  border-top-color: rgba(255, 255, 255, 0.75);
}

.answer--solar .point {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.answer--solar .point__n {
  border-color: #ffffff;
  color: var(--ink);
}

.answer--solar .point__label {
  color: #a9bbd0;
}

.answer--solar .point__meta,
.answer--solar .point__price--none {
  color: #c9d6e4;
}

.answer--solar .point__price--lead span {
  background: var(--signal);
  color: var(--ink);
}

/* The capacity on the front of the storage box. */
.scene--solar .solar-cap {
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  font-stretch: 80%;
  fill: var(--ink);
  text-anchor: middle;
  dominant-baseline: central;
}

.scene--solar .solar-cap--big {
  font-size: 28px;
}

/* A drawn offer sits on a pale sky, as the balcony does. */
html[data-site="solar"] .thumb--drawn {
  background: #e4f0f9;
}

/* A storage model's photo: the unit on white, as the shops show it. In the answer box it stands on a white card,
   no wider than the photo's own pixels. */
.thumb--photo {
  background: var(--paper);
}

.thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scene--photo {
  justify-self: center;
  width: 100%;
  max-width: 400px;
  background: var(--paper);
}

.scene--photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Who sells, the stock, the delivery time and the 0 % VAT mark under a shop's name, each on its own short line. */
.offers--solar .offers__seller,
.offers--solar small {
  white-space: normal;
}

.offers--solar .offers__seller {
  overflow-wrap: break-word;
}

.offers--solar .offers__seller small,
.offers--solar .offers__shop small,
.offers--solar .offers__storage small {
  margin-top: 2px;
}

.offers--solar .solar-stock {
  color: var(--yes);
  font-weight: 600;
}

.offers--solar .solar-stock--out {
  color: var(--no);
}

.solar-vat {
  margin-top: 2px;
  border-color: var(--ink);
  background: var(--signal);
  text-decoration: none;
  text-transform: none;
}

.offers--solar .offers__storage {
  font-weight: 600;
}

/* "4 Module, 2.000 Wp" may take two lines rather than run into the next column. */
.offers--solar .offers__plan {
  white-space: normal;
}

.offers--solar .offers__go .btn {
  min-width: 112px;
}

.solar-method {
  margin-top: 14px;
}

.solar-classes {
  margin-top: 4px;
}

/* From 900px the total's column holds the bar; below 1040px the table sizes itself, so the cell asks for room. */
@media (min-width: 900px) {
  .offers--solar .total {
    min-width: 168px;
  }
}

@media (min-width: 1040px) {
  .offers.offers--solar thead th { width: auto; }
  .offers.offers--solar thead th:nth-child(1) { width: 36px; }
  .offers.offers--solar thead th:last-child { width: 124px; }

  /* A storage model: shop (takes the rest), price, shipping, total with its bar, per kWh, checked. */
  .offers.offers--solar-storage thead th:nth-child(3) { width: 11%; }
  .offers.offers--solar-storage thead th:nth-child(4) { width: 10%; }
  .offers.offers--solar-storage thead th:nth-child(5) { width: 24%; }
  .offers.offers--solar-storage thead th:nth-child(6) { width: 10%; }
  .offers.offers--solar-storage thead th:nth-child(7) { width: 7%; }

  /* A kit: the offer with its thumb (takes the rest), modules, feed-in, shop, total with its bar, per Wp, checked. */
  .offers.offers--solar-kit thead th:nth-child(3) { width: 10%; }
  .offers.offers--solar-kit thead th:nth-child(4) { width: 8%; }
  .offers.offers--solar-kit thead th:nth-child(5) { width: 13%; }
  .offers.offers--solar-kit thead th:nth-child(6) { width: 18%; }
  .offers.offers--solar-kit thead th:nth-child(7) { width: 6%; }
  .offers.offers--solar-kit thead th:nth-child(8) { width: 6%; }

  /* A kit with storage: offer, modules, storage, feed-in, shop, total with its bar, checked. */
  .offers.offers--solar-set thead th:nth-child(4) { width: 16%; }
  .offers.offers--solar-set thead th:nth-child(5) { width: 8%; }
  .offers.offers--solar-set thead th:nth-child(6) { width: 12%; }
  .offers.offers--solar-set thead th:nth-child(7) { width: 18%; }

  /* The storage models: model with its thumb (takes the rest), capacity, per kWh with its bar, price, shop, total,
     checked. */
  .offers.offers--solar-models thead th:nth-child(3) { width: 9%; }
  .offers.offers--solar-models thead th:nth-child(4) { width: 20%; }
  .offers.offers--solar-models thead th:nth-child(5) { width: 10%; }
  .offers.offers--solar-models thead th:nth-child(6) { width: 13%; }
  .offers.offers--solar-models thead th:nth-child(7) { width: 11%; }
  .offers.offers--solar-models thead th:nth-child(8) { width: 7%; }
}

/* A phone shows the shop (or the offer with its thumb) as the head line, then the bar with its number across the
   row, then what the offer holds, the shop, the price per unit and the check. Price and shipping are in the line
   under the total, so their own cells stay out. */
@media (max-width: 899px) {
  .offers--solar-storage tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    unit   chk"
      "go   go     go";
  }

  .offers--solar-kit tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    plan   feed"
      ".    shop   shop"
      ".    unit   chk"
      "go   go     go";
  }

  .offers--solar-set tr {
    grid-template-areas:
      "rank seller  seller"
      "rank price   price"
      ".    plan    feed"
      ".    storage storage"
      ".    shop    shop"
      ".    chk     chk"
      "go   go      go";
  }

  .offers--solar-models tr {
    grid-template-areas:
      "rank seller seller"
      "rank price  price"
      ".    plan   plan"
      ".    total  total"
      ".    shop   shop"
      ".    chk    chk"
      "go   go     go";
  }

  .offers--solar .offers__cost,
  .offers--solar .offers__ship {
    display: none;
  }

  .offers--solar .offers__price {
    margin-top: 8px;
  }

  .offers--solar .offers__plan {
    margin-top: 8px;
    text-align: left;
  }

  .offers--solar .offers__feed {
    grid-area: feed;
    margin-top: 8px;
  }

  .offers--solar .offers__storage {
    grid-area: storage;
    margin-top: 4px;
  }

  .offers--solar .offers__storage small {
    display: inline;
    margin-left: 6px;
  }

  .offers--solar .offers__shop {
    grid-area: shop;
    margin-top: 6px;
  }

  /* A shop's notes follow its name on the same lines; a kit's title keeps its notes under it. */
  .offers--solar .offers__shop small,
  .offers--solar-storage .offers__seller small {
    display: inline;
    margin-left: 8px;
  }

  /* "Module" in front of "2 Module, 900 Wp" says it twice. */
  .offers.offers--solar td.offers__plan[data-label]::before {
    content: none;
  }

  /* The lead's mark reaches past its number: inside the row, it ends at the row's edge. */
  .offers--solar .offers__lead {
    margin-right: 0;
  }

  .offers--solar .offers__unit {
    margin-top: 8px;
    text-align: left;
  }

  .offers--solar .offers__chk {
    margin-top: 8px;
  }

  .offers--solar-set .offers__chk {
    text-align: left;
  }

  .offers--solar .offers__total {
    grid-area: total;
    margin-top: 4px;
    font-weight: 700;
    text-align: left;
    white-space: normal;
  }

  .offers--solar .offers__total small {
    display: inline;
    margin-left: 6px;
  }
}

/* The columns of a chart name a model: its name may run to three short lines. */
.solar-cols .col__foot strong {
  overflow-wrap: anywhere;
}

@media (max-width: 599px) {
  .solar-cols .col__foot strong {
    font-size: 13px;
  }
}

/* "Gut zu wissen": each fact under its topic, with its source and the day it was read under it, two to a row where
   there is room. */
.solar-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 0 48px;
  margin-top: 20px;
  border-top: 2px solid var(--ink);
}

.solar-fact {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.solar-fact p {
  max-width: 62ch;
}

.solar-fact .solar-fact__topic {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.solar-fact__topic + p {
  margin-top: 4px;
}

.solar-fact .source,
.solar-rules .source {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 14px;
}

/* The rules page: the topics as a row of links under the box, then one section per topic, its facts numbered. */
.solar-jump .sizes {
  margin-top: 28px;
}

.solar-rules__list {
  max-width: 76ch;
  margin-top: 18px;
  border-top: 2px solid var(--ink);
  counter-reset: rule;
}

.solar-rules__list > li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  counter-increment: rule;
}

.solar-rules__list > li::before {
  content: counter(rule);
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: -1px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.solar-rules__list > li > p {
  grid-column: 2;
}

/* The solar start page: a storage model's photo large enough to see the unit; the drawings take the same size. */
html[data-site="solar"] .board--pics a:has(> .thumb) {
  grid-template-columns: 72px minmax(0, 1fr) auto;
}

html[data-site="solar"] .board--pics .thumb--small {
  width: 72px;
  height: 72px;
}

/* The start page on a phone: a price per kWh is too long to stand beside a model's name, so it goes under it. */
@media (max-width: 599px) {
  html[data-site="solar"] .board--pics a:has(> .thumb) {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  html[data-site="solar"] .board--pics .thumb--small {
    width: 64px;
    height: 64px;
  }

  html[data-site="solar"] .board--pics a > .thumb {
    grid-row: 1 / span 3;
    align-self: center;
  }

  html[data-site="solar"] .board--pics .board__price {
    grid-column: 2;
  }
}