/* 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;
}

.offers--ink thead th,
.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 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;
  }
}