/*
  CBC Groep · cbcgroep.test
  Concept "Heen en terug": de pagina is één pendel. Tot het keerpunt rijdt alles naar rechts (heen), daarna naar links
  (terug); het rode pijlmerk van de oplegger wijst steeds de rijrichting aan. Het einde is de achterkant van de oplegger.

  Inhoud: 1 lettertypen · 2 tokens · 3 basis · 4 kop en routebalk · 5 knoppen en merk · 6 vertrek (hero) · 7 secties
          8 ritlijst · 9 vrachtbrief · 10 keerpunt · 11 vloot · 12 partners · 13 werken bij · 14 deuren (einde)
          15 formulieren · 16 voet · 17 vacature, privacy, 404 · 18 beweging en voorkeuren
          19 grote tekst op een smal scherm · 20 grote tekst op een groot scherm
*/

/* 1 · Lettertypen (zelf gehost, OFL; zie LICENSE.txt in elke map onder public/fonts) */
@font-face {
  font-family: 'Anybody';
  src: url('/fonts/anybody-5.3.0/anybody-latin-wdth-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-next-5.3.0/atkinson-next-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  src: url('/fonts/atkinson-next-5.3.0/atkinson-next-latin-wght-italic.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  src: url('/fonts/atkinson-mono-5.3.0/atkinson-mono-latin-wght.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

/* 2 · Tokens */
:root {
  /* Kleur: de lak van de vrachtwagen. Rood betekent alleen rijrichting en actie (pijl, knoppen, focus). */
  --trailer: #F2F1EC;      /* ondergrond: het wit van de oplegger */
  --trailer-2: #E6E4DC;    /* een tint dieper, voor vlakken op wit */
  --asfalt: #1D1D1B;       /* tekst, = het zwart van het logo */
  --nacht: #0B0F16;        /* tweede ondergrond, uit de nachtopname */
  --nacht-2: #141A23;
  --rood: #E41D1D;         /* = het logorood */
  --rood-diep: #B9141A;    /* indrukken / hover */
  --beton: #5F5E59;        /* secundaire tekst op wit, 6,2:1 */
  --beton-licht: #A8A7A0;  /* secundaire tekst op nacht, 8,0:1 */
  --deur: #FBFAF7;         /* de deuren: het lichtste wit van de site */
  --staal: #8E8D87;        /* sluitstangen en kozijn */
  --staal-donker: #56554F; /* nokken, geleiders, scharnieren en vanghaken van het deurbeslag */
  --staal-licht: #D4D3CD;  /* glans op buis en hendel */
  --lijn: rgba(29, 29, 27, 0.16);
  --lijn-licht: rgba(242, 241, 236, 0.18);

  /* Letters: Anybody (breed = livery, smal = data), Atkinson Hyperlegible Next (lezen in één oogopslag), Mono (nummers) */
  --f-display: 'Anybody', 'Arial Narrow', sans-serif;
  --f-tekst: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
  --f-data: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', monospace;

  /* Schaal: 1,25 op 360 px naar 1,5 op 1440 px: de verhouding van een europallet (1200 x 800).
     Alle leestekst staat vast (14, 17 en 24 px, zonder vw): alleen dan maken zoom en de tekstinstelling van de browser
     hem precies twee keer zo groot (WCAG 1.4.4, zie README "Verificatie"). De koppen, vanaf --s2, zijn vloeiend. */
  --s-1: 0.875rem;
  --s0: 1.0625rem;
  --s1: 1.5rem;
  --s2: clamp(1.5625rem, 1.2865rem + 1.2269vw, 2.3906rem);
  --s3: clamp(1.9531rem, 1.4089rem + 2.419vw, 3.5859rem);
  --s4: clamp(2.4414rem, 1.4622rem + 4.3519vw, 5.3789rem);
  --s5: clamp(3.0518rem, 1.3796rem + 7.432vw, 8.0684rem);
  --s6: clamp(3.4rem, 1.0521rem + 12.2783vw, 12.1025rem);

  /* Ruimte: dezelfde 1,5 vanaf 6 px */
  --r1: 0.375rem; --r2: 0.5625rem; --r3: 0.84rem; --r4: 1.27rem; --r5: 1.9rem;
  --r6: clamp(2rem, 1.4rem + 2.6vw, 2.85rem);
  --r7: clamp(2.6rem, 1.6rem + 4.4vw, 4.27rem);
  --r8: clamp(3.4rem, 1.8rem + 7vw, 6.4rem);
  --r9: clamp(4.2rem, 1.6rem + 11vw, 9.6rem);

  --marge: clamp(1rem, 0.4rem + 2.8vw, 4rem);
  --goot: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --kop-h: 4rem;

  /* Easing, uit de bewegingen van een combinatie van 40 ton */
  --e-aandocken: cubic-bezier(.16, 1, .3, 1);   /* de laatste centimeters tot de dockbuffer duren het langst */
  --e-optrekken: cubic-bezier(.65, 0, .35, 1);  /* zwaar optrekken, rustig uitrollen */
  --e-wegrijden: cubic-bezier(.7, 0, .84, 0);   /* versnellen, weg */
}
/* Grote schermen: boven de laptopbreedte (1512 px) groeit de basismaat rustig mee: 1,2 x (19,2 px) op 2560 px breed,
   met dezelfde helling verder en hoogstens 1,5 x. Alles in rem (tekst, ruimte, kopbalk, knoppen) groeit mee. Afgestemd
   op Haci's 27 inch (venster 2560 x 1358, afgeleid uit zijn screenshot): de eerdere regel (naar verhouding, tot 1,7 x)
   gaf daar 1,51 x en oogde "extreem groot" (Haci, 16 oktober 2026). Een nabootsing met aangenomen kijkafstanden (laptop
   50 cm, monitor 65 cm), geen meting bij Haci: leestekst oogt bij 1,2 x zo'n 8 % groter dan op de laptop, de herokop
   15 % (bij 1,51 x: 36 %). De hoogteterm is een bewuste rem voor brede, lage vensters (ultrabreed, niet gemaximaliseerd):
   die schalen niet verder dan dat ene 27 inch-venster bij hun hoogte (de verhouding 1,885 = 2560 / 1358 komt daarvandaan;
   het is geen model van alle schermen). In blok 20 vermenigvuldigt deze factor de lettergrootte-instelling
   van de browser, met containerqueries voor de opmaak. Deze clamp is de terugval voor browsers die dat niet kunnen:
   hij vervangt de instelling, zodat tekst daar met de instelling of met zoom minder groeit dan gevraagd (README,
   "Verificatie"). Bij de standaardletter (16 px) geven beide precies dezelfde maat. */
@media (min-width: 1513px) {
  html { font-size: clamp(100%, 11.383px + min(0.30534vw, 0.57561vh), 150%); }
}

@media (max-width: 47.99em) {
  :root { --kop-h: 3.5rem; }
}

/* 3 · Basis */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--kop-h) + 1rem);
  background: var(--nacht);
}
body {
  margin: 0;
  background: var(--trailer);
  color: var(--asfalt);
  font-family: var(--f-tekst);
  font-size: var(--s0);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 3px; }
::selection { background: var(--rood); color: var(--trailer); }

.verborgen {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: var(--marge); top: -4rem; z-index: 100;
  background: var(--rood); color: var(--trailer); padding: 0.75rem 1rem;
  font-family: var(--f-display); font-weight: 700; text-decoration: none;
  font-size: 1.1875rem; /* 19 px vet = grote tekst: trailerwit op rood (4,1:1) voldoet dan; bij 17 px niet (Codex, ronde 8) */
}
.skip:focus { top: 0.75rem; }

.raster {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--goot);
  padding-inline: var(--marge);
}

/* Koppen: Anybody. Breed en zwaar zoals de letters op de oplegger. */
.kop-groot, .kop-1, .kop-2, .kop-3 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 128%;
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.kop-1 { font-size: var(--s5); }
.kop-2 { font-size: var(--s4); font-stretch: 122%; font-weight: 780; }
.kop-3 { font-size: var(--s2); font-stretch: 112%; font-weight: 720; line-height: 1; }
.label {
  font-family: var(--f-display);
  font-stretch: 64%;
  font-weight: 650;
  font-size: var(--s-1);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
}
.data { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; white-space: nowrap; }
.lead { font-size: var(--s1); line-height: 1.42; max-width: 34ch; text-wrap: pretty; }
.tekst { max-width: 62ch; text-wrap: pretty; }
.tekst p + p { margin-top: 1em; }

/* De "leun": de buitenste koptekst blijft voor GSAP, de binnenste span krijgt de scheefstand van de velocity bus */
.leun { display: inline-block; transform-origin: 0 80%; will-change: auto; }

/* 4 · Kop en routebalk */
.kop {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--kop-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2.25rem);
  padding-inline: var(--marge);
  color: var(--asfalt);
  background: color-mix(in srgb, var(--trailer) 94%, transparent);
  border-bottom: 1px solid var(--lijn);
  transition: color .35s var(--e-optrekken), background-color .35s var(--e-optrekken), border-color .35s var(--e-optrekken);
}
@supports (backdrop-filter: blur(1px)) {
  .kop { backdrop-filter: saturate(1.2) blur(10px); }
}
.kop[data-toon='donker'] {
  color: var(--trailer);
  background: color-mix(in srgb, var(--nacht) 72%, transparent);
  border-color: var(--lijn-licht);
}
.kop__logo { display: block; width: clamp(4.3rem, 3.4rem + 2.4vw, 5.4rem); }
.kop__logo svg { width: 100%; height: auto; }
.kop__nav ul { display: flex; gap: clamp(0.9rem, 1.6vw, 1.8rem); list-style: none; }
.kop__nav a {
  font-family: var(--f-display); font-stretch: 86%; font-weight: 640; font-size: 0.9375rem;
  text-decoration: none; letter-spacing: 0.01em; padding-block: 0.6rem;
}
.kop__nav a:hover, .kop__nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.knop.kop__bel { min-height: 2.6rem; font-size: 1.1875rem; padding-inline: 1rem; } /* 19 px vet = grote tekst: wit op logorood (4,1:1) voldoet dan */
.kop__bel-kort { display: none; }
.kop__menu { display: none; }

.rail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  max-width: 34rem;
  justify-self: center;
  width: 100%;
  opacity: 0.92;
}
.rail__plaats { font-family: var(--f-display); font-stretch: 64%; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.rail__weg { position: relative; height: 1.5rem; }
.rail__weg::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 1px dashed currentColor; opacity: 0.45;
}
.rail__merk { position: absolute; left: 0; top: 0; height: 100%; aspect-ratio: 435.3 / 940; will-change: transform; }
.rail__merk .pijl { height: 100%; width: auto; }

@media (max-width: 74.99em) {
  .rail { visibility: hidden; }
}
@media (max-width: 63.99em) {
  .kop { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .kop__nav { display: none; }
  .kop__menu {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.9rem;
    background: transparent; border: 1.5px solid currentColor; border-radius: 0;
    font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 0.9375rem;
  }
}
@media (max-width: 29.99em) {
  .kop__bel-lang { display: none; }
  .kop__bel-kort { display: inline; }
}

.menu {
  position: fixed; inset: 0; z-index: 49;
  background: var(--nacht); color: var(--trailer);
  padding: calc(var(--kop-h) + var(--r6)) var(--marge) var(--r6);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--r6);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu ul { list-style: none; display: grid; gap: 0.25rem; }
.menu__link {
  display: block; font-family: var(--f-display); font-weight: 780; font-stretch: 118%;
  font-size: clamp(2rem, 8vw, 3.2rem); line-height: 1.05; text-decoration: none; padding-block: 0.2rem;
}
.menu__voet { display: grid; gap: 0.35rem; color: var(--beton-licht); }
.menu__voet a { color: var(--trailer); }
body.menu-open { overflow: hidden; }

/* 5 · Knoppen en het pijlmerk */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem;
  min-height: 3.25rem; padding: 0 1.4rem;
  border: 2px solid transparent; border-radius: 0;
  font-family: var(--f-display); font-stretch: 96%; font-weight: 720; font-size: 1.1875rem; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--e-optrekken), color .2s var(--e-optrekken), border-color .2s var(--e-optrekken);
}
.knop--rood { background: var(--rood); color: var(--trailer); }
.knop--rood:hover { background: var(--rood-diep); text-decoration: none; }
.knop--lijn { border-color: currentColor; background: transparent; }
.knop--lijn:hover { background: color-mix(in srgb, currentColor 12%, transparent); text-decoration: none; }
.knop__pijl { width: 0.62em; height: auto; transition: transform .35s var(--e-aandocken); }
.knop:hover .knop__pijl { transform: translateX(4px); }
.knop .pijl { height: 1.15em; width: auto; }
.knop--rood .pijl { --merk-rood: currentColor; } /* op een rode knop valt de rode plaat weg: daar het hele merk in de tekstkleur (wit) */

/* Het merk wijst standaard naar links (naar de cabine, zoals op de linkerzijde van de oplegger). */
.pijl { overflow: visible; color: inherit; } /* de zwarte plaat volgt de tekstkleur, net als "groep" in het logo: zwart op licht, wit op donker */
.pijl--rechts { scale: -1 1; }
.pijl--licht { color: var(--trailer); }
.pijl__rood, .pijl__zwart { will-change: auto; }

/* 6 · Vertrek (hero) */
.vertrek {
  position: relative;
  min-height: 100svh;
  background: var(--nacht);
  color: var(--trailer);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--goot);
  padding-inline: var(--marge);
  isolation: isolate;
}
.vertrek__tekst {
  grid-column: 1 / span 7;
  align-self: end; /* ook op grote schermen onderaan, zoals op de laptop (Haci, 17 oktober 2026, na een proef met centreren) */
  padding-top: calc(var(--kop-h) + var(--r8));
  padding-bottom: var(--r8);
  display: grid; gap: var(--r5);
  position: relative; z-index: 2;
}
.vertrek__titel { display: grid; gap: var(--r4); }
.vertrek__kicker {
  font-family: var(--f-display); font-stretch: 70%; font-weight: 640; font-size: var(--s1);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; color: var(--beton-licht);
  max-width: 24ch;
}
.vertrek__groot {
  font-family: var(--f-display); font-weight: 820; font-stretch: 115%;
  font-size: clamp(2.2rem, 0.8rem + 3.8vw, 4.8rem); line-height: 0.98; letter-spacing: -0.02em;
  text-wrap: balance;
  margin-left: -0.04em;
}
.vertrek__groot .punt { color: var(--rood); }
.vertrek__lead { max-width: 36ch; color: color-mix(in srgb, var(--trailer) 88%, var(--nacht)); }
.vertrek__acties { display: flex; flex-wrap: wrap; gap: var(--r3); }
.vertrek__feiten {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; padding-top: var(--r3);
  border-top: 1px solid var(--lijn-licht); max-width: 46rem;
}
.vertrek__feiten div { display: grid; gap: 0.1rem; }
.vertrek__feiten dt { color: var(--beton-licht); }
.vertrek__feiten dd { font-weight: 600; }

.vertrek__beeld {
  grid-column: 8 / -1;
  margin-right: calc(-1 * var(--marge));
  position: relative;
  min-height: 100svh;
  background: #05070a url('/media/nacht-poster-960.jpg') center / cover no-repeat;
  overflow: hidden;
}
.vertrek__video, .vertrek__gl {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.vertrek__gl { opacity: 0; transition: opacity .4s linear; pointer-events: none; }
.vertrek__gl.is-aan { opacity: 1; }
.vertrek__beeld figcaption {
  position: absolute; left: var(--r4); right: 5.5rem; bottom: var(--r4);
  font-size: var(--s-1); color: var(--beton-licht); line-height: 1.35; z-index: 2;
}
.video-knop {
  position: absolute; right: var(--r3); bottom: var(--r3); z-index: 3;
  min-width: 2.9rem; min-height: 2.9rem; padding: 0 0.85rem;
  background: rgba(11, 15, 22, 0.72); color: var(--trailer);
  border: 1px solid var(--lijn-licht); border-radius: 0;
  font-family: var(--f-display); font-stretch: 70%; font-weight: 650; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.video-knop:hover { background: rgba(11, 15, 22, 0.9); }
.video-knop[hidden] { display: none; }

@media (max-width: 63.99em) {
  .vertrek { min-height: 0; }
  .vertrek__tekst { grid-column: 1 / -1; padding-top: calc(var(--kop-h) + var(--r7)); padding-bottom: var(--r7); }
  /* justify-self: stretch, anders rekent de browser bij een lage viewport (liggende telefoon, ingezoomde laptop) de
     breedte terug uit max-height en aspect-ratio: dan werd het beeld een smalle strook en kreeg het bijschrift bij
     400 % zoom maar 43 px (gemeten met _tools/grotetekst.mjs --wcag) */
  .vertrek__beeld {
    grid-column: 1 / -1; margin-inline: calc(-1 * var(--marge)); min-height: 0;
    aspect-ratio: 4 / 5; max-height: 82svh; width: auto; justify-self: stretch;
    background-image: url('/media/nacht-poster-720.jpg');
  }
  .vertrek__beeld figcaption { left: var(--marge); }
}

/* 7 · Secties */
.sectie { position: relative; padding-block: var(--r9); }
.sectie--wit { background: var(--trailer); color: var(--asfalt); }
.sectie__kop { row-gap: var(--r5); margin-bottom: var(--r8); }
.sectie__kop > * { grid-column: 1 / span 8; }
.sectie__intro { grid-column: 1 / span 6; }
[data-richting='terug'] .sectie__kop > * { grid-column: 5 / -1; }
[data-richting='terug'] .sectie__intro { grid-column: 7 / -1; }

.stempel { display: inline-flex; align-items: center; gap: 0.7rem; }
.stempel__nr {
  font-family: var(--f-data); font-weight: 700; font-size: 0.8125rem; line-height: 1;
  background: var(--asfalt); color: var(--trailer); padding: 0.35rem 0.45rem 0.3rem;
}
.stempel .pijl { height: 1.05rem; width: auto; }
[data-toon='donker'] .stempel__nr, .donker .stempel__nr { background: var(--trailer); color: var(--nacht); }

@media (max-width: 63.99em) {
  .sectie__kop > *, .sectie__intro,
  [data-richting='terug'] .sectie__kop > *, [data-richting='terug'] .sectie__intro { grid-column: 1 / -1; }
}

/* 8 · Ritlijst (wat we rijden) */
.ritlijst { list-style: none; border-top: 2px solid var(--asfalt); }
.rit {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.45fr) minmax(0, 1fr) 2.75rem;
  column-gap: var(--goot);
  align-items: baseline;
  padding-block: var(--r6);
  border-bottom: 1px solid var(--lijn);
}
.rit__nr { font-family: var(--f-data); font-weight: 600; color: var(--beton); font-size: var(--s0); }
.rit__titel { font-family: var(--f-display); font-weight: 760; font-stretch: 118%; font-size: var(--s3); line-height: 0.95; letter-spacing: -0.01em; } /* alle diensten even groot (Haci, 15 oktober 2026) */
.rit__link { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.rit__link::after { content: ''; position: absolute; inset: 0; }
.rit:hover .rit__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.rit:focus-within { outline: 3px solid var(--rood); outline-offset: 3px; }
.diensten__vervolg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--r5); margin-top: var(--r6); }
.diensten__vervolg .tekst { max-width: 52ch; }
.sectie__kop .leun, .deuren__inleiding .leun { max-width: 100%; overflow-wrap: anywhere; }
.deuren__inleiding > * { min-width: 0; }
.rit__tekst { max-width: 46ch; color: var(--asfalt); }
.rit__pijl { justify-self: end; align-self: center; }
.rit__pijl .pijl { height: 2.6rem; width: auto; transition: translate .5s var(--e-aandocken); }
.rit:hover .rit__pijl .pijl { translate: 6px 0; }
/* Grote schermen: titel en omschrijving houden hun laptopbreedte (45 en 31 rem, zoals op 1512 px); de extra breedte gaat
   naar een lege kolom vóór de pijl. Anders stond de omschrijving op 2560 px 1300 px van zijn titel (Codex, ronde 11). */
@media (min-width: 1513px) {
  .rit { grid-template-columns: 4.5rem minmax(0, 45rem) minmax(0, 31rem) minmax(0, 1fr) 2.75rem; }
  .rit__pijl { grid-column: 5; }
}
@media (max-width: 63.99em) {
  .rit { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: var(--r3); }
  .rit__tekst { grid-column: 2; }
  .rit__pijl { display: none; }
}

/* 9 · Vrachtbrief (zo loopt een rit) */
.vrachtbrief-wrap { padding-inline: var(--marge); }
.vrachtbrief__kop {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.55rem; border-bottom: 2px solid var(--asfalt);
}
.vrachtbrief {
  list-style: none; counter-reset: vak;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--asfalt); border-top: 0;
  background: color-mix(in srgb, var(--deur) 60%, var(--trailer));
}
.vak {
  position: relative;
  padding: 2.6rem var(--r4) var(--r5);
  min-height: 17rem;
  display: grid; align-content: start; gap: var(--r3);
}
.vak + .vak { border-left: 1px solid var(--asfalt); }
.vak__nr { position: absolute; top: 0.55rem; left: 0.7rem; font-family: var(--f-data); font-weight: 700; font-size: 0.8125rem; }
.vak__label { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: var(--s2); line-height: 1; }
.vak__tekst { max-width: 30ch; }
.vrachtbrief__voet { margin-top: var(--r4); color: var(--beton); max-width: 60ch; }
@media (max-width: 74.99em) {
  .vrachtbrief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vak:nth-child(3) { border-left: 0; }
  .vak:nth-child(n+3) { border-top: 1px solid var(--asfalt); }
}
@media (max-width: 39.99em) {
  .vrachtbrief { grid-template-columns: 1fr; }
  .vak { min-height: 0; }
  .vak + .vak { border-left: 0; border-top: 1px solid var(--asfalt); }
}

/* 10 · Keerpunt */
.keerpunt { background: var(--trailer); padding-top: var(--r9); overflow: clip; }
.keerpunt__kop { align-items: center; row-gap: var(--r5); padding-bottom: var(--r8); }
.keerpunt__merk { grid-column: 1 / span 3; perspective: 900px; justify-self: center; }
.keerpunt__merk .pijl { height: clamp(10rem, 6rem + 18vw, 26rem); width: auto; transform-style: preserve-3d; }
.keerpunt__titel { grid-column: 4 / -1; font-size: var(--s4); font-stretch: 120%; display: grid; gap: 0.06em; }
.keerpunt__deel { display: block; }
.keerpunt__deel--terug { padding-left: clamp(0.75rem, 6vw, 8rem); }
.keerpunt__tekst { grid-column: 4 / span 6; font-size: var(--s1); line-height: 1.42; max-width: 34ch; }
.keerpunt__band { position: relative; background: #8fa0b3 url('/media/dag-poster-1600.jpg') center / cover no-repeat; aspect-ratio: 16 / 9; max-height: 88vh; width: 100%; overflow: hidden; }
.keerpunt__band video { width: 100%; height: 100%; object-fit: cover; }
.keerpunt__band figcaption {
  position: absolute; left: var(--marge); bottom: var(--r4); right: 7rem;
  color: var(--trailer); font-size: var(--s-1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
@media (max-width: 63.99em) {
  .keerpunt__merk { grid-column: 1 / span 4; }
  .keerpunt__titel { grid-column: 5 / -1; }
  .keerpunt__tekst { grid-column: 1 / -1; }
}
@media (max-width: 47.99em) {
  .keerpunt__band { aspect-ratio: 1 / 1; background-image: url('/media/dag-poster-720.jpg'); }
  .keerpunt__merk { grid-column: 1 / -1; justify-self: start; }
  .keerpunt__merk .pijl { height: 9rem; }
  .keerpunt__titel { grid-column: 1 / -1; }
}

/* 11 · Vloot */
.vloot__specs {
  grid-column: 5 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--asfalt);
}
.vloot__specs div { padding: var(--r3) var(--r3) var(--r3) 0; border-bottom: 1px solid var(--lijn); }
.vloot__specs div + div { padding-left: var(--r3); border-left: 1px solid var(--lijn); }
.vloot__specs dt { color: var(--beton); }
.vloot__specs dd { font-family: var(--f-display); font-weight: 760; font-stretch: 110%; font-size: var(--s2); line-height: 1.05; margin-top: 0.35rem; }
.vloot__beelden {
  margin-top: var(--r8);
  display: grid; gap: var(--goot);
  padding-inline: var(--marge);
}
.vloot__rij {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: auto auto; column-gap: var(--goot);
}
.vloot__rij--detail { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.vloot__beeld {
  position: relative; margin: 0; min-width: 0;
  display: grid; grid-template-rows: subgrid; grid-row: span 2;
}
.vloot__beeld .ratio { position: relative; width: 100%; background: var(--trailer-2); }
.vloot__beeld picture { position: absolute; inset: 0; display: block; }
.vloot__beeld img { width: 100%; height: 100%; object-fit: cover; }
.vloot__beeld figcaption { margin-top: 0.6rem; font-size: var(--s-1); line-height: 1.35; color: var(--beton); }
.vloot__beeld--a .ratio { aspect-ratio: 3 / 2; }
.vloot__beeld--c .ratio { aspect-ratio: 1 / 1; }
.ratio { overflow: hidden; }
@media (max-width: 63.99em) {
  .vloot__specs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vloot__specs div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 47.99em) {
  .vloot__rij, .vloot__rij--detail { grid-template-columns: minmax(0, 1fr); gap: var(--goot); }
  .vloot__beeld { display: block; grid-row: auto; }
  .vloot__beeld--b .ratio { aspect-ratio: 3 / 4; }
  .vloot__beeld--d .ratio { aspect-ratio: 3 / 2; }
}

/* 12 · Partners */
.partners { padding-block: var(--r8) var(--r9); }
.partners__lijst {
  list-style: none; margin-inline: var(--marge);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--lijn);
}
.partners__lijst li {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 18% 14%;
  border-bottom: 1px solid var(--lijn); color: var(--asfalt);
}
.partners__lijst li + li { border-left: 1px solid var(--lijn); }
.partners__lijst svg { width: 100%; height: 100%; max-height: 4.2rem; opacity: 0.78; transition: opacity .3s var(--e-optrekken); }
.partners__lijst li:hover svg { opacity: 1; }
@media (max-width: 63.99em) {
  .partners__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .partners__lijst li:nth-child(4) { border-left: 0; }
}
@media (max-width: 29.99em) {
  .partners__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .partners__lijst li:nth-child(odd) { border-left: 0; }
  .partners__lijst li:nth-child(4) { border-left: 1px solid var(--lijn); }
}

/* 13 · Werken bij */
.werken { background: var(--nacht); color: var(--trailer); padding-block: var(--r9); }
.werken__beeld { grid-column: 1 / span 5; margin: 0; }
.werken__beeld .ratio { aspect-ratio: 4 / 5; }
.werken__beeld img { width: 100%; height: 100%; object-fit: cover; }
.werken__tekst { grid-column: 7 / -1; align-self: center; display: grid; gap: var(--r5); }
.werken__feiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--lijn-licht); }
.werken__feiten div { padding: var(--r3) var(--r3) var(--r3) 0; border-bottom: 1px solid var(--lijn-licht); }
.werken__feiten dt { color: var(--beton-licht); }
.werken__feiten dd { font-weight: 650; margin-top: 0.2rem; }
.werken__acties { display: flex; flex-wrap: wrap; gap: var(--r3); }
.werken__acties .knop { max-width: 100%; white-space: normal; text-align: center; } /* "Stel je vraag via WhatsApp" past op 320 px niet op één regel */
.werken .tekst { color: color-mix(in srgb, var(--trailer) 88%, var(--nacht)); }
@media (max-width: 63.99em) {
  .werken__beeld { grid-column: 1 / -1; margin-bottom: var(--r6); }
  .werken__beeld .ratio { aspect-ratio: 16 / 10; }
  .werken__tekst { grid-column: 1 / -1; }
}

/* 14 · De achterdeuren (einde): de achterkant van een CBC-oplegger, met dezelfde regels als op de echte deuren */
.deuren { background: var(--nacht); color: var(--trailer); padding: var(--r9) var(--marge) var(--r8); }
.deuren__inleiding { max-width: 82.5rem; margin: 0 auto var(--r7); display: grid; gap: var(--r4); }
.deuren__regel { color: color-mix(in srgb, var(--trailer) 88%, var(--nacht)); }
.deuren__kozijn {
  position: relative;
  max-width: 82.5rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0.3125rem;
  padding: 0.875rem 0.875rem 0;
  background: var(--staal);
  color: var(--asfalt);
}
.deur {
  position: relative;
  background: var(--deur);
  padding: clamp(1.5rem, 1rem + 2.6vw, 3.4rem);
  padding-bottom: clamp(2.2rem, 1.5rem + 3vw, 4rem);
  box-shadow: inset 0 0 0 0.5625rem var(--deur), inset 0 0 0 0.75rem var(--rood);
  min-width: 0;
}
/* --regel en --regel-gat: maat van de contactregels en ruimte na het pictogram; ook de openingstijden lijnen daarop uit */
.deur--links { display: grid; align-content: start; gap: var(--r6); overflow: hidden; --regel: var(--s1); --regel-gat: 0.75rem; --merk-h: clamp(7rem, 4rem + 7vw, 12rem); }
.deur__logo { width: min(19rem, 72%); }
.deur__logo svg { width: 100%; height: auto; }
.deur__regels { list-style: none; display: grid; gap: 0.6rem; font-size: var(--regel); line-height: 1.3; }
.deur__regels li { display: flex; align-items: center; gap: var(--regel-gat); }
.deur__regels svg { flex: none; width: 1.15em; height: 1.15em; color: var(--rood); }
.deur__regels a { text-decoration: none; }
.deur__regels a:hover { text-decoration: underline; }
.deur__regels .nummer { white-space: nowrap; } /* een telefoonnummer breekt niet midden in de cijfers */
.deur__kantoor { display: grid; gap: 0.35rem; padding-left: calc(var(--regel) * 1.15 + var(--regel-gat)); }
.deur__tijden { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0.15rem 1.4rem; }
.deur__tijden dt { color: var(--beton); }
/* het pijlmerk binnen het rode kader (dat ligt 9 tot 12 px binnen de deur), met ruimte tot de regels */
.deur__merk {
  position: absolute; left: 1.5rem; top: 50%; translate: 0 -50%;
  height: var(--merk-h); width: auto; pointer-events: none;
}
.deur--links { padding-left: calc(3rem + var(--merk-h) * 0.4631); } /* 0,4631 = breedte/hoogte van het merk */
/* Deurbeslag zoals op een echte oplegger (Haci, 23 oktober 2026; de dunne stangen met een greep die over de stang
   draaide, lazen als schuifbalk). Per stang een ronde buis met drie geleiders en een nok boven en onder. De hendel zit
   onderin, in de onderrand van de deur waar geen tekst staat: open staat hij omhoog, bij het dichtgaan valt hij dwars in
   zijn vanghaak, naar het midden van de deur. Scharnieren op de buitenranden. */
.stang {
  position: absolute; top: 0; bottom: 0; width: 1.375rem; pointer-events: none;
  background:
    linear-gradient(var(--staal-donker), var(--staal-donker)) 50% 0.55rem / 1.1rem 0.95rem no-repeat,
    linear-gradient(var(--staal-donker), var(--staal-donker)) 50% calc(100% - 0.55rem) / 1.1rem 0.95rem no-repeat,
    linear-gradient(var(--staal-donker), var(--staal-donker)) 50% 25% / 0.95rem 0.3rem no-repeat,
    linear-gradient(var(--staal-donker), var(--staal-donker)) 50% 50% / 0.95rem 0.3rem no-repeat,
    linear-gradient(var(--staal-donker), var(--staal-donker)) 50% 75% / 0.95rem 0.3rem no-repeat,
    linear-gradient(90deg, var(--staal-donker), var(--staal-licht) 42%, var(--staal) 68%, var(--staal-donker)) 50% 0 / 0.45rem 100% no-repeat;
}
.stang::after {
  content: ''; position: absolute; bottom: 2.1rem; left: 50%;
  width: 2.7rem; height: 0.5rem; border-radius: 0.25rem;
  background: linear-gradient(var(--staal-licht), var(--staal-donker));
  box-shadow: 0 0.12rem 0.2rem rgba(0, 0, 0, 0.18);
  /* de verschuiving als losse translate: anders spiegelt scale (hieronder) haar mee en hing de gespiegelde hendel 0,5rem
     naast de buis en net vóór zijn vanghaak (Codex, ronde 14) */
  transform-origin: 0.25rem 50%; translate: -0.25rem 50%; transform: rotate(var(--greep, -78deg));
  transition: transform .9s var(--e-optrekken);
}
.stang::before {
  content: ''; position: absolute; bottom: 1.6rem; left: calc(50% + 2.05rem);
  width: 0.7rem; height: 1.25rem; box-sizing: border-box;
  border: 0.18rem solid var(--staal-donker); border-radius: 0.12rem;
}
.deuren.is-dicht .stang::after { --greep: 0deg; }
.deur--links .stang--1 { display: none; } .deur--links .stang--2 { right: calc(4% - 0.46rem); }
.deur--rechts .stang--1 { left: calc(4% - 0.46rem); } .deur--rechts .stang--2 { right: calc(4% - 0.46rem); }
/* bij de stang rechts in een deur wijst de hendel naar links, het midden van de deur in */
.deur--links .stang--2::after, .deur--rechts .stang--2::after { scale: -1 1; }
.deur--links .stang--2::before, .deur--rechts .stang--2::before { left: auto; right: calc(50% + 2.05rem); }
/* scharnieren op de buitenranden (onder elkaar alleen op de deur die zijn stangen houdt) */
.deur--links::before, .deur--rechts::before {
  content: ''; position: absolute; top: 0; bottom: 0; width: 0.85rem; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, var(--staal-donker), var(--staal)) 0 8% / 100% 2.5rem no-repeat,
    linear-gradient(90deg, var(--staal-donker), var(--staal)) 0 36% / 100% 2.5rem no-repeat,
    linear-gradient(90deg, var(--staal-donker), var(--staal)) 0 64% / 100% 2.5rem no-repeat,
    linear-gradient(90deg, var(--staal-donker), var(--staal)) 0 92% / 100% 2.5rem no-repeat;
}
.deur--links::before { left: 0; }
.deur--rechts::before { right: 0; scale: -1 1; }
/* hoog contrast (Windows): de verlopen vallen weg en alleen losse vanghaken bleven staan; dan geen beslag (Codex, ronde 14) */
@media (forced-colors: active) {
  .stang, .deur--links::before, .deur--rechts::before { display: none; }
}
.deur--rechts { padding-inline: clamp(1.5rem, 1rem + 5vw, 5.5rem); }
@media (max-width: 63.99em) {
  .deuren__kozijn { grid-template-columns: 1fr; }
  .stang, .deur--links::before, .deur--rechts::before { display: none; }
  .deur--links { --merk-h: 5.5rem; padding-left: calc(2rem + var(--merk-h) * 0.4631); }
  .deur__merk { left: 1.1rem; top: 2.2rem; translate: 0 0; }
  .deur__tijden { grid-template-columns: 1fr; gap: 0; }
  .deur__tijden dd { margin-bottom: 0.4rem; }
}
/* Smalle telefoons: een slanker kozijn en een smallere deurrand, anders bleef er op 320 px maar 196 px over voor het
   formulier (Codex, ronde 7) */
@media (max-width: 29.99em) {
  .deuren__kozijn { padding: 8px 8px 0; }
  .deur { box-shadow: inset 0 0 0 6px var(--deur), inset 0 0 0 9px var(--rood); }
  .deur--rechts { padding-inline: 1.25rem; }
}
/* Op de smalste telefoons de contactregels iets kleiner, zodat het telefoonnummer naast het pijlmerk past */
@media (max-width: 22.49em) {
  .deur--links { --regel: min(var(--s1), 6.25vw); } /* naast het pijlmerk: 20 px op 320 px, het telefoonnummer (nowrap) past dan */
}

/* 15 · Formulieren in vakken, zoals een vrachtbrief */
.formulier { display: grid; gap: var(--r5); }
.formulier > * { min-width: 0; } /* anders maakt het breedste kind (de knop, nowrap) de hele kolom zo breed */
/* het aanvraagformulier in twee groepen (verplicht en ritgegevens); een fieldset is standaard min-content breed */
.formulier__groep { border: 0; margin: 0; padding: 0; min-width: 0; }
.formulier__groep legend { padding: 0; margin-bottom: 0.55rem; }
/* na een geslaagde aanvraag verbergt app.js vakken en voet; zonder deze regel wint display: grid/flex van [hidden] */
.formulier__vakken[hidden], .formulier__voet[hidden] { display: none; }
.formulier__vakken {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--asfalt);
}
.veld {
  position: relative; display: grid; align-content: start; gap: 0.25rem;
  padding: 0.55rem 0.8rem 0.6rem;
  border-right: 1px solid var(--asfalt); border-bottom: 1px solid var(--asfalt);
  background: var(--deur);
  min-width: 0;
}
.veld:nth-child(2n) { border-right: 0; }
.veld--breed { grid-column: 1 / -1; border-right: 0; }
.formulier__vakken > .veld:last-child { border-bottom: 0; }
.veld label, .veld legend, .veld__label {
  display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; align-items: baseline; /* "niet verplicht" mag naar een eigen regel */
  font-family: var(--f-display); font-stretch: 70%; font-weight: 680; font-size: 0.8125rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--asfalt);
}
.veld__nr { font-family: var(--f-data); font-weight: 700; letter-spacing: 0; color: var(--beton); }
.veld__optie { margin-left: auto; text-transform: none; letter-spacing: 0.01em; font-stretch: 90%; font-weight: 500; color: var(--beton); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 2.6rem; padding: 0.3rem 0;
  border: 0; border-bottom: 1px dashed color-mix(in srgb, var(--asfalt) 40%, transparent); background: transparent; border-radius: 0;
  font-family: var(--f-tekst); font-size: 1.0625rem; line-height: 1.4;
}
.veld textarea { min-height: 7.5rem; resize: vertical; }
.veld select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231D1D1B' stroke-width='1.6'/%3E%3C/svg%3E") right 0.2rem center / 0.75rem no-repeat; padding-right: 1.4rem; }
.veld input[type='file'] { padding: 0.55rem 0; font-size: 0.9375rem; }
.veld:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--rood); }
.veld input:focus-visible, .veld select:focus-visible, .veld textarea:focus-visible { outline: none; }
.veld--fout { box-shadow: inset 0 0 0 2px var(--rood-diep); }
.veld__fout { color: var(--rood-diep); font-size: 0.9375rem; font-weight: 600; }
.veld__hulp { color: var(--beton); font-size: 0.875rem; }
.veld--keuze { gap: 0.4rem; }
.keuzes { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0.3rem 0 0.2rem; border: 0; margin: 0; }
.keuzes legend { padding: 0; } /* zonder de standaardpadding van de browser staat "6 Rijbewijs" gelijk met de andere labels */
.keuzes label { display: inline-flex; align-items: center; gap: 0.45rem; text-transform: none; letter-spacing: 0; font-family: var(--f-tekst); font-stretch: 100%; font-size: 1.0625rem; font-weight: 500; min-height: 2.75rem; }
.keuzes input { width: 1.2rem; height: 1.2rem; min-height: 0; accent-color: var(--rood); }
.formulier__honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulier__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r3) var(--r5); }
.formulier__voet .knop { white-space: normal; text-align: center; }
.formulier__klein { font-size: 0.9375rem; color: var(--beton); max-width: 44ch; }
.melding { padding: 0.9rem 1rem; border-left: 4px solid var(--asfalt); background: var(--trailer); font-weight: 600; }
.melding--ok { border-color: #1F7A3E; }
.melding--fout { border-color: var(--rood-diep); }
.melding:empty { display: none; }
@media (max-width: 39.99em) {
  .formulier__vakken { grid-template-columns: 1fr; }
  .veld { border-right: 0; }
}
/* Op de telefoon de verzendknop over de volle breedte. Op de smalste schermen smaller gezet met de breedte-as van
   Anybody, niet kleiner: 19 px vet telt als grote tekst (contrast 3:1), bij 17 px zou trailerwit op rood met 4,13:1
   onder de vereiste 4,5:1 zakken (Codex, ronde 7) */
@media (max-width: 29.99em) {
  .formulier__voet .knop { width: 100%; }
}
@media (max-width: 22.49em) {
  .formulier__voet .knop { font-stretch: 84%; padding-inline: 1rem; }
}

/* 16 · Voet */
.voet { background: var(--nacht); color: var(--beton-licht); padding: var(--r6) var(--marge) var(--r5); font-size: 0.9375rem; border-top: 1px solid var(--lijn-licht); }
.voet__rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--r4) var(--r6); }
.voet__gegevens { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; }
.voet nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; list-style: none; }
.voet a { color: var(--trailer); }
.voet__niwo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--trailer); }
.voet__niwo svg { width: 4.4rem; height: auto; }

/* 17 · Vacature, privacy, 404 */
.pagina-kop { background: var(--nacht); color: var(--trailer); padding-top: calc(var(--kop-h) + var(--r8)); padding-bottom: var(--r8); }
.pagina-kop .raster { row-gap: var(--r5); align-items: end; }
.pagina-kop__tekst { grid-column: 1 / span 7; display: grid; gap: var(--r5); }
.pagina-kop__beeld { grid-column: 9 / -1; margin: 0; }
.pagina-kop__beeld .ratio { aspect-ratio: 4 / 5; }
.pagina-kop__beeld img { width: 100%; height: 100%; object-fit: cover; }
/* Vacaturekop op grote schermen: past de titel op één regel, dan werd het staande beeld (4:5, vier kolommen) veel hoger
   dan de tekst; onderaan uitgelijnd stond er op 2560 x 1358 623 px leegte boven de kruimel (46 % van het scherm), op
   3440 x 1350 1022 px. Daarom (Codex, ronde 11): de tekst in het midden van de rij, en boven 1512 px hetzelfde beeld
   kleiner, hoogstens 32rem breed tegen de rechterrand, zonder andere uitsnede (het CBC-logo op de cabine blijft). Leegte
   nu 20 tot 21 % op 1920, 2560 en 3440. De centrering geldt overal: zolang de tekst hoger is dan het beeld (op 1024 tot
   1512 px, nagemeten) bepaalt hij de rij en verandert er niets; op de privacy- en vacaturelijst is er geen beeld.
   De begrenzing alleen naast elkaar (ook 64em): met een grotere browserletter staat de kop tot 64em onder elkaar
   (24 px: tot 1536 px, 32 px: tot 2048 px), en daar stond de foto anders klein rechts met 662 tot 883 px leegte ernaast
   (Codex, ronde 11c, nagemeten). */
.pagina-kop__tekst { align-self: center; }
@media (min-width: 1513px) and (min-width: 64em) {
  .pagina-kop__beeld { max-width: 32rem; justify-self: end; }
}
.kruimel { display: flex; gap: 0.5rem; flex-wrap: wrap; color: var(--beton-licht); font-size: 0.9375rem; list-style: none; }
.kruimel li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.6; }
.feitenplaat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); border-top: 1px solid var(--lijn-licht); } /* min(): nooit één kolom breder dan de plaat */
.feitenplaat div { padding: var(--r3) var(--r3) var(--r3) 0; border-bottom: 1px solid var(--lijn-licht); }
.feitenplaat dt { color: var(--beton-licht); }
.feitenplaat dd { font-weight: 650; }
.vacature { padding-block: var(--r8); }
.vacature__hoofd { grid-column: 1 / span 7; display: grid; gap: var(--r7); }
.vacature__zij { grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--kop-h) + 1.5rem); display: grid; gap: var(--r4); padding: var(--r5); background: var(--deur); border: 2px solid var(--asfalt); }
.vacature h2 { margin-bottom: var(--r4); }
.lijst { list-style: none; display: grid; gap: 0.55rem; }
.lijst li { position: relative; padding-left: 1.6rem; max-width: 60ch; }
.lijst li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.8rem; height: 2px; background: var(--rood); }
.solliciteren { background: var(--trailer-2); padding-block: var(--r8); }
.solliciteren__kop { grid-column: 1 / span 4; display: grid; gap: var(--r4); align-content: start; }
.solliciteren__form { grid-column: 6 / -1; }
.vacaturelijst { list-style: none; border-top: 2px solid var(--asfalt); }
.vacaturelijst a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--goot); align-items: center; padding-block: var(--r6); border-bottom: 1px solid var(--lijn); text-decoration: none; }
.vacaturelijst a:hover .kop-3 { text-decoration: underline; text-decoration-thickness: 3px; }
.vacaturelijst .pijl { height: 2.4rem; width: auto; }
.privacy { padding-block: var(--r8); }
.privacy .tekst { grid-column: 1 / span 8; }
.privacy h2 { font-family: var(--f-display); font-weight: 760; font-stretch: 112%; font-size: var(--s2); line-height: 1.05; margin: var(--r6) 0 var(--r3); }
.privacy ul { padding-left: 1.2rem; }
.concept { border: 2px dashed var(--rood); padding: var(--r3) var(--r4); margin-bottom: var(--r5); font-weight: 600; }
.verkeerd { min-height: 100svh; background: var(--nacht); color: var(--trailer); display: grid; place-content: center; gap: var(--r5); padding: calc(var(--kop-h) + var(--r6)) var(--marge) var(--r6); text-align: left; }
.verkeerd .pijl { height: 9rem; width: auto; }
@media (max-width: 63.99em) {
  .pagina-kop__tekst, .vacature__hoofd, .solliciteren__kop, .solliciteren__form, .privacy .tekst { grid-column: 1 / -1; }
  .pagina-kop__beeld { grid-column: 1 / -1; }
  .pagina-kop__beeld .ratio { aspect-ratio: 16 / 10; }
  .vacature__zij { grid-column: 1 / -1; position: static; margin-top: var(--r6); }
  .solliciteren__form { margin-top: var(--r6); }
}

/* Transportpagina's en vragen: dezelfde typografie en kleuren als de homepage. */
.pagina-kop.dienst-kop .kop-1 { font-size: clamp(2rem, .8rem + 3.6vw, 4rem); font-stretch: 108%; line-height: 1.02; text-wrap: balance; hyphens: none; }
.dienst-kop .pagina-kop__tekst { grid-template-columns: minmax(0, 1fr); }
.dienst-kop .pagina-kop__tekst > * { min-width: 0; }
.dienst-kop .kruimel li { min-width: 0; overflow-wrap: anywhere; }
.dienst-kop .pagina-kop__beeld .ratio { aspect-ratio: 4 / 5; }
.dienst-kop figcaption { margin-top: .75rem; color: var(--beton-licht); font-size: var(--s-1); }
.dienst__acties { display: flex; flex-wrap: wrap; gap: var(--r3); }
.dienst__acties .knop { min-width: 0; max-width: 100%; white-space: normal; }
.dienst-inhoud__hoofd { grid-column: 1 / span 7; display: grid; gap: var(--r7); }
.dienst__onderdeel > .kop-3 { margin-bottom: var(--r4); }
.dienst-inhoud__zij { grid-column: 9 / -1; align-self: start; position: sticky; top: calc(var(--kop-h) + 1.5rem); display: grid; gap: var(--r4); padding: var(--r5); background: var(--deur); border: 2px solid var(--asfalt); overflow-wrap: anywhere; }
.dienst-inhoud__zij .knop { padding-inline: .85rem; }
.dienst__verwant { border-top: 1px solid var(--lijn); padding-top: var(--r4); }
.dienst__tijden { display: grid; gap: var(--r3); }
.dienst__tijden dd { font-weight: 600; }
.vragen .raster { row-gap: var(--r5); }
.vragen .kop-3 { grid-column: 1 / span 4; }
.vragen__lijst { grid-column: 6 / -1; }
.vraag { border-top: 1px solid var(--lijn); padding-block: var(--r4); }
.vraag:last-child { border-bottom: 1px solid var(--lijn); }
.vraag summary { cursor: pointer; font-weight: 700; padding-right: .5rem; }
.vraag summary::marker { color: var(--rood); }
.vraag > p { margin-top: var(--r3); }
@media (max-width: 29.99em) {
  .pagina-kop.dienst-kop .kop-1 { hyphens: manual; text-wrap: wrap; }
}
@media (max-width: 63.99em) {
  .dienst-inhoud__hoofd, .dienst-inhoud__zij, .vragen .kop-3, .vragen__lijst { grid-column: 1 / -1; }
  .dienst-inhoud__zij { position: static; margin-top: var(--r6); }
  .dienst-kop .pagina-kop__beeld .ratio { aspect-ratio: 16 / 10; }
}

/* 18 · Beweging en voorkeuren.
   Zonder JS staat alles gewoon op zijn plek. Met JS markeert app.js elementen die nog moeten binnenrijden (.is-wacht);
   bij verminderde beweging gebeurt dat nooit. */
.js .is-wacht { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .js .is-wacht { visibility: visible; }
  .leun { transform: none !important; }
}
@media (forced-colors: active) {
  .knop--rood { border-color: ButtonText; }
  .pijl { --merk-rood: Highlight; }
}
@media print {
  .kop, .vertrek__beeld, .keerpunt__band, .video-knop, .menu { display: none !important; }
  .vertrek, .werken, .deuren, .voet { background: none; color: #000; }
}

/* Routebalk: na het keerpunt draait het merk om (spiegelen via de losse scale-eigenschap, niet via transform) */
.rail__merk .pijl { transition: scale .6s var(--e-optrekken); }
.rail.is-terug .rail__merk .pijl { scale: 1 1; }

/* Smalle schermen: brede koppen iets smaller zetten zodat lange woorden (chauffeur, distributiecentra) passen,
   en rasteritems nooit breder laten worden dan hun kolom */
.raster > *, .vertrek > * { min-width: 0; }
.kop-1, .kop-2, .kop-3 { overflow-wrap: break-word; }
@media (max-width: 29.99em) {
  .kop-1 { font-stretch: 108%; font-size: clamp(2.5rem, 1.2rem + 7vw, 3.05rem); }
  .kop-2 { font-stretch: 112%; }
}

/* Subpagina's: geen routebalk (die hoort bij de pendel van de homepage), koppen passend in hun kolom */
.rail[hidden] { display: none; }
.pagina-kop .kop-1, .verkeerd .kop-1 { font-size: clamp(2.5rem, 1.1rem + 5.2vw, 5.6rem); font-stretch: 118%; }
/* ook de 404 (was --s5, tot 129 px): met hoogstens 5,6rem haalt de kop bij browserzoom tot 500 % nog 200 % (WCAG 1.4.4) */
.solliciteren__kop .kop-2 { font-size: var(--s3); font-stretch: 116%; }
/* Vanaf 64em zijn de tekstkolommen van "Werken bij" en "Solliciteren" eerst net te smal voor het langste woord van hun
   kop: op 1024 px is "Chauffeur" 476 px breed in een kolom van 468 px, "Solliciteer" 317 px in 306 px; gemeten tot 1074
   en 1094 px. Daar de breedte-as iets smaller (118 en 110 %: op 1024 px 460 en 300 px); de lettergrootte blijft gelijk.
   Tot 71em, zodat de gewone breedte-as daarna minstens 1,5 % ruimte heeft (een andere browser zet tekst nooit precies
   even breed). Boven 1512 px: blok 20 */
@media (min-width: 64em) and (max-width: 70.99em) {
  .werken .kop-2 { font-stretch: 118%; }
  .solliciteren__kop .kop-2 { font-stretch: 110%; }
}
.veld input[type='file']::file-selector-button {
  margin-right: 0.8rem; padding: 0.45rem 0.8rem; border: 1.5px solid var(--asfalt); border-radius: 0;
  background: var(--trailer); color: var(--asfalt); font-family: var(--f-display); font-stretch: 86%; font-weight: 680; cursor: pointer;
}

/* Zwakke renderer (zie app.js): effen kop zonder vervaging */
[data-zwak] .kop { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--trailer); }
[data-zwak] .kop[data-toon='donker'] { background: var(--nacht); }

/* Tot 1200 px de deuren onder elkaar: naast elkaar wordt het formulier te krap */
@media (max-width: 74.99em) {
  .deuren__kozijn { grid-template-columns: 1fr; }
  .deur--links .stang--2, .deur--links::before { display: none; }
}

/* Secties die via het menu de focus krijgen: geen ring om de hele sectie */
section[tabindex='-1']:focus { outline: none; }

/* Vlootplaat: twee woorden ("Vaste charters") moeten in een kwart passen */
.vloot__specs dd { font-size: clamp(1.45rem, 0.9rem + 1.3vw, 2.15rem); font-stretch: 104%; overflow-wrap: break-word; }

/* Privacy: lucht tussen lijstpunten en na een lijst */
.privacy li + li { margin-top: 0.6em; }
.privacy ul + p { margin-top: 1.1em; }

/* 19 · Grote tekst op een smal scherm.
   Smaller dan 20em: een telefoon van 320 px is bij gewone tekst precies 20em breed, dus hier heeft de bezoeker de tekst
   vergroot (browserinstelling op 200 %: 320 px is dan 10em) of ingezoomd (paginazoom op iOS of Android, 500 % op een
   laptop). De regel: de tekst volgt de lezer, de ruimte volgt het scherm. Lopende tekst blijft zo groot als gevraagd en
   breekt af, met afbreekstreepjes waar het woordenboek dat kan (lang="nl") en anders midden in het woord (e-mailadres);
   koppen, logo, knoppen, marges en tussenruimte rekenen in vw, zodat het langste woord ("wisselende", "Achteraan",
   "verklaring") past; de grote koppen (kop-1, kop-2) staan daarvoor op de breedte-as 100 %, het menu op 64 % (de breedte
   van de labels). Bij 20em sluiten
   marges, kopbalk en koppen aan op die van een gewone telefoon; deuren en menu krijgen hier een eigen opmaak. De koppen
   zijn zo groot gekozen dat ze bij browserzoom tot 500 % op vensters van 1024 tot 1920 px nog 200 % halen (WCAG 1.4.4).
   Controle: _tools/grotetekst.mjs */
@media (max-width: 19.99em) {
  :root {
    --marge: min(1rem, 5vw);
    --goot: min(0.75rem, 3.75vw);
    --r3: min(0.84rem, 4.2vw); --r4: min(1.27rem, 6.35vw); --r5: min(1.9rem, 9.5vw);
    --r6: min(2rem, 10vw); --r7: min(2.6rem, 13vw); --r8: min(3.4rem, 17vw); --r9: min(4.2rem, 21vw);
    --s2: min(1.5625rem, 10.5vw); --s3: min(1.9531rem, 11.5vw); --s4: min(2.4414rem, 13.5vw);
    --kop-h: max(28px, min(3.5rem, 17.5vw)); /* minstens de knoppen van 24 px plus lucht, ook bij 300 % paginazoom */
  }
  body { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 6 3 3; }
  /* geen afbreekstreepjes in koppen, knoppen, labels, nummers en adressen: die breken alleen op een spatie of een <wbr> */
  h1, h2, h3, .kop-3, .label, .knop, .data, .menu__link, .vloot__specs dd, .deur__regels, .menu__voet, a[href^='mailto:'] {
    hyphens: manual; -webkit-hyphens: manual;
  }
  .data, .knop, .deur__regels .nummer { white-space: normal; }

  /* kopbalk: logo, belknop en menuknop naast elkaar, zo hoog als op een gewone telefoon */
  .kop { column-gap: min(1rem, 4vw); }
  .kop__logo { width: min(4.3rem, 21.5vw); }
  .rail { overflow: hidden; }
  .knop.kop__bel { font-size: max(19px, min(1.1875rem, 6.5vw)); min-height: max(24px, min(2.6rem, 13vw)); padding-inline: min(1rem, 4vw); }
  .kop__menu { font-size: min(0.9375rem, 6vw); min-height: max(24px, min(2.75rem, 13.75vw)); padding: 0 min(0.9rem, 4.5vw); }
  .skip { padding: min(0.75rem, 3.75vw) min(1rem, 5vw); font-size: max(19px, min(1.1875rem, 6.5vw)); }

  /* knoppen: vouwen als het moet, maar meestal op één regel; 19 px vet blijft de ondergrens (grote tekst, 3:1) */
  /* aanraakdoelen nooit kleiner dan 24 px (WCAG 2.5.8), ook niet bij 200 % paginazoom op een telefoon (160 CSS-px breed) */
  .knop { font-size: max(19px, min(1.1875rem, 6.5vw)); min-height: max(24px, min(3.25rem, 16.25vw)); padding-inline: 0.6em; line-height: 1.15; text-align: center; }
  .formulier__voet .knop { padding-inline: 0.6em; }

  /* koppen: zo groot als past */
  .vertrek__groot { font-size: min(3.45rem, 18vw); }
  .vertrek__kicker { font-size: min(var(--s1), 9.6vw); }
  .kop-1, .pagina-kop .kop-1, .verkeerd .kop-1 { font-size: min(2.5rem, 14vw); font-stretch: 100%; }
  .kop-2, .solliciteren__kop .kop-2 { font-stretch: 100%; }
  .menu__link { font-stretch: 64%; } /* blijft 2rem: "Werkwijze" past dan ook bij 200 % tekst op 320 px */
  .vloot__specs dd { font-size: min(1.45rem, 12vw); }
  .vacature__zij .kop-3 { font-size: min(var(--s2), 9vw); }

  /* rasters die op een gewone telefoon twee kolommen hebben: één kolom */
  .rit { grid-template-columns: minmax(0, 1fr); }
  .rit__tekst { grid-column: auto; }
  .vloot__specs, .werken__feiten { grid-template-columns: minmax(0, 1fr); }
  .vloot__specs div, .vloot__specs div + div { padding-left: 0; border-left: 0; }
  .stempel { flex-wrap: wrap; }
  .lijst li { padding-left: min(1.6rem, 8vw); }
  .lijst li::before { width: min(0.8rem, 4vw); }
  .privacy ul { padding-left: min(1.2rem, 6vw); }
  .vacaturelijst .pijl { height: min(2.4rem, 12vw); }

  /* de deuren: het pijlmerk boven het logo in plaats van ernaast, zodat de regels de hele deur hebben */
  .deur { padding: min(1.5rem, 7.5vw); padding-bottom: min(2.2rem, 11vw); }
  .deur--links { padding-left: min(1.5rem, 7.5vw); }
  .deur--rechts { padding-inline: min(1.25rem, 6.25vw); }
  .deur__merk { position: static; translate: none; height: min(7.5rem, 30vw); }
  /* deurregels zo groot als past (200 % bij 200 % tekst op 320 px); het pictogram zweeft, zodat een tweede regel
     (het domein van het e-mailadres na de <wbr>, het eind van het nummer) de hele deur heeft */
  .deur--links { --regel: min(var(--s1), 12.5vw); --regel-gat: min(0.75rem, 3.75vw); }
  .deur__regels li { display: block; }
  .deur__regels svg { float: left; margin: 0.07em var(--regel-gat) 0 0; }
  .veld { padding-inline: min(0.8rem, 4vw); }

  /* grote merken en de 404 */
  .keerpunt__merk .pijl, .verkeerd .pijl { height: min(9rem, 45vw); }
  .verkeerd { justify-content: stretch; }

  /* video's: het bijschrift boven de afspeelknop, over de hele breedte */
  .video-knop { font-size: min(0.8125rem, 5vw); min-width: max(24px, min(2.9rem, 14.5vw)); min-height: max(24px, min(2.9rem, 14.5vw)); padding: 0 min(0.85rem, 4.25vw); }
  .vertrek__beeld figcaption, .keerpunt__band figcaption {
    left: var(--marge); right: var(--marge); bottom: calc(2 * var(--r3) + min(2.9rem, 14.5vw));
  }
  /* de dagopname is vierkant: bij 300 % paginazoom op een telefoon (107 CSS-px) past het bijschrift er niet meer in.
     Knop en bijschrift staan daarom onder het beeld, als gewone tekst op de lichte ondergrond (ook beter leesbaar dan
     wit over de lucht); de poster komt dan op de video zelf */
  .keerpunt__band { aspect-ratio: auto; max-height: none; overflow: visible; background: none; }
  .keerpunt__band video { aspect-ratio: 1 / 1; height: auto; background: #8fa0b3 url('/media/dag-poster-720.jpg') center / cover no-repeat; }
  .keerpunt__band .video-knop { position: static; margin: var(--r3) var(--marge) 0; } /* geen display: dan blijft [hidden] gelden zonder JS (Codex, ronde 8) */
  .keerpunt__band figcaption { position: static; padding: var(--r3) var(--marge) 0; color: var(--beton); text-shadow: none; }
}

/* 20 · Grote tekst op een groot scherm.
   Boven 1512 px vermenigvuldigt de factor van "Grote schermen" (bovenaan) de lettergrootte-instelling van de browser, in
   plaats van haar te vervangen: met tekst op 200 % (32 px) wordt de basismaat op 2560 x 1358 38,4 px in plaats van 32 px,
   en wordt alle tekst in rem dus twee keer zo groot, net als op een laptop (WCAG 1.4.4). Media queries rekenen met de
   browserletter en niet met deze basismaat: met alleen de vermenigvuldiging liepen bij grote tekst "Werken bij", de
   vacaturekolommen en (bij de eerste schaal tot 1,7 x) de vrachtbrief en de routebalk over (Codex, ronde 10 en 10b;
   README, "Verificatie"). Daarom kiezen hier containerqueries de opmaak, met grenzen in rem: rem volgt in een
   containerquery de berekende basismaat. Het zijn dezelfde omslagpunten als in de media queries hierboven (75, 64 en
   48em, en 64 tot 71em voor twee koppen); de regels zijn een kopie, pas ze samen aan. Omdat maten in rem en vw dan
   alleen afhangen van de breedte in rem, krijgt een groot scherm met grote tekst voor dat deel de horizontale opmaak van
   een laptop die even veel rem breed is (niet voor px-randen, hoogtes in vh, sticky, JavaScript en sizes; zie README).
   Smallere omslagpunten (40em en kleiner) zijn hier niet nodig: boven 1512 px is de breedte bij tekst tot 200 % minstens
   47,25rem.
   Alleen boven 1512 px. Bij de standaardletter is de breedte daar minstens 94,5rem: dan geldt geen van deze regels en
   blijft alles gelijk aan de clamp. Daaronder beslissen de media queries, ook met een klassieke schuifbalk (die telt in
   een media query mee en in een container niet). Niet gekopieerd: de kleinere posters (het scherm is groot) en de
   lagere kopbalk onder 48em (een variabele op :root, daar werkt geen containerquery). Browsers die niet door een lengte
   kunnen delen of geen containerqueries kennen, houden de clamp. Controle: _tools/grotetekst.mjs (ook met --letter=20
   en 24, en vensters als 2560x1300) en _tools/vergelijk.mjs */
@media (min-width: 1513px) {
  @supports (font-size: calc(100% * clamp(1, (11.383px + min(0.30534vw, 0.57561vh)) / 16px, 1.5))) and (container-type: inline-size) {
    /* --schaal: de factor van "Grote schermen" als getal; dezelfde formule als de clamp bovenaan en de regel hierboven */
    :root { --schaal: clamp(1, (11.383px + min(0.30534vw, 0.57561vh)) / 16px, 1.5); font-size: calc(100% * var(--schaal)); }
    main { container: pagina / inline-size; }
    .kop { container: kop / inline-size; }

    /* de kopbalk (buiten main) is zijn eigen container. Zijn marges zijn 0,4rem + 2,8vw aan elke kant: een binnenmaat
       van 70 en 59,616rem hoort bij een scherm van 75 en 64rem. Een container kan zichzelf niet bevragen, dus de
       kolommen van de balk blijven; belknop en menuknop krijgen daarom een vaste kolom (de lege kolom valt weg achter
       de routebalk, die dan verborgen is). Het menu sluit als de menuknop verdwijnt (app.js) */
    /* menu open: de scrollblokkering (body.menu-open) laat een klassieke schuifbalk verdwijnen. Zonder deze regel werd de
       kopbalk dan 15 px breder, kon de containerquery de menuknop verbergen en sloot het menu meteen weer (Codex, ronde 12;
       gemeten met een nagebootste schuifbalk). app.js zet de breedte van de schuifbalk in --schuifbalk; die gaat naar de
       rechterrand van de kopbalk. Bij de standaardletter is de menuknop hier nooit zichtbaar */
    body.menu-open .kop { padding-right: calc(var(--marge) + var(--schuifbalk, 0px)); }
    @container kop (width < 70rem) {
      .rail { visibility: hidden; }
    }
    @container kop (width < 59.616rem) {
      .kop__nav { display: none; }
      .kop__bel { grid-column: 4; }
      .kop__menu {
        grid-column: 5;
        display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 0.9rem;
        background: transparent; border: 1.5px solid currentColor; border-radius: 0;
        font-family: var(--f-display); font-stretch: 80%; font-weight: 700; font-size: 0.9375rem;
      }
    }

    @container pagina (width < 75rem) {
      .vrachtbrief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vak:nth-child(3) { border-left: 0; }
      .vak:nth-child(n+3) { border-top: 1px solid var(--asfalt); }
      .deuren__kozijn { grid-template-columns: 1fr; }
      .deur--links .stang--2, .deur--links::before { display: none; }
    }
    @container pagina (width >= 64rem) and (width < 71rem) {
      .werken .kop-2 { font-stretch: 118%; }
      .solliciteren__kop .kop-2 { font-stretch: 110%; }
    }
    @container pagina (width < 64rem) {
      .vertrek { min-height: 0; }
      .vertrek__tekst { grid-column: 1 / -1; padding-top: calc(var(--kop-h) + var(--r7)); padding-bottom: var(--r7); }
      .vertrek__beeld {
        grid-column: 1 / -1; margin-inline: calc(-1 * var(--marge)); min-height: 0;
        aspect-ratio: 4 / 5; max-height: 82svh; width: auto; justify-self: stretch;
      }
      .vertrek__beeld figcaption { left: var(--marge); }
      .sectie__kop > *, .sectie__intro,
      [data-richting='terug'] .sectie__kop > *, [data-richting='terug'] .sectie__intro { grid-column: 1 / -1; }
      .rit { grid-template-columns: 2.6rem minmax(0, 1fr); row-gap: var(--r3); }
      .rit__tekst { grid-column: 2; }
      .rit__pijl { display: none; }
      .keerpunt__merk { grid-column: 1 / span 4; }
      .keerpunt__titel { grid-column: 5 / -1; }
      .keerpunt__tekst { grid-column: 1 / -1; }
      .vloot__specs { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .vloot__specs div:nth-child(3) { padding-left: 0; border-left: 0; }
      .partners__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .partners__lijst li:nth-child(4) { border-left: 0; }
      .werken__beeld { grid-column: 1 / -1; margin-bottom: var(--r6); }
      .werken__beeld .ratio { aspect-ratio: 16 / 10; }
      .werken__tekst { grid-column: 1 / -1; }
      .deuren__kozijn { grid-template-columns: 1fr; }
      .stang, .deur--links::before, .deur--rechts::before { display: none; }
      .deur--links { --merk-h: 5.5rem; padding-left: calc(2rem + var(--merk-h) * 0.4631); }
      .deur__merk { left: 1.1rem; top: 2.2rem; translate: 0 0; }
      .deur__tijden { grid-template-columns: 1fr; gap: 0; }
      .deur__tijden dd { margin-bottom: 0.4rem; }
      .pagina-kop__tekst, .vacature__hoofd, .solliciteren__kop, .solliciteren__form, .privacy .tekst { grid-column: 1 / -1; }
      .pagina-kop__beeld { grid-column: 1 / -1; max-width: none; justify-self: stretch; } /* zonder de beperking tot 32rem die boven 1512 px voor de brede opmaak geldt */
      .pagina-kop__beeld .ratio { aspect-ratio: 16 / 10; }
      .vacature__zij { grid-column: 1 / -1; position: static; margin-top: var(--r6); }
      .solliciteren__form { margin-top: var(--r6); }
    }
    @container pagina (width < 48rem) {
      .keerpunt__band { aspect-ratio: 1 / 1; }
      .keerpunt__merk { grid-column: 1 / -1; justify-self: start; }
      .keerpunt__merk .pijl { height: 9rem; }
      .keerpunt__titel { grid-column: 1 / -1; }
      .vloot__rij, .vloot__rij--detail { grid-template-columns: minmax(0, 1fr); gap: var(--goot); }
      .vloot__beeld { display: block; grid-row: auto; }
      .vloot__beeld--b .ratio { aspect-ratio: 3 / 4; }
      .vloot__beeld--d .ratio { aspect-ratio: 3 / 2; }
    }
  }
}