/* =============================================================
   BOUWHUIS MEDIA — HOMEPAGE
   -------------------------------------------------------------
   Alleen wat deze pagina extra nodig heeft. Kleuren, maten en
   koppen komen uit tokens.css; staat hier een font-size die niet
   uit de koppenladder komt, dan is dat een fout.

   TWEE REGELS DIE OVERAL GELDEN
   1. Kaarten naast elkaar zijn even hoog. Elke rij hieronder is
      een grid met stretch, nooit losse blokken die uitlijnen op
      hun eigen inhoud.
   2. --ink-muted staat nergens in lopende tekst op wit. Die tint
      haalt 3,2 op 1 en dat is te weinig; hij is voor decoratie.
      Voor kleine grijze tekst is --ink-soft de goede (7,4 op 1).
   3. De merkkleur #F2C230 is een VLAK en geen tekstkleur. Op wit
      haalt geel 1,7 op 1, en wit erop precies zo veel. Op een geel
      vlak staat marineblauw (9,4). Moet er op licht tóch tekst in
      de merkkleur, dan is dat --brand-op-licht (6,3). Op een
      marineblauw vlak mag het geel wél tekst zijn.
   4. letter-spacing erft. Een klein kind van een grote kop krijgt
      de negatieve afstand van die kop mee en plakt aan elkaar.
      Zet hem daar altijd terug op 0.
   ============================================================= */


/* --- 1. DE HERO ---------------------------------------------
   Over de volle breedte, alles gecentreerd, en onderin de site
   die eruit komt.

   Hier stond een afgerond kader met marge eromheen. Dat maakte er
   een affiche van dat op de pagina ligt; dit hoort de bovenkant
   van de pagina zélf te zijn.

   Geen raster meer. Clean betekent hier dat er niets staat wat
   niets zegt, en een raster zei niets. */

.web-hero { padding: 0; }

.web-hero__kader {
  position: relative;
  overflow: hidden;
  /* Warm gebroken wit dat onderaan naar puur wit loopt, zodat de
     hero zonder streep overgaat in de sectie eronder.

     Warm en niet blauw, met opzet: met een blauw merk én blauwe
     grijstinten wordt een pagina koud. Een warme ondergrond onder
     een koel accent geeft het blauw juist meer nadruk. */
  background: linear-gradient(180deg,
    var(--surface-2) 0%,
    var(--surface-2) 68%,
    var(--surface) 100%);
  padding: calc(var(--kopbalk) + clamp(3.5rem, 2rem + 5vw, 7rem))
           var(--gutter)
           clamp(3.5rem, 2rem + 5vw, 7rem);
}

.web-hero__binnen {
  position: relative;
  /* Breed genoeg dat de eerste regel van de kop er in zijn geheel
     op past. Op 66rem moest de zin in drie stukken geknipt worden
     en werden alle drie de regels ongeveer even lang — dan wordt
     het blok een vierkant en leest het niet meer als een zin. */
  max-width: 82rem;
  margin: 0 auto;
  text-align: center;
}


/* De lead en de knoppen staan smaller dan de kop; die hoeven de
   breedte niet mee te gaan. */
.web-hero h1 {
  font-size: var(--fs-hero);
  line-height: var(--lh-groot);
  letter-spacing: var(--ls-groot);
  color: var(--ink);
  margin: 0 0 var(--space-5);
}
.web-hero h1 em { white-space: nowrap; }

/* Breed genoeg dat de zin op twee regels past. Op 44ch viel
   "niets." alleen op een derde regel, en een los woord onderaan
   een alinea leest als een fout. */
.web-hero__lead {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

.web-hero__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-7);
}

/* --- De drie punten als glazen pillen -----------------------
   Matglas: een half doorzichtig vlak met een vervaging erachter,
   een lichte rand bovenlangs en een zachte schaduw eronder. Het
   werkt alleen als er iets áchter zit om te vervagen — vandaar dat
   ze op het verloop van de hero staan en niet op puur wit.

   backdrop-filter kan niet elke browser. Zonder die eigenschap
   blijft de pil gewoon een licht vlak met een randje; dat is geen
   glas maar het is ook niet stuk. Zie de @supports hieronder. */
.web-hero__punten {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.web-hero__punten li {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.1rem .6rem .95rem;
  border-radius: var(--r-full);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);

  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .8);
  /* Twee schaduwen: een zachte eronder die hem laat zweven, en een
     haarlijn licht bínnen de bovenrand. Die tweede is wat glas van
     plastic onderscheidt — het is de rand die het licht vangt. */
  box-shadow:
    0 1px 1px rgba(18, 35, 63, .04),
    0 8px 20px rgba(18, 35, 63, .07),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .web-hero__punten li {
    background: rgba(255, 255, 255, .38);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
            backdrop-filter: blur(14px) saturate(180%);
  }
}

.web-hero__punten li:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 1px rgba(18, 35, 63, .05),
    0 12px 26px rgba(18, 35, 63, .10),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* Het vinkje staat op wit glas, dus niet in de merkkleur —
   geel haalt daar 1,7 op 1. De diepe tint haalt 6,3. */
.web-hero__punten svg { color: var(--brand-op-licht); flex: none; }


/* --- 2. DE KNOP MET HET RONDJE ------------------------------
   Een pil met de tekst en daarachter een rondje met een pijl.
   Het rondje is geen versiering: het maakt van de knop een ding
   met een richting, en dat scheelt bij een pagina waar de rest
   van de knoppen tekstlinks zijn. */

.btn--pil {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .55rem .55rem 1.4rem;
  border-radius: var(--r-full);
  background: var(--brand);
  /* Marineblauw en niet wit: wit op deze geeltint haalt 1,7 op 1. */
  color: var(--brand-ink);
  border: 0;
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0;
  box-shadow: var(--shadow-brand);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn--pil:hover  { background: var(--brand-hover); transform: translateY(-1px); }
.btn--pil:active { transform: translateY(0); }

.btn__pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--ink);
  color: #fff;
  transition: transform var(--t-fast) var(--ease);
}
.btn--pil:hover .btn__pijl { transform: translate(2px, -2px); }

/* De tweede actie is een tekstlink en geen tweede knop. Twee
   knoppen naast elkaar laten de bezoeker kiezen; hier is er één
   ding dat je wilt en één ding dat mag. */
.tekstlink {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.tekstlink:hover { text-decoration-color: var(--brand-hover); }


/* --- 3. DE VERGELIJKING -------------------------------------
   Twee kaarten, gelijke hoogte, gelijke onderkant. De knop in de
   rechterkaart wordt met margin-top:auto naar beneden geduwd, en
   de linkerkaart heeft daarom evenveel bodempadding — anders
   staan de twee onderranden alsnog niet gelijk. */

.vergelijk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.4vw, 1.75rem);
  align-items: stretch;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
}

.vgl {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

/* Links: wat het normaal kost. Rustig gehouden, niet afgekraakt —
   een doorgestreepte concurrent leest als reclame. */
.vgl--oud {
  background: var(--surface);
  border: 1px solid var(--line);
}
/* Rechts: wat het hier kost. Dit is de kaart waar de blik naartoe
   moet, dus die krijgt de rand en de schaduw. */
.vgl--nieuw {
  background: var(--surface);
  border: 2px solid var(--brand);
  box-shadow: var(--shadow-lg);
}

.vgl__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.vgl--nieuw .vgl__label { color: var(--brand-op-licht); }

.vgl__bedrag {
  margin: var(--space-3) 0 0;
  font-size: clamp(2rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: var(--ls-groot);
  font-weight: 700;
  color: var(--ink);
}
.vgl--oud .vgl__bedrag { color: var(--ink-muted); }

.vgl__onder {
  margin: var(--space-1) 0 var(--space-5);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}

.vgl__lijst { list-style: none; margin: 0; padding: 0; }
.vgl__lijst li {
  display: flex;
  gap: var(--space-3);
  padding: .6rem 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-soft);
}
.vgl__lijst svg { flex: none; margin-top: .28em; }
.vgl--oud   .vgl__lijst svg { color: var(--ink-muted); }
.vgl--nieuw .vgl__lijst svg { color: var(--brand-op-licht); }
.vgl--nieuw .vgl__lijst li  { color: var(--ink); }

/* Duwt de knop naar de onderkant, zodat beide kaarten even hoog
   blijven en de knop altijd op dezelfde lijn staat. */
.vgl .btn { margin-top: auto; }
.vgl__lijst + .btn { margin-top: var(--space-6); }


/* --- 4. WAT ER INBEGREPEN ZIT -------------------------------
   Hier stonden vijftien vinkjes. Dat werkte niet: een vinkje
   naast een blok van drie regels komt midden in die regels te
   hangen, en als álles inbegrepen is zegt het vijftiende vinkje
   niets meer.

   Nu drie genummerde kaarten met per regel een titel en daar
   direct onder één regel uitleg. Wat het leesbaar maakt is niet
   het icoon maar de hairline tussen de regels: daarmee kun je
   scannen zonder te lezen. */

.inbeg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  align-items: stretch;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
}

.inbeg__kaart {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
}

.inbeg__kop {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) clamp(1.25rem, 1rem + .8vw, 1.75rem);
  background: var(--brand-tint);
  border-bottom: 1px solid var(--line);
}
.inbeg__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0;
}
.inbeg__kop h3 {
  margin: 0;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}

.inbeg__lijst {
  margin: 0;
  padding: 0 clamp(1.25rem, 1rem + .8vw, 1.75rem);
}
.inbeg__lijst > div {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
}
.inbeg__lijst > div:last-child { border-bottom: 0; }

.inbeg__lijst dt {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.inbeg__lijst dd {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.55;
}

.inbeg__slot {
  margin: clamp(1.75rem, 1rem + 1.4vw, 2.5rem) auto 0;
  max-width: 60ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.inbeg__slot strong { display: block; color: var(--ink); font-size: var(--fs-body); }


/* --- 5. HANDGEBOUWD (donker) -------------------------------- */

.web-handwerk .section-head h2 { color: #fff; }

.web-handwerk .section-head p { color: var(--dark-text); }
.web-handwerk .eyebrow { color: var(--blauw-op-donker); }

.handwerk__rij {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.2vw, 1.75rem);
  align-items: stretch;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
}

.handwerk__blok {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--dark-line);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, .9rem + 1vw, 1.75rem);
}
.handwerk__blok h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: #fff;
}
.handwerk__blok p {
  margin: 0;
  color: var(--dark-text);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}


/* --- 6. DE VIER STAPPEN -------------------------------------
   Eén doorlopende lijn achter de nummers. Die lijn is het verschil
   tussen vier losse dingen en één weg van gesprek naar live. */

.wstappen {
  list-style: none;
  margin: clamp(2.5rem, 1.5rem + 2vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.2vw, 2rem);
  align-items: stretch;
  position: relative;
}

/* De lijn loopt door het midden van de nummers. Hij begint en
   eindigt binnen de rij, zodat er geen streepje buiten de eerste
   en de laatste stap uitsteekt. */
.wstappen::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  background: var(--line);
}

.wstap {
  display: flex;
  flex-direction: column;
  position: relative;
}

.wstap__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--brand);
  border: 1px solid var(--brand);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: var(--space-4);
  position: relative;   /* over de lijn heen */
}

.wstap h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.wstap p {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}


/* --- 7. DOMEIN ---------------------------------------------- */

.domein {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}
.domein__tekst h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-groot);
  letter-spacing: var(--ls-groot);
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-4);
}

.domein__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.domein__lijst li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--space-5);
}
.domein__lijst strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-bottom: .25rem;
}
.domein__lijst span {
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}


/* --- 8. DE PRIJSKAART --------------------------------------- */

.prijskaart {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: stretch;
  gap: 0;
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
}

.prijskaart__kop {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-right: 1px solid var(--line);
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}
.prijskaart__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-op-licht);
}
.prijskaart__bedrag {
  margin: var(--space-3) 0 0;
  display: flex;
  align-items: baseline;
  gap: .08em;
  font-size: clamp(3.2rem, 2rem + 3vw, 4.4rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: var(--ls-groot);
  color: var(--ink);
}
.prijskaart__euro { font-size: .5em; font-weight: 600; }

/* letter-spacing is relatief aan de lettergrootte, dus -.035em van
   een kop van 70px is -2,5px. Erft een woord van 17px dat mee, dan
   plakken de letters aan elkaar — "per maand" werd "permaand". Elk
   klein kind van een grote kop zet hem dus terug op nul. */
.prijskaart__per  {
  font-size: .24em;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: .3em;
  letter-spacing: 0;
}
.prijskaart__onder {
  margin: var(--space-4) 0 var(--space-6);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.prijskaart__gerust {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.prijskaart__gerust li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.prijskaart__gerust svg { color: var(--brand-op-licht); flex: none; }
/* De knop staat boven de geruststelling, maar het blok eronder mag
   de kaart niet uit balans trekken: alles wat erna komt schuift
   naar beneden zodat beide kolommen even hoog eindigen. */
.prijskaart__kop .btn { margin-top: auto; }

.prijskaart__extra { padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); }
.prijskaart__extra h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: var(--ink);
}
.prijskaart__sub {
  margin: 0 0 var(--space-5);
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.modules { list-style: none; margin: 0; padding: 0; }
.modules li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--line-soft);
}
.modules li:first-child { border-top: 0; padding-top: 0; }
.modules__naam strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
}
.modules__naam em {
  display: block;
  margin-top: .15rem;
  font-style: normal;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.modules__prijs {
  flex: none;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-body);
  white-space: nowrap;
}
.modules__prijs span { font-weight: 500; color: var(--ink-soft); font-size: var(--fs-micro); }


/* --- 7b. HET WERK ------------------------------------------
   Een rij kaarten die overloopt, met scroll-snap. Geen carrousel
   met absolute posities en een teller: een gewone rij die
   overloopt werkt op een telefoon, met een muis, met het
   toetsenbord en zonder javascript. De pijlen zijn een extra. */

.werk__kop {
  display: grid;
  grid-template-columns: minmax(0, .34fr) minmax(0, .66fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2rem, 1.2rem + 2vw, 3rem);
}
.werk__kop h2 {
  margin: 0;
  /* Klein voor een h2, en met opzet: dit is een label naast een
     alinea, geen kop boven een sectie. --fs-h3 is de maat uit de
     ladder die daarbij hoort. */
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: #fff;
}
.werk__kop p {
  margin: 0;
  max-width: 56ch;
  color: var(--dark-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}

/* De rij loopt tot voorbij de container, zodat de vierde kaart
   half in beeld staat. Dat half zichtbare stuk is de enige
   aanwijzing die iemand nodig heeft dat er meer is. */
.werk__rij {
  display: flex;
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: 0;
  padding-bottom: var(--space-3);
  margin-right: calc(var(--gutter) * -1);
  /* De schuifbalk zelf hoeft niet in beeld; de streepjes eronder
     zeggen hetzelfde en zien er beter uit. */
  scrollbar-width: none;
}
.werk__rij::-webkit-scrollbar { display: none; }
.werk__rij:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.werkkaart {
  position: relative;
  flex: none;
  /* Dezelfde verhouding als het voorbeeld (3:4), maar een slag
     kleiner — daar vulden de kaarten bijna het hele scherm.

     Niet kleiner dan dit: op 24vw pasten vier kaarten bijna
     precies in beeld en viel er nog 160px te schuiven. Dan is de
     rij geen rij meer maar een raster dat toevallig kan bewegen.
     Op 27vw steekt de laatste er half uit, en dat half zichtbare
     stuk is de enige aanwijzing die iemand nodig heeft. */
  width: clamp(16rem, 27vw, 25rem);
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--dark-2);
}
.werkkaart img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Een verloop onder de tekst en niet een egale balk: een balk
   knipt de foto af, een verloop laat hem doorlopen. */
.werkkaart__tekst {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(1.1rem, .8rem + 1vw, 1.6rem);
  background: linear-gradient(to top,
    rgba(6, 14, 26, .88) 0%,
    rgba(6, 14, 26, .68) 45%,
    rgba(6, 14, 26, 0) 100%);
  padding-top: 4rem;
}
.werkkaart__tekst h3 {
  margin: 0 0 .2rem;
  font-size: var(--fs-h3);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  color: #fff;
}
.werkkaart__tekst p {
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .78);
  letter-spacing: 0;
}

.werk__voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
}

/* Streepjes en geen bolletjes: bij zes kaarten wordt een rij
   bolletjes een kralensnoer, streepjes blijven leesbaar. */
.werk__streepjes { display: flex; gap: .5rem; }
.werk__streepjes span {
  width: 26px;
  height: 3px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .22);
  transition: background var(--t-fast) var(--ease);
}
.werk__streepjes span.is-aan { background: var(--brand); }

.werk__knoppen { display: flex; gap: var(--space-2); }
.rondknop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--dark-line);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rondknop:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.rondknop:disabled { opacity: .35; cursor: default; }
.rondknop:disabled:hover { background: transparent; border-color: var(--dark-line); }


/* --- 8b. WAAROM IK DIT ANDERS DOE ---------------------------
   Foto links, verhaal rechts. De foto is vierkant en niet rond:
   een rondje maakt er een avatar van, en dit is geen quote maar
   een stuk tekst van een persoon. */

.overmij__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: center;
}

.overmij__beeld { position: relative; }
.overmij__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
}

/* Het naamkaartje over de onderrand. Zo hoort de naam bij de foto
   zonder dat er een losse regel onder komt te hangen. */
.overmij__kaartje {
  position: absolute;
  left: clamp(.75rem, 2%, 1.25rem);
  bottom: clamp(-.75rem, -1.5vw, -.5rem);
  display: grid;
  gap: .05rem;
  padding: .7rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  letter-spacing: 0;
}
.overmij__kaartje strong { color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
.overmij__kaartje span   { color: var(--brand-op-licht); font-size: var(--fs-micro); font-weight: 600; }

.overmij__tekst h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-groot);
  letter-spacing: var(--ls-groot);
  color: var(--ink);
  margin: var(--space-4) 0 var(--space-5);
}
.overmij__tekst p {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-width: 58ch;
  margin: 0 0 var(--space-4);
}

.overmij__punten {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-6);
}
.overmij__punten li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--space-4);
  align-items: baseline;
}
.overmij__punten strong { color: var(--ink); font-size: var(--fs-body); font-weight: 600; }
.overmij__punten span   { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.55; }


/* --- 9. DE SLOT-CTA ------------------------------------------ */

.cta-final__lead {
  margin: var(--space-4) auto 0;
  max-width: 52ch;
  color: var(--dark-text);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
}


/* --- NADRUK OP EEN DONKER VLAK ------------------------------
   Het verloop uit style.css loopt van marineblauw naar het
   merkblauw. Op wit werkt dat; op een marineblauw vlak is de
   eerste helft onzichtbaar en de tweede te donker. Daar wordt het
   dus egaal lichtblauw — en dan moet ook -webkit-text-fill-color
   mee, anders wint die van color. */
.section--dark h2 em,
.section--dark h1 em {
  background: none;
  color: var(--blauw-op-donker);
  -webkit-text-fill-color: var(--blauw-op-donker);
}

/* =============================================================
   KLEINERE SCHERMEN
   -------------------------------------------------------------
   Drie stappen, en in deze volgorde: eerst vier kolommen naar
   twee, dan alles naar één. Tussenin niets slims — een raster dat
   op elke breedte iets anders doet is niet te controleren.
   ============================================================= */

@media (max-width: 1040px) {
  .inbeg           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .handwerk__rij   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .wstappen        { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-7); }
  .wstappen::before { display: none; }

  .domein          { grid-template-columns: 1fr; }
  .prijskaart      { grid-template-columns: 1fr; }
  .overmij__grid   { grid-template-columns: 1fr; }
  .overmij__beeld  { max-width: 22rem; }
  .inbeg           { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prijskaart__kop { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  /* --fs-hero heeft een ondergrens van 56px. Dat is gemaakt voor
     een korte kop over de volle breedte; op 390px brak "Een
     complete website. Geen kosten vooraf." in vijf regels. Een
     maat lager uit dezelfde ladder, en hij staat in vier. */
  .web-hero h1    { font-size: var(--fs-display); }
  .web-hero h1 em { white-space: normal; }

  .vergelijk       { grid-template-columns: 1fr; }
  .inbeg           { grid-template-columns: 1fr; }
  .overmij__punten li { grid-template-columns: 1fr; gap: .15rem; }
  .werk__kop       { grid-template-columns: 1fr; gap: var(--space-4); }
  .werkkaart       { width: min(78vw, 20rem); }
  .handwerk__rij   { grid-template-columns: 1fr; }
  .wstappen        { grid-template-columns: 1fr; row-gap: var(--space-6); }

  .modules li      { flex-direction: column; gap: var(--space-1); }
}