/*
 * vast5g.nl v5, richting A "Werkplaats" (gekozen door Matthias, 30 september 2026)
 * Bron: site/prototype-v5/a.html + base.css + a.css. Uitleg per keuze in docs/design.md.
 *
 * Idee: full-bleed banden die wisselen tussen petrol, inkt, warm grijs en papier; koppen in
 * Archivo smal (wdth 62-75) en groot; bedragen als grote smalle cijfers; tekeningen als blauwdruk
 * (lichte lijnen, gele kabels) op petrol of inkt; een gele adresbalk als eerste handeling;
 * afzetlint bij "Wat 5G niet kan"; het telefoonnummer als laatste gele moment.
 *
 * Opbouw
 *   0. Font            6. Held (hero), adresbalk, cijferstrook
 *   1. Tokens          7. Contentblokken: sectie, split, paneel, notitie, grens, tabel,
 *   2. Basis              spec/prijsbord, tijdlijn, tekening, getal, faq, contactstrook,
 *   3. Tonen (banden)     verder lezen, situaties, stappen, foto
 *   4. Header + menu   8. Formulier
 *   5. Knoppen, links  9. Footer
 *                      10. Minder beweging
 *
 * Regels: mobile-first (alleen min-width), geen !important, kleuren en maten via tokens,
 * lopende tekst en labels minimaal 16 px, aanraakdoelen minimaal 44 px, focus altijd zichtbaar.
 * Een sectie krijgt haar achtergrond over de volle breedte via border-image (geen extra HTML):
 * .section blijft een .wrap, de kleur loopt door tot de randen van het scherm.
 */

/* ---------------------------------------------------------------
   0. Font: Archivo variabel met breedte-as (SIL OFL, assets/fonts/OFL.txt)
   Ingekort met fontTools (1-10-2026): alleen wght 400-800 en wdth 62-100
   (meer gebruikt de CSS niet), latin zonder ongebruikte Latin-1-tekens.
   Wie een gewicht buiten 400-800 of een breedte boven 100% nodig heeft:
   eerst het font opnieuw maken uit de volledige Archivo.
   --------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 62% 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Terugval met aangepaste maten tot Archivo geladen is: minder verspringing (CLS).
   Waarden gemeten met fontTools op Nederlandse tekst (Archivo 400/100% tegen Arial,
   800/100% tegen Arial Bold, 800/~70% tegen Arial Narrow Bold). Ontbreekt een lokaal
   font, dan valt de browser door naar de volgende naam in --font. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 100 599;
  font-stretch: 87.5% 125%;
  size-adjust: 98.24%;
  ascent-override: 89.37%;
  descent-override: 21.38%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 900;
  font-stretch: 87.5% 125%;
  size-adjust: 102.94%;
  ascent-override: 85.29%;
  descent-override: 20.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow Bold"), local("ArialNarrow-Bold");
  font-weight: 100 900;
  font-stretch: 50% 87.4%;
  size-adjust: 94.4%;
  ascent-override: 93.01%;
  descent-override: 22.25%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------- */
:root {
  /* merk */
  --petrol: #0d4f5c;          /* 9,2:1 met wit */
  --petrol-d: #093a44;
  --petrol-dd: #062a32;
  --signal: #ffd23f;          /* nooit als tekst op wit */
  --signal-l: #ffe07a;
  --signal-tint: #fff7d6;
  --ink: #1c2326;             /* 15,9:1 op wit */
  --ink-muted: #4f5a5e;       /* 7,1:1 op wit, 6,2:1 op --page */
  --ink-on-signal: #3a4346;   /* 7,4:1 op geel */
  --page: #f1f0ed;            /* warm grijs */
  --paper: #ffffff;
  --tint: #e3eef0;            /* petrol-tint */
  --on-petrol: #dfe7e8;       /* 7,3:1 op petrol, 12,9:1 op inkt */
  --line: #d5d3ce;
  --line-strong: #8a9396;     /* randen van invoervelden, 3,1:1 */
  --error: #b3261e;
  --error-tint: #fbeceb;
  --footer: #2a3033;
  --footer-ink: #c5ccce;      /* 8,2:1 op footer */
  --white: #ffffff;

  /* letter */
  --font: "Archivo", "Archivo Fallback", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --fs-body: 1.0625rem;                                     /* 17 px */
  --fs-small: 1rem;                                         /* 16 px: kleinste tekst op de site */
  --fs-lead: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --fs-h2: clamp(2.125rem, 1.35rem + 3.1vw, 3.75rem);
  --fs-h2-small: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --fs-hero-home: clamp(4rem, 0.6rem + 9.6vw, 8.75rem);   /* 1-10-2026: langere home-H1, max 3 regels vanaf 1280 */
  --fs-hero: clamp(2.75rem, 1.2rem + 6vw, 6.5rem);
  --fs-big: clamp(8.5rem, 4rem + 20vw, 21rem);             /* groot bedrag */
  --fs-num: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);       /* cijfers in strook en prijsbord */
  --fs-tel: clamp(3.25rem, 1.4rem + 8vw, 8.5rem);          /* telefoonnummer */
  --wdth-hero: 62%;
  --wdth-display: 68%;
  --wdth-head: 78%;
  --measure: 38rem;

  /* ruimte */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --sec-pad: clamp(2.5rem, 1.5rem + 4.5vw, 6.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --wrap: 82rem;
  --header-h: 4rem;
  --tape: 1.25rem;

  /* vorm */
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;
  --shadow-raised: 0 2px 4px rgb(28 35 38 / 0.08), 0 12px 32px rgb(28 35 38 / 0.14);
  --tap: 2.75rem;
  --z-header: 50;
  --z-skip: 100;

  /* tekening: lichte stijl (inkt op papier) */
  --c-ink: var(--ink);
  --c-ink-muted: var(--ink-muted);
  --c-brand: var(--petrol);
  --c-surface: var(--paper);
  --c-surface-alt: var(--tint);
  --c-page: var(--page);
  --c-signal: var(--signal);
  --c-line-strong: var(--line-strong);
  --d-num: var(--ink);
}
@media (min-width: 64em) {
  :root { --header-h: 4.5rem; }
}

/* ---------------------------------------------------------------
   2. Basis
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "tnum" 1;
}

img,
svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  line-height: 1;
  text-wrap: balance;
  font-weight: 800;
}
h2 {
  font-size: var(--fs-h2);
  font-stretch: var(--wdth-display);
  line-height: 0.95;
  letter-spacing: -0.01em;
  word-spacing: 0.03em;
}
h3,
.h3 {
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-head);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
}

[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

p, ul, ol, dl { margin: 0 0 var(--s-4); }
p { text-wrap: pretty; }
p, li { max-width: var(--measure); }

a {
  color: var(--link, var(--petrol));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 3px; }

/* Focus: inkt-ring met geel, op donker andersom. Altijd zichtbaar. */
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--signal);
  border-radius: 2px;
}
:where(.toon-petrol, .toon-inkt, .hero, .site-header, .site-top, .site-footer) :focus-visible {
  outline-color: var(--signal);
  box-shadow: 0 0 0 6px var(--ink);
}
a:not(.btn):focus-visible {
  background: var(--signal);
  color: var(--ink);
  text-decoration: none;
  outline: 2px solid var(--ink);
  box-shadow: 0 0 0 4px var(--signal);
}
/* Op geel (contactband, adresbalk): een gele vulling valt weg, dus inkt met geel (design-review r6 G6). */
.toon-geel a:not(.btn):focus-visible,
.check a:focus-visible {
  background: var(--ink);
  color: var(--signal);
  outline: 2px solid var(--ink);
  box-shadow: 0 0 0 4px var(--ink);
}
/* Logo: geen gele vulling, anders valt "5g" weg (audit r6 P2-13). Gele ring om het woordmerk. */
a.brand:focus-visible {
  background: none;
  color: var(--white);
  outline: 3px solid var(--signal);
  outline-offset: 4px;
  box-shadow: none;
}

.skip {
  position: absolute;
  left: var(--s-4);
  top: -5rem;
  z-index: var(--z-skip);
  padding: var(--s-3) var(--s-4);
  background: var(--signal);
  color: var(--ink);
  font-weight: 700;
}
.skip:focus { top: var(--s-4); }

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

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead { font-size: var(--fs-lead); line-height: 1.5; }
.muted { color: var(--fg-muted, var(--ink-muted)); }
.small { font-size: var(--fs-small); }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: var(--s-5); }
.stack > :last-child { margin-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------
   3. Tonen: elke sectie is een band over de volle breedte.
   De converter zet toon-petrol | toon-inkt | toon-grijs | toon-papier | toon-geel
   (docs/content-contract.md §9); nooit twee dezelfde na elkaar.
   --------------------------------------------------------------- */
.section {
  --bg: var(--page);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --link: var(--petrol);
  --rule: var(--line);
  --rule-strong: var(--ink);
  --panel: var(--paper);
  --sheet: var(--paper);
  --num: var(--petrol);
  position: relative;
  margin-block: 0;
  padding-block: var(--sec-pad);
  color: var(--fg);
  border-image: conic-gradient(var(--bg) 0 0) fill 0 / / 0 100vw;
}
.toon-papier {
  --bg: var(--paper);
  --panel: var(--page);
  --sheet: var(--page);
}
.toon-petrol {
  --bg: var(--petrol);
  --fg: var(--white);
  --fg-muted: var(--on-petrol);
  --link: var(--white);
  --rule: rgb(255 255 255 / 0.22);
  --rule-strong: var(--white);
  --panel: var(--petrol-d);
  --num: var(--signal);
}
.toon-inkt {
  --bg: var(--ink);
  --fg: var(--white);
  --fg-muted: var(--on-petrol);
  --link: var(--white);
  --rule: rgb(255 255 255 / 0.18);
  --rule-strong: var(--white);
  --panel: transparent;
  --num: var(--signal);
  padding-block: calc(var(--sec-pad) + var(--tape));
}
/* afzetlint boven en onder het inktvlak */
.toon-inkt::before,
.toon-inkt::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: var(--tape);
  background: repeating-linear-gradient(-45deg, var(--signal) 0 18px, var(--ink) 18px 36px);
}
.toon-inkt::before { top: 0; }
.toon-inkt::after { bottom: 0; }
.toon-geel {
  --bg: var(--signal);
  --fg: var(--ink);
  --fg-muted: var(--ink-on-signal);
  --link: var(--ink);
  --rule: rgb(28 35 38 / 0.28);
  --rule-strong: var(--ink);
  --panel: rgb(255 255 255 / 0.55);
  --num: var(--ink);
}
/* tekeningen op donker: blauwdruk (lichte lijnen, gele kabels) */
.toon-petrol,
.toon-inkt,
.hero,
.tekening--blauwdruk {
  --c-ink: #e9eeef;
  --c-ink-muted: rgb(233 238 239 / 0.5);
  --c-brand: var(--signal);
  --c-surface: transparent;
  --c-surface-alt: rgb(255 210 63 / 0.25);
  --c-page: transparent;
  --c-line-strong: rgb(233 238 239 / 0.5);
  --d-num: var(--ink);
}
.tekening--licht {
  --c-ink: var(--ink);
  --c-ink-muted: var(--ink-muted);
  --c-brand: var(--petrol);
  --c-surface: var(--paper);
  --c-surface-alt: var(--tint);
  --c-page: var(--page);
  --c-line-strong: var(--line-strong);
}

/* koppen en lopende tekst in een sectie */
.section__head { max-width: 48rem; margin-bottom: var(--s-6); }
.section__head > :last-child { margin-bottom: 0; }
.section__head p,
.section__head + p { color: var(--fg-muted); font-size: var(--fs-lead); line-height: 1.5; }
.section > :last-child { margin-bottom: 0; }
.prose > * { max-width: var(--measure); }
.prose > h2 { max-width: 20ch; margin-bottom: var(--s-5); }
.prose h3 { margin-top: var(--s-6); }
.prose > .table-wrap,
.prose > .split,
.prose > .tekening,
.prose > .ruler,
.prose > .faq { max-width: none; }
:where(.section) :where(ul, ol):not([class]) { padding-left: 1.25em; }
:where(.section) :where(ul, ol):not([class]) > li + li { margin-top: var(--s-2); }
.section > .table-wrap + p,
.section > .grens + p,
.section > .notitie + p { margin-top: var(--s-5); }
.section > .grens,
.section > .notitie,
.section > .panel,
.section > .tekening,
.section > .table-wrap,
.section > .spec-lijst { margin-bottom: var(--s-5); }
.section > :last-child { margin-bottom: 0; }

/* kolommen */
.split { display: grid; gap: var(--s-6); }
.split > * { min-width: 0; }
.split > div > :last-child { margin-bottom: 0; }
:where(.split) h2 { font-size: var(--fs-h2-small); }
.split .lead { color: var(--fg-muted); }
@media (min-width: 60em) {
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--form { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .split--even:not(:has(> div > :not(.panel))) { align-items: stretch; column-gap: var(--s-6); }
  .split--even:not(:has(> div > :not(.panel))) > div > .panel { height: 100%; }
}

/* ---------------------------------------------------------------
   4. Servicebalk, header en menu
   --------------------------------------------------------------- */
.site-top {
  background: var(--ink);
  color: var(--footer-ink);
  font-size: var(--fs-small);
  line-height: 1.3;
}
.site-top__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  min-height: 2.75rem;
}
.site-top a { color: var(--white); display: inline-flex; align-items: center; min-height: var(--tap); }
.site-top__meta { display: none; }
@media (min-width: 64em) {
  .site-top__meta { display: block; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--petrol);
  color: var(--white);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.site-header.is-stuck { background: var(--petrol-d); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), 0 8px 24px rgb(6 42 50 / 0.3); }
/* home: transparant over de heldfoto zolang je bovenaan staat (alleen met JS) */
html:not(.js-off) .tpl-home .site-header:not(.is-stuck) { background: transparent; }
.nav-open .site-header,
html:not(.js-off) .tpl-home.nav-open .site-header { background: var(--petrol-dd); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--white);
  text-decoration: none;
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  line-height: 1;
}
.brand:hover { text-decoration: none; }
.brand__5g { color: var(--signal); }
.brand__tld { font-weight: 500; color: var(--on-petrol); }

.site-nav__toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-4);
  border: 2px solid var(--white);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.site-nav__toggle .icon--close { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon--open { display: none; }
.site-nav__toggle[aria-expanded="true"] .icon--close { display: block; }

.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  background: var(--petrol-dd);
  color: var(--white);
  box-shadow: var(--shadow-raised);
}
.site-nav.is-open { display: block; }
.js-off .site-nav { display: block; position: static; box-shadow: none; }
.js-off .site-nav__toggle { display: none; }
.js-off .site-header__inner { flex-wrap: wrap; }
.js-off .site-nav { flex-basis: 100%; }

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: var(--s-2) var(--gutter) var(--s-4);
}
.site-nav__list li { max-width: none; border-bottom: 1px solid rgb(255 255 255 / 0.14); }
.site-nav__list a,
.site-nav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  text-decoration: none;
  font: inherit;
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.625rem;
  text-align: left;
  cursor: pointer;
}
.site-nav__list a[aria-current="page"] { color: var(--signal); }
.site-nav__subtoggle .icon { width: 1.125em; height: 1.125em; }
.site-nav__subtoggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__sub {
  display: none;
  list-style: none;
  margin: 0 0 var(--s-3);
  padding: 0 0 0 var(--s-4);
  border-left: 3px solid var(--signal);
}
.site-nav__item--sub.is-open > .site-nav__sub,
.js-off .site-nav__sub { display: block; }
.site-nav__sub li { border-bottom: 0; }
.site-nav__sub a { font-size: 1.25rem; font-weight: 700; min-height: var(--tap); }
.site-nav__item--sub:has(> a) { display: flex; flex-wrap: wrap; }
.site-nav__item--sub > a { flex: 1; width: auto; }
.site-nav__subtoggle--icon { width: var(--tap); justify-content: center; }
.site-nav__item--sub > .site-nav__sub { flex-basis: 100%; }
.site-nav__phone {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--gutter) var(--s-6);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.375rem;
}
.site-nav__phone a { color: var(--white); display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; }

@media (min-width: 64em) {
  .brand { font-size: 1.875rem; }
  .site-nav__toggle,
  .js-off .site-nav__toggle { display: none; }
  .site-nav,
  .js-off .site-nav {
    display: flex;
    position: static;
    flex-basis: auto;
    align-items: center;
    margin-left: auto;
    gap: var(--s-5);
    max-height: none;
    overflow: visible;
    background: none;
    box-shadow: none;
  }
  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding: 0;
  }
  .site-nav__list > li { border: 0; }
  .site-nav__list a,
  .site-nav__subtoggle {
    width: auto;
    min-height: var(--tap);
    padding: 0 var(--s-3);
    font-size: 1.0625rem;
    font-weight: 700;
    font-stretch: 90%;
    border-radius: var(--r-sm);
  }
  .site-nav__subtoggle { gap: var(--s-1); }
  .site-nav__list a:hover,
  .site-nav__subtoggle:hover { text-decoration: underline; text-underline-offset: 0.3em; }
  .site-nav__list a[aria-current="page"],
  .is-current-parent > .site-nav__subtoggle {
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 4px;
    text-underline-offset: 0.45em;
  }
  /* "Adres nakijken" als gele knop in de kop */
  .site-nav__list > li > a[href$="/locatiecheck/"] {
    margin-left: var(--s-2);
    padding: 0 var(--s-4);
    border-radius: var(--r-pill);
    background: var(--signal);
    color: var(--ink);
  }
  .site-nav__list > li > a[href$="/locatiecheck/"]:hover { background: var(--signal-l); text-decoration: none; }
  .site-nav__list > li > a[href$="/locatiecheck/"][aria-current="page"] { text-decoration: none; box-shadow: inset 0 -4px 0 var(--ink); }
  .site-nav__item--sub { position: relative; }
  .site-nav__item--sub:has(> a) { flex-wrap: nowrap; }
  .site-nav__subtoggle--icon { width: auto; padding: 0 var(--s-1); }
  .site-nav__sub,
  .js-off .site-nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    margin: var(--s-1) 0 0;
    padding: var(--s-2);
    border: 0;
    border-top: 4px solid var(--signal);
    background: var(--paper);
    border-radius: 0 0 var(--r-md) var(--r-md);
    box-shadow: var(--shadow-raised);
  }
  .site-nav__sub a { display: flex; width: 100%; padding: 0 var(--s-3); white-space: nowrap; color: var(--ink); font-size: 1.0625rem; font-stretch: 90%; }
  .site-nav__sub a[aria-current="page"] { color: var(--petrol); }
  .site-nav__item--sub.is-open > .site-nav__sub,
  .js-off .site-nav__item--sub:hover > .site-nav__sub,
  .js-off .site-nav__item--sub:focus-within > .site-nav__sub { display: block; }
  .site-nav__phone { padding: 0; white-space: nowrap; font-size: 1.125rem; font-stretch: 85%; }
  .site-nav__phone .icon { width: 1.125rem; height: 1.125rem; }
  /* Zes items plus telefoon (SEO-ronde, "Zo werkt het" erbij): tussen 64em en 80em smaller zetten,
     zodat geen label over twee regels breekt. Vanaf 80em weer de gewone maat. */
  .site-nav__list > li > a,
  .site-nav__list > li > .site-nav__subtoggle { white-space: nowrap; }
  .site-nav { gap: var(--s-3); }
  .site-nav__list > li > a,
  .site-nav__list > li > .site-nav__subtoggle:not(.site-nav__subtoggle--icon) { padding: 0 var(--s-2); font-stretch: 80%; }
  .site-nav__list > li > a[href$="/locatiecheck/"] { padding: 0 var(--s-3); }
}
@media (min-width: 80em) {
  .site-nav { gap: var(--s-5); }
  .site-nav__list > li > a,
  .site-nav__list > li > .site-nav__subtoggle:not(.site-nav__subtoggle--icon) { padding: 0 var(--s-3); font-stretch: 90%; }
  .site-nav__list > li > a[href$="/locatiecheck/"] { padding: 0 var(--s-4); }
}

/* ---------------------------------------------------------------
   5. Knoppen en links
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: var(--s-2) var(--s-5);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 800;
  font-stretch: 90%;
  font-size: 1.0625rem;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn .arr { transition: transform 0.15s; }
.btn:hover .arr { transform: translateX(3px); }
.btn--ink,
.btn--primary { background: var(--ink); color: var(--white); }
.btn--ink:hover,
.btn--primary:hover { background: #000; }
.btn--signal,
:where(.toon-petrol, .toon-inkt, .hero) .btn--primary { background: var(--signal); color: var(--ink); }
.btn--signal:hover,
:where(.toon-petrol, .toon-inkt, .hero) .btn--primary:hover { background: var(--signal-l); }
.btn--secondary {
  background: transparent;
  color: var(--fg, var(--ink));
  border-color: currentColor;
}
.btn--secondary:hover { background: var(--fg, var(--ink)); color: var(--bg, var(--white)); }
.btn--small { min-height: var(--tap); padding-inline: var(--s-4); font-size: 1rem; }
.btn--block { width: 100%; }
@media (min-width: 40em) {
  .btn--block { width: auto; }
}

.link-chevron {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  font-weight: 800;
  font-stretch: 90%;
  text-underline-offset: 0.22em;
}
.link-chevron::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border: solid currentColor;
  border-width: 2.5px 2.5px 0 0;
  transform: rotate(45deg);
  transition: transform 0.15s;
}
.link-chevron:hover::after { transform: translateX(3px) rotate(45deg); }

/* ---------------------------------------------------------------
   6. Held, adresbalk en cijferstrook
   --------------------------------------------------------------- */
.hero {
  --fg: var(--white);
  --fg-muted: var(--on-petrol);
  --link: var(--white);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--petrol);
  color: var(--white);
}
.hero a:not(.btn) { color: var(--white); }
/* De foto kleurt petrol mee: multiply op het <picture> zelf (een z-index maakt anders een eigen laag). */
.hero__photo { position: absolute; inset: 0; z-index: -1; mix-blend-mode: multiply; }
.hero__photo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 78% 100%;
  filter: grayscale(1) contrast(1.2) brightness(1.18);
}
/* zonder foto: lichte millimeterlijnen, als een tekenvel */
.hero--grid {
  background-image:
    linear-gradient(rgb(255 255 255 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.055) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: -1px -1px;
}
.hero__body {
  display: grid;
  gap: var(--s-5);
  padding-block: clamp(2rem, 1.2rem + 3.5vw, 4.5rem) clamp(2rem, 1rem + 3vw, 3.5rem);
}
.hero__text { min-width: 0; }
.hero__title {
  margin: 0;
  max-width: 16ch;
  font-size: var(--fs-hero);
  font-stretch: var(--wdth-hero);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.01em;
  word-spacing: 0.03em;
  overflow-wrap: break-word;
  hyphens: manual;
}
.hero__title mark { background: none; color: var(--signal); }
.hero__sub {
  display: block;
  margin-top: 0.3em;
  font-size: max(0.4em, 1.375rem);
  font-stretch: 75%;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: 0;
  color: var(--signal);
}
.hero__side { display: grid; gap: var(--s-5); align-content: end; }
.hero__lead {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-petrol);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }

/* home: reuzenkop, foto onder de transparante kop */
.hero--home { margin-top: calc(-1 * var(--header-h)); }
.hero--home .hero__body { padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 5vw, 6rem)); }
.hero--home .hero__title { max-width: none; font-size: var(--fs-hero-home); line-height: 0.84; }
.hero--home .hero__sub { font-size: max(0.34em, 1.5rem); margin-top: 0.22em; }

/* kruimelpad */
.kruimel { font-size: var(--fs-small); margin-bottom: var(--s-4); }
.kruimel ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--s-2); }
.kruimel li { display: flex; align-items: center; gap: var(--s-2); }
.kruimel li + li::before { content: "/"; color: var(--on-petrol); }
.kruimel a { color: var(--white); display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
.kruimel [aria-current] { color: var(--on-petrol); }

/* tekening in de held (optioneel, veld figure) */
.hero__figure { margin: 0; }
.hero__figure .tekening__legend,
.hero__figure .tekening__title { display: none; }

@media (min-width: 48em) {
  .hero__photo img { object-position: 72% 62%; }
}
@media (min-width: 60em) {
  .hero__body { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); align-items: end; column-gap: var(--s-8); }
  .hero__lead { padding-bottom: 0.4em; }
  .hero--figure .hero__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hero--figure .hero__side { grid-column: 1; }
  .hero--figure .hero__figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* gele adresbalk */
.check { background: var(--signal); color: var(--ink); }
.check__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem;
  gap: var(--s-3);
  padding-block: var(--s-5);
  align-items: end;
}
.check__label {
  grid-column: 1 / -1;
  margin: 0;
  font-weight: 800;
  font-stretch: 70%;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  line-height: 1;
}
.check__label span {
  display: block;
  margin-top: var(--s-1);
  font-weight: 500;
  font-stretch: 100%;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.check__field label { display: block; margin-bottom: var(--s-1); font-weight: 700; }
.check__input {
  width: 100%;
  min-height: 3.25rem;
  padding: 0 var(--s-4);
  border: 2px solid var(--ink);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.125rem;
}
.check__input::placeholder { color: #6b7477; }
.check__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--paper); }
.check__btn { grid-column: 1 / -1; }
.check__btn:focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px var(--paper); }
@media (min-width: 48em) {
  .check__in { grid-template-columns: minmax(14rem, 1.3fr) minmax(0, 1fr) 9rem auto; column-gap: var(--s-4); }
  .check__label { grid-column: auto; align-self: center; }
  .check__btn { grid-column: auto; padding-inline: var(--s-6); }
}

/* cijferstrook onder de held (typeplaatje) */
.plate { background: var(--page); border-bottom: 2px solid var(--ink); }
.plate__in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-5);
  margin-block: 0;
  padding-block: var(--s-5) var(--s-3);
}
.plate__in--1 { grid-template-columns: 1fr; }
.plate__in--3 > :last-child { grid-column: 1 / -1; }
.plate__item { display: grid; align-content: start; min-width: 0; }
.plate__item dt { font-size: var(--fs-small); color: var(--ink-muted); line-height: 1.3; margin-bottom: var(--s-1); }
.plate__item dd {
  margin: 0;
  font-weight: 800;
  font-stretch: 66%;
  font-size: var(--fs-num);
  line-height: 0.95;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}
.plate__item dd small { font-size: var(--fs-small); font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.plate__val { white-space: nowrap; }
.plate__item:nth-child(3) dd { color: var(--petrol); }
.plate__note { margin-block: 0; padding-bottom: var(--s-4); font-size: var(--fs-small); color: var(--ink-muted); }
@media (min-width: 48em) {
  .plate__in,
  .plate__in--3 { grid-template-columns: repeat(3, auto) 1fr; column-gap: var(--s-8); }
  .plate__in--2 { grid-template-columns: repeat(2, auto) 1fr; }
  .plate__in--3 > :last-child { grid-column: auto; }
  .plate__in { padding-block: var(--s-5); }
  /* Noot in de gewone stroom, rechts onder de cijfers: absoluut gepositioneerd liep hij over een
     lang derde cijfer heen ("Odido, Vodafone, KPN", 1-10-2026). */
  .plate__in:has(+ .plate__note) { padding-bottom: var(--s-2); }
  .plate__note { text-align: right; }
}

/* ---------------------------------------------------------------
   7. Contentblokken
   --------------------------------------------------------------- */

/* paneel: een vlak in de toon van de sectie */
.panel {
  background: var(--panel, var(--paper));
  color: var(--fg, var(--ink));
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.panel > :last-child { margin-bottom: 0; }
.panel__title { margin-bottom: var(--s-3); }
.panel p { color: var(--fg-muted); }
.toon-inkt .panel,
.toon-geel .panel { border: 2px solid var(--num); }
.toon-inkt .panel__title { color: var(--white); }
@media (min-width: 40em) {
  .panel { padding: var(--s-6); }
}

/* notitie: neutrale uitleg ("Over snelheid") */
.notitie {
  padding: var(--s-5);
  border: 2px dashed var(--rule-strong, var(--ink));
  border-radius: var(--r-md);
}
.notitie > :last-child { margin-bottom: 0; }
.notitie .h3 { margin-bottom: var(--s-3); }
/* Op donker en geel geen stippelrand: de notitie wordt een paneel in de toon (design-review r6 §4). */
:where(.toon-petrol, .toon-inkt, .toon-geel) .notitie {
  background: var(--panel);
  border-style: solid;
  border-color: transparent;
}
:where(.toon-inkt, .toon-geel) .notitie { border-color: var(--num); }
.toon-inkt .notitie .h3 { color: var(--white); }
@media (min-width: 40em) {
  :where(.toon-petrol, .toon-inkt, .toon-geel) .notitie { padding: var(--s-6); }
}

/* grens: "Wat 5G niet kan", op inkt tussen afzetlint */
.grens { display: grid; gap: var(--s-5); }
.grens .grens__title {
  margin: 0;
  font-size: var(--fs-h2);
  font-stretch: var(--wdth-display);
  line-height: 0.95;
  color: var(--fg);
}
.grens ul,
.grens__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-5); }
.grens li { max-width: 40rem; color: var(--fg-muted); }
.grens li strong {
  display: block;
  margin-bottom: var(--s-1);
  color: var(--num);
  font-size: 1.25rem;
  font-stretch: 85%;
  line-height: 1.2;
}
.grens > p { color: var(--fg-muted); }
.grens > p:last-child { margin-bottom: 0; }
.split .grens .grens__title { font-size: var(--fs-h2-small); }
/* grens op een lichte band (zeldzaam): geel-zwart lint links */
:where(.toon-grijs, .toon-papier) .grens { padding-left: calc(var(--s-5) + 12px); position: relative; }
:where(.toon-grijs, .toon-papier) .grens::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 12px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 6px, var(--signal) 6px 12px);
}
:where(.toon-grijs, .toon-papier) .grens li strong { color: var(--fg); }
@media (min-width: 60em) {
  .section > .grens { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); column-gap: var(--s-8); }
  .section > .grens > :not(.grens__title) { grid-column: 2; }
  .split.toon-inkt,
  .toon-inkt .split { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}

/* tabellen: prijsbord. Mobiel compacte kaarten, breed een echte tabel. */
.table-wrap { margin: 0 0 var(--s-5); }
.table-wrap:last-child { margin-bottom: 0; }
.prijs-tabel { width: 100%; border-collapse: collapse; font-size: 1rem; }
.prijs-tabel caption {
  text-align: left;
  padding-bottom: var(--s-3);
  font-weight: 800;
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-head);
}
.prijs-tabel caption > span { display: block; font-weight: 400; font-size: 1rem; font-stretch: 100%; color: var(--fg-muted); }
.prijs-tabel thead { display: none; }
.prijs-tabel tbody { display: block; }
.prijs-tabel tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-4);
  padding-block: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
}
.prijs-tabel tbody tr:first-child { border-top: 3px solid var(--rule-strong); }
.prijs-tabel th,
.prijs-tabel td { display: block; padding: 0; text-align: left; }
.prijs-tabel tbody th {
  grid-column: 1;
  font-weight: 800;
  font-stretch: 78%;
  font-size: 1.3125rem;
  line-height: 1.15;
}
.prijs-tabel tbody th small {
  display: block;
  margin-top: var(--s-1);
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fg-muted);
}
.prijs-tabel td { grid-column: 1 / -1; margin-top: 2px; line-height: 1.45; }
.prijs-tabel td::before { content: attr(data-label) ": "; color: var(--fg-muted); }
.prijs-tabel td:not([data-label])::before { content: none; }
.prijs-tabel td:empty { display: none; }
/* eerste bedrag in de rij: groot, rechts naast de naam */
.prijs-tabel .prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs) {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  text-align: right;
  font-weight: 800;
  font-stretch: 65%;
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  line-height: 0.9;
  white-space: nowrap;
}
.prijs-tabel .prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs)::before { content: none; }
/* G2: eenheid in een bedrag klein ("€ 199 <small>eenmalig</small>"), ook binnen de grote bedragen */
.prijs-tabel .prijs-tabel__prijs small { font-size: 1rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.prijs-tabel__ja { font-weight: 700; }
.prijs-tabel__nee { color: var(--fg-muted); }
.prijs-tabel__prijsrij td { font-weight: 700; }
.prijs-tabel tr.is-advies { box-shadow: inset 0 3px 0 var(--signal); }
.prijs-tabel tbody tr.is-advies:first-child { border-top-color: var(--signal); box-shadow: none; }
.table-note { margin: var(--s-4) 0 0; font-size: var(--fs-small); color: var(--fg-muted); max-width: 48rem; }
/* [stand blok="ja"]: datum van de prijzen onder een tabel of sectie */
.stand { margin: var(--s-3) 0 0; font-size: var(--fs-small); color: var(--fg-muted); }

@media (min-width: 48em) {
  .table-wrap { overflow-x: auto; }
  .prijs-tabel thead { display: table-header-group; }
  .prijs-tabel tbody { display: table-row-group; }
  .prijs-tabel tr { display: table-row; padding: 0; }
  .prijs-tabel th,
  .prijs-tabel td {
    display: table-cell;
    padding: var(--s-4) var(--s-4) var(--s-4) 0;
    vertical-align: middle;
    border-top: 1px solid var(--rule);
  }
  .prijs-tabel th:last-child,
  .prijs-tabel td:last-child { padding-right: 0; }
  .prijs-tabel td { margin: 0; }
  .prijs-tabel td::before { content: none; }
  .prijs-tabel td:empty { display: table-cell; }
  .prijs-tabel thead th {
    padding-block: var(--s-2);
    border-top: 0;
    border-bottom: 3px solid var(--rule-strong);
    font-size: 1rem;
    font-weight: 600;
    font-stretch: 100%;
    color: var(--fg-muted);
    vertical-align: bottom;
    white-space: nowrap;
  }
  .prijs-tabel tbody tr:first-child > * { border-top: 0; }
  .prijs-tabel tbody tr,
  .prijs-tabel tbody tr:first-child { border-top: 0; }
  .prijs-tabel tbody th { font-size: 1.25rem; min-width: 12rem; }
  .prijs-tabel .num { text-align: right; white-space: nowrap; }
  .prijs-tabel .prijs-tabel__prijs,
  .prijs-tabel .prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs) {
    font-weight: 800;
    font-stretch: 65%;
    font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem);
    line-height: 1;
    text-align: right;
  }
  .prijs-tabel tr.is-advies { box-shadow: none; }
  .prijs-tabel tr.is-advies > * { background: var(--signal-tint); }
  .toon-petrol .prijs-tabel tr.is-advies > *,
  .toon-inkt .prijs-tabel tr.is-advies > * { background: rgb(255 210 63 / 0.14); }
  .prijs-tabel tr.is-advies > :first-child { box-shadow: inset 6px 0 0 var(--signal); padding-left: var(--s-5); }
}

/* gekantelde vergelijking (producten als kolommen): ook op mobiel een tabel, horizontaal scrollen
   met de eerste kolom vast. De converter zet .table-wrap--matrix en .prijs-tabel--matrix. */
/* De wrap loopt tot de schermrand; links geen padding, want de vaste eerste kolom heeft zelf de
   gootbreedte als padding. Zo staat de eerste kolom gelijk met de rest van de pagina. */
.table-wrap--matrix {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: 0 var(--gutter);
  overscroll-behavior-x: contain;
}
.prijs-tabel--matrix { width: auto; min-width: 100%; }
.prijs-tabel--matrix thead { display: table-header-group; }
.prijs-tabel--matrix tbody { display: table-row-group; }
.prijs-tabel--matrix tr { display: table-row; padding: 0; border: 0; }
.prijs-tabel--matrix th,
.prijs-tabel--matrix td {
  display: table-cell;
  min-width: 10.5rem;
  padding: var(--s-3) var(--s-4) var(--s-3) 0;
  vertical-align: top;
  border-top: 1px solid var(--rule);
  line-height: 1.4;
}
.prijs-tabel--matrix td { margin: 0; }
.prijs-tabel--matrix td::before { content: none; }
.prijs-tabel--matrix td:empty { display: table-cell; }
.prijs-tabel--matrix thead th {
  padding-block: var(--s-2);
  border-top: 0;
  border-bottom: 3px solid var(--rule-strong);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.125rem;
  line-height: 1.15;
  color: var(--fg);
  vertical-align: bottom;
}
.prijs-tabel--matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 7.5rem;
  max-width: 9rem;
  padding-left: var(--gutter);
  background: var(--bg);
  font-size: 1rem;
  font-stretch: 85%;
  box-shadow: 1px 0 0 var(--rule);
}
/* matrix met alleen korte bedragkolommen (vast IP per product): past zonder scrollen */
.prijs-tabel--matrix td.num { min-width: 4.75rem; }
.prijs-tabel--matrix:has(td.num) tbody th { min-width: 9rem; max-width: none; }
.prijs-tabel--matrix:has(td.num) thead th { white-space: normal; font-size: 1rem; }
.prijs-tabel--matrix thead th:first-child { position: sticky; left: 0; z-index: 1; padding-left: var(--gutter); background: var(--bg); }
.prijs-tabel--matrix tbody tr:first-child > * { border-top: 0; }
.prijs-tabel--matrix .prijs-tabel__prijs,
.prijs-tabel--matrix .prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs) {
  grid-column: auto;
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 100%;
  white-space: normal;
}
.prijs-tabel--matrix .prijs-tabel__prijsrij td { font-weight: 800; font-stretch: 80%; font-size: 1.125rem; line-height: 1.2; }
.prijs-tabel--matrix tbody .prijs-tabel__prijsrij:first-child td { font-stretch: 68%; font-size: 1.75rem; line-height: 1; }
/* Matrix met twee waardekolommen en korte cellen (≤ 4 woorden): past op 358 px zonder scrollen.
   Lange cellen breken dan af in plaats van de tabel breder te maken. */
.prijs-tabel--matrix:not(:has(tr > :nth-child(4))) { width: 100%; }
.prijs-tabel--matrix:not(:has(tr > :nth-child(4))) :is(th, td) { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.prijs-tabel--matrix:not(:has(tr > :nth-child(4))) tbody th { min-width: 6.5rem; max-width: 8.5rem; }
.prijs-tabel--matrix:not(:has(tr > :nth-child(4))) :is(th, td):last-child { padding-right: 0; }
/* Scrolt de matrix, dan een schaduw aan de kant waar nog iets staat (verdwijnt aan het eind). */
.table-wrap--matrix {
  background:
    linear-gradient(to left, var(--bg, var(--page)) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / 0.28), transparent) right center / 0.875rem 100% no-repeat scroll;
}
.table-wrap--matrix:focus-visible,
.split--even:focus-visible { outline-offset: -3px; }
@media (min-width: 48em) {
  .table-wrap--matrix { margin-inline: 0; padding-inline: 0; }
  .prijs-tabel--matrix { width: 100%; }
  .prijs-tabel--matrix tbody th,
  .prijs-tabel--matrix thead th:first-child { position: static; padding-left: 0; box-shadow: none; max-width: none; }
  .prijs-tabel--matrix tbody .prijs-tabel__prijsrij:first-child td { font-size: clamp(1.75rem, 1rem + 1.6vw, 2.75rem); }
  .prijs-tabel--matrix .prijs-tabel__prijs,
  .prijs-tabel--matrix .prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs) { font-size: 1.75rem; font-weight: 800; font-stretch: 65%; line-height: 1; }
  .prijs-tabel--matrix .num,
  .prijs-tabel--matrix .num.prijs-tabel__prijs:not(.prijs-tabel__prijs ~ .prijs-tabel__prijs) { text-align: right; }
}

/* spec-lijst: prijsbord met stippellijnen */
.spec-lijst { margin: 0 0 var(--s-5); border-top: 3px solid var(--rule-strong, var(--ink)); }
.spec-lijst div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--s-2);
  padding-block: var(--s-3);
}
.spec-lijst div::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted var(--fg-muted, var(--ink-muted));
  opacity: 0.6;
}
.spec-lijst dt { order: 0; flex: 0 1 auto; color: var(--fg, var(--ink)); }
.spec-lijst dd {
  order: 2;
  margin: 0 0 0 auto;
  font-weight: 800;
  font-stretch: 78%;
  font-size: 1.3125rem;
  line-height: 1.2;
  text-align: right;
}
.spec-lijst dd small { display: block; font-weight: 400; font-stretch: 100%; font-size: 1rem; color: var(--fg-muted); }
.spec-lijst--gestapeld div { display: block; border-bottom: 1px solid var(--rule); }
.spec-lijst--gestapeld div::after { content: none; }
.spec-lijst--gestapeld dt { color: var(--fg-muted); }
.spec-lijst--gestapeld dd { text-align: left; font-size: 1.1875rem; }
.spec-titel { margin: var(--s-6) 0 var(--s-3); }
.panel > .spec-titel:first-child,
.stack > .spec-titel:first-child,
.split > div > .spec-titel:first-child { margin-top: 0; }
.spec-lijst div.spec-lijst__totaal { margin-top: var(--s-2); border-top: 2px solid var(--rule-strong, var(--ink)); }
.spec-lijst__totaal dt { font-weight: 800; }
.spec-lijst__totaal dd { font-size: var(--fs-num); font-stretch: 65%; line-height: 0.95; color: var(--num); }
.spec-lijst div.spec-lijst__totaal::after { opacity: 0; }

/* tijdlijn als meetlint (template-parts/diagram-tijdlijn-glasvezel.php) */
.ruler { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.ruler__scale,
.ruler__track { position: relative; }
.ruler__scale {
  height: 2.25rem;
  border-bottom: 2px solid var(--fg);
  font-weight: 700;
  font-stretch: 75%;
  font-size: 1rem;
  background: repeating-linear-gradient(90deg, var(--fg) 0 1px, transparent 1px calc(100% / 30)) bottom / 100% 0.5rem no-repeat;
}
.ruler__scale span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.ruler__scale .w0 { left: 0; transform: none; }
.ruler__scale .w6 { left: 20%; }
.ruler__scale .w12 { left: 40%; }
.ruler__scale .w18 { left: 60%; }
.ruler__scale .w24 { left: 80%; }
.ruler__scale .ruler__unit { left: auto; right: 0; transform: none; color: var(--num); }
.ruler__track { height: 3rem; margin-top: 1.75rem; }
.ruler__name { position: absolute; bottom: 100%; left: 0; padding-bottom: 2px; font-weight: 800; font-stretch: 75%; font-size: 1rem; }
.bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--a) / 30 * 100%);
  width: calc((var(--b) - var(--a)) / 30 * 100%);
  display: flex;
  align-items: center;
  padding-inline: var(--s-2);
  overflow: hidden;
  font-size: 1rem;
  font-stretch: 72%;
  line-height: 1.05;
}
.bar b { font-weight: 700; white-space: nowrap; overflow: hidden; }
.a0 { --a: 0; }
.a6 { --a: 6; }
.a24 { --a: 24; }
.b6 { --b: 6; }
.b24 { --b: 24; }
.b30 { --b: 30; }
.bar--live { background: var(--petrol); color: var(--white); }
.bar--backup { background: transparent; color: var(--fg); border: 3px dashed var(--num); }
.bar--wait { background: repeating-linear-gradient(-45deg, var(--line) 0 6px, var(--page) 6px 12px); color: var(--ink); }
.bar--build { background: var(--signal); color: var(--ink); }
.bar--glas { background: var(--ink); color: var(--white); }
:where(.toon-petrol) .bar--live { background: var(--petrol-dd); }
:where(.toon-petrol) .bar--wait { background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.28) 0 6px, transparent 6px 12px); color: var(--white); }
:where(.toon-petrol) .bar--glas { background: var(--white); color: var(--ink); }
:where(.toon-inkt) .bar--glas { background: var(--white); color: var(--ink); }
.ruler__note { margin-top: var(--s-5); max-width: var(--measure); color: var(--fg-muted); }
@media (min-width: 48em) {
  .ruler { grid-template-columns: 7rem 1fr; column-gap: var(--s-4); }
  .ruler__scale { grid-column: 2; }
  .ruler__track { grid-column: 1 / -1; display: grid; grid-template-columns: 7rem 1fr; column-gap: var(--s-4); margin-top: 0; height: 3.5rem; }
  .ruler__name { position: static; align-self: center; padding: 0; }
  .ruler__track .bar {
    left: calc(7rem + var(--s-4) + var(--a) / 30 * (100% - 7rem - var(--s-4)));
    width: calc((var(--b) - var(--a)) / 30 * (100% - 7rem - var(--s-4)));
  }
  .bar { font-size: 1.0625rem; padding-inline: var(--s-3); }
}

/* tekening: technische lijntekening met genummerde legenda */
.tekening { margin: 0; color: var(--fg, var(--ink)); }
.tekening svg { width: 100%; }
.tekening__title {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--fg-muted, var(--ink-muted));
}
.tekening__title span[aria-hidden] { display: none; }
.tekening__legend {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3) var(--s-5);
  counter-reset: legenda;
  font-size: 1rem;
  line-height: 1.45;
}
.tekening__legend li { display: flex; gap: var(--s-3); counter-increment: legenda; color: var(--fg-muted, var(--ink-muted)); }
.tekening__legend li::before {
  content: counter(legenda);
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
}
/* lichte tekening op een lichte band: een vel papier */
:where(.toon-grijs, .toon-papier, .section:not([class*="toon-"])) .tekening:not(.tekening--blauwdruk),
.tekening--licht {
  padding: var(--s-4);
  background: var(--sheet, var(--paper));
  border-radius: var(--r-md);
}
/* blauwdruk op petrol of inkt */
.toon-petrol .tekening__legend li::before,
.toon-inkt .tekening__legend li::before,
.tekening--blauwdruk .tekening__legend li::before { border-color: transparent; }
@media (min-width: 40em) {
  .tekening__title span[aria-hidden] { display: inline; }
  .tekening__legend { grid-template-columns: 1fr 1fr; }
  :where(.toon-grijs, .toon-papier) .tekening:not(.tekening--blauwdruk),
  .tekening--licht { padding: var(--s-5); }
}
/* Tekening als hoofdzaak van een donkere band: kop en legenda links, tekening groot rechts. */
@media (min-width: 60em) {
  .section:where(.toon-petrol, .toon-inkt):has(> .tekening:not(.tekening--groot)) {
    display: grid;
    grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 2fr);
    column-gap: var(--s-8);
    align-items: start;
  }
  .section:where(.toon-petrol, .toon-inkt):has(> .tekening:not(.tekening--groot)) > * { grid-column: 1; margin: 0 0 var(--s-5); }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) { display: contents; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > svg { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > .tekening__title { grid-column: 2; grid-row: 7; justify-content: flex-end; margin: var(--s-2) 0 0; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > .tekening__title span:first-child::after { content: " ·"; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > .tekening__legend { grid-column: 1; grid-template-columns: 1fr; margin: 0; }
  .section:where(.toon-petrol, .toon-inkt):has(> .tekening:not(.tekening--groot)) > .section__head { grid-column: 1 / -1; margin-bottom: var(--s-7); }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > svg { grid-row: 2 / span 6; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > .tekening__title { grid-row: 8; }
  .section:where(.toon-petrol, .toon-inkt) > .tekening:not(.tekening--groot) > .tekening__legend { grid-row: 2 / span 6; align-self: center; }
  .tekening--groot .tekening__legend { grid-template-columns: repeat(3, 1fr); }
  /* tekening in een kolom of op licht: legenda naast de tekening als er ruimte is */
  :where(.toon-grijs, .toon-papier) > .tekening:not(.tekening--groot) {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    column-gap: var(--s-7);
    align-items: center;
  }
  :where(.toon-grijs, .toon-papier) > .tekening:not(.tekening--groot) .tekening__title { grid-column: 1 / -1; }
  :where(.toon-grijs, .toon-papier) > .tekening:not(.tekening--groot) .tekening__legend { grid-template-columns: 1fr; margin-top: 0; }
}

/* SVG-lijnstijl: één stijl voor alle tekeningen; kleuren via --c-* (licht of blauwdruk) */
.lt-line { stroke: var(--c-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lt-line:not([fill]) { fill: none; }
.lt-thin { fill: none; stroke: var(--c-ink); stroke-width: 1.25; stroke-linecap: round; }
.lt-fill { fill: var(--c-page); }
.lt-glass { fill: var(--c-surface-alt); }
.lt-signal { fill: none; stroke: var(--c-brand); stroke-width: 2.5; stroke-linecap: round; }
.lt-fiber { fill: none; stroke: var(--c-brand); stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.lt-cable { fill: none; stroke: var(--c-brand); stroke-width: 2.5; stroke-linejoin: round; }
.lt-ground { fill: none; stroke: var(--c-ink); stroke-width: 2; }
.lt-hatch { stroke: var(--c-ink-muted); stroke-width: 1.1; }
.lt-link { fill: none; stroke: var(--c-brand); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
.lt-device { fill: var(--c-surface); stroke: var(--c-ink); stroke-width: 2; stroke-linejoin: round; }
.lt-accent { fill: var(--c-signal); stroke: var(--d-num); stroke-width: 1.5; }
.lt-num { font: 700 17px/1 var(--font); fill: var(--d-num); text-anchor: middle; dominant-baseline: central; }
.lt-label { font: 600 15px/1 var(--font); fill: var(--c-ink-muted); }
.lt-flow { fill: none; stroke: var(--c-brand); stroke-width: 3; stroke-linecap: round; }
.lt-flow-in { fill: none; stroke: var(--c-ink); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; }
.lt-stop { fill: none; stroke: var(--c-ink); stroke-width: 5; stroke-linecap: round; }
.lt-divider { stroke: var(--c-line-strong); stroke-dasharray: 4 6; }
/* callouts groeien mee zodat de cijfers op 390 leesbaar blijven */
circle.lt-accent { r: 20px; }
.lt-num { font-size: 22px; }
.tekening--groot circle.lt-accent { r: 23px; }
.tekening--groot .lt-num { font-size: 26px; }
@media (min-width: 48em) {
  circle.lt-accent { r: 16px; }
  .lt-num { font-size: 17px; }
  .tekening--groot circle.lt-accent { r: 17px; }
  .tekening--groot .lt-num { font-size: 18px; }
}

/* groot getal (blok ::getal): "€ 19" van 300 px hoog */
.getal { display: grid; gap: var(--s-5); }
.getal > * { margin: 0; min-width: 0; }
.getal__num { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.getal__bedrag {
  margin: 0;
  font-weight: 800;
  font-stretch: 62%;
  font-size: var(--fs-big);
  line-height: 0.74;
  letter-spacing: -0.04em;
  color: var(--num);
  white-space: nowrap;
}
.bedrag__eur { font-size: 0.32em; vertical-align: 1.45em; margin-right: 0.04em; letter-spacing: 0; }
.getal__per { max-width: 13rem; margin: 0; padding-bottom: 0.2rem; font-weight: 600; line-height: 1.35; color: var(--fg-muted); }
.getal__text > :last-child { margin-bottom: 0; }
.getal__text h2 { font-size: var(--fs-h2-small); }
.getal__regel { font-weight: 800; font-stretch: 85%; }
.getal__fig { border-top: 2px solid var(--rule-strong); }
.getal__fig > summary,
.uitklap > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 3.5rem;
  cursor: pointer;
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.125rem;
  list-style: none;
}
.getal__fig > summary::-webkit-details-marker,
.uitklap > summary::-webkit-details-marker { display: none; }
.getal__fig > summary::after,
.uitklap > summary::after { content: "+"; flex: none; font-size: 1.75rem; font-weight: 500; line-height: 1; }
.getal__fig[open] > summary::after,
.uitklap[open] > summary::after { content: "\2212"; }
.getal__fig .tekening { margin-block: var(--s-3) var(--s-4); padding: 0; background: none; }
.getal__fig .tekening__title { display: none; }
@media (min-width: 60em) {
  .getal { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-8); align-items: end; }
  .getal__fig { grid-column: 1 / -1; margin-top: var(--s-5); }
  .getal__fig .tekening { display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); column-gap: var(--s-7); align-items: center; }
  .getal__fig .tekening__title { grid-column: 1 / -1; }
  .getal__fig .tekening__legend { grid-template-columns: 1fr; margin-top: 0; }
}

/* uitklap (::uitklap): tweede informatie ingeklapt */
.uitklap { margin-top: var(--s-5); border-top: 2px solid var(--rule-strong); border-bottom: 1px solid var(--rule); }
.uitklap__body { padding-bottom: var(--s-5); }
.uitklap__body > :last-child { margin-bottom: 0; }

/* rekenvoorbeelden (split even met alleen panelen): op mobiel een rij die horizontaal scrolt */
.split--even:not(:has(> div > :not(.panel))) {
  grid-auto-flow: column;
  grid-auto-columns: min(86%, 22rem);
  gap: var(--s-4);
  margin-inline: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}
.split--even:not(:has(> div > :not(.panel))) > div { scroll-snap-align: start; }
.split--even:not(:has(> div > :not(.panel))) > div > .panel { height: 100%; }
@media (min-width: 60em) {
  .split--even:not(:has(> div > :not(.panel))) {
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
}

/* faq: native details */
.faq { border-top: 3px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 3.5rem;
  padding-block: var(--s-3);
  font-weight: 800;
  font-stretch: 85%;
  font-size: 1.1875rem;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 1.5rem; text-align: center; font-size: 1.75rem; font-weight: 500; line-height: 1; color: var(--num); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.faq__body { padding: 0 0 var(--s-5); color: var(--fg-muted); }
.faq__body > :last-child { margin-bottom: 0; }
@media (min-width: 60em) {
  .split:has(> .faq) { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* contactstrook: het laatste gele moment met het telefoonnummer */
.contact-strip { display: grid; gap: var(--s-5); }
.contact-strip h2 { font-size: var(--fs-h2-small); margin-bottom: var(--s-3); max-width: 18ch; }
.contact-strip p { margin-bottom: 0; color: var(--fg-muted); }
.contact-strip p + p { margin-top: var(--s-3); }
.contact-strip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.contact-strip__actions .btn { white-space: normal; max-width: 20rem; }
.contact-strip__phone {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--fg);
  font-weight: 800;
  font-stretch: 62%;
  font-size: var(--fs-tel);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.contact-strip__phone:hover { text-decoration: underline; text-decoration-thickness: 4px; }
.stack .contact-strip__phone { font-size: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.toon-geel .contact-strip__actions { order: 0; }
@media (min-width: 60em) {
  .contact-strip { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-8); align-items: center; }
  .contact-strip__actions { flex-direction: column; align-items: flex-end; }
  .contact-strip__actions .contact-strip__phone { order: -1; }
}

/* verder lezen en andere situaties: rij die op mobiel horizontaal scrolt */
.verder > h2,
.verder > .h3 { font-size: var(--fs-h2-small); font-stretch: var(--wdth-display); line-height: 0.95; margin-bottom: var(--s-5); }
.situaties__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.verder__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 17rem);
  gap: var(--s-5);
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter) var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
}
.verder__list li { max-width: none; scroll-snap-align: start; }
.situaties__list a {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  height: 100%;
  padding: var(--s-4) 0 var(--s-3);
  border-top: 3px solid var(--rule-strong);
  color: var(--fg);
  text-decoration: none;
}
.situaties__name {
  display: flex;
  justify-content: space-between;
  gap: var(--s-2);
  font-weight: 800;
  font-stretch: 75%;
  font-size: 1.375rem;
  line-height: 1.1;
}
.situaties__name::after { content: "\2192"; color: var(--num); }
.situaties__list a:hover .situaties__name { text-decoration: underline; text-underline-offset: 0.18em; }
.situaties__desc { color: var(--fg-muted); line-height: 1.45; }
.situaties__chev { display: none; }
@media (min-width: 64em) {
  .verder__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* situaties (oud blok, alleen nog als het in de copy staat) */
.situaties { display: grid; gap: var(--s-6); }
.situaties__main { display: grid; gap: var(--s-4); align-content: start; }
.situaties__main img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-md); }
.situaties__tag { display: inline-block; margin-bottom: var(--s-2); padding: 0.1em 0.5em; background: var(--signal); color: var(--ink); border-radius: var(--r-sm); font-weight: 700; }
.situaties > .situaties__list { display: grid; gap: 0; }
@media (min-width: 60em) {
  .situaties { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
}

/* stappen en keuzelijsten */
.genummerd { margin: 0 0 var(--s-5); padding: 0; list-style: none; counter-reset: stap; }
.genummerd li {
  counter-increment: stap;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--rule);
  max-width: none;
}
.genummerd li:first-child { border-top: 2px solid var(--rule-strong); }
.genummerd li::before {
  content: counter(stap);
  font-weight: 800;
  font-stretch: 62%;
  font-size: 2.25rem;
  line-height: 0.9;
  color: var(--num);
}
.panel .genummerd:last-child { margin-bottom: 0; }
.keuzelijst { list-style: none; margin: 0; padding: 0; }
.keuzelijst li { max-width: none; }
.keuzelijst li + li { border-top: 1px solid var(--rule); }
.keuzelijst--kolommen { max-width: none; }
@media (min-width: 48em) {
  .keuzelijst--kolommen { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
}

/* foto */
.foto { margin: 0; }
.foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); filter: grayscale(1) contrast(1.1); }
.foto figcaption { margin-top: var(--s-2); font-size: var(--fs-small); color: var(--fg-muted); }

/* ---------------------------------------------------------------
   8. Formulier (inc/form.php)
   --------------------------------------------------------------- */
/* Mobiel tot de schermrand: meer breedte voor de velden (design-review r6, locatiecheck). */
.panel--form {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 6px solid var(--signal);
}
@media (min-width: 40em) {
  .panel--form { margin-inline: 0; padding: var(--s-7); border-radius: var(--r-md); }
}
.form { position: relative; }
.form fieldset { margin: 0 0 var(--s-6); padding: 0; border: 0; min-width: 0; }
.form legend {
  padding: 0;
  margin-bottom: var(--s-4);
  font-weight: 800;
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-head);
}
.form legend .field__opt { font-size: 1rem; font-stretch: 100%; }
.form__row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 40em) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--pc { grid-template-columns: 10rem 8rem 1fr; }
}
.field { margin-bottom: var(--s-5); }
.field__label { display: block; font-weight: 700; margin-bottom: var(--s-1); }
.field__hint { display: block; font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--s-2); }
.field__opt { font-weight: 400; color: var(--ink-muted); }
.field__input {
  width: 100%;
  min-height: 3.25rem;
  padding: var(--s-2) var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
}
textarea.field__input { min-height: 7rem; resize: vertical; }
.field__input:hover { border-color: var(--ink); }
.field__input:focus-visible { outline: 3px solid transparent; border-color: var(--ink); box-shadow: 0 0 0 4px var(--signal); }
.field__error { margin: var(--s-2) 0 0; color: var(--error); font-weight: 700; font-size: 1rem; }
.field.is-invalid .field__input { border-color: var(--error); border-width: 3px; }
fieldset.is-invalid .keuzes { padding-left: var(--s-3); border-left: 3px solid var(--error); }
fieldset.is-invalid > .field__error { margin: 0 0 var(--s-3); }
.keuzes { display: grid; gap: var(--s-2); }
.keuze {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 3.25rem;
  padding: var(--s-3) var(--s-4);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  cursor: pointer;
}
.keuze:hover { border-color: var(--line-strong); }
.keuze:has(input:checked) { border-color: var(--petrol); background: var(--tint); }
.keuze input { width: 1.375rem; height: 1.375rem; margin: 0.1rem 0 0; flex: none; accent-color: var(--petrol); }
.keuze input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 7px var(--signal); }
.keuze span small { display: block; color: var(--ink-muted); font-size: var(--fs-small); }
@media (min-width: 40em) {
  .keuzes--2 { grid-template-columns: 1fr 1fr; }
}
.keuzes--inline { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.keuzes--inline .keuze { padding-right: var(--s-5); }
.keuze--los span small { margin-top: var(--s-1); }
.form__req { color: var(--ink-muted); margin-bottom: var(--s-6); }
.form__privacy { margin: var(--s-4) 0 0; }
.field--na-keuzes { margin-top: var(--s-5); }
.field__input--kort { max-width: 14rem; }
.form__fouten,
.form__melding {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 3px solid var(--error);
  border-radius: var(--r-md);
  background: var(--error-tint);
}
.form__melding { border-color: var(--ink); background: var(--signal-tint); }
.form__fouten:focus,
.form__melding:focus { outline: 3px solid var(--ink); box-shadow: 0 0 0 6px var(--signal); }
.form__fouten-titel { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.form__fouten ul { margin: 0; padding-left: 1.25em; }
.form__fouten a { color: var(--error); font-weight: 700; }
.form__fouten a:focus-visible { color: var(--ink); }
.form__melding p { margin: 0; font-weight: 600; }
.form__hp { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.form__meer { margin-top: var(--s-6); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.form__meer > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 3.5rem;
  padding-block: var(--s-3);
  font-weight: 800;
  font-size: var(--fs-h3);
  font-stretch: var(--wdth-head);
  cursor: pointer;
  list-style: none;
}
.form__meer > summary::-webkit-details-marker { display: none; }
.form__meer > summary::after { content: "+"; margin-left: auto; font-size: 1.75rem; font-weight: 500; line-height: 1; }
.form__meer[open] > summary::after { content: "\2212"; }
.form__meer > summary .field__opt { font-size: 1rem; font-weight: 400; font-stretch: 100%; }
.form__meer-body { padding: var(--s-2) 0 var(--s-6); }
.form__meer-body > .field__hint { margin-bottom: var(--s-5); }
.form__meer .form__row--2 { align-items: start; }
.form__backup[hidden] { display: none; }
.form__backup { margin-bottom: var(--s-5); padding-left: var(--s-4); border-left: 4px solid var(--tint); }
.form fieldset.field { margin: 0 0 var(--s-5); }
.form legend.field__label { margin-bottom: var(--s-2); font-size: var(--fs-body); font-weight: 700; font-stretch: 100%; }
.form legend.field__label .field__opt { font-size: inherit; }
fieldset.field > .field__hint { margin-top: calc(-1 * var(--s-1)); }
.field__select {
  appearance: none;
  padding-right: var(--s-7);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.875rem) 50%;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field__input--kort.field__select { max-width: 18rem; }
.section--form aside .panel { background: transparent; padding: 0; }
.section--form aside .panel + .panel { padding-top: var(--s-5); border-top: 2px solid var(--ink); }

/* ---------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------- */
.site-footer {
  background: var(--footer);
  color: var(--footer-ink);
  padding-block: var(--s-7) var(--s-5);
  font-size: 1rem;
}
.site-footer a { color: var(--white); }
.site-footer p { margin-bottom: var(--s-2); }
.site-footer__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.site-footer__brand,
.site-footer__contact { grid-column: 1 / -1; }
.site-footer h2 {
  font-size: 1.25rem;
  font-stretch: 85%;
  color: var(--white);
  margin-bottom: var(--s-1);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer a[aria-current="page"] { text-decoration-color: var(--signal); text-decoration-thickness: 3px; }
.site-footer__brand .brand { font-size: 2.5rem; }
.site-footer__brand p { max-width: 24rem; }
.site-footer__tel a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-weight: 800;
  font-stretch: 62%;
  font-size: 2.25rem;
  line-height: 1;
  text-decoration: none;
  color: var(--white);
}
.site-footer__tel a:hover { text-decoration: underline; }
.site-footer__contact p:last-child { max-width: 24rem; }
.site-footer__legal a { display: inline-flex; align-items: center; min-height: var(--tap); }
.site-footer__legal {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: var(--fs-small);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-5);
}
@media (min-width: 48em) {
  .site-footer { padding-block: var(--s-8) var(--s-6); }
  .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1fr; column-gap: var(--s-6); }
  .site-footer__brand,
  .site-footer__contact { grid-column: auto; }
  .site-footer__contact { grid-column: 4; grid-row: 1; }
}

/* ---------------------------------------------------------------
   10. Minder beweging
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
  .link-chevron:hover::after { transform: rotate(45deg); }
  .btn:hover .arr { transform: none; }
}