/* ==========================================================================
   DZH Transport — site.css
   Ontwerpwereld "Violet": wit papier, inktviolet en één actiekleur (#6D28D9).
   Donkere ankersecties in #160F2B geven het ritme. Tokens en regels staan in
   docs/design/DESIGN-SITE.md — dat document is de wet; wijk hier niet van af
   zonder het daar aan te passen.

   De homepagina is de "Kiezer": de bezoeker kiest eerst wát er weg moet
   (pakket, aankoop, kavel, auto, iets anders) en krijgt meteen de aanpak en
   het vanaf-bedrag te zien. Zie templates/site/home.html.
   ========================================================================== */

/* --- Fonts (self-hosted, variabel; zie DESIGN-SITE.md § Typografie) ------ */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("../fonts/familjen-grotesk-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Kleur (contrast gecontroleerd, zie DESIGN-SITE.md § Kleur) */
  --kleur-achtergrond: #ffffff;   /* wit papier */
  --kleur-vlak: #f8f6fe;          /* verhoogd vlak (kaarten, banden) */
  --kleur-vlak-hoog: #ffffff;     /* zwevende panelen (dropdowns) */
  --kleur-lijn: #e5e0f3;          /* hairlines en randen */
  --kleur-tekst: #141020;         /* inktviolet */
  --kleur-tekst-zacht: #565068;   /* gedempt violetgrijs (4.5:1 op wit) */
  --kleur-accent: #6d28d9;        /* violet — de actiekleur */
  --kleur-accent-fel: #5b21b6;    /* violet, hover/nadruk */
  --kleur-accent-contrast: #ffffff; /* tekst óp violet */
  --kleur-ok: #1f7a4c;            /* diepgroen: succes-staat formulieren */
  --kleur-fout: #b42318;          /* diep rood: fout-staat formulieren */

  /* Donkere ankersecties: het ritme van de pagina. Op deze grond geldt
     --kleur-diep-tekst als inkt en --kleur-accent-zacht als accent; het
     gewone --kleur-accent haalt op #160F2B geen 4.5:1 en mag daar dus
     alleen als vlak (knop), nooit als letter. */
  --kleur-diep: #160f2b;
  --kleur-diep-tekst: #efebfa;
  --kleur-diep-zacht: rgba(239, 235, 250, 0.72);
  --kleur-diep-lijn: rgba(239, 235, 250, 0.16);
  --kleur-accent-zacht: #a78bfa;  /* violet dat op donker wél leesbaar is */
  --kleur-tint: #f1edfc;          /* violette waas voor velden en hero */

  /* Maatschaal (ruimte) */
  --maat-1: 0.25rem;
  --maat-2: 0.5rem;
  --maat-3: 1rem;
  --maat-4: 1.5rem;
  --maat-5: 2.5rem;
  --maat-6: 4rem;
  --maat-7: 6.5rem;

  /* Vorm */
  --radius-klein: 5px;
  --radius: 8px;
  --radius-rond: 999px;
  --schaduw: 0 18px 44px rgba(22, 15, 43, 0.16); /* alléén voor zwevende lagen */
  --schaduw-kaart: 0 1px 2px rgba(22, 15, 43, 0.05);

  /* Letter */
  --font-display: "Familjen Grotesk", system-ui, "Helvetica Neue", sans-serif;
  --font-tekst: "Archivo", system-ui, "Helvetica Neue", sans-serif;
  --display-assen: normal; /* geen extra assen meer; blijft als haak voor later */

  color-scheme: light;
}

/* --- Basis ---------------------------------------------------------------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.6;
  font-optical-sizing: auto;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--kleur-accent);
  color: var(--kleur-accent-contrast);
}

:focus-visible {
  outline: 2px solid var(--kleur-accent);
  outline-offset: 3px;
}

.omslag {
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* Visueel verborgen, maar voorleesbaar (nooit display:none voor labels
   die de accessible name dragen — WCAG 4.1.2). */
.visueel-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Signage-stem als utility (Archivo breed, kapitalen, wijd gespatieerd):
   voor veldlabels en kleine paneelkoppen. Zelfde stem als .eyebrow, maar
   in rustig staalgrijs i.p.v. cognac. De familie staat er expliciet bij:
   op een h2/h3 zou de display-regel (Fraunces) anders winnen en de
   signage-stem stilletjes een serif worden (Task 3.4-vondst). */
.signage {
  font-family: var(--font-tekst);
  font-variation-settings: normal;
  font-size: 0.8125rem;
  font-weight: 620;
  font-stretch: 116%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

/* Eyebrow: de signage-stem (Archivo breed, kapitalen, wijd gespatieerd). */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 620;
  font-stretch: 116%;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--kleur-accent);
}

/* --- Skip-link ------------------------------------------------------------ */

.skip-link {
  position: absolute;
  top: var(--maat-2);
  left: var(--maat-2);
  z-index: 200;
  padding: 0.6em 1em;
  background: var(--kleur-accent);
  color: var(--kleur-accent-contrast);
  font-weight: 620;
  border-radius: var(--radius-klein);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --- Iconen (lijnstijl, 1.7px, ronde uiteinden) --------------------------- */

.icoon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icoon .icoon-detail {
  fill: currentColor;
  stroke: none;
}

.icoon--chevron {
  width: 14px;
  height: 14px;
}

/* --- Knoppen -------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.72em 1.35em;
  background: transparent; /* ook op <button>: geen UA-ButtonFace-vlak */
  border: 1px solid transparent;
  border-radius: var(--radius-klein);
  font-family: var(--font-tekst);
  font-size: 0.9375rem;
  font-weight: 620;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    color 0.16s ease, transform 0.16s ease;
}

.knop:active {
  transform: translateY(1px);
}

.knop--primair {
  background: var(--kleur-accent);
  color: var(--kleur-accent-contrast);
}

.knop--primair:hover {
  background: var(--kleur-accent-fel);
}

.knop--stil {
  border-color: var(--kleur-lijn);
  color: var(--kleur-tekst);
}

.knop--stil:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-fel);
}

.knop--whatsapp {
  padding: 0.6em 1em;
  border-color: var(--kleur-lijn);
  color: var(--kleur-tekst-zacht);
}

.knop--whatsapp:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-tekst);
}

/* --- Markeringslijn (signatuur: wegmarkering met ruit) -------------------- */

.markeringslijn {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--kleur-accent);
}

.markeringslijn::before,
.markeringslijn::after {
  content: "";
  height: 2px;
  flex: 1;
}

/* Het patroon begint strak tegen de ruit en loopt "van de pagina af":
   links tekent het van rechts naar links, rechts andersom. */
.markeringslijn::before {
  background-image: repeating-linear-gradient(
    270deg,
    currentColor 0 26px,
    transparent 26px 44px
  );
}

.markeringslijn::after {
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0 26px,
    transparent 26px 44px
  );
}

.markeringslijn__ruit {
  width: 9px;
  height: 9px;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
  /* De weg schuift heel traag onder je door. */
  .markeringslijn::before,
  .markeringslijn::after {
    animation: rijden 9s linear infinite;
  }
}

@keyframes rijden {
  to {
    background-position-x: -88px;
  }
}

/* --- Header --------------------------------------------------------------- */

.site-kop {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--kleur-lijn);
}

.site-kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--maat-4);
  min-height: 4.25rem;
}

.logo {
  flex: none;
  color: var(--kleur-tekst);
}

.logo-svg {
  /* Werkversie D is gestapeld (DZH · markeringslijn · TRANSPORT): hoger en
     smaller dan een horizontale lockup, dus meer hoogte in de kop. */
  height: 46px;
  width: auto;
}

.logo-svg .logo-accent {
  fill: var(--kleur-accent);
}

.hoofdnav {
  margin-inline: auto;
  /* Niet krimpen. Zonder dit deelt flexbox het tekort uit over de nav én de
     acties, en gaat een menu-item over twee regels ("Veelgestelde / vragen")
     terwijl het telefoonnummer tegelijk wordt platgedrukt. Liever een nav die
     eerlijk zegt dat hij niet past dan een kop die scheef staat. */
  flex: none;
}

.hoofdnav ul {
  display: flex;
  /* 2,4vw liep op een breed scherm op tot 40 px per tussenruimte; met zes
     items is dat 200 px alleen aan lucht, en precies dat duwde het menu over
     de rand van de omslag (max. 74rem, dus ~1104 px inhoud). 24 px is ruim
     genoeg voor een menubalk. */
  gap: clamp(var(--maat-3), 1.6vw, var(--maat-4));
}

.hoofdnav li {
  flex: none;
}

.hoofdnav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
  transition: color 0.16s ease;
  /* Een menu-item is één woordbeeld. Breekt hij af, dan wordt de hele kop
     hoger en staan de items niet meer op één lijn. */
  white-space: nowrap;
}

.hoofdnav a:hover {
  color: var(--kleur-tekst);
}

.hoofdnav a[aria-current="page"] {
  color: var(--kleur-tekst);
  text-decoration: underline dashed var(--kleur-accent) 1.5px;
  text-underline-offset: 0.55em;
}

.site-kop__acties {
  display: flex;
  align-items: center;
  gap: var(--maat-3);
  flex: none;
}

.kop-telefoon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 560;
  color: var(--kleur-tekst);
  font-variant-numeric: tabular-nums;
  transition: color 0.16s ease;
  /* Een telefoonnummer over twee regels ("+31 85 060 / 8471") leest als twee
     nummers en maakt de hele kop hoger. Dit was in het Duits zichtbaar zodra
     de nav niet meer meekromp. */
  white-space: nowrap;
}

.kop-telefoon .icoon {
  color: var(--kleur-accent);
}

.kop-telefoon:hover {
  color: var(--kleur-accent-fel);
}

/* --- Taalkeuze (details/summary, werkt zonder JS) ------------------------- */

details summary {
  list-style: none;
  cursor: pointer;
}

details summary::-webkit-details-marker {
  display: none;
}

.taalkeuze {
  position: relative;
}

.taalkeuze summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45em 0.7em;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  color: var(--kleur-tekst-zacht);
  transition: border-color 0.16s ease, color 0.16s ease;
}

.taalkeuze summary:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-tekst);
}

.taalkeuze[open] summary {
  color: var(--kleur-tekst);
}

.taalkeuze[open] .icoon--chevron {
  transform: rotate(180deg);
}

.taalkeuze__code {
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.taalkeuze__lijst {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 150;
  min-width: 11rem;
  padding: var(--maat-2);
  background: var(--kleur-vlak-hoog);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw);
}

.taalkeuze__lijst a {
  display: block;
  padding: 0.5em 0.75em;
  border-radius: var(--radius-klein);
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.taalkeuze__lijst a:hover {
  background: var(--kleur-vlak);
  color: var(--kleur-tekst);
}

.taalkeuze__lijst a[aria-current="true"] {
  color: var(--kleur-accent-fel);
}

.taalkeuze__lijst a[aria-current="true"]::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.6em;
  background: currentColor;
  transform: rotate(45deg);
}

/* --- Mobiel menu (details/summary) ---------------------------------------- */

.menu-mobiel {
  display: none;
}

.menu-mobiel summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  color: var(--kleur-tekst);
}

.menu-mobiel[open] summary {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-fel);
}

.menu-mobiel .icoon {
  width: 20px;
  height: 20px;
}

.menu-mobiel__paneel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--maat-4) clamp(1.25rem, 4vw, 2.5rem) var(--maat-5);
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
  box-shadow: var(--schaduw);
}

.menu-mobiel__paneel ul {
  display: grid;
  gap: var(--maat-2);
}

.menu-mobiel__paneel a {
  display: block;
  padding: 0.55em 0;
  font-size: 1.125rem;
  font-weight: 540;
  color: var(--kleur-tekst);
}

.menu-mobiel__paneel a[aria-current="page"] {
  color: var(--kleur-accent-fel);
}

.menu-mobiel__telefoon {
  margin-top: var(--maat-3);
  padding-top: var(--maat-3);
  border-top: 1px solid var(--kleur-lijn);
  font-variant-numeric: tabular-nums;
}

/* --- Hero (home; site/home.html — Task 3.4 bouwt hem verder uit) ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--maat-7) var(--maat-6);
}

.hero::before {
  /* Verre natriumgloed rechtsboven — nauwelijks zichtbaar, wél voelbaar. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    52rem 30rem at 86% -12%,
    rgba(109, 40, 217, 0.10),
    transparent 62%
  );
  pointer-events: none;
}

.hero__binnen {
  position: relative;
  display: grid;
  gap: var(--maat-4);
  justify-items: start;
}

.hero__kop {
  max-width: 11em;
  font-size: clamp(2.5rem, 5.4vw + 1rem, 4.5rem);
}

.hero__sub {
  max-width: 36em;
  font-size: 1.125rem;
  color: var(--kleur-tekst-zacht);
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
  margin-top: var(--maat-2);
}

.hero__lijn {
  width: min(100%, 30rem);
  margin-top: var(--maat-5);
}

.hero__belofte {
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

/* Eén georkestreerd laadmoment: hero-elementen komen rustig omhoog. */
@media (prefers-reduced-motion: no-preference) {
  .hero__binnen > * {
    animation: aankomen 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
  }

  .hero__binnen > :nth-child(2) {
    animation-delay: 0.07s;
  }

  .hero__binnen > :nth-child(3) {
    animation-delay: 0.14s;
  }

  .hero__binnen > :nth-child(4) {
    animation-delay: 0.21s;
  }

  .hero__binnen > :nth-child(n + 5) {
    animation-delay: 0.28s;
  }
}

@keyframes aankomen {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* --- Footer ---------------------------------------------------------------- */

.site-voet {
  margin-top: var(--maat-7);
  background: var(--kleur-vlak);
  border-top: 1px solid var(--kleur-lijn);
}

.site-voet__boven {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--maat-5);
  padding-block: var(--maat-6);
}

.site-voet__merk {
  display: grid;
  gap: var(--maat-4);
  align-content: start;
  justify-items: start;
}

.site-voet__merk .logo-svg {
  height: 88px;
  width: auto;
  color: var(--kleur-tekst);
}

.site-voet__claim {
  max-width: 16em;
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 480;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--kleur-tekst);
}

.site-voet__kolom h2 {
  margin-bottom: var(--maat-3);
  font-family: var(--font-tekst);
  font-variation-settings: normal;
  font-size: 0.8125rem;
  font-weight: 620;
  font-stretch: 116%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

.site-voet__kolom ul {
  display: grid;
  gap: 0.45rem;
}

.site-voet__kolom a {
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
  transition: color 0.16s ease;
}

.site-voet__kolom a:hover {
  color: var(--kleur-accent-fel);
}

.site-voet__nootje {
  margin-top: var(--maat-3);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.site-voet__onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-3);
  padding-block: var(--maat-4);
  border-top: 1px solid var(--kleur-lijn);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.site-voet__juridisch {
  display: flex;
  gap: var(--maat-4);
}

.site-voet__juridisch a:hover {
  color: var(--kleur-accent-fel);
}

/* --- Pagina-skelet (Task 3.1) ---------------------------------------------- */
/* Binnenpagina's zolang taken 3.2-3.6 hun echte secties nog niet gebouwd
   hebben: kop + intro + actie, links uitgelijnd (linkerlijn-compositie),
   sectieritme met --maat-6/--maat-7. Mag daarna blijven bestaan voor de
   eenvoudige tekstpagina's (privacy/voorwaarden, 404). */

.pagina {
  padding-block: var(--maat-6) var(--maat-7);
}

/* Variant (Task 3.6): de sectie is alléén de paginakop, met echte secties
   eronder — dan geen maat-7-onderrand (die + de sectie-eigen bovenrand
   zou ~144px lucht stapelen), maar het normale sectieritme. */
.pagina--kop {
  padding-block-end: var(--maat-3);
}

.pagina__binnen {
  display: grid;
  gap: var(--maat-4);
  justify-items: start;
}

.pagina__kop {
  max-width: 14em;
  font-size: clamp(2rem, 3.6vw + 1rem, 3.25rem);
}

.pagina__intro {
  max-width: 36em;
  font-size: 1.125rem;
  color: var(--kleur-tekst-zacht);
}

.pagina__lijst {
  display: grid;
  gap: var(--maat-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagina__lijst a {
  color: var(--kleur-tekst);
  text-decoration-line: underline;
  text-decoration-color: var(--kleur-accent);
  text-underline-offset: 0.25em;
  transition: color 0.16s ease;
}

.pagina__lijst a:hover {
  color: var(--kleur-accent-fel);
}

.pagina__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
}

/* --- Dienstpagina (Task 3.2) ----------------------------------------------- */
/* Eén template voor de tien diensten: hero-variant, sectieritme met
   hairlines, genummerde stappen (echte volgorde, dus nummers mogen),
   USP-kaarten, prijsblok, FAQ-accordeon, merkchips, gerelateerd-kaarten en
   de slot-CTA-band. Diepte = vlak + hairline; cognac alleen als accent. */

.hero--dienst {
  padding-block: var(--maat-6) var(--maat-5);
}

.hero__kop--dienst {
  max-width: 15em;
  font-size: clamp(2.125rem, 3.4vw + 1rem, 3.375rem);
}

.eyebrow--dienst {
  display: inline-flex;
  align-items: center;
  gap: var(--maat-2);
}

.eyebrow--dienst .icoon--dienst {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
}

.eyebrow--dienst a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}

.eyebrow--dienst a:hover {
  color: var(--kleur-accent-fel);
}

.dienst-sectie {
  padding-block: var(--maat-6);
}

.dienst-sectie + .dienst-sectie {
  border-top: 1px solid var(--kleur-lijn);
}

.dienst-sectie--eerste {
  padding-block-start: var(--maat-5);
}

.dienst-sectie__kop {
  max-width: 20em;
  font-size: clamp(1.625rem, 1.9vw + 0.85rem, 2.25rem);
  margin-block-end: var(--maat-4);
}

.dienst-sectie__tekst {
  max-width: 46em;
  color: var(--kleur-tekst-zacht);
}

.dienst-intro {
  display: grid;
  gap: var(--maat-3);
  max-width: 46em;
}

.dienst-intro p:first-child {
  font-size: 1.1875rem;
}

.dienst-intro p + p {
  color: var(--kleur-tekst-zacht);
}

/* Stappen: nummerchip + hairline-verbinding ertussen (de route van de rit). */

.stappen {
  counter-reset: stap;
  display: grid;
  gap: var(--maat-4);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46em;
}

.stappen__stap {
  position: relative;
  padding-inline-start: calc(2.75rem + var(--maat-3));
  counter-increment: stap;
  min-width: 0;
}

.stappen__stap::before {
  content: counter(stap);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-family: var(--font-tekst);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  color: var(--kleur-accent-fel);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
}

.stappen__stap:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(1.375rem - 0.5px);
  top: calc(2.75rem + 6px);
  bottom: calc(-1 * var(--maat-4) + 6px);
  width: 1px;
  background: var(--kleur-lijn);
}

.stappen__stap h3 {
  font-size: 1.125rem;
  margin-block-end: var(--maat-1);
}

.stappen__stap p {
  color: var(--kleur-tekst-zacht);
}

.pijl-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-block-start: var(--maat-4);
  color: var(--kleur-accent-fel);
  font-weight: 620;
  text-decoration: none;
}

.pijl-link::after {
  content: "\2192";
  transition: translate 0.16s ease;
}

.pijl-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.pijl-link:hover::after {
  translate: 3px 0;
}

.merk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-2);
  margin: var(--maat-4) 0 0;
  padding: 0;
  list-style: none;
}

.merk-chips a {
  display: inline-block;
  padding: 0.45em 0.9em;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  background: var(--kleur-vlak);
  color: var(--kleur-tekst);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.merk-chips a:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-fel);
}

.usp-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--maat-3);
}

.usp {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: var(--maat-4);
  min-width: 0;
}

.usp h3 {
  font-size: 1.125rem;
  margin-block-end: var(--maat-2);
}

.usp p {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

.prijsblok {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: var(--maat-5);
}

.prijsblok__tekst {
  max-width: 40em;
  min-width: 0;
}

.prijsblok h2 {
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
  margin-block-end: var(--maat-2);
}

.prijsblok p {
  color: var(--kleur-tekst-zacht);
  font-variant-numeric: tabular-nums;
}

.prijsblok .knop {
  flex: none;
}

.faq-lijst {
  display: grid;
  gap: var(--maat-2);
  max-width: 50em;
}

.faq-item {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-3);
  padding: var(--maat-3) var(--maat-4);
  cursor: pointer;
  font-weight: 620;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-tekst);
  font-size: 1.375rem;
  line-height: 1;
  color: var(--kleur-accent);
  transition: rotate 0.16s ease;
}

.faq-item[open] summary::after {
  rotate: 45deg;
}

.faq-item > p {
  padding: 0 var(--maat-4) var(--maat-4);
  max-width: 60ch;
  color: var(--kleur-tekst-zacht);
}

.rel-kaarten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--maat-3);
  max-width: 46em;
}

.rel-kaart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--maat-3);
  row-gap: var(--maat-1);
  align-items: center;
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  padding: var(--maat-4);
  color: var(--kleur-tekst);
  text-decoration: none;
  transition: border-color 0.16s ease;
  min-width: 0;
}

.rel-kaart:hover {
  border-color: var(--kleur-accent);
}

.rel-kaart .icoon--rel {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
}

.rel-kaart__naam {
  font-weight: 620;
}

.rel-kaart__kort {
  grid-column: 2;
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

.cta-band {
  margin-block-start: var(--maat-6);
  background: var(--kleur-vlak);
  border-top: 1px solid var(--kleur-lijn);
  padding-block: var(--maat-6);
}

.cta-band__binnen {
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
}

.cta-band__lijn {
  width: min(100%, 22rem);
  margin-block-end: var(--maat-2);
}

.cta-band h2 {
  max-width: 16em;
  font-size: clamp(1.75rem, 2.3vw + 0.9rem, 2.5rem);
}

.cta-band p {
  max-width: 36em;
  color: var(--kleur-tekst-zacht);
}

.cta-band__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
  margin-block-start: var(--maat-2);
}

@media (max-width: 60rem) {
  .usp-raster {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 37.5rem) {
  .hero--dienst {
    padding-block: var(--maat-5) var(--maat-4);
  }

  .dienst-sectie {
    padding-block: var(--maat-5);
  }

  .rel-kaarten {
    grid-template-columns: minmax(0, 1fr);
  }

  .prijsblok {
    padding: var(--maat-4);
  }
}

/* --- Merkenpagina (Task 3.3) ------------------------------------------------ */
/* Hergebruikt het dienstpagina-vocabulaire (hero--dienst, dienst-sectie,
   stappen, faq, prijsblok, rel-kaarten, cta-band); eigen zijn alleen het
   unieke merk-blok met de voorbeeldregel in signage-stem en de
   onafhankelijkheids-disclaimer — zichtbaar maar rustig: tekst-zacht op
   asfalt, achter een hairline. */

.merk-blok {
  display: grid;
  gap: var(--maat-3);
  max-width: 46em;
}

.merk-blok p {
  color: var(--kleur-tekst-zacht);
}

.merk-blok p:first-of-type {
  font-size: 1.1875rem;
  color: var(--kleur-tekst);
}

.merk-voorbeelden {
  margin-block-start: var(--maat-2);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--kleur-tekst-zacht);
}

.merk-voorbeelden__label {
  font-family: var(--font-tekst);
  font-stretch: 116%;
  font-weight: 620;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
  margin-inline-end: 0.35em;
}

.merk-disclaimer {
  max-width: 46em;
  margin-block-start: var(--maat-4);
  padding-block-start: var(--maat-3);
  border-top: 1px solid var(--kleur-lijn);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

/* --- Homepage (Task 3.4) ---------------------------------------------------- */
/* Verloop als één verhaal: hero → usp-band → partners (vlak) →
   dienstenraster → cijfers (vlak; alleen met échte cijfers) → reviewmuur →
   Noord-Brabant (vlak) → B2B → FAQ-teaser → cta-band. Ritme door
   afwisseling asfalt/vlak; de markeringslijn blijft beperkt tot hero en
   cta-band (hooguit één volwaardige lijn per scherm). */

.hero__kop--home {
  max-width: 13em;
  font-size: clamp(2.125rem, 3.6vw + 1rem, 3.25rem);
}

/* De kiezer: vijf keuzes, één wisselend uitkomstpaneel.

   Zonder JS staan alle vijf de panelen open (de template rendert ze zonder
   `hidden`) en zijn de keuzes gewone links naar de calculator. Draait er wél
   JS, dan verbergt site.js de vier vervolgpanelen met `hidden` en zet het de
   ARIA-rollen van een tabgroep.

   De regel hieronder dekt het gat daartussen: site.js is `defer`, dus tussen
   de eerste verf en het uitvoeren van het script zouden alle vijf panelen
   even zichtbaar zijn. `scripting: enabled` zegt vóór die tijd al dat er JS
   komt, dus verbergen we ze alvast; zodra site.js de klasse `kiezer--js`
   zet, vervalt deze regel en neemt het `hidden`-attribuut het over. Een
   browser zonder JS (of zonder deze media-feature) laat gewoon alles staan. */
@media (scripting: enabled) {
  .kiezer:not(.kiezer--js) .kiezer__paneel--vervolg {
    display: none;
  }
}

.kiezer {
  width: 100%;
  min-width: 0;
  /* Bovenop de rasterafstand van .hero__binnen: de kop van de kiezer is
     displayletter en zou anders tegen de H1 aan plakken. */
  margin-block-start: var(--maat-2);
}

.kiezer__kop {
  font-size: clamp(1.5rem, 1.6vw + 0.95rem, 2.125rem);
}

.kiezer__accent {
  color: var(--kleur-accent);
}

.kiezer__sub {
  max-width: 46em;
  margin-block-start: var(--maat-2);
  color: var(--kleur-tekst-zacht);
}

.kiezer__keuzes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--maat-2);
  margin-block-start: var(--maat-4);
}

.kiezer__cel {
  display: grid;
  min-width: 0;
}

.kiezer__keuze {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--maat-1);
  padding: var(--maat-3);
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-kaart);
  transition: border-color 0.16s ease, background-color 0.16s ease;
}

/* Het bordje boven de gekozen keuze: één amberloze, violette streep — de
   enige plek waar de kiezer kleur als vlak gebruikt. */
.kiezer__keuze::after {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: -1px;
  height: 3px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: transparent;
}

.kiezer__keuze:hover {
  border-color: var(--kleur-accent);
}

.kiezer__keuze--actief {
  background: var(--kleur-tint);
  border-color: var(--kleur-accent);
}

.kiezer__keuze--actief::after {
  background: var(--kleur-accent);
}

.kiezer__titel {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 620;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
}

.kiezer__onder {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--kleur-tekst-zacht);
}

.kiezer__panelen {
  margin-block-start: var(--maat-3);
}

.kiezer__paneel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: var(--maat-4);
  align-items: center;
  padding: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

/* Zonder JS staan de panelen onder elkaar; dan hoort er lucht tussen. */
.kiezer__paneel + .kiezer__paneel {
  margin-block-start: var(--maat-2);
}

/* `display: grid` hierboven wint van de UA-regel achter het hidden-attribuut,
   dus dat moet hier expliciet terug — anders verbergt site.js niets. */
.kiezer__paneel[hidden] {
  display: none;
}

.kiezer__uitleg {
  display: grid;
  gap: var(--maat-2);
  min-width: 0;
}

.kiezer__paneelkop {
  max-width: 20em;
  font-size: clamp(1.25rem, 1vw + 0.9rem, 1.5rem);
}

.kiezer__tekst {
  max-width: 42em;
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.kiezer__prijsvak {
  display: grid;
  justify-items: start;
  gap: var(--maat-3);
  min-width: 0;
}

.kiezer__prijs {
  display: grid;
  gap: var(--maat-1);
}

.kiezer__bedrag {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 560;
  font-size: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem);
  line-height: 1;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kiezer__bedrag--maatwerk {
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
}

.kiezer__prijslabel {
  font-size: 0.8125rem;
  color: var(--kleur-tekst-zacht);
}

.kiezer__cta {
  white-space: nowrap;
}

/* De wissel is een aankomst, geen overgang: alleen het paneel dat de bezoeker
   zelf oproept komt op. site.js zet die klasse pas bij een échte keuze — bij
   het laden zou hij het al zichtbare paneel alsnog laten opflitsen zodra het
   uitgestelde script draait. Buiten dit blok (beweging uit) verschijnt het
   paneel meteen. */
@media (prefers-reduced-motion: no-preference) {
  .kiezer__paneel--wissel {
    animation: aankomen 0.34s cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
  }
}

@media (max-width: 68.75rem) {
  .kiezer__keuzes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .kiezer__keuzes {
    grid-template-columns: minmax(0, 1fr);
  }

  .kiezer__paneel {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--maat-3);
    padding: var(--maat-3);
  }

  .kiezer__cta {
    width: 100%;
    justify-content: center;
  }
}

.home-sectie {
  padding-block-start: var(--maat-7);
}

.home-sectie__kop {
  max-width: 18em;
  font-size: clamp(1.75rem, 2.3vw + 0.9rem, 2.5rem);
}

.home-sectie__sub {
  max-width: 40em;
  margin-block-start: var(--maat-2);
  color: var(--kleur-tekst-zacht);
}

.home-sectie .faq-lijst {
  margin-block-start: var(--maat-4);
}

/* USP-band: vier feitelijke kaarten direct onder de hero. */

.usp-band {
  padding-block-end: var(--maat-7);
}

.usp-band__raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--maat-3);
}

.usp__icoon {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
  margin-block-end: var(--maat-3);
}

.usp--home h3 {
  font-size: 1.0625rem;
}

/* Logostrook: marquee van logo's op het verhoogde vlak. De rij bevat twee
   identieke lijsten; elke helft is exact lijstbreedte + eindmarge, dus
   translateX(-50%) sluit naadloos aan.

   De strook pauzeert bewust NIET onder de muis: hij loopt door tot je hem
   uitzet met prefers-reduced-motion. */

.partners {
  padding-block: var(--maat-5);
  background: var(--kleur-vlak);
  border-block: 1px solid var(--kleur-lijn);
}

.partners__band {
  overflow: hidden;
  margin-block-start: var(--maat-4);
}

.partners__rij {
  display: flex;
  width: max-content;
}

.partners__lijst {
  display: flex;
  align-items: center;
  gap: var(--maat-5);
  padding-inline-end: var(--maat-5);
}

@media (prefers-reduced-motion: no-preference) {
  .partners__rij {
    animation: partners-rijden 44s linear infinite;
  }
}

@keyframes partners-rijden {
  to {
    transform: translateX(-50%);
  }
}

/* Beweging uit? Dan wordt de band één statisch, omlopend raster en
   vervalt de tweede (puur visuele) lijstkopie. */
@media (prefers-reduced-motion: reduce) {
  .partners__rij {
    width: auto;
  }

  .partners__lijst {
    flex-wrap: wrap;
    padding-inline-end: 0;
  }

  .partners__lijst[aria-hidden="true"] {
    display: none;
  }
}

/* De logo's zelf. Negen merken in negen huisstijlen en negen
   kwaliteitsniveaus maken van een strook een lappendeken, dus ze krijgen
   allemaal dezelfde inkt: brightness(0) maakt van elk logo een silhouet
   (de transparantie blijft intact), de opacity-stap zet dat silhouet op de
   sterkte van gedempte tekst. Kleuren terug? Vervang de filterregel door:
   filter: none; */

.partners__cel {
  display: flex;
  align-items: center;
}

.partner-logo {
  --logo-hoogte: 34px;
  width: auto;
  filter: brightness(0) opacity(0.58);
}

/* Optische normalisatie: gelijke pixelhoogte is niet hetzelfde als gelijk
   visueel gewicht. Zonder deze factoren schreeuwt het brede, vette DSV en
   verdwijnt het smalle, dunne Louis Vuitton in dezelfde strook. De
   width/height in de HTML houden dezelfde verhouding aan. */

.partner-logo--pickthisup {
  height: calc(var(--logo-hoogte) * 1);
}

.partner-logo--troostwijk {
  height: calc(var(--logo-hoogte) * 1.18);
}

.partner-logo--auctivo {
  height: calc(var(--logo-hoogte) * 0.92);
}

.partner-logo--dsv {
  height: calc(var(--logo-hoogte) * 0.82);
}

.partner-logo--rhenus {
  height: calc(var(--logo-hoogte) * 1.12);
}

.partner-logo--bijenkorf {
  height: calc(var(--logo-hoogte) * 0.96);
}

.partner-logo--chanel {
  height: calc(var(--logo-hoogte) * 1.24);
}

.partner-logo--louis-vuitton {
  height: calc(var(--logo-hoogte) * 1.34);
}

.partner-logo--nike {
  height: calc(var(--logo-hoogte) * 0.88);
}

/* Terugval voor een bedrijf zonder logobestand (zie home.html). */
.partner-chip {
  display: flex;
  align-items: center;
  padding: 0.65em 1.3em;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  color: var(--kleur-tekst-zacht);
  font-size: 1.0625rem;
  font-weight: 560;
  white-space: nowrap;
}

/* Merkmark náást de naam (Task 5.1): kleurt mee met de chip, dus nooit een
   los kleurvlak in de band. De marken staan in een 24×24-raster maar vullen
   dat zelden (een swoosh is breed en laag), dus de maat is bewust royaal:
   op 2em raakt de zichtbare mark ongeveer de letterhoogte van de naam. */
.partner-chip svg {
  height: 2em;
  width: auto;
  margin-inline-end: 0.5em;
  flex: none;
}

.partners__claim {
  margin-block-start: var(--maat-4);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

/* Dienstenraster: tien kaarten, kolommen naar beschikbare breedte. */

.raster-diensten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--maat-3);
  margin-block-start: var(--maat-5);
}

.raster-diensten > li {
  display: grid;
  min-width: 0;
}

.dienst-kaart {
  display: grid;
  gap: var(--maat-1);
  align-content: start;
  padding: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  transition: border-color 0.16s ease;
}

.dienst-kaart:hover {
  border-color: var(--kleur-accent);
}

.dienst-kaart__icoon {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
  margin-block-end: var(--maat-2);
}

.dienst-kaart__naam {
  font-weight: 620;
}

.dienst-kaart__kort {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

/* Cijfersblok (alleen met echte cijfers, zie content/cijfers.py). */

.cijfers {
  margin-block-start: var(--maat-7);
  padding-block: var(--maat-6);
  background: var(--kleur-vlak);
  border-block: 1px solid var(--kleur-lijn);
}

.cijfers__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--maat-4);
  margin-block-start: var(--maat-5);
}

.cijfer {
  display: grid;
  gap: var(--maat-2);
  justify-items: start;
}

.cijfer__waarde {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 560;
  font-size: clamp(2.25rem, 2.6vw + 1rem, 3.5rem);
  line-height: 1;
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

/* Reviewmuur: rustige kolommen, geen carrousel. */

.reviews__muur {
  columns: 3 16rem;
  column-gap: var(--maat-3);
  margin-block-start: var(--maat-5);
}

.review {
  break-inside: avoid;
  margin: 0 0 var(--maat-3);
  padding: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

.review__sterren {
  display: flex;
  gap: 3px;
  margin-block-end: var(--maat-3);
  color: var(--kleur-accent);
}

.ster {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

.review blockquote {
  margin: 0;
}

.review blockquote p {
  font-size: 0.9375rem;
}

.review figcaption {
  margin-block-start: var(--maat-3);
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

.review__naam {
  font-weight: 620;
  color: var(--kleur-tekst);
}

/* Noord-Brabant-blok: de 90-minutenbelofte als typografisch moment. */

.brabant {
  position: relative;
  overflow: hidden;
  margin-block-start: var(--maat-7);
  padding-block: var(--maat-6);
  background: var(--kleur-vlak);
  border-block: 1px solid var(--kleur-lijn);
}

.brabant::before {
  /* Zelfde natriumgloed-recept als de hero, laag rechtsonder. */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    46rem 26rem at 88% 112%,
    rgba(109, 40, 217, 0.08),
    transparent 62%
  );
  pointer-events: none;
}

.brabant__binnen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--maat-5);
  align-items: center;
}

.brabant__tekst h2 {
  max-width: 15em;
  font-size: clamp(1.75rem, 2.3vw + 0.9rem, 2.5rem);
}

.brabant__tekst > p {
  max-width: 40em;
  margin-block-start: var(--maat-3);
  color: var(--kleur-tekst-zacht);
}

.brabant__links {
  display: grid;
  gap: var(--maat-1);
  margin-block-start: var(--maat-2);
}

.brabant__links .pijl-link {
  margin-block-start: var(--maat-1);
}

.brabant__cijfer {
  display: grid;
  justify-items: center;
  gap: var(--maat-2);
}

.brabant__getal {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 560;
  font-size: clamp(5.5rem, 8vw + 2rem, 9rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* B2B-paneel: zelfde vorm als het prijsblok op de dienstpagina's. */

.b2b-paneel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-4);
  padding: var(--maat-5);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

.b2b-paneel__tekst {
  max-width: 40em;
  min-width: 0;
}

.b2b-paneel h2 {
  margin-block-end: var(--maat-2);
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2rem);
}

.b2b-paneel p {
  color: var(--kleur-tekst-zacht);
}

.b2b-paneel .knop {
  flex: none;
}

@media (max-width: 60rem) {
  .usp-band__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brabant__binnen {
    grid-template-columns: minmax(0, 1fr);
  }

  .brabant__cijfer {
    justify-items: start;
  }
}

@media (max-width: 37.5rem) {
  .usp-band__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .cijfers__raster {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-sectie {
    padding-block-start: var(--maat-6);
  }

  .usp-band {
    padding-block-end: var(--maat-6);
  }

  .cijfers,
  .brabant {
    margin-block-start: var(--maat-6);
  }

  .b2b-paneel {
    padding: var(--maat-4);
  }
}

/* --- FAQ-pagina (Task 3.5) -------------------------------------------------- */
/* Verzamelpagina met 10 dienst-secties x 10 accordeons. De ankernavigatie
   is een chip-rij (zelfde recept als .merk-chips); op desktop plakt hij
   onder de site-kop met een dekkende achtergrond + hairline — bewust
   zónder blur, want de enige blur van de site is de sticky header
   (DESIGN-SITE.md, don'ts). scroll-margin-top houdt de sectiekoppen vrij
   van de sticky lagen bij ankersprongen. */

.faq-anker {
  border-block: 1px solid var(--kleur-lijn);
  padding-block: var(--maat-3);
  background: var(--kleur-achtergrond);
}

.faq-anker__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.faq-anker__lijst a {
  display: inline-block;
  padding: 0.4em 0.85em;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  background: var(--kleur-vlak);
  color: var(--kleur-tekst);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 0.16s ease, color 0.16s ease;
}

.faq-anker__lijst a:hover {
  border-color: var(--kleur-accent);
  color: var(--kleur-accent-fel);
}

.pagina--faq {
  padding-block-end: var(--maat-5);
}

.faq-sectie {
  scroll-margin-top: 5.5rem;
}

.faq-sectie__kop {
  display: flex;
  align-items: center;
  gap: var(--maat-2);
}

.faq-sectie__kop .icoon--dienst {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
  flex: none;
}

@media (min-width: 64rem) {
  .faq-anker {
    position: sticky;
    top: 4.25rem;
    z-index: 90;
  }

  .faq-sectie {
    scroll-margin-top: 11rem;
  }
}

/* --- Overige pagina's (Task 3.6) -------------------------------------------- */
/* Zakelijk, over-ons, contact, partner, kennisbank, artikel en de twee
   juridische pagina's. Zelfde grammatica als de dienstpagina's: vlak +
   hairline voor diepte, signage-stem voor labels, cognac uitsluitend als
   accent. Veld-/invoerstijlen van de formulieren komen uit calculator.css
   (gedeelde componenten); hier staan alleen de paginacomposities. */

/* Over ons: het verhaal, geopend met de exacte claim + de signatuurlijn. */

.verhaal {
  display: grid;
  gap: var(--maat-4);
  max-width: 46em;
}

.verhaal__claim {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-weight: 560;
  letter-spacing: -0.012em;
  font-size: clamp(1.5rem, 2.2vw + 0.75rem, 2.125rem);
  line-height: 1.25;
  max-width: 18em;
}

.verhaal__lijn {
  max-width: 11rem;
}

.verhaal p:not(.verhaal__claim) {
  color: var(--kleur-tekst-zacht);
}

/* Contact: drie grote, klikbare kanalen. De belkaart is de primaire actie
   en draagt het accent als rand + icoon — nooit als heel cognac vlak. */

.kanaal-raster {
  display: grid;
  gap: var(--maat-3);
}

@media (min-width: 46rem) {
  .kanaal-raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kanaal-kaart {
  display: grid;
  gap: var(--maat-1);
  justify-items: start;
  padding: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--kleur-tekst);
  transition: border-color 0.16s ease;
  min-width: 0;
}

.kanaal-kaart:hover {
  border-color: var(--kleur-accent);
}

.kanaal-kaart--primair {
  border-color: var(--kleur-accent);
}

.kanaal-kaart--primair:hover {
  border-color: var(--kleur-accent-fel);
}

.kanaal-kaart__icoon {
  width: 22px;
  height: 22px;
  color: var(--kleur-accent);
  margin-block-end: var(--maat-2);
}

.kanaal-kaart__naam {
  font-weight: 620;
}

.kanaal-kaart__detail {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.kanaal-nootje {
  margin-block-start: var(--maat-3);
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

/* Formulieren buiten de calculator (contact, partner, reshipper). */

.vorm-kolom {
  max-width: 46em;
}

.vorm-paneel {
  margin-block-start: var(--maat-4);
  padding: clamp(var(--maat-4), 3vw, var(--maat-5));
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
}

.vorm-paneel .veld:first-of-type {
  margin-top: 0;
}

.vorm-verstuur {
  margin-block-start: var(--maat-4);
}

.vorm-succes {
  margin-block-start: var(--maat-4);
  padding: clamp(var(--maat-4), 3vw, var(--maat-5));
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
}

.vorm-succes[hidden] {
  display: none;
}

.vorm-succes__kop {
  font-size: 1.375rem;
  outline: none;
}

.vorm-succes__belofte,
.vorm-succes p {
  color: var(--kleur-tekst-zacht);
}

/* De toegekende reshipper-code: het ene moment waarop een waarde groot en
   cognac mag zijn — dit ís het resultaat van de aanmelding. */

.reshipper-code {
  display: grid;
  gap: var(--maat-1);
}

.reshipper-code__label {
  color: var(--kleur-tekst-zacht);
}

.reshipper-code__waarde {
  font-family: var(--font-display);
  font-variation-settings: var(--display-assen);
  font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem);
  letter-spacing: 0.04em;
  color: var(--kleur-accent-fel);
  font-variant-numeric: tabular-nums;
}

/* Upload-velden (partner): eigen rijtje per bewijsstuk. */

.veld--uploads {
  display: grid;
  gap: var(--maat-3);
}

.upload-veld {
  display: grid;
  gap: var(--maat-1);
}

.upload-veld label {
  font-size: 0.9375rem;
  color: var(--kleur-tekst-zacht);
}

.invoer--bestand {
  padding: 0.45em 0.55em;
  font-size: 0.9375rem;
}

.invoer--bestand::file-selector-button {
  margin-inline-end: var(--maat-3);
  padding: 0.35em 0.9em;
  background: var(--kleur-vlak-hoog);
  color: var(--kleur-tekst);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius-klein);
  font-family: var(--font-tekst);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.16s ease;
}

.invoer--bestand::file-selector-button:hover {
  border-color: var(--kleur-accent);
}

/* Partner: de eisenlijst — een checklist (bewust ongenummerd), elk punt
   met de ruit uit de bewegwijzering als marker. */

.eisen {
  display: grid;
  gap: var(--maat-4);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46em;
}

.eis {
  position: relative;
  padding-inline-start: calc(1rem + var(--maat-3));
  min-width: 0;
}

.eis::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--kleur-accent);
  transform: rotate(45deg);
}

.eis h3 {
  font-size: 1.0625rem;
  margin-block-end: var(--maat-1);
}

.eis p {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

.eisen-noot {
  margin-block-start: var(--maat-4);
  max-width: 46em;
  color: var(--kleur-tekst-zacht);
  font-size: 0.875rem;
}

/* Kennisbank-index: rustige kaartenrij. */

.kb-lijst {
  display: grid;
  gap: var(--maat-3);
}

.kb-kaart {
  display: grid;
  gap: var(--maat-2);
  justify-items: start;
  padding: var(--maat-4);
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--radius);
  min-width: 0;
}

.kb-kaart__datum {
  color: var(--kleur-tekst-zacht);
}

.kb-kaart__titel {
  font-size: clamp(1.25rem, 1.4vw + 0.75rem, 1.625rem);
  max-width: 24em;
}

.kb-kaart__titel a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s ease;
}

.kb-kaart__titel a:hover {
  color: var(--kleur-accent-fel);
}

.kb-kaart__teaser {
  color: var(--kleur-tekst-zacht);
  max-width: 46em;
}

/* Artikel: leesbaar proza op één maat (66ch-achtige 46em-kolom). */

.artikel {
  padding-block: var(--maat-6) 0;
}

.artikel__kop {
  display: grid;
  gap: var(--maat-3);
  max-width: 46em;
  margin-block-end: var(--maat-5);
}

.artikel__kop h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3.125rem);
  max-width: 18em;
}

.artikel__meta {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

.artikel__inhoud {
  display: grid;
  gap: var(--maat-3);
  max-width: 46em;
}

.artikel__inhoud h2 {
  font-size: clamp(1.375rem, 1.6vw + 0.8rem, 1.75rem);
  margin-block-start: var(--maat-4);
  max-width: 22em;
}

.artikel__lead {
  font-size: 1.125rem;
}

.artikel__lead ~ p:not(.artikel__lead) {
  color: var(--kleur-tekst-zacht);
}

.artikel__inhoud > p:not(.artikel__lead) {
  color: var(--kleur-tekst-zacht);
}

.reken-tabel {
  width: 100%;
  max-width: 34em;
  border-collapse: collapse;
  margin-block: var(--maat-2);
  font-variant-numeric: tabular-nums;
}

.reken-tabel th,
.reken-tabel td {
  padding: 0.6em 0;
  border-bottom: 1px solid var(--kleur-lijn);
  text-align: left;
  font-weight: 400;
  color: var(--kleur-tekst-zacht);
}

.reken-tabel td {
  text-align: right;
  white-space: nowrap;
}

.reken-tabel__totaal th,
.reken-tabel__totaal td {
  color: var(--kleur-tekst);
  font-weight: 620;
  border-bottom: 0;
}

.artikel__links {
  margin-block: var(--maat-5) var(--maat-6);
  padding-block-start: var(--maat-4);
  border-top: 1px solid var(--kleur-lijn);
  max-width: 46em;
}

.artikel__links-kop {
  color: var(--kleur-tekst-zacht);
  margin-block-end: var(--maat-3);
}

.artikel__links ul {
  display: grid;
  gap: var(--maat-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Juridische pagina's: kale, leesbare blokken zonder verkooppraat. */

.juridisch-datum {
  color: var(--kleur-tekst-zacht);
  font-size: 0.875rem;
  margin-block-start: var(--maat-2);
}

.juridisch {
  display: grid;
  gap: var(--maat-5);
  max-width: 46em;
}

.juridisch__blok {
  display: grid;
  gap: var(--maat-2);
}

.juridisch__blok h2 {
  font-size: 1.25rem;
}

.juridisch__blok p {
  color: var(--kleur-tekst-zacht);
  font-size: 0.9375rem;
}

/* --- Responsief ------------------------------------------------------------ */

/* De kop schakelt EERDER om dan de rest van de pagina, en dat is geen
   smaakkeuze maar rekenwerk. Het menu heeft zes items en de langste taal is
   Duits ("Startseite · Leistungen · Rechner · Häufige Fragen · Kontakt ·
   Sendungsverfolgung") plus het telefoonnummer op één regel past pas vanaf
   ongeveer 1145 px binnen de omslag (max. 74rem). Onder 72rem (1152 px) krijgt
   dus iedereen het klapmenu — ook al zou het Nederlandse menu daar nog ruim
   passen. Eén breekpunt voor alle talen is beter dan een kop die alleen in het
   Duits over de rand loopt; de gangbare laptopbreedtes (1280, 1366, 1440,
   1536, 1920) zitten er allemaal boven.

   Meten, niet gokken: /tmp-metingen met een echte browser over vier talen en
   achttien breedtes, controlerend op afgebroken menu-items én op horizontale
   overflow. Verander je een menulabel of voeg je een item toe, meet dan
   opnieuw — de marge boven dit breekpunt is nog geen 10 px in het Duits. */
@media (max-width: 72rem) {
  .hoofdnav,
  .kop-telefoon {
    display: none;
  }

  .menu-mobiel {
    display: block;
  }

  .site-kop__binnen {
    justify-content: space-between;
  }
}

@media (max-width: 60rem) {
  .site-voet__boven {
    grid-template-columns: 1fr 1fr;
  }

  .site-voet__merk {
    grid-column: 1 / -1;
  }
}

@media (max-width: 37.5rem) {
  /* Compacte kop: alles moet zonder horizontale overflow op 390px passen. */
  .site-kop__binnen {
    gap: var(--maat-3);
  }

  .site-kop__acties {
    gap: var(--maat-2);
  }

  .logo-svg {
    height: 42px;
  }

  .taalkeuze summary .icoon--chevron {
    display: none;
  }

  .taalkeuze summary {
    min-height: 42px;
  }

  /* Label visueel weg maar voorleesbaar (zie .visueel-verborgen); de
     accessible name blijft daarnaast geborgd via aria-label in base.html. */
  .knop--whatsapp span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .knop--whatsapp {
    position: relative;
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
  }

  .hero {
    padding-block: var(--maat-6) var(--maat-5);
  }

  .site-voet__boven {
    grid-template-columns: 1fr;
    gap: var(--maat-4);
    padding-block: var(--maat-5);
  }

  .site-voet {
    margin-top: var(--maat-6);
  }
}

/* --- Beweging uit? Dan alles stil. ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Trustpilot ------------------------------------------------------------ */
/* Eén widget, twee omlijstingen. De vaste min-hoogte is er tegen layout shift:
   het script van Trustpilot hangt zijn iframe pas ná de eerste paint in, en
   zonder gereserveerde ruimte springt de pagina dan. Zelfde hoogte als
   config.TRUSTPILOT_HOOGTE — houd die twee gelijk. */

.trustpilot__kop {
  margin-block-end: var(--maat-2);
}

.trustpilot .trustpilot-widget {
  min-height: 52px;
}

/* Terugval als het script van Trustpilot niet laadt: een gewone link, in de
   huisstijl in plaats van een kale browserlink. Zodra het script draait
   vervangt het de inhoud van .trustpilot-widget door een iframe en is deze
   regel zonder effect. */
.trustpilot .trustpilot-widget > a {
  display: inline-block;
  color: var(--kleur-accent);
  font-weight: 620;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Blok: onder de reviewmuur op de homepage. */
.trustpilot--blok {
  margin-block-start: var(--maat-5);
  padding-block-start: var(--maat-4);
  border-block-start: 1px solid var(--kleur-lijn);
}

/* Voet: compact, in de contactkolom. De voettekst staat op --kleur-vlak, dus
   de terugvallink krijgt daar dezelfde accentkleur en blijft ruim boven 4.5:1. */
.trustpilot--voet {
  margin-block-start: var(--maat-3);
}

.trustpilot--voet .trustpilot-widget {
  min-height: 52px;
  max-width: 22rem;
}

/* --- Dienstenoverzicht (/diensten) ------------------------------------------ */
/* Negen blokken onder elkaar: een rond uitgesneden beeld naast kop, korte
   omschrijving, drie punten met een vinkje, het vanaf-bedrag en de link naar de
   dienstpagina. Het beeld staat om en om links en rechts; op de telefoon staat
   het altijd boven de tekst. De ronde uitsnede is óók de reden dat de scènes in
   static/site/img/diensten hun onderwerp in het midden houden: een vierkante
   uitsnede van een 960x600-scène snijdt links en rechts weg. Halverwege breekt
   een donkere band (--kleur-diep) het ritme. */

.dienstblok {
  padding-block: var(--maat-5);
}

/* Het beeld krijgt een eigen, begrensde kolom in plaats van een deel van de
   breedte: een ronde uitsnede die met het scherm meegroeit wordt op een breed
   scherm een schijf van een halve meter, en dan staat de tekst ernaast te
   verdrinken. De gespiegelde blokken draaien de twee sporen om (zie onder). */
.dienstblok__binnen {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(var(--maat-4), 5vw, var(--maat-6));
}

.dienstblok--gespiegeld .dienstblok__binnen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
}

/* min-width: 0 op de kolomkinderen: een grid-item krimpt anders niet onder
   zijn min-content-breedte, en dan duwt één lange dienstnaam de hele pagina
   over de schermrand. */
.dienstblok__figuur,
.dienstblok__tekst {
  min-width: 0;
}

/* Even blokken: beeld rechts. Alleen de plaatsing wisselt — in de bronvolgorde
   blijft het beeld vóór de tekst staan, zodat de telefoonweergave en een
   schermlezer overal dezelfde volgorde krijgen. */
.dienstblok--gespiegeld .dienstblok__figuur {
  grid-column: 2;
  grid-row: 1;
}

.dienstblok--gespiegeld .dienstblok__tekst {
  grid-column: 1;
  grid-row: 1;
}

.dienstblok__beeld {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--kleur-tint);
  box-shadow: 0 0 0 1px var(--kleur-lijn);
}

.dienstblok__nr {
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--maat-2);
}

.dienstblok__kop {
  max-width: 14em;
  font-size: clamp(1.5rem, 1.8vw + 0.95rem, 2.125rem);
}

.dienstblok__kort {
  max-width: 34em;
  margin-block-start: var(--maat-3);
  font-size: 1.0625rem;
  color: var(--kleur-tekst-zacht);
}

.dienstblok__punten {
  display: grid;
  gap: var(--maat-2);
  margin-block-start: var(--maat-4);
}

.dienstblok__punt {
  position: relative;
  padding-inline-start: 1.75rem;
  font-weight: 560;
}

/* Het vinkje is getekend met twee randen onder 45 graden, niet gezet als
   teken: U+2713 valt buiten de unicode-range van de zelf gehoste letters en
   zou dus per besturingssysteem uit een ander font komen. */
.dienstblok__punt::before {
  content: "";
  position: absolute;
  inset-block-start: 0.42em;
  inset-inline-start: 0.2rem;
  width: 0.66rem;
  height: 0.36rem;
  border-inline-start: 2px solid var(--kleur-accent);
  border-block-end: 2px solid var(--kleur-accent);
  transform: rotate(-45deg);
}

.dienstblok__prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--maat-2);
  margin-block-start: var(--maat-4);
}

.dienstblok__bedrag {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dienstblok__bedrag--maatwerk {
  font-size: 1.25rem;
  color: var(--kleur-tekst-zacht);
}

.dienstblok__prijslabel {
  font-size: 0.875rem;
  color: var(--kleur-tekst-zacht);
}

/* De adempauze halverwege. Op deze grond is --kleur-accent alleen toegestaan
   als vlak (de knop); de letter gebruikt --kleur-accent-zacht. */
.dienstband {
  margin-block: var(--maat-5);
  background: var(--kleur-diep);
  color: var(--kleur-diep-tekst);
  padding-block: var(--maat-6);
}

.dienstband__binnen {
  display: grid;
  gap: var(--maat-3);
  justify-items: start;
}

.dienstband__lijn {
  width: min(100%, 22rem);
  margin-block-end: var(--maat-2);
  color: var(--kleur-accent-zacht);
}

.dienstband__label {
  color: var(--kleur-accent-zacht);
}

.dienstband__belofte {
  max-width: 15em;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.4vw + 0.9rem, 2.75rem);
  font-weight: 650;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.dienstband__knop {
  margin-block-start: var(--maat-2);
}

@media (max-width: 60rem) {
  .dienstblok__binnen {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--maat-4);
  }

  /* Eén kolom: het beeld staat overal bovenaan, ook in de gespiegelde blokken
     — tekst boven een beeld dat pas daarna komt leest als een ander blok.
     De gespiegelde variant moet hier expliciet terug naar één spoor: haar
     eigen regel hierboven is specifieker en zou anders de tweede kolom van
     24rem vasthouden, met een tekstkolom van een paar tekens breed als
     gevolg. */
  .dienstblok--gespiegeld .dienstblok__binnen {
    grid-template-columns: minmax(0, 1fr);
  }

  .dienstblok--gespiegeld .dienstblok__figuur,
  .dienstblok--gespiegeld .dienstblok__tekst {
    grid-column: 1;
    grid-row: auto;
  }

  .dienstblok__beeld {
    max-width: 24rem;
    margin-inline: auto;
  }
}

@media (max-width: 37.5rem) {
  .dienstblok {
    padding-block: var(--maat-4);
  }

  .dienstband {
    padding-block: var(--maat-5);
  }
}

/* Externe navigatielink (tracking). Het pijltje zegt "je verlaat deze site" —
   dat hoort een bezoeker te weten vóór hij klikt, niet erna. Puur decoratief,
   dus aria-hidden via content: de linktekst zelf blijft "Tracking". */
.nav-extern::after {
  content: "\2197";
  margin-inline-start: 0.25em;
  font-size: 0.85em;
  vertical-align: baseline;
  opacity: 0.55;
}