/* ==========================================================================
   DESIGN TOKENS – DGM Vloerwerken & Tegelwerken
   --------------------------------------------------------------------------
   Eén centrale plek voor kleur, typografie, ruimte, radius en beweging.
   Alles op de site verwijst hiernaar. Wil je de site van karakter laten
   veranderen, dan gebeurt dat hier en nergens anders.

   Uitgangspunt van het palet. Het logogroen (#20c820) blijft de merkkleur,
   maar is verdiept tot een tint die tekst en knoppen kán dragen: het
   origineel haalt 2,25:1 op wit en is als tekstkleur onbruikbaar.

   Daarnaast één neutraal familielid dat rechtstreeks uit het werk komt:
   arduin, de grijsblauw van Belgische blauwe steen. Dat houdt het groen weg
   van de tuinman-associatie en zet het naast het materiaal waar DGM het
   sterkst in is.

   Elke combinatie hieronder is nagerekend, niet op het oog gekozen.
   Draai `npm run contrast` na elke wijziging.
   ========================================================================== */

:root {
  /* ---- Kleur: donkere pool -------------------------------------------- */
  --c-inkt: #0f1a13;         /* diepste toon, donkere secties              */
  --c-den: #152a1c;          /* kaarten binnen donkere secties             */

  /* ---- Kleur: merkgroen ------------------------------------------------
     Eén waarde voor twee rollen, en dat kan hier omdat #17662A zowel witte
     tekst draagt (7,07:1) als zelf leesbaar is op kalk (6,27:1) en op zand
     (5,52:1). Er is dus geen aparte accenttint nodig – en dat scheelt een
     hele klasse fouten waarbij het accent op de ene band wel en op de
     andere net niet haalt.
     -------------------------------------------------------------------- */
  --c-groen: #17662a;
  --c-groen-diep: #0f5c28;   /* hover van het knopvlak, 8,13:1 met wit     */
  --c-groen-licht: #5cb86d;  /* accenttekst op donkere grond, 7,25:1       */
  --c-groen-waas: #e4ede5;   /* zeer licht vlak                            */

  /* ---- Kleur: lichte pool --------------------------------------------- */
  --c-kalk: #f4f1ea;         /* hoofdachtergrond, warme kalk               */
  --c-zand: #e8e3d7;         /* tweede lichte tint, afwisselende banden    */

  /* ---- Kleur: arduin (Belgische blauwe steen) -------------------------- */
  --c-arduin: #48565e;
  --c-arduin-diep: #3d4a52;

  /* ---- Lijnen ----------------------------------------------------------
     --c-lijn is decoratief: de voeg tussen twee vlakken. Die hoeft geen
     3:1 te halen, want er hangt geen betekenis aan.
     --c-rand is wél een bedieningselement – de rand van een invoerveld –
     en haalt 3,79:1 op kalk en 3,33:1 op zand.
     -------------------------------------------------------------------- */
  --c-lijn: #d8d2c4;
  --c-lijn-zacht: color-mix(in oklab, var(--c-lijn) 55%, transparent);
  --c-lijn-invert: color-mix(in oklab, var(--c-groen-licht) 24%, transparent);
  --c-rand: #807a6c;

  /* ---- Kleur: functioneel ---------------------------------------------- */
  --c-focus: #17662a;
  --c-fout: #8f2f14;
  --c-ok: #17662a;

  /* ---- Tekstkleuren ----------------------------------------------------- */
  --t-sterk: #101a14;        /* koppen op licht, 15,78:1                   */
  --t-body: #2e3a33;         /* lopende tekst op licht, 10,52:1            */
  --t-zacht: #55625b;        /* bijschriften op licht, 5,67:1 / 4,99:1     */
  --t-invert: #f2f0e9;       /* koppen op donker, 15,64:1                  */
  --t-invert-body: #d9ded8;  /* lopende tekst op donker, 13,07:1           */
  --t-invert-zacht: #a9b4ac; /* bijschriften op donker, 8,33:1             */

  /* ---- Oppervlakken ----------------------------------------------------- */
  --vlak: var(--c-kalk);
  --vlak-alt: var(--c-zand);

  /* ---- Typografie -------------------------------------------------------
     Archivo voor koppen en labels: een grotesk met een breedte-as, zodat
     een kop op wdth 112 iets krijgt van een gevelopschrift. Inter voor
     lopende tekst, omdat het daarvoor gemaakt is.
     -------------------------------------------------------------------- */
  --f-kop: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-tekst: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --fs-hero: clamp(2.6rem, 1.5rem + 4.6vw, 5.4rem);
  --fs-h1: clamp(2.05rem, 1.4rem + 2.9vw, 3.7rem);
  --fs-h2: clamp(1.75rem, 1.32rem + 1.9vw, 2.95rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.66vw, 1.7rem);
  --fs-lead: clamp(1.19rem, 1.04rem + 0.65vw, 1.55rem);
  --fs-tekst: clamp(1.075rem, 0.98rem + 0.42vw, 1.33rem);
  --fs-klein: clamp(0.9rem, 0.86rem + 0.16vw, 0.95rem);
  --fs-label: 0.79rem;

  --lh-kop: 1.06;
  --lh-tekst: 1.72;

  /* ---- Ruimte: schaal van 4 px ------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  --sectie-y: clamp(3.5rem, 2rem + 6vw, 8rem);
  --marge-x: clamp(1.25rem, 4vw, 3rem);

  /* ---- Maten ------------------------------------------------------------ */
  --container: 1200px;
  --container-breed: 1440px;
  --tekstkolom: 68ch;

  /* ---- Vorm -------------------------------------------------------------
     Een tegel heeft geen ronde hoek. Vlakken en foto's krijgen radius 0;
     alleen knoppen en invoervelden een minimale 2px, zodat ze als
     bedieningselement herkenbaar blijven.
     -------------------------------------------------------------------- */
  --radius: 0;
  --radius-knop: 2px;

  /* ---- Diepte -----------------------------------------------------------
     Vrijwel niets. Diepte komt van kleurvlakken en van één haarlijn, niet
     van een waas. Alleen elementen die écht boven de pagina zweven krijgen
     een schaduw.
     -------------------------------------------------------------------- */
  --schaduw-zwevend: 0 2px 24px rgb(15 26 19 / 0.16);

  /* ---- Beweging --------------------------------------------------------- */
  --duur-snel: 150ms;
  --duur-normaal: 220ms;
  --duur-traag: 500ms;
  --duur-beeld: 700ms;
  --soepel: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ==========================================================================
   BASIS – lettertypes, reset, typografie, focus
   ========================================================================== */

/* ---- Lettertypes: zelf gehost, geen externe verbinding ------------------ */

@font-face {
  font-family: "Archivo";
  src: url("/wp-content/uploads/dgm/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("/wp-content/uploads/dgm/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/dgm/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/wp-content/uploads/dgm/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Reset --------------------------------------------------------------- */

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

* {
  margin: 0;
}

html {
  /* Bricks Advanced Themer zet de wortelmaat op 10px (de 62,5%-conventie).
     Deze stylesheet is geschreven voor een wortel van 16px, dus zonder deze
     regel rendert alles op 62,5% van de bedoelde maat: lopende tekst werd
     10,9px in plaats van 17,4px. Staat hier en niet in de tokens, omdat het
     een reset is en geen ontwerpkeuze. */
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Voorkomt dat een anker onder de vaste kop verdwijnt. */
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--f-tekst);
  font-size: var(--fs-tekst);
  line-height: var(--lh-tekst);
  color: var(--t-body);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Ruimte voor de vaste actiebalk op mobiel. */
  padding-bottom: env(safe-area-inset-bottom);
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* Alleen lopende tekst krijgt bolletjes terug. */
.rijk ul {
  padding-left: 1.2em;
  list-style: disc;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ---- Typografie ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--f-kop);
  font-weight: 700;
  font-stretch: 112%;
  line-height: var(--lh-kop);
  letter-spacing: -0.02em;
  color: var(--t-sterk);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
}
h2 {
  font-size: var(--fs-h2);
}
h3 {
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

p,
li {
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--t-body);
}

/* De afstand tussen een kop en de lead eronder hoort hier geregeld te worden,
   niet per sjabloon. In de WordPress-uitvoering stond hij op acht van de
   twaalf sjablonen niet ingesteld, en dan plakte de lead tegen de H1. */
h1 + .lead,
h2 + .lead {
  margin-top: var(--s-6);
}

.tekst {
  max-width: var(--tekstkolom);
}

.tekst > * + * {
  margin-top: var(--s-4);
}

.klein {
  font-size: var(--fs-klein);
}

.zacht {
  color: var(--t-zacht);
}

strong,
b {
  font-weight: 650;
  color: var(--t-sterk);
}

/* ---- Links --------------------------------------------------------------- */

a {
  color: inherit;
}

.rijk a,
a.link {
  color: var(--c-groen);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duur-snel) var(--soepel);
}

.rijk a:hover,
a.link:hover {
  color: var(--c-groen-diep);
  text-decoration-thickness: 2px;
}

/* ---- Focus ---------------------------------------------------------------
   Altijd zichtbaar. Nooit `outline: none` zonder vervanging.
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 1px;
}

.op-donker :focus-visible {
  outline-color: var(--c-groen-licht);
}

/* ---- Overslaan naar inhoud ----------------------------------------------- */

.overslaan {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--c-inkt);
  color: var(--t-invert);
  font-family: var(--f-kop);
  font-size: var(--fs-klein);
  border-radius: var(--radius-knop);
  transform: translateY(-160%);
  transition: transform var(--duur-normaal) var(--soepel);
}

.overslaan:focus {
  transform: translateY(0);
}

/* ---- Selectie ------------------------------------------------------------ */

::selection {
  background: var(--c-groen);
  color: #fff;
}

/* ---- Beweging uitzetten --------------------------------------------------
   Wie `reduce` aan heeft staan, krijgt de volledige pagina meteen te zien.
   De reveal-klasse wordt hier expliciet teruggezet, want die wordt door
   JavaScript aangezet en zou anders een lege pagina achterlaten.
   -------------------------------------------------------------------------- */

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

  .reveal,
  .reveal > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   LAYOUT – container, secties, rasters
   Mobile-first: elke regel geldt vanaf klein en wordt bij min-width uitgebreid.
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--marge-x);
}

.container-breed {
  max-width: var(--container-breed);
}

.container-smal {
  max-width: 780px;
}

/* ---- Secties ------------------------------------------------------------- */

.sectie {
  padding-block: var(--sectie-y);
}

.sectie-kort {
  padding-block: calc(var(--sectie-y) * 0.55);
}

.op-zand {
  background: var(--c-zand);
}

.op-donker {
  background: var(--c-inkt);
  color: var(--t-invert-body);
}

.op-donker h1,
.op-donker h2,
.op-donker h3,
.op-donker strong {
  color: var(--t-invert);
}

.op-donker .zacht {
  color: var(--t-invert-zacht);
}

.op-donker .rijk a {
  color: var(--c-groen-licht);
}

/* ---- Het sectielabel: nummer, kapitaal, en de voeg eronder ---------------
   Het herkenningsteken van deze site. Zie docs/04-designsysteem.md §4.
   -------------------------------------------------------------------------- */

.label {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-zacht);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-lijn);
  margin-bottom: var(--s-8);
}

.op-donker .label {
  color: var(--t-invert-zacht);
  border-bottom-color: var(--c-lijn-invert);
}

.label__nr {
  color: var(--c-groen);
  font-variant-numeric: tabular-nums;
}

.op-donker .label__nr {
  color: var(--c-groen-licht);
}

/* ---- Sectiekop ----------------------------------------------------------- */

.sectiekop {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-12);
}

.sectiekop p {
  max-width: 60ch;
}

@media (min-width: 800px) {
  .sectiekop--gedeeld {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-12);
    align-items: end;
  }
}

/* ---- Rasters ------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 560px) {
  .raster--2,
  .raster--3,
  .raster--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .raster--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .raster--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Tweekolomsopmaak: tekst naast beeld of naast een lijst. */
.duo {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-16);
    align-items: start;
  }
  .duo--smal-links {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .duo--smal-rechts {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---- Beeldkader ----------------------------------------------------------
   Vaste verhouding, zodat er geen enkele layout shift optreedt. Het beeld
   wordt nooit groter getoond dan zijn eigen pixels – zie het designsysteem.
   -------------------------------------------------------------------------- */

.img-frame {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 3);
  overflow: hidden;
  background: var(--c-zand);
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duur-beeld) var(--soepel);
}

a:hover .img-frame img,
.kaart:hover .img-frame img {
  transform: scale(1.03);
}

/* ---- Reveal --------------------------------------------------------------
   Standaard zichtbaar. JavaScript zet `js-reveal` op <html> en pas dán
   wordt er iets verborgen. Zonder JavaScript ziet de bezoeker gewoon de
   volledige pagina.
   -------------------------------------------------------------------------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duur-traag) var(--soepel),
    transform var(--duur-traag) var(--soepel);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Rasteritems komen na elkaar binnen, 60 ms uit elkaar. */
.js-reveal .reveal-groep > * {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duur-traag) var(--soepel),
    transform var(--duur-traag) var(--soepel);
}

.js-reveal .reveal-groep.is-in > * {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal-groep.is-in > *:nth-child(2) { transition-delay: 60ms; }
.js-reveal .reveal-groep.is-in > *:nth-child(3) { transition-delay: 120ms; }
.js-reveal .reveal-groep.is-in > *:nth-child(4) { transition-delay: 180ms; }
.js-reveal .reveal-groep.is-in > *:nth-child(5) { transition-delay: 240ms; }
.js-reveal .reveal-groep.is-in > *:nth-child(6) { transition-delay: 300ms; }

/* ---- Hulpklassen --------------------------------------------------------- */

.verborgen-visueel {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.stapel > * + * {
  margin-top: var(--s-4);
}
.stapel-ruim > * + * {
  margin-top: var(--s-8);
}

/* ==========================================================================
   COMPONENTEN – knoppen, kop, voet, kaarten, formulier, FAQ
   ========================================================================== */

/* ---- Knoppen -------------------------------------------------------------
   Minimaal 48 px hoog, zodat het aanraakvlak op mobiel ruim boven de
   44 x 44 px van WCAG 2.2 blijft.
   -------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--radius-knop);
  font-family: var(--f-kop);
  font-size: 0.95rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--duur-snel) var(--soepel),
    border-color var(--duur-snel) var(--soepel),
    color var(--duur-snel) var(--soepel);
}

.knop--primair {
  background: var(--c-groen);
  color: #fff;
}
.knop--primair:hover {
  background: var(--c-groen-diep);
}

.knop--secundair {
  border: 1px solid var(--c-arduin);
  color: var(--t-sterk);
}
.knop--secundair:hover {
  background: var(--c-arduin);
  color: #fff;
}

/* Op donkere grond draagt een kalkvlak met inkttekst het beste: 15,81:1. */
.op-donker .knop--secundair {
  border-color: color-mix(in oklab, var(--t-invert) 45%, transparent);
  color: var(--t-invert);
}
.op-donker .knop--secundair:hover {
  background: var(--c-kalk);
  border-color: var(--c-kalk);
  color: var(--c-inkt);
}

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* Op mobiel staat het telefoonnummer al in de vaste actiebalk onderaan.
   Een tweede belknop erboven levert niets op en duwt de rest naar beneden;
   op desktop, waar die balk er niet is, hoort hij er wel te staan. */
.niet-op-mobiel {
  display: none;
}

@media (min-width: 1080px) {
  .niet-op-mobiel {
    display: inline-flex;
  }
}

/* ---- Pijllink ------------------------------------------------------------ */

.pijl {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  /* Deze link staat zelfstandig aan het eind van een blok, niet in een
     lopende zin. Hij valt dus niet onder de uitzondering voor inline links
     in WCAG 2.5.8, en krijgt een aanraakvlak van volle hoogte. */
  min-height: 44px;
  font-family: var(--f-kop);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-groen);
  text-decoration: none;
}
.pijl::after {
  content: "→";
  transition: transform var(--duur-normaal) var(--soepel);
}
.pijl:hover::after {
  transform: translateX(4px);
}
.op-donker .pijl {
  color: var(--c-groen-licht);
}

/* ---- Kop ----------------------------------------------------------------- */

.kop {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--c-kalk) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-lijn-zacht);
}

.kop__balk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 72px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex-shrink: 0;
  /* Het logo is 34 px hoog; het aanraakvlak eromheen wordt 44. */
  min-height: 44px;
}

.merk img {
  height: 34px;
  width: auto;
}

.merk__tekst {
  display: none;
}

@media (min-width: 1080px) {
  .merk__tekst {
    display: block;
    font-family: var(--f-kop);
    font-size: var(--fs-label);
    font-weight: 600;
    font-stretch: 118%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-zacht);
    border-left: 1px solid var(--c-lijn);
    padding-left: var(--s-3);
    line-height: 1.4;
  }
}

/* ---- Navigatie ----------------------------------------------------------- */

.nav {
  display: none;
}

.nav__lijst {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__link {
  font-family: var(--f-kop);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--t-body);
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
  transition: color var(--duur-snel) var(--soepel);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--c-groen);
}

.nav__link[aria-current="page"] {
  border-bottom-color: var(--c-groen);
}

.nav__knop {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-kop);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--t-body);
  padding-block: var(--s-2);
}

.nav__knop svg {
  transition: transform var(--duur-normaal) var(--soepel);
}
.nav__knop[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Het uitklappaneel: papier met inkt, niet donker op donker. */
.uitklap {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  background: var(--c-kalk);
  border-bottom: 1px solid var(--c-lijn);
  box-shadow: var(--schaduw-zwevend);
  padding-block: var(--s-8);
}

.uitklap[hidden] {
  display: none;
}

.uitklap__lijst {
  display: grid;
  gap: var(--s-1);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 1080px) {
  .uitklap__lijst {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.uitklap__item {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  padding: var(--s-3);
  text-decoration: none;
  border-radius: var(--radius-knop);
  transition: background-color var(--duur-snel) var(--soepel);
}

.uitklap__item:hover {
  background: var(--c-groen-waas);
}

.uitklap__nr {
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--c-groen);
  font-variant-numeric: tabular-nums;
}

.uitklap__naam {
  font-family: var(--f-kop);
  font-weight: 600;
  color: var(--t-sterk);
  display: block;
}

.uitklap__kort {
  font-size: var(--fs-klein);
  color: var(--t-zacht);
  display: block;
  margin-top: 2px;
}

@media (min-width: 1080px) {
  .nav {
    display: block;
  }
}

/* ---- Hamburger en mobiel menu --------------------------------------------
   De regel die de hamburger op desktop verbergt staat hieronder, ná de
   basisregel. Stond hij erboven, dan won `display: inline-flex` alsnog –
   gelijke specificiteit, en dan telt de volgorde in het bestand.
   -------------------------------------------------------------------------- */

.kop__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--s-3) * -1);
}

.kop__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--t-sterk);
  position: relative;
  transition: background-color var(--duur-snel) var(--soepel);
}
.kop__hamburger span::before,
.kop__hamburger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--t-sterk);
  transition: transform var(--duur-normaal) var(--soepel);
}
.kop__hamburger span::before {
  top: -7px;
}
.kop__hamburger span::after {
  top: 7px;
}

.kop__hamburger[aria-expanded="true"] span {
  background: transparent;
}
.kop__hamburger[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}
.kop__hamburger[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

.mobielmenu {
  position: fixed;
  inset: 72px 0 0;
  z-index: 99;
  background: var(--c-kalk);
  overflow-y: auto;
  padding: var(--s-8) 0 var(--s-32);
}

.mobielmenu[hidden] {
  display: none;
}

@media (min-width: 1080px) {
  .kop__hamburger {
    display: none;
  }
}

.mobielmenu__groep + .mobielmenu__groep {
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--c-lijn);
}

.mobielmenu a {
  display: block;
  padding: var(--s-3) 0;
  font-family: var(--f-kop);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--t-sterk);
  text-decoration: none;
  min-height: 44px;
}

.mobielmenu .zacht {
  font-family: var(--f-tekst);
  font-size: var(--fs-klein);
  font-weight: 400;
}

@media (min-width: 1080px) {
  .mobielmenu {
    display: none !important;
  }
}

/* ---- Vaste actiebalk op mobiel -------------------------------------------
   Bellen en offerte aanvragen altijd binnen duimbereik. Punt 10 van het
   SEO-plan: "bellen én formulier, allebei zichtbaar zonder scrollen".
   -------------------------------------------------------------------------- */

.actiebalk {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-lijn);
  box-shadow: var(--schaduw-zwevend);
  padding-bottom: env(safe-area-inset-bottom);
}

.actiebalk a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 56px;
  font-family: var(--f-kop);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.actiebalk__bellen {
  background: var(--c-kalk);
  color: var(--t-sterk);
}

.actiebalk__offerte {
  background: var(--c-groen);
  color: #fff;
}

@media (min-width: 1080px) {
  .actiebalk {
    display: none;
  }
}

/* Zorgt dat de laatste sectie niet onder de actiebalk verdwijnt. */
@media (max-width: 1079px) {
  .voet {
    padding-bottom: calc(var(--s-16) + 56px);
  }
}

/* ---- Kruimelpad ---------------------------------------------------------- */

.kruimels {
  padding-block: var(--s-4);
  font-size: var(--fs-klein);
  color: var(--t-zacht);
}

.kruimels ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.kruimels li + li::before {
  content: "/";
  margin-right: var(--s-2);
  color: var(--c-rand);
}

.kruimels a {
  text-decoration: none;
}
.kruimels a:hover {
  text-decoration: underline;
}

.kruimels [aria-current="page"] {
  color: var(--t-body);
}

/* ---- Kaarten ------------------------------------------------------------- */

.kaart {
  display: block;
  text-decoration: none;
  color: inherit;
}

.kaart__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-3);
  font-size: var(--fs-klein);
}

.kaart__label {
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-groen);
}

.kaart h3 {
  margin-top: var(--s-2);
}

.kaart:hover h3 {
  color: var(--c-groen);
}

/* ---- FAQ: native <details>, geen JavaScript nodig ------------------------ */

.faq {
  border-top: 1px solid var(--c-lijn);
}

.faq__item {
  border-bottom: 1px solid var(--c-lijn);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  cursor: pointer;
  font-family: var(--f-kop);
  font-size: var(--fs-h3);
  font-weight: 600;
  font-stretch: 106%;
  color: var(--t-sterk);
  list-style: none;
  min-height: 44px;
}

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

.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-weight: 400;
  color: var(--c-groen);
  transition: transform var(--duur-normaal) var(--soepel);
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item summary:hover {
  color: var(--c-groen);
}

.faq__antwoord {
  padding-bottom: var(--s-6);
  max-width: var(--tekstkolom);
}

.op-donker .faq,
.op-donker .faq__item {
  border-color: var(--c-lijn-invert);
}

/* ---- Formulier ----------------------------------------------------------- */

.veld + .veld {
  margin-top: var(--s-6);
}

.veld label {
  display: block;
  font-family: var(--f-kop);
  font-size: var(--fs-klein);
  font-weight: 600;
  color: var(--t-sterk);
  margin-bottom: var(--s-2);
}

.veld__hint {
  display: block;
  font-family: var(--f-tekst);
  font-size: var(--fs-klein);
  font-weight: 400;
  color: var(--t-zacht);
  margin-top: 2px;
}

.veld input,
.veld select,
.veld textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3);
  background: #fff;
  border: 1px solid var(--c-rand);
  border-radius: var(--radius-knop);
  color: var(--t-body);
  transition: border-color var(--duur-snel) var(--soepel);
}

.veld textarea {
  min-height: 9rem;
  resize: vertical;
}

.veld input:hover,
.veld select:hover,
.veld textarea:hover {
  border-color: var(--c-arduin);
}

.veld input[aria-invalid="true"],
.veld textarea[aria-invalid="true"] {
  border-color: var(--c-fout);
  border-width: 2px;
}

/* Foutmelding in tekst, niet alleen in kleur. */
.veld__fout {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-klein);
  color: var(--c-fout);
  font-weight: 500;
}

.veld__fout:empty {
  display: none;
}

.veld--keuze {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}

.veld--keuze input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--c-groen);
}

.veld--keuze label {
  font-family: var(--f-tekst);
  font-weight: 400;
  font-size: var(--fs-klein);
  color: var(--t-body);
  margin-bottom: 0;
}

/* Honeypot: onzichtbaar voor mensen, aanwezig voor bots. */
.honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Voet ---------------------------------------------------------------- */

.voet {
  background: var(--c-inkt);
  color: var(--t-invert-body);
  padding-block: var(--s-16) var(--s-8);
}

.voet h2,
.voet h3 {
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-invert-zacht);
  margin-bottom: var(--s-4);
  letter-spacing: 0.16em;
}

.voet a {
  color: var(--t-invert-body);
  text-decoration: none;
}

.voet a:hover {
  color: var(--c-groen-licht);
  text-decoration: underline;
}

.voet__raster {
  display: grid;
  gap: var(--s-12);
}

@media (min-width: 700px) {
  .voet__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .voet__raster {
    grid-template-columns: 2fr 1.4fr 1fr 1.2fr;
    gap: var(--s-8);
  }
}

.voet__lijst li + li {
  margin-top: var(--s-2);
}

.voet__onder {
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-lijn-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-8);
  justify-content: space-between;
  font-size: var(--fs-klein);
  color: var(--t-invert-zacht);
}

/* ---- Markering voor ontbrekende gegevens --------------------------------
   Zichtbaar, niet weggemoffeld. Zoek op "INFORMATIE NODIG".
   -------------------------------------------------------------------------- */

.info-nodig {
  display: inline-block;
  padding: 2px var(--s-2);
  background: #fdf3d6;
  border: 1px dashed #9a7b1f;
  border-radius: var(--radius-knop);
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b5410;
}

.info-blok {
  padding: var(--s-6);
  background: #fdf3d6;
  border-left: 3px solid #9a7b1f;
  color: #4a3a0b;
}

.info-blok h3 {
  color: #4a3a0b;
  margin-bottom: var(--s-2);
}

/* ==========================================================================
   SECTIES – hero, diensten, feiten, stappen, projecten, banden
   ========================================================================== */

/* ---- Hero ----------------------------------------------------------------
   Geen paginabrede foto. Het bronmateriaal is maximaal 640 px breed; dat
   over een scherm van 1440 px uitrekken levert een wazig beeld op, en dat
   is precies de indruk die deze site niet mag maken.

   In de plaats draagt de typografie de pagina, met één beeld in een kader
   dat kleiner is dan zijn eigen resolutie. Dat houdt de LCP bovendien klein.
   Zie docs/04-designsysteem.md §1 en §5.
   -------------------------------------------------------------------------- */

.hero {
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--sectie-y);
  position: relative;
  overflow: hidden;
}

.hero__raster {
  display: grid;
  gap: var(--s-12);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-16);
  }
}

.hero h1 {
  font-size: var(--fs-hero);
  margin-block: var(--s-6) var(--s-6);
}

.hero .lead {
  max-width: 46ch;
}

.hero__knoppen {
  margin-top: var(--s-8);
}

/* Vertrouwenssignalen onder de knoppen: feiten, geen slogans. */
.hero__signalen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-lijn);
  font-size: var(--fs-klein);
  color: var(--t-zacht);
}

.hero__signalen li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.hero__signalen li::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--c-groen);
  flex-shrink: 0;
}

/* Het beeld, met een verspringend arduinvlak erachter – de voeg als motief. */
.hero__kolom {
  max-width: 440px;
  margin-inline: auto;
}

.hero__beeld {
  position: relative;
}

.hero__beeld::before {
  content: "";
  position: absolute;
  inset: var(--s-6) calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-6);
  background: var(--c-arduin);
  z-index: 0;
}

.hero__beeld .img-frame {
  position: relative;
  z-index: 1;
}

/* Het arduinvlak steekt var(--s-6) onder het beeld uit. Het bijschrift moet
   daar voorbij, anders staat donkergrijze tekst op donkergrijs vlak. */
.hero__bijschrift {
  margin-top: calc(var(--s-6) + var(--s-3));
  font-size: var(--fs-klein);
  color: var(--t-zacht);
}

/* ---- Materiaalband -------------------------------------------------------
   Geen iconenrij. De materialen zelf, benoemd zoals een klant ze noemt.
   -------------------------------------------------------------------------- */

.materialen {
  border-block: 1px solid var(--c-lijn);
  background: var(--c-zand);
}

.materialen__lijst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 700px) {
  .materialen__lijst {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.materialen__item {
  padding: var(--s-6) var(--s-4);
  border-left: 1px solid var(--c-lijn);
}

.materialen__item:first-child {
  border-left: 0;
}

@media (max-width: 699px) {
  .materialen__item:nth-child(odd) {
    border-left: 0;
  }
  .materialen__item:nth-child(n + 3) {
    border-top: 1px solid var(--c-lijn);
  }
}

.materialen__naam {
  display: block;
  font-family: var(--f-kop);
  font-weight: 700;
  font-stretch: 110%;
  color: var(--t-sterk);
}

.materialen__uitleg {
  display: block;
  font-size: var(--fs-klein);
  color: var(--t-zacht);
  margin-top: 2px;
}

/* ---- Dienstenlijst -------------------------------------------------------
   Geen raster van kaarten met schaduwen. Brede rijen, gescheiden door een
   voeg, met het nummer in de kantlijn. Leest als een inhoudsopgave.
   -------------------------------------------------------------------------- */

.diensten {
  border-top: 1px solid var(--c-lijn);
}

.dienstrij {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-lijn);
  text-decoration: none;
  transition: background-color var(--duur-snel) var(--soepel);
}

@media (min-width: 800px) {
  .dienstrij {
    grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr) auto;
    gap: var(--s-6);
    align-items: center;
    padding: var(--s-8) var(--s-4);
    margin-inline: calc(var(--s-4) * -1);
  }
}

.dienstrij:hover {
  background: var(--c-groen-waas);
}

.dienstrij__nr {
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.12em;
  color: var(--c-groen);
  font-variant-numeric: tabular-nums;
}

.dienstrij__naam {
  font-family: var(--f-kop);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  color: var(--t-sterk);
}

.dienstrij:hover .dienstrij__naam {
  color: var(--c-groen);
}

.dienstrij__kort {
  grid-column: 2;
  font-size: var(--fs-klein);
  color: var(--t-zacht);
  margin-top: var(--s-1);
}

@media (min-width: 800px) {
  .dienstrij__kort {
    grid-column: auto;
    margin-top: 0;
    font-size: var(--fs-tekst);
  }
}

.dienstrij__pijl {
  display: none;
}

@media (min-width: 800px) {
  .dienstrij__pijl {
    display: block;
    color: var(--c-groen);
    transition: transform var(--duur-normaal) var(--soepel);
  }
  .dienstrij:hover .dienstrij__pijl {
    transform: translateX(4px);
  }
}

/* ---- Feitentabel: de tweekolomslijst met voegen -------------------------- */

.feiten {
  border-top: 1px solid var(--c-lijn);
}

.feiten__rij {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--c-lijn);
}

@media (min-width: 700px) {
  .feiten__rij {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-6);
    align-items: baseline;
  }
}

.feiten__term {
  font-family: var(--f-kop);
  font-weight: 600;
  color: var(--t-sterk);
}

.feiten__uitleg {
  color: var(--t-body);
}

.op-donker .feiten,
.op-donker .feiten__rij {
  border-color: var(--c-lijn-invert);
}

/* ---- Stappen ------------------------------------------------------------- */

.stappen {
  counter-reset: stap;
}

.stap {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--c-lijn);
  counter-increment: stap;
}

@media (min-width: 800px) {
  .stap {
    grid-template-columns: 3.5rem minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--s-6);
    align-items: baseline;
  }
}

.stap::before {
  content: counter(stap, decimal-leading-zero);
  font-family: var(--f-kop);
  font-size: var(--fs-label);
  font-weight: 600;
  font-stretch: 118%;
  letter-spacing: 0.12em;
  color: var(--c-groen);
  font-variant-numeric: tabular-nums;
}

.stap__kop {
  font-family: var(--f-kop);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-stretch: 106%;
  color: var(--t-sterk);
}

.stap__tijd {
  display: block;
  font-family: var(--f-tekst);
  font-size: var(--fs-klein);
  font-weight: 400;
  color: var(--t-zacht);
  margin-top: 2px;
}

.op-donker .stap {
  border-color: var(--c-lijn-invert);
}
.op-donker .stap::before {
  color: var(--c-groen-licht);
}

/* ---- Projectraster -------------------------------------------------------
   Kolommen van ongeveer 380 px op desktop. Dat is bewust: de bronbeelden
   zijn 480 px breed, dus ze worden nooit opgeschaald.
   -------------------------------------------------------------------------- */

.projecten {
  display: grid;
  gap: var(--s-8) var(--s-6);
}

@media (min-width: 560px) {
  .projecten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .projecten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Fotostrook binnen een projectpagina. */
.fotostrook {
  display: grid;
  gap: var(--s-4);
}

@media (min-width: 560px) {
  .fotostrook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .fotostrook {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.foto figcaption {
  margin-top: var(--s-2);
  font-size: var(--fs-klein);
  color: var(--t-zacht);
}

/* ---- Materiaalband tussen secties ----------------------------------------
   Het enige brede beeld dat er ligt (2000 px), op ware grootte gebruikt.
   -------------------------------------------------------------------------- */

.tegelband {
  height: clamp(80px, 12vw, 160px);
  background-image: url("/wp-content/uploads/dgm/img/metrotegels-wit-band.jpg");
  background-size: cover;
  background-position: center;
  border-block: 1px solid var(--c-lijn);
}

/* ---- CTA-band ------------------------------------------------------------ */

.cta {
  background: var(--c-inkt);
  color: var(--t-invert-body);
}

.cta__raster {
  display: grid;
  gap: var(--s-8);
  align-items: center;
}

@media (min-width: 900px) {
  .cta__raster {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--s-16);
  }
}

.cta h2 {
  font-size: var(--fs-h2);
  color: var(--t-invert);
}

.cta p {
  margin-top: var(--s-4);
  max-width: 52ch;
}

.cta__contact {
  display: grid;
  gap: var(--s-4);
}

.cta__nummer {
  font-family: var(--f-kop);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  font-weight: 700;
  font-stretch: 110%;
  letter-spacing: -0.01em;
  color: var(--t-invert);
  text-decoration: none;
}

.cta__nummer:hover {
  color: var(--c-groen-licht);
}

/* ---- Werkgebied ---------------------------------------------------------- */

.zone {
  padding-block: var(--s-8);
  border-bottom: 1px solid var(--c-lijn);
}

.zone:last-child {
  border-bottom: 0;
}

@media (min-width: 800px) {
  .zone {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--s-8);
  }
}

.zone__gemeenten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

@media (min-width: 800px) {
  .zone__gemeenten {
    margin-top: 0;
  }
}

.zone__gemeenten li {
  padding: var(--s-1) var(--s-3);
  background: var(--c-kalk);
  border: 1px solid var(--c-lijn);
  font-size: var(--fs-klein);
  color: var(--t-body);
}

.op-zand .zone__gemeenten li {
  background: var(--c-kalk);
}

/* ---- Blogkaart ----------------------------------------------------------- */

.artikel__meta {
  font-size: var(--fs-klein);
  color: var(--t-zacht);
  margin-bottom: var(--s-2);
}

/* ---- Prosa binnen een dienstpagina --------------------------------------- */

.prosa h2 {
  margin-top: var(--s-16);
  margin-bottom: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-lijn);
}

.prosa h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prosa h3 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-3);
}

.prosa p + p {
  margin-top: var(--s-4);
}

.prosa ul {
  margin-top: var(--s-4);
  padding-left: 0;
}

.prosa ul li {
  position: relative;
  padding-left: var(--s-6);
  margin-top: var(--s-2);
}

.prosa ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--c-groen);
}


/* --- WordPress-aanvulling ---------------------------------------
   Bricks levert zijn eigen wrapper. Deze regels zorgen dat de opmaak van
   de statische build daar zonder dubbele padding in past. */
.brxe-container > .container { padding-inline: 0; }
body.bricks-is-frontend .container { width: 100%; }