/* furnipilot.com v9, every page besides the start page (design/ONTWERP-V9.md §3.9). Loaded through extra "v9-pagina",
   after css/v9.css. It holds:
   1. the head of a page (.kop9 of an article of blog, beurzen or koppelingen, components/InhoudPagina.astro, and the old
      .pagina-kop in the same measures) and the breadcrumb (.kruimel9);
   2. the function page: the first screen with the real screen of the function (.fp9), the article with its sticky left
      column (.fa9, .tekst9, .inhoud9) and the index of the other functions;
   3. /functies;
   4. the shared pages on the same tokens: plans (the comparison readable on a phone), contact, status, the letter page,
      the help centre, the legal pages (their contents get the same left column as an article), the 404 page.
   Nothing here moves except the marker of "In dit artikel" (js/v9-pagina.js), a colour change. */

/* ================================================================== 1. the head of a page */
.kop9, .pagina-kop { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); }
.kop9 .v9-wrap, .pagina-kop .wrap { display: grid; gap: 18px; justify-items: start; }
.kop9 h1, .pagina-kop h1 { max-width: 18ch; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.035em; }
.kop9-lead, .pagina-kop .lead { max-width: 60ch; font-size: var(--t-lead); line-height: 1.6; color: var(--s); }
.pagina-kop .knoppen { margin-top: 10px; }

.kruimel9 { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.875rem; line-height: 1.45; color: var(--s); }
.kruimel9 li + li::before { content: "/"; margin-right: 8px; color: var(--lijn-2); }
.kruimel9 a { color: var(--s); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .kruimel9 a:hover { color: var(--b-ink); text-decoration: underline; text-decoration-thickness: 1px; } }

/* ================================================================== 2. a function page */
/* the first screen: text left, the real screen on a stage right; the stage column is the article column below */
.fp9 { padding: clamp(24px, 3vw, 40px) 0 clamp(56px, 6vw, 96px); }
.fp9 .kruimel9 { margin-bottom: clamp(32px, 4vw, 56px); }
.fp9-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.fp9-in--zonder { grid-template-columns: minmax(0, 1fr); }
.fp9-tekst { display: grid; gap: 20px; justify-items: start; align-content: center; }
.fp9-tekst .v9-kicker svg { width: 18px; height: 18px; }
.v8 main .fp9-tekst h1 { max-width: 15ch; font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.035em; overflow-wrap: break-word; }
.fp9-lead { max-width: 46ch; font-size: var(--t-lead); line-height: 1.6; color: var(--t); }
.fp9-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

.fp9-podium { position: relative; overflow: hidden; border-radius: var(--r4); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
/* the gsm stands on the stage and runs past its bottom edge, as if it lies on the table */
.fp9-podium--gsm { display: grid; justify-items: center; align-items: start; height: clamp(460px, 40vw, 560px); padding-top: clamp(36px, 4vw, 56px); }
.fp9-gsm { --gsm-rand: 9px; width: min(62%, 300px); }
.fp9-gsm img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* a gsm whose screen is empty under its content: the stage ends just under the content (the phone is always 300px wide
   above 760px: 9px rim, the content of gsm-suggesties ends at 64.6% of a 610px screen) */
.fp9-podium--kort { height: calc(clamp(36px, 4vw, 56px) + 440px); }
/* a gsm whose subject sits low: the stage ends at 88% of the 610px screen (gsm-fiche: under the block Afwijking, above
   the button) */
.fp9-podium--hoog { height: calc(clamp(36px, 4vw, 56px) + 546px); }
.fp9-podium--pc { padding: clamp(32px, 4vw, 52px) clamp(20px, 2.4vw, 32px) clamp(40px, 4.4vw, 60px); }
.fp9-pc { width: 100%; max-width: 680px; margin-inline: auto; }
/* A computer screen shows the part the function is about (the crop per screen in functies/[slug].astro): --zd is the width
   of the screen in its frame, --xd and --yd how far it moves; --zm, --xm and --ym the same up to 760px. A screen in the
   article stands whole above 760px. */
.fp9-pc img, .fa9-beeld--pc img { display: block; max-width: none; height: auto; transform-origin: 0 0; }
.fp9-pc img { width: var(--zd, 100%); transform: translate(var(--xd, 0%), var(--yd, 0%)); }
.fa9-beeld--pc img { width: 100%; }
.fp9-pc picture { display: contents; }
/* Te versturen drawn in HTML (functies/[slug].astro TEKENING): an 860 x 537.5 px app screen (16:10) scaled to the frame
   (100cqw / 860px), so its 13px text is about 9px next to the text and stays sharp on every screen; up to 760px a 400 x
   300 px part (4:3) with the purchase, where it goes and its status. The app's own pieces (.pa, .pa-zij, .pa-tabs,
   .pa-tabel, .pa-naam, .duim, .lev) are in css/v9.css. */
.tv9-beeld { container-type: inline-size; }
.tv9.pc9-in { width: 860px; height: 537.5px; transform: scale(tan(atan2(100cqw, 860px))); }
.tv9 .pa { height: 100%; }
.tv9-hoofd { min-width: 0; padding: 18px 20px; overflow: hidden; }
.tv9-balk { display: flex; align-items: center; gap: 10px; }
.tv9-balk h4 { margin: 0 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.tv9-balk .pa-tabs span { white-space: nowrap; }
.tv9-auto { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 11px; border-radius: 99px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E8F0; font-size: 13px; color: #3B4457; white-space: nowrap; }
.tv9-auto b { font-weight: 700; color: var(--ink); }
.tv9-auto svg { width: 13px; height: 13px; color: #8A93A6; }
.tv9-knop { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--b); color: #FFFFFF; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tv9-knop svg { width: 15px; height: 15px; }
.tv9-knop em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.24); font-style: normal; font-size: 11px; font-weight: 700; }
.tv9-filters { display: flex; gap: 6px; margin: 14px 0 12px; }
.tv9-filters span { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 11px; border-radius: 99px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E8F0; font-size: 12px; font-weight: 500; color: #3B4457; }
.tv9-filters svg { width: 12px; height: 12px; color: #8A93A6; }
.tv9-filters .tv9-sorteer { margin-left: auto; }
.tv9-kol { display: grid; grid-template-columns: 18px minmax(0, 1.9fr) minmax(0, 1.2fr) minmax(0, 0.95fr) minmax(0, 1.35fr) minmax(0, 1.4fr); align-items: center; gap: 12px; padding: 0 16px; }
.tv9-kop { height: 34px; white-space: nowrap; border-bottom: 1px solid #EEF1F6; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8A93A6; }
.tv9-rij { height: 56px; border-bottom: 1px solid #EEF1F6; font-size: 13px; color: #3B4457; }
.tv9-rij:last-child { border-bottom: 0; }
.tv9-rij--aan { background: #F5F8FE; }
/* sent in the last two weeks: the app keeps the purchase in the list, dimmed, with Verstuurd and the date */
.tv9-rij--oud > :not(.tv9-pil) { opacity: 0.5; }
.tv9-rij .duim { --d: 36px; }
.tv9 .pa-naam b { overflow: hidden; text-overflow: ellipsis; }
.tv9-vak { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #C3CCDA; }
.tv9-vak svg { width: 12px; height: 12px; color: #FFFFFF; }
.tv9-vak--aan, .tv9-vak--deels { background: var(--b); box-shadow: none; }
.tv9-vak--deels::before { content: ""; width: 8px; height: 2px; border-radius: 1px; background: #FFFFFF; }
.tv9-naar { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.tv9-naar svg { flex: none; width: 15px; height: 15px; color: #5B6474; }
.tv9-naar svg:last-child { width: 13px; height: 13px; color: #8A93A6; }
.tv9-pil { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: #EEF1F6; color: #3B4457; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tv9-pil svg { flex: none; width: 13px; height: 13px; }
.tv9-pil--groen { background: var(--g-tint); color: var(--g); }
/* a page without its own screen: the sources of the import, an arrow, Furnipilot */
.fp9-bron { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 32px); min-height: clamp(300px, 28vw, 400px); padding: 40px clamp(20px, 3vw, 44px); }
.fp9-bron ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.fp9-bron-van li { display: flex; align-items: center; gap: 12px; min-width: 150px; padding: 14px 18px; border-radius: var(--r3); background: #FFFFFF; box-shadow: 0 0 0 1px var(--lijn), 0 12px 24px -20px rgba(15, 27, 51, 0.35); color: var(--ink); font-weight: 500; font-size: 1rem; }
.fp9-bron-van img, .fp9-bron-ico, .fp9-bron-ico svg { display: block; width: 28px; height: 28px; }
.fp9-bron-ico { color: var(--s); }
.fp9-bron-pijl, .fp9-bron-pijl svg { display: block; flex: none; width: 28px; height: 28px; color: var(--b); }
.fp9-bron-naar { display: grid; gap: 18px; padding: 22px 24px 24px; border-radius: var(--r3); background: #FFFFFF; box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(15, 27, 51, 0.45); }
.fp9-bron-naar > img { display: block; width: 120px; height: auto; }
.fp9-bron-naar li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; font-size: 1rem; }
.fp9-bron-vink, .fp9-bron-vink svg { display: block; width: 18px; height: 18px; color: var(--g, var(--b)); }

/* the article: a sticky left column and the text at about 680px */
.fa9 { padding: 0 0 clamp(80px, 8vw, 128px); }
.fa9-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
.fa9-zij { align-self: stretch; }
.fa9-plak { position: sticky; top: calc(var(--plak, var(--kop)) + 32px); display: grid; gap: 22px; max-width: 300px; }
.fa9-titel { font-size: 1.0625rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.fa9-plan { margin-top: -10px; display: flex; flex-wrap: wrap; gap: 6px; }
.fa9-probeer { display: grid; gap: 10px; justify-items: start; padding-top: 20px; border-top: 1px solid var(--lijn); }
.v8 main .fa9-probeer h2 { font-size: 1rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }
.fa9-probeer p { font-size: 0.875rem; line-height: 1.5; color: var(--s); }
.fa9-probeer .v9-knop { margin-top: 4px; }
.fa9-hoofd { min-width: 0; max-width: 680px; }

/* "In dit artikel" (also the contents of the legal pages): a hairline on the left, the current part marked in blue */
.inhoud9-kop, .jur-inhoud-titel { margin: 0 0 10px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s); }
.inhoud9 ol, .jur-inhoud ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-left: 1px solid var(--lijn); }
.inhoud9 a, .jur-inhoud a { display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent; color: var(--s); font-size: 0.9375rem; line-height: 1.4; text-decoration: none; transition: color 0.16s var(--uit), border-color 0.16s var(--uit); }
.inhoud9 a[aria-current], .jur-inhoud a[aria-current] { color: var(--ink); border-left-color: var(--b); }
@media (hover: hover) and (pointer: fine) { .inhoud9 a:hover, .jur-inhoud a:hover { color: var(--ink); } }

/* the text of an article */
.tekst9 { color: var(--t); font-size: 1.0625rem; line-height: 1.7; }
.tekst9 > * { margin: 0; }
.tekst9 > * + * { margin-top: 18px; }
.tekst9 > p:first-child { font-size: var(--t-lead); line-height: 1.6; }
.v8 main .tekst9 h2, .v8 main .fa9-vragen h2 { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.022em; }
.tekst9 h2 { margin-top: 56px; scroll-margin-top: calc(var(--plak, var(--kop)) + 24px); }
.tekst9 > h2 + * { margin-top: 14px; }
.tekst9 ol { padding: 0; list-style: none; counter-reset: stap; display: grid; gap: 14px; }
.tekst9 ol > li { position: relative; min-height: 28px; padding-left: 44px; counter-increment: stap; }
.tekst9 ol > li::before { content: counter(stap); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tint-2); color: var(--b-ink); font-size: 0.875rem; font-weight: 600; line-height: 1; }
.tekst9 ul { padding: 0; list-style: none; display: grid; gap: 10px; }
.tekst9 ul > li { position: relative; padding-left: 24px; }
.tekst9 ul > li::before { content: ""; position: absolute; left: 3px; top: calc(0.85em - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--b); }
.tekst9 a, .tekst9 a:visited { color: var(--b-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(40, 86, 190, 0.35); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .tekst9 a:hover { text-decoration-color: currentColor; } }
.tekst9 strong { font-weight: 500; color: var(--ink); }
/* a real screen of the app in the article: a white box with a hairline, the screen and one line under it */
.tekst9 > .fa9-beeld { margin-top: 32px; }
.tekst9 > .fa9-beeld + * { margin-top: 32px; }
.fa9-beeld { padding: 12px; border-radius: var(--r3); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--lijn); }
.fa9-beeld-in { overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--lijn); }
.fa9-beeld--gsm img { display: block; width: 100%; height: auto; }
.fa9-beeld--gsm { padding-top: 28px; background: var(--vlak); }
.fa9-beeld--gsm .fa9-beeld-in { width: min(260px, 72%); margin-inline: auto; border-radius: 26px; box-shadow: 0 0 0 1px var(--lijn), 0 24px 48px -28px rgba(15, 27, 51, 0.45); }
.fa9-beeld figcaption { padding: 12px 4px 2px; font-size: 0.875rem; line-height: 1.5; color: var(--s); }
.fa9-beeld--gsm figcaption { padding-top: 16px; text-align: center; }

.fa9-vragen { margin-top: 64px; }
.fa9-vragen h2 { scroll-margin-top: calc(var(--plak, var(--kop)) + 24px); }
.fa9-vragen .faq9 { margin-top: 18px; }
.fa9-verwant { margin-top: 56px; }
.v8 main .fa9-verwant h2 { margin: 0 0 12px; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s); }
.fa9-verwant ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lijn-2); }
.fa9-verwant li { border-bottom: 1px solid var(--lijn); }
.fa9-verwant a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; gap: 16px; align-items: center; padding: 15px 2px; color: var(--ink); font-weight: 500; line-height: 1.4; text-decoration: none; }
.fa9-ico, .fa9-ico svg { display: block; width: 22px; height: 22px; color: var(--b-ink); }
.fa9-pijl, .fa9-pijl svg { display: block; width: 18px; height: 18px; color: var(--s2); transition: transform 0.18s var(--uit), color 0.18s var(--uit); }
@media (hover: hover) and (pointer: fine) {
  .fa9-verwant a:hover { color: var(--b-ink); }
  .fa9-verwant a:hover .fa9-pijl { transform: translateX(3px); color: var(--b-ink); }
}

/* the other functions: the index of the start page; six, so two full rows of three on a computer and three of two on a
   tablet */
.fx9-nog { padding-block: clamp(72px, 7vw, 112px); }
.fx9-nog .s9-kop { margin-bottom: clamp(28px, 3vw, 40px); }
@media (min-width: 1101px) { .index9--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }

/* ================================================================== 3. /functies */
.fx9 { padding: 0 0 clamp(80px, 8vw, 128px); }
/* the head as the first screen of a function page: the text left, the laptop with the gsm in front of it right */
.fx9-kop { padding-bottom: clamp(48px, 5vw, 80px); }
.fx9-podium { padding: clamp(32px, 4vw, 52px) clamp(20px, 2.4vw, 32px) clamp(40px, 4.4vw, 60px); }
.fx9-podium .pc9 { width: 84%; }
.fx9-podium .gsm9 { --gsm-rand: 6px; position: absolute; right: clamp(16px, 2.4vw, 32px); bottom: clamp(20px, 2.6vw, 36px); width: 28%; max-width: 180px; }
.fx9-podium img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ================================================================== 4. the shared pages */
/* the sections of the v7 pages (plans, contact, status, help centre) with the v9 rhythm */
.sectie { padding-block: clamp(72px, 7vw, 120px); }
.sectie--top0 { padding-top: 0; }
/* more room above a heading than below the content; two white sections in a row share one gap (as the start page) */
main > .sectie { padding-bottom: clamp(56px, 5vw, 88px); }
main > .sectie:not(.sectie--band) + .sectie:not(.sectie--band):not(.sectie--top0) { padding-top: clamp(32px, 3vw, 48px); }

/* plans: the plan names of the comparison stay in view under the header while you scroll through it, at every width.
   overflow: clip keeps the rounded corners without making the box a scroll container (hidden would stop the sticking). */
.vt-wrap { overflow: clip; }
.vt thead th, .vt thead td { position: sticky; z-index: 2; top: var(--plak, var(--kop)); background: #FFFFFF; box-shadow: inset 0 -1px 0 var(--lijn); }
/* the comparison on a phone keeps its three columns; the label of a group (Grootte, Aankopen ...) sticks right under the
   plan names, so the plan row never covers half of it (js/v9-pagina.js measures the plan row as --vt-kop) */
@media (max-width: 560px) {
  .vt-wrap { overflow: visible; }
  .vt thead th, .vt thead td { position: static; box-shadow: none; }
  .vt tbody tr.vt-groep { position: sticky; z-index: 1; top: calc(var(--plak, var(--kop)) + var(--vt-kop, 66px)); }
  .vt, .vt tbody, .vt thead { display: block; width: auto; }
  .vt thead { position: sticky; z-index: 2; top: var(--plak, var(--kop)); border-radius: var(--r3) var(--r3) 0 0; background: #FFFFFF; box-shadow: 0 1px 0 var(--lijn); }
  .vt thead tr, .vt tbody tr:not(.vt-groep) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; padding: 0 16px; }
  .vt thead td { display: none; }
  .vt thead th { display: block; padding: 14px 0 12px; border: 0; }
  .vt-plan { font-size: 0.9375rem; line-height: 1.35; }
  .vt-prijs { margin-top: 1px; font-size: 0.8125rem; line-height: 1.35; white-space: nowrap; }
  .vt-prijs .bedrag { display: inline; }
  .vt-per { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .vt-kort { display: inline; }
  .vt-uitleg { display: inline; }
  .vt tbody tr:not(.vt-groep) { row-gap: 8px; padding-block: 14px; border-top: 1px solid var(--lijn); }
  .vt tbody tr.vt-groep { display: block; background: var(--vlak); }
  .vt tbody th, .vt td { display: block; width: auto; margin: 0; padding: 0; border: 0; }
  .vt tbody tr:not(.vt-groep) > th { grid-column: 1 / -1; color: var(--ink); font-weight: 500; font-size: 0.9375rem; line-height: 1.4; }
  .vt td { display: flex; align-items: center; min-height: 22px; font-size: 0.9375rem; color: var(--ink); }
  .vt td::before { content: none; }
  .vt .vt-groep th { display: block; padding: 10px 16px; border-top: 1px solid var(--lijn); }
}

/* from 561px a row of the comparison reads on one or two lines: the labels get 40%, each plan 20% (site.css gave every td
   19%, also the empty corner cell, so the four columns came out equal) */
@media (min-width: 561px) {
  .vt { table-layout: fixed; }
  .vt thead td:first-child { width: 40%; }
  .vt thead th, .vt td { width: 20%; }
  .vt thead th { vertical-align: top; }
}
/* the price under each plan name follows the choice Jaarlijks / Maandelijks above (js/site.js sets data-periode on every
   [data-plannen], the comparison too) */
.vt-pm { display: none; }
[data-plannen][data-periode="maand"] .vt-pj { display: none; }
[data-plannen][data-periode="maand"] .vt-pm { display: inline; }
/* the price in the plan row: the amount on its own line and "per maand, jaarlijks" under it (plannen.astro wraps it in
   .vt-per), so the line breaks the same in every column; on a phone the amount with "/maand" only (.vt-kort), and the
   line above the comparison says how it is paid (.vt-uitleg) */
.vt-prijs .bedrag { color: var(--ink); font-weight: 500; }
@media (min-width: 561px) {
  .vt-prijs .bedrag { display: block; }
  .vt-per { display: block; margin-top: 2px; line-height: 1.35; }
  .vt-kort, .vt-uitleg { display: none; }
}

/* the three plans (blocks.mjs planKaarten) from 961px side by side: the parts of the cards share their rows (subgrid), so
   the buttons stand on one line even when the size chips of one plan take two lines */
@media (min-width: 961px) {
  .pl-kaarten:has(> .plan > .knop) { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .pl-kaarten:has(> .plan > .knop) > .plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 18px; }
  .pl-kaarten .plan-grootte { align-self: start; align-content: flex-start; }
  .pl-kaarten .plan-lijst { align-content: start; }
}
/* on a narrow computer the two Keten chips no longer fit on one line: every card stacks its chips (as on the start page),
   so no card gets an empty band under them */
@media (min-width: 961px) and (max-width: 1240px) { .pl-kaarten .plan-grootte { flex-direction: column; align-items: flex-start; } }
/* Wat voor elk plan geldt on a tablet: two columns with a line above each rule (three columns left a row of two with an
   empty cell and uneven lines between them); an odd last rule takes the whole row */
@media (min-width: 721px) and (max-width: 1080px) {
  .regels { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 48px); border-top: 0; }
  .regels > div, .regels > div + div, .regels > div:nth-child(4) { padding: 18px 0 16px; box-shadow: none; border-top: 1px solid var(--lijn); }
  .regels > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* contact */
.hulp-weg { padding: 28px 26px 30px; gap: 14px; }
.hulp-weg p { color: var(--t); }
.hulp-docs h2 { max-width: 18ch; }
.hulp-docs p { color: var(--t); font-size: var(--t-lead); }

/* status: the addresses in the text face, the mono face is only for documents */
.sts-wat span { font-family: var(--font); font-size: 0.875rem; color: var(--s); }
.sts-rij { border-bottom-color: var(--lijn); }
.sts-wat b { font-weight: 500; color: var(--ink); }
.sts[data-staat="werkt"] .sts-rij:first-child .sts-bol, .sts-staat--ok .sts-bol { background: var(--g); box-shadow: 0 0 0 4px var(--g-tint); }
/* the explanation when the app cannot be checked: the size of the time above it, the address a real link */
.sts-uitleg { font-size: 0.875rem; line-height: 1.55; color: var(--t); }
.sts-uitleg a, .sts-uitleg a:visited { color: var(--b-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the letter page: the app on the stage of a function page, the laptop with the gsm in front */
.pk { padding: clamp(48px, 6vw, 88px) 0 clamp(80px, 8vw, 128px); }
.pk-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); }
.v8 main .pk-tekst h1 { max-width: 14ch; font-size: var(--t-h1); line-height: 1.04; }
.pk-tekst .lead { color: var(--t); }
.pk-form label { color: var(--ink); }
.pk-rij input { height: 48px; border-radius: var(--r2); font-family: var(--font); }
.pk-rij input:focus { border-color: var(--b); box-shadow: 0 0 0 4px var(--b-zacht); }
.pk-drie { border-top-color: var(--lijn); }
.pk-drie li { color: var(--ink); }
.pk-drie .ic { color: var(--b-ink); }
.pk-podium { position: relative; padding: clamp(32px, 4vw, 52px) clamp(28px, 3.4vw, 48px) clamp(40px, 4.4vw, 60px); border-radius: var(--r4); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.pk-podium .pc9 { width: 86%; }
.pk-podium .gsm9 { --gsm-rand: 6px; position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(24px, 3vw, 36px); width: 26%; }
.pk-podium img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* the help centre: the close of the start page under every topic as well */
.docs-in { padding-bottom: clamp(80px, 8vw, 128px); }

/* legal pages: the contents in the left column of an article */
/* the text starts right next to the contents (no empty strip between them) */
.jur .wrap { grid-template-columns: 300px minmax(0, 1fr); column-gap: clamp(48px, 5vw, 80px); }
.jur-inhoud { top: calc(var(--plak, var(--kop)) + 32px); max-width: 300px; padding-right: 0; scrollbar-width: thin; }
.jur-inhoud-sub a { padding-left: 28px; font-size: 0.875rem; }
.jur-tekst { max-width: 72ch; }
.jur-tekst h2 { scroll-margin-top: calc(var(--plak, var(--kop)) + 24px); }
.v8 main .jur-tekst h2 { font-size: clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.022em; }
.jur-tekst h3, .jur-tekst h4 { scroll-margin-top: calc(var(--plak, var(--kop)) + 24px); }

/* the 404 page */
.pagina-kop--404 { padding-block: clamp(80px, 12vw, 160px); }

/* ================================================================== tablet and phone */
@media (max-width: 1100px) {
  .fa9-in { grid-template-columns: minmax(0, 1fr); }
  .fa9-zij { display: none; }
  /* one column: the article, the stage above it (max 720px) and the other functions end on the same line */
  .fa9-hoofd, .fx9-nog .index9 { max-width: 720px; }
  .jur .wrap { grid-template-columns: minmax(0, 1fr); }
  .jur-inhoud { position: static; max-width: none; max-height: none; }
}
@media (max-width: 960px) {
  .fp9-in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fp9-podium { max-width: 720px; }
  .pk-in { grid-template-columns: minmax(0, 1fr); }
  .pk-beeld { max-width: 640px; }
}
@media (max-width: 760px) {
  .fp9-in { gap: 32px; }
  .fp9-podium--gsm { height: 400px; padding-top: 28px; }
  .fp9-podium--kort { height: 376px; }
  /* 224px screen, 485px high: 88% of it */
  .fp9-podium--hoog { height: 463px; }
  .fp9-gsm { --gsm-rand: 8px; width: 240px; }
  /* on a phone a computer screen shows one part of it at reading size (the m crop); where the app has the same view on the
     gsm, the first screen shows that gsm instead (.fp9-podium--smal) */
  .fp9-podium--pc { padding: 20px 10px 22px; }
  .fp9-pc .pc9-beeld, .fa9-beeld--pc .fa9-beeld-in { aspect-ratio: 4 / 3; }
  .fp9-pc img, .fa9-beeld--pc img { width: var(--zm, 100%); transform: translate(var(--xm, 0%), var(--ym, 0%)); }
  /* never wider than the crop (--mw from functies/[slug].astro), so a screen is never enlarged beyond its own pixels on a
     wider phone or a small tablet */
  .fp9-pc { max-width: var(--mw, 680px); }
  .fa9-beeld--pc { max-width: var(--mw, none); margin-inline: auto; }
  .tv9.pc9-in { width: 400px; height: 300px; transform: scale(tan(atan2(100cqw, 400px))); }
  .tv9 .pa { display: block; }
  .tv9 .pa-zij, .tv9-balk h4, .tv9-balk .pa-tabs span:not(.aan), .tv9-auto, .tv9-filters, .tv9-naar svg:last-child, .tv9-rij--oud { display: none; }
  .tv9-hoofd { padding: 12px 10px; }
  .tv9-balk { justify-content: space-between; margin-bottom: 10px; }
  .tv9-kol { grid-template-columns: 18px minmax(0, 1fr) 104px 76px; gap: 8px; padding: 0 10px; }
  .tv9-kol > :nth-child(3), .tv9-kol > :nth-child(4) { display: none; }
  .tv9-rij { height: 50px; }
  .tv9-rij .duim { --d: 30px; border-radius: 8px; }
  .tv9 .pa-naam { gap: 8px; }
  .tv9-naar { gap: 5px; }
  .tv9-naar svg { width: 14px; height: 14px; }
  .fp9-podium--breed, .fa9-beeld--breed { display: none; }
  .fa9-beeld--pc { padding: 8px 8px 10px; }
  .fp9-bron { flex-direction: column; min-height: 0; padding: 28px 16px 32px; gap: 14px; }
  .fp9-bron-van { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .fp9-bron-van li { flex-direction: column; gap: 8px; min-width: 0; padding: 14px 8px; font-size: 0.9375rem; }
  .fp9-bron-pijl { transform: rotate(90deg); }
  .fp9-bron-naar { width: 100%; grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; }
  .fp9-bron-naar ul { justify-items: start; }
  /* the title is the h1 right under it: the breadcrumb keeps the way back, and a breadcrumb with nothing between the
     start page and this page (/functies) is left out */
  .kruimel9 li[aria-current] { display: none; }
  .kruimel9:not(:has(li:nth-child(3))) { display: none; }
  .fp9-knoppen .v9-knop { flex: 1 1 auto; }
  /* the other functions as one compact list: the title and the arrow (the short lines are on /functies) */
  .index9--drie .index9-kort { display: none; }
  .index9--drie a { align-items: center; }
  .index9--drie .index9-ico, .index9--drie .index9-pijl { grid-row: 1; margin-top: 0; }
  .tekst9 h2 { margin-top: 44px; }
  .fa9-vragen { margin-top: 52px; }
  .fa9-verwant { margin-top: 44px; }
  .pk-podium { padding: 22px 14px 28px; }
  .fx9-podium { padding: 20px 10px 26px; }
  .fx9-podium .gsm9 { --gsm-rand: 4px; right: 10px; bottom: 14px; width: 26%; }
}
@media (min-width: 761px) {
  .fp9-podium--smal, .fa9-beeld--smal { display: none; }
}